/* ==========================================================================
   UnikMember Design System — shared tokens & component layer
   Loaded after each page's own <style>, so it refines existing classes
   without changing markup contracts (IDs, onclick handlers, data-* hooks).
   The accent follows the admin's "theme_color" setting via --brand-blue,
   which pages inject at runtime; indigo is only the default.
   ========================================================================== */

:root {
  --um-indigo: #4F46E5;
  --um-accent: var(--brand-blue, #4F46E5);
  --um-accent-hover: color-mix(in srgb, var(--um-accent) 86%, #000);
  --um-accent-soft: color-mix(in srgb, var(--um-accent) 9%, #fff);
  --um-accent-border: color-mix(in srgb, var(--um-accent) 28%, #fff);
  --um-accent-ring: color-mix(in srgb, var(--um-accent) 30%, transparent);

  --um-bg: #F6F7F9;
  --um-surface: #FFFFFF;
  --um-surface-2: #F9FAFB;
  --um-border: #E6E8EC;
  --um-border-strong: #D3D7DE;
  --um-text: #111827;
  --um-text-2: #374151;
  --um-muted: #6B7280;
  --um-subtle: #9CA3AF;

  --um-success: #047857; --um-success-soft: #ECFDF5; --um-success-border: #A7F3D0;
  --um-warning: #B45309; --um-warning-soft: #FFFBEB; --um-warning-border: #FDE68A;
  --um-danger:  #DC2626; --um-danger-soft:  #FEF2F2; --um-danger-border:  #FECACA;
  --um-neutral-soft: #F3F4F6;

  --um-r-sm: 8px;
  --um-r: 10px;
  --um-r-lg: 14px;
  --um-shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
  --um-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 12px -4px rgba(17, 24, 39, .08);
  --um-shadow-lg: 0 20px 48px -16px rgba(17, 24, 39, .25);
  --um-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Legacy variables some pages reference but never defined */
  --amber-50: #FFFBEB; --amber-100: #FDE68A; --rose-600: #E11D48; --blue-200: var(--um-accent-border);
}

/* ---------- Accessibility & base ---------- */
.um-app :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--um-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.um-app :where(input, select, textarea):focus-visible { outline-offset: 0; }
.um-app button:disabled, .um-app [aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .um-app *, .um-app *::before, .um-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.um-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Brand mark (inline SVG, replaces generic icon in admin/install) */
.um-mark { width: 28px; height: 28px; flex: 0 0 auto; display: inline-block; }
.um-mark rect { fill: var(--um-accent); }
.um-powered { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 600; color: var(--um-subtle); }
.um-powered strong { color: var(--um-muted); font-weight: 700; }

/* ==========================================================================
   Shared app shell (admin + member area)
   ========================================================================== */
.um-shell { background: var(--um-bg); color: var(--um-text); font-family: var(--um-font); }
.um-shell .sidebar { background: var(--um-surface); border-right: 1px solid var(--um-border); width: 256px; }
.um-shell .sidebar-header { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--um-border); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--um-text); min-height: 64px; }
.um-shell .sidebar-brand { gap: .625rem; min-width: 0; }
.um-shell .sidebar-brand .dyn-site-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-shell .sidebar-brand > svg:not(.um-mark) { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--um-accent); color: #fff !important; }
.um-shell .sidebar-nav { padding: .75rem .75rem 1rem; gap: 2px; }
.um-shell .nav-item { min-height: 40px; padding: .5rem .75rem; border-radius: var(--um-r-sm); font-size: .875rem; font-weight: 600; color: var(--um-text-2); border-right: 0 !important; }
.um-shell .nav-item svg { width: 18px; height: 18px; color: var(--um-subtle); transition: color .15s; }
.um-shell .nav-item:hover { background: var(--um-surface-2); color: var(--um-text); }
.um-shell .nav-item:hover svg { color: var(--um-text-2); }
.um-shell .nav-item.active { background: var(--um-accent-soft) !important; color: var(--um-accent) !important; font-weight: 700; border-right: 0 !important; }
.um-shell .nav-item.active svg { color: var(--um-accent); }
.um-shell .nav-category, .um-shell .um-nav-label { margin: 1rem .75rem .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--um-subtle); }
.um-shell .nav-divider { display: none; }
.um-shell .sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--um-border); gap: .5rem; }
.um-shell .sidebar-link, .um-shell .sidebar-logout { min-height: 36px; font-size: .8125rem; font-weight: 600; color: var(--um-muted); border-radius: var(--um-r-sm); }
.um-shell .sidebar-link svg, .um-shell .sidebar-logout svg { width: 17px; height: 17px; }
.um-shell .sidebar-logout:hover { color: var(--um-danger); }
.um-shell .sidebar-overlay { background: rgba(17, 24, 39, .45); }

