/* ========== БАЗОВЫЕ ПЕРЕМЕННЫЕ ========== */
:root {
    color-scheme: light dark;
    --bg-color: #f1f3f3;
    --text-color: #1a1a1d;
    --text-secondary: #444;
    --accent-text: #0F6F8E;
    --accent-background: #14E0D8;
    --primary: #0F6F8E;
    --input-bg: #fff;
    --border-color: #d0d0d0;
    --ring:0 0 0 3px #14E0D8;
    --border:#0F6F8E;
    --surface: #37819a;
    --muted:#a3adc2;
    --bg-modal: rgba(241, 241, 241, 0.7);
    --bg-modal-content: #fff;
    --link-hover-color: #14E0D8;
    --background-button: #e7e7e7;
    --box-shadow: rgba(0, 0, 0, 0.3);
}

/* ========== СВЕТЛАЯ ТЕМА ========== */
:root[data-theme="light"] {
    --bg-color: #f1f3f3;
    --text-color: #1a1a1d;
    --text-secondary: #444;
    --accent-text: #0F6F8E;
    --accent-background: #14E0D8;
    --primary: #0F6F8E;
    --input-bg: #fff;
    --border-color: #d0d0d0;
    --bg-modal: rgba(241, 241, 241, 0.7);
    --bg-modal-content: #fff;
    --link-hover-color: #14E0D8;
    --background-button: #e7e7e7;
    --box-shadow: rgba(0, 0, 0, 0.3);
}

/* ========== ТЁМНАЯ ТЕМА ========== */
:root[data-theme="dark"] {
    --bg-color: #0e0e10;
    --text-color: #f1f3f3;
    --text-secondary: #9ca3af;
    --accent-text: #14E0D8;
    --accent-background: #14E0D8;
    --primary: #0F6F8E;
    --input-bg: #1a1a1d;
    --border-color: #2b2b2f;
    --bg-modal: rgba(0, 0, 0, 0.7);
    --bg-modal-content: #1f2225;
    --link-hover-color: #0F6F8E;
    --background-button: #2c2f33;
    --box-shadow: rgb(20 224 216 / 70%);
}

/* ========== БАЗОВЫЕ СБРОСЫ И ТИПОГРАФИКА ========== */
*,*::before,*::after{box-sizing:border-box;position:relative}
*:focus {outline: none}
html:focus-within{scroll-behavior:smooth}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.5;font-size:16px}
h1,h2,h3,h4,h5,h6{margin:0}
h1{font-size:1.5rem}
h2{font-size:1.3rem}
body{margin:0;color:var(--text-secondary);background:var(--bg-color);font-family: "Inter", sans-serif}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
label{display:contents}
input,button,textarea,select{font:inherit;color:inherit}
a{color:var(--accent-text);text-underline-offset:0.1em; text-decoration: none}
a:focus-visible,button:focus-visible{outline:var(--ring)}
a:hover, a:focus {text-decoration: underline}
header,main,footer{display:block}
header{background:var(--bg-modal-content)}
nav ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem;align-items:center}
footer{border-top:1px solid var(--border);padding-block:1.5rem;color:var(--muted)}
/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* === ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ === */
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 1.3rem;
    user-select: none;
    transition: transform 0.3s ease;
    z-index: 999;
}

.theme-toggle:hover {
    transform: rotate(25deg);
}

