/*
 * ═══════════════════════════════════════════════════════════════
 * HELLOX THEME — CANONICAL SOURCE OF TRUTH
 * Pattern: ECLIPSE Gold (warm charcoal + amber/gold accent)
 * Source: derived from /templates/landing.html homepage
 * Version: v1.3 — Patenin Tema 2026-05-18
 *
 * ALL PAGES MUST USE THESE TOKENS.
 * - homepage (landing.html): primary source, fully aligned
 * - auth pages (login/signup): MUST match — scoped via .hx-auth-wrap
 * - dashboard pages: MUST match — same :root token inheritance
 * - sysadmin pages: scoped via .sa-page — tone MUST be consistent,
 *     geometry/spacing MUST use --r-* and --s* from here,
 *     accent = --accent #fbbf24 (gold-400, NOT #f59e0b amber-500)
 *
 * DO NOT hardcode hex/rgba outside this :root block.
 * DO NOT introduce competing tokens (no --color-primary, no --brand-*).
 * All state transitions: oklch(from var(--accent) calc(l ± n) c h)
 *
 * CANONICAL PALETTE SUMMARY:
 *   bg:        #0a0805  — warm charcoal (NOT cool #08090a)
 *   accent:    #fbbf24  — gold-400 primary (NOT amber-500 #f59e0b)
 *   text:      #fbf7ee  — warm off-white
 *   display:   'Bricolage Grotesque'
 *   body:      'Manrope'
 *   mono:      'JetBrains Mono'
 *
 * Last updated: 2026-05-18T06:11:22Z
 * ═══════════════════════════════════════════════════════════════
 */

/* Display: Bricolage Grotesque (distinctive organic grotesque, anti-Inter)
   Body: Manrope (semi-bold friendly, system complement)
   Mono: JetBrains Mono (code + data) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === COLOR TOKENS === */
  /* Warm dark base */
  --bg:#0a0805;
  --bg-elev:#13100a;
  --bg-card:#1a150e;
  --bg-card-hi:#221b12;

  /* Borders */
  --border:rgba(251,191,36,.18);
  --border-strong:rgba(251,191,36,.32);
  --border-soft:rgba(251,191,36,.08);

  /* Text */
  --text:#fbf7ee;
  --text-muted:#a39786;
  --text-dim:#6b6253;

  /* Gold palette */
  --gold-50:#fffbeb;
  --gold-100:#fef3c7;
  --gold-200:#fde68a;
  --gold-300:#fcd34d;
  --gold-400:#fbbf24;  /* primary accent */
  --gold-500:#f59e0b;  /* gradient mid */
  --gold-600:#d97706;
  --gold-700:#b45309;
  --gold-800:#92400e;

  --accent:var(--gold-400);
  --accent-hi:var(--gold-300);
  --accent-deep:var(--gold-500);
  --accent-glow:rgba(251,191,36,.22);
  --accent-glow-strong:rgba(251,191,36,.45);

  /* Status */
  --danger:#ef4444;
  --warn:var(--gold-500);
  --success:#10b981;

  /* Gradient signatures */
  --grad-gold:linear-gradient(135deg, #fde68a 0%, #fbbf24 35%, #f59e0b 75%, #d97706 100%);
  --grad-gold-soft:linear-gradient(135deg, rgba(251,191,36,.18) 0%, rgba(245,158,11,.08) 100%);
  --grad-radial:radial-gradient(circle at 30% 0%, rgba(251,191,36,.18), transparent 60%);
  --grad-card:linear-gradient(135deg, rgba(251,191,36,.05), rgba(245,158,11,.02));

  /* Shadows */
  --shadow-glow:0 0 0 1px rgba(251,191,36,.15), 0 8px 32px rgba(251,191,36,.18);
  --shadow-glow-hi:0 0 0 1px rgba(251,191,36,.30), 0 12px 40px rgba(251,191,36,.32);
  --shadow-card:0 4px 24px rgba(0,0,0,.4);
  --shadow-deep:0 24px 64px rgba(0,0,0,.6);

  /* === ECLIPSE v1.2 — OKLCH brand token (math-friendly state transitions) === */
  --hx-brand: oklch(0.78 0.16 80);         /* gold #fbbf24 equivalent */
  --hx-brand-hi: oklch(0.86 0.18 76);      /* lighter gold hover */
  --hx-brand-deep: oklch(0.62 0.18 72);    /* darker gold active */
  --hx-brand-fade: oklch(0.78 0.16 80 / 0.12);
  --hx-brand-glow: oklch(0.78 0.16 80 / 0.32);
  --hx-surface-0: oklch(0.09 0.012 80);    /* deepest bg */
  --hx-surface-1: oklch(0.12 0.014 80);    /* bg-elev */
  --hx-surface-2: oklch(0.16 0.016 80);    /* bg-card */
  --hx-surface-3: oklch(0.20 0.018 80);    /* bg-card-hi hover */

  /* Sidebar ambient — gradient from warm gold to cool void */
  --hx-sidebar-ambient:
    radial-gradient(ellipse 140% 30% at 50% 0%,  oklch(0.78 0.16 80 / 0.08), transparent 60%),
    radial-gradient(ellipse 80% 50% at 0% 60%,   oklch(0.62 0.14 72 / 0.04), transparent 70%),
    linear-gradient(180deg, oklch(0.12 0.014 80) 0%, oklch(0.09 0.012 80) 100%);

  /* Focus ring WCAG 2.4.13 — 2px solid, 3:1 ratio vs surface */
  --hx-focus: 2px solid oklch(0.86 0.18 76);
  --hx-focus-offset: 2px;

  /* === GEOMETRY CANONICAL — border-radius scale === */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;   /* = --radius from legacy landing tokens */
  --r-xl:   20px;   /* = --radius-lg */
  --r-2xl:  28px;   /* = --radius-xl */
  --r-full: 9999px;

  /* === SPACING CANONICAL — 8pt grid === */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* === LAYOUT CANONICAL === */
  --content-max: 1280px;   /* max-width centered pages */
  --sidebar-w:   240px;    /* sysadmin/dashboard sidebar width */

  /* === TRANSITION CANONICAL === */
  --t-fast: 150ms ease;
  --t-base: 220ms cubic-bezier(0.4,0,0.2,1);
  --t-slow: 400ms cubic-bezier(0.4,0,0.2,1);
}

/* === RESET + BASE === */
*, *::before, *::after { box-sizing:border-box; }

/* === GLOBAL SCROLLBAR — match tema dark gold di SEMUA scrollable element === */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(251,191,36,.42) rgba(13,10,5,.5);
}
html, body { scrollbar-color: rgba(251,191,36,.5) rgba(13,10,5,.6); }

/* Universal [hidden] guard — kunci hidden attribute supaya always win vs class display
   rules (e.g. `.card { display: flex }` override `[hidden]`). Defensive untuk future
   components. Reference: shortcodes empty-state bug 2026-05-18. */
[hidden] { display: none !important; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
  background: rgba(13,10,5,.5);
  border-radius: 50px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(251,191,36,.45), rgba(245,158,11,.55));
  border-radius: 50px;
  border: 2px solid rgba(13,10,5,.7);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(251,191,36,.7), rgba(245,158,11,.85));
  border-color: rgba(13,10,5,.5);
}
*::-webkit-scrollbar-corner { background: transparent; }
/* Inline / horizontal scroll (tabs, code) — slightly thinner */
*::-webkit-scrollbar:horizontal { height: 8px; }

html, body {
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  /* Body font: Manrope — balanced, not overused in this context */
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  font-size:15px; line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body { overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; transition:color .18s; }
a:hover { color:var(--accent-hi); }
/* Display headings: Bricolage Grotesque — distinctive organic grotesque */
h1, h2, h3, h4 {
  font-family:'Bricolage Grotesque', 'Manrope', sans-serif;
  letter-spacing:-0.02em;
}
h1 { font-weight:800; }
h2, h3 { font-weight:700; }
code, pre {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.88em;
}
code { background:rgba(251,191,36,.06); padding:2px 7px; border-radius:5px;
  border:1px solid var(--border-soft); color:var(--gold-200); }
pre {
  background:linear-gradient(135deg, rgba(0,0,0,.3), rgba(251,191,36,.03));
  padding:18px 20px; border-radius:12px; overflow:auto;
  border:1px solid var(--border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
pre code { background:transparent; padding:0; border:0; color:var(--gold-100); font-size:.92em; }

::selection { background:rgba(251,191,36,.4); color:#0a0805; }

/* === SHARED VISUAL LANGUAGE — semua halaman (landing, auth, dashboard) === */
/* Ambient background blobs — fixed gold halo + bottom counter-glow */
@keyframes blobDrift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(2%,-2%) scale(1.04); } }
@keyframes glowPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }

.hx-ambient {
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.hx-ambient-blob {
  position:absolute; border-radius:50%;
  filter:blur(120px);
  animation:blobDrift 12s ease-in-out infinite;
}
.hx-ambient-blob.b1 {
  width:700px; height:500px; top:-120px; right:-80px;
  background:radial-gradient(ellipse, color-mix(in oklab,var(--accent) 14%,transparent), transparent 70%);
  animation-delay:0s;
}
.hx-ambient-blob.b2 {
  width:500px; height:400px; bottom:-80px; left:-60px;
  background:radial-gradient(ellipse, color-mix(in oklab,var(--gold-600) 10%,transparent), transparent 70%);
  animation-delay:-6s;
}

/* Eyebrow — dot + uppercase tracking (hero section + auth page pattern) */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:18px;
}
.eyebrow-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:glowPulse 2s ease-in-out infinite;
  flex-shrink:0;
}

/* Accent word — highlight partial in heading (hero + auth) */
.accent-word {
  color:var(--accent);
  text-shadow:0 0 30px color-mix(in oklab,var(--accent) 28%,transparent);
}

/* Cell icon — bento card icon container (44×44 accent-bg border-hi) */
.hx-cell-icon {
  width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  background:linear-gradient(135deg, color-mix(in oklab,var(--accent) 8%,transparent), transparent);
  border:1px solid color-mix(in oklab,var(--accent) 32%,transparent);
  margin-bottom:16px; flex-shrink:0;
}

