/* Base typography & element defaults preserved alongside Tailwind v4 layers */
p { margin: 0.7em 0; }
ul { list-style: disc; padding-left: 18px; }
b, strong { font-weight: 700; }
code, pre, .mono-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.price, .dashboard-stat strong, .manager-stat-grid article strong, .support-stats strong, td, time { font-variant-numeric: tabular-nums; }

: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 "Plus Jakarta Sans",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 "Plus Jakarta Sans",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;
  }
}

/* ===== FandyHosting Subdomain Control Center ===== */
.sd-page{max-width:100%;margin:0 auto;color:var(--tx)}
.sd-page *{min-width:0}
.sd-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,5vw,42px);border:1px solid #254568;border-radius:24px;background:radial-gradient(ellipse at 85% 15%,#22d3ee20,transparent 38%),linear-gradient(130deg,#10213d,#091326 72%);box-shadow:0 18px 55px #0003}
.sd-hero-content{position:relative;z-index:1;max-width:620px}
.sd-eyebrow,.sd-section-label{display:flex;align-items:center;gap:8px;color:var(--cy);font-size:10px;font-weight:800;letter-spacing:.15em}
.sd-live-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--em);box-shadow:0 0 12px #34d399}
.sd-hero h2{margin:18px 0 12px;font-size:clamp(27px,5vw,43px);line-height:1.13;letter-spacing:-.04em;max-width:540px}
.sd-hero-content>p{max-width:530px;margin:0;color:#aabbd3;line-height:1.8;font-size:14px}
.sd-hero-points{display:flex;flex-wrap:wrap;gap:9px 17px;margin-top:23px;color:#c5d8ed;font-size:11px}
.sd-hero-points span:first-letter{color:var(--em)}
.sd-globe{position:relative;display:grid;place-items:center;flex:0 0 145px;width:145px;height:145px;border:1px solid #22d3ee38;border-radius:50%;background:radial-gradient(circle,#22d3ee16,transparent 68%);box-shadow:inset 0 0 40px #22d3ee0a}
.sd-globe-ring{position:absolute;inset:13px;border:1px dashed #22d3ee55;border-radius:50%;animation:sd-spin 24s linear infinite}
.sd-globe-ring:before,.sd-globe-ring:after{content:"";position:absolute;border:1px solid #22d3ee38;border-radius:50%;inset:18px -4px}
.sd-globe-ring:after{transform:rotate(60deg)}
.sd-globe-core{display:flex;flex-direction:column;align-items:center;color:#e7fbff;font-size:26px;font-weight:900;letter-spacing:.04em;text-shadow:0 0 20px #22d3ee65}
.sd-globe-core span{font-size:8px;letter-spacing:.2em;color:var(--cy)}
@keyframes sd-spin{to{transform:rotate(360deg)}}
.sd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:17px 0 25px}
.sd-stat{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#0d1a31,#091326)}
.sd-stat-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #22d3ee30;border-radius:13px;background:#22d3ee0c;color:var(--cy);font-size:23px}
.sd-stat small{display:block;color:var(--mu);font-size:11px;margin-bottom:4px}
.sd-stat strong{display:block;font-size:21px;line-height:1.2}
.sd-stat strong span{font-size:13px;color:var(--mu);font-weight:500}
.sd-stat .sd-free{color:var(--em);font-size:18px}
.sd-content-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr);gap:16px;align-items:stretch}
.sd-panel{padding:clamp(19px,3vw,27px);border:1px solid var(--line);border-radius:19px;background:linear-gradient(150deg,#0d1930,#091326)}
.sd-panel h3,.sd-owned h3{margin:10px 0 5px;font-size:20px;letter-spacing:-.02em}
.sd-description{margin:0 0 21px;color:var(--mu);font-size:12px;line-height:1.7}
.sd-label{display:block;margin:0 0 8px;font-size:12px;font-weight:700;color:#d7e6f8}
.sd-domain-input{display:flex;align-items:center;gap:0;width:100%;min-height:54px;border:1px solid #29415f;border-radius:13px;background:#060e1c;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.sd-domain-input:focus-within{border-color:var(--cy);box-shadow:0 0 0 3px #22d3ee12}
.sd-domain-input input{flex:1;width:40%;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:14px 12px;border-radius:0;font-size:14px}
.sd-domain-input input::placeholder{color:#647995}
.sd-domain-suffix{flex:0 1 auto;max-width:58%;overflow-wrap:anywhere;padding:10px 12px;border-left:1px solid #223653;color:var(--cy);font-size:12px;font-weight:700}
.sd-help{margin:8px 0 17px;color:var(--mu);font-size:11px;line-height:1.7}
.sd-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:49px;border-radius:12px;box-shadow:0 7px 20px #22d3ee14}
.sd-submit span{font-size:19px;transition:transform .2s}
.sd-submit:hover span{transform:translateX(4px)}
.sd-note{display:flex;align-items:flex-start;gap:10px;margin-top:19px;padding:12px;border:1px solid #29415a;border-radius:12px;background:#071326}
.sd-note-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#22d3ee16;color:var(--cy);font-size:12px;font-weight:800}
.sd-note p{margin:0;color:var(--mu);font-size:11px;line-height:1.75}
.sd-quota-number{margin:23px 0 15px;font-size:34px;font-weight:850;letter-spacing:-.04em}
.sd-quota-number span{font-size:13px;color:var(--mu);font-weight:500;letter-spacing:0}
.sd-progress{height:8px;overflow:hidden;border-radius:99px;background:#1b2c48}
.sd-progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#34d399);transition:width .3s}
.sd-progress-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:var(--mu);font-size:11px}
.sd-progress-meta strong{color:#dceafb}
.sd-quota-divider{height:1px;margin:21px 0;background:var(--line)}
.sd-quota-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:13px 0;font-size:11px}
.sd-quota-row span{color:var(--mu)}
.sd-quota-row b{text-align:right;font-size:11px;color:#dceafb}
.sd-quota-row .sd-positive{color:var(--em)}
.sd-quota-row .sd-warning{color:#fbbf24}
.sd-limit-note{padding:10px;border:1px solid #fbbf2433;border-radius:10px;color:#fcd34d;font-size:11px;line-height:1.7}
.sd-owned{margin-top:31px}
.sd-owned-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}
.sd-owned-heading h3{margin-top:7px}
.sd-owned-heading .sd-description{margin:4px 0 0}
.sd-count{flex:0 0 auto;padding:6px 11px;border:1px solid var(--line);border-radius:99px;color:var(--mu);font-size:11px}
.sd-domain-list{display:grid;gap:10px}
.sd-domain-item{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(110deg,#0d1930,#091326);color:var(--tx);text-decoration:none;transition:border-color .2s,transform .2s,background .2s}
.sd-domain-item:hover{border-color:#22d3ee70;transform:translateY(-1px);background:#0d1c34}
.sd-domain-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#22d3ee12;color:var(--cy);font-size:20px}
.sd-domain-info{flex:1;overflow:hidden}
.sd-domain-info strong,.sd-domain-info small{display:block;overflow-wrap:anywhere}
.sd-domain-info strong{font-size:13px}
.sd-domain-info small{margin-top:3px;color:var(--mu);font-size:11px}
.sd-domain-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:10px}
.sd-domain-status i{width:6px;height:6px;border-radius:50%;background:var(--em)}
.sd-domain-status.is-active{color:var(--em)}
.sd-domain-status.is-inactive{color:#fca5a5}
.sd-domain-status.is-inactive i{background:#f87171}
.sd-domain-arrow{color:var(--mu);font-size:17px;transition:transform .2s}
.sd-domain-item:hover .sd-domain-arrow{transform:translateX(3px);color:var(--cy)}
.sd-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 16px;border:1px dashed #29415f;border-radius:16px;background:#091326}
.sd-empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#22d3ee12;color:var(--cy);font-size:26px}
.sd-empty strong{margin-top:13px;font-size:14px}
.sd-empty p{margin:5px 0 0;color:var(--mu);font-size:12px}
.sd-bottom-tip{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border:1px solid #22d3ee20;border-radius:13px;background:#22d3ee08}
.sd-bottom-tip>span{color:var(--cy);font-size:17px}
.sd-bottom-tip p{margin:0;color:var(--mu);font-size:11px;line-height:1.8}
.sd-bottom-tip strong{color:#dbeafe}
@media(max-width:700px){
  .sd-hero{padding:24px 20px;border-radius:19px}
  .sd-globe{flex-basis:82px;width:82px;height:82px}
  .sd-globe-ring{inset:7px}
  .sd-globe-ring:before,.sd-globe-ring:after{inset:10px -3px}
  .sd-globe-core{font-size:17px}
  .sd-globe-core span{font-size:6px}
  .sd-stats{gap:8px}
  .sd-stat{display:block;padding:12px 10px;border-radius:13px}
  .sd-stat-icon{width:33px;height:33px;min-width:33px;margin-bottom:9px;font-size:18px;border-radius:10px}
  .sd-stat small{font-size:10px;line-height:1.5}
  .sd-stat strong{font-size:18px}
  .sd-stat strong span{font-size:11px}
  .sd-stat .sd-free{font-size:16px}
  .sd-content-grid{grid-template-columns:minmax(0,1fr)}
  .sd-panel{border-radius:16px}
  .sd-domain-item{gap:9px;padding:12px 10px}
  .sd-domain-icon{flex-basis:34px;width:34px;height:34px}
  .sd-domain-info strong{font-size:12px}
  .sd-domain-status{font-size:9px}
}
@media(max-width:420px){
  .sd-hero{gap:7px;padding:22px 16px}
  .sd-hero h2{font-size:27px}
  .sd-hero-content>p{font-size:12px}
  .sd-hero-points{display:grid;gap:7px;font-size:10px}
  .sd-globe{flex-basis:58px;width:58px;height:58px}
  .sd-globe-ring{inset:4px}
  .sd-globe-core{font-size:12px}
  .sd-globe-core span{font-size:5px}
  .sd-domain-suffix{font-size:10px;padding:10px 7px}
  .sd-domain-status{gap:4px}
  .sd-domain-arrow{display:none}
  .sd-owned-heading{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.sd-globe-ring{animation:none}.sd-domain-item,.sd-submit span{transition:none}}

/* ===== FandyHosting Premium Homepage ===== */
.home-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr);align-items:center;gap:30px;min-height:390px;overflow:hidden;padding:clamp(24px,5vw,54px);margin:14px 0 42px;border:1px solid rgba(34,211,238,.2);border-radius:26px;background:radial-gradient(ellipse at 82% 42%,rgba(34,211,238,.14),transparent 43%),linear-gradient(135deg,#0e1d39 0%,#091326 58%,#0c2032 100%);box-shadow:0 22px 70px rgba(0,0,0,.2);animation:home-enter .6s ease both}
.home-hero-glow{position:absolute;z-index:-1;width:250px;height:250px;right:15%;top:-150px;border-radius:50%;background:var(--cy);filter:blur(90px);opacity:.17;animation:home-glow 7s ease-in-out infinite alternate}
.home-hero-copy{position:relative;z-index:2;min-width:0}
.home-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--cy);font-size:10px;font-weight:800;letter-spacing:1.7px}
.home-kicker i,.home-terminal-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 12px rgba(52,211,153,.7)}
.home-hero h1{max-width:670px;margin:17px 0;font-size:clamp(30px,4.2vw,49px);line-height:1.12;letter-spacing:-1.7px;font-weight:850}
.home-hero h1 span{color:var(--cy);background:linear-gradient(100deg,#22d3ee,#6ee7b7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.home-lead{max-width:530px;color:#a9bad3;font-size:14px;line-height:1.9}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}
.home-hero-actions .btn,.home-subdomain-banner>.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px}
.home-primary{background:linear-gradient(110deg,#22d3ee,#34d399)!important;color:#03151d!important;box-shadow:0 7px 24px rgba(34,211,238,.13)}
.home-primary:hover{filter:brightness(1.08);transform:translateY(-2px)}
.home-benefits{display:flex;flex-wrap:wrap;gap:15px;margin-top:22px;color:#b4c6dc;font-size:11px}
.home-benefits span:first-letter{color:var(--em)}
.home-visual{position:relative;display:grid;place-items:center;min-height:265px;perspective:800px}
.home-orbit{position:absolute;border:1px solid rgba(34,211,238,.16);border-radius:50%;transform:rotate(-24deg)}
.home-orbit-one{width:270px;height:210px;animation:home-orbit 18s linear infinite}
.home-orbit-two{width:220px;height:280px;transform:rotate(48deg);border-color:rgba(52,211,153,.14);animation:home-orbit 23s linear infinite reverse}
.home-terminal{position:relative;z-index:1;width:min(100%,330px);overflow:hidden;border:1px solid #29435a;border-radius:15px;background:rgba(5,13,27,.94);box-shadow:0 22px 65px rgba(0,0,0,.4);transform:rotateY(-7deg) rotateX(3deg);animation:home-float 5s ease-in-out infinite}
.home-terminal-top{display:flex;align-items:center;gap:6px;padding:13px 14px;border-bottom:1px solid #1c3047;background:#0d1a2d}
.home-dot{width:7px;height:7px;border-radius:50%;background:#526a83}
.home-dot:first-child{background:#fb7185}.home-dot:nth-child(2){background:#fbbf24}.home-dot:nth-child(3){background:#34d399}
.home-terminal-name{margin-left:7px;color:#a3b6ce;font-size:10px}
.home-terminal-top>b{margin-left:auto;color:var(--em);font-size:9px;letter-spacing:1px}
.home-terminal-body{padding:19px 15px;color:#d6e6f8;font:11px/2.1 ui-monospace,SFMono-Regular,monospace}
.home-code-muted{color:#50657e}.home-code-blue{color:#67e8f9}.home-code-green{color:#6ee7b7}
.home-terminal-status{display:flex;align-items:center;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid #20334a;color:#91a9c2;font:10px/1.6 "Plus Jakarta Sans",system-ui,sans-serif}
.home-terminal-status i{width:6px;height:6px}
.home-float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(116,160,190,.24);border-radius:12px;background:rgba(10,25,44,.96);box-shadow:0 12px 32px rgba(0,0,0,.28);animation:home-float 4.5s ease-in-out infinite}
.home-float>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(34,211,238,.12);color:var(--cy);font-size:19px}
.home-float div{display:grid;gap:2px}.home-float small{color:#8da6c0;font-size:8px;letter-spacing:1px}.home-float strong{font-size:10px;color:#e5f1ff}
.home-float>b{color:var(--cy);font-size:14px}.home-float .home-online{color:var(--em);font-size:9px}
.home-float-domain{top:15px;right:-2px}.home-float-host{bottom:9px;left:-7px;animation-delay:-2s}
.home-section{margin:38px 0;scroll-margin-top:25px}
.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.home-section-head h2,.home-bundle-intro h2,.home-subdomain-banner h2{margin:8px 0;font-size:clamp(22px,3vw,30px);line-height:1.25;letter-spacing:-.6px}
.home-section-head p,.home-bundle-intro>p,.home-subdomain-banner p{margin:0;color:var(--mu);font-size:13px;line-height:1.8}
.home-section-icon{display:grid;place-items:center;flex:0 0 45px;width:45px;height:45px;border:1px solid var(--line);border-radius:14px;color:var(--cy);font-size:24px;background:var(--bg2)}
.home-domain-search{padding:clamp(17px,3vw,27px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(140deg,rgba(13,24,48,.96),rgba(7,16,31,.96))}
.home-search-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.home-search-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(34,211,238,.1);color:var(--cy);font-size:24px}
.home-search-title>div{display:grid;gap:2px}.home-search-title strong{font-size:14px}.home-search-title small,.home-search-note{color:var(--mu);font-size:11px}
.home-domain-search .console{padding:0;background:transparent;border:0;box-shadow:none}
.home-domain-search .chk{display:flex;gap:9px}
.home-domain-search .chk input{flex:1;min-width:0}
.home-domain-search .chk select{width:120px;min-width:120px;max-width:120px;flex-shrink:0;box-sizing:border-box;white-space:nowrap}
.home-domain-search .chk .btn{white-space:nowrap}
.home-search-note{margin:12px 0 0}
.home-domain-grid,.home-plans{align-items:stretch}
.home-price-card,.home-plan-card{position:relative;display:flex;flex-direction:column;min-width:0;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.home-price-card:hover,.home-plan-card:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.55);box-shadow:0 16px 34px rgba(0,0,0,.2)}
.home-price-top{display:flex;align-items:center;justify-content:space-between}
.home-domain-symbol,.home-plan-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(34,211,238,.1);color:var(--cy);font-size:21px}
.home-price-tag,.home-plan-label{color:var(--mu);font-size:9px;font-weight:800;letter-spacing:1.1px}
.home-price-card h3{margin:16px 0 0;font-size:23px}
.home-price-card .price,.home-plan-card .price{margin:7px 0;font-size:clamp(17px,2vw,22px);font-weight:800;overflow-wrap:anywhere}
.home-price-card .price small,.home-plan-card .price small{font-size:11px;font-weight:500;color:var(--mu)}
.home-card-desc,.home-plan-desc{margin:4px 0 17px;color:var(--mu);font-size:12px;line-height:1.7}
.home-price-card .btn{margin-top:auto;align-self:flex-start}
.home-bundle-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:25px;padding:clamp(18px,3.5vw,32px);border:1px solid rgba(34,211,238,.16);border-radius:23px;background:radial-gradient(ellipse at 0% 0%,rgba(34,211,238,.07),transparent 52%),var(--bg2)}
.home-bundle-intro h2{font-size:clamp(25px,3vw,34px)}
.home-bundle-points{display:grid;gap:10px;margin-top:21px;color:#b9cce1;font-size:12px}
.home-bundle-points span:first-letter{color:var(--em)}
.home-bundle{width:100%;min-width:0;padding:clamp(16px,3vw,25px);border-color:#263b58;box-shadow:0 15px 35px rgba(0,0,0,.13)}
.home-bundle-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.home-bundle-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(34,211,238,.12);color:var(--cy);font-size:21px}
.home-bundle-heading h3{margin:0;font-size:16px}.home-bundle-heading p{margin:3px 0 0;font-size:11px}
.home-bundle>label{display:block;margin:12px 0 5px;font-size:12px;font-weight:650;color:#c8d8e9}
.home-bundle>input,.home-bundle>select{width:100%;min-width:0}
.home-bundle>.btn{width:100%;margin-top:17px;text-align:center}
.home-bundle>.muted:last-child{font-size:10px}
.home-plan-card{padding:23px}
.home-plan-card .home-plan-symbol{margin:14px 0 4px}
.home-plan-card h3{margin:7px 0;font-size:19px}
.home-plan-badge{position:absolute;top:13px;right:13px;padding:5px 8px;border-radius:20px;background:rgba(34,211,238,.12);color:var(--cy);font-size:8px;font-weight:800;letter-spacing:.6px}
.home-plan-featured{border-color:rgba(34,211,238,.42);background:radial-gradient(ellipse at 100% 0%,rgba(34,211,238,.11),transparent 60%),linear-gradient(160deg,var(--card),var(--bg2))}
.home-plan-divider{height:1px;margin:12px 0;background:var(--line)}
.home-plan-card ul{display:grid;gap:9px;margin:0 0 22px;padding:0;list-style:none;color:var(--mu);font-size:12px}
.home-plan-card li{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid rgba(135,152,182,.12)}
.home-plan-card li strong{color:var(--tx);text-align:right}
.home-plan-card>.btn{width:100%;margin-top:auto;text-align:center}
.home-subdomain-banner{position:relative;isolation:isolate;display:grid;grid-template-columns:85px minmax(0,1fr) auto;align-items:center;gap:22px;overflow:hidden;margin:42px 0 25px;padding:clamp(19px,3.5vw,32px);border:1px solid rgba(52,211,153,.22);border-radius:22px;background:radial-gradient(ellipse at 0% 50%,rgba(52,211,153,.1),transparent 55%),linear-gradient(120deg,#0d1d31,#0a1528)}
.home-subdomain-banner h2{font-size:clamp(20px,2.8vw,27px)}
.home-subdomain-banner p{max-width:560px}
.home-subdomain-banner>div>small{display:block;margin-top:9px;color:var(--em);font-size:11px}
.home-subdomain-art{position:relative;display:grid;place-items:center;width:75px;height:75px;border:1px solid rgba(52,211,153,.25);border-radius:22px;background:rgba(52,211,153,.06);color:var(--em);font-size:35px}
.home-subdomain-art i{position:absolute;width:7px;height:7px;border:1px solid var(--em);border-radius:50%;animation:home-pulse 3s ease-in-out infinite}
.home-subdomain-art i:nth-of-type(1){top:4px;right:12px}.home-subdomain-art i:nth-of-type(2){bottom:10px;left:3px;animation-delay:-1s}.home-subdomain-art i:nth-of-type(3){right:1px;bottom:20px;animation-delay:-2s}
.home-subdomain-banner>.btn{white-space:nowrap}
.home-footer-note{display:flex;align-items:center;gap:12px;margin:25px 0 12px;padding:17px 19px;border:1px solid var(--line);border-radius:15px;background:rgba(13,24,48,.55)}
.home-footer-note>span{color:var(--cy);font-size:23px}.home-footer-note p{margin:0;color:var(--mu);font-size:11px;line-height:1.8}.home-footer-note strong{color:var(--tx);font-size:12px}
@keyframes home-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes home-glow{from{transform:translateX(-20px);opacity:.1}to{transform:translateX(35px);opacity:.22}}
@keyframes home-orbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes home-pulse{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.3);opacity:1}}
@media(max-width:760px){
 .home-hero{grid-template-columns:minmax(0,1fr);gap:12px;min-height:0;padding:27px 22px;margin-top:8px;border-radius:21px}
 .home-hero h1{font-size:clamp(31px,8vw,43px);letter-spacing:-1.1px}
 .home-visual{min-height:260px;margin:0 auto;width:min(100%,390px)}
 .home-orbit-one{width:245px}.home-orbit-two{height:245px}
 .home-terminal{width:min(100%,315px)}
 .home-float-domain{right:0}.home-float-host{left:0}
 .home-bundle-section{grid-template-columns:minmax(0,1fr);gap:22px}
 .home-bundle-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:10px}
 .home-subdomain-banner{grid-template-columns:58px minmax(0,1fr);gap:15px}
 .home-subdomain-art{width:55px;height:55px;border-radius:16px;font-size:27px}
 .home-subdomain-banner>.btn{grid-column:1/-1;justify-self:stretch}
}
@media(max-width:480px){
 .home-hero{padding:23px 17px}
 .home-hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}
 .home-hero-actions .btn{width:100%;text-align:center}
 .home-benefits{gap:9px 13px;font-size:10px}
 .home-visual{min-height:235px}
 .home-terminal-body{font-size:10px;padding:15px 11px}
 .home-float{gap:7px;padding:8px}
 .home-float>span{width:29px;height:29px}
 .home-float-domain{top:5px}.home-float-host{bottom:0}
 .home-section{margin:30px 0}
 .home-section-head h2{font-size:23px}
 .home-domain-search .chk{display:grid;grid-template-columns:minmax(0,1fr) 110px}
 .home-domain-search .chk .btn{grid-column:1/-1;width:100%}
 .home-domain-grid,.home-plans{grid-template-columns:minmax(0,1fr)}
 .home-price-card,.home-plan-card{padding:18px}
 .home-bundle-section{padding:15px}
 .home-bundle-points{grid-template-columns:1fr;gap:7px}
 .home-subdomain-banner{padding:18px 15px}
 .home-subdomain-banner h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 .home-hero,.home-hero-glow,.home-orbit,.home-terminal,.home-float,.home-subdomain-art i{animation:none!important}
 .home-price-card,.home-plan-card,.home-primary{transition:none!important}
}

/* ===== FandyHosting Help Center ===== */
.help-page{width:100%;max-width:1100px;margin:0 auto;padding:8px 0 36px;color:var(--tx)}
.help-hero{position:relative;overflow:hidden;padding:clamp(24px,5vw,44px);margin-bottom:22px;border:1px solid rgba(34,211,238,.2);border-radius:24px;background:radial-gradient(ellipse at 90% 0%,rgba(34,211,238,.15),transparent 48%),linear-gradient(135deg,#101e34,#08111f 75%);box-shadow:0 18px 45px rgba(0,0,0,.15)}
.help-kicker{display:inline-block;margin-bottom:12px;color:var(--cy);font-size:11px;font-weight:800;letter-spacing:1.7px}
.help-hero h1{margin:0 0 12px;font-size:clamp(29px,5vw,45px);line-height:1.12;letter-spacing:-1px}
.help-hero h1 span{color:var(--cy)}
.help-hero>p{max-width:620px;margin:0 0 18px;color:var(--mu);line-height:1.8}
.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:24px}
.help-card,.help-faq,.help-guide,.help-report-form,.help-report-item{min-width:0;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(19,34,55,.92),rgba(8,17,31,.96));}
.help-card{display:flex;flex-direction:column;padding:21px;text-decoration:none;color:var(--tx);transition:transform .2s,border-color .2s}
.help-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.5)}
.help-icon{display:grid;place-items:center;width:43px;height:43px;margin-bottom:14px;border:1px solid rgba(34,211,238,.2);border-radius:13px;background:rgba(34,211,238,.08);font-size:21px}
.help-card h3,.help-guide h3{margin:0 0 8px;font-size:16px}
.help-card p,.help-guide p{margin:0 0 16px;color:var(--mu);font-size:13px;line-height:1.75}
.help-link{margin-top:auto;color:var(--cy);font-size:13px;font-weight:750}
.help-faq{padding:clamp(18px,3vw,26px);margin-bottom:20px}
.help-faq h2{margin:0 0 15px;font-size:20px}
.help-faq details{padding:15px 0;border-top:1px solid var(--line)}
.help-faq summary{cursor:pointer;font-size:14px;font-weight:700}
.help-faq details p{margin:11px 0 0;color:var(--mu);font-size:13px;line-height:1.8}
.help-guide-list{display:grid;gap:12px}
.help-guide{display:flex;gap:17px;align-items:flex-start;padding:20px}
.help-guide>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border:1px solid rgba(34,211,238,.25);border-radius:12px;background:rgba(34,211,238,.08);color:var(--cy);font-size:13px;font-weight:800}
.help-guide p{margin-bottom:0}
.help-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 0}
.help-bottom p{margin:0;color:var(--mu)}
.help-report-form{display:grid;gap:11px;padding:clamp(18px,3vw,26px);margin-bottom:24px}
.help-report-form label{margin-top:5px;font-size:13px;font-weight:750}
.help-report-form input,.help-report-form select,.help-report-form textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.help-report-form textarea{resize:vertical;line-height:1.7}
.help-report-form .btn{justify-self:start;margin-top:7px}
.help-form-note,.help-muted{color:var(--mu);font-size:12px;line-height:1.7}
.help-form-note{margin:0}
.help-report-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:16px;margin-top:10px}
.help-report-item strong{overflow-wrap:anywhere}
.help-report-item p{margin:6px 0 0;color:var(--mu);font-size:12px;line-height:1.7}
.help-report-detail{grid-column:1/-1;white-space:pre-wrap;overflow-wrap:anywhere}
.help-status{align-self:start;padding:5px 9px;border:1px solid rgba(34,211,238,.25);border-radius:999px;color:var(--cy);font-size:11px}
@media(max-width:760px){.help-grid{grid-template-columns:1fr}.help-card{padding:18px}.help-hero{border-radius:19px}.help-guide{padding:16px;gap:12px}.help-guide>span{flex-basis:36px;height:36px}.help-report-form .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.help-card{transition:none}}


/* ===== Support Center ===== */
.support-center{display:grid;gap:22px;max-width:1100px;margin:0 auto;padding:4px 0 28px}
.support-heading{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(40,180,220,.10),rgba(255,255,255,.015))}
.support-mark{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border:1px solid var(--line);border-radius:16px;color:var(--cy);background:rgba(40,180,220,.09)}
.support-mark svg{width:29px;height:29px}
.support-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--cy)}
.support-heading h2{margin:5px 0;font-size:clamp(23px,4vw,32px)}
.support-heading p,.support-toolbar p{margin:0;color:var(--mu)}
.support-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.support-stats article{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}
.support-stats span{color:var(--mu);font-size:13px}
.support-stats strong{font-size:28px}
.support-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.support-toolbar h3{margin:0 0 5px}
.support-toolbar .btn{display:inline-flex;align-items:center;gap:8px}
.support-search{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--tx)}
.support-report-list{display:grid;gap:12px}
.support-report{padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);min-width:0}
.support-report[hidden]{display:none}
.support-report-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.support-category,.support-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}
.support-category{border:1px solid var(--line);color:var(--mu)}
.support-status{background:rgba(255,255,255,.06);color:var(--tx)}
.status-baru{color:#e4b85b;background:rgba(228,184,91,.12)}
.status-diproses{color:var(--cy);background:rgba(40,180,220,.12)}
.status-selesai{color:#65c994;background:rgba(101,201,148,.12)}
.support-report h4{margin:14px 0 6px;font-size:17px;overflow-wrap:anywhere}
.support-report-meta,.support-updated{font-size:12px;color:var(--mu);overflow-wrap:anywhere}
.support-details{margin-top:15px;border-top:1px solid var(--line);padding-top:13px}
.support-details summary{cursor:pointer;font-weight:650}
.support-detail-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;margin:14px 0}
.support-status-form{display:grid;gap:9px;max-width:380px;margin-top:18px}
.support-status-form label{font-size:13px;color:var(--mu)}
.support-status-form select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg,#101722);color:var(--tx)}
.support-status-form .btn{justify-self:start}
.support-empty{padding:38px 18px;text-align:center;border:1px dashed var(--line);border-radius:16px;color:var(--mu)}
.support-empty svg{color:var(--cy)}
.support-empty h4{margin:12px 0 5px;color:var(--tx)}
.support-empty p{margin:0;font-size:13px}
@media(max-width:560px){.support-heading{padding:17px;align-items:flex-start}.support-mark{width:44px;height:44px;flex-basis:44px}.support-stats{gap:8px}.support-stats article{padding:12px}.support-stats strong{font-size:23px}.support-stats span{font-size:11px}.support-toolbar{align-items:flex-start}.support-report{padding:14px}}

/* ===== FINAL DOM SIDEBAR STACKING ===== */
header {
  position: sticky !important;
  z-index: 1002 !important;
}

#nav {
  z-index: 1003 !important;
  background: #081120 !important;
  opacity: 1 !important;
  filter: none !important;
}

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

#menuOverlay {
  z-index: 1001 !important;
  background: rgba(0, 0, 0, .68) !important;
}

#hamburger {
  z-index: 1004 !important;
  opacity: 1 !important;
  filter: none !important;
}

@media (max-width: 700px) {
  #nav {
    width: min(82vw, 320px) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
  }
}



/* ===== NAV ICONS & VISIBLE CLOSE BUTTON ===== */
#nav .menu-main a,
#nav .menu-support a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#nav a svg {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: var(--cy);
}

header {
  position: sticky !important;
  z-index: 10004 !important;
}

#nav {
  z-index: 10002 !important;
}

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

#hamburger {
  position: relative !important;
  z-index: 10005 !important;
  color: var(--cy) !important;
  background: #0c1425 !important;
  border: 1px solid var(--line) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#hamburger span {
  background: var(--cy) !important;
  opacity: 1;
}

#hamburger.hamburger-active {
  background: #102038 !important;
  border-color: var(--cy) !important;
}

#hamburger.hamburger-active span {
  background: var(--cy) !important;
}

/* ===== SUPPORT CENTER REDESIGN V2 ===== */
.support-center {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6px 0 30px;
  min-width: 0;
}

.support-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(40,180,220,.12), rgba(255,255,255,.015));
}

.support-mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: var(--cy);
  background: rgba(40,180,220,.09);
  border: 1px solid rgba(40,180,220,.25);
  border-radius: 16px;
}

.support-mark svg { width: 28px; height: 28px; }

.support-eyebrow {
  color: var(--cy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.support-heading h2 { margin: 5px 0; }
.support-heading p, .support-toolbar p {
  margin: 0;
  color: var(--mu);
  line-height: 1.6;
}

.support-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.support-stats article {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.support-stats article::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 9px;
  background: var(--cy);
}

.support-stats span { color: var(--mu); font-size: 12px; }
.support-stats strong { font-size: 27px; }

.support-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-toolbar h3 { margin: 0 0 5px; }

.support-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.support-search {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 13px 15px;
  color: var(--tx);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
}

.support-search:focus {
  border-color: var(--cy);
  box-shadow: 0 0 0 3px rgba(40,180,220,.1);
}

.support-report-list { display: grid; gap: 13px; min-width: 0; }

.support-report {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition: border-color .2s, background .2s;
}

.support-report:hover {
  border-color: rgba(40,180,220,.4);
  background: rgba(40,180,220,.035);
}

.support-report[hidden] { display: none !important; }

.support-report-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.support-category, .support-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.support-category {
  color: var(--mu);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}

.support-status { color: var(--tx); background: rgba(255,255,255,.06); }

.support-status.status-baru {
  color: #fbbf24;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.22);
}

.support-status.status-diproses {
  color: #60a5fa;
  background: rgba(96,165,250,.1);
  border: 1px solid rgba(96,165,250,.22);
}

.support-status.status-selesai {
  color: #34d399;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.22);
}

.support-report h4 {
  margin: 15px 0 7px;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.support-report-meta, .support-updated {
  margin: 0;
  color: var(--mu);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.support-details {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.support-details summary {
  cursor: pointer;
  color: var(--cy);
  font-size: 13px;
  font-weight: 700;
}

.support-detail-text {
  margin: 14px 0;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.support-status-form {
  display: grid;
  gap: 10px;
  max-width: 380px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.02);
}

.support-status-form label { color: var(--mu); font-size: 12px; }

.support-status-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 11px;
  color: var(--tx);
  background: var(--bg, #101722);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.support-status-form .btn { justify-self: start; }

.support-empty {
  padding: 38px 18px;
  text-align: center;
  color: var(--mu);
  border: 1px dashed var(--line);
  border-radius: 17px;
}

.support-empty svg { color: var(--cy); }
.support-empty h4 { margin: 12px 0 5px; color: var(--tx); }
.support-empty p { margin: 0; font-size: 13px; line-height: 1.6; }

@media (max-width: 560px) {
  .support-center { gap: 15px; }
  .support-heading { padding: 16px; align-items: flex-start; }
  .support-mark {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 13px;
  }
  .support-mark svg { width: 24px; height: 24px; }
  .support-heading p { font-size: 13px; }
  .support-stats { gap: 7px; }
  .support-stats article { padding: 12px 9px; }
  .support-stats span { font-size: 10px; }
  .support-stats strong { font-size: 22px; }
  .support-toolbar { align-items: flex-start; }
  .support-toolbar .btn { padding: 9px 10px; font-size: 12px; }
  .support-report { padding: 15px; }
}

/* FIX: pisahkan judul Support Center dari header utama */
main .support-heading {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  isolation: isolate;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  justify-content: flex-start;
  backdrop-filter: none;
  margin: 0;
}

main .support-heading > div {
  min-width: 0;
}

main .support-heading h2 {
  margin: 5px 0;
  font-size: clamp(23px, 4vw, 32px);
  line-height: 1.25;
}

main .support-heading p {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  main .support-heading {
    padding: 16px;
    gap: 12px;
  }
}


/* Support Center filters */
.support-filters{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(140px,.8fr) minmax(200px,1.4fr);gap:12px;margin:18px 0 8px;padding:15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--card),var(--bg2))}
.support-filter-field{display:grid;gap:7px;min-width:0}
.support-filter-field>span{font-size:12px;font-weight:700;color:var(--mu)}
.support-filter-field select,.support-filter-field input{width:100%;min-height:44px}
.support-filter-count{margin:8px 2px 14px;color:var(--mu);font-size:12px}
.support-report[hidden],#supportFilterEmpty[hidden]{display:none!important}

/* Dashboard visual refresh */
.dashboard-page{display:grid;gap:24px;min-width:0}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(22px,4vw,38px);border:1px solid #1b5268;border-radius:24px;background:radial-gradient(ellipse at 85% 20%,#123b50,transparent 42%),linear-gradient(125deg,#0c1c30,#07101f 70%);box-shadow:0 18px 50px #02061735}
.dashboard-eyebrow{display:block;color:var(--cy);font-size:10px;font-weight:800;letter-spacing:1.5px}
.dashboard-hero h2{margin:10px 0;font-size:clamp(27px,5vw,40px);line-height:1.12}
.dashboard-hero p,.dashboard-section-heading p{max-width:560px;color:var(--mu);line-height:1.65;margin:0}
.dashboard-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.dashboard-orbit{display:grid;place-items:center;flex:0 0 115px;width:115px;height:115px;border:1px solid #22d3ee55;border-radius:50%;background:radial-gradient(circle,#16435a,#0b1729 68%);box-shadow:0 0 55px #22d3ee15;color:var(--cy);font-size:27px;font-weight:900}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dashboard-stat{display:grid;gap:8px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,var(--card),var(--bg2))}
.dashboard-stat>span{display:grid;place-items:center;width:35px;height:35px;border:1px solid #22d3ee38;border-radius:11px;color:var(--cy);font-size:19px}
.dashboard-stat small,.dashboard-stat em{color:var(--mu);font-size:12px;font-style:normal}
.dashboard-stat strong{font-size:clamp(24px,3vw,32px);line-height:1.1;color:var(--tx)}
.dashboard-section{display:grid;gap:14px;min-width:0}
.dashboard-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dashboard-section-heading h2{margin:5px 0;font-size:clamp(21px,4vw,27px)}
.dashboard-service-grid,.dashboard-orders{display:grid;gap:10px}
.dashboard-service,.dashboard-order{display:flex;align-items:center;gap:13px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(120deg,var(--card),var(--bg2));color:var(--tx);text-decoration:none;transition:transform .18s,border-color .18s}
.dashboard-service:hover,.dashboard-order:hover{transform:translateY(-2px);border-color:#22d3ee88}
.dashboard-service-icon,.dashboard-order-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#22d3ee12;border:1px solid #22d3ee35;color:var(--cy);font-size:21px}
.dashboard-service-main,.dashboard-order-main{display:grid;gap:5px;flex:1;min-width:0}
.dashboard-service-main b,.dashboard-order-main b{overflow-wrap:anywhere}
.dashboard-service-main small,.dashboard-order-main small{color:var(--mu);font-size:12px}
.dashboard-service-arrow{color:var(--cy);font-size:20px}
.dashboard-order-total{white-space:nowrap;font-weight:800}
.dashboard-order-status{max-width:150px;color:var(--mu);font-size:12px;text-align:right;overflow-wrap:anywhere}
.dashboard-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:28px 18px;border:1px dashed var(--line);border-radius:17px;color:var(--mu)}
.dashboard-empty b{color:var(--tx)}.dashboard-empty p{margin:0 0 8px}
@media(max-width:760px){
  .support-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-search-field{grid-column:1/-1}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-orbit{flex-basis:80px;width:80px;height:80px;font-size:20px}
  .dashboard-service,.dashboard-order{padding:12px;gap:9px}
  .dashboard-order-total{font-size:12px}
  .dashboard-order-status{max-width:100px;font-size:11px}
}
@media(max-width:480px){
  .support-filters{grid-template-columns:1fr;padding:12px}
  .support-search-field{grid-column:auto}
  .dashboard-hero{padding:21px;border-radius:19px}
  .dashboard-orbit{display:none}
  .dashboard-stats{gap:9px}
  .dashboard-stat{padding:13px}
  .dashboard-stat strong{font-size:25px}
  .dashboard-service,.dashboard-order{flex-wrap:wrap}
  .dashboard-service-main,.dashboard-order-main{flex-basis:calc(100% - 60px)}
  .dashboard-order-total{margin-left:51px}
  .dashboard-order-status{margin-left:auto}
}

/* Professional management panels and brand mark */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:34px;height:34px;flex:0 0 34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand-logo rect{fill:#22d3ee10;stroke:#22d3ee}
.brand-logo path:first-of-type{fill:#22d3ee;stroke:none}
.manager-page{display:grid;gap:20px;min-width:0}
.manager-heading{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid #203753;border-radius:22px;background:radial-gradient(ellipse at 100% 0,#22d3ee14,transparent 52%),linear-gradient(145deg,#101e34,#091326);box-shadow:0 16px 40px #0003}
.manager-heading h2{margin:3px 0 4px;font-size:clamp(23px,4vw,31px);letter-spacing:-.025em}
.manager-heading p{margin:0;color:var(--mu);max-width:650px}
.manager-logo{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border:1px solid #22d3ee50;border-radius:17px;background:#22d3ee0c;color:var(--cy)}
.manager-logo svg,.status-mark svg,.manager-empty-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.manager-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--cy)}
.manager-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.manager-stat-grid-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.manager-stat-grid article,.manager-panel,.manager-info-grid>article{min-width:0;padding:19px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(150deg,#0e1b30,#091326)}
.manager-stat-grid article{display:grid;gap:8px}
.manager-stat-grid article span,.manager-type-grid span{font-size:12px;color:var(--mu)}
.manager-stat-grid article strong{font-size:clamp(24px,4vw,34px);line-height:1.2;letter-spacing:-.04em}
.manager-panel h3,.manager-info-grid h3{margin:0 0 6px;font-size:18px}
.manager-panel p,.manager-info-grid p{color:var(--mu);font-size:13px}
.manager-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.manager-panel-head h3{margin:0}.manager-panel-head p{margin:4px 0 0}.manager-panel-head input{max-width:260px;width:100%}
.manager-table-wrap{overflow-x:auto;border:1px solid #1b2b46;border-radius:13px}
.manager-table{min-width:560px;margin:0;background:#071020}
.manager-table th{background:#0c1930;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.manager-table td{padding:13px 12px}.manager-table td strong,.manager-table td small{display:block}.manager-table td small{color:var(--mu);font-size:11px;margin-top:3px}
.manager-status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid;border-radius:99px;font-size:11px;white-space:nowrap}
.manager-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.manager-status.is-on{color:#5ee0b0;border-color:#34d39945;background:#34d3990b}.manager-status.is-off{color:#f6adad;border-color:#f8717140;background:#f871710a}
.manager-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:32px 16px;border:1px dashed #2a3c58;border-radius:15px;color:var(--mu)}
.manager-empty strong{color:var(--tx)}.manager-empty p{margin:0;font-size:13px}.manager-empty-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#22d3ee0d;color:var(--cy)}
.manager-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.manager-info-grid dl{display:grid;gap:0;margin:14px 0 0}.manager-info-grid dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.manager-info-grid dl div:last-child{border:0}.manager-info-grid dt{color:var(--mu);font-size:13px}.manager-info-grid dd{margin:0;text-align:right;font-weight:700;font-size:13px;overflow-wrap:anywhere}
.manager-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.manager-type-grid div{display:grid;gap:5px;padding:14px;border-radius:12px;background:#071020;border:1px solid var(--line)}.manager-type-grid strong{font-size:24px}
.res.checking{background:#0c1930;border:1px solid #2b4263}.status-mark{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;color:var(--cy)}.res .result-source{display:block;margin-top:5px;color:var(--mu);font-size:12px}.res>span:nth-child(2){flex:1;min-width:160px}
[hidden]{display:none!important}
@media(max-width:700px){.manager-heading{align-items:flex-start;padding:18px}.manager-logo{width:46px;height:46px;flex-basis:46px;border-radius:14px}.manager-stat-grid,.manager-stat-grid-six{grid-template-columns:repeat(2,minmax(0,1fr))}.manager-info-grid{grid-template-columns:1fr}.manager-panel-head{align-items:stretch;flex-direction:column}.manager-panel-head input{max-width:none}.manager-type-grid{gap:7px}.manager-type-grid div{padding:11px}.manager-type-grid strong{font-size:21px}}
@media(max-width:420px){.manager-stat-grid,.manager-stat-grid-six{grid-template-columns:1fr 1fr}.manager-stat-grid article{padding:14px}.manager-stat-grid article strong{font-size:25px}.manager-heading{gap:11px}.manager-eyebrow{font-size:10px}}

.help-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.home-domain-symbol svg,.home-bundle-icon svg,.home-plan-symbol svg,.home-section-icon svg,.home-search-icon svg,.home-footer-note>span svg,.home-subdomain-art>span svg,.sd-stat-icon svg,.sd-empty-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;display:block}

.home-float>span svg,.dashboard-stat>span svg,.dashboard-service-icon svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sd-connect-domain{margin-top:22px;padding:clamp(18px,3vw,28px);border:1px solid #203753;border-radius:20px;background:linear-gradient(145deg,#0e1b30,#091326)}
.sd-connect-domain h3{margin:5px 0}.sd-connect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end;margin-top:18px}.sd-connect-grid label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#dbeafe}.sd-connect-grid select{width:100%;min-height:48px}.sd-connect-grid .sd-submit{grid-column:1/-1;margin-top:2px}.sd-note-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.sd-connect-grid{grid-template-columns:1fr}.sd-connect-grid .sd-submit{grid-column:auto}}


/* =====================================================================
   AI CODE STUDIO, MULTI-MESSAGE REPORT CHAT, & TERMUX GUIDE STYLES
   ===================================================================== */

main {
  max-width: 1120px;
}

h1, h2, h3 {
  text-wrap: balance;
}

/* ----- AI Code Studio (#/aicode) ----- */
.aicode-page {
  display: grid;
  gap: 24px;
  padding: 6px 0 36px;
}

.aicode-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(155deg, #0d1a32, #071020);
}

.aicode-hero-copy {
  max-width: 680px;
}

.aicode-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cy);
  margin-bottom: 6px;
}

.aicode-hero h1 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
  margin: 0 0 8px;
}

.aicode-hero p {
  margin: 0;
  color: var(--mu);
  font-size: 15px;
}

.aicode-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aicode-grid {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.aicode-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0a1426;
  padding: 20px;
  min-width: 0;
}

.aicode-panel h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.aicode-panel-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--mu);
}

.aicode-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  margin: 14px 0 8px;
}

.aicode-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.aicode-preset-btn {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #07101f;
  color: var(--tx);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.aicode-preset-btn:hover {
  border-color: var(--cy);
  color: var(--cy);
}

.aicode-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  background: #060d1a;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.aicode-mode-btn {
  padding: 9px 10px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--mu);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.aicode-mode-btn.is-active {
  background: #122442;
  color: var(--cy);
}

.aicode-prompt-input {
  width: 100%;
  min-height: 128px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  background: #060e1c;
}

.aicode-submit-btn {
  width: 100%;
  margin-top: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  white-space: nowrap;
}

.aicode-submit-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.aicode-workspace {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #081120;
  overflow: hidden;
  min-width: 0;
}

.aicode-workspace-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #0b162a;
}

.aicode-project-meta h3 {
  margin: 0;
  font-size: 16px;
}

.aicode-project-meta p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--mu);
}

.aicode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aicode-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 8px 13px;
  font-size: 12.5px;
}

.aicode-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px 0;
  background: #091324;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.aicode-tab {
  padding: 9px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--mu);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.aicode-tab:hover {
  color: var(--tx);
}

.aicode-tab.is-active {
  background: #060c18;
  color: var(--cy);
  border-color: var(--line);
}

.aicode-file-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: #060c18;
  border-bottom: 1px solid #13203b;
  font-size: 12px;
  color: var(--mu);
}

.aicode-code-wrap {
  max-height: 520px;
  overflow: auto;
  background: #050a14;
  padding: 16px 18px;
}

.aicode-code {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: #dbeafe;
  white-space: pre;
  tab-size: 2;
}

.aicode-preview-wrap {
  background: #ffffff;
  height: 500px;
}

.aicode-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #ffffff;
}

.aicode-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--mu);
}

.aicode-empty h3 {
  margin: 12px 0 6px;
  color: var(--tx);
  font-size: 18px;
}

.aicode-empty p {
  margin: 0 auto;
  max-width: 440px;
  font-size: 14px;
}

.aicode-loading {
  padding: 48px 24px;
  text-align: center;
}

.aicode-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 14px;
  border: 3px solid #1a2a4c;
  border-top-color: var(--cy);
  border-radius: 50%;
  animation: fandySpin 0.8s linear infinite;
}

@keyframes fandySpin {
  to {
    transform: rotate(360deg);
  }
}

/* ----- Termux Android Installation Guide Section ----- */
.termux-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0a1426;
  padding: 22px 24px;
}

