/* Auth-hint: hide landing for returning users (prevents flash on refresh) */
[data-auth-cached="true"] #landingView {
    display: none !important;
}

/* [v7.27.5] 重新上線 landing pricing 模組（Free / Event Lite / Event Pro）。
   只保留 in-app 登入後嘅 #firstFreeBanner 隱藏（與 landing pricing 無關）。 */
.landing-cta-banner #firstFreeBanner,
#firstFreeBanner {
    display: none !important;
}

:root {
    /* [v2.6.14] Theme Colors - Light Mode (Default) */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --primary: #2f7d6c;
    --primary-color: #2f7d6c;
    --primary-rgb: 47, 125, 108;
    --primary-gradient: linear-gradient(135deg, #2f7d6c 0%, #1c4035 100%);
    --secondary-color: #64748b;
    --success-color: #22c55e;
    --success-rgb: 34, 197, 94;
    --warning-color: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --error-color: #ef4444;
    --error-rgb: 239, 68, 68;
    --vvip-gold: #eab308;
    --vvip-gold-rgb: 234, 179, 8;
    --bg-light: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: blur(12px);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(var(--primary-rgb), 0.15);
    --radius-sm: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* [v3.2] Type Scale — 1.25 ratio, 7 steps */
    --font-sans: 'Space Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --text-xs:   0.75rem;   /* 12px — timestamps, powered-by */
    --text-sm:   0.8125rem; /* 13px — meta, captions */
    --text-base: 0.875rem;  /* 14px — standard UI body */
    --text-md:   1rem;      /* 16px — prominent body, inputs */
    --text-lg:   1.125rem;  /* 18px — card titles, subheads */
    --text-xl:   1.5rem;    /* 24px — section headings */
    --text-2xl:  2rem;      /* 32px — stat numbers, display */
    --text-3xl:  3rem;      /* 48px — seat code, hero data */

    /* [v3.2] Weight Roles */
    --weight-normal:  400;  /* body text, descriptions */
    --weight-medium:  500;  /* secondary labels, meta */
    --weight-semi:    600;  /* buttons, nav, UI labels */
    --weight-bold:    700;  /* headings, data values, emphasis */
}

/* ==========================================
   [BOLD] Dark Mode — Primary Theme
   ========================================== */
[data-theme="dark"] {
    --bg-primary: #0b1120;
    --bg-secondary: #131c31;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #1e3050;
    --card-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(15, 25, 50, 0.65);
    --glass-border: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 24px rgba(var(--primary-rgb), 0.2);
    --bg-light: #0f1a2e;
}

/* Dark mode element overrides */
[data-theme="dark"] .guest-card,
[data-theme="dark"] .search-results-list,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .hub-action-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .seating-table-card,
[data-theme="dark"] .grid-item {
    background: var(--bg-secondary);
    color: var(--text-main);
}

[data-theme="dark"] .guest-card:hover,
[data-theme="dark"] .search-result-item:hover {
    background: #1a2744;
}

[data-theme="dark"] .search-field,
[data-theme="dark"] .pwd-field,
[data-theme="dark"] .input-group input,
[data-theme="dark"] .seating-move-select,
[data-theme="dark"] .form-field {
    background: #0f1a2e;
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-field:focus {
    border-color: #5fcfae;
}

[data-theme="dark"] .add-guest-vvip-row {
    border-color: #78350f;
    background: #1c1306;
}

[data-theme="dark"] .vvip-toggle-text strong {
    color: #fbbf24;
}

[data-theme="dark"] .vvip-toggle-text small {
    color: #d97706;
}

[data-theme="dark"] .vvip-toggle-slider {
    background: #475569;
}

[data-theme="dark"] .form-error-msg {
    background: #1c0a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

[data-theme="dark"] .stats-bar {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .btn-refresh {
    background: rgba(47, 125, 108, 0.15) !important;
    color: #7fd8bd !important;
    border: 1px solid rgba(47, 125, 108, 0.3) !important;
}

[data-theme="dark"] .landing-nav {
    background: color-mix(in srgb, #faf9f6 85%, transparent);
}

[data-theme="dark"] .pricing-section {
    background: #0a0f1e;
}

[data-theme="dark"] .hub-sidebar {
    background: #0a0f1e;
    border-right-color: #1e3050;
}

[data-theme="dark"] .hub-sidebar .hub-tab:hover:not(.active) {
    background: rgba(52, 160, 133, 0.14);
    color: #e0e7ff;
    border-left-color: rgba(52, 160, 133, 0.4);
}
[data-theme="dark"] .hub-sidebar .hub-tab:hover .hub-tab-icon i {
    color: #5fcfae;
}

[data-theme="dark"] .hub-sidebar .hub-tab.active {
    background: rgba(47, 125, 108, 0.12);
    border-left-color: #34a085;
}

[data-theme="dark"] .hub-content {
    background: var(--bg-primary);
}

[data-theme="dark"] .hub-layout {
    background: var(--bg-primary);
}

[data-theme="dark"] .seating-table-count {
    background: rgba(47, 125, 108, 0.15);
    border-color: rgba(47, 125, 108, 0.3);
    color: #7fd8bd;
}

[data-theme="dark"] .seating-table-count.full {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .seating-arrived-badge {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .seating-arrived-badge.all {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

[data-theme="dark"] .seating-name-pill {
    background: #1a2744;
    border-color: #2a3a5c;
    color: var(--text-main);
}

[data-theme="dark"] .seating-name-pill.arrived {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

[data-theme="dark"] .analytics-bar-track,
[data-theme="dark"] .seating-capacity-bar {
    background: #1a2744;
}

[data-theme="dark"] .analytics-pie::after {
    background: var(--bg-secondary);
}

[data-theme="dark"] .analytics-pie-empty {
    background: #1e3050 !important;
}

[data-theme="dark"] .profile-item div {
    color: var(--text-main);
}

[data-theme="dark"] .profile-item label {
    color: var(--text-muted);
}

[data-theme="dark"] .btn-google {
    background: #1a2744 !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-google:hover {
    background: #243657 !important;
    color: var(--text-main) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .btn-warning {
    background: transparent;
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .divider::before,
[data-theme="dark"] .divider::after {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .check-btn {
    background: #1a2744;
    border-color: #2a3a5c;
}

[data-theme="dark"] .check-btn.checked {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

[data-theme="dark"] .pwd-zone {
    background: #131c31;
    border-color: #1e3050;
}

[data-theme="dark"] .pwd-input-area {
    background: #0f172a;
    border-color: #1e3050;
}

[data-theme="dark"] .seat-info-card {
    background: linear-gradient(135deg, #1c4035 0%, #245a4b 55%, #2f7d6c 100%);
    border-color: transparent;
}

[data-theme="dark"] .seating-stat {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .success-card {
    background: var(--bg-secondary);
}

[data-theme="dark"] .feedback-header.success {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
}

[data-theme="dark"] .seat-info-card .seat-code {
    background: transparent;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ---- Missing dark overrides (hardcoded light colours) ---- */
/* #zoomSlider track */
[data-theme="dark"] #zoomSlider {
    background: #1a2744;
}
[data-theme="dark"] #zoomSlider::-webkit-slider-thumb {
    border-color: #131c31;
}

/* standalone .seat-code (checkin success card) */
[data-theme="dark"] .seat-code {
    background: rgba(47, 125, 108, 0.12);
    border-color: rgba(47, 125, 108, 0.3);
    color: #7fd8bd;
}

/* .profile-item separator */
[data-theme="dark"] .profile-item {
    border-bottom-color: #1e3050;
}

/* .search-result-item separator + hover + arrived */
[data-theme="dark"] .search-result-item {
    border-bottom-color: #1e3050;
    background: var(--bg-secondary);
}
[data-theme="dark"] .search-result-item:hover {
    background: #1a2744;
}
[data-theme="dark"] .search-result-item.arrived {
    background: #0d2a1a;
}
[data-theme="dark"] .text-success,
[data-theme="dark"] .search-result-item .text-success {
    color: #22c55e !important;
}
[data-theme="dark"] .search-results-list {
    border-color: #1e3050;
}

/* .guest-card base + hover (hardcoded #f8fafc / #f1f5f9) */
[data-theme="dark"] .guest-card {
    background: var(--bg-secondary);
}
[data-theme="dark"] .guest-card:hover {
    background: #1a2744;
}

/* #hubDispatch .guest-card desktop stripe */
[data-theme="dark"] #hubDispatch .guest-card {
    border-bottom-color: #1e3050;
}
[data-theme="dark"] #hubDispatch .guest-card:hover {
    background: #1a2744;
}

/* .plan-modal .modal-content */
[data-theme="dark"] .plan-modal .modal-content {
    background: #131c31;
}

/* .guest-card-vvip — override light gradient */
[data-theme="dark"] .guest-card-vvip {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, #131c31 100%) !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
}

/* Block 2-only selectors (移自 @media prefers-color-scheme) */
[data-theme="dark"] .app-nav {
    background: rgba(11, 17, 32, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .seating-name-pill.vvip {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.28);
    color: rgba(234, 179, 8, 0.6);
    font-weight: 700;
}
[data-theme="dark"] .seating-name-pill.vvip.arrived {
    background: #ca8a04;
    border-color: #eab308;
    color: #fff8e1;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.45);
}
[data-theme="dark"] .analytics-bar-total {
    background: #2a3a5c;
}
[data-theme="dark"] .qr-ticket-card {
    background: #131c31;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .qr-guest-name {
    color: #f1f5f9;
}
[data-theme="dark"] .qr-password {
    background: #1a2744;
    color: #f1f5f9;
}

/* Dark mode: system preference CSS variables fallback (JS 已在 <head> 即時設定 data-theme) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0b1120;
        --bg-secondary: #131c31;
        --text-main: #f1f5f9;
        --text-muted: #94a3b8;
        --border-color: #1e3050;
        --glass-bg: rgba(15, 25, 50, 0.65);
        --glass-border: rgba(255, 255, 255, 0.06);
        --bg-light: #0f1a2e;
        --card-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
        --shadow-glow: 0 0 24px rgba(var(--primary-rgb), 0.2);
    }
}

/* Dark mode color-scheme helper */
[data-theme="dark"] {
    color-scheme: dark;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

/* Ensure all form controls inherit app font */
input, textarea, select, button {
    font-family: var(--font-sans);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    margin: 0;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    overflow-x: hidden;
    text-align: center;
    /* [v2.6.5] Default center alignment for better mobile feel */
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header Styles */
.app-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* [v6.9.0 → v7.3.8] Event Selector — chip + popover pattern */
.event-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.event-chip:hover { border-color: var(--primary, #34a085); background: var(--bg-primary, #fff); }
.event-chip i { width: 12px; height: 12px; flex-shrink: 0; }
.event-chip[aria-expanded="true"] i { transform: rotate(180deg); }
#eventChipLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popover panel */
.event-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background: var(--bg-primary, #fff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 12px;
    z-index: 200;
}
.event-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}
.event-popover-close {
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
}
.event-popover-close:hover { color: var(--text-primary, #1e293b); }
.event-selector {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.82rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
}
.btn-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #fff);
    color: var(--primary, #34a085);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.btn-icon-sm:hover {
    background: var(--primary, #34a085);
    color: #fff;
    border-color: var(--primary, #34a085);
}
.btn-icon-sm i { width: 14px; height: 14px; }

.logo-area {
    text-align: left;
}

.app-header h1 {
    font-size: var(--text-lg);
    color: var(--primary);
    font-weight: var(--weight-bold);
    letter-spacing: -0.5px;
}

.version {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-normal);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

/* Plan tier badge pill */
.plan-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
    line-height: 1.5;
}
.plan-badge-ultra {
    background: linear-gradient(135deg, #2f7d6c, #1c4035);
    color: #fff;
    box-shadow: 0 1px 4px rgba(47, 125, 108,0.35);
}
.plan-badge-pro {
    background: linear-gradient(135deg, #245a4b, #2f7d6c);
    color: #fff;
    box-shadow: 0 1px 4px rgba(47, 125, 108,0.35);
}
.plan-badge-standard {
    background: rgba(100,116,139,0.18);
    color: var(--text-muted);
}

/* Role badge */
.role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(234,179,8,0.18);
    color: #a16207;
    vertical-align: middle;
    line-height: 1.5;
}

/* Stats panel — collapsible wrapper for stats + sync status */
.stats-panel {
    position: relative;
    text-align: center;
}

.stats-panel-content {
    overflow: hidden;
    max-height: 120px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

.stats-panel.collapsed .stats-panel-content {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Stats toggle button — chevron-up rotates 180° when collapsed */
#statsToggleIcon {
    transition: transform 0.2s ease;
}
.stats-toggle-btn.is-collapsed #statsToggleIcon {
    transform: rotate(180deg);
}
/* [v7.18.35] Hide arrow toggle when collapsed — mini bar handles re-expand */
.stats-toggle-btn.is-collapsed {
    display: none;
}

.stats-bar {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0.4rem auto 0 auto;
    background: rgba(0, 0, 0, 0.03);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    display: table;
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

.sync-status.gold {
    background: #fff3bf;
    color: #e67700;
    width: 100%;
    margin: 0.5rem 0 0 0;
    border-radius: 8px;
    padding: 0.5rem;
    display: block;
    font-weight: 600;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.sync-status {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}

/* [v6.9.2] 用量上限進度條 */
.usage-limit-bar {
    margin: 2px 0 4px;
    padding: 0 2px;
}
.usage-limit-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 8px;
}
.usage-limit-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.usage-progress-track {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}
.usage-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease, background 0.3s ease;
    background: var(--success-color);
}
.usage-progress-fill.warn   { background: var(--warning-color); }
.usage-progress-fill.danger { background: var(--error-color); }
.usage-progress-fill.full   { background: var(--error-color); }
.usage-cta-link {
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.usage-cta-link:hover { opacity: 0.8; }
.usage-cta-link.warn   { color: var(--warning-color); }
.usage-cta-link.danger { color: var(--error-color); }
.usage-cta-link.full   { color: var(--error-color); }

.sync-time {
    display: block;
    text-align: center;
    margin: 4px 0;
}

.status-dot.green {
    background: var(--success-color);
}

.status-dot.yellow {
    background: var(--warning-color);
}

.status-dot.red {
    background: var(--danger-color);
}

.spin {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Main Content */
main {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
}

.view-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    /* animation removed — re-triggered via .view-entering on each tab switch */
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Re-triggerable view entrance — applied by switchView() on every tab change */
.view-section.view-entering {
    animation: slideUpFade 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* Scanner Styles */
.scanner-container {
    background: #020617;
    border-radius: var(--radius-lg);
    aspect-ratio: 1/1;
    /* More square for better look */
    position: relative;
    overflow: hidden;
    display: block;
    /* [v2.6.7] Ensure block display for margin auto */
    margin: 1rem auto 1.5rem auto;
    /* [v2.6.7] Force horizontal centering */
    width: 88%;
    /* [v2.6.13] Slightly wider to ensure screen centering on small devices */
    max-width: 400px;
    box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255, 255, 255, 0.05);
    /* [v2.6.7] Refined shadow */
    max-height: 42vh;
    /* [v2.6.13] Slightly more height balance */
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    /* [v2.6.13] Use flex to center child #reader if needed */
    align-items: center;
    justify-content: center;
}

#reader {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    position: relative;
    /* [v2.6.7] For video absolute positioning */
}

#reader video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    /* [v2.6.7] Reset any library transforms */
}

.scanner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-frame {
    width: 300px;
    /* [v7.15.0] Increased to 300px for better QR detection */
    height: 300px;
    max-width: 92%;
    max-height: 92%;
    aspect-ratio: 1/1;
    border: 2px solid rgba(255, 255, 255, 0.5);
    /* [v2.6.7] Thinner, more subtle border */
    border-radius: 24px;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.85);
    /* [v2.6.7] Darker overlay for better contrast */
    position: absolute;
    /* [v2.6.12] Force absolute positioning */
    top: 50%;
    /* [v2.6.12] Center vertically */
    left: 50%;
    /* [v2.6.12] Center horizontally */
    transform: translate(-50%, -50%);
    /* [v2.6.12] Perfect center alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    /* [v2.6.12] Reset margin */
}

/* [v2.7.0] Corners for Tech feel */
.scan-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid var(--primary);
    filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.6));
    transition: all 0.3s ease;
}

.top-left {
    top: 12px;
    left: 12px;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 12px;
}

.top-right {
    top: 12px;
    right: 12px;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: 12px;
}

.bottom-left {
    bottom: 12px;
    left: 12px;
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: 12px;
}

.bottom-right {
    bottom: 12px;
    right: 12px;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: 12px;
}

/* [v2.7.0] Animated Scanning Line */
.scan-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 5%, rgba(var(--primary-rgb), 0.4) 20%, var(--primary) 50%, rgba(var(--primary-rgb), 0.4) 80%, transparent 95%);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.5), 0 0 40px rgba(var(--primary-rgb), 0.15);
    animation: scanMoveLoop 3s ease-in-out infinite;
    z-index: 10;
    opacity: 0.9;
}

@keyframes scanMoveLoop {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0;
    }

    10%,
    90% {
        opacity: 0.8;
    }

    50% {
        transform: translateY(250px);
    }
}


/* Revert/Clean up hacks and hide duplicate library UI elements */
#reader__scan_region img {
    display: none !important;
}

/* Hide library's default scanning border/box to avoid duplication */
#reader__scan_region>div {
    border: none !important;
    box-shadow: none !important;
}

/* Aggressively hide library-generated corners if they persist */
#reader__scan_region div div {
    border: none !important;
    box-shadow: none !important;
}

/* [v2.6.3] 完全隱藏庫生成的掃描框 */
#reader__scan_region,
#reader__scan_region * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#reader__dashboard {
    display: none !important;
}

#reader video {
    object-fit: cover !important;
}

/* [v2.6.3] 動態邊框顏色狀態 */
.scan-frame.scanning .scan-corner {
    border-color: rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.scan-frame.success .scan-corner {
    border-color: var(--success-color) !important;
    filter: drop-shadow(0 0 8px var(--success-color)) !important;
}

.scan-frame.error .scan-corner {
    border-color: var(--error-color) !important;
    filter: drop-shadow(0 0 8px var(--error-color)) !important;
}

.scan-frame.success {
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7), 0 0 40px rgba(34, 197, 94, 0.3) !important;
}

.scan-frame.error {
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7), 0 0 40px rgba(239, 68, 68, 0.3) !important;
}

.scan-frame.success .scan-line,
.scan-frame.error .scan-line {
    animation-play-state: paused;
    opacity: 0;
}



.controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Scan confirm button — primary action, must stand out */
#scanBtn {
    background: var(--primary-color);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.45);
    border: 2px solid rgba(255,255,255,0.15);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
#scanBtn:hover {
    background: #245a4b;
    box-shadow: 0 6px 24px rgba(var(--primary-rgb), 0.6);
    transform: translateY(-1px);
}
#scanBtn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}


/* Zoom Controls */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    margin: 0 auto 1rem auto;
    width: 88%;
    max-width: 400px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.zoom-controls i { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }

/* [polish] 補光燈按鈕（暗光會場） */
.scanner-torch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto 1rem auto;
    min-height: 44px;
    padding: 8px 18px;
}
.scanner-torch-btn i { width: 18px; height: 18px; }
.scanner-torch-btn.torch-on {
    background: #fbbf24;
    border-color: #f59e0b;
    color: #1c1917;
}
#zoomSlider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}
#zoomSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: var(--shadow-sm);
}
#zoomValue {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--primary);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Dashboard Styles */
.dashboard-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
}

/* [v7.18.20] RTDB 即時同步狀態指示器 */
.rtdb-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    user-select: none;
}
.rtdb-status:hover { transform: scale(1.04); }
.rtdb-status:active { transform: scale(0.98); }
.rtdb-last-sync {
    font-size: 0.7rem;
    opacity: 0.75;
    margin-left: 4px;
    font-weight: 400;
    white-space: nowrap;
}
.rtdb-last-sync:empty { display: none; }
.rtdb-status .rtdb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.rtdb-status.rtdb-online {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.rtdb-status.rtdb-online .rtdb-dot {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    animation: rtdb-pulse 2s ease-in-out infinite;
}
.rtdb-status.rtdb-offline {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.rtdb-status.rtdb-offline .rtdb-dot {
    background: #f59e0b;
}
@keyframes rtdb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
[data-theme="dark"] .rtdb-status.rtdb-online {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}
[data-theme="dark"] .rtdb-status.rtdb-offline {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.dashboard-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--primary);
}

[data-theme="dark"] .dashboard-header h2 {
    color: #5fcfae;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}

.grid-item {
    background: white;
    border-radius: 15px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.grid-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.grid-item h4 {
    margin-bottom: 0.5rem;
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
}

.progress-circle {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    position: relative;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    font-variant-numeric: tabular-nums;
}

/* Button UI */
.btn {
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-md);
    font-weight: var(--weight-semi);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
    transform: translateY(-1px);
}


.btn-tiny {
    padding: 0.4rem 0.8rem;
    font-size: var(--text-xs);
    border-radius: 8px;
    min-height: 32px; /* ensure reasonable touch target */
}

.btn-refresh {
    background: #e7f5ff !important;
    color: #004a99 !important;
    border: 1px solid #a5d8ff !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-bold) !important;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.refresh-icon-wrapper {
    background: #adb5bd;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    /* Fix for rotation */
    align-items: center;
    justify-content: center;
    color: white;
}

.refresh-icon-wrapper i {
    width: 12px !important;
    height: 12px !important;
}


.btn-secondary {
    background: #006ce6;
    color: white;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 2px solid #333;
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 60px;
    font-weight: var(--weight-semi);
}

.btn-warning {
    background: #fff;
    color: var(--error-color);
    border: 1px solid rgba(239, 68, 68, 0.2);
    box-shadow: none;
}

.btn-warning:hover {
    background: rgba(239, 68, 68, 0.05);
}

.btn-large {
    padding: 1rem 1.5rem;
    font-size: var(--text-lg);
    width: 100%;
}


.btn-full {
    width: 100%;
}

.btn-whatsapp {
    background-color: #25d366 !important;
    color: white !important;
}

.btn-portal {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}
.dark .btn-portal {
    background-color: #0c4a6e !important;
    color: #7dd3fc !important;
    border: 1px solid #0369a1 !important;
}

.dispatch-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Navigation */
.app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--glass-border);
    z-index: 500;
}

[data-theme="dark"] .app-nav {
    background: rgba(11, 17, 32, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    padding: 6px 8px;
    border-radius: 12px;
    transition: var(--transition-spring);
    background: transparent;
    border: none;
    flex: 1;
    position: relative;
    letter-spacing: 0.2px;
}

.nav-item.active {
    color: var(--primary);
}

/* Bold active indicator — glowing dot above icon */
.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4);
    animation: navIndicatorIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes navIndicatorIn {
    from { width: 0; opacity: 0; }
    to   { width: 20px; opacity: 1; }
}

.nav-item.active i {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 6px rgba(var(--primary-rgb), 0.3));
}


/* Base Modal & Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 11000;
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.circle {
    transition: stroke-dasharray 1s ease;
}

/* Guest List in Modal */
.dispatch-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.guest-list {
    margin-top: 1rem;
}

.guest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.guest-card:hover {
    background: #f1f5f9;
}

.guest-main-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
    /* [v2.6.6] Force left alignment for guest details */
}

.guest-name {
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    color: var(--text-dark);
    cursor: pointer;
    text-decoration: underline dotted #cbd5e1;
    transition: color 0.2s;
}

.guest-name:hover {
    color: var(--primary);
}

.guest-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.check-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    background: white;
}

.check-btn.checked {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.modal-content {
    background: white;
    width: 100%;
    border-radius: 25px 25px 0 0;
    padding: 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
    /* Revert to single scrollable container */
}

.modal-header {
    position: sticky;
    top: -1.5rem;
    /* Match modal-content padding to stick to top edge */
    background: white;
    /* Cover content scrolling underneath */
    margin: -0.5rem -0.5rem 1rem -0.5rem;
    /* Slight offset for better visual padding while sticking */
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    z-index: 10;
}

.close-modal {
    background: #e5e7eb;
    color: #111827;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.close-modal:hover {
    background: #dc2626;
    color: #fff;
    transform: scale(1.05);
}
.close-modal:focus-visible {
    outline: 2px solid #2f7d6c;
    outline-offset: 2px;
}
[data-theme="dark"] .close-modal {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}
[data-theme="dark"] .close-modal:hover {
    background: #dc2626;
    color: #fff;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0.5rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.divider:not(:empty)::before {
    margin-right: .5em;
}

.divider:not(:empty)::after {
    margin-left: .5em;
}

/* [v5.5.0] Scroll hint for password module */
@keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%       { transform: translateY(6px); opacity: 1; }
}

.scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0.75rem auto 0.25rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    user-select: none;
}

.scroll-hint i {
    animation: bounceDown 1.4s ease-in-out infinite;
    width: 20px;
    height: 20px;
}

.scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
}

/* [v3.1] Password Zone — standalone feature card */
.pwd-zone {
    width: 88%;
    max-width: 400px;
    margin: 2rem auto 0.5rem;
    padding: 1.25rem 1rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pwd-zone-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.75rem;
    padding-left: 2px;
}

.pwd-zone-label i {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.pwd-input-area {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-primary);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    width: 100%;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pwd-input-area:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.pwd-field {
    flex: 1;
    border: none;
    padding: 0.75rem 0.5rem;
    font-size: var(--text-lg);
    font-family: var(--font-sans);
    letter-spacing: 0.3rem;
    text-align: center;
    outline: none;
    background: transparent;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    /* [v2.6.6] Prevent overflow */
}

.pwd-field:focus {
    outline: none;
}


/* Search Styles */
.search-area {
    margin-bottom: 0.5rem;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-field {
    width: 100%;
    padding: 0.8rem 2.5rem;
    border-radius: 12px;
    border: 2px solid #ddd;
    font-size: var(--text-md);
    font-family: var(--font-sans);
    transition: var(--transition);
}

.search-field:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.1);
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    width: 18px !important;
    height: 18px !important;
}

.clear-btn {
    position: absolute;
    right: 12px;
    background: #eee;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: #666;
}

.search-area-dedicated {
    padding: 1.5rem 1rem;
}

.search-area-dedicated .search-input-wrapper {
    margin-bottom: 1rem;
}

.search-results-list {
    background: white;
    border-radius: 12px;
    margin-top: 0.5rem;
    max-height: 420px;
    /* Increased from 250px */
    overflow-y: auto;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
    margin-bottom: 2rem;
    /* Avoid nav bar overlap */
}

.name-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.btn-danger {
    background: #ff4d4f;
    color: white;
}

.btn-success {
    background: #52c41a;
    color: white;
}

.search-result-item {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    text-align: left !important;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8fafc;
}

.search-result-item.arrived {
    background: #f1fcf5;
}

.result-name {
    font-weight: var(--weight-bold);
    color: var(--text-main);
    font-size: var(--text-base);
    text-align: left;
}

.result-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: left;
}

.no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.text-success {
    color: var(--success-color);
}

/* Success/Feedback Overlay Styles */
.feedback-header {
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Subtle radial glow behind the icon */
.feedback-header::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.feedback-header.success {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 50%, #10b981 100%);
}

.feedback-header.warning {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #d97706 100%);
}

.feedback-header.error {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 50%, #dc2626 100%);
}

.feedback-header h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.feedback-header p {
    font-size: var(--text-base);
    opacity: 0.9;
    font-weight: var(--weight-medium);
}


.name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}

/* [v7.18.16] 報到成功畫面 — 英文姓名副標 */
.guest-name-eng {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    margin: -2px 0 8px 0;
    letter-spacing: 0.01em;
}

.badge-tag {
    background: #fff0f6;
    color: #f06595;
    border: 1px solid #ffdeeb;
    padding: 2px 8px;
    font-size: 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.seat-info-card {
    background: linear-gradient(135deg, #245a4b 0%, #2f7d6c 55%, #34a085 100%);
    border: none;
    border-radius: 12px;
    padding: 0;
    margin: 0 1.5rem 1.5rem;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(47, 125, 108, 0.35);
}

.remarks-display-card {
    background: #fff9eb;
    border: 2px solid #fde68a;
    border-radius: 12px;
    padding: 1rem;
    margin: 0 1.5rem 1.5rem;
    text-align: left;
}

[data-theme="dark"] .remarks-display-card {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.25);
}


.remarks-display-card label {
    display: block;
    color: #92400e;
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .remarks-display-card label {
    color: #fde68a;
}

#guestRemarksDisplay {
    color: #b45309;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    word-break: break-word;
    line-height: 1.4;
}

[data-theme="dark"] #guestRemarksDisplay {
    color: #fcd34d;
}

/* [v7.21.5] 膳食要求 card — orange accent，與餐廳服務流程相關 */
.meal-display-card {
    background: #fff7ed;
    border: 2px solid #fdba74;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin: 0 1.5rem 1.5rem;
    text-align: left;
}
[data-theme="dark"] .meal-display-card {
    background: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.35);
}
.meal-display-card label {
    display: block;
    color: #9a3412;
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
    margin-bottom: 0.55rem;
}
[data-theme="dark"] .meal-display-card label {
    color: #fed7aa;
}
.meal-pill {
    display: inline-block;
    background: #ea580c;
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
}
.meal-pill.hidden { display: none; }
[data-theme="dark"] .meal-pill {
    background: #f97316;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.35);
}
.dietary-note {
    margin-top: 0.55rem;
    color: #9a3412;
    font-size: 0.92rem;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.4;
}
.dietary-note.hidden { display: none; }
[data-theme="dark"] .dietary-note {
    color: #fed7aa;
}

/* [v7.30.0] 人情/禮金 藍旗 toggle 按鈕 — scan overlay + profile 共用 */
.scan-gift-area {
    margin: 0.75rem auto 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.gift-flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
}
.gift-flag-btn i { width: 18px; height: 18px; }
.gift-flag-btn:hover { background: #dbeafe; }
.gift-flag-btn:active { transform: scale(0.97); }
/* ON 狀態 — 實心藍旗 */
.gift-flag-btn.gift-on {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
}
.gift-flag-btn.gift-on:hover { background: #1d4ed8; }
/* Dark mode */
[data-theme="dark"] .gift-flag-btn {
    background: rgba(59, 130, 246, 0.14);
    border-color: #3b82f6;
    color: #93c5fd;
}
[data-theme="dark"] .gift-flag-btn:hover { background: rgba(59, 130, 246, 0.24); }
[data-theme="dark"] .gift-flag-btn.gift-on {
    background: #2563eb;
    border-color: #3b82f6;
    color: #ffffff;
}
/* [v7.31.0] 人情金額輸入 */
.gift-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gift-row .gift-flag-btn { flex: 0 0 auto; }
.gift-amount-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    border: 1.5px solid #3b82f6;
    border-radius: 10px;
    padding: 4px 10px;
    min-height: 44px;
}
.gift-amount-wrap.hidden { display: none; }
.gift-amount-prefix {
    font-weight: 700;
    color: #1d4ed8;
    font-size: 0.9rem;
}
.gift-amount-input {
    border: none;
    background: transparent;
    width: 88px;
    font-size: 1rem;
    font-weight: 700;
    color: #1d4ed8;
    outline: none;
    padding: 4px 2px;
}
.gift-amount-input::placeholder { font-weight: 400; color: #93c5fd; }
[data-theme="dark"] .gift-amount-wrap {
    background: rgba(59, 130, 246, 0.14);
    border-color: #3b82f6;
}
[data-theme="dark"] .gift-amount-prefix,
[data-theme="dark"] .gift-amount-input { color: #93c5fd; }

/* [v7.33.0] 黃色標記 toggle 按鈕 — 同 .gift-flag-btn 一致結構，黃主題 */
.mark-yellow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1.5px solid #d97706;
    background: #fffbeb;
    color: #b45309;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
}
.mark-yellow-btn i { width: 18px; height: 18px; }
.mark-yellow-btn:hover { background: #fef3c7; }
.mark-yellow-btn:active { transform: scale(0.97); }
.mark-yellow-btn.mark-yellow-on {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32);
}
.mark-yellow-btn.mark-yellow-on:hover { background: #d97706; }
[data-theme="dark"] .mark-yellow-btn {
    background: rgba(245, 158, 11, 0.14);
    border-color: #d97706;
    color: #fcd34d;
}
[data-theme="dark"] .mark-yellow-btn:hover { background: rgba(245, 158, 11, 0.24); }
[data-theme="dark"] .mark-yellow-btn.mark-yellow-on {
    background: #f59e0b;
    border-color: #d97706;
    color: #1c1917;
}

/* (removed: was a dead CSS typo selector - #guestRemark.seat-info-card) */

.seat-info-card label {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    padding: 0.65rem 1rem 0;
    margin-bottom: 0;
}

.seat-info-card .seat-code {
    display: block;
    width: 100%;
    background: transparent;
    color: #ffffff;
    font-size: 2.8rem; /* [v7.18.17] -20% from 3.5rem to fit long table names */
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    padding: 0.1rem 1rem 0.8rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* --- Overlay guest-info visual hierarchy --- */
#guestNameDisplay {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    margin: 0;
}

#guestCompanyDisplay {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.15rem;
    margin-bottom: 0;
}

/* Duplicate check-in time pill */
#feedbackSubtitle:not(:empty) {
    display: inline-block;
    margin-top: 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02rem;
}

.overlay-controls {
    padding: 0 1.5rem;
}

.success-card {
    background: var(--bg-secondary);
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    animation: premiumPop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes premiumPop {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(24px);
    }
    60% {
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


.powered-by {
    text-align: center;
    font-size: var(--text-xs);
    color: #adb5bd;
    margin-top: 1rem;
    padding-bottom: 0.5rem;
    letter-spacing: 1.5px;
    font-weight: var(--weight-medium);
}

/* (duplicate removed — see branding link styles block) */

/* --- Auth View (v5.1.0) --- */
.auth-view {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-container {
    max-width: 400px;
    width: 100%;
    margin: 40px auto;
    padding: 2.5rem 2rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-icon-badge {
    width: 64px;
    height: 64px;
    background: var(--primary-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    color: white;
    filter: drop-shadow(0 8px 16px rgba(47, 125, 108, 0.25));
}

.auth-icon-badge i {
    width: 32px;
    height: 32px;
}

.auth-header h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.auth-header p {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.auth-methods {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    text-align: left;
    margin-bottom: 1.25rem;
}

.input-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.input-group input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: var(--text-md);
    font-family: var(--font-sans);
    transition: var(--transition);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(47, 125, 108, 0.1);
}

.btn-google {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: white !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-sm);
}

.auth-register-hint {
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    opacity: 0.85;
}

.btn-google:hover {
    background: #f8fafc !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.google-icon {
    width: 18px;
    height: 18px;
}


.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.divider span {
    padding: 0 10px;
}


.success-header {
    background: var(--success-color);
    color: white;
    padding: 1.5rem;
    text-align: center;
}

.icon-success {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

.guest-info,
.seat-info {
    padding: 1.5rem;
    text-align: center;
}

label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: var(--weight-medium);
}

.seat-code {
    background: #eef2ff;
    color: var(--primary);
    font-size: 2.4rem; /* [v7.18.17] -20% from 3rem */
    font-weight: 800;
    text-align: center;
    border-radius: 15px;
    padding: 1rem;
    border: 1px solid #d6ece6;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.modal-content>.guest-list,
.modal-content>.profile-detail-area {
    flex: 1;
    overflow-y: auto;
    padding-top: 0.5rem;
}

.hidden {
    display: none !important;
}

.profile-detail-area {
    padding: 1.5rem 0.5rem;
}

.profile-item {
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f1f5f9;
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-item label {
    display: block;
    font-size: var(--text-xs);
    color: #64748b;
    text-transform: uppercase;
    font-weight: var(--weight-semi);
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
    text-align: left !important;
}

.profile-item div {
    font-size: var(--text-lg);
    color: #0f172a;
    font-weight: var(--weight-semi);
    text-align: left !important;
}

.result-info {
    flex: 1;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dispatch-filter-bar .btn {
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.dispatch-filter-bar .btn.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-md);
}

.missing-phone-warning {
    color: #dc2626;
    font-size: 0.7rem;
    margin-top: 4px;
    font-weight: 500;
}


#guestModal {
    z-index: 11000 !important;
}

#profileModal {
    z-index: 12000 !important;
}

#successOverlay {
    z-index: 13000 !important;
}


/* ==========================================
   [v1.0.2] Landing Page Styles
   ========================================== */

#landingView {
    max-width: 100%;
    padding: 0;
}

/* Landing Nav */
/* ==========================================
   Landing Page v4.0 — FavCRM-Inspired SaaS
   ========================================== */

#landingView {
    --lp-bg: #faf9f6;
    --lp-text: #1c1917;
    --lp-muted: #78716c;
    --lp-border: #e7e5e4;
    --lp-surface: #f5f5f4;
    --lp-tag-bg: #f5f5f4;
    --lp-tag-text: #57534e;
    /* Cathay-style refined jade system — one restrained green family
       (deep-pine actions + muted jade accents + pale sage bands on white),
       deliberately NOT a bright/saturated eco-green. Blue is retired on the
       landing so the whole page reads as a single premium hue, and it stays
       distinct from Vellum's champagne-gold-on-black. */
    --lp-accent: #2f7d6c;              /* muted jade-teal — icons, borders, links */
    --lp-accent-2: #1c4035;            /* deep pine — primary actions */
    --lp-gradient: #2f7d6c;
    --lp-jade: #2f7d6c;
    --lp-jade-deep: #1c4035;           /* Cathay-style dark pine CTA */
    --lp-jade-2: #225f51;              /* deep jade — solid badge bg, AA-safe w/ white */
    --lp-jade-ink: #1a5446;            /* AA-safe jade text on cream */
    --lp-jade-grad: linear-gradient(120deg, #3a9080 0%, #2f7d6c 55%, #1f5e50 100%);
    --lp-jade-soft: rgba(47, 125, 108, 0.10);
    --lp-jade-border: rgba(47, 125, 108, 0.38);
    --lp-sage: #edf1ee;                /* pale sage section tint (Cathay soft band) */
    --lp-glass: rgba(28, 25, 23, 0.03);
    --lp-glass-border: rgba(28, 25, 23, 0.06);
    --lp-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.03);
    --lp-card-hover-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.06);
    --lp-section-pad: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 5vw, 4rem);
    font-family: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
    background: var(--lp-bg);
    color: var(--lp-text);
    text-align: left;
    overflow-x: hidden;
}

/* Landing page is intentionally always light (warm cream) regardless of app
   dark mode — keeps the banquet brand bright + lets champagne gold shine. */
[data-theme="dark"] #landingView {
    --lp-bg: #faf9f6;
    --lp-text: #1c1917;
    --lp-muted: #78716c;
    --lp-border: #e7e5e4;
    --lp-surface: #f5f5f4;
    --lp-tag-bg: #f5f5f4;
    --lp-tag-text: #57534e;
    --lp-glass: rgba(28, 25, 23, 0.03);
    --lp-glass-border: rgba(28, 25, 23, 0.06);
    --lp-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.03);
    --lp-card-hover-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.06);
}


/* --- Nav --- */
#landingView .landing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem clamp(1.5rem, 5vw, 4rem);
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--lp-bg) 85%, transparent);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border-bottom: 1px solid var(--lp-border);
}

#landingView .landing-logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lp-text);
    letter-spacing: -0.5px;
    text-decoration: none;
}

#landingView .landing-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

#landingView .landing-nav-links a {
    text-decoration: none;
    color: var(--lp-muted);
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.2s;
}

#landingView .landing-nav-links a:hover {
    color: var(--lp-text);
}

#landingView .landing-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lp-text);
    border: none;
    color: var(--lp-bg);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 1.15rem;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

#landingView .landing-login-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* --- Hero --- */
#landingView .landing-hero {
    padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

/* Orbs removed — clean hero */

#landingView .landing-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lp-jade-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 4px;
    background: var(--lp-jade-soft);
    border: 1px solid var(--lp-jade-border);
    position: relative;
    z-index: 1;
}

#landingView .landing-hero h1 {
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--lp-text);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

#landingView .landing-hero-accent {
    background: var(--lp-jade-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--lp-jade); /* fallback for non-clip browsers */
    /* [v7.27.8] 副題保持一行（婚宴 · 企業晚宴 · 協會年會），字級隨闊度縮放避免換行 */
    display: inline-block;
    white-space: nowrap;
    font-size: clamp(1.4rem, 5.4vw, 3.4rem);
}

#landingView .landing-hero > p {
    font-size: clamp(0.95rem, 2.5vw, 1.08rem);
    color: var(--lp-muted);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

#landingView .landing-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* ════════ [animate] Landing motion layer ════════ */

/* Hero entrance choreography — staggered fade + slide-up on load */
#landingView .landing-eyebrow,
#landingView .landing-hero h1,
#landingView .landing-hero > p,
#landingView .landing-hero-cta {
    opacity: 0;
    animation: lpHeroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#landingView .landing-eyebrow      { animation-delay: 0.05s; }
#landingView .landing-hero h1      { animation-delay: 0.18s; }
#landingView .landing-hero > p     { animation-delay: 0.34s; }
#landingView .landing-hero-cta     { animation-delay: 0.48s; }

@keyframes lpHeroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* CTA primary — refined hover lift (no bounce) */
#landingView .landing-cta-primary {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
#landingView .landing-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(31, 94, 80, 0.28);
}
#landingView .landing-cta-primary:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* Flowing emerald wave divider (parallax: two layers, different speeds) */
#landingView .landing-wave {
    position: relative;
    width: 100%;
    height: clamp(56px, 8vw, 104px);
    margin-top: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    pointer-events: none;
}
#landingView .landing-wave-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    will-change: transform;
}
#landingView .landing-wave-back  { animation: lpWaveDrift 22s linear infinite; }
#landingView .landing-wave-front { animation: lpWaveDrift 14s linear infinite; }

@keyframes lpWaveDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Accessibility — honour reduced-motion: freeze waves, show hero instantly */
@media (prefers-reduced-motion: reduce) {
    #landingView .landing-eyebrow,
    #landingView .landing-hero h1,
    #landingView .landing-hero > p,
    #landingView .landing-hero-cta {
        opacity: 1;
        animation: none;
        transform: none;
    }
    #landingView .landing-wave-back,
    #landingView .landing-wave-front {
        animation: none;
    }
    #landingView .landing-cta-primary {
        transition: none;
    }
}

#landingView .landing-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lp-jade-deep);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 12px rgba(28, 64, 53, 0.28);
}

#landingView .landing-cta-primary:hover {
    background: #264f41;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(28, 64, 53, 0.36);
}

#landingView .landing-cta-primary:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(28, 64, 53, 0.22);
}

#landingView .landing-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lp-muted);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
}

#landingView .landing-cta-ghost:hover {
    color: var(--lp-text);
    gap: 8px;
}

/* --- Stats Strip --- */
#landingView .landing-stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--lp-jade-border);
    border-bottom: 1px solid var(--lp-border);
}

#landingView .landing-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

#landingView .landing-stat-item strong {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    color: var(--lp-text);
}

#landingView .landing-stat-item span {
    font-size: 0.75rem;
    color: var(--lp-muted);
    font-weight: 500;
}

#landingView .landing-stat-sep {
    width: 1px;
    height: 32px;
    background: var(--lp-border);
    margin: 0 clamp(0.5rem, 2vw, 1.5rem);
    flex-shrink: 0;
}

/* --- Section Shared --- */
#landingView .landing-section-head {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

#landingView .landing-section-head-center {
    text-align: center;
}

#landingView .landing-section-head-center .landing-section-desc {
    margin-left: auto;
    margin-right: auto;
}

#landingView .landing-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--lp-jade-ink);
    background: var(--lp-jade-soft);
    padding: 0.3rem 0.85rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

#landingView .landing-section-head h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--lp-text);
}

#landingView .landing-section-desc {
    font-size: 0.92rem;
    color: var(--lp-muted);
    line-height: 1.6;
    margin-top: 0.75rem;
    max-width: 480px;
}

/* --- Features Card Grid --- */
#landingView .landing-features {
    padding: var(--lp-section-pad);
    max-width: 1080px;
    margin: 0 auto;
}

#landingView .landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

#landingView .landing-feature-card {
    padding: 1.75rem;
    border-radius: 14px;
    border: 1px solid var(--lp-border);
    background: var(--lp-glass);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s;
    box-shadow: var(--lp-card-shadow);
    overflow: hidden;
}

#landingView .landing-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lp-accent);
    opacity: 0;
    transition: opacity 0.3s;
}

#landingView .landing-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-card-hover-shadow);
    border-color: color-mix(in srgb, var(--lp-accent) 25%, var(--lp-border));
}

/* Bookend cards: card 1 (wide-left) and card 6 (wide-right) */
#landingView .landing-feature-card:nth-child(1),
#landingView .landing-feature-card:nth-child(6) {
    grid-column: span 2;
    padding: 2rem 2.25rem;
    background: var(--lp-sage);
    border-color: color-mix(in srgb, var(--lp-accent) 18%, var(--lp-border));
}

#landingView .landing-feature-card:hover::before {
    opacity: 1;
}

#landingView .landing-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--lp-accent) 8%, transparent);
    color: var(--lp-accent);
}

#landingView .landing-feature-icon svg {
    width: 20px;
    height: 20px;
}

#landingView .landing-feature-card h3 {
    font-size: 1rem;
    font-weight: 650;
    margin-bottom: 0.5rem;
    color: var(--lp-text);
}

#landingView .landing-feature-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

#landingView .landing-feature-card-head h3 {
    margin-bottom: 0;
}

#landingView .landing-feature-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    background: var(--lp-accent);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

#landingView .landing-feature-card p {
    font-size: 0.84rem;
    color: var(--lp-muted);
    line-height: 1.6;
}

/* --- How It Works --- */
#landingView .landing-how-it-works {
    padding: var(--lp-section-pad);
    background: var(--lp-surface);
    max-width: 100%;
}

#landingView .landing-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 860px;
    margin: 0 auto;
}

#landingView .landing-step-item {
    flex: 1;
    text-align: center;
    max-width: 240px;
    padding: 0 1rem;
}

#landingView .landing-step-number {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--lp-accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(28, 64, 53, 0.22);
}

#landingView .landing-step-item h3 {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--lp-text);
    margin-bottom: 0.4rem;
}

#landingView .landing-step-item p {
    font-size: 0.84rem;
    color: var(--lp-muted);
    line-height: 1.55;
}

#landingView .landing-step-arrow {
    display: flex;
    align-items: center;
    padding-top: 0.75rem;
    color: var(--lp-tag-text);
    flex-shrink: 0;
}

#landingView .landing-step-arrow svg {
    width: 20px;
    height: 20px;
}

/* --- Pricing --- */
#landingView .landing-pricing {
    padding: var(--lp-section-pad);
    max-width: 1200px;
    margin: 0 auto;
}

#landingView .landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: start;
}

/* [v7.25.0] 3-column variant for simplified pricing (Free / Lite / Pro) */
#landingView .landing-pricing-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1100px;
    margin: 0 auto;
    gap: 1.25rem;
}

/* Billing toggle (Monthly / Annual) */
#landingView .landing-billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
}
#landingView .billing-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lp-muted, #94a3b8);
    cursor: pointer;
    transition: color 0.2s;
}
#landingView .billing-label-active {
    color: var(--lp-heading, #f1f5f9);
}
#landingView .billing-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #334155;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
#landingView .billing-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
#landingView .billing-switch.annual .billing-switch-thumb {
    transform: translateX(20px);
}
#landingView .billing-switch.annual {
    background: var(--lp-accent, #2f7d6c);
}
#landingView .billing-save-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

/* [v7.25.0] Plan comparison table removed — Free / Lite / Pro 3-card view replaces it */

#landingView .landing-plan-card {
    padding: 2rem 1.75rem;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--lp-bg);
    box-shadow: var(--lp-card-shadow);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#landingView .landing-plan-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-card-hover-shadow);
}

#landingView .landing-plan-popular {
    border: 2px solid var(--lp-jade);
    background: linear-gradient(180deg, var(--lp-jade-soft), var(--lp-bg) 120px);
    transform: scale(1.03);
    z-index: 1;
}

#landingView .landing-plan-popular:hover {
    transform: scale(1.03) translateY(-3px);
}

#landingView .landing-popular-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lp-jade-2);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(10, 96, 72, 0.35);
}

#landingView .landing-plan-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lp-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#landingView .landing-plan-price {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
    color: var(--lp-text);
    line-height: 1;
}

#landingView .landing-plan-price span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lp-muted);
    letter-spacing: 0;
}

