/* base.css —— 原 HTML 行 10-225 */
/* CSS 变量 + reset + 字体 + sidebar(.app-sidebar) + 主内容区 + sb-expand */

  :root{
    /* 中性色 - 偏冷调，纯净白 */
    --bg:#ffffff;
    --bg-2:#f5f7fa;
    --bg-3:#eef1f5;
    --panel:#ffffff;
    --line:#eef0f3;
    --line-soft:#f4f6f8;
    --line-mid:#e5e8ed;
    --text:#1f2329;
    --text-2:#4e5969;
    --text-3:#86909c;
    --text-4:#c9cdd4;

    /* 强调色 - 蓝色为主（罗盘风格） */
    --primary:#1664ff;
    --primary-soft:#e8f1ff;
    --primary-softer:#f4f8ff;
    --primary-deep:#0e54e0;

    /* 中国式涨跌色：红涨绿跌 */
    --up:#f53f3f;
    --up-soft:#ffece8;
    --down:#00b42a;
    --down-soft:#e8ffea;
    --warn:#ff9a2e;
    --warn-soft:#fff3e8;

    /* 数据色（仅用于图表/分类） */
    --c-blue:#1664ff;
    --c-orange:#ff7d00;
    --c-green:#00b42a;
    --c-purple:#722ed1;
    --c-cyan:#14c9c9;
    --c-yellow:#f7ba1e;

    /* 视频标识专用色 - 粉品红 */
    --video:#ff4d8d;
    --video-soft:#ffe8f0;
    --video-softer:#fff4f8;

    /* 阴影 - 极轻 */
    --shadow-xs:0 1px 2px rgba(31,35,41,0.03);
    --shadow:0 1px 4px rgba(31,35,41,0.04), 0 2px 8px rgba(31,35,41,0.03);
    --shadow-md:0 2px 8px rgba(31,35,41,0.06), 0 4px 16px rgba(31,35,41,0.04);
    --shadow-lg:0 4px 12px rgba(31,35,41,0.06), 0 12px 32px rgba(31,35,41,0.08);

    --radius:8px;
    --radius-sm:6px;
    --radius-lg:12px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","HarmonyOS Sans","Microsoft YaHei","Noto Sans SC","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13px;line-height:1.5}

  /* ─────────── APP SIDEBAR (Claude 风格) ─────────── */
  :root{
    --sb-width:220px;
    --sb-width-collapsed:64px;
    --sb-bg:#f7f8fa;
  }
  body.has-sidebar{
    padding:0;
  }
  .app-sidebar{
    position:fixed;top:0;left:0;height:100vh;
    width:var(--sb-width);
    background:var(--sb-bg);
    display:flex;flex-direction:column;
    z-index:50;
    transition:width .25s cubic-bezier(.4,.0,.2,1);
    overflow:hidden;
  }
  body.sb-collapsed .app-sidebar{
    width:var(--sb-width-collapsed);
  }

  /* 头部 - 品牌名 + 折叠按钮 */
  .sb-head{
    flex:none;padding:20px 16px 14px;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-width:var(--sb-width);
    transition:min-width .25s cubic-bezier(.4,.0,.2,1), padding .25s cubic-bezier(.4,.0,.2,1);
  }
  body.sb-collapsed .sb-head{
    min-width:var(--sb-width-collapsed);
    /* 给浮动展开按钮 (.sb-expand top:14 height:36, 底边 y=50) 预留空间 */
    min-height:60px;
    padding:14px 0 10px;
    justify-content:center;
  }
  body.sb-collapsed .sb-brand-name{display:none}
  .sb-brand-name{
    margin:0;font-size:18px;font-weight:600;color:var(--text);
    letter-spacing:-0.01em;line-height:1.2;
    white-space:nowrap;
    font-family:"Inter","PingFang SC",sans-serif;
  }
  .sb-toggle{
    width:32px;height:32px;border-radius:6px;border:none;cursor:pointer;
    background:transparent;color:var(--text-2);
    display:flex;align-items:center;justify-content:center;
    transition:all .15s;flex:none;
  }
  .sb-toggle:hover{background:rgba(0,0,0,0.05);color:var(--text)}
  /* 折叠态下隐藏头部 toggle (用浮动的 sb-expand 代替) */
  body.sb-collapsed .sb-toggle{display:none;}

  /* 折叠状态下显示展开按钮 (浮在折叠后的 sidebar 右边) */
  .sb-expand{
    display:none;
    position:fixed; top:14px; left:14px; z-index:60;
    width:36px; height:36px; border-radius:8px;
    background:#fff; border:1px solid var(--line-mid, #dfe2e8);
    color:var(--text-2, #4e5969);
    cursor:pointer; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    transition:all .15s;
  }
  .sb-expand:hover{
    color:var(--primary, #1664ff);
    border-color:var(--primary, #1664ff);
    background:var(--primary-softer, #f4f8ff);
  }
  /* 仅在 body 折叠态时显示 */
  body.sb-collapsed .sb-expand{ display:flex; }

  /* 菜单容器 */
  .sb-nav{
    flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 10px 12px;
    min-width:var(--sb-width);
    transition:min-width .25s cubic-bezier(.4,.0,.2,1), padding .25s cubic-bezier(.4,.0,.2,1);
  }
  body.sb-collapsed .sb-nav{
    min-width:var(--sb-width-collapsed);
    padding:6px 6px 12px;
  }
  .sb-nav::-webkit-scrollbar{width:4px}
  .sb-nav::-webkit-scrollbar-thumb{background:#dfe2e8;border-radius:2px;border:none;background-clip:initial}

  .sb-group{margin-bottom:2px}
  body.sb-collapsed .sb-group{margin-bottom:4px}

  /* 一级菜单 */
  .sb-l1{
    width:100%;
    display:flex;align-items:center;gap:12px;
    padding:9px 12px;border-radius:8px;border:none;
    color:var(--text);font-size:14px;font-weight:400;
    background:transparent;cursor:pointer;
    transition:background .12s, padding .25s cubic-bezier(.4,.0,.2,1);
    font-family:inherit;text-align:left;
  }
  .sb-l1:hover{background:rgba(0,0,0,0.045)}
  .sb-icon{flex:none;color:var(--text-2);stroke-width:1.8}
  .sb-l1-name{flex:1;white-space:nowrap}
  .sb-l1-caret{
    flex:none;color:var(--text-3);
    transition:transform .2s;
  }
  /* 展开状态：caret朝下 */
  .sb-group:not(.collapsed) .sb-l1-caret{transform:rotate(0deg)}
  /* 折叠状态：caret朝右 */
  .sb-group.collapsed .sb-l1-caret{transform:rotate(-90deg)}

  /* 侧边栏折叠后：一级菜单变为图标+文字垂直布局 */
  body.sb-collapsed .sb-l1{
    flex-direction:column;gap:5px;
    padding:8px 4px;
    align-items:center;justify-content:center;
    text-align:center;
  }
  body.sb-collapsed .sb-l1-name{
    flex:none;font-size:11.5px;color:var(--text-2);
    line-height:1.2;white-space:nowrap;
  }
  body.sb-collapsed .sb-l1-caret{display:none}
  body.sb-collapsed .sb-l1.active-l1{
    background:rgba(22,100,255,0.08);
  }
  body.sb-collapsed .sb-l1.active-l1 .sb-icon,
  body.sb-collapsed .sb-l1.active-l1 .sb-l1-name{
    color:var(--primary);
  }

  /* 二级菜单容器 */
  .sb-l2-list{
    display:flex;flex-direction:column;gap:1px;
    max-height:200px;overflow:hidden;
    transition:max-height .25s cubic-bezier(.4,.0,.2,1), opacity .2s;
    padding:2px 0 4px;
    opacity:1;
  }
  .sb-group.collapsed .sb-l2-list{
    max-height:0;opacity:0;padding:0;
  }
  /* 侧边栏折叠时：永远隐藏二级菜单 */
  body.sb-collapsed .sb-l2-list{
    max-height:0 !important;opacity:0 !important;padding:0 !important;
  }

  /* 二级菜单项 */
  .sb-l2{
    display:flex;align-items:center;
    padding:7px 12px 7px 42px;border-radius:6px;
    color:var(--text-2);font-size:13.5px;font-weight:400;
    text-decoration:none;cursor:pointer;
    transition:all .12s;
    position:relative;white-space:nowrap;
  }
  .sb-l2::before{
    content:"";position:absolute;left:24px;top:50%;
    width:4px;height:4px;border-radius:50%;
    background:var(--text-4);transform:translateY(-50%);
    transition:background .12s;
  }
  .sb-l2:hover{background:rgba(0,0,0,0.045);color:var(--text)}
  .sb-l2.active{
    background:rgba(22,100,255,0.08);color:var(--primary);font-weight:500;
  }
  .sb-l2.active::before{background:var(--primary)}

  /* 一级菜单（无子项的，single 修饰符） */
  .sb-l1.single{justify-content:flex-start}

  /* ─────────── MAIN CONTENT ─────────── */
  .app-main{
    margin-left:var(--sb-width);
    padding:18px 22px 48px;
    transition:margin-left .25s cubic-bezier(.4,.0,.2,1);
    min-height:100vh;
  }
  body.sb-collapsed .app-main{
    margin-left:var(--sb-width-collapsed);
    padding-left:22px;
  }


/* ============================================================
 * 侧边栏底部: 用户信息 + 退出按钮
 * ============================================================ */
.app-sidebar { display: flex; flex-direction: column; }
.app-sidebar .sb-nav { flex: 1; overflow-y: auto; }

.sb-user {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line, #eef0f3);
  background: var(--panel, #fff);
}
.sb-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--primary, #1664ff); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.sb-user-meta {
  flex: 1; min-width: 0; overflow: hidden;
}
.sb-user-name {
  font-size: 13px; font-weight: 600; color: var(--text, #1f2329);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.sb-user-role {
  font-size: 11px; color: var(--text-3, #86909c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.sb-logout-btn {
  flex: none;
  width: 28px; height: 28px;
  border: 1px solid transparent; background: transparent;
  border-radius: 6px; cursor: pointer;
  color: var(--text-3, #86909c);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sb-logout-btn:hover {
  background: #fff1f0; color: #cf1322; border-color: #ffa39e;
}
/* 侧边栏折叠时, 隐藏用户文字, 只显示头像 */
body.sb-collapsed .sb-user { padding: 12px 8px; justify-content: center; }
body.sb-collapsed .sb-user-meta,
body.sb-collapsed .sb-logout-btn { display: none; }

/* ============================================================
 * 修改密码按钮 + Modal
 * ============================================================ */
.sb-pwd-btn {
  flex: none;
  width: 28px; height: 28px;
  border: 1px solid transparent; background: transparent;
  border-radius: 6px; cursor: pointer;
  color: var(--text-3, #86909c);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  margin-right: 2px;
}
.sb-pwd-btn:hover {
  background: var(--primary-soft, #e8f1ff); color: var(--primary, #1664ff);
  border-color: rgba(22,100,255,0.3);
}
body.sb-collapsed .sb-pwd-btn { display: none; }

.pwd-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pwd-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.pwd-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999; opacity: 0; pointer-events: none;
  width: 420px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  transition: all .2s cubic-bezier(.4,.0,.2,1);
}
.pwd-modal.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.pwd-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line, #eef0f3);
  font-size: 15px; font-weight: 600; color: var(--text, #1f2329);
}
.pwd-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--text-3, #86909c);
  line-height: 1; padding: 0 4px;
}
.pwd-modal-close:hover { color: var(--text, #1f2329); }
.pwd-modal-body { padding: 18px 22px 8px; }
.pwd-form-row { margin-bottom: 14px; }
.pwd-form-row label {
  display: block; font-size: 12px; color: var(--text-2, #4e5969);
  margin-bottom: 6px; font-weight: 500;
}
.pwd-form-row input {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--line-mid, #dfe2e8); border-radius: 6px;
  font-size: 13px; color: var(--text, #1f2329);
  font-family: inherit; outline: none; box-sizing: border-box;
  transition: all .15s;
}
.pwd-form-row input:focus {
  border-color: var(--primary, #1664ff);
  box-shadow: 0 0 0 3px var(--primary-soft, #e8f1ff);
}
.pwd-err {
  min-height: 18px; font-size: 12px; color: #cf1322;
  padding: 4px 0;
}
.pwd-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 22px 18px;
}
.pwd-btn {
  height: 34px; padding: 0 18px; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.pwd-btn-cancel {
  background: #fff; border: 1px solid var(--line-mid, #dfe2e8);
  color: var(--text-2, #4e5969);
}
.pwd-btn-cancel:hover { background: var(--bg-2, #f2f4f7); }
.pwd-btn-primary {
  background: var(--primary, #1664ff); border: 1px solid var(--primary, #1664ff);
  color: #fff;
}
.pwd-btn-primary:hover { background: var(--primary-deep, #0e54e0); }
.pwd-btn:disabled { opacity: 0.6; cursor: not-allowed; }