/* === ФОРМА === */
.form {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form .inputBlock {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form input {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
}
.form input:focus {
    outline: 1px solid #14e0d882;
}
.form button {
    position: relative;
    background: var(--accent-background);
    border: none;
    color: #1A1A1DFF;
    font-weight: 600;
    padding: 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.form button:disabled {
    background: var(--primary);
    color: #f1f3f3;
    cursor: not-allowed;
}
.btn-hover:hover, .form button:focus {
    background: var(--primary);
    color: #f1f3f3;
}
.loading .spinner {
    display: inline-block;
}
.spinner {
    display: none;
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
label {
    font-size: 15px;
    color: var(--primary, #e0e0e0);
    display: grid;
    align-items: center;
    gap: 6px;
}
.hint-icon {
    position: absolute;
    right: 7px;
    display: inline-grid;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    background: linear-gradient(135deg, var(--accent-background), var(--primary));
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}
.hint-icon:hover, .form button.eye:hover {
    transform: scale(1.1);
}
/* Tooltip */
.hint-icon::after, .form button.eye::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    font-weight: 400;
    visibility: hidden;
    width: max-content;
    max-width: 220px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all 0.25s ease;
    pointer-events: none;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.hint-icon:hover::after, .form button.eye:hover::after {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}
.form button.eye {
    position: absolute;
    right: 3px;
    top: 50%;
    translate: 0 -50%;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.form button.eye {
    background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22url(%23a)%22%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2264%22%20y2%3D%2264%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2314e0d8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6f8e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20style%3D%22fill%3Anone%22%20d%3D%22M-896-256H384v800H-896z%22%2F%3E%3Cpath%20d%3D%22M32.513%2013.926C43.087%2014.076%2051.654%2023.82%2056%2032c0%200-1.422%202.892-2.856%204.895a46%2046%200%200%201-2.191%202.826%2041%2041%200%200%201-1.698%201.898c-5.237%205.5-12.758%209.603-20.7%208.01C19.732%2047.859%2012.823%2040.131%208.497%2032c0%200%201.248-2.964%202.69-4.964a45%2045%200%200%201%202.034-2.617%2042%2042%200%200%201%201.691-1.897c4.627-4.876%2010.564-8.63%2017.601-8.596m-.037%204c-5.89-.022-10.788%203.267-14.663%207.35a38%2038%200%200%200-1.527%201.713%2042%2042%200%200%200-1.854%202.386c-.544.755-1.057%201.805-1.451%202.59%203.773%206.468%209.286%2012.323%2016.361%2013.742%206.563%201.317%2012.688-2.301%2017.016-6.846a37%2037%200%200%200%201.534-1.715q1.05-1.25%201.999-2.579c.557-.778%201.144-1.767%201.588-2.567-3.943-6.657-10.651-13.944-19.003-14.074%22%2F%3E%3Cpath%20d%3D%22M32.158%2023.948c4.425%200%208.018%203.593%208.018%208.017a8.02%208.02%200%200%201-8.018%208.017%208.02%208.02%200%200%201-8.017-8.017%208.02%208.02%200%200%201%208.017-8.017m0%204.009a4.01%204.01%200%200%201%204.009%204.008%204.01%204.01%200%200%201-4.009%204.009%204.01%204.01%200%200%201-4.008-4.009%204.01%204.01%200%200%201%204.008-4.008%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
}
:root {
    .form button.eye.is-hidden {
        background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22url(%23a)%22%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2264%22%20y2%3D%2264%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2314e0d8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6f8e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20style%3D%22fill%3Anone%22%20d%3D%22M-960-256H320v800H-960z%22%2F%3E%3Cpath%20d%3D%22m13.673%2010.345-3.097%203.096%2039.853%2039.854%203.097-3.097z%22%2F%3E%3Cpath%20d%3D%22m17.119%2019.984%202.915%202.915c-3.191%202.717-5.732%206.099-7.374%209.058l-.005.01c4.573%207.646%2011.829%2014.872%2020.987%2013.776%202.472-.296%204.778-1.141%206.885-2.35l2.951%202.95c-4.107%202.636-8.815%204.032-13.916%203.342-9.198-1.244-16.719-8.788-21.46-17.648%202.226-4.479%205.271-8.764%209.017-12.053m6.63-4.32c2.572-1.146%205.355-1.82%208.327-1.868.165-.001%202.124.092%203.012.238a19%2019%200%200%201%201.659.35C45.472%2016.657%2051.936%2024.438%2056%2032.037c-1.705%203.443-3.938%206.398-6.601%209.277l-2.827-2.827c1.967-2.12%203.622-4.161%204.885-6.45%200%200-1.285-2.361-2.248-3.643a38%2038%200%200%200-1.954-2.395c-.54-.608-2.637-2.673-3.136-3.103-3.348-2.879-7.279-5.138-11.994-5.1-1.826.029-3.582.389-5.249.995z%22%20style%3D%22fill-rule%3Anonzero%22%2F%3E%3Cpath%20d%3D%22m25.054%2027.92%202.399%202.398a4.843%204.843%200%200%200%206.114%206.114l2.399%202.399A8.02%208.02%200%200%201%2025.054%2027.92m6.849-4.101.148-.002a8.02%208.02%200%200%201%208.017%208.017l-.001.148z%22%2F%3E%3C%2Fsvg%3E');
    }
}
/*:root[data-theme="light"] {*/
/*    .form button.eye.is-hidden {*/
/*        background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22%230f6f8e%22%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cpath%20style%3D%22fill%3Anone%22%20d%3D%22M-960-256H320v800H-960z%22%2F%3E%3Cpath%20d%3D%22m13.673%2010.345-3.097%203.096%2039.853%2039.854%203.097-3.097z%22%2F%3E%3Cpath%20d%3D%22m17.119%2019.984%202.915%202.915c-3.191%202.717-5.732%206.099-7.374%209.058l-.005.01c4.573%207.646%2011.829%2014.872%2020.987%2013.776%202.472-.296%204.778-1.141%206.885-2.35l2.951%202.95c-4.107%202.636-8.815%204.032-13.916%203.342-9.198-1.244-16.719-8.788-21.46-17.648%202.226-4.479%205.271-8.764%209.017-12.053m6.63-4.32c2.572-1.146%205.355-1.82%208.327-1.868.165-.001%202.124.092%203.012.238a19%2019%200%200%201%201.659.35C45.472%2016.657%2051.936%2024.438%2056%2032.037c-1.705%203.443-3.938%206.398-6.601%209.277l-2.827-2.827c1.967-2.12%203.622-4.161%204.885-6.45%200%200-1.285-2.361-2.248-3.643a38%2038%200%200%200-1.954-2.395c-.54-.608-2.637-2.673-3.136-3.103-3.348-2.879-7.279-5.138-11.994-5.1-1.826.029-3.582.389-5.249.995z%22%20style%3D%22fill-rule%3Anonzero%22%2F%3E%3Cpath%20d%3D%22m25.054%2027.92%202.399%202.398a4.843%204.843%200%200%200%206.114%206.114l2.399%202.399A8.02%208.02%200%200%201%2025.054%2027.92m6.849-4.101.148-.002a8.02%208.02%200%200%201%208.017%208.017l-.001.148z%22%2F%3E%3C%2Fsvg%3E');*/
/*    }*/
/*}*/
/*:root[data-theme="dark"] {*/
/*    .form button.eye.is-hidden {*/
/*        background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22url(%23gradient-fill)%22%20viewBox%3D%220%200%2064%2064%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient-fill%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22150%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2314e0d8%22%20%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230f6f8e%22%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20style%3D%22fill%3Anone%22%20d%3D%22M-960-256H320v800H-960z%22%2F%3E%3Cpath%20d%3D%22m13.673%2010.345-3.097%203.096%2039.853%2039.854%203.097-3.097z%22%2F%3E%3Cpath%20d%3D%22m17.119%2019.984%202.915%202.915c-3.191%202.717-5.732%206.099-7.374%209.058l-.005.01c4.573%207.646%2011.829%2014.872%2020.987%2013.776%202.472-.296%204.778-1.141%206.885-2.35l2.951%202.95c-4.107%202.636-8.815%204.032-13.916%203.342-9.198-1.244-16.719-8.788-21.46-17.648%202.226-4.479%205.271-8.764%209.017-12.053m6.63-4.32c2.572-1.146%205.355-1.82%208.327-1.868.165-.001%202.124.092%203.012.238a19%2019%200%200%201%201.659.35C45.472%2016.657%2051.936%2024.438%2056%2032.037c-1.705%203.443-3.938%206.398-6.601%209.277l-2.827-2.827c1.967-2.12%203.622-4.161%204.885-6.45%200%200-1.285-2.361-2.248-3.643a38%2038%200%200%200-1.954-2.395c-.54-.608-2.637-2.673-3.136-3.103-3.348-2.879-7.279-5.138-11.994-5.1-1.826.029-3.582.389-5.249.995z%22%20style%3D%22fill-rule%3Anonzero%22%2F%3E%3Cpath%20d%3D%22m25.054%2027.92%202.399%202.398a4.843%204.843%200%200%200%206.114%206.114l2.399%202.399A8.02%208.02%200%200%201%2025.054%2027.92m6.849-4.101.148-.002a8.02%208.02%200%200%201%208.017%208.017l-.001.148z%22%2F%3E%3C%2Fsvg%3E');*/
/*    }*/
/*}*/

/* === БЛОК УВЕДОМЛЕНИЙ === */
/* Контейнер */
#notify {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
}
/* Карточка уведомления */
.notify {
    min-width: 280px;
    max-width: 400px;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.4s ease;
    pointer-events: all;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--input-bg);
    box-shadow: 0 0 40px rgba(20, 224, 216, 0.05);
}
/* Типы уведомлений */
.notify.success svg {
    stroke: green;
}
.notify.error svg {
    stroke: red;
}
.notify.info svg {
    stroke: yellow;
}
.notify.show {
    opacity: 1;
    transform: translateX(0);
}
/* Иконки */
.notify svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
/* Текст */
.notify p {
    margin: 0;
}

/* === МОДАЛЬНОЕ ОКНО === */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: var(--bg-modal);
    backdrop-filter: blur(4px);
    z-index: 100;
}

.modal.open {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background: var(--bg-modal-content);
    padding: 2rem;
    width: 400px;
    animation: slideUp 0.4s ease;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--input-bg);
    box-shadow: 0 0 40px rgba(20, 224, 216, 0.05);
    text-align: center;
}

.modal-content input,
.modal-content textarea {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.6rem;
    border: 1px solid #444;
    background: #2a2e31;
    color: #fff;
    border-radius: 6px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

.modal-actions button {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.modal-actions button:first-child {
    background: #444;
    color: #fff;
}

.modal-actions button:last-child {
    background: #00e676;
    color: #000;
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }