/* ARSHINET UI - tombol & menu tema bersama (bentuk sama di semua aplikasi). (c) ARSHINET - Risman Jafar, S.Kom. */
:root { --ax-sel: #d4f06a; }
html[data-tema="kapsul"], html[data-tema="kapsul-gelap"], html[data-tema="oranye"] { --ax-sel: #ff5a1f; }
html[data-tema="hutan"] { --ax-sel: #d4a72c; }
html[data-tema="otomatis"], html[data-tema="gelap"], html[data-tema="biru"], html[data-tema="terang"] { --ax-sel: #1d5fd6; }
html[data-tema="ungu"] { --ax-sel: #7c3aed; } html[data-tema="hijau"] { --ax-sel: #15803d; } html[data-tema="neon"] { --ax-sel: #c026d3; }
.ax-tbtn { appearance: none; display: inline-grid !important; place-items: center; width: 44px; height: 44px; padding: 0 !important; margin: 0;
    border-radius: 50% !important; border: 0 !important; background: #ffffff !important; color: #1d1d1f !important; cursor: pointer; flex: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05) !important; transform: none !important; filter: none !important; }
html[data-mode="dark"] .ax-tbtn { background: #24272d !important; color: #f1f2f4 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08) !important; }
.ax-tbtn:hover { background: #f3f4f6 !important; } html[data-mode="dark"] .ax-tbtn:hover { background: #2c3037 !important; }
.ax-tbtn svg { width: 18px; height: 18px; }
.ax-tpop { position: fixed; z-index: 300; display: none; width: 220px; padding: 6px; box-sizing: border-box; border-radius: 12px; background: #ffffff; color: #1d1d1f;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06); max-height: calc(100vh - 16px); overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html[data-mode="dark"] .ax-tpop { background: #1b1e23; color: #f1f2f4; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.ax-tpop.open { display: block; }
.ax-tpop__lbl { padding: 8px 11px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
.ax-topt { appearance: none; display: flex !important; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 11px !important; border: 0 !important;
    border-radius: 8px !important; background: transparent !important; color: inherit !important; font: 400 14px/1.2 inherit !important; font-family: inherit !important;
    text-align: left; cursor: pointer; box-shadow: none !important; transform: none !important; filter: none !important; min-height: 0 !important; height: auto !important; }
.ax-topt:hover { background: rgba(127,127,127,.1) !important; }
.ax-topt i { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(127,127,127,.22); }
.ax-topt span { flex: 1; }
.ax-topt b { visibility: hidden; font-weight: 700; }
.ax-topt.on { background: color-mix(in srgb, var(--ax-sel) 22%, transparent) !important; }
.ax-topt.on b { visibility: visible; }
/* posisi: pojok kanan atas halaman login */
.ax-tema-pojok { position: fixed; top: 14px; right: 14px; z-index: 60; }
/* posisi: baris atas panel isi (VPN, Report, FinanKu) */
.ax-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.main > .ax-bar--top { margin: -4px 0 12px; }
.ax-tema-top { display: none; margin-left: auto; }
.ax-tema-tnav { display: inline-flex; margin-left: auto; margin-right: 10px; }
.ax-tema-kartu { display: inline-flex; margin-left: auto; margin-right: 6px; }
.topbar .ax-tbtn { width: 38px; height: 38px; }
@media (max-width: 820px) { .ax-tema-top { display: inline-flex; } .main > .ax-bar--top { display: none; } }