/* ============================================================
   小菊哥 · 左侧功能栏 HUD 重设计 v6 — 竖向玻璃边栏
   设计：左侧固定竖栏 = 品牌区 + 竖向功能导航 + 底部操作；
         顶部页头随内容滚动，不再固定。
   ============================================================ */

/* ===== 左侧边栏容器 ===== */
.topbar{
  position:fixed;left:0;top:0;bottom:0;z-index:100;
  width:200px;
  color:var(--white);
  background:
    /* 星光点阵 */
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) 1.2px, transparent 1.5px),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.42) 0, rgba(255,255,255,.42) 1px, transparent 1.2px),
    radial-gradient(circle at 88% 12%, rgba(34,211,238,.55) 0, rgba(34,211,238,.55) 1.2px, transparent 1.5px),
    radial-gradient(circle at 72% 28%, rgba(99,102,241,.50) 0, rgba(99,102,241,.50) 1.2px, transparent 1.5px),
    radial-gradient(circle at 92% 42%, rgba(255,255,255,.45) 0, rgba(255,255,255,.45) 1px, transparent 1.2px),
    radial-gradient(circle at 8% 55%, rgba(34,211,238,.45) 0, rgba(34,211,238,.45) 1px, transparent 1.2px),
    /* 星云光晕 */
    radial-gradient(ellipse 120% 90% at 0% 10%, rgba(59,130,246,.32), transparent 55%),
    radial-gradient(ellipse 100% 110% at 100% 20%, rgba(99,102,241,.26), transparent 52%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(34,211,238,.16), transparent 50%),
    /* 主渐变 */
    linear-gradient(180deg, #0f1c4f 0%, var(--bl-900) 35%, var(--bl-800) 65%, #0f2a5e 100%);
  border-right:1px solid rgba(255,255,255,.18);
  box-shadow:6px 0 40px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:transform .3s ease;
}

[data-theme="dark"] .topbar{
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.50) 0, rgba(255,255,255,.50) 1.2px, transparent 1.5px),
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.35) 0, rgba(255,255,255,.35) 1px, transparent 1.2px),
    radial-gradient(circle at 90% 14%, rgba(34,211,238,.50) 0, rgba(34,211,238,.50) 1.2px, transparent 1.5px),
    radial-gradient(circle at 75% 30%, rgba(99,102,241,.48) 0, rgba(99,102,241,.48) 1.2px, transparent 1.5px),
    radial-gradient(circle at 94% 46%, rgba(255,255,255,.38) 0, rgba(255,255,255,.38) 1px, transparent 1.2px),
    radial-gradient(circle at 6% 58%, rgba(34,211,238,.42) 0, rgba(34,211,238,.42) 1px, transparent 1.2px),
    radial-gradient(ellipse 120% 90% at 0% 10%, rgba(59,130,246,.28), transparent 55%),
    radial-gradient(ellipse 100% 110% at 100% 20%, rgba(99,102,241,.24), transparent 52%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(34,211,238,.14), transparent 50%),
    linear-gradient(180deg, #060b1f 0%, #0a1838 40%, #0c1f4a 70%, #060d24 100%);
  border-right-color:rgba(255,255,255,.12);
  box-shadow:8px 0 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
}

/* 顶部流光带（竖向变左侧流光） */
.topbar::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
  background:linear-gradient(180deg, transparent, var(--ac-1), var(--ac-2), var(--ac-3), var(--ac-1), transparent);
  background-size:100% 200%;
  animation:sidebarGlow 5s linear infinite;
  z-index:10;
}
@keyframes sidebarGlow{
  0%{background-position:50% 0%}
  100%{background-position:50% 200%}
}

/* ===== 内部容器：垂直三栏 ===== */
.topbar-inner{
  display:flex;flex-direction:column;
  height:100%;
  padding:16px 12px 14px;
  position:relative;z-index:1;
}