.um-shell .top-header { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--um-border); min-height: 64px; }
.um-shell .header-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--um-text); }
.um-shell .btn-menu { border: 1px solid var(--um-border); border-radius: var(--um-r-sm); width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--um-text-2); }
.um-shell .btn-refresh { width: 36px; height: 36px; border-radius: var(--um-r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--um-muted); }
.um-shell .btn-refresh:hover { background: var(--um-surface-2); color: var(--um-accent); }
.um-shell .admin-avatar, .um-shell .header-avatar { width: 36px; height: 36px; background: var(--um-accent-soft) !important; color: var(--um-accent) !important; }

/* ---------- Buttons ---------- */
.um-shell :is(.btn-primary, .btn-outline, .btn-dark) { min-height: 40px; padding: .5625rem 1rem; border-radius: var(--um-r-sm); font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; gap: .5rem; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.um-shell :is(.btn-primary, .btn-outline, .btn-dark) svg { width: 16px; height: 16px; }
.um-shell .btn-primary { background: var(--um-accent); color: #fff; box-shadow: var(--um-shadow-sm); }
.um-shell .btn-primary:hover { background: var(--um-accent-hover) !important; }
.um-shell .btn-outline { background: var(--um-surface); color: var(--um-text-2); border: 1px solid var(--um-border-strong); }
.um-shell .btn-outline:hover { background: var(--um-surface-2); border-color: var(--um-subtle); color: var(--um-text); }
.um-shell .btn-dark { background: var(--um-text); color: #fff; }
.um-shell .btn-dark:hover { background: #000; }
.um-shell .btn-cancel { min-height: 40px; border-radius: var(--um-r-sm); color: var(--um-muted); font-size: .8125rem; }
.um-shell .btn-cancel:hover { background: var(--um-surface-2); color: var(--um-text); }
.um-shell .um-danger, .um-shell .btn-primary.um-danger { background: var(--um-danger) !important; color: #fff !important; }
.um-shell .um-danger:hover { background: #B91C1C !important; }
.um-shell .btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--um-r-sm); border: 1px solid var(--um-border); color: var(--um-muted); background: var(--um-surface); }
.um-shell .btn-icon svg { width: 16px; height: 16px; }
.um-shell .btn-icon:hover { border-color: var(--um-accent-border) !important; color: var(--um-accent) !important; background: var(--um-accent-soft); }
.um-shell .btn-icon.rose:hover { border-color: var(--um-danger-border) !important; color: var(--um-danger) !important; background: var(--um-danger-soft); }
.um-shell .btn-icon.amber { color: var(--um-success); border-color: var(--um-success-border); background: var(--um-success-soft); }
.um-shell .btn-icon.amber:hover { border-color: var(--um-success) !important; color: var(--um-success) !important; background: var(--um-success-soft); }

/* ---------- Cards, sections ---------- */
.um-shell :is(.card, .settings-card, .period-summary, .sales-chart-card, .media-box, .system-update-card, .prod-card, .table-wrap) {
  background: var(--um-surface); border: 1px solid var(--um-border); border-radius: var(--um-r-lg); box-shadow: var(--um-shadow-sm);
}
.um-shell .settings-title { font-size: 1rem; font-weight: 800; color: var(--um-text); border-bottom-color: var(--um-border); }
.um-shell .settings-title svg { color: var(--um-accent) !important; }
.um-shell .action-title { font-size: 1rem; font-weight: 800; color: var(--um-text); }
.um-shell .action-title svg { width: 18px; height: 18px; color: var(--um-accent); }

/* ---------- Forms ---------- */
.um-shell .form-label { font-size: .8125rem; font-weight: 600; color: var(--um-text-2); margin-bottom: .375rem; }
.um-shell :is(.form-input, .form-select, .form-textarea, .modal-form-input) {
  min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--um-border-strong); border-radius: var(--um-r-sm);
  background: var(--um-surface); color: var(--um-text); font-size: .875rem; transition: border-color .15s, box-shadow .15s;
}
.um-shell .form-textarea { min-height: 88px; line-height: 1.55; }
.um-shell :is(.form-input, .form-select, .form-textarea, .modal-form-input)::placeholder { color: var(--um-subtle); }
.um-shell :is(.form-input, .form-select, .form-textarea, .modal-form-input):hover { border-color: var(--um-subtle); }
.um-shell :is(.form-input, .form-select, .form-textarea, .modal-form-input):focus { border-color: var(--um-accent) !important; box-shadow: 0 0 0 3px var(--um-accent-ring) !important; outline: none; }
.um-shell :is(.form-input, .form-select, .form-textarea):is([readonly], :disabled) { background: var(--um-surface-2); color: var(--um-muted); }
.um-shell :is(.form-input, .form-select, .form-textarea):user-invalid { border-color: var(--um-danger); }
.um-shell .form-checkbox, .um-shell .form-radio { accent-color: var(--um-accent) !important; width: 1.05rem; height: 1.05rem; }

/* ---------- Tables ---------- */
.um-shell .table-wrap, .um-shell .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.um-shell :is(.table, .data-table) th { background: var(--um-surface-2); padding: .75rem 1.25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; color: var(--um-muted); border-bottom: 1px solid var(--um-border); white-space: nowrap; }
.um-shell :is(.table, .data-table) td { padding: .875rem 1.25rem; font-size: .875rem; color: var(--um-text-2); border-bottom: 1px solid #F0F1F4; }
.um-shell :is(.table, .data-table) tr:hover td { background: #FAFAFB; }
.um-shell .td-bold { font-weight: 700; color: var(--um-text); }
.um-shell .td-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: .8125rem; color: var(--um-accent) !important; }
.um-shell .td-sub { font-size: .75rem; color: var(--um-muted); margin-top: .125rem; }
.um-shell .td-wa { color: var(--um-text-2); font-weight: 600; }
.um-shell .action-btns { gap: .375rem; }

/* ---------- Badges (status) ---------- */
.um-shell :is(.badge, .badge-status) { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .01em; text-transform: none; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.um-shell :is(.badge, .badge-status)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.um-shell :is(.badge.active, .badge-lunas) { background: var(--um-success-soft) !important; color: var(--um-success) !important; border-color: var(--um-success-border) !important; }
.um-shell :is(.badge.warning, .badge-pending) { background: var(--um-warning-soft) !important; color: var(--um-warning) !important; border-color: var(--um-warning-border) !important; }
.um-shell :is(.badge.inactive, .badge-expired) { background: var(--um-neutral-soft) !important; color: var(--um-muted) !important; border-color: var(--um-border) !important; }
.um-shell .badge.danger { background: var(--um-danger-soft); color: var(--um-danger); border-color: var(--um-danger-border); }

/* ---------- Modals ---------- */
.um-shell .modal-overlay { background: rgba(17, 24, 39, .5); backdrop-filter: blur(3px); }
.um-shell .modal-card { border-radius: var(--um-r-lg); border: 1px solid var(--um-border); box-shadow: var(--um-shadow-lg); }
.um-shell .modal-title { font-size: 1.0625rem; font-weight: 800; color: var(--um-text); border-bottom-color: var(--um-border); }
.um-shell .modal-footer { border-top-color: var(--um-border); }

/* ---------- Toasts ---------- */
.um-shell #toast-container { top: 16px; right: 16px; left: auto; }
.um-shell .toast { border-radius: var(--um-r); font-size: .8125rem; font-weight: 600; padding: .75rem 1rem; box-shadow: var(--um-shadow-lg); }
.um-shell .toast.success { background: var(--um-text) !important; }
.um-shell .toast.error { background: var(--um-danger) !important; }
.um-shell .toast.warning { background: #374151 !important; }
.um-shell .toast.info { background: var(--um-accent) !important; }
@media (max-width: 640px) { .um-shell #toast-container { left: 16px; right: 16px; } .um-shell .toast { max-width: none; } }

/* ---------- Empty / loading states ---------- */
.um-empty { padding: 2.5rem 1rem !important; text-align: center; color: var(--um-muted) !important; font-style: normal !important; font-size: .875rem; }
.um-empty strong { display: block; color: var(--um-text); font-weight: 700; margin-bottom: .25rem; }
.um-shell .sync-badge { font-size: .625rem; font-weight: 700; background: var(--um-accent-soft); color: var(--um-accent); letter-spacing: .04em; padding: .25rem .5rem; }

/* ==========================================================================
   Admin panel
   ========================================================================== */
.um-admin { background: var(--um-bg); }
.um-admin .main-content { background: var(--um-bg); padding-top: 0 !important; }
.um-admin .top-header { margin-top: 0 !important; padding-top: .75rem; padding-bottom: .75rem; }
.um-admin .header-user { gap: .5rem; }
.um-admin .header-save-settings { background: var(--um-accent) !important; }
.um-admin .header-save-settings:hover { background: var(--um-accent-hover) !important; }

/* Login */
.um-admin #login-overlay { background: radial-gradient(1200px 500px at 50% -10%, var(--um-accent-soft), transparent 70%), var(--um-bg); }
.um-admin .login-card { max-width: 26rem; border-radius: 18px; border: 1px solid var(--um-border); box-shadow: var(--um-shadow-lg); padding: 2.25rem 2rem; }
.um-admin .login-logo { width: 3.25rem; height: 3.25rem; background: transparent !important; margin-bottom: 1.25rem; }
.um-admin .login-logo .um-mark { width: 3.25rem; height: 3.25rem; }
.um-admin .login-card h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.um-admin .login-card p { margin-bottom: 1.75rem; }
.um-admin .login-form-group label { font-size: .8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--um-text-2); }
.um-admin .login-input { min-height: 46px; border-radius: var(--um-r); border-color: var(--um-border-strong); font-weight: 500; }
.um-admin .login-input:focus { border-color: var(--um-accent) !important; box-shadow: 0 0 0 3px var(--um-accent-ring) !important; }
.um-admin .login-btn-toggle { width: 36px; height: 36px; right: .375rem; display: flex; align-items: center; justify-content: center; border-radius: var(--um-r-sm); }
.um-admin .btn-login-submit { min-height: 46px; border-radius: var(--um-r); text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 700; background: var(--um-accent); }
.um-admin .btn-login-submit:hover { background: var(--um-accent-hover) !important; }

/* KPI cards */
.um-admin .stat-grid { gap: 1rem; }
@media (min-width: 640px) { .um-admin .stat-grid.um-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.um-admin .stat-card, .um-admin .stat-card.solid-blue, .um-admin .stat-card.solid-orange {
  background: var(--um-surface) !important; color: var(--um-text) !important; border: 1px solid var(--um-border) !important;
  border-radius: var(--um-r-lg); padding: 1.125rem 1.25rem; box-shadow: var(--um-shadow-sm); display: grid; grid-template-columns: auto 1fr; column-gap: .875rem; align-items: center;
}
.um-admin .stat-card .um-stat-icon { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--um-accent-soft); color: var(--um-accent); }
.um-admin .stat-card .um-stat-icon svg { width: 20px; height: 20px; }
.um-admin .stat-card .um-stat-icon.green { background: var(--um-success-soft); color: var(--um-success); }
.um-admin .stat-card .um-stat-icon.amber { background: var(--um-warning-soft); color: var(--um-warning); }
.um-admin .stat-card .stat-label { color: var(--um-muted) !important; font-size: .8125rem; font-weight: 600; margin: 0; }
.um-admin .stat-card .stat-value { white-space: nowrap; color: var(--um-text) !important; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }

.um-admin .period-summary { padding: 1.25rem; }
.um-admin .period-card { background: var(--um-surface-2); border-color: var(--um-border); border-radius: var(--um-r); }
.um-admin .period-label { font-weight: 700; color: var(--um-muted); }
.um-admin .period-orders, .um-admin .sales-chart-total { color: var(--um-accent) !important; }
.um-admin .period-revenue { font-weight: 800; }
.um-admin .period-bar-track { background: #EEF0F3; border: 0; height: 6px; }
.um-admin .period-bar-fill, .um-admin .blast-bar-fill { background: var(--um-accent) !important; }
.um-admin .sales-chart-sub { color: var(--um-muted); font-weight: 700; }

/* Orders toolbar (search + status filter) */
.um-toolbar { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; justify-content: space-between; margin: 0 0 .75rem; }
.um-toolbar-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; color: var(--um-text); }
.um-toolbar-title svg { width: 18px; height: 18px; color: var(--um-accent); }
.um-toolbar-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1 1 auto; justify-content: flex-end; }
.um-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.um-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--um-subtle); pointer-events: none; }
.um-search .form-input { padding-left: 2.1rem !important; }
.um-toolbar .form-select { width: auto; min-width: 150px; }
.um-toolbar-count { font-size: .75rem; font-weight: 600; color: var(--um-muted); white-space: nowrap; }
@media (max-width: 640px) { .um-search { max-width: none; flex-basis: 100%; } .um-toolbar .form-select, .um-toolbar .btn-outline { flex: 1 1 0; } }
.um-section-gap { margin-top: 1.5rem; }

/* Products grid */
.um-admin .prod-card { padding: 1.25rem; border-radius: var(--um-r-lg); }
.um-admin .prod-card.inactive { filter: none; opacity: 1; background: var(--um-surface-2); }
.um-admin .prod-card.inactive .prod-title { color: var(--um-muted); }
.um-admin .prod-id { background: var(--um-neutral-soft); border-color: var(--um-border); color: var(--um-muted); border-radius: 6px; }
.um-admin .btn-prod { min-height: 36px; border-radius: var(--um-r-sm); font-size: .75rem; font-weight: 600; border-color: var(--um-border); color: var(--um-text-2); }
.um-admin .btn-prod:hover { border-color: var(--um-accent-border); color: var(--um-accent); background: var(--um-accent-soft); }

/* Settings sub-navigation */
.um-admin .settings-subnav { border-radius: var(--um-r-lg); border-color: var(--um-border); padding: .375rem; gap: .25rem; top: 4.5rem; }
.um-admin .settings-subnav-btn { min-height: 36px; border-radius: var(--um-r-sm); font-weight: 600; font-size: .8125rem; color: var(--um-text-2); }
.um-admin .settings-subnav-btn.active { background: var(--um-accent-soft) !important; color: var(--um-accent) !important; border-color: transparent !important; font-weight: 700; }

/* Blast / media helpers */
.um-admin .blast-summary, .um-admin .blast-progress, .um-admin .media-res-box { border-radius: var(--um-r); }
.um-admin .blast-token { border-radius: 6px; }

@media (max-width: 768px) {
  .um-admin .top-header { padding-left: 1rem; padding-right: 1rem; }
  .um-admin .settings-subnav { top: 4rem; }
}

/* ==========================================================================
   Member area
   ========================================================================== */
.um-member .dashboard-body { background: var(--um-bg); }
.um-member .stat-grid-4 { gap: 1rem; }
.um-member .stat-box { background: var(--um-surface); border: 1px solid var(--um-border); border-radius: var(--um-r-lg); box-shadow: var(--um-shadow-sm); text-align: left; padding: 1rem 1.125rem; }
.um-member .stat-box-header { background: none !important; color: var(--um-muted) !important; padding: 0; font-size: .8125rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.um-member .stat-box-header::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--um-accent); }
.um-member .stat-box-header.bg-orange::before { background: #F59E0B; }
.um-member .stat-box-header.bg-green::before { background: #10B981; }
.um-member .stat-box-header.bg-darkblue::before { background: var(--um-accent); }
.um-member .stat-box-header.bg-lightgreen::before { background: #059669; }
.um-member .stat-box-body { padding: .375rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--um-text); }
.um-member :is(.katalog-card, .card, .upgrade-card, .leaderboard-card, .aff-link-box) { border-radius: var(--um-r-lg); border-color: var(--um-border); box-shadow: var(--um-shadow-sm); }
.um-member .katalog-card:hover { box-shadow: var(--um-shadow); transform: translateY(-2px); }
.um-member .btn-main { min-height: 40px; border-radius: var(--um-r-sm); text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.um-member .btn-main.primary { background: var(--um-accent) !important; }
.um-member .section-title { font-weight: 800; letter-spacing: -.01em; color: var(--um-text); }
.um-member .auth-card { border-radius: 18px; border-color: var(--um-border); box-shadow: var(--um-shadow-lg); }
.um-member .auth-input-field { min-height: 46px; border-radius: var(--um-r); }
.um-member .auth-input-field:focus { border-color: var(--um-accent) !important; box-shadow: 0 0 0 3px var(--um-accent-ring) !important; }
.um-member .auth-btn { min-height: 46px; border-radius: var(--um-r); text-transform: none; letter-spacing: 0; }
.um-member .dash-footer { color: var(--um-subtle); }
@media (max-width: 640px) { .um-member .stat-box-body { font-size: 1.25rem; } }

/* ==========================================================================
   Checkout (customer facing — keeps store theme colour)
   ========================================================================== */
.um-checkout { background: var(--um-bg) !important; font-family: var(--um-font); }
.um-checkout .main-card { border-radius: 18px; border-color: var(--um-border); box-shadow: var(--um-shadow); }
.um-checkout .card-header { padding: 1rem; }
.um-checkout .box { background: var(--um-surface-2); border-color: var(--um-border); border-radius: var(--um-r); }
.um-checkout .form-input { min-height: 46px; border-radius: var(--um-r); border-color: var(--um-border-strong); }
.um-checkout .form-input:focus { border-color: var(--um-accent) !important; box-shadow: 0 0 0 3px var(--um-accent-ring) !important; outline: none; }
.um-checkout .pay-card label { border-radius: var(--um-r); }
.um-checkout .btn-submit { min-height: 50px; border-radius: var(--um-r); text-transform: none; letter-spacing: 0; font-size: .9375rem; }
.um-checkout .btn-apply { border-radius: var(--um-r-sm); }

/* ==========================================================================
   Public catalogue & content pages — accent only (store keeps its theme)
   ========================================================================== */
.um-public .btn-masuk:focus-visible, .um-public .btn-beli:focus-visible { outline: 2px solid var(--um-accent); outline-offset: 2px; }

/* ---------- Additions: chips, danger outline, fixes ---------- */
.um-chip { display: inline-flex; align-items: center; min-height: 32px; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--um-border-strong); background: var(--um-surface); color: var(--um-text-2); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.um-chip:hover { border-color: var(--um-subtle); color: var(--um-text); }
.um-chip.active { background: var(--um-text); border-color: var(--um-text); color: #fff; }
.um-shell .btn-outline.um-danger-outline { color: var(--um-danger); border-color: var(--um-danger-border); background: var(--um-danger-soft); }
.um-shell .btn-outline.um-danger-outline:hover { border-color: var(--um-danger); }
.um-admin .prod-price { white-space: nowrap; }
.um-admin .prod-header { gap: .75rem; }

/* Member header: the original negative margins pushed the bar off-canvas because
   .main-wrapper has no padding; keep it flush instead. */
.um-member .top-header { margin: 0 !important; padding: .75rem 1.5rem !important; }
.um-member .nav-category { padding: 0; }
.um-member .header-greeting-sub { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--um-muted); }
@media (max-width: 768px) { .um-member .top-header { padding: .625rem 1rem !important; } }
.um-shell .td-mono { white-space: nowrap; }
@media (max-width: 639px) {
  .um-admin .stat-grid.um-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .um-admin .stat-grid.um-3 > :first-child { grid-column: 1 / -1; }
  .um-admin .stat-grid.um-3 > .stat-card { grid-template-columns: 1fr; padding: .875rem 1rem; }
  .um-admin .stat-grid.um-3 > :not(:first-child) .um-stat-icon { display: none; }
  .um-admin .stat-card .stat-value { font-size: 1.25rem; }
  .um-member .data-table td[colspan] { text-align: left !important; }
}
@media (max-width: 639px) { .um-admin .stat-grid.um-3 > .stat-card.solid-blue:first-child { grid-template-columns: auto 1fr; } }