/* 三端共用的基础组件：顶栏、按钮、卡片、标签、输入框 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}

/* 应用主题：比图示更暖一档，字号大一档。
   只在 app/ 三页生效，不影响 diagrams 与 design。 */
body.app{
  --paper:#f7f8fb;
  --node-fill:#ffffff;
  --ink:#161a21;
  --muted:#5c6373;
  --soft:#949aa8;
  --rule:rgba(22,26,33,0.07);
  --rule-strong:rgba(22,26,33,0.16);
  --store-fill:#f2f4f9;
  --ext-fill:#f6f8fc;
  --input-fill:#f3f4f8;
  --accent:#2f5bff;
  --accent-tint:#eef2ff;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 2px 6px rgba(16,24,40,.05), 0 12px 32px rgba(16,24,40,.06);
  --radius:16px;
  --radius-sm:12px;
}
html[data-theme="dark"] body.app{
  --paper:#0f1218;
  --node-fill:#171b23;
  --ink:#eef1f6;
  --muted:#a7aebd;
  --soft:#767e8e;
  --rule:rgba(238,241,246,0.09);
  --rule-strong:rgba(238,241,246,0.18);
  --store-fill:#1c212b;
  --ext-fill:#1a1f28;
  --input-fill:#1b2029;
  --accent:#5b82ff;
  --accent-tint:rgba(91,130,255,0.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.3);
}

body{
  font-family:var(--font-sans);background:var(--paper);color:var(--ink);
  font-size:15px;line-height:1.7;min-height:100dvh;-webkit-font-smoothing:antialiased;
}

/* 应用页：顶栏 + 内容纵向 flex，内容高度自动吃掉剩余空间，不再写死 calc */
body.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
body.app > *{min-width:0}
body.app p,body.app h1,body.app h2{overflow-wrap:anywhere}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 32px;border-bottom:1px solid var(--rule);background:var(--node-fill);
  flex-wrap:wrap;row-gap:10px;flex:0 0 auto;
}
.brand{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.01em;display:flex;align-items:center;gap:10px;
  min-width:0;white-space:nowrap}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.brand small{font-family:var(--font-mono);font-size:10px;font-weight:400;color:var(--soft);letter-spacing:.14em;text-transform:uppercase}
.topbar .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}

/* ---------- 按钮 ---------- */
.btn{
  font-family:var(--font-sans);font-size:13px;letter-spacing:.01em;
  color:var(--muted);background:transparent;border:1px solid var(--rule-strong);
  border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;white-space:nowrap;
  background:var(--node-fill);
  transition:border-color .12s,color .12s,box-shadow .12s;
}
.btn:hover{color:var(--ink);border-color:var(--rule-strong);box-shadow:var(--shadow-sm)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 6px 16px rgba(47,91,255,.22)}
html[data-theme="dark"] .btn.primary{color:#1a1e26}
.btn.primary:hover{opacity:.94;box-shadow:0 8px 20px rgba(47,91,255,.28)}
.btn.lg{padding:11px 22px;font-size:14px}
.btn.sm{padding:5px 10px;font-size:12px}

/* ---------- 卡片 / 标签 ---------- */
.card{border:1px solid var(--rule);border-radius:var(--radius);background:var(--node-fill);box-shadow:var(--shadow-sm)}
.k{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

select.badge,.badge{
  font-family:var(--font-sans);font-size:12.5px;color:var(--muted);
  border:1px solid var(--rule);border-radius:var(--radius-sm);padding:7px 10px;background:var(--node-fill);
}
select.badge{cursor:pointer}

input.field,textarea.field{
  width:100%;min-width:0;font-family:var(--font-sans);font-size:15px;color:var(--ink);
  background:var(--node-fill);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:12px 14px;outline:none;resize:vertical;line-height:1.6;
}
input.field:focus,textarea.field:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
input.field::placeholder,textarea.field::placeholder{color:var(--soft)}

.chip{
  font-family:var(--font-sans);font-size:12.5px;color:var(--muted);background:var(--paper);
  border:1px solid var(--rule);border-radius:999px;padding:7px 14px;cursor:pointer;
  background:var(--node-fill);
  transition:border-color .12s,color .12s,background .12s;
}
.chip:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}

.empty{font-size:13px;color:var(--soft);padding:8px 0}
.mono{font-family:var(--font-mono)}
a.plain{color:var(--muted);text-decoration:none}
a.plain:hover{color:var(--ink)}
/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .brand small { display: none; }
  .brand { font-size: 13.5px; }
  .btn { padding: 7px 10px; font-size: 12.5px; }
  .badge, select.badge { font-size: 11.5px; padding: 5px 8px; }
}
/* ---------- 主界面导航按钮：要显眼 ---------- */
.btn.nav{
  font-size:14px;font-weight:600;padding:9px 18px;border-radius:12px;
  border-color:var(--rule-strong);color:var(--ink);background:var(--node-fill);
}
.btn.nav:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-md)}
.btn.nav.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(47,91,255,.28);
}
.btn.nav.primary:hover{color:#fff;opacity:.94;filter:brightness(1.05)}

@media (max-width: 640px) {
  .btn.nav{padding:8px 14px;font-size:13.5px}
}