:root {
      --qwen-primary: #6d28d9;
      --qwen-primary-hover: #5b21b6;
      --qwen-primary-light: #f5f3ff;
      --sidebar-w: 280px;
      --topbar-h: 56px;
    }
    html, body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
      background: #f8f9fa;
      height: 100%;
    }
    code, pre, .font-monospace {
      font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
    }

    /* App layout */
    .app-layout {
      display: flex;
      min-height: 100vh;
    }
    .app-main {
      flex: 1;
      min-width: 0;
      overflow-x: hidden;
    }

    /* Sidebar */
    .sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      min-width: 0;
      background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
      color: #cbd5e1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: transform .25s ease;
      position: sticky;
      top: 0;
      align-self: flex-start;
      max-height: 100vh;
      overflow-x: hidden;
    }
    .sidebar-brand {
      padding: 1.25rem 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      gap: .75rem;
    }
    .sidebar-brand-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, #6d28d9, #4f46e5);
      display: flex; align-items: center; justify-content: center;
      color: white;
      box-shadow: 0 8px 16px -6px rgba(109,40,217,.4);
      flex-shrink: 0;
    }
    .sidebar-brand-name { font-size: 1rem; font-weight: 700; color: white; }
    .sidebar-brand-sub { font-size: .75rem; color: #94a3b8; }
    .sidebar .nav-link {
      display: flex; align-items: center; gap: .6rem;
      padding: .55rem .85rem; border-radius: .5rem;
      color: #cbd5e1; font-weight: 500; font-size: .85rem;
      margin-bottom: 2px;
      overflow: hidden;
    }
    .sidebar .nav-link span {
      min-width: 0;
      flex: 1 1 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar > .nav {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      flex-wrap: nowrap !important;
    }
    .sidebar .nav-link:hover { background: rgba(255,255,255,0.05); color: white; }
    .sidebar .nav-link.active {
      background: linear-gradient(90deg, #6d28d9, #7c3aed);
      color: white;
      box-shadow: 0 8px 16px -6px rgba(109,40,217,.4);
    }
    .sidebar .nav-link i { font-size: 1.1rem; }
    .sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255,255,255,0.08); }

    /* Main layout - mobile only */
    @media (max-width: 767.98px) {
      .app-layout { display: block; }
    }
    .sidebar-backdrop {
      position: fixed; inset: 0;
      background: rgba(15,23,42,.5);
      backdrop-filter: blur(3px);
      z-index: 1040;
    }

    /* Topbar mobile */
    .topbar {
      height: var(--topbar-h);
      background: white;
      border-bottom: 1px solid #e5e7eb;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 1rem;
      position: sticky; top: 0; z-index: 50;
    }
    @media (min-width: 768px) { .topbar { display: none; } }

    /* Bottom nav (mobile) */
    .bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 64px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid #e5e7eb;
      align-items: center;
      justify-content: space-around;
      z-index: 1030;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-shadow: 0 -2px 20px rgba(15,23,42,.06);
    }
    @media (min-width: 768px) { .bottom-nav { display: none; } }
    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 6px 10px;
      color: #94a3b8;
      text-decoration: none;
      font-size: .65rem;
      font-weight: 500;
      border-radius: .5rem;
      border: none;
      background: none;
      cursor: pointer;
      transition: all .2s;
      min-width: 56px;
      position: relative;
      -webkit-tap-highlight-color: transparent;
    }
    .bottom-nav-item i { font-size: 1.3rem; transition: color .2s; }
    .bottom-nav-item.active { color: #6d28d9; }
    .bottom-nav-item.active i { color: #6d28d9; }
    .bottom-nav-item.active::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 3px;
      border-radius: 0 0 3px 3px;
      background: #6d28d9;
    }
    .bottom-nav-item:active { transform: scale(.92); }
    .bottom-nav-more-menu {
      position: fixed;
      bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      left: 0; right: 0;
      background: white;
      border-radius: 1rem 1rem 0 0;
      box-shadow: 0 -4px 30px rgba(15,23,42,.15);
      padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
      z-index: 1029;
      animation: slide-up .25s cubic-bezier(.4,0,.2,1);
    }
    .bottom-nav-more-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.4);
      z-index: 1028;
      animation: fade-in .2s ease;
    }
    @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .spin { animation: spin 1s linear infinite; }
    .bottom-nav-more-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .75rem 1rem;
      color: #334155;
      text-decoration: none;
      font-weight: 500;
      font-size: .9rem;
      border-radius: .5rem;
      border: none;
      background: none;
      cursor: pointer;
      width: 100%;
      text-align: left;
    }
    .bottom-nav-more-item:hover, .bottom-nav-more-item:active { background: #f8fafc; color: #6d28d9; }
    .bottom-nav-more-item i { font-size: 1.15rem; width: 24px; text-align: center; color: #94a3b8; }
    .bottom-nav-more-divider {
      height: 1px;
      background: #e5e7eb;
      margin: .5rem 0;
    }

    /* Content */
    .content-wrap { padding: 1.5rem 1rem; padding-bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0px)); }
    @media (min-width: 768px) { .content-wrap { padding: 2rem; padding-bottom: 2rem; } }

    /* Premium cards */
    .card { border: 1px solid #e5e7eb; border-radius: .75rem; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
    .card-header { background: white; border-bottom: 1px solid #f1f5f9; padding: 1rem 1.25rem; }

    /* Chips / Badges */
    .chip {
      display: inline-flex; align-items: center; gap: .35rem;
      padding: .25rem .65rem;
      border-radius: 999px;
      font-size: .75rem; font-weight: 600;
    }
    .chip-success { background: #ecfdf5; color: #065f46; }
    .chip-danger { background: #fef2f2; color: #991b1b; }
    .chip-warning { background: #fffbeb; color: #92400e; }
    .chip-info { background: #ecfeff; color: #155e75; }
    .chip-purple { background: #f5f3ff; color: #6b21a8; }
    .chip-secondary { background: #f1f5f9; color: #334155; }
    .chip-dot {
      display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
      background: currentColor;
    }

    /* Provider grid */
    .provider-grid-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
    .provider-grid-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
    .provider-grid-card .btn-xs {
      padding: .15rem .4rem; font-size: .7rem; line-height: 1;
    }

    /* Toast notification */
    .toast-container {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      max-width: 400px;
    }
    .toast {
      background: white;
      border-radius: .5rem;
      padding: .75rem 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
      display: flex;
      align-items: center;
      gap: .5rem;
      animation: toast-slide-in .3s ease;
      border-left: 4px solid #6d28d9;
    }
    .toast.toast-success { border-left-color: #10b981; }
    .toast.toast-error { border-left-color: #ef4444; }
    .toast.toast-info { border-left-color: #3b82f6; }
    .toast.toast-warning { border-left-color: #f59e0b; }
    .toast i { font-size: 1.25rem; }
    .toast-success i { color: #10b981; }
    .toast-error i { color: #ef4444; }
    .toast-info i { color: #3b82f6; }
    .toast-warning i { color: #f59e0b; }
    .toast-message { flex: 1; font-size: .875rem; color: #1f2937; }
    .toast-close {
      background: none;
      border: none;
      color: #9ca3af;
      cursor: pointer;
      padding: 0;
      font-size: 1.25rem;
      line-height: 1;
    }
    .toast-close:hover { color: #4b5563; }
    @keyframes toast-slide-in {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes toast-slide-out {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }

    /* Login page */
    .login-bg {
      min-height: 100vh;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      position: relative; overflow: hidden;
    }
    .login-bg::before, .login-bg::after {
      content: ''; position: absolute;
      width: 400px; height: 400px; border-radius: 50%;
      filter: blur(80px); opacity: .3;
    }
    .login-bg::before { background: #6d28d9; top: 10%; left: 10%; }
    .login-bg::after { background: #4f46e5; bottom: 10%; right: 10%; }
    .login-card {
      position: relative;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-radius: 1.25rem;
      padding: 2.5rem 2rem;
      width: 100%; max-width: 420px;
      border: 1px solid rgba(255,255,255,.2);
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    }
    .login-card h1 { font-size: 1.75rem; font-weight: 800; }
    .login-bg { min-height:100dvh; align-items:flex-start; padding:3rem 1rem 1.5rem; background:#07130f; }
    .login-bg::before,.login-bg::after { pointer-events:none; }
    .login-bg::before { top:-10%; left:-10%; background:#34d399; }
    .login-bg::after { right:-15%; bottom:-15%; background:#fbbf24; opacity:.12; }
    .login-card { z-index:1; padding:1.5rem 1.15rem; color:#edf5f2; background:rgba(11,28,21,.94); border-color:rgba(167,243,208,.12); border-radius:1rem; box-shadow:0 25px 60px -25px rgba(0,0,0,.8); }
    .login-card h1 { font-size:1.6rem; letter-spacing:-.03em; }
    .login-card .login-subtitle { color:#81938b; }
    .login-card .form-label { color:#b8c7c1; font-size:.82rem; }
    .login-card .form-control { min-height:48px; color:#edf5f2; background:#06100c; border-color:rgba(167,243,208,.14); font-size:1rem; }
    .login-card .form-control::placeholder { color:#52675f; }
    .login-card .form-control:focus { border-color:#6ee7b7; box-shadow:0 0 0 3px rgba(110,231,183,.12); }
    .login-card .btn-login { min-height:48px; color:#062b20; background:#6ee7b7; border-color:#6ee7b7; }
    .login-card .btn-login:hover,.login-card .btn-login:focus { color:#041f18; background:#a7f3d0; border-color:#a7f3d0; }
    .login-lock-label { display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.65rem; color:#6ee7b7; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    .login-card .login-captcha-box { display:flex; justify-content:center; padding:.4rem; background:#06100c; border:1px solid rgba(167,243,208,.14); border-radius:.6rem; cursor:pointer; }
    .login-card .login-captcha-box svg { display:block; max-width:100%; height:auto; }
    @media (min-width:576px) { .login-bg { align-items:center; padding:2rem; } .login-card { padding:2.25rem 2rem; } }

    /* Code blocks */
    .code-block {
      background: #0f172a;
      color: #86efac;
      border-radius: .5rem;
      padding: 1rem 1.1rem;
      font-size: .8rem;
      overflow-x: auto;
      white-space: pre;
      border: 1px solid #1e293b;
    }

    /* Action icons in table */
    .action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      border-radius: .5rem;
      border: 0; background: transparent;
      color: #64748b;
      transition: all .15s;
    }
    .action-btn:hover { background: #f1f5f9; }
    .action-btn.btn-checkkey:hover { background: #ecfdf5; color: #059669; }
    .action-btn.btn-quota:hover { background: #f5f3ff; color: #6d28d9; }
    .action-btn.btn-edit:hover { background: #ecfeff; color: #0891b2; }
    .action-btn.btn-delete:hover { background: #fef2f2; color: #dc2626; }
    .action-btn.btn-pin:hover { background: #fffbeb; color: #d97706; }
    .action-btn.btn-pin.pinned { color: #d97706; }
    .table-api-keys tr.pinned-row { background: #fffbeb; }
    .usage-percent { font-size: .75rem; font-weight: 600; }
    .usage-percent.high { color: #dc2626; }
    .usage-percent.medium { color: #d97706; }
    .usage-percent.low { color: #059669; }
    .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

    /* Table */
    .table-api-keys th { font-weight: 600; font-size: .8rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
    .table-api-keys td { vertical-align: middle; font-size: .88rem; }
    .table-api-keys tr { transition: background .15s; }
    .sortable { cursor: pointer; user-select: none; }
    .sortable:hover { color: #1e293b; }
    .sortable .sort-icon { opacity: .4; font-size: .65rem; margin-left: 2px; }
    .sortable.active .sort-icon { opacity: 1; color: #6d28d9; }

    /* Mobile key card */
    @media (max-width: 767.98px) {
      .key-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: .75rem;
        padding: 1rem;
        margin-bottom: .5rem;
      }
      .key-actions-mobile .action-btn { width: 36px; height: 36px; }
    }

    /* Status select */
    .status-select {
      font-size: .75rem; font-weight: 600;
      padding: .25rem .5rem; border-radius: .4rem;
      border: 0; cursor: pointer;
    }
    .status-select.g-combobox .g-combobox-btn { font-size: .75rem; font-weight: 600; padding: .25rem .5rem; border-radius: .4rem; border: 0; }
    .status-select.g-combobox.status-active .g-combobox-btn,
    .status-active { background: #ecfdf5; color: #065f46; }
    .status-select.g-combobox.status-new .g-combobox-btn,
    .status-new { background: #ecfeff; color: #155e75; }
    .status-select.g-combobox.status-inactive .g-combobox-btn,
    .status-inactive { background: #f1f5f9; color: #475569; }
    .status-select.g-combobox.status-denied .g-combobox-btn,
    .status-denied { background: #fef2f2; color: #991b1b; }
    .status-select.g-combobox.status-sold .g-combobox-btn,
    .status-sold { background: #fffbeb; color: #92400e; }

    /* Floating bulk bar */
    .bulk-bar {
      position: fixed; bottom: 1.5rem;
      left: 50%; transform: translateX(-50%);
      background: #0f172a;
      color: white;
      border-radius: 1rem;
      padding: .75rem 1.25rem;
      box-shadow: 0 20px 40px rgba(0,0,0,.2);
      display: flex; align-items: center; gap: .75rem;
      z-index: 1030;
      max-width: calc(100vw - 2rem);
      overflow-x: auto;
    }
    @media (max-width: 767.98px) {
      .bulk-bar {
        bottom: calc(64px + 1.5rem + env(safe-area-inset-bottom, 0px));
      }
    }
    .bulk-bar .btn { font-size: .8rem; padding: .35rem .75rem; }

    /* Customer Keys — filter row: wraps on mobile (search full-width), single row on desktop */
    .ck-filter-row { flex-wrap: wrap; gap: .4rem; }
    .ck-filter-row .ck-search { flex: 1 1 100%; min-width: 0; }
    .ck-filter-row .ck-sel-key,
    .ck-filter-row .ck-sel-usage { flex: 1 1 calc(50% - .2rem); min-width: 0; }
    .ck-filter-row .ck-quick { flex: 0 0 auto; }
    .ck-filter-row .ck-sel-key select,
    .ck-filter-row .ck-sel-usage select { width: 100%; }
    .ck-filter-row select { padding-left: .5rem; padding-right: 1.5rem; font-size: .76rem; }
    @media (min-width: 768px) {
      .ck-filter-row { flex-wrap: nowrap; gap: .5rem; }
      .ck-filter-row .ck-search { flex: 1 1 auto; }
      .ck-filter-row .ck-sel-key { flex: 0 0 120px; }
      .ck-filter-row .ck-sel-usage { flex: 0 0 150px; }
      .ck-filter-row select { font-size: .82rem; }
    }

    /* Logs — compact filter toolbar (single row) */
    .logs-toolbar { flex-wrap: nowrap; gap: .4rem; }
    .logs-toolbar .logs-search { flex: 1 1 auto; min-width: 140px; }
    .logs-toolbar .g-select { flex: 0 0 auto; }
    .logs-toolbar .g-input { min-width: 0; }
    @media (max-width: 575px) {
      .logs-toolbar .g-select { max-width: 110px; }
    }

    /* Logs — statistik kategori di atas tabel (klik = filter) */
    .logs-stats { row-gap: .35rem; }
    .logs-stat-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .05rem;
      min-width: 86px;
      padding: .35rem .65rem;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      transition: box-shadow .15s, transform .1s, border-color .15s;
      font-family: inherit;
    }
    .logs-stat-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
    .logs-stat-card.active { border-width: 2px; padding: calc(.35rem - 1px) calc(.65rem - 1px); }
    .logs-stat-label {
      font-size: .58rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: #64748b;
      line-height: 1.2;
      white-space: nowrap;
    }
    .logs-stat-count { font-size: 1rem; font-weight: 700; line-height: 1.25; color: #1a1a1a; }
    .logs-stat-green.active { border-color: #15803d; background: #f0fdf4; } .logs-stat-green .logs-stat-count { color: #15803d; }
    .logs-stat-red.active { border-color: #dc2626; background: #fef2f2; } .logs-stat-red .logs-stat-count { color: #dc2626; }
    .logs-stat-orange.active { border-color: #ea580c; background: #fff7ed; } .logs-stat-orange .logs-stat-count { color: #ea580c; }
    .logs-stat-amber.active { border-color: #b45309; background: #fffbeb; } .logs-stat-amber .logs-stat-count { color: #b45309; }
    .logs-stat-yellow.active { border-color: #ca8a04; background: #fefce8; } .logs-stat-yellow .logs-stat-count { color: #ca8a04; }
    .logs-stat-purple.active { border-color: #7c3aed; background: #f5f3ff; } .logs-stat-purple .logs-stat-count { color: #7c3aed; }
    .logs-stat-cyan.active { border-color: #0891b2; background: #ecfeff; } .logs-stat-cyan .logs-stat-count { color: #0e7490; }
    .logs-stat-gray.active { border-color: #64748b; background: #f8fafc; } .logs-stat-gray .logs-stat-count { color: #475569; }
    @media (max-width: 575px) {
      .logs-stat-card { min-width: 70px; padding: .3rem .5rem; }
      .logs-stat-count { font-size: .92rem; }
    }

    /* Empty state */
    .empty-state {
      text-align: center;
      padding: 3rem 1.5rem;
      color: #94a3b8;
    }
    .empty-state i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: .75rem; display: block; }

    /* Focus */
    .form-control:focus, .form-select:focus {
      border-color: #a78bfa;
      box-shadow: 0 0 0 .25rem rgba(139,92,246,.15);
    }
    .btn-primary {
      background: #6d28d9; border-color: #6d28d9;
    }
    .btn-primary:hover { background: #5b21b6; border-color: #5b21b6; }

    /* Customer keys progress bar */
    .quota-bar {
      height: 8px;
      border-radius: 4px;
      background: #e5e7eb;
      overflow: hidden;
      width: 100%;
    }
    .quota-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .3s;
    }
    .quota-bar-ok { background: linear-gradient(90deg, #10b981, #059669); }
    .quota-bar-warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
    .quota-bar-danger { background: linear-gradient(90deg, #ef4444, #dc2626); }
    .reseller-tabs { display:flex; gap:.25rem; padding:.25rem; background:#f1f5f9; border-radius:12px; margin-bottom:1rem; }
    .reseller-tabs button { flex:1; border:0; background:transparent; color:#64748b; border-radius:9px; padding:.55rem .7rem; font-size:.8rem; font-weight:700; }
    .reseller-tabs button.active { background:#fff; color:#ea580c; box-shadow:0 1px 4px rgba(15,23,42,.1); }
    .reseller-customer-card { position:relative; overflow:hidden; cursor:pointer; transition:box-shadow .15s, border-color .15s; }
    .reseller-customer-card:hover { border-color:#fdba74 !important; box-shadow:0 3px 12px rgba(234,88,12,.1); }
    .reseller-usage-ok { color:#16a34a; } .reseller-usage-warn { color:#ea580c; } .reseller-usage-danger { color:#dc2626; }
    .reseller-fab { position:fixed; z-index:1040; right:1.25rem; bottom:1.25rem; width:56px; height:56px; border:0; border-radius:50%; background:#ea580c; color:#fff; box-shadow:0 8px 22px rgba(234,88,12,.35); font-size:1.35rem; }
    @media (min-width:768px) { .reseller-fab { right:2rem; bottom:2rem; } }

    /* Customer key card (mobile) */
    .customer-key-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: .75rem;
      padding: 1rem;
      margin-bottom: .5rem;
    }

    /* Shortcut create buttons */
    .shortcut-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-bottom: 1rem;
    }
    .quota-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .75rem;
    }
    @media (max-width: 768px) {
      .quota-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .quota-stats-grid { grid-template-columns: 1fr; }
    }
    .quota-stat-card {
      display: flex;
      align-items: center;
      gap: .75rem;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: .75rem;
      padding: .75rem 1rem;
      transition: box-shadow .15s;
    }
    .quota-stat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
    .model-grade {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.45rem;
      height: 1.45rem;
      padding: 0 .35rem;
      border: 1px solid transparent;
      border-radius: .45rem;
      font-size: .7rem;
      font-weight: 800;
      line-height: 1;
    }
    .model-grade-a { color: #166534; background: #dcfce7; border-color: #86efac; }
    .model-grade-b { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
    .model-grade-c { color: #9f1239; background: #ffe4e6; border-color: #fda4af; }
    .quota-stat-icon {
      width: 40px;
      height: 40px;
      border-radius: .6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .quota-stat-info { min-width: 0; display: flex; flex-direction: column; }
    .quota-stat-label { font-size: .7rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; }
    .quota-stat-value { font-size: 1rem; font-weight: 700; color: #1e293b; font-family: 'JetBrains Mono', monospace; }
    .quota-stat-meta { font-size: .7rem; color: #94a3b8; }
    .shortcut-btn {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .45rem .85rem;
      border-radius: .6rem;
      font-size: .8rem;
      font-weight: 600;
      border: 1.5px solid #e2e8f0;
      background: white;
      color: #334155;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
    }
    .shortcut-btn:hover {
      border-color: #6d28d9;
      color: #6d28d9;
      background: #f5f3ff;
      box-shadow: 0 1px 3px rgba(109,40,217,.12);
    }
    .shortcut-btn:active { transform: scale(.97); }
    .shortcut-btn i { font-size: .85rem; }
    .shortcut-btn.quick-saving {
      opacity: .6;
      pointer-events: none;
    }

    /* Public layout (quota dashboard, etc.) */
    .public-topbar {
      height: 64px;
      background: #0f172a;
      border-bottom: 1px solid #1e293b;
      display: flex;
      align-items: center;
      padding: 0 1.25rem;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    @media (min-width: 768px) { .public-topbar { padding: 0 2rem; } }
    .public-topbar-brand {
      display: flex;
      align-items: center;
      gap: .65rem;
      text-decoration: none;
    }
    .public-topbar-brand-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: linear-gradient(135deg, #6d28d9, #4f46e5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      flex-shrink: 0;
    }
    .public-topbar-brand-name {
      font-weight: 700;
      color: #f8fafc;
      font-size: 1rem;
    }
    .public-topbar-sep {
      width: 1px;
      height: 20px;
      background: #334155;
      margin: 0 .75rem;
    }
    .public-topbar-label {
      font-size: .85rem;
      color: #94a3b8;
      font-weight: 500;
    }
    .public-topbar-warranty-btn,
    .public-topbar-refresh-btn,
    .public-topbar-wa-btn,
    .public-topbar-channel-btn {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .45rem .85rem;
      font-size: .85rem;
      font-weight: 550;
      color: #e2e8f0;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: .5rem;
      text-decoration: none;
      cursor: pointer;
      transition: all .15s;
    }
    .public-topbar-warranty-btn:hover,
    .public-topbar-refresh-btn:hover:not(:disabled),
    .public-topbar-wa-btn:hover,
    .public-topbar-channel-btn:hover {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.22);
      color: #fff;
    }
    .public-topbar-refresh-btn:disabled { opacity: .55; cursor: not-allowed; }
    .public-topbar-refresh-btn .bi-arrow-clockwise.spinning {
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .public-topbar-actions {
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .public-content-wrap {
      padding: 1rem .75rem calc(5.75rem + env(safe-area-inset-bottom, 0px));
      max-width: 960px;
      margin: 0 auto;
    }
    .public-topbar { display: none; }
    @media (min-width: 992px) {
      .public-content-wrap { padding: 2rem; }
      .public-topbar { display: flex; }
    }

    /* Admin Floating Action Button (Quota Dashboard) */
    .admin-fab-wrap {
      position: fixed;
      right: 1rem;
      bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
      z-index: 70;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    @media (min-width: 992px) {
      .admin-fab-wrap { bottom: 1.5rem; }
    }
    .admin-fab {
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 0;
      background: linear-gradient(135deg, #6d28d9, #4f46e5);
      color: white;
      box-shadow: 0 6px 20px rgba(109,40,217,.35);
      display: grid;
      place-items: center;
      font-size: 1.4rem;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
    }
    .admin-fab:hover { transform: scale(1.05); box-shadow: 0 8px 26px rgba(109,40,217,.45); }
    .admin-fab.open { transform: rotate(45deg); }
    .admin-fab-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.25);
      z-index: -1;
    }
    .admin-fab-menu {
      position: absolute;
      right: 0;
      bottom: 66px;
      width: 220px;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: .875rem;
      box-shadow: 0 16px 40px rgba(15,23,42,.18);
      padding: .5rem;
      display: flex;
      flex-direction: column;
      gap: .15rem;
    }
    .admin-fab-menu button {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .65rem .75rem;
      border: 0;
      border-radius: .55rem;
      background: transparent;
      color: #334155;
      font-size: .85rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: background .15s;
    }
    .admin-fab-menu button:hover { background: #f8fafc; }
    .admin-fab-menu button i { font-size: 1rem; }
    .admin-fab-menu-divider {
      height: 1px;
      background: #e2e8f0;
      margin: .25rem .5rem;
    }

    /* Connect sidebar (used in QuotaDashboardPage) */
    .connect-sidebar {
      background: white;
      border-radius: .75rem;
      border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(15,23,42,.04);
      padding: 1.25rem;
    }
    .quota-stat-card {
      padding: 1rem;
      border-radius: .75rem;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
    }
    .quota-stat-card.highlight { background: #f5f3ff; border-color: #ddd6fe; }

    /* Connect sidebar (desktop: side card / mobile: accordion below) */
    .connect-sidebar {
      background: white;
      border-radius: 1.25rem;
      padding: 1.5rem;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    }
    .connect-sidebar h5 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .connect-accordion .accordion-item {
      border: 0;
      border-bottom: 1px solid #e5e7eb;
      background: transparent;
    }
    .connect-accordion .accordion-item:last-child { border-bottom: 0; }
    .connect-accordion .accordion-button {
      font-size: .875rem;
      font-weight: 600;
      color: #1e293b;
      background: transparent;
      padding: .85rem 0;
      box-shadow: none;
      gap: .5rem;
    }
    .connect-accordion .accordion-button::after { margin-left: auto; }
    .connect-accordion .accordion-button:not(.collapsed) { color: #6d28d9; background: transparent; }
    .connect-accordion .accordion-body { padding: 0 0 1rem 0; }
    .connect-accordion .connect-step {
      display: flex;
      gap: .75rem;
      margin-bottom: .85rem;
      align-items: flex-start;
    }
    .connect-accordion .connect-step:last-child { margin-bottom: 0; }
    .connect-step-num {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: #6d28d9;
      color: white;
      font-size: .75rem;
      font-weight: 700;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }
    .connect-step-body { min-width: 0; flex: 1; }
    .connect-step-body label { font-size: .8rem; font-weight: 600; margin-bottom: .35rem; display: block; color: #1e293b; }
    .connect-step-body .code-block { font-size: .76rem; padding: .65rem .85rem; margin: 0; }
    .connect-step-body small { font-size: .75rem; color: #64748b; }

    /* Public dashboard tabs */
    .public-tabs {
      display: flex;
      gap: 0;
      background: white;
      border-radius: .75rem .75rem 0 0;
      border: 1px solid #e5e7eb;
      border-bottom: 0;
      overflow-x: auto;
    }
    .public-tab {
      flex: 1;
      padding: .85rem 1rem;
      font-size: .875rem;
      font-weight: 600;
      color: #64748b;
      background: transparent;
      border: 0;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      transition: all .15s;
      white-space: nowrap;
    }
    .public-tab:hover { color: #1e293b; background: #f8fafc; }
    .public-tab.active {
      color: #6d28d9;
      border-bottom-color: #6d28d9;
      background: white;
    }
    .public-tab-content {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 0 0 .75rem .75rem;
      padding: 1.25rem;
    }
    .logs-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .logs-table {
      min-width: 1080px;
      table-layout: auto;
      font-size: .72rem;
    }
    /* Varian public request-logs: full width & lebih lega (bukan kompak).
       Kolom pakai min-width (flex) → el-table membentang penuh 100% lebar
       container; scroll horizontal muncul otomatis saat layar sempit. */
    .reqlogs-table {
      width: 100%;
      font-size: .78rem;
    }
    .reqlogs-table .el-table__cell { padding: 6px 0 !important; }
    .reqlogs-table th.el-table__cell .cell { font-size: .7rem; padding: 0 8px; letter-spacing: .01em; }
    .reqlogs-table td.el-table__cell .cell { padding: 0 8px; }
    .reqlogs-table .font-monospace { white-space: nowrap; }

    /* Request Logs: full-width & mudah dilihat — lepaskan frame card & padding
       horizontal agar tabel membentang penuh dari tepi ke tepi (scroll
       horizontal muncul otomatis saat kolom melebihi viewport). */
    /* ⚠️ .public-tab-content TIDAK child langsung dari .content-wrap (terbungkus
       div root component), jadi selector `> .public-tab-content` tak pernah match.
       Pakai :has() untuk buka cap max-width 1180px saat reqlogs aktif. */
    .public-mac-desktop .public-content-wrap:has(.public-tab-content.reqlogs-active) > * {
      max-width: none !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
    .public-mac-desktop .public-tab-content.is-full-bleed.reqlogs-active > div.reqlogs-tab {
      padding: 0;
    }
    .public-mac-desktop .reqlogs-tab > .card {
      border: 0; border-radius: 0; background: transparent;
      box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .public-mac-desktop .reqlogs-tab > .card > .card-body { padding: .5rem .25rem; }
    /* Kolom lebih rapat agar semua kolom terlihat tanpa scroll di desktop */
    .reqlogs-table td.el-table__cell .cell { padding: 0 6px; }
    .reqlogs-table th.el-table__cell .cell { padding: 0 6px; }
    /* Beri sticky header & pastikan scrollbar horizontal terlihat */
    .logs-table-wrap { scrollbar-width: thin; }
    .logs-table-wrap::-webkit-scrollbar { height: 8px; }
    .logs-table-wrap::-webkit-scrollbar-thumb { background: rgba(120,120,128,.35); border-radius: 8px; }
    .reqlogs-table .el-table__header-wrapper th,
    .reqlogs-table .el-table__body-wrapper td { white-space: nowrap; }

    /* Kolom harga per-1M token di Model Catalog — stacked compact */
    .model-price-col {
      display: flex;
      flex-direction: column;
      gap: 1px;
      font-size: .6rem;
      line-height: 1.25;
      white-space: nowrap;
    }
    .model-price-col b {
      font-weight: 600;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .logs-table th,
    .logs-table td { white-space: nowrap; vertical-align: middle; }
    .logs-table th { font-size: .68rem; letter-spacing: .02em; }
    .logs-table th:nth-child(1) { min-width: 115px; }
    .logs-table th:nth-child(2) { min-width: 125px; }
    .logs-table th:nth-child(3) { min-width: 125px; }
    .logs-table th:nth-child(4) { min-width: 115px; }
    .logs-table th:nth-child(6) { min-width: 155px; }
    .logs-table th:nth-child(8) { min-width: 145px; }
    .logs-card-list { display: none; }
    .logs-request-card {
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: .8rem;
      background: #fff;
    }
    .logs-request-card + .logs-request-card { margin-top: .65rem; }
    .logs-request-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .65rem;
      padding-bottom: .65rem;
      margin-bottom: .65rem;
      border-bottom: 1px solid #eef0f2;
    }
    .logs-request-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .65rem .8rem;
    }
    .logs-request-grid > div { min-width: 0; }
    .logs-request-grid small {
      display: block;
      margin-bottom: .15rem;
      color: #6b7280;
      font-size: .64rem;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .logs-request-grid strong {
      display: block;
      overflow-wrap: anywhere;
      color: #1f2937;
      font-size: .76rem;
      font-weight: 600;
    }
    .logs-request-wide { grid-column: 1 / -1; }
    @media (max-width: 767.98px) {
      .logs-table-wrap { display: none; }
      .logs-card-list { display: block; }
    }
    .public-bottom-nav,
    .public-nav-more,
    .public-nav-backdrop,
    .public-nav-more-toggle { display: none; }
    @media (max-width: 991.98px) {
      .public-tabs { display: none; }
      .public-tab-content { padding: .875rem; border-radius: .875rem; }
      .public-bottom-nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        min-height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px));
        background: #0f172a;
        border-top: 1px solid #1e293b;
        z-index: 60;
      }
      .public-bottom-nav button, .public-bottom-nav-more {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        padding: .25rem .2rem;
        color: #94a3b8;
        font-size: .64rem;
        font-weight: 600;
        line-height: 1.1;
        background: transparent;
        border: 0;
        cursor: pointer;
      }
      .public-bottom-nav button i, .public-bottom-nav-more i { font-size: 1.2rem; }
      .public-bottom-nav button.active, .public-bottom-nav-more.active { color: #a78bfa; }
      .public-bottom-nav button.active i, .public-bottom-nav-more.active i {
        display: grid;
        place-items: center;
        width: 32px; height: 24px;
        border-radius: .6rem;
        background: rgba(167,139,250,.15);
      }
      .public-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(2,6,23,.72);
        z-index: 61;
      }
      .public-nav-more {
        display: none;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        max-height: 70vh;
        background: #0f172a;
        border-top: 1px solid #1e293b;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: .75rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
        z-index: 62;
        overflow-y: auto;
      }
      .public-nav-more-toggle:checked ~ .public-nav-backdrop { display: block; }
      .public-nav-more-toggle:checked ~ .public-nav-more { display: flex; }
      .public-nav-more-handle {
        width: 40px; height: 4px;
        background: #334155;
        border-radius: 2px;
        margin: 0 auto 1rem;
      }
      .public-nav-more-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem .75rem;
        color: #f8fafc;
        font-weight: 700;
      }
      .public-nav-more-header label {
        color: #94a3b8;
        font-size: .85rem;
        cursor: pointer;
      }
      .public-nav-more-section {
        padding: .5rem 1rem;
        color: #64748b;
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
      }
      .public-nav-more button, .public-nav-more a {
        display: flex;
        align-items: center;
        gap: .9rem;
        padding: .9rem 1rem;
        text-align: left;
        font-size: .92rem;
        font-weight: 500;
        color: #e2e8f0;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #1e293b;
        text-decoration: none;
      }
      .public-nav-more button:last-of-type, .public-nav-more a:last-of-type { border-bottom: 0; }
      .public-nav-more button.active, .public-nav-more a.active { color: #a78bfa; background: rgba(167,139,250,.08); }
      .public-nav-more button i, .public-nav-more a i { font-size: 1.15rem; color: #94a3b8; }
      .public-nav-more button.active i, .public-nav-more a.active i { color: #a78bfa; }
      .quota-stat-card { padding: .75rem; }
      .connect-sidebar { padding: 1rem; border-radius: 1rem; }
    }
    .announcement-truncate {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .announcement-content img,
    .announcement-truncate img {
      max-width: 100%;
      height: auto;
    }
    .announcement-card {
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .announcement-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }

    /* ===== Notice card — mirrors gopay card layout, yellow background =====
       Sits as a sibling of .gj-gopay-card inside .gj-dash-anim, so width is
       guaranteed identical (same parent, same block flow). */
    .gj-notice-card {
      position: relative; overflow: hidden; border: 0; border-radius: 16px;
      background: linear-gradient(135deg, #fde047 0%, #facc15 60%, #eab308 100%);
      color: #422006; padding: .68rem .82rem .72rem;
      box-shadow: 0 8px 20px rgba(202,138,4,.22);
      margin-bottom: .7rem; cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease;
      animation: gj-fade-up .38s ease both;
    }
    .gj-notice-card::after {
      content: ''; position: absolute; right: -34px; top: -34px; width: 118px; height: 118px;
      background: rgba(255,255,255,.1); border-radius: 50%;
    }
    .gj-notice-card:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(202,138,4,.3); }
    .gj-notice-card:active { transform: scale(.99); }
    .gj-notice-card > * { position: relative; z-index: 1; }
    .gj-notice-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .gj-notice-label { font-size: .68rem; font-weight: 600; opacity: .85; display: flex; align-items: center; gap: .3rem; }
    .gj-notice-date { font-size: .64rem; opacity: .75; }
    .gj-notice-title { font-size: .82rem; font-weight: 800; margin: .2rem 0 .1rem; line-height: 1.2; }
    .gj-notice-body { font-size: .72rem; line-height: 1.4; opacity: .92; }
    /* Danger variant (penalty) — red gradient */
    .gj-notice-card.gj-notice-danger {
      background: linear-gradient(135deg, #fca5a5 0%, #ef4444 60%, #dc2626 100%);
      color: #fff; cursor: default; box-shadow: 0 8px 20px rgba(220,38,38,.22);
    }
    .gj-notice-card.gj-notice-danger:hover { box-shadow: 0 12px 30px rgba(220,38,38,.3); }
    .gj-notice-card.gj-notice-danger .gj-notice-label { opacity: .95; }

    /* Compact overrides inside animated dashboard */
    .gj-dash-anim .gj-notice-card { padding: .56rem .72rem .6rem; margin-bottom: .55rem; }
    .gj-dash-anim .gj-notice-card::after { width: 92px; height: 92px; right: -26px; top: -26px; }
    .gj-dash-anim .gj-notice-label { font-size: .64rem; }
    .gj-dash-anim .gj-notice-date { font-size: .6rem; }
    .gj-dash-anim .gj-notice-title { font-size: .76rem; }
    .gj-dash-anim .gj-notice-body { font-size: .68rem; }

    /* Web Topup toggle card — compact, sits between gopay card and service grid */
    .gj-webtopup-toggle {
      display: flex; align-items: center; justify-content: space-between; gap: .6rem;
      padding: .55rem .72rem; margin-bottom: .55rem; border-radius: 14px;
      background: var(--gj-card, #fff); box-shadow: var(--gj-shadow, 0 2px 10px rgba(17,24,39,.06));
      animation: gj-fade-up .4s ease .08s both;
    }
    .gj-webtopup-info { min-width: 0; }
    .gj-webtopup-label { font-size: .7rem; font-weight: 700; color: var(--gj-ink, #1A1A1A); display: flex; align-items: center; gap: .3rem; }
    .gj-webtopup-status { font-size: .62rem; color: var(--gj-muted, #6B7280); margin-top: 1px; }
    .gj-webtopup-status.active { color: var(--gj-green, #00AA13); font-weight: 600; }
    .gj-webtopup-btn {
      flex-shrink: 0; border: 0; border-radius: 999px; padding: .32rem .72rem;
      font-size: .66rem; font-weight: 700; cursor: pointer;
      background: var(--gj-green, #00AA13); color: #fff;
      transition: transform .15s ease, background .2s ease;
    }
    .gj-webtopup-btn:hover { transform: translateY(-1px); }
    .gj-webtopup-btn:active { transform: scale(.94); }
    .gj-webtopup-btn.on { background: #fee2e2; color: #dc2626; }
    .gj-webtopup-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .public-mac-desktop.theme-dark .gj-webtopup-toggle,
    body.public-theme-dark .gj-webtopup-toggle { background: var(--gj-card) !important; }
    .public-mac-desktop.theme-dark .gj-webtopup-btn.on,
    body.public-theme-dark .gj-webtopup-btn.on { background: rgba(220,38,38,.2) !important; color: #fca5a5 !important; }

    /* Invite buttons row (customer + reseller, same pattern as webtopup toggle) */
    .gj-invite-btnrow {
      display: flex; gap: .5rem;
      padding: .5rem .6rem; margin-bottom: .55rem; border-radius: 14px;
      background: var(--gj-card, #fff); box-shadow: var(--gj-shadow, 0 2px 10px rgba(17,24,39,.06));
      animation: gj-fade-up .4s ease .1s both;
    }
    .gj-invite-btnrow .btn { flex: 1; font-weight: 600; border-radius: 10px; }
    .public-mac-desktop.theme-dark .gj-invite-btnrow,
    body.public-theme-dark .gj-invite-btnrow { background: var(--gj-card) !important; }
    /* Convert Komisi / Transfer quota — before/after preview box */
    .gj-preview-box {
      margin-top: .5rem; padding: .55rem .6rem; border-radius: 10px;
      background: var(--gj-bg, #f8fafc); border: 1px solid var(--gj-line, #e2e8f0);
      font-size: .72rem; color: var(--gj-ink, #1A1A1A);
    }
    .gj-preview-head { font-weight: 700; margin-bottom: .3rem; color: var(--gj-green, #00AA13); }
    .gj-preview-row {
      display: flex; justify-content: space-between; gap: .5rem;
      padding: .18rem 0; color: var(--gj-muted, #6B7280);
    }
    .gj-preview-row span:last-child { color: var(--gj-ink, #1A1A1A); text-align: right; }
    .gj-preview-gain {
      margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--gj-line, #e2e8f0);
      font-weight: 700; color: var(--gj-green, #059669);
    }
    .public-mac-desktop.theme-dark .gj-preview-box,
    body.public-theme-dark .gj-preview-box {
      background: #1e293b; border-color: #334155; color: var(--gj-ink);
    }
    .public-mac-desktop.theme-dark .gj-preview-row span:last-child,
    body.public-theme-dark .gj-preview-row span:last-child { color: var(--gj-ink); }
    .public-mac-desktop.theme-dark .gj-preview-gain,
    body.public-theme-dark .gj-preview-gain { border-top-color: #334155; }
    /* Invite message preview box — light bg normally, adapts to dark mode */
    .gj-invite-msgbox {
      padding: .5rem .6rem; border-radius: 10px;
      background: #f8fafc; border: 1px solid #dcfce7;
      font-size: .75rem; white-space: pre-wrap; word-break: break-word;
      color: #1A1A1A;
    }
    .public-mac-desktop.theme-dark .gj-invite-msgbox,
    body.public-theme-dark .gj-invite-msgbox {
      background: #0f172a !important; border-color: var(--gj-line) !important;
      color: var(--gj-ink) !important;
    }
    /* Compact single-row reseller stats (mobile-first: h-scroll, no wrap) */
    .gj-stat-row {
      display: flex; align-items: stretch; gap: 0;
      margin-bottom: .55rem; border-radius: 14px; overflow: hidden;
      background: var(--gj-card, #fff); box-shadow: var(--gj-shadow, 0 2px 10px rgba(17,24,39,.06));
      animation: gj-fade-up .4s ease .1s both;
    }
    .gj-stat-cell {
      flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px;
      padding: .5rem .3rem; text-align: center; border-right: 1px solid var(--gj-line, #ECEDEF);
      /* clickable: reset button chrome */
      appearance: none; background: transparent; border: 0; border-right: 1px solid var(--gj-line, #ECEDEF);
      font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: background-color .12s;
    }
    .gj-stat-cell:hover { background: rgba(0,170,19,.06); }
    .gj-stat-cell:active { background: rgba(0,170,19,.12); }
    .gj-stat-cell:last-child { border-right: 0; }
    .gj-stat-num {
      font-weight: 750; font-size: clamp(.56rem, 9.5cqw, .78rem); line-height: 1.2;
      font-variant-numeric: tabular-nums;
      color: var(--gj-ink, #1A1A1A);
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .gj-stat-row { container-type: inline-size; }
    .gj-stat-lbl { font-size: .56rem; color: var(--gj-muted, #6B7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (min-width: 576px) {
      .gj-stat-cell { padding: .55rem .45rem; }
      .gj-stat-num { font-size: clamp(.62rem, 8cqw, .85rem); }
      .gj-stat-lbl { font-size: .6rem; }
    }
    @media (min-width: 992px) {
      .gj-stat-num { font-size: clamp(.68rem, 7cqw, .92rem); }
      .gj-stat-lbl { font-size: .62rem; }
    }
    .public-mac-desktop.theme-dark .gj-stat-row,
    body.public-theme-dark .gj-stat-row { background: var(--gj-card) !important; }
    .public-mac-desktop.theme-dark .gj-stat-cell:hover,
    body.public-theme-dark .gj-stat-cell:hover { background: rgba(34,197,94,.12); }
    .public-mac-desktop.theme-dark .gj-stat-cell:active,
    body.public-theme-dark .gj-stat-cell:active { background: rgba(34,197,94,.2); }
    /* Ways-to-earn card */
    .gj-earn-card {
      margin-bottom: .55rem; padding: .65rem .7rem; border-radius: 14px;
      background: var(--gj-card, #fff); box-shadow: var(--gj-shadow, 0 2px 10px rgba(17,24,39,.06));
      animation: gj-fade-up .4s ease .12s both;
    }
    .gj-earn-head {
      display: flex; align-items: center; gap: .35rem;
      font-size: .72rem; font-weight: 750; color: var(--gj-ink, #1A1A1A);
      margin-bottom: .55rem;
    }
    .gj-earn-head i { color: var(--gj-green, #00AA13); }
    .gj-earn-item { display: flex; align-items: flex-start; gap: .55rem; padding: .45rem 0; }
    .gj-earn-item + .gj-earn-item { border-top: 1px solid var(--gj-line, #ECEDEF); }
    .gj-earn-num {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--gj-green, #00AA13); color: #fff;
      font-size: .68rem; font-weight: 800; margin-top: 1px;
    }
    .gj-earn-body { min-width: 0; }
    .gj-earn-title { font-size: .72rem; font-weight: 700; color: var(--gj-ink, #1A1A1A); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
    .gj-earn-desc { font-size: .66rem; color: var(--gj-muted, #6B7280); line-height: 1.45; margin-top: 1px; }
    .gj-earn-tag { font-size: .54rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; white-space: nowrap; }
    .gj-earn-tag-green { background: #dcfce7; color: #166534; }
    .gj-earn-tag-blue { background: #dbeafe; color: #1e40af; }
    .gj-earn-tag-purple { background: #ede9fe; color: #5b21b6; }
    .gj-earn-tag-cyan { background: #cffafe; color: #155e75; }
    .gj-earn-tag-slate { background: #e2e8f0; color: #334155; }
    .public-mac-desktop.theme-dark .gj-earn-card,
    body.public-theme-dark .gj-earn-card { background: var(--gj-card) !important; }
    .public-mac-desktop.theme-dark .gj-earn-tag-green,
    body.public-theme-dark .gj-earn-tag-green { background: rgba(34,197,94,.18); color: #86efac; }
    .public-mac-desktop.theme-dark .gj-earn-tag-blue,
    body.public-theme-dark .gj-earn-tag-blue { background: rgba(59,130,246,.18); color: #93c5fd; }
    .public-mac-desktop.theme-dark .gj-earn-tag-purple,
    body.public-theme-dark .gj-earn-tag-purple { background: rgba(139,92,246,.18); color: #c4b5fd; }
    .public-mac-desktop.theme-dark .gj-earn-tag-cyan,
    body.public-theme-dark .gj-earn-tag-cyan { background: rgba(6,182,212,.18); color: #67e8f9; }
    .public-mac-desktop.theme-dark .gj-earn-tag-slate,
    body.public-theme-dark .gj-earn-tag-slate { background: rgba(100,116,139,.25); color: #cbd5e1; }
    @media (min-width: 576px) {
      .gj-earn-head { font-size: .78rem; }
      .gj-earn-title { font-size: .76rem; }
      .gj-earn-desc { font-size: .7rem; }
    }

    /* Dark mode */
    .public-mac-desktop.theme-dark .gj-notice-card,
    body.public-theme-dark .gj-notice-card {
      background: linear-gradient(135deg, #854d0e, #713f12) !important;
      color: #fde68a !important; box-shadow: 0 8px 20px rgba(0,0,0,.3) !important;
    }
    .public-mac-desktop.theme-dark .gj-notice-card.gj-notice-danger,
    body.public-theme-dark .gj-notice-card.gj-notice-danger {
      background: linear-gradient(135deg, #991b1b, #7f1d1d) !important;
      color: #fecaca !important;
    }
    .tutorial-card {
      transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    }
    .tutorial-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }
    .tutorial-card.dragging {
      opacity: .5;
    }
    .tutorial-editor .ck-editor__editable_inline { min-height:220px; max-height:50vh; overflow-y:auto; }
    .tutorial-editor .ck-toolbar { border-radius:.5rem .5rem 0 0 !important; }
    .tutorial-content { color:#334155; font-size:.9rem; line-height:1.75; overflow-wrap:anywhere; }
    .tutorial-content > :first-child { margin-top:0; }
    .tutorial-content > :last-child { margin-bottom:0; }
    .tutorial-content h2, .tutorial-content h3, .tutorial-content h4 { color:#0f172a; font-weight:700; line-height:1.3; margin:1.4em 0 .6em; }
    .tutorial-content h2 { font-size:1.35rem; }
    .tutorial-content h3 { font-size:1.15rem; }
    .tutorial-content h4 { font-size:1rem; }
    .tutorial-content p, .tutorial-content ul, .tutorial-content ol, .tutorial-content blockquote { margin-bottom:1rem; }
    .tutorial-content ul, .tutorial-content ol { padding-left:1.4rem; }
    .tutorial-content blockquote { padding:.75rem 1rem; border-left:4px solid #8b5cf6; background:#f5f3ff; border-radius:0 .5rem .5rem 0; color:#4c1d95; }
    .tutorial-content pre { padding:.85rem; border-radius:.55rem; background:#0f172a; color:#e2e8f0; white-space:pre-wrap; overflow-x:auto; }
    .tutorial-content code:not(pre code) { padding:.12rem .3rem; border-radius:.3rem; background:#f1f5f9; color:#7c3aed; }
    .tutorial-content img { display:block; max-width:100%; height:auto; margin:1rem auto; border-radius:.6rem; }
    .tutorial-content table { width:100%; margin-bottom:1rem; border-collapse:collapse; display:block; overflow-x:auto; }
    .tutorial-content th, .tutorial-content td { padding:.55rem .7rem; border:1px solid #dbe3ee; text-align:left; }
    .tutorial-content a { color:#6d28d9; text-decoration-thickness:1px; text-underline-offset:2px; }
    @media (min-width:576px) {
      .tutorial-content { font-size:.95rem; }
      .tutorial-editor .ck-editor__editable_inline { min-height:280px; }
    }
    .token-breakdown-bar { height: 10px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
    .token-breakdown-fill { height:100%; border-radius:inherit; transition:width .35s ease; }
    .token-breakdown-value { font-family:'JetBrains Mono',monospace; font-size:.78rem; font-weight:700; color:#1e293b; }
    .public-credential-grid { display:grid; grid-template-columns:1fr; gap:.65rem; }
    @media (min-width:576px) { .public-credential-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    .connect-copy-btn {
      background: rgba(255,255,255,.15);
      color: #94a3b8;
      border: none;
      padding: 4px 10px;
      border-radius: .3rem;
      cursor: pointer;
      font-size: .75rem;
      position: absolute;
      top: 6px; right: 6px;
    }
    .connect-copy-btn:hover { background: rgba(255,255,255,.3); color: white; }
    .connect-api-key-box {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .5rem .75rem;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: .5rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: .78rem;
      color: #334155;
      margin-bottom: .35rem;
      word-break: break-all;
    }
    .connect-api-key-box .copy-icon { cursor: pointer; color: #64748b; flex-shrink: 0; font-size: .85rem; }
    .connect-api-key-box .copy-icon:hover { color: #6d28d9; }
    .connect-api-key-box-inline {
      display: flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .6rem;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: .5rem;
      font-family: 'JetBrains Mono', monospace;
      color: #334155;
      min-width: 0;
      flex-shrink: 0;
      max-width: 280px;
    }
    .connect-api-key-box-inline .copy-icon { cursor: pointer; color: #64748b; flex-shrink: 0; font-size: .85rem; }
    .connect-api-key-box-inline .copy-icon:hover { color: #6d28d9; }
    .status-chip-active { background: #dcfce7; color: #166534; }
    .status-chip-inactive { background: #f1f5f9; color: #475569; }
    .status-chip-suspended { background: #fef2f2; color: #991b1b; }

    /* Page header */
    .page-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
    }
    .page-title { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
    .page-subtitle { color: #64748b; font-size: .9rem; margin: .25rem 0 0; }

    /* ===== Landing Page ===== */
    .landing {
      position: relative;
      min-height: 100vh;
      background: radial-gradient(ellipse at top, #1e1b4b 0%, #0f172a 50%, #020617 100%);
      color: white;
      overflow: hidden;
    }
    .landing::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -20%;
      width: 80%;
      height: 150%;
      background: radial-gradient(circle, rgba(109,40,217,.25) 0%, transparent 60%);
      pointer-events: none;
      animation: landing-glow 12s ease-in-out infinite alternate;
    }
    .landing::after {
      content: '';
      position: absolute;
      bottom: -30%;
      right: -20%;
      width: 70%;
      height: 120%;
      background: radial-gradient(circle, rgba(79,70,229,.2) 0%, transparent 60%);
      pointer-events: none;
      animation: landing-glow 10s ease-in-out infinite alternate-reverse;
    }
    @keyframes landing-glow {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(20px, -30px) scale(1.1); }
    }
    .landing-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
      pointer-events: none;
    }
    .landing > * { position: relative; z-index: 2; }

    .landing-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.25rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    @media (min-width: 768px) { .landing-nav { padding: 1.5rem 2rem; } }
    .landing-brand {
      display: flex;
      align-items: center;
      gap: .75rem;
      text-decoration: none;
      color: white;
    }
    .landing-brand-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, #6d28d9, #4f46e5);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px -8px rgba(109,40,217,.6);
    }
    .landing-brand-name { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; }
    .landing-login-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .65rem 1.25rem;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: .65rem;
      color: white;
      text-decoration: none;
      font-weight: 500;
      font-size: .9rem;
      transition: all .2s;
      backdrop-filter: blur(10px);
    }
    .landing-login-btn:hover {
      background: rgba(255,255,255,.15);
      border-color: rgba(255,255,255,.3);
      transform: translateY(-1px);
    }

    .landing-hero {
      max-width: 900px;
      margin: 4rem auto 3rem;
      padding: 0 1.25rem;
      text-align: center;
    }
    @media (min-width: 768px) { .landing-hero { margin: 6rem auto 4rem; padding: 0 2rem; } }
    .landing-hero-chip {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .4rem 1rem;
      background: rgba(109,40,217,.2);
      border: 1px solid rgba(109,40,217,.4);
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 500;
      color: #c4b5fd;
      margin-bottom: 1.5rem;
      animation: fadeInUp .8s ease;
    }
    .landing-hero-chip .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px #10b981;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .5; }
    }
    .landing-hero h1 {
      font-size: clamp(2rem, 6vw, 3.75rem);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.1;
      margin-bottom: 1.25rem;
      animation: fadeInUp .8s ease .1s backwards;
    }
    .landing-hero h1 .accent {
      background: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #fbbf24 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .landing-hero p {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: #cbd5e1;
      max-width: 640px;
      margin: 0 auto 2rem;
      line-height: 1.6;
      animation: fadeInUp .8s ease .2s backwards;
    }
    .landing-hero-cta {
      display: flex;
      gap: .75rem;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeInUp .8s ease .3s backwards;
    }
    .landing-hero-cta .btn-cta {
      padding: .85rem 1.75rem;
      border-radius: .75rem;
      font-weight: 600;
      font-size: .95rem;
      text-decoration: none;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }
    .btn-cta-primary {
      background: linear-gradient(135deg, #6d28d9, #7c3aed);
      color: white;
      box-shadow: 0 10px 30px -10px rgba(109,40,217,.6);
    }
    .btn-cta-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 35px -10px rgba(109,40,217,.8);
    }
    .btn-cta-ghost {
      background: rgba(255,255,255,.05);
      color: white;
      border: 1px solid rgba(255,255,255,.15);
    }
    .btn-cta-ghost:hover {
      background: rgba(255,255,255,.1);
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Features strip */
    .landing-features {
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem 1.25rem 0;
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    @media (min-width: 768px) { .landing-features { padding: 3rem 2rem 0; } }
    .landing-feature {
      text-align: center;
      padding: 1.5rem 1rem;
      border-radius: 1rem;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
      animation: fadeInUp .8s ease .4s backwards;
    }
    .landing-feature i {
      font-size: 1.5rem;
      color: #a78bfa;
      display: block;
      margin-bottom: .75rem;
    }
    .landing-feature h3 {
      font-size: .95rem;
      font-weight: 600;
      margin-bottom: .35rem;
    }
    .landing-feature p {
      color: #94a3b8;
      font-size: .8rem;
      margin: 0;
    }

    /* Pricing models chips */
    .pricing-models {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .5rem;
      margin-top: 1.25rem;
    }
    .pricing-model-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .3rem .8rem;
      font-size: .75rem;
      font-weight: 600;
      border-radius: 999px;
      background: rgba(167,139,250,.1);
      color: #c4b5fd;
      border: 1px solid rgba(167,139,250,.2);
    }
    .pricing-model-chip i { font-size: .8rem; }
    .pricing-note {
      margin-top: 2.5rem;
      margin-bottom: 0;
      color: #94a3b8;
      font-size: .82rem;
    }
    @media (min-width: 768px) { .pricing-note { margin-top: 4rem; } }
    .pricing-note i { color: #fbbf24; margin-right: .25rem; }
    .pricing-note strong { color: #e2e8f0; }

    /* Pricing section */
    .landing-pricing {
      max-width: 1200px;
      margin: 4rem auto 3rem;
      padding: 0 1.25rem 4rem;
    }
    @media (min-width: 768px) { .landing-pricing { padding: 0 2rem 6rem; margin: 6rem auto 4rem; } }
    .landing-pricing-header {
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .landing-pricing-header h2 {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800;
      margin-bottom: .5rem;
      letter-spacing: -.02em;
    }
    .landing-pricing-header p {
      color: #cbd5e1;
      font-size: 1rem;
      margin: 0;
    }

    .pricing-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 480px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 768px) {
      .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
    }
    @media (min-width: 1200px) {
      .pricing-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
    }
    .pricing-card {
      position: relative;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 1.25rem;
      padding: 1.5rem 1.15rem;
      transition: all .35s cubic-bezier(.2,.8,.2,1);
      backdrop-filter: blur(12px);
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    @media (min-width: 768px) {
      .pricing-card { padding: 1.75rem 1.5rem; }
    }
    .pricing-tokens {
      font-size: 1.6rem;
    }
    @media (min-width: 768px) {
      .pricing-tokens { font-size: 2rem; }
    }
    .pricing-price .amount {
      font-size: 1.6rem;
    }
    @media (min-width: 768px) {
      .pricing-price .amount { font-size: 2rem; }
    }
    .pricing-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(109,40,217,.15) 0%, transparent 50%);
      opacity: 0;
      transition: opacity .35s;
      pointer-events: none;
    }
    .pricing-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(167,139,250,.5);
      box-shadow: 0 20px 40px -15px rgba(109,40,217,.4);
    }
    .pricing-card:hover::before { opacity: 1; }
    .pricing-card.popular {
      background: linear-gradient(180deg, rgba(109,40,217,.15) 0%, rgba(79,70,229,.08) 100%);
      border-color: #a78bfa;
      box-shadow: 0 15px 50px -15px rgba(109,40,217,.5);
      transform: translateY(-4px);
    }
    .pricing-card.popular:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 25px 60px -15px rgba(109,40,217,.7);
    }
    .pricing-badge {
      position: absolute;
      top: 0;
      transform: translateY(-50%);
      right: 16px;
      padding: .3rem .75rem;
      background: linear-gradient(135deg, #6d28d9, #7c3aed);
      color: white;
      font-size: .68rem;
      font-weight: 700;
      border-radius: 0 0 8px 8px;
      letter-spacing: .03em;
      box-shadow: 0 4px 14px rgba(109,40,217,.45);
      z-index: 2;
    }
    .pricing-badge.popular-badge {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #422006;
      box-shadow: 0 4px 12px rgba(251,191,36,.5);
    }
    .pricing-card > * { position: relative; z-index: 1; }
    .pricing-tokens {
      font-weight: 800;
      letter-spacing: -.03em;
      margin-bottom: .85rem;
      color: white;
    }
    .pricing-tokens small {
      font-size: .9rem;
      font-weight: 500;
      color: #94a3b8;
      margin-left: .25rem;
    }
    .pricing-price {
      display: flex;
      align-items: baseline;
      gap: .25rem;
      margin-bottom: .85rem;
    }
    .pricing-price .currency {
      font-size: .9rem;
      color: #cbd5e1;
      font-weight: 500;
    }
    .pricing-price .amount {
      font-weight: 800;
      letter-spacing: -.02em;
      color: white;
    }
    .pricing-desc {
      color: #94a3b8;
      font-size: .85rem;
      line-height: 1.5;
      margin-bottom: 1.25rem;
      flex: 1;
    }
    .pricing-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,.08);
      font-size: .75rem;
      color: #94a3b8;
    }
    .pricing-meta i { color: #a78bfa; margin-right: .3rem; }

    /* Landing footer */
    .landing-footer {
      text-align: center;
      padding: 2rem 1rem;
      border-top: 1px solid rgba(255,255,255,.06);
      color: #64748b;
      font-size: .85rem;
    }
    .footer-warranty-link {
      color: #a78bfa;
      text-decoration: none;
      transition: color .15s;
    }
    .footer-warranty-link:hover { color: #c4b5fd; text-decoration: underline; }

    /* Landing macOS topbar & bottom nav */
    .landing-topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100010;
      display: flex; align-items: center; gap: .75rem;
      padding: .55rem 1rem;
      background: rgba(20,20,24,.28);
      border-bottom: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(20px) saturate(140%);
    }
    .landing-topbar-brand {
      display: flex; align-items: center; gap: .65rem;
      color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
    }
    .landing-topbar-spacer { flex: 1; }
    .landing-topbar-link {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .35rem .75rem;
      color: rgba(255,255,255,.72);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px;
      text-decoration: none; font-size: .78rem; font-weight: 600;
      transition: all .15s;
    }
    .landing-topbar-link:hover { color: #fff; background: rgba(255,255,255,.08); }
    .landing-topbar-link.active { color: #fff; background: rgba(10,132,255,.35); border-color: rgba(10,132,255,.4); }

    .landing-bottom-nav {
      position: fixed; z-index: 100010; left: 50%; bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
      display: flex; gap: 6px; padding: 5px;
      transform: translateX(-50%);
      border: 1px solid rgba(255,255,255,.58); border-radius: 17px;
      background: rgba(238,238,242,.82); box-shadow: 0 12px 28px rgba(25,25,55,.25);
      backdrop-filter: blur(24px);
    }
    .landing-bottom-nav a {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-width: 58px; height: 46px; padding: 0 .75rem;
      color: #6e6e73; border-radius: 12px; text-decoration: none;
      font-size: .58rem; font-weight: 600;
      transition: all .15s;
    }
    .landing-bottom-nav a i { font-size: 1.15rem; margin-bottom: .1rem; }
    .landing-bottom-nav a span { color: #6e6e73; }
    .landing-bottom-nav a:nth-child(1) i { color: #1767d7; }
    .landing-bottom-nav a:nth-child(2) i { color: #209b60; }
    .landing-bottom-nav a:nth-child(3) i { color: #6355d9; }
    .landing-bottom-nav a:not(.active):hover { background: rgba(255,255,255,.55); }
    .landing-bottom-nav a.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(25,75,165,.27); }
    .landing-bottom-nav a.active i, .landing-bottom-nav a.active span { color: #fff; }
    .landing-bottom-nav a:nth-child(1).active { background: linear-gradient(145deg,#4c9cff,#1767d7); }
    .landing-bottom-nav a:nth-child(2).active { background: linear-gradient(145deg,#67c58b,#209b60); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(24,120,70,.27); }
    .landing-bottom-nav a:nth-child(3).active { background: linear-gradient(145deg,#9a8cff,#6355d9); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(80,65,190,.27); }

    /* Landing home refresh — macOS style */
    .landing-home { background:#241059 url('https://raw.githubusercontent.com/mhmdmhd6/Mac-OS-Desktop/master/background/iridescence.jpg') center / cover fixed no-repeat; color:#fff; padding-top:44px; padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
    .landing-home::before { top:-18rem; left:-12rem; width:42rem; height:42rem; background:radial-gradient(circle,rgba(10,132,255,.18),transparent 68%); animation:none; }
    .landing-home::after { right:-16rem; bottom:10%; width:36rem; height:36rem; background:radial-gradient(circle,rgba(94,92,230,.12),transparent 70%); animation:none; }
    .landing-home .landing-grid { opacity:.35; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
    .landing-home .landing-brand-name { color:#fff; font-size:1rem; }
    .landing-home .landing-hero { display:grid; grid-template-columns:1fr; gap:2rem; max-width:1180px; margin:0 auto; padding:3.25rem 1rem 2rem; text-align:left; }
    .landing-hero-copy { min-width:0; }
    .landing-home .landing-hero-chip { margin-bottom:1.25rem; padding:.4rem .8rem; color:#bfe9ff; background:rgba(10,132,255,.28); border-color:rgba(120,200,255,.5); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; backdrop-filter:blur(8px); }
    .landing-home .landing-hero-chip .dot { background:#30d158; box-shadow:0 0 10px rgba(48,209,88,.7); }
    .landing-home .landing-hero h1 { max-width:720px; margin-bottom:1rem; color:#fff; font-size:clamp(2.35rem,11vw,4.8rem); line-height:.98; letter-spacing:-.055em; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.45); }
    .landing-home .landing-hero h1 .accent { background:linear-gradient(110deg,#7fdbff,#a5a3ff); -webkit-background-clip:text; background-clip:text; }
    .landing-home .landing-hero p { max-width:620px; margin:0 0 1.5rem; color:rgba(255,255,255,.92); font-size:1rem; line-height:1.7; text-shadow:0 1px 12px rgba(0,0,0,.4); }
    .landing-home .landing-hero-cta { justify-content:flex-start; }
    .landing-home .landing-hero-cta .btn-cta { justify-content:center; width:100%; padding:.85rem 1.25rem; border-radius:.65rem; }
    .landing-home .btn-cta-primary { color:#fff; background:#0a84ff; box-shadow:0 12px 28px -14px rgba(10,132,255,.5); }
    .landing-home .btn-cta-primary:hover { color:#fff; background:#409cff; }
    .landing-secondary-link { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; width:100%; padding:.8rem 1rem; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.14); border-radius:.65rem; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); text-decoration:none; font-size:.9rem; font-weight:650; }
    .landing-secondary-link:hover { color:#fff; background:rgba(255,255,255,.14); }
    .landing-proof { display:flex; flex-wrap:wrap; gap:.65rem 1.1rem; margin-top:1.5rem; color:rgba(255,255,255,.85); font-size:.75rem; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.35); }
    .landing-proof span { display:inline-flex; align-items:center; gap:.35rem; }
    .landing-proof i { color:#30d158; }
    .landing-console { padding:0; overflow:hidden; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.6); border-radius:16px; box-shadow:0 24px 60px rgba(20,20,45,.28); backdrop-filter:blur(20px) saturate(140%); }
    .landing-console-bar { display:flex; align-items:center; gap:.45rem; padding:.55rem .6rem; border-bottom:1px solid rgba(60,60,67,.12); background:rgba(248,248,250,.8); }
    .landing-console-dot { width:10px; height:10px; border-radius:50%; }
    .landing-console-dot:nth-child(1) { background:#ff5f57; }
    .landing-console-dot:nth-child(2) { background:#febc2e; }
    .landing-console-dot:nth-child(3) { background:#28c840; }
    .landing-console-title { margin-left:auto; color:#6e6e73; font:500 .65rem 'JetBrains Mono',monospace; }
    .landing-console-body { padding:1rem; background:transparent; border:0; border-radius:0; }
    .landing-console-status { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
    .landing-console-status strong { color:#1d1d1f; font-size:.9rem; }
    .landing-live { display:inline-flex; align-items:center; gap:.35rem; color:#30d158; font-size:.68rem; font-weight:700; }
    .landing-live::before { content:''; width:6px; height:6px; border-radius:50%; background:#30d158; box-shadow:0 0 8px #30d158; }
    .landing-console-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
    .landing-console-stat { min-width:0; padding:.7rem .55rem; background:rgba(255,255,255,.6); border:1px solid rgba(60,60,67,.1); border-radius:.55rem; }
    .landing-console-stat small { display:block; margin-bottom:.25rem; color:#6e6e73; font-size:.58rem; text-transform:uppercase; }
    .landing-console-stat strong { display:block; overflow:hidden; color:#1d1d1f; font:700 .72rem 'JetBrains Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
    .landing-usage-label { display:flex; justify-content:space-between; margin-top:1rem; color:#6e6e73; font-size:.65rem; }
    .landing-usage-track { height:6px; margin-top:.45rem; overflow:hidden; background:rgba(60,60,67,.12); border-radius:999px; }
    .landing-usage-fill { width:68%; height:100%; background:linear-gradient(90deg,#0a84ff,#5e5ce6); border-radius:inherit; }
    .landing-home .landing-features { grid-template-columns:1fr; max-width:1180px; padding:2.5rem 1rem 0; }
    .landing-home .landing-feature { padding:1.15rem; text-align:left; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.6); border-radius:16px; box-shadow:0 10px 30px rgba(20,20,45,.18); backdrop-filter:blur(12px); }
    .landing-home .landing-feature i { margin-bottom:.8rem; color:#0a84ff; font-size:1.25rem; }
    .landing-home .landing-feature h3 { margin-bottom:.4rem; color:#1d1d1f; font-size:.9rem; }
    .landing-home .landing-feature p { color:#6e6e73; line-height:1.55; }
    .landing-buy-flow { max-width:1180px; margin:3.5rem auto 0; padding:0 1rem; }
    .landing-section-kicker { color:#7fdbff; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.35); }
    .landing-buy-flow h2,.landing-home .landing-pricing-header h2 { margin:.55rem 0 .65rem; color:#fff; font-size:clamp(1.65rem,7vw,2.6rem); letter-spacing:-.035em; text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.4); }
    .landing-section-copy { max-width:600px; color:rgba(255,255,255,.88); font-size:.9rem; line-height:1.65; text-shadow:0 1px 10px rgba(0,0,0,.35); }
    .landing-steps { display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1.5rem; }
    .landing-step { display:flex; gap:.85rem; padding:1rem; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.6); border-radius:16px; box-shadow:0 10px 30px rgba(20,20,45,.18); backdrop-filter:blur(12px); }
    .landing-step-num { display:grid; flex:0 0 30px; height:30px; place-items:center; color:#fff; background:#0a84ff; border-radius:.5rem; font:800 .72rem 'JetBrains Mono',monospace; }
    .landing-step strong { display:block; margin-bottom:.25rem; color:#1d1d1f; font-size:.85rem; }
    .landing-step p { margin:0; color:#6e6e73; font-size:.76rem; line-height:1.5; }
    .landing-home .landing-pricing { margin:4rem auto 2rem; padding:0 1rem 3rem; }
    .landing-home .landing-pricing-header { margin-bottom:1.5rem; text-align:left; }
    .landing-home .pricing-models { justify-content:flex-start; margin-top:1rem; }
    .landing-home .pricing-model-chip { color:#3a3a3d; background:rgba(255,255,255,.92); border-color:rgba(60,60,67,.16); }
     .landing-home .pricing-note { margin-top:1.25rem; color:rgba(255,255,255,.9); line-height:1.6; text-shadow:0 1px 10px rgba(0,0,0,.35); }
     .landing-home .pricing-note strong { color:#fff; }
    .landing-home .pricing-grid { gap:.75rem; }
    .landing-home .pricing-card { padding:1.15rem; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.6); border-radius:16px; box-shadow:0 10px 30px rgba(20,20,45,.18); backdrop-filter:blur(12px); }
    .landing-home .pricing-card::before { display:none; }
    .landing-home .pricing-card:hover { transform:translateY(-3px); border-color:rgba(10,132,255,.4); box-shadow:0 18px 35px -25px rgba(10,132,255,.5); }
    .landing-home .pricing-card.popular { background:rgba(255,255,255,.85); border-color:#0a84ff; box-shadow:0 14px 35px -28px rgba(10,132,255,.6); transform:none; }
    .landing-home .pricing-card.popular:hover { transform:translateY(-3px); }
    .landing-home .pricing-badge { top:.7rem; right:.7rem; transform:none; padding:.25rem .55rem; color:#1d1d1f; background:#ffd60a; border-radius:999px; box-shadow:none; }
    .landing-home .pricing-tokens { margin-bottom:.55rem; color:#1d1d1f; font-size:1.5rem; }
    .landing-home .pricing-tokens small { color:#515156; font-size:.72rem; }
    .landing-home .pricing-price { margin-bottom:.65rem; }
    .landing-home .pricing-price .currency { color:#515156; }
    .landing-home .pricing-price .amount { color:#0072db; font-size:1.5rem; }
    .landing-home .pricing-desc { margin-bottom:1rem; color:#515156; font-size:.78rem; }
    .landing-home .pricing-meta { color:#515156; border-color:rgba(60,60,67,.12); }
    .landing-home .pricing-meta i { color:#0a84ff; }
    .landing-reseller-note { margin-top:1.25rem; padding:.9rem 1rem; color:#1d1d1f; background:rgba(255,255,255,.88); border:1px solid rgba(230,168,0,.45); border-radius:.7rem; font-size:.78rem; line-height:1.55; backdrop-filter:blur(12px); box-shadow:0 4px 14px rgba(230,168,0,.15); }
    .landing-reseller-note i { margin-right:.4rem; color:#d97706; }
    .landing-reseller-note strong { color:#1d1d1f; font-weight:700; }
    .landing-home .landing-footer { border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.8); text-shadow:0 1px 8px rgba(0,0,0,.35); }
    .landing-home .footer-warranty-link { color:#7fdbff; font-weight:600; }
    @media (min-width:480px) { .landing-home .landing-hero-cta .btn-cta,.landing-secondary-link { width:auto; } .landing-home .landing-features { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (min-width:768px) { .landing-home .landing-nav { padding:1.25rem 2rem; } .landing-home .landing-hero { padding:5.5rem 2rem 3rem; } .landing-home .landing-features { padding:3.5rem 2rem 0; grid-template-columns:repeat(4,minmax(0,1fr)); } .landing-buy-flow { padding:0 2rem; margin-top:5rem; } .landing-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } .landing-home .landing-pricing { padding:0 2rem 5rem; margin-top:6rem; } }
    @media (min-width:992px) { .landing-home .landing-hero { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); align-items:center; gap:4rem; } .landing-console { transform:rotate(1.5deg); } }
    @media (prefers-reduced-motion:reduce) { .landing-home *,.landing-home *::before,.landing-home *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

    /* Landing home — compact & elegant mobile */
    @media (max-width:767px) {
      .landing-home .landing-hero { gap:1.25rem; padding:1.75rem 1.15rem 1rem; }
      .landing-home .landing-hero-chip { margin-bottom:.85rem; padding:.32rem .7rem; font-size:.66rem; }
      .landing-home .landing-hero h1 { margin-bottom:.7rem; font-size:clamp(2rem,9.5vw,2.9rem); line-height:1.02; }
      .landing-home .landing-hero p { margin:0 0 1.15rem; font-size:.88rem; line-height:1.55; }
      .landing-home .landing-hero-cta { gap:.6rem; }
      .landing-home .landing-hero-cta .btn-cta { padding:.72rem 1.1rem; font-size:.88rem; }
      .landing-secondary-link { padding:.7rem 1rem; font-size:.85rem; }
      .landing-proof { gap:.4rem .9rem; margin-top:1.1rem; font-size:.72rem; }
      .landing-console-body { padding:.8rem; }
      .landing-console-status { margin-bottom:.85rem; }
      .landing-home .landing-features { gap:.6rem; padding:1.75rem 1.15rem 0; }
      .landing-home .landing-feature { padding:.9rem; border-radius:14px; }
      .landing-home .landing-feature i { margin-bottom:.5rem; font-size:1.15rem; }
      .landing-home .landing-feature h3 { margin-bottom:.25rem; font-size:.86rem; }
      .landing-home .landing-feature p { font-size:.75rem; line-height:1.45; }
      .landing-buy-flow { margin-top:2.25rem; padding:0 1.15rem; }
      .landing-section-kicker { font-size:.64rem; }
      .landing-buy-flow h2,.landing-home .landing-pricing-header h2 { margin:.4rem 0 .5rem; font-size:clamp(1.45rem,6.5vw,1.9rem); }
      .landing-section-copy { font-size:.84rem; line-height:1.55; }
      .landing-steps { gap:.55rem; margin-top:1.1rem; }
      .landing-step { padding:.85rem; border-radius:14px; }
      .landing-step-num { flex:0 0 27px; height:27px; font-size:.68rem; }
      .landing-step strong { font-size:.83rem; }
      .landing-step p { font-size:.74rem; line-height:1.45; }
      .landing-home .landing-pricing { margin-top:2.5rem; padding:0 1.15rem 2rem; }
      .landing-home .landing-pricing-header { margin-bottom:1.1rem; }
      .landing-home .pricing-models { gap:.4rem; margin-top:.85rem; }
      .landing-home .pricing-model-chip { padding:.25rem .6rem; font-size:.68rem; }
      .landing-home .pricing-note { margin-top:1rem; font-size:.78rem; }
      .landing-home .pricing-grid { gap:.6rem; }
      .landing-home .pricing-card { padding:1rem; border-radius:14px; }
      .landing-home .pricing-tokens { margin-bottom:.4rem; font-size:1.35rem; }
      .landing-home .pricing-price .amount { font-size:1.35rem; }
      .landing-home .pricing-desc { margin-bottom:.75rem; font-size:.76rem; }
      .landing-reseller-note { margin-top:1rem; padding:.75rem .9rem; font-size:.76rem; }
      .landing-home .landing-footer { padding:1.25rem 1rem; font-size:.74rem; }
    }

    /* ===== Landing v2 (.lp) — clean / professional / animated ===== */
    .lp {
      position: relative; min-height: 100vh; color: #fff; overflow: hidden;
      display: flex; flex-direction: column;
      padding-top: 0; padding-bottom: 0;
      background:
        radial-gradient(1200px 600px at 70% -10%, rgba(91,140,255,.22), transparent 60%),
        radial-gradient(900px 520px at 0% 18%, rgba(167,139,250,.18), transparent 60%),
        linear-gradient(180deg, #0b1020 0%, #0a0e1f 60%, #070b18 100%);
    }
    .lp.landing::before, .lp.landing::after { content: none; }
    .lp > * { position: relative; z-index: 2; }
    .lp > .lp-aurora, .lp > .lp-grid { z-index: 0; pointer-events: none; }

    .lp .landing-topbar {
      position: sticky;
      top: 0;
      height: 44px;
      box-sizing: border-box;
      padding: .24rem .9rem;
      background: rgba(10,14,28,.72);
      border-bottom-color: rgba(255,255,255,.08);
    }
    .lp .landing-topbar-brand { font-size: .88rem; }

    .lp-aurora { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; }
    .lp-aurora-a { top: -8rem; left: -6rem; width: 28rem; height: 28rem; background: radial-gradient(circle, rgba(10,132,255,.5), transparent 68%); animation: lp-drift 16s ease-in-out infinite alternate; }
    .lp-aurora-b { bottom: -7rem; right: -6rem; width: 26rem; height: 26rem; background: radial-gradient(circle, rgba(139,92,246,.45), transparent 68%); animation: lp-drift 20s ease-in-out infinite alternate-reverse; }
    @keyframes lp-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px,-30px) scale(1.12); } }

    .lp-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
      -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
    }

    .lp .lp-nav-links { display: none; }

    .lp-grad {
      background: linear-gradient(110deg, #7fdbff 0%, #a5a3ff 55%, #c4b5fd 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }

    .lp-chip {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .38rem .8rem; border-radius: 999px;
      background: rgba(10,132,255,.16); border: 1px solid rgba(127,219,255,.32);
      color: #bfe9ff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      backdrop-filter: blur(8px); margin-bottom: .75rem;
    }
    .lp-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 10px rgba(48,209,88,.8); animation: lp-pulse 2s infinite; }
    @keyframes lp-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }

    .lp-hero { max-width: 1180px; margin: 0 auto; padding: .75rem 1.15rem .5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; box-sizing: border-box; }
    .lp-hero-copy { min-width: 0; }
    .lp-hero h1 {
      margin: 0 0 .7rem; max-width: 640px; font-weight: 850;
      font-size: clamp(2.1rem, 8vw, 4rem); line-height: .96; letter-spacing: -.055em;
      text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.4);
    }
    .lp-hero p { max-width: 520px; margin: 0 0 1rem; font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.78); }
    .lp-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
    .lp-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      padding: .82rem 1.3rem; border-radius: .7rem; font-weight: 650; font-size: .92rem;
      text-decoration: none; cursor: pointer; border: 1px solid transparent;
      transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
    }
    .lp-btn-primary { color: #fff; background: linear-gradient(135deg, #4c9cff, #5b8cff 55%, #7c6cff); box-shadow: 0 12px 30px -12px rgba(91,140,255,.7); }
    .lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(91,140,255,.9); }
    .lp-btn-ghost { color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); backdrop-filter: blur(10px); }
    .lp-btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
    .lp-proof { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .9rem; font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.82); }
    .lp-proof i { color: #30d158; }

    .lp-visual { display: flex; justify-content: center; }
    .lp-console {
      position: relative; width: 100%; max-width: 380px; overflow: hidden; border-radius: 18px;
      background: rgba(13,17,32,.72); border: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter: blur(20px) saturate(140%); animation: lp-float 6s ease-in-out infinite;
    }
    @keyframes lp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .lp-console-bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .7rem; border-bottom: 1px solid rgba(255,255,255,.07); }
    .lp-dot { width: 10px; height: 10px; border-radius: 50%; }
    .lp-dot:nth-child(1) { background: #ff5f57; } .lp-dot:nth-child(2) { background: #febc2e; } .lp-dot:nth-child(3) { background: #28c840; }
    .lp-console-title { margin-left: auto; color: rgba(255,255,255,.4); font: 500 .62rem 'JetBrains Mono', ui-monospace, monospace; }
    .lp-console-body { padding: .85rem; }
    .lp-console-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .lp-console-status strong { font-size: .82rem; color: #fff; }
    .lp-live { display: inline-flex; align-items: center; gap: .3rem; color: #30d158; font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
    .lp-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; animation: lp-pulse 2s infinite; }
    .lp-console-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
    .lp-stat { min-width: 0; padding: .6rem .5rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: .55rem; }
    .lp-stat small { display: block; margin-bottom: .2rem; color: rgba(255,255,255,.45); font-size: .54rem; text-transform: uppercase; letter-spacing: .04em; }
    .lp-stat strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font: 700 .68rem 'JetBrains Mono', ui-monospace, monospace; }
    .lp-usage-label { display: flex; justify-content: space-between; margin-top: 1rem; color: rgba(255,255,255,.5); font-size: .62rem; }
    .lp-usage-track { height: 6px; margin-top: .4rem; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 999px; }
    .lp-usage-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4c9cff, #7c6cff); animation: lp-bar 1.6s cubic-bezier(.2,.8,.2,1) .4s forwards; }
    @keyframes lp-bar { to { width: 68%; } }
    .lp-route { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .5rem .6rem; border: 1px solid rgba(127,219,255,.15); border-radius: .55rem; background: rgba(127,219,255,.05); color: rgba(255,255,255,.65); font: 600 .61rem 'JetBrains Mono', ui-monospace, monospace; }
    .lp-route-node { width: 7px; height: 7px; border-radius: 50%; background: #7fdbff; box-shadow: 0 0 10px #7fdbff; }
    .lp-route-line { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(127,219,255,.2); }
    .lp-route-line::after { content: ''; position: absolute; width: 30%; height: 100%; background: #7fdbff; box-shadow: 0 0 8px #7fdbff; animation: lp-route 1.8s linear infinite; }
    @keyframes lp-route { from { transform: translateX(-120%); } to { transform: translateX(420%); } }

    .lp-models { max-width: 1180px; margin: 1.15rem auto 0; padding: 0 1.15rem; }
    .lp-models-label { display: block; margin-bottom: .45rem; color: rgba(255,255,255,.42); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
    .lp-model-table-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); backdrop-filter: blur(12px); }
    .lp-model-table { --bs-table-color: rgba(255,255,255,.85); --bs-table-bg: transparent; --bs-table-border-color: rgba(255,255,255,.08); --bs-table-accent-bg: transparent; width: 100%; margin: 0; color: rgba(255,255,255,.85); font-size: .74rem; }
    .lp-model-table > :not(caption) > * > * { color: inherit; background-color: transparent; box-shadow: none; }
    .lp-model-table th { padding: .42rem .6rem; color: rgba(255,255,255,.45); background: rgba(0,0,0,.14) !important; border-color: rgba(255,255,255,.08); font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .lp-model-table td { height: auto; padding: .46rem .6rem; vertical-align: middle; border-color: rgba(255,255,255,.08); }
    .lp-model-table tbody tr:last-child td { border-bottom: 0; }
    .lp-model-name { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
    .lp-model-name > i { color: #7fdbff; }
    .lp-model-status { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .45rem; border-radius: 999px; font-size: .62rem; font-weight: 800; }
    .lp-model-status.available { color: #9aebae; background: rgba(48,209,88,.14); }
    .lp-model-status.oos { color: #ffaaa4; background: rgba(255,95,87,.14); }
    .lp-vision { color: #7fdbff; font-size: .95rem; }
    .lp-no-vision { color: rgba(255,255,255,.25); font-size: .85rem; }
    .lp-pricing-table { font-size: .72rem; }
    .lp-pricing-table th { padding: .48rem .65rem; }
    .lp-pricing-table td { padding: .56rem .65rem; white-space: nowrap; }
    .lp-pricing-table .lp-pricing-package { min-width: 100px; color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
    .lp-pricing-table .lp-pricing-package small { display: block; margin-top: .12rem; color: rgba(255,255,255,.45); font-size: .62rem; font-weight: 600; letter-spacing: .02em; }
    .lp-pricing-table .lp-pricing-price { color: #7fdbff; font-size: .82rem; font-weight: 800; }
    .lp-pricing-table .lp-pricing-price span { color: rgba(255,255,255,.48); font-size: .66rem; font-weight: 700; }
    .lp-pricing-table .lp-pricing-validity { color: rgba(255,255,255,.72); }
    .lp-pricing-table .lp-pricing-validity i { color: #a5a3ff; }
    .lp-pricing-table .lp-pricing-unit { color: rgba(255,255,255,.68); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; }
    .lp-pricing-table .lp-pricing-description { max-width: 310px; color: rgba(255,255,255,.56); white-space: normal; line-height: 1.45; }
    .lp-pricing-table .lp-pricing-popular td { background: linear-gradient(90deg, rgba(91,140,255,.15), rgba(124,108,255,.06)) !important; }
    .lp-pricing-table .lp-pricing-popular td:first-child { box-shadow: inset 3px 0 0 #7fdbff; }

    /* Element Plus landing tables (glass dark) — overrides theme.css density */
    .lp-el-table { --el-table-border-color: rgba(255,255,255,.08); --el-table-tr-bg-color: transparent; --el-table-header-bg-color: rgba(0,0,0,.14); --el-table-row-hover-bg-color: rgba(255,255,255,.05); --el-table-bg-color: transparent; --el-table-text-color: rgba(255,255,255,.85); --el-table-header-text-color: rgba(255,255,255,.45); background: transparent !important; }
    .lp-el-table .el-table__inner-wrapper, .lp-el-table .el-table__body-wrapper, .lp-el-table .el-scrollbar__view, .lp-el-table .el-table__empty-block { background: transparent !important; }
    .lp-el-table .el-table__cell { background-color: transparent !important; border-color: rgba(255,255,255,.08) !important; }
    .lp-el-table .el-table__header-wrapper th.el-table__cell { background: rgba(0,0,0,.14) !important; color: rgba(255,255,255,.45) !important; font-size: .56rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .42rem .6rem !important; height: auto !important; }
    .lp-el-table .el-table__cell .cell { font-size: .74rem !important; line-height: 1.45; padding: 0 .6rem !important; }
    .lp-el-table td.el-table__cell { padding: .46rem 0 !important; }
    .lp-el-table tbody tr:last-child td.el-table__cell { border-bottom: 0 !important; }
    .lp-el-table .el-table__empty-text { color: rgba(255,255,255,.45); }
    .lp-el-table.lp-pricing-table td.el-table__cell .cell { font-size: .72rem !important; white-space: nowrap; }
    .lp-el-table.lp-pricing-table .el-table__cell .cell { padding: .56rem .65rem !important; }
    @media (max-width: 767px) {
      .lp-pricing-table .lp-pricing-package { min-width: 0; font-size: .84rem; }
      .lp-pricing-table .lp-pricing-price { font-size: .8rem; }
    }

    .lp-features { max-width: 1180px; margin: 1rem auto 0; padding: 0 1.15rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
    .lp-feature { padding: .7rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); transition: transform .25s, border-color .25s, box-shadow .25s, background .25s; }
    .lp-feature:hover { transform: translateY(-4px); border-color: rgba(127,219,255,.35); background: rgba(255,255,255,.06); box-shadow: 0 18px 40px -20px rgba(91,140,255,.5); }
    .lp-feature-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; margin-bottom: .45rem; background: linear-gradient(135deg, rgba(76,156,255,.25), rgba(124,108,255,.25)); border: 1px solid rgba(127,219,255,.25); }
    .lp-feature-ico i { color: #7fdbff; font-size: .85rem; }
    .lp-feature h3 { margin: 0 0 .18rem; font-size: .75rem; }
    .lp-feature p { margin: 0; color: rgba(255,255,255,.62); font-size: .66rem; line-height: 1.4; }

    .lp-section-head { max-width: 760px; margin: 0 auto .85rem; text-align: center; }
    .lp-kicker { color: #7fdbff; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .lp-section-head h2 { margin: .35rem 0; font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 850; letter-spacing: -.035em; text-wrap: balance; }
    .lp-section-copy { color: rgba(255,255,255,.7); font-size: .82rem; line-height: 1.5; margin: 0; }

    .lp-steps-section { max-width: 1180px; margin: 4rem auto 0; padding: 0 1.15rem; }
    .lp-steps { display: grid; grid-template-columns: 1fr; gap: .7rem; margin-top: 1.6rem; }
    .lp-step { display: flex; gap: .85rem; padding: 1rem; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); transition: transform .25s, border-color .25s; }
    .lp-step:hover { transform: translateY(-3px); border-color: rgba(167,139,250,.35); }
    .lp-step-num { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: .55rem; color: #fff; font: 800 .74rem 'JetBrains Mono', ui-monospace, monospace; background: linear-gradient(135deg, #4c9cff, #7c6cff); }
    .lp-step strong { display: block; margin-bottom: .2rem; font-size: .88rem; }
    .lp-step p { margin: 0; color: rgba(255,255,255,.62); font-size: .78rem; line-height: 1.5; }

    .lp-warranty { max-width: 1180px; margin: 4rem auto 0; padding: 0 1.15rem; }
    .lp-warranty-panel { display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid rgba(127,219,255,.2); border-radius: 18px; background: linear-gradient(135deg, rgba(91,140,255,.14), rgba(124,108,255,.08)); backdrop-filter: blur(14px); }
    .lp-warranty-copy h2 { margin: .45rem 0; font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 850; letter-spacing: -.035em; }
    .lp-warranty-copy p { max-width: 520px; margin: 0; color: rgba(255,255,255,.72); font-size: .86rem; line-height: 1.6; }
    .lp-warranty-rate { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; color: #bfe9ff; font-size: .76rem; font-weight: 700; }
    .lp-warranty-rate i { color: #30d158; }
    .lp-refund-card { padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(7,11,24,.42); }
    .lp-refund-card label { display: block; margin-bottom: .45rem; color: rgba(255,255,255,.66); font-size: .72rem; font-weight: 700; }
    .lp-refund-input { color: #fff !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; font-weight: 700; }
    .lp-refund-input:focus { box-shadow: 0 0 0 .2rem rgba(91,140,255,.2); }
    .lp-refund-card .input-group-text { color: #bfe9ff; background: rgba(91,140,255,.18); border-color: rgba(255,255,255,.14); font-weight: 700; }
    .lp-refund-result { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.1); }
    .lp-refund-result small { display: block; color: rgba(255,255,255,.55); font-size: .68rem; }
    .lp-refund-result strong { display: block; margin-top: .15rem; color: #7fdbff; font-size: 1.7rem; letter-spacing: -.04em; }
    .lp-refund-formula { margin-top: .35rem; color: rgba(255,255,255,.55); font-size: .68rem; }
    .lp-warranty-link { display: inline-block; margin-top: .85rem; color: #bfe9ff; font-size: .78rem; font-weight: 700; text-decoration: none; }
    .lp-warranty-link:hover { color: #fff; text-decoration: underline; }

    .lp-pricing { max-width: 1180px; margin: 1.5rem auto 0; padding: 0 1.15rem; }
    .lp-pricing-models { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 1rem; }
    .lp-loading { display: flex; justify-content: center; padding: 3rem 0; }
    .lp-loading .spinner-border { color: #5b8cff; }
    .lp-cards { display: grid; grid-template-columns: 1fr; gap: .7rem; }
    .lp-card { position: relative; padding: 1.2rem; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
    .lp-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(127,219,255,.5), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
    .lp-card:hover { transform: translateY(-6px); border-color: rgba(127,219,255,.4); box-shadow: 0 24px 50px -24px rgba(91,140,255,.55); }
    .lp-card:hover::after { opacity: 1; }
    .lp-card.popular { border-color: rgba(127,219,255,.5); background: linear-gradient(180deg, rgba(91,140,255,.12), rgba(124,108,255,.05)); box-shadow: 0 18px 50px -24px rgba(91,140,255,.5); }
    .lp-card.popular::after { opacity: .55; }
    .lp-card-tokens { font-weight: 850; letter-spacing: -.03em; font-size: 1.5rem; margin-bottom: .55rem; }
    .lp-card-tokens small { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.5); margin-left: .25rem; }
    .lp-card-price { display: flex; align-items: baseline; gap: .25rem; margin-bottom: .7rem; }
    .lp-card-price .cur { font-size: .85rem; color: rgba(255,255,255,.55); }
    .lp-card-price .amt { font-size: 1.6rem; font-weight: 850; letter-spacing: -.02em; color: #7fdbff; }
    .lp-card-desc { color: rgba(255,255,255,.6); font-size: .8rem; line-height: 1.5; margin-bottom: 1rem; }
    .lp-card-meta { display: flex; justify-content: space-between; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: rgba(255,255,255,.55); }
    .lp-card-meta i { color: #5b8cff; margin-right: .25rem; }
    .lp-reseller-note { margin-top: 1.3rem; padding: .9rem 1rem; border-radius: .8rem; background: rgba(255,214,10,.07); border: 1px solid rgba(255,214,10,.25); font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.85); backdrop-filter: blur(10px); }
    .lp-reseller-note i { color: #ffd60a; margin-right: .4rem; }
    .lp-reseller-note strong { color: #fff; }

    .lp-cta { max-width: 1180px; margin: 4rem auto 0; padding: 0 1.15rem; }
    .lp-cta-inner { position: relative; text-align: center; padding: 2.4rem 1.2rem; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, rgba(91,140,255,.14), rgba(124,108,255,.1)); border: 1px solid rgba(127,219,255,.22); backdrop-filter: blur(14px); }
    .lp-cta-inner::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from 180deg, rgba(127,219,255,.35), rgba(167,139,250,.35), rgba(127,219,255,.35)); filter: blur(24px); opacity: .5; z-index: -1; }
    .lp-cta-inner h2 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 850; letter-spacing: -.03em; }
    .lp-cta-inner p { margin: 0 0 1.2rem; color: rgba(255,255,255,.75); font-size: .92rem; }

    .lp-footer { max-width: 1180px; width: 100%; box-sizing: border-box; margin: 2.5rem auto 0; padding: 1.1rem 1.15rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; color: rgba(255,255,255,.5); font-size: .78rem; }
    .lp-footer-link { color: #7fdbff; text-decoration: none; font-weight: 600; }
    .lp-footer-link:hover { text-decoration: underline; }

    .lp .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); will-change: opacity, transform; }
    .lp .reveal.is-visible { opacity: 1; transform: none; }

    @media (min-width: 480px) {
      .lp-features { grid-template-columns: repeat(2, 1fr); }
      .lp-cards { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 768px) {
      .lp .lp-nav-links { display: flex; gap: .4rem; }
      .lp-hero { padding: 1.15rem 2rem .75rem; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); align-items: center; gap: 2.5rem; }
      .lp-visual { justify-content: flex-end; }
      .lp-console { max-width: none; }
      .lp-models { padding: 0 2rem; }
      .lp-features { grid-template-columns: repeat(4, 1fr); padding: 0 2rem; gap: 1rem; }
      .lp-steps-section { padding: 0 2rem; }
      .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
      .lp-warranty { padding: 0 2rem; }
      .lp-warranty-panel { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: center; padding: 1.5rem; }
      .lp-pricing { padding: 0 2rem; }
      .lp-cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
      .lp-cta { padding: 0 2rem; }
      .lp-footer { padding: 1.1rem 2rem; }
    }
    @media (min-width: 1200px) { .lp-cards { grid-template-columns: repeat(4, 1fr); } }
    @media (prefers-reduced-motion: reduce) {
      .lp *, .lp *::before, .lp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .lp .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* ===== Landing compact (.lp-compact) — satu layar tanpa scroll ===== */
    .lp-compact {
      min-height: 100vh; height: 100vh; max-height: 100vh;
      height: 100dvh; max-height: 100dvh;
      overflow: hidden; padding: 0;
      display: flex; flex-direction: column;
    }
    .lp-main {
      flex: 1 1 auto; min-height: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: clamp(.5rem, 1.6vh, 1rem);
      padding: 1.5rem clamp(2.5rem, 9vw, 4.5rem) 1.5rem;
      max-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box;
    }

    /* Hero — ringkas, tanpa CTA/proof */
    .lp-compact .lp-hero {
      flex: 0 0 auto; text-align: center; padding: 0;
      display: block; grid-template-columns: none; margin: 0; max-width: 640px;
    }
    .lp-compact .lp-chip {
      margin-bottom: .5rem; padding: .42rem .9rem;
      box-shadow: 0 4px 18px rgba(0,170,19,.16);
    }
    .lp-compact .lp-hero h1 {
      font-size: clamp(1.5rem, 3.4vw, 2.6rem); margin: 0 0 .4rem; line-height: 1.02;
      letter-spacing: -.04em;
    }
    .lp-compact .lp-hero p {
      font-size: clamp(.76rem, 1.2vw, .9rem); margin: 0 auto; max-width: 480px; line-height: 1.55;
    }

    /* Infra simulation panel — Client → OurProxy → RouterProxy → providers vertical */
    .lp-infra {
      position: relative; flex: 0 0 auto; width: 100%; max-width: 740px; padding: .8rem 1rem .8rem;
      border-radius: 18px;
      background: linear-gradient(165deg, #ffffff, #F0FBF3 55%, #E8F8EC);
      border: 1px solid rgba(0,170,19,.18);
      box-shadow: 0 22px 55px -28px rgba(0,138,17,.28), inset 0 1px 0 rgba(255,255,255,.9);
    }
    .lp-infra::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(420px 180px at 18% -12%, rgba(0,170,19,.12), transparent 70%),
                  radial-gradient(420px 180px at 92% 125%, rgba(124,108,255,.1), transparent 70%);
    }
    .lp-infra-head { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
    .lp-infra-title { display: flex; align-items: center; gap: .4rem; color: #2D6A3B; font: 700 .64rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
    .lp-infra-title i { color: #00AA13; }
    .lp-infra-live { margin-left: auto; display: inline-flex; align-items: center; gap: .32rem; color: #008A11; font: 700 .58rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; }
    .lp-infra-live i { font-size: .42rem; color: #00AA13; animation: lp-pulse 1.6s infinite; }
    .lp-infra-flow { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; }
    .lp-node {
      flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .22rem; padding: .42rem .68rem; border-radius: 12px;
      background: #fff; border: 1px solid #E4EBE6;
      color: #1A1A1A; font-size: .66rem; font-weight: 700; text-align: center;
      box-shadow: 0 2px 8px rgba(0,138,17,.08);
      transition: border-color .3s, box-shadow .3s, background .3s, transform .3s;
    }
    .lp-node-ico {
      width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
      background: #F4FBF5; border: 1px solid #E4EBE6;
    }
    .lp-node-ico i { font-size: .85rem; line-height: 1; }
    .lp-node small { display: block; color: #8AA08F; font-size: .52rem; font-weight: 600; }
    .lp-node.active {
      border-color: #00AA13; background: #F0FDF4;
      box-shadow: 0 0 0 3px rgba(0,170,19,.15), 0 8px 22px rgba(0,138,17,.2);
      transform: translateY(-2px) scale(1.04);
    }
    .lp-node.active .lp-node-ico { background: #E8F8EC; border-color: rgba(0,170,19,.45); }
    .lp-node-client .lp-node-ico { color: #16A34A; }
    .lp-node-proxy .lp-node-ico { color: #D97706; }
    .lp-node-router .lp-node-ico { color: #DC6803; }
    .lp-node-provider .lp-node-ico { color: #2563EB; }
    .lp-pipe {
      position: relative; flex: 1 1 auto; height: 3px; min-width: 20px; overflow: hidden;
      background: #E4EBE6; border-radius: 999px;
    }
    .lp-pipe.active { background: linear-gradient(90deg, rgba(0,170,19,.15), rgba(0,170,19,.5)); }
    .lp-pipe-last { max-width: 60px; }
    .lp-packet {
      position: absolute; top: 50%; left: -14px; width: 10px; height: 10px; margin-top: -5px;
      border-radius: 50%; background: #00AA13; box-shadow: 0 0 10px rgba(0,170,19,.7), 0 0 20px rgba(0,170,19,.35); opacity: 0;
    }
    .lp-packet.travel { animation: lp-packet 650ms linear forwards; opacity: 1; }
    @keyframes lp-packet {
      0% { left: -14px; }
      100% { left: calc(100% + 14px); }
    }
    .lp-providers-stack { display: flex; flex-direction: column; gap: .35rem; }
    .lp-providers-stack .lp-node { flex: 0 0 auto; }
    .lp-providers-stack .lp-node span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .lp-providers-stack .lp-node:nth-child(1) .lp-node-ico { color: #0284C7; }
    .lp-providers-stack .lp-node:nth-child(2) .lp-node-ico { color: #7C3AED; }
    .lp-providers-stack .lp-node:nth-child(3) .lp-node-ico { color: #16A34A; }
    .lp-infra-legend { position: relative; z-index: 1; display: flex; align-items: center; gap: .4rem; margin-top: .7rem; color: #6B7280; font-size: .6rem; }
    .lp-legend-ping { width: 7px; height: 7px; border-radius: 50%; background: #00AA13; box-shadow: 0 0 8px rgba(0,170,19,.7); animation: lp-pulse 1.6s infinite; }

    /* Model marquee strip */
    .lp-model-strip { flex: 0 0 auto; width: 100%; max-width: 1280px; }
    .lp-model-strip-label { display: flex; align-items: center; gap: .4rem; margin: 0 auto .45rem; max-width: 1280px; padding: 0 clamp(2.5rem, 9vw, 4.5rem); color: #6B7280; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
    .lp-model-strip-label i { color: #00AA13; }
    .lp-model-marquee {
      overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      padding: .2rem 0;
    }
    .lp-model-track { display: flex; gap: .7rem; animation: lp-marquee linear infinite; will-change: transform; }
    @keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
    .lp-model-chip {
      flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
      padding: .42rem .9rem .42rem .5rem; border-radius: 999px; white-space: nowrap;
      background: #fff; border: 1px solid #E8ECF1;
      color: #1A1A1A; font-size: .74rem; font-weight: 700;
      box-shadow: 0 3px 14px rgba(17,24,39,.08), inset 0 1px 0 #fff;
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }
    .lp-model-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(17,24,39,.14); border-color: color-mix(in srgb, var(--chip) 45%, #E8ECF1); }
    .lp-model-chip-ico {
      width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
      background: color-mix(in srgb, var(--chip) 14%, #fff);
      color: var(--chip);
    }
    .lp-model-chip-ico i { font-size: .72rem; line-height: 1; }
    .lp-model-chip .lp-vision { color: var(--chip); font-size: .7rem; }

    @media (max-width: 767px) {
      .lp-main { gap: .5rem; padding: 1.25rem 1.75rem 1.25rem; justify-content: center; }
      .lp-compact .lp-hero h1 { font-size: clamp(1.35rem, 5.6vw, 2rem); }
      .lp-compact .lp-hero p { font-size: .76rem; }
      .lp-infra { padding: .65rem .7rem .7rem; }
      .lp-infra-flow { gap: .32rem; }
      .lp-node { padding: .3rem .5rem; font-size: .58rem; }
      .lp-node-ico { width: 22px; height: 22px; }
      .lp-node-ico i { font-size: .72rem; }
      .lp-pipe-last { max-width: 36px; }
      .lp-model-strip { padding-bottom: .3rem; }
    }
    @media (min-width: 768px) {
      .lp-compact .lp-hero { grid-template-columns: none; }
    }
    @media (max-height: 620px) and (max-width: 767px) {
      .lp-compact .lp-infra { display: none; }
    }

    /* Warranty Page — macOS style */
    .warranty-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 1.25rem;
    }
    @media (min-width: 768px) { .warranty-container { padding: 0 2rem; } }

    .warranty-hero {
      padding: 1.25rem 0 .75rem;
      text-align: center;
    }
    @media (min-width: 768px) { .warranty-hero { padding: 2rem 0 1rem; } }

    /* --- Invitation Page --- */
    .invitation-page {
      min-height: 100dvh; display: grid; place-items: center; padding: 1rem;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
    }
    .invitation-card {
      width: min(100%, 420px); background: #fff; border-radius: 20px; padding: 1.75rem 1.5rem;
      box-shadow: 0 20px 60px rgba(0,138,17,.18); text-align: center;
    }
     /* --- BrandLogo: dynamic text badge (webconfig.json per-domain brand) --- */
     .brand-logo {
       display: inline-grid;
       place-items: center;
       flex: 0 0 auto;
       border-radius: 26%;
       background: linear-gradient(135deg, #00AA13, #008A11);
       color: #fff;
       font-weight: 700;
       line-height: 1;
       letter-spacing: -0.02em;
       user-select: none;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
       box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
     }
    .invitation-title { font-size: 1.3rem; font-weight: 800; color: #1A1A1A; margin-bottom: .25rem; }
    .invitation-subtitle { font-size: .85rem; color: #6B7280; margin-bottom: 1.25rem; }
    .invitation-loading, .invitation-error { padding: 2rem 0; }
    .invitation-body { display: flex; flex-direction: column; align-items: center; }
    .invitation-instruction { font-size: .82rem; color: #6B7280; margin-bottom: .5rem; }
    .invitation-code-box {
      display: flex; align-items: center; gap: .5rem; background: #f0fdf4; border: 2px dashed #00AA13;
      border-radius: 16px; padding: .75rem 1rem; margin-bottom: .5rem;
    }
    .invitation-code {
      font-size: 2rem; font-weight: 800; letter-spacing: .5rem; color: #008A11;
      font-family: 'SF Mono', 'Monaco', monospace;
    }
    .invitation-copy-btn {
      width: 36px; height: 36px; border: 0; border-radius: 10px; background: #fff;
      cursor: pointer; display: grid; place-items: center; font-size: 1.1rem;
      box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .15s ease;
    }
    .invitation-copy-btn:hover { transform: scale(1.08); }
    .invitation-copy-btn:active { transform: scale(.95); }
    .invitation-hint { font-size: .75rem; color: #9CA3AF; margin-bottom: 1.25rem; }
    .invitation-actions { width: 100%; }
    .invitation-wa-btn, .invitation-tg-btn { border-radius: 999px; font-weight: 700; font-size: .9rem; }
    .invitation-note { margin-top: 1.25rem; padding: .6rem; background: #f8fafc; border-radius: 10px; text-align: left; }

    /* Invitation claim (new link flow) */
    .invitation-bonus {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      width: 132px; height: 132px; border-radius: 50%; margin: .75rem auto 1.25rem;
      background: radial-gradient(circle at 30% 25%, #22c55e, #008A11);
      color: #fff; box-shadow: 0 12px 30px rgba(0,138,17,.35);
    }
    .invitation-bonus-num { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
    .invitation-bonus-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; opacity: .95; margin-top: .25rem; }
    .invitation-claim-btn { border-radius: 999px; font-weight: 700; font-size: 1rem; padding: .75rem 1rem; }
    .invitation-result { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .invitation-captcha {
      display: flex; align-items: center; gap: .5rem; background: #f8fafc;
      border: 1px solid #e2e8f0; border-radius: 12px; padding: .4rem;
    }
    .invitation-captcha-img { flex: 1; display: flex; align-items: center; justify-content: center; }
    .invitation-captcha-img svg { display: block; max-width: 100%; height: auto; border-radius: 8px; }

    .warranty-title {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -.03em;
      background: linear-gradient(135deg, #fff 0%, #7fdbff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: .5rem 0 .4rem;
      line-height: 1.15;
      filter: drop-shadow(0 2px 16px rgba(0,0,0,.4));
    }
    @media (min-width: 768px) { .warranty-title { font-size: 2rem; } }
    .warranty-subtitle {
      font-size: .9rem;
      color: rgba(255,255,255,.9);
      line-height: 1.5;
      max-width: 560px;
      margin: 0 auto;
      text-shadow: 0 1px 10px rgba(0,0,0,.35);
    }

    .warranty-info {
      padding: 1rem 0;
    }
    .warranty-card {
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 16px;
      padding: 1rem;
      height: 100%;
      transition: all .25s;
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(20,20,45,.18);
    }
    .warranty-card:hover {
      background: rgba(255,255,255,.85);
      border-color: rgba(10,132,255,.3);
      transform: translateY(-3px);
    }
    .warranty-card-icon {
      font-size: 1.4rem;
      color: #0a84ff;
      margin-bottom: .5rem;
      display: block;
    }
    .warranty-card h3 {
      font-size: .95rem;
      font-weight: 650;
      color: #1d1d1f;
      margin: 0 0 .25rem;
    }
    .warranty-card p {
      font-size: .78rem;
      color: #6e6e73;
      line-height: 1.45;
      margin: 0;
    }

    .warranty-section-title {
      font-size: 1.25rem;
      font-weight: 750;
      letter-spacing: -.02em;
      color: #fff;
      margin: 0 0 .25rem;
      text-align: center;
      text-shadow: 0 2px 14px rgba(0,0,0,.4);
    }
    .warranty-section-sub {
      color: rgba(255,255,255,.88);
      font-size: .82rem;
      text-align: center;
      margin: 0 0 1rem;
      text-shadow: 0 1px 10px rgba(0,0,0,.35);
    }

    .warranty-policy {
      padding: 1.5rem 0;
    }
    .warranty-policy-content {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }
    .warranty-rule {
      display: flex;
      gap: .75rem;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 16px;
      padding: 1rem;
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(20,20,45,.18);
    }
    .warranty-rule-num {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: #0a84ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .8rem;
      color: white;
      box-shadow: 0 4px 12px -4px rgba(10,132,255,.4);
    }
    .warranty-rule h4 {
      font-size: .92rem;
      font-weight: 650;
      color: #1d1d1f;
      margin: 0 0 .3rem;
    }
    .warranty-rule p {
      font-size: .8rem;
      color: #6e6e73;
      line-height: 1.5;
      margin: 0 0 .4rem;
    }
    .warranty-rule ul {
      margin: .35rem 0 0;
      padding-left: 1.15rem;
      color: #6e6e73;
      font-size: .78rem;
      line-height: 1.5;
    }

    .warranty-formula-box {
      background: rgba(10,132,255,.08);
      border: 1px solid rgba(10,132,255,.2);
      border-radius: .5rem;
      padding: .55rem .8rem;
      display: inline-block;
    }
    .warranty-formula-box code {
      color: #0a84ff;
      font-family: 'JetBrains Mono', monospace;
      font-size: .78rem;
      background: none;
    }

    .warranty-example-box {
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(60,60,67,.1);
      border-radius: .6rem;
      padding: .75rem .9rem;
      margin-top: .35rem;
      font-size: .8rem;
    }
    .warranty-example-box > div {
      display: flex;
      justify-content: space-between;
      padding: .2rem 0;
      color: #515156;
    }
    .warranty-example-box .label { color: #6e6e73; }
    .warranty-example-box .value { font-weight: 550; color: #1d1d1f; }
    .warranty-example-box .divider {
      border-top: 1px dashed rgba(60,60,67,.12);
      margin: .3rem 0;
      padding: 0 !important;
    }
    .warranty-example-box .calculation { padding-top: .25rem; }
    .warranty-example-box .value-highlight { color: #0a84ff; font-weight: 600; }
    .warranty-example-box .value-highlight strong { color: #0a84ff; font-size: .95rem; }

    .warranty-calc {
      padding: 1.5rem 0 2rem;
    }
    .warranty-calc-wrapper {
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 16px;
      padding: 1rem;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(20,20,45,.18);
    }
    .warranty-calc-wrapper::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #0a84ff, transparent);
    }
    @media (min-width: 768px) { .warranty-calc-wrapper { padding: 1.25rem; } }

    .warranty-calc-form label {
      display: block;
      font-size: .78rem;
      font-weight: 550;
      color: #515156;
      margin-bottom: .3rem;
    }
    .warranty-calc-form .input-group-text {
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(60,60,67,.14);
      color: #515156;
      font-size: .78rem;
      padding: 0 .55rem;
      border-radius: 0 .5rem .5rem 0;
    }
    .warranty-input {
      background: rgba(255,255,255,.96) !important;
      border: 1px solid rgba(60,60,67,.16) !important;
      color: #1d1d1f !important;
      padding: .55rem .75rem !important;
      font-size: .9rem !important;
      font-weight: 500 !important;
      border-radius: .5rem !important;
      transition: all .15s !important;
      width: 100%;
    }
    .warranty-input:focus {
      border-color: rgba(10,132,255,.5) !important;
      box-shadow: 0 0 0 3px rgba(10,132,255,.15) !important;
      outline: none !important;
    }
    .warranty-input-highlight {
      border-color: rgba(10,132,255,.4) !important;
    }
    .warranty-calc-form .input-group .warranty-input {
      border-radius: .5rem 0 0 .5rem !important;
    }
    .warranty-calc-form .form-hint {
      font-size: .7rem;
      color: #6e6e73;
      margin-top: .25rem;
    }
    .warranty-divider {
      border-color: rgba(60,60,67,.12);
      margin: 1rem 0 !important;
    }

    .warranty-calc-price-per-m {
      background: rgba(10,132,255,.08);
      border: 1px solid rgba(10,132,255,.2);
      border-radius: .5rem;
      padding: .45rem .75rem;
      font-size: .78rem;
      color: #0a84ff;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .warranty-calc-price-per-m i { color: #0a84ff; }

    .warranty-result-card {
      background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(240,247,255,.94));
      border: 1px solid rgba(10,132,255,.22);
      border-radius: 16px;
      padding: 1.25rem 1rem;
      text-align: center;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(10,132,255,.15);
    }
    .warranty-result-label {
      font-size: .72rem;
      font-weight: 550;
      color: #0a84ff;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: .4rem;
    }
    .warranty-result-value {
      font-size: 1.7rem;
      font-weight: 800;
      letter-spacing: -.02em;
      color: #1d1d1f;
      line-height: 1.1;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #1d1d1f, #0a84ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .warranty-result-value.value-zero {
      background: none;
      -webkit-text-fill-color: #6e6e73;
      color: #6e6e73;
      font-size: 1.2rem;
    }

    .warranty-result-breakdown {
      border-top: 1px solid rgba(60,60,67,.12);
      padding-top: .75rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: .3rem;
    }
    .breakdown-row {
      display: flex;
      justify-content: space-between;
      font-size: .75rem;
      padding: .2rem .2rem;
      border-radius: .3rem;
    }
    .breakdown-label { color: #6e6e73; }
    .breakdown-value { color: #1d1d1f; font-weight: 550; font-family: 'JetBrains Mono', monospace; font-size: .73rem; }
    .breakdown-row.highlight {
      background: rgba(10,132,255,.06);
      padding: .3rem .35rem;
      margin: .15rem 0;
    }
    .breakdown-row.highlight .breakdown-value { color: #0a84ff; }
    .breakdown-row.total .breakdown-label { color: #515156; font-weight: 600; }
    .breakdown-row.total .breakdown-value {
      color: #0a84ff;
      font-weight: 700;
      font-size: .85rem;
    }

    .warranty-result-note {
      color: #6e6e73;
      font-size: .78rem;
      font-style: italic;
    }

    @media (max-width: 767px) {
      .warranty-title { font-size: 1.4rem; }
      .warranty-subtitle { font-size: .8rem; }
      .warranty-card { padding: .75rem; }
      .warranty-card-icon { font-size: 1.2rem; margin-bottom: .35rem; }
      .warranty-card h3 { font-size: .85rem; }
      .warranty-card p { font-size: .72rem; }
      .warranty-section-title { font-size: 1.1rem; }
      .warranty-section-sub { font-size: .75rem; margin-bottom: .75rem; }
      .warranty-policy { padding: 1rem 0; }
      .warranty-policy-content { gap: .5rem; }
      .warranty-rule { padding: .75rem; gap: .5rem; }
      .warranty-rule-num { width: 26px; height: 26px; font-size: .72rem; }
      .warranty-rule h4 { font-size: .85rem; margin-bottom: .2rem; }
      .warranty-rule p { font-size: .72rem; line-height: 1.4; margin-bottom: .3rem; }
      .warranty-rule ul { font-size: .72rem; line-height: 1.4; }
      .warranty-formula-box { padding: .4rem .6rem; }
      .warranty-formula-box code { font-size: .72rem; }
      .warranty-example-box { padding: .5rem .65rem; font-size: .72rem; }
      .warranty-calc { padding: 1rem 0 1.5rem; }
      .warranty-calc-wrapper { padding: .75rem; }
      .warranty-calc-form label { font-size: .72rem; }
      .warranty-calc-form .input-group-text { font-size: .72rem; }
      .warranty-input { font-size: .8rem !important; padding: .45rem .6rem !important; }
      .warranty-calc-price-per-m { font-size: .72rem; padding: .35rem .55rem; }
      .warranty-result-card { padding: .75rem; }
      .warranty-result-value { font-size: 1.4rem; margin-bottom: .75rem; }
      .warranty-result-note { font-size: .72rem; }
      .landing-footer { padding: 1rem .75rem; font-size: .75rem; }
    }

    .btn-wa-contact {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .75rem 1.4rem;
      background: #25D366;
      color: white;
      font-weight: 600;
      font-size: .92rem;
      border-radius: .65rem;
      text-decoration: none;
      transition: all .2s;
      box-shadow: 0 6px 18px -6px rgba(37,211,102,.45);
    }
    .btn-wa-contact:hover {
      background: #1ebe5b;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -8px rgba(37,211,102,.55);
    }
    .btn-wa-contact i { font-size: 1.1rem; }

    .landing-wa-btn {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .55rem 1.1rem;
      background: rgba(37,211,102,.12);
      color: #4ade80;
      border: 1px solid rgba(37,211,102,.25);
      border-radius: .55rem;
      font-size: .82rem;
      font-weight: 550;
      text-decoration: none;
      transition: all .2s;
    }
    .landing-wa-btn:hover {
      background: rgba(37,211,102,.2);
      border-color: rgba(37,211,102,.45);
      color: #86efac;
    }

    .snap-embed-wrap { width: 100%; }
    .snap-embed-container {
      width: 100%;
      min-height: 420px;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }
    .snap-embed-container iframe { width: 100% !important; min-height: 420px; border: 0; display: block; }
    @media (min-width: 480px) {
      .snap-embed-container { max-width: 420px; }
    }

  
    /* macOS-inspired admin workspace: mobile is the base layout. */
    .admin-desktop {
      --mac-blue: #0a84ff;
      --mac-indigo: #5e5ce6;
      --mac-text: #1d1d1f;
      --mac-muted: #6e6e73;
      --mac-line: rgba(60, 60, 67, .18);
      min-height: 100vh;
      color: var(--mac-text);
      background: #241059 url('https://raw.githubusercontent.com/mhmdmhd6/Mac-OS-Desktop/master/background/iridescence.jpg') center / cover fixed no-repeat;
    }
    .admin-desktop .app-layout { min-height: 100vh; }
    .admin-desktop .app-main { padding-bottom: 5.5rem; }
    .admin-desktop .topbar {
      height: 56px; color: #fff; border: 0;
      background: rgba(28, 28, 30, .78);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
    }
    .admin-desktop .admin-window {
      position: fixed; top: 56px; right: 0; bottom: 0; left: 0;
      width: auto; max-width: none; height: auto; min-width: 0; min-height: 0;
      margin: 0; overflow: hidden; border: 0; border-radius: 0;
      background: rgba(249,249,251,.9); box-shadow: 0 14px 34px rgba(31,38,75,.18);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    }
    .admin-desktop .admin-window-titlebar {
      position: relative; display: flex; height: 34px; align-items: center; justify-content: center;
      color: #515156; font-size: .75rem; font-weight: 600; border-bottom: 1px solid var(--mac-line);
      background: rgba(244,244,246,.82); user-select: none;
    }
    .admin-desktop .window-controls { display: flex; gap: 7px; position: absolute; left: 13px; }
    .admin-desktop .window-controls button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
    .admin-desktop .window-controls button:nth-child(2) { background: #febc2e; }
    .admin-desktop .window-controls button:nth-child(3) { background: #28c840; }
    .admin-desktop .content-wrap {
      width: 100%; height: calc(100% - 34px); min-width: 0; max-width: 100%; padding: 1rem .75rem;
      overflow-x: hidden; border-radius: inherit; background: transparent;
    }
    .admin-desktop .page-header {
      width: 100%; min-width: 0; gap: .5rem 1rem; margin-bottom: .85rem;
      align-items: center;
    }
    .admin-desktop .page-header > * { min-width: 0; max-width: 100%; }
    .admin-desktop .page-title { max-width: 100%; font-size: 1.18rem; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
    .admin-desktop .page-subtitle { max-width: 100%; margin-top: .12rem; font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
    .admin-desktop .page-header > .d-flex { flex-wrap: wrap; gap: .4rem !important; }
    .admin-desktop .page-header .btn { min-height: 40px; padding: .42rem .68rem; font-size: .8rem; }
    .admin-desktop .page-header { display: flex; }
    .window-title-text { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
    .window-title-actions {
      position: absolute; right: 10px; display: flex; align-items: center; justify-content: flex-end;
      gap: 5px; max-width: 50%; overflow-x: auto; scrollbar-width: none;
    }
    .window-title-actions::-webkit-scrollbar { display: none; }
    .window-title-actions > * { display: flex !important; align-items: center; gap: 5px !important; margin: 0 !important; flex-wrap: nowrap !important; }
    .window-title-actions .btn {
      display: inline-flex; width: 28px; height: 26px; min-height: 0 !important; padding: 0 !important;
      align-items: center; justify-content: center; flex: 0 0 28px; border-radius: 7px; font-size: 0 !important;
    }
    .window-title-actions .btn i, .window-title-actions .btn .spinner-border { margin: 0 !important; font-size: .82rem; }
    .window-title-actions .btn .spinner-border { width: .8rem; height: .8rem; }
    .window-title-actions .form-control, .window-title-actions .form-select { display: none; }
    .window-title-actions .btn-group { gap: 3px; }
    @media (max-width: 767.98px) {
      .admin-desktop .admin-window {
        top: 56px !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
        width: auto !important; height: auto !important; border-radius: 0 !important;
      }
      .admin-desktop .admin-window-titlebar { cursor: default; }
      .admin-desktop .content-wrap { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
    }
    .admin-desktop .card,
    .admin-desktop .modal-content {
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 18px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 14px 34px rgba(31,38,75,.12), inset 0 1px 0 rgba(255,255,255,.8);
      backdrop-filter: blur(24px) saturate(135%);
      -webkit-backdrop-filter: blur(24px) saturate(135%);
    }
    .admin-desktop .card-header,
    .admin-desktop .modal-header,
    .admin-desktop .modal-footer {
      background: rgba(248,248,250,.58);
      border-color: var(--mac-line);
    }
    .admin-desktop .card-header { padding: .7rem .85rem; }
    .admin-desktop .card-header { min-height: 34px; padding: .48rem .65rem; }
    .admin-desktop .card-header h5,
    .admin-desktop .card-header h6 { margin: 0; font-size: .78rem; line-height: 1.2; font-weight: 700; }
    .admin-desktop .card-header h5 i,
    .admin-desktop .card-header h6 i { margin-right: .35rem !important; font-size: .72rem; }
    .admin-desktop .card-header small { font-size: .64rem; line-height: 1.25; }
    .admin-desktop .card-header > .badge,
    .admin-desktop .card-header .badge { padding: .2rem .38rem; font-size: .58rem; }
    .admin-desktop .card-body { padding: .85rem; }
    .admin-desktop .table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(10,132,255,.055); }
    .admin-desktop .table > :not(caption) > * > * { border-color: rgba(60,60,67,.12); }
    .admin-desktop .table thead th {
      padding: .4rem .5rem; color: var(--mac-muted); font-size: 10px; line-height: 1.2; font-weight: 700;
      letter-spacing: .055em; text-transform: uppercase; background: rgba(120,120,128,.06);
    }
    .admin-desktop .table tbody td {
      padding: .38rem .5rem; font-size: 10px; line-height: 1.3;
    }
    .admin-desktop .table tbody td .small,
    .admin-desktop .table tbody td small,
    .admin-desktop .table tbody td code,
    .admin-desktop .table tbody td .badge { font-size: 10px !important; }
    .admin-desktop .table { margin-bottom: 0; border-color: rgba(60,60,67,.1); }
    .admin-desktop .table thead { background: rgba(120,120,128,.06) !important; }
    .admin-desktop .table thead th { white-space: nowrap; vertical-align: middle; }
    .admin-desktop .table tbody tr { transition: background-color .12s ease; }
    .admin-desktop .table tbody tr:hover { background: rgba(10,132,255,.045); }
    .admin-desktop .table-responsive { border-radius: inherit; }
    .admin-desktop .card-body > .d-flex.align-items-center.mb-3 h5,
    .admin-desktop .card-body > .d-flex.align-items-center.mb-3 h6 { font-size: .78rem; line-height: 1.2; }
    .admin-desktop .card-body > .d-flex.align-items-center.mb-3 h5 i,
    .admin-desktop .card-body > .d-flex.align-items-center.mb-3 h6 i { font-size: .72rem; }
    .admin-desktop .card-body > .d-flex.align-items-center.mb-3 small { font-size: .64rem; }
    .pricing-description-preview { display: block; width: 180px; padding: .28rem .4rem; overflow: hidden; color: #475569; text-align: left; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; border-radius: 6px; background: transparent; }
    .pricing-description-preview:hover { color: var(--mac-blue); border-color: rgba(10,132,255,.2); background: rgba(10,132,255,.05); }

    /* Pricing Management Mobile Responsive */
    @media (max-width: 991px) {
      .admin-desktop .gj-table-editor .el-table__header-wrapper,
      .admin-desktop .gj-table-editor .el-table__body-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      
      /* Compact header di mobile */
      .admin-desktop .page-header {
        flex-direction: column;
        gap: .75rem;
        align-items: flex-start !important;
      }
      
      .admin-desktop .page-header .d-flex.gap-2 {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
      }
      
      .admin-desktop .page-header .btn {
        white-space: nowrap;
        flex-shrink: 0;
      }
      
      /* Hide non-essential columns di mobile */
      .gj-table-editor .el-table__header-wrapper th:nth-child(5),
      .gj-table-editor .el-table__body-wrapper td:nth-child(5),
      .gj-table-editor .el-table__header-wrapper th:nth-child(7),
      .gj-table-editor .el-table__body-wrapper td:nth-child(7),
      .gj-table-editor .el-table__header-wrapper th:nth-child(8),
      .gj-table-editor .el-table__body-wrapper td:nth-child(8),
      .gj-table-editor .el-table__header-wrapper th:nth-child(9),
      .gj-table-editor .el-table__body-wrapper td:nth-child(9),
      .gj-table-editor .el-table__header-wrapper th:nth-child(11),
      .gj-table-editor .el-table__body-wrapper td:nth-child(11),
      .gj-table-editor .el-table__header-wrapper th:nth-child(12),
      .gj-table-editor .el-table__body-wrapper td:nth-child(12),
      .gj-table-editor .el-table__header-wrapper th:nth-child(13),
      .gj-table-editor .el-table__body-wrapper td:nth-child(13),
      .gj-table-editor .el-table__header-wrapper th:nth-child(14),
      .gj-table-editor .el-table__body-wrapper td:nth-child(14) {
        display: none;
      }
      
      /* Compact form controls di table */
      .gj-table-editor .form-control-sm {
        min-height: 32px !important;
        font-size: .72rem !important;
      }
      
      /* Better touch targets untuk switches */
      .gj-table-editor .form-check-input {
        width: 38px !important;
        height: 20px !important;
      }
      
      /* Compact order buttons */
      .gj-table-editor .el-table__body-wrapper td:first-child {
        padding: .3rem !important;
      }
      
      .gj-table-editor .el-table__body-wrapper td:first-child .btn {
        padding: .15rem .25rem !important;
        font-size: .7rem !important;
      }
    }
    
    @media (max-width: 575px) {
      /* Extra compact di mobile kecil */
      .admin-desktop .page-title {
        font-size: 1.1rem !important;
      }
      
      .admin-desktop .page-subtitle {
        font-size: .72rem !important;
      }
      
      .admin-desktop .page-header .btn-sm {
        padding: .35rem .5rem !important;
        font-size: .7rem !important;
      }
      
      .admin-desktop .page-header .btn-sm .bi {
        font-size: .75rem !important;
      }
      
      /* Flash sale toggle compact */
      .admin-desktop .card-body.py-2 {
        padding: .65rem .75rem !important;
      }
      
      .admin-desktop .card-body.py-2 .fw-semibold {
        font-size: .75rem !important;
      }
      
      .admin-desktop .card-body.py-2 .text-muted {
        font-size: .68rem !important;
      }
      
      /* Minimal column widths di mobile */
      .gj-table-editor .el-table__header-wrapper th,
      .gj-table-editor .el-table__body-wrapper td {
        padding: .4rem .35rem !important;
      }
      
      .gj-table-editor input.form-control-sm {
        min-width: 70px !important;
        padding: .25rem .35rem !important;
      }
      
      /* Compact delete button */
      .gj-table-editor .btn-outline-danger {
        padding: .25rem .4rem !important;
      }
    }
    .admin-desktop .form-control,
    .admin-desktop .form-select {
      min-height: 40px; border-color: rgba(60,60,67,.2); border-radius: 10px;
      background-color: rgba(255,255,255,.72);
    }
    .admin-desktop textarea.form-control { min-height: 92px; }
    .admin-desktop .form-control:focus,
    .admin-desktop .form-select:focus {
      border-color: var(--mac-blue); box-shadow: 0 0 0 3px rgba(10,132,255,.2);
      background-color: #fff;
    }
    .admin-desktop .input-group { flex-wrap: nowrap; border-radius: 10px; }
    .admin-desktop .input-group > .form-control,
    .admin-desktop .input-group > .form-select,
    .admin-desktop .input-group > .input-group-text,
    .admin-desktop .input-group > .btn { margin: 0; border-color: rgba(60,60,67,.2); border-radius: 0; }
    .admin-desktop .input-group > :first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
    .admin-desktop .input-group > :last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }
    .admin-desktop .input-group-sm { border-radius: 8px; }
    .admin-desktop .input-group-sm > :first-child { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }
    .admin-desktop .input-group-sm > :last-child { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }
    .admin-desktop .input-group-text { min-width: 34px; justify-content: center; color: #6e6e73; background: rgba(255,255,255,.72) !important; }
    .admin-desktop .input-group .border-start-0 { border-left: 0 !important; }
    .admin-desktop .input-group .border-end-0 { border-right: 0 !important; }
    .admin-desktop .btn { border-radius: 10px; font-weight: 600; }
    .admin-desktop .btn-primary { border-color: var(--mac-blue); background: var(--mac-blue); box-shadow: 0 2px 7px rgba(10,132,255,.28); }
    .admin-desktop .btn-primary:hover { border-color: #0072db; background: #0072db; }
    .admin-desktop .btn-light { border-color: rgba(60,60,67,.14); background: rgba(255,255,255,.68); }
    .admin-desktop .alert { border: 0; border-radius: 13px; }
    .admin-desktop .nav-tabs { gap: 2px; margin-bottom: .6rem !important; border-bottom-color: rgba(60,60,67,.14); }
    .admin-desktop .nav-tabs .nav-link {
      display: inline-flex; align-items: center; gap: .3rem; min-height: 28px;
      padding: .28rem .48rem; color: #6e6e73; border-radius: 7px 7px 0 0;
      font-size: .68rem; font-weight: 600; white-space: nowrap;
    }
    .admin-desktop .nav-tabs .nav-link i { margin: 0 !important; font-size: .7rem; }
    .admin-desktop .nav-tabs .nav-link.active { color: var(--mac-blue); background: rgba(255,255,255,.72); }
    .admin-desktop .nav-pills { gap: .25rem; }
    .admin-desktop .nav-pills .nav-link { min-height: 28px; padding: .28rem .5rem; border-radius: 7px; font-size: .68rem; }
    .admin-desktop .reseller-tabs { gap: 2px; padding: 2px; margin-bottom: .6rem; border-radius: 8px; }
    .admin-desktop .reseller-tabs button { min-height: 28px; padding: .28rem .48rem; border-radius: 6px; font-size: .68rem; }
    .leaderboard-card > .card-body { padding: .6rem !important; }
    .leaderboard-card .nav-tabs + .d-flex { gap: .25rem !important; margin-bottom: .55rem !important; }
    .leaderboard-card .nav-tabs + .d-flex .btn { min-height: 26px; padding: .22rem .45rem; font-size: .65rem; }
    .dashboard-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .dashboard-stat-card { min-width: 0; min-height: 62px; }
    .dashboard-stats-grid .quota-stat-card { padding: .55rem; gap: .5rem; }
    .dashboard-stats-grid .quota-stat-icon { width: 30px; height: 30px; border-radius: 8px; font-size: .85rem; }
    .dashboard-stats-grid .quota-stat-value { font-size: .82rem; line-height: 1.2; }
    .dashboard-stats-grid .quota-stat-label, .dashboard-stats-grid .quota-stat-meta { font-size: .6rem; }
    .provider-summary-card { width: 100%; padding: .55rem; text-align: left; border: 1px solid rgba(60,60,67,.14); border-radius: 11px; background: rgba(255,255,255,.62); transition: transform .15s, box-shadow .15s; }
    .provider-summary-card:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(31,38,75,.1); }
    .provider-summary-card strong { font-size: .75rem; }
    .provider-summary-stats { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin-top: .3rem; font-size: .6rem; }
    .provider-summary-rate { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .6rem; }
    .provider-rate-badge { padding: .05rem .3rem; border-radius: 5px; font-weight: 700; font-size: .58rem; line-height: 1.4; }
    .provider-rate-badge.rate-good { background: #dcfce7; color: #15803d; }
    .provider-rate-badge.rate-warn { background: #fef3c7; color: #b45309; }
    .provider-rate-badge.rate-bad { background: #fee2e2; color: #b91c1c; }
    .provider-rate-detail { color: #64748b; }
    @media (min-width: 576px) { .dashboard-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 992px) { .dashboard-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (min-width: 1200px) { .dashboard-stats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    .admin-desktop .bottom-nav {
      left: 50%; right: auto; bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
      width: max-content; max-width: calc(100vw - 1.3rem); height: 62px; padding-bottom: 0; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.62); border-radius: 18px;
      background: rgba(246,246,248,.82); box-shadow: 0 12px 30px rgba(31,38,75,.22);
      z-index: 100010;
    }
    .admin-desktop .bottom-nav-item { color: #6e6e73; }
    .admin-desktop .bottom-nav-item.active,
    .admin-desktop .bottom-nav-item.active i { color: var(--mac-blue); }
    .admin-desktop .bottom-nav-item.active::before { display: none; }
    .admin-desktop .bottom-nav-item.active i { filter: drop-shadow(0 2px 3px rgba(10,132,255,.2)); }
    .admin-desktop .mac-mobile-dock {
      justify-content: center; gap: 7px; height: 68px; padding: 7px;
      overflow-x: auto; overflow-y: visible; scrollbar-width: none;
    }
    .admin-desktop .mac-mobile-dock::-webkit-scrollbar { display: none; }
    .admin-desktop .mac-mobile-dock .bottom-nav-item { min-width: 48px; width: 48px; height: 48px; padding: 0; flex: 0 0 48px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #4c9cff, #1767d7); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(25,75,165,.27); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(2) { background: linear-gradient(145deg, #67c58b, #209b60); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(3) { background: linear-gradient(145deg, #9a8cff, #6355d9); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(4) { background: linear-gradient(145deg, #ffbd5a, #e68021); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(5) { background: linear-gradient(145deg, #fa866f, #dc4c61); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(6) { background: linear-gradient(145deg, #42cce2, #188aa8); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(7) { background: linear-gradient(145deg, #54d49a, #159967); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(8) { background: linear-gradient(145deg, #87919f, #4a5464); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item:nth-child(9) { background: linear-gradient(145deg, #777780, #38383d); }
    .admin-desktop .mac-mobile-dock .bottom-nav-item i { color: #fff; font-size: 1.25rem; }
    .admin-desktop .mac-mobile-dock .bottom-nav-item span { display: none; }
    .admin-desktop .mac-mobile-dock .bottom-nav-item.active { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 12px rgba(20,50,110,.36); }
    .admin-desktop .bottom-nav-more-menu {
      bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); margin: 0 .65rem; left: 0; right: 0;
      border: 1px solid rgba(255,255,255,.65); border-radius: 20px;
      background: rgba(248,248,250,.92); backdrop-filter: blur(28px);
      z-index: 100012;
    }
    .admin-desktop .bottom-nav-more-backdrop { z-index: 100011; }
    .admin-desktop .bottom-nav-more-item { border-radius: 10px; }
    .admin-desktop .modal-dialog { margin: .75rem; }
    .admin-desktop .modal-content { border-radius: 20px; }
    @media (min-width: 768px) {
      .admin-desktop { padding: 0; }
      .admin-desktop .app-layout { min-height: 100vh; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
      .admin-desktop .admin-window {
        right: auto; bottom: auto; max-width: none; border: 1px solid rgba(255,255,255,.68);
        border-radius: 16px; background: rgba(249,249,251,.9);
      }
      .admin-desktop .admin-window.window-maximized { border: 0; border-radius: 0; }
      .admin-desktop .sidebar {
        width: 250px; min-height: calc(100vh - 20px); background: rgba(35,35,38,.73);
        border-right: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(30px) saturate(140%);
        -webkit-backdrop-filter: blur(30px) saturate(140%);
      }
      .admin-desktop .sidebar-brand { padding: 1rem; border-color: rgba(255,255,255,.14); }
      .admin-desktop .sidebar-brand-icon { width: 34px; height: 34px; }
      .admin-desktop .sidebar .nav-link { padding: .52rem .72rem; border-radius: 8px; color: rgba(255,255,255,.77); }
      .admin-desktop .sidebar .nav-link:hover { background: rgba(255,255,255,.12); }
      .admin-desktop .sidebar .nav-link.active { background: rgba(10,132,255,.78); box-shadow: none; }
      .admin-desktop .sidebar-footer { border-color: rgba(255,255,255,.14); }
      .admin-desktop .app-main { padding-bottom: 0; overflow: visible; }
      .desktop-menubar {
        position: fixed; z-index: 99999; top: 0; left: 0; right: 0;
        height: 30px; padding: 0 8px; align-items: center; justify-content: space-between;
        color: rgba(255,255,255,.92); font-size: .76rem; background: rgba(30,30,32,.58);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      }
      .desktop-menubar-app, .desktop-menubar-status { display: flex; align-items: center; gap: .55rem; }
      .desktop-menubar-app { position: relative; }
      .desktop-menubar-app img { width: 16px; height: 16px; object-fit: contain; }
      .desktop-menubar-app span { color: rgba(255,255,255,.62); }
      .desktop-menubar-status { gap: 1rem; color: rgba(255,255,255,.72); }
      .mac-navbar {
        position: fixed; z-index: 100020; top: 0; left: 0; width: 100%; height: 30px;
        padding: 1px 0; align-items: center; justify-content: space-between;
        color: rgba(255,255,255,.9); background: linear-gradient(to right, #6e1438, #270598, #e54c2d);
        box-shadow: 0 2px 10px rgba(0,0,0,.1); font-family: Arial, sans-serif;
      }
      .mac-navbar ul { display: flex; align-items: center; height: 100%; padding: 0; margin: 0; list-style: none; }
      .mac-navbar li { position: relative; display: flex; align-items: center; height: 100%; margin: 0 4px; font-size: 14px; text-shadow: 0 3px 10px rgba(0,0,0,.288); }
      .mac-navbar li > button { height: 26px; padding: 4px 8px; color: inherit; font: inherit; background: transparent; border: 0; }
      .mac-navbar li > button:hover { color: #fff; border-radius: 5px; background: rgba(255,255,255,.2); }
      .mac-navbar-logo { padding: 0 8px; }
      .mac-navbar-app { padding: 4px 8px; color: #fff; font-weight: 700; }
      .mac-navbar-right li { margin: 0 10px; }
      .mac-navbar-right li:last-child { margin-right: 15px; white-space: nowrap; }
      .mac-navbar-right i { color: #fff; font-size: 15px; }
      .mac-navbar .mac-navbar-dropdown {
        position: absolute; z-index: 100021; top: 28px; display: block; width: 224px; height: auto;
        margin: 0; padding: 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
        background: rgba(25,25,27,.42); box-shadow: 0 0 10px rgba(0,0,0,.2);
        backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); text-shadow: none;
      }
      .mac-navbar .mac-navbar-dropdown.file-menu { left: 108px; width: 180px; }
      .mac-navbar .mac-navbar-dropdown.manage-menu { left: 226px; }
      .mac-navbar .mac-navbar-dropdown.tools-menu { left: 278px; }
      .mac-navbar .mac-navbar-dropdown a, .mac-navbar .mac-navbar-dropdown > button {
        display: flex; width: 100%; height: auto; align-items: center; gap: 9px; padding: 7px 10px;
        color: #fff; text-decoration: none; text-align: left; font-size: 12px; border-radius: 5px;
      }
      .mac-navbar .mac-navbar-dropdown a:hover, .mac-navbar .mac-navbar-dropdown > button:hover { background: #007ff7; }
      .mac-navbar .mac-navbar-dropdown i { width: 16px; font-size: 13px; text-align: center; }
      .menubar-menu { padding: .18rem .42rem; color: inherit; font: inherit; border-radius: 5px; }
      .menubar-menu:hover { background: rgba(255,255,255,.16); }
      .menubar-dropdown { position: absolute; z-index: 100000; top: 28px; width: 224px; padding: 6px; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; background: rgba(43,43,46,.88); box-shadow: 0 12px 30px rgba(0,0,0,.3); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
      .menubar-dropdown.file-menu { left: 105px; width: 180px; }
      .menubar-dropdown.manage-menu { left: 215px; }
      .menubar-dropdown.tools-menu { left: 265px; }
      .menubar-dropdown a, .menubar-dropdown button { display: flex; width: 100%; align-items: center; gap: .65rem; padding: .44rem .55rem; color: rgba(255,255,255,.9); text-decoration: none; text-align: left; font: inherit; border-radius: 6px; }
      .menubar-dropdown a:hover, .menubar-dropdown button:hover { color: #fff; background: var(--mac-blue); }
      .menubar-dropdown i { width: 16px; text-align: center; }
      .admin-window {
        position: relative;
        width: 100%; max-width: 100%; height: auto; min-width: 0; min-height: 0;
        margin: 0; padding: 0; overflow: visible;
        border-radius: 0; box-shadow: none;
      }
      .admin-window.window-maximized {
        z-index: auto; top: 0 !important; right: 0; bottom: 0; left: 0 !important;
        width: auto !important; height: auto !important;
        min-width: 0; min-height: 0; margin: 0; resize: none; border-radius: 0;
      }
      .window-resize-handle { position: absolute; z-index: 20; touch-action: none; }
      .window-resize-handle.n { top: 0; left: 12px; right: 12px; height: 6px; cursor: n-resize; }
      .window-resize-handle.s { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: s-resize; }
      .window-resize-handle.e { top: 12px; right: 0; bottom: 12px; width: 6px; cursor: e-resize; }
      .window-resize-handle.w { top: 12px; left: 0; bottom: 12px; width: 6px; cursor: w-resize; }
      .window-resize-handle.ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
      .window-resize-handle.nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
      .window-resize-handle.se { right: 0; bottom: 0; width: 12px; height: 12px; cursor: se-resize; }
      .window-resize-handle.sw { left: 0; bottom: 0; width: 12px; height: 12px; cursor: sw-resize; }
      .window-maximized .window-resize-handle { display: none; }
      .admin-desktop .admin-window-titlebar {
        height: 34px; align-items: center; justify-content: center; position: relative;
        color: #515156; font-size: .75rem; font-weight: 600; border-bottom: 1px solid var(--mac-line);
        border-radius: 16px 16px 0 0; background: rgba(244,244,246,.65); backdrop-filter: blur(22px);
        cursor: grab; touch-action: none; user-select: none;
      }
      .admin-desktop .admin-window-titlebar:active { cursor: grabbing; }
      .window-controls { display: flex; gap: 7px; position: absolute; left: 13px; }
      .window-controls button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
      .window-controls button:nth-child(2) { background: #febc2e; }
      .window-controls button:nth-child(3) { background: #28c840; }
      .window-controls button::after { display: block; opacity: 0; color: rgba(0,0,0,.58); font-size: 9px; font-weight: 900; line-height: 12px; }
      .window-controls button:nth-child(1)::after { content: '×'; }
      .window-controls button:nth-child(2)::after { content: '−'; }
      .window-controls button:nth-child(3)::after { content: '+'; }
      .window-controls:hover button::after { opacity: 1; }
      .admin-window-titlebar > .bi { position: absolute; right: 13px; color: #818187; }
      .admin-desktop .content-wrap {
        height: calc(100% - 34px); min-height: 0; padding: 1rem; overflow: auto;
        background: rgba(249,249,251,.72); border-radius: 0 0 16px 16px;
        backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
      }
      .admin-desktop .page-header { flex-wrap: nowrap; }
      .admin-desktop .page-header > :first-child { flex: 1 1 auto; }
      .admin-desktop .page-header > .d-flex { flex: 0 1 auto; justify-content: flex-end; }
      .admin-desktop .page-header .btn { min-height: 32px; padding: .3rem .58rem; font-size: .76rem; }
      .admin-desktop .form-control, .admin-desktop .form-select { min-height: 36px; font-size: .84rem; }
      .window-maximized .content-wrap { border-radius: 0; }
      .admin-desktop .window-maximized .admin-window-titlebar { border-radius: 0; }
      .admin-desktop .card { border-radius: 14px; }
      .admin-desktop .modal-dialog { margin: 1.75rem auto; }
      .desktop-dock { position: fixed; z-index: 100010; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.54); border-radius: 18px; background: rgba(235,235,239,.68); box-shadow: 0 15px 34px rgba(25,25,55,.28); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); }
      .desktop-dock a { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; text-decoration: none; background: linear-gradient(145deg, #4c9cff, #1767d7); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(25,75,165,.27); transition: transform .16s ease; }
      .desktop-dock a:nth-child(2) { background: linear-gradient(145deg, #67c58b, #209b60); } .desktop-dock a:nth-child(3) { background: linear-gradient(145deg, #9a8cff, #6355d9); } .desktop-dock a:nth-child(4) { background: linear-gradient(145deg, #ffbd5a, #e68021); } .desktop-dock a:nth-child(5) { background: linear-gradient(145deg, #fa866f, #dc4c61); } .desktop-dock a:nth-child(6) { background: linear-gradient(145deg, #42cce2, #188aa8); } .desktop-dock a:nth-child(7) { background: linear-gradient(145deg, #54d49a, #159967); } .desktop-dock a:nth-child(8) { background: linear-gradient(145deg, #87919f, #4a5464); }
      .desktop-dock a:hover { transform: translateY(-10px) scale(1.12); color: #fff; }
      .desktop-dock a.active::after { content: ''; position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #1d1d1f; }
      .desktop-dock i { font-size: 1.35rem; }
      .desktop-dock span { position: absolute; bottom: 58px; padding: .28rem .5rem; border-radius: 5px; color: #fff; font-size: .68rem; white-space: nowrap; background: rgba(25,25,28,.82); opacity: 0; pointer-events: none; transition: opacity .12s; }
      .desktop-dock a:hover span { opacity: 1; }
    }
    @media (min-width: 768px) and (max-height: 800px), (min-width: 768px) and (max-width: 1366px) {
      .admin-window { height: calc(100vh - 118px); }
      .admin-desktop .content-wrap { padding: .75rem; }
      .admin-desktop .page-header { margin-bottom: .6rem; gap: .4rem .75rem; }
      .admin-desktop .page-title { font-size: 1.05rem; }
      .admin-desktop .page-subtitle { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .admin-desktop .page-header .btn { min-height: 30px; padding: .25rem .5rem; font-size: .72rem; }
      .admin-desktop .card-header { padding: .55rem .7rem; }
      .admin-desktop .card-body { padding: .7rem; }
      .admin-desktop .form-control, .admin-desktop .form-select { min-height: 32px; padding-top: .3rem; padding-bottom: .3rem; font-size: .8rem; }
    }
    @media (min-width: 768px) and (max-width: 1100px) {
      .admin-desktop .page-header { flex-wrap: wrap; }
      .admin-desktop .page-header > .d-flex { flex: 1 1 100%; justify-content: flex-start; }
    }

    /* ============================================================
       GOJEK-STYLE THEME for ADMIN (/admin) + LOGIN (/login)
       Flattens the macOS desktop chrome into a clean Gojek app:
       green app bar, white cards, pill buttons, clean modals.
       Mobile-first. z-index ladder: page-header 0 < GPage 100045
       < modals 100050–100060 (modals always above GPage).
       ============================================================ */
    .admin-desktop {
      --gj-green: #00AA13;
      --gj-green-dark: #008A11;
      --gj-bg: #F4F5F7;
      --gj-card: #FFFFFF;
      --gj-ink: #1A1A1A;
      --gj-muted: #6B7280;
      --gj-line: #ECEDEF;
      min-height: 100vh !important;
      background: var(--gj-bg) !important;
      color: var(--gj-ink) !important;
    }

    /* Flatten window: kill drag/resize/traffic-lights, make full-bleed scroll surface */
    .admin-desktop .app-layout { min-height: 100vh !important; }
    .admin-desktop .app-main { padding-bottom: 0 !important; }
    .admin-desktop .admin-window,
    .admin-desktop .admin-window.window-maximized {
      position: relative !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
      width: 100% !important; max-width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
      margin: 0 !important; border: 0 !important; border-radius: 0 !important;
      background: var(--gj-bg) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      overflow: visible !important;
    }
    .admin-desktop .admin-window-titlebar,
    .admin-desktop .window-controls,
    .admin-desktop .window-resize-handle,
    .window-resize-handle { display: none !important; }
    .admin-desktop .content-wrap {
      width: 100% !important; height: auto !important; max-width: 100% !important;
      padding: 1.25rem .9rem calc(84px + env(safe-area-inset-bottom, 0px)) !important;
      background: transparent !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      overflow: visible !important;
    }

    /* Green app bar (replaces dark topbar) */
    .admin-desktop .topbar {
      height: 56px !important; border: 0 !important;
      background: linear-gradient(135deg, var(--gj-green), var(--gj-green-dark)) !important;
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      box-shadow: 0 2px 8px rgba(0,138,17,.18) !important; color: #fff !important;
      display: flex !important; align-items: center; padding: 0 .75rem; position: sticky; top: 0; z-index: 50;
    }
    .admin-desktop .topbar * { color: #fff !important; }
    /* Admin topbar always visible (was d-md-none) */
    .admin-desktop .admin-topbar-app { display: flex !important; }
    @media (min-width: 768px) { .admin-desktop .admin-topbar-app { display: flex !important; } }
    .admin-topbar-action {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px; border: 0;
      background: rgba(255,255,255,.18); color: #fff; font-size: .9rem; cursor: pointer;
      text-decoration: none;
    }
    .admin-topbar-action:hover { background: rgba(255,255,255,.3); color: #fff; }
    .admin-topbar-action:disabled { opacity: .5; cursor: not-allowed; }
    .admin-desktop .gj-greeting { color: #fff; font-size: .72rem; font-weight: 500; line-height: 1.1; }
    .admin-desktop .gj-greeting b { display: block; font-size: .92rem; font-weight: 700; }

    /* Kill macOS menubar + desktop dock (the floating gradient squares) only.
       Keep .bottom-nav / .mac-mobile-dock — restyled below as Gojek bar. */
    .mac-navbar,
    .desktop-menubar,
    .admin-desktop .desktop-dock { display: none !important; }

    /* Cards: clean white, rounded, soft shadow */
    .admin-desktop .card,
    .admin-desktop .modal-content {
      background: var(--gj-card) !important; border: 0 !important;
      border-radius: 16px !important; box-shadow: 0 2px 10px rgba(17,24,39,.06) !important;
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    .admin-desktop .card-header { background: #fff !important; border-bottom: 1px solid var(--gj-line) !important; border-radius: 16px 16px 0 0 !important; min-height: 40px; }
    .admin-desktop .card-body { color: var(--gj-ink) !important; }
    .admin-desktop .text-muted { color: var(--gj-muted) !important; }
    .admin-desktop .alert { border: 0 !important; border-radius: 12px !important; }

    /* Buttons: pill, green primary */
    .admin-desktop .btn { border-radius: 999px !important; font-weight: 600; }
    .admin-desktop .btn-primary { background: var(--gj-green) !important; border-color: var(--gj-green) !important; color: #fff !important; }
    .admin-desktop .btn-primary:hover, .admin-desktop .btn-primary:focus { background: var(--gj-green-dark) !important; border-color: var(--gj-green-dark) !important; }
    .admin-desktop .btn-success { background: var(--gj-green) !important; border-color: var(--gj-green) !important; }
    .admin-desktop .btn-outline-primary { color: var(--gj-green) !important; border-color: var(--gj-green) !important; }
    .admin-desktop .btn-outline-primary:hover { background: var(--gj-green) !important; color: #fff !important; }
    .admin-desktop .btn-light { background: var(--gj-bg) !important; border-color: var(--gj-line) !important; color: var(--gj-ink) !important; }
    .admin-desktop .form-control, .admin-desktop .form-select { border-radius: 12px !important; border-color: var(--gj-line) !important; background: #fff !important; }
    .admin-desktop .form-control:focus, .admin-desktop .form-select:focus { border-color: var(--gj-green) !important; box-shadow: 0 0 0 3px rgba(0,170,19,.15) !important; }

    /* Tables */
    .admin-desktop .table thead th { background: var(--gj-bg) !important; color: var(--gj-muted) !important; }
    .admin-desktop .nav-tabs { border-bottom-color: var(--gj-line) !important; }
    .admin-desktop .nav-tabs .nav-link.active { color: var(--gj-green) !important; border-bottom-color: var(--gj-green) !important; }
    .admin-desktop .reseller-tabs { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--gj-line); }
    .admin-desktop .reseller-tabs button.active { color: var(--gj-green) !important; background: transparent !important; box-shadow: none !important; }

    /* Sidebar (desktop): green-tinted clean panel */
    .admin-desktop .sidebar { background: #fff !important; border-right: 1px solid var(--gj-line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .admin-desktop .sidebar .nav-link { color: var(--gj-muted) !important; border-radius: 10px; }
    .admin-desktop .sidebar .nav-link:hover { background: var(--gj-bg) !important; }
    .admin-desktop .sidebar .nav-link.active { background: var(--gj-green) !important; color: #fff !important; box-shadow: none !important; }
    .admin-desktop .sidebar .nav-link.active i { color: #fff !important; }
    .admin-desktop .sidebar-brand, .admin-desktop .sidebar-footer { border-color: var(--gj-line) !important; }

    /* Modals: clean white sheets, ALWAYS above GPage (z-index 100050+).
       Admin modals use .modal.d-block with inline z-index 1060 — override. */
    .admin-desktop .modal.d-block,
    .admin-desktop .modal {
      z-index: 100060 !important; background: rgba(17,24,39,.45) !important; backdrop-filter: blur(4px) !important; padding: .75rem !important;
    }
    .admin-desktop .modal .modal-header { background: #fff !important; justify-content: flex-start !important; border-bottom: 1px solid var(--gj-line) !important; min-height: 48px; }
    .admin-desktop .modal .modal-title { color: var(--gj-ink) !important; font-weight: 700; }
    .admin-desktop .modal .modal-footer { background: #fff !important; border-top: 1px solid var(--gj-line) !important; }
    .admin-desktop .modal .modal-footer .btn { min-height: 38px; border-radius: 999px !important; }

    /* Bottom nav: clean Gojek bar */
    /* Bottom nav: show on ALL breakpoints (Gojek full-width bar), restyle clean */
    .admin-desktop .bottom-nav,
    .admin-desktop .mac-mobile-dock {
      display: grid !important; grid-template-columns: repeat(5, 1fr) !important;
      background: #fff !important; border: 0 !important; border-top: 1px solid var(--gj-line) !important;
      box-shadow: 0 -1px 8px rgba(17,24,39,.04) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      border-radius: 0 !important; transform: none !important; left: 0 !important; right: 0 !important;
      width: 100% !important; max-width: 100% !important; bottom: 0 !important; top: auto !important;
      position: fixed !important; z-index: 9999 !important; height: auto !important; padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom, 0px)) !important;
      gap: 0 !important; overflow: visible !important;
    }
    @media (min-width: 768px) { .admin-desktop .bottom-nav, .admin-desktop .mac-mobile-dock { display: grid !important; visibility: visible !important; opacity: 1 !important; } }
    @media (min-width: 992px) { .admin-desktop .bottom-nav, .admin-desktop .mac-mobile-dock { display: grid !important; } }
    .admin-desktop .bottom-nav-item,
    .admin-desktop .mac-mobile-dock .bottom-nav-item {
      color: var(--gj-muted) !important; background: transparent !important; box-shadow: none !important;
      border-radius: 0 !important; transform: none !important; width: auto !important; height: auto !important; flex: 1 1 0 !important;
    }
    .admin-desktop .bottom-nav-item i,
    .admin-desktop .mac-mobile-dock .bottom-nav-item i { color: var(--gj-muted) !important; filter: none !important; }
    .admin-desktop .bottom-nav-item span,
    .admin-desktop .mac-mobile-dock .bottom-nav-item span { display: block !important; }
    .admin-desktop .bottom-nav-item.active,
    .admin-desktop .bottom-nav-item.active i,
    .admin-desktop .mac-mobile-dock .bottom-nav-item.active,
    .admin-desktop .mac-mobile-dock .bottom-nav-item.active i { color: var(--gj-green) !important; }
    .admin-desktop .bottom-nav-item.active::after,
    .admin-desktop .mac-mobile-dock .bottom-nav-item.active::after { display: none !important; }
    .admin-desktop .bottom-nav-more-menu { background: #fff !important; border: 1px solid var(--gj-line) !important; border-radius: 16px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 28px rgba(17,24,39,.12) !important; }
    .admin-desktop .bottom-nav-more-item { color: var(--gj-ink) !important; }

    /* LOGIN PAGE — Gojek green hero */
    .login-bg {
      --gj-green: #00AA13; --gj-green-dark: #008A11; --gj-ink: #1A1A1A; --gj-muted: #6B7280; --gj-line: #ECEDEF;
      min-height: 100dvh !important;
      background: linear-gradient(135deg, #00AA13 0%, #008A11 60%, #00700E 100%) !important;
      padding: 1.5rem 1rem !important;
    }
    .login-bg::before, .login-bg::after { display: none !important; }
    .login-card {
      position: relative; z-index: 1;
      background: #fff !important; color: #1A1A1A !important;
      border: 0 !important; border-radius: 20px !important;
      padding: 2rem 1.5rem !important; max-width: 400px !important;
      box-shadow: 0 24px 60px rgba(0,40,5,.3) !important; backdrop-filter: none !important;
    }
    .login-card h1 { color: #1A1A1A !important; font-size: 1.5rem !important; letter-spacing: -.02em !important; }
    .login-card .login-subtitle { color: #6B7280 !important; }
    .login-card .login-lock-label { color: #00AA13 !important; background: #E8F8EC; padding: .25rem .6rem; border-radius: 999px; }
    .login-card .form-label { color: #1A1A1A !important; font-weight: 600; }
    .login-card .form-control {
      color: #1A1A1A !important; background: #fff !important;
      border: 1px solid #ECEDEF !important; border-radius: 12px !important; min-height: 48px;
    }
    .login-card .form-control::placeholder { color: #9CA3AF !important; }
    .login-card .form-control:focus { border-color: #00AA13 !important; box-shadow: 0 0 0 3px rgba(0,170,19,.15) !important; }
    /* GButton emits .btn.btn-primary — override directly (not .btn-login which is dead) */
    .login-card .btn-primary {
      min-height: 48px; border-radius: 999px !important; font-weight: 700;
      color: #fff !important; background: #00AA13 !important; border-color: #00AA13 !important;
    }
    .login-card .btn-primary:hover, .login-card .btn-primary:focus { background: #008A11 !important; border-color: #008A11 !important; }

    /* ============================================================
       GOJEK-STYLE THEME for LANDING (/) + WARRANTY (/warranty)
       Flips dark blue/purple .lp / .landing-home / .warranty-* to
       Gojek green palette. Mobile-first.
       ============================================================ */
    /* Landing root: dark blue gradient → Gojek green-tinted light */
    .lp.landing, .lp {
      background: linear-gradient(180deg, #F4F5F7 0%, #ECFDF5 50%, #F4F5F7 100%) !important;
      color: #1A1A1A !important;
    }
    .lp-aurora-a, .lp-aurora-b { opacity: .25 !important; }
    .lp-aurora-a { background: radial-gradient(circle, rgba(0,170,19,.4), transparent) !important; }
    .lp-aurora-b { background: radial-gradient(circle, rgba(0,138,17,.3), transparent) !important; }
    .lp-grid { background-image: linear-gradient(rgba(0,170,19,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,170,19,.05) 1px, transparent 1px) !important; }

    /* Landing topbar */
    .lp .landing-topbar { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid #ECEDEF !important; box-shadow: 0 1px 8px rgba(17,24,39,.04) !important; }
    .lp .landing-topbar-brand span { color: #1A1A1A !important; font-weight: 700; }
    .lp .landing-topbar-link { color: #6B7280 !important; }
    .lp .landing-topbar-link:hover { color: #00AA13 !important; }

    /* Hero */
    .lp-hero h1 { color: #1A1A1A !important; text-shadow: none !important; }
    .lp-grad { background: linear-gradient(135deg, #00AA13, #008A11) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
    .lp-hero p { color: #6B7280 !important; }
    .lp-chip { background: #E8F8EC !important; color: #008A11 !important; border: 1px solid rgba(0,170,19,.2) !important; }
    .lp-chip .dot { background: #00AA13 !important; }
    .lp-proof span { color: #6B7280 !important; }
    .lp-proof i { color: #00AA13 !important; }

    /* Buttons */
    .lp-btn-primary { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 20px rgba(0,138,17,.25) !important; }
    .lp-btn-primary:hover { background: linear-gradient(135deg, #008A11, #00700E) !important; color: #fff !important; }
    .lp-btn-ghost { background: #fff !important; color: #00AA13 !important; border: 1px solid #ECEDEF !important; }
    .lp-btn-ghost:hover { background: #E8F8EC !important; color: #008A11 !important; border-color: #00AA13 !important; }

    /* Console preview */
    .lp-console { background: #fff !important; border: 1px solid #ECEDEF !important; box-shadow: 0 12px 40px rgba(17,24,39,.08) !important; }
    .lp-console-bar { background: #F4F5F7 !important; border-bottom: 1px solid #ECEDEF !important; }
    .lp-console-body { background: #fff !important; }
    .lp-console-status strong { color: #1A1A1A !important; }
    .lp-live { background: #E8F8EC !important; color: #00AA13 !important; }
    .lp-stat small { color: #6B7280 !important; }
    .lp-stat { background: #F4F5F7 !important; border-color: #ECEDEF !important; }
    .lp-stat strong { color: #1A1A1A !important; }
    .lp-usage-label { color: #6B7280 !important; }
    .lp-usage-label strong { color: #1A1A1A !important; }
    .lp-usage-track { background: #ECEDEF !important; }
    .lp-usage-fill { background: linear-gradient(90deg, #00AA13, #008A11) !important; }
    .lp-route span { color: #6B7280 !important; }
    .lp-route-node { background: #00AA13 !important; }
    .lp-route-line { background: #ECEDEF !important; }
    .lp-route-line::after { background: #00AA13 !important; }

    /* Models table */
    .lp-models-label { color: #6B7280 !important; }

    /* Element Plus landing tables — Gojek light theme overrides the dark-glass defaults */
    .lp .lp-model-table-wrap { background: #fff !important; border: 1px solid #ECEDEF !important; backdrop-filter: none !important; box-shadow: 0 2px 10px rgba(17,24,39,.04) !important; }
    .lp .lp-el-table { --el-table-text-color: #1A1A1A !important; --el-table-header-text-color: #6B7280 !important; --el-table-header-bg-color: #F4F5F7 !important; --el-table-row-hover-bg-color: #F6FBF6 !important; --el-table-border-color: #ECEDEF !important; }
    .lp .lp-el-table .el-table__header-wrapper th.el-table__cell { background: #F4F5F7 !important; color: #6B7280 !important; }
    .lp .lp-el-table .el-table__cell { color: #1A1A1A; border-color: #ECEDEF !important; }
    .lp .lp-el-table .el-table__empty-text { color: #6B7280 !important; }
    .lp .lp-el-table .lp-pricing-popular td.el-table__cell { background: #E8F8EC !important; }

    /* Online/Offline model tabs */
    .lp-model-tabs { display: flex; gap: .5rem; margin-bottom: .75rem; }
    .lp-model-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .9rem; border-radius: 999px; border: 1px solid #ECEDEF; background: #fff; color: #6B7280; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
    .lp-model-tab:hover { border-color: #00AA13; color: #008A11; }
    .lp-model-tab.active { background: #E8F8EC; border-color: #00AA13; color: #008A11; }
    .lp-model-tab-dot { width: 8px; height: 8px; border-radius: 50%; }
    .lp-model-tab-dot.online { background: #00AA13; }
    .lp-model-tab-dot.offline { background: #DC2626; }
    .lp-model-tab-count { background: #F4F5F7; color: #6B7280; border-radius: 999px; padding: 0 .45rem; font-size: .68rem; font-weight: 700; }
    .lp-model-tab.active .lp-model-tab-count { background: rgba(0,170,19,.15); color: #008A11; }
    .lp-model-table { background: #fff !important; border: 1px solid #ECEDEF !important; border-radius: 16px; overflow: hidden; }
    .lp-model-table thead th { background: #F4F5F7 !important; color: #6B7280 !important; border-bottom: 1px solid #ECEDEF !important; }
    .lp-model-table td { border-bottom: 1px solid #ECEDEF !important; color: #1A1A1A !important; }
    .lp-model-name { color: #1A1A1A !important; }
    .lp-model-name > i { color: #00AA13 !important; }
    .lp-model-status.available { background: #E8F8EC !important; color: #008A11 !important; }
    .lp-model-status.oos { background: #FEE2E2 !important; color: #DC2626 !important; }
    .lp-vision { color: #00AA13 !important; }
    .lp-no-vision { color: #9CA3AF !important; }

    /* Features */
    .lp-feature { background: #fff !important; border: 1px solid #ECEDEF !important; border-radius: 16px; box-shadow: 0 2px 10px rgba(17,24,39,.04) !important; }
    .lp-feature:hover { border-color: #00AA13 !important; transform: translateY(-2px) !important; }
    .lp-feature-ico { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; }
    .lp-feature h3 { color: #1A1A1A !important; }
    .lp-feature p { color: #6B7280 !important; }

    /* Section heads */
    .lp-kicker { color: #00AA13 !important; font-weight: 700; }
    .lp-section-head h2 { color: #1A1A1A !important; }
    .lp-section-copy { color: #6B7280 !important; }

    /* Pricing table */
    .lp-pricing-table th { background: #F4F5F7 !important; color: #6B7280 !important; }
    .lp-pricing-table td { color: #1A1A1A !important; }
    .lp-pricing-popular td { background: #E8F8EC !important; }
    .lp-pricing-popular td:first-child { box-shadow: inset 3px 0 0 #00AA13 !important; }
    .lp-pricing-price { color: #00AA13 !important; }
    .lp-pricing-price span { color: #008A11 !important; }
    .lp-pricing-validity { color: #6B7280 !important; }
    .lp-pricing-validity i { color: #00AA13 !important; }
    .lp-pricing-unit { color: #008A11 !important; }
    .lp-pricing-description { color: #6B7280 !important; }
    .lp-pricing-package { color: #1A1A1A !important; }
    .lp-pricing-package small { color: #6B7280 !important; }

    /* Steps */
    .lp-step { background: #fff !important; border: 1px solid #ECEDEF !important; border-radius: 16px; }
    .lp-step:hover { border-color: #00AA13 !important; }
    .lp-step-num { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; }
    .lp-step strong { color: #1A1A1A !important; }
    .lp-step p { color: #6B7280 !important; }

    /* Warranty mini-section */
    .lp-warranty-panel { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; border-radius: 20px; }
    .lp-warranty-copy h2 { color: #fff !important; }
    .lp-warranty-copy p { color: rgba(255,255,255,.85) !important; }
    .lp-kicker i { color: #fff !important; }
    .lp-warranty-rate { background: rgba(255,255,255,.15) !important; color: #fff !important; }
    .lp-warranty-rate i { color: #fff !important; }
    .lp-warranty-link { color: #fff !important; }
    .lp-refund-card { background: #fff !important; color: #1A1A1A !important; border-radius: 16px; }
    .lp-refund-card label { color: #6B7280 !important; }
    .lp-refund-input { color: #1A1A1A !important; background: #F4F5F7 !important; border-color: #ECEDEF !important; }
    .lp-refund-card .input-group-text { color: #008A11 !important; background: #E8F8EC !important; border-color: #ECEDEF !important; }
    .lp-refund-result { border-top: 1px solid #ECEDEF !important; }
    .lp-refund-result small { color: #6B7280 !important; }
    .lp-refund-input:focus { border-color: #00AA13 !important; box-shadow: 0 0 0 3px rgba(0,170,19,.15) !important; }
    .lp-refund-result strong { color: #00AA13 !important; }
    .lp-refund-formula { color: #6B7280 !important; }

    /* CTA */
    .lp-cta-inner { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; border-radius: 20px; }
    .lp-cta-inner::before { background: conic-gradient(from 0deg, rgba(255,255,255,.15), transparent, rgba(255,255,255,.15)) !important; }
    .lp-cta h2 { color: #fff !important; }
    .lp-cta p { color: rgba(255,255,255,.85) !important; }

    /* Footer */
    .lp-footer { color: #6B7280 !important; border-top: 1px solid #ECEDEF !important; }
    .lp-footer-link { color: #00AA13 !important; }
    .lp-footer-link:hover { color: #008A11 !important; }

    /* ============ WARRANTY PAGE (/warranty) ============ */
    .landing-home {
      background: linear-gradient(180deg, #F4F5F7 0%, #ECFDF5 50%, #F4F5F7 100%) !important;
      color: #1A1A1A !important;
    }
    .landing-home::before, .landing-home::after { display: none !important; }
    .landing-home .landing-grid { background-image: linear-gradient(rgba(0,170,19,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,170,19,.05) 1px, transparent 1px) !important; }
    .landing-home .landing-topbar { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid #ECEDEF !important; box-shadow: 0 1px 8px rgba(17,24,39,.04) !important; }
    .landing-home .landing-topbar-brand span { color: #1A1A1A !important; font-weight: 700; }
    .landing-footer { color: #6B7280 !important; border-top: 1px solid #ECEDEF !important; background: #fff !important; }
    .footer-warranty-link { color: #00AA13 !important; }
    .footer-warranty-link:hover { color: #008A11 !important; }
    /* Bottom nav */
    .landing-bottom-nav { background: #fff !important; border-top: 1px solid #ECEDEF !important; box-shadow: 0 -1px 8px rgba(17,24,39,.04) !important; backdrop-filter: none !important; }
    .landing-bottom-nav a { color: #6B7280 !important; }
    .landing-bottom-nav a i { color: #6B7280 !important; }
    .landing-bottom-nav a.active, .landing-bottom-nav a.active i { color: #00AA13 !important; }
    .landing-bottom-nav a:nth-child(1).active i, .landing-bottom-nav a:nth-child(2).active i, .landing-bottom-nav a:nth-child(3).active i { color: #00AA13 !important; }
    .landing-bottom-nav a:not(.active):hover { color: #00AA13 !important; }

    /* Warranty hero */
    .warranty-hero { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; }
    .warranty-title { background: linear-gradient(135deg, #fff, #E8F8EC) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
    .warranty-subtitle { color: rgba(255,255,255,.85) !important; }
    .warranty-hero .chip { background: rgba(255,255,255,.2) !important; color: #fff !important; }

    /* Warranty cards */
    .warranty-card { background: #fff !important; border: 1px solid #ECEDEF !important; border-radius: 16px; box-shadow: 0 2px 10px rgba(17,24,39,.04) !important; backdrop-filter: none !important; }
    .warranty-card:hover { border-color: #00AA13 !important; transform: translateY(-2px) !important; }
    .warranty-card h3 { color: #1A1A1A !important; }
    .warranty-card p { color: #6B7280 !important; }
    .warranty-card-icon { color: #00AA13 !important; }

    /* Policy */
    .warranty-section-title { color: #1A1A1A !important; }
    .warranty-section-sub { color: #6B7280 !important; }
    .warranty-policy-content { background: #fff !important; border: 1px solid #ECEDEF !important; border-radius: 16px; box-shadow: 0 2px 10px rgba(17,24,39,.04) !important; backdrop-filter: none !important; }
    .warranty-rule { border-bottom: 1px solid #ECEDEF !important; }
    .warranty-rule h4 { color: #1A1A1A !important; }
    .warranty-rule p { color: #6B7280 !important; }
    .warranty-rule-num { background: linear-gradient(135deg, #00AA13, #008A11) !important; color: #fff !important; }
    .warranty-formula-box { background: #E8F8EC !important; border: 1px solid rgba(0,170,19,.2) !important; border-radius: 12px; }
    .warranty-formula-box code { color: #008A11 !important; }
    .warranty-example-box { background: #F4F5F7 !important; border: 1px solid #ECEDEF !important; border-radius: 12px; }
    .warranty-example-box .label { color: #6B7280 !important; }
    .warranty-example-box .value { color: #1A1A1A !important; }
    .warranty-example-box .value-highlight { color: #00AA13 !important; }
    .warranty-example-box .value-highlight strong { color: #008A11 !important; }
    .warranty-example-box .divider { background: #ECEDEF !important; }

    /* Calculator */
    .warranty-calc { background: #fff !important; border: 1px solid #ECEDEF !important; border-radius: 16px; box-shadow: 0 2px 10px rgba(17,24,39,.04) !important; backdrop-filter: none !important; }
    .warranty-calc-price-per-m { color: #6B7280 !important; }
    .warranty-calc-price-per-m strong { color: #00AA13 !important; }
    .warranty-calc-form label { color: #1A1A1A !important; font-weight: 600; }
    .warranty-input { border-color: #ECEDEF !important; background: #fff !important; color: #1A1A1A !important; }
    .warranty-input:focus { border-color: #00AA13 !important; box-shadow: 0 0 0 3px rgba(0,170,19,.15) !important; }
    .form-hint { color: #9CA3AF !important; }
    .warranty-result-card { background: linear-gradient(135deg, #00AA13, #008A11) !important; border: 0 !important; border-radius: 16px; color: #fff !important; backdrop-filter: none !important; }
    .warranty-result-label { color: rgba(255,255,255,.8) !important; }
    .warranty-result-value { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; }
    .warranty-result-value.value-zero { color: rgba(255,255,255,.5) !important; -webkit-text-fill-color: rgba(255,255,255,.5) !important; }
    .warranty-result-breakdown .breakdown-label { color: rgba(255,255,255,.75) !important; }
    .warranty-result-breakdown .breakdown-value { color: #fff !important; }
    .warranty-result-breakdown .breakdown-row.highlight { background: rgba(255,255,255,.12) !important; border-radius: 8px; }
    .warranty-result-breakdown .breakdown-row.total { border-top: 1px solid rgba(255,255,255,.2) !important; }
    .warranty-result-note { color: rgba(255,255,255,.75) !important; }
    .warranty-divider { background: #ECEDEF !important; }

    /* Public quota dashboard macOS workspace. */
    .public-mac-desktop {
      min-height: 100vh; color: #1d1d1f;
      background: #241059 url('https://raw.githubusercontent.com/mhmdmhd6/Mac-OS-Desktop/master/background/iridescence.jpg') center / cover fixed no-repeat;
    }
    .public-mac-desktop .public-topbar {
      position: fixed; z-index: 100020; top: 0; left: 0; right: 0; display: flex;
      height: 42px; padding: 0 .6rem; color: rgba(255,255,255,.92); border: 0;
      background: linear-gradient(to right, rgba(110,20,56,.9), rgba(39,5,152,.9), rgba(229,76,45,.88));
      box-shadow: 0 2px 10px rgba(0,0,0,.12); backdrop-filter: blur(18px);
    }

    .public-mac-desktop .public-topbar-brand-name { color: #fff; font-size: .76rem; }
    .public-mac-desktop .public-topbar-sep { height: 18px; margin: 0 .5rem; }
    .public-mac-desktop .public-topbar-label { color: rgba(255,255,255,.72); font-size: .68rem; }
    .public-mac-desktop .public-topbar-actions { gap: .3rem; margin-left: auto; }
    .public-mac-desktop .public-topbar-actions > * { width: 28px; height: 26px; padding: 0; justify-content: center; border-radius: 7px; font-size: .72rem; }
    .public-mac-desktop .public-topbar-actions span { display: none !important; }
    .public-navbar-more { position: relative; }
    .public-mac-desktop .public-topbar-actions > .public-navbar-more { width: auto; height: auto; padding: 0; border: 0; background: transparent; }
    .public-navbar-action, .public-navbar-more > button { display: inline-flex; width: 28px; height: 26px; padding: 0; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.08); }
    .public-navbar-action:hover, .public-navbar-more > button:hover { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.16); }
    .public-navbar-action i, .public-navbar-more > button i { margin: 0; font-size: .78rem; line-height: 1; }
    .public-navbar-more-menu { position: absolute; z-index: 100030; top: 32px; right: 0; width: 210px; padding: 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: rgba(35,35,38,.9); box-shadow: 0 14px 32px rgba(0,0,0,.3); backdrop-filter: blur(24px); }
    .public-navbar-more-menu button, .public-navbar-more-menu a { display: flex; width: 100%; height: auto !important; align-items: center; justify-content: flex-start !important; gap: .55rem; padding: .45rem .55rem !important; color: #fff; text-decoration: none; text-align: left; border: 0; border-radius: 6px !important; background: transparent; font-size: .7rem !important; }
    .public-navbar-more-menu button:hover, .public-navbar-more-menu a:hover { background: #0a84ff; }
    .public-navbar-more-menu i { width: 15px; text-align: center; }
    .public-navbar-more-divider { height: 1px; margin: 4px; background: rgba(255,255,255,.14); }
    .public-window { position: fixed; top: 42px; right: 0; bottom: 0; left: 0; overflow: hidden; background: rgba(249,249,251,.9); backdrop-filter: blur(24px); }
    .public-window-titlebar { display: flex; height: 32px; align-items: center; justify-content: center; color: #515156; font-size: .72rem; font-weight: 650; border-bottom: 1px solid rgba(60,60,67,.16); background: rgba(244,244,246,.82); }
    .public-window-controls { position: absolute; left: 12px; display: flex; gap: 6px; }
    .public-window-controls button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #ff5f57; }
    .public-window-controls button:nth-child(2) { background: #febc2e; }
    .public-window-controls button:nth-child(3) { background: #28c840; }
    .public-window.public-window-maximized { top: 42px; right: 0; bottom: 0; left: 0; border: 0; border-radius: 0; }
    .public-mac-desktop .public-content-wrap { width: 100%; max-width: none; height: calc(100% - 32px); margin: 0; padding: .7rem .6rem calc(78px + env(safe-area-inset-bottom, 0px)); overflow: auto; scrollbar-gutter: stable; }
    .public-mac-desktop .public-content-wrap > * { width: 100%; max-width: 1180px; margin-right: auto; margin-left: auto; }
    .public-mac-desktop .card, .public-mac-desktop .modal-content, .public-mac-desktop .public-tab-content, .public-mac-desktop .connect-sidebar {
      border: 1px solid rgba(255,255,255,.72); border-radius: 14px; background: rgba(255,255,255,.76); box-shadow: 0 10px 26px rgba(31,38,75,.1); backdrop-filter: blur(20px);
    }
    .public-mac-desktop .card-header { min-height: 34px; padding: .48rem .65rem; border-color: rgba(60,60,67,.12); background: rgba(248,248,250,.58); }
    .public-mac-desktop .card-header h5, .public-mac-desktop .card-header h6 { margin: 0; font-size: .78rem; }
    .public-mac-desktop .card-header i { font-size: .72rem; }
    .public-mac-desktop .card-body { padding: .75rem; }
    .public-mac-desktop .card-body h4, .public-mac-desktop .card-body h5, .public-mac-desktop .card-body h6 { line-height: 1.25; }
    .public-mac-desktop .card-body h5, .public-mac-desktop .card-body h6 { font-size: .8rem; }
    .public-mac-desktop .text-muted, .public-mac-desktop small { font-size: .7rem; }
    .public-mac-desktop .form-control, .public-mac-desktop .form-select { min-height: 40px; border-color: rgba(60,60,67,.2); border-radius: 10px; background: rgba(255,255,255,.76); }
    .public-mac-desktop .input-group { flex-wrap: nowrap; border-radius: 10px; }
    .public-mac-desktop .input-group > * { border-radius: 0; }
    .public-mac-desktop .input-group > :first-child { border-radius: 10px 0 0 10px !important; }
    .public-mac-desktop .input-group > :last-child { border-radius: 0 10px 10px 0 !important; }
    .public-mac-desktop .btn { border-radius: 9px; font-weight: 600; }
    .public-mac-desktop .table thead th { padding: .4rem .5rem; color: #6e6e73; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; background: rgba(120,120,128,.06); }
    .public-mac-desktop .table tbody td { padding: .38rem .5rem; font-size: 10px; }
    .public-mac-desktop .public-leaderboard-card > .card-header { min-height: 34px; padding: .48rem .65rem; }
    .public-mac-desktop .public-leaderboard-card > .card-header h5 { margin: 0; font-size: .78rem; line-height: 1.2; }
    .public-mac-desktop .public-leaderboard-card > .card-header h5 i { margin-right: .35rem !important; font-size: .72rem; }
    .public-mac-desktop .public-leaderboard-card > .card-body { padding: .6rem !important; }
    .public-mac-desktop .public-leaderboard-card .nav-tabs { gap: 2px; margin-bottom: .6rem !important; border-bottom-color: rgba(60,60,67,.14); }
    .public-mac-desktop .public-leaderboard-card .nav-tabs .nav-link { display: inline-flex; min-height: 28px; align-items: center; gap: .3rem; padding: .28rem .48rem; color: #6e6e73; border-radius: 7px 7px 0 0; font-size: .68rem; font-weight: 600; white-space: nowrap; }
    .public-mac-desktop .public-leaderboard-card .nav-tabs .nav-link i { margin: 0; font-size: .7rem; }
    .public-mac-desktop .public-leaderboard-card .nav-tabs .nav-link.active { color: #0a84ff; background: rgba(255,255,255,.72); }
    .public-mac-desktop .public-leaderboard-card .nav-tabs + .d-flex { gap: .25rem !important; margin-bottom: .55rem !important; }
    .public-mac-desktop .public-leaderboard-card .nav-tabs + .d-flex .btn { min-height: 26px; padding: .22rem .45rem; border-radius: 7px; font-size: .65rem; }
    .public-mac-desktop .public-leaderboard-card .pagination .page-link { padding: .25rem .45rem; font-size: .65rem; }
    .public-mac-desktop .public-tabs { display: none; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: rgba(255,255,255,.64); }
    .public-mac-desktop .public-tab { min-height: 30px; padding: .3rem .5rem; border: 0; border-radius: 7px; font-size: .68rem; }
    .public-mac-desktop .public-tab.active { color: #0a84ff; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
    .public-mac-desktop .reseller-tabs { display: flex; gap: 2px; padding: 0; margin-bottom: .6rem; overflow-x: auto; border-bottom: 1px solid rgba(60,60,67,.14); border-radius: 0; background: transparent; }
    .public-mac-desktop .reseller-tabs button { flex: 0 0 auto; min-height: 28px; padding: .28rem .48rem; color: #6e6e73; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; background: transparent; font-size: .68rem; font-weight: 600; white-space: nowrap; }
    .public-mac-desktop .reseller-tabs button.active { color: #0a84ff; border-bottom-color: #0a84ff; background: rgba(255,255,255,.72); box-shadow: none; }
    .public-reseller-panel, .public-reseller-panel > *, .public-reseller-panel .card, .public-reseller-panel .card-body { min-width: 0; max-width: 100%; }
    .public-reseller-panel .card { overflow: hidden; }
    .public-reseller-panel .reseller-tabs { width: 100%; padding-bottom: 1px; scrollbar-width: none; }
    .public-reseller-panel .reseller-tabs::-webkit-scrollbar { display: none; }
    .public-reseller-panel .reseller-tabs button { flex: 1 0 auto; }
    .public-reseller-panel .reseller-customer-card { width: 100%; min-height: 62px; }
    .public-reseller-panel .card-body > .row > .col-4 { width: 100%; }
    .public-reseller-panel .card-body > .row > .col-4 .card-body { min-height: 58px; }
    .public-reseller-panel .fs-5 { font-size: .9rem !important; }
    .public-reseller-panel .d-flex { min-width: 0; }
    .public-reseller-panel .fw-bold, .public-reseller-panel .font-monospace { overflow-wrap: anywhere; }
    .public-reseller-panel .modal-dialog { width: calc(100% - 1rem); margin: .5rem auto; }
    @media (min-width: 480px) {
      .public-reseller-panel .card-body > .row > .col-4 { width: 33.333333%; }
    }
    @media (min-width: 768px) {
      .public-reseller-panel .reseller-tabs button { flex: 0 0 auto; }
      .public-reseller-panel .modal-dialog { width: auto; margin: 1.75rem auto; }
    }
    .public-mac-desktop .public-tab-content { margin-top: .45rem; padding: .75rem; }
    .public-mac-desktop .quota-stats-grid { grid-template-columns: 1fr; gap: .45rem; }
    .public-mac-desktop .quota-stat-card { padding: .55rem; gap: .5rem; border-radius: 10px; }
    .public-mac-desktop .quota-stat-icon { width: 30px; height: 30px; border-radius: 8px; font-size: .82rem; }
    .public-mac-desktop .quota-stat-label, .public-mac-desktop .quota-stat-meta { font-size: .6rem; }
    .public-mac-desktop .quota-stat-value { font-size: .82rem; }
    .public-mac-desktop .modal-header, .public-mac-desktop .modal-footer { padding: .6rem .75rem; border-color: rgba(60,60,67,.12); }
    .public-mac-desktop .modal-title { font-size: .82rem; }
    .public-mac-desktop .modal-body { padding: .75rem; }
    .public-mac-desktop .modal.d-block { z-index: 100050 !important; padding: .65rem; background: rgba(20,20,24,.34) !important; backdrop-filter: blur(8px) !important; }
    .public-mac-desktop .modal.d-block .modal-dialog { display: flex; width: min(100%, 560px); min-height: calc(100% - 1rem); margin: .5rem auto; align-items: center; }
    .public-mac-desktop .modal.d-block .modal-dialog.modal-sm { max-width: 380px; }
    .public-mac-desktop .modal.d-block .modal-dialog.modal-lg { max-width: 760px; }
    .public-mac-desktop .modal.d-block .modal-content { width: 100%; max-height: calc(100vh - 2rem); overflow: hidden; border: 1px solid rgba(255,255,255,.76); border-radius: 16px; background: rgba(248,248,250,.94); box-shadow: 0 24px 60px rgba(20,20,45,.32), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(28px) saturate(140%); }
    .public-mac-desktop .modal.d-block .modal-header { position: relative; min-height: 36px; justify-content: center; background: rgba(238,238,241,.88); }
    .public-mac-desktop .modal.d-block .modal-header::before { content: ''; position: absolute; left: 12px; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: 18px 0 #febc2e, 36px 0 #28c840; }
    .public-mac-desktop .modal.d-block .modal-header > div { min-width: 0; text-align: center; }
    .public-mac-desktop .modal.d-block .modal-header .btn-close { position: absolute; right: 10px; width: 22px; height: 22px; padding: 0; margin: 0; background-size: 9px; }
    .public-mac-desktop .modal.d-block .modal-title { max-width: calc(100% - 110px); overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .public-mac-desktop .modal.d-block .modal-body { overflow-y: auto; }
    .public-mac-desktop .modal.d-block .modal-footer { min-height: 42px; background: rgba(238,238,241,.7); }
    .public-mac-desktop .modal.d-block .modal-footer .btn { min-height: 30px; padding: .3rem .62rem; font-size: .7rem; }
    .public-mac-desktop .modal.d-block .form-label { margin-bottom: .3rem; font-size: .7rem; }
    .public-mac-desktop .modal.d-block .form-control, .public-mac-desktop .modal.d-block .form-select { min-height: 36px; font-size: .8rem; }
    .public-mac-desktop .modal.d-block textarea.form-control { min-height: 76px; }
    .public-mac-desktop .alert { border: 0; border-radius: 10px; }
    .public-pin-stage { position: fixed; z-index: 10000; inset: 42px 0 0; display: grid; min-height: 0; padding: .75rem; place-items: center; pointer-events: none; }
    .public-window:has(.public-pin-stage) { background: transparent; box-shadow: none; backdrop-filter: none; }
    .public-window:has(.public-pin-stage) .public-window-titlebar { background: rgba(244,244,246,.62); backdrop-filter: blur(18px); }
    .public-content-wrap:has(.public-pin-stage) { max-width: none !important; padding: 0 !important; background: transparent; }
    .public-pin-stage .pin-gate { width: min(100%, 420px); max-height: calc(100vh - 80px); margin: 0 !important; overflow-y: auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(20,20,45,.24); pointer-events: auto; }
    .public-pin-stage .pin-gate .card-body { padding: 1rem !important; }
    .public-pin-stage .pin-gate .form-control-lg { min-height: 44px; font-size: 1rem; }
    @media (min-width: 768px) { .public-pin-stage .pin-gate .card-body { padding: 1.25rem !important; } }
    .public-mac-desktop .public-bottom-nav { position: fixed; z-index: 100010; display: flex !important; grid-template-columns: none; left: 50%; right: auto; bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 1.1rem); min-height: 58px; padding: 5px; align-items: center; justify-content: center; gap: 6px; overflow: visible; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.58); border-radius: 17px; background: rgba(238,238,242,.82); box-shadow: 0 12px 28px rgba(25,25,55,.25); backdrop-filter: blur(24px); }
    .public-mac-desktop .public-bottom-nav button, .public-mac-desktop .public-bottom-nav-more { color: #6e6e73; font-size: .58rem; }
    .public-mac-desktop .public-bottom-nav button { flex: 0 0 46px; width: 46px; height: 46px; padding: 0; color: #fff; border-radius: 12px; background: linear-gradient(145deg,#4c9cff,#1767d7); box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(25,75,165,.27); }
    .public-mac-desktop .public-bottom-nav button:nth-child(2) { background: linear-gradient(145deg,#67c58b,#209b60); }
    .public-mac-desktop .public-bottom-nav button:nth-child(3) { background: linear-gradient(145deg,#9a8cff,#6355d9); }
    .public-mac-desktop .public-bottom-nav button:nth-child(4) { background: linear-gradient(145deg,#ffbd5a,#e68021); }
    .public-mac-desktop .public-bottom-nav button:nth-child(5) { background: linear-gradient(145deg,#fa866f,#dc4c61); }
    .public-mac-desktop .public-bottom-nav button span { display: none; }
    .public-mac-desktop .public-bottom-nav button i { font-size: 1.15rem; }
    .public-mac-desktop .public-bottom-nav button.active { position: relative; color: #fff; transform: translateY(-3px); }
    .public-mac-desktop .public-bottom-nav button.active i { width: auto; height: auto; border-radius: 0; background: transparent; }
    .public-mac-desktop .public-bottom-nav button.active::after { content: ''; position: absolute; bottom: -5px; width: 4px; height: 4px; border-radius: 50%; background: #1d1d1f; }
    .public-mac-desktop .public-bottom-nav button.active, .public-mac-desktop .public-bottom-nav-more.active { color: #fff; }
    .public-mac-desktop .public-nav-more { border-color: rgba(255,255,255,.6); background: rgba(35,35,38,.92); backdrop-filter: blur(24px); }
    .public-mac-desktop .admin-fab { width: 44px; height: 44px; font-size: 1rem; background: #0a84ff; }
    .public-mac-desktop .admin-fab-wrap { position: fixed; z-index: 100040; inset: 0; display: grid; place-items: center; pointer-events: none; }
    .public-mac-desktop .admin-fab-wrap > .admin-fab { display: none; }
    .public-mac-desktop .admin-fab-backdrop { position: fixed; z-index: 0; inset: 0; background: rgba(20,20,24,.34); backdrop-filter: blur(8px); pointer-events: auto; }
    .public-mac-desktop .admin-fab-menu { position: relative; z-index: 1; right: auto; bottom: auto; width: min(calc(100vw - 1.5rem), 360px); padding: 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 16px; background: rgba(246,246,248,.9); box-shadow: 0 24px 60px rgba(20,20,45,.32), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(28px) saturate(145%); pointer-events: auto; }
    .public-mac-desktop .admin-fab-menu::before { content: 'Admin Actions'; display: block; padding: .45rem .55rem .6rem; color: #515156; border-bottom: 1px solid rgba(60,60,67,.14); font-size: .74rem; font-weight: 700; text-align: center; }
    .public-mac-desktop .admin-fab-menu button { min-height: 36px; padding: .48rem .6rem; color: #1d1d1f; border-radius: 8px; font-size: .72rem; }
    .public-mac-desktop .admin-fab-menu button:hover { color: #fff; background: #0a84ff; }
    .public-mac-desktop .admin-fab-menu-divider { background: rgba(60,60,67,.14); }
    .mac-admin-actions-modal { position: fixed; z-index: 100060; inset: 0; display: grid; padding: .75rem; place-items: center; background: rgba(20,20,24,.34); backdrop-filter: blur(8px); }
    .mac-admin-actions-dialog { width: min(100%, 360px); padding: 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 16px; background: rgba(246,246,248,.94); box-shadow: 0 24px 60px rgba(20,20,45,.34), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(28px) saturate(145%); }
    .mac-admin-actions-title { position: relative; padding: .48rem .55rem .65rem; color: #515156; border-bottom: 1px solid rgba(60,60,67,.14); font-size: .74rem; font-weight: 700; text-align: center; }
    .mac-admin-actions-title::before { content: ''; position: absolute; top: .58rem; left: .4rem; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 17px 0 #febc2e, 34px 0 #28c840; }
    .mac-admin-actions-dialog > button { display: flex; width: 100%; min-height: 36px; align-items: center; gap: .65rem; padding: .48rem .6rem; color: #1d1d1f; border: 0; border-radius: 8px; background: transparent; font-size: .72rem; font-weight: 600; text-align: left; }
    .mac-admin-actions-dialog > button:hover, .mac-admin-actions-dialog > button:focus { color: #fff; outline: 0; background: #0a84ff; }
    .mac-admin-actions-dialog > button i { width: 18px; text-align: center; }
    .mac-admin-actions-divider { height: 1px; margin: 4px; background: rgba(60,60,67,.14); }
    .mac-quota-choice { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; gap: .65rem; padding: .55rem .65rem; color: #1d1d1f; border: 1px solid rgba(60,60,67,.14); border-radius: 10px; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); text-align: left; transition: border-color .14s, background .14s, transform .14s; }
    .mac-quota-choice:hover, .mac-quota-choice:focus { color: #1d1d1f; outline: 0; border-color: rgba(10,132,255,.45); background: rgba(10,132,255,.08); transform: translateY(-1px); }
    .mac-quota-choice.active { border-color: #0a84ff; background: rgba(10,132,255,.12); box-shadow: inset 0 0 0 1px rgba(10,132,255,.4); }
    .mac-quota-choice.active .mac-quota-choice-price { color: #0a84ff; }
    .mac-quota-choice-main { display: flex; min-width: 0; flex-direction: column; }
    .mac-quota-choice-title { font-size: .75rem; font-weight: 700; }
    .mac-quota-choice-meta { color: #6e6e73; font-size: .64rem; }
    .mac-quota-choice-price { flex-shrink: 0; color: #0a84ff; font-size: .68rem; font-weight: 650; }
    .mac-quota-custom { padding: .65rem; border: 1px solid rgba(60,60,67,.14); border-radius: 10px; background: rgba(255,255,255,.58); }
    .mac-quota-modal .modal-dialog.mac-quota-admin-dialog { width: min(100%, 480px); }
    .mac-quota-admin-dialog .modal-body { padding: .85rem; }
    .mac-quota-admin-summary { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; padding: .7rem; border: 1px solid rgba(60,60,67,.12); border-radius: 12px; background: rgba(255,255,255,.62); }
    .mac-quota-admin-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; font-size: .95rem; }
    .mac-quota-admin-summary-main { min-width: 0; }
    .mac-quota-admin-name { overflow: hidden; font-size: .8rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .mac-quota-admin-subtitle { margin-top: .08rem; color: #6e6e73; font-size: .66rem; }
    .mac-quota-section-label { margin: 0 0 .45rem; color: #515156; font-size: .68rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
    .mac-quota-package-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
    }
    @media (max-width: 479.98px) {
      .mac-quota-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    /* Topup tier grid (reseller public dashboard) — 3 columns */
    .gj-topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .gj-topup-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gj-line); border-radius: 12px; padding: .6rem .5rem; text-align: center; transition: border-color .14s; }
    .gj-topup-card:hover { border-color: var(--gj-green); }
    .gj-topup-card > .btn { margin-top: auto; }
    .gj-topup-card-daily1 { background: #fde047; border-color: #eab308; }
    .gj-topup-card-daily1:hover { border-color: #ca8a04; }
    .gj-topup-card-locked { opacity: .72; }
    .gj-topup-card-locked:hover { border-color: var(--gj-line); }
    /* Banner bonus topup USDT routebill (+20% utk nominal >= $100). */
    .gj-usdt-bonus-banner { display: flex; align-items: flex-start; gap: .4rem; padding: .7rem .85rem; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .8rem; line-height: 1.4; }
    .gj-usdt-bonus-banner i { color: #059669; margin-top: .1rem; }

    /* Currency toggle (IDR/USDT) — segmented control ala macOS, konsisten
       dengan .reseller-tabs. Pakai var tema supaya terlihat di light & dark. */
    .gj-currency-toggle {
      display: inline-flex; flex: 0 0 auto; padding: 3px; gap: 2px;
      border-radius: 999px;
      background: var(--gj-bg, #F4F5F7);
      border: 1px solid var(--gj-line, #E4E7EC);
      box-shadow: inset 0 1px 2px rgba(17,24,39,.06);
    }
    .gj-currency-toggle button {
      border: 0; background: transparent;
      color: var(--gj-muted, #6B7280);
      font-size: .68rem; font-weight: 700;
      padding: .24rem .7rem; border-radius: 999px;
      cursor: pointer; transition: background .14s, color .14s, box-shadow .14s;
    }
    .gj-currency-toggle button.active {
      background: var(--gj-green, #00AA13); color: #fff;
      box-shadow: 0 1px 4px rgba(0,138,17,.3);
    }
    .gj-currency-toggle button:not(.active):hover { color: var(--gj-green-dark, #008A11); }
    .public-mac-desktop.theme-dark .gj-currency-toggle {
      background: #1e293b; border-color: #334155; box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
    }
    .public-mac-desktop.theme-dark .gj-currency-toggle button { color: #94a3b8; }
    .public-mac-desktop.theme-dark .gj-currency-toggle button.active { background: var(--gj-green, #22c55e); color: #052e16; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
    .public-mac-desktop.theme-dark .gj-currency-toggle button:not(.active):hover { color: #fff; }

    /* Language switcher (flag/code) — public topbar & landing */
    .gj-lang-switcher { display: inline-flex; align-items: center; }
    .gj-lang-btn {
      display: inline-flex; align-items: center; gap: .3rem;
      border: 1px solid var(--gj-line, #E4E7EC); background: var(--gj-card, #fff);
      color: var(--gj-ink, #1A1A1A); border-radius: 999px;
      padding: .2rem .5rem; font-size: .72rem; font-weight: 700; cursor: pointer;
      transition: border-color .14s, box-shadow .14s, transform .14s;
    }
    .gj-lang-btn:hover { border-color: var(--gj-green, #00AA13); box-shadow: 0 2px 8px rgba(17,24,39,.08); transform: translateY(-1px); }
    .gj-lang-flag { font-size: .9rem; line-height: 1; }
    .gj-lang-code { letter-spacing: .04em; text-transform: uppercase; }
    .gj-lang-option {
      border: 1px solid var(--gj-line, #E4E7EC); background: transparent;
      border-radius: 10px; padding: .5rem .65rem; cursor: pointer; width: 100%;
      color: var(--gj-ink, #1A1A1A); transition: border-color .14s, background .14s;
    }
    .gj-lang-option:hover { border-color: var(--gj-green, #00AA13); }
    .gj-lang-option.active { border-color: var(--gj-green, #00AA13); background: #E8F8EC; }
    .public-mac-desktop.theme-dark .gj-lang-btn { background: #1e293b; border-color: #334155; color: #f1f5f9; }
    .public-mac-desktop.theme-dark .gj-lang-option { color: #f1f5f9; border-color: #334155; }
    .public-mac-desktop.theme-dark .gj-lang-option.active { background: rgba(34,197,94,.15); border-color: #22c55e; }
    .public-mac-desktop.theme-dark .gj-lang-option .text-muted { color: #94a3b8 !important; }

    /* Language switcher — fixed top-right on landing (no topbar there) */
    .lp-lang-fab { position: absolute; top: .8rem; right: 1rem; z-index: 5; }
    .mac-quota-package-grid .mac-quota-choice { min-height: 62px; padding: .65rem .7rem; }
    .mac-quota-package-grid .mac-quota-choice-title { font-size: .8rem; }
    .mac-quota-package-grid .mac-quota-choice-meta { margin-top: .1rem; }
    .mac-quota-package-grid .mac-quota-choice-price { color: #047857; font-size: .72rem; }
    .mac-quota-action-divider { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 .55rem; color: #8e8e93; font-size: .65rem; }
    .mac-quota-action-divider::before, .mac-quota-action-divider::after { height: 1px; flex: 1; background: rgba(60,60,67,.14); content: ''; }
    .mac-quota-custom .form-label { color: #515156; font-size: .68rem; font-weight: 700; }
    .mac-quota-custom .btn { min-height: 32px; font-size: .72rem; }
    /* Raw modal wrapper only — :not(.el-dialog) keeps these wrapper styles from
       leaking onto the GDialog el-dialog PANEL (grid centering, backdrop bg,
       padding would break the panel layout). */
    .mac-quota-modal:not(.el-dialog) { position: fixed; z-index: 100060; inset: 0; display: grid !important; padding: .75rem; place-items: center; background: rgba(20,20,24,.34) !important; backdrop-filter: blur(8px); }
    /* GDialog puts .mac-quota-modal on the el-dialog PANEL — reset every wrapper
      -only rule with !important (base uses !important too), then style it as the
       same macOS glass sheet. NOTE: margin must stay `auto` (not `0 auto`) —
       EP centers the panel inside the flex .el-overlay-dialog via auto margins,
       which also prevents flex stretch; `0 auto` made every dialog full-height. */
    .el-dialog.mac-quota-modal {
      position: relative !important; inset: auto !important; display: block !important;
      padding: 0 !important; z-index: auto !important; place-items: initial !important;
      backdrop-filter: none !important;
      background: rgba(246,246,248,.94) !important;
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: 0 24px 60px rgba(20,20,45,.34), inset 0 1px 0 rgba(255,255,255,.85);
      margin: auto !important;
    }
    .public-mac-desktop.theme-dark .el-dialog.mac-quota-modal,
    body.public-theme-dark .el-dialog.mac-quota-modal {
      background: var(--gj-card) !important;
      border-color: var(--gj-line);
      box-shadow: 0 24px 60px rgba(0,0,0,.5);
      color: var(--gj-ink);
    }
    .mac-quota-modal .modal-dialog { width: min(100%, 400px); margin: 0; }
    .mac-quota-modal .modal-dialog.modal-lg { width: min(100%, 680px); }
    .mac-quota-modal .modal-content { max-height: calc(100vh - 1.5rem); overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 16px; background: rgba(246,246,248,.94); box-shadow: 0 24px 60px rgba(20,20,45,.34), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(28px) saturate(145%); }
    .mac-quota-modal .modal-header { position: relative; min-height: 38px; padding: .48rem .7rem; justify-content: center; border-bottom: 1px solid rgba(60,60,67,.14) !important; background: transparent; }
    .mac-quota-modal .modal-header::before { content: ''; position: absolute; left: 11px; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 17px 0 #febc2e, 34px 0 #28c840; }
    .mac-quota-modal .modal-title { max-width: calc(100% - 100px); margin: 0; overflow: hidden; color: #515156; font-size: .74rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .mac-quota-modal .btn-close { position: absolute; right: 10px; width: 20px; height: 20px; padding: 0; margin: 0; background-size: 8px; }
    .mac-quota-modal .modal-body { padding: .7rem; overflow-y: auto; }
    .mac-quota-modal .modal-footer { padding: .5rem .7rem; border-top: 1px solid rgba(60,60,67,.12) !important; background: transparent; }
    .mac-quota-modal .modal-footer .btn { min-height: 30px; border-radius: 8px; font-size: .7rem; }
    /* GButton action lists inside reseller dialogs:
       (1) EP default `.el-button + .el-button { margin-left: 12px }` shifts every
           full-width stacked button sideways → right edge overflow. Reset it.
       (2) el-button wraps the slot in one inner <span>, so icon + label end up
           glued (`<i></i>Copy`). Make that span inline-flex with a gap so the
           icon is spaced from the label. */
    .mac-quota-modal .el-dialog__body .el-button + .el-button { margin-left: 0; }
    .mac-quota-modal .el-dialog__body .el-button > span { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
    /* DIALOG STANDARD (public quota):
       - Confirm dialogs: centered + auto width (shrink to content, capped) —
         no fixed width/height. Use GDialog size="auto" or .gj-confirm on raw modals.
       - Content dialogs (topup/add/form): keep fixed width (sm/default/lg). */
    .el-dialog.gj-dialog-auto { width: auto !important; max-width: min(92vw, 420px); }
    .mac-quota-modal.gj-confirm .modal-dialog { width: auto; max-width: min(100%, 400px); }
    .mac-announcement-item { padding: .65rem; border: 1px solid rgba(60,60,67,.12); border-radius: 10px; background: rgba(255,255,255,.66); }
    .mac-announcement-item-title { min-width: 0; color: #1d1d1f; font-size: .76rem; }
    .mac-announcement-item-content { color: #3a3a3c; font-size: .7rem; line-height: 1.55; overflow-wrap: anywhere; }
    .mac-announcement-item-content img { max-width: 100%; height: auto; border-radius: 8px; }
    @media (min-width: 480px) { .public-mac-desktop .quota-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (min-width: 768px) { .public-mac-desktop .quota-stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
    @media (min-width: 992px) {
      .public-mac-desktop .public-topbar { height: 30px; padding: 0 .5rem; }
      .public-window.public-window-maximized { top: 30px; }
      .public-pin-stage { inset: 30px 0 0; }
      .public-mac-desktop .public-bottom-nav { width: 100%; left: 0 !important; right: 0 !important; transform: none !important; border-radius: 0 !important; }
      .public-window { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
      .public-mac-desktop .public-content-wrap { max-width: none; margin: 0; padding: 1rem; }
      .public-mac-desktop .form-control, .public-mac-desktop .form-select { min-height: 34px; font-size: .82rem; }
      .public-mac-desktop .public-tab-content { padding: .85rem; }
      .public-mac-desktop .quota-stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    }

    /* ============================================================
       GOJEK-STYLE THEME for Public Quota Dashboard
       Overrides the macOS-glass chrome with a Gojek-like app shell:
       green app bar, GoPay quota card, service grid, white cards,
       green bottom nav. Mobile-first.
       ============================================================ */
    .public-mac-desktop {
      --gj-green: #00AA13;
      --gj-green-dark: #008A11;
      --gj-green-darker: #00700E;
      --gj-bg: #F4F5F7;
      --gj-card: #FFFFFF;
      --gj-ink: #1A1A1A;
      --gj-muted: #6B7280;
      --gj-line: #ECEDEF;
      --gj-radius: 16px;
      --gj-shadow: 0 2px 10px rgba(17,24,39,.06);
      --gj-shadow-lg: 0 8px 28px rgba(17,24,39,.12);
      background: var(--gj-bg) !important;
      min-height: 100vh;
    }

    /* ============ DARK MODE ============ */
    .public-mac-desktop.theme-dark {
      --gj-green: #22c55e;
      --gj-green-dark: #16a34a;
      --gj-green-darker: #15803d;
      --gj-bg: #0f172a;
      --gj-card: #1e293b;
      --gj-ink: #f1f5f9;
      --gj-muted: #94a3b8;
      --gj-line: #334155;
      --gj-shadow: 0 2px 10px rgba(0,0,0,.4);
      --gj-shadow-lg: 0 8px 28px rgba(0,0,0,.5);
      background: var(--gj-bg) !important;
      color: var(--gj-ink);
    }
    /* Override hardcoded whites */
    .public-mac-desktop.theme-dark .public-window { background: var(--gj-bg) !important; }
    .public-mac-desktop.theme-dark .public-bottom-nav { background: #0f172a !important; border-top-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .public-tab-content.is-full-bleed { background: transparent !important; }
    .public-mac-desktop.theme-dark .card,
    .public-mac-desktop.theme-dark .public-tab-content { background: var(--gj-card) !important; }
    .public-mac-desktop.theme-dark .card-header { background: #1e293b !important; border-bottom-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .form-control,
    .public-mac-desktop.theme-dark .form-select { background: #0f172a !important; border-color: var(--gj-line) !important; color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .form-control::placeholder { color: #64748b !important; }
    .public-mac-desktop.theme-dark .text-muted { color: var(--gj-muted) !important; }
    .public-mac-desktop.theme-dark .text-dark { color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .table { color: var(--gj-ink); }
    .public-mac-desktop.theme-dark .table-light,
    .public-mac-desktop.theme-dark .table thead th { background: #0f172a !important; color: var(--gj-muted) !important; }
    .public-mac-desktop.theme-dark .table tbody td { border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .bg-light { background: #0f172a !important; color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .border,
    .public-mac-desktop.theme-dark .border-bottom,
    .public-mac-desktop.theme-dark .border-top { border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .modal-content { background: var(--gj-card) !important; color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .modal-header { border-bottom-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .modal-footer { border-top-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .btn-light { background: var(--gj-card) !important; color: var(--gj-ink) !important; border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .btn-outline-secondary { color: var(--gj-muted) !important; border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .btn-outline-secondary:hover { background: var(--gj-bg) !important; color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .alert-light { background: var(--gj-card) !important; color: var(--gj-ink) !important; border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .code-block { background: #0f172a !important; color: #e2e8f0 !important; }
    .public-mac-desktop.theme-dark hr { border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .connect-api-key-box { background: #0f172a !important; border-color: var(--gj-line) !important; }
    .public-mac-desktop.theme-dark .gj-gopay-card { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
    .public-mac-desktop.theme-dark .gj-service-tile { background: var(--gj-card) !important; }
    .public-mac-desktop.theme-dark .gj-service-tile:hover { background: #283548 !important; }
    /* Chat: hardcoded whites */
    .public-mac-desktop.theme-dark .gj-chat-sidebar,
    .public-mac-desktop.theme-dark .gj-chat-header,
    .public-mac-desktop.theme-dark .gj-chat-input-wrap { background: var(--gj-card) !important; }
    .public-mac-desktop.theme-dark .gj-chat-input,
    .public-mac-desktop.theme-dark .gj-chat-icon-btn,
    .public-mac-desktop.theme-dark .gj-chat-model { background: #0f172a !important; border-color: var(--gj-line) !important; color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .gj-chat-msg-assistant .gj-chat-bubble { background: var(--gj-card) !important; border-color: var(--gj-line) !important; color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .gj-chat-session-item.active { background: rgba(34,197,94,.15) !important; }
    .public-mac-desktop.theme-dark .gj-chat-empty-ico { box-shadow: 0 8px 20px rgba(0,0,0,.4) !important; }

    /* --- Green app bar (replaces dark topbar) --- */
    .public-mac-desktop .public-topbar {
      height: 56px;
      padding: 0 .75rem;
      background: linear-gradient(135deg, var(--gj-green), var(--gj-green-dark));
      border-bottom: 0;
      box-shadow: 0 2px 8px rgba(0,138,17,.18);
      display: flex !important;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .public-mac-desktop .public-topbar-brand {
      gap: .5rem;
    }
    .public-mac-desktop .public-topbar-brand-name { color: #fff; font-size: .92rem; font-weight: 700; }
    .public-mac-desktop .public-topbar-sep { display: none; }
    .public-mac-desktop .public-topbar-label { display: none; }
    .public-mac-desktop .gj-greeting { color: #fff; font-size: .72rem; font-weight: 500; opacity: .92; line-height: 1.1; }
    .public-mac-desktop .gj-greeting b { display: block; font-size: .92rem; font-weight: 700; opacity: 1; }
    .public-mac-desktop .public-topbar-actions { gap: .25rem; margin-left: auto; }
    .public-mac-desktop .public-topbar-actions > * {
      width: 36px; height: 36px; padding: 0; justify-content: center;
      border-radius: 10px; font-size: .9rem; color: #fff;
      background: rgba(255,255,255,.16); border: 0;
    }
    .public-mac-desktop .public-topbar-actions > *:hover { background: rgba(255,255,255,.28); }
    .public-mac-desktop .public-topbar-actions > .public-navbar-more { width: auto; height: 36px; background: transparent; position: relative; }
    .public-mac-desktop .public-topbar-actions .public-navbar-action .bi-arrow-clockwise.spinning { animation: spin .8s linear infinite; }
    .public-mac-desktop .public-topbar-actions .gj-theme-toggle svg { display: block; width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; fill: none; }
    .public-mac-desktop .public-topbar-brand:hover { text-decoration: none; }
    .public-mac-desktop .public-navbar-more-menu {
      position: absolute; right: .5rem; top: 52px; min-width: 220px;
      background: #fff; border-radius: 14px; box-shadow: var(--gj-shadow-lg);
      overflow: hidden; padding: .25rem; z-index: 60;
    }
    .public-mac-desktop .public-navbar-more-menu button,
    .public-mac-desktop .public-navbar-more-menu a {
      display: flex; align-items: center; gap: .65rem; width: 100%;
      padding: .65rem .75rem; color: var(--gj-ink); font-size: .85rem; font-weight: 500;
      background: transparent; border: 0; border-radius: 10px; text-decoration: none;
    }
    .public-mac-desktop .public-navbar-more-menu button:hover,
    .public-mac-desktop .public-navbar-more-menu a:hover { background: var(--gj-bg); }
    .public-mac-desktop .public-navbar-more-menu i { color: var(--gj-muted); font-size: 1rem; }
    .public-mac-desktop .public-navbar-more-divider { height: 1px; background: var(--gj-line); margin: .25rem 0; }

    /* --- Flatten the macOS window into a plain app surface --- */
    .public-mac-desktop {
      min-height: 100vh !important;
      background: var(--gj-bg) !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .public-mac-desktop .public-topbar {
      position: sticky !important; top: 0 !important; left: auto !important; right: auto !important;
      flex-shrink: 0 !important;
    }
    .public-mac-desktop .public-window {
      position: relative !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
      background: var(--gj-bg) !important; backdrop-filter: none !important;
      border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
      overflow-y: auto !important; overflow-x: hidden !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    .public-mac-desktop .public-window-titlebar { display: none !important; }
    .public-mac-desktop .public-content-wrap {
      width: 100% !important; max-width: 100% !important; margin: 0 !important;
      height: auto !important;
      padding: 1.25rem .9rem calc(84px + env(safe-area-inset-bottom, 0px)) !important;
      background: transparent !important; overflow: visible !important; scrollbar-gutter: auto;
    }
    .public-mac-desktop .public-content-wrap > * { max-width: 640px; margin-left: auto; margin-right: auto; }
    @media (min-width: 992px) {
      .public-mac-desktop .public-content-wrap > * { max-width: 720px; }
    }

    /* --- Gojek bottom navigation (definitive override, kills all mac dock rules) --- */
    .public-mac-desktop .public-bottom-nav,
    .public-bottom-nav,
    .public-bottom-nav.public-persistent-dock {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      background: #fff !important;
      border: 0 !important;
      border-top: 1px solid #ECEDEF !important;
      box-shadow: 0 -1px 8px rgba(17,24,39,.04) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-radius: 0 !important;
      min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
      padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom, 0px)) !important;
      gap: 0 !important;
      transform: none !important;
      width: 100% !important; max-width: 100% !important;
      left: 0 !important; right: 0 !important; bottom: 0 !important;
      top: auto !important;
      position: fixed !important;
      z-index: 60 !important;
      overflow: visible !important;
      align-items: stretch !important;
      justify-content: stretch !important;
    }
    .public-bottom-nav button,
    .public-bottom-nav .public-bottom-nav-more,
    .public-mac-desktop .public-bottom-nav button,
    .public-mac-desktop .public-bottom-nav button:nth-child(n) {
      flex: 1 1 0 !important; width: auto !important; height: auto !important;
      padding: .25rem .15rem !important;
      color: #9CA3AF !important; font-size: .6rem !important; font-weight: 600;
      background: transparent !important; border: 0 !important; border-radius: 0 !important;
      box-shadow: none !important; flex-direction: column !important;
      gap: .18rem !important; min-width: 0 !important;
    }
    .public-bottom-nav button i { font-size: 1.25rem !important; }
    .public-bottom-nav button.active { color: var(--gj-green) !important; }
    .public-bottom-nav button.active i {
      width: auto !important; height: auto !important; background: transparent !important;
    }
    .public-bottom-nav button span { display: block !important; }

    /* --- Cards: clean white, rounded, soft shadow --- */
    .public-mac-desktop .card,
    .public-mac-desktop .public-tab-content,
    .public-mac-desktop .connect-sidebar {
      background: var(--gj-card) !important; border: 0 !important;
      border-radius: var(--gj-radius) !important; box-shadow: var(--gj-shadow) !important;
      backdrop-filter: none !important;
    }
    .public-mac-desktop .card-header {
      min-height: 40px; padding: .6rem .85rem; background: #fff !important;
      border-bottom: 1px solid var(--gj-line) !important; border-radius: var(--gj-radius) var(--gj-radius) 0 0 !important;
    }
    .public-mac-desktop .card-header h5, .public-mac-desktop .card-header h6 { font-size: .85rem; color: var(--gj-ink); }
    .public-mac-desktop .card-body { padding: .85rem !important; }
    .public-mac-desktop .text-muted { color: var(--gj-muted) !important; }
    .public-mac-desktop .alert { border-radius: 12px !important; border: 0 !important; }

    /* --- Buttons: pill, green primary --- */
    .public-mac-desktop .btn { border-radius: 999px !important; font-weight: 600; }
    .public-mac-desktop .btn-primary { background: var(--gj-green) !important; border-color: var(--gj-green) !important; }
    .public-mac-desktop .btn-primary:hover, .public-mac-desktop .btn-primary:focus { background: var(--gj-green-dark) !important; border-color: var(--gj-green-dark) !important; }
    .public-mac-desktop .btn-success { background: var(--gj-green) !important; border-color: var(--gj-green) !important; }
    .public-mac-desktop .btn-outline-primary { color: var(--gj-green) !important; border-color: var(--gj-green) !important; }
    .public-mac-desktop .btn-outline-primary:hover { background: var(--gj-green) !important; color: #fff !important; }
    .public-mac-desktop .form-control, .public-mac-desktop .form-select {
      border-radius: 12px !important; border-color: var(--gj-line) !important; background: #fff !important;
      min-height: 42px;
    }
    .public-mac-desktop .form-control:focus, .public-mac-desktop .form-select:focus {
      border-color: var(--gj-green) !important; box-shadow: 0 0 0 3px rgba(0,170,19,.15) !important;
    }
    .public-mac-desktop .table thead th { background: var(--gj-bg) !important; color: var(--gj-muted) !important; font-size: 10px; }
    .public-mac-desktop .table tbody td { font-size: 11px; }

    /* --- Top tab strip (desktop) + sub tabs as Gojek pills --- */
    .public-mac-desktop .public-tabs { background: #fff; border: 0; border-radius: 12px; padding: 4px; gap: 2px; box-shadow: var(--gj-shadow); }
    .public-mac-desktop .public-tab { border-radius: 10px; border: 0; color: var(--gj-muted); font-size: .8rem; }
    .public-mac-desktop .public-tab.active { color: #fff; background: var(--gj-green); box-shadow: none; border-bottom: 0; }
    .public-mac-desktop .reseller-tabs {
      display: flex; gap: .3rem; padding: 0; background: transparent; border-radius: 0;
      margin-bottom: .75rem; overflow-x: auto; border-bottom: 1px solid var(--gj-line);
      scrollbar-width: none;
    }
    .public-mac-desktop .reseller-tabs::-webkit-scrollbar { display: none; }
    .public-mac-desktop .reseller-tabs button {
      flex: 0 0 auto; min-height: 34px; padding: .4rem .7rem; border: 0; border-radius: 0;
      border-bottom: 2px solid transparent; background: transparent; color: var(--gj-muted);
      font-size: .78rem; font-weight: 600; white-space: nowrap;
    }
    .public-mac-desktop .reseller-tabs button.active { color: var(--gj-green); border-bottom-color: var(--gj-green); background: transparent; box-shadow: none; }

    /* --- Chips / status --- */
    .public-mac-desktop .chip { border-radius: 999px; font-weight: 600; }
    .public-mac-desktop .chip-success { background: #E8F8EC; color: var(--gj-green-dark); }
    .public-mac-desktop .chip-warning { background: #FFF4E0; color: #B45309; }
    .public-mac-desktop .chip-danger { background: #FDECEC; color: #B91C1C; }
    .public-mac-desktop .chip-info { background: #E6F4FB; color: #0369A1; }
    .public-mac-desktop .chip-purple { background: #F1ECFE; color: #6D28D9; }
    .public-mac-desktop .chip-secondary { background: var(--gj-bg); color: var(--gj-muted); }
    .public-mac-desktop .status-chip-active { background: #E8F8EC; color: var(--gj-green-dark); }

    /* --- Quota bar --- */
    .public-mac-desktop .quota-bar { background: #EEF0F2; border-radius: 999px; }
    .public-mac-desktop .quota-bar-fill.quota-bar-ok { background: linear-gradient(90deg, #1FC94A, var(--gj-green)); }
    .public-mac-desktop .quota-bar-fill.quota-bar-warn { background: linear-gradient(90deg, #FBBF24, #D97706); }
    .public-mac-desktop .quota-bar-fill.quota-bar-danger { background: linear-gradient(90deg, #F87171, #DC2626); }
    .public-mac-desktop .badge.quota-bar-ok, .public-mac-desktop .badge.quota-bar-warn, .public-mac-desktop .badge.quota-bar-danger { border-radius: 999px; }

    /* --- GoPay-style quota card + service grid --- */
    .gj-gopay-card {
      position: relative; overflow: hidden; border: 0; border-radius: 16px;
      background: linear-gradient(135deg, #00B517 0%, #008A11 60%, #00700E 100%);
      color: #fff; padding: .68rem .82rem .72rem; box-shadow: 0 8px 20px rgba(0,138,17,.26);
      margin-bottom: .7rem;
    }
    .gj-gopay-card::after {
      content: ''; position: absolute; right: -34px; top: -34px; width: 118px; height: 118px;
      background: rgba(255,255,255,.08); border-radius: 50%;
    }
    .gj-gopay-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; position: relative; z-index: 1; }
    .gj-gopay-label { font-size: .68rem; font-weight: 500; opacity: .9; display: flex; align-items: center; gap: .3rem; }
    .gj-gopay-name { font-size: .78rem; font-weight: 700; }
    .gj-gopay-actions { display: flex; gap: .3rem; }
    .gj-gopay-actions button {
      display: inline-flex; align-items: center; gap: .2rem; padding: .22rem .52rem;
      font-size: .64rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.18);
      border: 0; border-radius: 999px; backdrop-filter: blur(2px);
    }
    .gj-gopay-actions button:hover { background: rgba(255,255,255,.3); }
    .gj-gopay-balance { margin: .32rem 0 .22rem; position: relative; z-index: 1; }
    .gj-gopay-balance small { font-size: .64rem; opacity: .85; }
    .gj-gopay-balance .gj-gopay-num { font-size: 1.38rem; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; }
    .gj-gopay-sub { font-size: .68rem; opacity: .9; position: relative; z-index: 1; }
    .gj-gopay-bar { height: 5px; background: rgba(255,255,255,.25); border-radius: 999px; margin: .38rem 0 .24rem; position: relative; z-index: 1; overflow: hidden; }
    .gj-gopay-bar > div { height: 100%; background: #fff; border-radius: 999px; transition: width .4s ease; }
    .gj-gopay-meta { display: flex; justify-content: space-between; font-size: .64rem; opacity: .9; position: relative; z-index: 1; }
    .gj-gopay-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; position: relative; z-index: 1; }
    .gj-gopay-tags .chip { font-size: .6rem; padding: .12rem .45rem; }
    .gj-gopay-tags .chip-success { background: rgba(255,255,255,.22); color: #fff; }
    .gj-gopay-tags .chip-warning { background: rgba(255,255,255,.22); color: #fff; }
    .gj-gopay-tags .chip-danger { background: rgba(255,255,255,.22); color: #fff; }
    .gj-gopay-tags .chip-secondary { background: rgba(255,255,255,.18); color: #fff; }

    .gj-service-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .35rem;
      background: #fff; border-radius: var(--gj-radius); padding: .85rem .5rem;
      box-shadow: var(--gj-shadow); margin-bottom: .85rem;
    }
    .gj-service-tile {
      display: flex; flex-direction: column; align-items: center; gap: .3rem;
      padding: .35rem .15rem; border: 0; background: transparent; cursor: pointer;
      color: var(--gj-ink); text-decoration: none; position: relative;
    }
    .gj-service-badge {
      position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
      padding: 0 4px; border-radius: 9px; background: #DB2777; color: #fff;
      font-size: .6rem; font-weight: 700; line-height: 17px; text-align: center;
      box-shadow: 0 1px 4px rgba(219,39,119,.45); z-index: 2; border: 1.5px solid #fff;
    }
    .gj-service-icon {
      width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
      font-size: 1.25rem; color: #fff; box-shadow: 0 3px 8px rgba(17,24,39,.1); position: relative;
    }
    .gj-service-tile > span:not(.gj-service-icon) { font-size: .62rem; font-weight: 600; text-align: center; line-height: 1.15; color: var(--gj-ink); }
    .gj-service-tile:hover .gj-service-icon { transform: translateY(-1px); }
    /* Disabled state (e.g. reseller hasn't enabled web topup): grey icon,
       muted label, no hover lift — click shows a toast instead of navigating. */
    .gj-service-tile-disabled { cursor: not-allowed; }
    .gj-service-tile-disabled .gj-service-icon { background: linear-gradient(135deg, #cbd5e1, #94a3b8) !important; box-shadow: none; opacity: .75; }
    .gj-service-tile-disabled:hover .gj-service-icon { transform: none; }
    .gj-service-tile-disabled > span:not(.gj-service-icon) { color: var(--gj-muted) !important; }
    .gj-ic-green { background: linear-gradient(135deg, #1FC94A, #008A11); }
    .gj-ic-teal { background: linear-gradient(135deg, #14B8A6, #0D9488); }
    .gj-ic-blue { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
    .gj-ic-orange { background: linear-gradient(135deg, #FB923C, #EA580C); }
    .gj-ic-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
    .gj-ic-pink { background: linear-gradient(135deg, #F472B6, #DB2777); }
    .gj-ic-amber { background: linear-gradient(135deg, #FBBF24, #D97706); }
    .gj-ic-slate { background: linear-gradient(135deg, #64748B, #334155); }

    /* --- Reseller dashboard: compact + animated cards --- */
    @keyframes gj-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gj-pop { 0% { opacity: 0; transform: scale(.9); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
    @keyframes gj-pulse-glow { 0%,100% { box-shadow: 0 8px 20px rgba(0,138,17,.26); } 50% { box-shadow: 0 12px 30px rgba(0,138,17,.4); } }
    @keyframes gj-bar-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } }
    @keyframes gj-num-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gj-stat-pop { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

    /* Compact + animate the GoPay balance card */
    .gj-dash-anim .gj-gopay-card {
      padding: .56rem .72rem .6rem; margin-bottom: .55rem;
      animation: gj-fade-up .42s ease both, gj-pulse-glow 3.4s ease-in-out infinite 1s;
    }
    .gj-dash-anim .gj-gopay-card::after { width: 92px; height: 92px; right: -26px; top: -26px; }
    .gj-dash-anim .gj-gopay-top { gap: .4rem; }
    .gj-dash-anim .gj-gopay-label { font-size: .64rem; }
    .gj-dash-anim .gj-gopay-name { font-size: .74rem; }
    .gj-dash-anim .gj-gopay-actions { gap: .24rem; }
    .gj-dash-anim .gj-gopay-actions button {
      padding: .18rem .46rem; font-size: .6rem;
      transition: transform .15s ease, background .2s ease;
    }
    .gj-dash-anim .gj-gopay-actions button:hover { transform: translateY(-1px); }
    .gj-dash-anim .gj-gopay-actions button:active { transform: scale(.93); }
    .gj-dash-anim .gj-gopay-balance { margin: .22rem 0 .16rem; }
    .gj-dash-anim .gj-gopay-balance small { font-size: .6rem; }
    .gj-dash-anim .gj-gopay-balance .gj-gopay-num { font-size: 1.16rem; animation: gj-num-rise .5s ease .12s both; }
    .gj-dash-anim .gj-gopay-sub { font-size: .64rem; }
    .gj-dash-anim .gj-gopay-bar { height: 4px; margin: .28rem 0 .18rem; }
    .gj-dash-anim .gj-gopay-bar > div { background: linear-gradient(90deg, rgba(255,255,255,.65), #fff); }
    .gj-dash-anim .gj-gopay-bar > div::after {
      content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
      animation: gj-bar-sweep 2.8s ease-in-out infinite;
    }
    .gj-dash-anim .gj-gopay-meta { font-size: .6rem; }
    .gj-dash-anim .gj-gopay-tags { margin-top: .3rem; gap: .24rem; }
    .gj-dash-anim .gj-gopay-tags .chip { font-size: .56rem; padding: .1rem .4rem; }

    /* Compact + animate the service tile grid */
    .gj-dash-anim .gj-service-grid {
      padding: .62rem .42rem; margin-bottom: .55rem; gap: .4rem .3rem;
      animation: gj-fade-up .48s ease .06s both;
    }
    .gj-dash-anim .gj-service-tile { padding: .26rem .1rem; gap: .22rem; animation: gj-pop .4s ease both; }
    .gj-dash-anim .gj-service-tile:nth-child(1) { animation-delay: .08s; }
    .gj-dash-anim .gj-service-tile:nth-child(2) { animation-delay: .12s; }
    .gj-dash-anim .gj-service-tile:nth-child(3) { animation-delay: .16s; }
    .gj-dash-anim .gj-service-tile:nth-child(4) { animation-delay: .20s; }
    .gj-dash-anim .gj-service-tile:nth-child(5) { animation-delay: .24s; }
    .gj-dash-anim .gj-service-tile:nth-child(6) { animation-delay: .28s; }
    .gj-dash-anim .gj-service-tile:nth-child(7) { animation-delay: .32s; }
    .gj-dash-anim .gj-service-tile:nth-child(8) { animation-delay: .36s; }
    .gj-dash-anim .gj-service-tile:nth-child(9) { animation-delay: .40s; }
    .gj-dash-anim .gj-service-tile:nth-child(10) { animation-delay: .44s; }
    .gj-dash-anim .gj-service-tile:nth-child(11) { animation-delay: .48s; }
    .gj-dash-anim .gj-service-tile:nth-child(12) { animation-delay: .52s; }
    .gj-dash-anim .gj-service-icon {
      width: 38px; height: 38px; border-radius: 12px; font-size: 1.02rem;
      transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
    }
    .gj-dash-anim .gj-service-tile > span:not(.gj-service-icon) { font-size: .58rem; }
    .gj-dash-anim .gj-service-tile:hover .gj-service-icon { transform: translateY(-3px) scale(1.07); box-shadow: 0 6px 14px rgba(17,24,39,.16); }
    .gj-dash-anim .gj-service-tile:active .gj-service-icon { transform: scale(.91); }

    /* Compact + animate the referral stat row */
    .gj-dash-anim .gj-stat-row { animation: gj-fade-up .5s ease .16s both; }
    .gj-dash-anim .gj-stat-row .gj-stat-cell { animation: gj-stat-pop .42s ease both; }
    .gj-dash-anim .gj-stat-row .gj-stat-cell:nth-child(1) { animation-delay: .22s; }
    .gj-dash-anim .gj-stat-row .gj-stat-cell:nth-child(2) { animation-delay: .26s; }
    .gj-dash-anim .gj-stat-row .gj-stat-cell:nth-child(3) { animation-delay: .30s; }
    .gj-dash-anim .gj-stat-row .gj-stat-cell:nth-child(4) { animation-delay: .34s; }
    .gj-dash-anim .gj-stat-row .gj-stat-cell:nth-child(n+5) { animation-delay: .38s; }
    .gj-dash-anim .gj-earn-card { animation: gj-fade-up .5s ease .2s both; }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
      .gj-dash-anim .gj-gopay-card,
      .gj-dash-anim .gj-service-grid,
      .gj-dash-anim .gj-service-tile,
       .gj-dash-anim .gj-stat-row,
       .gj-dash-anim .gj-stat-row .gj-stat-cell,
       .gj-dash-anim .gj-earn-card,
      .gj-dash-anim .gj-gopay-balance .gj-gopay-num,
      .gj-dash-anim .gj-gopay-bar > div::after,
      .public-tab-content > div,
      .gj-page-inner,
      .gj-page-inner > .card,
      .gj-page-inner > .alert,
      .gj-page-inner > .gj-dash-anim .gj-gopay-card { animation: none !important; }
      .gj-dash-anim .gj-service-icon { transition: none !important; }
    }

    /* --- Main tab entrance animation (replays on each tab switch via v-show display toggle) --- */
    @keyframes gj-tab-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gj-tab-enter-soft { from { opacity: 0; } to { opacity: 1; } }
    .public-tab-content > div { animation: gj-tab-enter .38s ease both; }
    /* Full-bleed tabs (chat/playground/leaderboard/dashboard/reseller): opacity-only to avoid
       creating a transform containing block that would break absolute/fixed chat sidebar. */
    .public-tab-content.is-full-bleed > div { animation-name: gj-tab-enter-soft; animation-duration: .3s; }

    /* --- GPage sub-page content entrance (replays each open, GPage is v-if) --- */
    .gj-page-inner { animation: gj-fade-up .42s ease both; }
    .gj-page-inner > .card,
    .gj-page-inner > .alert,
    .gj-page-inner > .gj-service-grid,
    .gj-page-inner > .gj-dash-anim,
    .gj-page-inner > div > .card { animation: gj-fade-up .4s ease both; }
    .gj-page-inner > .card:nth-child(1),
    .gj-page-inner > .alert:nth-child(1),
    .gj-page-inner > div > .card:nth-child(1) { animation-delay: .04s; }
    .gj-page-inner > .card:nth-child(2),
    .gj-page-inner > div > .card:nth-child(2) { animation-delay: .08s; }
    .gj-page-inner > .card:nth-child(3),
    .gj-page-inner > div > .card:nth-child(3) { animation-delay: .12s; }
    .gj-page-inner > .card:nth-child(4),
    .gj-page-inner > div > .card:nth-child(4) { animation-delay: .16s; }
    .gj-page-inner > .card:nth-child(5),
    .gj-page-inner > div > .card:nth-child(5) { animation-delay: .20s; }
    .gj-page-inner > .card:nth-child(n+6),
    .gj-page-inner > div > .card:nth-child(n+6) { animation-delay: .24s; }

    /* --- PIN gate: Gojek style --- */
    .public-mac-desktop .public-pin-stage { inset: 0 !important; padding: 1rem; background: var(--gj-bg); }
    .public-mac-desktop .public-pin-stage .pin-gate {
      width: min(100%, 400px); border: 0; border-radius: 20px; background: #fff !important;
      box-shadow: var(--gj-shadow-lg); overflow: hidden;
    }
    .public-mac-desktop .public-pin-stage .pin-gate .card-body { padding: 1.5rem 1.25rem !important; }
    .public-mac-desktop .public-pin-stage .form-control-lg { border-radius: 14px !important; border: 2px solid var(--gj-line); }
    .public-mac-desktop .public-pin-stage .btn-primary { width: 100%; }

    /* --- Modals: clean white sheets, drop traffic-light dots.
       Note: quota-dashboard modals teleport to <body> (outside .public-mac-desktop),
       so selectors MUST be unprefixed to match. --- */
    .mac-quota-modal,
    .public-mac-desktop .modal.d-block {
      background: rgba(17,24,39,.45) !important; backdrop-filter: blur(4px) !important; padding: .75rem !important;
      display: grid !important; place-items: center !important; z-index: 100060 !important;
    }
    .mac-quota-modal .modal-content,
    .public-mac-desktop .modal.d-block .modal-content {
      background: #fff !important; border: 0 !important; border-radius: 20px !important;
      box-shadow: var(--gj-shadow-lg) !important; backdrop-filter: none !important;
    }
    .mac-quota-modal .modal-header,
    .public-mac-desktop .modal.d-block .modal-header {
      background: #fff !important; justify-content: flex-start !important; border-bottom: 1px solid var(--gj-line) !important;
      min-height: 48px !important; padding: .65rem .9rem !important;
    }
    .mac-quota-modal .modal-header::before,
    .public-mac-desktop .modal.d-block .modal-header::before { display: none !important; }
    .mac-quota-modal .modal-title,
    .public-mac-desktop .modal.d-block .modal-title {
      color: var(--gj-ink) !important; font-size: .92rem !important; text-align: left !important;
      max-width: calc(100% - 40px) !important; font-weight: 700;
    }
    .mac-quota-modal .btn-close,
    .public-mac-desktop .modal.d-block .btn-close {
      position: absolute !important; right: 12px; width: 28px; height: 28px; padding: 0; margin: 0;
      background-color: var(--gj-bg); border-radius: 8px;
    }
    .mac-quota-modal .modal-footer,
    .public-mac-desktop .modal.d-block .modal-footer { background: #fff !important; border-top: 1px solid var(--gj-line) !important; }
    .mac-quota-modal .modal-footer .btn,
    .public-mac-desktop .modal.d-block .modal-footer .btn { min-height: 38px; border-radius: 999px !important; font-size: .82rem; }
    .mac-quota-modal .modal-dialog,
    .public-mac-desktop .modal.d-block .modal-dialog { margin: 0 auto; }
    .mac-quota-modal .modal-dialog.modal-sm,
    .public-mac-desktop .modal.d-block .modal-dialog.modal-sm { max-width: 380px; }
    .mac-quota-modal .modal-dialog.modal-lg,
    .public-mac-desktop .modal.d-block .modal-dialog.modal-lg { max-width: 680px; }
     .mac-quota-modal .modal-body,
     .public-mac-desktop .modal.d-block .modal-body { padding: .85rem !important; }
    /* Topup confirm/payment modal: roomier, evenly padded body + footer so the
       content never looks crammed against the edges. */
    .gj-topup-modal .modal-body { padding: 1.05rem 1.1rem !important; }
    .gj-topup-modal .modal-footer { padding: .8rem 1.1rem !important; gap: .6rem; }
    .gj-topup-modal .modal-footer .btn { min-height: 40px; border-radius: 999px !important; font-size: .8rem; font-weight: 600; }
    .gj-topup-modal .modal-header { padding: .55rem .9rem !important; }
    /* Payment dialog breathing room: crypto dialog stacks many boxes (QR, address,
       instructions, order id) — wider gaps + roomier inner padding so it never
       looks crammed. Covers topup (reseller/customer) + shop payment modals. */
    .gj-topup-modal .modal-body .d-flex.flex-column { gap: .8rem; }
    .gj-topup-modal .modal-body .p-2 { padding: .7rem .8rem !important; }
    .gj-topup-modal .modal-body .px-1 { padding-left: .35rem !important; padding-right: .35rem !important; }
    /* Stat detail modal: fixed size (never collapses when empty/loading),
       still responsive — capped by viewport, mobile gets full width minus padding. */
    .gj-stat-modal .modal-dialog {
      width: min(100%, 560px); max-width: 100%; min-width: min(100%, 560px);
      min-height: 0; margin: 0; flex: 0 0 auto;
    }
    .gj-stat-modal .modal-content { width: 100%; }
    .gj-stat-modal .modal-body {
      height: min(62vh, 460px); min-height: min(62vh, 460px);
      overflow-y: auto; padding: .9rem 1rem !important;
    }
    .gj-stat-modal .modal-footer { justify-content: center; }

    /* Shop product modal: scrollable body, capped height, backdrop click to close */
    .shop-product-modal { padding: 1rem !important; }
    .shop-product-modal .modal-dialog { max-width: 680px; margin: 0 auto; }
    .shop-product-modal .modal-content {
      max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; overflow: hidden;
    }
    .shop-product-modal .shop-product-body {
      flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 1rem 1.2rem !important;
    }
    .shop-product-modal .modal-header { flex-shrink: 0; }
    .shop-product-modal .modal-footer { flex-shrink: 0; }

    /* Stepper */
    .shop-stepper {
      display: flex; align-items: center; gap: 0; padding: .65rem 1.2rem;
      border-bottom: 1px solid var(--gj-line, #ECEDEF); flex-shrink: 0;
      background: var(--gj-bg, #F4F5F7);
    }
    .shop-step {
      display: flex; align-items: center; gap: .4rem; cursor: not-allowed; flex: 1;
      opacity: .45; transition: opacity .2s ease;
    }
    .shop-step:not(:last-child)::after {
      content: ''; flex: 1; height: 2px; margin: 0 .5rem; border-radius: 999px;
      background: var(--gj-line, #ECEDEF); transition: background .2s ease;
    }
    .shop-step.active { opacity: 1; cursor: pointer; }
    .shop-step.done { opacity: .85; cursor: pointer; }
    .shop-step.done:not(:last-child)::after { background: var(--gj-green, #00AA13); }
    .shop-step-num {
      width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
      display: grid; place-items: center; font-size: .7rem; font-weight: 700;
      background: #d1d5db; color: #fff; transition: background .2s ease;
    }
    .shop-step.active .shop-step-num { background: var(--gj-green, #00AA13); }
    .shop-step.done .shop-step-num { background: var(--gj-green, #00AA13); }
    .shop-step-label { font-size: .72rem; font-weight: 600; color: var(--gj-ink, #1A1A1A); white-space: nowrap; }
    @media (max-width: 575.98px) { .shop-step-label { display: none; } .shop-step { flex: 0 0 auto; } .shop-step:not(:last-child)::after { width: 24px; } }

    /* Summary card in step 3 */
    .shop-summary {
      padding: .65rem .8rem; border-radius: 12px; background: #f8fafc;
      border: 1px solid #e2e8f0;
    }
    .shop-summary-title { font-size: .76rem; font-weight: 700; margin-bottom: .4rem; color: var(--gj-ink, #1A1A1A); }

    @media (max-width: 575.98px) {
      .shop-product-modal { padding: .5rem !important; }
      .shop-product-modal .modal-content { max-height: calc(100dvh - 1rem); border-radius: 14px !important; }
      .shop-product-modal .shop-product-body { padding: .75rem !important; }
      .shop-stepper { padding: .5rem .75rem; }
    }
    .mac-quota-modal .form-control,
    .mac-quota-modal .form-select,
    .public-mac-desktop .modal.d-block .form-control,
    .public-mac-desktop .modal.d-block .form-select { border-radius: 12px !important; border-color: var(--gj-line) !important; min-height: 42px; }

    /* --- mac-quota choice cards (admin add quota) --- */
    .mac-quota-choice { border-radius: 12px !important; background: #fff !important; border: 1px solid var(--gj-line) !important; box-shadow: none !important; }
    .mac-quota-choice:hover, .mac-quota-choice:focus { border-color: var(--gj-green) !important; background: #F0FBF2 !important; }
    .mac-quota-choice-price { color: var(--gj-green-dark) !important; }
    /* GButton-based choice tiles: uniform cards filling their grid cell.
       el-button is inline-flex content-sized by default AND wraps the slot in an
       inner <span> — the flex column must target that span, otherwise the main
       block and price render inline and tiles end up uneven. */
    .mac-quota-package-grid .mac-quota-choice-btn.el-button {
      width: 100%; min-width: 0; margin: 0;
      display: flex; flex-direction: column;
      align-items: stretch; justify-content: flex-start;
      min-height: 76px; padding: .6rem .5rem; text-align: left;
      color: var(--gj-ink) !important; background: #fff !important;
      border: 1px solid var(--gj-line) !important; box-shadow: none !important;
      border-radius: 12px !important; font-weight: 600;
      white-space: normal; line-height: 1.25;
    }
    /* Element Plus adds .el-button + .el-button { margin-left: 12px } — inside the
       grid this pushes every tile except the first sideways (uneven columns). */
    .mac-quota-package-grid .el-button + .el-button { margin-left: 0; }
    .mac-quota-package-grid .mac-quota-choice-btn.el-button > span {
      display: flex; flex-direction: column; align-items: stretch;
      justify-content: flex-start; gap: .2rem; width: 100%; min-width: 0;
    }
    .mac-quota-package-grid .mac-quota-choice-btn.el-button:hover,
    .mac-quota-package-grid .mac-quota-choice-btn.el-button:focus {
      color: var(--gj-ink) !important; background: #fff !important; border-color: var(--gj-green) !important;
    }
    .mac-quota-choice-btn .mac-quota-choice-main { display: flex; flex-direction: column; gap: .1rem; }
    /* price pinned to the tile bottom → rows align across all tiles */
    .mac-quota-choice-btn .mac-quota-choice-price { margin-top: auto; }
    .mac-quota-choice-btn .mac-quota-choice-title { font-size: .78rem; font-weight: 750; color: var(--gj-ink); }
    .mac-quota-choice-btn .mac-quota-choice-meta { color: var(--gj-muted); font-size: .62rem; }
    .mac-quota-choice-btn .mac-quota-choice-price { color: var(--gj-green-dark); font-size: .68rem; font-weight: 650; }
    .public-mac-desktop.theme-dark .mac-quota-package-grid .mac-quota-choice-btn.el-button,
    body.public-theme-dark .mac-quota-package-grid .mac-quota-choice-btn.el-button {
      background: #0f172a !important; border-color: var(--gj-line) !important; color: var(--gj-ink) !important;
    }

    /* --- Admin floating actions dialog --- */
    .mac-admin-actions-modal { background: rgba(17,24,39,.45) !important; backdrop-filter: blur(4px) !important; }
    .mac-admin-actions-dialog { background: #fff !important; border: 0 !important; border-radius: 20px !important; backdrop-filter: none !important; box-shadow: var(--gj-shadow-lg) !important; }
    .mac-admin-actions-title { color: var(--gj-ink) !important; border-bottom: 1px solid var(--gj-line) !important; }
    .mac-admin-actions-title::before { display: none !important; }
    /* Items: keep ink text always, only light-green tint on hover (never white text) */
    .mac-admin-actions-dialog > button { color: var(--gj-ink) !important; background: transparent !important; }
    .mac-admin-actions-dialog > button:hover, .mac-admin-actions-dialog > button:focus { color: var(--gj-ink) !important; background: #E8F8EC !important; outline: 0; }
    .mac-admin-actions-dialog > button i { color: inherit !important; }
    .mac-admin-actions-dialog > button:hover i.text-primary, .mac-admin-actions-dialog > button:hover i.text-success, .mac-admin-actions-dialog > button:hover i.text-danger, .mac-admin-actions-dialog > button:hover i.text-warning, .mac-admin-actions-dialog > button:hover i.text-secondary { color: var(--gj-green) !important; }

    /* --- Quickstart hint banner tweak --- */
    .public-mac-desktop .alert.alert-info { background: #E6F4FB; color: #0369A1; }

    /* --- Leaderboard card header icon --- */
    .public-mac-desktop .public-leaderboard-card > .card-header h5 i { color: #F59E0B; }

    /* Bottom nav active state + icons (kills mac gradient/dot) */
    .public-bottom-nav button span,
    .public-mac-desktop .public-bottom-nav button span { display: block !important; }
    .public-bottom-nav button i,
    .public-mac-desktop .public-bottom-nav button i { font-size: 1.25rem !important; width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; }
    .public-bottom-nav button.active,
    .public-mac-desktop .public-bottom-nav button.active { color: #00AA13 !important; transform: none !important; background: transparent !important; }
    .public-bottom-nav button.active::after,
    .public-mac-desktop .public-bottom-nav button.active::after { display: none !important; }
    .public-bottom-nav button.active i,
    .public-mac-desktop .public-bottom-nav button.active i { background: transparent !important; }

    /* Desktop: keep phone-like centered content, nav stays full-width solid bar */
    @media (min-width: 576px) {
      .public-mac-desktop .gj-service-grid { grid-template-columns: repeat(4, 1fr); gap: .6rem .5rem; }
    }
    @media (min-width: 992px) {
      .public-mac-desktop .public-content-wrap { max-width: 100% !important; padding: 1.25rem 1rem calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
    }

    /* ============ FULL-BLEED (Customer/Reseller/Test API/Leaderboard/Chat) ============ */
    /* Hilangkan frame card + centering; tab-content full-width, bg transparent */
    .public-tab-content.is-full-bleed {
      background: transparent !important;
      border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
      backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      margin: 0 !important; max-width: none !important;
    }
    .public-mac-desktop .public-tab-content.is-full-bleed {
      background: transparent !important; border: 0 !important; box-shadow: none !important;
    }
    /* content-wrap: fill antara topbar (56px) & bottom nav (60px + safe), scrollable internal */
    .public-content-wrap:has(.public-tab-content.is-full-bleed),
    .public-mac-desktop .public-content-wrap:has(.public-tab-content.is-full-bleed) {
      padding: 0 !important; scrollbar-gutter: auto !important; max-width: 100% !important;
      margin: 0 !important; background: var(--gj-bg) !important;
      height: calc(100dvh - 56px - 60px - env(safe-area-inset-bottom, 0px)) !important;
      overflow-y: auto !important; overflow-x: hidden !important;
    }
    .public-mac-desktop .public-content-wrap > .public-tab-content.is-full-bleed {
      max-width: none !important; margin: 0 !important;
    }
    /* Beri padding horizontal pada konten non-chat supaya tidak menempel tepi */
    .public-tab-content.is-full-bleed > div:not(.gj-chat) {
      padding: .4rem;
    }
    @media (min-width: 992px) {
      .public-tab-content.is-full-bleed > div:not(.gj-chat) { padding: .85rem; }
    }

    /* Chat: fixed (edge-to-edge, keluar dari flow) — tetap pakai positioning absolut */
    .gj-chat {
      position: fixed;
      top: 56px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0;
      display: flex; flex-direction: row;
      background: var(--gj-bg); overflow: hidden;
      z-index: 55;
    }
    /* Sidebar */
    .gj-chat-sidebar {
      width: 250px; flex-shrink: 0; display: flex; flex-direction: column;
      background: var(--gj-card); border-right: 1px solid var(--gj-line); overflow: hidden;
    }
    .gj-chat-sidebar-head {
      display: flex; align-items: center; justify-content: space-between;
      height: 52px; padding: 0 .7rem; border-bottom: 1px solid var(--gj-line); flex-shrink: 0;
    }
    .gj-chat-sidebar-head span { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: var(--gj-ink); }
    .gj-chat-sidebar-head span i { color: var(--gj-green); font-size: .9rem; }
    .gj-chat-sidebar-close {
      width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px;
      background: transparent; color: var(--gj-muted); font-size: .8rem; cursor: pointer;
    }
    .gj-chat-sidebar-close:hover { background: var(--gj-bg); color: var(--gj-ink); }
    .gj-chat-new-btn {
      display: flex; align-items: center; gap: .4rem;
      margin: .6rem; padding: .55rem .7rem; border: 0; border-radius: 12px;
      background: var(--gj-green); color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
    }
    .gj-chat-new-btn:hover { background: var(--gj-green-dark); }
    .gj-chat-sessions-empty { text-align: center; padding: 1.5rem .5rem; color: var(--gj-muted); }
    .gj-chat-sessions-empty i { font-size: 1.8rem; opacity: .5; }
    .gj-chat-sessions-empty p { margin: .5rem 0 0; font-size: .76rem; }
    .gj-chat-session-list { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; overflow-y: auto; padding: 0 .4rem .5rem; }
    .gj-chat-session-list::-webkit-scrollbar { width: 5px; }
    .gj-chat-session-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .gj-chat-session-item {
      display: flex; align-items: center; justify-content: space-between; gap: .4rem;
      padding: .5rem .5rem; border: 1px solid transparent; border-radius: 10px;
      background: transparent; cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
    }
    .gj-chat-session-item:hover { background: var(--gj-bg); }
    .gj-chat-session-item.active { border-color: var(--gj-green); background: #E8F8EC; }
    .gj-chat-session-main { display: flex; align-items: center; gap: .45rem; min-width: 0; }
    .gj-chat-session-main > i { color: var(--gj-muted); font-size: .85rem; flex-shrink: 0; }
    .gj-chat-session-item.active .gj-chat-session-main > i { color: var(--gj-green); }
    .gj-chat-session-text { min-width: 0; }
    .gj-chat-session-title {
      font-size: .78rem; font-weight: 600; color: var(--gj-ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
    }
    .gj-chat-session-meta { font-size: .6rem; color: var(--gj-muted); }
    .gj-chat-session-del {
      width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
      border: 0; border-radius: 8px; background: transparent; color: #9CA3AF; cursor: pointer; transition: background .15s, color .15s;
    }
    .gj-chat-session-del:hover { background: #fef2f2; color: #ef4444; }
    .gj-chat-sidebar-backdrop { display: none; }

    /* Main column */
    .gj-chat-main {
      flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative;
    }
    .gj-chat-header {
      display: flex; align-items: center; gap: .5rem;
      height: 52px; padding: 0 .6rem; background: var(--gj-card);
      border-bottom: 1px solid var(--gj-line); flex-shrink: 0;
    }
    .gj-chat-icon-btn {
      position: relative; display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; padding: 0; border: 1px solid var(--gj-line);
      border-radius: 12px; background: #fff; color: var(--gj-ink);
      font-size: 1.05rem; cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s;
    }
    .gj-chat-icon-btn:hover { background: var(--gj-bg); border-color: var(--gj-green); color: var(--gj-green); }
    .gj-chat-count {
      position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--gj-green); color: #fff; border-radius: 9px;
      font-size: .58rem; font-weight: 700; line-height: 1;
    }
    .gj-chat-model {
      flex: 1 1 auto; display: flex; align-items: center; gap: .4rem;
      min-width: 0; padding: 0 .6rem; height: 38px;
      background: var(--gj-bg); border: 1px solid var(--gj-line); border-radius: 12px;
    }
    .gj-chat-model > i { color: var(--gj-green); font-size: .9rem; flex-shrink: 0; }
    .gj-chat-model-select {
      flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
      font-size: .82rem; font-weight: 600; color: var(--gj-ink); cursor: pointer; padding: 0;
    }
    .gj-chat-model-select:focus { outline: none; }
    .gj-chat-model .g-combobox { flex: 1 1 auto; min-width: 0; }
    .gj-chat-model .g-combobox-btn { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: .82rem; font-weight: 600; color: var(--gj-ink); cursor: pointer; padding: 0; }
    .gj-chat-model .g-combobox-caret { color: var(--gj-muted); font-size: .7rem; }
    .g-combobox.font-monospace .g-combobox-btn, .g-combobox.font-monospace .g-combobox-value { font-family: var(--bs-font-monospace, monospace); }
    .gj-chat-messages {
      flex: 1 1 auto; overflow-y: auto; padding: .8rem .6rem;
      display: flex; flex-direction: column; gap: .65rem;
      scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    }
    .gj-chat-messages::-webkit-scrollbar { width: 6px; }
    .gj-chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .gj-chat-empty {
      margin: auto; text-align: center; padding: 1.5rem 1rem; max-width: 340px;
    }
    .gj-chat-empty-ico {
      width: 56px; height: 56px; margin: 0 auto .75rem; display: grid; place-items: center;
      border-radius: 18px; background: linear-gradient(135deg, var(--gj-green), var(--gj-green-dark));
      color: #fff; font-size: 1.6rem; box-shadow: 0 8px 20px rgba(0,138,17,.25);
    }
    .gj-chat-empty h6 { font-size: .95rem; font-weight: 700; color: var(--gj-ink); margin: 0 0 .3rem; }
    .gj-chat-model-name { color: var(--gj-green); }
    .gj-chat-empty p { font-size: .76rem; color: var(--gj-muted); margin: 0 0 1rem; }
    .gj-chat-suggestions { display: flex; flex-direction: column; gap: .4rem; }
    .gj-chat-suggestions button {
      display: flex; align-items: center; gap: .5rem; width: 100%;
      padding: .55rem .7rem; border: 1px solid var(--gj-line); border-radius: 12px;
      background: var(--gj-card); color: var(--gj-ink); font-size: .78rem; font-weight: 500;
      text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
    }
    .gj-chat-suggestions button i { color: var(--gj-green); font-size: .9rem; }
    .gj-chat-suggestions button:hover { border-color: var(--gj-green); background: #E8F8EC; }
    .gj-chat-msg { display: flex; gap: .5rem; align-items: flex-end; }
    .gj-chat-msg-user { flex-direction: row-reverse; }
    .gj-chat-avatar {
      width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
      border-radius: 50%; font-size: .85rem; background: var(--gj-bg); color: var(--gj-muted);
      border: 1px solid var(--gj-line);
    }
    .gj-chat-msg-user .gj-chat-avatar { background: var(--gj-green); color: #fff; border-color: var(--gj-green-dark); }
    .gj-chat-msg-assistant .gj-chat-avatar { background: linear-gradient(135deg, #6355d9, #4c3fb5); color: #fff; border-color: transparent; }
    .gj-chat-bubble {
      max-width: calc(100% - 42px); padding: .55rem .75rem; border-radius: 16px;
      font-size: .84rem; line-height: 1.5; word-break: break-word;
    }
    .gj-chat-msg-user .gj-chat-bubble {
      background: var(--gj-green); color: #fff; border-bottom-right-radius: 5px;
    }
    .gj-chat-msg-assistant .gj-chat-bubble {
      background: var(--gj-card); color: var(--gj-ink); border: 1px solid var(--gj-line); border-bottom-left-radius: 5px;
    }
    .gj-chat-content p { margin: 0 0 .5rem; }
    .gj-chat-content p:last-child { margin-bottom: 0; }
    .gj-chat-content pre {
      background: #0f172a; color: #e2e8f0; padding: .6rem .75rem; border-radius: 10px;
      overflow-x: auto; font-size: .72rem; margin: .4rem 0; line-height: 1.45;
    }
    .gj-chat-content code { background: rgba(0,0,0,.07); padding: .1rem .32rem; border-radius: 5px; font-size: .78rem; }
    .gj-chat-msg-user .gj-chat-content code { background: rgba(255,255,255,.22); }
    .gj-chat-msg-user .gj-chat-content a { color: #fff; text-decoration: underline; }
    .gj-chat-content a { color: var(--gj-green); word-break: break-all; }
    .gj-chat-content ul, .gj-chat-content ol { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
    .gj-chat-content li { margin-bottom: .2rem; }
    .gj-chat-content strong { font-weight: 700; }
    .gj-chat-meta {
      display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
      margin-top: .35rem; font-size: .6rem; color: var(--gj-muted);
    }
    .gj-chat-msg-user .gj-chat-meta { color: rgba(255,255,255,.8); justify-content: flex-end; }
    .gj-chat-streaming { display: inline-flex; align-items: center; gap: .25rem; color: var(--gj-green); }
    .gj-chat-msg-user .gj-chat-streaming { color: #fff; }
    .gj-chat-dot {
      width: 5px; height: 5px; border-radius: 50%; background: currentColor;
      animation: gj-chat-blink 1s infinite;
    }
    @keyframes gj-chat-blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
    .gj-chat-aborted { opacity: .7; font-style: italic; }
    .gj-chat-tokens { display: inline-flex; align-items: center; gap: .2rem; }
    .gj-chat-error {
      display: flex; align-items: flex-start; gap: .4rem; color: #b91c1c;
      background: #fef2f2; border: 1px solid #fecaca; padding: .5rem .65rem; border-radius: 10px; font-size: .78rem;
    }
    .gj-chat-typing { display: inline-flex; gap: .25rem; padding: .2rem 0; }
    .gj-chat-typing span {
      width: 7px; height: 7px; border-radius: 50%; background: var(--gj-muted);
      animation: gj-chat-bounce 1.3s infinite;
    }
    .gj-chat-typing span:nth-child(2) { animation-delay: .18s; }
    .gj-chat-typing span:nth-child(3) { animation-delay: .36s; }
    @keyframes gj-chat-bounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
    .gj-chat-scroll-btn {
      position: absolute; right: .9rem; bottom: 1rem; z-index: 5;
      width: 36px; height: 36px; display: grid; place-items: center;
      border: 1px solid var(--gj-line); border-radius: 50%; background: var(--gj-card);
      color: var(--gj-green); font-size: 1.3rem; cursor: pointer;
      box-shadow: 0 4px 12px rgba(17,24,39,.12);
    }
    .gj-chat-input-wrap {
      display: flex; align-items: flex-end; gap: .45rem;
      padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px));
      background: var(--gj-card); border-top: 1px solid var(--gj-line); flex-shrink: 0;
    }
    .gj-chat-input {
      flex: 1 1 auto; min-width: 0; max-height: 140px; resize: none;
      padding: .55rem .75rem; border: 1px solid var(--gj-line); border-radius: 18px;
      background: #fff; color: var(--gj-ink); font-size: .84rem; line-height: 1.45;
      font-family: inherit; transition: border-color .15s, box-shadow .15s;
    }
    .gj-chat-input:focus { outline: none; border-color: var(--gj-green); box-shadow: 0 0 0 3px rgba(0,170,19,.15); }
    .gj-chat-input::placeholder { color: #9CA3AF; }
    .gj-chat-send {
      width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
      border: 0; border-radius: 50%; background: var(--gj-green); color: #fff;
      font-size: 1rem; cursor: pointer; transition: background .15s, transform .1s;
    }
    .gj-chat-send:hover:not(:disabled) { background: var(--gj-green-dark); }
    .gj-chat-send:active:not(:disabled) { transform: scale(.92); }
    .gj-chat-send:disabled { background: #d1d5db; cursor: not-allowed; }
    .gj-chat-send.gj-chat-stop { background: #ef4444; }
    .gj-chat-send.gj-chat-stop:hover { background: #dc2626; }
    .gj-fade-enter-active, .gj-fade-leave-active { transition: opacity .2s, transform .2s; }
    .gj-fade-enter-from, .gj-fade-leave-to { opacity: 0; transform: translateY(6px); }

    /* Mobile: sidebar jadi drawer */
    @media (max-width: 767.98px) {
      .gj-chat-sidebar {
        position: absolute; top: 0; bottom: 0; left: 0; z-index: 40;
        width: 280px; max-width: 85%;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 0 8px 28px rgba(0,0,0,.18);
      }
      .gj-chat-sidebar.open { transform: translateX(0); }
      .gj-chat-sidebar-backdrop {
        display: block; position: absolute; inset: 0; z-index: 35;
        background: rgba(0,0,0,.32);
      }
      .gj-chat-session-title { max-width: 170px; }
    }
    @media (min-width: 576px) and (max-width: 767.98px) {
      .gj-chat-bubble { max-width: 80%; }
    }
    @media (min-width: 768px) {
      .gj-chat-bubble { max-width: 80%; }
      .gj-chat-session-title { max-width: none; }
    }
    @media (min-width: 992px) {
      .gj-chat-sidebar { width: 280px; }
    }

    /* --- Page-view header (green app bar, sticky, full-bleed) --- */
    /* When a sub-page header is present, zero out wrap padding so header is truly flush with topbar */
    .public-mac-desktop .public-content-wrap:has(.gj-more-header) {
      padding-top: 0 !important;
    }
    .gj-more-header {
      display: flex; align-items: center; gap: .6rem;
      position: sticky; top: 0; z-index: 20;
      height: 52px; margin: 0 0 .85rem; padding: 0 .75rem;
      background: linear-gradient(135deg, #00AA13, #008A11);
      color: #fff; box-shadow: 0 2px 8px rgba(0,138,17,.18);
      border-radius: 0;
      width: 100vw; max-width: 100vw;
      margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    }
    .gj-more-header span { font-size: 1rem; font-weight: 700; color: #fff; }
    .gj-more-header .chip { margin-left: auto; }
    .gj-back-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px; border: 0;
      background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem;
      cursor: pointer; flex-shrink: 0;
    }
    .gj-back-btn:hover { background: rgba(255,255,255,.3); }

    /* --- GInput / GSelect: clean textfield-style, no icon, consistent with form-control --- */
    .g-input, .g-select {
      border-radius: 12px; border: 1px solid #ECEDEF; background: #fff; min-height: 42px;
      transition: border-color .15s, box-shadow .15s;
    }
    /* When g-select is a GSelect combobox wrapper, the inner button carries the border/bg. */
    .g-select.g-combobox { border: 0; background: transparent; min-height: 0; }
    .g-select.g-combobox .g-combobox-btn { min-height: 42px; border-radius: 12px; }
    .g-select.g-combobox.form-select-sm .g-combobox-btn, .g-select.g-combobox .g-combobox-btn.form-select-sm { min-height: 36px; border-radius: 10px; font-size: .82rem; }
    .g-input.form-control-sm, .g-select.form-select-sm { min-height: 36px; border-radius: 10px; font-size: .82rem; }
    .g-input:focus, .g-select:focus { border-color: #00AA13; box-shadow: 0 0 0 3px rgba(0,170,19,.15); outline: 0; }
    .g-select.g-combobox .g-combobox-btn:focus { border-color: #00AA13; box-shadow: 0 0 0 3px rgba(0,170,19,.15); outline: 0; }
    .g-input::placeholder { color: #9CA3AF; }
    /* Scope inside admin + public for shared look */
    .admin-desktop .g-input, .admin-desktop .g-select,
    .public-mac-desktop .g-input, .public-mac-desktop .g-select { min-height: 42px; border-radius: 12px; }

    /* --- GCombobox: searchable dropdown --- */
    .g-combobox { position: relative; }
    .g-combobox-btn {
      text-align: left; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
      cursor: pointer; background: #fff; min-height: 42px; border-radius: 12px;
      border: 1px solid #ECEDEF; transition: border-color .15s, box-shadow .15s;
    }
    .g-combobox-btn.form-select-sm { min-height: 36px; border-radius: 10px; font-size: .82rem; }
    .g-combobox-btn:focus, .g-combobox.open .g-combobox-btn { border-color: #00AA13; box-shadow: 0 0 0 3px rgba(0,170,19,.15); outline: 0; }
    .g-combobox-btn:disabled { opacity: .6; cursor: not-allowed; }
    .g-combobox-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .g-combobox-placeholder { color: #9CA3AF; }
    .g-combobox-caret { font-size: .7rem; color: #6B7280; transition: transform .2s ease; flex-shrink: 0; }
    .g-combobox.open .g-combobox-caret { transform: rotate(180deg); }
    .g-combobox-dropdown {
      background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(17,24,39,.18);
      border: 1px solid #ECEDEF; overflow: hidden; display: flex; flex-direction: column; max-height: 320px;
    }
    .g-combobox-search-wrap { position: relative; padding: .4rem; border-bottom: 1px solid #ECEDEF; flex-shrink: 0; }
    .g-combobox-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .72rem; color: #9CA3AF; pointer-events: none; }
    .g-combobox-search {
      width: 100%; border: 1px solid #ECEDEF; border-radius: 8px; padding: .35rem .6rem .35rem 1.8rem;
      font-size: .8rem; min-height: 34px; background: #f8fafc;
    }
    .g-combobox-search:focus { outline: 0; border-color: #00AA13; box-shadow: 0 0 0 2px rgba(0,170,19,.12); background: #fff; }
    .g-combobox-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; padding: .25rem; }
    .g-combobox-option {
      display: block; width: 100%; text-align: left; padding: .42rem .6rem; border: 0; border-radius: 8px;
      font-size: .8rem; cursor: pointer; background: transparent; color: #1A1A1A;
      transition: background .1s ease;
    }
    .g-combobox-option:hover, .g-combobox-option.highlight { background: #f1f5f9; }
    .g-combobox-option.active { background: #E8F8EC; color: #008A11; font-weight: 600; }
    .g-combobox-empty { display: block; width: 100%; text-align: center; padding: .6rem; border: 0; font-size: .78rem; color: #9CA3AF; background: transparent; cursor: default; }
    /* Dark theme for teleported dropdown panel (panel lives on body, so scope by body class). */
    body.public-theme-dark .g-combobox-dropdown,
    body.theme-dark .g-combobox-dropdown { background: #0f172a; border-color: var(--gj-line, #1f2937); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
    body.public-theme-dark .g-combobox-btn,
    body.theme-dark .g-combobox-btn { background: #0f172a !important; border-color: var(--gj-line, #1f2937) !important; color: var(--gj-ink, #e5e7eb) !important; }
    body.public-theme-dark .g-combobox-search-wrap,
    body.theme-dark .g-combobox-search-wrap { border-bottom-color: var(--gj-line, #1f2937); }
    body.public-theme-dark .g-combobox-search,
    body.theme-dark .g-combobox-search { background: #1e293b; border-color: var(--gj-line, #1f2937); color: var(--gj-ink, #e5e7eb); }
    body.public-theme-dark .g-combobox-option,
    body.theme-dark .g-combobox-option { color: var(--gj-ink, #e5e7eb); }
    body.public-theme-dark .g-combobox-option:hover, body.public-theme-dark .g-combobox-option.highlight,
    body.theme-dark .g-combobox-option:hover, body.theme-dark .g-combobox-option.highlight { background: #1e293b; }
    body.public-theme-dark .g-combobox-value,
    body.theme-dark .g-combobox-value { color: var(--gj-ink, #e5e7eb); }

    /* --- GPage: fullscreen overlay (like a dialog but full screen) --- */
    .gj-page {
      position: fixed; inset: 0; z-index: 100045;
      display: flex; flex-direction: column;
      background: #F4F5F7;
    }
    .gj-page-topbar {
      flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: .6rem;
      padding: 0 .75rem;
      background: linear-gradient(135deg, #00AA13, #008A11);
      color: #fff; box-shadow: 0 2px 8px rgba(0,138,17,.18);
      padding-top: env(safe-area-inset-top, 0px);
    }
    .gj-page-back {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 10px; border: 0;
      background: rgba(255,255,255,.18); color: #fff; font-size: 1.2rem;
      cursor: pointer; flex-shrink: 0;
    }
    .gj-page-back:hover { background: rgba(255,255,255,.3); }
    .gj-page-title { font-size: 1.05rem; font-weight: 700; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gj-page-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .gj-page-inner { max-width: 640px; margin: 0 auto; padding: 1.25rem .9rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
    @media (min-width: 992px) { .gj-page-inner { max-width: 720px; padding: 1.5rem 1rem 2rem; } }
    .gj-page-enter-active, .gj-page-leave-active { transition: transform .25s ease, opacity .25s ease; }
    .gj-page-enter-from { transform: translateX(100%); opacity: .4; }
    .gj-page-leave-to { transform: translateX(100%); opacity: .4; }

    /* ============================================================
       UI DOCS PAGE (/ui) — component library showcase
       ============================================================ */
    .ui-docs { min-height: 100vh; background: #F4F5F7; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1A1A1A; }
    .ui-docs-topbar {
      height: 56px; display: flex; align-items: center; gap: .6rem; padding: 0 .75rem;
      background: linear-gradient(135deg, #00AA13, #008A11); color: #fff;
      position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0,138,17,.18);
    }
    .ui-docs-topbar span { font-weight: 700; font-size: 1rem; }
    .ui-docs-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.16); font-size: 1.1rem; }
    .ui-docs-back:hover { background: rgba(255,255,255,.28); }
    .ui-docs-body { max-width: 640px; margin: 0 auto; padding: 1.25rem .9rem 3rem; }
    .ui-docs-intro { margin-bottom: 1.5rem; }
    .ui-docs-intro h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .35rem; }
    .ui-docs-intro p { color: #6B7280; font-size: .9rem; margin: 0; line-height: 1.55; }
    .ui-docs-section {
      background: #fff; border-radius: 16px; padding: 1.1rem; margin-bottom: 1rem;
      box-shadow: 0 2px 10px rgba(17,24,39,.06);
    }
    .ui-docs-section h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; gap: .45rem; }
    .ui-docs-section h2 i { color: #00AA13; font-size: 1rem; }
    .ui-docs-section p { color: #6B7280; font-size: .82rem; line-height: 1.55; margin: 0 0 .75rem; }
    .ui-docs-section code { background: #F4F5F7; color: #008A11; padding: .1rem .35rem; border-radius: 5px; font-size: .78rem; font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .ui-docs-demo {
      background: #F4F5F7; border-radius: 12px; padding: .85rem; margin-bottom: .6rem;
    }
    .ui-docs-demo-out { margin-top: .6rem; font-size: .8rem; color: #6B7280; }
    .ui-docs-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
    .ui-docs-code {
      background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: .75rem .9rem;
      font-size: .74rem; font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: pre-wrap; margin: 0;
    }
    .ui-docs-note { font-size: .76rem; color: #6B7280; margin: .5rem 0 0; }
    .ui-docs-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .ui-docs-swatch { border-radius: 10px; padding: .75rem; color: #fff; font-size: .74rem; font-weight: 600; min-height: 52px; display: flex; align-items: flex-end; }
    .ui-docs-swatch span { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    @media (min-width: 576px) { .ui-docs-swatches { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 768px) { .ui-docs-swatches { grid-template-columns: repeat(4, 1fr); } }
    /* TabBar inside docs: underline green style like public dashboard */
    .ui-docs .reseller-tabs { display: flex; gap: .3rem; padding: 0; background: transparent; border-radius: 0; margin-bottom: 0; overflow-x: auto; border-bottom: 1px solid #ECEDEF; scrollbar-width: none; }
    .ui-docs .reseller-tabs::-webkit-scrollbar { display: none; }
    .ui-docs .reseller-tabs button { flex: 0 0 auto; min-height: 38px; padding: .45rem .8rem; border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; color: #6B7280; font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
    .ui-docs .reseller-tabs button.active { color: #00AA13; border-bottom-color: #00AA13; box-shadow: none; background: transparent; }
    /* Form/button/chip styling for docs context (outside .public-mac-desktop) */
    .ui-docs .btn { border-radius: 999px; font-weight: 600; }
    .ui-docs .btn-primary { background: #00AA13; border-color: #00AA13; }
    .ui-docs .btn-primary:hover { background: #008A11; }
    .ui-docs .btn-outline-primary { color: #00AA13; border-color: #00AA13; }
    .ui-docs .btn-outline-primary:hover { background: #00AA13; color: #fff; }
    .ui-docs .form-control, .ui-docs .form-select { border-radius: 12px; border-color: #ECEDEF; min-height: 42px; }
    .ui-docs .form-control:focus, .ui-docs .form-select:focus { border-color: #00AA13; box-shadow: 0 0 0 3px rgba(0,170,19,.15); }
    .ui-docs .chip { border-radius: 999px; font-weight: 600; padding: .25rem .65rem; font-size: .75rem; }
    .ui-docs .chip-success { background: #E8F8EC; color: #008A11; }
    .ui-docs .chip-warning { background: #FFF4E0; color: #B45309; }
    .ui-docs .chip-danger { background: #FDECEC; color: #B91C1C; }
    .ui-docs .chip-info { background: #E6F4FB; color: #0369A1; }
    .ui-docs .chip-purple { background: #F1ECFE; color: #6D28D9; }
    .ui-docs .chip-secondary { background: #F4F5F7; color: #6B7280; }
    .ui-docs .status-chip-active { background: #E8F8EC; color: #008A11; }
    .ui-docs .quota-bar { background: #EEF0F2; border-radius: 999px; }
    .ui-docs .quota-bar-fill.quota-bar-ok { background: linear-gradient(90deg, #1FC94A, #00AA13); }
    .ui-docs .quota-bar-fill.quota-bar-warn { background: linear-gradient(90deg, #FBBF24, #D97706); }
    .ui-docs .quota-bar-fill.quota-bar-danger { background: linear-gradient(90deg, #F87171, #DC2626); }
    .ui-docs .card { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 2px 10px rgba(17,24,39,.06); }
    .ui-docs .card-header { background: #fff; border-bottom: 1px solid #ECEDEF; border-radius: 16px 16px 0 0; min-height: 40px; padding: .6rem .85rem; }
    .ui-docs .card-body { padding: .85rem; }

    /* Public dark mode. Body scope also covers GPage and modals teleported outside PublicLayout. */
    body.public-theme-dark {
      --gj-green: #22c55e;
      --gj-green-dark: #16a34a;
      --gj-bg: #0f172a;
      --gj-card: #1e293b;
      --gj-ink: #f1f5f9;
      --gj-muted: #94a3b8;
      --gj-line: #334155;
      --gj-shadow: 0 2px 10px rgba(0,0,0,.35);
      --gj-shadow-lg: 0 8px 28px rgba(0,0,0,.5);
    }
    .public-mac-desktop.theme-dark .gj-service-grid,
    body.public-theme-dark .gj-page .gj-service-grid,
    .public-mac-desktop.theme-dark .quota-stat-card,
    body.public-theme-dark .gj-page .quota-stat-card {
      color: var(--gj-ink) !important;
      background: var(--gj-card) !important;
      border-color: var(--gj-line) !important;
    }
    .public-mac-desktop.theme-dark .card-header,
    .public-mac-desktop.theme-dark .public-tabs,
    body.public-theme-dark .gj-page .card,
    body.public-theme-dark .gj-page .card-header,
    body.public-theme-dark .gj-page .public-tabs,
    body.public-theme-dark .mac-quota-modal .modal-content,
    body.public-theme-dark .mac-quota-modal .modal-header,
    body.public-theme-dark .mac-quota-modal .modal-footer {
      color: var(--gj-ink) !important;
      background: var(--gj-card) !important;
      border-color: var(--gj-line) !important;
    }
    body.public-theme-dark .gj-page {
      color: var(--gj-ink);
      background: var(--gj-bg);
    }
    body.public-theme-dark .gj-page-body { background: var(--gj-bg); }
    .public-mac-desktop.theme-dark .gj-service-tile,
    .public-mac-desktop.theme-dark .gj-service-tile > span:not(.gj-service-icon),
    body.public-theme-dark .gj-page .gj-service-tile,
    body.public-theme-dark .gj-page .gj-service-tile > span:not(.gj-service-icon) { color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .form-control,
    .public-mac-desktop.theme-dark .form-select,
    .public-mac-desktop.theme-dark .g-input,
    .public-mac-desktop.theme-dark .g-select,
    body.public-theme-dark .gj-page .form-control,
    body.public-theme-dark .gj-page .form-select,
    body.public-theme-dark .gj-page .g-input,
    body.public-theme-dark .gj-page .g-select,
    body.public-theme-dark .mac-quota-modal .form-control,
    body.public-theme-dark .mac-quota-modal .form-select {
      color: var(--gj-ink) !important;
      background-color: #0f172a !important;
      border-color: var(--gj-line) !important;
    }
    body.public-theme-dark .gj-page .form-control::placeholder,
    body.public-theme-dark .mac-quota-modal .form-control::placeholder { color: #64748b !important; }
    .public-mac-desktop.theme-dark .table,
    body.public-theme-dark .gj-page .table { --bs-table-bg: transparent; --bs-table-color: var(--gj-ink); color: var(--gj-ink); }
    .public-mac-desktop.theme-dark .table > :not(caption) > * > *,
    body.public-theme-dark .gj-page .table > :not(caption) > * > * {
      color: var(--gj-ink);
      background-color: transparent !important;
      border-color: var(--gj-line) !important;
    }
    .public-mac-desktop.theme-dark .table-light,
    .public-mac-desktop.theme-dark .table-light > *,
    body.public-theme-dark .gj-page .table-light,
    body.public-theme-dark .gj-page .table-light > * { --bs-table-bg: #172033; background-color: #172033 !important; color: var(--gj-muted) !important; }
    .public-mac-desktop.theme-dark .connect-api-key-box,
    .public-mac-desktop.theme-dark .connect-api-key-box-inline,
    body.public-theme-dark .gj-page .connect-api-key-box,
    body.public-theme-dark .gj-page .connect-api-key-box-inline {
      color: var(--gj-ink) !important;
      background: #0f172a !important;
      border-color: var(--gj-line) !important;
    }
    .public-mac-desktop.theme-dark .token-breakdown-value,
    .public-mac-desktop.theme-dark .quota-stat-value,
    body.public-theme-dark .gj-page .token-breakdown-value,
    body.public-theme-dark .gj-page .quota-stat-value,
    body.public-theme-dark .gj-page .text-dark { color: var(--gj-ink) !important; }
    .public-mac-desktop.theme-dark .quota-stat-label,
    .public-mac-desktop.theme-dark .quota-stat-meta,
    body.public-theme-dark .gj-page .quota-stat-label,
    body.public-theme-dark .gj-page .quota-stat-meta { color: var(--gj-muted) !important; }
    .public-mac-desktop.theme-dark .token-breakdown-bar,
    body.public-theme-dark .gj-page .token-breakdown-bar,
    .public-mac-desktop.theme-dark .quota-bar,
    body.public-theme-dark .gj-page .quota-bar { background: #334155 !important; }
    body.public-theme-dark .gj-page .text-muted,
    body.public-theme-dark .mac-quota-modal .text-muted { color: var(--gj-muted) !important; }
    .public-mac-desktop.theme-dark .table-responsive,
    body.public-theme-dark .gj-page .table-responsive { border-color: var(--gj-line) !important; }
    body.public-theme-dark .gj-page .tutorial-content,
    body.public-theme-dark .mac-quota-modal .tutorial-content { color: #cbd5e1; }
    body.public-theme-dark .gj-page .tutorial-content h2,
    body.public-theme-dark .gj-page .tutorial-content h3,
    body.public-theme-dark .gj-page .tutorial-content h4,
    body.public-theme-dark .mac-quota-modal .tutorial-content h2,
    body.public-theme-dark .mac-quota-modal .tutorial-content h3,
    body.public-theme-dark .mac-quota-modal .tutorial-content h4 { color: var(--gj-ink); }
    body.public-theme-dark .gj-page .tutorial-content code:not(pre code),
    body.public-theme-dark .mac-quota-modal .tutorial-content code:not(pre code) { color: #c4b5fd; background: #0f172a; }
    body.public-theme-dark .gj-page .tutorial-content blockquote,
    body.public-theme-dark .mac-quota-modal .tutorial-content blockquote { color: #ddd6fe; background: #2e2850; }
    body.public-theme-dark .gj-page .tutorial-content th,
    body.public-theme-dark .gj-page .tutorial-content td,
    body.public-theme-dark .mac-quota-modal .tutorial-content th,
    body.public-theme-dark .mac-quota-modal .tutorial-content td { border-color: var(--gj-line); }
    /* Hardcoded light inline styles → dark surfaces. NOTE: Vue 3 patches the
       `style` attribute through the CSSOM (patchStyle), never setAttribute —
       the browser then re-serializes it, so `#f8fafc` renders as
       `rgb(248, 250, 252)` in the DOM. Selectors must therefore match BOTH the
       hex literal (non-Vue markup) and the normalized rgb() form. */
    body.public-theme-dark .gj-page [style*="background:#f8fafc"],
    body.public-theme-dark .gj-page [style*="background: rgb(248, 250, 252)"],
    body.public-theme-dark .gj-page [style*="background:#f1f5f9"],
    body.public-theme-dark .gj-page [style*="background: rgb(241, 245, 249)"],
    body.public-theme-dark .gj-page [style*="background:#e2e8f0"],
    body.public-theme-dark .gj-page [style*="background: rgb(226, 232, 240)"],
    .public-mac-desktop.theme-dark [style*="background:#f8fafc"],
    .public-mac-desktop.theme-dark [style*="background: rgb(248, 250, 252)"],
    .public-mac-desktop.theme-dark [style*="background:#f1f5f9"],
    .public-mac-desktop.theme-dark [style*="background: rgb(241, 245, 249)"],
    .public-mac-desktop.theme-dark [style*="background:#e2e8f0"],
    .public-mac-desktop.theme-dark [style*="background: rgb(226, 232, 240)"] {
      color: var(--gj-ink) !important;
      background: #172033 !important;
      border-color: var(--gj-line) !important;
    }
    /* Invitation-code boxes: white + green border. Plain white boxes are NOT
       flipped — they wrap QR code images that need a white surface to scan. */
    body.public-theme-dark .gj-page [style*="background:#fff;"][style*="#bbf7d0"],
    body.public-theme-dark .gj-page [style*="background: rgb(255, 255, 255)"][style*="rgb(187, 247, 208)"],
    .public-mac-desktop.theme-dark [style*="background:#fff;"][style*="#bbf7d0"],
    .public-mac-desktop.theme-dark [style*="background: rgb(255, 255, 255)"][style*="rgb(187, 247, 208)"] {
      color: var(--gj-ink) !important;
      background: #172033 !important;
      border-color: rgba(34,197,94,.4) !important;
    }
    /* Green tint surfaces (topup success boxes, price notes) */
    body.public-theme-dark .gj-page [style*="background:#f0fdf4"],
    body.public-theme-dark .gj-page [style*="background: rgb(240, 253, 244)"],
    body.public-theme-dark .gj-page [style*="background:#ecfdf5"],
    body.public-theme-dark .gj-page [style*="background: rgb(236, 253, 245)"],
    body.public-theme-dark .gj-page [style*="background:#dcfce7"],
    body.public-theme-dark .gj-page [style*="background: rgb(220, 252, 231)"],
    .public-mac-desktop.theme-dark [style*="background:#f0fdf4"],
    .public-mac-desktop.theme-dark [style*="background: rgb(240, 253, 244)"],
    .public-mac-desktop.theme-dark [style*="background:#ecfdf5"],
    .public-mac-desktop.theme-dark [style*="background: rgb(236, 253, 245)"],
    .public-mac-desktop.theme-dark [style*="background:#dcfce7"],
    .public-mac-desktop.theme-dark [style*="background: rgb(220, 252, 231)"] {
      color: #dcfce7 !important;
      background: #123524 !important;
      border-color: #166534 !important;
    }
    /* Amber tint surfaces (tutorial notice, cara-transfer box) */
    body.public-theme-dark .gj-page [style*="background:#fff8e6"],
    body.public-theme-dark .gj-page [style*="background: rgb(255, 248, 230)"],
    body.public-theme-dark .gj-page [style*="background:#fffbeb"],
    body.public-theme-dark .gj-page [style*="background: rgb(255, 251, 235)"],
    .public-mac-desktop.theme-dark [style*="background:#fff8e6"],
    .public-mac-desktop.theme-dark [style*="background: rgb(255, 248, 230)"],
    .public-mac-desktop.theme-dark [style*="background:#fffbeb"],
    .public-mac-desktop.theme-dark [style*="background: rgb(255, 251, 235)"] { color: #fde68a !important; background: #3b2f16 !important; border-color: #854d0e !important; }
    /* Orange tint surfaces */
    body.public-theme-dark .gj-page [style*="background:#fff7ed"],
    body.public-theme-dark .gj-page [style*="background: rgb(255, 247, 237)"],
    .public-mac-desktop.theme-dark [style*="background:#fff7ed"],
    .public-mac-desktop.theme-dark [style*="background: rgb(255, 247, 237)"] { color: #fed7aa !important; background: #3b2214 !important; border-color: #9a3412 !important; }
    /* Red / rose tint surfaces */
    body.public-theme-dark .gj-page [style*="background:#fef2f2"],
    body.public-theme-dark .gj-page [style*="background: rgb(254, 242, 242)"],
    body.public-theme-dark .gj-page [style*="background:#fff1f2"],
    body.public-theme-dark .gj-page [style*="background: rgb(255, 241, 242)"],
    .public-mac-desktop.theme-dark [style*="background:#fef2f2"],
    .public-mac-desktop.theme-dark [style*="background: rgb(254, 242, 242)"],
    .public-mac-desktop.theme-dark [style*="background:#fff1f2"],
    .public-mac-desktop.theme-dark [style*="background: rgb(255, 241, 242)"] { color: #fecaca !important; background: #451a1a !important; border-color: #991b1b !important; }
    /* Dark inline text colors were picked for light pastel boxes — remap to
       readable light tones once those boxes flip dark (hex + rgb form). */
    body.public-theme-dark .gj-page [style*="color:#92400e"],
    body.public-theme-dark .gj-page [style*="color: rgb(146, 64, 14)"],
    .public-mac-desktop.theme-dark [style*="color:#92400e"],
    .public-mac-desktop.theme-dark [style*="color: rgb(146, 64, 14)"] { color: #fcd34d !important; }
    body.public-theme-dark .gj-page [style*="color:#c2410c"],
    body.public-theme-dark .gj-page [style*="color: rgb(194, 65, 12)"],
    .public-mac-desktop.theme-dark [style*="color:#c2410c"],
    .public-mac-desktop.theme-dark [style*="color: rgb(194, 65, 12)"] { color: #fdba74 !important; }
    body.public-theme-dark .gj-page [style*="color:#166534"],
    body.public-theme-dark .gj-page [style*="color: rgb(22, 101, 52)"],
    body.public-theme-dark .gj-page [style*="color:#065f46"],
    body.public-theme-dark .gj-page [style*="color: rgb(6, 95, 70)"],
    body.public-theme-dark .gj-page [style*="color:#15803d"],
    body.public-theme-dark .gj-page [style*="color: rgb(21, 128, 61)"],
    .public-mac-desktop.theme-dark [style*="color:#166534"],
    .public-mac-desktop.theme-dark [style*="color: rgb(22, 101, 52)"],
    .public-mac-desktop.theme-dark [style*="color:#065f46"],
    .public-mac-desktop.theme-dark [style*="color: rgb(6, 95, 70)"],
    .public-mac-desktop.theme-dark [style*="color:#15803d"],
    .public-mac-desktop.theme-dark [style*="color: rgb(21, 128, 61)"] { color: #86efac !important; }
    /* Light inline borders → dark line tones */
    body.public-theme-dark .gj-page [style*="border:1px solid #e2e8f0"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(226, 232, 240)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #e2e8f0"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(226, 232, 240)"] { border-color: var(--gj-line) !important; }
    body.public-theme-dark .gj-page [style*="border:1px solid #bbf7d0"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(187, 247, 208)"],
    body.public-theme-dark .gj-page [style*="border:1px solid #a7f3d0"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(167, 243, 208)"],
    body.public-theme-dark .gj-page [style*="border:1px solid #86efac"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(134, 239, 172)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #bbf7d0"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(187, 247, 208)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #a7f3d0"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(167, 243, 208)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #86efac"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(134, 239, 172)"] { border-color: rgba(34,197,94,.4) !important; }
    body.public-theme-dark .gj-page [style*="border:1px solid #fde68a"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(253, 230, 138)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #fde68a"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(253, 230, 138)"] { border-color: rgba(245,158,11,.4) !important; }
    body.public-theme-dark .gj-page [style*="border:1px solid #fecdd3"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(254, 205, 211)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #fecdd3"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(254, 205, 211)"] { border-color: rgba(244,63,94,.4) !important; }
    body.public-theme-dark .gj-page [style*="border:1px solid #fed7aa"],
    body.public-theme-dark .gj-page [style*="border: 1px solid rgb(254, 215, 170)"],
    .public-mac-desktop.theme-dark [style*="border:1px solid #fed7aa"],
    .public-mac-desktop.theme-dark [style*="border: 1px solid rgb(254, 215, 170)"] { border-color: rgba(249,115,22,.4) !important; }
    /* Topup tier cards are white via CSS class (not inline) — flip them dark. */
    body.public-theme-dark .gj-page .gj-topup-card,
    .public-mac-desktop.theme-dark .gj-topup-card {
      color: var(--gj-ink) !important;
      background: #172033 !important;
      border-color: var(--gj-line) !important;
    }
    body.public-theme-dark .gj-page .gj-topup-card:hover,
    .public-mac-desktop.theme-dark .gj-topup-card:hover { border-color: var(--gj-green) !important; }
    /* Daily-1 highlight card keeps its bright yellow — so force dark ink on it. */
    body.public-theme-dark .gj-page .gj-topup-card-daily1,
    .public-mac-desktop.theme-dark .gj-topup-card-daily1 { background: #fde047 !important; border-color: #ca8a04 !important; color: #422006 !important; }
    body.public-theme-dark .gj-page .gj-topup-card-daily1 .text-muted,
    .public-mac-desktop.theme-dark .gj-topup-card-daily1 .text-muted { color: #713f12 !important; }
    body.public-theme-dark .gj-page .gj-topup-card-daily1 .text-success,
    .public-mac-desktop.theme-dark .gj-topup-card-daily1 .text-success { color: #15803d !important; }
    /* Bonus banner routebill — dark variant (green tint, light ink). */
    body.public-theme-dark .gj-page .gj-usdt-bonus-banner,
    .public-mac-desktop.theme-dark .gj-usdt-bonus-banner { background: #052e1c !important; border-color: rgba(16,185,129,.35) !important; color: #a7f3d0 !important; }
    body.public-theme-dark .gj-page .gj-usdt-bonus-banner i,
    .public-mac-desktop.theme-dark .gj-usdt-bonus-banner i { color: #34d399 !important; }
    /* Bootstrap .alert-light stays light otherwise; flip inside public dark scopes */
    body.public-theme-dark .gj-page .alert-light,
    body.public-theme-dark .mac-quota-modal .alert-light,
    .public-mac-desktop.theme-dark .alert-light { color: var(--gj-ink) !important; background: var(--gj-card) !important; border-color: var(--gj-line) !important; }
    /* Bootstrap .bg-light (shop image placeholder, quickstart <code> chips,
       multiplier badge) — light surface + inherited light ink = invisible text. */
    body.public-theme-dark .gj-page .bg-light { background: #0f172a !important; color: var(--gj-ink) !important; }
    body.public-theme-dark .gj-page code.bg-light { background: #334155 !important; color: #e2e8f0 !important; }
    /* Raw (non-GDialog) modals rendered inside GPage slots: teleported to body
       with the page, so only the body class reaches them — Bootstrap white
       .modal-content would swallow the light ink text. */
    body.public-theme-dark .gj-page .modal-content { background: var(--gj-card) !important; color: var(--gj-ink) !important; }
    body.public-theme-dark .gj-page .modal-header { border-bottom-color: var(--gj-line) !important; }
    body.public-theme-dark .gj-page .modal-footer { border-top-color: var(--gj-line) !important; }
     /* Dark mode X: swap the black SVG for a white one directly (invert filter
        would also flip the button's dark chip background and hide the X again). */
     body.public-theme-dark .btn-close,
     .public-mac-desktop.theme-dark .btn-close {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
       opacity: .7;
     }
     body.public-theme-dark .btn-close:hover,
     .public-mac-desktop.theme-dark .btn-close:hover { opacity: 1; }
    body.public-theme-dark .gj-page .alert-info { color: #bae6fd !important; background: #123047 !important; }
    body.public-theme-dark .gj-page .alert-success { color: #bbf7d0 !important; background: #123524 !important; }
    body.public-theme-dark .gj-page .alert-danger { color: #fecaca !important; background: #451a1a !important; }
     body.public-theme-dark .gj-page .btn-light,
     body.public-theme-dark .mac-quota-modal .btn-light { color: var(--gj-ink) !important; background: #334155 !important; border-color: #475569 !important; }
    /* Admin Actions dialog + FAB menu: dark surfaces so ink text stays readable */
    body.public-theme-dark .mac-admin-actions-dialog,
    .public-mac-desktop.theme-dark .mac-admin-actions-dialog {
      background: var(--gj-card) !important;
      border-color: var(--gj-line) !important;
      box-shadow: var(--gj-shadow-lg) !important;
    }
    body.public-theme-dark .mac-admin-actions-title,
    .public-mac-desktop.theme-dark .mac-admin-actions-title { color: var(--gj-ink) !important; border-bottom: 1px solid var(--gj-line) !important; }
    body.public-theme-dark .mac-admin-actions-dialog > button,
    .public-mac-desktop.theme-dark .mac-admin-actions-dialog > button { color: var(--gj-ink) !important; background: transparent !important; }
    body.public-theme-dark .mac-admin-actions-dialog > button:hover,
    body.public-theme-dark .mac-admin-actions-dialog > button:focus,
    .public-mac-desktop.theme-dark .mac-admin-actions-dialog > button:hover,
    .public-mac-desktop.theme-dark .mac-admin-actions-dialog > button:focus { color: var(--gj-ink) !important; background: rgba(34,197,94,.15) !important; }
    body.public-theme-dark .mac-admin-actions-dialog > button i,
    .public-mac-desktop.theme-dark .mac-admin-actions-dialog > button i { color: inherit !important; }
    body.public-theme-dark .mac-admin-actions-dialog > button i.text-primary,
    body.public-theme-dark .mac-admin-actions-dialog > button i.text-success,
    body.public-theme-dark .mac-admin-actions-dialog > button i.text-danger,
    body.public-theme-dark .mac-admin-actions-dialog > button i.text-warning,
    body.public-theme-dark .mac-admin-actions-dialog > button i.text-secondary { color: inherit !important; }
    body.public-theme-dark .mac-admin-actions-divider,
    .public-mac-desktop.theme-dark .mac-admin-actions-divider { background: var(--gj-line) !important; }
    body.public-theme-dark .mac-admin-actions-modal,
    .public-mac-desktop.theme-dark .mac-admin-actions-modal { background: rgba(15,23,42,.6) !important; }
    /* FAB menu (non-dialog variant) */
    body.public-theme-dark .admin-fab-menu,
    .public-mac-desktop.theme-dark .admin-fab-menu { background: var(--gj-card) !important; border-color: var(--gj-line) !important; box-shadow: var(--gj-shadow-lg) !important; }
    body.public-theme-dark .admin-fab-menu::before,
    .public-mac-desktop.theme-dark .admin-fab-menu::before { color: var(--gj-muted) !important; border-bottom: 1px solid var(--gj-line) !important; }
    body.public-theme-dark .admin-fab-menu button,
    .public-mac-desktop.theme-dark .admin-fab-menu button { color: var(--gj-ink) !important; }
    body.public-theme-dark .admin-fab-menu button:hover,
    .public-mac-desktop.theme-dark .admin-fab-menu button:hover { color: var(--gj-ink) !important; background: rgba(34,197,94,.15) !important; }
    body.public-theme-dark .admin-fab-menu-divider,
    .public-mac-desktop.theme-dark .admin-fab-menu-divider { background: var(--gj-line) !important; }

    /* ============ DARK MODE SAFETY NET (inline hardcoded light backgrounds) ============
       Dark mode forces light ink on the whole public dashboard, so ANY element with an
       inline hardcoded light background would render light text on a light box (invisible).
       These attribute selectors catch every such element that does NOT carry its own
       explicit inline text color (those are readable by definition) and flip the surface
       to the dark palette. Exceptions kept light on purpose: white QRIS containers (#fff,
       QR must stay scannable) and #ecfdf5 panels (their children use explicit dark-green
       text designed for a light surface). Do not remove; new inline light bg values should
       be added here or (better) avoided entirely — use --gj-* vars or .gj-invite-msgbox. */
    .public-mac-desktop.theme-dark [style*="background:#f8fafc"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#f0fdf4"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#fffbeb"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#fff8e6"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#fff1f2"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#fef2f2"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#eff6ff"]:not([style*="color:"]),
    .public-mac-desktop.theme-dark [style*="background:#f1f5f9"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#f8fafc"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#f0fdf4"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#fffbeb"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#fff8e6"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#fff1f2"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#fef2f2"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#eff6ff"]:not([style*="color:"]),
    body.public-theme-dark .gj-page [style*="background:#f1f5f9"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#f8fafc"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#f0fdf4"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#fffbeb"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#fff8e6"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#fff1f2"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#fef2f2"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#eff6ff"]:not([style*="color:"]),
    body.public-theme-dark .mac-quota-modal [style*="background:#f1f5f9"]:not([style*="color:"]) {
      background: #0f172a !important;
    }