/* ============================================================
   JIMY PANEL v106  |  "Emas Lembut": perapihan UI tema Emas (bawaan) + Malam Emas
   Dimuat PALING AKHIR, hanya menimpa. Tema "Komik 3D" TIDAK berubah.
   Hapus file ini (dan <link>-nya di index.html) untuk kembali ke tampilan lama.
   Ide: garis tebal + bayangan keras  ->  garis tipis + bayangan lembut berlapis, ruang napas lebih lega.
   ============================================================ */

body.gold {
  --edge: rgba(58, 38, 16, .16);          /* garis kartu */
  --edge2: rgba(58, 38, 16, .28);         /* garis input / tombol */
  --sh1: 0 1px 2px rgba(70, 45, 15, .08), 0 8px 24px -8px rgba(70, 45, 15, .22);
  --sh2: 0 1px 2px rgba(70, 45, 15, .08), 0 14px 32px -10px rgba(70, 45, 15, .30);
  --shs: 0 1px 2px rgba(70, 45, 15, .10), 0 4px 10px -4px rgba(70, 45, 15, .25);
  --gold-grad: linear-gradient(180deg, #e9cc94 0%, #cfa561 55%, #b98c4c 100%);
  --paper: #fffaf0; --paper2: #fbefd6;
  --bw: 1.5px; --radius: 20px;
  --muted: #6f604d; --dim: #8a7a64;
  background: #f7eddb;
}

/* ---------- latar: bersih, hangat, tanpa titik-titik ramai ---------- */
body.gold::before {
  background:
    radial-gradient(620px 340px at 100% -4%, rgba(236, 200, 120, .45), transparent 66%),
    radial-gradient(520px 360px at -8% 102%, rgba(201, 160, 106, .28), transparent 64%),
    linear-gradient(180deg, #fbf3e3, #f5e8d0);
}
body.gold::after { opacity: 0; }

/* ---------- bar atas: kaca krem, bukan blok emas tebal ---------- */
body.gold .topbar {
  background: rgba(251, 243, 227, .82) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--edge) !important;
  box-shadow: 0 6px 20px -12px rgba(70, 45, 15, .35) !important;
  height: 64px;
}
body.gold .topbar .ttl h1 { font-size: 16.5px; letter-spacing: .01em; }
body.gold .topbar .ttl p { font-size: 12px; color: var(--muted); }
body.gold .icon-btn {
  width: 42px !important; height: 42px !important; border: 1px solid var(--edge2) !important; background: #fffdf7 !important;
  box-shadow: var(--shs) !important; transition: transform .15s, box-shadow .15s;
}
body.gold .icon-btn:hover { box-shadow: var(--sh1) !important; }
body.gold .icon-btn:active { transform: scale(.94) !important; box-shadow: none !important; }
body.gold .icon-btn .badge { border: 2px solid #fffdf7 !important; }

/* ---------- kartu ---------- */
body.gold .card {
  background: linear-gradient(180deg, #fffdf8, #fffaf0); border: 1px solid var(--edge); border-radius: 22px; box-shadow: var(--sh1);
}
body.gold .card.link { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
body.gold .card.link:hover { transform: translateY(-2px); box-shadow: var(--sh2); border-color: var(--edge2); }
body.gold .card.link:active, body.gold .pkg:active, body.gold .rt:active, body.gold .sv:active { transform: scale(.985) !important; box-shadow: var(--shs) !important; }
body.gold .card.red { border-color: rgba(185, 140, 76, .55); box-shadow: 0 0 0 3px rgba(201, 160, 106, .14), var(--sh1); }
body.gold .sec-title h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.005em; }

/* ---------- tombol ---------- */
body.gold .btn {
  border: 1px solid var(--edge2); border-radius: 14px; box-shadow: var(--shs); font-weight: 700; letter-spacing: .005em;
  min-height: 46px; transition: transform .15s var(--ease), box-shadow .2s, filter .2s, background .2s;
}
body.gold .btn:hover { box-shadow: var(--sh1); }
body.gold .btn:active { transform: scale(.97) !important; box-shadow: none !important; }
body.gold .btn.primary {
  background: var(--gold-grad) !important; color: #20150a !important; border: 1px solid rgba(110, 75, 30, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 16px -6px rgba(150, 100, 40, .6) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
}
body.gold .btn.primary:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 22px -8px rgba(150, 100, 40, .7) !important; }
body.gold .btn.ghost { background: #fffdf7; color: var(--ink); }
body.gold .btn.ghost:hover { background: #fff; border-color: rgba(185, 140, 76, .7); }
body.gold .btn.ghost.sm.go, body.gold .sv .btn.ghost, body.gold .rolecard .btn.ghost { background: var(--gold-grad); border-color: rgba(110, 75, 30, .5); }
body.gold .btn.danger { background: #fff5f4; color: #b3261e; border-color: rgba(179, 38, 30, .35); }
body.gold .btn.sm { min-height: 36px; border-radius: 11px; }

/* ---------- input ---------- */
body.gold .field { background: #fffdf8; border: 1px solid var(--edge2); border-radius: 14px; box-shadow: inset 0 1px 2px rgba(70, 45, 15, .06); transition: border-color .15s, box-shadow .15s; }
body.gold .field:focus-within { border-color: #b98c4c; background: #fff; box-shadow: 0 0 0 4px rgba(201, 160, 106, .28); }
body.gold .field input::placeholder { color: #a99a84; }
body.gold .botask input { border: 1px solid var(--edge2); box-shadow: inset 0 1px 2px rgba(70, 45, 15, .06); }

/* ---------- chip & pill ---------- */
body.gold .chip { border: 1px solid var(--edge2); box-shadow: none; background: #fffdf7; font-weight: 700; transition: background .15s, transform .15s; }
body.gold .chip:active { transform: scale(.95); }
body.gold .chip.on { background: var(--gold-grad); border-color: rgba(110, 75, 30, .5); color: #20150a; box-shadow: 0 4px 10px -4px rgba(150, 100, 40, .6); }
body.gold .pill { border: 1px solid transparent; box-shadow: none; font-weight: 800; letter-spacing: .02em; }
body.gold .pill.on { background: #dff5e8; color: #0b6b3a; border-color: rgba(17, 164, 85, .35); }
body.gold .pill.off { background: #fde4e4; color: #a3201a; border-color: rgba(179, 38, 30, .3); }
body.gold .pill.warn { background: #fbecc4; color: #7a5200; border-color: rgba(217, 137, 0, .35); }
body.gold .pill.mute { background: rgba(58, 38, 16, .06); color: var(--muted); border-color: var(--edge); }
body.gold .pill.blue { background: #e0eefc; color: #1b4f8a; border-color: rgba(43, 120, 214, .3); }
body.gold .pill.role { background: var(--gold-grad); color: #20150a; border-color: rgba(110, 75, 30, .45); }
body.gold .pill .dot, body.gold .pill i { box-shadow: none; }

/* ---------- statistik, kartu server, role, paket ---------- */
body.gold .stat, body.gold .svx { border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--sh1); }
body.gold .sv { border: 1px solid var(--edge); border-radius: 22px; box-shadow: var(--sh1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
body.gold .sv:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
body.gold .upc, body.gold .rl, body.gold .rolecard, body.gold .pay-sum { border: 1px solid var(--edge); border-radius: 22px; box-shadow: var(--sh1); }
body.gold .upc.red, body.gold .rl.owner, body.gold .rl.reseller, body.gold .rolecard { box-shadow: 0 0 0 3px rgba(201, 160, 106, .25), var(--sh1); border-color: rgba(185, 140, 76, .6); }
body.gold .upcard { border: 1px solid var(--edge); box-shadow: var(--sh1); }
body.gold .upcard .arrow { border: 1px solid var(--edge2); }
body.gold .ico-tile, body.gold .sv .ic { border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 4px 10px -3px rgba(40, 25, 5, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
body.gold .bar { height: 7px; border-radius: 7px; background: rgba(58, 38, 16, .1); overflow: hidden; }
body.gold .bar > i { border-radius: 7px; }

/* ---------- avatar, kartu user ---------- */
body.gold .avatar { border: 2px solid #fffdf7; box-shadow: 0 4px 12px -2px rgba(110, 75, 30, .5); }
body.gold .usercard { border: 1px solid var(--edge); box-shadow: var(--shs); background: #fffdf7; border-radius: 18px; }

/* ---------- menu bawah ---------- */
body.gold .tabbar { --bar-fill: #fffaf0; --bar-line: rgba(110, 75, 30, .32); --bar-sw: 1.25px; }
body.gold .tabbar .wheel { border-color: rgba(110, 75, 30, .55) !important; border-width: 2px !important; }
body.gold .tabbar .wheel::after { border-color: rgba(110, 75, 30, .3); }
body.gold .tabbar { border-width: 1px !important; box-shadow: 0 -6px 28px -12px rgba(70, 45, 15, .35), 0 10px 30px -10px rgba(70, 45, 15, .35) !important; }
body.gold .tab { font-weight: 700; font-size: 11.5px; letter-spacing: .01em; transition: color .15s, transform .15s; }
body.gold .tab:active { transform: scale(.92); }
body.gold .tab.on { color: #6e4a1c; font-weight: 800; }
body.gold .tab::before, body.gold .tab.on::before { border: 0 !important; box-shadow: none !important; }
body.gold .tabbar .wheel { box-shadow: 0 10px 22px -6px rgba(150, 100, 40, .7), inset 0 2px 0 rgba(255, 255, 255, .45) !important; }

/* ---------- drawer / sidebar ---------- */
body.gold .drawer, body.gold .sidebar { background: #fbf3e3; border-right: 1px solid var(--edge); }
body.gold .drawer.on { box-shadow: 24px 0 60px -10px rgba(40, 25, 5, .45); }
body.gold .navitem { border: 1px solid transparent; border-radius: 14px; font-weight: 700; transition: background .15s, transform .15s; }
body.gold .navitem:hover { background: rgba(201, 160, 106, .16); border-color: transparent; }
body.gold .navitem.on { border: 1px solid rgba(110, 75, 30, .4); box-shadow: 0 6px 14px -6px rgba(150, 100, 40, .6); }
body.gold .scrim, body.gold .sheetwrap { background: rgba(35, 22, 8, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- bottom sheet ---------- */
body.gold .sheet { background: #fffaf0; border: 1px solid var(--edge); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -18px 50px -12px rgba(40, 25, 5, .5); }
body.gold .sheet .grab { background: rgba(58, 38, 16, .25); height: 4px; width: 42px; border-radius: 4px; }

/* ---------- bot / fab ---------- */
body.gold .botfab { border: 2px solid #fffdf7; box-shadow: 0 10px 24px -6px rgba(30, 20, 8, .6); }
body.gold .botfab:active { transform: scale(.93); box-shadow: none; }
body.gold .botfab::before { border: 1px solid var(--edge2); box-shadow: var(--shs); }
body.gold .rb-say.big { border: 1px solid var(--edge2); box-shadow: var(--shs); }
body.gold .botgo { border: 1px solid rgba(110, 75, 30, .5); box-shadow: none; }

/* ---------- toast & lain-lain ---------- */
body.gold .toast { border: 1px solid var(--edge2); border-radius: 16px; box-shadow: var(--sh2); }
body.gold details { border-bottom: 1px solid var(--edge); }
body.gold .srv-chip { border: 1px solid var(--edge2); box-shadow: none; }
body.gold .themeopt { border: 1px solid var(--edge2); box-shadow: none; border-radius: 16px; transition: transform .15s, box-shadow .15s; }
body.gold .themeopt.on { background: #f5e6c4; border-color: #b98c4c; box-shadow: 0 0 0 3px rgba(201, 160, 106, .35); }
body.gold .tp { box-shadow: none !important; border: 1px solid var(--edge); }

/* ---------- animasi masuk halus ---------- */
@keyframes j3up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.gold #app .card, body.gold #app .sv, body.gold #app .stat, body.gold #app .upc, body.gold #app .rl { animation: j3up .42s var(--ease) both; }
body.gold #app .card:nth-child(2), body.gold #app .sv:nth-child(2) { animation-delay: .05s; }
body.gold #app .card:nth-child(3), body.gold #app .sv:nth-child(3) { animation-delay: .1s; }
body.gold #app .card:nth-child(4), body.gold #app .sv:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { body.gold #app * { animation: none !important; transition: none !important; } }

/* ============================================================
   MALAM EMAS (body.dark): bayangan & garis disamakan lembutnya
   ============================================================ */
body.dark .card, body.dark .sv, body.dark .stat, body.dark .svx, body.dark .upc, body.dark .rl, body.dark .rolecard { border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 235, 190, .05) inset, 0 14px 30px -14px rgba(0, 0, 0, .7); }
body.dark .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -8px rgba(217, 178, 111, .55); }
body.dark .btn, body.dark .icon-btn, body.dark .field { transition: transform .15s var(--ease), box-shadow .2s, border-color .15s; }
body.dark .btn:active { transform: scale(.97); }
body.dark .field:focus-within { border-color: #d9b26f; box-shadow: 0 0 0 4px rgba(217, 178, 111, .2); }
body.dark .tabbar { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
body.dark .topbar { -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); }

/* ---------- carousel menu & sisa komponen bergaya komik ---------- */
body.gold .mcard, body.comic.gold .mcard { border: 1px solid var(--edge) !important; border-radius: 26px; box-shadow: var(--sh1) !important; }
body.gold .mcard.on { border-color: rgba(185, 140, 76, .6) !important; box-shadow: 0 0 0 3px rgba(201, 160, 106, .22), var(--sh2) !important; }
body.gold .mdots .mdot { background: rgba(58, 38, 16, .2) !important; }
body.gold .mdots .mdot.on { background: #b98c4c !important; }
body.gold .chip.on { box-shadow: none; }
body.gold .logo.jmp svg { filter: drop-shadow(1px 2px 0 rgba(21, 18, 28, .35)); }
body.gold .lcard-head .logo.jmp svg { filter: drop-shadow(2px 3px 0 rgba(21, 18, 28, .3)); }
body.gold .homehero, body.gold .prof-hero { border: 1px solid var(--edge); border-radius: 26px; box-shadow: var(--sh2); }
body.gold .lcard, body.gold .authcard, body.gold .lgn { border: 1px solid var(--edge); box-shadow: var(--sh2); }

/* ============================================================
   LAYAR LOGIN (.lg2): kartu putih bersih, garis tipis, bayangan lembut
   ============================================================ */
body .lg2c {
  border: 1px solid rgba(58, 38, 16, .14) !important; border-radius: 28px !important;
  box-shadow: 0 2px 4px rgba(70, 45, 15, .06), 0 30px 60px -24px rgba(70, 45, 15, .45) !important;
}
body .lg2f { border: 1px solid rgba(58, 38, 16, .2); border-top: 0; background: #2c2a38; }
body .lg2c .field { background: #fbf8f1; border: 1px solid rgba(58, 38, 16, .22); border-radius: 16px; box-shadow: inset 0 1px 2px rgba(70, 45, 15, .06); min-height: 58px; }
body .lg2c .field:focus-within { border-color: #b98c4c; background: #fff; box-shadow: 0 0 0 4px rgba(201, 160, 106, .28); }
body .lg2c .field input { font-weight: 600; }
body .lg2go, body .lg2alt {
  border: 1px solid rgba(58, 38, 16, .2); border-radius: 20px; box-shadow: 0 1px 2px rgba(70, 45, 15, .08), 0 8px 18px -10px rgba(70, 45, 15, .4);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
body .lg2go { border-color: rgba(110, 75, 30, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -10px rgba(150, 100, 40, .75); }
body .lg2go:hover:not(:disabled), body .lg2alt:hover { filter: brightness(1.03); transform: translateY(-1px); }
body .lg2go:active, body .lg2alt:active { transform: scale(.985); box-shadow: none; }
body .lg2i { border: 0; border-radius: 14px; box-shadow: 0 4px 10px -4px rgba(40, 25, 5, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
body .lg2alt .lg2i { box-shadow: 0 4px 10px -4px rgba(110, 75, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
body .lg2pill { border: 0; border-radius: 12px; }
body .lg2c .ldiv { color: #9a8a73; }
body .lg2c .ldiv::before, body .lg2c .ldiv::after { background: rgba(58, 38, 16, .16) !important; border-color: rgba(58, 38, 16, .16) !important; height: 1px; }
body .lg2t { letter-spacing: -.015em; }
body.gold .sfxbtn { border: 1px solid var(--edge2) !important; box-shadow: var(--shs) !important; }
body .rb-say { border: 1px solid rgba(58, 38, 16, .2) !important; box-shadow: var(--shs, 0 4px 10px -4px rgba(70, 45, 15, .25)) !important; }

/* ---------- pilihan paket / bahasa / radio di halaman Create ---------- */
body.gold .pkg, body.gold .rt, body.gold .opt, body.gold .langopt, body.gold .lang {
  border: 1px solid var(--edge2) !important; border-radius: 18px !important; box-shadow: var(--shs) !important; background: #fffdf7;
  transition: transform .15s var(--ease), box-shadow .2s, border-color .15s, background .15s;
}
body.gold .pkg.on, body.gold .rt.on, body.gold .opt.on, body.gold .langopt.on, body.gold .lang.on {
  background: #f8ecd0; border-color: #b98c4c !important; box-shadow: 0 0 0 3px rgba(201, 160, 106, .35) !important;
}
body.gold .pkg .radio, body.gold .pkg .rdo, body.gold .pkg .ck { border: 1.5px solid rgba(58, 38, 16, .45) !important; box-shadow: none !important; }
body.gold .pkg .ic, body.gold .pkg .ico { border: 0 !important; box-shadow: 0 4px 10px -4px rgba(21, 18, 28, .6) !important; border-radius: 13px; }

/* ============================================================
   BERANDA v107: kartu nama + role beranimasi, Status VPS jadi kartu gauge ringkas
   (berlaku di semua tema, warna ikut variabel tema)
   ============================================================ */
@property --ga { syntax: '<number>'; inherits: false; initial-value: 0; }

/* ---------- kartu nama + role ---------- */
.hello2 { position: relative; overflow: hidden; align-items: center; gap: 14px; padding: 14px 16px; isolation: isolate; }
.hello2 > * { position: relative; z-index: 1; }
.hello2 .hinfo { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.hello2 h2 { margin: 0; font-size: 18px; line-height: 1.15; display: flex; align-items: center; gap: 6px; max-width: 100%; }
.hello2 h2 .i, .hello2 h2 svg { color: var(--blue, #2b78d6); flex: none; }
/* avatar: cincin warna berputar + denyut halus */
.havw { position: relative; flex: none; padding: 4px; border-radius: 50%; }
.havw::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, var(--red), rgba(255, 255, 255, 0) 30%, var(--gold, var(--red)) 55%, rgba(255, 255, 255, 0) 80%, var(--red));
  animation: h2spin 5s linear infinite;
}
.havw::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; z-index: 0; border: 2px solid var(--red); opacity: 0; animation: h2ping 2.8s ease-out infinite; }
.havw > * { position: relative; z-index: 1; }
@keyframes h2spin { to { transform: rotate(360deg); } }
@keyframes h2ping { 0% { transform: scale(.92); opacity: .55; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
/* bola cahaya melayang */
.hx { position: absolute !important; z-index: 0 !important; border-radius: 50%; pointer-events: none; filter: blur(18px); opacity: .28; background: var(--red); }
.hx.a { width: 90px; height: 90px; right: -22px; top: -30px; animation: h2fl 7s ease-in-out infinite; }
.hx.b { width: 60px; height: 60px; right: 60px; bottom: -28px; background: var(--gold, var(--red)); animation: h2fl 9s ease-in-out -3s infinite; }
.hx.c { width: 44px; height: 44px; left: 38%; top: -20px; opacity: .18; animation: h2fl 8s ease-in-out -5s infinite; }
.hx.d { width: 70px; height: 70px; left: -26px; bottom: -34px; opacity: .18; background: var(--gold, var(--red)); animation: h2fl 10s ease-in-out -1s infinite; }
@keyframes h2fl { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14px, 10px) scale(1.18); } }
/* kilau menyapu kartu */
.hello2::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%); animation: h2shine 6.5s ease-in-out 1.2s infinite;
}
@keyframes h2shine { 0% { transform: translateX(-120%); } 38%, 100% { transform: translateX(120%); } }
/* indikator "hidup" di kanan */
.hlive { margin-left: auto; display: flex; align-items: flex-end; gap: 3px; height: 22px; padding-right: 2px; }
.hlive i { width: 4px; border-radius: 3px; background: var(--green, #11a455); height: 100%; transform-origin: bottom; animation: h2eq 1.1s ease-in-out infinite; }
.hlive i:nth-child(2) { animation-delay: -.35s; } .hlive i:nth-child(3) { animation-delay: -.7s; }
@keyframes h2eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* gif damkar animasi di kanan kartu beranda */
.hello2 .hdamkar { flex: none; margin: -14px -2px -16px auto; width: 66px; height: 88px; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .22)); }

/* ---------- Status VPS: 3 kartu gauge sejajar ---------- */
.card.sys .sysh { margin-bottom: 12px; }
.vgs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 9px; }
.vg { --c: var(--red); --vgbg: var(--card2, rgba(0, 0, 0, .04)); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px 10px; min-width: 0; border-radius: 18px; background: var(--vgbg); border: 1px solid var(--line); }
.vg.green { --c: var(--green, #11a455); } .vg.amber { --c: var(--amber, #d98900); }
.vg .gr {
  position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--ga, var(--p)) * 1%), rgba(128, 128, 128, .2) 0);
  animation: vgfill 1.1s cubic-bezier(.2, .8, .2, 1) .1s both;
}
.vg .gr::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--vgbg); }
.vg .gr b { position: relative; font: 800 16px/1 var(--display); letter-spacing: -.02em; }
.vg .gr b small { font-size: 9.5px; font-weight: 700; margin-left: 1px; color: var(--muted); }
.vg .gl { font-size: 12px; font-weight: 800; margin-top: 3px; }
.vg .gs { max-width: 100%; font: 600 10px/1.2 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vgs.still .gr { animation: none; --ga: var(--p); }
@keyframes vgfill { from { --ga: 0; } to { --ga: var(--p); } }
/* info kecil: uptime VPS / bot / telegram */
.vfs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.vfs > div { min-width: 0; padding: 8px 4px; border-radius: 14px; background: var(--vgbg, var(--card2, rgba(0, 0, 0, .04))); border: 1px solid var(--line); text-align: center; }
.vfs span { display: block; min-width: 0; }
.vfs small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.vfs b { display: block; font: 700 11px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfs .i { display: none; }

@media (prefers-reduced-motion: reduce) { .havw::before, .havw::after, .hx, .hello2::after, .hlive i, .vg .gr { animation: none !important; } .vg .gr { --ga: var(--p); } }

/* ---------- Perangkat Kamu: kartu ikon ringkas, seragam dengan gauge VPS ---------- */
.vg.dv .gr.ig { background: color-mix(in srgb, var(--c) 16%, transparent); animation: none; color: var(--c); }
.vg.dv .gr.ig::before { display: none; }
.vg.dv .gr.ig .i, .vg.dv .gr.ig svg { font-size: 26px; width: 1em; height: 1em; }
.vg.dv .gs { white-space: normal; text-align: center; font-size: 10.5px; line-height: 1.35; }
.vg.chg .gr::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: h2ping 2.2s ease-out infinite; }
.vgs.w2 .vg.dv { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; padding: 10px 14px; }
.vgs.w2 .vg.dv .gr.ig { grid-row: 1 / span 2; width: 46px; height: 46px; }
.vgs.w2 .vg.dv .gr.ig .i, .vgs.w2 .vg.dv .gr.ig svg { font-size: 21px; }
.vgs.w2 .vg.dv .gl { margin: 0; align-self: end; text-align: left; }
.vgs.w2 .vg.dv .gs { align-self: start; text-align: left; }
.vgs.w2 .vg.dv .gs br { display: none; }

/* ============================================================
   RINGKASAN SERVER (Server / Online / Offline) + SIAPA ONLINE
   ============================================================ */
.srvsum { padding: 14px 14px 12px; margin-top: 12px; }
.ssg { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.ss { --c: var(--blue, #2b78d6); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px; text-decoration: none; color: inherit; position: relative; transition: transform .15s; }
.ss:active { transform: scale(.94); }
.ss + .ss::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--line); }
.ss.on { --c: var(--green, #11a455); } .ss.off { --c: #e5484d; }
.ss .ssi { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.ss .v { font: 800 28px/1.05 var(--display); letter-spacing: -.02em; margin-top: 5px; color: var(--text); text-shadow: none; font-style: normal; }
.ss span { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ssbar { height: 8px; border-radius: 8px; margin-top: 12px; overflow: hidden; background: color-mix(in srgb, #e5484d 28%, transparent); }
.ssbar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2bd47a, var(--green, #11a455)); transition: width .8s cubic-bezier(.2, .8, .2, 1); animation: ssgrow 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ssgrow { from { width: 0 !important; } }
.ssc { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.ssc b { color: var(--text); font-weight: 800; }

/* Siapa Online: ringkasan jadi chip 1 baris, daftar jadi baris kartu */
.card.onl { padding: 12px; }
.card.onl .onl3 { display: flex; gap: 7px; margin: 0 0 10px; }
.card.onl .onl3 .o { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 999px; background: var(--card2, rgba(0, 0, 0, .05)); border: 1px solid var(--line); text-align: left; }
.card.onl .onl3 .o b { display: inline; font-size: 16px; line-height: 1; }
.card.onl .onl3 .o span { font-size: 11.5px; font-weight: 700; }
.onl3 .od { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.onl3 .o.on .od { background: var(--green, #11a455); box-shadow: 0 0 0 0 var(--green, #11a455); animation: jpPing 2s ease-out infinite; }
.onl3 .o.off .od { background: #e5484d; }
.onl3 .o.tot .od { background: var(--blue, #2b78d6); }
.card.onl .wholist { display: grid; gap: 8px; }
.card.onl .who { padding: 9px 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--card2, rgba(0, 0, 0, .04)); gap: 11px; }
.card.onl .who:last-child { border: 1px solid var(--line); }
.card.onl .who .wi b { font-size: 14px; }
.card.onl .who .wi span { display: flex; align-items: center; gap: 4px; }
.card.onl .who .devtag { margin-left: 4px; }
.card.onl .who .wr { gap: 3px; }
.who .pill.role { background: var(--red-soft, rgba(201, 160, 106, .2)); color: var(--text); border: 1px solid var(--red-line, rgba(201, 160, 106, .5)); box-shadow: none; font-size: 11px; padding: 3px 9px; }
.who .pill.role .i { color: var(--red); }
.card.onl .muted-s { margin: 4px 0 0; text-align: center; }
body .card.onl .who .pill.role { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); box-shadow: none; text-shadow: none; }
body .card.onl .who .pill.role .i, body .card.onl .who .pill.role svg { color: var(--text); opacity: .75; }
body .card.onl .who .wdot { right: 0; bottom: 0; }

/* ============================================================
   LOGIN v110: tombol Masuk ramping + 3 tombol aksi sejajar (lebih pendek, tanpa scroll)
   ============================================================ */
body .lg2s { margin: -2px 0 2px; text-align: center; font-size: 13px; font-weight: 600; color: #8a7a64; }
body .lg2c { padding: 20px 18px 22px !important; gap: 12px; }
body .lg2go.slim {
  min-height: 54px; margin-top: 4px; justify-content: center; gap: 10px; padding: 0 18px; border-radius: 16px;
  font: 800 16px/1 var(--font); letter-spacing: .04em; color: #20150a;
}
body .lg2go.slim .i, body .lg2go.slim svg { width: 20px; height: 20px; transition: transform .2s; }
body .lg2go.slim:hover:not(:disabled) .i { transform: translateX(3px); }
body .lg2row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 9px; }
body .lg2alt.sq {
  flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; min-height: 0; padding: 12px 4px 10px; text-align: center; border-radius: 18px;
}
body .lg2alt.sq .lg2i { width: 42px; height: 42px; border-radius: 14px; margin-bottom: 3px; }
body .lg2alt.sq .lg2i svg { width: 21px; height: 21px; }
body .lg2alt.sq b { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; line-height: 1.1; white-space: nowrap; }
body .lg2alt.sq small { font-size: 10.5px; font-weight: 600; color: #8a7a64; line-height: 1; }
body .lg2c .ldiv { margin: 4px 0 0; }
body .lg2 .srv-chip { margin-top: 26px; }

/* login di Malam Emas: buang sisa bayangan keras, kartu & field gelap hangat */
body.dark .lg2c { background: linear-gradient(180deg, #221b13, #181410) !important; border: 1px solid rgba(217, 178, 111, .22) !important; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 235, 190, .06) !important; }
body.dark .lg2c .field { background: #120f0b; border: 1px solid rgba(217, 178, 111, .25); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5) !important; }
body.dark .lg2c .field:focus-within { border-color: #d9b26f; box-shadow: 0 0 0 4px rgba(217, 178, 111, .2) !important; }
body.dark .lg2c .field input { color: #f3e9d2; }
body.dark .lg2c .field > svg.i, body.dark .lg2c .eye { color: #b8a98f; }
body.dark .lg2go { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -10px rgba(217, 178, 111, .55) !important; border-color: rgba(217, 178, 111, .6); }
body.dark .lg2alt { background: #241e17; border: 1px solid rgba(217, 178, 111, .22); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8) !important; color: #f3e9d2; }
body.dark .lg2alt.sq small, body.dark .lg2s { color: #a89878; }
body.dark .lg2t { color: #f6ecd6; }
body.dark .lg2f { background: #2a2218; border-color: rgba(217, 178, 111, .25); }