/* Responsive Utility Classes */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Design Tokens */
:root {
    /* Colors */
    --color-primary: #14213d;       /* Dark Blue */
    --color-primary-hover: #0a1120; /* Darker Blue */
    --color-primary-light: #fca311; /* Orange (Accent) */
    
    --color-text-main: #000000;     /* Black */
    --color-text-secondary: #14213d;/* Dark Blue (Headings/Subtitles) */
    --color-text-tertiary: #666666; /* Gray (Muted) */
    
    --color-bg-body: #e5e5e5;       /* Light Grey */
    --color-bg-surface: #ffffff;    /* White */
    --color-bg-elevated: #f8f9fa;   /* Very Light Gray */
    --color-border: #e5e5e5;        /* Light Gray */
    --color-border-strong: #14213d; /* Dark Blue */
    
    --color-success: #2e7d32;       /* Green */
    --color-warning: #fca311;       /* Orange */
    --color-error: #d32f2f;         /* Red */

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.5rem;      /* 24px */
    
    /* UI Elements */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --focus-ring: 0 0 0 3px rgba(252, 163, 17, 0.4);
    
    /* Control Height */
    --control-height: 48px;
}

/* Dark Mode Theme */
[data-theme="dark"] {
    /* Colors Override */
    --color-primary: #101A31;
    --color-primary-hover: #0B1222;
    --color-primary-light: #C17902;
    
    --color-text-main: #e0e0e0;     /* Light Gray */
    --color-text-secondary: #CECAC4;
    --color-text-tertiary: #A59F97;
    
    --color-bg-body: #272A2C;
    --color-bg-surface: #181A1B;
    --color-bg-elevated: #181A1B;
    --color-border: #34373A;
    --color-border-strong: #2A3550;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .btn-primary {
    color: #E8E6E3;
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background-color: #A86801;
}

[data-theme="dark"] .btn-primary:disabled {
    background-color: #3a3a3a;
    color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] h2 {
    color: #FCAB26 !important;
}

[data-theme="dark"] h3 {
    color: #ffffff !important;
}

[data-theme="dark"] h1 span {
    color: #FCAB26;
}

[data-theme="dark"] .btn-text {
    color: #E8E6E3;
}

[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(252, 171, 38, 0.45);
    color: #FCAB26;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(252, 171, 38, 0.12);
    border-color: rgba(252, 171, 38, 0.75);
}

/* Footer section titles are always on dark bg — keep orange regardless of theme */
[data-theme="dark"] .footer-section-title {
    color: var(--color-primary-light) !important;
}

[data-theme="dark"] .card-image-wrapper {
    background-color: #181A1B;
    background: linear-gradient(90deg, #141616 25%, #1C1E1F 50%, #141616 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .card-image-wrapper.loaded {
    background: url('../img/BG-dark.svg') center / cover no-repeat, #181A1B;
    animation: none;
}

[data-theme="dark"] .card-img.error {
    background-color: #181A1B;
}

[data-theme="dark"] .nickname-image-wrapper {
    background: linear-gradient(90deg, #141616 25%, #1C1E1F 50%, #141616 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .nickname-image-wrapper.loaded {
    background: #181A1B;
    animation: none;
}

[data-theme="dark"] .nickname-card-image.error {
    background-color: #181A1B;
}

/* Header circular buttons */
.theme-toggle-btn,
.currency-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, border-color 0.3s;
    margin-left: var(--space-md);
}

.theme-toggle-btn:hover,
.currency-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Currency toggle: smaller text for better visual balance */
.currency-toggle-btn {
    font-size: 0.9rem;
    font-weight: 600;
}

.currency-menu {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 90px;
    color: var(--color-text-main);
}

.currency-menu-item {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
}

.currency-menu-item:hover {
    background: var(--color-bg-elevated);
}

/* Tom Select Overrides */
.ts-wrapper {
    width: 100%;
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    position: relative; /* Ensure dropdown/clear button position correctly */
}

.ts-control {
    min-height: var(--control-height);
    line-height: var(--control-height);
    padding: 0 12px !important; /* Match form-control padding */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    padding-right: 36px !important; /* Reserve space for clear button */
    background-color: var(--color-bg-surface);
}

/* Clear Button Styling */
.ts-wrapper .clear-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-tertiary);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: color 0.2s, opacity 0.2s;
    z-index: 10;
    line-height: 1;
}

.ts-wrapper.has-items .clear-button {
    opacity: 1;
    pointer-events: auto;
}

.ts-wrapper .clear-button:hover {
    color: var(--color-text-main);
}

.ts-control > input {
    font-size: var(--font-size-base);
    line-height: inherit;
    min-height: calc(var(--control-height) - 2px); /* Adjust for border */
}

.ts-dropdown {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    margin-top: 4px;
    z-index: 1000;
}

.ts-dropdown .option {
    padding: 8px 12px;
    font-size: var(--font-size-base);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Reserve scrollbar gutter so toggling tall/short content (e.g. collapseBtn,
   modal open/close, search expand) doesn't reflow the viewport horizontally —
   otherwise grid `1fr` columns shift ~15px when the scrollbar appears. */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Utility Classes for Accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* JS Dynamic Classes */
.retry-container {
    margin-top: var(--space-md);
}

.pagination-ellipsis {
    padding: 0 var(--space-sm);
    color: var(--color-text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Layout - Mobile First */
.container {
    width: 100%;
    padding: 0 var(--space-md);
    margin: 0 auto;
}

header {
    background-color: var(--color-primary);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    border-bottom: 1px solid var(--color-border-strong);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 100;
}
[data-theme="dark"] header {
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55);
}

.header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Secondary page header navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    transition: background var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.nav-link:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: inherit;
    width: 100%;
    white-space: nowrap;
}

h1 span {
    color: var(--color-primary-light);
}

.logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    margin-right: var(--space-md);
}

@media (max-width: 767px) {
    header {
        margin-bottom: var(--space-md);
    }

    .logo {
        height: 40px;
        margin-right: var(--space-sm);
    }
    
    h1 {
        font-size: var(--font-size-lg);
    }
}

/* Static Intro Content (SEO) */
.static-intro {
    margin-bottom: var(--space-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Platform Intro Feature Strip */
.platform-intro {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-xxl) var(--space-md);
    margin-top: var(--space-xl);
}

.platform-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* H2: centered text with fading rule lines on each side */
.platform-intro__title {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-xl);
    white-space: nowrap;
}

.platform-intro__title::before,
.platform-intro__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border));
}

.platform-intro__title::after {
    background: linear-gradient(to left, transparent, var(--color-border));
}

.platform-intro__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.platform-intro__item {
    text-align: center;
}

.platform-intro__icon {
    width: 48px;
    height: 48px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-sm);
    color: var(--color-primary);
}

.platform-intro__item h3 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.platform-intro__content {
    flex: 1;
    min-width: 0;
}

.platform-intro__item p {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.65;
    margin: 0;
}

/* Dark mode: icon circle uses body bg for contrast against surface */
[data-theme="dark"] .platform-intro__icon {
    background: var(--color-bg-body);
    border-color: var(--color-border);
    color: #FCAB26;
}

@media (max-width: 767px) {
    .platform-intro {
        padding: var(--space-md) var(--space-md) var(--space-sm);
        margin-top: var(--space-md);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.45s ease, transform 0.45s ease;
        will-change: opacity, transform;
    }

    .platform-intro.is-visible {
        opacity: 1;
        transform: translateY(0);
        will-change: auto;
    }

    .platform-intro__title {
        margin-bottom: var(--space-md);
        font-size: var(--font-size-sm);
    }

    .platform-intro__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .platform-intro__item {
        display: flex;
        flex-direction: row;
        gap: var(--space-sm);
        align-items: flex-start;
        text-align: left;
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .platform-intro__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .platform-intro__icon {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        margin: 0;
    }

    .platform-intro__icon svg {
        width: 16px;
        height: 16px;
    }

    .platform-intro__item h3 {
        font-size: var(--font-size-xs);
        margin-bottom: 2px;
    }

    .platform-intro__item p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .platform-intro {
        transform: none;
        transition: opacity 0.01ms;
    }
}

/* Search Section */
.search-section {
    background: var(--color-bg-surface);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border);
    margin-bottom: 0;
    position: relative;
    transition: all 0.3s ease;
}
[data-theme="dark"] .search-section {
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55);
}

.search-heading-visible {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs, 6px) 0;
    line-height: 1.4;
}

.search-trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.search-trust-bar span + span::before {
    content: '·';
    margin-right: 12px;
}

/* Collapse Button */
.collapse-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    z-index: 20;
}

.collapse-btn:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.collapse-btn .icon {
    font-size: 12px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Collapsed State Logic */
/* Mobile: Show only Keyword (1) and Search (Last) */
@media (max-width: 767px) {
    .search-form.collapsed .input-group:not(:nth-of-type(1)):not(:last-child) {
        display: none !important;
    }

    .search-form.collapsed .mobile-toggles-wrapper {
        display: none !important;
    }
}

.search-form.collapsed {
    margin-bottom: 0;
}

/* Desktop: Show Keyword (1), Sort (2), and Search (Last) */
@media (min-width: 768px) {
    .search-form.collapsed .input-group:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:last-child) {
        display: none !important;
    }

    .search-form.collapsed {
        display: grid;
        grid-template-columns: 1fr 140px minmax(min-content, 200px) 100px 50px;
        align-items: start;
        row-gap: var(--space-md);
        column-gap: var(--space-sm);
    }

    /* Input (1st group) */
    .search-form.collapsed > .input-group:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    /* Sort (2nd group) - Force display */
    .search-form.collapsed > .input-group:nth-of-type(2) {
        display: flex !important;
        grid-column: 3;
        grid-row: 1;
        width: 100%;
    }

    /* Search Button (Last group) */
    .search-form.collapsed .btn-group {
        grid-column: 4;
        grid-row: 1;
        width: 100px;
        max-width: 100px;
        margin-top: 24px; /* Align with input box (skip label) */
        align-self: start;
        justify-self: end;
    }

    .search-form.collapsed .btn {
        width: 100%;
        padding: 0 8px;
    }

    /* Collapse Button */
    .search-form.collapsed .collapse-btn {
        position: static;
        grid-column: 5;
        grid-row: 1;
        width: 50px;
        height: var(--control-height);
        border-radius: var(--radius-md);
        margin-top: 24px; /* Align with input box (skip label) */
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        justify-self: end;
    }
}

/* Search Form Grid Layout */
.search-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg); /* Space for absolute hint if needed */
}

.input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.input-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    font-weight: 500;
    display: flex;
    align-items: flex-end; /* text sits on same baseline */
    height: 20px; /* fixed label height */
    line-height: 1.2;
}

/* Input Wrapper for Icon/Button Positioning */
.input-wrapper {
    position: relative;
    width: 100%;
    height: var(--control-height);
}

/* Form Controls Unified Styling */
.form-control {
    width: 100%;
    height: var(--control-height);
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-surface);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 24px;
}

/* Search Input Specifics */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Select Specifics (Custom Arrow) */
select.form-control {
    padding-right: 40px; /* Space for arrow */
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

/* Focus States */
.form-control:focus,
.form-control:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

/* Search input: extra right padding to accommodate clear + camera buttons */
#searchInput {
    padding-right: 84px;
}

/* Clear Button (Inside Input) */
.clear-btn {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.clear-btn:hover {
    background-color: var(--color-primary-light);
    color: var(--color-text-main);
}

.clear-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    background-color: var(--color-primary-light);
}