/* ===== 边栏品牌区（简化：头像+名称+状态） ===== */
.sb-brand{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
  padding:0 2px 12px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.sb-brand-core{
  display:flex;align-items:center;gap:9px;
  cursor:pointer;transition:opacity .2s;
  flex:1;min-width:0;
}
.sb-brand-core:hover{opacity:.92}
.sb-logo{
  width:38px;height:38px;border-radius:var(--r);object-fit:cover;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 2px rgba(34,211,238,.25),0 4px 12px rgba(37,99,235,.45);
  flex-shrink:0;
}
.sb-brand-tx{display:flex;flex-direction:column;gap:4px;line-height:1.15;min-width:0}
.sb-brand-name{
  font-size:17px;font-weight:800;letter-spacing:.3px;
  color:var(--white);display:flex;align-items:center;gap:5px;
  text-shadow:0 2px 10px rgba(0,0,0,.2);
  white-space:nowrap;flex-shrink:0;
}
[data-theme="dark"] .sb-brand-name{text-shadow:0 2px 12px rgba(34,211,238,.18)}
.sb-brand-name i{
  font-style:normal;font-size:10px;font-weight:900;
  color:var(--white);background:var(--ac-grad);
  padding:2px 5px;border-radius:var(--r-xs);
  box-shadow:0 2px 6px rgba(59,130,246,.45);
  letter-spacing:.3px;
}
.sb-brand-meta{display:flex;align-items:center}
.sb-meta-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2.5px 7px;border-radius:var(--r-lg);
  font-size:10px;font-weight:700;letter-spacing:.2px;
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 5px rgba(0,0,0,.08);
  backdrop-filter:blur(6px);
}
.sb-meta-tag .sb-meta-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--gr-400);
  box-shadow:0 0 0 2px rgba(74,222,128,.25);
  animation:metaPulse 2.2s infinite;
}
@keyframes metaPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(74,222,128,.25)}
  50%{box-shadow:0 0 0 5px rgba(74,222,128,.08)}
}
.sb-brand-actions{
  display:flex;align-items:center;gap:5px;
  flex-shrink:0;
}
.sb-close{
  display:none;width:28px;height:28px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);
  color:var(--white);font-size:var(--fs-bd);cursor:pointer;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.sb-close:hover{background:rgba(255,255,255,.22)}

/* 折叠/展开切换按钮（桌面端显示，移动端隐藏） */
.sb-collapse{
  display:flex;width:26px;height:26px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);
  color:var(--white);font-size:13px;cursor:pointer;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.sb-collapse:hover{background:var(--ac-grad);border-color:transparent;transform:scale(1.08)}

/* 折叠后主内容展开按钮 */
.sb-reopen{
  display:none;position:fixed;left:12px;top:50%;transform:translateY(-50%);
  width:32px;height:48px;border-radius:0 var(--r-md) var(--r-md) 0;
  border:1px solid rgba(255,255,255,.25);background:var(--ac-grad);
  color:var(--white);font-size:16px;cursor:pointer;align-items:center;justify-content:center;
  box-shadow:4px 0 18px rgba(37,99,235,.35);z-index:95;
  transition:all .22s;
}
.sb-reopen:hover{width:38px;box-shadow:6px 0 24px rgba(37,99,235,.5)}

/* 桌面端折叠状态 */
@media(min-width:901px){
  body.topbar-collapsed .topbar{transform:translateX(-110%)}
  body.topbar-collapsed .mc{margin-left:0}
  body.topbar-collapsed .sb-reopen{display:flex}
}

@media(max-width:900px){
  .sb-collapse{display:none}
}

/* ===== 竖向导航区 ===== */
.topnav-wrap{flex:1;overflow-y:auto;overflow-x:hidden;margin:10px -3px 8px;padding:0 3px}
.topnav-wrap::-webkit-scrollbar{width:3px}
.topnav-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:var(--r-xs)}
.topnav{
  display:flex;flex-direction:column;gap:4px;
}
.topnav .ni{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:var(--r);
  font-size:15px;font-weight:700;
  color:rgba(255,255,255,.78);
  cursor:pointer;white-space:nowrap;letter-spacing:.2px;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent;
  overflow:hidden;
}
.topnav .ni .nv-i{
  width:21px;height:21px;flex-shrink:0;color:currentColor;transition:color .2s,filter .2s;
  filter:drop-shadow(0 0 0 transparent);
}
/* 任务待办数角标 */
.topnav .ni .nv-bdg{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-sm);
  background:var(--ac-2);color:var(--white);font-size:var(--fs-cap);font-weight:700;line-height:18px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 1px 5px rgba(59,130,246,.45);
}

/* hover 光晕 */
.topnav .ni::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:translateX(-100%);
  transition:transform .5s ease;
  border-radius:var(--r-md);
  pointer-events:none;
}
.topnav .ni:hover{
  color:var(--white);
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.15);
  transform:translateX(3px);
}
.topnav .ni:hover::before{transform:translateX(100%)}
.topnav .ni:hover .nv-i{
  color:var(--white);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5));
}

