/* =========================================================
   Kirim Digital ID Modern Dashboard Theme
   - Deep navy + slate dark background
   - Frosted glassmorphism cards
   - Vibrant accents: cyan, electric blue, soft purple
   - Glowing icons, ambient lighting
   - Dribbble/Behance inspired
   ========================================================= */

:root {
  /* Brand accents */
  --neon-cyan: #22d3ee;
  --neon-blue: #3b82f6;
  --neon-purple: #a78bfa;
  --neon-pink: #f472b6;
  --neon-green: #34d399;
  --neon-amber: #fbbf24;
  --neon-red: #f87171;

  /* Background tiers */
  --bg-base: #0a0e1a;
  --bg-deep: #060912;
  --bg-surface: #0f1424;
  --bg-elevated: #141b30;
  --bg-glass: rgba(20, 27, 48, 0.55);
  --bg-glass-strong: rgba(20, 27, 48, 0.78);

  /* Borders */
  --border-subtle: rgba(148, 163, 184, 0.08);
  --border-glass: rgba(148, 163, 184, 0.14);
  --border-bright: rgba(148, 163, 184, 0.22);
  --border-glow: rgba(34, 211, 238, 0.35);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Gradients */
  --grad-cyan-blue: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  --grad-blue-purple: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%);
  --grad-purple-pink: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
  --grad-cyan-purple: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
  --grad-green-cyan: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
  --grad-emerald-cyan: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); /* v3.6.11 — Pusat Keuangan */
  --grad-amber-red: linear-gradient(135deg, #fbbf24 0%, #f87171 100%);
  --grad-orange-pink: linear-gradient(135deg, #f97316 0%, #ec4899 100%); /* v3.6.11 — extra for variety */
  --grad-rose-orange: linear-gradient(135deg, #fb7185 0%, #f97316 100%);
  --grad-violet-blue: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  --grad-bg-radial: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.18), transparent 60%),
                    radial-gradient(ellipse 60% 40% at 90% 20%, rgba(167, 139, 250, 0.12), transparent 60%),
                    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(34, 211, 238, 0.10), transparent 60%);

  /* Shadows */
  --shadow-glow-cyan: 0 0 24px rgba(34, 211, 238, 0.35), 0 0 60px rgba(34, 211, 238, 0.15);
  --shadow-glow-blue: 0 0 24px rgba(59, 130, 246, 0.35), 0 0 60px rgba(59, 130, 246, 0.15);
  --shadow-glow-purple: 0 0 24px rgba(167, 139, 250, 0.35), 0 0 60px rgba(167, 139, 250, 0.15);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* v3.5.6 — Full-width header + floating layout (breathing room) */
  --ddc-header-h: 64px;
  --ddc-sidebar-w: 264px;                       /* 244 -> 264 (lebih lega, modern feel) */
  --ddc-gap: 16px;                              /* 14 -> 16 (gap antar panel lebih breathable) */
  --ddc-radius-lg: 16px;                        /* radius untuk sidebar floating panel */
}

/* ========================================================
   LIGHT MODE — v3.5.6 Premium Revision
   Modern, vibrant, readable. Solid surfaces with clear hierarchy.
   Inspired by Linear, Vercel, Stripe Dashboard.
   ======================================================== */
html.ddc-modern.ddc-light {
  /* Background tiers — cleaner whites with subtle blue undertone */
  --bg-base: #f8fafc;
  --bg-deep: #eef2f8;          /* slightly bluer than slate-50 for premium feel */
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  /* SOLID glass surfaces — no more washed-out transparent look */
  --bg-glass: #ffffff;
  --bg-glass-strong: #ffffff;

  /* Borders — clear, visible, modern */
  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-glass: rgba(15, 23, 42, 0.10);   /* main border, clearly visible */
  --border-bright: rgba(15, 23, 42, 0.16);
  --border-glow: rgba(59, 130, 246, 0.45);

  /* Text — HIGH CONTRAST hierarchy for excellent readability */
  --text-primary: #0b1220;          /* near-black with hint of navy */
  --text-secondary: #1e293b;        /* slate-800 — strong secondary */
  --text-muted: #475569;            /* slate-600 — readable muted */
  --text-dim: #64748b;              /* slate-500 — dim but still legible */

  /* Shadows — crisp, modern, layered (Linear/Vercel style) */
  --shadow-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 4px 14px -4px rgba(34, 211, 238, 0.35);
  --shadow-glow-blue: 0 0 0 1px rgba(59, 130, 246, 0.18), 0 4px 14px -4px rgba(59, 130, 246, 0.35);
  --shadow-glow-purple: 0 0 0 1px rgba(167, 139, 250, 0.18), 0 4px 14px -4px rgba(167, 139, 250, 0.35);
  --shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 8px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-card-hover:
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 10px 30px -10px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ========== Force theme on dashboard pages ========== */
html.ddc-modern,
html.ddc-modern body {
  background: var(--bg-deep);
  color: var(--text-primary);
  color-scheme: dark;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.ddc-modern.ddc-light,
html.ddc-modern.ddc-light body {
  color-scheme: light;
}

html.ddc-modern body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(167, 139, 250, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(34, 211, 238, 0.08), transparent 60%),
    var(--bg-deep);
  background-attachment: fixed;
  min-height: 100vh;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* v3.5.6 Light mode background — refined, less noisy, more premium
   Inspired by Linear/Stripe — clean canvas with subtle accent washes */
html.ddc-modern.ddc-light body {
  background:
    /* Top-right blue wash */
    radial-gradient(ellipse 60% 45% at 88% -10%, rgba(99, 102, 241, 0.12), transparent 60%),
    /* Bottom-left cyan wash */
    radial-gradient(ellipse 50% 40% at 5% 95%, rgba(14, 165, 233, 0.10), transparent 65%),
    /* Right-mid purple wash */
    radial-gradient(ellipse 35% 30% at 95% 60%, rgba(168, 85, 247, 0.08), transparent 60%),
    /* Base: soft slate */
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Universal override for legacy Tailwind classes inside .ddc-modern (DARK ONLY) */
html.ddc-modern:not(.ddc-light) .bg-white,
html.ddc-modern:not(.ddc-light) .dark\:bg-slate-900,
html.ddc-modern:not(.ddc-light) .dark\:bg-slate-800,
html.ddc-modern:not(.ddc-light) .bg-slate-50,
html.ddc-modern:not(.ddc-light) .dark\:bg-slate-950 {
  background: transparent !important;
}

html.ddc-modern:not(.ddc-light) .bg-white.rounded-2xl,
html.ddc-modern:not(.ddc-light) .dark\:bg-slate-900.rounded-2xl,
html.ddc-modern:not(.ddc-light) .bg-white.rounded-xl,
html.ddc-modern:not(.ddc-light) .dark\:bg-slate-900.rounded-xl {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glass) !important;
  box-shadow: var(--shadow-card), var(--shadow-inset);
}

html.ddc-modern .border-slate-200,
html.ddc-modern .dark\:border-slate-700,
html.ddc-modern .dark\:border-slate-800 {
  border-color: var(--border-glass) !important;
}

html.ddc-modern .text-slate-800,
html.ddc-modern .dark\:text-slate-100,
html.ddc-modern .text-slate-900 {
  color: var(--text-primary) !important;
}
html.ddc-modern .text-slate-600,
html.ddc-modern .dark\:text-slate-300,
html.ddc-modern .text-slate-700 {
  color: var(--text-secondary) !important;
}
html.ddc-modern .text-slate-500,
html.ddc-modern .text-slate-400 {
  color: var(--text-muted) !important;
}

html.ddc-modern:not(.ddc-light) .bg-slate-100,
html.ddc-modern:not(.ddc-light) .dark\:bg-slate-800\/60,
html.ddc-modern:not(.ddc-light) .bg-slate-50.dark\:bg-slate-800,
html.ddc-modern:not(.ddc-light) table thead {
  background: rgba(20, 27, 48, 0.4) !important;
}

html.ddc-modern .divide-slate-100,
html.ddc-modern .dark\:divide-slate-700,
html.ddc-modern .dark\:divide-slate-800 {
  border-color: var(--border-subtle) !important;
}

html.ddc-modern:not(.ddc-light) input,
html.ddc-modern:not(.ddc-light) textarea,
html.ddc-modern:not(.ddc-light) select {
  background: rgba(15, 20, 36, 0.6) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-primary) !important;
}
html.ddc-modern input:focus,
html.ddc-modern textarea:focus,
html.ddc-modern select:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
  outline: none;
}

/* =========================================================================
   v3.5.6 — FULL-WIDTH PREMIUM HEADER
   Edge-to-edge fixed header. Logo on the leftmost. Sidebar starts BELOW header.
   Dribbble/Linear/Vercel-grade polish.
   ========================================================================= */
.ddc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ddc-header-h);
  z-index: 50;                                          /* above sidebar (z=35) */
  background: linear-gradient(180deg,
              rgba(10, 14, 26, 0.92) 0%,
              rgba(10, 14, 26, 0.86) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border-glass);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,           /* subtle highlight on top */
    0 6px 24px -8px rgba(0, 0, 0, 0.55);                /* soft drop shadow */
  display: flex;
  align-items: stretch;
  user-select: none;
}

/* Inner container — fills full width edge-to-edge */
.ddc-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  gap: 16px;
}

/* Animated accent line at the very bottom of header — premium signature */
.ddc-header-accent {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(34, 211, 238, 0.35) 20%,
              rgba(167, 139, 250, 0.5) 50%,
              rgba(244, 114, 182, 0.35) 80%,
              transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- HEADER LEFT: mobile toggle + brand ---------- */
.ddc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
  /* Equal width to sidebar so brand aligns with sidebar column on desktop */
  width: calc(var(--ddc-sidebar-w) - 20px);
}

/* Mobile hamburger — hidden on desktop */
.ddc-header .ddc-mobile-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(20, 27, 48, 0.6);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}
.ddc-header .ddc-mobile-toggle:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

/* Brand — logo paling kiri + text */
.ddc-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
  min-width: 0;
  flex: 1;
}
.ddc-header-brand:hover { background: rgba(34, 211, 238, 0.05); }

/* Logo block — premium gradient with glow */
.ddc-header-logo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--grad-cyan-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  position: relative;
  box-shadow:
    0 4px 14px -2px rgba(34, 211, 238, 0.5),
    0 0 0 1px rgba(34, 211, 238, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
/* Logo glow — pulsing ambient ring */
.ddc-header-logo-glow {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.4), transparent 60%);
  filter: blur(8px);
  opacity: 0.6;
  z-index: -1;
  animation: ddc-header-pulse 4s ease-in-out infinite;
}
@keyframes ddc-header-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.08); }
}
/* Super admin mode — purple/pink gradient */
.ddc-header[data-mode="super"] .ddc-header-logo,
body:has(aside.ddc-sidebar) .ddc-header-logo { /* default cyan */ }

/* Brand text — title + subtitle */
.ddc-header-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  flex: 1;
}
.ddc-header-brand-title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ddc-header-brand-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

/* Vertical divider after brand (visual separator before search column) */
.ddc-header-brand-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, var(--border-glass), transparent);
  margin-left: auto;
}

/* ---------- HEADER CENTER: global search ---------- */
.ddc-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.ddc-header-search {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.ddc-header-search input {
  width: 100%;
  height: 38px;
  padding: 0 42px 0 38px;
  border-radius: 10px;
  background: rgba(15, 20, 36, 0.7) !important;
  border: 1px solid var(--border-glass) !important;
  color: var(--text-primary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.ddc-header-search input::placeholder { color: var(--text-dim); }
.ddc-header-search input:focus {
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.12),
    0 4px 14px -4px rgba(34, 211, 238, 0.25) !important;
  outline: none;
  background: rgba(15, 20, 36, 0.95) !important;
}
.ddc-header-search-icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
  transition: color 0.2s ease;
}
.ddc-header-search input:focus ~ .ddc-header-search-icon,
.ddc-header-search:focus-within .ddc-header-search-icon { color: var(--neon-cyan); }

/* Keyboard shortcut hint */
.ddc-header-search-kbd {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--border-glass);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* ---------- HEADER RIGHT: actions + profile ---------- */
.ddc-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Action buttons */
.ddc-header-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(20, 27, 48, 0.6);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.ddc-header-btn:hover {
  border-color: rgba(34, 211, 238, 0.5);
  color: var(--neon-cyan);
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 4px 14px -4px rgba(34, 211, 238, 0.4);
  transform: translateY(-1px);
}
.ddc-header-btn:active { transform: translateY(0); }

/* Logout button — danger hover */
.ddc-header-btn-logout:hover {
  border-color: rgba(244, 114, 182, 0.6) !important;
  color: var(--neon-pink) !important;
  background: rgba(244, 114, 182, 0.08) !important;
  box-shadow: 0 4px 14px -4px rgba(244, 114, 182, 0.4) !important;
}

/* Notification badge */
.ddc-header-btn-notif .ddc-notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f472b6, #ec4899);
  color: white;
  font-size: 9px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(10, 14, 26, 1);
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.6);
}

/* Vertical divider between actions and profile */
.ddc-header-divider {
  width: 1px;
  height: 24px;
  background: var(--border-glass);
  margin: 0 6px;
}

/* Profile button — avatar + name + role + caret */
.ddc-header-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  height: 40px;
  border-radius: 12px;
  background: rgba(20, 27, 48, 0.4);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  max-width: 220px;
}
.ddc-header-profile:hover {
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-1px);
}
.ddc-header-avatar {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--grad-purple-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow:
    0 2px 8px rgba(167, 139, 250, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ddc-header-profile-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  text-align: left;
}
.ddc-header-profile-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.ddc-header-profile-role {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 1px;
}
.ddc-header-profile-caret {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 2px;
  transition: transform 0.2s ease;
}
.ddc-header-profile:hover .ddc-header-profile-caret { color: var(--neon-cyan); }

/* ---------- HEADER — RESPONSIVE ---------- */
@media (max-width: 1199px) {
  .ddc-header-profile-text { display: none; }
  .ddc-header-profile-caret { display: none; }
  .ddc-header-profile { padding: 4px; }
}
@media (max-width: 1023px) {
  .ddc-header-inner { padding: 0 14px; gap: 10px; }
  .ddc-header-left { width: auto; flex: 0 0 auto; }
  .ddc-header-brand-text { display: none; }
  .ddc-header-brand-divider { display: none; }
  .ddc-header .ddc-mobile-toggle { display: flex; }
  .ddc-header-search-kbd { display: none; }
  .ddc-header-center { max-width: 320px; }
}
@media (max-width: 720px) {
  .ddc-header-center { display: none; }   /* hide search on phones */
  .ddc-header-right { gap: 4px; }
  .ddc-header-btn { width: 36px; height: 36px; font-size: 14px; }
  #ddc-help-btn { display: none; }         /* extra trim on phones */
}

/* ---------- HEADER — LIGHT MODE (v3.5.6 Premium, Linear/Vercel inspired) ---------- */
html.ddc-modern.ddc-light .ddc-header {
  /* SOLID WHITE — no more washed-out look */
  background: #ffffff;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid #e2e8f0;          /* slate-200 — clearly visible */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 12px -4px rgba(15, 23, 42, 0.06);
}
/* Brand title — strong dark text */
html.ddc-modern.ddc-light .ddc-header-brand-title {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
html.ddc-modern.ddc-light .ddc-header-brand-sub {
  color: #64748b;
  font-weight: 600;
}
html.ddc-modern.ddc-light .ddc-header-brand:hover {
  background: rgba(59, 130, 246, 0.04);
}
html.ddc-modern.ddc-light .ddc-header-brand-divider {
  background: linear-gradient(180deg, transparent, #cbd5e1, transparent);
}
/* Search — solid surface with subtle inner shadow */
html.ddc-modern.ddc-light .ddc-header-search input {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
html.ddc-modern.ddc-light .ddc-header-search input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}
html.ddc-modern.ddc-light .ddc-header-search input:focus {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.12),
    0 0 0 1px rgba(59, 130, 246, 0.4) !important;
}
html.ddc-modern.ddc-light .ddc-header-search:focus-within .ddc-header-search-icon {
  color: #3b82f6;
}
html.ddc-modern.ddc-light .ddc-header-search-kbd {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
  font-weight: 700;
}
/* Action buttons — clean, crisp */
html.ddc-modern.ddc-light .ddc-header-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}
html.ddc-modern.ddc-light .ddc-header-btn:hover {
  background: #ffffff;
  border-color: #3b82f6;
  color: #2563eb;
  box-shadow:
    0 2px 6px rgba(59, 130, 246, 0.15),
    0 0 0 3px rgba(59, 130, 246, 0.08);
}
html.ddc-modern.ddc-light .ddc-header-btn-logout:hover {
  background: #fff1f2 !important;
  border-color: #fb7185 !important;
  color: #e11d48 !important;
  box-shadow:
    0 2px 6px rgba(244, 63, 94, 0.15),
    0 0 0 3px rgba(244, 63, 94, 0.08) !important;
}
html.ddc-modern.ddc-light .ddc-header-btn-notif .ddc-notif-badge {
  border-color: #ffffff;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.3);
}
html.ddc-modern.ddc-light .ddc-header-divider {
  background: #e2e8f0;
}
/* Profile button */
html.ddc-modern.ddc-light .ddc-header-profile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}
html.ddc-modern.ddc-light .ddc-header-profile:hover {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow:
    0 2px 6px rgba(59, 130, 246, 0.12),
    0 0 0 3px rgba(59, 130, 246, 0.06);
}
html.ddc-modern.ddc-light .ddc-header-profile-name {
  color: #0f172a;
  font-weight: 700;
}
html.ddc-modern.ddc-light .ddc-header-profile-role {
  color: #64748b;
  font-weight: 600;
}
html.ddc-modern.ddc-light .ddc-header-profile-caret { color: #94a3b8; }
html.ddc-modern.ddc-light .ddc-header-profile:hover .ddc-header-profile-caret { color: #3b82f6; }
html.ddc-modern.ddc-light .ddc-header .ddc-mobile-toggle {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}
html.ddc-modern.ddc-light .ddc-header .ddc-mobile-toggle:hover {
  background: #ffffff;
  border-color: #3b82f6;
  color: #2563eb;
}
/* Header accent line — softer in light mode */
html.ddc-modern.ddc-light .ddc-header-accent {
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(59, 130, 246, 0.4) 25%,
              rgba(168, 85, 247, 0.5) 50%,
              rgba(236, 72, 153, 0.4) 75%,
              transparent 100%);
  opacity: 0.5;
}

/* ========== SIDEBAR (v3.5.6 — floating panel below header, with breathing room) ========== */
.ddc-sidebar {
  position: fixed;
  /* Floating panel: gap from header & viewport edges */
  top: calc(var(--ddc-header-h) + var(--ddc-gap));
  left: var(--ddc-gap);
  bottom: var(--ddc-gap);
  width: var(--ddc-sidebar-w);
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.92), rgba(6, 9, 18, 0.97));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-glass);
  border-radius: var(--ddc-radius-lg);
  padding: 14px 10px;
  z-index: 35;                                  /* below header (z=50) but above main */
  display: flex;
  flex-direction: column;
  /* v3.5.8: sidebar itself must NOT scroll — toggle button protrudes to right,
     and inner .ddc-sidebar-scroll handles vertical scroll if ever needed.
     overflow:visible avoids horizontal scrollbar caused by toggle's right:-12px */
  overflow: visible;
  box-shadow:
    0 12px 36px -8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Scrollbar styling kept only for inner .ddc-sidebar-scroll (sidebar root is overflow:visible) */

.ddc-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin-bottom: 16px;
}
.ddc-brand-logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--grad-cyan-blue);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
  box-shadow: var(--shadow-glow-cyan);
  position: relative;
}
.ddc-brand-logo::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%);
  pointer-events: none;
}
.ddc-brand-title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ddc-brand-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

.ddc-nav-section {
  margin-top: 14px;
  margin-bottom: 4px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.ddc-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.18s ease;
  position: relative;
}
.ddc-nav-item:hover {
  background: rgba(34, 211, 238, 0.06);
  color: var(--text-primary);
}
.ddc-nav-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.ddc-nav-item:hover .ddc-nav-icon {
  background: rgba(34, 211, 238, 0.12);
  color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}
.ddc-nav-item.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(59, 130, 246, 0.06) 60%, transparent);
  color: var(--text-primary);
}
.ddc-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--grad-cyan-blue);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px var(--neon-cyan);
}
.ddc-nav-item.active .ddc-nav-icon {
  background: var(--grad-cyan-blue);
  color: white;
  box-shadow: var(--shadow-glow-cyan);
}
.ddc-nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(244, 114, 182, 0.15);
  color: var(--neon-pink);
}

.ddc-sidebar-footer {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 14px;
  padding-top: 14px;
}
.ddc-upgrade-card {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(59, 130, 246, 0.10));
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ddc-upgrade-card::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.3), transparent 50%);
  animation: ddc-rotate 8s linear infinite;
  pointer-events: none;
}
@keyframes ddc-rotate {
  to { transform: rotate(360deg); }
}
.ddc-upgrade-card > * { position: relative; z-index: 1; }

/* ========== TOPBAR ========== */
.ddc-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border-glass);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.ddc-topbar-search {
  position: relative;
  max-width: 420px;
  flex: 1;
}
.ddc-topbar-search input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border-radius: 10px;
  background: rgba(15, 20, 36, 0.7) !important;
  border: 1px solid var(--border-glass) !important;
  color: var(--text-primary) !important;
  font-size: 13px;
}
.ddc-topbar-search i {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}
.ddc-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ddc-topbar-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(20, 27, 48, 0.6);
  border: 1px solid var(--border-glass);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.18s ease;
  position: relative;
}
.ddc-topbar-btn:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.2);
}
.ddc-notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--neon-pink);
  color: white;
  font-size: 9px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.6);
  border: 1.5px solid var(--bg-deep);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* v3.6.14 — subtle pulse animation when there are unread notifs */
.ddc-notif-badge.has-unread {
  animation: ddc-notif-pulse 1.8s ease-in-out infinite;
}
@keyframes ddc-notif-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(244, 114, 182, 0.6); }
  50%      { transform: scale(1.15); box-shadow: 0 0 18px rgba(244, 114, 182, 0.95); }
}
.ddc-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--grad-purple-pink);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-glow-purple);
}

/* ========== MAIN CONTENT AREA (v3.5.6 — breathing room around sidebar & header) ========== */
.ddc-main {
  /* Total margin-left = sidebar gap + sidebar width + gap to content */
  margin-left: calc(var(--ddc-gap) + var(--ddc-sidebar-w) + var(--ddc-gap));
  /* margin-top = header height + gap below header */
  margin-top: calc(var(--ddc-header-h) + var(--ddc-gap));
  /* right margin = symmetry with sidebar gap */
  margin-right: var(--ddc-gap);
  min-height: calc(100vh - var(--ddc-header-h) - var(--ddc-gap) * 2);
  padding: 0 0 48px;
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.ddc-page {
  /* Comfortable inner padding for content */
  padding: 8px 18px 0;
}
@media (max-width: 1023px) {
  .ddc-sidebar {
    transform: translateX(-100%);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
    /* Mobile: full-height drawer (no top/bottom gap), starts below header */
    top: var(--ddc-header-h);
    left: 0;
    bottom: 0;
    border-radius: 0;
    border-left: none;
  }
  .ddc-sidebar.open { transform: translateX(0); }
  .ddc-main {
    margin-left: 0;
    margin-right: 0;
    margin-top: calc(var(--ddc-header-h) + 10px);
  }
  .ddc-page { padding: 0 14px; }
}

/* ========== GLASS CARD (the core widget) ========== */
.ddc-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  box-shadow: var(--shadow-card), var(--shadow-inset);
  position: relative;
  overflow: hidden;
}
.ddc-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 30%);
  pointer-events: none;
  border-radius: inherit;
}
.ddc-glass.interactive {
  transition: all 0.25s ease;
  cursor: pointer;
}
.ddc-glass.interactive:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  box-shadow: var(--shadow-card-hover), var(--shadow-inset);
}

/* ========== KPI CARD (Modern with isometric feel) ========== */
.ddc-kpi {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.25s ease;
}
.ddc-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.ddc-kpi::after {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--kpi-glow, radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%));
  pointer-events: none;
  filter: blur(20px);
}
.ddc-kpi:hover {
  transform: translateY(-3px);
  border-color: var(--border-bright);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.ddc-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.ddc-kpi-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--kpi-icon-bg, var(--grad-cyan-blue));
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 16px;
  box-shadow: var(--kpi-icon-shadow, var(--shadow-glow-cyan));
  position: relative;
}
.ddc-kpi-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent 50%);
}
.ddc-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.ddc-kpi-trend.up {
  background: rgba(52, 211, 153, 0.12);
  color: var(--neon-green);
}
.ddc-kpi-trend.down {
  background: rgba(248, 113, 113, 0.12);
  color: var(--neon-red);
}
.ddc-kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.ddc-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.ddc-kpi-sub {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* KPI color variants */
.ddc-kpi[data-accent="cyan"]    { --kpi-icon-bg: var(--grad-cyan-blue); --kpi-icon-shadow: var(--shadow-glow-cyan); --kpi-glow: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 70%); }
.ddc-kpi[data-accent="blue"]    { --kpi-icon-bg: var(--grad-blue-purple); --kpi-icon-shadow: var(--shadow-glow-blue); --kpi-glow: radial-gradient(circle, rgba(59, 130, 246, 0.22), transparent 70%); }
.ddc-kpi[data-accent="purple"]  { --kpi-icon-bg: var(--grad-purple-pink); --kpi-icon-shadow: var(--shadow-glow-purple); --kpi-glow: radial-gradient(circle, rgba(167, 139, 250, 0.22), transparent 70%); }
.ddc-kpi[data-accent="green"]   { --kpi-icon-bg: var(--grad-green-cyan); --kpi-icon-shadow: 0 0 24px rgba(52, 211, 153, 0.35); --kpi-glow: radial-gradient(circle, rgba(52, 211, 153, 0.22), transparent 70%); }
.ddc-kpi[data-accent="amber"]   { --kpi-icon-bg: var(--grad-amber-red); --kpi-icon-shadow: 0 0 24px rgba(251, 191, 36, 0.35); --kpi-glow: radial-gradient(circle, rgba(251, 191, 36, 0.22), transparent 70%); }
.ddc-kpi[data-accent="pink"]    { --kpi-icon-bg: var(--grad-purple-pink); --kpi-icon-shadow: 0 0 24px rgba(244, 114, 182, 0.35); --kpi-glow: radial-gradient(circle, rgba(244, 114, 182, 0.22), transparent 70%); }

/* ========== PAGE TITLE — v3.6.4: title is NON-sticky now (user request).
   Only the filter bar below stays sticky; this keeps the title scrolling
   normally with content, leaving less vertical chrome glued to the top.
   Glass background + negative side margins are kept so the header still
   feels integrated with the page-bg, just without the sticky behavior. */
