/* =====================================================================
 * 智能解题智能体 · 样式表
 * ===================================================================== */
:root{
  --blue:#2563eb; --blue-d:#1d4ed8; --cyan:#06b6d4;
  --grad:linear-gradient(120deg,#2563eb 0%,#06b6d4 100%);
  --red:#e3342f;                 /* 已知条件标红（强制格式） */
  --ink:#1f2937; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e5e9f0; --bg:#f1f5fb; --card:#ffffff;
  --ok:#16a34a; --warn:#f59e0b;
  --shadow:0 10px 30px rgba(30,58,138,.08);
  --shadow-sm:0 2px 8px rgba(30,58,138,.06);
  --radius:16px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}   /* 保证 hidden 属性优先于 class 的 display */
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Segoe UI,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;}
button{font-family:inherit;cursor:pointer;}

/* ----------------------------- Header ----------------------------- */
.app-header{ background:var(--grad); color:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:50;}
.header-inner{ max-width:1280px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:14px;}
.brand-logo{ background:rgba(255,255,255,.16); border-radius:13px; padding:4px; display:flex;}
.brand-text h1{ font-size:22px; letter-spacing:.5px;}
.brand-text p{ margin:2px 0 0; font-size:12.5px; opacity:.9;}
.flow-steps{ display:flex; align-items:center; gap:8px; font-size:13px;}
.flow-chip{ background:rgba(255,255,255,.18); padding:6px 12px; border-radius:999px; white-space:nowrap;}
.flow-arrow{ opacity:.7;}

/* ----------------------------- Layout ----------------------------- */
.layout{ max-width:1280px; margin:24px auto; padding:0 24px; display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start;}
.main-col{ display:flex; flex-direction:column; gap:22px; min-width:0;}
.side-col{ display:flex; flex-direction:column; gap:22px; position:sticky; top:90px;}

