/* ==========================================================================
   DESIGN SYSTEM v3 - CONFIRMED DIRECTION
   Violet + coral accent pair, Liquid Glass materials, top nav (not sidebar -
   staff explicitly wanted nav to stay in its current position), bento-style
   dashboard layout, full button system, refined typography.
   Mobile-first: base styles target small screens, desktop breakpoints ADD
   complexity rather than the reverse.
   ========================================================================== */

:root {
    --bg-void: #050506;
    --border: rgba(255,255,255,0.12);
    --border-strong: rgba(255,255,255,0.22);

    --violet: #7c5cff;
    --violet-soft: rgba(124,92,255,0.18);
    --coral: #ff5d8f;
    --coral-soft: rgba(255,93,143,0.18);
    --amber: #ffb020;
    --amber-soft: rgba(255,176,32,0.18);
    --green: #2ee6a8;
    --green-soft: rgba(46,230,168,0.18);
    --red: #ff5470;
    --red-soft: rgba(255,84,112,0.16);

    --text-v3: #f6f6f8;
    --text-v3-dim: #b0b0ba;
    --text-v3-faint: #6c6c76;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px;
    --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-full: 999px;
}

.v3 { color: var(--text-v3); }
.v3 * { box-sizing: border-box; }
body.v3-body { background: var(--bg-void); font-family: 'Inter', sans-serif; margin: 0; -webkit-font-smoothing: antialiased; position: relative; }

.v3-disp { font-family: 'Space Grotesk', sans-serif; }
.v3-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-v3-faint); }
.v3-h1 { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.v3-body-sm { font-size: 13px; color: var(--text-v3-dim); line-height: 1.5; }
.v3-mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }

/* Ambient glow - fixed behind everything, lets the glass panels above have real color/depth
   to refract instead of just blurring flat black. */
.v3-ambient { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.v3-glow-1 { position: absolute; top: -250px; right: -100px; width: 700px; height: 700px; background: var(--violet); opacity: 0.18; border-radius: 50%; filter: blur(140px); }
.v3-glow-2 { position: absolute; bottom: -300px; left: 5%; width: 600px; height: 600px; background: var(--coral); opacity: 0.13; border-radius: 50%; filter: blur(150px); }

.v3-glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 32px rgba(0,0,0,0.35);
}

/* ============ TOP NAV ============ */
.v3-topnav { position: sticky; top: var(--space-3); margin: var(--space-3); border-radius: var(--r-lg); z-index: 300; }
.v3-topnav-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.v3-brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; text-decoration: none; color: var(--text-v3); }
.v3-brand span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.2px; white-space: nowrap; }
.v3-nav-links { display: none; align-items: center; gap: 2px; flex: 1; overflow: hidden; }
.v3-nav-link {
    display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: var(--r-xs);
    color: var(--text-v3-dim); text-decoration: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
    background: none; border: none; font-family: inherit;
}
.v3-nav-link i { font-size: 12px; opacity: 0.8; }
.v3-nav-link:hover { background: rgba(255,255,255,0.07); color: var(--text-v3); }
.v3-nav-link.active { background: linear-gradient(135deg, var(--violet-soft), var(--coral-soft)); color: #fff; }
.v3-nav-link.active i { color: var(--violet); opacity: 1; }
.v3-icon-btn {
    background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text-v3);
    width: 36px; height: 36px; border-radius: var(--r-xs); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.v3-icon-btn:hover { background: rgba(255,255,255,0.14); }
.v3-icon-btn.active { background: var(--violet); border-color: var(--violet); color: #fff; }
.v3-menu-btn { display: flex; }

/* ========== STREAMER MODE (ported from the old pre-v3 header/footer) ========== */
/* When active, anything marked .sensitive gets blurred until hovered - keeps IDs, tokens, IPs,
   and player identifiers off-stream without needing to navigate away from the page. Several v3
   pages (profile.ejs, account_settings_hub.ejs) already mark real data with .sensitive; this is
   what actually makes that markup do something, site-wide. */
body.streamer-mode .sensitive {
    filter: blur(6px);
    user-select: none;
    transition: filter 0.15s ease;
    cursor: pointer;
}
body.streamer-mode .sensitive:hover {
    filter: blur(0px);
}

/* Mobile dropdown menu - a panel below the nav bar, not a side drawer, since nav stays at
   the top per staff feedback either way. */
.v3-mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 0 var(--space-3) var(--space-3); max-height: 70vh; overflow-y: auto; }
.v3-mobile-menu.open { display: flex; }
.v3-mobile-menu .v3-nav-link { padding: 11px 12px; font-size: 13px; }
.v3-mobile-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-v3-faint); padding: 12px 12px 4px; }

