:root {
    --max-width: 1120px;

    --bg: #e9eef4;
    --bg-2: #dfe7ef;
    --decor-1: rgba(86, 122, 179, .15);
    --decor-2: rgba(113, 121, 161, .11);
    --decor-3: rgba(89, 151, 159, .09);

    --surface: #f3f6f9;
    --surface-soft: #e9eef3;
    --text: #263446;
    --muted: #687789;
    --border: rgba(50, 68, 89, .11);
    --shadow: 0 12px 30px rgba(52, 70, 92, .07);

    /* Стекло: blur меньше, заливка плотнее */
    --glass-fill: rgba(238, 244, 248, .55);
    --glass-fill-strong: rgba(238, 244, 248, .72);
    --glass-edge: rgba(255, 255, 255, .34);
    --glass-shadow: 0 14px 34px rgba(31, 46, 78, .09);

    --accent: #4778ff;
    --accent-rgb: 71, 120, 255;
    --accent-soft: rgba(var(--accent-rgb), .18);
    --accent-medium: rgba(var(--accent-rgb), .28);

    --background-image: none;
    --background-image-opacity: .18;
    --default-background-opacity: 1;
    --default-background-secondary-opacity: .72;

    --radius: 20px;
}

/* -------------------- ТЕМЫ -------------------- */

html[data-theme="mist"] {
    --bg: #e9eef4;
    --bg-2: #dfe7ef;
    --decor-1: rgba(86, 122, 179, .13);
    --decor-2: rgba(113, 121, 161, .10);
    --decor-3: rgba(89, 151, 159, .08);
    --surface: #f3f6f9;
    --surface-soft: #e9eef3;
    --text: #263446;
    --muted: #687789;
    --border: rgba(50, 68, 89, .11);
    --shadow: 0 12px 30px rgba(52, 70, 92, .07);
    --glass-fill: rgba(238, 244, 248, .55);
    --glass-fill-strong: rgba(238, 244, 248, .73);
    --glass-edge: rgba(255, 255, 255, .34);
}

html[data-theme="warm"] {
    --bg: #f1ebe2;
    --bg-2: #e9dfd2;
    --decor-1: rgba(207, 132, 62, .12);
    --decor-2: rgba(166, 111, 92, .10);
    --decor-3: rgba(166, 145, 85, .08);
    --surface: #fbf6ef;
    --surface-soft: #f1e8dc;
    --text: #342b23;
    --muted: #786b60;
    --border: rgba(83, 62, 45, .11);
    --shadow: 0 13px 32px rgba(83, 59, 39, .08);
    --glass-fill: rgba(250, 243, 233, .55);
    --glass-fill-strong: rgba(250, 243, 233, .73);
    --glass-edge: rgba(255, 252, 245, .34);
}

html[data-theme="dusk"] {
    --bg: #202733;
    --bg-2: #29313e;
    --decor-1: rgba(91, 121, 191, .16);
    --decor-2: rgba(113, 94, 158, .12);
    --decor-3: rgba(77, 137, 143, .08);
    --surface: #2b3441;
    --surface-soft: #323c4a;
    --text: #e5ebf3;
    --muted: #a8b3c2;
    --border: rgba(255, 255, 255, .08);
    --shadow: 0 14px 34px rgba(5, 10, 18, .19);
    --glass-fill: rgba(43, 52, 65, .55);
    --glass-fill-strong: rgba(43, 52, 65, .73);
    --glass-edge: rgba(255, 255, 255, .10);
}

html[data-theme="warm-dark"] {
    --bg: #25211e;
    --bg-2: #2e2925;
    --decor-1: rgba(196, 126, 68, .15);
    --decor-2: rgba(151, 94, 78, .11);
    --decor-3: rgba(164, 142, 78, .07);
    --surface: #332d28;
    --surface-soft: #3b342e;
    --text: #eee5da;
    --muted: #b8aa9c;
    --border: rgba(255, 238, 219, .08);
    --shadow: 0 14px 34px rgba(10, 7, 5, .22);
    --glass-fill: rgba(51, 45, 40, .55);
    --glass-fill-strong: rgba(51, 45, 40, .73);
    --glass-edge: rgba(255, 244, 228, .10);
}

html[data-theme="dark"] {
    --bg: #11151d;
    --bg-2: #171c26;
    --decor-1: rgba(70, 112, 224, .18);
    --decor-2: rgba(128, 89, 188, .13);
    --decor-3: rgba(52, 143, 139, .08);
    --surface: #1b202b;
    --surface-soft: #222936;
    --text: #eef2f7;
    --muted: #9ca8b8;
    --border: rgba(255, 255, 255, .08);
    --shadow: 0 16px 42px rgba(0, 0, 0, .22);
    --glass-fill: rgba(27, 32, 43, .54);
    --glass-fill-strong: rgba(27, 32, 43, .72);
    --glass-edge: rgba(255, 255, 255, .10);
}

html[data-theme="oled"] {
    --bg: #000000;
    --bg-2: #050505;
    --decor-1: rgba(68, 108, 220, .11);
    --decor-2: rgba(121, 83, 181, .08);
    --decor-3: rgba(45, 125, 122, .05);
    --surface: #090909;
    --surface-soft: #101010;
    --text: #f4f4f4;
    --muted: #989898;
    --border: rgba(255, 255, 255, .09);
    --shadow: none;
    --glass-fill: rgba(8, 8, 8, .57);
    --glass-fill-strong: rgba(8, 8, 8, .75);
    --glass-edge: rgba(255, 255, 255, .10);
}