/* ----------------------------- Card ------------------------------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px;}
.card-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.card-head h2{ font-size:17px;}
.card-sub{ color:var(--ink-3); font-size:12.5px;}

/* ----------------------------- Upload ----------------------------- */
.dropzone{ position:relative; border:2px dashed #c5d6f2; border-radius:14px; background:linear-gradient(180deg,#f8fbff,#f2f7ff); transition:.2s;}
.dropzone.drag{ border-color:var(--blue); background:#eef4ff;}
.dz-inner{ padding:30px 20px; text-align:center;}
.dz-icon{ font-size:40px;}
.dz-title{ margin:8px 0 14px; font-weight:600; color:var(--ink-2);}
.dz-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.dz-hint{ margin:12px 0 0; font-size:12px; color:var(--ink-3);}

.btn{ border:none; border-radius:10px; padding:10px 18px; font-size:14px; font-weight:600; transition:.15s; display:inline-flex; align-items:center; gap:6px;}
.btn:active{ transform:translateY(1px);}
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.28);}
.btn-primary:hover{ filter:brightness(1.05);}
.btn-ghost{ background:#fff; color:var(--blue); border:1.5px solid #c5d6f2;}
.btn-ghost:hover{ background:#f0f6ff;}
.btn-mini{ padding:5px 11px; font-size:12px; background:#eef2f9; color:var(--ink-2);}
.btn-mini:hover{ background:#e3e9f3;}
.btn-danger{ background:#fdecec; color:var(--red);}
.btn-danger:hover{ background:#fbdcdc;}

.dz-preview{ padding:18px; display:flex; gap:16px; align-items:center;}
.dz-preview img{ max-width:180px; max-height:140px; border-radius:10px; border:1px solid var(--line); object-fit:contain; background:#fff;}
.dz-preview-meta{ display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--ink-2);}

/* Samples */
.samples{ margin-top:18px;}
.samples-head{ font-size:12.5px; color:var(--ink-3); margin-bottom:10px;}
.samples-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.sample{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; transition:.15s; text-align:left; padding:0;}
.sample:hover{ border-color:var(--blue); box-shadow:0 8px 18px rgba(37,99,235,.12); transform:translateY(-2px);}
.sample-thumb{ height:84px; background:#f3f7ff; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line);}
.sample-thumb img{ width:100%; height:100%; object-fit:cover;}
.sample-thumb .ph{ font-size:13px; color:var(--blue); font-weight:600; padding:8px; text-align:center; line-height:1.4;}
.sample-cap{ padding:8px 10px;}
.sample-cap .s-title{ font-size:12.5px; font-weight:600; color:var(--ink);}
.sample-cap .s-src{ font-size:11px; color:var(--ink-3); margin-top:2px;}

/* ----------------------------- Pipeline --------------------------- */
.pipeline{ list-style:none; display:flex; justify-content:space-between; padding:6px 0 0; margin:0; gap:6px;}
.pipeline li{ flex:1; text-align:center; position:relative; color:var(--ink-3); font-size:12.5px;}
.pipeline li:not(:last-child)::after{ content:""; position:absolute; top:9px; left:60%; width:80%; height:2px; background:var(--line);}
.pipeline li.active:not(:last-child)::after,.pipeline li.done:not(:last-child)::after{ background:var(--cyan);}
.p-dot{ display:block; width:18px; height:18px; border-radius:50%; background:#dbe4f0; margin:0 auto 8px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); position:relative; z-index:2; transition:.2s;}
.pipeline li.active .p-dot{ background:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.18); animation:pulse 1s infinite;}
.pipeline li.done .p-dot{ background:var(--ok); box-shadow:0 0 0 1px var(--ok);}
.pipeline li.active .p-label,.pipeline li.done .p-label{ color:var(--ink); font-weight:600;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.pipeline-bar{ height:6px; background:#eef2f9; border-radius:999px; margin-top:16px; overflow:hidden;}
.pipeline-bar i{ display:block; height:100%; width:0; background:var(--grad); border-radius:999px; transition:width .4s ease;}

/* ----------------------------- Empty ------------------------------ */
.empty-state{ text-align:center; padding:54px 20px; color:var(--ink-3);}
.empty-emoji{ font-size:48px;}
.empty-state h3{ color:var(--ink-2); margin:10px 0 6px;}
.empty-state p{ font-size:13.5px; margin:0;}

/* ----------------------------- Result ----------------------------- */
.result{ display:flex; flex-direction:column; gap:18px;}
.result-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.meta-tags{ display:flex; gap:8px; flex-wrap:wrap;}
.tag{ font-size:12px; padding:4px 11px; border-radius:999px; background:#eef4ff; color:var(--blue); font-weight:600;}
.tag.src{ background:#f1f5f9; color:var(--ink-2);}
.tag.diff{ background:#fff4e5; color:#b45309;}
.saved-flag{ font-size:12.5px; color:var(--ok); font-weight:600;}

.module-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.module-head h3{ font-size:16px;}
.m-no{ background:var(--grad); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:8px;}
.fmt-legend{ margin-left:auto; font-size:11.5px; color:var(--ink-3); display:flex; align-items:center; gap:4px;}
#btnCopy{ margin-left:10px;}
.confidence{ margin-left:auto; font-size:12px; font-weight:600; color:var(--ok); background:#eafaf0; border:1px solid #b7ebc9; padding:3px 11px; border-radius:999px; white-space:nowrap;}
.confidence::before{ content:"✓ 识别置信度 ";}
.fmt-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 2px 0 8px;}
.dot-red{ background:var(--red);} .dot-plain{ background:var(--ink-3);}

/* C1 原题 */
.stem-body{ font-size:15.5px; background:#f8fafd; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:10px; padding:14px 16px; color:var(--ink);}
.recog{ margin-top:12px; font-size:13px;}
.recog summary{ cursor:pointer; color:var(--blue); font-weight:600; user-select:none;}
.recog-raw{ white-space:pre-wrap; word-break:break-word; background:#0f172a; color:#cbd5e1; font-size:12px; line-height:1.7; padding:14px; border-radius:10px; margin:10px 0 0; font-family:"SFMono-Regular",Consolas,Menlo,monospace; max-height:240px; overflow:auto;}
.optimize-note{ margin:10px 0 0; font-size:12.5px; color:var(--ink-2); background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px;}
.optimize-note::before{ content:"⚙ 智能优化说明："; color:#b45309; font-weight:700;}

/* C2 解答 */
.sol-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.sol-tab{ border:1.5px solid var(--line); background:#fff; color:var(--ink-2); padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; transition:.15s;}
.sol-tab.active{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(37,99,235,.22);}
.sol-panel{ display:none;}
.sol-panel.active{ display:block;}

/* 解题步骤 —— 行间分句，每行独立 */
.steps{ display:flex; flex-direction:column; gap:9px; counter-reset:none;}
.step{ display:flex; gap:8px; align-items:flex-start; font-size:15px; line-height:1.85; padding:2px 0;}
.step .lead{ flex:none; min-width:30px; font-weight:700; color:var(--blue); text-align:right;}
.step.given .lead{ color:var(--red);}
.step .stext{ flex:1; min-width:0;}
.step.given .stext{ color:var(--red); font-weight:500;}      /* 已知条件整行标红 */
.step.indent{ padding-left:38px;}
.step.indent .lead{ display:none;}
.step.lead-solve{ font-weight:700; font-size:16px; color:var(--ink); margin-bottom:2px;}
.step.lead-solve .lead{ color:var(--ink);}
.step.lead-conclude .stext{ font-weight:600;}
.step .katex{ font-size:1.02em;}

/* C3 知识点 */
.kp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.kp{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:linear-gradient(180deg,#fbfdff,#f6f9ff);}
.kp .kp-name{ font-weight:700; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:6px;}
.kp .kp-name::before{ content:"📌"; font-size:13px;}
.kp .kp-detail{ font-size:13px; color:var(--ink-2); margin-top:6px;}

/* C4 公式 */
.fm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;}
.fm{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff;}
.fm .fm-name{ font-size:12.5px; color:var(--blue); font-weight:700; margin-bottom:8px;}
.fm .fm-tex{ font-size:15px; overflow-x:auto; padding:4px 0;}

/* ----------------------------- Side ------------------------------- */
.side-sub{ font-size:12px; color:var(--ink-3); margin:-6px 0 12px;}
.sticky-head{ margin-bottom:6px; justify-content:space-between;}
.history-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-height:50vh; overflow:auto;}
.hi{ border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; gap:10px; cursor:pointer; transition:.15s; position:relative; background:#fff;}
.hi:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm);}
.hi.active{ border-color:var(--blue); background:#f5f9ff;}
.hi-thumb{ width:46px; height:46px; border-radius:9px; object-fit:cover; background:#eef2f9; flex:none; border:1px solid var(--line);}
.hi-body{ min-width:0; flex:1;}
.hi-title{ font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hi-meta{ font-size:11px; color:var(--ink-3); margin-top:3px;}
.hi-del{ position:absolute; top:6px; right:6px; border:none; background:transparent; color:var(--ink-3); font-size:14px; opacity:0; transition:.15s; padding:2px 6px; border-radius:6px;}
.hi:hover .hi-del{ opacity:1;}
.hi-del:hover{ background:#fdecec; color:var(--red);}
.history-empty{ font-size:12.5px; color:var(--ink-3); text-align:center; padding:14px 0;}

.storage-card details summary{ cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-2);}
.storage-tip{ font-size:12px; color:var(--ink-3); margin:8px 0;}
.storage-json{ white-space:pre-wrap; word-break:break-word; font-size:11px; line-height:1.6; background:#0f172a; color:#9fb3c8; border-radius:10px; padding:12px; max-height:300px; overflow:auto; font-family:"SFMono-Regular",Consolas,Menlo,monospace;}

/* ----------------------------- Footer ----------------------------- */
.app-footer{ text-align:center; color:var(--ink-3); font-size:12px; padding:22px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.app-footer .dot{ opacity:.5;}

/* ----------------------------- Toast ------------------------------ */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); background:#1f2937; color:#fff; padding:11px 20px; border-radius:10px; font-size:13.5px; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.25s; z-index:200;}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0);}

/* ----------------------------- Responsive ------------------------- */
@media (max-width:980px){
  .layout{ grid-template-columns:1fr;}
  .side-col{ position:static;}
  .flow-steps{ display:none;}
}
@media (max-width:560px){
  .header-inner{ padding:12px 16px;}
  .layout{ padding:0 14px; margin:16px auto;}
  .card{ padding:16px;}
  .dz-actions{ flex-direction:column;}
  .step{ font-size:14px;}
}

/* 骨架占位（解析中） */
.skeleton{ background:linear-gradient(90deg,#eef2f9 25%,#f6f9ff 37%,#eef2f9 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
@keyframes sk{0%{background-position:100% 0;}100%{background-position:0 0;}}