.ddc-page-header {
  position: relative;          /* was: sticky — now scrolls with content */
  z-index: 1;                  /* sit naturally above content, no stacking concerns */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 8px 12px;
  /* Glass background retained for visual continuity even when not sticky */
  background: linear-gradient(180deg,
    rgba(10, 14, 26, 0.55) 0%,
    rgba(10, 14, 26, 0.30) 75%,
    rgba(10, 14, 26, 0.0) 100%);
  /* Negative side margin so glass extends to page edges */
  margin-left: -8px;
  margin-right: -8px;
}
.ddc-page-header::after {
  /* Subtle bottom border — kept for visual separation, no longer tied to sticky */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent);
}
/* Legacy class hook from JS observer — keep no-op for backwards compatibility */
.ddc-page-header.is-stuck::after { opacity: 1; }
.ddc-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ddc-page-title-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--grad-cyan-blue);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 15px;
  box-shadow: var(--shadow-glow-cyan);
}
.ddc-page-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
  margin-left: 48px;
}

/* Sticky filter toolbar — sits DIRECTLY below the sticky topbar (v3.6.4).
   Per user request, only the filter bar stays sticky now (page-header scrolls
   normally). top = --ddc-header-h (64px) since there is no longer a sticky
   page-header offset to add. */
.ddc-page-filter-bar {
  position: sticky;
  top: var(--ddc-header-h, 64px);
  z-index: 28;
  margin: -4px -8px 16px;
  padding: 10px 8px 12px;
  background: linear-gradient(180deg,
    rgba(10, 14, 26, 0.96) 0%,
    rgba(10, 14, 26, 0.88) 75%,
    rgba(10, 14, 26, 0.0) 100%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.ddc-page-filter-bar::after {
  /* Subtle bottom hairline when content scrolls underneath */
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.22), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ddc-page-filter-bar.is-stuck::after { opacity: 1; }
.ddc-page-filter-bar > * { margin: 0 !important; }

/* Light mode adjustment for sticky bars */
html.ddc-modern.ddc-light .ddc-page-header {
  background: linear-gradient(180deg,
    rgba(245, 248, 253, 0.96) 0%,
    rgba(245, 248, 253, 0.85) 70%,
    rgba(245, 248, 253, 0.0) 100%);
}
html.ddc-modern.ddc-light .ddc-page-header::after {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.14), transparent);
}
html.ddc-modern.ddc-light .ddc-page-filter-bar {
  background: linear-gradient(180deg,
    rgba(245, 248, 253, 0.94) 0%,
    rgba(245, 248, 253, 0.80) 75%,
    rgba(245, 248, 253, 0.0) 100%);
}

/* Mobile: reduce padding & compress title icon. v3.6.4: filter-bar `top` follows
   the new non-sticky-title rule — anchored directly below topbar (no extra offset). */
@media (max-width: 720px) {
  .ddc-page-header { padding: 10px 6px 8px; margin-bottom: 10px; margin-left: -6px; margin-right: -6px; }
  .ddc-page-title { font-size: 18px; gap: 10px; }
  .ddc-page-title-icon { width: 32px; height: 32px; font-size: 13px; }
  .ddc-page-sub { font-size: 11.5px; margin-left: 42px; }
  .ddc-page-filter-bar { top: var(--ddc-header-h, 64px); margin: -2px -6px 12px; padding: 8px 6px 10px; }
}

/* ========== BUTTONS (modern) ========== */
.ddc-modern-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-glass);
  background: rgba(20, 27, 48, 0.6);
  color: var(--text-secondary);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.ddc-modern-btn:hover {
  background: rgba(20, 27, 48, 0.85);
  color: var(--text-primary);
  border-color: var(--border-bright);
}
.ddc-modern-btn.primary {
  background: var(--grad-cyan-blue);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
}
.ddc-modern-btn.primary:hover {
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.45);
  transform: translateY(-1px);
}
.ddc-modern-btn.purple {
  background: var(--grad-blue-purple);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

/* ========== TABLE (modern dark) ========== */
html.ddc-modern table { color: var(--text-secondary); }
html.ddc-modern table thead {
  background: rgba(15, 20, 36, 0.5) !important;
  border-bottom: 1px solid var(--border-glass);
}
html.ddc-modern table thead th {
  color: var(--text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html.ddc-modern table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
html.ddc-modern table tbody tr:hover {
  background: rgba(34, 211, 238, 0.04) !important;
}
html.ddc-modern code {
  background: rgba(20, 27, 48, 0.7);
  color: var(--neon-cyan);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ========== SEGMENT PILLS (override for dark) ========== */
html.ddc-modern .ddc-pill {
  background: rgba(20, 27, 48, 0.6) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-secondary) !important;
}
html.ddc-modern .ddc-pill:hover {
  border-color: var(--neon-cyan) !important;
  color: var(--text-primary) !important;
}
html.ddc-modern .ddc-pill-active {
  background: var(--grad-cyan-blue) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow-cyan) !important;
}
html.ddc-modern .ddc-pill-count {
  background: rgba(15, 20, 36, 0.7) !important;
  color: var(--text-muted) !important;
}
html.ddc-modern .ddc-pill-active .ddc-pill-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: white !important;
}

/* ========== SEGMENT BADGES (refresh colors) ========== */
html.ddc-modern .ddc-seg-vip {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  color: white !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}
html.ddc-modern .ddc-seg-repeat {
  background: rgba(52, 211, 153, 0.15) !important;
  color: var(--neon-green) !important;
  border: 1px solid rgba(52, 211, 153, 0.3);
}
html.ddc-modern .ddc-seg-new {
  background: rgba(34, 211, 238, 0.15) !important;
  color: var(--neon-cyan) !important;
  border: 1px solid rgba(34, 211, 238, 0.3);
}
html.ddc-modern .ddc-seg-churned {
  background: rgba(148, 163, 184, 0.15) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
html.ddc-modern .ddc-seg-one_time {
  background: rgba(167, 139, 250, 0.12) !important;
  color: var(--neon-purple) !important;
  border: 1px solid rgba(167, 139, 250, 0.25);
}

/* ========== Bento card refresh for dark ========== */
html.ddc-modern .ddc-bento-card {
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ========== MOBILE SIDEBAR TOGGLE ========== */
.ddc-mobile-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(20, 27, 48, 0.6);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  align-items: center; justify-content: center;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .ddc-mobile-toggle { display: inline-flex; }
}

/* Sidebar backdrop on mobile — v3.5.9 fix: z-index BELOW sidebar (34 < 36)
   to prevent blur effect from being applied on top of sidebar content. */
.ddc-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--ddc-header-h);  /* don't cover header */
  background: rgba(0,0,0,0.55);
  z-index: 34;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ddc-backdrop-fadein 0.24s ease;
}
.ddc-sidebar-backdrop.open { display: block; }
@keyframes ddc-backdrop-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Ensure sidebar sits ABOVE the backdrop when open on mobile */
@media (max-width: 1023px) {
  .ddc-sidebar { z-index: 36; }
  .ddc-sidebar.open { z-index: 36; }
}

/* ========== MODAL refresh ========== */
html.ddc-modern .ddc-modal-content {
  background: var(--bg-glass-strong) !important;
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-glass) !important;
}

/* ========== TOAST refresh ========== */
html.ddc-modern .ddc-toast {
  background: var(--bg-glass-strong) !important;
  backdrop-filter: blur(20px);
  border-color: var(--border-glass) !important;
  color: var(--text-primary) !important;
}

/* ========== Hide old navbar in modern mode ========== */
html.ddc-modern header.sticky {
  display: none !important;
}
html.ddc-modern main {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.ddc-modern footer.mt-12,
html.ddc-modern footer.mt-20 {
  display: none !important;
}

/* Plan banner remains visible but adapt */
html.ddc-modern #shop-banner {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(167, 139, 250, 0.10)) !important;
  border: 1px solid rgba(34, 211, 238, 0.25);
  backdrop-filter: blur(12px);
}

/* Make Chart.js canvases blend */
html.ddc-modern canvas { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.1)); }

/* ========== Old tab bar — hide (we use sidebar now) ========== */
html.ddc-modern nav.bg-white.rounded-2xl {
  display: none !important;
}

/* Shop banner: hide URL prefix box look, keep visible */
html.ddc-modern #shop-banner .bg-white\/20 {
  background: rgba(255,255,255,0.1) !important;
}

/* ========== Gradient KPI cards override on Overview (legacy) ========== */
html.ddc-modern .bg-gradient-to-br.from-orange-500.to-red-500 {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
}

/* Better scrollbar */
html.ddc-modern ::-webkit-scrollbar { width: 8px; height: 8px; }
html.ddc-modern ::-webkit-scrollbar-track { background: transparent; }
html.ddc-modern ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.ddc-modern ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.32);
  background-clip: padding-box;
}

/* Selection */
html.ddc-modern ::selection {
  background: rgba(34, 211, 238, 0.35);
  color: white;
}

/* ============================================================
   LIGHT MODE COMPONENT OVERRIDES
   Catches surfaces where the dark scheme used hardcoded rgba/color
   ============================================================ */

/* ---------- SIDEBAR — LIGHT MODE (v3.5.6 Premium) ---------- */
html.ddc-modern.ddc-light .ddc-sidebar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 8px 24px -8px rgba(15, 23, 42, 0.10);
}
/* Nav item — better readable colors */
html.ddc-modern.ddc-light .ddc-nav-item {
  color: #334155;          /* slate-700 — dark, readable */
  font-weight: 500;
}
html.ddc-modern.ddc-light .ddc-nav-icon {
  background: #f1f5f9;     /* slate-100 */
  color: #64748b;          /* slate-500 */
}
html.ddc-modern.ddc-light .ddc-nav-item:hover {
  background: #f1f5f9;     /* slate-100 — neutral hover */
  color: #0f172a;
}
html.ddc-modern.ddc-light .ddc-nav-item:hover .ddc-nav-icon {
  background: rgba(59, 130, 246, 0.10);
  color: #3b82f6;
  box-shadow: none;
}
/* Active state — VIVID gradient with strong color */
html.ddc-modern.ddc-light .ddc-nav-item.active {
  background: linear-gradient(90deg,
              rgba(59, 130, 246, 0.10) 0%,
              rgba(99, 102, 241, 0.06) 60%,
              transparent 100%);
  color: #1e40af;          /* blue-800 — strong active color */
  font-weight: 600;
}
html.ddc-modern.ddc-light .ddc-nav-item.active::before {
  background: linear-gradient(180deg, #3b82f6, #6366f1);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}
html.ddc-modern.ddc-light .ddc-nav-item.active .ddc-nav-icon {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  box-shadow:
    0 4px 12px -2px rgba(59, 130, 246, 0.5),
    0 0 0 1px rgba(59, 130, 246, 0.3);
}
/* Nav section header */
html.ddc-modern.ddc-light .ddc-nav-section {
  color: #64748b;
  font-weight: 700;
}
/* Sub-items */
html.ddc-modern.ddc-light .ddc-nav-subitem {
  color: #475569;
}
html.ddc-modern.ddc-light .ddc-nav-subitem:hover {
  background: #f1f5f9;
  color: #0f172a;
}
html.ddc-modern.ddc-light .ddc-nav-subitem.active {
  background: rgba(59, 130, 246, 0.08);
  color: #1e40af;
  font-weight: 600;
}
/* Badge — NEW pill */
html.ddc-modern.ddc-light .ddc-nav-badge {
  background: rgba(236, 72, 153, 0.12);
  color: #be185d;
  font-weight: 700;
}
/* Sidebar search */
html.ddc-modern.ddc-light .ddc-sidebar-search input {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.ddc-modern.ddc-light .ddc-sidebar-search input:focus {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar-search input::placeholder { color: #94a3b8; }
html.ddc-modern.ddc-light .ddc-sidebar-search-icon { color: #64748b; }
html.ddc-modern.ddc-light .ddc-sidebar-search-kbd {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
/* Footer (upgrade card) */
html.ddc-modern.ddc-light .ddc-sidebar-footer {
  border-top: 1px solid #e2e8f0;
}
html.ddc-modern.ddc-light .ddc-upgrade-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.20);
}

/* Topbar in light mode */
html.ddc-modern.ddc-light .ddc-topbar {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--border-glass);
}
html.ddc-modern.ddc-light .ddc-topbar-search input {
  background: rgba(248, 250, 252, 0.9) !important;
}
html.ddc-modern.ddc-light .ddc-topbar-btn {
  background: rgba(248, 250, 252, 0.9);
  color: var(--text-secondary);
}
html.ddc-modern.ddc-light .ddc-topbar-btn:hover {
  background: white;
  color: var(--neon-blue);
  border-color: var(--neon-cyan);
}

/* Notification badge border tweak (dark blue ring → white ring) */
html.ddc-modern.ddc-light .ddc-notif-badge {
  border-color: white;
}

/* ---------- CARDS — LIGHT MODE (v3.5.6 Premium, solid white with crisp borders) ---------- */
html.ddc-modern.ddc-light .ddc-glass,
html.ddc-modern.ddc-light .ddc-kpi {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.04);
  backdrop-filter: none;       /* no blur needed for solid bg */
  -webkit-backdrop-filter: none;
}
html.ddc-modern.ddc-light .ddc-glass::before,
html.ddc-modern.ddc-light .ddc-kpi::before {
  display: none;               /* hide dark-mode highlight overlay */
}
html.ddc-modern.ddc-light .ddc-glass:hover,
html.ddc-modern.ddc-light .ddc-kpi:hover {
  border-color: #cbd5e1;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 10px 30px -10px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

/* Modern button bg + border */
html.ddc-modern.ddc-light .ddc-modern-btn {
  background: rgba(248, 250, 252, 0.9);
  color: var(--text-secondary);
  border-color: var(--border-glass);
}
html.ddc-modern.ddc-light .ddc-modern-btn:hover {
  background: white;
  color: var(--text-primary);
  border-color: var(--border-bright);
}

/* Form inputs / textareas / selects in light */
html.ddc-modern.ddc-light input[type="text"],
html.ddc-modern.ddc-light input[type="email"],
html.ddc-modern.ddc-light input[type="password"],
html.ddc-modern.ddc-light input[type="search"],
html.ddc-modern.ddc-light input[type="url"],
html.ddc-modern.ddc-light input[type="number"],
html.ddc-modern.ddc-light input[type="date"],
html.ddc-modern.ddc-light input[type="datetime-local"],
html.ddc-modern.ddc-light input:not([type]),
html.ddc-modern.ddc-light select,
html.ddc-modern.ddc-light textarea {
  background: white !important;
  border-color: var(--border-glass) !important;
  color: var(--text-primary) !important;
}
html.ddc-modern.ddc-light input::placeholder,
html.ddc-modern.ddc-light textarea::placeholder {
  color: var(--text-dim) !important;
}

/* Table light mode — clear hierarchy */
html.ddc-modern.ddc-light table thead {
  background: #f8fafc !important;
}
html.ddc-modern.ddc-light table thead th {
  color: #475569 !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.ddc-modern.ddc-light table tbody tr {
  border-color: #f1f5f9 !important;
}
html.ddc-modern.ddc-light table tbody tr:hover {
  background: #f8fafc !important;
}
html.ddc-modern.ddc-light table tbody td {
  color: #1e293b !important;
}

/* Tailwind utility class overrides for light mode — solid white cards */
html.ddc-modern.ddc-light .bg-white.rounded-2xl,
html.ddc-modern.ddc-light .dark\:bg-slate-900.rounded-2xl,
html.ddc-modern.ddc-light .bg-white.rounded-xl,
html.ddc-modern.ddc-light .dark\:bg-slate-900.rounded-xl {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.ddc-modern.ddc-light .bg-slate-100,
html.ddc-modern.ddc-light .dark\:bg-slate-800\/60 {
  background: #f1f5f9 !important;
}
html.ddc-modern.ddc-light .bg-slate-50,
html.ddc-modern.ddc-light .dark\:bg-slate-800\/50 {
  background: #f8fafc !important;
}
/* Strong text in light mode */
html.ddc-modern.ddc-light .text-slate-800,
html.ddc-modern.ddc-light .dark\:text-slate-100,
html.ddc-modern.ddc-light .text-slate-900 {
  color: #0f172a !important;
}
html.ddc-modern.ddc-light .text-slate-600,
html.ddc-modern.ddc-light .dark\:text-slate-300,
html.ddc-modern.ddc-light .text-slate-700 {
  color: #334155 !important;
}
html.ddc-modern.ddc-light .text-slate-500 {
  color: #475569 !important;
}
html.ddc-modern.ddc-light .text-slate-400 {
  color: #64748b !important;
}
/* Borders in light mode */
html.ddc-modern.ddc-light .border-slate-200,
html.ddc-modern.ddc-light .dark\:border-slate-700,
html.ddc-modern.ddc-light .dark\:border-slate-800 {
  border-color: #e2e8f0 !important;
}
html.ddc-modern.ddc-light .border-slate-100 {
  border-color: #f1f5f9 !important;
}
/* Divide borders */
html.ddc-modern.ddc-light .divide-slate-100,
html.ddc-modern.ddc-light .dark\:divide-slate-700,
html.ddc-modern.ddc-light .dark\:divide-slate-800 {
  border-color: #f1f5f9 !important;
}

/* Pills in light mode */
html.ddc-modern.ddc-light .ddc-pill {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-secondary) !important;
}
html.ddc-modern.ddc-light .ddc-pill:hover {
  border-color: var(--neon-blue) !important;
  background: white !important;
}
html.ddc-modern.ddc-light .ddc-pill-count {
  background: rgba(241, 245, 249, 0.95) !important;
  color: var(--text-muted) !important;
}

/* Modal & toast light mode */
html.ddc-modern.ddc-light .ddc-modal-content {
  background: var(--bg-glass-strong) !important;
  border: 1px solid var(--border-glass) !important;
}
html.ddc-modern.ddc-light .ddc-toast {
  background: var(--bg-glass-strong) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-primary) !important;
}

/* Code blocks in light mode (subtle tinted background) */
html.ddc-modern.ddc-light code {
  background: rgba(34, 211, 238, 0.08) !important;
  color: #0e7490 !important; /* darker cyan untuk kontras di putih */
  border: 1px solid rgba(34, 211, 238, 0.18);
}

/* Scrollbar in light mode */
html.ddc-modern.ddc-light ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.30);
  background-clip: padding-box;
}
html.ddc-modern.ddc-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.50);
  background-clip: padding-box;
}

/* Theme toggle icon swap (moon ↔ sun) */
.ddc-theme-icon-moon { display: inline; }
.ddc-theme-icon-sun  { display: none; }
html.ddc-modern.ddc-light .ddc-theme-icon-moon { display: none; }
html.ddc-modern.ddc-light .ddc-theme-icon-sun  { display: inline; color: #fbbf24; }

/* Light mode: arc border on donut → white ring (was dark navy) */
html.ddc-modern.ddc-light canvas { filter: none; }

/* ============================================================
   Legacy button overrides (orange/red → cyan/purple neon)
   Catches remaining `bg-orange-500` / `bg-gradient-to-r from-orange-500 to-red-500`
   buttons in forms, modals, date-range pickers, etc.
   ============================================================ */
html.ddc-modern button.bg-orange-500,
html.ddc-modern a.bg-orange-500,
html.ddc-modern .bg-orange-500.text-white {
  background: var(--grad-cyan-blue) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow-cyan) !important;
  transition: filter 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
html.ddc-modern button.bg-orange-500:hover,
html.ddc-modern a.bg-orange-500:hover,
html.ddc-modern .bg-orange-500.text-white:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

html.ddc-modern button.bg-gradient-to-r.from-orange-500.to-red-500,
html.ddc-modern button[class*="from-orange-500"][class*="to-red-500"] {
  background: var(--grad-purple-pink) !important;
  border: none !important;
  box-shadow: var(--shadow-glow-purple) !important;
}

/* Date range picker preset active state */
html.ddc-modern button[class*="bg-orange-500"][class*="border-orange-500"] {
  background: var(--grad-cyan-blue) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.4) !important;
}
/* Date range presets — non-active state.
   Dark mode: dark navy chip dengan secondary text.
   Light mode: white chip dengan border slate (FIX #2 v3.0). */
html.ddc-modern:not(.ddc-light) .rp-preset:not([class*="bg-orange-500"]),
html.ddc-modern:not(.ddc-light) [class*="-preset"]:not([class*="bg-orange-500"]) {
  background: rgba(20, 27, 48, 0.4) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-secondary) !important;
}
html.ddc-modern:not(.ddc-light) .rp-preset:not([class*="bg-orange-500"]):hover,
html.ddc-modern:not(.ddc-light) [class*="-preset"]:not([class*="bg-orange-500"]):hover {
  background: rgba(34, 211, 238, 0.08) !important;
  border-color: rgba(34, 211, 238, 0.30) !important;
  color: var(--neon-cyan) !important;
}
/* LIGHT MODE date range presets — white surface, dark slate text */
html.ddc-modern.ddc-light .rp-preset:not([class*="bg-orange-500"]),
html.ddc-modern.ddc-light [class*="-preset"]:not([class*="bg-orange-500"]) {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html.ddc-modern.ddc-light .rp-preset:not([class*="bg-orange-500"]):hover,
html.ddc-modern.ddc-light [class*="-preset"]:not([class*="bg-orange-500"]):hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(99, 102, 241, 0.06)) !important;
  border-color: rgba(8, 145, 178, 0.40) !important;
  color: #0e7490 !important;
  box-shadow: 0 2px 8px rgba(34, 211, 238, 0.15);
}
/* Active state already remapped to cyan-blue gradient in v2.9 — improve it */
html.ddc-modern.ddc-light button[class*="bg-orange-500"][class*="border-orange-500"],
html.ddc-modern.ddc-light .rp-preset.bg-orange-500,
html.ddc-modern.ddc-light [class*="-preset"].bg-orange-500 {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.40);
  font-weight: 700;
}

/* Date range picker CONTAINER in light mode — premium light surface */
html.ddc-modern.ddc-light .bg-white.rounded-xl.border.p-3,
html.ddc-modern.ddc-light .bg-white.dark\:bg-slate-900.rounded-xl.border {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.95) inset !important;
}

/* Date range "Periode:" label icon */
html.ddc-modern.ddc-light .fa-calendar-days,
html.ddc-modern.ddc-light .fa-calendar-day,
html.ddc-modern.ddc-light .fa-calendar { color: #0891b2; }

/* Date input fields in range picker — white bg, dark text */
html.ddc-modern.ddc-light input[type="date"].bg-white,
html.ddc-modern.ddc-light input[type="date"].dark\:bg-slate-800 {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #1e293b !important;
  font-weight: 500;
}
html.ddc-modern.ddc-light input[type="date"]:focus {
  border-color: #0891b2 !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
}

/* Apply button (bg-slate-800 text-white) — gradient cyan-blue di light */
html.ddc-modern.ddc-light button.bg-slate-800.text-white,
html.ddc-modern.ddc-light button[class*="bg-slate-800"][class*="text-white"] {
  background: linear-gradient(135deg, #0891b2, #2563eb) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.30);
}
html.ddc-modern.ddc-light button.bg-slate-800.text-white:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.45);
}

/* "Filter aktif: ..." text — make sure it's readable + accent color */
html.ddc-modern.ddc-light .text-slate-500 + span.text-orange-500,
html.ddc-modern.ddc-light span.font-semibold.text-orange-500 {
  color: #0e7490 !important;
  font-weight: 700;
}

/* Form inputs: light bg → glass bg in modern */
html.ddc-modern input[type="text"],
html.ddc-modern input[type="email"],
html.ddc-modern input[type="password"],
html.ddc-modern input[type="search"],
html.ddc-modern input[type="url"],
html.ddc-modern input[type="number"],
html.ddc-modern input[type="date"],
html.ddc-modern input[type="datetime-local"],
html.ddc-modern input:not([type]),
html.ddc-modern select,
html.ddc-modern textarea {
  background: rgba(15, 20, 36, 0.7) !important;
  border-color: var(--border-glass) !important;
  color: var(--text-primary) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
html.ddc-modern input:focus,
html.ddc-modern select:focus,
html.ddc-modern textarea:focus {
  outline: none;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
}
html.ddc-modern input::placeholder,
html.ddc-modern textarea::placeholder {
  color: rgba(148, 163, 184, 0.55) !important;
}

/* Code blocks in modern */
html.ddc-modern code {
  background: rgba(34, 211, 238, 0.10) !important;
  color: var(--neon-cyan) !important;
  border: 1px solid rgba(34, 211, 238, 0.20);
}

/* Table headers in modern */
html.ddc-modern table thead {
  background: rgba(15, 20, 36, 0.6) !important;
}
html.ddc-modern table thead th {
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-glass) !important;
}
html.ddc-modern table tbody tr {
  border-color: var(--border-glass) !important;
}
html.ddc-modern table tbody tr:hover {
  background: rgba(34, 211, 238, 0.04) !important;
}

/* ============================================================
   LIGHT MODE v2.7 — Kontras Tinggi + Colourful Gradient
   Memperbaiki teks putih yang sulit dibaca + menambah
   gradient accents agar terasa "premium colourful modern".
   ============================================================ */

/* --- 1) Tailwind utility class — text putih/terang -> slate gelap di light --- */
html.ddc-modern.ddc-light .text-white,
html.ddc-modern.ddc-light .text-slate-50,
html.ddc-modern.ddc-light .text-slate-100,
html.ddc-modern.ddc-light .dark\:text-white,
html.ddc-modern.ddc-light .dark\:text-slate-50,
html.ddc-modern.ddc-light .dark\:text-slate-100 {
  color: var(--text-primary) !important;
}
html.ddc-modern.ddc-light .text-slate-200,
html.ddc-modern.ddc-light .text-slate-300,
html.ddc-modern.ddc-light .dark\:text-slate-200,
html.ddc-modern.ddc-light .dark\:text-slate-300 {
  color: var(--text-secondary) !important;
}
html.ddc-modern.ddc-light .text-slate-400,
html.ddc-modern.ddc-light .dark\:text-slate-400,
html.ddc-modern.ddc-light .dark\:text-slate-500 {
  color: var(--text-muted) !important;
}

/* EXCEPTION: jika text-white/text-slate-50/100 berada DI ATAS gradient banner
   (parent punya class from-... to-... atau bg-gradient-to-r/br),
   biarkan tetap putih supaya tetap kontras dengan gradient. */
