/* ============================================================
   Jurnal Trading — Design System
   Refined dark fintech: deep slate canvas, dark-blue accent,
   layered surfaces, tabular numerics, subtle motion.
   ============================================================ */

/* ----------  0. SELF-HOSTED FONTS  ----------
   Single source of truth for the app shell + auth pages. Both AppLayout and
   BareLayout load this stylesheet, so declaring @font-face here avoids the
   drift risk of duplicating it per layout. The woff2 files live in
   /public/fonts and are precached by the service worker (offline-ready).
   (The standalone landing page uses its own landing.css with an extra
   "Inter Fallback" face and is intentionally separate.) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* ----------  1. DESIGN TOKENS  ---------- */
:root {
  /* Surface layers */
  --bg-app:        #0a0d14;
  --bg-sidebar:    #0c1019;
  --bg-card:       #11151f;
  --bg-card-2:     #141927;
  --bg-elevated:   #1a1f2c;
  --bg-input:      #0e131c;
  --bg-input-hover:#131927;
  --bg-row-hover:  rgba(255, 255, 255, 0.025);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default:rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-primary:   #e7eaf3;
  --text-secondary: #aab1c4;
  --text-tertiary:  #777e92;
  --text-muted:     #555c6e;

  /* Accent — professional dark blue */
  --accent:           #2563eb; /* blue-600 */
  --accent-hover:     #3b82f6; /* blue-500 */
  --accent-active:    #1d4ed8; /* blue-700 */
  --accent-deep:      #1e3a8a; /* blue-900 */
  --accent-soft:      rgba(37, 99, 235, 0.12);
  --accent-soft-2:    rgba(37, 99, 235, 0.20);
  --accent-ring:      rgba(37, 99, 235, 0.35);
  --accent-glow:      rgba(37, 99, 235, 0.28);

  /* Semantic */
  --success:        #34d399;
  --success-strong: #4ade80;
  --success-soft:   rgba(52, 211, 153, 0.12);
  --success-border: rgba(52, 211, 153, 0.28);

  --danger:         #f87171;
  --danger-strong:  #fb7185;
  --danger-soft:    rgba(248, 113, 113, 0.12);
  --danger-border:  rgba(248, 113, 113, 0.28);

  --warning:        #fbbf24;
  --warning-soft:   rgba(251, 191, 36, 0.12);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.875rem;    /* 14 */
  --fs-md:   0.9375rem;   /* 15 */
  --fs-lg:   1rem;        /* 16 */
  --fs-xl:   1.125rem;    /* 18 */
  --fs-2xl:  1.375rem;    /* 22 */
  --fs-3xl:  1.75rem;     /* 28 */
  --fs-4xl:  2.25rem;     /* 36 */

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 999px;

  /* Shadows — subtle layered for dark mode */
  --sh-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md:    0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.18);
  --sh-lg:    0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.20);
  --sh-xl:    0 24px 60px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.25);
  --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --sh-glow:  0 0 0 1px var(--accent-soft), 0 8px 28px var(--accent-glow);

  /* Easing & transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms var(--ease-out);
  --t-base: 180ms var(--ease-out);
  --t-slow: 280ms var(--ease-out);

  /* Layout */
  --sidebar-w: 248px;

  /* Legacy aliases for any inline `var(--x)` left in HTML */
  --bg:       var(--bg-app);
  --panel:    var(--bg-card);
  --panel-2:  var(--bg-input);
  --border:   var(--border-default);
  --text:     var(--text-primary);
  --muted:    var(--text-tertiary);
  --accent-2: var(--accent);
}

/* ----------  2. RESET & BASE  ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg-app);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(37, 99, 235, 0.08), transparent 60%),
    radial-gradient(900px  500px at -10% 100%, rgba(30, 58, 138, 0.06), transparent 55%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  overflow: hidden;
}

::selection {
  background: var(--accent-soft-2);
  color: var(--text-primary);
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.03em; font-weight: 600; }
h2 { font-size: var(--fs-xl);  letter-spacing: -0.02em; }
h3 { font-size: var(--fs-lg); }

p { margin: 0; color: var(--text-secondary); }

a { color: inherit; text-decoration: none; }

img, svg { display: block; }
/* The rule above overrides the UA `[hidden]{display:none}` for SVGs (author
   styles beat UA styles at equal specificity), which made the `hidden` attr a
   no-op — e.g. both eye icons in the password toggle showed at once. Re-assert
   it with a more specific selector so toggling `svg[hidden]` works everywhere. */
svg[hidden] { display: none; }

/* Tabular numerics utility */
.num,
td.num,
input[type='number'] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ----------  3. SCROLLBAR  ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
  background-clip: padding-box;
}

/* ----------  4. FOCUS  ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
button:focus-visible,
a:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 3px;
}

/* ============================================================
   APP SHELL — sidebar + content
   ============================================================ */
.layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}

/* ----------  5. SIDEBAR  ---------- */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  margin-bottom: var(--sp-5);
}
.brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: transparent;
  color: #fff;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: 0 6px 16px var(--accent-glow);
}
.brand__mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand__mark svg { width: 18px; height: 18px; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.1;
}
.brand__sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  letter-spacing: 0;
  margin-top: 2px;
  font-weight: 500;
  line-height: 1.3;
}
.brand__sub em {
  font-style: italic;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Sidebar CTA — primary call-to-action button (Add Trade), placed
   right below the brand and above the nav. Full-width, prominent,
   easy to reach on every page. */
.sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 12px var(--sp-3);
  margin-bottom: var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 8px 20px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition:
    background-color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
.sidebar__cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.sidebar__cta:hover {
  background: var(--accent-hover);
  box-shadow:
    0 10px 24px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sidebar__cta:active {
  background: var(--accent-active);
  transform: translateY(1px);
}
.sidebar__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-section--spaced {
  margin-top: var(--sp-5);
}
.nav-label {
  padding: var(--sp-2) var(--sp-3) 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-weight: 500;
  position: relative;
  transition: color var(--t-fast), background-color var(--t-fast);
  user-select: none;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.nav-link.active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
  transition: color var(--t-fast);
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon { color: var(--accent); }
/* Instrument(s) toggled off in Settings — overrides display:flex above */
.nav-link[hidden],
.nav-section[hidden] { display: none; }

.sidebar__bottom {
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* Divider line between the Settings button and the Logout button */
.sidebar__divider {
  height: 0;
  margin: var(--sp-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--t-fast);
}
.btn-logout svg { width: 16px; height: 16px; }
.btn-logout:hover {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-strong);
}

/* Settings button — sits above the divider, neutral hover */
.btn-settings {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--t-fast);
}
.btn-settings svg { width: 16px; height: 16px; }
.btn-settings:hover {
  border-color: var(--border-strong);
  background: var(--bg-row-hover);
  color: var(--text-primary);
}

/* ----------  6. CONTENT  ---------- */
.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-6) var(--sp-8);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  height: 100dvh;
}

.page-header { margin-bottom: var(--sp-5); }
.page-header h1 { margin: 0 0 4px; }
.page-header .subtitle {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}

/* Page header variant with a trailing rate badge on the right */
.page-header--with-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-header--with-rate .page-header__intro { min-width: 0; }

/* Page header variant with action cluster (e.g., filter button) on the right */
.page-header--with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-header--with-actions .page-header__intro { min-width: 0; }
.page-header--with-actions .page-header__actions { margin-left: auto; }

/* Trailing actions (button cluster) on the right of the page header */
.page-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
.page-header__actions .btn { padding: 9px 16px; }
.page-header__actions .btn svg { width: 16px; height: 16px; }

/* USD/IDR rate pill — discreet, monospace value */
.rate-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm), var(--sh-inner);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* The class above sets display:inline-flex, which outranks the UA
   [hidden]{display:none} rule. Re-assert it so toggling the "Show currency
   rate" preference (which sets the hidden attribute) actually hides the pill. */
.rate-badge[hidden] { display: none; }
.rate-badge__label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.rate-badge__value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  margin-left: var(--sp-3);
}
.account-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), var(--sh-sm);
}
[data-theme="light"] .account-avatar {
  color: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  background: #2563eb;
}

/* ----------  Avatar dropdown menu  ---------- */
.avatar-menu { position: relative; display: inline-flex; flex: 0 0 auto; }

/* ----------  Nameplate (sits to the left of the avatar circle).
   Stacks: display name on top, a 1px divider, then plan status (Basic/Pro).
   Hidden on mobile because the page-header avatar itself is hidden there. */
.user-id-card {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin-left: var(--sp-3);
  padding: 2px 0;
  min-width: 0;
  line-height: 1.15;
  flex: 0 0 auto;
}
.user-id-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  text-align: right;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-default);
}
.user-id-card__plan {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.user-id-card__plan[data-plan="pro"] {
  color: var(--accent);
}
[data-theme="light"] .user-id-card__name { color: #0f172a; }
[data-theme="light"] .user-id-card__plan { color: #475569; }
[data-theme="light"] .user-id-card__plan[data-plan="pro"] { color: #1d4ed8; }

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 900;
  min-width: 260px;
  padding: var(--sp-2) 0;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), var(--sh-sm);
  animation: ddFade 120ms var(--ease-out);
}
.avatar-dropdown[hidden] { display: none; }

.avatar-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.avatar-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.avatar-dropdown__item:hover .avatar-dropdown__icon {
  color: var(--accent);
  opacity: 1;
}
.avatar-dropdown__item--danger {
  color: var(--danger);
}
.avatar-dropdown__item--danger:hover {
  background: var(--danger-soft);
}
.avatar-dropdown__item--danger:hover .avatar-dropdown__icon {
  color: var(--danger);
  opacity: 1;
}

.avatar-dropdown__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.avatar-dropdown__divider {
  height: 1px;
  margin: var(--sp-2) var(--sp-3);
  background: var(--border-default);
}

/* Theme toggle rendered as a sliding switch with both icons visible:
   moon (dark) on the left, sun (light) on the right. The thumb slides to
   the active side; no text label. */
.avatar-dropdown__item--theme {
  cursor: pointer;
  padding-right: var(--sp-3);
}
.avatar-dropdown__item--theme:hover {
  background: none;
}
.avatar-dropdown__item--theme .theme-switch {
  margin-left: auto;
  flex: 0 0 auto;
}
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 64px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--border-default);
}
.theme-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-fast);
}
.theme-switch__icon {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}
/* Dark mode (aria-checked="false"): thumb on the left, moon active. */
.avatar-dropdown__item--theme .theme-switch__icon--dark { color: #fff; }
/* Light mode (aria-checked="true"): thumb slides right, sun active. */
.avatar-dropdown__item--theme[aria-checked="true"] .theme-switch__thumb {
  transform: translateX(36px);
}
.avatar-dropdown__item--theme[aria-checked="true"] .theme-switch__icon--dark { color: var(--text-secondary); }
.avatar-dropdown__item--theme[aria-checked="true"] .theme-switch__icon--light { color: #fff; }
[data-theme="light"] .theme-switch {
  background: rgba(15, 23, 42, 0.06);
}

@keyframes ddFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="light"] .avatar-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="light"] .avatar-dropdown__item {
  color: #1e293b;
}
[data-theme="light"] .avatar-dropdown__item:hover {
  background: rgba(15,23,42,0.05);
}
[data-theme="light"] .avatar-dropdown__divider {
  background: rgba(0,0,0,0.08);
}

.section-spacer { margin-bottom: var(--sp-5); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ----------  7. CARD (generic surface)  ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-sm), var(--sh-inner);
  margin-bottom: var(--sp-4);
}
.card:last-child { margin-bottom: 0; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* ----------  8. GRIDS  ---------- */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.grid-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Charts grid: 2 cols on desktop, 1 col on mobile */
.grid-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Full-width chart row (e.g. equity curve di paling bawah) */
.chart-full {
  margin-bottom: var(--sp-4);
}
.chart-full .chart-card { width: 100%; }

/* Chart card surface */
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  box-shadow: var(--sh-sm), var(--sh-inner);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chart-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.chart-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.chart-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
/* Chart body height (responsive overrides below) */
.chart-card__body {
  position: relative;
  width: 100%;
  height: 200px;
}
.chart-card__body--tall {
  height: 320px;
}
.chart-card__body canvas {
  width: 100% !important;
  height: 100% !important;
}
.chart-card__empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  padding: var(--sp-4);
}
.chart-card.is-empty .chart-card__empty { display: flex; }
.chart-card.is-empty canvas { opacity: 0; }

