/* 太鼓的世界：介面是安靜的石墨灰，顏色留給譜面本身（紅咚、藍咔、各難度
   的色）。橘色是品牌唯一的主色，只用在主要按鈕、選取狀態與關鍵數字。
   --accent2 是「咔」的藍，只給譜面／波形這類內容用，不上介面外框。 */
:root{
  --bg:#141415; --bg2:#0f0f10;
  --panel:#19191b; --panel2:#232325; --panel-glass:rgba(20,20,21,.92);
  --line:#2c2c2f; --line-soft:rgba(237,237,237,.07);
  --fg:#ededed; --muted:#a1a1a6; --muted-soft:#85858b;
  --accent:#ff7a35; --accent-soft:#ff9a62; --accent-dim:#e0621f; --accent-ink:#ff9a62;
  --accent2:#4fb3d9; --accent2-soft:#86cbe6;
  --ok:#4cc38a; --warn:#d9a93a; --err:#e5484d;
  --radius:14px; --radius-sm:8px; --radius-lg:18px;
  --shadow:none;
  --glow-accent:0 0 0 1px var(--accent);
  --glow-accent2:0 0 0 1px var(--accent2);
  --ease:cubic-bezier(.22,1,.36,1);
  --font-body:"Inter","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:var(--font-body);
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --border:var(--line);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fafafa; --bg2:#f4f4f5; --panel:#fff; --panel2:#f4f4f5;
    --panel-glass:rgba(250,250,250,.92);
    --line:#e4e4e7; --line-soft:rgba(23,23,23,.07);
    --fg:#171717; --muted:#525252; --muted-soft:#737373;
    --accent-ink:#c2410c;
    --shadow:0 1px 2px rgba(0,0,0,.05);
  }
}
/* 手動切換（nav 裡的 .theme-toggle）：屬性選擇器比媒體查詢裡的 :root
   多一階特殊度，同一份規則會贏過 OS 偏好，讓使用者的選擇說了算。 */
:root[data-theme="light"]{
  --bg:#fafafa; --bg2:#f4f4f5; --panel:#fff; --panel2:#f4f4f5;
  --panel-glass:rgba(250,250,250,.92);
  --line:#e4e4e7; --line-soft:rgba(23,23,23,.07);
  --fg:#171717; --muted:#525252; --muted-soft:#737373;
  --accent-ink:#c2410c;
  --shadow:0 1px 2px rgba(0,0,0,.05);
}
:root[data-theme="dark"]{
  --bg:#141415; --bg2:#0f0f10; --panel:#19191b; --panel2:#232325;
  --panel-glass:rgba(20,20,21,.92);
  --line:#2c2c2f; --line-soft:rgba(237,237,237,.07);
  --fg:#ededed; --muted:#a1a1a6; --muted-soft:#85858b;
  --accent-ink:#ff9a62;
  --shadow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--fg);background:var(--bg);
  font-family:var(--font-body);font-size:15px;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{color:var(--accent-ink);text-decoration:none;transition:color .15s var(--ease)}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:rgba(255,122,53,.3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative}

header.nav{
  border-bottom:1px solid var(--line-soft);background:var(--panel-glass);
  position:sticky;top:0;z-index:30;
}
.nav .wrap{display:flex;align-items:center;gap:24px;height:60px}
/* 品牌標誌＝一顆「咚」：實心圓＋一圈鼓皮色的內框 */
.brand,.sidebar .sb-brand{
  font-weight:600;font-size:17px;line-height:1;color:var(--fg);
  display:inline-flex;align-items:center;
}
.brand::before,.sidebar .sb-brand::before{
  content:"";width:16px;height:16px;border-radius:50%;flex:none;margin-right:10px;
  background:var(--accent);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--accent);
}
.brand:hover,.sidebar .sb-brand:hover{text-decoration:none;color:var(--fg)}
.brand span,.sidebar .sb-brand span{color:var(--muted)}
.nav nav{margin-left:auto;display:flex;gap:4px;align-items:center;font-size:14px}
.nav nav > a{
  padding:8px 12px;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;
  transition:color .15s var(--ease),background-color .15s var(--ease);
}
.nav nav > a:hover{color:var(--fg);background:var(--line-soft);text-decoration:none}
.pill{
  display:inline-flex;align-items:center;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:4px 10px;font-size:12px;line-height:16px;color:var(--muted);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}

