:root {
    /* Основные цвета из Colors.xaml */
    --primary: #141414;
    --primary-burgundy: #800020;
    --burgundy: #800020;
    --secondary: #DD1619;
    --red: #DD1619;
    --blue: #166FBB;
    --mint: #7FCF7F;
    --gold: #D4AF37;
    --yellow: #FFD700;
    --white: #FFFFFF;
    --black: #000000;
    --off-black: #0A0A0A;
    --midnight-blue: #1A0006;
    --silver: #C0C0C0;
    --bronze: #CD7F32;

    /* Серая палитра */
    --gray-100: #E1E1E1;
    --gray-200: #C8C8C8;
    --gray-300: #ACACAC;
    --gray-400: #919191;
    --gray-500: #6E6E6E;
    --gray-600: #404040;
    --gray-900: #212121;
    --gray-950: #141414;

    /* Шрифты (Размеры из Styles.xaml) */
    --font-size-8: 8px;
    --font-size-10: 10px;
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* Отступы и размеры из Styles.xaml */
    --spacing-1: 1px;
    --spacing-2: 2px;
    --spacing-3: 3px;
    --spacing-4: 4px;
    --spacing-5: 5px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-15: 15px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-25: 25px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-38: 38px;
    --spacing-40: 40px;
    --spacing-45: 45px;
    --spacing-48: 48px;
    --spacing-50: 50px;
    --spacing-60: 60px;
    --spacing-65: 65px;
    --spacing-70: 70px;
    --spacing-90: 90px;
    --spacing-280: 280px;
    --spacing-320: 320px;
    --spacing-400: 400px;
    --spacing-450: 450px;

    /* Скругления */
    --radius-3: 3px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-20: 20px;

    /* Совместимость */
    --bg-white: var(--white);
    --text-black: var(--gray-950);
}

body {
    background-color: var(--white);
    color: var(--gray-950);
    font-family: var(--font-family);
    margin: 0;
    font-size: var(--font-size-14);
}

/* ДЕСТОПНАЯ СЕТКА */
.desktop-grid {
    display: grid;
    grid-template-columns: var(--spacing-280) 1fr var(--spacing-320);
    gap: var(--spacing-20);
    padding: var(--spacing-20);
    height: calc(100vh - var(--spacing-60));
}

.column-sidebar { overflow-y: auto; }
.column-main { 
    overflow-y: auto; 
    border-left: var(--spacing-1) solid var(--gray-100); 
    padding: 0 var(--spacing-20);
}

/* ЛИГИ И ТУРЫ (КАПСУЛЫ И КВАДРАТЫ) */
.leagues-list { display: flex; flex-direction: column; gap: var(--spacing-8); margin-bottom: var(--spacing-24); }

.league-capsule {
    background: var(--white);
    border: var(--spacing-1) solid var(--gray-100);
    border-radius: var(--radius-20);
    padding: var(--spacing-10) var(--spacing-16);
    cursor: pointer;
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--gray-500);
    transition: all 0.2s;
    text-align: center;
}

.league-capsule.active {
    border-color: var(--yellow);
    color: var(--primary);
    background-color: var(--white);
    box-shadow: 0 var(--spacing-2) var(--spacing-8) rgba(212, 175, 55, 0.2);
}

.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--spacing-38), 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
}

.tour-btn {
    border: var(--spacing-1) solid var(--gray-100);
    background: var(--white);
    aspect-ratio: 1;
    border-radius: var(--radius-8);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-12);
}

.tour-btn.active {
    border-color: var(--yellow);
    border-width: var(--spacing-2);
}

/* ЗАГОЛОВКИ */
.section-title {
    color: var(--primary);
    text-align: center;
    font-size: var(--font-size-18);
    font-weight: 800;
    margin: var(--spacing-24) 0;
    text-transform: uppercase;
}

/* МАТЧИ */
.match-item-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-12) var(--spacing-16);
    border-bottom: var(--spacing-1) solid var(--gray-100);
    transition: all 0.2s;
    border-radius: var(--radius-8);
    margin: var(--spacing-2) 0;
    border: var(--spacing-1) solid transparent;
    border-bottom-color: var(--gray-100);
}

.match-item-desktop.active { border-color: var(--primary); background-color: #F8F9FA; border-left-width: var(--spacing-4); }

.m-time { font-size: var(--font-size-10); color: var(--gray-500); width: var(--spacing-40); }
.m-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--spacing-12); }

