:root{--bg:#050a16;--bg2:#0a1328;--card:#0d1830;--line:#1a2a4c;--tx:#e8eef9;--mu:#8798b6;--cy:#22d3ee;--em:#34d399}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.65 Inter,system-ui,sans-serif}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(55% 35% at 85% 0,#22d3ee1f,transparent),radial-gradient(45% 35% at 0 25%,#34d3991a,transparent),linear-gradient(#ffffff08 1px,transparent 1px) 0 0/100% 56px}
header{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:14px 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:#050a16ea;backdrop-filter:blur(10px);z-index:5}
.brand{font-weight:800;font-size:20px;color:var(--cy);text-decoration:none}
nav a{color:var(--mu);margin-left:18px;text-decoration:none}nav a:hover{color:var(--cy)}
main{max-width:1080px;margin:0 auto;padding:26px 5vw 60px}
footer{text-align:center;color:var(--mu);padding:26px;border-top:1px solid var(--line);font-size:13px}
a{color:var(--cy)}h1{font-size:clamp(32px,7vw,58px);line-height:1.08;margin:.2em 0 .3em;font-weight:800;max-width:780px}
h2{margin:2.2em 0 .6em;font-size:22px}h3{margin:1.4em 0 .4em}
.hero{padding:34px 0 6px}.sub{color:var(--mu);max-width:560px}
.console{margin-top:26px;border:1px solid var(--cy);border-radius:4px 22px 4px 22px;padding:18px;background:#07112a;box-shadow:0 0 40px #22d3ee22}
.console .chk{margin:0}.console input{font-size:18px;padding:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.card{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:20px;color:var(--tx);text-decoration:none}
.card:hover{border-color:var(--cy)}.card h3{margin-top:0}
.narrow{max-width:540px;margin:20px auto}.wide{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.price{font-size:24px;font-weight:700;color:var(--em);margin:.2em 0}.price small,.muted{color:var(--mu);font-size:13px;font-weight:400}
ul{padding-left:18px;color:var(--mu)}
input,select,textarea{background:#07101f;color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;min-width:0}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:2px solid var(--cy);outline-offset:1px}
textarea{width:100%;min-height:120px;font-family:ui-monospace,monospace;font-size:13px}
.narrow>input{width:100%;margin:6px 0}
.btn{display:inline-block;background:var(--cy);color:#03121a;border:0;border-radius:10px;padding:11px 18px;font:700 14px Inter,sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--em)}.btn.ghost{background:transparent;color:var(--cy);border:1px solid var(--cy)}.btn.sm{padding:6px 12px;font-size:13px}
.chk,.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}.chk input{flex:1;min-width:130px}.row{justify-content:space-between}
.suffix{color:var(--mu)}
.res{margin-top:14px;padding:12px 14px;border-radius:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.res.ok{background:#34d3991a;border:1px solid var(--em)}.res.no{background:#f8717114;border:1px solid #f87171}
.pill{padding:2px 10px;border-radius:99px;font-size:12px;border:1px solid}.pill.on{color:var(--em)}.pill.off{color:#f87171}
.bar{height:8px;background:var(--line);border-radius:9px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--em))}
.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}th{color:var(--mu);font-weight:500}
.pay{display:flex;flex-wrap:wrap;gap:28px;margin:14px 0}.qr{background:#fff;padding:10px;display:inline-block;border-radius:8px}.big{font-size:22px;font-weight:700;color:var(--cy);margin:0}
.list{display:grid;gap:10px}.err{color:#f87171}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);background:var(--card);border:1px solid var(--em);padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:9}
#toast.show{opacity:1;transform:translateX(-50%)}#toast.err{border-color:#f87171}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== FandyNeon: responsive bundle form ===== */
.card.wide:has(#bn) {
  display: block;
  max-width: 760px;
  margin: 22px auto;
  padding: clamp(18px, 4vw, 32px);
  border-radius: 22px;
  background: linear-gradient(145deg, #0e1930, #081225);
  border-color: #203453;
  box-shadow: 0 15px 45px #0005;
}

.card.wide:has(#bn) > .muted {
  margin: 0 0 24px;
}

.card.wide:has(#bn) label {
  display: block;
  margin: 18px 0 8px;
  color: #dbeafe;
  font-weight: 600;
}

.card.wide:has(#bn) input,
.card.wide:has(#bn) select {
  display: block;
  width: 100%;
  min-height: 52px;
  border-radius: 13px;
  border-color: #263b5b;
  background: #071020;
}

.card.wide:has(#bn) input:focus,
.card.wide:has(#bn) select:focus {
  border-color: var(--cy);
  box-shadow: 0 0 0 3px #22d3ee18;
}

.card.wide:has(#bn) .btn {
  margin-top: 20px;
  min-height: 48px;
  padding-inline: 22px;
  box-shadow: 0 5px 20px #22d3ee20;
}

.card.wide:has(#bn) > .muted:last-child {
  margin-top: 20px;
  margin-bottom: 0;
}

/* ===== Custom dark neon dropdown ===== */
.neon-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 8px 0 14px;
}

.neon-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.neon-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  color: var(--tx);
  text-align: left;
  font: inherit;
  background: linear-gradient(145deg, #0a162b, #071020);
  border: 1px solid #263b5b;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.neon-select-trigger:hover,
.neon-select.open .neon-select-trigger {
  border-color: var(--cy);
  box-shadow: 0 0 0 3px #22d3ee12, 0 0 22px #22d3ee0d;
}

.neon-select-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.neon-select-arrow {
  flex: 0 0 auto;
  color: var(--cy);
  transition: transform .2s;
}

.neon-select.open .neon-select-arrow {
  transform: rotate(180deg);
}

.neon-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: min(300px, 45vh);
  overflow-y: auto;
  padding: 6px;
  background: #0a1428;
  border: 1px solid #294568;
  border-radius: 15px;
  box-shadow: 0 18px 45px #000a, 0 0 25px #22d3ee0b;
}

.neon-select.open .neon-select-menu {
  display: block;
  animation: neon-select-in .16s ease-out;
}

.neon-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  color: #dbe7f7;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.neon-select-option:hover {
  background: #12243b;
  border-color: #1e4960;
}

.neon-select-option[aria-selected="true"] {
  color: var(--cy);
  background: #22d3ee12;
  border-color: #22d3ee45;
}

.neon-select-option[aria-selected="true"]::after {
  content: "✓";
  flex: 0 0 auto;
  color: var(--em);
  font-weight: 800;
}

@keyframes neon-select-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .card.wide:has(#bn) {
    padding: 18px;
    border-radius: 18px;
  }

  .card.wide:has(#bn) .btn {
    width: 100%;
  }

  .neon-select-menu {
    max-height: 38vh;
  }

  .neon-select-option {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-select *,
  .neon-select {
    animation: none !important;
    transition: none !important;
  }
}


/* .hamburger-drawer-installed — navigasi geser WilzzSTR-Host */
header {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 14px;
}
.hamburger {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c1425;
  cursor: pointer;
  z-index: 31;
}
.hamburger span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--cy);
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger-active span:first-child {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-active span:nth-child(2) {
  opacity: 0;
}
.hamburger-active span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}
.brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nav {
  position: fixed;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: 0;
  width: 37.5vw;
  max-width: 360px;
  min-width: 180px;
  padding: 82px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow-y: auto;
  background: #081120;
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 45px #0008;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s ease;
}
#nav.menu-open {
  transform: translateX(0);
  visibility: visible;
}
#nav a {
  display: block;
  margin: 0;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--mu);
  text-decoration: none;
  overflow-wrap: anywhere;
}
#nav a:hover, #nav a:focus-visible {
  color: var(--cy);
  background: #102038;
  border-color: var(--line);
}
.menu-overlay {
  position: fixed;
  z-index: 29;
  inset: 0;
  background: #0009;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.menu-overlay-open {
  opacity: 1;
  visibility: visible;
}
body.menu-lock {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  #nav, .menu-overlay, .hamburger span {
    transition: none;
  }
}



/* HAMBURGER MENU — aturan final */
header {
  position: sticky !important;
  top: 0;
  z-index: 1002 !important;
}

#nav {
  box-sizing: border-box !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 42vw !important;
  min-width: 200px !important;
  max-width: 380px !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 84px 14px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: #081120 !important;
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 45px #0008;
  transform: translateX(-105%);
  visibility: hidden;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: transform .28s ease, visibility .28s ease;
  z-index: 1;
}

#nav.menu-open {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
}

#nav a,
#nav button {
  position: relative;
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0;
  padding: 12px 10px;
  font-size: 14px;
  overflow-wrap: anywhere;
  pointer-events: auto !important;
  cursor: pointer;
}