.clear-btn[hidden] {
    display: none !important;
}

/* ── Camera Scan Button ──────────────────────────────────────────────── */
.camera-scan-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    /* 44×44px minimum touch target (Apple HIG / WCAG 2.5.5) */
    padding: 11px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transition: background-color var(--transition-base);
    /* Prevent tap highlight flash on iOS */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.camera-scan-btn:hover { background-color: var(--color-bg-elevated); }
.camera-scan-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Theme icon switching */
.camera-icon--dark  { display: none; }
.camera-icon--light { display: block; }
[data-theme="dark"] .camera-icon--light { display: none; }
[data-theme="dark"] .camera-icon--dark  { display: block; }

/* Loading spinner (replaces icon while scanning) */
.camera-scan-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary-light);
    border-radius: 50%;
    animation: camera-spin 0.7s linear infinite;
}
.camera-scan-btn.is-scanning .camera-icon--light,
.camera-scan-btn.is-scanning .camera-icon--dark { display: none; }
.camera-scan-btn.is-scanning .camera-scan-spinner { display: block; }

@keyframes camera-spin {
    to { transform: rotate(360deg); }
}

/* ── Camera Scan Dropdown ─────────────────────────────────────────────── */
.camera-scan-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 300;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    overflow: hidden;
}
.camera-scan-dropdown[hidden] { display: none; }

.camera-scan-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-base);
}
.camera-scan-option:hover:not(:disabled) { background-color: var(--color-bg-elevated); }
.camera-scan-option:focus-visible { outline: none; background-color: var(--color-bg-elevated); }
.camera-scan-option--disabled { opacity: 0.45; cursor: not-allowed; }

.camera-scan-soon {
    margin-left: auto;
    font-size: 10px;
    background: var(--color-border);
    color: var(--color-text-tertiary);
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ── Scan Result Toast ────────────────────────────────────────────────── */
.scan-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--color-primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.scan-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.scan-toast--error { background: var(--color-error); }
.scan-toast--success { background: var(--color-success); }
.scan-toast--info { background: var(--color-primary); bottom: 132px; }

/* Search Hint */
.search-hint {
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    /* Mobile: Flow normally */
}

/* Primary Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-xl);
    height: var(--control-height);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    white-space: nowrap;
    position: relative;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    z-index: 10;
}

.btn-primary {
    background-color: var(--color-primary-light);
    color: var(--color-text-main);
    width: 100%; /* Mobile First: Full width */
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
}
[data-theme="dark"] .btn-primary {
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55);
}

.btn-primary:hover:not(:disabled) {
    background-color: #e5940f; /* Slightly Darker Orange */
}

.btn-primary:active:not(:disabled) {
    transform: translateY(2px); /* Solid Pop 按壓下沉,陰影同步縮小 */
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .btn-primary:active:not(:disabled) {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.55);
}

.btn-primary:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.8;
    box-shadow: none;
}

/* Loading Spinner */
.btn-loading .btn-text {
    margin-left: 8px;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Filter Chips (Quick Filter) */
.quick-filters {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap; /* Mobile: Wrap */
    margin-top: 0; /* Adjusted via Grid/Padding in desktop */
}

.filter-chip {
    padding: 0 16px;
    height: 44px; /* Touch friendly */
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: 22px;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-chip:hover:not([disabled]) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.filter-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

.filter-chip[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-bg-body);
    pointer-events: none;
}

/* Results Grid */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
    align-content: start; /* Prevent rows from stretching when grid has min-height but few results */
}

/* ── 搜尋框 → 卡片區塊間距（與卡片 gap 一致） ───────────────────────────── */
/* resultsGrid 頂部間距 = grid gap，保持視覺節奏一致 */
#resultsGrid {
    margin-top: calc(var(--space-sm));
}

/* favoritesSection 只在有收藏時才加上相同間距；空時 height=0 且 margin=0 */
#favoritesSection:has(#favoritesGrid > *) {
    margin-top: var(--space-sm);
}

.grid--paging {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.1s;
}

.grid--page-entering {
    animation: gridPageEnter 0.18s ease-out both;
}

@keyframes gridPageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.grid--entering {
    animation: gridPageEnter 0.25s ease-out both;
}

/* Skeleton loading cards (SSR placeholder before app.js renders) */
.card--skeleton {
    pointer-events: none;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.card-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-border) 50%, var(--color-bg-elevated) 75%);
    background-size: 200% 100%;
    animation: imageShimmer 1.5s infinite;
}

.card-skeleton-body {
    padding: var(--space-xs) var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.card-skeleton-line {
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-border) 50%, var(--color-bg-elevated) 75%);
    background-size: 200% 100%;
    animation: imageShimmer 1.5s infinite;
    animation-delay: 0.15s;
}

.card-skeleton-line--short {
    width: 55%;
}

[data-theme="dark"] .card-skeleton-img,
[data-theme="dark"] .card-skeleton-line {
    background: linear-gradient(90deg, #2a2d32 25%, #3a3d42 50%, #2a2d32 75%);
    background-size: 200% 100%;
    animation: imageShimmer 1.5s infinite;
}

.hot-picks-banner {
    grid-column: 1 / -1;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 2px;
    letter-spacing: 0.02em;
}

.card {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    position: relative;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.18); /* Solid Pop 浮起,實體陰影加深 */
    border-color: var(--color-primary-light);
}

[data-theme="dark"] .card {
    border-color: #45484d;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.4); /* Solid Pop 浮起,實體陰影加深 */
}

.card:focus-within {
    box-shadow: var(--focus-ring);
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-link:focus {
    outline: none;
}

.card-link:focus-visible {
    outline: none;
    /* Focus ring handled by .card:focus-within */
}

/* Disabled/Non-clickable card state */
.card-link[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.75;
    background-color: var(--color-bg-body);
}

.card-link[aria-disabled="true"] .card-img {
    filter: grayscale(1);
    opacity: 0.8;
}

.card-link[aria-disabled="true"] .card-image-wrapper::after {
    content: "連結不可用";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: var(--font-size-xs);
    padding: 4px;
    text-align: center;
    pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Global Login Alert (Top Notification) */
/* -------------------------------------------------------------------------- */
.login-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.95); /* Light mode: White with opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text-main); /* Black/Dark text */
    padding: 14px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 320px;
    max-width: 90%;
    animation: slideDownAlert 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Remove unused content class */
/* .login-alert__content {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
} */

.login-alert__icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    color: var(--color-primary-light); /* Accent orange */
}

.login-alert__text {
    flex-grow: 1;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 600; /* Slightly bolder for light mode */
    letter-spacing: 0.01em;
}

.login-alert__close {
    background: none;
    border: none;
    color: var(--color-text-tertiary); /* Muted gray */
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    margin-right: -4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-alert__close:hover {
    color: var(--color-text-main);
    background-color: rgba(0, 0, 0, 0.05); /* Slight dark hover */
}

@keyframes slideDownAlert {
    0% {
        transform: translate(-50%, -30px) scale(0.95);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }
}

/* Dark Mode Support for Login Alert */
[data-theme="dark"] .login-alert {
    background-color: rgba(24, 26, 27, 0.95); /* Dark mode: Dark Gray with opacity */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    color: var(--color-text-main); /* Light text */
}

[data-theme="dark"] .login-alert__icon {
    color: var(--color-primary-light);
}

[data-theme="dark"] .login-alert__text {
    font-weight: 500; /* Normal weight for dark mode to prevent glare */
}

[data-theme="dark"] .login-alert__close {
    color: var(--color-text-tertiary);
}

[data-theme="dark"] .login-alert__close:hover {
    color: var(--color-text-main);
    background-color: rgba(255, 255, 255, 0.1); /* Slight light hover */
}

/* Mobile Responsive for Login Alert */
@media (max-width: 600px) {
    .login-alert {
        top: 16px;
        width: max-content;
        max-width: calc(100% - 32px); /* Keep margin on mobile */
        min-width: auto;
        padding: 12px 16px;
        border-radius: 10px;
        gap: 10px;
        flex-direction: row; /* Ensure it stays a row on mobile */
        flex-wrap: nowrap; /* Prevent wrapping to new line */
    }
    .login-alert__text {
        font-size: 0.9rem;
        white-space: normal; /* Allow text to wrap instead of truncating on mobile */
        overflow: visible;
        text-overflow: clip;
        text-align: left;
    }
    .login-alert__icon {
        font-size: 1.25rem;
    }
}

/* General Fade-in Image Class */
.fade-in-img {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fade-in-img.loaded {
    opacity: 1;
}

/* Aspect Ratio Box for Image */
.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-elevated);
    overflow: hidden;
    /* Shimmer Effect for Loading State */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: imageShimmer 1.5s infinite;
}