/* ============ COMMAND PALETTE - replaces the old dropdown-of-link-columns pattern
   entirely. Centered overlay, not anchored to a nav item (so it can never overflow off
   the edge of the screen the way a wide anchored dropdown does), with a live search input
   that filters everything below it as you type. With 40+ pages behind "More", searching
   beats browsing columns - and it's a genuinely different structure from the old mega-menu,
   not just the same layout recolored. ============ */
.v3-palette-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 305; }
.v3-palette-backdrop.open { display: block; }
.v3-palette {
    display: none; position: fixed; top: 10vh; left: 50%; transform: translateX(-50%);
    width: 92vw; max-width: 640px; max-height: 76vh; border-radius: var(--r-lg); z-index: 310;
    background: #16121f; border: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 30px 80px rgba(0,0,0,0.65);
    overflow: hidden; flex-direction: column;
}
.v3-palette.open { display: flex; }
.v3-palette-search { display: flex; align-items: center; gap: 12px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.v3-palette-search i { color: var(--text-v3-faint); font-size: 15px; }
.v3-palette-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-v3); font-size: 15px; font-family: 'Inter', sans-serif; }
.v3-palette-search kbd { background: rgba(255,255,255,0.08); border: 1px solid var(--border-strong); border-radius: 5px; padding: 2px 7px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: var(--text-v3-dim); }
.v3-palette-results { overflow-y: auto; padding: var(--space-3); flex: 1; }
.v3-palette-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-v3-faint); padding: 12px 12px 6px; }
.v3-palette-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm);
    color: var(--text-v3-dim); text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer;
}
.v3-palette-item:hover { background: rgba(255,255,255,0.06); color: var(--text-v3); }
.v3-palette-item i { width: 18px; text-align: center; font-size: 13px; color: var(--text-v3-faint); flex-shrink: 0; }
.v3-palette-item:hover i { color: var(--violet); }
.v3-palette-empty { text-align: center; padding: 40px 20px; color: var(--text-v3-faint); font-size: 13px; }

@media (min-width: 1080px) {
    .v3-nav-links { display: flex; }
    .v3-menu-btn { display: none; }
    .v3-mobile-menu { display: none !important; }
}

/* ============ CONTENT / LAYOUT ============ */
.v3-content {
    padding: 0 var(--space-3) var(--space-6);
    position: relative; z-index: 1;
    /* Deliberately no max-width/auto-margin here - the whole point is that this stretches to
       fill whatever screen it's on, from a small laptop to a large ultrawide monitor, rather
       than sitting centered in a fixed-width column with empty space on either side. The bento
       grids below (auto-fit, minmax) naturally add more columns as the available width grows,
       so a wider monitor shows more cards per row instead of the same cards just floating in
       the middle of unused space. */
}
.v3-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); grid-auto-rows: minmax(120px, auto); }
.v3-bento .v3-span-2 { grid-column: span 2; }
.v3-bento .v3-span-3 { grid-column: span 3; }
@media (max-width: 640px) { .v3-bento .v3-span-2, .v3-bento .v3-span-3 { grid-column: span 1; } }

/* Dedicated main+rail split for content-heavy pages like the dashboard - deliberately NOT
   built on .v3-bento's auto-fit grid, since "span 2" only means something consistent when the
   total column count is fixed, and auto-fit's column count changes with viewport width. A
   real fixed-ratio grid (2fr main : 1fr rail) that collapses to one column on mobile is what
   this layout actually needs. */
.v3-dash-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) {
    .v3-dash-layout { grid-template-columns: 2fr 1fr; }
}