#nav a {
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--mu);
  text-decoration: none;
}

#nav a:hover,
#nav a:focus-visible {
  color: var(--cy);
  background: #102038;
  border-color: var(--line);
}

.menu-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-support {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto !important;
  padding-top: 18px;
  flex-shrink: 0;
}

.menu-support-title {
  padding: 10px;
  border-top: 1px solid var(--line);
  color: var(--mu);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.menu-support a {
  padding: 11px 10px !important;
  font-size: 13px !important;
}

.menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1001 !important;
  background: #0009;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity .28s ease, visibility .28s ease;
}

.menu-overlay.menu-overlay-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}

.hamburger {
  position: relative;
  z-index: 1004 !important;
  pointer-events: auto !important;
}

body.menu-lock {
  overflow: hidden;
}

@media (max-width: 400px) {
  #nav {
    width: 46vw !important;
    min-width: 190px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav, .menu-overlay, .hamburger span {
    transition: none !important;
  }
}

/* FIX LAPISAN MENU HAMBURGER */
header {
  isolation: auto !important;
  z-index: 1002 !important;
}

header #nav {
  z-index: 1003 !important;
}

#menuOverlay {
  z-index: 1001 !important;
}

#hamburger {
  z-index: 1004 !important;
}

/* MENU CARDS — WilzzSTR-Host */
#nav .menu-main,
#nav .menu-support {
  gap: 10px !important;
}

