/* ============================================================
   SIMPI PREMIUM UI — 13 Juli 2026
   Unified design system: desktop, tablet, mobile, dark & light.
   ============================================================ */

:root{
  --sidebar:280px;
  --topbar-height:96px;
  --bg:#07111f;
  --bg-soft:#0b1728;
  --surface:rgba(15,28,46,.86);
  --surface-solid:#101d30;
  --surface-2:#14243a;
  --surface-3:#1a2d47;
  --surface-hover:#1e3451;
  --line:rgba(148,163,184,.16);
  --line-strong:rgba(148,163,184,.28);
  --text:#f8fafc;
  --text-2:#cbd5e1;
  --muted:#8fa2ba;
  --primary:#4f8cff;
  --primary-2:#7259ff;
  --primary-soft:rgba(79,140,255,.16);
  --success:#25c889;
  --success-soft:rgba(37,200,137,.14);
  --warning:#f6b84c;
  --warning-soft:rgba(246,184,76,.14);
  --danger:#ff667a;
  --danger-soft:rgba(255,102,122,.14);
  --cyan:#38c7e8;
  --purple:#a078ff;
  --shadow-lg:0 28px 80px rgba(0,0,0,.32);
  --shadow-md:0 16px 46px rgba(0,0,0,.22);
  --shadow-sm:0 8px 24px rgba(0,0,0,.16);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --ease:cubic-bezier(.2,.75,.25,1);
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html[data-theme="light"]{
  --bg:#eef3f9;
  --bg-soft:#f7f9fc;
  --surface:rgba(255,255,255,.88);
  --surface-solid:#ffffff;
  --surface-2:#f3f6fa;
  --surface-3:#eaf0f7;
  --surface-hover:#e5edf7;
  --line:rgba(15,23,42,.10);
  --line-strong:rgba(15,23,42,.17);
  --text:#102039;
  --text-2:#42526a;
  --muted:#728197;
  --primary:#326ff1;
  --primary-2:#6547e8;
  --primary-soft:rgba(50,111,241,.11);
  --success:#139d69;
  --success-soft:rgba(19,157,105,.10);
  --warning:#c98512;
  --warning-soft:rgba(201,133,18,.10);
  --danger:#d9435b;
  --danger-soft:rgba(217,67,91,.10);
  --shadow-lg:0 26px 70px rgba(46,64,92,.16);
  --shadow-md:0 14px 38px rgba(46,64,92,.12);
  --shadow-sm:0 7px 20px rgba(46,64,92,.09);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block}
::selection{background:rgba(79,140,255,.28);color:var(--text)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.23);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.4);border:2px solid transparent;background-clip:padding-box}

.ui-icon{width:20px;height:20px;flex:0 0 auto}
.w-100{width:100%}
.mt-10{margin-top:10px}
.muted{color:var(--muted)!important}
.align-start{align-items:start}
.span-2{grid-column:span 2}

