/* Verifin — shell v4: sidebar berkelompok, kartu akun, cari menu, rail lipat.
   Dua tema, SATU layout: tema terang (default, mengikuti mockup) & tema gelap
   (kulit gelap dari layout yang sama) lewat [data-theme="dark"]. */
:root{
  --bg:#dcefe0; --bg2:#e9f5ec; --shell:#ffffff; --card:#ffffff; --ink:#152219; --sub:#6d7f71;
  --green:#0e9f6e; --green-d:#0b7a55; --deep:#0b3d2c; --deep2:#0a2f22;
  --gold:#e9b949; --goldtext:#9a7400; --mint:#e7f4ec; --line:#e3ede5;
  --red:#d64545; --field:#f4f8f5; --shadow:0 12px 32px rgba(11,61,44,.10);
  --side-ink:#dcefe2; --side-sub:#8fb89d; --otp-bg:#0b3d2c; --otp-digit:#ffd94d;
  /* kulit sidebar — acuan mockup v4 resmi: terang = panel putih, teks gelap */
  --side-bg:#ffffff; --side-ink2:#152219; --side-sub2:#6d7f71; --side-line:#e3ede5;
  --side-field:#f4f8f5; --side-hover:#eef6f0;
}
[data-theme="dark"]{
  --bg:#060f0a; --bg2:#0a1a11; --shell:#0c1a12; --card:#10231a; --ink:#e8f3ec; --sub:#8fae99;
  --mint:#14301f; --line:#1d3325; --field:#0d2016; --goldtext:#e9b949;
  --shadow:0 12px 32px rgba(0,0,0,.45); --otp-bg:#04150c;
  /* kulit sidebar gelap — panel hijau sangat gelap, teks terang */
  --side-bg:#0a1a11; --side-ink2:#e8f3ec; --side-sub2:#8fae99; --side-line:#1d3325;
  --side-field:#0d2016; --side-hover:#14301f;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;}
/* Rangka aplikasi TETAP setinggi layar (refine UX 8 Nov): halaman jendela
   TIDAK ikut bergulir — yang bergulir hanya wilayah isi (main) dan, di
   halaman yang memintanya, wilayah daftar di dalamnya (mis. daftar
   layanan di Beli Nomor). */
html,body{height:100%;}
body{background:linear-gradient(135deg,var(--bg),var(--bg2));color:var(--ink);height:100vh;overflow:hidden;padding:22px;}
a{color:inherit;}
button{font:inherit;}
.ic{width:20px;height:20px;flex:none;}

/* ---------- shell ---------- */
.shell{background:var(--shell);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;max-width:1440px;margin:0 auto;display:flex;height:calc(100vh - 44px);}

/* ---------- sidebar v4: hide/unhide mengikuti cursor ----------
   Keadaan dasar (tak terkunci): rail ikon 84px di dalam alur.
   Cursor masuk area sidebar (body.side-peek) -> .side-inner melebar 268px
   MELAYANG di atas konten (konten tidak bergeser). Cursor keluar -> ciut lagi.
   Chevron mengunci (body.side-locked): aside ikut melebar di dalam alur.
   Kulit mengikuti tema: terang = panel putih; gelap = panel hijau gelap. */
.sidebar{position:relative;width:84px;flex:none;z-index:40;transition:width .18s ease;}
body.side-locked .sidebar{width:268px;}
.side-inner{position:absolute;top:0;left:0;bottom:0;width:84px;display:flex;flex-direction:column;padding:20px 14px 14px;background:var(--side-bg);color:var(--side-ink2);border-right:1px solid var(--side-line);overflow:hidden;transition:width .18s ease;}
body.side-open .side-inner{width:268px;}
body.side-peek .side-inner{box-shadow:28px 0 44px rgba(6,30,18,.20);}
.brand{display:flex;align-items:center;gap:10px;padding:2px 4px 14px;}
.brand .mark{width:36px;height:36px;border-radius:11px;background:transparent;display:grid;place-items:center;color:#fff;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap;}
.brand-name{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--side-ink2);}
.brand-tag{font-size:10.5px;font-weight:600;color:var(--side-sub2);}
.side-toggle{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--side-line);background:transparent;color:var(--side-sub2);display:grid;place-items:center;cursor:pointer;flex:none;padding:0;}
.side-toggle:hover{color:var(--green);border-color:var(--green);}
.side-toggle .ic{width:15px;height:15px;transition:transform .18s ease;}
body:not(.side-open) .side-toggle .ic{transform:rotate(180deg);}
body.side-locked .side-toggle{color:var(--green);border-color:var(--green);background:var(--mint);}
.account-card{margin:0 0 12px;background:var(--side-bg);border:1px solid var(--side-line);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;}
.account-card .avatar{width:38px;height:38px;border-radius:50%;background:var(--deep);color:#ffe9a8;display:grid;place-items:center;font-weight:700;border:2px solid var(--gold);flex:none;}
.account-card .nm{font-weight:700;font-size:13.5px;color:var(--side-ink2);line-height:1.25;white-space:nowrap;}
.account-card .bl{font-size:12px;color:var(--side-sub2);white-space:nowrap;}
.account-card .acc-arrow{margin-left:auto;color:var(--side-sub2);flex:none;}
.menu-search{display:flex;align-items:center;gap:8px;background:var(--side-field);border:1px solid var(--side-line);border-radius:12px;padding:9px 12px;margin-bottom:6px;color:var(--side-sub2);}
.menu-search input{background:transparent;border:none;outline:none;color:var(--side-ink2);font-size:13.5px;width:100%;}
.menu-search input::placeholder{color:var(--side-sub2);}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;}
.nav .group-label{font-size:10.5px;letter-spacing:.16em;font-weight:800;color:var(--side-sub2);padding:14px 10px 6px;white-space:nowrap;}
.nav a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;color:var(--side-ink2);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:2px;white-space:nowrap;}
.nav a:hover{background:var(--side-hover);}
.nav a.on{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;}
.nav a .cnt{margin-left:auto;background:var(--gold);color:#231a00;font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;}
.nav a .nav-badge{margin-left:auto;background:var(--gold);color:#231a00;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:2px 7px;}
.nav button.nav-install{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border:0;border-radius:12px;background:none;color:var(--side-ink2);font:inherit;font-size:14px;font-weight:600;margin:4px 0 2px;white-space:nowrap;cursor:pointer;text-align:left;}
.nav button.nav-install:hover{background:var(--side-hover);}
.nav button.nav-install .install-state{margin-left:auto;font-size:11px;font-weight:600;color:var(--side-sub2);}
.nav button.nav-install[disabled]{opacity:.55;cursor:default;}
body:not(.side-open) .nav button.nav-install{justify-content:center;padding:12px;}
body:not(.side-open) .nav button.nav-install span{display:none;}

/* rail mode (sidebar ciut — keadaan dasar & saat cursor di luar) */
body:not(.side-open) .brand{flex-direction:column;gap:8px;padding:2px 0 10px;}
body:not(.side-open) .brand-text,body:not(.side-open) .menu-search,body:not(.side-open) .nav .group-label,body:not(.side-open) .nav a span,body:not(.side-open) .account-card .meta,body:not(.side-open) .account-card .acc-arrow{display:none;}
body:not(.side-open) .side-toggle{margin-left:0;}
body:not(.side-open) .nav a{justify-content:center;padding:12px;}
body:not(.side-open) .account-card{justify-content:center;padding:8px;}

/* ---------- main column ---------- */
.col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
header{display:flex;align-items:center;gap:16px;padding:18px 26px 12px;}
header .search{flex:1;max-width:480px;display:flex;align-items:center;gap:9px;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--sub);font-size:14px;}
header .search input{background:transparent;border:none;outline:none;flex:1;color:var(--ink);font-size:14px;}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.mock-chip{background:#fdf3d7;color:#8a6400;border:1px solid var(--gold);font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 11px;letter-spacing:.03em;}
.icon-btn{width:38px;height:38px;border-radius:12px;background:var(--field);border:1px solid var(--line);display:grid;place-items:center;color:var(--sub);cursor:pointer;}
.icon-btn:hover{color:var(--green);}
.saldo-pill{display:flex;align-items:center;gap:9px;border:1.5px solid var(--gold);color:var(--goldtext);font-weight:700;border-radius:999px;padding:7px 8px 7px 15px;font-size:13.5px;background:transparent;}
.saldo-pill .plus{width:24px;height:24px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:800;text-decoration:none;}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--deep);color:#ffe9a8;display:grid;place-items:center;font-weight:700;border:2px solid var(--gold);}
main{flex:1;min-height:0;overflow-y:auto;padding:6px 26px 28px;}
/* Halaman "penuh": judul + keterangan tetap, sisanya mengisi tinggi layar.
   Dipakai halaman berdaftar panjang agar gulirannya lokal, bukan sehalaman. */
.page-fill{height:100%;display:flex;flex-direction:column;min-height:0;}
.page-fill .fill-grid{flex:1;min-height:0;align-items:stretch;}
.svc-scroll{flex:1;min-height:0;overflow-y:auto;display:grid;gap:14px;align-content:start;padding-right:6px;}
.table-scroll{flex:1;min-height:0;overflow:auto;}
/* scrollbar tipis bertema untuk semua wilayah gulir lokal */
main,.svc-scroll,.table-scroll,.nav{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
main::-webkit-scrollbar,.svc-scroll::-webkit-scrollbar,.table-scroll::-webkit-scrollbar,.nav::-webkit-scrollbar{width:9px;height:9px;}
main::-webkit-scrollbar-thumb,.svc-scroll::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
main::-webkit-scrollbar-thumb:hover,.svc-scroll::-webkit-scrollbar-thumb:hover,.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--green);border:2px solid transparent;background-clip:content-box;}
h1{font-size:29px;letter-spacing:-.02em;}
.hello{color:var(--sub);font-size:14.5px;margin:4px 0 20px;}