.termux-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.termux-head h2 {
  margin: 0 0 4px;
  font-size: 19px;
}

.termux-head p {
  margin: 0;
  color: var(--mu);
  font-size: 13.5px;
}

.termux-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.termux-step {
  padding: 16px;
  border: 1px solid #172744;
  border-radius: 12px;
  background: #060d1b;
  min-width: 0;
}

.termux-step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.termux-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
}

.termux-step p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--mu);
}

.termux-pre {
  margin: 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: #040812;
  border: 1px solid #152440;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #a5f3fc;
  overflow-x: auto;
  white-space: pre;
}

.termux-note {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1px solid #1f365c;
  background: #081224;
  font-size: 13px;
  color: var(--mu);
}

.termux-note strong {
  color: var(--tx);
}

/* ----- Multi-Message Report & Support Conversation Room (#/report & #/support) ----- */
.ticket-shell {
  display: grid;
  gap: 20px;
  padding: 6px 0 36px;
}

.ticket-top-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(155deg, #0d1a32, #071020);
}

.ticket-top-bar h1 {
  margin: 2px 0 6px;
  font-size: clamp(24px, 3.6vw, 34px);
}

.ticket-top-bar p {
  margin: 0;
  color: var(--mu);
  font-size: 14px;
  max-width: 620px;
}

