/* Theme 3. Loaded only with data-theme=theme3. Light stays close to Theme 2. Dark is the glossy signature. */

html[data-theme="theme3"] {
    --motion-fast: 140ms;
    --motion-normal: 220ms;
    --motion-base: 220ms;
    --motion-emphasis: 420ms;
    --motion-slow: 420ms;
    --ease-quick: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-transform: cubic-bezier(0.77, 0, 0.175, 1);
    --t3-accent: #1f8f86;
    --t3-accent-glow: rgba(31, 143, 134, 0.22);
}

html[data-theme="theme3"][data-glow="low"] { --t3-accent-glow: rgba(126, 221, 214, 0.14); }
html[data-theme="theme3"][data-glow="high"] { --t3-accent-glow: rgba(126, 221, 214, 0.42); }
html[data-theme="theme3"][data-blur="low"] { --t3-blur: 8px; }
html[data-theme="theme3"][data-blur="high"] { --t3-blur: 22px; }
html[data-theme="theme3"] { --t3-blur: 16px; }

/* —— Dark signature —— */
html[data-theme="theme3"][data-color-scheme="dark"] {
    --t3-bg: #090c11;
    --t3-bg-soft: #12171f;
    --t3-bg-elevated: #1b222d;
    --t3-bg-panel: #242d3a;
    --t3-text: #e8eef6;
    --t3-text-secondary: #c5d0dc;
    --t3-text-muted: #9aabbc;
    --t3-accent: #7eddd6;
    --t3-accent-hover: #b7f3ee;
    --t3-accent-soft: rgba(126, 221, 214, 0.14);
    --t3-border: rgba(232, 238, 246, 0.12);
    --t3-border-strong: rgba(232, 238, 246, 0.22);
    --t3-sheen: rgba(255, 255, 255, 0.14);
    --t3-success: #5dcea0;
    --t3-warning: #e0a45a;
    --t3-danger: #ff8d8d;
    --ink: #e8eef6;
    --text: #e8eef6;
    --muted: #9aabbc;
    --surface: #090c11;
    --surface-elevated: #1b222d;
    --line: rgba(232, 238, 246, 0.12);
    --primary: #1f8f86;
    --primary-deep: #146e67;
    --secondary: #143f3c;
    --accent: #7eddd6;
    --t2-btn: #0d7a72;
    --t2-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 {
    color: var(--t3-text);
    background:
        radial-gradient(900px 420px at 8% -8%, rgba(126, 221, 214, 0.14), transparent 55%),
        radial-gradient(700px 380px at 100% 0%, rgba(70, 90, 120, 0.22), transparent 50%),
        linear-gradient(180deg, #121820 0%, #090c11 42%, #0b0f15 100%);
}

html[data-theme="theme3"][data-color-scheme="light"] body.t3 {
    background:
        radial-gradient(800px 280px at 0% 0%, rgba(13, 122, 114, 0.07), transparent 55%),
        var(--surface);
}

/* Gloss used by cards, search, auth, rail, drawer */
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-task,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-tool-card,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-step,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-command,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, #242d3a, #1a212c);
    border: 1px solid var(--t3-border);
    box-shadow:
        inset 0 1px 0 var(--t3-sheen),
        0 16px 36px rgba(0, 0, 0, 0.32);
    color: var(--t3-text);
}

html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-task,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-tool-card,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-command {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 28px rgba(18, 20, 28, 0.06);
}

html[data-theme="theme3"] body.t3 .t2-header {
    background: color-mix(in srgb, var(--surface-elevated) 86%, transparent);
    backdrop-filter: blur(var(--t3-blur));
    border-bottom: 0;
    box-shadow: none;
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
        rgba(12, 16, 22, 0.72);
    border-bottom: 0;
    box-shadow: none;
}

html[data-theme="theme3"] body.t3 .t2-nav a {
    position: relative;
    transition: color var(--motion-fast) var(--ease-quick), background var(--motion-fast) var(--ease-quick);
}

html[data-theme="theme3"] body.t3 .t2-nav a.is-on::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

html[data-theme="theme3"] body.t3 .t2-icon-btn,
html[data-theme="theme3"] body.t3 .t2-lang,
html[data-theme="theme3"] body.t3 .t2-account {
    transition: background var(--motion-fast) var(--ease-quick), border-color var(--motion-fast) var(--ease-quick), transform var(--motion-fast) var(--ease-quick);
}

html[data-theme="theme3"][data-motion="full"] body.t3 .t2-icon-btn:hover,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-account:hover {
    transform: translateY(-1px);
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-stage {
    background:
        radial-gradient(70% 55% at 85% 0%, rgba(126, 221, 214, 0.14), transparent 58%),
        linear-gradient(180deg, #1b222d 0%, #12171f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 30px 70px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-sheet {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 18%),
        linear-gradient(180deg, #f7f4ee, #e7e2d6);
    color: #1a1d27;
    box-shadow:
        inset 0 1px 0 #fff,
        0 22px 40px rgba(0, 0, 0, 0.38);
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-sheet-line { background: #d9d3c6; }

html[data-theme="theme3"] body.t3 .t2-command:focus-within,
html[data-theme="theme3"] body.t3 .form-control:focus,
html[data-theme="theme3"] body.t3 .form-select:focus,
html[data-theme="theme3"] body.t3 textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--t3-accent-glow);
    outline: none;
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-command input,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .form-control,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .form-select,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 textarea {
    background: #12171f;
    color: var(--t3-text);
    border-color: var(--t3-border-strong);
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-suggest,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .dropdown-menu,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .modal-content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
        #1b222d;
    color: var(--t3-text);
    border-color: var(--t3-border);
}

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
        #0c1016;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="theme3"][data-motion="full"] body.t3 .t2-task,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-tool-card,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-btn {
    transition: transform var(--motion-fast) var(--ease-quick), box-shadow var(--motion-base) var(--ease-quick), border-color var(--motion-fast) var(--ease-quick);
}

html[data-theme="theme3"][data-motion="full"] body.t3 .t2-task:hover,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-tool-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 16px 32px var(--t3-accent-glow);
}

html[data-theme="theme3"][data-motion="full"] body.t3 .t2-tool-card:hover .t2-tool-ico {
    transform: translateY(-1px);
}

html[data-theme="theme3"] body.t3 .t2-tool-ico { transition: transform var(--motion-fast) var(--ease-quick); }

html[data-theme="theme3"][data-motion="full"] body.t3 .t2-btn:active { transform: translateY(1px); }

html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .alert-success { background: rgba(93, 206, 160, 0.14); color: var(--t3-success); }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .invalid-feedback,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .is-invalid { color: var(--t3-danger); }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--t3-text);
    --bs-table-border-color: var(--t3-border);
    color: var(--t3-text);
}

html[data-theme="theme3"] body.t3 a:focus-visible,
html[data-theme="theme3"] body.t3 button:focus-visible,
html[data-theme="theme3"] body.t3 input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* NAV SHELL — one object, collapsed rail or expanded drawer. */
html[data-theme="theme3"] .t3-nav {
    --t3-rail: 4.75rem;
    --t3-drawer: 23.5rem;
    position: fixed;
    z-index: 60;
    top: 0;
    bottom: 0;
    width: var(--t3-rail);
    color: inherit;
    transition: width var(--motion-emphasis) var(--ease-transform);
}
html[data-theme="theme3"][dir="ltr"] .t3-nav { left: 0; right: auto; }
html[data-theme="theme3"][dir="rtl"] .t3-nav { right: 0; left: auto; }
html[data-theme="theme3"] .t3-nav.is-open { width: var(--t3-drawer); z-index: 80; }

html[data-theme="theme3"] .t3-nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-quick);
}
html[data-theme="theme3"] .t3-nav.is-open .t3-nav__overlay { opacity: 1; pointer-events: auto; }

