/* VocabMaster Global Stylesheet — for standalone pages (not the SPA).
 *
 * The SPA (index.html) uses index.css which imports tokens → base → components etc.
 * Standalone pages (auth, subscription, admin, games, etc.) should link THIS file
 * to get consistent design tokens + common UI components without duplication.
 *
 * Usage:  <link rel="stylesheet" href="/app/styles/global.css">
 * Then page-specific CSS only needs overrides, not full redefinitions.
 */

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
@import url("./tokens.css");

/* ─── Base Reset ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark light}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="ocean"]{color-scheme:dark}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--font);min-height:100vh;
  line-height:1.5;
}
a{color:var(--pril);text-decoration:none}
a:hover{color:var(--pri)}
button{cursor:pointer;border:none;font-family:inherit;font-size:inherit}
img{max-width:100%}

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1{font-size:1.6rem;font-weight:800;letter-spacing:-0.02em}
h2{font-size:1.15rem;font-weight:700}
h3{font-size:1rem;font-weight:600}

/* ─── Inputs ─────────────────────────────────────────────────────────────── */
input,select,textarea{
  font-family:inherit;font-size:inherit;
  background:var(--sur2);color:var(--txt);
  border:1px solid var(--brd-solid);border-radius:var(--rad);
  padding:10px 14px;outline:none;transition:border var(--tran);
}
input:focus,select:focus,textarea:focus{border-color:var(--pri)}
input::placeholder{color:var(--muted)}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:8px;font-size:.88rem;font-weight:600;
  cursor:pointer;border:none;transition:all var(--tran);white-space:nowrap;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-accent,.btn-pri{background:var(--pri);color:#fff}
.btn-accent:hover,.btn-pri:hover{background:var(--pri-hover)}
.btn-sec{background:var(--sur2);border:1px solid var(--brd-solid);color:var(--txt)}
.btn-sec:hover{border-color:var(--pri);color:var(--pri)}
.btn-outline{background:transparent;border:1px solid var(--brd-solid);color:var(--muted)}
.btn-outline:hover{border-color:var(--pri);color:var(--txt)}
.btn-ok{background:var(--ok);color:#fff}.btn-ok:hover{filter:brightness(1.1)}
.btn-err{background:var(--err);color:#fff}.btn-err:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 12px;font-size:.82rem}
.btn-lg{padding:14px 28px;font-size:1rem}
.btn-full{width:100%}

/* ─── Utilities ─────────────────────────────────────────────────────────── */
@import url("./utilities.css");

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card{
  background:var(--sur);border:1px solid var(--brd-solid);
  border-radius:var(--rad-xl);padding:24px;
  transition:all var(--tran);
}
.card:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.12)}
.card.selected{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert{
  padding:12px 16px;border-radius:8px;font-size:.85rem;
  display:flex;align-items:center;gap:8px;
}
.alert.ok,.alert-ok{background:var(--ok-bg);border:1px solid var(--ok-brd);color:var(--ok)}
.alert.err,.alert-err{background:var(--err-bg);border:1px solid var(--err-brd);color:var(--err)}
.alert.warn,.alert-warn{background:var(--warn-bg);border:1px solid var(--warn-brd);color:var(--warn)}

/* ─── Header (standalone pages) ──────────────────────────────────────────── */
.page-header{
  background:var(--sur);border-bottom:1px solid var(--brd-solid);
  padding:14px 24px;display:flex;align-items:center;gap:16px;
  position:sticky;top:0;z-index:10;
}
.page-header .logo{
  font-size:1.1rem;font-weight:800;
  color:var(--pril);
  margin-right:auto;
}
.back-link{
  font-size:.85rem;color:var(--muted);
  display:flex;align-items:center;gap:6px;transition:color .15s;
}
.back-link:hover{color:var(--txt)}

/* ─── Container ──────────────────────────────────────────────────────────── */
.container{max-width:960px;margin:0 auto;padding:32px 20px}
.container-sm{max-width:480px;margin:0 auto;padding:32px 20px}
.container-lg{max-width:1200px;margin:0 auto;padding:32px 20px}

/* ─── Section Box ────────────────────────────────────────────────────────── */
.section{
  background:var(--sur);border:1px solid var(--brd-solid);
  border-radius:var(--rad-xl);padding:24px;margin-bottom:24px;
}
.section h2{font-size:1rem;font-weight:700;margin-bottom:16px}

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.form-group .hint{font-size:.78rem;color:var(--muted);margin-top:4px}
.form-group input,.form-group select,.form-group textarea{width:100%}
.input-row{display:flex;gap:10px}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.72rem;font-weight:600;padding:2px 8px;
  border-radius:10px;text-transform:uppercase;letter-spacing:.04em;
}
.badge-ok{background:var(--ok-bg);border:1px solid var(--ok-brd);color:var(--ok)}
.badge-err{background:var(--err-bg);border:1px solid var(--err-brd);color:var(--err)}
.badge-warn{background:var(--warn-bg);border:1px solid var(--warn-brd);color:var(--warn)}
.badge-pri{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:var(--pril)}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:.85rem}
.table th{
  background:var(--sur2);padding:10px 14px;text-align:start;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:1px solid var(--brd-solid);
}
.table td{padding:10px 14px;border-bottom:1px solid var(--brd-solid);vertical-align:top}
.table tr:hover td{background:var(--sur2)}

/* ─── Modal/Overlay ──────────────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:100;backdrop-filter:blur(4px);
}
.modal{
  background:var(--sur);border:1px solid var(--brd-solid);
  border-radius:var(--rad-xl);padding:28px;max-width:500px;width:90%;
  max-height:85vh;overflow-y:auto;
}
.modal h2{margin-bottom:16px}

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.spinner{
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--sur)}
::-webkit-scrollbar-thumb{background:var(--brd-solid);border-radius:3px}

/* ─── Semantic state classes for JS toggling ────────────────────────────── */
.text-ok{color:var(--ok)}.text-err{color:var(--err)}.text-warn{color:var(--warn)}
.text-pri{color:var(--pri)}.text-muted{color:var(--muted)}.text-cyan{color:var(--cyan)}
.bg-ok{background:var(--ok-bg)}.bg-err{background:var(--err-bg)}.bg-warn{background:var(--warn-bg)}
.star-active{color:var(--warn)}
.border-ok{border-color:var(--ok)}.border-err{border-color:var(--err)}.border-pri{border-color:var(--pri)}
.pw-weak{color:var(--err)}.pw-fair{color:var(--warn)}.pw-strong{color:var(--ok)}
[class*="pw-"].pw-bar{color:unset}
.pw-bar.pw-weak{background:var(--err)}.pw-bar.pw-fair{background:var(--warn)}.pw-bar.pw-strong{background:var(--ok)}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .container{padding:20px 14px}
  h1{font-size:1.3rem}
  .btn{padding:10px 16px;font-size:.82rem}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}