/* 激活态：浮起白 pill + 青蓝流光指示条 */
.topnav .ni.act{
  background:var(--white)!important;
  color:var(--sl-900)!important;font-weight:760;
  border-color:rgba(255,255,255,.95);
  box-shadow:
    0 10px 24px rgba(0,0,0,.16),
    0 0 0 1px rgba(34,211,238,.4),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateX(3px);
}
.topnav .ni.act .nv-i{color:var(--ac-2);filter:drop-shadow(0 0 5px rgba(34,211,238,.4))}
.topnav .ni.act::after{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--ac-1),var(--ac-2),var(--ac-3),var(--ac-1));
  background-size:100% 200%;
  animation:actFlow 3s linear infinite;
}
@keyframes actFlow{
  0%{background-position:50% 0%}
  100%{background-position:50% 200%}
}

/* 下拉箭头（保留，虽然目前无下拉） */
.nv-c{width:12px;height:12px;margin-left:auto;opacity:.7;transition:transform .2s;flex-shrink:0}
.ni.has-menu.open .nv-c{transform:rotate(180deg);opacity:1}

/* 下拉子菜单（侧边栏内展开） */
.tn-submenu{
  display:none;
  margin:8px 0 6px 32px;
  padding:7px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tn-submenu.show{display:block;animation:smIn .22s cubic-bezier(.4,0,.2,1)}
@keyframes smIn{
  from{opacity:0;transform:scale(.98)}
  to{opacity:1;transform:scale(1)}
}
.tn-sub{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-bd-sm);font-weight:680;color:rgba(255,255,255,.9);cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.tn-sub:hover{
  background:rgba(255,255,255,.14);color:var(--white);
  box-shadow:inset 0 0 12px rgba(34,211,238,.08);
}
.tn-sub.act{background:var(--white);color:var(--sl-900);font-weight:760;box-shadow:0 4px 14px rgba(0,0,0,.1),0 0 0 1px rgba(34,211,238,.25)}
.tn-sub .nv-i{width:16px;height:16px;color:currentColor}

/* ===== 边栏时间区（自顶部页头迁移，修复日期重叠） ===== */
.sb-clock{
  display:flex;flex-direction:column;
  gap:6px;
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.1);
  backdrop-filter:blur(12px) saturate(150%);
}
.sb-clock-main{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%}
.sb-time-big{
  font-size:24px;font-weight:800;letter-spacing:.6px;
  color:var(--white);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px rgba(0,0,0,.15);
  line-height:1.1;
}
.sb-date-row{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  width:100%;
}
.sb-date{
  font-size:11px;font-weight:600;letter-spacing:.3px;
  color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:0;min-width:0;
}
.sb-week{
  font-size:10.5px;font-weight:700;color:var(--ac-1);
  padding:2.5px 7px;border-radius:var(--r-xs);
  background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.28);
  flex-shrink:0;
}

