@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-cyrillic.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-cyrillic-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
                   U+FE2E-FE2F;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-greek.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-greek-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-hebrew.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-thai.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-devanagari.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9,
                   U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-bengali.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0980-09FE, U+200C-200D, U+20B9, U+25CC;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-armenian.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0530-058F, U+FB13-FB17;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-it-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

@font-face {
    font-family: "GSans";
    src: url("/fonts/gsans-it-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}




:root[data-theme="dark"] {
    color-scheme: dark;

    
    --bg:            #0b1220;
    --bg-2:          #0e1730;   
    --bg-deep:       #0a0f1c;   

    
    --panel:         #111a2e;
    --panel-light:   #16223c;
    --panel-hover:   #1b2a4d;
    --panel-alt:     #0f172a;
    --surface-grey:  #111827;   
    --field-hover:   #1a2b49;

    
    --border:        #22304f;
    --border-soft:   #243041;

    
    --text:          #e6edf6;
    --text-strong:   #ffffff;   
    --text-dim:      #9fb0cc;
    --text-mute:     #9ca3af;
    --text-grey:     #e5e7eb;   

    
    --accent:        #3b82f6;
    --accent-soft:   #60a5fa;
    --accent-strong: #2563eb;
    --accent-pale:   #93c5fd;
    --accent-deep:   #1d4ed8;
    --on-accent:     #ffffff;

    
    --success:       #22c55e;
    --danger:        #ef4444;
    --danger-soft:   #f87171;
    --warn:          #fbbf24;

    
    --shadow:        0 6px 24px rgba(0, 0, 0, .45);
    --scrim:         rgba(0, 0, 0, .5);
    --overlay-1:     rgba(255, 255, 255, .04);
    --overlay-2:     rgba(255, 255, 255, .08);
    --cookie-bg:     rgba(17, 26, 46, .98);

    
    --btn-border:    transparent;
    --panel-shadow:  0 0 0 0 transparent;

    
    --select-bg:     #003173;
    --select-dim:    #c7d2fe;
}

:root {
    color-scheme: light;

    
    --bg:            #f2f2f5;
    --bg-2:          #e9e9ee;   
    --bg-deep:       #e6e6eb;   

    --panel:         #ffffff;
    --panel-light:   #f5f5f7;
    --panel-hover:   #e8e8ed;
    --panel-alt:     #fafafc;
    --surface-grey:  #ffffff;
    --field-hover:   #ececf0;

    --border:        #d2d2d7;
    --border-soft:   #e3e3e6;

    --text:          #1d1d1f;
    --text-strong:   #1d1d1f;
    --text-dim:      #6e6e73;
    --text-mute:     #86868b;
    --text-grey:     #1d1d1f;

    --accent:        #0066cc;
    --accent-soft:   #0055b3;
    --accent-strong: #0066cc;
    --accent-pale:   #0a66c2;
    --accent-deep:   #004494;
    --on-accent:     #ffffff;

    --success:       #1a7f37;
    --danger:        #b3261e;
    --danger-soft:   #c5372c;
    --warn:          #8a5a00;

    --shadow:        0 6px 24px rgba(0, 0, 0, .08);
    --scrim:         rgba(0, 0, 0, .35);
    --overlay-1:     rgba(0, 0, 0, .03);
    --overlay-2:     rgba(0, 0, 0, .06);
    --cookie-bg:     rgba(255, 255, 255, .98);

    --btn-border:    #d2d2d7;
    --panel-shadow:  0 1px 2px rgba(0, 0, 0, .05);

    --select-bg:     #d8e8fb;
    --select-dim:    #4a6fa5;
}




*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "GSans", "Segoe UI", Arial, sans-serif;
    background: linear-gradient(180deg, var(--bg), var(--bg-2));
    color: var(--text);
}




.hidden {
    display: none;
}

.is-disabled {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}


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




.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cookie-bg);
    border-top: 1px solid var(--border);
    padding: 16px;
    z-index: 9999;
    backdrop-filter: blur(8px);
    display: none;
}

.cookie-banner.cookie-banner-visible {
    display: block;
}

.cookie-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.cookie-text {
    flex: 1;
    min-width: 260px;
    color: var(--text-dim);
    font-size: 13px;
}

.cookie-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.cookie-option {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text);
    background: var(--panel-light);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.cookie-option input {
    transform: scale(1.1);
}

.cookie-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cookie-btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
    background: var(--panel-light);
    color: var(--text);
}

.cookie-accept {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.cookie-reject {
    background: transparent;
}




.footer {
    margin-top: 40px;
    padding: 24px 20px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.footer h4 {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text);
}


.footer a {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    margin: 3px 0;
    padding: 4px 0;
    min-height: 24px;
    box-sizing: border-box;
}

.footer a:hover {
    color: var(--accent-soft);
}

.footer-bottom {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}


.msg-box {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.msg-box input {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel-light);
    color: var(--text);
    font-size: 12px;
}

.msg-box button {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    font-size: 12px;
}

.msg-status {
    font-size: 11px;
    margin-top: 4px;
    color: var(--text-dim);
}

.msg-status-ok {
    color: var(--text-dim);
}

.msg-status-error {
    color: var(--danger-soft);
}


.footer-lang,
.footer-skin {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-lang label,
.footer-skin label {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.footer-lang select,
.footer-skin select {
    background: var(--panel-light);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.footer-lang select:hover,
.footer-lang select:focus,
.footer-skin select:hover,
.footer-skin select:focus {
    border-color: var(--accent);
    background: var(--field-hover);
}

.no-language-selector .footer-lang {
    display: none;
}



.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
}

.page-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.page-nav a {
    padding: 8px 16px;
    background: var(--panel);
    color: var(--text-dim);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: 0.15s;
}

.page-nav a:hover {
    color: var(--text);
    background: var(--panel-light);
}

.page-nav a.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.page-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.page-section h1,
.page-section h3 {
    margin-top: 0;
    color: var(--text-strong);
}

.page-section p {
    color: var(--text-dim);
    line-height: 1.6;
}

.cookie-box {
    padding: 14px;
    background: var(--panel-light);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.cookie-box strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}

.cookie-box p {
    margin: 0;
    color: var(--text-dim);
}




@media (max-width: 600px), (pointer: coarse) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}