/* static/panel-ux.css — lapisan UX panel untuk pemilik UMKM non-teknis dan
   pengguna lanjut usia (permintaan pemilik 2026-10-14).

   Ditulis tangan (bukan hasil Tailwind) dan dimuat SETELAH app.css, hanya di
   halaman panel (`<body class="… px-ui">`; landing memakai `lp`). Prinsip:
   - huruf dasar 17px, teks kecil tidak di bawah ~14px, kontras tinggi;
   - target sentuh ≥ 48px untuk tombol, kolom isian, dan menu;
   - warna & bentuk sama dengan landing (putih tulang, garis hitam, kuning);
   - satu gagasan per kartu, ikon di setiap pintu masuk, teknis dilipat. */

.px-ui {
  --ux-bg: #faf8f2;
  --ux-surface: #fffdf8;
  --ux-soft: #fbf6e3;
  --ux-muted-surface: #f1eee5;
  --ux-ink: #1c1a17;
  --ux-muted: #4a4640;
  --ux-line: #1c1a17;
  --ux-accent: #facc15;
  --ux-accent-light: #fef9c3;
  --ux-good: #166534;
  --ux-good-bg: #dcfce7;
  --ux-warn: #854d0e;
  --ux-warn-bg: #fef3c7;
  --ux-bad: #991b1b;
  --ux-bad-bg: #fee2e2;
  background: var(--ux-bg);
  color: var(--ux-ink);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Tipografi: tidak ada lagi teks semut ---------- */
.px-ui main .text-xs { font-size: 0.86rem; line-height: 1.5; }
.px-ui main .text-sm { font-size: 0.95rem; line-height: 1.55; }
.px-ui main .text-base { font-size: 1rem; }
.px-ui main .text-gray-600 { color: var(--ux-muted); }
.px-ui main h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.px-ui main h2 { letter-spacing: -0.01em; }
.px-ui main code, .px-ui main pre { font-size: 0.88rem; }

/* ---------- Komponen yang sudah ada, diperbesar ---------- */
.px-ui .dalang-panel { background: var(--ux-surface); }
.px-ui main .dalang-panel.p-4 { padding: 1.25rem; }
.px-ui .dalang-button { min-height: 48px; padding: 0.6rem 1.1rem; font-size: 1rem; font-weight: 700; }
.px-ui .dalang-button-secondary { background: var(--ux-surface); }
.px-ui .dalang-input, .px-ui .dalang-select, .px-ui .dalang-textarea { min-height: 48px; font-size: 1rem; padding: 0.6rem 0.8rem; background: #ffffff; }
.px-ui .dalang-textarea { min-height: 120px; }
.px-ui main label { font-size: 0.98rem; }
.px-ui .dalang-badge { font-size: 0.82rem; padding: 0.35rem 0.6rem; }
.px-ui .dalang-alert { font-size: 0.98rem; }
.px-ui .dalang-tab { min-height: 44px; font-size: 0.95rem; }
.px-ui main table th, .px-ui main table td { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-ui input[type="checkbox"] { width: 22px; height: 22px; }

/* Header & footer panel */
.px-ui > header { background: var(--ux-surface); }
.px-ui > footer { background: var(--ux-surface); font-size: 0.95rem; }
.px-ui .ux-nav-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; }
.px-ui .ux-nav-link svg { flex: none; }

/* ---------- Pola baru ---------- */
.ux-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ux-hello h1 { margin: 0; }
.ux-sub { color: var(--ux-muted); font-size: 1.05rem; margin-top: 0.35rem; max-width: 44em; }
.ux-eyebrow { font: 700 0.78rem/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ux-muted); }

.ux-card { background: var(--ux-surface); border: 2px solid var(--ux-line); box-shadow: 4px 4px 0 0 var(--ux-line); padding: 1.25rem; }
.ux-card + .ux-card { margin-top: 1.25rem; }
.ux-grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Kartu saldo */
.ux-wallet { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.25rem; align-items: center; background: var(--ux-soft); }
.ux-wallet .ux-amount { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ux-wallet .ux-ico-big { width: 64px; height: 64px; }
@media (max-width: 560px) { .ux-wallet { grid-template-columns: auto 1fr; } .ux-wallet .dalang-button { grid-column: 1 / -1; width: 100%; } }

/* Ikon ubin: kuning berbingkai hitam (bahasa visual landing) */
.ux-ico { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; background: var(--ux-accent); border: 2px solid var(--ux-line); color: #000000; }
.ux-ico svg { width: 26px; height: 26px; }
.ux-ico.sm { width: 36px; height: 36px; } .ux-ico.sm svg { width: 20px; height: 20px; }
.ux-ico.lg { width: 64px; height: 64px; } .ux-ico.lg svg { width: 34px; height: 34px; }
.ux-ico.muted { background: var(--ux-muted-surface); }

/* Status dengan kata-kata, bukan kode */
.ux-status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 0.95rem; padding: 0.3rem 0.75rem; border: 2px solid currentColor; background: var(--ux-surface); }
.ux-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.ux-status.success { color: var(--ux-good); background: var(--ux-good-bg); }
.ux-status.warning { color: var(--ux-warn); background: var(--ux-warn-bg); }
.ux-status.danger { color: var(--ux-bad); background: var(--ux-bad-bg); }
.ux-status.neutral, .ux-status.info, .ux-status.primary { color: var(--ux-ink); }

/* Kartu situs (dasbor + daftar akun) */
.ux-sites { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); list-style: none; padding: 0; margin: 0; }
.ux-site { display: grid; gap: 0.9rem; align-content: start; }
.ux-site-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.ux-site-name { font-size: 1.25rem; font-weight: 800; line-height: 1.25; word-break: break-word; }
.ux-site-name a { color: inherit; text-decoration: none; }
.ux-site-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ux-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--ux-muted); font-size: 0.95rem; margin: 0; padding: 0; list-style: none; }
.ux-facts b { color: var(--ux-ink); }
.ux-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 560px) { .ux-actions .dalang-button { flex: 1 1 100%; } }

/* Ubin aksi besar (pintu masuk tiap fitur) */
.ux-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); list-style: none; padding: 0; margin: 0; }
.ux-tile { display: flex; gap: 0.9rem; align-items: flex-start; height: 100%; padding: 1rem; background: var(--ux-surface); border: 2px solid var(--ux-line); box-shadow: 4px 4px 0 0 var(--ux-line); color: var(--ux-ink); text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; }
.ux-tile:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ux-line); background: var(--ux-accent-light); }
.ux-tile b { display: block; font-size: 1.08rem; line-height: 1.3; }
.ux-tile span.d { display: block; color: var(--ux-muted); font-size: 0.92rem; line-height: 1.45; margin-top: 0.2rem; }
@media (prefers-reduced-motion: reduce) { .ux-tile { transition: none; } }

