:root { 
    --bg-color: #f5f5f5; 
    --text-primary: #000;
    --text-blue:#00a0e9;
    --color-primary:#00a0e9;
    --color-top-icon:#00a0e9;

    --btn-green-color:#1afa29;

    --menu-toggle-color:#00a0e9;
    
    --logo-color1:#00a0e9;
    --logo-color2:#00a0e9;

    --btn-pic-txt-bgcolor:#f5f5f5;
    --btn-pic-txt-color:#00a0e9;

    --category-tab-text-color:#000;
     --category-tab-text-bgcolor:#fff;

    --menu-item-cs-bgcolor:#f5f5f5;
    --menu-item-bgcolor:#fff;
    --menu-item-border-color:#e8e8e8;
 
    --button-container-bgcolor:#000;

     --scroll-bgcolor:#fff;
     --scroll-bar-color:#ccc;

    --nav-bg-color:rgba(255, 255, 255, 0.8);
    --linear-gradient-color1:#313131;
    --linear-gradient-color2:#313131;
    --linear-gradient-color3:#000000;
    --text-secondary: rgba(255, 255, 255, 0.7); 
    --yellow-color: #fff000; 
    --color-red: #cc0000; 
    --blue-color: #00a0e9; 
    --blue-hover-color: rgba(0, 160, 233, 0.3); 
    --btn-hover-color: #212121; /* 修正了变量名 */
    --btn-hover-color2: rgba(79, 172, 254, 0.15);

    --color-input-bg: #fff;

    --nav-link-bgcolor:#00a0e9;
    
    --link-card-bgcolor: #fff;
    --link-card-border-color:#e8e8e8;
    --card-title-color:#000;
    
    --border-color: #e8e8e8; 
    --border-color2: #313131; 
    --form-bg-color: #fff;
    --bg-publish-card: #fff;
 

    --color-unimport: #999;
    --color-fa: #fafafa;
    --color-white-btn: rgba(255, 255, 255, 0.1);

    --form-submit-btn-color:#212121;

    --danger: #cc0000;
    --accent-gradient: linear-gradient(135deg, var(--yellow-color) 0%, var(--blue-color) 100%); 
    --nav-h: 68px;
    --sidebar-width: 220px;  
    --header-h: 60px;
    --input-height:42px;
    --tool-height:220px;
    --form-tt-height:60px;
    --margin: 10px;
    --margin15: 15px;
    --margin20: 20px;
    --radius8: 8px; 
    --header-font-size: 1.5rem;
    --top-margin: 68px;
    --dashed-color:#666;
     --bg-hover: #000; 
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    --text-title: #000; 
    --text-content: #aaaaaa; 
    --text-muted: #888888; 
    --text-meta: #777777;
 
    --color-error: #ff5252; 
    --color-success: #4CAF50; 
      
}
[data-theme="dark"] {
    --logo-color1:#fff000;
    --logo-color2:#fff;

    --menu-toggle-color:#fff;

    --btn-green-color:#1afa29;

    --bg-color: #080808; 
    --text-primary: #fff; 
    --color-primary:#fff000;
    --linear-gradient-color1:#FFE100;
    --linear-gradient-color2:#FFE100;
    --linear-gradient-color3:#00A0E9;
    
    --btn-pic-txt-bgcolor:rgba(0, 160, 233, 0.3);
    --btn-pic-txt-color:#fff;
    --color-top-icon:#fff;

    --menu-item-cs-bgcolor:#171717;
    --menu-item-border-color:rgba(20, 20, 20, 1); 
    --menu-item-bgcolor:#000;

    --scroll-bgcolor:rgba(255, 255, 255, 0.08);
    --scroll-bar-color:#606060;

    --button-container-bgcolor:rgba(79, 172, 254, 0.15);

    --category-tab-text-color:#fff;
    --category-tab-text-bgcolor:rgba(20, 20, 20, 1);

  

    --nav-bg-color:rgba(0, 0, 0, 0.5);
    --text-secondary: rgba(255, 255, 255, 0.7); 
    --yellow-color: #fff000; 
    --color-red: #cc0000; 
    --blue-color: #00a0e9; 
    --blue-hover-color: rgba(0, 160, 233, 0.3); 
    --btn-hover-color: #212121; /* 修正了变量名 */
    --btn-hover-color2: rgba(79, 172, 254, 0.15);

    --color-input-bg: #212121;
    
     --nav-link-bgcolor:#212121;

    --link-card-bgcolor: rgba(30, 30, 40, 0.4); 
    --link-card-border-color:rgba(20, 20, 20, 1);
    --card-title-color:rgba(255, 255, 255, 0.9);

    --border-color: rgba(20, 20, 20, 1); 
    --border-color2: #313131; 

    --form-bg-color: #171717;
    --bg-publish-card: #212121;

    --color-unimport: #999;
    --color-fa: #fafafa;
    --color-white-btn: rgba(255, 255, 255, 0.1);

     --form-submit-btn-color:rgba(255, 255, 255, 0.1);

    --danger: #cc0000;
    --accent-gradient: linear-gradient(135deg, var(--yellow-color) 0%, var(--blue-color) 100%); 
    --nav-h: 68px;
    --sidebar-width: 220px;  
    --header-h: 60px;
    --input-height:42px;
    --tool-height:220px;
    --form-tt-height:60px;
    --margin: 10px;
    --margin15: 15px;
    --margin20: 20px;
    --radius8: 8px; 
    --header-font-size: 1.5rem;
    --top-margin: 68px;
    --dashed-color:#666;
     --bg-hover: #000; 
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    --text-title: #ffffff; 
    --text-content: #aaaaaa; 
    --text-muted: #888888; 
    --text-meta: #777777;
 
    --color-error: #ff5252; 
    --color-success: #4CAF50; 
}

