/* === Core dark UI (Republika theme) === */
:root{
  --bg1:#0d1016;
  --bg2:#0d1016;
  --text:#ECEFF4;
  --muted:#A8B0BD;
  --outline:#262b33;
  --panel:#171b22;
  --field:#11161c;
  --field-border:#2a3039;
  --red:#e23a33;
  --red-2:#c62f2a;
  --blue:#1d4ed8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}

a{color:#9db6ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px 16px}

/* Header */
.header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.0))}
.header .brand{display:flex;align-items:center;gap:12px}
.header img{height:48px}
.header .right a{color:var(--text);opacity:.9}
.header .right a:hover{opacity:1}

/* Card */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid var(--outline);
  border-radius:18px;
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  padding:24px;
}

/* Titles */
h1.title{margin:6px 0 20px;font-size:44px;letter-spacing:.01em;font-weight:800}
h2{color:var(--text)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border:0;border-radius:12px;
  background:linear-gradient(180deg,#3a3f47,#2f343b);
  color:#e5e7eb;font-weight:700;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer; transition:filter .15s ease, transform .06s ease, background .15s ease;
}
.btn:hover{filter:saturate(1.05)}.btn:active{transform:translateY(1px)}
.btn.blue{background:linear-gradient(180deg,#3f66ff,#2a4de2)}
.btn.ghost{background:transparent;border:1px solid var(--outline);color:var(--text);box-shadow:none}

/* Inputs */
.label{display:block;margin:10px 0 6px;color:var(--text);opacity:.92}
.input{width:100%;padding:14px 14px;border-radius:12px;border:1px solid var(--field-border);background:var(--field);color:var(--text);outline:none;transition:border .15s ease, box-shadow .15s ease}
.input:focus{border-color:#2a4a88;box-shadow:0 0 0 4px rgba(45,96,190,.15)}
.input-wrap{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.75}
.input.pad-left{padding-left:42px}

/* Rows & misc */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footer{opacity:.75;text-align:center;padding:16px}
.small{font-size:13px;color:var(--muted)}
.brandline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brandline .circle{width:28px;height:28px;border-radius:999px;background:#21262f;display:grid;place-items:center;border:1px solid var(--outline);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.brandline .circle img{height:18px}
.brandline .name{font-weight:700;letter-spacing:.08em}

/* Autofill improvements */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0px 1000px var(--field) inset, 0 0 0 1px var(--field-border) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--text);
}
input:-moz-autofill {
  box-shadow: 0 0 0px 1000px var(--field) inset, 0 0 0 1px var(--field-border) inset;
  -moz-text-fill-color: var(--text);
}



/* === Global themed scrollbars (dark) === */
:root{
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255,255,255,.28);
  --scrollbar-thumb-hover: rgba(255,255,255,.36);
  --scrollbar-thumb-active: rgba(255,255,255,.44);
  --scrollbar-size: 10px;
}
*{ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar{ width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track{ background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
*::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover); }
*::-webkit-scrollbar-thumb:active{ background: var(--scrollbar-thumb-active); }
*::-webkit-scrollbar-corner{ background: transparent; }