/* =====================================================================
   高中物理个性化学习 Agent · 教师试验台
   设计系统 v1  (PHYSICS-AGENT-UI-V1)
   方向：学术可信 / 深海军蓝 + 暖纸底 / 衬线标题 · 去模板化
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* 主色 · 深海军蓝（学术、可信、稳重） */
  --navy-900: #102236;
  --navy-800: #163B5C;
  --navy-700: #1B4A73;
  --navy-600: #235E8F;
  --blue-500: #2E6BB8;      /* 科技蓝强调 */
  --blue-400: #4A86CF;
  --blue-100: #E7F0FA;
  --blue-050: #F2F7FD;

  /* 中性 · 暖纸底，避免纯白临床感 */
  --paper:      #F5F3EE;
  --paper-2:    #EFECE5;
  --card:       #FFFFFF;
  --line:       #E3E0D8;
  --line-strong:#CFCBC1;
  --ink-900:    #1A2430;
  --ink-700:    #3A4656;
  --ink-500:    #6B7585;
  --ink-400:    #9099A6;
  --ink-300:    #B6BDC7;

  /* 状态色（去霓虹，偏沉稳） */
  --ok:     #2E7D44;
  --ok-bg:  #E8F3EC;
  --warn:   #B26A00;
  --warn-bg:#FBF0DD;
  --err:    #B83A2E;
  --err-bg: #FBEAE7;
  --info:   #2E6BB8;
  --info-bg:#E7F0FA;
  --neutral-bg:#EDEEEF;

  /* 字体 */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans:  "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* 间距 / 圆角 / 阴影 */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --shadow-1: 0 1px 2px rgba(16,34,54,.04), 0 1px 1px rgba(16,34,54,.03);
  --shadow-2: 0 4px 14px rgba(16,34,54,.07), 0 1px 3px rgba(16,34,54,.05);
  --shadow-3: 0 12px 34px rgba(16,34,54,.12), 0 2px 8px rgba(16,34,54,.06);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  font-family:var(--font-sans);
  color:var(--ink-900);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
/* 关键：所有内联 SVG 默认 1em×1em，防止未设尺寸的 SVG 以默认 300×150 撑破布局 */
svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;max-width:100%}

/* ---------- App Shell (flexbox 稳健左右布局) ---------- */
.app{
  display:flex;
  align-items:stretch;
  min-height:100vh;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* ---------- Sidebar ---------- */
.sidebar{
  flex:none;
  width:240px;
  position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 100%);
  color:#CDD9E5;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  overflow:hidden;          /* 任何子元素溢出都不外扩 */
  z-index:40;
}
.sidebar__brand{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand__mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-700));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;color:#fff;font-size:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  margin-bottom:12px;
}
.brand__title{font-family:var(--font-serif);font-size:15.5px;color:#fff;font-weight:600;letter-spacing:.2px;line-height:1.35}
.brand__sub{font-size:11.5px;color:#8FA3BC;margin-top:3px;letter-spacing:.3px}
.sidebar__nav{padding:14px 12px;flex:1;overflow-y:auto}
.nav__group-label{font-size:10.5px;color:#6E84A0;letter-spacing:1.5px;text-transform:uppercase;margin:14px 10px 6px;font-weight:600}
.nav__item{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:8px;font-size:13.5px;color:#B8C6D8;
  cursor:pointer;transition:background .15s,color .15s;margin-bottom:2px;
  border:1px solid transparent;
}
.nav__item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav__item.is-active{
  background:rgba(46,107,184,.18);color:#fff;
  border-color:rgba(74,134,207,.35);
}
.nav__icon,.nav__item svg{width:17px;height:17px;flex:none;opacity:.9}
.nav__badge{
  margin-left:auto;font-size:11px;background:var(--blue-500);color:#fff;
  padding:1px 7px;border-radius:10px;font-weight:600;
}
.sidebar__foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#7A8CA3}
.sidebar__foot .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;box-shadow:0 0 0 3px rgba(46,125,68,.25)}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:20;overflow-x:hidden}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(245,243,238,.85);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;
  padding:14px 32px;
}
.topbar__crumb{font-size:13px;color:var(--ink-500)}
.topbar__crumb b{color:var(--ink-900);font-weight:600}
.topbar__spacer{flex:1}
.topbar__actions{display:flex;gap:10px;align-items:center}
.topbar__env{
  font-size:11.5px;color:var(--ink-500);
  border:1px solid var(--line-strong);background:var(--card);
  padding:4px 10px;border-radius:20px;
}
.topbar__env .pill-ok{color:var(--ok);font-weight:600}