#nav .menu-main a,
#nav .menu-support a {
  display: flex !important;
  align-items: center;
  min-height: 46px;
  padding: 12px 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: #0c1729;
  color: var(--mu);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}

#nav .menu-main a:hover,
#nav .menu-main a:focus-visible,
#nav .menu-support a:hover,
#nav .menu-support a:focus-visible {
  background: #12243a !important;
  border-color: var(--cy) !important;
  color: var(--cy) !important;
}

#nav .menu-main a:active,
#nav .menu-support a:active {
  transform: scale(.98);
}

#nav .menu-support-title {
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #nav .menu-main a,
  #nav .menu-support a {
    transition: none !important;
  }
}

/* ===== OWNER PANEL UI REFRESH ===== */
.owner-panel {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 36px;
  box-sizing: border-box;
  color: var(--text, #e8f0ff);
}

.owner-panel h2 {
  font-size: 27px;
  margin: 4px 0 10px;
  letter-spacing: -.5px;
}

.owner-panel h3 {
  font-size: 19px;
  margin: 28px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120, 160, 210, .18);
}

.owner-panel p {
  line-height: 1.6;
}

.owner-panel .owner-users {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.owner-panel .owner-user {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(91, 153, 220, .23);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(18, 36, 61, .8), rgba(8, 15, 29, .9));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.owner-panel .owner-user > b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.owner-panel .owner-user p {
  margin: 10px 0 14px;
  color: #b8c7dc;
}

.owner-panel form#owner-create-role {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(91, 153, 220, .25);
  border-radius: 18px;
  background: rgba(11, 23, 42, .7);
}