.card-fav-btn {
    flex-shrink: 0;
    align-self: center;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

.card-fav-btn:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .card-fav-btn:hover {
    background-color: rgba(255, 255, 255, 0.09);
}

.icon-ball {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

@keyframes favPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.card-fav-btn.pop .icon-ball {
    animation: favPop 200ms ease-out;
}

.card-image-wrapper.loaded {
    background: url('../img/BG.svg') center / cover no-repeat, #ffffff;
    animation: none;
}

/* 卡圖尚未載入時,先以 PTCG 卡背當預設圖(BG.svg 底不變,真卡圖載入後淡出)。
   用 :has(.card-img) 限定只套搜尋結果格(排除主卡圖 .card-image)。 */
.card-image-wrapper:has(.card-img)::before {
    content: "";
    position: absolute;
    inset: var(--space-sm);
    background: url('../img/ptcg-card-back.webp') center / contain no-repeat;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
    z-index: 0;
}
.card-image-wrapper:has(.card-img.loaded)::before {
    opacity: 0;
}

@keyframes imageShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Image Transitions */
.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-sm);
    z-index: 1; /* 卡正面疊在卡背佔位圖(::before)之上 */

    /* Initial Loading State */
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.card-img.loaded {
    opacity: 1;
    transform: scale(1);
}

.card-img.error {
    opacity: 1;
    transform: scale(1);
    padding: 30%; /* Make placeholder icon smaller */
    background-color: #f5f5f5;
}

.card-img--local {
    padding: var(--space-sm);
    object-fit: contain;
}

.card-img--box {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

/* 滑鼠移入:卡圖輕微 3D 傾斜繞一圈,模擬拿起卡片端詳細節。
   熱門卡實際 class 為 .card-img--local(本地託管圖),故三個變體都要列,
   否則動畫套不到真卡。 */
.card:hover .card-img,
.card:hover .card-img--local,
.card:hover .card-img--box {
    transform-style: preserve-3d;
    will-change: transform;
    animation: cardImgTiltOrbit 3.2s ease-in-out infinite;
}

/* 卡圖法線繞一整圈(0deg==360deg 無縫循環);本地滿框圖不放大以免超出框 */
@keyframes cardImgTiltOrbit {
    0%   { transform: perspective(600px) rotateX(8deg)  rotateY(0deg); }
    25%  { transform: perspective(600px) rotateX(0deg)  rotateY(8deg); }
    50%  { transform: perspective(600px) rotateX(-8deg) rotateY(0deg); }
    75%  { transform: perspective(600px) rotateX(0deg)  rotateY(-8deg); }
    100% { transform: perspective(600px) rotateX(8deg)  rotateY(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .card:hover .card-img,
    .card:hover .card-img--local,
    .card:hover .card-img--box { animation: none; }
}

.mode-simple .card-img--local {
    transform: none;
    padding: var(--space-xs);
}

.card-content {
    padding: var(--space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: none;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(
        to bottom,
        transparent var(--space-sm),
        #e53935 var(--space-sm),
        #e53935 calc(100% - var(--space-sm)),
        transparent calc(100% - var(--space-sm))
    );
    border-radius: 0;
}

.card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 1.4em;
}

.card-title--no-nickname {
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    cursor: pointer;
    text-decoration: underline dotted;
}

.card-meta {
    margin-top: auto;
}

.price-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.price-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-error);
    display: inline-block;
    margin-right: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Condition grade badge ───────────────────────────────────────────────── */
.condition-label {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.35px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.5;
    /* fallback (no data-grade) */
    color: var(--color-text-tertiary);
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

/* PSA10 — Gold premium */
.condition-label[data-grade="PSA10"] {
    color: #6B4A00;
    background: #FFF3C4;
    border-color: #C49A00;
}
/* PSA9 — Brand navy */
.condition-label[data-grade="PSA9"] {
    color: #14213d;
    background: #D8E8FF;
    border-color: #4472C4;
}
/* A — Success green */
.condition-label[data-grade="A"] {
    color: #1A5C20;
    background: #E6F4E8;
    border-color: #3D9147;
}
/* B — Teal */
.condition-label[data-grade="B"] {
    color: #00474A;
    background: #DCF5F4;
    border-color: #1F9E96;
}
/* C — Amber-orange */
.condition-label[data-grade="C"] {
    color: #7A3C00;
    background: #FFF0DC;
    border-color: #E07B00;
}
/* D — Muted slate */
.condition-label[data-grade="D"] {
    color: #3D4654;
    background: #EDEEF0;
    border-color: #8D96A6;
}

/* Dark mode overrides */
[data-theme="dark"] .condition-label[data-grade="PSA10"] {
    color: #FFD700;
    background: rgba(255, 215, 0, 0.14);
    border-color: rgba(255, 215, 0, 0.5);
}
[data-theme="dark"] .condition-label[data-grade="PSA9"] {
    color: #90BFFF;
    background: rgba(68, 114, 196, 0.18);
    border-color: rgba(68, 114, 196, 0.55);
}
[data-theme="dark"] .condition-label[data-grade="A"] {
    color: #6EE7A0;
    background: rgba(61, 145, 71, 0.18);
    border-color: rgba(61, 145, 71, 0.55);
}
[data-theme="dark"] .condition-label[data-grade="B"] {
    color: #5EEAD4;
    background: rgba(31, 158, 150, 0.16);
    border-color: rgba(31, 158, 150, 0.5);
}
[data-theme="dark"] .condition-label[data-grade="C"] {
    color: #FFAB40;
    background: rgba(224, 123, 0, 0.16);
    border-color: rgba(224, 123, 0, 0.48);
}
[data-theme="dark"] .condition-label[data-grade="D"] {
    color: #A8B2C1;
    background: rgba(141, 150, 166, 0.14);
    border-color: rgba(141, 150, 166, 0.4);
}

.mode-simple .condition-label {
    margin-left: 0;
}

.update-date {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
    text-align: right;
}

/* Loading Skeleton */
.skeleton-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 63/88;
    background-color: #f0f0f0;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-title {
    width: 80%;
    height: 1.25rem;
    margin-bottom: 0.5rem;
}

.skeleton-title-short {
    width: 60%;
    height: 1.25rem;
    margin-bottom: 1rem;
}

.skeleton-meta {
    width: 40%;
    margin-bottom: 1.5rem;
}

.skeleton-price {
    height: 2rem;
    width: 50%;
    margin-top: auto;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pagination */
.pagination-container {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    display: flex;
    justify-content: center;
    min-height: 72px;
    align-items: center;
}
/* hidden 屬性須壓過上面的 display:flex,否則 [hidden]{display:none} 特異度不足會失效
   (裸卡掃描結果隱藏分頁時就會踩到)。 */
.pagination-container[hidden] {
    display: none;
}

.pagination {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-main);
    font-weight: 500;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.page-btn[aria-current="page"] {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: 700;
    cursor: default;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--color-bg-elevated);
}

.page-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    z-index: 1;
}

[data-theme="dark"] .page-btn[aria-current="page"] {
    background-color: var(--color-primary-light);
    color: #181A1B;
    border-color: var(--color-primary-light);
}

.pagination-page-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 44px;
    padding: 0 var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-main);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    letter-spacing: 0.03em;
}

/* States */
.state-message {
    text-align: center;
    padding: var(--space-xxl) 0;
    color: var(--color-text-secondary);
    grid-column: 1 / -1;
}

.state-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    display: block;
}

.error-message {
    color: var(--color-error);
}

.scan-tips {
    display: inline-block;
    margin-top: 1rem;
    text-align: left;
    background: var(--color-surface-alt, rgba(0,0,0,0.04));
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    max-width: 360px;
}

.scan-tips-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.scan-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scan-tips ul li {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    padding: 0.2rem 0;
    opacity: 0.9;
}

/* ── Card Scan Loading State ────────────────────────────────────────── */
.card-scan-loading {
    grid-column: 1 / -1; /* span all columns so the loader is centred in the grid */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    text-align: center;
}

/* Fluid frame: 160px on small phones → 200px on desktop */
.scan-frame {
    position: relative;
    width: clamp(140px, 44vw, 200px);
    aspect-ratio: 5 / 7; /* ≈ Pokémon card 63 mm × 88 mm */
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-lg);
    background: #000;
    flex-shrink: 0;
}

.scan-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.82;
}

/* Orange corner brackets */
.scan-corners { position: absolute; inset: 0; pointer-events: none; }

.corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: #fca311;
    border-style: solid;
}
.corner--tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-top-left-radius: var(--radius-sm); }
.corner--tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-top-right-radius: var(--radius-sm); }
.corner--bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: var(--radius-sm); }
.corner--br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: var(--radius-sm); }

/* Sweeping scan line */
.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 8%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(252, 163, 17, 0.35) 15%,
        #fca311 40%,
        #fff 50%,
        #fca311 60%,
        rgba(252, 163, 17, 0.35) 85%,
        transparent 100%
    );
    box-shadow: 0 0 12px 4px rgba(252, 163, 17, 0.55);
    animation: scan-sweep 2.2s ease-in-out infinite;
}

@keyframes scan-sweep {
    0%   { top: 8%; }
    50%  { top: 88%; }
    100% { top: 8%; }
}

/* Respect prefers-reduced-motion: freeze the line at midpoint */
@media (prefers-reduced-motion: reduce) {
    .scan-line { animation: none; top: 50%; }
}

.scan-loading-text {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.login-alert {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 13000;
    padding: 0 16px;
    width: max-content; /* Let width depend on content */
    max-width: 90vw; /* Prevent overflowing screen on narrow devices */
    
    /* Move background and shadow styles here */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Change to start to prevent strange gaps */
    gap: 12px;
    flex-wrap: nowrap; /* Change from wrap to nowrap to force single row */
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 10px 16px; /* Adjust padding slightly */
}

/* Remove unused content class */
/* .login-alert__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 10px 12px;
} */

.login-alert__icon {
    font-size: 1.1rem;
}

.login-alert__text {
    font-weight: 600;
    flex: 0 1 auto; /* Allow text to dictate width but shrink if needed */
    line-height: 1.4; /* Slightly increase line height for readability */
    white-space: nowrap; /* Keep on one line if possible */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis if screen is too narrow */
}

/* Gate variant: do NOT let text reserve extra height */
.login-gate .login-alert__text {
    flex: 0 0 auto;
    margin: 0;
    text-align: center; /* Center text in gate */
}

.login-alert__close {
    background: transparent;
    border: 0;
    color: var(--color-text-tertiary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0; /* Prevent close button from squishing */
    margin-left: auto; /* Push to the far right */
}

.login-alert__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.login-gate {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.login-gate.is-hidden {
    display: none;
}

.login-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.login-gate__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    padding: 0;
    top: auto;
    left: auto;
    transform: none;
}

.login-gate .login-alert {
    width: 100%;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 第一行文字、第二行按鈕 */
    flex-wrap: nowrap;
    gap: 8px;
}

.login-gate__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 4px; /* 與文字的垂直間距 */
}

.login-gate .login-alert__text {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-gate .login-alert__icon {
    display: none;
}

.login-alert--static {
    position: static;
    transform: none;
    margin: 48px auto 0;
    max-width: 560px;
    padding: 14px 16px;
}

/* Responsive Breakpoints */

/* Mobile Small (<= 480px) */
@media (max-width: 480px) {
    :root {
        --space-md: 12px;
        --font-size-xl: 1.25rem;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .grid {
        gap: var(--space-xs);
    }

    /* small mobile: 間距與 grid gap 一致 (4px) */
    #resultsGrid {
        margin-top: var(--space-xs);
    }
    #favoritesSection:has(#favoritesGrid > *) {
        margin-top: var(--space-xs);
    }
    
    .card-content {
        padding: var(--space-sm);
    }

    .card-title-row {
        margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        background: linear-gradient(
            to bottom,
            transparent var(--space-xs),
            #e53935 var(--space-xs),
            #e53935 calc(100% - var(--space-xs)),
            transparent calc(100% - var(--space-xs))
        );
    }

    .card-title {
        font-size: var(--font-size-sm);
    }

    .card-meta {
        margin-top: var(--space-xs);
    }

    .price-value {
        font-size: var(--font-size-base);
    }

    .page-btn {
        min-width: 44px;
        height: 44px;
        margin: 2px;
    }

    .login-alert {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    .login-alert__text {
        width: auto;
        text-align: left;
        line-height: 1.3;
        white-space: normal; /* Allow text to wrap if really long */
        overflow: visible;
        text-overflow: clip;
    }
    .login-gate .login-alert__text {
        flex: 0 0 auto;
    }


    .login-gate {
        align-items: flex-end;
        padding: 16px 12px 24px;
    }

    .login-gate .login-alert {
        padding: 14px;
    }

    .login-gate__actions {
        width: 100%;
        justify-content: center;
    }

    .login-gate .login-alert {
        padding: 8px 10px;
        flex-direction: column; /* 手機也維持一上(文字)一下(按鈕) */
        flex-wrap: nowrap;
    }
    
    
    
    
    
    .search-section {
        padding: var(--space-md);
    }
}

/* Mobile Layout Adjustment (<= 767px) */
@media (max-width: 767px) {
    .search-form {
        display: grid;
        grid-template-columns: 1fr 20% 15%; /* Input | Search | Collapse */
        justify-content: start; /* Align to left */
        align-items: start; /* Align to top */
        gap: 8px;
    }

    /* Collapse Button (First Child) */
    .search-form > .collapse-btn {
        position: static;
        grid-column: 3 / 4;
        grid-row: 1;
        width: 100%;
        height: var(--control-height);
        border-radius: var(--radius-md);
        margin-top: 24px; /* Label height (20px) + margin (4px) */
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
    }

    /* Keyword Input (Second Child) */
    .search-form > .input-group:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 1;
        width: 100%;
    }

    /* Search Button Group (Last Child) */
    .search-form .btn-group {
        grid-column: 2 / 3;
        grid-row: 1;
        width: 100%;
        align-self: start;
        margin-top: 24px; /* Label height (20px) + margin (4px) */
    }

    .search-form .btn-primary {
        width: 100%; 
        padding: 0 8px; /* Reduce padding to fit text */
    }

    /* Force all other inputs to span full width on next rows */
    .search-form > .input-group:not(:nth-child(2)):not(.btn-group),
    .mobile-toggles-wrapper {
        grid-column: 1 / -1;
    }

    /* Mobile Toggles Wrapper - Side by Side */
    .mobile-toggles-wrapper {
        display: flex;
        gap: 16px;
    }

    .mobile-toggles-wrapper .input-group {
        width: auto;
        flex: 1;
    }
}

/* Tablet & Desktop (>= 768px) */
@media (min-width: 768px) {
    /* ===== Search Form: Desktop/Tablet alignment ===== */
    .search-form {
        display: grid;
        /* keyword elastic + 熱門寶可夢 + Sort (min-content so text never clips) + Search + Collapse */
        grid-template-columns: 1fr 140px minmax(min-content, 200px) 100px 50px;
        align-items: start;
        row-gap: var(--space-md);
        column-gap: var(--space-sm);
        margin-bottom: var(--space-md);
    }

    /* Keyword Input (Row 1) */
    .search-form > .input-group:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    /* Sort Select (Row 1: col 3) */
    .search-form > .input-group:nth-of-type(2) {
        grid-column: 3;
        grid-row: 1;
    }

    /* Search Button (Row 1: col 4) */
    .search-form .btn-group {
        align-self: start;
        grid-column: 4;
        grid-row: 1;
        margin-top: 24px; /* Align with input box */
        width: 100px;
        max-width: 100px;
        justify-self: end;
    }

    /* Collapse Button (Row 1: col 5) */
    .search-form .collapse-btn {
        position: static;
        grid-column: 5;
        grid-row: 1;
        width: 50px;
        height: var(--control-height);
        border-radius: var(--radius-md);
        margin-top: 24px; /* Align with input box */
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        justify-self: end;
    }

    .btn-primary {
        width: 100%;
        height: var(--control-height);
        padding: 0 8px;
    }

    /* Row 2: each filter gets its own grid column — no margin-left hacks */
    .search-form > .input-group:nth-of-type(3) {
        grid-column: 1 / 2;
        grid-row: 2;
        width: auto;
        margin-left: 0;
        justify-self: stretch;
    }

    .search-form > .input-group:nth-of-type(4) {
        grid-column: 2 / 3;
        grid-row: 2;
        width: auto;
        margin-left: 0;
        justify-self: stretch;
    }

    .search-form > .input-group:nth-of-type(5) {
        grid-column: 3 / 4;
        grid-row: 2;
        width: auto;
        margin-left: 0;
        justify-self: stretch;
    }

    /* nth-of-type(6) = mobile-toggles-wrapper (display:none on desktop) */

    /* Nickname toggle spans cols 4–5 (≈150px) to fit label + switch */
    .search-form > .input-group:nth-of-type(7):not(.btn-group) {
        grid-column: 4 / 6;
        grid-row: 2;
        width: auto;
        margin-left: 0;
        justify-self: stretch;
    }

    .search-form > .input-group.btn-group {
        grid-column: 4;
        grid-row: 1;
        width: 100px;
        max-width: 100px;
        margin-top: 24px;
        align-self: start;
        justify-self: end;
    }

    /* Hide toggle text on desktop and center the switch */
    .search-form .input-group--toggle .toggle__text {
        display: none;
    }

    .search-form .input-group--toggle .toggle {
        justify-content: center;
        padding: 0;
    }

    .form-control {
        height: 48px;
    }

    /* keep hint in normal flow for stable layout */
    .search-hint {
        position: static;
        margin-top: 6px;
        white-space: normal;
        line-height: 1.4;
    }

    .quick-filters {
        padding-left: 0;
        margin-top: var(--space-md);
        justify-content: flex-start;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--space-lg);
    }

    /* desktop: 間距與 desktop grid gap 一致 (24px) */
    #resultsGrid {
        margin-top: var(--space-lg);
        min-height: 380px; /* Reserve space to prevent CLS when JS populates results */
    }
    #favoritesSection:has(#favoritesGrid > *) {
        margin-top: var(--space-lg);
    }

    .filter-chip {
        height: 32px; /* Compact on desktop */
        font-size: var(--font-size-xs);
        padding: 0 12px;
    }
}

