/* Nunito is self-hosted and only applied inside the phone breakpoint below. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('fonts/nunito-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('fonts/nunito-latin-wght-normal.woff2') format('woff2');
    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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg-color: #FDF6E3; --surface-color: #FFF0D9; --text-main: #5D4037; --text-light: #A1887F;
    --accent-peach: #FFCCBC; --accent-orange: #FFAB91; --accent-red: #EF9A9A; --accent-green: #C8E6C9;
    --shadow-outer: 8px 8px 16px #E6DCC8, -8px -8px 16px #FFFFFF;
    --shadow-inner: inset 6px 6px 12px #E6DCC8, inset -6px -6px 12px #FFFFFF;
    --shadow-btn: 5px 5px 10px #E6DCC8, -5px -5px 10px #FFFFFF; --radius: 20px;
    --accent-family: #E91E63;
}
body.dark-theme {
    --bg-color: #2D2420; --surface-color: #3E322C; --text-main: #FDF6E3; --text-light: #BCAAA4;
    --accent-peach: #8D6E63; --accent-orange: #A1887F; --accent-red: #E57373; --accent-green: #81C784;
    --shadow-outer: 8px 8px 16px #1F1815, -8px -8px 16px #3B302B;
    --shadow-inner: inset 6px 6px 12px #1F1815, inset -6px -6px 12px #3B302B;
    --shadow-btn: 5px 5px 10px #1F1815, -5px -5px 10px #3B302B;
    --accent-family: #F06292;
}
body.sea-theme { --bg-color: #E0F7FA; --surface-color: #B2EBF2; --text-main: #006064; --text-light: #00838F; --accent-peach: #80DEEA; --accent-orange: #4DD0E1; --accent-red: #FF8A80; --accent-green: #A5D6A7; --shadow-outer: 8px 8px 16px #B2DFDB, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #B2DFDB, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #B2DFDB, -5px -5px 10px #FFFFFF; --accent-family: #E91E63; }
body.lavender-theme { --bg-color: #F8F0FF; --surface-color: #ECD5FF; --text-main: #4A2B5A; --text-light: #8A6A9A; --accent-peach: #D9B8FF; --accent-orange: #C9A0FF; --accent-red: #E5A8F5; --accent-green: #C8E6C9; --shadow-outer: 8px 8px 16px #DCC6E8, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #DCC6E8, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #DCC6E8, -5px -5px 10px #FFFFFF; --accent-family: #9C27B0; }
body.coffee-theme { --bg-color: #F6F0E6; --surface-color: #E6D5C3; --text-main: #4E3A2C; --text-light: #8B735F; --accent-peach: #D4B59C; --accent-orange: #C49A7C; --accent-red: #E8AFA3; --accent-green: #B6C8A2; --shadow-outer: 8px 8px 16px #D2C1AE, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #D2C1AE, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #D2C1AE, -5px -5px 10px #FFFFFF; --accent-family: #5D4037; }
body.midnight-theme { --bg-color: #1A2233; --surface-color: #2A344A; --text-main: #D9E2F0; --text-light: #8899B0; --accent-peach: #4A6EA8; --accent-orange: #5684C9; --accent-red: #D16F7A; --accent-green: #6B9E8C; --shadow-outer: 8px 8px 16px #121A2B, -8px -8px 16px #323C52; --shadow-inner: inset 6px 6px 12px #121A2B, inset -6px -6px 12px #323C52; --shadow-btn: 5px 5px 10px #121A2B, -5px -5px 10px #323C52; --accent-family: #7986CB; }
body.autumn-theme { --bg-color: #FAF1E4; --surface-color: #F4DEC4; --text-main: #6D4A31; --text-light: #A9826B; --accent-peach: #E8A87C; --accent-orange: #E58A5D; --accent-red: #D17A6B; --accent-green: #A9C4A4; --shadow-outer: 8px 8px 16px #E0D0BB, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #E0D0BB, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #E0D0BB, -5px -5px 10px #FFFFFF; --accent-family: #FF6F00; }
body.cyber-theme { --bg-color: #0D1117; --surface-color: #161B22; --text-main: #C9D1D9; --text-light: #8B949E; --accent-peach: #FF7B9C; --accent-orange: #58A6FF; --accent-red: #F85149; --accent-green: #3FB950; --shadow-outer: 6px 6px 12px #090C10, -6px -6px 12px #1A212B; --shadow-inner: inset 6px 6px 12px #090C10, inset -6px -6px 12px #1A212B; --shadow-btn: 6px 6px 12px #090C10, -6px -6px 12px #1A212B; --radius: 12px; --accent-family: #00E5FF; }
body.sunset-theme { --bg-color: #FFEADD; --surface-color: #FFDAB9; --text-main: #6B3E2E; --text-light: #A56B4B; --accent-peach: #F4A460; --accent-orange: #FF8C42; --accent-red: #CD5C5C; --accent-green: #8FBC8F; --shadow-outer: 8px 8px 16px #E6CBB5, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #E6CBB5, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #E6CBB5, -5px -5px 10px #FFFFFF; --accent-family: #FF5722; }
body.ocean-theme { --bg-color: #E0F2F1; --surface-color: #B2DFDB; --text-main: #004D40; --text-light: #00695C; --accent-peach: #80CBC4; --accent-orange: #4DB6AC; --accent-red: #FF8A80; --accent-green: #A5D6A7; --shadow-outer: 8px 8px 16px #B2DFDB, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #B2DFDB, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #B2DFDB, -5px -5px 10px #FFFFFF; --accent-family: #00BCD4; }
body.sakura-theme { --bg-color: #FFF0F5; --surface-color: #FFB6C1; --text-main: #4A1C2E; --text-light: #A15A6B; --accent-peach: #FF9EAA; --accent-orange: #FF7F99; --accent-red: #E53E5A; --accent-green: #B4D4B9; --shadow-outer: 8px 8px 16px #E6CED6, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #E6CED6, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #E6CED6, -5px -5px 10px #FFFFFF; --accent-family: #C2185B; }
body.retro-theme { --bg-color: #FAEBD7; --surface-color: #DEB887; --text-main: #3D2B1F; --text-light: #5A4A3A; --accent-peach: #C19A6B; --accent-orange: #D2B48C; --accent-red: #A0522D; --accent-green: #8FBC8F; --shadow-outer: 8px 8px 16px #C8B090, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #C8B090, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #C8B090, -5px -5px 10px #FFFFFF; --accent-family: #795548; }
body.nightcity-theme { --bg-color: #1A1A2E; --surface-color: #16213E; --text-main: #E5E7EB; --text-light: #9CA3AF; --accent-peach: #F472B6; --accent-orange: #38BDF8; --accent-red: #F87171; --accent-green: #34D399; --shadow-outer: 8px 8px 16px #0F0F1A, -8px -8px 16px #1D1D33; --shadow-inner: inset 6px 6px 12px #0F0F1A, inset -6px -6px 12px #1D1D33; --shadow-btn: 5px 5px 10px #0F0F1A, -5px -5px 10px #1D1D33; --accent-family: #F472B6; }
body.desert-theme { --bg-color: #F4ECE0; --surface-color: #E0D4C0; --text-main: #5A4532; --text-light: #8B765A; --accent-peach: #D8B58C; --accent-orange: #C69C6D; --accent-red: #B88A6D; --accent-green: #B5B38A; --shadow-outer: 8px 8px 16px #D0C4B0, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #D0C4B0, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #D0C4B0, -5px -5px 10px #FFFFFF; --accent-family: #FFB300; }
body.galaxy-theme { --bg-color: #0D0D1A; --surface-color: #1A1A3A; --text-main: #D9D9FF; --text-light: #7A7AAC; --accent-peach: #6A5ACD; --accent-orange: #4169E1; --accent-red: #FF6B6B; --accent-green: #48D1CC; --shadow-outer: 8px 8px 16px #080812, -8px -8px 16px #1A1A3A; --shadow-inner: inset 6px 6px 12px #080812, inset -6px -6px 12px #1A1A3A; --shadow-btn: 5px 5px 10px #080812, -5px -5px 10px #1A1A3A; --accent-family: #7C4DFF; }
body.neon-theme { --bg-color: #101010; --surface-color: #1A1A1A; --text-main: #E0E0E0; --text-light: #8A8A8A; --accent-peach: #FF00FF; --accent-orange: #00FFFF; --accent-red: #FF4500; --accent-green: #39FF14; --shadow-outer: 8px 8px 16px #080808, -8px -8px 16px #1E1E1E; --shadow-inner: inset 6px 6px 12px #080808, inset -6px -6px 12px #1E1E1E; --shadow-btn: 5px 5px 10px #080808, -5px -5px 10px #1E1E1E; --accent-family: #FF4081; }
body.candy-theme { --bg-color: #FFF0F5; --surface-color: #FFD1DC; --text-main: #4A1942; --text-light: #A65C8A; --accent-peach: #FFB6C1; --accent-orange: #FF69B4; --accent-red: #FF1493; --accent-green: #C8E6C9; --shadow-outer: 8px 8px 16px #EAC0CE, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #EAC0CE, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #EAC0CE, -5px -5px 10px #FFFFFF; --accent-family: #F50057; }
body.matte-theme { --bg-color: #1A1A1A; --surface-color: #2A2A2A; --text-main: #F0F0F0; --text-light: #A0A0A0; --accent-peach: #404040; --accent-orange: #606060; --accent-red: #B04040; --accent-green: #408040; --shadow-outer: 8px 8px 16px #101010, -8px -8px 16px #2A2A2A; --shadow-inner: inset 6px 6px 12px #101010, inset -6px -6px 12px #2A2A2A; --shadow-btn: 5px 5px 10px #101010, -5px -5px 10px #2A2A2A; --accent-family: #B0BEC5; }
body.chocolate-theme { --bg-color: #3E2723; --surface-color: #4E342E; --text-main: #F5F5DC; --text-light: #D2B48C; --accent-peach: #6D4C41; --accent-orange: #8D6E63; --accent-red: #A0522D; --accent-green: #A9C4A4; --shadow-outer: 8px 8px 16px #2E1C1A, -8px -8px 16px #4A302C; --shadow-inner: inset 6px 6px 12px #2E1C1A, inset -6px -6px 12px #4A302C; --shadow-btn: 5px 5px 10px #2E1C1A, -5px -5px 10px #4A302C; --accent-family: #FFAB91; }
body.miku-theme { --bg-color: #E8F8F6; --surface-color: #D4F1EE; --text-main: #214F54; --text-light: #5E8D91; --accent-peach: #8DE1DA; --accent-orange: #39C5BB; --accent-red: #E86A92; --accent-green: #72D6AF; --shadow-outer: 8px 8px 16px #C7DEDC, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #C7DEDC, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #C7DEDC, -5px -5px 10px #FFFFFF; --accent-family: #E55B87; }

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Comic Sans MS', cursive, sans-serif; user-select: none; transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s; }
html.flux-icons-pending body { visibility: hidden; }
html.flux-icons-ready body { visibility: visible; }
/* Сессия определяется в <head>, до разбора body: форма входа не успевает мигнуть. */
html.flux-session-restoring #auth-container { display: none !important; }
.flux-icon { width: 1.22em; height: 1.22em; display: inline-block; flex: 0 0 auto; vertical-align: -0.24em; overflow: visible; filter: drop-shadow(0 2px 2px rgba(73,55,68,.16)); }
.flux-inline-icon { margin: 0 .16em; pointer-events: none; }
.flux-icon use { transform-origin: center; }
.modal-title > .flux-icon, .setting-label > .flux-icon, h3 > .flux-icon { filter: drop-shadow(0 3px 4px rgba(73,55,68,.18)); }
button .flux-inline-icon, .modal-title .flux-inline-icon, .setting-label .flux-inline-icon, h3 .flux-inline-icon { margin-left: 0; }
button:hover > .flux-icon, label:hover > .flux-icon { transform: translateY(-1px) scale(1.06); }
button:active > .flux-icon { transform: scale(.93); }
.close-cross .flux-icon { width: 1em; height: 1em; margin: 0; }
.toast .flux-icon { width: 1.45em; height: 1.45em; margin-right: .45em; }
.flux-theme-select-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; }
.flux-theme-select-icon { width: 48px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-color); box-shadow: var(--shadow-inner); flex: 0 0 auto; }
.flux-theme-select-icon .flux-icon { width: 31px; height: 31px; }
.theme-picker-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: none; background: transparent; border-radius: 14px; cursor: pointer; text-align: left; }
.theme-picker-trigger:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
.theme-picker-trigger-label { flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 15px; font-weight: 800; color: var(--text-main); border-radius: 13px; background: var(--surface-color); box-shadow: var(--shadow-inner); line-height: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-picker-trigger-chevron { flex: 0 0 auto; width: 22px; height: 22px; color: var(--text-light); display: grid; place-items: center; font-size: 16px; }
.theme-picker-trigger:hover .theme-picker-trigger-label { box-shadow: var(--shadow-outer); }
.theme-picker-trigger:active .theme-picker-trigger-label { box-shadow: var(--shadow-inner); }

.theme-picker-overlay { z-index: 3000; background: rgba(18, 20, 28, .58); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.theme-picker-modal { width: 760px !important; max-width: 95% !important; max-height: 86vh; display: flex; flex-direction: column; padding: 25px 22px 20px !important; }
.theme-picker-hint { margin: -6px 0 14px; font-size: 13px; color: var(--text-light); line-height: 1.45; }
.theme-picker-modal .modal-title { padding-right: 40px; }
.theme-picker-actions { display: flex; justify-content: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--surface-color); }
.theme-picker-actions .modal-btn { min-width: 160px; }
.theme-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow-y: auto; padding: 4px 6px 10px; overscroll-behavior: contain; }
.theme-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--surface-color); border: 2px solid transparent; border-radius: 16px; cursor: pointer; box-shadow: var(--shadow-inner); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; text-align: left; contain: content; }
.theme-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-outer); }
.theme-card:active { transform: scale(.97); }
.theme-card:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.theme-card-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background-color: var(--bg-color); background-size: 600% 500%; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.theme-card-name { font-size: 13px; font-weight: 800; color: var(--text-main); line-height: 1.3; }
.theme-card.is-current { border-color: var(--accent-orange); }
.theme-card.is-current::after { content: '✓'; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-orange); color: #fff; font-size: 14px; font-weight: 900; line-height: 1; box-shadow: 0 3px 8px rgba(0,0,0,.28); }
@media (max-width: 700px) {
    .theme-picker-modal { max-height: 92vh; padding: 20px 16px 14px; }
    .theme-picker-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 2px 4px 8px; }
    .theme-card { gap: 6px; padding: 6px; border-radius: 13px; }
    .theme-card-name { font-size: 12px; }
    .theme-picker-trigger-label { font-size: 14px; line-height: 42px; }
}
html, body { width: 100%; min-height: 100%; }
body { background-color: var(--bg-color); color: var(--text-main); height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
#app-main { height: 100vh !important; height: 100dvh !important; min-height: 0; }
#maintenance-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg-color); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 99999; color: var(--text-main); text-align: center; padding: 20px; }
#maintenance-overlay.active { display: flex; }
#maintenance-overlay h1 { font-size: 42px; margin-bottom: 20px; }
#maintenance-overlay p { font-size: 18px; color: var(--text-light); }

header { height: 70px; padding: 10px 20px; display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.brand-wrapper { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.logo { font-size: 38px; font-weight: 800; letter-spacing: 3px; color: var(--text-main); cursor: pointer; }
.slogan { font-size: 10px; color: var(--text-light); font-style: italic; }
.nav-buttons-full { display: flex; gap: 8px; flex: 1; height: 40px; }
.nav-btn-full { flex: 1; border: none; border-radius: 40px; background: var(--bg-color); box-shadow: var(--shadow-btn); cursor: pointer; font-size: 13px; font-weight: bold; color: var(--text-main); transition: all 0.2s; padding: 0 10px; }
.nav-btn-full:hover { transform: translateY(-2px); box-shadow: var(--shadow-outer); }
.nav-btn-full:active { transform: scale(0.97); box-shadow: var(--shadow-inner); }

/* Зелёный бейдж «NEW» на кнопке «Заметки» — горит, пока пользователь
   не открыл заметки в этой версии (или до следующего обновления). */
.nav-btn-notes { position: relative; }
.new-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4FCB8F, #2E9E6B);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(46, 158, 107, .5);
    pointer-events: none;
    animation: newBadgeGlow 2s ease-in-out infinite;
}
@keyframes newBadgeGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(46, 158, 107, .35); transform: scale(1); }
    50% { box-shadow: 0 0 26px 6px rgba(79, 203, 143, .65); transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .new-badge { animation: none; }
}

main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 15px; padding: 0 20px max(12px, env(safe-area-inset-bottom)); overflow: hidden; }
.left-panel { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.task-container-split { flex: 1; display: flex; flex-direction: column; background: var(--bg-color); border-radius: 25px; box-shadow: var(--shadow-inner); padding: 20px 20px; overflow: hidden; }
.task-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-bottom: 2px dashed var(--text-light); padding-bottom: 10px; }
.completed-section { border-bottom: none; opacity: 0.7; flex: 0.4; padding-bottom: 10px; }
.section-title { font-size: 15px; font-weight: bold; margin-bottom: 8px; color: var(--text-main); }
.task-list { flex: 1; overflow-y: auto; padding-right: 5px; display: flex; flex-direction: column; gap: 8px; }
.task-list::-webkit-scrollbar { width: 5px; }
.task-list::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }

.task-item { display: flex; align-items: center; padding: 10px 15px; border-radius: 15px; background: var(--bg-color); box-shadow: var(--shadow-btn); cursor: grab; font-size: 14px; position: relative; animation: slideInLeft 0.4s ease-out forwards; opacity: 0; border-left: 4px solid var(--text-light); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.task-item:active { cursor: grabbing; }
.task-item:hover { transform: translateX(5px); }
.task-item:active:not(:active) { box-shadow: var(--shadow-inner); transform: scale(0.98); }
.task-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-text { flex: 1; min-width: 0; word-break: break-word; }
.task-datetime { font-size: 10px; line-height: 1.25; color: var(--text-light); font-weight: 700; }
.task-item.task-overdue .task-datetime { color: #c62828; }
.task-item.type-task { border-left-color: #4285F4; background: rgba(66, 133, 244, 0.08); }
.task-item.type-task .task-text { color: #1A73E8; }
.task-item.type-event { border-left-color: #9C27B0; background: rgba(156, 39, 176, 0.08); }
.task-item.type-event .task-text { color: #7B1FA2; }
.task-item.type-reminder { border-left-color: #009688; background: rgba(0, 150, 136, 0.08); }
.task-item.type-reminder .task-text { color: #00796B; }
.task-item.task-overdue { border-left-color: #e53935 !important; background: linear-gradient(90deg, rgba(229, 57, 53, .16), rgba(229, 57, 53, .045)); animation: overduePulse 2.2s ease-in-out infinite, slideInLeft .4s ease-out forwards; }
.task-item.task-overdue .task-text { color: #c62828 !important; font-weight: 800; }
.task-overdue-label { margin-left: auto; margin-right: 8px; padding: 3px 8px; border-radius: 999px; color: #b71c1c; background: rgba(229, 57, 53, .14); font-size: 10px; font-weight: 800; white-space: nowrap; }
.task-repeat-label { margin-left: auto; margin-right: 8px; padding: 3px 7px; border-radius: 999px; color: var(--accent-orange); background: rgba(255, 145, 112, .14); font-size: 10px; font-weight: 800; white-space: nowrap; }
@keyframes overduePulse { 0%, 100% { box-shadow: var(--shadow-btn), 0 0 0 rgba(229, 57, 53, 0); } 50% { box-shadow: var(--shadow-btn), 0 0 14px rgba(229, 57, 53, .34); } }
.task-item.task-priority-high { border-left-color: #FF9800; background: rgba(255, 152, 0, 0.08); }
.task-item.task-priority-high .task-text { font-weight: bold; color: #E65100; }
.all-task-item.priority-high { border-left: 5px solid #FF9800; background: rgba(255, 152, 0, 0.08); }

.check-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-light); display: flex; align-items: center; justify-content: center; margin-left: 10px; flex-shrink: 0; }
.check-circle.done { background: var(--accent-green); border-color: var(--accent-green); }
.check-circle.done::after { content: ''; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.task-delete-btn {
    display: none;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--accent-red);
    font-size: 17px;
    cursor: pointer;
    touch-action: manipulation;
}
.task-delete-btn:active { background: var(--surface-color); transform: scale(0.94); }

.add-task-btn { width: 100%; padding: 14px; border: none; border-radius: 25px; background: var(--accent-peach); color: var(--text-main); font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: var(--shadow-btn); transition: all 0.2s; }
.add-task-btn:hover { filter: brightness(0.96); transform: translateY(-2px); box-shadow: var(--shadow-outer); }
.add-task-btn:active { transform: scale(0.98); box-shadow: var(--shadow-inner); }

.profile-oval { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--bg-color); padding: 8px 12px; border-radius: 50px; box-shadow: var(--shadow-btn); cursor: pointer; width: 100%; transition: transform 0.2s, box-shadow 0.2s; }
.profile-oval:hover { transform: translateY(-2px); box-shadow: var(--shadow-outer); }
.profile-oval .avatar-tiny { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-peach); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; border: none; }
.profile-oval .user-name-tiny { font-size: 15px; font-weight: bold; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-sync-status {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
}
.account-sync-status:hover { background: var(--surface-color); color: var(--text-main); }
.account-sync-status[data-state="syncing"] #account-sync-icon { animation: syncPulse 1s ease-in-out infinite; }
.account-sync-status[data-state="saved"] { color: #2E7D32; }
.account-sync-status[data-state="offline"], .account-sync-status[data-state="error"] { color: var(--accent-red); }
@keyframes syncPulse { 50% { transform: scale(1.18); opacity: .55; } }

.date-widget-big { padding: 14px 15px; border-radius: 25px; background: var(--bg-color); box-shadow: var(--shadow-outer); font-size: 15px; font-weight: bold; text-align: center; line-height: 1.4; flex-shrink: 0; width: 100%; }

.right-panel { background: var(--bg-color); background: color-mix(in srgb, var(--bg-color) 68%, transparent); backdrop-filter: blur(1.5px); border-radius: 30px; box-shadow: var(--shadow-outer); padding: 15px 15px 0 15px; display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
.view-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 20px; font-weight: bold; z-index: 2; }
.sticky-header { position: sticky; top: 0; background: var(--bg-color); padding-bottom: 6px; z-index: 10; }
.cal-nav-btn { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--text-light); padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-nav-btn:hover { color: var(--text-main); transform: scale(1.1); }
.cal-nav-btn:active { box-shadow: var(--shadow-inner); color: var(--text-main); transform: scale(0.95); }
.view-toggle-btn { background: var(--surface-color); border: none; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; color: var(--text-main); cursor: pointer; box-shadow: var(--shadow-btn); }
.calendar-grid-wrapper { flex: 1; position: relative; margin: 0 -15px; padding: 0 15px 15px 15px; overflow: hidden; min-height: 0; min-width: 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 28px; grid-auto-rows: minmax(0, 1fr); gap: 8px; height: 100%; min-height: 0; min-width: 0; position: relative; width: 100%; transition: opacity 0.3s ease, transform 0.3s ease; }
.grid-exit-left { transform: translateX(-50px); opacity: 0; } .grid-exit-right { transform: translateX(50px); opacity: 0; }
.grid-enter-left { transform: translateX(-50px); opacity: 0; } .grid-enter-right { transform: translateX(50px); opacity: 0; }
.day-name { text-align: center; font-weight: bold; color: var(--text-light); display: flex; align-items: center; justify-content: center; font-size: 13px; padding-bottom: 5px; }
.day-cell { background: var(--bg-color); background: color-mix(in srgb, var(--bg-color) 82%, transparent); backdrop-filter: blur(.8px); border-radius: 16px; box-shadow: var(--shadow-btn); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 7px; font-size: 16px; cursor: pointer; position: relative; min-height: 0; min-width: 0; width: 100%; overflow: hidden; }
.day-cell:hover { transform: translateY(-2px) scale(1.01); color: var(--accent-orange); z-index: 2; }
.day-cell:active { box-shadow: var(--shadow-inner); transform: scale(0.98); }
.day-cell.today { background: var(--accent-peach); box-shadow: var(--shadow-inner); font-weight: bold; }
.day-cell.other-month { opacity: 0.3; filter: grayscale(0.8); box-shadow: none; background: transparent; }
.day-number { align-self: flex-end; flex: 0 0 auto; min-width: 20px; text-align: center; font-size: 13px; line-height: 1; font-weight: 800; color: var(--text-main); }
.day-entry-list { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-peach) transparent; }
.day-entry-list::-webkit-scrollbar { width: 3px; }
.day-entry-list::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }
.day-entry { width: 100%; min-width: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; border: 0; border-left: 3px solid var(--text-light); border-radius: 6px; padding: 3px 5px; background: var(--surface-color); color: var(--text-main); font: inherit; font-size: 9.5px; line-height: 1.15; text-align: left; cursor: pointer; }
.day-entry:hover { filter: brightness(0.97); transform: translateX(1px); }
.day-entry.type-task { border-left-color: #4285F4; background: rgba(66, 133, 244, 0.12); }
.day-entry.type-event { border-left-color: #9C27B0; background: rgba(156, 39, 176, 0.12); }
.day-entry.type-reminder { border-left-color: #009688; background: rgba(0, 150, 136, 0.12); }
.day-entry.is-priority { box-shadow: inset 0 0 0 1px rgba(255, 152, 0, .55); }
.day-entry.is-completed { opacity: .58; }
.day-entry.is-completed .day-entry-title { text-decoration: line-through; }
.day-entry-time { flex: 0 0 auto; font-weight: 800; white-space: nowrap; }
.day-entry-title { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.day-cell.has-task-uncompleted::after { content: ''; position: absolute; bottom: 8px; width: 6px; height: 6px; background: var(--accent-red); border-radius: 50%; box-shadow: 0 0 6px var(--accent-red); align-self: center; }
.day-cell.has-task-completed::after { content: ''; position: absolute; bottom: 8px; width: 6px; height: 6px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 6px var(--accent-green); align-self: center; }
.day-cell.has-calendar-entries::after { display: none; }

.mobile-day-agenda { display: none; margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--surface-color); box-shadow: var(--shadow-inner); }
.mobile-day-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mobile-day-agenda-title { font-size: 15px; font-weight: 800; text-transform: capitalize; }
.mobile-day-add { border: 0; border-radius: 12px; padding: 8px 12px; background: var(--accent-peach); color: var(--text-main); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.mobile-day-agenda-list { display: flex; flex-direction: column; gap: 7px; }
.mobile-day-agenda-empty { padding: 14px 8px; text-align: center; color: var(--text-light); font-size: 13px; }
.mobile-agenda-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-left: 4px solid var(--text-light); border-radius: 12px; padding: 10px 12px; background: var(--bg-color); color: var(--text-main); box-shadow: var(--shadow-btn); font: inherit; text-align: left; cursor: pointer; }
.mobile-agenda-item.type-task { border-left-color: #4285F4; }
.mobile-agenda-item.type-event { border-left-color: #9C27B0; }
.mobile-agenda-item.type-reminder { border-left-color: #009688; }
.mobile-agenda-item.is-completed { opacity: .58; }
.mobile-agenda-item.is-completed strong { text-decoration: line-through; }
.mobile-agenda-time { min-width: 78px; flex: 0 0 auto; font-size: 12px; font-weight: 800; }
.mobile-agenda-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-agenda-content strong { font-size: 13px; overflow-wrap: anywhere; }
.mobile-agenda-content small { color: var(--text-light); font-size: 10px; }

.schedule-wrapper { flex: 1; position: relative; overflow-y: auto; display: flex; flex-direction: column; padding: 0 8px 8px 8px; min-height: 0; }
.schedule-wrapper::-webkit-scrollbar { width: 5px; }
.schedule-wrapper::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }
/* 24h grid: 24 × 60px. Top pad keeps 00:00 label visible; no extra bottom strip. */
.timeline-container {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 1440px;
    margin: 0;
    padding: 12px 0 0 68px;
    box-sizing: content-box;
}
.time-slot {
    height: 60px;
    border-top: 1px solid var(--surface-color);
    border-bottom: none;
    position: relative;
    display: block;
    box-sizing: border-box;
}
.time-slot:last-child {
    border-bottom: 1px solid var(--surface-color);
}
.time-label-side {
    position: absolute;
    left: -64px;
    width: 56px;
    text-align: right;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-light);
    top: 0;
    transform: translateY(-50%);
    line-height: 1;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}
/* First hour label sits fully inside the top padding, not clipped. */
.time-slot:first-child .time-label-side {
    transform: translateY(0);
    top: 0;
}
.timeline-event {
    position: absolute;
    left: 68px;
    background: rgba(239, 154, 154, 0.25);
    border-left: 4px solid var(--accent-red);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text-main);
    overflow: hidden;
    z-index: 10;
    min-width: 0;
    box-shadow: 0 2px 8px rgba(239, 154, 154, 0.2);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.timeline-event:hover { transform: scale(1.01); box-shadow: 0 4px 12px rgba(239, 154, 154, 0.35); z-index: 11; }
.timeline-event strong { display: block; font-size: 14px; font-weight: bold; margin-bottom: 2px; }
.timeline-event span { font-size: 12px; opacity: 0.9; display: flex; align-items: center; gap: 4px; }
.timeline-event.type-task { background: rgba(66, 133, 244, 0.15); border-left-color: #4285F4; }
.timeline-event.type-event { background: rgba(156, 39, 176, 0.15); border-left-color: #9C27B0; }
.timeline-event.type-reminder { background: rgba(0, 150, 136, 0.15); border-left-color: #009688; }
.timeline-event.is-completed { opacity: .62; filter: saturate(.7); }
.timeline-event.is-completed strong { text-decoration: line-through; }

/* Line lives inside the padded content area (after the time column). */
.current-time-line {
    position: absolute;
    left: 68px;
    right: 8px;
    height: 2px;
    background: var(--accent-red);
    z-index: 20;
    pointer-events: none;
    top: 12px;
    transition: top 0.5s linear;
    margin: 0;
}
.current-time-line .time-label {
    position: absolute;
    left: -62px;
    top: -9px;
    background: var(--accent-red);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    z-index: 21;
    white-space: nowrap;
}
.current-time-line .line {
    width: 100%;
    height: 2px;
    background: var(--accent-red);
}

#toast-container { position: fixed; top: 30px; right: 30px; z-index: 10000; display: flex; flex-direction: column; gap: 15px; }
.toast { background: var(--bg-color); color: var(--text-main); padding: 15px 25px; border-radius: var(--radius); box-shadow: var(--shadow-outer); min-width: 250px; animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-left: 6px solid var(--accent-orange); display: flex; justify-content: flex-start; align-items: center; gap: 8px; }
.toast-label { min-width: 0; flex: 1; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.active { visibility: visible; opacity: 1; }
.custom-modal { background: var(--bg-color); padding: 25px; border-radius: 30px; box-shadow: var(--shadow-outer); width: 450px; max-width: 90%; text-align: center; position: relative; }
.modal-overlay.active .custom-modal { transform: scale(1) translateY(0); }
.auth-modal { width: 400px !important; padding: 30px !important; }
.small-modal { width: 350px !important; padding: 20px !important; }
.wide-modal { width: 600px !important; max-height: 80vh; display: flex; flex-direction: column; }
.settings-modal { width: 420px !important; padding: 20px !important; max-height: 90vh; overflow-y: auto !important; }
.dev-modal { width: 600px !important; max-height: 90vh; padding: 20px !important; overflow-y: auto !important; display: flex; flex-direction: column; }
.settings-modal::-webkit-scrollbar { width: 6px; }
.settings-modal::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }
.notification-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notification-help-actions .modal-btn { width: 100%; margin: 0; font-size: 12px; padding: 9px 7px; }
.notification-guide-button { background: color-mix(in srgb, var(--accent-orange) 18%, var(--bg-color)); color: var(--text-main); border: 1px solid color-mix(in srgb, var(--accent-orange) 45%, transparent); }
#modal-notification-guide { z-index: 5200; padding: 12px; }
.notification-guide-modal { width: min(720px, calc(100vw - 24px)) !important; max-width: 720px; max-height: calc(100dvh - 24px); padding: 24px !important; overflow-y: auto; text-align: left; }
.notification-guide-modal .modal-title { text-align: center; padding-right: 28px; }
.notification-guide-lead { margin: -4px 0 16px; color: var(--text-light); font-size: 13px; line-height: 1.45; text-align: center; }
.notification-guide-card { margin: 0 0 10px; padding: 15px 17px; border-radius: 15px; color: #27333A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.notification-guide-card h3 { margin: 0 0 9px; font-size: 14px; color: #26343C; }
.notification-guide-card ol, .notification-guide-card ul { margin: 0; padding-left: 20px; }
.notification-guide-card li { margin: 5px 0; font-size: 12px; line-height: 1.42; }
.notification-guide-card small { display: block; margin-top: 9px; color: rgba(40,52,60,.64); font-size: 10px; line-height: 1.4; }
.guide-desktop { background: #E6F3FC; }
.guide-mac { background: #F0E4FA; }
.guide-trouble { background: #F4E7FA; }
.guide-ios { background: #EEE4FC; }
.guide-android { background: #DDF4E6; }
.notification-guide-close { display: block; width: 100%; margin-top: 14px; padding: 12px; }
.notification-guide-modal::-webkit-scrollbar { width: 6px; }
.notification-guide-modal::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }
.dev-modal::-webkit-scrollbar { width: 6px; }
.dev-modal::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }
.login-fact-box { font-size: 13px; color: var(--text-light); background: var(--surface-color); padding: 10px; border-radius: 12px; margin-bottom: 20px; font-style: italic; text-align: center; }
.auth-recovery-link, .auth-back-link { border: 0; background: transparent; color: var(--accent-orange); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 7px 10px; }
.auth-recovery-link:hover, .auth-back-link:hover { text-decoration: underline; }
.recovery-modal { width: 430px !important; }
.recovery-tabs .ios-segment { border: 0; background: transparent; font-family: inherit; }
.recovery-tabs .ios-segment.active { background: var(--bg-color); }
.recovery-hint { margin: 0 0 14px; color: var(--text-light); font-size: 13px; line-height: 1.45; text-align: left; }
.recovery-code-step { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--surface-color); }
.recovery-code-input { text-align: center; font-size: 23px; font-weight: 900; letter-spacing: 8px; }
.recovery-code-step[hidden], #recovery-password-panel[hidden], #recovery-email-panel[hidden], .recovered-email[hidden] { display: none !important; }
.recovered-email { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--surface-color); display: flex; flex-direction: column; gap: 8px; }
.recovered-email span { color: var(--text-light); font-size: 11px; }
.recovered-email strong { color: var(--text-main); font-size: 17px; word-break: break-all; }
.auth-method-tabs { margin-bottom: 12px; }
.auth-method-tabs .ios-segment { border: 0; background: transparent; font-family: inherit; }
.auth-method-tabs .ios-segment.active { background: var(--bg-color); }
.auth-method-hint { margin: -4px 0 12px; color: var(--text-light); font-size: 11px; line-height: 1.4; text-align: left; }
.registration-code-step { margin: 2px 0 12px; padding: 12px 12px 0; border-radius: 14px; background: var(--surface-color); }
.registration-code-step[hidden], .email-login-code-step[hidden], #login-password-step[hidden], .account-contact-editor[hidden], #account-contact-code-step[hidden] { display: none !important; }
.email-login-code-step { margin: 2px 0 12px; padding: 12px; border-radius: 14px; background: var(--surface-color); }
.auth-resend-link { border: 0; background: transparent; color: var(--accent-orange); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.oauth-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; color: var(--text-light); font-size: 10px; }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--text-light) 24%, transparent); }
.oauth-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 8px; }
.oauth-buttons-single { grid-template-columns: minmax(0, 1fr); }
.oauth-button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .15s, opacity .15s; }
.oauth-button:hover { transform: translateY(-1px); }
.oauth-button:active { transform: scale(.98); }
.oauth-button:disabled { cursor: default; opacity: .46; transform: none; }
.oauth-button b { min-width: 23px; font-size: 14px; }
.oauth-yandex { background: #111; }
.oauth-yandex b { color: #ff3333; }
.oauth-contact-row strong.is-connected { color: #2e9b57; }

/* Полноэкранный переход в Яндекс ID: показывается до редиректа и после возврата. */
.yandex-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 43%, rgba(255, 209, 63, .13), transparent 27%),
        radial-gradient(circle at 18% 15%, rgba(255, 54, 67, .18), transparent 32%),
        radial-gradient(circle at 84% 82%, rgba(255, 209, 63, .1), transparent 34%),
        linear-gradient(145deg, #08080b 0%, #141119 48%, #09090d 100%);
    transition: opacity .22s ease, visibility .22s ease;
    isolation: isolate;
}
.yandex-loading-screen.active,
html.yandex-oauth-return .yandex-loading-screen { opacity: 1; visibility: visible; pointer-events: auto; }
.yandex-loading-grid {
    position: absolute;
    inset: -30%;
    z-index: -4;
    opacity: .15;
    background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 52px 52px;
    transform: perspective(700px) rotateX(62deg) translateY(20%);
    transform-origin: center bottom;
    animation: yandexGridTravel 5s linear infinite;
}
.yandex-loading-blobs { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.yandex-loading-blobs i { position: absolute; width: 34vw; height: 34vw; border-radius: 50%; filter: blur(72px); opacity: .2; animation: yandexBlobFloat 5.5s ease-in-out infinite alternate; }
.yandex-loading-blobs i:nth-child(1) { left: -10%; top: -12%; background: #ff3048; }
.yandex-loading-blobs i:nth-child(2) { right: -12%; top: 6%; background: #ffd13f; animation-delay: -1.4s; }
.yandex-loading-blobs i:nth-child(3) { left: 5%; bottom: -20%; background: #6b4eff; animation-delay: -2.8s; }
.yandex-loading-blobs i:nth-child(4) { right: 6%; bottom: -18%; background: #ff5b35; animation-delay: -4.1s; }
.yandex-loader-center { position: relative; z-index: 5; width: min(560px, calc(100vw - 36px)); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 28px; }
.yandex-orbit-system { position: relative; width: 210px; height: 210px; margin-bottom: 24px; display: grid; place-items: center; }
.yandex-core { position: relative; z-index: 5; width: 94px; height: 94px; display: grid; place-items: center; border-radius: 30px; background: #fff; color: #111; box-shadow: 0 18px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.7), 0 0 55px rgba(255,63,69,.2); animation: yandexCoreFloat 1.7s ease-in-out infinite alternate; }
.yandex-core b { font-family: Arial, sans-serif; font-size: 53px; line-height: 1; color: #ff3038; transform: translateY(-1px); }
.yandex-core-pulse { position: absolute; z-index: 1; width: 100px; height: 100px; border: 2px solid rgba(255,255,255,.72); border-radius: 34px; animation: yandexCorePulse 1.7s ease-out infinite; }
.yandex-orbit-system .orbit { position: absolute; inset: 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: yandexOrbitSpin 3.7s linear infinite; }
.yandex-orbit-system .orbit-two { inset: 0; border-style: dashed; border-color: rgba(255,209,63,.32); animation-duration: 6s; animation-direction: reverse; }
.yandex-orbit-system .orbit-three { inset: 39px; border-color: rgba(255,54,67,.34); animation-duration: 2.8s; }
.yandex-orbit-system .orbit b { position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #ffd13f; box-shadow: 0 0 17px #ffd13f; }
.yandex-orbit-system .orbit-two b:first-child { left: 12%; top: 15%; width: 8px; height: 8px; background: #ff394c; box-shadow: 0 0 15px #ff394c; }
.yandex-orbit-system .orbit-two b:last-child { left: auto; right: 6%; top: 65%; width: 7px; height: 7px; background: #fff; box-shadow: 0 0 14px #fff; }
.yandex-orbit-system .orbit-three b { left: 7%; top: 60%; width: 8px; height: 8px; background: #ff394c; box-shadow: 0 0 14px #ff394c; }
.yandex-loading-kicker { margin-bottom: 10px; color: #ffd13f; font: 800 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2.4px; animation: yandexKickerBlink 1.8s steps(2,end) infinite; }
.yandex-loader-center h2 { margin: 0 0 10px; color: #fff; font: 800 clamp(25px, 4vw, 36px)/1.15 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.7px; }
.yandex-loader-center p { min-height: 24px; margin: 0; color: rgba(255,255,255,.68); font: 600 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: opacity .18s ease, transform .18s ease; }
.yandex-loader-center p.is-changing { opacity: 0; transform: translateY(5px); }
.yandex-progress { position: relative; width: min(340px, 76vw); height: 8px; margin: 23px 0 19px; overflow: visible; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 4px rgba(0,0,0,.35); }
.yandex-progress i { position: absolute; inset: 1px auto 1px 1px; width: 42%; border-radius: inherit; background: linear-gradient(90deg, #ff3038, #ffd13f, #fff); box-shadow: 0 0 18px rgba(255,209,63,.65); animation: yandexProgressRun 1.45s cubic-bezier(.5,0,.2,1) infinite; }
.yandex-progress b { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fff; transform: translateY(-50%); animation: yandexProgressSpark 1.1s ease-in-out infinite; }
.yandex-progress b:nth-child(2) { left: 30%; }
.yandex-progress b:nth-child(3) { left: 58%; animation-delay: -.35s; }
.yandex-progress b:nth-child(4) { left: 85%; animation-delay: -.7s; }
.yandex-security-pill { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.055); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; backdrop-filter: blur(8px); }
.yandex-security-pill span { color: #ffd13f; font-size: 16px; animation: yandexShieldTurn 2s linear infinite; }
.yandex-security-pill strong { color: #7ef0a8; font-weight: 800; }
.yandex-particle-field, .yandex-comets, .yandex-flying-cards { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.yandex-particle-field { z-index: 1; }
.yandex-particle-field i { position: absolute; bottom: -20px; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0; animation: yandexParticleRise 4.4s linear infinite; }
.yandex-particle-field i:nth-child(3n) { width: 8px; height: 8px; background: #ffd13f; }
.yandex-particle-field i:nth-child(4n) { width: 4px; height: 4px; background: #ff394c; }
.yandex-particle-field i:nth-child(1) { left: 4%; animation-delay: -.2s; } .yandex-particle-field i:nth-child(2) { left: 11%; animation-delay: -2.8s; }
.yandex-particle-field i:nth-child(3) { left: 18%; animation-delay: -1.1s; } .yandex-particle-field i:nth-child(4) { left: 25%; animation-delay: -3.7s; }
.yandex-particle-field i:nth-child(5) { left: 32%; animation-delay: -2s; } .yandex-particle-field i:nth-child(6) { left: 40%; animation-delay: -.7s; }
.yandex-particle-field i:nth-child(7) { left: 48%; animation-delay: -3.1s; } .yandex-particle-field i:nth-child(8) { left: 55%; animation-delay: -1.6s; }
.yandex-particle-field i:nth-child(9) { left: 62%; animation-delay: -4s; } .yandex-particle-field i:nth-child(10) { left: 69%; animation-delay: -.5s; }
.yandex-particle-field i:nth-child(11) { left: 76%; animation-delay: -2.3s; } .yandex-particle-field i:nth-child(12) { left: 83%; animation-delay: -1.2s; }
.yandex-particle-field i:nth-child(13) { left: 90%; animation-delay: -3.5s; } .yandex-particle-field i:nth-child(14) { left: 96%; animation-delay: -1.9s; }
.yandex-particle-field i:nth-child(15) { left: 15%; animation-delay: -4.2s; } .yandex-particle-field i:nth-child(16) { left: 37%; animation-delay: -2.5s; }
.yandex-particle-field i:nth-child(17) { left: 59%; animation-delay: -3.3s; } .yandex-particle-field i:nth-child(18) { left: 87%; animation-delay: -.9s; }
.yandex-comets { z-index: 2; }
.yandex-comets i { position: absolute; left: -18%; width: 150px; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85)); transform: rotate(-18deg); animation: yandexCometFly 4.8s linear infinite; }
.yandex-comets i::after { content: ''; position: absolute; right: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px #fff; }
.yandex-comets i:nth-child(1) { top: 12%; animation-delay: -.8s; } .yandex-comets i:nth-child(2) { top: 28%; animation-delay: -3.1s; }
.yandex-comets i:nth-child(3) { top: 46%; animation-delay: -1.7s; } .yandex-comets i:nth-child(4) { top: 67%; animation-delay: -4.2s; }
.yandex-comets i:nth-child(5) { top: 82%; animation-delay: -2.4s; } .yandex-comets i:nth-child(6) { top: 91%; animation-delay: -.1s; }
.yandex-flying-cards { z-index: 3; }
.yandex-flying-cards i { position: absolute; min-width: 52px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.07); box-shadow: 0 12px 30px rgba(0,0,0,.2); backdrop-filter: blur(8px); font: 800 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: center; animation: yandexCardDrift 4.5s ease-in-out infinite alternate; }
.yandex-flying-cards i:nth-child(1) { left: 9%; top: 18%; color: #7ef0a8; transform: rotate(-9deg); }
.yandex-flying-cards i:nth-child(2) { right: 11%; top: 14%; animation-delay: -.8s; transform: rotate(7deg); }
.yandex-flying-cards i:nth-child(3) { left: 15%; bottom: 17%; color: #ffd13f; animation-delay: -1.5s; transform: rotate(6deg); }
.yandex-flying-cards i:nth-child(4) { right: 9%; bottom: 21%; animation-delay: -2.1s; transform: rotate(-8deg); }
.yandex-flying-cards i:nth-child(5) { left: 4%; top: 52%; color: #ff7180; animation-delay: -2.8s; }
.yandex-flying-cards i:nth-child(6) { right: 4%; top: 48%; animation-delay: -3.4s; }
.yandex-flying-cards i:nth-child(7) { left: 27%; top: 8%; animation-delay: -1.9s; }
.yandex-flying-cards i:nth-child(8) { right: 27%; bottom: 8%; color: #ff394c; animation-delay: -.4s; }
@keyframes yandexGridTravel { from { background-position: 0 0, 0 0; } to { background-position: 0 52px, 52px 0; } }
@keyframes yandexBlobFloat { from { transform: translate3d(-4%, -3%, 0) scale(.9); } to { transform: translate3d(5%, 6%, 0) scale(1.12); } }
@keyframes yandexOrbitSpin { to { transform: rotate(360deg); } }
@keyframes yandexCoreFloat { from { transform: translateY(-4px) rotate(-1deg); } to { transform: translateY(5px) rotate(1deg); } }
@keyframes yandexCorePulse { 0% { opacity: .65; transform: scale(.86); } 80%,100% { opacity: 0; transform: scale(1.65); } }
@keyframes yandexKickerBlink { 50% { opacity: .48; } }
@keyframes yandexProgressRun { 0% { left: 0; width: 15%; opacity: .5; } 50% { width: 48%; opacity: 1; } 100% { left: 78%; width: 20%; opacity: .6; } }
@keyframes yandexProgressSpark { 50% { opacity: .25; transform: translateY(-50%) scale(.5); } }
@keyframes yandexShieldTurn { 50% { transform: rotate(180deg) scale(1.12); } to { transform: rotate(360deg); } }
@keyframes yandexParticleRise { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.4); } 15% { opacity: .8; } 85% { opacity: .45; } 100% { opacity: 0; transform: translate3d(36px,-105vh,0) scale(1.25); } }
@keyframes yandexCometFly { 0%,15% { opacity: 0; transform: translateX(0) rotate(-18deg); } 22% { opacity: .8; } 62%,100% { opacity: 0; transform: translateX(135vw) rotate(-18deg); } }
@keyframes yandexCardDrift { from { margin-top: -9px; } to { margin-top: 12px; } }

@media (max-width: 700px) {
    .yandex-loader-center { padding: 24px 18px; }
    .yandex-orbit-system { width: 178px; height: 178px; margin-bottom: 16px; }
    .yandex-core { width: 82px; height: 82px; border-radius: 26px; }
    .yandex-core b { font-size: 46px; }
    .yandex-loading-grid { opacity: .09; background-size: 44px 44px; }
    .yandex-loading-blobs i { filter: blur(54px); }
    .yandex-flying-cards i:nth-child(n+5), .yandex-comets i:nth-child(even), .yandex-particle-field i:nth-child(n+13) { display: none; }
    .yandex-flying-cards i { padding: 8px 10px; font-size: 10px; opacity: .72; }
    .yandex-flying-cards i:nth-child(1) { left: 3%; top: 15%; }
    .yandex-flying-cards i:nth-child(2) { right: 3%; top: 18%; }
    .yandex-flying-cards i:nth-child(3) { left: 5%; bottom: 13%; }
    .yandex-flying-cards i:nth-child(4) { right: 4%; bottom: 15%; }
}
@media (prefers-reduced-motion: reduce) {
    .yandex-loading-grid, .yandex-loading-blobs i, .yandex-comets i, .yandex-flying-cards i, .yandex-particle-field i,
    .yandex-orbit-system .orbit, .yandex-core, .yandex-core-pulse, .yandex-loading-kicker, .yandex-progress i,
    .yandex-progress b, .yandex-security-pill span { animation: none !important; }
    .yandex-particle-field, .yandex-comets, .yandex-flying-cards { display: none; }
    .yandex-progress i { left: 0; width: 72%; }
}

.account-contacts-card { margin-bottom: 15px; padding: 15px; border-radius: 14px; background: var(--surface-color); text-align: left; }
.account-contacts-hint { margin: 0 0 11px; color: var(--text-light); font-size: 10.5px; line-height: 1.4; }
.account-contact-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--text-light) 18%, transparent); }
.account-contact-row > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.account-contact-row span { color: var(--text-light); font-size: 10px; }
.account-contact-row strong { overflow: hidden; color: var(--text-main); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-contact-row > button, .account-contact-editor-head button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 7px 10px; background: var(--bg-color); color: var(--accent-orange); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-btn); }
.account-contact-row > button:disabled { color: var(--text-light); cursor: default; opacity: .7; box-shadow: none; }
.account-contact-editor { margin-top: 10px; padding: 12px; border-radius: 13px; background: var(--bg-color); box-shadow: var(--shadow-inner); }
.account-contact-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.account-contact-editor-head strong { font-size: 13px; }
.account-contact-editor-head button { padding: 5px 8px; color: var(--text-light); }
.account-contact-send, .account-contact-confirm { width: 100%; margin: 0; }
#account-contact-code-step { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--surface-color); }

.close-cross {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent-orange) 28%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-color) 86%, rgba(255,255,255,.72));
    color: var(--text-main);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--text-main) 13%, transparent), inset 0 1px 0 rgba(255,255,255,.78);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.close-cross .flux-icon { width: 25px; height: 25px; margin: 0; filter: drop-shadow(0 2px 2px rgba(73,55,68,.14)); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.close-cross:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-red) 58%, transparent); background: color-mix(in srgb, var(--accent-peach) 58%, var(--bg-color)); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-red) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.9); }
.close-cross:hover .flux-icon { transform: rotate(90deg) scale(1.08); }
.close-cross:active { transform: translateY(0) scale(.92); box-shadow: var(--shadow-inner); }
.close-cross:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-orange) 46%, transparent); outline-offset: 3px; }
@media (max-width: 480px) {
    .close-cross { top: 8px; right: 8px; width: 42px; height: 42px; }
    .close-cross .flux-icon { width: 23px; height: 23px; }
}
.modal-title { font-size: 22px; margin-bottom: 15px; font-weight: bold; }
.modal-text { font-size: 16px; margin-bottom: 25px; color: var(--text-light); }
.modal-input { width: 100%; padding: 10px; border-radius: 12px; border: none; background: var(--bg-color); box-shadow: var(--shadow-inner); font-size: 14px; margin-bottom: 12px; outline: none; color: var(--text-main); }
.setting-label { display: block; font-size: 14px; color: var(--text-light); margin-bottom: 6px; text-align: left; font-weight: bold; }

.dev-tabs { display: flex; border-bottom: 2px solid var(--surface-color); margin-bottom: 20px; width: 100%; gap: 10px;}
.dev-tab { flex: 1; padding: 10px; background: transparent; border: none; color: var(--text-light); font-weight: bold; font-size: 15px; cursor: pointer; transition: all 0.2s; border-bottom: 2px solid transparent; }
.dev-tab.active { color: var(--text-main); border-bottom: 2px solid var(--accent-orange); }
.dev-panel { display: none; flex-direction: column; gap: 15px; width: 100%; }
.dev-panel.active { display: flex; }

.dev-stat-row { display: flex; justify-content: space-between; padding: 12px; background: var(--surface-color); border-radius: 12px; font-size: 15px; }
.dev-stat-row span:last-child { font-weight: bold; }
.stats-range-row { display: flex; gap: 8px; margin-bottom: 14px; width: 100%; }
.stats-range-btn { flex: 1; padding: 9px 6px; border-radius: 12px; font-size: 13px; border: 1px solid transparent; background: var(--surface-color); color: var(--text-light); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-btn); }
.stats-range-btn.active { color: #fff; background: var(--accent-orange); }
.stats-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; }
.stats-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 8px; background: var(--surface-color); border-radius: 16px; box-shadow: var(--shadow-inner); }
.stats-card-value { font-size: 26px; font-weight: 800; color: var(--accent-orange); line-height: 1; }
.stats-card-label { font-size: 11.5px; color: var(--text-light); text-align: center; }
.stats-type-line { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface-color); border-radius: 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-light); }
.stats-type-line b { color: var(--text-main); }
#stats-chart-title { text-align: center; font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
.stats-backup-row { margin-top: 14px; display: flex; justify-content: center; }
.stats-backup-row .modal-btn { width: 100%; }
#stats-chart-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: var(--surface-color); border-radius: 20px; min-height: 200px; width: 100%; }
#stats-chart { max-width: 100%; height: auto; }

.dev-switch-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--surface-color); border-radius: 12px; }
.dev-switch-row span { font-size: 15px; font-weight: 500; }

.feedback-container { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--surface-color); display: flex; flex-direction: column; gap: 10px; }
.feedback-input { width: 100%; padding: 12px; border: none; background: var(--bg-color); border-radius: 12px; box-shadow: var(--shadow-inner); font-size: 14px; color: var(--text-main); resize: vertical; min-height: 80px; font-family: inherit; }
.feedback-input:focus { outline: 2px solid var(--accent-orange); }

.dropdown-accordion { width: 100%; margin-bottom: 10px; background: var(--surface-color); border-radius: 12px; overflow: hidden; }
.dropdown-header { padding: 12px 15px; background: var(--bg-color); box-shadow: var(--shadow-btn); border-radius: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: bold; color: var(--text-main); transition: all 0.2s; }
.dropdown-header:hover { transform: scale(1.01); }
.dropdown-arrow { transition: transform 0.3s ease; }
.dropdown-accordion.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 10px; }
.dropdown-accordion.open .dropdown-body { max-height: 400px; padding: 10px; overflow-y: auto; }
.dropdown-body::-webkit-scrollbar { width: 5px; }
.dropdown-body::-webkit-scrollbar-thumb { background: var(--accent-peach); border-radius: 10px; }
.avatar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; width: 100%; }
.avatar-option { aspect-ratio: 1; padding: 3px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; background: var(--surface-color); box-shadow: var(--shadow-btn); transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.avatar-option img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.avatar-option:hover { transform: translateY(-2px) scale(1.05); border-color: var(--accent-orange); }
.avatar-option.selected { border-color: var(--accent-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-orange) 22%, transparent), var(--shadow-btn); }
.avatar-preview-circle { width: 70px; height: 70px; border-radius: 50%; background: var(--surface-color); display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 12px; box-shadow: var(--shadow-btn); overflow: hidden; border: 2px solid var(--accent-peach); }
.avatar-preview-circle img { width: 100%; height: 100%; object-fit: cover; }

/* ==================== КАДРИРОВАНИЕ АВАТАРА (2.8.3) ==================== */
.avatar-crop-modal { max-width: 420px; width: calc(100vw - 32px); }
.avatar-crop-hint { color: var(--text-light); font-size: 12.5px; line-height: 1.45; margin: 0 0 12px; text-align: center; }
.avatar-crop-stage {
    position: relative;
    width: 100%;
    height: min(60vh, 520px);
    margin: 0 auto;
    background: #14151b;
    border-radius: 16px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.avatar-crop-stage > img {
    position: absolute;
    object-fit: fill;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}
.avatar-crop-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .58);
}
.avatar-crop-frame:active { cursor: grabbing; }
.avatar-crop-grid {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(255,255,255,.28) 1px, transparent 1px) 0 0 / 33.333% 100% no-repeat,
        linear-gradient(to bottom, rgba(255,255,255,.28) 1px, transparent 1px) 0 0 / 100% 33.333% no-repeat;
    mix-blend-mode: difference;
    clip-path: circle(50% at 50% 50%);
}
.crop-handle {
    position: absolute;
    width: 22px; height: 22px;
    background: #fff;
    border: 2px solid var(--accent-orange, #ff7b6b);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    z-index: 2;
}
.crop-handle[data-handle="nw"] { left: -12px; top: -12px; cursor: nwse-resize; }
.crop-handle[data-handle="ne"] { right: -12px; top: -12px; cursor: nesw-resize; }
.crop-handle[data-handle="sw"] { left: -12px; bottom: -12px; cursor: nesw-resize; }
.crop-handle[data-handle="se"] { right: -12px; bottom: -12px; cursor: nwse-resize; }
.avatar-crop-controls { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.avatar-crop-slider { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-main); }
.avatar-crop-slider input[type="range"] { flex: 1; accent-color: var(--accent-orange, #ff7b6b); }
.avatar-crop-buttons { display: flex; gap: 10px; }
.avatar-crop-buttons .modal-btn { flex: 1; font-size: 13px; }
@media (max-width: 480px) {
    .avatar-crop-stage { height: 52vh; max-height: 520px; }
}
.theme-preview-card { margin-top: 10px; border-radius: 16px; padding: 7px; background: var(--surface-color); box-shadow: var(--shadow-inner); }
.theme-preview-scene { position: relative; height: 176px; overflow: hidden; border-radius: 12px; background-position: center; background-size: cover; color: var(--preview-text, #244); isolation: isolate; transition: background-image .25s ease, filter .25s ease; }
.theme-preview-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.28)); }
.theme-preview-scene.is-dark::before { background: linear-gradient(135deg, rgba(12,16,25,.68), rgba(12,16,25,.3)); }
.theme-preview-header { display: flex; align-items: center; justify-content: space-between; margin: 9px; padding: 8px 11px; border-radius: 999px; background: var(--preview-panel, rgba(255,255,255,.7)); backdrop-filter: blur(5px); box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 11px; }
.theme-preview-header strong { color: var(--preview-accent, #39C5BB); font-size: 16px; }
.theme-preview-layout { display: grid; grid-template-columns: 31% 1fr; gap: 7px; padding: 0 9px 9px; height: 121px; }
.theme-preview-sidebar, .theme-preview-calendar { border-radius: 11px; padding: 7px; background: var(--preview-panel, rgba(255,255,255,.68)); backdrop-filter: blur(5px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.theme-preview-sidebar { display: flex; flex-direction: column; gap: 7px; }
.theme-preview-sidebar i { display: block; height: 23px; border-left: 3px solid var(--preview-accent, #39C5BB); border-radius: 6px; background: color-mix(in srgb, var(--preview-accent, #39C5BB) 18%, transparent); }
.theme-preview-calendar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.theme-preview-calendar i { display: block; border-radius: 6px; background: color-mix(in srgb, var(--preview-panel, #fff) 76%, transparent); border: 1px solid color-mix(in srgb, var(--preview-accent, #39C5BB) 20%, transparent); }
.theme-preview-calendar i:nth-child(5) { background: color-mix(in srgb, var(--preview-accent, #39C5BB) 38%, transparent); }
.theme-preview-caption { padding: 8px 4px 2px; color: var(--text-light); font-size: 11px; line-height: 1.35; text-align: center; }
.theme-preview-caption.is-changed { color: var(--accent-orange); font-weight: 800; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-direction: row; }
.modal-btn { padding: 10px; border-radius: 12px; border: none; font-size: 14px; font-weight: bold; cursor: pointer; box-shadow: var(--shadow-btn); transition: all 0.2s; }
.modal-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-outer); }
.modal-btn:active { box-shadow: var(--shadow-inner); transform: scale(0.95); }
.btn-primary { background: var(--accent-peach); color: var(--text-main); }
.btn-secondary { background: var(--bg-color); color: var(--text-light); border: 1px solid var(--text-light); }
.btn-danger { background: var(--accent-red); color: white; }
.btn-family { background: var(--accent-peach); color: var(--text-main); }

.language-selector { display: flex; flex-direction: column; gap: 5px; background: var(--surface-color); border-radius: 10px; padding: 5px; }
.lang-option { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.lang-option:hover { background: var(--bg-color); transform: translateX(5px); }
.flag { font-size: 18px; }
.waving:hover { animation: wave 0.6s infinite ease-in-out; }

.context-menu { position: fixed; display: none; background: var(--bg-color); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 3000; overflow: hidden; min-width: 150px; border: 1px solid var(--surface-color); animation: fadeIn 0.2s ease; }
.ctx-item { padding: 12px 20px; cursor: pointer; font-size: 14px; color: var(--text-main); }
.ctx-item:hover { background: var(--surface-color); }
.ctx-divider { height: 1px; background: var(--surface-color); margin: 4px 0; }

.ios-modal { background: var(--bg-color); width: 100%; max-width: 500px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-outer); display: flex; flex-direction: column; max-height: 90vh; }
.ios-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--surface-color); border-bottom: 1px solid var(--text-light); }
.ios-title { font-weight: bold; font-size: 18px; }
.ios-btn-cancel { background: none; border: none; color: var(--accent-red); font-size: 16px; cursor: pointer; font-weight: bold; }
.ios-btn-done { background: none; border: none; color: var(--accent-orange); font-size: 16px; cursor: pointer; font-weight: bold; }
.ios-content { padding: 20px; overflow-y: auto; flex: 1; }
.ios-segmented-control { display: flex; background: var(--surface-color); border-radius: 10px; padding: 2px; margin-bottom: 15px; }
.ios-segment { flex: 1; text-align: center; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; color: var(--text-light); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ios-segment.active { background: var(--bg-color); color: var(--text-main); box-shadow: 0 2px 5px rgba(0,0,0,0.1); transform: scale(1.05); }
.ios-input-large { width: 100%; padding: 12px; border-radius: 12px; border: none; background: var(--surface-color); font-size: 18px; margin-bottom: 10px; color: var(--text-main); }
.ios-label-header { font-size: 14px; color: var(--text-light); margin-bottom: 8px; margin-top: 10px; font-weight: bold; }
.ios-group { background: var(--surface-color); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.ios-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; cursor: pointer; gap: 12px; }
.ios-row:hover { background: rgba(0,0,0,0.02); }
.ios-row-value { display: inline-flex; align-items: center; gap: 6px; color: var(--text-light); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ios-chevron { font-size: 22px; line-height: 1; opacity: 0.45; font-weight: 400; }
.ios-alert-block { margin-top: 10px; }
.ios-divider { height: 1px; background: rgba(0,0,0,0.1); margin: 0 15px; }

/* Ряд «Уведомление» в том же стиле, что и блоки времени */
#modal-event .ios-alert-block .ios-group { margin-bottom: 0; }
#modal-event #alert-picker-row {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
#modal-event #alert-picker-row .ios-row-value {
    color: var(--text-light);
    font-size: 15px;
    font-weight: 600;
}
#modal-event #alert-picker-row .ios-chevron {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    opacity: 0.45;
    transform: rotate(90deg);
    margin-left: 2px;
}

/* Пикер уведомления как на iPhone */
.ios-alert-sheet {
    width: min(420px, calc(100% - 20px));
    max-height: min(72vh, 560px);
    margin: auto 10px 12px;
    background: rgba(255,255,255,0.96);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: iosSheetUp 0.2s ease-out;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
[data-theme="dark"] .ios-alert-sheet,
body.theme-dark .ios-alert-sheet {
    background: rgba(44,44,46,0.96);
}
.ios-alert-options {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
}
.ios-alert-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111;
    text-align: left;
    padding: 15px 20px 15px 22px;
    font: inherit;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.25;
}
[data-theme="dark"] .ios-alert-option,
body.theme-dark .ios-alert-option { color: #f2f2f7; }
.ios-alert-option + .ios-alert-option {
    border-top: 1px solid rgba(60,60,67,0.12);
}
.ios-alert-option:active { background: rgba(0,0,0,0.04); }
.ios-alert-option .check {
    min-width: 22px;
    width: 22px;
    color: #111;
    font-size: 17px;
    font-weight: 700;
    opacity: 0;
}
[data-theme="dark"] .ios-alert-option .check,
body.theme-dark .ios-alert-option .check { color: #f2f2f7; }
.ios-alert-option.is-selected .check { opacity: 1; }
.ios-alert-option.is-selected { font-weight: 500; }
@keyframes iosSheetUp {
    from { transform: translateY(18px) scale(0.98); opacity: 0.65; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
#modal-alert-picker {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    z-index: 4600;
    background: rgba(0,0,0,0.22);
}
#modal-alert-picker.active { display: flex; }

@media (max-width: 600px) {
    .ios-alert-sheet {
        width: calc(100% - 16px);
        margin-bottom: max(10px, env(safe-area-inset-bottom));
    }
}
.ios-date-controls { display: flex; gap: 8px; align-items: center; }

.ios-date-input, .ios-time-input { background: var(--bg-color); border: 1px solid var(--surface-color); border-radius: 12px; padding: 8px 12px 8px 30px; color: var(--text-main); font-family: inherit; font-size: 14px; font-weight: bold; outline: none; box-shadow: var(--shadow-inner); cursor: pointer; transition: all 0.2s; min-height: 36px; width: 130px; position: relative; }
.ios-date-input:hover, .ios-time-input:hover { box-shadow: var(--shadow-outer); border-color: var(--accent-orange); }
.picker-overlay { display: none; align-items: center; justify-content: center; z-index: 7000; background: rgba(25, 35, 32, .24); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); pointer-events: none; }
.picker-overlay.active { display: flex; pointer-events: auto; }
.picker-sheet { width: min(380px, calc(100% - 24px)); max-height: min(84vh, 560px); overflow: hidden; margin: 0; padding: 12px; border: 1px solid rgba(255,255,255,.38); border-radius: 24px; background: var(--bg-color); box-shadow: 0 18px 55px rgba(35, 73, 61, .28), var(--shadow-outer); pointer-events: auto; animation: pickerUp .22s ease-out; }
.picker-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; border-bottom: 1px solid var(--surface-color); color: var(--text-main); }
.picker-head button, .picker-month button { border: 0; background: transparent; color: var(--accent-orange); font: inherit; font-weight: 700; cursor: pointer; padding: 8px; }
.picker-head strong { font-size: 17px; text-transform: capitalize; }
.picker-body { padding: 7px 2px 1px; }
.picker-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; text-transform: capitalize; }
.picker-month strong { font-size: 14px; }
.picker-week, .picker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.picker-week { color: var(--text-light); font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.picker-days button, .picker-wheel-list button { border: 0; border-radius: 10px; background: var(--surface-color); color: var(--text-main); font: inherit; min-height: 34px; cursor: pointer; }
.picker-days button:hover, .picker-wheel-list button:hover, .picker-days button.selected, .picker-wheel-list button.selected { background: var(--accent-orange); color: white; box-shadow: 0 4px 12px rgba(255, 145, 112, .3); }
.picker-days { gap: 4px; }
.picker-days button.other-month { opacity: .34; background: transparent; }
.picker-days button.today:not(.selected) { color: var(--accent-orange); box-shadow: inset 0 0 0 1.5px var(--accent-orange); font-weight: 900; }
.picker-week { margin-bottom: 4px; }
.picker-today { display: block; width: 100%; margin-top: 10px; padding: 9px; border: 0; border-radius: 12px; background: var(--surface-color); color: var(--accent-orange); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.picker-wheels { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px 4px; }
.picker-wheel { width: 112px; text-align: center; position: relative; }
.picker-wheel::after { content: ''; position: absolute; left: 5px; right: 5px; top: 140px; height: 44px; transform: translateY(-50%); border-top: 1px solid rgba(255,145,112,.45); border-bottom: 1px solid rgba(255,145,112,.45); border-radius: 10px; pointer-events: none; }
.picker-wheel label { display: block; color: var(--text-light); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.picker-wheel-nudge { width: 100%; min-height: 26px; border: 0; border-radius: 9px; background: transparent; color: var(--accent-orange); font: inherit; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; opacity: .72; touch-action: manipulation; }
.picker-wheel-nudge:active { background: color-mix(in srgb, var(--accent-orange) 16%, transparent); opacity: 1; }
.picker-wheel-list { height: 184px; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 70px 5px; border-radius: 16px; background: var(--surface-color); scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); }
.picker-wheel-list::-webkit-scrollbar { display: none; }
.picker-wheel-list button { display: block; width: 100%; min-height: 42px; margin: 2px 0; scroll-snap-align: center; background: transparent; font-size: 18px; opacity: .46; transition: opacity .16s, transform .16s, background .16s; }
.picker-wheel-list button.selected { background: rgba(255,145,112,.2); color: var(--text-main); box-shadow: none; opacity: 1; transform: scale(1.1); font-weight: 900; }
.picker-wheel-separator { font-size: 30px; font-weight: 900; color: var(--accent-orange); padding-top: 20px; }
.picker-time-preview { margin: 0 auto 7px; width: max-content; min-width: 108px; padding: 7px 16px; border-radius: 999px; background: var(--surface-color); color: var(--text-main); font-size: 18px; font-weight: 900; text-align: center; }
@keyframes pickerUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
    .picker-overlay { align-items: flex-end; }
    .picker-sheet { width: 100%; max-height: 86vh; margin: 0; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; }
    .picker-days button { min-height: 40px; }
    .picker-head { padding-bottom: 10px; }
    .picker-head button { min-width: 72px; min-height: 44px; }
    .picker-wheels { gap: 8px; padding: 6px 4px 2px; }
    .picker-wheel { width: min(38vw, 145px); }
    .picker-wheel::after { top: 163px; height: 52px; left: 3px; right: 3px; }
    .picker-wheel-nudge { min-height: 32px; font-size: 15px; }
    .picker-wheel-list { height: 224px; padding: 86px 4px; border-radius: 18px; scroll-snap-type: y proximity; }
    .picker-wheel-list button { min-height: 48px; margin: 2px 0; font-size: 22px; transition: none; touch-action: pan-y; pointer-events: none; }
    .picker-wheel-list button.selected { transform: scale(1.06); }
    .picker-wheel-separator { padding-top: 23px; font-size: 34px; }
    .picker-time-preview { margin-top: 4px; font-size: 20px; }
}
.ios-date-input::-webkit-calendar-picker-indicator, .ios-time-input::-webkit-calendar-picker-indicator { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 2; }
.ios-date-input::before, .ios-time-input::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; z-index: 1; color: var(--accent-orange); }
/* Нарисованные иконки не зависят от эмодзи-шрифта устройства. */
.ios-date-input::before { border: 1.8px solid currentColor; border-radius: 3px; box-sizing: border-box; background: linear-gradient(currentColor, currentColor) 2px 4px / 9px 1.5px no-repeat; }
.ios-date-input::after { content: ''; position: absolute; left: 13px; top: calc(50% - 9px); width: 2px; height: 4px; border-radius: 2px; background: currentColor; box-shadow: 7px 0 currentColor; pointer-events: none; }
.ios-time-input::before { border: 1.8px solid currentColor; border-radius: 50%; box-sizing: border-box; background: linear-gradient(currentColor, currentColor) 6px 3px / 1.5px 5px no-repeat, linear-gradient(45deg, transparent 47%, currentColor 48%, currentColor 58%, transparent 59%) 6px 7px / 5px 5px no-repeat; }
.ios-date-input::-webkit-datetime-edit, .ios-time-input::-webkit-datetime-edit { color: var(--text-main); padding-left: 5px; }
.ios-date-input::-webkit-datetime-edit-fields-wrapper, .ios-time-input::-webkit-datetime-edit-fields-wrapper { background: transparent; }

.all-tasks-list { flex: 1; overflow-y: auto; text-align: left; padding-right: 10px; }
.all-task-item { display: flex; align-items: center; padding: 12px; margin-bottom: 8px; background: var(--surface-color); border-radius: 12px; transition: transform 0.2s; cursor: pointer; }
.all-task-item:hover { transform: translateX(5px); background: var(--bg-color); }
.all-task-date { font-size: 12px; color: var(--text-light); width: 145px; flex: 0 0 145px; text-align: right; margin-right: 15px; line-height: 1.3; }
.all-task-text { flex: 1; font-size: 15px; }
.all-task-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-light); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 10px; }
.all-task-check.done { background: var(--accent-green); border-color: var(--accent-green); }
.all-task-check.done::after { content: ''; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* Заметки и чек-листы */
.notes-modal { width: 620px !important; max-height: 84vh; display: flex; flex-direction: column; }
.notes-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.notes-tab { flex: 1; padding: 10px; border: none; border-radius: 12px; background: var(--surface-color); color: var(--text-light); font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-btn); transition: all .18s ease; }
.notes-tab.active { background: var(--accent-orange); color: #fff; }
.notes-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.notes-add-row { display: flex; gap: 8px; margin-bottom: 12px; flex-shrink: 0; }
.notes-add-row .modal-input { margin-bottom: 0; flex: 1; }
.notes-add-btn { flex: 0 0 auto; margin: 0; padding: 10px 16px; white-space: nowrap; }
.notes-list, .checklists-list { flex: 1; overflow-y: auto; text-align: left; padding-right: 6px; }
.notes-empty { text-align: center; color: var(--text-light); padding: 26px 10px; font-size: 14px; }
.note-card { position: relative; padding: 10px; margin-bottom: 8px; background: var(--surface-color); border-radius: 12px; box-shadow: var(--shadow-inner); }
.note-card .note-text { width: 100%; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--text-main); resize: vertical; min-height: 40px; outline: none; padding-right: 30px; }
.note-delete { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font-size: 14px; opacity: .6; transition: opacity .15s; }
.note-delete:hover { opacity: 1; background: rgba(229, 57, 53, .12); }
.checklist-card { padding: 12px; margin-bottom: 10px; background: var(--surface-color); border-radius: 14px; box-shadow: var(--shadow-inner); }
.checklist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.checklist-title { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 15px; font-weight: 800; color: var(--text-main); outline: none; border-bottom: 1px dashed transparent; }
.checklist-toggle { width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 10px; background: transparent; color: var(--text-main); font: inherit; font-size: 21px; font-weight: 900; line-height: 20px; cursor: pointer; box-shadow: none; transition: transform .34s cubic-bezier(.22,.8,.25,1), background .18s ease, box-shadow .18s ease; }
.checklist-toggle:hover { background: transparent; box-shadow: none; }
.checklist-toggle-icon { display: block; width: 28px; height: 28px; transition: filter .18s ease; }
.checklist-toggle:hover .checklist-toggle-icon { filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--accent-orange) 28%, transparent)); }
.checklist-toggle:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.checklist-card.collapsed .checklist-toggle { transform: rotate(-90deg); }
.checklist-card.collapsed .checklist-items { max-height: 0; opacity: 0; }
.checklist-card.collapsed .checklist-add-row { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; }
.checklist-title:focus { border-bottom-color: var(--accent-orange); }
.checklist-progress { font-size: 12px; font-weight: 800; color: var(--accent-orange); white-space: nowrap; }
.checklist-head .note-delete { position: static; }
.checklist-items { display: flex; flex-direction: column; gap: 4px; max-height: 1000px; opacity: 1; overflow: hidden; transition: max-height .42s cubic-bezier(.22,.8,.25,1), opacity .24s ease; }
.checklist-item { display: flex; align-items: center; gap: 8px; }
.checklist-check { width: 20px; height: 20px; flex: 0 0 20px; padding: 0; border-radius: 6px; border: 2px solid var(--text-light); background: transparent; cursor: pointer; transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.checklist-check:hover { transform: scale(1.08); border-color: var(--accent-orange); }
.checklist-check.done { background: var(--accent-green); border-color: var(--accent-green); box-shadow: 0 3px 9px color-mix(in srgb, var(--accent-green) 28%, transparent); transform: scale(1.04); }
.checklist-check.done::after { content: ''; display: block; width: 5px; height: 9px; margin: 2px auto 0; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(1); transform-origin: center; opacity: 1; animation: none; }
.checklist-item.is-completing .checklist-check.done::after { animation: checklistTickIn .34s cubic-bezier(.2,.9,.25,1.35) .04s forwards; }
.checklist-item.is-completing .checklist-item-text { animation: checklistTextSettle .46s ease both; }
@keyframes checklistTickIn { 0% { opacity: 0; transform: rotate(45deg) scale(.15); } 62% { opacity: 1; transform: rotate(45deg) scale(1.18); } 100% { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes checklistTextSettle { 0% { transform: translateX(5px); opacity: .55; } 100% { transform: translateX(0); opacity: 1; } }
.checklist-item-text { flex: 1; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--text-main); outline: none; padding: 4px 2px; }
.checklist-item-text.is-done { text-decoration: line-through; color: var(--text-light); }
.checklist-item-delete { width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; cursor: pointer; color: var(--text-light); font-size: 12px; opacity: .55; }
.checklist-item-delete:hover { opacity: 1; background: rgba(229, 57, 53, .12); color: var(--accent-red); }
.checklist-add-row { display: flex; gap: 8px; margin-top: 8px; max-height: 80px; opacity: 1; overflow: hidden; transition: max-height .36s cubic-bezier(.22,.8,.25,1), opacity .22s ease, margin-top .36s ease; }
.checklist-add-input { flex: 1; border: 1px dashed var(--text-light); border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 13px; color: var(--text-main); background: var(--bg-color); outline: none; }
.checklist-add-btn { flex: 0 0 auto; border: none; border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 800; background: var(--accent-peach); color: var(--text-main); cursor: pointer; }
@media (max-width: 600px) {
    .notes-modal { width: calc(100% - 12px) !important; max-height: 92vh; }
    .notes-add-row { flex-direction: column; }
    .notes-add-btn { width: 100%; }
}

.ios-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.ios-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--accent-green); }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

#auth-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; overflow-y: auto; z-index: 1000; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.db-setup {
    width: min(520px, 94vw);
    background: var(--bg-color);
    color: var(--text-main);
    border-radius: 22px;
    box-shadow: var(--shadow-outer);
    padding: 18px 20px;
    text-align: left;
    border-left: 6px solid var(--accent-orange);
}
.db-setup[hidden] { display: none !important; }
.db-setup-title { font-weight: bold; font-size: 16px; margin-bottom: 8px; }
.db-setup p, .db-setup li { font-size: 13px; line-height: 1.45; color: var(--text-main); }
.db-setup ol { margin: 10px 0 8px 18px; }
.db-setup li { margin: 6px 0; }
.db-setup a { color: var(--accent-family); font-weight: bold; }
.db-setup-note { color: var(--text-light) !important; margin-top: 6px; }
#auth-container .custom-modal { position: relative !important; transform: none !important; animation: none !important; }

.password-wrapper { position: relative; width: 100%; margin-bottom: 12px; }
.password-wrapper .modal-input { margin-bottom: 0 !important; padding-right: 40px; }
.toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 20px; user-select: none; color: var(--text-light); z-index: 5; }
.toggle-password:hover { transform: translateY(-50%) scale(1.1); }

.modal-overlay#modal-welcome { background: var(--bg-color) !important; backdrop-filter: none !important; display: flex !important; z-index: 9999 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden; isolation: isolate; transition: opacity 0.75s ease, visibility 0.75s ease, transform 0.75s ease; }
.modal-overlay#modal-welcome.active { opacity: 1 !important; visibility: visible !important; }
.modal-overlay#modal-welcome.welcome-preparing { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; transition: none !important; }
.modal-overlay#modal-welcome::after { content: ''; position: absolute; z-index: 6; left: -15%; right: -15%; top: -12%; height: 3px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent-orange), #fff, var(--accent-family), transparent); box-shadow: 0 0 22px var(--accent-orange), 0 0 44px color-mix(in srgb, var(--accent-family) 45%, transparent); transform: rotate(-5deg); }
.modal-overlay#modal-welcome.welcome-run::after { animation: welcomeScanBeam 1.5s cubic-bezier(.2,.7,.2,1) .25s 1 both; }
.welcome-theme-backdrop { position: absolute; inset: -1.5%; z-index: 0; background-image: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent-orange) 28%, transparent), transparent 34%), linear-gradient(115deg, color-mix(in srgb, var(--bg-color) 76%, transparent), color-mix(in srgb, var(--bg-color) 28%, transparent)), var(--theme-scene-image, linear-gradient(135deg, var(--bg-color), var(--surface-color))); background-position: center, center, var(--theme-scene-position, center); background-size: cover, cover, cover; background-repeat: no-repeat; filter: saturate(.96) contrast(.96); will-change: transform, opacity; animation: welcomeBackdropIn 1.4s cubic-bezier(.22,.9,.24,1) both; }
body.miku-theme .welcome-theme-backdrop { background-image: linear-gradient(90deg, rgba(232,248,246,.9) 0%, rgba(232,248,246,.54) 40%, rgba(232,248,246,.1) 100%), var(--theme-scene-image); background-position: center, var(--theme-scene-position); filter: saturate(1); }
.welcome-atmosphere { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.welcome-atmosphere span { position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent-orange); border-radius: 50%; opacity: 0; animation: welcomeParticle 3.4s ease-in-out infinite; }
.welcome-atmosphere span:nth-child(1) { left: 9%; top: 18%; animation-delay: .1s; }
.welcome-atmosphere span:nth-child(2) { left: 22%; top: 74%; width: 6px; height: 6px; animation-delay: .7s; }
.welcome-atmosphere span:nth-child(3) { left: 41%; top: 12%; width: 13px; height: 13px; animation-delay: 1.2s; }
.welcome-atmosphere span:nth-child(4) { left: 58%; top: 82%; animation-delay: .35s; }
.welcome-atmosphere span:nth-child(5) { left: 76%; top: 19%; width: 7px; height: 7px; animation-delay: 1.65s; }
.welcome-atmosphere span:nth-child(6) { left: 89%; top: 62%; width: 14px; height: 14px; animation-delay: .9s; }
.welcome-atmosphere span:nth-child(7) { left: 67%; top: 41%; width: 5px; height: 5px; animation-delay: 2s; }
.welcome-atmosphere span:nth-child(8) { left: 31%; top: 45%; width: 5px; height: 5px; animation-delay: 1.4s; }
.welcome-rings { position: absolute; left: 50%; top: 47%; z-index: 1; width: 120px; height: 120px; transform: translate(-50%, -50%); pointer-events: none; }
.welcome-rings i { position: absolute; inset: 0; border: 1px solid var(--accent-orange); border-radius: 50%; opacity: 0; animation: welcomeRing 2.8s ease-out infinite; }
.welcome-rings i:nth-child(2) { animation-delay: .8s; }
.welcome-rings i:nth-child(3) { animation-delay: 1.6s; }
.welcome-shutters { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.welcome-shutters b { position: absolute; top: 0; bottom: 0; width: 25.2%; background: color-mix(in srgb, var(--bg-color) 94%, var(--accent-orange)); box-shadow: 0 0 25px color-mix(in srgb, var(--accent-orange) 16%, transparent); animation: welcomeShutterOpen 1.05s cubic-bezier(.72,0,.2,1) forwards; }
.welcome-shutters b:nth-child(1) { left: 0; }
.welcome-shutters b:nth-child(2) { left: 25%; animation-name: welcomeShutterDown; animation-delay: .06s; }
.welcome-shutters b:nth-child(3) { left: 50%; animation-delay: .12s; }
.welcome-shutters b:nth-child(4) { left: 75%; animation-name: welcomeShutterDown; animation-delay: .18s; }
.welcome-spectrum { position: absolute; z-index: 2; left: 50%; bottom: 5vh; width: min(560px, 76vw); height: 48px; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; gap: 8px; opacity: .42; }
.welcome-spectrum i { width: 8px; height: 46px; border-radius: 999px; background: linear-gradient(to top, var(--accent-orange), var(--accent-family)); animation: welcomeSpectrum 1.15s ease-in-out infinite alternate; transform-origin: bottom; }
.welcome-spectrum i:nth-child(2n) { animation-delay: -.35s; }
.welcome-spectrum i:nth-child(3n) { animation-delay: -.7s; }
.welcome-spectrum i:nth-child(4n) { animation-delay: -.95s; }
.welcome-container { position: relative; z-index: 3; text-align: center; max-width: 620px; padding: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.miku-theme .welcome-container { margin-right: 34vw; padding: 42px; border: 1px solid rgba(255,255,255,.42); border-radius: 34px; background: rgba(232,248,246,.38); backdrop-filter: blur(8px); box-shadow: 0 24px 70px rgba(25,80,85,.12); }
.welcome-logo { position: relative; isolation: isolate; font-size: 140px; font-weight: bold; color: var(--accent-orange); margin-bottom: 10px; text-shadow: 8px 8px 0px var(--accent-peach), 0 0 46px color-mix(in srgb, var(--accent-orange) 34%, transparent); letter-spacing: 4px; line-height: 1; filter: drop-shadow(0px 20px 20px color-mix(in srgb, var(--accent-orange) 18%, transparent)); }
.welcome-logo::before, .welcome-logo::after { content: 'Flux'; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
.welcome-logo::before { color: var(--accent-family); animation: welcomeLogoEchoLeft 1.1s ease-out .22s 1; }
.welcome-logo::after { color: var(--accent-green); animation: welcomeLogoEchoRight 1.1s ease-out .28s 1; }
.welcome-slogan { font-size: 32px; color: var(--text-light); font-style: italic; margin-bottom: 32px; text-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.welcome-motivation { max-width: 600px; padding: 12px 20px; border: 1px solid color-mix(in srgb, var(--accent-orange) 20%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--bg-color) 66%, transparent); box-shadow: 0 12px 34px rgba(0,0,0,.06); font-size: 22px; color: var(--text-main); line-height: 1.5; min-height: 58px; font-weight: 600; white-space: normal; overflow: visible; }
.welcome-potter-fx { display: none; }
body.potter-theme .welcome-potter-fx { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
body.potter-theme .welcome-candle { position: absolute; width: 17px; height: 80px; border-radius: 5px 5px 4px 4px; background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%), linear-gradient(#FFF7DF, #EFD9A6 60%, #DDBE86); box-shadow: inset 0 -7px 11px rgba(150,110,58,.35), inset -2px 0 3px rgba(120,85,45,.15), 0 10px 18px rgba(0,0,0,.28); opacity: 0; animation: potterCandleFloat 5s ease-in-out infinite; }
body.potter-theme .welcome-candle::after { content: ''; position: absolute; left: 50%; top: -4px; width: 2px; height: 4px; border-radius: 1px; background: #3C2B18; transform: translateX(-50%); }
body.potter-theme .welcome-candle::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 13px; height: 20px; margin-bottom: -2px; transform: translateX(-50%); transform-origin: 50% 100%; background: radial-gradient(circle at 50% 68%, #FFF9CF 0%, #FFE286 30%, #FFAD4A 62%, rgba(255,140,40,.9) 82%, rgba(255,120,30,0) 100%); border-radius: 50% 50% 50% 50% / 64% 64% 38% 38%; box-shadow: 0 0 12px 5px rgba(255,170,60,.5), 0 0 30px 10px rgba(255,150,40,.28); animation: potterCandleFlicker .5s ease-in-out infinite alternate; }
body.potter-theme .welcome-candle:nth-child(1) { left: 11%; top: 22%; }
body.potter-theme .welcome-candle:nth-child(2) { left: 24%; top: 68%; height: 66px; animation-delay: -1.3s; }
body.potter-theme .welcome-candle:nth-child(3) { left: 78%; top: 26%; height: 74px; animation-delay: -2.1s; }
body.potter-theme .welcome-candle:nth-child(4) { left: 88%; top: 64%; height: 70px; animation-delay: -3.4s; }
body.potter-theme .welcome-candle:nth-child(5) { left: 63%; top: 80%; height: 60px; animation-delay: -4.2s; }
body.potter-theme .welcome-snitch { position: absolute; left: -6%; top: 16%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFF7DA, #E8B34B 60%, #A97A1E); box-shadow: 0 0 14px 4px rgba(232,179,75,.5); animation: potterSnitch 7s ease-in-out infinite; }
body.potter-theme .welcome-snitch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 4px; transform: translate(-50%, -50%); border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,244,214,.9), transparent); animation: potterSnitchWings .4s ease-in-out infinite alternate; }
@keyframes potterCandleFloat { 0% { transform: translateY(0); opacity: .5; } 50% { opacity: .85; } 100% { transform: translateY(-16px); opacity: .5; } }
@keyframes potterCandleFlicker { from { transform: translateX(-50%) scale(1) rotate(-8deg); opacity: .9; } to { transform: translateX(-50%) scale(1.16) rotate(8deg); opacity: 1; } }
@keyframes potterSnitch { 0% { transform: translate(0, 0); } 12% { transform: translate(20vw, -12vh); } 24% { transform: translate(38vw, 5vh); } 38% { transform: translate(56vw, -14vh); } 52% { transform: translate(74vw, 4vh); } 66% { transform: translate(90vw, -9vh); } 80% { transform: translate(102vw, 3vh); } 100% { transform: translate(102vw, 3vh); } }
@keyframes potterSnitchWings { from { transform: translate(-50%, -50%) scaleX(.55); } to { transform: translate(-50%, -50%) scaleX(1); } }

/* Живой фон заставки: мягкие атмосферные частицы в цвет темы. */
.welcome-ambient { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.welcome-ambient i { position: absolute; display: block; opacity: 0; }
.welcome-ambient .amb-snow { width: 6px; height: 6px; border-radius: 50%; background: var(--amb-color); box-shadow: 0 0 6px rgba(255,255,255,.55); animation: ambFall 9s linear infinite; }
.welcome-ambient .amb-petal { width: 9px; height: 9px; border-radius: 50% 0 50% 0; background: var(--amb-color); box-shadow: 0 2px 5px rgba(0,0,0,.12); animation: ambFall 8s linear infinite; }
.welcome-ambient .amb-leaf { width: 11px; height: 7px; border-radius: 0 60% 0 60%; background: var(--amb-color); box-shadow: 0 2px 5px rgba(0,0,0,.1); animation: ambFall 8.6s linear infinite; }
.welcome-ambient .amb-steam { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 72%); filter: blur(3px); animation: ambSteam 5s ease-in infinite; }
.welcome-ambient .amb-bubble { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); border: 1px solid rgba(255,255,255,.35); animation: ambRise 6s ease-in infinite; }
.welcome-ambient .amb-spark { width: 4px; height: 4px; border-radius: 50%; background: var(--amb-color); box-shadow: 0 0 9px 2px var(--amb-color); animation: ambRise 5.4s ease-out infinite; }
.welcome-ambient .amb-star { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.85); animation: ambTwinkle 3s ease-in-out infinite; }
.welcome-ambient .amb-glint { width: 5px; height: 5px; border-radius: 50%; background: var(--amb-color); box-shadow: 0 0 8px 1px var(--amb-color); animation: ambTwinkle 2.6s ease-in-out infinite; }
@keyframes ambFall {
    0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
    8% { opacity: .9; }
    90% { opacity: .6; }
    100% { transform: translate3d(6vw, 108vh, 0) rotate(320deg); opacity: 0; }
}
@keyframes ambRise {
    0% { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
    12% { opacity: .85; }
    80% { opacity: .4; }
    100% { transform: translateY(-92vh) translateX(2vw) scale(1.2); opacity: 0; }
}
@keyframes ambSteam {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    25% { opacity: .5; }
    100% { transform: translateY(-46vh) scale(1.7); opacity: 0; }
}
@keyframes ambTwinkle {
    0%, 100% { opacity: .12; transform: scale(.7); }
    50% { opacity: .95; transform: scale(1.15); }
}

@media (max-width: 600px) {
    .welcome-container { width: 100%; max-width: 100vw; padding: 22px 18px; }
    body.miku-theme .welcome-container { margin: 0 12px; width: calc(100% - 24px); padding: 24px 16px; border-radius: 26px; background: rgba(232,248,246,.54); }
    body.miku-theme .welcome-theme-backdrop { background-image: linear-gradient(180deg, rgba(232,248,246,.28), rgba(232,248,246,.68)), var(--theme-scene-image); background-position: center, 72% center; background-size: cover; }
    .welcome-rings { width: 82px; height: 82px; }
    .welcome-logo { font-size: clamp(68px, 23vw, 92px); text-shadow: 5px 5px 0px var(--accent-peach); }
    .welcome-slogan { font-size: clamp(18px, 6vw, 22px); margin-bottom: 24px; }
    .welcome-motivation {
        width: 100%;
        max-width: calc(100vw - 36px);
        min-height: 72px;
        padding: 10px 12px;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        font-size: clamp(14px, 4.3vw, 17px);
        line-height: 1.45;
    }
    .anim-typing { animation: welcomeQuoteReveal .9s ease-out forwards; }
}
@keyframes mobileQuoteIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Номер версии в самом низу настроек. */
.app-version-line { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color, rgba(0,0,0,0.07)); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--text-light); }
.version-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent-orange); cursor: pointer; text-decoration: underline; }
.modal-overlay#modal-welcome.exit-animation { opacity: 0 !important; visibility: hidden !important; transform: scale(1.055); filter: blur(7px); transition: opacity .44s cubic-bezier(0.4, 0, 0.2, 1), transform .44s cubic-bezier(0.4, 0, 0.2, 1), filter .44s ease, visibility 0s .44s !important; }

@keyframes welcomeBackdropIn { from { opacity: 0; transform: scale(1.16) rotate(-.8deg); } to { opacity: 1; transform: scale(1); } }
@keyframes welcomeScanBeam { 0% { transform: translateY(0) rotate(-5deg); opacity: 0; } 15% { opacity: .9; } 78% { opacity: .65; } 100% { transform: translateY(124vh) rotate(-5deg); opacity: 0; } }
@keyframes welcomeShutterOpen { 0%, 22% { transform: translateY(0); } 100% { transform: translateY(-108%); } }
@keyframes welcomeShutterDown { 0%, 22% { transform: translateY(0); } 100% { transform: translateY(108%); } }
@keyframes welcomeSpectrum { from { transform: scaleY(.12); opacity: .35; } to { transform: scaleY(1); opacity: .9; } }
@keyframes welcomeLogoEchoLeft { 0%, 18% { opacity: 0; transform: translate(0); } 38% { opacity: .55; transform: translate(-13px, 3px); } 62% { opacity: .22; transform: translate(6px, -2px); } 100% { opacity: 0; transform: translate(0); } }
@keyframes welcomeLogoEchoRight { 0%, 18% { opacity: 0; transform: translate(0); } 42% { opacity: .48; transform: translate(13px, -3px); } 68% { opacity: .18; transform: translate(-5px, 2px); } 100% { opacity: 0; transform: translate(0); } }
@keyframes welcomeParticle { 0% { opacity: 0; transform: translateY(18px) scale(.4) rotate(0); } 35% { opacity: .34; } 70% { opacity: .16; } 100% { opacity: 0; transform: translateY(-55px) scale(1.25) rotate(150deg); } }
@keyframes welcomeRing { 0% { opacity: .2; transform: scale(.25); } 75%, 100% { opacity: 0; transform: scale(4.2); } }
@keyframes welcomeLogoReveal { 0% { opacity: 0; transform: perspective(600px) rotateX(72deg) scale(.68); } 58% { opacity: 1; transform: perspective(600px) rotateX(-8deg) scale(1.08); } 100% { opacity: 1; transform: perspective(600px) rotateX(0) scale(1); } }
@keyframes welcomeSloganReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes welcomeQuoteReveal { 0% { opacity: 0; transform: translateY(22px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.anim-pop-in { animation: welcomeLogoReveal 1.25s cubic-bezier(.18,.85,.22,1) forwards; opacity: 0; }
.anim-fade-up { animation: welcomeSloganReveal .85s ease-out forwards; opacity: 0; }
.anim-typing { opacity: 0; animation: welcomeQuoteReveal 1s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: .62s; }
@keyframes typeIn { from { width: 0; opacity: 1; } to { width: 100%; opacity: 1; } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--accent-orange); } }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wave { 0% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } }

#modal-onboarding { display: flex !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; transform: scale(0.95); }
#modal-onboarding.active { opacity: 1; visibility: visible; transform: scale(1); }
.onboarding-modal { width: 500px !important; padding: 30px 40px !important; max-width: 95%; display: flex; flex-direction: column; align-items: center; }
.onboarding-progress { position: absolute; top: 20px; left: 30px; font-size: 14px; color: var(--text-light); font-weight: bold; }
.onboarding-content { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 20px 0 30px 0; min-height: 200px; }
.onboarding-icon { position: relative; width: 138px; height: 118px; margin-bottom: 15px; display: grid; place-items: center; isolation: isolate; }
.onboarding-icon::before { content: ''; position: absolute; z-index: -1; width: 104px; height: 104px; border: 1px solid rgba(255,255,255,.78); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.96), color-mix(in srgb, var(--accent-peach) 68%, #dff7f3)); box-shadow: 0 18px 42px color-mix(in srgb, var(--accent-orange) 25%, transparent), inset 0 2px 1px rgba(255,255,255,.92); animation: fluxIllustrationGlow 2.4s ease-in-out infinite alternate; }
.onboarding-icon::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 76px; height: 13px; border-radius: 50%; background: color-mix(in srgb, var(--text-main) 16%, transparent); filter: blur(7px); transform: translateX(-50%); animation: fluxIllustrationShadow 2.4s ease-in-out infinite alternate; }
.onboarding-icon-svg { position: relative; z-index: 2; width: 96px; height: 96px; filter: drop-shadow(0 10px 10px rgba(73,55,68,.2)); transform-origin: 50% 60%; }
.onboarding-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.onboarding-fx i { position: absolute; display: block; }
/* Ракета: отдельное живое пламя и скоростной след синхронны с её полётом. */
.fx-rocket { animation: fluxRocketTrailFlight 2.2s cubic-bezier(.45,0,.3,1) infinite; }
.fx-rocket i:nth-child(1) { left: 24px; top: 71px; width: 44px; height: 18px; border-radius: 70% 12% 12% 70%; background: linear-gradient(90deg, rgba(239,56,91,0), #ff6548 30%, #ffbd39 68%, #fff5a8); transform: rotate(-43deg); transform-origin: right center; filter: blur(.4px) drop-shadow(0 0 8px rgba(255,113,51,.65)); animation: fluxRocketFlame 280ms ease-in-out infinite alternate; }
.fx-rocket i:nth-child(2) { left: 17px; top: 79px; width: 38px; height: 7px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255,112,72,.65), #fff); transform: rotate(-43deg); animation: fluxRocketFlame 190ms ease-in-out infinite alternate-reverse; }
.fx-rocket i:nth-child(3) { left: 6px; top: 93px; width: 48px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-orange) 72%, #fff)); transform: rotate(-43deg); box-shadow: 0 -9px 0 -1px color-mix(in srgb, var(--accent-peach) 55%, transparent); animation: fluxSpeedLine 900ms ease-out infinite; }
/* Семья: три тёплых сердечка поднимаются вокруг авторской иллюстрации. */
.fx-family i { width: 10px; height: 10px; border-radius: 4px 4px 4px 1px; background: linear-gradient(145deg,#ffb29e,#ef5e76); transform: rotate(45deg); opacity: 0; animation: fluxFamilyHeart 2.1s ease-out infinite; }
.fx-family i::before, .fx-family i::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: inherit; }
.fx-family i::before { left: -5px; } .fx-family i::after { top: -5px; }
.fx-family i:nth-child(1) { left: 19px; top: 57px; }
.fx-family i:nth-child(2) { right: 17px; top: 47px; animation-delay: -.7s; transform: rotate(45deg) scale(.8); }
.fx-family i:nth-child(3) { left: 63px; top: 15px; animation-delay: -1.35s; transform: rotate(45deg) scale(.65); }
/* Календарь: цветные листы вылетают и мягко возвращаются на место. */
.fx-calendar i { width: 20px; height: 15px; border: 2px solid rgba(255,255,255,.85); border-radius: 5px; box-shadow: 0 5px 12px rgba(73,55,68,.14); opacity: 0; animation: fluxCalendarPage 2.5s ease-in-out infinite; }
.fx-calendar i:nth-child(1) { right: 15px; top: 27px; background: linear-gradient(145deg,#ffaf98,#ff6d6d); }
.fx-calendar i:nth-child(2) { right: 7px; top: 52px; background: linear-gradient(145deg,#9be9e5,#46c8c3); animation-delay: -.8s; }
.fx-calendar i:nth-child(3) { left: 13px; top: 25px; background: linear-gradient(145deg,#c5b4ff,#8468db); animation-delay: -1.6s; }
/* Часы собраны в собственную сцену одинакового размера на телефоне и ПК. */
.hourglass-stage { position: relative; width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: 26px; }
.hourglass-stage .onboarding-icon-svg { position: relative; z-index: 2; width: 67px; height: 67px; transform-origin: 50% 50%; animation: fluxHourglassTurn 7.2s cubic-bezier(.45,0,.2,1) infinite; }
.hourglass-stage .fx-hourglass-frame { inset: 0; z-index: 1; animation: fluxHourglassSandVisibility 7.2s linear infinite; }
.hourglass-stage .fx-hourglass-frame i:nth-child(1) { left: 37px; top: 30px; width: 22px; height: 14px; clip-path: polygon(0 0,100% 0,50% 100%); background: linear-gradient(#ffeaa0,#f6b526); transform-origin: 50% 100%; animation: fluxUpperSand 3.6s linear infinite; }
.hourglass-stage .fx-hourglass-frame i:nth-child(2) { left: 47px; top: 42px; width: 3px; height: 14px; border-radius: 99px; background: linear-gradient(#fff0a9,#f2a51d); box-shadow: 0 0 5px rgba(255,190,54,.45); animation: fluxSandStream 3.6s linear infinite; }
.hourglass-stage .fx-hourglass-frame i:nth-child(3) { left: 37px; top: 53px; width: 22px; height: 14px; clip-path: polygon(50% 0,100% 100%,0 100%); background: linear-gradient(#ffe58a,#efa01a); transform-origin: 50% 100%; animation: fluxLowerSand 3.6s linear infinite; }
/* У колокольчика расходятся три собственные волны звука. */
.fx-bell i { width: 23px; height: 36px; top: 38px; border: 3px solid transparent; opacity: 0; animation: fluxBellArc 1.8s ease-out infinite; }
.fx-bell i:nth-child(1) { right: 13px; border-right-color: color-mix(in srgb, var(--accent-orange) 75%, #fff); border-radius: 0 50% 50% 0; }
.fx-bell i:nth-child(2) { left: 13px; border-left-color: color-mix(in srgb, var(--accent-orange) 75%, #fff); border-radius: 50% 0 0 50%; animation-delay: -.18s; }
.fx-bell i:nth-child(3) { right: 3px; width: 34px; border-right-color: color-mix(in srgb, var(--accent-family) 55%, #fff); border-radius: 0 50% 50% 0; animation-delay: -.36s; }
.onboarding-icon[data-icon="rocket"] .onboarding-icon-svg { animation: fluxRocketFlight 2.2s cubic-bezier(.45,0,.3,1) infinite; }
.onboarding-icon[data-icon="rocket"]::before { animation: fluxRocketSky 2.2s ease-in-out infinite; }
.onboarding-icon[data-icon="family"] .onboarding-icon-svg { animation: fluxFamilyBounce 2.1s ease-in-out infinite; }
.onboarding-icon[data-icon="family"]::before { border-radius: 50%; animation: fluxFamilyAura 2.1s ease-in-out infinite; }
.onboarding-icon[data-icon="calendar"] .onboarding-icon-svg { animation: fluxCalendarTurn 2.5s cubic-bezier(.4,0,.2,1) infinite; }
.onboarding-icon[data-icon="bell"] .onboarding-icon-svg { animation: fluxBellRing 1.8s ease-in-out infinite; transform-origin: 50% 18%; }
.onboarding-icon[data-icon="bell"]::before { animation: fluxBellWave 1.8s ease-out infinite; }
@keyframes fluxIllustrationGlow { from { transform: scale(.92); opacity: .72; } to { transform: scale(1.08); opacity: 1; } }
@keyframes fluxIllustrationShadow { from { transform: translateX(-50%) scale(.82); opacity: .4; } to { transform: translateX(-50%) scale(1.08); opacity: .2; } }
@keyframes fluxRocketFlight { 0%,100% { transform: translate(-12px,10px) rotate(-8deg) scale(.94); } 38% { transform: translate(9px,-13px) rotate(4deg) scale(1.04); } 55% { transform: translate(13px,-17px) rotate(7deg) scale(1.07); } 72% { transform: translate(-1px,-3px) rotate(-2deg) scale(1); } }
@keyframes fluxRocketTrailFlight { 0%,100% { transform: translate(-12px,10px) rotate(-8deg) scale(.94); } 38% { transform: translate(9px,-13px) rotate(4deg) scale(1.04); } 55% { transform: translate(13px,-17px) rotate(7deg) scale(1.07); } 72% { transform: translate(-1px,-3px) rotate(-2deg) scale(1); } }
@keyframes fluxRocketFlame { from { opacity: .68; scale: .72 1; translate: 8px 0; } to { opacity: 1; scale: 1.18 1; translate: -2px 0; } }
@keyframes fluxSpeedLine { 0% { opacity: 0; scale: .25 1; translate: 30px 0; } 35% { opacity: .85; } 100% { opacity: 0; scale: 1.15 1; translate: -20px 0; } }
@keyframes fluxFamilyHeart { 0% { opacity: 0; translate: 0 12px; scale: .45; } 28% { opacity: .9; } 100% { opacity: 0; translate: 4px -34px; scale: 1.15; } }
@keyframes fluxCalendarPage { 0%,22%,100% { opacity: 0; transform: translate(0,8px) rotate(0) scale(.72); } 42% { opacity: 1; transform: translate(10px,-12px) rotate(12deg) scale(1); } 68% { opacity: .55; transform: translate(-3px,-21px) rotate(-8deg) scale(.86); } }
@keyframes fluxUpperSand { 0%,8% { transform: scaleY(1); opacity: 1; } 78%,100% { transform: scaleY(.06); opacity: .72; } }
@keyframes fluxLowerSand { 0%,8% { transform: scaleY(.06); opacity: .72; } 78%,100% { transform: scaleY(1); opacity: 1; } }
@keyframes fluxSandStream { 0%,6%,82%,100% { opacity: 0; transform: scaleY(.15); } 14%,72% { opacity: 1; transform: scaleY(1); } }
@keyframes fluxBellArc { 0%,34% { opacity: 0; scale: .55; } 52% { opacity: .8; } 100% { opacity: 0; scale: 1.35; } }
@keyframes fluxRocketSky { 0%,100% { transform: translate(12px,-7px) scale(.9); border-radius: 42% 58% 54% 46%; } 50% { transform: translate(-9px,8px) scale(1.12); border-radius: 58% 42% 46% 54%; } }
@keyframes fluxFamilyBounce { 0%,100% { transform: translateY(4px) scale(.97); } 35% { transform: translateY(-8px) scale(1.04); } 52% { transform: translateY(0) scale(.99); } 68% { transform: translateY(-4px) scale(1.02); } }
@keyframes fluxFamilyAura { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-family) 26%, transparent), 0 16px 38px color-mix(in srgb, var(--accent-orange) 20%, transparent); } 55% { box-shadow: 0 0 0 14px transparent, 0 20px 46px color-mix(in srgb, var(--accent-family) 34%, transparent); } }
@keyframes fluxCalendarTurn { 0%,100% { transform: perspective(260px) rotateY(-8deg) translateY(4px); } 42% { transform: perspective(260px) rotateY(10deg) translateY(-7px) scale(1.04); } 58% { transform: perspective(260px) rotateY(0) translateY(-2px); } }
/* Песок не вращается вместе с корпусом: гравитация всегда направлена вниз. */
@keyframes fluxHourglassSandVisibility { 0%,39% { opacity: 1; } 42%,48% { opacity: 0; } 51%,89% { opacity: 1; } 92%,98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fluxHourglassTurn { 0%,40% { transform: rotate(0deg); } 48%,90% { transform: rotate(180deg); } 98%,100% { transform: rotate(360deg); } }
@keyframes fluxBellRing { 0%,38%,100% { transform: rotate(0deg) translateY(2px); } 45% { transform: rotate(-13deg) translateY(-5px); } 53% { transform: rotate(12deg) translateY(-5px); } 61% { transform: rotate(-8deg) translateY(-3px); } 69% { transform: rotate(6deg) translateY(-2px); } 77% { transform: rotate(0); } }
@keyframes fluxBellWave { 0%,38% { transform: scale(.8); opacity: .8; } 78%,100% { transform: scale(1.36); opacity: 0; } }
.onboarding-title { font-size: 24px; font-weight: bold; margin-bottom: 15px; color: var(--text-main); }
.onboarding-desc { font-size: 15px; color: var(--text-light); line-height: 1.6; max-width: 380px; }
.onboarding-dots { display: flex; gap: 8px; margin-bottom: 30px; }
.onboarding-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-color); transition: all 0.3s; }
.onboarding-dots .dot.active { background: var(--accent-orange); width: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 171, 145, 0.4); }
.onboarding-footer { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--surface-color); }
.onboarding-footer .modal-btn { padding: 10px 24px; min-width: 100px; }
.onboarding-footer.first-step { justify-content: stretch; }
.onboarding-footer.first-step #onboarding-next { width: 100%; flex: 1 1 100%; padding: 13px 20px; }
.onboarding-footer .btn-secondary { background: var(--bg-color); border: 1px solid var(--surface-color); color: var(--text-main); }
.onboarding-footer .btn-secondary:hover { background: var(--surface-color); }

/* Кроппер открывается из настроек и должен быть поверх уже открытого окна настроек. */
#modal-avatar-crop { z-index: 4000; }
#modal-update { display: flex !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
#modal-update.active { opacity: 1; visibility: visible; }
.update-modal { width: 500px !important; padding: 30px !important; max-width: 90%; text-align: left; }
.update-version { font-size: 28px; font-weight: bold; color: var(--accent-orange); margin-bottom: 10px; text-align: center; padding: 0 52px; line-height: 1.25; }
.update-list { list-style: none; padding: 0; margin: 20px 0; }
.update-list li { padding: 8px 0; border-bottom: 1px solid var(--surface-color); font-size: 15px; color: var(--text-main); display: flex; gap: 10px; }
.update-list li::before { content: '•'; color: var(--accent-orange); font-weight: bold; }
@media (max-width: 480px) {
    .update-version { font-size: 21px; padding: 0 46px; }
}

#modal-family { display: flex !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
#modal-family.active { opacity: 1; visibility: visible; }
.family-modal { width: 500px !important; padding: 30px !important; max-width: 90%; }
.family-modal .modal-title { color: var(--accent-peach); }
.family-code-box { padding: 20px; background: var(--bg-color); border-radius: 15px; font-size: 24px; font-weight: bold; letter-spacing: 5px; margin: 20px 0; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--shadow-inner); font-family: monospace; }
.family-members-list { display: flex; flex-direction: column; gap: 8px; margin: 15px 0; max-height: 200px; overflow-y: auto; }
.family-member-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; background: var(--surface-color); border-radius: 12px; }
.family-member-item .member-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-peach); font-size: 14px; margin-right: 10px; }
.family-member-item .member-info { display: flex; align-items: center; gap: 10px; }
.family-member-item .member-role { font-size: 11px; color: var(--text-light); font-weight: bold; }
.member-presence { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-light); margin-top: 2px; }
.member-presence.is-online { color: #2e9b57; font-weight: 800; }
.presence-dot { width: 6px; height: 6px; border-radius: 50%; background: #b5b5b5; display: inline-block; }
.member-presence.is-online .presence-dot { background: #35bd68; box-shadow: 0 0 7px rgba(53, 189, 104, .75); }

/* Компактная высота ноутбуков (включая MacBook и масштаб браузера 110–125%).
   Календарь всегда делит доступную высоту между 5–6 неделями и не обрезает нижний ряд. */
@media (min-width: 851px) and (max-height: 820px) {
    header { height: 58px; padding: 7px 16px; }
    main { gap: 12px; padding: 0 14px 10px; }
    .left-panel { gap: 8px; }
    .right-panel { padding: 10px 10px 0; border-radius: 24px; }
    .view-controls { margin-bottom: 5px; }
    .sticky-header { padding-bottom: 3px; }
    .view-filter-bar { gap: 5px; padding-bottom: 6px; }
    .view-filter-btn { padding: 6px 12px; font-size: 11px; }
    .calendar-grid-wrapper { margin: 0 -10px; padding: 0 10px 10px; }
    .calendar-grid { grid-template-rows: 22px; gap: 5px; }
    .day-cell { padding: 5px; border-radius: 12px; }
    .day-entry { padding: 2px 4px; font-size: 8.5px; }
    .date-widget-big { padding: 9px 12px; font-size: 13px; }
    .add-task-btn { padding: 10px; }
    .profile-oval { padding: 5px 10px; }
    .profile-oval .avatar-tiny { width: 31px; height: 31px; }
}

@media (max-width: 850px) {
    /* Keep Comic Sans on desktop; use a readable Cyrillic font on phones/tablets. */
    * { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; }
    button, .ios-segment, .day-cell, .task-item, .nav-btn-full, .view-filter-btn, .profile-oval { touch-action: manipulation; }
    .theme-scene-photo, .theme-background-motif, .decor-art { animation: none !important; transform: none; will-change: auto; }
    .right-panel, .day-cell, .theme-preview-header, .theme-preview-sidebar, .theme-preview-calendar { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .day-cell:hover, .task-item:hover, .nav-btn-full:hover, .avatar-option:hover { transform: none; }
    header { height: 60px; padding: 8px 12px; gap: 8px; }
    .brand-text .logo { font-size: 26px; letter-spacing: 2px; }
    .brand-text .slogan { display: none; }
    .nav-buttons-full { gap: 5px; height: 40px; }
    .nav-btn-full { font-size: 13px; padding: 0 10px; border-radius: 25px; }
    main { display: flex; flex-direction: column; padding: 10px; gap: 15px; overflow-y: auto; }
    .left-panel { width: 100%; gap: 10px; height: auto; flex-shrink: 0; }
    .task-container-split { padding: 15px; border-radius: 20px; min-height: 250px; }
    .task-item { cursor: pointer; touch-action: pan-y; }
    .task-delete-btn { display: none; }
    .add-task-btn { padding: 18px; font-size: 16px; border-radius: 20px; }
    .profile-oval { padding: 10px 15px; border-radius: 40px; }
    .profile-oval .avatar-tiny { width: 40px; height: 40px; font-size: 20px; }
    .profile-oval .user-name-tiny { font-size: 16px; }
    .date-widget-big { padding: 12px; font-size: 14px; }
    .right-panel { flex: none; min-height: 0; height: auto; padding: 15px; border-radius: 20px; display: flex; flex-direction: column; overflow: visible; }
    .calendar-grid-wrapper { flex: none; margin: 0; padding: 0; overflow: visible; }
    .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 24px; grid-auto-rows: 48px; gap: 4px; width: 100%; min-width: 0; min-height: 0; height: auto; }
    .day-cell { min-width: 0; min-height: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 11px; padding: 4px; overflow: visible; }
    .day-number { align-self: center; font-size: 13px; }
    .day-name { font-size: 10px; padding-bottom: 2px; }
    .day-entry-list { display: none; }
    .day-cell.has-calendar-entries::after { display: flex; align-items: center; justify-content: center; content: attr(data-entry-count); right: 3px; bottom: 3px; width: 15px; height: 15px; font-size: 8px; font-weight: 900; color: #fff; background: var(--accent-red); box-shadow: none; }
    .day-cell.has-calendar-entries.has-task-completed::after { background: #4caf50; }
    .day-cell.is-selected { outline: 2px solid var(--accent-orange); outline-offset: 1px; transform: none; }
    .mobile-day-agenda { display: block; }
    .task-datetime { font-size: 11px; }
    .view-controls { margin-bottom: 8px; gap: 3px; }
    .cal-nav-btn { font-size: 18px; padding: 2px; }
    #cal-month-year { font-size: 16px !important; }
    #schedule-day-title { font-size: 11px !important; }
    .view-toggle-btn { font-size: 11px; padding: 4px 10px; }
    #auth-container { justify-content: flex-start; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
    #auth-container .custom-modal, .modal-overlay .custom-modal { width: 95% !important; padding: 20px !important; border-radius: 25px; max-width: 400px; }
    #auth-container .auth-modal { flex: 0 0 auto; margin: auto; max-height: calc(100dvh - 16px); overflow-y: auto; }
    .oauth-button { min-height: 44px; }
    .settings-modal { width: calc(100% - 12px) !important; max-width: 430px; max-height: calc(100dvh - 12px); padding: 16px !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    #modal-notification-guide { padding: 4px; align-items: flex-end; }
    .notification-guide-modal { width: 100% !important; max-height: calc(100dvh - 8px); padding: 18px 13px max(14px, env(safe-area-inset-bottom)) !important; border-radius: 24px 24px 0 0 !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .notification-guide-card { padding: 13px 14px; }
    .notification-guide-card li { font-size: 11.5px; }
    #modal-event { align-items: flex-end; }
    #modal-event .ios-modal { width: 100%; max-width: 520px; max-height: calc(100dvh - 6px); border-radius: 24px 24px 0 0; }
    #modal-event .ios-content { padding: 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .theme-preview-scene { height: 158px; }
    .wide-modal { width: 95% !important; max-width: 500px; }
    .onboarding-modal { width: 95% !important; padding: 20px !important; }
    .onboarding-icon { width: 116px; height: 102px; }
    .onboarding-icon-svg { width: 82px; height: 82px; }
    .onboarding-title { font-size: 20px; }
    .onboarding-desc { font-size: 14px; }
    .onboarding-footer .modal-btn { padding: 8px 16px; min-width: 80px; font-size: 13px; }
    .avatar-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 480px) {
    header { height: 50px; padding: 5px 8px; }
    .brand-text .logo { font-size: 21px; letter-spacing: 1.5px; }
    .nav-btn-full { font-size: 11px; }
    .day-cell { min-height: 44px; height: 44px; font-size: 12px; border-radius: 8px; padding: 3px; }
    .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 3px; }
    .mobile-day-agenda { margin-top: 10px; padding: 10px; }
    .mobile-day-agenda-title { font-size: 13px; }
    .mobile-day-add { padding: 7px 9px; font-size: 11px; }
    .mobile-agenda-time { min-width: 70px; font-size: 11px; }
    #modal-event .ios-row { align-items: flex-start; flex-wrap: wrap; padding: 12px; }
    #modal-event .ios-date-controls { width: 100%; justify-content: space-between; gap: 6px; }
    #modal-event .ios-date-input, #modal-event .ios-time-input { flex: 1; min-width: 0; width: auto; }
    .task-scope-seg .ios-segment { font-size: 10px; padding: 8px 4px; }
    .theme-preview-scene { height: 148px; }
    .avatar-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
}
/* ==================== НОВЫЕ ТЕМЫ (v2.2) ==================== */
body.mint-theme { --bg-color: #EAF7F0; --surface-color: #D3EDE0; --text-main: #1F4D3A; --text-light: #5E8C77; --accent-peach: #A8DEC4; --accent-orange: #6FCF9F; --accent-red: #EF9A9A; --accent-green: #9CCC65; --shadow-outer: 8px 8px 16px #CBE3D8, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #CBE3D8, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #CBE3D8, -5px -5px 10px #FFFFFF; --accent-family: #00897B; }
body.honey-theme { --bg-color: #FFF8E1; --surface-color: #FFECB3; --text-main: #6D4C00; --text-light: #A98A32; --accent-peach: #FFE082; --accent-orange: #FFC107; --accent-red: #E57373; --accent-green: #C5E1A5; --shadow-outer: 8px 8px 16px #EADFB8, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #EADFB8, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #EADFB8, -5px -5px 10px #FFFFFF; --accent-family: #F57F17; }
body.grape-theme { --bg-color: #2B1B3D; --surface-color: #3C2755; --text-main: #EFE3FA; --text-light: #B79DD1; --accent-peach: #6A4A8F; --accent-orange: #9575CD; --accent-red: #E57390; --accent-green: #81C784; --shadow-outer: 8px 8px 16px #1D1229, -8px -8px 16px #3A2451; --shadow-inner: inset 6px 6px 12px #1D1229, inset -6px -6px 12px #3A2451; --shadow-btn: 5px 5px 10px #1D1229, -5px -5px 10px #3A2451; --accent-family: #CE93D8; }
body.arctic-theme { --bg-color: #F2F8FC; --surface-color: #DCEBF7; --text-main: #21455E; --text-light: #5E7F96; --accent-peach: #BBDCF0; --accent-orange: #64B5F6; --accent-red: #EF9A9A; --accent-green: #A5D6A7; --shadow-outer: 8px 8px 16px #D3E2EC, -8px -8px 16px #FFFFFF; --shadow-inner: inset 6px 6px 12px #D3E2EC, inset -6px -6px 12px #FFFFFF; --shadow-btn: 5px 5px 10px #D3E2EC, -5px -5px 10px #FFFFFF; --accent-family: #0288D1; }
body.steel-theme { --bg-color: #2E3238; --surface-color: #3C424A; --text-main: #E8ECF1; --text-light: #A5AEB8; --accent-peach: #566070; --accent-orange: #90A4AE; --accent-red: #E57373; --accent-green: #A5D6A7; --shadow-outer: 8px 8px 16px #22262B, -8px -8px 16px #3A3F46; --shadow-inner: inset 6px 6px 12px #22262B, inset -6px -6px 12px #3A3F46; --shadow-btn: 5px 5px 10px #22262B, -5px -5px 10px #3A3F46; --accent-family: #4FC3F7; }
body.potter-theme { --bg-color: #15172C; --surface-color: #242844; --text-main: #EAE6F4; --text-light: #9E96BA; --accent-peach: #6D5A9E; --accent-orange: #E8B34B; --accent-red: #D97A7A; --accent-green: #7BC79F; --shadow-outer: 8px 8px 16px #0D0E1C, -8px -8px 16px #232541; --shadow-inner: inset 6px 6px 12px #0D0E1C, inset -6px -6px 12px #232541; --shadow-btn: 5px 5px 10px #0D0E1C, -5px -5px 10px #232541; --accent-family: #C9A227; }

/* ==================== СЕРВЕР / УВЕДОМЛЕНИЯ / АДМИНКА ==================== */
.toast.hide { animation: slideOut 0.4s ease forwards; }
@keyframes slideOut { to { opacity: 0; transform: translateX(40px); } }

.server-state { margin-top: 14px; font-size: 12px; color: var(--text-light); padding: 6px 12px; border-radius: 12px; background: var(--surface-color); display: inline-block; }
.server-state.online { color: var(--accent-green); font-weight: bold; }
.server-state.offline { color: var(--accent-red); font-weight: bold; }

.stat-source-line { font-size: 12px; color: var(--text-light); margin: 10px 0 4px; text-align: center; }
#stats-chart-container { overflow-x: auto; }
#stats-chart { max-width: 100%; }


/* Оверлей техработ: админ видит то же, что пользователи, но может выйти */
#maintenance-overlay .maintenance-admin { display: none; }
#maintenance-overlay.admin-view .maintenance-admin {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
    width: 100%;
    max-width: 340px;
}
#maintenance-overlay.admin-view .maintenance-admin p {
    font-size: 13px;
    opacity: .8;
    margin-bottom: 4px;
}

/* ==================== ВХОД ПО КОДУ ==================== */
.code-input {
    text-align: center;
    font-size: 30px;
    letter-spacing: 14px;
    font-weight: 700;
    padding-left: 14px;
}
.code-sent-line {
    font-size: 13px;
    color: var(--text-light);
    background: var(--surface-color);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

/* ==================== ПАНЕЛЬ РАЗРАБОТЧИКА: ВЕРСИИ И ОФОРМЛЕНИЕ ==================== */
.dev-hint {
    font-size: 12px;
    color: var(--text-light);
    text-align: left;
    background: var(--surface-color);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
#dev-panel-versions .setting-label,
#dev-panel-decor .setting-label {
    display: block;
    text-align: left;
    margin-top: 12px;
}
#dev-panel-versions .feedback-input { min-height: 70px; }

/* ==================== СЕЗОНЫ И ПРАЗДНИКИ ==================== */
/* Фоновый слой оформления: только бледная графика, ничего не падает и не мешает. */
#decor-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    /* Настоящий фон: слой всегда под приложением и никогда не перекрывает текст. */
    z-index: 0;
    color: var(--text-main);
}
#auth-container,
#app-main {
    position: relative;
    z-index: 1;
}
.decor-tint {
    position: absolute;
    inset: 0;
    opacity: .58;
}
.theme-decor-wash { position: absolute; inset: 0; opacity: .75; }
.theme-background-motif { position: absolute; line-height: 0; opacity: .13; }
.theme-background-motif svg { display: block; overflow: visible; }
.theme-scene-fill { display: none; }
.theme-scene-photo { position: absolute; inset: -1.5%; background-repeat: no-repeat; background-size: cover; opacity: .5; filter: saturate(1.04) contrast(.98); animation: themeSceneBreathe 24s ease-in-out infinite alternate; will-change: transform, filter; }
.theme-scene-photo.is-miku { opacity: .48; filter: saturate(1) contrast(.98); animation: themeMikuPan 20s ease-in-out infinite alternate; }
.theme-changing .theme-scene-photo { animation: themeSceneEnter .95s cubic-bezier(.18,.8,.2,1) both; }
body.sea-theme .theme-scene-photo, body.ocean-theme .theme-scene-photo { animation-name: themeWaterDrift; animation-duration: 20s; }
body.cyber-theme .theme-scene-photo, body.neon-theme .theme-scene-photo, body.nightcity-theme .theme-scene-photo { animation-name: themeNeonPulse; animation-duration: 9s; }
body.galaxy-theme .theme-scene-photo { animation-name: themeGalaxyDrift; animation-duration: 28s; }
body.sakura-theme .theme-scene-photo, body.autumn-theme .theme-scene-photo { animation-name: themeBreeze; animation-duration: 18s; }
body.theme-changing .theme-scene-photo { animation: themeSceneEnter .95s cubic-bezier(.18,.8,.2,1) both !important; }
.theme-background-motif { animation: themeMotifFloat 13s ease-in-out infinite alternate; }
.theme-background-motif:nth-of-type(2n) { animation-delay: -4s; animation-duration: 17s; }
.theme-miku-figure { position: absolute; right: clamp(-75px, -3vw, -25px); bottom: -65px; width: min(30vw, 410px); opacity: .08; line-height: 0; z-index: 2; }
.theme-miku-figure svg { display: block; width: 100%; height: auto; }
.theme-potions { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.theme-potion { position: absolute; width: 56px; height: 100px; opacity: .42; line-height: 0; transform-origin: bottom center; filter: drop-shadow(0 10px 16px rgba(0,0,0,.30)); }
.theme-potion-left { left: clamp(16px, 4vw, 66px); }
.theme-potion-right { right: clamp(16px, 4vw, 66px); }
.theme-potion-flask { display: block; width: 100%; height: auto; }
.theme-potion-bubble { position: absolute; left: 46%; bottom: 12px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(255,255,255,.55); opacity: 0; animation: potionBubble 2.8s ease-in infinite; }
.theme-potion-bubble:nth-child(2) { left: 32%; width: 3px; height: 3px; animation-delay: .9s; animation-duration: 3.2s; }
.theme-potion-bubble:nth-child(3) { left: 62%; width: 4px; height: 4px; animation-delay: 1.7s; animation-duration: 2.4s; }
@keyframes potionBubble {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    12% { opacity: .9; }
    55% { opacity: .55; }
    100% { transform: translateY(-26px) translateX(3px); opacity: 0; }
}
body.miku-theme .logo { color: #269F99; text-shadow: 0 0 18px rgba(57,197,187,.18); }
body.miku-theme .view-filter-btn.active { background: linear-gradient(135deg, #39C5BB, #E86A92); }
@keyframes themeSceneEnter { from { opacity: 0; transform: scale(1.1); filter: saturate(.7) blur(7px); } to { opacity: .5; transform: scale(1); filter: saturate(1.04) blur(0); } }
@keyframes themeSceneBreathe { from { transform: translate3d(-.4%, -.3%, 0); } to { transform: translate3d(.5%, .35%, 0); } }
@keyframes themeMikuPan { from { transform: translateX(-.9%); } to { transform: translateX(.9%); } }
@keyframes themeWaterDrift { from { transform: translateX(-.9%); filter: saturate(.96); } to { transform: translateX(.9%); filter: saturate(1.13); } }
@keyframes themeNeonPulse { 0%, 100% { filter: saturate(.95) brightness(.92); } 50% { filter: saturate(1.22) brightness(1.08); } }
@keyframes themeGalaxyDrift { from { transform: rotate(-.25deg); filter: hue-rotate(-5deg) saturate(1); } to { transform: rotate(.25deg); filter: hue-rotate(8deg) saturate(1.16); } }
@keyframes themeBreeze { from { transform: translate3d(-.5%, 0, 0); } to { transform: translate3d(.6%, -.35%, 0); } }
@keyframes themeMotifFloat { from { translate: 0 0; } to { translate: 0 -12px; } }
.decor-art {
    position: absolute;
    opacity: .075;
    line-height: 0;
}
.decor-art svg {
    display: block;
    overflow: visible;
}
.decor-art.soft { opacity: .055; }
.decor-art.flag { opacity: .11; }
.decor-art.wide { opacity: .09; }

/* Ленточка в углу к 9 мая — рисуется, не эмодзи. */
.decor-corner {
    position: absolute;
    top: 0;
    right: 0;
    opacity: .12;
}

@media (max-width: 700px) {
    .theme-background-motif { opacity: .12; }
    /* На телефоне используется вертикальная 9:16 сцена темы: она заполняет весь
       экран (cover) и подстраивается под его размеры, без обрезки и полос. */
    .theme-scene-fill { display: none; }
    .welcome-theme-backdrop { inset: 0; }
    .theme-scene-photo, .theme-scene-photo.is-miku {
        inset: 0;
        background-size: cover !important;
        background-position: center !important;
        animation: none !important;
        opacity: .5;
    }
    .theme-miku-figure { width: 285px; right: -82px; bottom: -38px; opacity: .055; }
    .theme-potion { opacity: .34; }
    .theme-potion-right { right: 8px; }
    .theme-potion-left { left: 8px; }
    .decor-art { opacity: .05; }
    .decor-art.flag { opacity: .09; }
}
@media (prefers-reduced-motion: reduce) {
    .decor-art { opacity: .05; }
    .theme-potion-bubble, .welcome-candle, .welcome-candle::before, .welcome-snitch, .welcome-snitch::after, .welcome-ambient i { animation: none !important; opacity: 0; }
    .welcome-theme-backdrop, .welcome-atmosphere span, .welcome-rings i,
    .welcome-shutters b, .welcome-spectrum i, .welcome-logo::before, .welcome-logo::after, .modal-overlay#modal-welcome::after,
    .anim-pop-in, .anim-fade-up, .anim-typing, .onboarding-icon::before, .onboarding-icon::after, .onboarding-icon-svg, .onboarding-fx, .onboarding-fx i { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ==================== ТЕХНИЧЕСКИЕ РАБОТЫ ==================== */
#maintenance-overlay {
    overflow: hidden;
    justify-content: flex-end;
    color: #EAF4F5;
    background: #071923 url('assets/maintenance/construction-site-cinematic.webp?v=4k') center / cover no-repeat;
    animation: maintenanceCamera 20s ease-in-out infinite alternate;
}
#maintenance-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(3,14,22,.08), rgba(3,14,22,.3) 52%, rgba(3,14,22,.76) 100%),
        radial-gradient(circle at 50% 52%, transparent 0 24%, rgba(2,10,17,.25) 72%);
    pointer-events: none;
}
#maintenance-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .13;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(126,220,224,.08) 3px 4px);
    mix-blend-mode: screen;
}
.maintenance-cinematic { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.crane-cable { position: absolute; left: 27.2%; top: 0; width: 2px; height: 31%; background: linear-gradient(#0b1418, #d1913b); transform-origin: top; animation: craneCable 5.8s ease-in-out infinite; }
.crane-cable i { position: absolute; left: 50%; bottom: -19px; width: 19px; height: 23px; border: 3px solid #D5983D; border-top: 0; border-radius: 0 0 12px 12px; transform: translateX(-50%); filter: drop-shadow(0 0 7px rgba(255,177,72,.55)); }
.welding-glow { position: absolute; right: 9.5%; top: 39%; width: 90px; height: 90px; filter: drop-shadow(0 0 14px #FFB33E); }
.welding-glow::before { content: ''; position: absolute; left: 44px; top: 42px; width: 8px; height: 8px; border-radius: 50%; background: #FFF5BC; box-shadow: 0 0 20px #FF9F2A, 0 0 42px #FF7417; animation: weldPulse .48s steps(2,end) infinite; }
.welding-glow i { position: absolute; left: 48px; top: 45px; width: 4px; height: 4px; border-radius: 50%; background: #FFE275; opacity: 0; animation: cinematicSpark 1.25s ease-out infinite; --sx: 34px; --sy: -40px; }
.welding-glow i:nth-child(2) { animation-delay: .18s; --sx: -38px; --sy: -32px; }
.welding-glow i:nth-child(3) { animation-delay: .36s; --sx: 47px; --sy: 8px; }
.welding-glow i:nth-child(4) { animation-delay: .55s; --sx: -42px; --sy: 18px; }
.welding-glow i:nth-child(5) { animation-delay: .73s; --sx: 17px; --sy: -52px; }
.welding-glow i:nth-child(6) { animation-delay: .9s; --sx: -12px; --sy: -48px; }
.blueprint-build { position: absolute; left: 50%; top: 29%; width: min(420px, 54vw); height: 150px; transform: translateX(-50%); opacity: .92; }
.flux-assembly { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .02em; color: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(58px, 8vw, 112px); font-weight: 900; letter-spacing: .04em; -webkit-text-stroke: 2px #76D5D6; text-shadow: 0 0 18px rgba(73,209,211,.55); }
.flux-assembly span { opacity: 0; transform: translateY(-80px) rotate(-4deg); animation: assembleLetter 5s cubic-bezier(.2,.8,.2,1) infinite; }
.flux-assembly span:nth-child(2) { animation-delay: .18s; }
.flux-assembly span:nth-child(3) { animation-delay: .36s; }
.flux-assembly span:nth-child(4) { animation-delay: .54s; }
.assembly-beam { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, #76D5D6, transparent); box-shadow: 0 0 10px #57BFC3; opacity: .65; }
.beam-one { left: 5%; right: 5%; top: 30px; animation: blueprintBeam 3.8s ease-in-out infinite alternate; }
.beam-two { left: 15%; right: 15%; bottom: 24px; animation: blueprintBeam 3.8s ease-in-out -1.5s infinite alternate-reverse; }
.assembly-scan { position: absolute; top: 10px; bottom: 10px; width: 2px; background: #F5B858; box-shadow: 0 0 16px #F5B858; opacity: .8; animation: blueprintScan 3.2s ease-in-out infinite; }
.maintenance-message { position: relative; z-index: 4; width: min(610px, calc(100% - 32px)); margin: 0 auto 7vh; padding: 20px 24px; border: 1px solid rgba(128,220,221,.26); border-radius: 20px; background: rgba(4,18,27,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); text-align: center; }
.maintenance-kicker { margin-bottom: 8px; color: #75D0D3; font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
#maintenance-overlay h1 { margin: 0 0 7px; color: #F5FAFA; font-size: clamp(27px, 4vw, 42px); line-height: 1.08; text-shadow: 0 4px 22px rgba(0,0,0,.45); }
#maintenance-overlay > p { display: none; }
.maintenance-message > p { margin: 0; color: rgba(232,245,246,.78); font-size: 15px; }
.build-progress { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 15px auto 0; color: rgba(232,245,246,.72); font-size: 12px; }
.build-progress i { width: 8px; height: 8px; border-radius: 50%; background: #F5B858; box-shadow: 0 0 10px #F5B858; animation: buildStatusPulse 1s ease-in-out infinite; }
.build-progress b { min-width: 22px; overflow: hidden; color: #75D0D3; letter-spacing: 3px; animation: buildDots 1.5s steps(4,end) infinite; }
#maintenance-overlay .maintenance-admin { margin-top: 15px; }
#maintenance-overlay .maintenance-admin p { color: rgba(232,245,246,.62); }
#maintenance-overlay .maintenance-admin .modal-btn { border: 1px solid rgba(117,208,211,.34); background: rgba(15,42,52,.78); color: #EAF4F5; box-shadow: none; }
#maintenance-overlay .maintenance-admin .btn-primary { background: linear-gradient(135deg, #287B80, #BD7D36); border: 0; }
.hazard-tape { position: absolute; left: -5%; width: 110%; height: 13px; z-index: 7; opacity: .82; background: repeating-linear-gradient(-45deg, #F1B735 0 13px, #111A1D 13px 26px); background-size: 37px 37px; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.hazard-tape.tape-top { top: 3.5%; transform: rotate(-1.2deg); animation: cinematicTapeTop 1.25s linear infinite; }
.hazard-tape.tape-bottom { bottom: 3.5%; transform: rotate(1.2deg); animation: cinematicTapeBottom 1.25s linear infinite; }
@keyframes maintenanceCamera { from { background-position: 49% center; } to { background-position: 51% center; } }
@keyframes craneCable { 0%,100% { transform: scaleY(.82); } 50% { transform: scaleY(1.08); } }
@keyframes weldPulse { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes cinematicSpark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx),var(--sy)) scale(.2); } }
@keyframes assembleLetter { 0%,8% { opacity: 0; transform: translateY(-80px) rotate(-4deg); } 22%,82% { opacity: 1; transform: translateY(0) rotate(0); } 94%,100% { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes blueprintBeam { from { transform: scaleX(.45); opacity: .25; } to { transform: scaleX(1); opacity: .8; } }
@keyframes blueprintScan { 0%,100% { left: 4%; opacity: 0; } 15%,85% { opacity: .85; } 50% { left: 96%; } }
@keyframes buildStatusPulse { 50% { opacity: .35; transform: scale(.72); } }
@keyframes buildDots { from { width: 0; } to { width: 24px; } }
@keyframes cinematicTapeTop { from { background-position: 0 0; transform: rotate(-1.2deg) translateX(0); } to { background-position: 37px 0; transform: rotate(-1.2deg) translateX(3px); } }
@keyframes cinematicTapeBottom { from { background-position: 37px 0; transform: rotate(1.2deg) translateX(3px); } to { background-position: 0 0; transform: rotate(1.2deg) translateX(0); } }
@media (max-width: 700px) {
    #maintenance-overlay { background-position: 61% center; animation: none; }
    .hazard-tape { height: 10px; }
    .blueprint-build { top: 23%; width: 78vw; height: 120px; }
    .flux-assembly { font-size: clamp(52px, 18vw, 82px); }
    .crane-cable { left: 22%; height: 24%; }
    .welding-glow { right: 2%; top: 35%; transform: scale(.7); }
    .maintenance-message { margin-bottom: 6vh; padding: 17px 15px; border-radius: 17px; backdrop-filter: blur(8px); }
    .maintenance-kicker { font-size: 8px; }
    .maintenance-message > p { font-size: 13px; }
    .build-progress { margin-top: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    #maintenance-overlay, .crane-cable, .welding-glow::before, .welding-glow i, .flux-assembly span, .assembly-beam, .assembly-scan, .build-progress i, .build-progress b, .hazard-tape { animation: none !important; }
}

/* —— Семейный режим v2 —— */
.view-filter-bar {
    display: none;
    gap: 8px;
    padding: 0 4px 12px;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.view-filter-bar[style*="flex"],
.view-filter-bar.is-visible {
    display: flex !important;
}
.view-filter-btn {
    border: 0;
    background: var(--surface-color);
    color: var(--text-light);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.view-filter-btn:hover { transform: translateY(-1px); color: var(--text-main); }
.view-filter-btn.active {
    background: var(--accent-family, #7E57C2);
    color: #fff;
    box-shadow: var(--shadow-outer);
}
.task-scope-block { margin-bottom: 12px; }
.task-scope-seg { margin-bottom: 0; }
.task-scope-seg .ios-segment { padding-left: 8px; padding-right: 8px; font-size: 12px; }
.event-delete-button { display: none; width: 100%; margin-top: 20px; padding: 13px 16px; border: 1px solid rgba(229, 57, 53, .35); border-radius: 14px; background: rgba(229, 57, 53, .1); color: #c62828; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.event-delete-button:hover { background: rgba(229, 57, 53, .18); }
.event-delete-button.is-visible { display: block; }
.task-author-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    margin-top: 3px;
}
.task-author-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.family-lead { color: var(--text-light); margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
.family-or { text-align: center; color: var(--text-light); font-size: 12px; margin: 14px 0 10px; }
.family-join-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.family-join-name { margin-top: 8px; text-align: left; }
.family-invite-card, .family-profile-card {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
    text-align: left;
}
.family-invite-label { font-size: 12px; font-weight: 700; color: var(--text-light); margin-bottom: 8px; }
.family-code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.family-mini-btn { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
.family-color-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.family-color-swatch {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0;
}
.family-color-swatch.active { border-color: var(--text-main); transform: scale(1.12); }
.family-actions { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.family-member-item { align-items: center; }
.family-member-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.family-member-actions button {
    border: 0; background: var(--bg-color); color: var(--text-main);
    border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.timeline-event .task-author-tag { color: rgba(255,255,255,0.9); }

/* In-app confirm (instead of browser alert/confirm) */
.confirm-modal {
    max-width: 420px;
    text-align: left;
}
.confirm-modal .modal-title {
    text-align: left;
    margin-bottom: 10px;
}
.confirm-modal .modal-text {
    text-align: left;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 18px;
    white-space: pre-line;
}
.confirm-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.confirm-actions .modal-btn {
    min-width: 120px;
    flex: 1 1 auto;
}
.repeat-delete-actions { display: flex; flex-direction: column; gap: 9px; }
.repeat-delete-actions .modal-btn { width: 100%; margin: 0; }
.repeat-delete-modal .modal-text { margin-bottom: 16px; }

/* ==================== 2.5.5: недельный список и шкала выполнения ==================== */
/* Боковой список показывает записи только текущей недели (пн–вс); над ним — шкала 0–100 %. */
.week-progress { display: flex; flex-direction: column; gap: 8px; background: var(--bg-color); border-radius: 20px; box-shadow: var(--shadow-inner); padding: 14px 18px 12px; }
.week-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.week-progress-title { font-size: 14px; font-weight: bold; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-progress-title .week-range-label { font-weight: normal; color: var(--text-light); margin-left: 7px; font-size: 12px; }
.week-progress-percent { font-size: 18px; font-weight: 800; color: var(--text-main); flex-shrink: 0; }
.week-progress-bar { height: 10px; border-radius: 999px; background: var(--surface-color); box-shadow: var(--shadow-inner); overflow: hidden; }
.week-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-green), var(--accent-peach)); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.week-progress-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-light); }
.week-progress-stats .wp-stat { white-space: nowrap; }
@media (max-width: 850px) {
    .week-progress { padding: 10px 14px 9px; border-radius: 16px; gap: 6px; }
    .week-progress-percent { font-size: 16px; }
    .week-progress-stats { font-size: 11px; gap: 3px 10px; }
}