/* ============================================================================
   Sangye 题库审核后台 — 桌面控制台样式
   基于 Sangye 设计系统（colors_and_type.css）适配桌面密度。
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  --jade-50:#F2F9E7; --jade-100:#E1F1CC; --jade-200:#C6E59E; --jade-300:#A4D56B;
  --jade-400:#8DCB4C; --jade-500:#7AC74F; --jade-600:#58A926; --jade-700:#3F8A14; --jade-800:#2E6810;
  --saffron-50:#FFF8E0; --saffron-100:#FFEFB8; --saffron-200:#FFE189; --saffron-300:#FFD05A;
  --saffron-400:#F5BB3D; --saffron-500:#F5A623; --saffron-600:#E08A12; --saffron-700:#B86E08;
  --sunrise-300:#FFB97A; --sunrise-500:#F5994E; --sunrise-600:#E07A2E; --sunrise-700:#B85715;
  --sky-100:#E7F4FA; --sky-200:#C9E6F2; --sky-300:#A8D8E8; --sky-400:#7FBED4; --sky-500:#4FA3C2; --sky-600:#3A8198;
  --lotus-100:#FCE3E1; --lotus-300:#F7B0AC; --lotus-500:#EE7D78; --lotus-600:#D85B55;
  --wood-300:#D9B98A; --wood-500:#A8814F; --wood-700:#6E4F25;
  --paper:#FAF6EC; --paper-warm:#FFF8E7; --paper-cool:#F1F6EE; --surface:#FFFFFF; --surface-2:#F6F1E3;
  --ink-900:#2A2620; --ink-700:#4A4238; --ink-500:#6B6155; --ink-300:#A89F90; --ink-100:#E4DED1;
  --border:#E4DED1; --border-strong:#C8BFAE;

  --font-display:'Fredoka','Nunito','Noto Sans SC',system-ui,sans-serif;
  --font-sans:'Nunito','Noto Sans SC','PingFang SC','Hiragino Sans GB',-apple-system,system-ui,sans-serif;
  --font-cjk:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(74,60,30,.06);
  --shadow-md:0 4px 14px rgba(74,60,30,.08);
  --shadow-lg:0 14px 40px rgba(74,60,30,.12);
  --shadow-xl:0 24px 60px rgba(74,60,30,.16);
  --inset-card:inset 0 1px 0 rgba(255,255,255,.6);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1); --ease-soft:cubic-bezier(.4,0,.2,1);

  /* 次第强调色 */
  --cidi-A:var(--sky-500); --cidi-A-soft:var(--sky-100);
  --cidi-B:var(--jade-500); --cidi-B-soft:var(--jade-50);
  --cidi-C:var(--saffron-500); --cidi-C-soft:var(--saffron-50);
  --cidi-D:var(--lotus-500); --cidi-D-soft:var(--lotus-100);

  /* 状态色 */
  --st-pending:var(--saffron-500); --st-pending-soft:var(--saffron-50);
  --st-approved:var(--jade-500); --st-approved-soft:var(--jade-50);
  --st-needfix:var(--sunrise-500); --st-needfix-soft:#FFF1E6;
  --st-rejected:var(--lotus-500); --st-rejected-soft:var(--lotus-100);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--paper); color:var(--ink-900);
  font-family:var(--font-sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--jade-200); }
.num { font-family:var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
button { font-family:inherit; cursor:pointer; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#E0D8C6; border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:#CFC5AE; background-clip:padding-box; border:3px solid transparent; }

/* ============================ APP SHELL ================================= */
.app {
  display:grid;
  grid-template-columns:288px 1fr;
  grid-template-rows:64px 1fr;
  grid-template-areas:"top top" "side main";
  height:100vh; overflow:hidden;
}
.topbar {
  grid-area:top; display:flex; align-items:center; gap:18px;
  padding:0 24px; background:var(--surface);
  border-bottom:1px solid var(--border); z-index:20;
}
.sidebar {
  grid-area:side; background:var(--paper-warm);
  border-right:1px solid var(--border);
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
}
.main { grid-area:main; overflow-y:auto; position:relative; }
.main-inner { max-width:1180px; margin:0 auto; padding:28px 36px 80px; }

/* ============================ TOPBAR =================================== */
.brand { display:flex; align-items:center; gap:11px; }
.brand-img { height:26px; width:auto; display:block; }
.brand-tag { font-size:12.5px; font-weight:800; color:var(--jade-700); background:var(--jade-50); border-radius:99px; padding:4px 11px; letter-spacing:.02em; }
.brand-logo {
  width:38px; height:38px; border-radius:12px;
  background:radial-gradient(circle at 38% 32%, var(--jade-300), var(--jade-600));
  display:grid; place-items:center; box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.4);
}
.brand-name { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink-900); letter-spacing:-.01em; }
.brand-sub { font-size:11px; color:var(--ink-300); font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:-2px; }
.topbar-divider { width:1px; height:30px; background:var(--border); }
.topbar-spacer { flex:1; }

.global-search {
  display:flex; align-items:center; gap:9px; height:40px; padding:0 16px;
  background:var(--paper); border:1.5px solid var(--border); border-radius:var(--r-pill);
  width:320px; color:var(--ink-500); transition:border-color .15s, box-shadow .15s;
  font-family:var(--font-sans); text-align:left; cursor:text;
}
.global-search:hover { border-color:var(--border-strong); }
.global-search-ph { flex:1; font-size:14px; color:var(--ink-300); }
.global-search kbd { font-family:var(--font-sans); font-size:11px; font-weight:800; color:var(--ink-300); background:var(--surface-2); border-radius:6px; padding:2px 6px; }
.icon-btn.active { background:var(--jade-50); border-color:var(--jade-300); color:var(--jade-700); }
.bell-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--sunrise-500); color:#fff; font-family:var(--font-display); font-weight:700; font-size:11px; display:grid; place-items:center; box-shadow:0 0 0 2px var(--surface); }

