@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap');

/* ── TOKENS ── */
:root {
  --void:   #07060f;
  --d1:     #0e0c1a;
  --d2:     #141228;
  --d3:     #1c1935;
  --d4:     #251f42;
  --border: rgba(138,92,246,.18);
  --vio:    #8a5cf6;
  --vio2:   #a78bfa;
  --vio3:   #c4b5fd;
  --ind:    #6366f1;
  --glow:   rgba(138,92,246,.35);
  --wh:     #f0eeff;
  --gr:     #6b6490;
  --red:    #f87171;
  --grn:    #4ade80;
  --yel:    #fbbf24;
  --fd:     'Syne', sans-serif;
  --fm:     'DM Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background: var(--void);
  color: var(--wh);
  font-family: var(--fm);
  font-size: 15px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── NOISE + GRID TEXTURE ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(138,92,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,92,246,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
body::after {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99,102,241,.12), transparent),
              radial-gradient(ellipse 40% 40% at 90% 90%, rgba(138,92,246,.07), transparent);
}

.app { position:relative; z-index:1; }

/* ── NAV ── */
nav {
  position:sticky; top:0; z-index:100;
  background: rgba(7,6,15,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  padding: 0 32px;
  height: 56px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family: var(--fd);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wh);
}
.nav-logo span { color: var(--vio); }
.nav-links { display:flex; gap:6px; }
.nav-link {
  font-family: var(--fm);
  font-size: .68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gr);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid transparent;
  transition: all .2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--vio2);
  border-color: var(--border);
  background: rgba(138,92,246,.07);
}

/* ── PAGE HEADER ── */
.page-header {
  padding: 56px 32px 40px;
  max-width: 900px;
}
.page-eyebrow {
  font-family: var(--fm);
  font-size: .65rem;
  letter-spacing: 3px;
  color: var(--vio);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-title {
  font-family: var(--fd);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--wh);
  margin-bottom: 12px;
}
.page-title span { color: var(--vio2); }
.page-sub {
  font-size: .88rem;
  color: var(--gr);
  line-height: 1.7;
  max-width: 520px;
}

/* ── CARD ── */
.card {
  background: var(--d2);
  border: 1px solid var(--border);
  padding: 28px 32px;
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: rgba(138,92,246,.4); }
.card-title {
  font-family: var(--fm);
  font-size: .65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--vio);
  margin-bottom: 16px;
}

/* ── BUTTONS ── */
.btn {
  font-family: var(--fd);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid;
  cursor: pointer;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
  background: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

.btn-p { background: var(--vio); color: var(--void); border-color: var(--vio); }
.btn-p:hover { background: var(--vio2); border-color: var(--vio2); box-shadow: 0 6px 24px rgba(138,92,246,.4); }

.btn-g { color: var(--vio2); border-color: var(--border); }
.btn-g:hover { background: rgba(138,92,246,.1); border-color: rgba(138,92,246,.5); }

.btn-r { color: var(--red); border-color: rgba(248,113,113,.3); }
.btn-r:hover { background: rgba(248,113,113,.08); }

.btn-grn { color: var(--grn); border-color: rgba(74,222,128,.3); }
.btn-grn:hover { background: rgba(74,222,128,.08); }

.btn-sm { font-size: .65rem; padding: 7px 14px; letter-spacing: 1.5px; }

/* ── INPUTS ── */
input[type=text], input[type=number], input[type=email],
input[type=url], textarea, select {
  background: var(--d3);
  border: 1px solid rgba(138,92,246,.2);
  color: var(--wh);
  font-family: var(--fm);
  font-size: .88rem;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(138,92,246,.6);
  box-shadow: 0 0 0 3px rgba(138,92,246,.1);
}
select option { background: var(--d2); }
label {
  display: block;
  font-family: var(--fm);
  font-size: .65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gr);
  margin-bottom: 6px;
}
.field { margin-bottom: 16px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--d1); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(138,92,246,.7), rgba(138,92,246,.25)); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--vio2), var(--vio)); }
* { scrollbar-width:thin; scrollbar-color: rgba(138,92,246,.4) var(--d1); }

/* ── BADGE ── */
.badge {
  display:inline-block;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid;
}
.badge-vio { color: var(--vio2); border-color: var(--border); background: rgba(138,92,246,.08); }
.badge-grn { color: var(--grn);  border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.06); }
.badge-red { color: var(--red);  border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
.badge-yel { color: var(--yel);  border-color: rgba(251,191,36,.3);  background: rgba(251,191,36,.06);  }

/* ── DIVIDER ── */
.divider { border:none; border-top:1px solid var(--border); margin: 24px 0; }

/* ── STAT BOX ── */
.stat-box {
  background: var(--d3);
  border: 1px solid var(--border);
  padding: 18px 20px;
  text-align: center;
}
.stat-val {
  font-family: var(--fd);
  font-weight: 800;
  font-size: 2rem;
  color: var(--vio2);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-lbl {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gr);
}

/* ── GLOW PULSE ── */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(138,92,246,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(138,92,246,0); }
}
.pulse { animation: glowPulse 2s infinite; }

/* ── FADE IN UP ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation: fadeUp .4s ease both; }

/* ── TOAST ── */
#toast-root {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.toast {
  background: var(--d3);
  border: 1px solid var(--border);
  color: var(--wh);
  font-family: var(--fm);
  font-size: .82rem;
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: fadeUp .3s ease both;
  max-width:320px;
}

