*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before,
:after {
    --tw-content: ""
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: var(--kg-text-secondary)
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: var(--kg-text-secondary)
}

button,
[role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none !important;
}

:root {


    --background: 203 20% 6%;
    --foreground: 200 15% 92%;

    --card: 0 0% 6%;
    --card-foreground: 200 15% 92%;

    --popover: 0 0% 6%;
    --popover-foreground: 200 15% 92%;

    --primary: 177 100% 50%;
    --primary-foreground: 0 0% 0%;

    --secondary: 265 70% 63%;
    --secondary-foreground: 200 15% 92%;

    --muted: 200 10% 25%;
    --muted-foreground: 200 10% 60%;

    --accent: 31 100% 64%;
    --accent-foreground: 0 0% 0%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 200 15% 92%;

    --border: 200 10% 12%;
    --input: 200 10% 12%;
    --ring: 177 100% 50%;

    --radius: var(--kg-radius-card);

    --glass-bg: 0 0% 100% / 0.06;
    --glass-border: 0 0% 100% / 0.16;
    --glass-border-strong: 0 0% 100% / 0.28;

    --gradient-cyan: 177 100% 50%;
    --gradient-purple: 265 70% 63%;
    --gradient-orange: 31 100% 64%;
    --gradient-green: 152 100% 63%;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: var(--kg-text);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-weight: 700;
    margin: 0;
}

.glass-panel {
    background-color: var(--kg-wash-a0p06);
    border: 1px solid var(--kg-border-strong);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
}

.glass-panel-strong {
    background-color: var(--kg-wash-3);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(64px);
    -webkit-backdrop-filter: blur(64px);
}

.page-background {
    position: fixed;
    inset: 0;
    z-index: -20;
    overflow: hidden;
}

.gradient-bg {
    position: absolute;
    inset: -10%;
    filter: blur(70px) saturate(1.1);
}

.gradient-mesh {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(1200px 700px at 68% 32%, rgba(255, 0, 80, 0.2), transparent 60%),
            radial-gradient(1200px 800px at 28% 38%, rgba(0, 120, 255, 0.25), transparent 62%),
            radial-gradient(1000px 600px at 50% 55%, rgba(0, 255, 180, 0.2), transparent 58%),
            radial-gradient(900px 500px at 72% 68%, rgba(138, 92, 255, 0.2), transparent 60%);
}

.gradient-mesh-grey {
    background:
            radial-gradient(1200px 700px at 20% 50%, rgba(160, 170, 190, 0.15), transparent 65%),
            radial-gradient(1000px 700px at 80% 40%, rgba(110, 130, 150, 0.12), transparent 60%),
            radial-gradient(1000px 700px at 50% 70%, rgba(200, 220, 230, 0.08), transparent 55%);
}

.radial-overlay, #menu-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(at center, transparent, hsl(203 20% 6% / 35%), hsl(203 20% 6% / 90%));
    pointer-events: none;
    z-index: -10;
}

#menu-overlay {
    opacity: 0;
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

@keyframes meshMove {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-18px, -14px) scale(1.03); }
    50% { transform: translate(16px, 10px) scale(0.98); }
    100% { transform: translate(-8px, 6px) scale(1.01); }
}

.bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-stops));
}

.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--kg-shadow-black-a0p3);
}

.container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background-color: var(--kg-wash-a0p2);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--kg-border-emphasis);
}

@keyframes shimmer {
    from { background-position: -200% 0; }
    to { background-position: 200% 0; }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scan-pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scaleY(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

@keyframes glitch-1 {
    0%, 100% { opacity: 0.7; transform: translateX(-2px); }
    33% { opacity: 0.9; transform: translateX(0px); }
    66% { opacity: 0.5; transform: translateX(-3px); }
}

@keyframes glitch-2 {
    0%, 100% { opacity: 0.6; transform: translateX(2px); }
    33% { opacity: 0.8; transform: translateX(3px); }
    66% { opacity: 0.4; transform: translateX(0px); }
}

@keyframes glitch-3 {
    0%, 100% { opacity: 0.8; transform: translateX(0px); }
    33% { opacity: 0.5; transform: translateX(1px); }
    66% { opacity: 1; transform: translateX(-1px); }
}

@keyframes data-flow {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 120%));
        opacity: 0;
    }
}

@keyframes data-flow-up {
    0% {
        transform: translateY(calc(100vh + 120%));
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-120%);
        opacity: 0;
    }
}

@keyframes data-flow-slow {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(calc(100vh + 100%));
        opacity: 0;
    }
}

@keyframes data-flow-slow-up {
    0% {
        transform: translateY(calc(100vh + 100%));
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes accordion-down {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: var(--radix-accordion-content-height);
        opacity: 1;
    }
}

@keyframes accordion-up {
    from {
        height: var(--radix-accordion-content-height);
        opacity: 1;
    }
    to {
        height: 0;
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-shimmer {
    animation: shimmer 3s linear infinite;
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

.animate-scan-pulse {
    animation: scan-pulse 2s ease-in-out infinite;
}

.animate-glitch-1 {
    animation: glitch-1 3s ease-in-out infinite;
}

.animate-glitch-2 {
    animation: glitch-2 2.5s ease-in-out infinite;
}

.animate-glitch-3 {
    animation: glitch-3 3.5s ease-in-out infinite;
}

.animate-data-flow {
    animation: data-flow 3s ease-in-out infinite;
}

.animate-data-flow-up {
    animation: data-flow-up 3s ease-in-out infinite;
}

.animate-data-flow-slow {
    animation: data-flow-slow 4s ease-in-out infinite;
}

.animate-data-flow-slow-up {
    animation: data-flow-slow-up 4s ease-in-out infinite;
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

.animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
}

.text-foreground { color: var(--kg-text); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-accent { color: hsl(var(--accent)); }
.text-destructive { color: hsl(var(--destructive)); }

.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-muted { background-color: hsl(var(--muted)); }

.rounded-lg { border-radius: var(--radius); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }
.rounded-sm { border-radius: calc(var(--radius) - 4px); }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--kg-radius-button);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    outline: none;
    border: none;
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn-default {
    height: 2.5rem;
    padding: 0.5rem 1rem;
}

.btn-sm {
    height: 2.25rem;
    padding: 0.5rem 0.75rem;
}

.btn-lg {
    height: 2.75rem;
    padding: 0.5rem 2rem;
}

.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.btn-secondary {
    background-color: hsl(var(--secondary));
    color: var(--kg-text);
}

.btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

.btn-outline {
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.btn-ghost:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.card {
    border-radius: var(--kg-radius-card);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: var(--kg-text);
    box-shadow: 0 1px 3px 0 var(--kg-shadow-black-a0p1);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
}

.card-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.card-content {
    padding: 1.5rem;
    padding-top: 0;
}

.card-footer {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    padding-top: 0;
}

.input {
    display: flex;
    height: 2.5rem;
    width: 100%;
    border-radius: var(--kg-radius-field);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s;
    outline: none;
}

.input:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.textarea {
    display: flex;
    min-height: 5rem;
    width: 100%;
    border-radius: var(--kg-radius-field);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s;
    outline: none;
}

.textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.header-main {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(10,10,10,0.7), rgba(10,10,10,0.45));
    box-shadow: 0 8px 40px var(--kg-shadow-black-a0p35);
}

.header-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--kg-border-strong);
    z-index: 101;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.logo-primary {
    color: var(--kg-logo-primary);
}

.logo-secondary {
    color: var(--kg-logo-secondary);
}

.nav-desktop {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }

    .mobile-menu-btn {
        display: none;
    }
}

.nav-link {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgba(229, 231, 235, 0.8);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
    color: var(--kg-text);
}

.mobile-menu-btn {
    display: block;
    padding: 0.5rem;
    color: var(--kg-text);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none;
    }
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus,
.mobile-menu-btn:active {
    color: var(--kg-text);
}

.nav-mobile {
    padding-bottom: 1rem;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    animation: fade-in 0.3s ease-out;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100%);
    z-index: 99;
    background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(10,10,10,0.9));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1rem;
    border-bottom: 1px solid var(--kg-border-strong);
}

