/* =========================================================
   全站侧边栏（浮岛风格 · 浅色）
   默认收成图标栏浮在左侧，鼠标移入展开；底色跟随当前板块主题色（--module-color，由 sidebar.js 设置）
   手机端（≤860px）完全不显示。所有类名带 tsb- 前缀，避免和各模块样式冲突
   ========================================================= */
@property --tsb-w { syntax: '<length>'; inherits: true; initial-value: 64px; }

:root {
    --tsb-rail: 64px;          /* 收起宽度 */
    --tsb-open: 256px;         /* 展开宽度 */
    --tsb-gap: 12px;           /* 距离窗口边缘 */
    --tsb-offset: 88px;        /* 页面内容让出的宽度 = rail + 两侧间距 */
    --tsb-ease: cubic-bezier(.22, 1, .36, 1);
    --tsb-spring: cubic-bezier(.34, 1.32, .64, 1);

    --tsb-c: var(--module-color, #d97706);                       /* 当前板块主题色 */
    --tsb-text: #334155;
    --tsb-muted: #94a3b8;
    --tsb-icon: #64748b;                                          /* 未选中图标统一配色 */
    --tsb-line: color-mix(in srgb, var(--tsb-c) 16%, #e2e8f0);
    --tsb-hover: color-mix(in srgb, var(--tsb-c) 10%, transparent);
}

/* ---------- 电脑端：去掉各页顶部用户栏（用户信息/退出登录已在侧边栏里），内容右移让出侧边栏 ----------
   本文件在各页 <head> 里加载，页面脚本按顶栏实际高度回写 --bar-h 时顶栏已隐藏（高度 0）
   手机端侧边栏不显示，仍保留原来的顶栏 */
@media (min-width: 861px) {
    body { margin-left: var(--tsb-offset) !important; }
    .user-bar { display: none !important; }
    body:not(.view-editor) { padding-top: 28px !important; }   /* 原来给顶栏留的 94px 收回；PCBA 编辑页本身铺满不加 */
    .rp-bottom { left: var(--tsb-offset) !important; }
}

/* ---------- 侧边栏本体 ---------- */
.tsb {
    --tsb-w: var(--tsb-rail);
    position: fixed; z-index: 1500;
    top: var(--tsb-gap); bottom: var(--tsb-gap); left: var(--tsb-gap);
    width: var(--tsb-w);
    transition: --tsb-w .5s var(--tsb-ease), box-shadow .5s var(--tsb-ease);
    display: flex; flex-direction: column; overflow: hidden;
    box-sizing: border-box;
    border-radius: 20px;
    background:
        radial-gradient(160% 50% at 0% 0%, color-mix(in srgb, var(--tsb-c) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--tsb-c) 9%, rgba(255, 255, 255, .9)), color-mix(in srgb, var(--tsb-c) 4%, rgba(255, 255, 255, .92)));
    border: 1px solid color-mix(in srgb, var(--tsb-c) 20%, rgba(255, 255, 255, .7));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--tsb-c) 14%, rgba(15, 23, 42, .08)), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    color: var(--tsb-text);
    font-family: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 14px; line-height: 1.4; text-align: left;
    -webkit-font-smoothing: antialiased;
}
.tsb.tsb-peek { --tsb-w: var(--tsb-open); box-shadow: 0 26px 60px color-mix(in srgb, var(--tsb-c) 20%, rgba(15, 23, 42, .14)), inset 0 1px 0 rgba(255, 255, 255, .9); }
.tsb *, .tsb *::before, .tsb *::after { box-sizing: border-box; }
.tsb a { color: inherit; text-decoration: none; }

/* 品牌 */
.tsb-brand {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    height: 68px; padding: 0 14px; white-space: nowrap;
}
.tsb-logo {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
    display: grid; place-items: center; background: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tsb-c) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--tsb-c) 14%, transparent);
    transition: transform .5s var(--tsb-spring);
}
.tsb-logo img { width: 29px; height: 29px; object-fit: contain; display: block; }
.tsb-brand:hover .tsb-logo { transform: rotate(-8deg) scale(1.05); }
.tsb-brand-text { line-height: 1.2; }
.tsb-brand-text b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #1e293b; }
.tsb-brand-text small { display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--tsb-c) 70%, #64748b); margin-top: 3px; }

/* 导航 */
.tsb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 12px; scrollbar-width: none; }
.tsb-nav::-webkit-scrollbar { display: none; }
.tsb-inner { position: relative; }

.tsb-group {
    display: flex; align-items: center; gap: 8px; height: 14px; margin: 16px 22px 8px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .18em; color: var(--tsb-muted); white-space: nowrap;
}
.tsb-group .tsb-rule { flex: 1; height: 1px; background: var(--tsb-line); }