#landingView .landing-plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex: 1;
}

#landingView .landing-plan-card ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.45rem 0;
    font-size: 0.84rem;
    color: var(--lp-text);
}

#landingView .landing-check-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--lp-accent);
}

#landingView .landing-plan-popular .landing-check-icon {
    color: var(--lp-jade);
}

#landingView .landing-plan-btn {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    background: transparent;
    color: var(--lp-text);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#landingView .landing-plan-btn:hover {
    background: var(--lp-text);
    color: var(--lp-bg);
    border-color: var(--lp-text);
    transform: translateY(-1px);
}

#landingView .landing-plan-btn-fill {
    background: var(--lp-jade-deep);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(28, 64, 53, 0.22);
}

#landingView .landing-plan-btn-fill:hover {
    background: #264f41;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(28, 64, 53, 0.32);
}

/* --- Pro plan card (slate/dark — distinct from orange Lite) --- */
#landingView .landing-plan-pro {
    border: 2px solid #334155;
    background: var(--lp-bg);
}

#landingView .landing-plan-pro:hover {
    transform: translateY(-3px);
    border-color: #1e293b;
}

#landingView .landing-pro-badge {
    background: #1e293b;
}

#landingView .landing-plan-pro .landing-check-icon {
    color: #475569;
}

#landingView .landing-plan-btn-pro {
    background: #1e293b;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(30, 41, 59, 0.25);
}

#landingView .landing-plan-btn-pro:hover {
    background: #0f172a;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.35);
    transform: translateY(-1px);
}

/* --- Business plan card (purple) --- */
#landingView .landing-plan-business {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--lp-bg), var(--lp-bg)),
                      linear-gradient(135deg, #2f7d6c, #1c4035);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

#landingView .landing-plan-business:hover {
    transform: translateY(-3px);
}

#landingView .landing-business-badge {
    background: #1e293b;
    color: #7fe3c0;             /* light jade on slate — ties into the jade palette */
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.3);
}

#landingView .landing-plan-business .landing-check-icon {
    color: #1c4035;
}

#landingView .landing-plan-btn-business {
    background: linear-gradient(135deg, #2f7d6c, #1c4035);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(47, 125, 108, 0.3);
}

#landingView .landing-plan-btn-business:hover {
    opacity: 0.92;
    border-color: transparent;
    background: linear-gradient(135deg, #2f7d6c, #1c4035);
    color: #fff;
    box-shadow: 0 4px 16px rgba(47, 125, 108, 0.4);
    transform: translateY(-1px);
}

/* --- [v7.15.6] Event Pass card (orange, one-off) --- */
#landingView .landing-plan-event {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--lp-bg), var(--lp-bg)),
                      linear-gradient(135deg, #c2410c, #ea580c);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

#landingView .landing-plan-event:hover {
    transform: translateY(-3px);
}

#landingView .landing-event-badge {
    background: linear-gradient(135deg, #c2410c, #ea580c);
}

#landingView .landing-plan-event .landing-check-icon {
    color: #ea580c;
}

#landingView .landing-plan-oneoff-note {
    font-size: 0.78rem;
    color: #ea580c;
    font-weight: 600;
    margin: -0.5rem 0 1rem 0;
}

#landingView .landing-plan-btn-event {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.3);
}

#landingView .landing-plan-btn-event:hover {
    opacity: 0.92;
    border-color: transparent;
    background: linear-gradient(135deg, #c2410c, #ea580c);
    color: #fff;
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.4);
    transform: translateY(-1px);
}

/* Responsive: 5-col pricing grid collapses gracefully */
@media (max-width: 1100px) {
    #landingView .landing-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* [v7.25.0] 3-col variant keeps 3 columns until 900px (then 2-col) */
    #landingView .landing-pricing-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    #landingView .landing-pricing-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}
/* [v7.20.0] Plan tagline (under price) */
#landingView .landing-plan-tagline {
    font-size: 0.78rem;
    color: var(--lp-muted, #94a3b8);
    margin-top: -0.4rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    min-height: 2em;
}
#landingView .landing-plan-period {
    font-size: 0.78rem;
    color: var(--lp-muted, #94a3b8);
    font-weight: 400;
}

/* [v7.20.0] First Event Free banner — sits between section header and pricing grid */
#landingView .landing-first-free {
    background: linear-gradient(135deg, #2f7d6c 0%, #1c4035 100%);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin: 0 auto 2.5rem;
    max-width: 920px;
    box-shadow: 0 8px 32px rgba(28, 64, 53, 0.26);
    position: relative;
    overflow: hidden;
}
#landingView .landing-first-free::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 20%, rgba(255,255,255,0.18) 0%, transparent 60%);
    pointer-events: none;
}
#landingView .landing-first-free-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
#landingView .landing-first-free-text {
    flex: 1;
    min-width: 280px;
    color: #fff;
}
#landingView .landing-first-free-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    color: #fff;
    margin-bottom: 0.5rem;
    backdrop-filter: blur(8px);
}
#landingView .landing-first-free h3 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
#landingView .landing-first-free p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}
#landingView .landing-first-free-btn {
    background: #fff;
    color: #1c4035;
    border: none;
    padding: 0.75rem 1.4rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#landingView .landing-first-free-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: #264f41;
}

/* [v7.20.1] Floorplan teaser — login-gated, anti-copy */
#landingView .landing-floorplan-demo {
    padding: var(--lp-section-pad);
    background: var(--lp-sage);
    border-top: 1px solid var(--lp-border);
    border-bottom: 1px solid var(--lp-border);
}
#landingView .landing-fp-teaser {
    max-width: 920px;
    margin: 2rem auto 0;
    text-align: center;
}
#landingView .landing-fp-teaser-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
#landingView .landing-fp-feat {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    box-shadow: var(--lp-card-shadow);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s;
}
#landingView .landing-fp-feat:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-card-hover-shadow);
    border-color: color-mix(in srgb, var(--lp-accent) 28%, var(--lp-border));
}
#landingView .landing-fp-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
    background: var(--lp-jade-soft);
    color: var(--lp-jade);
}
#landingView .landing-fp-icon i,
#landingView .landing-fp-icon svg {
    width: 22px;
    height: 22px;
}
#landingView .landing-fp-feat strong {
    font-size: 0.98rem;
    color: var(--lp-text);
    font-weight: 650;
    margin-top: 0.1rem;
}
#landingView .landing-fp-feat span {
    font-size: 0.8rem;
    color: var(--lp-muted);
    line-height: 1.45;
}
#landingView .landing-fp-cta-btn {
    background: linear-gradient(135deg, #2f7d6c 0%, #1c4035 100%);
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(28, 64, 53, 0.3);
}
#landingView .landing-fp-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(28, 64, 53, 0.4);
}
#landingView .landing-fp-note {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--lp-muted, #94a3b8);
}
@media (max-width: 760px) {
    #landingView .landing-fp-teaser-features {
        grid-template-columns: 1fr;
    }
}


/* CTA Banner */
#landingView .landing-cta-banner {
    padding: var(--lp-section-pad);
    background: var(--lp-surface);
    position: relative;
    overflow: hidden;
}

#landingView .landing-cta-banner-inner {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#landingView .landing-cta-banner h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--lp-text);
    margin-bottom: 0.75rem;
}

#landingView .landing-cta-banner p {
    font-size: 0.92rem;
    color: var(--lp-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

#landingView .landing-cta-banner-btn {
    box-shadow: 0 3px 16px rgba(28, 64, 53, 0.3);
}

/* --- Footer --- */
#landingView .landing-footer {
    padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
    border-top: 1px solid var(--lp-border);
}

#landingView .landing-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}

#landingView .landing-footer-logo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-text);
    text-decoration: none;
    letter-spacing: -0.5px;
}

#landingView .landing-footer p {
    font-size: 0.78rem;
    color: var(--lp-muted);
}

/* Support note below pricing grid */
#landingView .landing-support-note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--lp-muted);
}
#landingView .landing-support-note a {
    color: var(--lp-accent);
    font-weight: 600;
    text-decoration: none;
}
#landingView .landing-support-note a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Footer inner: column on narrow screens */
@media (max-width: 600px) {
    #landingView .landing-footer-inner {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

#landingView .landing-footer a {
    color: var(--lp-text);
    text-decoration: none;
    font-weight: 600;
}

#landingView .landing-footer a:hover {
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    #landingView .landing-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset bookend spans at tablet — all cards equal */
    #landingView .landing-feature-card:nth-child(1),
    #landingView .landing-feature-card:nth-child(6) {
        grid-column: span 1;
        padding: 1.75rem;
        background: var(--lp-glass);
        border-color: var(--lp-border);
    }

    #landingView .landing-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #landingView .landing-plan-popular {
        transform: none;
        order: -1;
    }

    #landingView .landing-plan-popular:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 640px) {
    #landingView .landing-nav-links a:not(.landing-login-btn) {
        display: none;
    }

    #landingView .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    #landingView .landing-stats-strip {
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    #landingView .landing-stat-sep {
        display: none;
    }

    #landingView .landing-stat-item {
        min-width: 40%;
    }

    #landingView .landing-steps {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    #landingView .landing-step-arrow {
        transform: rotate(90deg);
        padding-top: 0;
    }

    #landingView .landing-step-item {
        max-width: 100%;
    }

    #landingView .landing-hero-orb { display: none; }

    #landingView .landing-footer-inner {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    /* Pricing grid: single column on mobile (overrides the 900px 2-col rule) */
    #landingView .landing-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Branding link styles */
.powered-by strong,
.powered-by-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--weight-bold);
}

.powered-by-link:hover {
    text-decoration: underline;
}

/* ==========================================
   [Phase 8] Planning Hub & Export Styles
   ========================================== */

/* Hub 側邊欄佈局 */
.hub-layout {
    display: flex;
    margin: -8px -12px 0;
    min-height: calc(100dvh - 200px);
    background: white;
}

.hub-sidebar {
    width: 156px;
    flex-shrink: 0;
    background: #fafbfc;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    transition: width 0.2s ease;
    overflow: hidden;
    position: relative;
}

/* 收合/展開拉手 — 側邊欄右邊緣的小箭頭標籤 */
.hub-collapse-tab {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 48px;
    background: #e2e8f0;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s;
}
.hub-collapse-tab:hover { background: #cbd5e1; }
.hub-collapse-arrow {
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #64748b;
    border-left: 2px solid #64748b;
    transform: rotate(-45deg);
    margin-left: 2px;
    transition: transform 0.2s;
}

/* 收合狀態 */
.hub-sidebar.collapsed { width: 44px; }
.hub-sidebar.collapsed .hub-tab-label { display: none; }
.hub-sidebar.collapsed .hub-tab { justify-content: center; padding: 12px 0; gap: 0; }
.hub-sidebar.collapsed .hub-collapse-arrow { transform: rotate(135deg); margin-left: -2px; }

/* 側邊欄內的 hub-tab — 水平排列 icon + 文字 */
.hub-sidebar .hub-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    width: 100%;
    line-height: 1.3;
    text-align: left;
    border-radius: 0;
}

/* [v7.22.1] Improved hover — clearer feedback with subtle left bar preview */
.hub-sidebar .hub-tab:hover:not(.active) {
    background: #e0e7ff;
    color: #1c4035;
    border-left-color: #bfe3d6;
}
.hub-sidebar .hub-tab:focus-visible {
    outline: 2px solid #34a085;
    outline-offset: -3px;
}
.hub-sidebar .hub-tab:hover .hub-tab-icon i {
    color: #2f7d6c;
}

.hub-sidebar .hub-tab.active {
    background: #e9f4f0;
    color: #2f7d6c;
    border-left-color: #34a085;
    font-weight: 600;
    box-shadow: none;
}

.hub-sidebar .hub-tab-icon {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.hub-sidebar .hub-tab-label {
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* [v7.8.1] Beta badge on hub tabs */
.hub-tab-beta {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: #1c4035;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.5;
    opacity: 0.9;
    flex-shrink: 0;
}
.hub-sidebar.collapsed .hub-tab-beta {
    display: none;
}
[data-theme='dark'] .hub-tab-beta {
    background: #2f7d6c;
}

/* ── Beta group — collapsible section ── */
.hub-beta-group-label {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
    transition: opacity 0.15s;
}
.hub-beta-group-label:hover { opacity: 1 !important; }
.hub-beta-pill {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: #1c4035;
    border-radius: 4px;
    line-height: 1.5;
    flex-shrink: 0;
}
[data-theme='dark'] .hub-beta-pill { background: #2f7d6c; }
.hub-beta-chevron {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.hub-beta-chevron i { width: 13px; height: 13px; }
.hub-beta-group-label.open .hub-beta-chevron { transform: rotate(90deg); }
.hub-sidebar.collapsed .hub-beta-pill,
.hub-sidebar.collapsed .hub-beta-chevron { display: none; }

/* Items container — smooth collapse via max-height */
.hub-beta-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.hub-beta-items.open {
    max-height: 600px; /* tall enough for all items */
}
.hub-sidebar.collapsed .hub-beta-items.open {
    max-height: 600px; /* keep visible in collapsed sidebar */
}

/* [v7.7.9] Locked hub tab (Free plan gating) */
.hub-tab-locked {
    opacity: 0.55;
    cursor: pointer;
}
.hub-tab-locked .hub-tab-label::after {
    content: ' 🔒';
    font-size: 0.65em;
    opacity: 0.8;
}
.hub-sidebar.collapsed .hub-tab-locked .hub-tab-label::after {
    display: none;
}

/* Hub upgrade prompt panel */
.hub-upgrade-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 24px;
}
.hub-upgrade-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    max-width: 360px;
}
.hub-upgrade-icon i {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    opacity: 0.35;
}
.hub-upgrade-lock i {
    width: 20px;
    height: 20px;
    color: var(--warning-color);
    margin-top: -20px;
}
.hub-upgrade-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 4px 0 0;
}
.hub-upgrade-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 6px;
}
.hub-upgrade-plans {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.hub-upgrade-plans span {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 99px;
    padding: 3px 10px;
}

/* [v7.21.4] Group labels — quieter so they don't fight active items */
.hub-tab-group-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 16px 14px 4px;
    opacity: 0.55;
}
.hub-tab-group-label:first-of-type {
    padding-top: 8px;
}
.hub-sidebar.collapsed .hub-tab-group-label {
    display: none;
}

/* ── Sidebar Portal tab — action icons ── */
.hub-tab-portal { position: relative; }
.hub-tab-portal-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}
.hub-tab-portal:hover .hub-tab-portal-actions { opacity: 1; }
.hub-tab-portal-open {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    color: var(--text-muted);
    cursor: pointer;
}
.hub-tab-portal-open:hover { color: var(--primary); }
.hub-tab-portal-open i { width: 13px; height: 13px; }
.hub-sidebar.collapsed .hub-tab-portal-actions { display: none; }

/* ── Sidebar toggle button (top of sidebar) ── */
.hub-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.hub-sidebar-toggle:hover {
    color: var(--text-main);
    background: rgba(47, 125, 108, 0.06);
}
.hub-sidebar-toggle i {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

/* [v7.22.1] Toggle icon flips when sidebar is collapsed — affordance for "click to expand" */
.hub-sidebar.collapsed .hub-sidebar-toggle { padding: 10px 0 8px; }
.hub-sidebar.collapsed .hub-sidebar-toggle i {
    transform: scaleX(-1);
}

/* 右側內容區 */
.hub-content {
    flex: 1;
    padding: 20px 28px;
    overflow-y: auto;
    min-width: 0;
    background: var(--bg-secondary);
}

/* ── Report Tab: Anchor + KPI Layout [v7.7.1] ── */
.report-stats-wrap { margin-bottom: 14px; }

.report-hero-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    margin-bottom: 10px;
}
.report-anchor-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.report-anchor-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.report-anchor-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}
.report-kpi-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--success-color);
    border-radius: 10px;
    padding: 14px 14px 12px;
}
.report-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.report-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.report-kpi-pct {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--success-color);
}
.report-kpi-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--success-color);
    line-height: 1;
    margin-bottom: 10px;
}
.report-progress-track {
    height: 5px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.report-progress-bar {
    height: 100%;
    background: var(--success-color);
    border-radius: 3px;
    width: 0%;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.report-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.report-secondary-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.report-secondary-warning { border-left: 3px solid var(--warning-color); }
.report-secondary-info    { border-left: 3px solid var(--primary); }
.report-secondary-danger  { border-left: 3px solid #dc2626; }
.report-secondary-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.report-secondary-warning .report-secondary-value { color: var(--warning-color); }
.report-secondary-info    .report-secondary-value { color: var(--primary); }
.report-secondary-danger  .report-secondary-value { color: #dc2626; }

/* [v7.23.0] Cannot-attend list panel + profile badge */
.report-absent-panel {
    margin: 14px 0 18px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}
.report-absent-panel:empty { display: none; }
.report-absent-empty {
    padding: 14px;
    color: var(--text-muted, #64748b);
    font-size: 0.82rem;
    text-align: center;
}
.report-absent-header {
    padding: 10px 14px;
    background: #fef2f2;
    color: #991b1b;
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #fecaca;
}
.report-absent-header i { width: 16px; height: 16px; }
.report-absent-count {
    margin-left: auto;
    background: #dc2626;
    color: white;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.report-absent-rows {
    display: flex;
    flex-direction: column;
}
.report-absent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-color, #e2e8f0);
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--text-main, #0f172a);
}
.report-absent-row:first-child { border-top: none; }
.report-absent-row:hover { background: rgba(220, 38, 38, 0.06); }
.report-absent-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.report-absent-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.report-absent-name {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
}
.report-absent-meta {
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

/* [v7.31.1] 人情/禮金統計面板（藍主題，鏡像 report-absent-panel） */
.report-gift-panel {
    margin: 14px 0 18px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}
.report-gift-panel:empty { display: none; }
.report-gift-header {
    padding: 10px 14px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #bfdbfe;
    flex-wrap: wrap;
}
.report-gift-header i { width: 16px; height: 16px; }
.report-gift-summary-pills {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.report-gift-total {
    background: #2563eb;
    color: #fff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}
.report-gift-count {
    color: #1d4ed8;
    font-size: 0.74rem;
    font-weight: 600;
}
.report-gift-rows { display: flex; flex-direction: column; }
.report-gift-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-color, #e2e8f0);
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--text-main, #0f172a);
}
.report-gift-row:first-child { border-top: none; }
.report-gift-row:hover { background: rgba(37, 99, 235, 0.06); }
.report-gift-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.report-gift-name { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.report-gift-meta { font-size: 0.74rem; color: var(--text-muted, #64748b); line-height: 1.3; }
.report-gift-amt {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1d4ed8;
    font-variant-numeric: tabular-nums;
}
.report-gift-amt-empty {
    font-weight: 500;
    font-size: 0.74rem;
    color: var(--text-muted, #94a3b8);
}
[data-theme="dark"] .report-gift-header {
    background: rgba(37, 99, 235, 0.14);
    color: #93c5fd;
    border-bottom-color: rgba(59, 130, 246, 0.35);
}
[data-theme="dark"] .report-gift-count { color: #93c5fd; }
[data-theme="dark"] .report-gift-amt { color: #93c5fd; }
[data-theme="dark"] .report-gift-row:hover { background: rgba(59, 130, 246, 0.12); }

/* Profile cannot-attend badge */
.profile-cannot-attend-badge {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 10px;
}

/* [v7.23.4] Seating modal — cannot-attend banner */
.modal-cannot-attend-alert {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* [v7.23.4] Seating modal — cannot-attend row */
.seating-modal-row.seating-row-cannot-attend {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}
.seating-modal-row.seating-row-cannot-attend .guest-name {
    color: #dc2626;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(220, 38, 38, 0.55);
}
.seating-modal-row.seating-row-cannot-attend .guest-meta {
    color: #b91c1c;
    opacity: 0.85;
}
.cannot-attend-mini-badge {
    display: inline-block;
    font-size: 0.95em;
    margin-right: 2px;
}
.cannot-attend-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid #dc2626;
    background: #fef2f2;
    color: #dc2626;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.cannot-attend-toggle-btn:hover {
    background: #fee2e2;
    transform: scale(1.05);
}

/* [v7.23.5] Seating modal — inline "mark cannot attend" button */
.seating-mark-cannot-attend-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid #fecaca;
    background: transparent;
    color: #b91c1c;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    opacity: 0.55;
}
.seating-mark-cannot-attend-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
    opacity: 1;
    transform: scale(1.05);
}
[data-theme="dark"] .seating-mark-cannot-attend-btn {
    border-color: rgba(220, 38, 38, 0.4);
    color: #fca5a5;
}
[data-theme="dark"] .seating-mark-cannot-attend-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.7);
}

/* [v7.23.4] Search result — cannot-attend */
.search-result-item.cannot-attend {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}
.search-result-item.cannot-attend .result-name {
    color: #dc2626;
}
.search-cannot-attend-badge {
    display: inline-block;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 4px;
    vertical-align: middle;
}

/* Dark mode overrides */
[data-theme="dark"] .modal-cannot-attend-alert,
[data-theme="dark"] .seating-modal-row.seating-row-cannot-attend,
[data-theme="dark"] .search-result-item.cannot-attend {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.4);
}
[data-theme="dark"] .seating-modal-row.seating-row-cannot-attend .guest-name,
[data-theme="dark"] .search-result-item.cannot-attend .result-name {
    color: #fca5a5;
}
[data-theme="dark"] .cannot-attend-toggle-btn {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.5);
}
[data-theme="dark"] .search-cannot-attend-badge {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.4);
}
/* [v7.23.4] Replacement banner — profile modal 頂部顯著提示原賓客 + 現賓客 */
.profile-replaced-banner {
    background: #eef2ff;
    color: #312e81;
    border: 1px solid #a5b4fc;
    border-left: 4px solid #2f7d6c;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0 12px;
    line-height: 1.55;
}
.profile-replaced-banner-main {
    font-size: 0.92rem;
    font-weight: 600;
}
.profile-replaced-banner-main b {
    color: #1c4035;
    font-weight: 700;
}
.profile-replaced-banner-hint {
    font-size: 0.72rem;
    opacity: 0.78;
    margin-top: 3px;
}
[data-theme="dark"] .profile-replaced-banner {
    background: rgba(47, 125, 108, 0.14);
    color: #bfe3d6;
    border-color: rgba(47, 125, 108, 0.5);
    border-left-color: #2f7d6c;
}
[data-theme="dark"] .profile-replaced-banner-main b {
    color: #e0e7ff;
}
/* Search result：替補 badge + 原賓客名 */
.search-replaced-badge {
    display: inline-block;
    background: #eef2ff;
    color: #312e81;
    border: 1px solid #a5b4fc;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 4px;
    vertical-align: middle;
}
.search-replaced-from {
    font-size: 0.72rem;
    color: #1c4035;
    font-weight: 500;
}
[data-theme="dark"] .search-replaced-badge {
    background: rgba(47, 125, 108, 0.2);
    color: #bfe3d6;
    border-color: rgba(47, 125, 108, 0.5);
}
[data-theme="dark"] .search-replaced-from {
    color: #bfe3d6;
}
.report-secondary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Report Export Buttons */
.report-export-primary {
    background: var(--primary) !important;
    background-image: none !important;
    color: white !important;
    font-weight: 700;
    padding: 13px !important;
    border-radius: 10px;
}
.report-export-primary::after { display: none !important; }
.report-export-primary:hover {
    background: #245a4b !important;
    box-shadow: 0 4px 14px rgba(47, 125, 108,0.35);
    transform: translateY(-1px);
}
.report-export-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.report-export-secondary {
    padding: 10px 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    border-radius: 10px;
    background: var(--bg-primary) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    text-align: center;
    transition: var(--transition);
}
.report-export-secondary:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: var(--bg-secondary) !important;
}

/* RSVP Bar */
.report-rsvp-bar {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    line-height: 1.8;
}
.report-rsvp-bar strong { color: var(--text-main); font-weight: 700; }

/* Report Empty State */
.report-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 32px;
    text-align: center;
    gap: 10px;
}
.report-empty i {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 4px;
}
.report-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}
.report-empty-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}


/* ── Hub reusable components ── */
.hub-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.hub-stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.hub-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
}
.hub-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.hub-warning-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 12px;
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}
[data-theme="dark"] .hub-warning-bar {
    background: #422006;
    color: #fbbf24;
    border-color: #78350f;
}
.hub-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.hub-divider::before,
.hub-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.hub-divider span {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.hub-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding: 0 2px;
}

