/* Kouga Forms — sign-in, onboarding and admin chrome.
   Tokens lifted from the app itself so the shell and the app are one thing. */
:root{
  --ink:#e7ecf7;--ink-lt:#c4cde0;--ink-mut:#8b97b3;
  --card:rgba(34,44,72,.42);--card-hi:rgba(28,38,64,.88);--surf:rgba(22,30,51,.46);
  --accent:#3b82f6;--accent-lt:#60a5fa;--accent-pale:rgba(59,130,246,.14);
  --border:rgba(148,174,224,.16);--border-hi:rgba(148,174,224,.32);
  --deep:#070b15;--base:#0a0f1f;
  --orange:#f97316;--orange-pale:rgba(249,115,22,.16);
  --green:#22c55e;--green-pale:rgba(34,197,94,.14);
  --red:#ef4444;--red-pale:rgba(239,68,68,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --sys:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--sys);background:var(--base);color:var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;color-scheme:dark;
  background-image:
    radial-gradient(900px 520px at 15% -10%,rgba(59,130,246,.13),transparent 60%),
    radial-gradient(760px 460px at 92% 8%,rgba(249,115,22,.08),transparent 62%);
  background-attachment:fixed;
}
a{color:var(--accent-lt);text-decoration:none}
a:hover{text-decoration:underline}

.shell{max-width:560px;margin:0 auto;padding:48px 18px 70px}
.shell.wide{max-width:920px}
.brand{text-align:center;margin-bottom:26px}
.brand .title{font-family:var(--serif);font-size:34px;line-height:1.1;letter-spacing:-.01em}
.brand .sub{font-size:13px;color:var(--ink-mut);padding-top:8px}

.glass{
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:24px 24px 26px;box-shadow:0 18px 50px rgba(0,0,0,.42);
}
.glass + .glass{margin-top:18px}
.grp{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mut);
  font-weight:600;margin-bottom:16px}
h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
p.lead{font-size:14px;color:var(--ink-lt);line-height:1.6;margin-bottom:18px}

.tabs{display:flex;gap:8px;margin-bottom:20px}
.tab{
  flex:1;padding:10px 12px;border-radius:11px;border:1px solid var(--border);
  background:var(--surf);color:var(--ink-mut);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .28s var(--ease);
}
.tab.on{background:var(--accent-pale);border-color:rgba(59,130,246,.42);color:var(--ink)}

.lab{display:block;font-size:12.5px;color:var(--ink-mut);margin:0 0 6px;font-weight:500}
.inp,select.inp,textarea.inp{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--border);
  background:rgba(10,15,31,.6);color:var(--ink);font:inherit;font-size:14.5px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.inp:focus{outline:none;border-color:rgba(59,130,246,.6);box-shadow:0 0 0 3px var(--accent-pale)}
.inp::placeholder{color:rgba(139,151,179,.65)}
.fld{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.hint{font-size:12px;color:var(--ink-mut);margin-top:6px;line-height:1.5}

.btn{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(59,130,246,.45);
  background:linear-gradient(180deg,rgba(59,130,246,.95),rgba(37,99,235,.95));
  color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .2s var(--ease),filter .2s var(--ease);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.ghost{background:var(--surf);border-color:var(--border);color:var(--ink-lt)}
.btn.small{width:auto;padding:9px 15px;font-size:13.5px}

.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;
  font-size:13px;color:var(--ink-mut);flex-wrap:wrap}

.msg{
  display:none;margin:0 0 16px;padding:12px 14px;border-radius:11px;
  font-size:13.5px;line-height:1.55;border:1px solid transparent;
}
.msg.on{display:block}
.msg.bad{background:var(--red-pale);border-color:rgba(239,68,68,.36);color:#fecaca}
.msg.good{background:var(--green-pale);border-color:rgba(34,197,94,.36);color:#bbf7d0}
.msg.note{background:var(--accent-pale);border-color:rgba(59,130,246,.34);color:var(--ink-lt)}
.msg.warn{background:var(--orange-pale);border-color:rgba(249,115,22,.36);color:#fed7aa}
.msg a{word-break:break-all}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid var(--border-hi);background:var(--surf);color:var(--ink-mut)}
.pill.green{background:var(--green-pale);border-color:rgba(34,197,94,.4);color:#bbf7d0}
.pill.orange{background:var(--orange-pale);border-color:rgba(249,115,22,.4);color:#fed7aa}
.pill.red{background:var(--red-pale);border-color:rgba(239,68,68,.4);color:#fecaca}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-mut);padding:0 10px 10px 0;font-weight:600}
table.tbl td{padding:11px 10px 11px 0;border-top:1px solid var(--border);vertical-align:middle}
.tblwrap{overflow-x:auto}

.eng{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surf);
  margin-bottom:13px}
.eng .engtop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.eng .engname{font-size:14px;font-weight:600}
.lnk{background:none;border:none;color:var(--ink-mut);font:inherit;font-size:12.5px;
  cursor:pointer;padding:4px 6px;border-radius:7px}
.lnk:hover{color:var(--red);background:var(--red-pale)}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(10,15,31,.86);
  backdrop-filter:blur(18px);position:sticky;top:0;z-index:70;flex-wrap:wrap}
.topbar .who{font-size:13px;color:var(--ink-mut)}
.topbar .who b{color:var(--ink);font-weight:600}
.topbar .acts{display:flex;gap:9px;align-items:center}

/* standing in a member's shoes, from the administrator's desk */
.impbar{
  padding:9px 18px;font-size:12.5px;text-align:center;
  background:var(--orange-pale);border-bottom:1px solid rgba(249,115,22,.4);color:#fed7aa;
}
.impbar b{color:#fff}
.impbar a{color:#fed7aa;text-decoration:underline;margin-left:8px}