/* ============================================
   RAVEN OS - Shared Theme
   Include this in every page for consistent branding.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base */
html, body {
    background: #000;
    color: #ccc;
    font-family: Rajdhani, sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* No padding needed - taskbar is position:fixed and overlays */
}

/* ---- Text Selection ---- */
::selection { background: rgba(139,36,29,0.4); color: #fff; }
::-moz-selection { background: rgba(139,36,29,0.4); color: #fff; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8b241d; }
::-webkit-scrollbar-corner { background: #0a0a0a; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #333 #0a0a0a; }

/* ---- Page Transition ---- */
/* Taskbar + header are always solid. Only content fades in. */
@keyframes raven-content-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.raven-content,
.raven-content-flush,
.comms-main,
.tracking-wrap .map-container,
.weather-main,
.strat-main,
.sw-wrap,
.settings-main,
.dash-grid,
.panels,
.home .col-left,
.home .center,
.home .col-right {
    animation: raven-content-in 0.12s ease-out;
}

/* ---- Tool Page Layout ---- */
.raven-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 36px);
}

/* ---- Header Bar (top of tool pages) ---- */
.raven-header {
    background: #0a0a0a;
    border-bottom: 1px solid rgba(139,36,29,0.25);
    padding: 0 4px 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    height: 38px;
}
.raven-title {
    font-size: 1em;
    font-weight: 600;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.raven-header-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 4px;
}
.raven-close {
    color: #555;
    font-size: 1.1em;
    font-weight: 400;
    cursor: pointer;
    background: none;
    border: none;
    width: 34px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    font-family: Rajdhani, sans-serif;
}
.raven-close:hover { color: #fff; background: rgba(139,36,29,0.3); }

/* ---- Content Area ---- */
.raven-content {
    flex: 1;
    overflow: auto;
    padding: 12px;
}
.raven-content-flush {
    flex: 1;
    overflow: auto;
    padding: 0;
}

/* ---- Taskbar (bottom) ---- */
.raven-taskbar {
    background: #0a0a0a;
    border-top: 1px solid rgba(139,36,29,0.25);
    padding: 0 12px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    flex-shrink: 0;
    z-index: 9999;
}
.raven-taskbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.raven-taskbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.raven-menu-btn {
    background: none;
    border: 1px solid #333;
    color: #8b241d;
    font-family: Rajdhani, sans-serif;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.raven-menu-btn:hover {
    border-color: #8b241d;
    color: #fff;
    background: rgba(139,36,29,0.15);
}
.raven-taskbar-sep {
    width: 1px;
    height: 18px;
    background: #222;
}
.raven-taskbar-app {
    font-size: 0.8em;
    font-weight: 600;
    color: #555;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.raven-taskbar-clock {
    font-size: 0.9em;
    font-weight: 700;
    color: #ccc;
    letter-spacing: 1px;
}
.raven-taskbar-version {
    font-size: 0.6em;
    color: #333;
    letter-spacing: 1px;
}
.raven-comms-toast {
    font-size: 0.8em;
    font-weight: 600;
    color: #555;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
    cursor: pointer;
}
.raven-comms-toast.active {
    color: #8b241d;
    animation: raven-pulse 1.5s infinite;
}
@keyframes raven-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---- Online Users Popup ---- */
.raven-online-popup {
    display: none;
    position: fixed;
    bottom: 40px;
    left: 60px;
    background: #0a0a0a;
    border: 1px solid rgba(139,36,29,0.3);
    padding: 8px 0;
    min-width: 180px;
    z-index: 10001;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.8);
}
.raven-online-popup.open { display: block; }
.raven-online-popup .popup-header {
    padding: 4px 12px;
    font-size: 0.65em;
    color: #8b241d;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(139,36,29,0.15);
    margin-bottom: 2px;
}
.raven-online-popup .popup-user {
    padding: 4px 12px;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.raven-online-popup .popup-user .name { color: #ccc; font-weight: 600; letter-spacing: 1px; }
.raven-online-popup .popup-user .channel { color: #444; font-size: 0.8em; margin-left: auto; }
.raven-online-popup .popup-user .dot {
    width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
}
.raven-online-popup .popup-user .dot.speaking {
    background: #8b241d;
    animation: raven-pulse 1s infinite;
}

/* ---- Start Menu (global, injected by taskbar) ---- */
.raven-start-menu {
    display: none;
    position: fixed;
    bottom: 36px;
    left: 0;
    background: #0a0a0a;
    border: 1px solid rgba(139,36,29,0.3);
    border-bottom: none;
    width: 240px;
    padding: 8px 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.8);
    z-index: 10000;
}
.raven-start-menu.open { display: block; }
.raven-start-menu .menu-header {
    padding: 8px 16px;
    font-size: 0.7em;
    font-weight: 700;
    color: #8b241d;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(139,36,29,0.15);
    margin-bottom: 4px;
}
.raven-start-menu a {
    display: block;
    padding: 6px 16px;
    color: #999;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.1s;
    cursor: pointer;
}
.raven-start-menu a:hover { background: #8b241d; color: #fff; }
.raven-start-menu a.active-page { color: #fff; border-left: 2px solid #8b241d; }
.raven-start-menu .sep { height: 1px; background: #1a1a1a; margin: 4px 0; }

/* ---- Power Overlay (global, injected by taskbar) ---- */
.raven-power-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 10002;
    align-items: center;
    justify-content: center;
    animation: raven-fade-in 0.2s ease;
}
.raven-power-overlay.open { display: flex; }
.raven-power-modal {
    background: #0a0a0a;
    border: 1px solid #8b241d;
    padding: 32px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 280px;
}
.raven-power-title {
    font-size: 0.8em;
    font-weight: 700;
    color: #8b241d;
    letter-spacing: 4px;
    margin-bottom: 8px;
}
.raven-power-btn {
    padding: 14px 32px;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid #333;
    background: #111;
    color: #e0e0e0;
    cursor: pointer;
    font-family: Rajdhani, sans-serif;
    transition: all 0.15s;
}
.raven-power-btn:hover { border-color: #8b241d; background: #1a1a1a; }
.raven-power-btn.reboot:hover { background: #8b241d; color: #fff; }
.raven-power-btn.shutdown:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.raven-power-btn.cancel { color: #555; border-color: #222; }
.raven-power-btn.cancel:hover { color: #fff; background: #222; border-color: #333; }
@keyframes raven-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Buttons ---- */
.raven-btn {
    background: #141414;
    border: 1px solid #333;
    color: #ccc;
    font-family: Rajdhani, sans-serif;
    font-size: 1em;
    padding: 8px 24px;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.15s;
}
.raven-btn:hover { border-color: #8b241d; color: #fff; }
.raven-btn.active { background: #8b241d; border-color: #8b241d; color: #fff; }
.raven-btn.small { font-size: 0.8em; padding: 4px 12px; }

/* ---- Cards/Panels ---- */
.raven-card {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
}
.raven-card-header {
    background: #0d0d0d;
    padding: 6px 12px;
    font-size: 0.7em;
    font-weight: 700;
    color: #8b241d;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(139,36,29,0.15);
}

/* ---- Status Indicators ---- */
.raven-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
}
.raven-badge.live { background: rgba(34,197,94,0.15); color: #22c55e; animation: raven-pulse 2s infinite; }
.raven-badge.paused { background: rgba(234,179,8,0.15); color: #eab308; }
.raven-badge.offline { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ---- Colours ---- */
.text-red { color: #8b241d; }
.text-green { color: #22c55e; }
.text-yellow { color: #eab308; }
.text-muted { color: #555; }
.text-dim { color: #333; }
.text-white { color: #fff; }

/* ---- Light Mode ---- */
body.light-mode {
    background: #e8e8ec;
    color: #222;
}
body.light-mode .raven-header {
    background: #f0f0f3;
    border-bottom-color: rgba(139,36,29,0.2);
}
body.light-mode .raven-title { color: #555; }
body.light-mode .raven-close { color: #999; }
body.light-mode .raven-close:hover { color: #fff; background: rgba(139,36,29,0.6); }

body.light-mode .raven-taskbar {
    background: #f0f0f3;
    border-top-color: rgba(139,36,29,0.2);
}
body.light-mode .raven-menu-btn { color: #8b241d; border-color: #ccc; }
body.light-mode .raven-menu-btn:hover { border-color: #8b241d; background: rgba(139,36,29,0.08); }
body.light-mode .raven-taskbar-app { color: #888; }
body.light-mode .raven-taskbar-clock { color: #333; }
body.light-mode .raven-taskbar-sep { background: #ddd; }

body.light-mode .raven-start-menu {
    background: #f5f5f7;
    border-color: rgba(139,36,29,0.2);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
}
body.light-mode .raven-start-menu a { color: #666; }
body.light-mode .raven-start-menu a:hover { background: #8b241d; color: #fff; }
body.light-mode .raven-start-menu a.active-page { color: #8b241d; }
body.light-mode .raven-start-menu .sep { background: #e0e0e0; }

body.light-mode .raven-online-popup {
    background: #f5f5f7;
    border-color: rgba(139,36,29,0.2);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
body.light-mode .raven-online-popup .popup-user .name { color: #333; }
body.light-mode .raven-online-popup .popup-user .channel { color: #999; }

body.light-mode .raven-card {
    background: #fff;
    border-color: #ddd;
}
body.light-mode .raven-card-header {
    background: #f8f8fa;
    border-bottom-color: rgba(139,36,29,0.1);
}

body.light-mode .raven-btn {
    background: #fff;
    border-color: #ccc;
    color: #555;
}
body.light-mode .raven-btn:hover { border-color: #8b241d; color: #8b241d; }
body.light-mode .raven-btn.active { background: #8b241d; border-color: #8b241d; color: #fff; }

body.light-mode .raven-content { background: #e8e8ec; }

/* Light mode scrollbars */
body.light-mode ::-webkit-scrollbar-track { background: #e8e8ec; }
body.light-mode ::-webkit-scrollbar-thumb { background: #ccc; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #8b241d; }
body.light-mode * { scrollbar-color: #ccc #e8e8ec; }
body.light-mode ::selection { background: rgba(139,36,29,0.2); color: #222; }

/* Light mode - page-specific panel overrides */
body.light-mode .kart-panel,
body.light-mode .widget,
body.light-mode .preview,
body.light-mode .oled,
body.light-mode .event-log,
body.light-mode .deck-btn,
body.light-mode .comms-main,
body.light-mode .tab-content,
body.light-mode .channel-section,
body.light-mode .info-bar,
body.light-mode .forecast-panel,
body.light-mode .radar-controls,
body.light-mode .weather-main,
body.light-mode .strat-main,
body.light-mode .settings-main,
body.light-mode .sw-wrap {
    background: #fff;
    border-color: #ddd;
}
body.light-mode .kart-label,
body.light-mode .widget-title,
body.light-mode .kart-stat-label,
body.light-mode .setting-desc,
body.light-mode .gpio-label { color: #999; }
body.light-mode .kart-driver,
body.light-mode .widget-value,
body.light-mode .setting-label { color: #222; }
body.light-mode .kart-stat-value,
body.light-mode .widget-data { color: #555; }
body.light-mode .kart-driver.empty { color: #bbb; }
body.light-mode .setting-row { border-bottom-color: #eee; }
body.light-mode .setting-group-title { border-bottom-color: rgba(139,36,29,0.2); }
body.light-mode .preset-btn { background: #f5f5f7; border-color: #ddd; color: #666; }
body.light-mode .preset-btn:hover { border-color: #8b241d; color: #8b241d; }
body.light-mode .race-ctrl-btn { background: #f5f5f7; border-color: #ddd; color: #555; }
body.light-mode .race-ctrl-btn:hover { border-color: #8b241d; color: #8b241d; }
body.light-mode .tab { background: #eee; color: #888; border-color: #ddd; }
body.light-mode .tab.active { background: #8b241d; color: #fff; border-color: #8b241d; }
body.light-mode .transcript-entry .ts { color: #aaa; }
body.light-mode .transcript-entry .speaker { color: #8b241d; }
body.light-mode .transcript-entry .text { color: #333; }
body.light-mode .recording-entry { border-bottom-color: #eee; }
body.light-mode .recording-entry:hover { background: #f5f5f7; }
body.light-mode .rec-user { color: #8b241d; }
body.light-mode .play-btn-small { border-color: #ccc; color: #8b241d; }
body.light-mode .channel-header { color: #8b241d; border-bottom-color: rgba(139,36,29,0.15); }
body.light-mode .channel-user .name { color: #333; }
body.light-mode input[type=range] { background: #ddd; }
body.light-mode input[type=text],
body.light-mode select { background: #f5f5f7; border-color: #ddd; color: #333; }
body.light-mode .config-overlay { background: #f5f5f7; border-left-color: rgba(139,36,29,0.2); }
body.light-mode .config-section-title { color: #888; border-bottom-color: #eee; }
body.light-mode .config-label { color: #555; }
body.light-mode .config-value { color: #333; }
body.light-mode .vbtn { background: #eee; color: #888; }
body.light-mode .vbtn:hover { background: #ddd; color: #333; }
body.light-mode .vbtn:active,
body.light-mode .vbtn.pressed { background: #8b241d; color: #fff; }

/* Light mode - comms page */
body.light-mode .channels-panel { border-right-color: #ddd; background: #f5f5f7; }
body.light-mode .channel-name { background: #eee; color: #8b241d; border-bottom-color: rgba(139,36,29,0.1); }
body.light-mode .channel-user .name { color: #333; }
body.light-mode .channel-empty { color: #bbb; }
body.light-mode .tabs { background: #f0f0f3; border-bottom-color: #ddd; }
body.light-mode .tab { color: #888; }
body.light-mode .tab.active { color: #8b241d; border-bottom-color: #8b241d; }
body.light-mode .tab:hover { color: #333; }
body.light-mode .search-bar { background: #f5f5f7; border-bottom-color: #ddd; }
body.light-mode .search-bar input { background: #fff; border-color: #ddd; color: #333; }
body.light-mode .search-bar input:focus { border-color: #8b241d; }
body.light-mode .audio-player { background: #f0f0f3; border-top-color: #ddd; }
body.light-mode .audio-player .now-playing { color: #666; }
body.light-mode .rec-date-picker { background: #f5f5f7; border-bottom-color: #ddd; }
body.light-mode .rec-date-picker select { background: #fff; border-color: #ddd; color: #333; }
body.light-mode .rec-filter { border-color: #ddd; color: #888; }
body.light-mode .rec-filter.active { border-color: #8b241d; color: #8b241d; }
body.light-mode .rec-filter:hover { border-color: #999; color: #333; }
body.light-mode .rec-empty,
body.light-mode .rec-loading { color: #bbb; }
body.light-mode .rec-time { color: #aaa; }
body.light-mode .rec-duration { color: #999; }
body.light-mode .rec-size { color: #bbb; }
body.light-mode .recording-entry.playing { background: rgba(139,36,29,0.05); }

/* Light mode - launcher */
body.light-mode .home .nav-btn { color: #888; }
body.light-mode .home .col-left .nav-btn:hover { color: #8b241d; border-right-color: #8b241d; background: linear-gradient(270deg, rgba(139,36,29,0.06), transparent); }
body.light-mode .home .col-right .nav-btn:hover { color: #8b241d; border-left-color: #8b241d; background: linear-gradient(90deg, rgba(139,36,29,0.06), transparent); }
body.light-mode .home .nav-btn .sub { color: #bbb; }
body.light-mode .home .nav-btn:hover .sub { color: #888; }
body.light-mode .home .center .clock { color: #333; }
body.light-mode .home .center .date { color: #999; }

/* Night Mode - red spectrum for night vision preservation */
body.night-mode {
    filter: brightness(0.6) sepia(1) saturate(3) hue-rotate(-30deg);
}
body.night-mode .raven-taskbar {
    filter: brightness(0.8);
}

/* Rain Alert - taskbar indicator */
.raven-rain-alert {
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #eab308;
}
.raven-rain-alert.critical {
    color: #ef4444;
}

/* Rain Alert - banner */
.raven-rain-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(234,179,8,0.12);
    border-bottom: 1px solid #eab308;
    padding: 8px 16px;
    z-index: 300;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.raven-rain-banner.show { display: flex; }
.raven-rain-banner.critical {
    background: rgba(239,68,68,0.12);
    border-bottom-color: #ef4444;
}
.raven-rain-banner .rain-text {
    font-size: 1em;
    font-weight: 700;
    color: #eab308;
    letter-spacing: 2px;
}
.raven-rain-banner.critical .rain-text { color: #ef4444; }
.raven-rain-banner .rain-dismiss {
    background: none;
    border: none;
    color: #555;
    font-size: 1.2em;
    cursor: pointer;
    margin-left: auto;
}

/* Night mode indicator in taskbar */
.raven-taskbar-night {
    font-size: 0.65em;
    color: #8b241d;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Server heartbeat indicator in taskbar */
.raven-taskbar-server {
    display: none;
    align-items: center;
    gap: 4px;
}
.raven-server-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #444;
    display: inline-block;
}
.raven-server-dot.ok {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.raven-server-dot.stale {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239,68,68,0.5);
}

/* Global SOS strip — injected by raven-taskbar.js on pages that opt in.
   Thin red ribbon at the very top. */
.raven-sos-strip {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ef4444;
    color: #fff;
    font-family: Rajdhani, sans-serif;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 8px;
    z-index: 10003;
    animation: raven-sos-strip-pulse 1s infinite;
    box-shadow: 0 0 18px rgba(239,68,68,0.8);
}
.raven-sos-strip.show { display: block; }
@keyframes raven-sos-strip-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.5; }
}

/* ---- Network Indicator ---- */
.raven-taskbar-network {
    font-size: 0.8em;
    font-weight: 600;
    color: #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    transition: color 0.15s;
}
.raven-taskbar-network:hover { color: #fff; }
.raven-network-label {
    font-size: 0.85em;
    letter-spacing: 1px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Network Popup ---- */
.raven-network-popup {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 60px;
    background: #0a0a0a;
    border: 1px solid rgba(139,36,29,0.3);
    padding: 8px 0;
    min-width: 220px;
    z-index: 10001;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.8);
}
.raven-network-popup.open { display: block; }
.raven-network-popup .popup-header {
    padding: 4px 12px;
    font-size: 0.65em;
    color: #8b241d;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(139,36,29,0.15);
    margin-bottom: 2px;
}
.raven-network-popup .net-current {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.raven-network-popup .net-current .net-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 1px;
}
.raven-network-popup .net-status {
    font-size: 0.7em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: auto;
}
.raven-network-popup .net-status.connected { color: #22c55e; }
.raven-network-popup .net-ip {
    padding: 0 12px 6px 36px;
    font-size: 0.75em;
    color: #555;
    letter-spacing: 1px;
}
.raven-network-popup .net-sep {
    height: 1px;
    background: #1a1a1a;
    margin: 4px 0;
}
.raven-network-popup .net-section-title {
    padding: 4px 12px;
    font-size: 0.6em;
    color: #555;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.raven-network-popup .net-option {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.raven-network-popup .net-option:hover { background: rgba(139,36,29,0.15); }
.raven-network-popup .net-option .net-name {
    color: #999;
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 1px;
}
.raven-network-popup .net-option:hover .net-name { color: #fff; }
.raven-network-popup .net-action {
    font-size: 0.7em;
    color: #8b241d;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: auto;
}

/* Light mode - network */
body.light-mode .raven-taskbar-network { color: #555; }
body.light-mode .raven-taskbar-network:hover { color: #333; }
body.light-mode .raven-network-popup {
    background: #f5f5f7;
    border-color: rgba(139,36,29,0.2);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
body.light-mode .raven-network-popup .net-current .net-name { color: #222; }
body.light-mode .raven-network-popup .net-ip { color: #999; }
body.light-mode .raven-network-popup .net-option .net-name { color: #666; }
body.light-mode .raven-network-popup .net-option:hover .net-name { color: #222; }
body.light-mode .raven-network-popup .net-sep { background: #e0e0e0; }
body.light-mode .raven-network-popup .net-section-title { color: #999; }