/* ===== Toggle group (Accuracy Mode) ===== */
.input-group--toggle .input-label {
    display: block;
    height: auto;
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

.toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.toggle:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle__ui {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-border);
    transition: background-color var(--transition-base);
    flex: 0 0 auto;
}

.toggle__ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base);
}

.toggle__text {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
    line-height: 1;
}

/* checked */
.toggle input:checked + .toggle__ui {
    background: var(--color-primary-light);
}

.toggle input:checked + .toggle__ui::after {
    transform: translateX(20px);
}

/* hover */
.toggle:hover {
    border-color: var(--color-primary);
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* Large Desktop (>= 1280px) */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   Simple Mode (Compact View)
   ========================================= */
.grid.mode-simple {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-sm);
}

.mode-simple .card-image-wrapper {
    overflow: hidden; /* Crop scale overflow */
}

.mode-simple .card-image-wrapper img {
    transform: scale(1.2); /* Zoom in to crop white borders */
}

.mode-simple .card-image-wrapper img.card-img--local {
    transform: none;
}

.mode-simple .card:hover .card-img {
    transform: scale(1.2); /* Further zoom on hover */
}

.mode-simple .card:hover .card-img.card-img--local {
    transform: none;
}

.mode-simple .card-content {
    padding: var(--space-sm);
}

.mode-simple .card-title-row {
    gap: 2px;
    margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) 2px;
    padding: 4px var(--space-sm);
    background: linear-gradient(
        to bottom,
        transparent 7px,
        #e53935 7px,
        #e53935 calc(100% - 7px),
        transparent calc(100% - 7px)
    );
}

.mode-simple .card-title {
    font-size: var(--font-size-sm);
    height: 1.4em;
    -webkit-line-clamp: 1;
}

.mode-simple .card-meta {
    margin-top: -5px;
}

@media (min-width: 768px) {
    .mode-simple .card-meta {
        margin-top: 0;
    }
}

.mode-simple .price-label {
    display: none; /* Hide label to save space */
}

.mode-simple .price-value {
    font-size: var(--font-size-base); /* Smaller than lg */
}

.mode-simple .update-date {
    display: none;
}

/* Mobile Simple Mode */
@media (max-width: 767px) {
    .grid.mode-simple {
        grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
        gap: 4px;
    }

    .mode-simple .card-title {
        font-size: 0.75rem; /* 12px */
        height: 1.4em;
    }

    .mode-simple .price-value {
        font-size: 0.75rem; /* 12px */
    }
}

@media (max-width: 767px) {
    .mobile-hide-title .card-title {
        display: none;
    }

    .mobile-hide-title .card-title-row {
        height: 0;
        overflow: visible;
        margin-bottom: 0;
    }

    .mobile-hide-title .card-fav-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 2;
        width: 25px;
        height: 25px;
        margin: 0;
    }

    .mobile-hide-price .price-value {
        display: none;
    }

    .mobile-hide-price .condition-label {
        display: none;
    }

    .mobile-hide-title.mobile-hide-price .card-content {
        height: 0;
        min-height: 0;
        overflow: visible;
        padding: 0;
        border: 0;
    }

    .condition-label {
        display: block;
        margin-top: 4px;
    }

    .mode-simple .card-meta > div {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .mode-simple .card-meta-row {
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
        gap: 1px !important;
        line-height: 1.1;
        margin-top: 1px !important;
    }

    .mode-simple .price-value {
        display: block;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        text-overflow: clip;
        overflow: visible;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .mode-simple .condition-label {
        display: block;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        margin-left: 0;
        line-height: 1.1;
    }

    .card-img {
        width: 100%;
        height: 100%;
        transform: scale(1.2);
        transform-origin: center center;
    }

    .card:hover .card-img {
        transform: scale(1.2);
    }
}

@media (min-width: 768px) {
    .input-group--mobile-display,
    .mobile-toggles-wrapper {
        display: none;
    }
}

/* =========================================
   Footer (Redesigned)
   ========================================= */
.site-footer {
    background-color: var(--color-primary);
    color: #ffffff;
    padding-top: var(--space-xxl);
    padding-bottom: 0;
    margin-top: 0;
    border-top: 3px solid var(--color-primary-light);
    font-size: var(--font-size-sm);
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
}

@media (min-width: 768px) {
    .footer-main {
        grid-template-columns: 2fr 1fr 1fr 1.2fr;
        gap: var(--space-xxl);
        align-items: start;
    }
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: #ffffff;
    margin-bottom: var(--space-md);
}

.footer-logo-link:hover .footer-brand-name {
    color: var(--color-primary-light);
}

.footer-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
}

.footer-brand-name {
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
    transition: color 0.15s ease;
}

.footer-section-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.footer-tagline {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 52ch;
}

.footer-contact p {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.footer-links a::before {
    content: '›';
    color: var(--color-primary-light);
    font-size: 1em;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-links a:hover::before {
    opacity: 1;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-contact a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    /* Full-width: footer-bottom__wrap handles alignment */
}

.footer-bottom__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.38);
    flex-wrap: wrap;
}

.footer-bottom__wrap p {
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-bottom-links a:hover {
    color: rgba(255, 255, 255, 0.75);
}

.footer-bottom-sep {
    margin: 0 var(--space-sm);
    color: rgba(255, 255, 255, 0.2);
}

.footer-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-xl);
}

.footer-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-primary-light);
    line-height: 1;
    letter-spacing: -0.01em;
}

.footer-stat-label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
    .footer-stats-list {
        flex-direction: column;
        gap: var(--space-lg);
    }
}

@media (max-width: 767px) {
    .site-footer {
        padding-top: var(--space-xl);
    }

    .footer-container {
        gap: var(--space-lg);
    }

    .footer-main {
        gap: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .footer-section-title {
        margin-bottom: var(--space-sm);
    }

    .footer-logo {
        width: 36px;
        height: 36px;
    }

    .footer-brand-name {
        font-size: 1.05rem;
    }

    .footer-links-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm) var(--space-md);
    }

    .footer-bottom__wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* =========================================
   Legal Pages v2 — Full Redesign
   ========================================= */

.legal-page {
    padding: 0;
}

/* ── Hero ─────────────────────────────── */
.legal-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3460 60%, #0f2040 100%);
    padding: var(--space-xl) 0 56px;
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(252,163,17,0.09) 0%, transparent 70%);
    pointer-events: none;
}

.legal-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 40px;
    background: var(--color-bg-body);
    clip-path: ellipse(55% 100% at 50% 100%);
}

[data-theme="dark"] .legal-hero::after {
    background: var(--color-bg-body);
}

.legal-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.5);
    margin-bottom: var(--space-lg);
}

.legal-breadcrumb a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color var(--transition-base);
}

.legal-breadcrumb a:hover {
    color: rgba(255,255,255,0.9);
}

.legal-breadcrumb-sep {
    color: rgba(255,255,255,0.3);
}

.legal-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.legal-hero-icon {
    width: 60px;
    height: 60px;
    background: rgba(252,163,17,0.15);
    border: 1px solid rgba(252,163,17,0.3);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
}

.legal-hero-title {
    color: #ffffff !important;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.legal-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.08);
    padding: 4px 14px;
    border-radius: 100px;
    width: fit-content;
}

.legal-hero-desc {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.7);
    margin: 0;
    max-width: 560px;
    line-height: 1.65;
}