/* ---------- cards & generic ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 4px 14px rgba(11,61,44,.05);}
.label{font-size:11.5px;letter-spacing:.12em;color:var(--sub);font-weight:700;text-transform:uppercase;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;font-weight:700;border-radius:12px;padding:10px 18px;font-size:14px;text-decoration:none;}
.btn-gold{background:var(--gold);color:#231a00;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-d);}
.btn-ghost{background:transparent;color:var(--green);}
.btn-red{background:transparent;color:var(--red);}
.btn-ogold{background:transparent;border:1.5px solid var(--gold);color:var(--goldtext);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;}
.chip-wait{background:#fdf3d7;color:#8a6400;}
.chip-ok{background:#dcf5e8;color:#0b7a55;}
.chip-bad{background:#fbe3e3;color:#b23232;}
.chip-info{background:var(--mint);color:var(--deep);}
[data-theme="dark"] .chip-ok{background:#0f3524;color:#4ade9c;}
[data-theme="dark"] .chip-bad{background:#3a1414;color:#f28b8b;}

.saldo-card{grid-column:span 4;background:linear-gradient(130deg,var(--deep),#116647);color:#fff;border:none;position:relative;overflow:hidden;}
.saldo-card::after{content:"";position:absolute;width:230px;height:230px;border:34px solid rgba(233,185,73,.20);border-radius:50%;right:-90px;top:-110px;}
.saldo-card .label{color:#bfe3cd;}
.saldo-big{font-size:31px;font-weight:800;color:var(--gold);margin:8px 0 4px;letter-spacing:-.01em;}
/* Panel bayar deposit QRIS otomatis (gelombang 7) */
.dep-pay-grid{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start;}
.dep-pay-qr{display:grid;gap:10px;justify-items:center;}
.dep-qr{width:230px;height:230px;border-radius:14px;border:1px solid var(--line);background:#fff;padding:10px;image-rendering:pixelated;}
.dep-qrstr{font-size:10.5px;color:var(--sub);word-break:break-all;max-width:230px;text-align:center;}
@media (max-width:760px){.dep-pay-grid{grid-template-columns:1fr;}.dep-pay-qr{justify-items:center;}}
.saldo-sub{font-size:13px;color:#bfe3cd;margin-bottom:14px;}
.quick{grid-column:span 4;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.quick a{background:var(--mint);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px;padding:18px 6px;}
.quick .ic{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--green);box-shadow:0 4px 10px rgba(11,61,44,.10);}
.chart{grid-column:span 4;}
.chart .row{display:flex;justify-content:space-between;align-items:baseline;}
.chart .pct{font-size:26px;font-weight:800;}

.prow{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);}
.prow:last-child{border-bottom:none;}
.prow .tic{width:40px;height:40px;border-radius:12px;background:var(--mint);color:var(--deep);display:grid;place-items:center;font-weight:800;flex:none;}
.prow img.tic{object-fit:cover;}
.prow .prow-word{height:23px;width:auto;display:block;}
.prow .prow-lock{height:23px;width:auto;display:block;}
.prow .prow-badge{height:36px;width:auto;display:block;}
[data-theme="dark"] .prow .tic{color:var(--gold);}
.prow .nm{font-weight:700;font-size:15px;}
.prow .mt{color:var(--sub);font-size:13px;margin-top:2px;}
.prow .mt b{color:var(--green);font-weight:700;}
.badge{background:var(--green);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;letter-spacing:.04em;vertical-align:2px;margin-left:7px;}
.prow .pr{margin-left:auto;font-weight:800;color:var(--goldtext);font-size:16px;white-space:nowrap;}

/* katalog / beli */
.fld label{display:block;font-size:11.5px;letter-spacing:.12em;color:var(--sub);font-weight:700;text-transform:uppercase;margin-bottom:7px;}
.fld select,.fld input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:14px;padding:12px 15px;font-size:14.5px;color:var(--ink);}
.form-card{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);}
.form-card.f4{grid-template-columns:repeat(4,1fr);}
.svc{display:flex;align-items:center;gap:13px;padding:16px 20px;}
/* ubin layanan: logo brand (glyph putih di ubin warna brand) atau inisial */
.svc-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;font-weight:800;font-size:16px;}
.tic-plain{background:var(--mint);color:var(--deep);}
[data-theme="dark"] .svc-ic.tic-plain{color:var(--gold);}
.tic-brand img{display:block;}
.prow .tic-brand img{width:22px;height:22px;}
.svc-ic.tic-brand img{width:24px;height:24px;}
.svc .nm{font-weight:700;font-size:15.5px;}
.svc .mt{color:var(--sub);font-size:13px;margin-top:3px;}
.svc .mt b{color:var(--green);}
.svc .pr{margin-left:auto;font-weight:800;color:var(--goldtext);font-size:16.5px;white-space:nowrap;}