/* Kepala halaman akun + menu bagian */
.ux-akun-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; }
.ux-akun-head .ux-back { margin-left: auto; }
.ux-crumb { font-size: 0.95rem; color: var(--ux-muted); }
.ux-crumb a { color: var(--ux-ink); font-weight: 700; }
/* Menu bagian: SEMUA item terlihat sekaligus (tidak ada geser/tersembunyi —
   keluhan pemilik 2026-10-14). Kisi yang membungkus: 2 kolom di ponsel,
   memenuhi lebar di desktop. */
.ux-secnav { margin: 1.1rem 0 1.5rem; }
.ux-secnav ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.ux-secnav a { display: flex; align-items: center; gap: 0.55rem; min-height: 52px; height: 100%; padding: 0.4rem 0.7rem 0.4rem 0.45rem; border: 2px solid var(--ux-line); background: var(--ux-surface); color: var(--ux-ink); font-weight: 700; font-size: 0.95rem; line-height: 1.25; text-decoration: none; }
.ux-secnav a:hover { background: var(--ux-accent-light); }
/* Kuning hanya untuk "Anda di sini": teks hitam di kuning = 13,6:1 (AAA). Item
   lain netral (ikon abu muda), jadi mata langsung menemukan posisi sekarang. */
.ux-secnav .ux-ico { background: var(--ux-muted-surface); }
.ux-secnav a[aria-current="page"] { background: var(--ux-accent); color: #000000; border-width: 3px; box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-secnav a[aria-current="page"] .ux-ico { background: #000000; color: var(--ux-accent); border-color: #000000; }
@media (max-width: 560px) { .ux-secnav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-secnav a { font-size: 0.9rem; } }

/* Rincian teknis: ada, tapi dilipat */
.ux-tech { margin-top: 1rem; border: 2px dashed #8f8b80; background: var(--ux-surface); }
.ux-tech > summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 700; color: var(--ux-muted); min-height: 44px; display: flex; align-items: center; gap: 0.5rem; }
.ux-tech > summary::marker { content: ""; }
.ux-tech > summary::before { content: "⚙"; font-size: 1.05rem; }
.ux-tech[open] > summary { border-bottom: 2px dashed #8f8b80; }
.ux-tech > div { padding: 0.9rem 1rem; display: grid; gap: 0.6rem; font-size: 0.92rem; color: var(--ux-muted); }

/* Bantuan */
.ux-help { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: var(--ux-soft); }
.ux-help p { margin: 0; flex: 1 1 260px; }

/* Ilustrasi kecil */
.ux-ill { display: block; width: 100%; height: auto; }
.ux-ill .ln { stroke: var(--ux-line); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ux-ill .sf { fill: var(--ux-surface); }
.ux-ill .ac { fill: var(--ux-accent); }
.ux-ill .mu { fill: var(--ux-muted-surface); }
.ux-ill .ik { fill: var(--ux-line); }

/* Langkah bernomor (DNS, SSH) */
.ux-steps { list-style: none; counter-reset: s; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.75rem; }
.ux-steps > li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 0.75rem; align-items: start; }
.ux-steps > li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; background: var(--ux-ink); color: var(--ux-accent); font-weight: 800; }

/* Topbar: menu desktop mulai 1100px, di bawahnya menu disclosure */
.ux-topnav { display: none; }
.ux-topnav-mobile { display: block; }
@media (min-width: 1100px) { .ux-topnav { display: block; } .ux-topnav-mobile { display: none; } }
.px-ui > header .dalang-button { min-height: 44px; }

/* Ponsel: ubin dua kolom, ikon di atas — sepuluh fitur muat dalam satu-dua layar */
@media (max-width: 560px) {
  .ux-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .ux-tile { flex-direction: column; gap: 0.6rem; padding: 0.85rem; }
  .ux-tile b { font-size: 1rem; }
  .ux-tile span.d { font-size: 0.86rem; }
  .ux-hello h1 { font-size: 1.6rem; }
}

/* Daftar berkas ringkas */
.ux-files { list-style: none; margin: 0; padding: 0; border: 2px solid var(--ux-line); background: #ffffff; }
.ux-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem 0.8rem; align-items: center; padding: 0.55rem 0.75rem; border-top: 1px solid #d6d3cb; }
.ux-file:first-child { border-top: 0; }
.ux-file:hover { background: var(--ux-soft); }
.ux-file-name { min-width: 0; display: grid; }
.ux-file-name > a, .ux-file-name > span { font-weight: 700; color: var(--ux-ink); overflow-wrap: anywhere; }
.ux-file-name > a { text-decoration: underline; text-underline-offset: 3px; }
.ux-file-name small { color: var(--ux-muted); font-size: 0.85rem; }
.ux-file-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
@media (max-width: 640px) { .ux-file { grid-template-columns: auto minmax(0, 1fr); } .ux-file-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Tombol kecil & tombol bahaya dengan kontras AA */
.px-ui .dalang-button.ux-btn-sm { min-height: 40px; padding: 0.3rem 0.7rem; font-size: 0.9rem; box-shadow: 2px 2px 0 0 #000000; }
.px-ui .ux-btn-danger { background: #fee2e2; color: #7f1d1d; }          /* 8.9:1 */
.px-ui .ux-btn-danger:hover { background: #fecaca; }
.px-ui .ux-btn-danger-solid { background: #b91c1c; color: #ffffff; }    /* 6.5:1 */
.px-ui .ux-btn-danger-solid:hover { background: #991b1b; }
.px-ui .bg-red-500 { background: #b91c1c; color: #ffffff; }              /* tombol lama: putih di merah tua */

/* Penyunting berkas (CodeMirror) */
.ux-editor { margin-top: 0.5rem; }
.ux-editor .cm-editor { height: min(70vh, 720px); }
.ux-editor-status { margin-top: 0.4rem; font: 600 0.82rem "JetBrains Mono", ui-monospace, monospace; color: var(--ux-muted); }

/* Grafik cincin pemakaian */
.ux-gauges { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ux-gauge { display: flex; gap: 1rem; align-items: center; padding: 1rem; background: var(--ux-surface); border: 2px solid var(--ux-line); box-shadow: 4px 4px 0 0 var(--ux-line); }
.ux-ring { width: 96px; height: 96px; flex: none; }
.ux-ring .track { fill: none; stroke: var(--ux-muted-surface); stroke-width: 10; }
.ux-ring .fill { fill: none; stroke-width: 10; stroke-linecap: butt; }
.ux-ring text { font: 800 17px "Plus Jakarta Sans", sans-serif; fill: var(--ux-ink); }
.ux-lvl-ok .ux-ring .fill { stroke: #16a34a; }
.ux-lvl-warn .ux-ring .fill { stroke: #ca8a04; }
.ux-lvl-high .ux-ring .fill { stroke: #dc2626; }
.ux-ring-none { display: grid; place-items: center; width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--ux-muted-surface); border: 2px solid var(--ux-line); }
.ux-gauge-body h3 { font-size: 1.05rem; font-weight: 800; }
.ux-gauge-value { font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.ux-gauge-level { display: inline-block; margin-top: 0.2rem; font-weight: 800; font-size: 0.9rem; padding: 0.1rem 0.5rem; border: 2px solid currentColor; }
.ux-lvl-ok .ux-gauge-level { color: var(--ux-good); background: var(--ux-good-bg); }
.ux-lvl-warn .ux-gauge-level { color: var(--ux-warn); background: var(--ux-warn-bg); }
.ux-lvl-high .ux-gauge-level { color: var(--ux-bad); background: var(--ux-bad-bg); }
.ux-gauge-limit { margin-top: 0.3rem; color: var(--ux-muted); font-size: 0.86rem; }

/* Daftar cadangan (radio terlihat, bukan dropdown) */
.ux-snaps { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.ux-snap { display: flex; align-items: center; gap: 0.7rem; min-height: 52px; padding: 0.5rem 0.9rem; border: 2px solid var(--ux-line); background: #ffffff; cursor: pointer; font-weight: 600; }
.ux-snap:hover { background: var(--ux-soft); }
.ux-snap:has(input:checked) { background: var(--ux-accent-light); box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-snap input { width: 22px; height: 22px; accent-color: #1c1a17; }
.ux-snap-new { margin-left: 0.4rem; font-size: 0.8rem; padding: 0.1rem 0.45rem; background: var(--ux-ink); color: var(--ux-accent); }

/* =====================================================================
   Pola halaman v2 (rapikan 2026-10-14): satu ritme untuk semua bagian.
   - .ux-stack  : tumpukan bagian dengan jarak seragam (tanpa utilitas mt-*)
   - .ux-sec-h  : judul bagian DI LUAR kartu — ikon kecil + judul + tautan kanan
   - grid tetap (repeat(N, 1fr)) supaya selalu memenuhi lebar, tinggi seragam
   ===================================================================== */
.ux-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.ux-stack > * { margin: 0 !important; }
.ux-sec { display: grid; gap: 0.9rem; }
.ux-sec-h { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.ux-sec-h h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.ux-sec-h .ux-sec-link { margin-left: auto; font-weight: 700; color: var(--ux-ink); text-decoration: underline; text-underline-offset: 3px; }
.ux-sec-h .ux-sec-link:hover { background: var(--ux-accent-light); }

/* Kepala dasbor & kepala situs (hero) */
.ux-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; }
.ux-hero h1 { margin: 0; overflow-wrap: anywhere; }
.ux-hero .ux-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.45rem; color: var(--ux-muted); }
.ux-hero .ux-hero-meta b { color: var(--ux-ink); }
.ux-hero .ux-actions { justify-content: flex-end; }
@media (max-width: 760px) { .ux-hero { grid-template-columns: auto minmax(0, 1fr); } .ux-hero .ux-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Baris situs (dasbor + daftar): satu baris lebar penuh per situs */
.ux-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ux-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem 1.1rem; align-items: center; }
.ux-row .ux-site-name { font-size: 1.2rem; }
.ux-row .ux-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.3rem; color: var(--ux-muted); font-size: 0.95rem; }
.ux-row .ux-row-meta b { color: var(--ux-ink); }
.ux-row .ux-actions { justify-content: flex-end; }
@media (max-width: 760px) { .ux-row { grid-template-columns: auto minmax(0, 1fr); } .ux-row .ux-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Ubin seragam: ikon di atas, judul, satu kalimat — tinggi sama per baris */
.ux-tiles2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.ux-tiles2.c5 { --cols: 5; }
.ux-tiles2 > li { display: flex; }
.ux-tiles2 .ux-tile { flex-direction: column; gap: 0.7rem; width: 100%; padding: 1.1rem; }
.ux-tiles2 .ux-tile b { font-size: 1.05rem; }
.ux-tiles2 .ux-tile span.d { margin-top: 0.15rem; }
@media (max-width: 1100px) { .ux-tiles2, .ux-tiles2.c5 { --cols: 3; } }
@media (max-width: 760px) { .ux-tiles2, .ux-tiles2.c5 { --cols: 2; } }

/* Cincin pemakaian v2: kartu tegak, isi rata tengah, tinggi seragam */
.ux-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ux-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-gauge { flex-direction: column; justify-content: flex-start; text-align: center; gap: 0.55rem; padding: 1.15rem 1rem 1.25rem; }
.ux-gauge .ux-gauge-body { display: grid; justify-items: center; gap: 0.3rem; }
.ux-gauge-body h3 { order: -2; }
.ux-gauge > .ux-ring, .ux-gauge > .ux-ring-none { order: -1; }
.ux-gauge h3.ux-gauge-title { font-size: 1rem; font-weight: 800; color: var(--ux-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: "JetBrains Mono", ui-monospace, monospace; }
.ux-ring { width: 112px; height: 112px; }
.ux-ring-none { width: 112px; height: 112px; border: 0; background: none; position: relative; }
.ux-ring-none::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 10px solid var(--ux-muted-surface); }
.ux-ring-none .ux-ring-num { position: relative; font: 800 1.6rem "Plus Jakarta Sans", sans-serif; }
.ux-gauge-limit { max-width: 22ch; }

/* ===== File explorer ringkas ===== */
.ux-fx { background: #ffffff; border: 2px solid var(--ux-line); box-shadow: 4px 4px 0 0 var(--ux-line); }
.ux-fx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--ux-line); background: var(--ux-soft); position: sticky; top: var(--ux-head-h, 0px); z-index: 5; }
.ux-fx-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.98rem; }
.ux-fx-path a { color: var(--ux-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ux-fx-path b { overflow-wrap: anywhere; }
.ux-fx-sep { color: var(--ux-muted); }
.ux-fx-tools { margin-left: auto; display: flex; gap: 0.5rem; }
.ux-pop { position: relative; }
.ux-pop > summary::-webkit-details-marker { display: none; }
.ux-pop-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(340px, 86vw); display: grid; gap: 0.5rem; padding: 0.9rem; background: var(--ux-surface); border: 2px solid var(--ux-line); box-shadow: 4px 4px 0 0 var(--ux-line); }
.ux-fx-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ux-fx-table thead th { position: sticky; top: 0; text-align: left; font: 700 0.75rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ux-muted); padding: 0.45rem 0.8rem !important; border-bottom: 1px solid #d6d3cb; background: #ffffff; }
.ux-fx-table tbody th, .ux-fx-table td { padding: 0.3rem 0.8rem !important; border-bottom: 1px solid #ece9e2; vertical-align: middle; text-align: left; font-weight: 400; }
.ux-fx-table tbody tr:hover { background: var(--ux-soft); }
.ux-fx-table tbody tr:last-child th, .ux-fx-table tbody tr:last-child td { border-bottom: 0; }
.ux-fx-name { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.ux-fx-name a, .ux-fx-name span:not(.ux-fx-ico):not(.sr-only) { overflow-wrap: anywhere; }
.ux-fx-name a { color: var(--ux-ink); font-weight: 600; text-decoration: none; }
.ux-fx-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ux-fx-ico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--ux-muted); }
.ux-fx-ico.dir { color: #a16207; }
.ux-fx-ico.dir svg { fill: #fde68a; }
.ux-fx-num, .ux-fx-date { white-space: nowrap; color: var(--ux-muted); font-variant-numeric: tabular-nums; }
.ux-fx-num { text-align: right !important; width: 1%; }
.ux-fx-date { width: 1%; }
.ux-fx-act { width: 1%; }
.ux-fx-btns { display: flex; gap: 0.3rem; justify-content: flex-end; }
.ux-iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ux-line); background: var(--ux-surface); color: var(--ux-ink); cursor: pointer; }
.ux-iconbtn:hover { background: var(--ux-accent-light); }
.ux-iconbtn-danger { background: #fee2e2; color: #7f1d1d; }
.ux-iconbtn-danger:hover { background: #fecaca; }
.ux-rot180 { transform: rotate(180deg); }
.ux-fx-mobile-meta { display: none; }
.ux-fx-note, .ux-fx-foot { font-size: 0.85rem; color: var(--ux-muted); }
.ux-fx-foot { padding: 0.5rem 0.8rem; border-top: 1px solid #ece9e2; margin: 0; }
.ux-fx-empty { padding: 1.5rem; text-align: center; color: var(--ux-muted); }
@media (max-width: 700px) {
  .ux-fx-num, .ux-fx-date { display: none; }
  .ux-fx-mobile-meta { display: block; margin-left: 2.4rem; font-size: 0.8rem; color: var(--ux-muted); font-weight: 400; }
  .ux-fx-tools { margin-left: 0; width: 100%; }
  .ux-fx-bar { top: 64px; }
}

/* Menu bagian v2: chip satu baris yang membungkus rapi (tidak ada label dua baris) */
.ux-secnav ul { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ux-secnav li { display: flex; }
.ux-secnav a { min-height: 44px; padding: 0.3rem 0.8rem 0.3rem 0.35rem; white-space: nowrap; font-size: 0.92rem; }
.ux-secnav .ux-ico.sm { width: 30px; height: 30px; }
.ux-secnav .ux-ico.sm svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .ux-secnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-secnav a { white-space: normal; } }

/* ===== Dokumen legal (Syarat / Refund / Privasi) ===== */
.ux-doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .ux-doc { grid-template-columns: 1fr; gap: 1.25rem; } }
.ux-doc-side { position: sticky; top: 90px; display: grid; gap: 1.25rem; }
@media (max-width: 900px) { .ux-doc-side { position: static; } .ux-doc-toc { display: none; } }
.ux-doc-switch ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
@media (max-width: 900px) { .ux-doc-switch ul { display: flex; flex-wrap: wrap; } }
.ux-doc-switch a { display: block; padding: 0.55rem 0.8rem; border: 2px solid var(--ux-line); background: var(--ux-surface); color: var(--ux-ink); font-weight: 700; text-decoration: none; }
.ux-doc-switch a:hover { background: var(--ux-accent-light); }
.ux-doc-switch a[aria-current="page"] { background: var(--ux-accent); color: #000000; box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-doc-toc ol { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: 0.4rem; font-size: 0.92rem; border-left: 2px solid #d6d3cb; padding-left: 1.6rem; }
.ux-doc-toc a { color: var(--ux-muted); text-decoration: none; }
.ux-doc-toc a:hover { color: var(--ux-ink); text-decoration: underline; }
.ux-doc-body { background: var(--ux-surface); border: 2px solid var(--ux-line); box-shadow: 4px 4px 0 0 var(--ux-line); padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 860px; }
.ux-doc-body h1 { margin: 1rem 0 0.5rem; }
.ux-doc-lead { font-size: 1.05rem; color: var(--ux-muted); max-width: 65ch; margin-top: 0.5rem; }
.ux-doc-related { font-weight: 700; color: var(--ux-ink); }
.ux-doc-draft { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.8rem; background: var(--ux-warn-bg); color: var(--ux-warn); border: 2px dashed var(--ux-warn); font-size: 0.92rem; margin: 0; }
.ux-doc-sec { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid #e3dfd6; scroll-margin-top: 90px; }
.ux-doc-sec h2 { display: flex; align-items: center; gap: 0.7rem; font-size: 1.25rem; font-weight: 800; }
.ux-doc-num { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; background: var(--ux-ink); color: var(--ux-accent); font: 800 0.95rem "JetBrains Mono", ui-monospace, monospace; }
.ux-doc-sec ul { margin: 0.8rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.55rem; max-width: 68ch; list-style: disc; }
.ux-doc-sec li::marker { color: #a16207; }
.ux-doc-contact p { margin-top: 0.7rem; max-width: 65ch; }

/* ===== Header panel = bahasa merek dalang.io (rapikan 2026-10-14) ===== */
.px-ui > header { background: #ffffff; border: 0; border-bottom: 2px solid var(--ux-line); }
.ux-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ux-ink); }
.ux-brand-logo { width: 36px; height: 36px; border-radius: 8px; flex: none; }
.ux-brand-text { display: inline-flex; align-items: center; gap: 0.45rem; }
.ux-brand-text b { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.ux-brand-chip { font: 700 0.7rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ux-accent); color: #000000; border: 2px solid #000000; padding: 0.15rem 0.45rem; }
@media (max-width: 640px) { .ux-brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } }
/* Menu atas: tombol kotak ala dalang.io — aktif kuning, hover berbingkai */
.px-ui > header .ux-nav-link { border: 2px solid transparent; font-size: 0.95rem; }
.px-ui > header .ux-nav-link:hover { border-color: var(--ux-line); background: #ffffff; box-shadow: 3px 3px 0 0 var(--ux-line); }
.px-ui > header .ux-nav-link[aria-current="page"] { background: var(--ux-accent); border-color: #000000; box-shadow: 3px 3px 0 0 #000000; color: #000000; }
.px-ui > header .ux-topnav ul { gap: 0.4rem; }
@media (max-width: 560px) {
  .ux-hero { align-items: start; gap: 0.75rem; }
  .ux-hero > .ux-ico.lg { width: 44px; height: 44px; }
  .ux-hero > .ux-ico.lg svg { width: 24px; height: 24px; }
  .ux-hero h1 { font-size: 1.35rem; }
}

/* Cincin ringkas (kartu "Kondisi situs saat ini" di ringkasan): satu baris
   pendek per metrik — cincin kecil di kiri, judul/angka/status di kanan;
   keterangan batas paket hanya di halaman Pemakaian lengkap. */
.ux-gauges.ux-compact { gap: 0.75rem; }
.ux-compact .ux-gauge { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.8rem; row-gap: 0; align-items: center; text-align: left; padding: 0.7rem 0.85rem; box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-compact .ux-gauge > .ux-ring, .ux-compact .ux-gauge > .ux-ring-none { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; order: 0; }
.ux-compact .ux-ring text { font-size: 19px; }
.ux-compact .ux-ring .track, .ux-compact .ux-ring .fill { stroke-width: 11; }
.ux-compact .ux-ring-none::before { inset: 4px; border-width: 7px; }
.ux-compact .ux-ring-none .ux-ring-num { font-size: 1.15rem; }
.ux-compact .ux-gauge-title { grid-column: 2; grid-row: 1; font-size: 0.78rem !important; align-self: end; }
.ux-compact .ux-gauge-body { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; justify-items: start; align-self: start; }
.ux-compact .ux-gauge-value { font-size: 1.05rem; }
.ux-compact .ux-gauge-level { margin-top: 0; font-size: 0.78rem; padding: 0 0.4rem; }
.ux-compact .ux-gauge-limit { display: none; }
@media (max-width: 1000px) { .ux-gauges.ux-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .ux-gauges.ux-compact { grid-template-columns: 1fr; } }
.ux-compact .ux-lvl-none .ux-gauge-title { grid-row: 1 / span 2; align-self: center; }
@media (max-width: 560px) { .ux-compact .ux-gauge { grid-template-columns: 52px minmax(0, 1fr); padding: 0.6rem; column-gap: 0.6rem; } .ux-compact .ux-gauge > .ux-ring, .ux-compact .ux-gauge > .ux-ring-none { width: 52px; height: 52px; } .ux-compact .ux-gauge-value { font-size: 0.95rem; } }
/* Grid item boleh menyempit (tanpa ini kepala situs meluber 35px di 390px) */
.ux-stack > *, .ux-hero > div, .ux-row > div, .ux-sec > * { min-width: 0; }

/* ---- /aplikasi (UX UMKM/lansia 2026-10-14): pembuka bergambar, kelompok
   menurut kebutuhan, kartu lebar berlogo, satu tombol besar, teknis dilipat. */
.ux-apphero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1rem 1.5rem; align-items: center; }
.ux-apphero h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.15rem 0 0.4rem; }
.ux-apphero-ill { max-width: 220px; }
.ux-apphow { list-style: none; counter-reset: h; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ux-apphow > li { counter-increment: h; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; border: 2px solid var(--ux-line); background: var(--ux-surface); font-weight: 700; font-size: 0.95rem; }
.ux-apphow > li::before { content: counter(h); display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--ux-ink); color: var(--ux-accent); font-weight: 800; }
@media (max-width: 720px) { .ux-apphero { grid-template-columns: 1fr; } .ux-apphero-ill { display: none; } .ux-apphero h1 { font-size: 1.5rem; } .ux-apphow { flex-direction: column; } }

.ux-sitepick ul { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ux-sitepick a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.5rem 0.9rem; border: 2px solid var(--ux-line); background: var(--ux-surface); color: var(--ux-ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ux-sitepick a:hover { background: var(--ux-accent-light); }
.ux-sitepick a[aria-current="true"] { background: var(--ux-accent); color: #000000; box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-sitepick-one { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }

.ux-appgroup-h { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; font-weight: 800; margin: 0 0 0.6rem; }
.ux-apps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); list-style: none; padding: 0; margin: 0; }
.ux-app { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.ux-apps > .ux-card + .ux-card { margin-top: 0; }
.ux-app-head { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.ux-app-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.ux-app-sum { margin: 0; line-height: 1.5; flex: 1; overflow-wrap: anywhere; }
.ux-app-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.05rem; }
.ux-app-note { margin: 0; font-size: 0.9rem; color: var(--ux-muted); }
/* Logo selalu di ubin putih berbingkai hitam, juga di mode gelap. */
.ux-applogo { display: grid; place-items: center; flex: none; width: 56px; height: 56px; background: #ffffff; border: 2px solid #000000; box-shadow: 3px 3px 0 0 #000000; }
.ux-applogo-svg { width: 34px; height: 34px; }
.ux-applogo-icon { background: var(--ux-accent); color: #000000; }
.ux-app-tech > summary { cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--ux-muted); min-height: 44px; display: flex; align-items: center; }
.ux-app-tech ul { margin: 0 0 0.25rem; padding-left: 1.1rem; font-size: 0.9rem; color: var(--ux-muted); }

.ux-devbox { border: 2px dashed #8f8b80; background: var(--ux-surface); }
.ux-devbox > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.6rem 1rem; font-weight: 700; color: var(--ux-ink); }
.ux-devbox > summary::-webkit-details-marker { display: none; }
.ux-devbox > summary > span:nth-child(2) { flex: 1; }
.ux-devbox[open] > summary svg:last-child { transform: rotate(180deg); }
.ux-devbox > .ux-sec { padding: 0 1rem 1rem; }

/* Tombol DNS domain: data dibaca langsung dari registrar (1–3 dtk). Selama
   permintaan HTMX berjalan (`.htmx-request`), tombol memberi tanda memuat. */
.ux-dns-btn.htmx-request { cursor: progress; opacity: .7; }
.ux-dns-btn.htmx-request::after { content: " …"; }

/* ---- Kelola domain (/domain/{id}, D-102) ---- */
.ux-dm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: center; margin-top: 0.5rem; }
.ux-dm-title { font-size: 1.75rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.ux-dm-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.35rem 0 0; color: var(--ux-muted); }
@media (max-width: 560px) { .ux-dm-head { grid-template-columns: auto minmax(0, 1fr); } .ux-dm-head > a { grid-column: 1 / -1; } .ux-dm-title { font-size: 1.4rem; } }
.ux-dm .ux-secnav ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ux-dm-h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.25rem; }
.ux-dm-big { font-size: 1.15rem; font-weight: 800; margin: 0.15rem 0; }
.ux-dm-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ux-dm-tiles > .ux-card + .ux-card { margin-top: 0; }
.ux-dm-tiles .ux-card { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ux-dm-tiles .ux-card > a { margin-top: auto; font-weight: 700; }
.ux-dm-quick { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ux-dm-quick a { display: flex; align-items: center; gap: 0.6rem; min-height: 52px; padding: 0.5rem 0.85rem; border: 2px solid var(--ux-line); background: var(--ux-surface); color: var(--ux-ink); font-weight: 700; text-decoration: none; }
.ux-dm-quick a:hover { background: var(--ux-accent-light); }
.ux-dm-gate { display: flex; gap: 0.85rem; align-items: flex-start; border-style: dashed; box-shadow: none; }
.ux-dm-table { overflow-x: auto; margin-top: 0.75rem; border: 2px solid var(--ux-line); }
.ux-dm-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ux-dm-table th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ux-muted); background: var(--ux-muted-surface); padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--ux-line); }
.ux-dm-table td { padding: 0.45rem 0.75rem; border-top: 1px solid var(--ux-muted-surface); vertical-align: middle; }
.ux-dm-table td:last-child { width: 1%; white-space: nowrap; }
.ux-dm-val { max-width: 28rem; overflow-wrap: anywhere; word-break: break-all; }
.ux-dm-form { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-items: end; }
.ux-dm-form label { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.95rem; min-width: 0; }
.ux-dm-form .ux-dm-wide { grid-column: span 2; }
@media (max-width: 560px) { .ux-dm-form .ux-dm-wide { grid-column: auto; } }
.ux-dm-form .dalang-input, .ux-dm-form .dalang-select { width: 100%; min-height: 48px; }
.ux-dm-form > .dalang-button { min-height: 48px; justify-content: center; }
.ux-dm-suffix { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.ux-dm-suffix > span { color: var(--ux-muted); font-weight: 600; overflow-wrap: anywhere; }
.ux-dm-choice { display: grid; align-items: start; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 0.75rem; }
.ux-dm-opt { border: 2px solid var(--ux-line); padding: 1rem; background: var(--ux-surface); min-width: 0; }
.ux-dm-opt.on { background: var(--ux-accent-light); box-shadow: 4px 4px 0 0 var(--ux-line); }
.ux-dm-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ux-dm-epp { margin: 0.75rem 0 0.25rem; font-size: 1.3rem; }
.ux-dm-epp code { display: inline-block; padding: 0.5rem 0.85rem; border: 2px dashed var(--ux-line); background: var(--ux-accent-light); user-select: all; overflow-wrap: anywhere; }
.ux-dm-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; max-height: 28rem; overflow: auto; margin: 0; }
.ux-dm-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; }
.ux-dm-dl dt { font-weight: 700; color: var(--ux-muted); }
.ux-dm-dl dd { margin: 0; overflow-wrap: anywhere; }
.ux-dm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ux-dm-chips li { border: 2px solid var(--ux-line); padding: 0.1rem 0.5rem; font-weight: 700; font-size: 0.9rem; background: var(--ux-surface); }
@media (max-width: 480px) { .ux-dm-dl { grid-template-columns: 1fr; gap: 0.15rem; } .ux-dm-dl dd { margin-bottom: 0.5rem; } }

/* ---- Log ringkas (/akun/{id}/log, pemilik 2026-10-14) ---- */
.ux-log-bar { display: grid; gap: 0.6rem; }
.ux-log-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ux-log-tabs fieldset { display: flex; gap: 0.35rem; border: 0; padding: 0; margin: 0; }
.ux-log-tabs .dalang-tab { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.ux-log-lines { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; margin-left: auto; }
.ux-log-lines .dalang-select { min-height: 44px; }
.ux-log-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ux-log-search > .dalang-input { flex: 1 1 14rem; min-width: 0; min-height: 44px; }
.ux-log-adv { flex-basis: 100%; }
.ux-log-adv > summary { cursor: pointer; font-weight: 700; color: var(--ux-muted); font-size: 0.9rem; }
.ux-log-adv > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; margin-top: 0.4rem; }
.ux-log-adv label { display: grid; gap: 0.2rem; font-size: 0.9rem; font-weight: 600; }
.ux-log-adv .dalang-input { width: 7.5rem; }
.ux-log-adv .ux-log-check { display: flex; align-items: center; gap: 0.4rem; }
.ux-log { padding: 0.75rem; margin-top: 0.75rem; }
.ux-log-wrap { overflow: auto; max-height: 34rem; border: 2px solid var(--ux-line); }
.ux-log-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ux-log-table th { position: sticky; top: 0; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ux-muted); background: var(--ux-muted-surface); padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--ux-line); }
.ux-log-table td { padding: 0.3rem 0.6rem; border-top: 1px solid var(--ux-muted-surface); vertical-align: top; }
.ux-log-table tr:hover td { background: var(--ux-accent-light); }
.ux-log-time { white-space: nowrap; color: var(--ux-muted); font-variant-numeric: tabular-nums; }
.ux-log-no { color: var(--ux-muted); font-variant-numeric: tabular-nums; }
.ux-log-dev { display: block; font-size: 0.75rem; color: var(--ux-muted); }
.ux-log-path { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; overflow-wrap: anywhere; word-break: break-all; min-width: 12rem; }
.ux-log-m { font-weight: 700; color: var(--ux-muted); }
.ux-log-st { display: inline-block; white-space: nowrap; font-weight: 700; font-size: 0.78rem; padding: 0.05rem 0.4rem; border: 2px solid currentColor; }
.t-success { color: var(--ux-good); } .ux-log-st.t-success { background: var(--ux-good-bg); }
.t-warning { color: var(--ux-warn); } .ux-log-st.t-warning { background: var(--ux-warn-bg); }
.t-danger { color: var(--ux-bad); } .ux-log-st.t-danger { background: var(--ux-bad-bg); }
.t-neutral { color: var(--ux-ink); }
.ux-log-err { list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow: auto; border: 2px solid var(--ux-line); font-size: 0.86rem; }
.ux-log-err li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; padding: 0.4rem 0.6rem; border-top: 1px solid var(--ux-muted-surface); }
.ux-log-err li:first-child { border-top: 0; }
.ux-log-lv { text-transform: uppercase; font-size: 0.72rem; border: 2px solid currentColor; padding: 0 0.3rem; align-self: center; }
.ux-log-msg { flex-basis: 100%; color: var(--ux-ink); font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
.ux-log-raw { max-height: 20rem; overflow: auto; border: 2px solid var(--ux-line); background: var(--ux-surface); padding: 0.6rem; font-size: 0.75rem; margin: 0.4rem 0 0; }
@media (max-width: 560px) { .ux-log-lines { margin-left: 0; } }

/* ---- Akses (developer) — pemilik 2026-10-14: "terlalu overwhelming" ---- */
.ux-akses-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.ux-akses-alt { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
@media (max-width: 560px) { .ux-akses-hero { grid-template-columns: 1fr; } }
.ux-akses-steps { list-style: none; counter-reset: a; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ux-akses-steps > .ux-card + .ux-card { margin-top: 0; }
.ux-akses-steps > li { counter-increment: a; position: relative; padding-left: 4rem; min-width: 0; }
.ux-akses-steps > li::before { content: counter(a); position: absolute; left: 1rem; top: 1.1rem; display: grid; place-items: center; width: 36px; height: 36px; background: var(--ux-ink); color: var(--ux-accent); font-weight: 800; }
.ux-akses-steps h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.2rem; }
@media (max-width: 560px) { .ux-akses-steps > li { padding-left: 1rem; padding-top: 3.4rem; } .ux-akses-steps > li::before { top: 0.9rem; } }
.ux-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.ux-copy code { flex: 1 1 14rem; min-width: 0; padding: 0.55rem 0.75rem; border: 2px dashed var(--ux-line); background: var(--ux-accent-light); overflow-wrap: anywhere; user-select: all; }

/* ---- File explorer: ganti nama/pindah + pratinjau gambar (2026-10-14) ---- */
.ux-pop-row { display: inline-block; }
.ux-pop-row > .ux-pop-body { width: min(360px, 88vw); }
.ux-prev > summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ux-prev > summary::-webkit-details-marker { display: none; }
.ux-prev-panel { max-width: min(92vw, 900px); }
.ux-prev-img { display: block; max-width: 100%; max-height: 70vh; margin-top: 0.5rem; border: 2px solid var(--ux-line); background: repeating-conic-gradient(#e7e5e0 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; object-fit: contain; }

/* ---- Penyunting berkas: bilah alat tetap (2026-10-14) ---- */
.ux-ed-bar { position: sticky; top: var(--ux-head-h, 0px); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.55rem 0.7rem; margin-bottom: 0.5rem; background: var(--ux-surface); border: 2px solid var(--ux-line); box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-ed-file { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1 1 12rem; font-weight: 700; }
.ux-ed-file code { overflow-wrap: anywhere; font-size: 0.9rem; }
.ux-ed-tools { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.ux-ed-status { font-size: 0.85rem; font-weight: 700; color: var(--ux-good); min-width: 6.5rem; text-align: right; }
.ux-ed-status.is-dirty { color: var(--ux-warn); }
.ux-ed .ux-editor .cm-editor { max-height: calc(100vh - 230px); }
.ux-ed .ux-editor .cm-scroller { overflow: auto; }
@media (max-width: 560px) { .ux-ed-tools { margin-left: 0; width: 100%; justify-content: space-between; } .ux-ed-status { min-width: 0; } }

/* ---- Ganti aplikasi (EB-1405) ---- */
.ux-replace { border-color: #b91c1c; box-shadow: 4px 4px 0 0 #b91c1c; }
.ux-ico-warn { background: #fee2e2; color: #991b1b; border-color: #991b1b; }
.ux-replace-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.ux-replace-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ux-replace-opt { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.85rem; border: 2px solid var(--ux-line); background: var(--ux-surface); cursor: pointer; }
.ux-replace-opt:has(input:checked) { background: var(--ux-accent-light); box-shadow: 3px 3px 0 0 var(--ux-line); }
.ux-replace-opt input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.ux-replace-opt .ux-sub { display: block; }
.ux-replace-ack { display: flex; gap: 0.6rem; align-items: center; font-weight: 700; }
.ux-replace-ack input { width: 1.2rem; height: 1.2rem; flex: none; }

/* ---- Domain: versi ringkas (pemilik 2026-10-14: "lebih compact dan rapih") ---- */
.ux-dm.ux-stack { gap: 1.25rem; }
.ux-dm .ux-dm-card { padding: 1rem 1.1rem; }
.ux-dm .ux-dm-card + .ux-dm-card { margin-top: 0; }
.ux-dm-h2 { font-size: 1.1rem; }
.ux-dm-h3 { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; margin: 0 0 0.25rem; }
.ux-dm-h3 .ux-status { margin-left: auto; font-size: 0.8rem; padding: 0.1rem 0.5rem; }
.ux-dm-state { margin: 0.35rem 0; }
.ux-dm-hint { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--ux-muted); }
.ux-dm-hint svg { flex: none; margin-top: 0.15rem; }
.ux-dm-grid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
/* Daftar domain */
.ux-dm-listhead { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; justify-content: space-between; }
.ux-dm-listhead .ux-sub { margin: 0.25rem 0 0; }
.ux-dmrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ux-dmrows > .ux-card + .ux-card { margin-top: 0; }
.ux-dmrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; padding: 0.85rem 1rem; }
.ux-dmrow-name { font-size: 1.15rem; font-weight: 800; color: var(--ux-ink); text-decoration: none; overflow-wrap: anywhere; }
.ux-dmrow-name:hover { text-decoration: underline; }
.ux-dmrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; margin: 0.3rem 0 0; color: var(--ux-muted); font-size: 0.92rem; }
.ux-dmrow-meta .ux-status { font-size: 0.8rem; padding: 0.1rem 0.5rem; }
.ux-dmrow-err { margin: 0.3rem 0 0; color: var(--ux-bad); font-weight: 700; font-size: 0.88rem; }
.ux-dmrow-sub { margin: 0.2rem 0 0; color: var(--ux-muted); font-size: 0.85rem; }
.ux-dmrow-act { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 640px) { .ux-dmrow { grid-template-columns: auto minmax(0, 1fr); } .ux-dmrow-act { grid-column: 1 / -1; } .ux-dmrow-act > a { flex: 1; justify-content: center; } }
/* Ringkasan: 4 ubin rata, tinggi seragam */
.ux-dm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 900px) { .ux-dm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ux-dm-tiles { grid-template-columns: 1fr; } }
.ux-dm-tiles .ux-eyebrow { margin: 0; }
.ux-dm-big { font-size: 1.05rem; margin: 0.1rem 0 0.15rem; overflow-wrap: anywhere; }
.ux-dm-tiles .ux-sub { font-size: 0.86rem; line-height: 1.45; }
.ux-dm-quick { grid-template-columns: 1fr; gap: 0.4rem; margin-top: 0.5rem; }
.ux-dm-quick a { min-height: 44px; padding: 0.4rem 0.7rem; font-size: 0.95rem; }
.ux-dm-quick a > span { flex: 1; }
/* Formulir satu baris (DNS, child NS, pengalihan, DS) */
.ux-dm-row-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-top: 0.6rem; }
.ux-dm-row-form label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; flex: 1 1 9rem; min-width: 0; }
.ux-dm-row-form label.ux-dm-grow { flex: 3 1 14rem; }
.ux-dm-row-form label.ux-dm-narrow { flex: 0 1 6.5rem; }
.ux-dm-row-form label.ux-dm-narrow2 { flex: 0 1 9rem; }
.ux-dm-row-form .dalang-input, .ux-dm-row-form .dalang-select { width: 100%; min-height: 44px; }
.ux-dm-row-form > .dalang-button { min-height: 44px; }
.ux-dm-rec label:first-of-type { flex: 1 1 13rem; }
.ux-dm-table { margin-top: 0.6rem; }
.ux-dm-table td { padding: 0.35rem 0.75rem; }
/* Nameserver */
.ux-dm-choice { gap: 0.75rem; margin-top: 0.6rem; }
.ux-dm-opt { padding: 0.8rem 0.9rem; }
.ux-dm-nslist { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; }
.ux-dm-nslist code { border: 1px solid var(--ux-line); padding: 0.05rem 0.4rem; background: var(--ux-surface); font-size: 0.85rem; }
.ux-dm-fold { margin-top: 0.8rem; border-top: 2px dashed var(--ux-muted-surface); padding-top: 0.6rem; }
.ux-dm-fold > summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.ux-dm-nsform { display: grid; gap: 0.6rem 0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); align-items: end; margin-top: 0.5rem; }
.ux-dm-nsform label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; }
.ux-dm-nsform .dalang-input { min-height: 44px; }
.ux-dm-nsform > .dalang-button { min-height: 44px; }
/* Kontak: 4 kolom rapi */
.ux-dm-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem 0.8rem; }
.ux-dm-contact label { font-size: 0.85rem; }
.ux-dm-contact .ux-dm-wide { grid-column: span 2; }
@media (max-width: 900px) { .ux-dm-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ux-dm-contact { grid-template-columns: 1fr; } .ux-dm-contact .ux-dm-wide { grid-column: auto; } }
.ux-dm-epp { margin: 0.6rem 0 0.2rem; font-size: 1.15rem; }
.ux-dm-fold > summary { list-style: none; gap: 0.4rem; }
.ux-dm-fold > summary::-webkit-details-marker { display: none; }
.ux-dm-fold > summary::before { content: "▸"; transition: transform .12s; }
.ux-dm-fold[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 560px) {
  .ux-dm .ux-secnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .ux-dm .ux-secnav a { width: 100%; font-size: 0.88rem; }
  .ux-dm-table table { min-width: 520px; }
  .ux-dm-head { gap: 0.5rem 0.75rem; }
}
/* Kotak scroll tabel harus memosisikan isinya: tanpa ini `.sr-only`
   (position:absolute) di header tabel lolos dari kotak scroll dan membuat
   halaman bisa digeser 117px di ponsel (terukur 2026-10-14). */
.ux-dm-table, .ux-log-wrap { position: relative; }

/* ---------- Banner izin piksel Meta (bawaan: DICABUT) ----------
   Dimuat di SETIAP halaman (`layout.html`), jadi gayanya mandiri — tidak
   bergantung pada kelas Tailwind maupun pada `.px-ui` (landing memakai
   `body.lp`, panel memakai `body.px-ui`). Banner hanya ada di DOM bila piksel
   dikonfigurasi (`meta_pixel`), dan tersembunyi (`[hidden]`) sampai
   `static/consent.js` tahu pengunjung belum memilih. Tombol tolak/terima
   sama-sama ≥48px: menolak tidak boleh lebih sulit daripada menerima. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 0.75rem;
  background: rgba(28, 26, 23, 0.5);
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner {
  margin: 0 auto;
  max-width: 60rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.1rem;
  background: #fffdf8;
  border: 2px solid #1c1a17;
  box-shadow: 4px 4px 0 0 #1c1a17;
  color: #1c1a17;
}
.consent-banner__text { flex: 1 1 22rem; font-size: 0.95rem; line-height: 1.55; }
.consent-banner__title { margin: 0 0 0.25rem; font-weight: 700; }
.consent-banner__body { margin: 0; }
.consent-banner__body a { font-weight: 600; text-decoration: underline; }
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent-banner__btn {
  min-height: 48px;
  padding: 0 1.1rem;
  font: inherit;
  font-weight: 700;
  color: #1c1a17;
  background: #fffdf8;
  border: 2px solid #1c1a17;
  cursor: pointer;
}
.consent-banner__btn--primary { background: #facc15; box-shadow: 3px 3px 0 0 #1c1a17; }
.consent-banner__btn:hover { background: #f1eee5; }
.consent-banner__btn--primary:hover { background: #fde047; }
.consent-banner__btn:focus-visible { outline: 2px solid #1c1a17; outline-offset: 2px; }
@media (max-width: 480px) {
  .consent-banner__actions { width: 100%; }
  .consent-banner__btn { flex: 1 1 auto; }
}