/* ----------  9. STAT CARD  ---------- */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-sm), var(--sh-inner);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-default);
  box-shadow: var(--sh-md), var(--sh-inner);
}
.stat-card .label {
  display: block;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.stat-card .value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: 1.1;
}
.stat-card .value.profit { color: var(--success-strong); }
.stat-card .value.loss   { color: var(--danger-strong); }

/* Metric label + info button. The former inline ".micro" description is now the
   tooltip body shown on hover (desktop) or tap (mobile) of the small round "i". */
.label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-2);
}
/* Inside the row the label's own bottom margin would offset its text from the
   "i" button; move that spacing to the row so both align on the same baseline. */
.label-row .label { margin-bottom: 0; }
.metric-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.metric-info__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.metric-info:hover .metric-info__dot,
.metric-info:focus-visible .metric-info__dot,
.metric-info[aria-expanded="true"] .metric-info__dot {
  color: var(--accent);
  border-color: var(--accent-ring);
}
.metric-info:focus { outline: none; }

/* Tooltip bubble (former .micro text). Hidden by default; revealed on hover or
   when JS toggles aria-expanded on touch devices. Left-anchored to the dot so it
   opens rightward and never clips off the left/viewport edge. */
.metric-info .micro {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
  z-index: 30;
  width: max-content;
  max-width: min(220px, calc(100vw - 32px));
  padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  box-shadow: var(--sh-md);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.metric-info .micro::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 8px;
  border: 5px solid transparent;
  border-top-color: var(--bg-elevated);
}
@media (hover: hover) and (pointer: fine) {
  .metric-info:hover .micro,
  .metric-info:focus-visible .micro {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.metric-info[aria-expanded="true"] .micro {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ----------  10. CATEGORY CARD  ---------- */
.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm), var(--sh-inner);
  transition: transform var(--t-base), border-color var(--t-base);
}
.category-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-default);
}
.category-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.category-card__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.category-card__icon svg { width: 18px; height: 18px; }
.category-card.cat-crypto .category-card__icon { background: rgba(247, 147, 26, 0.12); color: #f7931a; }
.category-card.cat-forex  .category-card__icon { background: rgba(52, 211, 153, 0.12); color: var(--success); }
.category-card.cat-saham  .category-card__icon { background: rgba(37, 99, 235, 0.14); color: var(--accent); }
.category-card.cat-us_saham .category-card__icon { background: rgba(239, 68, 68, 0.14); color: #ef4444; }

.category-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.category-card dl {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-subtle);
  min-height: 32px;
}
.dl-row:last-child { border-bottom: 0; }
.dl-row dt {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dl-row dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* PL "value" inside category card → pill style.
   JS overwrites className on these spans to exactly
   'value profit' / 'value loss', so we scope by parent. */
.category-card .value {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.4;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.category-card .value.profit {
  background: var(--success-soft);
  color: var(--success-strong);
  box-shadow: inset 0 0 0 1px var(--success-border);
}
.category-card .value.loss {
  background: var(--danger-soft);
  color: var(--danger-strong);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}

/* ----------  11. TABLES  ---------- */
.table-wrapper {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-2));
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
thead th {
  text-align: left;
  padding: 10px var(--sp-4);
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  background: transparent;
}
tbody td {
  padding: 12px var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
tbody tr {
  transition: background-color var(--t-fast);
}
tbody tr:hover { background: var(--bg-row-hover); }
tbody tr:last-child td { border-bottom: 0; }

/* Direction badges
   Used as <td class="badge-buy/sell"> (legacy, color only)
   and as <span class="badge badge-buy/sell"> (new, pill) */
.badge-buy  { color: var(--success-strong); font-weight: 600; }
.badge-sell { color: var(--danger-strong);  font-weight: 600; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.badge.badge-buy {
  background: var(--success-soft);
  color: var(--success-strong);
  box-shadow: inset 0 0 0 1px var(--success-border);
}
.badge.badge-sell {
  background: var(--danger-soft);
  color: var(--danger-strong);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}

/* P/L color (used on td or span) */
.profit { color: var(--success-strong); font-weight: 600; }
.loss   { color: var(--danger-strong);  font-weight: 600; }

/* PL pill (used as <span class="pl-pill profit/loss">) */
.pl-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.pl-pill.profit {
  background: var(--success-soft);
  color: var(--success-strong);
  box-shadow: inset 0 0 0 1px var(--success-border);
}
.pl-pill.loss {
  background: var(--danger-soft);
  color: var(--danger-strong);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}

/* Status pill (used as <span class="status-pill open|closed">) */
.status-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: capitalize;
}
.status-pill.open {
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.30);
}
.status-pill.closed {
  background: var(--success-soft);
  color: var(--success-strong);
  box-shadow: inset 0 0 0 1px var(--success-border);
}

/* Notes column / muted cell content */
.cell-muted {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-cap { text-transform: capitalize; }

/* Empty state row */
.empty-row td {
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
  border-bottom: 0;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 380px;
  margin: 0 auto;
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-1);
}
.empty-state__icon svg { width: 28px; height: 28px; }
.empty-state__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.empty-state__desc {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.55;
}

/* ----------  12. FORMS  ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.form-field { display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.req-mark {
  color: var(--danger);
  margin-left: 2px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-base);
  outline: none;
  transition:
    border-color var(--t-fast),
    box-shadow   var(--t-fast),
    background-color var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder,
textarea::placeholder { color: var(--text-muted); }
input:hover,
select:hover,
textarea:hover { border-color: var(--border-strong); }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: var(--bg-input-hover);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input[type='number'] { font-variant-numeric: tabular-nums; }

textarea {
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
  line-height: 1.55;
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777e92' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

input[type='date'] {
  color-scheme: dark;
}
input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(0.85);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
input[type='date']:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.form-actions {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.form-msg {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.form-msg--success { color: var(--success, #16a34a); }
.form-msg--error   { color: var(--danger,  #dc2626); }
.form-msg--info    { color: var(--text-secondary); }

/* Account profile readout (Account Settings page) */
.account-info {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
}
.account-info__row { display: contents; }
.account-info dt {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  align-self: center;
}
.account-info dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  align-self: center;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .account-info { grid-template-columns: 1fr; gap: 0; }
  .account-info__row { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
  .account-info__row:last-child { border-bottom: none; }
  .account-info dt { margin-bottom: 2px; }
}

/* ===== Premium Upgrade CTA — shared across avatar dropdown & sidebar.
   Visual is a gold gradient card with sheen-sweep, "PRO" pill on the right,
   and a crown icon. Two placement contexts override only sizing.            */

/* The `display:flex` below is an author rule, so it overrides the UA
   `[hidden]{display:none}`. Re-assert it so `el.hidden = true` (applyPlanVisibility
   for Pro accounts) actually hides the sidebar/dropdown Upgrade CTAs. */
.btn-upgrade[hidden],
.avatar-dropdown__item--upgrade[hidden] { display: none; }

.btn-upgrade,
.avatar-dropdown__item--upgrade {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #1a1205;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  border: 1px solid rgba(180, 83, 9, 0.35);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 22px -10px rgba(245, 158, 11, 0.55),
    0 0 0 1px rgba(255, 230, 170, 0.35) inset,
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  transition:
    transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    background 200ms var(--ease-out);
}

/* Dropdown context: width:auto cancels the base item's width:100% so the
   horizontal margins keep the card inside the dropdown's edge. */
.avatar-dropdown__item--upgrade {
  width: auto;
  margin: 4px 10px 10px;
  padding: 14px 14px 14px 16px;
}

/* Sidebar context: full inner width, slightly tighter padding, with breathing
   room above the divider/Preferences button. */
.btn-upgrade {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: var(--sp-3);
}

/* Diagonal sheen sweep on hover */
.btn-upgrade::before,
.avatar-dropdown__item--upgrade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}

/* "PRO" badge anchored to the right */
.btn-upgrade::after,
.avatar-dropdown__item--upgrade::after {
  content: 'PRO';
  margin-left: auto;
  padding: 3px 9px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fbbf24;
  background: #1a1205;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Crown icon — sized larger than regular nav icons for emphasis */
.btn-upgrade__icon,
.avatar-dropdown__item--upgrade .avatar-dropdown__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #1a1205;
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 230, 170, 0.6));
}

.btn-upgrade:hover,
.avatar-dropdown__item--upgrade:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 45%, #f59e0b 100%);
  color: #1a1205;
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px -10px rgba(245, 158, 11, 0.7),
    0 0 0 1px rgba(255, 230, 170, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
}
.btn-upgrade:hover::before,
.avatar-dropdown__item--upgrade:hover::before {
  transform: translateX(120%);
}
.btn-upgrade:hover .btn-upgrade__icon,
.avatar-dropdown__item--upgrade:hover .avatar-dropdown__icon {
  color: #1a1205;
  opacity: 1;
}
.btn-upgrade:focus-visible,
.avatar-dropdown__item--upgrade:focus-visible {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
}

/* Light theme keeps the same gold palette with a slightly softer glow */
[data-theme="light"] .btn-upgrade,
[data-theme="light"] .avatar-dropdown__item--upgrade {
  color: #1a1205;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  border-color: rgba(180, 83, 9, 0.45);
  box-shadow:
    0 8px 18px -10px rgba(245, 158, 11, 0.45),
    0 0 0 1px rgba(255, 230, 170, 0.45) inset,
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
}
[data-theme="light"] .btn-upgrade .btn-upgrade__icon,
[data-theme="light"] .avatar-dropdown__item--upgrade .avatar-dropdown__icon {
  color: #1a1205;
}
[data-theme="light"] .btn-upgrade:hover,
[data-theme="light"] .avatar-dropdown__item--upgrade:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 45%, #f59e0b 100%);
  color: #1a1205;
  box-shadow:
    0 12px 24px -10px rgba(245, 158, 11, 0.55),
    0 0 0 1px rgba(255, 230, 170, 0.6) inset,
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
[data-theme="light"] .btn-upgrade:hover .btn-upgrade__icon,
[data-theme="light"] .avatar-dropdown__item--upgrade:hover .avatar-dropdown__icon {
  color: #1a1205;
}

/* ----------  13. BUTTONS  ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.005em;
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow:
    0 6px 16px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active:not(:disabled) {
  background: var(--accent-active);
  transform: translateY(1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-block { width: 100%; padding: 12px 16px; }

/* Icon-only buttons (table row actions) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-icon-edit:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(37, 99, 235, 0.30);
}
.btn-icon-del:hover {
  background: var(--danger-soft);
  color: var(--danger-strong);
  border-color: var(--danger-border);
}
.row-actions {
  display: inline-flex;
  gap: 6px;
}

/* ============================================================
   PAGES
   ============================================================ */

/* ----------  14. LOGIN  ---------- */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  position: relative;
  overflow: auto;
  background-color: var(--bg-app);
  background-image:
    radial-gradient(800px 500px at 20% 10%, rgba(37, 99, 235, 0.18), transparent 60%),
    radial-gradient(700px 500px at 80% 90%, rgba(30, 58, 138, 0.10), transparent 55%);
  background-attachment: fixed;
}
.auth-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.30) 100%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background:
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  box-shadow: var(--sh-xl), var(--sh-inner);
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 35%);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.auth-brand .brand__name { font-size: var(--fs-lg); }

.auth-card h1 {
  font-size: var(--fs-2xl);
  margin: 0 0 6px;
}
.auth-card .subtitle {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-6);
}
.auth-card .field { margin-bottom: var(--sp-4); }

.error-msg {
  margin-top: var(--sp-4);
  padding: 10px 14px;
  background: var(--danger-soft);
  color: var(--danger-strong);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: none;
}
/* Positive confirmation reuses the same box but with success colors, so a
   "verification email sent" message doesn't read as a red error. */
.error-msg.error-msg--ok {
  background: var(--success-soft);
  color: var(--success-strong);
  border-color: var(--success-border);
}