.hx-muted { color:var(--text-muted); }
.hx-grad {
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 200%;
  animation:goldShift 6s ease-in-out infinite;
}
@keyframes goldShift {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

/* === BUTTONS — ECLIPSE v1.2 with OKLCH dynamic state + shimmer === */
.hx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:.88rem;
  font-family:'Bricolage Grotesque', 'Manrope', sans-serif;
  line-height:1.3;
  cursor:pointer; text-decoration:none; user-select:none;
  transition:transform 200ms cubic-bezier(0.4,0,0.2,1),
             box-shadow 200ms cubic-bezier(0.4,0,0.2,1),
             background 200ms cubic-bezier(0.4,0,0.2,1),
             border-color 200ms cubic-bezier(0.4,0,0.2,1),
             opacity 150ms;
  position:relative; overflow:hidden; white-space:nowrap;
  min-height:36px;
}
/* Shimmer sweep — high-impact micro-interaction signature */
.hx-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.28) 50%,
    transparent 70%);
  transform:translateX(-120%) skewX(-15deg);
  transition:transform 0s;
  pointer-events:none;
}
.hx-btn:hover::before {
  transform:translateX(120%) skewX(-15deg);
  transition:transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.hx-btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.hx-btn:focus-visible { outline:var(--hx-focus); outline-offset:var(--hx-focus-offset); }

/* OKLCH dynamic: hover = L+0.1, active = L-0.08 scale(0.97) */
.hx-btn-primary {
  background:var(--grad-gold); color:#1a0f00;
  box-shadow:0 6px 20px oklch(0.78 0.16 80 / 0.32), inset 0 1px 0 rgba(255,255,255,.4);
  border-color:oklch(0.78 0.16 80 / 0.6);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.hx-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 36px oklch(0.78 0.16 80 / 0.55), 0 0 0 1px oklch(0.78 0.16 80 / 0.4), inset 0 1px 0 rgba(255,255,255,.5);
  text-decoration:none;
}
.hx-btn-primary:active { transform:translateY(0) scale(.97); }

.hx-btn-ghost {
  background:oklch(0.78 0.16 80 / 0.04); border-color:var(--border);
  color:var(--gold-200);
}
.hx-btn-ghost:hover {
  background:oklch(0.78 0.16 80 / 0.10); border-color:var(--border-strong);
  text-decoration:none; color:var(--gold-100);
  box-shadow:0 4px 14px oklch(0.78 0.16 80 / 0.12);
}
.hx-btn-ghost:active { transform:scale(.97); }

.hx-btn-lg { padding:13px 26px; font-size:1rem; border-radius:10px; min-height:44px; }
.hx-btn-sm { padding:5px 11px; font-size:.78rem; border-radius:6px; min-height:28px; }
.hx-btn-block { width:100%; padding:12px; }

/* === FORMS === */
.hx-form, .hx-auth-card form { display:flex; flex-direction:column; gap:4px; }
.hx-form label, .hx-auth-card label {
  font-size:.78rem; color:var(--text-muted); margin-top:12px;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.hx-form > .hx-muted, .hx-form > p.hx-muted {
  margin:2px 0 0; font-size:.78rem;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=url], input[type=search], input[type=color], textarea, select {
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 13px;
  color:var(--text);
  font-size:.92rem; font-family:inherit;
  transition:all .15s;
}
input[type=search] { -webkit-appearance:none; }
input[type=color] { padding:3px; cursor:pointer; }
input:hover, textarea:hover, select:hover { border-color:var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent);
  background:rgba(251,191,36,.04);
  box-shadow:0 0 0 4px var(--accent-glow);
}
input[disabled] { opacity:.55; cursor:not-allowed; }
/* Readonly: distinct dari editable — gray bg + lock hint via background-image */
input[readonly]:not([type=range]) {
  cursor:not-allowed; color:var(--text-muted);
  background:rgba(13,10,5,.6) !important;
  border-color:var(--border-soft) !important;
  padding-right:38px !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a39786' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
}
input[readonly]:focus { box-shadow:none !important; background:rgba(13,10,5,.6) !important; }
input::placeholder, textarea::placeholder { color:var(--text-dim); }

/* === Custom select dropdown — gold chevron === */
/* NB: background-repeat + background-position pakai !important biar ga ke-reset
   sama `background:` shorthand di scoped CSS lain (cegah chevron tiling repeat). */
select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  padding-right:36px !important;
  cursor:pointer;
}
select option { background:#1a150e; color:var(--text); }

/* === Custom checkbox + radio — gold themed === */
input[type=checkbox], input[type=radio] {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px;
  border:1.5px solid var(--border-strong);
  background:rgba(13,10,5,.6);
  cursor:pointer; transition:all .15s;
  position:relative;
  vertical-align:middle;
  flex-shrink:0;
}
input[type=checkbox] { border-radius:5px; }
input[type=radio] { border-radius:50%; }
input[type=checkbox]:hover, input[type=radio]:hover {
  border-color:var(--accent); background:rgba(251,191,36,.06);
}
input[type=checkbox]:checked, input[type=radio]:checked {
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--accent-glow);
}
input[type=checkbox]:checked::after {
  content:''; position:absolute; left:4px; top:0;
  width:6px; height:11px;
  border:solid #1a0f00; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
input[type=radio]:checked::after {
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%;
  background:#1a0f00;
}

/* === Custom file input — drag-zone style === */
input[type=file] {
  display:block; width:100%;
  padding:0; background:transparent; border:0;
  color:var(--text-muted); font-size:.86rem;
  cursor:pointer;
}
input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button {
  background:linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.1));
  color:var(--gold-200); border:1px solid var(--border-strong);
  padding:9px 16px; border-radius:8px;
  font-weight:700; font-size:.85rem; cursor:pointer;
  margin-right:14px; transition:all .18s;
}
input[type=file]::-webkit-file-upload-button:hover,
input[type=file]::file-selector-button:hover {
  background:linear-gradient(135deg, rgba(251,191,36,.28), rgba(245,158,11,.18));
  border-color:var(--accent);
  color:var(--gold-100);
}

/* === Range slider — gold themed === */
input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px;
  background:linear-gradient(90deg, rgba(251,191,36,.4) 0%, rgba(13,10,5,.5) 0%);
  border-radius:50px; outline:none;
  padding:0; border:0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-200), var(--gold-500));
  cursor:pointer;
  box-shadow:0 2px 8px rgba(251,191,36,.4), 0 0 0 3px var(--accent-glow);
  border:2px solid var(--bg);
}
input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-200), var(--gold-500));
  cursor:pointer; border:2px solid var(--bg);
  box-shadow:0 2px 8px rgba(251,191,36,.4);
}

/* === FLASH === */
.hx-flash-stack { position:fixed; top:18px; right:18px; z-index:1000;
  display:flex; flex-direction:column; gap:10px; max-width:380px; }
.hx-flash {
  padding:13px 18px; border-radius:12px; backdrop-filter:blur(12px);
  background:rgba(26,21,14,.85); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
  animation:hxSlide .35s cubic-bezier(.25,1.4,.4,1);
  font-size:.92rem;
}
.hx-flash-error { border-color:rgba(239,68,68,.4); box-shadow:0 0 0 1px rgba(239,68,68,.2), 0 8px 24px rgba(239,68,68,.18); }
.hx-flash-success { border-color:rgba(16,185,129,.4); box-shadow:0 0 0 1px rgba(16,185,129,.2), 0 8px 24px rgba(16,185,129,.18); }
@keyframes hxSlide { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.hx-landing { min-height:100vh; position:relative; overflow:hidden; }
.hx-landing::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(251,191,36,.13), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(217,119,6,.10), transparent 60%);
}
.hx-landing > * { position:relative; z-index:1; }

.hx-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 5%; max-width:1280px; margin:0 auto;
  backdrop-filter:blur(8px);
}
.hx-nav-brand {
  font-family:'Manrope', sans-serif;
  font-size:1.55rem; font-weight:800; letter-spacing:-0.04em;
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
}
.hx-nav-brand img { filter:drop-shadow(0 0 14px rgba(251,191,36,.35)); }
.hx-nav-brand::before { display:none !important; }
.hx-nav nav { display:flex; gap:22px; align-items:center; }
.hx-nav nav a:not(.hx-btn) {
  color:var(--text-muted); font-size:.92rem; font-weight:500;
  transition:color .18s;
}
.hx-nav nav a:not(.hx-btn):hover { color:var(--text); text-decoration:none; }

.hx-hero {
  max-width:920px; margin:50px auto 80px; padding:0 24px; text-align:center;
  position:relative;
}
.hx-hero h1 {
  font-size:clamp(2.4rem, 6vw, 4.4rem); line-height:1.05;
  margin:0 0 22px; font-weight:900; letter-spacing:-0.04em;
}
.hx-sub {
  font-size:clamp(1rem, 1.6vw, 1.22rem);
  color:var(--text-muted); max-width:680px; margin:0 auto 36px; line-height:1.65;
}
.hx-sub strong { color:var(--gold-200); font-weight:700; }
.hx-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:42px; }

.hx-snippet {
  background:linear-gradient(135deg, rgba(0,0,0,.5), rgba(251,191,36,.04));
  padding:20px 24px; border-radius:14px;
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glow);
  text-align:left; max-width:760px; margin:0 auto;
  position:relative;
}
.hx-snippet::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* Custom scrollbar global — match tema dark gold buat semua snippet/code box */
.hx-snippet, .hx-snippet code, .hx-snippet pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(251,191,36,.45) rgba(13,10,5,.4);
}
.hx-snippet::-webkit-scrollbar,
.hx-snippet code::-webkit-scrollbar,
.hx-snippet pre::-webkit-scrollbar { width: 8px; height: 8px; }
.hx-snippet::-webkit-scrollbar-track,
.hx-snippet code::-webkit-scrollbar-track,
.hx-snippet pre::-webkit-scrollbar-track {
  background: rgba(13,10,5,.5); border-radius: 50px; margin: 4px;
}
.hx-snippet::-webkit-scrollbar-thumb,
.hx-snippet code::-webkit-scrollbar-thumb,
.hx-snippet pre::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(251,191,36,.5), rgba(245,158,11,.6));
  border-radius: 50px; border: 1.5px solid rgba(13,10,5,.4);
}
.hx-snippet::-webkit-scrollbar-thumb:hover,
.hx-snippet code::-webkit-scrollbar-thumb:hover,
.hx-snippet pre::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(251,191,36,.75), rgba(245,158,11,.85));
}

.hx-stat-row {
  display:flex; justify-content:center; gap:60px; margin:48px 0 0;
  flex-wrap:wrap; padding:0 24px;
}
.hx-stat-row > div { text-align:center; }
.hx-stat-row .v {
  font-family:'Manrope', sans-serif;
  font-size:2.4rem; font-weight:800;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.03em;
}
.hx-stat-row .k {
  color:var(--text-muted); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin-top:4px;
}