/* Email panel — Resend status & info note (dark mode compatible) */
.email-resend-status {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-size: 0.85rem;
    color: #15803d;
}
.email-quota-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.82rem;
}
.email-quota-bar-bg {
    height: 6px;
    border-radius: 99px;
    background: rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 6px;
}
.email-quota-bar {
    height: 100%;
    border-radius: 99px;
    background: #16a34a;
    transition: width 0.4s ease;
}
.email-quota-bar.bar-warning { background: #d97706; }
.email-quota-bar.bar-exceeded { background: #dc2626; }
.email-quota-detail {
    font-size: 0.75rem;
    opacity: 0.75;
}
.email-resend-status.quota-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.email-resend-status.quota-exceeded {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.email-info-note {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.6;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}
[data-theme="dark"] .email-resend-status {
    background: #052e16;
    border-color: #166534;
    color: #86efac;
}
[data-theme="dark"] .email-quota-bar-bg {
    background: rgba(255,255,255,0.12);
}
[data-theme="dark"] .email-resend-status.quota-warning {
    background: #451a03;
    border-color: #92400e;
    color: #fbbf24;
}
[data-theme="dark"] .email-resend-status.quota-exceeded {
    background: #450a0a;
    border-color: #991b1b;
    color: #fca5a5;
}

/* 策劃中心 — 桌面全寬佈局 */
#dispatchView {
    max-width: none;
}

/* WhatsApp 發送列表 — 桌面單行模式，手機保持原樣 */
@media (min-width: 768px) {
    #hubDispatch .guest-card {
        padding: 6px 12px;
        margin-bottom: 0;
        border-radius: 0;
        background: transparent;
        border-bottom: 1px solid #f1f5f9;
    }
    #hubDispatch .guest-card:hover {
        background: #f8fafc;
    }
    #hubDispatch .guest-main-info {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    #hubDispatch .guest-name {
        font-size: 0.85rem;
        min-width: 150px;
        flex-shrink: 0;
    }
    #hubDispatch .guest-meta {
        font-size: 0.78rem;
        color: #94a3b8;
        min-width: 160px;
        flex-shrink: 0;
    }
    #hubDispatch .status-pill {
        font-size: 0.72rem;
        padding: 1px 8px;
        margin-top: 0;
    }
    #hubDispatch .missing-phone-warning {
        font-size: 0.72rem;
        margin-top: 0;
    }
}

/* WhatsApp 發送列表 — 手機維持垂直堆疊 */
@media (max-width: 767px) {
    #hubDispatch .guest-card {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.3rem;
        border-radius: 8px;
    }
}

/* Admin panel 的舊 hub-tabs（保留橫向 grid） */
.hub-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-bottom: 16px;
}

.hub-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.hub-tab-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.hub-tab-label {
    font-size: 0.68rem;
    white-space: nowrap;
}

.hub-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 3px 6px rgba(47, 125, 108, 0.25);
}

/* ── Batch Editor ── */
.batch-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.25rem;
}
/* Preset filter chips */
.batch-filter-chip {
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.batch-filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(47, 125, 108, 0.06);
}
.batch-filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
[data-theme="dark"] .batch-filter-chip {
    border-color: #2d3f5e;
    color: #94a3b8;
}
[data-theme="dark"] .batch-filter-chip:hover {
    border-color: #2f7d6c;
    color: #a5b4fc;
    background: rgba(47, 125, 108, 0.1);
}
[data-theme="dark"] .batch-filter-chip.active {
    background: #1c4035;
    border-color: #1c4035;
    color: #fff;
}