.fashi {
  display:flex; align-items:center; gap:10px; padding:5px 6px 5px 14px;
  background:var(--paper); border:1.5px solid var(--border); border-radius:var(--r-pill); cursor:pointer;
  transition:border-color .15s;
}
.fashi:hover { border-color:var(--border-strong); }
.fashi-name { font-weight:800; font-size:14px; color:var(--ink-900); }
.fashi-role { font-size:11px; color:var(--ink-300); font-weight:700; }
.fashi.active { border-color:var(--jade-300); background:var(--jade-50); }
.fashi-avatar { width:36px; height:36px; border-radius:50%; background:var(--saffron-100); display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 0 2px var(--saffron-300); }
.fashi-avatar img { width:34px; height:34px; object-fit:contain; }

/* ============================ SIDEBAR ================================== */
.nav-top { padding:16px 14px 8px; }
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 14px; border:none; background:none; border-radius:14px;
  font-family:var(--font-sans); font-weight:800; font-size:15px; color:var(--ink-700);
  text-align:left; transition:background .14s, color .14s;
}
.nav-item:hover { background:rgba(122,199,79,.10); }
.nav-item.active { background:var(--jade-500); color:#fff; box-shadow:inset 0 -3px 0 var(--jade-600); }
.nav-item.active .nav-ico { color:#fff; }
.nav-ico { color:var(--ink-300); display:grid; place-items:center; flex-shrink:0; }

.nav-section-label { padding:20px 18px 10px; font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-300); display:flex; align-items:center; gap:8px; }
.nav-section-label::after { content:''; flex:1; height:1.5px; background:var(--border); border-radius:2px; }
.nav-tree { padding:0 12px 24px; display:flex; flex-direction:column; gap:7px; }

/* 次第 = 一级：折叠时为扁平行，展开时升为白色分区卡，层次分明 */
.cidi-group { border-radius:18px; transition:background .18s, box-shadow .18s; }
.cidi-group.open { background:var(--surface); box-shadow:var(--shadow-sm), inset 0 0 0 1.5px var(--border); padding-bottom:6px; }
.cidi-head {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; border:none; background:none; border-radius:16px;
  text-align:left; transition:background .14s;
}
.cidi-head:hover { background:rgba(74,60,30,.05); }
.cidi-group.open .cidi-head:hover { background:transparent; }
.cidi-badge {
  width:34px; height:34px; border-radius:11px; flex-shrink:0;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.3);
}
.cidi-head-text { flex:1; min-width:0; }
.cidi-name { font-weight:900; font-size:16px; color:var(--ink-900); display:flex; align-items:center; gap:7px; letter-spacing:.01em; }
.cidi-name .pending-dot { font-family:var(--font-display); font-size:11px; font-weight:700; color:#fff; background:var(--st-pending); border-radius:99px; padding:1px 7px; }
.cidi-meta { font-size:11.5px; color:var(--ink-300); font-weight:700; margin-top:2px; }
.cidi-chev { color:var(--ink-300); transition:transform .2s var(--ease-soft); flex-shrink:0; }
.cidi-group.open .cidi-chev { transform:rotate(90deg); color:var(--cidi-accent); }

/* 阶段 = 二级：挂在一条连续导引线上，明显从属于次第 */
.stage-list { position:relative; display:flex; flex-direction:column; gap:3px; padding:4px 8px 4px 0; }
.stage-list::before { content:''; position:absolute; left:28px; top:0; bottom:16px; width:2px; background:var(--cidi-accent); opacity:.28; border-radius:2px; }
.stage-item {
  position:relative; display:flex; align-items:center; gap:10px; width:100%;
  padding:7px 10px 7px 44px; border:none; background:none; border-radius:12px;
  text-align:left; transition:background .14s, box-shadow .14s;
}
.stage-item::before { content:''; position:absolute; left:28px; top:50%; width:12px; height:2px; background:var(--cidi-accent); opacity:.32; border-radius:2px; }
.stage-item:hover { background:rgba(74,60,30,.05); }
.stage-dot { position:absolute; left:24px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px var(--paper-warm); z-index:1; transition:box-shadow .14s; }
.cidi-group.open .stage-dot { box-shadow:0 0 0 3px var(--surface); }
.stage-item.active { background:var(--cidi-soft); box-shadow:inset 0 0 0 1.5px var(--cidi-accent); }
.stage-item.active::before, .stage-item.active .stage-dot { opacity:1; }
.stage-item.active .stage-dot { box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--cidi-soft); width:10px; height:10px; }
.stage-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.stage-name { font-weight:800; font-size:14px; color:var(--ink-700); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage-item.active .stage-name { color:var(--ink-900); }
.stage-count { font-size:11px; color:var(--ink-300); font-weight:700; line-height:1.1; }
.stage-pending { align-self:center; font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--st-pending); background:var(--st-pending-soft); border-radius:99px; padding:2px 8px; flex-shrink:0; }
.stage-pending.zero { color:var(--jade-600); background:var(--jade-50); }