/* ── Layout grid ─────────────────────── */
.legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) 0 var(--space-xxl);
}

@media (min-width: 900px) {
    .legal-layout {
        grid-template-columns: 210px 1fr;
        align-items: start;
    }
}

/* ── TOC Sidebar ─────────────────────── */
.legal-toc {
    display: none;
}

@media (min-width: 900px) {
    .legal-toc {
        display: block;
        position: sticky;
        top: 84px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-md);
        box-shadow: var(--shadow-sm);
    }
}

.legal-toc-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-toc-list li a {
    display: block;
    font-size: 13px;
    color: var(--color-text-tertiary);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base), color var(--transition-base);
    line-height: 1.4;
}

.legal-toc-list li a:hover,
.legal-toc-list li a.is-active {
    background: rgba(252,163,17,0.1);
    color: var(--color-primary);
}

[data-theme="dark"] .legal-toc-list li a:hover,
[data-theme="dark"] .legal-toc-list li a.is-active {
    background: rgba(252,163,17,0.1);
    color: var(--color-primary-light);
}

/* ── Content area ────────────────────── */
.legal-content {
    min-width: 0;
}

/* ── Section cards ───────────────────── */
.legal-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
    scroll-margin-top: 90px;
}

.legal-section:hover {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .legal-section {
    border-left-color: var(--color-primary-light);
}

.legal-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.legal-section-icon {
    width: 36px;
    height: 36px;
    background: rgba(252,163,17,0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    flex-shrink: 0;
}

.legal-section h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin: 0;
}

[data-theme="dark"] .legal-section h2 {
    color: #FCAB26 !important;
}

.legal-section p {
    color: var(--color-text-main);
    line-height: 1.75;
    margin: 0 0 var(--space-sm);
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section ul {
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0 0;
}

.legal-section ul li {
    color: var(--color-text-main);
    line-height: 1.75;
    margin-bottom: var(--space-sm);
    padding-left: 4px;
}

.legal-section ul li:last-child {
    margin-bottom: 0;
}

.legal-section ul li::marker {
    color: var(--color-primary-light);
}

.legal-section a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(20,33,61,0.25);
    transition: border-color var(--transition-base);
}

.legal-section a:hover {
    border-color: var(--color-primary);
}

[data-theme="dark"] .legal-section a {
    color: var(--color-primary-light);
    border-color: rgba(252,163,17,0.3);
}

[data-theme="dark"] .legal-section a:hover {
    border-color: var(--color-primary-light);
}

/* ── Contact CTA box ─────────────────── */
.legal-contact-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3460 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.legal-contact-box-icon {
    width: 48px;
    height: 48px;
    background: rgba(252,163,17,0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    flex-shrink: 0;
}

.legal-contact-box-title {
    color: #ffffff;
    font-size: var(--font-size-base);
    font-weight: 700;
    margin: 0 0 4px;
}

.legal-contact-box-email {
    color: var(--color-primary-light);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: opacity var(--transition-base);
    border-bottom: 1px solid rgba(252,163,17,0.3);
}

.legal-contact-box-email:hover {
    opacity: 0.85;
    border-color: var(--color-primary-light);
}

/* ── Back-to-top ─────────────────────── */
.legal-back-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
}

.legal-back-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.legal-back-top:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.legal-back-top:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Mobile tweaks ───────────────────── */
@media (max-width: 640px) {
    .legal-contact-box {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .legal-section {
        padding: var(--space-md) var(--space-md);
    }

    .legal-hero {
        padding-bottom: 48px;
    }
}

/* legacy alias — keep for any page still using .legal-updated */
.legal-updated {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin-top: 0;
    margin-bottom: var(--space-lg);
}

/* =========================================
   About Page — Enhanced Components
   ========================================= */

/* Hero strip */
.about-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3460 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-xl);
}

.about-hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .about-hero-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xl);
    }
}

.about-hero-text {
    flex: 1;
    min-width: 0;
}

/* h1 inside the hero overrides .legal-page h1 (dark blue color) */
.about-hero .about-hero-h1 {
    color: #ffffff;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 var(--space-sm);
    line-height: 1.2;
}

/* Breadcrumb inside hero */
.about-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--space-md);
}

.about-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--transition-base);
}

.about-hero-breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Update date tag inside hero */
.about-hero-meta {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.45);
    margin: var(--space-sm) 0 0;
}

.about-hero-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--font-size-base);
    margin: 0;
    line-height: 1.6;
}

.about-hero-kpi {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.about-kpi-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    min-width: 96px;
    flex: 1;
}

.about-kpi-card strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fca311;
    line-height: 1.2;
}

.about-kpi-card span {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* Section number badge */
.about-section-h2 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: 0;
}

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

[data-theme="dark"] .section-num {
    background: #FCAB26;
    color: #14213d;
}

/* Stat grid — platform & creator stats */
.about-stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.about-stat-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    flex: 1;
    min-width: 110px;
}

.about-stat-card strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

[data-theme="dark"] .about-stat-card strong {
    color: #FCAB26;
}

.about-stat-card span {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.4;
}

/* Founder 2×2 card grid */
.about-founder-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

@media (min-width: 600px) {
    .about-founder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.about-founder-item {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border-top: 3px solid var(--color-primary);
}

[data-theme="dark"] .about-founder-item {
    border-top-color: #FCAB26;
}

.about-founder-item h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
}

.about-founder-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
    line-height: 1.65;
}

/* Feature list with checkmark accent */
.about-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.about-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--color-primary);
    line-height: 1.55;
}

.about-feature-list li::before {
    /* 平面化打勾：SVG mask 上色，不依賴字型 */
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5%209%2017.5%2020%206.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5%209%2017.5%2020%206.5'/%3E%3C/svg%3E") no-repeat center / contain;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
    line-height: 1.55;
    font-size: 0.9rem;
}

[data-theme="dark"] .about-feature-list li {
    border-left-color: #FCAB26;
}

[data-theme="dark"] .about-feature-list li::before {
    color: #FCAB26;
}

/* Data source list with orange accent */
.about-data-list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.about-data-list li {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border-left: 3px solid var(--color-primary-light);
    line-height: 1.65;
}

/* Social pill links */
.about-social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.about-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 99px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-base);
}

.about-social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.about-social-link:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Bottom CTA */
.about-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3460 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    margin-top: var(--space-xl);
}

.about-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-lg);
}

.about-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: #fca311;
    color: #14213d;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
}

.about-btn-cta:hover {
    background: #e5940f;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(252, 163, 17, 0.35);
}

.about-btn-cta:active {
    transform: translateY(0);
}

.about-btn-cta:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .about-btn-cta,
    .about-social-link {
        transition: color var(--transition-base), background var(--transition-base),
                    border-color var(--transition-base);
        transform: none !important;
    }
}

/* =========================================
   User Profile & Google Login Styles
   ========================================= */

#auth-wrapper {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#google-login-btn-container {
    display: flex;
    align-items: center;
}

/* Google OAuth Button Styles */
.google-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: white;
    color: #14213D;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    height: auto;
    box-sizing: border-box;
    font-family: inherit;
}

.google-oauth-btn:hover {
    background: #FCA311;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.google-oauth-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.google-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Dark Mode Support for Google Button */
[data-theme="dark"] .google-oauth-btn {
    background-color: var(--color-bg-elevated);
    color: var(--color-text);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .google-oauth-btn:hover {
    background: #FCA311;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .google-oauth-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Mobile Optimization for Google OAuth Button */
@media (max-width: 767px) {
    .google-oauth-btn {
        padding: 0.5rem;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    
    .google-oauth-btn-text {
        display: none;
    }
    
    .google-logo {
        width: 20px;
        height: 20px;
    }
}

.user-profile-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s;
}

.user-avatar:hover {
    border-color: #fff;
}

.user-name {
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sign-out-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.sign-out-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
}

.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-menu-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: 999px;
}

.user-menu-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.user-avatar--menu {
    display: block;
}

.user-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.8);
    user-select: none;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    z-index: 12000;
}

.user-menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--color-text-main);
    padding: 10px 12px;
    text-align: left;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.user-menu-item:hover {
    background: var(--color-bg-elevated);
}

.user-menu-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.user-menu-item--danger {
    color: var(--color-error);
}

.user-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 6px 0;
}

.user-menu-item--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user-menu-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
}
.user-menu-toggle-input {
    position: absolute;
    opacity: 0;
    inset: 0;
}
.user-menu-toggle-knob {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: #ddd;
    transition: background .2s ease;
}
.user-menu-toggle-knob::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}
.user-menu-toggle-input:checked + .user-menu-toggle-knob {
    background: #ff6699;
}
.user-menu-toggle-input:checked + .user-menu-toggle-knob::after {
    transform: translateX(20px);
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    #auth-wrapper {
        width: auto;
        margin-top: 0;
        flex: 0 0 auto;
    }

    .user-profile-content {
        width: auto;
        justify-content: flex-end;
        background: transparent;
        padding: 0;
        border-radius: 0;
    }
    
    .user-name {
        flex-grow: 1;
    }
}

body.nickname-modal-open {
    overflow: hidden;
}

/* Nickname Challenge Modal */
.nickname-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nickname-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.nickname-modal-content {
    background: var(--color-bg-surface);
    width: 90%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: var(--space-lg);
}

.nickname-modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-tertiary);
    line-height: 1;
    padding: var(--space-xs);
}

.nickname-modal-header {
    text-align: center;
    margin-bottom: var(--space-md);
}

.nickname-modal-header h3 {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.nickname-step-indicator {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.nickname-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background-color 0.3s ease;
}

.nickname-step-dot.active {
    background: var(--color-primary-light);
}

.nickname-step-dot.completed {
    background: var(--color-success);
}

.nickname-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.nickname-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 5 / 7; /* Standard Card Ratio */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    
    /* Shimmer Effect */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: imageShimmer 1.5s infinite;
}

.nickname-image-wrapper.loaded {
    background: transparent;
    animation: none;
}

.nickname-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    
    /* Animation Initial State */
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.nickname-card-image.loaded {
    opacity: 1;
    transform: scale(1);
}

.nickname-card-image.error {
    opacity: 1;
    transform: scale(1);
    padding: 20%;
    background-color: #f5f5f5;
}

@media (min-width: 1024px) {
    .nickname-modal-content {
        max-width: 640px;
    }
    .nickname-image-wrapper {
        max-width: 360px;
    }
}

.nickname-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    width: 100%;
}

/* Responsive Utilities */
.mobile-only {
    display: none !important;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }

    body:not(.google-logged-in) #themeToggle,
    body:not(.google-logged-in) #currencyToggle {
        display: none !important;
    }

    body.google-logged-in #themeToggle,
    body.google-logged-in #currencyToggle {
        display: flex !important;
    }
}

.nickname-chip {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-base);
    color: var(--color-text-main);
}

.nickname-chip:hover {
    background: var(--color-primary-light);
    color: white;
    border-color: var(--color-primary-light);
}

.nickname-input-container {
    width: 100%;
    display: flex;
    gap: var(--space-sm);
}

.nickname-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
}

.nickname-submit-btn {
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.nickname-submit-btn:hover {
    background: var(--color-primary-hover);
}

.nickname-skip-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-tertiary);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin-top: var(--space-sm);
    transition: all 0.2s;
}

.nickname-skip-btn:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-main);
}

.nickname-modal-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    min-height: 20px;
    text-align: center;
    width: 100%;
}

.nickname-modal-hint {
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
    text-align: center;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
    width: 100%;
    line-height: 1.4;
}