.tsb-item, .tsb-sub-item {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    height: 42px; margin: 2px 10px; padding: 0 9px;
    border-radius: 13px; white-space: nowrap; cursor: pointer; user-select: none; outline: none;
    color: #475569; font-size: 14px; font-weight: 500;
    transition: color .3s var(--tsb-ease), background-color .3s var(--tsb-ease);
}
.tsb-item:hover, .tsb-sub-item:hover { background: var(--tsb-hover); color: #0f172a; }
.tsb-item:focus-visible, .tsb-sub-item:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tsb-c) 40%, transparent); }

.tsb-ico {
    position: relative; width: 26px; height: 26px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 15px;
    color: var(--tsb-icon);
    transition: color .4s var(--tsb-ease), transform .45s var(--tsb-spring);
}
.tsb-item:hover .tsb-ico { transform: translateX(2px); }
.tsb-item:active .tsb-ico { transform: scale(.9); }

.tsb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tsb-lock {
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 10px;
    color: var(--tsb-muted); background: rgba(148, 163, 184, .14);
}
.tsb-lock[hidden] { display: none; }
.tsb-caret {
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 10px; color: var(--tsb-muted); transition: transform .45s var(--tsb-ease), background-color .2s;
}
.tsb-caret:hover { background: var(--tsb-hover); }
.tsb-mod.tsb-open > .tsb-item .tsb-caret { transform: rotate(180deg); }

/* 选中：白色浮块 + 图标变成板块主题色 */
.tsb-item.tsb-active, .tsb-sub-item.tsb-active { color: #0f172a; font-weight: 600; }
.tsb-item.tsb-active:hover, .tsb-sub-item.tsb-active:hover { background: transparent; }
.tsb-item.tsb-active .tsb-ico, .tsb-item.tsb-has-active .tsb-ico { color: var(--mc); }
.tsb-item.tsb-has-active { color: #0f172a; font-weight: 600; }

/* 子板块（grid 0fr→1fr 平滑展开） */
.tsb-subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--tsb-ease); }
.tsb-subs > div { overflow: hidden; }
.tsb-mod.tsb-open > .tsb-subs { grid-template-rows: 1fr; }
.tsb-sub-item { height: 36px; font-size: 13px; padding-left: 47px; margin-top: 1px; margin-bottom: 1px; }
.tsb-sub-item::before { /* 竖线 */
    content: ''; position: absolute; left: 21px; top: -2px; bottom: -2px; width: 1px; background: var(--tsb-line);
}
.tsb-sub-item::after { /* 节点 */
    content: ''; position: absolute; left: 18px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: #fff; border: 1px solid #cbd5e1;
    transition: background-color .3s, border-color .3s, transform .4s var(--tsb-spring);
}
.tsb-sub-item.tsb-active::after { background: var(--mc); border-color: var(--mc); transform: scale(1.15); }
.tsb-sub-item .tsb-label { transition: transform .35s var(--tsb-ease); }
.tsb-sub-item:hover .tsb-label { transform: translateX(2px); }