/* tabel */
table{width:100%;border-collapse:collapse;font-size:14px;}
th{ text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);padding:10px 12px;border-bottom:1px solid var(--line);}
.table-scroll thead th{position:sticky;top:0;background:var(--card);z-index:1;}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.empty-box{text-align:center;padding:30px 20px;color:var(--sub);}
.empty-box .eic{width:62px;height:62px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;margin:0 auto 12px;}

/* ---------- ORDER / OTP ---------- */
.order-card{grid-column:span 12;}
.order-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.svc-ic{width:52px;height:52px;border-radius:16px;background:var(--mint);display:grid;place-items:center;color:var(--green);flex:none;}
.order-top .name{font-weight:700;font-size:17px;}
.order-top .num{color:var(--sub);font-size:15px;margin-top:2px;font-variant-numeric:tabular-nums;}
.hold-note{margin-top:14px;background:var(--mint);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--ink);}
.hold-note b{color:var(--goldtext);}
.order-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;align-items:center;}
.countdown{margin-left:auto;text-align:right;}
.countdown .t{font-size:25px;font-weight:800;color:var(--goldtext);font-variant-numeric:tabular-nums;}
.cd-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:14px;}
.cd-bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width 1s linear;}

/* state menunggu */
.otp-wait{flex:1;min-width:260px;text-align:center;}
.otp-box-wait{background:var(--field);border:1.5px dashed #bcd6c3;border-radius:16px;padding:16px;font-size:25px;letter-spacing:.55em;font-weight:800;color:var(--sub);text-indent:.55em;}
.pulse-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e9a400;animation:pl 1.2s ease-in-out infinite;}
@keyframes pl{50%{opacity:.25;}}

