/* ======================================================================
   FNS V366 — PRECISION GRADIENT PREMIUM
   Lapisan visual akhir: gradasi premium, grid presisi, teks tegas, motif elegan, desktop/mobile.
   Tidak mengubah fungsi aplikasi, database, Radius, MikroTik, WA, atau cron.
   ====================================================================== */

:root{
  --v365-blue:#1769ff;
  --v365-cyan:#00b8d9;
  --v365-indigo:#4f46e5;
  --v365-violet:#7c3aed;
  --v365-green:#10b981;
  --v365-orange:#f59e0b;
  --v365-pink:#ec4899;
  --v365-red:#ef4444;
  --v365-ink:#0b1d36;
  --v365-ink-2:#203b5d;
  --v365-muted:#60738c;
  --v365-line:rgba(55,96,153,.16);
  --v365-line-strong:rgba(23,105,255,.28);
  --v365-card:#ffffff;
  --v365-card-soft:#f6f9ff;
  --v365-radius-sm:12px;
  --v365-radius:18px;
  --v365-radius-lg:24px;
  --v365-shadow-sm:0 7px 18px rgba(31,69,124,.08);
  --v365-shadow:0 14px 34px rgba(31,69,124,.11);
  --v365-shadow-lg:0 24px 60px rgba(31,69,124,.16);
}