.ticket-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.ticket-sidebar {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0a1426;
  padding: 16px;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ticket-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ticket-sidebar-head h2 {
  margin: 0;
  font-size: 16px;
}

.ticket-list {
  display: grid;
  gap: 8px;
  max-height: 580px;
  overflow-y: auto;
}

.ticket-item-btn {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #162642;
  background: #07101f;
  color: var(--tx);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ticket-item-btn:hover {
  border-color: #2b4674;
}

.ticket-item-btn.is-active {
  border-color: var(--cy);
  background: #0d1c35;
}

.ticket-item-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--mu);
  font-variant-numeric: tabular-nums;
}

.ticket-status-text-baru {
  color: var(--cy);
  font-weight: 600;
}

.ticket-status-text-diproses {
  color: #fbbf24;
  font-weight: 600;
}

.ticket-status-text-selesai {
  color: var(--em);
  font-weight: 600;
}

.ticket-item-preview {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--mu);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ticket-room {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #081120;
  display: flex;
  flex-direction: column;
  min-height: 580px;
  min-width: 0;
  overflow: hidden;
}

.ticket-room-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #0b162a;
  border-bottom: 1px solid var(--line);
}

.ticket-room-head h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.ticket-room-sub {
  font-size: 12.5px;
  color: var(--mu);
  font-variant-numeric: tabular-nums;
}

