:root{
  --bg1:#0b1220; --bg2:#0a1b2e;
  --card: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --brand1:#2563EB; --brand2:#06B6D4;
  --danger:#fda4af; --dangerBg: rgba(244,63,94,.14);
  --inputBg: rgba(0,0,0,.18);
  --shadow: rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --bg1:#f7fafc; --bg2:#eef2ff;
  --card: rgba(255,255,255,.78);
  --stroke: rgba(15,23,42,.12);
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);
  --danger:#be123c; --dangerBg: rgba(190,18,60,.10);
  --inputBg: rgba(15,23,42,.04);
  --shadow: rgba(2,6,23,.12);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(6,182,212,.28), transparent 65%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow:hidden;
}

.blob{
  position:absolute;
  width:520px; height:520px;
  border-radius: 999px;
  filter: blur(32px);
  opacity:.55;
  mix-blend-mode: screen;
  animation: float 10s ease-in-out infinite;
  pointer-events:none;
}
.blob.b1{ left:-160px; top:-140px; background: rgba(37,99,235,.65); animation-delay: -2s;}
.blob.b2{ right:-220px; top:30px; background: rgba(6,182,212,.55); animation-delay: -5s;}
.blob.b3{ left:20%; bottom:-260px; background: rgba(99,102,241,.30); animation-delay: -8s;}
@keyframes float{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(20px,-18px) scale(1.03);} }

.wrap{ position:relative; min-height:100vh; display:grid; place-items:center; padding:28px 16px; }
.shell{ width:min(980px, 100%); display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
.panel{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-radius: 22px;
  box-shadow: 0 30px 70px var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(10px);
}

/* Theme toggle */
.themeToggle{
  position:absolute; top:14px; right:14px;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  z-index: 5;
  cursor:pointer;
  user-select:none;
}
.themeToggle small{ color:var(--muted); font-size:12px; }
.switch{ width:46px; height:26px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,.10); position:relative; }
.knob{ width:22px; height:22px; border-radius:999px; position:absolute; top:50%; transform: translateY(-50%); left:2px; background: linear-gradient(135deg, var(--brand1), var(--brand2)); transition:.2s ease; }
html[data-theme="light"] .knob{ left:22px; }

/* Promo */
.promo{ padding:22px 22px 18px; }
.promoHeader{ display:flex; gap:14px; align-items:center; margin-bottom: 10px; }
.logoBox{ width:72px; height:72px; border-radius:22px; display:grid; place-items:center; background: linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow:0 18px 40px rgba(37,99,235,.22); overflow:hidden; position:relative; }
.logoBox::after{ content:""; position:absolute; inset:-40%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), transparent 60%); transform: rotate(10deg); opacity:.8; }
.brandName{ line-height:1.1; }
.brandName .name{ font-size:24px; font-weight:900; }
.brandName .tag{ font-size:12px; color:var(--muted); margin-top:2px; }

/* Stroke draw */
.draw path{
  fill:none;
  stroke: rgba(255,255,255,.95);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: draw 1.2s ease forwards;
}
.draw .p2{ animation-delay:.08s; }
.draw .p3{ animation-delay:.16s; }
.draw .p4{ animation-delay:.24s; }
.draw .p5{ animation-delay:.32s; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }

.headline{ font-size:32px; font-weight:900; margin:10px 0 10px; letter-spacing:-.6px; }
.sub{ color:var(--muted); margin:0 0 12px; max-width: 50ch; line-height:1.55; font-size:13px; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.chip{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); border-radius:999px; font-size:12px; }
.dot{ width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--brand1), var(--brand2)); }

.illusWrap{ margin-top:16px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); border-radius:18px; padding:14px; overflow:hidden; }
.illus{ width:100%; height:auto; display:block; }
.illus .stroke{ stroke: rgba(255,255,255,.85); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
html[data-theme="light"] .illus .stroke{ stroke: rgba(15,23,42,.75); }
.illus .accent{ stroke: rgba(6,182,212,.9); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.illus .soft{ fill: rgba(37,99,235,.10); }
.illusMove{ animation: illusMove 8s ease-in-out infinite; transform-origin:center; }
@keyframes illusMove{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-6px);} }

/* Login */
.login{ padding:26px; display:flex; flex-direction:column; justify-content:center; }
.title{ font-size:26px; font-weight:900; margin:0 0 6px; }
.desc{ margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.45; }
.alert{ margin:0 0 14px; border:1px solid rgba(244,63,94,.35); background: var(--dangerBg); color: var(--danger); border-radius:14px; padding:10px 12px; font-size:13px; }
label{ display:block; font-size:12px; color: rgba(255,255,255,.82); margin:10px 0 6px; }
html[data-theme="light"] label{ color: rgba(15,23,42,.75); }
.field{ width:100%; height:44px; border-radius:14px; border:1px solid var(--stroke); background: var(--inputBg); color: var(--text); padding:0 12px; outline:none; transition:.2s ease; }
.field:focus{ border-color: rgba(6,182,212,.6); box-shadow:0 0 0 5px rgba(6,182,212,.14); transform: translateY(-1px); }

.btn{ width:100%; height:46px; margin-top:14px; border:0; border-radius:14px; color:white; font-weight:900; cursor:pointer; background: linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow: 0 18px 40px rgba(37,99,235,.22); position:relative; overflow:hidden; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn .shine{ position:absolute; inset:-60% auto auto -40%; width:60%; height:200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: rotate(22deg); animation: shine 2.8s ease-in-out infinite; }
@keyframes shine{ 0%{ left:-60% } 55%{ left:120% } 100%{ left:120% } }

.hint{ margin-top:12px; font-size:12px; color:var(--muted); }
.foot{ margin-top:18px; font-size:11px; color: rgba(255,255,255,.55); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
html[data-theme="light"] .foot{ color: rgba(15,23,42,.55); }

@media (max-width:860px){ .shell{ grid-template-columns:1fr; } .promo{ display:none; } }


/* ===== Animated app title ===== */
.brand-anim{
  font-weight:900;
  letter-spacing:.2px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2), #22c55e, var(--brand1));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandShimmer 6s ease-in-out infinite;
}
@keyframes brandShimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.logoBox .logoImg{
  width:56px;
  height:56px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 24px var(--shadow);
}

/* Right-panel brand */
.loginBrand{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.loginLogo{ height:56px; width:56px; object-fit:cover; border-radius:16px; border:1px solid var(--stroke); box-shadow: 0 10px 24px var(--shadow); }
.loginLogo[alt="PadahOk"]{ width:auto; }