/* ==========================================================================
   ПАЛИТРА iOS 27 LIQUID GLASS (ВЕРСИЯ 5.12 PRO)
   ========================================================================== */
:root { 
    --theme-closet: #ea6c12;     
    --theme-closet-rgb: 234, 108, 18;
    --theme-washing: #1d9bf0; 
    --theme-washing-rgb: 29, 155, 240;
    --theme-drying: #9d4edd;     
    --theme-drying-rgb: 157, 78, 221;
    
    --active-accent: var(--theme-closet); 
    --active-accent-rgb: 234, 108, 18;

    /* Светлая тема: жемчужно-платиновый фон и сатиновые карточки без чистого #ffffff */
    --bg-base: #e6e8f0; 
    --card: #f4f5f9;
    --card-elevated: #f8f9fc;
    --card-well: #ebedf5;
    --card-border: rgba(15, 23, 42, 0.085);
    --card-inner-shine: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    --card-shadow: 0 10px 26px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.03);
    
    --header-bg: linear-gradient(180deg, #ffffff 0%, rgba(244, 245, 250, 0.90) 100%);
    --glass-surface: rgba(244, 245, 250, 0.86);
    --glass-border: rgba(15, 23, 42, 0.075);
    --control-bg: #eaecf4;
    --control-hover: #dfe2ee;
    --control-border: rgba(15, 23, 42, 0.075);
    --active-pill-bg: #f8f9fc;
    --active-pill-shadow: 0 3px 10px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);

    --text: #14161f; 
    --subtext: #6c7185; 
    --overlay: rgba(15, 18, 28, 0.48);
    --blur: 28px;
    
    --skeleton-a: #dfe2ec;
    --skeleton-b: #eef0f7;
    --dot-ring: rgba(15, 23, 42, 0.22);
    
    --blend-start: #ffffff;
    --blend-end: rgba(255, 255, 255, 0);

    --pro-gold: #f59e0b;
    --pro-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #9333ea 100%);
}

@media (prefers-color-scheme: dark) {
    :root { 
        --theme-closet: #ff9f0a; 
        --theme-closet-rgb: 255, 159, 10;
        --theme-washing: #5ac8fa; 
        --theme-washing-rgb: 90, 200, 250;
        --theme-drying: #bf5af2;
        --theme-drying-rgb: 191, 90, 242;
        
        --active-accent: var(--theme-closet);
        --active-accent-rgb: 255, 159, 10;

        --bg-base: #090a0f;
        --card: #161821;
        --card-elevated: #1e202b;
        --card-well: #101219;
        --card-border: rgba(255, 255, 255, 0.09);
        --card-inner-shine: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);

        --header-bg: linear-gradient(180deg, rgba(12, 14, 20, 0.95) 0%, rgba(20, 22, 30, 0.84) 100%);
        --glass-surface: rgba(22, 24, 33, 0.86);
        --glass-border: rgba(255, 255, 255, 0.08);
        --control-bg: rgba(255, 255, 255, 0.08);
        --control-hover: rgba(255, 255, 255, 0.13);
        --control-border: rgba(255, 255, 255, 0.10);
        --active-pill-bg: #252836;
        --active-pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);

        --text: #f2f3f7; 
        --subtext: #8e93a6; 
        --overlay: rgba(0, 0, 0, 0.76);
        
        --skeleton-a: #1d202b; 
        --skeleton-b: #282c3a;
        --dot-ring: rgba(255, 255, 255, 0.34);

        --blend-start: #000000;
        --blend-end: rgba(0, 0, 0, 0);
    }
}

html.dark-theme { 
    color-scheme: dark;
    --theme-closet: #ff9f0a; --theme-closet-rgb: 255, 159, 10;
    --theme-washing: #5ac8fa; --theme-washing-rgb: 90, 200, 250;
    --theme-drying: #bf5af2; --theme-drying-rgb: 191, 90, 242;
    --bg-base: #090a0f; --card: #161821; --card-elevated: #1e202b; --card-well: #101219;
    --card-border: rgba(255, 255, 255, 0.09); --card-inner-shine: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
    --header-bg: linear-gradient(180deg, rgba(12, 14, 20, 0.95) 0%, rgba(20, 22, 30, 0.84) 100%);
    --glass-surface: rgba(22, 24, 33, 0.86);
    --glass-border: rgba(255, 255, 255, 0.08);
    --control-bg: rgba(255, 255, 255, 0.08); --control-hover: rgba(255, 255, 255, 0.13);
    --control-border: rgba(255, 255, 255, 0.10); --active-pill-bg: #252836;
    --active-pill-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --text: #f2f3f7; --subtext: #8e93a6; --overlay: rgba(0, 0, 0, 0.76);
    --skeleton-a: #1d202b; --skeleton-b: #282c3a;
    --dot-ring: rgba(255, 255, 255, 0.34);
    --blend-start: #000000; --blend-end: rgba(0, 0, 0, 0);
}

