/* 本地 AI 工作台 · 统一设计系统(壳样式)
 * 所有功能页共用。新功能页只要引入这个 + shell.js,就自动套上统一外壳。 */
:root{
  --ink:#1a2332; --ink-soft:#46546b; --ink-faint:#8b97a8;
  --bg:#f6f4ee; --card:#fffdf8; --line:#e6e0d4;
  --teal:#0f9b8e; --teal-soft:#e3f3f0; --teal-deep:#0a6e64;
  --amber:#d9883a; --amber-soft:#f8ecdb;
  --coral:#d6543f; --coral-soft:#f8e2dc;
  --indigo:#4c5bd4; --indigo-soft:#e7e9fb;
  --green:#2e7d32;
  --shadow:0 1px 3px rgba(26,35,50,.06),0 8px 24px rgba(26,35,50,.06);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased; padding-bottom:60px;
}
a{color:var(--teal-deep); text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1000px; margin:0 auto; padding:0 20px}

/* ---- 顶部栏(shell.js 注入)---- */
.pf-top{
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  box-shadow:0 1px 0 rgba(26,35,50,.03);
}
.pf-top .bar{max-width:1000px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px}
.pf-brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15.5px; color:var(--ink); white-space:nowrap}
.pf-brand .logo{width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--teal),#127d73); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px}
.pf-nav{display:flex; gap:4px; margin-left:6px; flex-wrap:wrap}
.pf-nav a{font-size:13.5px; color:var(--ink-soft); padding:6px 11px; border-radius:8px; font-weight:600}
.pf-nav a:hover{background:var(--bg); text-decoration:none}
.pf-nav a.active{background:var(--teal-soft); color:var(--teal-deep)}
.pf-top .spacer{flex:1}
.pf-gear{font-size:13px; font-weight:700; color:#fff; background:var(--ink); border:none; border-radius:8px; padding:7px 13px; cursor:pointer; white-space:nowrap}
.pf-gear:hover{background:#0f1722}
.pf-gear .mode-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#7cc6bd; margin-right:5px; vertical-align:middle}
.pf-gear.online .mode-dot{background:var(--amber)}

/* ---- 页面头 ---- */
.pf-head{padding:34px 20px 8px; max-width:1000px; margin:0 auto}
.pf-head .crumb{font-size:12.5px; color:var(--ink-faint); margin-bottom:8px}
.pf-head h1{font-size:25px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:11px}
.pf-head h1 .ic{font-size:26px}
.pf-head .sub{color:var(--ink-soft); font-size:14.5px; margin-top:7px; max-width:760px}
.pf-head .privacy{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--teal-deep); background:var(--teal-soft); border:1px solid #cfe9e3; border-radius:20px; padding:4px 12px}

/* ---- 卡片 ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-top:16px; box-shadow:var(--shadow)}
.card h2{font-size:15px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.card h2 .step{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; background:var(--teal); color:#fff; font-size:12.5px; font-weight:800}
.card .hint{font-size:12.5px; color:var(--ink-faint); font-weight:400}

/* ---- 功能墙 ---- */
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; margin-top:8px}
.tile{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:.15s; position:relative; overflow:hidden}
.tile:hover{transform:translateY(-2px); box-shadow:0 4px 10px rgba(26,35,50,.08),0 14px 32px rgba(26,35,50,.10); text-decoration:none}
.tile .ic{font-size:30px; display:block; margin-bottom:12px}
.tile h3{font-size:16px; font-weight:800; color:var(--ink); margin-bottom:5px}
.tile p{font-size:13px; color:var(--ink-soft)}
.tile .badge{position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px}
.tile .badge.ready{background:var(--teal-soft); color:var(--teal-deep)}
.tile .badge.soon{background:var(--amber-soft); color:#9a5e1e}
.tile .badge.tpl{background:var(--indigo-soft); color:var(--indigo)}
.tile.add{border-style:dashed; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ink-faint); min-height:150px}
.tile.add .ic{opacity:.6}
.tile.add h3{color:var(--ink-soft)}

/* ---- 拖拽区 ---- */
.drop{border:2px dashed #c2cad6; border-radius:12px; padding:28px 20px; text-align:center; color:var(--ink-soft); cursor:pointer; transition:.15s; background:#fcfbf6}
.drop.hot{border-color:var(--teal); background:var(--teal-soft); color:var(--teal-deep)}
.drop .big{font-size:15px; font-weight:700; color:var(--ink)}
.drop small{font-size:12.5px; color:var(--ink-faint)}
.pick-link{color:var(--teal-deep); text-decoration:underline; cursor:pointer; font-weight:600}

/* ---- 模式 / 控件 ---- */
.modes{margin-top:14px; display:flex; gap:18px; flex-wrap:wrap}
.modes label{font-size:13.5px; cursor:pointer; color:var(--ink-soft)}
.btn{font-size:13.5px; font-weight:700; border:none; border-radius:8px; padding:8px 16px; cursor:pointer}
.btn-primary{background:var(--teal); color:#fff} .btn-primary:hover{background:var(--teal-deep)}
.btn-ink{background:var(--ink); color:#fff} .btn-ink:hover{background:#0f1722}
.btn-demo{background:var(--teal); color:#fff; padding:16px 18px; font-size:15px; border-radius:10px; width:100%; text-align:left}
.btn-demo:hover{background:var(--teal-deep)}
.btn-demo small{display:block; font-size:12px; opacity:.85; margin-top:4px; font-weight:400}
input[type=password],input[type=text],select{padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; background:#fff; color:var(--ink)}
input[type=password]{width:340px; max-width:100%}
.tag{display:inline-block; background:var(--teal-soft); color:var(--teal-deep); border-radius:6px; padding:2px 9px; font-size:12px; font-weight:700}
.tag.amber{background:var(--amber-soft); color:#9a5e1e}
.tag.indigo{background:var(--indigo-soft); color:var(--indigo)}

/* ---- 进度 / 结果 ---- */
progress{width:100%; height:9px; margin-top:10px; border-radius:5px; overflow:hidden}
progress::-webkit-progress-bar{background:#ece7db; border-radius:5px}
progress::-webkit-progress-value{background:var(--teal); border-radius:5px}
#status,.status{font-size:13px; color:var(--ink-soft); min-height:20px; margin-top:8px}
#summary,.summary{font-size:15px; color:var(--teal-deep); font-weight:800; margin:10px 0}
.preview{overflow-x:auto; margin-top:6px}
.preview h3{font-size:13.5px; font-weight:800; margin:14px 0 6px; color:var(--ink)}
table.res{border-collapse:collapse; width:100%; font-size:12px}
table.res th,table.res td{border:1px solid var(--line); padding:6px 9px; text-align:left; white-space:nowrap}
table.res th{background:#f0ece2; color:var(--ink); position:sticky; top:0; font-weight:700}
table.res td{max-width:280px; overflow:hidden; text-overflow:ellipsis}

/* ---- 模型设置抽屉 ---- */
.pf-mask{position:fixed; inset:0; background:rgba(26,35,50,.35); z-index:40; display:none}
.pf-mask.show{display:block}
.pf-drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--card); z-index:50; box-shadow:-8px 0 30px rgba(26,35,50,.18); transform:translateX(100%); transition:transform .22s ease; overflow-y:auto}
.pf-drawer.show{transform:translateX(0)}
.pf-drawer .dh{padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.pf-drawer .dh h3{font-size:16px; font-weight:800}
.pf-drawer .dh .x{font-size:22px; cursor:pointer; color:var(--ink-faint); border:none; background:none; line-height:1}
.pf-drawer .db{padding:18px 22px}
.pf-drawer .row{margin:11px 0}
.pf-drawer label.lbl{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px}
.pf-drawer select,.pf-drawer input[type=password]{width:100%}
.pf-drawer .keyhint{font-size:12px; color:var(--teal-deep); margin-top:4px; min-height:16px}
.pf-drawer .seg{display:flex; gap:8px; margin-top:6px}
.pf-drawer .seg label{flex:1; border:1px solid var(--line); border-radius:9px; padding:10px; font-size:13px; cursor:pointer; text-align:center; background:#fff}
.pf-drawer .seg label.on{border-color:var(--teal); background:var(--teal-soft); color:var(--teal-deep); font-weight:700}
.pf-drawer .seg input{display:none}
.pf-drawer .tip{font-size:12px; color:var(--ink-faint); line-height:1.7; background:var(--bg); border-radius:10px; padding:12px 14px; margin-top:14px}

/* ---- 杂项 ---- */
.note{font-size:12px; color:var(--ink-faint); margin-top:18px; line-height:1.8}
.kbd{font-family:Consolas,monospace; background:#f0ece2; border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:12px}
.pf-foot{text-align:center; color:var(--ink-faint); font-size:12px; margin-top:46px; padding-top:22px; border-top:1px solid var(--line)}
.steps-doc{font-size:14px; color:var(--ink-soft)} .steps-doc li{margin:8px 0 8px 4px}
.steps-doc code,.code{font-family:Consolas,monospace; background:#f0ece2; border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:12.5px}
pre.code{display:block; padding:14px 16px; overflow-x:auto; line-height:1.6; white-space:pre}
@media(max-width:680px){
  .pf-nav{display:none}
  .pf-head h1{font-size:21px}
  input[type=password]{width:100%}
}