* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; background:#000; }
/* Streaming view (index.html, no body class) pins #stage via position:fixed,
   so we lock body scroll. Dashboard (.dash-body) and static pages
   (.static-body) need to scroll their long content normally. */
body:not(.dash-body):not(.static-body) { overflow:hidden; }
.dash-body, .static-body { height:auto; min-height:100%; overflow:auto; }
#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000; }
#screen { max-width:100vw; max-height:100vh; width:auto; height:auto; aspect-ratio: var(--cw, 1280) / var(--ch, 720); background:#000; touch-action:none; }
#hud {
  position:fixed; top:8px; right:10px; font:11px/1 ui-monospace,monospace;
  color:rgba(255,255,255,.45); opacity:0; transition:opacity .25s; pointer-events:none;
}
#stage.show #hud { opacity:1; }
#rotate { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); font:14px system-ui; background:#000; }
/* Class-based rotation toggle (set by app.js when viewport is portrait phone AND
   framebuffer is landscape). When framebuffer is itself portrait (e.g., LDPlayer
   rotated because force-portrait app is active), the class is NOT set and the
   canvas fits naturally via the default #screen rule above. */
#rotate { display:none !important; }
html.rotate-canvas #screen {
  position:fixed;
  top:50%; left:50%;
  width: min(100vh, calc(100vw * var(--cw, 1280) / var(--ch, 720)));
  height: auto;
  max-width:none; max-height:none;
  transform: translate(-50%, -50%) rotate(var(--rot, -90deg));
  transform-origin: center center;
}
#bar {
  /* Default position bottom-right. JS may override via inline left/top after
     user drags. Stays fixed regardless. */
  position:fixed; right:16px; bottom:16px;
  opacity:0; transition:opacity .25s;
  z-index: 20;
  touch-action: none;  /* needed so pointermove drag isn't preempted by scroll */
}
#stage.show #bar { opacity:1; }

/* Tool launcher button: rounded square dengan grid icon di atas + label
   "Tool" di bawah. Draggable — user bisa pindah ke posisi mana saja. */
.tools-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 4px;
  width: 64px; height: 64px;
  padding: 8px 6px 6px;
  border-radius: 14px;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(34,211,238,.30);
  color: #22d3ee; cursor: grab;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
  user-select: none; -webkit-user-select: none;
}
.tools-btn:hover {
  background: rgba(34,211,238,.15);
  border-color: rgba(34,211,238,.60);
  box-shadow: 0 12px 28px rgba(34,211,238,.20), 0 0 0 1px rgba(255,255,255,.04);
}
.tools-btn:active { cursor: grabbing; }
.tools-btn[aria-expanded="true"] {
  background: rgba(34,211,238,.20);
  border-color: rgba(34,211,238,.80);
  box-shadow: 0 0 0 2px rgba(34,211,238,.30), 0 8px 24px rgba(34,211,238,.25);
}
/* During an active drag, the JS toggles this class — disables the default
   cursor:grab so the screen-level grabbing cursor doesn't flicker. */
.tools-btn.dragging { cursor: grabbing; transition: none; }
.tools-btn-icon { display: block; flex: 0 0 auto; }
.tools-btn-label {
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .3px;
  color: #cbd5e1;
}
.tools-btn:hover .tools-btn-label { color: #fff; }

.tools-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: linear-gradient(180deg, rgba(15,23,42,.97), rgba(5,8,15,.97));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 2px;
  animation: cs-tools-pop .15s cubic-bezier(.22,.9,.32,1);
}
.tools-menu[hidden] { display: none; }
/* When the button has been dragged near the left edge, JS flips this to
   anchor the menu on the LEFT side so it doesn't clip off-screen. */
