/* Header appearance picker: a compact, non-modal theme menu. */
.header-actions { margin-left: auto; min-width: 0; }
.appearance-picker { position: relative; flex-shrink: 0; }
.appearance-toggle { gap: 7px; width: auto; padding: 0 10px; white-space: nowrap; }
.appearance-toggle > span { font-size: 12px; font-weight: 700; }
.appearance-chevron { width: 13px; height: 13px; transition: transform .18s ease; }
.appearance-toggle[aria-expanded="true"] .appearance-chevron { transform: rotate(180deg); }
.appearance-panel { position: absolute; z-index: 80; top: calc(100% + 9px); right: 0; width: 288px; max-height: min(520px, calc(100vh - 82px)); overflow-y: auto; padding: 12px; border: 1px solid var(--border-medium); border-radius: 16px; color: var(--text-primary); background: color-mix(in srgb, var(--glass) 92%, white); box-shadow: 0 20px 48px rgba(15, 23, 42, .18); backdrop-filter: blur(20px) saturate(1.2); }
.appearance-panel[hidden] { display: none; }
.app-header :is(.dog-ear, .cat-search-whiskers) { display: none !important; }
.appearance-panel-heading { margin: 2px 3px 9px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.appearance-panel-heading-modes { margin-top: 14px; }
.appearance-standard { display: grid; grid-template-columns: 1fr; gap: 7px; }
.appearance-standard .theme-toggle, .appearance-reset { justify-content: center; width: 100%; min-height: 34px; border: 1px solid var(--border-light); border-radius: 9px; color: var(--text-primary); background: color-mix(in srgb, var(--surface-card) 88%, transparent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.appearance-standard .theme-toggle { padding: 0 10px; }
.appearance-standard .theme-toggle-label { display: inline; text-transform: none; letter-spacing: 0; }
.appearance-reset { padding: 8px 10px; color: var(--text-muted); }
.appearance-standard .theme-toggle:hover, .appearance-reset:hover { border-color: var(--brand-300); color: var(--brand-500); }
.appearance-theme-grid.mode-triggers { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.appearance-theme-grid .mode-trigger-btn.appearance-theme-option { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 5px 8px; border: 1px solid var(--border-light) !important; border-radius: 9px; color: var(--text-primary); background: color-mix(in srgb, var(--surface-card) 88%, transparent) !important; box-shadow: none !important; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; text-align: left; transform: none !important; animation: none !important; }
.appearance-theme-grid .mode-trigger-btn.appearance-theme-option:hover, .appearance-theme-grid .mode-trigger-btn.appearance-theme-option:focus-visible { border-color: var(--brand-300) !important; background: color-mix(in srgb, var(--brand-50) 40%, var(--surface-card)) !important; transform: none !important; animation: none !important; }
.appearance-theme-grid .mode-trigger-btn.appearance-theme-option[aria-pressed="true"] { border-color: var(--brand-500) !important; background: color-mix(in srgb, var(--brand-100) 58%, var(--surface-card)) !important; box-shadow: inset 3px 0 0 var(--brand-500) !important; }
.theme-swatch { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; overflow: hidden; border-radius: 8px; color: white; font-size: 14px; }
.theme-swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch-love { background: linear-gradient(135deg, #fb7185, #db2777); }.swatch-spring { background: linear-gradient(135deg, #86efac, #16a34a); }.swatch-hell { background: linear-gradient(135deg, #f97316, #991b1b); }.swatch-dog { background: linear-gradient(135deg, #f7c77d, #a85f26); }.swatch-cat { background: linear-gradient(135deg, #f9a8d4, #be185d); }.swatch-space { background: linear-gradient(135deg, #22d3ee, #312e81); }.swatch-labubu { background: #f4c979; }.swatch-giraffe { background: radial-gradient(circle at 35% 30%, #8d5424 0 11%, transparent 12%), radial-gradient(circle at 72% 68%, #8d5424 0 10%, transparent 11%), #f3bd57; }
html[data-theme="dark"] .appearance-panel, html[data-theme="space"] .appearance-panel, html[data-theme="hell"] .appearance-panel { background: color-mix(in srgb, var(--glass) 94%, #0f172a); }
@media (max-width: 1279px) and (min-width: 1025px) { .appearance-toggle > span { display: none; }.appearance-toggle { width: 34px; padding: 0; justify-content: center; }.appearance-chevron { display: none; } }
@media (max-width: 1024px) { .header-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-left: 0; }.header-search { grid-column: 1 / -1; margin-right: 0 !important; }.header-search input { width: 100%; }.appearance-picker { width: 100%; }.appearance-toggle { width: 100%; justify-content: center; }.appearance-panel { width: min(288px, 100vw - 28px); }.appearance-standard .theme-toggle-label { display: inline; } }
@media (max-width: 560px) { .header-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }.appearance-panel { right: auto; left: 0; max-height: calc(100vh - 24px); } }

/* A short toolbar on tablets and phones, with the appearance control beside the brand. */
@media (max-width: 1024px) {
    .app-header { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; align-items: center; }
    .app-header > .header-actions { display: contents !important; }
    .app-header .logo-wrap { grid-column: 1 / 3; grid-row: 1; width: auto; }
    .app-header .appearance-picker { grid-column: 3 / 5; grid-row: 1; width: auto; justify-self: end; }
    .app-header .appearance-toggle { width: auto; height: 34px; }
    .app-header .header-search { grid-column: 1 / -1; grid-row: 2; }
    .app-header #globalSearch { height: 34px; }
    .app-header #countryNav { grid-column: 1 / 3; grid-row: 3; width: max-content; max-width: 100%; }
    .app-header #logoutBtn { grid-column: 3 / 5; grid-row: 3; justify-self: end; width: auto; }
    .app-header :is(#homeBtn, #funnelBtn, #statsBtn, #capBtn) { grid-row: 4; justify-content: center; width: 100%; min-width: 0; min-height: 32px; padding: 5px 3px; gap: 4px; }
    .app-header #homeBtn { grid-column: 1; }
    .app-header #funnelBtn { grid-column: 2; }
    .app-header #statsBtn { grid-column: 3; }
    .app-header #capBtn { grid-column: 4; }
    .appearance-panel { right: 0; left: auto; max-height: calc(100dvh - 86px); }
}
@media (max-width: 767px) {
    .app-header #appSubtitle { display: none; }
    .app-header .logo-wrap { gap: 6px; }
    .app-header .logo-title { font-size: 16px; }
    .app-header #lastUpdatedText { max-width: 180px; font-size: 8px !important; }
    .app-header .appearance-toggle { padding: 0 8px; gap: 5px; }
    .app-header .appearance-toggle > span { font-size: 11px; }
    .app-header :is(#homeBtn, #funnelBtn, #statsBtn, #capBtn) { font-size: 11px; }
    .app-header :is(#homeBtn, #funnelBtn, #statsBtn, #capBtn) > :is(i, svg) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .appearance-chevron { transition: none; } }
html:is([data-theme="dark"], [data-theme="space"], [data-theme="hell"]) .appearance-theme-grid .mode-trigger-btn.appearance-theme-option[aria-pressed="true"] {
    background: color-mix(in srgb, var(--brand-700) 28%, var(--surface-card)) !important;
    color: var(--text-primary);
}