/* ============================================================
   14b. SPLIT-SCREEN AUTH (login / register / reset)
   Left: branded showcase (stays dark in both themes).
   Right: form panel (follows the active theme).
   ============================================================ */
.auth-split {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow-y: auto;
}

/* ---- Left: showcase ---- */
.auth-showcase {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-10);
  color: #e7eaf3;
  background:
    linear-gradient(160deg, #0d1525 0%, #0a0d14 58%, #0b1120 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
/* glow + grid backdrop — same visual language as the landing page */
.auth-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 480px at 88% -8%, rgba(37, 99, 235, 0.22), transparent 60%),
    radial-gradient(640px 460px at 6% 22%, rgba(30, 58, 138, 0.16), transparent 55%);
}
.auth-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(800px 600px at 30% 0%, #000, transparent 78%);
          mask-image: radial-gradient(800px 600px at 30% 0%, #000, transparent 78%);
}
.auth-showcase > * { position: relative; z-index: 1; }

/* Invisible placeholder that takes the brand's old slot so the showcase body
   stays vertically centered now that the brand moved to the form panel. */
.auth-showcase__spacer { height: 34px; }

.auth-showcase__body { display: flex; flex-direction: column; gap: var(--sp-6); }
.auth-showcase__head {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0;
  color: #fff;
}
.auth-showcase__head .g {
  background: linear-gradient(110deg, #7eb0ff, #2563eb 70%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* floating KPI cards (illustrative, marked as sample) */
.auth-kpis { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.auth-kpi {
  flex: 1 1 150px;
  background: rgba(17, 21, 31, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.7);
}
.auth-kpi__l {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 700;
  margin-bottom: 6px;
}
.auth-kpi__v {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.auth-kpi__v.up { color: var(--success); }
.auth-kpi__spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 10px; }
.auth-kpi__spark i { width: 5px; border-radius: 2px; background: var(--accent); opacity: 0.85; }
.auth-sample {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}

.auth-points { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.auth-points li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}
.auth-points svg { width: 18px; height: 18px; color: var(--success); flex: 0 0 auto; }

.auth-showcase__foot { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- Right: form panel ---- */
.auth-form-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-6);
  background-color: var(--bg-app);
}
/* Clickable brand pinned to the top-left of the form panel (links to /).
   Sized + positioned to mirror the showcase brand that used to sit on the
   right, so both columns read at the same visual level. */
.auth-form-brand {
  position: absolute;
  top: var(--sp-12);
  left: var(--sp-10);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-primary);
  border-radius: var(--r-md, 10px);
  padding: 4px 6px;
  margin: -4px -6px;
  transition: opacity var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.auth-form-brand:hover { opacity: 0.8; }
.auth-form-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.auth-form-brand img { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.auth-form-brand__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.auth-form-inner { width: 100%; max-width: 380px; }
.auth-form-inner h1 {
  font-size: var(--fs-2xl);
  margin: 0 0 6px;
}
.auth-form-inner .subtitle {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-6);
}
.auth-form-inner .field { margin-bottom: var(--sp-4); }

/* input with leading icon + trailing password toggle.
   NOTE: .field--icon also contains the <label> above the input, so the icons
   must be centered on the INPUT, not on the whole field. The input sits flush
   at the bottom of the container (box-sizing: border-box), and its height is
   fixed by the base input styles: padding 10px*2 + line 1.5*14px + border 1px*2
   = 43px → vertical center is 21.5px up from the field's bottom edge. Anchoring
   from the bottom keeps the icons centered regardless of the label's height. */
.field--icon { position: relative; }
.field--icon .field__icon {
  position: absolute;
  left: 12px;
  top: auto;
  bottom: 21.5px;
  transform: translateY(50%);
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.field--icon input { padding-left: 40px; }
.field--icon input[type='password'],
.field--icon input.has-toggle { padding-right: 42px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: auto;
  bottom: 21.5px;
  transform: translateY(50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.05); }
.pw-toggle svg { width: 18px; height: 18px; }

/* label row with inline link (e.g. Forgot password) */
.field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.auth-link {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent-hover);
  transition: color var(--t-fast);
}
.auth-link:hover { color: var(--accent); text-decoration: underline; }

/* footer line under the form (e.g. Don't have an account?) */
.auth-alt {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.auth-alt a { color: var(--accent-hover); font-weight: 600; }
.auth-alt a:hover { color: var(--accent); text-decoration: underline; }

/* success / status panel shown after submit (register, forgot, reset, verify) */
.auth-success {
  margin-top: var(--sp-2);
  padding: var(--sp-5);
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: var(--r-lg);
}
.auth-success h2 { font-size: var(--fs-lg); margin: 0 0 6px; }
.auth-success p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
.auth-status { text-align: center; }
.auth-status__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
}
.auth-status__icon svg { width: 28px; height: 28px; }
.auth-status__icon--ok { background: var(--success-soft); color: var(--success); }
.auth-status__icon--err { background: var(--danger-soft); color: var(--danger); }
.auth-status__icon--wait { background: var(--accent-soft); color: var(--accent-hover); }

/* Login variant: form on the LEFT, showcase on the RIGHT (UltraTrader-style).
   Scoped to .auth-split--form-left so the other auth pages keep form-right. */
.auth-split--form-left { grid-template-columns: 0.95fr 1.05fr; }
.auth-split--form-left .auth-form-panel { order: 1; }
.auth-split--form-left .auth-showcase {
  order: 2;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* "OR" divider between the form and the social buttons */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-default);
}

/* Social sign-in buttons */
.auth-social { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn-social {
  width: 100%;
  padding: 11px 16px;
  gap: var(--sp-3);
  background: var(--bg-surface, transparent);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  font-weight: 600;
}
.btn-social:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
}
.btn-social svg,
.btn-social img { width: 18px; height: 18px; flex: 0 0 auto; }
[data-theme="light"] .btn-social:hover:not(:disabled) { background: rgba(15, 23, 42, 0.04); }

@media (prefers-reduced-motion: reduce) {
  .auth-kpi { transition: none; }
}

/* Collapse to a single column: hide showcase, focus the form */
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  /* Pull the brand up and let the form start below it instead of being
     vertically centered, so the logo + "MonkFolio" no longer crowd the
     heading (e.g. "Create your account"). */
  .auth-form-panel {
    align-items: start;
    padding-top: calc(var(--sp-12) + var(--sp-12) + var(--sp-6));
  }
  .auth-form-brand {
    top: var(--sp-3);
    left: var(--sp-3);
  }
}

/* ---- Seamless auth navigation (login ⇄ sign up ⇄ reset) ----
   Cross-document View Transitions make moving between the auth pages
   cross-fade in place instead of showing a full white page reload, so
   the switch feels like an in-app state change (UltraTrader-style).
   Only the form column animates; the branded showcase is held static so
   it reads as a persistent panel that the form slides under. Browsers
   without support simply fall back to a normal navigation.

   The `@view-transition { navigation: auto }` opt-in lives in each auth
   page's inline <style> so only those pages animate — the rest of the
   app keeps normal instant navigation. The names below are inert on any
   page that does not opt in (and only match auth elements anyway). */
.auth-showcase { view-transition-name: auth-showcase; }
.auth-form-panel { view-transition-name: auth-form; }

/* Hold the showcase perfectly still (it is identical across pages). */
::view-transition-group(auth-showcase),
::view-transition-image-pair(auth-showcase),
::view-transition-old(auth-showcase),
::view-transition-new(auth-showcase) {
  animation: none;
}

/* Quick, soft cross-fade for the form column. */
::view-transition-old(auth-form),
::view-transition-new(auth-form) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ============================================================
   15. MOBILE TOPBAR (hamburger + brand) — hidden on desktop
   ============================================================ */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 40;
}
.mobile-topbar .brand { margin: 0; padding: 0; flex: 1 1 auto; }
.mobile-topbar .brand__mark { width: 30px; height: 30px; }
.mobile-topbar .brand__mark svg { width: 16px; height: 16px; }
.mobile-topbar .brand__name { font-size: var(--fs-sm); }
.mobile-topbar .brand__sub { font-size: 9.5px; }
.mobile-topbar .account-avatar { width: 46px; height: 46px; font-size: 18px; margin-left: 0; border-width: 2px; }

.btn-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  transition: all var(--t-fast);
}
.btn-hamburger svg { width: 20px; height: 20px; }
.btn-hamburger:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Backdrop shown when mobile sidebar is open */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0;
  transition: opacity var(--t-base);
}
.sidebar-backdrop.is-open {
  display: block;
  opacity: 1;
}

/* ============================================================
   16. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---------- ≤ 1024px : tighter desktop / small laptop ---------- */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .content { padding: var(--sp-5) var(--sp-6); }
  .grid-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .grid-categories { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .grid-charts { grid-template-columns: 1fr; }
}

/* ---------- ≤ 768px : tablet & mobile — sidebar becomes drawer ---------- */
@media (max-width: 768px) {
  body { overflow: auto; }
  .layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Show mobile topbar */
  .mobile-topbar { display: flex; }
  .page-header .account-avatar { display: none !important; }
  .page-header .user-id-card { display: none !important; }

  /* Sidebar slides in from the left as an off-canvas drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 260px;
    min-width: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--t-base);
    border-right: 1px solid var(--border-subtle);
    border-bottom: 0;
    box-shadow: var(--sh-xl);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.is-open { transform: translateX(0); }

  /* Restore highlight bar (was hidden in old breakpoint) */
  .nav-link.active::before { display: block; }

  .content {
    height: auto;
    max-height: none;
    /* Reserve space at the bottom so the floating Add Trade FAB
       never overlaps pagination, legends, or the last row. */
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + 64px);
    overflow: visible;
  }

  /* Headings & spacing */
  h1 { font-size: var(--fs-2xl); }
  .page-header { margin-bottom: var(--sp-4); }
  .page-header--with-rate { gap: var(--sp-3); }
  .page-header--with-actions { gap: var(--sp-3); }
  .rate-badge { height: 30px; padding: 0 10px; }
  .grid-stats,
  .grid-categories,
  .grid-charts { gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-categories { grid-template-columns: 1fr; }

  /* Charts a touch shorter on tablets */
  .chart-card__body { height: 200px; }
  .chart-card__body--tall { height: 260px; }

  /* Cards & forms */
  .card { padding: var(--sp-4); border-radius: var(--r-lg); }
  .stat-card,
  .category-card,
  .chart-card { border-radius: var(--r-lg); }
  .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  /* Touch targets ≥ 40px */
  .btn { min-height: 44px; padding: 10px 16px; }
  .btn-block { padding: 12px 16px; }
  input, select, textarea {
    font-size: var(--fs-md); /* ≥16px equivalent → no iOS zoom on focus */
    padding: 11px 12px;
    min-height: 44px;
  }
  textarea { min-height: 72px; }
  /* Mobile inputs are taller (padding 11px*2 + line 1.5*15px + border 1px*2 =
     46.5px), so re-center the leading icon + password toggle on that height. */
  .field--icon .field__icon,
  .pw-toggle { bottom: 23.25px; }
  .btn-icon { width: 36px; height: 36px; }
  .btn-icon svg { width: 16px; height: 16px; }

  /* Auth card scales */
  .auth-shell { padding: var(--sp-4); }
  .auth-card { padding: var(--sp-6); border-radius: var(--r-xl); }
  .auth-card h1 { font-size: var(--fs-xl); }
}

/* ---------- ≤ 480px : phones — single column everywhere ---------- */
@media (max-width: 480px) {
  .content { padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + 60px); }

  .grid-stats { grid-template-columns: 1fr; }

  .stat-card,
  .category-card { padding: var(--sp-4); }
  .stat-card .value { font-size: var(--fs-xl); }
  .stat-card .label { margin-bottom: 6px; }

  .chart-card { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .chart-card__body { height: 180px; }
  .chart-card__head {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .card { padding: var(--sp-3) var(--sp-4); }
  .card__head { margin-bottom: var(--sp-3); }
  .card__title { font-size: var(--fs-md); }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }

  /* Tables stay scrollable horizontally */
  .table-wrapper {
    margin: 0 calc(-1 * var(--sp-4));
    padding: 0 var(--sp-4);
    -webkit-overflow-scrolling: touch;
  }
  thead th { padding: 9px var(--sp-3); }
  tbody td { padding: 10px var(--sp-3); }
  .cell-muted { max-width: 140px; }

  .sidebar { width: 86vw; max-width: 320px; }

  .mobile-topbar { padding: 8px var(--sp-3); }
  .mobile-topbar .account-avatar { width: 38px; height: 38px; font-size: 15px; }

  .auth-card { padding: var(--sp-5); }
  .auth-card h1 { font-size: var(--fs-lg); }
  .auth-card .subtitle { font-size: var(--fs-xs); margin-bottom: var(--sp-4); }
}