.ticket-messages {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  background: #060d1a;
}

.ticket-msg {
  max-width: 84%;
  padding: 12px 15px;
  border-radius: 14px;
  border: 1px solid #182946;
  background: #0b162b;
  align-self: flex-start;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ticket-msg.is-mine {
  align-self: flex-end;
  background: #0e223d;
  border-color: #1f416e;
}

.ticket-msg.is-staff {
  background: #0c1f30;
  border-color: #1f4b5c;
}

.ticket-msg.is-ai {
  background: #0a1d2a;
  border-color: #1c4e5a;
}

.ticket-msg.msg-highlight {
  border-color: var(--cy);
  background: #132a4a;
}

.ticket-msg-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
}

.ticket-msg-sender {
  font-weight: 700;
  color: var(--tx);
}

.ticket-msg.is-ai .ticket-msg-sender {
  color: var(--cy);
}

.ticket-msg.is-staff .ticket-msg-sender {
  color: var(--em);
}

.ticket-msg-time {
  color: var(--mu);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-reply-ref {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid #1d3354;
  background: #060e1c;
  color: var(--mu);
  font-size: 12px;
  cursor: pointer;
}

.ticket-reply-ref:hover {
  border-color: var(--cy);
  color: var(--tx);
}

.ticket-reply-ref strong {
  display: block;
  color: var(--cy);
  font-size: 11.5px;
  margin-bottom: 2px;
}

.ticket-msg-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ticket-msg-photo-btn {
  margin-top: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #040914;
  cursor: zoom-in;
  display: inline-block;
  max-width: 280px;
}

.ticket-msg-photo-btn img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.ticket-msg-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.ticket-reply-btn {
  border: 0;
  background: transparent;
  color: var(--mu);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.ticket-reply-btn:hover {
  color: var(--cy);
  background: #10203a;
}

/* ----- Ticket Composer (Reply, Photo Upload, & Short-Answer AI Toggle) ----- */
.ticket-composer {
  padding: 14px 18px 16px;
  background: #0b162a;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.composer-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #1e3558;
  background: #071020;
  font-size: 12.5px;
}

.composer-banner-info {
  min-width: 0;
  flex: 1;
}

.composer-banner-info strong {
  display: block;
  color: var(--cy);
  font-size: 12px;
}

.composer-banner-info span {
  display: block;
  color: var(--mu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-photo-thumb {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.composer-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #0c182e;
  color: var(--tx);
  cursor: pointer;
  flex-shrink: 0;
}

.composer-mode-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.composer-mode-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: #060d1a;
  border: 1px solid var(--line);
}

.composer-mode-tab {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mu);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.composer-mode-tab.is-active {
  background: #122646;
  color: var(--cy);
}

.composer-ai-hint {
  font-size: 12px;
  color: var(--mu);
  font-variant-numeric: tabular-nums;
}

.composer-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composer-chip {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid #1b3154;
  background: #071020;
  color: var(--mu);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}

.composer-chip:hover {
  border-color: var(--cy);
  color: var(--tx);
}

.composer-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.composer-photo-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #071020;
  color: var(--tx);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.composer-photo-label:hover {
  border-color: var(--cy);
  color: var(--cy);
}

.composer-photo-input {
  display: none;
}

.composer-textarea {
  flex: 1;
  min-height: 44px;
  max-height: 130px;
  padding: 10px 13px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  background: #060e1c;
}

.composer-send-btn {
  height: 44px;
  padding: 0 18px;
  white-space: nowrap;
  flex-shrink: 0;
}

.composer-send-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ----- New Ticket Form Panel ----- */
.new-ticket-panel {
  padding: 22px 24px;
  display: grid;
  gap: 14px;
}

.new-ticket-panel h3 {
  margin: 0;
  font-size: 18px;
}

.new-ticket-panel label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 6px;
}

.new-ticket-panel input,
.new-ticket-panel select,
.new-ticket-panel textarea {
  width: 100%;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.new-ticket-ai-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #1b3154;
  background: #071020;
  cursor: pointer;
}

.new-ticket-ai-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cy);
  flex-shrink: 0;
}

