/*
 * Modern skin for APX3D. Loaded after every template's own <style>, so it only restyles: no markup, ids or behaviour change.
 * The brand blue stays (#2a5298 / #3b6cc9); what changes is depth, radius, spacing, motion and surface treatment.
 */
:root {
    --color-bg:        #f3f6fb;
    --color-border:    #e3e8f1;
    --color-border-dk: #c4cddd;
    --color-muted:     #5f6e86;
    --brand-grad:      linear-gradient(135deg, #2a5298 0%, #3b6cc9 100%);
    --brand-glow:      0 6px 18px rgba(42, 82, 152, 0.28);
    --shadow-xs: 0 1px 2px rgba(20, 38, 70, 0.05), 0 1px 3px rgba(20, 38, 70, 0.04);
    --shadow-sm: 0 2px 6px rgba(20, 38, 70, 0.06), 0 6px 16px rgba(20, 38, 70, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 38, 70, 0.10), 0 2px 6px rgba(20, 38, 70, 0.05);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    --focus-ring: 0 0 0 3px rgba(59, 108, 201, 0.28);
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(59, 108, 201, 0.10), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(26, 46, 74, 0.06), transparent 55%),
        var(--color-bg);
    background-attachment: fixed;
    letter-spacing: -0.003em;
}

::selection { background: rgba(59, 108, 201, 0.22); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Header: dark glass ── */
header {
    background: rgba(18, 33, 57, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(10, 20, 40, 0.18);
}
.logo-icon {
    background: var(--brand-grad);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    box-shadow: var(--brand-glow);
}
.burger-btn { border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.burger-btn:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }

/* ── Drawer ── */
.side-drawer { border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-shadow: -20px 0 60px rgba(10, 20, 40, 0.28); }
.drawer-nav-item { border-radius: 12px; }
.drawer-user-card { border-radius: 14px; }

/* ── Dashboard header and stat tiles ── */
.dashboard-header { border-bottom: none; padding-bottom: 0.5rem; }
.header-intro h1 { font-size: 2rem; letter-spacing: -0.02em; }
.header-intro p { color: var(--color-muted); max-width: 52ch; }

.btn-action-primary { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 600; border: 1px solid transparent; }
.btn-action-primary, .btn-launch {
    background: var(--brand-grad);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 12px rgba(42, 82, 152, 0.25);
    letter-spacing: 0.005em;
}
.btn-action-primary:hover, .btn-launch:hover {
    background: var(--brand-grad);
    filter: brightness(1.07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, var(--brand-glow);
    transform: translateY(-1px);
}
.btn-launch { border-radius: 14px; line-height: 1.25; text-align: center; }
.btn-action-primary:active, .btn-launch:active { transform: translateY(0); filter: brightness(0.97); }

.stats-strip { gap: 1rem; }
.stat-card {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon { border-radius: 14px; background: linear-gradient(135deg, #e8f0ff, #f4f8ff); }
.stat-icon.green { background: linear-gradient(135deg, #e3f8ec, #f3fcf7); }
.stat-icon.amber { background: linear-gradient(135deg, #fff1d6, #fffaf0); }
.stat-value { font-family: var(--font-head); letter-spacing: -0.02em; }

/* ── Search and view switch ── */
.search-input {
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.search-input:focus { border-color: var(--color-blue-lt); box-shadow: var(--focus-ring); outline: none; }
.view-switcher { border-radius: 999px; background: rgba(255, 255, 255, 0.8); border-color: var(--color-border); box-shadow: var(--shadow-xs); padding: 0.22rem; }
.view-btn { border-radius: 999px; padding: 0.4rem 0.95rem; }
.view-btn.active { background: var(--brand-grad); color: #fff; box-shadow: 0 3px 10px rgba(42, 82, 152, 0.28); }

/* ── Scan cards: big image, soft depth, lift on hover ── */
.grid-container { gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.data-card {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.data-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 38, 70, 0.16), 0 4px 10px rgba(20, 38, 70, 0.06); border-color: rgba(59, 108, 201, 0.35); }
.card-image-wrap { height: 210px; border-bottom: none; }
.card-image-wrap::after {   /* gentle scrim so badges stay legible and the photo feels set into the card */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 20, 40, 0.28) 0%, rgba(10, 20, 40, 0) 38%, rgba(10, 20, 40, 0.36) 100%);
}
.card-overlay-badge, .card-overlay-tag { z-index: 3; }
.card-overlay-tag { border-radius: 999px; padding: 0.26rem 0.7rem; background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card-body-content { padding: 1.3rem 1.5rem 1.5rem; }
.card-title { font-size: 1.2rem; letter-spacing: -0.015em; }
.card-meta { background: #f6f9ff; border-color: #e6edf9; border-radius: 12px; }
.meta-val { border-radius: 6px; background: #e8f0ff; }
.asset-status { border-radius: 999px; }

/* ── List view ── */
.list-container { border-radius: var(--radius-lg); }
.list-row, .list-item { border-radius: 14px; transition: var(--transition); }

/* ── Forms, tables and panels (admin, login, uploads) ── */
.auth-card, .admin-section, .upload-card {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.92);
}
.auth-card { padding: 2.75rem 2.5rem; }
.field-input, .form-input, input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
    border-radius: 12px;
    border-color: var(--color-border-dk);
    transition: var(--transition);
}
.field-input:focus, .form-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--color-blue-lt); box-shadow: var(--focus-ring); outline: none; }
button, .btn-submit, .btn-primary { transition: var(--transition); }
.btn-submit, .btn-primary, button[type=submit] { border-radius: 12px; }
.mgmt-table th { letter-spacing: 0.04em; }
.mgmt-table tbody tr { transition: background 0.15s ease; }
.mgmt-table tbody tr:hover { background: #f5f8ff; }
.status-badge, .badge-role { border-radius: 999px; }

.alert { border-radius: 14px; box-shadow: var(--shadow-xs); }
footer { background: transparent; border-top: 1px solid var(--color-border); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.data-card, .stat-card, .admin-section, .auth-card { animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.data-card:nth-child(2) { animation-delay: 0.05s; } .data-card:nth-child(3) { animation-delay: 0.1s; }
.data-card:nth-child(4) { animation-delay: 0.15s; } .data-card:nth-child(n+5) { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Theme switch button (header) ── */
.nav-actions { display: flex; align-items: center; gap: 0.55rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; color: #ffd479; }

/* ── Dark theme ──
 * Tokens first: most surfaces, borders and text follow them. --color-navy doubles as the heading colour, so in dark it becomes a
 * light ink; the header and drawer get explicit dark backgrounds below instead of relying on it. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-navy:      #dce7fb;
    --color-navy-mid:  #b8c9ea;
    --color-blue:      #5b8cf0;
    --color-blue-lt:   #7aa2f7;
    --color-bg:        #0d1422;
    --color-surface:   #151f33;
    --color-border:    #25324b;
    --color-border-dk: #34456a;
    --color-text:      #e6edf9;
    --color-muted:     #98a7c2;
    --color-danger:    #f28b82;
    --color-success:   #6ed39a;
    --color-warn:      #f3b867;
    --color-info:      #9db8f5;
    --brand-grad:      linear-gradient(135deg, #2f5fb8 0%, #4a7fe0 100%);
    --brand-glow:      0 6px 20px rgba(74, 127, 224, 0.35);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --focus-ring: 0 0 0 3px rgba(122, 162, 247, 0.38);
}
:root[data-theme="dark"] body {
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(74, 127, 224, 0.16), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(120, 90, 220, 0.08), transparent 55%),
        var(--color-bg);
    background-attachment: fixed;
}
:root[data-theme="dark"] header { background: rgba(9, 15, 28, 0.78); border-bottom-color: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .side-drawer { background: #101a2d; }
:root[data-theme="dark"] .drawer-header, :root[data-theme="dark"] .drawer-footer { background: #0c1424; }
:root[data-theme="dark"] .drawer-nav-item:hover { background: rgba(122, 162, 247, 0.12); }

/* panels, tiles, cards */
:root[data-theme="dark"] .stat-card { background: rgba(21, 31, 51, 0.8); border-color: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .stat-icon { background: linear-gradient(135deg, #1c2c4d, #162340); }
:root[data-theme="dark"] .stat-icon.green { background: linear-gradient(135deg, #153326, #12281f); }
:root[data-theme="dark"] .stat-icon.amber { background: linear-gradient(135deg, #3a2c12, #2c2210); }
:root[data-theme="dark"] .data-card, :root[data-theme="dark"] .list-container,
:root[data-theme="dark"] .auth-card, :root[data-theme="dark"] .admin-section, :root[data-theme="dark"] .upload-card {
    background: rgba(21, 31, 51, 0.94); border-color: rgba(255, 255, 255, 0.07);
}
:root[data-theme="dark"] .data-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(122, 162, 247, 0.35); border-color: rgba(122, 162, 247, 0.4); }
:root[data-theme="dark"] .card-meta { background: #111a2d; border-color: #25324b; }
:root[data-theme="dark"] .meta-val { background: #1b2b4d; color: #a9c2f7; }
:root[data-theme="dark"] .card-overlay-badge * { color: inherit; }

/* inputs and controls */
:root[data-theme="dark"] .search-input, :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .field-input,
:root[data-theme="dark"] .role-select, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
    background: #0f182a; color: var(--color-text); border-color: var(--color-border-dk);
}
:root[data-theme="dark"] ::placeholder, :root[data-theme="dark"] .form-control::placeholder { color: #6c7c99; }
:root[data-theme="dark"] .view-switcher { background: rgba(21, 31, 51, 0.85); }
:root[data-theme="dark"] .view-btn:hover { color: #fff; }
:root[data-theme="dark"] .btn-restrict { background: #1d1a24; color: #f28b82; border-color: #6b3a3a; }

/* tables and badges */
:root[data-theme="dark"] .mgmt-table th, :root[data-theme="dark"] .data-table th { background: #111a2d; color: var(--color-navy); border-color: var(--color-border); }
:root[data-theme="dark"] .mgmt-table td, :root[data-theme="dark"] .data-table td { border-color: var(--color-border); }
:root[data-theme="dark"] .mgmt-table tbody tr:hover { background: #18243d; }
:root[data-theme="dark"] .category-chip, :root[data-theme="dark"] .asset-status { background: #132036; border-color: var(--color-border-dk); color: var(--color-navy); }
:root[data-theme="dark"] .asset-status-ready { color: #6ed39a; border-color: #2f7a55; }
:root[data-theme="dark"] .status-restricted { background: #2a1517; color: #f6a5a0; border-color: #6b3a3a; }
:root[data-theme="dark"] .status-granted { background: #12281f; color: #8ee0b0; border-color: #2f7a55; }
:root[data-theme="dark"] .btn-role-update { background: #2b4a85; }

/* alerts */
:root[data-theme="dark"] .alert { background: #151f33; border-color: var(--color-border-dk); color: var(--color-text); }
:root[data-theme="dark"] .alert-warning { background: #2b2210; color: #f3b867; border-color: #a2681f; }
:root[data-theme="dark"] .alert-danger, :root[data-theme="dark"] .alert-error { background: #2a1517; color: #f6a5a0; border-color: #8a3b3b; }
:root[data-theme="dark"] .alert-success { background: #12281f; color: #8ee0b0; border-color: #2f7a55; }
:root[data-theme="dark"] .alert-info { background: #14243f; color: #a9c2f7; border-color: #2d4a85; }
:root[data-theme="dark"] .empty-vault { background: rgba(21, 31, 51, 0.6); }
:root[data-theme="dark"] footer { border-top-color: var(--color-border); }
:root[data-theme="dark"] img { filter: brightness(0.92); }
:root[data-theme="dark"] .card-thumb-img, :root[data-theme="dark"] .list-thumb-img { filter: brightness(0.88) contrast(1.04); }

/* ── Spacious layout ──
 * A 3D-data viewer, not a dense admin tool: wide gutters, generous vertical rhythm, roomy cards. Applied last so it wins over the
 * templates' own compact values. */
.container { max-width: 1320px; padding-left: clamp(1.75rem, 7vw, 7rem); padding-right: clamp(1.75rem, 7vw, 7rem); }
.nav-wrapper { height: 68px; }
/* `.container` (specificity 0,1,0) zeroes vertical padding, so `main` needs the class to override it */
main.container { padding-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
footer .container { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.dashboard-header { gap: 1.75rem; margin-bottom: 2.75rem; }
.header-intro h1 { margin-bottom: 0.75rem; }
.header-intro p { line-height: 1.7; }
.stats-strip { gap: 1.5rem; margin-bottom: 2.75rem; }
.stat-card { padding: 1.5rem 1.75rem; gap: 1.25rem; }
.stat-icon { width: 52px; height: 52px; }
.dashboard-toolbar { padding: 1.1rem 1.5rem; margin-bottom: 2.5rem; gap: 1.25rem; border-radius: var(--radius-lg); }
.search-input { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.view-btn { padding: 0.5rem 1.15rem; }

.grid-container { gap: 2.25rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-bottom: 3.5rem; }
.card-image-wrap { height: 230px; }
.card-body-content { padding: 1.75rem 1.9rem 1.9rem; }
.card-title { margin-bottom: 0.65rem; }
.card-description { line-height: 1.65; margin-bottom: 1.6rem; }
.card-meta { padding: 0.95rem 1.15rem; gap: 0.55rem; margin-bottom: 1.6rem; }
.card-actions { gap: 0.75rem; }
.btn-launch { padding: 0.85rem 1.15rem; }

.admin-section { padding: 2.25rem 2.5rem; margin-bottom: 2.75rem; }
.section-title-wrap { margin-bottom: 1.1rem; }
.section-desc { line-height: 1.7; margin-bottom: 1.5rem; }
.mgmt-table th, .mgmt-table td { padding: 1.1rem 1.35rem; }
.auth-card { padding: 3rem 2.75rem; max-width: 460px; }
.form-group { margin-bottom: 1.4rem; }

.pending-card { padding: 3.25rem 2.75rem; max-width: 560px; }
.pending-icon { margin-bottom: 1.6rem; }
.pending-card p { line-height: 1.7; margin-bottom: 1.9rem; }

@media (max-width: 640px) {
    .admin-section { padding: 1.5rem 1.25rem; }
    .card-body-content { padding: 1.4rem; }
    .stats-strip, .grid-container { gap: 1.25rem; }
}

/* ── Dark-mode fixes for rules the templates hardcode as light (hover rows, secondary buttons, icons) ──
 * Cell backgrounds paint over row backgrounds, so hover has to be set on the `td`. */
:root[data-theme="dark"] .mgmt-table tr:hover td,
:root[data-theme="dark"] .data-table tr:hover td { background: #1a2742; }
:root[data-theme="dark"] .btn-grant { background: #0f1f19; color: #6ed39a; border-color: #2f7a55; }
:root[data-theme="dark"] .btn-grant:hover { background: #2f7a55; color: #fff; }
:root[data-theme="dark"] .btn-restrict:hover { background: #b83a3a; color: #fff; border-color: #b83a3a; }
:root[data-theme="dark"] .btn-action-secondary { background: #151f33; color: var(--color-text); border-color: var(--color-border-dk); }
:root[data-theme="dark"] .btn-action-secondary:hover { background: #1f2d4a; color: #fff; }
:root[data-theme="dark"] .empty-icon { background: #1b2b4d; color: #a9c2f7; }
:root[data-theme="dark"] .loc-btn, :root[data-theme="dark"] .loc-btn.danger { background: #151f33; color: var(--color-text); border-color: var(--color-border-dk); }
:root[data-theme="dark"] .list-item-title, :root[data-theme="dark"] .list-title-text { color: var(--color-text); }

/* ── Dashboard list view ── */
.data-table { font-size: 0.9rem; }
.data-table th { white-space: nowrap; padding: 1.1rem 1.6rem; font-size: 0.72rem; letter-spacing: 0.08em; }
.data-table td { padding: 1.4rem 1.6rem; }
.data-table td:nth-child(n+2) { white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { padding-left: 2rem; width: 100%; }
.data-table th:last-child, .data-table td:last-child { padding-right: 2rem; }
.list-item-title { gap: 1.1rem; }
.list-thumb-wrap { width: 68px; height: 68px; border-radius: 16px; box-shadow: var(--shadow-xs); }
.list-title-text { font-family: var(--font-head); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.list-filename { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.5; margin: 0.15rem 0 0.55rem; max-width: 52ch; white-space: normal; }
.category-chip {
    display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; padding: 0.38rem 0.9rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.data-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 8px;
    background: color-mix(in srgb, var(--color-blue) 9%, transparent); color: var(--color-text);
}
.data-table .btn-action-primary { white-space: nowrap; justify-content: center; padding: 0.62rem 1.25rem !important; font-size: 0.84rem !important; }
.asset-status { margin-top: 0.1rem; }

/* ── Dashboard grid view ── */
/* auto-fit collapses unused columns, so two scans share the whole row edge to edge; a lone card is capped instead of going full width */
.grid-container { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 2.5rem; }
.grid-container:has(> .data-card:only-child) { grid-template-columns: minmax(360px, 560px); }
.card-overlay-tag { display: none; }   /* repeated the category chip already shown top-left */
.card-actions { flex-direction: column; gap: 0.65rem; }
.card-actions .btn-launch { flex: none; width: 100%; margin-top: 0 !important; white-space: nowrap; padding: 0.85rem 1.25rem; }
.card-actions .btn-launch:not(:first-child) {   /* the primary action is the first button; the rest are quieter */
    background: transparent; color: var(--color-blue-lt); border: 1px solid var(--color-border-dk); box-shadow: none; filter: none;
}
.card-actions .btn-launch:not(:first-child):hover { background: color-mix(in srgb, var(--color-blue) 10%, transparent); border-color: var(--color-blue-lt); }
.card-meta .meta-row { gap: 1rem; }
.card-meta .meta-val { white-space: nowrap; }

/* ── Viewer-style pages (legacy viewer, 360 tour, owned viewer): the header spans the full screen like the stage below it ── */
body.viewer-mode header .nav-wrapper { max-width: none; padding-left: 1.75rem; padding-right: 1.75rem; }

/* legacy viewer and tour chrome that hardcodes light backgrounds */
:root[data-theme="dark"] .viewer-toolbar { background: #101a2d; }
:root[data-theme="dark"] .viewer-bar { background: #121d33; }
:root[data-theme="dark"] .chip { background: #17233b; color: var(--color-text); border-color: var(--color-border-dk); }
:root[data-theme="dark"] .chip:hover:not(:disabled) { background: #1d2c4a; border-color: var(--color-blue-lt); color: #fff; }
:root[data-theme="dark"] .chip.active, :root[data-theme="dark"] .chip.active:hover:not(:disabled) { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }
:root[data-theme="dark"] .you-are-in { background: #172a4d; border-color: #2d4a85; color: #a9c2f7; }
:root[data-theme="dark"] .btn-back:hover { background: #1d2c4a; color: #fff; }
:root[data-theme="dark"] .tool-btn { background: #17233b; color: var(--color-text); }
:root[data-theme="dark"] .tool-btn:hover:not(:disabled) { color: #fff; border-color: var(--color-blue-lt); }
:root[data-theme="dark"] .tool-btn[aria-pressed="true"] { background: var(--color-blue); color: #fff; }
:root[data-theme="dark"] .chips-note { color: var(--color-muted); }
:root[data-theme="dark"] #floors { background: #101a2d; }
:root[data-theme="dark"] #floors button, :root[data-theme="dark"] #overview-floors button { background: #17233b; color: var(--color-text); border-color: var(--color-border-dk); }
:root[data-theme="dark"] #floors button.on, :root[data-theme="dark"] #overview-floors button.on { background: var(--color-blue); color: #fff; }
:root[data-theme="dark"] #tag-card, :root[data-theme="dark"] #tag-form { background: #151f33; color: var(--color-text); border-color: var(--color-border-dk); }
:root[data-theme="dark"] .tbtn, :root[data-theme="dark"] .tbtn.danger { background: #17233b; color: var(--color-text); border-color: var(--color-border-dk); }
:root[data-theme="dark"] #plan { background: #0f182a; }
:root[data-theme="dark"] .link-chip, :root[data-theme="dark"] .pano-list button.sel { background: #172a4d; color: #a9c2f7; border-color: #2d4a85; }