/* --- 动画相关 --- */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
    
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 基础样式 --- */
* { margin: 0; padding: 0; box-sizing: border-box;  }
body {background-color: var(--bg-color);color: var(--text-content); font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: var(--text-primary); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
blockquote, body, button, caption, dd, div, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, html, input, legend, li, menu, ol, p, pre, table, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
/*间距相关*/
.pb60{padding-bottom:120px;}
.mt10{margin-top:10px; }
.mb10{margin-bottom:var(--margin); }
.ml10{margin-left:var(--margin); }
.mt20{margin-top:20px;}
.mt5{margin-top:5px;}
/* --- Top Nav --- */
.navbar { position: fixed; top: 0; width: 100%; height: var(--nav-h); z-index: 1000; display: flex; align-items: center; padding: 0 20px; box-sizing: border-box; background-color: var(--nav-bg-color); backdrop-filter: blur(15px); }
.navbar .logo { width: 38px; height: 38px; flex-shrink: 0; margin-right: 30px; cursor: pointer; }
.navbar .logo-color1{fill:var(--logo-color1);}
.navbar .logo-color2{fill:var(--logo-color2);}
.navbar .nav-links { flex-grow: 1; }
.navbar .nav-links .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 10px; }
.navbar .nav-links .nav-menu .nav-item { position: relative;   cursor: pointer; }
.navbar .nav-links .nav-menu .nav-item .nav-link { text-decoration: none; white-space: nowrap; color: #999; font-size: 14px; display: block; padding: 10px 10px; border-radius: 8px; }
.navbar .nav-links .nav-menu .nav-item:hover .nav-link { color: #fff; background: var(--nav-link-bgcolor); }
.navbar .nav-links .nav-menu .nav-item .nav-link.active { color: #fff; background: var(--nav-link-bgcolor); }

/* --- 导航右侧 --- */
.navbar .nav-actions { display: flex; align-items: center; gap: 10px; }
.navbar .nav-actions .user-greeting { font-size: 14px; color: var(--color-unimport);white-space:nowrap; }
.navbar .nav-actions .user-greeting .user-name { color: var(--color-primary); font-weight: bold; margin-left: 5px; }

.settings-trigger-wrapper { position: relative; cursor: pointer;white-space:nowrap;  }
.settings-trigger-wrapper .btn-settings { display: flex; padding: 0 10px; cursor: pointer; font-size: 14px; justify-content: flex-start; align-items: center; height: 38px; background-color: var(--btn-pic-txt-bgcolor); border-radius: 8px; }
.settings-trigger-wrapper .btn-settings svg g{stroke:var(--color-top-icon);}
.settings-trigger-wrapper .btn-settings a { color: var(--btn-pic-txt-color); text-decoration: none; margin-left: 5px; }
.settings-trigger-wrapper .dropdown { position: absolute; left: auto; right: 0; top: 100%; transform: translateX(-50%) translateY(10px); background: rgba(20, 20, 30, 0.95); min-width: 140px; border-radius: 8px; list-style: none; padding: 0px 0; border: 1px solid var(--border-color); opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out; z-index: 1000; }
.settings-trigger-wrapper .dropdown li { border-top: 1px solid var(--border-color); }
.settings-trigger-wrapper .dropdown li a { display: block; padding: 10px 20px; color: #ccc; text-decoration: none; font-size: 14px; transition: 0.2s; }
.settings-trigger-wrapper .dropdown li a:hover { background: var(--btn-hover-color2); color: #fff; }

@media (min-width: 769px) { 
    .settings-trigger-wrapper:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(0%) translateY(0); } 
}

 
.menu-toggle { display: none; flex-direction: column; cursor: pointer; gap: 5px; z-index: 1001; margin-left: 10px; }
.menu-toggle span { width: 25px; height: 3px; background-color: var(--menu-toggle-color); border-radius: 2px; transition: 0.3s; }

/* --- Footer --- */
.footer {  height: 80px;  padding-top: 20px;   box-sizing: border-box; 
 line-height: 18px;  text-align: center;  color: var(--color-unimport);  font-size: 12px; }
.footer-fix-bottom{position:fixed !important; left: 0px;  bottom: 0px; right: 0px;  }
.footer a { color: var(--color-unimport); font-weight: 700; text-decoration: none; }
.footer span { color: var(--color-unimport); cursor: pointer; font-weight: 700; }
 

/* --- 弹窗提示 --- */
#popup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 20px 20px;
    border-radius: 8px;
    color:#000;
    text-align: center;
    width: 350px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    opacity: 0; 
    top: 300px; 
    transition: all 0.5s ease; 
    z-index: 99999;
}
 
/* --- 复选框 --- */
.checkbox-icon { width: 20px; height: 20px; margin-right: 10px; display: block; position: relative; cursor: pointer; font-size: 15px; user-select: none; }
.checkbox-icon input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkbox-icon .checkmark { display: inline-block; position: relative; top: 0; left: 0; height: 1.3em; width: 1.3em; background-color: transparent; border: 1px solid #666; border-radius: 5px; }
.checkbox-icon input:checked ~ .checkmark { background-color: transparent; border: 1px solid var(--blue-color); }
.checkbox-icon .checkmark:after { content: ""; position: absolute; display: none; }
.checkbox-icon input:checked ~ .checkmark:after { display: block; border-color: var(--blue-color); }
 
.checkbox-icon .checkmark:after { left: 0.45em; top: 0.25em; width: 0.25em; height: 0.5em; border: 2px solid #666; border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); }
 /* --- 到期通知 --- */
 .time-out-notice{font-size:14px;padding-bottom:20px;text-align:center;}
 .time-out-notice a{text-decoration:none;color:var(--yellow-color);}
/* --- 弹窗表单 --- */
.box_form_out { position: fixed; justify-content: center; align-items: center; display: flex; inset: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 999; padding: 20px; }
.box_form_in { position: relative; background-color: var(--form-bg-color); border-radius: 12px; max-width: 450px; min-width: 300px; max-height:80%; overflow-y:auto; padding: 0px 25px 25px 25px; transform: scale(0.95); transition: all 0.3s ease; }
.box_form_in .box_tt {position:sticky; padding-top:var(--margin); height:var(--form-tt-height);line-height:var(--form-tt-height); font-size: 20px; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: var(--margin); }
.box_form_in .btn_form_close { position: absolute;cursor:pointer; 
                               text-align: center; align-items: center; justify-content: center; right: 10px; 
                             
                               z-index:99;
                               top: 10px; width: 50px; height: 50px; cursor: pointer; }
.box_form_in .btn_form_close svg { width: 15px; height: 15px; transition: transform 0.5s ease; }
 .box_form_in .btn_form_close svg path{fill:var(--text-primary);}
.box_form_in .btn_form_close:hover svg { transform: rotate(360deg); }

.box_form_in .data-list { display: flex;  flex-direction: column; max-height: 360px; overflow-y: auto; margin-top: 20px; }
.box_form_in .data-list .li { display: flex; justify-content: space-between; background: var(--btn-hover-color); padding: 10px; border-radius: 8px; margin-bottom: 10px; }
.box_form_in .data-list .li label { font-size: 15px; font-weight: 700; }
.box_form_in .data-list .li span:first-child { color: #00a0e9; cursor: pointer; }
.box_form_in .data-list .li span:nth-child(2) { color: #999; margin-left: 10px; cursor: pointer; }
.box_form_in .form_tip { text-align: left; padding-top: 20px; }

.box_form_in button:active { scale: 0.95; }
.box_form_in .form { display: flex; flex-direction: column; }
 
.box_form_in .form-submit-btn { 
    width: 100%;
    background-color: var(--form-submit-btn-color);
    color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0px 12px;
    height:var(--input-height);
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box_form_in .form-submit-btn:hover { background-color: var(--yellow-color); color: #000; }
.box_form_in .signup-link { font-size: 14px; color: var(--color-unimport); height: 32px; line-height: 32px; padding: 10px; text-align: center; cursor: pointer; align-self: center; font-weight: 500; }
.box_form_in .signup-link .link { font-weight: 400; color: var(--yellow-color); }
.box_form_in .link:hover { text-decoration: underline; }

.error-msg { padding: 10px 0; font-size: 12px; color: var(--color-red); text-align: right; display: none; }

.loading-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-submit-btn.loading { opacity: 0.7; cursor: not-allowed; }

.input_tt{color:var(--blue-color);border-left:5px solid var(--blue-color); padding-left:var(--margin)}
.input_ct { position: relative; margin-bottom: 10px; }
.input_ct input { width: 100%;height:var(--input-height); box-sizing: border-box; color: var(--text-primary); padding: 0px 15px;   border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--color-input-bg); font-size: 16px; outline: none; }
.input_ct input:focus { border: 1px solid #fff; }
.input_ct .input_btn { position: absolute; left: 0px; right: 0; top: 0; height: 100%; padding: 0 15px; background: none; border: none; color: #3B82F6; cursor: pointer; transition: color 0.2s ease; }

.box_tag { display: flex; gap: 8px; margin-top: var(--margin);flex-wrap: wrap; }
.tag { background: var(--color-fa); padding: 5px 8px; cursor: pointer; font-size: 12px; color: #666; border-radius: 5px; }
.tag.cs { background: var(--yellow-color); color: #000; cursor: default; }

 
/* 

.color_basic{color:#00a0e9; }
.color_red{color:#cc0000;}
.err_box{padding:20px; text-align:center;color:#999;font-size:12px;}
.w{font-weight:700;}
.container {z-index:1; padding-bottom:100px; background-color: transparent; box-sizing: border-box; overflow-y:auto; overflow-x:hidden; }
.ct_top {position:fixed;top:0px;  width:100%;  display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 30px; height: 60px; background: #000; opacity: 0.7; z-index: 1000; }
.ct_top .t_left { display: flex; width: 100%; justify-content: flex-start; }
.ct_top .t_left .logo { width: 38px; height: 38px; margin-top: 11px; }
.ct_top .t_left .logo img { width: 38px; height: 38px; }
.ct_top .t_left .menu { position: relative; display: flex; justify-content: start; align-items: start; margin: 11px 0 0 30px; width: 100%; }
.ct_top .t_left .menu .in_box { position: absolute; left: 0px; top: 0px; display: flex; justify-content: flex-start; width:100%; }
.ct_top .t_left .menu .in_box .m_li { margin: 0 15px; font-size: 15px; height: auto;white-space: nowrap;   text-align:center; }
.ct_top .t_left .menu .m_li a { color: #666; padding: 0px; text-decoration: none; display: block; height: 38px; line-height: 38px; display: block; }
.ct_top .t_left .menu .m_li a.cs { color: #FFE100; border-bottom: 2px solid #FFE100; display: block; }
.ct_top .t_left .menu .m_li .li { display: none; }
.ct_top .t_left .menu .m_li:hover { background: #00A0E9; border-radius: 10px; padding: 0 0 10px 0; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li { display: block; padding: 0px 10px; z-index: 999; height: 32px; line-height: 32px; z-index: 999; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li a { color: #fff; text-decoration: none; height: 32px; line-height: 32px; border-top: 1px solid #000; }
.ct_top .t_left .menu .m_li:hover .li a:hover { line-height: 32px; border-radius: 16px; border-top: none; color: #000; height: 32px; background: #fff; text-decoration: none; font-size: 15px; }

.ct_top .t_right { display:flex;justify-content:flex-end; }
.ct_top .t_right .btn_android{display:flex; padding:0 10px;cursor:pointer;  justify-content:flex-start;align-items:center;height:38px;margin-top:11px;background:#021336;border-radius:8px;}
.ct_top .t_right .btn_android a{color:#fff;text-decoration:none;margin-left:5px;}

.ct_top .t_right  .box_setting {width:100px;margin-top: 11px; height:auto; height:38px; border-radius: 5px; background:#021336;border-radius:8px; }
.ct_top .t_right  .box_setting .btn_setting { display: flex; justify-content: center; align-items: center; padding: 6px 12px; gap: 5px; height: 26px; border: none; background: none; border-radius: 8px; cursor: pointer; }
.ct_top .t_right  .box_setting .box_menu{display:none;}
.ct_top .t_right  .box_setting:hover {  background: #00A0E9;height:290px;   }
.ct_top .t_right  .box_setting:hover .box_menu{display:block; padding:0px;margin:0px; }
.ct_top .t_right  .box_setting:hover .box_menu div{ padding: 7px 7px 7px 0px;margin-right:10px; font-size: 14px; color: #fff; border-bottom: 1px solid #0087cb; cursor: pointer; }

.ct_top .t_right .box_user_info{  color:#fff;font-size:14px;white-space: nowrap; display:flex;justify-content:center;align-items:center; height:100%;margin-left:10px; } 
.ct_top .t_right .box_user_info .login_out{color:#fff;cursor:pointer;font-weight:700;margin-left:8px;}
.ct_top .t_right  .btn_upgrade {width:80px;color:#000;cursor:pointer; display:block;text-decoration:none; margin-right:10px; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#fff000;text-align:center; }
.ct_top .t_right  .btn_login {width:80px;color:#fff;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#00a0e9;text-align:center; }
.ct_top .t_right  .btn_reg {width:80px;color:#000;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#FFE100;text-align:center; }
.btn_android{margin-left:10px;font-size:12px;margin-left:10px;font-size:14px;white-space: nowrap;display:flex;justify-content:center;align-items:center; height:100%; } 

@media (min-width: 100px) and (max-width: 1024px) {
.ct_top { position: absolute; left: 0px; top: 0px; right: 0px; display: flex; justify-content: space-between; box-sizing: border-box; padding: 0 1rem; height: 60px; background: #000; opacity: 0.7; z-index: 1000; }
.ct_top .t_left { display: flex; width: 100%; justify-content: flex-start; }
.ct_top .t_left .logo { width: 38px; height: 38px; margin-top: 11px; }
.ct_top .t_left .logo img { width: 38px; height: 38px; }
.ct_top .t_left .menu { display:none; }
.ct_top .t_left .menu .in_box { position: absolute; left: 0px; top: 0px; display: flex; justify-content: flex-start; width: 10000px; }
.ct_top .t_left .menu .in_box .m_li { margin: 0 0.5rem; font-size: 15px; height: auto; }
.ct_top .t_left .menu .m_li a { color: #999; padding: 0 10px; text-decoration: none; display: block; height: 38px; line-height: 38px; display: block; }
.ct_top .t_left .menu .m_li a.cs { color: #FFE100; border-bottom: 2px solid #FFE100; display: block; }
.ct_top .t_left .menu .m_li .li { display: none; }
.ct_top .t_left .menu .m_li:hover { background: #00A0E9; border-radius: 10px; padding: 0 0 10px 0; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li { display: block; padding: 0px 10px; z-index: 999; height: 32px; line-height: 32px; z-index: 999; color: #fff; }
.ct_top .t_left .menu .m_li:hover .li a { color: #fff; text-decoration: none; height: 32px; line-height: 32px; border-top: 1px solid #000; }
.ct_top .t_left .menu .m_li:hover .li a:hover { line-height: 32px; border-radius: 16px; border-top: none; color: #000; height: 32px; background: #fff; text-decoration: none; font-size: 15px; }
.ct_top .t_right { display:flex;justify-content:flex-end; }*/
/*.ct_top .t_right  .box_setting { width: 100px; margin-top: 11px; height: 38px; border-radius: 5px; overflow: hidden; z-index: 999; }
.ct_top .t_right  .box_setting:hover { height: 150px; background: #00A0E9; overflow: inherit; }
.ct_top .t_right  .box_setting .li { padding: 7px 7px 7px 0px; font-size: 14px; color: #fff; border-bottom: 1px solid #d2d2d2; cursor: pointer; }
.ct_top .t_right  .box_setting .btn_setting { display: flex; justify-content: center; align-items: center; padding: 6px 12px; gap: 5px; height: 26px; border: none; background: none; border-radius: 8px; cursor: pointer; }
*/
/*.ct_top .t_right .box_user_info{  color:#fff;font-size:14px;white-space: nowrap; display:flex;justify-content:center;align-items:center; height:100%;margin-left:10px; } 
 
.ct_top .t_right  .btn_login {width:80px;color:#fff;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#00a0e9;text-align:center; }
.ct_top .t_right  .btn_reg {width:80px;color:#000;cursor:pointer; margin-top: 11px; height: 38px; display: flex;  justify-content: center; align-items: center; border-radius: 5px; overflow: hidden; z-index: 999; background:#FFE100;text-align:center; }
 
}
.lable { line-height: 20px; font-size: 14px; color: #fff; font-family: sans-serif; letter-spacing: 1px; }
.ct_top .t_right .btn_login:hover .svg-icon { animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.footer { position: fixed; opacity:0.8; height:80px;padding-top:20px;  box-sizing:border-box; left: 0px;   bottom: 0px;line-height:18px; right: 0px; text-align: center; color: #ccc; font-size: 12px; }
.footer a { color: #fff; font-weight: 700; text-decoration:none;}
.footer span{color:#666;cursor:pointer;font-weight: 700; }


.add-btn { background: var(--yellow-color); color: #000; opacity:0.7; border: none; padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer; }
.add-btn:hover{opacity:1;}

.input_group { margin-bottom: 16px; }*/
 

/*说明文字*/
/*.instructions {text-align: center; color: #6b7280; font-size: 14px; margin-top: 15px;}
 
.dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 80%; max-width: 600px; padding: 20px; }
h1 { font-size: 24px; margin-bottom: 20px; color: #333; }
h2 { font-size: 20px; margin-top: 20px; margin-bottom: 10px; color: #555; }
h3 { font-size: 16px; margin-top: 10px; margin-bottom: 5px; color: #777; }
ul { list-style-type: none; padding: 0; margin: 0; }
li { margin-bottom: 5px; color: #999; }*/

/*左侧布局*/
.box-left { position: fixed; left: 0px; top: var(--top-margin);bottom:0px;  width: var(--sidebar-width); background-color:var(--bg-color); color: #fff;padding: 10px;   overflow: hidden; }

.box-left .section { margin-bottom: 20px;  }
.menu-title { display: flex;color:var(--text-primary);  align-items: center;font-weight:700;  padding: 0 10px;height:var(--header-h);line-height:var(--header-h); font-size: 17px; }
.menu-title .arrow { margin-right: 10px; }

.menu-item { padding: 0px 15px;display:flex;justify-content:flex-start; height:46px;background:var(--menu-item-bgcolor); color:var(--color-unimport); border-radius: 8px; cursor: pointer; margin-bottom: 5px;  align-items: center; font-size: 0.95rem;border:1px solid var(--menu-item-border-color) }
.menu-item svg{width:18px;height:18px;margin-right:var(--margin)}

.menu-item .file_type_doc path{stroke:var(--text-primary);fill:none;}
.menu-item .file_type_doc rect{stroke:var(--text-primary);fill:none;}

.menu-item .file_type_pic path{stroke:var(--text-primary);fill:none;}
.menu-item .file_type_pic rect{stroke:var(--text-primary);fill:none;}

.menu-item .file_type_video path{stroke:var(--text-primary);fill:none;}
.menu-item .file_type_video rect{stroke:var(--text-primary);fill:none;}

.menu-item .file_type_audio path{stroke:var(--text-primary);fill:none;}
.menu-item .file_type_audio rect{stroke:var(--text-primary);fill:none;}

.menu-item .file_type_bt path{fill:var(--text-primary);}
.menu-item .file_type_bt rect{stroke:var(--text-primary);fill:none;}

.menu-item .file_type_another path{stroke:var(--text-primary);fill:none;}
.menu-item .file_type_another rect{stroke:var(--text-primary);fill:none;}

.menu-item.cs { background: var(--menu-item-cs-bgcolor); color:var(--text-primary);font-weight:700;}
.menu-item.cs a{color:var(--text-primary);}
.menu-item.cs div{color:var(--text-primary);}
.menu-item:hover {background: var(--menu-item-cs-bgcolor); color:var(--text-primary);font-weight:700;}
.menu-item:hover a{color:var(--text-primary);}
.menu-item:hover div{color:var(--text-primary);}
.menu-item img { width: 18px; height: 18px; display: block;margin-right: 10px;  }
.menu-item div { color: var(--color-unimport); }
.menu-item a {   color: var(--color-unimport);text-decoration:none;display:block;}
.menu-item .icon { width: 24px; height: 24px; margin-right: 15px; } 

/*右侧布局*/
/*右侧 工具条*/
.box-top-tools { position: fixed; top: calc(var(--top-margin) + var(--margin)); left:calc(var(--sidebar-width) + var(--margin)); right: 10px; height: var(--header-h); border-radius:8px; background-color: transparent; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; }
.box-top-tools .top-tools-left{display:flex;justify-content:flex-start; align-items:center; color:var(--text-primary);font-size:17px;font-weight:700;} 

/*工具条中的 左侧的按钮*/
 .box-top-tools .box_basic_btns{display:flex;justify-content:start;}
.box-top-tools .box_basic_btns .yellow_btn { background-color: #00A0E9; color: #fff; border: none; padding: 0 20px; height: 36px; border-radius: 8px; cursor: pointer; }
.box-top-tools .button-container { display: flex; justify-content: start; align-items: center; height: 36px; border-radius: 8px; background-color:var(--button-container-bgcolor); overflow: hidden; }
.box-top-tools .button-container button { display: flex; align-items: center; border: none; padding: 0 15px; color: #fff; background-color: transparent; cursor: pointer; font-size: 14px; }
.box-top-tools .button-container img { width: 13px; display: block; }
.box-top-tools .button-container .line_mid { width: 1px; height: 10px; background-color:var(--color-unimport); } 
/*搜索框*/
 .box_search{ height:36px; background-color: #fff;border-radius:8px;overflow:hidden; border:1px solid #fff;  }
 .box_search .search{display:flex;align-items:center; overflow:hidden; justify-content:space-between; width:100%; border-radius:8px;background-color:transparent; }
 .box_search .search input{width:180px;color:#000; padding-left:20px; height:36px; line-height:36px; border:0px;outline: none; font-size:15px; background-color:transparent; }
 .box_search .search .btn_search{width:60px; border-radius:8px; cursor:pointer; line-height:36px;font-size:14px; background-color:#000;color:#fff;text-align:center;}

.box-top-tools .top-tools-right{display:flex;justify-content:flex-end;color:#fff;gap:var(--margin);align-items:center;}
 
.box_right { position: fixed;color:#fff; background-color:transparent; left:calc(var(--sidebar-width) + var(--margin) + var(--margin)); top: calc(var(--top-margin) + var(--margin) + var(--header-h)); right: 10px; bottom:125px;  } 

/*滚动条*/
/* 左侧滚动条样式调整 */
.bottom-scroll::-webkit-scrollbar { height: 10px; }
/* 滚动条轨道 */
.bottom-scroll::-webkit-scrollbar-track { background: var(--scroll-bgcolor); border-radius: 4px; margin: 5px 0; }
/* 滚动条滑块 */
.bottom-scroll::-webkit-scrollbar-thumb { background: var(--scroll-bar-color);; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
/* 滚动条滑块悬停效果 */
.bottom-scroll::-webkit-scrollbar-thumb:hover { background: #909090; background-clip: padding-box; }
/* 滚动条滑块激活状态 */
.bottom-scroll::-webkit-scrollbar-thumb:active { background: #aaaaaa; }
/* 向上按钮的样式 */
.bottom-scroll::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" viewBox="0 0 16 16"><path d="M8 4L4 8h8L8 4z"/></svg>'); background-repeat: no-repeat; background-position: center; }
/* 向下按钮的样式 */
.bottom-scroll::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" viewBox="0 0 16 16"><path d="M8 12l4-4H4l4 4z"/></svg>'); background-repeat: no-repeat; background-position: center; }

.scroll-right{overflow-y:auto;overflow-x:hidden;}
.scroll-right::-webkit-scrollbar {width: 10px;}
.scroll-right::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.08); border-radius: 4px; margin: 5px 0;}
.scroll-right::-webkit-scrollbar-thumb {background: #606060;border-radius: 4px;border: 2px solid transparent; background-clip: padding-box;}
.scroll-right::-webkit-scrollbar-thumb:hover {background: #909090; background-clip: padding-box;}
.scroll-right::-webkit-scrollbar-thumb:active {background: #aaaaaa; }
.scroll-right::-webkit-scrollbar-button:single-button:vertical:decrement {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" viewBox="0 0 16 16"><path d="M8 4L4 8h8L8 4z"/></svg>');
    background-repeat: no-repeat; background-position: center;}
.scroll-right::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" viewBox="0 0 16 16"><path d="M8 12l4-4H4l4 4z"/></svg>');
    background-repeat: no-repeat; background-position: center;}
/*工具条 如搜索*/
.box_right .header_tool{display:none;}
@media (min-width: 100px) and (max-width: 1024px) {
.box_right .header_tool{display:block;margin-bottom:var(--margin); padding:0px;box-sizing:border-box;}
.box_right .header_tool .search_tool{position:relative; display:flex;justify-content:flex-start; align-items:center;border-radius:8px;background:#f2f2f2;height:38px;padding:0px 10px}
.box_right .header_tool .search_tool img{height:22px;width:auto;display:block;}
.box_right .header_tool .search_tool input{height:30px;outline: none;border:0px;padding:0px 10px;margin-left:0px; width:100%; background-color:transparent; }
.box_right .header_tool .search_tool .btn_search{position:absolute;right:5px; width:60px; height:32px;display:flex;align-items:center;justify-content:center;font-size:12px; cursor:pointer; border-radius:8px;  background-color:#000;color:#fff;text-align:center;}
.box_right .header_tool .type_tab_list{margin-top:5px;display:flex;justify-content:start;}
.box_right .header_tool .type_tab_list .tag_type{ margin-right:5px; background:#f2f2f2;padding:5px 10px;cursor:pointer; font-size:12px;color:#666;border-radius:8px;}
.box_right .header_tool .type_tab_list .tag_type.cs{background:#666;color:#fff;cursor:default; }
}
.special-section { padding: 10px; font-size: 1.1em; margin-top: 10px; }


.icon { font-size: 12px; }
.text { font-weight: normal; margin-left: 5px; }

@media (min-width: 100px) and (max-width: 1024px) {
.box-left { display:none; }
.box_right { position: fixed;color:#fff; background-color:transparent; left: var(--margin); top: calc(var(--top-margin) + var(--margin) + var(--header-h)); right: 10px; bottom:80px; }

.box-top-tools { position: fixed; top: calc(var(--top-margin) + var(--margin)); left:var(--margin);  right: 10px; height: 50px; border-radius:8px;   padding: 0 0px; display: flex; justify-content: space-between; align-items: center; }
.box-top-tools .box_basic_btns{display:flex;justify-content:start;}
.box-top-tools .box_search{display:none;}
}
 
/*确认按钮*/
 
.btm_toos{display:none;}


.opctityto0 {
animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0;}
}
.opctityto1 {
animation: fadeInt 0.5s ease-in-out forwards;
}

@keyframes fadeInt {
from { opacity: 0; }
to { opacity: 1;}
} 

/* --- 按钮样式 --- */
.btn { border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--yellow-color); color: #000; opacity:0.7;}
.btn-primary:hover{opacity:1;}
.btn-border { background-color:transparent;opacity:0.5;border:1px solid  var(--yellow-color);color:var(--yellow-color); }
.btn-border:hover{opacity:1;}
.btn-border-blue { background-color:transparent; border:1px solid  var(--blue-color);color:var(--blue-color); }
.btn-border-blue:hover{opacity:1;}
.btn-ghost { background: var(--bg-color); color: #fff; }
.btn-danger { background: var(--bg-color); color: var(--danger); font-size:30px;}
.btn-gray { background-color: var(--color-white-btn);  color:rgba(255,255,255,0.5);}
.btn-gray:hover{color:#fff;}
.btn-full-width{width:100% !important;}

.btn-green{background-color: transparent;  color:var(--btn-green-color);border:1px solid var(--btn-green-color);}
.btn-sm { padding: 4px 8px !important; font-size: 0.75rem; border-radius: 6px; display:flex}
.btn-margin{margin:10px;}
.btn-edit{display:flex;justify-content:space-between;padding:5px 10px;font-size:14px;}
.btn-edit svg{height:14px;margin-right:8px;}
.btn-delete{display:flex;font-size:14px;color:var(--color-unimport) !important;opacity:0.8 !important; justify-content:space-between;padding:5px 10px;border:none;}
.btn-delete svg{height:14px;margin-right:8px;}
.btn-delete-all{background-color: #cc0000; color: #fff; font-size: 14px; display: none;}
.btn-pic-txt { display: flex; padding: 0 10px;text-decoration: none;  cursor: pointer; font-size: 14px; justify-content: flex-start; align-items: center; height: 38px; background-color: var(--btn-pic-txt-bgcolor); border-radius: 8px; }
.btn-pic-txt a { color: var(--btn-pic-txt-color); text-decoration: none; margin-left: 5px;  }
.btn-pic-txt span { color: var(--btn-pic-txt-color); text-decoration: none; margin-left: 5px;  }
.btn-pic-txt svg{}
.btn-pic-txt svg path{fill:var(--color-top-icon);}

.confirm-btn { width: 100%; background-color: var(--color-white-btn); color: white; border: none; border-radius: 8px; padding: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; }
.confirm-btn:hover { background-color: var(--yellow-color);color:#000; }
.confirm-btn .icon { margin-right: 8px; }
/* --- 按钮样式结束 --- */
/*上传进度条*/
#progressInfo { position: fixed; z-index: 999; right: 20px; bottom:80px; padding: 20px; border-radius: 10px; background: #000; display: none;max-height:500px;overflow-y:auto;overflow-x:hidden; } 
.UploadInfo { display: flex; justify-content: flex-start; align-items: center; }
.UploadInfo .UploadIndex {width:100px;overflow:hidden; color: #666; font-size: 12px; color: #999;white-space:nowrap; }
.UploadInfo .UploadProcess { margin-left: 20px; background: #00a0e9; width: 100px; height: 22px; }
.progress-container { width: 200px; display: flex; justify-content: flex-end; padding-left: 10px; align-items: center; }
.progress-container .bar { width: 130px; background-color: #ccc; height: 10px; border-radius: 5px; overflow: hidden; }
.progress-container .bar .progress { width: 0%; height: 10px; border-radius: 5px; background-color: #FFE100; text-align: center; line-height: 10px; color: white; }
.progress-container .progress_num { width: 50px; padding-left: 10px; font-size: 12px; color: #999; }

.progress-ct { width: 100%; max-width: 600px; margin: 15px 0; }
.progress-ct  .progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #333; font-size: 18px; }
.progress-ct  .progress-bar { height: 8px; background-color: #f2f2f2; border-radius: 4px; overflow: hidden;   }
.progress-ct  .progress-fill { height: 100%; border-radius: 4px; background: #00a0e9;   }

/*通知区*/
.notification_box { position: fixed; display: flex;max-width:90%; flex-direction: column; right: -300px; top: 80px; z-index: 999; }
.notification_box .notification { position: relative;border:1px solid #fff; background-color: rgba(255,255,255,0.9);backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);  padding: 20px 20px; border-radius: 10px; height: auto;  max-width: 300px; overflow: hidden; margin-bottom: 5px; animation: slideIn 0.5s forwards; display: flex; flex-direction: column; padding: 8px 38px 8px 50px; }
.notification h3 { margin: 0; font-size: 16px; color: #000; }
.notification p { margin: 0; font-size: 12px; color: #999; }
.icon_notification { position: absolute; top: 10px; left: 10px; background: none; border: none; font-size: 28px; font-weight: 700; color: #cc0000; cursor: pointer; animation: shake 1.5s infinite; }
@keyframes shake { 0% { transform: rotate(0deg); } 10% { transform: rotate(-15deg); } 20% { transform: rotate(15deg); } 30% { transform: rotate(-15deg); } 40% { transform: rotate(15deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.close-btn { position: absolute; top: 0px; right: 10px; background: none; border: none; font-size: 28px; font-weight: 700; color: #cc0000; cursor: pointer; }
.close-btn:hover { color: #333; }
@keyframes slideIn { to { right: 20px; } }

.version-table { width: 100%; border-collapse: collapse; margin-bottom: 30px;font-size:12px; }
.version-table, .version-table th, .version-table td { border: 1px solid var(--border-color2); }
.bg_color { background-color: var(--btn-hover-color2);}
.version-table th {  font-weight: bold; text-align: left; padding: 10px 15px; }
.version-table td { padding: 12px 15px; vertical-align: top; }
.version-table .version-number { width: 25%; font-weight: 600; text-align: right; color: #999; }
.version-table .update-content { width: 65%; }
.version-table .fun-content { width: 35%; }

/* 横屏平板设备 */
@media (min-width: 768px) and (max-width: 1024px)  {
    .navbar { padding: 0 15px; }
    .logo { margin-right: 0; order: 1; }
    .nav-actions { margin-left: auto; order: 2; gap: 10px; }
    .menu-toggle { display: flex; order: 3; }
    .user-greeting { display: none; }
    .nav-links { position: fixed; top: 70px; right: -100%; width: 100%; height: calc(100vh - 70px); background: rgba(10, 10, 15, 0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; padding: 20px; transition: right 0.3s ease-in-out; order: 4; box-sizing: border-box; }
    .nav-links.active { right: 0; }
    .nav-menu { width: 100%; flex-direction: column; gap: 0; }
    .nav-item { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .nav-link { padding: 15px 10px; display: block; }
    .nav-item .dropdown { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; border: none; box-shadow: none; padding-left: 20px; }
    
    .btn-pic-txt a, .btn-pic-txt span { display: none; }

    .settings-trigger-wrapper .dropdown { position: absolute; top: 40px; right: 0; width: 130px; background: rgba(30, 30, 40, 0.98); transform: translateY(10px); opacity: 0; visibility: hidden; }
    .settings-trigger-wrapper.active .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    
    .settings-trigger-wrapper a { display: none; }
}
/* --- 移动端 Nav 适配 --- */
@media (max-width: 768px) {
    .bottom-scroll::-webkit-scrollbar { height: 5px; }

    .notification_box{top:78px !important;}
    .navbar { padding: 0 15px; }
    .logo { margin-right: 0; order: 1; }
    .nav-actions { margin-left: auto; order: 2; gap:5px !important;}
    .menu-toggle { display: flex; order: 3; }
    .user-greeting { display: none; }
    .nav-links { position: fixed; top: 70px; right: -100%; width: 100%; height: calc(100vh - 70px); background: rgba(10, 10, 15, 0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: flex-start; padding: 20px; transition: right 0.3s ease-in-out; order: 4; box-sizing: border-box; }
    .nav-links.active { right: 0; }
    .nav-menu { width: 100%; flex-direction: column; gap: 0; }
    .nav-item { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .nav-link { padding: 15px 10px; display: block; }
    .nav-item .dropdown { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; border: none; box-shadow: none; padding-left: 20px; }
    
    .btn-pic-txt a, .btn-pic-txt span { display: none; }

    .settings-trigger-wrapper .dropdown { position: absolute; top: 40px; right: 0; width: 130px; background: rgba(30, 30, 40, 0.98); transform: translateY(10px); opacity: 0; visibility: hidden; }
    .settings-trigger-wrapper.active .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    
    .settings-trigger-wrapper a { display: none; }
    /*表单*/
    .box_form_in{max-width:90vw !important;max-height:90vh !important;}
    /*按钮*/
     .btn { border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.7rem; font-weight: 600; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; }
     .btn-green{background-color: transparent;  color:var(--btn-green-color);border:1px solid var(--btn-green-color);}

     .btm_toos{position:fixed;left:0px;bottom:0px;right:0px;display:flex;text-align:center;align-items:center;justify-content:center;background-color:rgba(0,0,0,0.1);padding:10px 0;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);}
    .btm_toos .btm_btn{width:80px;}
    .btm_toos .btm_btn .img{width:80px;}
    .btm_toos .btm_btn .img img{width:30px;}
    .btm_toos .btm_btn .tt{height:20px;font-size:12px;}
}