main{padding:48px 0 96px;position:relative}
h1{
  font-weight:600;font-size:32px;margin:0 0 12px;letter-spacing:-.01em;line-height:1.2;
  text-wrap:balance;
}
h2{font-weight:600;font-size:20px;margin:48px 0 12px;line-height:1.3}
h3{font-weight:600;font-size:16px;margin:24px 0 8px;line-height:1.4}
p{margin:.5em 0}
.lede{color:var(--muted);font-size:17px;line-height:1.6;margin-bottom:32px;max-width:62ch}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin:16px 0;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:border-color .15s var(--ease);
}
.card-current{border-color:var(--accent)}
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid .card{margin:0}

label{display:block;font-size:13px;color:var(--muted);margin:16px 0 4px;font-weight:500}
input,select,button,textarea{font:inherit}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=url],input:not([type]),select,textarea{
  width:100%;padding:8px 12px;min-height:36px;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,53,.18);
}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input[type=file]{font-size:13px;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{
  font:inherit;font-weight:500;color:var(--fg);background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 12px;margin-right:12px;cursor:pointer;
  transition:background-color .15s var(--ease);
}
input[type=file]::file-selector-button:hover{background:var(--line)}

button,.btn{
  background:var(--accent);color:#1c0d03;border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:7px 16px;cursor:pointer;font-weight:500;font-size:14px;line-height:20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),
             color .15s var(--ease),transform .12s var(--ease);
}
button:hover,.btn:hover{background:var(--accent-soft);text-decoration:none;color:#1c0d03}
button:active,.btn:active{transform:scale(.98)}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost,button.ghost{
  background:var(--panel2);border-color:var(--line);color:var(--fg);
}
.btn.ghost:hover,button.ghost:hover{background:var(--line);color:var(--fg)}
.btn.lg{min-height:44px;padding:12px 20px;font-size:15px}

.muted{color:var(--muted)}
.small{font-size:13px}
.err{color:var(--err)} .ok{color:var(--ok)} .warn{color:var(--warn)}
.notice{
  border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);
  padding:16px 20px;border-radius:var(--radius-sm);margin:16px 0;
}

/* 徽章／進度條／狀態點 */
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:500;
  padding:2px 8px;border-radius:6px;font-family:var(--font-mono);
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
}
.badge.on{border-color:rgba(76,195,138,.35);color:var(--ok)}
.badge.warn{border-color:rgba(217,169,58,.35);color:var(--warn)}
.badge.err{border-color:rgba(229,72,77,.35);color:var(--err)}
.badge.accent{border-color:rgba(255,122,53,.35);color:var(--accent-ink)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

.progress{
  height:8px;border-radius:4px;background:var(--panel2);
  border:1px solid var(--line);overflow:hidden;position:relative;
}
.progress > i{
  display:block;height:100%;border-radius:4px;background:var(--accent);
  transition:transform .4s var(--ease),width .4s var(--ease);
}

table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line-soft)}
th{color:var(--muted);font-weight:500;font-size:13px}
tbody tr{transition:background-color .12s var(--ease)}
tbody tr:hover{background:var(--line-soft)}
code{
  background:var(--panel2);padding:2px 6px;border-radius:4px;
  font-family:var(--font-mono);font-size:.86em;border:1px solid var(--line-soft);
}

footer{border-top:1px solid var(--line-soft);color:var(--muted);font-size:13px;
  padding:32px 0;margin-top:48px;position:relative}
footer .wrap{display:flex;gap:8px 20px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--fg)}
.legal{max-width:760px}
.legal h2{border-bottom:1px solid var(--line);padding-bottom:8px}
.legal ol,.legal ul{padding-left:1.3em}
.legal li{margin:.35em 0}

@media(max-width:640px){
  .wrap{padding:0 16px}
  .nav .wrap{gap:12px}
  .nav nav{
    gap:2px;font-size:13px;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  }
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav > a{white-space:nowrap;padding:6px 8px;flex-shrink:0}
  .pill{white-space:nowrap;flex-shrink:0}
  main{padding:32px 0 64px}
  h1{font-size:26px} h2{font-size:18px;margin-top:40px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0s !important;animation-duration:0s !important}
}

.theme-toggle{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius-sm);width:32px;height:32px;min-height:32px;padding:0;margin-left:4px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.theme-toggle:hover{color:var(--fg);background:var(--line-soft)}
.theme-toggle svg{display:none;width:16px;height:16px}
.theme-toggle[data-mode="light"] .i-sun{display:block}
.theme-toggle[data-mode="dark"] .i-moon{display:block}
.theme-toggle:not([data-mode]) .i-moon{display:block}