.m-team { flex: 1; font-size: var(--font-size-14); font-weight: 700; color: #333; display: flex; flex-direction: column; }
.m-team.left { text-align: right; align-items: flex-end; }
.m-team.right { text-align: left; align-items: flex-start; }

.m-score-box { 
    display: flex; 
    align-items: center; 
    gap: var(--spacing-8); 
    justify-content: center; 
    min-width: var(--spacing-90);
}
.m-score { font-size: var(--font-size-16); font-weight: 900; color: var(--primary); }
.m-score-sep { color: #ccc; font-weight: 800; }

.predict-input { 
    width: var(--spacing-32); height: var(--spacing-32); border: none; border-radius: var(--radius-6); 
    text-align: center; font-size: var(--font-size-16); font-weight: 700; color: var(--primary); outline: none; 
    background: #F2F2F2;
}
.predict-input:focus { background: #E8E8E8; box-shadow: 0 0 0 var(--spacing-1) var(--primary); }

.m-points { text-align: right; font-weight: 700; color: var(--gray-500); width: var(--spacing-40); }

/* КРУЖКИ ФОРМЫ */
.form-dots { display: flex; gap: var(--spacing-4); }
.form-dots.mini { margin-top: var(--spacing-4); height: var(--spacing-8); }
.dot { 
    width: var(--spacing-10); height: var(--spacing-10); border-radius: 50%; border: var(--spacing-1) solid rgba(0,0,0,0.05); 
    flex-shrink: 0; display: inline-block; vertical-align: middle; 
}
.dot.w { background-color: var(--mint); }
.dot.d { background-color: var(--yellow); }
.dot.l { background-color: var(--red); }
.form-dots.mini .dot { width: var(--spacing-8); height: var(--spacing-8); border-width: 0; }

/* LAYOUT & HEADER */
.maui-app {
    background-color: var(--white);
    min-height: 100vh;
}

.maui-header {
    height: var(--spacing-60);
    background-color: var(--white);
    border-bottom: var(--spacing-1) solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-32);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.app-logo-text { font-weight: 900; color: var(--primary); letter-spacing: var(--spacing-1); }

.header-nav { display: flex; gap: var(--spacing-24); }

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    color: var(--gray-500);
    cursor: pointer;
    padding: var(--spacing-8) 0;
    border-bottom: var(--radius-3) solid transparent;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.nav-img {
    width: var(--spacing-20);
    height: var(--spacing-20);
    filter: grayscale(100%) opacity(0.6);
}

.nav-item.active .nav-img {
    filter: brightness(0);
}

.nav-label { font-weight: 700; font-size: var(--font-size-14); }

.user-display { font-size: var(--font-size-14); margin-right: var(--spacing-16); color: var(--gray-500); }

.logout-btn {
    background: none;
    border: var(--spacing-1) solid var(--gray-100);
    padding: var(--spacing-4) var(--spacing-12);
    border-radius: var(--radius-4);
    cursor: pointer;
    font-size: var(--font-size-12);
}

.maui-content { padding-top: var(--spacing-8); }

/* MOBILE TABBAR */
.mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--spacing-65);
    background: var(--white);
    border-top: var(--spacing-1) solid var(--gray-100);
    display: none; 
    justify-content: space-around;
    align-items: center;
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    text-decoration: none;
    color: var(--gray-500);
    flex: 1;
}

.mobile-tab-item.active { color: var(--primary); }

.mobile-tab-img {
    width: var(--spacing-24);
    height: var(--spacing-24);
    filter: grayscale(100%) opacity(0.6);
}

.mobile-tab-item.active .mobile-tab-img {
    filter: brightness(0);
}

.mobile-tab-label { font-size: var(--font-size-10); font-weight: 700; }

/* ВХОД (LOGIN) */
.login-bg { background-color: var(--white); height: calc(100vh - var(--spacing-60)); display: flex; justify-content: center; align-items: center; }
.login-card-maui { background: var(--white); border: var(--spacing-1) solid var(--gray-100); border-radius: var(--radius-12); padding: var(--spacing-32); width: 100%; max-width: var(--spacing-450); box-shadow: 0 var(--spacing-4) var(--spacing-24) rgba(0,0,0,0.08); }
.login-title { color: var(--primary); font-weight: 900; text-align: center; font-size: var(--font-size-24); margin-bottom: var(--spacing-32); letter-spacing: var(--spacing-1); }

.maui-form { display: flex; flex-direction: column; gap: var(--spacing-20); }
.maui-field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.maui-field label { display: block; color: var(--gray-500); font-size: var(--font-size-10); font-weight: 800; text-transform: uppercase; }
.maui-field input { width: 100%; height: var(--spacing-48); border: var(--spacing-1) solid var(--gray-100); border-radius: var(--radius-8); padding: 0 var(--spacing-16); font-size: var(--font-size-14); outline: none; transition: border-color 0.2s; background: var(--white); color: var(--gray-950); }
.maui-field input:focus { border-color: var(--primary); }

.password-wrapper { position: relative; display: flex; align-items: center; }
.password-toggle { position: absolute; right: var(--spacing-10); background: none; border: none; cursor: pointer; padding: var(--spacing-5); display: flex; align-items: center; justify-content: center; z-index: 2; }

.maui-err { color: var(--red); font-size: var(--font-size-12); text-align: center; font-weight: 700; }

.btn-telegram-ghost { background: none; border: none; color: var(--primary); font-weight: 800; font-size: var(--font-size-12); cursor: pointer; text-decoration: none; text-transform: uppercase; margin: var(--spacing-16) auto 0; display: block; }
.btn-telegram-ghost:hover { text-decoration: underline; opacity: 0.8; }

/* БЛОК СТАТИСТИКИ */
.stats-card { background: var(--white); border: var(--spacing-1) solid var(--gray-100); border-radius: var(--radius-8); padding: var(--spacing-16); margin-bottom: var(--spacing-16); box-shadow: 0 var(--spacing-4) var(--spacing-12) rgba(0,0,0,0.05); }
.stats-card-title { font-size: var(--font-size-12); font-weight: 800; color: var(--primary); margin-bottom: var(--spacing-24); text-transform: uppercase; letter-spacing: var(--spacing-1); border-bottom: var(--spacing-2) solid var(--gray-100); padding-bottom: var(--spacing-8); }

.team-stat-block { margin-bottom: var(--spacing-24); }
.team-stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-12); }
.ts-name { font-size: var(--font-size-16); font-weight: 900; color: #1a1a1a; }
.ts-avg-box { display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--font-size-12); background: var(--gray-100); padding: var(--spacing-4) var(--spacing-8); border-radius: var(--radius-4); }
.ts-avg-label { color: #777; font-weight: 600; }
.ts-avg-val { color: var(--primary); font-weight: 800; }
.ts-avg-sep { color: #DDD; }

.team-stat-divider { height: var(--spacing-1); background: #eee; margin: var(--spacing-24) 0; border: none; }
.last-games-list { display: flex; flex-direction: column; gap: var(--spacing-8); }
.last-game-item { display: flex; align-items: center; gap: var(--spacing-12); font-size: var(--font-size-10); color: #333; padding: var(--spacing-2) 0; }

.lg-match-box { flex: 1; display: grid; grid-template-columns: 1fr var(--spacing-40) 1fr; align-items: center; gap: var(--spacing-4); }
.lg-team { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-team.left { text-align: right; }
.lg-team.right { text-align: left; }
.lg-team.current { color: #1a1a1a; font-weight: 800; }
.lg-score { font-weight: 800; color: #333; text-align: center; border-radius: var(--radius-3); font-family: monospace; font-size: var(--font-size-10); padding: var(--spacing-1) 0; }

.h2h-list { display: flex; flex-direction: column; gap: var(--spacing-12); margin-top: var(--spacing-4); }
.h2h-row { display: grid; grid-template-columns: 1fr var(--spacing-45) 1fr; align-items: center; gap: var(--spacing-12); width: 100%; font-size: var(--font-size-12); font-weight: 700; padding: var(--spacing-4) 0; border-bottom: var(--spacing-1) solid #F8F9FA; }
.h2h-row:last-child { border-bottom: none; }
.h2h-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-team.left { text-align: right; }
.h2h-team.right { text-align: left; }
.h2h-score { color: var(--primary); text-align: center; font-weight: 900; padding: var(--spacing-2) 0; }

/* КНОПКИ */
.btn-accent-maui {
    background-color: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-8);
    padding: var(--spacing-12);
    font-weight: 700;
    cursor: pointer;
}

.btn-primary-maui { 
    background-color: var(--primary); 
    color: var(--white); 
    border: none; 
    border-radius: var(--radius-8); 
    padding: var(--spacing-12) var(--spacing-32); 
    font-weight: 900; 
    font-size: var(--font-size-14); 
    cursor: pointer; 
    letter-spacing: var(--spacing-1); 
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.btn-primary-maui:hover { 
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: 0 var(--spacing-4) var(--spacing-12) rgba(0, 0, 0, 0.2);
}

.btn-primary-maui:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ПРОФИЛЬ */
.profile-container {
    justify-content: center;
    padding: var(--spacing-32) var(--spacing-16);
}
.profile-card {
    max-width: var(--spacing-400);
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: var(--spacing-32);
}
.profile-info { margin: var(--spacing-24) 0; font-size: var(--font-size-16); font-weight: bold; color: var(--gray-900); }
.profile-id { margin-top: var(--spacing-8); font-size: var(--font-size-14); color: var(--gray-500); }

/* ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ (UI) */
.api-error-panel { background: #FFF5F5; border: var(--spacing-1) solid #FFC1C1; border-radius: var(--radius-8); padding: var(--spacing-16); margin-bottom: var(--spacing-16); }
.err-header { color: var(--red); font-weight: 800; font-size: var(--font-size-14); margin-bottom: var(--spacing-8); }
.err-body { font-size: var(--font-size-12); color: #666; }

.loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-32); }
.loading-text { margin-top: var(--spacing-16); font-size: var(--font-size-12); font-weight: 800; color: var(--gray-500); letter-spacing: var(--spacing-1); }

.spinner-maui {
    width: var(--spacing-40); height: var(--spacing-40);
    border: var(--spacing-4) solid var(--gray-100);
    border-top: var(--spacing-4) solid var(--primary);
    border-radius: 50%;
    animation: spin-maui 1s linear infinite;
}
@keyframes spin-maui { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.empty-msg { text-align: center; padding: var(--spacing-32); color: var(--gray-500); font-style: italic; font-size: var(--font-size-14); }
.stats-placeholder-box { text-align: center; padding: var(--spacing-32); color: var(--gray-300); font-size: var(--font-size-14); border: var(--spacing-2) dashed var(--gray-100); border-radius: var(--radius-12); margin-top: var(--spacing-20); }

.save-btn-container { text-align: center; padding: var(--spacing-32) 0; }
.save-msg { color: var(--mint); font-weight: 800; margin-top: var(--spacing-8); font-size: var(--font-size-14); }
.save-hint { font-size: var(--font-size-10); color: var(--gray-400); margin-top: var(--spacing-4); }

.date-header { font-size: var(--font-size-12); font-weight: 800; color: var(--gray-500); text-transform: uppercase; margin-bottom: var(--spacing-12); padding-left: var(--spacing-4); border-left: var(--radius-3) solid var(--yellow); }

/* МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 768px) {
    .desktop-grid {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-10);
        height: auto;
    }
    
    .maui-header {
        padding: 0 var(--spacing-12);
        justify-content: center;
    }
    
    .header-nav, .header-right {
        display: none !important;
    }
    
    .login-card-maui {
        border: none;
        box-shadow: none;
        padding: var(--spacing-24);
    }
    .login-title { font-size: var(--font-size-20); }

    .column-sidebar {
        border: none;
        padding: 0;
        margin-bottom: var(--spacing-5);
        display: flex;
        flex-direction: column;
    }

    .leagues-list, .tours-grid {
        display: flex;
        overflow-x: auto;
        gap: var(--spacing-8);
        padding-bottom: var(--spacing-5);
        margin-top: var(--spacing-5);
        scrollbar-width: none; 
    }
    .leagues-list::-webkit-scrollbar, .tours-grid::-webkit-scrollbar { display: none; }
    
    .tours-grid { grid-template-columns: none; }
    
    .league-capsule {
        flex: 0 0 auto;
        margin-bottom: 0;
        white-space: nowrap;
        font-size: var(--font-size-13);
        padding: var(--spacing-8) var(--spacing-12);
    }
    
    .tour-btn {
        flex: 0 0 auto;
        width: var(--spacing-38);
        height: var(--spacing-38);
        aspect-ratio: auto;
        font-size: var(--font-size-13);
    }
    
    .column-main { border: none; padding: 0; }
    
    .match-item-desktop {
        padding: var(--spacing-12) 0;
        gap: var(--spacing-5);
        grid-template-columns: var(--spacing-40) 1fr var(--spacing-40);
    }
    
    .m-time { font-size: var(--font-size-11); }
    .m-points { font-size: var(--font-size-12); }
    
    .m-main {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: var(--spacing-6);
        align-items: center;
    }
    
    .m-team {
        font-size: var(--font-size-11);
        text-align: center !important;
        white-space: pre-wrap;
        word-break: break-word;
    }
    
    .m-score-box { 
        min-width: var(--spacing-45); 
        padding: var(--spacing-6) var(--spacing-8);
        font-size: var(--font-size-13); 
    }
    
    .predict-input { 
        width: var(--spacing-28); 
        height: var(--spacing-28); 
        font-size: var(--font-size-14); 
    }
    
    .profile-container { padding: var(--spacing-16) var(--spacing-8); }
    .profile-card { padding: var(--spacing-16); border: none; box-shadow: none; }
    
    .mobile-tabbar { display: flex !important; }
}

@media (min-width: 769px) {
    .mobile-tabbar { display: none !important; }
}