:root {
  --ink: #17142f;
  --muted: #756f91;
  --surface: #ffffff;
  --surface-soft: #f7f5ff;
  --line: #e8e4f4;
  --violet: #6554f6;
  --violet-dark: #4a39db;
  --coral: #ff6f61;
  --cyan: #2bc7d9;
  --yellow: #f8c84e;
  --green: #48c78e;
  --shadow: 0 18px 50px rgba(36, 25, 104, .12);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f6f4fc;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 15% 0%, #ece9ff 0, #f8f7fc 36%, #f4f2fa 100%); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }

.boot-screen, .empty-state { min-height: 100vh; display: grid; place-content: center; justify-items: center; color: var(--muted); gap: 12px; }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: var(--ink); color: #fff; font-weight: 900; letter-spacing: -.08em; box-shadow: 0 10px 25px rgba(23, 20, 47, .2); }

.site-header { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(232,228,244,.8); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.04em; }
.brand .brand-mark { width: 37px; height: 37px; border-radius: 12px; font-size: 12px; }
.brand small { display: block; color: var(--violet); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; margin-top: -3px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.user-pill { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: 13px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 15px; background: linear-gradient(135deg, var(--violet), #9c8eff); }

.page { width: min(1180px, 90vw); margin: 0 auto; padding: 58px 0 80px; }
.hero { display: grid; grid-template-columns: 1.04fr .96fr; gap: 55px; align-items: center; min-height: 520px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--violet-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 25px; height: 3px; background: var(--coral); border-radius: 3px; }
h1 { font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing: -.075em; margin: 16px 0 23px; max-width: 690px; }
h1 span { color: var(--violet); }
.hero-copy { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-card { position: relative; min-height: 450px; border-radius: 32px; padding: 28px; overflow: hidden; background: linear-gradient(145deg, #27204d, #120d2e); box-shadow: 0 30px 70px rgba(29,19,81,.28); color: #fff; transform: rotate(2deg); }
.hero-card::before, .hero-card::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .7; }
.hero-card::before { width: 230px; height: 230px; background: var(--violet); top: -105px; right: -75px; }
.hero-card::after { width: 160px; height: 160px; background: var(--coral); bottom: -70px; left: -45px; }
.live-label { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 12px; color: #c6c0e8; text-transform: uppercase; letter-spacing: .1em; }
.live-dot { display: inline-block; width: 7px; height: 7px; background: var(--green); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 5px rgba(72,199,142,.14); }
.mock-question { position: relative; z-index: 1; margin: 44px 0 20px; font-size: 28px; font-weight: 850; line-height: 1.12; letter-spacing: -.045em; }
.mock-answers { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.mock-answer { min-height: 70px; display: flex; align-items: flex-end; padding: 12px; border-radius: 13px; font-weight: 700; font-size: 12px; }
.mock-answer.coral { background: var(--coral); }.mock-answer.cyan { background: var(--cyan); }.mock-answer.violet { background: #826eff; }.mock-answer.yellow { background: var(--yellow); color: var(--ink); }
.mock-score { position: absolute; z-index: 1; right: 25px; bottom: 22px; text-align: right; }.mock-score strong { display: block; font-size: 30px; }.mock-score small { color: #c6c0e8; }

.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 35px; }
.feature-card, .panel, .quiz-card, .game-panel { background: var(--surface); border: 1px solid rgba(232,228,244,.85); border-radius: var(--radius); box-shadow: var(--shadow); }
.feature-card { padding: 22px; }.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 15px; font-size: 20px; background: var(--surface-soft); }.feature-card h3 { margin: 0 0 8px; font-size: 16px; }.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.btn { border: 0; border-radius: 12px; padding: 12px 17px; font-weight: 800; font-size: 13px; transition: transform .15s, box-shadow .15s, background .15s; }.btn:hover:not(:disabled) { transform: translateY(-2px); }.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 9px 17px rgba(101,84,246,.22); }.btn-primary:hover:not(:disabled) { background: var(--violet-dark); }.btn-dark { background: var(--ink); color: #fff; }.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }.btn-soft { background: #eeecff; color: var(--violet-dark); }.btn-danger { background: #fff0ef; color: #d7493e; }.btn-large { padding: 15px 22px; font-size: 14px; border-radius: 14px; }

.auth-layout { min-height: calc(100vh - 78px); display: grid; place-items: center; padding: 50px 0; }.auth-grid { width: min(960px, 100%); display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }.auth-intro { padding: 35px; border-radius: var(--radius); color: #fff; background: linear-gradient(145deg, #282052, #100d2c); }.auth-intro h2 { font-size: 42px; line-height: 1; letter-spacing: -.06em; margin: 22px 0 15px; }.auth-intro p { color: #c5bee7; line-height: 1.6; }.auth-intro ul { padding: 0; list-style: none; color: #eeeaff; line-height: 2.2; font-size: 13px; }.auth-intro li::before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 10px; }.auth-card { padding: 32px; }.auth-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-soft); border-radius: 11px; margin-bottom: 24px; }.tab { flex: 1; border: 0; padding: 10px; border-radius: 8px; color: var(--muted); background: transparent; font-weight: 800; font-size: 12px; }.tab.active { color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(40,30,100,.08); }

.form-grid { display: grid; gap: 15px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.field { display: grid; gap: 7px; }.field label { font-size: 12px; font-weight: 800; color: #514a70; }.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: #fcfbff; color: var(--ink); border-radius: 11px; padding: 12px 13px; outline: none; }.field textarea { min-height: 90px; resize: vertical; }.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(101,84,246,.12); }.form-error { color: #c7443a; background: #fff0ef; border-radius: 9px; padding: 10px 12px; font-size: 12px; }.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }

.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }.dashboard-head h1 { font-size: 44px; margin: 11px 0 0; }.dashboard-head p { color: var(--muted); margin: 10px 0 0; }.stats { display: flex; gap: 10px; }.stat { min-width: 110px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }.stat strong { display: block; font-size: 22px; }.stat span { color: var(--muted); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: 330px 1fr; gap: 22px; align-items: start; }.panel { padding: 23px; }.panel h2, .panel h3 { margin: 0 0 7px; letter-spacing: -.04em; }.panel-subtitle { color: var(--muted); font-size: 12px; margin: 0 0 19px; line-height: 1.5; }.quiz-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }.quiz-card { min-height: 190px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 25px rgba(36,25,104,.07); }.quiz-card-cover { height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--coral)); margin-bottom: 14px; }.quiz-card:nth-child(3n) .quiz-card-cover { background: linear-gradient(90deg, var(--cyan), var(--violet)); }.quiz-card:nth-child(2n) .quiz-card-cover { background: linear-gradient(90deg, var(--yellow), var(--coral)); }.quiz-card h3 { font-size: 17px; margin: 0 0 6px; letter-spacing: -.04em; }.quiz-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.quiz-meta { color: var(--muted); font-size: 11px; display: flex; gap: 12px; margin-top: 15px; }.quiz-actions { display: flex; gap: 7px; margin-top: 17px; }.quiz-actions .btn { padding: 9px 10px; font-size: 11px; }

.editor-head { display: flex; align-items: center; gap: 15px; margin-bottom: 23px; }.back-btn { border: 0; background: transparent; color: var(--muted); font-size: 22px; padding: 2px 8px; }.editor-head h1 { margin: 0; font-size: 36px; }.editor-layout { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }.question-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; margin-bottom: 14px; }.question-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.question-number { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--ink); font-size: 12px; font-weight: 900; }.option-editor { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; margin-top: 8px; }.option-editor input[type="text"] { padding: 10px; border: 1px solid var(--line); border-radius: 9px; width: 100%; }.correct-label { font-size: 10px; color: var(--muted); margin-top: 13px; display: block; }.editor-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }.editor-actions > div { display: flex; gap: 8px; }

.game-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }.game-panel { padding: 25px; }.game-hero { color: #fff; border: 0; background: linear-gradient(135deg, #2b2358, #100d2c); min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }.game-hero::after { content: ""; width: 210px; height: 210px; border-radius: 50%; background: rgba(101,84,246,.42); position: absolute; right: -75px; top: -70px; }.game-hero > * { position: relative; z-index: 1; }.game-code-label { color: #c6c0e8; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }.game-code { font-size: clamp(52px, 9vw, 100px); line-height: .9; letter-spacing: .06em; font-weight: 950; margin: 12px 0; }.game-status { color: #c6c0e8; font-size: 13px; }.game-status strong { color: #fff; }.player-cloud { display: flex; flex-wrap: wrap; gap: 8px; max-height: 330px; overflow: auto; }.player-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px 8px 7px; background: var(--surface-soft); border-radius: 99px; font-size: 12px; font-weight: 750; }.player-chip .avatar { width: 23px; height: 23px; font-size: 11px; }.question-live { min-height: 425px; display: flex; flex-direction: column; justify-content: center; }.question-kicker { color: var(--violet); font-weight: 850; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }.question-live h2 { font-size: clamp(27px, 4vw, 46px); letter-spacing: -.06em; line-height: 1.06; margin: 16px 0 26px; }.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.answer-button { min-height: 88px; border: 0; border-radius: 15px; padding: 15px; color: #fff; text-align: left; font-weight: 800; display: flex; align-items: flex-end; transition: transform .15s, filter .15s; }.answer-button:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.04); }.answer-button.selected { outline: 4px solid var(--ink); outline-offset: 2px; }.answer-button.correct { outline: 5px solid var(--green); outline-offset: 3px; box-shadow: 0 0 0 8px rgba(72,199,142,.16); }.answer-button.wrong { outline: 5px solid #d94b4b; outline-offset: 3px; filter: grayscale(.15) saturate(.8); }.answer-waiting { color: var(--violet-dark); font-weight: 850; font-size: 12px; }.reveal-message { margin-top: 25px; padding: 13px 15px; border-radius: 12px; color: #177b59; background: #e9faf2; font-size: 13px; font-weight: 750; }.answer-button.coral { background: var(--coral); }.answer-button.cyan { background: var(--cyan); }.answer-button.violet { background: #826eff; }.answer-button.yellow { color: var(--ink); background: var(--yellow); }.answer-button.green { background: var(--green); }.timer { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.timer strong { color: var(--ink); font-size: 21px; }.result-card { text-align: center; padding: 35px; }.result-emoji { font-size: 58px; }.result-card h2 { font-size: 34px; margin: 12px 0 7px; letter-spacing: -.05em; }.result-card p { color: var(--muted); }.score-big { font-size: 50px; font-weight: 950; letter-spacing: -.07em; color: var(--violet); margin: 22px 0; }.leaderboard { display: grid; gap: 8px; }.leader-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #faf9fe; }.leader-row.top { background: #fff7dc; }.leader-rank { color: var(--muted); font-weight: 900; }.leader-name { font-weight: 750; font-size: 13px; }.leader-score { font-weight: 900; font-size: 13px; }
.join-card { max-width: 560px; margin: 55px auto; text-align: center; padding: 35px; }.join-card h1 { font-size: 48px; margin: 13px 0; }.join-card p { color: var(--muted); line-height: 1.55; }.join-card .form-grid { text-align: left; margin-top: 27px; }.code-input { font-size: 25px !important; text-align: center; letter-spacing: .17em; font-weight: 900; text-transform: uppercase; }

.ai-panel { background: linear-gradient(145deg, #fff, #f7f5ff); border-color: #dcd7ff; }.ai-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--violet-dark); background: #eeecff; border-radius: 99px; padding: 6px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }.ai-badge::before { content: "✦"; font-size: 13px; }.ai-feedback { padding: 11px 12px; border-radius: 10px; color: var(--violet-dark); background: #eeecff; font-size: 12px; line-height: 1.5; }.ai-feedback:empty { display: none; }.file-input { padding: 9px !important; font-size: 11px; }.ai-refine { margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); }

#toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: grid; gap: 10px; }.toast { max-width: 340px; padding: 13px 16px; border-radius: 12px; color: #fff; background: var(--ink); box-shadow: 0 12px 30px rgba(20,14,50,.22); font-size: 13px; animation: slide-in .22s ease-out; }.toast.error { background: #bd443a; }.toast.success { background: #198a62; }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes answer-correct { 0% { transform: scale(.97); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }
.reveal-message { animation: reveal-pop .45s ease-out; }.answer-button.correct { animation: answer-correct .55s ease-out; }

@media (max-width: 900px) { .hero, .auth-grid, .dashboard-grid, .editor-layout, .game-layout { grid-template-columns: 1fr; }.hero-card { transform: none; max-width: 600px; width: 100%; margin: 0 auto; }.dashboard-head { align-items: flex-start; flex-direction: column; }.stats { width: 100%; }.stat { flex: 1; }.editor-layout .panel { order: -1; } }
@media (max-width: 600px) { .site-header { padding: 0 18px; }.header-actions .btn:not(.btn-primary) { display: none; }.page { width: min(100% - 28px, 1180px); padding-top: 35px; }.hero { gap: 30px; }.hero-card { min-height: 370px; padding: 22px; }.mock-question { margin-top: 35px; font-size: 24px; }.feature-row, .quiz-list, .form-row { grid-template-columns: 1fr; }.auth-intro, .auth-card, .join-card, .game-panel { padding: 21px; }.auth-intro h2 { font-size: 34px; }.answer-grid { grid-template-columns: 1fr; }.answer-button { min-height: 66px; }.dashboard-head h1 { font-size: 37px; }.game-code { font-size: 62px; }.user-pill span { display: none; } }