/* ── App shell：登入後的作譜區改用左側選單（比較像儀表板）。公開頁
      （首頁等）維持頂部導覽列。 ─────────────────────────────────── */
.app-shell{display:flex;align-items:flex-start;min-height:100vh}
.sidebar{width:240px;flex:none;position:sticky;top:0;height:100vh;
  background:var(--bg2);border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;padding:16px 12px;box-sizing:border-box}
.sidebar .sb-brand{padding:8px 8px 24px;text-decoration:none}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 8px;
  border-radius:var(--radius-sm);color:var(--muted);text-decoration:none;
  font-size:14px;font-weight:500;
  transition:background-color .15s var(--ease),color .15s var(--ease)}
.sidebar-nav a:hover{background:var(--line-soft);color:var(--fg)}
.sidebar-nav a.active{background:var(--panel2);color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sidebar-nav .si{width:16px;height:16px;flex:none;display:inline-flex}
.sidebar-nav .si svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sidebar-nav a.active .si{color:var(--accent)}
.sidebar-foot{margin-top:auto;padding-top:16px;display:flex;
  flex-direction:column;gap:8px}
.sidebar-foot .pill{width:100%;justify-content:center;box-sizing:border-box}
.sidebar-foot .pill.plan{color:var(--accent-ink);border-color:rgba(255,122,53,.35)}
.sb-foot-row{display:flex;gap:8px;align-items:center}
.sb-foot-row .js-logout{flex:1}
.sb-lang{text-align:center;line-height:1.7;font-size:12px}
.sb-lang a{color:var(--muted)}
.sb-lang a:hover{color:var(--fg)}
.app-main{flex:1;min-width:0}
.app-main main{padding:32px 0 64px}
.app-main .wrap{max-width:1200px;padding:0 32px}
@media(max-width:820px){
  /* 手機：側欄變回頂部橫列，跟原本的行動版導覽一樣可橫向捲 */
  .app-shell{flex-direction:column}
  .sidebar{width:auto;height:auto;position:sticky;top:0;z-index:20;
    flex-direction:row;align-items:center;gap:4px;padding:8px 12px;
    border-right:0;border-bottom:1px solid var(--line-soft);overflow-x:auto}
  .sidebar .sb-brand{padding:4px 8px;flex:none}
  .sidebar-nav{flex-direction:row;flex:1;overflow-x:auto;gap:0}
  .sidebar-nav a{white-space:nowrap;padding:0 8px;height:32px}
  .sidebar-nav a.active{background:none;box-shadow:inset 0 -2px 0 var(--accent)}
  .sidebar-nav .si{display:none}
  .sidebar-foot{margin-top:0;padding-top:0;flex-direction:row;
    align-items:center;gap:8px;flex:none}
  .sidebar-foot .pill{display:none}
  .sb-lang{white-space:nowrap}
  .app-main main{padding:24px 0 64px}
  .app-main .wrap{padding:0 16px}
}

/* 任務／譜面名稱旁的改名鈕（/app、歷史紀錄共用）。平常淡，hover 才明顯。 */
.rename-btn{background:none;border:0;color:var(--muted);cursor:pointer;min-height:0;
  font-size:13px;padding:2px 4px;border-radius:4px;line-height:1;opacity:.5;
  vertical-align:1px;transition:opacity .15s,color .15s,background-color .15s}
.rename-btn:hover,.rename-btn:focus{opacity:1;color:var(--accent-ink);
  background:var(--line-soft)}
.job-title:hover .rename-btn{opacity:1}
/* 難度徽章（TF.diffChips 畫的）——星等＋音符數，各難度一個顏色（這是譜面
   內容的顏色，不是裝飾：跟遊戲裡梅竹松鬼的色一致） */
.dc{display:inline-flex;align-items:center;gap:.25em;font-size:12px;
  padding:0 6px;border-radius:4px;border:1px solid var(--line);
  line-height:18px;margin:1px 2px;white-space:nowrap;vertical-align:1px;
  font-weight:500;font-variant-numeric:tabular-nums}
.dc .dc-n{opacity:.7;font-weight:400}
.dc-easy{border-color:#e8556a;color:#e8556a}
.dc-normal{border-color:#3f9d5a;color:#3f9d5a}
.dc-hard{border-color:#3a7bd0;color:#3a7bd0}
.dc-oni{border-color:#9b57d6;color:#9b57d6}
.dc-edit{border-color:#b0447f;color:#b0447f}
.dc-x{border-color:var(--line);color:var(--muted)}

/* ══ 紙張主題（2026-11-06，全站）══════════════════════════════════════
   首頁仿 keykey.aottersman.com 的「手冊／貼紙」風推到全站：米色紙、
   粗框＋錯位硬陰影、深色頁首長條。配色取自太鼓：咚＝紅（主色）、
   咔＝青（--accent2）、連打／氣球＝黃。這一段整段覆寫上面的變數與元件，
   要退回舊的石墨灰版，刪掉這一段即可（備份：
   templates/_backup/landing_keykey_20261106/site.css.before_paper）。
   --edge＝粗框色、--hard＝硬陰影色；--lp-* 是首頁沿用的別名。 */
:root,:root[data-theme="dark"]{
  --bg:#16130f; --bg2:#120f0c; --panel:#211d18; --panel2:#2a251f;
  --panel-glass:rgba(22,19,15,.94);
  --line:#3a332b; --line-soft:rgba(244,236,224,.08);
  --fg:#f4ece0; --muted:#b9ad9f; --muted-soft:#958a7d;
  --accent:#e2492a; --accent-soft:#ef6a4d; --accent-dim:#c23a1f; --accent-ink:#ff8a6b;
  --accent2:#2fb3c8; --accent2-soft:#6fcbdb; --yellow:#ffcf3a;
  --edge:#f4ece0; --hard:#000; --bar:#0c0a08; --bar-fg:#f4ece0;
  --shadow:none; --radius:16px; --radius-sm:10px;
  --lp-paper:var(--bg); --lp-paper2:var(--panel); --lp-ink:var(--fg); --lp-edge:var(--edge);
  --lp-shadow:var(--hard); --lp-muted:var(--muted); --lp-bar:var(--bar); --lp-bar-fg:var(--bar-fg);
  --lp-don:var(--accent); --lp-don-ink:var(--accent-ink); --lp-ka:var(--accent2);
  --lp-yel:var(--yellow); --lp-yel-shape:rgba(255,207,58,.16);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f7efe4; --bg2:#efe4d4; --panel:#fffaf2; --panel2:#f1e6d6;
    --panel-glass:rgba(247,239,228,.94);
    --line:#e3d5c2; --line-soft:rgba(29,26,23,.08);
    --fg:#1d1a17; --muted:#5b534b; --muted-soft:#7a7066;
    --accent:#d9411f; --accent-soft:#e65a3a; --accent-ink:#b8361a;
    --edge:#1d1a17; --hard:#1d1a17; --bar:#1d1a17; --bar-fg:#f7efe4;
    --lp-yel-shape:#ffd84d;
  }
}
:root[data-theme="light"]{
  --bg:#f7efe4; --bg2:#efe4d4; --panel:#fffaf2; --panel2:#f1e6d6;
  --panel-glass:rgba(247,239,228,.94);
  --line:#e3d5c2; --line-soft:rgba(29,26,23,.08);
  --fg:#1d1a17; --muted:#5b534b; --muted-soft:#7a7066;
  --accent:#d9411f; --accent-soft:#e65a3a; --accent-ink:#b8361a;
  --edge:#1d1a17; --hard:#1d1a17; --bar:#1d1a17; --bar-fg:#f7efe4;
  --lp-yel-shape:#ffd84d;
}
::selection{background:rgba(226,73,42,.28)}

/* 標題：粗、緊 */
h1{font-weight:900;letter-spacing:-.015em}
h2{font-weight:800}
h3{font-weight:700}

/* 頁首：深色長條＋紅底線 */
header.nav{background:var(--bar);border-bottom:3px solid var(--accent)}
.nav .brand,.nav .brand:hover{color:var(--bar-fg)}
.nav .brand span{color:var(--bar-fg);opacity:.7}
.nav .brand::before{box-shadow:inset 0 0 0 3px var(--bar),inset 0 0 0 4px var(--accent)}
.nav nav>a,.nav .theme-toggle{color:var(--bar-fg);opacity:.85;font-weight:600}
.nav nav>a:hover,.nav .theme-toggle:hover{opacity:1;color:var(--bar-fg);background:rgba(255,255,255,.08)}
.nav .theme-toggle{border-color:rgba(255,255,255,.25)}
.nav .pill{background:transparent;color:var(--bar-fg);border-color:rgba(255,255,255,.25)}

/* 側欄（登入後）：同一條深色帶 */
.sidebar{background:var(--bar);border-right:3px solid var(--accent);color:var(--bar-fg)}
.sidebar .sb-brand,.sidebar .sb-brand:hover{color:var(--bar-fg)}
.sidebar .sb-brand span{color:var(--bar-fg);opacity:.7}
.sidebar .sb-brand::before{box-shadow:inset 0 0 0 3px var(--bar),inset 0 0 0 4px var(--accent)}
.sidebar-nav a{color:rgba(247,239,228,.72);font-weight:600}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:var(--bar-fg)}
.sidebar-nav a.active{background:var(--accent);color:#fff;box-shadow:none}
.sidebar-nav a.active .si{color:#fff}
.sidebar .pill{background:transparent;color:var(--bar-fg);border-color:rgba(255,255,255,.25)}
.sidebar-foot .pill.plan{color:var(--yellow);border-color:rgba(255,207,58,.5)}
.sidebar .theme-toggle{color:var(--bar-fg);border-color:rgba(255,255,255,.25)}
.sidebar .sb-lang,.sidebar .sb-lang a{color:rgba(247,239,228,.6)}
.sidebar .sb-lang strong,.sidebar .sb-lang a:hover{color:var(--bar-fg)}
.sidebar .btn.ghost{background:transparent;color:var(--bar-fg);border-color:rgba(255,255,255,.35);box-shadow:none}
@media(max-width:820px){
  .sidebar{border-right:0;border-bottom:3px solid var(--accent)}
  .sidebar-nav a.active{background:none;color:var(--bar-fg);box-shadow:inset 0 -3px 0 var(--accent)}
}

/* 按鈕：粗框＋硬陰影。只套 .btn——播放器、改名鈕這類小按鈕有自己的外觀 */
.btn,button:not([class]){color:#fff}
.btn:hover,button:not([class]):hover{color:#fff}
.btn{border:2px solid var(--edge);border-radius:10px;font-weight:700;
  box-shadow:3px 3px 0 var(--hard)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--hard)}
.btn:disabled{transform:none;box-shadow:3px 3px 0 var(--hard)}
.btn.ghost,button.ghost{background:var(--panel);color:var(--fg);border-color:var(--edge)}
.btn.ghost:hover,button.ghost:hover{background:var(--panel2);color:var(--fg)}
.btn.small{box-shadow:2px 2px 0 var(--hard)}
.btn.small:hover{box-shadow:3px 3px 0 var(--hard)}
.btn.lg{border-radius:12px;box-shadow:4px 4px 0 var(--hard)}
.btn.lg:hover{box-shadow:5px 5px 0 var(--hard)}
.btn.btn-blue{background:var(--accent2);color:#10191b}
.rename-btn,.theme-toggle,.tf-yt-play{box-shadow:none}

/* 卡片／提醒框 */
.card{border:2px solid var(--edge);border-radius:16px;box-shadow:5px 5px 0 var(--hard);overflow:visible}
.card .card{border-width:1px;border-color:var(--line);box-shadow:none}
.card-current{border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}
.notice{border:2px solid var(--edge);border-left:6px solid var(--accent);
  border-radius:12px;background:var(--panel);box-shadow:3px 3px 0 var(--hard)}

/* 輸入框：框線加粗一點，聚焦時用主色 */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=url],input:not([type]),select,textarea{
  border-width:1.5px;border-color:var(--line);background:var(--panel)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(226,73,42,.18)}

/* 徽章／進度條 */
.pill,.badge{border-width:1.5px}
.badge.accent{border-color:rgba(226,73,42,.45)}
.progress{height:10px;border:2px solid var(--edge);border-radius:6px}
.progress > i{border-radius:0}

/* 頁尾 */
footer{border-top:2px dashed var(--line)}

/* 歷史紀錄表格的動作鈕（history.html）：包在 div 裡可換行，按鈕縮小一號 */
.h-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.h-acts .btn.small{min-height:30px;padding:3px 10px;font-size:13px}

/* ⓘ 說明提示：長說明不佔版面，滑過／聚焦才出現（title）。2026-11-07 精簡介面文字時加的 */
.tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;border:1.5px solid var(--muted-soft);color:var(--muted);
  font:700 10px/1 var(--font-mono);cursor:help;vertical-align:1px;margin-left:2px;
  user-select:none}
.tip:hover,.tip:focus{border-color:var(--accent);color:var(--accent-ink);outline:none}