/* ==========================================================================
   Prove ID Presentation — Light Theme System
   Ultra-premium corporate light mode aligned with Prove ID visual identity
   ========================================================================== */

/* Smooth theme transition */
html {
    transition: background-color 0.35s ease, color 0.35s ease;
}

body,
header,
footer,
.slide,
.ambient,
.glass-columns > div,
.glass-columns > ul,
.split .body > ul,
.steps button,
.metrics > div,
.scores > div,
.reasons > div,
.value-card,
.cert-ticker,
.cert-hero,
.value-hero,
.topology-map > div,
.platform-chip,
.px-phone,
.px-screen,
.px-float,
.scene-badge,
dialog {
    transition: background 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

/* --------------------------------------------------------------------------
   Header Theme Toggle Button
   -------------------------------------------------------------------------- */
#theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid var(--px-border-2);
    background: var(--px-surface);
    color: var(--px-text);
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: transform 0.25s var(--px-ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

#theme-toggle:hover {
    transform: translateY(-2px);
    background: rgba(122,102,255,0.16);
    border-color: var(--px-blue-2);
    color: var(--px-cyan);
    box-shadow: 0 4px 14px rgba(79,61,245,0.2);
}

#theme-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: transform 0.4s var(--px-ease), opacity 0.25s ease;
}

/* Icon visibility per theme */
html[data-theme="dark"] #theme-toggle .moon-icon {
    display: none;
}
html[data-theme="dark"] #theme-toggle .sun-icon {
    display: block;
    color: #ffc247;
}

html[data-theme="light"] #theme-toggle .sun-icon {
    display: none;
}
html[data-theme="light"] #theme-toggle .moon-icon {
    display: block;
    color: #352baa;
}

/* --------------------------------------------------------------------------
   Techsign Close Logo Switch (Dark/Light)
   -------------------------------------------------------------------------- */
