/* theme.css — THINKLAB 之物建築．模型分享站
   規格來源：DPM 的 tokens.css（gallery-white、方正硬邊、髮絲線、印章 hover）。
   同一份檔案同時給發佈站與 NAS 內部管理介面用，兩邊看起來才是同一套系統。 */

:root {
  /* 中性 */
  --paper:#FFFFFF; --bone:#F6F5F1; --mist:#ECEAE3;
  --line:#D8D5CC; --line-2:#C9C5BA;
  --stone:#8A8579; --graphite:#3A3A38; --ink:#111110; --charcoal:#1B1B1A; --black:#0C0C0B;

  /* 強調（節制使用） */
  --ochre:#C8861E; --ochre-d:#A96F17; --ochre-l:#E0B461; --ochre-bg:#FBF4E6; --ochre-bg2:#F5E6C6;
  --moss:#4F5B3A; --moss-l:#869469;
  --indigo:#1E3A5C; --indigo-l:#5680A6;
  --rust:#A04923; --rust-l:#B35528;

  /* 語意 */
  --bg:var(--bone); --surface:var(--paper); --text:var(--graphite); --title:var(--ink);
  --muted:var(--stone); --border:var(--line); --border-strong:var(--line-2); --hover:var(--mist);

  --sans:"Inter",system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Noto Serif TC",Georgia,serif;

  --r:3px; --r-sm:2px;
  --shadow:0 1px 2px rgba(20,18,12,.04), 0 8px 24px rgba(20,18,12,.06);
  --shadow-lift:0 2px 4px rgba(20,18,12,.06), 0 14px 36px rgba(20,18,12,.10);
  --sp:4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--charcoal); --surface:#141413; --text:#CFCABF; --title:var(--bone);
    --muted:#8A8579; --border:#33322F; --border-strong:#454340; --hover:#22211F;
    --moss:var(--moss-l); --indigo:var(--indigo-l); --rust:var(--rust-l);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg:var(--charcoal); --surface:#141413; --text:#CFCABF; --title:var(--bone);
  --muted:#8A8579; --border:#33322F; --border-strong:#454340; --hover:#22211F;
  --moss:var(--moss-l); --indigo:var(--indigo-l); --rust:var(--rust-l);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { color: var(--title); font-weight: 600; letter-spacing: .01em; margin: 0; }
a { color: var(--ochre-d); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 雙語 eyebrow —— mono 大寫英文 ＋ CJK */
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.wordmark { font-weight: 700; letter-spacing: .18em; color: var(--title); }
.rule { height: 2px; width: 44px; background: var(--ochre); }

/* ── 外框 ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  padding-top: max(12px, env(safe-area-inset-top));
}
.topbar .brand { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.topbar .brand .wordmark { font-size: 15px; }
.topbar .spacer { flex: 1 1 auto; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow);
}

/* 印章 hover —— 招牌手勢 */
.stamp { transition: transform .12s ease, box-shadow .12s ease; }
.stamp:hover { transform: translate(-3px,-3px); box-shadow: 4px 4px 0 0 var(--ochre); }

/* ── 按鈕 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; min-height: 38px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--title);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 3px 3px 0 0 var(--ochre); }
.btn:active:not(:disabled) { transform: none; box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn.danger { color: var(--rust); border-color: var(--rust); }
.btn.danger:hover:not(:disabled) { box-shadow: 3px 3px 0 0 var(--rust); }
.btn.sm { padding: 6px 10px; min-height: 30px; font-size: 11px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--hover); transform: none; box-shadow: none; }

/* ── 表單 ─────────────────────────────────────────────────────────────── */
label.field { display: block; margin-bottom: 12px; }
label.field > span {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=url], textarea, select {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--title);
  font-family: var(--sans); font-size: 16px;   /* 16px：iOS 才不會自動放大 */
  outline: none; resize: vertical;
}
input:focus, textarea:focus, select:focus { border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(200,134,30,.15); }

/* ── 標籤 / 狀態 ──────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg); color: var(--muted);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; white-space: nowrap;
}
.tag.ochre { color: var(--ochre-d); border-color: var(--ochre); background: var(--ochre-bg); }
.tag.moss  { color: var(--moss);   border-color: var(--moss); }
.tag.indigo{ color: var(--indigo); border-color: var(--indigo); }
.tag.rust  { color: var(--rust);   border-color: var(--rust); }

.note {
  padding: 10px 12px; border: 1px solid var(--border); border-left: 2px solid var(--ochre);
  border-radius: var(--r-sm); background: var(--surface); font-size: 13px;
}
.note.err { border-left-color: var(--rust); color: var(--rust); }
.note.ok  { border-left-color: var(--moss); }

/* ── 資料表 ───────────────────────────────────────────────────────────── */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: 8px 10px; border-bottom: 1px solid var(--border-strong);
}
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── 進度條（唯一允許的漸層）──────────────────────────────────────────── */
.bar { height: 3px; background: var(--mist); border-radius: 0; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ink), var(--ochre)); transition: width .2s ease; }

.spin {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-top-color: var(--ochre); border-radius: 50%; animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.foot {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--muted); text-align: center;
}

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.hide { display: none !important; }