html[data-accent="blue"]   { --accent:#4778ff; --accent-rgb:71,120,255; }
html[data-accent="violet"] { --accent:#8a55f5; --accent-rgb:138,85,245; }
html[data-accent="cyan"]   { --accent:#078fae; --accent-rgb:7,143,174; }
html[data-accent="green"]  { --accent:#15975e; --accent-rgb:21,151,94; }
html[data-accent="orange"] { --accent:#e27425; --accent-rgb:226,116,37; }
html[data-accent="red"]    { --accent:#dc4652; --accent-rgb:220,70,82; }

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;

    background:
        radial-gradient(circle at 11% -4%, var(--decor-1), transparent 31rem),
        radial-gradient(circle at 92% 15%, var(--decor-2), transparent 28rem),
        radial-gradient(circle at 48% 92%, var(--decor-3), transparent 32rem),
        linear-gradient(145deg, var(--bg), var(--bg-2));

    background-attachment: fixed;
    transition: color .25s ease, background .25s ease;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--background-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    filter: saturate(.78) contrast(.92);
    transition: opacity .25s ease;
}

body::before {
    opacity: var(--background-image-opacity);
}

html.has-custom-background body::before {
    filter: saturate(.82) contrast(.94);
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

/* -------------------- ШАПКА -------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.topbar-inner {
    width: min(var(--max-width), calc(100% - 32px));
    min-height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    flex: 0 0 auto;
    font-size: calc(20px * var(--vinya-font-scale, 1.25));
    font-weight: 760;
    letter-spacing: -.4px;
    text-decoration: none;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.desktop-nav::-webkit-scrollbar {
    display: none;
}

.desktop-nav a {
    flex: 0 0 auto;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--ui-font-body);
    transition: color .16s ease;
}

.desktop-nav a:hover {
    color: var(--text);
}

.global-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.icon-button,
.profile-button,
.bot-button,
.glass-toggle {
    height: 38px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
}

.icon-button {
    width: 38px;
    padding: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-button,
.bot-button {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    text-decoration: none;
    font-size: var(--ui-font-body);
    font-weight: 650;
}

.bot-button {
    color: var(--accent);
}

.glass-toggle {
    min-width: 104px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: var(--ui-font-body);
    font-weight: 650;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.glass-orb {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .08);
    border: 1px solid rgba(var(--accent-rgb), .38);
}

.glass-state {
    margin-left: auto;
    min-width: 28px;
    color: var(--muted);
    font-size: var(--ui-font-small);
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.glass-toggle[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: rgba(var(--accent-rgb), .48);
    color: var(--accent);
}

.glass-toggle[aria-pressed="true"] .glass-orb {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}

.glass-toggle[aria-pressed="true"] .glass-state {
    color: var(--accent);
}

/* -------------------- ПАНЕЛЬ ОФОРМЛЕНИЯ -------------------- */

.settings-wrap {
    position: relative;
}

.appearance-panel {
    position: absolute;
    top: 46px;
    right: 0;
    width: 310px;
    max-height: min(620px, calc(100vh - 86px));
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;

    /* Без стекла панель специально непрозрачная. */
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(0,0,0,.16);
}

.panel-title {
    margin-bottom: 9px;
    color: var(--muted);
    font-size: var(--ui-font-body);
    font-weight: 720;
}

.panel-title-spaced {
    margin-top: 17px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.theme-grid button,
.background-action {
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 9px;
    cursor: pointer;
    text-align: left;
}

.theme-grid button.active {
    border-color: rgba(var(--accent-rgb), .58);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .09);
}

.accent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.accent,
.accent.custom {
    width: 27px;
    height: 27px;
    padding: 0;
    border: 2px solid var(--surface);
    outline: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.accent.active {
    outline: 2px solid var(--text);
}

.accent.blue   { background:#4778ff; }
.accent.violet { background:#8a55f5; }
.accent.cyan   { background:#078fae; }
.accent.green  { background:#15975e; }
.accent.orange { background:#e27425; }
.accent.red    { background:#dc4652; }

.accent.custom {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 750;
}

.accent.custom input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.background-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
}

.background-upload {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text);
    cursor: pointer;
    font-size: var(--ui-font-body);
    font-weight: 620;
}

.background-upload input {
    display: none;
}

.background-action {
    font-size: var(--ui-font-body);
    text-align: center;
}

.background-action:disabled {
    opacity: .45;
    cursor: default;
}

.background-opacity-row {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: var(--ui-font-small);
}

.background-opacity-row input {
    width: 100%;
    accent-color: var(--accent);
}

.background-hint {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: var(--ui-font-small);
    line-height: 1.4;
}

/* -------------------- ОСНОВНАЯ ОБЛАСТЬ -------------------- */

.container {
    width: min(var(--max-width), calc(100% - 32px));
    margin: 34px auto 70px;
}

.hero {
    position: relative;
}

.home-hero {
    min-height: clamp(380px, 48vw, 520px);
    max-width: none;
    margin: 0 0 34px;
    padding: clamp(28px, 5vw, 56px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--glass-edge) 78%, transparent);
    border-radius: clamp(24px, 3vw, 34px);
    background-image:
        linear-gradient(90deg, rgba(6, 10, 20, .64) 0%, rgba(7, 10, 22, .38) 42%, rgba(8, 10, 20, .16) 76%),
        linear-gradient(0deg, rgba(8, 10, 20, .42), rgba(8, 10, 20, .02) 62%),
        var(--background-image);
    background-position: center;
    background-size: cover;
    box-shadow: 0 24px 70px rgba(5, 9, 22, .24);
    isolation: isolate;
}


.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 80%, rgba(var(--accent-rgb), .18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 25%);
}

.home-hero-content {
    width: min(860px, 100%);
    margin: auto;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0,0,0,.28);
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    margin-bottom: 14px;
    padding: 0 12px;
    border: 1px solid rgba(var(--accent-rgb), .55);
    border-radius: 999px;
    background: rgba(8, 13, 26, .35);
    color: color-mix(in srgb, var(--accent) 70%, white 30%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    font-size: var(--ui-font-small);
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0 0 14px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    font-size: clamp(35px, 5.1vw, 66px);
    line-height: .98;
    letter-spacing: -2.6px;
}

.hero h1 span {
    color: color-mix(in srgb, var(--accent) 74%, #fff 26%);
}

.hero p {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255,255,255,.82);
    font-size: var(--ui-font-body);
    line-height: 1.55;
}

.home-hero-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.home-hero-actions a {
    min-height: 44px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    font-size: var(--ui-font-small);
    font-weight: 820;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.home-hero-primary {
    background: var(--accent);
    border-color: var(--accent) !important;
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), .28);
}

.home-hero-secondary {
    background: rgba(8,13,26,.38);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.home-hero-actions a:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), .78);
    box-shadow: 0 14px 32px rgba(var(--accent-rgb), .22);
}

.home-section {
    margin-top: 34px;
}

.home-section h2 {
    margin: 0 0 14px 2px;
    color: var(--text);
    font-size: calc(17px * var(--vinya-font-scale, 1.25));
    font-weight: 800;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.home-grid-short {
    max-width: none;
}

.home-card {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    padding: 23px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: 23px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.home-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), .42);
    box-shadow:
        0 20px 48px rgba(31, 42, 68, .12),
        0 0 0 1px rgba(var(--accent-rgb), .08);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent);
}

.card-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-copy {
    min-width: 0;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-copy strong {
    font-size: calc(18px * var(--vinya-font-scale, 1.25));
    line-height: 1.2;
}

.card-copy small {
    color: var(--muted);
    font-size: var(--ui-font-body);
    line-height: 1.5;
}

.card-arrow {
    color: var(--muted);
    font-size: calc(20px * var(--vinya-font-scale, 1.25));
    transition: transform .18s ease, color .18s ease;
}

.home-card:hover .card-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

@media (max-width: 920px) {
    .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero { min-height: 410px; }
}

@media (max-width: 680px) {
    .home-hero {
        min-height: 380px;
        margin-inline: -4px;
        padding: 25px 20px;
        border-radius: 24px;
        background-position: center;
    }
    html:not(.has-custom-background) .home-hero {
        background-position: 42% center;
    }
    html:not(.has-custom-background) body::before {
        background-position: 42% center;
    }
    .hero h1 { font-size: clamp(34px, 11vw, 48px); letter-spacing: -1.5px; }
    .home-hero-actions { align-items: stretch; }
    .home-hero-actions a { flex: 1 1 180px; }
    .home-grid { grid-template-columns: 1fr; }
    .home-card { min-height: 132px; padding: 19px; }
}

/* -------------------- FROSTED / LIQUID GLASS --------------------
   Уменьшенный blur + лёгкая имитация преломления:
   локальные полупрозрачные градиенты и чуть повышенная
   насыщенность/контраст фона.
--------------------------------------------------------------- */

html.glass-on .topbar {
    background:
        radial-gradient(circle at 18% -40%, rgba(255,255,255,.09), transparent 42%),
        var(--glass-fill-strong);
    backdrop-filter: blur(16px) saturate(142%) contrast(1.035);
    -webkit-backdrop-filter: blur(16px) saturate(142%) contrast(1.035);
    border-bottom-color: var(--glass-edge);
}

html.glass-on .home-card,
html.glass-on .icon-button,
html.glass-on .profile-button,
html.glass-on .bot-button,
html.glass-on .glass-toggle,
html.glass-on .placeholder-card {
    background:
        radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.10), transparent 42%),
        radial-gradient(ellipse at 112% 120%, rgba(var(--accent-rgb), .055), transparent 48%),
        var(--glass-fill);

    backdrop-filter: blur(17px) saturate(145%) contrast(1.04);
    -webkit-backdrop-filter: blur(17px) saturate(145%) contrast(1.04);

    border-color: var(--glass-edge);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 1px 0 0 rgba(255,255,255,.035),
        inset -1px 0 0 rgba(var(--accent-rgb), .025),
        var(--glass-shadow);
}

/* Выпадающая панель плотнее карточек, но всё ещё стеклянная. */
html.glass-on .appearance-panel {
    background:
        radial-gradient(ellipse at 12% -15%, rgba(255,255,255,.09), transparent 44%),
        radial-gradient(ellipse at 108% 112%, rgba(var(--accent-rgb), .045), transparent 52%),
        var(--glass-fill-strong);

    backdrop-filter: blur(18px) saturate(143%) contrast(1.035);
    -webkit-backdrop-filter: blur(18px) saturate(143%) contrast(1.035);

    border-color: var(--glass-edge);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 22px 54px rgba(0,0,0,.14);
}

html.glass-on .home-card:hover {
    background:
        radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.11), transparent 42%),
        radial-gradient(ellipse at 112% 120%, rgba(var(--accent-rgb), .09), transparent 48%),
        var(--glass-fill);

    border-color: rgba(var(--accent-rgb), .35);
}

html.glass-on .card-icon {
    background: rgba(var(--accent-rgb), .18);
}

/* -------------------- ЗАГЛУШКИ -------------------- */

.placeholder-card {
    max-width: 760px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.placeholder-card h1 {
    margin: 7px 0 9px;
}

.placeholder-card p {
    color: var(--muted);
    line-height: 1.6;
}

.section-label {
    color: var(--accent);
    font-size: var(--ui-font-body);
    font-weight: 700;
}

/* -------------------- ФУТЕР -------------------- */

.site-footer {
    width: min(var(--max-width), calc(100% - 32px));
    margin: 0 auto;
    padding: 0 0 28px;
    color: var(--muted);
    text-align: center;
    font-size: var(--ui-font-small);
}

.site-footer-signature {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
}

.site-footer-powered {
    color: var(--muted);
    font-size: .88em;
    font-weight: 560;
    letter-spacing: .01em;
}

.site-footer-brand {
    color: color-mix(in srgb, var(--text) 82%, var(--accent));
    font-family: Bahnschrift, "DIN Alternate", "Arial Narrow", Inter, ui-sans-serif, system-ui, sans-serif;
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: .055em;
}

html.glass-on .site-footer-signature {
    background: rgba(var(--accent-rgb), .055);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Системная тема = оформление операционной системы */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --bg: #11151d;
        --bg-2: #171c26;
        --decor-1: rgba(70, 112, 224, .18);
        --decor-2: rgba(128, 89, 188, .13);
        --decor-3: rgba(52, 143, 139, .08);
        --surface: #1b202b;
        --surface-soft: #222936;
        --text: #eef2f7;
        --muted: #9ca8b8;
        --border: rgba(255, 255, 255, .08);
        --shadow: 0 16px 42px rgba(0, 0, 0, .22);
        --glass-fill: rgba(27, 32, 43, .54);
        --glass-fill-strong: rgba(27, 32, 43, .72);
        --glass-edge: rgba(255, 255, 255, .10);
    }
}

@media (max-width: 820px) {
    .desktop-nav {
        display: none;
    }

    .topbar-inner,
    .container,
    .site-footer {
        width: min(100% - 24px, var(--max-width));
    }

    .container {
        margin-top: 22px;
    }
}

@media (max-width: 680px) {
    .topbar-inner {
        gap: 8px;
    }

    .global-actions {
        gap: 6px;
    }

    .glass-toggle {
        min-width: 76px;
    }

    .glass-label {
        display: none;
    }

    .bot-button {
        padding: 0 10px;
    }

    .profile-button {
        padding: 0 11px;
    }

    .hero:not(.home-hero) {
        padding-top: 18px;
    }

    .hero h1 {
        letter-spacing: -1px;
    }

    .home-section {
        margin-top: 25px;
    }


    .home-card {
        min-height: 108px;
    }

    .appearance-panel {
        position: fixed;
        top: 70px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 86px);
    }
}