.content{padding:28px 32px 64px;max-width:1320px;width:100%;margin:0 auto}

/* ---------- Typography ---------- */
.page-title{font-family:var(--font-serif);font-size:24px;font-weight:600;color:var(--navy-900);letter-spacing:.2px}
.page-sub{color:var(--ink-500);font-size:13.5px;margin-top:4px}
.section-title{font-family:var(--font-serif);font-size:16.5px;font-weight:600;color:var(--navy-900);display:flex;align-items:center;gap:8px}
.section-title::before{content:"";width:3px;height:15px;background:var(--blue-500);border-radius:2px}
.h-sub{font-size:13px;font-weight:600;color:var(--ink-700);letter-spacing:.2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;
  border:1px solid transparent;transition:all .15s;white-space:nowrap;min-height:36px;
}
.btn svg{width:15px;height:15px}
.btn--primary{background:var(--navy-800);color:#fff}
.btn--primary:hover{background:var(--navy-700);box-shadow:var(--shadow-2)}
.btn--accent{background:var(--blue-500);color:#fff}
.btn--accent:hover{background:#2569ab;box-shadow:var(--shadow-2)}
.btn--ghost{background:var(--card);color:var(--ink-700);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--blue-400);color:var(--blue-500)}
.btn--subtle{background:var(--blue-050);color:var(--blue-500);border-color:var(--blue-100)}
.btn--subtle:hover{background:var(--blue-100)}
.btn--danger{background:var(--err-bg);color:var(--err);border-color:rgba(184,58,46,.2)}
.btn--danger:hover{background:#f7dedb}
.btn--sm{padding:5px 11px;font-size:12px;min-height:30px}
.btn--lg{padding:11px 22px;font-size:14px;min-height:44px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card--pad{padding:22px}
.card--pad-sm{padding:16px}
.card__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.card__body{padding:20px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;line-height:1.4;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--ok{color:var(--ok);background:var(--ok-bg)}
.badge--warn{color:var(--warn);background:var(--warn-bg)}
.badge--err{color:var(--err);background:var(--err-bg)}
.badge--info{color:var(--info);background:var(--info-bg)}
.badge--neutral{color:var(--ink-500);background:var(--neutral-bg)}
.badge--plain{background:none;padding:0}
.badge--plain::before{display:none}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11.5px;background:var(--blue-050);color:var(--blue-500);font-weight:500;border:1px solid var(--blue-100)}

/* ---------- Metric ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;position:relative;overflow:hidden;
}
.metric__label{font-size:12px;color:var(--ink-500);display:flex;align-items:center;gap:6px}
.metric__value{font-family:var(--font-serif);font-size:30px;font-weight:700;color:var(--navy-900);margin-top:6px;line-height:1;letter-spacing:.5px}
.metric__hint{font-size:11.5px;color:var(--ink-400);margin-top:6px}
.metric--accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue-500)}

/* ---------- Question Type Pills (中文题型) ---------- */
.qtype{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600;letter-spacing:.2px}
.qtype--choice{background:#EAF1FB;color:#2E6BB8;border:1px solid #D5E4F6}
.qtype--mchoice{background:#EFEAF6;color:#6B4FA0;border:1px solid #DDD2EE}
.qtype--fill{background:#E6F3EE;color:#2E7D44;border:1px solid #CDE6D6}
.qtype--calc{background:#FBF0DD;color:#B26A00;border:1px solid #F0DDB8}
.qtype--image{background:#E7F0FA;color:#235E8F;border:1px solid #CFE0F2}
.qtype--exp{background:#FBEAE7;color:#B83A2E;border:1px solid #F2D2CC}
.qtype--mix{background:#EFECE5;color:#5C5040;border:1px solid #DCD6C8}

/* ---------- Difficulty ---------- */
.diff{display:inline-flex;gap:2px}
.diff i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.diff i.on{background:var(--blue-500)}
.diff__label{font-size:11.5px;color:var(--ink-500);margin-left:5px}

/* ---------- Table (sparse, card-like rows) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:680px;table-layout:fixed}
.tbl thead th{
  text-align:left;font-weight:600;color:var(--ink-500);font-size:11.5px;
  letter-spacing:.4px;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr:hover{background:var(--blue-050)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl--nowrap{white-space:nowrap}
.cell-id{font-family:var(--font-mono);font-size:12px;color:var(--ink-500);white-space:nowrap}
.cell-stem{color:var(--ink-700);line-height:1.45}

/* 实验编号：防止长文本溢出到下一列 */
.cell-experiment-id{
  min-width:0;
  overflow:hidden;
}
.cell-experiment-id-text{
  display:block;
  width:100%;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 原题 / 错误摘要：两行省略，禁止逐字换行 */
.cell-question,.cell-error{
  min-width:0;             /* 允许 flex/grid 子项收缩 */
  overflow:hidden;
}
.cell-ellipsis-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.5;
  word-break:normal;           /* 禁止 break-all/break-word 逐字断行 */
  overflow-wrap:normal;        /* 仅在正常断词点换行 */
  white-space:normal;
}

.cell-2line{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;max-width:240px;line-height:1.5;
}
.cell-2line--wide{max-width:280px}
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);min-width:0}
.table-wrap .tbl{min-width:680px}

/* ---------- Dashboard bottom layout ---------- */
/* 最近试验占大部分宽度，系统状态固定窄列 */
.dashboard-bottom{
  grid-template-columns:minmax(0,1fr) minmax(280px,320px);
}

/* ---------- Image handling (no broken images) ---------- */
.qimg{
  width:100%;border-radius:8px;border:1px solid var(--line);background:var(--paper-2);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
/* 空状态：固定 180px 高、虚线边、中性色（非绿色） */
.qimg--empty{
  height:180px;background:var(--paper);border:1.5px dashed var(--line-strong);
  border-radius:10px;cursor:default;
}
.qimg--upload{
  height:180px;background:var(--paper);border:1.5px dashed var(--line-strong);
  border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;
}
.qimg--upload:hover{border-color:var(--blue-400);background:var(--blue-050)}
.qimg--real{background:#fff;cursor:zoom-in;height:auto;min-height:120px}
.qimg--real img{width:100%;height:auto;display:block}
.qimg__placeholder{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-400);text-align:center;padding:16px;
}
.qimg__placeholder svg{width:30px;height:30px;opacity:.5}
.qimg__placeholder span{font-size:12.5px;line-height:1.5}
.qimg__placeholder .sub{font-size:11px;color:var(--ink-300);margin-top:2px}
.thumb-row{display:flex;gap:8px;flex-wrap:wrap}
.thumb{
  width:64px;height:64px;border-radius:6px;border:1px solid var(--line);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  position:relative;transition:border-color .15s;
}
.thumb:hover{border-color:var(--blue-400)}
.thumb--active{border-color:var(--blue-500);box-shadow:0 0 0 2px var(--blue-100)}
.thumb svg{width:20px;height:20px;color:var(--ink-300)}

/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.field__label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.field__label .req{color:var(--err)}
.input,.textarea,.select{
  width:100%;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--card);font-size:13.5px;color:var(--ink-900);transition:border-color .15s,box-shadow .15s;
  font-family:inherit;
}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.textarea{min-height:96px;resize:vertical;line-height:1.55}
.field__hint{font-size:11.5px;color:var(--ink-400);margin-top:5px}
.field__example{
  font-size:12px;color:var(--ink-500);background:var(--paper-2);
  border:1px dashed var(--line-strong);border-radius:6px;padding:8px 10px;margin-top:6px;
}
.search-input{
  display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;
}
.search-input input{border:none;background:none;flex:1;padding:9px 0;font-size:13.5px}
.search-input:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.search-input svg{width:16px;height:16px;color:var(--ink-400)}

/* ---------- Stepper ---------- */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:8px}
.step{display:flex;align-items:center;gap:10px;flex:1}
.step__num{
  width:28px;height:28px;border-radius:50%;background:var(--card);border:2px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--ink-400);
  flex:none;transition:all .2s;
}
.step.is-done .step__num{background:var(--ok);border-color:var(--ok);color:#fff}
.step.is-current .step__num{background:var(--blue-500);border-color:var(--blue-500);color:#fff;box-shadow:0 0 0 4px var(--blue-100)}
.step__label{font-size:12.5px;color:var(--ink-400);font-weight:500}
.step.is-current .step__label,.step.is-done .step__label{color:var(--ink-900)}
.step__line{flex:1;height:2px;background:var(--line);margin:0 8px}
.step.is-done + .step__line,.step__line.is-done{background:var(--ok)}

/* ---------- Flow steps (dashboard 核心流程) ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch}
.flow__step{position:relative;padding:16px 16px 16px 20px;background:var(--card);border:1px solid var(--line)}
.flow__step:not(:last-child){border-right:none}
.flow__step:not(:last-child)::after{
  content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:13px;height:13px;background:var(--card);border-right:1px solid var(--line);border-top:1px solid var(--line);z-index:2;
}
.flow__step:not(:last-child)::before{
  content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;background:var(--paper);z-index:1;
}
.flow__idx{font-family:var(--font-serif);font-size:13px;color:var(--blue-500);font-weight:700}
.flow__title{font-size:13.5px;font-weight:600;color:var(--navy-900);margin:4px 0 3px}
.flow__desc{font-size:11.5px;color:var(--ink-500);line-height:1.45}
.flow__step.is-active{background:var(--navy-800);border-color:var(--navy-800)}
.flow__step.is-active .flow__idx{color:#7FB0E8}
.flow__step.is-active .flow__title{color:#fff}
.flow__step.is-active .flow__desc{color:#A9BCD1}
.flow__step.is-active::after{background:var(--navy-800);border-color:var(--navy-800)}

/* ---------- Diagnosis structure cards ---------- */
.diag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.diag-item{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.diag-item__label{font-size:11px;color:var(--ink-500);font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
.diag-item__value{font-size:13px;color:var(--ink-900);margin-top:5px;line-height:1.5}
.confidence{display:flex;align-items:center;gap:8px}
.confidence__bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.confidence__fill{height:100%;background:linear-gradient(90deg,var(--blue-500),var(--ok));border-radius:3px}
.confidence__val{font-size:12px;font-weight:700;color:var(--navy-800);font-family:var(--font-mono)}

/* ---------- Student answer panel (紧凑答案卡 · 禁止巨大绿色填充) ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare-cell{
  border-radius:8px;padding:9px 12px;border:1px solid var(--line);
  background:var(--card);min-height:64px;display:flex;flex-direction:column;justify-content:center;
}
.compare-cell--correct{border-left:3px solid var(--ok);background:var(--card)}
.compare-cell--student{border-left:3px solid var(--err);background:var(--card)}
.compare-cell__label{font-size:11px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:5px;color:var(--ink-500)}
.compare-cell__label svg{width:13px;height:13px}
.compare-cell--correct .compare-cell__label{color:var(--ok)}
.compare-cell--student .compare-cell__label{color:var(--err)}
.compare-cell__value{font-family:var(--font-serif);font-size:15px;font-weight:700;margin-top:3px;color:var(--ink-900)}
.quote{
  border-left:3px solid var(--blue-400);background:var(--blue-050);
  padding:10px 14px;border-radius:0 8px 8px 0;font-size:13px;color:var(--ink-700);line-height:1.6;
}
.quote__src{display:block;font-size:11px;color:var(--ink-400);margin-top:6px;font-weight:600}

/* ---------- Recommendation card ---------- */
.rec-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow .15s,border-color .15s;
}
.rec-card:hover{box-shadow:var(--shadow-2);border-color:var(--blue-400)}
.rec-card__head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.rec-card__order{
  width:30px;height:30px;border-radius:8px;background:var(--navy-800);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:700;flex:none;
}
.rec-card__body{padding:16px 18px}
.rec-card__reason{background:var(--blue-050);border:1px solid var(--blue-100);border-radius:8px;padding:11px 13px;font-size:12.5px;color:var(--ink-700);line-height:1.55}
.rec-card__reason b{color:var(--navy-800)}
.rec-card__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--ink-500);margin-top:12px}
.rec-card__meta b{color:var(--ink-700);font-weight:600}
.rec-card__actions{display:flex;gap:6px;padding:12px 18px;border-top:1px solid var(--line);background:var(--paper)}

/* ---------- States: loading / empty / error ---------- */
.state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 24px;text-align:center;
}
.state__icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.state--empty .state__icon{background:var(--neutral-bg);color:var(--ink-400)}
.state--error .state__icon{background:var(--err-bg);color:var(--err)}
.state__icon svg{width:22px;height:22px}
.state__title{font-size:15px;font-weight:600;color:var(--ink-700);margin-bottom:5px}
.state__desc{font-size:12.5px;color:var(--ink-500);max-width:340px;line-height:1.55}
.state__actions{margin-top:14px;display:flex;gap:8px}

.skeleton{background:linear-gradient(90deg,var(--paper-2) 25%,var(--card) 50%,var(--paper-2) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:6px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-line{height:12px;margin-bottom:8px}
.sk-line.short{width:40%}
.sk-line.med{width:65%}
.sk-card{height:88px;border-radius:10px}

/* ---------- Service status ---------- */
.svc{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:none}
.svc__dot{width:8px;height:8px;border-radius:50%;flex:none}
.svc__dot--ok{background:var(--ok);box-shadow:0 0 0 3px rgba(46,125,68,.2)}
.svc__dot--err{background:var(--err);box-shadow:0 0 0 3px rgba(184,58,46,.2)}
.svc__name{font-size:13px;color:var(--ink-700);font-weight:500}
.svc__state{margin-left:auto;font-size:11.5px;color:var(--ink-400)}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:18px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--blue-500)}
.tl-item--done::before{background:var(--ok);border-color:var(--ok)}
.tl-item__time{font-size:11px;color:var(--ink-400);font-family:var(--font-mono)}
.tl-item__title{font-size:13px;font-weight:600;color:var(--ink-900);margin:2px 0}
.tl-item__desc{font-size:12px;color:var(--ink-500);line-height:1.5}

/* ---------- Drawer ---------- */
.drawer-mask{position:fixed;inset:0;background:rgba(16,34,54,.45);z-index:80;display:none}
.drawer-mask.is-open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:var(--card);z-index:90;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:var(--shadow-3)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer__body{flex:1;overflow-y:auto;padding:20px}

/* ---------- Modal (image lightbox) ---------- */
.lightbox{position:fixed;inset:0;background:rgba(16,34,54,.82);z-index:100;display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px;box-shadow:var(--shadow-3);object-fit:contain;cursor:zoom-out}
.lightbox.is-gallery img{cursor:default}
/* Multi-image gallery navigation */
.lightbox__nav{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:rgba(0,0,0,.4);padding:6px 14px;border-radius:20px}
.lightbox__btn{color:#fff;font-size:22px;background:rgba(255,255,255,.15);border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox__btn:hover{background:rgba(255,255,255,.3)}
.lightbox__counter{color:#fff;font-size:13px;font-family:var(--font-mono)}

/* ---------- Question Image Gallery ---------- */
.question-image-gallery{
  display:grid;
  gap:12px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin-bottom:12px;
}
.question-image-gallery--single{
  grid-template-columns:1fr;
  justify-items:center;
}
.question-image-gallery--multi{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.question-image-item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.question-image-item img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:var(--gallery-max-h,260px);
  margin:0 auto;
  object-fit:contain;
  cursor:zoom-in;
  transition:transform .15s;
}
.question-image-item img:hover{transform:scale(1.02)}
@media (max-width:900px){
  .question-image-gallery--multi{grid-template-columns:1fr}
  .question-image-item img{max-height:240px}
}
.lightbox__close{position:absolute;top:20px;right:24px;color:#fff;font-size:28px;background:rgba(255,255,255,.12);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:18px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--navy-800);color:#fff;padding:11px 16px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-3);display:flex;align-items:center;gap:8px;animation:slideIn .25s}
.toast--ok{background:var(--ok)}
.toast--err{background:var(--err)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:16px}
.row{display:flex;gap:16px;align-items:flex-start}
.col-2{grid-template-columns:1fr 1fr}
.col-3{grid-template-columns:repeat(3,1fr)}
.col-4{grid-template-columns:repeat(4,1fr)}
.split-4-6{grid-template-columns:4fr 6fr}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-20{gap:20px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.wrap{flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--ink-500)}
.mono{font-family:var(--font-mono)}
.nowrap{white-space:nowrap}
.hide{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1500px){
  .split-4-6,.dashboard-bottom{grid-template-columns:1fr}
  .content{padding:24px 24px 56px}
}
@media (max-width:1280px){
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:980px){
  .app{flex-direction:column}
  .sidebar{position:fixed;left:-260px;transition:left .25s;z-index:60;width:240px;height:100vh}
  .sidebar.is-open{left:0}
  .split-4-6,.dashboard-bottom,.col-2,.col-3,.col-4{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:8px}
  .flow__step:not(:last-child)::after{display:none}
  .diag-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .content{padding:18px}
  .tbl{font-size:12px}
}