/* ============================================================
   17. DASHBOARD V2 — extra components
   (4-KPI grid · mini stats · Buy/Sell breakdown · single-chart row)
   ============================================================ */

/* Card head: optional subtitle next to title */
.card__head .card__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* 4 KPI cards in one row on desktop */
.grid-stats--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Mini stats (Best / Worst / Avg Win / Avg Loss) ---------- */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-sm), var(--sh-inner);
}
.mini-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 var(--sp-3);
  border-left: 1px solid var(--border-subtle);
}
.mini-stat:first-child { border-left: 0; padding-left: 0; }
.mini-stat__label {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.mini-stat__value {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-stat__value.profit { color: var(--success-strong); }
.mini-stat__value.loss   { color: var(--danger-strong); }

/* ---------- Buy / Sell breakdown ---------- */
.ls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.ls-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.ls-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ls-row__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ls-row__count > span { color: var(--text-primary); font-weight: 600; }

.ls-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.ls-tag--long  { background: var(--success-soft); color: var(--success-strong); box-shadow: inset 0 0 0 1px var(--success-border); }
.ls-tag--short { background: var(--danger-soft);  color: var(--danger-strong);  box-shadow: inset 0 0 0 1px var(--danger-border);  }

.ls-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ls-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-out);
}
.ls-bar__fill--long  { background: linear-gradient(90deg, #34d399, #10b981); }
.ls-bar__fill--short { background: linear-gradient(90deg, #f87171, #ef4444); }

.ls-row__metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: 2px;
}
.ls-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ls-metric__label {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.ls-metric__val {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* The .value pill inside ls-metric reuses category-card pill styling */
.ls-metric .value {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  width: fit-content;
}
.ls-metric .value.profit {
  background: var(--success-soft);
  color: var(--success-strong);
  box-shadow: inset 0 0 0 1px var(--success-border);
}
.ls-metric .value.loss {
  background: var(--danger-soft);
  color: var(--danger-strong);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}

/* ---------- Responsive — Dashboard V2 ---------- */
@media (max-width: 1024px) {
  /* On smaller laptops, 4 KPIs become 2x2 to keep numbers readable */
  .grid-stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-stats { padding: var(--sp-3) var(--sp-4); }
}

@media (max-width: 768px) {
  /* Tablet: keep 2x2 KPIs (already 2 cols via base mobile rule) */
  .grid-stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Mini stats become 2x2 — borders rebuilt for the wrap */
  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4);
  }
  .mini-stat { padding: 0; border-left: 0; }
  .mini-stat:nth-child(2n) {
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--sp-4);
  }

  /* Buy vs Sell stacks vertically on tablet+phone */
  .ls-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ls-row { padding: var(--sp-3); }
}

@media (max-width: 480px) {
  /* Phones: 4 KPIs stay 2x2 (already enforced above) but with tighter type */
  .grid-stats--four { gap: var(--sp-3); }
  .grid-stats--four .stat-card .value { font-size: var(--fs-xl); }

  /* Mini stats — slightly tighter */
  .mini-stats { padding: var(--sp-3); gap: var(--sp-2) var(--sp-3); }
  .mini-stat__value { font-size: var(--fs-md); }
  .mini-stat:nth-child(2n) { padding-left: var(--sp-3); }

  /* Buy vs Sell — denser */
  .ls-row { padding: var(--sp-3); gap: 6px; }
  .ls-row__metrics { gap: var(--sp-2); }
}

/* ============================================================
   17b. DASHBOARD (desktop) — normal scrolling layout.
   Chart tetap berukuran terkontrol (tinggi default dari
   .chart-card__body) dan TIDAK melar memenuhi tinggi layar.
   Layout mengalir normal + scroll, rapi di semua lebar desktop.
   .dash-side hanya wrapper transparan (display:contents) sehingga
   urutan mini-stats → Buy/Sell → kategori mengikuti normal flow
   persis seperti versi sebelumnya.
   ============================================================ */
.dash-side { display: contents; }

/* Batasi tinggi dua chart atas (Distribusi Instrumen & Monthly P/L)
   di desktop supaya proporsinya enak dan konsisten di berbagai lebar. */
@media (min-width: 1025px) {
  .content--dashboard .grid-charts .chart-card__body { height: 220px; }
  /* Equity curve dashboard sedikit dirapatkan supaya fit di semua lebar desktop */
  .content--dashboard .chart-full .chart-card__body--tall { height: 260px; }
}

/* ============================================================
   18. INSTRUMENT CELL — logo + name (Trade History table)
   ============================================================ */
.instrument-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.instrument-cell__logo {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.instrument-cell__logo svg {
  width: 14px;
  height: 14px;
  display: block;
}
.instrument-cell__name {
  font-weight: 500;
  color: var(--text-primary);
  text-transform: capitalize;
  letter-spacing: 0.005em;
}
/* Per-instrument tone, mengikuti palette di category card */
.instrument-cell--crypto .instrument-cell__logo {
  background: rgba(247, 147, 26, 0.12);
  color: #f7931a;
}
.instrument-cell--forex .instrument-cell__logo {
  background: rgba(52, 211, 153, 0.12);
  color: var(--success);
}
.instrument-cell--saham .instrument-cell__logo {
  background: rgba(37, 99, 235, 0.14);
  color: var(--accent);
}
.instrument-cell--us_saham .instrument-cell__logo {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

/* ============================================================
   19. PAGINATION (Trade History)
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.pagination__info {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__btn,
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast);
}
.pagination__btn { padding: 0 8px; }
.pagination__btn svg { width: 14px; height: 14px; }

.pagination__btn:hover:not(:disabled),
.pagination__page:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pagination__page.is-active {
  background: var(--accent-soft);
  border-color: rgba(37, 99, 235, 0.30);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
  cursor: default;
}
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 32px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  user-select: none;
}

@media (max-width: 480px) {
  .pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
   .pagination__info { text-align: center; }
   .pagination__nav { justify-content: center; }
   .pagination__btn,
   .pagination__page { min-width: 36px; height: 36px; }
}

/* Instrumen di tabel trade: tampilkan ikon saja (teks disembunyikan) di
   SEMUA ukuran ponsel, bukan cuma <=480px. iPhone besar (Plus/Pro Max)
   punya lebar viewport CSS di atas 480px, sehingga dengan breakpoint
   lama teksnya tetap muncul dan bikin tabel overflow / perlu scroll
   horizontal. Tablet ke atas (>=601px) tetap menampilkan teks. */
@media (max-width: 600px) {
  .instrument-cell__name { display: none; }
  .table-trades .instrument-cell { gap: 0; }
}

/* ============================================================
   19b. EQUITY + TRADES SIDE-BY-SIDE
   Equity curve di kiri, daftar trade (max 5) + pagination di kanan.
   Stack jadi 1 kolom di tablet ke bawah.
   ============================================================ */
.grid-equity-trades {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.grid-equity-trades > .chart-card,
.grid-equity-trades > .card--trades {
  margin: 0;
  /* Critical: cegah grid track membesar mengikuti intrinsic content
     (tabel dengan white-space: nowrap). Tanpa ini, mobile akan
     horizontal-scroll karena tabel "mendorong" track lebih lebar
     dari viewport. */
  min-width: 0;
}

/* Card khusus daftar trade — pagination menempel di bawah,
   tabel mengisi sisa ruang biar tinggi sejajar dengan equity card. */
.card--trades {
  display: flex;
  flex-direction: column;
}
.card--trades .table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}

/* Pagination compact: tanpa info text, pas untuk footer kecil
   di bawah daftar trade per-instrumen. Wrap ke baris baru kalau
   tombolnya kebanyakan untuk viewport sempit. */
.pagination--compact {
  justify-content: center;
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border-subtle);
}
.pagination--compact .pagination__nav {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 6px;
}
.pagination--compact .pagination__pages {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
}

/* Stretch behavior hanya di desktop (saat grid benar-benar 2 kolom).
   Di tablet/mobile grid sudah stack jadi 1 kolom, jadi equity card
   pakai tinggi default chart-card__body--tall biar konsisten. */
@media (min-width: 1025px) {
  .grid-equity-trades > .chart-card,
  .grid-equity-trades > .card--trades {
    height: 100%;
  }
  .grid-equity-trades > .chart-card .chart-card__body--tall {
    flex: 1 1 auto;
    height: auto;
    min-height: 320px;
  }
}

@media (max-width: 1024px) {
  .grid-equity-trades {
    /* Pakai minmax(0, 1fr) — bukan plain 1fr — supaya grid track
       tidak membesar mengikuti intrinsic content tabel (yang punya
       white-space: nowrap). Tanpa ini, halaman akan horizontal-scroll
       di mobile karena card melebar di luar viewport. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
}

/* ----------  TOAST NOTIFICATIONS  ---------- */
.toast-container {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  pointer-events: none;
  max-width: 360px;
  width: calc(100% - var(--sp-10));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  box-shadow: var(--sh-lg);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  pointer-events: auto;
  animation: toast-in 0.28s var(--ease-out) forwards;
}

.toast.toast--removing {
  animation: toast-out 0.22s var(--ease-in-out) forwards;
}

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.toast__message {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}

.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast__close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.toast__close svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Variants */
.toast--success {
  border-color: var(--success-border);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.10), var(--bg-elevated) 60%);
}
.toast--success .toast__icon { color: var(--success); }

.toast--error {
  border-color: var(--danger-border);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.10), var(--bg-elevated) 60%);
}
.toast--error .toast__icon { color: var(--danger); }

.toast--info {
  border-color: var(--accent-ring);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), var(--bg-elevated) 60%);
}
.toast--info .toast__icon { color: var(--accent-hover); }

.toast--warning {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), var(--bg-elevated) 60%);
}
.toast--warning .toast__icon { color: var(--warning); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.96); }
}

@media (max-width: 768px) {
  /* Di mobile toast tetap di kanan-atas (di bawah .mobile-topbar)
     tapi dibuat lebih ringkas: lebar max ~280px, padding & font lebih
     kecil — supaya tidak menutupi konten/form di belakangnya.
     Hormati safe-area-inset-top untuk iPhone. */
  .toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    right: var(--sp-3);
    left: auto;
    max-width: 280px;
    width: calc(100% - var(--sp-6));
    gap: var(--sp-2);
  }
  .toast {
    padding: 8px 10px;
    font-size: var(--fs-xs);
    gap: var(--sp-2);
    border-radius: var(--r-sm);
  }
  .toast__icon { width: 16px; height: 16px; }
  .toast__close { padding: 1px; }
  .toast__close svg { width: 12px; height: 12px; }
}

@media (max-width: 480px) {
  .toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    right: var(--sp-2);
    max-width: 240px;
    width: calc(100% - var(--sp-5));
  }
  .toast {
    padding: 7px 9px;
    font-size: 11.5px;
  }
  .toast__icon { width: 14px; height: 14px; margin-top: 0; }
}

/* ============================================================
   20. TRADE DETAIL MODAL
   Lightweight dialog yang menampilkan semua detail trade dari
   tabel ringkas. Terbuka via tombol "Details" di tiap baris.
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity var(--t-base);
}
.modal-backdrop.is-open {
  display: flex;
  opacity: 1;
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--sp-8));
  max-height: calc(100dvh - var(--sp-8));
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl), var(--sh-inner);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform var(--t-base), opacity var(--t-base);
}
.modal-backdrop.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Modal varian form — lebih lebar agar form-grid 2 kolom enak dilihat */
.modal--form { max-width: 640px; }
/* Form di dalam modal harus jadi flex column supaya .modal__body bisa
   scroll dan .modal__foot tetap kelihatan (sticky di bawah). Tanpa ini,
   form pakai display:block default, dan flex sizing di body/foot tidak
   bekerja ? footer (tombol Batal/Simpan) terdorong di luar viewport. */
