/* 共用樣式：index.html 與 admin.html 共用的設計 token 與基礎元件（規範見 DESIGN.md） */
:root{
  --bg:#f5f6f4; --surface:#ffffff; --surface-2:#f0f1ee; --border:#dee0d9; --border-strong:#c9ccc2;
  --text:#23241f; --text-soft:#5f625a; --text-faint:#767a70;
  --accent:#35507a; --accent-soft:#e7ecf3; --accent-strong:#25395a; --accent-contrast:#ffffff;
  --club:#4f7a5b; --club-soft:#e8f0ea;
  --warn:#8a5a0c; --warn-soft:#faf0d9;
  --error:#a4372a; --error-soft:#f7e9e6;
  --shadow: 0 1px 2px rgba(35,36,31,0.04), 0 8px 24px -12px rgba(35,36,31,0.12);
  --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1a1b17; --surface:#222319; --surface-2:#282a1f; --border:#3a3c30; --border-strong:#4b4e3f;
    --text:#eae9e1; --text-soft:#b3b4a5; --text-faint:#979985;
    --accent:#8fadd6; --accent-soft:#29344a; --accent-strong:#c3d5ee; --accent-contrast:#0f1420;
    --club:#93c2a1; --club-soft:#22301f;
    --warn:#e3b055; --warn-soft:#3a2f16;
    --error:#e2897b; --error-soft:#3a2420;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#1a1b17; --surface:#222319; --surface-2:#282a1f; --border:#3a3c30; --border-strong:#4b4e3f;
  --text:#eae9e1; --text-soft:#b3b4a5; --text-faint:#979985;
  --accent:#8fadd6; --accent-soft:#29344a; --accent-strong:#c3d5ee; --accent-contrast:#0f1420;
  --club:#93c2a1; --club-soft:#22301f;
  --warn:#e3b055; --warn-soft:#3a2f16;
  --error:#e2897b; --error-soft:#3a2420;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:72px;scrollbar-color:var(--border-strong) var(--bg);accent-color:var(--accent);}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans TC",system-ui,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%;}
::selection{background:var(--accent-soft);color:var(--accent-strong);}
input{caret-color:var(--accent);}
a{color:var(--accent);text-underline-offset:3px;}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
[hidden]{display:none!important;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.page{max-width:720px;margin:0 auto;padding:44px 20px 80px;}

/* 卡片與區塊標題 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px;margin-bottom:28px;}
@media (max-width:560px){.card{padding:20px;}}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
.section-title{margin:0;font-family:"Noto Serif TC",serif;font-size:20px;font-weight:700;line-height:1.4;}
.section-meta{margin:0;font-size:13px;color:var(--text-faint);font-variant-numeric:tabular-nums;}

/* 共用按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 24px;border:none;border-radius:9px;background:var(--accent);color:var(--accent-contrast);font-weight:600;font-size:15px;font-family:inherit;cursor:pointer;transition:background .15s,transform .1s;white-space:nowrap;}
.btn:hover{background:var(--accent-strong);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn:disabled:hover{background:var(--accent);}
.field{flex:1;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:16px;font-family:inherit;transition:border-color .15s,background .15s;}
.field::placeholder{color:var(--text-faint);}
.field:hover{border-color:var(--border-strong);}
.field:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surface);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}