@media (max-width: 440px) {
    .bot-button {
        font-size: 0;
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .bot-button::after {
        content: "↗";
        font-size: var(--ui-font-lead);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}


/* ============================================================
   VINYA UI — базовые компоненты
   - "Туманная" палитра стала основной светлой
   - системная тема использует эту светлую палитру
   - Liquid Glass перенесён в меню оформления
   - blur слабее, эффект преломления заметнее
   ============================================================ */

/* Имя пользователя слева */
.user-name-link {
    flex: 0 0 auto;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);
    text-decoration: none;

    font-size: var(--ui-font-lead);
    font-weight: 740;
    letter-spacing: -.2px;
}

.user-name-link:hover {
    color: var(--accent);
}

/* Панель настроек стала просторнее */
.appearance-panel {
    width: 370px;
    padding: 18px;
}

/* "Системная" занимает отдельную крупную строку */
.theme-system {
    grid-column: 1 / -1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 720;
}

.theme-system::after {
    content: "По устройству";
    color: var(--muted);
    font-size: var(--ui-font-small);
    font-weight: 600;
}

/* Переключатель стекла теперь находится внутри настроек */
.glass-settings-toggle {
    width: 100%;
    min-height: 48px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface-soft);
    color: var(--text);

    cursor: pointer;
    text-align: left;
}

.glass-settings-toggle .glass-orb {
    width: 20px;
    height: 20px;
}

.glass-settings-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.glass-settings-copy strong {
    font-size: var(--ui-font-body);
}

.glass-settings-copy small {
    color: var(--muted);
    font-size: var(--ui-font-small);
    line-height: 1.3;
}

.glass-settings-toggle .glass-state {
    min-width: 36px;
    margin: 0;
    text-align: right;
}

.glass-settings-toggle[aria-pressed="true"] {
    border-color: rgba(var(--accent-rgb), .48);
    background: var(--accent-soft);
}

.glass-settings-toggle[aria-pressed="true"] .glass-orb {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), .13),
        inset 0 1px 2px rgba(255,255,255,.24);
}

.glass-settings-toggle[aria-pressed="true"] .glass-state {
    color: var(--accent);
}

/* ------------------------------------------------------------
   Более "линзовое" стекло.
   Blur специально небольшой. Визуальное преломление усиливается
   несколькими смещёнными криволинейными слоями.
   ------------------------------------------------------------ */

html.glass-on .topbar {
    background:
        radial-gradient(ellipse at 12% -55%,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.045) 34%,
            transparent 58%),
        radial-gradient(ellipse at 92% 145%,
            rgba(var(--accent-rgb), .09),
            transparent 48%),
        var(--glass-fill-strong);

    backdrop-filter:
        blur(7px)
        saturate(164%)
        contrast(1.075);

    -webkit-backdrop-filter:
        blur(7px)
        saturate(164%)
        contrast(1.075);
}

html.glass-on .home-card,
html.glass-on .icon-button,
html.glass-on .bot-button,
html.glass-on .placeholder-card {
    background:
        radial-gradient(ellipse at -8% -22%,
            rgba(255,255,255,.19) 0%,
            rgba(255,255,255,.05) 36%,
            transparent 59%),
        radial-gradient(ellipse at 112% 122%,
            rgba(var(--accent-rgb), .12) 0%,
            rgba(var(--accent-rgb), .035) 36%,
            transparent 61%),
        linear-gradient(112deg,
            transparent 18%,
            rgba(255,255,255,.028) 36%,
            rgba(var(--accent-rgb), .035) 52%,
            transparent 70%),
        var(--glass-fill);

    backdrop-filter:
        blur(8px)
        saturate(168%)
        contrast(1.085);

    -webkit-backdrop-filter:
        blur(8px)
        saturate(168%)
        contrast(1.085);

    border-color: var(--glass-edge);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 1px 0 0 rgba(255,255,255,.04),
        inset -1px 0 0 rgba(var(--accent-rgb), .045),
        var(--glass-shadow);
}

/* Криволинейный "линзовый" слой на крупных поверхностях */
html.glass-on .home-card::before,
html.glass-on .placeholder-card::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    width: 76%;
    height: 160%;
    left: -28%;
    top: -42%;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at center,
            rgba(255,255,255,.075) 0%,
            rgba(255,255,255,.022) 42%,
            transparent 68%);

    transform:
        rotate(-12deg)
        skewX(-7deg);

    opacity: .95;
}

html.glass-on .home-card > *,
html.glass-on .placeholder-card > * {
    position: relative;
    z-index: 1;
}