body.tab-IN_CLOSET { --active-accent: var(--theme-closet); --active-accent-rgb: var(--theme-closet-rgb); }
body.tab-WASHING { --active-accent: var(--theme-washing); --active-accent-rgb: var(--theme-washing-rgb); }
body.tab-DRYING { --active-accent: var(--theme-drying); --active-accent-rgb: var(--theme-drying-rgb); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
    scrollbar-gutter: stable;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar, .view-info-area::-webkit-scrollbar,
.gen-scroll-area::-webkit-scrollbar, .sheet-options::-webkit-scrollbar {
    width: 0 !important; height: 0 !important; display: none; background: transparent;
}
.modal-body, .view-info-area, .gen-scroll-area, .sheet-options {
    scrollbar-width: none; -ms-overflow-style: none;
}

body { 
    margin: 0; width: 100%;
    font-family: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, "Helvetica Neue", sans-serif; 
    background-color: var(--bg-base); color: var(--text); overflow-x: clip; 
    -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}

.tg-header-blend {
    position: fixed; top: 0; left: 0; right: 0; height: 10px;
    background: linear-gradient(to bottom, var(--blend-start) 0%, var(--blend-end) 100%);
    z-index: 9999; pointer-events: none;
}

#mainWrapper { 
    opacity: 0; pointer-events: none;
    max-width: 480px; margin: 0 auto;
    background-color: var(--bg-base);
    background-image: 
        radial-gradient(circle at 8% 12%, rgba(var(--active-accent-rgb), 0.14), transparent 50%), 
        radial-gradient(circle at 92% 95%, rgba(var(--active-accent-rgb), 0.10), transparent 50%);
    min-height: 100vh; padding-bottom: 112px;
    transform-origin: 50% 18px;
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 0px;
    will-change: transform, border-radius;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.36s ease;
}
#mainWrapper.is-ready {
    opacity: 1 !important;
    pointer-events: auto;
}

body.modal-open { overflow: hidden; overscroll-behavior: none; }
body.modal-open #mainWrapper {
    transform: translate3d(0, 8px, 0) scale(0.955);
    pointer-events: none !important;
    border-radius: 26px;
}
body.modal-open .fab {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.76);
    pointer-events: none;
}
.fab {
    transition:
        opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.32s ease,
        box-shadow 0.32s ease !important;
}
body.sheet-dragging #mainWrapper, body.sheet-dragging .fab { transition: none !important; }

/* ЭКРАН АВТОРИЗАЦИИ iOS 27 LIQUID GLASS (ЭТАП 2) */
#authScreen {
    visibility: hidden; opacity: 0; pointer-events: none;
    position: fixed; inset: 0; z-index: 9500;
    background-color: var(--bg-base);
    background-image:
        radial-gradient(circle at 15% 15%, rgba(var(--theme-closet-rgb), 0.18), transparent 52%),
        radial-gradient(circle at 85% 85%, rgba(var(--theme-drying-rgb), 0.16), transparent 52%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow-y: auto;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.42s;
}
#authScreen.active {
    visibility: visible; opacity: 1; pointer-events: auto;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.auth-card {
    width: 100%; max-width: 390px;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 28px; padding: 24px 20px 20px;
    box-shadow: var(--card-shadow), var(--card-inner-shine);
    display: flex; flex-direction: column; gap: 14px;
    transform: translate3d(0, 12px, 0) scale(0.97);
    transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}