/* ============================ TYPOGRAPHY HELPERS ====================== */
.page-title { font-family:var(--font-sans); font-weight:900; font-size:30px; letter-spacing:-.01em; margin:0; }
.section-title { font-weight:900; font-size:19px; color:var(--ink-900); margin:0; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-300); }
.muted { color:var(--ink-500); }
.hint { color:var(--ink-300); }

/* breadcrumb */
.crumbs { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink-300); margin-bottom:8px; }
.crumbs a { color:var(--ink-500); text-decoration:none; cursor:pointer; }
.crumbs a:hover { color:var(--jade-700); }
.crumbs .sep { color:var(--ink-300); }

/* ============================ CARDS =================================== */
.card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-md),var(--inset-card); }
.card-pad { padding:22px; }

/* placeholder note banner */
.note-banner {
  display:flex; align-items:center; gap:13px; padding:13px 18px;
  background:var(--saffron-50); border:1.5px solid var(--saffron-200); border-radius:16px;
  color:var(--saffron-700); font-size:13.5px; font-weight:700;
}
.note-banner .x { margin-left:auto; color:var(--saffron-600); background:none; border:none; padding:4px; border-radius:8px; display:grid; place-items:center; }
.note-banner .x:hover { background:var(--saffron-100); }

/* ============================ BADGES ================================= */
.badge { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:99px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.badge .dot { width:7px; height:7px; border-radius:50%; }
.badge-pending { color:var(--saffron-700); background:var(--st-pending-soft); }
.badge-pending .dot { background:var(--st-pending); }
.badge-approved { color:var(--jade-700); background:var(--st-approved-soft); }
.badge-approved .dot { background:var(--st-approved); }
.badge-needfix { color:var(--sunrise-700); background:var(--st-needfix-soft); }
.badge-needfix .dot { background:var(--st-needfix); }
.badge-rejected { color:var(--lotus-600); background:var(--st-rejected-soft); }
.badge-rejected .dot { background:var(--st-rejected); }

.type-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px 0 8px; border-radius:99px; font-size:12.5px; font-weight:800; background:var(--surface-2); color:var(--ink-700); }
.type-chip .tico { display:grid; place-items:center; }
.diff { display:inline-flex; gap:3px; align-items:center; }
.diff i { width:6px; height:6px; border-radius:50%; background:var(--ink-100); display:block; }
.diff i.on { background:var(--saffron-500); }

/* ============================ PROGRESS =============================== */
.bar { height:10px; border-radius:99px; background:var(--surface-2); overflow:hidden; display:flex; }
.bar > span { height:100%; display:block; }
.bar .seg-approved { background:var(--st-approved); }
.bar .seg-needfix { background:var(--st-needfix); }
.bar .seg-rejected { background:var(--st-rejected); }
.bar .seg-pending { background:transparent; }

.legend { display:flex; flex-wrap:wrap; gap:14px; }
.legend-item { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-500); }
.legend-item .sw { width:10px; height:10px; border-radius:3px; }

/* ============================ BUTTONS =============================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border:none; border-radius:var(--r-pill); font-family:var(--font-sans); font-weight:900; font-size:15px; letter-spacing:.02em; transition:transform .12s var(--ease-soft), box-shadow .12s, filter .12s; }
.btn:active { transform:translateY(2px); }
.btn-jade { background:var(--jade-500); color:#fff; box-shadow:inset 0 -4px 0 var(--jade-600); }
.btn-jade:hover { filter:brightness(1.04); }
.btn-jade:active { box-shadow:inset 0 -2px 0 var(--jade-600); }
.btn-sunrise { background:var(--sunrise-500); color:#fff; box-shadow:inset 0 -4px 0 var(--sunrise-600); }
.btn-sunrise:active { box-shadow:inset 0 -2px 0 var(--sunrise-600); }
.btn-danger { background:var(--lotus-500); color:#fff; box-shadow:inset 0 -4px 0 var(--lotus-600); }
.btn-danger:active { box-shadow:inset 0 -2px 0 var(--lotus-600); }
.btn-sky { background:var(--sky-500); color:#fff; box-shadow:inset 0 -4px 0 var(--sky-600); }
.btn-ghost { background:var(--surface); color:var(--ink-700); box-shadow:inset 0 0 0 2px var(--border-strong), inset 0 -4px 0 #ECE4D2; }
.btn-ghost:hover { background:var(--paper-warm); }
.btn-sm { height:38px; padding:0 16px; font-size:13.5px; }
.btn-lg { height:54px; padding:0 28px; font-size:16px; }
.btn:disabled { opacity:.5; pointer-events:none; }

.icon-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--surface); border:1.5px solid var(--border); color:var(--ink-700); transition:background .14s,border-color .14s; }
.icon-btn:hover { background:var(--paper-warm); border-color:var(--border-strong); }

/* segmented filter */
.segmented { display:inline-flex; background:var(--surface-2); border-radius:var(--r-pill); padding:4px; gap:2px; }
.segmented button { border:none; background:none; height:34px; padding:0 16px; border-radius:99px; font-family:var(--font-sans); font-weight:800; font-size:13.5px; color:var(--ink-500); white-space:nowrap; transition:all .14s; }
.segmented button:hover { color:var(--ink-900); }
.segmented button.on { background:#fff; color:var(--ink-900); box-shadow:var(--shadow-sm); }
.segmented button .cnt { font-family:var(--font-display); font-size:12px; opacity:.65; margin-left:5px; }

/* ============================ STAT TILES ============================= */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat { background:var(--surface); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm),var(--inset-card); position:relative; overflow:hidden; }
.stat .stat-ico { position:absolute; right:-6px; bottom:-8px; opacity:.10; }
.stat-label { font-size:13px; font-weight:800; color:var(--ink-500); display:flex; align-items:center; gap:7px; }
.stat-value { font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--ink-900); line-height:1.05; margin-top:6px; letter-spacing:-.02em; }
.stat-value small { font-size:16px; color:var(--ink-300); font-weight:600; }
.stat-sub { font-size:12.5px; font-weight:700; color:var(--ink-300); margin-top:2px; }