.modal--form > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.modal--form .modal__body { padding: var(--sp-4) var(--sp-5); }
.modal--form .form-msg { margin-top: var(--sp-3); min-height: 1em; }
.modal--form .form-field.is-locked select {
  cursor: not-allowed;
  opacity: 0.7;
}
/* Saat mode 'close', input/select non-editable di-redam tampilannya
   supaya user paham mana yang masih bisa diubah. Border tetap supaya
   layout tidak loncat. */
.modal--form .form-field.is-locked input[readonly],
.modal--form .form-field.is-locked select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: var(--bg-row-hover, rgba(255, 255, 255, 0.03));
}
.modal--form .form-field.is-locked > label {
  opacity: 0.75;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.modal__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.modal__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-strong);
  cursor: pointer;
  transition: all var(--t-fast);
  padding: 0;
}
.modal__close svg { width: 16px; height: 16px; }
.modal__close:hover {
  background: rgba(248, 113, 113, 0.22);
  color: #ffb4b4;
  border-color: var(--danger);
}
.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.32);
}

.modal__body {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1 1 auto;
}

.modal__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-subtle);
  min-height: 36px;
}
.modal__detail:last-child { border-bottom: 0; }
.modal__detail dt {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.modal__detail dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-word;
  min-width: 0;
}
.modal__detail dd .cell-muted {
  font-weight: 400;
}
.modal__detail--notes {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.modal__detail--notes dt { letter-spacing: 0.06em; }
.modal__detail--notes dd {
  text-align: left;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ============================================================
   TradingView embed (di detail trade)
   ------------------------------------------------------------
   Tampil di paling bawah modal detail. Untuk snapshot (/x/<id>/)
   menampilkan gambar PNG dari s3.tradingview.com; untuk link
   lainnya hanya menampilkan tombol "Buka di TradingView".
   ============================================================ */
.tv-embed {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tv-embed__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.tv-embed__title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.tv-embed__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.tv-embed__open svg { width: 12px; height: 12px; }
.tv-embed__open:hover {
  background: var(--accent-soft);
  border-color: rgba(37, 99, 235, 0.30);
  color: var(--accent-hover);
}
.tv-embed__media {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: rgba(0, 0, 0, 0.25);
  line-height: 0;
}
.tv-embed__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  background: #0c1019;
}
.tv-embed--link-only .tv-embed__url {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  word-break: break-all;
  line-height: 1.5;
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.15);
}
.modal__foot .btn { padding: 8px 14px; }

/* ============================================================
   Confirm dialog — compact centered alertdialog used in place of the
   native window.confirm(). Shares .modal-backdrop / .modal animation.
   ============================================================ */
.modal--confirm {
  max-width: 400px;
  text-align: center;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  gap: var(--sp-3);
}
.modal__confirm-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.12);
}
.modal__confirm-icon svg { width: 24px; height: 24px; }
.modal--confirm .modal__title { padding: 0; border: 0; }
.modal__confirm-msg {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}
.modal__foot--confirm {
  justify-content: center;
  border-top: 0;
  background: transparent;
  padding: var(--sp-2) 0 0;
}
.modal__foot--confirm .btn { min-width: 96px; justify-content: center; }

/* Destructive action button (delete confirm, etc.) */
.btn-danger {
  background: var(--danger, #ef4444);
  color: #ffffff;
  box-shadow:
    0 6px 16px rgba(239, 68, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-strong, #dc2626); }
.btn-danger:active:not(:disabled) { transform: translateY(1px); }

/* ============================================================
   Skeleton loading — cold-cache shimmer for dashboard & calendar.
   When the page <main> has .is-loading we overlay a subtle pulsing
   placeholder on the value/number elements so cards never look empty
   while the first network fetch is in flight. Cleared as soon as data
   renders. Charts/canvas are left alone (their own empty-state covers it).
   ============================================================ */
@keyframes mf-skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.25; }
}
.content.is-loading .stat-card .value,
.content.is-loading .mini-stat__value,
.content.is-loading .category-card dd,
.content.is-loading .ls-row__metrics .value,
.content.is-loading .ls-metric__val,
.content.is-loading .cal-summary .value {
  color: transparent !important;
  border-radius: var(--r-sm, 6px);
  background: linear-gradient(90deg,
    var(--border-subtle, rgba(255,255,255,0.06)),
    var(--border-default, rgba(255,255,255,0.12)),
    var(--border-subtle, rgba(255,255,255,0.06)));
  animation: mf-skeleton-pulse 1.2s ease-in-out infinite;
  min-width: 48px;
  display: inline-block;
}
.content.is-loading .category-card dd { min-width: 36px; }
@media (prefers-reduced-motion: reduce) {
  .content.is-loading .stat-card .value,
  .content.is-loading .mini-stat__value,
  .content.is-loading .category-card dd,
  .content.is-loading .ls-row__metrics .value,
  .content.is-loading .ls-metric__val,
  .content.is-loading .cal-summary .value {
    animation: none;
  }
}

/* ============================================================
   Row action buttons — icon-only pills with tooltip on hover.
   Tiga varian warna: detail (biru), edit (kuning/amber), delete (merah).
   ============================================================ */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.btn-action svg { width: 14px; height: 14px; }
.btn-action:active { transform: translateY(1px); }
.btn-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Close — success green (menutup posisi terbuka) */
.btn-action--close {
  color: var(--success-strong);
  border-color: var(--success-border);
  background: var(--success-soft);
}
.btn-action--close:hover {
  background: rgba(52, 211, 153, 0.22);
  border-color: var(--success-strong);
  color: #bbf7d0;
}
.btn-action--close:focus-visible {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.32);
}

/* Detail — accent blue */
.btn-action--detail {
  color: var(--accent-hover);
  border-color: rgba(37, 99, 235, 0.30);
  background: var(--accent-soft);
}
.btn-action--detail:hover {
  background: var(--accent-soft-2);
  border-color: var(--accent);
  color: #93c5fd;
}

/* Edit — warning amber */
.btn-action--edit {
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.30);
  background: var(--warning-soft);
}
.btn-action--edit:hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: var(--warning);
  color: #fde68a;
}
.btn-action--edit:focus-visible {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.32);
}

/* Delete — danger red */
.btn-action--delete {
  color: var(--danger-strong);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}
.btn-action--delete:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: var(--danger);
  color: #fecaca;
}
.btn-action--delete:focus-visible {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.32);
}

/* Tooltip on hover/focus — pakai data-tooltip supaya tidak bentrok
   dengan native title (delay browser bawaan kelamaan). */
.btn-action[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  padding: 4px 8px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
  box-shadow: var(--sh-md);
  z-index: 5;
}
.btn-action[data-tooltip]:hover::after,
.btn-action[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Close button di footer modal — match warna danger biar konsisten
   dengan tombol X di header. */
.btn-close {
  background: var(--danger-soft);
  color: var(--danger-strong);
  border: 1px solid var(--danger-border);
}
.btn-close:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.22);
  border-color: var(--danger);
  color: #fecaca;
}
.btn-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.32);
}

/* ------------------------------------------------------------
   Legacy alias — beberapa template lama masih memakai .btn-details.
   Diarahkan ke style detail variant supaya tidak break.
   ------------------------------------------------------------ */
.btn-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(37, 99, 235, 0.30);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-details svg { width: 14px; height: 14px; }
.btn-details:hover {
  background: var(--accent-soft-2);
  border-color: var(--accent);
  color: #93c5fd;
}

@media (max-width: 480px) {
  .modal { max-height: calc(100vh - var(--sp-4)); max-height: calc(100dvh - var(--sp-4)); }
  .modal__head { padding: var(--sp-3) var(--sp-4); }
  .modal__body { padding: var(--sp-3) var(--sp-4); }
  .modal__foot { padding: var(--sp-3) var(--sp-4); }
  .btn-details { width: 28px; height: 28px; }
  .btn-details svg { width: 13px; height: 13px; }
  .btn-action { width: 28px; height: 28px; }
  .btn-action svg { width: 13px; height: 13px; }
  .row-actions { gap: 4px; }
  /* Compact tables on phone — just tighten cells, no column hiding */
  thead th { padding: 8px var(--sp-2); font-size: 10px; }
  tbody td { padding: 10px var(--sp-2); font-size: var(--fs-xs); }
}

/* ============================================================
   Floating Add Trade button (FAB)
   ------------------------------------------------------------
   Desktop : circular icon-only at bottom-right; on hover/focus
             it expands and reveals the "Add Trade" label.
   Mobile  : always-expanded pill (icon + label) so the action
             stays obvious without relying on hover.
   ============================================================ */