#authScreen.active .auth-card { transform: translate3d(0, 0, 0) scale(1); }
.auth-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.auth-logo-box {
    width: 60px; height: 60px; border-radius: 19px;
    background: var(--card-elevated); border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow), var(--card-inner-shine);
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.auth-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.02em; }
.auth-sub { font-size: 13px; font-weight: 500; color: var(--subtext); margin: 0; line-height: 1.4; }
.auth-tabs {
    display: flex; background: var(--control-bg); border: 1px solid var(--control-border);
    padding: 3px; border-radius: 12px; gap: 3px;
}
.auth-tab-btn {
    flex: 1; padding: 8px 6px; border-radius: 9px; border: none;
    background: transparent; color: var(--subtext); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.22s ease;
}
.auth-tab-btn.active {
    background: var(--active-pill-bg); color: var(--text); box-shadow: var(--active-pill-shadow);
}
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-input {
    width: 100%; padding: 12px 14px; border-radius: 13px;
    border: 1px solid var(--control-border); background: var(--control-bg);
    color: var(--text); font-size: 15px; font-weight: 500; outline: none;
    box-shadow: var(--card-inner-shine); transition: border-color 0.2s ease, background-color 0.2s ease;
}
.auth-input:focus {
    background: var(--card-elevated); border-color: var(--active-accent);
    box-shadow: 0 0 0 3px rgba(var(--active-accent-rgb), 0.16);
}
.auth-submit-btn {
    width: 100%; padding: 13.5px; border-radius: 14px; border: none;
    background: var(--active-accent); color: #fff; font-size: 15px; font-weight: 800;
    cursor: pointer; box-shadow: 0 8px 22px rgba(var(--active-accent-rgb), 0.28);
    transition: transform 0.18s ease, opacity 0.2s ease;
}
.auth-submit-btn:active { transform: scale(0.97); }
.auth-divider {
    display: flex; align-items: center; gap: 10px; color: var(--subtext);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 2px 0;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--card-border);
}
.auth-tg-btn {
    width: 100%; padding: 12.5px 14px; border-radius: 14px;
    border: 1px solid rgba(29, 155, 240, 0.35); background: rgba(29, 155, 240, 0.12);
    color: #1d9bf0; font-size: 14px; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.18s ease, background 0.2s ease;
}
.auth-tg-btn:active { transform: scale(0.97); }
.auth-tg-sync-box {
    display: none; flex-direction: column; gap: 8px;
    background: var(--control-bg); border: 1px solid var(--control-border);
    border-radius: 14px; padding: 11px;
}
.auth-tg-sync-box.visible { display: flex; }
.auth-demo-link {
    text-align: center; font-size: 12.5px; font-weight: 700; color: var(--subtext);
    text-decoration: none; padding-top: 4px; cursor: pointer; display: block;
}
.auth-demo-link span { color: var(--active-accent); }
.auth-error-msg {
    font-size: 12.5px; font-weight: 700; color: #ff3b30; text-align: center;
    background: rgba(255, 59, 48, 0.1); border-radius: 10px; padding: 8px 10px; display: none;
}
.auth-error-msg.visible { display: block; }

/* ЗАСТАВКА С ПЛАВНЫМ ПОЯВЛЕНИЕМ PRO */
#splashScreen { visibility: visible; opacity: 1; position: fixed; inset: 0; background: var(--bg-base); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s; }
.splash-logo-wrap { width: 76px; height: 76px; border-radius: 22px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow), var(--card-inner-shine); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; opacity: 0; animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.splash-icon { width: 40px; height: 40px; color: var(--active-accent); }
.splash-title { font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; opacity: 0; animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards; }
.splash-progress-container { width: 190px; height: 5px; background: var(--control-bg); border-radius: 99px; margin-top: 26px; overflow: hidden; opacity: 0; animation: fadeUp 0.55s ease 0.14s forwards; border: 0.5px solid var(--control-border); }
.splash-progress-bar { width: 0%; height: 100%; background: var(--active-accent); border-radius: 99px; transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.splash-version { position: absolute; bottom: 26px; font-size: 13px; font-weight: 700; color: var(--subtext); opacity: 0; animation: fadeUp 0.55s ease 0.2s forwards; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; }
.splash-pro-word {
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 0; opacity: 0; overflow: hidden; margin-left: 0; padding: 2px 0;
    background: var(--pro-gradient); color: #ffffff; border-radius: 7px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
    transform: translateY(4px) scale(0.85);
    transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin-left 0.45s ease, padding 0.45s ease;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.32);
}
.splash-pro-word.visible {
    max-width: 54px; opacity: 1; margin-left: 7px; padding: 2px 7px;
    transform: translateY(0) scale(1);
}
.pro-active-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(147, 51, 234, 0.12) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 16px;
    padding: 12px 14px; display: none; align-items: center; justify-content: space-between; gap: 10px;
}
.pro-active-stat { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.pro-active-badge { background: #34c759; color: #fff; font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.pro-feat-check { margin-left: auto; font-size: 11px; font-weight: 800; color: #34c759; display: none; white-space: nowrap; }
body.user-is-pro .pro-feat-check { display: inline-block; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes headerEnter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }

.image-loader {
    position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; width: 30px; height: 30px; 
    border: 3px solid var(--control-border); border-top-color: var(--active-accent); border-radius: 50%;
    animation: spin 0.75s linear infinite; z-index: 2; display: none;
}