.nav-mobile-link {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--kg-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-link:hover {
    background-color: var(--kg-wash-3);
    border-color: rgba(255, 255, 255, 0.28);
}

/* Cabinet auth actions remain Joomla menu items; these classes only adapt their desktop presentation. */
.header-inner > .kg-auth-link {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    min-height: 2.25rem;
    padding: 0 .75rem;
    border: 1px solid rgba(168, 198, 205, .34);
    border-radius: var(--kg-radius-button);
    color: rgba(235, 244, 246, .92);
    background: rgba(7, 16, 19, .72);
    font-family: 'Montserrat', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.header-inner > .kg-auth-link:hover {
    color: var(--kg-brand-cyan);
    border-color: rgb(var(--kg-brand-cyan-rgb) / .72);
    background: rgb(var(--kg-brand-cyan-rgb) / .09);
}

.header-inner > .kg-auth-link:focus-visible {
    outline: 2px solid var(--kg-brand-cyan);
    outline-offset: 3px;
    color: var(--kg-brand-cyan);
    border-color: rgb(var(--kg-brand-cyan-rgb) / .72);
}

.header-inner > .kg-auth-link:active {
    color: var(--kg-brand-cyan);
    background: rgb(var(--kg-brand-cyan-rgb) / .16);
    transform: translateY(1px);
}

.nav-mobile .kg-auth-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid rgb(var(--kg-brand-cyan-rgb) / 0.35);
    border-radius: var(--kg-radius-xl);
    color: var(--kg-brand-cyan);
    background: rgb(var(--kg-brand-cyan-rgb) / 0.12);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.nav-mobile .kg-auth-link:hover,
.nav-mobile .kg-auth-link:active {
    color: var(--kg-brand-cyan);
    border-color: rgb(var(--kg-brand-cyan-rgb) / 0.6);
    background: rgb(var(--kg-brand-cyan-rgb) / 0.22);
}

/* Header navigation: one stateful control, a flat mobile hierarchy and an empty feed shell. */
.header-inner { gap: .4rem; }
.nav-desktop { margin-left: auto; }
.header-inner > .kg-auth-link { display:none; }
.nav-link.is-current { color: var(--kg-brand-cyan); }
.kg-feed-toggle,
.mobile-menu-btn { position: relative; width:44px; height:44px; padding:0; display:inline-grid; place-items:center; flex:0 0 44px; border:0; border-radius:var(--kg-radius-button); color:#e6f5f7; background:transparent; cursor:pointer; }
.kg-feed-toggle svg { width:23px; height:23px; }
.kg-feed-toggle { transition:color .16s ease, background-color .16s ease; }
.kg-feed-toggle:hover { color:#e6f5f7; background:transparent; }
.kg-feed-toggle[aria-expanded="true"] { color:var(--kg-brand-cyan); background:rgb(var(--kg-brand-cyan-rgb) / .12); }
.kg-feed-badge { position:absolute; top:4px; right:3px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border:2px solid #0a0a0a; border-radius:999px; color:var(--kg-on-accent); background:var(--kg-brand-cyan); font:800 10px/12px Inter,sans-serif; text-align:center; }
.mobile-menu-btn__lines { position:relative; width:24px; height:18px; display:block; }
.mobile-menu-btn__lines span { position:absolute; left:1px; width:22px; height:2px; border-radius:2px; background:currentColor; transform-origin:center; transition:transform .2s ease, opacity .16s ease; }
.mobile-menu-btn__lines span:nth-child(1) { top:1px; }
.mobile-menu-btn__lines span:nth-child(2) { top:8px; }
.mobile-menu-btn__lines span:nth-child(3) { top:15px; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__lines span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__lines span:nth-child(2) { opacity:0; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__lines span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.kg-feed-toggle:focus-visible, .mobile-menu-btn:focus-visible, .nav-mobile-link:focus-visible, .nav-mobile-account:focus-visible { outline:2px solid var(--kg-brand-cyan); outline-offset:2px; }
.nav-mobile { position:fixed; inset:64px 0 auto; max-height:calc(100dvh - 64px); min-height:calc(100dvh - 64px); overflow:auto; gap:0; padding:max(1rem, env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(10,10,10,.985),rgba(7,13,16,.98)); }
.nav-mobile__primary { display:grid; }
.nav-mobile-link { min-height:52px; display:flex; align-items:center; padding:0 .3rem; border:0; border-radius:0; color:#e7f1f3; font:600 1rem/1.2 Montserrat,sans-serif; }
.nav-mobile-link + .nav-mobile-link { border-top:1px solid rgba(255,255,255,.13); }
.nav-mobile-link:hover { color:var(--kg-brand-cyan); background:transparent; }
.nav-mobile-link.is-current { color:var(--kg-brand-cyan); }
.nav-mobile__account { margin-top:auto; padding-top:1rem; border-top:1px solid var(--kg-border-strong); }
.nav-mobile-account { min-height:52px; display:flex; align-items:center; gap:.75rem; color:#e7f1f3; text-decoration:none; }
.nav-mobile-account > svg { flex:0 0 24px; width:24px; height:24px; color:#aab9bd; }
.nav-mobile-account__identity { min-width:0; display:grid; gap:.12rem; }
.nav-mobile-account__identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 .98rem/1.2 Montserrat,sans-serif; }
.nav-mobile-account__identity small { color:#8fa2a8; font:600 .76rem/1.2 Inter,sans-serif; }
.nav-mobile-account__chevron { margin-left:auto; color:#aab9bd; font-size:1.65rem; }
.kg-feed-panel { position:fixed; z-index:99; top:64px; right:max(1rem, calc((100vw - 1200px) / 2)); width:min(360px, calc(100vw - 2rem)); max-height:calc(100dvh - 80px); overflow:auto; padding:1.1rem; box-sizing:border-box; border:1px solid rgb(var(--kg-brand-cyan-rgb) / .28); border-radius:14px; color:#e8f5f7; background:rgba(8,14,17,.98); box-shadow:0 22px 55px var(--kg-shadow-black-a0p48); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.kg-feed-panel.is-open { opacity:1; transform:none; pointer-events:auto; }
.kg-feed-panel h2 { margin:0; font:700 1.15rem/1.2 Montserrat,sans-serif; }
.kg-feed-panel__empty { padding:2.2rem .2rem 1.3rem; }
.kg-feed-panel__empty h3 { margin:0 0 .65rem; font:600 1rem/1.35 Montserrat,sans-serif; }
.kg-feed-panel__empty p { margin:0; color:#aebfc4; font-size:.9rem; line-height:1.55; }
html { scrollbar-gutter:stable; }
body.kg-header-overlay-open { overflow:hidden; overscroll-behavior:none; }
@media (max-width: 767px) {
    .kg-feed-toggle { margin-left:auto; }
    .kg-feed-panel { inset:64px 0 0; width:auto; max-height:none; border:0; border-radius:0; transform:translateX(100%); padding:1.25rem max(1rem, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
    .kg-feed-panel.is-open { transform:none; }
    .kg-feed-panel__empty { padding-top:2.5rem; max-width:27rem; }
}
@media (min-width: 768px) {
    .header-inner { gap: clamp(.5rem, 2vw, 1.75rem); }
    .header-inner > .kg-auth-link { display:inline-flex; }
    .mobile-menu-btn { display:none; }
}
@media (prefers-reduced-motion: reduce) { .kg-feed-toggle, .mobile-menu-btn__lines span, .kg-feed-panel { transition:none; } }

body.kg-auth-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.kg-auth-modal-open > :not(.kg-auth-modal) {
    pointer-events: none;
    user-select: none;
}

/* Unified email-first auth: inputs remain deliberately dark, including browser autofill. */
.kg-unified-auth__main-slot, .kg-unified-auth__email, .kg-unified-auth__password, .kg-unified-auth__new-password, .kg-unified-auth__code, .kg-unified-auth__phone, .kg-auth-modal__phone-form { display:grid; gap:.6rem; }
.kg-unified-auth__main-slot { min-height:7.2rem; }
.kg-unified-auth__email input, .kg-unified-auth__password input, .kg-unified-auth__new-password input, .kg-unified-auth__code input, .kg-unified-auth__phone input { width:100%; box-sizing:border-box; color:#eefaff; background:#070b0d; border:2px solid hsl(193 72% 58% / .56); border-radius:var(--kg-radius-xl); padding:.9rem 1rem; outline:none; }
.kg-unified-auth__email input:hover, .kg-unified-auth__password input:hover, .kg-unified-auth__new-password input:hover, .kg-unified-auth__code input:hover, .kg-unified-auth__phone input:hover { border-color:var(--kg-brand-cyan); }
.kg-unified-auth__email input:focus, .kg-unified-auth__password input:focus, .kg-unified-auth__new-password input:focus, .kg-unified-auth__code input:focus, .kg-unified-auth__phone input:focus { border-color:var(--kg-brand-cyan); box-shadow:0 0 .65rem rgb(var(--kg-brand-cyan-rgb) / .2); }
.kg-unified-auth__email input:-webkit-autofill, .kg-unified-auth__password input:-webkit-autofill, .kg-unified-auth__new-password input:-webkit-autofill, .kg-unified-auth__code input:-webkit-autofill, .kg-unified-auth__phone input:-webkit-autofill { -webkit-text-fill-color:#eefaff; -webkit-box-shadow:0 0 0 1000px var(--kg-shadow-color-070b0d-a1) inset; transition:background-color 9999s ease-out 0s; }
.kg-otp { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }
.kg-otp .kg-otp__slot { min-width:0; padding:.8rem .2rem; text-align:center; font-size:1.35rem; font-variant-numeric:tabular-nums; }
.kg-unified-auth__divider { display:flex; align-items:center; gap:.65rem; margin:.85rem 0; color:#9ba8ad; font-size:.82rem; }
.kg-unified-auth__divider span { height:1px; flex:1; background:linear-gradient(90deg, transparent, rgba(192, 220, 227, .28) 35%, rgba(192, 220, 227, .28) 65%, transparent); }
.kg-unified-auth__providers { display:grid; gap:.5rem; }
.kg-unified-auth__providers .kg-auth-modal__provider { width:100%; box-sizing:border-box; min-height:3rem; display:flex; align-items:center; justify-content:flex-start; gap:.7rem; padding:.55rem .8rem; color:#d7e1e5; border:1px solid rgba(124, 176, 189, .32); background:rgba(5, 10, 13, .82); box-shadow:inset 0 1px 0 var(--kg-wash-2); font-size:.9rem; text-align:left; }
.kg-unified-auth__providers .kg-auth-modal__provider:hover { color:#edf4f5; border-color:rgba(130, 202, 218, .48); background:rgba(9, 18, 22, .94); box-shadow:inset 0 1px 0 var(--kg-wash-a0p06); }
.kg-auth-modal__provider-tile { display:grid; place-items:center; width:1.9rem; height:1.9rem; flex:0 0 1.9rem; border-radius:var(--kg-radius-card); color:#fff; }
.kg-auth-modal__provider-tile--yandex { background:#bd4b50; }
.kg-auth-modal__provider-tile--vk { background:#4b79a9; }
.kg-auth-modal__provider-tile--phone, .kg-auth-modal__provider-tile--email { color:#d8eef2; background:rgb(var(--kg-brand-cyan-rgb) / .32); }
.kg-provider-icon { display:block; width:1.1rem; height:1.1rem; }
.kg-provider-icon--yandex { width:1.05rem; height:1.05rem; }
.kg-provider-icon--vk { width:1.15rem; height:1.15rem; }
.kg-provider-icon--phone, .kg-provider-icon--email { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.kg-auth-modal__link { border:0; background:transparent; color:#8edff3; text-decoration:underline; text-align:left; padding:0; cursor:pointer; }
.kg-unified-auth__forgot-password { align-self:center; min-height:2.75rem; margin:.1rem auto; padding:.5rem .75rem; color:var(--kg-brand-cyan); text-align:center; text-decoration-color:rgb(var(--kg-brand-cyan-rgb) / .58); text-underline-offset:.16em; }
.kg-unified-auth__forgot-password:hover, .kg-unified-auth__forgot-password:focus-visible { color:#a8edfa; text-decoration-color:currentColor; }
.kg-unified-auth__phone { display:grid; gap:.6rem; }
.kg-unified-auth__phone p { margin:0; }
.kg-unified-auth__phone [data-kg-auth-phone-status]:empty { display:none; }
.kg-unified-auth__phone [data-kg-auth-phone-status][data-state="error"] { color:#ff8091; }
.kg-unified-auth__phone [data-kg-auth-phone-status][data-state="success"] { color:#86efac; }

.kg-auth-modal[hidden] {
    display: none;
}

.kg-auth-modal {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-top)) max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right)) max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-bottom)) max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left));
}

.kg-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 7, 10, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kg-auth-modal__dialog,
.kg-auth-page {
    position: relative;
    z-index: 1;
    width: min(100%, 31rem);
    box-sizing: border-box;
    height: auto;
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    border: 1px solid rgb(var(--kg-brand-cyan-rgb) / 0.38);
    border-radius: var(--kg-radius-3xl);
    padding: clamp(1.25rem, 4vw, 2rem);
    color: var(--kg-text);
    background: linear-gradient(155deg, rgba(21, 37, 44, 0.98), rgba(7, 15, 19, 0.98));
    box-shadow: 0 1.5rem 5rem var(--kg-shadow-black-a0p65), 0 0 0 1px var(--kg-wash-a0p06) inset;
}

.kg-auth-modal__dialog {
    display: flex;
    flex-direction: column;
}

.kg-auth-page {
    height: auto;
    min-height: 32rem;
    max-height: none;
    width: min(100%, 34rem);
    margin: clamp(1rem, 6vh, 4rem) auto;
}

.kg-auth-modal__dialog:focus-visible,
.kg-auth-modal button:focus-visible,
.kg-auth-modal a:focus-visible {
    outline: 3px solid var(--kg-brand-cyan);
    outline-offset: 3px;
}

.kg-auth-modal__close {
    position: absolute;
    top: 1.2rem;
    right: .75rem;
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: var(--kg-radius-button);
    color: #88959b;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.kg-auth-modal__close:hover {
    color: #b5c0c4;
    background: transparent;
}

.kg-auth-modal__heading {
    padding-right: 2.75rem;
    margin-bottom: .8rem;
}

.kg-auth-modal__eyebrow {
    margin: 0 0 .25rem;
    color: var(--kg-brand-cyan);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.kg-auth-modal__heading :is(h1, h2),
.kg-auth-modal__panels h2 {
    margin: 0;
    color: var(--kg-text);
    font-family: Montserrat, sans-serif;
}

.kg-auth-modal__heading :is(h1, h2) {
    line-height: 1.22;
}

.kg-unified-auth__email input {
    min-height: 3rem;
    padding-block: .9rem;
    line-height: 1.25;
}

.kg-auth-modal__heading p:last-child {
    margin: .65rem 0 0;
    color: hsl(var(--muted-foreground));
    font-size: .92rem;
    line-height: 1.5;
}

.kg-auth-modal__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
    margin: 1.5rem 0 1.25rem;
    padding: .3rem;
    border-radius: var(--kg-radius-xl);
    background: var(--kg-wash-a0p06);
}

.kg-auth-modal__tabs button {
    min-height: 2.5rem;
    border: 0;
    border-radius: var(--kg-radius-button);
    padding: .35rem .25rem;
    color: hsl(var(--muted-foreground));
    background: transparent;
    font: 700 .78rem/1.1 Inter, sans-serif;
    cursor: pointer;
}

.kg-auth-modal__tabs button[aria-selected="true"] {
    color: var(--kg-on-accent);
    background: hsl(193 92% 55%);
    box-shadow: 0 .35rem .9rem hsl(193 92% 48% / .25);
}

.kg-auth-modal__panels [role="tabpanel"] {
    display: grid;
    gap: .7rem;
    min-height: 14.5rem;
    align-content: start;
    overflow: auto;
    padding-right: .2rem;
}

.kg-auth-modal__panels {
    min-height: 0;
    flex: 1 1 auto;
}

.kg-auth-modal__panels [role="tabpanel"][hidden] {
    display: none;
}

.kg-auth-modal__panels label {
    color: var(--kg-text);
    font-size: .88rem;
    font-weight: 700;
}

.kg-auth-modal__phone-form {
    display: grid;
    gap: .7rem;
}

.kg-auth-modal__phone-form[hidden] {
    display: none;
}

.kg-auth-modal__panels input {
    width: 100%;
    min-height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--kg-radius-xl);
    padding: .75rem .9rem;
    color: var(--kg-text);
    background: rgba(0, 0, 0, 0.24);
}

.kg-auth-modal__panels input[readonly] {
    color: hsl(var(--muted-foreground));
    cursor: default;
}

.kg-auth-modal__notice {
    margin: .15rem 0 .25rem;
    color: hsl(var(--muted-foreground));
    font-size: .88rem;
    line-height: 1.45;
}

.kg-auth-modal__notice--success {
    color: #74efc2;
}

.kg-auth-modal__login-form {
    display: grid;
    gap: .7rem;
}

.kg-auth-modal__login-form .kg-auth-modal__primary {
    width: 100%;
    margin-top: .85rem;
}

.kg-auth-modal__primary,
.kg-auth-modal__provider,
.kg-auth-modal__secondary {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--kg-radius-xl);
    padding: .75rem 1rem;
    color: var(--kg-on-accent);
    background: hsl(193 92% 55%);
    box-shadow: 0 .45rem 1.15rem hsl(193 92% 48% / .25);
    font: 700 .95rem/1 Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.kg-auth-modal__secondary {
    color: var(--kg-text);
    background: var(--kg-wash-3);
    box-shadow: none;
}

.kg-auth-modal__secondary:disabled {
    cursor: wait;
    opacity: .55;
}

.kg-auth-modal__primary:hover,
.kg-auth-modal__provider:hover {
    color: var(--kg-on-accent);
    background: hsl(193 92% 48%);
}

.kg-auth-modal__primary:disabled,
.kg-auth-modal__provider:disabled {
    cursor: not-allowed;
    opacity: .56;
    background: hsl(193 45% 45%);
    box-shadow: none;
}

.kg-auth-modal__switch {
    margin: .25rem 0 0;
    color: hsl(var(--muted-foreground));
    font-size: .88rem;
}

.kg-auth-modal__switch a {
    color: var(--kg-brand-cyan);
    font-weight: 700;
}

.kg-auth-registration {
    display: grid;
    gap: .9rem;
    margin-top: 1.5rem;
}

.kg-auth-registration__providers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .35rem;
}

.kg-auth-registration fieldset {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.kg-auth-registration legend {
    color: var(--kg-text);
    font-size: .88rem;
    font-weight: 700;
}

.kg-auth-registration .control-group {
    display: grid;
    gap: .35rem;
}

.kg-auth-registration .control-label label,
.kg-auth-registration label {
    color: var(--kg-text);
    font-size: .88rem;
    font-weight: 700;
}

.kg-auth-registration input,
.kg-auth-registration select {
    width: 100%;
    min-height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--kg-radius-xl);
    padding: .75rem .9rem;
    color: var(--kg-text);
    background: rgba(0, 0, 0, 0.24);
}

.kg-auth-registration .kg-auth-modal__primary {
    width: 100%;
    margin-top: .5rem;
}

.kg-auth-surface--registration .kg-auth-modal__heading {
    display: none;
}

.kg-auth-modal__provider--registration {
    display: inline-flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem .85rem;
    border: 1px solid var(--kg-brand-cyan);
    border-radius: var(--kg-radius-xl);
    color: var(--kg-brand-cyan);
    background: #070b0d;
    box-shadow: inset 0 0 0 1px rgba(0, 206, 255, .08);
    font: 700 .82rem/1.1 Inter, sans-serif;
    text-align: center;
}

.kg-auth-modal__provider--registration svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.kg-auth-modal__provider--registration:hover,
.kg-auth-modal__provider--registration:focus-visible {
    color: var(--kg-on-accent);
    background: var(--kg-brand-cyan);
}

.kg-auth-modal__provider--registration:focus-visible {
    outline: 3px solid rgb(var(--kg-brand-cyan-rgb) / .45);
    outline-offset: 2px;
}

.kg-auth-modal__provider--registration:disabled {
    color: rgba(161, 235, 255, .58);
    border-color: rgba(0, 206, 255, .38);
    background: #070b0d;
}

.kg-auth-registration__providers .kg-auth-modal__notice {
    display: none;
}

.kg-password-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .3rem;
    margin-top: .25rem;
}

.kg-password-meter span {
    height: .28rem;
    border-radius: 999px;
    background: var(--kg-wash-4);
    transition: background .16s ease, box-shadow .16s ease;
}

.kg-password-meter[data-state="short"] span:nth-child(1),
.kg-password-meter[data-state="weak"] span:nth-child(1) {
    background: #ff647c;
}

.kg-password-meter[data-state="medium"] span:nth-child(-n+2) {
    background: #f4bb4a;
}

.kg-password-meter[data-state="strong"] span {
    background: var(--kg-brand-cyan);
    box-shadow: 0 0 .55rem rgba(0, 206, 255, .42);
}

.kg-password-meter__status {
    min-height: 1.15rem;
    margin: .1rem 0 0;
    color: hsl(var(--muted-foreground));
    font-size: .78rem;
    font-weight: 700;
}

.kg-password-meter__status[data-state="short"],
.kg-password-meter__status[data-state="weak"] { color: #ff8091; }
.kg-password-meter__status[data-state="medium"] { color: #f8ca68; }
.kg-password-meter__status[data-state="strong"] { color: var(--kg-brand-cyan); }

.kg-auth-modal__provider-mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: .9rem;
    color: #fff;
    font: 800 1.15rem/1 Montserrat, sans-serif;
}

.kg-auth-modal__provider-mark--vk {
    background: #2688eb;
}

.kg-auth-modal__provider-mark--yandex {
    color: var(--kg-on-accent);
    background: var(--kg-brand-cyan);
}

.kg-auth-modal__provider--yandex {
    border-color: var(--kg-brand-cyan);
    color: var(--kg-on-accent);
    background: var(--kg-brand-cyan);
}

.kg-auth-modal__provider--yandex:hover,
.kg-auth-modal__provider--yandex:focus-visible {
    background: var(--kg-brand-cyan);
}

@media (max-width: 520px) {
    .kg-auth-registration__providers {
        grid-template-columns: 1fr;
    }
}

.kg-auth-modal__fallback {
    display: block;
    margin-top: 1.25rem;
    color: var(--kg-brand-cyan);
    font-size: .88rem;
    text-align: center;
}

.kg-auth-login-success {
    position: fixed;
    z-index: 1400;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: min(28rem, calc(100vw - 2rem));
    border: 1px solid rgba(116, 239, 194, .7);
    border-radius: var(--kg-radius-card);
    padding: .9rem 1.1rem;
    color: #d9fff0;
    background: rgba(11, 70, 57, .96);
    box-shadow: 0 .75rem 2rem var(--kg-shadow-black-a0p35);
    font: 700 .92rem/1.3 Inter, sans-serif;
}

/* Shared dark toast used by cabinet support and the one-time logout confirmation. */
.kg-toast { position:fixed; z-index:1250; right:max(1rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:.7rem; width:calc(100% - 2rem); max-width:520px; box-sizing:border-box; margin:0; padding:.9rem 1rem; border:1px solid rgb(var(--kg-brand-cyan-rgb) / .42); border-radius:var(--kg-radius-card); color:#f8fafc; background:rgba(8,20,27,.96); box-shadow:0 8px 24px var(--kg-shadow-black-a0p28); }
.kg-toast__icon { width:1.35rem; height:1.35rem; fill:none; stroke:var(--kg-brand-cyan); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.kg-toast__copy { min-width:0; font-size:.92rem; font-weight:700; line-height:1.25; }
.kg-toast__close { display:grid; place-items:center; width:2rem; height:2rem; margin:-.35rem; padding:0; border:0; color:#8e9ca1; background:transparent; cursor:pointer; }
.kg-toast__close:hover { color:var(--kg-brand-cyan); }
.kg-toast__close:focus-visible { outline:2px solid var(--kg-brand-cyan); outline-offset:2px; border-radius:var(--kg-radius-xs); color:var(--kg-brand-cyan); }
.kg-toast__close svg { width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:1.8; }

@media (max-width: 420px) {
    .kg-auth-modal {
        padding: .75rem;
    }

    .kg-auth-modal__dialog { max-height: calc(100dvh - 1.5rem); border-radius: var(--kg-radius-2xl); }

    .kg-unified-auth__providers .kg-auth-modal__provider { gap:.6rem; padding-left:.7rem; padding-right:.7rem; font-size:.84rem; }

    .kg-auth-modal__tabs button {
        font-size: .68rem;
    }
}

.footer-main {
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(10,10,10,0.7), rgba(10,10,10,0.45));
    border-top: 1px solid var(--kg-border-strong);
    box-shadow: 0 8px 40px var(--kg-shadow-black-a0p35);
    margin-top: 5rem;
}

.footer-main .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.footer-top,
.footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

@media (min-width: 768px) {
    .footer-top,
    .footer-bottom {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-left,
.footer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.footer-info {
    display: block;
    line-height: 1rem;
}

.age-badge {
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) - var(--kg-radius-xs));
    background-color: hsla(200, 10%, 25%, 0.1);
    color: hsla(200, 10%, 60%, 0.6);
    font-weight: 600;
}

.copyright {
    margin: 0;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
    .footer-links {
        justify-content: flex-end;
    }
}

.footer-link {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-link:hover {
    color: hsl(var(--primary));
}

.footer-separator {
    color: hsla(200, 10%, 60%, 0.4);
}

.footer-divider {
    border-top: 1px solid var(--kg-border);
    margin: 1.5rem 0;
}

.footer-bottom {
    margin-bottom: 0;
}

.jmodedit,
.edit-icon,
.btn-edit, div[role="tooltip"] {
    display: none !important;
}

main {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.page-header h1 {
    color: var(--kg-text);
    letter-spacing: -.025em;
    line-height: 1.25;
    font-weight: 900;
    font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
    margin-bottom: 1rem;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    text-align: center;
}

.page-sub-header > * {
    color: hsl(var(--muted-foreground));
    font-size: 1.25rem;
    line-height: 1.75rem;
    text-align: center;
}



.star-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .125rem;
}

.star-icon {
    width: 18px;
    height: 18px;
    color: hsl(45 100% 50% / 0.3);
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: all 0.2s ease;
    filter: drop-shadow(rgba(255, 215, 0, 0.5) 0px 0px 3px);
}

.star-icon.filled {
    color: rgb(255 215 0 / 1);
    fill: rgb(255 215 0 / 1);
    filter: drop-shadow(0 0 3px hsl(45 100% 50% / 0.5));
}

.star-rating:hover .star-icon {
    transform: scale(1.1);
}

.title-main {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: #f8f9fa;
    line-height: 1;
}

@media (min-width: 768px) {
    .title-main {
        font-size: 4.5rem;
    }
}



.meta-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 34px;
}

@media (min-width: 768px) {
    .meta-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.meta-card {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-card);
    padding: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 var(--kg-wash-2);
}



.meta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.meta-icon.star-icon {
    color: #ffd700;
    fill: #ffd700;
}

.meta-icon.calendar-icon {
    color: #6ad0ff;
}

.meta-icon.user-icon {
    color: #6ad0ff;
}

.meta-text {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: .75rem;
    line-height: 1rem;
    color: var(--kg-text-secondary);
}

.meta-value {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: hsl(210 40% 98%);
}

.divider-line {
    width: 100%;
    max-width: 320px;
    height: 1px;
    margin: -8px auto 16px auto;
    background: linear-gradient(to right, transparent, #6ad0ff, transparent);
    opacity: 0.3;
}

.company-info-section {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius-2xl);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 var(--kg-wash-2);
}

.section-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title .emoji {
    -webkit-text-fill-color: #78c2d6;
}

.title-icon{
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    filter: brightness(0) saturate(100%) invert(77%) sepia(28%) saturate(1487%)
    hue-rotate(140deg) brightness(95%) contrast(90%);
}

.section-title .gradient-text {
    background: linear-gradient(to right, #78c2d6, #a4d5c6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-bar {
    max-width: 1200px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


@media (min-width: 768px) {
    .nav-bar {
        flex-direction: row;
    }
}

.nav-button {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kg-radius-2xl);
    transition: all 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.nav-button-back {
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    color: #6ad0ff;
}

.nav-button-back:hover {
    background: var(--kg-wash-a0p06);
    border-color: #6ad0ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(106, 208, 255, 0.15);
}

.nav-button-share {
    background: rgba(106, 208, 255, 0.05);
    border: 1px solid rgba(106, 208, 255, 0.15);
    color: #6ad0ff;
}

.nav-button-share:hover {
    background: rgba(106, 208, 255, 0.08);
    border-color: rgba(106, 208, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(106, 208, 255, 0.2);
}

.share-text {
    display: none;
}

.breadcrumbs {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: var(--kg-radius-2xl);
    padding: 16px 24px;
    font-size: 15px;
    background: var(--kg-wash-1);
    border: 1px solid var(--kg-border);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 0 1px 0 var(--kg-wash-2);
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6ad0ff;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #87e5ff;
}

.breadcrumb-separator {
    color: rgba(233, 238, 245, 0.5);
}

.breadcrumb-current {
    color: rgba(233, 238, 245, 0.9);
    font-weight: 500;
    max-width: 400px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.mod-glass-block {
    background: var(--kg-wash-a0p06);
    border: 1px solid var(--kg-border-strong);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--kg-radius-card);
    padding: 1.5rem;
}

.mod-glass-title {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--kg-text);
    margin-bottom: 1rem;
}

.mod-glass-description {
    color: hsl(200 10% 60%);
    margin-bottom: 1.5rem;
}

.mod-glass-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 2rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #000000;
    background-color: hsl(177 100% 50%);
    border-radius: var(--kg-radius-button);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mod-glass-button:hover {
    background-color: hsl(177 100% 45%);
}

.mod-glass-button-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.mod-glass-button:hover .mod-glass-button-icon {
    transform: translateX(4px);
}

.content-bottom-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
}

.content-item .body ul,
.content-item .body ol,
.calc_info ul,
.calc_info ol {
    margin: 0 0 1em 0;
    padding-left: 1.25rem;
    color: #edf0f2;
}

.content-item ul li, .calc_info ul li {
    font-size: inherit;
    line-height: inherit;
    list-style: disc;
    margin: 0.5em 0;
}

@media (min-width: 768px) {
    .content-item ul li, .calc_info ul li {
        font-size: 1.125rem;
    }
}

.content-item .body ol li,
.calc_info ol li {
    list-style-type: decimal;
    margin: 0.5em 0;
    font-size: inherit;
    line-height: inherit;
}


.formula {
    background-color: hsl(203 20% 6% / .6);
    padding: 1rem;
    border-radius: var(--kg-radius-card);
    margin-bottom: 1rem;
    margin-bottom: 1rem;
    border-color: hsl(200 10% 12%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    text-align: center;
    color: var(--kg-text) !important;
    font-size: 14px;
}

.important {
    padding: 1rem;
    background-color: hsl(177 100% 50% / .05);
    border-color: hsl(177 100% 50% / .2);
    border-width: 1px;
    border-radius: var(--kg-radius-card);
    color: hsl(200 10% 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.important.important__yelow {
    background-color: #eab3081a;
    border-color: #eab3084d;
    color: #fff !important;
}

.quote--primary {
    border-color: hsl(177, 100%, 50%);
    background: hsla(177, 100%, 50%, 0.05);
    color: rgba(237, 240, 242, 0.9);
}

.quote--destructive {
    border-color: hsl(0, 84%, 60%);
    background: hsla(0, 84%, 60%, 0.05);
    color: #edf0f2;
}

.main_mod {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5rem 1rem;
}

@media (min-width: 768px) {
    .main_mod {
        padding: 4rem 1rem  8rem 1rem;
    }
}

@keyframes btn-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.ai_main_mod {
    text-align: center;
    padding: 3rem;
    margin: 5rem 0 1rem 0;
}

.ai_main_mod h3 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    color: transparent;
    font-weight: 700;
    background-image: linear-gradient(to right, #78c2d6 , #a4d5c6);
    margin-bottom: 1rem;
    background-clip: text;
}

.ai_main_mod .mod-glass-description {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0 auto 2rem auto;
    max-width: 42rem;
}

.mod_criteria {
    margin-bottom: 3rem;
    padding: 2rem;
}

.mod_criteria h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.mod_criteria .criteria__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .mod_criteria .criteria__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mod_criteria .criteria__item-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: hsl(177 100% 50%);
}

.mod_criteria .criteria__item-text {
    color: hsl(200 10% 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.nav-mobile.is-open {
    display: flex;
}

#menu-overlay.is-visible {
    opacity: 1;
}

@media (max-width: 768px) {

        .content-bottom-grid {
        display: block;
    }

    .content-bottom-grid > div {
        margin-bottom: 20px;
    }


    body > main .container {
        padding-left: 0;
        padding-right: 0;
    }



    body > main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero-header {
        padding: 1rem;
    }

    .section-title {
        font-size: 1.5rem;
        line-height: 1.7rem;
    }

    .hero-body {
        padding: 0 1rem 3rem 1rem;
    }

    .hero-article section {
        padding: 1rem;
    }


    main {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .ux_article_slider {
        padding-bottom: 0;
        padding-top: 64x;
    }

    .ai_main_mod {
        padding: 1rem;
    }

    .mod_criteria, .content-item .lead-card, .bookmakers-table, .feature-card, .content-item .meta-card, .tools .calc_info, .mod_buttons_random, .tools .calc_panel, .bk-panel {
        padding: 1rem;
    }

    .content-item .header, .content-item section {
        padding: .5rem;
    }

    .breadcrumb-current{
        white-space: normal;
    }


    .breadcrumb-link, .breadcrumb-link svg {
        display: inline;
    }

    .breadcrumbs {
        display: block;
        width: 100%;
    }

    .breadcrumb-separator {
        padding: 0 5px;
    }


        .nav-button-back {
        display: none;
    }

    .nav-button-share {
        width: 100%;
        border-radius: var(--kg-radius-xl);
        height: auto;
        padding: 16px;
        gap: 10px;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .share-text {
        display: inline;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


}

.footer-copyright {
    display: none;
}

@media (max-width: 768px) {

    .footer-link {
        min-height: unset;
    }
    
    .footer-main .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0 !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding-bottom: 1.25rem !important;
        gap: 0 !important;
    }

    .footer-top .footer-left {
        display: none !important;
    }

    .footer-top > .footer-links {
        justify-content: center !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .footer-divider {
        display: none !important;
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        text-align: center !important;
        width: 100% !important;
        border-top: 1px solid var(--kg-border) !important;
        padding-top: 1.25rem !important;
    }

    .footer-info {
        text-align: center !important;
        width: 100% !important;
    }

    .footer-bottom > .footer-links {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        position: relative !important;
        padding-top: 1.25rem !important;
        margin-top: 0.5rem !important;
    }

    .footer-bottom > .footer-links::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px !important;
        background: var(--kg-wash-a0p1) !important;
    }

    .footer-bottom > .footer-links .footer-separator {
        display: none !important;
    }

    .footer-copyright {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding-top: 0.75rem !important;
        margin-top: 0.25rem !important;
        color: hsl(200 10% 60%) !important;
        font-size: 0.75rem !important;
    }
}

.footer-reg-block {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: hsla(200, 10%, 25%, 0.12);
    border: 1px solid hsla(200, 10%, 60%, 0.1);
    border-radius: calc(var(--kg-radius-card) - 4px);
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground));
}

.footer-reg-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-reg-badge {
    padding: 0.1rem 0.4rem;
    border-radius: calc(var(--radius) - var(--kg-radius-xs));
    background-color: hsla(200, 10%, 25%, 0.15);
    color: hsla(200, 10%, 60%, 0.7);
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid hsla(200, 10%, 60%, 0.15);
}

/* Footer polish: Joomla modules keep their content; these rules only arrange their footer positions. */
.footer-main {
    --kg-footer-technical-color: hsl(200 8% 56%);
}

.footer-main .footer-link {
    color: hsl(200 10% 76%);
    transition: color .16s ease, opacity .16s ease;
}

.footer-main .footer-link:hover,
.footer-main .footer-link:focus-visible {
    color: var(--kg-brand-cyan);
}

.footer-main .footer-link:focus-visible {
    outline: 2px solid var(--kg-brand-cyan);
    outline-offset: 3px;
    border-radius: 2px;
}

.footer-main .footer-link:active {
    color: color-mix(in srgb, var(--kg-brand-cyan) 78%, var(--kg-text));
}

.footer-main .footer-info .footer-reg-block {
    gap: .2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--kg-footer-technical-color);
}

.footer-main .footer-reg-badge {
    padding: .05rem .32rem;
    border-color: hsla(200, 10%, 60%, .12);
    background: transparent;
    color: var(--kg-footer-technical-color);
    font-size: .625rem;
}

.footer-main .footer-left {
    color: var(--kg-footer-technical-color);
}

.footer-main .age-badge {
    color: var(--kg-footer-technical-color);
}

@media (max-width: 767px) {
    .footer-main .container {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        padding-top: 1.25rem !important;
        padding-bottom: max(1rem, calc(.75rem + env(safe-area-inset-bottom))) !important;
        text-align: left !important;
    }

    .footer-main .footer-top,
    .footer-main .footer-bottom {
        display: contents !important;
    }

    .footer-main .footer-divider {
        display: none !important;
    }

    .footer-main .footer-top .footer-links {
        order: 1;
        display: flex !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0;
    }

    .footer-main .footer-top .footer-separator,
    .footer-main .footer-bottom .footer-separator {
        display: none !important;
    }

    .footer-main .footer-top .footer-link,
    .footer-main .footer-bottom .footer-link {
        display: flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--kg-border);
        font-size: .8125rem;
    }

    .footer-main .footer-top .footer-link::after,
    .footer-main .footer-bottom .footer-link::after {
        content: '›';
        color: hsl(200 9% 68%);
        font-size: 1rem;
        line-height: 1;
        transition: color .16s ease;
    }

    .footer-main .footer-link:hover::after,
    .footer-main .footer-link:focus-visible::after,
    .footer-main .footer-link:active::after {
        color: var(--kg-brand-cyan);
    }

    .footer-main .footer-bottom > .footer-links {
        order: 2;
        display: flex !important;
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 0;
    }

    .footer-main .footer-bottom > .footer-links::before {
        display: none !important;
    }

    .footer-main .footer-info {
        order: 3;
        width: 100% !important;
        margin-top: .5rem;
        padding: .5rem 0 0;
        text-align: left !important;
    }

    .footer-main .footer-info .footer-reg-block {
        display: flex;
        width: 100%;
        font-size: .6875rem;
        line-height: 1.2rem;
    }

    .footer-main .footer-info .footer-reg-row {
        gap: .35rem;
    }

    .footer-main .footer-left {
        order: 4;
        display: flex !important;
        width: 100%;
        align-items: center;
        gap: .65rem;
        margin-top: .65rem;
        padding-top: .65rem;
        border-top: 1px solid var(--kg-border);
        color: var(--kg-footer-technical-color);
        font-size: .75rem;
    }
}

/* The legacy mobile block includes 768px; keep that tablet width in the desktop contract. */
@media (min-width: 768px) {
    .footer-main .container {
        display: block !important;
        text-align: initial !important;
    }

    .footer-main .footer-top,
    .footer-main .footer-bottom {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-main .footer-top .footer-left {
        display: flex !important;
    }

    .footer-main .footer-divider {
        display: block !important;
    }

    .footer-main .footer-info {
        width: auto !important;
        text-align: left !important;
    }

    .footer-main .footer-bottom > .footer-links {
        display: flex !important;
        width: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Android WebView insets are supplied by the app on <html> (#4667).
   Every rule is opt-in; ordinary browsers retain their existing geometry. */
html.kg-edge {
    --kg-edge-header-height: calc(64px + var(--kg-safe-top, 0px));
    scroll-padding-top: calc(var(--kg-edge-header-height) + 16px);
    scroll-padding-bottom: var(--kg-safe-bottom, 0px);
}

html.kg-edge .header-main {
    padding-top: var(--kg-safe-top, 0px);
}

/* Keep this spacer separate from body padding reserved by the catfish banner. */
html.kg-edge body::after {
    content: '';
    display: block;
    height: var(--kg-safe-bottom, 0px);
}

html.kg-edge body::before {
    content: '';
    position: fixed;
    inset: auto 0 0;
    height: var(--kg-safe-bottom, 0px);
    z-index: 2000;
    pointer-events: none;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(10,10,10,.7), rgba(10,10,10,.45));
    box-shadow: inset 0 1px var(--kg-border-strong);
    box-sizing: border-box;
}

html.kg-edge .nav-mobile {
    top: var(--kg-edge-header-height);
    min-height: calc(100dvh - var(--kg-edge-header-height) - var(--kg-safe-bottom, 0px));
    max-height: calc(100dvh - var(--kg-edge-header-height) - var(--kg-safe-bottom, 0px));
    box-sizing: border-box;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

html.kg-edge :is(.kg-feed-panel, .kgfeed-preview__panel) {
    top: var(--kg-edge-header-height);
    max-height: calc(100dvh - var(--kg-edge-header-height) - var(--kg-safe-bottom, 0px) - 16px);
}

html.kg-edge .kgfeed-preview__backdrop {
    top: var(--kg-edge-header-height);
    bottom: var(--kg-safe-bottom, 0px);
}

html.kg-edge :is(.kg-toast, .kg-auth-login-success) {
    bottom: calc(1rem + var(--kg-safe-bottom, 0px));
}

html.kg-edge #kg-catfish {
    bottom: var(--kg-safe-bottom, 0px);
}

html.kg-edge .app-page .sticky-download {
    bottom: calc(18px + var(--kg-safe-bottom, 0px));
}

html.kg-edge :is(.kg-auth-modal, .kg-ticket-detail-preview) {
    top: var(--kg-safe-top, 0px);
    bottom: var(--kg-safe-bottom, 0px);
}

@media (max-width: 767px) {
    html.kg-edge :is(.kg-feed-panel, .kgfeed-preview__panel) {
        bottom: var(--kg-safe-bottom, 0px);
        max-height: none;
    }
}

/* #5717: shared quiet accent, including desktop articles without the mobile surface asset. */
.nav-bar.kg-article-navigation :is(a.breadcrumb-link, button.nav-button-share) { color: var(--kg-link-muted); }
.nav-bar.kg-article-navigation button.nav-button-share { border-color: color-mix(in srgb, var(--kg-link-muted) 45%, transparent); }
.nav-bar.kg-article-navigation a.breadcrumb-link:is(:hover, :focus-visible),
.nav-bar.kg-article-navigation button.nav-button-share:is(:hover, :focus-visible, :active) { color: var(--kg-brand-cyan); }
.nav-bar.kg-article-navigation button.nav-button-share:is(:hover, :focus-visible, :active) { border-color: rgb(var(--kg-brand-cyan-rgb) / .65); }