/* ============ 共用基礎樣式 ============ */
:root { color-scheme: light; }
html, body { font-family: 'Noto Sans TC', 'Inter', system-ui, -apple-system, sans-serif; }
body { -webkit-font-smoothing: antialiased; }
.num { font-family: 'Inter', 'Noto Sans TC', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* 頁面切換動畫 */
.page { display: none; }
.page.active { display: block; animation: app-fadein .2s ease; }
@keyframes app-fadein { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none; } }

/* 通用元件 */
.pill { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:999px; font-size:.68rem; font-weight:600; }
.dot  { width:.45rem; height:.45rem; border-radius:9999px; display:inline-block; }
.ring-soft { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06); }
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* details 預設箭頭關閉 */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ============ Toast ============ */
.app-toast {
  position: fixed; left: 50%; bottom: 5.5rem; transform: translate(-50%, 20px);
  background:#0f172a; color:#fff; padding:.65rem 1.1rem; border-radius:.7rem; font-size:.85rem;
  opacity:0; pointer-events:none; transition: all .25s ease; z-index:80;
  max-width: calc(100vw - 2rem); text-align:center;
}
.app-toast.show { opacity:1; transform: translate(-50%, 0); }
.app-toast.success { background:#047857; }
.app-toast.warning { background:#b45309; }
.app-toast.danger  { background:#be123c; }
@media (min-width: 768px) { .app-toast { bottom: 2rem; } }

/* ============ Modal ============ */
.app-modal-backdrop {
  position: fixed; inset:0; background: rgba(15,23,42,.55); z-index:90;
  display:flex; align-items: flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.app-modal-backdrop.show { opacity:1; pointer-events:auto; }
.app-modal {
  background:#fff; border-radius:1.25rem 1.25rem 0 0;
  width: 100%; max-width: 560px; max-height: 92vh; display:flex; flex-direction:column;
  transform: translateY(20px); transition: transform .25s ease;
}
.app-modal-backdrop.show .app-modal { transform: translateY(0); }
.app-modal-head { padding:1rem 1.25rem .5rem; display:flex; align-items:center; gap:.75rem; }
.app-modal-title { font-weight:700; font-size:.95rem; color:#0f172a; flex:1; }
.app-modal-close {
  width:2rem; height:2rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center;
  color:#64748b; transition: background .15s;
}
.app-modal-close:hover { background:#f1f5f9; color:#0f172a; }
.app-modal-body { padding: .5rem 1.25rem 1rem; overflow-y:auto; }
.app-modal-foot { padding: .75rem 1.25rem 1.1rem; border-top:1px solid #f1f5f9; display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap; }
@media (min-width: 640px) {
  .app-modal-backdrop { align-items: center; }
  .app-modal { border-radius:1rem; }
}
.app-modal.size-lg { max-width: 760px; }
.app-modal.size-sm { max-width: 420px; }

.btn { padding:.5rem .9rem; border-radius:.55rem; font-size:.8rem; font-weight:600; transition: background .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background:#047857; color:#fff; }
.btn-primary:hover { background:#065f46; }
.btn-ghost { background:#fff; color:#334155; border:1px solid #e2e8f0; }
.btn-ghost:hover { background:#f8fafc; }
.btn-danger { background:#be123c; color:#fff; }
.btn-danger:hover { background:#9f1239; }

/* ============ chip ============ */
.chip { padding:.4rem .75rem; border-radius:999px; font-size:.78rem; font-weight:500; border:1px solid #e2e8f0; background:#fff; color:#334155; cursor:pointer; transition: background .15s, color .15s, border .15s; }
.chip:hover { background:#f8fafc; }
.chip.active { background:#047857; color:#fff; border-color:#047857; }

/* form */
.field { display:block; }
.field label { display:block; font-size:.7rem; color:#64748b; font-weight:600; margin-bottom:.25rem; }
.field input, .field select, .field textarea {
  width:100%; border:1px solid #e2e8f0; border-radius:.5rem; padding:.45rem .65rem; font-size:.85rem;
  background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color:#10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }

/* switch */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events:none; }
.switch-track { width:2.4rem; height:1.25rem; background:#cbd5e1; border-radius:9999px; position:relative; transition: background .2s; }
.switch-knob  { position:absolute; top:.125rem; left:.125rem; width:1rem; height:1rem; background:#fff; border-radius:9999px; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.switch input:checked ~ .switch-track { background:#10b981; }
.switch input:checked ~ .switch-track .switch-knob { transform: translateX(1.15rem); }

/* progress */
.progress-track { height:6px; background:#e5e7eb; border-radius:9999px; overflow:hidden; }
.progress-fill { height:100%; background: linear-gradient(90deg, #10b981, #34d399); transition: width .3s ease; }