.batch-pending-badge {
    background: #f59e0b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
    white-space: nowrap;
}
.batch-plan-gate {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.92);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
@media (prefers-color-scheme: dark) {
    .batch-plan-gate { background: rgba(15,23,42,0.92); }
}
/* ── Batch Editor AI Panel ── */
.batch-ai-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.batch-ai-toggle.active {
    background: rgba(47, 125, 108, 0.12);
    border-color: #2f7d6c;
    color: #2f7d6c;
}
[data-theme="dark"] .batch-ai-toggle.active {
    background: rgba(47, 125, 108, 0.2);
    border-color: #5fcfae;
    color: #5fcfae;
}
.batch-ai-panel {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
[data-theme="dark"] .batch-ai-panel {
    background: #0f1929;
    border-color: #1e3050;
}
.batch-ai-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-main);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.batch-ai-header i { width: 16px; height: 16px; color: #2f7d6c; }
.batch-ai-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
}
.batch-ai-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 8px;
    line-height: 1.5;
}
.batch-ai-scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.batch-ai-scenario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: all 0.15s;
}
.batch-ai-scenario i { width: 18px; height: 18px; }
.batch-ai-scenario:hover { border-color: #2f7d6c; color: #2f7d6c; }
.batch-ai-scenario.active {
    border-color: #2f7d6c;
    background: rgba(47, 125, 108, 0.1);
    color: #2f7d6c;
    font-weight: 600;
}
[data-theme="dark"] .batch-ai-scenario.active {
    background: rgba(47, 125, 108, 0.2);
    color: #a5b4fc;
    border-color: #5fcfae;
}
.batch-ai-rules {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-main);
    font-size: 0.78rem;
    resize: vertical;
    box-sizing: border-box;
    margin-top: 8px;
    font-family: inherit;
}
[data-theme="dark"] .batch-ai-rules {
    background: #0b1120;
    border-color: #2d3f5e;
    color: #f1f5f9;
}
.batch-ai-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
.batch-ai-result-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}
.batch-ai-table-group {
    padding: 6px 8px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border-left: 3px solid #2f7d6c;
}
[data-theme="dark"] .batch-ai-table-group { background: #131c31; }
.batch-ai-table-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 3px;
}
.batch-ai-table-count { color: var(--text-muted); font-weight: 400; }
.batch-ai-table-guests {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.batch-ai-warnings { margin-bottom: 6px; }
.batch-ai-warning-item {
    font-size: 0.72rem;
    color: #f59e0b;
    margin: 2px 0;
    padding: 4px 6px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 4px;
}

/* ── jspreadsheet: Excel-like row spacing ── */
.jexcel > tbody > tr > td {
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    font-size: 13px;
}
.jexcel > thead > tr > td {
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── jspreadsheet: sorting discoverability ── */
/* Show pointer + sort icon on column headers to hint sortability */
.jexcel > thead > tr > td:not(:first-child) {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.jexcel > thead > tr > td:not(:first-child)::after {
    content: '⇅';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.15s;
    color: #94a3b8;
}
.jexcel > thead > tr > td:not(:first-child):hover::after {
    opacity: 0.7;
}
.jexcel > thead > tr > td:not(:first-child):hover {
    background-color: rgba(47, 125, 108, 0.08) !important;
}
/* Active sort column */
.jexcel > thead > tr > td.arrow-up::after,
.jexcel > thead > tr > td.arrow-down::after {
    content: '';
    opacity: 1;
}
.jexcel > thead > tr > td.arrow-up {
    background-color: rgba(47, 125, 108, 0.12) !important;
}
.jexcel > thead > tr > td.arrow-down {
    background-color: rgba(47, 125, 108, 0.12) !important;
}

/* jspreadsheet overrides for dark mode — 使用 data-theme="dark" 而非 prefers-color-scheme */
[data-theme="dark"] .jexcel_content,
[data-theme="dark"] .jexcel_container {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .jexcel > thead > tr > td,
[data-theme="dark"] .jexcel > tbody > tr > td {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .jexcel > thead > tr > td {
    background: #0f172a !important;
    color: #94a3b8 !important;
    font-weight: 600;
}
[data-theme="dark"] .jexcel > tbody > tr:hover > td {
    background: #263346 !important;
}
/* Selection: jspreadsheet CE sets inline background-color, override with !important */
[data-theme="dark"] .jexcel > tbody > tr.selected > td,
[data-theme="dark"] .jexcel > tbody > tr > td.highlight,
[data-theme="dark"] .jexcel > tbody > tr > td.highlight-top,
[data-theme="dark"] .jexcel > tbody > tr > td.highlight-left,
[data-theme="dark"] .jexcel > tbody > tr > td.highlight-right,
[data-theme="dark"] .jexcel > tbody > tr > td.highlight-bottom {
    background-color: #2d3a6e !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .jexcel > tbody > tr > td.highlight-selected,
[data-theme="dark"] .jexcel > tbody > tr.selected > td.highlight-selected {
    background-color: #3b4fc4 !important;
    color: #fff !important;
}
/* Editing state */
[data-theme="dark"] .jexcel > tbody > tr > td.editor,
[data-theme="dark"] .jexcel > tbody > tr > td.edition {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .jexcel > tbody > tr > td input,
[data-theme="dark"] .jexcel > tbody > tr > td select,
[data-theme="dark"] .jexcel > tbody > tr > td textarea {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #2f7d6c !important;
}
/* Row number column in selection */
[data-theme="dark"] .jexcel > tbody > tr.selected > td:first-child {
    background-color: #3b4fc4 !important;
    color: #fff !important;
}
/* Column header when selected */
[data-theme="dark"] .jexcel > thead > tr > td.selected {
    background-color: #2d3a6e !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .jexcel > tbody > tr > td.readonly {
    background: #0f172a !important;
    color: #64748b !important;
}
[data-theme="dark"] .jexcel_corner {
    background: #334155 !important;
    border-color: #475569 !important;
}
[data-theme="dark"] .jexcel_pagination,
[data-theme="dark"] .jexcel_pagination a {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .jexcel_pagination a:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .batch-cell-changed {
    background: rgba(245,158,11,0.25) !important;
}
#batchSpreadsheetContainer .jexcel_content {
    max-height: calc(100vh - 280px);
    overflow: auto;
}
.batch-cell-changed {
    background: rgba(245,158,11,0.12) !important;
}

/* WhatsApp 變數插入按鈕 */
.wa-var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wa-var-btn {
    padding: 4px 10px;
    background: white;
    border: 1px solid #bfe3d6;
    border-radius: 14px;
    font-size: 0.75rem;
    color: #2f7d6c;
    cursor: pointer;
    font-family: monospace;
    transition: all 0.15s;
}

.wa-var-btn:hover {
    background: #e9f4f0;
    border-color: #7fd8bd;
}

/* ── Hub panels — cap width for comfortable reading/form filling ── */
.hub-panel {
    max-width: 800px;
    margin: 0 auto;
}

/* ── Settings sticky save bar ─────────────────────── */
.settings-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    margin: 24px -28px -20px; /* bleed to hub-content edges */
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    backdrop-filter: blur(8px);
}
.settings-save-note {
    flex: 1;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.settings-save-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(47, 125, 108,0.4);
    transition: box-shadow 0.2s, transform 0.15s;
}
.settings-save-btn:hover {
    box-shadow: 0 4px 20px rgba(47, 125, 108,0.55);
    transform: translateY(-1px);
}
.settings-save-btn i { width: 16px; height: 16px; }
[data-theme="dark"] .settings-save-bar {
    background: var(--bg-secondary);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
/* Batch edit + bulk actions need full width for spreadsheet view */
#hubBatchEdit {
    max-width: none;
}

.hub-action-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--card-shadow);
    animation: fadeIn 0.3s ease;
}

/* ── Import Panel ─────────────────────────────────── */
.import-step {
    margin-bottom: 1.5rem;
}
.import-step-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}
.import-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    line-height: 1.5;
}
.import-file-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: border-color 0.2s, background 0.2s;
}
.import-file-label:hover {
    border-color: var(--accent-blue);
    background: rgba(47, 125, 108, 0.04);
    color: var(--accent-blue);
}
.import-row-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* [polish] 貼上 Excel 資料區 */
.import-paste-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}
.import-paste-area {
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem 0 0.6rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-main, var(--text-primary));
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.5;
    resize: vertical;
}
.import-paste-area:focus {
    outline: none;
    border-color: var(--accent-blue, #2f7d6c);
    box-shadow: 0 0 0 3px rgba(47, 125, 108, 0.16);
}
.import-assumed-note {
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.8rem;
    line-height: 1.5;
}
[data-theme="dark"] .import-assumed-note {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fcd34d;
}
.import-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-height: 280px;
    overflow-y: auto;
}
.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.import-preview-table th {
    background: var(--surface-secondary);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.import-preview-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-preview-table tr:last-child td { border-bottom: none; }
.import-preview-table .import-vvip {
    color: #d97706;
    font-weight: 700;
}
.import-more-rows {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 8px !important;
}
.import-error-box {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.import-error-box ul { margin: 0.5rem 0 0 1rem; padding: 0; }
.import-error-box li { margin-bottom: 0.25rem; }
.import-progress-wrap { margin: 0.75rem 0; }
.import-progress-track {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.import-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), #1c4035);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.import-status {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}
.import-status.info    { background: rgba(47, 125, 108,0.08); color: var(--accent-blue); }
.import-status.success { background: rgba(34,197,94,0.10); color: #16a34a; }
.import-status.error   { background: rgba(239,68,68,0.08);  color: #dc2626; }

[data-theme="dark"] .import-file-label {
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="dark"] .import-file-label:hover {
    border-color: var(--accent-blue);
    background: rgba(47, 125, 108, 0.08);
}
[data-theme="dark"] .import-preview-table th {
    background: var(--surface-secondary);
}
[data-theme="dark"] .import-status.success { color: #4ade80; background: rgba(34,197,94,0.12); }

/* Export List — Grid Layout */
#exportList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}
#exportList .no-results {
    grid-column: 1 / -1;
}

.export-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: var(--surface-main, white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    min-height: 52px;
}

.export-item:hover,
.export-item.selected {
    border-color: var(--primary);
}

.export-item.selected {
    background: #e9f4f0;
}

[data-theme="dark"] .export-item {
    background: #1e293b;
}

[data-theme="dark"] .export-item.selected {
    background: #143a30;
}

.export-item input[type="checkbox"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    accent-color: var(--primary);
}

.export-item-details {
    flex-grow: 1;
    padding-right: 22px;
}

.export-item-details strong {
    display: block;
    color: var(--text-main);
    font-size: 0.82rem;
    line-height: 1.3;
    word-break: break-word;
}

.export-item-details span {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.export-item-id {
    font-size: 0.7rem;
    color: var(--primary);
    font-family: monospace;
    margin-top: 2px;
}

/* QR preview button on export cards */
.export-qr-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary, #fff);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.export-qr-btn i { width: 14px; height: 14px; }
.export-item:hover .export-qr-btn { opacity: 1; }
.export-qr-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* ==========================================
   [Phase 9] Seating Chart Styles
   ========================================== */

/* ── /arrange: 緊湊統計欄 (replaces 4-card hero grid) ── */
.seating-stats-compact {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
[data-theme="dark"] .seating-stats-compact,
:root:not([data-theme="light"]) .seating-stats-compact {
    background: rgba(255,255,255,0.05);
}
.seating-stats-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.stat-chip em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 1px;
}
.stat-chip.green  { color: #16a34a; }
.stat-chip.blue   { color: #2f7d6c; }
.stat-chip.amber  { color: #d97706; cursor: pointer; }
.stat-chip.red    { color: #dc2626; cursor: pointer; }
.stat-chip.muted  { color: #94a3b8; }
.stat-divider {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 300;
}
/* Progress bar row */
.seating-checkin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.seating-checkin-track {
    flex: 1;
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
[data-theme="dark"] .seating-checkin-track,
:root:not([data-theme="light"]) .seating-checkin-track {
    background: rgba(255,255,255,0.1);
}
.seating-checkin-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.seating-checkin-pct {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Legacy stat classes kept for compatibility */
.seating-stats-bar { display: flex; gap: 10px; margin-bottom: 12px; }
.seating-stat { flex: 1; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 8px; text-align: center; }
.seating-stat-num { display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.seating-stat-label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

.seating-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.seating-hint {
    padding: 10px 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.82rem;
    cursor: pointer;
    animation: seatingPulse 1.5s ease infinite;
}

@keyframes seatingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}

.seating-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    padding: 0 2px;
}

.seating-table-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.seating-table-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(47, 125, 108, 0.08);
}

.seating-table-card.seating-unassigned {
    background: #fffbeb;
    border-color: #fde68a;
}

[data-theme="dark"] .seating-table-card.seating-unassigned,
:root:not([data-theme="light"]) .seating-table-card.seating-unassigned {
    background: #1c1a10;
    border-color: #713f12;
}

/* Mobile Header Compact */
@media (max-width: 480px) {
    .app-header {
        padding: 0.5rem 0.75rem;
    }
    .app-header h1 {
        font-size: 0.85rem;
        letter-spacing: -0.3px;
    }
    .version {
        font-size: 0.65rem;
    }
    .header-top {
        margin-bottom: 0.3rem;
        gap: 6px;
    }
    .btn-refresh span:not(.refresh-icon-wrapper) {
        display: none; /* Hide "更新數據" text, keep icon */
    }
    #logoutBtn {
        padding: 3px 6px !important;
    }
}

.seating-table-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

/* /arrange: two-row header — top row: name + actions, bottom row: badges */
.seating-table-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* .seating-table-row-badges — removed, replaced by .seating-table-row-bars */

.seating-table-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.seating-table-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.seating-table-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* /colorize: status dot — replaces ⚪ emoji */
.seating-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}
.seating-dot.dot-done { background: #22c55e; }
.seating-dot.dot-progress { background: #34a085; }
.seating-dot.dot-warn { background: #f59e0b; }
.seating-dot.dot-idle { background: #94a3b8; }
.seating-dot.dot-empty { background: #475569; }

/* /typeset: table name — bolder for hierarchy */
.seating-table-name {
    font-weight: 800;
    color: var(--text-main);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.seating-table-type {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* /distill + /typeset: compact count badge */
.seating-table-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: #e9f4f0;
    border: 1px solid #bfe3d6;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
}

.seating-table-count.full {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.seating-table-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

/* /polish: 觸控目標 + Lucide icon sizing */
.seating-icon-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-muted);
}
[data-theme="dark"] .seating-icon-btn,
:root:not([data-theme="light"]) .seating-icon-btn {
    opacity: 0.85;
    color: #cbd5e1;
}
.seating-icon-btn i,
.seating-icon-btn svg {
    width: 15px;
    height: 15px;
}

.seating-icon-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
.seating-icon-btn-danger:hover {
    color: var(--error-color);
    background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .seating-icon-btn:hover,
:root:not([data-theme="light"]) .seating-icon-btn:hover {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .seating-icon-btn-danger:hover,
:root:not([data-theme="light"]) .seating-icon-btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.seating-capacity-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.seating-capacity-bar {
    flex: 1;
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.seating-capacity-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.seating-capacity-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.seating-capacity-fill.full {
    background: #dc2626;
}

/* ── Colour legend ── */
.seating-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 0 2px;
    border-top: 1px solid var(--border-color);
}

.seating-legend::before {
    content: attr(aria-label);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 2px;
}

/* ── Name pills (replaced chips) ── */
.seating-name-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 6px;
}

.seating-name-pill {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 2px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.7rem;
    color: var(--text-main);
    pointer-events: none;
}

.seating-name-pill.arrived {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* VVIP — 未到場：淺黃色（無 glow，避免事件開始前假警報） */
.seating-name-pill.vvip {
    background: #fefce8;
    border-color: #fde047;
    color: #854d0e;
    font-weight: 700;
}

/* VVIP — 已到場：強黃色，明顯慶祝感（覆蓋 .arrived 的綠色） */
.seating-name-pill.vvip.arrived {
    background: #fbbf24;
    border-color: #f59e0b;
    color: #451a03;
    font-weight: 800;
    box-shadow: 0 0 0 1.5px #d97706;
}

.seating-name-pill.more {
    background: #f8fafc;
    color: #94a3b8;
    font-style: italic;
}

/* [v7.23.10] Replaced pill — indigo / 紫藍色高光（避免與 VVIP 黃色撞色） */
.seating-name-pill.replaced {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #3730a3;
    font-weight: 700;
    box-shadow: 0 0 0 1.5px #2f7d6c;
}
.seating-name-pill.replaced.vvip {
    background: #e0e7ff;
    border-color: #5fcfae;
    color: #312e81;
}
[data-theme="dark"] .seating-name-pill.replaced {
    background: rgba(47, 125, 108, 0.2);
    border-color: rgba(47, 125, 108, 0.6);
    color: #bfe3d6;
    box-shadow: 0 0 0 1.5px rgba(47, 125, 108, 0.65);
}

/* [v7.23.10] Replaced modal row — indigo inline meta + 4px 左 border */
.seating-modal-row.seating-row-replaced {
    background: rgba(238, 242, 255, 0.6);
    border-left: 4px solid #2f7d6c;
}
.seating-replaced-mini-badge {
    display: inline-block;
    font-size: 0.95em;
    margin-right: 2px;
}
.seating-replaced-from {
    color: #1c4035;
    font-size: 0.78rem;
    font-weight: 500;
}
[data-theme="dark"] .seating-modal-row.seating-row-replaced {
    background: rgba(47, 125, 108, 0.12);
    border-left-color: rgba(47, 125, 108, 0.75);
}
[data-theme="dark"] .seating-replaced-from {
    color: #bfe3d6;
}

/* [v7.23.8] Cannot-attend pill — 紅色高光（優先於 vvip / arrived / replaced） */
.seating-name-pill.cannot-attend,
.seating-name-pill.cannot-attend.replaced,
.seating-name-pill.cannot-attend.vvip,
.seating-name-pill.cannot-attend.arrived,
.seating-name-pill.cannot-attend.vvip.arrived {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(185, 28, 28, 0.55);
    box-shadow: 0 0 0 1.5px #dc2626;
}
[data-theme="dark"] .seating-name-pill.cannot-attend,
[data-theme="dark"] .seating-name-pill.cannot-attend.vvip,
[data-theme="dark"] .seating-name-pill.cannot-attend.arrived,
[data-theme="dark"] .seating-name-pill.cannot-attend.vvip.arrived {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.55);
    color: #fca5a5;
    box-shadow: 0 0 0 1.5px rgba(220, 38, 38, 0.6);
}

/* Dirty/unsaved table card highlight */
.seating-table-card.seating-table-dirty {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}

/* Save bar */
.seating-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
}

/* Seating hint text */
/* ── Seating sticky bar (toolbar + filter + legend) ── */
.seating-sticky-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-primary);
    padding: 8px 0 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

/* ── Seating toolbar: actions + search ── */
.seating-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.seating-toolbar .seating-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.seating-search-wrap {
    flex: 1;
    min-width: 140px;
}

.seating-search-field {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--bg-primary);
    color: var(--text-main);
    transition: border-color 0.2s;
}

.seating-search-field:focus {
    border-color: var(--primary);
    outline: none;
}

/* Filter chip bar */
.seating-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.seating-filter-chip {
    padding: 4px 10px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.seating-filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.seating-filter-chip.active {
    background: #d6ece6;
    color: #245a4b;
    border-color: #7fd8bd;
}

[data-theme="dark"] .seating-search-field {
    background: #0f1a2e;
    border-color: var(--border-color);
}

[data-theme="dark"] .seating-filter-chip.active {
    background: rgba(47, 125, 108, 0.2);
    color: #7fd8bd;
    border-color: rgba(47, 125, 108, 0.4);
}

/* [v7.24.3] Not-Arrived Tab — 列出所有未到場賓客 */
.seating-tab-count-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    min-width: 18px;
    text-align: center;
}
.seating-tab-count-badge:empty {
    display: none;
}
.seating-tab.active .seating-tab-count-badge {
    background: #fff;
    color: #dc2626;
}
.not-arrived-empty {
    text-align: center;
    padding: 60px 20px;
}
.not-arrived-empty-filter {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.not-arrived-header {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 5;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.not-arrived-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.na-stat {
    flex: 1;
    min-width: 100px;
    padding: 10px 14px;
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid #dc2626;
    border-radius: 6px;
}
.na-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #dc2626;
    line-height: 1.2;
}
.na-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.na-stat-success {
    background: rgba(16, 185, 129, 0.08);
    border-left-color: #10b981;
}
.na-stat-success .na-stat-num { color: #059669; }
.na-stat-danger {
    background: rgba(120, 53, 15, 0.08);
    border-left-color: #78350f;
}
.na-stat-danger .na-stat-num { color: #78350f; }
.na-stat-vvip {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: #f59e0b;
}
.na-stat-vvip .na-stat-num { color: #b45309; }

.not-arrived-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.not-arrived-search {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.92rem;
    background: var(--bg-secondary);
    color: var(--text-main);
}
.not-arrived-search:focus {
    outline: none;
    border-color: #2f7d6c;
    box-shadow: 0 0 0 3px rgba(47, 125, 108, 0.18);
}
.not-arrived-filter {
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.92rem;
    background: var(--bg-secondary);
    color: var(--text-main);
    cursor: pointer;
}

.not-arrived-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.not-arrived-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.not-arrived-row:hover {
    background: rgba(47, 125, 108, 0.08);
    border-color: #7fd8bd;
}
.not-arrived-row.na-row-vvip {
    border-left: 4px solid #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}
.not-arrived-row.na-row-vvip:hover {
    background: rgba(245, 158, 11, 0.14);
}
.na-table-circle {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.na-table-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
    flex-shrink: 0;
}
.na-table-circle-long .na-table-num {
    font-size: 0.78rem;
    letter-spacing: -0.5px;
}
.na-table-full {
    display: block;
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.1;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
    font-weight: 500;
}
.na-info {
    flex: 1;
    min-width: 0;
}
.na-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.na-name-sub {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-left: 4px;
}
.na-vvip-crown {
    margin-right: 4px;
}
.na-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.na-actions {
    flex-shrink: 0;
}
.na-mark-arrived-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.na-mark-arrived-btn i {
    width: 14px;
    height: 14px;
}
[data-theme="dark"] .na-stat {
    background: rgba(220, 38, 38, 0.14);
}
[data-theme="dark"] .na-stat-success {
    background: rgba(16, 185, 129, 0.14);
}
[data-theme="dark"] .na-stat-success .na-stat-num { color: #34d399; }
[data-theme="dark"] .na-stat-danger {
    background: rgba(120, 53, 15, 0.18);
}
[data-theme="dark"] .na-stat-danger .na-stat-num { color: #fcd34d; }
[data-theme="dark"] .na-stat-vvip .na-stat-num { color: #fcd34d; }
[data-theme="dark"] .not-arrived-row.na-row-vvip {
    background: rgba(245, 158, 11, 0.1);
}
@media (max-width: 640px) {
    .na-table-circle { width: 48px; }
    .na-table-num { width: 36px; height: 36px; font-size: 0.75rem; }
    .na-table-circle-long .na-table-num { font-size: 0.68rem; }
    .na-table-full { font-size: 0.56rem; max-width: 48px; }
    .na-mark-arrived-btn span,
    .na-mark-arrived-btn { font-size: 0.78rem; }
    .not-arrived-stats { gap: 8px; }
    .na-stat { min-width: 80px; padding: 8px 10px; }
    .na-stat-num { font-size: 1.2rem; }
}

/* [v7.24.2] Cannot-attend filter chip — 紅色配色 + 計數 badge */
.seating-filter-chip-cannot-attend {
    border-color: #fecaca !important;
    color: #b91c1c !important;
    background: #fef2f2 !important;
}
.seating-filter-chip-cannot-attend:hover {
    background: #fee2e2 !important;
}
.seating-filter-chip-cannot-attend.active {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #b91c1c !important;
}
.seating-filter-chip .filter-count-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    background: #fff;
    color: #b91c1c;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    min-width: 18px;
    text-align: center;
}
.seating-filter-chip-cannot-attend.active .filter-count-badge {
    background: #fff;
    color: #b91c1c;
}
[data-theme="dark"] .seating-filter-chip-cannot-attend {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}
[data-theme="dark"] .seating-filter-chip-cannot-attend:hover {
    background: rgba(220, 38, 38, 0.2) !important;
}
[data-theme="dark"] .seating-filter-chip-cannot-attend.active {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: rgba(220, 38, 38, 0.7) !important;
}
[data-theme="dark"] .seating-filter-chip .filter-count-badge {
    background: rgba(255, 255, 255, 0.92);
    color: #b91c1c;
}

/* Mini progress bars — replace badge text */
.seating-table-row-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.seating-mini-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Progress bar labels — muted by default, only color on completion */
.seating-bar-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 72px;
}

.seating-bar-label.bar-arrived {
    color: var(--text-muted);
}

.seating-bar-label.bar-all {
    color: #16a34a;
}

/* Progress bar tracks — neutral base */
.seating-bar-track {
    flex: 1;
    height: 4px;
    background: var(--border-color, #e2e8f0);
    border-radius: 2px;
    overflow: hidden;
    min-width: 40px;
}

/* Bar fills — single neutral tone, only green on "all arrived" */
.seating-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: #94a3b8;
    transition: width 0.3s ease;
}

.seating-bar-fill.bar-full {
    background: #94a3b8;
}

.bar-arrived-track {
    /* no special background — same neutral track */
}

.seating-bar-fill.bar-arrived-fill {
    background: #94a3b8;
}

.seating-bar-fill.bar-arrived-fill.bar-all {
    background: #22c55e;
}

.bar-arrived-track:has(.bar-all) {
    background: rgba(34, 197, 94, 0.1);
}

/* Dark mode: soften bar fills further */
[data-theme="dark"] .seating-bar-fill {
    background: #475569;
}
[data-theme="dark"] .seating-bar-fill.bar-full {
    background: #475569;
}
[data-theme="dark"] .seating-bar-fill.bar-arrived-fill {
    background: #475569;
}
[data-theme="dark"] .seating-bar-fill.bar-arrived-fill.bar-all {
    background: #4ade80;
}
[data-theme="dark"] .seating-bar-label.bar-all {
    color: #4ade80;
}

.seating-hint-text {
    color: #94a3b8;
    font-size: 0.76rem;
    margin: 4px 0 10px;
    padding: 0 4px;
}

/* /polish: auto-assign button — using tokens */
.btn-auto-assign {
    background: var(--success-color, #22c55e);
    color: #fff;
    border: 1px solid transparent;
    opacity: 0.85;
}
.btn-auto-assign:hover {
    opacity: 1;
}

/* /arrange: attention section label */
.seating-section-attention {
    color: #d97706;
}

/* ── Desktop: widen seating view + multi-column grid ── */
#dashboardView.view-section {
    max-width: none;
}

.seating-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* /colorize: completed group faded */
.seating-grid-done .seating-table-card {
    opacity: 0.55;
    transition: opacity 0.2s;
}
.seating-grid-done .seating-table-card:hover {
    opacity: 1;
}

@media (min-width: 768px) {
    .seating-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .seating-grid .seating-table-card {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .seating-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Modal section label */
.seating-modal-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    padding: 6px 0 4px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 6px;
}

/* Modal row actions */
.seating-modal-row .guest-main-info {
    flex: 1;
    min-width: 0;
}

.seating-modal-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Move select dropdown */
.seating-move-select {
    font-size: 0.78rem;
    padding: 4px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--text-main);
    cursor: pointer;
    max-width: 90px;
}

/* Move-in button */
.seating-move-in-btn {
    background: #e9f4f0;
    color: #2f7d6c;
    border: 1px solid #bfe3d6;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}


.seating-empty {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-style: italic;
    padding: 4px 0;
}

/* Arrived guest chip indicator */
.seating-chip-arrived {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* Arrived badge on table header */
/* /distill + /typeset: compact arrived badge */
.seating-arrived-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #d97706;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
}

.seating-arrived-badge.all {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* ==========================================
   報到記錄 Timeline Rows
   ========================================== */

/* /onboard: empty state */
.checkin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
}
.checkin-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}
.checkin-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 6px;
}
.checkin-empty-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 260px;
    margin: 0;
}

/* /polish: row base — transition already present, add hover smoothly */
.checkin-log-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease; /* /polish */
    cursor: default;
}
.checkin-log-row:first-child {
    border-top: 1px solid var(--border-color);
}
.checkin-log-row:hover {
    background: var(--bg-secondary);
}

/* /clarify: seq circle — normal entries */
.checkin-log-seq {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* /clarify: latest entry — pulsing green dot */
.checkin-log-seq-latest {
    background: var(--success-color);
    border-color: var(--success-color);
    color: transparent;
    position: relative;
}
.checkin-log-latest-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    display: block;
    animation: checkin-pulse 1.8s ease-in-out infinite;
}
@keyframes checkin-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.7); opacity: 0.7; }
}

.checkin-log-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    flex-shrink: 0;
}
/* /typeset: increase minimum font sizes */
.checkin-log-hm {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}
.checkin-log-date {
    font-size: 0.72rem; /* was 0.65rem */
    color: var(--text-muted);
    margin-top: 2px;
}

/* /harden: button reset for info area */
.checkin-log-info {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    outline-offset: 3px;
}
.checkin-log-info:focus-visible {
    outline: 2px solid var(--primary);
}
.checkin-log-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkin-log-sub {
    display: block;
    font-size: 0.78rem; /* was 0.72rem */
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /optimize: load-more button */
.checkin-load-more {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    font-size: 0.83rem;
    color: var(--primary);
    background: none;
    border: none;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease;
}
.checkin-load-more:hover {
    background: var(--bg-secondary);
}

/* ==========================================
   [Phase 9b] Form Fields + VVIP Styles
   ========================================== */

/* Form field — extracted from inline <style> */
.form-field {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg-primary, #fff);
    color: var(--text-main, #1e293b);
    transition: border-color 0.2s;
}

.form-field:focus {
    border-color: var(--primary, #34a085);
    outline: none;
}

/* Form group spacing — extracted from inline style */
.hub-action-card .form-group {
    margin-bottom: 12px;
}

/* Inline error message */
.form-error-msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    margin-bottom: 12px;
}

/* Screen-reader only label */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Add Guest — toggle row spacing */
.add-guest-toggle-gap-sm { margin-bottom: 10px; }
.add-guest-toggle-gap-lg { margin-bottom: 16px; }

/* Add Guest — section blocks (v7.24.6) */
.add-guest-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.add-guest-section:last-of-type {
    border-bottom: none;
}
.add-guest-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 10px;
    opacity: 0.85;
}
.add-guest-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}
.add-guest-grid-2col .form-group {
    margin-bottom: 0;
}
.add-guest-grid-2col .add-guest-col-full {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .add-guest-grid-2col {
        grid-template-columns: 1fr;
    }
}
[data-theme="dark"] .add-guest-section {
    border-bottom-color: rgba(255,255,255,0.07);
}

/* Add Guest — VVIP toggle row */
.add-guest-vvip-row {
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    overflow: hidden;
}

.vvip-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

.vvip-toggle-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.vvip-toggle-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vvip-toggle-text strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #92400e;
}

.vvip-toggle-text small {
    font-size: 0.72rem;
    color: #b45309;
}

/* Toggle switch */
.vvip-toggle-switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.vvip-checkbox-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Focus indicator for keyboard navigation */
.vvip-checkbox-input:focus-visible + .vvip-toggle-slider {
    outline: 2px solid var(--primary, #34a085);
    outline-offset: 2px;
}

.vvip-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 26px;
    cursor: pointer;
    transition: background 0.2s;
}

.vvip-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.vvip-checkbox-input:checked + .vvip-toggle-slider {
    background: #f59e0b;
}

.vvip-checkbox-input:checked + .vvip-toggle-slider::before {
    transform: translateX(20px);
}

/* When VVIP checked, highlight the whole row */
.vvip-checkbox-input:checked ~ * {
    color: #78350f;
}


/* VVIP table tag */
.table-vvip-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid #fbbf24;
    background: #fef9c3;
    color: #92400e;
    white-space: nowrap;
    flex-shrink: 0;
}

.table-vvip-tag.alert {
    background: #fef2f2;
    border-color: #f87171;
    color: #b91c1c;
    animation: pulse-vvip 1.5s ease-in-out infinite;
}

/* /colorize: VVIP alert — glow pulse for attention */
.seating-table-card.seating-table-vvip-alert {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
    animation: vvip-glow 2s ease-in-out infinite;
}

@keyframes vvip-glow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.3); }
}

/* Over-capacity table card */
.seating-table-card.seating-table-over-cap {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}

/* /harden: empty state when filter/search returns no results */
.seating-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}
.seating-empty-msg {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--text-main);
}
.seating-empty-hint {
    font-size: var(--text-sm);
    margin: 0;
    color: var(--text-muted);
}

/* /distill: +N more chip */
.seating-name-pill.more-chip {
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-weight: 700;
    font-size: 0.72rem;
    border: 1px dashed var(--border-color, #e2e8f0);
    cursor: pointer;
    opacity: 0.8;
}
.seating-name-pill.more-chip:hover {
    opacity: 1;
    background: rgba(47, 125, 108, 0.06);
    border-color: var(--primary);
    color: var(--primary);
}

.seating-over-cap-banner {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9a3412;
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    padding: 5px 12px;
    margin: -12px -12px 10px -12px;
    border-radius: 11px 11px 0 0;
}

/* Over-capacity progress bar */
.seating-capacity-fill.over {
    background: #f97316;
}

/* /harden: clickable stat chip — clear affordance */
.seating-stat-clickable {
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.seating-stat-clickable:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    transform: translateY(-1px);
    text-decoration-style: solid;
}

/* ─── Spare Seats Breakdown Panel ───────────────────── */
.spare-banner {
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 0.82rem;
}
.spare-banner--over {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
}

.spare-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, transform 0.1s;
}
.spare-row:hover { opacity: 0.85; transform: translateX(2px); }
.spare-row--over  { background: #fff7ed; border-color: #fdba74; }
.spare-row--full  { background: #f8fafc; border-color: #e2e8f0; }
.spare-row--ok    { background: #f0f9ff; border-color: #bae6fd; }

.spare-row__body { flex: 1; min-width: 0; }
.spare-row__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.spare-row__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;        /* explicit dark text — works on light backgrounds */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.spare-tag {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
}
.spare-tag--over { background: #fed7aa; color: #9a3412; }

.spare-row__bar-track {
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.spare-row__bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.spare-row__bar-fill--over { background: #f97316; }
.spare-row__bar-fill--full { background: #94a3b8; }
.spare-row__bar-fill--ok   { background: #245a4b; }

.spare-row__stats {
    text-align: right;
    margin-left: 14px;
    flex-shrink: 0;
}
.spare-row__count { font-size: 0.78rem; color: #64748b; margin-bottom: 2px; }

.spare-badge {
    font-size: 0.88rem;
    font-weight: 700;
    display: block;
}
.spare-badge--over { color: #f97316; }
.spare-badge--full { color: #94a3b8; }
.spare-badge--ok   { color: #245a4b; }

.spare-empty {
    text-align: center;
    color: #94a3b8;
    padding: 24px 0;
    font-size: 0.9rem;
}

/* Dark mode overrides for spare breakdown */
@media (prefers-color-scheme: dark) {
    .spare-banner--over { background: #431407; border-color: #9a3412; color: #fdba74; }
    .spare-row--over  { background: #2c1206; border-color: #9a3412; }
    .spare-row--full  { background: #1e293b; border-color: #334155; }
    .spare-row--ok    { background: #0c1a2e; border-color: #1e4060; }
    .spare-row__name  { color: #f1f5f9; }
    .spare-row__bar-track { background: #334155; }
    .spare-row__count { color: #94a3b8; }
}
/* JS dark mode class override (body.dark-mode) */
body.dark-mode .spare-banner--over { background: #431407; border-color: #9a3412; color: #fdba74; }
body.dark-mode .spare-row--over  { background: #2c1206; border-color: #9a3412; }
body.dark-mode .spare-row--full  { background: #1e293b; border-color: #334155; }
body.dark-mode .spare-row--ok    { background: #0c1a2e; border-color: #1e4060; }
body.dark-mode .spare-row__name  { color: #f1f5f9; }
body.dark-mode .spare-row__bar-track { background: #334155; }
body.dark-mode .spare-row__count { color: #94a3b8; }

/* Top VVIP warning banner */
.vvip-warning-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    animation: pulse-vvip 2s ease-in-out infinite;
}

.vvip-warning-banner:hover {
    background: #fee2e2;
}

.vvip-warning-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.vvip-warning-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vvip-warning-text strong {
    font-size: 0.9rem;
    color: #b91c1c;
    font-weight: 700;
}

.vvip-warning-text span {
    font-size: 0.78rem;
    color: #dc2626;
}

.vvip-warning-count {
    font-size: 1.1rem;
    font-weight: 800;
    color: #b91c1c;
    flex-shrink: 0;
}

/* All VVIPs arrived banner */
.vvip-all-arrived-banner {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #15803d;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: center;
}

/* VVIP guest card in modal */
.guest-card-vvip {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(90deg, #fffdf0 0%, #ffffff 100%) !important;
    box-shadow: 0 0 0 1px #fde68a !important;
}

.vvip-crown {
    font-size: 1em;
}

/* Seating guest name — clickable underline */
.seating-guest-name-link {
    cursor: pointer;
    text-decoration: underline dotted #94a3b8;
    text-underline-offset: 3px;
}
.seating-guest-name-link:hover {
    color: #2f7d6c;
    text-decoration-color: #2f7d6c;
}

/* Modal VVIP alert banner */
.modal-vvip-alert {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    font-size: 0.82rem;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Profile VVIP badge — arrived (gold) */
.profile-vvip-badge {
    background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    color: #78350f;
    font-weight: 800;
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.3px;
}

/* Profile VVIP badge — NOT arrived (red alert) */
.profile-vvip-badge.not-arrived {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 2px solid #ef4444;
    color: #991b1b;
    animation: pulse-vvip 1.8s ease-in-out infinite;
}

/* Pulse animation for VVIP alerts */
@keyframes pulse-vvip {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ==========================================
   [Phase 10] Clock Picker Styles
   ========================================== */

/* Date picker — styled to match form-field in both themes */
/* ── Date input with hidden picker ──────────────────── */
.date-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.date-input-wrap .form-field {
    flex: 1;
    padding-right: 42px;
}
.date-picker-trigger {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.date-picker-trigger:hover {
    color: var(--text-primary);
    background: var(--border-color);
}
.date-picker-trigger i { width: 17px; height: 17px; }
.date-picker-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
    color-scheme: light;
}
[data-theme="dark"] .date-picker-hidden { color-scheme: dark; }

.clock-input {
    cursor: pointer !important;
    text-align: center;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
}

.clock-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-modal.hidden {
    display: none !important;
}

.clock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.clock-dialog {
    position: relative;
    background: var(--bg-primary);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    width: 300px;
    animation: clockFadeIn 0.25s ease;
}

@keyframes clockFadeIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.clock-header {
    background: var(--primary);
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 3rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.clock-time-part {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    padding: 2px 8px;
    border-radius: 8px;
}

.clock-time-part.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.clock-time-part:hover {
    opacity: 0.8;
}

.clock-colon {
    opacity: 0.7;
}

.clock-face {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 20px auto;
    border-radius: 50%;
    background: var(--bg-secondary);
}

.clock-number {
    position: absolute;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
}

.clock-number.inner {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.clock-number:hover {
    background: var(--border-color);
}

.clock-number.selected {
    background: var(--primary);
    color: white;
}

.clock-number.inner.selected {
    background: var(--primary);
    color: white;
}

.clock-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    background: var(--primary);
    border-radius: 2px;
    z-index: 1;
    margin-left: -1px;
}

.clock-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--primary);
    border-radius: 50%;
    z-index: 3;
}

.clock-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-color);
}

.clock-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}

.clock-btn:hover {
    background: var(--bg-secondary);
}

.clock-btn.primary {
    color: var(--primary);
}

.clock-btn.primary:hover {
    background: var(--bg-secondary);
}

/* Print Layout */
@media print {
    body * {
        visibility: hidden;
    }

    #printArea,
    #printArea * {
        visibility: visible;
    }

    #printArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .print-card {
        border: 2px dashed #ccc;
        border-radius: 10px;
        padding: 30px;
        text-align: center;
        page-break-inside: avoid;
        background: white;
        height: max-content;
        position: relative;
    }

    .print-card h3 {
        margin: 0 0 5px 0;
        font-size: 1.6rem;
        color: #000;
        font-weight: 700;
    }

    .print-card .id-text {
        font-family: monospace;
        color: #34a085 !important;
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .print-card .qr-wrapper {
        border: 3px solid #34a085;
        border-radius: 15px;
        padding: 10px;
        display: inline-block;
        margin-bottom: 20px;
    }

    .print-card .qr-img {
        width: 200px;
        height: 200px;
        display: block;
    }

    .print-card .guest-name {
        font-size: 1.5rem;
        font-weight: bold;
        margin: 10px 0;
    }

    .print-card .company-name {
        font-size: 1.1rem;
        color: #475569;
        margin-bottom: 10px;
    }
}

/* --- Plan Modal --- */
.plan-modal .modal-content {
    max-width: 900px;
    background: #f8fafc;
    border-radius: 12px;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}

.plan-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.plan-card.popular {
    border: 2px solid var(--primary);
    box-shadow: 0 8px 16px rgba(47, 125, 108, 0.1);
}

.plan-card.popular::before {
    content: "最受歡迎";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
}

.plan-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.plan-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.plan-price small {
    font-size: 0.9rem;
    font-weight: normal;
    color: #64748b;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
    font-size: 0.9rem;
    color: #475569;
}

.plan-features li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-btn {
    width: 100%;
}

/* ==========================================
   Analytics Dashboard Styles
   ========================================== */

.analytics-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.analytics-card:hover {
    box-shadow: var(--shadow-glow);
}

.analytics-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analytics-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    color: #fff;
}
.analytics-badge-red { background: #ef4444; }
.analytics-badge-green { background: #22c55e; }

/* --- Stats Row --- */
.analytics-stats-row {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 0.5rem;
}

.analytics-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.analytics-stat-num {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.analytics-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-semi);
}

.analytics-stat-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0.7;
}

/* --- Pie Charts --- */
.analytics-pie-row {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
}

.analytics-pie-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.analytics-pie {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: conic-gradient(var(--pie-color) 0% var(--pie-pct), #e2e8f0 var(--pie-pct) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.analytics-pie:hover {
    transform: scale(1.05);
}

.analytics-pie::after {
    content: attr(data-label);
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.analytics-pie-empty {
    background: #e2e8f0 !important;
}

.analytics-pie-caption {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.analytics-pie-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* --- VVIP No-Show List --- */
.analytics-vvip-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.analytics-vvip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.analytics-vvip-row:active {
    transform: scale(0.98);
}

.analytics-vvip-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-main);
}

.analytics-vvip-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.analytics-empty-state {
    text-align: center;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.analytics-success {
    background: rgba(34, 197, 94, 0.08);
    color: #15803d;
}

/* --- Bar Chart --- */
.analytics-sort-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.analytics-sort-btn {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.analytics-sort-btn.active {
    background: #34a085;
    color: #fff;
    border-color: #34a085;
}

.analytics-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 600px) {
    .analytics-row-2col { grid-template-columns: 1fr; }
    .analytics-bar-row { grid-template-columns: 1fr 56px 38px; gap: 4px; }
    .analytics-bar-track { height: 14px; }
    .analytics-bar-label { font-size: 0.7rem; }
    .analytics-bar-value { font-size: 0.68rem; min-width: 32px; }
}

.analytics-bar-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: 1fr 80px 44px;
    align-items: center;
    gap: 6px;
}

.analytics-bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-bar-label-wide {
    grid-column: 1;
    min-width: 90px;
    max-width: 90px;
}

.analytics-bar-track {
    height: 18px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.analytics-bar-track-dual {
    background: #f1f5f9;
}

.analytics-bar-total {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: #cbd5e1;
    border-radius: 10px;
    transition: width 0.6s ease;
}

.analytics-bar-arrived {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease;
    min-width: 0;
}

.analytics-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease;
}

.analytics-bar-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

/* Company Top 10 — same grid, label is already 1fr */
.analytics-bar-label-wide {
    max-width: none;
    min-width: 0;
}

/* --- Timeline (vertical bars) --- */
.analytics-timeline {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 140px;
    padding-top: 10px;
    overflow-x: auto;
}

.analytics-timeline-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 36px;
    height: 100%;
    justify-content: flex-end;
}

.analytics-timeline-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2px;
}

.analytics-timeline-bar {
    width: 100%;
    max-width: 28px;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
}

.analytics-timeline-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
}
/* ── QR Ticket Redesign ── */
/* ── QR Ticket — unified font, centred modal ── */
.qr-ticket-card {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    width: 300px;
    position: relative;
}
.qr-ticket-header {
    background: linear-gradient(135deg, #1c4035 0%, #34a085 100%);
    color: #fff;
    padding: 24px 20px 18px;
    text-align: center;
    position: relative;
}
.close-qr-ticket {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(255,255,255,0.25);
    border: none;
    color: #fff;
    font-size: 1rem;
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.qr-ticket-logo {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    opacity: 0.75;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.qr-ticket-event {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
}
.qr-ticket-id {
    font-size: 0.75rem;
    opacity: 0.7;
    margin: 0;
    letter-spacing: 0.04em;
}
.qr-ticket-body {
    padding: 18px 20px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qr-ticket-body .qr-frame {
    width: 192px; height: 192px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.qr-instruction {
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    margin: 0;
}
.qr-tear-line {
    border: none;
    border-top: 2px dashed #e2e8f0;
    margin: 12px 16px 0;
}
.qr-ticket-footer {
    padding: 12px 20px 18px;
    text-align: center;
}
.qr-guest-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
}
.qr-password {
    font-size: 0.82rem;
    color: #475569;
    margin: 0 0 4px;
    background: #f1f5f9;
    display: inline-block;
    padding: 3px 12px;
    border-radius: 6px;
    letter-spacing: 0.06em;
}
.qr-token {
    font-size: 0.62rem;
    color: #cbd5e1;
    margin: 4px 0 0;
    letter-spacing: 0.02em;
}

/* ==========================================
   [BOLD] Enhanced Micro-Interactions & Effects
   ========================================== */

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
    font-size: 1rem;
    padding: 0;
}

.theme-toggle:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.2);
}

/* Staggered entrance for analytics cards */
.analytics-card:nth-child(1) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.0s both; }
.analytics-card:nth-child(2) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
.analytics-card:nth-child(3) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
.analytics-card:nth-child(4) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
.analytics-card:nth-child(5) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }
.analytics-card:nth-child(6) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
.analytics-card:nth-child(7) { animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; }

@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance for seating table cards */
.seating-table-card {
    animation: cardEntrance 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Bold VVIP gold badge glow */
.profile-vvip-badge {
    box-shadow: 0 2px 12px rgba(var(--vvip-gold-rgb), 0.2);
}

.profile-vvip-badge.not-arrived {
    box-shadow: 0 2px 16px rgba(var(--error-rgb), 0.2);
}

/* Enhanced scan frame success state */
.scan-frame.success {
    border-color: rgba(var(--success-rgb), 0.5) !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(var(--success-rgb), 0.3),
                inset 0 0 30px rgba(var(--success-rgb), 0.1) !important;
}

.scan-frame.error {
    border-color: rgba(var(--error-rgb), 0.5) !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(var(--error-rgb), 0.3) !important;
}

/* Bold auth icon badge */
.auth-icon-badge {
    filter: drop-shadow(0 8px 20px rgba(var(--primary-rgb), 0.3));
    transition: var(--transition);
}

.auth-icon-badge:hover {
    transform: scale(1.05);
}

/* (v3.0: pricing styles moved to #landingView scoped rules) */

/* Bold header stat bar */
.stats-bar {
    font-variant-numeric: tabular-nums;
}

/* Enhanced overlay backdrop */
.overlay {
    animation: overlayIn 0.25s ease;
}

@keyframes overlayIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(8px); }
}

/* VVIP 未到場：暗淡輪廓，明顯低調 */
[data-theme="dark"] .seating-name-pill.vvip {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.28);
    color: rgba(234, 179, 8, 0.6);
    font-weight: 700;
}

/* VVIP 已到場：實心亮金，與未到形成強烈對比 */
[data-theme="dark"] .seating-name-pill.vvip.arrived {
    background: #ca8a04;
    border-color: #eab308;
    color: #fff8e1;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.45);
}

/* Bolder analytics bar fill colors in dark mode */
[data-theme="dark"] .analytics-bar-total {
    background: #2a3a5c;
}

/* Enhanced QR ticket card */
[data-theme="dark"] .qr-ticket-card {
    background: #131c31;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .qr-guest-name {
    color: var(--text-main);
}

[data-theme="dark"] .qr-password {
    background: #1a2744;
    color: var(--text-main);
}

/* ── Password Check Loading & Error States ── */

/* Spinner inside the 確認 button */
.pwd-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rotate 0.7s linear infinite;
    vertical-align: middle;
}

/* Shake animation on the password input area */
@keyframes pwdShake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-8px); }
    35%       { transform: translateX(7px); }
    55%       { transform: translateX(-5px); }
    75%       { transform: translateX(4px); }
    90%       { transform: translateX(-2px); }
}

.pwd-input-area.pwd-error-shake {
    animation: pwdShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.15) !important;
}

/* Inline error toast below the password field */
.pwd-error-toast {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--error-color);
    background: rgba(var(--error-rgb), 0.08);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    width: 100%;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.pwd-error-toast.pwd-toast-show {
    opacity: 1;
    transform: translateY(0);
}

.pwd-error-toast.pwd-toast-hide {
    opacity: 0;
    transform: translateY(-4px);
}

/* Disabled state during loading */
.pwd-input-area input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .scan-line { animation: none !important; opacity: 0.6; }
}

/* Bold scroll indicator on hub content */
.hub-content::-webkit-scrollbar {
    width: 4px;
}
.hub-content::-webkit-scrollbar-track {
    background: transparent;
}
.hub-content::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.2);
    border-radius: 4px;
}
.hub-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.4);
}

/* ── Small-screen scanner adjustments (iPhone SE 375×667, older Android 360×640) ── */
@media (max-height: 700px) {
    .scanner-container {
        max-height: 35vh;
    }
    .controls {
        gap: 0.5rem;
    }
}

@media (max-height: 600px) {
    .scanner-container {
        max-height: 30vh;
    }
    .pwd-zone {
        margin-top: 1rem;
    }
    .controls {
        gap: 0.4rem;
    }
    .btn-large {
        padding: 0.7rem 1.25rem;
        font-size: 1rem;
    }
}

/* ==========================================
   Animation Layer v3.3
   ========================================== */

/* ── 1. Success Overlay Exit ── */
@keyframes overlayCardExit {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.93) translateY(14px); }
}
@keyframes overlayBgFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; pointer-events: none; }
}
#successOverlay.overlay-exit {
    animation: overlayBgFadeOut 0.22s cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}
#successOverlay.overlay-exit .success-card {
    animation: overlayCardExit 0.2s cubic-bezier(0.4, 0, 1, 1) both;
}

/* ── 2. Bottom-Sheet Modal Entrance ── */
@keyframes modalSlideUp {
    from { transform: translateY(48px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.modal:not(.hidden) .modal-content {
    animation: modalSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 3. Landing Page Stagger Entrance ── */
/* Each child of the landing view animates in sequence */
#landingView.view-entering .landing-nav {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.00s both;
}
#landingView.view-entering .landing-eyebrow {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}
#landingView.view-entering .landing-hero h1 {
    animation: slideUpFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
#landingView.view-entering .landing-hero > p {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.20s both;
}
#landingView.view-entering .landing-hero-cta {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}
#landingView.view-entering .landing-stats-strip {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.33s both;
}
#landingView.view-entering .landing-features {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.40s both;
}
#landingView.view-entering .landing-pricing {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
}
#landingView.view-entering .landing-footer {
    animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
}

/* ── 4. Search Result Stagger ── */
.search-result-item {
    animation: slideUpFade 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.search-result-item:nth-child(1) { animation-delay: 0.00s; }
.search-result-item:nth-child(2) { animation-delay: 0.04s; }
.search-result-item:nth-child(3) { animation-delay: 0.08s; }
.search-result-item:nth-child(4) { animation-delay: 0.12s; }
.search-result-item:nth-child(5) { animation-delay: 0.16s; }
.search-result-item:nth-child(n+6) { animation-delay: 0.20s; }

/* ── 5. Nav Item Press Feedback (mobile) ── */
.nav-item:active {
    transform: scale(0.88);
    opacity: 0.65;
    transition: transform 0.08s ease, opacity 0.08s ease;
}

/* ── 6. Stats Bar Flash on Update ── */
@keyframes statFlash {
    0%   { color: var(--text-muted); }
    40%  { color: var(--primary); }
    100% { color: inherit; }
}
.stats-bar .stat-updating {
    animation: statFlash 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 7. QR Ticket Modal Entrance (profile modal) ── */
#profileModal:not(.hidden) .modal-content {
    animation: modalSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 8. Scan frame state transitions ── */
.scan-frame {
    transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

/* ==========================================
   OVERDRIVE v1.0 — Landing Hero Cinematic
   ========================================== */

/* ── @property for animatable gradient ── */
@property --accent-hue {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ── 9. Hero headline clip-path reveal ── */
@keyframes heroReveal {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
    }
}

#landingView.view-entering .landing-hero h1 {
    animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}

/* ── 10. Accent text — gradient (set in main CSS) ── */

/* ── 11. Cursor-following glow ── */
#landingView .landing-hero {
    position: relative;
    overflow: hidden;
}

/* Glow/orb decorations removed — clean hero */

/* ── 12. Stats counter animation ── */
@property --counter-val {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

#landingView .landing-stat-item strong {
    transition: color 0.3s ease;
}

#landingView .landing-stat-item strong.counting {
    --counter-val: 0;
    animation: none; /* counter driven by JS */
}

/* ── 13. Scroll-reveal for features & pricing ── */
#landingView .landing-feature-card,
#landingView .landing-plan-card,
#landingView .landing-step-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#landingView .landing-feature-card.revealed,
#landingView .landing-plan-card.revealed,
#landingView .landing-step-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for feature cards */
#landingView .landing-feature-card:nth-child(2) { transition-delay: 0.06s; }
#landingView .landing-feature-card:nth-child(3) { transition-delay: 0.12s; }
#landingView .landing-feature-card:nth-child(4) { transition-delay: 0.18s; }
#landingView .landing-feature-card:nth-child(5) { transition-delay: 0.24s; }
#landingView .landing-feature-card:nth-child(6) { transition-delay: 0.30s; }

/* Stagger delays for pricing cards */
#landingView .landing-plan-card:nth-child(2) { transition-delay: 0.10s; }
#landingView .landing-plan-card:nth-child(3) { transition-delay: 0.20s; }

/* Stagger for steps */
#landingView .landing-step-item:nth-child(2) { transition-delay: 0.10s; }
#landingView .landing-step-item:nth-child(3) { transition-delay: 0.20s; }

/* ── 14. Hero scroll fade-out ── */
#landingView .landing-hero {
    transition: opacity 0.05s linear, transform 0.05s linear;
    will-change: opacity, transform;
}

/* ── 15. Reduced motion: disable all overdrive effects ── */
@media (prefers-reduced-motion: reduce) {
    #landingView.view-entering .landing-hero h1 {
        animation: slideUpFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
        clip-path: none;
    }
    #landingView .landing-hero-accent {
        animation: none;
    }
    #landingView .landing-hero-glow,
    #landingView .landing-hero-orb {
        display: none;
    }
    #landingView .landing-feature-card,
    #landingView .landing-plan-card,
    #landingView .landing-step-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   [v5.8.0] Operators Panel Styles
   ============================================================ */
