/* ============================================================
* _components.css — 全站共用元件層
* ------------------------------------------------------------
* 載入順序：_tokens.css → _components.css → page CSS
* 用途：提供 .btn / .modal / .pill 的 canonical 預設樣式。
* Page CSS 因 cascade 在後，仍能覆寫本層；新頁面可直接用這些 class。
* ============================================================ */
/* utility：取代被砍掉的 tailwind .hidden（多頁 JS classList.add/remove('hidden') 仰賴這個） */
.hidden { display: none !important; }
/* ── Turnstile widget wrapper（全站共用，data-size="flexible" → widget 自動 fit 父容器寬） ── */
.ts-wrap { min-height: 65px; margin: .5rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ts-hint { font-size: .72rem; color: var(--text-dim); line-height: 1.4; margin: 0 0 .4rem; text-align: center; transition: opacity .2s ease; }
.ts-wrap.is-ready .ts-hint { display: none; }
/* flexible 模式有 300px CF 硬下限；極窄手機（≤340px，iPhone SE 直立）保留 scale 兜底 */
@media (max-width: 340px) {
.ts-wrap > div { transform: scale(.88); transform-origin: center top; }
.ts-wrap { min-height: 58px; }
}
/* ── Auth pages 共用的 success/error 面板（forgot-password / reset-password / verify-email / bind-email / confirm-delete） ── */
.success-state,
.error-state { text-align: center; padding: .25rem 0; }
.success-icon-wrap,
.error-icon-wrap {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%; margin-bottom: 1rem;
}
.success-icon-wrap { background: rgba(34,168,101,.10); border: 1px solid rgba(34,168,101,.25); color: #22a865; }
.error-icon-wrap { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.25); color: #f87171; }
.success-icon-wrap svg,
.error-icon-wrap svg { width: 24px; height: 24px; }
.success-title,
.error-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; }
.success-desc,
.error-desc { font-size: .85rem; color: var(--text-muted); white-space: pre-line; line-height: 1.65; }
.success-countdown { font-size: .75rem; color: var(--text-dim); margin-top: .75rem; }
.success-back-btn { display: inline-block; width: auto; margin-top: 1.25rem; padding: .55rem 1.5rem; text-decoration: none; }
/* .text-center utility for vertically centred panels */
.text-center { text-align: center; }
/* ── Button base ─────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .65rem 1.4rem;
font-family: var(--font-body); font-size: .88rem; font-weight: 500;
border-radius: 8px; border: none; cursor: pointer;
text-decoration: none; line-height: 1.2;
transition: filter .18s ease, transform .18s ease,
background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* ── Button variants ─────────────────────────────── */
.btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .65rem 1.4rem;
background: var(--accent); color: #fff;
font-family: var(--font-body); font-size: .88rem; font-weight: 500;
border-radius: 8px; border: none; cursor: pointer;
transition: filter .18s ease, transform .18s ease;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost {
display: inline-flex; align-items: center; gap: .4rem;
padding: .65rem 1.2rem;
background: transparent;
color: var(--text-muted);
font-family: var(--font-body); font-size: .88rem; font-weight: 400;
border-radius: 10px; border: 1px solid var(--border); cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-ghost:hover:not(:disabled) {
background: var(--hover-overlay);
border-color: var(--border-mid);
color: var(--text);
}
.btn-ghost:disabled { opacity: .55; cursor: not-allowed; }
.btn-danger {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .65rem 1.4rem;
background: #dc2626; color: #fff;
font-family: var(--font-body); font-size: .88rem; font-weight: 500;
border-radius: 8px; border: none; cursor: pointer;
transition: filter .18s ease, transform .18s ease;
}
.btn-danger:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn-danger:disabled { opacity: .55; cursor: not-allowed; }
/* ── Pill ────────────────────────────────────────── */
.pill {
display: inline-flex; align-items: center;
padding: .18rem .55rem;
border-radius: 6px;
font-size: .72rem;
background: var(--accent-dim);
color: var(--accent);
border: 1px solid var(--accent-glow);
}
/* ── Modal ───────────────────────────────────────── */
.modal-bd {
display: none;
position: fixed; inset: 0;
z-index: var(--z-modal);
background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: center; justify-content: center;
padding: 1rem;
}
.modal-bd.open { display: flex; }
.modal-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 16px;
width: 100%; max-width: 560px;
max-height: 85vh; overflow-y: auto;
box-shadow: 0 24px 64px rgba(0,0,0,.32);
}
.modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--border-dim);
}
.modal-head h2 { font-size: .9rem; font-weight: 600; color: var(--text); }
.modal-close {
background: none; border: none;
color: var(--text-dim); cursor: pointer;
padding: .25rem; border-radius: 6px;
transition: color .18s, background .18s;
}
.modal-close:hover { color: var(--text); background: var(--hover-overlay); }
.modal-close svg { width: 18px; height: 18px; display: block; }
.modal-body {
padding: 1.25rem 1.4rem;
display: flex; flex-direction: column; gap: .85rem;
font-size: .86rem;
}
.modal-footer {
padding: 1rem 1.4rem;
border-top: 1px solid var(--border-dim);
display: flex; align-items: center; justify-content: flex-end; gap: .65rem;
}
/* ── Toast（Phase 2 notify.js 消費） ───────────────── */
.toast-stack {
position: fixed;
top: 1rem; right: 1rem;
z-index: var(--z-toast);
display: flex; flex-direction: column; gap: .5rem;
pointer-events: none;
max-width: min(92vw, 420px);
}
.toast {
pointer-events: auto;
background: var(--bg-surface);
color: var(--text);
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: 10px;
padding: .75rem 1rem;
font-size: .85rem;
line-height: 1.5;
box-shadow: 0 10px 32px rgba(0,0,0,.18);
cursor: pointer;
opacity: 0;
transform: translateX(20px);
transition: opacity .25s ease, transform .25s ease;
word-break: break-word;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.leaving { opacity: 0; transform: translateX(20px); }
.toast-success { border-left-color: #22a865; }
.toast-error { border-left-color: #dc2626; }
.toast-warning { border-left-color: #f59e0b; }
.toast-info { border-left-color: var(--accent); }
@media (max-width: 640px) {
.toast-stack { top: auto; bottom: 1rem; left: 1rem; right: 1rem; max-width: none; }
.toast { transform: translateY(20px); }
.toast.show { transform: translateY(0); }
.toast.leaving { transform: translateY(20px); }
}
/* ── Skeleton primitives（Phase 3 loading 三段式用）─── */
/* 用法：
*
*
*
* Shimmer 兩 mode 自動（用 --bg-surface ↔ --bg-elevated 漸層）。 */
@keyframes sk-shimmer {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
.sk {
background: linear-gradient(
90deg,
var(--bg-surface) 25%,
var(--bg-elevated) 50%,
var(--bg-surface) 75%
);
background-size: 200% 100%;
animation: sk-shimmer 1.5s ease-in-out infinite;
border-radius: 6px;
}
.sk-line { height: 1em; margin: .35em 0; }
.sk-line.sk-sm { height: .75em; }
.sk-line.sk-lg { height: 1.4em; }
.sk-line:last-child { margin-bottom: 0; }
.sk-block { width: 100%; height: 120px; border-radius: 10px; }
.sk-circle { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.sk-text { display: flex; flex-direction: column; gap: .4em; }
@media (prefers-reduced-motion: reduce) {
.sk { animation: none; }
}
/* ── Empty state（fetch 無資料 / 篩選結果為空）────── */
/* 用法：
*
*
📭
*
尚無資料
*
目前還沒有任何項目。
*
*