.v3-card { border-radius: var(--r-lg); padding: var(--space-5); }
.v3-card-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14.5px; margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-v3); }
.v3-card-title-left { display: flex; align-items: center; gap: var(--space-2); }
.v3-card-title i.v3-lead { color: var(--text-v3-faint); font-size: 13px; }
.v3-see-all { font-size: 11px; color: var(--violet); font-weight: 600; cursor: pointer; text-decoration: none; }

.v3-duty-hero { padding: var(--space-6); position: relative; overflow: hidden; }
.v3-duty-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: v3pulse 2s infinite; }
@keyframes v3pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--green-soft); } 50% { box-shadow: 0 0 0 9px rgba(46,230,168,0.06); } }
.v3-duty-timer { font-family: 'JetBrains Mono', monospace; font-size: 38px; font-weight: 700; letter-spacing: -1px; margin: var(--space-3) 0; background: linear-gradient(90deg, #fff, #fff 65%, var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.v3-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; }
.v3-stat-label { font-size: 10.5px; color: var(--text-v3-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.v3-stat-trend { font-size: 11px; margin-top: var(--space-2); display: flex; align-items: center; gap: 4px; }
.v3-stat-trend.up { color: var(--green); } .v3-stat-trend.down { color: var(--red); }

.v3-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); }
.v3-badge-violet { background: var(--violet-soft); color: #cabaff; }
.v3-badge-amber { background: var(--amber-soft); color: var(--amber); }
.v3-badge-coral { background: var(--coral-soft); color: #ffb3cb; }
.v3-badge-green { background: var(--green-soft); color: var(--green); }
.v3-badge-red { background: var(--red-soft); color: #ff8fa0; }

.v3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 11px var(--space-4); border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
    border: none; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease;
    font-family: 'Inter', sans-serif;
}
.v3-btn:active { transform: scale(0.97); }
.v3-btn-sm { padding: 7px 12px; font-size: 12px; }
.v3-btn-primary { background: linear-gradient(135deg, var(--violet), #9b6bff); color: #fff; box-shadow: 0 6px 20px rgba(124,92,255,0.35), inset 0 1px 0 rgba(255,255,255,0.3); }
.v3-btn-primary:hover { filter: brightness(1.08); }
.v3-btn-secondary { background: rgba(255,255,255,0.07); color: var(--text-v3); border: 1px solid var(--border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.v3-btn-secondary:hover { background: rgba(255,255,255,0.11); }
.v3-btn-ghost { background: transparent; color: var(--text-v3-dim); }
.v3-btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text-v3); }
.v3-btn-danger { background: var(--red-soft); color: #ff8fa0; border: 1px solid rgba(255,84,112,0.3); }
.v3-btn-danger:hover { background: rgba(255,84,112,0.24); }
.v3-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--r-xs); background: rgba(255,255,255,0.06); color: var(--text-v3-dim); border: 1px solid var(--border); flex-shrink: 0; }
.v3-btn-icon:hover { background: rgba(255,255,255,0.12); color: var(--text-v3); }

.v3-tinted-icon { width: 30px; height: 30px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.v3-tint-violet { background: var(--violet-soft); color: #cabaff; }
.v3-tint-amber { background: var(--amber-soft); color: var(--amber); }
.v3-tint-green { background: var(--green-soft); color: var(--green); }
.v3-tint-coral { background: var(--coral-soft); color: #ffb3cb; }

.v3-activity-item { display: flex; gap: var(--space-3); padding-bottom: var(--space-4); position: relative; }
.v3-activity-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: -4px; width: 1px; background: var(--border); }

.v3-roster-row { display: flex; align-items: center; gap: var(--space-3); padding: 9px 0; }
.v3-roster-row .v3-av-sm { width: 30px; height: 30px; border-radius: var(--r-xs); flex-shrink: 0; position: relative; }
.v3-online-dot { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg-void); }

.v3-spark-row { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin: var(--space-3) 0; }
.v3-spark-bar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--violet), var(--coral)); opacity: 0.85; transition: height 0.6s cubic-bezier(0.16,1,0.3,1); }
.v3-spark-labels { display: flex; gap: 6px; }
.v3-spark-labels span { flex: 1; text-align: center; font-size: 9.5px; color: var(--text-v3-faint); }

.v3-leader-row { display: flex; align-items: center; gap: var(--space-3); padding: 9px 0; }
.v3-leader-rank { width: 22px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: var(--text-v3-faint); }
.v3-leader-rank.gold { color: var(--amber); }

.v3-notif-item { display: flex; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
.v3-notif-item:last-child { border-bottom: none; }
.v3-notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 6px; }

/* ============ DATA TABLE (for list-heavy pages rebuilt against this system) ============ */
.v3-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.v3-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-v3-faint); padding: 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); }
.v3-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); font-size: 13px; }
.v3-table tr:last-child td { border-bottom: none; }
.v3-table tr:hover td { background: rgba(255,255,255,0.03); }
.v3-row-person { display: flex; align-items: center; gap: var(--space-3); }
.v3-row-av { width: 32px; height: 32px; border-radius: var(--r-xs); flex-shrink: 0; }
.v3-row-name { font-weight: 600; }
.v3-row-sub { font-size: 11px; color: var(--text-v3-faint); }
.v3-search-input { flex: 1; min-width: 180px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 14px; color: var(--text-v3); font-size: 13px; font-family: 'Inter', sans-serif; }
.v3-search-input:focus { outline: none; border-color: var(--violet); }
.v3-chip { padding: 7px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-v3-dim); cursor: pointer; }
.v3-chip.active { background: var(--violet-soft); border-color: var(--violet); color: #cabaff; }

@media (max-width: 700px) {
    /* Same overflow-scroping fix as the old table pattern, kept for consistency on pages
       still using dense tables under this new system. */
    .v3-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ============ SUBTABS - same pattern used on the redesigned profile page, ported to v3 ============ */
.v3-subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.v3-subtab {
    padding: 11px 18px; font-size: 12.5px; font-weight: 700; color: var(--text-v3-faint); cursor: pointer;
    border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.v3-subtab:hover { color: var(--text-v3-dim); }
.v3-subtab.active { color: var(--violet); border-bottom-color: var(--violet); }
.v3-subtab-count { background: rgba(255,255,255,0.08); border-radius: var(--r-full); padding: 1px 8px; font-size: 10px; }
.v3-subtab-panel { display: none; }
.v3-subtab-panel.active { display: block; }

/* ============ LIVE SEARCH (player lookup) ============ */
.v3-search-hero { text-align: center; padding: 12px 20px 28px; }
.v3-search-box {
    display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05);
    border: 1px solid var(--border); border-radius: var(--r-full); padding: 14px 22px; max-width: 640px; margin: 0 auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.v3-search-box:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.v3-search-box input { flex: 1; background: none; border: none; outline: none; color: var(--text-v3); font-size: 15px; font-family: 'Inter', sans-serif; }
.v3-search-spinner { display: none; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: v3-spin 0.6s linear infinite; }
.v3-search-spinner.show { display: block; }
@keyframes v3-spin { to { transform: rotate(360deg); } }
.v3-recent-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--r-full); padding: 6px 8px 6px 6px; font-size: 12px; color: var(--text-v3-dim); text-decoration: none; }
.v3-recent-chip:hover { border-color: var(--violet); color: var(--text-v3); }
.v3-recent-chip img { width: 20px; height: 20px; border-radius: 50%; }

.v3-lu-card { border-radius: var(--r-md); padding: 18px; text-decoration: none; color: var(--text-v3); display: block; position: relative; }
.v3-lu-card.watchlisted { border-color: var(--amber) !important; }
.v3-lu-card.blacklisted { border-color: var(--red) !important; }
.v3-lu-avatar-wrap { position: relative; flex-shrink: 0; }
.v3-lu-avatar { width: 46px; height: 46px; border-radius: 50%; display: block; }
.v3-lu-status-dot { position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #16121f; background: var(--text-v3-faint); }
.v3-lu-status-dot.in-server { background: var(--green); }
.v3-lu-mini-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; padding: 3px 8px; border-radius: var(--r-full); text-transform: uppercase; }

/* ---------- Custom date/time picker - auto-enhances every input[type=date] and
   input[type=datetime-local] site-wide (see enhanceDateInputs() in _footer_v3.ejs) ---------- */
.dt-picker-wrapper { position: relative; }
.dt-picker-display {
    width: 100%; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 14px; color: var(--text-v3); font-size: 13px; font-family: 'Inter', sans-serif;
}
.dt-picker-display::placeholder { color: var(--text-v3-faint); }
.dt-picker-display:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.dt-picker-popup {
    position: fixed; z-index: 2000; width: 300px; background: #16121f; border: 1px solid var(--border-strong);
    border-radius: var(--r-lg); padding: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); display: none;
}
.dt-picker-popup.open { display: block; }
.dt-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dt-picker-head button { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-v3-dim); width: 28px; height: 28px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; }
.dt-picker-head button:hover { border-color: var(--violet); color: var(--text-v3); }
.dt-picker-month-label { font-size: 13px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.dt-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-picker-dow { font-size: 9px; color: var(--text-v3-faint); text-align: center; padding: 4px 0; text-transform: uppercase; }
.dt-picker-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px;
    color: var(--text-v3-dim); border-radius: 8px; cursor: pointer; background: none; border: none; font-family: inherit;
}
.dt-picker-day:hover { background: rgba(255,255,255,0.06); color: var(--text-v3); }
.dt-picker-day.empty { cursor: default; }
.dt-picker-day.empty:hover { background: none; }
.dt-picker-day.today { border: 1px solid var(--violet); }
.dt-picker-day.selected { background: var(--violet); color: #fff; font-weight: 700; }
/* Plain text/number inputs and textareas on v3 pages that use the old .form-row markup (not a
   dedicated v3-* input class) were falling back to an old, pre-v3 stylesheet rule that reads
   var(--text)/var(--border) - variables which get silently redefined by a [data-theme="light"]
   block in that same old file. Whenever that light-theme flag is set anywhere, this one rule
   picks up light-mode colors (dark text, a barely-there light border) while the rest of the v3
   page stays dark, since v3's own stylesheet has no light-theme variant at all - producing
   exactly the washed-out, wrong-looking input box this fixes. Hardcoded dark-glass values here,
   deliberately not theme variables, so this can never be affected by any theme state again.
   High specificity (form-row/v3-card ancestor required) so this always wins over the old rule
   on any v3 page without needing to touch or remove that old rule itself. */
.v3-page .form-row input[type="text"], .v3-page .form-row input[type="number"], .v3-page .form-row textarea, .v3-page .form-row select,
.v3-card .form-row input[type="text"], .v3-card .form-row input[type="number"], .v3-card .form-row textarea, .v3-card .form-row select {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #f6f6f8 !important;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 100%;
}
.v3-page .form-row input[type="text"]:focus, .v3-page .form-row input[type="number"]:focus, .v3-page .form-row textarea:focus, .v3-page .form-row select:focus,
.v3-card .form-row input[type="text"]:focus, .v3-card .form-row input[type="number"]:focus, .v3-card .form-row textarea:focus, .v3-card .form-row select:focus {
    outline: none;
    border-color: var(--violet) !important;
    box-shadow: 0 0 0 3px var(--violet-soft);
}
.v3-page .form-row input::placeholder, .v3-card .form-row input::placeholder,
.v3-page .form-row textarea::placeholder, .v3-card .form-row textarea::placeholder {
    color: #6c6c76;
}
.dt-picker-time-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.dt-picker-time-row label { font-size: 11px; color: var(--text-v3-faint); }
.dt-picker-time-row select { flex: 1; padding: 6px 8px; font-size: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text-v3); }
.dt-picker-footer { display: flex; gap: 8px; margin-top: 14px; }
.dt-picker-footer button {
    flex: 1; padding: 8px; font-size: 11.5px; font-weight: 700; border-radius: var(--r-sm); border: 1px solid var(--border);
    background: rgba(255,255,255,0.04); color: var(--text-v3-dim); cursor: pointer; font-family: inherit;
}
.dt-picker-footer button.dt-picker-today-btn:hover { border-color: var(--violet); color: var(--text-v3); }
.dt-picker-footer button.dt-picker-clear-btn:hover { border-color: #ff453a; color: #ff8f8f; }