/* ============================ TABLE / LIST =========================== */
.q-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.q-list { display:flex; flex-direction:column; gap:10px; }
.q-row {
  display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:18px;
  background:var(--surface); border-radius:18px; padding:16px 18px;
  box-shadow:var(--shadow-sm); border:1.5px solid transparent; cursor:pointer;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.q-row:hover { border-color:var(--jade-200); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.q-id { font-family:var(--font-display); font-size:12.5px; font-weight:600; color:var(--ink-300); white-space:nowrap; }
.q-type-ico { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-top:4px; }
.q-main { min-width:0; }
.q-stem { font-weight:800; font-size:15.5px; color:var(--ink-900); line-height:1.45; margin-bottom:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.q-tags { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.q-tags > span { white-space:nowrap; }
.q-right { display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.q-go { color:var(--ink-300); }
.q-row:hover .q-go { color:var(--jade-600); }
.rec-annot { display:flex; align-items:center; gap:6px; margin-top:7px; font-family:var(--font-cjk); font-size:13px; font-weight:600; color:var(--ink-500); background:var(--paper-warm); border-radius:9px; padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 0 0 0 1px var(--border); }

/* pagination */
.pager { display:flex; align-items:center; justify-content:center; gap:6px; }
.pager button { min-width:40px; height:40px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-700); padding:0 12px; }
.pager button:hover:not(:disabled) { border-color:var(--jade-300); background:var(--jade-50); }
.pager button.on { background:var(--jade-500); color:#fff; border-color:var(--jade-500); }
.pager button:disabled { opacity:.4; pointer-events:none; }
.pager-now { font-size:13.5px; font-weight:700; color:var(--ink-700); padding:0 10px; white-space:nowrap; }
.pager-now b { color:var(--ink-900); }

/* 大体量分页栏 */
.pager-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.pager-range { font-size:13.5px; font-weight:700; color:var(--ink-500); }
.pager-range b { color:var(--ink-900); }
.pager-hint { color:var(--ink-300); font-weight:700; margin-left:6px; }
.pager-ctrls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.perpage { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--ink-500); }
.perpage select { height:38px; border:1.5px solid var(--border); border-radius:11px; background:var(--surface); font-family:var(--font-sans); font-weight:800; font-size:13.5px; color:var(--ink-900); padding:0 8px; cursor:pointer; }
.pager-jump { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--ink-500); }
.pager-jump input { width:54px; height:38px; border:1.5px solid var(--border); border-radius:11px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-900); outline:none; }
.pager-jump input:focus { border-color:var(--jade-400); box-shadow:0 0 0 3px var(--jade-50); }
.pager-jump button { height:38px; padding:0 14px; border:none; border-radius:11px; background:var(--jade-500); color:#fff; font-family:var(--font-sans); font-weight:800; font-size:13.5px; box-shadow:inset 0 -3px 0 var(--jade-600); }

/* 审核队列 CTA */
.queue-cta { display:flex; align-items:center; gap:16px; width:100%; padding:16px 20px; margin-bottom:16px; border:none; border-radius:18px; background:linear-gradient(100deg, var(--jade-500), var(--jade-600)); box-shadow:var(--shadow-md), inset 0 -4px 0 rgba(0,0,0,.12); text-align:left; transition:filter .14s, transform .12s; }
.queue-cta:hover { filter:brightness(1.04); }
.queue-cta:active { transform:translateY(2px); }
.queue-ico { width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex-shrink:0; }
.queue-text { flex:1; }
.queue-title { font-weight:900; font-size:17px; color:#fff; }
.queue-sub { font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); margin-top:2px; }
.queue-count { display:flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:#fff; background:rgba(255,255,255,.16); padding:9px 15px; border-radius:99px; white-space:nowrap; flex-shrink:0; }
.queue-count b { font-size:16px; }

/* 队列进行中横幅（题目页顶部） */
.queue-banner { display:flex; align-items:center; gap:14px; padding:12px 16px; margin-bottom:16px; border-radius:16px; background:var(--jade-50); box-shadow:inset 0 0 0 1.5px var(--jade-200); }
.queue-banner-ico { width:32px; height:32px; border-radius:10px; background:var(--jade-500); display:grid; place-items:center; flex-shrink:0; }
.queue-banner-text { display:flex; flex-direction:column; flex-shrink:0; }
.queue-banner-title { font-weight:900; font-size:13.5px; color:var(--jade-800); white-space:nowrap; }
.queue-banner-pos { font-size:12px; font-weight:700; color:var(--jade-700); white-space:nowrap; }
.queue-banner-pos b { font-size:13px; }
.queue-banner-bar { flex:1; height:8px; border-radius:99px; background:var(--jade-100); overflow:hidden; min-width:80px; }
.queue-banner-bar > span { display:block; height:100%; background:var(--jade-500); border-radius:99px; transition:width .4s var(--ease-soft); }
.queue-exit { display:flex; align-items:center; gap:5px; height:34px; padding:0 13px; border:none; border-radius:99px; background:var(--surface); color:var(--ink-500); font-family:var(--font-sans); font-weight:800; font-size:12.5px; box-shadow:inset 0 0 0 1.5px var(--border); flex-shrink:0; }
.queue-exit:hover { color:var(--lotus-600); box-shadow:inset 0 0 0 1.5px var(--lotus-300); }

/* 队列完成庆祝页 */
.queue-done { min-height:64vh; display:grid; place-items:center; }
.queue-done-card { display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lg), var(--inset-card); padding:44px 48px 40px; max-width:560px; }
.queue-done-halo { width:128px; height:128px; border-radius:50%; background:radial-gradient(circle at 50% 38%, var(--jade-50), var(--jade-100)); display:flex; align-items:flex-end; justify-content:center; box-shadow:inset 0 2px 0 rgba(255,255,255,.7); margin-bottom:18px; overflow:hidden; }
.queue-done-halo img { width:104px; margin-bottom:-4px; animation:floaty 3.4s var(--ease-soft) infinite; }

/* ============================ PHONE PREVIEW ========================== */
.phone {
  width:340px; flex-shrink:0; background:#1f1b16; border-radius:42px; padding:11px;
  box-shadow:var(--shadow-xl), inset 0 0 0 2px #36302757;
}
.phone-screen { background:var(--paper); border-radius:32px; overflow:hidden; height:660px; display:flex; flex-direction:column; position:relative; }
.phone-notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:108px; height:26px; background:#1f1b16; border-radius:99px; z-index:5; }
.phone-status { display:flex; justify-content:space-between; align-items:center; padding:13px 24px 6px; font-size:12px; font-weight:800; color:var(--ink-700); }
.phone-app-top { display:flex; align-items:center; gap:12px; padding:6px 18px 12px; }
.phone-app-top .pbar { flex:1; height:14px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.phone-app-top .pbar span { display:block; height:100%; background:var(--jade-500); border-radius:99px; }
.phone-heart { color:var(--lotus-500); font-weight:900; display:flex; align-items:center; gap:4px; font-size:14px; }
.phone-body { flex:1; overflow-y:auto; padding:8px 20px 20px; }
.phone-foot { padding:14px 20px 22px; }

/* in-app question rendering */
.qa-kicker { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300); }
.qa-stem { font-family:var(--font-cjk); font-weight:700; font-size:19px; line-height:1.5; color:var(--ink-900); margin:8px 0 18px; }
.qa-scene { background:var(--sky-100); border-radius:16px; padding:13px 15px; font-size:13.5px; line-height:1.55; color:var(--sky-600); font-weight:600; margin-bottom:16px; display:flex; gap:9px; }
.opt { display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:14px 16px; margin-bottom:11px; box-shadow:inset 0 0 0 2px var(--ink-100), inset 0 -4px 0 #ECE4D2; font-weight:700; font-size:15px; color:var(--ink-900); line-height:1.4; }
.opt .key { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; background:var(--surface-2); font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-500); }
.opt.correct { box-shadow:inset 0 0 0 2px var(--jade-500), inset 0 -4px 0 var(--jade-600); background:var(--jade-50); }
.opt.correct .key { background:var(--jade-500); color:#fff; }
.opt .corr-tick { margin-left:auto; color:var(--jade-600); }

.judge-row { display:flex; gap:14px; }
.judge-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 0; border-radius:20px; background:#fff; box-shadow:inset 0 0 0 2px var(--ink-100), inset 0 -4px 0 #ECE4D2; font-weight:900; font-size:16px; color:var(--ink-700); }
.judge-btn.correct { box-shadow:inset 0 0 0 2px var(--jade-500), inset 0 -4px 0 var(--jade-600); background:var(--jade-50); color:var(--jade-700); }
.judge-btn.wrong-dim { opacity:.5; }

.cloze-text { font-family:var(--font-cjk); font-size:18px; line-height:2.1; color:var(--ink-900); font-weight:700; margin-bottom:20px; }
.cloze-blank { display:inline-grid; place-items:center; min-width:54px; height:32px; padding:0 8px; border-radius:9px; background:var(--jade-50); box-shadow:inset 0 0 0 2px var(--jade-400); color:var(--jade-700); font-weight:800; vertical-align:middle; margin:0 3px; }
.cloze-blank.empty { background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--border-strong); color:transparent; }
.word-bank { display:flex; flex-wrap:wrap; gap:10px; }
.word-chip { padding:9px 16px; border-radius:13px; background:#fff; box-shadow:inset 0 0 0 2px var(--ink-100), inset 0 -3px 0 #ECE4D2; font-weight:800; font-size:15px; color:var(--ink-900); }
.word-chip.used { opacity:.4; }

.match-grid { display:flex; gap:16px; }
.match-col { flex:1; display:flex; flex-direction:column; gap:11px; }
.match-cell { background:#fff; border-radius:14px; padding:13px 14px; box-shadow:inset 0 0 0 2px var(--ink-100); font-weight:700; font-size:14px; color:var(--ink-900); line-height:1.4; text-align:center; min-height:52px; display:grid; place-items:center; }
.match-cell.l { box-shadow:inset 0 0 0 2px var(--jade-300); background:var(--jade-50); }
.match-mid { display:flex; flex-direction:column; justify-content:space-around; align-items:center; color:var(--jade-400); }

.order-list { display:flex; flex-direction:column; gap:11px; }
.order-item { display:flex; align-items:center; gap:13px; background:#fff; border-radius:15px; padding:13px 15px; box-shadow:inset 0 0 0 2px var(--ink-100), inset 0 -4px 0 #ECE4D2; font-weight:800; font-size:15px; color:var(--ink-900); }
.order-num { width:28px; height:28px; border-radius:9px; background:var(--saffron-500); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:15px; flex-shrink:0; }
.order-grip { margin-left:auto; color:var(--ink-300); }

.img-slot { width:100%; height:170px; border-radius:18px; background:linear-gradient(135deg,var(--saffron-50),var(--jade-50)); box-shadow:inset 0 0 0 2px var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink-300); text-align:center; padding:16px; margin-bottom:8px; position:relative; overflow:hidden; }
.img-slot .cap { font-size:12.5px; font-weight:700; color:var(--ink-500); line-height:1.5; max-width:240px; }
.img-slot .ph-tag { position:absolute; top:10px; right:10px; font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--saffron-700); background:var(--saffron-100); padding:3px 8px; border-radius:99px; }

/* in-app check button */
.phone-check { width:100%; height:52px; border-radius:var(--r-pill); background:var(--jade-500); color:#fff; border:none; font-family:var(--font-sans); font-weight:900; font-size:16px; letter-spacing:.05em; box-shadow:inset 0 -4px 0 var(--jade-600); }

/* ============================ REVIEW PANEL ========================== */
.review-grid { display:grid; grid-template-columns:340px 1fr; gap:32px; align-items:start; }
.answer-key { background:var(--jade-50); border-radius:18px; padding:16px 18px; box-shadow:inset 0 0 0 1.5px var(--jade-200); }
.answer-key .ak-label { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--jade-700); margin-bottom:6px; }
.kv { display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); }
.kv:last-child { border-bottom:none; }
.kv .k { width:72px; flex-shrink:0; font-size:13px; font-weight:800; color:var(--ink-300); }
.kv .v { font-size:14px; font-weight:600; color:var(--ink-900); line-height:1.55; }
.kv .v.nowrap { white-space:nowrap; }

.explain-box { background:var(--paper-warm); border-radius:16px; padding:15px 17px; box-shadow:inset 0 0 0 1.5px var(--border); }
.explain-box .lbl { display:flex; align-items:center; gap:8px; font-weight:900; font-size:14px; color:var(--ink-900); margin-bottom:8px; }
.explain-box p { margin:0; font-family:var(--font-cjk); font-size:14.5px; line-height:1.7; color:var(--ink-700); }

/* review action bar */
.review-actions { display:flex; gap:12px; flex-wrap:wrap; }
.decide-card { background:var(--surface); border-radius:20px; padding:20px; box-shadow:var(--shadow-md),var(--inset-card); position:relative; }
.current-state { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:800; font-size:14px; margin-bottom:16px; }

/* 当前决定标记 */
.decision-btn { position:relative; overflow:visible; }
.decision-btn.is-current { box-shadow:inset 0 -4px 0 rgba(0,0,0,.22), 0 0 0 3px var(--surface), 0 0 0 5px rgba(42,38,32,.18); }
.current-flag { position:absolute; top:-9px; right:-5px; display:inline-flex; align-items:center; gap:2px; background:var(--ink-900); color:#fff; font-family:var(--font-sans); font-size:10.5px; font-weight:800; letter-spacing:.02em; padding:2px 8px 2px 6px; border-radius:99px; box-shadow:var(--shadow-sm); z-index:3; }

/* 操作确认 toast */
.decide-toast {
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:13px 22px; border-radius:99px; font-weight:800; font-size:14.5px;
  background:var(--ink-900); color:#fff; box-shadow:var(--shadow-xl); z-index:200;
  animation:toastpop .3s var(--ease-bounce);
}
.decide-toast.toast-approved { background:var(--jade-600); }
.decide-toast.toast-needfix { background:var(--sunrise-600); }
.decide-toast.toast-rejected { background:var(--lotus-600); }
.decide-toast.toast-pending { background:var(--sky-600); }
@keyframes toastpop { from { opacity:0; transform:translateX(-50%) translateY(14px) scale(.92); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }

/* annotation */
.annot-box textarea { width:100%; min-height:90px; resize:vertical; border:1.5px solid var(--border); border-radius:14px; padding:13px 15px; font-family:var(--font-cjk); font-size:14px; line-height:1.6; color:var(--ink-900); background:var(--paper-warm); outline:none; transition:border-color .15s, box-shadow .15s; }
.annot-box textarea:focus { border-color:var(--jade-400); box-shadow:0 0 0 4px var(--jade-50); background:#fff; }
.annot-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.annot { display:flex; gap:11px; padding:12px 14px; background:var(--paper-warm); border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--border); }
.annot-av { width:30px; height:30px; border-radius:50%; background:var(--saffron-100); flex-shrink:0; display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 0 1.5px var(--saffron-300); }
.annot-av img { width:28px; height:28px; }
.annot-body { flex:1; min-width:0; }
.annot-head { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.annot-name { font-weight:800; font-size:13px; color:var(--ink-900); }
.annot-time { font-size:11.5px; color:var(--ink-300); font-weight:700; }
.annot-text { font-family:var(--font-cjk); font-size:13.5px; line-height:1.6; color:var(--ink-700); }
.annot.tag-needfix { box-shadow:inset 0 0 0 1.5px var(--st-needfix); background:var(--st-needfix-soft); }
.annot.tag-rejected { box-shadow:inset 0 0 0 1.5px var(--lotus-300); background:var(--st-rejected-soft); }
.annot.tag-question { box-shadow:inset 0 0 0 1.5px var(--sky-300); background:var(--sky-100); }

/* mini bar chart for type distribution */
.tbar-row { display:flex; align-items:center; gap:14px; padding:7px 0; }
.tbar-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.tbar-name { width:74px; font-weight:800; font-size:13.5px; color:var(--ink-700); flex-shrink:0; }
.tbar-track { flex:1; height:14px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.tbar-fill { height:100%; border-radius:99px; }
.tbar-val { width:58px; text-align:right; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-700); flex-shrink:0; }

/* activity feed */
.feed { display:flex; flex-direction:column; }
.feed-item { display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--border); }
.feed-item:last-child { border-bottom:none; }
.feed-dot { width:32px; height:32px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; }
.feed-text { flex:1; font-size:13.5px; line-height:1.5; color:var(--ink-700); }
.feed-text b { color:var(--ink-900); font-weight:800; }
.feed-time { font-size:11.5px; color:var(--ink-300); font-weight:700; white-space:nowrap; }

/* cidi overview cards */
.cidi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.cidi-card { background:var(--surface); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-md),var(--inset-card); cursor:pointer; transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden; }
.cidi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.cidi-card-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.cidi-card-badge { width:52px; height:52px; border-radius:16px; flex-shrink:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:26px; color:#fff; box-shadow:inset 0 -3px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.3); }
.cidi-card-name { font-weight:900; font-size:21px; color:var(--ink-900); display:flex; align-items:baseline; gap:9px; }
.cidi-card-name .cidi-card-en { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cidi-card-en { font-size:12.5px; font-weight:700; color:var(--ink-300); letter-spacing:.02em; }
.cidi-card-gist { font-size:13px; color:var(--ink-500); font-weight:700; margin-top:3px; }
.cidi-ring { margin-left:auto; flex-shrink:0; }
.cidi-stages { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.cidi-stage-line { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:11px; transition:background .12s; }
.cidi-stage-line:hover { background:var(--paper-cool); }
.cidi-stage-line .nm { font-weight:800; font-size:13.5px; color:var(--ink-700); width:96px; flex-shrink:0; }
.cidi-stage-line .mini-bar { flex:1; }
.cidi-stage-line .pc { font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--ink-300); width:38px; text-align:right; }

/* empty / misc */
.divider { height:1px; background:var(--border); margin:0; border:none; }
.fade-in { animation:rise .32s var(--ease-soft); }
@keyframes rise { from { transform:translateY(8px); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .fade-in { animation:none; } }

/* ============================ 登录页 ================================= */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:32px; position:relative; overflow:hidden; background:var(--paper); }
.login-orbs { position:absolute; inset:0; pointer-events:none; }
.login-orbs .orb { position:absolute; border-radius:50%; filter:blur(8px); opacity:.5; }
.orb-1 { width:340px; height:340px; background:radial-gradient(circle,var(--jade-100),transparent 70%); top:-90px; left:-70px; }
.orb-2 { width:420px; height:420px; background:radial-gradient(circle,var(--saffron-100),transparent 70%); bottom:-140px; right:-90px; }
.orb-3 { width:260px; height:260px; background:radial-gradient(circle,var(--sky-100),transparent 70%); top:40%; right:18%; }

.login-card {
  position:relative; z-index:1; width:880px; max-width:100%;
  display:grid; grid-template-columns:0.82fr 1fr;
  background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg), var(--inset-card); overflow:hidden;
}
.login-card.shake { animation:shake .46s var(--ease-soft); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(5px)} 50%{transform:translateX(-7px)} }

.login-brandside {
  background:linear-gradient(165deg, var(--jade-500), var(--jade-700));
  padding:34px 30px; display:flex; flex-direction:column; color:#fff; position:relative; overflow:hidden;
}
.login-brandside::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.06); bottom:-120px; left:-80px; }
.login-brandtop { display:flex; align-items:center; gap:12px; z-index:1; }
.login-logo-chip { display:inline-flex; align-items:center; background:#fff; border-radius:14px; padding:11px 18px; box-shadow:var(--shadow-sm); }
.login-logo-chip img { height:26px; width:auto; display:block; }
.login-mascot { flex:1; display:grid; place-items:center; z-index:1; padding:18px 0; }
.login-halo { width:188px; height:188px; border-radius:50%; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.9), rgba(255,255,255,.62)); display:flex; align-items:flex-end; justify-content:center; box-shadow:0 14px 34px rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.7); animation:floaty 3.4s var(--ease-soft) infinite; }
.login-halo img { width:150px; margin-bottom:-6px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.14)); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.login-brandfoot { z-index:1; }
.login-slogan { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:.04em; }
.login-sutra { margin:8px 0 0; font-family:var(--font-cjk); font-size:13px; line-height:1.7; color:rgba(255,255,255,.82); font-weight:500; }

