/* ============================================================
   KEGEL — Global Stylesheet
   Font: Montserrat (Google Fonts)
   Theme: Graphite & Steel
   ============================================================ */

/* ------------------------------------------------------------
   1. Google Fonts
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ------------------------------------------------------------
   2. CSS Variables — палитра проекта
   ------------------------------------------------------------ */
:root {
    /* Фон */
    --bg-center:          #2c3440;
    --bg-edge:            #10141a;

    /* Акцент */
    --accent:             #4a90c4;
    --accent-light:       #6fb8e8;
    --accent-dim:         rgba(74, 144, 196, 0.15);

    /* Текст */
    --text-primary:       #ffffff;
    --text-secondary:     #8a9baf;
    --text-muted:         #556070;

    /* Поверхности (карточки, блоки) */
    --surface:            rgba(255, 255, 255, 0.05);
    --surface-hover:      rgba(255, 255, 255, 0.08);
    --surface-active:     rgba(255, 255, 255, 0.11);
    --surface-border:     rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.15);

    /* Статусы */
    --success:            #4caf82;
    --success-dim:        rgba(76, 175, 130, 0.15);
    --warning:            #e0a030;
    --warning-dim:        rgba(224, 160, 48, 0.15);
    --danger:             #c45a5a;
    --danger-dim:         rgba(196, 90, 90, 0.15);

    /* Типографика */
    --font:               'Montserrat', sans-serif;
    --font-size-xs:       11px;
    --font-size-sm:       13px;
    --font-size-md:       15px;
    --font-size-lg:       18px;
    --font-size-xl:       24px;
    --font-size-2xl:      32px;

    /* Скругления */
    --radius-sm:          6px;
    --radius:             10px;
    --radius-lg:          16px;
    --radius-full:        999px;

    /* Отступы */
    --pad-xs:             6px;
    --pad-sm:             10px;
    --pad-md:             16px;
    --pad-lg:             24px;
    --pad-xl:             40px;

    /* Анимации */
    --dur-fast:           120ms;
    --dur-base:           220ms;
    --dur-slow:           380ms;
    --ease:               cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   3. Сброс стилей
   ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------
   4. Отключение зума и тап-подсветки
   ------------------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ------------------------------------------------------------
   5. Body — фон, шрифт, базовые настройки
   ------------------------------------------------------------ */
body {
    font-family:      var(--font);
    font-size:        var(--font-size-md);
    font-weight:      400;
    color:            var(--text-primary);
    line-height:      1.6;

    background:       linear-gradient(to bottom,
                          var(--bg-edge)   0%,
                          var(--bg-center) 50%,
                          var(--bg-edge)   100%);
    background-attachment: fixed;

    min-height:       100vh;
    min-height:       100dvh;
    overflow-x:       hidden;

    /* Safe area для iPhone с чёлкой */
    padding-top:      env(safe-area-inset-top);
    padding-bottom:   env(safe-area-inset-bottom);
    padding-left:     env(safe-area-inset-left);
    padding-right:    env(safe-area-inset-right);
}

/* ------------------------------------------------------------
   6. Скрытие полос прокрутки (глобально)
   ------------------------------------------------------------ */
