/* IQ shared styles: login, index and admin pages. Monster Word Quest keeps its own styles. */
:root{
  color-scheme:light;
  --bg:#eef3ff; --bg2:#dde7ff; --panel:#ffffff; --card:#ffffff; --ink:#1e1b4b; --muted:#5b5a80; --line:#d9e1f5;
  --brand:#7c4dff; --brand2:#2d7dff; --pink:#ff3d8a; --good:#1fae4f; --bad:#e23b5a; --warn:#ff8a00;
  --shadow:0 8px 0 #c6d4f2; --ring:#2d7dff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#140f33; --bg2:#1f1750; --panel:#241c5a; --card:#2b2270; --ink:#f6f3ff; --muted:#b7b0e4; --line:#3a3180;
    --shadow:0 8px 0 #0c0825; --ring:#9f7bff;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#140f33; --bg2:#1f1750; --panel:#241c5a; --card:#2b2270; --ink:#f6f3ff; --muted:#b7b0e4; --line:#3a3180;
  --shadow:0 8px 0 #0c0825; --ring:#9f7bff;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{background:var(--bg)}
body{
  font-family:"Fredoka","Nunito","Arial Rounded MT Bold",system-ui,sans-serif;
  background:radial-gradient(circle at 15% 0%,var(--bg2),var(--bg) 55%) fixed;
  color:var(--ink);min-height:100vh;-webkit-tap-highlight-color:transparent;
}
a{color:var(--brand2)}
button{font:inherit;font-weight:600;cursor:pointer;border:0;color:inherit;background:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1040px;margin:0 auto;padding:16px 16px 40px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo b{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:22px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand2),var(--brand) 60%,var(--pink));box-shadow:0 4px 0 rgba(0,0,0,.18)}
.logo span{font-size:22px;font-weight:700;letter-spacing:-.3px}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--panel);padding:8px 14px;border-radius:999px;font-size:15px;font-weight:600;box-shadow:0 3px 0 rgba(0,0,0,.1);text-decoration:none;color:var(--ink)}
.pill.btn:active{transform:translateY(2px);box-shadow:none}

/* buttons, fields */
.btn-main{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff;padding:12px 20px;border-radius:14px;font-size:17px;box-shadow:0 5px 0 #3a2a99}
.btn-main:active{transform:translateY(3px);box-shadow:none}
.btn-main:disabled{opacity:.55;cursor:default}
.btn-soft{background:var(--panel);padding:9px 14px;border-radius:12px;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.1)}
.btn-soft:active{transform:translateY(2px);box-shadow:none}
.btn-soft.danger{color:var(--bad)}
.field{width:100%;font:inherit;font-size:17px;padding:11px 13px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);min-width:0}
.field:focus{outline:none;border-color:var(--ring)}
label.lbl{display:block;font-weight:600;font-size:14px;color:var(--muted);margin:12px 0 5px}
.err{color:var(--bad);font-weight:600;min-height:22px;margin:10px 0 0}
.ok{color:var(--good);font-weight:600}
.muted{color:var(--muted)}

/* cards, panels */
.panel{background:var(--card);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
h1.t{font-size:30px;margin:6px 0 4px;letter-spacing:-.5px}
h2.t{font-size:22px;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 18px;font-size:17px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);
  font-weight:600;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:50;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.scroll-x{overflow-x:auto}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--bg2);color:var(--muted)}
.tag.admin{background:var(--brand);color:#fff}
.tag.off{background:var(--bad);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}