.pricing-section {
    background: var(--color-bg-surface);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}

.pricing-hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-lg);
}

.pricing-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-text-secondary);
}

.pricing-subtitle {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.pricing-stats {
    margin-top: var(--space-sm);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.pricing-stat {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pricing-stat-title {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pricing-stat-value {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.pricing-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 900px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plan-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.plan-card--highlight {
    border-color: rgba(252, 163, 17, 0.7);
    box-shadow: 0 10px 20px rgba(252, 163, 17, 0.15);
}

.plan-header {
    position: relative;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-primary-light);
    color: #000;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.plan-name {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-text-secondary);
}

.plan-price {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-text-main);
    min-height: 32px;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

.plan-price-suffix {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-tertiary);
    margin-left: 4px;
}

.plan-limit {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.plan-tagline {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.plan-features {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    /* Fill remaining space so CTA stays aligned at the bottom across cards */
    flex: 1 1 auto;
}

.plan-cta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-cta-link {
    text-decoration: none;
}

.plan-cta-sub {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    text-align: center;
}

.pricing-compare {
    margin-top: var(--space-xl);
}

.pricing-compare-title {
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.compare-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-surface);
}

.compare-row {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr;
}

.compare-row--head {
    background: var(--color-bg-elevated);
    font-weight: 800;
}

.compare-cell {
    padding: 12px 12px;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
}

.compare-cell--feature {
    justify-content: flex-start;
    text-align: left;
    color: var(--color-text-secondary);
}

.compare-row:last-child .compare-cell {
    border-bottom: 0;
}

.compare-cell:last-child {
    border-right: 0;
}

@media (max-width: 560px) {
    .compare-row {
        grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr;
    }
    .compare-cell {
        padding: 10px 10px;
        font-size: var(--font-size-xs);
    }
}

.pricing-faq {
    margin-top: var(--space-xl);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 900px) {
    .faq-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.faq-item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
}

.faq-q {
    color: var(--color-text-secondary);
    font-weight: 900;
    font-size: var(--font-size-base);
}

.faq-a {
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.deck-section {
    padding: var(--space-lg) 0;
}

.deck-hero {
    margin-bottom: var(--space-lg);
}

.deck-title {
    margin: 0;
    font-size: var(--font-size-xl);
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--color-primary); /* Solid Pop 粗底線視覺錨 */
}

[data-theme="dark"] .deck-title {
    border-bottom-color: #FCA311;
}

.deck-subtitle {
    margin: 8px 0 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.deck-block {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

[data-theme="dark"] .deck-block {
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55);
}

.deck-block-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(34, 40, 56, 0.55); /* 眉標灰黑細線 */
}

[data-theme="dark"] .deck-block-title-row {
    border-bottom-color: rgba(232, 237, 248, 0.38);
}

.deck-block-title {
    font-weight: 800;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(34, 40, 56, 0.55); /* 眉標灰黑細線 */
}

[data-theme="dark"] .deck-block-title {
    color: #f5f2ec;
    border-bottom-color: rgba(232, 237, 248, 0.38);
}

.deck-block-title-row .deck-block-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.deck-fav-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.12s;
    white-space: nowrap;
}

[data-theme="dark"] .deck-fav-expand-btn {
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-fav-expand-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-text-main);
}

.deck-fav-expand-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); /* 按壓下沉,陰影壓扁 */
}

.deck-fav-expand-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.deck-fav-expand-arrow {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.deck-fav-expand-btn[aria-expanded="true"] .deck-fav-expand-arrow {
    transform: rotate(180deg);
}

.deck-favorites-row {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding: 4px 2px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.deck-favorites-row.expanded {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
}

.deck-fav-tile {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-snap-align: start;
}

.deck-fav-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

[data-theme="dark"] .deck-fav-img-wrap {
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-fav-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.deck-fav-name {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}

.deck-add-btn {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-primary-light);
    background: var(--color-primary-light);
    color: #14213d;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: background 0.15s, transform 0.12s, box-shadow 0.12s;
}

[data-theme="dark"] .deck-add-btn {
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5);
}

@media (hover: hover) {
    .deck-add-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.18); /* Solid Pop 浮起,實體陰影加深 */
    }

    [data-theme="dark"] .deck-add-btn:hover:not(:disabled) {
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.55);
    }
}

.deck-add-btn:hover:not(:disabled) {
    background: #e5940f;
    border-color: #e5940f;
}

.deck-add-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); /* 按壓下沉,陰影壓扁 */
}

.deck-add-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.deck-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.deck-fav-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    min-height: 36px;
}

.deck-fav-page-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.12s;
}

[data-theme="dark"] .deck-fav-page-btn {
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-fav-page-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
}

.deck-fav-page-btn:hover:not(:disabled) {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.deck-fav-page-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.deck-fav-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.deck-fav-page-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 52px;
    text-align: center;
}

/* 手機版排序分段控制器（桌面用表頭排序，隱藏） */
.deck-sort-segment {
    display: none;
}

/* 淨利賺/虧功能色 */
.deck-profit-cell.deck-profit-pos {
    color: var(--color-success);
}

.deck-profit-cell.deck-profit-neg {
    color: var(--color-error);
}

[data-theme="dark"] .deck-profit-cell.deck-profit-pos {
    color: #4ade80;
}

[data-theme="dark"] .deck-profit-cell.deck-profit-neg {
    color: #f87171;
}

/* 收藏橫滑列細捲軸（品牌色,取代預設粗白條） */
.deck-favorites-row::-webkit-scrollbar {
    height: 6px;
}

.deck-favorites-row::-webkit-scrollbar-track {
    background: transparent;
}

.deck-favorites-row::-webkit-scrollbar-thumb {
    background: rgba(20, 33, 61, 0.28);
    border-radius: 999px;
}

[data-theme="dark"] .deck-favorites-row::-webkit-scrollbar-thumb {
    background: rgba(232, 237, 248, 0.28);
}

.deck-table-wrap {
    width: 100%;
    overflow-x: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
}

[data-theme="dark"] .deck-table-wrap {
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.deck-table th,
.deck-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    vertical-align: middle;
    text-align: center;
}

.deck-table th {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-weight: 800;
    border-bottom: 2px solid rgba(34, 40, 56, 0.55); /* 眉標灰黑細線 */
    position: sticky;
    top: 0;
    z-index: 1;
}

[data-theme="dark"] .deck-table th {
    border-bottom-color: rgba(232, 237, 248, 0.38);
}

.deck-table td {
    font-variant-numeric: tabular-nums; /* 數字對齊鐵律 */
}

.deck-table td:first-child,
.deck-table th:first-child {
    width: 72px;
}

.deck-table th:last-child,
.deck-table td:last-child {
    width: 76px;
}

.deck-table th:nth-child(2),
.deck-table td:nth-child(2) {
    width: 92px;
}

.deck-table th:nth-child(3),
.deck-table td:nth-child(3) {
    width: 112px;
}

.deck-table th:nth-child(4),
.deck-table td:nth-child(4) {
    width: 140px;
}

.deck-row-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    display: block;
    margin: 0 auto;
}

.deck-input {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    padding: 0 10px;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums; /* 數字對齊鐵律 */
    min-width: 0;
}

.deck-input[type="number"]::-webkit-outer-spin-button,
.deck-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.deck-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.deck-select {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    padding: 0 28px 0 12px;
    font-size: var(--font-size-sm);
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

.deck-now-input {
    text-align: center;
}

.deck-now-cell,
.deck-profit-cell {
    text-align: center;
}

.deck-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.deck-th-sortable:hover {
    background: var(--color-bg-surface);
}

.deck-sort-icon {
    display: inline-block;
    margin-left: 3px;
    font-size: 11px;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.deck-th-sorted .deck-sort-icon {
    opacity: 1;
    color: var(--color-accent);
}

.deck-now-meta {
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.3;
}

.deck-delete-btn {
    height: 32px;
    width: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-error);
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: transform 0.12s, box-shadow 0.12s;
}

[data-theme="dark"] .deck-delete-btn {
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-delete-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
}

.deck-delete-all-btn {
    height: 32px;
    width: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-error);
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: transform 0.12s, box-shadow 0.12s;
}

[data-theme="dark"] .deck-delete-all-btn {
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-delete-all-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
}

.deck-delete-all-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.deck-delete-all-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.deck-clear-message {
    width: 100%;
    text-align: center;
    color: var(--color-text-main);
    line-height: 1.7;
    font-weight: 700;
}

.deck-clear-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.deck-clear-actions .btn {
    width: 100%;
    height: 44px;
    padding: 0 18px;
    font-weight: 800;
}

#deckClearCancelBtn {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-main);
}

#deckClearCancelBtn:hover:not(:disabled) {
    background: var(--color-bg-elevated);
}

#deckClearConfirmBtn {
    background: var(--color-error);
    color: #fff;
}

#deckClearConfirmBtn:hover:not(:disabled) {
    background: #b71c1c;
}

#deckClearConfirmBtn:active:not(:disabled) {
    transform: translateY(1px);
}

#deckClearModal .nickname-modal-body {
    align-items: stretch;
}

#deckClearModal .nickname-modal-content {
    max-width: 420px;
}

@media (max-width: 420px) {
    .deck-clear-actions {
        grid-template-columns: 1fr;
    }
}

.deck-delete-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.deck-delete-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.deck-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.deck-total-container {
    margin-top: 14px;
    padding: clamp(12px, 3.8vw, 20px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

[data-theme="dark"] .deck-total-container {
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.5);
}

.deck-total-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: end;
    width: 100%;
    gap: 4px;
    min-width: 0;
}

.deck-total-item.highlight {
    border-top: 1px dashed var(--color-border);
    padding-top: 10px;
    margin-top: 4px;
}

.deck-total-label {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: clamp(0.78rem, 2.7vw, 0.92rem);
    opacity: 0.85;
    text-align: right;
    line-height: 1.35;
}