.owner-panel label {
  display: block;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.owner-panel input:not([type="checkbox"]),
.owner-panel select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  margin: 5px 0 10px;
  padding: 12px 14px;
  border: 1px solid #263b5c;
  border-radius: 12px;
  background: #0b1629;
  color: #edf5ff;
  font: inherit;
  outline: none;
}

.owner-panel input:not([type="checkbox"]):focus,
.owner-panel select:focus {
  border-color: #28c8e5;
  box-shadow: 0 0 0 3px rgba(40, 200, 229, .12);
}

.owner-panel .owner-assign {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.owner-panel button,
.owner-panel .owner-assign button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid rgba(80, 220, 245, .45);
  border-radius: 12px;
  background: linear-gradient(135deg, #13b9d5, #287be8);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(20, 137, 221, .2);
  transition: transform .15s ease, filter .15s ease;
}

.owner-panel button:active {
  transform: scale(.98);
}

.owner-panel button:hover {
  filter: brightness(1.12);
}

/* Hak akses: dua kolom, tersusun vertikal */
.owner-panel .owner-permissions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 2px 0 8px;
}

.owner-panel .owner-permissions label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(100, 145, 195, .2);
  border-radius: 10px;
  background: rgba(19, 37, 62, .65);
  color: #dce9fa;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.owner-panel .owner-permissions input[type="checkbox"] {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: #22c7e5;
}

.owner-panel small {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(35, 190, 150, .1);
  color: #7ee5c4;
}