.fab-add-trade {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 12px 28px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    width var(--t-base),
    padding var(--t-base),
    background-color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
.fab-add-trade__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.fab-add-trade__label {
  flex: 0 0 auto;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width var(--t-base),
    margin-left var(--t-base),
    opacity var(--t-fast);
}
.fab-add-trade:hover,
.fab-add-trade:focus-visible {
  width: 172px;
  padding: 0 22px 0 18px;
  background: var(--accent-hover);
  box-shadow:
    0 16px 32px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.fab-add-trade:hover .fab-add-trade__label,
.fab-add-trade:focus-visible .fab-add-trade__label {
  max-width: 200px;
  margin-left: 10px;
  opacity: 1;
}
.fab-add-trade:active {
  background: var(--accent-active);
  transform: translateY(1px);
}
.fab-add-trade:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Mobile / tablet: always-expanded pill so it's obviously a button */
@media (max-width: 768px) {
  .fab-add-trade {
    width: auto;
    height: 48px;
    padding: 0 18px 0 14px;
    right: var(--sp-4);
    bottom: var(--sp-4);
    box-shadow:
      0 10px 22px var(--accent-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .fab-add-trade__icon { width: 20px; height: 20px; }
  .fab-add-trade__label {
    max-width: 200px;
    margin-left: 8px;
    opacity: 1;
  }
  /* Disable hover-expand on mobile since the label is already visible */
  .fab-add-trade:hover,
  .fab-add-trade:focus-visible {
    width: auto;
    padding: 0 18px 0 14px;
  }
}

@media (max-width: 480px) {
  .fab-add-trade {
    height: 46px;
    padding: 0 16px 0 12px;
    right: var(--sp-3);
    bottom: var(--sp-3);
    font-size: var(--fs-sm);
  }
  .fab-add-trade:hover,
  .fab-add-trade:focus-visible {
    padding: 0 16px 0 12px;
  }
}

/* ============================================================
   21. AUTOCOMPLETE — typeahead dropdown
   Dipakai pada field "Pair / Ticker" di modal add/edit trade.
   Wrapper `.ac-wrap` dipasang via JS, panel `.ac-panel` floating
   tepat di bawah input.
   ============================================================ */
.ac-wrap {
  position: relative;
  width: 100%;
}

.ac-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  /* Pastikan tabular numeric supaya simbol rata */
  font-variant-numeric: tabular-nums;
}
.ac-panel[hidden] { display: none; }

.ac-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.01em;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.ac-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
.ac-item.is-active {
  background: var(--accent-soft);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}

/* Highlight teks query */
.ac-mark {
  background: transparent;
  color: var(--accent-hover);
  font-weight: 700;
  padding: 0;
}
.ac-item.is-active .ac-mark { color: #ffffff; }

@media (max-width: 480px) {
  .ac-panel {
    max-height: 200px;
  }
  .ac-item {
    padding: 10px 12px;
    font-size: var(--fs-base);
  }
}

/* ============================================================
   22. COMPACT TRADE TABLES ON MOBILE
   Khusus Trade History (.table-trades) dan Daftar Trade per
   instrumen (.table-journal). Diketatkan font + padding + ukuran
   pill/icon supaya pas di viewport mobile tanpa horizontal scroll.
   Selector lebih spesifik dari aturan global thead/tbody di atas
   sehingga otomatis override tanpa !important.
   ============================================================ */
@media (max-width: 768px) {
  .table-trades,
  .table-journal {
    font-size: 11.5px;
  }
  .table-trades thead th,
  .table-journal thead th {
    padding: 8px 6px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  /* Pakai :not(.empty-row) supaya padding generous milik empty-state row
     (lihat aturan .empty-row td di atas) tidak ter-override jadi compact. */
  .table-trades tbody tr:not(.empty-row) td,
  .table-journal tbody tr:not(.empty-row) td {
    padding: 9px 6px;
    font-size: 11.5px;
  }
  /* Pill P/L & Status — lebih ringkas */
  .table-trades .pl-pill,
  .table-trades .status-pill,
  .table-journal .pl-pill,
  .table-journal .status-pill {
    padding: 2px 7px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  /* Tombol aksi — lebih kecil supaya kolom Aksi tidak melebar */
  .table-trades .row-actions,
  .table-journal .row-actions { gap: 4px; }
  .table-trades .btn-action,
  .table-journal .btn-action { width: 26px; height: 26px; }
  .table-trades .btn-action svg,
  .table-journal .btn-action svg { width: 12px; height: 12px; }
  /* Logo instrumen sedikit lebih kecil */
  .table-trades .instrument-cell { gap: 6px; }
  .table-trades .instrument-cell__logo { width: 22px; height: 22px; }
  .table-trades .instrument-cell__logo svg { width: 12px; height: 12px; }
}

@media (max-width: 480px) {
  /* Hilangkan margin negatif wrapper supaya tabel tidak "menempel" ke
     tepi card dan kembali memakai padding card sebagai gutter. Ini juga
     mencegah overflow-x kebablasan ketika konten sebenarnya sudah pas. */
  .card .table-wrapper:has(.table-trades),
  .card .table-wrapper:has(.table-journal) {
    margin: 0;
    padding: 0;
  }

  .table-trades,
  .table-journal {
    font-size: 10.5px;
    width: 100%;
  }
  .table-trades thead th,
  .table-journal thead th {
    padding: 7px 4px;
    font-size: 9px;
    letter-spacing: 0.03em;
  }
  /* Sama seperti di breakpoint 768px: kecualikan empty-row supaya
     padding besar untuk empty-state tidak collapse ke 8px 4px. */
  .table-trades tbody tr:not(.empty-row) td,
  .table-journal tbody tr:not(.empty-row) td {
    padding: 8px 4px;
    font-size: 10.5px;
    /* Izinkan wrap supaya tanggal/ticker panjang bisa turun baris,
       sehingga tabel tidak perlu di-scroll horizontal. */
    white-space: normal;
    word-break: break-word;
  }

  /* Kolom Aksi: kasih lebar minimum yang cukup buat menampung 4 tombol
     aksi (close/detail/edit/delete) supaya layout auto bisa membagi sisa
     ruang ke kolom lain. Tanpa ini, di phone sempit (~360px) kolom aksi
     bisa overflow dan memicu horizontal scroll. */
  .table-trades thead th:last-child,
  .table-trades tbody td:last-child,
  .table-journal thead th:last-child,
  .table-journal tbody td:last-child {
    width: 1%;
    white-space: nowrap;
  }

  /* Pill tetap satu baris meski cell-nya boleh wrap */
  .table-trades .pl-pill,
  .table-trades .status-pill,
  .table-journal .pl-pill,
  .table-journal .status-pill {
    padding: 2px 6px;
    font-size: 9.5px;
    white-space: nowrap;
  }

  /* Tombol aksi paling ringkas. Boleh wrap ke baris baru di phone yang
     sangat sempit supaya tidak memaksa tabel scroll horizontal kalau
     trade-nya masih open (4 tombol sekaligus). */
  .table-trades .row-actions,
  .table-journal .row-actions {
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .table-trades .btn-action,
  .table-journal .btn-action { width: 24px; height: 24px; }
  .table-trades .btn-action svg,
  .table-journal .btn-action svg { width: 11px; height: 11px; }

  /* Cell instrumen — label sudah disembunyikan oleh aturan
     `.instrument-cell__name { display: none }` di breakpoint 480px,
     tinggal kecilkan logo-nya supaya makin hemat. */
  .table-trades .instrument-cell { gap: 0; }
  .table-trades .instrument-cell__logo { width: 20px; height: 20px; }
  .table-trades .instrument-cell__logo svg { width: 11px; height: 11px; }

  /* Pair/Ticker bisa cukup panjang — biar bold tetap, tapi izinkan wrap */
  .table-trades tbody td strong,
  .table-journal tbody td strong {
    font-weight: 600;
    word-break: break-word;
  }

  /* Pagination compact lebih ramping di phone */
  .pagination__btn,
  .pagination__page { min-width: 30px; height: 30px; font-size: 11px; padding: 0 6px; }
}

/* ============================================================
   FILTER — button trigger + mini popover
   Pasangan modul /js/trade/filters.js. Dipakai di dashboard, jurnal
   per-instrumen (crypto/forex/saham), dan trade-history.
   ============================================================ */
.filter-trigger {
  position: relative;
  display: inline-flex;
}

/* Trigger button — disamakan tinggi & shape dengan rate-badge supaya
   sejajar visual dan ringkas sebagai aksi sekunder di page header.
   Surface bergradien halus + ikon dalam chip kecil untuk kesan premium. */
.filter-trigger__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 10px;
  height: 32px;
  background:
    linear-gradient(180deg, var(--bg-card-2) 0%, var(--bg-card) 100%);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
  box-shadow: var(--sh-sm), var(--sh-inner);
  white-space: nowrap;
}
/* Ikon ditempatkan dalam chip lingkaran tipis agar lebih terbaca */
.filter-trigger__btn svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast);
}
.filter-trigger__btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background:
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card-2) 100%);
  box-shadow: var(--sh-md), var(--sh-inner);
  transform: translateY(-1px);
}
.filter-trigger__btn:hover svg {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.07);
}
.filter-trigger__btn:active {
  transform: translateY(0);
  box-shadow: var(--sh-sm), var(--sh-inner);
}
.filter-trigger__btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Popover terbuka — disorot dengan tint accent halus */
.filter-trigger__btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--text-primary);
  background:
    linear-gradient(180deg, var(--accent-soft-2) 0%, var(--accent-soft) 100%);
  box-shadow: 0 0 0 3px var(--accent-ring), var(--sh-inner);
}
.filter-trigger__btn[aria-expanded="true"] svg {
  color: var(--accent-hover);
  background: rgba(37, 99, 235, 0.18);
}
/* Filter aktif (ada nilai diterapkan) — penuh aksen, paling menonjol */
.filter-trigger__btn.is-active {
  background:
    linear-gradient(180deg, var(--accent-soft-2) 0%, var(--accent-soft) 100%);
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--accent-hover);
}
.filter-trigger__btn.is-active svg {
  color: var(--accent-hover);
  background: rgba(37, 99, 235, 0.18);
}
.filter-trigger__btn.is-active:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), var(--sh-inner);
}

/* Badge angka ketika filter aktif — kompak, sejajar dengan label */
.filter-trigger__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 1px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 3px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

/* Popover container */
.filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), var(--sh-inner);
  overflow: hidden;
  animation: filter-pop var(--t-fast) ease-out;
}
@keyframes filter-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.filter-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.filter-popover__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.005em;
}
.filter-popover__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-popover__close svg { width: 14px; height: 14px; }
.filter-popover__close:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.filter-popover__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.filter-popover__foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border-subtle);
  min-height: 50px;
  box-sizing: border-box;
}
.filter-popover__reset {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-popover__reset:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Field group inside popover */
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.filter-field__select,
.filter-field__date {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.filter-field__select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
.filter-field__select:hover,
.filter-field__date:hover {
  background-color: var(--bg-input-hover);
  border-color: var(--border-strong);
}
.filter-field__select:focus-visible,
.filter-field__date:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.filter-field__date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.filter-field__date::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(1.2);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.filter-field__date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.filter-field__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-field__row .filter-field__date { flex: 1 1 0; min-width: 0; }
.filter-field__sep {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  user-select: none;
}

/* Instrument chip group inside popover */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  appearance: none;
  background: var(--bg-input);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.filter-chip.is-active {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: rgba(37, 99, 235, 0.30);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.20);
}
.filter-chip:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .filter-trigger__btn span:not(.filter-trigger__badge) {
    /* Tetap tampilkan label "Filter" di mobile, tapi padding lebih ringkas */
  }
  .filter-popover {
    right: auto;
    left: 0;
    width: min(320px, calc(100vw - 24px));
  }
}

/* ============================================================
   PNL CALENDAR
   ============================================================ */
.calendar-card { padding: var(--sp-5) var(--sp-5) var(--sp-6); }

.calendar-toolbar {
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.calendar-period {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.calendar-selects {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.calendar-select { position: relative; display: inline-flex; }
.calendar-select__el {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  padding: 0 32px 0 12px;
  border-radius: var(--r-md);
  background-color: var(--bg-input);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.calendar-select__el:hover {
  background-color: var(--bg-input-hover);
  border-color: var(--border-strong);
}
.calendar-select__el:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Monthly / Yearly mode toggle */
.calendar-mode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
}
.calendar-mode__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.calendar-mode__btn:hover { color: var(--text-primary); }
.calendar-mode__btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.calendar-mode__btn:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}
.calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.calendar-nav__btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.calendar-nav__btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-input-hover);
}
.calendar-nav__btn svg { width: 16px; height: 16px; }
.calendar-nav__today {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.calendar-nav__today:hover {
  color: var(--accent-hover);
  border-color: rgba(37, 99, 235, 0.30);
  background: var(--accent-soft);
}

/* Grid */
.calendar-grid { margin-top: var(--sp-2); }
.cal-grid__head,
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(86px, 0.9fr);
  gap: var(--sp-2);
}
.cal-grid__head { margin-bottom: var(--sp-2); }
.cal-grid__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 4px 0;
}
.cal-grid__dow--week { color: var(--text-secondary); }
.cal-grid__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Day cell */
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.cal-cell--empty,
.cal-cell--week-empty {
  background: transparent;
  border-color: transparent;
}
.cal-cell__date {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.cal-cell__pl {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-cell__meta {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.cal-cell__week-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Has-trades interactive cells */
.cal-cell--has-trades { cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.cal-cell--has-trades:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--sh-md);
}
.cal-cell--has-trades:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* P/L tint */
.cal-cell--profit {
  background: var(--success-soft);
  border-color: var(--success-border);
}
.cal-cell--profit .cal-cell__pl { color: var(--success-strong); }
.cal-cell--loss {
  background: var(--danger-soft);
  border-color: var(--danger-border);
}
.cal-cell--loss .cal-cell__pl { color: var(--danger-strong); }
.cal-cell--flat .cal-cell__pl { color: var(--text-secondary); }

/* Today marker */
.cal-cell--today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-cell--today .cal-cell__date { color: var(--accent-hover); }

/* Week total column */
.cal-cell--week {
  background: var(--bg-input);
  border-color: var(--border-default);
  align-items: flex-start;
}
.cal-cell--week.cal-cell--profit { background: var(--success-soft); }
.cal-cell--week.cal-cell--loss { background: var(--danger-soft); }

/* Yearly mode: 12-month grid */
.cal-year {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.cal-month-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
}
.cal-month-cell__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.cal-month-cell__pl {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: auto;
}
.cal-month-cell__pl--flat { color: var(--text-muted); font-size: var(--fs-md); }
.cal-month-cell__meta {
  font-size: 11px;
  color: var(--text-muted);
}
.cal-month-cell--has-trades { cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.cal-month-cell--has-trades:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--sh-md);
}
.cal-month-cell--has-trades:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}
.cal-month-cell--profit {
  background: var(--success-soft);
  border-color: var(--success-border);
}
.cal-month-cell--profit .cal-month-cell__pl { color: var(--success-strong); }
.cal-month-cell--loss {
  background: var(--danger-soft);
  border-color: var(--danger-border);
}
.cal-month-cell--loss .cal-month-cell__pl { color: var(--danger-strong); }
.cal-month-cell--today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-month-cell--today .cal-month-cell__name { color: var(--accent-hover); }