/* 滑动指示器 */
.tsb-ind {
    position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0;
    border-radius: 13px; background: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mc, #64748b) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--mc, #64748b) 18%, transparent);
    transition: transform .55s var(--tsb-spring), width .45s var(--tsb-ease), height .45s var(--tsb-ease), opacity .3s;
}
.tsb-ind::before { /* 左侧主题色短条 */
    content: ''; position: absolute; left: -1px; top: 50%; width: 3px; height: 16px; margin-top: -8px;
    border-radius: 0 3px 3px 0; background: var(--mc, #64748b);
}
.tsb-ind.tsb-ready { opacity: 1; }

/* 无权限 */
.tsb-item.tsb-locked, .tsb-sub-item.tsb-locked { color: #b6c0cc; }
.tsb-item.tsb-locked .tsb-ico { color: #c3ccd6; }
.tsb-item.tsb-locked:hover .tsb-lock, .tsb-sub-item.tsb-locked:hover .tsb-lock { color: var(--tsb-c); }
.tsb-shake { animation: tsbShake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes tsbShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}
.tsb-shake .tsb-lock { animation: tsbLockWiggle .5s ease; }
@keyframes tsbLockWiggle { 25% { transform: rotate(-18deg) scale(1.2); } 75% { transform: rotate(14deg) scale(1.2); } }

/* 用户（左下角） */
.tsb-me { flex-shrink: 0; padding: 10px; border-top: 1px solid var(--tsb-line); }
.tsb-user {
    display: flex; align-items: center; gap: 10px; padding: 6px 5px; border-radius: 14px; white-space: nowrap;
    transition: background-color .3s var(--tsb-ease);
}
.tsb.tsb-peek .tsb-user { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tsb-c) 12%, transparent); }
.tsb-user-meta { flex: 1; }
.tsb-logout {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; border: 0; cursor: pointer;
    display: grid; place-items: center; font-size: 13px; background: transparent; color: #94a3b8;
    transition: color .25s, background-color .25s, opacity .3s var(--tsb-ease) .1s;
}
.tsb-logout:hover { color: #ef4444; background: rgba(239, 68, 68, .1); }
.tsb-avatar {
    position: relative; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tsb-c) 70%, #fff), var(--tsb-c));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--tsb-c) 30%, transparent);
}
.tsb-avatar.tsb-guest { background: #e2e8f0; color: #64748b; font-size: 13px; box-shadow: none; }
.tsb-avatar:not(.tsb-guest)::after {
    content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
    background: #22c55e; border: 2px solid #fff;
}
.tsb-user-meta { line-height: 1.3; min-width: 0; }
.tsb-user-name { font-size: 13.5px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; }
.tsb-user-role { font-size: 11.5px; color: #64748b; }
.tsb-user-role a { color: var(--tsb-c); font-weight: 600; }

/* ---------- 收起状态：文字淡出，锁变成图标角标 ---------- */
.tsb :is(.tsb-brand-text, .tsb-label, .tsb-lock, .tsb-caret, .tsb-user-meta, .tsb-group-text) {
    transition: opacity .3s var(--tsb-ease) .1s;
}
.tsb:not(.tsb-peek) .tsb-logout { opacity: 0; pointer-events: none; transition-delay: 0s; }
.tsb:not(.tsb-peek) :is(.tsb-brand-text, .tsb-label, .tsb-lock, .tsb-caret, .tsb-user-meta, .tsb-group-text) {
    opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: .15s;
}
.tsb:not(.tsb-peek) .tsb-subs { grid-template-rows: 0fr; }
.tsb-item.tsb-locked .tsb-ico::after {
    content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 7px; line-height: 1;
    position: absolute; right: -4px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: #94a3b8; border: 1px solid #e2e8f0;
    opacity: 0; transform: scale(0); transition: opacity .3s, transform .4s var(--tsb-spring);
}
.tsb:not(.tsb-peek) .tsb-item.tsb-locked .tsb-ico::after { opacity: 1; transform: scale(1); }

/* ---------- 浮层：权限提示 ---------- */
.tsb-tip {
    position: fixed; z-index: 1600; max-width: 240px; padding: 8px 12px; border-radius: 10px;
    background: #fff; color: #334155; border: 1px solid var(--tsb-line);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    font: 12px/1.6 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    opacity: 0; transform: translateX(-6px); pointer-events: none;
    transition: opacity .2s var(--tsb-ease), transform .3s var(--tsb-ease);
}
.tsb-tip.tsb-show { opacity: 1; transform: none; }
.tsb-tip b { color: var(--tsb-c); font-weight: 600; }

/* ---------- Toast ---------- */
.tsb-toast {
    position: fixed; z-index: 3500; left: calc(var(--tsb-offset) + 12px); bottom: 24px; width: 330px; max-width: calc(100vw - 32px);
    display: flex; gap: 14px; padding: 16px; border-radius: 14px; box-sizing: border-box;
    background: rgba(255, 255, 255, .97); color: #334155; border: 1px solid var(--tsb-line);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .16); backdrop-filter: blur(18px);
    font-family: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; text-align: left;
    transform: translateY(20px) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .5s var(--tsb-spring), opacity .3s var(--tsb-ease);
}
.tsb-toast.tsb-show { transform: none; opacity: 1; pointer-events: auto; }
.tsb-toast-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--tsb-c) 14%, transparent); color: var(--tsb-c); }
.tsb-toast h4 { margin: 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.tsb-toast p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: #64748b; }
.tsb-toast p b { color: var(--tsb-c); font-weight: 600; }
.tsb-toast-acts { display: flex; gap: 8px; margin-top: 12px; }
.tsb-btn {
    font: 600 12.5px/1 inherit; padding: 8px 14px; border-radius: 8px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    background: var(--tsb-c); color: #fff; transition: transform .3s var(--tsb-spring);
}
.tsb-btn:hover { transform: translateY(-1px); }
.tsb-btn.tsb-ghost { background: transparent; color: #64748b; }

/* ---------- 手机端：完全不显示（包括按钮），页面保持原样 ---------- */
@media (max-width: 860px) {
    .tsb, .tsb-tip, .tsb-toast { display: none !important; }
}

@media print {
    .tsb, .tsb-tip, .tsb-toast { display: none !important; }
    body { margin-left: 0 !important; }
    .rp-bottom { left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .tsb, .tsb *, .tsb-toast, .tsb-tip { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}