@media (min-width: 650px) {
  .owner-panel .owner-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-panel .owner-assign {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .owner-panel .owner-assign button {
    width: auto;
    margin-bottom: 10px;
  }
}

@media (max-width: 380px) {
  .owner-panel {
    padding-right: 10px;
    padding-left: 10px;
  }

  .owner-panel .owner-permissions {
    gap: 7px;
  }

  .owner-panel .owner-permissions label {
    padding: 8px 6px;
    gap: 6px;
    font-size: 12px;
  }
}

/* ===== END OWNER PANEL UI REFRESH ===== */

/* Panel Administrasi WilzzSTR-Host */
.admin-panel{display:grid;gap:20px;color:var(--tx)}
.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at top right,#123047,var(--card) 65%)}
.admin-heading h2{margin:8px 0;font-size:clamp(24px,5vw,32px)}
.admin-heading p,.admin-section-title p{margin:0;color:var(--mu);font-size:14px}
.admin-eyebrow{color:var(--cy);font-size:11px;font-weight:800;letter-spacing:1.3px}
.admin-role{border:1px solid var(--cy);border-radius:999px;padding:7px 11px;color:var(--cy);font-size:12px}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.admin-stat{padding:18px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(150deg,var(--card),var(--bg2));display:grid;gap:8px}
.admin-stat span,.admin-stat small{color:var(--mu);font-size:12px}
.admin-stat strong{font-size:27px;color:var(--cy)}
.admin-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.admin-section-title h3{margin:0 0 5px}
.admin-orders,.admin-reports{display:grid;gap:12px}
.admin-order,.admin-report{min-width:0;padding:18px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--card),var(--bg2))}
.admin-order-top,.admin-report-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.admin-order h3{overflow-wrap:anywhere;margin:7px 0}
.admin-order p,.admin-report p{overflow-wrap:anywhere;color:var(--mu);font-size:13px;margin:7px 0}
.admin-order-id{font-size:11px;color:var(--cy)}
.admin-status{display:inline-block;white-space:nowrap;padding:6px 9px;border-radius:999px;background:#263348;color:var(--tx);font-size:11px}
.admin-status.is-pending{background:#493819;color:#ffd58a}
.admin-status.is-paid{background:#123e32;color:#72e6b5}
.admin-status.is-rejected{background:#4a2029;color:#ff9ca8}
.admin-order-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.admin-order-meta div{display:grid;gap:6px;min-width:0}
.admin-order-meta small{color:var(--mu)}
.admin-order-meta b{overflow-wrap:anywhere}
.admin-actions{display:flex;flex-wrap:wrap;gap:9px}
.admin-reject-btn{background:#a83245;color:#fff}
.admin-reject-btn:hover{background:#c44155}
.admin-reason{padding:12px;border-radius:10px;background:var(--bg2);font-size:13px}
.admin-reason p{margin-bottom:0}
.admin-no-action,.admin-empty{padding:18px;color:var(--mu);border:1px dashed var(--line);border-radius:12px}
.admin-report-top span{font-size:11px;color:var(--mu);text-align:right}
.admin-modal-backdrop{position:fixed;inset:0;z-index:1000;background:#000b;display:grid;place-items:center;padding:16px;overflow-y:auto}
.admin-modal{width:min(100%,480px);max-height:90vh;overflow-y:auto;padding:23px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--card),var(--bg2));box-shadow:0 25px 80px #0009}
.admin-modal h2{margin:10px 0}
.admin-modal>p{color:var(--mu);font-size:13px;line-height:1.6}
.admin-modal label{display:block;margin:15px 0 7px;font-size:13px;color:var(--tx)}
.admin-modal select,.admin-modal textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--tx);font:inherit}
.admin-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media(max-width:600px){
  .admin-stats{grid-template-columns:1fr}
  .admin-stat{padding:14px}
  .admin-stat strong{font-size:23px}
  .admin-heading{padding:17px}
  .admin-order,.admin-report{padding:14px}
  .admin-section-title{align-items:flex-start}
  .admin-section-title .btn{padding:9px;font-size:12px}
  .admin-actions .btn{flex:1;text-align:center;padding:10px 8px}
}

/* Admin transaction filters */
.admin-filter-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.admin-filter-btn {
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.admin-filter-btn.active {
  background: var(--cy);
  color: var(--bg);
  border-color: var(--cy);
}

.admin-filter-btn:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 3px;
}

.admin-order[hidden],
#admin-filter-empty[hidden] {
  display: none !important;
}

/* Perbaikan khusus Panel DNS Manager */
.card.wide:has(#dnsSearch) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.card.wide:has(#dnsSearch) #dnsSearch {
  display: block;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  margin: 16px 0;
}

.card.wide:has(#dnsSearch) #dnsTable {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#dnsTable .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#dnsTable table {
  width: 100%;
  border-collapse: collapse;
}

#dnsTable th,
#dnsTable td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

#dnsTable .dns-record {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

#dnsTable form {
  min-width: 0;
  width: 100%;
}

#dnsTable form input,
#dnsTable form select {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 6px 0 10px;
}

#dnsTable form label {
  display: block;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .card.wide:has(#dnsSearch) {
    padding: 14px;
    overflow: hidden;
  }

  #dnsTable table,
  #dnsTable tbody {
    display: block;
    width: 100%;
  }

  #dnsTable thead {
    display: none;
  }

  #dnsTable tbody tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg2);
  }

  #dnsTable tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  #dnsTable tbody td:last-child {
    border-bottom: 0;
  }

  #dnsTable tbody td:nth-child(1)::before {
    content: "Domain";
  }

  #dnsTable tbody td:nth-child(2)::before {
    content: "Jenis layanan";
  }

  #dnsTable tbody td:nth-child(3)::before {
    content: "Status";
  }

  #dnsTable tbody td:nth-child(4)::before {
    content: "Record DNS";
  }

  #dnsTable tbody td:nth-child(5)::before {
    content: "Tambah record";
  }

  #dnsTable tbody td::before {
    display: block;
    margin-bottom: 8px;
    color: var(--mu);
    font-size: 12px;
    font-weight: 600;
  }

  #dnsTable .dns-record .btn {
    display: block;
    margin-top: 8px;
  }
}