/* state OTP TERISI — bintang halaman ini:
   kode BESAR kontras tinggi (digit emas di atas hijau gelap), tombol salin paling menonjol. */
.otp-filled{flex:1;min-width:300px;background:var(--otp-bg);border-radius:20px;padding:20px 18px 16px;text-align:center;box-shadow:0 14px 34px rgba(11,61,44,.35);border:1px solid rgba(233,185,73,.45);}
.otp-filled .label{color:#8fd0ab;letter-spacing:.18em;}
.otp-digits{display:flex;justify-content:center;gap:8px;margin:14px 0 6px;flex-wrap:nowrap;}
.otp-digits span{width:52px;height:66px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1.5px solid rgba(233,185,73,.55);border-radius:14px;font-size:42px;font-weight:800;color:var(--otp-digit);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,217,77,.35);}
.otp-filled small{display:block;color:#bfe3cd;font-size:12.5px;margin-bottom:14px;}
.btn-copy{width:100%;font-size:16.5px;padding:14px 18px;border-radius:14px;box-shadow:0 8px 20px rgba(233,185,73,.35);}
.btn-copy.done{background:var(--green);color:#fff;box-shadow:none;}
.otp-exp{margin-top:12px;color:#ffd94d;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;}

/* statistik dashboard */
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:14px;}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;}
.bars .bar{width:70%;max-width:30px;border-radius:8px 8px 4px 4px;background:#f2cd65;}
.bars .bar.g{background:var(--green);}
.bars span{font-size:11px;color:var(--sub);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.stat .v{font-size:23px;font-weight:800;margin-top:6px;}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--deep);color:#fff;font-weight:600;font-size:14px;border-radius:14px;padding:12px 20px;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow);z-index:50;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:900px){
  body{padding:10px;}
  .shell{height:calc(100vh - 20px);}
  /* Di layar kecil kolom Beli Nomor menumpuk: daftar layanan tetap
     bergulir sendiri dengan tinggi dibatasi, filter tetap di atasnya. */
  .svc-scroll{max-height:56vh;flex:none;}
  .page-fill .fill-grid{overflow:visible;}
  .form-card,.form-card.f4{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .saldo-card,.quick,.chart{grid-column:span 12;}
  header .search{display:none;}
  .otp-digits span{width:44px;height:58px;font-size:36px;}
}
@media (max-width:700px){
  .sidebar{display:none;}
  main{padding:6px 16px 22px;}
  header{padding:14px 16px 8px;}
}

/* ---------- layar masuk / daftar (gelombang 2) ---------- */
#authGate{display:none;}
#authGate.show{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:linear-gradient(135deg,var(--bg),var(--bg2));padding:18px;overflow-y:auto;}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:28px 26px;width:min(400px,94vw);}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.auth-brand .mark{width:42px;height:42px;border-radius:13px;background:transparent;display:grid;place-items:center;color:#fff;flex:none;}
.auth-name{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);}
.auth-tag{font-size:12.5px;color:var(--sub);font-weight:600;}
.auth-tabs{display:flex;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px;}
.auth-tabs button{flex:1;border:none;background:transparent;padding:9px;border-radius:9px;font-weight:700;font-size:14px;color:var(--sub);cursor:pointer;}
.auth-tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(11,61,44,.10);}
#authForm{display:grid;gap:13px;}
.auth-err{background:#fbe3e3;color:#b23232;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;margin:0;}
[data-theme="dark"] .auth-err{background:#3a1414;color:#f28b8b;}
.auth-submit{width:100%;padding:13px 18px;font-size:15px;}

/* ---------- gelombang 5A: promo, level Royal, admin ---------- */
.promo-chip{background:linear-gradient(135deg,#f6d06b,var(--gold));color:#231a00;font-size:12px;font-weight:800;border-radius:999px;padding:6px 12px;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lvl-chip{display:inline-block;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.07em;border-radius:999px;padding:2px 8px;background:var(--side-field);color:var(--side-sub2);border:1px solid var(--side-line);}
.lvl-chip.royal{background:linear-gradient(135deg,#f6d06b,var(--gold));color:#231a00;border-color:var(--gold);}
.lvl-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0 8px;}
.lvl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#f2cd65);border-radius:99px;}
.strike{text-decoration:line-through;color:var(--sub);font-weight:600;font-size:.82em;margin-right:7px;}
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px;white-space:nowrap;}
.tag-promo{background:#fde8e8;color:#c62828;}
[data-theme="dark"] .tag-promo{background:#3a1414;color:#f28b8b;}
.tag-royal{background:linear-gradient(135deg,#f6d06b,var(--gold));color:#231a00;}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.stat-card .v{font-size:25px;font-weight:800;margin-top:6px;letter-spacing:-.01em;}
.stat-card .sub{color:var(--sub);font-size:12.5px;margin-top:3px;}
@media (max-width:900px){ .stat-grid{grid-template-columns:1fr 1fr;} }

/* kartu akun: klik -> Pengaturan; ikon keluar kecil di ujung */
.account-card{cursor:pointer;}
.acc-logout{margin-left:8px;width:30px;height:30px;border-radius:9px;border:1px solid var(--side-line);background:transparent;color:var(--side-sub2);display:grid;place-items:center;cursor:pointer;flex:none;padding:0;}
.acc-logout:hover{color:var(--red);border-color:var(--red);}
body:not(.side-open) .account-card .acc-logout{display:none;}

/* ================= gelombang 5B: pengumuman, chat, royal, bukti sosial ================= */
.icon-btn{position:relative;}
.bell-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--card);pointer-events:none;}
.modal-ov{position:fixed;inset:0;z-index:120;background:rgba(6,25,15,.48);display:grid;place-items:center;padding:18px;}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);width:min(560px,94vw);max-height:86vh;overflow-y:auto;padding:24px;}
.modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px;}
.modal-head h3{font-size:18px;flex:1;}
.modal-x{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--sub);font-size:18px;line-height:1;cursor:pointer;flex:none;}
.modal-x:hover{color:var(--red);border-color:var(--red);}
.ann-item{border-bottom:1px solid var(--line);padding:14px 0 16px;}
.ann-item:first-of-type{padding-top:6px;}
.ann-item:last-child{border-bottom:none;padding-bottom:2px;}
.ann-img{width:100%;border-radius:14px;margin:10px 0 2px;border:1px solid var(--line);display:block;}
.spop{position:fixed;left:22px;bottom:22px;z-index:45;display:flex;gap:11px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;max-width:min(370px,calc(100vw - 44px));opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s;}
.spop.show{opacity:1;transform:none;}
.spop-av{width:38px;height:38px;border-radius:50%;background:var(--deep);color:#ffe9a8;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;}
.spop-tx{font-size:13.5px;line-height:1.5;color:var(--ink);}
.spop-x{width:24px;height:24px;border-radius:8px;border:none;background:transparent;color:var(--sub);font-size:16px;line-height:1;cursor:pointer;flex:none;padding:0;}
.spop-x:hover{color:var(--red);}
.chat-msgs{display:grid;gap:10px;max-height:380px;overflow-y:auto;padding:8px 2px;margin:10px 0 12px;}
.chat-day{text-align:center;font-size:11.5px;color:var(--sub);font-weight:700;letter-spacing:.06em;margin:6px 0 2px;}
.msg{max-width:78%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;}
.msg small{display:block;font-size:11px;margin-top:4px;opacity:.75;text-align:right;}
.msg .msg-from{display:block;font-size:11px;font-weight:700;margin:0 0 3px;opacity:.8;text-align:left;}
.msg-me{justify-self:end;background:var(--green);color:#fff;border-bottom-right-radius:5px;}
.msg-admin{justify-self:start;background:var(--field);border:1px solid var(--line);border-bottom-left-radius:5px;}
.topik-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px;}
.topik-chips button{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.topik-chips button.on{background:var(--green);border-color:var(--green);color:#fff;}
.chat-form{display:flex;gap:10px;align-items:flex-end;}
.chat-form textarea{flex:1;background:var(--field);border:1px solid var(--line);border-radius:14px;padding:12px 15px;font-size:14.5px;color:var(--ink);font-family:inherit;resize:vertical;min-height:44px;}
.fld textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:14px;padding:12px 15px;font-size:14.5px;color:var(--ink);font-family:inherit;resize:vertical;}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px;}
.podium-card{text-align:center;padding:24px 16px;}
.podium-rank{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--goldtext);text-transform:uppercase;}
.podium-av{width:56px;height:56px;border-radius:50%;background:var(--deep);color:#ffe9a8;display:grid;place-items:center;font-weight:800;font-size:22px;margin:12px auto 10px;}
.podium-amt{font-size:20px;font-weight:800;margin-top:10px;}
@media (max-width:760px){ .podium{grid-template-columns:1fr;} .msg{max-width:88%;} }

/* ================= gelombang 5D: rangka admin PERSIS pola Viralin =================
   Semua kelas khusus admin berawalan .adm- dan hanya dipakai admin.html,
   supaya tampilan panel pembeli (index.html) tidak berubah sama sekali.
   Bentuk yang ditiru dari admin Viralin (gaya Finova): satu cangkang
   radius besar di atas latar kontras; di dalamnya RAIL KIRI berisi blok
   merek + kartu uang (Total Saldo Pengguna, Saldo Order, kartu aksen
   terang Pendapatan, lalu khusus dashboard Deposit Menunggu & Chat
   Terbaru); baris atas kolom utama = navigasi PIL selebar kolom tengah
   + tombol utilitas selebar kolom kanan; isi halaman mengisi kolom
   tengah+kanan menyatu; di bawah cangkang menggantung TIGA KAPSUL
   ringkasan sejajar kolom dengan gelombang cangkang membungkus
   kapsul tengah. Warna tetap identitas Verifin v4 (zamrud + emas,
   dua tema).
   Gelombang 5E (penyelarasan tema terang + menu atas + istilah,
   meniru admin Viralin ASLI tema terang): pil navigasi = batang aksen
   TERANG teks gelap dengan item aktif nyaris-hitam; kapsul bawah
   MENGIKUTI TEMA (terang = putih, gelap = gelap); lencana hitung =
   latar zamrud pucat + teks gelap di tema terang; ikon ubin Aksi
   Cepat putih; chip pemilik di rail dihapus (identitas di avatar
   utilitas); kartu Pendapatan memakai watermark ikon Roda Kode. */

/* Atribut hidden harus selalu menang atas display kelas (layar kunci &
   lencana hitungan bergantung padanya). */
[hidden]{display:none!important;}

body.adm{height:auto;min-height:100vh;overflow:visible;padding:26px 16px 190px;}
body.adm .toast{bottom:30px;z-index:70;}
body.adm #admView{flex:none;overflow:visible;padding:0;min-height:0;}

/* --- cangkang & bingkai --- */
.adm-shell{position:relative;background:var(--shell);border:1px solid var(--line);border-radius:40px;box-shadow:var(--shadow);max-width:1440px;margin:0 auto;}
.adm-frame{position:relative;z-index:2;display:grid;grid-template-columns:268px minmax(0,1fr);gap:20px;align-items:start;padding:26px 26px 108px;}
.adm-wave{position:absolute;left:0;top:calc(100% - 66px);width:100%;height:150px;z-index:1;pointer-events:none;}

/* --- rail kiri: merek + kartu uang (5E: chip pemilik dihapus meniru
   Viralin asli; identitas pemilik pindah ke avatar utilitas atas) --- */
.adm-rail{display:flex;flex-direction:column;gap:18px;min-width:0;}
.adm-rail-stack{display:flex;flex-direction:column;gap:18px;min-width:0;}
.adm-brand{display:flex;align-items:center;gap:11px;padding:2px 2px 0;}
.adm-mark{width:40px;height:40px;border-radius:12px;background:transparent;display:grid;place-items:center;color:#fff;flex:none;}
.adm-brand-text{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap;}
.adm-brand-name{font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink);}
.adm-brand-tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);}

/* --- kolom utama: baris atas (pil tengah + utilitas kanan) --- */
.adm-main{display:flex;flex-direction:column;gap:20px;min-width:0;}
/* Kolom pil selebar sisa baris, kolom utilitas selebar isinya.
   Gelombang 9 (perbaikan pas): batang pil TIDAK lagi meregang
   mengikuti kolomnya — lihat .adm-nav di bawah. */
.adm-toprow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;}
.adm-utils{display:flex;align-items:center;gap:5px;justify-content:flex-end;flex-wrap:nowrap;}
.adm-utils .btn{white-space:nowrap;}
.adm-utils .btn-sm{padding-left:10px;padding-right:10px;}
/* Utilitas atas-kanan ala Viralin (5E): tombol tema BULAT berlatar
   kartu, avatar lingkaran AKSEN berisi inisial, "Ke Panel Pembeli"
   pil outline ringkas, "Keluar" teks kecil merah. */