/* === Features grid === */
.hx-features {
  max-width:1180px; margin:100px auto; padding:0 24px;
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.hx-feat {
  background:var(--grad-card);
  background-color:rgba(26,21,14,.55);
  backdrop-filter:blur(8px);
  padding:28px; border-radius:16px;
  border:1px solid var(--border-soft);
  transition:transform .3s ease, border-color .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.hx-feat::before {
  content:''; position:absolute; top:-2px; left:30%; width:40%; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .35s;
}
.hx-feat:hover { transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-glow); }
.hx-feat:hover::before { opacity:1; }
.hx-feat h3 { margin:0 0 12px; font-size:1.18rem; }
.hx-feat p { margin:0; color:var(--text-muted); font-size:.95rem; line-height:1.6; }

/* === Pricing === */
.hx-pricing-section { padding:80px 0 40px; position:relative; }
.hx-pricing-section h2 { font-size:clamp(1.8rem, 4vw, 2.6rem); }
.hx-pricing-grid {
  display:grid; gap:22px; max-width:1180px; margin:50px auto 30px;
  grid-template-columns:repeat(auto-fit, minmax(252px, 1fr));
  padding:0 24px;
}
.hx-tier {
  background:linear-gradient(160deg, rgba(26,21,14,.95), rgba(13,10,5,.85));
  backdrop-filter:blur(10px);
  padding:32px 26px; border-radius:18px;
  border:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .3s, border-color .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.hx-tier:hover { transform:translateY(-6px); border-color:var(--border-strong); }
.hx-tier.featured {
  border-color:var(--accent);
  box-shadow:var(--shadow-glow-hi);
  background:linear-gradient(160deg, rgba(34,27,18,.95), rgba(20,15,8,.92));
}
.hx-tier.featured::before {
  content:''; position:absolute; inset:-1px;
  border-radius:18px; padding:1px;
  background:var(--grad-gold);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5; pointer-events:none;
}
.hx-tier-tag {
  display:inline-block; align-self:start;
  font-size:.68rem; font-weight:800; padding:5px 11px; border-radius:7px;
  background:var(--grad-gold); color:#1a0f00;
  text-transform:uppercase; letter-spacing:.12em;
  box-shadow:0 4px 14px rgba(251,191,36,.35);
}
.hx-tier h3 { margin:6px 0 0; font-size:1.4rem; }
.hx-tier-price {
  font-family:'Manrope', sans-serif;
  font-size:2.4rem; font-weight:800; line-height:1;
  margin:10px 0 6px; letter-spacing:-0.04em;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hx-tier-price small {
  font-size:.88rem; font-weight:500; color:var(--text-muted);
  letter-spacing:0; -webkit-text-fill-color:var(--text-muted);
}
.hx-tier ul {
  list-style:none; padding:0; margin:18px 0; flex:1;
  display:flex; flex-direction:column; gap:9px;
  font-size:.92rem;
}
.hx-tier li { padding-left:24px; position:relative; color:var(--text); }
.hx-tier li::before {
  content:''; position:absolute; left:0; top:6px;
  width:14px; height:14px; border-radius:50%;
  background:var(--grad-gold);
  box-shadow:0 0 6px rgba(251,191,36,.4);
}
.hx-tier li::after {
  content:'✓'; position:absolute; left:3px; top:3px;
  font-size:.7rem; font-weight:900; color:#1a0f00;
}
.hx-tier .hx-btn { margin-top:6px; }

/* === FAQ === */
.hx-faq { max-width:880px; margin:100px auto; padding:0 24px; }
.hx-faq h2 {
  text-align:center; margin-bottom:32px; font-size:clamp(1.6rem, 4vw, 2.4rem);
}
.hx-faq details {
  background:var(--grad-card);
  background-color:rgba(26,21,14,.5);
  backdrop-filter:blur(8px);
  border-radius:12px; margin-bottom:12px;
  border:1px solid var(--border-soft);
  padding:18px 22px;
  transition:border-color .25s, background .25s;
}
.hx-faq details[open] { border-color:var(--border-strong); background-color:rgba(34,27,18,.6); }
.hx-faq summary {
  cursor:pointer; font-weight:600; font-size:1rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.hx-faq summary::after {
  content:'+'; font-size:1.4rem; color:var(--accent); font-weight:300;
  transition:transform .3s;
}
.hx-faq details[open] summary::after { transform:rotate(45deg); }
.hx-faq summary::-webkit-details-marker { display:none; }
.hx-faq p { margin:14px 0 0; color:var(--text-muted); line-height:1.7; }
.hx-faq code { font-size:.86em; }

.hx-foot {
  text-align:center; padding:60px 24px 40px;
  color:var(--text-muted); border-top:1px solid var(--border-soft);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}
.hx-foot strong { color:var(--gold-200); font-weight:700; }
.hx-foot small { font-size:.82rem; }

/* ============================================================
   AUTH — DEPRECATED split-screen rules (replaced 2026-05-18)
   Layout sekarang: .hx-auth-immersive (auth.css v2.0)
   Class .hx-auth + .hx-auth-brand + .hx-auth-form tidak dipakai lagi.
   ============================================================ */
/*
.hx-auth { ... }
.hx-auth-brand { ... }
.hx-auth-form { ... }
.hx-auth-card { ... }  -- dipindahkan ke auth.css v2.0
*/

/* ============================================================
   DASHBOARD
   ============================================================ */
.hx-dash-wrap {
  display:grid; grid-template-columns:248px 1fr;
  min-height:100vh; transition:grid-template-columns .25s ease;
}
body.hx-side-collapsed .hx-dash-wrap { grid-template-columns:72px 1fr; }

/* ============================================================
   SIDEBAR — clean SVG icons + section grouping + collapsible
   ============================================================ */
.hx-side {
  /* T141 Amber: neutral dark surface — drop warm gradient fill */
  --t141-bg:        #08090a;
  --t141-surface:   #141519;
  --t141-surface-2: #1c1e24;
  --t141-surface-3: #23262e;
  --t141-accent:    #f59e0b;
  --t141-accent-dim:  color-mix(in oklab, #f59e0b 60%, transparent);
  --t141-accent-glow: color-mix(in oklab, #f59e0b 28%, transparent);
  --t141-accent-halo: color-mix(in oklab, #f59e0b 12%, transparent);
  --t141-accent-bg:   color-mix(in oklab, #f59e0b 8%, transparent);
  --t141-text:      #fafafa;
  --t141-text-dim:  color-mix(in oklab, #fafafa 65%, transparent);
  --t141-text-low:  color-mix(in oklab, #fafafa 38%, transparent);
  --t141-border:    color-mix(in oklab, #fafafa 9%, transparent);
  --t141-border-hi: color-mix(in oklab, #f59e0b 32%, transparent);
  background: color-mix(in oklab, var(--t141-surface) 96%, var(--t141-bg));
  border-right:1px solid var(--t141-border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  overflow:hidden;
  transition:width .25s ease;
}
/* Saat collapsed, allow tooltip ::after escape sidebar boundary (audit Bug #12).
   Sebelumnya tooltip nav icon clipped karena .hx-side overflow:hidden.
   Pakai clip-path inset biar collapse animation tetep clip top/bottom/left
   tapi right extended ~240px untuk tooltip space. */
.hx-side.collapsed {
  overflow: visible;
  clip-path: inset(0 -240px 0 0);
}
/* Subtle amber halo at top — T141 signature (radial, not sharp shimmer) */
.hx-side::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:200px;
  background: radial-gradient(ellipse at 50% -20%,
    color-mix(in oklab, #f59e0b 10%, transparent) 0%,
    transparent 70%);
  pointer-events:none; z-index:1;
}

/* === Collapse toggle button — ECLIPSE Gold v1.2 premium tab treatment
   Embedded flush di edge kanan sidebar, pill/tab shape, deliberate.
   Bukan floating half-out — tab yang proper. === */
.hx-side-collapse-btn {
  /* T141 — tiny circle at very top-right corner of sidebar */
  position:absolute;
  top:8px; right:6px;

  width:18px; height:18px;
  border-radius:50%;
  padding:0;

  background:var(--t141-surface-3, #1c1e24);
  border:1px solid var(--t141-border, rgba(255,255,255,.09));

  color:var(--text-muted);
  cursor:pointer; z-index:30;
  display:flex; align-items:center; justify-content:center;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease;

  outline:none;
}

/* Hover: amber tint + slight scale */
.hx-side-collapse-btn:hover {
  color:var(--t141-accent, #f59e0b);
  border-color:var(--t141-border-hi, color-mix(in oklab, #f59e0b 32%, transparent));
  background:var(--t141-accent-bg, color-mix(in oklab, #f59e0b 8%, transparent));
}

/* Focus ring amber */
.hx-side-collapse-btn:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px var(--t141-accent-bg, color-mix(in oklab, #f59e0b 12%, transparent));
}

/* Active/pressed */
.hx-side-collapse-btn:active { transform:scale(0.92); }

/* SVG icon transition — rotate flip on collapse */
.hx-side-collapse-btn svg {
  transition:transform .25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink:0;
  width:8px; height:8px;
  stroke-width:2.8;
}

/* Collapsed state: icon rotate 180° (chevron flips arah) */
.hx-side.collapsed .hx-side-collapse-btn svg { transform:rotate(180deg); }

/* Collapsed: center horizontally in mini-rail (no right offset) */
.hx-side.collapsed .hx-side-collapse-btn { right:auto; left:50%; transform:translateX(-50%); top:8px; }
.hx-side.collapsed .hx-side-collapse-btn:active { transform:translateX(-50%) scale(0.92); }

/* Tooltip — "Tutup sidebar" / "Buka sidebar" */
.hx-side-collapse-btn[data-tooltip]::after {
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 12px);
  top:50%; transform:translateY(-50%);
  background:oklch(0.16 0.020 80 / 0.96);
  color:var(--text);
  padding:6px 12px;
  border-radius:8px;
  font-size:.8rem; font-weight:500;
  white-space:nowrap;
  pointer-events:none;
  border:1px solid oklch(0.78 0.16 80 / 0.18);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  transform:translateY(-50%) translateX(-4px);
  z-index:50;
}
.hx-side-collapse-btn[data-tooltip]:hover::after {
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* === Collapsed state — ECLIPSE pure icon-only mini rail (72px) === */
/* Hide: brand text, section dividers, workspace card, workspace switcher,
   user name/handle, nav span labels, tab-lock indicator, switch-ws span */
.hx-side.collapsed .hx-side-brand-text,
.hx-side.collapsed .hx-side-section,
.hx-side.collapsed .hx-ws-switcher,
.hx-side.collapsed .hx-ws-info,
.hx-side.collapsed .hx-side-user-info,
.hx-side.collapsed .hx-side-nav a span,
.hx-side.collapsed #hxTabLockIndicator { display:none !important; }

/* Brand area — logo centered, vertically balanced */
.hx-side.collapsed .hx-side-brand {
  justify-content:center; padding:18px 0 14px;
}
/* Logo mark slight scale up saat collapsed — fills 72px column nicely */
.hx-side.collapsed .hx-side-logo {
  width:36px; height:36px;
  filter:drop-shadow(0 0 14px oklch(0.78 0.16 80 / 0.55));
}

/* Nav items — pure icon, centered, 44px hit area */
.hx-side.collapsed .hx-side-nav { padding:4px 8px; }
.hx-side.collapsed .hx-side-nav a {
  flex-direction:row; align-items:center; justify-content:center;
  padding:11px 0; gap:0;
  position:relative;
  border-radius:10px;
  min-height:44px;
}
/* Badge tetap visible di collapsed (jumlah pesan inbox) */
.hx-side.collapsed .hx-side-nav a .hx-side-badge {
  position:absolute; top:6px; right:8px;
  min-width:16px; height:16px;
  font-size:.6rem; padding:0 4px;
}

/* Tooltip on hover saat collapsed — ECLIPSE dark glass */
.hx-side.collapsed .hx-side-nav a[data-label]::after {
  content:attr(data-label);
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:oklch(0.16 0.020 80 / 0.97);
  color:var(--text);
  padding:7px 13px; border-radius:8px; font-size:.82rem; font-weight:500;
  white-space:nowrap; pointer-events:none;
  border:1px solid oklch(0.78 0.16 80 / 0.20);
  opacity:0; transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03);
  z-index:9999;
  letter-spacing:.01em;
}
.hx-side.collapsed .hx-side-nav a[data-label]:hover::after {
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* User foot — avatar only, centered */
.hx-side.collapsed .hx-side-foot { padding:10px 8px; }
.hx-side.collapsed .hx-side-user-row {
  flex-direction:column; gap:8px; align-items:center; justify-content:center;
}
.hx-side.collapsed .hx-side-user-avatar,
.hx-side.collapsed .hx-side-user-avatar-fallback {
  width:36px; height:36px; flex-shrink:0;
}
/* Theme toggle + logout — icon centered, bigger hit area */
.hx-side.collapsed .hx-theme-toggle,
.hx-side.collapsed .hx-side-logout {
  padding:8px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
}

/* === Mobile sidebar — hamburger overlay === */
.hx-mobile-hamburger {
  display:none;
  position:fixed; top:12px; left:12px; z-index:1100;
  width:40px; height:40px; border-radius:10px;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text); cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.hx-mobile-overlay {
  display:none;
  position:fixed; inset:0; z-index:1090;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
}
.hx-mobile-overlay.show { display:block; }

/* Tablet/narrow desktop (700-1024px) — FORCE mini rail (72px icons only),
   sidebar tetap visible part of grid. Drawer pattern dipindah ke <700px
   (true mobile). Pattern ini biar agent yang ngecilin Chrome tetap punya
   nav access tanpa harus toggle hamburger. */
@media (max-width:1024px) and (min-width:701px) {
  .hx-dash-wrap,
  body.hx-side-collapsed .hx-dash-wrap { grid-template-columns:72px 1fr !important; }
  .hx-side { width:72px !important; }
  .hx-side-collapse-btn { display:none !important; }
  /* Hide text labels + tab lock indicator — pure icon rail */
  .hx-side-brand-text,
  .hx-side-section,
  .hx-ws-switcher,
  .hx-ws-info,
  .hx-side-user-info,
  .hx-side-nav a span,
  .hx-ws-switch-link span,
  .hx-dev-mode-link span,
  .hx-dev-mode-link .dev-arrow,
  #hxTabLockIndicator { display:none !important; }
  .hx-side-brand { justify-content:center; padding:14px 0 !important; }
  .hx-side-logo { width:36px; height:36px; }
  .hx-side-nav { padding:4px 8px !important; }
  .hx-side-nav a { justify-content:center; padding:11px 0 !important; min-height:44px; }
  /* Tooltip mirror saat tablet mini-rail */
  .hx-side-nav a[data-label]::after {
    content:attr(data-label);
    position:absolute; left:calc(100% + 12px); top:50%;
    transform:translateY(-50%) translateX(-4px);
    background:oklch(0.16 0.020 80 / 0.97);
    color:var(--text);
    padding:7px 13px; border-radius:8px; font-size:.82rem; font-weight:500;
    white-space:nowrap; pointer-events:none;
    border:1px solid oklch(0.78 0.16 80 / 0.20);
    opacity:0; transition:opacity .15s ease, transform .15s ease;
    box-shadow:0 8px 24px rgba(0,0,0,.55);
    z-index:9999;
  }
  .hx-side-nav a[data-label]:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
  .hx-side-foot { padding:10px 8px !important; }
  .hx-side-user-row { justify-content:center; flex-direction:column; align-items:center; gap:8px; }
  .hx-side-user-avatar, .hx-side-user-avatar-fallback { width:36px !important; height:36px !important; }
  .hx-ws-switch-link { justify-content:center; padding:8px 0 !important; }
  .hx-mobile-hamburger { display:none !important; }
}

/* True mobile (<700px) — drawer pattern (slide-in via hamburger).
   Pattern asli sebelum 2026-05-14 — sebelumnya kena @media 1024 yang
   bikin agent narrow Chrome paksa toggle drawer buat akses nav. */
@media (max-width:700px) {
  .hx-dash-wrap { grid-template-columns:1fr !important; }
  body.hx-side-collapsed .hx-dash-wrap { grid-template-columns:1fr !important; }
  .hx-side {
    position:fixed; top:0; left:-280px; width:248px; height:100vh;
    z-index:1095; transition:left .28s cubic-bezier(.25,1.4,.4,1);
    box-shadow:0 24px 48px rgba(0,0,0,.6);
  }
  .hx-side.open-mobile { left:0; }
  .hx-side .hx-side-collapse-btn { display:none !important; }
  .hx-mobile-hamburger { display:flex; }
  .hx-main { padding-top:64px !important; }
  html, body {
    background-image:none !important;
  }
}

/* Brand header — T141 sysadmin-style: compact 60px height, border-bottom */
.hx-side-brand {
  position:relative; z-index:1;
  font-family:'Bricolage Grotesque', 'Manrope', sans-serif;
  display:flex; align-items:center; gap:10px;
  padding:0 56px 0 16px;
  height:60px;
  border-bottom:1px solid var(--t141-border);
  text-decoration:none;
  color:var(--t141-text);
  flex-shrink:0;
}
.hx-side-brand:hover { text-decoration:none; color:var(--t141-text); }
.hx-side-brand::before { display:none !important; }
.hx-side-logo {
  width:32px; height:32px; flex-shrink:0;
  filter:drop-shadow(0 0 10px color-mix(in oklab, #f59e0b 30%, transparent));
  transition:filter 200ms;
  border-radius:9px;
  box-shadow:0 0 14px color-mix(in oklab, #f59e0b 28%, transparent);
}
.hx-side-brand:hover .hx-side-logo {
  filter:drop-shadow(0 0 18px color-mix(in oklab, #f59e0b 50%, transparent));
}
/* Brand text: plain --t141-text, no gradient animation */
.hx-side-brand-text {
  font-size:15px; font-weight:700;
  letter-spacing:-0.02em;
  color:var(--t141-text);
  display:block;
  transition:opacity .2s ease;
}
/* Sub-label "Dashboard" below brand name */
.hx-side-brand-sub {
  font-size:10px; font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--t141-text-low);
  margin-top:1px;
  display:block;
}
/* Nav item span — smooth fade on collapse */
.hx-side-nav a span {
  transition:opacity .18s ease;
}

/* Workspace info — T141 compact single-row (drop chunky card) */
.hx-ws-info, .hx-ws-switcher {
  position:relative; z-index:1;
  margin:10px 12px 0;
  padding:9px 11px;
  display:flex; align-items:center; gap:9px;
  background:var(--t141-surface-2);
  border:1px solid var(--t141-border);
  border-radius:10px;
  flex-shrink:0;
  transition:border-color .18s, background .18s;
}
.hx-ws-info:hover, .hx-ws-switcher:hover {
  border-color:var(--t141-border-hi);
  background:var(--t141-surface-3);
}
/* Workspace initial tile — accent tinted small square */
.hx-ws-info::before {
  content:attr(data-initial);
  width:26px; height:26px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--t141-accent-bg);
  border:1px solid var(--t141-border-hi);
  color:var(--t141-accent);
  font-weight:800; font-size:11px;
  border-radius:6px;
  letter-spacing:0;
}
.hx-ws-name-wrap {
  flex:1; min-width:0;
  display:flex; flex-direction:row; align-items:center; gap:7px;
  overflow:hidden;
}
.hx-ws-name {
  font-size:12px; font-weight:600; color:var(--t141-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-0.01em;
  flex:1; min-width:0;
}
.hx-ws-switch-link {
  display:flex; align-items:center; gap:7px;
  padding:7px 16px; margin:0 0 4px;
  font-size:.74rem; color:var(--text-muted);
  text-decoration:none; transition:all .15s;
  border-bottom:1px solid var(--border-soft);
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.hx-ws-switch-link:hover { color:var(--gold-300); background:rgba(251,191,36,.04); }
.hx-side.collapsed .hx-ws-switch-link span { display:none !important; }
.hx-side.collapsed .hx-ws-switch-link { justify-content:center; padding:8px 0; }

/* Developer mode link — superadmin only, T141 subtle border style */
.hx-dev-mode-link {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  margin:6px 12px 2px;
  padding:7px 11px;
  background:color-mix(in oklab, #f59e0b 6%, transparent);
  border:1px solid var(--t141-border-hi);
  border-radius:6px;
  color:var(--t141-accent-dim);
  text-decoration:none;
  font-size:11px; font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:all 150ms ease;
  flex-shrink:0;
}
.hx-dev-mode-link svg:first-child { width:13px; height:13px; flex-shrink:0; opacity:.8; }
.hx-dev-mode-link .dev-arrow { margin-left:auto; width:11px; height:11px; transition:transform .15s; }
.hx-dev-mode-link:hover {
  background:color-mix(in oklab, #f59e0b 12%, transparent);
  border-color:color-mix(in oklab, #f59e0b 50%, transparent);
  color:var(--t141-accent);
}
.hx-dev-mode-link:hover .dev-arrow { transform:translateX(2px); }
.hx-side.collapsed .hx-dev-mode-link span,
.hx-side.collapsed .hx-dev-mode-link .dev-arrow { display:none !important; }
.hx-side.collapsed .hx-dev-mode-link { justify-content:center; padding:9px 0; margin:6px 8px; }
.hx-ws-switch {
  flex:1; padding:5px 8px; font-size:.82rem; font-weight:600;
  background:transparent; border:1px solid var(--border-soft); border-radius:6px;
  color:var(--text); cursor:pointer;
}
.hx-ws-switch:hover { border-color:var(--border); }
.hx-ws-plan {
  font-size:9px; font-weight:800; letter-spacing:.08em;
  padding:2px 6px; border-radius:4px;
  background:var(--t141-accent-bg);
  color:var(--t141-accent);
  border:1px solid var(--t141-border-hi);
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
}

/* Nav body — scrollable kalau panjang */
.hx-side-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:6px 8px 18px;
  display:flex; flex-direction:column; gap:1px;
}
.hx-side-nav::-webkit-scrollbar { width:4px; height:0; }
.hx-side-nav::-webkit-scrollbar-horizontal,
.hx-side-nav::-webkit-scrollbar:horizontal { display:none; height:0; width:0; }
.hx-side-nav::-webkit-scrollbar-thumb { background:var(--border-soft); border-radius:2px; }
.hx-side-nav::-webkit-scrollbar-thumb:hover { background:var(--border); }

/* Section title — T141: 9px, low-contrast text-low (match sysadmin) */
.hx-side-section {
  padding:12px 12px 6px;
  font-size:9px; font-weight:700;
  color:var(--t141-text-low);
  text-transform:uppercase; letter-spacing:.14em;
}
.hx-side-section:first-child { padding-top:6px; }

/* Divider */
.hx-side-divider {
  height:1px; background:var(--border-soft); margin:8px 4px;
}

/* Nav links — T141 density: 36px min-height, 13px text, gap 10px */
.hx-side-nav a {
  display:flex; align-items:center; gap:10px;
  min-height:36px;
  padding:7px 12px; border-radius:6px;
  color:var(--t141-text-dim); font-size:13px; font-weight:500;
  transition:color 150ms ease, background 150ms ease;
  white-space:nowrap;
  position:relative;
  text-decoration:none;
}
.hx-side-nav a svg {
  width:15px; height:15px; flex-shrink:0; opacity:.6;
  transition:opacity .15s;
}
.hx-side-nav a:hover {
  color:var(--t141-text);
  background:color-mix(in oklab, var(--t141-accent-bg) 80%, var(--t141-surface));
  text-decoration:none;
}
.hx-side-nav a:hover svg { opacity:1; }
.hx-side-nav a.active {
  color:var(--t141-accent);
  background:var(--t141-accent-bg);
  font-weight:600;
  position:relative;
}
/* Active indicator — 2px amber left bar, no gradient fill (drop ECLIPSE gradient) */
.hx-side-nav a.active::before {
  content:'';
  position:absolute; left:0; top:20%; bottom:20%;
  width:2px; border-radius:0 2px 2px 0;
  background:var(--t141-accent);
  box-shadow:0 0 8px var(--t141-accent-glow);
  pointer-events:none;
}
.hx-side-nav a.active svg {
  opacity:1; color:var(--t141-accent);
}

/* Badge inside nav link (count chat pending dll) */
.hx-side-badge {
  margin-left:auto;
  background:#ef4444; color:#fff;
  font-size:.66rem; font-weight:800;
  padding:1px 7px; border-radius:8px;
  min-width:18px; text-align:center;
  box-shadow:0 0 0 2px rgba(239,68,68,.2);
  animation:pulseDot 1.6s ease-in-out infinite;
}

/* Super admin link — distinct gold */
.hx-side-super-link {
  background:linear-gradient(90deg, rgba(251,191,36,.12), rgba(245,158,11,.04)) !important;
  border:1px solid rgba(251,191,36,.18);
  color:var(--gold-200) !important;
}
.hx-side-super-link svg { color:var(--gold-300); opacity:1 !important; }
.hx-side-super-link:hover {
  background:linear-gradient(90deg, rgba(251,191,36,.20), rgba(245,158,11,.08)) !important;
  border-color:rgba(251,191,36,.30);
}

/* Footer — T141 bordered user card */
.hx-side-foot {
  position:relative; z-index:1;
  border-top:1px solid var(--t141-border);
  padding:12px;
  flex-shrink:0;
}
.hx-side-user-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border:1px solid var(--t141-border);
  border-radius:10px;
  background:var(--t141-surface);
}
.hx-side-user-avatar {
  width:30px; height:30px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:1.5px solid var(--t141-border-hi);
}
.hx-side-user-avatar-fallback {
  width:30px; height:30px; border-radius:50%;
  background:var(--t141-accent);
  color:#0a0700; font-weight:800; font-size:11px;
  display:grid; align-items:center; justify-content:center;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 0 10px var(--t141-accent-glow);
}
.hx-side-user-info { flex:1; min-width:0; }
.hx-side-user-name {
  font-size:12px; font-weight:600; color:var(--t141-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hx-side-user-handle {
  font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t141-accent-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:1px; display:block;
}
/* Language toggle pill — 2-segment ID|EN */
.hx-lang-toggle {
  display:inline-flex; align-items:stretch;
  background:var(--t141-surface-2, #141519);
  border:1px solid var(--t141-border, rgba(255,255,255,.08));
  border-radius:6px;
  overflow:hidden;
  flex-shrink:0;
}
.hx-lang-opt {
  background:transparent; border:0;
  padding:5px 8px;
  font-family:'Manrope', sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.08em;
  color:var(--text-dim, rgba(255,255,255,.45));
  cursor:pointer;
  transition:background .12s, color .12s;
  line-height:1;
}
.hx-lang-opt:hover { color:var(--t141-text, #fafafa); }
.hx-lang-opt.active {
  background:var(--t141-accent-bg, color-mix(in oklab, #f59e0b 12%, transparent));
  color:var(--t141-accent, #f59e0b);
}
.hx-lang-opt + .hx-lang-opt { border-left:1px solid var(--t141-border, rgba(255,255,255,.08)); }
.hx-side.collapsed .hx-lang-toggle { display:none; }

.hx-side-logout {
  width:28px; height:28px; border-radius:6px;
  display:grid; place-items:center;
  color:var(--t141-text-low);
  background:transparent;
  border:1px solid var(--t141-border);
  transition:all .15s;
  flex-shrink:0;
}
.hx-side-logout svg { width:13px; height:13px; }
.hx-side-logout:hover {
  background:color-mix(in oklab, #ef4444 10%, transparent);
  border-color:color-mix(in oklab, #ef4444 35%, transparent);
  color:#fca5a5;
  text-decoration:none;
}

.hx-main {
  padding:32px 40px 60px;
  max-width:1480px;
  width:100%;
  margin-left:auto; margin-right:auto;
}
.hx-main > p:first-of-type, .hx-main > h1 + p {
  color:var(--text-muted); font-size:.95rem; line-height:1.55;
  margin:0 0 22px; max-width:780px;
}
.hx-main h1 {
  margin:0 0 6px; font-size:clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight:800; letter-spacing:-0.02em;
}
.hx-main h2 {
  margin:30px 0 14px; font-size:1.1rem; font-weight:700;
  letter-spacing:-0.01em; color:var(--text);
}
.hx-main h2:first-of-type { margin-top:24px; }
.hx-main h3 { font-size:.98rem; font-weight:700; margin:0 0 10px; }
.hx-row-between {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:8px;
}
.hx-row-between > div:first-child { flex:1; min-width:240px; }

/* === Page header pattern (eyebrow + h1 + descriptor) === */
.hx-page-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.hx-page-header > .info { flex:1; min-width:240px; }
.hx-page-header .eyebrow {
  font-size:.68rem; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.12em;
  font-weight:700; margin-bottom:6px;
}
.hx-page-header h1 { margin:0 0 4px; }
.hx-page-header p { margin:0; color:var(--text-muted); }
.hx-page-header .actions { display:flex; gap:8px; flex-wrap:wrap; }

/* === Toast notification component === */
.hx-toast-container {
  position:fixed; top:18px; right:18px; z-index:2147483647;
  display:flex; flex-direction:column; gap:8px; max-width:380px;
  pointer-events:none;
}
.hx-toast {
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:10px; padding:11px 14px;
  display:flex; gap:10px; align-items:flex-start;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  font-size:.86rem; pointer-events:auto;
  animation:hxToastIn .25s cubic-bezier(.25,1.4,.4,1);
}
@keyframes hxToastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
.hx-toast.success { border-color:rgba(16,185,129,.32); background:linear-gradient(135deg, rgba(16,185,129,.1), rgba(13,10,5,.9)); }
.hx-toast.error { border-color:rgba(239,68,68,.32); background:linear-gradient(135deg, rgba(239,68,68,.1), rgba(13,10,5,.9)); }
.hx-toast.warn { border-color:rgba(245,158,11,.32); background:linear-gradient(135deg, rgba(245,158,11,.1), rgba(13,10,5,.9)); }
.hx-toast .toast-icon { flex-shrink:0; font-size:1.1rem; line-height:1; padding-top:1px; }
.hx-toast.success .toast-icon { color:#34d399; }
.hx-toast.error .toast-icon { color:#fca5a5; }
.hx-toast.warn .toast-icon { color:var(--gold-300); }
.hx-toast .toast-body { flex:1; }
.hx-toast .toast-close {
  background:transparent; border:0; color:var(--text-muted);
  cursor:pointer; padding:0 4px; font-size:1rem; line-height:1;
}
.hx-toast .toast-close:hover { color:var(--text); }

/* === Cards — ECLIPSE elevated glassmorphic === */
.hx-card {
  background:var(--grad-card);
  background-color:rgba(26,21,14,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:22px 24px;
  border-radius:14px;
  border:1px solid oklch(0.78 0.16 80 / 0.09);
  margin:14px 0;
  transition:border-color 200ms, box-shadow 200ms, transform 200ms;
  position:relative; overflow:hidden;
}
/* Top highlight line — depth signature */
.hx-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.06) 70%, transparent 100%);
  pointer-events:none;
}
.hx-card:hover {
  border-color:oklch(0.78 0.16 80 / 0.18);
  box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 0 1px oklch(0.78 0.16 80 / 0.06);
}
.hx-card > h2:first-child,
.hx-card > h3:first-child { margin-top:0; }
.hx-card > p:first-child,
.hx-card > h2:first-child + p,
.hx-card > h3:first-child + p { color:var(--text-muted); font-size:.88rem; line-height:1.55; margin-top:4px; }
.hx-card section + section { margin-top:18px; }

/* === Stats — ECLIPSE KPI with atmospheric glow hover === */
.hx-stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; margin:14px 0 22px;
}
.hx-stat {
  background:var(--grad-card);
  background-color:rgba(26,21,14,.62);
  backdrop-filter:blur(8px);
  padding:18px 20px; border-radius:12px;
  border:1px solid oklch(0.78 0.16 80 / 0.09);
  transition:transform 200ms cubic-bezier(0.4,0,0.2,1),
             border-color 200ms,
             box-shadow 200ms;
  position:relative; overflow:hidden;
}
/* Atmospheric corner glow — ECLIPSE signature */
.hx-stat::after {
  content:'';
  position:absolute; top:-20px; right:-20px;
  width:80px; height:80px;
  background:radial-gradient(circle, oklch(0.78 0.16 80 / 0.10), transparent 65%);
  pointer-events:none; opacity:0;
  transition:opacity 200ms;
}
.hx-stat:hover { transform:translateY(-2px); border-color:oklch(0.78 0.16 80 / 0.22); }
.hx-stat:hover::after { opacity:1; }
.hx-stat:hover { box-shadow:0 10px 32px rgba(0,0,0,.35), 0 0 0 1px oklch(0.78 0.16 80 / 0.08); }
.hx-stat .k {
  color:var(--text-muted); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.12em; font-weight:700;
}
.hx-stat .v {
  font-family:'Bricolage Grotesque', 'Manrope', sans-serif;
  font-size:1.8rem; font-weight:800; margin-top:6px;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.025em; line-height:1.1;
}

/* === Tables === */
.hx-table { width:100%; border-collapse:collapse; }
.hx-table th, .hx-table td {
  padding:12px 16px; text-align:left;
  border-bottom:1px solid var(--border-soft);
  font-size:.9rem; vertical-align:middle;
}
.hx-table th {
  color:var(--text-muted); font-weight:700;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
  background:rgba(0,0,0,.18); padding-top:11px; padding-bottom:11px;
}
.hx-table thead tr { border-bottom:1px solid var(--border); }
.hx-table tr { transition:background .15s; }
.hx-table tbody tr:hover { background:rgba(251,191,36,.025); }
.hx-table tbody tr:last-child td { border-bottom:0; }
.hx-table a { color:var(--gold-200); font-weight:500; }
.hx-table a:hover { color:var(--accent-hi); }
.hx-table input, .hx-table select { font-size:.85rem; padding:5px 9px; }
.hx-table code { font-size:.78rem; padding:1px 6px; }

/* === Empty state — ECLIPSE visual treatment (bukan plain text) === */
.hx-empty {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, oklch(0.78 0.16 80 / 0.06), transparent 70%),
    linear-gradient(160deg, rgba(26,21,14,.5), rgba(13,10,5,.35));
  padding:56px 32px; border-radius:18px; text-align:center;
  border:1px dashed oklch(0.78 0.16 80 / 0.20);
  margin:18px 0;
  position:relative; overflow:hidden;
}
/* Atmospheric corner accents */
.hx-empty::before {
  content:'';
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:40%; height:1px;
  background:linear-gradient(90deg, transparent, oklch(0.78 0.16 80 / 0.4), transparent);
  pointer-events:none;
}
/* SVG icon wrapper — circular glow bg */
.hx-empty-icon {
  width:64px; height:64px; border-radius:50%;
  background:oklch(0.78 0.16 80 / 0.08);
  border:1px solid oklch(0.78 0.16 80 / 0.18);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  color:var(--gold-300);
  box-shadow:0 0 24px oklch(0.78 0.16 80 / 0.12);
}
.hx-empty-icon svg { width:26px; height:26px; stroke-width:1.5; }
.hx-empty h3 {
  margin:0 0 10px; font-size:1.1rem; font-weight:700;
  font-family:'Bricolage Grotesque', 'Manrope', sans-serif;
  color:var(--text);
}
.hx-empty p {
  color:var(--text-muted); margin:0 0 20px;
  font-size:.92rem; line-height:1.6;
  max-width:44ch; margin-left:auto; margin-right:auto;
}

/* === Site list === */
.hx-site-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.hx-site-list a {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:var(--grad-card); background-color:rgba(26,21,14,.6);
  border-radius:12px; border:1px solid var(--border-soft);
  transition:all .2s;
}
.hx-site-list a:hover {
  border-color:var(--accent); transform:translateX(4px);
  text-decoration:none;
  box-shadow:var(--shadow-glow);
}
.hx-site-list strong { color:var(--text); }

/* === Conversation thread === */
.hx-thread {
  background:var(--grad-card); background-color:rgba(13,10,5,.7);
  border-radius:14px; padding:18px; max-height:60vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--border-soft);
}
.hx-thread::-webkit-scrollbar { width:6px; }
.hx-thread::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.hx-msg { padding:11px 15px; border-radius:12px; max-width:78%; }
.hx-msg-meta {
  font-size:.70rem; color:var(--text-muted);
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.hx-msg-body { white-space:pre-wrap; word-wrap:break-word; line-height:1.5; }
.hx-msg-visitor {
  background:var(--grad-gold); color:#1a0f00;
  align-self:flex-end; border-bottom-right-radius:4px;
  box-shadow:0 4px 12px rgba(251,191,36,.25);
}
.hx-msg-visitor .hx-msg-meta { color:rgba(26,15,0,.65); }
.hx-msg-ai, .hx-msg-human {
  background:rgba(34,27,18,.7); border:1px solid var(--border-soft);
  align-self:flex-start; border-bottom-left-radius:4px;
}

/* === Pricing card in dashboard === */
.hx-plan-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); margin:14px 0; }
.hx-plan-card {
  background:var(--grad-card); background-color:rgba(26,21,14,.6);
  padding:22px; border-radius:14px;
  border:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .25s, border-color .25s;
}
.hx-plan-card:hover { transform:translateY(-3px); border-color:var(--border); }
.hx-plan-card.active {
  border-color:var(--accent);
  box-shadow:var(--shadow-glow);
  background-color:rgba(34,27,18,.7);
}
.hx-plan-card h3 { margin:0; }
.hx-plan-price {
  font-family:'Manrope'; font-size:1.6rem; font-weight:800;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.03em;
}
.hx-plan-price small { font-size:.78rem; font-weight:500; color:var(--text-muted); -webkit-text-fill-color:var(--text-muted); }
.hx-plan-card ul { list-style:none; padding:0; flex:1; font-size:.88rem; line-height:1.8; color:var(--text-muted); }

/* === Quota bar — chunkier biar visible saat fill <5% === */
.hx-quota-bar {
  width:100%; height:14px;
  background:rgba(13,10,5,.6);
  border:1px solid var(--border-soft);
  border-radius:50px; overflow:hidden;
  position:relative;
}
.hx-quota-fill {
  height:100%; min-width:14px;
  transition:width .6s cubic-bezier(.25,1.4,.4,1);
  background:var(--grad-gold);
  border-radius:50px;
  box-shadow:0 0 12px rgba(251,191,36,.5),
             inset 0 1px 0 rgba(255,255,255,.2);
}

/* === Knowledge Base === */
.hx-kb-grid {
  list-style:none; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); margin-top:24px;
}
.hx-kb-card {
  background:var(--grad-card); background-color:rgba(26,21,14,.6);
  padding:18px 20px; border-radius:12px;
  border:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .25s, border-color .25s;
}
.hx-kb-card:hover { transform:translateY(-2px); border-color:var(--border); }
.hx-kb-disabled { opacity:.55; }
.hx-kb-head { display:flex; justify-content:space-between; align-items:center; }
.hx-kb-snippet { color:var(--text-muted); margin:0; line-height:1.55; font-size:.9rem;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.hx-kb-actions { display:flex; gap:8px; margin-top:auto; }
.hx-tag-disabled { background:rgba(132,147,163,.18); color:var(--text-muted);
  padding:3px 10px; border-radius:6px; font-size:.7rem; }

/* === Conversation status badge === */
.hx-conv-status {
  display:inline-block; padding:3px 10px; border-radius:6px;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.hx-conv-open, .hx-conv-ai_handling { background:rgba(251,191,36,.16); color:var(--accent-hi); }
.hx-conv-pending_human { background:rgba(245,158,11,.22); color:var(--gold-300);
  animation:pulseGold 2s ease-in-out infinite; }
.hx-conv-replied { background:rgba(16,185,129,.16); color:#34d399; }
.hx-conv-closed { background:rgba(132,147,163,.18); color:var(--text-muted); }
@keyframes pulseGold {
  0%, 100% { box-shadow:0 0 0 0 rgba(245,158,11,.3); }
  50% { box-shadow:0 0 0 6px rgba(245,158,11,.0); }
}

.hx-reply-form textarea {
  width:100%; padding:14px 16px; border-radius:12px;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text); font-family:inherit; font-size:.95rem; resize:vertical;
}

/* ============================================================
   ONBOARDING
   ============================================================ */
.hx-onb-wrap { min-height:100vh; max-width:680px; margin:0 auto; padding:30px 24px; position:relative; }
.hx-onb-wrap::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(251,191,36,.10), transparent 60%),
    radial-gradient(600px 400px at 20% 90%, rgba(217,119,6,.06), transparent 60%);
}
.hx-onb-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; }
.hx-onb-progress { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:42px; }
.hx-onb-step {
  width:42px; height:42px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--text-muted); font-size:.95rem;
  transition:all .3s;
}
.hx-onb-step.done {
  background:var(--grad-gold); color:#1a0f00; border-color:var(--accent);
  box-shadow:0 0 16px rgba(251,191,36,.45);
}
.hx-onb-step.active {
  box-shadow:0 0 0 5px var(--accent-glow), 0 0 20px rgba(251,191,36,.5);
  transform:scale(1.08);
}
.hx-onb-line { flex:1; height:2px; background:var(--border-soft); max-width:100px; transition:background .4s; }
.hx-onb-line.done { background:var(--accent); }
.hx-onb-main {
  background:linear-gradient(160deg, rgba(34,27,18,.95), rgba(13,10,5,.92));
  backdrop-filter:blur(14px);
  padding:40px; border-radius:20px;
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-deep), var(--shadow-glow);
}
.hx-onb-main h1 { margin:0 0 10px; font-size:1.8rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Sidebar rules (position:static + flex-direction:row legacy) DI-HAPUS
     karena konflik bikin sidebar nempel di flow + horizontal row di tablet.
     Sidebar mobile/tablet di-handle media query @ 768px (drawer pattern). */
  .hx-main { padding:24px 18px; }
  .hx-nav { padding:18px 22px; }
  .hx-nav nav { gap:14px; }
  .hx-stat-row { gap:30px; }
}
@media (max-width: 560px) {
  .hx-hero { margin:20px auto 50px; }
  .hx-cta { flex-direction:column; }
  .hx-cta .hx-btn { width:100%; }
  .hx-onb-main { padding:24px; }
  .hx-onb-step { width:36px; height:36px; }
}

/* --= Section: Phase 1-4 Foundation =-- */
.hx-btn-danger {
  background:linear-gradient(135deg, rgba(239,68,68,.95), rgba(185,28,28,.95));
  color:#fff;
  border-color:rgba(239,68,68,.55);
  box-shadow:0 8px 24px rgba(239,68,68,.22);
}
.hx-btn-danger:hover {
  transform:translateY(-1px);
  color:#fff;
  box-shadow:0 12px 32px rgba(239,68,68,.32);
  text-decoration:none;
}
.hx-card-glass {
  background:rgba(26,21,14,.55);
  backdrop-filter:blur(8px);
  border-color:var(--border-soft);
}
.hx-card-gradient {
  background:var(--grad-card);
  background-color:rgba(26,21,14,.62);
}
.hx-card-tight { padding:16px 18px; }
.hx-card-table { padding:0; overflow:hidden; }
.hx-label {
  display:block;
  font-size:.78rem;
  color:var(--text-muted);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hx-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(251,191,36,.10);
  border:1px solid rgba(251,191,36,.28);
  color:var(--gold-200);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hx-kicker::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold-400);
  box-shadow:0 0 12px rgba(251,191,36,.72);
}
.hx-feature-icon {
  width:46px;
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1a0f00;
  background:var(--grad-gold);
  box-shadow:0 8px 22px rgba(251,191,36,.24);
}
.hx-page-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.hx-page-head h1 { margin:0 0 6px; }
.hx-page-head p { margin:0; color:var(--text-muted); max-width:760px; }
.hx-form-layout {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:22px;
  align-items:start;
  max-width:1080px;
}
.hx-form-main { min-width:0; }
.hx-tip-card {
  position:sticky;
  top:24px;
  background:linear-gradient(160deg, rgba(34,27,18,.72), rgba(13,10,5,.58));
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:18px;
}
.hx-tip-card h3 { margin:0 0 8px; font-size:.95rem; }
.hx-tip-card p,
.hx-tip-card li { color:var(--text-muted); font-size:.86rem; line-height:1.55; }
.hx-tip-card ul { margin:12px 0 0; padding-left:18px; }
.hx-submit-row {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.hx-actions-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hx-grid-2col {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
.hx-grid-3col {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.hx-kv-list {
  display:grid;
  gap:10px;
}
.hx-kv {
  display:grid;
  gap:3px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-soft);
}
.hx-kv:last-child { border-bottom:0; padding-bottom:0; }
.hx-kv .k {
  color:var(--text-dim);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hx-kv .v { color:var(--text); word-break:break-word; }

/* --= Section: Status Chips =-- */
.hx-status-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:6px;
  font-size:.7rem;
  font-weight:800;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
}
.hx-status-chip.open,
.hx-status-chip.ai_handling {
  background:rgba(251,191,36,.14);
  color:var(--gold-300);
  border-color:rgba(251,191,36,.18);
}
.hx-status-chip.pending_admin,
.hx-status-chip.pending_human {
  background:rgba(239,68,68,.16);
  color:#fca5a5;
  border-color:rgba(239,68,68,.25);
}
.hx-status-chip.admin_handling,
.hx-status-chip.replied {
  background:rgba(16,185,129,.15);
  color:#34d399;
  border-color:rgba(16,185,129,.25);
}
.hx-status-chip.missed,
.hx-status-chip.closed {
  background:rgba(132,147,163,.16);
  color:#94a3b8;
  border-color:rgba(132,147,163,.20);
}
.hx-status-chip.online {
  background:rgba(16,185,129,.14);
  color:#34d399;
  border-color:rgba(16,185,129,.28);
}
.hx-status-chip.away {
  background:rgba(251,191,36,.14);
  color:var(--gold-300);
  border-color:rgba(251,191,36,.22);
}
.hx-status-chip.offline {
  background:rgba(132,147,163,.14);
  color:#94a3b8;
  border-color:rgba(132,147,163,.20);
}

/* --= Section: Avatar =-- */
.hx-avatar {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  /* overflow:visible biar ::after dot status ga ke-clip di edge avatar */
  overflow:visible;
  flex-shrink:0;
  background:var(--grad-gold);
  color:#1a0f00;
  font-weight:900;
  text-transform:uppercase;
  border:1px solid rgba(251,191,36,.28);
}
.hx-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.hx-avatar-sm { width:28px; height:28px; font-size:.72rem; }
.hx-avatar-md { width:40px; height:40px; font-size:.9rem; }
.hx-avatar-lg { width:64px; height:64px; font-size:1.3rem; }
.hx-avatar-xl { width:90px; height:90px; font-size:2rem; }
.hx-avatar.is-online::after,
.hx-avatar.is-away::after,
.hx-avatar.is-offline::after {
  content:'';
  position:absolute;
  /* Posisi nempel di sudut bawah-kanan circle (sin/cos 45°) — sedikit keluar
     edge biar ada visual breathing room, ga ke-clip border avatar. */
  right:0;
  bottom:0;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid var(--bg-card);
  box-sizing:border-box;
}
.hx-avatar.is-online::after { background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.8); }
.hx-avatar.is-away::after { background:var(--gold-400); }
.hx-avatar.is-offline::after { background:#64748b; }

/* --= Section: Tabs =-- */
.hx-tabs {
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--border-soft);
  margin:14px 0 18px;
  overflow-x:auto;
}
.hx-tabs a,
.hx-tabs button {
  appearance:none;
  background:transparent;
  border:0;
  color:var(--text-muted);
  padding:10px 12px;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.hx-tabs a:hover,
.hx-tabs button:hover { color:var(--text); text-decoration:none; }
.hx-tabs .active,
.hx-tabs a.active,
.hx-tabs button.active {
  color:var(--gold-200);
  border-bottom-color:var(--gold-400);
}

/* --= Section: Modal =-- */
.hx-modal-overlay {
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}
.hx-modal-overlay.open { display:flex; }
.hx-modal,
.hx-modal-card {
  width:min(500px, 100%);
  max-height:min(760px, 90vh);
  overflow:auto;
  background:linear-gradient(160deg, rgba(34,27,18,.98), rgba(13,10,5,.96));
  border:1px solid var(--border-strong);
  border-radius:18px;
  box-shadow:var(--shadow-deep), var(--shadow-glow);
  padding:24px;
  position:relative;
  animation:hxModalIn .18s ease-out;
}
.hx-modal-close {
  position:absolute;
  right:12px;
  top:12px;
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.03);
  color:var(--text-muted);
  cursor:pointer;
}
.hx-modal-close:hover { border-color:var(--border); color:var(--text); }
@keyframes hxModalIn {
  from { opacity:0; transform:translateY(10px) scale(.98); }
  to { opacity:1; transform:none; }
}

/* --= Section: Toast — ECLIPSE glassmorphic (2026-05-14 redesign) =-- */
.hx-toast-container {
  position:fixed;
  right:20px;
  top:20px;
  z-index:2100;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:min(380px, calc(100vw - 40px));
  pointer-events:none;
}
.hx-toast {
  padding:13px 16px;
  border-radius:14px;
  background:rgba(20,16,9,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(251,191,36,.18);
  color:var(--text);
  box-shadow:0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  animation:hxToastIn .25s cubic-bezier(0.25,1.4,0.4,1);
  font-size:.9rem;
  display:flex; align-items:flex-start; gap:10px;
  pointer-events:auto;
  position:relative; overflow:hidden;
}
/* Top shimmer accent line */
.hx-toast::after {
  content:'';
  position:absolute; top:0; left:10%; width:80%; height:1px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:.15;
  pointer-events:none;
}
.hx-toast.success {
  border-color:rgba(16,185,129,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(16,185,129,.12), 0 4px 20px rgba(16,185,129,.12);
}
.hx-toast.warn {
  border-color:rgba(251,191,36,.38);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(251,191,36,.10), 0 4px 20px rgba(251,191,36,.10);
}
.hx-toast.error {
  border-color:rgba(239,68,68,.38);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(239,68,68,.10), 0 4px 20px rgba(239,68,68,.10);
}
@keyframes hxToastIn {
  from { opacity:0; transform:translateX(28px) scale(.96); }
  to { opacity:1; transform:none; }
}

/* --= Section: Skeleton =-- */
.hx-skel-line,
.hx-skel-card,
.hx-skel-avatar {
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(251,191,36,.09), rgba(255,255,255,.04));
  background-size:220% 100%;
  animation:hxSkeleton 1.35s ease-in-out infinite;
}
.hx-skel-line { height:10px; border-radius:6px; }
.hx-skel-card { min-height:96px; border-radius:12px; border:1px solid var(--border-soft); }
.hx-skel-avatar { width:40px; height:40px; border-radius:50%; }
@keyframes hxSkeleton {
  0% { background-position:0% 0; }
  100% { background-position:-220% 0; }
}

/* --= Section: Switches and Pickers =-- */
.hx-toggle {
  width:42px;
  height:24px;
  border-radius:50px;
  border:1px solid var(--border);
  background:var(--bg-elev);
  position:relative;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.hx-toggle::after {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--text-muted);
  transition:left .2s, background .2s;
}
.hx-toggle.on { background:rgba(16,185,129,.20); border-color:#10b981; }
.hx-toggle.on::after { left:20px; background:#10b981; }
.hx-toggle input { display:none; }
.hx-pick-card,
.hx-radio-card {
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:rgba(26,21,14,.48);
  transition:border-color .18s, background .18s, transform .18s;
  cursor:pointer;
}
.hx-pick-card:hover,
.hx-radio-card:hover { border-color:var(--border); transform:translateY(-1px); }
.hx-pick-card.active,
.hx-radio-card.active {
  border-color:var(--gold-400);
  background:rgba(251,191,36,.07);
  box-shadow:0 0 0 1px rgba(251,191,36,.12);
}
.hx-color-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.hx-swatch {
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.hx-swatch:hover { transform:scale(1.08); }
.hx-swatch.active { box-shadow:0 0 0 2px #fff, 0 0 0 5px rgba(251,191,36,.35); }

/* --= Section: Accordion =-- */
.hx-accordion { display:flex; flex-direction:column; gap:12px; }
.hx-accordion details {
  background:rgba(26,21,14,.55);
  border:1px solid var(--border-soft);
  border-radius:12px;
  overflow:hidden;
}
.hx-accordion summary {
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-weight:800;
}
.hx-accordion summary::-webkit-details-marker { display:none; }
.hx-accordion summary::after {
  content:'';
  width:8px;
  height:8px;
  border-right:2px solid var(--gold-300);
  border-bottom:2px solid var(--gold-300);
  transform:rotate(45deg);
  transition:transform .18s;
}
.hx-accordion details[open] summary::after { transform:rotate(225deg); }
.hx-accordion-body { padding:0 18px 18px; }

/* --= Section: Snippet =-- */
.hx-snippet {
  padding:14px 16px;
  border-radius:8px;
  font-size:.84rem;
  color:var(--gold-100);
}
.hx-snippet-wrap { position:relative; }
.hx-snippet-copy {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1;
}

/* --= Section: Light Theme — Binance-Inspired Clean Fintech (2026-05-14 revamp) =-- */
/* Strategy: pure white base + Binance neutral grey scale + ECLIPSE gold accent.
   Ref: binance.com light — #fafafa bg, #1e2329 text, #eaecef borders, #f0b90b accent.
   ECLIPSE signature: gold #fbbf24 on white = crisp 8:1 contrast ratio. Sharp hierarchy.
   Feel: Professional fintech platform — Binance/Stripe clean dengan karakter gold Hellox. */
/* === Light mode: scrollbar — Binance neutral grey === */
/* === Light mode: form inputs — white bg + crisp grey border + gold focus === */
/* === Light mode: sidebar — pure white, crisp border === */
/* === Light mode: main content area — fafafa page bg === */
/* === Light mode: cards — white + crisp border + Binance shadow === */
/* === Light mode: buttons — Binance yellow primary, grey secondary === */
/* === Light mode: table — Binance zebra strip + crisp header === */
/* === Light mode: dx-* components — Binance clean === */
/* === Light mode: toast — white card + crisp shadow === */
/* === Light mode: modal — white elevated card === */
/* === Light mode: auth card — white clean + gold glow ring === */
/* === Light mode: code + pre blocks — light grey bg === */
/* Mobile hamburger */
/* Workspace switcher */
/* Flash / alert */
/* Tab nav — Binance style: charcoal text, gold underline active */
/* Eyebrow pill — gold tint on white */
/* Landing nav — frosted white */
/* Snippet block — very light bg */
/* Inbox conv card — white list item, gold active */
/* Inbox thread area */
/* Inbox reply bar */
/* Info sidebar panels */
/* Knowledge base accordion */
/* Billing pricing cards */
/* Features grid */
/* Theme toggle button */
.hx-theme-toggle {
  border:1px solid var(--border-soft);
  background:rgba(251,191,36,.05);
  color:var(--text-muted);
  width:30px;
  height:30px;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hx-theme-toggle:hover { color:var(--gold-200); border-color:var(--border); }

/* --= Section: Mobile Sidebar =-- */
.hx-mobile-nav-toggle {
  display:none;
  position:fixed;
  left:14px;
  top:14px;
  z-index:1600;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(20,16,9,.92);
  color:var(--gold-200);
  box-shadow:var(--shadow-card);
  cursor:pointer;
}
.hx-mobile-side-overlay {
  position:fixed;
  inset:0;
  z-index:1400;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
body.hx-side-open .hx-mobile-side-overlay {
  opacity:1;
  pointer-events:auto;
}
@media (max-width: 768px) {
  /* Sidebar rules (transform:translateX legacy + body.hx-side-open class)
     DI-HAPUS — class convention konflik dengan JS toggleMobileSidebar()
     yg pakai .open-mobile di sidebar element. Sidebar narrow viewport
     handle di @media (max-width:1024px) line 720 (drawer pattern). */
  /* Padding-left 64px = 40 hamburger + 12 offset + 12 gap, biar header
     content (eyebrow + h1) ga ke-cover hamburger fixed top-left */
  .hx-main { padding:72px 14px 36px 64px; max-width:none; }
  /* Multi-col grids → single col stack (form, content) */
  .hx-form-layout,
  .hx-grid-2col,
  .hx-grid-3col { grid-template-columns:1fr; }
  .hx-tip-card { position:static; }
  /* Submit/action button rows → full-width buttons */
  .hx-submit-row { justify-content:stretch; flex-wrap:wrap; gap:8px; }
  .hx-submit-row .hx-btn { flex:1; min-width:140px; }

  /* === Global mobile sweep — auto-rapih untuk semua page === */

  /* H1 page header — kasih ruang turun + scale text */
  .hx-page-header {
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }
  .hx-page-header h1 { font-size:1.5rem !important; line-height:1.2 !important; }
  .hx-page-header .actions,
  .hx-page-header .hx-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .hx-page-header .actions .hx-btn,
  .hx-page-header .hx-actions .hx-btn { flex:1; min-width:120px; justify-content:center; }

  /* Card padding lebih kecil di mobile (sebelumnya 22px 24px terlalu lega) */
  .hx-card { padding:16px 14px !important; }

  /* Table horizontal scroll wrapper — tabel lebar overflow biar ga break layout */
  .hx-table-wrap,
  .hx-table {
    overflow-x:auto;
    display:block;
    max-width:100%;
  }
  .hx-table thead, .hx-table tbody, .hx-table tr {
    display:table;
    width:100%;
    table-layout:fixed;
    min-width:520px;  /* paksa horizontal scroll kalau viewport sempit */
  }

  /* Stat grid (TOTAL CHAT, ACTIVE, dll) — 2-col instead of 4-6 */
  .hx-ov-grid.cols-3,
  .hx-ov-grid.cols-4,
  .hx-ov-grid.cols-5,
  .hx-ov-grid.cols-6 { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .hx-ov-grid.cols-2 { grid-template-columns:1fr !important; }
  .hx-stat-row { gap:10px !important; flex-wrap:wrap; }
  .hx-stat-row > * { flex:1 1 calc(50% - 10px); min-width:140px; }

  /* Form input/textarea/select default full-width */
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=url], input[type=search],
  textarea, select { max-width:100%; box-sizing:border-box; }

  /* Modal — full-width minus margin */
  .hx-modal-card { width:calc(100vw - 24px) !important; max-width:none !important; }

  /* Toast — full-width bottom (avoid overlap hamburger top-left) */
  .hx-toast-container { left:14px !important; right:14px !important; top:auto !important; bottom:14px; }
  .hx-toast { max-width:100% !important; }

  /* Pricing card grid → 1-col */
  .hx-pricing-grid { grid-template-columns:1fr !important; }

  /* Accordion item padding kompak */
  .hx-acc-head { padding:14px 14px !important; font-size:.92rem !important; }
  .hx-acc-body { padding:12px 14px !important; }

  /* Action bar (Pickup Chat / Flag / Tutup) — wrap+full-width handled per-template */

  /* Inbox conv card padding kompak */
  .hx-conv-card { padding:11px 12px !important; }

  /* Eyebrow uppercase smaller */
  .eyebrow { font-size:.7rem !important; letter-spacing:.05em !important; }
}

/* Landscape mobile (orientation landscape, height pendek) — keep full sidebar
   tetap drawer + padding compact */
@media (max-width: 1024px) and (orientation: landscape) {
  .hx-main { padding:60px 18px 30px 64px !important; }
  .hx-page-header h1 { font-size:1.4rem !important; }
}

/* ============================================================
   ECLIPSE GOLD POLISH LAYER (2026-05-12)
   Konsistensi visual semua dashboard pages.
   Additive — extend `.hx-page-header`, `.hx-card`, `.hx-empty`, `.hx-btn` dst.
   ============================================================ */

/* ----- Eyebrow upgrade: pill ber-icon + Bricolage display ----- */
.hx-page-header .eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 11px; border-radius:999px;
  background:oklch(0.78 0.16 80 / 0.10);
  border:1px solid oklch(0.78 0.16 80 / 0.25);
  font:700 .68rem 'Manrope', sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-300, #fcd34d); margin-bottom:10px;
}
.hx-page-header .eyebrow svg{width:11px; height:11px; stroke-width:2.4;}
.hx-page-header h1 {
  font:800 1.65rem/1.15 'Bricolage Grotesque', 'Manrope', sans-serif;
  letter-spacing:-.025em;
  color:var(--text-primary, var(--text));
}
.hx-page-header p { font-size:.92rem; line-height:1.55; max-width:640px; }

/* ----- Card upgrade — header + body separation pattern ----- */
.hx-card-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.08); flex-wrap:wrap;
  margin:-22px -24px 18px; /* span full inside .hx-card padding */
  border-radius:12px 12px 0 0;
}
.hx-card-head .title {
  display:inline-flex; align-items:center; gap:8px;
  font:700 .9rem 'Bricolage Grotesque', 'Manrope', sans-serif;
  color:var(--text-primary, var(--text));
  margin:0;
}
.hx-card-head .title svg{width:15px; height:15px; stroke:var(--gold-400, #fbbf24);}
.hx-card-head .sub{font-size:.78rem; color:var(--text-muted); margin-top:1px;}

/* Variant: card tanpa padding (untuk table/list di dalam) */
.hx-card.tight { padding:0; overflow:hidden; }
.hx-card.tight .hx-card-head { margin:0; border-radius:12px 12px 0 0; }

/* ----- Table polish ----- */
.hx-table { width:100%; border-collapse:collapse; }
.hx-table thead th {
  padding:11px 14px; text-align:left;
  font:600 .68rem var(--sans,"Inter",sans-serif); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hx-table tbody tr {
  transition:background .15s ease;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.hx-table tbody tr:last-child { border-bottom:0; }
.hx-table tbody tr:hover { background:rgba(251,191,36,.035); }
.hx-table td { padding:13px 14px; font-size:.88rem; vertical-align:top; }
.hx-table td.muted { color:var(--text-muted); font-size:.82rem; }

/* ----- Empty state upgrade ----- */
.hx-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:54px 24px; gap:12px;
}
.hx-empty::before {
  content:""; width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(251,191,36,.18) 0%, rgba(251,191,36,0) 70%);
  border:1px solid rgba(251,191,36,.2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
  background-repeat:no-repeat; background-position:center;
  background-size:28px 28px, auto;
  margin-bottom:4px;
}
.hx-empty h3 { font:700 1.05rem 'Bricolage Grotesque','Manrope',sans-serif; color:var(--text-primary, var(--text)); margin:0; }
.hx-empty p { color:var(--text-muted); max-width:380px; font-size:.88rem; line-height:1.55; margin:0; }

/* ----- Button polish ----- */
.hx-btn {
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s ease;
}
.hx-btn svg { width:13px; height:13px; stroke-width:2.4; }
.hx-btn-primary {
  background:linear-gradient(180deg, var(--gold-400, #fbbf24) 0%, var(--gold-500, #f59e0b) 100%);
  color:#0a0a0f; border-color:rgba(251,191,36,.5);
  box-shadow:0 2px 8px rgba(251,191,36,.15);
}
.hx-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(251,191,36,.28); }

/* ============================================================
   `.dx-*` ECLIPSE COMPONENTS (shared across pages)
   ============================================================ */

/* dx-wrap: page content vertical stack */
.dx-wrap { display:flex; flex-direction:column; gap:18px; width:100%; }

/* dx-kpi-grid: KPI row strip dengan top accent bar gold */
.dx-kpi-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
}
.dx-kpi-card {
  position:relative; padding:16px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.008) 100%);
  border:1px solid rgba(255,255,255,.07); border-radius:14px; overflow:hidden;
}
.dx-kpi-card::before {
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--gold-400,#fbbf24) 50%, transparent 100%);
  opacity:.5;
}
.dx-kpi-card .label {
  display:flex; align-items:center; gap:8px;
  font:700 .7rem 'Manrope', sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:10px;
}
.dx-kpi-card .label svg{width:13px; height:13px; stroke:var(--gold-400,#fbbf24); stroke-width:2.2;}
.dx-kpi-card .value {
  font:800 1.75rem/1 'Bricolage Grotesque', 'Manrope', sans-serif;
  color:var(--text-primary, var(--text)); letter-spacing:-.025em;
}
.dx-kpi-card .value .frac { font-size:1.05rem; color:var(--text-muted); font-weight:600; }
.dx-kpi-card .value.warn { color:#fca5a5; }
.dx-kpi-card .value.good { color:#86efac; }
.dx-kpi-card .sub { margin-top:6px; font-size:.74rem; color:var(--text-muted); }

/* dx-toolbar: search + filter pill tab */
.dx-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.dx-search {
  position:relative; flex:0 0 240px;
}
.dx-search svg {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; stroke:var(--text-muted); stroke-width:2.2;
}
.dx-search input {
  width:100%; padding:8px 12px 8px 33px; border-radius:8px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08);
  color:var(--text-primary, var(--text));
  font:500 .82rem var(--sans,"Inter",sans-serif);
}
.dx-search input:focus {
  outline:none; border-color:var(--gold-400,#fbbf24);
  box-shadow:0 0 0 3px rgba(251,191,36,.18);
}
.dx-filter-pills {
  display:inline-flex; gap:3px; padding:3px; border-radius:9px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06);
}
.dx-filter-pills button, .dx-filter-pills a {
  padding:6px 11px; border:0; border-radius:6px; background:transparent;
  font:600 .72rem var(--sans,"Inter",sans-serif); letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-muted); cursor:pointer;
  transition:all .15s; text-decoration:none;
}
.dx-filter-pills button:hover, .dx-filter-pills a:hover {
  color:var(--text-primary, var(--text)); background:rgba(255,255,255,.04);
}
.dx-filter-pills button.active, .dx-filter-pills a.active {
  background:linear-gradient(180deg, var(--gold-400,#fbbf24), var(--gold-500,#f59e0b));
  color:#0a0a0f;
}

/* dx-icon-btn: square icon-only button */
.dx-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:var(--text-muted); cursor:pointer; transition:all .15s;
}
.dx-icon-btn svg{width:14px; height:14px; stroke-width:2.2;}
.dx-icon-btn:hover { background:rgba(255,255,255,.08); color:var(--text-primary, var(--text)); }
.dx-icon-btn.danger:hover { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.4); color:#fca5a5; }

/* dx-pill: status tag generic */
.dx-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:999px;
  font:700 .7rem var(--sans,"Inter",sans-serif); letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:var(--text-muted);
}
.dx-pill.gold { background:rgba(251,191,36,.16); color:var(--gold-300,#fcd34d); border-color:rgba(251,191,36,.28); }
.dx-pill.green { background:rgba(16,185,129,.16); color:#34d399; border-color:rgba(16,185,129,.28); }
.dx-pill.purple { background:rgba(167,139,250,.16); color:#c4b5fd; border-color:rgba(167,139,250,.28); }
.dx-pill.red { background:rgba(239,68,68,.16); color:#fca5a5; border-color:rgba(239,68,68,.28); }

/* dx-info-banner: tone banner pattern (info, success, warn) */
.dx-banner {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:10px;
  background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.07);
  font-size:.86rem; color:var(--text-primary, var(--text));
}
.dx-banner.success { background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02)); border-color:rgba(16,185,129,.25); color:#86efac; }
.dx-banner.gold    { background:linear-gradient(135deg, rgba(251,191,36,.08), rgba(251,191,36,.02)); border-color:rgba(251,191,36,.25); color:var(--gold-300,#fcd34d); }
.dx-banner.warn    { background:linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.02)); border-color:rgba(239,68,68,.25); color:#fca5a5; }
.dx-banner svg { flex-shrink:0; width:18px; height:18px; stroke-width:2.2; }
.dx-banner strong { color:inherit; font-weight:700; }


/* ============================================================
   ECLIPSE GOLD REDESIGN LAYER (2026-05-14)
   Motion library + scroll-reveal + ambient mesh + UI polish
   ============================================================ */

/* --- Scroll-reveal fade-up (progressive enhancement only) --- */
@media (prefers-reduced-motion: no-preference) {
  .hx-reveal {
    opacity:0;
    transform:translateY(18px);
    transition:opacity 400ms cubic-bezier(0.4,0,0.2,1),
               transform 400ms cubic-bezier(0.4,0,0.2,1);
  }
  .hx-reveal.visible {
    opacity:1;
    transform:translateY(0);
  }
  .hx-reveal-delay-1 { transition-delay:80ms; }
  .hx-reveal-delay-2 { transition-delay:160ms; }
  .hx-reveal-delay-3 { transition-delay:240ms; }
}

/* --- Pulse glow (badge / CTA emphasis) --- */
@keyframes hxPulseGlow {
  0%,100% { box-shadow:0 0 0 0 oklch(0.78 0.16 80 / 0.4); }
  50%      { box-shadow:0 0 0 8px oklch(0.78 0.16 80 / 0); }
}
.hx-pulse-glow { animation:hxPulseGlow 2.2s ease-in-out infinite; }

/* --- Shimmer skeleton refinement (ECLIPSE gold tinted) --- */
@keyframes hxShimmer {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}
.hx-shimmer {
  background:linear-gradient(90deg,
    oklch(0.78 0.16 80 / 0.04) 0%,
    oklch(0.78 0.16 80 / 0.10) 50%,
    oklch(0.78 0.16 80 / 0.04) 100%);
  background-size:200% 100%;
  animation:hxShimmer 1.4s linear infinite;
}

/* --- Focus ring global upgrade (WCAG 2.4.13) --- */
:focus-visible {
  outline:var(--hx-focus, 2px solid oklch(0.86 0.18 76));
  outline-offset:var(--hx-focus-offset, 2px);
}

/* --- Elevated page header (Bricolage display + gradient text option) --- */
.hx-page-header h1.hx-grad-text {
  background:linear-gradient(135deg,
    var(--text) 0%,
    oklch(0.78 0.16 80) 130%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* --- Sidebar light mode: cool white ambient --- */
/* --- Card shimmer top line on hover (ECLIPSE depth signature) --- */
.hx-card:hover::before {
  background:linear-gradient(90deg,
    transparent 0%,
    oklch(0.78 0.16 80 / 0.15) 30%,
    oklch(0.78 0.16 80 / 0.15) 70%,
    transparent 100%);
}

/* --- Auth card ambient glow background --- MOVED to auth.css v2.0 ---
.hx-auth-card::after {
  content:'';
  position:absolute; bottom:-40%; right:-30%;
  width:250px; height:250px; pointer-events:none;
  background:radial-gradient(circle, oklch(0.78 0.16 80 / 0.06) 0%, transparent 65%);
  border-radius:50%;
} */

/* --- Page footer (auth brand foot) cleaner style --- */
.hx-auth-brand-foot {
  letter-spacing:.05em;
}

/* --- Input enhanced: subtle left glow on focus --- */
input:focus, textarea:focus, select:focus {
  box-shadow:0 0 0 3px oklch(0.78 0.16 80 / 0.18), 0 0 0 1px oklch(0.78 0.16 80 / 0.5) !important;
}

/* --- Dx-filter-pills + dx-search: Bricolage font --- */
.dx-filter-pills button, .dx-filter-pills a,
.dx-search input, .dx-pill,
.dx-kpi-card .label {
  font-family:'Manrope', sans-serif;
}

/* --- Table thead: Bricolage for header text --- */
.hx-table thead th {
  font-family:'Manrope', sans-serif;
}

/* --- dx-kpi-card: hover lift + glow (match .hx-stat) --- */
.dx-kpi-card {
  transition:transform 200ms cubic-bezier(0.4,0,0.2,1),
             border-color 200ms, box-shadow 200ms;
}
.dx-kpi-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.3), 0 0 0 1px oklch(0.78 0.16 80 / 0.1);
  border-color:oklch(0.78 0.16 80 / 0.18) !important;
}

/* --- Smooth page transitions (body fade-in on load) --- */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation:hxPageLoad 200ms ease-out;
  }
  @keyframes hxPageLoad {
    from { opacity:0; }
    to   { opacity:1; }
  }
}

/* --- Reduced motion override: disable all animations --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* 5-LAYER GATE self-lint
 * L1 FOUNDATION
 *   OK Hick: sidebar nav items ≤14 grouped by 5 sections
 *   OK Fitts: .hx-btn min-height 36px (primary 44px .hx-btn-lg), CTA prominent
 *   OK Gestalt: proximity grouping dalam sidebar sections + card boundaries
 *   OK Grid: 8pt spacing system (4/8/12/16/24/32/48/64px)
 *   OK Typography: Bricolage Grotesque display 800, Manrope body 400-600
 *   OK States: 6-state defined (default/hover/focus/active/disabled/loading skeleton)
 *   OK Motion: 200-400ms cubic-bezier(0.4,0,0.2,1), 1 high-impact shimmer sweep
 *   OK Nielsen: gold CTA visible, focus ring WCAG 2.4.13, toast dismiss control
 * L2 CORRECTNESS
 *   OK DTCG: --hx-brand oklch() token 3-tier via --hx-surface-0..3 + --hx-brand*
 *   OK WCAG 2.2: min-height 36px+ btn, focus 2px solid oklch(0.86..76)
 *   OK APCA: warm text #fbf7ee on dark #0a0805 = Lc≥85 (body pass)
 *   OK ARIA: brand SVG icons + aria-label on interactive controls
 *   OK CWV: no blocking font (display:swap), CSS-only animations, no layout shift
 * L3 DISTINCTIVE
 *   OK Font: Bricolage Grotesque display + Manrope body — bukan Inter/Roboto
 *   OK Color: dominant warm-dark + gold accent — bukan purple
 *   OK Motion: shimmer button sweep + bubble entrance — 1 high-impact moment
 *   OK Composition: sidebar atmospheric mesh glow + auth cinematic split
 *   OK Detail: grain texture overlay on auth bg + card top-shimmer line
 * L4 SIGNATURE
 *   OK Tone: eclipse-charcoal — warm dark, atmospheric glow, cinematic
 *   OK Differentiator: ambient aurora sidebar + btn shimmer sweep + OKLCH dynamic
 *   OK Brand-lock: ECLIPSE Gold v1.2 (oklch(0.78 0.16 80) = gold #fbbf24)
 * L5 INDUSTRY 2025
 *   OK 60-30-10: 60% warm-dark surface, 30% card/sidebar, 10% gold CTA
 *   OK Token 3-tier: --hx-surface-0..3 (primitive) + --hx-brand (semantic) + .hx-btn (component)
 *   OK OKLCH dynamic: oklch(from var(--hx-brand) calc(l+0.10) c h) pattern in hover states
 */