.new-ticket-ai-check div strong {
  display: block;
  font-size: 13.5px;
  color: var(--tx);
}

.new-ticket-ai-check div span {
  display: block;
  font-size: 12px;
  color: var(--mu);
}

/* ----- Modal & Photo Lightbox ----- */
.fandy-modal-backdrop,
.fandy-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(3, 8, 18, 0.82);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.fandy-modal-card {
  width: 100%;
  max-width: 420px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #0c172c;
}

.fandy-modal-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.fandy-modal-card p {
  margin: 0 0 18px;
  color: var(--mu);
  font-size: 14px;
}

.fandy-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.fandy-lightbox-inner {
  position: relative;
  max-width: min(92vw, 960px);
  max-height: 88vh;
  display: grid;
  gap: 10px;
  justify-items: end;
}

.fandy-lightbox-inner img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #050a14;
}

@media (max-width: 880px) {
  .aicode-grid,
  .ticket-layout,
  .termux-steps {
    grid-template-columns: 1fr;
  }

  .ticket-list {
    max-height: 240px;
  }

  .ticket-room {
    min-height: 480px;
  }
}

@media (max-width: 540px) {
  .composer-controls {
    flex-wrap: wrap;
  }

  .composer-textarea {
    flex-basis: 100%;
    order: -1;
  }

  .composer-photo-label,
  .composer-send-btn {
    flex: 1;
    justify-content: center;
  }

  .ticket-msg {
    max-width: 94%;
  }
}