html.ddc-modern.ddc-light [class*="bg-gradient-to"] .text-white,
html.ddc-modern.ddc-light [class*="bg-gradient-to"].text-white,
html.ddc-modern.ddc-light [class*="bg-gradient-to"] .text-slate-50,
html.ddc-modern.ddc-light [class*="bg-gradient-to"].text-slate-50,
html.ddc-modern.ddc-light [class*="bg-gradient-to"] .text-slate-100,
html.ddc-modern.ddc-light [class*="bg-gradient-to"].text-slate-100 {
  color: #ffffff !important;
}
html.ddc-modern.ddc-light [class*="bg-gradient-to"] .text-slate-200,
html.ddc-modern.ddc-light [class*="bg-gradient-to"].text-slate-200,
html.ddc-modern.ddc-light [class*="bg-gradient-to"] .text-slate-300,
html.ddc-modern.ddc-light [class*="bg-gradient-to"].text-slate-300,
html.ddc-modern.ddc-light [class*="bg-gradient-to"] .text-slate-400,
html.ddc-modern.ddc-light [class*="bg-gradient-to"].text-slate-400 {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Solid bg-{color}-500 buttons keep white text */
html.ddc-modern.ddc-light button.bg-cyan-500,
html.ddc-modern.ddc-light button.bg-blue-500,
html.ddc-modern.ddc-light button.bg-blue-600,
html.ddc-modern.ddc-light button.bg-purple-500,
html.ddc-modern.ddc-light button.bg-green-500,
html.ddc-modern.ddc-light button.bg-red-500,
html.ddc-modern.ddc-light button.bg-emerald-500,
html.ddc-modern.ddc-light button.bg-violet-500 {
  color: #ffffff !important;
}

/* --- 2) Tailwind bg-white/X (white with opacity) — light mode → tinted slate --- */
html.ddc-modern.ddc-light [class*="bg-white/"] {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: var(--border-glass) !important;
}
html.ddc-modern.ddc-light [class*="bg-white/"]:hover {
  background: rgba(15, 23, 42, 0.07) !important;
}

/* --- 3) GRADIENT TEXT untuk Page Title + KPI value (colourful & premium) --- */
html.ddc-modern.ddc-light .ddc-page-title {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 45%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html.ddc-modern.ddc-light .ddc-kpi-value {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* KPI gradient text variants by accent */
html.ddc-modern.ddc-light .ddc-kpi[data-accent="cyan"] .ddc-kpi-value {
  background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="blue"] .ddc-kpi-value {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="purple"] .ddc-kpi-value,
html.ddc-modern.ddc-light .ddc-kpi[data-accent="pink"] .ddc-kpi-value {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="green"] .ddc-kpi-value {
  background: linear-gradient(135deg, #059669 0%, #0891b2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="amber"] .ddc-kpi-value {
  background: linear-gradient(135deg, #d97706 0%, #dc2626 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- 4) Sidebar light mode v2.8 — DEEP COLORED gradient (Stripe/Vercel style)
   Solusi visual hierarchy: konten putih cerah, sidebar dark colorful gradient.
   Jauh lebih menarik & contrast dibanding "white panel" sebelumnya. --- */

html.ddc-modern.ddc-light .ddc-sidebar {
  background:
    radial-gradient(ellipse 120% 50% at 0% 0%, rgba(34, 211, 238, 0.22), transparent 60%),
    radial-gradient(ellipse 100% 40% at 100% 50%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(ellipse 100% 50% at 0% 100%, rgba(244, 114, 182, 0.14), transparent 60%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border-right: 1px solid rgba(34, 211, 238, 0.18);
  box-shadow: 2px 0 24px rgba(15, 23, 42, 0.12);
}
html.ddc-modern.ddc-light .ddc-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.6) 25%, rgba(99, 102, 241, 0.6) 55%, rgba(167, 139, 250, 0.6) 80%, transparent);
  pointer-events: none;
}

/* Text inside dark sidebar — light/bright */
html.ddc-modern.ddc-light .ddc-brand-title,
html.ddc-modern.ddc-light .ddc-sidebar .ddc-brand-title {
  color: #f8fafc !important;
}
html.ddc-modern.ddc-light .ddc-brand-text {
  background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
}
html.ddc-modern.ddc-light .ddc-brand-sub,
html.ddc-modern.ddc-light .ddc-sidebar .ddc-brand-sub {
  color: rgba(148, 163, 184, 0.85) !important;
}
html.ddc-modern.ddc-light .ddc-nav-section {
  color: rgba(148, 163, 184, 0.7) !important;
}
html.ddc-modern.ddc-light .ddc-nav-item {
  color: rgba(226, 232, 240, 0.90) !important;
}
html.ddc-modern.ddc-light .ddc-nav-item:hover {
  background: rgba(34, 211, 238, 0.14) !important;
  color: #ffffff !important;
}
/* FIX #3: Sidebar nav icon — high contrast bg + icon match.
   Sebelumnya icon pucat di atas bg pucat. Sekarang bg lebih solid
   dan icon putih terang. */
html.ddc-modern.ddc-light .ddc-nav-icon {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.12);
}
html.ddc-modern.ddc-light .ddc-nav-item:hover .ddc-nav-icon {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(99, 102, 241, 0.25)) !important;
  color: #ffffff !important;
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
}
html.ddc-modern.ddc-light .ddc-nav-item.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.28), rgba(99, 102, 241, 0.16) 60%, transparent) !important;
  color: #ffffff !important;
}
html.ddc-modern.ddc-light .ddc-nav-item.active .ddc-nav-icon {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html.ddc-modern.ddc-light .ddc-nav-item.active::before {
  background: linear-gradient(180deg, #22d3ee, #a78bfa) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
}
/* Badge inside nav item — pastikan terbaca di sidebar dark */
html.ddc-modern.ddc-light .ddc-nav-badge {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.25), rgba(168, 85, 247, 0.20)) !important;
  color: #fbcfe8 !important;
  border: 1px solid rgba(244, 114, 182, 0.30);
}

/* FIX #4: Trial Aktif / Upgrade card — premium readable design.
   Sebelumnya text pakai var(--text-primary) = slate-900 GELAP di atas
   bg gelap = tidak terbaca. Redesign jadi card eye-catching dengan
   solid colored backdrop + text putih terang. */
html.ddc-modern.ddc-light .ddc-sidebar-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}
html.ddc-modern.ddc-light .ddc-upgrade-card {
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.28) 0%, rgba(34, 211, 238, 0.20) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.40) !important;
  box-shadow:
    0 8px 24px rgba(167, 139, 250, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
/* Label "Trial Aktif" / "Platform Health" — top muted label */
html.ddc-modern.ddc-light .ddc-upgrade-card > div:first-child {
  color: rgba(203, 213, 225, 0.90) !important;
  font-weight: 700 !important;
}
html.ddc-modern.ddc-light .ddc-upgrade-card > div:first-child i {
  color: #a78bfa !important;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
}
/* Title (Trial label aktif/expired/plan name) — terang */
html.ddc-modern.ddc-light #ddc-upgrade-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
/* Sub (days remaining etc.) — muted slate cerah */
html.ddc-modern.ddc-light #ddc-upgrade-sub {
  color: rgba(203, 213, 225, 0.85) !important;
}
/* Tombol Upgrade — gradient cyan-blue solid */
html.ddc-modern.ddc-light .ddc-upgrade-card .ddc-modern-btn.primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.45);
}
html.ddc-modern.ddc-light .ddc-upgrade-card .ddc-modern-btn.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.55);
}
html.ddc-modern.ddc-light .ddc-upgrade-card .ddc-modern-btn.purple {
  background: linear-gradient(135deg, #a78bfa, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(167, 139, 250, 0.45);
}

/* Scrollbar inside dark sidebar */
html.ddc-modern.ddc-light .ddc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25) !important;
}

html.ddc-modern.ddc-light .ddc-topbar {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.88) 100%);
  border-bottom: 1px solid var(--border-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
html.ddc-modern.ddc-light .ddc-topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.50) 20%, rgba(99, 102, 241, 0.50) 50%, rgba(167, 139, 250, 0.50) 80%, transparent);
  pointer-events: none;
}

/* --- 5) KPI Cards — soft tinted bg + colourful glow shadow --- */
html.ddc-modern.ddc-light .ddc-kpi {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  border: 1px solid var(--border-glass);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(99, 102, 241, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Per-accent glow shadows */
html.ddc-modern.ddc-light .ddc-kpi[data-accent="cyan"] {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(34, 211, 238, 0.14), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(34, 211, 238, 0.25);
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="blue"] {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(59, 130, 246, 0.14), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(59, 130, 246, 0.22);
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="purple"],
html.ddc-modern.ddc-light .ddc-kpi[data-accent="pink"] {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(167, 139, 250, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(167, 139, 250, 0.25);
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="green"] {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(52, 211, 153, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(52, 211, 153, 0.25);
}
html.ddc-modern.ddc-light .ddc-kpi[data-accent="amber"] {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(251, 191, 36, 0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(251, 191, 36, 0.30);
}
html.ddc-modern.ddc-light .ddc-kpi:hover {
  transform: translateY(-3px);
  filter: brightness(1.02);
}
/* Top gradient stripe line on KPI cards */
html.ddc-modern.ddc-light .ddc-kpi::before {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.35) 30%, rgba(167, 139, 250, 0.35) 70%, transparent) !important;
  height: 2px !important;
}

/* --- 6) Glass cards — slight gradient surface --- */
html.ddc-modern.ddc-light .ddc-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  border: 1px solid var(--border-glass);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html.ddc-modern.ddc-light .ddc-glass:hover {
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.06),
    0 16px 36px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- 7) Modern buttons primary/purple/success/danger — keep white text --- */
html.ddc-modern.ddc-light .ddc-modern-btn.primary,
html.ddc-modern.ddc-light .ddc-modern-btn.purple,
html.ddc-modern.ddc-light .ddc-modern-btn.success,
html.ddc-modern.ddc-light .ddc-modern-btn.danger {
  color: #ffffff !important;
  border-color: transparent !important;
}

/* --- 8) Pills active stays gradient with white text --- */
html.ddc-modern.ddc-light .ddc-pill-active,
html.ddc-modern.ddc-light .ddc-pill.active {
  color: #ffffff !important;
  background: var(--grad-cyan-blue) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.30);
}

/* --- 9) Section dividers — colourful gradient lines --- */
html.ddc-modern.ddc-light hr,
html.ddc-modern.ddc-light .ddc-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.28) 50%, transparent);
}

/* --- 10) Badge / status pills — readable colors on light --- */
html.ddc-modern.ddc-light .bg-green-500\/20,
html.ddc-modern.ddc-light .bg-emerald-500\/20 {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #047857 !important;
}
html.ddc-modern.ddc-light .bg-red-500\/20 {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #b91c1c !important;
}
html.ddc-modern.ddc-light .bg-amber-500\/20,
html.ddc-modern.ddc-light .bg-yellow-500\/20 {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
}
html.ddc-modern.ddc-light .bg-cyan-500\/20,
html.ddc-modern.ddc-light .bg-blue-500\/20 {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #1d4ed8 !important;
}
html.ddc-modern.ddc-light .bg-purple-500\/20,
html.ddc-modern.ddc-light .bg-violet-500\/20,
html.ddc-modern.ddc-light .bg-fuchsia-500\/20 {
  background: rgba(168, 85, 247, 0.14) !important;
  color: #7c3aed !important;
}
html.ddc-modern.ddc-light .bg-pink-500\/20,
html.ddc-modern.ddc-light .bg-rose-500\/20 {
  background: rgba(244, 114, 182, 0.16) !important;
  color: #be185d !important;
}
/* Slate badges with white text */
html.ddc-modern.ddc-light .bg-slate-800.text-white,
html.ddc-modern.ddc-light .bg-slate-900.text-white {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  color: #ffffff !important;
}

/* --- 11) Toast notification colors (solid bg) --- */
html.ddc-modern.ddc-light .bg-green-500.text-white {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}
html.ddc-modern.ddc-light .bg-red-500.text-white {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.25);
}

/* --- 12) Modal title gradient (visual polish) --- */
html.ddc-modern.ddc-light .ddc-modal-content h2,
html.ddc-modern.ddc-light .ddc-modal-content h3 {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
}

/* --- 13) Activity log items --- */
html.ddc-modern.ddc-light .ddc-activity-item,
html.ddc-modern.ddc-light [class*="activity-row"] {
  border-color: var(--border-subtle) !important;
}
html.ddc-modern.ddc-light .ddc-activity-item:hover {
  background: rgba(99, 102, 241, 0.04) !important;
}

/* --- 14) Inline gradient banner panels —
       JS-rendered: <div class="bg-gradient-to-r from-orange-500 to-red-500 text-white">. */
html.ddc-modern.ddc-light [class*="from-orange-500"][class*="to-red-500"],
html.ddc-modern.ddc-light [class*="from-orange-400"][class*="to-red-500"] {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.22), 0 4px 12px rgba(236, 72, 153, 0.18);
}
html.ddc-modern.ddc-light [class*="from-violet-500"][class*="to-fuchsia-600"] {
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.22), 0 4px 12px rgba(217, 70, 239, 0.18);
}
html.ddc-modern.ddc-light [class*="from-emerald-500"][class*="to-green-600"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.22);
}
html.ddc-modern.ddc-light [class*="from-blue-500"][class*="to-sky-600"] {
  background: linear-gradient(135deg, #3b82f6 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.22);
}
html.ddc-modern.ddc-light [class*="from-amber-500"][class*="to-orange-500"] {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.22);
}
html.ddc-modern.ddc-light [class*="from-red-500"][class*="to-rose-600"] {
  background: linear-gradient(135deg, #ef4444 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.22);
}

/* --- 15) Form labels — bolder for readability on white --- */
html.ddc-modern.ddc-light label {
  color: var(--text-secondary) !important;
  font-weight: 600;
}

/* --- 16) border-white/X → soft slate border in light --- */
html.ddc-modern.ddc-light [class*="border-white/"] {
  border-color: var(--border-glass) !important;
}

/* --- 17) Inline links remain colorful but readable --- */
html.ddc-modern.ddc-light a:not(.ddc-nav-item):not(.ddc-modern-btn):not(.ddc-pill) {
  color: #2563eb;
}
html.ddc-modern.ddc-light a:not(.ddc-nav-item):not(.ddc-modern-btn):not(.ddc-pill):hover {
  color: #6366f1;
  text-decoration: underline;
}

/* --- 18) Force readable text on common "muted" classes if used --- */
html.ddc-modern.ddc-light .text-slate-500,
html.ddc-modern.ddc-light .text-slate-600 {
  color: var(--text-secondary) !important;
}

/* --- 19) Override common pill counts background --- */
html.ddc-modern.ddc-light .ddc-pill-active .ddc-pill-count,
html.ddc-modern.ddc-light .ddc-pill.active .ddc-pill-count {
  background: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}

/* --- 20) Trend indicators on light bg — pop up the colors --- */
html.ddc-modern.ddc-light .ddc-kpi-trend.up {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #047857 !important;
}
html.ddc-modern.ddc-light .ddc-kpi-trend.down {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #b91c1c !important;
}

/* =================================================================
   v3.5.6 — LIGHT MODE FINAL POLISH
   Mengatasi inline-style hero/cards yang washed-out di light mode.
   Pendekatan: tone down ::after glow + force solid surface dimana
   inline style memakai gradient pucat.
   ================================================================= */

/* Tone down KPI glow overlay di light mode (terlalu fluffy/washed) */
html.ddc-modern.ddc-light .ddc-kpi::after {
  opacity: 0.5;
  filter: blur(24px);
}

/* MRR Hero / .lg\:col-span-2 dengan inline gradient bg — paksa solid surface */
html.ddc-modern.ddc-light .ddc-main .lg\:col-span-2[style*="linear-gradient"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
/* Decorative blur orb inside hero — softer di light */
html.ddc-modern.ddc-light .ddc-main .lg\:col-span-2[style*="linear-gradient"] > div[style*="radial-gradient"] {
  opacity: 0.45 !important;
}

/* Hero label text — currently rgba(203,213,225,0.7) (invisible di light) */
html.ddc-modern.ddc-light .ddc-main [style*="rgba(203,213,225,0.7)"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(203, 213, 225, 0.7)"] {
  color: #64748b !important;
}
html.ddc-modern.ddc-light .ddc-main [style*="rgba(203,213,225,0.85)"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(203, 213, 225, 0.85)"] {
  color: #475569 !important;
}

/* Inline-gradient-text values (e.g. "Rp 0", "Rp 1.050.000") — tetap pakai gradient
   tapi gradient version yang readable di white background */
html.ddc-modern.ddc-light .ddc-main [style*="var(--grad-purple-pink)"][style*="background-clip"] {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html.ddc-modern.ddc-light .ddc-main [style*="var(--grad-cyan-blue)"][style*="background-clip"] {
  background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html.ddc-modern.ddc-light .ddc-main [style*="var(--grad-amber-red)"][style*="background-clip"] {
  background: linear-gradient(135deg, #d97706 0%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html.ddc-modern.ddc-light .ddc-main [style*="var(--grad-green-cyan)"][style*="background-clip"] {
  background: linear-gradient(135deg, #059669 0%, #0891b2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html.ddc-modern.ddc-light .ddc-main [style*="var(--grad-blue-purple)"][style*="background-clip"] {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* "Rp 0" red-pink inline gradient untuk Suspended card */
html.ddc-modern.ddc-light .ddc-main [style*="#f87171"][style*="#f472b6"][style*="background-clip"] {
  background: linear-gradient(135deg, #dc2626 0%, #db2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Page title gradient di light mode — current dark gradient tidak terbaca clear */
html.ddc-modern.ddc-light .ddc-page-title {
  background: linear-gradient(135deg, #0f172a 0%, #1e40af 60%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* v3.6.10 FIX — Icon di header page (Dashboard Overview, Smart Insights, Orders,
   Buyers Database, Produk Digital, Upload CSV, Pengaturan) menghilang di light mode
   karena .ddc-page-title menerapkan `-webkit-text-fill-color: transparent` (gradient
   text trick) yang DI-INHERIT oleh child <i class="fas"> di dalam .ddc-page-title-icon.
   Reset fill-color & color ke white agar icon FontAwesome terlihat solid putih di atas
   gradient background kotak icon (cyan/purple/pink/dst). Pakai !important karena rule
   parent juga !important-equivalent (chained selector specificity tinggi). */
html.ddc-modern.ddc-light .ddc-page-title-icon,
html.ddc-modern.ddc-light .ddc-page-title-icon i,
html.ddc-modern.ddc-light .ddc-page-title-icon::before {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* Info banner / multi-gateway callout (yang ada icon "i" di paymethods) */
html.ddc-modern.ddc-light .ddc-glass[style*="background"][style*="rgba"] {
  /* Generic .ddc-glass with inline rgba bg in light — keep but lighten */
}

/* Payment method cards (LIVE/MANUAL pill cards) — paksa solid white surface */
html.ddc-modern.ddc-light .ddc-main [class*="rounded-2xl"][style*="rgba(15"],
html.ddc-modern.ddc-light .ddc-main [class*="rounded-xl"][style*="rgba(15"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Generic dark inline bg (rgba(15,20,...) / rgba(20,27,...)) → force white in light */
html.ddc-modern.ddc-light .ddc-main [style*="rgba(15, 20"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(15,20"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(20, 27"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(20,27"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(11, 18"],
html.ddc-modern.ddc-light .ddc-main [style*="rgba(11,18"] {
  background-color: #ffffff !important;
  color: #0b1220 !important;
}

/* ============================================================
   SHOP URL BANNER v2.8 — Premium "URL Toko Publik" card
   dengan ikon toko besar, gradient bg, action buttons, QR
   ============================================================ */
.ddc-shop-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 24px;
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(14, 165, 233, 0.18) 0%, rgba(99, 102, 241, 0.20) 50%, rgba(168, 85, 247, 0.18) 100%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(34, 211, 238, 0.30);
  box-shadow:
    0 12px 36px rgba(14, 165, 233, 0.16),
    0 4px 12px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-wrap: wrap;
}
.ddc-shop-banner.hidden { display: none !important; }

/* Animated radial glow behind icon */
.ddc-shop-banner-glow {
  position: absolute;
  top: -30%; left: -10%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.30) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  animation: ddc-shop-pulse 6s ease-in-out infinite;
}
.ddc-shop-banner::after {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
@keyframes ddc-shop-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Big store icon — Shopee-style orange-to-pink gradient */
.ddc-shop-banner-icon {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 30px;
  box-shadow:
    0 8px 24px rgba(249, 115, 22, 0.40),
    0 0 24px rgba(236, 72, 153, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  z-index: 1;
}
.ddc-shop-banner-icon::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 50%);
  pointer-events: none;
}
/* Pulsing ring around icon */
.ddc-shop-banner-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px solid rgba(249, 115, 22, 0.5);
  animation: ddc-shop-ring 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes ddc-shop-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Body — label + URL + hint */
.ddc-shop-banner-body {
  flex: 1 1 320px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ddc-shop-banner-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ddc-shop-banner-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(168, 85, 247, 0.25));
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: #67e8f9;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
}
.ddc-shop-banner-url {
  font-family: 'SF Mono', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
  cursor: text;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.20);
}
.ddc-shop-banner-hint {
  font-size: 11.5px;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.5;
  max-width: 560px;
}

/* Action buttons */
.ddc-shop-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.ddc-shop-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.ddc-shop-banner-btn i { font-size: 13px; }
.ddc-shop-banner-btn-ghost {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.ddc-shop-banner-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.30);
  transform: translateY(-1px);
}
.ddc-shop-banner-btn-primary {
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.35);
}
.ddc-shop-banner-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.45);
}
.ddc-shop-banner-btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* FIX #1 v3.0 — Shop banner LIGHT MODE redesign:
   Sebelumnya dark navy banner tapi user lapor "background terang & font putih".
   Realitanya body radial gradient warna terang muncul DI BELAKANG banner,
   dan beberapa user lihat banner kontras kurang. Solusi terbaik:
   ganti banner jadi LIGHT GRADIENT PREMIUM dengan DARK TEXT supaya
   konsisten dengan light mode keseluruhan + sangat readable. */
html.ddc-modern.ddc-light .ddc-shop-banner {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.94) 50%, rgba(241, 245, 249, 0.92) 100%),
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(34, 211, 238, 0.20), transparent 70%),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(168, 85, 247, 0.16), transparent 70%);
  border: 1px solid rgba(34, 211, 238, 0.30);
  box-shadow:
    0 12px 36px rgba(14, 165, 233, 0.12),
    0 4px 12px rgba(168, 85, 247, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Glow blobs lebih lembut di light mode supaya tidak silau */
html.ddc-modern.ddc-light .ddc-shop-banner-glow {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18) 0%, transparent 65%);
  opacity: 0.7;
}
html.ddc-modern.ddc-light .ddc-shop-banner::after {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, transparent 65%);
}

/* Icon ring (pulsing) — light mode pakai orange yang tone-down */
html.ddc-modern.ddc-light .ddc-shop-banner-pulse {
  border-color: rgba(249, 115, 22, 0.55);
}

/* Label "URL Toko Publik Anda" — dark slate readable */
html.ddc-modern.ddc-light .ddc-shop-banner-label {
  color: #475569 !important; /* slate-600 */
}
html.ddc-modern.ddc-light .ddc-shop-banner-label > i {
  color: #0e7490 !important; /* cyan-700 */
}

/* Pill "Bagikan ke pelanggan Shopee" — solid colored badge */
html.ddc-modern.ddc-light .ddc-shop-banner-pill {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(168, 85, 247, 0.18)) !important;
  border: 1px solid rgba(14, 165, 233, 0.40) !important;
  color: #0e7490 !important;
  font-weight: 700 !important;
}
html.ddc-modern.ddc-light .ddc-shop-banner-pill i {
  color: #6366f1 !important;
}

/* URL display panel — light surface dengan dark monospace text */
html.ddc-modern.ddc-light .ddc-shop-banner-url {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  font-weight: 600;
  box-shadow:
    inset 0 1px 3px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Hint text — slate-600 readable */
html.ddc-modern.ddc-light .ddc-shop-banner-hint {
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-shop-banner-hint i {
  color: #2563eb !important;
}

/* Ghost button (Salin / QR) — outlined dark on light */
html.ddc-modern.ddc-light .ddc-shop-banner-btn-ghost {
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  color: #1e293b !important;
  font-weight: 600;
}
html.ddc-modern.ddc-light .ddc-shop-banner-btn-ghost:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: #0891b2 !important;
  color: #0e7490 !important;
}

/* Override the generic banner gradient catcher from earlier (light mode)
   so the shop banner doesn't get its bg replaced. */
html.ddc-modern.ddc-light .ddc-shop-banner[class*="from-orange"] { background: inherit; }

/* Responsive: on small screens stack actions below body */
@media (max-width: 720px) {
  .ddc-shop-banner { padding: 18px 18px; gap: 14px; }
  .ddc-shop-banner-icon { width: 56px; height: 56px; font-size: 22px; }
  .ddc-shop-banner-body { flex-basis: 100%; }
  .ddc-shop-banner-actions { width: 100%; }
  .ddc-shop-banner-btn { flex: 1; justify-content: center; }
}

/* ============================================================
   QR CODE MODAL v2.8
   ============================================================ */
#qr-modal:not(.hidden) {
  display: flex !important;
}
.ddc-qr-modal-content {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  padding: 32px 28px 24px;
  width: min(380px, calc(100vw - 32px));
  text-align: center;
  box-shadow:
    0 24px 80px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(34, 211, 238, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: ddc-qr-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ddc-qr-pop {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
.ddc-qr-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  border: none;
  color: #475569;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s ease;
}
.ddc-qr-modal-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.ddc-qr-modal-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ddc-qr-modal-sub {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 18px;
}
.ddc-qr-modal-img-wrap {
  display: inline-block;
  padding: 16px;
  border-radius: 16px;
  background: white;
  border: 2px solid rgba(34, 211, 238, 0.20);
  box-shadow:
    0 8px 24px rgba(34, 211, 238, 0.12),
    0 0 0 4px rgba(34, 211, 238, 0.06);
  margin-bottom: 16px;
}
.ddc-qr-modal-img-wrap img {
  display: block;
  width: 240px; height: 240px;
  border-radius: 8px;
}
.ddc-qr-modal-url {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #334155;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
  word-break: break-all;
}
.ddc-qr-modal-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 18px;
  border-radius: 11px;
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  color: white;
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.30);
  transition: all 0.2s ease;
}
.ddc-qr-modal-download:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.40);
}

/* ============================================================
   v2.9 — KONTRAS WARNA TEKS & IKON DI DUA MODE
   Masalah: Tailwind utility text-{color}-{300,400} dimaksudkan untuk
   dark canvas; di light mode jadi pucat tidak terbaca. Sebaliknya
   text-{color}-{700,800} di dark canvas jadi terlalu gelap.
   Solusi: override per-mode dengan nilai shade yang kontras.
   ============================================================ */