/* ===== 边栏底部操作区 ===== */
.sb-footer{
  display:flex;align-items:center;gap:8px;
  padding:10px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.sb-footer .th-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:var(--white);
  font-size:var(--fs-bd);cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);flex-shrink:0;
}
.sb-footer .th-btn:hover{
  background:var(--ac-grad);color:var(--white);border-color:transparent;
  transform:rotate(15deg) scale(1.08);
  box-shadow:0 8px 22px rgba(37,99,235,.45);
}
.sb-user{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:5px 6px 5px 5px;
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 3px 12px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.18);
  cursor:default;transition:all .2s;
}
.sb-user:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18)}
.sb-user .ua{
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 2px rgba(34,211,238,.25);
  flex-shrink:0;
}
.sb-user .ui{min-width:0;line-height:1.15;display:flex;flex-direction:column;gap:1px}
.sb-user .un{font-size:11.5px;font-weight:800;color:var(--white);white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.sb-user .ur{
  font-size:9.5px;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap;
  display:inline-block;width:fit-content;
  padding:1px 5px;border-radius:var(--r-xs);background:rgba(255,255,255,.16);
}
.sb-footer .lo{
  width:32px;height:32px;border-radius:var(--r-sm);border:none;background:transparent;
  color:rgba(255,255,255,.8);cursor:pointer;font-size:var(--fs-bd-sm);
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.sb-footer .lo:hover{background:var(--da);color:var(--white);transform:rotate(90deg) scale(1.06)}
.lo-i{width:16px;height:16px;color:currentColor}

/* ===== 顶部页头（已迁移到左侧边栏，默认隐藏） ===== */
.mc-header{
  display:none;
  align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px 28px 14px;
  background:var(--cd);
  border-bottom:1px solid var(--bd);
  position:relative;z-index:1;
}
[data-theme="dark"] .mc-header{background:rgba(12,26,61,.72);border-bottom-color:rgba(99,179,255,.14)}
.mc-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.mc-header-left .hm{
  display:none;width:38px;height:38px;border:none;background:rgba(60,60,67,.08);
  cursor:pointer;font-size:var(--fs-t-sm);color:var(--tx);border-radius:var(--r-sm);
  align-items:center;justify-content:center;transition:all .18s;flex-shrink:0;
}
.mc-header-left .hm:hover{background:var(--sh);color:var(--p)}
.mc-header-brand{
  display:flex;align-items:center;gap:11px;
  cursor:pointer;transition:opacity .2s;flex-shrink:0;
}
.mc-header-brand:hover{opacity:.85}
.mc-header-brand .tb-logo{
  width:38px;height:38px;border-radius:var(--r-sm);object-fit:cover;
  border:2px solid rgba(59,130,246,.35);
  box-shadow:0 4px 12px rgba(37,99,235,.22);
}
.mc-header-tx{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.mc-header-name{
  font-size:var(--fs-t-sm);font-weight:800;color:var(--tx);display:flex;align-items:center;gap:5px;
}
.mc-header-name i{
  font-style:normal;font-size:var(--fs-cap);font-weight:900;color:var(--white);
  background:var(--ac-grad);padding:2px 5px;border-radius:var(--r-xs);
}
.mc-header-tag{
  font-size:10.5px;font-weight:600;color:var(--ts);letter-spacing:.3px;
}
.mc-title{
  font-size:var(--fs-t);font-weight:800;color:var(--tx);letter-spacing:-.3px;
  margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:1px solid var(--bd);padding-left:14px;
}
[data-theme="dark"] .mc-title{color:var(--tx)}
.mc-header-right{display:flex;align-items:center;gap:14px;flex-shrink:0}

/* 顶部页头复用时间/用户 */
.mc-header-right .tb-status-cluster{
  display:flex;align-items:center;gap:12px;
  padding:8px 14px;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.18);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.06);
  backdrop-filter:blur(14px) saturate(160%);
}
.mc-header-right .tb-clock{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  line-height:1.1;min-width:72px;
}
.mc-header-right .tb-time-big{
  font-size:var(--fs-t);font-weight:800;letter-spacing:.6px;
  color:var(--tx);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px rgba(0,0,0,.06);
}
.mc-header-right .tb-date{
  font-size:10.5px;font-weight:600;letter-spacing:.3px;
  color:var(--ts);
}
.mc-header-right .tb-user{
  display:flex;align-items:center;gap:9px;
  padding:5px 6px 5px 5px;
  border-radius:var(--r-xl);
  background:var(--sh);
  border:1px solid var(--bd);
  box-shadow:0 3px 12px rgba(0,0,0,.06);
  cursor:default;transition:all .2s;
}
.mc-header-right .tb-user:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.1)}
.mc-header-right .tb-user .ua{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(59,130,246,.35);
  box-shadow:0 0 0 2px rgba(34,211,238,.15);
  flex-shrink:0;
}
.mc-header-right .tb-user .ui{min-width:0;line-height:1.15;display:flex;flex-direction:column;gap:1px}
.mc-header-right .tb-user .un{font-size:12.5px;font-weight:800;color:var(--tx);white-space:nowrap}
.mc-header-right .tb-user .ur{
  font-size:var(--fs-cap);font-weight:700;color:var(--ts);white-space:nowrap;
  display:inline-block;width:fit-content;
  padding:1px 6px;border-radius:var(--r-xs);background:rgba(59,130,246,.10);color:var(--ac-2);
}

/* ===== 移动端遮罩 ===== */
.topnav-ol{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:none;backdrop-filter:blur(2px)}
.topnav-ol.show{display:block}

/* ===== 响应式：中等屏幕 ===== */
@media(max-width:1200px){
  .topbar{width:190px}
  .topbar-inner{padding:14px 10px 12px}
  .sb-logo{width:38px;height:38px}
  .sb-brand-name{font-size:15px}
  .sb-meta-tag{font-size:var(--fs-cap);padding:2.5px 6px}
  .topnav .ni{padding:10px 11px;font-size:14px;gap:10px}
  .topnav .ni .nv-i{width:20px;height:20px}
  .mc-header{padding:12px 20px}
  .mc-title{font-size:var(--fs-t-sm)}
}