.aicode-empty-icon {
  margin: 0 auto;
  color: var(--cy);
}
.ticket-empty-note {
  margin: 6px 0;
}
.new-ticket-lead {
  margin: 4px 0 0;
  font-size: 13px;
}
.new-ticket-photo-banner {
  margin-bottom: 8px;
}
.composer-photo-fit {
  width: fit-content;
}
.new-ticket-actions {
  justify-content: flex-end;
  margin: 6px 0 0;
}
.support-open-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.support-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.support-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.support-status-compact {
  margin: 0;
}

/* =========================================
   FANDYHOSTING - DESKTOP LAYOUT IMPROVEMENT
   Hanya berlaku untuk layar desktop
   ========================================= */
@media (min-width: 1024px) {

  /* Lebar konten utama desktop */
  main#app {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(32px, 4vw, 64px);
    padding-right: clamp(32px, 4vw, 64px);
  }

  /* Header dan navigasi */
  body > header {
    padding-left: clamp(32px, 4vw, 64px);
    padding-right: clamp(32px, 4vw, 64px);
  }

  /* Grid AI Code */
  .aicode-grid {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 24px;
  }

  .aicode-panel {
    min-width: 0;
  }

  /* Grid tiket dan support */
  .ticket-layout {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 24px;
  }

  .ticket-sidebar,
  .ticket-room {
    min-width: 0;
  }

  /* Mencegah tabel melebar keluar kontainer */
  .scroll {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Mencegah elemen grid/flex mendorong halaman melebar */
  .card,
  .aicode-panel,
  .ticket-shell,
  .ticket-layout,
  .aicode-grid {
    min-width: 0;
  }

  /* Heading halaman desktop */
  #app h1 {
    overflow-wrap: anywhere;
  }
}