/* ---------- LIGHT MODE: warna pucat -> shade gelap pekat ---------- */
html.ddc-modern.ddc-light .text-amber-300,
html.ddc-modern.ddc-light .text-amber-400,
html.ddc-modern.ddc-light .text-yellow-300,
html.ddc-modern.ddc-light .text-yellow-400 { color: #b45309 !important; } /* amber-700 */

html.ddc-modern.ddc-light .text-orange-300,
html.ddc-modern.ddc-light .text-orange-400 { color: #c2410c !important; } /* orange-700 */

html.ddc-modern.ddc-light .text-red-300,
html.ddc-modern.ddc-light .text-red-400 { color: #b91c1c !important; } /* red-700 */

html.ddc-modern.ddc-light .text-rose-300,
html.ddc-modern.ddc-light .text-rose-400 { color: #be123c !important; } /* rose-700 */

html.ddc-modern.ddc-light .text-pink-300,
html.ddc-modern.ddc-light .text-pink-400 { color: #be185d !important; } /* pink-700 */

html.ddc-modern.ddc-light .text-fuchsia-300,
html.ddc-modern.ddc-light .text-fuchsia-400 { color: #a21caf !important; } /* fuchsia-700 */

html.ddc-modern.ddc-light .text-purple-300,
html.ddc-modern.ddc-light .text-purple-400 { color: #6d28d9 !important; } /* purple-700 */

html.ddc-modern.ddc-light .text-violet-300,
html.ddc-modern.ddc-light .text-violet-400 { color: #6d28d9 !important; } /* violet-700 */

html.ddc-modern.ddc-light .text-indigo-300,
html.ddc-modern.ddc-light .text-indigo-400 { color: #4338ca !important; } /* indigo-700 */

html.ddc-modern.ddc-light .text-blue-300,
html.ddc-modern.ddc-light .text-blue-400 { color: #1d4ed8 !important; } /* blue-700 */

html.ddc-modern.ddc-light .text-sky-300,
html.ddc-modern.ddc-light .text-sky-400 { color: #0369a1 !important; } /* sky-700 */

html.ddc-modern.ddc-light .text-cyan-300,
html.ddc-modern.ddc-light .text-cyan-400 { color: #0e7490 !important; } /* cyan-700 */

html.ddc-modern.ddc-light .text-teal-300,
html.ddc-modern.ddc-light .text-teal-400 { color: #0f766e !important; } /* teal-700 */

html.ddc-modern.ddc-light .text-emerald-200,
html.ddc-modern.ddc-light .text-emerald-300,
html.ddc-modern.ddc-light .text-emerald-400 { color: #047857 !important; } /* emerald-700 */

html.ddc-modern.ddc-light .text-green-200,
html.ddc-modern.ddc-light .text-green-300,
html.ddc-modern.ddc-light .text-green-400 { color: #15803d !important; } /* green-700 */

html.ddc-modern.ddc-light .text-lime-300,
html.ddc-modern.ddc-light .text-lime-400 { color: #4d7c0f !important; } /* lime-700 */

/* Dark-mode-only colored text inside `dark:text-{color}-300/400` —
   di light mode harus dipakai versi base text-{color}-{600,700}.
   Tapi Tailwind `dark:` modifier hanya aktif kalau html ada class .dark.
   Pastikan saat ddc-light TIDAK ada class .dark di html. */

/* ---------- DARK MODE: shade -700/800 (terlalu gelap) -> -300/400 cerah ---------- */
html.ddc-modern:not(.ddc-light) .text-amber-700,
html.ddc-modern:not(.ddc-light) .text-amber-800,
html.ddc-modern:not(.ddc-light) .text-yellow-700,
html.ddc-modern:not(.ddc-light) .text-yellow-800 { color: #fcd34d !important; } /* amber-300 */

html.ddc-modern:not(.ddc-light) .text-orange-700,
html.ddc-modern:not(.ddc-light) .text-orange-800 { color: #fdba74 !important; } /* orange-300 */

html.ddc-modern:not(.ddc-light) .text-red-700,
html.ddc-modern:not(.ddc-light) .text-red-800 { color: #fca5a5 !important; } /* red-300 */

html.ddc-modern:not(.ddc-light) .text-rose-700,
html.ddc-modern:not(.ddc-light) .text-rose-800 { color: #fda4af !important; } /* rose-300 */

html.ddc-modern:not(.ddc-light) .text-pink-700,
html.ddc-modern:not(.ddc-light) .text-pink-800 { color: #f9a8d4 !important; } /* pink-300 */

html.ddc-modern:not(.ddc-light) .text-fuchsia-700,
html.ddc-modern:not(.ddc-light) .text-fuchsia-800 { color: #f0abfc !important; } /* fuchsia-300 */

html.ddc-modern:not(.ddc-light) .text-purple-700,
html.ddc-modern:not(.ddc-light) .text-purple-800 { color: #d8b4fe !important; } /* purple-300 */

html.ddc-modern:not(.ddc-light) .text-violet-700,
html.ddc-modern:not(.ddc-light) .text-violet-800 { color: #c4b5fd !important; } /* violet-300 */

html.ddc-modern:not(.ddc-light) .text-indigo-700,
html.ddc-modern:not(.ddc-light) .text-indigo-800 { color: #a5b4fc !important; } /* indigo-300 */

html.ddc-modern:not(.ddc-light) .text-blue-700,
html.ddc-modern:not(.ddc-light) .text-blue-800 { color: #93c5fd !important; } /* blue-300 */

html.ddc-modern:not(.ddc-light) .text-sky-700,
html.ddc-modern:not(.ddc-light) .text-sky-800 { color: #7dd3fc !important; } /* sky-300 */

html.ddc-modern:not(.ddc-light) .text-cyan-700,
html.ddc-modern:not(.ddc-light) .text-cyan-800 { color: #67e8f9 !important; } /* cyan-300 */

html.ddc-modern:not(.ddc-light) .text-teal-700,
html.ddc-modern:not(.ddc-light) .text-teal-800 { color: #5eead4 !important; } /* teal-300 */

html.ddc-modern:not(.ddc-light) .text-emerald-700,
html.ddc-modern:not(.ddc-light) .text-emerald-800 { color: #6ee7b7 !important; } /* emerald-300 */

html.ddc-modern:not(.ddc-light) .text-green-700,
html.ddc-modern:not(.ddc-light) .text-green-800 { color: #86efac !important; } /* green-300 */

html.ddc-modern:not(.ddc-light) .text-lime-700,
html.ddc-modern:not(.ddc-light) .text-lime-800 { color: #bef264 !important; } /* lime-300 */

/* ---------- IKON DI DALAM CONTAINER BERWARNA / DENGAN BG TINTED ----------
   Pattern di JS: <i class="fas fa-X text-amber-500 mr-1"></i> di atas card putih (light)
   atau card dark surface (dark). text-{color}-{500,600} sudah cukup pekat
   untuk light, tapi di dark canvas kurang cerah. Tone up: */
html.ddc-modern:not(.ddc-light) .text-amber-500,
html.ddc-modern:not(.ddc-light) .text-amber-600 { color: #fbbf24 !important; }
html.ddc-modern:not(.ddc-light) .text-orange-500,
html.ddc-modern:not(.ddc-light) .text-orange-600 { color: #fb923c !important; }
html.ddc-modern:not(.ddc-light) .text-red-500,
html.ddc-modern:not(.ddc-light) .text-red-600 { color: #f87171 !important; }
html.ddc-modern:not(.ddc-light) .text-green-500,
html.ddc-modern:not(.ddc-light) .text-green-600 { color: #4ade80 !important; }
html.ddc-modern:not(.ddc-light) .text-emerald-500,
html.ddc-modern:not(.ddc-light) .text-emerald-600 { color: #34d399 !important; }
html.ddc-modern:not(.ddc-light) .text-blue-500,
html.ddc-modern:not(.ddc-light) .text-blue-600 { color: #60a5fa !important; }
html.ddc-modern:not(.ddc-light) .text-cyan-500,
html.ddc-modern:not(.ddc-light) .text-cyan-600 { color: #22d3ee !important; }
html.ddc-modern:not(.ddc-light) .text-sky-500,
html.ddc-modern:not(.ddc-light) .text-sky-600 { color: #38bdf8 !important; }
html.ddc-modern:not(.ddc-light) .text-purple-500,
html.ddc-modern:not(.ddc-light) .text-purple-600 { color: #c084fc !important; }
html.ddc-modern:not(.ddc-light) .text-violet-500,
html.ddc-modern:not(.ddc-light) .text-violet-600 { color: #a78bfa !important; }
html.ddc-modern:not(.ddc-light) .text-pink-500,
html.ddc-modern:not(.ddc-light) .text-pink-600 { color: #f472b6 !important; }
html.ddc-modern:not(.ddc-light) .text-fuchsia-500,
html.ddc-modern:not(.ddc-light) .text-fuchsia-600 { color: #e879f9 !important; }

/* ---------- BACKGROUND LIGHT TINTED (bg-{color}-50, bg-{color}-100) ----------
   Pada light mode: pastikan teks di dalamnya cukup gelap (Tailwind cards seperti
   bg-green-50 + text-green-700 sudah ok, tapi pastikan teks tidak ke-flip oleh
   override universal text-{color}-300/400 di atas). Sudah ditangani lewat
   selektor specific text-{color}-{700,800} TIDAK di-override di light. */

/* Pada dark mode: bg-{color}-50/100 jadi terlalu cerah — perlu di-tone-down.
   Jika ada container bg-green-50 di dark canvas, ubah jadi tinted dark. */
html.ddc-modern:not(.ddc-light) .bg-green-50,
html.ddc-modern:not(.ddc-light) .bg-emerald-50,
html.ddc-modern:not(.ddc-light) .bg-green-100,
html.ddc-modern:not(.ddc-light) .bg-emerald-100 {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
html.ddc-modern:not(.ddc-light) .bg-red-50,
html.ddc-modern:not(.ddc-light) .bg-rose-50,
html.ddc-modern:not(.ddc-light) .bg-red-100,
html.ddc-modern:not(.ddc-light) .bg-rose-100 {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}
html.ddc-modern:not(.ddc-light) .bg-blue-50,
html.ddc-modern:not(.ddc-light) .bg-sky-50,
html.ddc-modern:not(.ddc-light) .bg-blue-100,
html.ddc-modern:not(.ddc-light) .bg-sky-100 {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}
html.ddc-modern:not(.ddc-light) .bg-amber-50,
html.ddc-modern:not(.ddc-light) .bg-yellow-50,
html.ddc-modern:not(.ddc-light) .bg-orange-50,
html.ddc-modern:not(.ddc-light) .bg-amber-100,
html.ddc-modern:not(.ddc-light) .bg-yellow-100,
html.ddc-modern:not(.ddc-light) .bg-orange-100 {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}
html.ddc-modern:not(.ddc-light) .bg-purple-50,
html.ddc-modern:not(.ddc-light) .bg-violet-50,
html.ddc-modern:not(.ddc-light) .bg-purple-100,
html.ddc-modern:not(.ddc-light) .bg-violet-100 {
  background: rgba(168, 85, 247, 0.10) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}
/* border colors */
html.ddc-modern:not(.ddc-light) .border-green-200,
html.ddc-modern:not(.ddc-light) .border-emerald-200 { border-color: rgba(16, 185, 129, 0.25) !important; }
html.ddc-modern:not(.ddc-light) .border-red-200,
html.ddc-modern:not(.ddc-light) .border-rose-200 { border-color: rgba(239, 68, 68, 0.25) !important; }
html.ddc-modern:not(.ddc-light) .border-blue-200,
html.ddc-modern:not(.ddc-light) .border-sky-200 { border-color: rgba(59, 130, 246, 0.25) !important; }
html.ddc-modern:not(.ddc-light) .border-amber-200,
html.ddc-modern:not(.ddc-light) .border-orange-200,
html.ddc-modern:not(.ddc-light) .border-yellow-200 { border-color: rgba(245, 158, 11, 0.25) !important; }
html.ddc-modern:not(.ddc-light) .border-purple-200,
html.ddc-modern:not(.ddc-light) .border-violet-200 { border-color: rgba(168, 85, 247, 0.25) !important; }

/* ---------- LINK ACCENT (text-orange-500) — DI LIGHT MODE jangan terlalu mencolok ----------
   Di light mode pakai orange-600 / lebih pekat untuk readability. */
html.ddc-modern.ddc-light .text-orange-500,
html.ddc-modern.ddc-light .text-orange-600 { color: #c2410c !important; }
/* tetapi jangan re-color icon di dalam shop banner (banner sudah gradient bg) */
html.ddc-modern.ddc-light .ddc-shop-banner .text-orange-500,
html.ddc-modern.ddc-light .ddc-shop-banner .text-orange-600 { color: inherit !important; }

/* ---------- TAB BUTTON ACTIVE — Tailwind 'text-orange-500 border-orange-500' ----------
   Di light + modern mode, ganti jadi cyan-blue accent agar match dengan tema. */
html.ddc-modern .tab-btn.text-orange-500 {
  color: #0e7490 !important; /* dark cyan untuk light */
  border-bottom-color: #0891b2 !important;
}
html.ddc-modern.ddc-light .tab-btn.border-orange-500 {
  border-bottom-color: #0891b2 !important;
}
html.ddc-modern:not(.ddc-light) .tab-btn.text-orange-500 {
  color: #22d3ee !important; /* cyan-400 untuk dark */
  border-bottom-color: #22d3ee !important;
}
html.ddc-modern:not(.ddc-light) .tab-btn.border-orange-500 {
  border-bottom-color: #22d3ee !important;
}

/* ---------- TEXT-SLATE-300 SORT ICONS (text-slate-300 in <i> on light card) ----------
   text-slate-300 in light mode sudah di-override di v2.6 menjadi text-secondary,
   tapi sort arrows tetap perlu agak muted. */
html.ddc-modern.ddc-light .text-slate-300 { color: #94a3b8 !important; }
html.ddc-modern:not(.ddc-light) .text-slate-300 { color: #94a3b8 !important; }

/* ---------- FOOTER LINK ORANGE — terbaca di both modes ---------- */
html.ddc-modern.ddc-light footer .text-orange-500,
html.ddc-modern.ddc-light footer a.text-orange-500 { color: #0e7490 !important; }
html.ddc-modern:not(.ddc-light) footer .text-orange-500,
html.ddc-modern:not(.ddc-light) footer a.text-orange-500 { color: #22d3ee !important; }

/* ---------- LIGHT MODE: warna teks di dalam .bg-green-50 dkk default Tailwind ----------
   Kelas pattern: <div class="bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-300">.
   Pada light mode, text-green-700 (#15803d) sudah cukup kontras di atas bg-green-50 — OK.
   Pada dark mode, text-green-300 (#86efac) cukup kontras di atas dark tint — OK setelah override di atas. */

/* ---------- ENSURE: dark canvas card paragraph text remain bright ---------- */
html.ddc-modern:not(.ddc-light) .ddc-glass p,
html.ddc-modern:not(.ddc-light) .ddc-kpi p,
html.ddc-modern:not(.ddc-light) .ddc-glass span:not([class*="text-"]),
html.ddc-modern:not(.ddc-light) .ddc-glass div:not([class*="text-"]):not([class*="bg-"]) {
  color: var(--text-secondary);
}

/* ---------- TEXT INSIDE QR MODAL TITLE — fallback if gradient text fails ---------- */
html.ddc-modern .ddc-qr-modal-title i { color: #0891b2; -webkit-text-fill-color: #0891b2; }

/* =====================================================================
   v3.1 — COLLAPSIBLE SIDEBAR + SUB-MENU + GUIDE TAB
   ===================================================================== */

/* ---------- Sidebar collapse toggle button ---------- */
/* v3.5.7: Toggle button — repositioned to right-center edge of sidebar.
   Half-tab style, more obvious, premium "Linear/Notion-style" handle. */
.ddc-sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 56px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  z-index: 50;
  box-shadow:
    4px 0 12px rgba(34, 211, 238, 0.35),
    0 0 0 1px rgba(34, 211, 238, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.18);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.85;
}
.ddc-sidebar-toggle:hover {
  opacity: 1;
  width: 28px;
  right: -16px;
  box-shadow:
    6px 0 18px rgba(34, 211, 238, 0.55),
    0 0 0 2px rgba(34, 211, 238, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.25);
}
/* Hide the legacy grip indicator (no longer needed with new half-tab design) */
.ddc-sidebar-toggle .ddc-sidebar-toggle-grip { display: none; }
.ddc-sidebar-toggle i {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ddc-sidebar.collapsed .ddc-sidebar-toggle i {
  transform: rotate(180deg);
}
/* Hide on mobile — mobile already uses overlay drawer */
@media (max-width: 1023px) {
  .ddc-sidebar-toggle { display: none; }
}

/* ---------- Light mode toggle border ---------- */
html.ddc-modern.ddc-light .ddc-sidebar-toggle {
  border: 2px solid #ffffff;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.45), 0 0 0 1px rgba(34, 211, 238, 0.35);
}

/* ---------- Collapsed sidebar (icon-only mode) ---------- */
.ddc-sidebar.collapsed {
  width: 72px;
  padding: 18px 8px 18px;
}
.ddc-sidebar.collapsed .ddc-brand {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
.ddc-sidebar.collapsed .ddc-brand > div:last-child,
.ddc-sidebar.collapsed .ddc-nav-label,
.ddc-sidebar.collapsed .ddc-nav-badge,
.ddc-sidebar.collapsed .ddc-nav-submenu-chevron,
.ddc-sidebar.collapsed .ddc-nav-section,
.ddc-sidebar.collapsed .ddc-upgrade-card > div,
.ddc-sidebar.collapsed .ddc-nav-submenu {
  display: none !important;
}
.ddc-sidebar.collapsed .ddc-nav-item {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
  position: relative;
}
.ddc-sidebar.collapsed .ddc-nav-icon {
  margin: 0 auto;
}
.ddc-sidebar.collapsed .ddc-sidebar-footer {
  padding: 6px;
}
.ddc-sidebar.collapsed .ddc-upgrade-card {
  padding: 10px 6px;
  text-align: center;
}
.ddc-sidebar.collapsed .ddc-upgrade-card .ddc-modern-btn {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  margin: 0 auto;
}
.ddc-sidebar.collapsed .ddc-upgrade-card .ddc-modern-btn span,
.ddc-sidebar.collapsed .ddc-upgrade-card .ddc-modern-btn-label {
  display: none;
}

/* ---------- Main content shifts when sidebar collapses (v3.5.6: respect gaps) ---------- */
.ddc-main {
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
body.ddc-sidebar-collapsed .ddc-main {
  /* 14px (sidebar left gap) + 72px (collapsed width) + 14px (gap to content) = 100px */
  margin-left: calc(var(--ddc-gap) + 72px + var(--ddc-gap));
}
@media (max-width: 1023px) {
  body.ddc-sidebar-collapsed .ddc-main { margin-left: 0; }
}

/* ---------- Tooltip on hover (collapsed only) ---------- */
.ddc-sidebar.collapsed .ddc-nav-item {
  overflow: visible;
}
.ddc-sidebar.collapsed .ddc-nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.96);
  color: #f1f5f9;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.18s ease;
  z-index: 100;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(34, 211, 238, 0.15);
  backdrop-filter: blur(8px);
}
.ddc-sidebar.collapsed .ddc-nav-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
html.ddc-modern.ddc-light .ddc-sidebar.collapsed .ddc-nav-item::after {
  background: rgba(15, 23, 42, 0.96);
  color: #ffffff;
  border-color: rgba(34, 211, 238, 0.45);
}

/* ---------- Sub-menu (expandable nav item) ---------- */
.ddc-nav-item-wrap {
  display: flex;
  flex-direction: column;
}
.ddc-nav-submenu-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.22s ease;
}
.ddc-nav-item.expanded .ddc-nav-submenu-chevron {
  transform: rotate(90deg);
  color: var(--neon-cyan);
}
.ddc-nav-submenu {
  display: none;
  flex-direction: column;
  padding: 4px 0 6px 36px;
  gap: 2px;
  position: relative;
}
.ddc-nav-submenu::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 4px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.4), rgba(167, 139, 250, 0.2) 70%, transparent);
}
.ddc-nav-item-wrap.expanded .ddc-nav-submenu {
  display: flex;
  animation: ddc-submenu-in 0.22s ease;
}
@keyframes ddc-submenu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ddc-nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.18s ease;
  position: relative;
}
.ddc-nav-subitem::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: rgba(34, 211, 238, 0.3);
  transform: translateY(-50%);
}
.ddc-nav-subitem:hover {
  background: rgba(34, 211, 238, 0.08);
  color: var(--text-primary);
}
.ddc-nav-subitem:hover::before {
  background: var(--neon-cyan);
  width: 12px;
}
.ddc-nav-subitem.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(99, 102, 241, 0.06) 60%, transparent);
  color: var(--text-primary);
  font-weight: 600;
}
.ddc-nav-subitem.active::before {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
  width: 12px;
}
.ddc-nav-sub-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  transition: all 0.2s ease;
}
.ddc-nav-subitem:hover .ddc-nav-sub-num,
.ddc-nav-subitem.active .ddc-nav-sub-num {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

/* Light mode sub-menu */
html.ddc-modern.ddc-light .ddc-nav-subitem {
  color: rgba(203, 213, 225, 0.78) !important;
}
html.ddc-modern.ddc-light .ddc-nav-subitem:hover,
html.ddc-modern.ddc-light .ddc-nav-subitem.active {
  color: #ffffff !important;
  background: rgba(34, 211, 238, 0.14) !important;
}
html.ddc-modern.ddc-light .ddc-nav-sub-num {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
}

/* =====================================================================
   v3.1 — GUIDE TAB (Dashboard Panduan)
   ===================================================================== */
.ddc-guide-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ddc-guide-hero {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(167, 139, 250, 0.10));
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.ddc-guide-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.ddc-guide-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 20%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
.ddc-guide-hero-content {
  position: relative;
  z-index: 1;
}
.ddc-guide-hero h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ddc-guide-hero h2 .ddc-guide-hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.5);
}
.ddc-guide-hero p {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin: 0;
  max-width: 720px;
  line-height: 1.55;
}

/* Progress strip — clickable steps */
.ddc-guide-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 768px) {
  .ddc-guide-steps { grid-template-columns: repeat(2, 1fr); }
}
.ddc-guide-step-pill {
  background: rgba(20, 27, 48, 0.55);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.ddc-guide-step-pill:hover {
  border-color: rgba(34, 211, 238, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.18);
}
.ddc-guide-step-pill.active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(99, 102, 241, 0.12));
  border-color: var(--neon-cyan);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.28);
}
.ddc-guide-step-pill-num {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 8px;
  transition: all 0.22s ease;
}
.ddc-guide-step-pill.active .ddc-guide-step-pill-num,
.ddc-guide-step-pill:hover .ddc-guide-step-pill-num {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
}
.ddc-guide-step-pill-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.ddc-guide-step-pill-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Light mode hero adjustments */
html.ddc-modern.ddc-light .ddc-guide-hero {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(167, 139, 250, 0.08)),
              linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.92));
  border-color: rgba(14, 165, 233, 0.30);
}
html.ddc-modern.ddc-light .ddc-guide-step-pill {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.10);
}

/* Step content card */
.ddc-guide-card {
  background: rgba(15, 20, 36, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}
html.ddc-modern.ddc-light .ddc-guide-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
.ddc-guide-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.ddc-guide-card-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.45);
  flex-shrink: 0;
}
.ddc-guide-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.ddc-guide-card-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ddc-guide-card-body {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
}
.ddc-guide-card-body p { margin: 0 0 12px; }
.ddc-guide-card-body ol,
.ddc-guide-card-body ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.ddc-guide-card-body ol li,
.ddc-guide-card-body ul li {
  margin-bottom: 8px;
}
.ddc-guide-card-body strong {
  color: var(--text-primary);
  font-weight: 700;
}
.ddc-guide-card-body code {
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(34, 211, 238, 0.10);
  color: var(--neon-cyan);
  border: 1px solid rgba(34, 211, 238, 0.20);
}
html.ddc-modern.ddc-light .ddc-guide-card-body code {
  background: rgba(8, 145, 178, 0.10);
  color: #0e7490;
  border-color: rgba(14, 165, 233, 0.25);
}

/* Code block */
.ddc-guide-code {
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0;
}
.ddc-guide-code-head {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.3));
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
  padding: 9px 14px;
  font-size: 11.5px;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ddc-guide-code-head .ddc-guide-method {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
}
.ddc-guide-code pre {
  margin: 0;
  padding: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #cbd5e1;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  overflow-x: auto;
}
html.ddc-modern.ddc-light .ddc-guide-code {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(34, 211, 238, 0.35);
}

/* Info / tip / warning callouts */
.ddc-guide-callout {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ddc-guide-callout i { flex-shrink: 0; font-size: 14px; margin-top: 2px; }
.ddc-guide-callout.info {
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--text-secondary);
}
.ddc-guide-callout.info i { color: var(--neon-cyan); }
.ddc-guide-callout.tip {
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: var(--text-secondary);
}
.ddc-guide-callout.tip i { color: var(--neon-green); }
.ddc-guide-callout.warn {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: var(--text-secondary);
}
.ddc-guide-callout.warn i { color: #fbbf24; }
.ddc-guide-callout.purple {
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: var(--text-secondary);
}
.ddc-guide-callout.purple i { color: var(--neon-purple); }

/* Light mode callouts */
html.ddc-modern.ddc-light .ddc-guide-callout.info {
  background: rgba(8, 145, 178, 0.08);
  border-color: rgba(8, 145, 178, 0.30);
  color: #334155;
}
html.ddc-modern.ddc-light .ddc-guide-callout.tip {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.30);
  color: #334155;
}
html.ddc-modern.ddc-light .ddc-guide-callout.warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.30);
  color: #334155;
}
html.ddc-modern.ddc-light .ddc-guide-callout.purple {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.30);
  color: #334155;
}

/* Step nav buttons (prev/next) */
.ddc-guide-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.ddc-guide-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(20, 27, 48, 0.6);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}
.ddc-guide-nav-btn:hover {
  background: rgba(34, 211, 238, 0.10);
  border-color: var(--neon-cyan);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.ddc-guide-nav-btn.primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.35);
}
.ddc-guide-nav-btn.primary:hover {
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.5);
}
.ddc-guide-nav-btn:disabled,
.ddc-guide-nav-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* API table */
.ddc-guide-table {
  width: 100%;
  font-size: 12.5px;
  border-collapse: collapse;
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
}
.ddc-guide-table thead {
  background: rgba(34, 211, 238, 0.08);
}
.ddc-guide-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-glass);
}
.ddc-guide-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: top;
}
.ddc-guide-table tr:last-child td { border-bottom: none; }
.ddc-guide-table .req {
  color: var(--neon-green);
  font-weight: 700;
}
.ddc-guide-table .opt {
  color: var(--text-muted);
  font-size: 11px;
}

/* Endpoint badge */
.ddc-guide-endpoint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 20, 36, 0.6);
  border: 1px solid rgba(34, 211, 238, 0.18);
  font-family: 'SF Mono', monospace;
  font-size: 12.5px;
  color: var(--text-primary);
  margin: 6px 0;
}
.ddc-guide-endpoint .method {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}
.ddc-guide-endpoint .method.post { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.ddc-guide-endpoint .method.get { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
html.ddc-modern.ddc-light .ddc-guide-endpoint {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.10);
}

/* ============================================================
   v3.2 — FINANCE / KEUANGAN MODULE
   ============================================================ */

/* Sub-tab pills (finance navigation) */
.ddc-finance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
}
.ddc-finance-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  color: var(--text-secondary, #94a3b8);
  font-family: inherit;
  flex: 1 1 180px;
  min-width: 0;
}
.ddc-finance-tab:hover {
  background: rgba(6,182,212,0.08);
  border-color: rgba(6,182,212,0.4);
  transform: translateY(-1px);
}
.ddc-finance-tab.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(6,182,212,0.18));
  border-color: rgba(16,185,129,0.5);
  color: var(--text-primary, #f1f5f9);
  box-shadow: 0 4px 20px rgba(16,185,129,0.25);
}
.ddc-finance-tab-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,0.18);
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.ddc-finance-tab.active .ddc-finance-tab-num {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: white;
}
.ddc-finance-tab-icon {
  font-size: 18px;
  opacity: .75;
  flex-shrink: 0;
}
.ddc-finance-tab.active .ddc-finance-tab-icon { opacity: 1; color: #10b981; }
.ddc-finance-tab-label { display: flex; flex-direction: column; min-width: 0; }
.ddc-finance-tab-title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.ddc-finance-tab-sub { font-size: 11px; opacity: .6; line-height: 1.3; }

/* Loading / empty states */
.ddc-finance-loading,
.ddc-finance-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary, #94a3b8);
  font-size: 14px;
}
.ddc-finance-loading i { margin-right: 8px; }
.ddc-finance-empty i { display: block; font-size: 36px; margin-bottom: 12px; opacity: .4; }
.ddc-finance-empty-cell {
  text-align: center !important;
  padding: 40px 20px !important;
  color: var(--text-secondary, #94a3b8);
}
.ddc-finance-empty-cell i { display: block; font-size: 28px; margin-bottom: 10px; opacity: .4; }

/* HERO net profit card */
.ddc-finance-hero {
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 22px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.ddc-finance-hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ddc-finance-hero-inner {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; position: relative; z-index: 1;
}
.ddc-finance-hero-left { flex: 1 1 280px; min-width: 0; }
.ddc-finance-hero-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  opacity: .85; margin-bottom: 10px;
  text-transform: uppercase;
}
.ddc-finance-hero-amount {
  font-size: 44px; font-weight: 800;
  line-height: 1.1; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.ddc-finance-hero-meta { font-size: 14px; opacity: .92; }
.ddc-finance-hero-meta strong { font-weight: 700; }
.ddc-finance-hero-right { display: flex; gap: 12px; flex-wrap: wrap; }
.ddc-finance-hero-pill {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  min-width: 140px;
}
.ddc-finance-hero-pill-label { font-size: 11px; opacity: .8; letter-spacing: .5px; text-transform: uppercase; }
.ddc-finance-hero-pill-value { font-size: 18px; font-weight: 700; margin-top: 4px; }

/* 4 KPI grid */
.ddc-finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.ddc-finance-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: all .2s;
}
.ddc-finance-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-grad, linear-gradient(135deg,#10b981,#059669));
}
.ddc-finance-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(148,163,184,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.ddc-finance-kpi-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.ddc-finance-kpi-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--kpi-grad);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.ddc-finance-kpi-label {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ddc-finance-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary, #f1f5f9);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.ddc-finance-kpi-foot {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  opacity: .8;
  margin-top: 8px;
}

/* Chart cards (cashflow + pie) */
.ddc-finance-chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .ddc-finance-chart-grid { grid-template-columns: 1fr; }
}
.ddc-finance-chart-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  padding: 18px;
}
.ddc-finance-chart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px; gap: 10px; flex-wrap: wrap;
}
.ddc-finance-chart-head h3 {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin: 0;
}
.ddc-finance-chart-sub { font-size: 11px; color: var(--text-secondary, #94a3b8); margin-top: 2px; }
.ddc-finance-chart-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
}
.ddc-finance-chart-legend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.ddc-finance-chart-body {
  position: relative;
  height: 280px;
}
.ddc-finance-chart-card.pie .ddc-finance-chart-body { height: 240px; }

/* Section heads */
.ddc-finance-section-head {
  margin: 22px 0 12px;
}
.ddc-finance-section-head h3 {
  font-size: 15px; font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin: 0;
}
.ddc-finance-section-sub {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 3px;
}

/* Smart insight cards */
.ddc-finance-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.ddc-finance-insight-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-left: 3px solid #6366f1;
}
.ddc-finance-insight-card.success { border-left-color: #10b981; background: rgba(16,185,129,.06); }
.ddc-finance-insight-card.warning { border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.ddc-finance-insight-card.danger  { border-left-color: #ef4444; background: rgba(239,68,68,.06); }
.ddc-finance-insight-card.info    { border-left-color: #06b6d4; background: rgba(6,182,212,.06); }
.ddc-finance-insight-icon {
  font-size: 18px;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
}
.ddc-finance-insight-card.success .ddc-finance-insight-icon { color: #10b981; background: rgba(16,185,129,.15); }
.ddc-finance-insight-card.warning .ddc-finance-insight-icon { color: #f59e0b; background: rgba(245,158,11,.15); }
.ddc-finance-insight-card.danger  .ddc-finance-insight-icon { color: #ef4444; background: rgba(239,68,68,.15); }
.ddc-finance-insight-card.info    .ddc-finance-insight-icon { color: #06b6d4; background: rgba(6,182,212,.15); }
.ddc-finance-insight-body { flex: 1; min-width: 0; }
.ddc-finance-insight-title {
  font-weight: 700; font-size: 14px;
  color: var(--text-primary, #f1f5f9);
  margin-bottom: 3px;
}
.ddc-finance-insight-msg {
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.45;
}
.ddc-finance-insight-action {
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
  color: #06b6d4;
}

/* Transaction feed */
.ddc-finance-transaction-list {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  overflow: hidden;
}
.ddc-finance-tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  transition: background .15s;
}
.ddc-finance-tx-row:last-child { border-bottom: none; }
.ddc-finance-tx-row:hover { background: rgba(255,255,255,.03); }
.ddc-finance-tx-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.ddc-finance-tx-icon.emerald { background: rgba(16,185,129,.18); color: #10b981; }
.ddc-finance-tx-icon.amber   { background: rgba(245,158,11,.18); color: #f59e0b; }
.ddc-finance-tx-icon.rose    { background: rgba(244,63,94,.18);  color: #f43f5e; }
.ddc-finance-tx-main { flex: 1; min-width: 0; }
.ddc-finance-tx-title {
  font-weight: 600; font-size: 13px;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddc-finance-tx-meta {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 2px;
}
.ddc-finance-tx-type {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}
.ddc-finance-tx-type.emerald { background: rgba(16,185,129,.18); color: #10b981; }
.ddc-finance-tx-type.amber   { background: rgba(245,158,11,.18); color: #f59e0b; }
.ddc-finance-tx-type.rose    { background: rgba(244,63,94,.18);  color: #f43f5e; }
.ddc-finance-tx-amount {
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ddc-finance-tx-amount.emerald { color: #10b981; }
.ddc-finance-tx-amount.amber   { color: #f59e0b; }
.ddc-finance-tx-amount.rose    { color: #f43f5e; }

/* Action bar (for sub-pages) */
.ddc-finance-actionbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ddc-finance-actionbar-info {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ddc-finance-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 20px;
  color: var(--text-secondary, #94a3b8);
}
.ddc-finance-pill strong { color: var(--text-primary, #f1f5f9); }
.ddc-finance-pill.good { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #10b981; }
.ddc-finance-pill.bad  { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35);  color: #ef4444; }

/* Buttons */
.ddc-finance-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 10px;
  color: var(--text-primary, #f1f5f9);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.ddc-finance-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(148,163,184,0.4); }
.ddc-finance-btn.primary {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(16,185,129,.3);
}
.ddc-finance-btn.primary:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16,185,129,.4);
}
.ddc-finance-icon-btn {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  margin-left: 4px;
  transition: all .15s;
}
.ddc-finance-icon-btn:hover { background: rgba(6,182,212,.18); color: #06b6d4; border-color: rgba(6,182,212,.4); }
.ddc-finance-icon-btn.danger:hover { background: rgba(239,68,68,.18); color: #ef4444; border-color: rgba(239,68,68,.4); }

/* Form (inline add/edit) */
.ddc-finance-form-wrap {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.ddc-finance-form h4 {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 14px;
}
.ddc-finance-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ddc-finance-form-grid label {
  display: flex; flex-direction: column;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .5px;
  gap: 4px;
}
.ddc-finance-form-grid label.full { grid-column: 1 / -1; }
.ddc-finance-form-grid input,
.ddc-finance-form-grid select {
  background: rgba(15,23,42,.4);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary, #f1f5f9);
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.ddc-finance-form-grid input:focus,
.ddc-finance-form-grid select:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}
.ddc-finance-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.15);
}

/* Tables */
.ddc-finance-table-wrap {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  overflow: hidden;
  overflow-x: auto;
}
.ddc-finance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ddc-finance-table thead th {
  background: rgba(255,255,255,.04);
  color: var(--text-secondary, #94a3b8);
  font-size: 11px;
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid rgba(148,163,184,.15);
}
.ddc-finance-table th.right, .ddc-finance-table td.right { text-align: right; }
.ddc-finance-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(148,163,184,.08);
  color: var(--text-primary, #f1f5f9);
}
.ddc-finance-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.ddc-finance-table td.amount,
.ddc-finance-table td.amount-pos,
.ddc-finance-table td.amount-neg {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ddc-finance-table td.amount     { color: #f59e0b; }
.ddc-finance-table td.amount-pos { color: #10b981; }
.ddc-finance-table td.amount-neg { color: #ef4444; }
.ddc-finance-table tfoot th {
  background: rgba(255,255,255,.04);
  padding: 12px;
  font-weight: 700;
  border-top: 2px solid rgba(148,163,184,.2);
  color: var(--text-primary, #f1f5f9);
}
.ddc-finance-table tfoot th.total {
  color: #10b981;
  font-size: 14px;
}
.ddc-finance-cat-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.ddc-finance-method {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(148,163,184,.15);
  border-radius: 6px;
  color: var(--text-secondary, #94a3b8);
}

/* ROAS badge (color-coded) */
.ddc-finance-roas-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 14px;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.ddc-finance-roas-badge.green { background: rgba(16,185,129,.15); color: #10b981; border-color: rgba(16,185,129,.4); }
.ddc-finance-roas-badge.amber { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.4); }
.ddc-finance-roas-badge.red   { background: rgba(239,68,68,.15);  color: #ef4444; border-color: rgba(239,68,68,.4); }

/* Platform badge */
.ddc-finance-platform-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid;
}

/* Platform summary cards (Ads sub-tab) */
.ddc-finance-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ddc-finance-platform-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  padding: 14px;
}
.ddc-finance-platform-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ddc-finance-platform-spend {
  font-size: 22px; font-weight: 800;
  color: var(--text-primary, #f1f5f9);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.ddc-finance-platform-stats {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 4px;
}
.ddc-finance-platform-roas { margin-top: 10px; }

/* P&L Table */
.ddc-finance-pnl-wrap {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  overflow: hidden;
}
.ddc-finance-pnl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ddc-finance-pnl-table td {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(148,163,184,.08);
  color: var(--text-primary, #f1f5f9);
}
.ddc-finance-pnl-table td.right { text-align: right; font-variant-numeric: tabular-nums; }
.ddc-finance-pnl-table td.pct {
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
  width: 90px;
}
.ddc-finance-pnl-table td.amount-pos { color: #10b981; font-weight: 700; }
.ddc-finance-pnl-table td.amount-neg { color: #ef4444; font-weight: 700; }
.ddc-finance-pnl-table tr.section-head td {
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--text-secondary, #94a3b8);
  padding: 8px 18px;
  text-transform: uppercase;
  border-top: 2px solid rgba(148,163,184,.12);
}
.ddc-finance-pnl-table tr.subtotal td,
.ddc-finance-pnl-table tr.subtotal-light td {
  background: rgba(99,102,241,.06);
  border-top: 1px solid rgba(99,102,241,.2);
}
.ddc-finance-pnl-table tr.subtotal-light td { background: rgba(255,255,255,.025); }
.ddc-finance-pnl-table tr.grand-total td {
  font-size: 18px;
  padding: 16px 18px;
  border-top: 2px solid;
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.4);
  color: #10b981 !important;
}
.ddc-finance-pnl-table tr.grand-total.loss td {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.4);
  color: #ef4444 !important;
}
.ddc-finance-pnl-hint {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  opacity: .7;
  font-style: italic;
  font-weight: 400;
  margin-left: 4px;
}

.ddc-finance-pnl-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px;
  background: rgba(255,255,255,.025);
  border-top: 1px solid rgba(148,163,184,.12);
}
.ddc-finance-pnl-summary-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.ddc-finance-pnl-summary-card .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
}
.ddc-finance-pnl-summary-card .value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, #f1f5f9);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ddc-finance-pnl-summary-card .value.good { color: #10b981; }
.ddc-finance-pnl-summary-card .value.bad  { color: #ef4444; }

/* Categories grid */
.ddc-finance-cat-group { margin-bottom: 22px; }
.ddc-finance-cat-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  padding: 6px 12px;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ddc-finance-cat-group-count {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(148,163,184,.15);
  border-radius: 10px;
  color: var(--text-secondary, #94a3b8);
}
.ddc-finance-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ddc-finance-cat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  transition: all .15s;
}
.ddc-finance-cat-item:hover { transform: translateY(-1px); border-color: rgba(148,163,184,.32); }
.ddc-finance-cat-item-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ddc-finance-cat-item-body { flex: 1; min-width: 0; }
.ddc-finance-cat-item-name {
  font-weight: 700; font-size: 13px;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddc-finance-cat-item-meta { margin-top: 4px; }
.ddc-finance-cat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: .3px;
}
.ddc-finance-cat-badge.default { background: rgba(148,163,184,.18); color: var(--text-secondary, #94a3b8); }
.ddc-finance-cat-badge.custom { background: rgba(6,182,212,.18); color: #06b6d4; }

/* ============================================================
   LIGHT MODE OVERRIDES (v3.2)
   ============================================================ */
html.ddc-modern.ddc-light .ddc-finance-tab {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(15,23,42,.1) !important;
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-finance-tab.active {
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(6,182,212,.12)) !important;
  border-color: rgba(16,185,129,.4) !important;
  color: #0f172a !important;
}
html.ddc-modern.ddc-light .ddc-finance-tab-num { background: rgba(15,23,42,.08) !important; color: #475569 !important; }
html.ddc-modern.ddc-light .ddc-finance-tab.active .ddc-finance-tab-num { background: linear-gradient(135deg, #10b981, #06b6d4) !important; color: white !important; }
html.ddc-modern.ddc-light .ddc-finance-tab-title { color: #0f172a !important; }
html.ddc-modern.ddc-light .ddc-finance-tab-sub { color: #64748b !important; }

html.ddc-modern.ddc-light .ddc-finance-kpi,
html.ddc-modern.ddc-light .ddc-finance-chart-card,
html.ddc-modern.ddc-light .ddc-finance-insight-card,
html.ddc-modern.ddc-light .ddc-finance-transaction-list,
html.ddc-modern.ddc-light .ddc-finance-table-wrap,
html.ddc-modern.ddc-light .ddc-finance-platform-card,
html.ddc-modern.ddc-light .ddc-finance-pnl-wrap,
html.ddc-modern.ddc-light .ddc-finance-form-wrap,
html.ddc-modern.ddc-light .ddc-finance-cat-item {
  background: white !important;
  border-color: rgba(15,23,42,.1) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
html.ddc-modern.ddc-light .ddc-finance-kpi-label,
html.ddc-modern.ddc-light .ddc-finance-kpi-foot,
html.ddc-modern.ddc-light .ddc-finance-chart-sub,
html.ddc-modern.ddc-light .ddc-finance-section-sub,
html.ddc-modern.ddc-light .ddc-finance-tx-meta,
html.ddc-modern.ddc-light .ddc-finance-pnl-hint {
  color: #64748b !important;
}
html.ddc-modern.ddc-light .ddc-finance-kpi-value,
html.ddc-modern.ddc-light .ddc-finance-chart-head h3,
html.ddc-modern.ddc-light .ddc-finance-section-head h3,
html.ddc-modern.ddc-light .ddc-finance-tx-title,
html.ddc-modern.ddc-light .ddc-finance-insight-title,
html.ddc-modern.ddc-light .ddc-finance-cat-item-name,
html.ddc-modern.ddc-light .ddc-finance-cat-group-head,
html.ddc-modern.ddc-light .ddc-finance-form h4 {
  color: #0f172a !important;
}
html.ddc-modern.ddc-light .ddc-finance-table thead th,
html.ddc-modern.ddc-light .ddc-finance-table tfoot th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: rgba(15,23,42,.08) !important;
}
html.ddc-modern.ddc-light .ddc-finance-table tbody td {
  color: #0f172a !important;
  border-color: rgba(15,23,42,.06) !important;
}
html.ddc-modern.ddc-light .ddc-finance-table tbody tr:hover td { background: #f8fafc !important; }
html.ddc-modern.ddc-light .ddc-finance-pnl-table td {
  color: #0f172a !important;
  border-color: rgba(15,23,42,.06) !important;
}
html.ddc-modern.ddc-light .ddc-finance-pnl-table tr.section-head td {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: rgba(15,23,42,.1) !important;
}
html.ddc-modern.ddc-light .ddc-finance-pnl-table tr.subtotal td { background: rgba(99,102,241,.08) !important; }
html.ddc-modern.ddc-light .ddc-finance-pnl-table tr.subtotal-light td { background: #f8fafc !important; }
html.ddc-modern.ddc-light .ddc-finance-pnl-summary {
  background: #f8fafc !important;
  border-color: rgba(15,23,42,.08) !important;
}
html.ddc-modern.ddc-light .ddc-finance-pnl-summary-card {
  background: white !important;
  border-color: rgba(15,23,42,.1) !important;
}
html.ddc-modern.ddc-light .ddc-finance-pnl-summary-card .value { color: #0f172a !important; }
html.ddc-modern.ddc-light .ddc-finance-pnl-summary-card .label { color: #64748b !important; }
html.ddc-modern.ddc-light .ddc-finance-form-grid label { color: #475569 !important; }
html.ddc-modern.ddc-light .ddc-finance-form-grid input,
html.ddc-modern.ddc-light .ddc-finance-form-grid select {
  background: white !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}
html.ddc-modern.ddc-light .ddc-finance-pill {
  background: white !important;
  border-color: rgba(15,23,42,.1) !important;
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-finance-pill strong { color: #0f172a !important; }
html.ddc-modern.ddc-light .ddc-finance-btn {
  background: white !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}
html.ddc-modern.ddc-light .ddc-finance-btn:hover { background: #f8fafc !important; }
html.ddc-modern.ddc-light .ddc-finance-btn.primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  border-color: transparent !important;
}
html.ddc-modern.ddc-light .ddc-finance-icon-btn {
  background: #f8fafc !important;
  border-color: rgba(15,23,42,.1) !important;
  color: #64748b !important;
}
html.ddc-modern.ddc-light .ddc-finance-method {
  background: #e2e8f0 !important;
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-finance-cat-group-count {
  background: #e2e8f0 !important;
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-finance-chart-legend,
html.ddc-modern.ddc-light .ddc-finance-platform-head,
html.ddc-modern.ddc-light .ddc-finance-platform-stats {
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-finance-platform-spend { color: #0f172a !important; }
html.ddc-modern.ddc-light .ddc-finance-tx-row { border-color: rgba(15,23,42,.05) !important; }
html.ddc-modern.ddc-light .ddc-finance-tx-row:hover { background: #f8fafc !important; }
html.ddc-modern.ddc-light .ddc-finance-empty,
html.ddc-modern.ddc-light .ddc-finance-loading,
html.ddc-modern.ddc-light .ddc-finance-empty-cell { color: #64748b !important; }

/* =====================================================================
   v3.5.2 — SIDEBAR PROFESSIONAL POLISH + TOKO ANDA PAGE
   Tujuan: Sidebar lebih breathable, smooth, modern. Gap antar item/section
   ditingkatkan. Hover & active state lebih refined dengan motion halus.
   Menu "Toko Anda" featured di posisi paling atas (sebelum MAIN section).
   ===================================================================== */

/* ---------- Sidebar container: lebih breathable ---------- */
html.ddc-modern .ddc-sidebar {
  /* width inherits from --ddc-sidebar-w (264px) defined at :root */
  padding: 14px 14px 12px;                   /* v3.5.7: compressed to fit without scroll */
  gap: 0;
  /* Halus stagger gradient — lebih cinematic */
  background: linear-gradient(180deg,
    rgba(12, 17, 32, 0.92) 0%,
    rgba(8, 12, 22, 0.96) 60%,
    rgba(6, 9, 18, 0.98) 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.08);
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.04), 12px 0 32px -16px rgba(0, 0, 0, 0.5);
  /* Override default transition for smoother slide */
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  /* v3.5.8: overflow:visible so half-tab toggle button (right:-12px) protrudes
     without triggering horizontal scrollbar. Mask-image moved to .ddc-sidebar-scroll
     because mask creates a clip context that would hide the protruding toggle. */
  overflow: visible !important;
}
/* Match ml of .ddc-main to new sidebar width — uses gap variables for floating layout */
html.ddc-modern .ddc-main {
  margin-left: calc(var(--ddc-gap) + var(--ddc-sidebar-w) + var(--ddc-gap));
  margin-right: var(--ddc-gap);
  margin-top: calc(var(--ddc-header-h) + var(--ddc-gap));
}
html.ddc-modern body.ddc-sidebar-collapsed .ddc-main {
  margin-left: calc(var(--ddc-gap) + 72px + var(--ddc-gap));
}

/* Custom scrollbar — refined */
html.ddc-modern .ddc-sidebar::-webkit-scrollbar { width: 5px; }
html.ddc-modern .ddc-sidebar::-webkit-scrollbar-track { background: transparent; }
html.ddc-modern .ddc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  transition: background 0.2s ease;
}
html.ddc-modern .ddc-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.32); }

/* ---------- Brand block: lebih atas-bawah breathing ---------- */
html.ddc-modern .ddc-brand {
  padding: 10px 12px 14px;
  margin-bottom: 18px;                       /* 16 -> 18 */
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  gap: 12px;
}
html.ddc-modern .ddc-brand-logo {
  width: 42px; height: 42px;                 /* 40 -> 42 */
  border-radius: 13px;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.35),
              0 0 0 1px rgba(34, 211, 238, 0.18),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
html.ddc-modern .ddc-brand-title {
  font-size: 15.5px;
  letter-spacing: -0.012em;
  line-height: 1.15;
}
html.ddc-modern .ddc-brand-sub {
  font-size: 10.5px;
  margin-top: 3px;
  letter-spacing: 0.05em;
  opacity: 0.78;
}

/* ---------- Nav section header: cleaner (v3.5.7: compact) ---------- */
html.ddc-modern .ddc-nav-section {
  margin-top: 10px;                          /* 18 -> 10 (compact) */
  margin-bottom: 4px;                        /* 8 -> 4 */
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 8px;
}
html.ddc-modern .ddc-nav-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), transparent);
}
/* First section (TOKO) — no top margin */
html.ddc-modern .ddc-nav-section:first-of-type {
  margin-top: 2px;
}

/* ---------- Nav item: compact + smooth (v3.5.7) ---------- */
html.ddc-modern .ddc-nav-item {
  padding: 8px 11px;                         /* 11/12 -> 8/11 (compact, no scroll) */
  margin-bottom: 2px;                        /* 4 -> 2 */
  border-radius: 10px;                       /* 11 -> 10 */
  font-size: 13.5px;
  font-weight: 500;
  gap: 12px;
  letter-spacing: -0.002em;
  /* Smoother transition with subtle scale */
  transition: background 0.22s ease,
              color 0.22s ease,
              transform 0.18s ease,
              box-shadow 0.22s ease;
}
html.ddc-modern .ddc-nav-item:hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(59, 130, 246, 0.04));
  transform: translateX(2px);
}
html.ddc-modern .ddc-nav-item:active {
  transform: translateX(2px) scale(0.985);
}
html.ddc-modern .ddc-nav-icon {
  width: 32px; height: 32px;                 /* 30 -> 32 */
  border-radius: 9px;                        /* 8 -> 9 */
  font-size: 13.5px;
  background: rgba(148, 163, 184, 0.07);
  transition: all 0.22s ease;
}
html.ddc-modern .ddc-nav-item.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.08) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.18);
}
html.ddc-modern .ddc-nav-item.active::before {
  top: 10px;
  bottom: 10px;
  width: 3.5px;                              /* 3 -> 3.5 */
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #22d3ee, #3b82f6);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.55),
              0 0 0 1px rgba(34, 211, 238, 0.25);
}

/* ---------- Featured nav item (Toko Anda) — premium gradient ---------- */
html.ddc-modern .ddc-nav-item-featured {
  background: linear-gradient(90deg, rgba(244, 114, 182, 0.10), rgba(167, 139, 250, 0.06) 60%, transparent);
  border: 1px solid rgba(244, 114, 182, 0.18);
}
html.ddc-modern .ddc-nav-item-featured .ddc-nav-icon {
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35),
              0 0 0 1px rgba(236, 72, 153, 0.2);
}
html.ddc-modern .ddc-nav-item-featured:hover {
  background: linear-gradient(90deg, rgba(244, 114, 182, 0.18), rgba(167, 139, 250, 0.10) 60%, transparent);
  border-color: rgba(244, 114, 182, 0.30);
}
html.ddc-modern .ddc-nav-item-featured.active {
  background: linear-gradient(90deg, rgba(244, 114, 182, 0.22), rgba(167, 139, 250, 0.12) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.30);
}
html.ddc-modern .ddc-nav-item-featured.active::before {
  background: linear-gradient(180deg, #ec4899, #a855f7);
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.55);
}
html.ddc-modern .ddc-nav-pulse-dot {
  margin-left: auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ec4899;
  box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7);
  animation: ddc-pulse-dot 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes ddc-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(236, 72, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}

/* ---------- Sub-menu polish ---------- */
html.ddc-modern .ddc-nav-submenu {
  padding: 6px 0 8px 38px;
  gap: 3px;
}
html.ddc-modern .ddc-nav-submenu::before {
  left: 23px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.45), rgba(167, 139, 250, 0.22) 70%, transparent);
}
html.ddc-modern .ddc-nav-subitem {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  gap: 11px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
html.ddc-modern .ddc-nav-subitem:hover {
  background: rgba(34, 211, 238, 0.07);
  transform: translateX(2px);
}
html.ddc-modern .ddc-nav-subitem.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), transparent);
  color: var(--text-primary);
  font-weight: 600;
}

/* ---------- v3.5.9: Upgrade card wrapper (now inside scroll, NOT sticky) ---------- */
html.ddc-modern .ddc-upgrade-card-wrap {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
html.ddc-modern .ddc-upgrade-card {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.14), rgba(59, 130, 246, 0.08));
}
html.ddc-modern .ddc-upgrade-eyebrow { margin-bottom: 4px; font-size: 9.5px; }
html.ddc-modern .ddc-upgrade-title { font-size: 12.5px; margin-bottom: 1px; }
html.ddc-modern .ddc-upgrade-sub { font-size: 10.5px; margin-bottom: 8px; line-height: 1.35; }
html.ddc-modern .ddc-upgrade-btn { padding: 7px 10px; font-size: 11.5px; border-radius: 9px; }

/* ---------- v3.5.9: Sidebar footer = STICKY logout button ---------- */
html.ddc-modern .ddc-sidebar-footer {
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 10px;
  padding-bottom: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}
html.ddc-modern .ddc-sidebar-logout-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(220, 38, 38, 0.06));
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
}
html.ddc-modern .ddc-sidebar-logout-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(220, 38, 38, 0.12));
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
  transform: translateX(2px);
  box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.35);
}
html.ddc-modern .ddc-sidebar-logout-btn:active {
  transform: translateX(2px) scale(0.98);
}
html.ddc-modern .ddc-sidebar-logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
html.ddc-modern .ddc-sidebar-logout-btn:hover .ddc-sidebar-logout-icon {
  background: rgba(239, 68, 68, 0.22);
  color: #fff;
  transform: rotate(-4deg) scale(1.05);
}
html.ddc-modern .ddc-sidebar-logout-label {
  flex: 1;
  text-align: left;
}
/* Light mode logout button */
html.ddc-modern.ddc-light .ddc-sidebar-logout-btn {
  border-color: rgba(239, 68, 68, 0.25);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.04));
  color: #b91c1c;
}
html.ddc-modern.ddc-light .ddc-sidebar-logout-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.10));
  color: #991b1b;
}
html.ddc-modern.ddc-light .ddc-sidebar-logout-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}
/* Collapsed mode: show icon only, hide label */
html.ddc-modern .ddc-sidebar.collapsed .ddc-sidebar-logout-btn {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
html.ddc-modern .ddc-sidebar.collapsed .ddc-sidebar-logout-label {
  display: none;
}
html.ddc-modern .ddc-sidebar.collapsed .ddc-sidebar-logout-icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
/* Collapsed mode: hide upgrade card-wrap entirely (icons only) */
html.ddc-modern .ddc-sidebar.collapsed .ddc-upgrade-card-wrap {
  display: none;
}

/* ---------- Sidebar toggle: half-tab design (v3.5.7) ---------- */
html.ddc-modern .ddc-sidebar-toggle {
  /* Inherits base layout from .ddc-sidebar-toggle (half-tab on right edge) */
  font-size: 12px;
}
html.ddc-modern .ddc-sidebar-toggle:hover {
  /* Slight slide-out feel, but do NOT use scale() — would break half-tab anchor */
  transform: translateY(-50%);
}
html.ddc-modern .ddc-sidebar.collapsed { width: 72px; padding: 14px 10px 12px; }
html.ddc-modern body.ddc-sidebar-collapsed .ddc-main {
  margin-left: calc(var(--ddc-gap) + 72px + var(--ddc-gap));
}

/* Collapsed state — nav-item larger touch target */
html.ddc-modern .ddc-sidebar.collapsed .ddc-nav-item { padding: 10px 0; margin-bottom: 6px; }
html.ddc-modern .ddc-sidebar.collapsed .ddc-nav-icon { width: 38px; height: 38px; font-size: 14px; }
/* Hide pulse dot in collapsed */
html.ddc-modern .ddc-sidebar.collapsed .ddc-nav-pulse-dot { display: none; }
/* Featured item border looks better tucked in collapsed mode */
html.ddc-modern .ddc-sidebar.collapsed .ddc-nav-item-featured {
  background: transparent;
  border-color: transparent;
}
html.ddc-modern .ddc-sidebar.collapsed .ddc-nav-item-featured .ddc-nav-icon {
  /* keep the gradient — that's the highlight */
}

/* Responsive: mobile keep current width */
@media (max-width: 1023px) {
  html.ddc-modern .ddc-sidebar { width: 264px; padding: 14px 14px 12px; }
  html.ddc-modern .ddc-main {
    margin-left: 0;
    margin-right: 0;
    margin-top: calc(var(--ddc-header-h) + 10px);
  }
}

/* Light mode adjustments */
html.ddc-modern.ddc-light .ddc-sidebar {
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.97) 0%,
    rgba(10, 16, 32, 0.99) 60%,
    rgba(8, 13, 26, 1) 100%);
  border-right-color: rgba(255, 255, 255, 0.06);
}
html.ddc-modern.ddc-light .ddc-nav-section::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent);
}
html.ddc-modern.ddc-light .ddc-brand {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html.ddc-modern.ddc-light .ddc-sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* =====================================================================
   v3.5.2 — TOKO ANDA PAGE (standalone tab)
   ===================================================================== */
.ddc-shop-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: ddc-shop-fadein 0.32s ease-out;
}
@keyframes ddc-shop-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- HERO ----- */
.ddc-shop-hero {
  position: relative;
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.10),
    rgba(167, 139, 250, 0.08) 50%,
    rgba(236, 72, 153, 0.08));
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 22px;
  padding: 26px 28px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.ddc-shop-hero-glow {
  position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.20), transparent 38%),
    radial-gradient(circle at 82% 60%, rgba(236, 72, 153, 0.16), transparent 42%);
  filter: blur(28px);
  pointer-events: none;
  animation: ddc-rotate 22s linear infinite;
}
.ddc-shop-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ddc-shop-hero-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 280px;
}
.ddc-shop-hero-icon {
  width: 62px; height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6 50%, #a855f7);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.4),
              0 0 0 1px rgba(34, 211, 238, 0.30),
              inset 0 1px 0 rgba(255,255,255,0.22);
  flex-shrink: 0;
  position: relative;
}
.ddc-shop-hero-content { flex: 1; min-width: 0; }
.ddc-shop-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ddc-shop-hero-eyebrow i { color: var(--neon-cyan); margin-right: 5px; }
.ddc-shop-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  text-transform: none;
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.ddc-shop-hero-shopname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.ddc-shop-hero-url {
  font-family: 'JetBrains Mono', 'Fira Code', Monaco, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(8, 12, 22, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  word-break: break-all;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
              0 0 0 3px rgba(34, 211, 238, 0.06);
}
.ddc-shop-hero-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.ddc-shop-hero-hint i { color: var(--neon-cyan); margin-top: 2px; flex-shrink: 0; }
.ddc-shop-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
.ddc-shop-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
}
.ddc-shop-act-btn.ghost {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.20);
  color: var(--text-primary);
}
.ddc-shop-act-btn.ghost:hover {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--neon-cyan);
  transform: translateY(-1px);
}
.ddc-shop-act-btn.ghost.success {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.40);
  color: #22c55e;
}
.ddc-shop-act-btn.primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.35);
}
.ddc-shop-act-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(34, 211, 238, 0.5);
}

/* ----- GRID of 3 helper cards ----- */
.ddc-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.ddc-shop-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.22s ease;
}
.ddc-shop-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
.ddc-shop-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ddc-shop-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.ddc-shop-card-head h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--text-primary);
}
.ddc-shop-card-head p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.ddc-shop-qr-preview {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}
.ddc-shop-qr-preview img {
  width: 168px;
  height: 168px;
  display: block;
}

.ddc-shop-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
}
.ddc-shop-card-cta:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.10));
  border-color: rgba(34, 211, 238, 0.40);
  color: var(--neon-cyan);
}

.ddc-shop-share-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.ddc-shop-share-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(15, 23, 42, 0.55);
  color: var(--text-primary);
}
.ddc-shop-share-btn i { font-size: 18px; }
.ddc-shop-share-btn.whatsapp:hover { background: rgba(37, 211, 102, 0.14); color: #25d366; border-color: rgba(37, 211, 102, 0.40); transform: translateY(-1px); }
.ddc-shop-share-btn.telegram:hover { background: rgba(34, 158, 217, 0.14); color: #229ed9; border-color: rgba(34, 158, 217, 0.40); transform: translateY(-1px); }
.ddc-shop-share-btn.copy:hover     { background: rgba(34, 211, 238, 0.14); color: var(--neon-cyan); border-color: rgba(34, 211, 238, 0.40); transform: translateY(-1px); }

.ddc-shop-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.5;
}
.ddc-shop-tip i { color: #fbbf24; margin-top: 2px; flex-shrink: 0; }
.ddc-shop-tip strong { color: var(--text-secondary); }

.ddc-shop-embed-code {
  background: #050811;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: #a5f3fc;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  overflow: hidden;
  line-height: 1.55;
}

/* Light mode tweaks for Toko Anda page */
html.ddc-modern.ddc-light .ddc-shop-hero {
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.10),
    rgba(167, 139, 250, 0.08) 50%,
    rgba(236, 72, 153, 0.06));
  border-color: rgba(34, 211, 238, 0.25);
}
html.ddc-modern.ddc-light .ddc-shop-hero-url {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  border-color: rgba(34, 211, 238, 0.30);
}
html.ddc-modern.ddc-light .ddc-shop-hero-hint { color: #475569; }
html.ddc-modern.ddc-light .ddc-shop-hero-shopname { color: #334155; }
html.ddc-modern.ddc-light .ddc-shop-act-btn.ghost {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}
html.ddc-modern.ddc-light .ddc-shop-act-btn.ghost:hover {
  border-color: #22d3ee;
  color: #0891b2;
}
html.ddc-modern.ddc-light .ddc-shop-card {
  background: #fff;
  border-color: #e2e8f0;
}
html.ddc-modern.ddc-light .ddc-shop-card-head h3 { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-shop-card-head p { color: #64748b; }
html.ddc-modern.ddc-light .ddc-shop-card-cta {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}
html.ddc-modern.ddc-light .ddc-shop-share-btn { background: #f8fafc; color: #0f172a; }
html.ddc-modern.ddc-light .ddc-shop-embed-code {
  background: #0f172a;
  border-color: #1e293b;
}

/* Mobile: stack hero actions */
@media (max-width: 720px) {
  .ddc-shop-hero { padding: 22px 18px; }
  .ddc-shop-hero-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .ddc-shop-hero-actions { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .ddc-shop-hero-actions .ddc-shop-act-btn { flex: 1; min-width: 100px; }
  .ddc-shop-hero-url { font-size: 14px; }
  .ddc-shop-hero-icon { width: 54px; height: 54px; font-size: 22px; border-radius: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.5.3 — MODERN SIDEBAR REDESIGN
   Glassmorphism · Search · Draggable Toggle · Smooth Scroll
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Enhanced glassmorphism on the sidebar shell ---------- */
html.ddc-modern .ddc-sidebar {
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.78) 0%,
      rgba(10, 14, 26, 0.82) 50%,
      rgba(10, 14, 26, 0.88) 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.10);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    4px 0 24px -8px rgba(0, 0, 0, 0.45);
}
html.ddc-modern.ddc-light .ddc-sidebar {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(248, 250, 252, 0.92) 100%);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.6),
    4px 0 24px -8px rgba(15, 23, 42, 0.08);
}

/* ---------- Brand text wrapper ---------- */
.ddc-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ddc-brand-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-1, #f1f5f9);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ddc-brand-sub {
  font-size: 11px;
  color: var(--text-3, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
html.ddc-modern.ddc-light .ddc-brand-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-brand-sub { color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════
   SEARCH INPUT (v3.5.3)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-sidebar-search {
  position: relative;
  margin: 14px 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ddc-sidebar-search:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.20);
}
.ddc-sidebar-search:focus-within {
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.40);
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.12),
    0 4px 16px -4px rgba(34, 211, 238, 0.25);
}
.ddc-sidebar-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3, #94a3b8);
  font-size: 12px;
  pointer-events: none;
  transition: color 0.2s ease;
}
.ddc-sidebar-search:focus-within .ddc-sidebar-search-icon {
  color: #22d3ee;
}
#ddc-sidebar-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-1, #f1f5f9);
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  margin: 0;
  font-weight: 500;
}
#ddc-sidebar-search-input::placeholder {
  color: var(--text-3, #94a3b8);
  opacity: 0.7;
  font-weight: 400;
}
/* Remove native search clear button (we use our own) */
#ddc-sidebar-search-input::-webkit-search-cancel-button,
#ddc-sidebar-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.ddc-sidebar-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--text-3, #94a3b8);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ddc-sidebar-search:focus-within .ddc-sidebar-search-kbd { opacity: 0; }

.ddc-sidebar-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-2, #cbd5e1);
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  transition: all 0.18s ease;
}
.ddc-sidebar-search-clear:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  transform: scale(1.08);
}
.ddc-sidebar-search-clear[hidden] { display: none; }

/* Light mode search */
html.ddc-modern.ddc-light .ddc-sidebar-search {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
}
html.ddc-modern.ddc-light .ddc-sidebar-search:hover {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
}
html.ddc-modern.ddc-light .ddc-sidebar-search:focus-within {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(14, 165, 233, 0.45);
}
html.ddc-modern.ddc-light #ddc-sidebar-search-input { color: #0f172a; }
html.ddc-modern.ddc-light #ddc-sidebar-search-input::placeholder { color: #94a3b8; }
html.ddc-modern.ddc-light .ddc-sidebar-search-icon { color: #94a3b8; }
html.ddc-modern.ddc-light .ddc-sidebar-search-kbd {
  color: #64748b;
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.10);
}

/* Hide search input in collapsed sidebar */
.ddc-sidebar.collapsed .ddc-sidebar-search { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   SCROLLABLE NAV WRAPPER (smooth + shadow indicators)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-sidebar-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.18) transparent;
  /* Mask for fade edges */
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  padding: 4px 0;
}
.ddc-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.ddc-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.ddc-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.ddc-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.32);
}

/* Scroll shadow indicators (toggled by JS) */
.ddc-sidebar-scroll::before,
.ddc-sidebar-scroll::after {
  content: '';
  position: sticky;
  left: 0; right: 0;
  height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 5;
}
.ddc-sidebar-scroll::before {
  top: 0;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.85), transparent);
  margin-bottom: -16px;
}
.ddc-sidebar-scroll::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(10, 14, 26, 0.85), transparent);
  margin-top: -16px;
}
.ddc-sidebar-scroll.scroll-shadow-top::before { opacity: 1; }
.ddc-sidebar-scroll.scroll-shadow-bottom::after { opacity: 1; }
html.ddc-modern.ddc-light .ddc-sidebar-scroll::before {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), transparent);
}
html.ddc-modern.ddc-light .ddc-sidebar-scroll::after {
  background: linear-gradient(0deg, rgba(248, 250, 252, 0.95), transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   NAV SECTION LABEL (Title Case, refined spacing)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-section {
  padding: 14px 14px 6px;
  margin-top: 2px;
}
.ddc-nav-section:first-child { padding-top: 4px; }
.ddc-nav-section-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #94a3b8);
  opacity: 0.65;
  padding-left: 4px;
}
html.ddc-modern.ddc-light .ddc-nav-section-label { color: #64748b; }
.ddc-sidebar.collapsed .ddc-nav-section { padding: 12px 4px 4px; }
.ddc-sidebar.collapsed .ddc-nav-section-label {
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.4;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* Hide section label in filter mode (cleaner look) */
.ddc-nav.is-filtering .ddc-nav-section-label { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════
   ACTIVE STATE — stronger indicator with left bar + glow
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-item.active {
  position: relative;
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.15) 0%,
    rgba(59, 130, 246, 0.10) 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(34, 211, 238, 0.28),
    0 4px 16px -4px rgba(34, 211, 238, 0.30),
    0 0 0 0 rgba(34, 211, 238, 0);
}
.ddc-nav-item.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #22d3ee, #3b82f6);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  animation: ddcActiveBarPulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ddcActiveBarPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(34, 211, 238, 0.6); }
  50%      { box-shadow: 0 0 18px rgba(34, 211, 238, 0.95); }
}
.ddc-nav-item.active .ddc-nav-icon {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(59, 130, 246, 0.18)) !important;
  color: #22d3ee !important;
  box-shadow: 0 4px 12px -2px rgba(34, 211, 238, 0.35);
}
html.ddc-modern.ddc-light .ddc-nav-item.active {
  background: linear-gradient(135deg,
    rgba(14, 165, 233, 0.10) 0%,
    rgba(59, 130, 246, 0.06) 100%) !important;
  color: #0369a1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(14, 165, 233, 0.25),
    0 4px 14px -4px rgba(14, 165, 233, 0.22);
}
html.ddc-modern.ddc-light .ddc-nav-item.active .ddc-nav-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.12)) !important;
  color: #0284c7 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGE VARIANTS (v3.5.3)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* NEW — pink/magenta */
.ddc-nav-badge-new {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(236, 72, 153, 0.55);
}
/* COUNT — cyan */
.ddc-nav-badge-count {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(6, 182, 212, 0.55);
  font-size: 10.5px;
}
/* LIVE — green pulse */
.ddc-nav-badge-live {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.55);
  position: relative;
  padding-left: 14px;
}
.ddc-nav-badge-live::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: ddcBadgePulse 1.5s ease-in-out infinite;
}
@keyframes ddcBadgePulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
}
/* WARN — amber */
.ddc-nav-badge-warn {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.55);
}

/* Collapsed sidebar: badge becomes tiny dot */
.ddc-sidebar.collapsed .ddc-nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  overflow: hidden;
  border: 2px solid var(--bg-deep, #0a0e1a);
}
html.ddc-modern.ddc-light .ddc-sidebar.collapsed .ddc-nav-badge {
  border-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   NO RESULTS STATE
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-noresults {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3, #94a3b8);
  opacity: 0.8;
  animation: ddcFadeIn 0.3s ease;
}
.ddc-nav-noresults i {
  font-size: 28px;
  opacity: 0.35;
  margin-bottom: 10px;
  display: block;
}
.ddc-nav-noresults p {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-2, #cbd5e1);
}
.ddc-nav-noresults small {
  font-size: 11.5px;
  opacity: 0.7;
}
.ddc-nav-noresults[hidden] { display: none; }
@keyframes ddcFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   HIDDEN STATE FOR FILTER (avoids reflow jumping)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DRAGGABLE TOGGLE BUTTON (v3.5.3)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-sidebar-toggle {
  /* Restore base look + add drag affordance */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: absolute;
}
.ddc-sidebar-toggle:hover {
  /* hint that it's draggable */
  cursor: grab;
}
.ddc-sidebar-toggle:active { cursor: grabbing; }
.ddc-sidebar-toggle.dragging {
  cursor: grabbing !important;
  /* Keep half-tab translateY anchor while dragging */
  transform: translateY(-50%);
  box-shadow:
    8px 0 24px rgba(34, 211, 238, 0.55),
    0 0 0 2px rgba(34, 211, 238, 0.30) !important;
  transition: box-shadow 0.15s ease;
}
.ddc-sidebar-toggle.has-custom-position {
  /* When user has dragged it, do not apply default top */
}
/* Grip indicator — 3 vertical dots on hover */
.ddc-sidebar-toggle-grip {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, right 0.2s ease;
  pointer-events: none;
}
.ddc-sidebar-toggle-grip::before,
.ddc-sidebar-toggle-grip::after,
.ddc-sidebar-toggle-grip {
  /* using gradient lines via box-shadow */
}
.ddc-sidebar-toggle-grip {
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 3px 2px;
  background-position: 0 0, 0 5px, 0 10px;
  background-repeat: no-repeat;
  color: #22d3ee;
}
.ddc-sidebar-toggle:hover .ddc-sidebar-toggle-grip,
.ddc-sidebar-toggle.dragging .ddc-sidebar-toggle-grip {
  opacity: 0.85;
  right: -14px;
}

/* Tooltip-like hint on first hover (subtle) — disabled in v3.5.7 (was circular) */
.ddc-sidebar-toggle::after {
  content: none;
}
.ddc-sidebar-toggle:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR FOOTER REFACTORED CLASSES (v3.5.3)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  flex-shrink: 0;
}
/* v3.5.9: collapsed footer kept VISIBLE so logout icon remains accessible */
.ddc-sidebar.collapsed .ddc-sidebar-footer { display: block; padding-top: 8px; margin-top: 4px; }

.ddc-upgrade-card {
  position: relative;
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg,
      rgba(34, 211, 238, 0.10) 0%,
      rgba(59, 130, 246, 0.08) 50%,
      rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid rgba(34, 211, 238, 0.20);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ddc-upgrade-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right,
      rgba(34, 211, 238, 0.15),
      transparent 60%);
  pointer-events: none;
}
.ddc-upgrade-card:hover {
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 8px 24px -8px rgba(34, 211, 238, 0.30);
  transform: translateY(-1px);
}
.ddc-upgrade-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #22d3ee;
  margin-bottom: 6px;
}
.ddc-upgrade-eyebrow i { font-size: 11px; }
.ddc-upgrade-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1, #f1f5f9);
  margin-bottom: 2px;
  line-height: 1.3;
}
.ddc-upgrade-sub {
  font-size: 11px;
  color: var(--text-3, #94a3b8);
  margin-bottom: 10px;
  line-height: 1.4;
}
.ddc-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  color: #fff;
  letter-spacing: 0.01em;
}
.ddc-upgrade-btn.primary {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  box-shadow: 0 4px 14px -4px rgba(34, 211, 238, 0.50);
}
.ddc-upgrade-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(34, 211, 238, 0.65);
}
.ddc-upgrade-btn.purple {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 4px 14px -4px rgba(168, 85, 247, 0.50);
}
.ddc-upgrade-btn.purple:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(168, 85, 247, 0.65);
}
.ddc-upgrade-btn i { font-size: 11px; }

