@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --grad: linear-gradient(90deg, #8B3DFF 0%, #D63DD0 100%);
  --v1: #9B4DF5; --v2: #7A2BF5; --v3: #5B21B6; --v4: #6B2FD6;
  --lav: #F7F2FE; --lav-border: #E6DAF7; --track: #F2EEF8;
  --g1: #EEEBF3; --g2: #E4E0EC; --g3: #8E8E93; --g4: #48484A; --g5: #6E6E73;
  --ink: #1D1D1F;
  --dark: rgba(23, 21, 28, 0.97);
  --shadow: 0 10px 30px rgba(122, 43, 245, 0.10);
  --shadow-btn: 0 10px 24px rgba(155, 77, 245, 0.28);
  --ring: 0 0 0 3px #FFFFFF, 0 0 0 5px #7A2BF5;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .tight {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--v2); }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring) !important; }

.still-word { color: #7A2BF5; font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--g2);
  background: #FFFFFF; color: #3A2266;
  font-weight: 500; font-size: 14.5px; white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: var(--lav); }
.btn-primary { border: 0; background: var(--grad); color: #FFFFFF; font-weight: 600; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--grad); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-ghost { border: 0; background: transparent; color: var(--g5); }
.btn-ghost:hover { background: var(--g1); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; }

.card { background: #FFFFFF; border: 1px solid var(--g1); border-radius: 18px; box-shadow: var(--shadow); }

.input {
  width: 100%; height: 50px; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--g2); background: #FFFFFF;
  font-size: 16px; color: var(--ink);
}
.input:focus-visible { border-color: var(--v2); box-shadow: 0 0 0 3px rgba(122, 43, 245, 0.18) !important; }

.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--g5); }

.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--track); }
.seg button {
  min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--g5); font-weight: 500; font-size: 14px;
}
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: #FFFFFF; color: var(--v3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 8px 0 14px; border-radius: 999px;
  background: var(--lav); border: 1px solid var(--lav-border); color: var(--v3); font-size: 13.5px; font-weight: 500;
}
.chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--v4); font-size: 15px; line-height: 1; }
.chip button:hover { background: #FFFFFF; }

.kind { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.kind-task { background: #F1E8FE; color: #6B2FD6; }
.kind-link { background: #E8F0FE; color: #1F5FC8; }
.kind-idea { background: #FDEBF7; color: #B0308F; }

.switch { position: relative; width: 46px; height: 28px; border-radius: 999px; border: 0; background: var(--g2); flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--grad); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  padding: 12px 18px; border-radius: 999px; background: var(--dark); color: #FFFFFF;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); z-index: 100;
}

/* Custom volume slider */
.vol { display: flex; align-items: center; gap: 14px; }
.vol-track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.vol-rail { position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 999px; background: var(--track); }
.vol-fill { position: absolute; left: 0; top: 11px; height: 6px; border-radius: 999px; background: var(--grad); }
.vol-knob { position: absolute; top: 4px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--v2); box-shadow: 0 2px 8px rgba(122, 43, 245, .3); }
.vol-track:focus-within .vol-knob { box-shadow: var(--ring); }
.vol-val { width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: var(--g5); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}