/* Панель настроек без стекла остаётся полностью непрозрачной */
html:not(.glass-on) .appearance-panel {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Со стеклом панель получает тот же эффект, но чуть более плотный */
html.glass-on .appearance-panel {
    background:
        radial-gradient(ellipse at -10% -18%,
            rgba(255,255,255,.16),
            rgba(255,255,255,.035) 38%,
            transparent 61%),
        radial-gradient(ellipse at 112% 112%,
            rgba(var(--accent-rgb), .10),
            transparent 55%),
        linear-gradient(108deg,
            transparent 18%,
            rgba(255,255,255,.025) 42%,
            rgba(var(--accent-rgb), .028) 55%,
            transparent 72%),
        var(--glass-fill-strong);

    backdrop-filter:
        blur(9px)
        saturate(164%)
        contrast(1.075);

    -webkit-backdrop-filter:
        blur(9px)
        saturate(164%)
        contrast(1.075);

    border-color: var(--glass-edge);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset -1px 0 0 rgba(var(--accent-rgb), .035),
        0 22px 54px rgba(0,0,0,.14);
}

/* Сам переключатель внутри стеклянного меню не должен теряться */
html.glass-on .glass-settings-toggle {
    background:
        radial-gradient(ellipse at 0% 0%,
            rgba(255,255,255,.08),
            transparent 60%),
        rgba(var(--accent-rgb), .055);

    backdrop-filter: blur(4px) saturate(145%);
    -webkit-backdrop-filter: blur(4px) saturate(145%);
}

/* Элементы шапки с включённым стеклом */
html.glass-on .icon-button,
html.glass-on .bot-button {
    background:
        radial-gradient(ellipse at 0% -20%,
            rgba(255,255,255,.14),
            transparent 60%),
        var(--glass-fill);
}

/* У старой кнопки стекла в шапке больше нет визуальной роли */
.glass-toggle {
    display: none;
}

@media (max-width: 680px) {
    .appearance-panel {
        width: auto;
    }

    .user-name-link {
        max-width: 110px;
    }
}


/* ============================================================
   VINYA UI — преломление (Chromium) + мягкий fallback
   ============================================================ */

/* Крупная плашка оформления в шапке */
.appearance-trigger {
    min-width: 218px;
    height: 46px;
    padding: 6px 10px;

    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 9px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface);
    color: var(--text);

    cursor: pointer;
    text-align: left;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.appearance-trigger:hover {
    border-color: rgba(var(--accent-rgb), .36);
}

.appearance-trigger-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: var(--accent);
    background: var(--accent-soft);
}

.appearance-trigger-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.appearance-trigger-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 1px;
}

.appearance-trigger-copy strong {
    font-size: var(--ui-font-body);
    line-height: 1.15;
}

.appearance-trigger-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--ui-font-small);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appearance-accent-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: var(--accent);

    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), .12);
}

/* Настройки чуть шире, чтобы информация не была зажата */
.appearance-panel {
    width: 390px;
}

/* Убираем прежнюю имитацию блика/линзы */
html.glass-on .home-card::before,
html.glass-on .placeholder-card::before {
    display: none !important;
}

/* ------------------------------------------------------------
   Стекло без настоящего displacement:
   минимум blur, никаких белых бликов поверх поверхности.
   ------------------------------------------------------------ */

html.glass-on .topbar {
    background: var(--glass-fill-strong);

    backdrop-filter:
        blur(4px)
        saturate(152%)
        contrast(1.055);

    -webkit-backdrop-filter:
        blur(4px)
        saturate(152%)
        contrast(1.055);
}

html.glass-on .home-card,
html.glass-on .bot-button,
html.glass-on .placeholder-card {
    background: var(--glass-fill);

    backdrop-filter:
        blur(4px)
        saturate(154%)
        contrast(1.06);

    -webkit-backdrop-filter:
        blur(4px)
        saturate(154%)
        contrast(1.06);

    border-color: var(--glass-edge);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        var(--glass-shadow);
}

html.glass-on .appearance-trigger {
    background: var(--glass-fill);

    backdrop-filter:
        blur(5px)
        saturate(154%)
        contrast(1.06);

    -webkit-backdrop-filter:
        blur(5px)
        saturate(154%)
        contrast(1.06);

    border-color: var(--glass-edge);
}

/* Выпадающее меню намеренно размывается намного сильнее.
   При выключенном стекле старое правило оставляет его непрозрачным. */
html.glass-on .appearance-panel {
    background: var(--glass-fill-strong);

    backdrop-filter:
        blur(22px)
        saturate(148%)
        contrast(1.04);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(148%)
        contrast(1.04);

    border-color: var(--glass-edge);

    box-shadow:
        0 22px 54px rgba(0,0,0,.14);
}

/* ------------------------------------------------------------
   Настоящее преломление через SVG feDisplacementMap.
   Включается JS только для Chromium, где SVG URL-фильтр
   в backdrop-filter реально отрисовывается.
   ------------------------------------------------------------ */

html.glass-on.chromium-refraction .topbar {
    backdrop-filter:
        url(#vinya-refraction)
        blur(3px)
        saturate(158%)
        contrast(1.06);

    -webkit-backdrop-filter:
        url(#vinya-refraction)
        blur(3px)
        saturate(158%)
        contrast(1.06);
}

html.glass-on.chromium-refraction .home-card,
html.glass-on.chromium-refraction .bot-button,
html.glass-on.chromium-refraction .placeholder-card,
html.glass-on.chromium-refraction .appearance-trigger {
    backdrop-filter:
        url(#vinya-refraction)
        blur(3px)
        saturate(160%)
        contrast(1.065);

    -webkit-backdrop-filter:
        url(#vinya-refraction)
        blur(3px)
        saturate(160%)
        contrast(1.065);
}

/* Меню сохраняет сильное размытие, но тоже получает displacement. */
html.glass-on.chromium-refraction .appearance-panel {
    backdrop-filter:
        url(#vinya-refraction-panel)
        blur(20px)
        saturate(150%)
        contrast(1.045);

    -webkit-backdrop-filter:
        url(#vinya-refraction-panel)
        blur(20px)
        saturate(150%)
        contrast(1.045);
}

/* Внутренние элементы меню не получают отдельного стекла:
   иначе они визуально "дробят" размытую панель. */
html.glass-on .glass-settings-toggle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* В выключенном состоянии меню и плашка оформления непрозрачны */
html:not(.glass-on) .appearance-trigger,
html:not(.glass-on) .appearance-panel {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 760px) {
    .appearance-trigger {
        min-width: 168px;
    }

    .appearance-panel {
        width: auto;
    }
}

@media (max-width: 520px) {
    .appearance-trigger {
        min-width: 46px;
        width: 46px;
        padding: 7px;
        grid-template-columns: 1fr;
    }

    .appearance-trigger-copy,
    .appearance-accent-dot {
        display: none;
    }

    .appearance-trigger-icon {
        margin: 0 auto;
    }
}


/* Финальная зачистка прежних декоративных "бликов". */
html.glass-on .home-card:hover {
    background: color-mix(
        in srgb,
        var(--glass-fill) 92%,
        rgba(var(--accent-rgb), .08)
    );
    border-color: rgba(var(--accent-rgb), .36);
}

html.glass-on .glass-settings-toggle {
    background: var(--surface-soft);
}

html.glass-on .glass-settings-toggle[aria-pressed="true"] {
    background: var(--accent-soft);
}

.svg-glass-filters {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
    visibility: hidden;
}


/* ============================================================
   VINYA UI — выпадающее меню оформления
   ============================================================ */

/*
   Важно:
   .appearance-panel находится внутри .topbar.
   Если у .topbar уже включён backdrop-filter, браузер создаёт отдельный
   backdrop-root, и вложенная панель может почти не размывать страницу.
   Пока меню открыто, снимаем фильтр с шапки и отдаём размытие самой панели.
*/
html.glass-on .topbar:has(.appearance-panel:not([hidden])) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Шапка остаётся визуально аккуратной, но больше не мешает панели. */
    background: color-mix(
        in srgb,
        var(--surface) 92%,
        transparent
    ) !important;
}


/* Без Liquid Glass меню полностью непрозрачное. */
html:not(.glass-on) .appearance-panel {
    background: var(--surface) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-color: var(--border) !important;
}


/*
   Liquid Glass для самой панели:
   - высокая плотность поверхности;
   - сильный blur;
   - текст страницы за меню не должен читаться;
   - отдельного белого блика нет.
*/
html.glass-on .appearance-panel,
html.glass-on.chromium-refraction .appearance-panel {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 82%, transparent),
            color-mix(in srgb, var(--surface) 76%, transparent)
        ) !important;

    backdrop-filter:
        blur(52px)
        saturate(165%)
        contrast(1.035) !important;

    -webkit-backdrop-filter:
        blur(52px)
        saturate(165%)
        contrast(1.035) !important;

    border-color:
        color-mix(
            in srgb,
            var(--border) 62%,
            rgba(255, 255, 255, .22)
        ) !important;

    box-shadow:
        0 26px 72px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}


/*
   При открытом меню слегка приглушаем страницу непосредственно за ним.
   Это не затемнение всей страницы: слой находится только под панелью
   и помогает мелкому тексту настроек не смешиваться с карточками.
*/
html.glass-on .appearance-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: inherit;

    background:
        color-mix(
            in srgb,
            var(--surface) 12%,
            transparent
        );

    pointer-events: none;
}


/*
   Внутренние кнопки меню остаются читаемыми и не получают собственный
   backdrop-filter, иначе несколько уровней стекла снова начинают
   конфликтовать друг с другом.
*/
html.glass-on .appearance-panel .theme-grid button,
html.glass-on .appearance-panel .glass-settings-toggle,
html.glass-on .appearance-panel .background-upload,
html.glass-on .appearance-panel .background-action {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* На мобильных сохраняем тот же сильный blur. */
@media (max-width: 680px) {
    html.glass-on .appearance-panel,
    html.glass-on.chromium-refraction .appearance-panel {
        backdrop-filter:
            blur(52px)
            saturate(165%)
            contrast(1.035) !important;

        -webkit-backdrop-filter:
            blur(52px)
            saturate(165%)
            contrast(1.035) !important;
    }
}


/* ============================================================
   Настройки эффектов и направленный свет карточек
   ============================================================ */
.effect-details {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
    overflow: clip;
}
.effect-details[hidden] { display: none !important; }
.effect-details > summary {
    min-height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
    font-size: var(--ui-font-caption);
    font-weight: 760;
    list-style: none;
}
.effect-details > summary::-webkit-details-marker { display: none; }
.effect-details > summary::after { content: "⌄"; color: var(--muted); transition: transform .16s ease; }
.effect-details[open] > summary::after { transform: rotate(180deg); }
.effect-details-body { padding: 0 10px 10px; display: grid; gap: 10px; }
.card-light-orb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), var(--accent) 38%, rgba(var(--accent-rgb),.18) 72%);
    box-shadow: 0 0 20px rgba(var(--accent-rgb),.45);
}