/* Breakdown table (weekly / monthly summary) */
.breakdown-card { margin-top: var(--sp-5); }
.breakdown-table th:nth-child(n+3),
.breakdown-table td:nth-child(n+3) { text-align: right; }
.breakdown-table td:last-child { font-variant-numeric: tabular-nums; }
.breakdown-row--profit td:first-child { box-shadow: inset 3px 0 0 var(--success-strong); }
.breakdown-row--loss td:first-child { box-shadow: inset 3px 0 0 var(--danger-strong); }
.breakdown-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--sp-6) var(--sp-4);
}

/* Day detail modal summary */
.cal-day-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
}
.cal-day-summary__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.cal-day-summary__value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cal-day-summary__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .calendar-card { padding: var(--sp-4); }
  .calendar-toolbar { align-items: stretch; }
  .calendar-period { width: 100%; justify-content: space-between; }
  .calendar-selects { flex: 1 1 auto; }
  .calendar-select { flex: 1 1 0; }
  .calendar-select__el { width: 100%; }
  .calendar-mode { width: 100%; }
  .calendar-mode__btn { flex: 1 1 0; }
  .cal-grid__head,
  .cal-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }
  /* Sembunyikan kolom total mingguan di mobile — terlalu sempit. */
  .cal-grid__dow--week,
  .cal-cell--week { display: none; }
  .cal-cell {
    min-height: 58px;
    padding: 5px;
  }
  .cal-cell__pl {
    font-size: 8.5px;
    letter-spacing: -0.04em;
    font-weight: 700;
  }
  .cal-cell__meta { display: none; }
  .cal-year { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .cal-month-cell { min-height: 80px; padding: var(--sp-2); }
}

/* Sel hari sangat sempit di layar kecil — perkecil font lagi agar nilai
   P/L (dengan koma + 2 desimal) tidak terpotong/ellipsis. */
@media (max-width: 480px) {
  .cal-cell { padding: 4px; }
  .cal-cell__pl { font-size: 7.5px; }
  .cal-cell__date { font-size: 10px; }
}
@media (max-width: 380px) {
  .cal-cell__pl { font-size: 6.5px; letter-spacing: -0.05em; }
}

/* ============================================================
   23. SETTINGS — modal rows + slide toggle
   ============================================================ */
.modal--settings { max-width: 440px; }

/* Settings tabs (General / Instrument) */
.settings-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: var(--sp-4) var(--sp-5) 0;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
}
.settings-tabs__btn {
  appearance: none;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.settings-tabs__icon {
  display: inline-flex;
  flex: 0 0 auto;
}
.settings-tabs__icon svg {
  width: 16px;
  height: 16px;
}
.settings-tabs__btn:hover { color: var(--text-primary); }
.settings-tabs__btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.settings-tabs__btn:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.settings-row__icon svg {
  width: 19px;
  height: 19px;
}
.settings-row__text {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-row__label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
}
.settings-row__desc {
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-tertiary);
}
.settings-row__desc:empty { display: none; }
.settings-select {
  width: auto;
  min-width: 170px;
  flex: 0 0 auto;
}
/* Timezone select carries IANA + GMT-offset labels which can run long
   (e.g. "America/Los_Angeles (GMT-7)"). Cap the width so the description
   column stays readable, and shrink the option font a touch so the
   selected text isn't clipped at the cap. */
.settings-select--tz {
  max-width: 200px;
  font-size: var(--fs-sm);
}
.settings-select--tz option {
  font-size: var(--fs-sm);
}

/* Slide toggle (used for theme + currency-rate switches) */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}
/* Toggle + caption (e.g. "Dark"/"Light" next to the theme switch) */
.toggle-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.toggle-state {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 38px;
  text-align: right;
}
.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.toggle__track {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-tertiary);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease-out), background var(--t-fast);
}
.toggle__input:checked + .toggle__track {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle__input:checked + .toggle__track .toggle__thumb {
  transform: translateX(20px);
  background: #ffffff;
}
.toggle__input:focus-visible + .toggle__track {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ============================================================
   24. LIGHT THEME — token overrides
   Activated via <html data-theme="light">. The whole UI is driven
   by the design tokens in :root, so overriding them here flips the
   palette. A few hardcoded white-on-dark touches are patched below.
   ============================================================ */
[data-theme="light"] {
  /* Surface layers */
  --bg-app:        #f4f6fb;
  --bg-sidebar:    #ffffff;
  --bg-card:       #ffffff;
  --bg-card-2:     #f3f5f9;
  --bg-elevated:   #ffffff;
  --bg-input:      #f1f4f9;
  --bg-input-hover:#e9eef6;
  --bg-row-hover:  rgba(15, 23, 42, 0.035);

  /* Borders */
  --border-subtle: rgba(15, 23, 42, 0.07);
  --border-default:rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.20);

  /* Text */
  --text-primary:   #161b26;
  --text-secondary: #3d4458;
  --text-tertiary:  #646c80;
  --text-muted:     #8a92a4;

  /* Accent — keep the same blue, tints adjusted for light bg */
  --accent-soft:   rgba(37, 99, 235, 0.10);
  --accent-soft-2: rgba(37, 99, 235, 0.16);
  --accent-ring:   rgba(37, 99, 235, 0.30);
  --accent-glow:   rgba(37, 99, 235, 0.18);

  /* Semantic — slightly deeper so colored text reads on white */
  --success:        #059669;
  --success-strong: #047857;
  --success-soft:   rgba(5, 150, 105, 0.12);
  --success-border: rgba(5, 150, 105, 0.30);

  --danger:         #dc2626;
  --danger-strong:  #b91c1c;
  --danger-soft:    rgba(220, 38, 38, 0.10);
  --danger-border:  rgba(220, 38, 38, 0.28);

  --warning:        #d97706;
  --warning-soft:   rgba(217, 119, 6, 0.12);

  /* Shadows — softer, neutral for light surfaces */
  --sh-sm:    0 1px 2px rgba(16, 24, 40, 0.06);
  --sh-md:    0 4px 14px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-lg:    0 16px 40px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  --sh-xl:    0 24px 60px rgba(16, 24, 40, 0.16), 0 4px 12px rgba(16, 24, 40, 0.08);
  --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --sh-glow:  0 0 0 1px var(--accent-soft), 0 8px 28px var(--accent-glow);
}

/* Page background gradients — lighter wash */
[data-theme="light"] body {
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(37, 99, 235, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(30, 58, 138, 0.04), transparent 55%);
}
[data-theme="light"] .auth-shell {
  background-image:
    radial-gradient(800px 500px at 20% 10%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(700px 500px at 80% 90%, rgba(30, 58, 138, 0.06), transparent 55%);
}
[data-theme="light"] .auth-shell::before {
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(15, 23, 42, 0.06) 100%);
}

/* Patch hardcoded white-on-dark hovers/surfaces so they read on light */
[data-theme="light"] .nav-link:hover { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .nav-link.active { background: rgba(15, 23, 42, 0.07); }
[data-theme="light"] .btn-secondary:hover:not(:disabled) { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .btn-icon:hover { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .filter-trigger__btn svg { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .filter-trigger__btn:hover svg { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .filter-popover__close:hover,
[data-theme="light"] .filter-popover__reset:hover { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .pagination__btn:hover:not(:disabled),
[data-theme="light"] .pagination__page:hover:not(.is-active) { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .toast__close:hover { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .ls-bar { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .ls-metric .value,
[data-theme="light"] .category-card .value { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .stat-card::after {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.05), transparent);
}

/* Tooltip backgrounds on charts use a dark surface by default; flip them
   to an elevated light surface for legibility. */
[data-theme="light"] .modal {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
}

/* Native controls follow the light scheme */
[data-theme="light"] input[type='date'] { color-scheme: light; }
[data-theme="light"] input[type='date']::-webkit-calendar-picker-indicator {
  filter: none;
}
[data-theme="light"] .filter-field__date::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ----------  BILLING SETTINGS  ---------- */

/* Accessible-only label (sr-only style) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.card__head--billing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.card__head--billing > div { display: flex; flex-direction: column; }

.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.billing-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}
.billing-stat__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.billing-stat__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.grid-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}
.plan-card--featured {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18) inset;
}
.plan-card__ribbon {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.35);
}
[data-theme="light"] .plan-card__ribbon { color: #1d4ed8; background: rgba(37, 99, 235, 0.12); }

.plan-card__head { display: flex; flex-direction: column; gap: var(--sp-1); }
.plan-card__name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.plan-card__price {
  margin: 0;
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.plan-card__price span {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.plan-card__features {
  margin: 0;
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.plan-card--current .btn:disabled {
  opacity: 1;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: default;
}

/* ============================================================
   Admin Console — dedicated ops shell with its own sidebar (BareLayout).
   Reuses the shared dark theme + card/stat/chart components; the sidebar,
   section switching, top bar, and user tables are admin-specific.
   ============================================================ */
.admin-console { min-height: 100vh; background: var(--bg-app); color: var(--text-primary); }
/* The admin console is NOT the app shell: it has a sticky sidebar + sticky
   topbar and expects the PAGE to scroll. The global `body { overflow: hidden }`
   (app-shell pattern, where .content scrolls internally) clips everything past
   the first viewport on shorter screens (laptops) — the lower charts/tables
   appear cut off and unreachable. Restore page scrolling for the admin body so
   all sections fit and scroll on any screen height. */
body.admin-console { overflow-y: auto; overflow-x: hidden; }

.admin-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar — mirrors the user app sidebar (AppChrome) design ---------- */
.admin-sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  z-index: 30;
}

/* Brand: glowing logo mark + large wordmark, matching .brand on user pages. */
.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.admin-brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: transparent;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: 0 6px 16px var(--accent-glow);
}
.admin-brand__mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.admin-brand__text { display: flex; flex-direction: column; min-width: 0; }
.admin-brand__name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.1;
}
.admin-brand__badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
  white-space: nowrap;
}

.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
}

/* Nav items styled like .nav-link: subtle white-tint hover/active with an
   accent left bar on the active item. */
.admin-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 9px var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  border-radius: var(--r-md);
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.admin-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.admin-nav__link.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}
.admin-nav__link.is-active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.admin-nav__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color var(--t-fast);
}
.admin-nav__link:hover .admin-nav__icon,
.admin-nav__link.is-active .admin-nav__icon { color: var(--accent); }

/* Bottom actions are bordered ghost buttons, like .btn-settings / .btn-logout. */
.admin-sidebar__bottom .admin-nav__link {
  border: 1px solid var(--border-default);
}
.admin-sidebar__bottom .admin-nav__link:hover {
  background: var(--bg-row-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.admin-sidebar__bottom .admin-nav__link:hover .admin-nav__icon { color: var(--accent); }
.admin-sidebar__bottom .admin-nav__link--danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-strong);
}
.admin-sidebar__bottom .admin-nav__link--danger:hover .admin-nav__icon { color: var(--danger-strong); }

/* Divider + spacing between "Return Apps" and the danger "Logout" action. */
.admin-sidebar__bottom .admin-sidebar__divider {
  height: 1px;
  margin: var(--sp-2) 0;
  background: var(--border-subtle);
}

/* ---------- Content column ---------- */
.admin-content { display: flex; flex-direction: column; min-width: 0; }

.admin-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
}
.admin-topbar__title { font-size: 1.25rem; letter-spacing: -0.02em; font-weight: 700; margin-right: auto; }
/* Avatar di top bar lebih kecil dari yang di halaman user (48px). */
.admin-topbar .account-avatar { width: 38px; height: 38px; font-size: 15px; margin-left: var(--sp-3); }
.admin-topbar .user-id-card { margin-left: 0; }
.admin-topbar .user-id-card__name { border-bottom: 0; padding-bottom: 0; }
.admin-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--r-md);
  cursor: pointer;
}
.admin-hamburger svg { width: 20px; height: 20px; }

.admin-main {
  flex: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  /* Vertical rhythm scales with viewport height so the console shrinks to fit
     shorter laptop screens instead of forcing a long scroll. clamp() keeps a
     readable minimum on very short screens and caps at the roomy desktop value. */
  padding: clamp(var(--sp-3), 2.2dvh, var(--sp-6)) var(--sp-6) clamp(var(--sp-5), 3dvh, var(--sp-12));
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-3), 2.2dvh, var(--sp-6));
  /* Make the content column itself the sizing context so the metric grids
     below respond to the REAL available width (viewport minus the 248px
     sidebar + padding), not the raw viewport. This keeps the admin metrics
     fit on any device — wide desktop, laptop, or laptop with OS display
     scaling — instead of overflowing when the viewport is wide but the
     content area is narrow. */
  container: admin-main / inline-size;
}

