/* ====== Theme tokens ====== */
:root {
  --bg: #f6f7fb;
  --card: rgba(255,255,255,0.75);
  --text: #141622;
  --text-muted: #626678;
  --brand: #2a2185;
  --brand-2: #4ac0ff;
  --stroke: rgba(20,22,34,0.12);
  --input-bg: rgba(255,255,255,0.9);
  --input-text: #1a1c27;
  --icon: #6b6f80;
  --shadow: 0 10px 30px rgba(23,25,40,.18);
  --rail: #1d2740;
  --rail-glow: #36ffa8;
}

html[data-theme="dark"] {
  --bg: #0d1117;
  --card: rgba(17,22,31,0.72);
  --text: #eef2ff;
  --text-muted: #aab2c5;
  --brand: #7aa2ff;
  --brand-2: #36ffa8;
  --stroke: rgba(255,255,255,0.12);
  --input-bg: rgba(22,28,40,0.85);
  --input-text: #e7ebff;
  --icon: #b6bed3;
  --shadow: 0 12px 36px rgba(0,0,0,.55);
  --rail: #0f1525;
}

/* ====== Global ====== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

/* gradient + pattern */
.bg-gradient{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(74,192,255,.18), transparent 50%),
    radial-gradient(900px 500px at 110% 110%, rgba(54,255,168,.15), transparent 50%);
  pointer-events:none;
  z-index:-2;
}
.bg-pattern{
  position:fixed; inset:0;
  background-image: linear-gradient(120deg, transparent 96%, rgba(255,255,255,.05) 96%),
                    linear-gradient(-120deg, transparent 96%, rgba(255,255,255,.05) 96%);
  background-size: 22px 22px;
  opacity:.25;
  pointer-events:none;
  z-index:-1;
}

/* ====== Topbar ====== */
.topbar{
  position:fixed; inset:0 0 auto 0; height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px 0 16px;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--stroke);
  z-index:10;
}
.topbar .brand{ display:flex; gap:10px; align-items:center; font-weight:700; color:var(--brand);}
.topbar .brand img{ width:32px; height:32px; object-fit:cover; border-radius:8px; }
.controls{ display:flex; gap:10px; align-items:center;}
.icon-btn{
  height:40px; width:40px; border-radius:12px; border:1px solid var(--stroke);
  background: var(--card); color: var(--icon); display:grid; place-items:center;
  box-shadow: var(--shadow); cursor:pointer;
}
.icon-btn:hover{ transform: translateY(-1px); }
.select-wrap{
  display:flex; align-items:center; gap:8px;
  padding:0 10px; height:40px; border-radius:12px; border:1px solid var(--stroke);
  background:var(--card); color:var(--icon); box-shadow: var(--shadow);
}
.select-wrap select{
  border:none; outline:none; background:transparent; color:var(--text); font-weight:600;
}

/* ====== Layout ====== */
.wrap{
  min-height:100dvh;
  display:grid; place-items:center;
  padding: 96px 16px 32px;
}
.card{
  width:min(480px, 92vw);
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 26px 22px 20px;
  position:relative;
  overflow:hidden;
}
.card-header{ text-align:center; margin-bottom:14px;}
.card-logo{ width:64px; height:64px; border-radius:18px; object-fit:cover; box-shadow: var(--shadow); }
h1{ font-size: clamp(22px, 2.6vw, 28px); margin:10px 0 6px; }
.subtitle{ color: var(--text-muted); margin:0; }

/* ====== Form ====== */
.form{ display:grid; gap:12px; margin-top:6px; }
.form-group{ display:grid; gap:8px; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; border:0; padding:0; }

.input{
  display:grid; grid-template-columns: 38px 1fr 42px; align-items:center;
  background: var(--input-bg); border:1px solid var(--stroke); border-radius:14px;
}
.input i{ color:var(--icon); display:grid; place-items:center; }
.input input{
  border:none; outline:none; background:transparent; color:var(--input-text);
  padding:12px 8px; font-size:16px;
}
.input .peek{
  border:none; background:transparent; color:var(--icon); cursor:pointer; height:100%;
}
.input .peek:hover{ color:var(--brand); }

.error{
  display:flex; gap:8px; align-items:center;
  padding:10px 12px; border-radius:12px;
  background: color-mix(in srgb, #ff3b30 14%, var(--card));
  color: #821a16; border:1px solid color-mix(in srgb, #ff3b30 28%, var(--stroke));
}
html[data-theme="dark"] .error{
  color:#ffd7d5;
}

.btn-primary{
  margin-top:4px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; border-radius:14px; border:1px solid var(--stroke);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color:white; font-weight:700; box-shadow: var(--shadow); cursor:pointer;
}
.btn-primary:active{ transform: translateY(1px); }

/* ====== Rail deco ====== */
.rail{
  margin-top:18px; height:14px; border-radius:7px; background: var(--rail);
  position:relative; overflow:hidden; border:1px solid var(--stroke);
}
.rail::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.07) 46px 62px);
}
.train{
  position:absolute; left:-120px; top:1px; width:120px; height:12px; border-radius:6px;
  background: linear-gradient(90deg, var(--rail-glow), transparent 60%);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rail-glow) 60%, transparent));
  animation: run 3.6s linear infinite;
}
@keyframes run{
  to{ transform: translateX(calc(100% + 140px)); }
}

/* ====== Loader ====== */
.loader{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center; gap:14px;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  z-index: 20;
}
.loader .bar{
  width:min(360px, 72vw); height:8px; border-radius:6px; border:1px solid var(--stroke);
  background: var(--card); overflow:hidden;
}
.loader .fill{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  animation: load 1.4s ease-in-out infinite;
}
.loader .label{ color:var(--text-muted); font-weight:700; letter-spacing:.3px; }
@keyframes load{
  0%{ width:0%; }
  60%{ width:94%; }
  100%{ width:100%; }
}

/* ====== Responsive ====== */
@media (max-width: 520px){
  .topbar{ padding: 0 10px; }
  .select-wrap{ height:38px; }
  .icon-btn{ height:38px; width:38px; }
}

/* Utility */
a,button,select{ -webkit-tap-highlight-color: transparent; }