.login-formside { padding:40px 42px 32px; display:flex; flex-direction:column; }
.login-eyebrow { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--jade-700); }
.login-title { font-family:var(--font-sans); font-weight:900; font-size:30px; color:var(--ink-900); margin:8px 0 4px; letter-spacing:-.01em; }
.login-sub { font-size:14px; color:var(--ink-500); font-weight:600; margin:0 0 24px; line-height:1.55; }
.login-field { display:block; margin-bottom:16px; }
.login-label { display:block; font-size:13px; font-weight:800; color:var(--ink-700); margin-bottom:7px; }
.login-input { display:flex; align-items:center; gap:10px; height:50px; padding:0 16px; background:var(--paper-warm); border:1.5px solid var(--border); border-radius:14px; transition:border-color .15s, box-shadow .15s, background .15s; }
.login-input:focus-within { border-color:var(--jade-400); box-shadow:0 0 0 4px var(--jade-50); background:#fff; }
.login-input.err { border-color:var(--lotus-300); box-shadow:0 0 0 4px var(--lotus-100); }
.login-input input { flex:1; border:none; background:none; outline:none; font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--ink-900); }
.login-input input::placeholder { color:var(--ink-300); font-weight:500; }
.login-hint-err { display:block; margin-top:6px; font-size:12px; font-weight:700; color:var(--lotus-600); }
.login-row { display:flex; align-items:center; justify-content:space-between; margin:6px 0 18px; }
.login-check { display:inline-flex; align-items:center; gap:8px; border:none; background:none; font-family:var(--font-sans); font-size:13.5px; font-weight:700; color:var(--ink-500); }
.login-check .box { width:20px; height:20px; border-radius:7px; border:2px solid var(--border-strong); display:grid; place-items:center; transition:all .14s; }
.login-check.on .box { background:var(--jade-500); border-color:var(--jade-500); }
.login-link { font-size:13.5px; font-weight:700; color:var(--jade-700); text-decoration:none; cursor:pointer; }
.login-link:hover { text-decoration:underline; }
.login-foot { margin:18px 0 0; font-size:12px; font-weight:700; color:var(--ink-300); text-align:center; }