/* Desktop ekstra lebar */
@media (min-width: 1440px) {
  main#app {
    max-width: 1560px;
  }
}



/* ===== AI DEVELOPER STUDIO V3 ===== */
.studio-panel {
  margin-top:28px;
  padding:clamp(18px,3vw,30px);
  border:1px solid rgba(157,119,255,.24);
  border-radius:22px;
  background:linear-gradient(145deg,#171426,#10101a 65%,#17132a);
  color:#f5f1ff;
  box-shadow:0 18px 55px rgba(0,0,0,.16);
}
.studio-heading,.studio-result-head,.studio-project-row,.studio-result-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.studio-heading h2 { margin:7px 0; font-size:clamp(23px,3vw,30px); }
.studio-heading p,.studio-summary { color:#aaa4bc; line-height:1.65; }
.studio-kicker { color:#b99aff; font-size:10px; letter-spacing:1.8px; font-weight:800; }
.studio-status { color:#b9a1ff; font-size:11px; border:1px solid #51416e; border-radius:30px; padding:7px 11px; }
.studio-project-row { margin:22px 0; }
.studio-select { flex:1; min-width:220px; padding:13px; color:#f5f1ff; background:#211d30; border:1px solid #403650; border-radius:12px; }
.studio-modes,.studio-file-tabs { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 20px; }
.studio-mode,.studio-file-tab { border:1px solid #403650; border-radius:10px; background:#211d30; color:#c9c1d8; padding:10px 14px; cursor:pointer; }
.studio-mode.active,.studio-file-tab.active { background:#39275c; border-color:#9270d7; color:white; }
.studio-label { display:block; margin:12px 0 8px; color:#cfc7df; font-size:13px; font-weight:700; }
.studio-prompt,.studio-editor { display:block; width:100%; box-sizing:border-box; resize:vertical; color:#f4efff; background:#0c0b13; border:1px solid #393047; border-radius:13px; padding:15px; line-height:1.65; }
.studio-prompt { min-height:115px; }
.studio-editor { min-height:330px; font:12px/1.7 ui-monospace,monospace; tab-size:2; }
.studio-run { width:100%; margin-top:14px; padding:14px; border:0; border-radius:12px; color:white; font-weight:800; background:linear-gradient(110deg,#7048c9,#9b62dc); cursor:pointer; }
.studio-run:disabled { opacity:.6; cursor:wait; }
.studio-secondary { background:#292338; color:#eee7ff; border:1px solid #514366; }
.studio-empty { text-align:center; padding:32px 12px 12px; color:#aaa4bc; }
.studio-empty span { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:15px; background:#302448; color:#c5a5ff; font-size:25px; }
.studio-empty h3 { color:#f5f1ff; }
.studio-result { margin-top:25px; padding-top:22px; border-top:1px solid #342b43; }
.studio-result-head h3 { margin:6px 0; }
.studio-editor-meta { padding:10px 13px; background:#211d30; border-radius:10px 10px 0 0; color:#bba9da; font-size:12px; }
.studio-notice,.studio-loading { margin-top:14px; padding:12px; border-radius:10px; background:#211d30; color:#bdb4ce; font-size:12px; line-height:1.6; }
.studio-preview { margin-top:18px; overflow:hidden; border:1px solid #403650; border-radius:12px; }
.studio-preview-frame { width:100%; height:520px; border:0; background:white; }
@media(max-width:650px) {
  .studio-project-row { align-items:stretch; }
  .studio-project-row > * { width:100%; }
  .studio-result-actions > * { flex:1; }
  .studio-editor { min-height:260px; }
}


/* ===== AI_DEVELOPER_STUDIO_FIX_V2: FandyHosting theme ===== */
.studio-panel{
  background:linear-gradient(145deg,var(--card),var(--bg2));
  color:var(--tx);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(15px,2.5vw,25px);
  box-shadow:0 12px 32px #0003;
}
.studio-heading h2,.studio-result h3,.studio-empty h3{
  color:var(--tx);
}
.studio-heading p,.studio-summary,.studio-empty p{
  color:var(--mu);
}
.studio-kicker{color:var(--cy)}
.studio-status{
  color:var(--em);
  border:1px solid var(--em);
  background:transparent;
  border-radius:20px;
}
.studio-select,.studio-prompt,.studio-editor,
.studio-file-tab,.studio-mode{
  background:var(--bg2);
  color:var(--tx);
  border:1px solid var(--line);
  border-radius:10px;
}
.studio-select:focus,.studio-prompt:focus,.studio-editor:focus{
  outline:1px solid var(--cy);
  border-color:var(--cy);
}
.studio-mode.active,.studio-file-tab.active{
  color:var(--cy);
  border-color:var(--cy);
  background:color-mix(in srgb,var(--cy) 12%,transparent);
}
.studio-run,.studio-save-live{
  background:var(--cy);
  color:#06121b;
  border:1px solid var(--cy);
  border-radius:10px;
  font-weight:800;
}
.studio-run:hover,.studio-save-live:hover{
  background:var(--em);
  border-color:var(--em);
}
.studio-secondary{
  background:transparent;
  color:var(--cy);
  border:1px solid var(--line);
  border-radius:10px;
}
.studio-secondary:hover{
  border-color:var(--cy);
  color:var(--cy);
}
.studio-editor-meta,.studio-notice,.studio-loading{
  background:var(--bg2);
  color:var(--mu);
  border:1px solid var(--line);
  border-radius:9px;
}
.studio-result{border-color:var(--line)}
.studio-save-live:disabled{opacity:.6;cursor:wait}