/* ── MODAL ── */
.modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  z-index:500; display:none; align-items:center; justify-content:center;
  padding:16px; backdrop-filter:blur(6px);
}
.modal-bg.open { display:flex; }
.modal {
  background:var(--d2); border:1px solid rgba(138,92,246,.35);
  max-width:640px; width:100%; max-height:90vh; overflow-y:auto;
  animation: fadeUp .25s ease both;
}
.modal-head {
  padding:22px 28px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--fd); font-weight:700; font-size:1.1rem;
}
.modal-body { padding:20px 28px 28px; }
.modal-close {
  background:rgba(255,255,255,.07); border:none; color:var(--wh);
  width:30px; height:30px; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { background:rgba(255,255,255,.14); }

/* ── RANGE SLIDER ── */
input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px;
  background:var(--d4); border-radius:2px; outline:none; border:none; padding:0;
  box-shadow:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--vio); cursor:pointer;
  box-shadow:0 0 0 3px rgba(138,92,246,.2);
  transition:box-shadow .2s;
}
input[type=range]::-webkit-slider-thumb:hover { box-shadow:0 0 0 6px rgba(138,92,246,.3); }

/* ── COLOR SWATCH ── */
input[type=color] {
  -webkit-appearance:none; appearance:none;
  width:40px; height:36px; border:1px solid var(--border);
  background:var(--d3); cursor:pointer; padding:3px; border-radius:0;
}
input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
input[type=color]::-webkit-color-swatch { border:none; }

/* ── CHECKBOX ── */
.chk-wrap {
  display:inline-flex; align-items:center; gap:9px;
  cursor:pointer; font-family:var(--fm); font-size:.72rem;
  color:#bbb; user-select:none;
}
.chk-wrap input[type=checkbox] { display:none; }
.chk-box {
  width:18px; height:18px; border:2px solid rgba(138,92,246,.45);
  background:var(--d3); flex-shrink:0; position:relative;
  transition:all .18s;
}
.chk-wrap input:checked + .chk-box {
  background:var(--vio); border-color:var(--vio);
}
.chk-wrap input:checked + .chk-box::after {
  content:'';
  position:absolute; left:4px; top:1px;
  width:8px; height:5px;
  border-left:2px solid var(--void); border-bottom:2px solid var(--void);
  transform:rotate(-45deg);
}

/* ── RESPONSIVE ── */
@media(max-width:680px){
  nav { padding:0 16px; }
  .nav-links { display:none; }
  .page-header { padding:36px 16px 28px; }
  .card { padding:20px; }
}

/* ── ROUNDED THEME ── */
.rounded-theme .card,
.rounded-theme .tool-card,
.rounded-theme .result-card,
.rounded-theme nav,
.rounded-theme .modal,
.rounded-theme .stat-box,
.rounded-theme .suggest-item,
.rounded-theme .click-target,
.rounded-theme .typing-source,
.rounded-theme #board,
.rounded-theme .game-status,
.rounded-theme .result-banner,
.rounded-theme .tip-box,
.rounded-theme .badge,
.rounded-theme .copy-preview,
.rounded-theme .qr-preview-card {
  border-radius: var(--card-radius, 16px);
}
.rounded-theme .btn,
.rounded-theme .diff-btn,
.rounded-theme .dur-btn,
.rounded-theme .grade-btn,
.rounded-theme .ec-btn,
.rounded-theme .nav-link,
.rounded-theme input[type=text],
.rounded-theme input[type=number],
.rounded-theme input[type=url],
.rounded-theme input[type=email],
.rounded-theme textarea,
.rounded-theme select,
.rounded-theme .typing-input {
  border-radius: var(--btn-radius, 8px);
}
.rounded-theme .cell { border-radius: 6px; }
.rounded-theme #qr-output { border-radius: 12px; }

/* ── SETTINGS PAGE ── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.theme-swatch {
  border: 2px solid transparent;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  position: relative;
}
.theme-swatch:hover { border-color: var(--vio); transform: translateY(-2px); }
.theme-swatch.active { border-color: var(--vio2); }
.theme-swatch.active::after {
  content: '✓';
  position: absolute; top: 6px; right: 8px;
  font-size: .7rem; color: var(--vio2);
}
.theme-swatch-bg {
  width: 100%; height: 48px;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.08);
}
.theme-swatch-name {
  font-family: var(--fm);
  font-size: .7rem;
  letter-spacing: 1px;
  color: #ccc;
}

.csv-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--d3); border: 1px solid var(--border);
  font-family: var(--fm); font-size: .82rem;
  margin-bottom: 14px;
}
.csv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.csv-dot.linked   { background: var(--grn); box-shadow: 0 0 6px var(--grn); }
.csv-dot.unlinked { background: var(--red); }

/* ── FULLSCREEN BUTTON ── */
.fs-btn {
  font-family: var(--fm); font-size: .65rem; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 12px;
  background: transparent; border: 1px solid var(--border);
  color: var(--gr); cursor: pointer; transition: all .18s;
  white-space: nowrap;
}
.fs-btn:hover { color: var(--vio2); border-color: rgba(138,92,246,.4); }

/* Fullscreen game wrap — fills the screen */
:-webkit-full-screen .game-wrap,
:-webkit-full-screen .tests-wrap { max-width: 100%; padding: 20px; }
:fullscreen .game-wrap,
:fullscreen .tests-wrap { max-width: 100%; padding: 20px; }