@media (hover:hover) and (pointer:fine) {
    html.card-light-on :is(.home-card,.library-book-card,.admin-action,.admin-stat,.course-card,.subject-card) {
        position: relative;
        isolation: isolate;
        transform-style: preserve-3d;
        transform-origin: center center;
        will-change: transform;
        transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
    }

    /* The spotlight uses ::after on purpose: ::before is already used by the
       Liquid Glass layer on some cards.  Keeping it above the card surface
       makes the accent light visible inside the card instead of behind it. */
    html.card-light-on :is(.home-card,.library-book-card,.admin-action,.admin-stat,.course-card,.subject-card)::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: 1;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(
            circle var(--vinya-card-light-size, 300px) at var(--vinya-card-x, 50%) var(--vinya-card-y, 50%),
            rgba(var(--accent-rgb), calc(.28 * var(--vinya-card-light-intensity, .70))) 0%,
            rgba(var(--accent-rgb), calc(.15 * var(--vinya-card-light-intensity, .70))) 30%,
            rgba(var(--accent-rgb), calc(.055 * var(--vinya-card-light-intensity, .70))) 56%,
            transparent 78%
        );
        box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0);
        transition: opacity .12s ease, box-shadow .16s ease;
    }

    html.card-light-on :is(.home-card,.library-book-card,.admin-action,.admin-stat,.course-card,.subject-card) > * {
        position: relative;
        z-index: 2;
    }

    html.card-light-on :is(.home-card,.library-book-card,.admin-action,.admin-stat,.course-card,.subject-card).vinya-card-hovering {
        transform: perspective(900px) rotateX(var(--vinya-card-rx,0deg)) rotateY(var(--vinya-card-ry,0deg)) translateY(-3px) scale(1.012);
        border-color: rgba(var(--accent-rgb), calc(.68 * var(--vinya-card-light-intensity,.7))) !important;
        box-shadow:
            0 18px 48px rgba(0,0,0,.18),
            0 0 12px rgba(var(--accent-rgb), calc(.24 * var(--vinya-card-light-intensity,.7))),
            0 0 34px rgba(var(--accent-rgb), calc(.16 * var(--vinya-card-light-intensity,.7)));
    }

    html.card-light-on :is(.home-card,.library-book-card,.admin-action,.admin-stat,.course-card,.subject-card).vinya-card-hovering::after {
        opacity: 1;
        box-shadow:
            inset 0 0 0 1px rgba(var(--accent-rgb), calc(.78 * var(--vinya-card-light-intensity,.7))),
            inset 0 0 18px rgba(var(--accent-rgb), calc(.065 * var(--vinya-card-light-intensity,.7))),
            0 0 10px rgba(var(--accent-rgb), calc(.28 * var(--vinya-card-light-intensity,.7)));
    }
}

@media (hover:none), (pointer:coarse), (max-width:800px) {
    .card-light-toggle,
    .card-light-settings { display: none !important; }
}

.chat-nav-badge,
.home-chat-badge,
.home-card-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: var(--ui-font-small);
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 5px 16px rgba(var(--accent-rgb), .24);
}
.home-card-unread {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
}
.nav-chat-link { gap: 6px; }
.mobile-site-nav-links a { position: relative; }
.mobile-site-nav-links .chat-nav-badge { margin-left: auto; }

/* ============================================================
   v5 — default animated site background + borderless home hero
   ============================================================ */
body::before {
    z-index: -2;
}

.site-background-media {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .34s ease;
    background: #080b14;
}

.site-background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.012);
    filter: saturate(.92) contrast(.98) brightness(.82);
    transition: opacity .42s ease;
}

.site-background-video.is-active {
    opacity: 1;
}


.site-background-light-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.006);
    transition: opacity .34s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.site-background-light-image.is-active {
    opacity: 1;
}

.site-background-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,7,16,.26), rgba(4,7,16,.40)),
        radial-gradient(circle at 50% 40%, transparent 0 32%, rgba(3,6,14,.18) 72%, rgba(3,6,14,.38) 100%);
}

html.background-video-playing:not(.has-custom-background) .site-background-media {
    opacity: var(--default-background-secondary-opacity);
}

html.background-video-playing:not(.has-custom-background) body.page-home .site-background-media {
    opacity: var(--default-background-opacity);
}


html.background-light-image-playing:not(.has-custom-background) .site-background-media {
    opacity: var(--default-background-secondary-opacity);
}

html.background-light-image-playing:not(.has-custom-background) body.page-home .site-background-media {
    opacity: var(--default-background-opacity);
}

/* Статичная home1.webp используется только при реальном запрете autoplay.
   Она подчиняется той же настройке непрозрачности, что и стандартное видео. */
html.background-autoplay-blocked:not(.has-custom-background) body::before {
    opacity: var(--default-background-secondary-opacity);
}

html.background-autoplay-blocked:not(.has-custom-background) body.page-home::before {
    opacity: var(--default-background-opacity);
}

html.has-custom-background body::before {
    opacity: var(--background-image-opacity);
}