.techsign-close.techsign-light {
    display: none;
}
html[data-theme="light"] .techsign-close.techsign-dark {
    display: none;
}
html[data-theme="light"] .techsign-close.techsign-light {
    display: block;
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */
html[data-theme="light"] {
    color-scheme: light;

    /* Base Palette */
    --px-bg: #f6f5fd;
    --px-bg-2: #ffffff;
    --px-bg-3: #ece9fc;
    --px-surface: rgba(255, 255, 255, 0.78);
    --px-surface-2: rgba(255, 255, 255, 0.94);
    --px-border: rgba(24,18,78,0.08);
    --px-border-2: rgba(24,18,78,0.14);
    --px-text: #0e0b2e;
    --px-muted: #4e5a7b;
    --px-dim: #7d8aa8;

    /* Brand Accents */
    --px-blue: #3b2cc9;
    --px-blue-2: #5141f0;
    --px-blue-3: #2b1f9e;
    --px-deep: #1e1670;
    --px-cyan: #0891a8;
    --px-green: #068755;
    --px-orange: #d97311;

    /* Gradients */
    --px-grad: linear-gradient(135deg, #5141f0 0%, #3b2cc9 55%, #2b1f9e 100%);
    --px-grad-text: linear-gradient(105deg, #0e0b2e 15%, #3b2cc9 65%, #0891a8 100%);

    /* Core / styles.css tokens */
    --bg: var(--px-bg);
    --ink: var(--px-text);
    --muted: var(--px-muted);
    --blue: var(--px-blue-3);
    --mint: var(--px-green);
    --line: var(--px-border);
}

/* Body & Canvas */
html[data-theme="light"] body {
    background: var(--px-bg);
    color: var(--px-text);
}

/* Ambient Backdrop */
html[data-theme="light"] .ambient {
    background: #f6f5fd;
}

html[data-theme="light"] .ambient > i {
    background: radial-gradient(ellipse, rgba(79,61,245,0.08), transparent 65%);
    filter: blur(80px);
}

html[data-theme="light"] .ambient > i:nth-child(2) {
    background: radial-gradient(ellipse, rgba(2, 128, 176, 0.06), transparent 65%);
}

html[data-theme="light"] .ambient-grid {
    background-image: linear-gradient(rgba(24,18,78,0.035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(24,18,78,0.035) 1px, transparent 1px);
    mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
}

/* Header */
html[data-theme="light"] header {
    border-bottom-color: var(--px-border);
}

html[data-theme="light"] .brand .px-logo-svg {
    color: #0e0b2e;
}

/* Header Label Badge */
html[data-theme="light"] .header-label {
    color: #2b1f9e;
    background: rgba(59,44,201,0.07);
    border: 1px solid rgba(59,44,201,0.16);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: 0 2px 6px rgba(59,44,201,0.04);
}

html[data-theme="light"] #motion,
html[data-theme="light"] #overview {
    background: #ffffff;
    border-color: var(--px-border-2);
    color: var(--px-text);
    box-shadow: 0 2px 8px rgba(24,18,78,0.04);
}

html[data-theme="light"] #motion:hover,
html[data-theme="light"] #overview:hover {
    background: rgba(79,61,245,0.08);
    border-color: var(--px-blue-2);
    color: var(--px-blue);
}

/* Category Eyebrows (All Slides) */
html[data-theme="light"] .px-eyebrow {
    background: rgba(59,44,201,0.08);
    border: 1px solid rgba(59,44,201,0.2);
    color: #2b1f9e;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(59,44,201,0.04);
}

html[data-theme="light"] .px-eyebrow-dot {
    background: rgba(6, 135, 85, 0.16);
}

html[data-theme="light"] .px-eyebrow-dot::before {
    background: #068755;
    box-shadow: 0 0 8px rgba(6, 135, 85, 0.6);
}

/* Trust Badges (Slide 1 Hero) */
html[data-theme="light"] .trust-badges {
    color: #1a2542;
    gap: 10px;
}

html[data-theme="light"] .trust-badges span {
    background: #ffffff;
    border: 1px solid rgba(24,18,78,0.12);
    border-radius: 999px;
    padding: 6px 14px;
    color: #0e0b2e;
    font-weight: 600;
    font-size: 11.5px;
    box-shadow: 0 2px 8px rgba(24,18,78,0.04);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

html[data-theme="light"] .trust-badges span::first-letter {
    color: #068755;
    font-weight: 800;
}

/* Typography */
html[data-theme="light"] h1 {
    color: #0e0b2e;
}

html[data-theme="light"] h3 {
    color: #0e0b2e;
}

html[data-theme="light"] .lead {
    color: var(--px-muted);
}

html[data-theme="light"] .intro {
    color: var(--px-muted);
}

html[data-theme="light"] .note {
    color: var(--px-muted);
}

html[data-theme="light"] .note:before {
    color: var(--px-blue);
}

/* Buttons */
html[data-theme="light"] .px-btn--ghost {
    color: var(--px-text) !important;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px var(--px-border-2) inset, 0 4px 14px rgba(24,18,78,0.04);
}

html[data-theme="light"] .px-btn--ghost:hover {
    background: #ffffff;
    color: var(--px-blue) !important;
    box-shadow: 0 0 0 1px var(--px-blue-2) inset, 0 6px 18px rgba(59,44,201,0.14);
}

/* Glass Panels & Columns */
html[data-theme="light"] .glass-columns > div,
html[data-theme="light"] .glass-columns > ul,
html[data-theme="light"] .split .body > ul {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--px-border);
    border-radius: 20px;
    box-shadow: 0 10px 30px -10px rgba(24,18,78,0.05), inset 0 1px 0 #ffffff;
}

html[data-theme="light"] .body li {
    color: #1a2542;
}

html[data-theme="light"] .li-icon {
    background: #ffffff;
    border: 1px solid rgba(79,61,245,0.18);
    color: var(--px-blue);
    box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(24,18,78,0.05);
}

html[data-theme="light"] .has-icon:nth-child(3n+2) .li-icon {
    color: var(--px-green);
    border-color: rgba(6, 135, 85, 0.22);
}

html[data-theme="light"] .has-icon:nth-child(3n) .li-icon {
    color: #6a35d9;
    border-color: rgba(106, 53, 217, 0.22);
}

/* Steps (Flow - Slide 3) */
html[data-theme="light"] .flow-thread {
    background: linear-gradient(90deg, transparent, rgba(79,61,245,0.4), transparent);
}

html[data-theme="light"] .flow-thread > span {
    background: var(--px-blue);
    box-shadow: 0 0 14px var(--px-blue);
}

html[data-theme="light"] .steps button {
    background: #ffffff;
    border: 1px solid var(--px-border) !important;
    border-radius: 20px;
    color: #0e0b2e;
    box-shadow: 0 6px 20px -8px rgba(24,18,78,0.06);
}

html[data-theme="light"] .steps button b {
    color: #2b1f9e;
    background: rgba(59,44,201,0.08);
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 14px;
}

html[data-theme="light"] .steps button:hover,
html[data-theme="light"] .steps button.flow-active {
    border-color: var(--px-blue) !important;
    box-shadow: 0 15px 35px -10px rgba(59,44,201,0.22);
    transform: translateY(-8px);
}

html[data-theme="light"] .statline {
    border-top-color: var(--px-border);
    color: var(--px-muted);
}

html[data-theme="light"] .statline b {
    color: #0e0b2e;
}

/* Durations */
html[data-theme="light"] .durations > b {
    color: var(--px-blue);
}

html[data-theme="light"] .durations span {
    color: var(--px-muted);
}

/* ==========================================================================
   SLIDE 1: PHONE MOCKUP & INNER LIGHT THEME
   ========================================================================== */

/* Phone Mockup Case */
html[data-theme="light"] .px-phone {
    background: linear-gradient(145deg, #ffffff, #e2eaf8 42%, #f0f4fc);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.95) inset,
        0 0 0 2px #cdd8ee,
        0 40px 90px -20px rgba(24,18,78,0.18),
        0 0 70px -10px rgba(79,61,245,0.2);
}

html[data-theme="light"] .px-phone::before {
    background: #0e0b2e;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Phone Screen Canvas */
html[data-theme="light"] .px-screen {
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 42%, #edf3fc 100%);
    box-shadow: inset 0 0 24px rgba(79,61,245,0.05);
}

html[data-theme="light"] .px-screen-step {
    color: #2b1f9e;
    background: rgba(59,44,201,0.08);
    border: 1px solid rgba(59,44,201,0.18);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

html[data-theme="light"] .px-screen-title {
    color: #0e0b2e !important;
}

html[data-theme="light"] .px-screen-sub {
    color: #4e5a7b !important;
}

/* Face Scan in Phone Screen */
html[data-theme="light"] .px-face-ticks {
    background: repeating-conic-gradient(rgba(59,44,201,0.28) 0 1.2deg, transparent 1.2deg 7.5deg);
}

html[data-theme="light"] .px-face-inner {
    background: radial-gradient(circle at 50% 35%, #edf3fe 0%, #d8e5fc 75%);
    border: 1px solid rgba(59,44,201,0.2);
    box-shadow: inset 0 2px 14px rgba(59,44,201,0.12);
}

html[data-theme="light"] .px-face-inner svg ellipse,
html[data-theme="light"] .px-face-inner svg path:first-of-type {
    fill: #b4ccf7 !important;
}

html[data-theme="light"] .px-face-inner svg g[stroke] path {
    stroke: #3b2cc9 !important;
    stroke-opacity: 0.85 !important;
}

html[data-theme="light"] .px-face-inner svg g[fill] circle {
    fill: #3b2cc9 !important;
}

html[data-theme="light"] .px-face-scan {
    background: linear-gradient(180deg, transparent, rgba(59,44,201,0.25) 80%, rgba(59,44,201,0.8) 100%);
}

/* Checklist Items inside Phone */
html[data-theme="light"] .px-checks li {
    background: #ffffff;
    border: 1px solid rgba(24,18,78,0.1);
    color: #0e0b2e;
    box-shadow: 0 4px 12px -2px rgba(24,18,78,0.06);
}

html[data-theme="light"] .px-checks li span {
    color: #068755;
    font-weight: 700;
}

html[data-theme="light"] .px-check-ico {
    background: rgba(6, 135, 85, 0.14);
    color: #068755;
}

html[data-theme="light"] .px-checks li.is-active {
    background: rgba(59,44,201,0.08);
    border-color: rgba(59,44,201,0.3);
    color: #0e0b2e;
}

html[data-theme="light"] .px-checks li.is-pending {
    background: #ffffff;
}

html[data-theme="light"] .px-checks li.is-pending .px-check-ico {
    background: transparent;
    border: 2px solid rgba(59,44,201,0.2);
    border-top-color: var(--px-blue);
}

html[data-theme="light"] .px-checks li.is-pending span {
    color: var(--px-blue);
}

/* Orbits */
html[data-theme="light"] .px-orbit {
    border-color: rgba(59,44,201,0.14);
}

html[data-theme="light"] .px-orbit--2 {
    border-color: rgba(59,44,201,0.07);
}

/* Floating Cards (Slide 1) */
html[data-theme="light"] .px-float {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(24,18,78,0.12);
    color: #0e0b2e;
    box-shadow: 0 20px 45px -12px rgba(24,18,78,0.14), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(16px);
}

html[data-theme="light"] .px-float-label {
    color: #2b1f9e;
    background: rgba(59,44,201,0.08);
    border: 1px solid rgba(59,44,201,0.18);
    border-radius: 999px;
    padding: 2px 9px;
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
}

html[data-theme="light"] .px-float-row {
    color: #172449;
    font-weight: 600;
}

html[data-theme="light"] .px-match-txt strong {
    color: #0e0b2e;
}

html[data-theme="light"] .px-match-txt small,
html[data-theme="light"] .px-float--ok small {
    color: var(--px-muted);
}

html[data-theme="light"] .px-match-ring {
    background: conic-gradient(var(--px-green) calc(var(--p, 0)*1%), rgba(6, 135, 85, 0.15) 0);
}

html[data-theme="light"] .px-match-ring b {
    background: #ffffff;
    color: #068755;
    box-shadow: 0 2px 8px rgba(24,18,78,0.08);
}

html[data-theme="light"] .px-ok-ico {
    background: rgba(6, 135, 85, 0.14);
    color: #068755;
}

html[data-theme="light"] .px-float--ok strong {
    color: #0e0b2e;
}

html[data-theme="light"] .px-float--nfc {
    color: #0e0b2e;
    font-weight: 700;
}

html[data-theme="light"] .px-nfc-waves i {
    border-color: rgba(59,44,201,0.35);
}

html[data-theme="light"] .px-idcard {
    background: #edf3fc;
    border-color: rgba(59,44,201,0.22);
}

html[data-theme="light"] .px-idcard-lines i {
    background: rgba(24,18,78,0.2);
}

html[data-theme="light"] .px-idcard-photo {
    background: linear-gradient(145deg, #d3e1fa, #b8cefc);
    border: 1px solid rgba(59,44,201,0.2);
}

html[data-theme="light"] .px-idcard-chip {
    background: linear-gradient(135deg, #ffd778, #d49a15);
}

/* ==========================================================================
   DEVICE MOCKUP SCENES & SCENE BADGES (Slides 4-9)
   ========================================================================== */
html[data-theme="light"] .device-scene > img {
    filter: drop-shadow(0 25px 35px rgba(24,18,78,0.18));
}

html[data-theme="light"] .device-scene:before {
    background: radial-gradient(ellipse, rgba(79,61,245,0.14), transparent 68%);
}

html[data-theme="light"] .device-orbit {
    border-color: rgba(59,44,201,0.16);
}

/* Scene Badges */
html[data-theme="light"] .scene-badge {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(59,44,201,0.24);
    color: #0e0b2e;
    font-weight: 650;
    box-shadow: 0 12px 30px rgba(24,18,78,0.1), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(14px);
}

html[data-theme="light"] .scene-badge .px-eyebrow-dot {
    background: rgba(6, 135, 85, 0.16);
}

/* Metrics & Data */
html[data-theme="light"] .metrics > div {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 8px 24px -8px rgba(24,18,78,0.06);
}

html[data-theme="light"] .metrics span {
    color: var(--px-muted);
}

html[data-theme="light"] table {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 8px 24px -8px rgba(24,18,78,0.06);
}

html[data-theme="light"] th,
html[data-theme="light"] td {
    border-bottom-color: var(--px-border);
}

html[data-theme="light"] thead th {
    color: var(--px-muted);
    background: #f7f9fd;
}

html[data-theme="light"] tbody th {
    color: #0e0b2e;
}

html[data-theme="light"] td {
    color: #1a2542;
}

/* Scores */
html[data-theme="light"] .scores > div {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 4px 16px -6px rgba(24,18,78,0.05);
}

html[data-theme="light"] .scores > div:hover {
    border-color: var(--px-blue-2);
    background: #f7f9fd;
}

html[data-theme="light"] .scores span {
    color: var(--px-muted);
}

html[data-theme="light"] .scores b {
    color: var(--px-blue);
}

html[data-theme="light"] .micro {
    color: var(--px-muted);
}

/* Reasons (3-col) */
html[data-theme="light"] .reasons > div {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 6px 18px -6px rgba(24,18,78,0.05);
}

html[data-theme="light"] .reasons h3 {
    color: var(--px-blue-3);
}

html[data-theme="light"] .reasons p {
    color: var(--px-muted);
}

/* ==========================================================================
   TOPOLOGY SLIDE & BADGES (Slide 11)
   ========================================================================== */
html[data-theme="light"] .topology-map > div {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 8px 25px -8px rgba(24,18,78,0.06);
}

html[data-theme="light"] .topology-label {
    color: #2b1f9e;
    font-weight: 800;
    letter-spacing: 0.12em;
    background: rgba(59,44,201,0.07);
    border: 1px solid rgba(59,44,201,0.16);
    border-radius: 8px;
    padding: 5px 12px;
    display: inline-block;
    width: fit-content;
}

html[data-theme="light"] .platform-chip {
    background: #f8f7fe;
    border-color: var(--px-border);
}

html[data-theme="light"] .platform-chip b {
    background: #ffffff;
    color: #0b102e;
    box-shadow: 0 2px 8px rgba(24,18,78,0.08);
}

html[data-theme="light"] .platform-chip span {
    color: #0e0b2e;
}

html[data-theme="light"] .topology-core {
    background: radial-gradient(circle at 50% 50%, rgba(79,61,245,0.08), transparent 70%), #ffffff;
}

html[data-theme="light"] .topology-core img {
    box-shadow: 0 8px 25px -6px rgba(24,18,78,0.12);
    border: 1px solid var(--px-border);
}

html[data-theme="light"] .topology-core strong {
    color: #0e0b2e;
}

html[data-theme="light"] .core-pulse {
    border-color: rgba(59,44,201,0.25);
}

html[data-theme="light"] .topology-services span:not(.topology-label) {
    background: #ffffff;
    border: 1px solid rgba(59,44,201,0.18);
    color: #0e0b2e;
    font-weight: 650;
    box-shadow: 0 2px 8px rgba(24,18,78,0.04);
}

html[data-theme="light"] .topology-infra b {
    background: #ffffff;
    border: 1px solid rgba(24,18,78,0.12);
    color: #0e0b2e;
    font-weight: 650;
    box-shadow: 0 2px 6px rgba(24,18,78,0.04);
}

/* ==========================================================================
   CERTIFICATES & STATUS BADGES (Slide 16)
   ========================================================================== */
html[data-theme="light"] .cert-hero {
    background: radial-gradient(circle at 82% 45%, rgba(79,61,245,0.12), transparent 45%), linear-gradient(135deg, #ffffff, #edf3fd);
    border-color: rgba(79,61,245,0.22);
    box-shadow: 0 15px 45px -15px rgba(59,44,201,0.12);
}

html[data-theme="light"] .cert-hero:after {
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 45%, transparent 60%);
}

html[data-theme="light"] .cert-kicker {
    color: #2b1f9e;
    background: rgba(59,44,201,0.08);
    border: 1px solid rgba(59,44,201,0.2);
    border-radius: 999px;
    padding: 5px 13px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

html[data-theme="light"] .cert-kicker i {
    background: #068755;
    box-shadow: 0 0 8px #068755;
}

html[data-theme="light"] .cert-hero strong {
    color: #0e0b2e;
}

html[data-theme="light"] .cert-radar {
    border-color: rgba(79,61,245,0.25);
}

html[data-theme="light"] .cert-radar i {
    border-color: rgba(79,61,245,0.18);
}

html[data-theme="light"] .cert-ticker {
    background: #ffffff;
    border-color: var(--px-border);
    box-shadow: 0 6px 20px -8px rgba(24,18,78,0.06);
}

html[data-theme="light"] .cert-label {
    border-right-color: var(--px-border);
    color: #0e0b2e;
    font-weight: 750;
}

html[data-theme="light"] .cert-label i {
    background: var(--px-blue);
    box-shadow: 0 0 8px var(--px-blue);
}

/* Status Badges in Cert Ticker */
html[data-theme="light"] .cert-status.active {
    color: #057a4c;
    border: 1px solid rgba(6, 135, 85, 0.35);
    background: rgba(6, 135, 85, 0.1);
    font-weight: 750;
}

html[data-theme="light"] .cert-status.pending {
    color: #b35900;
    border: 1px solid rgba(217, 115, 17, 0.35);
    background: rgba(217, 115, 17, 0.1);
    font-weight: 750;
}

html[data-theme="light"] .cert-item {
    background: #f5f8fd;
    border: 1px solid rgba(24,18,78,0.1);
    color: #0e0b2e;
}

html[data-theme="light"] .cert-item b {
    color: #0e0b2e;
    font-weight: 700;
}

/* ==========================================================================
   VALUE MAP & NUMBERED BADGES (Slide 18)
   ========================================================================== */
html[data-theme="light"] .value-hero {
    background: radial-gradient(circle at 50% 45%, rgba(79,61,245,0.14), transparent 48%), linear-gradient(145deg, #ffffff, #edf3fd);
    border-color: rgba(79,61,245,0.25);
    box-shadow: 0 15px 45px -15px rgba(59,44,201,0.12);
}

html[data-theme="light"] .value-hero img {
    box-shadow: 0 12px 30px rgba(24,18,78,0.1);
    border: 1px solid var(--px-border);
}

html[data-theme="light"] .value-hero b {
    color: #0e0b2e;
}

html[data-theme="light"] .value-orbit {
    border-color: rgba(79,61,245,0.2);
}

html[data-theme="light"] .value-card {
    background: #ffffff;
    border-color: var(--px-border);
    box-shadow: 0 6px 20px -8px rgba(24,18,78,0.05);
}

html[data-theme="light"] .value-card:hover {
    border-color: var(--px-blue-2);
    background: #f8faff;
}

/* Number badge */
html[data-theme="light"] .value-card > span {
    background: rgba(59,44,201,0.08);
    border: 1px solid rgba(59,44,201,0.22);
    color: var(--px-blue);
    font-weight: 800;
}

html[data-theme="light"] .value-card h3 {
    color: #0e0b2e;
}

html[data-theme="light"] .value-card p {
    color: var(--px-muted);
}

html[data-theme="light"] .value-card.primary {
    border-color: rgba(6, 135, 85, 0.28);
}

html[data-theme="light"] .value-card.primary > span {
    color: #068755;
    background: rgba(6, 135, 85, 0.12);
    border-color: rgba(6, 135, 85, 0.32);
}

/* ==========================================================================
   AI CORE & AVATAR (Slide 14)
   ========================================================================== */
html[data-theme="light"] .ai-halo {
    border-color: rgba(79,61,245,0.2);
    box-shadow: inset 0 0 55px rgba(79,61,245,0.06), 0 0 65px rgba(79,61,245,0.05);
}

html[data-theme="light"] .ai-glass {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(79,61,245,0.25);
    box-shadow: 0 35px 80px -15px rgba(24,18,78,0.18), inset 0 1px 0 #ffffff;
}

html[data-theme="light"] .ai-glass img {
    background: #f8f7fe;
    border: 1px solid var(--px-border);
}

html[data-theme="light"] .ai-glass > span {
    background: rgba(59,44,201,0.08);
    border: 1px solid rgba(59,44,201,0.18);
    color: #2b1f9e;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 650;
    box-shadow: 0 2px 6px rgba(59,44,201,0.04);
}

/* ==========================================================================
   REFERENCES, CHIPS & "YENİ" BADGES (Slides 19-22)
   ========================================================================== */
html[data-theme="light"] .product-brand {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 10px 30px -10px rgba(24,18,78,0.07);
}

html[data-theme="light"] .product-brand:hover {
    transform: translateY(-7px);
    box-shadow: 0 16px 35px -10px rgba(59,44,201,0.18);
}

/* Category Tab Chips & Counter Badges */
html[data-theme="light"] .sector-tabs .px-refs-chip {
    background: #ffffff;
    border: 1px solid var(--px-border-2);
    color: var(--px-muted);
    box-shadow: 0 2px 8px rgba(24,18,78,0.04);
}

html[data-theme="light"] .sector-tabs .px-refs-chip em {
    background: rgba(24,18,78,0.08);
    color: #2b1f9e;
    font-weight: 750;
}

html[data-theme="light"] .sector-tabs .px-refs-chip.is-active {
    background: var(--px-grad);
    border-color: var(--px-blue);
    color: #ffffff;
    box-shadow: 0 6px 20px -6px rgba(59,44,201,0.4);
}

html[data-theme="light"] .sector-tabs .px-refs-chip.is-active em {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

html[data-theme="light"] .sector-panel .px-ref {
    background: #ffffff;
    border: 1px solid var(--px-border);
    box-shadow: 0 6px 18px -6px rgba(24,18,78,0.06);
}

html[data-theme="light"] .sector-panel .px-ref-name {
    color: #0e0b2e;
}

html[data-theme="light"] .sector-panel .px-ref:focus-visible {
    outline-color: var(--px-blue);
}

/* "Yeni" Badges */
html[data-theme="light"] .sector-panel .px-ref-new {
    background: var(--px-grad);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59,44,201,0.45);
    font-weight: 800;
}

/* Closing Slide */
html[data-theme="light"] .closing:after {
    opacity: 0.04;
}

html[data-theme="light"] .closing .contact a {
    color: #0e0b2e;
}

html[data-theme="light"] .closing .contact a:hover {
    color: var(--px-blue);
}

html[data-theme="light"] .closing .links a {
    color: var(--px-blue);
}

/* Footer & Controls */
html[data-theme="light"] footer {
    border-top-color: var(--px-border);
}

html[data-theme="light"] footer nav > button,
html[data-theme="light"] #source {
    background: #ffffff;
    border-color: var(--px-border-2);
    color: var(--px-text);
    box-shadow: 0 2px 8px rgba(24,18,78,0.04);
}

html[data-theme="light"] footer nav > button:hover:not(:disabled),
html[data-theme="light"] #source:hover {
    background: rgba(79,61,245,0.08);
    border-color: var(--px-blue-2);
    color: var(--px-blue);
}

html[data-theme="light"] #next:not(:disabled) {
    background: var(--px-grad);
    border-color: var(--px-blue);
    color: #ffffff;
    box-shadow: 0 8px 25px -8px rgba(59,44,201,0.6);
}

html[data-theme="light"] #counter,
html[data-theme="light"] #chapter {
    color: var(--px-muted);
}

html[data-theme="light"] .progress {
    background: rgba(24,18,78,0.06);
}

/* Dialogs */
html[data-theme="light"] dialog {
    background: #ffffff;
    border-color: var(--px-border-2);
    color: #0e0b2e;
    box-shadow: 0 35px 90px rgba(24,18,78,0.18);
}

html[data-theme="light"] dialog::backdrop {
    background: rgba(10, 18, 45, 0.45);
    backdrop-filter: blur(12px);
}

html[data-theme="light"] #index-grid button {
    background: #f8f7fe;
    border: 1px solid var(--px-border);
    color: #0e0b2e;
}

html[data-theme="light"] #index-grid button:hover {
    background: rgba(79,61,245,0.08);
    border-color: var(--px-blue-2);
}

html[data-theme="light"] #index-grid button[aria-current="true"] {
    background: var(--px-grad);
    color: #ffffff;
    border-color: var(--px-blue);
    box-shadow: 0 6px 18px -4px rgba(59,44,201,0.4);
}

/* Mobile responsive adjustments */
@media (max-width: 760px) {
    #theme-toggle {
        margin-left: auto;
        margin-right: 6px;
        width: 34px;
        height: 34px;
    }
    #motion {
        margin-left: 0 !important;
        margin-right: 6px;
    }
}

/* ==========================================================================
   ENHANCED TOPOLOGY ARCHITECTURE LIGHT MODE SUPPORT
   ========================================================================== */
html[data-theme="light"] .top-block {
    background: #ffffff;
    border-color: rgba(59,44,201,0.16);
    box-shadow: 0 10px 28px -6px rgba(24,18,78,0.08);
}

html[data-theme="light"] .top-block:hover {
    border-color: rgba(59,44,201,0.38);
    box-shadow: 0 14px 34px -6px rgba(24,18,78,0.12);
}

html[data-theme="light"] .top-head {
    border-bottom-color: rgba(59,44,201,0.09);
}

html[data-theme="light"] .top-tag {
    color: #2b1f9e;
}

html[data-theme="light"] .top-head strong {
    color: #0e0b2e;
}

html[data-theme="light"] .top-device {
    background: #f7f6fe;
    border-color: rgba(59,44,201,0.12);
}

html[data-theme="light"] .top-device span {
    color: #0e0b2e;
}

html[data-theme="light"] .top-device:hover {
    background: #f0eeff;
    border-color: #3b2cc9;
}

html[data-theme="light"] .top-client-list {
    border-top-color: rgba(59,44,201,0.1);
}

html[data-theme="light"] .top-client-list li {
    color: #434c6d;
}

html[data-theme="light"] .conn-proto {
    background: #efecff;
    border-color: rgba(59,44,201,0.28);
    color: #2b1f9e;
}

html[data-theme="light"] .conn-line {
    background: linear-gradient(90deg, rgba(59,44,201,0.2), rgba(59,44,201,0.7), rgba(59,44,201,0.2));
}

html[data-theme="light"] .conn-line .pkt {
    background: #3b2cc9;
    box-shadow: 0 0 10px #3b2cc9;
}

html[data-theme="light"] .top-node-hub {
    background: linear-gradient(135deg, #f0f4ff, #e1eaff);
    border-color: rgba(59,44,201,0.35);
    box-shadow: 0 6px 18px rgba(59,44,201,0.12);
}

html[data-theme="light"] .top-node-hub svg {
    stroke: #3b2cc9;
}

html[data-theme="light"] .top-node-hub small {
    color: #384674;
}

html[data-theme="light"] .hub-ring {
    border-color: rgba(59,44,201,0.3);
}

html[data-theme="light"] .server-node {
    background: #f7f6fe;
    border-color: rgba(59,44,201,0.12);
}

html[data-theme="light"] .server-node span {
    color: #0e0b2e;
}

html[data-theme="light"] .server-node:hover {
    background: #f0eeff;
    border-color: rgba(59,44,201,0.3);
}

html[data-theme="light"] .server-icon {
    background: #e4eaf9;
    border-color: rgba(59,44,201,0.2);
}

html[data-theme="light"] .server-icon i {
    background: rgba(59,44,201,0.3);
}

html[data-theme="light"] .server-dots span {
    background: #8b96ba;
}

html[data-theme="light"] .top-core-server {
    background: radial-gradient(circle at 50% 25%, rgba(79,61,245,0.08), transparent 70%), #ffffff;
    border-color: rgba(59,44,201,0.3);
    box-shadow: 0 12px 35px -8px rgba(59,44,201,0.16);
}

html[data-theme="light"] .server-id {
    background: #f0eeff;
    color: #2b1f9e;
}

html[data-theme="light"] .tech-badge {
    background: rgba(224, 122, 22, 0.1);
    border-color: rgba(224, 122, 22, 0.3);
    color: #b55d0a;
}

html[data-theme="light"] .core-port-badge {
    background: #efecff;
    border-color: rgba(59,44,201,0.25);
    color: #2b1f9e;
}

html[data-theme="light"] .core-attachments {
    border-top-color: rgba(59,44,201,0.1);
}

html[data-theme="light"] .core-attach-item {
    background: #f7f6fe;
    border-color: rgba(59,44,201,0.12);
}

html[data-theme="light"] .attach-info b {
    color: #0e0b2e;
}

html[data-theme="light"] .attach-info small {
    color: #55628a;
}

html[data-theme="light"] .ai-count {
    background: #efecff;
    border-color: rgba(59,44,201,0.25);
    color: #2b1f9e;
}

html[data-theme="light"] .top-infra-strip {
    background: #ffffff;
    border-color: rgba(59,44,201,0.16);
    box-shadow: 0 6px 20px -6px rgba(24,18,78,0.06);
}

html[data-theme="light"] .infra-label {
    color: #0e0b2e;
}

html[data-theme="light"] .infra-label svg {
    stroke: #3b2cc9;
}

html[data-theme="light"] .infra-pill {
    background: #f7f6fe;
    border-color: rgba(59,44,201,0.14);
    color: #0e0b2e;
}

html[data-theme="light"] .infra-pill:hover {
    background: #f0eeff;
    border-color: #3b2cc9;
}