/* ---------- Admin metric grids: size to the content column, not the
   viewport. These container queries override the viewport-based grid rules
   (higher specificity via .admin-console) so the KPI cards, chart pairs and
   instrument cards reflow based on the space actually left beside the
   sidebar. ---------- */

/* Mobile-first within the container: stack, then widen as room allows. */
.admin-console .grid-stats--four { grid-template-columns: 1fr; }
.admin-console .grid-charts { grid-template-columns: 1fr; }
.admin-console .grid-categories { grid-template-columns: 1fr; }

@container admin-main (min-width: 460px) {
  /* Enough room for a readable 2-up KPI / category layout. */
  .admin-console .grid-stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-console .grid-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container admin-main (min-width: 640px) {
  /* Charts sit side-by-side once the column is wide enough. */
  .admin-console .grid-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container admin-main (min-width: 880px) {
  /* Full 4-up KPI row + 4-up instrument cards only when the content area
     can actually hold four cards without clipping their values. */
  .admin-console .grid-stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-console .grid-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Adaptive heights & spacing (Approach B): charts and grid spacing
   scale down with viewport height so the console fits shorter laptop screens
   with far less (often no) scrolling, while clamp() guarantees the charts stay
   tall enough to read on very short screens. Scoped to .admin-console so other
   pages keep their fixed chart heights. ---------- */
.admin-console .chart-card__body { height: clamp(150px, 24dvh, 200px); }
.admin-console .chart-card__body--tall { height: clamp(190px, 34dvh, 320px); }

/* The base grids add a fixed bottom margin on top of the section's flex gap,
   which compounds the vertical space. Inside the admin console the flex gap
   already handles separation, so drop the extra margin and let the adaptive
   gap do the spacing. */
.admin-console .grid-stats,
.admin-console .grid-categories,
.admin-console .grid-charts,
.admin-console .chart-full { margin-bottom: 0; }
.admin-console .admin-section > .card { margin-bottom: 0; }

/* On short viewports (laptops, scaled displays) tighten card/stat padding so
   the stacked sections compress further before any scrolling is needed. */
@media (max-height: 820px) {
  .admin-console .stat-card { padding: var(--sp-3) var(--sp-4); }
  .admin-console .card { padding: var(--sp-4) var(--sp-5); }
  .admin-console .chart-card { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .admin-console .card__head,
  .admin-console .chart-card__head { margin-bottom: var(--sp-2); }
  .admin-console .stat-card .label { margin-bottom: 4px; }
}
@media (max-height: 680px) {
  .admin-console .stat-card__icon { width: 32px; height: 32px; }
  .admin-console .stat-card__icon svg { width: 16px; height: 16px; }
}

/* Admin mini-stats (plan / auth / tx-status breakdowns) reflow on the content
   width too. 2-up when the column is tight, 4-up when there is room — with the
   left divider rebuilt so it never sits at the start of a wrapped row. */
.admin-console .mini-stats--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) 0; }
.admin-console .mini-stats--admin .mini-stat { border-left: 0; padding-left: 0; }
.admin-console .mini-stats--admin .mini-stat:nth-child(even) {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--sp-4);
}
@container admin-main (min-width: 720px) {
  .admin-console .mini-stats--admin { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
  .admin-console .mini-stats--admin .mini-stat { border-left: 1px solid var(--border-subtle); padding-left: var(--sp-3); }
  .admin-console .mini-stats--admin .mini-stat:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Sections ---------- */
.admin-section { display: none; flex-direction: column; gap: clamp(var(--sp-3), 2.2dvh, var(--sp-6)); }
.admin-section.is-active { display: flex; }
.admin-section__sub { color: var(--text-secondary); margin-top: -4px; }

.admin-error {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--warning);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  font-weight: 500;
}

.mini-stats--admin { margin-bottom: 0; }

/* Stat-card icon: small chip on the LEFT, text (label/value/micro) flows to its
   right. Scoped to .admin-console so other pages' stat cards are untouched. */
.admin-console .stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--sp-3);
  /* Allow the metric "i" tooltip to escape the card bounds (base .stat-card uses
     overflow: hidden, which would clip the bubble shown above the label). */
  overflow: visible;
}
/* Inset the decorative top-line so it doesn't overhang the rounded corners now
   that the admin card no longer clips overflow. */
.admin-console .stat-card::after { left: var(--sp-5); right: var(--sp-5); }
/* Lift a card above its siblings while its tooltip is open so the bubble is not
   painted under the next card (sibling cards share the auto stacking level). */
.admin-console .stat-card:hover,
.admin-console .stat-card:has(.metric-info[aria-expanded="true"]) { z-index: 5; }
.stat-card__icon {
  grid-row: 1 / -1;
  align-self: center;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  pointer-events: none;
}
.stat-card__icon svg { width: 18px; height: 18px; }
.stat-card--accent .stat-card__icon { background: var(--accent); color: #fff; }
/* The label-row / value sit in the second grid column. */
.admin-console .stat-card .label-row,
.admin-console .stat-card .label,
.admin-console .stat-card .value { grid-column: 2; }
/* The text column must be allowed to shrink below its content size; without
   this a long KPI value (e.g. a big MRR figure) forces the 1fr track wider
   than the card and pushes the value past the rounded edge on narrow cards. */
.admin-console .stat-card .label-row,
.admin-console .stat-card .label,
.admin-console .stat-card .value { min-width: 0; }
/* Long numbers scale down a touch instead of clipping when a card is narrow
   (laptop / scaled displays). Caps at the normal 2xl size on roomy layouts. */
.admin-console .stat-card .value {
  font-size: clamp(var(--fs-lg), 4.5cqi, var(--fs-2xl));
  overflow-wrap: anywhere;
}

/* Icon chip next to a card title — scoped to admin so the shared .card__head
   on other pages keeps its original layout. Reset the base space-between so the
   title sits right NEXT TO the icon (not pushed to the far right). */
.admin-console .card__head,
.admin-console .chart-card__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
}
.admin-console .card__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-console .card__icon svg { width: 18px; height: 18px; }
.admin-console .chart-card__head .card__icon { width: 32px; height: 32px; }
.admin-console .chart-card__head .card__icon svg { width: 17px; height: 17px; }
.admin-console .card__head > div,
.admin-console .chart-card__head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Title + info "i" button row inside card / chart-card headers, mirroring the
   KPI stat-card .label-row so these section metrics get the same hover
   tooltip (the former visible subtitle now lives inside the "i" bubble). */
.admin-console .card__head .title-row,
.admin-console .chart-card__head .title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Colorful metric icons — tinted background + matching icon color per variant.
   Apply `.ic-<name>` alongside .stat-card__icon or .card__icon. Default (no
   variant) stays accent-blue. The accent stat-card keeps its solid fill. */
.admin-console .ic-blue   { background: rgba(37, 99, 235, 0.14);  color: #3b82f6; }
.admin-console .ic-green  { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.admin-console .ic-violet { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }
.admin-console .ic-amber  { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.admin-console .ic-pink   { background: rgba(236, 72, 153, 0.16); color: #ec4899; }
.admin-console .ic-cyan   { background: rgba(6, 182, 212, 0.16);  color: #22d3ee; }
.admin-console .ic-red    { background: rgba(239, 68, 68, 0.16);  color: #f87171; }
.admin-console .ic-teal   { background: rgba(20, 184, 166, 0.16); color: #2dd4bf; }
.admin-console .ic-indigo { background: rgba(99, 102, 241, 0.16); color: #818cf8; }
/* On the solid accent card the icon is a white-on-accent badge regardless. */
.stat-card--accent .stat-card__icon { background: rgba(255,255,255,0.22); color: #fff; }
/* In light mode the accent card background is a pale gradient, so a
   translucent-white badge with a white icon disappears. Use a solid accent
   badge so the icon stays visible. */
[data-theme="light"] .stat-card--accent .stat-card__icon {
  background: var(--accent);
  color: #fff;
}

/* Accent KPI card — highlight the business metric (Pro users). */
.stat-card--accent {
  border-color: var(--accent-ring);
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-card) 70%);
}
.stat-card--accent .value { color: var(--accent); }

/* At a glance — compact key/value grid summarizing every breakdown. */
.admin-glance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2) var(--sp-5);
}
.admin-glance__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
}
.admin-glance__k {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-glance__v {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.admin-glance__v.profit { color: var(--success-strong); }
.admin-glance__v.loss { color: var(--danger-strong); }

/* ---------- User tables ---------- */
/* Header: icon + title on the left, a right-aligned group (mini note + search). */
.admin-console .card__head--search { flex-wrap: wrap; }
.admin-console .card__head--search .card__title { margin-right: auto; }
.admin-console .card__head--search .admin-head-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.admin-head-note {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.admin-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.admin-search__icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.admin-search__input {
  width: 240px;
  max-width: 100%;
  padding: 9px var(--sp-3) 9px 32px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}
.admin-search__input:focus {
  outline: 2px solid var(--accent-ring);
  border-color: var(--accent);
}

/* Pagination footer under the users table. */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.admin-page-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-page-btn {
  padding: 7px var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.admin-page-btn:hover:not(:disabled) { background: var(--bg-row-hover); border-color: var(--border-default); }
.admin-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 560px) {
  .admin-search { width: 100%; margin-top: var(--sp-3); }
  .admin-search__input { width: 100%; }
}
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.admin-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--bg-row-hover); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table__empty { text-align: center; color: var(--text-tertiary); padding: var(--sp-6) var(--sp-3); }

.admin-user { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-user__name { color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.admin-user__email { color: var(--text-tertiary); font-size: 12px; display: flex; align-items: center; gap: 6px; }

.admin-plan {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.admin-plan--basic { background: var(--bg-elevated); color: var(--text-secondary); }
.admin-plan--pro { background: var(--accent-soft); color: var(--accent); }

.admin-pill { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-sm); }
.admin-pill--ok { background: rgba(52, 211, 153, 0.12); color: var(--success); }
.admin-pill--warn { background: var(--warning-soft); color: var(--warning); }
.admin-pill--danger { background: rgba(248, 113, 113, 0.12); color: var(--danger); }
.admin-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.admin-form__row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Saat dua form bersanding di grid (Record Transaction vs Subscription Price),
   grid menyamakan tinggi kedua kartu. Form lebih pendek dibuat mengisi tinggi
   kartu dan tombol submit didorong ke bawah supaya kedua tombol sejajar. */
.admin-console .grid-charts > .card { display: flex; flex-direction: column; }
.admin-console .grid-charts > .card > .admin-form { flex: 1 1 auto; }
.admin-console .grid-charts > .card > .admin-form [type="submit"] { margin-top: auto; }
.admin-form__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.admin-form__input {
  width: 100%;
  padding: 10px var(--sp-3);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}
.admin-form__input:focus {
  outline: 2px solid var(--accent-ring);
  border-color: var(--accent);
}
.admin-form__msg {
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(248, 113, 113, 0.1);
  border-radius: var(--r-md);
}
.admin-form__msg--ok {
  color: var(--success);
  background: rgba(52, 211, 153, 0.1);
}
.admin-form__hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 2px 0 0;
}

/* Billing page upgrade feedback message. */
.billing-msg {
  margin-top: var(--sp-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(248, 113, 113, 0.1);
  border-radius: var(--r-md);
}
.billing-msg--ok {
  color: var(--success);
  background: rgba(52, 211, 153, 0.1);
}
@media (max-width: 520px) {
  .admin-form__grid { grid-template-columns: 1fr; }
}

.admin-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 25;
}

/* ---------- Responsive: collapse sidebar into a drawer ---------- */
@media (max-width: 920px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-hamburger { display: inline-flex; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-main { padding: var(--sp-5) var(--sp-4) var(--sp-10); }
  .mini-stats--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) 0; }
  .mini-stats--admin .mini-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (min-width: 921px) {
  .admin-backdrop { display: none !important; }
}