/* ======================================================================
   浏览器存储查看器 · 独立设计（档案柜 / 牛皮纸文件夹主题）
   浅色 = 暖米纸 + 琥珀档案夹；深色 = 深夜档案室 + 黄铜标签
   ====================================================================== */
.stx{
  --ink:#2b2116; --sub:#6f6050; --faint:#a89a88;
  --bg:#f7f3ea; --card:#fffdf7; --card2:#f3ecdd; --line:#e2d7c2; --line2:#ece3d2;
  --pri:#b45309; --pri-2:#d97706; --pri-soft:#fbead4; --pri-ink:#8a4208;
  --ok:#3f6d3a; --ok-soft:#e7f1e3;
  --bad:#a33131; --bad-soft:#f9e6e4;
  --tab:#5b4a38;
  --r:12px;
  --shadow:0 1px 2px rgba(43,33,22,.06),0 10px 26px rgba(43,33,22,.08);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(180,83,9,.035) 34px 35px),
    radial-gradient(760px 360px at 90% -120px, rgba(217,119,6,.10), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .stx{
  --ink:#efe6d8; --sub:#b3a48f; --faint:#7d7160;
  --bg:#171310; --card:#211b15; --card2:#28211a; --line:#3b3227; --line2:#312a21;
  --pri:#f59e0b; --pri-2:#fbbf24; --pri-soft:rgba(245,158,11,.13); --pri-ink:#fcd34d;
  --ok:#84cc16; --ok-soft:rgba(132,204,22,.12);
  --bad:#f87171; --bad-soft:rgba(248,113,113,.12);
  --tab:#c8b293;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.4);
}
.stx *{box-sizing:border-box;}
.stx b{font-weight:700;}
.stx-wrap{max-width:1120px;margin:0 auto;}
.stx code,.stx pre,.stx input,.stx textarea,.stx-mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;}

/* ---------- Hero：档案柜顶板 ---------- */
.stx-hero{margin-top:22px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:linear-gradient(160deg,var(--pri),var(--pri-2));padding:26px 28px;}
.stx-hero h1{margin:0 0 8px;font-size:clamp(24px,3.6vw,31px);font-weight:900;color:#fff;line-height:1.3;}
.stx-hero p{margin:0;color:#ffedd5;font-size:15px;max-width:780px;}
.stx-hero p b{color:#fff;}
.stx-hero .stx-note{display:inline-block;margin-top:12px;font-size:12.5px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:4px 14px;font-weight:700;}

/* ---------- 抽屉页签 ---------- */
.stx-tabs{display:flex;gap:6px;margin-top:20px;flex-wrap:wrap;}
.stx-tab{border:1px solid var(--line);border-bottom:none;background:var(--card2);color:var(--tab);border-radius:12px 12px 0 0;padding:9px 20px 8px;font-size:14px;font-weight:800;cursor:pointer;position:relative;top:1px;transition:all .15s;}
.stx-tab:hover{background:var(--card);}
.stx-tab.on{background:var(--card);border-color:var(--pri);color:var(--pri-ink);box-shadow:0 -3px 0 var(--pri) inset;}
.stx-tab i{font-style:normal;font-size:11px;color:var(--faint);margin-left:6px;font-weight:600;}

/* ---------- 柜体 ---------- */
.stx-body{background:var(--card);border:1px solid var(--pri);border-radius:0 var(--r) var(--r) var(--r);box-shadow:var(--shadow);padding:18px 18px 16px;}
.stx-cap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px;}
.stx-capbar{flex:1;min-width:220px;height:12px;border-radius:999px;background:var(--card2);border:1px solid var(--line);overflow:hidden;}
.stx-capfill{height:100%;background:linear-gradient(90deg,var(--ok),var(--pri-2));border-radius:999px;transition:width .3s;}
.stx-capfill.hot{background:linear-gradient(90deg,var(--pri-2),var(--bad));}
.stx-capstat{font-size:12.5px;color:var(--sub);white-space:nowrap;}
.stx-capstat b{color:var(--pri-ink);}

/* ---------- 键值表格 ---------- */
.stx-tablewrap{overflow:auto;border:1px solid var(--line);border-radius:10px;}
.stx-table{width:100%;border-collapse:collapse;font-size:13px;}
.stx-table th,.stx-table td{border-bottom:1px solid var(--line2);padding:8px 10px;text-align:left;vertical-align:top;}
.stx-table th{background:var(--card2);font-weight:750;white-space:nowrap;position:sticky;top:0;}
.stx-table tr:last-child td{border-bottom:none;}
.stx-table td.stx-k{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-weight:700;color:var(--pri-ink);max-width:220px;word-break:break-all;}
.stx-table td.stx-v{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:12px;color:var(--sub);}
.stx-empty{padding:26px;text-align:center;color:var(--faint);font-size:13.5px;}
.stx-mini{border:1px solid var(--line);background:var(--card2);color:var(--pri-ink);border-radius:7px;padding:3px 10px;font-size:12px;font-weight:700;cursor:pointer;}
.stx-mini:hover{border-color:var(--pri-2);}
.stx-mini.del{color:var(--bad);}
.stx-mini.del:hover{border-color:var(--bad);}

/* ---------- 写入表单 ---------- */
.stx-form{display:grid;grid-template-columns:1fr 2fr auto;gap:10px;margin-top:14px;align-items:stretch;}
@media (max-width:820px){.stx-form{grid-template-columns:1fr;}}
.stx-in{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:9px;padding:9px 12px;font-size:13px;outline:none;min-width:0;}
.stx-in:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}
.stx-in.bad{border-color:var(--bad);}
.stx-exp{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);}
.stx-exp input{width:70px;}

/* ---------- 详情面板 ---------- */
.stx-detail{margin-top:14px;border:1px dashed var(--pri);border-radius:10px;background:var(--pri-soft);padding:14px 16px;}
.stx-detail h3{margin:0 0 6px;font-size:14px;font-weight:850;color:var(--pri-ink);word-break:break-all;}
.stx-detail pre{margin:0;font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-all;max-height:220px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--ink);}
.stx-hint{margin-top:8px;font-size:12.5px;color:var(--pri-ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 11px;}
.stx-hint b{color:var(--bad);}

/* ---------- 工具条与消息 ---------- */
.stx-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.stx-btn{border:none;border-radius:10px;padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .15s;}
.stx-btn-go{background:var(--pri);color:#fff;}
.stx-btn-go:hover{background:var(--pri-2);}
.stx-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.stx-btn-ghost:hover{border-color:var(--pri-2);}
.stx-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.stx-msg.err{color:var(--bad);}
.stx-msg.ok{color:var(--ok);}

/* ---------- FAQ ---------- */
.stx-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.stx-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.stx-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.stx-faq p{margin:0;color:var(--sub);font-size:14px;}
.stx-faq p b{color:var(--ink);}