.adm-utils .icon-btn{width:38px;height:38px;border-radius:50%;background:var(--card);}
.adm-utils .icon-btn .ic{width:19px;height:19px;}
/* Gelombang 8: ikon roda gigi (Pengaturan) & gelembung chat (Chat
   Bantuan) sebagai TOMBOL IKON di kanan pil — pola topact Viralin.
   Keadaan aktif = pil nyaris-hitam seperti item pil aktif; lencana
   chat belum dibaca = pil emas kecil di sudut ikon. */
.adm-utils a.icon-btn{display:grid;place-items:center;text-decoration:none;color:var(--ink);position:relative;flex:none;}
.adm-utils a.icon-btn.on{background:#0b2e21;color:#fff;}
.adm-utils a.icon-btn .cnt{position:absolute;top:-4px;right:-5px;background:var(--gold);color:#231a00;font-size:10px;font-weight:800;border-radius:999px;padding:0 5px;line-height:16px;min-width:16px;text-align:center;}
.adm-utils .avatar{width:38px;height:38px;font-size:14px;background:linear-gradient(135deg,#35c48d,#0e9f6e);color:#0b2e21;border:none;}
.adm-utils .btn-ogold{border-radius:999px;padding:7px 10px;font-size:12.5px;}
.adm-utils #admLogout{padding:6px 6px;font-size:12.5px;}

/* --- navigasi pil (gelombang 5E, pola Viralin ASLI: batang AKSEN
   TERANG gradasi zamrud cerah #35C48D→#0E9F6E dengan teks GELAP;
   item aktif = pil nyaris-hitam #0B2E21 teks putih. Skema ini sama
   di dua tema, persis pil Viralin. Lencana angka: gelap di atas
   batang terang, emas di atas pil aktif gelap — tetap terbaca.) --- */
/* Perbaikan pas (permintaan Owner): batang pil MEMBUNGKUS isinya —
   justify-self:start membuat lebarnya pas = jumlah lebar item +
   padding, tanpa sisa ruang hijau sesudah item terakhir (persis
   .navpill Viralin yang selebar isinya). max-width:100% + overflow-x
   yang sudah ada menjaga lebar sempit: pil mentok selebar kolomnya
   dan bergeser di dalam wadahnya sendiri, tidak memotong paksa. */
.adm-nav{display:flex;gap:2px;align-items:center;justify-self:start;max-width:100%;min-width:0;background:linear-gradient(120deg,#35c48d 0%,#0e9f6e 100%);border-radius:999px;padding:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:0 10px 24px rgba(11,61,44,.22);min-height:58px;}
.adm-nav::-webkit-scrollbar{display:none;}
.adm-nav a{display:flex;align-items:center;gap:6px;padding:9px 9px;border-radius:999px;color:#0b2e21;text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap;flex:none;}
.adm-nav a .ic{width:18px;height:18px;}
.adm-nav a:hover{background:rgba(11,46,33,.10);}
.adm-nav a.on{background:#0b2e21;color:#fff;}
.adm-nav a .cnt{background:#0b2e21;color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;}
.adm-nav a.on .cnt{background:var(--gold);color:#231a00;}

/* --- tiga kapsul ringkasan di bawah cangkang (gelombang 5E:
   MENGIKUTI TEMA seperti kapsul Viralin — terang = kapsul PUTIH,
   teks gelap, lingkaran ikon pucat, tombol panah bulat EMAS;
   gelap = kapsul gelap gradasi seperti 5D. Gelombang SVG &
   kesejajaran kolom dipertahankan.) --- */
.adm-pills{position:absolute;left:26px;right:26px;top:calc(100% + 18px);display:grid;grid-template-columns:268px minmax(0,1fr) 320px;gap:20px;z-index:6;}
.adm-pill{height:68px;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);color:var(--ink);padding:0 12px 0 20px;box-shadow:0 14px 30px rgba(11,61,44,.14);min-width:0;}
.adm-pill-side{border-radius:999px;}
.adm-pill-center{border-radius:20px;padding:0 20px;}
.adm-pill-ic{width:42px;height:42px;border-radius:50%;flex:none;background:var(--mint);border:1px solid var(--line);display:grid;place-items:center;color:var(--green-d);}
.adm-pill .n{font-size:19px;font-weight:800;line-height:1.15;white-space:nowrap;letter-spacing:-.01em;color:var(--ink);}
.adm-pill .l{font-size:11.5px;color:var(--sub);white-space:nowrap;}
.adm-pill-go{margin-left:auto;width:42px;height:42px;border-radius:50%;flex:none;background:var(--gold);color:#231a00;display:grid;place-items:center;font-size:17px;font-weight:800;text-decoration:none;}
[data-theme="dark"] .adm-pill{background:linear-gradient(150deg,var(--deep),var(--deep2));border-color:rgba(233,185,73,.28);color:#e8f3ec;box-shadow:0 18px 36px rgba(4,21,12,.35);}
[data-theme="dark"] .adm-pill-ic{background:rgba(255,255,255,.07);border-color:rgba(233,185,73,.30);color:var(--gold);}
[data-theme="dark"] .adm-pill .n{color:#fff;}
[data-theme="dark"] .adm-pill .l{color:#8fb89d;}
.adm-pill-stats{display:flex;flex:1;justify-content:space-evenly;align-items:center;gap:10px;min-width:0;}
@media (max-width:1150px){
  .adm-pills{grid-template-columns:1fr 1fr;}
  .adm-pill-center{display:none;}
}
@media (max-width:720px){
  .adm-pills{grid-template-columns:1fr;}
  .adm-pill-side:last-child{display:none;}
  .adm-wave{display:none;}
}

/* --- kartu aksen TERANG (pola Viralin: limau → zamrud cerah Verifin,
   teks gelap di atasnya) --- */
.adm-acc{background:linear-gradient(140deg,#6fdcab 0%,#2fbf8f 52%,#0e9f6e 100%);color:#06301f;border:none;}
.adm-acc .label{color:rgba(6,48,31,.62);}
.adm-acc .sub{color:rgba(6,48,31,.75);font-size:12.5px;margin-top:3px;}
.adm-acc-v{font-size:25px;font-weight:800;margin-top:6px;letter-spacing:-.01em;color:#052e1b;}
.adm-acc-btn{display:inline-block;margin-top:12px;background:#0a2f22;color:#fff;font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:999px;text-decoration:none;}
.adm-acc-btn:hover{background:var(--deep);}
.adm-acc .adm-card-title{color:#06301f;}
.adm-acc .adm-card-title .badge{background:rgba(6,48,31,.14);color:#06301f;border-color:transparent;}
/* Watermark kartu Pendapatan (5E, meniru watermark huruf Viralin):
   ikon Roda Kode besar siluet gelap transparansi rendah di sisi
   kanan kartu; tidak mengganggu angka yang rata kiri. */
.adm-acc-pend{position:relative;overflow:hidden;}
.adm-acc-wm{position:absolute;right:-16px;top:50%;transform:translateY(-50%) rotate(-8deg);width:128px;height:128px;opacity:.15;filter:brightness(0);pointer-events:none;}

/* --- dashboard: kolom tengah + kanan (rail kiri dari rangka) --- */
.adm-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;}
.adm-col{display:flex;flex-direction:column;gap:18px;min-width:0;}
.adm-card-title{font-size:16.5px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
/* Lencana hitung & periode (gelombang 5E, gaya Viralin): tema terang
   = latar zamrud PUCAT + teks gelap; tema gelap = latar mint gelap +
   teks terang. Berlaku hanya di panel admin (body.adm); lencana di
   kartu aksen tetap memakai aturan .adm-acc di atas. */
.adm .badge{background:var(--mint);color:var(--green-d);border:1px solid var(--line);letter-spacing:.02em;}
[data-theme="dark"] .adm .badge{color:#8fd0ab;}
.adm-linkrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--sub);padding-top:12px;margin-top:6px;border-top:1px solid var(--line);text-decoration:none;}
.adm-linkrow:hover{color:var(--green);}
.adm-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:10px;}
.adm-legend .lt{font-size:12.5px;color:var(--sub);display:flex;gap:6px;align-items:center;}
.adm-legend .lv{font-size:19px;font-weight:800;margin-top:2px;}
.adm-dotk{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;}

/* ubin Aksi Cepat: ubin GELAP di atas kartu aksen terang (pola Viralin) */
.adm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.adm-tile{background:#0a2f22;border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:16px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;font-weight:600;text-align:center;text-decoration:none;}
.adm-tile:hover{border-color:var(--gold);}
.adm-tile .tic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.10);color:#fff;display:grid;place-items:center;}
.adm-tile .tic .ic{width:18px;height:18px;}

/* --- daftar baris berubin avatar (pola Viralin: Order Terbaru,
   Deposit Menunggu, Chat Terbaru, Aktivitas Terakhir) --- */
.adm-rows{display:flex;flex-direction:column;}
.adm-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);min-width:0;}
.adm-row:last-child{border-bottom:none;}
.adm-row .av{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;font-weight:800;font-size:13px;border:1px solid var(--line);}
.adm-row .av-ic .ic{width:19px;height:19px;}
.adm-row .grow{flex:1;min-width:0;}
.adm-row .t{font-weight:700;font-size:14px;line-height:1.3;}
.adm-row .t-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-row .s{font-size:12.5px;color:var(--sub);margin-top:1px;}
.adm-row .s-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-row .amt{text-align:right;flex:none;}
.adm-row .amt .v{font-weight:700;font-size:14px;white-space:nowrap;}
.adm-row .amt .tm{color:var(--sub);font-size:11.5px;margin-top:4px;}
.adm-row .st{font-size:11.5px;font-weight:700;margin-top:1px;}
.st-ok{color:var(--green-d);}
.st-warn{color:#a87400;}
.st-bad{color:var(--red);}
.st-mut{color:var(--sub);}
[data-theme="dark"] .st-ok{color:#4ade9c;}
[data-theme="dark"] .st-warn{color:#f2cd65;}

/* --- donut per layanan --- */
.adm-donutwrap{display:flex;align-items:center;gap:16px;margin-top:12px;}
.adm-donut{width:118px;height:118px;border-radius:50%;flex:none;position:relative;}
.adm-donut::after{content:"";position:absolute;inset:17px;border-radius:50%;background:var(--card);}
.adm-donut .dv{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;}
.adm-donut .dv b{font-size:17px;}
.adm-donut .dv span{font-size:9.5px;color:var(--sub);}
.adm-dlegend{flex:1;display:flex;flex-direction:column;gap:7px;font-size:13px;min-width:0;}
.adm-dlegend .dl{display:flex;align-items:center;gap:8px;}
.adm-dlegend .dl .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-dlegend .dl b{margin-left:auto;font-weight:700;white-space:nowrap;}
.adm-dlegend .dl .pc{color:var(--sub);font-size:12px;white-space:nowrap;}

/* --- layar menyempit: kolom menumpuk aman (pola Viralin) --- */
@media (max-width:1180px){
  .adm-frame{grid-template-columns:1fr;}
  #admRailMoney{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  #admRailDash{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .adm-toprow{grid-template-columns:1fr;}
}
@media (max-width:900px){
  body.adm{padding:14px 10px 190px;}
  .adm-frame{padding:20px 16px 100px;}
  .adm-pills{left:16px;right:16px;}
  .adm-grid{grid-template-columns:1fr;}
  #admRailMoney{grid-template-columns:1fr;}
  #admRailDash{grid-template-columns:1fr;}
}