/* ============================ 遮罩 / 浮层 =========================== */
.overlay-scrim { position:fixed; inset:0; background:rgba(42,38,32,.34); backdrop-filter:blur(2px); z-index:300; display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; animation:fade-scrim .18s ease; }
@keyframes fade-scrim { from { opacity:0; } to { opacity:1; } }
.menu-scrim { position:fixed; inset:0; z-index:90; }

/* 搜索弹窗 */
.search-modal { width:660px; max-width:92vw; max-height:64vh; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; animation:pop-modal .24s var(--ease-bounce); }
@keyframes pop-modal { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
.search-top { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.search-top input { flex:1; border:none; background:none; outline:none; font-family:var(--font-sans); font-size:16px; font-weight:600; color:var(--ink-900); }
.search-top input::placeholder { color:var(--ink-300); font-weight:500; }
.search-esc { font-family:var(--font-sans); font-size:11px; font-weight:800; color:var(--ink-300); background:var(--surface-2); border-radius:6px; padding:3px 7px; }
.search-body { overflow-y:auto; padding:8px; }
.search-empty { text-align:center; padding:38px 20px; color:var(--ink-300); }
.search-empty p { margin:10px 0 0; font-weight:700; font-size:14px; color:var(--ink-500); }
.search-tips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.search-tip { padding:7px 14px; border-radius:99px; border:1.5px solid var(--border); background:var(--paper-warm); font-family:var(--font-sans); font-weight:700; font-size:13px; color:var(--ink-700); }
.search-tip:hover { border-color:var(--jade-300); background:var(--jade-50); color:var(--jade-700); }
.search-count { font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink-300); padding:8px 12px 6px; }
.search-results { display:flex; flex-direction:column; gap:4px; }
.search-row { display:flex; align-items:center; gap:14px; width:100%; padding:11px 12px; border:none; background:none; border-radius:14px; text-align:left; transition:background .12s; }
.search-row:hover { background:var(--paper-cool); }
.search-row-main { flex:1; min-width:0; }
.search-row-stem { font-weight:800; font-size:14.5px; color:var(--ink-900); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-row-meta { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--ink-300); margin-top:3px; }
.search-row-meta .dot-sep { opacity:.5; }

/* 浮层（通知 / 菜单） */
.popover { position:fixed; top:60px; z-index:100; background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--border); animation:pop-menu .2s var(--ease-bounce); overflow:hidden; }
@keyframes pop-menu { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
.notif-pop { right:86px; width:340px; }
.menu-pop { right:24px; width:248px; padding:8px; }
.popover-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px 12px; border-bottom:1px solid var(--border); }
.popover-title { font-weight:900; font-size:15px; color:var(--ink-900); }
.notif-list { max-height:340px; overflow-y:auto; padding:6px; }
.notif-item { display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:13px; transition:background .12s; }
.notif-item:hover { background:var(--paper-cool); }
.notif-text { font-size:13px; line-height:1.45; color:var(--ink-700); }
.notif-text b { color:var(--ink-900); font-weight:800; }
.notif-time { font-size:11.5px; color:var(--ink-300); font-weight:700; margin-top:2px; }
.notif-new { width:8px; height:8px; border-radius:50%; background:var(--sunrise-500); flex-shrink:0; margin-top:6px; }
.notif-foot { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:13px; border:none; border-top:1px solid var(--border); background:none; font-family:var(--font-sans); font-weight:800; font-size:13.5px; color:var(--jade-700); }
.notif-foot:hover { background:var(--jade-50); }

.menu-id { display:flex; align-items:center; gap:12px; padding:10px 10px 12px; }
.menu-name { font-weight:900; font-size:15px; color:var(--ink-900); }
.menu-role { font-size:12px; font-weight:700; color:var(--ink-300); margin-top:1px; }
.menu-divider { height:1px; background:var(--border); margin:4px 0; }
.menu-item { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:none; background:none; border-radius:11px; font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--ink-700); text-align:left; transition:background .12s; }
.menu-item:hover { background:var(--paper-cool); }
.menu-item.danger { color:var(--lotus-600); }
.menu-item.danger:hover { background:var(--lotus-100); }