* {
    scrollbar-width:    none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------------------
   7. Типографика
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-weight:     600;
    line-height:     1.3;
    color:           var(--text-primary);
    text-transform:  uppercase;
    letter-spacing:  5px;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p {
    color:       var(--text-secondary);
    line-height: 1.7;
}

a {
    color:      var(--accent-light);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

a:hover {
    color: var(--text-primary);
}

/* ------------------------------------------------------------
   8. Кнопки
   ------------------------------------------------------------ */
.btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    min-height:       48px;
    padding:          12px 34px;
    border-radius:    var(--radius-full);
    font-family:      var(--font);
    font-size:        var(--font-size-md);
    font-weight:      500;
    text-transform:   uppercase;
    letter-spacing:   1px;
    cursor:           pointer;
    user-select:      none;
    -webkit-user-select: none;
    white-space:      nowrap;
    transition:       box-shadow  var(--dur-base) var(--ease),
                      transform   var(--dur-fast) var(--ease),
                      background  var(--dur-base) var(--ease),
                      border-color var(--dur-base) var(--ease);
}

.btn:active {
    transform: scale(0.97);
}

/* Первичная — акцент с glow */
.btn-primary {
    background:  linear-gradient(
                     135deg,
                     rgba(74, 144, 196, 0.85),
                     rgba(74, 144, 196, 0.45)
                 );
    border:      1px solid var(--accent-light);
    color:       var(--accent-light);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(74, 144, 196, 0.25);
}

.btn-primary:hover {
    background:  linear-gradient(
                     135deg,
                     rgba(111, 184, 232, 0.90),
                     rgba(74, 144, 196, 0.60)
                 );
    border-color: #ffffff;
    color:        #ffffff;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45),
        0 0 45px rgba(111, 184, 232, 0.35);
}

/* Вторичная — стеклянная */
.btn-secondary {
    background:  linear-gradient(
                     135deg,
                     rgba(74, 144, 196, 0.12),
                     rgba(74, 144, 196, 0.04)
                 );
    border:      1px solid var(--accent);
    color:       var(--accent-light);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(74, 144, 196, 0.10);
}

.btn-secondary:hover {
    background:  linear-gradient(
                     135deg,
                     rgba(74, 144, 196, 0.20),
                     rgba(74, 144, 196, 0.08)
                 );
    border-color: var(--accent-light);
    color:        var(--accent-light);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(74, 144, 196, 0.18);
}

/* Кнопка на всю ширину */
.btn-block {
    width: 100%;
}

/* ------------------------------------------------------------
   9. Карточки / блоки
   ------------------------------------------------------------ */
.card {
    background:    var(--surface);
    border:        1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding:       var(--pad-lg);
    transition:    background    var(--dur-base) var(--ease),
                   border-color  var(--dur-base) var(--ease);
}

.card:hover {
    background:   var(--surface-hover);
    border-color: var(--surface-border-strong);
}

/* ------------------------------------------------------------
   10. Поля ввода
   ------------------------------------------------------------ */
.input {
    width:         100%;
    min-height:    48px;
    padding:       12px 16px;
    background:    var(--surface);
    border:        1px solid var(--surface-border);
    border-radius: var(--radius);
    color:         var(--text-primary);
    font-family:   var(--font);
    font-size:     var(--font-size-md);
    outline:       none;
    transition:    border-color  var(--dur-base) var(--ease),
                   background    var(--dur-base) var(--ease);
}

.input::placeholder {
    color: var(--text-muted);
}

.input:focus {
    border-color: var(--accent);
    background:   var(--surface-hover);
}

/* ------------------------------------------------------------
   11. Лейблы форм
   ------------------------------------------------------------ */
.label {
    display:        block;
    font-size:      var(--font-size-sm);
    font-weight:    500;
    color:          var(--text-secondary);
    margin-bottom:  6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   12. Бейджи / статусы
   ------------------------------------------------------------ */
.badge {
    display:        inline-flex;
    align-items:    center;
    padding:        3px 10px;
    border-radius:  var(--radius-full);
    font-size:      var(--font-size-xs);
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-accent  { background: var(--accent-dim);   color: var(--accent-light); }
.badge-success { background: var(--success-dim);  color: var(--success); }
.badge-warning { background: var(--warning-dim);  color: var(--warning); }
.badge-danger  { background: var(--danger-dim);   color: var(--danger); }

/* ------------------------------------------------------------
   13. Прогресс-бар
   ------------------------------------------------------------ */
.progress-track {
    width:         100%;
    height:        6px;
    background:    var(--surface-hover);
    border-radius: var(--radius-full);
    overflow:      hidden;
}

.progress-fill {
    height:        100%;
    background:    var(--accent);
    border-radius: var(--radius-full);
    transition:    width var(--dur-slow) var(--ease);
}

/* ------------------------------------------------------------
   14. Разделитель
   ------------------------------------------------------------ */
.divider {
    border:     none;
    border-top: 1px solid var(--surface-border);
    margin:     var(--pad-lg) 0;
}

/* ------------------------------------------------------------
   15. Утилиты — текст
   ------------------------------------------------------------ */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent-light); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ------------------------------------------------------------
   16. Утилиты — layout
   ------------------------------------------------------------ */
.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1          { flex: 1; }
.gap-xs          { gap: var(--pad-xs); }
.gap-sm          { gap: var(--pad-sm); }
.gap-md          { gap: var(--pad-md); }
.gap-lg          { gap: var(--pad-lg); }

.mt-sm { margin-top: var(--pad-sm); }
.mt-md { margin-top: var(--pad-md); }
.mt-lg { margin-top: var(--pad-lg); }
.mb-sm { margin-bottom: var(--pad-sm); }
.mb-md { margin-bottom: var(--pad-md); }
.mb-lg { margin-bottom: var(--pad-lg); }

/* ------------------------------------------------------------
   17. Контейнеры
   ------------------------------------------------------------ */
.container {
    width:     100%;
    max-width: 480px;
    margin:    0 auto;
    padding:   0 var(--pad-md);
}

.screen-center {
    min-height:      100vh;
    min-height:      100dvh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         var(--pad-xl) var(--pad-md);
}

/* ------------------------------------------------------------
   18. Вспомогательные
   ------------------------------------------------------------ */
.hidden { display: none !important; }

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

.fade-in {
    animation: fadeIn var(--dur-slow) var(--ease) both;
}