html.ddc-modern.ddc-light .ddc-upgrade-card {
  background:
    linear-gradient(135deg,
      rgba(14, 165, 233, 0.06) 0%,
      rgba(59, 130, 246, 0.05) 50%,
      rgba(139, 92, 246, 0.04) 100%);
  border-color: rgba(14, 165, 233, 0.20);
}
html.ddc-modern.ddc-light .ddc-upgrade-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-upgrade-sub { color: #64748b; }
html.ddc-modern.ddc-light .ddc-upgrade-eyebrow { color: #0284c7; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DRAWER POLISH (v3.5.3)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .ddc-sidebar {
    width: 288px !important;
    box-shadow: 8px 0 32px -8px rgba(0, 0, 0, 0.45);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ddc-sidebar-backdrop {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    background: rgba(10, 14, 26, 0.55);
    transition: opacity 0.32s ease;
  }
  html.ddc-modern.ddc-light .ddc-sidebar-backdrop {
    background: rgba(15, 23, 42, 0.35);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS (v3.5.3)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-item {
  transition:
    background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.ddc-nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}
.ddc-nav-item:hover:not(.active) .ddc-nav-icon {
  color: #22d3ee;
  transform: scale(1.08);
}
.ddc-nav-icon {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
html.ddc-modern.ddc-light .ddc-nav-item:hover:not(.active) {
  background: rgba(14, 165, 233, 0.06);
}

/* Sub-item hover lift */
.ddc-nav-subitem {
  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}
.ddc-nav-subitem:hover:not(.active) {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════════
   PULSE DOT (existing element, refined)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}
.ddc-nav-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #22d3ee;
  opacity: 0;
  animation: ddcPulseRing 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ddcPulseRing {
  0%   { opacity: 0.7; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.8); }
}
.ddc-sidebar.collapsed .ddc-nav-pulse-dot {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   PARENT CHEVRON FOR SUBMENU (refined)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-submenu-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3, #94a3b8);
  opacity: 0.6;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.ddc-nav-item-parent.expanded .ddc-nav-submenu-chevron {
  transform: rotate(90deg);
  opacity: 0.9;
  color: #22d3ee;
}
.ddc-sidebar.collapsed .ddc-nav-submenu-chevron { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   COLLAPSED-MODE TOOLTIPS (show label on hover)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-sidebar.collapsed .ddc-nav-item {
  position: relative;
}
.ddc-sidebar.collapsed .ddc-nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.95);
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.ddc-sidebar.collapsed .ddc-nav-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
html.ddc-modern.ddc-light .ddc-sidebar.collapsed .ddc-nav-item::after {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR FLEX LAYOUT (so scroll wrapper takes remaining space)
   ═══════════════════════════════════════════════════════════════════ */
.ddc-sidebar {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
   FOCUS-VISIBLE ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════ */
.ddc-nav-item:focus-visible,
.ddc-nav-subitem:focus-visible,
.ddc-sidebar-search-clear:focus-visible,
.ddc-upgrade-btn:focus-visible,
.ddc-sidebar-toggle:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}
#ddc-sidebar-search-input:focus-visible { outline: none; }

/* End v3.5.3 sidebar redesign */

/* ═══════════════════════════════════════════════════════════════════
   v3.5.4 — LIGHT MODE CONTRAST FIX
   Sebelumnya: light sidebar bg WHITE tapi text masih WHITE (invisible).
   Ini hard-override semua text putih ke gelap untuk kontras tinggi.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Nav item text — gelap di atas bg putih ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item {
  color: #334155 !important;        /* slate-700 — readable on white */
  font-weight: 600;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item .ddc-nav-label {
  color: inherit !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item:hover {
  color: #0f172a !important;        /* slate-900 darker on hover */
  background: rgba(14, 165, 233, 0.08) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item:hover .ddc-nav-label {
  color: #0f172a !important;
}

/* ---------- Active state — colored bg with readable text ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item.active {
  background: linear-gradient(135deg,
    rgba(14, 165, 233, 0.13) 0%,
    rgba(59, 130, 246, 0.09) 100%) !important;
  color: #0369a1 !important;        /* sky-700 high-contrast */
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item.active .ddc-nav-label {
  color: #0369a1 !important;
  font-weight: 700;
}

/* ---------- Nav icon — gradient bg + darker icon for visibility ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(99, 102, 241, 0.08)) !important;
  color: #475569 !important;        /* slate-600 */
  border: 1px solid rgba(15, 23, 42, 0.06);
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item:hover .ddc-nav-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.12)) !important;
  color: #0284c7 !important;        /* sky-600 */
  border-color: rgba(14, 165, 233, 0.25);
  box-shadow: 0 4px 14px -4px rgba(14, 165, 233, 0.30);
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item.active .ddc-nav-icon {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important;
  color: #ffffff !important;        /* white icon on colored bg = high contrast */
  border-color: transparent !important;
  box-shadow: 0 4px 14px -2px rgba(14, 165, 233, 0.45);
}

/* ---------- Section labels ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-section,
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-section-label {
  color: #64748b !important;        /* slate-500 */
  opacity: 0.85;
}

/* ---------- Sub-items ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-subitem {
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-subitem:hover {
  color: #0f172a !important;
  background: rgba(14, 165, 233, 0.06) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-subitem.active {
  color: #0369a1 !important;
  background: rgba(14, 165, 233, 0.10) !important;
  font-weight: 700;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-sub-num {
  color: #64748b !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-subitem.active .ddc-nav-sub-num {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.18) !important;
}

/* ---------- Brand text ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-brand-title {
  color: #0f172a !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #0f172a !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-brand-sub {
  color: #64748b !important;
}

/* ---------- Submenu chevron ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-submenu-chevron {
  color: #94a3b8 !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item-parent.expanded .ddc-nav-submenu-chevron {
  color: #0ea5e9 !important;
}

/* ---------- Badges in light mode — strong contrast ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-badge {
  /* Reset earlier rule completely */
  border: none !important;
  color: #ffffff !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-badge-new {
  background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
  box-shadow: 0 2px 8px -2px rgba(236, 72, 153, 0.40);
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-badge-count {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  box-shadow: 0 2px 8px -2px rgba(6, 182, 212, 0.40);
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-badge-live {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.40);
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-badge-warn {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.40);
}

/* ---------- Upgrade Card — fully contrasted in light mode ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-card {
  background:
    linear-gradient(135deg,
      rgba(14, 165, 233, 0.10) 0%,
      rgba(59, 130, 246, 0.08) 50%,
      rgba(139, 92, 246, 0.06) 100%) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-eyebrow {
  color: #0369a1 !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-title,
html.ddc-modern.ddc-light .ddc-sidebar #ddc-upgrade-title {
  color: #0f172a !important;
  text-shadow: none !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-sub,
html.ddc-modern.ddc-light .ddc-sidebar #ddc-upgrade-sub {
  color: #475569 !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-btn {
  color: #ffffff !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-btn.primary {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important;
  box-shadow: 0 4px 14px -4px rgba(14, 165, 233, 0.50) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-btn.primary:hover {
  box-shadow: 0 8px 22px -4px rgba(14, 165, 233, 0.65) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-btn.purple {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.50) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-upgrade-btn.purple:hover {
  box-shadow: 0 8px 22px -4px rgba(139, 92, 246, 0.65) !important;
}

/* ---------- Pulse dot ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-pulse-dot {
  background: #0ea5e9 !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.55) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-pulse-dot::after {
  border-color: #0ea5e9 !important;
}

/* ---------- Featured item (Toko Anda) — pink/purple gradient bg ---------- */
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item-featured {
  background: linear-gradient(135deg,
    rgba(236, 72, 153, 0.10),
    rgba(139, 92, 246, 0.08)) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item-featured:hover {
  background: linear-gradient(135deg,
    rgba(236, 72, 153, 0.15),
    rgba(139, 92, 246, 0.12)) !important;
}
html.ddc-modern.ddc-light .ddc-sidebar .ddc-nav-item-featured .ddc-nav-icon {
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -2px rgba(236, 72, 153, 0.35);
}

/* ---------- Collapsed tooltip in light mode — already styled, refine ---------- */
html.ddc-modern.ddc-light .ddc-sidebar.collapsed .ddc-nav-item::after {
  color: #0f172a !important;
}

/* End v3.5.4 light-mode contrast fix */

/* ═══════════════════════════════════════════════════════════════════
   v3.5.4 — UPGRADE PLAN MODAL
   Modal dengan list paket dinamis dari /api/plans
   ═══════════════════════════════════════════════════════════════════ */
.ddc-upgrade-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ddcModalFadeIn 0.22s ease;
}
@keyframes ddcModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ddc-upgrade-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 22, 0.72);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.ddc-upgrade-modal-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0f172a 0%, #0a0e1a 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  padding: 28px 28px 24px;
  animation: ddcModalSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: thin;
}
@keyframes ddcModalSlideUp {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.ddc-upgrade-modal-content::-webkit-scrollbar { width: 8px; }
.ddc-upgrade-modal-content::-webkit-scrollbar-track { background: transparent; }
.ddc-upgrade-modal-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 8px;
}

.ddc-upgrade-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}
.ddc-upgrade-modal-close:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  transform: scale(1.06) rotate(90deg);
}