.deck-total-value {
    font-weight: 900;
    color: var(--color-text-main);
    font-variant-numeric: tabular-nums; /* 數字對齊鐵律 */
    font-size: clamp(1rem, 5.2vw, 1.2rem);
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.deck-total-item.highlight .deck-total-value {
    font-size: clamp(1.15rem, 6.2vw, 1.45rem);
    color: var(--color-primary-light);
}

.deck-state {
    width: 100%;
    padding: 16px 10px;
    text-align: center;
    color: var(--color-text-secondary);
}

.deck-state-title {
    font-weight: 900;
    color: var(--color-text-main);
    margin-bottom: 6px;
}

.deck-state-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

@media (max-width: 359px) {
    .deck-total-container {
        padding: 10px;
        gap: 8px;
    }

    .deck-total-item {
        gap: 2px;
    }

    .deck-total-label {
        font-size: 0.75rem;
    }

    .deck-total-value {
        font-size: 0.95rem;
    }

    .deck-total-item.highlight .deck-total-value {
        font-size: 1.08rem;
    }
}

@media (max-width: 767px) {
    .deck-section {
        padding-top: 4px;
    }

    .deck-state {
        padding: 32px 16px;
        background: var(--color-bg-elevated);
        border: 1px dashed var(--color-border);
        border-radius: 8px;
        margin: 0 auto;
        box-sizing: border-box;
        width: 100%;
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .deck-table tbody tr.deck-empty-row,
    .deck-table tbody tr.deck-empty-row td {
        display: block;
        width: 100%;
        border: none;
        padding: 0;
    }

    .deck-block {
        padding: var(--space-md);
    }

    .deck-fav-tile {
        flex: 0 0 124px;
    }

    .deck-fav-img-wrap {
        padding: 6px;
    }

    .deck-table {
        table-layout: auto;
    }

    .deck-table thead {
        display: none;
    }

    .deck-table tbody {
        display: block;
    }

    .deck-item-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "img qty cost"
            "img quality now"
            "img profit del";
        gap: 8px 10px;
        padding: 12px 10px;
        border-bottom: 1px solid var(--color-border);
        overflow: hidden;
    }

    .deck-item-row > td {
        padding: 0;
        border: 0;
        font-size: var(--font-size-xs);
        min-width: 0;
        width: auto !important;
        max-width: 100%;
    }

    .deck-item-row .deck-cell-img {
        grid-area: img;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 0;
    }

    .deck-item-row .deck-cell-qty {
        grid-area: qty;
    }

    .deck-item-row .deck-cell-cost {
        grid-area: cost;
    }

    .deck-item-row .deck-cell-quality {
        grid-area: quality;
        overflow: hidden;
    }

    .deck-item-row .deck-cell-now {
        grid-area: now;
        overflow: hidden;
    }

    .deck-item-row .deck-cell-profit {
        grid-area: profit;
    }

    .deck-item-row .deck-cell-delete {
        grid-area: del;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 0;
    }

    .deck-item-row .deck-cell-info::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        color: var(--color-text-tertiary);
        margin-bottom: 4px;
        line-height: 1.2;
        text-align: left;
    }

    .deck-item-row .deck-cell-now,
    .deck-item-row .deck-cell-profit {
        text-align: left;
    }

    .deck-item-row .deck-cell-now {
        word-break: break-word;
    }

    .deck-row-img {
        width: 52px;
        height: 52px;
        margin: 0 auto;
    }

    .deck-input,
    .deck-select,
    .deck-delete-btn {
        width: 100%;
        height: 34px;
        font-size: var(--font-size-xs);
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .deck-input,
    .deck-select {
        padding-left: 8px;
        padding-right: 8px;
    }

    .deck-select {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        inline-size: 100%;
        max-inline-size: 100%;
        background-position: right 6px center;
        padding-right: 24px;
    }

    .deck-now-meta {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.25;
        white-space: normal;
    }

    .deck-delete-btn {
        width: 100%;
        height: 32px;
        border-radius: var(--radius-md);
        font-size: 0;
        font-weight: 700;
    }

    .deck-item-row .deck-delete-btn::before {
        content: "刪除";
        font-size: 12px;
        line-height: 1;
    }

    .deck-actions {
        justify-content: stretch;
    }

    .deck-actions .btn {
        width: 100%;
    }

    /* 排序分段控制器：白卡容器+硬陰影,active=深藍膠囊白字(深色=橘底深藍字) */
    .deck-sort-segment {
        display: flex;
        gap: 2px;
        padding: 3px;
        margin-bottom: 12px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    }

    [data-theme="dark"] .deck-sort-segment {
        box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.5);
    }

    .deck-sort-seg-btn {
        flex: 1 1 0;
        min-width: 0;
        border: none;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 700;
        padding: 8px 4px;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
    }

    .deck-sort-seg-btn.active {
        background: var(--color-primary);
        color: #ffffff;
    }

    [data-theme="dark"] .deck-sort-seg-btn.active {
        background: #FCA311;
        color: #14213d;
    }

    .deck-seg-arrow {
        font-size: 11px;
        line-height: 1;
    }

    .deck-seg-arrow:empty {
        display: none;
    }

    /* 列排版優化:舒適間距+眉標小標籤+卡圖硬陰影+淨利主數字化 */
    .deck-item-row {
        gap: 10px 12px;
        padding: 16px 12px;
    }

    .deck-item-row .deck-cell-info::before {
        color: var(--color-text-secondary);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .deck-row-img {
        background: #ffffff;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    }

    [data-theme="dark"] .deck-row-img {
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5);
    }

    .deck-item-row .deck-cell-now {
        font-weight: 700;
    }

    .deck-item-row .deck-cell-profit {
        font-weight: 900;
        font-size: var(--font-size-sm);
    }

}

@media (min-width: 768px) {
    .deck-total-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 18px;
        padding: 18px 22px;
    }

    .deck-total-item {
        justify-content: center;
        gap: 6px;
    }

    .deck-total-item.highlight {
        border-top: 0;
        border-left: 1px dashed var(--color-border);
        margin-top: 0;
        margin-left: 4px;
        padding-top: 0;
        padding-left: 18px;
    }

    .deck-total-label {
        font-size: 0.95rem;
        opacity: 1;
    }

    .deck-total-value {
        font-size: 1.18rem;
        width: auto;
        overflow-wrap: normal;
        word-break: normal;
    }

    .deck-total-item.highlight .deck-total-value {
        font-size: 1.46rem;
    }
}


/* In-App Browser Modal Styles */
.inapp-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.2s ease-out; }
.inapp-modal-content { background: var(--bg-card, #ffffff); color: var(--text-color, #1f2937); border-radius: 1rem; width: 100%; max-width: 400px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; transform: translateY(20px); animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.inapp-modal-header { flex-shrink: 0; padding: 1.25rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.inapp-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--text-color, #111827); line-height: 1.4; display: flex; align-items: center; gap: 0.5rem; }
.inapp-modal-body { flex-grow: 1; overflow-y: auto; padding: 1.25rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted, #4b5563); }
.inapp-modal-body p { margin-top: 0; margin-bottom: 0.75rem; }
.inapp-modal-body p:last-child { margin-bottom: 0; }
.inapp-modal-hint { background: var(--bg-hover, #f3f4f6); padding: 0.75rem; border-radius: 0.5rem; margin-top: 1rem; font-size: 0.85rem; color: var(--text-color, #374151); border: 1px solid var(--border-color, #e5e7eb); }
.inapp-modal-actions { flex-shrink: 0; padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border-color, #e5e7eb); }
.inapp-modal-actions .btn { width: 100%; justify-content: center; padding: 0.6rem 1rem; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; }
.inapp-modal-actions .btn:not(.btn-primary) { background: var(--bg-hover, #f3f4f6); color: var(--text-color, #374151); }
.inapp-modal-actions .btn:not(.btn-primary):hover { background: var(--border-color, #e5e7eb); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.inapp-instruction-img-wrapper { display: flex; justify-content: center; margin: 0.75rem 0; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); background: var(--bg-hover, #f3f4f6); }
.inapp-instruction-img { width: 100%; height: auto; max-height: 200px; object-fit: contain; display: block; }

/* ===== Hot Pokémon Widget (TomSelect-style dropdown) ===== */
.input-group-aside {
    display: flex;
    flex-direction: column;
}

.hot-pokemon-widget {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.hot-pokemon-widget .ts-control {
    align-items: center;
    cursor: pointer;
}

.hot-pokemon-placeholder {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 0;
}

.hot-pokemon-dropdown {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.hot-pokemon-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
}

.hot-pokemon-option--top .hot-pokemon-rank {
    color: #f59e0b;
}

.hot-pokemon-rank {
    flex: 0 0 22px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-align: right;
}

.hot-pokemon-name {
    flex: 1;
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-pokemon-count {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
}

.hot-pokemon-loader {
    text-align: center;
    padding: 6px;
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
}

/* Use CSS variables so colours flip automatically with theme */
#hotPokemonDropdown {
    background-color: var(--color-bg-surface);
    color: var(--color-text-main);
    border-color: var(--color-border);
}

.hot-pokemon-name {
    color: var(--color-text-main);
}

.hot-pokemon-option:hover,
.hot-pokemon-option.active {
    background-color: var(--color-bg-elevated);
}

@media (min-width: 768px) {
    #hotPokemonGroup {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 767px) {
    #hotPokemonGroup {
        grid-column: 1 / -1;
    }

    /* Hide widget when form is collapsed on mobile */
    .search-form.collapsed #hotPokemonGroup {
        display: none;
    }
}

/* ── Announcement Modal（首頁公告彈窗 · Solid Pop 風格）─────────── */
.ann-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Safe-area aware: keep clear of notch / home-indicator on centered modal */
    padding: max(20px, env(safe-area-inset-top))
             max(20px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom))
             max(20px, env(safe-area-inset-left));
}
.ann-modal[hidden] { display: none; }

.ann-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 33, 61, 0.55);
    backdrop-filter: blur(2px);
}

.ann-modal__card {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* Fill the flex container (viewport minus safe-area padding) — never clip */
    max-height: 100%;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(20, 33, 61, 0.14);
    border-radius: 18px;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.18), 0 18px 44px rgba(20, 33, 61, 0.28);
    animation: ann-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ann-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ann-modal__imglink { display: block; border-radius: 18px 18px 0 0; overflow: hidden; }
.ann-modal__imglink:hover .ann-modal__img { filter: brightness(1.03); }
.ann-modal__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    background: #f2f4f8;
}

.ann-modal__body {
    padding: 18px 20px 22px;
}

.ann-modal__title {
    margin: 0 0 8px;
    font-size: 1.18rem;
    font-weight: 800;
    color: #14213d;
    border-bottom: 2px solid rgba(34, 40, 56, 0.5);
    padding-bottom: 8px;
}

.ann-modal__text {
    margin: 0 0 18px;
    font-size: 0.94rem;
    line-height: 1.7;
    color: #3a4256;
}
.ann-modal__text strong { color: #d97706; font-weight: 800; }

/* ─── 雙公告版型（2026-08：8/23 維修 + 聽音樂換會員）─────────────────── */
.ann-modal__card--duo { max-width: 1000px; }
.ann-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 14px 0;
}
.ann-duo__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px solid rgba(20, 33, 61, 0.12);
    background: #fff;
}
.ann-duo__link { display: block; border-radius: 12px; }
.ann-duo__link:hover .ann-duo__img { box-shadow: 0 6px 18px rgba(20, 33, 61, 0.18); }
.ann-modal__card--duo .ann-modal__body { padding: 12px 20px 18px; }
@media (max-width: 720px) {
    .ann-modal__card--duo { max-width: 420px; }
    .ann-duo { grid-template-columns: 1fr; }
}

.ann-modal__ok {
    display: block;
    width: 100%;
    padding: 12px;
    background: #14213d;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.ann-modal__ok:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
}

.ann-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(20, 33, 61, 0.14);
    border-radius: 50%;
    color: #14213d;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.12);
}
.ann-modal__close:hover { background: #fff; }
.ann-modal__close:active { transform: translateY(1px); box-shadow: none; }
/* Expand the touch target to >=44x44 without enlarging the visual circle (Fitts' law) */
.ann-modal__close::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

/* Keyboard-visible focus ring (a11y) */
.ann-modal__ok:focus-visible,
.ann-modal__close:focus-visible {
    outline: 2px solid #fca311;
    outline-offset: 2px;
}

/* 夜間模式 */
[data-theme="dark"] .ann-modal__card {
    background: #1f2937;
    border-color: rgba(232, 237, 248, 0.16);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .ann-modal__title {
    color: #f5f2ec;
    border-bottom-color: rgba(232, 237, 248, 0.38);
}
[data-theme="dark"] .ann-modal__text { color: #cdd3df; }
[data-theme="dark"] .ann-modal__text strong { color: #fca311; }
[data-theme="dark"] .ann-modal__ok { background: #fca311; color: #14213d; }
[data-theme="dark"] .ann-modal__close {
    background: rgba(31, 41, 55, 0.92);
    border-color: rgba(232, 237, 248, 0.2);
    color: #f5f2ec;
}
[data-theme="dark"] .ann-modal__close:hover { background: #273548; }

/* ── Announcement Modal · RWD 矯正 ─────────────────────────────── */

/* 矮/橫向視窗（手機橫式、740x360、812x375 等）：1:1 大圖會把「我知道了」
   推到需捲動才看得到。改雙欄（圖左 / 內文+按鈕右），標題與按鈕不用捲動就可見。 */
@media (max-height: 560px) and (min-width: 480px) {
    .ann-modal__card {
        display: flex;
        flex-direction: row;
        max-width: 640px;
        overflow: hidden;               /* 讓內文區自己捲，卡片本身不捲 */
    }
    .ann-modal__img {
        flex: 0 0 44%;
        max-width: 280px;
        height: auto;
        align-self: stretch;            /* 圖高 = 卡高，object-fit 裁切填滿 */
        aspect-ratio: auto;
        border-radius: 18px 0 0 18px;
    }
    .ann-modal__body {
        flex: 1 1 auto;
        overflow-y: auto;               /* 內文過長時只捲這裡 */
        padding: 16px 18px 18px;
    }
    .ann-modal__title { font-size: 1.08rem; }
    .ann-modal__text { margin-bottom: 14px; font-size: 0.9rem; line-height: 1.6; }
}

/* 又矮又窄（罕見）：維持單欄但限制圖高，避免整片被大圖占滿仍要捲很久 */
@media (max-height: 560px) and (max-width: 479px) {
    .ann-modal__img { max-height: 42vh; }
}

/* 超小寬度（<=360px，含 320px）：收斂外距與內距，避免擁擠或水平溢出 */
@media (max-width: 360px) {
    .ann-modal {
        padding: max(14px, env(safe-area-inset-top))
                 max(14px, env(safe-area-inset-right))
                 max(14px, env(safe-area-inset-bottom))
                 max(14px, env(safe-area-inset-left));
    }
    .ann-modal__body { padding: 16px 16px 18px; }
    .ann-modal__title { font-size: 1.1rem; }
}

/* ── Dark Mode Supplemental Overrides ─────────────────────────── */

/* Select dropdown arrow: swap dark-blue stroke for light stroke */
[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23CECAC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    color-scheme: dark;
}

[data-theme="dark"] select.form-control option {
    background-color: #181A1B;
    color: #e0e0e0;
}

/* TomSelect dropdown panel in dark mode */
[data-theme="dark"] .ts-dropdown,
[data-theme="dark"] .ts-dropdown.single,
[data-theme="dark"] .ts-dropdown.multi {
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border-color: var(--color-border);
}

[data-theme="dark"] .ts-dropdown .option,
[data-theme="dark"] .ts-dropdown .optgroup-header {
    color: var(--color-text-main);
}

[data-theme="dark"] .ts-dropdown .option:hover,
[data-theme="dark"] .ts-dropdown .option.active {
    background: var(--color-bg-elevated);
    color: var(--color-text-main);
}

[data-theme="dark"] .ts-control {
    color: var(--color-text-main);
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .ts-control input {
    color: var(--color-text-main);
}

/* Skeleton shimmer in dark mode */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1C1E1F 25%, #252829 50%, #1C1E1F 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .skeleton-image {
    background-color: #1C1E1F;
}

/* ─── FAQ Section ────────────────────────────────────────────────────────── */
.faq-section {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-lg) var(--space-md);
    margin-top: var(--space-xl);
}

.faq-section .faq-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.faq-section .faq-item {
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    min-height: unset;
    display: block;
}

.faq-section .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 13px 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-main);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-section .faq-question::-webkit-details-marker { display: none; }

.faq-section .faq-question::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-primary-light);
    border-bottom: 2px solid var(--color-primary-light);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-section .faq-item[open] .faq-question::after {
    transform: rotate(225deg) translateY(-2px);
}

.faq-section .faq-answer {
    padding: 0 0 12px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.65;
}

.faq-section .faq-answer p { margin: 0; }

@media (min-width: 768px) {
    .faq-section .faq-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 48px;
        align-items: start;
    }
}


/* ============================================================
   我的晨報(digest.php)— 沿用 deck-* 版面骨架,加策展專屬元件
   品牌 token:深藍 --color-primary / 橘黃 --color-primary-light
   ============================================================ */

/* 通知管道提示條(Solid Pop:白卡+1px 灰細邊+實體硬陰影,禁彩色左邊條) */
.digest-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    border-radius: 14px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
}
[data-theme="dark"] .digest-notice { box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5); }
.digest-notice-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;                     /* 實色方塊,近直角 */
    background: var(--color-primary-light); /* 橘實色(禁半透明淡彩) */
    color: #14213d;
}
.digest-notice-text { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* basis 0:手機窄幅不掉行 */
.digest-notice-text strong { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-text-main); }
.digest-notice-sub { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.digest-notice-cta {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 6px;
    background: #06C755; /* LINE 綠 */
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="dark"] .digest-notice-cta { box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.5); }
.digest-notice-cta:hover { filter: brightness(0.95); }
.digest-notice-cta:active { transform: translateY(2px); box-shadow: 0 0.5px 0 0 rgba(0, 0, 0, 0.15); } /* 按壓下沉 */

.digest-block-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0 0 12px;
}