/* ================================ FOUNDATION ================================ */
body.app-shell{
  --v365-page:#edf5ff;
  --v365-page-2:#f8f5ff;
  --v365-surface:rgba(255,255,255,.94);
  --v365-surface-solid:#ffffff;
  --v365-surface-soft:#f6f9ff;
  --v365-text:#0b1d36;
  --v365-title:#07182e;
  --v365-muted:#60738c;
  --v365-border:rgba(55,96,153,.16);
  --v365-border-strong:rgba(23,105,255,.28);
  --v365-row:#ffffff;
  --v365-row-alt:#f7faff;
  min-height:100vh;
  color:var(--v365-text)!important;
  background:
    radial-gradient(circle at 11% 3%,rgba(0,184,217,.18),transparent 26%),
    radial-gradient(circle at 93% 7%,rgba(124,58,237,.15),transparent 28%),
    radial-gradient(circle at 86% 89%,rgba(236,72,153,.08),transparent 24%),
    radial-gradient(circle at 12% 90%,rgba(16,185,129,.08),transparent 23%),
    linear-gradient(117deg,transparent 0 47%,rgba(23,105,255,.035) 47.2% 47.8%,transparent 48% 100%),
    radial-gradient(circle at 1px 1px,rgba(23,105,255,.11) 1px,transparent 1.2px),
    linear-gradient(145deg,var(--v365-page),#f7fbff 43%,var(--v365-page-2))!important;
  background-size:auto,auto,auto,auto,92px 92px,25px 25px,auto!important;
  background-attachment:fixed!important;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.app-shell.dark,
body.app-shell[data-theme="dark"],
html.dark body.app-shell,
html[data-theme="dark"] body.app-shell{
  --v365-page:#06101f;
  --v365-page-2:#0c1830;
  --v365-surface:rgba(10,25,46,.95);
  --v365-surface-solid:#0c203a;
  --v365-surface-soft:#112a47;
  --v365-text:#edf6ff;
  --v365-title:#ffffff;
  --v365-muted:#a2b5cb;
  --v365-border:rgba(106,153,211,.19);
  --v365-border-strong:rgba(79,158,255,.36);
  --v365-row:#0d223d;
  --v365-row-alt:#102944;
  background:
    radial-gradient(circle at 10% 2%,rgba(0,184,217,.14),transparent 27%),
    radial-gradient(circle at 93% 6%,rgba(124,58,237,.16),transparent 29%),
    radial-gradient(circle at 84% 88%,rgba(236,72,153,.06),transparent 24%),
    radial-gradient(circle at 14% 90%,rgba(16,185,129,.055),transparent 23%),
    linear-gradient(117deg,transparent 0 47%,rgba(79,158,255,.025) 47.2% 47.8%,transparent 48% 100%),
    radial-gradient(circle at 1px 1px,rgba(126,184,255,.06) 1px,transparent 1.15px),
    linear-gradient(145deg,var(--v365-page),#091628 44%,var(--v365-page-2))!important;
}
body.app-shell *,body.app-shell *::before,body.app-shell *::after{box-sizing:border-box}
body.app-shell .main,body.app-shell .sidebar,body.app-shell .topbar{position:relative;z-index:1}

/* Motif besar pada kanvas, tidak menutup konten */
body.app-shell::before,
body.app-shell::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
}
body.app-shell::before{
  width:540px;height:540px;right:-250px;top:86px;border-radius:50%;opacity:.56;
  background:
    repeating-conic-gradient(from 14deg,rgba(23,105,255,.085) 0 1.5deg,transparent 1.5deg 11deg),
    radial-gradient(circle,transparent 0 45%,rgba(0,184,217,.09) 45.4% 46.2%,transparent 46.6% 58%,rgba(124,58,237,.065) 58.4% 59.2%,transparent 59.6%);
}
body.app-shell::after{
  width:470px;height:320px;left:-220px;bottom:-115px;opacity:.58;transform:rotate(10deg);
  border-radius:49% 51% 58% 42% / 41% 44% 56% 59%;
  background:
    repeating-radial-gradient(ellipse at 68% 34%,transparent 0 18px,rgba(0,184,217,.07) 19px 20px,transparent 21px 35px),
    linear-gradient(135deg,rgba(16,185,129,.10),rgba(23,105,255,.075),rgba(124,58,237,.08));
}
body.app-shell .main{isolation:isolate;background:transparent!important}
body.app-shell .main::before{
  content:"";position:fixed;pointer-events:none;z-index:0;left:31%;top:88px;width:38vw;height:150px;opacity:.46;
  background:
    radial-gradient(circle at 12% 44%,rgba(23,105,255,.13) 0 2px,transparent 2.4px) 0 0/19px 19px,
    linear-gradient(112deg,transparent 0 34%,rgba(0,184,217,.05) 34.3% 34.8%,transparent 35.1% 62%,rgba(124,58,237,.045) 62.3% 62.8%,transparent 63.1%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
body.app-shell .main>*{position:relative;z-index:1}

/* ================================ APP FRAME ================================ */
@media (min-width:821px){
  body.app-shell{--sidebar:276px;display:grid!important;grid-template-columns:var(--sidebar) minmax(0,1fr)!important}
  body.app-shell .sidebar{width:auto!important;min-width:0!important}
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main{min-width:0!important;padding:0 22px 34px!important;overflow-x:clip!important}
}


@media (min-width:821px){
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main > .topbar{
    position:sticky!important;top:0!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:auto!important;max-width:none!important;transform:none!important;translate:none!important;
    margin:0 -22px 18px!important;z-index:900!important;
  }
}

/* ================================ SIDEBAR ================================ */
body.app-shell .sidebar{
  padding:16px 13px 14px!important;
  color:var(--v365-text)!important;
  border-right:1px solid rgba(58,103,166,.20)!important;
  background:
    radial-gradient(circle at 8% 4%,rgba(0,184,217,.15),transparent 26%),
    radial-gradient(circle at 94% 95%,rgba(124,58,237,.11),transparent 31%),
    linear-gradient(135deg,rgba(23,105,255,.045) 25%,transparent 25%) 0 0/32px 32px,
    linear-gradient(315deg,rgba(124,58,237,.027) 25%,transparent 25%) 0 0/32px 32px,
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,248,255,.98))!important;
  box-shadow:14px 0 42px rgba(31,69,124,.12)!important;
  backdrop-filter:blur(20px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(140%)!important;
}
body.app-shell.dark .sidebar,
body.app-shell[data-theme="dark"] .sidebar,
html.dark body.app-shell .sidebar,
html[data-theme="dark"] body.app-shell .sidebar{
  color:#eef7ff!important;
  border-right-color:rgba(104,155,218,.17)!important;
  background:
    radial-gradient(circle at 8% 4%,rgba(0,184,217,.14),transparent 26%),
    radial-gradient(circle at 94% 95%,rgba(124,58,237,.15),transparent 31%),
    linear-gradient(135deg,rgba(255,255,255,.022) 25%,transparent 25%) 0 0/32px 32px,
    linear-gradient(315deg,rgba(255,255,255,.014) 25%,transparent 25%) 0 0/32px 32px,
    linear-gradient(180deg,rgba(5,15,29,.98),rgba(8,25,47,.98))!important;
  box-shadow:16px 0 46px rgba(0,0,0,.25)!important;
}
body.app-shell .sidebar .brand{
  min-height:72px!important;margin:0 0 12px!important;padding:11px 12px!important;gap:11px!important;
  border:1px solid rgba(23,105,255,.18)!important;border-radius:18px!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(124,58,237,.08),transparent 36%),
    linear-gradient(135deg,rgba(255,255,255,.99),rgba(237,247,255,.97))!important;
  box-shadow:0 12px 28px rgba(31,69,124,.10)!important;
  overflow:hidden!important;
}
body.app-shell.dark .sidebar .brand,
html[data-theme="dark"] body.app-shell .sidebar .brand{
  border-color:rgba(103,169,238,.20)!important;
  background:linear-gradient(135deg,rgba(16,42,72,.96),rgba(21,34,68,.94))!important;
  box-shadow:0 14px 30px rgba(0,0,0,.23)!important;
}
body.app-shell .sidebar .brand::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--v365-blue),var(--v365-cyan),var(--v365-violet),var(--v365-pink));
}
body.app-shell .brand img,body.app-shell .brand-mark{width:44px!important;height:44px!important;border-radius:14px!important;flex:0 0 44px!important;box-shadow:0 8px 20px rgba(31,69,124,.14)!important}
body.app-shell .sidebar .brand>div{min-width:0!important}
body.app-shell .sidebar .brand b,body.app-shell .sidebar .brand strong{color:#0756cf!important;font-size:14px!important;font-weight:900!important;letter-spacing:-.015em!important}
body.app-shell .sidebar .brand span,body.app-shell .sidebar .brand small{color:#607894!important;font-size:10.5px!important;font-weight:650!important}
body.app-shell.dark .sidebar .brand b,html[data-theme="dark"] body.app-shell .sidebar .brand b{color:#ffffff!important}
body.app-shell.dark .sidebar .brand span,html[data-theme="dark"] body.app-shell .sidebar .brand span{color:#9eb7d1!important}

body.app-shell .side-search{margin:0 0 12px!important}
body.app-shell .side-search input{
  width:100%!important;height:44px!important;padding:0 14px 0 14px!important;border:1px solid rgba(23,105,255,.20)!important;
  border-radius:14px!important;color:#153454!important;background:rgba(255,255,255,.95)!important;
  box-shadow:0 7px 18px rgba(31,69,124,.07)!important;font-size:12px!important;font-weight:650!important;
}
body.app-shell .side-search input::placeholder{color:#6b829c!important;opacity:1!important}
body.app-shell .side-search input:focus{border-color:rgba(23,105,255,.50)!important;box-shadow:0 0 0 4px rgba(23,105,255,.10),0 10px 24px rgba(31,69,124,.10)!important}
body.app-shell.dark .side-search input,html[data-theme="dark"] body.app-shell .side-search input{color:#edf6ff!important;background:rgba(15,38,65,.92)!important;border-color:rgba(104,166,230,.20)!important}
body.app-shell.dark .side-search input::placeholder,html[data-theme="dark"] body.app-shell .side-search input::placeholder{color:#93abc4!important}

body.app-shell .nav{gap:9px!important}
body.app-shell .nav-group{border:1px solid transparent!important;border-radius:16px!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important}
body.app-shell .nav-group:not(.closed){border-color:rgba(68,111,171,.13)!important;background:rgba(255,255,255,.46)!important}
body.app-shell.dark .nav-group:not(.closed),html[data-theme="dark"] body.app-shell .nav-group:not(.closed){border-color:rgba(104,166,230,.14)!important;background:rgba(255,255,255,.025)!important}
body.app-shell .nav-group>button,body.app-shell .nav-group-toggle{
  height:38px!important;padding:0 12px!important;color:#4f6987!important;font-size:10.5px!important;font-weight:900!important;letter-spacing:.065em!important;
}
body.app-shell.dark .nav-group>button,html[data-theme="dark"] body.app-shell .nav-group>button{color:#8faac4!important}
body.app-shell .nav-items{padding:2px 0 6px!important}
body.app-shell .nav-group a{
  min-height:42px!important;margin:3px 7px!important;padding:8px 10px!important;gap:10px!important;border:1px solid transparent!important;
  border-radius:12px!important;color:#173454!important;font-size:12px!important;font-weight:760!important;line-height:1.2!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
body.app-shell .nav-group a i{
  width:25px!important;height:25px!important;display:grid!important;place-items:center!important;flex:0 0 25px!important;
  border-radius:8px!important;background:rgba(23,105,255,.075)!important;font-size:13px!important;filter:none!important;opacity:1!important;
}
body.app-shell .nav-group a:hover{transform:translateX(2px)!important;color:#0752c7!important;border-color:rgba(23,105,255,.15)!important;background:linear-gradient(90deg,rgba(23,105,255,.09),rgba(0,184,217,.065),rgba(124,58,237,.045))!important}
body.app-shell .nav-group a.active{
  color:#fff!important;border-color:rgba(255,255,255,.36)!important;
  background:linear-gradient(105deg,#1769ff 0%,#00a9df 54%,#7c2ff7 100%)!important;
  box-shadow:0 11px 24px rgba(23,105,255,.24),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
body.app-shell .nav-group a.active i{color:#fff!important;background:rgba(255,255,255,.17)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)!important}
body.app-shell.dark .nav-group a,html[data-theme="dark"] body.app-shell .nav-group a{color:#dcecff!important}
body.app-shell.dark .nav-group a:hover,html[data-theme="dark"] body.app-shell .nav-group a:hover{color:#fff!important;background:linear-gradient(90deg,rgba(23,105,255,.15),rgba(0,184,217,.09),rgba(124,58,237,.08))!important}

body.app-shell .sidebar-user-card{
  position:sticky!important;bottom:0!important;width:100%!important;min-height:66px!important;margin:14px 0 0!important;padding:9px 10px!important;gap:10px!important;
  color:#173454!important;border:1px solid rgba(23,105,255,.18)!important;border-radius:17px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(238,247,255,.95),rgba(248,243,255,.95))!important;
  box-shadow:0 12px 28px rgba(31,69,124,.11)!important;backdrop-filter:blur(18px)!important;
}
body.app-shell .side-user-photo{width:42px!important;height:42px!important;border-radius:12px!important;flex:0 0 42px!important;object-fit:cover!important}
body.app-shell .side-user-meta{min-width:0!important;text-align:left!important}
body.app-shell .side-user-meta b{display:block!important;color:#102b4a!important;font-size:11.5px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.app-shell .side-user-meta span{display:block!important;color:#6b819a!important;font-size:9.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.app-shell.dark .sidebar-user-card,html[data-theme="dark"] body.app-shell .sidebar-user-card{color:#edf6ff!important;border-color:rgba(104,166,230,.18)!important;background:linear-gradient(135deg,rgba(15,40,69,.96),rgba(24,35,69,.94))!important;box-shadow:0 15px 32px rgba(0,0,0,.24)!important}
body.app-shell.dark .side-user-meta b,html[data-theme="dark"] body.app-shell .side-user-meta b{color:#fff!important}
body.app-shell.dark .side-user-meta span,html[data-theme="dark"] body.app-shell .side-user-meta span{color:#9eb6cf!important}

/* ================================ TOPBAR ================================ */
body.app-shell .topbar{
  min-height:78px!important;margin:0 -22px 18px!important;padding:11px 18px!important;gap:16px!important;
  border-bottom:1px solid var(--v365-border)!important;border-radius:0 0 22px 22px!important;
  background:
    radial-gradient(circle at 72% 0,rgba(0,184,217,.08),transparent 24%),
    radial-gradient(circle at 93% 0,rgba(124,58,237,.08),transparent 26%),
    linear-gradient(90deg,rgba(255,255,255,.94),rgba(247,251,255,.92),rgba(249,246,255,.92))!important;
  box-shadow:0 10px 28px rgba(31,69,124,.08)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;-webkit-backdrop-filter:blur(20px) saturate(145%)!important;
}
body.app-shell.dark .topbar,body.app-shell[data-theme="dark"] .topbar,html.dark body.app-shell .topbar,html[data-theme="dark"] body.app-shell .topbar{
  border-bottom-color:rgba(104,159,220,.17)!important;
  background:linear-gradient(90deg,rgba(5,15,29,.94),rgba(8,25,46,.92),rgba(19,20,52,.91))!important;
  box-shadow:0 12px 32px rgba(0,0,0,.24)!important;
}
body.app-shell .title-block{min-width:0!important}
body.app-shell .live-clock{display:block!important;color:var(--v365-title)!important;font-size:16px!important;font-weight:900!important;line-height:1.2!important;letter-spacing:-.022em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.app-shell .fns114-auto-greeting,body.app-shell .fns116-auto-greeting{margin:5px 0 0!important;color:var(--v365-muted)!important;font-size:11.5px!important;font-weight:720!important;line-height:1.3!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.app-shell .top-actions{gap:8px!important;flex-wrap:nowrap!important}
body.app-shell .theme-toggle,body.app-shell .topbar-icon,body.app-shell .mobile-menu{
  width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid var(--v365-border)!important;
  border-radius:14px!important;color:var(--v365-text)!important;background:var(--v365-surface)!important;box-shadow:var(--v365-shadow-sm)!important;
}
body.app-shell .theme-toggle:hover,body.app-shell .topbar-icon:hover,body.app-shell .mobile-menu:hover{transform:translateY(-2px)!important;border-color:var(--v365-border-strong)!important;box-shadow:0 12px 24px rgba(23,105,255,.14)!important}
body.app-shell .user-chip{
  min-width:215px!important;min-height:46px!important;padding:5px 10px 5px 6px!important;gap:9px!important;border:1px solid var(--v365-border)!important;
  border-radius:16px!important;color:var(--v365-text)!important;background:var(--v365-surface)!important;box-shadow:var(--v365-shadow-sm)!important;
}
body.app-shell .user-chip img,body.app-shell .avatar-mini{width:34px!important;height:34px!important;border-radius:11px!important;flex:0 0 34px!important}
body.app-shell .user-chip span{font-size:11.5px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.app-shell .user-chip small{margin-top:2px!important;color:var(--v365-muted)!important;font-size:9px!important;font-weight:700!important}

/* ================================ SHARED SURFACES ================================ */
body.app-shell .card,body.app-shell .panel,body.app-shell .box,
body.app-shell .dash30-panel,body.app-shell .dash30-finance-card,
body.app-shell .fns280-registration-panel,body.app-shell .dash48-notification-panel{
  color:var(--v365-text)!important;border:1px solid var(--v365-border)!important;border-radius:var(--v365-radius)!important;
  background:var(--v365-surface)!important;box-shadow:var(--v365-shadow)!important;
}
body.app-shell .card{padding:18px!important;margin-bottom:16px!important}
body.app-shell .card::before,body.app-shell .panel::before,body.app-shell .box::before,body.app-shell .dash30-panel::before,body.app-shell .dash30-finance-card::before{
  height:3px!important;opacity:.9!important;background:linear-gradient(90deg,var(--v365-blue),var(--v365-cyan) 33%,var(--v365-green) 52%,var(--v365-violet) 75%,var(--v365-pink))!important;
}
body.app-shell h1,body.app-shell h2,body.app-shell h3,body.app-shell h4,body.app-shell h5,body.app-shell b,body.app-shell strong{color:var(--v365-title)!important}
body.app-shell p,body.app-shell small,body.app-shell .muted{color:var(--v365-muted)!important}
body.app-shell .card h3{font-size:15px!important;line-height:1.25!important;letter-spacing:-.01em!important}
body.app-shell .grid{gap:16px!important}
body.app-shell .grid.two{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important}
body.app-shell .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* ================================ DASHBOARD PRECISION ================================ */
body[data-module="dashboard"] .dash30-shell{display:grid!important;gap:16px!important;width:100%!important;max-width:1760px!important;margin:0 auto!important;padding:0 0 16px!important}

body[data-module="dashboard"] .dash31-realtime-row{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;margin:0!important;
}
body[data-module="dashboard"] .dash31-live-badge,body[data-module="dashboard"] a.dash31-rt-card{
  --v365-accent:var(--v365-blue);--v365-soft:rgba(23,105,255,.10);
  position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;min-width:0!important;width:100%!important;
  min-height:84px!important;height:84px!important;margin:0!important;padding:14px 14px 14px 58px!important;overflow:hidden!important;
  color:var(--v365-text)!important;border:1px solid var(--v365-border)!important;border-radius:19px!important;
  background:radial-gradient(circle at 94% 8%,var(--v365-soft),transparent 42%),var(--v365-surface)!important;
  box-shadow:var(--v365-shadow)!important;transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important;
}
body[data-module="dashboard"] .dash31-live-badge{--v365-accent:var(--v365-green);--v365-soft:rgba(16,185,129,.11)}
body[data-module="dashboard"] a.dash31-rt-card.green{--v365-accent:var(--v365-violet);--v365-soft:rgba(124,58,237,.10)}
body[data-module="dashboard"] a.dash31-rt-card.orange{--v365-accent:var(--v365-orange);--v365-soft:rgba(245,158,11,.12)}
body[data-module="dashboard"] a.dash31-rt-card.purple{--v365-accent:#9333ea;--v365-soft:rgba(147,51,234,.10)}
body[data-module="dashboard"] .dash31-live-badge::before,body[data-module="dashboard"] a.dash31-rt-card::before{
  content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;width:auto!important;height:3px!important;border-radius:0!important;background:linear-gradient(90deg,var(--v365-accent),var(--v365-cyan))!important;opacity:.95!important;
}
body[data-module="dashboard"] .dash31-live-badge::after,body[data-module="dashboard"] a.dash31-rt-card::after{
  position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;width:34px!important;height:34px!important;display:grid!important;place-items:center!important;
  border-radius:11px!important;color:var(--v365-accent)!important;background:var(--v365-soft)!important;box-shadow:inset 0 0 0 1px rgba(23,105,255,.12)!important;font-size:15px!important;
}
body[data-module="dashboard"] .dash31-live-badge::after{content:"●"!important}
body[data-module="dashboard"] a.dash31-rt-card.blue::after{content:"◆"!important}
body[data-module="dashboard"] a.dash31-rt-card.green::after{content:"⌁"!important}
body[data-module="dashboard"] a.dash31-rt-card.orange::after{content:"◉"!important}
body[data-module="dashboard"] a.dash31-rt-card.purple::after{content:"⚙"!important}
body[data-module="dashboard"] .dash31-live-badge>i{position:absolute!important;left:39px!important;top:22px!important;width:8px!important;height:8px!important;border:2px solid var(--v365-surface-solid)!important;border-radius:50%!important;background:#22c55e!important;box-shadow:0 0 0 3px rgba(34,197,94,.15),0 0 12px rgba(34,197,94,.55)!important;z-index:2!important}
body[data-module="dashboard"] .dash31-live-badge>div{min-width:0!important;line-height:1.15!important}
body[data-module="dashboard"] a.dash31-rt-card{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;line-height:1.15!important}
body[data-module="dashboard"] .dash31-live-badge b,body[data-module="dashboard"] a.dash31-rt-card strong{display:block!important;margin:0 0 5px!important;color:var(--v365-title)!important;font-size:12.5px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body[data-module="dashboard"] .dash31-live-badge span,body[data-module="dashboard"] a.dash31-rt-card span{display:block!important;color:var(--v365-muted)!important;font-size:10.5px!important;font-weight:720!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body[data-module="dashboard"] .dash31-live-badge em{color:var(--v365-blue)!important;font-style:normal!important;font-weight:900!important}
body[data-module="dashboard"] .dash31-live-badge:hover,body[data-module="dashboard"] a.dash31-rt-card:hover{transform:translateY(-3px)!important;border-color:var(--v365-border-strong)!important;box-shadow:var(--v365-shadow-lg)!important}

body[data-module="dashboard"] .dash30-ticket-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:0!important}
body[data-module="dashboard"] .dash30-ticket{
  --v365-accent:var(--v365-blue);--v365-soft:rgba(23,105,255,.10);
  position:relative!important;display:grid!important;grid-template-columns:48px auto!important;grid-template-rows:auto auto!important;align-content:center!important;align-items:center!important;
  min-width:0!important;min-height:124px!important;height:124px!important;padding:18px 20px!important;overflow:hidden!important;
  color:var(--v365-text)!important;border:1px solid var(--v365-border)!important;border-radius:22px!important;
  background:radial-gradient(circle at 92% 10%,var(--v365-soft),transparent 38%),var(--v365-surface)!important;box-shadow:var(--v365-shadow)!important;
}
body[data-module="dashboard"] .dash30-ticket.green{--v365-accent:var(--v365-green);--v365-soft:rgba(16,185,129,.11)}
body[data-module="dashboard"] .dash30-ticket.purple{--v365-accent:var(--v365-violet);--v365-soft:rgba(124,58,237,.11)}
body[data-module="dashboard"] .dash30-ticket.blue{--v365-accent:var(--v365-orange);--v365-soft:rgba(245,158,11,.12)}
body[data-module="dashboard"] .dash30-ticket::before{content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:14px!important;top:auto!important;width:auto!important;height:3px!important;border-radius:999px!important;background:linear-gradient(90deg,var(--v365-accent),transparent)!important;opacity:1!important}
body[data-module="dashboard"] .dash30-ticket i{grid-row:1/3!important;width:42px!important;height:42px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:13px!important;color:var(--v365-accent)!important;background:var(--v365-soft)!important;font-size:20px!important;font-style:normal!important;box-shadow:inset 0 0 0 1px rgba(23,105,255,.11)!important}
body[data-module="dashboard"] .dash30-ticket b{align-self:end!important;color:var(--v365-title)!important;font-size:28px!important;font-weight:850!important;line-height:1!important;letter-spacing:-.035em!important}
body[data-module="dashboard"] .dash30-ticket span{align-self:start!important;margin:5px 0 0!important;padding:0!important;color:var(--v365-title)!important;font-size:11px!important;font-weight:850!important;line-height:1.2!important}
body[data-module="dashboard"] .dash30-ticket:hover{transform:translateY(-3px)!important;border-color:var(--v365-border-strong)!important;box-shadow:var(--v365-shadow-lg)!important}

body[data-module="dashboard"] .dash30-finance-card{
  display:grid!important;grid-template-columns:minmax(380px,1.12fr) minmax(260px,.68fr) minmax(320px,.82fr)!important;align-items:stretch!important;
  gap:18px!important;margin:0!important;padding:20px!important;border-radius:25px!important;overflow:hidden!important;
}
body[data-module="dashboard"] .dash30-income-card{
  position:relative!important;min-height:250px!important;height:100%!important;padding:72px 28px 25px!important;border:0!important;border-radius:22px!important;overflow:hidden!important;
  color:#fff!important;background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.15),transparent 23%),
    radial-gradient(circle at 94% 12%,rgba(255,255,255,.17),transparent 28%),
    linear-gradient(125deg,#1769ff 0%,#008fbd 48%,#7c2ff7 100%)!important;
  box-shadow:0 20px 44px rgba(23,105,255,.24)!important;
}
body[data-module="dashboard"] .dash30-income-card::before,body[data-module="dashboard"] .dash30-income-card::after{content:""!important;position:absolute!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:50%!important;background:transparent!important}
body[data-module="dashboard"] .dash30-income-card::before{width:330px!important;height:330px!important;right:-90px!important;bottom:-180px!important;left:auto!important;top:auto!important}
body[data-module="dashboard"] .dash30-income-card::after{width:220px!important;height:220px!important;right:60px!important;bottom:-135px!important;left:auto!important;top:auto!important}
body[data-module="dashboard"] .dash30-card-circles{position:absolute!important;left:28px!important;top:30px!important;display:flex!important}
body[data-module="dashboard"] .dash30-card-circles span{width:34px!important;height:34px!important;border-radius:50%!important;background:rgba(255,255,255,.58)!important;margin-right:-10px!important}
body[data-module="dashboard"] .dash30-income-value{color:#fff!important;font-size:clamp(30px,2.35vw,42px)!important;font-weight:900!important;line-height:1!important;letter-spacing:-.04em!important;white-space:nowrap!important}
body[data-module="dashboard"] .dash30-income-label{margin-top:12px!important;color:#fff!important;font-size:12px!important;font-weight:900!important;letter-spacing:.01em!important}
body[data-module="dashboard"] .dash30-income-card p{max-width:72%!important;margin:25px 0 0!important;color:rgba(255,255,255,.82)!important;font-size:10.5px!important;font-weight:650!important;line-height:1.45!important}
body[data-module="dashboard"] .dash30-update{right:18px!important;top:28px!important;width:58px!important;height:166px!important;border-radius:22px!important;color:#1558d6!important;background:rgba(255,255,255,.91)!important;box-shadow:0 13px 30px rgba(9,36,100,.17)!important}
body[data-module="dashboard"] .dash30-update b{width:36px!important;height:36px!important;color:#1769ff!important;background:#fff!important;font-size:18px!important}
body[data-module="dashboard"] .dash30-update span{font-size:10px!important;font-weight:900!important}

body[data-module="dashboard"] .dash30-finance-list{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:8px 2px!important}
body[data-module="dashboard"] .dash30-finance-list h3{margin:0!important;color:var(--v365-title)!important;font-size:17px!important;font-weight:900!important;line-height:1.2!important}
body[data-module="dashboard"] .dash30-finance-list>p{margin:6px 0 13px!important;color:var(--v365-muted)!important;font-size:10px!important;line-height:1.4!important}
body[data-module="dashboard"] .dash30-legend{display:grid!important;grid-template-columns:12px minmax(75px,1fr) auto!important;align-items:center!important;gap:8px!important;min-height:37px!important;margin:4px 0!important;padding:0 10px!important;border:1px solid rgba(75,116,173,.10)!important;border-radius:11px!important;background:var(--v365-surface-soft)!important}
body[data-module="dashboard"] .dash30-legend .dot{width:9px!important;height:9px!important;border-radius:50%!important}
body[data-module="dashboard"] .dash30-legend b,body[data-module="dashboard"] .dash30-legend strong{font-size:10.5px!important;font-weight:850!important;white-space:nowrap!important}
body[data-module="dashboard"] .dash30-legend strong{color:var(--v365-title)!important;text-align:right!important}

body[data-module="dashboard"] .dash30-chart-box{min-width:0!important;height:100%!important;padding:17px!important;border:1px solid var(--v365-border)!important;border-radius:18px!important;background:linear-gradient(180deg,var(--v365-surface-soft),var(--v365-surface))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important}
body[data-module="dashboard"] .dash30-chart-box>span{color:var(--v365-text)!important;font-size:12px!important;font-weight:750!important}
body[data-module="dashboard"] .dash30-chart-box>b{display:block!important;margin:5px 0 10px!important;color:var(--v365-title)!important;font-size:25px!important;font-weight:900!important;line-height:1.1!important;letter-spacing:-.03em!important;white-space:nowrap!important}
body[data-module="dashboard"] .dash30-chart-legend{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:5px!important;color:var(--v365-muted)!important;font-size:8.5px!important;font-weight:700!important}
body[data-module="dashboard"] .dash30-chart-legend em{width:28px!important;height:8px!important;border-radius:999px!important}
body[data-module="dashboard"] .dash30-chart{height:126px!important;padding:13px 3px 0!important;gap:4px!important;border-radius:13px!important;background:linear-gradient(180deg,rgba(23,105,255,.03),transparent)!important}
body[data-module="dashboard"] .dash30-bar{height:94px!important}
body[data-module="dashboard"] .dash30-bar span{width:7px!important;border-radius:6px 6px 2px 2px!important}
body[data-module="dashboard"] .dash30-bar small{bottom:-17px!important;color:var(--v365-muted)!important;font-size:7.5px!important;font-weight:750!important}

body[data-module="dashboard"] .dash30-customer-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;margin:0!important}
body[data-module="dashboard"] .dash30-mini{
  --v365-accent:var(--v365-violet);--v365-soft:rgba(124,58,237,.10);
  position:relative!important;display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-content:center!important;align-items:center!important;
  min-width:0!important;min-height:100px!important;height:100px!important;padding:14px 14px 14px 62px!important;overflow:hidden!important;
  color:var(--v365-text)!important;border:1px solid var(--v365-border)!important;border-radius:19px!important;
  background:radial-gradient(circle at 94% 9%,var(--v365-soft),transparent 40%),var(--v365-surface)!important;box-shadow:var(--v365-shadow)!important;
}
body[data-module="dashboard"] .dash30-mini:nth-child(2){--v365-accent:var(--v365-green);--v365-soft:rgba(16,185,129,.11)}
body[data-module="dashboard"] .dash30-mini:nth-child(3){--v365-accent:#8b5cf6;--v365-soft:rgba(139,92,246,.11)}
body[data-module="dashboard"] .dash30-mini:nth-child(4){--v365-accent:var(--v365-orange);--v365-soft:rgba(245,158,11,.12)}
body[data-module="dashboard"] .dash30-mini:nth-child(5){--v365-accent:var(--v365-blue);--v365-soft:rgba(23,105,255,.10)}
body[data-module="dashboard"] .dash30-mini::before{content:""!important;position:absolute!important;left:12px!important;right:12px!important;bottom:0!important;top:auto!important;width:auto!important;height:3px!important;background:linear-gradient(90deg,var(--v365-accent),transparent)!important;border-radius:999px 999px 0 0!important}
body[data-module="dashboard"] .dash30-mini i{position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;width:40px!important;height:40px!important;display:grid!important;place-items:center!important;border-radius:13px!important;color:var(--v365-accent)!important;background:var(--v365-soft)!important;font-size:17px!important;font-style:normal!important}
body[data-module="dashboard"] .dash30-mini span{grid-column:2!important;color:var(--v365-muted)!important;font-size:9px!important;font-weight:850!important;line-height:1.2!important;text-transform:uppercase!important;letter-spacing:.025em!important;white-space:normal!important}
body[data-module="dashboard"] .dash30-mini b{grid-column:2!important;margin-top:4px!important;color:var(--v365-title)!important;font-size:23px!important;font-weight:900!important;line-height:1!important;letter-spacing:-.03em!important}
body[data-module="dashboard"] .dash30-mini:hover{transform:translateY(-3px)!important;border-color:var(--v365-border-strong)!important;box-shadow:var(--v365-shadow-lg)!important}

body[data-module="dashboard"] .dash30-info-grid{display:grid!important;grid-template-columns:minmax(0,1.34fr) minmax(330px,.66fr)!important;gap:16px!important;margin:0!important}
body[data-module="dashboard"] .dash30-panel{min-width:0!important;padding:18px!important;border-radius:21px!important}
body[data-module="dashboard"] .dash30-panel-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;margin-bottom:14px!important;padding-bottom:13px!important;border-bottom:1px solid var(--v365-border)!important}
body[data-module="dashboard"] .dash30-panel-head h3{margin:0!important;font-size:15px!important;font-weight:900!important}
body[data-module="dashboard"] .dash30-panel-head p{margin:4px 0 0!important;font-size:10px!important}
body[data-module="dashboard"] .dash30-panel-head>a{padding:7px 10px!important;border-radius:10px!important;color:#fff!important;background:linear-gradient(135deg,var(--v365-blue),var(--v365-cyan))!important;font-size:9.5px!important;font-weight:850!important;box-shadow:0 7px 16px rgba(23,105,255,.17)!important}

/* ================================ TABLES ================================ */
body.app-shell .table-wrap,body.app-shell .dash30-table-wrap,body.app-shell .table-responsive{
  overflow:auto!important;border:1px solid var(--v365-border)!important;border-radius:15px!important;background:var(--v365-surface)!important;box-shadow:0 8px 22px rgba(31,69,124,.06)!important;
}
body.app-shell table,body.app-shell .table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;color:var(--v365-text)!important;background:transparent!important}
body.app-shell thead tr,body.app-shell table thead tr{background:linear-gradient(100deg,#155bd7,#078fb5 48%,#6d39d8)!important}
body.app-shell thead th,body.app-shell table th{
  height:46px!important;padding:0 13px!important;color:#fff!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;
  font-size:10px!important;font-weight:850!important;letter-spacing:.03em!important;text-transform:none!important;white-space:nowrap!important;vertical-align:middle!important;
}
body.app-shell thead th:first-child{border-radius:14px 0 0 0!important}
body.app-shell thead th:last-child{border-radius:0 14px 0 0!important}
body.app-shell tbody td{
  min-height:45px!important;padding:11px 13px!important;color:var(--v365-text)!important;border:0!important;border-bottom:1px solid var(--v365-border)!important;
  background:var(--v365-row)!important;font-size:11px!important;line-height:1.35!important;vertical-align:middle!important;
}
body.app-shell tbody tr:nth-child(even) td{background:var(--v365-row-alt)!important}
body.app-shell tbody tr td:first-child{box-shadow:inset 3px 0 0 rgba(23,105,255,.27)!important}
body.app-shell tbody tr:nth-child(4n+2) td:first-child{box-shadow:inset 3px 0 0 rgba(16,185,129,.34)!important}
body.app-shell tbody tr:nth-child(4n+3) td:first-child{box-shadow:inset 3px 0 0 rgba(124,58,237,.32)!important}
body.app-shell tbody tr:nth-child(4n+4) td:first-child{box-shadow:inset 3px 0 0 rgba(245,158,11,.37)!important}
body.app-shell tbody tr:hover td{background:#eef7ff!important}
body.app-shell.dark tbody tr:hover td,html[data-theme="dark"] body.app-shell tbody tr:hover td{background:#163553!important}
body.app-shell .row-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:nowrap!important}

/* ================================ FORMS / BUTTONS / BADGES ================================ */
body.app-shell .form-grid{gap:13px!important}
body.app-shell .form-grid label,body.app-shell label{color:var(--v365-title)!important;font-size:10.5px!important;font-weight:850!important;gap:6px!important}
body.app-shell input:not([type="checkbox"]):not([type="radio"]),body.app-shell select,body.app-shell textarea{
  min-height:42px!important;padding:9px 12px!important;color:var(--v365-text)!important;border:1px solid var(--v365-border)!important;border-radius:12px!important;
  background:var(--v365-surface-soft)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.44)!important;font-size:11.5px!important;
}
body.app-shell textarea{min-height:88px!important}
body.app-shell input::placeholder,body.app-shell textarea::placeholder{color:var(--v365-muted)!important;opacity:.82!important}
body.app-shell input:not([type="checkbox"]):not([type="radio"]):focus,body.app-shell select:focus,body.app-shell textarea:focus{outline:none!important;border-color:rgba(23,105,255,.55)!important;background:var(--v365-surface-solid)!important;box-shadow:0 0 0 4px rgba(23,105,255,.10),0 8px 20px rgba(31,69,124,.08)!important}
body.app-shell .btn{
  min-height:38px!important;padding:8px 12px!important;gap:7px!important;color:var(--v365-text)!important;border:1px solid var(--v365-border)!important;border-radius:11px!important;
  background:var(--v365-surface-solid)!important;box-shadow:0 6px 15px rgba(31,69,124,.07)!important;font-size:10.5px!important;font-weight:850!important;
}
body.app-shell .btn:hover{transform:translateY(-2px)!important;border-color:var(--v365-border-strong)!important;box-shadow:0 11px 22px rgba(23,105,255,.12)!important}
body.app-shell .btn.primary,body.app-shell .btn-primary,body.app-shell .btn-save,body.app-shell .btn-submit{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,var(--v365-blue),var(--v365-cyan) 55%,var(--v365-violet))!important;box-shadow:0 10px 22px rgba(23,105,255,.22)!important}
body.app-shell .btn.tiny{min-height:31px!important;padding:6px 9px!important;border-radius:9px!important;font-size:9px!important}
body.app-shell .badge{min-height:24px!important;padding:4px 9px!important;border-radius:999px!important;font-size:9px!important;font-weight:900!important;line-height:1!important}
body.app-shell .alert{border-radius:14px!important;padding:12px 14px!important;font-size:11px!important;box-shadow:0 8px 20px rgba(31,69,124,.07)!important}

/* Kontras yang mengalahkan lapisan tema lama berspesifisitas tinggi. */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
body.app-shell:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
table thead th,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
body.app-shell:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
.table thead th,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
body.app-shell:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
.data-table thead th{color:#ffffff!important}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])
body.app-shell:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"])[data-module="dashboard"]
.dash30-income-card p{color:rgba(255,255,255,.84)!important}
body.app-shell.dark[data-module="dashboard"] .dash30-income-card p,
body.app-shell[data-theme="dark"][data-module="dashboard"] .dash30-income-card p,
html.dark body.app-shell[data-module="dashboard"] .dash30-income-card p,
html[data-theme="dark"] body.app-shell[data-module="dashboard"] .dash30-income-card p{color:rgba(255,255,255,.84)!important}

/* ================================ RESPONSIVE ================================ */
@media (min-width:821px) and (max-width:1360px){
  body.app-shell{--sidebar:252px}
  body.app-shell .main{padding:0 16px 30px!important}
  body.app-shell .topbar{margin:0 -16px 16px!important;padding:10px 14px!important}
  body[data-module="dashboard"] .dash30-shell{gap:13px!important}
  body[data-module="dashboard"] .dash31-realtime-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-module="dashboard"] .dash31-live-badge,body[data-module="dashboard"] a.dash31-rt-card{height:78px!important;min-height:78px!important}
  body[data-module="dashboard"] .dash30-ticket-grid{gap:13px!important}
  body[data-module="dashboard"] .dash30-ticket{height:112px!important;min-height:112px!important;padding:16px!important}
  body[data-module="dashboard"] .dash30-finance-card{grid-template-columns:minmax(330px,1.05fr) minmax(280px,.95fr)!important}
  body[data-module="dashboard"] .dash30-income-card{grid-row:1/3!important;min-height:270px!important}
  body[data-module="dashboard"] .dash30-chart-box{grid-column:2!important}
  body[data-module="dashboard"] .dash30-customer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body[data-module="dashboard"] .dash30-info-grid{grid-template-columns:1fr!important}
}
@media (min-width:821px) and (max-width:1050px){
  body.app-shell{--sidebar:236px}
  body.app-shell .user-chip{min-width:175px!important}
  body[data-module="dashboard"] .dash31-realtime-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-module="dashboard"] .dash30-ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-module="dashboard"] .dash30-finance-card{grid-template-columns:1fr!important}
  body[data-module="dashboard"] .dash30-income-card{grid-row:auto!important;min-height:235px!important}
  body[data-module="dashboard"] .dash30-chart-box{grid-column:auto!important;min-height:220px!important}
  body[data-module="dashboard"] .dash30-customer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.app-shell .grid.two,body.app-shell .grid.three{grid-template-columns:1fr!important}
}
@media (max-width:820px){
  body.app-shell{display:block!important;overflow-x:hidden!important}
  body.app-shell .main{width:100%!important;max-width:100%!important;min-height:100svh!important;padding:88px 12px calc(100px + env(safe-area-inset-bottom,0px))!important;overflow-x:hidden!important}
  body.app-shell .topbar{position:fixed!important;inset:0 0 auto 0!important;width:100%!important;min-height:76px!important;margin:0!important;padding:9px 10px!important;border-radius:0 0 20px 20px!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:8px!important;z-index:100000!important}
  body.app-shell .mobile-menu{display:grid!important;place-items:center!important}
  body.app-shell .live-clock{font-size:12px!important}
  body.app-shell .fns114-auto-greeting,body.app-shell .fns116-auto-greeting{font-size:9px!important;margin-top:3px!important}
  body.app-shell .top-actions{gap:5px!important}
  body.app-shell .theme-toggle,body.app-shell .topbar-icon,body.app-shell .mobile-menu{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;border-radius:12px!important}
  body.app-shell .user-chip{display:none!important}
  body.app-shell .sidebar{position:fixed!important;left:-292px!important;top:0!important;width:282px!important;height:100svh!important;z-index:100002!important;transition:left .22s ease!important}
  body.app-shell.nav-open .sidebar{left:0!important}
  body[data-module="dashboard"] .dash30-shell{gap:12px!important}
  html body.app-shell[data-module="dashboard"]:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-realtime-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html body.app-shell[data-module="dashboard"]:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge{grid-column:1/-1!important}
  body[data-module="dashboard"] .dash31-live-badge,body[data-module="dashboard"] a.dash31-rt-card{height:72px!important;min-height:72px!important;padding:12px 12px 12px 56px!important;border-radius:17px!important}
  body[data-module="dashboard"] .dash30-ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-module="dashboard"] .dash30-ticket{height:105px!important;min-height:105px!important;padding:14px!important;grid-template-columns:42px auto!important}
  body[data-module="dashboard"] .dash30-ticket i{width:36px!important;height:36px!important;font-size:17px!important}
  body[data-module="dashboard"] .dash30-ticket b{font-size:24px!important}
  body[data-module="dashboard"] .dash30-finance-card{grid-template-columns:1fr!important;gap:12px!important;padding:13px!important;border-radius:20px!important}
  body[data-module="dashboard"] .dash30-income-card{min-height:215px!important;padding:62px 20px 20px!important;border-radius:18px!important}
  body[data-module="dashboard"] .dash30-income-value{font-size:30px!important}
  body[data-module="dashboard"] .dash30-income-card p{max-width:65%!important;font-size:9px!important}
  body[data-module="dashboard"] .dash30-update{right:13px!important;top:20px!important;width:51px!important;height:145px!important;border-radius:19px!important}
  body[data-module="dashboard"] .dash30-finance-list{padding:4px!important}
  body[data-module="dashboard"] .dash30-chart-box{min-height:220px!important}
  body[data-module="dashboard"] .dash30-customer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-module="dashboard"] .dash30-mini{height:92px!important;min-height:92px!important;padding-left:58px!important}
  body[data-module="dashboard"] .dash30-info-grid{grid-template-columns:1fr!important;gap:12px!important}
  body.app-shell .grid.two,body.app-shell .grid.three,body.app-shell .stat-grid,body.app-shell .stat-grid.six{grid-template-columns:1fr!important}
  body.app-shell .form-grid{grid-template-columns:1fr!important}
  body.app-shell .card{padding:14px!important}
  body.app-shell thead th,body.app-shell table th{height:42px!important;padding:0 10px!important;font-size:9px!important}
  body.app-shell tbody td{padding:10px!important;font-size:10px!important}
}
@media (max-width:520px){
  body.app-shell .main{padding-left:9px!important;padding-right:9px!important}
    body[data-module="dashboard"] .dash30-ticket{height:98px!important;min-height:98px!important}
  body[data-module="dashboard"] .dash30-mini{height:88px!important;min-height:88px!important}
  body[data-module="dashboard"] .dash30-income-value{font-size:25px!important}
  body[data-module="dashboard"] .dash30-income-card p{max-width:61%!important}
}
@media (max-width:360px){
  body[data-module="dashboard"] .dash31-realtime-row,
  body[data-module="dashboard"] .dash30-ticket-grid,
  body[data-module="dashboard"] .dash30-customer-grid{grid-template-columns:1fr!important}
  body[data-module="dashboard"] .dash31-live-badge{grid-column:auto!important}
}
@media (prefers-reduced-motion:reduce){body.app-shell *,body.app-shell *::before,body.app-shell *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Scrollbar */
body.app-shell *{scrollbar-width:thin;scrollbar-color:rgba(23,105,255,.48) rgba(115,151,194,.09)}
body.app-shell *::-webkit-scrollbar{width:9px;height:9px}
body.app-shell *::-webkit-scrollbar-track{background:rgba(115,151,194,.08);border-radius:999px}
body.app-shell *::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:linear-gradient(180deg,var(--v365-blue),var(--v365-cyan),var(--v365-violet));background-clip:padding-box}

/* ======================================================================
   FNS V366 — GRADIENT LUXURY OVERRIDES
   Menambah gradasi warna yang hidup tanpa menurunkan kontras teks.
   ====================================================================== */
:root{
  --v366-grad-main:linear-gradient(135deg,#1769ff 0%,#00b8d9 42%,#7c3aed 76%,#ec4899 100%);
  --v366-grad-cool:linear-gradient(135deg,#1769ff 0%,#00b8d9 52%,#4f46e5 100%);
  --v366-grad-warm:linear-gradient(135deg,#f59e0b 0%,#fb7185 50%,#ec4899 100%);
  --v366-grad-green:linear-gradient(135deg,#059669 0%,#10b981 50%,#00b8d9 100%);
  --v366-glass-light:linear-gradient(145deg,rgba(255,255,255,.985),rgba(243,249,255,.965) 48%,rgba(250,246,255,.955));
  --v366-glass-dark:linear-gradient(145deg,rgba(12,32,58,.97),rgba(13,39,65,.95) 48%,rgba(30,24,67,.94));
}

/* KANVAS GRADASI */
body.app-shell{
  background:
    radial-gradient(circle at 8% 7%,rgba(0,184,217,.24),transparent 24%),
    radial-gradient(circle at 88% 4%,rgba(124,58,237,.22),transparent 29%),
    radial-gradient(circle at 98% 78%,rgba(236,72,153,.13),transparent 27%),
    radial-gradient(circle at 4% 92%,rgba(16,185,129,.13),transparent 25%),
    linear-gradient(126deg,transparent 0 38%,rgba(23,105,255,.055) 38.2% 38.8%,transparent 39% 64%,rgba(124,58,237,.045) 64.2% 64.8%,transparent 65%),
    radial-gradient(circle at 1px 1px,rgba(23,105,255,.105) 1px,transparent 1.25px),
    linear-gradient(132deg,#e8f5ff 0%,#f4f9ff 35%,#f7f2ff 69%,#fff3fa 100%)!important;
  background-size:auto,auto,auto,auto,128px 128px,24px 24px,auto!important;
}
body.app-shell.dark,
body.app-shell[data-theme="dark"],
html.dark body.app-shell,
html[data-theme="dark"] body.app-shell{
  background:
    radial-gradient(circle at 8% 7%,rgba(0,184,217,.17),transparent 25%),
    radial-gradient(circle at 88% 4%,rgba(124,58,237,.20),transparent 30%),
    radial-gradient(circle at 98% 78%,rgba(236,72,153,.09),transparent 27%),
    radial-gradient(circle at 4% 92%,rgba(16,185,129,.08),transparent 25%),
    linear-gradient(126deg,transparent 0 38%,rgba(71,149,255,.035) 38.2% 38.8%,transparent 39% 64%,rgba(168,85,247,.035) 64.2% 64.8%,transparent 65%),
    radial-gradient(circle at 1px 1px,rgba(126,184,255,.055) 1px,transparent 1.2px),
    linear-gradient(132deg,#040d1b 0%,#07182d 38%,#111a3a 72%,#24152f 100%)!important;
}
body.app-shell::before{
  opacity:.68;
  background:
    repeating-conic-gradient(from 20deg,rgba(23,105,255,.10) 0 1.4deg,transparent 1.4deg 10deg),
    radial-gradient(circle,transparent 0 38%,rgba(0,184,217,.12) 38.3% 39.2%,transparent 39.5% 53%,rgba(124,58,237,.09) 53.3% 54.2%,transparent 54.5% 67%,rgba(236,72,153,.07) 67.3% 68%,transparent 68.4%);
}
body.app-shell::after{
  opacity:.72;
  background:
    repeating-radial-gradient(ellipse at 68% 34%,transparent 0 17px,rgba(255,255,255,.12) 18px 19px,transparent 20px 34px),
    linear-gradient(135deg,rgba(16,185,129,.16),rgba(0,184,217,.13),rgba(23,105,255,.12),rgba(124,58,237,.13));
}

/* SIDEBAR DAN HEADER */
body.app-shell .sidebar{
  background:
    radial-gradient(circle at 4% 2%,rgba(0,184,217,.21),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(124,58,237,.17),transparent 35%),
    linear-gradient(145deg,rgba(23,105,255,.055) 0 22%,transparent 22% 53%,rgba(236,72,153,.035) 53% 72%,transparent 72%),
    radial-gradient(circle at 1px 1px,rgba(23,105,255,.075) 1px,transparent 1.15px) 0 0/22px 22px,
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(237,247,255,.985) 51%,rgba(248,241,255,.98))!important;
}
body.app-shell.dark .sidebar,
body.app-shell[data-theme="dark"] .sidebar,
html.dark body.app-shell .sidebar,
html[data-theme="dark"] body.app-shell .sidebar{
  background:
    radial-gradient(circle at 4% 2%,rgba(0,184,217,.18),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(124,58,237,.20),transparent 35%),
    linear-gradient(145deg,rgba(23,105,255,.055) 0 22%,transparent 22% 53%,rgba(236,72,153,.04) 53% 72%,transparent 72%),
    radial-gradient(circle at 1px 1px,rgba(135,185,255,.045) 1px,transparent 1.15px) 0 0/22px 22px,
    linear-gradient(180deg,rgba(4,14,28,.99),rgba(7,27,50,.985) 52%,rgba(24,19,55,.98))!important;
}
body.app-shell .sidebar .brand{
  background:
    radial-gradient(circle at 92% 5%,rgba(124,58,237,.13),transparent 39%),
    radial-gradient(circle at 5% 95%,rgba(0,184,217,.12),transparent 40%),
    linear-gradient(135deg,rgba(255,255,255,.995),rgba(235,247,255,.98) 52%,rgba(247,239,255,.975))!important;
}
body.app-shell .topbar{
  background:
    radial-gradient(circle at 54% -25%,rgba(0,184,217,.14),transparent 36%),
    radial-gradient(circle at 92% -18%,rgba(124,58,237,.14),transparent 38%),
    linear-gradient(100deg,rgba(255,255,255,.97),rgba(238,249,255,.95) 48%,rgba(247,240,255,.95) 78%,rgba(255,243,249,.95))!important;
}
body.app-shell.dark .topbar,
body.app-shell[data-theme="dark"] .topbar,
html.dark body.app-shell .topbar,
html[data-theme="dark"] body.app-shell .topbar{
  background:
    radial-gradient(circle at 54% -25%,rgba(0,184,217,.11),transparent 36%),
    radial-gradient(circle at 92% -18%,rgba(124,58,237,.14),transparent 38%),
    linear-gradient(100deg,rgba(4,14,28,.97),rgba(6,31,53,.95) 48%,rgba(26,22,61,.95) 78%,rgba(45,20,46,.94))!important;
}

/* PERMUKAAN KARTU GRADASI HALUS */
body.app-shell .card,
body.app-shell .panel,
body.app-shell .box,
body.app-shell .dash30-panel,
body.app-shell .dash30-finance-card,
body.app-shell .fns280-registration-panel,
body.app-shell .dash48-notification-panel{
  background:
    radial-gradient(circle at 100% 0,rgba(124,58,237,.055),transparent 32%),
    radial-gradient(circle at 0 100%,rgba(0,184,217,.05),transparent 34%),
    var(--v366-glass-light)!important;
}
body.app-shell.dark .card,
body.app-shell.dark .panel,
body.app-shell.dark .box,
body.app-shell.dark .dash30-panel,
body.app-shell.dark .dash30-finance-card,
body.app-shell[data-theme="dark"] .card,
body.app-shell[data-theme="dark"] .panel,
body.app-shell[data-theme="dark"] .box,
html[data-theme="dark"] body.app-shell .card,
html[data-theme="dark"] body.app-shell .panel,
html[data-theme="dark"] body.app-shell .box{
  background:
    radial-gradient(circle at 100% 0,rgba(124,58,237,.09),transparent 34%),
    radial-gradient(circle at 0 100%,rgba(0,184,217,.07),transparent 36%),
    var(--v366-glass-dark)!important;
}

/* DASHBOARD */
body[data-module="dashboard"] .dash31-live-badge,
body[data-module="dashboard"] a.dash31-rt-card{
  background:
    radial-gradient(circle at 92% 12%,var(--v365-soft),transparent 43%),
    linear-gradient(135deg,rgba(255,255,255,.99),rgba(240,249,255,.97) 54%,rgba(249,244,255,.97))!important;
}
body.app-shell.dark[data-module="dashboard"] .dash31-live-badge,
body.app-shell.dark[data-module="dashboard"] a.dash31-rt-card,
body.app-shell[data-theme="dark"][data-module="dashboard"] .dash31-live-badge,
body.app-shell[data-theme="dark"][data-module="dashboard"] a.dash31-rt-card{
  background:
    radial-gradient(circle at 92% 12%,var(--v365-soft),transparent 43%),
    linear-gradient(135deg,rgba(11,31,56,.98),rgba(10,44,67,.96) 54%,rgba(34,26,72,.95))!important;
}
body[data-module="dashboard"] .dash30-ticket{
  background:
    radial-gradient(circle at 91% 8%,var(--v365-soft),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(242,249,255,.97) 56%,rgba(250,245,255,.96))!important;
}
body.app-shell.dark[data-module="dashboard"] .dash30-ticket,
body.app-shell[data-theme="dark"][data-module="dashboard"] .dash30-ticket{
  background:
    radial-gradient(circle at 91% 8%,var(--v365-soft),transparent 42%),
    linear-gradient(145deg,rgba(11,31,56,.98),rgba(11,42,64,.96) 56%,rgba(32,26,68,.95))!important;
}
body[data-module="dashboard"] .dash30-finance-card{
  background:
    radial-gradient(circle at 0 0,rgba(0,184,217,.075),transparent 30%),
    radial-gradient(circle at 100% 100%,rgba(124,58,237,.075),transparent 33%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,249,255,.97) 50%,rgba(250,244,255,.97))!important;
}
body[data-module="dashboard"] .dash30-income-card{
  background:
    radial-gradient(circle at 10% 4%,rgba(255,255,255,.22),transparent 25%),
    radial-gradient(circle at 92% 6%,rgba(255,255,255,.20),transparent 29%),
    linear-gradient(122deg,#1259df 0%,#047de2 25%,#00a9c7 50%,#5b47e8 74%,#8b2be2 100%)!important;
  box-shadow:0 23px 52px rgba(57,70,205,.30)!important;
}
body[data-module="dashboard"] .dash30-chart-box{
  background:
    radial-gradient(circle at 95% 0,rgba(124,58,237,.07),transparent 34%),
    linear-gradient(180deg,rgba(245,250,255,.98),rgba(253,248,255,.97))!important;
}
body.app-shell.dark[data-module="dashboard"] .dash30-chart-box,
body.app-shell[data-theme="dark"][data-module="dashboard"] .dash30-chart-box{
  background:
    radial-gradient(circle at 95% 0,rgba(124,58,237,.11),transparent 34%),
    linear-gradient(180deg,rgba(12,38,62,.98),rgba(28,25,64,.96))!important;
}
body[data-module="dashboard"] .dash30-legend{
  background:linear-gradient(105deg,rgba(240,248,255,.98),rgba(249,244,255,.96))!important;
}
body.app-shell.dark[data-module="dashboard"] .dash30-legend,
body.app-shell[data-theme="dark"][data-module="dashboard"] .dash30-legend{
  background:linear-gradient(105deg,rgba(14,39,65,.98),rgba(31,27,68,.96))!important;
}
body[data-module="dashboard"] .dash30-mini{
  background:
    radial-gradient(circle at 93% 8%,var(--v365-soft),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,249,255,.97) 58%,rgba(250,245,255,.96))!important;
}
body.app-shell.dark[data-module="dashboard"] .dash30-mini,
body.app-shell[data-theme="dark"][data-module="dashboard"] .dash30-mini{
  background:
    radial-gradient(circle at 93% 8%,var(--v365-soft),transparent 42%),
    linear-gradient(145deg,rgba(11,31,56,.98),rgba(11,42,64,.96) 58%,rgba(32,26,68,.95))!important;
}

/* TABEL, FORM, DAN TOMBOL */
body.app-shell .table-wrap,
body.app-shell .dash30-table-wrap,
body.app-shell .table-responsive{
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(243,249,255,.98) 62%,rgba(250,246,255,.97))!important;
}
body.app-shell.dark .table-wrap,
body.app-shell.dark .dash30-table-wrap,
body.app-shell.dark .table-responsive,
body.app-shell[data-theme="dark"] .table-wrap,
body.app-shell[data-theme="dark"] .dash30-table-wrap,
body.app-shell[data-theme="dark"] .table-responsive{
  background:linear-gradient(145deg,rgba(10,29,53,.98),rgba(11,40,64,.97) 62%,rgba(31,25,67,.96))!important;
}
body.app-shell thead tr,
body.app-shell table thead tr{
  background:linear-gradient(100deg,#1259df 0%,#078fc2 40%,#4f46e5 72%,#8b2be2 100%)!important;
}
body.app-shell tbody td{
  background:linear-gradient(90deg,var(--v365-row),rgba(247,250,255,.97))!important;
}
body.app-shell tbody tr:nth-child(even) td{
  background:linear-gradient(90deg,var(--v365-row-alt),rgba(249,246,255,.96))!important;
}
body.app-shell.dark tbody td,
body.app-shell[data-theme="dark"] tbody td{
  background:linear-gradient(90deg,var(--v365-row),rgba(14,39,65,.98))!important;
}
body.app-shell.dark tbody tr:nth-child(even) td,
body.app-shell[data-theme="dark"] tbody tr:nth-child(even) td{
  background:linear-gradient(90deg,var(--v365-row-alt),rgba(30,26,65,.97))!important;
}
body.app-shell input:not([type="checkbox"]):not([type="radio"]),
body.app-shell select,
body.app-shell textarea{
  background:linear-gradient(135deg,var(--v365-surface-soft),rgba(249,245,255,.96))!important;
}
body.app-shell.dark input:not([type="checkbox"]):not([type="radio"]),
body.app-shell.dark select,
body.app-shell.dark textarea,
body.app-shell[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
body.app-shell[data-theme="dark"] select,
body.app-shell[data-theme="dark"] textarea{
  background:linear-gradient(135deg,rgba(15,40,67,.98),rgba(30,26,65,.96))!important;
}
body.app-shell .btn{
  background:linear-gradient(135deg,rgba(255,255,255,.99),rgba(239,248,255,.98) 56%,rgba(248,242,255,.97))!important;
}
body.app-shell.dark .btn,
body.app-shell[data-theme="dark"] .btn{
  background:linear-gradient(135deg,rgba(13,37,63,.99),rgba(19,42,69,.97) 56%,rgba(37,29,72,.96))!important;
}
body.app-shell .btn.primary,
body.app-shell .btn-primary,
body.app-shell .btn-save,
body.app-shell .btn-submit{
  background:var(--v366-grad-main)!important;
  box-shadow:0 12px 26px rgba(73,65,210,.27)!important;
}
body.app-shell .nav-group a.active{
  background:linear-gradient(105deg,#1769ff 0%,#00b8d9 43%,#5b47e8 72%,#8b2be2 100%)!important;
}
body.app-shell .sidebar-user-card{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,248,255,.96) 52%,rgba(246,237,255,.96))!important;
}
body.app-shell.dark .sidebar-user-card,
body.app-shell[data-theme="dark"] .sidebar-user-card,
html[data-theme="dark"] body.app-shell .sidebar-user-card{
  background:linear-gradient(135deg,rgba(12,37,64,.97),rgba(10,46,67,.95) 52%,rgba(37,27,72,.95))!important;
}

/* Mobile: gradasi tetap ringan dan tidak mengurangi performa */
@media (max-width:820px){
  body.app-shell{
    background-size:auto,auto,auto,auto,110px 110px,22px 22px,auto!important;
    background-attachment:scroll!important;
  }
  body.app-shell .topbar{
    background:linear-gradient(105deg,rgba(255,255,255,.98),rgba(233,248,255,.97) 50%,rgba(245,238,255,.97))!important;
  }
  body.app-shell.dark .topbar,
  body.app-shell[data-theme="dark"] .topbar{
    background:linear-gradient(105deg,rgba(5,17,31,.98),rgba(7,39,59,.97) 50%,rgba(32,24,68,.96))!important;
  }
}