/* Shared browser appearance. Loaded after each page's component styles. */
html[data-theme="light"] {
    --accent: #006fbd;
    --accent-dim: #005a9b;
    --accent-glow: rgba(0,111,189,.12);
    --green: #167442;
    --orange: #946000;
    --red: #c6303e;
    --bg: #f2f4f7;
    --bg-card: #ffffff;
    --bg-panel: #e9eef4;
    --bg-station: #e2e9f1;
    --bg-input: #f6f8fb;
    --border: #cdd5df;
    --text: #202938;
    --text-dim: #596779;
    --text-label: #596779;
    --shadow: 0 4px 20px rgba(32,41,56,.09);
    /* Standalone device-preview page chrome. Screen artwork keeps its colours. */
    --page-bg: var(--bg);
    --panel-bg: var(--bg-card);
    --line: var(--border);
    --fg: var(--text);
    --fg-dim: var(--text-dim);
    --view-accent: var(--green);
    --warn: var(--orange);
}

.web-theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border, var(--line));
    border-radius: 50%;
    background: var(--bg-panel, var(--panel-bg));
    color: var(--text, var(--fg));
    font: 22px/1 system-ui, sans-serif;
    cursor: pointer;
}
.web-theme-button:hover { border-color: var(--accent); color: var(--accent); }
.web-theme-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-header { gap: 10px; flex-wrap: wrap; }
.header-right { flex-wrap: wrap; }

html[data-theme="light"] .logo-icon { filter: none; }
html[data-theme="light"] .btn-play,
html[data-theme="light"] .theme-btn.active { box-shadow: none; }

/* Green is the navigation accent in both themes. */
html[data-theme="light"] .player-view-switch,
html[data-theme="light"] .quick-links-menu {
    border-color: #8acda5;
    box-shadow: var(--shadow);
}
html[data-theme="light"] .player-view-option.active,
html[data-theme="light"] .player-view-option:hover,
html[data-theme="light"] .quick-links-toggle,
html[data-theme="light"] .quick-links[open] > .quick-links-toggle,
html[data-theme="light"] .quick-links-grid a:hover {
    background: #e8f7ee;
    color: var(--green);
    border-color: #8acda5;
}
html[data-theme="light"] .station.active {
    background: #e4f1fc;
    color: var(--accent);
    border-color: var(--accent);
}
html[data-theme="light"] .www-outdated-bar {
    background: #fff3d9;
    color: #825300;
    border-color: #d9b46a;
}
html[data-theme="light"] .www-outdated-bar:hover { background: #ffebbf; }
html[data-theme="light"] .bt-log {
    background: #edf7f0;
    border-color: #8acda5;
    scrollbar-color: #8acda5 transparent;
}
html[data-theme="light"] optgroup { background: var(--bg-panel); }

/* Filled actions formerly used dark text on neon accents. */
html[data-theme="light"] #fw_update_btn:not(:disabled),
html[data-theme="light"] .btn-apply,
html[data-theme="light"] .section-tab.active,
html[data-theme="light"] .rules-add-btn,
html[data-theme="light"] .pane-tools button.primary,
html[data-theme="light"] .pane-tools label.upload.primary,
html[data-theme="light"] .files-toolbar label.upload.primary,
html[data-theme="light"] .editor-toolbar button.primary,
html[data-theme="light"] .modal-foot button.primary,
html[data-theme="light"] .modal-head .src,
html[data-theme="light"] .online-wallpaper-actions button:hover:not(:disabled),
html[data-theme="light"] .net-wp-manual-hint button:hover:not(:disabled) { color: #fff; }
html[data-theme="light"] .rt-chip.sender,
html[data-theme="light"] .lane-btn.sender,
html[data-theme="light"] .lane-btn.sender .lane-add-icon { color: var(--accent); }
html[data-theme="light"] .node.src.btn,
html[data-theme="light"] .ctl-pair.btn { --src: #7941bb; }
html[data-theme="light"] .node.src.ir,
html[data-theme="light"] .ctl-pair.ir { --src: #b02a78; }
html[data-theme="light"] .node.src.io,
html[data-theme="light"] .ctl-pair.io { --src: #15766f; }

html[data-theme="light"] .badge.live { color: var(--green); border-color: #8acda5; }
html[data-theme="light"] .badge.live::before { background: var(--green); }
html[data-theme="light"] .badge.down { border-color: #d9b46a; }
html[data-theme="light"] #err { background: #fff0f1; color: var(--red); border-color: #e4a5ab; }
html[data-theme="light"] .volbar input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--accent) 0 var(--fill, 0%), var(--bg-panel) var(--fill, 0%) 100%);
}
html[data-theme="light"] .volbar input[type=range]::-moz-range-track { background: var(--bg-panel); }

@media (prefers-reduced-motion: reduce) {
    body, .card { transition: none; }
}