/* ============================================================
   JIMY PANEL v115  |  "Poles Warna": kartu berwarna, ikon berlatar, spasi lega
   Dimuat PALING AKHIR (setelah theme3.css). Hanya menimpa.
   Berlaku di tema Emas, Terang, Malam Emas. Tema "Komik 3D" tidak berubah.
   Hapus file ini + <link>-nya di index.html untuk kembali ke tampilan sebelumnya.
   ============================================================ */

:is(body.gold, body:not(.comic)) {
  --p4-r: 24px;
  --p4-glass: rgba(255, 255, 255, .62);
  --p4-line: color-mix(in srgb, var(--edge, rgba(58, 38, 16, .16)) 100%, transparent);
  --p4-sh: 0 1px 2px rgba(70, 45, 15, .06), 0 14px 30px -16px rgba(70, 45, 15, .34);
  --p4-ink: var(--ink, #1a1210);

  /* ---------- judul bagian: garis aksen kecil ---------- */
  & .sec-title { margin: 22px 2px 10px; }
  & .sec-title h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; }
  & .sec-title h3::before { content: ""; width: 5px; height: 17px; border-radius: 4px; background: linear-gradient(180deg, #e9cc94, #b98c4c); }
  & .sec-title small { font-weight: 600; font-size: 12px; }

  /* ============ MENU: kartu geser ============ */
  & .mhead { margin: 4px 2px 6px; }
  & .mcard {
    position: relative; overflow: hidden; border-radius: 28px; padding: 22px 20px 20px; min-height: 250px;
    border: 1px solid color-mix(in srgb, var(--ac) 38%, transparent);
    background:
      radial-gradient(240px 180px at 105% -8%, color-mix(in srgb, var(--ac) 38%, transparent), transparent 70%),
      radial-gradient(200px 160px at -10% 110%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 70%),
      linear-gradient(165deg, color-mix(in srgb, var(--ac) 11%, #fffdf8), color-mix(in srgb, var(--ac) 5%, #fff7e8));
    box-shadow: 0 1px 2px rgba(70, 45, 15, .08), 0 22px 40px -22px color-mix(in srgb, var(--ac) 80%, #000);
  }
  & .mcard.on { box-shadow: 0 1px 2px rgba(70, 45, 15, .08), 0 26px 46px -20px color-mix(in srgb, var(--ac) 90%, #000); }
  & .mcard .mc-glow { opacity: .9; }
  & .mcard .mc-ic {
    width: 58px; height: 58px; border-radius: 19px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 78%, #fff), var(--ac));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 20px -8px var(--ac);
  }
  & .mcard .mc-ic svg { width: 28px; height: 28px; }
  & .mcard .mc-bd {
    background: color-mix(in srgb, var(--ac) 16%, #fff); color: color-mix(in srgb, var(--ac) 80%, #000); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent);
    font-weight: 800; letter-spacing: .08em; font-size: 11px; padding: 5px 11px; border-radius: 999px;
  }
  & .mcard .mc-t { font-size: 25px; font-weight: 900; letter-spacing: -.02em; margin-top: 18px; }
  & .mcard .mc-d { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
  & .mcard .mc-go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; font-weight: 800; font-size: 14px; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 80%, #fff), var(--ac)); padding: 11px 18px; border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 20px -8px var(--ac);
  }
  & .mnav { backdrop-filter: blur(10px); background: var(--p4-glass); border: 1px solid var(--p4-line); box-shadow: var(--p4-sh); }
  & .mdot.on { background: linear-gradient(90deg, #e9cc94, #b98c4c); }

  /* ============ MENU: grid semua menu ============ */
  & .mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  & .mtile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 12px 12px; text-decoration: none; color: inherit; overflow: hidden;
    border-radius: 20px; border: 1px solid color-mix(in srgb, var(--ac) 26%, var(--edge, rgba(58, 38, 16, .16)));
    background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 9%, #fffdf8), color-mix(in srgb, var(--ac) 3%, #fff8ea));
    box-shadow: var(--p4-sh); transition: transform .18s var(--ease, ease), box-shadow .18s;
  }
  & .mtile::after { content: ""; position: absolute; right: -22px; top: -22px; width: 70px; height: 70px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 16%, transparent); }
  & .mtile:active { transform: scale(.96); }
  & .mtile .mt-ic {
    position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; margin-bottom: 7px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 75%, #fff), var(--ac)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 14px -7px var(--ac);
  }
  & .mtile .mt-ic svg { width: 20px; height: 20px; }
  & .mtile b { position: relative; z-index: 1; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
  & .mtile small, & .dlp small, & .mcard .mc-d { font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif); }
  & .mtile small { position: relative; z-index: 1; font-size: 11px; color: var(--muted); line-height: 1.25; }

  /* ============ PROFIL ============ */
  & .pbox { border-radius: 28px; border: 1px solid var(--p4-line); box-shadow: var(--p4-sh); }
  & .pbox .pbanner { height: 140px; }
  & .pbox .pbanner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .28)); }
  & .pbox .pedit { z-index: 2; backdrop-filter: blur(8px); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25); }
  & .pbody .av, & .pbody .avatar { box-shadow: 0 0 0 4px var(--card, #fffaf0), 0 12px 24px -10px rgba(0, 0, 0, .5); }
  & .pstats { border-radius: 22px; padding: 16px 4px; background: linear-gradient(180deg, color-mix(in srgb, #e9cc94 20%, #fffdf8), #fffaf0); }
  & .pstats b { background: linear-gradient(135deg, #9a6b25, #d9a441); -webkit-background-clip: text; background-clip: text; color: transparent; }

  & .qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
  & .qa a {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 4px 11px; border-radius: 20px; text-decoration: none; color: inherit; font-size: 11.5px; font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--ac) 28%, var(--edge, rgba(58, 38, 16, .16)));
    background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 11%, #fffdf8), color-mix(in srgb, var(--ac) 3%, #fff8ea)); box-shadow: var(--p4-sh); transition: transform .15s;
  }
  & .qa a:active { transform: scale(.94); }
  & .qa a svg { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 75%, #fff), var(--ac)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 14px -7px var(--ac); }

  & .card.menu { border-radius: 24px; padding: 6px 8px; margin-top: 14px; }
  & .mrow { height: 58px; padding: 0 6px; border-radius: 16px; border-bottom: 0; font-weight: 700; transition: background .15s; }
  & .mrow + .mrow { box-shadow: 0 -1px 0 var(--p4-line); border-radius: 0 0 16px 16px; }
  & .mrow:active, & .mrow:hover { background: color-mix(in srgb, #e9cc94 20%, transparent); }
  & .mrow > svg:first-child, & .mrow > .i:first-child {
    box-sizing: content-box; width: 20px; height: 20px; padding: 8px; border-radius: 13px; color: #fff !important; font-size: 20px;
    background: linear-gradient(145deg, #e9b866, #b98c4c);
  }
  & .mrow:nth-child(2) > svg:first-child, & .mrow:nth-child(2) > .i:first-child { background: linear-gradient(145deg, #6aa6ee, #2b78d6); }
  & .mrow:nth-child(3) > svg:first-child, & .mrow:nth-child(3) > .i:first-child { background: linear-gradient(145deg, #a688ea, #7b4fd6); }
  & .mrow:nth-child(4) > svg:first-child, & .mrow:nth-child(4) > .i:first-child { background: linear-gradient(145deg, #4cc384, #11a455); }
  & .btn.danger.block { border-radius: 18px; min-height: 52px; }

  /* ============ DOWNLOADER ============ */
  & .dlbox {
    position: relative; overflow: hidden; border-radius: 28px; padding: 20px 18px 18px;
    background:
      radial-gradient(260px 200px at 100% 0%, rgba(232, 121, 29, .22), transparent 70%),
      radial-gradient(220px 180px at 0% 100%, rgba(214, 51, 108, .14), transparent 70%),
      linear-gradient(180deg, #fffdf8, #fff6e6);
  }
  & .dlbox h3 { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 900; letter-spacing: -.01em; margin: 0 0 14px; }
  & .dlbox h3 svg { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #f3a04a, #e8791d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 18px -8px #e8791d; }
  & .dlbox .field { min-height: 54px; border-radius: 18px; }
  & .dlbox .dlpaste { border-radius: 12px; border: 0; padding: 8px 13px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #f3a04a, #e8791d); box-shadow: 0 6px 12px -6px #e8791d; }
  & .dlbox .cta { min-height: 54px; border-radius: 18px; font-size: 16px; margin-top: 14px !important; }

  & .dlcar { gap: 12px; padding: 4px 2px 14px; scroll-padding-left: 2px; }
  & .dlp {
    flex: 0 0 158px; position: relative; overflow: hidden; border-radius: 24px; padding: 16px 14px 15px; gap: 4px; align-items: flex-start; text-align: left;
    border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--edge, rgba(58, 38, 16, .16)));
    background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 12%, #fffdf8), color-mix(in srgb, var(--ac) 3%, #fff8ea));
    box-shadow: var(--p4-sh); transition: transform .18s var(--ease, ease), box-shadow .18s, border-color .18s;
  }
  & .dlp::after { content: ""; position: absolute; right: -26px; top: -26px; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 18%, transparent); }
  & .dlp .dlp-ic {
    position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 15px; color: #fff; margin-bottom: 6px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 72%, #fff), var(--ac)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 16px -8px var(--ac);
  }
  & .dlp b, & .dlp small { position: relative; z-index: 1; }
  & .dlp b { font-size: 16px; font-weight: 900; }
  & .dlp.on { transform: translateY(-2px); outline: 0; border-color: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 28%, transparent), 0 18px 30px -16px var(--ac); }
  & .tres { border-radius: 22px; }

  /* ============ CATUR ============ */
  & .chero {
    position: relative; overflow: hidden; border-radius: 28px; padding: 20px 18px; color: #fff; border: 0;
    background: radial-gradient(240px 180px at 100% 0%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(145deg, #4a2f8f, #7b4fd6 60%, #a07df0);
    box-shadow: 0 22px 40px -22px #7b4fd6;
  }
  & .chero h2 { color: #fff; font-size: 22px; font-weight: 900; }
  & .chero p, & .chero .muted { color: rgba(255, 255, 255, .8); }
  & .chero .cking { width: 66px; height: 66px; border-radius: 22px; display: grid; place-items: center; font-size: 42px; line-height: 1; color: #2a1a5c; background: linear-gradient(145deg, #fff, #e6dcff); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .45); }
  & .cnew .btn.primary { min-height: 54px; border-radius: 18px; font-size: 16px; }
  & .ctab { border-radius: 24px; padding: 16px; border-left: 5px solid #7b4fd6; }
  & .ctab .ctt b { font-size: 16px; font-weight: 800; }
  & .cvs { background: color-mix(in srgb, #7b4fd6 8%, transparent); border-radius: 16px; padding: 10px 12px; }

  /* ============ SERVER ============ */
  & .tools .field.search { min-height: 50px; border-radius: 18px; }
  & .chips .chip { min-height: 38px; padding: 0 16px; border-radius: 999px; }
  & .sv-grid { gap: 12px; }
  & .sv { position: relative; overflow: hidden; border-radius: 24px; padding: 14px; border-left: 5px solid #11a455; }
  & .sv:has(.pill.off, .pill.mute) { border-left-color: #b3a58f; }
  & .sv::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(17, 164, 85, .09); pointer-events: none; }
  & .sv .ic { border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 14px -8px rgba(232, 121, 29, .8); }
  & .sv b { font-size: 16.5px; font-weight: 800; }

  /* ---- detail server + console ---- */
  & .sd { border-radius: 26px; overflow: hidden; }
  & .sd-tile { border-radius: 18px; transition: transform .15s; }
  & .sd-tile:active { transform: scale(.94); }
  & .sd-ring .rg b { font-weight: 900; }
  & .term, & #dterm .card, & .console { border-radius: 22px; }

  /* ============ CREATE ============ */
  & .info {
    border-radius: 20px; padding: 14px 15px; border: 1px solid color-mix(in srgb, #d99a1c 30%, transparent);
    background: linear-gradient(170deg, color-mix(in srgb, #d99a1c 12%, #fffdf8), #fff8ea); box-shadow: var(--p4-sh);
  }
  & .info.teal { border-color: color-mix(in srgb, #11a455 30%, transparent); background: linear-gradient(170deg, color-mix(in srgb, #11a455 11%, #fffdf8), #fff8ea); }
  & .info .ic { border-radius: 14px; color: #fff; background: linear-gradient(145deg, #f0bb55, #d99a1c); box-shadow: 0 8px 14px -8px #d99a1c; }
  & .info.teal .ic { background: linear-gradient(145deg, #4cc384, #11a455); box-shadow: 0 8px 14px -8px #11a455; }
  & .label { font-weight: 800; font-size: 13.5px; margin: 18px 2px 8px; }
  & .rtseg { gap: 10px; }
  & .rt { border-radius: 20px; padding: 14px; transition: transform .15s, box-shadow .2s, border-color .2s; }
  & .rt.on { border-color: #b98c4c; background: linear-gradient(170deg, #fff4d8, #fffaf0); box-shadow: 0 0 0 3px rgba(201, 160, 106, .3), var(--p4-sh); }
  & .pkgs { gap: 10px; }
  & .pkg { border-radius: 22px; padding: 14px; transition: transform .15s, box-shadow .2s, border-color .2s; }
  & .pkg .ic { border-radius: 15px; color: #fff; background: linear-gradient(145deg, #e9b866, #b98c4c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 14px -8px #b98c4c; }
  & .pkg.on { border-color: #b98c4c; background: linear-gradient(170deg, #fff4d8, #fffaf0); box-shadow: 0 0 0 3px rgba(201, 160, 106, .3), var(--p4-sh); }
  & .pkg.lock { opacity: .6; }
  & .pkg .pr { font-weight: 800; color: #0b6b3a; }
  & #go.cta, & .cta { min-height: 56px; border-radius: 20px; font-size: 16.5px; }

  /* ---------- halaman lain: kartu-kartu umum jadi lebih lembut ---------- */
  & .card.empty { border-style: dashed; background: transparent; box-shadow: none; }
  & .card.empty svg { width: 42px; height: 42px; color: #b98c4c; }
  & .banner { border-radius: 18px; }
  & .tabbar { backdrop-filter: blur(16px) saturate(1.4); }
}

/* ---------- Malam Emas: warna tetap hidup, latar gelap ---------- */
body.dark {
  --p4-glass: rgba(40, 32, 22, .7);
  --p4-line: rgba(255, 235, 190, .1);
  --p4-sh: 0 1px 0 rgba(255, 235, 190, .05) inset, 0 16px 30px -16px rgba(0, 0, 0, .75);

  & .mcard {
    background:
      radial-gradient(240px 180px at 105% -8%, color-mix(in srgb, var(--ac) 34%, transparent), transparent 70%),
      linear-gradient(165deg, color-mix(in srgb, var(--ac) 14%, #211a12), #1a140e);
    border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  }
  & .mcard .mc-bd { background: color-mix(in srgb, var(--ac) 22%, #1a140e); color: color-mix(in srgb, var(--ac) 55%, #fff); }
  & .mtile, & .qa a, & .dlp { background: linear-gradient(170deg, color-mix(in srgb, var(--ac) 16%, #231b12), #1b150f); border-color: color-mix(in srgb, var(--ac) 34%, transparent); }
  & .dlbox { background: radial-gradient(260px 200px at 100% 0%, rgba(232, 121, 29, .22), transparent 70%), linear-gradient(180deg, #241c13, #1b150f); }
  & .pstats { background: linear-gradient(180deg, #2a2116, #1f1810); }
  & .info { background: linear-gradient(170deg, rgba(217, 154, 28, .16), #1f1810); }
  & .info.teal { background: linear-gradient(170deg, rgba(17, 164, 85, .16), #1f1810); }
  & .rt.on, & .pkg.on { background: linear-gradient(170deg, #3a2c14, #241c13); }
  & .mtile small, & .mcard .mc-d { color: #b9a98e; }
  & .cvs { background: rgba(123, 79, 214, .16); }
}

/* ---------- layar sempit ---------- */
@media (max-width: 360px) {
  :is(body.gold, body:not(.comic)) .mtiles { gap: 8px; }
  :is(body.gold, body:not(.comic)) .mtile { padding: 11px 10px; }
  :is(body.gold, body:not(.comic)) .qa { gap: 7px; }
}
@media (min-width: 720px) {
  :is(body.gold, body:not(.comic)) .mtiles { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.gold, body:not(.comic)) .mtile, :is(body.gold, body:not(.comic)) .dlp, :is(body.gold, body:not(.comic)) .qa a { transition: none; }
}

/* perbaikan: kartu Downloader memakai kelas .tl (baris terminal, white-space: pre-wrap) sehingga ada celah kosong */
.card.tl.dlbox { white-space: normal; animation: none; margin: 0; }

:is(body.gold, body:not(.comic)) .sd .btn { border-radius: 16px; min-height: 50px; border-width: 1px; }
:is(body.gold, body:not(.comic)) .sd .btn.primary, :is(body.gold, body:not(.comic)) .sd .btn:not(.ghost):not(.danger):not(.primary) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 16px -8px rgba(150, 100, 40, .6); border-color: rgba(110, 75, 30, .45); }

/* ============================================================
   v115b: HAMBURGER (drawer + sidebar), BERANDA, BAR BAWAH
   ============================================================ */
:is(body.gold, body:not(.comic)) {
  & .drawer, & .sidebar { background: linear-gradient(180deg, #fffaf0, #f8ecd5); }
  & .drawer { border-radius: 0 28px 28px 0; padding-top: 14px; overflow-y: auto; }
  & .drawer .x { backdrop-filter: blur(8px); }

  /* kartu user = mini banner */
  & .usercard {
    position: relative; overflow: hidden; border-radius: 22px; padding: 14px; border: 1px solid rgba(110, 75, 30, .25);
    background: radial-gradient(160px 110px at 100% 0%, rgba(255, 226, 150, .55), transparent 70%), linear-gradient(145deg, #fff6df, #f3dfb4);
    box-shadow: 0 14px 26px -16px rgba(150, 100, 40, .6);
  }
  & .usercard b { font-weight: 900; }

  /* item menu: bubble ikon berwarna */
  & .navlist { gap: 2px; }
  & .navitem { height: 50px; padding: 0 10px; border-radius: 16px; font-weight: 700; gap: 13px; }
  & .navitem > svg:first-child, & .navitem > .i:first-child {
    box-sizing: content-box; width: 18px; height: 18px; padding: 8px; border-radius: 13px; color: #fff !important; flex: none;
    background: linear-gradient(145deg, #e9b866, #b98c4c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 12px -6px rgba(150, 100, 40, .7);
  }
  & .navitem:hover { background: rgba(185, 140, 76, .12); }
  & .navitem.on {
    background: linear-gradient(90deg, rgba(233, 204, 148, .55), rgba(233, 204, 148, .12)); color: var(--ink, #1a1210); box-shadow: inset 3px 0 0 #b98c4c; border-radius: 6px 16px 16px 6px;
  }
  & .navitem.logout { margin-top: 10px; background: #fff1ef; border: 1px solid rgba(179, 38, 30, .22); }
  & .navitem.logout > svg:first-child { background: linear-gradient(145deg, #f2877f, #d6392f); }
  & .navsep { height: 1px; margin: 10px 8px; background: linear-gradient(90deg, transparent, rgba(110, 75, 30, .25), transparent); }
  & .navh, & .navgrp summary { margin: 14px 10px 6px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #9a7a45; text-transform: uppercase; }
  & .navgrp summary { cursor: pointer; list-style: none; }
  & .navcnt { background: #e8202f; color: #fff; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; margin-left: auto; }

  /* warna per fitur (berdasarkan tujuan link) */
  & .navitem[href="#/create"] > svg:first-child { background: linear-gradient(145deg, #4cc384, #11a455); }
  & .navitem[href="#/servers"] > svg:first-child, & .navitem[href="#/nodes"] > svg:first-child { background: linear-gradient(145deg, #6aa6ee, #2b78d6); }
  & .navitem[href="#/menu"] > svg:first-child, & .navitem[href="#/chess"] > svg:first-child { background: linear-gradient(145deg, #a688ea, #7b4fd6); }
  & .navitem[href="#/profile"] > svg:first-child, & .navitem[href="#/community"] > svg:first-child { background: linear-gradient(145deg, #7e8ae6, #5b6ad6); }
  & .navitem[href="#/wa"] > svg:first-child, & .navitem[href="#/chat"] > svg:first-child { background: linear-gradient(145deg, #3cc0cc, #0f9aa8); }
  & .navitem[href="#/roller"] > svg:first-child, & .navitem[href="#/requests"] > svg:first-child { background: linear-gradient(145deg, #f27a84, #e8202f); }
  & .navitem[href="#/meme"] > svg:first-child, & .navitem[href="#/waorders"] > svg:first-child { background: linear-gradient(145deg, #ef7aa3, #d6336c); }
  & .navitem[href="#/tools"] > svg:first-child, & .navitem[href="#/renew"] > svg:first-child { background: linear-gradient(145deg, #f3a04a, #e8791d); }
  & .navitem[href="#/sales"] > svg:first-child, & .navitem[href="#/ledger"] > svg:first-child, & .navitem[href="#/transactions"] > svg:first-child { background: linear-gradient(145deg, #4cc384, #11a455); }
  & .navitem[href="#/settings"] > svg:first-child, & .navitem[href="#/limits"] > svg:first-child, & .navitem[href="#/botcfg"] > svg:first-child { background: linear-gradient(145deg, #9aa0ad, #5f6675); }

  /* ============ BERANDA ============ */
  & .hello {
    position: relative; overflow: hidden; border-radius: 28px; padding: 18px; border: 1px solid rgba(110, 75, 30, .22);
    background: radial-gradient(240px 160px at 100% 0%, rgba(255, 226, 150, .6), transparent 70%), radial-gradient(200px 140px at 0% 110%, rgba(232, 121, 29, .14), transparent 70%), linear-gradient(145deg, #fffaf0, #f6e6c4);
    box-shadow: 0 20px 36px -22px rgba(150, 100, 40, .7);
  }
  & .hello h2 { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
  & .quota { border-radius: 26px; }
  & .srvsum { border-radius: 26px; }
  & .ss { border-radius: 18px; padding: 10px 4px; transition: transform .15s, background .2s; }
  & .ss:active { transform: scale(.95); }
  & .ss.all { background: linear-gradient(170deg, rgba(43, 120, 214, .13), rgba(43, 120, 214, .03)); }
  & .ss.on { background: linear-gradient(170deg, rgba(17, 164, 85, .15), rgba(17, 164, 85, .03)); }
  & .ss.off { background: linear-gradient(170deg, rgba(232, 32, 47, .12), rgba(232, 32, 47, .02)); }
  & .ss .v { font-weight: 900; font-size: 28px; }
  & .ssbar { height: 10px; border-radius: 99px; overflow: hidden; }
  & .ssbar i { border-radius: 99px; background: linear-gradient(90deg, #4cc384, #11a455); }
  & .moodcat { border-radius: 26px; background: linear-gradient(145deg, #fffdf8, #fff1d6); }
  & .sys { border-radius: 26px; }

  /* ============ BAR BAWAH: kaca, lebih halus ============ */
  & .tabbar { background: rgba(255, 250, 240, .78); border: 1px solid rgba(110, 75, 30, .14); border-radius: 28px; backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 18px 36px -14px rgba(70, 45, 15, .45); }
  & .tab { font-weight: 800; }
  & .tab.on { color: #8a5f1c; }
  & .tab.on::before { background: rgba(233, 204, 148, .5); }
}
body.dark {
  & .drawer, & .sidebar { background: linear-gradient(180deg, #1f1810, #15100b); }
  & .usercard { background: radial-gradient(160px 110px at 100% 0%, rgba(217, 178, 111, .25), transparent 70%), linear-gradient(145deg, #2a2116, #1d160e); border-color: rgba(255, 235, 190, .12); }
  & .navitem.on { background: linear-gradient(90deg, rgba(217, 178, 111, .28), rgba(217, 178, 111, .04)); color: #f4ecde; }
  & .navitem.logout { background: rgba(214, 57, 47, .12); }
  & .navh, & .navgrp summary { color: #b99a63; }
  & .hello { background: radial-gradient(240px 160px at 100% 0%, rgba(217, 178, 111, .3), transparent 70%), linear-gradient(145deg, #2a2116, #1b150f); border-color: rgba(255, 235, 190, .12); }
  & .moodcat { background: linear-gradient(145deg, #241c13, #1b150f); }
  & .tabbar { background: rgba(31, 24, 16, .8); border-color: rgba(255, 235, 190, .12); }
  & .tab.on { color: #e9cc94; }
}

/* perbaikan drawer: kartu user tidak boleh terjepit, ikon item aktif tetap berwarna */
:is(body.gold, body:not(.comic)) .drawer > *, :is(body.gold, body:not(.comic)) .sidebar > * { flex-shrink: 0; }
:is(body.gold, body:not(.comic)) .usercard { min-height: 76px; margin: 10px 0 12px; align-items: center; }
:is(body.gold, body:not(.comic)) .navitem.on > svg:first-child { background: linear-gradient(145deg, #e9b866, #b98c4c) !important; color: #fff !important; }
:is(body.gold, body:not(.comic)) .navitem.on[href="#/"] > svg:first-child, :is(body.gold, body:not(.comic)) .navitem[href="#/"] > svg:first-child { background: linear-gradient(145deg, #e9b866, #b98c4c) !important; }
:is(body.gold, body:not(.comic)) .ssg { gap: 8px; }

/* ---- v115c: lepas bingkai hitam tebal sisa tema lama di halaman lain ---- */
:is(body.gold, body:not(.comic)) {
  & .navitem > svg:first-child, & .navitem > .i:first-child, & .mrow > svg:first-child { border: 0 !important; outline: 0; }
  & .wafab { border: 1px solid rgba(110, 75, 30, .35); border-radius: 20px; background: linear-gradient(145deg, #f0c878, #b98c4c); box-shadow: 0 14px 26px -10px rgba(150, 100, 40, .8); color: #fff; }
  & .wafab.alt { background: #fffdf8; color: #8a5f1c; }
  & .wav { border: 0; box-shadow: 0 0 0 2px #fffdf8, 0 6px 12px -6px rgba(70, 45, 15, .5); }
  & .sl-hero { border: 1px solid rgba(17, 164, 85, .35); border-left: 5px solid #11a455; border-radius: 24px; box-shadow: var(--p4-sh); background: linear-gradient(170deg, rgba(17, 164, 85, .1), #fffaf0); }
  & .sl-hero.closed { border-color: rgba(179, 38, 30, .3); border-left-color: #d6392f; background: linear-gradient(170deg, rgba(214, 57, 47, .08), #fffaf0); }
  & .sl-ic { border-radius: 16px; color: #fff; background: linear-gradient(145deg, #4cc384, #11a455); }
  & .sl-hero.closed .sl-ic { background: linear-gradient(145deg, #f2877f, #d6392f); }
  & .rq-led, & .rq-empty { border-radius: 22px; border-width: 1px; }
}
:is(body.gold, body:not(.comic)) .watabs { display: flex; gap: 6px; padding: 5px; border-radius: 20px; background: rgba(58, 38, 16, .07); border: 1px solid var(--p4-line); }
:is(body.gold, body:not(.comic)) .watabs button { flex: 1; border: 0; border-radius: 16px; min-height: 42px; background: transparent; box-shadow: none; font-weight: 800; color: var(--muted); }
:is(body.gold, body:not(.comic)) .watabs button.on { background: linear-gradient(145deg, #f0d49c, #cfa561); color: #20150a; box-shadow: 0 8px 16px -8px rgba(150, 100, 40, .7); }

/* ============================================================
   v115d: halaman OWNER (Permintaan Masuk, Catatan Penjualan, Atur Limit, Node, QRIS, Bot)
   ============================================================ */
:is(body.gold, body:not(.comic)) {
  /* Permintaan Masuk */
  & .rq-top { gap: 12px; }
  & .rq-big {
    border: 0; border-radius: 26px; padding: 18px; position: relative; overflow: hidden;
    background: radial-gradient(180px 120px at 100% 0%, rgba(255, 255, 255, .25), transparent 70%), linear-gradient(145deg, #e8202f, #f26a4b);
    box-shadow: 0 20px 34px -18px #e8202f;
  }
  & .rq-big b { font-size: 44px; font-weight: 900; }
  & .rq-led {
    border: 1px solid rgba(110, 75, 30, .25); border-radius: 26px; box-shadow: var(--p4-sh); color: #3b2a10; text-decoration: none; font-weight: 800; font-size: 12px; text-align: center;
    background: linear-gradient(160deg, #fff0c4, #f0c878);
  }
  & .rq-adp { border: 1px solid var(--p4-line); border-radius: 24px; box-shadow: var(--p4-sh); background: linear-gradient(170deg, rgba(17, 164, 85, .09), #fffaf0); }
  & .rq-adp.closed { background: linear-gradient(170deg, rgba(214, 57, 47, .08), #fffaf0); }
  & .rq-adp .ic { border-radius: 15px; color: #fff; background: linear-gradient(145deg, #4cc384, #11a455); box-shadow: 0 8px 14px -8px #11a455; }
  & .rq-adp.closed .ic { background: linear-gradient(145deg, #f2877f, #d6392f); box-shadow: 0 8px 14px -8px #d6392f; }
  & .rq-sec h3 { font-weight: 900; color: #8a5f1c; }
  & .rq-sec h3::before { content: ""; display: inline-block; width: 5px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 4px; background: linear-gradient(180deg, #e9cc94, #b98c4c); }
  & .rq2 { border-radius: 26px; border: 1px solid color-mix(in srgb, var(--tc, #b98c4c) 28%, var(--edge, rgba(58, 38, 16, .16))); box-shadow: var(--p4-sh); background: linear-gradient(175deg, color-mix(in srgb, var(--tc, #b98c4c) 7%, #fffdf8), #fffaf0); padding: 16px; }
  & .rq2::before { height: 6px; }
  & .rq-ic { width: 50px; height: 50px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--tc, #b98c4c) 70%, #fff), var(--tc, #b98c4c)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 16px -8px var(--tc, #b98c4c); }
  & .rq-chip { border: 1px solid var(--p4-line); background: rgba(255, 255, 255, .7); font-weight: 700; }
  & .rq-empty { border: 1.5px dashed rgba(17, 164, 85, .35); border-radius: 26px; background: linear-gradient(170deg, rgba(17, 164, 85, .06), transparent); }
  & .rq-act .btn { min-height: 50px; border-radius: 16px; }

  /* Catatan Penjualan */
  & .ld-seg { display: flex; gap: 6px; padding: 5px; border-radius: 20px; background: rgba(58, 38, 16, .07); border: 1px solid var(--p4-line); }
  & .ld-seg button { flex: 1; border: 0; background: transparent; border-radius: 16px; min-height: 42px; font-weight: 800; color: var(--muted); box-shadow: none; }
  & .ld-seg button.on { background: linear-gradient(145deg, #f0d49c, #cfa561); color: #20150a; box-shadow: 0 8px 16px -8px rgba(150, 100, 40, .7); }
  & .ld-hero {
    border: 0; border-radius: 28px; padding: 20px 18px; position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(220px 150px at 100% 0%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(145deg, #0b8a4a, #11a455 55%, #4cc384);
    box-shadow: 0 22px 38px -20px #11a455;
  }
  & .ld-hero b { font-size: 38px; font-weight: 900; letter-spacing: -.02em; }
  & .ld-hero span { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3); }
  & .ld-grid { gap: 10px; }
  & .ld-cat { border: 1px solid color-mix(in srgb, var(--tc) 28%, var(--edge, rgba(58, 38, 16, .16))); border-radius: 22px; box-shadow: var(--p4-sh); background: linear-gradient(170deg, color-mix(in srgb, var(--tc) 9%, #fffdf8), #fffaf0); }
  & .ld-cat::before { height: 0; }
  & .ld-cat .ci, & .ld-row .ci { border-radius: 13px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); box-shadow: 0 8px 12px -7px var(--tc); }
  & .ld-bars, & .ld-list { border: 1px solid var(--p4-line); border-radius: 24px; box-shadow: var(--p4-sh); background: linear-gradient(180deg, #fffdf8, #fffaf0); }
  & .ld-bars .bar i { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #e9cc94, #b98c4c); }
  & .ld-row .rk { border-radius: 12px; font-weight: 900; color: #fff; background: linear-gradient(145deg, #e9b866, #b98c4c); }

  /* Atur Limit: kalimat info jangan terpecah */
  & .banner > span { display: block; min-width: 0; line-height: 1.5; }
  & .banner > span b, & .banner > span code, & .banner > span a { display: inline !important; }
  & .banner.info { border-radius: 20px; background: linear-gradient(170deg, rgba(43, 120, 214, .1), #fffaf0); border: 1px solid rgba(43, 120, 214, .28); }
  & .limrow { border-radius: 24px; padding: 16px; }
  & .limrow .lh b { font-weight: 900; font-size: 16px; }
  & .limrow .lc input { border-radius: 14px; font-weight: 800; border: 1px solid var(--edge2); }
  & .limrow .lc .icon-btn { border-radius: 14px; }

  /* Node & VPS, QRIS, Bot */
  & .hello > svg:first-child, & .hello > .i:first-child { box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 18px; color: #fff; flex: none; background: linear-gradient(145deg, #6aa6ee, #2b78d6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 18px -8px #2b78d6; }
  & .ncard { border-radius: 26px; padding: 16px; }
  & .nci { border-radius: 16px; color: #fff; background: linear-gradient(145deg, #6aa6ee, #2b78d6); box-shadow: 0 10px 16px -8px #2b78d6; }
  & .nbk { height: 10px; border-radius: 99px; overflow: hidden; }
  & .nbk i { border-radius: 99px; }
}
body.dark {
  & .rq2, & .ld-cat { background: linear-gradient(175deg, color-mix(in srgb, var(--tc, #b98c4c) 14%, #231b12), #1b150f); }
  & .rq-adp, & .ld-bars, & .ld-list { background: linear-gradient(180deg, #241c13, #1b150f); }
  & .rq-led { color: #20150a; }
  & .rq-chip { background: rgba(255, 255, 255, .06); }
  & .banner.info { background: linear-gradient(170deg, rgba(43, 120, 214, .16), #1f1810); }
  & .ld-seg { background: rgba(255, 255, 255, .06); }
}