#bar[data-anchor="left"] .tools-menu { right: auto; left: 0; }
@keyframes cs-tools-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tools-menu button, .tools-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  background: transparent; border: 0;
  color: #cbd5e1; font: 14px inherit;
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tools-menu button:hover, .tools-menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.tools-menu .tm-ic { width: 22px; text-align: center; font-size: 15px; color: #22d3ee; flex: 0 0 auto; }
.tools-menu .tm-text { flex: 1; }
.tools-menu .tools-divider {
  height: 1px; background: rgba(255,255,255,.06);
  margin: 6px 4px;
}
.tools-menu .tools-exit { color: #94a3b8; }
.tools-menu .tools-exit:hover { background: rgba(239,68,68,.10); color: #f87171; }
.tools-menu button[data-on="1"] { background: rgba(34,197,94,.10); color: #22c55e; }
.tools-menu button[data-on="1"]:hover { background: rgba(34,197,94,.18); }
.tools-menu button[data-on="1"] .tm-ic { color: #22c55e; }

/* Keyboard indicator pill in HUD when game-keyboard mode is active */
#kbd-ind { color: #22c55e; font-weight: 600; }
#kbd { position:fixed; left:-9999px; }
#picker { position:fixed; inset:0; background:#000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; color:#fff; font:14px system-ui; z-index:10; }
#picker button { background:#0a0a0a; border:1px solid #222; color:#fff; padding:14px 22px;
  border-radius:8px; font-size:15px; cursor:pointer; }
#picker button:active { border-color:#22d3ee; }
#rotate { gap:10px; flex-direction:column; cursor:pointer; }
#rotate::before { content:"⟳"; font-size:40px; opacity:.6; }
@media (orientation:landscape) { #rotate { display:none !important; } #screen { display:block; } }
:fullscreen #screen, :-webkit-full-screen #screen { width:100vw; height:100vh; }

/* ───────── Dashboard ───────── */
.dash-body {
  background:
    radial-gradient(80vw 60vh at 50% -10%, rgba(34,211,238,.06), transparent 60%),
    radial-gradient(60vw 50vh at 100% 100%, rgba(168,85,247,.05), transparent 60%),
    #050608;
  color:#e6edf3;
  font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100vh; height:auto; overflow:auto;
}
.dash-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px, 4vw, 40px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.dash-brand { display:flex; align-items:center; gap:12px; }
.dash-logo {
  width:28px; height:28px; border-radius:8px;
  background: conic-gradient(from 210deg, #22d3ee, #a855f7, #22d3ee);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 20px rgba(34,211,238,.18);
}
.dash-title { font-size:16px; font-weight:600; letter-spacing:.2px; color:#fff; margin:0; }
.dash-actions { position:relative; display:flex; align-items:center; gap:8px; }
.dash-refresh {
  width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.04); color:#cbd5e1; border:1px solid rgba(255,255,255,.08);
  font-size:18px; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s, transform .25s, box-shadow .15s;
  display:inline-flex; align-items:center; justify-content:center;
}
.dash-refresh:hover {
  background:rgba(34,211,238,.08); color:#22d3ee;
  border-color:rgba(34,211,238,.30);
  box-shadow: 0 4px 14px rgba(34,211,238,.12);
}
#refresh:active { transform:rotate(360deg); }
#menu-btn { font-weight:700; letter-spacing:1px; font-size:20px; }
#logout-link:hover { background:rgba(239,68,68,.08); color:#f87171; border-color:rgba(239,68,68,.30); box-shadow: 0 4px 14px rgba(239,68,68,.10); }
.dash-menu {
  position:absolute; top:42px; right:0;
  background:linear-gradient(180deg, rgba(30,41,59,.97), rgba(15,23,42,.97));
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  min-width:200px; z-index:30;
  backdrop-filter: blur(12px);
}
.dash-menu button {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px;
  background:transparent; border:0; color:#cbd5e1;
  font:14px inherit; cursor:pointer; border-radius:8px;
  text-align:left;
  transition: background .12s, color .12s;
}
.dash-menu button:hover { background:rgba(255,255,255,.06); color:#fff; }
.dash-menu .menu-ic { width:18px; text-align:center; font-size:15px; color:#22d3ee; }
.dash-menu-layout { display:flex; flex-direction:row; gap:6px; min-width:0; padding:8px; }
/* `hidden` attribute UA default is display:none, but the .dash-menu-layout display:flex
   above wins on specificity — restore explicit hide via attribute selector. */
.dash-menu[hidden] { display: none !important; }
/* Same problem at the child level: .dash-menu button has display:flex, which
   overrides the [hidden] UA default. Restore explicit hide so role-gated items
   (Add LDPlayer for users, Admin Panel for non-admins) actually disappear. */
.dash-menu button[hidden] { display: none !important; }
.dash-menu-layout button {
  width:auto; padding:10px 12px; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  color:#cbd5e1;
}
.dash-menu-layout button:hover { background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.35); color:#22d3ee; }
.dash-menu-layout svg { display:block; }
.dash-main { max-width:1200px; margin:0 auto; padding:clamp(20px, 4vw, 40px); }

/* ───── Welcome hero (above grid) ───── */
.dash-hero {
  display:flex; flex-direction:column; gap:18px;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.dash-hero[hidden] { display:none; }
.hero-greet {
  background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(168,85,247,.06));
  border: 1px solid rgba(34,211,238,.18);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
  position:relative;
  overflow:hidden;
}
.hero-greet::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 60% at 90% 0%, rgba(168,85,247,.18), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(34,211,238,.14), transparent 70%);
}
.hero-greet-row { display:flex; gap:18px; align-items:center; position:relative; z-index:1; }
.hero-emoji { font-size: clamp(32px, 5vw, 44px); line-height:1; flex:0 0 auto; }
.hero-name {
  font-size: clamp(20px, 3vw, 26px); font-weight:700; color:#fff;
  margin:0 0 4px; letter-spacing:-.01em;
}
.hero-sub { color:#cbd5e1; font-size: clamp(13px, 1.5vw, 14px); line-height:1.5; margin:0; }
.hero-stats {
  display:grid; gap: clamp(10px, 1.5vw, 16px);
  grid-template-columns: repeat(3, 1fr);
}
.stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: clamp(14px, 2vw, 18px) clamp(12px, 2vw, 18px);
  text-align:center;
}
.stat-num {
  font-size: clamp(22px, 3.2vw, 30px); font-weight: 700;
  color:#fff; line-height:1; margin-bottom:6px;
  font-variant-numeric: tabular-nums;
}
.stat-num.stat-warn { color:#fbbf24; }
.stat-label {
  font-size:12px; color:#94a3b8; font-weight:500;
  text-transform:uppercase; letter-spacing:.4px;
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-card { padding: 12px 6px; }
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 10px; }
}

/* ───── Tips section (newcomer-only, hidden when >1 instance) ───── */
.dash-tips {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(255,255,255,.05);
}
.dash-tips[hidden] { display:none; }
.tips-title {
  font-size: 14px; font-weight: 600; color:#94a3b8;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 14px;
}
.tips-grid {
  display:grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.tip-card {
  padding: 16px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.tip-card:hover { border-color: rgba(34,211,238,.20); background: rgba(34,211,238,.04); }
.tip-icon { font-size:22px; margin-bottom:8px; }
.tip-title { font-size:14px; font-weight:600; color:#fff; margin-bottom:4px; }
.tip-desc { font-size:12px; color:#94a3b8; line-height:1.5; }

.dash-banner {
  background:rgba(234, 179, 8, .08); border:1px solid rgba(234, 179, 8, .25);
  color:#facc15; padding:10px 14px; border-radius:10px; margin-bottom:18px; font-size:13px;
}
.dash-empty {
  text-align:center; padding:80px 20px; color:#94a3b8;
}
.dash-empty p { margin-bottom:8px; }
.dash-empty-hint { font-size:13px; color:#64748b; }
.dash-grid {
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.card {
  position:relative; cursor:pointer; text-align:left;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.7));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  color:inherit; font:inherit; padding:0;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.card:hover {
  transform:translateY(-2px);
  border-color:rgba(34,211,238,.45);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.card:active { transform:translateY(0); }
.card:disabled { opacity:.45; cursor:not-allowed; }

.card-preview {
  position:relative;
  aspect-ratio: 16 / 9;
  width:100%;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, #0c1422, #0a1019);
}
.card-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
  display:block;
}
.card-canvas[hidden] { display:none; }
.card-placeholder {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.card-placeholder[hidden] { display:none; }
.boot-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:999px;
  background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.4);
  color:#22d3ee; font-size:14px; font-weight:600;
  box-shadow: 0 0 24px rgba(34,211,238,.18), inset 0 0 0 1px rgba(255,255,255,.03);
}
.boot-icon { font-size:16px; line-height:1; }

.card-foot {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25);
  font-size:13px;
}
.card-status {
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:#475569;
}
.card-status.ok    { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); animation: cs-pulse-ok 2s ease-in-out infinite; }
.card-status.boot  { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.15); animation: cs-pulse-boot 1.2s ease-in-out infinite; }
.card-status.off   { background:#475569; }
@keyframes cs-pulse-ok {
  0%,100% { box-shadow:0 0 0 3px rgba(34,197,94,.15); }
  50%     { box-shadow:0 0 0 6px rgba(34,197,94,.05); }
}
@keyframes cs-pulse-boot {
  0%,100% { box-shadow:0 0 0 3px rgba(245,158,11,.15); }
  50%     { box-shadow:0 0 0 6px rgba(245,158,11,.05); }
}
.card-title { color:#fff; font-weight:600; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-trial {
  flex:0 0 auto; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:999px;
  background:rgba(34,197,94,.12); color:#22c55e;
  border:1px solid rgba(34,197,94,.25);
  font-variant-numeric:tabular-nums;
}
.card-trial[hidden] { display:none; }
.card-trial[data-expired="1"] { background:rgba(239,68,68,.12); color:#ef4444; border-color:rgba(239,68,68,.3); }
.card-idx { color:#64748b; font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto; }

/* Post-boot setting-up overlay — blocks click for ~7s while Android's launcher
   finishes initializing (it renders before becoming responsive to touch). */
.card-setup {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background:rgba(5,8,15,.62);
  backdrop-filter: blur(2px);
  color:#fff; font-size:13px; font-weight:600;
  pointer-events:none;
  animation: cs-fade-in .25s ease;
}
.card-setup[hidden] { display:none; }
.card-setup .spinner { width:22px; height:22px; border-width:3px; }
.card[data-setting-up="1"] { cursor:wait; }
@keyframes cs-fade-in { from { opacity:0; } to { opacity:1; } }
.card-cog {
  flex:0 0 auto; width:28px; height:28px; padding:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.card-cog:hover { background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.40); color:#22d3ee; transform: rotate(30deg); }
.card-cog svg { display:block; }

/* Per-card popover menu uses fixed positioning set inline by JS. */
.card-menu { min-width:200px; }

/* 3-col layout = phone-like portrait cards (mimics LDPlayer remote app UI). */
.dash-grid.cols-3 .card-preview { aspect-ratio: 9/16; }
.dash-grid.cols-3 .card-foot { padding: 8px 10px; gap:6px; font-size:12px; }
.dash-grid.cols-3 .card-idx { display:none; }
.dash-grid.cols-3 .card-cog { width:24px; height:24px; }
.dash-grid.cols-3 .card-cog svg { width:16px; height:16px; }

.card[data-loading="true"] .card-preview { background:rgba(5,6,8,.85); }
.card[data-loading="true"] .boot-pill {
  background:rgba(34,211,238,.06);
  border-color:rgba(34,211,238,.25);
  color:#22d3ee;
}
/* spinner reuses existing .spinner rule + @keyframes cs-spin lower in this file */

.dash-banner[hidden], .dash-empty[hidden], .dash-toast[hidden] { display:none; }
.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(34,211,238,.25); border-top-color:#22d3ee;
  animation: cs-spin .8s linear infinite;
}
@keyframes cs-spin { to { transform:rotate(360deg); } }
.dash-toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:rgba(15,23,42,.92); border:1px solid rgba(255,255,255,.08);
  color:#fff; padding:10px 16px; border-radius:10px; font-size:13px;
  box-shadow:0 12px 32px rgba(0,0,0,.5); z-index:10;
}
/* ───── Add LDPlayer modal ───── */
.modal-backdrop {
  position:fixed; inset:0; z-index:50;
  background: rgba(5,6,8,.75); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.modal-backdrop[data-open="true"] { opacity:1; pointer-events:auto; }
.modal-backdrop[hidden] { display:none; }
.modal {
  width:100%; max-width: 380px;
  background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.95));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(8px) scale(.98);
  transition: transform .2s ease;
}
.modal-backdrop[data-open="true"] .modal { transform: translateY(0) scale(1); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head .dash-brand { gap:10px; }
.modal-head .dash-logo { width:26px; height:26px; border-radius:7px; }
.modal-head .brand-name { font-size:14px; font-weight:600; color:#fff; }
.modal-close {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  color:#94a3b8; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.modal-close:hover { background:rgba(255,255,255,.08); color:#fff; }
.modal-title { font-size:18px; font-weight:600; margin-bottom:4px; color:#fff; }
.modal-sub { color:#94a3b8; font-size:13px; margin-bottom:16px; }
.form { display:flex; flex-direction:column; gap:10px; }
.form label { color:#cbd5e1; font-size:12px; font-weight:500; margin-bottom:6px; display:block; }
.form input {
  background: rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08);
  color:#fff; padding: 11px 13px; border-radius: 9px;
  font:14px inherit; width:100%;
  transition: border-color .15s, background .15s;
}
.form input:focus {
  outline:none;
  border-color: rgba(34,211,238,.50);
  background: rgba(0,0,0,.6);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10);
}
.form-error { color:#f87171; font-size:12px; min-height:16px; margin-top:2px; }
.form button[type="submit"] {
  margin-top: 4px;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color:#0a0a0a; font-weight:700; font-size:14px;
  padding: 11px; border-radius: 10px; border:0; cursor:pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(34,211,238,.25); }
.form button[type="submit"]:active { transform: translateY(0); filter:brightness(.95); }

@media (max-width:640px) {
  /* Default to 1-col on phone portrait (auto-fill at narrow viewport collapses
     to 1-col naturally). JS inline style wins if user explicitly picked 1/2/3 col
     via Switch layout — they can opt into smaller tiles on mobile. */
  .dash-grid { grid-template-columns: 1fr; }
  .dash-title { font-size:14px; }
  .dash-menu { right: -8px; min-width: 180px; }
}

/* ───────── Back-to-dashboard button in streaming view ───────── */
.back-dash {
  position:fixed; top:10px; left:12px; z-index:10;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px;
  background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7); text-decoration:none;
  font:12px/1 ui-sans-serif,system-ui;
  opacity:0; transition:opacity .25s, background .15s, color .15s;
  pointer-events:none;
}
#stage.show .back-dash { opacity:1; pointer-events:auto; }

/* ───── Trial expired banner ───── */
.trial-banner {
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background: rgba(5,6,8,.85); backdrop-filter: blur(12px);
}
.trial-banner[hidden] { display:none; }
.trial-card {
  background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.95));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 36px 40px;
  text-align:center;
  max-width: 420px; width: 90vw;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.trial-card h2 { color:#fff; font-size:24px; margin-bottom:8px; }
.trial-card p { color:#94a3b8; margin-bottom:20px; }
.trial-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.trial-extend {
  padding:10px 22px; border-radius:10px; border:0; cursor:pointer;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color:#0a0a0a; font-weight:700; font-size:13px;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.trial-extend:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(34,211,238,.30); }
.trial-extend:active { transform: translateY(0); filter:brightness(.95); }
.trial-logout {
  display:inline-block; padding:10px 22px; border-radius:10px;
  background:rgba(255,255,255,.06); color:#cbd5e1; text-decoration:none;
  font-size:13px; transition: background .15s, color .15s;
}
.trial-logout:hover { background:rgba(34,211,238,.12); color:#22d3ee; }
.back-dash:hover { background:rgba(34,211,238,.12); color:#fff; }

/* ───── "+ Tambah LDPlayer" pseudo-card (user-side, paid) ───── */
.card-add {
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, rgba(34,211,238,.06), rgba(168,85,247,.06));
  border: 2px dashed rgba(34,211,238,.30) !important;
  cursor:pointer;
  transition: border-color .2s, transform .2s, background .2s;
  padding: 0;
}
.card-add:hover {
  border-color: rgba(34,211,238,.6) !important;
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(168,85,247,.10));
}
.card-add-inner { text-align:center; padding:24px; }
.card-add-icon { font-size:48px; line-height:1; color:#22d3ee; margin-bottom:10px; font-weight:300; }
.card-add-title { font-size:16px; font-weight:600; color:#fff; margin-bottom:6px; }
/* .card-add-price tidak dipakai lagi — harga ditampilkan saat checkout saja. */
.card-add-hint { font-size:12px; color:#94a3b8; margin-top:6px; }
.dash-grid.cols-3 .card-add { aspect-ratio: 9/16; }
.dash-grid.cols-3 .card-add-icon { font-size:36px; }
.dash-grid.cols-3 .card-add-title { font-size:14px; }

/* .card-extend removed — perpanjang trial sekarang hanya via sidebar. */

/* ───── Payment modal ───── */
.pay-section-label {
  color:#94a3b8; font-size: 12px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase;
  margin: 4px 0 10px;
}
.pay-tiers {
  display:grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.pay-tier {
  position: relative;
  display:flex; flex-direction:column; gap: 4px; align-items:flex-start;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.10);
  color: #cbd5e1; padding: 14px 16px; border-radius: 12px;
  cursor:pointer; transition: border-color .15s, background .15s, transform .15s;
}
.pay-tier:hover { border-color: rgba(34,211,238,.40); transform: translateY(-1px); }
.pay-tier.selected {
  border-color: rgba(34,211,238,.80);
  background: rgba(34,211,238,.10);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10);
}
.pt-duration { font-size: 13px; font-weight: 600; color: #94a3b8; letter-spacing: .3px; }
.pay-tier.selected .pt-duration { color: #22d3ee; }
.pt-price { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.pt-badge {
  position: absolute; top: -8px; right: 12px;
  background: linear-gradient(135deg, #22c55e, #10b981);
  color:#0a0a0a; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .3px;
}

.pay-amount-row {
  display:flex; align-items:baseline; justify-content:space-between;
  background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.20);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
}
.pay-amount-label { color:#94a3b8; font-size:13px; font-weight:500; }
.pay-amount { color:#22d3ee; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.pay-methods-label { color:#cbd5e1; font-size:13px; font-weight:500; margin-bottom:10px; }
.pay-methods {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  max-height: 280px; overflow-y:auto;
  margin-bottom: 14px;
}
.pay-method {
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  text-align:left;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08);
  color: #cbd5e1; padding: 10px 12px; border-radius: 10px;
  cursor:pointer; transition: border-color .15s, background .15s;
}
.pay-method:hover { border-color: rgba(34,211,238,.40); }
.pay-method.selected {
  border-color: rgba(34,211,238,.80);
  background: rgba(34,211,238,.10);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10);
}
.pm-group {
  font-size: 10px; font-weight: 700; letter-spacing:.5px;
  color: #94a3b8; text-transform: uppercase;
}
.pay-method.selected .pm-group { color:#22d3ee; }
.pm-name { font-size: 13px; font-weight: 600; color: #fff; }
.pm-fee { font-size: 11px; color: #64748b; }
.pay-submit {
  width: 100%;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color:#0a0a0a; font-weight:700; font-size:14px;
  padding: 12px; border-radius: 10px; border:0; cursor:pointer;
  transition: transform .15s, box-shadow .15s, filter .15s, opacity .15s;
}
.pay-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(34,211,238,.25); }
.pay-submit:disabled { opacity: .45; cursor: not-allowed; }
.pay-demo-note {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25);
  color: #fbbf24; font-size: 12px;
}
.pay-demo-note[hidden] { display:none; }
@media (max-width: 480px) {
  .pay-methods { grid-template-columns: 1fr; }
}

/* ───── Admin UI ───── */
.admin-settings, .admin-users {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.admin-settings h3, .admin-users h3 { color:#fff; margin-bottom:14px; font-size:15px; }
.admin-settings { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.admin-toggle, .admin-field { color:#cbd5e1; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.admin-field input { background: rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08); color:#fff; padding:6px 10px; border-radius:8px; width:80px; font:14px inherit; }
#save-settings { background: linear-gradient(135deg, #22d3ee, #a855f7); color:#0a0a0a; font-weight:700; border:0; padding:8px 18px; border-radius:9px; cursor:pointer; }

.admin-table { width:100%; border-collapse: collapse; font-size:14px; }
.admin-table th { text-align:left; padding:10px 12px; color:#94a3b8; border-bottom:1px solid rgba(255,255,255,.08); font-weight:500; }
.admin-table td { padding: 12px; border-bottom:1px solid rgba(255,255,255,.04); color:#cbd5e1; }
.admin-table tr:last-child td { border-bottom: 0; }
.status-ok { color:#22c55e; }
.status-warn { color:#f59e0b; }
.status-bad { color:#f87171; }
.status-muted { color:#475569; }
.admin-table .actions { display:flex; gap:6px; }
.admin-table .actions button {
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1; font-size:12px; padding:5px 10px; border-radius:7px; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-table .actions button:hover { background: rgba(34,211,238,.10); color:#fff; border-color:rgba(34,211,238,.30); }
.admin-table .actions button.danger:hover { background: rgba(248,113,113,.15); color:#fff; border-color:rgba(248,113,113,.45); }

/* ───── Admin payments section ───── */
.admin-payments {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 18px;
}
.admin-payments h3 { color:#fff; font-size:16px; margin-bottom:14px; }
.admin-payments-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.admin-payments-head h3 { margin-bottom: 0; }
.pay-demo-badge {
  font-size:11px; font-weight:700; padding: 5px 10px; border-radius:999px;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.30);
  color:#fbbf24; letter-spacing: .3px;
}
.pay-demo-badge[hidden] { display:none; }

.pay-summary {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}
.psum-card {
  background: rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05);
  border-radius:10px; padding: 12px 14px; text-align:center;
}
.psum-num { font-size: 20px; font-weight: 700; color:#fff; line-height:1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.psum-label { font-size: 11px; color:#94a3b8; text-transform: uppercase; letter-spacing: .3px; }
.psum-paid    .psum-num { color:#22c55e; }
.psum-pending .psum-num { color:#fbbf24; }
.psum-fail    .psum-num { color:#f87171; }
.psum-expired .psum-num { color:#f59e0b; }
.psum-refund  .psum-num { color:#a855f7; }
.psum-revenue {
  background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(168,85,247,.08));
  border-color: rgba(34,211,238,.25);
}
.psum-revenue .psum-num { color:#22d3ee; font-size:16px; }

/* ───── Admin pricing & visit log ───── */
.admin-subhead {
  font-size: 14px; font-weight: 600; color: #fff;
  margin: 22px 0 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.admin-sub-note { font-size: 12px; color:#94a3b8; margin-bottom: 14px; line-height: 1.5; }
.admin-field-hint { font-size: 11px; color:#64748b; margin-top: 2px; display: block; line-height: 1.5; }
.admin-pricing-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 18px;
}

.admin-visits {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 18px;
}
.admin-visits h3 { color:#fff; font-size:16px; margin-bottom: 14px; }
.visits-refresh-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  color: #cbd5e1; font-size: 16px; cursor: pointer;
  transition: background .15s, color .15s, transform .25s;
}
.visits-refresh-btn:hover { background: rgba(34,211,238,.10); color: #22d3ee; }
.visits-refresh-btn:active { transform: rotate(360deg); }

.visits-table { min-width: 900px; font-size: 13px; }
.visits-table .visit-ip   { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 11px; color:#94a3b8; }
.visits-table .visit-path { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 12px; color:#22d3ee; }
.visits-table .visit-ua   { color: #cbd5e1; font-size: 12px; }
.visits-table .visit-ref  { color: #94a3b8; font-size: 12px; }

.visits-top-paths {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
}
.visits-top-title {
  font-size: 12px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 10px;
}
.visits-top-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.visits-top-row:last-child { border-bottom: 0; }
.vt-path { color: #22d3ee; font-family: ui-monospace, monospace; font-size: 12px; }
.vt-count { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.visits-summary-extras {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 14px;
}
.visits-table .visit-loc   { color:#e6edf3; font-size: 12px; min-width: 140px; }
.visits-table .visit-isp   { color:#cbd5e1; font-size: 11px; }
.visits-table .visit-asn   { color:#94a3b8; font-size: 10px; font-family: ui-monospace, monospace; }
.visits-table .visit-device { color:#cbd5e1; font-size: 12px; }
.visit-flag { font-size: 14px; vertical-align: middle; }

.pay-filters {
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pay-filters label { display:flex; align-items:center; gap:6px; color:#94a3b8; font-size:13px; }
.pay-filters select, .pay-filters input[type="search"] {
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08);
  color: #fff; padding: 7px 10px; border-radius: 8px;
  font: 13px inherit;
}
.pay-filters input[type="search"] { min-width: 180px; flex: 1; max-width: 320px; }
.pay-filters select:focus, .pay-filters input:focus {
  outline: none; border-color: rgba(34,211,238,.50);
  box-shadow: 0 0 0 3px rgba(34,211,238,.10);
}

.pay-table-wrap { overflow-x: auto; }
.pay-table { min-width: 900px; font-size: 13px; }
.pay-table th, .pay-table td { white-space: nowrap; }
.pay-table .pay-ref { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 11px; color:#94a3b8; }
.pay-amount-cell { font-variant-numeric: tabular-nums; font-weight: 600; color:#e6edf3; }
.pay-empty { text-align:center; padding: 32px; color:#64748b; }
.pay-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.pay-badge.status-ok      { background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.30);  color:#22c55e; }
.pay-badge.status-pending { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.30); color:#fbbf24; }
.pay-badge.status-bad     { background: rgba(248,113,113,.10);border-color: rgba(248,113,113,.30);color:#f87171; }
.pay-badge.status-warn    { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color:#f59e0b; }
.pay-badge.status-muted   { background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.30); color:#a855f7; }
.pay-actions { display:flex; gap:6px; }
.pay-link, .pay-sync {
  display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px; border-radius:7px;
  text-decoration:none;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1; font-size:14px; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pay-link:hover, .pay-sync:hover { background: rgba(34,211,238,.10); color:#22d3ee; border-color:rgba(34,211,238,.30); }
.pay-sync:disabled { opacity:.45; cursor: wait; }

/* ───── Static informational pages (About / Terms / Privacy / Contact) ───── */
.static-body {
  background: #050608;
  color:#e6edf3;
  font: 15px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; margin:0;
  background:
    radial-gradient(60vw 50vh at 80% 5%, rgba(34,211,238,.06), transparent 60%),
    radial-gradient(50vw 50vh at 10% 95%, rgba(168,85,247,.06), transparent 60%),
    #050608;
}
.static-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.static-brand {
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}
.static-logo {
  width:32px; height:32px; border-radius:9px;
  background: conic-gradient(from 210deg, #22d3ee, #a855f7, #22d3ee);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(34,211,238,.20);
}
.static-brand-name { font-size:16px; font-weight:600; letter-spacing:.2px; }
.static-back {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1; padding:8px 16px; border-radius:9px;
  font:13px/1 inherit; font-weight:500;
  text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.static-back:hover { background:rgba(34,211,238,.10); color:#fff; border-color:rgba(34,211,238,.35); }

/* Header nav menu for static pages (About / Terms / Privacy / Contact links).
   Mirrors landing's .nav-menu pattern — inline on desktop, hamburger on mobile. */
.static-nav-menu { display:flex; align-items:center; gap: clamp(12px, 2.5vw, 28px); }
.static-nav-menu a {
  color:#94a3b8; text-decoration:none; font-size:14px; font-weight:500;
  padding: 6px 4px;
  transition: color .15s;
  border-bottom: 2px solid transparent;
}
.static-nav-menu a:hover { color:#22d3ee; border-bottom-color: rgba(34,211,238,.4); }
.static-nav-menu a.current { color:#22d3ee; border-bottom-color: rgba(34,211,238,.8); }
.static-nav-toggle {
  display:none;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1; width:36px; height:36px; border-radius:9px;
  font-size:18px; cursor:pointer;
  transition: background .15s, color .15s;
}
.static-nav-toggle:hover { background:rgba(34,211,238,.10); color:#22d3ee; }
@media (max-width: 720px) {
  .static-nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .static-nav-menu {
    position: absolute; top: 64px; left: 16px; right: 16px;
    flex-direction: column; gap: 4px;
    background: linear-gradient(180deg, rgba(30,41,59,.97), rgba(15,23,42,.97));
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px; padding:8px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
    z-index: 40;
    display:none;
  }
  .static-nav-menu[data-open="true"] { display:flex; }
  .static-nav-menu a { width:100%; padding: 10px 14px; border-radius:8px; border-bottom:0; }
  .static-nav-menu a:hover { background:rgba(34,211,238,.10); }
  .static-nav-menu a.current { background:rgba(34,211,238,.10); border-bottom: 0; }
}
.static-nav { position: relative; }
.static-main {
  max-width: 800px; margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 48px);
}
.static-main h1 {
  font-size: clamp(28px, 4vw, 40px); line-height:1.15; font-weight:700;
  letter-spacing:-.01em; color:#fff;
  margin-bottom: clamp(16px, 2vw, 20px);
}
.static-main h2 {
  font-size: clamp(20px, 2.5vw, 24px); font-weight:600; color:#fff;
  margin: clamp(32px, 4vw, 48px) 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.static-main h3 {
  font-size: 16px; font-weight:600; color:#e6edf3;
  margin: 20px 0 8px;
}
.static-main p { margin-bottom: 14px; color:#cbd5e1; }
.static-main p em { color:#94a3b8; font-style: italic; }
.static-main ul { margin: 0 0 14px 20px; }
.static-main ul ul { margin-top: 6px; margin-bottom: 6px; }
.static-main li { margin-bottom: 6px; color:#cbd5e1; }
.static-main strong { color:#fff; font-weight:600; }
.static-main a { color: #22d3ee; text-decoration: none; }
.static-main a:hover { text-decoration: underline; }
.static-main code {
  background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 5px;
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 13px; color:#22d3ee;
}
.static-lead {
  font-size: clamp(16px, 1.8vw, 18px) !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
  margin-bottom: clamp(20px, 3vw, 28px) !important;
}

.static-footer {
  border-top: 1px solid rgba(255,255,255,.04);
  padding: 28px clamp(20px, 5vw, 48px);
  margin-top: clamp(40px, 6vw, 64px);
  text-align:center;
  color: #64748b;
  font-size: 13px;
}
.static-footer-links {
  display:flex; gap: clamp(12px, 3vw, 28px); justify-content:center; flex-wrap:wrap;
  margin-bottom: 14px;
}
.static-footer-links a {
  color: #94a3b8; text-decoration:none;
  transition: color .15s;
}
.static-footer-links a:hover { color:#22d3ee; }

/* Contact page-specific cards */
.contact-grid {
  display:grid; gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: clamp(20px, 3vw, 28px) 0;
}
.contact-card {
  display:block; text-decoration:none;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  color: inherit;
  transition: border-color .18s, transform .18s, background .18s;
  text-align: center;
}
.contact-card:hover { transform: translateY(-2px); }
.contact-wa:hover { border-color: rgba(37,211,102,.4); background: rgba(37,211,102,.06); }
.contact-email:hover { border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.06); }
.contact-icon { font-size: 38px; line-height:1; margin-bottom: 12px; }
.contact-method { font-size: 13px; color:#94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.contact-value { font-size: 18px; font-weight: 600; color:#fff; margin-bottom: 6px; }
.contact-hint { font-size: 12px; color:#64748b; }

/* ───── Static page enhancements (hero, callouts, feature grids, tables) ───── */
.static-hero {
  background:
    radial-gradient(50vw 40vh at 80% 0%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(40vw 40vh at 0% 100%, rgba(168,85,247,.14), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.6), rgba(5,6,8,0));
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 48px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-align:center;
}
.static-hero-eyebrow {
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.4px;
  text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.30);
  color:#22d3ee;
  margin-bottom: 14px;
}
.static-hero h1 {
  font-size: clamp(28px, 4vw, 44px) !important;
  margin-bottom: 12px !important;
  letter-spacing:-.02em;
}
.static-hero p {
  max-width: 56ch; margin: 0 auto;
  color:#cbd5e1; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.65;
}

.callout {
  display:flex; gap:14px; align-items:flex-start;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(34,211,238,.06);
  border: 1px solid rgba(34,211,238,.20);
  margin: 16px 0;
}
.callout-icon { font-size: 22px; line-height:1; flex:0 0 auto; }
.callout-body { flex:1; color:#cbd5e1; font-size: 14px; }
.callout-body strong { color:#22d3ee; }
.callout.warn { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.20); }
.callout.warn .callout-body strong { color:#fbbf24; }
.callout.danger { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.20); }
.callout.danger .callout-body strong { color:#f87171; }

.feature-grid {
  display:grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 16px 0;
}
.feature-card {
  padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
}
.feature-card-icon { font-size: 24px; line-height:1; margin-bottom: 10px; }
.feature-card-title { font-size: 15px; font-weight: 600; color:#fff; margin-bottom: 6px; }
.feature-card-desc { font-size: 13px; color:#94a3b8; line-height: 1.55; }

.pricing-table {
  width:100%; border-collapse: collapse;
  margin: 14px 0;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
}
.pricing-table th, .pricing-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align:left; font-size:14px;
}
.pricing-table th {
  background: rgba(255,255,255,.04);
  color:#94a3b8; font-weight:600;
  text-transform: uppercase; letter-spacing:.3px; font-size:12px;
}
.pricing-table tr:last-child td { border-bottom: 0; }
.pricing-table td:last-child { color:#22d3ee; font-weight:700; font-variant-numeric: tabular-nums; }

.timeline {
  position:relative;
  margin: 16px 0;
  padding-left: 28px;
}
.timeline::before {
  content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(180deg, rgba(34,211,238,.4), rgba(168,85,247,.2));
}
.timeline-item {
  position:relative; margin-bottom: 18px;
}
.timeline-item::before {
  content:""; position:absolute; left:-25px; top:6px; width:10px; height:10px;
  border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}
.timeline-item.done::before { background:#22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.timeline-item.soon::before { background:#fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.15); }
.timeline-title { font-size: 15px; font-weight: 600; color:#fff; margin-bottom: 2px; }
.timeline-meta { font-size: 11px; color:#64748b; text-transform: uppercase; letter-spacing:.3px; margin-bottom: 4px; font-weight:600; }
.timeline-desc { font-size: 13px; color:#94a3b8; line-height: 1.55; }

.toc {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.toc-title { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color:#94a3b8; margin-bottom: 10px; }
.toc ol { margin: 0 0 0 18px; }
.toc li { margin-bottom: 4px; font-size: 13px; }
.toc a { color: #cbd5e1; text-decoration: none; }
.toc a:hover { color: #22d3ee; }

.contact-row {
  display:grid; gap:8px;
  grid-template-columns: 160px 1fr;
  margin: 8px 0;
  font-size:14px;
}
.contact-row .label { color:#94a3b8; }
.contact-row .value { color:#fff; }
@media (max-width: 520px) {
  .contact-row { grid-template-columns: 1fr; gap: 2px; }
  .contact-row .label { font-size:12px; }
}

/* ───── User sidebar (opens on brand logo tap in dashboard) ───── */
.dash-brand-btn {
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  color:inherit; padding: 4px 6px; border-radius:10px;
  transition: background .15s;
}
.dash-brand-btn:hover { background:rgba(255,255,255,.04); }
.brand-chevron {
  font-size:20px; line-height:1; color:#64748b;
  margin-left: -4px;
  transition: transform .2s, color .2s;
}
.dash-brand-btn[aria-expanded="true"] .brand-chevron { transform: rotate(90deg); color:#22d3ee; }

.sidebar-backdrop {
  position:fixed; inset:0; z-index:60;
  background: rgba(5,6,8,.55); backdrop-filter: blur(4px);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.sidebar-backdrop[data-open="true"] { opacity:1; pointer-events:auto; }
.sidebar-backdrop[hidden] { display:none; }

.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width: min(320px, 88vw);
  z-index: 61;
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(5,8,15,.98));
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 8px 0 40px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  display:flex; flex-direction:column;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.22,.9,.32,1);
  overflow-y:auto;
}
.sidebar[hidden] { display:none; }
.sidebar[data-open="true"] { transform: translateX(0); }

.sidebar-head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand-name { font-size:16px; font-weight:600; color:#fff; }
.sidebar-close {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  color:#94a3b8; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.sidebar-close:hover { background:rgba(255,255,255,.08); color:#fff; }

.sidebar-user {
  display:flex; align-items:center; gap:12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-avatar {
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color:#0a0a0a; font-weight:700; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  text-transform: uppercase;
  flex:0 0 auto;
  box-shadow: 0 4px 16px rgba(34,211,238,.25);
}
.sidebar-user-info { min-width:0; flex:1; }
.sidebar-username { color:#fff; font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-role {
  display:inline-block; margin-top:4px;
  font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(34,211,238,.12); color:#22d3ee;
  border: 1px solid rgba(34,211,238,.30);
}
.sidebar-role[data-role="admin"] { background: rgba(168,85,247,.12); color:#a855f7; border-color: rgba(168,85,247,.30); }

.sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:10px; }
.sidebar-item {
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px; border-radius: 9px;
  background: transparent; border:0; color:#cbd5e1;
  font: 14px inherit; text-decoration:none; text-align:left;
  cursor:pointer; width:100%;
  transition: background .12s, color .12s;
}
.sidebar-item:hover { background: rgba(255,255,255,.05); color:#fff; }
.sidebar-item[hidden] { display:none; }
.si-ic { font-size: 16px; line-height:1; width: 20px; text-align:center; flex:0 0 auto; }
.si-text { flex:1; }
.si-meta {
  font-size: 11px; color:#64748b; font-weight:500;
  white-space:nowrap;
}
.sidebar-item:hover .si-meta { color:#22d3ee; }
.sidebar-divider {
  height: 1px; background: rgba(255,255,255,.06);
  margin: 8px 4px;
}
.sidebar-danger { color: #94a3b8; }
.sidebar-danger:hover { background: rgba(239,68,68,.10); color: #f87171; }

/* Profile modal grid */
.profile-grid {
  display:grid; gap:10px;
  margin: 8px 0 22px;
}
.profile-row {
  display:flex; justify-content:space-between; gap: 16px;
  padding: 10px 14px; border-radius: 9px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05);
}
.profile-row .pr-label { color:#94a3b8; font-size:13px; }
.profile-row .pr-value { color:#fff; font-weight:600; font-size:14px; font-variant-numeric: tabular-nums; }
.profile-row .pr-value.muted { color:#94a3b8; font-weight:500; }
.profile-row .pr-value.ok { color:#22c55e; }
.profile-row .pr-value.warn { color:#fbbf24; }
.profile-row .pr-value.bad { color:#f87171; }

.profile-section-title {
  font-size: 13px; font-weight: 600; color:#cbd5e1;
  margin: 4px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.profile-section-sub {
  color:#94a3b8; font-size: 12px; line-height: 1.5;
  margin-bottom: 12px;
}
#profile-form button[type="submit"] {
  margin-top: 8px;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color:#0a0a0a; font-weight: 700; font-size: 14px;
  padding: 11px; border-radius: 10px; border:0; cursor:pointer;
  transition: transform .15s, box-shadow .15s, filter .15s, opacity .15s;
}
#profile-form button[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(34,211,238,.25); }
#profile-form button[type="submit"]:disabled { opacity: .45; cursor: wait; }

.modal-action {
  width:100%; padding: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color:#cbd5e1; border-radius:10px; cursor:pointer; font: 14px inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-action:hover { background: rgba(34,211,238,.10); color:#22d3ee; border-color: rgba(34,211,238,.30); }

/* Pick-instance list */
.pick-list { display:flex; flex-direction:column; gap:8px; margin: 8px 0 4px; }
.pick-item {
  display:flex; align-items:center; gap:14px;
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08);
  color:#cbd5e1; cursor:pointer; text-align:left;
  transition: border-color .15s, background .15s, transform .15s;
}
.pick-item:hover { border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.05); transform: translateY(-1px); }
.pick-item-icon {
  width: 40px; height: 40px; border-radius:9px;
  background: linear-gradient(135deg, rgba(34,211,238,.20), rgba(168,85,247,.20));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex:0 0 auto;
}
.pick-item-body { flex:1; min-width:0; }
.pick-item-name { color:#fff; font-weight:600; font-size:14px; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick-item-meta { color:#94a3b8; font-size:12px; }
.pick-item-meta .label { font-weight:600; color:#cbd5e1; }
.pick-item-meta.warn { color:#fbbf24; }
.pick-item-meta.bad { color:#f87171; }
.pick-item-chevron { color:#64748b; font-size:20px; flex:0 0 auto; }

/* History modal */
.modal.modal-wide { max-width: 580px; }
.history-list { display:flex; flex-direction:column; gap:8px; max-height: 60vh; overflow-y:auto; margin: 8px -4px 0; padding: 0 4px 4px; }
.history-empty { text-align:center; color:#64748b; padding: 28px 16px; font-size: 13px; }
.history-row {
  display:flex; flex-direction:column; gap:6px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05);
}
.history-row-top { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.history-row-title { color:#fff; font-weight:600; font-size:14px; }
.history-row-amount { color:#22d3ee; font-weight:700; font-variant-numeric: tabular-nums; }
.history-row-meta { display:flex; align-items:center; justify-content:space-between; gap: 12px; font-size:12px; color:#94a3b8; }
.history-status {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.history-status.paid    { background: rgba(34,197,94,.10);   color:#22c55e; border-color: rgba(34,197,94,.30); }
.history-status.pending { background: rgba(251,191,36,.10);  color:#fbbf24; border-color: rgba(251,191,36,.30); }
.history-status.failed  { background: rgba(248,113,113,.10); color:#f87171; border-color: rgba(248,113,113,.30); }
.history-status.expired { background: rgba(245,158,11,.10);  color:#f59e0b; border-color: rgba(245,158,11,.30); }
.history-status.refund  { background: rgba(168,85,247,.10);  color:#a855f7; border-color: rgba(168,85,247,.30); }