html.background-video-playing:not(.has-custom-background) body::before,
html.background-light-image-playing:not(.has-custom-background) body::before {
    opacity: 0;
}

/* Personal background always wins and prevents the default videos from loading. */
html.has-custom-background .site-background-media {
    display: none;
}

/* The home hero is content over the common page background, not a second panel. */
.home-container {
    margin-top: 0;
}

.home-hero {
    min-height: clamp(540px, 72svh, 760px);
    margin: 0 0 28px;
    padding: clamp(44px, 7vw, 86px) 20px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    isolation: auto;
}

.home-hero::after {
    display: none;
}

.home-hero-content {
    width: min(920px, 100%);
    text-align: center;
    text-shadow: 0 3px 22px rgba(0,0,0,.50);
}

.home-hero .hero-kicker {
    background: rgba(7,11,23,.28);
    border-color: color-mix(in srgb, var(--accent) 70%, rgba(255,255,255,.3));
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

.home-hero h1 {
    font-size: clamp(42px, 5.8vw, 78px);
    line-height: .98;
    max-width: 980px;
}

.home-hero p {
    font-size: var(--ui-font-lead);
    max-width: 720px;
}

.home-hero-actions {
    margin-top: 25px;
}

@media (max-width: 680px) {
    .site-background-video {
        object-position: center center;
    }

    html:not(.has-custom-background) body.page-home::before,
    html:not(.has-custom-background) body::before {
        background-position: center center;
    }

    .home-container {
        width: min(var(--max-width), calc(100% - 22px));
    }

    .home-hero {
        min-height: min(720px, calc(100svh - 94px));
        margin: 0 0 18px;
        padding: 36px 8px 44px;
        border-radius: 0;
    }

    .home-hero h1 {
        font-size: clamp(38px, 12vw, 56px);
        letter-spacing: -1.8px;
    }

    .home-hero p {
        font-size: var(--ui-font-body);
    }
}

/* ============================================================
   v7 — boot preloader, zero unread badge fix, theme fade
   ============================================================ */

/* Счётчик с нулём не должен всплывать из-за display:inline-flex. */
.chat-nav-badge[hidden],
.home-chat-badge[hidden],
.home-card-unread[hidden] {
    display: none !important;
}


/* После первого отрисованного фонового кадра не показываем полноэкранный
   loader на каждом переходе. Видео само быстро восстанавливается из HTTP/cache. */
html.vinya-background-warm .site-preloader {
    display: none !important;
}

.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .13), transparent 32rem),
        linear-gradient(145deg, #070a12, #0b1020 58%, #060910);
    color: #f7f9ff;
    opacity: 1;
    visibility: visible;
    transition: opacity .42s cubic-bezier(.2,.75,.2,1), visibility .42s step-end;
}

.site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-preloader-grid {
    position: absolute;
    inset: -15%;
    opacity: .32;
    background-image:
        linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px);
    background-size: 52px 52px;
    transform: perspective(650px) rotateX(63deg) translateY(34%);
    transform-origin: center bottom;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 88%, transparent 100%);
    animation: vinya-loader-grid 7s linear infinite;
}

.site-preloader-core {
    position: relative;
    z-index: 2;
    width: min(360px, calc(100vw - 54px));
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
}

.site-preloader-mark {
    position: relative;
    width: clamp(154px, 20vw, 184px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), .30));
}

.site-preloader-mark::before,
.site-preloader-mark::after {
    content: "";
    position: absolute;
    inset: 25px;
    border: 1px solid rgba(var(--accent-rgb), .48);
    border-radius: 30px;
    transform: rotate(45deg);
    box-shadow: inset 0 0 22px rgba(var(--accent-rgb), .11), 0 0 24px rgba(var(--accent-rgb), .12);
}

.site-preloader-mark::after {
    inset: 39px;
    border-color: rgba(255,255,255,.14);
    animation: vinya-loader-pulse 1.75s ease-in-out infinite;
}

.site-preloader-orbit {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(var(--accent-rgb), .92);
    border-right-color: rgba(var(--accent-rgb), .22);
    animation: vinya-loader-spin 1.4s linear infinite;
}

.site-preloader-orbit.orbit-b {
    inset: 14px;
    border-top-color: rgba(255,255,255,.50);
    border-right-color: transparent;
    animation-duration: 2.15s;
    animation-direction: reverse;
}

.site-preloader-orbit.orbit-c {
    inset: 0;
    border-top-color: transparent;
    border-bottom-color: rgba(var(--accent-rgb), .30);
    animation-duration: 3.2s;
}

.site-preloader-avatar {
    position: relative;
    z-index: 4;
    display: block;
    width: 68%;
    max-height: 72%;
    object-fit: contain;
    filter: drop-shadow(0 9px 20px rgba(0,0,0,.46)) drop-shadow(0 0 12px rgba(255,255,255,.10));
    user-select: none;
    -webkit-user-drag: none;
}

.site-preloader-percent {
    min-height: 1.1em;
    color: rgba(247,249,255,.92);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

.site-preloader-progress {
    width: min(270px, 76vw);
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.site-preloader-progress span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .58), var(--accent), rgba(255,255,255,.88));
    box-shadow: 0 0 16px rgba(var(--accent-rgb), .7);
    transition: width .22s ease;
}

@keyframes vinya-loader-spin { to { transform: rotate(360deg); } }
@keyframes vinya-loader-pulse { 50% { transform: rotate(45deg) scale(.91); opacity: .48; } }
@keyframes vinya-loader-grid { to { background-position: 0 52px, 52px 0; } }

@media (prefers-reduced-motion: reduce) {
    .site-preloader-grid,
    .site-preloader-orbit,
    .site-preloader-mark::after {
        animation: none !important;
    }
}

/* При стандартном видеофоне контент постепенно приходит к обычному цвету
   текущей темы. Личный фон остаётся нетронутым; OLED тоже без осветления. */
.site-background-theme-fade {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: var(--bg);
    opacity: 0;
    transition: opacity .08s linear, background-color .25s ease;
}

html:not(.has-custom-background):not([data-theme="oled"]) .site-background-theme-fade {
    opacity: var(--vinya-default-bg-fade, 0);
}

html.has-custom-background .site-background-theme-fade,
html[data-theme="oled"] .site-background-theme-fade {
    opacity: 0 !important;
}

/* v15 — account video / animated backgrounds */
.site-custom-background-media {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: #080b14;
    transition: opacity .28s ease;
}
.site-custom-background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.82) contrast(.94);
}
html.has-custom-video-background .site-custom-background-media {
    opacity: var(--background-image-opacity);
}
html.has-custom-video-background body::before {
    opacity: 0 !important;
    background-image: none !important;
}
html.has-custom-background:not(.has-custom-video-background) .site-custom-background-media {
    opacity: 0;
}


/* ============================================================
   v16 — compact account control + unclipped home card spotlight
   ============================================================ */

/* Account-specific identity no longer consumes space in the desktop nav row.
   Profile access stays available as a compact icon beside global actions. */
.desktop-profile-button {
    flex: 0 0 38px;
    text-decoration: none;
}

@media (max-width: 820px) {
    .desktop-profile-button {
        display: none !important;
    }
}

/* Keep the original restrained card light. The previous v16 override made
   the radial layer escape the rounded card and turned it into a large neon
   rectangle. We only add a few pixels of breathing room around each home grid
   so the normal outer shadow is not cut off on the first/last card. */
@media (hover:hover) and (pointer:fine) {
    .home-grid {
        padding: 9px;
        margin: -9px;
    }

    html.card-light-on .home-card {
        overflow: hidden;
    }

    html.card-light-on .home-card::after {
        inset: -1px;
        border-radius: inherit;
        background: radial-gradient(
            circle var(--vinya-card-light-size, 300px) at var(--vinya-card-x, 50%) var(--vinya-card-y, 50%),
            rgba(var(--accent-rgb), calc(.28 * var(--vinya-card-light-intensity, .70))) 0%,
            rgba(var(--accent-rgb), calc(.15 * var(--vinya-card-light-intensity, .70))) 30%,
            rgba(var(--accent-rgb), calc(.055 * var(--vinya-card-light-intensity, .70))) 56%,
            transparent 78%
        );
    }

    html.card-light-on .home-card.vinya-card-hovering {
        z-index: 2;
        box-shadow:
            0 18px 48px rgba(0,0,0,.18),
            0 0 12px rgba(var(--accent-rgb), calc(.24 * var(--vinya-card-light-intensity,.7))),
            0 0 34px rgba(var(--accent-rgb), calc(.16 * var(--vinya-card-light-intensity,.7)));
    }
}


/* v18 — interactive Liquid Glass hover.  Navigation pills and secondary
   controls should use the same user-controlled panel opacity as the surfaces
   around them instead of switching to an opaque theme background on hover. */
@media (hover:hover) and (pointer:fine) {
    html.glass-on :is(
        .library-nav-button,
        .library-filter-button,
        .library-search-clear,
        .profile-tab-button,
        .legal-tabs a,
        .legal-reader-nav button,
        .notes-reference-tabs a,
        .drive-mode-tabs button,
        .drive-secondary,
        .drive-icon-button,
        .drive-breadcrumbs button,
        .drive-popover button,
        .tasks-modes button,
        .tasks-lists button,
        .tasks-list-menu,
        .tasks-secondary,
        .chat-info-tabs button,
        .chat-segmented-choice button
    ):not(:disabled):not(.active):not([aria-current="page"]):hover {
        background:
            radial-gradient(ellipse at 18% -35%,rgba(255,255,255,.10),transparent 58%),
            color-mix(in srgb,var(--surface) var(--vinya-panel-opacity-strong),transparent)!important;
        border-color:color-mix(in srgb,var(--glass-edge) 72%,rgba(var(--accent-rgb),.34))!important;
        color:var(--text)!important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 7px 20px rgba(0,0,0,.08)!important;
        backdrop-filter:blur(11px) saturate(158%) contrast(1.04);
        -webkit-backdrop-filter:blur(11px) saturate(158%) contrast(1.04);
    }

    html.glass-on.chromium-refraction :is(
        .library-nav-button,
        .profile-tab-button,
        .legal-tabs a,
        .legal-reader-nav button,
        .notes-reference-tabs a,
        .drive-mode-tabs button,
        .tasks-modes button,
        .tasks-lists button,
        .chat-info-tabs button,
        .chat-segmented-choice button
    ):not(:disabled):not(.active):not([aria-current="page"]):hover {
        backdrop-filter:url(#vinya-refraction) blur(4px) saturate(160%) contrast(1.05);
        -webkit-backdrop-filter:url(#vinya-refraction) blur(4px) saturate(160%) contrast(1.05);
    }
}

/* v19 — unified switch indicator colors across the site.
   Off = white, on = current accent. */
.glass-orb,
.glass-settings-toggle .glass-orb,
.card-light-toggle .card-light-orb {
    background: #fff !important;
    border-color: color-mix(in srgb, #fff 72%, var(--border)) !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.18) !important;
}
.glass-toggle[aria-pressed="true"] .glass-orb,
.glass-settings-toggle[aria-pressed="true"] .glass-orb,
.card-light-toggle[aria-pressed="true"] .card-light-orb {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13), 0 0 12px rgba(var(--accent-rgb), .18) !important;
}
.profile-visibility-track::after {
    background: #fff !important;
}
.profile-visibility-switch input:checked + .profile-visibility-track::after {
    background: var(--accent) !important;
}

/* Telegram Mini App integration.  Telegram's own script exposes safe-area
   variables; Vinya keeps its theme but respects the webview viewport/insets. */
html.telegram-miniapp body {
    min-height: var(--vinya-tg-stable-height, var(--tg-viewport-stable-height, 100vh));
    padding-bottom: max(
        env(safe-area-inset-bottom, 0px),
        var(--tg-content-safe-area-inset-bottom, var(--tg-safe-area-inset-bottom, 0px))
    );
}

html.telegram-miniapp .site-footer {
    padding-bottom: max(
        env(safe-area-inset-bottom, 0px),
        var(--tg-content-safe-area-inset-bottom, var(--tg-safe-area-inset-bottom, 0px))
    );
}


/* v20 — keep fixed backgrounds locked to the visual viewport when pages gain/lose a scrollbar. */
html {
    scrollbar-gutter: stable;
}
body::before,
.site-background-media,
.site-custom-background-media {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100vh;
}

/* Active state for the compact profile button in the top navigation. */
.desktop-profile-button.active {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), .52);
    background: rgba(var(--accent-rgb), .10);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .08), 0 0 22px rgba(var(--accent-rgb), .10);
}

/* AkiraAI card on the home page. */
.home-card[href="/akira-ai"]{border-color:color-mix(in srgb,#ffd600 28%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,#08202a),color-mix(in srgb,var(--surface) 94%,#231223))}.home-card[href="/akira-ai"] .card-icon,.home-card[href="/akira-ai"] .card-arrow{color:#ffd600}

/* AkiraAI development badge on the main menu card. */
.home-card .card-title-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.home-card .card-title-row>strong{min-width:0}.home-card-badge{display:inline-flex;align-items:center;min-height:20px;padding:3px 8px;border:1px solid rgba(255,214,0,.38);border-radius:999px;background:rgba(255,214,0,.09);color:#ffd600;font-size: var(--ui-font-small);font-weight:800;line-height:1;white-space:nowrap}.home-card[href="/akira-ai"] .home-card-badge{box-shadow:0 0 16px rgba(255,214,0,.08)}@media(max-width:640px){.home-card-badge{font-size: var(--ui-font-caption);padding:3px 7px}}


/* v24 — top account actions: hover is visible, only the current page is active. */
.desktop-profile-button,
.bot-button {
    transition:
        transform .15s ease,
        color .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

/* Telegram Bot is an external action, not the current Vinya section. */
.bot-button {
    color: var(--text);
}

.desktop-profile-button.active,
html.glass-on .desktop-profile-button.active {
    color: var(--accent) !important;
    border-color: rgba(var(--accent-rgb), .52) !important;
    background: rgba(var(--accent-rgb), .10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(var(--accent-rgb), .08),
        0 0 22px rgba(var(--accent-rgb), .10) !important;
}

@media (hover:hover) and (pointer:fine) {
    .desktop-profile-button:not(.active):hover,
    .bot-button:hover {
        transform: translateY(-1px);
        color: var(--accent);
        border-color: rgba(var(--accent-rgb), .46);
        background: rgba(var(--accent-rgb), .09);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.055),
            0 8px 22px rgba(0,0,0,.10),
            0 0 16px rgba(var(--accent-rgb), .07);
    }

    html.glass-on .desktop-profile-button:not(.active):hover,
    html.glass-on .bot-button:hover {
        color: var(--accent) !important;
        border-color: rgba(var(--accent-rgb), .34) !important;
        background:
            radial-gradient(ellipse at 18% -35%, rgba(255,255,255,.10), transparent 58%),
            color-mix(in srgb, var(--surface) var(--vinya-panel-opacity-strong), rgba(var(--accent-rgb), .08)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 8px 22px rgba(0,0,0,.10),
            0 0 16px rgba(var(--accent-rgb), .07) !important;
    }

    .desktop-profile-button.active:hover,
    html.glass-on .desktop-profile-button.active:hover {
        transform: translateY(-1px);
        border-color: rgba(var(--accent-rgb), .68) !important;
        background: rgba(var(--accent-rgb), .14) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 8px 22px rgba(0,0,0,.10),
            0 0 25px rgba(var(--accent-rgb), .16) !important;
    }
}

.desktop-profile-button:active,
.bot-button:active {
    transform: translateY(0) scale(.97);
}

/* ============================================================
   v25 — light-theme readability over animated/custom backgrounds
   ------------------------------------------------------------
   Light themes used to inherit the same translucent glass recipe as dark
   themes.  Over a detailed wallpaper that makes borders disappear and turns
   secondary text into low-contrast grey.  Keep the wallpaper visible, but
   give light themes darker typography, a real edge and a brighter/less noisy
   backdrop under the most important glass surfaces.
   ============================================================ */

:is(html[data-theme="light"], html[data-theme="mist"]) {
    --text: #162033;
    --muted: #526176;
    --border: rgba(31, 45, 68, .17);
    --shadow: 0 15px 38px rgba(31, 46, 78, .13);
    --glass-fill: rgba(243, 246, 249, .72);
    --glass-fill-strong: rgba(243, 246, 249, .86);
    --glass-edge: rgba(36, 52, 77, .18);
    --glass-shadow: 0 16px 38px rgba(31, 46, 78, .14);
}

html[data-theme="warm"] {
    --text: #2b2119;
    --muted: #69594b;
    --border: rgba(76, 55, 40, .17);
    --shadow: 0 15px 36px rgba(83, 59, 39, .13);
    --glass-fill: rgba(251, 246, 239, .73);
    --glass-fill-strong: rgba(251, 246, 239, .87);
    --glass-edge: rgba(79, 58, 41, .17);
    --glass-shadow: 0 16px 38px rgba(72, 49, 31, .14);
}

/* System theme follows the OS.  Only apply the light recipe when the OS is
   actually in light mode; system-dark keeps the existing dark palette. */
@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        --text: #162033;
        --muted: #526176;
        --border: rgba(31, 45, 68, .17);
        --shadow: 0 15px 38px rgba(31, 46, 78, .13);
        --glass-fill: rgba(243, 246, 249, .72);
        --glass-fill-strong: rgba(243, 246, 249, .86);
        --glass-edge: rgba(36, 52, 77, .18);
        --glass-shadow: 0 16px 38px rgba(31, 46, 78, .14);
    }
}

/* Homepage cards need their own treatment because they are intentionally more
   transparent than normal panels and sit directly over the animated scene. */
:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]).glass-on .home-card {
    background:
        radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.24), transparent 44%),
        radial-gradient(ellipse at 112% 120%, rgba(var(--accent-rgb), .065), transparent 50%),
        var(--glass-fill) !important;
    border-color: var(--glass-edge) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 16px 38px rgba(26, 39, 62, .14) !important;
    backdrop-filter: blur(20px) saturate(112%) brightness(1.12) contrast(.93) !important;
    -webkit-backdrop-filter: blur(20px) saturate(112%) brightness(1.12) contrast(.93) !important;
}

:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]).glass-on .home-card:hover {
    background:
        radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.29), transparent 44%),
        radial-gradient(ellipse at 112% 120%, rgba(var(--accent-rgb), .105), transparent 50%),
        var(--glass-fill) !important;
    border-color: rgba(var(--accent-rgb), .46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        0 20px 46px rgba(26, 39, 62, .17),
        0 0 0 1px rgba(var(--accent-rgb), .07) !important;
}

:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]) .home-card .card-copy strong {
    color: var(--text);
    font-weight: 820;
}

:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]) .home-card .card-copy small,
:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]) .home-card .card-arrow {
    color: color-mix(in srgb, var(--text) 68%, var(--muted));
}

:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]) .home-section > h2 {
    color: var(--text);
    font-weight: 850;
    text-shadow:
        0 1px 2px rgba(255,255,255,.95),
        0 0 12px rgba(255,255,255,.78);
}

:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]).glass-on .topbar {
    background:
        radial-gradient(circle at 18% -40%, rgba(255,255,255,.28), transparent 42%),
        var(--glass-fill-strong) !important;
    border-bottom-color: var(--glass-edge) !important;
    box-shadow: 0 8px 24px rgba(30, 43, 64, .09);
    backdrop-filter: blur(18px) saturate(112%) brightness(1.06) contrast(.96) !important;
    -webkit-backdrop-filter: blur(18px) saturate(112%) brightness(1.06) contrast(.96) !important;
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"].glass-on .home-card {
        background:
            radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.24), transparent 44%),
            radial-gradient(ellipse at 112% 120%, rgba(var(--accent-rgb), .065), transparent 50%),
            var(--glass-fill) !important;
        border-color: var(--glass-edge) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 16px 38px rgba(26,39,62,.14) !important;
        backdrop-filter: blur(20px) saturate(112%) brightness(1.12) contrast(.93) !important;
        -webkit-backdrop-filter: blur(20px) saturate(112%) brightness(1.12) contrast(.93) !important;
    }
    html[data-theme="system"] .home-card .card-copy strong { color: var(--text); font-weight: 820; }
    html[data-theme="system"] .home-card .card-copy small,
    html[data-theme="system"] .home-card .card-arrow { color: color-mix(in srgb, var(--text) 68%, var(--muted)); }
    html[data-theme="system"] .home-section > h2 {
        color: var(--text);
        font-weight: 850;
        text-shadow: 0 1px 2px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.78);
    }
    html[data-theme="system"].glass-on .topbar {
        background: radial-gradient(circle at 18% -40%, rgba(255,255,255,.28), transparent 42%), var(--glass-fill-strong) !important;
        border-bottom-color: var(--glass-edge) !important;
        box-shadow: 0 8px 24px rgba(30,43,64,.09);
        backdrop-filter: blur(18px) saturate(112%) brightness(1.06) contrast(.96) !important;
        -webkit-backdrop-filter: blur(18px) saturate(112%) brightness(1.06) contrast(.96) !important;
    }
}

/* Keep AkiraAI visually distinct after the light-theme readability pass. */
:is(html[data-theme="light"], html[data-theme="mist"], html[data-theme="warm"]).glass-on .home-card[href="/akira-ai"] {
    background:
        radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.24), transparent 44%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--glass-fill) 94%, rgba(0,219,255,.16)),
            color-mix(in srgb, var(--glass-fill) 94%, rgba(255,214,0,.13))) !important;
    border-color: color-mix(in srgb, #d7b800 38%, var(--glass-edge)) !important;
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"].glass-on .home-card[href="/akira-ai"] {
        background:
            radial-gradient(ellipse at 8% -18%, rgba(255,255,255,.24), transparent 44%),
            linear-gradient(135deg,
                color-mix(in srgb, var(--glass-fill) 94%, rgba(0,219,255,.16)),
                color-mix(in srgb, var(--glass-fill) 94%, rgba(255,214,0,.13))) !important;
        border-color: color-mix(in srgb, #d7b800 38%, var(--glass-edge)) !important;
    }
}


/* v26 — separate default media for light and dark themes. */
html.uses-default-light-background:not(.has-custom-background) .site-background-media {
    background: #edf3f8;
}

html.uses-default-light-background:not(.has-custom-background) .site-background-shade {
    background:
        linear-gradient(180deg, rgba(250,252,255,.08), rgba(245,249,253,.14)),
        radial-gradient(circle at 50% 42%, transparent 0 40%, rgba(237,244,250,.08) 78%, rgba(230,239,247,.14) 100%);
}

html.uses-default-dark-background:not(.has-custom-background) .site-background-shade {
    background:
        linear-gradient(180deg, rgba(4,7,16,.26), rgba(4,7,16,.40)),
        radial-gradient(circle at 50% 40%, transparent 0 32%, rgba(3,6,14,.18) 72%, rgba(3,6,14,.38) 100%);
}

/* Notification panel: never render the empty placeholder together with cards. */
.notification-empty[hidden] {
    display: none !important;
}

/* Akira uses the character art instead of the old robot glyph. */
.card-icon.card-icon-akira{overflow:hidden;padding:0;background:color-mix(in srgb,var(--surface-soft) 82%,transparent)}
.card-icon.card-icon-akira img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 26%;border-radius:inherit}

.card-icon.card-icon-vertex{overflow:hidden;padding:7px;background:color-mix(in srgb,var(--surface-soft) 82%,#281347 18%)}
.card-icon.card-icon-vertex img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(126,74,255,.24))}