.ddc-upgrade-modal-header {
  text-align: center;
  margin-bottom: 24px;
}
.ddc-upgrade-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.12));
  border: 1px solid rgba(34, 211, 238, 0.30);
  color: #22d3ee;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ddc-upgrade-modal-title {
  font-size: 26px;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.ddc-upgrade-modal-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 18px;
}
.ddc-upgrade-modal-sub strong {
  color: #22d3ee;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(34, 211, 238, 0.15);
  margin-left: 4px;
}

.ddc-billing-toggle {
  display: inline-flex;
  background: rgba(148, 163, 184, 0.10);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.15);
}
.ddc-billing-opt {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ddc-billing-opt:hover {
  color: #cbd5e1;
}
.ddc-billing-opt.active {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(34, 211, 238, 0.40);
}
.ddc-billing-save {
  padding: 1px 6px;
  border-radius: 4px;
  background: #10b981;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ddc-upgrade-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  /* v3.6.16 — ribbon is now inline-flow inside card (not absolute), so we only
     need normal spacing. align-items:stretch keeps card heights equal even
     though featured card has an extra ribbon row at the top. */
  align-items: stretch;
  margin: 24px 0 18px;
}

.ddc-upgrade-card {
  position: relative;
  padding: 0; /* v3.6.16 — inner padding now handled by .ddc-upgrade-card-inner */
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.6);
  border: 1.5px solid rgba(148, 163, 184, 0.18);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* v3.6.16 — safe now, ribbon is inside, not floating */
}
.ddc-upgrade-card-inner {
  /* v3.6.16 — wrapper holding all card content below the optional ribbon */
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ddc-upgrade-card:hover {
  border-color: var(--plan-accent, #22d3ee);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--plan-accent, #22d3ee);
}
.ddc-upgrade-card.is-featured {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(20, 14, 38, 0.92) 0%, rgba(15, 23, 42, 0.92) 100%);
  border-color: transparent;
  box-shadow:
    0 18px 44px -10px rgba(139, 92, 246, 0.55),
    0 0 0 1.5px rgba(167, 139, 250, 0.55) inset,
    0 0 36px -8px rgba(236, 72, 153, 0.35);
  /* v3.6.16 — no transform translate; ribbon row already differentiates visually */
}
.ddc-upgrade-card.is-featured::before {
  /* animated gradient border ring */
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #f59e0b 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  background-size: 200% 200%;
  animation: ddc-ribbon-shine 6s ease infinite;
}
.ddc-upgrade-card.is-featured > * { position: relative; z-index: 2; }
.ddc-upgrade-card.is-current {
  opacity: 0.78;
  border-color: #10b981;
}

/* ============================================================
   v3.6.16 — PREMIUM "PALING DIPILIH" RIBBON (INLINE BANNER)
   Now a full-width banner at the top of the card (NOT absolute),
   so it cannot be clipped by any parent overflow.
   ============================================================ */
.ddc-upgrade-card-ribbon {
  /* inline banner — no absolute positioning, lives in normal flow */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 35%, #ec4899 75%, #f43f5e 100%);
  background-size: 200% 200%;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 18px -6px rgba(236, 72, 153, 0.55) inset;
  position: relative;
  overflow: hidden; /* contain the shimmer overlay */
  animation: ddc-ribbon-shine 4s ease-in-out infinite;
}
.ddc-upgrade-card-ribbon i {
  font-size: 13px;
  color: #fbbf24;
  filter: drop-shadow(0 1px 3px rgba(251, 191, 36, 0.85));
  animation: ddc-ribbon-crown-bob 2.8s ease-in-out infinite;
}
.ddc-upgrade-card-ribbon::after {
  /* sparkle shimmer sliding across the banner */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: -100% 0;
  animation: ddc-ribbon-sparkle 3.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes ddc-ribbon-shine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes ddc-ribbon-crown-bob {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(6deg)  translateY(-1px); }
}
@keyframes ddc-ribbon-sparkle {
  0%   { background-position: -100% 0; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { background-position: 200% 0; opacity: 0; }
}

/* Light-mode ribbon — keep vibrancy but darker text for contrast safety */
html.ddc-modern.ddc-light .ddc-upgrade-card.is-featured {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 18px 44px -10px rgba(139, 92, 246, 0.30),
    0 0 0 1.5px rgba(167, 139, 250, 0.45) inset;
}

/* Mobile — keep banner readable */
@media (max-width: 720px) {
  .ddc-upgrade-card-ribbon {
    font-size: 10px;
    padding: 9px 12px;
    letter-spacing: 0.10em;
  }
  .ddc-upgrade-modal-grid { padding-top: 18px; }
}
.ddc-upgrade-card-current-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.20);
  color: #34d399;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border: 1px solid rgba(16, 185, 129, 0.40);
}
.ddc-upgrade-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--plan-accent, #22d3ee), color-mix(in srgb, var(--plan-accent, #22d3ee) 70%, #1e293b));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  margin: 8px 0 14px;
  box-shadow: 0 8px 20px -4px var(--plan-accent, #22d3ee);
}
.ddc-upgrade-card-name {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.ddc-upgrade-card-tag {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 16px;
  min-height: 30px;
}
.ddc-upgrade-card-price-wrap {
  padding: 14px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.06);
  margin-bottom: 14px;
}
.ddc-upgrade-card-old {
  font-size: 13px;
  color: #94a3b8;
  text-decoration: line-through;
  margin-bottom: 2px;
}
.ddc-upgrade-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1;
}
.ddc-upgrade-card-price .curr {
  font-size: 14px;
  color: #94a3b8;
}
.ddc-upgrade-card-price > *:nth-child(2),
.ddc-upgrade-card-price {
  font-size: 36px;
}
.ddc-upgrade-card-price .unit {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 700;
}
.ddc-upgrade-card-price .unit small {
  font-size: 11px;
  opacity: 0.85;
  margin-left: 2px;
}
.ddc-upgrade-card-yearly-eq {
  margin-top: 6px;
  font-size: 11px;
  color: #10b981;
  font-weight: 700;
}
.ddc-upgrade-card-trial {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, 0.20);
  font-size: 11.5px;
  color: #cbd5e1;
  font-weight: 600;
}
.ddc-upgrade-card-trial i {
  color: #10b981;
  margin-right: 4px;
}