html[data-theme="theme3"] .t3-nav__panel {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 18%),
        var(--surface-elevated, #fff);
    border-inline-end: 0;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.45);
}
html[data-theme="theme3"][dir="rtl"] .t3-nav__panel { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.45); }

html[data-theme="theme3"][data-color-scheme="dark"] .t3-nav__panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 16%),
        #10151c;
    border-inline-end-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #e8eef6;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-nav.is-open .t3-nav__overlay {
    background: rgba(5, 7, 10, 0.46);
    backdrop-filter: blur(8px);
}

html[data-theme="theme3"] .t3-nav__toggle,
html[data-theme="theme3"] .t3-nav__section,
html[data-theme="theme3"] .t3-nav__account,
html[data-theme="theme3"] .t3-nav__items a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.35rem 0.85rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
html[data-theme="theme3"] .t3-nav__toggle { margin-top: 0.85rem; }
html[data-theme="theme3"] .t3-nav__toggle i,
html[data-theme="theme3"] .t3-nav__section i,
html[data-theme="theme3"] .t3-nav__account i,
html[data-theme="theme3"] .t3-nav__items i {
    width: 2.35rem;
    height: 2.35rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary, #1f8f86) 12%, transparent);
    color: var(--primary, #1f8f86);
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-nav__section i,
html[data-theme="theme3"][data-color-scheme="dark"] .t3-nav__account i,
html[data-theme="theme3"][data-color-scheme="dark"] .t3-nav__items i {
    background: rgba(126, 221, 214, 0.1);
    color: #9ee8e2;
}
html[data-theme="theme3"] .t3-nav__section span,
html[data-theme="theme3"] .t3-nav__account span,
html[data-theme="theme3"] .t3-nav__items,
html[data-theme="theme3"] .t3-nav__extra {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    white-space: nowrap;
}
html[data-theme="theme3"][dir="rtl"] .t3-nav__section span,
html[data-theme="theme3"][dir="rtl"] .t3-nav__account span,
html[data-theme="theme3"][dir="rtl"] .t3-nav__items,
html[data-theme="theme3"][dir="rtl"] .t3-nav__extra { transform: translateX(8px); }
html[data-theme="theme3"][data-motion="full"] .t3-nav.is-open .t3-nav__section span,
html[data-theme="theme3"][data-motion="full"] .t3-nav.is-open .t3-nav__account span,
html[data-theme="theme3"][data-motion="full"] .t3-nav.is-open .t3-nav__items,
html[data-theme="theme3"][data-motion="full"] .t3-nav.is-open .t3-nav__extra {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 160ms var(--ease-enter) 50ms, transform 180ms var(--ease-enter) 40ms, max-height var(--motion-normal) var(--ease-enter);
}
html[data-theme="theme3"][data-motion="reduced"] .t3-nav.is-open .t3-nav__section span,
html[data-theme="theme3"][data-motion="reduced"] .t3-nav.is-open .t3-nav__account span,
html[data-theme="theme3"][data-motion="reduced"] .t3-nav.is-open .t3-nav__items,
html[data-theme="theme3"][data-motion="reduced"] .t3-nav.is-open .t3-nav__extra,
html[data-theme="theme3"][data-motion="off"] .t3-nav.is-open .t3-nav__section span,
html[data-theme="theme3"][data-motion="off"] .t3-nav.is-open .t3-nav__account span,
html[data-theme="theme3"][data-motion="off"] .t3-nav.is-open .t3-nav__items,
html[data-theme="theme3"][data-motion="off"] .t3-nav.is-open .t3-nav__extra {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
html[data-theme="theme3"] .t3-nav__items {
    transition: max-height var(--motion-normal) var(--ease-enter);
    list-style: none;
    margin: 0;
    padding: 0 0.45rem 0.35rem;
    display: grid;
    gap: 0.15rem;
    max-height: 0;
    overflow: hidden;
}
html[data-theme="theme3"] .t3-nav.is-open .t3-nav__items { max-height: 40rem; }
html[data-theme="theme3"] .t3-nav__items a { border-radius: 12px; min-height: 2.5rem; }
html[data-theme="theme3"] .t3-nav__items small { display: block; font-weight: 500; color: var(--muted); }
html[data-theme="theme3"] .t3-nav__section.is-on i,
html[data-theme="theme3"] .t3-nav__items a.is-on i,
html[data-theme="theme3"] .t3-nav__section:hover i {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-theme="theme3"] .t3-nav__items a.is-on,
html[data-theme="theme3"] .t3-nav__section.is-on { color: var(--accent, #1f8f86); }
html[data-theme="theme3"] .t3-nav__scroll { flex: 1; overflow: auto; padding-bottom: 0.5rem; }
html[data-theme="theme3"] .t3-nav:not(.is-open) .t3-nav__scroll { overflow: hidden; }
html[data-theme="theme3"] .t3-nav:not(.is-open) .t3-nav__items,
html[data-theme="theme3"] .t3-nav:not(.is-open) .t3-nav__extra { visibility: hidden; }
html[data-theme="theme3"] .t3-nav__foot {
    margin-top: auto;
    padding-bottom: 0.8rem;
    border-top: 1px solid transparent;
}
html[data-theme="theme3"] .t3-nav.is-open .t3-nav__foot { border-top-color: var(--line, rgba(12, 28, 46, 0.08)); }
html[data-theme="theme3"] .t3-nav__extra { display: grid; gap: 0.25rem; padding: 0 0.9rem 0.4rem; }
html[data-theme="theme3"] .t3-nav__extra a,
html[data-theme="theme3"] .t3-nav__extra button {
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    text-align: start;
    padding: 0.25rem 0;
}
html[data-theme="theme3"][dir="rtl"] .t3-nav.is-open .t3-nav__toggle i { transform: scaleX(-1); }

@media (min-width: 801px) {
    html[data-theme="theme3"][dir="ltr"] body.t3:not(.t3-auth) { padding-left: 4.75rem; }
    html[data-theme="theme3"][dir="rtl"] body.t3:not(.t3-auth) { padding-right: 4.75rem; }
    html[data-theme="theme3"] .t2-actions > button[data-drawer-open] { display: none; }
}
@media (max-width: 800px) {
    html[data-theme="theme3"] body.t3 { padding-left: 0; padding-right: 0; overflow-x: clip; }
    html[data-theme="theme3"] body.t3 .t2-bar {
        width: min(var(--t2-wide), calc(100% - 1rem));
        max-width: 100%;
        box-sizing: border-box;
        gap: 0.55rem;
    }
    html[data-theme="theme3"] body.t3 .t2-actions {
        gap: 0.28rem;
        min-width: 0;
        flex-shrink: 1;
    }
    html[data-theme="theme3"] body.t3 .t2-lang {
        max-width: 6.75rem;
        padding-inline: 0.45rem;
        overflow: hidden;
    }
    html[data-theme="theme3"] .t3-nav { width: 0; }
    html[data-theme="theme3"] .t3-nav.is-open { width: 0; }
    html[data-theme="theme3"] .t3-nav__panel {
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(100%, 24rem);
        transform: translateX(-105%);
        transition: transform var(--motion-base) var(--ease-enter);
    }
    html[data-theme="theme3"][dir="ltr"] .t3-nav__panel { left: 0; }
    html[data-theme="theme3"][dir="rtl"] .t3-nav__panel { right: 0; left: auto; transform: translateX(105%); }
    html[data-theme="theme3"] .t3-nav.is-open .t3-nav__panel { transform: none; }
    html[data-theme="theme3"] .t3-nav__section span,
    html[data-theme="theme3"] .t3-nav__account span,
    html[data-theme="theme3"] .t3-nav__items,
    html[data-theme="theme3"] .t3-nav__extra { opacity: 1; transform: none; pointer-events: auto; max-height: none; }
}

/* LIGHT stays one surface family. Dark blocks from Theme 2 are lifted into that family. */
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-ink,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-close,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-footer {
    background: color-mix(in srgb, var(--surface-elevated) 88%, var(--primary) 6%);
    color: var(--text);
}
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-ink .t2-muted,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-footer { color: var(--text); }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-footer a { color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-footer a:hover { color: var(--primary-deep, var(--primary)); }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-footer h2 { color: var(--text); font-weight: 700; }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-foot-brand p,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-foot-bottom { color: color-mix(in srgb, var(--text) 72%, var(--muted)); }
/* Light footer surface → dark/navy logo; dark footer → light logo. */
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-foot-logo .t2-logo-light { display: block; }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-foot-logo .t2-logo-dark { display: none; }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-foot-logo .t2-logo-light { display: none; }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-foot-logo .t2-logo-dark { display: block; }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-close p { color: var(--muted); }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-close p { color: rgba(232, 238, 246, 0.82); }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 a.t2-story,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 a.t2-story strong,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 a.t2-story span { color: var(--text); }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 a.t2-story span { color: var(--muted); }
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-story {
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 30%),
        var(--surface-elevated);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 #fff, 0 16px 32px rgba(18, 20, 28, 0.06);
}
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-stage {
    background:
        radial-gradient(70% 80% at 100% 0%, rgba(31, 143, 134, 0.16), transparent 55%),
        linear-gradient(180deg, #fff, #f4f1ea);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 #fff, 0 18px 40px rgba(18, 20, 28, 0.08);
    color: #123c3a;
}
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-stage-top,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-stage-bottom,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t3-stage-label,
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t3-stage-note {
    color: #123c3a;
}
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-stage .t2-dots span {
    background: rgba(18, 60, 58, 0.28);
}
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-stage .t2-dots span:first-child {
    background: #1f8f86;
}
html[data-theme="theme3"][data-color-scheme="light"] body.t3 .t2-stage .t2-pill {
    background: #143f3c;
    color: #f4fffd;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-ink,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-close,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-footer,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-section {
    background: transparent;
    color: var(--t3-text);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-story.wide,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-story.slim {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 28%),
        #1a212c;
    color: #e8eef6;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* AUTH — one Theme 3 composition for login and OTP. */
html[data-theme="theme3"] body.t3-auth {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    place-items: stretch;
}
html[data-theme="theme3"] .t3-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.2rem;
    position: relative;
    background:
        radial-gradient(520px 280px at 50% 0%, rgba(31, 143, 134, 0.16), transparent 70%),
        var(--surface, #f7f4ee);
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-auth {
    background:
        radial-gradient(640px 320px at 50% -10%, rgba(126, 221, 214, 0.2), transparent 60%),
        radial-gradient(480px 260px at 100% 100%, rgba(40, 58, 78, 0.45), transparent 55%),
        #090c11;
}
html[data-theme="theme3"] .t3-auth__panel {
    width: min(28rem, 100%);
    padding: 1.4rem 1.35rem 1.5rem;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 28%),
        var(--surface-elevated, #fff);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 #fff, 0 24px 50px rgba(18, 20, 28, 0.08);
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-auth__panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 26%),
        rgba(24, 30, 40, 0.86);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 70px rgba(0, 0, 0, 0.45);
    color: #e8eef6;
    backdrop-filter: blur(16px);
}
html[data-theme="theme3"] .t3-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
html[data-theme="theme3"] .t3-auth__back img { height: 28px; width: auto; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-auth-logo--light,
html[data-theme="theme3"][data-color-scheme="light"] .t3-auth-logo--dark { display: none; }
html[data-theme="theme3"] .t3-auth__kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--primary, #1f8f86);
}
html[data-theme="theme3"] .t3-auth__title { margin: 0; font-size: 1.85rem; letter-spacing: -0.03em; }
html[data-theme="theme3"] .t3-auth__lead { margin: 0.4rem 0 1.1rem; color: var(--muted, #5c6b7a); }
html[data-theme="theme3"] .t3-field { display: grid; gap: 0.35rem; margin-bottom: 0.85rem; font-weight: 600; }
html[data-theme="theme3"] .t3-field input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 70%, #fff);
    color: inherit;
    padding: 0.8rem 0.9rem;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-field input,
html[data-theme="theme3"][data-color-scheme="dark"] .t3-otp__cell {
    background: #12171f;
    border-color: rgba(232, 238, 246, 0.16);
    color: #e8eef6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="theme3"] .t3-field input:focus,
html[data-theme="theme3"] .t3-otp__cell:focus {
    outline: none;
    border-color: var(--accent, #7eddd6);
    box-shadow: 0 0 0 3px var(--t3-accent-glow);
}
html[data-theme="theme3"] .t3-auth__row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
    margin: 0.2rem 0 1rem;
    font-size: 0.92rem;
}
html[data-theme="theme3"] .t3-auth__submit {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1rem;
    background: var(--t2-btn, #1c8f86);
    color: #fff;
    font-weight: 700;
}
html[data-theme="theme3"][data-motion="full"] .t3-auth__submit { transition: transform var(--motion-fast) var(--ease-quick), filter var(--motion-fast) var(--ease-quick); }
html[data-theme="theme3"][data-motion="full"] .t3-auth__submit:hover { filter: brightness(1.06); }
html[data-theme="theme3"][data-motion="full"] .t3-auth__submit:active { transform: translateY(1px); }
html[data-theme="theme3"] .t3-auth__switch { margin: 1rem 0 0; color: var(--muted); }
html[data-theme="theme3"] .t3-auth__switch a { color: inherit; font-weight: 700; }
html[data-theme="theme3"] .t3-otp { display: flex; gap: 0.4rem; }
html[data-theme="theme3"] .t3-otp__cell {
    width: 2.7rem;
    height: 3.2rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 14px;
    border: 1px solid var(--line);
}
html[data-theme="theme3"] .t3-otp__cell.is-bad { border-color: #ff8d8d; }
html[data-theme="theme3"] .t3-otp__note { color: var(--muted); font-size: 0.85rem; }
html[data-theme="theme3"] .t3-auth__resend {
    margin-top: 0.8rem;
    background: none;
    border: 0;
    color: var(--accent, #1f8f86);
    font-weight: 700;
    padding: 0;
}

html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t3-auth__panel {
    animation: t3-enter var(--motion-base) var(--ease-enter) both;
}
@keyframes t3-enter {
    from { opacity: 0.72; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme="theme3"] .t3-nav,
    html[data-theme="theme3"] .t3-nav__panel,
    html[data-theme="theme3"] .t3-nav__overlay,
    html[data-theme="theme3"] body.t3 .t2-main,
    html[data-theme="theme3"] .t3-auth__panel,
    html[data-theme="theme3"] body.t3 .t2-task,
    html[data-theme="theme3"] body.t3 .t2-tool-card {
        animation: none !important;
        transition: none !important;
    }
}
html[data-theme="theme3"][data-motion="off"] .t3-nav,
html[data-theme="theme3"][data-motion="off"] .t3-auth__panel,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-main {
    animation: none;
    transition: none;
}

/* Auth stage. One composition for every Theme 3 auth screen. */
html[data-theme="theme3"] body.t3-auth {
    display: block;
    margin: 0;
    padding: 0;
    place-items: stretch;
}
html[data-theme="theme3"] .t3-stage { width: 100%; }
html[data-theme="theme3"] .t3-stage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(16rem, 0.82fr) minmax(22rem, 1.18fr);
    background: #f4f1ea;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-stage {
    background:
        radial-gradient(640px 420px at 18% 0%, rgba(126, 221, 214, 0.18), transparent 58%),
        radial-gradient(520px 380px at 100% 100%, rgba(48, 70, 92, 0.35), transparent 50%),
        #090c11;
}
html[data-theme="theme3"] .t3-stage__brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 28%),
        #f7f4ee;
    border-inline-end: 1px solid rgba(18, 38, 60, 0.08);
    box-shadow: inset 0 1px 0 #fff;
}
html[data-theme="theme3"] .t3-stage__brand::before {
    content: "";
    position: absolute;
    width: 26rem;
    height: 26rem;
    inset-inline-start: -8rem;
    top: -9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 143, 134, 0.22), transparent 68%);
    pointer-events: none;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-stage__brand {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 22%),
        #10161e;
    border-inline-end-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #e8eef6;
}
html[data-theme="theme3"] .t3-stage__mark img { height: 42px; width: auto; }
html[data-theme="theme3"] .t3-stage__line {
    margin: 0;
    max-width: 16rem;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
}
html[data-theme="theme3"] .t3-stage__back {
    color: inherit;
    text-decoration: none;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
html[data-theme="theme3"][dir="rtl"] .t3-stage__arrow { transform: scaleX(-1); }
html[data-theme="theme3"] .t3-stage__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3.2rem 1.6rem 1.4rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 18%),
        #fff;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-stage__sheet {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 20%),
        #141b24;
    color: #e8eef6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="theme3"] .t3-stage__tools {
    position: absolute;
    top: 0.85rem;
    inset-inline-end: 1rem;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}
html[data-theme="theme3"] .t3-stage__form { width: min(34rem, 100%); margin: auto; }
html[data-theme="theme3"]:has(.t3-stage--card),
html[data-theme="theme3"] body.t3-auth:has(.t3-stage--card) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
html[data-theme="theme3"] .t3-stage.t3-stage--card {
    position: relative;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    place-items: center;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 3.4rem 1.25rem 1.2rem;
}
html[data-theme="theme3"] .t3-card-home {
    position: absolute;
    top: 1.1rem;
    inset-inline-start: 1.2rem;
    z-index: 3;
}
html[data-theme="theme3"] .t3-card {
    --t3-swap: 1;
    position: relative;
    width: min(60rem, 100%);
    height: min(40rem, calc(100dvh - 4.6rem));
    max-height: calc(100dvh - 4.6rem);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(18, 38, 60, 0.08);
    box-shadow: inset 0 1px 0 #fff, 0 24px 50px rgba(18, 20, 28, 0.08);
}
html[data-theme="theme3"][dir="rtl"] .t3-card { --t3-swap: -1; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-card {
    background: #141b24;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px rgba(0, 0, 0, 0.38);
}
html[data-theme="theme3"] .t3-card__pane {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 1.5rem 1.7rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 18%),
        #fff;
    z-index: 2;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-card__pane {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 20%),
        #141b24;
}
html[data-theme="theme3"] .t3-card__pane[data-pane="signup"],
html[data-theme="theme3"] .t3-card__pane[data-pane="forgot"] { opacity: 0; z-index: 1; }
html[data-theme="theme3"] .t3-card__pane[data-pane="forgot"] { transform: translateX(calc(var(--t3-swap) * 100%)); }
html[data-theme="theme3"] .t3-card[data-auth-state="forgot"] .t3-card__pane[data-pane="signin"],
html[data-theme="theme3"] .t3-card[data-auth-state="forgot"] .t3-card__pane[data-pane="signup"] {
    transform: translateX(calc(var(--t3-swap) * -100%));
    opacity: 0;
}
html[data-theme="theme3"] .t3-card[data-auth-state="forgot"] .t3-card__pane[data-pane="forgot"] {
    transform: translateX(0);
    opacity: 1;
    z-index: 5;
}
html[data-theme="theme3"] .t3-card[data-auth-state="forgot"] .t3-card__track { transform: translateX(0); }
html[data-theme="theme3"] .t3-card.is-ready .t3-card__pane,
html[data-theme="theme3"] .t3-card.is-ready .t3-card__overlay,
html[data-theme="theme3"] .t3-card.is-ready .t3-card__track {
    transition: transform var(--motion-emphasis) var(--ease-transform), opacity var(--motion-emphasis) var(--ease-transform);
}
html[data-theme="theme3"][data-motion="reduced"] .t3-card.is-ready .t3-card__pane,
html[data-theme="theme3"][data-motion="reduced"] .t3-card.is-ready .t3-card__overlay,
html[data-theme="theme3"][data-motion="reduced"] .t3-card.is-ready .t3-card__track,
html[data-theme="theme3"][data-motion="off"] .t3-card.is-ready .t3-card__pane,
html[data-theme="theme3"][data-motion="off"] .t3-card.is-ready .t3-card__overlay,
html[data-theme="theme3"][data-motion="off"] .t3-card.is-ready .t3-card__track {
    transition-duration: 180ms;
    transition-timing-function: ease-out;
}
html[data-theme="theme3"] .t3-card[data-auth-state="signup"] .t3-card__pane {
    transform: translateX(calc(var(--t3-swap) * 100%));
}
html[data-theme="theme3"] .t3-card[data-auth-state="signup"] .t3-card__pane[data-pane="signup"] {
    opacity: 1;
    z-index: 5;
}
html[data-theme="theme3"] .t3-card__copy { width: 100%; }
html[data-theme="theme3"] .t3-card__overlay {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 6;
}
html[data-theme="theme3"] .t3-card[data-auth-state="signup"] .t3-card__overlay {
    transform: translateX(calc(var(--t3-swap) * -100%));
}
html[data-theme="theme3"] .t3-card__track {
    width: 200%;
    height: 100%;
    display: flex;
    transform: translateX(-50%);
}
html[data-theme="theme3"][dir="rtl"] .t3-card__track { direction: ltr; }
html[data-theme="theme3"] .t3-card[data-auth-state="signup"] .t3-card__track { transform: translateX(0); }
html[data-theme="theme3"] .t3-card__promo {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 28%),
        #f7f4ee;
    color: #12263c;
}
html[data-theme="theme3"][dir="rtl"] .t3-card__promo { direction: rtl; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-card__promo {
    background:
        radial-gradient(420px 280px at 50% 0%, rgba(126, 221, 214, 0.18), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 22%),
        #10161e;
    color: #e8eef6;
}
html[data-theme="theme3"] .t3-card__promo .t3-stage__line { max-width: 16rem; }
html[data-theme="theme3"] .t3-card__promo .t3-lead { margin: 0; max-width: 18rem; }
html[data-theme="theme3"] .t3-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    margin-top: 0.4rem;
    border-radius: 999px;
    padding: 0.8rem 1.3rem;
    border: 1px solid rgba(31, 143, 134, 0.45);
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-promo-btn { border-color: rgba(126, 221, 214, 0.55); }
@media (max-width: 720px) {
    html[data-theme="theme3"] .t3-stage.t3-stage--card { padding: 3.4rem 0.8rem 1.2rem; }
    html[data-theme="theme3"] .t3-card { width: min(28rem, 100%); height: auto; max-height: calc(100dvh - 4.4rem); }
    html[data-theme="theme3"] .t3-card__overlay { display: none; }
    html[data-theme="theme3"] .t3-card__pane { width: 100%; }
    html[data-theme="theme3"] .t3-card__pane[data-pane="signup"] { transform: translateX(calc(var(--t3-swap) * 100%)); }
    html[data-theme="theme3"] .t3-card[data-auth-state="signup"] .t3-card__pane[data-pane="signin"] {
        transform: translateX(calc(var(--t3-swap) * -100%));
        opacity: 0;
    }
    html[data-theme="theme3"] .t3-card[data-auth-state="signup"] .t3-card__pane[data-pane="signup"] {
        transform: translateX(0);
        opacity: 1;
    }
    html[data-theme="theme3"] .t3-card[data-auth-state="forgot"] .t3-card__pane[data-pane="signin"] {
        transform: translateX(calc(var(--t3-swap) * -100%));
        opacity: 0;
    }
    html[data-theme="theme3"] .t3-card[data-auth-state="forgot"] .t3-card__pane[data-pane="forgot"] {
        transform: translateX(0);
        opacity: 1;
    }
}
html[data-theme="theme3"] .t3-kicker { margin: 0 0 0.35rem; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; color: #1f8f86; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-kicker { color: #9ee8e2; }
html[data-theme="theme3"] .t3-title { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em; }
html[data-theme="theme3"] .t3-lead { margin: 0.45rem 0 1.1rem; color: #3d5166; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-lead { color: #c5d0dc; }
html[data-theme="theme3"] .t3-field { display: grid; gap: 0.35rem; margin-bottom: 0.8rem; }
html[data-theme="theme3"] .t3-field > span:first-child { font-weight: 650; color: #1a3148; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-field > span:first-child { color: #e7eef6; }
html[data-theme="theme3"] .t3-field__box {
    display: flex;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgba(18, 38, 60, 0.16);
    background: #f7f8f6;
    box-shadow: inset 0 1px 0 #fff;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-field__box {
    background: #10161e;
    border-color: rgba(232, 238, 246, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme="theme3"] .t3-field__box:hover { border-color: rgba(31, 143, 134, 0.45); }
html[data-theme="theme3"] .t3-field__box:focus-within {
    border-color: #1f8f86;
    box-shadow: 0 0 0 3px rgba(31, 143, 134, 0.22);
    background: #fff;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-field__box:focus-within {
    border-color: #7eddd6;
    box-shadow: 0 0 0 3px rgba(126, 221, 214, 0.22);
    background: #17202b;
}
html[data-theme="theme3"] .t3-field.is-filled .t3-field__box { border-color: rgba(31, 143, 134, 0.35); }
html[data-theme="theme3"] .t3-field.is-valid .t3-field__box { border-color: #1f8f86; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-field.is-valid .t3-field__box { border-color: #5dcec4; }
html[data-theme="theme3"] .t3-field.is-invalid .t3-field__box { border-color: #c24545; box-shadow: 0 0 0 3px rgba(194, 69, 69, 0.16); }
html[data-theme="theme3"] .t3-field__box input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #12263c;
    min-height: 2.75rem;
    padding: 0.7rem 0.9rem;
    outline: none;
}
html[data-theme="theme3"][data-color-scheme="dark"] .t3-field__box input { color: #f2f6fb; }
html[data-theme="theme3"] .t3-field__box input:disabled { opacity: 0.55; }
html[data-theme="theme3"] .t3-reveal {
    border: 0;
    background: transparent;
    color: inherit;
    width: 2.6rem;
    height: 2.6rem;
}
html[data-theme="theme3"] .t3-error { color: #ffb4b4; font-size: 0.85rem; margin: -0.35rem 0 0.7rem; }
html[data-theme="theme3"][data-color-scheme="light"] .t3-error { color: #9d2c2c; }
html[data-theme="theme3"] .t3-row, html[data-theme="theme3"] .t3-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    color: inherit;
}
html[data-theme="theme3"] .t3-check { justify-content: flex-start; }
html[data-theme="theme3"] .t3-row a, html[data-theme="theme3"] .t3-switch a { color: #0f6e66; font-weight: 700; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-row a,
html[data-theme="theme3"][data-color-scheme="dark"] .t3-switch a { color: #9ee8e2; }
html[data-theme="theme3"] .t3-submit {
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 0.9rem 1rem;
    background: #1c8f86;
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-theme="theme3"][data-motion="full"] .t3-submit { transition: transform 140ms ease, filter 140ms ease; }
html[data-theme="theme3"][data-motion="full"] .t3-submit:hover { filter: brightness(1.08); }
html[data-theme="theme3"][data-motion="full"] .t3-submit:active { transform: translateY(1px); }
html[data-theme="theme3"] .t3-submit:disabled { opacity: 0.55; }
html[data-theme="theme3"] .t3-switch { margin-top: 1rem; color: #3d5166; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-switch { color: #c5d0dc; }
html[data-theme="theme3"] .t3-textbtn { margin-top: 0.8rem; border: 0; background: none; color: #9ee8e2; font-weight: 700; padding: 0; }
html[data-theme="theme3"][data-color-scheme="light"] .t3-textbtn { color: #0f6e66; }
html[data-theme="theme3"] .t3-note { border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 0.9rem; background: rgba(93, 206, 160, 0.16); color: #14684a; }
html[data-theme="theme3"][data-color-scheme="dark"] .t3-note { color: #b7f3d8; }
html[data-theme="theme3"] .t3-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
html[data-theme="theme3"] .t3-otp { display: flex; gap: 0.4rem; }
html[data-theme="theme3"] .t3-otp__cell {
    width: 2.7rem; height: 3.25rem; text-align: center; font-size: 1.25rem; font-weight: 700;
    border-radius: 14px; border: 1px solid rgba(232, 238, 246, 0.16); background: #10161e; color: #f2f6fb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="theme3"][data-color-scheme="light"] .t3-otp__cell { background: #f7f8f6; color: #12263c; border-color: rgba(18, 38, 60, 0.16); }
html[data-theme="theme3"] .t3-otp__cell:focus { outline: none; border-color: #7eddd6; box-shadow: 0 0 0 3px rgba(126, 221, 214, 0.28); }
html[data-theme="theme3"] .t3-otp__cell.is-bad { border-color: #ff8d8d; }
html[data-theme="theme3"][data-motion="full"] body.t3-auth.t3-ready .t3-stage__form { animation: t3-enter 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-theme="theme3"] .t3-stage__brand { view-transition-name: t3-auth-brand; }
@media (max-width: 720px) {
    html[data-theme="theme3"] .t3-stage { grid-template-columns: 1fr; }
    html[data-theme="theme3"] .t3-stage__brand { min-height: auto; padding: 1rem 1.1rem; gap: 0.8rem; }
    html[data-theme="theme3"] .t3-stage__line { display: none; }
    html[data-theme="theme3"] .t3-pair { grid-template-columns: 1fr; }
    html[data-theme="theme3"] .t3-stage__form { margin: 0.4rem auto 0; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme="theme3"] .t3-stage__form,
    html[data-theme="theme3"] .t3-field__box,
    html[data-theme="theme3"] .t3-submit { animation: none !important; transition: none !important; }
}

/* One Theme 3 interaction grammar. Scoped so Theme 1 and Theme 2 stay still. */
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-kicker,
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero h1,
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-lead,
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-command,
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-hero-actions,
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-stage {
    animation: t3-enter var(--motion-normal) var(--ease-enter) both;
}
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero h1 { animation-delay: 40ms; }
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-lead { animation-delay: 80ms; }
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-command { animation-delay: 110ms; }
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-hero-actions { animation-delay: 140ms; }
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .t2-hero .t2-stage { animation-delay: 160ms; }
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-stage {
    transition: transform var(--motion-normal) var(--ease-quick), box-shadow var(--motion-normal) var(--ease-quick);
}
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-stage:hover { transform: translateY(-2px); }
html[data-theme="theme3"][data-motion="full"] body.t3 .t3-rise {
    width: auto;
    height: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-normal) var(--ease-enter), transform var(--motion-normal) var(--ease-enter);
}
html[data-theme="theme3"][data-motion="full"] body.t3 .t3-rise.is-in { opacity: 1; transform: none; }
html[data-theme="theme3"] body.t3 .t2-btn,
html[data-theme="theme3"] body.t3 .btn,
html[data-theme="theme3"] body.t3 .btn-core,
html[data-theme="theme3"] body.t3 .t3-submit,
html[data-theme="theme3"] body.t3 .t3-promo-btn {
    transition: transform var(--motion-fast) var(--ease-quick), filter var(--motion-fast) var(--ease-quick), background var(--motion-fast) var(--ease-quick), border-color var(--motion-fast) var(--ease-quick), box-shadow var(--motion-fast) var(--ease-quick);
}
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-btn:active,
html[data-theme="theme3"][data-motion="full"] body.t3 .btn:active,
html[data-theme="theme3"][data-motion="full"] body.t3 .btn-core:active,
html[data-theme="theme3"][data-motion="full"] body.t3 .t3-submit:active { transform: translateY(1px); }
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-btn-primary:hover,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-btn-ink:hover { box-shadow: 0 0 0 3px var(--t3-accent-glow); }
html[data-theme="theme3"] body.t3 .t2-task,
html[data-theme="theme3"] body.t3 .t2-tool-card,
html[data-theme="theme3"] body.t3 .t2-story,
html[data-theme="theme3"] body.t3 .t2-eco-lead,
html[data-theme="theme3"] body.t3 .t2-eco-row,
html[data-theme="theme3"] body.t3 .t2-guide-lead,
html[data-theme="theme3"] body.t3 .t2-guide-row,
html[data-theme="theme3"] body.t3 .panel-card {
    transition: transform var(--motion-fast) var(--ease-quick), border-color var(--motion-normal) var(--ease-quick), background var(--motion-normal) var(--ease-quick), box-shadow var(--motion-normal) var(--ease-quick);
}
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-task:active,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-tool-card:active,
html[data-theme="theme3"][data-motion="full"] body.t3 .panel-card:active { transform: translateY(0); }
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-tool-grid.t3-reflow > *,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-empty.t3-reflow { animation: t3-enter var(--motion-fast) var(--ease-enter) both; }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 {
    background-color: var(--t3-bg);
    background-image: radial-gradient(920px 440px at 12% -10%, rgba(126, 221, 214, 0.09), transparent 62%), radial-gradient(680px 360px at 100% 0%, rgba(31, 143, 134, 0.06), transparent 58%);
    background-attachment: fixed;
}
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready:not(:has(.t2-hero)) main > :first-child {
    animation: t3-enter var(--motion-normal) var(--ease-enter) both;
}
html[data-theme="theme3"] body.t3 .t2-tab,
html[data-theme="theme3"] body.t3 .t2-tabs button {
    transition: background var(--motion-normal) var(--ease-quick), color var(--motion-normal) var(--ease-quick), border-color var(--motion-normal) var(--ease-quick);
}
html[data-theme="theme3"] body.t3 .tool-fav {
    transition: transform var(--motion-fast) var(--ease-quick), color var(--motion-fast) var(--ease-quick);
}
html[data-theme="theme3"] body.t3 .tool-fav[aria-pressed="true"] { color: var(--t3-accent, #1f8f86); }
html[data-theme="theme3"][data-motion="full"] body.t3 .tool-fav:active { transform: scale(0.92); }
html[data-theme="theme3"] body.t3 .form-control:focus,
html[data-theme="theme3"] body.t3 .form-select:focus,
html[data-theme="theme3"] body.t3 textarea:focus {
    outline: 2px solid var(--t3-accent, #1f8f86);
    outline-offset: 2px;
    border-color: var(--t3-accent, #1f8f86);
    box-shadow: 0 0 0 3px var(--t3-accent-glow);
}
html[data-theme="theme3"] body.t3 .tool-drop,
html[data-theme="theme3"] body.t3 .tool-result,
html[data-theme="theme3"] body.t3 .form-control,
html[data-theme="theme3"] body.t3 .form-select,
html[data-theme="theme3"] body.t3 textarea {
    transition: border-color var(--motion-normal) var(--ease-quick), background var(--motion-normal) var(--ease-quick), box-shadow var(--motion-normal) var(--ease-quick);
}
html[data-theme="theme3"] body.t3 .tool-drop.is-over {
    border-color: var(--t3-accent, #1f8f86);
    box-shadow: 0 0 0 3px var(--t3-accent-glow);
}
html[data-theme="theme3"][data-motion="full"] body.t3 .tool-result { animation: t3-enter var(--motion-normal) var(--ease-enter) both; }
html[data-theme="theme3"][data-motion="full"] body.t3 .dropdown-menu.show,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-suggest:not([hidden]),
html[data-theme="theme3"][data-motion="full"] .lang-pop-panel.t3-pop {
    animation: t3-drop var(--motion-fast) var(--ease-enter);
}
@keyframes t3-drop {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
html[data-theme="theme3"][data-motion="full"] body.t3 .modal.show .modal-dialog { animation: t3-enter var(--motion-normal) var(--ease-enter); }
html[data-theme="theme3"][data-motion="full"] body.t3 .alert,
html[data-theme="theme3"][data-motion="full"] body.t3 .t3-note { animation: t3-enter var(--motion-fast) var(--ease-enter); }
html[data-theme="theme3"] body.t3 .t2-header {
    transition: background var(--motion-normal) var(--ease-quick), box-shadow var(--motion-normal) var(--ease-quick);
}
html[data-theme="theme3"] body.t3 .t2-header.is-stuck { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
html[data-theme="theme3"] body.t3 .t2-nav a,
html[data-theme="theme3"] body.t3 .t2-footer a,
html[data-theme="theme3"] body.t3 .t3-nav a {
    transition: color var(--motion-fast) var(--ease-quick), background var(--motion-fast) var(--ease-quick), opacity var(--motion-fast) var(--ease-quick);
}
html[data-theme="theme3"] body.t3 .t3-nav a.is-on,
html[data-theme="theme3"] body.t3 .t2-nav a.is-current,
html[data-theme="theme3"] body.t3 .t3-nav a.is-current {
    background: var(--t3-accent-soft, rgba(31, 143, 134, 0.14));
    box-shadow: inset 2px 0 0 var(--t3-accent, #1f8f86);
}
html[data-theme="theme3"][dir="rtl"] body.t3 .t3-nav a.is-on,
html[data-theme="theme3"][dir="rtl"] body.t3 .t3-nav a.is-current,
html[data-theme="theme3"][dir="rtl"] body.t3 .t2-nav a.is-current { box-shadow: inset -2px 0 0 var(--t3-accent, #1f8f86); }
html[data-theme="theme3"] .t3-cycle {
    position: relative;
    display: inline-flex;
    gap: 0;
    margin-top: 0.8rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--line, rgba(18, 38, 60, 0.12));
    background: var(--surface-elevated, #fff);
}
html[data-theme="theme3"] .t3-cycle::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    inset-inline-start: 0.25rem;
    width: calc(50% - 0.25rem);
    border-radius: 999px;
    background: #1c8f86;
    transition: transform var(--motion-normal) var(--ease-transform);
}
html[data-theme="theme3"] .t3-cycle[data-mode="year"]::before { transform: translateX(100%); }
html[data-theme="theme3"][dir="rtl"] .t3-cycle[data-mode="year"]::before { transform: translateX(-100%); }
html[data-theme="theme3"] .t3-cycle button {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    border-radius: 999px;
    min-width: 6.5rem;
    padding: 0.45rem 0.9rem;
}
html[data-theme="theme3"] .t3-cycle button.is-on { color: #fff; }
html[data-theme="theme3"][data-motion="full"] body.t3 .t3-missing {
    animation: t3-enter var(--motion-normal) var(--ease-enter) both;
}
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t2-hero .t2-kicker,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t2-hero h1,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t2-hero .t2-lead,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t2-hero .t2-command,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t2-hero .t2-hero-actions,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t2-hero .t2-stage,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-hero .t2-kicker,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-hero h1,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-hero .t2-lead,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-hero .t2-command,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-hero .t2-hero-actions,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-hero .t2-stage,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t3-rise,
html[data-theme="theme3"][data-motion="off"] body.t3 .t3-rise,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .tool-result,
html[data-theme="theme3"][data-motion="off"] body.t3 .tool-result,
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t3-missing,
html[data-theme="theme3"][data-motion="off"] body.t3 .t3-missing {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-task,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-tool-card,
html[data-theme="theme3"][data-motion="off"] body.t3 .t2-btn,
html[data-theme="theme3"][data-motion="off"] body.t3 .dropdown-menu,
html[data-theme="theme3"][data-motion="off"] body.t3 .t3-card__pane,
html[data-theme="theme3"][data-motion="off"] body.t3 .t3-card__overlay,
html[data-theme="theme3"][data-motion="off"] body.t3 .t3-card__track {
    animation: none !important;
    transition: none !important;
}

html[data-theme="theme3"] body.t3 button:disabled:not(.t3-submit) { opacity: 0.55; }
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .btn-accent-core,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .btn-primary-core,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .btn-primary {
    background: #0d7a72;
    color: #fff;
    border-color: transparent;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .btn-accent-core:hover,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .btn-primary-core:hover,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .btn-primary:hover {
    background: #0a635c;
    color: #fff;
}
html[data-theme="theme3"] body.t3 .t2-btn-ink {
    background: #143f3c;
    color: #f4fffd;
    border-color: transparent;
}
html[data-theme="theme3"] body.t3 .t2-btn-ink:hover,
html[data-theme="theme3"] body.t3 .t2-btn-ink:focus-visible {
    background: #1c5752;
    color: #fff;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-btn-primary,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-btn-primary:hover,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-btn-primary:focus-visible {
    background: #0d7a72;
    color: #fff;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-btn-primary:hover,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-btn-primary:focus-visible {
    background: #0a635c;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-btn-ghost {
    color: #e8eef6;
    border-color: rgba(232, 238, 246, 0.22);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-command input,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .form-control,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .form-select,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 textarea {
    color: #f2f7fb;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-command input::placeholder,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .form-control::placeholder,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 textarea::placeholder {
    color: #c5d3e0;
}
/* Search suggestions must sit above hero CTAs — never cut through them. */
html[data-theme="theme3"] body.t3 .t2-command {
    position: relative;
    z-index: 8;
    isolation: isolate;
}
html[data-theme="theme3"] body.t3 .t2-suggest {
    z-index: 40;
}
html[data-theme="theme3"] body.t3 .t2-hero-actions {
    position: relative;
    z-index: 1;
}
html[data-theme="theme3"] body.t3 .t2-suggest a {
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}
html[data-theme="theme3"] body.t3 .t2-suggest a:hover,
html[data-theme="theme3"] body.t3 .t2-suggest a.is-active {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-elevated));
}
html[data-theme="theme3"] body.t3 .t2-suggest a i {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary-deep, #146e67);
    flex: 0 0 auto;
}

/* Stage caption stays on one line and never sits on the dots. */
html[data-theme="theme3"] body.t3 .t2-stage-top {
    gap: 0.9rem;
    align-items: center;
}
html[data-theme="theme3"] body.t3 .t2-dots { flex: 0 0 auto; }
html[data-theme="theme3"] body.t3 .t2-stage-top > span:not(.t2-dots),
html[data-theme="theme3"] body.t3 .t3-stage-label {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: end;
    line-height: 1.2;
}
html[data-theme="theme3"] body.t3 .t2-dots span {
    overflow: hidden;
    text-indent: -999px;
}

/* Homepage task cards read as services, not plain text. */
html[data-theme="theme3"] body.t3 .t2-task {
    border-width: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 12px 28px rgba(18, 20, 28, 0.07);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-task {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 30px rgba(0, 0, 0, 0.28);
}
html[data-theme="theme3"] body.t3 .t2-task strong {
    font-weight: 750;
}
html[data-theme="theme3"] body.t3 .t2-task span {
    margin-top: auto;
}

/* Related jumps under a running tool. */
html[data-theme="theme3"] body.t3 .tool-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.85rem;
}
html[data-theme="theme3"] body.t3 .tool-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    background: var(--surface-elevated);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html[data-theme="theme3"] body.t3 .tool-jump__link i {
    color: var(--primary, #1f8f86);
    font-size: 1rem;
}
html[data-theme="theme3"] body.t3 .tool-jump__link:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    color: var(--text);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .tool-jump__link {
    background: #1a212c;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e8eef6;
}
html[data-theme="theme3"] body.t3 .tool-related__link {
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--surface-elevated);
    padding: 0.85rem 1rem;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .tool-related__link {
    background: #1a212c;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e8eef6;
}

html[data-theme="theme3"] body.t3 .t2-stage:has(.t3-show) .t2-sheet { display: none; }
html[data-theme="theme3"] body.t3 .t3-show {
    position: relative;
    min-height: 22rem;
    margin: 0.7rem 0.45rem 0.45rem;
}
html[data-theme="theme3"] body.t3 .t3-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 280ms var(--ease-enter), transform 280ms var(--ease-enter);
}
html[data-theme="theme3"] body.t3 .t3-scene.is-on { opacity: 1; transform: none; }
html[data-theme="theme3"][data-motion="reduced"] body.t3 .t3-scene,
html[data-theme="theme3"][data-motion="off"] body.t3 .t3-scene { transition: none; transform: none; }
html[data-theme="theme3"] body.t3 .t3-paper,
html[data-theme="theme3"] body.t3 .t3-photo,
html[data-theme="theme3"] body.t3 .t3-pass,
html[data-theme="theme3"] body.t3 .t3-pdf,
html[data-theme="theme3"] body.t3 .t3-dev {
    width: min(92%, 24rem);
    min-height: 14.5rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbf8f2, #e7e1d4);
    color: #1a1d27;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
}
html[data-theme="theme3"] body.t3 .t3-paper { position: relative; padding: 1.7rem 1.45rem; display: grid; gap: 0.7rem; align-content: center; }
html[data-theme="theme3"] body.t3 .t3-paper i {
    position: absolute;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid #1f8f86;
}
html[data-theme="theme3"] body.t3 .t3-paper i:nth-child(1) { top: 0.55rem; left: 0.55rem; border-right: 0; border-bottom: 0; }
html[data-theme="theme3"] body.t3 .t3-paper i:nth-child(2) { top: 0.55rem; right: 0.55rem; border-left: 0; border-bottom: 0; }
html[data-theme="theme3"] body.t3 .t3-paper i:nth-child(3) { bottom: 0.55rem; left: 0.55rem; border-right: 0; border-top: 0; }
html[data-theme="theme3"] body.t3 .t3-paper i:nth-child(4) { bottom: 0.55rem; right: 0.55rem; border-left: 0; border-top: 0; }
html[data-theme="theme3"] body.t3 .t3-paper b,
html[data-theme="theme3"] body.t3 .t3-ocr b,
html[data-theme="theme3"] body.t3 .t3-dev b {
    display: block;
    height: 0.55rem;
    border-radius: 99px;
    background: #d5cfc3;
}
html[data-theme="theme3"] body.t3 .t3-paper b:nth-of-type(1) { width: 88%; }
html[data-theme="theme3"] body.t3 .t3-paper b:nth-of-type(2) { width: 70%; }
html[data-theme="theme3"] body.t3 .t3-paper b:nth-of-type(3) { width: 80%; }
html[data-theme="theme3"] body.t3 .t3-ocr { padding: 1.6rem 1.45rem; display: grid; gap: 0.65rem; }
html[data-theme="theme3"] body.t3 .t3-ocr b.is-hit { background: #1f8f86; width: 76%; }
html[data-theme="theme3"] body.t3 .t3-ocr b:nth-child(1) { width: 92%; }
html[data-theme="theme3"] body.t3 .t3-ocr b:nth-child(3) { width: 64%; }
html[data-theme="theme3"] body.t3 .t3-ocr b:nth-child(4) { width: 80%; }
html[data-theme="theme3"] body.t3 .t3-ocr strong { color: #146e67; font-size: 1.25rem; letter-spacing: 0.08em; }
html[data-theme="theme3"] body.t3 .t3-photo { padding: 1.25rem; display: grid; gap: 0.7rem; }
html[data-theme="theme3"] body.t3 .t3-photo span {
    display: block;
    height: 8.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #8fd0c8, #245e58 55%, #1b2422);
}
html[data-theme="theme3"] body.t3 .t3-photo strong,
html[data-theme="theme3"] body.t3 .t3-pass strong,
html[data-theme="theme3"] body.t3 .t3-pdf strong,
html[data-theme="theme3"] body.t3 .t3-dev strong { font-size: 0.95rem; letter-spacing: 0.02em; }
html[data-theme="theme3"] body.t3 .t3-pass { width: min(72%, 12.5rem); min-height: 16rem; padding: 1.1rem; text-align: center; }
html[data-theme="theme3"] body.t3 .t3-pass span {
    display: block;
    height: 10rem;
    margin-bottom: 0.65rem;
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 38%, #f3d2b8 0 18%, transparent 19%),
        linear-gradient(#d7e4ea, #8aa4b0);
}
html[data-theme="theme3"] body.t3 .t3-pdf {
    position: relative;
    min-height: 14.5rem;
    padding: 1.4rem;
    display: grid;
    align-content: end;
    gap: 0.35rem;
}
html[data-theme="theme3"] body.t3 .t3-pdf em {
    position: absolute;
    display: block;
    width: 58%;
    height: 62%;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d8d2c6;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
html[data-theme="theme3"] body.t3 .t3-pdf em:nth-child(1) { inset-inline-start: 12%; top: 14%; transform: rotate(-6deg); }
html[data-theme="theme3"] body.t3 .t3-pdf em:nth-child(2) { inset-inline-start: 22%; top: 18%; transform: rotate(2deg); }
html[data-theme="theme3"] body.t3 .t3-pdf em:nth-child(3) { inset-inline-start: 30%; top: 22%; transform: none; background: linear-gradient(180deg, #f7f4ee, #e9e3d6); }
html[data-theme="theme3"] body.t3 .t3-pdf strong { position: relative; color: #146e67; }
html[data-theme="theme3"] body.t3 .t3-dev {
    padding: 1.6rem 1.45rem;
    display: grid;
    gap: 0.7rem;
}
html[data-theme="theme3"] body.t3 .t3-dev code {
    display: grid;
    place-items: center;
    height: 7.2rem;
    border-radius: 12px;
    background: #1a222c;
    color: #7eddd6;
    font-size: 2rem;
    font-weight: 700;
}

/* Account and other leftover brand heroes use the same quiet page surface. */
html[data-theme="theme3"] body.t3 .page-hero--brand {
    background: transparent;
    background-image: none;
    color: inherit;
    overflow: visible;
    padding: 1.5rem 0 0.2rem;
}
html[data-theme="theme3"] body.t3 .page-hero--brand .eyebrow,
html[data-theme="theme3"] body.t3 .page-hero--brand .section-title,
html[data-theme="theme3"] body.t3 .page-hero--brand .section-copy {
    color: inherit;
    opacity: 1;
}
html[data-theme="theme3"][data-motion="full"] body.t3.t3-ready .page-hero--brand {
    animation: t3-enter var(--motion-normal) var(--ease-enter) both;
}

/* Hub / account cards: force readable text in dark (Bootstrap code/muted leak). */
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card {
    color: var(--t3-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #242d3a, #1a212c);
    border: 1px solid var(--t3-border);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card p,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card li,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .small,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .form-check-label,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card h2,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card strong {
    color: var(--t3-text);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .text-muted,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .hub-billing-subline {
    color: var(--t3-text-muted) !important;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card a {
    color: var(--t3-accent);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card code,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 code {
    color: #d7fff9 !important;
    background: rgba(126, 221, 214, 0.12) !important;
    border: 1px solid rgba(126, 221, 214, 0.22);
    border-radius: 0.35rem;
    padding: 0.08rem 0.35rem;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .btn-outline-secondary,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .btn-outline-primary {
    color: var(--t3-text);
    border-color: var(--t3-border-strong);
    background: transparent;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .btn-outline-secondary:hover,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .btn-outline-primary:hover {
    color: #07201e;
    background: var(--t3-accent);
    border-color: var(--t3-accent);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .form-check-input {
    background-color: #12171f;
    border-color: var(--t3-border-strong);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .panel-card .border-bottom {
    border-color: var(--t3-border) !important;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .badge.text-bg-light {
    background: rgba(232, 238, 246, 0.12) !important;
    color: var(--t3-text) !important;
}

/* Homepage ecosystem + guides — denser cards with original mock visuals */
html[data-theme="theme3"] body.t3 .t2-eco-lead,
html[data-theme="theme3"] body.t3 .t2-guide-lead {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 34%),
        var(--surface-elevated);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-eco-lead,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-guide-lead,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-eco-row,
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-guide-row {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 30%),
        #1a212c;
    border-color: var(--t3-border);
    color: var(--t3-text);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-section--guides {
    background: transparent;
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .t2-guide-row {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
        #151b24;
}
html[data-theme="theme3"] body.t3 .t2-eco-ico,
html[data-theme="theme3"] body.t3 .t2-guide-row__ico {
    background: color-mix(in srgb, var(--t3-accent, var(--primary)) 16%, transparent);
    color: var(--t3-accent, var(--primary-deep));
}
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-eco-lead:hover .t2-eco-tile,
html[data-theme="theme3"][data-motion="full"] body.t3 .t2-guide-lead:hover .t2-guide-redact {
    transform: translateY(-2px);
}
html[data-theme="theme3"] body.t3 .t2-eco-tile,
html[data-theme="theme3"] body.t3 .t2-guide-redact {
    transition: transform var(--motion-fast, 140ms) var(--ease-quick, ease);
}

/* Billing layout helpers */
body.t2-inner .hub-billing-meta {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}
body.t2-inner .hub-billing-meta li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
body.t2-inner .hub-billing-meta li span { color: var(--muted); }
body.t2-inner .hub-billing-subline { color: var(--muted); }
body.t2-inner .hub-empty-state {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}
html[data-theme="theme3"][data-color-scheme="dark"] body.t3 .hub-empty-state {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--t3-border);
}
@media (max-width: 767.98px) {
    body.t2-inner .hub-billing-card { margin-bottom: 1rem; }
}
