:root{--bg:#fff7ed;--panel:#fff;--line:#f3e2cf;--text:#3b2b1d;--muted:#8c6f55;--orange:#f59e0b;--green:#28c38a;--red:#ef4444;--shadow:0 18px 45px rgba(190,140,80,.16)}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff7ed,#fff)}
.shell{width:min(760px,calc(100% - 24px));margin:0 auto;padding:24px 0 34px}
.view[hidden]{display:none}
.hero{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(26px,5vw,36px)}
.hero .ver{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:4px 9px;border-radius:999px}
.tagline{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.5;flex-basis:100%}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:.2s ease;box-shadow:var(--shadow)}
.mode-card:hover{transform:translateY(-2px)}
.mode-emoji{font-size:28px}
.mode-name{font-weight:800}
.mode-desc{color:var(--muted);font-size:13px;line-height:1.45}
.primary-mode{background:linear-gradient(145deg,#fff2d9,#ffe6bb)}
.simple-points{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.simple-points article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.simple-points strong{display:block;font-size:14px}
.simple-points span{color:var(--muted);font-size:12px}
.foot{margin-top:20px;text-align:center}
.foot a{color:var(--muted);text-decoration:none}
.view-title{text-align:center;margin-bottom:16px}
.grade-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grade-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:6px;cursor:pointer;text-align:left;box-shadow:var(--shadow)}
.grade-emoji{font-size:24px}
.grade-name{font-weight:800}
.grade-desc{color:var(--muted);font-size:12px}
.p-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.btn-quit{width:38px;height:38px;border:0;border-radius:12px;background:#fff;color:var(--muted);cursor:pointer;box-shadow:var(--shadow)}
.p-progress-wrap{flex:1}
.p-progress{font-size:12px;color:var(--muted);margin-bottom:5px}
.p-bar{height:7px;background:#ffe9cf;border-radius:999px;overflow:hidden}
.p-bar-fill{height:100%;background:var(--orange);width:0}
.p-timer{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.p-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.p-question{font-size:clamp(30px,8vw,42px);font-weight:800;text-align:center;margin-bottom:18px}
.p-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.option-btn{height:62px;border:1px solid var(--line);border-radius:16px;font-size:22px;font-weight:800;background:#fff;cursor:pointer;transition:.15s ease}
.option-btn.correct{background:#e8fbf3;border-color:var(--green)}
.option-btn.wrong{background:#fff1f1;border-color:var(--red)}
.p-feedback{text-align:center;color:var(--muted);min-height:22px;margin-top:12px}
.p-next{width:100%;margin-top:10px}
.btn{height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;font-size:14px;font-weight:700}
.btn.primary{background:linear-gradient(135deg,#f9c56a,#f59e0b);border-color:transparent;color:#3b2b1d}
.back-btn{margin-top:18px;width:100%}
.result-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;text-align:center;box-shadow:var(--shadow)}
.result-emoji{font-size:46px}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.result-stats div{background:#fff8ee;border:1px solid var(--line);border-radius:16px;padding:12px}
.result-stats span{display:block;font-size:12px;color:var(--muted)}
.result-stats b{font-size:20px}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.config-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.cfg-group{margin-bottom:14px}
.cfg-label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:#fff;color:var(--muted);padding:7px 11px;border-radius:999px;font-size:12px;cursor:pointer}
.chip.active{background:#fff3dc;border-color:#f3c884;color:var(--text)}
.cfg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cfg-item{display:grid;gap:7px}
.cfg-item.grow{grid-column:1/-1}
select,input[type="text"]{height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);padding:0 10px;width:100%}
.toggles{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.actions{display:flex;gap:8px;margin-top:14px}
.actions .btn{flex:1}
.print-hint{margin-top:10px;font-size:12px;color:var(--muted)}
.sheet-area{margin-top:16px}
.sheet{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.sheet-title{text-align:center;font-size:20px;margin-bottom:10px}
.sheet-meta{text-align:center;font-size:12px;color:var(--muted);margin-bottom:14px}
.problems{display:grid;gap:12px}
.problem{display:flex;align-items:center;justify-content:space-between;min-height:32px;font-size:16px}
.time-box{width:38px;height:22px;border-bottom:1px solid #d8d3cd}
.sheet.answers{margin-top:14px}
.answer{color:var(--muted)}
.answer b{color:var(--text)}
@media print{
  body{background:#fff}
  .no-print,.p-head,.hero .ver,.simple-points,.foot,.mode-cards,.grade-picker,.config-panel,.result-card,.btn{display:none!important}
  .sheet,.sheet.answers{border:0;box-shadow:none;padding:0;margin:0;page-break-after:always}
  .sheet.answers{page-break-before:always}
}
@media (max-width:620px){
  .mode-cards,.grade-picker,.result-actions,.result-stats,.cfg-row{grid-template-columns:1fr}
  .simple-points{grid-template-columns:1fr}
  .actions{flex-direction:column}
}

/* ---------- Pro / License ---------- */
.pro-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: none; cursor: pointer;
}
.pro-badge.pro { background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff; cursor: default; }
.pro-badge.btn { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.grade-card.locked { opacity: .55; position: relative; }
.grade-card.locked::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: 14px; }
.lock-badge { font-size: 11px; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: middle; }
#licenseModal { position: fixed; inset: 0; z-index: 999; display: none; }
#licenseModal.open { display: block; }
.lic-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.lic-dialog {
  position: relative; max-width: 380px; margin: 12vh auto; background: #fff;
  border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); text-align: center;
}
.lic-dialog h3 { margin: 0 0 6px; font-size: 20px; }
.lic-sub { color: #6b7280; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.lic-input {
  width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid #e5e7eb;
  border-radius: 10px; font-size: 15px; text-align: center; letter-spacing: 1px; text-transform: uppercase;
}
.lic-input:focus { outline: none; border-color: #f59e0b; }
.lic-error { color: #dc2626; font-size: 13px; margin: 8px 0 0; }
.lic-go {
  width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 10px;
  background: #f59e0b; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.lic-go:disabled { opacity: .6; }
.lic-buy { font-size: 13px; color: #374151; margin: 14px 0 4px; }
.lic-buy a { color: #d97706; font-weight: 600; }
.lic-note { font-size: 11px; color: #9ca3af; margin: 0; }
.lic-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 22px; color: #9ca3af; cursor: pointer; line-height: 1;
}
.print-watermark {
  position: fixed; top: 45%; left: 50%; transform: translate(-50%,-50%) rotate(-30deg);
  font-size: 34px; font-weight: 800; color: rgba(0,0,0,.08); pointer-events: none;
  white-space: nowrap; z-index: 50;
}
@media print { .print-watermark { position: fixed; display: block !important; } }