/* 計數徽章 X / 32(Solid Pop:實色方塊,禁半透明淡彩膠囊) */
.digest-counter {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: #14213d; /* 深藍實心白字 */
    vertical-align: middle;
}
/* 深色:深藍實心與卡底同色隱形 → 反轉為橘實色+深藍字 */
[data-theme="dark"] .digest-counter { color: #14213d; background: var(--color-primary-light); }
.digest-counter--full { color: #fff; background: var(--color-error); }
[data-theme="dark"] .digest-counter--full { color: #fff; background: #991b1b; }

/* 最愛列:加入晨報 toggle 按鈕(沿用 deck-fav-tile 尺寸) */
.digest-toggle-btn {
    width: 100%;
    height: 36px;
    border-radius: var(--radius-md);
    /* 未加入:中性 outline,字色用 text token → 白天深字白底、夜間淺字深底,兩種模式皆可讀 */
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="dark"] .digest-toggle-btn { box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5); }
.digest-toggle-btn:hover { border-color: var(--color-primary-light); color: var(--color-text-main); }
.digest-toggle-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); } /* 按壓下沉 */
.digest-toggle-btn.is-active {
    /* 已加入:金色實心 + 固定深藍字(金/琥珀底在兩種模式都偏亮,深字才讀得到) */
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #14213d;
}
.digest-toggle-btn:disabled { opacity: 0.55; cursor: default; }

/* 已加入晨報:卡圖角落金色鈴鐺 */
.deck-fav-tile.digest-tile { position: relative; }
.digest-tile-bell {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: #14213d; /* 固定深藍鈴鐺,金底在兩種模式皆對比足夠 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* 區塊二:已選晨報卡片格狀牆 */
.digest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
}
.digest-cell { position: relative; display: flex; flex-direction: column; gap: 8px; }
.digest-cell-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
}
[data-theme="dark"] .digest-cell-img-wrap { box-shadow: 0 2.5px 0 0 rgba(0, 0, 0, 0.5); }
@media (min-width: 768px) {
    .digest-cell-img-wrap { transition: transform 0.12s ease, box-shadow 0.12s ease; }
    .digest-cell:hover .digest-cell-img-wrap { transform: translateY(-1px); box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.18); } /* 桌面 hover 浮起 */
    [data-theme="dark"] .digest-cell:hover .digest-cell-img-wrap { box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.55); }
}
.digest-cell-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.digest-cell-name {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
}
.digest-cell-remove {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border: none;
    border-radius: 50%;
    background: #14213d; /* 深藍實色(Solid Pop 禁半透明) */
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); /* 小徽章用柔和陰影 */
}
.digest-cell-remove:hover { background: var(--color-error); }

/* toast */
.digest-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    max-width: 88vw;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 12000;
}
.digest-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 767px) {
    .digest-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
    .digest-notice { flex-wrap: wrap; }
    .digest-notice-cta { margin-left: 48px; }
}

/* 晨報空狀態(取代陽春的 deck-state) */
.digest-empty {
    grid-column: 1 / -1;       /* 在 grid 內也佔滿整列 */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 40px 24px;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-lg, 16px);
    background: var(--color-bg-elevated);
}
.digest-empty-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(252, 163, 17, 0.16);
    color: var(--color-primary-light);
    margin-bottom: 2px;
}
.digest-empty-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: 700;
    color: var(--color-text-main);
}
.digest-empty-sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    line-height: 1.6;
    max-width: 28em;
}

/* 晨報清空鈕(文字小按鈕,有別於卡組的 32px 方形 ×) */
.digest-clear-btn {
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="dark"] .digest-clear-btn { box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5); }
.digest-clear-btn:hover { color: var(--color-error); border-color: var(--color-error); }
.digest-clear-btn:active { transform: translateY(2px); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); } /* 按壓下沉 */

/* 晨報通知/發送時間設定列(Solid Pop:兩段無縫合併成單張白卡,段間灰細線) */
.digest-time-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}
#digestFreqRow {
    margin: 0;
    border-radius: 14px 14px 0 0;   /* 首段:上圓角 */
    border-bottom: none;
}
#digestTimeRow {
    margin: 0 0 18px;
    border-radius: 0 0 14px 14px;   /* 末段:下圓角+陰影 */
    border-top: 1px solid var(--color-border); /* 段間灰細線 */
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.15); /* Solid Pop 實體硬陰影 */
}
[data-theme="dark"] #digestTimeRow { box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.5); }
.digest-time-label { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-text-main); }
.digest-time-select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.12); /* Solid Pop 實體硬陰影 */
}
[data-theme="dark"] .digest-time-select { box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.5); }
.digest-time-select:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.digest-time-hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }

/* 桌面 hover 浮起(搭配 :active 下沉) */
@media (min-width: 768px) {
    .digest-toggle-btn:hover:not(:disabled),
    .digest-clear-btn:hover,
    .digest-notice-cta:hover { transform: translateY(-1px); box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.18); }
    [data-theme="dark"] .digest-toggle-btn:hover:not(:disabled),
    [data-theme="dark"] .digest-clear-btn:hover,
    [data-theme="dark"] .digest-notice-cta:hover { box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.55); }
    .digest-toggle-btn:active:not(:disabled),
    .digest-clear-btn:active,
    .digest-notice-cta:active { transform: translateY(2px); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15); }
}

/* ── 平面化圖示（取代 emoji）────────────────────────────────────────────────
   預設跟著文字走：1em 見方、繼承 color、基線微調對齊中文字。
   來源 web/includes/icons.php，JS 版 assets/js/icons.js。            */
.huca-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    flex-shrink: 0;
}
.huca-icon--lg { width: 1.35em; height: 1.35em; vertical-align: -0.25em; }
.huca-icon--accent { color: #FCA311; }

/* ── 全站返回頂部按鈕(由 assets/js/back-to-top.js 注入) ──────────────── */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* 無 FAB 的頁面在 iPhone 上避開 home indicator */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    /* 緊貼在 .feedback-btn / .gacha-fab 等浮動鈕(1000)之下,高於一般內容、低於 modal(1050) */
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base),
                visibility var(--transition-base), background var(--transition-base);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary-hover);
}

.back-to-top:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (max-width: 640px) {
    .back-to-top {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 0.01ms, visibility 0.01ms; }
}