.ops-header {
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.ops-header-text { flex: 1; min-width: 200px; }
.ops-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 6px;
}
.ops-header p {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    line-height: 1.5;
    margin: 0;
}

/* [v7.22.14] Quota badge pill */
.ops-quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 99px;
    font-size: 0.78rem;
    color: var(--text-main, #1e293b);
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* [v7.28.16] 修正 dark mode 白底白字（舊用未定義嘅 --bg-tertiary fallback 成淺色） */
[data-theme="dark"] .ops-quota-badge {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.28);
    color: var(--text-main, #e2e8f0);
}
.ops-quota-badge.is-full {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
[data-theme="dark"] .ops-quota-badge.is-full {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.4);
    color: #fde68a;
}
.ops-quota-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}
.ops-quota-label { opacity: 0.85; }
.ops-upgrade-btn { margin-left: 4px; }

/* [v7.22.14] Role select dropdown */
.ops-role-select {
    padding: 9px 10px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--bg-secondary, #fff);
    color: var(--text-main);
    cursor: pointer;
    flex-shrink: 0;
}
.ops-role-select:focus {
    outline: none;
    border-color: var(--primary-color, #2f7d6c);
}

/* [v7.22.14] Role badge on operator list items */
.ops-role-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    width: fit-content;
}
.ops-role-organizer {
    background: #d6ece6;
    color: #1c4035;
}
.ops-role-scanner {
    background: #ecfdf5;
    color: #047857;
}
.ops-role-viewer {
    background: #f1f5f9;
    color: #475569;
}

/* [v7.28.17] Scanner / Viewer 角色：硬隱藏管理中心入口 + 任何資料管理／重置控制
   （CSS backstop，唔倚賴 applyRoleUI JS 時序；後端亦 whitelist 擋實 destructive action）*/
body.role-scanner [data-view="dispatchView"],
body.role-viewer  [data-view="dispatchView"],
body.role-scanner .hub-tab[data-hub="reset"],
body.role-viewer  .hub-tab[data-hub="reset"],
body.role-scanner #hubReset,
body.role-viewer  #hubReset,
body.role-scanner .danger-zone,
body.role-viewer  .danger-zone {
    display: none !important;
}
[data-theme="dark"] .ops-role-organizer {
    background: rgba(52, 160, 133, 0.2);
    color: #7fd8bd;
}
[data-theme="dark"] .ops-role-scanner {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
[data-theme="dark"] .ops-role-viewer {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
}

/* [v7.22.14] Viewer read-only mode：disable destructive buttons */
body.viewer-readonly .btn-danger,
body.viewer-readonly button[onclick*="delete"],
body.viewer-readonly button[onclick*="remove"] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.ops-add-form {
    display: flex;
    gap: 8px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .ops-add-form { flex-direction: column; }
    .ops-add-form > * { width: 100%; }
}
.ops-add-form input[type="email"] {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--bg-secondary, #fff);
    color: var(--text-main);
    transition: border-color 0.15s;
    min-width: 0;
}
.ops-add-form input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-color, #2f7d6c);
}

.ops-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ops-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-primary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    gap: 10px;
}
.ops-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ops-item-email {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.ops-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted, #94a3b8);
}
.ops-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}
.ops-empty-state p {
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}
.ops-loading,
.ops-error {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted, #94a3b8);
}
.ops-error { color: #ef4444; }

/* ==========================================
   [Phase 10] Floorplan Module Styles
   ========================================== */

/* Tab Bar */
.seating-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--surface, #f1f5f9);
    border-radius: 10px;
    padding: 3px;
}

.seating-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.seating-tab svg {
    width: 16px;
    height: 16px;
}

.seating-tab.active {
    background: var(--bg, #ffffff);
    color: var(--text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="dark"] .seating-tab-bar {
    background: #1e293b;
}

[data-theme="dark"] .seating-tab.active {
    background: #334155;
    color: #f1f5f9;
}

/* Toolbar */
.fp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: var(--surface, #f1f5f9);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fp-toolbar-group {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.fp-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 1rem;
}

.fp-tool-btn svg {
    width: 18px;
    height: 18px;
}

.fp-tool-btn:hover {
    background: var(--bg, #ffffff);
    color: var(--text-primary, #1e293b);
}

.fp-tool-btn.fp-tool-active {
    background: var(--primary, #2f7d6c);
    color: #ffffff;
}

.fp-tool-btn.fp-tool-danger:hover {
    background: #fef2f2;
    color: #ef4444;
}

.fp-tool-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.fp-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--border-color, #e2e8f0);
    margin: 0 2px;
    flex-shrink: 0;
}

[data-theme="dark"] .fp-toolbar {
    background: #1e293b;
}

[data-theme="dark"] .fp-tool-btn:hover {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .fp-tool-btn.fp-tool-danger:hover {
    background: #450a0a;
    color: #fca5a5;
}

/* Floorplan active — break dashboardView out of 600px constraint */
#dashboardView.fp-fullwidth {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

/* Canvas */
.fp-canvas-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    touch-action: none;
}

.fp-canvas-wrapper canvas {
    display: block;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .fp-canvas-wrapper {
    border-color: #334155;
}

/* Save Indicator */
.fp-save-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    margin-bottom: 8px;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #92400e;
}

[data-theme="dark"] .fp-save-indicator {
    background: #451a03;
    color: #fbbf24;
}

/* Property Panel */
.fp-property-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--surface, #f8fafc);
    border-radius: 10px;
    border: 1px solid var(--border, #e2e8f0);
    animation: fp-slide-up 0.2s ease;
}

@keyframes fp-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fp-prop-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fp-prop-row label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    min-width: 28px;
}

.fp-prop-row input[type="text"],
.fp-prop-row input[type="number"] {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--bg, #ffffff);
    color: var(--text-primary, #1e293b);
}

.fp-prop-row input[type="range"] {
    width: 80px;
}

.fp-prop-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

[data-theme="dark"] .fp-property-panel {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .fp-prop-row input[type="text"],
[data-theme="dark"] .fp-prop-row input[type="number"] {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}

/* Toast */
.fp-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 20px;
    font-size: 0.82rem;
    z-index: 1000;
    animation: fp-toast-in 0.3s ease;
    pointer-events: none;
}

.fp-toast.fp-toast-error {
    background: #991b1b;
}

@keyframes fp-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Hint */
.fp-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 8px;
    padding: 0 12px;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .fp-toolbar {
        padding: 4px;
        gap: 2px;
    }

    .fp-tool-btn {
        width: 32px;
        height: 32px;
    }

    .fp-tool-btn svg {
        width: 16px;
        height: 16px;
    }

    .fp-canvas-wrapper {
        height: calc(100vh - 300px);
        min-height: 320px;
    }

    .fp-property-panel {
        flex-direction: column;
        gap: 6px;
    }

    .fp-prop-actions {
        margin-left: 0;
    }
}

/* ==========================================
   AI 分桌助手 (TableAdvisor)
   ========================================== */

/* Panel base */
.ai-panel {
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.ai-panel-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.ai-panel-header h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.ai-panel-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 16px;
}

/* Step 1: Scenario grid */
.ai-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ai-scenario-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    text-align: center;
}

.ai-scenario-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.ai-scenario-card.selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.ai-scenario-icon {
    font-size: 2rem;
    line-height: 1;
}

.ai-scenario-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-scenario-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Custom rules */
.ai-custom-rules {
    margin-bottom: 16px;
}

.ai-custom-rules label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.ai-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.ai-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Stats bar */
.ai-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ai-stat-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.ai-stat-chip.green  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ai-stat-chip.blue   { background: #d6ece6; color: #1c4035; border-color: #bfe3d6; }
.ai-stat-chip.amber  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ai-stat-chip.red    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Lock grid */
.ai-lock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.ai-lock-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s, border-color 0.15s;
}

.ai-lock-item:hover {
    background: var(--bg-hover);
}

.ai-lock-item.locked {
    border-color: #fbbf24;
    background: color-mix(in srgb, #fbbf24 10%, var(--bg-secondary));
}

.ai-lock-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.ai-lock-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ai-lock-name {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-lock-count {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Actions bar */
.ai-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Generating / spinner */
.ai-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

/* Brain icon with pulsing ring */
.ai-brain-icon {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ai-brain-emoji {
    font-size: 2.2rem;
    z-index: 1;
    animation: ai-brain-pulse 2s ease-in-out infinite;
}

.ai-brain-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-top-color: var(--primary);
    animation: ai-spin 1.2s linear infinite;
}

@keyframes ai-brain-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.ai-generating-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
}

/* Step progress */
.ai-gen-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    text-align: left;
}

.ai-gen-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    opacity: 0.4;
    transition: opacity 0.4s, color 0.4s;
}

.ai-gen-step.active {
    opacity: 1;
    color: var(--text-primary);
}

.ai-gen-step.done {
    opacity: 0.7;
    color: #22c55e;
}

.ai-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}

.ai-gen-step.active .ai-step-dot {
    background: var(--primary);
    box-shadow: 0 0 6px color-mix(in srgb, var(--primary) 50%, transparent);
    animation: ai-dot-blink 1s ease-in-out infinite;
}

.ai-gen-step.done .ai-step-dot {
    background: #22c55e;
    box-shadow: none;
    animation: none;
}

@keyframes ai-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ai-generating-timer {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.ai-generating-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

.ai-error-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

/* Error block */
.ai-error-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0;
}

.ai-error-icon-lg {
    font-size: 3rem;
    margin-bottom: 12px;
}

.ai-error-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.ai-error-msg {
    font-size: 0.88rem;
    color: #ef4444;
    margin: 0 0 16px;
    max-width: 360px;
}

.ai-error-help {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: left;
    max-width: 380px;
    width: 100%;
    margin-bottom: 16px;
}

.ai-error-help-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.ai-error-help ul {
    margin: 0;
    padding-left: 18px;
}

.ai-error-help li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.5;
}

/* Preview grid */
.ai-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ai-preview-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: var(--bg-secondary);
}

