:root{
  --brand:#6b0d16; --bg:#fafafa; --card:#ffffff; --text:#222; --muted:#666;
  --border:#e5e7eb; --shadow:0 6px 18px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
.container{max-width:1000px;margin:0 auto;padding:0 16px}

/* Header / Footer */
.site-header{background:var(--brand);color:#fff}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.site-header .brand{margin:0;font-weight:800;letter-spacing:.5px}
.site-footer{background:#1f2937;color:#b7c0cc}
.site-footer .container{padding:14px 16px;text-align:center}

/* 卡片 / 表單 */
.site-main{padding:22px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
h1,h2,h3{margin:0 0 12px} h2{color:var(--brand)}
.row{display:flex;gap:12px;margin-bottom:12px}
.row>div{flex:1;min-width:0}
label{display:block;font-weight:700;margin-bottom:6px}
input,select,textarea,button{width:100%;padding:10px 12px;font-size:16px;border:1px solid var(--border);border-radius:12px;background:#fff}
button{background:var(--brand);color:#fff;border-color:transparent;cursor:pointer}
button:hover{opacity:.95}
.alert{border-radius:12px;padding:12px;margin:12px 0;background:#fff4f5;color:#7a0b14;border:1px solid #ffd5da}
.alert.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.slots{display:grid;grid-template-columns: repeat(4, minmax(0,1fr));gap:8px;margin-top:8px}
.slot{display:inline-block;width:100%;text-align:center;padding:10px 8px;border-radius:12px;border:1px solid var(--border);background:#eef8f0;color:#000;cursor:pointer}
.slot.active{background:#1a7f37;color:#fff;border-color:transparent;font-weight:700}
.slot.disabled{background:#eee;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;text-decoration:line-through}
@media (max-width: 820px){ .row{flex-direction:column} .slots{grid-template-columns: repeat(3,1fr)} }
@media (max-width: 560px){ .slots{grid-template-columns: repeat(2,1fr)} }