:root { color-scheme: light; --navy:#10233f; --navy-2:#193354; --teal:#0ea5a4; --mint:#dff7f2; --amber:#f5b942; --coral:#e76f51; --violet:#7357c8; --ink:#1c2a3c; --muted:#6d7b8e; --line:#e5ebf1; --paper:#f7f9fb; --white:#fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(145deg,#f8fafc 0%,#edf5f4 100%); } button,select { font:inherit; } button { cursor:pointer; } [hidden] { display:none !important; }
.max-gate { display:none; min-height:100dvh; padding:20px; place-items:center; background:linear-gradient(145deg,#f8fafc,#edf5f4); } .max-gate-card { width:min(100%,430px); padding:30px; text-align:center; border-radius:26px; background:#fff; box-shadow:0 18px 50px rgba(16,35,63,.12); } .max-gate-card h1 { margin:12px 0; font-size:clamp(30px,8vw,46px); } .max-gate-card p:not(.eyebrow) { color:var(--muted); line-height:1.55; } .max-gate-card .button { display:inline-flex; margin-top:12px; }
.max-locked .max-gate { display:grid; } .max-locked .app-shell,.max-locked .quiz-view,.max-locked .result-view,.max-locked .ad-view,.max-locked .payment-overlay,.max-locked .workspace-view,.max-locked .toast { display:none !important; }
.app-shell { max-width:1120px; margin:0 auto; padding:28px 22px 32px; } .panel { background:rgba(255,255,255,.92); border:1px solid rgba(229,235,241,.85); box-shadow:0 18px 50px rgba(16,35,63,.09); border-radius:28px; }
.hero { min-height:420px; display:flex; position:relative; overflow:hidden; padding:52px 48px; background:radial-gradient(circle at 80% 15%,#d8f5f0 0,#f8fbfb 42%,#fff 100%); } .hero-copy { position:relative; z-index:2; max-width:600px; } .brand-lockup,.quiz-brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; color:var(--navy); } .brand-mark { width:37px; height:37px; object-fit:contain; border-radius:11px; } .eyebrow { margin:0 0 12px; color:var(--teal); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.13em; } h1,h2,p { margin-top:0; } h1 { margin:20px 0 16px; max-width:590px; font-size:clamp(34px,5vw,59px); line-height:1.02; letter-spacing:-.055em; color:var(--navy); } h2 { margin-bottom:8px; color:var(--navy); letter-spacing:-.035em; } .hero-text { max-width:490px; color:var(--muted); line-height:1.6; font-size:16px; } .hero-art { position:absolute; width:420px; right:22px; bottom:-33px; filter:drop-shadow(0 20px 20px rgba(16,35,63,.12)); } .hero-actions,.result-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { border:0; border-radius:14px; padding:13px 19px; font-weight:750; transition:.18s ease; } .button:hover { transform:translateY(-2px); } .button-primary { color:white; background:var(--navy); box-shadow:0 9px 20px rgba(16,35,63,.18); } .button-primary:hover { background:var(--navy-2); } .button-ghost { color:var(--navy); background:#eef4f7; } .button span { margin-left:10px; color:var(--amber); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; } .mini-card { min-height:112px; padding:20px; border-radius:21px; background:var(--white); border:1px solid var(--line); display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-content:center; } .mini-icon { grid-row:span 2; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; font-weight:900; color:var(--navy); } .accent-teal .mini-icon { background:var(--mint); color:var(--teal); } .accent-violet .mini-icon { background:#eeeafd; color:var(--violet); } .accent-amber .mini-icon { background:#fff3d7; color:#bf7b00; } .mini-card strong { color:var(--navy); } .mini-card small { color:var(--muted); line-height:1.35; margin-top:4px; }
.tool-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0 0 18px; } .tool-card { min-height:105px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:16px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--navy); text-align:left; transition:.18s ease; } .tool-card:hover { transform:translateY(-2px); border-color:#9edbd5; box-shadow:0 10px 26px rgba(16,35,63,.08); } .tool-card > span { width:31px; height:31px; display:grid; place-items:center; margin-bottom:4px; border-radius:9px; background:var(--mint); color:var(--teal); font-size:18px; font-weight:900; } .tool-card small { color:var(--muted); line-height:1.3; }
.content-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; } .setup-panel,.preview-panel { padding:30px; } .section-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:28px; } .status-pill { padding:7px 10px; border-radius:99px; font-size:10px; font-weight:800; color:var(--coral); background:#fff0ec; letter-spacing:.08em; } .field-label { display:block; margin-bottom:8px; font-size:12px; font-weight:750; color:var(--muted); } .select-field { width:100%; appearance:none; border:1px solid var(--line); border-radius:13px; padding:14px 16px; color:var(--navy); background:#fbfcfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236d7b8e' stroke-width='2'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center; } .mode-list { display:grid; gap:10px; margin-top:24px; } .mode-card { display:grid; grid-template-columns:38px 1fr auto; align-items:center; text-align:left; gap:12px; border:1px solid var(--line); background:#fff; border-radius:15px; padding:14px; color:var(--navy); } .mode-card:hover,.mode-card.selected { border-color:#9edbd5; background:#f1fbf9; } .mode-symbol { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#e3f7f4; color:var(--teal); font-size:20px; } .mode-card strong,.mode-card small { display:block; } .mode-card small { color:var(--muted); margin-top:3px; } .mode-arrow { color:var(--teal); font-size:20px; } .onboarding-hint { margin:18px 0 0; padding:12px 14px; color:#426577; background:#f0f8fa; border-radius:11px; font-size:12px; line-height:1.45; } .fine-print { margin:20px 0 0; color:#8793a1; font-size:11px; line-height:1.5; } .preview-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:400px; background:linear-gradient(155deg,#effaf8,#fff 65%); } .preview-art { position:absolute; width:220px; right:6px; top:-20px; opacity:.94; } .preview-panel > div { position:relative; max-width:310px; margin-top:155px; } .preview-panel p:not(.eyebrow) { color:var(--muted); line-height:1.55; } .link-button { align-self:flex-start; margin-top:12px; border:0; background:transparent; color:var(--teal); font-weight:800; padding:5px 0; } .link-button span { padding-left:8px; }
.footer { display:flex; justify-content:space-between; gap:20px; color:#8793a1; font-size:11px; line-height:1.5; padding:19px 4px 0; }
.quiz-view,.result-view { max-width:780px; margin:0 auto; padding:24px 22px 48px; } .quiz-topbar { display:flex; align-items:center; gap:14px; margin-bottom:28px; } .icon-button,.favorite-button { border:0; background:#fff; width:40px; height:40px; border-radius:13px; color:var(--navy); font-size:22px; box-shadow:0 7px 20px rgba(16,35,63,.08); } .favorite-button { color:var(--coral); font-size:25px; line-height:1; } .favorite-button.active { background:#fff0ec; } .quiz-brand { flex:1; } .quiz-counter { color:var(--muted); font-size:13px; font-weight:700; } .quiz-progress { height:7px; background:#dce8e9; border-radius:99px; margin-bottom:18px; overflow:hidden; } .quiz-progress span { display:block; height:100%; width:0; background:var(--teal); border-radius:inherit; transition:width .3s; } .quiz-content { padding:34px; } .question-meta { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:12px; margin-bottom:20px; } .category-badge { color:var(--teal); background:var(--mint); border-radius:99px; padding:7px 10px; font-weight:800; } .question-text { font-size:clamp(23px,4vw,35px); line-height:1.15; margin-bottom:28px; } .options-list { display:grid; gap:11px; } .option { display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; padding:16px; border:1px solid var(--line); border-radius:15px; background:#fff; color:var(--ink); line-height:1.45; } .option:hover { border-color:#94d6d0; background:#f7fffd; } .option-letter { flex:0 0 31px; height:31px; display:grid; place-items:center; border-radius:9px; color:var(--navy); background:#edf2f5; font-weight:800; font-size:12px; } .option.correct { border-color:#55c7b9; background:#effbf8; } .option.correct .option-letter { background:var(--teal); color:white; } .option.wrong { border-color:#f0a08e; background:#fff5f2; } .option.wrong .option-letter { background:var(--coral); color:white; } .option:disabled { cursor:default; } .generated-tag { display:inline-block; margin-left:8px; color:#9a6b06; font-size:10px; font-weight:800; white-space:nowrap; } .answer-note { margin-top:20px; padding:14px 16px; border-left:3px solid var(--teal); border-radius:8px; background:#f4fbfa; color:var(--muted); font-size:13px; line-height:1.5; } .answer-note strong { color:var(--navy); } .quiz-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); margin-top:28px; padding-top:20px; } .score-label { color:var(--muted); font-size:13px; } .next-button:disabled { cursor:not-allowed; opacity:.48; transform:none; }
.timer-label { padding:7px 10px; color:#9d5c00; background:#fff2d5; border-radius:99px; font-size:12px; font-weight:850; font-variant-numeric:tabular-nums; } .option.selected { border-color:#6686ad; background:#f1f5fa; } .note-box { margin-top:18px; border:1px solid var(--line); border-radius:13px; padding:12px 14px; } .note-box summary { cursor:pointer; color:var(--navy); font-size:13px; font-weight:750; } .question-note { width:100%; margin-top:12px; padding:12px; resize:vertical; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fbfcfd; font:inherit; font-size:14px; line-height:1.45; } .note-save { margin-top:8px; padding:8px 11px; border:0; border-radius:9px; background:var(--mint); color:#087c7b; font-weight:800; }
.result-view { min-height:100vh; display:grid; place-items:center; } .result-card { width:min(100%,620px); text-align:center; padding:42px; } .result-art { width:190px; margin:-18px auto 6px; } .result-title { font-size:44px; margin-bottom:8px; } .result-text { color:var(--muted); line-height:1.6; } .result-actions { justify-content:center; }
.ad-view { min-height:100vh; display:grid; place-items:center; padding:24px 22px 48px; } .ad-card { width:min(100%,760px); overflow:hidden; padding:18px; background:linear-gradient(145deg,#fffaf0,#fff 58%); } .ad-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 5px 15px; color:var(--muted); font-size:11px; } .ad-label { color:#ad770a; font-size:10px; font-weight:850; letter-spacing:.12em; } .ad-clickable { display:grid; grid-template-columns:.83fr 1.17fr; align-items:center; min-height:420px; padding:24px 30px 24px 12px; border-radius:21px; background:radial-gradient(circle at 20% 10%,#ffedb8 0,#fff 52%); cursor:pointer; } .ad-art { width:100%; max-width:300px; filter:drop-shadow(0 18px 16px rgba(16,35,63,.14)); } .ad-copy h1 { font-size:clamp(33px,5vw,52px); margin:14px 0 12px; } .ad-copy > p:not(.eyebrow) { color:var(--muted); line-height:1.55; max-width:410px; } .pro-benefits { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0; } .pro-benefits span { padding:8px 10px; color:#426577; background:#edf8f6; border-radius:99px; font-size:11px; font-weight:750; } .price-line { display:flex; align-items:baseline; gap:10px; margin:10px 0 1px; } .price-line strong { color:var(--navy); font-size:29px; } .price-line span { color:var(--muted); font-size:12px; } .skip-button { display:block; margin:14px auto 0; border:0; background:transparent; color:#8a96a3; font-size:12px; } .skip-button:disabled { cursor:not-allowed; opacity:.5; } .payment-overlay { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:rgba(16,35,63,.56); backdrop-filter:blur(8px); } .payment-modal { position:relative; width:min(100%,430px); padding:32px; } .modal-close { position:absolute; top:13px; right:16px; border:0; background:transparent; color:var(--muted); font-size:27px; } .payment-logo { width:48px; height:48px; object-fit:contain; margin-bottom:18px; border-radius:14px; } .payment-modal h2 { font-size:31px; margin-bottom:8px; } .payment-lead { color:var(--muted); line-height:1.5; } .payment-summary { display:flex; justify-content:space-between; align-items:center; margin:22px 0 15px; padding:15px; background:#f5f8fa; border-radius:13px; color:var(--navy); } .payment-summary strong { font-size:23px; } .payment-list { list-style:none; padding:0; margin:0 0 21px; color:var(--ink); font-size:14px; line-height:2; } .payment-list li::before { content:'✓'; margin-right:9px; color:var(--teal); font-weight:900; } .payment-button { width:100%; } .payment-note { display:block; margin-top:16px; color:#8a96a3; font-size:11px; line-height:1.45; }
.training-modal { position:relative; width:min(100%,560px); padding:32px; } .training-modal h2 { margin:5px 0 8px; font-size:31px; } .training-modal .field-label { margin-top:22px; } .training-mode-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0 20px; } .training-mode { min-height:84px; padding:12px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--navy); text-align:left; } .training-mode strong,.training-mode span { display:block; } .training-mode strong { font-size:13px; } .training-mode span { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.3; } .training-mode.active { border-color:var(--teal); background:var(--mint); box-shadow:0 0 0 2px rgba(12,151,145,.1); } .training-start { width:100%; justify-content:center; }
.workspace-view { position:fixed; z-index:15; inset:0; overflow:auto; background:linear-gradient(145deg,#f8fafc,#edf5f4); } .workspace-shell { width:min(100%,980px); min-height:100vh; margin:0 auto; padding:24px 22px 48px; } .workspace-topbar { display:flex; align-items:center; gap:18px; margin-bottom:22px; } .workspace-topbar h1 { margin:2px 0 0; font-size:clamp(31px,5vw,48px); } .workspace-eyebrow { margin:0; } .workspace-content { display:grid; gap:14px; } .empty-state { padding:48px 24px; text-align:center; color:var(--muted); } .empty-state strong { display:block; margin-bottom:7px; color:var(--navy); font-size:20px; } .collection-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:3px; } .question-row,.history-row,.stat-card,.search-panel { padding:18px; background:#fff; border:1px solid var(--line); border-radius:17px; } .question-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; } .question-row h3 { margin:5px 0 7px; color:var(--navy); font-size:16px; line-height:1.4; } .question-row p { margin:0; color:var(--muted); font-size:13px; } .row-actions { display:flex; gap:6px; } .small-button { padding:8px 10px; border:0; border-radius:9px; background:#edf6f5; color:#087c7b; font-weight:800; } .history-row { display:flex; align-items:center; justify-content:space-between; gap:16px; } .history-row strong,.history-row span { display:block; } .history-row span,.history-row small { color:var(--muted); } .score-badge { min-width:64px; padding:10px; border-radius:12px; background:var(--mint); color:#087c7b; text-align:center; font-weight:900; } .stats-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .stat-card strong { display:block; margin-top:5px; color:var(--navy); font-size:30px; } .stat-card span { color:var(--muted); font-size:13px; } .chart-card { padding:22px; background:#fff; border:1px solid var(--line); border-radius:18px; } .chart-row { display:grid; grid-template-columns:minmax(76px,130px) 1fr 48px; align-items:center; gap:10px; margin:12px 0; font-size:13px; } .chart-track { height:12px; overflow:hidden; border-radius:99px; background:#e9eff2; } .chart-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#6dd5c8); } .search-input { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; font:inherit; } .search-meta { margin-top:9px; color:var(--muted); font-size:12px; }
.toast { position:fixed; z-index:10; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--navy); color:#fff; border-radius:13px; padding:13px 17px; box-shadow:0 10px 26px rgba(16,35,63,.25); font-size:13px; transition:.2s; } .toast.visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:800px) { .hero { min-height:600px; padding:32px 27px; } .hero-art { width:310px; right:-24px; bottom:-5px; opacity:.8; } .hero-copy { max-width:100%; } .content-grid { grid-template-columns:1fr; } .preview-panel { min-height:335px; } .stats-grid { grid-template-columns:1fr; } .tool-grid { grid-template-columns:repeat(2,1fr); } .footer { flex-direction:column; gap:5px; } .ad-clickable { grid-template-columns:1fr; padding:18px; } .ad-art { width:240px; margin:0 auto -12px; } .stats-summary { grid-template-columns:1fr; } }
@media (max-width:520px) { .app-shell { padding:10px 8px 18px; } .hero { border-radius:20px; padding:22px 18px; } .hero h1 { font-size:30px; line-height:1.06; } .hero-text { font-size:14px; line-height:1.45; } .hero-actions { margin-top:18px; gap:8px; } .hero-actions .button { width:100%; padding:11px 14px; } .setup-panel,.preview-panel,.quiz-content { padding:16px; } .section-heading { margin-bottom:16px; } .section-heading h2,.preview-panel h2 { font-size:22px; } .field-label { margin-bottom:5px; font-size:11px; } .select-field { padding:11px 12px; font-size:13px; } .mode-list { gap:7px; margin-top:14px; } .mode-card { grid-template-columns:30px 1fr auto; gap:8px; padding:10px; font-size:13px; } .mode-card small { font-size:10px; } .mode-symbol { width:28px; height:28px; font-size:16px; } .quiz-view { padding:12px 8px 22px; } .quiz-content { border-radius:18px; } .question-text { font-size:22px; line-height:1.2; margin-bottom:18px; } .option { gap:9px; padding:11px; font-size:13px; } .option-leter { flex-basis:27px; } .result-card { padding:22px 16px; } .stats-summary { gap:8px; } .stat-card { padding:13px; } .stat-card strong { font-size:23px; } .tool-grid { gap:7px; } .tool-card { min-height:86px; padding:10px; font-size:13px; } .tool-card small { font-size:10px; } }

/* Mobile dialogs: the overlay and the dialog itself both remain reachable on short screens. */
.payment-overlay { display:flex; align-items:center; justify-content:center; overflow-y:auto; overscroll-behavior:contain; }
.payment-modal,.training-modal { max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }
.payment-list { line-height:1.65; }
@media (max-width:520px) { .payment-overlay { align-items:flex-start; padding:10px 8px; } .payment-modal,.training-modal { max-height:calc(100dvh - 20px); border-radius:22px; } .payment-modal h2,.training-modal h2 { font-size:26px; } .payment-list { font-size:13px; line-height:1.5; } .training-mode-row { grid-template-columns:1fr; } .training-mode { min-height:0; } }

/* Compact mobile layout: keep the first screen useful without excessive scrolling. */
@media (max-width:520px) {
  .app-shell { padding:8px 8px 14px; }
  .hero { min-height:0; padding:18px 16px 20px; }
  .hero-art { width:190px; right:-10px; bottom:-8px; opacity:.68; }
  .hero h1 { max-width:245px; margin:13px 0 11px; font-size:27px; }
  .hero-text { max-width:235px; }
  .hero-actions { position:relative; z-index:2; margin-top:15px; }
  .stats-grid { gap:8px; margin:10px 0; }
  .mini-card { min-height:76px; padding:12px; grid-template-columns:30px 1fr; column-gap:9px; border-radius:15px; }
  .mini-icon { width:30px; height:30px; border-radius:9px; }
  .mini-card small { font-size:11px; }
  .tool-grid { gap:7px; margin-bottom:10px; }
  .tool-card { min-height:74px; padding:9px; border-radius:14px; }
  .tool-card > span { width:27px; height:27px; margin-bottom:2px; font-size:16px; }
  .content-grid { gap:10px; }
  .setup-panel,.preview-panel { padding:14px; }
  .section-heading { margin-bottom:12px; }
  .mode-list { gap:6px; margin-top:12px; }
  .mode-card { padding:9px; border-radius:12px; }
  .question-text { font-size:19px; line-height:1.24; margin-bottom:14px; letter-spacing:-.015em; }
  .question-meta { margin-bottom:12px; }
  .options-list { gap:7px; }
  .onboarding-hint { margin-top:12px; padding:10px 11px; }
  .fine-print { margin-top:12px; }
  .preview-panel { min-height:245px; }
  .preview-panel > div { margin-top:90px; }
  .footer { padding-top:12px; }
}