/* ==========================================================
   Shortlink Panel
   ========================================================== */

:root{
  --bg:#eef2ff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#2563eb;
  --brand2:#7c3aed;
  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --sidebar:#111827;
  --radius:14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}

a{color:var(--brand)}

code{
  background:#f1f5f9;
  padding:2px 6px;
  border-radius:6px;
  font-size:12px;
  word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

h1{font-size:26px;margin:0 0 4px;font-weight:800}
h2{font-size:18px;margin:0 0 14px;font-weight:800}
h3{font-size:15px;margin:22px 0 10px;font-weight:800}
.muted{color:var(--muted);font-size:13px}
.mt{margin-top:18px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.break{word-break:break-all;max-width:280px}
.plain{list-style:none;padding:0;margin:10px 0}

/* ---------------- ALERT ---------------- */
.alert{
  padding:12px 16px;
  border-radius:var(--radius);
  margin-bottom:16px;
  font-weight:600;
  font-size:13px;
  border:1px solid transparent;
}
.alert-ok   {background:#dcfce7;color:#166534;border-color:#bbf7d0}
.alert-warn {background:#fef3c7;color:#92400e;border-color:#fde68a}
.alert-err  {background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* ---------------- LOGIN ---------------- */
.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.login-hero{
  background:radial-gradient(circle at 20% 20%,#4338ca 0,#111827 38%,#020617 100%);
  color:#fff;
  padding:70px;
  display:flex;
  align-items:center;
}
.login-hero-inner{max-width:520px}
.login-hero .logo{font-size:54px;margin-bottom:18px}
.login-hero h1{font-size:44px;color:#fff;margin:0 0 16px;font-weight:900;letter-spacing:-1px}
.hero-desc{font-size:17px;line-height:1.7;color:#cbd5e1;margin-bottom:30px}
.hero-list{list-style:none;padding:0;margin:0}
.hero-list li{display:flex;gap:14px;align-items:center;margin:16px 0;color:#e5e7eb}
.hero-list span{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:11px;background:rgba(99,102,241,.25);
  display:grid;place-items:center;color:#93c5fd;font-weight:900;
}

.login-formside{
  display:flex;align-items:center;justify-content:center;
  padding:40px;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.login-card{
  width:100%;max-width:410px;
  background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:34px;
  box-shadow:0 26px 70px rgba(15,23,42,.12);
}
.login-card h2{text-align:center;font-size:26px;margin:0 0 6px}
.login-card .muted{text-align:center;margin-bottom:24px}

label{
  display:block;margin:16px 0 7px;
  font-size:12px;font-weight:800;color:#334155;
}
label small{font-weight:600;color:var(--muted)}

input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;height:46px;
  border:1px solid #cbd5e1;border-radius:11px;
  padding:0 13px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:#6366f1;
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
select{cursor:pointer}

button,.btn{
  display:inline-block;
  border:0;border-radius:11px;
  padding:12px 18px;
  font-weight:800;font-size:13px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;text-decoration:none;
  font-family:inherit;
}
button:hover,.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:#f1f5f9;color:#334155}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:9px}
.foot{text-align:center;color:#94a3b8;font-size:12px;margin-top:22px}

/* ---------------- LAYOUT ---------------- */
.app{display:flex;min-height:100vh}

.sidebar{
  width:236px;flex:0 0 236px;
  background:var(--sidebar);
  color:#cbd5e1;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar .brand{
  padding:20px 20px 18px;
  font-weight:900;font-size:16px;color:#fff;
  border-bottom:1px solid #1f2937;
}
.sidebar nav{flex:1;padding:12px 10px;overflow-y:auto}
.nav-link{
  display:flex;gap:11px;align-items:center;
  padding:11px 13px;margin-bottom:3px;
  border-radius:10px;
  color:#cbd5e1;text-decoration:none;
  font-size:13.5px;font-weight:600;
}
.nav-link:hover{background:#1f2937;color:#fff}
.nav-link.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.sidebar-foot{
  display:flex;gap:11px;align-items:center;
  padding:16px 18px;border-top:1px solid #1f2937;
}
.avatar{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;color:#fff;font-weight:900;
}
.uname{color:#fff;font-size:13px;font-weight:700}
.urole{color:#94a3b8;font-size:11px}

.content{flex:1;padding:28px;max-width:1400px;min-width:0}

/* ---------------- SECTION ---------------- */
.section{display:none;margin-bottom:34px}
.section.active{display:block}

/* ---------------- CARD STAT ---------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:14px;margin-bottom:22px;
}
.card-stat{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:17px;
}
.card-stat .k{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:800;
}
.card-stat .v{font-size:28px;font-weight:900;margin-top:5px}
.card-stat .v small{font-size:15px;color:var(--muted);font-weight:700}
.card-stat .v.warnv{color:var(--warn)}

.panel{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:22px;margin-bottom:20px;
}
.panel-form{margin-bottom:20px}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1;min-width:165px}
.row .row-btn{flex:0 0 auto}
.row label{margin-top:0}

/* ---------------- TABLE ---------------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;color:var(--muted);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbff}
table.kv th{width:190px;text-transform:none;font-size:13px;color:var(--ink);font-weight:700}

.inline{display:inline-block;margin-right:4px}
.inline-form{display:inline-block;margin-bottom:14px}

/* ---------------- BADGE ---------------- */
.badge{
  display:inline-block;padding:3px 9px;
  border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;
}
.b-ok{background:#dcfce7;color:#166534}
.b-warn{background:#fef3c7;color:#92400e}
.b-bad{background:#fee2e2;color:#991b1b}
.b-mut{background:#f1f5f9;color:#475569}

.copy{cursor:pointer}
.copy:hover{background:#e0e7ff;color:#3730a3}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  background:#f1f5f9;border-radius:999px;
  padding:6px 13px;font-size:12px;
}
.pill strong{color:var(--brand)}

/* ---------------- CENTER PAGE (404, install) ---------------- */
.center-page{
  min-height:100vh;display:grid;place-items:center;padding:30px;
}
.card-page{
  width:100%;max-width:460px;background:#fff;
  border:1px solid var(--line);border-radius:22px;
  padding:32px;box-shadow:0 20px 60px rgba(15,23,42,.1);
  text-align:center;
}
.card-page form{text-align:left}
.card-page button{width:100%;margin-top:20px}
.card-page h3{text-align:left}

/* ---------------- TOAST ---------------- */
.toast{
  position:fixed;right:20px;bottom:20px;
  background:#111827;color:#fff;
  padding:12px 20px;border-radius:11px;
  font-weight:700;font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .2s;
  z-index:99;max-width:340px;
}
.toast.show{opacity:1}

/* ---------------- RESPONSIF ---------------- */
@media (max-width:900px){
  .login-page{grid-template-columns:1fr}
  .login-hero{display:none}
  .app{flex-direction:column}
  .sidebar{
    width:100%;flex:none;height:auto;position:static;
    flex-direction:row;align-items:center;overflow-x:auto;
  }
  .sidebar nav{display:flex;gap:4px;padding:8px}
  .nav-link{white-space:nowrap;padding:8px 11px}
  .nav-link span{display:none}
  .sidebar-foot{border:0;padding:8px 14px}
  .content{padding:18px}
}

/* ==========================================================
   TEMA ORBIT — dashboard + login
   ========================================================== */
:root{
  --space-0:#050816;
  --space-1:#0b1230;
  --space-2:#111b42;
  --space-blue:#61b7ff;
  --space-cyan:#8ce8ff;
  --space-violet:#9b8cff;
  --space-gold:#ffb86b;
}

/* Dashboard bernuansa ruang angkasa, tetapi tetap kontras untuk tabel. */
body:not(.login-page){
  background:
    radial-gradient(circle at 80% 0%,rgba(72,91,190,.25),transparent 30%),
    radial-gradient(circle at 15% 85%,rgba(31,131,175,.16),transparent 28%),
    var(--space-0);
  color:#e7efff;
}
body:not(.login-page) .sidebar{
  background:linear-gradient(180deg,#080d22 0%,#0d1532 55%,#11132c 100%);
  border-right:1px solid rgba(140,190,255,.15);
}
body:not(.login-page) .sidebar .brand{
  border-bottom-color:rgba(140,190,255,.16);
  letter-spacing:.4px;
}
body:not(.login-page) .nav-link{color:#aebedf}
body:not(.login-page) .nav-link:hover{background:rgba(97,183,255,.12);color:#fff}
body:not(.login-page) .nav-link.active{
  background:linear-gradient(135deg,#2563b9,#6955c9);
  box-shadow:0 8px 24px rgba(64,115,220,.25);
}
body:not(.login-page) .content{position:relative}
body:not(.login-page) .content::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(#a7d8ff 1px,transparent 1px);
  background-size:83px 83px;
  mask-image:linear-gradient(135deg,black,transparent 72%);
}
body:not(.login-page) h1,body:not(.login-page) h2,
body:not(.login-page) h3{color:#f4f7ff}
body:not(.login-page) .muted{color:#9caed2}
body:not(.login-page) .panel,
body:not(.login-page) .card-stat{
  background:linear-gradient(145deg,rgba(24,37,82,.87),rgba(13,20,49,.92));
  border-color:rgba(145,190,255,.18);
  box-shadow:0 16px 45px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
}
body:not(.login-page) .card-stat .k{color:#9caed2}
body:not(.login-page) .card-stat .v{color:#fff}
body:not(.login-page) td{border-bottom-color:rgba(145,190,255,.1)}
body:not(.login-page) tbody tr:hover{background:rgba(97,183,255,.07)}
body:not(.login-page) th{color:#9caed2;border-bottom-color:rgba(145,190,255,.2)}
body:not(.login-page) code{background:rgba(2,8,25,.7);color:#b9eaff}
body:not(.login-page) .pill{background:rgba(97,183,255,.11);color:#dceaff}
body:not(.login-page) .pill strong{color:var(--space-cyan)}
body:not(.login-page) .btn-ghost{background:rgba(174,190,220,.12);color:#e7efff}
body:not(.login-page) input[type=text],body:not(.login-page) input[type=password],
body:not(.login-page) input[type=number],body:not(.login-page) select,
body:not(.login-page) textarea{
  background:rgba(5,10,28,.72);color:#f0f5ff;border-color:rgba(145,190,255,.27);
}
body:not(.login-page) label{color:#c4d2ee}
body:not(.login-page) .alert-ok{background:rgba(22,163,74,.18);color:#b9f7c9;border-color:rgba(102,238,137,.25)}
body:not(.login-page) .alert-warn{background:rgba(217,119,6,.18);color:#ffe0a6;border-color:rgba(255,184,107,.28)}
body:not(.login-page) .alert-err{background:rgba(220,38,38,.18);color:#ffc1c1;border-color:rgba(255,130,130,.28)}

/* Login: planet seperti wallpaper malam. */
.login-space{background:#030615}
.login-space .login-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse at 58% 45%,rgba(43,74,164,.38),transparent 28%),
    radial-gradient(ellipse at 10% 0%,rgba(117,82,190,.28),transparent 34%),
    linear-gradient(145deg,#030615 0%,#091333 56%,#120d2a 100%);
}
.login-space .login-hero::after{
  content:"";position:absolute;inset:-30%;z-index:-1;opacity:.35;
  background:repeating-linear-gradient(110deg,transparent 0 120px,rgba(139,211,255,.05) 121px 122px);
  transform:rotate(-10deg);
}
.space-stars,.space-stars::before,.space-stars::after{
  position:absolute;inset:0;content:"";pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px);
  background-size:137px 137px;opacity:.5;z-index:-1;
}
.space-stars::before{background-size:211px 211px;background-position:31px 70px;opacity:.45}
.space-stars::after{background-size:83px 83px;background-position:14px 35px;opacity:.18}
.planet-scene{position:absolute;right:8%;top:12%;width:430px;height:430px;z-index:-1;opacity:.95}
.planet-glow{position:absolute;inset:6%;border-radius:50%;background:rgba(52,168,255,.2);filter:blur(36px)}
.planet{
  position:absolute;inset:16%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 30% 22%,#8ce8ff 0 3%,#418bd3 18%,#263c9c 53%,#0a174a 78%);
  box-shadow:-26px -16px 42px rgba(133,224,255,.6),30px 25px 75px rgba(0,0,0,.85),inset -25px -30px 35px rgba(0,0,0,.45);
  animation:orbit-float 9s ease-in-out infinite;
}
.planet::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 40% 44%,transparent 0 17px,rgba(120,203,255,.16) 19px 23px,transparent 25px 42px);opacity:.7;transform:rotate(-20deg)}
.planet-light{position:absolute;width:58%;height:76%;left:-17%;top:-7%;border-radius:50%;background:rgba(219,249,255,.6);filter:blur(17px)}
.planet-crater{position:absolute;border-radius:50%;background:rgba(10,35,105,.27);box-shadow:inset 4px 5px 9px rgba(1,10,44,.35)}
.crater-a{width:25%;height:13%;right:17%;top:32%;transform:rotate(-20deg)}
.crater-b{width:18%;height:9%;left:30%;bottom:23%;transform:rotate(14deg)}
.crater-c{width:12%;height:7%;right:29%;bottom:17%}
.planet-ring{position:absolute;left:0;right:0;top:48%;height:20%;border:17px solid rgba(177,208,255,.24);border-left-color:transparent;border-right-color:rgba(236,216,255,.38);border-radius:50%;transform:rotate(-18deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.login-hero-inner{position:relative;z-index:2}
.login-hero .logo{color:#8ce8ff;text-shadow:0 0 24px #55cfff;font-size:56px}
.login-hero .eyebrow{color:#8ce8ff;font-size:10px;font-weight:900;letter-spacing:2.6px;margin-bottom:10px}
.login-space .login-formside{position:relative;overflow:hidden;background:linear-gradient(145deg,#070b1e,#121a39)}
.login-space .login-formside::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(74,134,255,.25),transparent 65%);filter:blur(5px);right:-240px;top:-180px}
.login-space .login-card{position:relative;background:rgba(13,22,52,.8);border-color:rgba(155,196,255,.22);backdrop-filter:blur(22px);box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.login-space .login-card h2{color:#fff}
.login-space .login-card .muted,.login-space .login-card .foot{color:#9eafd4}
.login-space .login-card label{color:#cfdbf2}
.login-space .login-card input{background:rgba(3,8,24,.75);color:#fff;border-color:rgba(145,190,255,.27)}
.login-space .login-card input::placeholder{color:#7384aa}
.password-wrap{position:relative}
.password-wrap input{padding-right:52px}
.password-eye{position:absolute;right:7px;top:7px;width:32px;height:32px;padding:0;border-radius:9px;background:rgba(97,183,255,.12);color:#8ce8ff;font-size:17px;z-index:2}
.password-eye:hover{background:rgba(97,183,255,.25)}
.password-beam{position:absolute;left:2px;right:2px;top:0;height:2px;background:linear-gradient(90deg,transparent,#8ce8ff,transparent);opacity:0;filter:blur(1px);transition:opacity .25s;pointer-events:none}
.password-focused .password-beam{opacity:1;animation:password-scan 2.2s ease-in-out infinite}
.password-focused .password-wrap::after{content:"";position:absolute;inset:-15px;border-radius:17px;box-shadow:0 0 28px rgba(97,183,255,.18);pointer-events:none}

@keyframes password-scan{0%,100%{top:2px}50%{top:44px}}
@keyframes orbit-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}

@media (max-width:900px){
  .planet-scene{width:300px;height:300px;right:-80px;top:6%;opacity:.55}
  .login-space .login-hero{display:flex;min-height:310px;padding:38px 28px}
}

/* ==========================================================
   ORBIT AGENCY — porcelain blue / cinnabar / gold
   Desain terang dengan aksen awan oriental yang halus.
   ========================================================== */
:root{
  --porcelain:#f4f8ff;
  --porcelain-2:#e8f1ff;
  --ink-blue:#17345e;
  --ink-soft:#637a9d;
  --blue-main:#2466c7;
  --blue-deep:#174b98;
  --cinnabar:#c94c55;
  --cinnabar-soft:#fff0f1;
  --imperial:#c79535;
  --line-blue:#d7e4f5;
}

body:not(.login-page){
  background:
    radial-gradient(circle at 86% -8%,rgba(125,177,244,.38),transparent 28%),
    radial-gradient(circle at 4% 98%,rgba(201,76,85,.09),transparent 24%),
    linear-gradient(135deg,#f8fbff 0%,#edf5ff 52%,#f7fbff 100%);
  color:var(--ink-blue);
}
body:not(.login-page)::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.24;
  background-image:
    radial-gradient(ellipse at 15% 18%,transparent 0 31px,rgba(36,102,199,.12) 32px 34px,transparent 35px 70px),
    radial-gradient(ellipse at 82% 76%,transparent 0 26px,rgba(201,76,85,.10) 27px 29px,transparent 30px 62px);
  background-size:280px 220px,330px 260px;
  background-position:0 0,80px 60px;
}
body:not(.login-page) .sidebar{
  width:258px;flex-basis:258px;
  background:linear-gradient(180deg,#ffffff 0%,#f1f7ff 60%,#edf4fd 100%);
  color:var(--ink-blue);border-right:1px solid var(--line-blue);
  box-shadow:10px 0 35px rgba(43,91,151,.07);
}
body:not(.login-page) .sidebar .brand{
  min-height:82px;padding:18px 20px;display:flex;align-items:center;gap:11px;
  color:var(--ink-blue);border-bottom:1px solid var(--line-blue);letter-spacing:.3px;
}
.brand-seal{
  width:38px;height:38px;display:grid;place-items:center;border-radius:13px;
  color:#fff;background:linear-gradient(145deg,var(--blue-main),var(--blue-deep));
  box-shadow:0 7px 17px rgba(36,102,199,.25);font-family:serif;font-size:22px;
}
body:not(.login-page) .brand strong{display:block;font-size:15px;letter-spacing:1.7px;color:var(--blue-deep)}
body:not(.login-page) .brand small{display:block;margin-top:1px;color:var(--cinnabar);font-size:8px;letter-spacing:1.5px;font-weight:900}
body:not(.login-page) .sidebar nav{padding:18px 12px}
.nav-caption{padding:0 12px 7px;color:#91a5c2;font-size:9px;font-weight:900;letter-spacing:1.7px}
.nav-caption-gap{margin-top:19px}
body:not(.login-page) .nav-link{
  color:#557095;border-radius:12px;margin-bottom:4px;padding:11px 13px;
  font-size:13px;font-weight:750;transition:all .18s ease;
}
body:not(.login-page) .nav-link:first-letter{color:var(--blue-main)}
body:not(.login-page) .nav-link:hover{background:#e3efff;color:var(--blue-deep);transform:translateX(2px)}
body:not(.login-page) .nav-link.active{
  color:#fff;background:linear-gradient(135deg,var(--blue-main),#4389df);
  box-shadow:0 9px 20px rgba(36,102,199,.22);transform:none;
}
body:not(.login-page) .sidebar-foot{border-top:1px solid var(--line-blue);padding:14px 18px;background:rgba(255,255,255,.55)}
body:not(.login-page) .avatar{background:linear-gradient(145deg,var(--cinnabar),#e27a67);box-shadow:0 5px 12px rgba(201,76,85,.2)}
body:not(.login-page) .uname{color:var(--ink-blue)}
body:not(.login-page) .urole{color:#8095b2}
body:not(.login-page) .content{max-width:1500px;padding:34px 38px}
body:not(.login-page) h1,body:not(.login-page) h2,body:not(.login-page) h3{color:var(--ink-blue)}
body:not(.login-page) h1{letter-spacing:-.7px}
body:not(.login-page) .muted{color:var(--ink-soft)}
body:not(.login-page) .panel,body:not(.login-page) .card-stat{
  background:rgba(255,255,255,.88);border-color:var(--line-blue);
  box-shadow:0 12px 32px rgba(48,93,148,.08),inset 0 1px 0 #fff;
}
body:not(.login-page) .card-stat{position:relative;overflow:hidden}
body:not(.login-page) .card-stat::after{content:"";position:absolute;right:-22px;top:-30px;width:80px;height:80px;border:1px solid rgba(36,102,199,.12);border-radius:50%}
body:not(.login-page) .card-stat .k{color:#7890b2}
body:not(.login-page) .card-stat .v{color:var(--blue-deep)}
body:not(.login-page) .card-stat .v.warnv{color:var(--cinnabar)}
body:not(.login-page) th{color:#7189a9;border-bottom-color:var(--line-blue)}
body:not(.login-page) td{border-bottom-color:#edf3fb}
body:not(.login-page) tbody tr:hover{background:#f1f7ff}
body:not(.login-page) code{background:#edf4ff;color:var(--blue-deep);border:1px solid #deebfb}
body:not(.login-page) input[type=text],body:not(.login-page) input[type=password],body:not(.login-page) input[type=number],body:not(.login-page) select,body:not(.login-page) textarea{background:#fff;color:var(--ink-blue);border-color:#cbdced}
body:not(.login-page) label{color:#496486}
body:not(.login-page) button,body:not(.login-page) .btn{background:linear-gradient(135deg,var(--blue-main),#468bdf);box-shadow:0 7px 16px rgba(36,102,199,.15)}
body:not(.login-page) .btn-ghost{background:#eef5ff;color:var(--blue-deep);box-shadow:none;border:1px solid #d4e3f6}
body:not(.login-page) .pill{background:#edf5ff;color:#557095}
body:not(.login-page) .pill strong{color:var(--cinnabar)}
body:not(.login-page) .toast{background:var(--blue-deep)}

/* Login terang: biru porselen dengan simpul awan merah-emas. */
.login-space{background:#f5f9ff}
.login-space .login-hero{
  background:
    radial-gradient(circle at 76% 20%,rgba(255,220,155,.7),transparent 10%),
    radial-gradient(circle at 20% 78%,rgba(201,76,85,.13),transparent 23%),
    linear-gradient(145deg,#dfeeff 0%,#8fb9ec 55%,#3e73ba 100%);
  color:var(--ink-blue);
}
.login-space .login-hero::after{opacity:.5;background:repeating-radial-gradient(ellipse at 20% 30%,transparent 0 26px,rgba(255,255,255,.2) 27px 29px,transparent 30px 76px);transform:rotate(-12deg)}
.login-space .space-stars,.login-space .space-stars::before,.login-space .space-stars::after{background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px);opacity:.7}
.login-space .planet-scene{opacity:.55}
.login-space .planet{background:radial-gradient(circle at 30% 22%,#fff2c7 0 3%,#e8b66b 18%,#bf5962 52%,#7c2744 78%);box-shadow:-26px -16px 42px rgba(255,232,174,.55),30px 25px 75px rgba(36,68,125,.3),inset -25px -30px 35px rgba(94,27,62,.35)}
.login-space .planet-glow{background:rgba(255,210,125,.35)}
.login-space .planet-ring{border-color:rgba(255,245,205,.52);border-left-color:transparent}
.login-space .login-hero .logo{color:var(--cinnabar);text-shadow:0 0 18px rgba(255,243,190,.9)}
.login-space .login-hero .eyebrow{color:var(--blue-deep)}
.login-space .login-hero h1{color:var(--blue-deep)}
.login-space .hero-desc{color:#294a77}
.login-space .hero-list li{color:#23446f}
.login-space .hero-list span{background:rgba(255,255,255,.48);color:var(--cinnabar)}
.login-space .login-formside{background:linear-gradient(145deg,#f7fbff,#e6f1ff)}
.login-space .login-formside::before{background:radial-gradient(circle,rgba(75,139,221,.2),transparent 65%)}
.login-space .login-card{background:rgba(255,255,255,.91);border-color:#d5e4f6;box-shadow:0 28px 70px rgba(45,91,145,.14)}
.login-space .login-card h2{color:var(--ink-blue)}
.login-space .login-card .muted,.login-space .login-card .foot{color:#7890ad}
.login-space .login-card label{color:#496486}
.login-space .login-card input{background:#fff;color:var(--ink-blue);border-color:#cbdced}
.login-space .login-card input::placeholder{color:#9aacc4}
.login-space .password-eye{background:#edf5ff;color:var(--blue-main)}

@media (max-width:900px){
  body:not(.login-page) .content{padding:22px 18px}
  body:not(.login-page) .sidebar{box-shadow:0 5px 18px rgba(43,91,151,.1)}
  body:not(.login-page) .sidebar nav{padding:8px}
  .nav-caption{display:none}
}

/* ==========================================================
   DRAGON GATE — merah cinnabar + emas
   ========================================================== */
:root{
  --gate-red:#a92332;
  --gate-red-deep:#7d1725;
  --gate-red-soft:#fff1ef;
  --gate-gold:#d6a64b;
  --gate-cream:#fffaf2;
}
body:not(.login-page){
  background:
    radial-gradient(circle at 92% 0%,rgba(214,166,75,.22),transparent 25%),
    radial-gradient(circle at 0% 100%,rgba(169,35,50,.15),transparent 28%),
    linear-gradient(135deg,#fffaf2 0%,#fff5f1 48%,#f8e8e5 100%);
  color:#5b2430;
}
body:not(.login-page)::before{
  opacity:.2;
  background-image:
    radial-gradient(ellipse at 15% 18%,transparent 0 30px,rgba(169,35,50,.18) 31px 34px,transparent 35px 72px),
    radial-gradient(ellipse at 82% 76%,transparent 0 27px,rgba(214,166,75,.18) 28px 31px,transparent 32px 64px);
}
body:not(.login-page) .sidebar{
  width:266px;flex-basis:266px;
  background:linear-gradient(180deg,#b52b38 0%,#98232f 54%,#7d1725 100%);
  color:#fff5df;border-right:4px solid var(--gate-gold);
  box-shadow:10px 0 30px rgba(125,23,37,.18);
}
body:not(.login-page) .sidebar .brand{
  min-height:94px;color:#fff8e8;border-bottom:1px solid rgba(255,220,139,.38);
  position:relative;overflow:hidden;
}
body:not(.login-page) .sidebar .brand::after{
  content:"";position:absolute;left:14px;right:14px;bottom:7px;height:3px;
  background:linear-gradient(90deg,transparent,var(--gate-gold),transparent);opacity:.8;
}
.brand-seal{
  background:linear-gradient(145deg,#f1c866,#ad6d1c);color:#7d1725;
  border:2px solid #ffe7a6;box-shadow:0 5px 0 #751521,0 8px 18px rgba(57,8,15,.25);
  font-size:23px;font-weight:900;
}
body:not(.login-page) .brand strong{color:#fff8e8;letter-spacing:2px}
body:not(.login-page) .brand small{color:#ffd98c}
body:not(.login-page) .sidebar nav{padding:19px 13px}
.nav-caption{color:#f5c982}
body:not(.login-page) .nav-link{color:#ffe6c3}
body:not(.login-page) .nav-link:hover{background:rgba(255,220,139,.16);color:#fff9eb;transform:translateX(2px)}
body:not(.login-page) .nav-link.active{
  color:#7d1725;background:linear-gradient(135deg,#ffe39a,#d9a844);
  box-shadow:0 8px 19px rgba(63,9,18,.24);font-weight:900;
}
body:not(.login-page) .sidebar-foot{border-top:1px solid rgba(255,220,139,.38);background:rgba(91,10,22,.28);padding:14px 15px;position:relative;flex-wrap:wrap}
body:not(.login-page) .avatar{background:linear-gradient(145deg,#f3c96c,#ae6b1d);color:#7d1725;border:2px solid #ffe5a0}
body:not(.login-page) .uname{color:#fff8e8}
body:not(.login-page) .urole{color:#ffdca1}
.sidebar-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.sidebar-actions a{width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(255,225,157,.55);border-radius:9px;color:#ffe3a0;text-decoration:none;font-weight:900;background:rgba(91,10,22,.22)}
.sidebar-actions a:hover{background:#f5ca6d;color:#7d1725}
.sidebar-actions .logout-door{border-color:#ffd56f;background:linear-gradient(145deg,#dbad4d,#b37521);color:#7d1725;font-size:18px;box-shadow:0 3px 0 #681521}
body:not(.login-page) .content{padding:34px 38px}
body:not(.login-page) h1,body:not(.login-page) h2,body:not(.login-page) h3{color:#7d1725}
body:not(.login-page) .muted{color:#8d6570}
body:not(.login-page) .panel,body:not(.login-page) .card-stat{background:rgba(255,250,242,.94);border-color:#efd6b4;box-shadow:0 12px 32px rgba(125,23,37,.08),inset 0 1px 0 #fff}
body:not(.login-page) .card-stat .k{color:#9a6d58}
body:not(.login-page) .card-stat .v{color:#98232f}
body:not(.login-page) .card-stat .v.warnv{color:#c56c23}
body:not(.login-page) th{color:#9a6d58;border-bottom-color:#efd6b4}
body:not(.login-page) td{border-bottom-color:#f5e5d5}
body:not(.login-page) tbody tr:hover{background:#fff0ec}
body:not(.login-page) code{background:#fff0ec;color:#8b2330;border-color:#f1d5c7}
body:not(.login-page) input[type=text],body:not(.login-page) input[type=password],body:not(.login-page) input[type=number],body:not(.login-page) select,body:not(.login-page) textarea{background:#fffdfa;color:#5b2430;border-color:#e5c9ae}
body:not(.login-page) label{color:#7d4a4e}
body:not(.login-page) button,body:not(.login-page) .btn{background:linear-gradient(135deg,#b52b38,#8b1f2d);box-shadow:0 7px 16px rgba(169,35,50,.2)}
body:not(.login-page) .btn-ghost{background:#fff1e7;color:#8b2330;border-color:#efd0b6;box-shadow:none}
body:not(.login-page) .pill{background:#fff0e7;color:#8d5960}
body:not(.login-page) .pill strong{color:#b52b38}
body:not(.login-page) .alert-warn{background:#fff0df;color:#8b4b1c;border-color:#efc987}
body:not(.login-page) .alert-ok{background:#fff4dc;color:#7d5c1b;border-color:#ead08b}
body:not(.login-page) .toast{background:#7d1725}

/* Gapura merah-emas pada halaman login. */
.login-space{background:#fff8ef}
.login-space .login-hero{background:linear-gradient(145deg,#8b1f2d 0%,#b52b38 55%,#d56b51 100%);color:#fff7e5;position:relative}
.login-space .login-hero::before{
  content:"";position:absolute;right:12%;top:12%;width:270px;height:300px;
  border:13px solid #f0c66a;border-bottom:0;border-radius:145px 145px 0 0;
  box-shadow:0 0 0 5px rgba(126,23,37,.35),0 18px 0 -7px #d39b39,0 0 35px rgba(255,220,133,.28);
  opacity:.75;transform:perspective(500px) rotateY(-9deg);
}
.login-space .login-hero::after{opacity:.35;background:repeating-radial-gradient(ellipse at 20% 30%,transparent 0 26px,rgba(255,224,155,.23) 27px 29px,transparent 30px 76px);transform:rotate(-12deg)}
.login-space .space-stars,.login-space .space-stars::before,.login-space .space-stars::after{background-image:radial-gradient(circle,rgba(255,235,170,.95) 0 1px,transparent 1.5px);opacity:.7}
.login-space .planet-scene{opacity:.2}
.login-space .login-hero .logo{color:#ffd878;text-shadow:0 0 18px rgba(255,239,174,.9)}
.login-space .login-hero .eyebrow{color:#ffe5a0}
.login-space .login-hero h1{color:#fff8e8}
.login-space .hero-desc{color:#ffe8c5}
.login-space .hero-list li{color:#fff0d7}
.login-space .hero-list span{background:rgba(255,220,139,.18);color:#ffd878;border:1px solid rgba(255,220,139,.35)}
.login-space .login-formside{background:linear-gradient(145deg,#fffaf2,#f9e8df)}
.login-space .login-formside::before{background:radial-gradient(circle,rgba(201,76,85,.15),transparent 65%)}
.login-space .login-card{background:rgba(255,252,246,.94);border-color:#efd6b4;box-shadow:0 28px 70px rgba(125,23,37,.14)}
.login-space .login-card h2{color:#7d1725}
.login-space .login-card .muted,.login-space .login-card .foot{color:#9a6d58}
.login-space .login-card label,.dragon-label{color:#7d4a4e}
.dragon-label span{color:#b52b38;font-size:16px;margin-right:4px}
.login-space .login-card input{background:#fffdfa;color:#5b2430;border-color:#e5c9ae}
.login-space .login-card input:focus{border-color:#b52b38;box-shadow:0 0 0 4px rgba(181,43,56,.12)}
.login-space .password-eye{background:#fff0df;color:#a92332;border:1px solid #efd0b6}
.login-dragon{
  position:absolute;z-index:3;right:12%;top:18%;font-size:46px;line-height:1;
  opacity:0;filter:drop-shadow(0 7px 5px rgba(125,23,37,.22));
  transform:translate(0,20px) rotate(-8deg);pointer-events:none;
}
.password-focused .login-dragon{opacity:.9;animation:dragon-hover 2.8s ease-in-out infinite}
.dragon-launch .login-dragon{opacity:1;animation:dragon-fly 1.25s cubic-bezier(.2,.75,.35,1) forwards}
@keyframes dragon-hover{0%,100%{transform:translate(0,8px) rotate(-8deg)}50%{transform:translate(-14px,-10px) rotate(5deg)}}
@keyframes dragon-fly{0%{transform:translate(0,10px) rotate(-8deg);opacity:1}45%{transform:translate(-150px,-120px) rotate(-20deg);opacity:1}100%{transform:translate(-58vw,-80vh) rotate(-35deg);opacity:0}}

@media (max-width:900px){
  body:not(.login-page) .sidebar{border-right:0;border-bottom:3px solid var(--gate-gold)}
  body:not(.login-page) .sidebar-foot{min-width:178px}
  .sidebar-actions{margin-left:8px}
  .login-space .login-hero::before{right:-60px;top:10%;opacity:.42}
  .login-dragon{right:8%;top:8%;font-size:36px}
}