/* ============================================================
   清影科技 · 工具工作台  共用样式
   /common/workbench.css
   - 设计令牌(明/暗双主题，全部 --wb- 前缀，绝不与各页自有变量冲突)
   - 统一侧边栏外壳 .wb-* + 进入动画
   仅提供"外壳"与令牌；各工具页内容样式仍用自己的类名，
   只需把颜色值改成引用下面的 --wb-* 令牌即可。
   ============================================================ */

:root{
  --wb-bg:#262624;
  --wb-surface:#2f2e2c;
  --wb-surface-2:#383735;
  --wb-surface-3:#423f3b;
  --wb-border:#3a3936;
  --wb-border-2:#48463f;
  --wb-text:#f0eee6;
  --wb-text-2:#c2bfb6;
  --wb-text-3:#8e8b82;
  --wb-accent:#d97757;
  --wb-accent-bright:#e3906f;
  --wb-on-accent:#2b1a12;
  --wb-warn:#d3674a;
  --wb-sidebar-w:236px;
  --wb-ease:cubic-bezier(.22,.61,.36,1);
  --wb-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --wb-mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  --wb-mk-box:var(--wb-border-2);
  --wb-mk-check:var(--wb-accent);
}
:root[data-theme="light"]{
  --wb-bg:#faf9f5;
  --wb-surface:#ffffff;
  --wb-surface-2:#f2f0e9;
  --wb-surface-3:#eae7dd;
  --wb-border:#e8e5db;
  --wb-border-2:#dad6c9;
  --wb-text:#1f1e1d;
  --wb-text-2:#5a584f;
  --wb-text-3:#8a877e;
  --wb-accent:#c15f3c;
  --wb-accent-bright:#cd6f4e;
  --wb-on-accent:#ffffff;
  --wb-warn:#b0432f;
}

.wb-ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* ── 侧边栏 ── */
.wb-sidebar{position:fixed;left:0;top:0;width:var(--wb-sidebar-w);height:100vh;z-index:50;
  background:var(--wb-surface);border-right:1px solid var(--wb-border);
  display:flex;flex-direction:column;
  font-family:var(--wb-sans);
  animation:wb-in .3s var(--wb-ease) both;}
.wb-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;cursor:pointer;transition:opacity .13s;}
.wb-brand:hover{opacity:.8;}
.wb-mark{width:30px;height:30px;flex:none;}
.wb-bt{display:flex;flex-direction:column;gap:1px;line-height:1.2;}
.wb-bn{font-size:14.5px;font-weight:600;letter-spacing:.2px;color:var(--wb-text);}
.wb-bs{font-size:10.5px;color:var(--wb-text-3);letter-spacing:1.5px;}
.wb-nav{flex:1;overflow-y:auto;padding:6px 10px;}
.wb-nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;color:var(--wb-text-2);
  font-size:13px;font-weight:450;position:relative;cursor:pointer;transition:background .13s,color .13s;text-decoration:none;}
.wb-nav-item:hover{background:var(--wb-surface-2);color:var(--wb-text);}
.wb-nav-item.active{background:var(--wb-surface-3);color:var(--wb-text);}
.wb-nav-item.active::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:2px;height:18px;border-radius:0 2px 2px 0;background:var(--wb-accent);}
.wb-nav-item.active .wb-ico{color:var(--wb-accent);}
.wb-nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-sep{height:1px;background:var(--wb-border);margin:8px 12px;}
.wb-grp{font-size:11px;color:var(--wb-text-3);font-weight:500;letter-spacing:.5px;padding:12px 10px 5px;}
.wb-clock{padding:10px 16px;border-top:1px solid var(--wb-border);display:flex;flex-direction:column;gap:5px;}
.wb-clock-item{display:flex;align-items:center;justify-content:space-between;}
.wb-clock-city{font-size:11px;color:var(--wb-text-3);}
.wb-clock-time{font-family:var(--wb-mono);font-size:12px;color:var(--wb-text-2);font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.wb-user{display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid var(--wb-border);}
.wb-avatar{width:30px;height:30px;border-radius:7px;flex:none;background:var(--wb-surface-3);border:1px solid var(--wb-border-2);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--wb-text-2);}
.wb-um{flex:1;min-width:0;line-height:1.25;}
.wb-un{font-size:13px;font-weight:500;color:var(--wb-text);display:flex;align-items:center;gap:6px;}
.wb-un .wb-dot{width:6px;height:6px;border-radius:50%;background:var(--wb-accent-bright);flex:none;}
.wb-un span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-ur{font-size:11px;color:var(--wb-text-3);}
.wb-ib{width:30px;height:30px;border-radius:7px;flex:none;background:transparent;border:none;color:var(--wb-text-3);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .13s,color .13s;}
.wb-ib:hover{background:var(--wb-surface-2);color:var(--wb-text);}

/* ── 内容主区(被侧边栏右移) ── */
.wb-main{margin-left:var(--wb-sidebar-w);min-height:100vh;animation:wb-rise .36s ease .05s both;}

@keyframes wb-in{from{transform:translateX(-100%);}to{transform:translateX(0);}}
@keyframes wb-rise{from{opacity:0;}to{opacity:1;}}

/* 外壳侧栏：窄屏改抽屉 + 汉堡(全站共用；桌面端 >860px 完全不受影响) */
.wb-burger{display:none;}
.wb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2147483600;}
.wb-backdrop.show{display:block;}
@media(max-width:860px){
  .wb-sidebar{
    transform:translateX(-100%);
    transition:transform .28s var(--wb-ease);
    animation:none;                 /* 取消入场动画，默认收起到屏外 */
    z-index:2147483601;
    box-shadow:2px 0 18px rgba(0,0,0,.45);
  }
  .wb-sidebar.wb-open{transform:translateX(0);}
  .wb-main{margin-left:0;}
  .wb-burger{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:8px;left:8px;z-index:2147483602;
    width:40px;height:40px;border-radius:9px;cursor:pointer;
    background:var(--wb-surface);border:1px solid var(--wb-border);color:var(--wb-text);
    box-shadow:0 2px 8px rgba(0,0,0,.28);
  }
  .wb-burger:active{transform:scale(.94);}
}
@media(prefers-reduced-motion:reduce){
  .wb-sidebar,.wb-main{animation:none!important;}
}