.ddc-upgrade-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--plan-accent, #22d3ee), color-mix(in srgb, var(--plan-accent, #22d3ee) 60%, #3b82f6));
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px -4px var(--plan-accent, #22d3ee);
}
.ddc-upgrade-card-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px var(--plan-accent, #22d3ee);
}
.ddc-upgrade-card-btn:disabled {
  background: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}
.ddc-upgrade-card.is-current .ddc-upgrade-card-btn {
  background: rgba(16, 185, 129, 0.20);
  color: #34d399;
}

.ddc-upgrade-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ddc-upgrade-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.45;
}
.ddc-upgrade-card-features li i {
  color: var(--plan-accent, #22d3ee);
  font-size: 11px;
  margin-top: 3px;
  flex-shrink: 0;
}

.ddc-upgrade-modal-footer {
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 12px;
  color: #94a3b8;
}
.ddc-upgrade-modal-footer i {
  color: #10b981;
  margin-right: 6px;
}

/* Light mode upgrade modal */
html.ddc-modern.ddc-light .ddc-upgrade-modal-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(15, 23, 42, 0.10);
}
html.ddc-modern.ddc-light .ddc-upgrade-modal-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-upgrade-modal-sub { color: #64748b; }
html.ddc-modern.ddc-light .ddc-upgrade-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
}
html.ddc-modern.ddc-light .ddc-upgrade-card-name { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-upgrade-card-tag { color: #64748b; }
html.ddc-modern.ddc-light .ddc-upgrade-card-price { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-upgrade-card-features li { color: #475569; }
html.ddc-modern.ddc-light .ddc-upgrade-card-price-wrap { background: rgba(15, 23, 42, 0.04); }
html.ddc-modern.ddc-light .ddc-upgrade-card-old,
html.ddc-modern.ddc-light .ddc-upgrade-card-price .curr,
html.ddc-modern.ddc-light .ddc-upgrade-card-price .unit { color: #94a3b8; }
html.ddc-modern.ddc-light .ddc-upgrade-card-trial { color: #475569; }
html.ddc-modern.ddc-light .ddc-billing-toggle {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}
html.ddc-modern.ddc-light .ddc-billing-opt:not(.active) { color: #64748b; }
html.ddc-modern.ddc-light .ddc-upgrade-modal-close {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.10);
  color: #64748b;
}
html.ddc-modern.ddc-light .ddc-upgrade-modal-footer { color: #64748b; }

@media (max-width: 720px) {
  .ddc-upgrade-modal { padding: 0; }
  .ddc-upgrade-modal-content {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
    padding: 22px 16px;
  }
  .ddc-upgrade-modal-title { font-size: 20px; }
  .ddc-upgrade-modal-grid { grid-template-columns: 1fr; gap: 12px; }
  .ddc-upgrade-card-price > *:nth-child(2),
  .ddc-upgrade-card-price { font-size: 28px; }
}

/* End v3.5.4 upgrade modal */

/* ============================================================
   v3.5.5 — Payment Methods Super Dashboard UI
   ============================================================ */

.ddc-paymethod-banner {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(14,165,233,0.08));
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  color: #0f172a;
}
.ddc-paymethod-banner > i {
  font-size: 22px;
  color: #10b981;
  margin-top: 2px;
}
.ddc-paymethod-banner code {
  background: rgba(15,23,42,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #0369a1;
}
html.dark .ddc-paymethod-banner { color: #e2e8f0; }
html.dark .ddc-paymethod-banner code { background: rgba(255,255,255,0.08); color: #38bdf8; }

/* Grid of payment method cards */
.ddc-paymethod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.ddc-paymethod-card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  padding-left: 38px;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.ddc-paymethod-card:hover {
  border-color: var(--method-accent, #0ea5e9);
  box-shadow: 0 6px 18px rgba(15,23,42,0.08), 0 0 0 3px color-mix(in srgb, var(--method-accent, #0ea5e9) 8%, transparent);
  transform: translateY(-2px);
}
.ddc-paymethod-card.is-inactive {
  opacity: 0.6;
  background: #f8fafc;
}
.ddc-paymethod-card.is-dragging {
  opacity: 0.5;
  transform: rotate(2deg) scale(0.98);
  cursor: grabbing !important;
}
.ddc-paymethod-card.is-drop-over {
  border-color: #10b981;
  border-style: dashed;
  background: rgba(16,185,129,0.05);
}

html.dark .ddc-paymethod-card {
  background: #0f172a;
  border-color: #334155;
}
html.dark .ddc-paymethod-card.is-inactive { background: #1e293b; }

.ddc-paymethod-drag {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: grab;
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.ddc-paymethod-card:hover .ddc-paymethod-drag { opacity: 1; }

.ddc-paymethod-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ddc-paymethod-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--method-accent, #0ea5e9) 14%, transparent), color-mix(in srgb, var(--method-accent, #0ea5e9) 6%, transparent));
  color: var(--method-accent, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ddc-paymethod-icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.ddc-paymethod-info { flex: 1; min-width: 0; }
.ddc-paymethod-name {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ddc-paymethod-code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}
html.dark .ddc-paymethod-name { color: #f1f5f9; }
html.dark .ddc-paymethod-code { color: #94a3b8; }

.ddc-paymethod-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.ddc-pm-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ddc-pm-badge-slate { background: #e2e8f0; color: #475569; }
.ddc-pm-badge-sky { background: #e0f2fe; color: #0369a1; }
.ddc-pm-badge-emerald { background: #d1fae5; color: #047857; }
.ddc-pm-badge-amber { background: #fef3c7; color: #b45309; }
.ddc-pm-badge-rose { background: #ffe4e6; color: #be123c; }
.ddc-pm-badge-violet { background: #ede9fe; color: #6d28d9; }
html.dark .ddc-pm-badge-slate { background: rgba(148,163,184,0.18); color: #cbd5e1; }
html.dark .ddc-pm-badge-sky { background: rgba(14,165,233,0.18); color: #7dd3fc; }
html.dark .ddc-pm-badge-emerald { background: rgba(16,185,129,0.18); color: #6ee7b7; }
html.dark .ddc-pm-badge-amber { background: rgba(245,158,11,0.18); color: #fcd34d; }
html.dark .ddc-pm-badge-rose { background: rgba(244,63,94,0.18); color: #fda4af; }
html.dark .ddc-pm-badge-violet { background: rgba(139,92,246,0.18); color: #c4b5fd; }

.ddc-paymethod-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 12px;
}
html.dark .ddc-paymethod-desc { color: #cbd5e1; }

.ddc-paymethod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ddc-pm-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ddc-pm-chip i { font-size: 10px; opacity: 0.7; }
html.dark .ddc-pm-chip { background: rgba(148,163,184,0.12); color: #cbd5e1; }

.ddc-paymethod-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 12px;
}
.ddc-pm-stat { text-align: center; }
.ddc-pm-stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.ddc-pm-stat strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}
html.dark .ddc-paymethod-stats { background: rgba(30,41,59,0.5); }
html.dark .ddc-pm-stat strong { color: #f1f5f9; }

.ddc-paymethod-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}
html.dark .ddc-paymethod-actions { border-top-color: #334155; }

.ddc-pm-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.18s;
}
.ddc-pm-btn:hover { transform: translateY(-1px); }
.ddc-pm-btn-edit:hover { background: #e0f2fe; border-color: #38bdf8; color: #0369a1; }
.ddc-pm-btn-toggle:hover { background: #fef3c7; border-color: #f59e0b; color: #b45309; }
.ddc-pm-btn-delete { flex: 0 0 38px; }
.ddc-pm-btn-delete:hover { background: #ffe4e6; border-color: #f43f5e; color: #be123c; }
html.dark .ddc-pm-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }

.ddc-paymethod-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}
.ddc-paymethod-empty i {
  font-size: 56px;
  color: #cbd5e1;
  margin-bottom: 16px;
  display: block;
}
.ddc-paymethod-empty h3 { font-size: 18px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.ddc-paymethod-empty p { font-size: 13px; color: #64748b; }
html.dark .ddc-paymethod-empty i { color: #475569; }
html.dark .ddc-paymethod-empty h3 { color: #e2e8f0; }

/* Payment method modal */
.ddc-paymethod-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(8px);
  padding: 20px;
  animation: ddc-fade-in 0.2s ease-out;
}
.ddc-paymethod-modal-content {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15,23,42,0.3);
  animation: ddc-slide-up 0.32s cubic-bezier(0.4,0,0.2,1);
}
html.dark .ddc-paymethod-modal-content { background: #0f172a; border: 1px solid #334155; }

.ddc-paymethod-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #e2e8f0;
}
html.dark .ddc-paymethod-modal-head { border-bottom-color: #334155; }
.ddc-paymethod-modal-head h2 {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.ddc-paymethod-modal-head h2 i { color: #10b981; margin-right: 6px; }
.ddc-paymethod-modal-head p {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}
html.dark .ddc-paymethod-modal-head h2 { color: #f1f5f9; }
html.dark .ddc-paymethod-modal-head p { color: #94a3b8; }

.ddc-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ddc-modal-close:hover { background: #f1f5f9; color: #0f172a; }
html.dark .ddc-modal-close:hover { background: #1e293b; color: #f1f5f9; }

.ddc-paymethod-modal-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.ddc-pm-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 2;
}
html.dark .ddc-pm-tabs { background: #0b1220; border-bottom-color: #334155; }

.ddc-pm-tab {
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ddc-pm-tab i { font-size: 12px; }
.ddc-pm-tab:hover { color: #0f172a; }
.ddc-pm-tab.is-active {
  color: #10b981;
  border-bottom-color: #10b981;
}
html.dark .ddc-pm-tab { color: #94a3b8; }
html.dark .ddc-pm-tab:hover { color: #f1f5f9; }

.ddc-pm-tabpane {
  display: none;
  padding: 22px 24px;
}
.ddc-pm-tabpane.is-active { display: block; animation: ddc-fade-in 0.2s; }

/* Reusable form grid */
.ddc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ddc-form-field { display: flex; flex-direction: column; gap: 6px; }
.ddc-form-field-full { grid-column: 1/-1; }
.ddc-form-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}
.ddc-form-field input[type="text"],
.ddc-form-field input[type="url"],
.ddc-form-field input[type="number"],
.ddc-form-field input[type="email"],
.ddc-form-field select,
.ddc-form-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  color: #0f172a;
  background: #fff;
  transition: all 0.18s;
  font-family: inherit;
}
.ddc-form-field input:focus,
.ddc-form-field select:focus,
.ddc-form-field textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.ddc-form-field input:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
.ddc-form-field textarea { resize: vertical; font-family: 'SF Mono', Consolas, monospace; font-size: 12.5px; }
.ddc-form-field small {
  font-size: 11px;
  color: #94a3b8;
}
.ddc-form-field small code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
  color: #0369a1;
}

html.dark .ddc-form-field label { color: #cbd5e1; }
html.dark .ddc-form-field input,
html.dark .ddc-form-field select,
html.dark .ddc-form-field textarea {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark .ddc-form-field input:disabled { background: #0f172a; color: #64748b; }
html.dark .ddc-form-field small code { background: rgba(148,163,184,0.12); color: #7dd3fc; }

.ddc-form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ddc-form-section-title i { color: #10b981; margin-right: 4px; }
.ddc-form-hint {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}
html.dark .ddc-form-section-title { color: #f1f5f9; }

.ddc-color-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ddc-color-input input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}

.ddc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 4px;
}
.ddc-toggle input { display: none; }
.ddc-toggle-track {
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: all 0.2s;
}
.ddc-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ddc-toggle input:checked ~ .ddc-toggle-track { background: #10b981; }
.ddc-toggle input:checked ~ .ddc-toggle-track::after { left: 23px; }
.ddc-toggle-label { font-size: 13px; color: #475569; font-weight: 500; }
html.dark .ddc-toggle-label { color: #cbd5e1; }
html.dark .ddc-toggle-track { background: #475569; }

.ddc-pm-info-box {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(99,102,241,0.06));
  border: 1px solid rgba(14,165,233,0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ddc-pm-info-box i { color: #0ea5e9; margin-top: 2px; }
html.dark .ddc-pm-info-box { color: #e2e8f0; }

.ddc-paymethod-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 18px 18px;
}
html.dark .ddc-paymethod-modal-foot { background: #0b1220; border-top-color: #334155; }

.ddc-btn-primary {
  padding: 9px 18px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ddc-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16,185,129,0.3);
}
.ddc-btn-secondary {
  padding: 9px 18px;
  background: #fff;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ddc-btn-secondary:hover { background: #f8fafc; }
html.dark .ddc-btn-secondary { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark .ddc-btn-secondary:hover { background: #0f172a; }

@keyframes ddc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ddc-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .ddc-paymethod-grid { grid-template-columns: 1fr; }
  .ddc-form-grid { grid-template-columns: 1fr; }
  .ddc-paymethod-modal-content {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 14px;
  }
  .ddc-paymethod-modal { padding: 8px; }
  .ddc-pm-tabs { padding: 0 12px; }
  .ddc-pm-tab { padding: 12px 14px; font-size: 12px; }
}

/* End v3.5.5 payment methods super UI */

/* ============================================================
   v3.5.5 — Checkout Modal (Client)
   ============================================================ */

.ddc-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ddc-fade-in 0.22s ease-out;
}
.ddc-checkout-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(8px);
}
.ddc-checkout-modal-content {
  position: relative;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 28px 70px rgba(15,23,42,0.4);
  animation: ddc-slide-up 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
html.dark .ddc-checkout-modal-content {
  background: #0f172a;
  border: 1px solid #334155;
}

.ddc-checkout-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}
.ddc-checkout-close:hover { background: rgba(255,255,255,0.28); }

.ddc-checkout-header {
  padding: 24px 24px 20px;
  background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
  color: #fff;
}
.ddc-checkout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ddc-checkout-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}
.ddc-checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  backdrop-filter: blur(8px);
}
.ddc-checkout-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ddc-checkout-summary-label {
  font-size: 11px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ddc-checkout-summary strong {
  font-size: 15px;
  font-weight: 700;
}
.ddc-checkout-summary-total {
  font-size: 20px !important;
  font-weight: 800 !important;
}

.ddc-checkout-body {
  padding: 18px 20px 20px;
  overflow-y: auto;
  flex: 1;
  background: #fff;
}
html.dark .ddc-checkout-body { background: #0f172a; }

.ddc-checkout-method-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddc-checkout-method {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.ddc-checkout-method:hover {
  border-color: var(--method-accent, #0ea5e9);
  background: linear-gradient(135deg, color-mix(in srgb, var(--method-accent, #0ea5e9) 4%, #fff), #fff);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.08);
}
html.dark .ddc-checkout-method {
  background: #1e293b;
  border-color: #334155;
}
html.dark .ddc-checkout-method:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--method-accent, #0ea5e9) 8%, #1e293b), #1e293b);
}

.ddc-checkout-method-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--method-accent, #0ea5e9) 16%, transparent), color-mix(in srgb, var(--method-accent, #0ea5e9) 6%, transparent));
  color: var(--method-accent, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.ddc-checkout-method-icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.ddc-checkout-method-info { flex: 1; min-width: 0; }
.ddc-checkout-method-name {
  font-weight: 700;
  font-size: 14.5px;
  color: #0f172a;
  margin-bottom: 2px;
}
.ddc-checkout-method-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 3px;
}
.ddc-checkout-method-fee {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
html.dark .ddc-checkout-method-name { color: #f1f5f9; }
html.dark .ddc-checkout-method-desc { color: #cbd5e1; }

.ddc-checkout-method-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.ddc-checkout-method-amount span {
  font-weight: 700;
  font-size: 14px;
  color: var(--method-accent, #0ea5e9);
}
.ddc-checkout-method-amount i {
  font-size: 12px;
  color: #94a3b8;
}

/* Instruction view */
.ddc-checkout-loading {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  font-size: 14px;
}
.ddc-checkout-loading i { font-size: 28px; margin-bottom: 10px; color: var(--method-accent, #0ea5e9); }

.ddc-checkout-error {
  text-align: center;
  padding: 30px 20px;
  background: #ffe4e6;
  border-radius: 10px;
  color: #be123c;
  font-size: 14px;
}
.ddc-checkout-error i { font-size: 22px; margin-right: 6px; }
html.dark .ddc-checkout-error { background: rgba(244,63,94,0.15); color: #fda4af; }

.ddc-checkout-instruction { padding: 4px; }

.ddc-checkout-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1px solid #fcd34d;
}
.ddc-checkout-status i { font-size: 18px; }
.ddc-checkout-status.is-paid {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
  border-color: #6ee7b7;
}
.ddc-checkout-status.is-failed {
  background: linear-gradient(135deg, #ffe4e6, #fecdd3);
  color: #be123c;
  border-color: #fda4af;
}
html.dark .ddc-checkout-status { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.4); }
html.dark .ddc-checkout-status.is-paid { background: rgba(16,185,129,0.18); color: #6ee7b7; border-color: rgba(16,185,129,0.4); }
html.dark .ddc-checkout-status.is-failed { background: rgba(244,63,94,0.18); color: #fda4af; border-color: rgba(244,63,94,0.4); }

.ddc-checkout-order-id {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 14px;
  font-family: 'SF Mono', Consolas, monospace;
}
.ddc-checkout-order-id strong { color: #0f172a; font-weight: 700; }
html.dark .ddc-checkout-order-id { background: rgba(30,41,59,0.5); color: #cbd5e1; }
html.dark .ddc-checkout-order-id strong { color: #f1f5f9; }
.ddc-checkout-copy-order, .ddc-checkout-va-copy {
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  transition: all 0.18s;
}
.ddc-checkout-copy-order:hover, .ddc-checkout-va-copy:hover {
  background: var(--method-accent, #0ea5e9);
  color: #fff;
  border-color: var(--method-accent, #0ea5e9);
}

/* QR display */
.ddc-checkout-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.ddc-checkout-qr-img {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
  border: 2px solid #e2e8f0;
}
html.dark .ddc-checkout-qr-img { border-color: #475569; }
.ddc-checkout-qr-empty {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.ddc-checkout-qr-empty i { font-size: 48px; margin-bottom: 8px; }
.ddc-checkout-qr-empty p { font-size: 12px; text-align: center; padding: 0 14px; }

/* ShopeePay btn */
.ddc-checkout-shopeepay-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 14px 0;
}
.ddc-checkout-shopeepay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #ee4d2d, #d63916);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(238,77,45,0.35);
  transition: all 0.2s;
}
.ddc-checkout-shopeepay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(238,77,45,0.45);
}

/* VA display */
.ddc-checkout-va-wrap {
  margin: 14px 0;
  padding: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--method-accent, #0ea5e9) 8%, transparent), color-mix(in srgb, var(--method-accent, #0ea5e9) 3%, transparent));
  border: 2px solid color-mix(in srgb, var(--method-accent, #0ea5e9) 25%, transparent);
  border-radius: 14px;
}
.ddc-checkout-va-bank {
  font-size: 13px;
  font-weight: 700;
  color: var(--method-accent, #0ea5e9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ddc-checkout-va-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.ddc-checkout-va-number {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 14px;
  border: 1px dashed #cbd5e1;
}
.ddc-checkout-va-number #va-num-display {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 1px;
  flex: 1;
}
html.dark .ddc-checkout-va-number { background: #0b1220; border-color: #475569; }
html.dark .ddc-checkout-va-number #va-num-display { color: #f1f5f9; }
.ddc-checkout-va-amount-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.ddc-checkout-va-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--method-accent, #0ea5e9);
  font-family: 'SF Mono', Consolas, monospace;
}

.ddc-checkout-instructions {
  margin-top: 16px;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 13px;
  color: #334155;
  line-height: 1.6;
}
.ddc-checkout-instructions p { margin: 0 0 6px; }
.ddc-checkout-instructions ol { padding-left: 18px; margin: 0; }
.ddc-checkout-instructions ol li { margin-bottom: 4px; }
.ddc-checkout-instructions code {
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
}
.ddc-checkout-instructions strong { color: #0f172a; font-weight: 700; }
html.dark .ddc-checkout-instructions { background: rgba(30,41,59,0.5); color: #cbd5e1; }
html.dark .ddc-checkout-instructions code { background: rgba(148,163,184,0.18); color: #7dd3fc; }
html.dark .ddc-checkout-instructions strong { color: #f1f5f9; }

.ddc-checkout-totals {
  margin-top: 16px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 13px;
}
.ddc-checkout-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: #475569;
}
.ddc-checkout-totals strong { color: #0f172a; }
.ddc-checkout-total-row {
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
  padding-top: 8px !important;
  font-size: 15px !important;
  font-weight: 700;
}
.ddc-checkout-total-row strong { font-size: 18px; color: var(--method-accent, #0ea5e9); }
html.dark .ddc-checkout-totals { background: rgba(30,41,59,0.5); color: #cbd5e1; }
html.dark .ddc-checkout-totals strong { color: #f1f5f9; }
html.dark .ddc-checkout-total-row { border-top-color: #475569; }

.ddc-checkout-footer {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.ddc-checkout-footer .ddc-btn-secondary { flex: 1; padding: 11px; }
.ddc-checkout-help {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.18s;
}
.ddc-checkout-help:hover { background: #1eb858; transform: translateY(-1px); }

@media (max-width: 720px) {
  .ddc-checkout-modal { padding: 0; }
  .ddc-checkout-modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .ddc-checkout-qr-img, .ddc-checkout-qr-empty { width: 200px; height: 200px; }
  .ddc-checkout-va-number #va-num-display { font-size: 16px; }
  .ddc-checkout-va-amount { font-size: 20px; }
}

/* End v3.5.5 checkout modal */

/* ═══════════════════════════════════════════════════════════════════
   v3.6.0 — LIVE MOBILE MOCKUP for Pengaturan Toko
   Two-column layout: form (left) + iPhone-style mockup (right) with sticky preview
   ═══════════════════════════════════════════════════════════════════ */

.ddc-shop-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  max-width: 1180px;
}

@media (max-width: 1100px) {
  .ddc-shop-settings-grid { grid-template-columns: 1fr; max-width: 720px; }
  .ddc-shop-settings-preview-col { order: -1; }
}

.ddc-shop-settings-form-col { min-width: 0; }

.ddc-shop-settings-preview-col {
  position: sticky;
  top: calc(var(--ddc-header-h, 64px) + 24px);
  align-self: start;
  z-index: 5;
}

/* Mockup wrap (LIVE PREVIEW header + frame + footer) */
.ddc-mockup-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 22px;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(99, 102, 241, 0.08), rgba(244, 114, 182, 0.06), rgba(34, 211, 238, 0.06));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.ddc-mockup-wrap::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

html.ddc-modern.ddc-light .ddc-mockup-wrap {
  background: linear-gradient(165deg, rgba(99, 102, 241, 0.06), rgba(244, 114, 182, 0.04), rgba(34, 211, 238, 0.05));
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 50px -20px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Header above mockup */
.ddc-mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 6px;
  position: relative;
  z-index: 2;
}
.ddc-mockup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #10b981;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.ddc-mockup-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: ddc-mck-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ddc-mck-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.ddc-mockup-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: all 0.15s ease;
}
.ddc-mockup-link:hover {
  color: var(--text-primary, #f1f5f9);
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.4);
}

/* iPhone-style frame */
.ddc-mobile-mockup {
  position: relative;
  width: 272px;
  height: 560px;
  z-index: 2;
}
.ddc-mobile-mockup-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #1a1f2e 0%, #0f1320 50%, #1a1f2e 100%);
  border-radius: 42px;
  padding: 10px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.04),
    0 0 0 3px #2a2f3e,
    0 30px 70px -20px rgba(0, 0, 0, 0.55),
    0 16px 40px -16px rgba(99, 102, 241, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.ddc-mobile-mockup-frame::before {
  /* Subtle side glow */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 42px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 8%, transparent 92%, rgba(255,255,255,0.06) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Notch */
.ddc-mobile-mockup-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #000;
  border-radius: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.ddc-mobile-mockup-speaker {
  width: 36px;
  height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
}
.ddc-mobile-mockup-camera {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #0f1320 30%, #050608 100%);
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.15);
  position: absolute;
  right: 14px;
}

/* Home indicator bar */
.ddc-mobile-mockup-home {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  z-index: 4;
}

/* Screen content area (inside frame, behind notch) */
.ddc-mobile-mockup-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8fafc;
  border-radius: 33px;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  color: #0f172a;
  transition: transform 0.18s ease;
}
.ddc-mobile-mockup-screen::-webkit-scrollbar { display: none; }
.ddc-mobile-mockup-screen.ddc-mck-pulse { transform: scale(0.995); }



/* Reflection sheen (subtle) */
.ddc-mobile-mockup-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, transparent 60%);
  border-radius: 42px 42px 0 0;
  pointer-events: none;
  z-index: 5;
}

/* Footer below mockup */
.ddc-mockup-footer {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  max-width: 240px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}
.ddc-mockup-footer code {
  font-size: 10px;
  background: rgba(148, 163, 184, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-primary, #f1f5f9);
}

/* ───── Mockup screen INNER (the actual shop preview) ───── */
/* v3.6.11 — Header now owns the rounded-top of the screen (matches screen border-radius)
   so brand logo + action pills no longer sit on the curved corner. Padding-top increased
   to 46px to clear the 22px-tall notch (top:14px) + visual breathing room. Status-bar
   indicators (time + signal/battery) added inline before brand row via ::before/::after
   for an authentic iOS feel. */
.ddc-mck-header {
  position: sticky; /* sticky scope is screen, top:0 honors that */
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 46px 14px 10px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e2e8f0;
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  /* Note: sticky already implies position; pseudo-elements below are absolute
     relative to this header. The combination of sticky + absolute is well-supported. */
}
/* iOS-style status bar — time on the left + signal/battery on the right.
   Positioned absolute inside the header (sticky positioned context). */
.ddc-mck-header::before {
  content: '9:41';
  position: absolute;
  top: 16px;
  left: 18px;
  font-size: 10px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ddc-mck-header::after {
  /* Two unicode chars: signal bars (uF012) + battery (uF240) — use unicode escapes
     because CSS content can't easily render FA icon classes. Fall back gracefully. */
  content: '\f012  \f240';
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  font-size: 9px;
  color: #334155;
  letter-spacing: 4px;
}
.ddc-mck-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ddc-mck-logo-img,
.ddc-mck-logo-fallback {
  width: 30px; height: 30px;
  border-radius: 8px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ddc-mck-brand-text { min-width: 0; line-height: 1.15; }
.ddc-mck-brand-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.ddc-mck-brand-sub {
  font-size: 8.5px;
  color: #64748b;
  margin-top: 1px;
}
.ddc-mck-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ddc-mck-pill {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #64748b;
  border: 1px solid transparent;
}

.ddc-mck-body { padding: 14px 12px 24px; }
.ddc-mck-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 12px;
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.15);
}
.ddc-mck-hero { text-align: center; margin-bottom: 12px; }
.ddc-mck-logo-img-lg,
.ddc-mck-logo-fallback-lg {
  width: 46px; height: 46px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.ddc-mck-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  word-break: break-word;
}
.ddc-mck-tagline {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 2px;
}
.ddc-mck-shopee-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  margin-top: 5px;
  font-weight: 600;
}
.ddc-mck-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 12px -12px;
}
.ddc-mck-section-head { text-align: center; margin-bottom: 10px; }
.ddc-mck-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
}
.ddc-mck-section-sub {
  font-size: 8.5px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.35;
}
.ddc-mck-label {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}
.ddc-mck-input {
  padding: 9px 10px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  font-size: 9.5px;
  color: #94a3b8;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
}
.ddc-mck-hint {
  font-size: 8px;
  color: #64748b;
  margin-top: 4px;
}
.ddc-mck-cta {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.ddc-mck-trust {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  font-size: 8px;
  color: #64748b;
  text-align: center;
}
.ddc-mck-trust > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ddc-mck-trust i { font-size: 11px; }
.ddc-mck-footnote {
  text-align: center;
  font-size: 8.5px;
  color: #94a3b8;
  margin-top: 12px;
  line-height: 1.4;
  padding: 0 8px;
}

/* Mobile: hide mockup sticky behavior, stack to top of column */
@media (max-width: 1100px) {
  .ddc-shop-settings-preview-col { position: static; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .ddc-mobile-mockup { width: 240px; height: 500px; }
  .ddc-mobile-mockup-frame { border-radius: 36px; padding: 8px; }
  .ddc-mobile-mockup-screen { border-radius: 28px; }
  .ddc-mockup-wrap { padding: 14px 10px 18px; }
}
/* End v3.6.0 mobile mockup */

/* ============================================================
   v3.6.12 — PREMIUM HEADER UPGRADES
   Smart Search panel · Notifications dropdown · Help modal
   ============================================================ */

/* ---------- HEADER SEARCH (refined) ---------- */
.ddc-header-search { position: relative; }
.ddc-header-search.is-open input {
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.12),
    0 8px 24px -6px rgba(34, 211, 238, 0.3) !important;
  background: rgba(15, 20, 36, 0.95) !important;
}

/* Premium animated underline gradient on focus */
.ddc-header-search::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan, #22d3ee), var(--neon-purple, #a78bfa), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.25s ease, transform 0.35s ease;
  pointer-events: none;
}
.ddc-header-search:focus-within::after,
.ddc-header-search.is-open::after { opacity: 1; transform: scaleX(1); }

/* ---------- SEARCH PANEL (autocomplete dropdown) ---------- */
.ddc-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  background: rgba(13, 18, 33, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 14px;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 8px 20px -8px rgba(34, 211, 238, 0.25);
  overflow: hidden;
  z-index: 1500;
  animation: ddc-search-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
@keyframes ddc-search-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ddc-search-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  max-height: 56vh;
}
.ddc-search-panel-body::-webkit-scrollbar { width: 6px; }
.ddc-search-panel-body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 3px; }

.ddc-search-group { margin: 4px 0 8px; }
.ddc-search-group-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim, #94a3b8);
  padding: 8px 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ddc-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  color: var(--text-primary, #e6edf7);
  font-family: inherit;
}
.ddc-search-item:hover,
.ddc-search-item.is-active {
  background: rgba(34, 211, 238, 0.07);
  border-color: rgba(34, 211, 238, 0.22);
  transform: translateX(2px);
}
.ddc-search-item.is-active {
  box-shadow: inset 3px 0 0 0 var(--neon-cyan, #22d3ee);
}
.ddc-search-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.ddc-search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ddc-search-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e6edf7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddc-search-sub {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddc-search-meta {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neon-cyan, #22d3ee);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.18);
}
.ddc-search-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(8, 12, 24, 0.5);
}
.ddc-search-hint { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ddc-search-hint kbd {
  display: inline-block;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-secondary);
}
.ddc-search-brand {
  font-weight: 700;
  font-size: 10.5px;
  background: linear-gradient(135deg, var(--neon-cyan, #22d3ee), var(--neon-purple, #a78bfa));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ddc-search-loading {
  padding: 24px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ddc-search-loading i { color: var(--neon-cyan, #22d3ee); margin-right: 6px; }

.ddc-search-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
}
.ddc-search-empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--neon-purple, #a78bfa);
}
.ddc-search-empty-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.ddc-search-empty-sub { font-size: 12px; line-height: 1.5; }
.ddc-search-quick {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.ddc-search-quick-btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.18);
  color: var(--neon-cyan, #22d3ee);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.15s ease;
}
.ddc-search-quick-btn:hover {
  background: rgba(34, 211, 238, 0.16);
  border-color: rgba(34, 211, 238, 0.4);
  transform: translateY(-1px);
}

/* Light mode for search panel */
html.ddc-modern.ddc-light .ddc-search-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(14, 165, 233, 0.18);
  box-shadow:
    0 20px 50px -10px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(15, 23, 42, 0.04) inset;
}
html.ddc-modern.ddc-light .ddc-search-item { color: #1e293b; }
html.ddc-modern.ddc-light .ddc-search-item:hover,
html.ddc-modern.ddc-light .ddc-search-item.is-active {
  background: rgba(14, 165, 233, 0.07);
  border-color: rgba(14, 165, 233, 0.2);
}
html.ddc-modern.ddc-light .ddc-search-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-search-sub { color: #64748b; }
html.ddc-modern.ddc-light .ddc-search-meta {
  color: #0284c7;
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.18);
}
html.ddc-modern.ddc-light .ddc-search-panel-footer {
  background: rgba(248, 250, 252, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
  color: #64748b;
}
html.ddc-modern.ddc-light .ddc-search-hint kbd {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
  color: #475569;
}
html.ddc-modern.ddc-light .ddc-search-empty-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-search-empty-icon {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}
html.ddc-modern.ddc-light .ddc-search-quick-btn {
  background: rgba(14, 165, 233, 0.07);
  border-color: rgba(14, 165, 233, 0.18);
  color: #0284c7;
}
html.ddc-modern.ddc-light .ddc-search-quick-btn:hover {
  background: rgba(14, 165, 233, 0.14);
}

/* ---------- NOTIFICATIONS PANEL ---------- */
.ddc-notif-panel {
  position: absolute;
  top: calc(var(--ddc-header-h) - 6px);
  right: 24px;
  width: min(380px, calc(100vw - 32px));
  max-height: 70vh;
  background: rgba(13, 18, 33, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(244, 114, 182, 0.2);
  border-radius: 14px;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 8px 24px -10px rgba(244, 114, 182, 0.3);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ddc-search-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ddc-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 12, 24, 0.5);
}
.ddc-notif-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.ddc-notif-title i { color: var(--neon-pink, #f472b6); }
.ddc-notif-refresh {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.ddc-notif-refresh:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.3);
  color: var(--neon-cyan);
  transform: rotate(180deg);
}
.ddc-notif-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  max-height: 50vh;
}
.ddc-notif-body::-webkit-scrollbar { width: 6px; }
.ddc-notif-body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.2); border-radius: 3px; }
.ddc-notif-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary);
  font-family: inherit;
}
.ddc-notif-item:hover {
  background: rgba(244, 114, 182, 0.06);
  border-color: rgba(244, 114, 182, 0.18);
  transform: translateX(2px);
}
.ddc-notif-item-icon {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.ddc-notif-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ddc-notif-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddc-notif-item-detail {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddc-notif-item-time {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.ddc-notif-footer {
  padding: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 12, 24, 0.5);
}
.ddc-notif-view-all {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(167, 139, 250, 0.1));
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.ddc-notif-view-all:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(167, 139, 250, 0.2));
  border-color: rgba(34, 211, 238, 0.4);
  transform: translateY(-1px);
}
.ddc-notif-loading {
  padding: 28px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ddc-notif-loading i { color: var(--neon-cyan); margin-right: 6px; }
.ddc-notif-empty {
  padding: 30px 18px;
  text-align: center;
  color: var(--text-muted);
}
.ddc-notif-empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--text-muted);
}
.ddc-notif-empty-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.ddc-notif-empty-sub { font-size: 11.5px; line-height: 1.5; }

/* Light mode notifications */
html.ddc-modern.ddc-light .ddc-notif-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(236, 72, 153, 0.2);
  box-shadow:
    0 20px 50px -10px rgba(15, 23, 42, 0.15),
    0 0 0 1px rgba(15, 23, 42, 0.04) inset;
}
html.ddc-modern.ddc-light .ddc-notif-header { background: rgba(248, 250, 252, 0.8); border-color: rgba(15, 23, 42, 0.08); }
html.ddc-modern.ddc-light .ddc-notif-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-notif-refresh {
  background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.1); color: #475569;
}
html.ddc-modern.ddc-light .ddc-notif-refresh:hover { background: rgba(14, 165, 233, 0.1); border-color: rgba(14, 165, 233, 0.3); color: #0284c7; }
html.ddc-modern.ddc-light .ddc-notif-item { color: #1e293b; }
html.ddc-modern.ddc-light .ddc-notif-item:hover { background: rgba(236, 72, 153, 0.06); border-color: rgba(236, 72, 153, 0.18); }
html.ddc-modern.ddc-light .ddc-notif-item-title { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-notif-item-detail { color: #64748b; }
html.ddc-modern.ddc-light .ddc-notif-item-time { background: rgba(15, 23, 42, 0.06); color: #64748b; }
html.ddc-modern.ddc-light .ddc-notif-footer { background: rgba(248, 250, 252, 0.7); border-color: rgba(15, 23, 42, 0.08); }
html.ddc-modern.ddc-light .ddc-notif-view-all { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-notif-empty-title { color: #0f172a; }

/* Notif button "is-open" highlight */
.ddc-header-btn.is-open {
  border-color: rgba(244, 114, 182, 0.55) !important;
  color: var(--neon-pink, #f472b6) !important;
  background: rgba(244, 114, 182, 0.1) !important;
  box-shadow: 0 4px 14px -4px rgba(244, 114, 182, 0.5) !important;
}

/* ---------- HELP MODAL CONTENT ---------- */
.ddc-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.ddc-help-section {
  background: rgba(34, 211, 238, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.14);
  border-radius: 12px;
  padding: 12px 14px;
}
.ddc-help-section-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neon-cyan, #22d3ee);
  margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 7px;
}
.ddc-help-kbd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.ddc-help-kbd-row kbd {
  display: inline-block;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--text-primary);
  min-width: 24px;
  text-align: center;
}
.ddc-help-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  margin: 3px -4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ddc-help-link i { color: var(--neon-cyan); width: 16px; text-align: center; }
.ddc-help-link:hover {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.2);
  transform: translateX(2px);
}
.ddc-help-tips {
  margin: 0; padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.ddc-help-tips li { margin-bottom: 4px; }
.ddc-help-tips code {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--neon-cyan);
}

/* Fallback help modal (when DDCUI.modal unavailable) */
.ddc-help-fallback {
  position: fixed; inset: 0;
  background: rgba(8, 12, 24, 0.7);
  backdrop-filter: blur(6px);
  z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ddc-help-fallback-card {
  width: min(720px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(13, 18, 33, 0.98);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 16px;
  padding: 20px 22px;
}
.ddc-help-fallback-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  font-size: 16px;
  color: var(--text-primary);
}
.ddc-help-fallback-close {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-size: 24px; line-height: 1; cursor: pointer;
}

/* Light mode help */
html.ddc-modern.ddc-light .ddc-help-section {
  background: rgba(14, 165, 233, 0.04);
  border-color: rgba(14, 165, 233, 0.18);
}
html.ddc-modern.ddc-light .ddc-help-section-title { color: #0284c7; }
html.ddc-modern.ddc-light .ddc-help-link { color: #0f172a; }
html.ddc-modern.ddc-light .ddc-help-link i { color: #0284c7; }
html.ddc-modern.ddc-light .ddc-help-link:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.2);
}
html.ddc-modern.ddc-light .ddc-help-tips { color: #475569; }
html.ddc-modern.ddc-light .ddc-help-tips code {
  background: rgba(15, 23, 42, 0.06);
  color: #0284c7;
}
html.ddc-modern.ddc-light .ddc-help-kbd-row { color: #475569; }
html.ddc-modern.ddc-light .ddc-help-kbd-row kbd {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .ddc-notif-panel { right: 12px; width: calc(100vw - 24px); }
  .ddc-search-panel { left: -12px; right: -12px; }
}
/* End v3.6.12 premium header upgrades */

/* ============================================================
   v3.6.13 — CRITICAL FIX: hidden attribute override
   Class-based display:flex was beating user-agent [hidden]{display:none}
   because they had equal specificity. Force hidden to win.
   ============================================================ */
.ddc-search-panel[hidden],
.ddc-notif-panel[hidden] {
  display: none !important;
}


/* ============================================================
   v3.6.16 — PAYMENT STEP-BY-STEP TIMELINE
   Used by both client Riwayat Tagihan (expandable row)
   and Super Dashboard payment detail modal.
   ============================================================ */
.ddc-pay-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}
.ddc-pay-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding-bottom: 16px;
  min-height: 56px;
}
.ddc-pay-timeline-step:last-child {
  padding-bottom: 0;
  min-height: auto;
}
.ddc-pay-timeline-dot {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #94a3b8;
  font-size: 14px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  transition: all 0.2s ease;
}
html.dark .ddc-pay-timeline-dot {
  background: #334155;
  color: #64748b;
  border-color: #1e293b;
  box-shadow: 0 0 0 1px #334155;
}
.ddc-pay-timeline-step.is-done .ddc-pay-timeline-dot {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 0 0 1px #10b981, 0 2px 8px rgba(16, 185, 129, 0.3);
}
.ddc-pay-timeline-step.is-pending .ddc-pay-timeline-dot {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  box-shadow: 0 0 0 1px #f59e0b, 0 2px 8px rgba(245, 158, 11, 0.3);
  animation: ddc-pay-timeline-pulse 2s ease-in-out infinite;
}
.ddc-pay-timeline-step.is-fail .ddc-pay-timeline-dot {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 0 0 1px #ef4444, 0 2px 8px rgba(239, 68, 68, 0.3);
}
@keyframes ddc-pay-timeline-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px #f59e0b, 0 2px 8px rgba(245, 158, 11, 0.3); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 1px #f59e0b, 0 4px 16px rgba(245, 158, 11, 0.5); }
}
.ddc-pay-timeline-line {
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
  z-index: 1;
}
html.dark .ddc-pay-timeline-line { background: #334155; }
.ddc-pay-timeline-step.is-done .ddc-pay-timeline-line {
  background: linear-gradient(180deg, #10b981 0%, #e2e8f0 100%);
}
html.dark .ddc-pay-timeline-step.is-done .ddc-pay-timeline-line {
  background: linear-gradient(180deg, #10b981 0%, #334155 100%);
}
.ddc-pay-timeline-body {
  padding-top: 4px;
  min-width: 0;
}
.ddc-pay-timeline-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}
html.dark .ddc-pay-timeline-label { color: #f1f5f9; }
.ddc-pay-timeline-step:not(.is-done):not(.is-pending) .ddc-pay-timeline-label {
  color: #94a3b8;
  font-weight: 500;
}
html.dark .ddc-pay-timeline-step:not(.is-done):not(.is-pending) .ddc-pay-timeline-label {
  color: #64748b;
}
.ddc-pay-timeline-note {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}
html.dark .ddc-pay-timeline-note { color: #94a3b8; }
.ddc-pay-timeline-time {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
html.dark .ddc-pay-timeline-time { color: #64748b; }

/* Riwayat Tagihan — expandable row */
.ddc-pay-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  font-size: 10px;
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  vertical-align: middle;
}
.ddc-pay-expand-btn:hover {
  background: rgba(14, 165, 233, 0.2);
}
.ddc-pay-expand-btn.is-open {
  background: #0ea5e9;
  color: #fff;
}
.ddc-pay-expand-btn.is-open i {
  transform: rotate(90deg);
}
.ddc-pay-expand-btn i {
  transition: transform 0.2s ease;
}
.ddc-pay-row-timeline {
  background: #f8fafc;
}
html.dark .ddc-pay-row-timeline { background: rgba(15, 23, 42, 0.5); }
.ddc-pay-timeline-cell {
  padding: 16px 20px 20px 56px !important;
  border-top: 0 !important;
}

/* ============================================================
   v3.6.16 — Super Dashboard payment detail modal
   ============================================================ */
.ddc-super-pay-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ddc-super-pay-modal-in 0.2s ease-out;
}
@keyframes ddc-super-pay-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ddc-super-pay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.ddc-super-pay-modal-content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  animation: ddc-super-pay-modal-content-in 0.25s ease-out;
}
html.dark .ddc-super-pay-modal-content {
  background: #0f172a;
  color: #f1f5f9;
}
@keyframes ddc-super-pay-modal-content-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ddc-super-pay-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e2e8f0;
}
html.dark .ddc-super-pay-modal-header { border-color: #1e293b; }
.ddc-super-pay-modal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ddc-super-pay-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}
html.dark .ddc-super-pay-modal-close:hover {
  background: #1e293b;
  color: #f1f5f9;
}
.ddc-super-pay-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}
.ddc-super-pay-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
html.dark .ddc-super-pay-modal-footer { border-color: #1e293b; }
.ddc-super-pay-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}
html.dark .ddc-super-pay-stat {
  background: rgba(15, 23, 42, 0.6);
  border-color: #1e293b;
}
.ddc-super-pay-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 4px;
}
html.dark .ddc-super-pay-stat-label { color: #94a3b8; }
.ddc-super-pay-stat-value {
  font-weight: 700;
  color: #0f172a;
}
html.dark .ddc-super-pay-stat-value { color: #f1f5f9; }
.ddc-super-pay-detail-btn {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.1);
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ddc-super-pay-detail-btn:hover {
  background: rgba(14, 165, 233, 0.2);
}