/* ------------------------------------------------------------------
   Theoria — driving-license practice. Theme mirrors the official exam UI:
   deep teal gradient, thin-bordered dark panels, white number boxes.
------------------------------------------------------------------ */

:root {
    --bg-1:        #173a42;
    --bg-2:        #0c2026;
    --bg-3:        #050e11;
    --panel:       rgba(8, 24, 29, 0.55);
    --panel-2:     rgba(10, 30, 36, 0.75);
    --border:      rgba(173, 209, 214, 0.55);
    --border-soft: rgba(173, 209, 214, 0.25);
    --text:        #e9f2f2;
    --text-dim:    #9fb6ba;
    --num-bg:      #f3f6f6;
    --num-text:    #15242a;
    --accent:      #2bd1c4;
    --correct:     #1f8a4c;
    --correct-bd:  #57e08a;
    --wrong:       #b5333a;
    --wrong-bd:    #ef6b72;
    --gold:        #ffcf4d;
    --radius:      4px;
    --maxw:        1120px;
    --font: "Segoe UI", "Noto Sans Georgian", "BPG Nino Mtavruli",
            system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--font);
    color: var(--text);
}

body {
    min-height: 100vh;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
        radial-gradient(ellipse 85% 75% at 50% 42%,
            var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
    background-attachment: fixed;
}

/* faint central emblem-like glow */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%,
        rgba(120, 170, 175, 0.06) 0, transparent 38%);
}

.app {
    position: relative;
    min-height: 100vh;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 22px 96px;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- groups */
.groups {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 6px 0 26px;
}

.group-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.group-btn:hover { color: var(--text); border-color: var(--border); }
.group-btn.active {
    color: #04161a;
    background: linear-gradient(180deg, #aee6e0, #6fc9c1);
    border-color: var(--accent);
}
.group-btn .badge {
    min-width: 22px;
    padding: 1px 7px;
    text-align: center;
    border-radius: 11px;
    font-size: 12px;
    background: rgba(0,0,0,0.28);
    color: inherit;
}
.group-btn.active .badge { background: rgba(4,22,26,0.18); }

/* ---------------------------------------------------------------- card */
.stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.image {
    border: 1px solid var(--border);
    background: #000;
    line-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
}
.image img { width: 100%; height: auto; display: block; }

.question {
    border: 1px solid var(--border);
    background: var(--panel-2);
    border-radius: var(--radius);
    padding: 20px 26px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- answers */
.answers {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.answers.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 16px;
}

.answer {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-family: inherit;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
    min-height: 56px;
}
.answer:hover:not(.locked) { border-color: #cfeef0; box-shadow: 0 0 0 1px rgba(207,238,240,.25) inset; }
.answer.locked { cursor: default; }

.answer .num {
    flex: 0 0 auto;
    width: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--num-bg);
    color: var(--num-text);
    font-size: 30px;
    font-weight: 700;
}
.answers.grid .answer .num { width: 56px; font-size: 24px; }

.answer .text {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 14.5px;
    line-height: 1.45;
    background: var(--panel);
}

/* answered states */
.answer.correct { border-color: var(--correct-bd); }
.answer.correct .text {
    background: linear-gradient(180deg, rgba(31,138,76,.85), rgba(20,95,52,.9));
    color: #eafff0;
}
.answer.wrong { border-color: var(--wrong-bd); }
.answer.wrong .text {
    background: linear-gradient(180deg, rgba(181,51,58,.85), rgba(130,32,38,.9));
    color: #ffecec;
}

/* ---------------------------------------------------------------- description */
.desc {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    background: rgba(12, 32, 38, 0.6);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #d6e6e7;
}

/* ---------------------------------------------------------------- actions */
.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.btn {
    flex: 1 1 0;
    min-width: 140px;
    padding: 13px 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover { border-color: var(--border); background: var(--panel-2); }
.btn-hide:hover    { border-color: var(--wrong-bd);   color: #ffd9db; }
.btn-restore:hover { border-color: var(--correct-bd); color: #d6ffe6; }
.btn-mark.on       { border-color: var(--gold); color: var(--gold); }
.btn-next {
    background: linear-gradient(180deg, #2bd1c4, #1ba89d);
    border-color: var(--accent);
    color: #04181a;
    flex: 1.4 1 0;
}
.btn-next:hover { filter: brightness(1.08); background: linear-gradient(180deg, #44ddd0, #1ba89d); }

/* ---------------------------------------------------------------- empty / loading */
.notice {
    text-align: center;
    color: var(--text-dim);
    padding: 60px 20px;
    font-size: 16px;
}

/* ---------------------------------------------------------------- footer */
.footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    font-size: 13px;
    color: var(--text-dim);
    pointer-events: none;
}
.footer > * { pointer-events: auto; }

.help {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--panel);
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.help:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
.help:disabled { opacity: .35; cursor: default; }

.session-info { letter-spacing: .3px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 720px) {
    .app { padding: 14px 14px 92px; }
    .answers.grid { grid-template-columns: 1fr; }
    .question { font-size: 15.5px; padding: 16px 18px; }
    .answer .num, .answers.grid .answer .num { width: 60px; font-size: 26px; }
    .btn { min-width: 0; flex: 1 1 30%; padding: 12px 10px; font-size: 13.5px; }
}