/* ===== 移动端 ===== */
@media(max-width:900px){
  .topbar{
    transform:translateX(-100%);
    width:82%;max-width:300px;
    box-shadow:12px 0 50px rgba(0,0,0,.5);
  }
  .topbar.open{transform:translateX(0)}
  .sb-close{display:flex}
  .topnav-wrap{margin-top:8px}

  .mc-header{display:flex;padding:10px 16px}
  .mc-header-left .hm{display:flex}
  .mc-header-brand{display:none}
  .mc-title{border-left:none;padding-left:0}
  .mc-header-right .tb-status-cluster{display:none}
  .mc-header-right .tb-user{display:none}
}

@media(max-width:640px){
  .mc-header-right .tb-user{padding:3px}
}

/* ===== 浅色主题：侧边栏明亮版 ===== */
[data-theme="light"] .topbar{
  color:#1e293b;
  background:
    radial-gradient(ellipse 120% 100% at 0% 0%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(ellipse 100% 100% at 100% 0%, rgba(34,211,238,.10), transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-right-color:rgba(148,163,184,.25);
  box-shadow:6px 0 30px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .topbar::before{
  background:linear-gradient(180deg, transparent, var(--ac-2), var(--ac-3), transparent);
}
[data-theme="light"] .sb-brand{border-bottom-color:rgba(148,163,184,.22)}
[data-theme="light"] .sb-brand-name{color:#0f172a;text-shadow:none}
[data-theme="light"] .sb-brand-name i{color:#fff}
[data-theme="light"] .sb-meta-tag{
  color:#475569;background:#fff;border-color:rgba(148,163,184,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(15,23,42,.06);
}
[data-theme="light"] .sb-brand-actions .sb-collapse,
[data-theme="light"] .sb-brand-actions .sb-close{color:#475569;background:#fff;border-color:rgba(148,163,184,.25)}
[data-theme="light"] .sb-brand-actions .sb-collapse:hover,
[data-theme="light"] .sb-brand-actions .sb-close:hover{color:#fff}
[data-theme="light"] .topnav-wrap::-webkit-scrollbar-thumb{background:rgba(15,23,42,.15)}
[data-theme="light"] .topnav .ni{color:#475569}
[data-theme="light"] .topnav .ni:hover{color:#0f172a;background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.18)}
[data-theme="light"] .topnav .ni:hover .nv-i{color:#3b82f6;filter:drop-shadow(0 0 4px rgba(59,130,246,.35))}
[data-theme="light"] .topnav .ni.act{color:#fff!important;background:var(--ac-grad)!important;border-color:rgba(59,130,246,.35);box-shadow:0 8px 22px rgba(59,130,246,.25)}
[data-theme="light"] .tn-submenu{background:#f1f5f9;border-color:rgba(148,163,184,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="light"] .tn-sub{color:#475569}
[data-theme="light"] .tn-sub:hover{background:rgba(59,130,246,.08);color:#0f172a}
[data-theme="light"] .sb-clock{background:#fff;border-color:rgba(148,163,184,.22)}
[data-theme="light"] .sb-time-big{color:#0f172a;text-shadow:none}
[data-theme="light"] .sb-date{color:#64748b}
[data-theme="light"] .sb-week{color:var(--ac-2);background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.18)}
[data-theme="light"] .sb-footer{border-top-color:rgba(148,163,184,.22)}
[data-theme="light"] .sb-footer .th-btn{color:#475569;background:#fff;border-color:rgba(148,163,184,.25);box-shadow:0 2px 8px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="light"] .sb-user{background:#fff;border-color:rgba(148,163,184,.25);box-shadow:0 3px 12px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="light"] .sb-user .un{color:#0f172a;text-shadow:none}
[data-theme="light"] .sb-user .ur{color:#64748b;background:rgba(59,130,246,.08)}
[data-theme="light"] .sb-footer .lo{color:#64748b}
[data-theme="light"] .sb-footer .lo:hover{color:#fff}
[data-theme="light"] .sb-logo{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 3px rgba(59,130,246,.12),0 6px 18px rgba(37,99,235,.25)}
[data-theme="light"] .sb-user .ua{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 2px rgba(59,130,246,.12)}