.ai-preview-card.ai-preview-locked {
    border-color: #fbbf24;
    background: color-mix(in srgb, #fbbf24 5%, var(--bg-secondary));
}

.ai-preview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ai-preview-table-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.ai-preview-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.ai-preview-reasoning {
    font-size: 0.78rem;
    color: var(--primary);
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
}

.ai-preview-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

/* Diff pills */
.ai-pill-added {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
}

.ai-pill-removed {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
    text-decoration: line-through;
}

.ai-pill-unchanged {
    background: var(--bg-primary) !important;
    color: var(--text-muted) !important;
}

.ai-regen-btn {
    margin-top: 4px;
    font-size: 0.75rem !important;
}

/* Warnings banner */
.ai-warnings-banner {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: #92400e;
}

.ai-warnings-banner strong {
    display: block;
    margin-bottom: 4px;
}

.ai-warnings-banner ul {
    margin: 0;
    padding-left: 18px;
}

.ai-warnings-banner li {
    margin-bottom: 2px;
}

/* Unassigned section */
.ai-unassigned-section {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.ai-unassigned-section h4 {
    font-size: 0.88rem;
    margin: 0 0 8px;
    color: var(--text-primary);
}

/* Empty message */
.ai-empty-msg {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* ─── Dark mode overrides ─── */
[data-theme="dark"] .ai-stat-chip.green  { background: #14532d; color: #86efac; border-color: #166534; }
[data-theme="dark"] .ai-stat-chip.blue   { background: #143a30; color: #7fd8bd; border-color: #1c4035; }
[data-theme="dark"] .ai-stat-chip.amber  { background: #451a03; color: #fcd34d; border-color: #92400e; }
[data-theme="dark"] .ai-stat-chip.red    { background: #450a0a; color: #fca5a5; border-color: #991b1b; }

[data-theme="dark"] .ai-pill-added  { background: #14532d !important; color: #86efac !important; border-color: #166534 !important; }
[data-theme="dark"] .ai-pill-removed { background: #450a0a !important; color: #fca5a5 !important; border-color: #991b1b !important; }

[data-theme="dark"] .ai-warnings-banner { background: #451a03; color: #fcd34d; border-color: #92400e; }

[data-theme="dark"] .ai-scenario-card.selected {
    background: color-mix(in srgb, var(--primary) 15%, var(--bg-secondary));
}

[data-theme="dark"] .ai-preview-card.ai-preview-locked {
    border-color: #b45309;
    background: color-mix(in srgb, #fbbf24 8%, var(--bg-secondary));
}

[data-theme="dark"] .ai-lock-item.locked {
    border-color: #b45309;
    background: color-mix(in srgb, #fbbf24 8%, var(--bg-secondary));
}

/* ─── Mode Badge ─── */
.ai-mode-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    vertical-align: middle;
    margin-left: 8px;
}

/* ─── Phase A: Analysis Table ─── */
.ai-analysis-toolbar {
    margin-bottom: 10px;
}

.ai-analysis-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.ai-analysis-wrap {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.ai-analysis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.ai-analysis-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}

.ai-analysis-table th {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.ai-th-sortable {
    cursor: pointer;
    user-select: none;
}

.ai-th-sortable:hover {
    color: var(--text-primary);
}

.ai-th-sortable::after {
    content: ' ↕';
    opacity: 0.3;
    font-size: 0.7rem;
}

.ai-th-sortable.sort-asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--accent);
}

.ai-th-sortable.sort-desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--accent);
}

.ai-analysis-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.ai-analysis-table tr:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.ai-col-conf { width: 8px; padding: 0 4px !important; }
.ai-col-id { width: 60px; font-family: monospace; font-size: 0.75rem; color: var(--text-secondary); }
.ai-col-name { min-width: 80px; }
.ai-col-group { min-width: 60px; color: var(--text-secondary); font-size: 0.78rem; }
.ai-col-company { min-width: 60px; color: var(--text-secondary); font-size: 0.78rem; }

.ai-analysis-cell select,
.ai-analysis-cell input {
    width: 100%;
    padding: 3px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.ai-analysis-cell select:hover,
.ai-analysis-cell input:hover,
.ai-analysis-cell select:focus,
.ai-analysis-cell input:focus {
    border-color: var(--accent);
    background: var(--bg-primary);
    outline: none;
}

/* Confidence dots */
.ai-conf-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ai-conf-dot.ai-conf-high { background: #22c55e; }
.ai-conf-dot.ai-conf-medium { background: #f59e0b; }
.ai-conf-dot.ai-conf-low { background: #ef4444; }

/* Dark mode analysis */
[data-theme="dark"] .ai-analysis-search {
    background: var(--bg-secondary);
}

[data-theme="dark"] .ai-analysis-cell select,
[data-theme="dark"] .ai-analysis-cell input {
    color: var(--text-primary);
}

[data-theme="dark"] .ai-analysis-cell select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ─── Mobile adjustments ─── */
@media (max-width: 600px) {
    .ai-scenario-grid {
        grid-template-columns: 1fr;
    }

    .ai-preview-grid {
        grid-template-columns: 1fr;
    }

    .ai-lock-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .ai-panel {
        padding: 14px;
    }

    .ai-col-company,
    .ai-col-sub {
        display: none;
    }

    .ai-analysis-table {
        font-size: 0.75rem;
    }

    .ai-analysis-cell select,
    .ai-analysis-cell input {
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   [v7.0.0] Analytics Toolbar (PDF Export button)
   ═══════════════════════════════════════════════════════════ */
.analytics-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 12px;
}
.analytics-toolbar .btn-sm {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 8px;
}
.analytics-toolbar .btn-sm i[data-lucide] {
    width: 14px;
    height: 14px;
}

/* ═══════════════════════════════════════════════════════════
   [v6.9.9] Onboarding Overlay
   ═══════════════════════════════════════════════════════════ */
.onboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.onboard-overlay.visible { opacity: 1; }
.onboard-overlay.exiting { opacity: 0; pointer-events: none; }

.onboard-card {
    position: relative;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 20px;
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: onboardSlideUp 0.4s ease both;
}
@keyframes onboardSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.onboard-skip {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.onboard-skip:hover { opacity: 1; }

.onboard-icon-wrap {
    margin-bottom: 16px;
}
.onboard-emoji {
    font-size: 3.5rem;
    display: inline-block;
    animation: onboardBounce 0.6s ease 0.3s both;
}
@keyframes onboardBounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.onboard-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 8px;
}
.onboard-desc {
    font-size: 0.95rem;
    color: var(--text-secondary, #aaa);
    line-height: 1.6;
    margin: 0 0 24px;
}

.onboard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.onboard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border, rgba(255,255,255,0.15));
    transition: all 0.3s ease;
}
.onboard-dot.active {
    background: var(--primary, #2f7d6c);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(47, 125, 108,0.4);
}
.onboard-dot.done {
    background: var(--success, #10b981);
}

.onboard-step-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    margin-bottom: 20px;
}

.onboard-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.onboard-actions .btn {
    min-width: 100px;
    padding: 10px 20px;
    font-size: 0.9rem;
    border-radius: 10px;
}
.onboard-actions .btn-primary {
    background: linear-gradient(135deg, #2f7d6c, #1c4035);
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(47, 125, 108,0.3);
}
.onboard-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 125, 108,0.4);
}

/* Light mode */
[data-theme="light"] .onboard-card {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .onboard-title { color: #1a1a2e; }
[data-theme="light"] .onboard-desc { color: #555; }

/* ─────────────────────────────────────────────
   RSVP Public Form (index.html #rsvpView)
   ───────────────────────────────────────────── */
.rsvp-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 500px;
    margin: 20px auto;
}

.rsvp-header {
    text-align: center;
    margin-bottom: 24px;
}

.rsvp-header h2 {
    margin-bottom: 8px;
    color: #1e293b;
}

.rsvp-header p {
    color: #64748b;
    font-size: 0.95rem;
}

.rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.settings-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.radio-group {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.radio-item {
    flex: 1;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.radio-item:has(input:checked) {
    border-color: #34a085;
    background: #e9f4f0;
}

.radio-item input {
    width: 18px;
    height: 18px;
}

.radio-label {
    font-weight: 500;
}

textarea.form-field {
    min-height: 80px;
    resize: vertical;
}

.btn-full {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    margin-top: 8px;
}

.rsvp-success-msg {
    text-align: center;
    padding: 40px 0;
}

.success-icon {
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   [v7.9.0] Bulk Actions Panel
   ══════════════════════════════════════════════════════════════════ */

/* Search + filter bar */
.bulk-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.bulk-search-wrap .bulk-search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.bulk-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.bulk-filter-chip {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}
.bulk-filter-chip:hover {
    background: var(--glass-bg);
    color: var(--text-main);
}
.bulk-filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Select-all header */
.bulk-select-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.bulk-select-header input[type="checkbox"] {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}
.bulk-selected-count {
    font-weight: 600;
    color: var(--primary);
    margin-left: auto;
}

/* Guest rows */
.bulk-guest-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: calc(100vh - 360px);
    min-height: 120px;
}
.bulk-guest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s;
    background: var(--glass-bg);
}
.bulk-guest-row:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--glass-border);
}
.bulk-guest-row.selected {
    background: var(--table-select, #2a3a5e);
    border-color: var(--primary);
}
.bulk-guest-row input[type="checkbox"] {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}
.bulk-guest-info {
    flex: 1;
    min-width: 0;
}
.bulk-guest-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-guest-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-guest-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.bulk-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bulk-status-dot.arrived  { background: var(--success-color); }
.bulk-status-dot.pending  { background: var(--text-muted); }
.bulk-vvip-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(234,179,8,0.2);
    color: #eab308;
    border: 1px solid rgba(234,179,8,0.4);
}
.bulk-table-badge {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--glass-border);
}

/* Floating action bar */
.bulk-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--bg-secondary, #131c31);
    border-top: 1px solid var(--glass-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-top: 8px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
.bulk-action-bar.hidden { display: none; }
.bulk-action-bar .btn-danger {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.35);
}
.bulk-action-bar .btn-danger:hover {
    background: rgba(239,68,68,0.28);
}

/* Inline prompt row */
.bulk-prompt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
}
.bulk-prompt-row input,
.bulk-prompt-row textarea {
    flex: 1;
    font-size: 0.88rem;
}

/* Status toast */
.bulk-status-toast {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: none;
}
.bulk-status-toast.success { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); display: block; }
.bulk-status-toast.error   { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); display: block; }

/* Light mode overrides */
[data-theme="light"] .bulk-guest-row          { background: #f8fafc; border-color: #e2e8f0; }
[data-theme="light"] .bulk-guest-row:hover    { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .bulk-guest-row.selected { background: #d6ece6; border-color: var(--primary); }
[data-theme="light"] .bulk-select-header      { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .bulk-action-bar         { background: #f8fafc; border-color: #e2e8f0; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); }
[data-theme="light"] .bulk-table-badge        { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.onboard-skip:hover { opacity: 1; }

.onboard-icon-wrap {
    margin-bottom: 16px;
}
.onboard-emoji {
    font-size: 3.5rem;
    display: inline-block;
    animation: onboardBounce 0.6s ease 0.3s both;
}
@keyframes onboardBounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.onboard-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 8px;
}
.onboard-desc {
    font-size: 0.95rem;
    color: var(--text-secondary, #aaa);
    line-height: 1.6;
    margin: 0 0 24px;
}

.onboard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.onboard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border, rgba(255,255,255,0.15));
    transition: all 0.3s ease;
}
.onboard-dot.active {
    background: var(--primary, #2f7d6c);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(47, 125, 108,0.4);
}
.onboard-dot.done {
    background: var(--success, #10b981);
}

.onboard-step-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    margin-bottom: 20px;
}

.onboard-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.onboard-actions .btn {
    min-width: 100px;
    padding: 10px 20px;
    font-size: 0.9rem;
    border-radius: 10px;
}
.onboard-actions .btn-primary {
    background: linear-gradient(135deg, #2f7d6c, #1c4035);
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(47, 125, 108,0.3);
}
.onboard-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 125, 108,0.4);
}

/* Light mode */
[data-theme="light"] .onboard-card {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .onboard-title { color: #1a1a2e; }
[data-theme="light"] .onboard-desc { color: #555; }

/* ─────────────────────────────────────────────
   RSVP Public Form (index.html #rsvpView)
   ───────────────────────────────────────────── */
.rsvp-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 500px;
    margin: 20px auto;
}

.rsvp-header {
    text-align: center;
    margin-bottom: 24px;
}

.rsvp-header h2 {
    margin-bottom: 8px;
    color: #1e293b;
}

.rsvp-header p {
    color: #64748b;
    font-size: 0.95rem;
}

.rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
}

.settings-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.radio-group {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.radio-item {
    flex: 1;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.radio-item:has(input:checked) {
    border-color: #34a085;
    background: #e9f4f0;
}

.radio-item input {
    width: 18px;
    height: 18px;
}

.radio-label {
    font-weight: 500;
}

textarea.form-field {
    min-height: 80px;
    resize: vertical;
}

.btn-full {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    margin-top: 8px;
}

.rsvp-success-msg {
    text-align: center;
    padding: 40px 0;
}

.success-icon {
    margin-bottom: 16px;
}

/* ── Badge Print Panel ─────────────────────────── */
.badge-print-card {
    max-width: 820px;
}

.badge-options-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.badge-option-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.badge-option-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-select {
    padding: 6px 10px;
    font-size: 0.9rem;
}

.badge-fields-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.badge-field-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.badge-field-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.badge-field-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    cursor: pointer;
}

.badge-filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.badge-select-all-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.badge-count-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.badge-guest-list {
    max-height: 380px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.badge-guest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.badge-guest-row:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}

.badge-guest-row.selected {
    background: rgba(47, 125, 108, 0.08);
}

.dark .badge-guest-row.selected {
    background: rgba(95, 207, 174, 0.12);
}

.badge-guest-info {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge-guest-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.badge-guest-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.badge-guest-seat {
    font-size: 0.78rem;
    background: rgba(47, 125, 108, 0.1);
    color: #2f7d6c;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.dark .badge-guest-seat {
    background: rgba(95, 207, 174, 0.15);
    color: #7fd8bd;
}

.badge-vvip-crown {
    font-size: 0.85em;
}

.badge-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.badge-print-footer {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.badge-print-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 1rem;
}

@media (max-width: 600px) {
    .badge-options-row {
        flex-direction: column;
    }
    .badge-filter-row {
        flex-direction: column;
    }
}

/* ── [v7.9.0] Template Library ─────────────────────────────── */
.templates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}
.template-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 0.15s;
}
.template-row:hover {
    background: var(--surface-hover, var(--bg-secondary));
}
.template-row-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.template-row-name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.template-row-date {
    color: var(--text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.templates-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.templates-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
}
.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--danger, #ef4444);
    color: var(--danger, #ef4444);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-danger-outline:hover {
    background: var(--danger, #ef4444);
    color: #fff;
}
[data-theme='dark'] .btn-danger-outline {
    border-color: #f87171;
    color: #f87171;
}
[data-theme='dark'] .btn-danger-outline:hover {
    background: #f87171;
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════
   [v7.15.5] Setup Wizard Overlay
   ═══════════════════════════════════════════════════════════ */
.wz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wz-overlay.visible  { opacity: 1; }
.wz-overlay.exiting  { opacity: 0; pointer-events: none; }

.wz-card {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 28px 28px 24px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* Header: progress dots + skip */
.wz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.wz-progress { display: flex; gap: 6px; }
.wz-step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.25s;
}
.wz-step-dot.active { width: 24px; border-radius: 4px; background: var(--primary, #2f7d6c); }
.wz-step-dot.done   { background: var(--success-color, #22c55e); }
.wz-skip {
    background: none; border: none;
    font-size: 13px; color: rgba(255, 255, 255, 0.35);
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
    transition: color 0.2s;
}
.wz-skip:hover { color: rgba(255, 255, 255, 0.65); }

/* Body */
.wz-body {}
.wz-step-num {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--primary, #2f7d6c);
    margin-bottom: 8px;
}
.wz-title  { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.wz-desc   { font-size: 14px; color: rgba(255, 255, 255, 0.48); line-height: 1.65; margin-bottom: 24px; }

/* Step 1 — Type grid */
.wz-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
@media (max-width: 380px) { .wz-type-grid { grid-template-columns: repeat(2, 1fr); } }
.wz-type-card {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 8px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.wz-type-card:hover    { border-color: var(--primary, #2f7d6c); background: rgba(47, 125, 108,0.08); }
.wz-type-card.selected { border-color: var(--primary, #2f7d6c); background: rgba(47, 125, 108,0.16); }
.wz-type-icon  { font-size: 28px; line-height: 1; }
.wz-type-label { font-size: 12px; font-weight: 600; color: #fff; }

/* Step 2 — Form */
.wz-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.wz-field { display: flex; flex-direction: column; gap: 5px; }
.wz-field label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0.02em; }
.wz-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    font-family: inherit;
}
.wz-input:focus          { border-color: var(--primary, #2f7d6c); }
.wz-input::placeholder   { color: rgba(255, 255, 255, 0.22); }
.wz-input.wz-input-error { border-color: var(--error, #ef4444); }
.wz-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="date"].wz-input,
input[type="time"].wz-input { color-scheme: dark; }

/* Step 3 — Toggles */
.wz-toggles { display: flex; flex-direction: column; margin-bottom: 24px; }
.wz-toggle-row {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    gap: 16px;
}
.wz-toggle-row:last-child { border-bottom: none; }
.wz-toggle-label { font-size: 14px; font-weight: 600; color: #fff; }
.wz-toggle-desc  { font-size: 12px; color: rgba(255,255,255,0.38); margin-top: 2px; }
/* Toggle switch */
.wz-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.wz-switch input  { opacity: 0; width: 0; height: 0; }
.wz-slider {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px; cursor: pointer;
    transition: background 0.22s;
}
.wz-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform 0.22s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.wz-switch input:checked + .wz-slider               { background: var(--primary, #2f7d6c); }
.wz-switch input:checked + .wz-slider::before       { transform: translateX(20px); }

/* Step 4 — Done */
.wz-body-done { text-align: center; }
.wz-done-icon  { font-size: 60px; line-height: 1; margin-bottom: 16px; }
.wz-done-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* Actions bar */
.wz-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* Buttons */
.wz-btn {
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; border: none;
    transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
}
.wz-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.wz-btn.wz-next, .wz-btn-primary {
    background: var(--primary, #2f7d6c); color: #fff;
}
.wz-btn.wz-next:hover:not(:disabled), .wz-btn-primary:hover { background: #1c4035; }
.wz-btn-secondary {
    background: rgba(255,255,255,0.1); color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.wz-btn-secondary:hover { background: rgba(255,255,255,0.16); }
.wz-btn.wz-btn-outline, .wz-btn-outline {
    background: transparent; color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.15);
}
.wz-btn.wz-btn-outline:hover, .wz-btn-outline:hover { color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.3); }

/* Light mode overrides */
[data-theme="light"] .wz-card          { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 24px 64px rgba(0,0,0,0.14); }
[data-theme="light"] .wz-step-dot      { background: #e5e7eb; }
[data-theme="light"] .wz-skip          { color: #9ca3af; }
[data-theme="light"] .wz-skip:hover    { color: #6b7280; }
[data-theme="light"] .wz-title         { color: #111827; }
[data-theme="light"] .wz-desc          { color: #6b7280; }
[data-theme="light"] .wz-step-num      { color: var(--primary, #2f7d6c); }
[data-theme="light"] .wz-type-card     { border-color: #e5e7eb; }
[data-theme="light"] .wz-type-card:hover    { border-color: var(--primary, #2f7d6c); background: rgba(47, 125, 108,0.05); }
[data-theme="light"] .wz-type-card.selected { border-color: var(--primary, #2f7d6c); background: rgba(47, 125, 108,0.1); }
[data-theme="light"] .wz-type-label    { color: #111827; }
[data-theme="light"] .wz-field label   { color: #6b7280; }
[data-theme="light"] .wz-input         { background: #f9fafb; border-color: #e5e7eb; color: #111827; }
[data-theme="light"] .wz-input::placeholder { color: #d1d5db; }
[data-theme="light"] .wz-input:focus   { border-color: var(--primary, #2f7d6c); }
[data-theme="light"] input[type="date"].wz-input,
[data-theme="light"] input[type="time"].wz-input { color-scheme: light; }
[data-theme="light"] .wz-toggle-row    { border-color: #f3f4f6; }
[data-theme="light"] .wz-toggle-label  { color: #111827; }
[data-theme="light"] .wz-toggle-desc   { color: #9ca3af; }
[data-theme="light"] .wz-slider        { background: #d1d5db; }
[data-theme="light"] .wz-slider::before { box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
[data-theme="light"] .wz-btn-secondary { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
[data-theme="light"] .wz-btn-secondary:hover { background: #e5e7eb; }
[data-theme="light"] .wz-btn.wz-btn-outline, [data-theme="light"] .wz-btn-outline { color: #9ca3af; border-color: #e5e7eb; }
[data-theme="light"] .wz-btn.wz-btn-outline:hover, [data-theme="light"] .wz-btn-outline:hover { color: #374151; }

/* Ceremony note in rsvp.html */
.ceremony-note {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(47, 125, 108,0.1); border: 1px solid rgba(47, 125, 108,0.3);
    border-radius: 10px; padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px; line-height: 1.55; color: #a5b4fc;
}

/* ============================================================
   v7.18.37 — Medday-style Stats Pill (replaces UX Fix #2)
   統一桌面/手機 UI：永遠可見的 navy pill + 內嵌 gradient 進度條 +
   點擊展開 battery-style popup（名單/人數/15分鐘吞吐量）
   ============================================================ */
.medstat-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
}
.medstat-pill {
    flex: 1;
    min-width: 0;
    background: #0d2344;
    color: #fff;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(13,35,68,0.18);
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
    text-align: left;
    padding: 0;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.medstat-pill:hover { background: #143057; }
.medstat-pill:active { transform: scale(0.99); }
.medstat-pill:focus-visible { outline: 2px solid #5fd9c5; outline-offset: 2px; }
.medstat-pill-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px 7px;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.medstat-pill-content::-webkit-scrollbar { display: none; }
.medstat-pill-stats {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.medstat-pill-stats .ms-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.medstat-pill-stats .ms-lab { color: rgba(255,255,255,0.6); font-weight: 400; }
.medstat-pill-stats b {
    font-weight: 700;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.medstat-pill-stats .ms-rate {
    color: #5fd9c5;
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    margin-left: 2px;
}
.medstat-pill-stats .ms-gold { color: #f0c75e; }
.medstat-pill-stats .ms-sep { color: rgba(255,255,255,0.2); font-weight: 300; }
.ms-chevron {
    width: 14px; height: 14px;
    color: rgba(255,255,255,0.5);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}
.medstat-pill.is-open .ms-chevron { transform: rotate(180deg); }
.ms-pillbar {
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 0 14px 8px;
    border-radius: 999px;
    overflow: hidden;
}
.ms-pillbar-fill {
    height: 100%;
    background: linear-gradient(to right, #5fd9c5, #f0c75e);
    transition: width 0.7s ease;
    width: 0%;
    border-radius: 999px;
}

.ms-aside { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ms-sync {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition:
        background 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.1s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ms-sync:hover { background: var(--bg-tertiary, #f1f5f9); border-color: var(--text-muted, #94a3b8); }
.ms-sync:active { transform: scale(0.96); }

/* [v7.22.27] Last-sync popover — tap 已同步 chip 後彈出 */
.ms-sync-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0f172a;
    color: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 100;
}
.ms-sync-popover.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ms-sync-popover::before {
    content: '';
    position: absolute;
    top: -4px;
    right: 14px;
    width: 8px;
    height: 8px;
    background: #0f172a;
    transform: rotate(45deg);
}
[data-theme="dark"] .ms-sync-popover {
    background: #f8fafc;
    color: #0f172a;
}
[data-theme="dark"] .ms-sync-popover::before { background: #f8fafc; }
.ms-sync-popover-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.ms-sync-popover-rel {
    opacity: 0.7;
    margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .ms-sync, .ms-sync-popover {
        transition-duration: 0.01ms !important;
    }
}
.ms-syncdot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}
.ms-syncdot.connected {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
    animation: msSyncPulse 2s ease-out infinite;
}
.ms-syncdot.offline { background: #f59e0b; }
@keyframes msSyncPulse {
    0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0);    }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);    }
}
.ms-refresh-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #fff);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
    transition:
        color 0.18s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.18s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.18s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.18s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-tap-highlight-color: transparent;
}
.ms-refresh-btn:hover {
    color: var(--text-main);
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--text-muted, #94a3b8);
}
.ms-refresh-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 0 3px rgba(47, 125, 108, 0.18);
}
.ms-refresh-btn i,
.ms-refresh-btn svg {
    width: 16px; height: 16px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
    will-change: transform;
}
.ms-refresh-btn:hover i,
.ms-refresh-btn:hover svg {
    transform: rotate(18deg);
}

/* [v7.22.27] Click → 一次 360° spin（snappier easing + 略長） */
@keyframes ms-refresh-spin-once {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.ms-refresh-btn.is-spinning i,
.ms-refresh-btn.is-spinning svg {
    animation: ms-refresh-spin-once 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotate(360deg);
}

/* Loading state → 持續 spin + 邊框柔光 + glow pulse */
@keyframes ms-refresh-spin-loop {
    to { transform: rotate(360deg); }
}
@keyframes ms-refresh-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(47, 125, 108, 0.12); }
    50%      { box-shadow: 0 0 0 4px rgba(47, 125, 108, 0.22); }
}
.ms-refresh-btn.is-syncing {
    border-color: #2f7d6c;
    animation: ms-refresh-glow-pulse 1.4s ease-in-out infinite;
    pointer-events: none;
}
.ms-refresh-btn.is-syncing i,
.ms-refresh-btn.is-syncing svg {
    animation: ms-refresh-spin-loop 0.8s linear infinite;
    color: #2f7d6c;
}

@media (prefers-reduced-motion: reduce) {
    .ms-refresh-btn,
    .ms-refresh-btn i,
    .ms-refresh-btn svg {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .ms-refresh-btn:hover i,
    .ms-refresh-btn:hover svg { transform: none; }
}

/* Popup card */
.ms-popup {
    margin-top: 8px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.ms-popup.hidden { display: none; }
.ms-bar-row { display: flex; flex-direction: column; gap: 4px; }
.ms-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.72rem;
    gap: 8px;
}
.ms-bar-label { color: var(--text-muted, #64748b); }
.ms-bar-value {
    color: var(--text-main, #0d2344);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}
.ms-mint { color: #0e7490; font-weight: 700; }
.ms-mint-bold { color: #0e7490; font-weight: 600; margin-left: 6px; }
.ms-gold-bold { color: #b45309; font-weight: 700; }
.ms-muted { color: #94a3b8; }
.medstat-pill-stats .ms-rate { color: #22d3ee; }
.medstat-pill-stats .ms-gold { color: #f59e0b; }
.ms-pillbar-fill { background: linear-gradient(to right, #22d3ee, #f59e0b); }

/* ────────────────────────────────────────
   VVIP attendance row
   ──────────────────────────────────────── */
.ms-vvip-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.02));
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 10px;
}
.ms-vvip-num { color: #b45309; font-weight: 700; font-size: 0.78rem; }
.ms-vvip-rate { font-weight: 700; margin-left: 6px; font-size: 0.72rem; }
.ms-vvip-rate.ms-vvip-good { color: #15803d; }
.ms-vvip-rate.ms-vvip-warn { color: #dc2626; }
.ms-vvip-missing {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.ms-vvip-pill-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    font-size: 0.7rem;
    color: #9a3412;
    font-weight: 600;
    white-space: nowrap;
}
.ms-vvip-more {
    padding: 3px 8px;
    background: rgba(180,83,9,0.1);
    border-radius: 999px;
    font-size: 0.68rem;
    color: #b45309;
    font-weight: 700;
}
.ms-vvip-allgood {
    font-size: 0.72rem;
    color: #15803d;
    font-weight: 600;
}
[data-theme="dark"] .ms-vvip-row {
    background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.03));
    border-color: rgba(245,158,11,0.3);
}
[data-theme="dark"] .ms-vvip-pill-name {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.35);
    color: #fdba74;
}
[data-theme="dark"] .ms-vvip-rate.ms-vvip-good { color: #4ade80; }
[data-theme="dark"] .ms-vvip-rate.ms-vvip-warn { color: #f87171; }

/* VVIP item inside navy pill */
.ms-vvip-pill .ms-vvip-emoji { font-size: 0.9em; line-height: 1; }
.ms-vvip-pill b {
    color: #fbbf24 !important;
    font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────
   Live ticker — last 5 check-ins, rolling
   ──────────────────────────────────────── */
.ms-ticker-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ms-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
    animation: msLiveDotPulse 1.6s ease-out infinite;
    margin-right: 5px;
    vertical-align: middle;
}
@keyframes msLiveDotPulse {
    0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.65); }
    70%  { box-shadow: 0 0 0 5px rgba(34,197,94,0);    }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);    }
}
.ms-ticker-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 200px;
    overflow: hidden;
}
.ms-ticker-empty {
    padding: 12px 10px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: 0.72rem;
    background: var(--bg-tertiary, #f8fafc);
    border-radius: 8px;
    font-style: italic;
}
.ms-ticker-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-tertiary, #f8fafc);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.72rem;
    transition: background 0.2s;
}
.ms-ticker-item:hover { background: var(--bg-secondary, #fff); }
.ms-ticker-name {
    font-weight: 600;
    color: var(--text-main, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-ticker-vvip { font-size: 0.85em; }
.ms-ticker-table {
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    padding: 1px 7px;
    background: rgba(34,211,238,0.1);
    border-radius: 999px;
    color: #0e7490;
    font-weight: 600;
    white-space: nowrap;
}
.ms-ticker-time {
    color: var(--text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    white-space: nowrap;
}
.ms-ticker-new {
    animation: msTickerSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(90deg, rgba(34,211,238,0.18), rgba(34,211,238,0.04)) !important;
    border-color: rgba(34,211,238,0.4) !important;
}
@keyframes msTickerSlideIn {
    0%   { transform: translateY(-12px); opacity: 0; }
    60%  { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
[data-theme="dark"] .ms-ticker-item { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .ms-ticker-item:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ms-ticker-name { color: var(--text-main); }
[data-theme="dark"] .ms-ticker-table { background: rgba(34,211,238,0.15); color: #67e8f9; }

.ms-battery {
    display: flex;
    align-items: center;
}
.ms-battery-shell {
    flex: 1;
    height: 18px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9; /* slate-100, cool tone matches brand palette */
    overflow: hidden;
}
.ms-battery-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.7s ease;
    width: 0%;
}
.ms-fill-mint { background: linear-gradient(to right, #0e7490, #22d3ee); }
.ms-fill-gold { background: linear-gradient(to right, #b45309, #f59e0b); }
.ms-battery-cap {
    width: 4px;
    height: 10px;
    border-radius: 0 2px 2px 0;
    background: #cbd5e1;
    margin-left: 1px;
}
.ms-throughput {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}
.ms-rate-pace { margin-left: 8px; }
.ms-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.65rem;
    color: var(--text-muted, #94a3b8);
    padding-top: 4px;
}

/* Dark mode */
[data-theme="dark"] .ms-popup {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .ms-sync,
[data-theme="dark"] .ms-refresh-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .ms-battery-shell {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.18);
}
[data-theme="dark"] .ms-throughput,
[data-theme="dark"] .ms-meta-row { border-top-color: rgba(255,255,255,0.08); }

/* Mobile — same design, slightly tighter */
@media (max-width: 767px) {
    .medstat-pill-content { padding: 8px 12px 6px; gap: 8px; font-size: 0.72rem; }
    .medstat-pill-stats { gap: 8px; }
    .medstat-pill-stats b { font-size: 0.8rem; }
    .ms-pillbar { margin: 0 12px 7px; }
    .ms-sync { padding: 4px 8px; font-size: 0.65rem; }
    .ms-refresh-btn { width: 32px; height: 32px; }
    .ms-popup { padding: 10px 12px; }
}

/* ============================================================
   UX Fix #3 — Fullscreen mode (Issue #3)
   活動日反饋：缺乏全螢幕模式，座位表/平面圖被 UI 框架佔去空間
   ============================================================ */
.seating-fullscreen-btn {
    padding: 4px 8px;
    opacity: 0.6;
    min-width: unset;
    flex: 0 0 auto;
}
.seating-fullscreen-btn:hover { opacity: 1; }

.app-container.seating-fullscreen .app-header,
.app-container.seating-fullscreen .app-nav,
.app-container.seating-fullscreen .nav-toggle-pill {
    display: none !important;
}
.app-container.seating-fullscreen #mainContent {
    padding-bottom: 0 !important;
}
.app-container.seating-fullscreen #seatingFullscreenBtn {
    opacity: 1;
    color: var(--primary);
}

/* ============================================================
   UX Fix #4 — Bottom nav toggle pill (Issue #4)
   活動日反饋：底部 nav 無法收合，監控平面圖時純屬佔位
   ============================================================ */
.nav-toggle-pill {
    position: fixed;
    bottom: calc(var(--nav-height, 64px) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 2px 14px;
    cursor: pointer;
    z-index: 490;
    color: var(--text-muted);
    transition: bottom 0.3s ease, opacity 0.2s ease;
    opacity: 0.7;
    line-height: 1;
}
.nav-toggle-pill:hover { opacity: 1; }
.nav-toggle-pill.hidden { display: none; }
.nav-toggle-pill i { width: 14px; height: 14px; display: block; }

.app-nav.nav-hidden {
    transform: translateY(100%);
    pointer-events: none;
}
.app-nav {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When nav hidden, pill floats just above safe area */
.app-nav.nav-hidden ~ .nav-toggle-pill,
body:has(.app-nav.nav-hidden) .nav-toggle-pill {
    bottom: calc(8px + env(safe-area-inset-bottom));
}

/* ============================================================
   UX Fix #5 — Settings dropdown (Issue #5)
   活動日反饋：頂部 lang/theme 按鈕佔位，收入設定下拉選單
   ============================================================ */
.settings-menu-wrap {
    position: relative;
}
.settings-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    min-width: 140px;
    z-index: 700;
    overflow: hidden;
    animation: fadeInDown 0.15s ease;
}
.settings-dropdown.hidden { display: none; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.settings-item:hover { background: var(--bg-secondary); }
.settings-item i { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.settings-item + .settings-item { border-top: 1px solid var(--glass-border); }

/* ============================================================
   UX Fix #1 — Landscape mode: bottom nav too tall (Issue #1)
   活動日反饋：手機橫向時底部 nav 佔空間過多，壓縮主內容區
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .app-nav {
        padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
    }
    .nav-item {
        padding: 3px 6px;
        gap: 1px;
    }
    .nav-item span {
        font-size: 0.6rem;
    }
    .nav-item i {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   UX Fix #7 — Mobile UI info density (Issue #7)
   活動日反饋：手機 UI 資訊密度過高，次要元素佔用過多屏幕空間
   ============================================================ */
@media (max-width: 767px) {
    .header-top {
        gap: 4px;
    }
    #refreshBtn span[data-i18n] {
        display: none;
    }
    .app-header {
        padding: 6px 12px;
    }
    .stats-bar {
        font-size: 0.78rem;
        padding: 3px 8px;
    }
}

/* ============================================================
   v7.18.36 — Mobile Hub Drawer
   手機 hub sidebar 改 drawer 模式：預設收起，點漢堡按鈕滑出 overlay
   桌面 (≥768px) 維持原有 always-visible 行為
   ============================================================ */

/* Hamburger button — only on mobile, only inside dispatchView */
.hub-drawer-open-btn {
    display: none; /* hidden on desktop */
}
.hub-drawer-open-label {
    display: none; /* fallback — only shown on mobile inside .hub-drawer-open-btn */
}
.hub-drawer-close-btn {
    display: none; /* hidden on desktop, only shows on mobile */
}
.hub-drawer-header {
    display: none; /* hidden on desktop */
}
.hub-drawer-backdrop {
    display: none;
}

@media (max-width: 767px) {
    /* [v7.22.2] Drawer trigger — panel-left icon-only, minimal & quiet */
    .hub-drawer-open-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 8px;
        width: 44px;
        height: 44px; /* 44×44 touch target maintained */
        margin: 8px auto 8px 4px; /* left-aligned */
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: var(--text-muted, #64748b);
        cursor: pointer;
        z-index: 50;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .hub-drawer-open-btn:active { background: var(--bg-tertiary, #f1f5f9); }
    .hub-drawer-open-btn:hover {
        background: rgba(47, 125, 108, 0.08);
        color: var(--text-main, #1e293b);
    }
    .hub-drawer-open-btn i {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }
    .hub-drawer-header { display: flex; }

    /* Drawer mode — sidebar fixed off-screen, slides in when .drawer-open */
    .hub-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 76vw;
        max-width: 300px;
        z-index: 9000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 18px rgba(0,0,0,0.22);
        overflow-y: auto;
        padding-top: 0;
        background: var(--bg-primary, #fff);
    }
    .hub-sidebar.drawer-open {
        transform: translateX(0);
    }
    /* On mobile, ignore the desktop "collapsed" state — drawer always full-width when open */
    .hub-sidebar.collapsed {
        width: 76vw;
        max-width: 300px;
    }
    .hub-sidebar.collapsed .hub-tab-label {
        display: inline;
    }
    .hub-sidebar.collapsed .hub-tab {
        justify-content: flex-start;
        padding: 12px 14px;
        gap: 10px;
    }
    .hub-sidebar.collapsed .hub-tab-group-label {
        display: block;
    }

    /* Hide the desktop ugly toggles on mobile */
    #hubSidebarToggle,
    .hub-collapse-tab {
        display: none !important;
    }

    /* [v7.21.4] Drawer header — sticky breadcrumb + 顯著 close button */
    .hub-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 12px 12px 12px 16px;
        background: var(--bg-primary, #fff);
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .hub-drawer-header-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-main, #0f172a);
        letter-spacing: 0.01em;
    }
    .hub-drawer-header-title i {
        width: 18px;
        height: 18px;
        stroke-width: 2;
        color: var(--primary, #2f7d6c);
    }
    /* [v7.22.2] Close button — panel-left icon-only, flipped to indicate "hide sidebar" */
    .hub-drawer-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: var(--text-muted, #64748b);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .hub-drawer-close-btn:active { background: var(--bg-tertiary, #f1f5f9); }
    .hub-drawer-close-btn:hover {
        background: rgba(47, 125, 108, 0.08);
        color: var(--text-main, #1e293b);
    }
    .hub-drawer-close-btn i {
        width: 22px;
        height: 22px;
        stroke-width: 2;
        transform: scaleX(-1); /* flip — drawer is OPEN, click to hide (panel goes left) */
    }

    /* No extra top padding needed — close button is now in flex flow */
    .hub-sidebar {
        padding-top: 0;
    }
    .hub-sidebar #hubSidebarToggle { display: none; } /* hide desktop toggle on mobile */

    /* Backdrop */
    .hub-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 8999;
    }
    .hub-drawer-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Body lock when drawer open */
    body.hub-drawer-active {
        overflow: hidden;
    }

    /* Make hub-content full width since sidebar is now overlay */
    .hub-layout {
        display: block;
    }
    .hub-content {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Dark mode adjustments — v7.22.2 panel-left icon button stays transparent */
[data-theme="dark"] .hub-drawer-open-btn {
    color: var(--text-muted);
}
[data-theme="dark"] .hub-drawer-open-btn:hover,
[data-theme="dark"] .hub-drawer-close-btn:hover {
    background: rgba(47, 125, 108, 0.14);
    color: var(--text-main);
}
[data-theme="dark"] .hub-sidebar {
    background: var(--bg-secondary);
}


/* ─────────────────────────────────────────────────────
   [v7.20.5] Seating upper-section refinements
   /distill /arrange /normalize /polish
   ───────────────────────────────────────────────────── */

/* Inline RTDB sync indicator — moved out of hero, positioned subtly above tab bar */
.rtdb-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0 0 8px 4px;
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: opacity 0.2s;
}
.rtdb-status-inline:hover { opacity: 0.7; }
.rtdb-status-inline .rtdb-status-label {
    line-height: 1;
}
.rtdb-status-inline.rtdb-online {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.25);
}
.rtdb-status-inline.rtdb-offline {
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.25);
}
[data-theme="dark"] .rtdb-status-inline { border-color: #334155; }
[data-theme="dark"] .rtdb-status-inline.rtdb-online { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
[data-theme="dark"] .rtdb-status-inline.rtdb-offline { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }

/* Compact tab bar — segmented control feel */
.seating-tab-bar-compact {
    margin-bottom: 14px;
}
.seating-tab-bar-compact .seating-tab {
    padding: 7px 14px;
    font-size: 0.8rem;
}
.seating-tab-bar-compact .seating-tab svg {
    width: 14px;
    height: 14px;
}

/* v2 stats row — inline progress instead of stacked, single source of truth */
.seating-stats-v2 {
    padding: 10px 14px;
    gap: 8px;
}
.seating-stats-v2 .seating-stats-row {
    flex-wrap: wrap;
    gap: 4px 8px;
}
.seating-stats-v2 .seating-checkin-row {
    margin-top: 6px;
    gap: 10px;
}
.seating-stats-v2 .seating-checkin-track {
    flex: 1;
    height: 6px;
}
.seating-stats-v2 .seating-checkin-pct {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    white-space: nowrap;
}

/* Success chip — VVIP all arrived (replaces full-width banner) */
.stat-chip-success {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
[data-theme="dark"] .stat-chip-success {
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.3);
}

/* v2 sticky bar — search wider, actions right-aligned, tighter */
.seating-sticky-bar-v2 {
    padding: 10px 0;
    gap: 8px;
}
.seating-sticky-bar-v2 .seating-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.seating-sticky-bar-v2 .seating-search-wrap {
    flex: 1;
    min-width: 0;
}
.seating-sticky-bar-v2 .seating-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Filter chips v2 — color dot replaces emoji */
.seating-filter-bar-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.seating-filter-bar-v2 .seating-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
}
.filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.filter-dot.dot-green { background: #16a34a; }
.filter-dot.dot-amber { background: #f59e0b; }
.filter-dot.dot-blue { background: #2f7d6c; }
.filter-dot.dot-red { background: #dc2626; }

/* Mobile — tighter still */
@media (max-width: 640px) {
    .seating-sticky-bar-v2 .seating-toolbar {
        flex-wrap: wrap;
    }
    .seating-sticky-bar-v2 .seating-search-wrap {
        flex: 1 1 100%;
        order: 2;
    }
    .seating-sticky-bar-v2 .seating-actions {
        order: 1;
        margin-left: auto;
    }
    .rtdb-status-inline {
        font-size: 0.65rem;
        padding: 2px 7px;
    }
}


/* ─────────────────────────────────────────────────────────────
 * [v7.22.13] Landing page (post-login route picker for new users)
 * ───────────────────────────────────────────────────────────── */
/* [v7.22.21+] All rules scoped to #postLoginLanding to avoid collisions with
 * the marketing landing page (#landingView), which already uses some of the
 * same class names. */
#postLoginLanding {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--bg-primary, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#postLoginLanding .plw-wrap {
    width: 100%;
    max-width: 760px;
}
#postLoginLanding .plw-card {
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 40px 32px 28px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    text-align: center;
}
#postLoginLanding .plw-title {
    margin: 0 0 6px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main, #1e293b);
}
#postLoginLanding .plw-sub {
    margin: 0 0 28px;
    color: var(--text-muted, #64748b);
    font-size: 0.95rem;
}
#postLoginLanding .plw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    #postLoginLanding .plw-grid { grid-template-columns: 1fr; }
    #postLoginLanding .plw-card { padding: 28px 20px 20px; }
    #postLoginLanding .plw-title { font-size: 1.3rem; }
}
#postLoginLanding .plw-option {
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    font: inherit;
    color: inherit;
}
#postLoginLanding .plw-option:hover:not(:disabled) {
    border-color: var(--primary-color, #2f7d6c);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(52, 160, 133, 0.12);
}
#postLoginLanding .plw-option:disabled { opacity: 0.5; cursor: not-allowed; }
#postLoginLanding .plw-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(52, 160, 133, 0.12);
    color: var(--primary-color, #2f7d6c);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
#postLoginLanding .plw-icon i { width: 22px; height: 22px; }
#postLoginLanding .plw-option h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
#postLoginLanding .plw-option p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}
#postLoginLanding .plw-footer {
    margin-top: 18px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 14px;
}
#postLoginLanding .plw-link {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
#postLoginLanding .plw-link:hover { color: var(--text-main, #1e293b); text-decoration: underline; }

/* Join modal (rendered outside #postLoginLanding wrapper but only used by it) */
.plw-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.plw-modal.hidden { display: none; }
.plw-modal-box {
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 28px 24px 22px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    position: relative;
    text-align: center;
}
.plw-modal-box h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main, #1e293b);
}
.plw-modal-hint {
    margin: 0 0 18px;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    line-height: 1.55;
}
.plw-modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.plw-modal-x:hover {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-main, #1e293b);
}
.plw-modal-x i { width: 16px; height: 16px; }
.plw-modal-box input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--bg-secondary, #ffffff);
    color: var(--text-main, #1e293b);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font: inherit;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.plw-modal-box input:focus {
    outline: none;
    border-color: var(--primary-color, #2f7d6c);
    box-shadow: 0 0 0 3px rgba(52, 160, 133, 0.18);
}
.plw-modal-status {
    font-size: 0.78rem;
    margin-top: 8px;
    min-height: 1.2em;
    color: var(--text-muted, #64748b);
    text-align: left;
}
.plw-modal-where {
    margin: 14px 0 0;
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.55;
    padding: 10px 12px;
    background: rgba(100, 116, 139, 0.08);
    border-radius: 8px;
    text-align: left;
}
.plw-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}
.plw-btn-ghost,
.plw-btn-primary {
    padding: 8px 18px;
    border-radius: 8px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    border: 1px solid transparent;
}
.plw-btn-ghost {
    background: transparent;
    color: var(--text-muted, #64748b);
    border-color: var(--border-color, #e2e8f0);
}
.plw-btn-ghost:hover {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-main, #1e293b);
}
.plw-btn-primary {
    background: var(--primary-color, #2f7d6c);
    color: #fff;
}
.plw-btn-primary:hover:not(:disabled) {
    background: #245a4b;
    transform: translateY(-1px);
}
.plw-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
 * Invite links panel (in Hub → Operators tab)
 * ───────────────────────────────────────────────────────────── */
.invite-panel { margin-top: 18px; }
.invite-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.invite-panel-header .invite-meta {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    flex: 1;
    min-width: 0;
}
.invite-form {
    background: var(--bg-primary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    align-items: end;
}
@media (max-width: 700px) {
    .invite-form { grid-template-columns: 1fr 1fr; }
}
.invite-form label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-main, #1e293b);
    margin-bottom: 4px;
    opacity: 0.75;
}
.invite-form select, .invite-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #ffffff);
    color: var(--text-main, #1e293b);
    font: inherit;
    font-size: 0.85rem;
}
.invite-form select:focus, .invite-form input:focus {
    outline: none;
    border-color: var(--primary-color, #2f7d6c);
    box-shadow: 0 0 0 3px rgba(47, 125, 108, 0.18);
}
/* Ensure native select options are readable across OS themes */
.invite-form select option {
    background: #ffffff;
    color: #1e293b;
}
[data-theme="dark"] .invite-form {
    background: var(--bg-secondary, #131c31);
    border-color: var(--border-color, #1e3050);
}
[data-theme="dark"] .invite-form label {
    color: var(--text-muted, #94a3b8);
    opacity: 1;
}
[data-theme="dark"] .invite-form select,
[data-theme="dark"] .invite-form input {
    background: #1e293b;
    color: #f1f5f9;
    border-color: var(--border-color, #1e3050);
}
[data-theme="dark"] .invite-form select option {
    background: #1e293b;
    color: #f1f5f9;
}
.invite-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--bg-secondary, #ffffff);
    flex-wrap: wrap;
}
[data-theme="dark"] .invite-list-item {
    background: var(--bg-secondary, #131c31);
    border-color: var(--border-color, #1e3050);
}
.invite-code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
[data-theme="dark"] .invite-code { color: var(--text-main, #f1f5f9); }
.invite-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
[data-theme="dark"] .invite-meta { color: var(--text-muted, #94a3b8); }
.invite-actions { margin-left: auto; display: flex; gap: 6px; }
.invite-role-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(52, 160, 133, 0.12);
    color: #245a4b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
[data-theme="dark"] .invite-role-badge {
    background: rgba(52, 160, 133, 0.2);
    color: #7fd8bd;
}
.invite-role-badge.scanner {
    background: rgba(100, 116, 139, 0.18);
    color: #334155;
}
[data-theme="dark"] .invite-role-badge.scanner {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}
.invite-status-revoked { opacity: 0.5; }
.invite-status-exhausted { opacity: 0.7; }

/* ─────────────────────────────────────────────────────────────
 * [v7.22.21+] New-user onboarding overlay
 * ───────────────────────────────────────────────────────────── */
#onboardingOverlay {
    /* inherits .plw-modal: fixed inset:0, z-index, dark backdrop, flex centre */
}
#onboardingOverlay .ob-box {
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
    position: relative;
    text-align: center;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
@media (max-width: 600px) {
    #onboardingOverlay .ob-box { padding: 28px 22px 22px; }
}
.ob-badge {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(52, 160, 133, 0.18), rgba(47, 125, 108, 0.18));
    color: var(--primary-color, #2f7d6c);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.ob-badge i { width: 26px; height: 26px; }
.ob-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main, #1e293b);
    line-height: 1.3;
}
.ob-sub {
    margin: 0 0 22px;
    font-size: 0.9rem;
    color: var(--text-muted, #64748b);
    line-height: 1.55;
}
.ob-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
    text-align: left;
}
.ob-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    background: rgba(100, 116, 139, 0.08);
    border-radius: 10px;
}
.ob-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-secondary, #ffffff);
    color: var(--primary-color, #2f7d6c);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e2e8f0);
}
.ob-feature-icon i { width: 18px; height: 18px; }
.ob-feature h4 {
    margin: 0 0 3px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
    line-height: 1.3;
}
.ob-feature p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.5;
}
.ob-cta {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* [v7.22.21+] Init loading curtain (shown during GAS cold-start) */
#initLoadingCurtain {
    /* inherits .plw-modal: fixed inset:0, z-index:10000, dark backdrop */
    background: var(--bg-primary, #f8fafc);
}
.init-loading-box {
    text-align: center;
    padding: 32px;
}
.init-loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary-color, #2f7d6c);
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: init-spin 0.8s linear infinite;
}
@keyframes init-spin {
    to { transform: rotate(360deg); }
}
.init-loading-text {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
.init-loading-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

/* ── 危險區域 + 活動重置 Modal (v7.28.0) ───────────────────────── */
.danger-zone {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
}
[data-theme="dark"] .danger-zone {
    border-color: rgba(220, 38, 38, 0.45);
    background: rgba(220, 38, 38, 0.08);
}
.danger-zone-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
[data-theme="dark"] .danger-zone-title { color: #f87171; }
.danger-zone-note {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin: 0 0 12px;
    line-height: 1.5;
}
.danger-zone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reset-warn-banner {
    font-size: 0.85rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
    line-height: 1.5;
}
[data-theme="dark"] .reset-warn-banner {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.4);
}
.reset-backup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.reset-mode-label,
.reset-confirm-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
    margin-bottom: 8px;
}
.reset-confirm-label { margin-top: 4px; }
.reset-mode-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.reset-mode-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.reset-mode-item:hover { border-color: #2f7d6c; }
.reset-mode-item input { margin-top: 3px; }
.reset-mode-item span { display: flex; flex-direction: column; gap: 2px; }
.reset-mode-item b { font-size: 0.88rem; color: var(--text-main, #1e293b); }
.reset-mode-item small { font-size: 0.76rem; color: var(--text-muted, #64748b); line-height: 1.4; }
.reset-mode-desc {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    min-height: 1.2em;
    margin-bottom: 14px;
    line-height: 1.5;
}
#resetExecuteBtn:disabled { opacity: 0.5; cursor: not-allowed; }