/* Background */
.app-bg,.login-ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.app-bg:before,.login-ambient:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 12%,rgba(79,140,255,.12),transparent 35%),radial-gradient(circle at 86% 18%,rgba(114,89,255,.10),transparent 32%),radial-gradient(circle at 62% 88%,rgba(56,199,232,.07),transparent 34%)}
.app-bg span,.login-ambient span{position:absolute;border-radius:999px;filter:blur(2px);opacity:.28;animation:ambientFloat 18s ease-in-out infinite alternate}
.app-bg span:nth-child(1),.login-ambient span:nth-child(1){width:420px;height:420px;left:-180px;top:-120px;background:linear-gradient(145deg,#387cff,#6f52ff)}
.app-bg span:nth-child(2),.login-ambient span:nth-child(2){width:360px;height:360px;right:-140px;top:18%;background:linear-gradient(145deg,#7959ff,#28bee1);animation-delay:-6s}
.app-bg span:nth-child(3),.login-ambient span:nth-child(3){width:300px;height:300px;left:42%;bottom:-200px;background:linear-gradient(145deg,#25c889,#38c7e8);animation-delay:-12s}
html[data-theme="light"] .app-bg span,html[data-theme="light"] .login-ambient span{opacity:.10}
@keyframes ambientFloat{to{transform:translate3d(30px,24px,0) scale(1.08)}}

/* Glass */
.glass-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Sidebar */
.sidebar{position:fixed;z-index:40;inset:14px auto 14px 14px;width:var(--sidebar);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(13,27,46,.96),rgba(8,19,33,.96));border:1px solid rgba(148,163,184,.16);border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden;transition:transform .35s var(--ease)}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,249,253,.98));border-color:rgba(15,23,42,.08)}
.sidebar:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:160px;background:linear-gradient(145deg,rgba(79,140,255,.18),transparent 65%);pointer-events:none}
.brand{position:relative;display:flex;align-items:center;gap:12px;padding:20px 17px 18px;border-bottom:1px solid var(--line);min-height:88px}
.brand-copy{min-width:0;flex:1}
.brand strong{display:block;font-size:13px;line-height:1.25;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#bdaeff;background:rgba(114,89,255,.14);border:1px solid rgba(160,120,255,.2)}
.premium-mark .ui-icon{width:16px;height:16px}
.logo-badge{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#4f8cff,#7259ff);color:#fff;font-size:16px;font-weight:900;letter-spacing:.03em;box-shadow:0 12px 30px rgba(79,140,255,.3);overflow:hidden;flex:0 0 auto;border:1px solid rgba(255,255,255,.18)}
.logo-badge.has-logo{background:var(--surface-2);padding:5px}
.logo-badge img,.logo-badge .logo-img{width:100%;height:100%;object-fit:contain;border-radius:11px}
.logo-badge.small{width:50px;height:50px}
.nav-menu{position:relative;flex:1;min-height:0;overflow-y:auto;padding:14px 12px 20px}
.nav-group+.nav-group{margin-top:15px}
.nav-group-title{margin:0 9px 7px;color:var(--muted);font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.nav-link{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:8px 10px;margin:3px 0;border-radius:13px;color:var(--text-2);font-size:12px;font-weight:720;transition:all .22s var(--ease)}
.nav-link:hover{color:var(--text);background:var(--surface-hover);transform:translateX(2px)}
.nav-link.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 10px 22px rgba(79,140,255,.23)}
.nav-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--muted);background:rgba(148,163,184,.08);transition:all .22s var(--ease)}
.nav-icon .ui-icon{width:16px;height:16px}
.nav-link:hover .nav-icon{color:var(--text);background:rgba(148,163,184,.12)}
.nav-link.active .nav-icon{color:#fff;background:rgba(255,255,255,.14)}
.nav-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-arrow{opacity:0;transform:translateX(-5px);transition:all .22s var(--ease)}
.nav-arrow .ui-icon{width:14px;height:14px}
.nav-link:hover .nav-arrow,.nav-link.active .nav-arrow{opacity:.8;transform:none}
.sidebar-footer{position:relative;padding:13px;border-top:1px solid var(--line);background:rgba(3,10,20,.16)}
.user-mini{display:flex;align-items:center;gap:10px;padding:9px;border-radius:14px;transition:background .2s ease}
.user-mini:hover{background:var(--surface-hover)}
.user-mini>div:nth-child(2){min-width:0;flex:1}
.user-mini strong{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-mini small{display:block;margin-top:2px;color:var(--muted);font-size:9.5px}
.user-mini-arrow{color:var(--muted)}
.user-mini-arrow .ui-icon{width:14px;height:14px}
.avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:12px;background:linear-gradient(145deg,#4f8cff,#7259ff);color:#fff;font-size:11px;font-weight:900;overflow:hidden;box-shadow:0 8px 20px rgba(79,140,255,.2)}
.avatar.has-logo{padding:3px;background:var(--surface-3)}
.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.sidebar-logout{margin-top:7px;justify-content:flex-start;width:100%;padding:9px 11px!important;font-size:10.5px!important}
.sidebar-logout .ui-icon{width:15px;height:15px}
.sidebar-overlay{display:none}

/* Main layout & header */
.main{position:relative;z-index:1;min-height:100vh;margin-left:calc(var(--sidebar) + 28px);padding:14px 14px 40px 0}
.topbar{position:sticky;top:14px;z-index:30;min-height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 18px;border-radius:23px}
.topbar-left{display:flex;align-items:center;gap:13px;min-width:0}
.page-heading{min-width:0}
.eyebrow{margin:0 0 3px;color:var(--primary);font-size:9.5px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.topbar h1{margin:0;color:var(--text);font-size:24px;line-height:1.16;font-weight:850;letter-spacing:-.035em}
.page-description{margin:4px 0 0;color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:600px}
.top-actions{display:flex;align-items:center;gap:9px}
.datetime-chip{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.datetime-icon{display:grid;place-items:center;color:var(--primary)}
.datetime-icon .ui-icon{width:16px;height:16px}
.datetime-chip strong{display:block;color:var(--text-2);font-size:10.5px;white-space:nowrap}
.datetime-chip small{display:block;color:var(--muted);font-size:9.5px;margin-top:1px}
.icon-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:13px;color:var(--text-2);background:var(--surface-2);cursor:pointer;transition:all .2s var(--ease)}
.icon-button:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-hover);transform:translateY(-1px)}
.icon-button .ui-icon{width:18px;height:18px}
.hamburger{display:none}
.theme-toggle{position:relative}
.theme-icon{position:absolute;transition:opacity .2s ease,transform .25s var(--ease)}
html[data-theme="dark"] .theme-icon-sun{opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] .theme-icon-moon{opacity:0;transform:rotate(-40deg) scale(.5)}
html[data-theme="light"] .theme-icon-sun{opacity:0;transform:rotate(40deg) scale(.5)}
html[data-theme="light"] .theme-icon-moon{opacity:1;transform:rotate(0) scale(1)}
.top-user{display:flex;align-items:center;gap:9px;padding:6px 9px 6px 7px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);transition:all .2s ease}
.top-user:hover{background:var(--surface-hover);border-color:var(--line-strong)}
.top-user .top-avatar{width:32px;height:32px;border-radius:10px}
.top-user strong{display:block;max-width:130px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-user small{display:block;margin-top:1px;color:var(--muted);font-size:9px}
.page-content{padding-top:16px}
.mobile-nav{display:none}

/* Cards & common content */
.panel,.hero,.stat-card,.excel-hero,.payment-hero{position:relative;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden}
.panel{padding:19px;border-radius:var(--radius-lg);background:var(--surface)}
.panel:hover{border-color:var(--line-strong)}
.panel h3{margin:0 0 15px;color:var(--text);font-size:16px;font-weight:820;letter-spacing:-.025em}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:15px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:15px}

/* Hero */
.hero,.excel-hero,.payment-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px;border-radius:var(--radius-xl);background:linear-gradient(140deg,rgba(38,78,137,.82),rgba(42,32,94,.72));box-shadow:var(--shadow-md)}
html[data-theme="light"] .hero,html[data-theme="light"] .excel-hero,html[data-theme="light"] .payment-hero{background:linear-gradient(140deg,#eaf2ff,#f0edff);border-color:rgba(79,140,255,.16)}
.hero:before,.excel-hero:before,.payment-hero:before{content:"";position:absolute;inset:-40% -10% auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(114,89,255,.28),transparent 67%)}
.hero-copy{position:relative;z-index:1;max-width:760px}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;margin-bottom:11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.07);font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#dbe8ff}
html[data-theme="light"] .hero-kicker{color:#36547f;background:rgba(79,140,255,.08);border-color:rgba(79,140,255,.14)}
.hero-kicker .ui-icon{width:14px;height:14px;color:#bcaaff}
.hero h2,.excel-hero h2,.payment-hero h2{position:relative;z-index:1;margin:0;color:#fff;font-size:clamp(26px,3.2vw,43px);line-height:1.08;font-weight:880;letter-spacing:-.052em;max-width:850px}
html[data-theme="light"] .hero h2,html[data-theme="light"] .excel-hero h2,html[data-theme="light"] .payment-hero h2{color:#142846}
.hero h2 em{font-style:normal;background:linear-gradient(90deg,#b9d5ff,#c7b8ff,#a2efff);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .hero h2 em{background:linear-gradient(90deg,#326ff1,#6b4de7);-webkit-background-clip:text;background-clip:text}
.hero p,.excel-hero p,.payment-hero p{position:relative;z-index:1;margin:11px 0 0;color:#bdcde4;font-size:12px;line-height:1.7}
html[data-theme="light"] .hero p,html[data-theme="light"] .excel-hero p,html[data-theme="light"] .payment-hero p{color:#5b6e88}
.hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.hero-brand-stack{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:11px;flex-wrap:wrap;max-width:310px}
.logo-badge.hero-logo{width:104px;height:104px;border-radius:28px;font-size:28px}
.hero-badge.mini{display:flex;flex-direction:column;justify-content:center;align-items:center;width:112px;height:104px;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px)}
html[data-theme="light"] .hero-badge.mini{background:rgba(255,255,255,.68);border-color:rgba(79,140,255,.14)}
.hero-badge.mini span{font-size:25px;font-weight:900;color:#fff;letter-spacing:-.04em}
html[data-theme="light"] .hero-badge.mini span{color:#18355c}
.hero-badge.mini small{margin-top:3px;color:#bdcde4;font-size:9px;font-weight:700}
html[data-theme="light"] .hero-badge.mini small{color:#62748b}

.hero-badge:not(.mini){position:relative;z-index:1;display:grid;place-items:center;align-content:center;gap:7px;width:118px;height:118px;flex:0 0 auto;border:1px solid rgba(255,255,255,.15);border-radius:30px;background:rgba(255,255,255,.08);color:#d9e7ff;backdrop-filter:blur(12px)}
.hero-badge:not(.mini) .ui-icon{width:38px;height:38px}.hero-badge:not(.mini) small{color:#b9cbe1;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
html[data-theme="light"] .hero-badge:not(.mini){background:rgba(255,255,255,.68);border-color:rgba(79,140,255,.14);color:#326ff1}html[data-theme="light"] .hero-badge:not(.mini) small{color:#65768d}
.excel-hero .excel-badge{position:relative;z-index:1;width:96px;height:96px;margin:0;border-radius:26px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);color:#d9e7ff}.excel-hero .excel-badge .ui-icon{width:36px;height:36px}
html[data-theme="light"] .excel-hero .excel-badge{background:rgba(255,255,255,.7);border-color:rgba(79,140,255,.14);color:#326ff1}

.hero-status{width:100%;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06)}
html[data-theme="light"] .hero-status{background:rgba(255,255,255,.62);border-color:rgba(79,140,255,.12)}
.hero-status>span{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(37,200,137,.14)}
.hero-status strong{display:block;font-size:10.5px;color:#fff}
html[data-theme="light"] .hero-status strong{color:#173354}
.hero-status small{display:block;margin-top:1px;color:#b7c8dd;font-size:9px}
html[data-theme="light"] .hero-status small{color:#65768d}

/* Stats */
.stat-card{display:flex;align-items:flex-start;gap:12px;min-height:122px;padding:16px;border-radius:20px;background:var(--surface);transition:transform .24s var(--ease),border-color .2s ease,box-shadow .24s ease}
.stat-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.stat-card:after{content:"";position:absolute;inset:auto -24px -42px auto;width:100px;height:100px;border-radius:50%;background:var(--card-glow,rgba(79,140,255,.13));filter:blur(2px)}
.stat-card>div{position:relative;z-index:1;min-width:0}
.stat-icon{position:relative;z-index:1;display:grid!important;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:var(--card-soft,var(--primary-soft));color:var(--card-color,var(--primary))}
.stat-icon .ui-icon{width:19px;height:19px}
.stat-card p{margin:0 0 5px;color:var(--muted);font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.stat-card strong{display:block;color:var(--text);font-size:17px;line-height:1.25;font-weight:880;letter-spacing:-.035em;overflow-wrap:anywhere}
.stat-card small{display:block;margin-top:6px;color:var(--muted);font-size:8.8px;line-height:1.4}
.stat-card.accent-1{--card-color:#4f8cff;--card-soft:rgba(79,140,255,.14);--card-glow:rgba(79,140,255,.13)}
.stat-card.accent-2{--card-color:#25c889;--card-soft:rgba(37,200,137,.14);--card-glow:rgba(37,200,137,.12)}
.stat-card.accent-3{--card-color:#a078ff;--card-soft:rgba(160,120,255,.14);--card-glow:rgba(160,120,255,.12)}
.stat-card.accent-4{--card-color:#f6b84c;--card-soft:rgba(246,184,76,.14);--card-glow:rgba(246,184,76,.12)}
.stat-card.accent-5{--card-color:#ff667a;--card-soft:rgba(255,102,122,.14);--card-glow:rgba(255,102,122,.12)}

/* Financial overview */
.financial-overview{margin-top:15px}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.section-heading h3{margin:0}
.overview-total{text-align:right}
.overview-total span{display:block;color:var(--muted);font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.overview-total strong{display:block;margin-top:3px;font-size:18px;letter-spacing:-.035em}
.metric-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px}
.metric-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.metric-row span{color:var(--text-2);font-size:10px;font-weight:700}
.metric-row strong{font-size:10px}
.metric-track{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.metric-track i{display:block;height:100%;min-width:3px;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 0 16px rgba(79,140,255,.35)}
.metric-row:nth-child(2) .metric-track i{background:linear-gradient(90deg,#25c889,#38c7e8)}
.metric-row:nth-child(3) .metric-track i{background:linear-gradient(90deg,#f6b84c,#ff8d66)}
.metric-row:nth-child(4) .metric-track i{background:linear-gradient(90deg,#a078ff,#ff667a)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:10.5px;font-weight:800;line-height:1;cursor:pointer;transition:all .2s var(--ease);box-shadow:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);background:var(--surface-hover);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn .ui-icon{width:15px;height:15px}
.btn-primary{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;box-shadow:0 10px 22px rgba(79,140,255,.22)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 13px 28px rgba(79,140,255,.28)}
.btn-success{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,#16a96f,#25c889)!important}
.btn-danger{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,#e54b62,#ff667a)!important}
.btn-light{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);color:var(--text)}
html[data-theme="light"] .btn-light{background:#fff;border-color:var(--line)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--surface-hover);box-shadow:none}
.btn-small{min-height:30px;padding:7px 10px;border-radius:9px;font-size:9px}
.flex-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inline-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-stack{display:grid;gap:13px}
label,.form-grid label,.form-stack label,.filter-bar label,.mini-filter label{display:grid;gap:6px;color:var(--text-2);font-size:9.5px;font-weight:760;letter-spacing:.012em}
input,select,textarea{width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text);font-size:11px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
textarea{resize:vertical;line-height:1.6;min-height:74px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.72}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:rgba(79,140,255,.68);background:var(--surface-solid);box-shadow:0 0 0 4px rgba(79,140,255,.11)}
select{appearance:auto}
input[type="checkbox"],input[type="radio"]{width:16px;height:16px;min-height:0;padding:0;accent-color:var(--primary)}
.checkbox{display:flex!important;align-items:center;gap:8px!important;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.field-help,.file-hint{display:block;color:var(--muted);font-size:8.8px;font-weight:500;line-height:1.5}
.filter-bar,.mini-filter{display:flex;align-items:end;gap:9px;flex-wrap:wrap;margin-bottom:14px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.formula-card{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:9px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.formula-card strong{font-size:10.5px}.formula-card span{color:var(--muted);font-size:9.5px}
.big-number{margin-top:14px;font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-.055em;color:var(--primary)}

/* Tables */
.table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.table-head h3{margin:0}
.table-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.search-input{width:min(210px,100%);min-height:32px;padding:7px 10px;font-size:9.5px}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;font-size:10px}
th,td{padding:10px 11px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;z-index:2;background:var(--surface-solid);color:var(--muted);font-size:8.6px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
td{color:var(--text-2);line-height:1.45}
td strong{color:var(--text);font-weight:780}
td small{color:var(--muted);font-size:8.8px}
tbody tr{transition:background .16s ease}
tbody tr:hover{background:rgba(79,140,255,.055)}
tbody tr:last-child td{border-bottom:0}

/* Badges & alerts */
.badge,.status-badge,.role-card-head>span{display:inline-flex;align-items:center;justify-content:center;min-height:23px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:8.5px;font-weight:850;text-transform:capitalize;white-space:nowrap}
.badge.success,.badge.active,.badge.approved,.status-badge.success,.status-badge.active{color:var(--success);background:var(--success-soft);border-color:rgba(37,200,137,.2)}
.badge.pending,.status-badge.pending{color:var(--warning);background:var(--warning-soft);border-color:rgba(246,184,76,.2)}
.badge.rejected,.badge.danger,.badge.inactive,.status-badge.rejected,.status-badge.danger{color:var(--danger);background:var(--danger-soft);border-color:rgba(255,102,122,.2)}
.badge.paid,.badge.completed{color:var(--cyan);background:rgba(56,199,232,.12);border-color:rgba(56,199,232,.2)}
.muted-badge{color:var(--muted)!important}
.alert{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface);font-size:10.5px;font-weight:700;box-shadow:var(--shadow-sm)}
.alert-success{color:var(--success);background:var(--success-soft);border-color:rgba(37,200,137,.23)}
.alert-danger{color:var(--danger);background:var(--danger-soft);border-color:rgba(255,102,122,.23)}
.alert-warning{color:var(--warning);background:var(--warning-soft);border-color:rgba(246,184,76,.23)}
.alert-info{color:var(--cyan);background:rgba(56,199,232,.11);border-color:rgba(56,199,232,.2)}

/* Dashboard details */
.rule-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.rule-list li{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text-2);font-size:10px;line-height:1.55}
.rule-list li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--primary-soft);color:var(--primary);font-size:8px;font-weight:900}
.timeline{display:grid;gap:0}
.timeline-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:0 0 14px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item:before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:1px;background:var(--line)}
.timeline-item:last-child:before{display:none}
.timeline-item>span{position:relative;z-index:1;width:13px;height:13px;margin-top:3px;border-radius:50%;border:3px solid var(--surface-solid);background:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.timeline-item strong{font-size:10px;text-transform:capitalize}.timeline-item p{margin:2px 0;color:var(--text-2);font-size:9.5px}.timeline-item small{color:var(--muted);font-size:8.5px}

/* Summary strips & profile */
.summary-strip,.info-grid,.payment-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.summary-strip>div,.info-grid>div,.payment-preview>div{padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.summary-strip span,.info-grid span,.payment-preview span{display:block;color:var(--muted);font-size:8.6px;font-weight:780;text-transform:uppercase;letter-spacing:.06em}
.summary-strip strong,.info-grid strong,.payment-preview strong{display:block;margin-top:4px;color:var(--text);font-size:12px;overflow-wrap:anywhere}
.profile-card{display:flex;align-items:center;gap:16px}
.profile-card .avatar.big,.avatar.account-logo.big{width:84px;height:84px;border-radius:24px;font-size:22px}
.account-logo-preview,.logo-preview-box{display:flex;align-items:center;gap:15px;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}

/* Payment page */
.payment-kpi-panel{padding:12px;margin-bottom:15px}
.payment-kpi-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.payment-kpi-row>div{padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.payment-kpi-row span{display:block;color:var(--muted);font-size:8.8px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.payment-kpi-row strong{display:block;margin-top:4px;font-size:14px;letter-spacing:-.02em}
.payment-hint{padding:11px 12px;border:1px solid rgba(79,140,255,.22);border-radius:12px;background:var(--primary-soft);color:var(--text-2);font-size:9.5px;line-height:1.65}
.payment-hint.is-empty{border-color:rgba(255,102,122,.22);background:var(--danger-soft);color:var(--danger)}
.active-loan-list{display:grid;gap:8px;max-height:620px;overflow:auto;padding-right:2px}
.loan-mini-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);transition:all .2s ease}
.loan-mini-card:hover{border-color:rgba(79,140,255,.3);background:var(--surface-hover)}
.loan-mini-card>span{display:grid;place-items:center;min-height:38px;padding:4px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:900}
.loan-mini-card strong{display:block;font-size:10px}.loan-mini-card small{display:block;margin-top:3px;color:var(--muted);font-size:8.6px;line-height:1.5}
.loan-card-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.loan-search-field{position:relative}.loan-search-input{padding-left:12px}

/* Excel, export, role settings */
.excel-grid,.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:15px}
.import-card,.export-tile,.role-card{padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.import-icon,.excel-badge{display:grid;place-items:center;width:42px;height:42px;margin-bottom:11px;border-radius:13px;background:var(--primary-soft);color:var(--primary);font-size:18px;font-weight:900}
.import-card h3,.export-tile h3{margin:0 0 6px;font-size:13px}.import-card p,.export-tile p{margin:0 0 12px;color:var(--muted);font-size:9.5px;line-height:1.55}

.export-tile{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:11px;transition:all .2s var(--ease)}
.export-tile:hover{transform:translateY(-3px);border-color:rgba(79,140,255,.3);box-shadow:var(--shadow-md)}
.export-tile>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--primary-soft);color:var(--primary)}
.export-tile>span .ui-icon{width:19px;height:19px}.export-tile strong{font-size:10.5px}.export-tile small{color:var(--muted);font-size:8.5px;margin-top:2px}
.import-icon .ui-icon,.excel-badge .ui-icon{width:20px;height:20px}
.rule-list li>span .ui-icon{width:15px;height:15px}

.role-access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.role-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.role-card-head h3{margin:0}.role-card-head p{margin:4px 0 0;color:var(--muted);font-size:9px}
.permission-list{display:grid;gap:6px}
.permission-item{display:grid;grid-template-columns:18px 28px minmax(0,1fr);align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.permission-item>span{display:grid;place-items:center;color:var(--primary)}
.permission-item>span .ui-icon{width:15px;height:15px}
.permission-item strong{display:block;font-size:9.5px}.permission-item small{display:block;color:var(--muted);font-size:8px;margin-top:1px}

/* Login */
.login-body{position:relative;display:grid;place-items:center;min-height:100vh;padding:28px;background:#07111f;overflow-x:hidden}
html[data-theme="light"] .login-body{background:#eef3f9}
.login-theme-toggle{position:fixed;z-index:10;right:20px;top:20px}
.login-shell{position:relative;z-index:2;width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.72fr);gap:26px;align-items:center}
.login-brand{padding:26px 32px 26px 16px}
.login-brand-head{display:flex;align-items:center;gap:13px;margin-bottom:38px}
.logo-badge.login-logo{width:66px;height:66px;border-radius:21px;font-size:20px}
.login-brand-head>div{display:grid;gap:5px}
.brand-edition{display:inline-flex;align-items:center;gap:6px;color:#cfc4ff;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.brand-edition .ui-icon{width:14px;height:14px}
.login-brand-head small{color:#8fa2ba;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
html[data-theme="light"] .login-brand-head small{color:#65758b}
.login-copy h1{margin:8px 0 14px;color:#fff;font-size:clamp(38px,5.5vw,68px);line-height:.98;font-weight:900;letter-spacing:-.06em;max-width:760px}
html[data-theme="light"] .login-copy h1{color:#142846}
.login-copy>p:last-child{max-width:700px;margin:0;color:#aebed3;font-size:13px;line-height:1.78}
html[data-theme="light"] .login-copy>p:last-child{color:#5f7189}
.login-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:28px}
.login-feature-grid>div{padding:12px;border:1px solid rgba(148,163,184,.16);border-radius:15px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}
html[data-theme="light"] .login-feature-grid>div{background:rgba(255,255,255,.58);border-color:rgba(15,23,42,.08)}
.login-feature-grid>div>span{display:grid;place-items:center;width:30px;height:30px;margin-bottom:9px;border-radius:10px;background:rgba(79,140,255,.13);color:#75a3ff}
.login-feature-grid .ui-icon{width:16px;height:16px}
.login-feature-grid strong{display:block;color:#fff;font-size:9.5px}
html[data-theme="light"] .login-feature-grid strong{color:#1c3454}
.login-feature-grid small{display:block;margin-top:3px;color:#7f91a8;font-size:8.2px;line-height:1.35}
.login-trust{display:flex;align-items:center;gap:10px;margin-top:19px}
.login-trust>span{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 6px rgba(37,200,137,.12)}
.login-trust p{margin:0}.login-trust strong{display:block;color:#dce8f7;font-size:9.5px}.login-trust small{display:block;color:#778aa3;font-size:8.5px;margin-top:1px}
html[data-theme="light"] .login-trust strong{color:#28415f}
.login-card{position:relative;padding:28px;border-radius:28px;background:rgba(13,27,46,.86);box-shadow:var(--shadow-lg)}
html[data-theme="light"] .login-card{background:rgba(255,255,255,.86)}
.login-card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(121,150,255,.8),transparent)}
.login-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.login-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 10px 24px rgba(79,140,255,.24)}
.login-card-icon .ui-icon{width:20px;height:20px}
.login-card h2{margin:0;font-size:24px;font-weight:880;letter-spacing:-.04em}
.login-instruction{margin:0 0 20px!important;font-size:10.5px}
.login-form{gap:14px}
.input-shell{position:relative;display:flex;align-items:center}
.input-shell>svg{position:absolute;z-index:2;left:12px;width:16px;height:16px;color:var(--muted)}
.input-shell input{padding-left:39px;padding-right:56px;min-height:45px}
.password-toggle{position:absolute;right:8px;padding:5px 7px;border:0;border-radius:8px;background:var(--surface-3);color:var(--primary);font-size:8.5px;font-weight:850;cursor:pointer}
.btn-login{min-height:46px;margin-top:3px;justify-content:space-between;padding-left:17px;padding-right:14px;border-radius:13px;font-size:10.5px}
.login-security-note{display:flex;align-items:center;gap:9px;margin-top:17px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--success)}
.login-security-note .ui-icon{width:17px;height:17px}.login-security-note strong{display:block;color:var(--text-2);font-size:9.5px}.login-security-note small{display:block;margin-top:2px;color:var(--muted);font-size:8.5px}
.login-support{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:17px;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font-size:8.5px}.login-support strong{color:var(--text-2)}

/* Animation */
.animate-up,.panel,.stat-card,.hero,.excel-hero,.payment-hero{animation:fadeUp .48s var(--ease) both}
.animate-pop{animation:fadeUp .58s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Compact data page */
body.page-members .panel,body.page-member_add .panel{padding:16px}
body.page-members table{font-size:9.5px;min-width:860px}
body.page-members th,body.page-members td{padding:8px 9px}
body.page-members .btn-small{min-height:28px;padding:6px 8px}

/* Responsive */
@media(max-width:1280px){
  :root{--sidebar:260px}
  .login-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1080px){
  .datetime-chip{display:none}
  .grid-2{grid-template-columns:1fr}
  .role-access-grid,.excel-grid,.export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{align-items:flex-start}
  .hero-brand-stack{max-width:240px}
  .logo-badge.hero-logo{width:88px;height:88px;border-radius:24px}
  .hero-badge.mini{width:94px;height:88px;border-radius:24px}
  .hero-badge.mini span{font-size:21px}
  .summary-strip,.info-grid,.payment-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  :root{--topbar-height:82px}
  .sidebar{inset:10px auto 10px 10px;transform:translateX(calc(-100% - 24px));width:min(286px,calc(100vw - 44px));border-radius:24px}
  .sidebar.show{transform:translateX(0)}
  .sidebar-overlay{display:block;position:fixed;z-index:35;inset:0;background:rgba(2,7,15,.68);opacity:0;visibility:hidden;transition:.25s ease;backdrop-filter:blur(3px)}
  .sidebar-overlay.show{opacity:1;visibility:visible}
  .main{margin-left:0;padding:10px 10px 88px}
  .topbar{top:10px;min-height:82px;padding:12px 13px;border-radius:19px}
  .hamburger{display:grid}
  .page-description{max-width:420px}
  .top-user>div{display:none}
  .top-user{padding:5px}
  .login-shell{grid-template-columns:1fr;max-width:680px}
  .login-brand{padding:18px 10px 0}
  .login-brand-head{margin-bottom:22px}
  .login-copy h1{font-size:clamp(36px,8vw,58px)}
  .login-card{padding:24px}
  .mobile-nav{position:fixed;z-index:32;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));display:flex;align-items:stretch;justify-content:space-around;padding:6px;border:1px solid var(--line);border-radius:18px;background:rgba(12,25,43,.92);box-shadow:var(--shadow-lg);backdrop-filter:blur(20px)}
  html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.92)}
  .mobile-nav a{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 4px;border-radius:12px;color:var(--muted);font-size:7.5px;font-weight:750;text-align:center;transition:.18s ease}
  .mobile-nav a .ui-icon{width:17px;height:17px}
  .mobile-nav a span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-nav a.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 8px 18px rgba(79,140,255,.2)}
}

@media(max-width:720px){
  body{font-size:13px}
  .page-content{padding-top:11px}
  .topbar{gap:10px}
  .topbar h1{font-size:19px}
  .page-description{display:none}
  .eyebrow{font-size:8.5px}
  .theme-toggle{width:36px;height:36px}
  .top-user{display:none}
  .hero,.excel-hero,.payment-hero{display:grid;padding:20px;border-radius:22px;gap:19px}
  .hero h2,.excel-hero h2,.payment-hero h2{font-size:30px}
  .hero p,.excel-hero p,.payment-hero p{font-size:10.5px}
  .hero-brand-stack{max-width:none;justify-content:flex-start}
  .hero-status{width:auto;flex:1;min-width:160px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
  .stat-card{min-height:108px;padding:13px;gap:10px;border-radius:17px}
  .stat-card:last-child{grid-column:span 2}
  .stat-card strong{font-size:15px}
  .stat-card small{font-size:7.8px}
  .financial-overview{margin-top:10px}
  .metric-bars{grid-template-columns:1fr}
  .grid-2{gap:10px;margin-top:10px}
  .panel{padding:15px;border-radius:18px}
  .panel h3{font-size:14px}
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .table-head{align-items:flex-start;flex-direction:column}
  .table-tools{width:100%;justify-content:flex-start}
  .search-input{width:100%}
  .table-wrap{border-radius:12px}
  table{min-width:680px}
  th,td{padding:8px 9px}
  .summary-strip,.info-grid,.payment-preview{grid-template-columns:1fr 1fr}
  .payment-kpi-row{grid-template-columns:1fr}
  .loan-mini-card{grid-template-columns:38px minmax(0,1fr)}
  .loan-card-actions{grid-column:1/-1;justify-content:flex-start;padding-left:48px}
  .role-access-grid,.excel-grid,.export-grid{grid-template-columns:1fr}
  .section-heading{display:grid}.overview-total{text-align:left}
  .profile-card,.account-logo-preview,.logo-preview-box{align-items:flex-start;display:grid}
  .login-body{place-items:start;padding:16px 12px 26px}
  .login-theme-toggle{right:12px;top:12px}
  .login-brand{padding:48px 6px 0}
  .login-brand-head{padding-right:44px}
  .login-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .login-copy h1{font-size:38px}
  .login-copy>p:last-child{font-size:11px}
  .login-card{padding:20px;border-radius:22px}
}

@media(max-width:460px){
  .main{padding:8px 8px 84px}
  .topbar{top:8px;min-height:72px;border-radius:17px;padding:10px}
  .icon-button{width:36px;height:36px;border-radius:11px}
  .topbar h1{font-size:17px}
  .hero{padding:17px}
  .hero h2{font-size:26px}
  .hero-actions{display:grid;grid-template-columns:1fr;width:100%}.hero-actions .btn{width:100%}
  .hero-brand-stack{display:grid;grid-template-columns:auto 1fr}
  .logo-badge.hero-logo{width:76px;height:76px;border-radius:21px;grid-row:span 2}
  .hero-badge.mini{width:100%;height:52px;border-radius:16px;flex-direction:row;gap:7px}
  .hero-badge.mini span{font-size:18px}.hero-badge.mini small{margin:0}
  .hero-status{width:100%;min-width:0;padding:8px 10px}
  .stats-grid{grid-template-columns:1fr}
  .stat-card:last-child{grid-column:auto}
  .stat-card{min-height:94px}
  .summary-strip,.info-grid,.payment-preview{grid-template-columns:1fr}
  .flex-actions{display:grid;width:100%}.flex-actions .btn{width:100%}
  .btn{min-height:36px;padding:8px 11px}
  .mobile-nav{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:16px}
  .mobile-nav a{font-size:7px;padding:6px 3px}
  .login-feature-grid{grid-template-columns:1fr 1fr}
  .login-feature-grid>div{padding:10px}
  .login-brand-head small{font-size:8.5px}
  .login-card h2{font-size:21px}
}

/* Mobile cards for tables where practical */
@media(max-width:620px){
  .table-wrap.mobile-cards{overflow:visible;border:0;background:transparent}
  .table-wrap.mobile-cards table,.table-wrap.mobile-cards thead,.table-wrap.mobile-cards tbody,.table-wrap.mobile-cards tr,.table-wrap.mobile-cards td{display:block;width:100%;min-width:0}
  .table-wrap.mobile-cards thead{display:none}
  .table-wrap.mobile-cards tbody{display:grid;gap:9px}
  .table-wrap.mobile-cards tr{padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
  .table-wrap.mobile-cards td{display:grid;grid-template-columns:minmax(100px,.42fr) 1fr;gap:10px;padding:6px 0;border:0;text-align:right}
  .table-wrap.mobile-cards td:before{content:attr(data-label);color:var(--muted);font-size:8px;font-weight:800;text-align:left;text-transform:uppercase;letter-spacing:.05em}
}

/* Print */
@media print{
  :root{--text:#111827;--text-2:#374151;--muted:#6b7280;--line:#d1d5db;--surface:#fff;--surface-2:#fff;--surface-solid:#fff}
  body{background:#fff;color:#111827}
  .sidebar,.topbar,.mobile-nav,.app-bg,.btn,.table-tools,.hero-actions{display:none!important}
  .main{margin:0;padding:0}
  .page-content{padding:0}
  .panel,.hero,.stat-card,.glass-card{box-shadow:none!important;backdrop-filter:none!important;background:#fff!important;color:#111827!important;border-color:#d1d5db!important;break-inside:avoid}
  table{min-width:0;font-size:9px}th{position:static;background:#f3f4f6!important;color:#111827!important}
}

/* Small semantic refinements */
.badge.info{color:var(--cyan);background:rgba(56,199,232,.12);border-color:rgba(56,199,232,.22)}
.info-grid.single{grid-template-columns:1fr}
.form-panel{align-self:start}
.payment-kpi-top{margin-top:0}
.loan-select{font-weight:700}

/* ============================================================
   SIMPI ULTRA LUXURY EXPERIENCE — 13 Juli 2026
   Premium motion, smart navigation, live sync, refined depth.
   ============================================================ */
:root{
  --luxury-gold:#f6cf75;
  --luxury-blue:#63a5ff;
  --luxury-violet:#8c6cff;
  --luxury-cyan:#54d8ed;
  --sidebar-mini:84px;
  --focus-ring:0 0 0 4px rgba(79,140,255,.13),0 12px 30px rgba(15,23,42,.16);
}

/* Layered premium canvas */
body:before{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;opacity:.23;background-image:linear-gradient(rgba(148,163,184,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%)}
html[data-theme="light"] body:before{opacity:.5;background-image:linear-gradient(rgba(20,44,78,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,44,78,.035) 1px,transparent 1px)}
.app-bg:after,.login-ambient:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(99,165,255,.09),transparent 46%),linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.012) 49%,transparent 53% 100%);background-size:auto,340px 340px;animation:luxuryGridDrift 28s linear infinite}
.app-bg i,.login-ambient i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.85);opacity:.45;animation:starPulse 4.8s ease-in-out infinite}
.app-bg i:nth-of-type(1),.login-ambient i:nth-of-type(1){left:26%;top:19%}
.app-bg i:nth-of-type(2),.login-ambient i:nth-of-type(2){right:17%;bottom:27%;animation-delay:-2.1s}
@keyframes luxuryGridDrift{to{background-position:0 0,340px -340px}}
@keyframes starPulse{0%,100%{transform:scale(.7);opacity:.18}50%{transform:scale(2.3);opacity:.7}}

/* Initial loader and route transition */
.app-loader{position:fixed;z-index:9999;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;background:radial-gradient(circle at 50% 42%,#11233d 0,#07111f 48%,#040a12 100%);color:#fff;transition:opacity .55s var(--ease),visibility .55s var(--ease)}
html[data-theme="light"] .app-loader{background:radial-gradient(circle at 50% 42%,#fff 0,#edf4fd 56%,#e5edf7 100%);color:#102039}
html:not(.js) .app-loader{display:none}
body.is-loaded .app-loader{opacity:0;visibility:hidden}
.loader-emblem{position:relative;display:grid;place-items:center;width:108px;height:108px;margin-bottom:14px}
.loader-emblem .logo-badge{position:relative;z-index:2;width:64px;height:64px;border-radius:21px;box-shadow:0 0 0 8px rgba(79,140,255,.08),0 22px 48px rgba(19,62,132,.38)}
.loader-ring{position:absolute;inset:5px;border:1px solid transparent;border-top-color:rgba(99,165,255,.95);border-right-color:rgba(140,108,255,.52);border-radius:50%;animation:loaderSpin 1.5s linear infinite}
.loader-ring.ring-two{inset:18px;animation-direction:reverse;animation-duration:1.05s;border-top-color:rgba(84,216,237,.88);border-right-color:transparent;border-bottom-color:rgba(246,207,117,.5)}
.app-loader>strong{font-size:14px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.app-loader>small{color:var(--muted);font-size:10px;letter-spacing:.03em}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.page-progress{position:fixed;z-index:9998;left:0;top:0;width:var(--page-progress,0%);height:3px;background:linear-gradient(90deg,var(--luxury-blue),var(--luxury-violet),var(--luxury-cyan),var(--luxury-gold));background-size:220% 100%;box-shadow:0 0 18px rgba(99,165,255,.8);transition:width .12s linear;animation:progressGlow 3s linear infinite}
@keyframes progressGlow{to{background-position:220% 0}}

/* Cursor ambient spotlight — desktop only */
.cursor-aura{position:fixed;z-index:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(79,140,255,.075),rgba(114,89,255,.035) 34%,transparent 68%);opacity:0;transform:translate3d(var(--cursor-x,-1000px),var(--cursor-y,-1000px),0);transition:opacity .35s ease;will-change:transform}
body.cursor-active .cursor-aura{opacity:1}

/* Ultra glass surfaces */
.glass-card,.panel,.stat-card,.hero,.excel-hero,.payment-hero,.login-card{isolation:isolate}
.glass-card:where(.topbar,.panel,.login-card),.stat-card{box-shadow:0 1px 0 rgba(255,255,255,.035) inset,var(--shadow-sm)}
.topbar{background:linear-gradient(120deg,rgba(15,28,46,.88),rgba(13,25,43,.78));border-color:rgba(142,169,207,.18);box-shadow:0 20px 55px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.045)}
html[data-theme="light"] .topbar{background:linear-gradient(120deg,rgba(255,255,255,.94),rgba(248,251,255,.86));border-color:rgba(40,74,120,.1)}
.topbar:after{content:"";position:absolute;z-index:-1;inset:auto 12% -1px 12%;height:1px;background:linear-gradient(90deg,transparent,rgba(99,165,255,.62),rgba(140,108,255,.55),transparent);opacity:.65}
.panel,.stat-card,.export-tile,.import-card,.role-card,.formula-card,.rule-list li,.timeline-item>div{transform-style:preserve-3d}
.card-spotlight{position:absolute;z-index:-1;left:var(--spot-x,50%);top:var(--spot-y,50%);width:320px;height:320px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(99,165,255,.115),rgba(140,108,255,.045) 36%,transparent 69%);transform:translate(-50%,-50%);opacity:0;transition:opacity .28s ease}
.premium-surface:hover>.card-spotlight{opacity:1}
.panel,.stat-card,.export-tile,.import-card,.role-card{transition:transform .32s var(--ease),border-color .25s ease,box-shadow .32s ease,background .25s ease}
.panel:hover,.export-tile:hover,.import-card:hover,.role-card:hover{border-color:rgba(99,165,255,.26);box-shadow:0 22px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.045)}
html[data-theme="light"] .panel:hover,html[data-theme="light"] .export-tile:hover,html[data-theme="light"] .import-card:hover,html[data-theme="light"] .role-card:hover{box-shadow:0 22px 55px rgba(46,64,92,.14),inset 0 1px 0 #fff}

/* Sidebar: luxury active rail and desktop compact mode */
.sidebar{border-color:rgba(116,151,203,.19);box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)}
.sidebar:after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(99,165,255,.65),rgba(140,108,255,.55),transparent)}
.nav-link:before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 6px 6px 0;background:linear-gradient(var(--luxury-cyan),var(--luxury-violet));box-shadow:0 0 18px rgba(84,216,237,.72);transform:translateY(-50%);transition:height .24s var(--ease)}
.nav-link:hover:before{height:18px}
.nav-link.active:before{height:26px;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.76)}
.nav-link.active{overflow:hidden}
.nav-link.active:after{content:"";position:absolute;inset:-80% auto -80% -35%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);animation:activeNavShine 5s ease-in-out infinite}
@keyframes activeNavShine{0%,72%{left:-42%}100%{left:130%}}
.desktop-sidebar-toggle{display:grid;flex:0 0 auto}
body.sidebar-collapsed{--sidebar:var(--sidebar-mini)}
body.sidebar-collapsed .sidebar{width:var(--sidebar-mini)}
body.sidebar-collapsed .brand{justify-content:center;padding-inline:10px}
body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .premium-mark,body.sidebar-collapsed .nav-group-title,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-arrow,body.sidebar-collapsed .sidebar-footer .user-mini>div,body.sidebar-collapsed .user-mini-arrow,body.sidebar-collapsed .sidebar-logout span{display:none}
body.sidebar-collapsed .nav-menu{padding-inline:10px}
body.sidebar-collapsed .nav-link{justify-content:center;padding-inline:8px}
body.sidebar-collapsed .nav-icon{width:38px;height:38px;border-radius:12px}
body.sidebar-collapsed .sidebar-footer{display:grid;justify-items:center}
body.sidebar-collapsed .user-mini{justify-content:center;padding:7px}
body.sidebar-collapsed .sidebar-logout{justify-content:center;width:44px;padding:9px!important}
body.sidebar-collapsed .sidebar-logout .ui-icon{width:18px;height:18px}
body.sidebar-collapsed .main{margin-left:calc(var(--sidebar-mini) + 28px)}

/* Intelligent header controls */
.command-trigger{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 8px 6px 7px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .22s var(--ease)}
.command-trigger:hover{color:var(--text);border-color:rgba(99,165,255,.34);background:var(--surface-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.command-trigger-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--primary-soft);color:var(--primary)}
.command-trigger-icon .ui-icon{width:14px;height:14px}
.command-trigger>span:nth-child(2){font-size:9.5px;font-weight:800;white-space:nowrap}
kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface-3);color:var(--muted);font:700 8px/1 var(--font);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.system-health{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.health-pulse{position:relative;width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(37,200,137,.11)}
.health-pulse:after{content:"";position:absolute;inset:-5px;border:1px solid rgba(37,200,137,.42);border-radius:50%;animation:healthPulse 2.2s ease-out infinite}
.system-health strong{display:block;font-size:9px;color:var(--text-2)}
.system-health small{display:block;margin-top:1px;color:var(--muted);font-size:7.8px}
.system-health.is-offline{border-color:rgba(255,102,122,.25);background:var(--danger-soft)}
.system-health.is-offline .health-pulse{background:var(--danger);box-shadow:0 0 0 5px rgba(255,102,122,.11)}
.system-health.is-offline .health-pulse:after{border-color:rgba(255,102,122,.42)}
@keyframes healthPulse{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.7);opacity:0}}

/* Command palette */
.command-palette{position:fixed;z-index:500;inset:0;display:grid;place-items:start center;padding:clamp(80px,12vh,130px) 16px 30px;background:rgba(2,7,15,.72);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.command-palette[hidden]{display:none}
.command-palette.is-open{opacity:1;visibility:visible}
.command-dialog{width:min(660px,100%);max-height:min(680px,calc(100vh - 120px));display:flex;flex-direction:column;padding:10px;border-radius:25px;background:rgba(12,25,43,.96);box-shadow:0 45px 120px rgba(0,0,0,.58);transform:translateY(-16px) scale(.975);transition:transform .28s var(--ease)}
.command-palette.is-open .command-dialog{transform:none}
html[data-theme="light"] .command-dialog{background:rgba(255,255,255,.97)}
.command-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px 9px 13px;border:1px solid rgba(99,165,255,.24);border-radius:16px;background:var(--surface-2);box-shadow:0 0 0 4px rgba(79,140,255,.055)}
.command-search>span{color:var(--primary)}
.command-search .ui-icon{width:19px;height:19px}
.command-search input{min-height:34px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px;font-weight:650}
.command-header{display:flex;align-items:end;justify-content:space-between;gap:15px;padding:18px 12px 10px}
.command-header h2{margin:1px 0 0;font-size:18px;letter-spacing:-.035em}
.command-count{color:var(--muted);font-size:9px}
.command-results{display:grid;gap:5px;min-height:120px;overflow:auto;padding:2px 4px 6px}
.command-item{display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:14px;color:var(--text-2);transition:all .17s ease}
.command-item:hover,.command-item.is-selected{color:var(--text);border-color:rgba(99,165,255,.2);background:linear-gradient(110deg,var(--primary-soft),rgba(140,108,255,.07));transform:translateX(2px)}
.command-item-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:var(--surface-3);color:var(--primary)}
.command-item-icon .ui-icon{width:18px;height:18px}
.command-item strong{display:block;font-size:10.5px}
.command-item small{display:block;margin-top:2px;color:var(--muted);font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-item>.ui-icon{width:14px;height:14px;color:var(--muted)}
.command-empty{display:grid;place-items:center;text-align:center;padding:34px 15px;color:var(--muted)}
.command-empty .ui-icon{width:30px;height:30px;margin-bottom:10px;color:var(--primary)}
.command-empty strong{font-size:11px;color:var(--text-2)}
.command-empty small{margin-top:3px;font-size:9px}
.command-footer{display:flex;align-items:center;gap:16px;padding:10px 12px 3px;border-top:1px solid var(--line);color:var(--muted);font-size:8px}
.command-footer span{display:flex;align-items:center;gap:4px}

/* Buttons with premium sheen and tactile ripple */
.btn,.icon-button,.command-trigger{position:relative;overflow:hidden}
.btn:before,.icon-button:before,.command-trigger:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.13) 44%,transparent 70%);transform:translateX(-130%);transition:transform .6s var(--ease);pointer-events:none}
.btn:hover:before,.icon-button:hover:before,.command-trigger:hover:before{transform:translateX(130%)}
.btn-primary{background:linear-gradient(120deg,#4384ff,#6f5cff 58%,#8a62ff);background-size:180% 100%;box-shadow:0 11px 28px rgba(79,106,255,.27),inset 0 1px 0 rgba(255,255,255,.18);animation:primaryGradient 8s ease infinite}
.btn-primary:hover{box-shadow:0 15px 36px rgba(79,106,255,.34),inset 0 1px 0 rgba(255,255,255,.2)}
@keyframes primaryGradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.ripple-ink{position:absolute;z-index:5;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.32);transform:translate(-50%,-50%) scale(0);animation:rippleInk .62s ease-out;pointer-events:none}
@keyframes rippleInk{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
.btn.is-submitting{cursor:progress;pointer-events:none;filter:saturate(.78)}
.btn.is-submitting:after{content:"";width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loaderSpin .7s linear infinite}

/* Professional forms and automatic draft state */
input,select,textarea{box-shadow:0 1px 0 rgba(255,255,255,.025) inset}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:rgba(79,140,255,.68);box-shadow:var(--focus-ring);background:var(--surface-solid)}
label:focus-within{color:var(--primary)}
input[type="file"]{padding:6px;cursor:pointer}
input[type="file"]::file-selector-button{min-height:28px;margin-right:9px;padding:6px 10px;border:0;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:9px;font-weight:800;cursor:pointer;transition:filter .2s ease}
input[type="file"]::file-selector-button:hover{filter:brightness(1.1)}
label.is-dragover{border-radius:13px;outline:2px dashed rgba(99,165,255,.62);outline-offset:5px;background:var(--primary-soft)}
.file-hint{display:block;margin-top:5px;color:var(--primary)!important;font-weight:700}
.autosave-indicator{position:fixed;z-index:80;right:18px;bottom:18px;display:flex;align-items:center;gap:7px;min-height:33px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(12,25,43,.88);color:var(--muted);box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s ease}
html[data-theme="light"] .autosave-indicator{background:rgba(255,255,255,.9)}
.autosave-indicator.is-visible{opacity:1;visibility:visible;transform:none}
.autosave-indicator span{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(37,200,137,.11)}
.autosave-indicator.is-saving span{background:var(--warning);animation:healthPulse 1.2s infinite}
.autosave-indicator small{font-size:8.5px;font-weight:700}

/* Tables: crisp enterprise density */
.table-wrap{box-shadow:0 1px 0 rgba(255,255,255,.025) inset}
thead th{background:linear-gradient(180deg,var(--surface-3),var(--surface-2));backdrop-filter:blur(12px)}
tbody tr:nth-child(even){background:rgba(148,163,184,.018)}
tbody tr:hover{background:linear-gradient(90deg,var(--primary-soft),transparent 78%)}
tbody tr:hover td:first-child{box-shadow:3px 0 0 var(--primary) inset}
th{letter-spacing:.075em}
.search-input{padding-left:31px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa2ba' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center}

/* Animated financial data */
.stat-card .stat-icon{transition:transform .32s var(--ease),box-shadow .3s ease}
.stat-card:hover .stat-icon{transform:translateZ(18px) rotate(-4deg) scale(1.06);box-shadow:0 12px 25px var(--card-soft)}
.stat-card strong,.big-number,.overview-total strong,.payment-kpi strong{font-variant-numeric:tabular-nums}
.metric-track i{width:0!important;transition:width 1.25s cubic-bezier(.22,.8,.24,1);position:relative;overflow:hidden}
.metric-track i.is-animated{width:var(--metric-width)!important}
.metric-track i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);transform:translateX(-100%);animation:metricShimmer 2.7s ease-in-out infinite}
@keyframes metricShimmer{0%,55%{transform:translateX(-100%)}100%{transform:translateX(160%)}}
.hero{border-color:rgba(113,150,211,.2);box-shadow:0 30px 80px rgba(5,14,29,.25),inset 0 1px 0 rgba(255,255,255,.055)}
.hero h2 em{background-size:220% auto;animation:headlineGradient 7s ease infinite}
@keyframes headlineGradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.hero-status>span{animation:statusBreath 2.4s ease-in-out infinite}
@keyframes statusBreath{0%,100%{box-shadow:0 0 0 5px rgba(37,200,137,.11)}50%{box-shadow:0 0 0 9px rgba(37,200,137,.035),0 0 16px rgba(37,200,137,.35)}}

/* Reveal choreography */
.reveal-ready{opacity:0;transform:translateY(18px) scale(.992);transition:opacity .58s var(--ease),transform .58s var(--ease)}
.reveal-ready.is-revealed{opacity:1;transform:none}
.timeline-item.is-revealed>span{animation:timelinePing .7s var(--ease)}
@keyframes timelinePing{0%{transform:scale(.55)}65%{transform:scale(1.35)}100%{transform:scale(1)}}

/* Toast notifications */
.toast-stack{position:fixed;z-index:700;right:18px;top:18px;display:grid;gap:9px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.toast-stack .alert{position:relative;margin:0;padding:13px 42px 13px 42px;min-height:54px;border-radius:16px;background:rgba(12,25,43,.95);color:var(--text-2);box-shadow:0 22px 55px rgba(0,0,0,.35);backdrop-filter:blur(18px);pointer-events:auto;animation:toastEnter .45s var(--ease) both}
html[data-theme="light"] .toast-stack .alert{background:rgba(255,255,255,.96);box-shadow:0 20px 45px rgba(50,70,100,.18)}
.toast-stack .alert:before{content:"";position:absolute;left:15px;top:50%;width:12px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 14%,transparent);transform:translateY(-50%)}
.toast-stack .alert:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform-origin:left;animation:toastTimer 5.4s linear forwards;opacity:.75}
.toast-close{position:absolute;right:8px;top:50%;display:grid;place-items:center;width:27px;height:27px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transform:translateY(-50%)}
.toast-close:hover{background:var(--surface-3);color:var(--text)}
.toast-close .ui-icon{width:13px;height:13px}
.toast-stack .alert.is-leaving{animation:toastLeave .26s ease forwards}
@keyframes toastEnter{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastLeave{to{opacity:0;transform:translateX(28px) scale(.97)}}
@keyframes toastTimer{to{transform:scaleX(0)}}

/* Back to top */
.back-to-top{position:fixed;z-index:75;right:19px;bottom:62px;display:grid;place-items:center;width:39px;height:39px;padding:0;border:1px solid rgba(99,165,255,.24);border-radius:13px;background:linear-gradient(145deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 13px 30px rgba(79,106,255,.28);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);transition:.25s var(--ease)}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{transform:translateY(-2px);box-shadow:0 17px 36px rgba(79,106,255,.36)}
.back-to-top .ui-icon{width:17px;height:17px}

/* Login — executive-grade first impression */
.login-body{background:radial-gradient(circle at 15% 20%,rgba(50,95,185,.22),transparent 30%),radial-gradient(circle at 82% 70%,rgba(112,73,216,.17),transparent 31%),#06101d}
html[data-theme="light"] .login-body{background:radial-gradient(circle at 15% 20%,rgba(50,111,241,.12),transparent 30%),radial-gradient(circle at 82% 70%,rgba(101,71,232,.08),transparent 31%),#eef3f9}
.login-shell:before{content:"";position:absolute;z-index:-1;left:42%;top:50%;width:560px;height:560px;border-radius:50%;border:1px solid rgba(99,165,255,.08);transform:translate(-50%,-50%);box-shadow:0 0 0 70px rgba(99,165,255,.025),0 0 0 150px rgba(140,108,255,.015)}
.login-card{border-color:rgba(116,151,203,.2);box-shadow:0 45px 120px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)}
.login-card:after{content:"";position:absolute;z-index:-1;right:-70px;top:-80px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(114,89,255,.18),transparent 69%)}
.login-feature-grid>div{position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .25s ease,background .25s ease}
.login-feature-grid>div:hover{transform:translateY(-5px);border-color:rgba(99,165,255,.28);background:rgba(255,255,255,.07)}
.login-feature-grid>div:after{content:"";position:absolute;inset:auto -30px -45px auto;width:90px;height:90px;border-radius:50%;background:rgba(79,140,255,.08)}
.login-brand-head .logo-badge{animation:logoFloat 5.6s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(1.5deg)}}
.login-copy h1{background:linear-gradient(110deg,#fff 5%,#cfddf2 37%,#8dbaff 60%,#c5b3ff 82%,#fff);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:headlineGradient 9s ease infinite}
html[data-theme="light"] .login-copy h1{background:linear-gradient(110deg,#102039,#326ff1,#6547e8,#102039);background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.login-form .input-shell:focus-within{border-color:rgba(99,165,255,.68);box-shadow:var(--focus-ring);transform:translateY(-1px)}
.input-shell{transition:border-color .2s ease,box-shadow .25s ease,transform .2s ease}
.capslock-warning{display:none;margin-top:5px;color:var(--warning);font-size:8.5px;font-weight:700}
.capslock-warning.is-visible{display:block}

/* Live sync feedback */
[data-live-sync].is-syncing>span{background:var(--warning);animation:loaderSpin .9s linear infinite;border:2px solid rgba(255,255,255,.55);border-right-color:transparent}
[data-live-sync].is-syncing>span:after{display:none}
[data-live-sync].is-error>span{background:var(--danger);box-shadow:0 0 0 5px rgba(255,102,122,.12)}
.live-value-updated{animation:liveValueFlash .8s ease}
@keyframes liveValueFlash{0%{color:var(--luxury-cyan);text-shadow:0 0 18px rgba(84,216,237,.75)}100%{color:var(--text);text-shadow:none}}

/* Responsive refinement */
@media(max-width:1280px){
  .system-health{display:none}
  .command-trigger>span:nth-child(2),.command-trigger kbd{display:none}
  .command-trigger{width:40px;padding:5px;justify-content:center}
  .command-trigger-icon{background:transparent;width:auto;height:auto}
  .command-trigger-icon .ui-icon{width:18px;height:18px}
}
@media(max-width:1050px){
  .desktop-sidebar-toggle{display:none}
  body.sidebar-collapsed{--sidebar:280px}
  body.sidebar-collapsed .sidebar{width:var(--sidebar)}
  body.sidebar-collapsed .main{margin-left:calc(var(--sidebar) + 28px)}
  body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .premium-mark,body.sidebar-collapsed .nav-group-title,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-arrow,body.sidebar-collapsed .sidebar-footer .user-mini>div,body.sidebar-collapsed .user-mini-arrow,body.sidebar-collapsed .sidebar-logout span{display:initial}
  body.sidebar-collapsed .nav-link{justify-content:flex-start;padding-inline:10px}
  body.sidebar-collapsed .nav-icon{width:28px;height:28px;border-radius:9px}
}
@media(max-width:900px){
  .desktop-sidebar-toggle{display:none}
  body.sidebar-collapsed .sidebar{width:min(286px,calc(100vw - 44px))}
  body.sidebar-collapsed .main{margin-left:0}
  .command-trigger{width:36px;height:36px;min-height:36px;border-radius:11px}
  .datetime-chip{display:none}
  .toast-stack{top:12px;right:12px;width:calc(100vw - 24px)}
  .autosave-indicator{right:12px;bottom:86px}
  .back-to-top{right:12px;bottom:128px}
}
@media(max-width:720px){
  body:before{background-size:38px 38px}
  .cursor-aura{display:none}
  .command-palette{padding:72px 9px 20px}
  .command-dialog{max-height:calc(100vh - 92px);border-radius:20px}
  .command-footer{display:none}
  .command-item{grid-template-columns:36px minmax(0,1fr) auto;padding:9px}
  .command-item-icon{width:36px;height:36px}
  .page-progress{height:2px}
  .app-loader{gap:6px}
  .loader-emblem{width:92px;height:92px}
  .login-shell:before{display:none}
}
@media(max-width:460px){
  .command-trigger{display:none}
  .top-actions{gap:6px}
  .toast-stack .alert{padding:12px 38px 12px 38px}
  .autosave-indicator{max-width:calc(100vw - 24px)}
  .login-copy h1{font-size:34px}
}

@media(pointer:coarse){.cursor-aura{display:none}.card-spotlight{display:none}}
@media(prefers-reduced-motion:reduce){
  .app-bg:after,.login-ambient:after,.app-bg i,.login-ambient i,.loader-ring,.health-pulse:after,.nav-link.active:after,.btn-primary,.metric-track i:after,.hero h2 em,.login-copy h1,.login-brand-head .logo-badge{animation:none!important}
  .reveal-ready{opacity:1!important;transform:none!important}
  .app-loader{transition:none}
}

/* Final interaction states */
body.route-leaving .app-loader{opacity:1;visibility:visible}
body.route-leaving .app-loader>small{font-size:0}
body.route-leaving .app-loader>small:after{content:"Memproses dan membuka halaman...";font-size:10px}
.image-file-preview{display:flex;align-items:center;gap:10px;margin-top:9px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text-2)}
.image-file-preview img{width:44px;height:44px;flex:0 0 auto;border-radius:11px;object-fit:cover;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)}
.image-file-preview>span{min-width:0}
.image-file-preview strong{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px}
.image-file-preview small{display:block;margin-top:2px;color:var(--muted);font-size:8.3px}
@media(max-width:900px){body.route-leaving .app-loader>small:after{font-size:9px}}
@media print{body:before{display:none!important}.page-progress,.app-loader,.cursor-aura,.toast-stack,.back-to-top,.autosave-indicator,.command-palette{display:none!important}}