:root{
  --bg:#f4f8ff;--bg2:#eaf2ff;--panel:#ffffff;--panel2:#f7faff;--text:#102033;--muted:#66758a;--line:#dbe6f5;
  --primary:#236dff;--cyan:#00b8ff;--purple:#7c3cff;--green:#16a34a;--red:#ef4444;--orange:#f59e0b;
  --shadow:0 16px 45px rgba(35,78,150,.13);--radius:18px;--sidebar:258px;--top:78px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 8% -10%,rgba(35,109,255,.14),transparent 32%),radial-gradient(circle at 95% 0,rgba(0,184,255,.12),transparent 28%),linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-size:13px;min-height:100vh}body.dark{--bg:#07111f;--bg2:#0a1626;--panel:#0d1b2e;--panel2:#10243e;--text:#eef7ff;--muted:#9aabc2;--line:#203653;--shadow:0 24px 70px rgba(0,0,0,.34)}a{text-decoration:none;color:inherit}.muted{color:var(--muted);font-size:12px}.empty-state{padding:15px;border:1px dashed var(--line);border-radius:14px;background:var(--panel2)}
.btn{border:0;border-radius:12px;padding:8px 12px;background:var(--panel2);color:var(--text);font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;line-height:1.2}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;box-shadow:0 12px 26px rgba(35,109,255,.26)}.btn.glass{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}.btn.ghost{background:transparent}.btn.big{padding:12px 18px;border-radius:15px}.btn.full{width:100%}.btn.tiny{padding:6px 9px;border-radius:10px;font-size:11px}.btn.warn{background:#fff4dc;color:#965b00}.btn.ok{background:#dcfce7;color:#166534}.danger-link{background:#fee2e2;color:#991b1b}.pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--panel2);color:var(--muted);font-weight:800;border:1px solid var(--line)}
.alert{padding:11px 14px;border-radius:15px;margin:12px 0;font-weight:800}.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand img,.brand-mark{width:38px;height:38px;border-radius:13px;object-fit:contain;background:#fff;flex:none}.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,#236dff,#7c3cff);color:#fff;font-weight:900}.brand b{display:block;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.center{justify-content:center}
.app-shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:14px;background:rgba(255,255,255,.74);backdrop-filter:blur(16px);border-right:1px solid var(--line);box-shadow:10px 0 35px rgba(20,60,130,.06);z-index:4}.dark .sidebar{background:rgba(8,18,34,.84)}.side-search{margin:14px 0}.side-search input{height:36px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:0 12px;width:100%;outline:none}.nav{display:flex;flex-direction:column;gap:8px}.nav-group{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.45);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.dark .nav-group{background:rgba(255,255,255,.035)}.nav-group:not(.closed){border-color:rgba(35,109,255,.36);box-shadow:0 12px 28px rgba(15,23,42,.10)}.nav-group>button{height:34px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border:0;background:transparent;color:var(--muted);font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}.nav-group>button b{transition:transform .18s ease}.nav-group.closed>button b{transform:rotate(-90deg)}.nav-group.closed>.nav-items{display:none}.nav-group a{display:flex;align-items:center;gap:9px;padding:8px 10px;margin:3px 6px;border-radius:11px;color:var(--text);font-weight:760;font-size:12px}.nav-group a i{width:20px;text-align:center;font-style:normal}.nav-group a:hover,.nav-group a.active{background:linear-gradient(135deg,rgba(35,109,255,.13),rgba(0,184,255,.12));box-shadow:inset 0 0 0 1px rgba(35,109,255,.18)}.nav-group a.active{color:var(--primary)}
.main{min-width:0;padding:16px 18px 30px}.topbar{position:sticky;top:0;z-index:3;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;margin:-16px -18px 16px;background:rgba(244,248,255,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.dark .topbar{background:rgba(7,17,31,.82)}.title-block h1{margin:0;font-size:22px;letter-spacing:-.03em}.title-block p{margin:3px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.quick{padding:8px 11px;border-radius:12px;background:var(--panel);font-weight:850;border:1px solid var(--line);font-size:12px}.quick.active{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff}.theme-toggle,.mobile-menu{border:1px solid var(--line);background:var(--panel);height:36px;min-width:38px;border-radius:13px;color:var(--text);font-weight:900;cursor:pointer}.mobile-menu{display:none}.user-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 9px}.user-chip img,.avatar-mini{width:27px;height:27px;border-radius:50%;object-fit:cover}.avatar-mini{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;font-weight:900}.user-chip span{font-weight:850;line-height:1.05}.user-chip small{display:block;color:var(--muted);font-weight:700;font-size:10px;margin-top:2px}
.card{background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.86));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px;margin-bottom:14px;overflow:hidden}.dark .card{background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))}.card h3{margin:0 0 10px;font-size:15px}.card p{line-height:1.55;color:var(--muted);margin:8px 0}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.card-head h3{margin:0}.glow{position:relative}.glow:before{content:"";position:absolute;inset:auto -20% -30% 40%;height:100px;background:radial-gradient(circle,rgba(35,109,255,.18),transparent 60%);pointer-events:none}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:1.1fr .9fr}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-grid{align-items:start}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.stat-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:var(--shadow);min-height:85px;display:flex;flex-direction:column;justify-content:space-between}.stat-card i{font-style:normal;font-size:22px}.stat-card span{color:var(--muted);font-size:11px;font-weight:800}.stat-card strong{font-size:21px;letter-spacing:-.03em}.stat-card.ok strong{color:var(--green)}.stat-card.danger strong{color:var(--red)}.stat-card.warn strong{color:var(--orange)}.stat-card.primary strong{color:var(--primary)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.compact-form{gap:8px}.form-grid label{font-size:11px;color:var(--muted);font-weight:900;display:flex;flex-direction:column;gap:5px}.form-grid .wide,.wide{grid-column:1/-1}.check{flex-direction:row!important;align-items:center;color:var(--text)!important}.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.card-head input{height:36px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:8px 10px;outline:none;width:100%;font-size:12px}.form-grid textarea{height:72px;resize:vertical}.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline-form select,.inline-form input{width:auto;min-width:240px}.actions{display:flex;gap:8px;justify-content:flex-end}.check-list{padding-left:20px;margin:0}.check-list li{margin:8px 0}.module-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.module-actions span{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px;font-weight:800;font-size:12px}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.quick-grid a{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;font-weight:850;text-align:center}.finance-mini{display:grid;gap:9px}.finance-mini div{display:flex;justify-content:space-between;gap:12px;padding:10px;border-radius:13px;background:var(--panel2);border:1px solid var(--line)}
.table-wrap{overflow:auto;margin:0 -2px}table{width:100%;border-collapse:separate;border-spacing:0 7px}th{font-size:10px;color:var(--muted);text-align:left;text-transform:uppercase;letter-spacing:.04em;padding:0 10px;white-space:nowrap}td{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:middle;font-size:12px;white-space:nowrap}td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}.row-actions{display:flex;gap:6px}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid var(--line);background:#eaf2ff;color:#24405f}.badge.active,.badge.online,.badge.paid,.badge.success,.badge.hadir,.badge.in,.badge.available,.badge.done{background:#dcfce7;color:#166534}.badge.isolated,.badge.offline,.badge.overdue,.badge.expense,.badge.alpa,.badge.out,.badge.used,.badge.cancelled{background:#fee2e2;color:#991b1b}.badge.pending,.badge.warning,.badge.progress,.badge.survey,.badge.medium,.badge.scheduled{background:#fff7ed;color:#9a3412}.badge.urgent,.badge.high{background:#ffe4e6;color:#9f1239}.badge.unknown,.badge.inactive{background:#eef2f7;color:#475569}pre{white-space:pre-wrap;background:#07111f;color:#dff7ff;border-radius:14px;padding:12px;overflow:auto;font-size:12px;line-height:1.5}.noc-grid,.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.noc-grid span,.report-grid div{border:1px solid var(--line);background:var(--panel2);padding:12px;border-radius:14px;font-weight:800}.map-box{height:420px;border-radius:18px;border:1px solid var(--line);background:var(--panel2);display:grid;place-items:center;color:var(--muted);font-weight:900}.map-box.big{height:560px}.hero-mini{background:linear-gradient(135deg,rgba(35,109,255,.12),rgba(0,184,255,.10))}
.landing-page,.login-page{background:#07111f;color:#fff}.landing-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1180px;margin:0 auto;padding:22px 18px}.landing-nav nav{display:flex;align-items:center;gap:18px}.landing-brand span{display:none}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;max-width:1180px;margin:40px auto 0;padding:0 18px 70px}.eyebrow{display:inline-flex;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;font-weight:900;color:#c6edff}.hero h1{font-size:56px;line-height:.98;letter-spacing:-.05em;margin:24px 0 18px}.hero p{color:#c8d6ea;font-size:17px;line-height:1.65}.hero-actions{display:flex;gap:12px;margin-top:28px}.hero-panel{position:relative;min-height:410px;border-radius:34px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(35,109,255,.22),rgba(124,60,255,.24));box-shadow:0 30px 90px rgba(0,0,0,.35);padding:34px;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.75}.o1{width:220px;height:220px;background:#00b8ff;right:-60px;top:-40px}.o2{width:240px;height:240px;background:#7c3cff;left:40px;bottom:-80px}.premium-card,.premium-grid{position:relative;z-index:1}.premium-card{margin-top:130px;border-radius:22px;padding:22px;background:rgba(7,17,31,.76);border:1px solid rgba(255,255,255,.16)}.premium-card b{font-size:24px;display:block}.premium-card span{color:#c8d6ea;display:block;margin-top:8px}.premium-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}.premium-grid div,.feature-card{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);border-radius:18px;padding:17px}.premium-grid strong{font-size:24px;display:block}.premium-grid small{color:#c8d6ea}.landing-section{max-width:1180px;margin:0 auto;padding:52px 18px}.landing-section h2{font-size:34px;margin:0 0 22px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card p{color:#c8d6ea;font-size:13px}.role-row{display:flex;flex-wrap:wrap;gap:10px}.role-row span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);border-radius:999px;padding:10px 14px;font-weight:900}.landing-footer{text-align:center;padding:30px;color:#b5c5d9}.login-page{min-height:100vh;display:grid;place-items:center}.login-card{width:min(430px,92vw);border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(13,27,46,.92),rgba(10,22,38,.92));border-radius:26px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.35)}.login-card form{display:grid;gap:14px;margin-top:18px}.login-card label{font-weight:900;color:#dbeafe;font-size:12px;display:grid;gap:6px}.login-card input{height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.18);padding:0 12px;background:#e8f1ff;color:#07111f}.back-link{display:block;margin-top:20px;text-align:center;color:#b6c8e2;font-weight:900}
@media(max-width:1280px){.stat-grid.six{grid-template-columns:repeat(3,1fr)}.feature-grid{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:48px}}
@media(max-width:980px){:root{--sidebar:240px}.grid.two,.grid.three,.hero{grid-template-columns:1fr}.stat-grid,.stat-grid.six{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start;flex-direction:column}.top-actions{justify-content:flex-start}.hero-panel{min-height:330px}.hero h1{font-size:40px}}
@media(max-width:760px){body{font-size:12px}.app-shell{display:block}.sidebar{position:fixed;left:-270px;top:0;width:260px;transition:.2s}.nav-open .sidebar{left:0}.mobile-menu{display:inline-grid;place-items:center}.main{padding:12px}.topbar{margin:-12px -12px 12px;padding:10px}.title-block h1{font-size:19px}.form-grid{grid-template-columns:1fr}.stat-grid,.stat-grid.six{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.landing-nav{flex-direction:column;align-items:flex-start}.landing-nav nav{flex-wrap:wrap}.hero{margin-top:20px}.hero h1{font-size:34px}.hero p{font-size:14px}.hero-actions{flex-direction:column}.map-box.big{height:420px}.inline-form select,.inline-form input{width:100%;min-width:0}.user-chip{display:none}}

/* v4 - Live MikroTik / Radius status widget */
.router-live-card{padding:13px 15px}.router-status-list{display:grid;gap:12px}.router-status-list.detail{gap:14px}.mikrotik-status{display:grid;grid-template-columns:150px minmax(220px,1fr) minmax(260px,.9fr) 52px;align-items:center;gap:14px;padding:13px;border-radius:18px;background:linear-gradient(135deg,rgba(13,27,46,.94),rgba(30,28,62,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 42px rgba(0,0,0,.18);color:#eef7ff;min-height:112px}.mikrotik-status.compact{min-height:94px}.mikrotik-status.connected{box-shadow:inset 0 0 0 1px rgba(34,197,94,.14),0 18px 42px rgba(0,0,0,.18)}.mikrotik-status.disconnected{box-shadow:inset 0 0 0 1px rgba(239,68,68,.14),0 18px 42px rgba(0,0,0,.18)}.mk-left{display:flex;flex-direction:column;align-items:center;gap:8px}.mk-pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:999px;font-size:11px;font-weight:950;color:#fff;min-width:95px}.mk-pill.ok{background:linear-gradient(135deg,#22c55e,#5ee66f)}.mk-pill.bad{background:linear-gradient(135deg,#ef4444,#fb7185)}.mk-left small,.mk-center small{color:#b8c7da}.mk-center{display:grid;gap:3px;min-width:0}.mk-center b{color:#22d3ee;font-size:13px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-center span{font-size:12px;color:#fff;font-weight:900}.mk-center small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-danger{color:#fecaca!important}.mk-resource{display:grid;gap:4px}.mk-resource label{font-size:10px;font-weight:950;color:#eaf6ff;display:flex;align-items:center;justify-content:space-between;gap:10px}.mk-resource label em{font-style:normal;color:#fff;font-weight:900}.mk-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.88);overflow:hidden}.mk-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#84cc16)}.mk-score{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#22d3ee);font-weight:950;color:#fff;justify-self:end}.mikrotik-status.disconnected .mk-score{background:linear-gradient(135deg,#64748b,#334155)}
body:not(.dark) .mikrotik-status{background:linear-gradient(135deg,#13213a,#231d45);}
@media(max-width:1100px){.mikrotik-status{grid-template-columns:130px 1fr}.mk-resource{grid-column:1/-1}.mk-score{position:absolute;right:20px;top:20px}.mikrotik-status{position:relative;padding-right:72px}}
@media(max-width:640px){.mikrotik-status{grid-template-columns:1fr;padding:13px}.mk-left{align-items:flex-start}.mk-score{position:static;justify-self:start}.mk-center small{white-space:normal}.mk-resource label{font-size:10px}}


/* v8 - Paket Internet: premium export toggle and compact action row */
.mk-export-card{
  display:flex!important;
  flex-direction:row!important;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  margin-top:4px;
  margin-bottom:4px;
  border-radius:18px;
  border:1px solid rgba(35,109,255,.18);
  background:linear-gradient(135deg,rgba(35,109,255,.08),rgba(0,184,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 12px 28px rgba(35,78,150,.08);
}
.dark .mk-export-card{
  border-color:rgba(91,145,255,.24);
  background:linear-gradient(135deg,rgba(20,40,72,.96),rgba(9,24,45,.94));
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.mk-export-left{flex:1;min-width:0}.mk-export-title{font-size:14px;font-weight:950;line-height:1.25;color:var(--text);margin-bottom:5px}.mk-export-subtitle{font-size:11.5px;line-height:1.55;color:var(--muted);max-width:760px}.mk-export-features{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.mk-export-features span{font-size:10.5px;font-weight:900;padding:5px 8px;border-radius:999px;color:var(--primary);background:rgba(35,109,255,.10);border:1px solid rgba(35,109,255,.14)}.dark .mk-export-features span{color:#cfe4ff;background:rgba(53,113,255,.18);border-color:rgba(91,145,255,.22)}.mk-export-right{min-width:142px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.switch{position:relative!important;display:inline-block!important;width:62px;height:34px;flex:none}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;transition:.25s ease;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)}.dark .slider{background:#334155;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.slider:before{content:"";position:absolute;height:26px;width:26px;left:4px;top:4px;background:#fff;transition:.25s ease;border-radius:50%;box-shadow:0 5px 14px rgba(15,23,42,.22)}.switch input:checked + .slider{background:linear-gradient(90deg,var(--primary),var(--cyan))}.switch input:checked + .slider:before{transform:translateX(28px)}.switch-label{font-size:11.5px;font-weight:950;color:var(--muted);text-align:center}.package-action-row{display:flex!important;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px}.btn-save-package{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:none;border-radius:13px;font-size:13px;font-weight:950;color:#fff;background:linear-gradient(90deg,var(--primary),var(--cyan));box-shadow:0 12px 24px rgba(35,109,255,.25);transition:.18s ease;cursor:pointer}.btn-save-package:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(35,109,255,.32)}.btn-cancel-package{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border-radius:13px;font-size:12px;font-weight:950;color:var(--text);background:var(--panel2);border:1px solid var(--line)}
@media(max-width:900px){.mk-export-card{flex-direction:column!important;align-items:flex-start}.mk-export-right{min-width:0;align-items:flex-start}.package-action-row{flex-direction:column;align-items:stretch}.btn-save-package,.btn-cancel-package{width:100%}}

/* v9 - Paket Internet premium export card: cache-busted and isolated classes */
.pkg9-export-card{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:100%!important;
  margin-top:12px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  border:1px solid rgba(35,109,255,.18)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(237,246,255,.92))!important;
  box-shadow:0 16px 40px rgba(35,78,150,.10), inset 0 0 0 1px rgba(255,255,255,.75)!important;
  overflow:hidden!important;
}
body.dark .pkg9-export-card{
  border-color:rgba(91,145,255,.25)!important;
  background:linear-gradient(135deg,rgba(15,31,54,.98),rgba(8,22,42,.96))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.pkg9-export-info{flex:1!important;min-width:0!important;display:block!important}.pkg9-export-title{font-size:14px!important;font-weight:950!important;line-height:1.2!important;color:var(--text)!important;margin:0 0 6px!important}.pkg9-export-desc{font-size:12px!important;line-height:1.55!important;color:var(--muted)!important;max-width:760px!important;margin:0!important}.pkg9-export-badges{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-top:11px!important}.pkg9-export-badges span{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:26px!important;padding:5px 10px!important;border-radius:999px!important;background:rgba(35,109,255,.10)!important;border:1px solid rgba(35,109,255,.18)!important;color:#236dff!important;font-size:11px!important;font-weight:950!important;line-height:1!important;white-space:nowrap!important}body.dark .pkg9-export-badges span{background:rgba(53,113,255,.18)!important;border-color:rgba(91,145,255,.28)!important;color:#d9eaff!important}.pkg9-export-control{width:168px!important;min-width:168px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:10px!important;border-radius:16px!important;background:rgba(35,109,255,.06)!important;border:1px dashed rgba(35,109,255,.20)!important}body.dark .pkg9-export-control{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.11)!important}.pkg9-switch{position:relative!important;display:inline-block!important;width:66px!important;height:36px!important;margin:0!important;padding:0!important}.pkg9-switch input{opacity:0!important;width:0!important;height:0!important;position:absolute!important}.pkg9-slider{position:absolute!important;cursor:pointer!important;inset:0!important;border-radius:999px!important;background:#cbd5e1!important;transition:.22s ease!important;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)!important}.pkg9-slider:before{content:""!important;position:absolute!important;width:28px!important;height:28px!important;left:4px!important;top:4px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 5px 14px rgba(15,23,42,.20)!important;transition:.22s ease!important}.pkg9-switch input:checked + .pkg9-slider{background:linear-gradient(90deg,#236dff,#00b8ff)!important}.pkg9-switch input:checked + .pkg9-slider:before{transform:translateX(30px)!important}.pkg9-switch-text{font-size:12px!important;font-weight:950!important;color:var(--text)!important;text-align:center!important;line-height:1.2!important}.pkg9-action-row{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important;margin-top:14px!important}.pkg9-save-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:42px!important;padding:0 20px!important;border:0!important;border-radius:14px!important;background:linear-gradient(90deg,#236dff,#00b8ff)!important;color:#fff!important;font-size:13px!important;font-weight:950!important;line-height:1!important;cursor:pointer!important;box-shadow:0 13px 28px rgba(35,109,255,.25)!important;transition:.18s ease!important}.pkg9-save-btn:hover{transform:translateY(-1px)!important;box-shadow:0 17px 34px rgba(35,109,255,.32)!important}.pkg9-cancel-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:0 16px!important;border-radius:14px!important;background:var(--panel2)!important;color:var(--text)!important;border:1px solid var(--line)!important;text-decoration:none!important;font-size:12px!important;font-weight:950!important}.pkg9-cancel-btn:hover{filter:brightness(.98)!important}@media(max-width:900px){.pkg9-export-card{flex-direction:column!important;align-items:stretch!important}.pkg9-export-control{width:100%!important;min-width:0!important;align-items:flex-start!important}.pkg9-action-row{flex-direction:column!important;align-items:stretch!important}.pkg9-save-btn,.pkg9-cancel-btn{width:100%!important}}

/* =========================
   CUSTOMER CODE V10
   ========================= */
.customer-code-box{
    margin:0 0 4px;
    padding:14px;
    border-radius:18px;
    border:1px solid var(--line, rgba(129,164,255,.22));
    background:linear-gradient(135deg, rgba(22,86,196,.12), rgba(14,165,233,.08));
}
.customer-code-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}
.customer-code-head b{
    display:block;
    font-size:15px;
    color:var(--text, #eaf2ff);
}
.customer-code-head small{
    display:block;
    margin-top:4px;
    font-size:12px;
    line-height:1.5;
    color:var(--muted, #8fa6c3);
}
.code-preview{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:96px;
    height:38px;
    padding:0 14px;
    border-radius:999px;
    color:#fff;
    font-size:14px;
    font-weight:800;
    letter-spacing:.3px;
    background:linear-gradient(90deg,#2563eb,#0ea5e9);
    box-shadow:0 10px 22px rgba(37,99,235,.22);
}
.customer-code-grid{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:12px;
}
.customer-code-grid label{margin:0!important;}
#customerCodeInput[readonly]{
    cursor:not-allowed;
    opacity:.88;
    font-weight:800;
    letter-spacing:.4px;
}
body:not(.dark) .customer-code-box{
    background:linear-gradient(135deg,#eff7ff,#f8fbff);
    border-color:#d7e6ff;
}
body:not(.dark) .customer-code-head b{color:#10233f;}
body:not(.dark) .customer-code-head small{color:#64748b;}
@media(max-width:760px){
    .customer-code-head{align-items:flex-start;flex-direction:column;}
    .customer-code-grid{grid-template-columns:1fr;}
}

/* V11 Customer full input page */
.customer-full-section{grid-template-columns:1fr!important;}
.customer-full-card{max-width:100%;}
.customer-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px;}
.customer-form-head h3{margin:0 0 4px!important;}
.customer-form-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;}
.customer-full-card .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 12px;}
.customer-full-card .form-grid .wide{grid-column:1/-1;}
@media(max-width:1280px){.customer-full-card .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.customer-full-card .form-grid{grid-template-columns:1fr;}}

/* V12 Customer page: hide form by default, cleaner list toolbar */
.customer-list-head{align-items:flex-start;gap:14px;}
.customer-list-head p{margin:4px 0 0;font-size:12px;color:var(--muted);}
.customer-list-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.customer-search input{min-width:260px;height:38px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:8px 10px;outline:none;font-size:12px;}
.customer-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.customer-form-head p{margin:4px 0 0;font-size:12px;color:var(--muted);}
.customer-form-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:10px;}
@media(max-width:760px){.customer-list-head{display:block}.customer-list-actions{justify-content:stretch;margin-top:12px}.customer-list-actions .btn,.customer-search,.customer-search input{width:100%;}.customer-form-head{display:block}.customer-form-head .btn{margin-top:10px;width:100%;}.customer-form-actions{flex-direction:column;align-items:stretch}.customer-form-actions .btn{width:100%;}}

/* =========================
   V14 RADIUS SYNC PAGE
   ========================= */
.radius-sync-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:22px 24px;
    margin:18px 0;
    border-radius:22px;
    border:1px solid var(--border, rgba(148,163,184,.22));
    background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(14,165,233,.10)), var(--card, rgba(15,23,42,.78));
    box-shadow:0 18px 40px rgba(2,6,23,.16);
}
.radius-sync-hero h3{margin:6px 0 8px;font-size:22px;line-height:1.25}
.radius-sync-hero p{margin:0;color:var(--muted, #9fb1cc);max-width:920px;line-height:1.55}
.radius-sync-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:260px}
.eyebrow.small{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#38bdf8;font-weight:800}
.compact-stats{margin-bottom:18px}.compact-stats .stat-card{min-height:92px}
.package-sync-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sync-profile-card{border:1px solid var(--border, rgba(148,163,184,.22));border-radius:18px;background:rgba(15,35,61,.64);padding:16px}
.sync-profile-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.sync-profile-head b{display:block;font-size:15px}.sync-profile-head span{display:block;color:var(--muted,#9fb1cc);font-size:12px;margin-top:4px}
.sync-profile-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sync-profile-body div{padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.30);border:1px solid rgba(148,163,184,.14)}.sync-profile-body small{display:block;color:var(--muted,#9fb1cc);font-size:11px;margin-bottom:4px}.sync-profile-body strong{font-size:13px;word-break:break-word}
.sync-profile-footer{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted,#9fb1cc);font-size:12px}.sync-profile-footer a{color:#38bdf8;font-weight:800;text-decoration:none}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;text-transform:uppercase}.pill.ok{background:rgba(34,197,94,.14);color:#86efac}.pill.warn{background:rgba(245,158,11,.16);color:#fbbf24}.badge-soft{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;background:rgba(59,130,246,.14);color:#bfdbfe;font-weight:800}.empty-state{grid-column:1/-1;padding:24px;border-radius:16px;background:rgba(15,23,42,.32);border:1px dashed rgba(148,163,184,.35);color:var(--muted,#9fb1cc)}
.advanced-radius-note .note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.advanced-radius-note .note-grid div{padding:14px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(15,35,61,.50)}.advanced-radius-note b{display:block;margin-bottom:6px}.advanced-radius-note span{display:block;color:var(--muted,#9fb1cc);font-size:13px;line-height:1.45}
@media (max-width:1000px){.radius-sync-hero{flex-direction:column;align-items:flex-start}.radius-sync-actions{justify-content:flex-start}.package-sync-grid{grid-template-columns:1fr}.advanced-radius-note .note-grid{grid-template-columns:1fr}}

/* =========================
   V16 Customer IP Pool List
   ========================= */
.ip-static-field{position:relative;}
.ip-static-row{display:flex;gap:8px;align-items:center;width:100%;}
.ip-static-row input{flex:1;min-width:0;}
.ip-list-btn{height:38px;min-width:74px;white-space:nowrap;background:linear-gradient(90deg,#2563eb,#06b6d4)!important;color:#fff!important;border:0!important;box-shadow:0 10px 22px rgba(37,99,235,.18)!important;}
#ipPoolHint{display:block;margin-top:6px;font-size:11px;line-height:1.35;color:var(--muted,#8fa6c3);font-weight:700;}
.ip-pool-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.66);backdrop-filter:blur(8px);}
.ip-pool-modal.show{display:flex;}
.ip-pool-dialog{width:min(860px,96vw);max-height:82vh;overflow:hidden;border-radius:22px;border:1px solid var(--line,rgba(148,163,184,.24));background:var(--panel,#0b1729);box-shadow:0 30px 90px rgba(0,0,0,.35);}
.ip-pool-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line,rgba(148,163,184,.24));background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(6,182,212,.09));}
.ip-pool-head b{display:block;font-size:16px;color:var(--text,#eaf2ff);}
.ip-pool-head span{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:var(--muted,#9fb1cc);}
.modal-close{width:34px;height:34px;border-radius:12px;border:1px solid var(--line,rgba(148,163,184,.24));background:var(--panel2,#10233f);color:var(--text,#eaf2ff);font-size:22px;line-height:1;cursor:pointer;}
.ip-pool-body{padding:16px 18px;overflow:auto;max-height:calc(82vh - 76px);}
.ip-pool-table{width:100%;border-collapse:separate;border-spacing:0 8px;}
.ip-pool-table th{padding:8px 10px;color:var(--muted,#9fb1cc);font-size:11px;text-align:left;text-transform:uppercase;letter-spacing:.04em;}
.ip-pool-table td{padding:11px 10px;background:rgba(15,35,61,.62);border-top:1px solid rgba(148,163,184,.14);border-bottom:1px solid rgba(148,163,184,.14);font-size:13px;}
.ip-pool-table td:first-child{border-left:1px solid rgba(148,163,184,.14);border-radius:14px 0 0 14px;}
.ip-pool-table td:last-child{border-right:1px solid rgba(148,163,184,.14);border-radius:0 14px 14px 0;}
.empty-ip-list{padding:20px;border-radius:16px;border:1px dashed rgba(148,163,184,.35);color:var(--muted,#9fb1cc);background:rgba(15,35,61,.42);font-size:13px;line-height:1.5;}
body:not(.dark) .ip-pool-dialog{background:#fff;color:#10233f;}
body:not(.dark) .ip-pool-head{background:linear-gradient(135deg,#eff6ff,#ecfeff);}
body:not(.dark) .ip-pool-table td{background:#f8fbff;border-color:#dbeafe;}
body:not(.dark) .modal-close{background:#f8fbff;color:#10233f;}
@media(max-width:760px){.ip-static-row{flex-direction:column;align-items:stretch}.ip-list-btn{width:100%;}.ip-pool-dialog{width:100%;}.ip-pool-table{min-width:680px;}}

/* V17: IP pool list shows used and empty IP addresses */
.ip-pool-summary{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;color:var(--muted,#9fb1cc);font-size:12px;}
.ip-pool-summary span{padding:8px 12px;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:rgba(15,35,61,.52);}
body:not(.dark) .ip-pool-summary span{background:#f8fbff;border-color:#dbeafe;color:#475569;}
.ip-status{display:inline-flex;align-items:center;justify-content:center;min-width:78px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;}
.ip-status.used{background:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.26);}
.ip-status.empty{background:rgba(34,197,94,.18);color:#86efac;border:1px solid rgba(34,197,94,.28);}
body:not(.dark) .ip-status.used{background:#fff7ed;color:#b45309;border-color:#fed7aa;}
body:not(.dark) .ip-status.empty{background:#ecfdf5;color:#047857;border-color:#bbf7d0;}
.ip-pool-table tr.ip-empty td{background:rgba(6,45,42,.32);}
body:not(.dark) .ip-pool-table tr.ip-empty td{background:#f0fdf4;}
.ip-pool-note{padding:10px 12px;border-radius:14px;margin-bottom:10px;font-size:12px;}
.ip-pool-note.warn{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.25);color:#fbbf24;}
.btn.tiny.success{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:rgba(34,197,94,.45);color:white;}

/* V19 loading overlay for save/upload actions */
.fn-submit-overlay{position:fixed;inset:0;background:rgba(2,8,23,.72);backdrop-filter:blur(10px);z-index:99999;display:none;align-items:center;justify-content:center;padding:22px}
.fn-submit-overlay.show{display:flex}
.fn-submit-card{width:min(460px,92vw);border:1px solid rgba(56,189,248,.34);border-radius:24px;background:linear-gradient(145deg,rgba(15,33,58,.96),rgba(11,20,38,.98));box-shadow:0 30px 100px rgba(0,0,0,.48),0 0 40px rgba(14,165,233,.18);padding:28px;text-align:center;color:#fff}
body:not(.dark) .fn-submit-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(230,242,255,.98));color:#0f172a;border-color:rgba(37,99,235,.22)}
.fn-spinner{width:64px;height:64px;border-radius:50%;border:6px solid rgba(148,163,184,.32);border-top-color:#0ea5e9;margin:0 auto 18px;animation:fnSpin .85s linear infinite;box-shadow:0 0 25px rgba(14,165,233,.35)}
.fn-submit-card h3{margin:0 0 8px;font-size:22px;font-weight:900;letter-spacing:.2px}
.fn-submit-card p{margin:0;color:#b9d7ff;line-height:1.5;font-weight:700}
body:not(.dark) .fn-submit-card p{color:#475569}
.fn-submit-progress{height:8px;border-radius:999px;background:rgba(148,163,184,.22);overflow:hidden;margin-top:18px}
.fn-submit-progress span{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#06b6d4,#22c55e);animation:fnProgress 1.25s ease-in-out infinite}
button.is-loading{opacity:.78;pointer-events:none;filter:saturate(.85)}
@keyframes fnSpin{to{transform:rotate(360deg)}}
@keyframes fnProgress{0%{transform:translateX(-120%)}50%{transform:translateX(70%)}100%{transform:translateX(260%)}}

/* =========================
   V20 WhatsApp Center
   ========================= */
.whatsapp-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,rgba(34,197,94,.13),rgba(14,165,233,.08)),var(--panel)!important}
.whatsapp-hero h3{margin:4px 0 6px;font-size:22px}.whatsapp-hero p{margin:0;color:var(--muted);line-height:1.55}
.wa-status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:12px 16px;border-radius:999px;font-weight:950;border:1px solid var(--line)}
.wa-status-pill.on{background:rgba(34,197,94,.16);color:#22c55e;border-color:rgba(34,197,94,.35)}
.wa-status-pill.off{background:rgba(248,113,113,.13);color:#fb7185;border-color:rgba(248,113,113,.30)}
.wa-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wa-template-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border:1px solid var(--line);background:var(--panel2);border-radius:18px}.wa-template-card label:nth-child(5),.wa-template-card label:nth-child(4){grid-column:1/-1}.wa-template-card textarea{min-height:98px}.wa-template-card button{justify-self:start}.wa-template-card.new{border-style:dashed;background:rgba(34,197,94,.06)}.badge.sent{background:#d1fae5;color:#047857}.badge.failed{background:#fee2e2;color:#b91c1c}.badge.disabled{background:#e5e7eb;color:#374151}
body.dark .badge.sent{background:rgba(34,197,94,.18);color:#86efac}body.dark .badge.failed{background:rgba(248,113,113,.16);color:#fecaca}body.dark .badge.disabled{background:rgba(148,163,184,.16);color:#cbd5e1}
@media(max-width:960px){.whatsapp-hero{flex-direction:column;align-items:flex-start}.wa-template-grid{grid-template-columns:1fr}.wa-template-card{grid-template-columns:1fr}.wa-status-pill{width:100%}}

/* V27: Sidebar accordion compact behavior */
.nav-group.closed>.nav-items{display:none!important}.nav-group:not(.closed)>.nav-items{display:block}.nav-group>button:hover{color:var(--primary)}

/* =========================
   V30 Dashboard Billing Premium
   Model dark/light full color sesuai tema billing
   ========================= */
.dash30-shell{display:grid;gap:18px;animation:dash30Fade .32s ease both}.dash30-toolbar{display:grid;grid-template-columns:1fr minmax(220px,360px) auto;gap:14px;align-items:center}.dash30-time b{display:block;font-size:13px;color:var(--text);letter-spacing:-.01em}.dash30-time span{display:block;margin-top:5px;color:var(--muted);font-weight:900}.dash30-search{height:40px;border:1px solid var(--line);background:var(--panel);border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 12px;box-shadow:var(--shadow)}.dash30-search span{color:var(--muted);font-weight:900}.dash30-search input{border:0;background:transparent;color:var(--text);outline:0;width:100%;font-size:12px}.dash30-tools{display:flex;gap:10px;justify-content:flex-end}.dash30-tools a{position:relative;width:36px;height:36px;border-radius:13px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;box-shadow:var(--shadow)}.dash30-tools em{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#236dff,#00b8ff);color:#fff;font-size:10px;font-style:normal;font-weight:950;display:grid;place-items:center}.dash30-partner a{display:inline-flex;align-items:center;min-width:260px;height:34px;border-radius:14px;padding:0 18px;background:var(--panel);border:1px solid var(--line);font-weight:900;font-size:12px;box-shadow:var(--shadow)}
.dash30-ticket-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.dash30-ticket{position:relative;min-height:110px;border-radius:22px;padding:22px 26px;color:#fff;overflow:hidden;box-shadow:0 20px 46px rgba(2,6,23,.20);isolation:isolate}.dash30-ticket:before{content:"";position:absolute;inset:-25% -20% auto auto;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.16);z-index:-1}.dash30-ticket i{font-style:normal;font-size:24px;margin-right:10px;vertical-align:middle}.dash30-ticket b{font-size:28px;font-weight:500;vertical-align:middle}.dash30-ticket span{display:block;margin-top:12px;padding-left:45px;font-weight:800;font-size:13px}.dash30-ticket.orange{background:linear-gradient(135deg,#ffad52,#ff9949)}.dash30-ticket.green{background:linear-gradient(135deg,#65dc62,#49dc64)}.dash30-ticket.purple{background:linear-gradient(135deg,#b997db,#b486db)}.dash30-ticket.blue{background:linear-gradient(135deg,#79aec8,#6fa6c1)}
.dash30-finance-card{display:grid;grid-template-columns:minmax(360px,1.25fr) .62fr .56fr;gap:24px;padding:34px 30px;border-radius:22px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);align-items:center}.dark .dash30-finance-card{background:rgba(255,255,255,.045)}.dash30-income-card{position:relative;min-height:230px;border-radius:24px;padding:72px 34px 24px;background:linear-gradient(135deg,#4a77d9,#4d77d0 55%,#5c7ddf);color:#fff;overflow:hidden;box-shadow:0 18px 40px rgba(37,99,235,.24)}.dash30-income-card:before,.dash30-income-card:after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(0,0,0,.06)}.dash30-income-card:before{width:360px;height:360px;left:110px;top:80px}.dash30-income-card:after{width:190px;height:190px;left:110px;top:205px}.dash30-card-circles{position:absolute;left:30px;top:38px;display:flex}.dash30-card-circles span{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);margin-right:-10px}.dash30-income-value{font-size:31px;line-height:1;font-weight:500;position:relative}.dash30-income-label{margin-top:14px;font-size:13px;font-weight:850;position:relative}.dash30-income-card p{margin:24px 0 0;color:#fff;font-size:12px;position:relative}.dash30-update{position:absolute;right:28px;top:28px;width:62px;height:168px;border-radius:28px;background:rgba(255,255,255,.86);color:#0f172a;display:flex;flex-direction:column;align-items:center;justify-content:space-around;font-weight:900;box-shadow:0 18px 35px rgba(15,23,42,.18)}.dash30-update b{width:40px;height:40px;border-radius:13px;background:#fff;display:grid;place-items:center;font-size:22px}.dash30-update span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px}.dash30-update small{font-size:12px}.dash30-finance-list h3,.dash30-chart-box span{margin:0 0 8px;font-size:15px;color:var(--text)}.dash30-finance-list p{margin:0 0 22px;color:var(--muted);font-size:11px}.dash30-legend{display:grid;grid-template-columns:16px minmax(80px,1fr) auto;gap:10px;align-items:center;margin:16px 0;font-size:12px}.dash30-legend b{color:var(--text);font-size:12px}.dash30-legend strong{font-size:12px}.dot{width:14px;height:14px;border-radius:50%;display:inline-block}.dot.today{background:#4b7bdc}.dot.week{background:#5ee260}.dot.year{background:#ffa958}.dot.unpaid{background:#ffd326}.dash30-chart-box b{display:block;font-size:25px;font-weight:500;margin:4px 0 14px}.dash30-chart-legend{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:10px;margin-bottom:8px}.dash30-chart-legend em{width:34px;height:10px;border:1px solid currentColor;background:rgba(0,184,255,.36);display:inline-block}.dash30-chart-legend em:nth-of-type(2){background:rgba(244,84,136,.38)}.dash30-chart{height:98px;display:grid;grid-template-columns:repeat(12,1fr);gap:7px;align-items:end;padding:5px 0 18px;border-left:1px solid rgba(148,163,184,.16);border-bottom:1px solid rgba(148,163,184,.16)}.dash30-bar{height:84px;display:flex;gap:2px;align-items:end;position:relative;justify-content:center}.dash30-bar span{width:9px;min-height:2px;border-radius:3px 3px 0 0}.dash30-bar .in{background:linear-gradient(180deg,#2ca4e6,#166aa2)}.dash30-bar .out{background:linear-gradient(180deg,#e25189,#9d285a)}.dash30-bar small{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%) rotate(-20deg);font-size:9px;color:var(--muted)}
.dash30-customer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.dash30-mini{min-height:112px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:20px 22px;display:grid;grid-template-columns:56px 1fr;grid-template-rows:1fr auto;align-items:center;gap:0 16px}.dark .dash30-mini{background:rgba(255,255,255,.045)}.dash30-mini i{grid-row:1/3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:28px;background:rgba(124,60,255,.12)}.dash30-mini:nth-child(1) i{background:rgba(255,255,255,.08)}.dash30-mini:nth-child(2) i{background:rgba(255,173,82,.16)}.dash30-mini:nth-child(3) i{background:rgba(239,68,68,.16)}.dash30-mini:nth-child(4) i{background:rgba(180,134,219,.18)}.dash30-mini:nth-child(5) i{background:rgba(101,220,98,.16)}.dash30-mini span{text-transform:uppercase;font-size:10px;font-weight:900;color:var(--muted)}.dash30-mini b{font-size:22px;line-height:1;color:var(--text)}
.dash30-info-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:18px}.dash30-info-grid.bottom{grid-template-columns:.8fr .8fr 1.2fr}.dash30-panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px 24px;box-shadow:var(--shadow);overflow:hidden}.dark .dash30-panel{background:rgba(255,255,255,.045)}.dash30-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.dash30-panel-head h3{margin:0;font-size:17px}.dash30-panel-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.dash30-panel-head a{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:900;background:var(--panel2);font-size:11px;color:var(--text)}.dash30-billing-counts{display:flex;flex-wrap:wrap;gap:16px;margin:2px 0 16px}.dash30-billing-counts span{font-size:12px;font-weight:900}.dash30-billing-counts b{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;padding:0 6px;background:#39c568;color:#fff;font-size:11px}.dash30-billing-counts span:nth-child(2) b{background:#f6c30d;color:#172033}.dash30-billing-counts span:nth-child(3) b{background:#f45456;color:#fff}.dash30-table-wrap{overflow:auto}.dash30-table-wrap table{min-width:680px}.compact-panel p{color:var(--muted);line-height:1.6;margin:0}.dash30-activity{display:grid;gap:8px;max-height:270px;overflow:auto}.dash30-activity div{padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel2)}.dash30-activity b{display:block;font-size:12px}.dash30-activity span{display:block;color:var(--muted);font-size:10px;margin:3px 0}.dash30-activity small{display:block;color:var(--text);font-size:11px;line-height:1.45}
body:not(.dark) .dash30-ticket{box-shadow:0 20px 48px rgba(35,78,150,.14)}body:not(.dark) .dash30-finance-card{background:rgba(255,255,255,.86)}body:not(.dark) .dash30-panel,body:not(.dark) .dash30-mini{background:rgba(255,255,255,.90)}body:not(.dark) .dash30-shell{color:#102033}.dark .dash30-ticket.orange{background:linear-gradient(135deg,#ff9c3f,#e77731)}.dark .dash30-ticket.green{background:linear-gradient(135deg,#52dc57,#26b860)}.dark .dash30-ticket.purple{background:linear-gradient(135deg,#a984d3,#8f63c9)}.dark .dash30-ticket.blue{background:linear-gradient(135deg,#6ea2bd,#568faa)}@keyframes dash30Fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1360px){.dash30-ticket-grid,.dash30-customer-grid{gap:14px}.dash30-finance-card{grid-template-columns:1fr;align-items:stretch}.dash30-income-card{min-height:210px}.dash30-chart{max-width:520px}.dash30-info-grid,.dash30-info-grid.bottom{grid-template-columns:1fr}}
@media(max-width:1000px){.dash30-toolbar{grid-template-columns:1fr}.dash30-tools{justify-content:flex-start}.dash30-ticket-grid{grid-template-columns:repeat(2,1fr)}.dash30-customer-grid{grid-template-columns:repeat(2,1fr)}.dash30-partner a{min-width:0;width:100%}}
@media(max-width:640px){.dash30-ticket-grid,.dash30-customer-grid{grid-template-columns:1fr}.dash30-finance-card{padding:18px}.dash30-income-card{padding:66px 20px 20px}.dash30-update{right:16px;top:18px}.dash30-ticket{min-height:96px}.dash30-mini{min-height:96px}.dash30-panel{padding:16px}.dash30-toolbar{gap:10px}}

/* =========================
   V31 - Real-time dashboard + premium light color motifs
   ========================= */
body:not(.dark){
  background:
    radial-gradient(circle at 8% 4%, rgba(35,109,255,.18), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(0,184,255,.22), transparent 28%),
    radial-gradient(circle at 45% 102%, rgba(124,60,255,.12), transparent 34%),
    radial-gradient(circle at 96% 75%, rgba(22,163,74,.10), transparent 24%),
    linear-gradient(145deg,#f8fbff 0%,#eaf3ff 45%,#f6fbff 100%);
}
body:not(.dark)::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background-image:
    linear-gradient(90deg,rgba(35,109,255,.045) 1px,transparent 1px),
    linear-gradient(0deg,rgba(0,184,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.20));
}
body:not(.dark) .sidebar,
body:not(.dark) .topbar{background:rgba(255,255,255,.76);box-shadow:0 16px 50px rgba(37,99,235,.08)}
body:not(.dark) .nav-group{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(235,246,255,.72));box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
body:not(.dark) .nav-group:not(.closed){background:linear-gradient(135deg,rgba(226,242,255,.96),rgba(246,252,255,.88));box-shadow:0 14px 34px rgba(35,109,255,.13)}
body:not(.dark) .nav-group a.active{background:linear-gradient(135deg,rgba(35,109,255,.18),rgba(0,184,255,.20));color:#0b63e8}
body:not(.dark) .dash30-shell{position:relative}.dash31-time-card{padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(35,109,255,.08),rgba(0,184,255,.05));box-shadow:var(--shadow)}
.dark .dash31-time-card{background:linear-gradient(135deg,rgba(35,109,255,.08),rgba(0,184,255,.04))}.live-clock{display:inline-flex!important;align-items:center;gap:8px}.live-clock:after{content:"LIVE";font-size:9px;font-weight:950;letter-spacing:.08em;color:#fff;background:linear-gradient(90deg,#16a34a,#22c55e);padding:3px 7px;border-radius:999px;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.dash31-realtime-row{display:grid;grid-template-columns:1.05fr repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}.dash31-live-badge,.dash31-rt-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--panel);box-shadow:var(--shadow);min-height:72px}.dash31-live-badge{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(35,109,255,.14),rgba(0,184,255,.09))}.dash31-live-badge i{width:18px;height:18px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 8px rgba(34,197,94,.12),0 0 26px rgba(34,197,94,.65);animation:fnsPulse 1.25s infinite ease-in-out}.dash31-live-badge b,.dash31-rt-card strong{display:block;font-size:13px;font-weight:950;color:var(--text)}.dash31-live-badge span,.dash31-rt-card span{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:800}.dash31-live-badge em{font-style:normal;color:var(--primary);font-weight:950}.dash31-rt-card:before{content:"";position:absolute;right:-22px;top:-36px;width:120px;height:120px;border-radius:50%;opacity:.20;background:#fff}.dash31-rt-card.blue{background:linear-gradient(135deg,rgba(35,109,255,.18),rgba(0,184,255,.10))}.dash31-rt-card.green{background:linear-gradient(135deg,rgba(22,163,74,.16),rgba(34,197,94,.10))}.dash31-rt-card.orange{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(251,146,60,.12))}.dash31-rt-card.purple{background:linear-gradient(135deg,rgba(124,60,255,.17),rgba(168,85,247,.10))}.dark .dash31-live-badge,.dark .dash31-rt-card{background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 18px 50px rgba(0,0,0,.24)}
@keyframes fnsPulse{0%,100%{transform:scale(.92);opacity:.82}50%{transform:scale(1.08);opacity:1}}
body:not(.dark) .dash30-ticket{box-shadow:0 24px 55px rgba(38,91,170,.18)}
body:not(.dark) .dash30-ticket.orange{background:linear-gradient(135deg,#ff9f43,#ff7f50 55%,#ffb36b)}body:not(.dark) .dash30-ticket.green{background:linear-gradient(135deg,#22c55e,#4ade80 58%,#86efac)}body:not(.dark) .dash30-ticket.purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa 58%,#c4b5fd)}body:not(.dark) .dash30-ticket.blue{background:linear-gradient(135deg,#0ea5e9,#38bdf8 58%,#7dd3fc)}
body:not(.dark) .dash30-finance-card{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(235,246,255,.84));box-shadow:0 25px 70px rgba(37,99,235,.12),inset 0 0 0 1px rgba(255,255,255,.65)}
body:not(.dark) .dash30-finance-card:before{content:"";position:absolute}.dash30-finance-card{position:relative;overflow:hidden}.dash30-finance-card:after{content:"";position:absolute;right:-120px;bottom:-160px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,255,.14),transparent 66%);pointer-events:none}.dash30-finance-card>*{position:relative;z-index:1}
body:not(.dark) .dash30-income-card{background:linear-gradient(135deg,#2563eb,#0ea5e9 52%,#7c3cff);box-shadow:0 24px 60px rgba(37,99,235,.26)}
body:not(.dark) .dash30-mini,body:not(.dark) .dash30-panel{background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(240,248,255,.86));box-shadow:0 22px 56px rgba(35,78,150,.10),inset 0 0 0 1px rgba(255,255,255,.66)}
body:not(.dark) .dash30-mini:hover,body:not(.dark) .dash31-rt-card:hover{transform:translateY(-2px);box-shadow:0 28px 64px rgba(35,109,255,.15)}.dash30-mini,.dash31-rt-card{transition:transform .18s ease,box-shadow .18s ease}
body:not(.dark) .dash30-chart{background:linear-gradient(180deg,rgba(35,109,255,.04),rgba(0,184,255,.02));border-radius:14px;padding-left:10px;padding-right:10px}
body:not(.dark) .dash30-panel-head a,body:not(.dark) .quick-grid a{background:linear-gradient(135deg,rgba(35,109,255,.09),rgba(0,184,255,.07));color:#155bc7}
@media(max-width:1280px){.dash31-realtime-row{grid-template-columns:repeat(2,minmax(0,1fr))}.dash31-live-badge{grid-column:1/-1}}
@media(max-width:720px){.dash31-realtime-row{grid-template-columns:1fr}.dash31-live-badge,.dash31-rt-card{min-height:64px}.dash31-time-card{padding:9px}}

/* v32 - dashboard clean layout + colorful light mode motifs */
.dashboard-v32-clean{grid-template-columns:1.35fr .85fr;align-items:start}
.dash32-wide-panel,.dash32-activity-panel{min-height:260px;position:relative;overflow:hidden}
.dash32-wide-panel:before,.dash32-activity-panel:before{content:"";position:absolute;inset:auto -80px -110px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,255,.16),transparent 64%);pointer-events:none}
.dash32-activity-panel:before{inset:-110px auto auto -90px;background:radial-gradient(circle,rgba(124,60,255,.16),transparent 64%)}
body:not(.dark){background:
  radial-gradient(circle at 8% 8%,rgba(0,184,255,.22),transparent 26%),
  radial-gradient(circle at 72% 0%,rgba(124,60,255,.16),transparent 30%),
  radial-gradient(circle at 94% 46%,rgba(34,197,94,.14),transparent 26%),
  radial-gradient(circle at 35% 100%,rgba(245,158,11,.14),transparent 30%),
  linear-gradient(135deg,#f7fbff 0%,#eef7ff 38%,#f5f1ff 68%,#ecfbff 100%)}
body:not(.dark) .main{position:relative;overflow:hidden}
body:not(.dark) .main:before{content:"";position:fixed;inset:64px 0 auto var(--sidebar);height:230px;background:
  linear-gradient(115deg,rgba(35,109,255,.12),rgba(0,184,255,.10),rgba(124,60,255,.10),rgba(22,163,74,.08));
  clip-path:polygon(0 0,100% 0,100% 68%,72% 90%,40% 72%,0 100%);pointer-events:none;z-index:-1}
body:not(.dark) .sidebar{background:
  radial-gradient(circle at 10% 0,rgba(0,184,255,.14),transparent 26%),
  radial-gradient(circle at 96% 28%,rgba(124,60,255,.12),transparent 28%),
  linear-gradient(180deg,rgba(255,255,255,.94),rgba(237,248,255,.88));
  box-shadow:12px 0 38px rgba(30,86,160,.12)}
body:not(.dark) .topbar{background:linear-gradient(120deg,rgba(255,255,255,.86),rgba(240,249,255,.78),rgba(246,241,255,.72));box-shadow:0 10px 32px rgba(35,78,150,.08)}
body:not(.dark) .nav-group{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(240,249,255,.70));box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
body:not(.dark) .nav-group:not(.closed){background:linear-gradient(135deg,rgba(219,239,255,.96),rgba(234,243,255,.86));box-shadow:0 16px 36px rgba(35,109,255,.13)}
body:not(.dark) .nav-group a.active{background:linear-gradient(135deg,#d7efff,#dff1ff 48%,#e9ddff);color:#0b62d8;box-shadow:inset 0 0 0 1px rgba(35,109,255,.20),0 8px 20px rgba(35,109,255,.10)}
body:not(.dark) .dash30-panel,body:not(.dark) .dash30-mini,body:not(.dark) .dash31-live-badge,body:not(.dark) .dash31-rt-card,body:not(.dark) .dash30-search,body:not(.dark) .dash30-tools a,body:not(.dark) .quick,body:not(.dark) .theme-toggle,body:not(.dark) .user-chip{background:
  linear-gradient(135deg,rgba(255,255,255,.94),rgba(237,248,255,.76));
  border-color:rgba(165,202,245,.72);box-shadow:0 22px 56px rgba(35,78,150,.12),inset 0 0 0 1px rgba(255,255,255,.72)}
body:not(.dark) .dash30-panel:nth-of-type(2n),body:not(.dark) .dash30-mini:nth-child(2n){background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(244,240,255,.82))}
body:not(.dark) .dash30-panel:nth-of-type(3n),body:not(.dark) .dash30-mini:nth-child(3n){background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(236,253,245,.80))}
body:not(.dark) .dash30-panel:after{content:"";position:absolute;right:-72px;top:-74px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(35,109,255,.10),transparent 64%);pointer-events:none}
body:not(.dark) .dash30-table-wrap table td{background:rgba(255,255,255,.68)}
body:not(.dark) .dash30-activity div{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(239,248,255,.62));box-shadow:0 10px 24px rgba(35,78,150,.08)}
body:not(.dark) .dash30-customer-grid{position:relative}
body:not(.dark) .dash30-customer-grid:before{content:"";position:absolute;inset:-18px -16px -18px -16px;border-radius:28px;background:linear-gradient(90deg,rgba(35,109,255,.06),rgba(0,184,255,.05),rgba(124,60,255,.05),rgba(34,197,94,.04));z-index:-1}
@media(max-width:1360px){.dashboard-v32-clean{grid-template-columns:1fr}.dash32-activity-panel{min-height:auto}}
@media(max-width:760px){body:not(.dark) .main:before{left:0}.dashboard-v32-clean{grid-template-columns:1fr}}

/* v33 - dashboard panels aligned + sidebar logged-in user card */
.sidebar{display:flex;flex-direction:column;gap:0;}
.sidebar .nav{flex:1;min-height:0;overflow:auto;padding-bottom:12px;}
.sidebar-user-card{margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));box-shadow:0 16px 34px rgba(2,6,23,.18);overflow:hidden;position:relative;}
.sidebar-user-card:before{content:"";position:absolute;right:-32px;top:-34px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(35,109,255,.22),transparent 64%);pointer-events:none;}
.side-user-photo{position:relative;z-index:1;width:48px;height:48px;min-width:48px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,.55);background:linear-gradient(135deg,var(--primary),var(--purple));box-shadow:0 12px 26px rgba(2,6,23,.20);}
.side-user-initial{display:grid;place-items:center;color:#fff;font-weight:950;font-size:20px;}
.side-user-meta{position:relative;z-index:1;min-width:0;line-height:1.25;}
.side-user-meta b{display:block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:950;color:var(--text);}
.side-user-meta span{display:block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;font-size:10px;font-weight:800;color:var(--muted);}
body:not(.dark) .sidebar-user-card{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(232,245,255,.76) 45%,rgba(244,236,255,.72));border-color:rgba(165,202,245,.72);box-shadow:0 18px 42px rgba(35,78,150,.12),inset 0 0 0 1px rgba(255,255,255,.72);}
body:not(.dark) .sidebar-user-card:before{background:radial-gradient(circle,rgba(124,60,255,.20),transparent 64%);}
body:not(.dark) .side-user-photo{border-color:#fff;box-shadow:0 14px 30px rgba(35,78,150,.16);}
.dashboard-v32-clean{align-items:stretch;grid-template-columns:1.35fr .85fr;}
.dash32-wide-panel,.dash32-activity-panel{height:100%;min-height:330px;display:flex;flex-direction:column;}
.dash32-wide-panel .dash30-table-wrap{flex:1;min-height:0;}
.dash32-activity-panel .dash30-activity{flex:1;max-height:none;min-height:0;overflow:auto;padding-right:4px;}
body:not(.dark) .dash32-wide-panel{background:
  radial-gradient(circle at 93% 92%,rgba(0,184,255,.16),transparent 32%),
  radial-gradient(circle at 10% 5%,rgba(35,109,255,.10),transparent 28%),
  linear-gradient(135deg,rgba(255,255,255,.96),rgba(237,248,255,.78));}
body:not(.dark) .dash32-activity-panel{background:
  radial-gradient(circle at 0% 4%,rgba(124,60,255,.14),transparent 30%),
  radial-gradient(circle at 100% 92%,rgba(245,158,11,.10),transparent 30%),
  linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,240,255,.78));}
body:not(.dark) .main:after{content:"";position:fixed;right:18px;bottom:20px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,255,.12),transparent 66%);pointer-events:none;z-index:-1;}
@media(max-width:1360px){.dashboard-v32-clean{grid-template-columns:1fr}.dash32-wide-panel,.dash32-activity-panel{min-height:300px}}
@media(max-width:760px){.sidebar-user-card{margin-top:12px}.side-user-meta b,.side-user-meta span{max-width:150px}.dash32-wide-panel,.dash32-activity-panel{min-height:auto}}

/* V34 user upload status */
.card-head-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.card-head-line h3{margin:0 0 4px}.card-head-line p{margin:0}.upload-status-card{margin-top:18px;border-radius:16px;border:1px solid var(--line);padding:14px;background:var(--panel2);display:grid;gap:6px}.upload-status-card b{font-size:14px}.upload-status-card span{font-size:12px;color:var(--muted);word-break:break-all}.upload-status-card.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}.upload-status-card.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}

/* v35 user actions */
.user-photo-mini{width:38px;height:38px;object-fit:cover;border-radius:10px;border:1px solid var(--line);box-shadow:0 8px 18px rgba(2,6,23,.14)}
.user-photo-empty{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-weight:900;border:1px solid rgba(255,255,255,.35)}
.user-photo-preview{width:72px;height:72px;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:0 12px 28px rgba(2,6,23,.18)}
.current-photo-row{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(59,130,246,.08)}
.current-photo-row span{font-weight:800;color:var(--muted)}
.user-table th:first-child,.user-table td:first-child{width:62px;text-align:center}
.row-actions .badge.soft{padding:8px 12px;border-radius:999px;background:rgba(148,163,184,.18);color:var(--muted);font-weight:800}

/* V37 Landing Page manager inside billing */
.landing-manager-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;overflow:hidden;position:relative;background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(14,165,233,.14),rgba(139,92,246,.13));}
.landing-manager-hero:before{content:"";position:absolute;inset:-45%;background:radial-gradient(circle at 15% 20%,rgba(34,211,238,.22),transparent 26%),radial-gradient(circle at 85% 10%,rgba(124,58,237,.20),transparent 28%),radial-gradient(circle at 65% 85%,rgba(16,185,129,.18),transparent 28%);pointer-events:none;}
.landing-manager-hero>*{position:relative;z-index:1}.landing-kicker{display:inline-flex;border:1px solid var(--border);background:rgba(14,165,233,.10);color:var(--cyan);padding:7px 12px;border-radius:999px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;font-size:12px;margin-bottom:10px}.landing-manager-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.landing-admin-grid{margin-top:18px}.landing-card-wide{min-height:100%}.landing-preview-box{background:linear-gradient(160deg,rgba(14,165,233,.10),rgba(139,92,246,.08),rgba(16,185,129,.08));}.landing-preview-list{display:grid;gap:14px}.landing-preview-list>div{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.04)}.landing-preview-list img{width:100%;max-height:86px;object-fit:cover;border-radius:14px;border:1px solid var(--border)}.landing-preview-list span{color:var(--muted)}.landing-mini-list{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:4px}.landing-mini-list>div{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.04)}.landing-mini-list img{width:72px;height:48px;object-fit:cover;border-radius:12px;border:1px solid var(--border);flex:none}.landing-mini-list span{display:grid;gap:3px;min-width:0;flex:1}.landing-mini-list small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.landing-mini-list form{margin:0;display:inline-flex}.landing-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-height:210px;overflow:auto}.landing-chip-list form{margin:0;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.04);max-width:100%}.landing-chip-list button{width:20px;height:20px;line-height:18px;border-radius:999px;border:0;background:rgba(239,68,68,.18);color:#fecaca;font-weight:900;cursor:pointer}.landing-chip-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.form-grid.compact{gap:12px}.form-grid .check{display:flex;align-items:center;gap:10px;min-height:46px}.form-grid .check input{width:20px;height:20px;accent-color:#0ea5e9}html[data-theme="light"] .landing-manager-hero, body.light .landing-manager-hero{background:linear-gradient(135deg,rgba(191,219,254,.86),rgba(221,214,254,.72),rgba(204,251,241,.74));box-shadow:0 22px 70px rgba(59,130,246,.18)}html[data-theme="light"] .landing-preview-box, body.light .landing-preview-box{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(224,242,254,.72),rgba(243,232,255,.70))}.landing-manager-hero h3{font-size:28px;margin:4px 0 8px}.landing-manager-hero p{max-width:860px;color:var(--muted);line-height:1.7}@media(max-width:1100px){.landing-manager-hero{align-items:flex-start;flex-direction:column}.landing-admin-grid.grid.two,.landing-admin-grid.grid.three{grid-template-columns:1fr}.landing-preview-list>div{grid-template-columns:1fr}.landing-preview-list img{max-height:160px}}

/* V40 Payment mode + Duitku + Invoice */
.billing-mode-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}.billing-mode-card{position:relative;overflow:hidden;border-radius:22px;padding:20px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(34,147,255,.16),rgba(0,213,255,.08));box-shadow:var(--shadow)}.billing-mode-card:after{content:"";position:absolute;right:-35px;top:-45px;width:130px;height:130px;border-radius:999px;background:rgba(255,255,255,.22)}.billing-mode-card b{display:block;font-size:20px;margin-bottom:8px}.billing-mode-card span{display:block;color:var(--muted);line-height:1.55}.billing-mode-card.prepaid{background:linear-gradient(135deg,rgba(255,158,62,.26),rgba(255,210,73,.10))}.billing-mode-card.postpaid{background:linear-gradient(135deg,rgba(35,216,107,.24),rgba(35,147,255,.08))}.billing-mode-card.renew{background:linear-gradient(135deg,rgba(147,89,255,.24),rgba(0,213,255,.10))}.badge.billing-prepaid{background:#fff1d8;color:#9a5b00}.badge.billing-postpaid{background:#dfffe8;color:#087832}.badge.billing-renew{background:#eee4ff;color:#5b25bd}.gateway-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:18px 0;padding:26px;border-radius:26px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(35,147,255,.18),rgba(0,213,255,.10),rgba(147,89,255,.12));box-shadow:var(--shadow)}.gateway-hero h3{font-size:28px;margin:8px 0}.gateway-hero p{color:var(--muted);max-width:850px}.gateway-status{min-width:170px;border-radius:22px;padding:18px;text-align:center;background:rgba(8,21,38,.75);color:white;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}body.light .gateway-status{background:linear-gradient(135deg,#0f6fff,#00b8ff)}.gateway-status b{display:block;font-size:24px}.gateway-status span{font-weight:800;opacity:.8}.invoice-paper{max-width:980px;margin:22px auto;padding:34px;border-radius:28px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow)}.invoice-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:22px}.invoice-head h2{font-size:34px;margin:0}.invoice-head p{font-weight:900;margin:4px 0}.invoice-no{text-align:right}.invoice-no b{display:block;font-size:20px;margin-bottom:10px}.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.invoice-grid>div{border-radius:18px;background:rgba(35,147,255,.08);padding:18px;border:1px solid var(--border)}.invoice-grid b{display:block;margin-bottom:8px}.invoice-grid p{color:var(--muted);line-height:1.65}.invoice-items{width:100%;border-collapse:separate;border-spacing:0 8px}.invoice-items th{text-align:left;color:var(--muted);text-transform:uppercase;font-size:12px}.invoice-items td,.invoice-items th{padding:13px}.invoice-items tbody tr,.invoice-items tfoot tr{background:rgba(35,147,255,.08)}.invoice-items tbody td:first-child,.invoice-items tfoot th:first-child{border-radius:14px 0 0 14px}.invoice-items tbody td:last-child,.invoice-items tfoot th:last-child{border-radius:0 14px 14px 0}.invoice-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:22px}.gateway-hero+.grid input[readonly]{cursor:pointer}.badge.pending{background:#fff3cd;color:#8a5a00}.badge.success,.badge.paid{background:#d9ffe8;color:#087d36}.badge.failed,.badge.expired{background:#ffe1e1;color:#9b1111}.badge.none{background:#e8eef7;color:#50607a}@media(max-width:1000px){.billing-mode-hero{grid-template-columns:1fr}.gateway-hero{display:block}.gateway-status{margin-top:15px}.invoice-grid{grid-template-columns:1fr}.invoice-head{display:block}.invoice-no{text-align:left;margin-top:15px}}@media print{.sidebar,.topbar,.no-print,.alert{display:none!important}.main{margin:0!important;padding:0!important}.invoice-paper{box-shadow:none;border:0;margin:0;max-width:none}.invoice-head h2{color:#000}body{background:#fff!important;color:#000!important}}

/* V41 Invoice A4 Premium - model kuitansi ISP */
.invoice-a4-wrap{padding:20px 10px 40px}.invoice-toolbar{max-width:210mm;margin:0 auto 14px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.invoice-a4{width:210mm;min-height:297mm;margin:0 auto;background:#fff;color:#111827;padding:16mm 16mm 12mm;border-radius:0;box-shadow:0 24px 70px rgba(0,0,0,.22);font-family:Arial,Helvetica,sans-serif;line-height:1.35}.invoice-a4 *{box-sizing:border-box}.invoice-a4-header{display:grid;grid-template-columns:72mm 1fr;align-items:start;gap:10mm}.invoice-logo-box{height:32mm;display:flex;align-items:center}.invoice-logo-box img{max-width:58mm;max-height:28mm;object-fit:contain}.invoice-logo-fallback{width:52mm;height:24mm;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#0b78ff,#00d5ff);color:#fff;font-size:28px;font-weight:900;letter-spacing:1px}.invoice-company{text-align:right}.invoice-company h1{font-size:17px;line-height:1.2;margin:2px 0 5px;font-weight:900;color:#000}.invoice-company p{font-size:9.5px;margin:1px 0;color:#111}.invoice-a4-line{height:1px;background:#d8dee8;margin:10mm 0 8mm}.invoice-top-row{display:grid;grid-template-columns:1fr 80mm;align-items:start;gap:12mm;margin-bottom:9mm}.invoice-status{font-size:21px;font-weight:900;margin-top:16mm}.invoice-status.paid{color:#12a13a}.invoice-status.pending{color:#e0a100}.invoice-status.overdue{color:#d71920}.invoice-number-card{border:1.5px solid #111;padding:3mm 4mm 4mm;background:#fff}.invoice-number-card h2{text-align:center;font-size:13px;font-weight:900;margin:0 0 2mm;color:#000}.invoice-mini-line{height:1px;background:#111;margin:0 0 2.5mm}.invoice-number-card table{width:100%;border-collapse:collapse}.invoice-number-card td{font-size:9px;padding:1px 0;color:#111}.invoice-number-card td:first-child{width:27mm}.invoice-customer-block{font-size:10.5px;margin-bottom:7mm}.invoice-customer-block p{margin:1.2px 0;color:#111}.invoice-customer-block h3{font-size:12px;margin:1px 0 2px;text-transform:uppercase;color:#111}.invoice-section-title{font-size:11px;font-weight:900;letter-spacing:.4px;margin:6mm 0 3mm;padding:3mm 4mm;border-left:3px solid #111;background:#f1f1f1;color:#111}.invoice-a4-table,.invoice-payment-table{width:100%;border-collapse:collapse;margin-bottom:4mm}.invoice-a4-table th,.invoice-a4-table td,.invoice-payment-table th,.invoice-payment-table td{border:1px solid #d7dde6;padding:3.2mm 4mm;font-size:10px;color:#111}.invoice-a4-table th,.invoice-payment-table th{background:#fafafa;font-size:9.5px;font-weight:900}.invoice-a4-table thead th:first-child{text-align:left}.invoice-a4-table thead th:last-child{text-align:right}.invoice-a4-table td small{font-size:8.8px;color:#333}.invoice-a4-table .right,.invoice-payment-table .right{text-align:right}.invoice-a4-table tfoot th{font-size:10px;font-weight:900;background:#fbfbfb}.invoice-terbilang{border:1px dashed #ffbf23;background:#fff8dc;padding:3.2mm 4mm;font-size:10px;margin:2mm 0 5mm;color:#222}.invoice-payment-table th,.invoice-payment-table td{text-align:center}.invoice-signature{display:grid;grid-template-columns:1fr 54mm;gap:10mm;margin-top:16mm;align-items:end}.invoice-sign-box{text-align:center;font-size:10px;color:#111}.invoice-sign-box p{margin:0 0 4mm}.invoice-watermark-logo{max-width:36mm;max-height:14mm;object-fit:contain;opacity:.28;margin:1mm auto 4mm;display:block}.invoice-sign-mark{font-size:22px;font-weight:900;color:#cbd5e1;margin:4mm 0}.invoice-sign-box h4{font-size:10.5px;margin:0 0 2mm;font-weight:900;color:#111}.invoice-sign-box small{font-size:8px;color:#333}@media(max-width:900px){.invoice-a4-wrap{overflow-x:auto;padding:10px}.invoice-a4{transform-origin:top left;width:210mm;min-width:210mm}.invoice-toolbar{justify-content:flex-start}}@media print{@page{size:A4;margin:0}.sidebar,.topbar,.no-print,.alert,.invoice-toolbar{display:none!important}html,body{background:#fff!important;margin:0!important;padding:0!important}.main{margin:0!important;padding:0!important;background:#fff!important}.invoice-a4-wrap{padding:0!important}.invoice-a4{width:210mm;min-height:297mm;margin:0!important;padding:16mm 16mm 12mm!important;box-shadow:none!important;border:0!important}.invoice-a4-header,.invoice-top-row,.invoice-signature{break-inside:avoid}.invoice-a4-table,.invoice-payment-table{break-inside:avoid}}
/* V42 Customer Portal Login */
.portal-login-box{background:linear-gradient(135deg, rgba(39,124,255,.12), rgba(2,193,255,.10));border-color:rgba(0,174,255,.28)}
.portal-login-box .code-preview{background:linear-gradient(135deg,#1f74ff,#05c5ff);color:#fff}
.login-help-box{margin-top:14px;padding:12px 14px;border:1px solid rgba(43,144,255,.25);border-radius:16px;background:rgba(43,144,255,.10);display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.login-help-box b{color:var(--text)}
.badge.inactive{background:#eef2f7;color:#64748b;border-color:#cbd5e1}
[data-theme="dark"] .login-help-box,.dark .login-help-box{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.24)}


/* =========================
   V43 - Portal Pelanggan/Karyawan Super Premium
   ========================= */
.portal43-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:center;padding:24px;margin-bottom:16px;border-radius:28px;border:1px solid rgba(35,109,255,.18);background:radial-gradient(circle at 12% 0,rgba(35,109,255,.25),transparent 32%),radial-gradient(circle at 85% 15%,rgba(0,184,255,.20),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.92),rgba(231,241,255,.82),rgba(244,232,255,.58));box-shadow:0 24px 70px rgba(35,78,150,.14)}body.dark .portal43-hero{background:radial-gradient(circle at 12% 0,rgba(35,109,255,.30),transparent 32%),radial-gradient(circle at 88% 12%,rgba(0,184,255,.22),transparent 30%),linear-gradient(135deg,rgba(15,31,54,.96),rgba(9,24,45,.92),rgba(28,22,60,.78));box-shadow:0 30px 90px rgba(0,0,0,.34)}.portal43-hero:after{content:"";position:absolute;right:-80px;bottom:-100px;width:320px;height:320px;border-radius:50%;background:linear-gradient(135deg,rgba(0,184,255,.25),rgba(124,60,255,.20));filter:blur(2px);pointer-events:none}.portal43-eyebrow{position:relative;z-index:1;display:inline-flex;padding:8px 12px;margin-bottom:10px;border-radius:999px;background:rgba(35,109,255,.12);border:1px solid rgba(35,109,255,.18);color:var(--primary);font-weight:950;letter-spacing:.08em;font-size:11px}.portal43-hero h2{position:relative;z-index:1;margin:0 0 8px;font-size:30px;line-height:1.05;letter-spacing:-.045em}.portal43-hero p{position:relative;z-index:1;max-width:820px;margin:0;color:var(--muted);line-height:1.7;font-weight:650}.portal43-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.portal43-idcard{position:relative;z-index:1;min-height:150px;border-radius:24px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,rgba(8,21,38,.88),rgba(20,42,72,.82));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 20px 50px rgba(0,0,0,.18)}body:not(.dark) .portal43-idcard{background:linear-gradient(135deg,#0f2d5c,#0ea5e9)}.portal43-idcard b{font-size:28px;letter-spacing:-.04em}.portal43-idcard span{font-weight:900;opacity:.86}.portal43-idcard .status,.portal43-ticket-item .status{align-self:flex-start;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:950;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);font-style:normal;text-transform:uppercase}.portal43-idcard .status.active,.portal43-ticket-item .status.closed,.portal43-ticket-item .status.resolved{background:#dcfce7;color:#166534}.portal43-idcard .status.isolated,.portal43-ticket-item .status.urgent{background:#fee2e2;color:#991b1b}.portal43-idcard .status.pending,.portal43-ticket-item .status.open{background:#fff7d6;color:#975a00}.portal43-ticket-item .status.progress{background:#dbeafe;color:#1d4ed8}.portal43-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.portal43-stat{position:relative;overflow:hidden;min-height:138px;border-radius:24px;padding:18px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(234,243,255,.84));box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between}.portal43-stat:after{content:"";position:absolute;right:-50px;top:-55px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.34)}body.dark .portal43-stat{background:linear-gradient(135deg,rgba(15,31,54,.96),rgba(9,24,45,.88));box-shadow:0 18px 50px rgba(0,0,0,.24)}.portal43-stat i{font-style:normal;font-size:26px;position:relative;z-index:1}.portal43-stat span{position:relative;z-index:1;color:var(--muted);font-size:12px;font-weight:950;text-transform:uppercase}.portal43-stat b{position:relative;z-index:1;font-size:25px;line-height:1;letter-spacing:-.04em}.portal43-stat small{position:relative;z-index:1;color:var(--muted);font-weight:800}.portal43-stat.blue{background:linear-gradient(135deg,rgba(0,184,255,.22),rgba(35,109,255,.10),rgba(255,255,255,.92))}.portal43-stat.green{background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(0,184,255,.08),rgba(255,255,255,.92))}.portal43-stat.orange{background:linear-gradient(135deg,rgba(255,160,64,.28),rgba(255,213,79,.10),rgba(255,255,255,.92))}.portal43-stat.purple{background:linear-gradient(135deg,rgba(124,60,255,.22),rgba(0,184,255,.08),rgba(255,255,255,.92))}body.dark .portal43-stat.blue,body.dark .portal43-stat.green,body.dark .portal43-stat.orange,body.dark .portal43-stat.purple{background:linear-gradient(135deg,rgba(16,35,62,.98),rgba(11,24,44,.94))}.portal43-main-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:16px;margin-bottom:16px}.portal43-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.portal43-card{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(238,246,255,.82),rgba(245,239,255,.66));box-shadow:var(--shadow);padding:18px}body.dark .portal43-card{background:linear-gradient(145deg,rgba(14,30,52,.96),rgba(9,22,40,.90),rgba(24,20,54,.72));box-shadow:0 22px 70px rgba(0,0,0,.30)}.portal43-card:before{content:"";position:absolute;right:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,255,.16),transparent 66%);pointer-events:none}.portal43-card-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.portal43-card-head h3{margin:0 0 5px;font-size:18px;letter-spacing:-.03em}.portal43-card-head p{margin:0;color:var(--muted);font-size:12px}.portal43-live-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 10px;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;font-weight:950;font-size:11px}.portal43-live-badge.online{background:#dcfce7;color:#166534;border-color:#bbf7d0}.portal43-live-badge.offline{background:#fee2e2;color:#991b1b;border-color:#fecaca}.portal43-traffic-numbers{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 14px}.portal43-traffic-numbers>div{border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.55);padding:12px}body.dark .portal43-traffic-numbers>div{background:rgba(255,255,255,.045)}.portal43-traffic-numbers span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;margin-bottom:6px}.portal43-traffic-numbers b{font-size:18px;letter-spacing:-.03em}.portal43-canvas-wrap{position:relative;z-index:1;height:260px;border-radius:22px;padding:12px;background:linear-gradient(135deg,rgba(12,27,48,.92),rgba(17,38,70,.88));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}.portal43-canvas-wrap canvas{width:100%;height:100%;display:block}.portal43-usage-message{position:relative;z-index:1;margin-top:10px;color:var(--muted);font-size:12px;font-weight:800}.portal43-profile-top{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-bottom:14px}.portal43-profile-top img,.portal43-profile-top>div{width:70px;height:70px;border-radius:18px;object-fit:cover;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;font-size:26px;font-weight:950;flex:none}.portal43-profile-top h3{margin:0;font-size:20px}.portal43-profile-top p{margin:4px 0 0;color:var(--muted)}.portal43-dl{position:relative;z-index:1;display:grid;gap:9px;margin:0}.portal43-dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:15px;background:rgba(255,255,255,.50);border:1px solid var(--line)}body.dark .portal43-dl div{background:rgba(255,255,255,.045)}.portal43-dl dt{color:var(--muted);font-weight:900}.portal43-dl dd{margin:0;font-weight:850;word-break:break-word}.portal43-ticket-form{position:relative;z-index:1}.portal43-ticket-list{position:relative;z-index:1;display:grid;gap:10px;max-height:455px;overflow:auto;padding-right:3px}.portal43-ticket-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.55)}body.dark .portal43-ticket-item{background:rgba(255,255,255,.045)}.portal43-ticket-item b{display:block;margin-bottom:4px}.portal43-ticket-item span{display:block;color:var(--muted);font-size:12px;line-height:1.35}.portal43-ticket-item em{flex:none}.portal43-usage-card{min-height:440px}@media(max-width:1200px){.portal43-stats{grid-template-columns:repeat(2,1fr)}.portal43-main-grid,.portal43-grid-two{grid-template-columns:1fr}.portal43-traffic-numbers{grid-template-columns:repeat(2,1fr)}}@media(max-width:740px){.portal43-hero{grid-template-columns:1fr;padding:18px;border-radius:22px}.portal43-hero h2{font-size:24px}.portal43-idcard{min-height:120px}.portal43-stats{grid-template-columns:1fr}.portal43-stat{min-height:115px}.portal43-card{padding:14px;border-radius:22px}.portal43-traffic-numbers{grid-template-columns:1fr}.portal43-canvas-wrap{height:220px}.portal43-card-head{display:block}.portal43-live-badge{margin-top:10px}.portal43-dl div{grid-template-columns:1fr}.portal43-ticket-item{align-items:flex-start;flex-direction:column}.portal43-actions .btn{width:100%}}

/* =========================
   V44 - Portal pelanggan mobile bottom navigation, no hamburger
   ========================= */
.portal-mobile-bottom-nav{display:none}
@media(max-width:760px){
  body.portal-customer-shell{padding-bottom:92px;scroll-padding-bottom:108px;background:
    radial-gradient(circle at 12% 0,rgba(35,109,255,.20),transparent 28%),
    radial-gradient(circle at 90% 10%,rgba(0,184,255,.18),transparent 30%),
    linear-gradient(180deg,var(--bg),var(--bg2));}
  body.portal-customer-shell .sidebar{display:none!important}
  body.portal-customer-shell .mobile-menu{display:none!important}
  body.portal-customer-shell .main{padding:10px 10px 112px!important;min-height:100vh}
  body.portal-customer-shell .topbar{position:sticky;top:0;z-index:12;min-height:58px;margin:-10px -10px 12px!important;padding:10px 11px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px;border-radius:0 0 24px 24px;background:rgba(244,248,255,.78);box-shadow:0 18px 38px rgba(35,78,150,.14);backdrop-filter:blur(18px)}
  body.dark.portal-customer-shell .topbar{background:rgba(7,17,31,.86);box-shadow:0 18px 40px rgba(0,0,0,.30)}
  body.portal-customer-shell .title-block h1{font-size:17px!important;letter-spacing:-.035em;line-height:1.05}
  body.portal-customer-shell .title-block p{display:none}
  body.portal-customer-shell .top-actions{gap:6px;flex-wrap:nowrap;justify-content:flex-end}
  body.portal-customer-shell .top-actions .quick{display:none!important}
  body.portal-customer-shell .user-chip{display:flex!important;max-width:138px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.72)}
  body.dark.portal-customer-shell .user-chip{background:rgba(255,255,255,.055)}
  body.portal-customer-shell .user-chip img,body.portal-customer-shell .avatar-mini{width:26px;height:26px}
  body.portal-customer-shell .user-chip span{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  body.portal-customer-shell .user-chip small{display:none}
  body.portal-customer-shell .theme-toggle{height:34px;min-width:36px;border-radius:12px}
  body.portal-customer-shell .top-actions>a.btn.ghost{padding:8px 10px;font-size:11px;border-radius:12px}

  .portal-mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:80;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:8px;border-radius:24px;border:1px solid rgba(148,190,245,.62);background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(226,243,255,.76),rgba(244,236,255,.76));box-shadow:0 22px 55px rgba(25,83,170,.24),inset 0 0 0 1px rgba(255,255,255,.70);backdrop-filter:blur(20px)}
  body.dark .portal-mobile-bottom-nav{border-color:rgba(80,125,190,.42);background:linear-gradient(135deg,rgba(11,26,47,.94),rgba(14,31,56,.88),rgba(28,20,58,.82));box-shadow:0 24px 60px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.06)}
  .portal-mobile-bottom-nav a{position:relative;overflow:hidden;display:flex;min-width:0;min-height:56px;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:18px;color:var(--muted);font-weight:950;font-size:10px;letter-spacing:-.02em;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
  .portal-mobile-bottom-nav a:before{content:"";position:absolute;inset:auto 14px 5px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--cyan));opacity:0;transform:scaleX(.35);transition:.2s ease}
  .portal-mobile-bottom-nav a i{position:relative;z-index:1;width:30px;height:30px;border-radius:13px;display:grid;place-items:center;font-style:normal;font-size:17px;background:rgba(35,109,255,.09);color:var(--primary);box-shadow:inset 0 0 0 1px rgba(35,109,255,.10)}
  body.dark .portal-mobile-bottom-nav a i{background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .portal-mobile-bottom-nav a span{position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .portal-mobile-bottom-nav a:hover,.portal-mobile-bottom-nav a:focus{transform:translateY(-2px);color:var(--text);background:linear-gradient(135deg,rgba(35,109,255,.12),rgba(0,184,255,.10));box-shadow:0 12px 24px rgba(35,109,255,.14)}
  .portal-mobile-bottom-nav a:hover:before,.portal-mobile-bottom-nav a:focus:before{opacity:1;transform:scaleX(1)}

  body.portal-customer-shell .portal43-hero{margin-top:4px;padding:18px!important;border-radius:24px!important;gap:14px;background:
    radial-gradient(circle at 0 0,rgba(35,109,255,.24),transparent 42%),
    radial-gradient(circle at 98% 0,rgba(0,184,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(231,244,255,.84),rgba(244,236,255,.70))!important;box-shadow:0 20px 48px rgba(30,90,180,.15)!important}
  body.dark.portal-customer-shell .portal43-hero{background:
    radial-gradient(circle at 0 0,rgba(35,109,255,.30),transparent 42%),
    radial-gradient(circle at 100% 10%,rgba(0,184,255,.18),transparent 35%),
    linear-gradient(145deg,rgba(12,28,50,.96),rgba(8,20,38,.94),rgba(28,21,60,.76))!important}
  body.portal-customer-shell .portal43-eyebrow{font-size:10px;padding:7px 10px;margin-bottom:8px}
  body.portal-customer-shell .portal43-hero h2{font-size:25px!important;line-height:1.08;margin-bottom:7px}
  body.portal-customer-shell .portal43-hero p{font-size:12px;line-height:1.58}
  body.portal-customer-shell .portal43-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  body.portal-customer-shell .portal43-actions .btn{width:100%;min-height:40px;border-radius:14px;font-size:11px;padding:9px 10px}
  body.portal-customer-shell .portal43-actions .btn.ok{grid-column:1/-1}
  body.portal-customer-shell .portal43-idcard{min-height:108px!important;border-radius:20px;padding:15px;background:linear-gradient(135deg,#0b63e8,#00b8ff 62%,#7c3cff)!important}
  body.portal-customer-shell .portal43-idcard b{font-size:22px}

  body.portal-customer-shell .portal43-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px}
  body.portal-customer-shell .portal43-stat{min-height:112px!important;border-radius:21px;padding:14px;box-shadow:0 18px 42px rgba(35,78,150,.12)}
  body.portal-customer-shell .portal43-stat i{font-size:23px}.portal43-stat span{font-size:10px}.portal43-stat b{font-size:18px}.portal43-stat small{font-size:10px;line-height:1.25}
  body.portal-customer-shell .portal43-main-grid,body.portal-customer-shell .portal43-grid-two{grid-template-columns:1fr!important;gap:12px!important;margin-bottom:12px}
  body.portal-customer-shell .portal43-card{border-radius:24px!important;padding:14px!important;box-shadow:0 20px 52px rgba(35,78,150,.12)}
  body.portal-customer-shell .portal43-card-head{display:flex!important;align-items:flex-start;gap:10px;margin-bottom:12px}
  body.portal-customer-shell .portal43-card-head h3{font-size:16px!important;line-height:1.18}
  body.portal-customer-shell .portal43-card-head p{font-size:11px;line-height:1.45}
  body.portal-customer-shell .portal43-live-badge{flex:none;margin-top:0;font-size:10px;padding:7px 9px}
  body.portal-customer-shell .portal43-traffic-numbers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.portal-customer-shell .portal43-traffic-numbers>div{border-radius:17px;padding:11px;background:rgba(255,255,255,.58)}
  body.dark.portal-customer-shell .portal43-traffic-numbers>div{background:rgba(255,255,255,.045)}
  body.portal-customer-shell .portal43-traffic-numbers b{font-size:15px}
  body.portal-customer-shell .portal43-canvas-wrap{height:224px!important;border-radius:20px;padding:10px;background:linear-gradient(145deg,#07182f,#102d58 58%,#22184f)}
  body.portal-customer-shell .portal43-profile-top img,body.portal-customer-shell .portal43-profile-top>div{width:58px;height:58px;border-radius:16px}
  body.portal-customer-shell .portal43-profile-top h3{font-size:18px}.portal43-profile-top p{font-size:12px}
  body.portal-customer-shell .portal43-dl{gap:8px}.portal43-dl div{grid-template-columns:1fr!important;padding:10px;border-radius:15px}.portal43-dl dt{font-size:11px}.portal43-dl dd{font-size:12px}
  body.portal-customer-shell .portal43-ticket-list{max-height:none;overflow:visible;padding-right:0}
  body.portal-customer-shell .portal43-ticket-item{border-radius:17px;padding:11px;gap:8px}
  body.portal-customer-shell #portalInvoices .table-wrap{overflow:auto;margin:0 -3px;padding-bottom:8px}
  body.portal-customer-shell #portalInvoices table{min-width:680px}
}
@media(max-width:760px){
  .portal-mobile-bottom-nav a.active{color:var(--text);background:linear-gradient(135deg,rgba(35,109,255,.18),rgba(0,184,255,.13));box-shadow:0 12px 26px rgba(35,109,255,.16)}
  .portal-mobile-bottom-nav a.active:before{opacity:1;transform:scaleX(1)}
  .portal-mobile-bottom-nav a.active i{color:#fff;background:linear-gradient(135deg,var(--primary),var(--cyan));box-shadow:0 8px 18px rgba(35,109,255,.28)}
}

/* =========================
   V45 - Portal HP tampil per menu, bukan scroll antar menu
   ========================= */
@media(max-width:760px){
  body.portal-staff-shell,
  body.portal-customer-shell{padding-bottom:92px;scroll-padding-top:76px;scroll-padding-bottom:108px;overflow-x:hidden}
  body.portal-staff-shell{background:
    radial-gradient(circle at 10% 0,rgba(35,109,255,.20),transparent 28%),
    radial-gradient(circle at 95% 10%,rgba(0,184,255,.18),transparent 30%),
    linear-gradient(180deg,var(--bg),var(--bg2));}
  body.portal-staff-shell .sidebar{display:none!important}
  body.portal-staff-shell .mobile-menu{display:none!important}
  body.portal-staff-shell .main{padding:10px 10px 112px!important;min-height:100vh;max-width:100vw;overflow-x:hidden}
  body.portal-staff-shell .topbar{position:sticky;top:0;z-index:12;min-height:58px;margin:-10px -10px 12px!important;padding:10px 11px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px;border-radius:0 0 24px 24px;background:rgba(244,248,255,.78);box-shadow:0 18px 38px rgba(35,78,150,.14);backdrop-filter:blur(18px)}
  body.dark.portal-staff-shell .topbar{background:rgba(7,17,31,.86);box-shadow:0 18px 40px rgba(0,0,0,.30)}
  body.portal-staff-shell .title-block h1{font-size:17px!important;letter-spacing:-.035em;line-height:1.05}
  body.portal-staff-shell .title-block p{display:none}
  body.portal-staff-shell .top-actions{gap:6px;flex-wrap:nowrap;justify-content:flex-end}
  body.portal-staff-shell .top-actions .quick{display:none!important}
  body.portal-staff-shell .user-chip{display:flex!important;max-width:138px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.72)}
  body.dark.portal-staff-shell .user-chip{background:rgba(255,255,255,.055)}
  body.portal-staff-shell .user-chip img,body.portal-staff-shell .avatar-mini{width:26px;height:26px}
  body.portal-staff-shell .user-chip span{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  body.portal-staff-shell .user-chip small{display:none}
  body.portal-staff-shell .theme-toggle{height:34px;min-width:36px;border-radius:12px}
  body.portal-staff-shell .top-actions>a.btn.ghost{padding:8px 10px;font-size:11px;border-radius:12px}

  .portal-mobile-bottom-nav.portal-staff-bottom-nav{grid-template-columns:repeat(4,1fr)}

  body.portal-mobile-paged .portal-mobile-page{display:none!important;opacity:0;transform:translateY(8px)}
  body.portal-mobile-paged .portal-mobile-page.is-active{display:block!important;opacity:1;transform:translateY(0);animation:portalPageIn .18s ease both}
  body.portal-mobile-paged .portal43-stats.portal-mobile-page.is-active{display:grid!important}
  body.portal-mobile-paged .portal43-main-grid:not(.has-active-portal-page),
  body.portal-mobile-paged .portal43-grid-two:not(.has-active-portal-page){display:none!important}
  body.portal-mobile-paged .portal43-main-grid.has-active-portal-page,
  body.portal-mobile-paged .portal43-grid-two.has-active-portal-page{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-bottom:12px!important}

  body.portal-staff-shell .portal43-hero{margin-top:4px;padding:18px!important;border-radius:24px!important;gap:14px;background:
    radial-gradient(circle at 0 0,rgba(35,109,255,.24),transparent 42%),
    radial-gradient(circle at 98% 0,rgba(0,184,255,.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(231,244,255,.84),rgba(244,236,255,.70))!important;box-shadow:0 20px 48px rgba(30,90,180,.15)!important}
  body.dark.portal-staff-shell .portal43-hero{background:
    radial-gradient(circle at 0 0,rgba(35,109,255,.30),transparent 42%),
    radial-gradient(circle at 100% 10%,rgba(0,184,255,.18),transparent 35%),
    linear-gradient(145deg,rgba(12,28,50,.96),rgba(8,20,38,.94),rgba(28,21,60,.76))!important}
  body.portal-staff-shell .portal43-eyebrow{font-size:10px;padding:7px 10px;margin-bottom:8px}
  body.portal-staff-shell .portal43-hero h2{font-size:25px!important;line-height:1.08;margin-bottom:7px}
  body.portal-staff-shell .portal43-hero p{font-size:12px;line-height:1.58}
  body.portal-staff-shell .portal43-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  body.portal-staff-shell .portal43-actions .btn{width:100%;min-height:40px;border-radius:14px;font-size:11px;padding:9px 10px}
  body.portal-staff-shell .portal43-actions .btn:nth-child(3){grid-column:1/-1}
  body.portal-staff-shell .portal43-idcard{min-height:108px!important;border-radius:20px;padding:15px;background:linear-gradient(135deg,#0b63e8,#00b8ff 62%,#7c3cff)!important}
  body.portal-staff-shell .portal43-idcard b{font-size:22px}
  body.portal-staff-shell .portal43-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:12px}
  body.portal-staff-shell .portal43-stat{min-height:112px!important;border-radius:21px;padding:14px;box-shadow:0 18px 42px rgba(35,78,150,.12)}
  body.portal-staff-shell .portal43-card{border-radius:24px!important;padding:14px!important;box-shadow:0 20px 52px rgba(35,78,150,.12)}
  body.portal-staff-shell .portal43-ticket-list{max-height:none;overflow:visible;padding-right:0}
  body.portal-staff-shell .portal43-ticket-item{border-radius:17px;padding:11px;gap:8px;align-items:flex-start;flex-direction:column}
  body.portal-staff-shell .staff-profile-actions{grid-template-columns:1fr!important}

  @keyframes portalPageIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
}


/* V47: Premium realtime moving usage chart */
.portal43-usage-card{position:relative;overflow:hidden}
.portal43-usage-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 10%,rgba(56,189,248,.10),transparent 28%),radial-gradient(circle at 90% 18%,rgba(167,139,250,.10),transparent 25%)}
.portal43-usage-card .portal43-card-head{align-items:center}
.portal43-usage-card .portal43-card-head h3{font-size:20px;font-weight:950;letter-spacing:-.045em}
.portal43-usage-card .portal43-card-head p{font-weight:800}
.portal43-live-badge{position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(2,132,199,.14)}
.portal43-live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:fnsLivePulse 1.25s infinite;display:inline-block}
.portal43-live-badge.loading{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}
.portal43-live-badge.online{box-shadow:0 10px 30px rgba(22,163,74,.18)}
@keyframes fnsLivePulse{0%{box-shadow:0 0 0 0 currentColor;opacity:1}70%{box-shadow:0 0 0 7px transparent;opacity:.68}100%{box-shadow:0 0 0 0 transparent;opacity:1}}
.portal43-traffic-numbers>div{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.portal43-traffic-numbers>div:after{content:"";position:absolute;right:-26px;top:-34px;width:82px;height:82px;border-radius:50%;background:rgba(56,189,248,.10)}
.portal43-traffic-numbers>div:nth-child(2):after{background:rgba(167,139,250,.13)}
.portal43-traffic-numbers b{position:relative;z-index:1;font-variant-numeric:tabular-nums}
.portal43-canvas-wrap{height:286px!important;padding:8px!important;background:linear-gradient(145deg,#050f20,#0b2a55 58%,#251653)!important;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 24px 60px rgba(15,23,42,.20)!important}
.portal43-canvas-wrap:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.65),rgba(167,139,250,.55),transparent)}
.portal43-canvas-wrap canvas{border-radius:16px;position:relative;z-index:1}
.portal43-usage-message{display:flex;align-items:center;gap:8px;font-weight:900}
.portal43-usage-message:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#a78bfa);box-shadow:0 0 18px rgba(56,189,248,.55)}
@media(max-width:760px){
  body.portal-customer-shell .portal43-usage-card .portal43-card-head h3{font-size:16px}
  body.portal-customer-shell .portal43-canvas-wrap{height:248px!important;border-radius:18px!important;padding:6px!important}
  body.portal-customer-shell .portal43-traffic-numbers{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.portal-customer-shell .portal43-traffic-numbers>div{padding:10px!important}
  body.portal-customer-shell .portal43-traffic-numbers b{font-size:14px!important}
}

/* V48: Dashboard ticket notification badge + panel */
.dash48-tools{position:relative}.dash48-ticket-bell{position:relative}.dash48-ticket-bell.has{background:linear-gradient(135deg,#fff7d6,#fee2e2)!important;border-color:#fbbf24!important;box-shadow:0 14px 40px rgba(245,158,11,.24)!important;animation:dash48BellPulse 1.7s infinite}.dash48-ticket-bell.has em{background:#ef4444!important;color:#fff!important}.dark .dash48-ticket-bell.has{background:linear-gradient(135deg,rgba(127,29,29,.84),rgba(120,53,15,.78))!important;border-color:rgba(251,191,36,.42)!important}.dash48-notification-panel{display:none;margin:10px 0 16px;border:1px solid rgba(35,109,255,.18);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(237,247,255,.74),rgba(255,246,232,.64));box-shadow:0 20px 60px rgba(35,78,150,.12);overflow:hidden}.dark .dash48-notification-panel{background:linear-gradient(135deg,rgba(13,27,48,.96),rgba(13,25,44,.90),rgba(49,31,42,.72));box-shadow:0 22px 70px rgba(0,0,0,.30);border-color:rgba(255,255,255,.08)}.dash48-notification-panel.has-ticket{display:block}.dash48-notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}.dash48-notif-head>div{display:flex;align-items:center;gap:10px;min-width:0}.dash48-notif-head b{font-size:15px}.dash48-notif-head small{display:block;color:var(--muted);font-size:12px;font-weight:800}.dash48-notif-head a{padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;font-weight:950;text-decoration:none;white-space:nowrap}.dash48-pulse-dot{width:12px;height:12px;border-radius:99px;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.55);animation:dash48Dot 1.5s infinite;flex:none}.dash48-notif-list{display:grid;gap:8px;padding:12px}.dash48-notif-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 14px;border-radius:18px;border:1px solid rgba(239,68,68,.12);background:rgba(255,255,255,.62);text-decoration:none;color:inherit}.dark .dash48-notif-item{background:rgba(255,255,255,.045)}.dash48-notif-item:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(35,78,150,.12)}.dash48-notif-item strong{font-size:13px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dash48-notif-item span{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.4}.dash48-notif-item em{grid-row:1;grid-column:2;font-style:normal;padding:5px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:10px;font-weight:950;align-self:start}.dash48-notif-item.urgent em,.dash48-notif-item.high em{background:#fee2e2;color:#991b1b}.dash48-notif-empty{padding:14px;border-radius:18px;background:rgba(255,255,255,.56);border:1px dashed var(--line);color:var(--muted);font-weight:800}.dark .dash48-notif-empty{background:rgba(255,255,255,.04)}@keyframes dash48BellPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes dash48Dot{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}@media(max-width:740px){.dash48-notification-panel{border-radius:20px;margin:8px 0 12px}.dash48-notif-head{align-items:flex-start}.dash48-notif-head>div{align-items:flex-start}.dash48-notif-head small{margin-top:2px}.dash48-notif-item{grid-template-columns:1fr}.dash48-notif-item strong{white-space:normal}.dash48-notif-item em{grid-column:1;grid-row:auto;width:max-content}}

/* FNS V86 ONE ICON THEME TOGGLE */
/* FNS V86: mode toggle satu icon saja */
.fns-theme-toggle-one-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:48px!important;
  min-width:48px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:18px!important;
  line-height:1!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.fns-theme-toggle-one-icon .fns-theme-one-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  font-size:21px!important;
  line-height:1!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
}
@media (max-width: 768px){
  .fns-theme-toggle-one-icon{width:44px!important;min-width:44px!important;height:40px!important;min-height:40px!important;border-radius:16px!important;}
  .fns-theme-toggle-one-icon .fns-theme-one-icon{font-size:20px!important;}
}

/* FNS V87 ONE ICON THEME TOGGLE */
/* FakhiraNet V87 - Paksa tombol mode hanya 1 icon */
.fns-v87-theme-toggle,
.fns-v85-theme-toggle.fns-v87-theme-toggle,
.fns-theme-toggle-one-icon.fns-v87-theme-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  width:50px!important;
  min-width:50px!important;
  max-width:50px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-indent:0!important;
  line-height:1!important;
  font-size:0!important;
  position:relative!important;
}
.fns-v87-theme-toggle::before,
.fns-v87-theme-toggle::after,
.fns-v87-theme-toggle .fns-v85-sun,
.fns-v87-theme-toggle .fns-v85-moon,
.fns-v87-theme-toggle .fns-v85-ico,
.fns-v87-theme-toggle .fns-theme-one-icon{
  content:none!important;
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
}
.fns-v87-theme-toggle > *:not(.fns-v87-mode-icon){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.fns-v87-theme-toggle .fns-v87-mode-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  border-radius:15px!important;
  font-size:22px!important;
  line-height:1!important;
  text-indent:0!important;
  visibility:visible!important;
  opacity:1!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
}
.fns-v87-theme-toggle.fns-v87-light .fns-v87-mode-icon{
  background:linear-gradient(135deg,#fff4a3,#ffb328)!important;
  box-shadow:0 8px 18px rgba(255,176,37,.38)!important;
}
.fns-v87-theme-toggle.fns-v87-dark .fns-v87-mode-icon{
  background:linear-gradient(135deg,#eaf4ff,#78b8ff)!important;
  box-shadow:0 8px 18px rgba(94,162,255,.32)!important;
}
@media (max-width:768px){
  .fns-v87-theme-toggle{width:46px!important;min-width:46px!important;max-width:46px!important;height:40px!important;min-height:40px!important;max-height:40px!important;border-radius:16px!important;}
  .fns-v87-theme-toggle .fns-v87-mode-icon{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;font-size:20px!important;}
}
/* FNS_V101_LIGHT_READABILITY_BEGIN */
/* =========================================================
   FAKHIRA NET Billing - V101 Light Mode Readability Patch
   Tujuan: mode terang tetap terang, teks jelas, tabel tidak abu-abu gelap.
   Aman: CSS only, tidak mengubah database / route / PHP logic.
   ========================================================= */

/* Scope mode terang: aktif kalau halaman tidak sedang memakai class/data dark */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) {
  --fns-light-bg: #f4fbff;
  --fns-light-panel: rgba(255,255,255,.94);
  --fns-light-panel-2: rgba(244,250,255,.98);
  --fns-light-row: #f7fbff;
  --fns-light-row-2: #edf7ff;
  --fns-light-row-hover: #e5f2ff;
  --fns-light-border: rgba(78, 156, 245, .28);
  --fns-light-border-strong: rgba(37, 124, 255, .38);
  --fns-light-text: #10243d;
  --fns-light-muted: #55708e;
  --fns-light-heading: #071c36;
  --fns-blue: #1877ff;
  --fns-cyan: #0db7f0;
  --fns-green: #138a45;
  --fns-red: #c72b42;
  --fns-orange: #a96505;
  color: var(--fns-light-text) !important;
}

/* Background dan panel utama mode terang */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .panel,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .box,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .content-card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .fns-card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .premium-card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,248,255,.94)) !important;
  border-color: var(--fns-light-border) !important;
  color: var(--fns-light-text) !important;
  box-shadow: 0 18px 46px rgba(32, 96, 160, .10) !important;
}

/* Headline, label dan deskripsi tetap jelas di mode terang */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) h1,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) h2,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) h3,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .title,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .page-title,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) label,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .label {
  color: var(--fns-light-heading) !important;
  text-shadow: none !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) p,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) small,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .muted,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .subtitle,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .desc,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .description {
  color: var(--fns-light-muted) !important;
}

/* Tabel dan list pelanggan/tagihan/pembayaran/tiket di mode terang */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .table,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .data-table {
  color: var(--fns-light-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body: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: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:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .data-table thead th {
  background: transparent !important;
  color: #41617f !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  border: 0 !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table tbody tr,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .table tbody tr,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .data-table tbody tr,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .customer-row,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .invoice-row,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .payment-row,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .ticket-row {
  background: linear-gradient(135deg, var(--fns-light-row), var(--fns-light-row-2)) !important;
  color: var(--fns-light-text) !important;
  border: 1px solid rgba(92, 155, 220, .30) !important;
  box-shadow: 0 10px 26px rgba(35, 94, 150, .08) !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table tbody tr:hover,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .customer-row:hover,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .invoice-row:hover,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .payment-row:hover,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .ticket-row:hover {
  background: linear-gradient(135deg, #ffffff, var(--fns-light-row-hover)) !important;
  border-color: var(--fns-light-border-strong) !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table tbody td,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .table tbody td,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .data-table tbody td {
  color: var(--fns-light-text) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table tbody td:first-child {
  border-radius: 14px 0 0 14px !important;
}
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table tbody td:last-child {
  border-radius: 0 14px 14px 0 !important;
}

/* Card menu pelanggan/tagihan/histori/tiket mode terang */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .summary-card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .stat-card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .tab-card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .module-card,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) [class*="quick-card"],
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) [class*="premium-tab"] {
  background: linear-gradient(145deg, #ffffff, #eaf6ff) !important;
  border: 1px solid rgba(58, 145, 245, .30) !important;
  color: var(--fns-light-text) !important;
  box-shadow: 0 14px 32px rgba(36, 115, 200, .11) !important;
}

/* Input/search lebih terang dan jelas */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) input,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) select,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) textarea {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(80, 150, 230, .35) !important;
  color: var(--fns-light-text) !important;
}
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) input::placeholder,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) textarea::placeholder {
  color: #7189a3 !important;
}

/* Tombol tetap kontras */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .btn-danger,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .hapus,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) [class*="delete"],
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) button[name*="delete"],
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) button[value*="delete"] {
  background: linear-gradient(135deg, #fff0f2, #ffdfe5) !important;
  border: 1px solid rgba(212, 54, 76, .45) !important;
  color: #a71932 !important;
  font-weight: 900 !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .btn-warning,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .isolir,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) [class*="isolir"] {
  background: linear-gradient(135deg, #fff8e8, #ffe4ad) !important;
  border: 1px solid rgba(215, 145, 28, .42) !important;
  color: #8a5200 !important;
  font-weight: 900 !important;
}

html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .btn-success,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .aktif,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) [class*="active"] {
  border-color: rgba(18, 160, 86, .32);
}

/* Badge status tetap jelas */
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .badge,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .pill,
html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) .status {
  text-shadow: none !important;
  font-weight: 900 !important;
}

/* Ukuran lebih presisi untuk desktop */
@media (min-width: 1024px) {
  html:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) body:not(.dark):not(.dark-mode):not(.theme-dark):not([data-theme="dark"]) table tbody td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* FNS_V101_LIGHT_READABILITY_END */

/* === FNS V103 LIGHT MODE SERASI START ===
   Mode terang: tabel putih-kebiruan, teks gelap jelas, warna kartu selaras.
   Dipasang di akhir fns-v99-premium.css agar mengalahkan warna abu-abu lama.
*/
:root{
  --fns103-ink:#10243a;
  --fns103-ink2:#263a52;
  --fns103-muted:#5f728a;
  --fns103-line:#cfe4fb;
  --fns103-soft:#f6fbff;
  --fns103-soft2:#edf7ff;
  --fns103-card:#ffffff;
  --fns103-blue:#168bff;
  --fns103-cyan:#07b7e8;
  --fns103-red:#dc3545;
  --fns103-green:#138a52;
  --fns103-orange:#a46400;
}

/* Aktif hanya saat mode terang. Class ini dipasang oleh JS V103. */
body.fns-v103-lightmode{
  color:var(--fns103-ink)!important;
}

body.fns-v103-lightmode .card,
body.fns-v103-lightmode .panel,
body.fns-v103-lightmode .box,
body.fns-v103-lightmode .table-wrap,
body.fns-v103-lightmode .content-card,
body.fns-v103-lightmode .fns-panel,
body.fns-v103-lightmode main .card,
body.fns-v103-lightmode main .panel{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,251,255,.94))!important;
  border:1px solid rgba(179,215,248,.92)!important;
  box-shadow:0 18px 44px rgba(59,119,190,.12)!important;
  color:var(--fns103-ink)!important;
}

/* Card module Pelanggan / Tagihan / Histori / Tiket: terang, tetap premium. */
body.fns-v103-lightmode .fns-v99-premium-tabs{
  gap:14px!important;
}
body.fns-v103-lightmode .fns-v99-tab,
body.fns-v103-lightmode [class*="fns-v99-tab"]{
  background:linear-gradient(135deg,#ffffff 0%,#eef8ff 52%,#e7f4ff 100%)!important;
  border:1px solid #b9dafa!important;
  box-shadow:0 12px 28px rgba(31,111,205,.12)!important;
  color:var(--fns103-ink)!important;
}
body.fns-v103-lightmode .fns-v99-tab b,
body.fns-v103-lightmode [class*="fns-v99-tab"] b{
  color:var(--fns103-ink)!important;
  font-weight:900!important;
}
body.fns-v103-lightmode .fns-v99-tab small,
body.fns-v103-lightmode [class*="fns-v99-tab"] small{
  color:var(--fns103-muted)!important;
}
body.fns-v103-lightmode .fns-v99-tab .ico,
body.fns-v103-lightmode [class*="fns-v99-tab"] .ico{
  background:linear-gradient(135deg,#188cff,#00b9ff)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(22,139,255,.24)!important;
}
body.fns-v103-lightmode .fns-v99-tab .del-chip,
body.fns-v103-lightmode [class*="fns-v99-tab"] .del-chip{
  background:#fff0f3!important;
  color:#bd2b42!important;
  border-color:#ffa6b7!important;
}

/* Header tabel. */
body.fns-v103-lightmode table thead th,
body.fns-v103-lightmode .table thead th,
body.fns-v103-lightmode [class*="table"] thead th,
body.fns-v103-lightmode .table-header,
body.fns-v103-lightmode .table-head{
  color:#7390b3!important;
  background:transparent!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-shadow:none!important;
}

/* Baris tabel pelanggan: ini yang memaksa hilang warna abu-abu gelap. */
body.fns-v103-lightmode table{
  border-collapse:separate!important;
  border-spacing:0 10px!important;
}
body.fns-v103-lightmode table tbody tr{
  background:transparent!important;
  box-shadow:none!important;
}
body.fns-v103-lightmode table tbody td,
body.fns-v103-lightmode .table tbody td,
body.fns-v103-lightmode [class*="table"] tbody td{
  background:linear-gradient(180deg,#ffffff 0%,#f4faff 100%)!important;
  color:var(--fns103-ink)!important;
  border-top:1px solid var(--fns103-line)!important;
  border-bottom:1px solid var(--fns103-line)!important;
  box-shadow:0 8px 20px rgba(45,109,185,.06)!important;
  text-shadow:none!important;
}
body.fns-v103-lightmode table tbody tr:nth-child(even) td,
body.fns-v103-lightmode .table tbody tr:nth-child(even) td,
body.fns-v103-lightmode [class*="table"] tbody tr:nth-child(even) td{
  background:linear-gradient(180deg,#f9fcff 0%,#edf7ff 100%)!important;
}
body.fns-v103-lightmode table tbody tr:hover td,
body.fns-v103-lightmode .table tbody tr:hover td,
body.fns-v103-lightmode [class*="table"] tbody tr:hover td{
  background:#ffffff!important;
  border-color:#8ec9ff!important;
  box-shadow:0 12px 28px rgba(38,120,220,.10)!important;
}
body.fns-v103-lightmode table tbody td:first-child{
  border-left:1px solid var(--fns103-line)!important;
  border-radius:14px 0 0 14px!important;
}
body.fns-v103-lightmode table tbody td:last-child{
  border-right:1px solid var(--fns103-line)!important;
  border-radius:0 14px 14px 0!important;
}

/* Jika halaman memakai div row/card, bukan td/tr. */
body.fns-v103-lightmode .data-row,
body.fns-v103-lightmode .customer-row,
body.fns-v103-lightmode .pelanggan-row,
body.fns-v103-lightmode .list-row,
body.fns-v103-lightmode .row-card,
body.fns-v103-lightmode .fns-row,
body.fns-v103-lightmode .fns-v99-row,
body.fns-v103-lightmode .fns-customer-row,
body.fns-v103-lightmode [class*="customer"] [class*="row"],
body.fns-v103-lightmode [class*="pelanggan"] [class*="row"]{
  background:linear-gradient(180deg,#ffffff 0%,#f3faff 100%)!important;
  border:1px solid var(--fns103-line)!important;
  color:var(--fns103-ink)!important;
  box-shadow:0 8px 22px rgba(45,109,185,.07)!important;
  text-shadow:none!important;
}

/* Semua teks di area data dibuat tegas dan terbaca. */
body.fns-v103-lightmode table tbody td,
body.fns-v103-lightmode table tbody td *,
body.fns-v103-lightmode .data-row,
body.fns-v103-lightmode .data-row *,
body.fns-v103-lightmode .customer-row,
body.fns-v103-lightmode .customer-row *,
body.fns-v103-lightmode .pelanggan-row,
body.fns-v103-lightmode .pelanggan-row *,
body.fns-v103-lightmode .list-row,
body.fns-v103-lightmode .list-row *{
  color:var(--fns103-ink)!important;
  text-shadow:none!important;
}
body.fns-v103-lightmode small,
body.fns-v103-lightmode .muted,
body.fns-v103-lightmode .text-muted,
body.fns-v103-lightmode table small{
  color:#4d6178!important;
}

/* Input & search mode terang. */
body.fns-v103-lightmode input,
body.fns-v103-lightmode select,
body.fns-v103-lightmode textarea,
body.fns-v103-lightmode .search-box,
body.fns-v103-lightmode [class*="search"] input{
  background:#fbfdff!important;
  color:var(--fns103-ink)!important;
  border:1px solid #c7ddf4!important;
  box-shadow:0 8px 18px rgba(38,120,220,.06), inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.fns-v103-lightmode input::placeholder,
body.fns-v103-lightmode textarea::placeholder{
  color:#7a8da4!important;
}

/* Tombol aksi konsisten dan jelas. */
body.fns-v103-lightmode .btn,
body.fns-v103-lightmode button,
body.fns-v103-lightmode a[class*="btn"]{
  font-weight:900!important;
  text-shadow:none!important;
}
body.fns-v103-lightmode .btn-edit,
body.fns-v103-lightmode a[href*="edit"],
body.fns-v103-lightmode button[name*="edit"]{
  background:#f2f8ff!important;
  color:#0d4e96!important;
  border-color:#b9d9fb!important;
}
body.fns-v103-lightmode .fns-v99-del-btn,
body.fns-v103-lightmode .btn-delete,
body.fns-v103-lightmode .btn-danger,
body.fns-v103-lightmode a[href*="delete"],
body.fns-v103-lightmode button[name*="delete"],
body.fns-v103-lightmode button[value*="delete"]{
  background:#fff0f3!important;
  color:#b9273f!important;
  border-color:#ff9eae!important;
  box-shadow:0 8px 18px rgba(220,53,69,.08)!important;
}
body.fns-v103-lightmode .btn-isolir,
body.fns-v103-lightmode a[href*="isolir"],
body.fns-v103-lightmode button[name*="isolir"]{
  background:#fff7e8!important;
  color:var(--fns103-orange)!important;
  border-color:#ffd891!important;
}
body.fns-v103-lightmode .btn-active,
body.fns-v103-lightmode a[href*="active"],
body.fns-v103-lightmode button[name*="active"]{
  background:#eafff4!important;
  color:#087443!important;
  border-color:#a9efc8!important;
}

/* Badge status tetap jelas. */
body.fns-v103-lightmode .badge,
body.fns-v103-lightmode .pill,
body.fns-v103-lightmode [class*="badge"],
body.fns-v103-lightmode [class*="pill"]{
  text-shadow:none!important;
  font-weight:900!important;
}
body.fns-v103-lightmode .badge.active,
body.fns-v103-lightmode .pill.active,
body.fns-v103-lightmode [class*="active"]{
  color:#087443;
}

/* Sidebar mode terang tetap halus dan tidak bertabrakan. */
body.fns-v103-lightmode .sidebar,
body.fns-v103-lightmode aside,
body.fns-v103-lightmode .app-sidebar,
body.fns-v103-lightmode .side-menu,
body.fns-v103-lightmode .layout-sidebar{
  background:linear-gradient(180deg,#f8fcff 0%,#edf8ff 100%)!important;
  border-right:1px solid #cae4fb!important;
  color:var(--fns103-ink)!important;
}
body.fns-v103-lightmode .sidebar a,
body.fns-v103-lightmode .app-sidebar a,
body.fns-v103-lightmode .side-menu a,
body.fns-v103-lightmode .layout-sidebar a{
  color:var(--fns103-ink)!important;
  font-weight:800!important;
}
body.fns-v103-lightmode .sidebar a.active,
body.fns-v103-lightmode .sidebar .active>a,
body.fns-v103-lightmode .app-sidebar a.active,
body.fns-v103-lightmode .side-menu a.active,
body.fns-v103-lightmode .layout-sidebar a.active{
  background:linear-gradient(90deg,#e7f5ff,#eef0ff)!important;
  color:#0877e2!important;
  border-color:#86c5ff!important;
}
/* === FNS V103 LIGHT MODE SERASI END === */

/* FNS V108 TINY DELETE START */
/* FNS V108 - Tombol Hapus tiny, disamakan dengan tombol Edit/Isolir/Aktif */
.fns-v104-actions,
.fns-v99-actions,
.fns-v96-action-bar{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
}

.fns-v104-del-btn,
.fns-v99-del-btn,
.fns-v96-delete-btn,
button.fns-delete-btn,
a.fns-delete-btn,
button[class*="delete"],
a[class*="delete"]{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  padding:0!important;
  border-radius:10px!important;
  font-size:13px!important;
  line-height:27px!important;
  font-weight:800!important;
  letter-spacing:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transform:none!important;
  margin:0!important;
  vertical-align:middle!important;
}

.fns-v104-del-btn,
.fns-v99-del-btn,
.fns-v96-delete-btn,
button.fns-delete-btn,
a.fns-delete-btn{
  background:linear-gradient(180deg,#ffe1e5,#ffd1d7)!important;
  color:#a53d48!important;
  border:1px solid rgba(205,75,90,.36)!important;
}

html.dark .fns-v104-del-btn,
body.dark .fns-v104-del-btn,
body[data-theme="dark"] .fns-v104-del-btn,
.theme-dark .fns-v104-del-btn,
html.dark .fns-v99-del-btn,
body.dark .fns-v99-del-btn,
body[data-theme="dark"] .fns-v99-del-btn,
.theme-dark .fns-v99-del-btn,
html.dark .fns-v96-delete-btn,
body.dark .fns-v96-delete-btn,
body[data-theme="dark"] .fns-v96-delete-btn,
.theme-dark .fns-v96-delete-btn,
html.dark button.fns-delete-btn,
body.dark button.fns-delete-btn,
body[data-theme="dark"] button.fns-delete-btn,
.theme-dark button.fns-delete-btn{
  background:linear-gradient(180deg,rgba(176,58,70,.28),rgba(112,34,43,.34))!important;
  color:#ffd8dd!important;
  border:1px solid rgba(239,86,99,.34)!important;
}

.fns-v104-del-btn:hover,
.fns-v99-del-btn:hover,
.fns-v96-delete-btn:hover,
button.fns-delete-btn:hover,
a.fns-delete-btn:hover{
  transform:none!important;
  box-shadow:0 3px 8px rgba(210,70,85,.10)!important;
}

.fns-v104-del-btn svg,
.fns-v99-del-btn svg,
.fns-v96-delete-btn svg,
button.fns-delete-btn svg,
a.fns-delete-btn svg,
.fns-v104-del-btn i,
.fns-v99-del-btn i,
.fns-v96-delete-btn i,
button.fns-delete-btn i,
a.fns-delete-btn i{
  display:none!important;
}

td:last-child .fns-v104-actions,
td:last-child .fns-v99-actions,
td:last-child .fns-v96-action-bar{
  align-items:center!important;
  gap:6px!important;
}
/* FNS V108 TINY DELETE END */

/* FNS V112 - Aksi icon kecil premium untuk Pelanggan, Tagihan, Histori Pembayaran, Tiket */
.fns112-actions{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
  min-width:max-content!important;
}
.fns112-action{
  width:27px!important;
  min-width:27px!important;
  max-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  padding:0!important;
  margin:0!important;
  border-radius:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-shadow:0 3px 10px rgba(15,23,42,.07)!important;
  transform:none!important;
  line-height:1!important;
  font-size:0!important;
  vertical-align:middle!important;
  border:1px solid rgba(148,163,184,.34)!important;
  background:rgba(255,255,255,.92)!important;
  color:#0f172a!important;
}
.fns112-action svg{
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  display:block!important;
  pointer-events:none!important;
}
.fns112-action:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
}
.fns112-edit{color:#2563eb!important;background:#eff6ff!important;border-color:rgba(37,99,235,.24)!important}
.fns112-trash{color:#dc2626!important;background:#fff1f2!important;border-color:rgba(220,38,38,.24)!important}
.fns112-invoice{color:#7c3aed!important;background:#f5f3ff!important;border-color:rgba(124,58,237,.22)!important}
.fns112-pay{color:#059669!important;background:#ecfdf5!important;border-color:rgba(5,150,105,.24)!important}
.fns112-lock{color:#d97706!important;background:#fffbeb!important;border-color:rgba(217,119,6,.24)!important}
.fns112-power{color:#16a34a!important;background:#f0fdf4!important;border-color:rgba(22,163,74,.24)!important}
td .fns112-actions{white-space:nowrap!important}
table td:last-child{white-space:nowrap!important}
html.dark .fns112-action,body.dark .fns112-action,body[data-theme="dark"] .fns112-action,.theme-dark .fns112-action{
  background:rgba(15,23,42,.88)!important;
  border-color:rgba(148,163,184,.25)!important;
  color:#e5e7eb!important;
  box-shadow:none!important;
}
html.dark .fns112-edit,body.dark .fns112-edit,body[data-theme="dark"] .fns112-edit,.theme-dark .fns112-edit{color:#93c5fd!important;background:rgba(30,64,175,.32)!important}
html.dark .fns112-trash,body.dark .fns112-trash,body[data-theme="dark"] .fns112-trash,.theme-dark .fns112-trash{color:#fecaca!important;background:rgba(127,29,29,.34)!important}
html.dark .fns112-invoice,body.dark .fns112-invoice,body[data-theme="dark"] .fns112-invoice,.theme-dark .fns112-invoice{color:#c4b5fd!important;background:rgba(76,29,149,.34)!important}
html.dark .fns112-pay,body.dark .fns112-pay,body[data-theme="dark"] .fns112-pay,.theme-dark .fns112-pay{color:#86efac!important;background:rgba(20,83,45,.34)!important}
html.dark .fns112-lock,body.dark .fns112-lock,body[data-theme="dark"] .fns112-lock,.theme-dark .fns112-lock{color:#fde68a!important;background:rgba(120,53,15,.34)!important}
html.dark .fns112-power,body.dark .fns112-power,body[data-theme="dark"] .fns112-power,.theme-dark .fns112-power{color:#bbf7d0!important;background:rgba(22,101,52,.34)!important}
@media(max-width:768px){
  .fns112-actions{gap:4px!important}
  .fns112-action{width:25px!important;min-width:25px!important;max-width:25px!important;height:25px!important;min-height:25px!important;max-height:25px!important;border-radius:8px!important}
  .fns112-action svg{width:13px!important;height:13px!important;min-width:13px!important}
}


/* === FNS V113 CLEAN DELETE DUPLICATE START ===
   Matikan tombol Hapus teks lama dari patch V96/V99/V104/V107/V108/V110.
   Yang aktif hanya tombol icon .fns112-action .fns112-trash. */
body[data-module="customers"] .fns-v104-del-btn,
body[data-module="customers"] .fns-v99-del-btn,
body[data-module="customers"] .fns-v96-delete-btn,
body[data-module="customers"] .fns-delete-btn,
body[data-module="customers"] .fns-v110-delete-btn,
body[data-module="billing"] .fns-v104-del-btn,
body[data-module="billing"] .fns-v99-del-btn,
body[data-module="billing"] .fns-v96-delete-btn,
body[data-module="billing"] .fns-delete-btn,
body[data-module="billing"] .fns-v110-delete-btn,
body[data-module="payments"] .fns-v104-del-btn,
body[data-module="payments"] .fns-v99-del-btn,
body[data-module="payments"] .fns-v96-delete-btn,
body[data-module="payments"] .fns-delete-btn,
body[data-module="payments"] .fns-v110-delete-btn,
body[data-module="tickets"] .fns-v104-del-btn,
body[data-module="tickets"] .fns-v99-del-btn,
body[data-module="tickets"] .fns-v96-delete-btn,
body[data-module="tickets"] .fns-delete-btn,
body[data-module="tickets"] .fns-v110-delete-btn{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.fns112-actions .fns112-action{
  display:inline-flex!important;
  visibility:visible!important;
}
/* === FNS V113 CLEAN DELETE DUPLICATE END === */

/* === FNS V114 DASHBOARD HEADER CLOCK + AUTO GREETING === */
body[data-module="dashboard"] .topbar{
  min-height:74px;
  align-items:center;
}
body[data-module="dashboard"] .fns114-dashboard-clock-title{
  display:grid!important;
  gap:4px!important;
  min-width:min(560px, 52vw);
  padding:2px 0;
}
body[data-module="dashboard"] .fns114-live-clock{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:max-content;
  max-width:100%;
  color:var(--text)!important;
  font-size:16px!important;
  line-height:1.15!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
  white-space:nowrap;
}
body[data-module="dashboard"] .fns114-auto-greeting{
  margin:0!important;
  max-width:760px;
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.38!important;
  font-weight:850!important;
  letter-spacing:-.01em;
}
body[data-module="dashboard"] .dash114-toolbar-no-clock{
  grid-template-columns:minmax(260px, 1fr) auto!important;
  align-items:center!important;
}
body[data-module="dashboard"] .dash114-toolbar-no-clock .dash30-search{
  justify-self:end;
  width:min(680px, 100%);
}
body[data-module="dashboard"] .dash114-toolbar-no-clock .dash30-tools{
  justify-self:end;
}
body[data-module="dashboard"] .dash30-time.dash31-time-card{
  display:none!important;
}
body[data-module="dashboard"] .fns114-dashboard-clock-title .live-clock:after{
  margin-left:2px;
}
body.dark[data-module="dashboard"] .fns114-auto-greeting{
  color:#b8c7da!important;
}
@media(max-width:980px){
  body[data-module="dashboard"] .fns114-dashboard-clock-title{
    min-width:0;
    width:100%;
  }
  body[data-module="dashboard"] .fns114-live-clock{
    font-size:14px!important;
    white-space:normal;
  }
  body[data-module="dashboard"] .fns114-auto-greeting{
    font-size:12px!important;
  }
  body[data-module="dashboard"] .dash114-toolbar-no-clock{
    grid-template-columns:1fr!important;
  }
  body[data-module="dashboard"] .dash114-toolbar-no-clock .dash30-search,
  body[data-module="dashboard"] .dash114-toolbar-no-clock .dash30-tools{
    justify-self:stretch;
    width:100%;
  }
  body[data-module="dashboard"] .dash114-toolbar-no-clock .dash30-tools{
    justify-content:flex-start;
  }
}
@media(max-width:760px){
  body[data-module="dashboard"] .topbar{
    min-height:auto;
  }
  body[data-module="dashboard"] .fns114-live-clock{
    font-size:13px!important;
  }
  body[data-module="dashboard"] .fns114-auto-greeting{
    font-size:11.5px!important;
    line-height:1.45!important;
  }
}


/* === FNS V115 THEME + RADIUS SYNC FIX ===
   Memperbaiki error V114: menu sidebar berubah jadi icon bulan karena script theme terlalu lebar.
   Juga memperjelas halaman Radius Sync di mode terang/gelap. */
.nav-group-toggle,
.nav-group>button{
  color:var(--muted)!important;
  background:transparent!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.045em!important;
}
.nav-group-toggle span,
.nav-group>button span{
  display:inline!important;
  color:inherit!important;
}
.nav-group-toggle b,
.nav-group>button b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:inherit!important;
}
.theme-toggle.fns115-theme-toggle-safe{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:40px!important;
  min-width:40px!important;
  height:36px!important;
  padding:0!important;
  font-size:18px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.80)!important;
  border:1px solid rgba(132,170,230,.55)!important;
  box-shadow:0 10px 22px rgba(35,78,150,.10)!important;
}
body.dark .theme-toggle.fns115-theme-toggle-safe{
  background:rgba(17,34,60,.88)!important;
  border-color:rgba(120,160,220,.35)!important;
  box-shadow:none!important;
}
body[data-module="radius"] .radius-sync-hero{
  color:#102033!important;
  background:
    radial-gradient(circle at 6% 0,rgba(35,109,255,.20),transparent 34%),
    radial-gradient(circle at 90% 15%,rgba(0,184,255,.16),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,245,255,.90),rgba(246,241,255,.72))!important;
  border-color:rgba(132,170,230,.42)!important;
  box-shadow:0 18px 46px rgba(35,78,150,.13)!important;
}
body[data-module="radius"] .radius-sync-hero h3,
body[data-module="radius"] .radius-sync-hero b{
  color:#102033!important;
}
body[data-module="radius"] .radius-sync-hero p{
  color:#52657e!important;
  font-weight:650!important;
}
body[data-module="radius"] .eyebrow.small{
  color:#0284c7!important;
  background:rgba(14,165,233,.10)!important;
  border:1px solid rgba(14,165,233,.20)!important;
  padding:7px 12px!important;
  border-radius:999px!important;
}
body[data-module="radius"] .sync-profile-card{
  color:#102033!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,246,255,.88))!important;
  border-color:rgba(132,170,230,.38)!important;
  box-shadow:0 14px 34px rgba(35,78,150,.10)!important;
}
body[data-module="radius"] .sync-profile-head b,
body[data-module="radius"] .sync-profile-body strong,
body[data-module="radius"] .advanced-radius-note b{
  color:#102033!important;
}
body[data-module="radius"] .sync-profile-head span,
body[data-module="radius"] .sync-profile-body small,
body[data-module="radius"] .sync-profile-footer,
body[data-module="radius"] .advanced-radius-note span{
  color:#60738c!important;
}
body[data-module="radius"] .sync-profile-body div,
body[data-module="radius"] .advanced-radius-note .note-grid div{
  background:rgba(248,251,255,.92)!important;
  border-color:rgba(132,170,230,.28)!important;
}
body.dark[data-module="radius"] .radius-sync-hero{
  color:#eef7ff!important;
  background:
    radial-gradient(circle at 8% 0,rgba(35,109,255,.30),transparent 34%),
    radial-gradient(circle at 90% 12%,rgba(0,184,255,.20),transparent 32%),
    linear-gradient(135deg,rgba(12,28,50,.98),rgba(16,36,64,.94),rgba(32,24,70,.78))!important;
  border-color:rgba(120,160,220,.28)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
}
body.dark[data-module="radius"] .radius-sync-hero h3,
body.dark[data-module="radius"] .radius-sync-hero b,
body.dark[data-module="radius"] .sync-profile-head b,
body.dark[data-module="radius"] .sync-profile-body strong,
body.dark[data-module="radius"] .advanced-radius-note b{
  color:#eef7ff!important;
}
body.dark[data-module="radius"] .radius-sync-hero p,
body.dark[data-module="radius"] .sync-profile-head span,
body.dark[data-module="radius"] .sync-profile-body small,
body.dark[data-module="radius"] .sync-profile-footer,
body.dark[data-module="radius"] .advanced-radius-note span{
  color:#b7c8de!important;
}
body.dark[data-module="radius"] .sync-profile-card{
  color:#eef7ff!important;
  background:linear-gradient(145deg,rgba(15,31,54,.96),rgba(9,22,40,.90),rgba(24,20,54,.72))!important;
  border-color:rgba(120,160,220,.24)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.30)!important;
}
body.dark[data-module="radius"] .sync-profile-body div,
body.dark[data-module="radius"] .advanced-radius-note .note-grid div{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.16)!important;
}
body[data-module="radius"] .pill.ok{
  background:#dcfce7!important;
  color:#166534!important;
  border:1px solid #bbf7d0!important;
}
body.dark[data-module="radius"] .pill.ok{
  background:rgba(34,197,94,.18)!important;
  color:#86efac!important;
  border-color:rgba(34,197,94,.30)!important;
}
/* === FNS V115 END === */


/* === FNS V116 GLOBAL TOPBAR CLOCK + AUTO GREETING PC/LAPTOP === */
@media (min-width: 981px){
  body.app-shell .topbar{
    min-height:74px!important;
    align-items:center!important;
  }
  body.app-shell .fns116-global-clock-title{
    display:grid!important;
    gap:4px!important;
    min-width:min(620px, 54vw)!important;
    max-width:calc(100vw - var(--sidebar) - 520px)!important;
    padding:2px 0!important;
  }
  body.app-shell .fns116-live-clock{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    width:max-content!important;
    max-width:100%!important;
    color:var(--text)!important;
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:950!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    text-shadow:none!important;
  }
  body.app-shell .fns116-auto-greeting{
    display:block!important;
    margin:0!important;
    max-width:760px!important;
    color:var(--muted)!important;
    font-size:13px!important;
    line-height:1.38!important;
    font-weight:850!important;
    letter-spacing:-.01em!important;
    white-space:normal!important;
    opacity:1!important;
  }
  body.dark.app-shell .fns116-live-clock{
    color:#eaf2ff!important;
  }
  body.dark.app-shell .fns116-auto-greeting{
    color:#b8c7da!important;
  }
  body:not(.dark).app-shell .fns116-live-clock{
    color:#102033!important;
  }
  body:not(.dark).app-shell .fns116-auto-greeting{
    color:#52637c!important;
  }
  body.app-shell .fns116-global-clock-title .live-clock:after{
    margin-left:2px!important;
  }
}
@media (min-width: 761px) and (max-width: 980px){
  body.app-shell .fns116-global-clock-title{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    gap:4px!important;
  }
  body.app-shell .fns116-live-clock{
    font-size:14px!important;
    white-space:normal!important;
  }
  body.app-shell .fns116-auto-greeting{
    display:block!important;
    font-size:12px!important;
    line-height:1.35!important;
    color:var(--muted)!important;
  }
  body.dark.app-shell .fns116-auto-greeting{
    color:#b8c7da!important;
  }
}
/* Mobile tetap aman agar topbar tidak penuh */
@media (max-width: 760px){
  body.app-shell .fns116-global-clock-title{
    display:grid!important;
    gap:2px!important;
    min-width:0!important;
    width:100%!important;
  }
  body.app-shell .fns116-live-clock{
    font-size:12px!important;
    white-space:normal!important;
  }
  body.app-shell .fns116-auto-greeting{
    font-size:11px!important;
    line-height:1.25!important;
    color:var(--muted)!important;
    display:block!important;
  }
}
/* === FNS V116 END === */

/* === FNS V117 PC/LAPTOP TOPBAR LOCKED ===
   Mengunci jam + ucapan otomatis supaya selalu terlihat saat halaman digeser/scroll.
   Berlaku di mode terang dan mode gelap untuk tampilan laptop/PC. */
@media (min-width: 981px){
  body.app-shell{
    scroll-padding-top:104px!important;
  }
  body.app-shell .main{
    padding-top:104px!important;
  }
  body.app-shell .topbar{
    position:fixed!important;
    top:0!important;
    left:var(--sidebar)!important;
    right:0!important;
    width:calc(100vw - var(--sidebar))!important;
    min-height:82px!important;
    margin:0!important;
    padding:10px 18px!important;
    z-index:80!important;
    border-radius:0!important;
    border-bottom:1px solid rgba(132,170,230,.35)!important;
    box-shadow:0 16px 42px rgba(35,78,150,.12)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  body:not(.dark).app-shell .topbar,
  body.fns-v103-lightmode.app-shell .topbar{
    background:linear-gradient(120deg,rgba(255,255,255,.94),rgba(236,247,255,.86),rgba(246,240,255,.82))!important;
    color:#102033!important;
  }
  body.dark.app-shell .topbar{
    background:linear-gradient(120deg,rgba(7,17,31,.96),rgba(13,28,50,.92),rgba(24,19,54,.88))!important;
    color:#eaf2ff!important;
    border-bottom-color:rgba(120,160,220,.25)!important;
    box-shadow:0 18px 48px rgba(0,0,0,.30)!important;
  }
  body.app-shell .topbar .top-actions{
    flex-wrap:nowrap!important;
    min-width:max-content!important;
  }
  body.app-shell .fns116-global-clock-title{
    min-width:0!important;
    max-width:calc(100vw - var(--sidebar) - 520px)!important;
    overflow:hidden!important;
  }
  body.app-shell .fns116-live-clock,
  body.app-shell .fns116-auto-greeting{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.app-shell .fns116-auto-greeting{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }
  body.app-shell .sidebar{
    z-index:90!important;
  }
}
@media (min-width: 981px) and (max-width: 1250px){
  body.app-shell .topbar{
    min-height:88px!important;
  }
  body.app-shell .main{
    padding-top:112px!important;
  }
  body.app-shell .fns116-global-clock-title{
    max-width:calc(100vw - var(--sidebar) - 430px)!important;
  }
  body.app-shell .top-actions .quick{
    padding-left:9px!important;
    padding-right:9px!important;
  }
}
/* === FNS V117 END === */


/* === FNS V118 COMPACT HOURLY GREETING ===
   Ucapan dibuat pendek seperti: "Selamat Malam, Mari Bersantai!" dan berganti per jam. */
@media (min-width: 981px){
  body.app-shell .fns116-global-clock-title{
    gap:5px!important;
    max-width:calc(100vw - var(--sidebar) - 500px)!important;
  }
  body.app-shell .fns116-live-clock{
    font-size:16px!important;
    line-height:1.15!important;
  }
  body.app-shell .fns116-auto-greeting{
    display:block!important;
    max-width:520px!important;
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:unset!important;
  }
  body:not(.dark).app-shell .fns116-auto-greeting{
    color:#52637c!important;
  }
  body.dark.app-shell .fns116-auto-greeting{
    color:#b9c6d7!important;
  }
}
@media (max-width: 980px){
  body.app-shell .fns116-auto-greeting{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}
/* === FNS V118 END === */


/* === FNS V120 SIDEBAR SUBMENU FULL VISIBLE ===
   Perbaikan total sidebar desktop: submenu tidak terpotong/terhalang kartu user,
   semua item group bisa terlihat dengan scroll sidebar yang jelas. */
@media (min-width: 761px){
  body.app-shell{
    overflow-x:hidden!important;
  }
  body.app-shell .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--sidebar)!important;
    height:100vh!important;
    max-height:100vh!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:14px 12px 18px!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(35,109,255,.42) rgba(148,163,184,.13)!important;
    overscroll-behavior:contain!important;
  }
  body.app-shell .sidebar::-webkit-scrollbar{width:8px!important;}
  body.app-shell .sidebar::-webkit-scrollbar-track{background:rgba(148,163,184,.12)!important;border-radius:999px!important;}
  body.app-shell .sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(35,109,255,.62),rgba(0,184,255,.46))!important;border-radius:999px!important;}

  body.app-shell .brand{
    position:relative!important;
    z-index:4!important;
    flex:0 0 auto!important;
    margin-bottom:10px!important;
  }
  body.app-shell .side-search{
    position:sticky!important;
    top:0!important;
    z-index:10!important;
    margin:0 0 10px!important;
    padding:8px 0 10px!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  body:not(.dark).app-shell .side-search{
    background:linear-gradient(180deg,rgba(242,249,255,.96),rgba(242,249,255,.84),rgba(242,249,255,0))!important;
  }
  body.dark.app-shell .side-search{
    background:linear-gradient(180deg,rgba(8,18,34,.98),rgba(8,18,34,.84),rgba(8,18,34,0))!important;
  }

  body.app-shell .nav{
    display:flex!important;
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    gap:8px!important;
    padding:0 0 12px!important;
  }
  body.app-shell .nav-group{
    flex:0 0 auto!important;
    overflow:visible!important;
    border-radius:16px!important;
  }
  body.app-shell .nav-group>button,
  body.app-shell .nav-group-toggle{
    position:relative!important;
    z-index:2!important;
    min-height:38px!important;
    height:38px!important;
  }
  body.app-shell .nav-group.closed>.nav-items{
    display:none!important;
  }
  body.app-shell .nav-group:not(.closed)>.nav-items{
    display:block!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:4px 0 10px!important;
  }
  body.app-shell .nav-group a{
    min-height:37px!important;
    padding:9px 10px!important;
    margin:4px 6px!important;
    line-height:1.25!important;
    white-space:normal!important;
    word-break:normal!important;
  }
  body.app-shell .nav-group a i{
    flex:0 0 22px!important;
    width:22px!important;
  }

  body.app-shell .sidebar-user-card{
    position:relative!important;
    bottom:auto!important;
    margin:10px 4px 0!important;
    flex:0 0 auto!important;
  }

  body.app-shell .main{
    margin-left:var(--sidebar)!important;
    width:calc(100vw - var(--sidebar))!important;
  }
  body.app-shell .topbar{
    left:var(--sidebar)!important;
    width:calc(100vw - var(--sidebar))!important;
  }
}

@media (min-width: 761px) and (max-height: 760px){
  body.app-shell .brand img,
  body.app-shell .brand-mark{width:34px!important;height:34px!important;border-radius:12px!important;}
  body.app-shell .brand b{font-size:12px!important;}
  body.app-shell .brand span{font-size:10px!important;}
  body.app-shell .side-search input{height:34px!important;}
  body.app-shell .nav-group>button,
  body.app-shell .nav-group-toggle{height:34px!important;min-height:34px!important;}
  body.app-shell .nav-group a{min-height:33px!important;padding:7px 9px!important;margin:3px 6px!important;font-size:12px!important;}
  body.app-shell .sidebar-user-card{padding:10px!important;}
  body.app-shell .side-user-photo{width:42px!important;height:42px!important;}
}
/* === FNS V120 END === */


/* === FNS V121 MENU DEDUP + UNIQUE MODULE NOTES === */
.module-note-v121{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.module-note-v121 h3{
  margin-bottom:2px!important;
}
.module-guide-line{
  display:grid!important;
  grid-template-columns:122px 1fr!important;
  gap:10px!important;
  padding:10px 12px!important;
  border:1px solid rgba(96,165,250,.24)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.38)!important;
}
.module-guide-line b{
  color:#0f172a!important;
  font-size:12px!important;
}
.module-guide-line span{
  color:#40536f!important;
  line-height:1.45!important;
  font-size:13px!important;
}
.module-actions-v121{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body.dark .module-guide-line{
  background:rgba(15,23,42,.46)!important;
  border-color:rgba(148,163,184,.24)!important;
}
body.dark .module-guide-line b{color:#e5f0ff!important;}
body.dark .module-guide-line span{color:#b6c7dc!important;}
@media(max-width:760px){
  .module-guide-line{grid-template-columns:1fr!important;gap:4px!important;}
  .module-actions-v121{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* IP Pool source of truth: only Paket Internet menu is shown. Standalone IP Pool menu removed. */
/* === FNS V121 END === */


/* =========================
   V123 Customer input minimalis premium
   ========================= */
.customer-full-card{
    overflow:visible!important;
    padding:18px!important;
}
.customer-full-card .customer-form-head{
    padding:14px 16px!important;
    margin:-2px 0 14px!important;
    border:1px solid rgba(148,163,184,.22)!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(14,165,233,.07),rgba(168,85,247,.07))!important;
}
.customer-full-card .customer-form-head h3{
    font-size:18px!important;
    letter-spacing:-.02em!important;
}
.fns-customer-mini-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
}
.fns-customer-mini-hero,
.fns-mini-panel,
.fns-mini-details{
    grid-column:1/-1!important;
    border:1px solid rgba(148,163,184,.26)!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,251,255,.72))!important;
    box-shadow:0 14px 34px rgba(37,99,235,.08)!important;
}
.dark .fns-customer-mini-hero,
.dark .fns-mini-panel,
.dark .fns-mini-details{
    background:linear-gradient(180deg,rgba(15,35,61,.72),rgba(11,26,45,.76))!important;
    border-color:rgba(148,163,184,.18)!important;
    box-shadow:0 20px 52px rgba(0,0,0,.26)!important;
}
.fns-customer-mini-hero{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:14px 16px!important;
}
.fns-customer-mini-title{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
}
.fns-customer-mini-title b,
.fns-mini-panel-head b{
    display:block!important;
    color:var(--text)!important;
    font-size:15px!important;
    line-height:1.25!important;
}
.fns-customer-mini-title small,
.fns-mini-panel-head small,
.fns-mini-details summary small{
    display:block!important;
    color:var(--muted)!important;
    font-size:11.5px!important;
    line-height:1.45!important;
    margin-top:2px!important;
    font-weight:750!important;
}
.fns-mini-icon{
    width:38px!important;
    height:38px!important;
    flex:none!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
    color:#fff!important;
    box-shadow:0 12px 26px rgba(37,99,235,.25)!important;
}
.fns-customer-mini-code,
.fns-mini-panel-head span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    padding:9px 13px!important;
    min-height:34px!important;
    background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
    color:#fff!important;
    font-weight:950!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
    box-shadow:0 12px 28px rgba(37,99,235,.22)!important;
}
.fns-mini-panel{
    padding:14px 16px 16px!important;
}
.fns-mini-panel-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:12px!important;
}
.fns-mini-panel-head span{
    font-size:10px!important;
    padding:6px 10px!important;
    min-height:auto!important;
    box-shadow:none!important;
}
.fns-mini-grid{
    display:grid!important;
    gap:10px 12px!important;
    align-items:start!important;
}
.fns-mini-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.fns-mini-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.fns-customer-mini-form label,
.fns-mini-details label{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    margin:0!important;
    color:var(--text)!important;
    font-size:11.5px!important;
    font-weight:900!important;
}
.fns-customer-mini-form input,
.fns-customer-mini-form select,
.fns-customer-mini-form textarea,
.fns-mini-details input,
.fns-mini-details select,
.fns-mini-details textarea{
    height:38px!important;
    border-radius:13px!important;
    border:1px solid rgba(147,197,253,.72)!important;
    background:rgba(255,255,255,.86)!important;
    color:#102033!important;
    padding:8px 11px!important;
    font-size:12px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
    outline:none!important;
}
.dark .fns-customer-mini-form input,
.dark .fns-customer-mini-form select,
.dark .fns-customer-mini-form textarea,
.dark .fns-mini-details input,
.dark .fns-mini-details select,
.dark .fns-mini-details textarea{
    background:rgba(15,35,61,.88)!important;
    border-color:rgba(96,165,250,.34)!important;
    color:#eef7ff!important;
    box-shadow:none!important;
}
.fns-customer-mini-form input:focus,
.fns-customer-mini-form select:focus,
.fns-customer-mini-form textarea:focus,
.fns-mini-details input:focus,
.fns-mini-details select:focus,
.fns-mini-details textarea:focus{
    border-color:#2563eb!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
.fns-customer-mini-form textarea,
.fns-mini-details textarea{
    min-height:76px!important;
    resize:vertical!important;
}
.fns-mini-details{
    padding:0!important;
    overflow:hidden!important;
}
.fns-mini-details summary{
    list-style:none!important;
    cursor:pointer!important;
    padding:14px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    user-select:none!important;
}
.fns-mini-details summary::-webkit-details-marker{display:none!important;}
.fns-mini-details summary:after{
    content:'+'!important;
    width:30px!important;
    height:30px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    flex:none!important;
    font-size:18px!important;
    font-weight:950!important;
    color:#2563eb!important;
    background:rgba(37,99,235,.10)!important;
    border:1px solid rgba(37,99,235,.18)!important;
}
.fns-mini-details[open] summary{
    border-bottom:1px solid rgba(148,163,184,.22)!important;
}
.fns-mini-details[open] summary:after{
    content:'−'!important;
    background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
    color:#fff!important;
}
.fns-mini-details summary span{
    color:var(--text)!important;
    font-size:14px!important;
    font-weight:950!important;
    display:block!important;
}
.fns-mini-details>.fns-mini-grid,
.fns-mini-details>.fns-notes-label{
    padding:14px 16px 16px!important;
}
.fns-mini-details .wide,
.fns-customer-mini-form .wide{
    grid-column:1/-1!important;
}
.fns-notes-label{display:flex!important;flex-direction:column!important;gap:6px!important;}
.fns-mini-sticky-actions{
    position:sticky!important;
    bottom:12px!important;
    z-index:5!important;
    margin-top:2px!important;
    padding:12px!important;
    border:1px solid rgba(148,163,184,.24)!important;
    border-radius:18px!important;
    background:rgba(248,251,255,.88)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:0 18px 40px rgba(37,99,235,.13)!important;
}
.dark .fns-mini-sticky-actions{
    background:rgba(8,18,34,.88)!important;
    box-shadow:0 20px 50px rgba(0,0,0,.28)!important;
}
.fns-mini-sticky-actions .btn.primary{
    min-width:260px!important;
    height:40px!important;
    border-radius:14px!important;
    font-size:13px!important;
}
.fns-mini-sticky-actions .btn.ghost{
    height:40px!important;
    border-radius:14px!important;
}
.fns-customer-mini-form input[type="file"]{
    padding:7px 10px!important;
    line-height:1!important;
}
.fns-customer-mini-form .ip-static-row{
    display:flex!important;
    gap:8px!important;
}
.fns-customer-mini-form .ip-static-row input{flex:1!important;min-width:0!important;}
.fns-customer-mini-form .ip-list-btn{height:38px!important;border-radius:13px!important;}
body:not(.dark) .fns-customer-mini-form input[readonly]{
    background:#eef6ff!important;
    color:#1e3a8a!important;
    font-weight:950!important;
}
.dark .fns-customer-mini-form input[readonly]{
    background:rgba(37,99,235,.14)!important;
    color:#bfdbfe!important;
    font-weight:950!important;
}
@media(max-width:1280px){
    .fns-mini-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .fns-mini-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
    .customer-full-card{padding:12px!important;}
    .fns-customer-mini-hero,
    .fns-mini-panel-head,
    .fns-mini-details summary{
        align-items:flex-start!important;
    }
    .fns-customer-mini-hero{flex-direction:column!important;}
    .fns-customer-mini-code{align-self:flex-start!important;}
    .fns-mini-grid.four,
    .fns-mini-grid.three{grid-template-columns:1fr!important;}
    .fns-mini-sticky-actions{position:static!important;flex-direction:column!important;align-items:stretch!important;}
    .fns-mini-sticky-actions .btn{width:100%!important;min-width:0!important;}
    .fns-customer-mini-form .ip-static-row{flex-direction:column!important;}
}

/* V124 - Jadwal otomatis billing */
.codebox{
    display:block;
    width:100%;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(125,170,255,.32);
    background:rgba(15,23,42,.06);
    color:var(--text,#0f172a);
    overflow:auto;
    font-size:13px;
    line-height:1.55;
    white-space:pre-wrap;
}
body.dark .codebox,
[data-theme="dark"] .codebox{
    background:rgba(2,6,23,.45);
    color:#e5eefc;
    border-color:rgba(148,163,184,.28);
}


/* === FNS V125 MENU CLICK FIX START ===
   Perbaikan menu banyak tidak bisa diklik: sidebar, link submenu, dan group dibuat pasti bisa diklik.
   Berlaku PC/laptop, mode terang, mode gelap, dan mobile. */
.sidebar,
.sidebar *{
  pointer-events:auto!important;
}
.sidebar{
  z-index:999!important;
}
.nav,
.nav-group,
.nav-items{
  position:relative!important;
  pointer-events:auto!important;
}
.nav-group>button,
.nav-group-toggle{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.nav-group a,
.nav-items a,
.sidebar .nav a{
  position:relative!important;
  z-index:40!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  user-select:none!important;
}
.nav-group a i,
.nav-group a span,
.sidebar .nav a *{
  pointer-events:none!important;
}
body.app-shell .sidebar-user-card{
  position:relative!important;
  z-index:1!important;
  pointer-events:auto!important;
}
body.app-shell .nav-group:not(.closed)>.nav-items{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
body.app-shell .nav-group.closed>.nav-items{
  display:none!important;
}
body.app-shell .topbar{
  z-index:80!important;
}
@media (min-width:761px){
  body.app-shell .sidebar{
    z-index:999!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  body.app-shell .main{
    margin-left:var(--sidebar)!important;
  }
}
/* === FNS V125 MENU CLICK FIX END === */


/* === FNS V126 DARK MODE CLICK FIX START ===
   Perbaikan: di mode gelap beberapa halaman/form tidak bisa diklik karena layer dekorasi/z-index lama menutup area konten.
   Semua elemen kerja dikembalikan ke layer interaktif, sedangkan overlay dekoratif dibuat tidak menangkap klik. */
body.dark.app-shell,
body.dark.app-shell .main,
body.dark.app-shell .main *,
body.dark.app-shell .topbar,
body.dark.app-shell .topbar *,
body.dark.app-shell .sidebar,
body.dark.app-shell .sidebar *{
  pointer-events:auto!important;
}
body.dark.app-shell .main{
  position:relative!important;
  z-index:20!important;
  isolation:isolate!important;
}
body.dark.app-shell .topbar{
  position:sticky!important;
  top:0!important;
  z-index:900!important;
  pointer-events:auto!important;
}
body.dark.app-shell .sidebar{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  pointer-events:auto!important;
}
body.dark.app-shell .grid,
body.dark.app-shell section,
body.dark.app-shell .card,
body.dark.app-shell .module-note,
body.dark.app-shell .table-wrap,
body.dark.app-shell table,
body.dark.app-shell form,
body.dark.app-shell .form-grid,
body.dark.app-shell .compact-form,
body.dark.app-shell .row-actions,
body.dark.app-shell .fns112-actions,
body.dark.app-shell .module-actions{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
}
body.dark.app-shell input,
body.dark.app-shell select,
body.dark.app-shell textarea,
body.dark.app-shell button,
body.dark.app-shell a,
body.dark.app-shell label,
body.dark.app-shell summary,
body.dark.app-shell details,
body.dark.app-shell .btn,
body.dark.app-shell .quick,
body.dark.app-shell .theme-toggle,
body.dark.app-shell .fns112-action{
  pointer-events:auto!important;
  cursor:auto;
}
body.dark.app-shell button,
body.dark.app-shell a,
body.dark.app-shell summary,
body.dark.app-shell .btn,
body.dark.app-shell .quick,
body.dark.app-shell .theme-toggle,
body.dark.app-shell .fns112-action,
body.dark.app-shell .nav-group-toggle,
body.dark.app-shell .nav a{
  cursor:pointer!important;
}
body.dark.app-shell .glow:before,
body.dark.app-shell .card:before,
body.dark.app-shell .card:after,
body.dark.app-shell .stat-card:before,
body.dark.app-shell .stat-card:after,
body.dark.app-shell .module-note:before,
body.dark.app-shell .module-note:after,
body.dark.app-shell .portal43-card:before,
body.dark.app-shell .portal43-card:after,
body.dark.app-shell .dash30-income-card:before,
body.dark.app-shell .dash30-income-card:after,
body.dark.app-shell .dash30-ticket:before{
  pointer-events:none!important;
}
body.dark.app-shell .fn-submit-overlay:not(.show),
body.dark.app-shell .modal:not(.show),
body.dark.app-shell .fns75-modal:not(.show),
body.dark.app-shell [id*="Overlay"]:not(.show),
body.dark.app-shell [class*="overlay"]:not(.show){
  pointer-events:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
body.dark.app-shell .nav-group a,
body.dark.app-shell .nav-items a,
body.dark.app-shell .sidebar .nav a{
  position:relative!important;
  z-index:1100!important;
  pointer-events:auto!important;
}
body.dark.app-shell .nav-group a i,
body.dark.app-shell .nav-group a span,
body.dark.app-shell .sidebar .nav a *{
  pointer-events:none!important;
}
body.dark.app-shell .nav-group>button,
body.dark.app-shell .nav-group-toggle{
  position:relative!important;
  z-index:1110!important;
  pointer-events:auto!important;
}
/* Hindari topbar transparan menutup area di bawah ketika browser zoom/scroll */
@media(min-width:761px){
  body.dark.app-shell .main > .grid,
  body.dark.app-shell .main > section,
  body.dark.app-shell .main > .card{
    position:relative!important;
    z-index:40!important;
  }
}
/* === FNS V126 DARK MODE CLICK FIX END === */


/* === FNS V127 DARK MODE LAYOUT FIX START ===
   Perbaikan mode gelap halaman bergeser ke kanan.
   Body sudah memakai CSS grid: sidebar kolom 1, main kolom 2.
   Karena itu .main TIDAK boleh diberi margin-left lagi. */
@media (min-width: 761px){
  body.app-shell{
    display:grid!important;
    grid-template-columns:var(--sidebar) minmax(0,1fr)!important;
    overflow-x:hidden!important;
  }
  body.app-shell .sidebar{
    grid-column:1!important;
    grid-row:1!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }
  body.app-shell .main,
  body.dark.app-shell .main,
  body[data-theme="dark"].app-shell .main{
    grid-column:2!important;
    grid-row:1!important;
    margin-left:0!important;
    margin-right:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    position:relative!important;
  }
}
@media (min-width: 981px){
  body.app-shell .topbar,
  body.dark.app-shell .topbar,
  body[data-theme="dark"].app-shell .topbar{
    position:fixed!important;
    top:0!important;
    left:var(--sidebar)!important;
    right:0!important;
    width:calc(100vw - var(--sidebar))!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    z-index:900!important;
  }
  body.app-shell .main,
  body.dark.app-shell .main{
    padding-top:104px!important;
  }
}
@media (max-width: 760px){
  body.app-shell .main{
    margin-left:0!important;
    width:auto!important;
    transform:none!important;
  }
}
/* === FNS V127 DARK MODE LAYOUT FIX END === */


/* === FNS V128 TOPBAR CLEAN NOTIFICATION ===
   Hapus tombol cepat +Pelanggan/+Tiket dan pindahkan notifikasi ke topbar.
   Search besar dashboard dihapus dari markup; style ini menjaga layout tetap rapi. */
body.app-shell .top-actions .quick{
  display:none!important;
}
body.app-shell .topbar-icon{
  position:relative!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  border-radius:14px!important;
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  display:inline-grid!important;
  place-items:center!important;
  text-decoration:none!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:var(--shadow)!important;
  flex:0 0 auto!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}
body.app-shell .topbar-icon:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 14px 34px rgba(35,109,255,.16)!important;
}
body.app-shell .topbar-icon em{
  position:absolute!important;
  top:-7px!important;
  right:-7px!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:10px!important;
  font-style:normal!important;
  font-weight:950!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.72)!important;
}
body.app-shell .topbar-icon.has em{
  background:linear-gradient(135deg,#ef4444,#f97316)!important;
}
body.app-shell .topbar-icon.has{
  border-color:rgba(248,113,113,.42)!important;
  box-shadow:0 14px 36px rgba(239,68,68,.18)!important;
}
body.dark.app-shell .topbar-icon{
  background:rgba(15,34,58,.86)!important;
  border-color:rgba(125,168,230,.24)!important;
  color:#eaf2ff!important;
}
body.dark.app-shell .topbar-icon:hover{
  box-shadow:0 16px 38px rgba(0,0,0,.32)!important;
}
body.app-shell .dash30-toolbar.dash114-toolbar-no-clock{
  display:none!important;
}
@media (min-width:981px){
  body.app-shell .fns116-global-clock-title{
    max-width:calc(100vw - var(--sidebar) - 390px)!important;
  }
  body.app-shell .topbar .top-actions{
    gap:8px!important;
  }
}
@media (max-width:980px){
  body.app-shell .topbar-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    border-radius:12px!important;
  }
}
/* === FNS V128 END === */


/* V129 - Maps pelanggan tanpa API key, multi tile layer */
.noapi-map-card .card-head{align-items:flex-start;gap:14px}.noapi-map-head h3{margin:3px 0 4px}.map-stat-pills{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.map-stat-pills span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(255,255,255,.68);color:var(--text);border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px}.dark .map-stat-pills span{background:rgba(15,32,55,.86);color:#eaf5ff}.noapi-map-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 12px;color:var(--muted);font-size:12px}.noapi-map-toolbar b{color:var(--text)}.noapi-map-toolbar span{border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:999px;padding:6px 10px;font-weight:800}.dark .noapi-map-toolbar span{background:rgba(15,32,55,.78);color:#d7e8ff}.map-box.noapi-leaflet-map{display:block;place-items:initial;overflow:hidden;background:#dbeafe;color:#0f172a}.map-box.noapi-leaflet-map .leaflet-control-layers{border:1px solid rgba(96,165,250,.35);border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.18);overflow:hidden;font-family:inherit}.map-box.noapi-leaflet-map .leaflet-control-layers-expanded{padding:9px 11px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);font-size:12px;font-weight:800;color:#0f172a}.dark .map-box.noapi-leaflet-map .leaflet-control-layers-expanded{background:rgba(8,18,33,.94);color:#e5f2ff}.map-box.noapi-leaflet-map .leaflet-popup-content-wrapper{border-radius:16px;box-shadow:0 18px 45px rgba(15,23,42,.26)}.leaflet-popup-premium{font-family:inherit;line-height:1.55;min-width:190px}.leaflet-popup-premium b{font-size:14px}.leaflet-popup-premium a{color:#1478ff;font-weight:900;text-decoration:none}.noapi-marker{background:transparent!important;border:0!important}.noapi-marker span{width:32px;height:32px;border-radius:16px 16px 16px 4px;display:grid;place-items:center;transform:rotate(-45deg);border:2px solid rgba(255,255,255,.92);box-shadow:0 8px 18px rgba(15,23,42,.28);font-size:12px;font-weight:1000;color:white}.noapi-marker span::first-letter{transform:rotate(45deg)}.noapi-marker span{line-height:32px}.noapi-marker span{font-family:system-ui,-apple-system,Segoe UI,sans-serif}.noapi-marker span{position:relative}.noapi-marker span:after{content:attr(data-label)}.noapi-marker-ok span{background:linear-gradient(135deg,#22c55e,#16a34a)}.noapi-marker-danger span{background:linear-gradient(135deg,#ef4444,#dc2626)}.noapi-marker-device span{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.noapi-marker-warn span{background:linear-gradient(135deg,#f59e0b,#ea580c)}.noapi-marker span{color:transparent}.noapi-marker span:before{content:attr(data-marker);color:white;transform:rotate(45deg)}.noapi-marker span{--dummy:0}.noapi-marker span{font-size:0}.noapi-marker span::before{content:''}.noapi-marker span{font-size:12px}.noapi-marker span{color:white}.noapi-marker span{transform:rotate(-45deg)}.noapi-marker span{text-indent:0}.noapi-marker span{display:flex;align-items:center;justify-content:center}.noapi-marker span > *{transform:rotate(45deg)}.noapi-marker span{writing-mode:horizontal-tb}.noapi-marker span{font-weight:1000}.noapi-marker span{font-size:0}.noapi-marker span:after{content:var(--m,'');font-size:12px;transform:rotate(45deg)}.noapi-marker span{--m:'•'}.noapi-marker div,.noapi-marker span{pointer-events:auto}.noapi-marker span{font-size:12px;color:transparent}.noapi-marker span::after{color:#fff}.map-legend.noapi-map-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;color:var(--muted);font-size:12px}.map-legend.noapi-map-legend span{display:inline-flex;gap:7px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.58);border-radius:999px;padding:7px 10px;font-weight:800}.dark .map-legend.noapi-map-legend span{background:rgba(15,32,55,.74)}.map-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block}.map-legend .dot.ok{background:#22c55e}.map-legend .dot.danger{background:#ef4444}.map-legend .dot.device{background:#0ea5e9}.map-legend .dot.warn{background:#f59e0b}.leaflet-load-error{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);font-weight:900}
@media(max-width:760px){.map-stat-pills{justify-content:flex-start}.noapi-map-toolbar{gap:6px}.noapi-map-toolbar span{font-size:11px;padding:5px 8px}.map-box.big.noapi-leaflet-map{height:440px}.map-box.noapi-leaflet-map .leaflet-control-layers-expanded{max-width:210px;font-size:11px}}

/* V129 marker label override */
.noapi-marker span{font-size:12px!important;color:#fff!important;text-indent:0!important;transform:rotate(-45deg)!important;display:flex!important;align-items:center!important;justify-content:center!important}.noapi-marker span:before,.noapi-marker span:after{content:none!important}.noapi-marker span b{display:block!important;transform:rotate(45deg)!important;color:#fff!important;font-size:12px!important;line-height:1!important;font-weight:1000!important}


/* V130 Upload permission compact fix */
.upload-status-card .upload-fix-box{margin-top:10px;border-radius:14px;padding:12px;border:1px dashed rgba(59,130,246,.35);background:rgba(59,130,246,.08);display:grid;gap:8px}
.upload-status-card .upload-fix-box em{font-style:normal;font-weight:800;color:var(--text)}
.upload-status-card .upload-fix-box code{display:block;white-space:normal;word-break:break-word;line-height:1.45;font-size:12px;color:var(--text);background:rgba(15,23,42,.06);border-radius:12px;padding:10px}
body.dark .upload-status-card .upload-fix-box code,[data-theme="dark"] .upload-status-card .upload-fix-box code{background:rgba(255,255,255,.06)}
.alert.danger:has(+ .grid.two .upload-status-card.bad){display:none!important}

/* === V132 upload user permission card: lebih rapi dan ringkas === */
.upload-status-card{margin-top:18px;border-radius:18px!important;border:1px solid var(--line)!important;padding:16px!important;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(241,248,255,.72))!important;display:grid!important;gap:9px!important;box-shadow:0 16px 34px rgba(15,23,42,.06)!important;overflow:hidden!important}
.upload-status-card.ok{border-color:rgba(34,197,94,.38)!important;background:linear-gradient(135deg,rgba(220,252,231,.86),rgba(236,253,245,.72))!important}
.upload-status-card.bad{border-color:rgba(245,158,11,.42)!important;background:linear-gradient(135deg,rgba(255,247,237,.86),rgba(254,242,242,.68))!important}
.upload-status-head{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:3px!important}
.upload-status-icon{width:36px!important;height:36px!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,255,255,.68)!important;border:1px solid rgba(148,163,184,.24)!important;font-size:18px!important;box-shadow:0 8px 18px rgba(15,23,42,.06)!important}
.upload-status-head b{display:block!important;font-size:16px!important;color:var(--text)!important;margin:0!important}
.upload-status-head small{display:block!important;margin-top:2px!important;color:var(--muted)!important;font-weight:700!important;line-height:1.35!important}
.upload-status-card > span{font-size:12px!important;color:var(--muted)!important;word-break:break-word!important;line-height:1.4!important}
.upload-status-card .upload-fix-box.compact{margin-top:6px!important;border-radius:16px!important;padding:12px!important;border:1px dashed rgba(37,99,235,.32)!important;background:rgba(59,130,246,.08)!important;display:grid!important;gap:8px!important}
.upload-status-card .upload-fix-box.compact em{font-style:normal!important;font-weight:900!important;color:var(--text)!important}
.upload-status-card .upload-fix-box.compact code{display:block!important;white-space:normal!important;word-break:break-word!important;line-height:1.45!important;font-size:13px!important;font-weight:850!important;color:var(--text)!important;background:rgba(15,23,42,.06)!important;border-radius:12px!important;padding:10px!important}
.upload-status-card .upload-fix-box.compact p{margin:0!important;color:var(--muted)!important;font-size:12px!important;line-height:1.45!important;font-weight:750!important}
body.dark .upload-status-card,[data-theme="dark"] .upload-status-card{background:linear-gradient(135deg,rgba(15,23,42,.82),rgba(30,41,59,.76))!important;border-color:rgba(148,163,184,.26)!important}
body.dark .upload-status-card.bad,[data-theme="dark"] .upload-status-card.bad{background:linear-gradient(135deg,rgba(69,26,3,.38),rgba(69,10,10,.25))!important;border-color:rgba(251,191,36,.38)!important}
body.dark .upload-status-card.ok,[data-theme="dark"] .upload-status-card.ok{background:linear-gradient(135deg,rgba(20,83,45,.35),rgba(6,78,59,.25))!important;border-color:rgba(74,222,128,.38)!important}
body.dark .upload-status-card .upload-fix-box.compact code,[data-theme="dark"] .upload-status-card .upload-fix-box.compact code{background:rgba(255,255,255,.07)!important}

/* === V134 ACS / TR069 PREMIUM REPAIR === */
.acs-v134-hero{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:18px;
    padding:22px;
    border:1px solid rgba(59,130,246,.20);
    border-radius:24px;
    background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(139,92,246,.10),rgba(255,255,255,.60));
    box-shadow:0 18px 50px rgba(15,23,42,.08);
    margin-bottom:18px;
}
.acs-v134-hero h2{margin:6px 0 8px;font-size:24px;letter-spacing:-.02em}
.acs-v134-hero p{max-width:880px;margin:0;color:#516987;font-weight:600;line-height:1.55}
.acs-v134-urlbox{
    min-width:360px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:16px 18px;
    border-radius:20px;
    border:1px solid rgba(59,130,246,.24);
    background:rgba(255,255,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.acs-v134-urlbox small,.acs-v134-urlbox span{color:#64748b;font-weight:800}
.acs-v134-urlbox b{font-size:16px;word-break:break-all;color:#0f172a}
.acs-v134-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.acs-v134-stats>div{
    padding:18px 20px;
    border-radius:22px;
    border:1px solid rgba(59,130,246,.18);
    background:rgba(255,255,255,.72);
    box-shadow:0 12px 32px rgba(15,23,42,.06);
}
.acs-v134-stats small{display:block;color:#64748b;font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.acs-v134-stats b{display:block;font-size:28px;color:#2563eb;margin:5px 0 0}
.acs-v134-stats span{color:#64748b;font-weight:700;font-size:12px}
.acs-v134-card .card-head-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.acs-v134-card .card-head-line h3{margin:0 0 6px}.acs-v134-card .card-head-line p{margin:0}
.acs-guide-card{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(239,246,255,.72))!important}
.acs-step{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;margin:10px 0;padding:12px;border:1px solid rgba(59,130,246,.18);border-radius:16px;background:rgba(255,255,255,.52)}
.acs-step b{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.22)}
.acs-step span{font-weight:700;color:#334155;line-height:1.45}
.acs-step code,.acs-command-box code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.acs-command-box{margin-top:14px;padding:14px;border:1px dashed rgba(59,130,246,.35);border-radius:18px;background:rgba(15,23,42,.04)}
.acs-command-box b{display:block;margin-bottom:8px}.acs-command-box code{display:block;margin:7px 0;padding:9px 10px;border-radius:12px;background:rgba(15,23,42,.08);color:#0f172a;white-space:normal;word-break:break-all;font-weight:700}
.acs-command-box.big{margin-top:12px}.small-note{font-size:12px;line-height:1.55;margin-top:12px}.check-line{display:flex!important;align-items:center;gap:10px;min-height:46px;padding:0 12px;border:1px solid rgba(147,197,253,.85);border-radius:15px;background:rgba(255,255,255,.58);font-weight:800}.check-line input{width:18px!important;height:18px!important;margin:0!important}
.acs-v134-card .table-wrap table td small{display:block;margin-top:4px;color:#64748b;font-weight:700}
body.dark .acs-v134-hero{background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(139,92,246,.13),rgba(15,23,42,.72));border-color:rgba(96,165,250,.22)}
body.dark .acs-v134-hero p,body.dark .acs-step span{color:#cbd5e1}body.dark .acs-v134-urlbox,body.dark .acs-v134-stats>div,body.dark .acs-step{background:rgba(15,23,42,.72);border-color:rgba(96,165,250,.24)}
body.dark .acs-v134-urlbox b{color:#e5f2ff}body.dark .acs-v134-urlbox small,body.dark .acs-v134-urlbox span,body.dark .acs-v134-stats small,body.dark .acs-v134-stats span{color:#93a4bb}
body.dark .acs-guide-card{background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(2,6,23,.78))!important}body.dark .acs-command-box{background:rgba(2,6,23,.45);border-color:rgba(96,165,250,.28)}body.dark .acs-command-box code{background:rgba(15,23,42,.86);color:#dbeafe}body.dark .check-line{background:rgba(15,23,42,.68);border-color:rgba(96,165,250,.30);color:#dbeafe}
@media(max-width:1100px){.acs-v134-hero{flex-direction:column}.acs-v134-urlbox{min-width:0}.acs-v134-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.acs-v134-stats{grid-template-columns:1fr}.acs-v134-hero{padding:16px}.acs-v134-hero h2{font-size:20px}}


/* === V144 HOTFIX MIGRASI PAKET SAFE PROFESSIONAL === */
.pkg-mig-safe-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.pkg-mig-safe-stat{
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  padding:14px 15px!important;
  box-shadow:var(--shadow)!important;
  min-height:86px!important;
}
.dark .pkg-mig-safe-stat{background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important;}
.pkg-mig-safe-stat b{display:block!important;font-size:26px!important;line-height:1!important;color:#236dff!important;}
.pkg-mig-safe-stat.warn b{color:#f59e0b!important;}
.pkg-mig-safe-stat.info b{color:#7c3aed!important;}
.pkg-mig-safe-stat.ok b{color:#16a34a!important;}
.pkg-mig-safe-stat span{display:block!important;margin-top:6px!important;font-size:12px!important;font-weight:950!important;color:var(--text)!important;}
.pkg-mig-safe-stat small{display:block!important;margin-top:3px!important;font-size:11px!important;color:var(--muted)!important;line-height:1.35!important;}
.pkg-mig-safe-form{overflow:visible!important;}
.pkg-mig-safe-form .card-head p{margin:5px 0 0!important;}
.pkg-mig-sync-note{
  padding:13px 14px!important;
  border-radius:16px!important;
  border:1px dashed rgba(96,165,250,.26)!important;
  background:rgba(35,109,255,.055)!important;
}
.dark .pkg-mig-sync-note{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(148,163,184,.20)!important;
}
.pkg-mig-sync-note label{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  margin:0!important;
  color:var(--text)!important;
  font-weight:900!important;
}
.pkg-mig-sync-note input{width:18px!important;height:18px!important;accent-color:#236dff!important;}
.pkg-mig-sync-note small{display:block!important;margin-top:8px!important;color:var(--muted)!important;line-height:1.45!important;}
@media(max-width:980px){.pkg-mig-safe-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:640px){.pkg-mig-safe-stats{grid-template-columns:1fr!important;}}
/* === END V144 === */


/* === V145 MIGRATION SAFETY === */
.pkg-mig-safe-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important}
.pkg-mig-safe-stat{background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;border:1px solid var(--line)!important;border-radius:18px!important;padding:14px 15px!important;box-shadow:var(--shadow)!important;min-height:86px!important}
body.dark .pkg-mig-safe-stat{background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important}
.pkg-mig-safe-stat b{display:block!important;font-size:26px!important;line-height:1!important;color:#236dff!important}
.pkg-mig-safe-stat.warn b{color:#f59e0b!important}.pkg-mig-safe-stat.info b{color:#7c3aed!important}.pkg-mig-safe-stat.ok b{color:#16a34a!important}
.pkg-mig-safe-stat span{display:block!important;margin-top:6px!important;font-size:12px!important;font-weight:950!important;color:var(--text)!important}
.pkg-mig-safe-stat small{display:block!important;margin-top:3px!important;font-size:11px!important;color:var(--muted)!important;line-height:1.35!important}
.pkg-mig-sync-note{padding:13px 14px!important;border-radius:16px!important;border:1px dashed rgba(96,165,250,.26)!important;background:rgba(35,109,255,.055)!important}
body.dark .pkg-mig-sync-note{background:rgba(255,255,255,.035)!important;border-color:rgba(148,163,184,.20)!important}
.pkg-mig-sync-note label{display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;color:var(--text)!important;font-weight:900!important}
.pkg-mig-sync-note input{width:18px!important;height:18px!important;accent-color:#236dff!important}
.pkg-mig-sync-note small{display:block!important;margin-top:8px!important;color:var(--muted)!important;line-height:1.45!important}
@media(max-width:980px){.pkg-mig-safe-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.pkg-mig-safe-stats{grid-template-columns:1fr!important}}
/* === END V145 === */


/* === V146 MIGRATION FORCE SYNC === */
.pkg-mig-sync-note{
  background:linear-gradient(135deg,rgba(35,109,255,.075),rgba(0,184,255,.045))!important;
}
body.dark .pkg-mig-sync-note{
  background:linear-gradient(135deg,rgba(35,109,255,.13),rgba(0,184,255,.035))!important;
}
.pkg-mig-sync-note small:before{
  content:"⚠️ ";
}
.fns112-actions a[title*="Sync"],
.fns112-actions a[aria-label*="Sync"]{
  background:rgba(34,197,94,.12)!important;
  color:#16a34a!important;
  border-color:rgba(34,197,94,.25)!important;
}
/* === END V146 === */


/* === V147 AKTIVASI LAYANAN PREMIUM === */
.svc147-page-head{display:flex!important;align-items:center!important;gap:14px!important;margin:0 0 14px!important}
.svc147-title-icon{width:48px!important;height:48px!important;border-radius:15px!important;background:linear-gradient(135deg,#236dff,#8b5cf6)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:22px!important;box-shadow:0 16px 30px rgba(35,109,255,.24)!important}
.svc147-page-head h2{margin:0!important;font-size:24px!important;letter-spacing:-.03em!important;color:var(--text)!important}
.svc147-page-head p{margin:4px 0 0!important;color:var(--muted)!important;font-weight:800!important;font-size:12px!important}.svc147-page-head span{padding:0 6px!important}
.svc147-kpi{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important}
.svc147-kpi-card{display:flex!important;align-items:center!important;gap:13px!important;padding:14px 16px!important;border:1px solid var(--line)!important;border-radius:18px!important;background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;box-shadow:var(--shadow)!important;min-height:76px!important}.dark .svc147-kpi-card{background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important}.svc147-kpi-card i{width:42px!important;height:42px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-style:normal!important;font-size:19px!important}.svc147-kpi-card.pending i{background:rgba(245,158,11,.14)!important}.svc147-kpi-card.active i{background:rgba(34,197,94,.14)!important}.svc147-kpi-card.sync i{background:rgba(124,58,237,.14)!important}.svc147-kpi-card span{font-size:11px!important;font-weight:950!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.03em!important}.svc147-kpi-card b{font-size:24px!important;color:var(--text)!important;line-height:1!important;margin:4px 6px 0 0!important;display:inline-block!important}.svc147-kpi-card small{font-size:11px!important;color:var(--muted)!important}
.svc147-main-grid{grid-template-columns:1.18fr .82fr!important;align-items:start!important}.svc147-form-card{overflow:visible!important}.svc147-card-title{display:flex!important;align-items:center!important;gap:12px!important;padding-bottom:13px!important;margin-bottom:13px!important;border-bottom:1px solid var(--line)!important}.svc147-card-icon{width:44px!important;height:44px!important;border-radius:14px!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:21px!important}.svc147-card-title h3{margin:0!important;font-size:18px!important}.svc147-card-title p{margin:4px 0 0!important;font-size:12px!important;color:var(--muted)!important}
.svc147-form label{position:relative!important}.svc147-form input,.svc147-form select,.svc147-form textarea{min-height:42px!important;border-radius:13px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(96,165,250,.26)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important}.dark .svc147-form input,.dark .svc147-form select,.dark .svc147-form textarea{background:rgba(15,23,42,.42)!important;border-color:rgba(148,163,184,.20)!important}.svc147-form textarea{min-height:78px!important}.svc147-optional{font-size:10px!important;color:var(--muted)!important}.svc147-counter{position:absolute!important;right:12px!important;bottom:10px!important;color:var(--muted)!important;font-size:11px!important;font-weight:800!important}
.svc147-sync-note{padding:13px 14px!important;border-radius:16px!important;border:1px dashed rgba(96,165,250,.26)!important;background:linear-gradient(135deg,rgba(35,109,255,.075),rgba(0,184,255,.045))!important}.dark .svc147-sync-note{background:linear-gradient(135deg,rgba(35,109,255,.13),rgba(0,184,255,.035))!important;border-color:rgba(148,163,184,.20)!important}.svc147-sync-note label{display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;font-weight:950!important;color:var(--text)!important}.svc147-sync-note input{width:18px!important;height:18px!important;accent-color:#236dff!important}.svc147-sync-note small{display:block!important;margin-top:8px!important;color:var(--muted)!important;line-height:1.45!important}
.svc147-action-row{display:grid!important;grid-template-columns:1fr 190px!important;gap:10px!important}.svc147-primary-btn{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;border:0!important;border-radius:14px!important;background:linear-gradient(90deg,#236dff,#8b5cf6)!important;color:#fff!important;font-size:13px!important;font-weight:950!important;box-shadow:0 15px 30px rgba(35,109,255,.25)!important;cursor:pointer!important}.svc147-reset-btn{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;border-radius:14px!important;border:1px solid var(--line)!important;background:var(--panel2)!important;color:var(--text)!important;font-size:12px!important;font-weight:950!important;text-decoration:none!important}
.svc147-side-stack{display:flex!important;flex-direction:column!important;gap:12px!important}.svc147-info-card{display:flex!important;align-items:center!important;gap:13px!important;margin:0!important}.svc147-info-card h3,.svc147-status-card h3,.svc147-guide-card h3{margin:0 0 4px!important;font-size:14px!important}.svc147-info-card p{margin:0!important;font-size:12px!important;line-height:1.5!important;color:var(--muted)!important}.svc147-info-icon{width:46px!important;height:46px!important;min-width:46px!important;border-radius:15px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:19px!important;box-shadow:0 12px 24px rgba(15,23,42,.10)!important}.svc147-info-icon.blue{background:linear-gradient(135deg,#236dff,#00b8ff)!important}.svc147-info-icon.green{background:linear-gradient(135deg,#10b981,#34d399)!important}.svc147-info-icon.purple{background:linear-gradient(135deg,#7c3aed,#a855f7)!important}.svc147-info-icon.amber{background:linear-gradient(135deg,#f59e0b,#facc15)!important}.svc147-small-btn{margin-left:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;padding:0 14px!important;border-radius:12px!important;border:1px solid rgba(96,165,250,.26)!important;text-decoration:none!important;color:#236dff!important;font-weight:950!important;font-size:12px!important;background:rgba(255,255,255,.50)!important}.dark .svc147-small-btn{background:rgba(255,255,255,.04)!important}
.svc147-status-card{display:flex!important;align-items:center!important;gap:13px!important;margin:0!important}.svc147-status-content{flex:1!important}.svc147-status-metrics{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}.svc147-status-metrics>div{border-right:1px solid var(--line)!important}.svc147-status-metrics>div:last-child{border-right:0!important}.svc147-status-metrics span{display:block!important;font-size:10px!important;color:var(--muted)!important;font-weight:900!important}.svc147-status-metrics b{display:block!important;font-size:22px!important;color:#236dff!important;line-height:1!important;margin-top:6px!important}.svc147-status-metrics small{font-size:10px!important;color:var(--muted)!important}.svc147-guide-card{display:flex!important;gap:13px!important;margin:0!important}.svc147-guide-card ul{margin:8px 0 0!important;padding:0!important;list-style:none!important}.svc147-guide-card li{position:relative!important;padding-left:20px!important;margin:6px 0!important;color:var(--muted)!important;font-size:12px!important;line-height:1.35!important}.svc147-guide-card li:before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:950}
.svc147-table-card{margin-top:14px!important}.svc147-table-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:12px!important}.svc147-table-head h3{margin:0!important}.svc147-table-head p{margin:4px 0 0!important}.svc147-table-tools{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}.svc147-table-tools input{height:36px!important;width:250px!important;border-radius:12px!important;border:1px solid var(--line)!important;background:rgba(255,255,255,.68)!important;padding:0 12px!important}.svc147-table-tools button{height:36px!important;border-radius:12px!important;border:1px solid var(--line)!important;background:var(--panel2)!important;color:var(--text)!important;font-weight:900!important;padding:0 12px!important}.svc147-empty{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;min-height:96px!important;border:1px solid rgba(96,165,250,.18)!important;border-radius:16px!important;background:rgba(148,163,184,.08)!important}.svc147-empty-icon{width:48px!important;height:48px!important;border-radius:50%!important;background:rgba(148,163,184,.18)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:21px!important}.svc147-empty b{display:block!important;color:var(--text)!important}.svc147-empty span{display:block!important;color:var(--muted)!important;font-size:12px!important;margin-top:4px!important}.svc147-package-badge{display:inline-flex!important;align-items:center!important;padding:5px 8px!important;border-radius:8px!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;border:1px solid rgba(35,109,255,.18)!important;font-weight:900!important;font-size:11px!important}
@media(max-width:1100px){.svc147-main-grid{grid-template-columns:1fr!important}.svc147-kpi{grid-template-columns:1fr!important}.svc147-table-head{flex-direction:column!important;align-items:stretch!important}.svc147-table-tools input{width:100%!important}}@media(max-width:700px){.svc147-action-row{grid-template-columns:1fr!important}.svc147-status-metrics{grid-template-columns:1fr!important}.svc147-status-metrics>div{border-right:0!important;border-bottom:1px solid var(--line)!important;padding-bottom:8px!important}.svc147-status-metrics>div:last-child{border-bottom:0!important}.svc147-page-head h2{font-size:20px!important}}
/* === END V147 === */


/* === V148 PAKET INTERNET PREMIUM === */
.pkg148-page-head{display:flex!important;align-items:center!important;gap:14px!important;margin:0 0 14px!important}.pkg148-head-icon{width:48px!important;height:48px!important;border-radius:15px!important;background:linear-gradient(135deg,#236dff,#00b8ff)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:22px!important;box-shadow:0 16px 30px rgba(35,109,255,.24)!important}.pkg148-page-head h2{margin:0!important;font-size:24px!important;letter-spacing:-.03em!important;color:var(--text)!important}.pkg148-page-head p{margin:4px 0 0!important;color:var(--muted)!important;font-weight:800!important;font-size:12px!important}.pkg148-page-head span{padding:0 6px!important}
.pkg148-kpi-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important}.pkg148-kpi-card{display:flex!important;align-items:center!important;gap:13px!important;padding:14px 16px!important;border:1px solid var(--line)!important;border-radius:18px!important;background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;box-shadow:var(--shadow)!important;min-height:78px!important}.dark .pkg148-kpi-card{background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important}.pkg148-kpi-card i{width:42px!important;height:42px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-style:normal!important;background:rgba(255,255,255,.74)!important}.dark .pkg148-kpi-card i{background:rgba(255,255,255,.08)!important}.pkg148-kpi-card b{display:block!important;font-size:24px!important;line-height:1!important;color:var(--text)!important}.pkg148-kpi-card span{display:block!important;font-size:11px!important;font-weight:900!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-bottom:4px!important}.pkg148-kpi-card small{font-size:12px!important;color:var(--muted)!important}.pkg148-kpi-card.blue i{color:#236dff!important}.pkg148-kpi-card.green i{color:#16a34a!important}.pkg148-kpi-card.purple i{color:#8b5cf6!important}.pkg148-kpi-card.amber i{color:#d97706!important}
.pkg148-main-grid{grid-template-columns:1.16fr .84fr!important;align-items:start!important}.pkg148-card-title{display:flex!important;align-items:center!important;gap:12px!important;padding-bottom:13px!important;margin-bottom:13px!important;border-bottom:1px solid var(--line)!important}.pkg148-title-icon{width:44px!important;height:44px!important;border-radius:14px!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:20px!important}.pkg148-card-title h3{margin:0!important;font-size:22px!important}.pkg148-card-title p{margin:5px 0 0!important;font-size:13px!important;color:var(--muted)!important}
.pkg148-form label{position:relative!important}.pkg148-form input,.pkg148-form select,.pkg148-form textarea{min-height:42px!important;border-radius:13px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(96,165,250,.26)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important}.dark .pkg148-form input,.dark .pkg148-form select,.dark .pkg148-form textarea{background:rgba(15,23,42,.42)!important;border-color:rgba(148,163,184,.20)!important}.pkg148-form textarea{min-height:84px!important;resize:vertical!important}.pkg148-section-label{grid-column:1/-1!important;font-size:12px!important;font-weight:900!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#236dff!important;padding:2px 2px 0!important}.pkg148-section-label.plain{padding:0!important;margin-bottom:4px!important}.pkg148-export-box{display:grid!important;grid-template-columns:1fr 220px!important;gap:16px!important;border:1px solid rgba(96,165,250,.20)!important;background:linear-gradient(135deg,rgba(35,109,255,.06),rgba(0,184,255,.03))!important;border-radius:18px!important;padding:16px!important;align-items:center!important}.dark .pkg148-export-box{background:linear-gradient(135deg,rgba(35,109,255,.13),rgba(0,184,255,.04))!important;border-color:rgba(148,163,184,.20)!important}.pkg148-export-box p{margin:2px 0 10px!important;color:var(--muted)!important;line-height:1.6!important}.pkg148-tag-row{display:flex!important;gap:8px!important;flex-wrap:wrap!important}.pkg148-tag-row span{display:inline-flex!important;align-items:center!important;height:30px!important;padding:0 12px!important;border-radius:999px!important;background:rgba(37,99,235,.10)!important;color:#236dff!important;font-size:12px!important;font-weight:900!important;border:1px solid rgba(37,99,235,.16)!important}.pkg148-export-right{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:1px dashed rgba(96,165,250,.22)!important;border-radius:16px!important;padding:16px!important;min-height:118px!important}.dark .pkg148-export-right{border-color:rgba(148,163,184,.20)!important}.pkg148-switch{position:relative!important;display:inline-block!important;width:74px!important;height:40px!important}.pkg148-switch input{display:none!important}.pkg148-slider{position:absolute!important;cursor:pointer!important;inset:0!important;background:#cbd5e1!important;border-radius:999px!important;transition:.2s!important;box-shadow:inset 0 2px 7px rgba(0,0,0,.08)!important}.pkg148-slider:before{content:""!important;position:absolute!important;height:30px!important;width:30px!important;left:5px!important;top:5px!important;background:white!important;border-radius:50%!important;transition:.2s!important;box-shadow:0 3px 10px rgba(0,0,0,.18)!important}.pkg148-switch input:checked + .pkg148-slider{background:linear-gradient(90deg,#16a34a,#22c55e)!important}.pkg148-switch input:checked + .pkg148-slider:before{transform:translateX(34px)!important}.pkg148-action-row{display:flex!important;gap:10px!important;justify-content:flex-end!important;align-items:center!important}.pkg148-save-btn{display:flex!important;align-items:center!important;justify-content:center!important;min-width:280px!important;min-height:46px!important;border:0!important;border-radius:14px!important;background:linear-gradient(90deg,#236dff,#00b8ff)!important;color:#fff!important;font-size:14px!important;font-weight:950!important;box-shadow:0 15px 30px rgba(35,109,255,.25)!important;cursor:pointer!important}.pkg148-cancel-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:46px!important;padding:0 18px!important;border-radius:14px!important;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--text)!important;text-decoration:none!important;font-weight:900!important}
.pkg148-side-stack{display:flex!important;flex-direction:column!important;gap:12px!important}.pkg148-side-card{display:flex!important;gap:13px!important;align-items:flex-start!important}.pkg148-side-icon{width:46px!important;height:46px!important;min-width:46px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:20px!important;background:rgba(59,130,246,.12)!important}.pkg148-side-icon.blue{color:#2563eb!important}.pkg148-side-icon.green{color:#16a34a!important}.pkg148-side-icon.amber{color:#d97706!important}.pkg148-side-card h3,.pkg148-preview-card h3{margin:0 0 4px!important;font-size:16px!important}.pkg148-side-card p{margin:0!important;font-size:13px!important;color:var(--muted)!important;line-height:1.6!important}.pkg148-list{margin:0!important;padding-left:18px!important;color:var(--muted)!important}.pkg148-list li{margin:0 0 8px!important;line-height:1.5!important}.pkg148-preview-card pre{margin:10px 0 10px!important;overflow:auto!important;background:#03162d!important;color:#d6eeff!important;padding:14px!important;border-radius:14px!important;font-size:12px!important;line-height:1.65!important}.pkg148-preview-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.pkg148-table-card{margin-top:14px!important}.pkg148-table-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:12px!important}.pkg148-table-head h3{margin:0!important}.pkg148-table-tools{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}.pkg148-table-tools input{height:38px!important;width:280px!important;border-radius:12px!important;border:1px solid var(--line)!important;padding:0 12px!important;background:rgba(255,255,255,.72)!important}.dark .pkg148-table-tools input{background:rgba(15,23,42,.42)!important}.pkg148-empty{display:flex!important;align-items:center!important;gap:14px!important;padding:28px 8px!important;color:var(--muted)!important}.pkg148-empty-icon{width:52px!important;height:52px!important;border-radius:18px!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px!important}.pkg148-empty b{display:block!important;color:var(--text)!important;margin-bottom:3px!important}.pkg148-empty span{display:block!important;font-size:13px!important}.pkg148-table-card table td b{font-size:15px!important}.pkg148-table-card .row-actions{white-space:nowrap!important}.pkg148-table-card .row-actions .btn{margin-right:6px!important}.pkg148-table-card .row-actions .btn:last-child{margin-right:0!important}
@media(max-width:1180px){.pkg148-main-grid{grid-template-columns:1fr!important}.pkg148-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:800px){.pkg148-kpi-grid{grid-template-columns:1fr!important}.pkg148-export-box{grid-template-columns:1fr!important}.pkg148-action-row{flex-direction:column!important;align-items:stretch!important}.pkg148-save-btn,.pkg148-cancel-btn{min-width:0!important;width:100%!important}.pkg148-table-head{flex-direction:column!important;align-items:stretch!important}.pkg148-table-tools input{width:100%!important}}
/* === END V148 === */


/* === V149 SMART TOPBAR GREETING === */
.fns149-smart-greeting{
  display:block!important;
  max-width:900px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  line-height:1.35!important;
}
.topbar .title-block .fns149-smart-greeting{
  color:var(--muted)!important;
}
body.dark .topbar .title-block .fns149-smart-greeting{
  color:#d6e4f2!important;
}
@media(max-width:900px){
  .fns149-smart-greeting{
    max-width:100%!important;
    font-size:12px!important;
  }
}
/* === END V149 === */


/* === V150 HIDE PACKAGE FORM UNTIL ADD/EDIT === */
.pkg150-toolbar-card{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin-bottom:14px!important;
  border-radius:22px!important;
  padding:18px 20px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(235,247,255,.70))!important;
}
body.dark .pkg150-toolbar-card{
  background:linear-gradient(135deg,rgba(15,23,42,.88),rgba(30,41,59,.74))!important;
}
.pkg150-toolbar-left{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.pkg150-toolbar-icon{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:22px!important;
}
.pkg150-toolbar-left h3{
  margin:0!important;
  font-size:20px!important;
  color:var(--text)!important;
}
.pkg150-toolbar-left p{
  margin:5px 0 0!important;
  color:var(--muted)!important;
  line-height:1.45!important;
}
.pkg150-toolbar-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.pkg150-add-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:950!important;
  font-size:13px!important;
  box-shadow:0 15px 30px rgba(35,109,255,.24)!important;
  border:0!important;
}
.pkg150-add-btn.small{
  min-height:36px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  font-size:12px!important;
  box-shadow:0 10px 20px rgba(35,109,255,.18)!important;
}
.pkg150-soft-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:13px!important;
}
.pkg150-form-section{
  margin-bottom:14px!important;
  animation:pkg150FadeIn .18s ease-out!important;
}
@keyframes pkg150FadeIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.pkg150-table-card{
  margin-top:0!important;
}
@media(max-width:860px){
  .pkg150-toolbar-card{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .pkg150-toolbar-actions{
    justify-content:stretch!important;
  }
  .pkg150-add-btn,.pkg150-soft-btn{
    width:100%!important;
  }
}
/* === END V150 === */


/* === V151 TIKET GANGGUAN PREMIUM === */
.ticket151-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 14px!important;
}
.ticket151-head-icon{
  width:50px!important;
  height:50px!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:23px!important;
  box-shadow:0 16px 30px rgba(35,109,255,.24)!important;
}
.ticket151-head h2{
  margin:0!important;
  font-size:24px!important;
  letter-spacing:-.03em!important;
  color:var(--text)!important;
}
.ticket151-head p{
  margin:4px 0 0!important;
  color:var(--muted)!important;
  font-weight:800!important;
  font-size:13px!important;
}
.ticket151-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.ticket151-kpi{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:14px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;
  box-shadow:var(--shadow)!important;
  min-height:78px!important;
  position:relative!important;
  overflow:hidden!important;
}
body.dark .ticket151-kpi{
  background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important;
}
.ticket151-kpi:after{
  content:""!important;
  position:absolute!important;
  right:-20px!important;
  bottom:-22px!important;
  width:78px!important;
  height:78px!important;
  border-radius:999px!important;
  background:rgba(35,109,255,.08)!important;
}
.ticket151-kpi i{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-style:normal!important;
  background:rgba(255,255,255,.68)!important;
  z-index:1!important;
}
body.dark .ticket151-kpi i{background:rgba(255,255,255,.08)!important}
.ticket151-kpi span{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  color:var(--muted)!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  margin-bottom:4px!important;
}
.ticket151-kpi b{
  display:inline-block!important;
  font-size:25px!important;
  line-height:1!important;
  color:var(--text)!important;
  margin-right:6px!important;
}
.ticket151-kpi small{font-size:12px!important;color:var(--muted)!important}
.ticket151-kpi.open i{color:#236dff!important}
.ticket151-kpi.progress i{color:#7c3aed!important}
.ticket151-kpi.urgent i{color:#ef4444!important}
.ticket151-kpi.unassigned i{color:#f59e0b!important}

.ticket151-main{
  grid-template-columns:1.18fr .82fr!important;
  align-items:start!important;
}
.ticket151-form-card{
  overflow:visible!important;
}
.ticket151-card-head{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-bottom:13px!important;
  margin-bottom:13px!important;
  border-bottom:1px solid var(--line)!important;
}
.ticket151-card-icon{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:20px!important;
}
.ticket151-card-head h3{
  margin:0!important;
  font-size:20px!important;
  color:var(--text)!important;
}
.ticket151-card-head p{
  margin:5px 0 0!important;
  color:var(--muted)!important;
  line-height:1.5!important;
  font-size:13px!important;
}
.ticket151-form input,
.ticket151-form select,
.ticket151-form textarea{
  min-height:44px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(96,165,250,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body.dark .ticket151-form input,
body.dark .ticket151-form select,
body.dark .ticket151-form textarea{
  background:rgba(15,23,42,.42)!important;
  border-color:rgba(148,163,184,.20)!important;
}
.ticket151-form textarea{
  min-height:92px!important;
  resize:vertical!important;
}
.ticket151-action-row{
  display:flex!important;
  justify-content:flex-end!important;
}
.ticket151-primary-btn{
  min-height:46px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(90deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  box-shadow:0 15px 30px rgba(35,109,255,.25)!important;
  cursor:pointer!important;
}
.ticket151-side-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.ticket151-flow-card h3{
  margin:0 0 12px!important;
  font-size:18px!important;
}
.ticket151-flow{
  display:grid!important;
  gap:10px!important;
}
.ticket151-flow>div{
  display:grid!important;
  grid-template-columns:36px 1fr!important;
  gap:10px!important;
  align-items:start!important;
  padding:12px!important;
  border-radius:15px!important;
  border:1px solid rgba(96,165,250,.18)!important;
  background:rgba(255,255,255,.42)!important;
}
body.dark .ticket151-flow>div{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(148,163,184,.18)!important;
}
.ticket151-flow b{
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-weight:950!important;
  grid-row:span 2!important;
}
.ticket151-flow span{
  font-weight:950!important;
  color:var(--text)!important;
}
.ticket151-flow small{
  color:var(--muted)!important;
  line-height:1.45!important;
}
.ticket151-info-card{
  display:flex!important;
  gap:13px!important;
  align-items:flex-start!important;
}
.ticket151-info-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:20px!important;
}
.ticket151-info-icon.blue{background:linear-gradient(135deg,#236dff,#00b8ff)!important}
.ticket151-info-icon.green{background:linear-gradient(135deg,#16a34a,#22c55e)!important}
.ticket151-info-icon.amber{background:linear-gradient(135deg,#f59e0b,#facc15)!important}
.ticket151-info-card h3{
  margin:0 0 5px!important;
  font-size:16px!important;
}
.ticket151-info-card p{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.55!important;
  font-size:13px!important;
}

.ticket151-table-card{
  margin-top:14px!important;
}
.ticket151-table-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.ticket151-table-head h3{
  margin:0!important;
  font-size:20px!important;
}
.ticket151-table-head p{
  margin:5px 0 0!important;
}
.ticket151-table-tools{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.ticket151-table-tools input{
  height:38px!important;
  width:285px!important;
  border-radius:13px!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.72)!important;
  padding:0 13px!important;
}
body.dark .ticket151-table-tools input{
  background:rgba(15,23,42,.42)!important;
}
.ticket151-table td{
  vertical-align:top!important;
}
.ticket151-priority,
.ticket151-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:28px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
.ticket151-priority.low{background:rgba(148,163,184,.15)!important;color:#64748b!important;border:1px solid rgba(148,163,184,.20)!important}
.ticket151-priority.medium{background:rgba(59,130,246,.12)!important;color:#2563eb!important;border:1px solid rgba(59,130,246,.22)!important}
.ticket151-priority.high{background:rgba(245,158,11,.14)!important;color:#d97706!important;border:1px solid rgba(245,158,11,.24)!important}
.ticket151-priority.urgent{background:rgba(239,68,68,.14)!important;color:#dc2626!important;border:1px solid rgba(239,68,68,.24)!important}
.ticket151-status.open{background:rgba(59,130,246,.12)!important;color:#2563eb!important;border:1px solid rgba(59,130,246,.22)!important}
.ticket151-status.progress{background:rgba(124,58,237,.13)!important;color:#7c3aed!important;border:1px solid rgba(124,58,237,.24)!important}
.ticket151-status.resolved{background:rgba(34,197,94,.13)!important;color:#16a34a!important;border:1px solid rgba(34,197,94,.24)!important}
.ticket151-status.closed{background:rgba(15,23,42,.08)!important;color:#475569!important;border:1px solid rgba(15,23,42,.12)!important}
body.dark .ticket151-status.closed{background:rgba(255,255,255,.06)!important;color:#e2e8f0!important;border-color:rgba(255,255,255,.12)!important}
.ticket151-unassigned{
  display:inline-flex!important;
  padding:6px 9px!important;
  border-radius:999px!important;
  background:rgba(245,158,11,.12)!important;
  color:#d97706!important;
  font-size:11px!important;
  font-weight:950!important;
}
.ticket151-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  min-width:210px!important;
}
.ticket151-actions>a:not(.fns112-action){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:950!important;
  background:rgba(59,130,246,.12)!important;
  color:#2563eb!important;
  border:1px solid rgba(59,130,246,.20)!important;
}
.ticket151-actions>a.ok{
  background:rgba(34,197,94,.13)!important;
  color:#16a34a!important;
  border-color:rgba(34,197,94,.24)!important;
}
.ticket151-actions>a.close{
  background:rgba(15,23,42,.07)!important;
  color:#475569!important;
  border-color:rgba(15,23,42,.12)!important;
}
body.dark .ticket151-actions>a.close{
  background:rgba(255,255,255,.06)!important;
  color:#e2e8f0!important;
  border-color:rgba(255,255,255,.12)!important;
}
.ticket151-empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  min-height:96px!important;
  border-radius:18px!important;
  border:1px dashed rgba(96,165,250,.22)!important;
  background:rgba(148,163,184,.09)!important;
}
.ticket151-empty-icon{
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:24px!important;
}
.ticket151-empty b{
  display:block!important;
  color:var(--text)!important;
  margin-bottom:4px!important;
}
.ticket151-empty span{
  display:block!important;
  color:var(--muted)!important;
  font-size:13px!important;
}

@media(max-width:1180px){
  .ticket151-main{grid-template-columns:1fr!important}
  .ticket151-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:780px){
  .ticket151-kpi-grid{grid-template-columns:1fr!important}
  .ticket151-table-head{flex-direction:column!important;align-items:stretch!important}
  .ticket151-table-tools input{width:100%!important}
  .ticket151-actions{min-width:0!important}
}
/* === END V151 === */


/* === V152 WORK ORDER PREMIUM === */
.wo152-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 14px!important;
}
.wo152-head-icon{
  width:50px!important;
  height:50px!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:23px!important;
  box-shadow:0 16px 30px rgba(35,109,255,.24)!important;
}
.wo152-head h2{
  margin:0!important;
  font-size:24px!important;
  letter-spacing:-.03em!important;
  color:var(--text)!important;
}
.wo152-head p{
  margin:4px 0 0!important;
  color:var(--muted)!important;
  font-weight:800!important;
  font-size:13px!important;
}
.wo152-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.wo152-kpi{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:14px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;
  box-shadow:var(--shadow)!important;
  min-height:78px!important;
  position:relative!important;
  overflow:hidden!important;
}
body.dark .wo152-kpi{
  background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important;
}
.wo152-kpi:after{
  content:""!important;
  position:absolute!important;
  right:-20px!important;
  bottom:-22px!important;
  width:78px!important;
  height:78px!important;
  border-radius:999px!important;
  background:rgba(35,109,255,.08)!important;
}
.wo152-kpi i{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-style:normal!important;
  background:rgba(255,255,255,.68)!important;
  z-index:1!important;
}
body.dark .wo152-kpi i{background:rgba(255,255,255,.08)!important}
.wo152-kpi span{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  color:var(--muted)!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  margin-bottom:4px!important;
}
.wo152-kpi b{
  display:inline-block!important;
  font-size:25px!important;
  line-height:1!important;
  color:var(--text)!important;
  margin-right:6px!important;
}
.wo152-kpi small{font-size:12px!important;color:var(--muted)!important}
.wo152-kpi.scheduled i{color:#236dff!important}
.wo152-kpi.progress i{color:#7c3aed!important}
.wo152-kpi.today i{color:#f59e0b!important}
.wo152-kpi.done i{color:#16a34a!important}

.wo152-main{
  grid-template-columns:1.18fr .82fr!important;
  align-items:start!important;
}
.wo152-form-card{overflow:visible!important}
.wo152-card-head{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-bottom:13px!important;
  margin-bottom:13px!important;
  border-bottom:1px solid var(--line)!important;
}
.wo152-card-icon{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:20px!important;
}
.wo152-card-head h3{
  margin:0!important;
  font-size:20px!important;
  color:var(--text)!important;
}
.wo152-card-head p{
  margin:5px 0 0!important;
  color:var(--muted)!important;
  line-height:1.5!important;
  font-size:13px!important;
}
.wo152-form input,
.wo152-form select,
.wo152-form textarea{
  min-height:44px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(96,165,250,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body.dark .wo152-form input,
body.dark .wo152-form select,
body.dark .wo152-form textarea{
  background:rgba(15,23,42,.42)!important;
  border-color:rgba(148,163,184,.20)!important;
}
.wo152-form textarea{
  min-height:92px!important;
  resize:vertical!important;
}
.wo152-action-row{
  display:flex!important;
  justify-content:flex-end!important;
}
.wo152-primary-btn{
  min-height:46px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(90deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  box-shadow:0 15px 30px rgba(35,109,255,.25)!important;
  cursor:pointer!important;
}
.wo152-side-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.wo152-flow-card h3{
  margin:0 0 12px!important;
  font-size:18px!important;
}
.wo152-flow{
  display:grid!important;
  gap:10px!important;
}
.wo152-flow>div{
  display:grid!important;
  grid-template-columns:36px 1fr!important;
  gap:10px!important;
  align-items:start!important;
  padding:12px!important;
  border-radius:15px!important;
  border:1px solid rgba(96,165,250,.18)!important;
  background:rgba(255,255,255,.42)!important;
}
body.dark .wo152-flow>div{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(148,163,184,.18)!important;
}
.wo152-flow b{
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-weight:950!important;
  grid-row:span 2!important;
}
.wo152-flow span{
  font-weight:950!important;
  color:var(--text)!important;
}
.wo152-flow small{
  color:var(--muted)!important;
  line-height:1.45!important;
}
.wo152-info-card{
  display:flex!important;
  gap:13px!important;
  align-items:flex-start!important;
}
.wo152-info-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:20px!important;
}
.wo152-info-icon.blue{background:linear-gradient(135deg,#236dff,#00b8ff)!important}
.wo152-info-icon.green{background:linear-gradient(135deg,#16a34a,#22c55e)!important}
.wo152-info-icon.amber{background:linear-gradient(135deg,#f59e0b,#facc15)!important}
.wo152-info-card h3{
  margin:0 0 5px!important;
  font-size:16px!important;
}
.wo152-info-card p{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.55!important;
  font-size:13px!important;
}
.wo152-table-card{
  margin-top:14px!important;
}
.wo152-table-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.wo152-table-head h3{
  margin:0!important;
  font-size:20px!important;
}
.wo152-table-head p{margin:5px 0 0!important}
.wo152-table-tools{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.wo152-table-tools input{
  height:38px!important;
  width:285px!important;
  border-radius:13px!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.72)!important;
  padding:0 13px!important;
}
body.dark .wo152-table-tools input{background:rgba(15,23,42,.42)!important}
.wo152-table td{vertical-align:top!important}
.wo152-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:28px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
.wo152-status.open{background:rgba(59,130,246,.12)!important;color:#2563eb!important;border:1px solid rgba(59,130,246,.22)!important}
.wo152-status.scheduled{background:rgba(245,158,11,.14)!important;color:#d97706!important;border:1px solid rgba(245,158,11,.24)!important}
.wo152-status.progress{background:rgba(124,58,237,.13)!important;color:#7c3aed!important;border:1px solid rgba(124,58,237,.24)!important}
.wo152-status.done{background:rgba(34,197,94,.13)!important;color:#16a34a!important;border:1px solid rgba(34,197,94,.24)!important}
.wo152-status.cancelled{background:rgba(239,68,68,.13)!important;color:#dc2626!important;border:1px solid rgba(239,68,68,.22)!important}
.wo152-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  min-width:220px!important;
}
.wo152-actions>a:not(.fns112-action){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:950!important;
  background:rgba(59,130,246,.12)!important;
  color:#2563eb!important;
  border:1px solid rgba(59,130,246,.20)!important;
}
.wo152-actions>a.ok{
  background:rgba(34,197,94,.13)!important;
  color:#16a34a!important;
  border-color:rgba(34,197,94,.24)!important;
}
.wo152-actions>a.cancel{
  background:rgba(239,68,68,.12)!important;
  color:#dc2626!important;
  border-color:rgba(239,68,68,.22)!important;
}
.wo152-empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  min-height:96px!important;
  border-radius:18px!important;
  border:1px dashed rgba(96,165,250,.22)!important;
  background:rgba(148,163,184,.09)!important;
}
.wo152-empty-icon{
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:24px!important;
}
.wo152-empty b{
  display:block!important;
  color:var(--text)!important;
  margin-bottom:4px!important;
}
.wo152-empty span{
  display:block!important;
  color:var(--muted)!important;
  font-size:13px!important;
}
@media(max-width:1180px){
  .wo152-main{grid-template-columns:1fr!important}
  .wo152-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:780px){
  .wo152-kpi-grid{grid-template-columns:1fr!important}
  .wo152-table-head{flex-direction:column!important;align-items:stretch!important}
  .wo152-table-tools input{width:100%!important}
  .wo152-actions{min-width:0!important}
}
/* === END V152 === */


/* === V153 TICKET ASSIGN BUTTON === */
.ticket153-assign-form{
  display:grid!important;
  grid-template-columns:minmax(150px,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
  min-width:255px!important;
}
.ticket153-assign-form select{
  min-height:32px!important;
  height:32px!important;
  border-radius:11px!important;
  border:1px solid rgba(96,165,250,.24)!important;
  background:rgba(255,255,255,.72)!important;
  color:var(--text)!important;
  padding:0 9px!important;
  font-size:11px!important;
  font-weight:800!important;
}
body.dark .ticket153-assign-form select{
  background:rgba(15,23,42,.50)!important;
  border-color:rgba(148,163,184,.22)!important;
}
.ticket153-assign-form button{
  min-height:32px!important;
  border:0!important;
  border-radius:11px!important;
  padding:0 11px!important;
  background:linear-gradient(90deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  cursor:pointer!important;
  box-shadow:0 8px 18px rgba(35,109,255,.18)!important;
}
.ticket153-assign-form button:hover{
  filter:brightness(1.04)!important;
}
@media(max-width:760px){
  .ticket153-assign-form{
    min-width:0!important;
    grid-template-columns:1fr!important;
  }
}
/* === END V153 === */


/* === V154 SURVEY PELANGGAN PREMIUM === */
.survey154-head{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 14px!important;
}
.survey154-head-icon{
  width:50px!important;
  height:50px!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:23px!important;
  box-shadow:0 16px 30px rgba(35,109,255,.24)!important;
}
.survey154-head h2{
  margin:0!important;
  font-size:24px!important;
  letter-spacing:-.03em!important;
  color:var(--text)!important;
}
.survey154-head p{
  margin:4px 0 0!important;
  color:var(--muted)!important;
  font-weight:800!important;
  font-size:13px!important;
}
.survey154-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.survey154-kpi{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:14px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;
  box-shadow:var(--shadow)!important;
  min-height:78px!important;
  position:relative!important;
  overflow:hidden!important;
}
body.dark .survey154-kpi{
  background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important;
}
.survey154-kpi:after{
  content:""!important;
  position:absolute!important;
  right:-20px!important;
  bottom:-22px!important;
  width:78px!important;
  height:78px!important;
  border-radius:999px!important;
  background:rgba(35,109,255,.08)!important;
}
.survey154-kpi i{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-style:normal!important;
  background:rgba(255,255,255,.68)!important;
  z-index:1!important;
}
body.dark .survey154-kpi i{background:rgba(255,255,255,.08)!important}
.survey154-kpi span{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  color:var(--muted)!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  margin-bottom:4px!important;
}
.survey154-kpi b{
  display:inline-block!important;
  font-size:25px!important;
  line-height:1!important;
  color:var(--text)!important;
  margin-right:6px!important;
}
.survey154-kpi small{font-size:12px!important;color:var(--muted)!important}
.survey154-kpi.pending i{color:#f59e0b!important}
.survey154-kpi.today i{color:#236dff!important}
.survey154-kpi.approved i{color:#16a34a!important}
.survey154-kpi.rejected i{color:#dc2626!important}

.survey154-main{
  grid-template-columns:1.18fr .82fr!important;
  align-items:start!important;
}
.survey154-form-card{overflow:visible!important}
.survey154-card-head{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-bottom:13px!important;
  margin-bottom:13px!important;
  border-bottom:1px solid var(--line)!important;
}
.survey154-card-icon{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:20px!important;
}
.survey154-card-head h3{
  margin:0!important;
  font-size:20px!important;
  color:var(--text)!important;
}
.survey154-card-head p{
  margin:5px 0 0!important;
  color:var(--muted)!important;
  line-height:1.5!important;
  font-size:13px!important;
}
.survey154-form input,
.survey154-form select,
.survey154-form textarea{
  min-height:44px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(96,165,250,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body.dark .survey154-form input,
body.dark .survey154-form select,
body.dark .survey154-form textarea{
  background:rgba(15,23,42,.42)!important;
  border-color:rgba(148,163,184,.20)!important;
}
.survey154-form textarea{
  min-height:92px!important;
  resize:vertical!important;
}
.survey154-action-row{
  display:flex!important;
  justify-content:flex-end!important;
}
.survey154-primary-btn{
  min-height:46px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(90deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  box-shadow:0 15px 30px rgba(35,109,255,.25)!important;
  cursor:pointer!important;
}
.survey154-side-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.survey154-flow-card h3{
  margin:0 0 12px!important;
  font-size:18px!important;
}
.survey154-flow{
  display:grid!important;
  gap:10px!important;
}
.survey154-flow>div{
  display:grid!important;
  grid-template-columns:36px 1fr!important;
  gap:10px!important;
  align-items:start!important;
  padding:12px!important;
  border-radius:15px!important;
  border:1px solid rgba(96,165,250,.18)!important;
  background:rgba(255,255,255,.42)!important;
}
body.dark .survey154-flow>div{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(148,163,184,.18)!important;
}
.survey154-flow b{
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  color:#fff!important;
  font-weight:950!important;
  grid-row:span 2!important;
}
.survey154-flow span{
  font-weight:950!important;
  color:var(--text)!important;
}
.survey154-flow small{
  color:var(--muted)!important;
  line-height:1.45!important;
}
.survey154-info-card{
  display:flex!important;
  gap:13px!important;
  align-items:flex-start!important;
}
.survey154-info-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:20px!important;
}
.survey154-info-icon.blue{background:linear-gradient(135deg,#236dff,#00b8ff)!important}
.survey154-info-icon.green{background:linear-gradient(135deg,#16a34a,#22c55e)!important}
.survey154-info-icon.amber{background:linear-gradient(135deg,#f59e0b,#facc15)!important}
.survey154-info-card h3{
  margin:0 0 5px!important;
  font-size:16px!important;
}
.survey154-info-card p{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.55!important;
  font-size:13px!important;
}

.survey154-table-card{
  margin-top:14px!important;
}
.survey154-table-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.survey154-table-head h3{
  margin:0!important;
  font-size:20px!important;
}
.survey154-table-head p{margin:5px 0 0!important}
.survey154-table-tools{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.survey154-table-tools input{
  height:38px!important;
  width:285px!important;
  border-radius:13px!important;
  border:1px solid var(--line)!important;
  background:rgba(255,255,255,.72)!important;
  padding:0 13px!important;
}
body.dark .survey154-table-tools input{background:rgba(15,23,42,.42)!important}
.survey154-table td{vertical-align:top!important}
.survey154-result{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:28px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:950!important;
  background:rgba(59,130,246,.12)!important;
  color:#2563eb!important;
  border:1px solid rgba(59,130,246,.22)!important;
}
.survey154-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:28px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
.survey154-status.pending{background:rgba(245,158,11,.14)!important;color:#d97706!important;border:1px solid rgba(245,158,11,.24)!important}
.survey154-status.surveyed{background:rgba(124,58,237,.13)!important;color:#7c3aed!important;border:1px solid rgba(124,58,237,.24)!important}
.survey154-status.approved{background:rgba(34,197,94,.13)!important;color:#16a34a!important;border:1px solid rgba(34,197,94,.24)!important}
.survey154-status.rejected{background:rgba(239,68,68,.13)!important;color:#dc2626!important;border:1px solid rgba(239,68,68,.22)!important}
.survey154-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  min-width:235px!important;
}
.survey154-actions>a:not(.fns112-action){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:950!important;
  background:rgba(59,130,246,.12)!important;
  color:#2563eb!important;
  border:1px solid rgba(59,130,246,.20)!important;
}
.survey154-actions>a.ok{
  background:rgba(34,197,94,.13)!important;
  color:#16a34a!important;
  border-color:rgba(34,197,94,.24)!important;
}
.survey154-actions>a.reject{
  background:rgba(239,68,68,.12)!important;
  color:#dc2626!important;
  border-color:rgba(239,68,68,.22)!important;
}
.survey154-actions>a.edit{
  background:rgba(148,163,184,.12)!important;
  color:var(--text)!important;
  border-color:rgba(148,163,184,.22)!important;
}
.survey154-empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  min-height:96px!important;
  border-radius:18px!important;
  border:1px dashed rgba(96,165,250,.22)!important;
  background:rgba(148,163,184,.09)!important;
}
.survey154-empty-icon{
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(35,109,255,.10)!important;
  color:#236dff!important;
  font-size:24px!important;
}
.survey154-empty b{
  display:block!important;
  color:var(--text)!important;
  margin-bottom:4px!important;
}
.survey154-empty span{
  display:block!important;
  color:var(--muted)!important;
  font-size:13px!important;
}
@media(max-width:1180px){
  .survey154-main{grid-template-columns:1fr!important}
  .survey154-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:780px){
  .survey154-kpi-grid{grid-template-columns:1fr!important}
  .survey154-table-head{flex-direction:column!important;align-items:stretch!important}
  .survey154-table-tools input{width:100%!important}
  .survey154-actions{min-width:0!important}
}
/* === END V154 === */


/* === V155 GENERIC SIMPLE PREMIUM === */
.simple155-head,.mnt155-head{
  display:flex!important;align-items:center!important;gap:14px!important;margin:0 0 14px!important;
}
.simple155-head-icon,.mnt155-head-icon{
  width:50px!important;height:50px!important;border-radius:17px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;color:#fff!important;font-size:23px!important;box-shadow:0 16px 30px rgba(35,109,255,.24)!important;
}
.simple155-head h2,.mnt155-head h2{margin:0!important;font-size:24px!important;letter-spacing:-.03em!important;color:var(--text)!important}
.simple155-head p,.mnt155-head p{margin:4px 0 0!important;color:var(--muted)!important;font-weight:800!important;font-size:13px!important;line-height:1.45!important}

.simple155-kpi-grid,.mnt155-kpi-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important;
}
.simple155-kpi,.mnt155-kpi{
  display:flex!important;align-items:center!important;gap:13px!important;padding:14px 16px!important;border:1px solid var(--line)!important;border-radius:18px!important;
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.82))!important;box-shadow:var(--shadow)!important;min-height:78px!important;position:relative!important;overflow:hidden!important;
}
body.dark .simple155-kpi,body.dark .mnt155-kpi{background:linear-gradient(180deg,var(--panel),rgba(13,27,46,.84))!important}
.simple155-kpi:after,.mnt155-kpi:after{content:""!important;position:absolute!important;right:-20px!important;bottom:-22px!important;width:78px!important;height:78px!important;border-radius:999px!important;background:rgba(35,109,255,.08)!important}
.simple155-kpi i,.mnt155-kpi i{width:42px!important;height:42px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-style:normal!important;background:rgba(255,255,255,.68)!important;z-index:1!important}
body.dark .simple155-kpi i,body.dark .mnt155-kpi i{background:rgba(255,255,255,.08)!important}
.simple155-kpi span,.mnt155-kpi span{display:block!important;font-size:11px!important;font-weight:950!important;color:var(--muted)!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-bottom:4px!important}
.simple155-kpi b,.mnt155-kpi b{display:inline-block!important;font-size:25px!important;line-height:1!important;color:var(--text)!important;margin-right:6px!important}
.simple155-kpi small,.mnt155-kpi small{font-size:12px!important;color:var(--muted)!important}
.simple155-kpi.blue i,.mnt155-kpi.today i{color:#236dff!important}
.simple155-kpi.amber i,.mnt155-kpi.planned i{color:#d97706!important}
.simple155-kpi.purple i,.mnt155-kpi.progress i{color:#7c3aed!important}
.simple155-kpi.green i,.mnt155-kpi.done i{color:#16a34a!important}

.simple155-main,.mnt155-main{grid-template-columns:1.18fr .82fr!important;align-items:start!important}
.simple155-form-card,.mnt155-form-card{overflow:visible!important}
.simple155-card-head,.mnt155-card-head{
  display:flex!important;align-items:center!important;gap:12px!important;padding-bottom:13px!important;margin-bottom:13px!important;border-bottom:1px solid var(--line)!important;
}
.simple155-card-icon,.mnt155-card-icon{
  width:44px!important;height:44px!important;border-radius:15px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;font-size:20px!important;
}
.simple155-card-head h3,.mnt155-card-head h3{margin:0!important;font-size:20px!important;color:var(--text)!important}
.simple155-card-head p,.mnt155-card-head p{margin:5px 0 0!important;color:var(--muted)!important;line-height:1.5!important;font-size:13px!important}
.simple155-form input,.simple155-form select,.simple155-form textarea,.mnt155-form input,.mnt155-form select,.mnt155-form textarea{
  min-height:44px!important;border-radius:14px!important;background:rgba(255,255,255,.74)!important;border:1px solid rgba(96,165,250,.26)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body.dark .simple155-form input,body.dark .simple155-form select,body.dark .simple155-form textarea,body.dark .mnt155-form input,body.dark .mnt155-form select,body.dark .mnt155-form textarea{
  background:rgba(15,23,42,.42)!important;border-color:rgba(148,163,184,.20)!important;
}
.simple155-form textarea,.mnt155-form textarea{min-height:92px!important;resize:vertical!important}
.simple155-action-row,.mnt155-action-row{display:flex!important;gap:10px!important;justify-content:flex-end!important}
.simple155-primary-btn,.mnt155-primary-btn{
  min-height:46px!important;flex:1!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:15px!important;background:linear-gradient(90deg,#236dff,#00b8ff)!important;color:#fff!important;font-size:14px!important;font-weight:950!important;box-shadow:0 15px 30px rgba(35,109,255,.25)!important;cursor:pointer!important;
}
.simple155-soft-btn{
  min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 18px!important;border-radius:15px!important;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--text)!important;text-decoration:none!important;font-weight:900!important;
}
.simple155-side-stack,.mnt155-side-stack{display:flex!important;flex-direction:column!important;gap:12px!important}
.simple155-guide-card h3,.mnt155-flow-card h3{margin:0 0 12px!important;font-size:18px!important}
.simple155-guide-line{
  display:grid!important;grid-template-columns:150px 1fr!important;gap:12px!important;align-items:start!important;padding:12px!important;margin-bottom:10px!important;border-radius:15px!important;border:1px solid rgba(96,165,250,.18)!important;background:rgba(255,255,255,.42)!important;
}
body.dark .simple155-guide-line{background:rgba(255,255,255,.035)!important;border-color:rgba(148,163,184,.18)!important}
.simple155-guide-line b{color:var(--text)!important}.simple155-guide-line span{color:var(--muted)!important;line-height:1.45!important}
.simple155-info-card,.mnt155-info-card{display:flex!important;gap:13px!important;align-items:flex-start!important}
.simple155-info-card i{
  width:46px!important;height:46px!important;min-width:46px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-style:normal!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;font-size:20px!important;
}
.simple155-info-card h3,.mnt155-info-card h3{margin:0 0 5px!important;font-size:16px!important}.simple155-info-card p,.mnt155-info-card p{margin:0!important;color:var(--muted)!important;line-height:1.55!important;font-size:13px!important}
.simple155-table-card,.mnt155-table-card{margin-top:14px!important}
.simple155-table-head,.mnt155-table-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important}
.simple155-table-head h3,.mnt155-table-head h3{margin:0!important;font-size:20px!important}.simple155-table-head p,.mnt155-table-head p{margin:5px 0 0!important}
.simple155-table-tools,.mnt155-table-tools{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.simple155-table-tools input,.mnt155-table-tools input{height:38px!important;width:285px!important;border-radius:13px!important;border:1px solid var(--line)!important;background:rgba(255,255,255,.72)!important;padding:0 13px!important}
body.dark .simple155-table-tools input,body.dark .mnt155-table-tools input{background:rgba(15,23,42,.42)!important}

/* V155 Maintenance */
.mnt155-flow{display:grid!important;gap:10px!important}
.mnt155-flow>div{display:grid!important;grid-template-columns:36px 1fr!important;gap:10px!important;align-items:start!important;padding:12px!important;border-radius:15px!important;border:1px solid rgba(96,165,250,.18)!important;background:rgba(255,255,255,.42)!important}
body.dark .mnt155-flow>div{background:rgba(255,255,255,.035)!important;border-color:rgba(148,163,184,.18)!important}
.mnt155-flow b{width:32px!important;height:32px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#236dff,#00b8ff)!important;color:#fff!important;font-weight:950!important;grid-row:span 2!important}
.mnt155-flow span{font-weight:950!important;color:var(--text)!important}.mnt155-flow small{color:var(--muted)!important;line-height:1.45!important}
.mnt155-info-icon{width:46px!important;height:46px!important;min-width:46px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-size:20px!important}
.mnt155-info-icon.blue{background:linear-gradient(135deg,#236dff,#00b8ff)!important}.mnt155-info-icon.green{background:linear-gradient(135deg,#16a34a,#22c55e)!important}.mnt155-info-icon.amber{background:linear-gradient(135deg,#f59e0b,#facc15)!important}
.mnt155-table td{vertical-align:top!important}
.mnt155-status{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:28px!important;padding:6px 10px!important;border-radius:999px!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.mnt155-status.planned{background:rgba(245,158,11,.14)!important;color:#d97706!important;border:1px solid rgba(245,158,11,.24)!important}
.mnt155-status.progress{background:rgba(124,58,237,.13)!important;color:#7c3aed!important;border:1px solid rgba(124,58,237,.24)!important}
.mnt155-status.done{background:rgba(34,197,94,.13)!important;color:#16a34a!important;border:1px solid rgba(34,197,94,.24)!important}
.mnt155-status.cancelled{background:rgba(239,68,68,.13)!important;color:#dc2626!important;border:1px solid rgba(239,68,68,.22)!important}
.mnt155-actions{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;min-width:245px!important}
.mnt155-actions>a:not(.fns112-action){display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;padding:0 10px!important;border-radius:10px!important;text-decoration:none!important;font-size:11px!important;font-weight:950!important;background:rgba(59,130,246,.12)!important;color:#2563eb!important;border:1px solid rgba(59,130,246,.20)!important}
.mnt155-actions>a.ok{background:rgba(34,197,94,.13)!important;color:#16a34a!important;border-color:rgba(34,197,94,.24)!important}
.mnt155-actions>a.cancel{background:rgba(239,68,68,.12)!important;color:#dc2626!important;border-color:rgba(239,68,68,.22)!important}
.mnt155-actions>a.edit{background:rgba(148,163,184,.12)!important;color:var(--text)!important;border-color:rgba(148,163,184,.22)!important}
.mnt155-empty{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;min-height:96px!important;border-radius:18px!important;border:1px dashed rgba(96,165,250,.22)!important;background:rgba(148,163,184,.09)!important}
.mnt155-empty-icon{width:52px!important;height:52px!important;border-radius:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(35,109,255,.10)!important;color:#236dff!important;font-size:24px!important}
.mnt155-empty b{display:block!important;color:var(--text)!important;margin-bottom:4px!important}.mnt155-empty span{display:block!important;color:var(--muted)!important;font-size:13px!important}

@media(max-width:1180px){.simple155-main,.mnt155-main{grid-template-columns:1fr!important}.simple155-kpi-grid,.mnt155-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:780px){.simple155-kpi-grid,.mnt155-kpi-grid{grid-template-columns:1fr!important}.simple155-table-head,.mnt155-table-head{flex-direction:column!important;align-items:stretch!important}.simple155-table-tools input,.mnt155-table-tools input{width:100%!important}.simple155-guide-line{grid-template-columns:1fr!important}.mnt155-actions{min-width:0!important}.simple155-action-row{flex-direction:column!important}}
/* === END V155 === */


/* === V156 TICKET STABLE FIX === */
.fns70-ticket-panel,
.fns-ticket-native-panel,
.fns-ticket-v74-panel,
.ticket-native-panel,
#fns70TicketPanel,
#fnsTicketNativePanel,
#fnsTicketWorkflowPanel{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.ticket156-stable-guard{
  position:relative!important;
  z-index:1!important;
}
/* === END V156 === */


/* === V157 DARK LUXURY PREMIUM === */
/* Mode gelap dibuat lebih mewah, lebih kontras, dan lebih profesional tanpa mengubah fungsi PHP/JS. */

body.dark,
body.dark html{
  color-scheme:dark!important;
}

body.dark{
  --bg:#07111f!important;
  --panel:#0d1b2f!important;
  --panel2:#10243d!important;
  --card:#0d1b2f!important;
  --soft:#112842!important;
  --line:rgba(125,180,255,.18)!important;
  --text:#f3f8ff!important;
  --muted:#9fb4cf!important;
  --brand:#26a7ff!important;
  --brand2:#7c5cff!important;
  --success:#2ee89f!important;
  --warning:#ffd166!important;
  --danger:#ff5c7a!important;
  --shadow:0 22px 60px rgba(0,0,0,.42)!important;
  background:
    radial-gradient(circle at 15% 0%, rgba(38,167,255,.22) 0, rgba(38,167,255,0) 34%),
    radial-gradient(circle at 90% 12%, rgba(124,92,255,.24) 0, rgba(124,92,255,0) 36%),
    radial-gradient(circle at 72% 82%, rgba(20,184,166,.13) 0, rgba(20,184,166,0) 34%),
    linear-gradient(135deg,#050b16 0%, #07111f 42%, #07101e 100%)!important;
  background-attachment:fixed!important;
}

/* lapisan utama supaya tidak terlihat flat */
body.dark .app,
body.dark .main,
body.dark .content,
body.dark .page,
body.dark main,
body.dark .main-content{
  background:
    linear-gradient(115deg, rgba(10,25,47,.92), rgba(7,17,31,.86) 42%, rgba(16,24,52,.82)),
    radial-gradient(circle at 85% 20%, rgba(34,211,238,.08), transparent 42%),
    radial-gradient(circle at 30% 80%, rgba(124,92,255,.10), transparent 45%)!important;
}

/* topbar lebih elegan */
body.dark .topbar,
body.dark .header,
body.dark .app-header,
body.dark .main-header,
body.dark .page-topbar,
body.dark .top-nav{
  background:
    linear-gradient(90deg, rgba(6,16,31,.96), rgba(11,28,52,.92), rgba(16,20,48,.94))!important;
  border-bottom:1px solid rgba(126,182,255,.18)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(18px)!important;
}

/* sidebar dark premium */
body.dark .sidebar,
body.dark aside,
body.dark .side,
body.dark .leftbar{
  background:
    linear-gradient(180deg, rgba(8,20,37,.98), rgba(9,23,42,.96) 48%, rgba(7,17,31,.98))!important;
  border-right:1px solid rgba(91,151,255,.23)!important;
  box-shadow:14px 0 42px rgba(0,0,0,.32)!important;
}

body.dark .brand,
body.dark .brand-box,
body.dark .brand-area{
  color:#f8fbff!important;
}

body.dark .brand img,
body.dark .sidebar img{
  box-shadow:0 10px 28px rgba(38,167,255,.10)!important;
}

/* search/menu/sidebar item */
body.dark input,
body.dark select,
body.dark textarea{
  color:#eef6ff!important;
  background:linear-gradient(180deg, rgba(13,29,51,.92), rgba(10,24,43,.88))!important;
  border-color:rgba(125,180,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.15)!important;
}

body.dark input::placeholder,
body.dark textarea::placeholder{
  color:#7891ad!important;
}

body.dark select option{
  background:#0b182a!important;
  color:#f3f8ff!important;
}

/* tombol top dan icon */
body.dark .btn,
body.dark button,
body.dark .topbar a,
body.dark .icon-btn,
body.dark .theme-toggle,
body.dark .fns115-theme-btn,
body.dark .profile-chip,
body.dark .user-chip{
  border-color:rgba(125,180,255,.22)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06)!important;
}

body.dark .topbar .btn,
body.dark .header .btn,
body.dark .icon-btn,
body.dark .theme-toggle,
body.dark .fns115-theme-btn{
  background:linear-gradient(180deg, rgba(17,38,65,.96), rgba(10,25,45,.94))!important;
  color:#f6fbff!important;
}

body.dark .topbar .btn:hover,
body.dark .icon-btn:hover,
body.dark .theme-toggle:hover,
body.dark .fns115-theme-btn:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg, rgba(31,70,116,.98), rgba(13,35,64,.96))!important;
  box-shadow:0 14px 32px rgba(38,167,255,.16)!important;
}

/* menu accordion */
body.dark .menu-group,
body.dark .nav-group,
body.dark .sidebar-section,
body.dark .side-section{
  background:linear-gradient(180deg, rgba(13,31,54,.78), rgba(9,24,44,.72))!important;
  border:1px solid rgba(125,180,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.14)!important;
}

body.dark .menu-title,
body.dark .nav-title,
body.dark .sidebar-title{
  color:#bcd0ea!important;
  letter-spacing:.06em!important;
}

body.dark .nav a,
body.dark .menu a,
body.dark .sidebar a,
body.dark .nav-item,
body.dark .menu-item{
  color:#e9f3ff!important;
  border-color:transparent!important;
}

body.dark .nav a:hover,
body.dark .menu a:hover,
body.dark .sidebar a:hover,
body.dark .nav-item:hover,
body.dark .menu-item:hover{
  background:linear-gradient(90deg, rgba(38,167,255,.14), rgba(124,92,255,.10))!important;
  border-color:rgba(38,167,255,.22)!important;
  color:#ffffff!important;
}

body.dark .nav a.active,
body.dark .menu a.active,
body.dark .sidebar a.active,
body.dark .nav-item.active,
body.dark .menu-item.active,
body.dark .active>a{
  background:linear-gradient(90deg, rgba(38,167,255,.25), rgba(124,92,255,.18))!important;
  color:#ffffff!important;
  border-color:rgba(90,178,255,.42)!important;
  box-shadow:0 12px 26px rgba(38,167,255,.13), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* kartu umum */
body.dark .card,
body.dark .panel,
body.dark .box,
body.dark .widget,
body.dark .stat,
body.dark .summary-card,
body.dark .dash-card,
body.dark .simple155-kpi,
body.dark .mnt155-kpi,
body.dark .ticket151-kpi,
body.dark .wo152-kpi,
body.dark .survey154-kpi{
  color:#f4f8ff!important;
  background:
    linear-gradient(145deg, rgba(15,35,60,.92), rgba(9,24,43,.92) 55%, rgba(12,22,45,.92))!important;
  border:1px solid rgba(125,180,255,.20)!important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}

body.dark .card:hover,
body.dark .panel:hover,
body.dark .dash-card:hover,
body.dark .summary-card:hover{
  border-color:rgba(61,178,255,.30)!important;
  box-shadow:
    0 24px 62px rgba(0,0,0,.42),
    0 0 0 1px rgba(61,178,255,.05),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* judul dan teks */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark .title,
body.dark .card-title{
  color:#f8fbff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.20)!important;
}

body.dark p,
body.dark small,
body.dark .muted,
body.dark .subtitle,
body.dark .desc{
  color:#9fb4cf!important;
}

/* tabel */
body.dark table{
  color:#edf6ff!important;
  border-color:rgba(125,180,255,.14)!important;
}

body.dark thead,
body.dark table thead tr,
body.dark th{
  background:linear-gradient(180deg, rgba(20,45,76,.82), rgba(12,30,55,.82))!important;
  color:#cce2ff!important;
  border-color:rgba(125,180,255,.16)!important;
}

body.dark tbody tr,
body.dark table tbody tr{
  background:rgba(10,24,43,.64)!important;
  border-color:rgba(125,180,255,.11)!important;
}

body.dark tbody tr:nth-child(even),
body.dark table tbody tr:nth-child(even){
  background:rgba(14,31,55,.68)!important;
}

body.dark tbody tr:hover,
body.dark table tbody tr:hover{
  background:linear-gradient(90deg, rgba(38,167,255,.10), rgba(124,92,255,.08))!important;
}

body.dark td,
body.dark th{
  border-color:rgba(125,180,255,.12)!important;
}

/* dashboard card khusus agar lebih solid dan mahal */
body.dark .dashboard-card,
body.dark .metric-card,
body.dark .kpi-card,
body.dark [class*="kpi"],
body.dark [class*="stat-card"]{
  position:relative!important;
  overflow:hidden!important;
}

body.dark .dashboard-card:before,
body.dark .metric-card:before,
body.dark .kpi-card:before,
body.dark [class*="kpi"]:before,
body.dark [class*="stat-card"]:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 18% 18%, rgba(74,222,255,.10), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(124,92,255,.13), transparent 36%)!important;
  pointer-events:none!important;
}

body.dark .dashboard-card > *,
body.dark .metric-card > *,
body.dark .kpi-card > *,
body.dark [class*="kpi"] > *,
body.dark [class*="stat-card"] > *{
  position:relative!important;
  z-index:1!important;
}

/* kartu warna dashboard tetap cerah tetapi lebih premium */
body.dark .bg-orange,
body.dark .ticket-total,
body.dark .card-orange{
  background:linear-gradient(135deg,#ff8a2a,#ffb66d)!important;
  color:#fff!important;
  box-shadow:0 18px 50px rgba(255,138,42,.22)!important;
}
body.dark .bg-green,
body.dark .ticket-close,
body.dark .card-green{
  background:linear-gradient(135deg,#16c75b,#68e08f)!important;
  color:#fff!important;
  box-shadow:0 18px 50px rgba(34,197,94,.20)!important;
}
body.dark .bg-purple,
body.dark .ticket-pending,
body.dark .card-purple{
  background:linear-gradient(135deg,#7c5cff,#b18cff)!important;
  color:#fff!important;
  box-shadow:0 18px 50px rgba(124,92,255,.22)!important;
}
body.dark .bg-cyan,
body.dark .card-cyan,
body.dark .team-card{
  background:linear-gradient(135deg,#0ea5e9,#67d5ff)!important;
  color:#fff!important;
  box-shadow:0 18px 50px rgba(14,165,233,.20)!important;
}

/* badge/status */
body.dark .pill,
body.dark .badge,
body.dark .status,
body.dark .tag{
  border:1px solid rgba(125,180,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

body.dark .badge.success,
body.dark .status.active,
body.dark .pill.active,
body.dark .ticket151-status.resolved,
body.dark .wo152-status.done,
body.dark .survey154-status.approved,
body.dark .mnt155-status.done{
  background:rgba(46,232,159,.15)!important;
  color:#66ffbf!important;
  border-color:rgba(46,232,159,.28)!important;
}

body.dark .badge.warning,
body.dark .status.pending,
body.dark .pill.pending{
  background:rgba(255,209,102,.14)!important;
  color:#ffd166!important;
  border-color:rgba(255,209,102,.28)!important;
}

body.dark .badge.danger,
body.dark .status.overdue,
body.dark .pill.overdue{
  background:rgba(255,92,122,.14)!important;
  color:#ff8da2!important;
  border-color:rgba(255,92,122,.28)!important;
}

/* tombol utama */
body.dark button[type="submit"],
body.dark .primary,
body.dark .btn-primary,
body.dark .simple155-primary-btn,
body.dark .mnt155-primary-btn,
body.dark .ticket151-primary-btn,
body.dark .wo152-primary-btn,
body.dark .survey154-primary-btn{
  background:linear-gradient(90deg,#226dff,#00c2ff)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 16px 34px rgba(0,194,255,.18), inset 0 1px 0 rgba(255,255,255,.22)!important;
}

body.dark button[type="submit"]:hover,
body.dark .primary:hover,
body.dark .btn-primary:hover,
body.dark .simple155-primary-btn:hover,
body.dark .mnt155-primary-btn:hover,
body.dark .ticket151-primary-btn:hover,
body.dark .wo152-primary-btn:hover,
body.dark .survey154-primary-btn:hover{
  filter:brightness(1.08)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 22px 42px rgba(0,194,255,.24)!important;
}

/* scrollbar dark premium */
body.dark ::-webkit-scrollbar{
  width:10px!important;
  height:10px!important;
}
body.dark ::-webkit-scrollbar-track{
  background:#07111f!important;
}
body.dark ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2b84ff,#184064)!important;
  border-radius:999px!important;
  border:2px solid #07111f!important;
}
body.dark ::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#46baff,#2563eb)!important;
}

/* fixing kemungkinan area putih/abu-abu pada dark mode */
body.dark .white,
body.dark .bg-white,
body.dark .table-wrap,
body.dark .form-section,
body.dark .content-card,
body.dark .module-card{
  background:linear-gradient(145deg, rgba(15,35,60,.92), rgba(9,24,43,.92))!important;
  color:#f3f8ff!important;
}

/* chart / canvas container */
body.dark canvas,
body.dark .chart,
body.dark .chart-card{
  border-color:rgba(125,180,255,.16)!important;
}

/* responsive tetap aman */
@media(max-width:900px){
  body.dark .card,
  body.dark .panel,
  body.dark .box{
    box-shadow:0 14px 34px rgba(0,0,0,.34)!important;
  }
}
/* === END V157 === */


/* === V158 MOBILE BILLING PORTAL PREMIUM === */
/* Fokus: tampilan HP billing admin + portal pelanggan dibuat seperti aplikasi mobile premium. */

/* Default: nav bawah billing disembunyikan di desktop */
.app-mobile-bottom-nav,
.mobile-nav-backdrop{
  display:none;
}

/* Tablet kecil dan HP */
@media (max-width: 820px){

  html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
  }

  body.app-shell{
    min-width:0!important;
    overflow-x:hidden!important;
    padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;
    background:
      radial-gradient(circle at 0 0,rgba(35,109,255,.20),transparent 34%),
      radial-gradient(circle at 100% 8%,rgba(0,184,255,.18),transparent 30%),
      linear-gradient(180deg,#edf7ff,#f8fbff 44%,#eef9ff)!important;
  }

  body.dark.app-shell{
    background:
      radial-gradient(circle at 0 0,rgba(38,167,255,.19),transparent 34%),
      radial-gradient(circle at 100% 10%,rgba(124,92,255,.19),transparent 32%),
      linear-gradient(180deg,#06101f,#08172a 45%,#05111f)!important;
  }

  body.app-shell .app,
  body.app-shell .main{
    width:100%!important;
    max-width:100vw!important;
    min-height:100svh!important;
    overflow-x:hidden!important;
  }

  body.app-shell .main{
    padding:86px 10px calc(106px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Topbar mobile dibuat compact seperti aplikasi */
  body.app-shell .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:300!important;
    min-height:72px!important;
    margin:0!important;
    padding:9px 10px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    border-radius:0 0 24px 24px!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.94),rgba(232,246,255,.88),rgba(244,240,255,.82))!important;
    border-bottom:1px solid rgba(120,170,235,.24)!important;
    box-shadow:0 14px 38px rgba(35,78,150,.16)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  body.dark.app-shell .topbar{
    background:
      linear-gradient(135deg,rgba(6,16,31,.97),rgba(10,27,49,.94),rgba(18,24,52,.91))!important;
    border-bottom-color:rgba(125,180,255,.20)!important;
    box-shadow:0 16px 42px rgba(0,0,0,.42)!important;
  }

  body.app-shell .mobile-menu{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    border-radius:16px!important;
    font-size:21px!important;
    color:#0f2b4a!important;
    background:linear-gradient(180deg,#ffffff,#eef7ff)!important;
    border:1px solid rgba(120,170,235,.34)!important;
    box-shadow:0 10px 24px rgba(35,78,150,.13)!important;
  }

  body.dark.app-shell .mobile-menu{
    color:#f8fbff!important;
    background:linear-gradient(180deg,rgba(20,45,76,.96),rgba(9,24,43,.96))!important;
    border-color:rgba(125,180,255,.24)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.34)!important;
  }

  body.app-shell .title-block{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    overflow:hidden!important;
  }

  body.app-shell .title-block h1{
    display:none!important;
  }

  body.app-shell .live-clock,
  body.app-shell .fns116-live-clock{
    display:block!important;
    font-size:13px!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:var(--text)!important;
    font-weight:950!important;
  }

  body.app-shell .fns116-auto-greeting,
  body.app-shell .fns149-smart-greeting{
    display:block!important;
    max-width:100%!important;
    font-size:11.5px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:var(--muted)!important;
    font-weight:850!important;
  }

  body.app-shell .top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    min-width:0!important;
  }

  body.app-shell .top-actions .quick,
  body.app-shell .top-actions .user-chip span,
  body.app-shell .top-actions .btn.ghost{
    display:none!important;
  }

  body.app-shell .theme-toggle,
  body.app-shell .topbar-icon,
  body.app-shell .topbar-settings,
  body.app-shell .dash48-ticket-bell,
  body.app-shell .topbar-wa-notif{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    border-radius:14px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:16px!important;
    position:relative!important;
  }

  body.app-shell .topbar-icon em,
  body.app-shell .dash48-ticket-bell em,
  body.app-shell .topbar-wa-notif em{
    position:absolute!important;
    top:-8px!important;
    right:-5px!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    background:#1687ff!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:950!important;
    border:2px solid rgba(255,255,255,.88)!important;
    box-shadow:0 6px 12px rgba(22,135,255,.25)!important;
  }

  body.dark.app-shell .topbar-icon em,
  body.dark.app-shell .dash48-ticket-bell em,
  body.dark.app-shell .topbar-wa-notif em{
    border-color:#07111f!important;
  }

  body.app-shell .user-chip{
    display:flex!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    padding:3px!important;
    border-radius:999px!important;
    overflow:hidden!important;
  }

  body.app-shell .user-chip img,
  body.app-shell .avatar-mini{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }

  /* Sidebar mobile: off-canvas premium */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    z-index:500!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:min(86vw,330px)!important;
    max-width:330px!important;
    height:100svh!important;
    transform:translateX(-105%)!important;
    transition:transform .24s cubic-bezier(.2,.75,.2,1)!important;
    border-radius:0 28px 28px 0!important;
    padding:12px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 0 0,rgba(35,109,255,.20),transparent 34%),
      linear-gradient(180deg,rgba(247,252,255,.98),rgba(232,246,255,.96))!important;
    border-right:1px solid rgba(120,170,235,.34)!important;
    box-shadow:28px 0 70px rgba(15,38,75,.25)!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    background:
      radial-gradient(circle at 0 0,rgba(38,167,255,.18),transparent 34%),
      linear-gradient(180deg,rgba(7,18,34,.98),rgba(9,23,42,.98))!important;
    border-right-color:rgba(125,180,255,.22)!important;
    box-shadow:28px 0 78px rgba(0,0,0,.54)!important;
  }

  body.app-shell.nav-open:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    transform:translateX(0)!important;
  }

  body.app-shell .mobile-nav-backdrop{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    z-index:450!important;
    background:rgba(3,8,18,.44)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
  }

  body.app-shell.nav-open .mobile-nav-backdrop{
    display:block!important;
  }

  body.app-shell.nav-open{
    overflow:hidden!important;
  }

  body.app-shell .sidebar .brand{
    min-height:64px!important;
    padding:8px 8px 12px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.50)!important;
    border:1px solid rgba(120,170,235,.20)!important;
  }

  body.dark.app-shell .sidebar .brand{
    background:rgba(255,255,255,.045)!important;
    border-color:rgba(125,180,255,.16)!important;
  }

  body.app-shell .sidebar .brand b{
    font-size:13px!important;
    line-height:1.15!important;
  }

  body.app-shell .sidebar .brand span{
    font-size:10.5px!important;
  }

  body.app-shell .side-search{
    margin:9px 0!important;
  }

  body.app-shell .side-search input{
    height:42px!important;
    border-radius:16px!important;
    font-size:13px!important;
  }

  body.app-shell .nav{
    flex:1!important;
    overflow:auto!important;
    padding:2px 2px 12px!important;
    overscroll-behavior:contain!important;
  }

  body.app-shell .nav-group{
    border-radius:18px!important;
    margin-bottom:8px!important;
  }

  body.app-shell .nav-group-toggle{
    min-height:42px!important;
    padding:0 12px!important;
    border-radius:16px!important;
    font-size:12px!important;
  }

  body.app-shell .nav-items a{
    min-height:39px!important;
    border-radius:14px!important;
    padding:0 12px!important;
    font-size:12.5px!important;
    gap:9px!important;
  }

  body.app-shell .sidebar-user-card{
    margin-top:8px!important;
    border-radius:22px!important;
    padding:10px!important;
  }

  /* Bottom nav billing mobile */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .app-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    z-index:420!important;
    height:64px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:7px!important;
    border-radius:26px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(120,170,235,.28)!important;
    box-shadow:0 18px 48px rgba(35,78,150,.20)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .app-mobile-bottom-nav{
    background:rgba(7,18,34,.88)!important;
    border-color:rgba(125,180,255,.20)!important;
    box-shadow:0 20px 54px rgba(0,0,0,.52)!important;
  }

  .app-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    text-decoration:none!important;
    border-radius:19px!important;
    color:#59708b!important;
    font-weight:900!important;
    min-width:0!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  body.dark .app-mobile-bottom-nav a{
    color:#9fb4cf!important;
  }

  .app-mobile-bottom-nav a i{
    font-style:normal!important;
    font-size:18px!important;
    line-height:1!important;
  }

  .app-mobile-bottom-nav a span{
    font-size:9.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .app-mobile-bottom-nav a.active,
  .app-mobile-bottom-nav a:active{
    color:#fff!important;
    background:linear-gradient(135deg,#236dff,#00b8ff)!important;
    box-shadow:0 10px 20px rgba(35,109,255,.28)!important;
  }

  /* Semua card dan grid lebih enak di HP */
  body.app-shell .grid,
  body.app-shell .grid.two,
  body.app-shell .grid.three,
  body.app-shell .compact-grid,
  body.app-shell .simple155-main,
  body.app-shell .mnt155-main,
  body.app-shell .ticket151-main,
  body.app-shell .wo152-main,
  body.app-shell .survey154-main,
  body.app-shell .pkg148-main-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  body.app-shell .card,
  body.app-shell .panel,
  body.app-shell .box,
  body.app-shell .portal43-card,
  body.app-shell .simple155-form-card,
  body.app-shell .mnt155-form-card,
  body.app-shell .ticket151-form-card,
  body.app-shell .wo152-form-card,
  body.app-shell .survey154-form-card{
    border-radius:22px!important;
    padding:14px!important;
    box-shadow:0 14px 38px rgba(35,78,150,.12)!important;
  }

  body.dark.app-shell .card,
  body.dark.app-shell .panel,
  body.dark.app-shell .box,
  body.dark.app-shell .portal43-card,
  body.dark.app-shell .simple155-form-card,
  body.dark.app-shell .mnt155-form-card,
  body.dark.app-shell .ticket151-form-card,
  body.dark.app-shell .wo152-form-card,
  body.dark.app-shell .survey154-form-card{
    box-shadow:0 16px 42px rgba(0,0,0,.38)!important;
  }

  body.app-shell .form-grid,
  body.app-shell .compact-form,
  body.app-shell .customer-full-card .form-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body.app-shell label{
    font-size:12px!important;
    font-weight:950!important;
  }

  body.app-shell input,
  body.app-shell select,
  body.app-shell textarea{
    min-height:44px!important;
    border-radius:15px!important;
    font-size:13px!important;
  }

  body.app-shell textarea{
    min-height:96px!important;
  }

  body.app-shell button,
  body.app-shell .btn,
  body.app-shell .quick,
  body.app-shell a.btn{
    min-height:42px!important;
    border-radius:14px!important;
    font-size:12px!important;
  }

  /* tabel di HP tetap bisa dibaca, tidak merusak layout */
  body.app-shell .table-wrap{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
    padding-bottom:4px!important;
  }

  body.app-shell table{
    min-width:760px!important;
  }

  body.app-shell th,
  body.app-shell td{
    padding:12px 10px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  body.app-shell td small{
    white-space:normal!important;
  }

  /* dashboard mobile */
  body.app-shell .dash30-toolbar,
  body.app-shell .dash31-realtime-row,
  body.app-shell .dash30-ticket-grid,
  body.app-shell .dash30-customer-grid,
  body.app-shell .dash30-info-grid,
  body.app-shell .dash30-info-grid.bottom,
  body.app-shell .dash30-finance-card{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  body.app-shell .dash30-ticket,
  body.app-shell .dash30-mini,
  body.app-shell .dash31-rt-card{
    min-height:88px!important;
    border-radius:22px!important;
  }

  body.app-shell .dash30-income-card{
    min-height:190px!important;
    border-radius:24px!important;
    padding:58px 18px 18px!important;
  }

  body.app-shell .dash30-income-card b{
    font-size:25px!important;
  }

  body.app-shell .dash30-chart{
    max-width:100%!important;
  }

  body.app-shell .dash30-panel{
    padding:14px!important;
    border-radius:22px!important;
  }

  /* halaman premium module head */
  body.app-shell .ticket151-head,
  body.app-shell .wo152-head,
  body.app-shell .survey154-head,
  body.app-shell .mnt155-head,
  body.app-shell .simple155-head,
  body.app-shell .pkg148-page-head,
  body.app-shell .svc147-page-head{
    gap:10px!important;
    margin-bottom:12px!important;
  }

  body.app-shell .ticket151-head-icon,
  body.app-shell .wo152-head-icon,
  body.app-shell .survey154-head-icon,
  body.app-shell .mnt155-head-icon,
  body.app-shell .simple155-head-icon,
  body.app-shell .pkg148-head-icon{
    width:44px!important;
    height:44px!important;
    border-radius:16px!important;
    font-size:20px!important;
  }

  body.app-shell .ticket151-head h2,
  body.app-shell .wo152-head h2,
  body.app-shell .survey154-head h2,
  body.app-shell .mnt155-head h2,
  body.app-shell .simple155-head h2,
  body.app-shell .pkg148-page-head h2{
    font-size:21px!important;
  }

  body.app-shell .ticket151-head p,
  body.app-shell .wo152-head p,
  body.app-shell .survey154-head p,
  body.app-shell .mnt155-head p,
  body.app-shell .simple155-head p,
  body.app-shell .pkg148-page-head p{
    font-size:11.5px!important;
    line-height:1.35!important;
  }

  body.app-shell .ticket151-kpi-grid,
  body.app-shell .wo152-kpi-grid,
  body.app-shell .survey154-kpi-grid,
  body.app-shell .mnt155-kpi-grid,
  body.app-shell .simple155-kpi-grid,
  body.app-shell .pkg148-kpi-grid{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }

  body.app-shell .ticket151-kpi,
  body.app-shell .wo152-kpi,
  body.app-shell .survey154-kpi,
  body.app-shell .mnt155-kpi,
  body.app-shell .simple155-kpi,
  body.app-shell .pkg148-kpi-card{
    min-height:82px!important;
    padding:12px!important;
    border-radius:19px!important;
  }

  body.app-shell .ticket151-kpi span,
  body.app-shell .wo152-kpi span,
  body.app-shell .survey154-kpi span,
  body.app-shell .mnt155-kpi span,
  body.app-shell .simple155-kpi span{
    font-size:9.8px!important;
  }

  body.app-shell .ticket151-kpi b,
  body.app-shell .wo152-kpi b,
  body.app-shell .survey154-kpi b,
  body.app-shell .mnt155-kpi b,
  body.app-shell .simple155-kpi b{
    font-size:22px!important;
  }

  /* peta dan canvas di HP */
  body.app-shell .map-box,
  body.app-shell .map-box.big,
  body.app-shell .noapi-leaflet-map{
    height:430px!important;
    border-radius:22px!important;
  }

  body.app-shell canvas{
    max-width:100%!important;
  }
}

/* Ukuran sangat kecil */
@media (max-width: 430px){
  body.app-shell .main{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  body.app-shell .topbar{
    padding-left:8px!important;
    padding-right:8px!important;
    grid-template-columns:40px minmax(0,1fr) auto!important;
  }
  body.app-shell .top-actions{
    gap:4px!important;
  }
  body.app-shell .theme-toggle,
  body.app-shell .topbar-icon,
  body.app-shell .topbar-settings,
  body.app-shell .dash48-ticket-bell,
  body.app-shell .topbar-wa-notif{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:13px!important;
    font-size:15px!important;
  }
  body.app-shell .user-chip{
    display:none!important;
  }
  body.app-shell .live-clock,
  body.app-shell .fns116-live-clock{
    font-size:12px!important;
  }
  body.app-shell .fns116-auto-greeting,
  body.app-shell .fns149-smart-greeting{
    font-size:10.5px!important;
  }
  body.app-shell .ticket151-kpi-grid,
  body.app-shell .wo152-kpi-grid,
  body.app-shell .survey154-kpi-grid,
  body.app-shell .mnt155-kpi-grid,
  body.app-shell .simple155-kpi-grid,
  body.app-shell .pkg148-kpi-grid{
    grid-template-columns:1fr!important;
  }
}

/* === PORTAL PELANGGAN MOBILE PREMIUM === */
@media (max-width: 820px){

  body.portal-customer-shell,
  body.portal-staff-shell{
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 0 0,rgba(35,109,255,.20),transparent 35%),
      radial-gradient(circle at 100% 0,rgba(14,184,255,.20),transparent 30%),
      linear-gradient(180deg,#eef8ff,#ffffff 44%,#f2f8ff)!important;
  }

  body.dark.portal-customer-shell,
  body.dark.portal-staff-shell{
    background:
      radial-gradient(circle at 0 0,rgba(38,167,255,.20),transparent 34%),
      radial-gradient(circle at 100% 4%,rgba(124,92,255,.20),transparent 30%),
      linear-gradient(180deg,#06101f,#08172a 45%,#05111f)!important;
  }

  body.portal-customer-shell .sidebar,
  body.portal-staff-shell .sidebar{
    display:none!important;
  }

  body.portal-customer-shell .mobile-menu,
  body.portal-staff-shell .mobile-menu{
    display:none!important;
  }

  body.portal-customer-shell .main,
  body.portal-staff-shell .main{
    padding:84px 10px calc(112px + env(safe-area-inset-bottom,0px))!important;
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  body.portal-customer-shell .topbar,
  body.portal-staff-shell .topbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    min-height:72px!important;
  }

  body.portal-customer-shell .title-block,
  body.portal-staff-shell .title-block{
    grid-column:1!important;
  }

  body.portal-customer-shell .top-actions,
  body.portal-staff-shell .top-actions{
    grid-column:2!important;
  }

  body.portal-customer-shell .top-actions .topbar-settings,
  body.portal-staff-shell .top-actions .topbar-settings{
    display:none!important;
  }

  body.portal-customer-shell .portal43-hero,
  body.portal-staff-shell .portal43-hero{
    margin-top:0!important;
    border-radius:28px!important;
    padding:18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    background:
      radial-gradient(circle at 0 0,rgba(35,109,255,.24),transparent 40%),
      radial-gradient(circle at 100% 0,rgba(0,184,255,.18),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.88),rgba(232,246,255,.76))!important;
    border:1px solid rgba(120,170,235,.24)!important;
    box-shadow:0 18px 48px rgba(35,78,150,.16)!important;
    overflow:hidden!important;
  }

  body.dark.portal-customer-shell .portal43-hero,
  body.dark.portal-staff-shell .portal43-hero{
    background:
      radial-gradient(circle at 0 0,rgba(38,167,255,.19),transparent 40%),
      radial-gradient(circle at 100% 0,rgba(124,92,255,.18),transparent 36%),
      linear-gradient(145deg,rgba(15,35,60,.94),rgba(8,22,41,.92))!important;
    border-color:rgba(125,180,255,.20)!important;
    box-shadow:0 22px 54px rgba(0,0,0,.42)!important;
  }

  body.portal-customer-shell .portal43-hero h2,
  body.portal-staff-shell .portal43-hero h2{
    font-size:23px!important;
    line-height:1.05!important;
    letter-spacing:-.04em!important;
  }

  body.portal-customer-shell .portal43-hero p,
  body.portal-staff-shell .portal43-hero p{
    font-size:12.5px!important;
    line-height:1.45!important;
  }

  body.portal-customer-shell .portal43-actions,
  body.portal-staff-shell .portal43-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  body.portal-customer-shell .portal43-actions .btn,
  body.portal-staff-shell .portal43-actions .btn{
    width:100%!important;
    min-height:42px!important;
    border-radius:15px!important;
    font-size:11.5px!important;
  }

  body.portal-customer-shell .portal43-idcard,
  body.portal-staff-shell .portal43-idcard{
    border-radius:23px!important;
    padding:15px!important;
    min-width:0!important;
    width:100%!important;
    background:rgba(255,255,255,.70)!important;
  }

  body.dark.portal-customer-shell .portal43-idcard,
  body.dark.portal-staff-shell .portal43-idcard{
    background:rgba(255,255,255,.055)!important;
  }

  body.portal-customer-shell .portal43-stats,
  body.portal-staff-shell .portal43-stats{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin:12px 0!important;
  }

  body.portal-customer-shell .portal43-stat,
  body.portal-staff-shell .portal43-stat{
    min-height:108px!important;
    border-radius:22px!important;
    padding:13px!important;
    box-shadow:0 14px 38px rgba(35,78,150,.13)!important;
  }

  body.dark.portal-customer-shell .portal43-stat,
  body.dark.portal-staff-shell .portal43-stat{
    box-shadow:0 16px 42px rgba(0,0,0,.36)!important;
  }

  body.portal-customer-shell .portal43-stat i,
  body.portal-staff-shell .portal43-stat i{
    width:36px!important;
    height:36px!important;
    border-radius:14px!important;
  }

  body.portal-customer-shell .portal43-stat span,
  body.portal-staff-shell .portal43-stat span{
    font-size:10px!important;
  }

  body.portal-customer-shell .portal43-stat b,
  body.portal-staff-shell .portal43-stat b{
    font-size:17px!important;
    line-height:1.15!important;
  }

  body.portal-customer-shell .portal43-main-grid,
  body.portal-customer-shell .portal43-grid-two,
  body.portal-staff-shell .portal43-main-grid,
  body.portal-staff-shell .portal43-grid-two{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  body.portal-customer-shell .portal43-card,
  body.portal-staff-shell .portal43-card{
    border-radius:25px!important;
    padding:15px!important;
    box-shadow:0 18px 44px rgba(35,78,150,.13)!important;
  }

  body.dark.portal-customer-shell .portal43-card,
  body.dark.portal-staff-shell .portal43-card{
    box-shadow:0 18px 46px rgba(0,0,0,.38)!important;
  }

  body.portal-customer-shell .portal43-card-head,
  body.portal-staff-shell .portal43-card-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }

  body.portal-customer-shell .portal43-card-head h3,
  body.portal-staff-shell .portal43-card-head h3{
    font-size:17px!important;
    line-height:1.12!important;
  }

  body.portal-customer-shell .portal43-traffic-numbers,
  body.portal-staff-shell .portal43-traffic-numbers{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  body.portal-customer-shell .portal43-traffic-numbers>div,
  body.portal-staff-shell .portal43-traffic-numbers>div{
    border-radius:18px!important;
    padding:12px!important;
  }

  body.portal-customer-shell .portal43-canvas-wrap,
  body.portal-staff-shell .portal43-canvas-wrap{
    height:235px!important;
    border-radius:22px!important;
    margin-top:10px!important;
  }

  body.portal-customer-shell .portal43-dl,
  body.portal-staff-shell .portal43-dl{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  body.portal-customer-shell .portal43-ticket-item,
  body.portal-staff-shell .portal43-ticket-item,
  body.portal-customer-shell .portal43-invoice-item,
  body.portal-staff-shell .portal43-invoice-item{
    border-radius:18px!important;
    padding:12px!important;
  }

  body.portal-customer-shell form,
  body.portal-staff-shell form{
    gap:10px!important;
  }

  body.portal-customer-shell input,
  body.portal-customer-shell select,
  body.portal-customer-shell textarea,
  body.portal-staff-shell input,
  body.portal-staff-shell select,
  body.portal-staff-shell textarea{
    min-height:45px!important;
    border-radius:16px!important;
    font-size:13px!important;
  }

  body.portal-customer-shell textarea,
  body.portal-staff-shell textarea{
    min-height:104px!important;
  }

  /* Bottom nav portal dibuat seperti aplikasi mobile */
  .portal-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    z-index:430!important;
    height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:7px!important;
    border-radius:27px!important;
    background:rgba(255,255,255,.86)!important;
    border:1px solid rgba(120,170,235,.30)!important;
    box-shadow:0 18px 48px rgba(35,78,150,.22)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  body.dark .portal-mobile-bottom-nav{
    background:rgba(7,18,34,.88)!important;
    border-color:rgba(125,180,255,.21)!important;
    box-shadow:0 20px 54px rgba(0,0,0,.52)!important;
  }

  .portal-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:20px!important;
    text-decoration:none!important;
    color:#60758d!important;
    font-weight:900!important;
    min-width:0!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  body.dark .portal-mobile-bottom-nav a{
    color:#9fb4cf!important;
  }

  .portal-mobile-bottom-nav a i{
    font-style:normal!important;
    font-size:19px!important;
    line-height:1!important;
  }

  .portal-mobile-bottom-nav a span{
    font-size:9.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .portal-mobile-bottom-nav a.active,
  .portal-mobile-bottom-nav a:active{
    color:#fff!important;
    background:linear-gradient(135deg,#236dff,#00b8ff)!important;
    box-shadow:0 10px 21px rgba(35,109,255,.28)!important;
  }

  .portal-mobile-bottom-nav.portal-staff-bottom-nav{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media (max-width:430px){
  body.portal-customer-shell .portal43-stats,
  body.portal-staff-shell .portal43-stats{
    grid-template-columns:1fr!important;
  }
  body.portal-customer-shell .portal43-actions,
  body.portal-staff-shell .portal43-actions{
    grid-template-columns:1fr!important;
  }
  body.portal-customer-shell .portal43-traffic-numbers,
  body.portal-staff-shell .portal43-traffic-numbers{
    grid-template-columns:1fr!important;
  }
}

/* Tap dan scroll terasa lebih native */
@media (hover:none){
  body.app-shell a,
  body.app-shell button{
    touch-action:manipulation;
  }
}
/* === END V158 === */


/* === V159 PERFORMANCE LIGHT MODE === */
/* Perbaikan agar billing dan portal pelanggan lebih ringan, khususnya di HP. */

/* Semua mode: kurangi transisi berat */
*{
  scroll-behavior:auto!important;
}

@media (max-width: 820px){
  /* Blur/backdrop-filter sangat berat di HP, jadi diringankan */
  body.app-shell .topbar,
  body.app-shell .sidebar,
  body.app-shell .app-mobile-bottom-nav,
  body.app-shell .portal-mobile-bottom-nav,
  body.app-shell .mobile-nav-backdrop,
  body.portal-customer-shell .portal43-hero,
  body.portal-staff-shell .portal43-hero,
  body .card,
  body .panel,
  body .box{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
  }

  /* Shadow tetap ada, tetapi tidak terlalu berat */
  body.app-shell .card,
  body.app-shell .panel,
  body.app-shell .box,
  body.app-shell .dash30-panel,
  body.app-shell .portal43-card,
  body.app-shell .simple155-kpi,
  body.app-shell .mnt155-kpi,
  body.app-shell .ticket151-kpi,
  body.app-shell .wo152-kpi,
  body.app-shell .survey154-kpi{
    box-shadow:0 8px 22px rgba(35,78,150,.10)!important;
  }

  body.dark.app-shell .card,
  body.dark.app-shell .panel,
  body.dark.app-shell .box,
  body.dark.app-shell .dash30-panel,
  body.dark.app-shell .portal43-card,
  body.dark.app-shell .simple155-kpi,
  body.dark.app-shell .mnt155-kpi,
  body.dark.app-shell .ticket151-kpi,
  body.dark.app-shell .wo152-kpi,
  body.dark.app-shell .survey154-kpi{
    box-shadow:0 10px 24px rgba(0,0,0,.30)!important;
  }

  /* Matikan animasi berat di layar HP */
  body.app-shell *,
  body.portal-customer-shell *,
  body.portal-staff-shell *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.12s!important;
  }

  /* Background dibuat tetap bagus tapi lebih ringan */
  body.app-shell{
    background:linear-gradient(180deg,#eef8ff,#f9fcff 48%,#eef8ff)!important;
  }

  body.dark.app-shell{
    background:linear-gradient(180deg,#06101f,#08172a 48%,#06101f)!important;
  }

  body.app-shell .main,
  body.app-shell .content,
  body.app-shell main{
    background:transparent!important;
  }

  /* Tabel tidak memaksa render terlalu berat */
  body.app-shell .table-wrap{
    contain:content!important;
    will-change:auto!important;
  }

  body.app-shell table{
    border-collapse:separate!important;
    border-spacing:0 7px!important;
  }

  /* Peta dan chart jangan terlalu tinggi di HP */
  body.app-shell .map-box,
  body.app-shell .map-box.big,
  body.app-shell .noapi-leaflet-map{
    height:340px!important;
  }

  body.portal-customer-shell .portal43-canvas-wrap,
  body.portal-staff-shell .portal43-canvas-wrap{
    height:205px!important;
  }

  /* Icon glow besar dikurangi */
  body.app-shell [class*=":before"],
  body.app-shell [class*=":after"]{
    will-change:auto!important;
  }
}

/* HP kecil lebih ringan lagi */
@media (max-width: 430px){
  body.app-shell .card,
  body.app-shell .panel,
  body.app-shell .box{
    padding:12px!important;
    border-radius:20px!important;
  }

  body.app-shell table{
    min-width:640px!important;
  }

  body.app-shell th,
  body.app-shell td{
    padding:10px 8px!important;
  }
}

/* Mode hemat data / perangkat lambat */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* === END V159 === */


/* === V160 PORTAL MOBILE HEADER LOCK PREMIUM === */
/* Fix: header portal pelanggan HP dikunci, mode gelap tidak ikut geser, halaman Pakai/Kurva tidak turun jauh. */

@media (max-width: 820px){

  body.portal-customer-shell,
  body.portal-staff-shell{
    overflow-x:hidden!important;
    padding-top:0!important;
  }

  body.portal-customer-shell .main,
  body.portal-staff-shell .main{
    padding-top:86px!important;
    min-height:100svh!important;
    scroll-padding-top:92px!important;
  }

  /* Header portal HP benar-benar terkunci saat scroll */
  body.portal-customer-shell .topbar,
  body.portal-staff-shell .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:9500!important;
    margin:0!important;
    min-height:74px!important;
    padding:9px 12px!important;
    border-radius:0 0 24px 24px!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,246,255,.96),rgba(244,240,255,.93))!important;
    border:0!important;
    border-bottom:1px solid rgba(104,160,230,.30)!important;
    box-shadow:0 12px 32px rgba(35,78,150,.16)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.dark.portal-customer-shell .topbar,
  body.dark.portal-staff-shell .topbar{
    background:
      linear-gradient(135deg,rgba(7,18,34,.99),rgba(9,24,43,.98),rgba(16,22,48,.98))!important;
    border-bottom-color:rgba(125,180,255,.24)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.46)!important;
  }

  body.portal-customer-shell .title-block,
  body.portal-staff-shell .title-block{
    min-width:0!important;
    overflow:hidden!important;
  }

  body.portal-customer-shell .title-block h1,
  body.portal-staff-shell .title-block h1{
    display:none!important;
  }

  body.portal-customer-shell .live-clock,
  body.portal-customer-shell .fns116-live-clock,
  body.portal-staff-shell .live-clock,
  body.portal-staff-shell .fns116-live-clock{
    max-width:100%!important;
    display:block!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:13px!important;
    line-height:1.15!important;
    color:var(--text)!important;
    font-weight:950!important;
  }

  body.portal-customer-shell .fns116-auto-greeting,
  body.portal-customer-shell .fns149-smart-greeting,
  body.portal-staff-shell .fns116-auto-greeting,
  body.portal-staff-shell .fns149-smart-greeting{
    max-width:100%!important;
    display:block!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:11.2px!important;
    line-height:1.25!important;
    color:var(--muted)!important;
    font-weight:900!important;
  }

  body.portal-customer-shell .top-actions,
  body.portal-staff-shell .top-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    min-width:max-content!important;
  }

  body.portal-customer-shell .theme-toggle,
  body.portal-customer-shell .topbar-icon,
  body.portal-customer-shell .topbar-settings,
  body.portal-customer-shell .dash48-ticket-bell,
  body.portal-customer-shell .topbar-wa-notif,
  body.portal-staff-shell .theme-toggle,
  body.portal-staff-shell .topbar-icon,
  body.portal-staff-shell .topbar-settings,
  body.portal-staff-shell .dash48-ticket-bell,
  body.portal-staff-shell .topbar-wa-notif{
    width:37px!important;
    min-width:37px!important;
    height:37px!important;
    min-height:37px!important;
    border-radius:15px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:linear-gradient(180deg,#ffffff,#eef7ff)!important;
    border:1px solid rgba(104,160,230,.34)!important;
    box-shadow:0 8px 20px rgba(35,78,150,.12)!important;
  }

  body.dark.portal-customer-shell .theme-toggle,
  body.dark.portal-customer-shell .topbar-icon,
  body.dark.portal-customer-shell .topbar-settings,
  body.dark.portal-customer-shell .dash48-ticket-bell,
  body.dark.portal-customer-shell .topbar-wa-notif,
  body.dark.portal-staff-shell .theme-toggle,
  body.dark.portal-staff-shell .topbar-icon,
  body.dark.portal-staff-shell .topbar-settings,
  body.dark.portal-staff-shell .dash48-ticket-bell,
  body.dark.portal-staff-shell .topbar-wa-notif{
    background:linear-gradient(180deg,rgba(18,43,73,.98),rgba(8,24,44,.98))!important;
    border-color:rgba(125,180,255,.26)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.34)!important;
  }

  body.portal-customer-shell .user-chip,
  body.portal-staff-shell .user-chip{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    border-radius:999px!important;
    padding:3px!important;
  }

  body.portal-customer-shell .user-chip span,
  body.portal-customer-shell .user-chip small,
  body.portal-staff-shell .user-chip span,
  body.portal-staff-shell .user-chip small{
    display:none!important;
  }

  body.portal-customer-shell .user-chip img,
  body.portal-customer-shell .avatar-mini,
  body.portal-staff-shell .user-chip img,
  body.portal-staff-shell .avatar-mini{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
  }

  /* Mode halaman portal: elemen yang tidak aktif benar-benar tidak makan ruang */
  body.portal-mobile-paged .portal-mobile-page:not(.is-active){
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    opacity:0!important;
    transform:none!important;
  }

  body.portal-mobile-paged .portal-mobile-page.is-active{
    display:block!important;
    visibility:visible!important;
    height:auto!important;
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
  }

  body.portal-mobile-paged .portal43-stats.portal-mobile-page.is-active{
    display:grid!important;
  }

  body.portal-mobile-paged .portal43-main-grid.has-active-portal-page,
  body.portal-mobile-paged .portal43-grid-two.has-active-portal-page{
    display:block!important;
    margin:0 0 12px!important;
    padding:0!important;
    min-height:0!important;
    gap:0!important;
  }

  body.portal-page-current-usage .portal43-main-grid.has-active-portal-page{
    margin-top:0!important;
    padding-top:0!important;
    transform:translateY(0)!important;
  }

  body.portal-page-current-usage #portalUsage{
    margin-top:0!important;
    min-height:auto!important;
  }

  body.portal-page-current-usage .main{
    padding-top:82px!important;
  }

  /* Kartu Kurva Pemakaian dibuat naik, compact, dan premium */
  body.portal-customer-shell #portalUsage.portal43-card{
    border-radius:26px!important;
    padding:17px!important;
    background:
      radial-gradient(circle at 0 0,rgba(35,109,255,.16),transparent 36%),
      radial-gradient(circle at 100% 0,rgba(0,184,255,.12),transparent 32%),
      linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,246,255,.88),rgba(241,238,255,.78))!important;
    border:1px solid rgba(104,160,230,.28)!important;
    box-shadow:0 12px 32px rgba(35,78,150,.13)!important;
  }

  body.dark.portal-customer-shell #portalUsage.portal43-card{
    background:
      radial-gradient(circle at 0 0,rgba(38,167,255,.14),transparent 36%),
      radial-gradient(circle at 100% 0,rgba(124,92,255,.13),transparent 32%),
      linear-gradient(145deg,rgba(13,31,55,.98),rgba(8,22,41,.96),rgba(14,20,45,.92))!important;
    border-color:rgba(125,180,255,.24)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.38)!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:start!important;
    margin-bottom:12px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head h3{
    font-size:20px!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    margin:0 0 5px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head p{
    font-size:11.5px!important;
    line-height:1.42!important;
  }

  body.portal-customer-shell #portalUsage .portal43-live-badge{
    font-size:10px!important;
    padding:7px 9px!important;
    margin:0!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin:10px 0 12px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div{
    min-height:72px!important;
    border-radius:18px!important;
    padding:12px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-canvas-wrap{
    height:212px!important;
    border-radius:22px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-usage-message{
    font-size:11px!important;
    line-height:1.4!important;
  }

  /* Home portal tetap premium tapi tidak terlalu tinggi */
  body.portal-customer-shell #portalHome.portal43-hero{
    margin-top:0!important;
    border-radius:28px!important;
  }

  body.portal-customer-shell #portalHome .portal43-idcard{
    min-height:112px!important;
  }

  /* Bottom nav lebih profesional dan tidak menutupi konten terlalu banyak */
  .portal-mobile-bottom-nav{
    height:66px!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    border-radius:27px!important;
    padding:7px!important;
    z-index:9400!important;
  }

  .portal-mobile-bottom-nav a{
    min-height:50px!important;
    border-radius:20px!important;
  }

  .portal-mobile-bottom-nav a i{
    width:32px!important;
    height:32px!important;
    border-radius:14px!important;
  }
}

@media (max-width:430px){
  body.portal-customer-shell .main,
  body.portal-staff-shell .main{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body.portal-customer-shell .topbar,
  body.portal-staff-shell .topbar{
    min-height:72px!important;
    padding:8px 10px!important;
  }

  body.portal-customer-shell .live-clock,
  body.portal-customer-shell .fns116-live-clock,
  body.portal-staff-shell .live-clock,
  body.portal-staff-shell .fns116-live-clock{
    font-size:12.2px!important;
  }

  body.portal-customer-shell .fns116-auto-greeting,
  body.portal-customer-shell .fns149-smart-greeting,
  body.portal-staff-shell .fns116-auto-greeting,
  body.portal-staff-shell .fns149-smart-greeting{
    font-size:10.4px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head{
    grid-template-columns:1fr!important;
  }

  body.portal-customer-shell #portalUsage .portal43-live-badge{
    justify-self:start!important;
  }
}
/* === END V160 === */


/* === V161 PORTAL HOME FRONT SUPER PREMIUM === */
/* Fokus: mempercantik halaman depan / Beranda portal pelanggan di HP. */

@media (max-width:820px){

  body.portal-customer-shell .main{
    padding-left:10px!important;
    padding-right:10px!important;
    padding-bottom:calc(126px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Background depan lebih premium, tidak pucat */
  body.portal-customer-shell{
    background:
      radial-gradient(circle at 18% 2%,rgba(0,184,255,.18),transparent 28%),
      radial-gradient(circle at 90% 10%,rgba(99,102,241,.14),transparent 28%),
      linear-gradient(180deg,#e7f5ff 0%,#f7fbff 52%,#edf7ff 100%)!important;
  }

  body.dark.portal-customer-shell{
    background:
      radial-gradient(circle at 18% 2%,rgba(0,184,255,.16),transparent 28%),
      radial-gradient(circle at 90% 10%,rgba(124,92,255,.16),transparent 28%),
      linear-gradient(180deg,#06101f 0%,#08172a 54%,#06101f 100%)!important;
  }

  /* HERO BERANDA */
  body.portal-customer-shell #portalHome.portal43-hero{
    position:relative!important;
    overflow:hidden!important;
    margin:8px 0 12px!important;
    padding:18px!important;
    border-radius:30px!important;
    min-height:0!important;
    border:1px solid rgba(74,144,226,.24)!important;
    background:
      radial-gradient(circle at 0% 0%,rgba(255,255,255,.90),transparent 30%),
      radial-gradient(circle at 86% 18%,rgba(0,184,255,.28),transparent 34%),
      radial-gradient(circle at 100% 100%,rgba(79,70,229,.20),transparent 36%),
      linear-gradient(145deg,rgba(255,255,255,.86),rgba(222,243,255,.86) 48%,rgba(237,239,255,.78))!important;
    box-shadow:
      0 18px 44px rgba(35,78,150,.16),
      inset 0 1px 0 rgba(255,255,255,.88)!important;
  }

  body.dark.portal-customer-shell #portalHome.portal43-hero{
    border-color:rgba(125,180,255,.22)!important;
    background:
      radial-gradient(circle at 0% 0%,rgba(38,167,255,.18),transparent 32%),
      radial-gradient(circle at 84% 18%,rgba(0,184,255,.14),transparent 34%),
      radial-gradient(circle at 100% 100%,rgba(124,92,255,.22),transparent 38%),
      linear-gradient(145deg,rgba(12,31,56,.98),rgba(9,24,43,.98) 52%,rgba(16,22,48,.96))!important;
    box-shadow:
      0 20px 48px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.07)!important;
  }

  body.portal-customer-shell #portalHome.portal43-hero:before{
    content:""!important;
    position:absolute!important;
    right:-78px!important;
    bottom:-78px!important;
    width:220px!important;
    height:220px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,rgba(0,184,255,.22),rgba(79,70,229,.16))!important;
    pointer-events:none!important;
  }

  body.portal-customer-shell #portalHome.portal43-hero:after{
    content:"FNS"!important;
    position:absolute!important;
    right:18px!important;
    top:20px!important;
    font-size:42px!important;
    font-weight:1000!important;
    letter-spacing:-.08em!important;
    color:rgba(35,109,255,.075)!important;
    pointer-events:none!important;
  }

  body.dark.portal-customer-shell #portalHome.portal43-hero:after{
    color:rgba(255,255,255,.055)!important;
  }

  body.portal-customer-shell #portalHome.portal43-hero > *{
    position:relative!important;
    z-index:1!important;
  }

  body.portal-customer-shell #portalHome .portal43-pill,
  body.portal-customer-shell #portalHome .portal43-badge,
  body.portal-customer-shell #portalHome [class*="badge"]{
    display:inline-flex!important;
    align-items:center!important;
    width:max-content!important;
    max-width:100%!important;
    min-height:34px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,rgba(35,109,255,.16),rgba(0,184,255,.11))!important;
    color:#236dff!important;
    border:1px solid rgba(35,109,255,.20)!important;
    font-weight:950!important;
    letter-spacing:.045em!important;
    font-size:11.5px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;
  }

  body.dark.portal-customer-shell #portalHome .portal43-pill,
  body.dark.portal-customer-shell #portalHome .portal43-badge,
  body.dark.portal-customer-shell #portalHome [class*="badge"]{
    background:rgba(38,167,255,.13)!important;
    color:#64d7ff!important;
    border-color:rgba(38,167,255,.24)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
  }

  body.portal-customer-shell #portalHome h2{
    margin:14px 0 8px!important;
    font-size:26px!important;
    line-height:1.02!important;
    letter-spacing:-.055em!important;
    color:#071f3d!important;
  }

  body.dark.portal-customer-shell #portalHome h2{
    color:#f8fbff!important;
  }

  body.portal-customer-shell #portalHome p{
    max-width:92%!important;
    margin:0 0 14px!important;
    font-size:13.2px!important;
    line-height:1.48!important;
    color:#4b6684!important;
    font-weight:850!important;
  }

  body.dark.portal-customer-shell #portalHome p{
    color:#b6c7dc!important;
  }

  /* Tombol hero lebih premium */
  body.portal-customer-shell #portalHome .portal43-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin:12px 0 10px!important;
  }

  body.portal-customer-shell #portalHome .portal43-actions .btn,
  body.portal-customer-shell #portalHome a.btn,
  body.portal-customer-shell #portalHome button.btn{
    min-height:50px!important;
    border-radius:18px!important;
    font-size:12.5px!important;
    font-weight:950!important;
    box-shadow:0 12px 24px rgba(35,109,255,.16)!important;
  }

  body.portal-customer-shell #portalHome .portal43-actions .btn:first-child,
  body.portal-customer-shell #portalHome .btn.primary{
    background:linear-gradient(135deg,#236dff,#00b8ff)!important;
    color:#fff!important;
    border:0!important;
  }

  body.portal-customer-shell #portalHome .portal43-actions .btn:not(:first-child){
    background:rgba(255,255,255,.76)!important;
    color:#0f2440!important;
    border:1px solid rgba(104,160,230,.25)!important;
  }

  body.dark.portal-customer-shell #portalHome .portal43-actions .btn:not(:first-child){
    background:rgba(12,31,56,.78)!important;
    color:#f2f7ff!important;
    border-color:rgba(125,180,255,.18)!important;
  }

  /* WhatsApp Admin dibuat lebih elegan */
  body.portal-customer-shell #portalHome a[href*="wa"],
  body.portal-customer-shell #portalHome a[href*="whatsapp"],
  body.portal-customer-shell #portalHome .portal43-wa,
  body.portal-customer-shell #portalHome .wa-admin{
    min-height:48px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,#d8ffe6,#c7fbd7)!important;
    color:#136a35!important;
    border:1px solid rgba(34,197,94,.22)!important;
    box-shadow:0 10px 22px rgba(34,197,94,.12)!important;
    font-weight:950!important;
  }

  body.dark.portal-customer-shell #portalHome a[href*="wa"],
  body.dark.portal-customer-shell #portalHome a[href*="whatsapp"],
  body.dark.portal-customer-shell #portalHome .portal43-wa,
  body.dark.portal-customer-shell #portalHome .wa-admin{
    background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(46,232,159,.13))!important;
    color:#9dffc2!important;
    border-color:rgba(46,232,159,.20)!important;
  }

  /* ID CARD pelanggan: sebelumnya terlalu pucat, sekarang tegas */
  body.portal-customer-shell #portalHome .portal43-idcard{
    margin-top:10px!important;
    min-height:126px!important;
    border-radius:24px!important;
    padding:18px!important;
    background:
      radial-gradient(circle at 92% 16%,rgba(255,255,255,.23),transparent 28%),
      radial-gradient(circle at 0 100%,rgba(0,184,255,.20),transparent 42%),
      linear-gradient(135deg,#1f7dff,#0fb9ff 55%,#6d5cff)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.26)!important;
    box-shadow:0 18px 34px rgba(35,109,255,.22)!important;
  }

  body.dark.portal-customer-shell #portalHome .portal43-idcard{
    background:
      radial-gradient(circle at 92% 16%,rgba(255,255,255,.14),transparent 28%),
      radial-gradient(circle at 0 100%,rgba(0,184,255,.18),transparent 42%),
      linear-gradient(135deg,#123d7a,#0c568f 55%,#352a80)!important;
    border-color:rgba(125,180,255,.22)!important;
    box-shadow:0 18px 36px rgba(0,0,0,.32)!important;
  }

  body.portal-customer-shell #portalHome .portal43-idcard *,
  body.portal-customer-shell #portalHome .portal43-idcard b,
  body.portal-customer-shell #portalHome .portal43-idcard strong,
  body.portal-customer-shell #portalHome .portal43-idcard h3,
  body.portal-customer-shell #portalHome .portal43-idcard h4{
    color:#fff!important;
    text-shadow:0 1px 8px rgba(0,0,0,.18)!important;
  }

  body.portal-customer-shell #portalHome .portal43-idcard small,
  body.portal-customer-shell #portalHome .portal43-idcard span{
    color:rgba(255,255,255,.88)!important;
  }

  body.portal-customer-shell #portalHome .portal43-idcard .pill,
  body.portal-customer-shell #portalHome .portal43-idcard .badge,
  body.portal-customer-shell #portalHome .portal43-idcard .status{
    background:rgba(255,255,255,.18)!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.28)!important;
  }

  /* Statistik depan: lebih compact, tidak seperti kotak kosong */
  body.portal-customer-shell .portal43-stats{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:10px 0 12px!important;
  }

  body.portal-customer-shell .portal43-stat{
    position:relative!important;
    overflow:hidden!important;
    min-height:118px!important;
    border-radius:24px!important;
    padding:16px!important;
    border:1px solid rgba(104,160,230,.24)!important;
    background:
      radial-gradient(circle at 100% 0,rgba(35,109,255,.15),transparent 36%),
      linear-gradient(145deg,rgba(255,255,255,.88),rgba(226,245,255,.78))!important;
    box-shadow:0 12px 28px rgba(35,78,150,.11)!important;
  }

  body.dark.portal-customer-shell .portal43-stat{
    background:
      radial-gradient(circle at 100% 0,rgba(38,167,255,.12),transparent 36%),
      linear-gradient(145deg,rgba(13,31,55,.96),rgba(8,22,41,.94))!important;
    border-color:rgba(125,180,255,.18)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.32)!important;
  }

  body.portal-customer-shell .portal43-stat:after{
    content:""!important;
    position:absolute!important;
    right:-34px!important;
    top:-34px!important;
    width:110px!important;
    height:110px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.32)!important;
    pointer-events:none!important;
  }

  body.dark.portal-customer-shell .portal43-stat:after{
    background:rgba(255,255,255,.07)!important;
  }

  body.portal-customer-shell .portal43-stat i{
    position:relative!important;
    z-index:1!important;
    width:38px!important;
    height:38px!important;
    border-radius:15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(255,255,255,.68)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;
  }

  body.dark.portal-customer-shell .portal43-stat i{
    background:rgba(255,255,255,.08)!important;
  }

  body.portal-customer-shell .portal43-stat span{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    margin-top:10px!important;
    color:#6b7f98!important;
    font-size:10.5px!important;
    font-weight:950!important;
    text-transform:uppercase!important;
    letter-spacing:.02em!important;
  }

  body.dark.portal-customer-shell .portal43-stat span{
    color:#9fb4cf!important;
  }

  body.portal-customer-shell .portal43-stat b{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    margin-top:4px!important;
    color:#0b2240!important;
    font-size:19px!important;
    line-height:1.12!important;
    letter-spacing:-.03em!important;
  }

  body.dark.portal-customer-shell .portal43-stat b{
    color:#f7fbff!important;
  }

  body.portal-customer-shell .portal43-stat small{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    margin-top:2px!important;
    color:#516b88!important;
    font-size:10.8px!important;
    font-weight:850!important;
  }

  body.dark.portal-customer-shell .portal43-stat small{
    color:#9fb4cf!important;
  }

  /* Hindari bottom nav menutup isi depan */
  body.portal-customer-shell #portalHome,
  body.portal-customer-shell .portal43-stats{
    scroll-margin-bottom:120px!important;
  }

  .portal-mobile-bottom-nav{
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(104,160,230,.28)!important;
    box-shadow:0 16px 38px rgba(35,78,150,.18)!important;
  }

  body.dark .portal-mobile-bottom-nav{
    background:rgba(7,18,34,.92)!important;
    border-color:rgba(125,180,255,.20)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.48)!important;
  }
}

@media (max-width:430px){
  body.portal-customer-shell #portalHome.portal43-hero{
    padding:16px!important;
    border-radius:28px!important;
  }

  body.portal-customer-shell #portalHome h2{
    font-size:24px!important;
  }

  body.portal-customer-shell #portalHome p{
    max-width:100%!important;
    font-size:12.8px!important;
  }

  body.portal-customer-shell .portal43-stats{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }

  body.portal-customer-shell .portal43-stat{
    min-height:112px!important;
    padding:14px!important;
  }

  body.portal-customer-shell .portal43-stat b{
    font-size:17px!important;
  }
}

@media (max-width:360px){
  body.portal-customer-shell .portal43-stats{
    grid-template-columns:1fr!important;
  }
}
/* === END V161 === */


/* === V163 FIX PORTAL HP BLANK + HEADER LOCK AMAN === */
/* Mengganti cara lock header V162 yang bisa membuat area atas blank. */

@media (max-width:820px){

  body.portal-customer-shell,
  body.portal-staff-shell{
    overflow-x:hidden!important;
    padding-top:0!important;
  }

  body.portal-customer-shell::before,
  body.portal-staff-shell::before,
  body.dark.portal-customer-shell::before,
  body.dark.portal-staff-shell::before{
    display:none!important;
    content:none!important;
  }

  body.portal-customer-shell .app,
  body.portal-customer-shell .main,
  body.portal-customer-shell main,
  body.portal-staff-shell .app,
  body.portal-staff-shell .main,
  body.portal-staff-shell main{
    transform:none!important;
    filter:none!important;
    contain:initial!important;
    overflow:visible!important;
  }

  body.portal-customer-shell .main,
  body.portal-staff-shell .main{
    padding-top:84px!important;
    min-height:100svh!important;
    scroll-padding-top:88px!important;
  }

  /* Header portal HP dikunci tanpa overlay blank */
  body.portal-customer-shell .topbar,
  body.portal-staff-shell .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    height:74px!important;
    min-height:74px!important;
    margin:0!important;
    padding:9px 12px!important;
    z-index:99999!important;
    transform:none!important;
    translate:none!important;
    border-radius:0 0 24px 24px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    border:0!important;
    border-bottom:1px solid rgba(104,160,230,.28)!important;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,246,255,.96),rgba(245,241,255,.94))!important;
    box-shadow:0 12px 28px rgba(35,78,150,.14)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.dark.portal-customer-shell .topbar,
  body.dark.portal-staff-shell .topbar{
    background:linear-gradient(135deg,#071222,#09182b 58%,#101630)!important;
    border-bottom-color:rgba(125,180,255,.24)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.42)!important;
  }

  body.portal-customer-shell .topbar .title-block,
  body.portal-staff-shell .topbar .title-block{
    min-width:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  body.portal-customer-shell .topbar .title-block h1,
  body.portal-staff-shell .topbar .title-block h1{
    display:none!important;
  }

  body.portal-customer-shell .topbar .live-clock,
  body.portal-customer-shell .topbar .fns116-live-clock,
  body.portal-staff-shell .topbar .live-clock,
  body.portal-staff-shell .topbar .fns116-live-clock{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:12.8px!important;
    line-height:1.15!important;
    font-weight:950!important;
    color:var(--text)!important;
  }

  body.portal-customer-shell .topbar .fns116-auto-greeting,
  body.portal-customer-shell .topbar .fns149-smart-greeting,
  body.portal-staff-shell .topbar .fns116-auto-greeting,
  body.portal-staff-shell .topbar .fns149-smart-greeting{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:10.8px!important;
    line-height:1.25!important;
    font-weight:900!important;
    color:var(--muted)!important;
  }

  body.portal-customer-shell .topbar .top-actions,
  body.portal-staff-shell .topbar .top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    min-width:max-content!important;
  }

  body.portal-customer-shell .topbar .theme-toggle,
  body.portal-customer-shell .topbar .topbar-icon,
  body.portal-customer-shell .topbar .topbar-settings,
  body.portal-customer-shell .topbar .dash48-ticket-bell,
  body.portal-customer-shell .topbar .topbar-wa-notif,
  body.portal-staff-shell .topbar .theme-toggle,
  body.portal-staff-shell .topbar .topbar-icon,
  body.portal-staff-shell .topbar .topbar-settings,
  body.portal-staff-shell .topbar .dash48-ticket-bell,
  body.portal-staff-shell .topbar .topbar-wa-notif{
    width:37px!important;
    min-width:37px!important;
    height:37px!important;
    min-height:37px!important;
    border-radius:15px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
    position:relative!important;
    background:linear-gradient(180deg,#ffffff,#eef7ff)!important;
    border:1px solid rgba(104,160,230,.32)!important;
    box-shadow:0 8px 18px rgba(35,78,150,.12)!important;
  }

  body.dark.portal-customer-shell .topbar .theme-toggle,
  body.dark.portal-customer-shell .topbar .topbar-icon,
  body.dark.portal-customer-shell .topbar .topbar-settings,
  body.dark.portal-customer-shell .topbar .dash48-ticket-bell,
  body.dark.portal-customer-shell .topbar .topbar-wa-notif,
  body.dark.portal-staff-shell .topbar .theme-toggle,
  body.dark.portal-staff-shell .topbar .topbar-icon,
  body.dark.portal-staff-shell .topbar .topbar-settings,
  body.dark.portal-staff-shell .topbar .dash48-ticket-bell,
  body.dark.portal-staff-shell .topbar .topbar-wa-notif{
    background:linear-gradient(180deg,rgba(18,43,73,.98),rgba(8,24,44,.98))!important;
    border-color:rgba(125,180,255,.24)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.30)!important;
  }

  body.portal-customer-shell .topbar .user-chip,
  body.portal-staff-shell .topbar .user-chip{
    display:flex!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    border-radius:999px!important;
    padding:3px!important;
    overflow:hidden!important;
  }

  body.portal-customer-shell .topbar .user-chip span,
  body.portal-customer-shell .topbar .user-chip small,
  body.portal-staff-shell .topbar .user-chip span,
  body.portal-staff-shell .topbar .user-chip small{
    display:none!important;
  }

  body.portal-customer-shell .topbar .user-chip img,
  body.portal-customer-shell .topbar .avatar-mini,
  body.portal-staff-shell .topbar .user-chip img,
  body.portal-staff-shell .topbar .avatar-mini{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
  }

  /* Halaman pakai/usage tidak boleh punya jarak kosong besar */
  body.portal-page-current-usage .main,
  body.portal-customer-shell.portal-page-current-usage .main{
    padding-top:82px!important;
  }

  body.portal-page-current-usage #portalUsage.portal43-card,
  body.portal-customer-shell #portalUsage.portal43-card{
    margin-top:8px!important;
  }

  body.portal-customer-shell .portal43-main-grid.has-active-portal-page,
  body.portal-customer-shell .portal43-grid-two.has-active-portal-page{
    margin-top:0!important;
    padding-top:0!important;
  }
}

@media (max-width:430px){
  body.portal-customer-shell .topbar,
  body.portal-staff-shell .topbar{
    height:72px!important;
    min-height:72px!important;
    padding:8px 10px!important;
  }

  body.portal-customer-shell .main,
  body.portal-staff-shell .main{
    padding-top:80px!important;
  }

  body.portal-customer-shell .topbar .live-clock,
  body.portal-customer-shell .topbar .fns116-live-clock,
  body.portal-staff-shell .topbar .live-clock,
  body.portal-staff-shell .topbar .fns116-live-clock{
    font-size:12px!important;
  }

  body.portal-customer-shell .topbar .fns116-auto-greeting,
  body.portal-customer-shell .topbar .fns149-smart-greeting,
  body.portal-staff-shell .topbar .fns116-auto-greeting,
  body.portal-staff-shell .topbar .fns149-smart-greeting{
    font-size:10.2px!important;
  }
}
/* === END V163 === */


/* === V164 PORTAL KONEKSI MOCKUP MATCH === */
/* Halaman Pakai diganti konsep menjadi Koneksi, tampilan chart menyesuaikan light/dark seperti mockup. */

@media (max-width:820px){

  /* Bottom nav: label Koneksi lebih pas, active lebih premium */
  .portal-mobile-bottom-nav a[href="#portalUsage"] span{
    font-size:9.2px!important;
  }

  .portal-mobile-bottom-nav a[href="#portalUsage"].active,
  .portal-mobile-bottom-nav a[href="#portalUsage"]:active{
    background:linear-gradient(135deg,#2372ff,#00bdff)!important;
    color:#fff!important;
    box-shadow:0 12px 26px rgba(35,109,255,.30), inset 0 1px 0 rgba(255,255,255,.25)!important;
  }

  body.dark .portal-mobile-bottom-nav a[href="#portalUsage"].active,
  body.dark .portal-mobile-bottom-nav a[href="#portalUsage"]:active{
    background:linear-gradient(135deg,#1269ff,#00b8ff)!important;
    box-shadow:0 12px 28px rgba(0,184,255,.22), inset 0 1px 0 rgba(255,255,255,.18)!important;
  }

  /* Page koneksi dirapatkan */
  body.portal-customer-shell #portalUsage.portal43-card{
    position:relative!important;
    overflow:hidden!important;
    margin:8px 0 14px!important;
    padding:18px!important;
    border-radius:30px!important;
    border:1px solid rgba(95,158,235,.26)!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(196,232,255,.42),transparent 32%),
      radial-gradient(circle at 0% 0%,rgba(255,255,255,.95),transparent 34%),
      radial-gradient(circle at 88% 100%,rgba(132,112,255,.16),transparent 40%),
      linear-gradient(145deg,#ffffff 0%,#f3faff 48%,#eef4ff 100%)!important;
    box-shadow:
      0 16px 38px rgba(35,78,150,.14),
      inset 0 1px 0 rgba(255,255,255,.90)!important;
  }

  body.dark.portal-customer-shell #portalUsage.portal43-card{
    border-color:rgba(71,139,255,.24)!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(124,92,255,.16),transparent 32%),
      radial-gradient(circle at 0% 0%,rgba(0,184,255,.12),transparent 34%),
      radial-gradient(circle at 72% 75%,rgba(0,184,255,.08),transparent 34%),
      linear-gradient(145deg,#06111f 0%,#0a1b31 52%,#071426 100%)!important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.07)!important;
  }

  body.portal-customer-shell #portalUsage.portal43-card:before{
    content:""!important;
    position:absolute!important;
    right:-62px!important;
    top:-62px!important;
    width:170px!important;
    height:170px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,rgba(35,109,255,.11),rgba(168,85,247,.10))!important;
    pointer-events:none!important;
  }

  body.dark.portal-customer-shell #portalUsage.portal43-card:before{
    background:linear-gradient(135deg,rgba(0,184,255,.12),rgba(168,85,247,.12))!important;
  }

  body.portal-customer-shell #portalUsage.portal43-card > *{
    position:relative!important;
    z-index:1!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    align-items:start!important;
    margin:0 0 16px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head h3{
    margin:0 0 7px!important;
    font-size:25px!important;
    line-height:1.02!important;
    letter-spacing:-.06em!important;
    color:#071f3d!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-card-head h3{
    color:#f8fbff!important;
    text-shadow:0 1px 8px rgba(0,0,0,.28)!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head p{
    margin:0!important;
    max-width:96%!important;
    font-size:12.6px!important;
    line-height:1.45!important;
    color:#526b89!important;
    font-weight:850!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-card-head p{
    color:#b4c7de!important;
  }

  body.portal-customer-shell #portalUsage .portal43-live-badge{
    min-height:36px!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:999px!important;
    font-size:11px!important;
    font-weight:950!important;
    letter-spacing:.02em!important;
    background:linear-gradient(135deg,#d8ffe6,#c8fbd8)!important;
    color:#126b35!important;
    border:1px solid rgba(34,197,94,.23)!important;
    box-shadow:0 8px 18px rgba(34,197,94,.12), inset 0 1px 0 rgba(255,255,255,.65)!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-live-badge{
    background:linear-gradient(135deg,rgba(34,197,94,.24),rgba(46,232,159,.14))!important;
    color:#caffdc!important;
    border-color:rgba(46,232,159,.24)!important;
    box-shadow:0 8px 18px rgba(46,232,159,.08), inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  /* Statistik koneksi seperti mockup: icon bulat kiri, 2 kolom */
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    margin:12px 0 16px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div{
    position:relative!important;
    min-height:88px!important;
    padding:15px 14px 15px 64px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,251,255,.92))!important;
    border:1px solid rgba(95,158,235,.22)!important;
    box-shadow:0 10px 24px rgba(35,78,150,.10), inset 0 1px 0 rgba(255,255,255,.86)!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-traffic-numbers>div{
    background:linear-gradient(145deg,rgba(15,37,65,.96),rgba(10,27,49,.94))!important;
    border-color:rgba(125,180,255,.18)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06)!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div:before{
    content:"↓"!important;
    position:absolute!important;
    left:15px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:38px!important;
    height:38px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    font-size:21px!important;
    font-weight:950!important;
    background:linear-gradient(135deg,#2372ff,#00b8ff)!important;
    box-shadow:0 8px 18px rgba(35,109,255,.25)!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div:nth-child(2):before{content:"↑"!important;background:linear-gradient(135deg,#7c5cff,#b95cff)!important}
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div:nth-child(3):before{content:"▣"!important;background:linear-gradient(135deg,#08a5ff,#0cc7ff)!important}
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div:nth-child(4):before{content:"◷"!important;background:linear-gradient(135deg,#16c75b,#38e08f)!important}

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers span,
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers small{
    display:block!important;
    margin:0 0 6px!important;
    color:#627895!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    font-weight:950!important;
    text-transform:uppercase!important;
    letter-spacing:.035em!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-traffic-numbers span,
  body.dark.portal-customer-shell #portalUsage .portal43-traffic-numbers small{
    color:#9fb4cf!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers b,
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers strong{
    color:#071f3d!important;
    font-size:18px!important;
    line-height:1.15!important;
    font-weight:950!important;
    letter-spacing:-.025em!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-traffic-numbers b,
  body.dark.portal-customer-shell #portalUsage .portal43-traffic-numbers strong{
    color:#ffffff!important;
  }

  /* Chart panel adaptive light/dark */
  body.portal-customer-shell #portalUsage .portal43-canvas-wrap{
    position:relative!important;
    height:260px!important;
    margin:6px 0 16px!important;
    padding:14px!important;
    border-radius:24px!important;
    overflow:hidden!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,252,255,.92))!important;
    border:1px solid rgba(95,158,235,.22)!important;
    box-shadow:
      0 14px 28px rgba(35,78,150,.13),
      inset 0 1px 0 rgba(255,255,255,.90)!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-canvas-wrap{
    background:
      radial-gradient(circle at 72% 50%,rgba(124,92,255,.20),transparent 38%),
      linear-gradient(145deg,#061528,#0a2440 48%,#11144a 100%)!important;
    border-color:rgba(57,155,255,.36)!important;
    box-shadow:
      0 0 0 1px rgba(57,155,255,.10),
      0 18px 42px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  body.portal-customer-shell #portalUsage .portal43-canvas-wrap:before{
    content:"LIVE TRAFFIC · 30 MENIT"!important;
    position:absolute!important;
    left:18px!important;
    top:14px!important;
    z-index:2!important;
    color:#0b2442!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.035em!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-canvas-wrap:before{
    color:#eaf5ff!important;
  }

  body.portal-customer-shell #portalUsage .portal43-canvas-wrap:after{
    content:"Download   Upload"!important;
    position:absolute!important;
    right:16px!important;
    top:10px!important;
    z-index:2!important;
    min-height:30px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    color:#10233f!important;
    font-size:10.5px!important;
    font-weight:950!important;
    background:rgba(255,255,255,.84)!important;
    border:1px solid rgba(95,158,235,.16)!important;
    box-shadow:0 8px 18px rgba(35,78,150,.08)!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-canvas-wrap:after{
    color:#eaf5ff!important;
    background:rgba(8,18,38,.78)!important;
    border-color:rgba(125,180,255,.16)!important;
    box-shadow:0 8px 18px rgba(0,0,0,.24)!important;
  }

  body.portal-customer-shell #portalUsage canvas{
    position:relative!important;
    z-index:1!important;
    margin-top:20px!important;
    width:100%!important;
    height:calc(100% - 18px)!important;
    border-radius:18px!important;
  }

  /* Catatan bawah chart */
  body.portal-customer-shell #portalUsage .portal43-usage-message,
  body.portal-customer-shell #portalUsage .portal43-note,
  body.portal-customer-shell #portalUsage p:last-child{
    position:relative!important;
    margin:0!important;
    padding-left:22px!important;
    color:#526b89!important;
    font-size:12px!important;
    line-height:1.45!important;
    font-weight:850!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-usage-message,
  body.dark.portal-customer-shell #portalUsage .portal43-note,
  body.dark.portal-customer-shell #portalUsage p:last-child{
    color:#b6c7dc!important;
  }

  body.portal-customer-shell #portalUsage .portal43-usage-message:before,
  body.portal-customer-shell #portalUsage .portal43-note:before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:.45em!important;
    width:8px!important;
    height:8px!important;
    border-radius:999px!important;
    background:#2380ff!important;
    box-shadow:0 0 0 5px rgba(35,128,255,.10)!important;
  }
}

@media (max-width:430px){
  body.portal-customer-shell #portalUsage.portal43-card{
    padding:16px!important;
    border-radius:28px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head h3{
    font-size:22px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-card-head p{
    font-size:12px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers{
    gap:10px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div{
    min-height:82px!important;
    padding-left:58px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers>div:before{
    width:34px!important;
    height:34px!important;
    border-radius:14px!important;
    left:13px!important;
    font-size:18px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-traffic-numbers b,
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers strong{
    font-size:16px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-canvas-wrap{
    height:238px!important;
    padding:12px!important;
  }

  body.portal-customer-shell #portalUsage .portal43-canvas-wrap:after{
    display:none!important;
  }
}

@media (max-width:360px){
  body.portal-customer-shell #portalUsage .portal43-traffic-numbers{
    grid-template-columns:1fr!important;
  }
}
/* === END V164 === */


/* === V165 TRUE LIGHT/DARK CANVAS CHART === */
/* Canvas chart sekarang digambar ulang oleh JS sesuai mode. CSS ini memperkuat panel light mode. */

@media (max-width:820px){
  body.portal-customer-shell:not(.dark) #portalUsage .portal43-canvas-wrap{
    background:
      radial-gradient(circle at 12% 0%,rgba(35,109,255,.08),transparent 34%),
      radial-gradient(circle at 100% 8%,rgba(168,85,247,.08),transparent 32%),
      linear-gradient(145deg,#ffffff,#f3faff 58%,#f7f5ff)!important;
    border-color:rgba(95,158,235,.26)!important;
    box-shadow:0 12px 28px rgba(35,78,150,.12), inset 0 1px 0 rgba(255,255,255,.92)!important;
  }

  body.portal-customer-shell:not(.dark) #portalUsage .portal43-canvas-wrap:before{
    color:#071f3d!important;
  }

  body.portal-customer-shell:not(.dark) #portalUsage .portal43-canvas-wrap:after{
    color:#071f3d!important;
    background:rgba(255,255,255,.88)!important;
    border-color:rgba(95,158,235,.24)!important;
    box-shadow:0 8px 18px rgba(35,78,150,.10)!important;
  }

  body.dark.portal-customer-shell #portalUsage .portal43-canvas-wrap{
    background:
      radial-gradient(circle at 72% 50%,rgba(124,92,255,.20),transparent 38%),
      linear-gradient(145deg,#061528,#0a2440 48%,#11144a 100%)!important;
  }
}
/* === END V165 === */


/* === V166 PORTAL PACKAGE PASSWORD PRORATA === */
@media (max-width:820px){
  .portal166-bottom-six{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:3px!important;
    padding:6px!important;
  }
  .portal166-bottom-six a{
    min-width:0!important;
    gap:2px!important;
  }
  .portal166-bottom-six a i{
    width:30px!important;
    height:30px!important;
    font-size:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .portal166-bottom-six a span{
    font-size:8.7px!important;
  }

  body.portal-customer-shell .portal166-package-card,
  body.portal-customer-shell .portal166-password-card{
    position:relative!important;
    overflow:hidden!important;
    border-radius:28px!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(35,109,255,.13),transparent 34%),
      radial-gradient(circle at 0% 100%,rgba(0,184,255,.10),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,249,255,.88))!important;
    border:1px solid rgba(95,158,235,.24)!important;
    box-shadow:0 14px 32px rgba(35,78,150,.12)!important;
  }
  body.dark.portal-customer-shell .portal166-package-card,
  body.dark.portal-customer-shell .portal166-password-card{
    background:
      radial-gradient(circle at 100% 0%,rgba(124,92,255,.15),transparent 34%),
      radial-gradient(circle at 0% 100%,rgba(0,184,255,.10),transparent 34%),
      linear-gradient(145deg,rgba(12,31,56,.98),rgba(8,22,41,.96))!important;
    border-color:rgba(125,180,255,.20)!important;
    box-shadow:0 16px 36px rgba(0,0,0,.34)!important;
  }

  .portal166-current-package{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:12px 0!important;
  }
  .portal166-current-package>div,
  .portal166-prorata-preview>div,
  .portal166-migration-item{
    border-radius:20px!important;
    padding:13px!important;
    background:rgba(255,255,255,.74)!important;
    border:1px solid rgba(95,158,235,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;
  }
  body.dark .portal166-current-package>div,
  body.dark .portal166-prorata-preview>div,
  body.dark .portal166-migration-item{
    background:rgba(255,255,255,.055)!important;
    border-color:rgba(125,180,255,.16)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
  .portal166-current-package span,
  .portal166-prorata-preview span{
    display:block!important;
    color:#637b98!important;
    font-size:10.5px!important;
    font-weight:950!important;
    text-transform:uppercase!important;
    letter-spacing:.03em!important;
    margin-bottom:5px!important;
  }
  body.dark .portal166-current-package span,
  body.dark .portal166-prorata-preview span{
    color:#a8bbd2!important;
  }
  .portal166-current-package b,
  .portal166-prorata-preview b{
    display:block!important;
    color:#071f3d!important;
    font-size:15.5px!important;
    line-height:1.18!important;
    font-weight:950!important;
  }
  body.dark .portal166-current-package b,
  body.dark .portal166-prorata-preview b{
    color:#fff!important;
  }
  .portal166-current-package small{
    display:block!important;
    margin-top:3px!important;
    color:#526b89!important;
    font-weight:850!important;
  }
  body.dark .portal166-current-package small{
    color:#9fb4cf!important;
  }

  .portal166-package-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
    margin-top:12px!important;
  }
  .portal166-package-form label,
  .portal166-password-form label{
    color:var(--text)!important;
    font-size:12px!important;
    font-weight:950!important;
  }

  .portal166-prorata-preview{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:4px 0!important;
  }
  .portal166-prorata-preview .pay{
    grid-column:1 / -1!important;
    background:linear-gradient(135deg,#236dff,#00b8ff)!important;
    border:0!important;
    color:#fff!important;
    box-shadow:0 14px 26px rgba(35,109,255,.22)!important;
  }
  .portal166-prorata-preview .pay span,
  .portal166-prorata-preview .pay b{
    color:#fff!important;
  }
  .portal166-prorata-note{
    border-radius:18px!important;
    padding:12px 14px!important;
    background:rgba(35,109,255,.09)!important;
    border:1px solid rgba(35,109,255,.16)!important;
    color:#526b89!important;
    font-size:12px!important;
    line-height:1.45!important;
    font-weight:850!important;
  }
  body.dark .portal166-prorata-note{
    background:rgba(38,167,255,.10)!important;
    border-color:rgba(38,167,255,.18)!important;
    color:#bdd0e7!important;
  }

  .portal166-mini-head{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    margin:12px 0 10px!important;
  }
  .portal166-mini-head b{
    color:var(--text)!important;
    font-size:15px!important;
    font-weight:950!important;
  }
  .portal166-mini-head span{
    color:var(--muted)!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    font-weight:800!important;
  }
  .portal166-migration-history{
    margin-top:14px!important;
  }
  .portal166-migration-item{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-top:8px!important;
  }
  .portal166-migration-item b{
    color:var(--text)!important;
    font-size:12.5px!important;
    font-weight:950!important;
  }
  .portal166-migration-item span{
    display:block!important;
    margin-top:3px!important;
    color:var(--muted)!important;
    font-size:11px!important;
    line-height:1.3!important;
  }
  .portal166-password-card{
    margin-top:14px!important;
    padding:14px!important;
  }
  .portal166-password-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
}

@media (max-width:430px){
  .portal166-bottom-six{
    left:8px!important;
    right:8px!important;
  }
  .portal166-bottom-six a i{
    width:28px!important;
    height:28px!important;
    font-size:15px!important;
  }
  .portal166-bottom-six a span{
    font-size:8px!important;
  }
  .portal166-current-package,
  .portal166-prorata-preview{
    grid-template-columns:1fr!important;
  }
}
/* === END V166 === */


/* === V183 PORTAL PELANGGAN - PAKET INTERNET & GANTI PAKET PREMIUM === */
/* Merapikan blok Paket Internet & Ganti Paket pada portal pelanggan PC/desktop. */

:root{
  --v183-card:rgba(255,255,255,.72);
  --v183-line:rgba(59,130,246,.18);
  --v183-text:#071a34;
  --v183-muted:#55708d;
  --v183-blue:#1688ff;
  --v183-cyan:#08c8ff;
  --v183-purple:#8b5cf6;
  --v183-green:#22c55e;
  --v183-soft:#eef7ff;
}

html[data-theme="dark"],
body.dark,
.theme-dark{
  --v183-card:rgba(8,22,44,.78);
  --v183-line:rgba(96,165,250,.22);
  --v183-text:#f8fbff;
  --v183-muted:#aab9cf;
  --v183-soft:rgba(255,255,255,.055);
}

/* Card yang berisi judul "Paket Internet & Ganti Paket" */
.card:has(h2:first-child),
.panel:has(h2:first-child),
.box:has(h2:first-child),
.glass-card:has(h2:first-child),
section:has(h2:first-child){
  scroll-margin-top:120px;
}

.card:has(h2:first-child)::before,
.panel:has(h2:first-child)::before,
.box:has(h2:first-child)::before,
.glass-card:has(h2:first-child)::before,
section:has(h2:first-child)::before{
  pointer-events:none;
}

/* Target lebih spesifik melalui isi h2 */
.card:has(h2),
.panel:has(h2),
.box:has(h2),
.glass-card:has(h2),
section:has(h2){
  --_dummy:0;
}

.card:has(h2):has(select),
.panel:has(h2):has(select),
.box:has(h2):has(select),
.glass-card:has(h2):has(select),
section:has(h2):has(select){
  border-radius:30px!important;
}

/* Styling untuk area paket portal secara aman: hanya card yang punya judul paket dan select */
.card:has(h2):has(button):has(select),
.panel:has(h2):has(button):has(select),
.box:has(h2):has(button):has(select),
.glass-card:has(h2):has(button):has(select),
section:has(h2):has(button):has(select){
  background:
    radial-gradient(circle at 8% 0%,rgba(8,200,255,.16),transparent 30%),
    radial-gradient(circle at 96% 8%,rgba(139,92,246,.13),transparent 34%),
    linear-gradient(145deg,var(--v183-card),rgba(255,255,255,.52))!important;
  border:1px solid var(--v183-line)!important;
  box-shadow:0 24px 70px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.34)!important;
  padding:26px!important;
  color:var(--v183-text)!important;
  overflow:hidden!important;
  position:relative!important;
}

html[data-theme="dark"] .card:has(h2):has(button):has(select),
html[data-theme="dark"] .panel:has(h2):has(button):has(select),
html[data-theme="dark"] .box:has(h2):has(button):has(select),
html[data-theme="dark"] .glass-card:has(h2):has(button):has(select),
html[data-theme="dark"] section:has(h2):has(button):has(select){
  background:
    radial-gradient(circle at 8% 0%,rgba(8,200,255,.14),transparent 30%),
    radial-gradient(circle at 96% 8%,rgba(139,92,246,.16),transparent 34%),
    linear-gradient(145deg,rgba(8,22,44,.82),rgba(4,12,28,.76))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Judul */
.card:has(h2):has(button):has(select) h2,
.panel:has(h2):has(button):has(select) h2,
.box:has(h2):has(button):has(select) h2,
.glass-card:has(h2):has(button):has(select) h2,
section:has(h2):has(button):has(select) h2{
  margin:0 0 8px!important;
  font-size:25px!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
  font-weight:1000!important;
  color:var(--v183-text)!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.card:has(h2):has(button):has(select) h2::before,
.panel:has(h2):has(button):has(select) h2::before,
.box:has(h2):has(button):has(select) h2::before,
.glass-card:has(h2):has(button):has(select) h2::before,
section:has(h2):has(button):has(select) h2::before{
  content:"📦";
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--v183-blue),var(--v183-cyan));
  color:#fff;
  box-shadow:0 14px 34px rgba(22,136,255,.22);
  font-size:22px;
  flex:0 0 46px;
}

/* Deskripsi */
.card:has(h2):has(button):has(select) > p,
.panel:has(h2):has(button):has(select) > p,
.box:has(h2):has(button):has(select) > p,
.glass-card:has(h2):has(button):has(select) > p,
section:has(h2):has(button):has(select) > p{
  margin:0 0 22px!important;
  color:var(--v183-muted)!important;
  font-size:14px!important;
  line-height:1.5!important;
  font-weight:650!important;
}

/* Susun semua elemen form dan ringkasan supaya tidak saling menempel */
.card:has(h2):has(button):has(select) form,
.panel:has(h2):has(button):has(select) form,
.box:has(h2):has(button):has(select) form,
.glass-card:has(h2):has(button):has(select) form,
section:has(h2):has(button):has(select) form{
  margin-top:18px!important;
  display:grid!important;
  grid-template-columns:2fr 1fr auto!important;
  gap:14px!important;
  align-items:end!important;
  padding:18px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.50)!important;
  border:1px solid var(--v183-line)!important;
}

html[data-theme="dark"] .card:has(h2):has(button):has(select) form,
html[data-theme="dark"] .panel:has(h2):has(button):has(select) form,
html[data-theme="dark"] .box:has(h2):has(button):has(select) form,
html[data-theme="dark"] .glass-card:has(h2):has(button):has(select) form,
html[data-theme="dark"] section:has(h2):has(button):has(select) form{
  background:rgba(255,255,255,.045)!important;
}

/* Label/input */
.card:has(h2):has(button):has(select) label,
.panel:has(h2):has(button):has(select) label,
.box:has(h2):has(button):has(select) label,
.glass-card:has(h2):has(button):has(select) label,
section:has(h2):has(button):has(select) label{
  display:block!important;
  color:var(--v183-text)!important;
  font-size:12px!important;
  font-weight:950!important;
  margin:0 0 7px!important;
}

.card:has(h2):has(button):has(select) select,
.card:has(h2):has(button):has(select) input[type="date"],
.card:has(h2):has(button):has(select) input[type="text"],
.panel:has(h2):has(button):has(select) select,
.panel:has(h2):has(button):has(select) input[type="date"],
.panel:has(h2):has(button):has(select) input[type="text"],
.box:has(h2):has(button):has(select) select,
.box:has(h2):has(button):has(select) input[type="date"],
.box:has(h2):has(button):has(select) input[type="text"],
.glass-card:has(h2):has(button):has(select) select,
.glass-card:has(h2):has(button):has(select) input[type="date"],
.glass-card:has(h2):has(button):has(select) input[type="text"],
section:has(h2):has(button):has(select) select,
section:has(h2):has(button):has(select) input[type="date"],
section:has(h2):has(button):has(select) input[type="text"]{
  width:100%!important;
  min-height:48px!important;
  border-radius:15px!important;
  border:1px solid rgba(59,130,246,.22)!important;
  background:rgba(255,255,255,.76)!important;
  color:var(--v183-text)!important;
  padding:0 14px!important;
  font-size:13.5px!important;
  font-weight:780!important;
  outline:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50)!important;
}

html[data-theme="dark"] .card:has(h2):has(button):has(select) select,
html[data-theme="dark"] .card:has(h2):has(button):has(select) input[type="date"],
html[data-theme="dark"] .card:has(h2):has(button):has(select) input[type="text"],
html[data-theme="dark"] section:has(h2):has(button):has(select) select,
html[data-theme="dark"] section:has(h2):has(button):has(select) input[type="date"],
html[data-theme="dark"] section:has(h2):has(button):has(select) input[type="text"]{
  background:rgba(5,16,34,.76)!important;
  color:#fff!important;
  border-color:rgba(96,165,250,.24)!important;
}

/* Tombol */
.card:has(h2):has(button):has(select) button,
.panel:has(h2):has(button):has(select) button,
.box:has(h2):has(button):has(select) button,
.glass-card:has(h2):has(button):has(select) button,
section:has(h2):has(button):has(select) button{
  min-height:48px!important;
  padding:0 22px!important;
  border-radius:15px!important;
  border:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  background:linear-gradient(90deg,var(--v183-blue),var(--v183-cyan))!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:1000!important;
  box-shadow:0 14px 32px rgba(22,136,255,.22)!important;
  cursor:pointer!important;
}

.card:has(h2):has(button):has(select) button::before,
.panel:has(h2):has(button):has(select) button::before,
.box:has(h2):has(button):has(select) button::before,
.glass-card:has(h2):has(button):has(select) button::before,
section:has(h2):has(button):has(select) button::before{
  content:"🔄";
}

/* Ringkasan teks yang sebelumnya menempel dibuat seperti blok info */
.card:has(h2):has(button):has(select) form + *,
.panel:has(h2):has(button):has(select) form + *,
.box:has(h2):has(button):has(select) form + *,
.glass-card:has(h2):has(button):has(select) form + *,
section:has(h2):has(button):has(select) form + *{
  margin-top:16px!important;
}

/* Riwayat request */
.card:has(h2):has(button):has(select) h3,
.panel:has(h2):has(button):has(select) h3,
.box:has(h2):has(button):has(select) h3,
.glass-card:has(h2):has(button):has(select) h3,
section:has(h2):has(button):has(select) h3,
.card:has(h2):has(button):has(select) b,
.panel:has(h2):has(button):has(select) b,
.box:has(h2):has(button):has(select) b,
.glass-card:has(h2):has(button):has(select) b,
section:has(h2):has(button):has(select) b{
  color:var(--v183-text)!important;
}

/* Empty/riwayat box yang abu-abu */
.card:has(h2):has(button):has(select) .empty,
.card:has(h2):has(button):has(select) .empty-state,
.card:has(h2):has(button):has(select) .table-empty,
.panel:has(h2):has(button):has(select) .empty,
.box:has(h2):has(button):has(select) .empty,
.glass-card:has(h2):has(button):has(select) .empty,
section:has(h2):has(button):has(select) .empty,
section:has(h2):has(button):has(select) .empty-state,
section:has(h2):has(button):has(select) .table-empty{
  min-height:92px!important;
  border-radius:20px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 26px!important;
  color:var(--v183-muted)!important;
  background:linear-gradient(145deg,rgba(148,163,184,.18),rgba(96,165,250,.12))!important;
  border:1px dashed rgba(96,165,250,.20)!important;
}

/* Kalau data masih berupa text langsung, berikan spacing umum */
.card:has(h2):has(button):has(select) br,
.panel:has(h2):has(button):has(select) br,
.box:has(h2):has(button):has(select) br,
.glass-card:has(h2):has(button):has(select) br,
section:has(h2):has(button):has(select) br{
  line-height:1.85!important;
}

/* Responsive */
@media(max-width:1100px){
  .card:has(h2):has(button):has(select) form,
  .panel:has(h2):has(button):has(select) form,
  .box:has(h2):has(button):has(select) form,
  .glass-card:has(h2):has(button):has(select) form,
  section:has(h2):has(button):has(select) form{
    grid-template-columns:1fr 1fr!important;
  }
  .card:has(h2):has(button):has(select) button,
  .panel:has(h2):has(button):has(select) button,
  .box:has(h2):has(button):has(select) button,
  .glass-card:has(h2):has(button):has(select) button,
  section:has(h2):has(button):has(select) button{
    grid-column:1 / -1!important;
  }
}

@media(max-width:720px){
  .card:has(h2):has(button):has(select),
  .panel:has(h2):has(button):has(select),
  .box:has(h2):has(button):has(select),
  .glass-card:has(h2):has(button):has(select),
  section:has(h2):has(button):has(select){
    padding:18px!important;
    border-radius:24px!important;
  }

  .card:has(h2):has(button):has(select) h2,
  .panel:has(h2):has(button):has(select) h2,
  .box:has(h2):has(button):has(select) h2,
  .glass-card:has(h2):has(button):has(select) h2,
  section:has(h2):has(button):has(select) h2{
    font-size:21px!important;
  }

  .card:has(h2):has(button):has(select) form,
  .panel:has(h2):has(button):has(select) form,
  .box:has(h2):has(button):has(select) form,
  .glass-card:has(h2):has(button):has(select) form,
  section:has(h2):has(button):has(select) form{
    grid-template-columns:1fr!important;
    padding:14px!important;
    border-radius:18px!important;
  }
}
/* === END V183 === */



/* === V186 MENU WHATSAPP GROUP === */
/* Menu WhatsApp dibuat sebagai group sendiri agar submenu WA tidak bercampur di SDM & Sistem. */
.nav-group[data-group="WhatsApp"] .nav-group-toggle span::before{
  content:"💬 ";
}
.nav-group[data-group="WhatsApp"] .nav-group-toggle{
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(14,165,233,.08))!important;
  border-color:rgba(34,197,94,.22)!important;
}
.nav-group[data-group="WhatsApp"] .nav-items a.active{
  background:linear-gradient(90deg,rgba(34,197,94,.18),rgba(14,165,233,.13))!important;
  border-color:rgba(34,197,94,.26)!important;
}
/* === END V186 === */


/* === V187 TEMPLATE PESAN WHATSAPP PREMIUM === */
.wa-template-section-pro{
  position:relative;
  overflow:hidden;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(34,197,94,.13),transparent 30%),
    radial-gradient(circle at 92% 0%,rgba(14,165,233,.13),transparent 34%),
    linear-gradient(145deg,var(--panel),var(--panel2))!important;
  border:1px solid rgba(34,197,94,.18)!important;
}
.wa-template-section-pro:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(34,197,94,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,.045) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.55;
}
.wa-template-section-pro > *{position:relative;z-index:1}
.wa-template-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.wa-template-titlebox{
  display:flex;
  align-items:center;
  gap:14px;
}
.wa-template-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  display:grid;
  place-items:center;
  font-size:28px;
  background:linear-gradient(145deg,#22c55e,#0ea5e9);
  color:#fff;
  box-shadow:0 18px 42px rgba(34,197,94,.22);
}
.wa-template-titlebox h3{
  margin:3px 0 6px!important;
  font-size:25px!important;
  line-height:1.1!important;
  font-weight:1000!important;
  letter-spacing:-.035em;
}
.wa-template-total{
  min-width:132px;
  min-height:66px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(34,197,94,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
body.dark .wa-template-total,
html[data-theme="dark"] .wa-template-total{
  background:rgba(255,255,255,.055);
  border-color:rgba(34,197,94,.22);
}
.wa-template-total b{
  font-size:24px;
  line-height:1;
  color:var(--text);
  font-weight:1000;
}
.wa-template-total span{
  margin-top:-8px;
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
}
.wa-variable-panel{
  margin:0 0 18px;
  padding:16px;
  border-radius:22px;
  display:grid;
  grid-template-columns:minmax(190px,.45fr) 1fr;
  gap:14px;
  align-items:center;
  background:linear-gradient(145deg,rgba(34,197,94,.10),rgba(14,165,233,.075));
  border:1px solid rgba(34,197,94,.17);
}
.wa-variable-panel b{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:1000;
}
.wa-variable-panel span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}
.wa-variable-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.wa-var-chip{
  height:32px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(14,165,233,.22);
  background:rgba(255,255,255,.66);
  color:#075985;
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
}
body.dark .wa-var-chip,
html[data-theme="dark"] .wa-var-chip{
  background:rgba(255,255,255,.065);
  color:#c8f7ff;
  border-color:rgba(14,165,233,.24);
}
.wa-var-chip:hover{
  transform:translateY(-1px);
  background:linear-gradient(90deg,#22c55e,#0ea5e9);
  color:#fff;
}
.wa-template-grid.pro{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.wa-template-card.pro{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  min-height:100%;
  padding:16px!important;
  border-radius:24px!important;
  border:1px solid rgba(14,165,233,.17)!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(34,197,94,.11),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(244,250,255,.56))!important;
  box-shadow:0 16px 46px rgba(15,118,110,.08), inset 0 1px 0 rgba(255,255,255,.55)!important;
}
body.dark .wa-template-card.pro,
html[data-theme="dark"] .wa-template-card.pro{
  background:
    radial-gradient(circle at 0% 0%,rgba(34,197,94,.11),transparent 28%),
    linear-gradient(145deg,rgba(10,25,48,.78),rgba(4,13,30,.72))!important;
  box-shadow:0 16px 46px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06)!important;
  border-color:rgba(96,165,250,.18)!important;
}
.wa-template-card.pro.is-inactive{
  opacity:.78;
  filter:saturate(.78);
}
.wa-template-card.pro.new{
  border-style:dashed!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(34,197,94,.16),transparent 32%),
    linear-gradient(145deg,rgba(236,253,245,.75),rgba(240,249,255,.58))!important;
}
body.dark .wa-template-card.pro.new,
html[data-theme="dark"] .wa-template-card.pro.new{
  background:
    radial-gradient(circle at 0% 0%,rgba(34,197,94,.14),transparent 32%),
    linear-gradient(145deg,rgba(6,36,28,.64),rgba(4,13,30,.72))!important;
}
.wa-card-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid rgba(148,163,184,.16);
}
.wa-card-head strong{
  display:block;
  margin-top:8px;
  color:var(--text);
  font-size:16px;
  line-height:1.2;
  font-weight:1000;
}
.wa-card-head small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.wa-event-badge{
  height:28px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.22);
  color:#047857;
  font-size:11px;
  font-weight:1000;
}
body.dark .wa-event-badge,
html[data-theme="dark"] .wa-event-badge{
  color:#bbf7d0;
  background:rgba(34,197,94,.12);
}
.wa-event-badge.new{
  background:rgba(14,165,233,.13);
  border-color:rgba(14,165,233,.22);
  color:#0369a1;
}
body.dark .wa-event-badge.new,
html[data-theme="dark"] .wa-event-badge.new{
  color:#bae6fd;
}
.wa-status-dot{
  height:30px;
  padding:0 11px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:1000;
  white-space:nowrap;
}
.wa-status-dot:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:99px;
}
.wa-status-dot.on{
  background:rgba(34,197,94,.13);
  color:#047857;
}
.wa-status-dot.on:before{
  background:#22c55e;
  box-shadow:0 0 12px rgba(34,197,94,.62);
}
.wa-status-dot.off{
  background:rgba(148,163,184,.18);
  color:#64748b;
}
.wa-status-dot.off:before{
  background:#94a3b8;
}
body.dark .wa-status-dot.on,
html[data-theme="dark"] .wa-status-dot.on{color:#bbf7d0}
body.dark .wa-status-dot.off,
html[data-theme="dark"] .wa-status-dot.off{color:#cbd5e1}
.wa-template-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.wa-template-fields label{
  display:block;
  color:var(--text);
  font-size:11.5px;
  font-weight:950;
}
.wa-template-fields label.message-field{
  grid-column:1/-1;
}
.wa-template-fields input,
.wa-template-fields select,
.wa-template-fields textarea{
  width:100%;
  margin-top:7px;
  border-radius:14px!important;
  border:1px solid rgba(14,165,233,.19)!important;
  background:rgba(255,255,255,.72)!important;
  color:var(--text)!important;
  padding:0 12px!important;
  font-size:12.5px!important;
  font-weight:750!important;
  outline:0!important;
}
body.dark .wa-template-fields input,
body.dark .wa-template-fields select,
body.dark .wa-template-fields textarea,
html[data-theme="dark"] .wa-template-fields input,
html[data-theme="dark"] .wa-template-fields select,
html[data-theme="dark"] .wa-template-fields textarea{
  background:rgba(5,16,34,.66)!important;
  border-color:rgba(96,165,250,.18)!important;
}
.wa-template-fields input,
.wa-template-fields select{
  min-height:40px;
}
.wa-template-fields textarea{
  min-height:132px!important;
  padding:12px!important;
  line-height:1.55!important;
  resize:vertical;
}
.wa-template-fields input:focus,
.wa-template-fields select:focus,
.wa-template-fields textarea:focus{
  border-color:rgba(34,197,94,.45)!important;
  box-shadow:0 0 0 4px rgba(34,197,94,.10)!important;
}
.wa-template-actions{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wa-template-actions span{
  color:var(--muted);
  font-size:11.5px;
  line-height:1.35;
  font-weight:750;
}
.wa-template-actions .btn{
  white-space:nowrap;
  border-radius:13px!important;
  min-height:34px!important;
}
@media(max-width:1180px){
  .wa-template-grid.pro{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .wa-template-top{flex-direction:column;align-items:stretch}
  .wa-template-total{width:100%;min-height:54px}
  .wa-variable-panel{grid-template-columns:1fr}
  .wa-template-fields{grid-template-columns:1fr}
  .wa-template-actions{flex-direction:column;align-items:stretch}
  .wa-template-actions .btn{width:100%}
}
/* === END V187 === */


/* === V188 COPYWRITING PESAN WA === */
.wa-copywriting-tips{
  margin:0 0 14px;
  padding:14px 16px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(90deg,rgba(34,197,94,.13),rgba(14,165,233,.10),rgba(139,92,246,.10));
  border:1px solid rgba(34,197,94,.18);
}
.wa-copywriting-tips b{
  color:var(--text);
  font-size:14px;
  font-weight:1000;
  white-space:nowrap;
}
.wa-copywriting-tips span{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
  font-weight:750;
}
.wa-template-fields textarea{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  min-height:190px!important;
}
.wa-template-card.pro .message-field:after{
  content:"Tips: gunakan bahasa singkat, jelas, ramah, dan sertakan nominal/tanggal agar pelanggan tidak bingung.";
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:10.8px;
  line-height:1.35;
  font-weight:750;
}
@media(max-width:760px){
  .wa-copywriting-tips{
    flex-direction:column;
    align-items:flex-start;
  }
  .wa-copywriting-tips b{
    white-space:normal;
  }
}
/* === END V188 === */


/* === V191 WHATSAPP CENTER ONLY === */
/* Menu WhatsApp disederhanakan: cukup WhatsApp Center agar tidak membingungkan. */
.nav-group[data-group="WhatsApp"] .nav-items a{
  min-height:46px;
}
.nav-group[data-group="WhatsApp"] .nav-items a[href*="whatsapp"]{
  font-weight:1000;
}
/* === END V191 === */


/* === V192 WHATSAPP LOG SEPARATE === */
.wa-log-hero{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  border-radius:28px;
}
.wa-log-hero .hero-icon{
  width:62px;
  height:62px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1688ff,#08c8ff);
  color:#fff;
  font-size:30px;
  box-shadow:0 18px 42px rgba(22,136,255,.22);
  flex:0 0 62px;
}
.wa-log-hero h1{
  margin:0 0 6px;
  font-size:30px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.04em;
  color:var(--text);
}
.wa-log-hero p{
  margin:0;
  color:var(--muted);
  font-weight:750;
}
.wa-log-filter{
  display:grid;
  grid-template-columns:1.3fr .7fr .9fr auto;
  gap:12px;
  align-items:end;
}
.wa-log-filter label{
  display:block;
  color:var(--text);
  font-size:12px;
  font-weight:950;
}
.wa-log-filter input,
.wa-log-filter select{
  width:100%;
  min-height:44px;
  margin-top:7px;
  border-radius:14px;
  border:1px solid rgba(59,130,246,.22);
  background:rgba(255,255,255,.72);
  color:var(--text);
  padding:0 13px;
  font-weight:780;
  outline:0;
}
body.dark .wa-log-filter input,
body.dark .wa-log-filter select,
html[data-theme="dark"] .wa-log-filter input,
html[data-theme="dark"] .wa-log-filter select{
  background:rgba(5,16,34,.68);
  border-color:rgba(96,165,250,.22);
}
.wa-log-table-wrap{
  max-height:none;
  overflow:auto;
}
.wa-log-table{
  min-width:1180px;
}
.wa-log-table th{
  white-space:nowrap;
}
.wa-event-mini{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.20);
  color:#0369a1;
  font-size:11.5px;
  font-weight:950;
}
body.dark .wa-event-mini,
html[data-theme="dark"] .wa-event-mini{
  color:#bae6fd;
}
.wa-log-message,
.wa-log-response{
  max-width:440px;
  color:var(--text);
  line-height:1.45;
}
.wa-log-response{
  color:var(--muted);
}
.nowrap{
  white-space:nowrap;
}
.nav-group[data-group="WhatsApp"] .nav-items a[href*="whatsapp_logs"]{
  font-weight:1000;
}
@media(max-width:1000px){
  .wa-log-filter{
    grid-template-columns:1fr 1fr;
  }
  .wa-log-filter button{
    grid-column:1/-1;
  }
}
@media(max-width:720px){
  .wa-log-hero{
    flex-direction:column;
    align-items:flex-start;
  }
  .wa-log-filter{
    grid-template-columns:1fr;
  }
  .wa-log-hero h1{
    font-size:24px;
  }
}
/* === END V192 === */


/* === V193 WHATSAPP LOG ROUTE FIX === */
.wa-log-hero{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  border-radius:28px;
}
.wa-log-hero .hero-icon{
  width:62px;
  height:62px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1688ff,#08c8ff);
  color:#fff;
  font-size:30px;
  box-shadow:0 18px 42px rgba(22,136,255,.22);
  flex:0 0 62px;
}
.wa-log-hero h1{
  margin:0 0 6px;
  font-size:30px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.04em;
  color:var(--text);
}
.wa-log-hero p{
  margin:0;
  color:var(--muted);
  font-weight:750;
}
.wa-log-filter{
  display:grid;
  grid-template-columns:1.3fr .7fr .9fr auto;
  gap:12px;
  align-items:end;
}
.wa-log-filter label{
  display:block;
  color:var(--text);
  font-size:12px;
  font-weight:950;
}
.wa-log-filter input,
.wa-log-filter select{
  width:100%;
  min-height:44px;
  margin-top:7px;
  border-radius:14px;
  border:1px solid rgba(59,130,246,.22);
  background:rgba(255,255,255,.72);
  color:var(--text);
  padding:0 13px;
  font-weight:780;
  outline:0;
}
body.dark .wa-log-filter input,
body.dark .wa-log-filter select,
html[data-theme="dark"] .wa-log-filter input,
html[data-theme="dark"] .wa-log-filter select{
  background:rgba(5,16,34,.68);
  border-color:rgba(96,165,250,.22);
}
.wa-log-table{min-width:1180px}
.wa-event-mini{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.20);
  color:#0369a1;
  font-size:11.5px;
  font-weight:950;
}
body.dark .wa-event-mini,
html[data-theme="dark"] .wa-event-mini{color:#bae6fd}
.wa-log-message,.wa-log-response{
  max-width:440px;
  color:var(--text);
  line-height:1.45;
}
.wa-log-response{color:var(--muted)}
.nowrap{white-space:nowrap}
@media(max-width:1000px){
  .wa-log-filter{grid-template-columns:1fr 1fr}
  .wa-log-filter button{grid-column:1/-1}
}
@media(max-width:720px){
  .wa-log-hero{flex-direction:column;align-items:flex-start}
  .wa-log-filter{grid-template-columns:1fr}
  .wa-log-hero h1{font-size:24px}
}
/* === END V193 === */


/* === V194 SPLIT WHATSAPP TEMPLATE LOG === */
.wa-template-hero{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  border-radius:28px;
}
.wa-template-hero .hero-icon{
  width:62px;
  height:62px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#8b5cf6,#08c8ff);
  color:#fff;
  font-size:30px;
  box-shadow:0 18px 42px rgba(139,92,246,.22);
  flex:0 0 62px;
}
.wa-template-hero h1{
  margin:0 0 6px;
  font-size:30px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.04em;
  color:var(--text);
}
.wa-template-hero p{
  margin:0;
  color:var(--muted);
  font-weight:750;
}
.wa-center-split-info{
  border-radius:26px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(139,92,246,.12),transparent 30%),
    linear-gradient(145deg,var(--panel),var(--panel2))!important;
  border:1px solid rgba(139,92,246,.18)!important;
}
.wa-center-split-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.nav-group[data-group="WhatsApp"] .nav-items a[href*="whatsapp_templates"]{
  font-weight:1000;
}
@media(max-width:720px){
  .wa-template-hero{
    flex-direction:column;
    align-items:flex-start;
  }
  .wa-template-hero h1{
    font-size:24px;
  }
}
/* === END V194 === */


/* === V195 SEED WHATSAPP TEMPLATE === */
.wa-template-section-pro .wa-template-total span::after{
  content:" siap pakai";
}
.wa-template-card.pro textarea{
  white-space:pre-wrap;
}
/* === END V195 === */


/* === V196 WABLAS SEND FIX === */
.alert.error,
.flash.error{
  border-radius:18px!important;
  line-height:1.45!important;
}
.wa-center-split-info .btn,
.wa-log-filter .btn{
  white-space:nowrap;
}
/* === END V196 === */


/* === V197 PPPOE FLAP NOTIF COOLDOWN === */
.wa-pppoe-antispam-info{
  border-radius:26px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(34,197,94,.12),transparent 30%),
    linear-gradient(145deg,var(--panel),var(--panel2))!important;
  border:1px solid rgba(34,197,94,.18)!important;
}
.wa-pppoe-antispam-info .wa-center-split-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.wa-pppoe-antispam-info .btn.tiny{
  pointer-events:none;
  cursor:default;
}
/* === END V197 === */

/* V198 STOP CRON DISCONNECT: PPPoE aktif tidak diputus paksa setiap cron. */


/* === V199 JADWAL OTOMATIS AMAN ISP === */
.scheduler-hero{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  border-radius:28px;
}
.scheduler-hero .hero-icon{
  width:62px;height:62px;border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(145deg,#1688ff,#08c8ff);
  color:#fff;font-size:30px;box-shadow:0 18px 42px rgba(22,136,255,.22);flex:0 0 62px;
}
.scheduler-hero h1{margin:0 0 6px;font-size:30px;line-height:1.1;font-weight:1000;letter-spacing:-.04em;color:var(--text)}
.scheduler-hero p{margin:0;color:var(--muted);font-weight:750}
.scheduler-safe-note{
  border:1px solid rgba(34,197,94,.18)!important;
  background:radial-gradient(circle at 0% 0%,rgba(34,197,94,.13),transparent 30%),linear-gradient(145deg,var(--panel),var(--panel2))!important;
}
.scheduler-note-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.scheduler-note-grid span{
  min-height:42px;border-radius:16px;padding:10px 12px;display:flex;align-items:center;
  background:rgba(255,255,255,.52);border:1px solid rgba(59,130,246,.14);font-weight:900;color:var(--text);font-size:12.5px;
}
body.dark .scheduler-note-grid span,html[data-theme="dark"] .scheduler-note-grid span{background:rgba(5,16,34,.55)}
.scheduler-table-wrap{overflow:auto}
.scheduler-table{min-width:1080px;width:100%;border-collapse:separate;border-spacing:0 10px}
.scheduler-table th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px}
.scheduler-table td{
  background:rgba(255,255,255,.52);border-top:1px solid rgba(59,130,246,.13);border-bottom:1px solid rgba(59,130,246,.13);
  padding:13px 10px;vertical-align:middle;color:var(--text)
}
.scheduler-table td:first-child{border-left:1px solid rgba(59,130,246,.13);border-radius:18px 0 0 18px;width:74px}
.scheduler-table td:last-child{border-right:1px solid rgba(59,130,246,.13);border-radius:0 18px 18px 0}
body.dark .scheduler-table td,html[data-theme="dark"] .scheduler-table td{background:rgba(5,16,34,.58)}
.scheduler-table b{display:block;font-weight:1000;color:var(--text);margin-bottom:4px}
.scheduler-table small{display:block;color:var(--muted);font-weight:700;max-width:520px;line-height:1.35}
.scheduler-table code{display:inline-flex;margin-top:7px;padding:4px 8px;border-radius:999px;background:rgba(14,165,233,.10);color:#0369a1;font-weight:900;font-size:11px}
body.dark .scheduler-table code,html[data-theme="dark"] .scheduler-table code{color:#bae6fd}
.scheduler-table select,.scheduler-table input[type="time"]{
  width:100%;min-height:42px;border-radius:14px;border:1px solid rgba(59,130,246,.22);
  background:rgba(255,255,255,.75);color:var(--text);font-weight:850;padding:0 12px;outline:0
}
body.dark .scheduler-table select,body.dark .scheduler-table input[type="time"],
html[data-theme="dark"] .scheduler-table select,html[data-theme="dark"] .scheduler-table input[type="time"]{background:rgba(5,16,34,.65)}
.switch-mini{display:inline-flex;align-items:center;cursor:pointer}
.switch-mini input{display:none}
.switch-mini span{width:46px;height:26px;border-radius:999px;background:#cbd5e1;position:relative;transition:.2s}
.switch-mini span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.18);transition:.2s}
.switch-mini input:checked+span{background:linear-gradient(90deg,#16a34a,#22c55e)}
.switch-mini input:checked+span:before{transform:translateX(20px)}
.scheduler-safe-pill{
  display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.22);color:#15803d;font-weight:1000;font-size:12px;
}
body.dark .scheduler-safe-pill,html[data-theme="dark"] .scheduler-safe-pill{color:#bbf7d0}
.scheduler-cron-command pre{
  white-space:pre-wrap;word-break:break-word;border-radius:18px;padding:16px;
  background:#061529;color:#dbeafe;border:1px solid rgba(96,165,250,.22);font-weight:850
}
@media(max-width:900px){
  .scheduler-hero{flex-direction:column;align-items:flex-start}
  .scheduler-note-grid{grid-template-columns:1fr}
  .scheduler-hero h1{font-size:24px}
}
/* === END V199 === */


/* === V200 PAKAI JADWAL ISOLIR SAJA === */
.schedule-single-note,
.isolation-single-note{
  border-radius:22px;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.20);
}
/* Menu auto_scheduler disembunyikan agar tidak dobel. Jadwal utama tetap Jadwal Isolir. */
/* === END V200 === */


/* === V201 JADWAL OTOMATIS LENGKAP SAJA === */
.scheduler-v201-hero{display:flex;align-items:center;gap:18px;justify-content:space-between;border-radius:28px}
.scheduler-v201-hero .hero-icon{width:62px;height:62px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#1688ff,#08c8ff);color:#fff;font-size:30px;box-shadow:0 18px 42px rgba(22,136,255,.22);flex:0 0 62px}
.scheduler-v201-hero h1{margin:0 0 6px;font-size:30px;line-height:1.1;font-weight:1000;letter-spacing:-.04em;color:var(--text)}
.scheduler-v201-hero p{margin:0;color:var(--muted);font-weight:750}
.scheduler-v201-note{border:1px solid rgba(34,197,94,.18)!important;background:radial-gradient(circle at 0% 0%,rgba(34,197,94,.13),transparent 30%),linear-gradient(145deg,var(--panel),var(--panel2))!important}
.scheduler-v201-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.scheduler-v201-chips span{min-height:42px;border-radius:16px;padding:10px 12px;display:flex;align-items:center;background:rgba(255,255,255,.52);border:1px solid rgba(59,130,246,.14);font-weight:900;color:var(--text);font-size:12.5px}
body.dark .scheduler-v201-chips span,html[data-theme="dark"] .scheduler-v201-chips span{background:rgba(5,16,34,.55)}
.scheduler-v201-table-wrap{overflow:auto}
.scheduler-v201-table{min-width:1180px;width:100%;border-collapse:separate;border-spacing:0 10px}
.scheduler-v201-table th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:2px solid rgba(245,158,11,.75)}
.scheduler-v201-table td{background:rgba(255,255,255,.52);border-top:1px solid rgba(59,130,246,.13);border-bottom:1px solid rgba(59,130,246,.13);padding:13px 10px;vertical-align:middle;color:var(--text)}
.scheduler-v201-table td:first-child{border-left:1px solid rgba(59,130,246,.13);border-radius:18px 0 0 18px;min-width:430px}
.scheduler-v201-table td:last-child{border-right:1px solid rgba(59,130,246,.13);border-radius:0 18px 18px 0}
body.dark .scheduler-v201-table td,html[data-theme="dark"] .scheduler-v201-table td{background:rgba(5,16,34,.58)}
.scheduler-v201-task{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.scheduler-v201-task input{display:none}
.scheduler-v201-task span{width:18px;height:18px;border-radius:5px;border:2px solid #38bdf8;display:inline-flex;flex:0 0 18px;margin-top:2px}
.scheduler-v201-task input:checked+span{background:#0ea5e9;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.scheduler-v201-task b{display:block;font-weight:1000;color:var(--text);margin-bottom:4px}
.scheduler-v201-task small{display:block;color:var(--muted);font-weight:700;max-width:560px;line-height:1.35}
.scheduler-v201-task code{display:inline-flex;margin-top:7px;padding:4px 8px;border-radius:999px;background:rgba(14,165,233,.10);color:#0369a1;font-weight:900;font-size:11px}
body.dark .scheduler-v201-task code,html[data-theme="dark"] .scheduler-v201-task code{color:#bae6fd}
.scheduler-v201-table select,.scheduler-v201-table input[type="time"]{width:100%;min-height:42px;border-radius:14px;border:1px solid rgba(59,130,246,.22);background:rgba(255,255,255,.75);color:var(--text);font-weight:850;padding:0 12px;outline:0}
body.dark .scheduler-v201-table select,body.dark .scheduler-v201-table input[type="time"],html[data-theme="dark"] .scheduler-v201-table select,html[data-theme="dark"] .scheduler-v201-table input[type="time"]{background:rgba(5,16,34,.65)}
.scheduler-v201-safe{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.22);color:#15803d;font-weight:1000;font-size:12px;white-space:nowrap}
body.dark .scheduler-v201-safe,html[data-theme="dark"] .scheduler-v201-safe{color:#bbf7d0}
.scheduler-v201-command pre{white-space:pre-wrap;word-break:break-word;border-radius:18px;padding:16px;background:#061529;color:#dbeafe;border:1px solid rgba(96,165,250,.22);font-weight:850}
@media(max-width:900px){.scheduler-v201-hero{flex-direction:column;align-items:flex-start}.scheduler-v201-chips{grid-template-columns:1fr}.scheduler-v201-hero h1{font-size:24px}}
/* === END V201 === */


/* === V209 STATUS ISOLIR MERAH === */
.badge.isolated,
.badge.isolir,
.badge.suspend,
.badge.suspended,
.badge.danger.overdue{
  background:linear-gradient(135deg,#fee2e2,#fecaca)!important;
  color:#b91c1c!important;
  border:1px solid #fca5a5!important;
  font-weight:1000!important;
  box-shadow:0 8px 18px rgba(239,68,68,.12)!important;
}
body.dark .badge.isolated,
body.dark .badge.isolir,
body.dark .badge.suspend,
body.dark .badge.suspended,
html[data-theme="dark"] .badge.isolated,
html[data-theme="dark"] .badge.isolir{
  background:rgba(127,29,29,.55)!important;
  color:#fecaca!important;
  border-color:rgba(248,113,113,.45)!important;
}
.fns112-actions a[title*="Isolir"]{
  background:linear-gradient(135deg,#fee2e2,#fff7ed)!important;
  border-color:#fca5a5!important;
  color:#dc2626!important;
}
.fns112-actions a[title*="Aktifkan"]{
  background:linear-gradient(135deg,#dcfce7,#ecfdf5)!important;
  border-color:#86efac!important;
  color:#16a34a!important;
}
/* === END V209 === */


/* === V210 FULL FIX ISOLIR SEMPURNA === */
.v210-isolir-source{
  display:inline-flex;
  margin-top:4px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(239,68,68,.10);
  color:#b91c1c;
  font-weight:900;
  font-size:10px;
}
body.dark .v210-isolir-source, html[data-theme="dark"] .v210-isolir-source{
  color:#fecaca;
  background:rgba(127,29,29,.35);
}
.btn.danger{
  background:linear-gradient(135deg,#ef4444,#f97316)!important;
  color:#fff!important;
  border-color:rgba(239,68,68,.45)!important;
}
/* === END V210 === */


/* === V211 HARD FIX ISOLIR MANUAL AUTO === */
.btn.danger[href*="fns211_full_repair_all"]{
  background:linear-gradient(135deg,#7c3aed,#ef4444)!important;
  color:#fff!important;
  border-color:rgba(124,58,237,.35)!important;
}
.alert.success, .flash.success, .notice.success{
  font-weight:900;
}
/* === END V211 === */


/* === V212 ISOLIR FALLBACK INACTIVE FINAL === */
.btn.danger[href*="fns212_full_repair_final"]{
  background:linear-gradient(135deg,#0ea5e9,#7c3aed,#ef4444)!important;
  color:#fff!important;
  border-color:rgba(14,165,233,.35)!important;
}
/* === END V212 === */


/* === V213 RAPIKAN TOMBOL PELANGGAN === */
.customers-actions,
.customer-actions,
.card-head .actions,
.card-head .btns,
.page-actions{
  gap:8px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
.card-head .actions .btn,
.card-head .btns .btn,
.page-actions .btn{
  white-space:nowrap!important;
}
@media(max-width:900px){
  .card-head,
  .customers-head,
  .page-head{
    gap:10px!important;
  }
  .card-head .actions,
  .card-head .btns,
  .page-actions{
    width:100%!important;
    justify-content:flex-start!important;
  }
}
/* === END V213 === */


/* === V214 WHATSAPP TEMPLATE SOURCE FIX === */
.btn[href*="wa_templates_refresh_v214"]{
  background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;
  color:#fff!important;
  border-color:rgba(37,99,235,.28)!important;
  box-shadow:0 14px 28px rgba(37,99,235,.16)!important;
}
/* === END V214 === */


/* === V216 FULL AUDIT SAFE UI === */
.v216-page{padding:18px!important}
.v216-hero{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  border-radius:28px!important;
  padding:28px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(224,242,254,.78),rgba(237,233,254,.72))!important;
  border:1px solid rgba(147,197,253,.55)!important;
  box-shadow:0 18px 48px rgba(37,99,235,.10)!important;
}
.v216-hero h1{margin:6px 0 8px!important;font-size:clamp(26px,3vw,42px)!important;line-height:1.05!important}
.v216-hero p{margin:0!important;color:#526987!important;font-weight:750!important}
body.dark .v216-hero, html[data-theme="dark"] .v216-hero{
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.88),rgba(49,46,129,.52))!important;
  border-color:rgba(96,165,250,.28)!important;
}
.badge.isolated,.badge.danger.overdue{
  background:linear-gradient(135deg,#fee2e2,#fecaca)!important;
  color:#b91c1c!important;
  border:1px solid #fca5a5!important;
  font-weight:1000!important;
}
@media(max-width:900px){
  .v216-page{padding:12px!important}
  .v216-hero{padding:20px!important;border-radius:22px!important;flex-direction:column!important;align-items:flex-start!important}
}
/* === END V216 === */


/* === V218 WHATSAPP CENTER ONLY + MODERN TEMPLATE === */
.v218-refresh-template{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin-top:12px!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed)!important;
  color:#fff!important;
  border:1px solid rgba(37,99,235,.28)!important;
  box-shadow:0 16px 34px rgba(37,99,235,.18)!important;
  font-weight:1000!important;
  text-decoration:none!important;
}
.v218-refresh-template:hover{transform:translateY(-1px)}
.sidebar a[href*="whatsapp_templates"],
.sidebar a[href*="whatsapp_logs"],
.side a[href*="whatsapp_templates"],
.side a[href*="whatsapp_logs"],
.app-sidebar a[href*="whatsapp_templates"],
.app-sidebar a[href*="whatsapp_logs"],
aside a[href*="whatsapp_templates"],
aside a[href*="whatsapp_logs"]{
  display:none!important;
}
/* === END V218 === */


/* === V219 ONE PAGE WHATSAPP API TEMPLATE LOG === */
.wa-one-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px;border-radius:28px;
  background:linear-gradient(135deg,rgba(239,246,255,.94),rgba(224,242,254,.82),rgba(237,233,254,.76));
  border:1px solid rgba(147,197,253,.55);
  box-shadow:0 18px 48px rgba(37,99,235,.10);
  margin-bottom:16px;
}
.wa-one-hero .hero-icon{
  width:72px;height:72px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed);
  color:#fff;font-size:34px;box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.wa-one-hero h1{margin:4px 0 8px;font-size:clamp(28px,3vw,44px);line-height:1.05}
.wa-one-hero p{margin:0;color:#526987;font-weight:750}
.wa-one-nav{
  display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px;
}
.wa-one-nav a{
  display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;
  background:rgba(255,255,255,.86);border:1px solid rgba(147,197,253,.55);
  color:#0f2744;text-decoration:none;font-weight:1000;
}
.wa-section{margin-top:18px}
.section-title{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;
}
.section-title h3{margin:4px 0}
.section-title p{margin:0}
.wa-template-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
.wa-template-card{
  padding:18px;border-radius:24px;background:rgba(255,255,255,.72);
  border:1px solid rgba(147,197,253,.50);
  box-shadow:0 12px 32px rgba(37,99,235,.07);
  display:grid;gap:12px;
}
.template-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wa-event{
  display:inline-flex;padding:8px 13px;border-radius:999px;
  background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;font-weight:1000;
}
.wa-delete-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wa-delete-actions form{margin:0}
.btn.warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#111827!important;border-color:rgba(245,158,11,.35)!important}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316)!important;color:#fff!important;border-color:rgba(239,68,68,.35)!important}
.wa-log-table{table-layout:fixed;width:100%}
.wa-log-table th:nth-child(1){width:150px}
.wa-log-table th:nth-child(2){width:180px}
.wa-log-table th:nth-child(3){width:135px}
.wa-log-table th:nth-child(4){width:105px}
.wa-log-table th:nth-child(5){width:35%}
.wa-log-table th:nth-child(6){width:30%}
.wa-message,.wa-response{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.wa-response{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#475569}
.wa-status{
  display:inline-flex;padding:7px 11px;border-radius:999px;font-weight:1000;border:1px solid transparent;
}
.wa-status.sent,.wa-status.success{background:#dcfce7;color:#15803d;border-color:#86efac}
.wa-status.failed,.wa-status.error{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.wa-status.pending,.wa-status.disabled{background:#fef3c7;color:#92400e;border-color:#fde68a}
.sidebar a[href*="whatsapp_templates"],
.sidebar a[href*="whatsapp_logs"],
.side a[href*="whatsapp_templates"],
.side a[href*="whatsapp_logs"],
.app-sidebar a[href*="whatsapp_templates"],
.app-sidebar a[href*="whatsapp_logs"],
aside a[href*="whatsapp_templates"],
aside a[href*="whatsapp_logs"]{display:none!important}
@media(max-width:1100px){
  .wa-template-grid{grid-template-columns:1fr}
  .wa-one-hero{flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
  .wa-delete-actions .btn,.wa-one-nav a{width:100%;justify-content:center}
}
/* === END V219 === */

/* === V221 BILLING CYCLE BEST PRACTICE === */
.v221-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px;border-radius:28px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.95),rgba(224,242,254,.82),rgba(237,233,254,.76));
  border:1px solid rgba(147,197,253,.55);
  box-shadow:0 18px 48px rgba(37,99,235,.10);
}
.v221-icon{
  width:72px;height:72px;border-radius:24px;display:grid;place-items:center;
  font-size:34px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed);
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.v221-hero h1{margin:4px 0 8px;font-size:clamp(28px,3vw,42px);line-height:1.05}
.v221-hero p{margin:0;color:#526987;font-weight:750}
.v221-grid .card{border:1px solid rgba(147,197,253,.45)!important}
.v221-info{
  padding:14px 16px;margin:10px 0;border-radius:18px;
  background:rgba(224,242,254,.48);border:1px solid rgba(125,211,252,.45);
}
.v221-info p{margin:6px 0 0;color:#526987;font-weight:700;line-height:1.55}
.v221-repair-btn,.btn.warning.v221-repair-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  margin-left:12px!important;padding:10px 14px!important;border-radius:999px!important;
  background:linear-gradient(135deg,#f59e0b,#f97316)!important;color:#111827!important;
  border:1px solid rgba(245,158,11,.36)!important;font-weight:1000!important;
  box-shadow:0 12px 26px rgba(245,158,11,.16)!important;text-decoration:none!important;
}
@media(max-width:900px){.v221-hero{flex-direction:column;align-items:flex-start;padding:22px}.v221-repair-btn{margin-left:0!important;margin-top:10px!important}}
/* === END V221 === */

/* === V222 WA PAYMENT LINK TEMPLATE === */
.v222-wa-link-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin-left:12px!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#22c55e)!important;
  color:#fff!important;
  font-weight:1000!important;
  text-decoration:none!important;
  box-shadow:0 14px 30px rgba(37,99,235,.18)!important;
}
@media(max-width:800px){.v222-wa-link-btn{margin-left:0!important;margin-top:10px!important;width:100%!important}}
/* === END V222 === */

/* === V223 ROLE MENU ACCESS BUILDER === */
.v223-role-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px;border-radius:28px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(224,242,254,.84),rgba(237,233,254,.76));
  border:1px solid rgba(147,197,253,.55);
  box-shadow:0 18px 48px rgba(37,99,235,.10);
}
.v223-role-icon{
  width:72px;height:72px;border-radius:24px;display:grid;place-items:center;
  font-size:34px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed);
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.v223-role-hero h1{margin:4px 0 8px;font-size:clamp(28px,3vw,42px);line-height:1.05}
.v223-role-hero p{margin:0;color:#526987;font-weight:750}
.v223-role-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.v223-role-tabs a{
  display:inline-flex;align-items:center;justify-content:center;padding:11px 15px;border-radius:999px;
  background:rgba(255,255,255,.84);border:1px solid rgba(147,197,253,.55);
  color:#334155;text-decoration:none;font-weight:1000;letter-spacing:.02em;
}
.v223-role-tabs a.active{
  background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;box-shadow:0 12px 28px rgba(37,99,235,.18);
}
.v223-role-grid{align-items:start}
.v223-role-form{display:block}
.v223-tools{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.v223-menu-group{
  padding:16px;border-radius:24px;background:rgba(248,250,252,.78);
  border:1px solid rgba(147,197,253,.45);margin:14px 0;
}
.v223-group-title{
  font-weight:1000;color:#0f2744;margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em;
}
.v223-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.v223-check-grid.mini{grid-template-columns:1fr;max-height:420px;overflow:auto;padding-right:4px}
.v223-check{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;
  background:rgba(255,255,255,.86);border:1px solid rgba(191,219,254,.70);
  cursor:pointer;transition:.18s ease;
}
.v223-check:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.10)}
.v223-check input{width:18px;height:18px;accent-color:#0ea5e9}
.v223-check .ico{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(219,234,254,.9),rgba(240,253,250,.9));
}
.v223-check b{display:block;color:#10233d;font-size:13px}
.v223-check small{display:block;color:#64748b;font-size:11px;margin-top:2px}
.v223-alert{padding:18px;border-radius:20px;font-weight:900;border:1px solid rgba(134,239,172,.65);background:#dcfce7;color:#166534}
.v223-summary{display:grid;gap:10px}
.v223-summary-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.80);border:1px solid rgba(191,219,254,.70);
}
.v223-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v223-matrix-card{
  padding:16px;border-radius:22px;background:rgba(255,255,255,.78);
  border:1px solid rgba(147,197,253,.45);
}
.v223-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.v223-chip-wrap{display:flex;gap:7px;flex-wrap:wrap;max-height:180px;overflow:auto}
.v223-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
  background:#e0f2fe;border:1px solid #bae6fd;color:#075985;font-weight:850;font-size:12px;
}
@media(max-width:1100px){
  .v223-role-grid,.v223-matrix{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .v223-role-hero{flex-direction:column;align-items:flex-start;padding:22px}
  .v223-check-grid{grid-template-columns:1fr}
  .v223-tools .btn{width:100%;justify-content:center}
}
/* === END V223 === */

/* === V224 STOCK MOVEMENT PRO === */
.v224-stock-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px;border-radius:28px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(224,242,254,.86),rgba(237,233,254,.76));
  border:1px solid rgba(147,197,253,.55);
  box-shadow:0 18px 48px rgba(37,99,235,.10);
}
.v224-stock-icon{
  width:72px;height:72px;border-radius:24px;display:grid;place-items:center;
  font-size:34px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed);
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.v224-stock-hero h1{margin:4px 0 8px;font-size:clamp(28px,3vw,42px);line-height:1.05}
.v224-stock-hero p{margin:0;color:#526987;font-weight:750;max-width:900px}
.v224-stats .stat-card strong{font-size:26px}
.v224-grid{align-items:start;margin-top:18px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-title h3{margin:4px 0}
.v224-guide{display:grid;gap:12px}
.v224-guide div{
  display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:start;
  padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.80);
  border:1px solid rgba(191,219,254,.70);
}
.v224-guide b{color:#0f2744}
.v224-guide span{color:#526987;font-weight:750;line-height:1.5}
.v224-low-list{display:grid;gap:10px}
.v224-low-list div{
  padding:13px 15px;border-radius:16px;background:#fff7ed;border:1px solid #fed7aa;
}
.v224-low-list b{display:block;color:#9a3412}
.v224-low-list span{display:block;color:#7c2d12;font-weight:800;margin-top:3px}
.v224-empty-ok{
  margin-top:16px;padding:16px;border-radius:18px;background:#dcfce7;border:1px solid #86efac;color:#166534;font-weight:1000;
}
.v224-filter{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto auto;gap:10px;align-items:end;margin:14px 0 18px;
}
.v224-filter input,.v224-filter select{min-height:46px}
.v224-stock-table{table-layout:fixed;width:100%}
.v224-stock-table th:nth-child(1){width:110px}
.v224-stock-table th:nth-child(2){width:190px}
.v224-stock-table th:nth-child(3){width:130px}
.v224-stock-table th:nth-child(4){width:90px}
.v224-stock-table th:nth-child(5){width:150px}
.v224-stock-table th:nth-child(6){width:180px}
.v224-stock-table th:nth-child(7){width:130px}
.v224-stock-table th:nth-child(8){width:140px}
.v224-stock-table td small{display:block;color:#64748b;font-size:12px;margin-top:3px}
.v224-type{
  display:inline-flex;padding:7px 11px;border-radius:999px;font-weight:1000;border:1px solid transparent;
}
.v224-type.in{background:#dcfce7;color:#15803d;border-color:#86efac}
.v224-type.return{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
.v224-type.out{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.v224-type.damaged{background:#ffedd5;color:#c2410c;border-color:#fdba74}
.v224-type.adjustment{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}
.v224-note{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;
}
@media(max-width:1200px){
  .v224-grid{grid-template-columns:1fr!important}
  .v224-filter{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .v224-stock-hero{flex-direction:column;align-items:flex-start;padding:22px}
  .v224-guide div{grid-template-columns:1fr}
  .v224-filter{grid-template-columns:1fr}
  .v224-filter .btn{width:100%;justify-content:center}
}
/* === END V224 === */

/* === V225 INVENTORY PRO === */
.v225-inv-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px;border-radius:28px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(224,242,254,.86),rgba(237,233,254,.76));
  border:1px solid rgba(147,197,253,.55);
  box-shadow:0 18px 48px rgba(37,99,235,.10);
}
.v225-inv-icon{
  width:72px;height:72px;border-radius:24px;display:grid;place-items:center;
  font-size:34px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed);
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.v225-inv-hero h1{margin:4px 0 8px;font-size:clamp(28px,3vw,42px);line-height:1.05}
.v225-inv-hero p{margin:0;color:#526987;font-weight:750;max-width:900px}
.v225-stats .stat-card strong{font-size:26px}
.v225-grid{align-items:start;margin-top:18px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-title h3{margin:4px 0}
.v225-category-cloud{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.v225-category-cloud span{
  display:inline-flex;padding:10px 14px;border-radius:999px;
  background:#e0f2fe;border:1px solid #bae6fd;color:#075985;font-weight:1000;
}
.v225-tips{display:grid;gap:12px}
.v225-tips div{
  padding:15px 17px;border-radius:18px;background:rgba(255,255,255,.82);
  border:1px solid rgba(191,219,254,.70);
}
.v225-tips p{margin:6px 0 0;color:#526987;font-weight:750;line-height:1.45}
.v225-filter{
  display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:10px;align-items:end;margin:14px 0 18px;
}
.v225-filter input,.v225-filter select{min-height:46px}
.v225-inv-table{table-layout:fixed;width:100%}
.v225-inv-table th:nth-child(1){width:120px}
.v225-inv-table th:nth-child(2){width:230px}
.v225-inv-table th:nth-child(3){width:135px}
.v225-inv-table th:nth-child(4){width:140px}
.v225-inv-table th:nth-child(5){width:95px}
.v225-inv-table th:nth-child(6){width:150px}
.v225-inv-table th:nth-child(7){width:125px}
.v225-inv-table th:nth-child(8){width:125px}
.v225-inv-table th:nth-child(9){width:100px}
.v225-inv-table th:nth-child(10){width:145px}
.v225-inv-table td small{display:block;color:#64748b;font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.v225-chip{
  display:inline-flex;padding:7px 11px;border-radius:999px;background:#e0f2fe;border:1px solid #bae6fd;color:#075985;font-weight:900;
}
.v225-low{
  display:inline-flex;margin-left:6px;padding:4px 7px;border-radius:999px;background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:1000;border:1px solid #fca5a5;
}
.v225-inv-table tr.row-low{background:linear-gradient(90deg,rgba(254,226,226,.42),rgba(255,255,255,.7))!important}
.btn.xs{padding:7px 10px!important;border-radius:12px!important;font-size:12px!important}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316)!important;color:#fff!important;border-color:rgba(239,68,68,.35)!important}
@media(max-width:1200px){.v225-grid{grid-template-columns:1fr!important}.v225-filter{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .v225-inv-hero{flex-direction:column;align-items:flex-start;padding:22px}
  .v225-inv-hero .btn{width:100%;justify-content:center}
  .v225-filter{grid-template-columns:1fr}
  .v225-filter .btn{width:100%;justify-content:center}
}
/* === END V225 === */

/* === V226 PPPoE CONFIRMED OFFLINE NOTIF === */
.v226-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px;border-radius:28px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(224,242,254,.86),rgba(237,233,254,.76));
  border:1px solid rgba(147,197,253,.55);
  box-shadow:0 18px 48px rgba(37,99,235,.10);
}
.v226-icon{
  width:72px;height:72px;border-radius:24px;display:grid;place-items:center;
  font-size:34px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#2563eb,#22c55e);
  box-shadow:0 16px 34px rgba(37,99,235,.22);
}
.v226-hero h1{margin:4px 0 8px;font-size:clamp(28px,3vw,42px);line-height:1.05}
.v226-hero p{margin:0;color:#526987;font-weight:750;max-width:900px}
.v226-rule{
  display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:start;
  padding:14px 16px;margin:10px 0;border-radius:18px;
  background:rgba(255,255,255,.82);border:1px solid rgba(191,219,254,.70);
}
.v226-rule b{color:#0f2744}
.v226-rule span{color:#526987;font-weight:750;line-height:1.5}
@media(max-width:760px){
  .v226-hero{flex-direction:column;align-items:flex-start;padding:22px}
  .v226-rule{grid-template-columns:1fr}
}
/* === END V226 === */

/* === V227 LOGIN PREMIUM ANIMATED === */
:root[data-login-theme="dark"]{--login-bg0:#020617;--login-bg1:#071225;--login-card:rgba(8,18,38,.72);--login-card2:rgba(15,23,42,.72);--login-text:#f8fafc;--login-muted:#b8c5da;--login-border:rgba(125,211,252,.22);--login-field:rgba(15,23,42,.72);--login-field-text:#f8fafc;--login-shadow:rgba(2,6,23,.55)}
:root[data-login-theme="light"],:root[data-login-theme="auto"]{--login-bg0:#eaf6ff;--login-bg1:#f8fbff;--login-card:rgba(255,255,255,.72);--login-card2:rgba(240,249,255,.78);--login-text:#06152b;--login-muted:#526987;--login-border:rgba(59,130,246,.18);--login-field:rgba(255,255,255,.82);--login-field-text:#0f2744;--login-shadow:rgba(37,99,235,.12)}
@media(prefers-color-scheme:dark){:root[data-login-theme="auto"]{--login-bg0:#020617;--login-bg1:#071225;--login-card:rgba(8,18,38,.72);--login-card2:rgba(15,23,42,.72);--login-text:#f8fafc;--login-muted:#b8c5da;--login-border:rgba(125,211,252,.22);--login-field:rgba(15,23,42,.72);--login-field-text:#f8fafc;--login-shadow:rgba(2,6,23,.55)}}
.fns227-login-body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--login-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% 20%,rgba(34,211,238,.30),transparent 34%),radial-gradient(circle at 82% 16%,rgba(168,85,247,.28),transparent 31%),radial-gradient(circle at 64% 82%,rgba(34,197,94,.18),transparent 30%),linear-gradient(135deg,var(--login-bg0),var(--login-bg1))}
.fns227-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}.fns227-bg:before{content:"";position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(125,211,252,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.16) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.fns227-bg .orb{position:absolute;border-radius:999px;filter:blur(8px);opacity:.9;animation:fns227-float 9s ease-in-out infinite}.orb-a{width:360px;height:360px;background:radial-gradient(circle,#22d3ee,transparent 65%);left:-110px;top:10%}.orb-b{width:430px;height:430px;background:radial-gradient(circle,#8b5cf6,transparent 66%);right:-140px;top:5%;animation-delay:-2s}.orb-c{width:320px;height:320px;background:radial-gradient(circle,#22c55e,transparent 65%);right:22%;bottom:-130px;animation-delay:-4s}.scan-line{position:absolute;left:-20%;right:-20%;top:0;height:2px;background:linear-gradient(90deg,transparent,#22d3ee,#a855f7,transparent);box-shadow:0 0 28px #38bdf8;animation:fns227-scan 7s linear infinite}@keyframes fns227-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-26px,0) scale(1.06)}}@keyframes fns227-scan{0%{top:-5%;opacity:0}12%{opacity:.75}90%{opacity:.55}100%{top:105%;opacity:0}}
.fns227-login-shell{position:relative;z-index:1;min-height:100vh;width:min(1720px,100%);margin:0 auto;padding:clamp(18px,3vw,46px);display:grid;grid-template-columns:minmax(420px,560px) 1fr;gap:clamp(24px,4vw,60px);align-items:center;box-sizing:border-box}.fns227-login-card,.fns227-showcase{position:relative;border:1px solid var(--login-border);background:linear-gradient(145deg,var(--login-card),var(--login-card2));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 28px 90px var(--login-shadow),inset 0 1px 0 rgba(255,255,255,.18)}.fns227-login-card{border-radius:34px;padding:clamp(24px,3vw,48px);overflow:hidden;animation:fns227-card-in .75s cubic-bezier(.2,.85,.2,1) both}.fns227-card-glow{position:absolute;inset:-1px;border-radius:34px;background:linear-gradient(135deg,rgba(14,165,233,.45),transparent 25%,transparent 72%,rgba(168,85,247,.45));opacity:.45;pointer-events:none}@keyframes fns227-card-in{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.fns227-brand-mobile{display:none;align-items:center;gap:12px;margin-bottom:18px}.fns227-brand-mobile img,.fns227-logo img{width:54px;height:54px;object-fit:cover;border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(2,6,23,.14)}.fns227-brand-mobile strong,.fns227-logo strong{display:block;font-size:18px;font-weight:1000;letter-spacing:.5px}.fns227-brand-mobile span,.fns227-logo span{display:block;color:var(--login-muted);font-weight:700;font-size:13px}
.fns227-lock-wrap{position:relative;width:96px;height:96px;margin:0 auto 18px;display:grid;place-items:center}.fns227-lock-ring{position:absolute;inset:0;border-radius:999px;background:conic-gradient(from 0deg,#22d3ee,#2563eb,#a855f7,#22c55e,#22d3ee);animation:fns227-spin 4.5s linear infinite;filter:drop-shadow(0 0 24px rgba(59,130,246,.45))}.fns227-lock-ring:after{content:"";position:absolute;inset:7px;border-radius:inherit;background:var(--login-card)}.fns227-lock{position:relative;z-index:2;width:72px;height:72px;border-radius:26px;display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg,#0ea5e9,#2563eb,#9333ea);box-shadow:0 18px 40px rgba(37,99,235,.35)}@keyframes fns227-spin{to{transform:rotate(360deg)}}
.fns227-login-card h1{text-align:center;margin:0;font-size:clamp(34px,4vw,52px);line-height:1.03;letter-spacing:-1.5px}.fns227-login-card h1 span,.fns227-copy strong{background:linear-gradient(90deg,#06b6d4,#2563eb,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}.fns227-subtitle{text-align:center;margin:12px auto 28px;color:var(--login-muted);font-weight:750;line-height:1.5}.fns227-alert{padding:14px 16px;border-radius:18px;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);color:#ef4444;font-weight:900;margin-bottom:18px}.fns227-form{display:grid;gap:16px}.fns227-form label>span{display:block;margin:0 0 8px;font-size:13px;font-weight:1000;color:var(--login-text)}.fns227-input{display:flex;align-items:center;gap:12px;min-height:62px;border-radius:18px;padding:0 16px;background:var(--login-field);border:1px solid var(--login-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transition:.22s}.fns227-input:focus-within{border-color:rgba(14,165,233,.78);box-shadow:0 0 0 4px rgba(14,165,233,.14),0 14px 34px rgba(14,165,233,.12)}.fns227-input i{font-style:normal;font-size:18px;opacity:.88}.fns227-input input{border:0!important;outline:0!important;background:transparent!important;color:var(--login-field-text)!important;width:100%;height:58px;font-weight:850;font-size:15px}.fns227-eye{border:0;background:transparent;font-size:18px;cursor:pointer}.fns227-row{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14px;font-weight:850;color:var(--login-muted)}.fns227-row a,.fns227-back{color:#0ea5e9;text-decoration:none;font-weight:950}.fns227-check{display:flex!important;align-items:center;gap:8px;margin:0!important}.fns227-check input{width:18px;height:18px;accent-color:#0ea5e9}.fns227-submit,.fns227-secondary{border:0;border-radius:18px;min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;font-weight:1000;color:#fff;text-decoration:none;cursor:pointer}.fns227-submit{background:linear-gradient(100deg,#0ea5e9,#2563eb,#9333ea,#ec4899);background-size:220% 100%;box-shadow:0 20px 38px rgba(37,99,235,.32);animation:fns227-gradient 5s ease infinite;transition:.18s}.fns227-submit:hover{transform:translateY(-2px);box-shadow:0 26px 48px rgba(37,99,235,.40)}.fns227-submit b{transition:.18s}.fns227-submit:hover b{transform:translateX(5px)}@keyframes fns227-gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.fns227-divider{display:flex;align-items:center;gap:14px;color:var(--login-muted);font-weight:800;justify-content:center}.fns227-divider:before,.fns227-divider:after{content:"";height:1px;flex:1;background:var(--login-border)}.fns227-secondary{color:var(--login-text);background:rgba(255,255,255,.08);border:1px solid var(--login-border)}.fns227-back{text-align:center;display:block;margin-top:2px}
.fns227-showcase{border-radius:38px;padding:clamp(24px,3vw,46px);min-height:720px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;animation:fns227-card-in .85s cubic-bezier(.2,.85,.2,1) .1s both}.fns227-showcase:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 62% 60%,rgba(59,130,246,.24),transparent 40%),linear-gradient(120deg,transparent 0 50%,rgba(14,165,233,.11) 50% 51%,transparent 51%);pointer-events:none}.fns227-topbar,.fns227-logo,.fns227-status{position:relative;z-index:2;display:flex;align-items:center}.fns227-topbar{justify-content:space-between;gap:18px}.fns227-logo{gap:14px}.fns227-logo em{font-style:normal;color:#22c55e}.fns227-status{gap:10px;padding:14px 18px;border:1px solid var(--login-border);background:rgba(255,255,255,.08);border-radius:999px;color:var(--login-muted);font-weight:900}.fns227-status span{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 18px #22c55e}.fns227-copy{position:relative;z-index:2;margin:40px 0 22px}.fns227-kicker{display:inline-flex;padding:9px 14px;border-radius:999px;background:rgba(14,165,233,.14);border:1px solid rgba(14,165,233,.28);color:#0ea5e9;font-weight:1000;letter-spacing:.12em;font-size:12px}.fns227-copy h2{font-size:clamp(42px,5vw,76px);line-height:1.02;margin:18px 0;letter-spacing:-2.4px}.fns227-copy p{max-width:820px;color:var(--login-muted);font-weight:760;font-size:18px;line-height:1.65}.fns227-feature-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 22px}.fns227-feature-grid div{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid var(--login-border)}.fns227-feature-grid i{grid-row:1/3;font-style:normal;font-size:24px}.fns227-feature-grid b{font-weight:1000}.fns227-feature-grid span{color:var(--login-muted);font-size:12px;font-weight:800}.fns227-dashboard-art{position:relative;z-index:2;min-height:300px;border-radius:28px;border:1px solid var(--login-border);background:linear-gradient(135deg,rgba(2,6,23,.26),rgba(37,99,235,.18));overflow:hidden}.map-card{position:absolute;left:24px;right:190px;top:24px;bottom:24px;border-radius:24px;background:radial-gradient(circle at center,rgba(14,165,233,.28),transparent 42%),linear-gradient(135deg,rgba(14,165,233,.16),rgba(147,51,234,.16));border:1px solid rgba(125,211,252,.22);display:grid;place-items:center}.map-card:before,.map-card:after{content:"";position:absolute;inset:20%;border:2px solid rgba(125,211,252,.22);border-radius:50%;animation:fns227-pulse 3s ease infinite}.map-card:after{inset:34%;animation-delay:-1s}.planet{font-size:72px;filter:drop-shadow(0 0 28px rgba(14,165,233,.8));animation:fns227-bob 3.5s ease-in-out infinite}.pulse{position:absolute;width:12px;height:12px;border-radius:50%;background:#22d3ee;box-shadow:0 0 24px #22d3ee}.p1{left:20%;top:25%}.p2{right:22%;top:32%;background:#a855f7}.p3{left:54%;bottom:22%;background:#22c55e}@keyframes fns227-pulse{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.12);opacity:.25}}@keyframes fns227-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}.metric{position:absolute;right:22px;width:150px;border-radius:18px;padding:16px;background:rgba(255,255,255,.10);border:1px solid var(--login-border);backdrop-filter:blur(12px)}.metric span{display:block;color:var(--login-muted);font-size:12px;font-weight:900}.metric b{display:block;font-size:22px;margin:7px 0}.metric em{font-style:normal;color:#22c55e;font-weight:1000;font-size:12px}.m1{top:24px}.m2{top:120px}.m3{top:216px}.fns227-footer{position:relative;z-index:2;margin:22px auto 0;display:grid;gap:4px;width:min(620px,85%);padding:18px 24px;border-radius:20px;background:linear-gradient(90deg,rgba(14,165,233,.24),rgba(147,51,234,.20));border:1px solid var(--login-border)}.fns227-footer span{font-weight:1000}.fns227-footer b{color:var(--login-muted);font-size:13px}
@media(max-width:1180px){.fns227-login-shell{grid-template-columns:1fr;align-items:start;min-height:auto}.fns227-showcase{min-height:560px;order:-1}.fns227-login-card{max-width:620px;width:100%;margin:0 auto;box-sizing:border-box}.fns227-brand-mobile{display:flex}}
@media(max-width:760px){.fns227-login-body{overflow:auto}.fns227-login-shell{padding:14px;gap:16px}.fns227-showcase{display:none}.fns227-login-card{border-radius:28px;padding:22px;min-height:calc(100vh - 28px);display:flex;flex-direction:column;justify-content:center}.fns227-lock-wrap{width:82px;height:82px}.fns227-lock{width:62px;height:62px;border-radius:22px;font-size:28px}.fns227-login-card h1{font-size:38px}.fns227-subtitle{font-size:14px;margin-bottom:20px}.fns227-input{min-height:56px;border-radius:16px}.fns227-input input{height:52px;font-size:14px}.fns227-submit,.fns227-secondary{min-height:56px;font-size:16px;border-radius:16px}.fns227-row{font-size:13px}}
@media(max-width:420px){.fns227-login-shell{padding:10px}.fns227-login-card{padding:18px;border-radius:24px}.fns227-brand-mobile img{width:48px;height:48px}.fns227-brand-mobile strong{font-size:15px}}
/* === END V227 === */


/* === V228 LOGIN COMPACT BALANCED FIX === */
.fns227-login-body{
  min-height:100vh;
  overflow:hidden;
}
.fns227-login-shell{
  width:min(1480px,100%);
  min-height:100vh;
  padding:clamp(14px,2vw,30px);
  grid-template-columns:minmax(360px,500px) minmax(560px,1fr);
  gap:clamp(18px,2.4vw,34px);
  align-items:center;
}
.fns227-login-card{
  border-radius:28px;
  padding:clamp(22px,2.2vw,34px);
  max-height:calc(100vh - 44px);
  overflow:hidden;
  transform-origin:center;
}
.fns227-lock-wrap{
  width:76px;
  height:76px;
  margin-bottom:12px;
}
.fns227-lock{
  width:58px;
  height:58px;
  border-radius:20px;
  font-size:26px;
}
.fns227-lock-ring:after{
  inset:6px;
}
.fns227-login-card h1{
  font-size:clamp(32px,3vw,46px);
  letter-spacing:-1.2px;
}
.fns227-subtitle{
  margin:8px auto 20px;
  font-size:13.5px;
}
.fns227-form{
  gap:12px;
}
.fns227-form label>span{
  font-size:12px;
  margin-bottom:6px;
}
.fns227-input{
  min-height:52px;
  border-radius:15px;
  padding:0 12px;
}
.fns227-input input{
  height:50px;
  font-size:14px;
}
.fns227-submit,
.fns227-secondary{
  min-height:52px;
  border-radius:15px;
  font-size:15.5px;
}
.fns227-row{
  font-size:12.5px;
}
.fns227-divider{
  font-size:12.5px;
}
.fns227-back{
  font-size:12.5px;
}
.fns227-showcase{
  min-height:auto;
  height:calc(100vh - 60px);
  max-height:760px;
  border-radius:30px;
  padding:clamp(22px,2.6vw,36px);
}
.fns227-topbar{
  margin-bottom:10px;
}
.fns227-logo img{
  width:50px;
  height:50px;
  border-radius:16px;
}
.fns227-logo strong{
  font-size:17px;
}
.fns227-status{
  padding:11px 15px;
  font-size:13px;
}
.fns227-copy{
  margin:22px 0 18px;
}
.fns227-kicker{
  padding:8px 13px;
  font-size:11px;
}
.fns227-copy h2{
  font-size:clamp(42px,4.2vw,66px);
  letter-spacing:-2px;
  margin:14px 0;
}
.fns227-copy p{
  font-size:15.5px;
  line-height:1.55;
  max-width:780px;
}
.fns227-feature-grid{
  gap:12px;
  margin:8px 0 16px;
}
.fns227-feature-grid div{
  padding:13px;
  border-radius:16px;
}
.fns227-feature-grid i{
  font-size:21px;
}
.fns227-dashboard-art{
  min-height:230px;
  border-radius:24px;
}
.map-card{
  left:20px;
  right:170px;
  top:20px;
  bottom:20px;
  border-radius:20px;
}
.planet{
  font-size:56px;
}
.metric{
  right:18px;
  width:132px;
  padding:12px;
  border-radius:15px;
}
.metric b{
  font-size:18px;
}
.m1{top:20px}
.m2{top:96px}
.m3{top:172px}
.fns227-footer{
  margin-top:16px;
  padding:14px 18px;
  border-radius:17px;
}
.fns227-footer b{
  font-size:12px;
}

/* Laptop sedang: tetap 2 kolom tapi lebih kecil */
@media(max-width:1366px){
  .fns227-login-shell{
    width:min(1240px,100%);
    grid-template-columns:430px 1fr;
    gap:22px;
    padding:16px 20px;
  }
  .fns227-login-card{
    padding:24px;
  }
  .fns227-showcase{
    height:calc(100vh - 36px);
    max-height:680px;
    padding:26px;
  }
  .fns227-copy h2{
    font-size:clamp(38px,4vw,56px);
  }
  .fns227-copy p{
    font-size:14px;
  }
  .fns227-dashboard-art{
    min-height:210px;
  }
}

/* Laptop kecil / tablet landscape: kanan tidak membesar berlebihan */
@media(max-width:1180px){
  .fns227-login-body{
    overflow:auto;
  }
  .fns227-login-shell{
    grid-template-columns:1fr;
    width:min(720px,100%);
    min-height:auto;
    padding:18px;
  }
  .fns227-showcase{
    display:none;
  }
  .fns227-login-card{
    width:100%;
    max-width:520px;
    min-height:auto;
    margin:24px auto;
    max-height:none;
  }
  .fns227-brand-mobile{
    display:flex;
  }
}

/* HP: lebih kecil, tidak ngezoom, semua pas layar */
@media(max-width:760px){
  .fns227-login-body{
    overflow:auto;
  }
  .fns227-login-shell{
    padding:12px;
    width:100%;
  }
  .fns227-login-card{
    max-width:100%;
    min-height:calc(100vh - 24px);
    border-radius:22px;
    padding:18px;
  }
  .fns227-brand-mobile{
    margin-bottom:12px;
  }
  .fns227-brand-mobile img{
    width:42px;
    height:42px;
    border-radius:14px;
  }
  .fns227-brand-mobile strong{
    font-size:14px;
  }
  .fns227-brand-mobile span{
    font-size:11.5px;
  }
  .fns227-lock-wrap{
    width:64px;
    height:64px;
    margin-bottom:10px;
  }
  .fns227-lock{
    width:50px;
    height:50px;
    border-radius:18px;
    font-size:22px;
  }
  .fns227-login-card h1{
    font-size:31px;
  }
  .fns227-subtitle{
    font-size:12.5px;
    margin-bottom:14px;
  }
  .fns227-form{
    gap:10px;
  }
  .fns227-input{
    min-height:48px;
  }
  .fns227-input input{
    height:46px;
    font-size:13px;
  }
  .fns227-submit,
  .fns227-secondary{
    min-height:48px;
    font-size:14px;
  }
}

/* Monitor besar: jangan sampai scale ikut membesar terlalu ekstrem */
@media(min-width:1600px){
  .fns227-login-shell{
    width:min(1500px,100%);
    grid-template-columns:500px 1fr;
  }
  .fns227-showcase{
    max-height:760px;
  }
}
/* === END V228 LOGIN COMPACT BALANCED FIX === */


/* === V229 LOGIN SMALL CLEAN PREMIUM === */
:root{--fns229-bg:#eef7ff;--fns229-bg2:#f8fbff;--fns229-card:rgba(255,255,255,.86);--fns229-card2:rgba(239,248,255,.80);--fns229-text:#071b34;--fns229-muted:#60758f;--fns229-border:rgba(73,148,231,.22);--fns229-field:#fff;--fns229-shadow:rgba(31,86,160,.14)}
:root[data-theme="dark"]{--fns229-bg:#07111f;--fns229-bg2:#101827;--fns229-card:rgba(10,20,36,.88);--fns229-card2:rgba(15,28,48,.80);--fns229-text:#eef7ff;--fns229-muted:#a8bdd6;--fns229-border:rgba(116,196,255,.22);--fns229-field:rgba(12,25,44,.94);--fns229-shadow:rgba(0,0,0,.34)}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{--fns229-bg:#07111f;--fns229-bg2:#101827;--fns229-card:rgba(10,20,36,.88);--fns229-card2:rgba(15,28,48,.80);--fns229-text:#eef7ff;--fns229-muted:#a8bdd6;--fns229-border:rgba(116,196,255,.22);--fns229-field:rgba(12,25,44,.94);--fns229-shadow:rgba(0,0,0,.34)}}
body.fns229-login{margin:0;min-height:100vh;overflow:hidden;color:var(--fns229-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 16% 18%,rgba(14,165,233,.23),transparent 34%),radial-gradient(circle at 82% 20%,rgba(139,92,246,.20),transparent 33%),linear-gradient(135deg,var(--fns229-bg),var(--fns229-bg2))}
.fns229-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.fns229-bg:before{content:"";position:absolute;inset:0;opacity:.20;background-image:linear-gradient(rgba(73,148,231,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(73,148,231,.22) 1px,transparent 1px);background-size:38px 38px}.fns229-blur{position:absolute;border-radius:50%;filter:blur(28px);opacity:.65;animation:fns229Float 9s ease-in-out infinite}.fns229-blur.a{width:260px;height:260px;background:#38bdf8;left:-80px;top:12%}.fns229-blur.b{width:310px;height:310px;background:#8b5cf6;right:-100px;top:10%;animation-delay:-2s}.fns229-blur.c{width:230px;height:230px;background:#22c55e;left:45%;bottom:-90px;animation-delay:-4s}@keyframes fns229Float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(16px,-18px) scale(1.04)}}
.fns229-wrap{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:18px;box-sizing:border-box}.fns229-panel{width:min(980px,100%);max-height:calc(100vh - 36px);display:grid;grid-template-columns:390px 1fr;border:1px solid var(--fns229-border);border-radius:26px;overflow:hidden;background:linear-gradient(135deg,var(--fns229-card),var(--fns229-card2));box-shadow:0 28px 80px var(--fns229-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.fns229-left{padding:26px;background:rgba(255,255,255,.08)}.fns229-right{position:relative;padding:28px;border-left:1px solid var(--fns229-border);overflow:hidden;min-height:500px}.fns229-right:before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.35),transparent 64%)}
.fns229-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.fns229-logo{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#fff;box-shadow:0 12px 26px rgba(37,99,235,.13);overflow:hidden;flex:0 0 auto}.fns229-logo img{width:100%;height:100%;object-fit:cover}.fns229-brand strong{display:block;font-size:15px;font-weight:1000;letter-spacing:.3px}.fns229-brand span{display:block;margin-top:2px;color:var(--fns229-muted);font-size:11px;font-weight:800}
.fns229-title span,.fns229-badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:rgba(14,165,233,.13);color:#0284c7;border:1px solid rgba(14,165,233,.22);font-size:10px;font-weight:1000;letter-spacing:.10em}.fns229-title h1{margin:14px 0 7px;font-size:32px;line-height:1.04;letter-spacing:-1.1px}.fns229-title p{margin:0 0 18px;color:var(--fns229-muted);font-size:13px;font-weight:750;line-height:1.45}.fns229-alert{margin-bottom:13px;padding:11px 13px;border-radius:14px;background:rgba(239,68,68,.12);color:#dc2626;border:1px solid rgba(239,68,68,.25);font-size:12px;font-weight:900}
.fns229-form{display:grid;gap:11px}.fns229-form label b{display:block;margin:0 0 6px;font-size:12px;font-weight:1000}.fns229-field{height:48px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--fns229-border);border-radius:15px;background:var(--fns229-field);transition:.2s ease}.fns229-field:focus-within{border-color:rgba(14,165,233,.75);box-shadow:0 0 0 4px rgba(14,165,233,.12)}.fns229-field i{font-style:normal;font-size:15px}.fns229-field input{width:100%;height:46px;border:0!important;outline:0!important;background:transparent!important;color:var(--fns229-text)!important;font-size:13px;font-weight:850}.fns229-field input::placeholder{color:#8aa0b8}.fns229-field button{border:0;background:transparent;cursor:pointer;font-size:15px;padding:4px}
.fns229-options{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:850;color:var(--fns229-muted)}.fns229-options label{display:flex;align-items:center;gap:7px}.fns229-options input{accent-color:#0284c7}.fns229-options a,.fns229-actions a{color:#0284c7;text-decoration:none;font-weight:950}.fns229-submit{height:50px;border:0;border-radius:15px;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:1000;background:linear-gradient(100deg,#0284c7,#2563eb,#7c3aed);box-shadow:0 16px 34px rgba(37,99,235,.26);transition:.18s ease}.fns229-submit:hover{transform:translateY(-1px);box-shadow:0 20px 40px rgba(37,99,235,.34)}.fns229-submit em{font-style:normal;font-size:18px}.fns229-actions{display:flex;justify-content:center;gap:12px;padding-top:2px;font-size:12px}
.fns229-mode{position:absolute;right:18px;top:18px;display:flex;gap:8px;z-index:2}.fns229-mode button{width:36px;height:36px;border:1px solid var(--fns229-border);border-radius:13px;background:rgba(255,255,255,.30);cursor:pointer}.fns229-badge{margin-top:44px}.fns229-right h2{position:relative;z-index:1;margin:14px 0 10px;font-size:32px;line-height:1.08;letter-spacing:-1.2px;max-width:470px}.fns229-right p{position:relative;z-index:1;margin:0;max-width:470px;color:var(--fns229-muted);font-size:13.5px;font-weight:760;line-height:1.55}.fns229-mini{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.fns229-mini div{padding:13px;border:1px solid var(--fns229-border);border-radius:16px;background:rgba(255,255,255,.13)}.fns229-mini span{display:block;color:var(--fns229-muted);font-size:11px;font-weight:900}.fns229-mini b{display:block;margin-top:5px;font-size:15px;color:#16a34a}
.fns229-card-demo{position:relative;z-index:1;max-width:430px;min-height:170px;border:1px solid var(--fns229-border);border-radius:22px;background:linear-gradient(135deg,rgba(14,165,233,.17),rgba(124,58,237,.13));padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.fns229-card-top{display:flex;gap:7px}.fns229-card-top span{width:11px;height:11px;border-radius:50%;background:#38bdf8}.fns229-card-top span:nth-child(2){background:#a78bfa}.fns229-card-top span:nth-child(3){background:#22c55e}.fns229-bars{margin-top:24px;display:grid;gap:10px}.fns229-bars i{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#2563eb,#7c3aed);animation:fns229Width 1.6s ease both}@keyframes fns229Width{from{width:0!important}}.fns229-stats{margin-top:20px;display:flex;justify-content:space-between;align-items:end}.fns229-stats b{font-size:30px}.fns229-stats span{color:var(--fns229-muted);font-weight:900;font-size:12px}
@media(max-width:1180px){.fns229-panel{width:min(880px,100%);grid-template-columns:360px 1fr}.fns229-left{padding:22px}.fns229-right{padding:24px;min-height:470px}.fns229-right h2{font-size:28px}}
@media(max-width:860px){body.fns229-login{overflow:auto}.fns229-wrap{padding:12px;align-items:center}.fns229-panel{width:min(430px,100%);max-height:none;display:block;border-radius:22px}.fns229-right{display:none}.fns229-left{padding:20px}.fns229-brand{margin-bottom:16px}.fns229-title h1{font-size:28px}.fns229-title p{font-size:12.5px}}
@media(max-width:420px){.fns229-wrap{padding:9px}.fns229-left{padding:17px}.fns229-panel{border-radius:20px}.fns229-logo{width:42px;height:42px;border-radius:14px}.fns229-title h1{font-size:26px}.fns229-field{height:46px;border-radius:14px}.fns229-field input{height:44px;font-size:12.5px}.fns229-submit{height:47px}}
/* === END V229 LOGIN SMALL CLEAN PREMIUM === */


/* === V230 FORGOT PASSWORD + REGISTER PAGE === */
.fns230-auth-page{
  min-height:100vh;margin:0;display:grid;place-items:center;padding:18px;box-sizing:border-box;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#071b34;
  background:
    radial-gradient(circle at 15% 15%,rgba(14,165,233,.24),transparent 34%),
    radial-gradient(circle at 86% 22%,rgba(139,92,246,.20),transparent 34%),
    linear-gradient(135deg,#eef7ff,#f8fbff);
}
.fns230-auth-card{
  width:min(430px,100%);
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(73,148,231,.22);
  background:rgba(255,255,255,.86);
  box-shadow:0 24px 70px rgba(31,86,160,.14);
  backdrop-filter:blur(22px);
}
.fns230-auth-card.wide{width:min(780px,100%)}
.fns230-auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.fns230-auth-brand img{width:46px;height:46px;border-radius:16px;object-fit:cover;background:#fff;box-shadow:0 10px 24px rgba(37,99,235,.14)}
.fns230-auth-brand b{display:block;font-size:16px;font-weight:1000}
.fns230-auth-brand span{display:block;color:#60758f;font-size:12px;font-weight:800}
.fns230-auth-card h1{margin:0 0 8px;font-size:30px;line-height:1.08;letter-spacing:-1px}
.fns230-auth-card p{margin:0 0 18px;color:#60758f;font-size:13.5px;line-height:1.55;font-weight:700}
.fns230-alert{padding:12px 14px;border-radius:15px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#b91c1c;font-weight:900;margin-bottom:14px}
.fns230-alert.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.30);color:#15803d}
.fns230-password-box{padding:14px;border-radius:16px;border:1px dashed rgba(37,99,235,.38);background:rgba(14,165,233,.08);margin-bottom:14px}
.fns230-password-box span{display:block;color:#60758f;font-size:12px;font-weight:900}
.fns230-password-box b{display:block;font-size:30px;letter-spacing:4px;margin:6px 0;color:#2563eb}
.fns230-password-box small{display:block;color:#60758f;font-weight:700}
.fns230-auth-form{display:grid;gap:12px}
.fns230-auth-form.grid{grid-template-columns:repeat(2,1fr)}
.fns230-auth-form .full{grid-column:1/-1}
.fns230-auth-form label{display:grid;gap:6px;font-size:12px;font-weight:1000}
.fns230-auth-form input,.fns230-auth-form select,.fns230-auth-form textarea{
  width:100%;box-sizing:border-box;border:1px solid rgba(73,148,231,.28);border-radius:15px;background:#fff;color:#071b34;
  padding:12px 13px;font-size:13.5px;font-weight:750;outline:none;
}
.fns230-auth-form textarea{min-height:86px;resize:vertical}
.fns230-auth-form input:focus,.fns230-auth-form select:focus,.fns230-auth-form textarea:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px rgba(14,165,233,.12)}
.fns230-auth-form button{
  border:0;border-radius:15px;padding:14px 18px;cursor:pointer;background:linear-gradient(100deg,#0284c7,#2563eb,#7c3aed);
  color:#fff;font-weight:1000;font-size:14px;box-shadow:0 16px 34px rgba(37,99,235,.26)
}
.fns230-auth-links{display:flex;justify-content:center;gap:14px;margin-top:15px;font-size:12.5px;font-weight:950}
.fns230-auth-links a{color:#0284c7;text-decoration:none}
@media(max-width:720px){
  .fns230-auth-card{padding:18px;border-radius:20px}
  .fns230-auth-form.grid{grid-template-columns:1fr}
  .fns230-auth-card h1{font-size:26px}
}
/* === END V230 === */


/* === V231 RESTORE LOGIN STABLE SMALL FALLBACK === */
.fns231-login{
  margin:0;min-height:100vh;display:grid;place-items:center;padding:18px;box-sizing:border-box;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#071b34;
  background:radial-gradient(circle at 18% 12%,rgba(14,165,233,.24),transparent 34%),radial-gradient(circle at 85% 20%,rgba(139,92,246,.20),transparent 34%),linear-gradient(135deg,#eef7ff,#f8fbff);
}
.fns231-card{
  width:min(390px,100%);padding:22px;border-radius:24px;border:1px solid rgba(73,148,231,.22);
  background:rgba(255,255,255,.88);box-shadow:0 24px 70px rgba(31,86,160,.14);backdrop-filter:blur(22px);
}
.fns231-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.fns231-brand img{width:46px;height:46px;border-radius:16px;object-fit:cover;background:#fff}
.fns231-brand b{display:block;font-size:15px;font-weight:1000}
.fns231-brand span{display:block;color:#60758f;font-size:12px;font-weight:800}
.fns231-card h1{margin:0 0 7px;font-size:30px;letter-spacing:-1px}
.fns231-card p{margin:0 0 17px;color:#60758f;font-size:13px;font-weight:750;line-height:1.45}
.fns231-alert{padding:11px 13px;border-radius:15px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#b91c1c;font-weight:900;margin-bottom:13px}
.fns231-form{display:grid;gap:12px}
.fns231-form label{display:grid;gap:6px;font-size:12px;font-weight:1000}
.fns231-form input[type=text],.fns231-form input[type=password],.fns231-form input:not([type]){
  height:46px;border:1px solid rgba(73,148,231,.28);border-radius:15px;background:#fff;color:#071b34;
  padding:0 13px;font-size:13.5px;font-weight:850;outline:none;box-sizing:border-box;width:100%;
}
.fns231-form input:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px rgba(14,165,233,.12)}
.fns231-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:850;color:#60758f}
.fns231-row label{display:flex!important;align-items:center;gap:7px;margin:0}
.fns231-row a,.fns231-links a{color:#0284c7;text-decoration:none;font-weight:950}
.fns231-form button{height:48px;border:0;border-radius:15px;cursor:pointer;background:linear-gradient(100deg,#0284c7,#2563eb,#7c3aed);color:#fff;font-size:14px;font-weight:1000}
.fns231-links{display:flex;justify-content:center;gap:14px;font-size:12px}
@media(max-width:440px){.fns231-card{padding:18px;border-radius:20px}.fns231-card h1{font-size:26px}}
/* === END V231 === */

/* === FNS V233 MOBILE DARK HEADER + DASHBOARD STABILITY ===
   Fix rekaman 10-07-2026:
   - topbar mode gelap pada HP tidak lagi berubah menjadi sticky dan turun meninggalkan ruang kosong;
   - pergantian tema tidak menggeser posisi konten;
   - kartu realtime dashboard lebih compact dan dekorasi tidak menyerupai placeholder abu-abu.
*/
@media (max-width:820px){
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    transform:none!important;
    translate:none!important;
    z-index:99990!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-top:86px!important;
    margin-top:0!important;
    transform:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card{
    min-height:78px!important;
    padding:13px 16px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card:before{
    width:82px!important;
    height:82px!important;
    right:-22px!important;
    top:-26px!important;
    opacity:.10!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card:before{
    background:linear-gradient(135deg,rgba(56,189,248,.24),rgba(139,92,246,.12))!important;
    opacity:.18!important;
  }
}

@media (max-width:430px){
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-top:80px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card{
    min-height:72px!important;
    padding:12px 14px!important;
    border-radius:20px!important;
  }
}
/* === END FNS V233 === */

/* === FNS V234 ADMIN MOBILE HEADER + THEME HARD FIX ===
   - Admin mobile tidak lagi memakai ruang kosong di atas topbar.
   - Topbar mengikuti tema dari body.dark ATAU html[data-theme="dark"].
   - Dekorasi lingkaran besar pada kartu status dihapus.
   - Selector portal pelanggan/staf dikecualikan agar tampilan portal yang sudah benar tidak berubah.
*/
@media (max-width:820px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell){
    padding-top:0!important;
    scroll-padding-top:0!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100svh!important;
    margin:0!important;
    padding:0 10px calc(106px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
    transform:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    min-height:72px!important;
    margin:0 -10px 12px!important;
    padding:9px 10px!important;
    transform:none!important;
    translate:none!important;
    z-index:99990!important;
    border-radius:0 0 22px 22px!important;
  }

  /* Dark harus konsisten walaupun tema tersimpan pada elemen HTML, bukan body. */
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    background:linear-gradient(135deg,#071426 0%,#0c2340 52%,#171b42 100%)!important;
    color:#f4f8ff!important;
    border-bottom:1px solid rgba(113,180,255,.26)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.38)!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .live-clock,
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-live-clock,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .live-clock,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-live-clock,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .live-clock,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-live-clock{
    color:#f8fbff!important;
    text-shadow:none!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-auto-greeting,
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns149-smart-greeting,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-auto-greeting,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns149-smart-greeting,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-auto-greeting,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns149-smart-greeting{
    color:#a9bdd7!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .mobile-menu,
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .theme-toggle,
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .topbar-icon,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .mobile-menu,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .theme-toggle,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .topbar-icon,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .mobile-menu,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .theme-toggle,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .topbar-icon{
    color:#f8fbff!important;
    background:linear-gradient(180deg,rgba(24,50,82,.98),rgba(10,27,49,.98))!important;
    border-color:rgba(125,180,255,.28)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-realtime-row{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card{
    min-height:72px!important;
    padding:12px 14px!important;
    border-radius:20px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card:before,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card:after{
    content:none!important;
    display:none!important;
  }
}

@media (max-width:430px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}
/* === END FNS V234 === */

/* V234.1: kalahkan sisa selector V233 yang masih memberi padding atas 80/86px. */
@media (max-width:820px){
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-top:0!important;
  }
}

/* V234.2: paksa topbar admin dark tetap sticky dan ikut alur dokumen. */
@media (max-width:820px){
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin:0 -10px 12px!important;
    transform:none!important;
    translate:none!important;
  }
}
@media (max-width:430px){
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
  }
}


/* === FNS V235 FINAL MOBILE ADMIN FIX ===
   Cache-bust baru + fixed header stabil + kartu tanpa dekorasi lingkaran.
*/
@media (max-width:820px){
  html,body{margin:0!important;min-width:0!important;overflow-x:hidden!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell){padding-top:0!important;margin-top:0!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    position:relative!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
    min-height:100svh!important;margin:0!important;padding:84px 10px calc(104px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;transform:none!important;translate:none!important
  }
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    position:fixed!important;inset:0 0 auto 0!important;top:0!important;left:0!important;right:0!important;
    box-sizing:border-box!important;width:auto!important;max-width:none!important;min-width:0!important;min-height:74px!important;
    margin:0!important;padding:9px 10px!important;transform:none!important;translate:none!important;
    display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;
    border-radius:0 0 20px 20px!important;z-index:99999!important
  }
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    background:linear-gradient(135deg,#071426 0%,#0b213b 56%,#171a3d 100%)!important;color:#f7fbff!important;
    border-bottom:1px solid rgba(113,180,255,.24)!important;box-shadow:0 12px 30px rgba(0,0,0,.40)!important
  }
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .title-block{min-width:0!important;overflow:hidden!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .top-actions{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;
    gap:5px!important;min-width:0!important;max-width:100%!important;overflow:visible!important
  }
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-realtime-row{grid-template-columns:1fr!important;gap:12px!important;margin-top:0!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) a.dash31-rt-card{
    box-sizing:border-box!important;width:100%!important;min-width:0!important;height:auto!important;min-height:76px!important;
    margin:0!important;padding:13px 15px!important;border-radius:20px!important
  }
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) a.dash31-rt-card::before,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) a.dash31-rt-card::after{
    content:none!important;display:none!important;width:0!important;height:0!important;background:none!important;opacity:0!important
  }
}
@media (max-width:520px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .user-chip{display:none!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .live-clock::after{content:none!important;display:none!important}
}
@media (max-width:390px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .topbar-settings,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .topbar-wa-notif{display:none!important}
}
/* === END FNS V235 === */


/* === FNS V236 MOBILE ADMIN HEADER VIEWPORT LOCK ===
   - Mengalahkan aturan V234.2 position:sticky pada mode gelap.
   - Header admin dipaksa fixed ke viewport dan tidak ikut scroll.
   - Portal pelanggan/staf tidak disentuh.
*/
@media (max-width:820px){
  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.fns236-admin-header-lock body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  body.fns236-admin-header-lock.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    position:fixed!important;
    inset:0 0 auto 0!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:74px!important;
    margin:0!important;
    padding:9px 10px!important;
    transform:none!important;
    translate:none!important;
    z-index:100000!important;
  }
  html.fns236-admin-header-lock,
  html.fns236-admin-header-lock body{
    overflow-x:hidden!important;
  }
  body.fns236-admin-header-lock.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-top:84px!important;
  }
}
/* === END FNS V236 === */

/* === FNS V237 MOBILE SIDEBAR PROFESSIONAL FIX ===
   - Sidebar admin HP tidak lagi menutup header dan menu bawah.
   - Group accordion tidak boleh menyusut sehingga judul tidak terpotong.
   - Area menu mempunyai scroll sendiri; kartu pengguna tetap terlihat.
   - Ditambahkan tombol tutup yang jelas dan status menu aktif.
   - Portal pelanggan/staf dan tampilan desktop tidak diubah.
*/
.sidebar-mobile-close{display:none}
@media (max-width:820px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell){
    --fns237-topbar-h:74px;
    --fns237-bottom-nav-h:84px;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    left:0!important;
    right:auto!important;
    top:calc(var(--fns237-topbar-h,74px) + 6px)!important;
    bottom:calc(var(--fns237-bottom-nav-h,84px) + 6px)!important;
    width:min(92vw,380px)!important;
    max-width:calc(100vw - 14px)!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:10px 10px 11px!important;
    overflow:hidden!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .24s cubic-bezier(.2,.76,.25,1),box-shadow .24s ease!important;
    border-radius:0 24px 24px 0!important;
    z-index:100001!important;
    isolation:isolate!important;
    overscroll-behavior:contain!important;
    box-shadow:24px 0 60px rgba(15,38,75,.28)!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    background:
      radial-gradient(circle at 0 0,rgba(38,167,255,.16),transparent 32%),
      linear-gradient(180deg,#08182b 0%,#071426 52%,#091a30 100%)!important;
    border:1px solid rgba(112,177,255,.22)!important;
    border-left:0!important;
    box-shadow:26px 0 66px rgba(0,0,0,.58)!important;
  }

  body.app-shell.nav-open:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    transform:translate3d(0,0,0)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .mobile-nav-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:99998!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    background:rgba(2,8,18,.54)!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }

  body.app-shell.nav-open:not(.portal-customer-shell):not(.portal-staff-shell) .mobile-nav-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand{
    position:relative!important;
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    min-height:56px!important;
    margin:0 0 8px!important;
    padding:8px 54px 8px 8px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand img,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand .brand-mark{
    flex:0 0 auto!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand>div{
    min-width:0!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand b,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand span{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar-mobile-close{
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    border-radius:13px!important;
    border:1px solid rgba(92,157,235,.28)!important;
    background:rgba(255,255,255,.76)!important;
    color:#173555!important;
    font:900 25px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
    cursor:pointer!important;
    z-index:6!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar-mobile-close,
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar-mobile-close{
    background:rgba(20,45,76,.88)!important;
    border-color:rgba(125,180,255,.24)!important;
    color:#f4f9ff!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-search{
    position:relative!important;
    flex:0 0 auto!important;
    margin:0 0 9px!important;
    padding:0!important;
    z-index:5!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-search:before{
    content:"⌕"!important;
    position:absolute!important;
    left:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#6c88a8!important;
    font-size:17px!important;
    pointer-events:none!important;
    z-index:2!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-search input{
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    box-sizing:border-box!important;
    padding:0 14px 0 40px!important;
    border-radius:15px!important;
    font-size:13px!important;
    font-weight:750!important;
    line-height:44px!important;
    outline:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-height:0!important;
    max-height:none!important;
    gap:8px!important;
    margin:0!important;
    padding:1px 4px 12px 1px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(64,148,255,.55) transparent!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav::-webkit-scrollbar{width:5px!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav::-webkit-scrollbar-track{background:transparent!important}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav::-webkit-scrollbar-thumb{
    border-radius:999px!important;
    background:linear-gradient(180deg,rgba(35,109,255,.68),rgba(0,184,255,.45))!important;
  }

  /* Ini inti perbaikan: setiap accordion tidak boleh ikut menyusut oleh flexbox. */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group{
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group.closed{
    flex-basis:46px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group>button,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex:0 0 46px!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 13px!important;
    border-radius:15px!important;
    line-height:1.15!important;
    font-size:12.5px!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group-toggle span{
    display:block!important;
    min-width:0!important;
    max-width:calc(100% - 30px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group-toggle b{
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    border-radius:8px!important;
    font-size:15px!important;
    transition:transform .18s ease,background .18s ease!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group:not(.closed) .nav-group-toggle b{
    background:rgba(35,109,255,.12)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group.closed>.nav-items{
    display:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group:not(.closed)>.nav-items{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    padding:1px 5px 8px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-items a,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group a{
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    box-sizing:border-box!important;
    margin:3px 1px!important;
    padding:9px 11px!important;
    border-radius:13px!important;
    gap:10px!important;
    font-size:12.8px!important;
    line-height:1.25!important;
    white-space:normal!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group a i{
    flex:0 0 24px!important;
    width:24px!important;
    min-width:24px!important;
    text-align:center!important;
    font-size:16px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar-user-card{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    min-height:64px!important;
    max-height:76px!important;
    box-sizing:border-box!important;
    margin:9px 0 0!important;
    padding:8px 10px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    z-index:4!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-user-photo{
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:13px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-user-meta{
    min-width:0!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-user-meta b,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-user-meta span{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.app-shell.nav-open:not(.portal-customer-shell):not(.portal-staff-shell) .app-mobile-bottom-nav{
    opacity:.42!important;
    pointer-events:none!important;
  }

  body.app-shell.nav-open:not(.portal-customer-shell):not(.portal-staff-shell) .mobile-menu{
    border-color:rgba(56,189,248,.70)!important;
    box-shadow:0 0 0 3px rgba(56,189,248,.12),0 10px 24px rgba(0,0,0,.20)!important;
  }
}

@media (max-width:390px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    border-radius:0 20px 20px 0!important;
  }
}
/* === END FNS V237 === */


/* === FNS V240 HAPUS ICON DOBEL MENU PAKET === */
/*
   Ikon utama tetap memakai .fns184-title-icon.
   Pseudo-element lama pada H2 dinonaktifkan agar hanya satu ikon tampil.
*/
.fns184-package-panel .fns184-package-head h2::before,
.fns184-package-panel .fns184-title-wrap h2::before,
section.fns184-package-panel h2::before{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 0!important;
  box-shadow:none!important;
}

/* Pastikan jarak judul tetap rapi setelah ikon tambahan dihapus. */
.fns184-package-panel .fns184-title-wrap{
  gap:14px!important;
}
.fns184-package-panel .fns184-title-wrap > div:last-child{
  min-width:0!important;
}
.fns184-package-panel .fns184-title-wrap h2{
  min-width:0!important;
  margin:0!important;
}
/* === END FNS V240 === */


/* =========================================================
   FNS V241 GLOBAL LIVING UI
   Sistem efek dan animasi konsisten untuk seluruh menu/tampilan.
   Aman untuk desktop, tablet, HP, mode gelap/terang, dan aksesibilitas.
   ========================================================= */
:root{
  --fns241-ease:cubic-bezier(.22,.78,.24,1);
  --fns241-spring:cubic-bezier(.18,.89,.32,1.28);
  --fns241-fast:180ms;
  --fns241-normal:420ms;
  --fns241-cyan:0,184,255;
  --fns241-blue:35,109,255;
  --fns241-purple:124,60,255;
}

/* Lapisan ambient global. */
body.app-shell{
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
}
body.app-shell > .fns241-ambient{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  contain:strict;
  pointer-events:none;
  opacity:.72;
}
body.app-shell > .fns241-ambient .fns241-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(18px);
  opacity:.16;
  will-change:transform;
}
body.app-shell > .fns241-ambient .o1{
  width:34vw;height:34vw;min-width:300px;min-height:300px;
  left:-14vw;top:8vh;
  background:radial-gradient(circle,rgba(var(--fns241-cyan),.72),rgba(var(--fns241-blue),.16) 48%,transparent 72%);
  animation:fns241OrbOne 18s ease-in-out infinite alternate;
}
body.app-shell > .fns241-ambient .o2{
  width:40vw;height:40vw;min-width:340px;min-height:340px;
  right:-18vw;top:22vh;
  background:radial-gradient(circle,rgba(var(--fns241-purple),.60),rgba(var(--fns241-blue),.12) 48%,transparent 72%);
  animation:fns241OrbTwo 22s ease-in-out infinite alternate;
}
body.app-shell > .fns241-ambient .o3{
  width:32vw;height:32vw;min-width:280px;min-height:280px;
  left:32vw;bottom:-22vw;
  background:radial-gradient(circle,rgba(34,197,94,.26),rgba(var(--fns241-cyan),.10) 50%,transparent 72%);
  animation:fns241OrbThree 20s ease-in-out infinite alternate;
}
body.app-shell > .fns241-ambient .fns241-star{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 14px rgba(var(--fns241-cyan),.95);
  opacity:.12;
  animation:fns241Star 8s ease-in-out infinite;
}
body.app-shell > .fns241-ambient .s1{left:9%;top:18%;animation-delay:-1s}
body.app-shell > .fns241-ambient .s2{left:21%;top:64%;animation-delay:-6s}
body.app-shell > .fns241-ambient .s3{left:43%;top:13%;animation-delay:-3s}
body.app-shell > .fns241-ambient .s4{left:61%;top:72%;animation-delay:-7s}
body.app-shell > .fns241-ambient .s5{left:79%;top:27%;animation-delay:-4s}
body.app-shell > .fns241-ambient .s6{left:92%;top:81%;animation-delay:-2s}

body.app-shell > .sidebar,
body.app-shell > .main,
body.app-shell > .portal-mobile-bottom-nav,
body.app-shell > .app-mobile-bottom-nav,
body.app-shell > .mobile-nav-backdrop{
  position:relative;
  z-index:1;
}
body.app-shell > .topbar{z-index:100000}

@keyframes fns241OrbOne{
  from{transform:translate3d(0,0,0) scale(.94)}
  to{transform:translate3d(8vw,7vh,0) scale(1.10)}
}
@keyframes fns241OrbTwo{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-9vw,10vh,0) scale(.88)}
}
@keyframes fns241OrbThree{
  from{transform:translate3d(0,0,0) scale(.90)}
  to{transform:translate3d(4vw,-9vh,0) scale(1.08)}
}
@keyframes fns241Star{
  0%,100%{opacity:.08;transform:translateY(8px) scale(.7)}
  50%{opacity:.78;transform:translateY(-15px) scale(1.25)}
}

/* Animasi kemunculan konten saat memasuki viewport. */
body.app-shell.fns241-motion-ready .fns241-reveal{
  opacity:0;
  translate:0 18px;
  scale:.985;
  filter:saturate(.86);
  transition:
    opacity 560ms var(--fns241-ease) var(--fns241-delay,0ms),
    translate 560ms var(--fns241-ease) var(--fns241-delay,0ms),
    scale 560ms var(--fns241-ease) var(--fns241-delay,0ms),
    filter 560ms var(--fns241-ease) var(--fns241-delay,0ms);
}
body.app-shell.fns241-motion-ready .fns241-reveal.fns241-visible{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:saturate(1);
}

/* Kartu/panel lebih hidup tetapi tetap profesional. */
body.app-shell .card,
body.app-shell .stat-card,
body.app-shell .quick,
body.app-shell .module-actions span,
body.app-shell .quick-grid a,
body.app-shell .finance-mini div,
body.app-shell .noc-grid span,
body.app-shell .report-grid div,
body.app-shell .gateway-hero,
body.app-shell .invoice-paper,
body.app-shell [class*="summary-card"],
body.app-shell [class*="module-card"]{
  transition:
    translate var(--fns241-normal) var(--fns241-ease),
    scale var(--fns241-normal) var(--fns241-ease),
    border-color var(--fns241-normal) ease,
    box-shadow var(--fns241-normal) ease,
    filter var(--fns241-normal) ease;
}
body.app-shell .fns241-interactive{
  position:relative;
  isolation:isolate;
}
body.app-shell .fns241-card-light{
  position:absolute;
  z-index:0;
  width:190px;height:190px;
  left:var(--fns241-x,50%);
  top:var(--fns241-y,50%);
  translate:-50% -50%;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle,rgba(var(--fns241-cyan),.16),rgba(var(--fns241-purple),.055) 45%,transparent 72%);
  filter:blur(4px);
  transition:opacity 260ms ease;
}
body.app-shell .fns241-interactive:hover > .fns241-card-light{opacity:1}

/* Tombol: lift, kilau, ripple. */
body.app-shell .btn,
body.app-shell button,
body.app-shell .topbar-icon,
body.app-shell .theme-toggle,
body.app-shell .mobile-menu,
body.app-shell .nav-group a,
body.app-shell .portal-mobile-bottom-nav a,
body.app-shell .app-mobile-bottom-nav a{
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:
    translate var(--fns241-fast) var(--fns241-ease),
    scale var(--fns241-fast) var(--fns241-ease),
    box-shadow var(--fns241-fast) ease,
    border-color var(--fns241-fast) ease,
    filter var(--fns241-fast) ease,
    background-color var(--fns241-fast) ease;
}
body.app-shell .btn.primary{
  background-size:180% 100%;
  animation:fns241PrimaryFlow 5.5s ease infinite;
}
body.app-shell .fns241-ripple{
  position:absolute;
  z-index:8;
  width:12px;height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.46);
  transform:scale(0);
  animation:fns241Ripple 620ms ease-out forwards;
}
@keyframes fns241Ripple{
  to{transform:scale(18);opacity:0}
}
@keyframes fns241PrimaryFlow{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

/* Sidebar accordion lembut, tidak lagi buka/tutup mendadak. */
body.app-shell .sidebar .nav-items{
  display:block!important;
  max-height:1600px;
  opacity:1;
  overflow:hidden;
  translate:0 0;
  transition:
    max-height 420ms var(--fns241-ease),
    opacity 260ms ease,
    translate 360ms var(--fns241-ease);
}
body.app-shell .sidebar .nav-group.closed > .nav-items{
  display:block!important;
  max-height:0;
  opacity:0;
  translate:0 -5px;
  pointer-events:none;
}
body.app-shell .sidebar .nav-group-toggle b{
  transition:rotate 300ms var(--fns241-spring),color 220ms ease!important;
}
body.app-shell .sidebar .nav-group:not(.closed) .nav-group-toggle b{
  rotate:0deg;
  color:var(--primary);
}
body.app-shell .sidebar .nav-group.closed .nav-group-toggle b{
  transform:none!important;
  rotate:-90deg;
}
body.app-shell .sidebar .nav-group a i{
  transition:translate 220ms var(--fns241-spring),scale 220ms var(--fns241-spring),filter 220ms ease;
}
body.app-shell .sidebar .nav-group a.active{
  background-size:180% 100%;
  animation:fns241ActiveNav 5.8s ease infinite;
}
@keyframes fns241ActiveNav{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

/* Header, status dan navigasi bawah. */
body.app-shell .topbar{
  background-size:180% 180%!important;
  transition:background-color 360ms ease,border-color 360ms ease,box-shadow 360ms ease!important;
}
body.app-shell .topbar-icon.has em,
body.app-shell .dash48-ticket-bell.has em,
body.app-shell .topbar-wa-notif.has em{
  animation:fns241BadgePulse 1.9s ease-in-out infinite;
}
body.app-shell .live-clock{
  transition:color 260ms ease,text-shadow 260ms ease;
}
body.app-shell .app-mobile-bottom-nav a.active i,
body.app-shell .portal-mobile-bottom-nav a.active i,
body.app-shell .portal-mobile-bottom-nav a[aria-current="page"] i{
  animation:fns241NavIcon 2.4s ease-in-out infinite;
}
@keyframes fns241BadgePulse{
  0%,100%{scale:.94;box-shadow:0 0 0 0 rgba(35,109,255,.15)}
  50%{scale:1.08;box-shadow:0 0 0 7px rgba(35,109,255,0)}
}
@keyframes fns241NavIcon{
  0%,100%{translate:0 0;scale:1}
  50%{translate:0 -2px;scale:1.08}
}

/* Form terasa aktif dan jelas. */
body.app-shell input,
body.app-shell select,
body.app-shell textarea{
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease,
    translate 220ms var(--fns241-ease);
}
body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus{
  border-color:rgba(var(--fns241-cyan),.68)!important;
  box-shadow:0 0 0 4px rgba(var(--fns241-cyan),.10),0 10px 28px rgba(var(--fns241-blue),.08)!important;
  translate:0 -1px;
}
body.app-shell label{
  transition:color 220ms ease;
}
body.app-shell label:focus-within{
  color:var(--primary)!important;
}

/* Tabel dan daftar menjadi responsif terhadap pointer. */
body.app-shell table tbody td{
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    translate 220ms var(--fns241-ease);
}
body.app-shell .badge{
  transition:translate 180ms var(--fns241-ease),scale 180ms var(--fns241-ease),box-shadow 180ms ease;
}

/* Alert, modal dan overlay. */
body.app-shell .alert{
  animation:fns241AlertIn 480ms var(--fns241-spring) both;
}
body.app-shell .ip-pool-modal:not([aria-hidden="true"]),
body.app-shell .modal.show,
body.app-shell [role="dialog"][aria-hidden="false"]{
  animation:fns241BackdropIn 260ms ease both;
}
body.app-shell .ip-pool-modal:not([aria-hidden="true"]) > *,
body.app-shell .modal.show > *,
body.app-shell [role="dialog"][aria-hidden="false"] > *{
  animation:fns241DialogIn 420ms var(--fns241-spring) both;
}
@keyframes fns241AlertIn{
  from{opacity:0;translate:0 -10px;scale:.98}
  to{opacity:1;translate:0 0;scale:1}
}
@keyframes fns241BackdropIn{from{opacity:0}to{opacity:1}}
@keyframes fns241DialogIn{
  from{opacity:0;translate:0 18px;scale:.97}
  to{opacity:1;translate:0 0;scale:1}
}

/* Progress tipis saat pindah halaman/submisi. */
.fns241-page-progress{
  position:fixed;
  z-index:2147483000;
  top:0;left:0;
  width:0;height:3px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,#236dff,#00d7ff,#7c3cff,#f04fff);
  box-shadow:0 0 18px rgba(var(--fns241-cyan),.72);
  transition:width 320ms ease,opacity 180ms ease;
}
.fns241-page-progress.active{width:78%;opacity:1}
.fns241-page-progress.done{width:100%;opacity:0;transition:width 160ms ease,opacity 280ms 120ms ease}

/* Hover hanya untuk perangkat yang memang memiliki pointer presisi. */
@media (hover:hover) and (pointer:fine){
  body.app-shell .card:hover,
  body.app-shell .stat-card:hover,
  body.app-shell .quick:hover,
  body.app-shell .module-actions span:hover,
  body.app-shell .quick-grid a:hover,
  body.app-shell .finance-mini div:hover,
  body.app-shell .noc-grid span:hover,
  body.app-shell .report-grid div:hover{
    translate:0 -4px;
    border-color:rgba(var(--fns241-cyan),.34)!important;
    box-shadow:0 24px 58px rgba(13,50,105,.16),0 0 0 1px rgba(var(--fns241-cyan),.05)!important;
    filter:saturate(1.04);
  }
  body.dark.app-shell .card:hover,
  body.dark.app-shell .stat-card:hover,
  html[data-theme="dark"] body.app-shell .card:hover,
  html[data-theme="dark"] body.app-shell .stat-card:hover{
    box-shadow:0 26px 62px rgba(0,0,0,.38),0 0 30px rgba(var(--fns241-cyan),.07)!important;
  }
  body.app-shell .btn:hover,
  body.app-shell button:hover,
  body.app-shell .topbar-icon:hover,
  body.app-shell .theme-toggle:hover,
  body.app-shell .mobile-menu:hover{
    translate:0 -2px;
    filter:saturate(1.08);
  }
  body.app-shell .btn:active,
  body.app-shell button:active,
  body.app-shell .topbar-icon:active,
  body.app-shell .theme-toggle:active,
  body.app-shell .mobile-menu:active{
    translate:0 0;
    scale:.97;
  }
  body.app-shell .sidebar .nav-group a:hover i{
    translate:2px 0;
    scale:1.10;
    filter:drop-shadow(0 0 8px rgba(var(--fns241-cyan),.36));
  }
  body.app-shell table tbody tr:hover td{
    background:linear-gradient(135deg,rgba(var(--fns241-blue),.09),rgba(var(--fns241-cyan),.07))!important;
    border-color:rgba(var(--fns241-cyan),.26)!important;
  }
  body.app-shell table tbody tr:hover td:first-child{translate:3px 0}
  body.app-shell .badge:hover{translate:0 -1px;scale:1.04}
}

/* HP: animasi tetap terasa, tetapi ringan dan hemat baterai. */
@media (max-width:820px){
  body.app-shell > .fns241-ambient{opacity:.34}
  body.app-shell > .fns241-ambient .fns241-orb{animation-duration:28s;filter:blur(28px)}
  body.app-shell > .fns241-ambient .fns241-star{display:none}
  body.app-shell.fns241-motion-ready .fns241-reveal{
    translate:0 10px;
    transition-duration:420ms;
  }
  body.app-shell .fns241-card-light{display:none}
}

/* Jangan mengganggu cetak, aksesibilitas, atau perangkat lambat. */
@media print{
  .fns241-ambient,.fns241-page-progress,.fns241-card-light{display:none!important}
  .fns241-reveal{opacity:1!important;translate:none!important;scale:1!important;filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  body.app-shell > .fns241-ambient{display:none!important}
  body.app-shell *,
  body.app-shell *::before,
  body.app-shell *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
  body.app-shell .fns241-reveal{
    opacity:1!important;
    translate:none!important;
    scale:1!important;
    filter:none!important;
  }
}
/* === END FNS V241 GLOBAL LIVING UI === */


/* =========================================================
   FNS V242 ROLE MATRIX TRUE LIGHT / DARK MODE
   Memperbaiki menu Hak Akses agar seluruh komponennya mengikuti tema.
   ========================================================= */

/* Variabel dasar halaman Hak Akses. */
body[data-module="role_matrix"]{
  --v242-bg:#edf5ff;
  --v242-surface:rgba(255,255,255,.92);
  --v242-surface-2:rgba(247,250,255,.94);
  --v242-surface-3:rgba(235,244,255,.86);
  --v242-card:#ffffff;
  --v242-text:#10233d;
  --v242-heading:#081a33;
  --v242-muted:#60738d;
  --v242-line:rgba(76,145,220,.28);
  --v242-line-strong:rgba(35,109,255,.42);
  --v242-shadow:0 20px 55px rgba(30,75,145,.12);
  --v242-soft-shadow:0 10px 28px rgba(30,75,145,.08);
  --v242-icon-bg:linear-gradient(135deg,#e7f3ff,#eefcff);
  --v242-chip-bg:#e8f5ff;
  --v242-chip-text:#075985;
  --v242-selected-bg:linear-gradient(135deg,rgba(35,109,255,.11),rgba(0,184,255,.08));
  --v242-selected-line:rgba(35,109,255,.48);
  --v242-scroll-track:rgba(148,163,184,.14);
  --v242-scroll-thumb:linear-gradient(#4f8fff,#16c7ee);
  color-scheme:light;
}

/* Mode gelap: semua warna putih lama diganti permukaan gelap. */
body.dark[data-module="role_matrix"],
body[data-theme="dark"][data-module="role_matrix"],
html.dark body[data-module="role_matrix"],
html[data-theme="dark"] body[data-module="role_matrix"]{
  --v242-bg:#06101e;
  --v242-surface:rgba(8,22,42,.96);
  --v242-surface-2:rgba(11,28,51,.94);
  --v242-surface-3:rgba(14,35,62,.90);
  --v242-card:#0b1b31;
  --v242-text:#eaf4ff;
  --v242-heading:#ffffff;
  --v242-muted:#9fb1ca;
  --v242-line:rgba(94,156,224,.24);
  --v242-line-strong:rgba(58,177,255,.48);
  --v242-shadow:0 24px 70px rgba(0,0,0,.38);
  --v242-soft-shadow:0 14px 34px rgba(0,0,0,.24);
  --v242-icon-bg:linear-gradient(135deg,rgba(35,109,255,.20),rgba(0,184,255,.12));
  --v242-chip-bg:rgba(16,80,135,.28);
  --v242-chip-text:#cceeff;
  --v242-selected-bg:linear-gradient(135deg,rgba(35,109,255,.23),rgba(0,184,255,.12));
  --v242-selected-line:rgba(52,194,255,.56);
  --v242-scroll-track:rgba(255,255,255,.05);
  --v242-scroll-thumb:linear-gradient(#3b82f6,#06b6d4);
  color-scheme:dark;
}

/* Perubahan tema berlangsung halus. */
body[data-module="role_matrix"] .v223-role-hero,
body[data-module="role_matrix"] .v223-role-tabs a,
body[data-module="role_matrix"] .v223-role-grid > .card,
body[data-module="role_matrix"] .v223-menu-group,
body[data-module="role_matrix"] .v223-check,
body[data-module="role_matrix"] .v223-summary-row,
body[data-module="role_matrix"] .v223-matrix-card,
body[data-module="role_matrix"] .v223-chip,
body[data-module="role_matrix"] input,
body[data-module="role_matrix"] select,
body[data-module="role_matrix"] textarea{
  transition:
    background-color .28s ease,
    background .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .22s ease!important;
}

/* Hero. */
body[data-module="role_matrix"] .v223-role-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 0%,rgba(0,184,255,.18),transparent 34%),
    radial-gradient(circle at 92% 10%,rgba(124,60,255,.14),transparent 34%),
    linear-gradient(135deg,var(--v242-surface),var(--v242-surface-2))!important;
  border:1px solid var(--v242-line)!important;
  box-shadow:var(--v242-shadow)!important;
  color:var(--v242-text)!important;
}
body[data-module="role_matrix"] .v223-role-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:280px;
  height:280px;
  right:-100px;
  bottom:-160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,60,255,.18),transparent 68%);
  pointer-events:none;
}
body[data-module="role_matrix"] .v223-role-icon{
  position:relative;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(35,109,255,.28),0 0 28px rgba(0,184,255,.12)!important;
}
body[data-module="role_matrix"] .v223-role-icon::after{
  content:"";
  position:absolute;
  width:42px;
  height:140%;
  left:-65px;
  top:-20%;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  animation:v242RoleIconShine 4.8s ease-in-out infinite;
}
@keyframes v242RoleIconShine{
  0%,58%{left:-65px;opacity:0}
  68%{opacity:1}
  88%,100%{left:105px;opacity:0}
}
body[data-module="role_matrix"] .v223-role-hero h1{
  color:var(--v242-heading)!important;
  text-shadow:none!important;
}
body[data-module="role_matrix"] .v223-role-hero p{
  color:var(--v242-muted)!important;
}
body[data-module="role_matrix"] .v223-role-hero .eyebrow{
  color:#46bfff!important;
  border-color:rgba(70,191,255,.25)!important;
  background:rgba(35,109,255,.09)!important;
}
body[data-module="role_matrix"] .v223-role-hero > .badge{
  position:relative;
  z-index:2;
  background:rgba(34,197,94,.14)!important;
  color:#16a34a!important;
  border:1px solid rgba(34,197,94,.30)!important;
}
body.dark[data-module="role_matrix"] .v223-role-hero > .badge,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-role-hero > .badge,
html.dark body[data-module="role_matrix"] .v223-role-hero > .badge{
  background:rgba(34,197,94,.16)!important;
  color:#86efac!important;
  border-color:rgba(74,222,128,.26)!important;
}

/* Tab role. */
body[data-module="role_matrix"] .v223-role-tabs{
  gap:10px!important;
}
body[data-module="role_matrix"] .v223-role-tabs a{
  background:var(--v242-surface)!important;
  color:var(--v242-text)!important;
  border:1px solid var(--v242-line)!important;
  box-shadow:0 7px 20px rgba(20,60,120,.05);
}
body[data-module="role_matrix"] .v223-role-tabs a:hover{
  transform:translateY(-2px);
  border-color:var(--v242-line-strong)!important;
  box-shadow:var(--v242-soft-shadow)!important;
}
body[data-module="role_matrix"] .v223-role-tabs a.active{
  background:linear-gradient(135deg,#236dff,#00b8ff)!important;
  border-color:rgba(91,188,255,.64)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(35,109,255,.28)!important;
}

/* Card utama kiri/kanan dan matriks bawah. */
body[data-module="role_matrix"] .v223-role-grid > .card,
body[data-module="role_matrix"] .v223-role-grid + .card{
  background:
    radial-gradient(circle at 100% 0,rgba(124,60,255,.055),transparent 32%),
    var(--v242-surface)!important;
  border:1px solid var(--v242-line)!important;
  color:var(--v242-text)!important;
  box-shadow:var(--v242-shadow)!important;
}
body[data-module="role_matrix"] .v223-role-grid h3,
body[data-module="role_matrix"] .v223-role-grid + .card h3,
body[data-module="role_matrix"] .section-title h3{
  color:var(--v242-heading)!important;
}
body[data-module="role_matrix"] .v223-role-grid .muted,
body[data-module="role_matrix"] .v223-role-grid + .card .muted{
  color:var(--v242-muted)!important;
}
body[data-module="role_matrix"] .v223-role-grid hr{
  border:0!important;
  border-top:1px solid var(--v242-line)!important;
}

/* Grup menu. */
body[data-module="role_matrix"] .v223-menu-group{
  background:var(--v242-surface-2)!important;
  border:1px solid var(--v242-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body[data-module="role_matrix"] .v223-group-title{
  color:var(--v242-heading)!important;
}

/* Item checkbox. */
body[data-module="role_matrix"] .v223-check{
  position:relative;
  overflow:hidden;
  background:var(--v242-card)!important;
  border:1px solid var(--v242-line)!important;
  color:var(--v242-text)!important;
  box-shadow:0 7px 20px rgba(20,60,120,.035)!important;
}
body[data-module="role_matrix"] .v223-check:hover{
  transform:translateY(-2px)!important;
  border-color:var(--v242-line-strong)!important;
  box-shadow:var(--v242-soft-shadow)!important;
}
body[data-module="role_matrix"] .v223-check:has(input:checked){
  background:var(--v242-selected-bg)!important;
  border-color:var(--v242-selected-line)!important;
  box-shadow:0 12px 28px rgba(35,109,255,.10),inset 3px 0 0 #22b8ff!important;
}
body[data-module="role_matrix"] .v223-check input{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  accent-color:#0ea5e9!important;
}
body[data-module="role_matrix"] .v223-check .ico{
  background:var(--v242-icon-bg)!important;
  border:1px solid var(--v242-line)!important;
  color:var(--v242-text)!important;
}
body[data-module="role_matrix"] .v223-check b{
  color:var(--v242-heading)!important;
}
body[data-module="role_matrix"] .v223-check small{
  color:var(--v242-muted)!important;
}

/* Input tambah role. */
body[data-module="role_matrix"] .v223-role-grid input,
body[data-module="role_matrix"] .v223-role-grid select,
body[data-module="role_matrix"] .v223-role-grid textarea{
  background:var(--v242-surface-2)!important;
  color:var(--v242-heading)!important;
  border:1px solid var(--v242-line)!important;
}
body[data-module="role_matrix"] .v223-role-grid input::placeholder,
body[data-module="role_matrix"] .v223-role-grid textarea::placeholder{
  color:var(--v242-muted)!important;
  opacity:.84;
}
body[data-module="role_matrix"] .v223-role-grid label{
  color:var(--v242-text)!important;
}

/* Ringkasan. */
body[data-module="role_matrix"] .v223-summary-row{
  background:var(--v242-surface-2)!important;
  border:1px solid var(--v242-line)!important;
  color:var(--v242-text)!important;
}
body[data-module="role_matrix"] .v223-summary-row:hover{
  transform:translateX(3px)!important;
  border-color:var(--v242-line-strong)!important;
}

/* Matriks bawah. */
body[data-module="role_matrix"] .v223-matrix-card{
  background:var(--v242-surface-2)!important;
  border:1px solid var(--v242-line)!important;
  color:var(--v242-text)!important;
  box-shadow:var(--v242-soft-shadow)!important;
}
body[data-module="role_matrix"] .v223-matrix-card:hover{
  transform:translateY(-3px)!important;
  border-color:var(--v242-line-strong)!important;
}
body[data-module="role_matrix"] .v223-matrix-head b{
  color:var(--v242-heading)!important;
}
body[data-module="role_matrix"] .v223-chip{
  background:var(--v242-chip-bg)!important;
  color:var(--v242-chip-text)!important;
  border:1px solid var(--v242-line)!important;
}

/* Alert superadmin. */
body[data-module="role_matrix"] .v223-alert.ok{
  background:rgba(34,197,94,.12)!important;
  border-color:rgba(34,197,94,.30)!important;
  color:#15803d!important;
}
body.dark[data-module="role_matrix"] .v223-alert.ok,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-alert.ok,
html.dark body[data-module="role_matrix"] .v223-alert.ok{
  background:rgba(34,197,94,.13)!important;
  border-color:rgba(74,222,128,.24)!important;
  color:#9af0b0!important;
}

/* Badge pada halaman Hak Akses. */
body[data-module="role_matrix"] .badge.active{
  background:rgba(35,109,255,.12)!important;
  color:#1d4ed8!important;
  border-color:rgba(35,109,255,.22)!important;
}
body.dark[data-module="role_matrix"] .badge.active,
html[data-theme="dark"] body[data-module="role_matrix"] .badge.active,
html.dark body[data-module="role_matrix"] .badge.active{
  background:rgba(35,109,255,.20)!important;
  color:#bfdbfe!important;
  border-color:rgba(96,165,250,.30)!important;
}
body[data-module="role_matrix"] .badge.pending{
  background:rgba(245,158,11,.12)!important;
  color:#b45309!important;
  border-color:rgba(245,158,11,.22)!important;
}
body.dark[data-module="role_matrix"] .badge.pending,
html[data-theme="dark"] body[data-module="role_matrix"] .badge.pending,
html.dark body[data-module="role_matrix"] .badge.pending{
  background:rgba(245,158,11,.16)!important;
  color:#fcd34d!important;
  border-color:rgba(251,191,36,.25)!important;
}

/* Scrollbar khusus daftar menu role. */
body[data-module="role_matrix"] .v223-check-grid.mini,
body[data-module="role_matrix"] .v223-chip-wrap{
  scrollbar-width:thin;
  scrollbar-color:#3b82f6 var(--v242-scroll-track);
}
body[data-module="role_matrix"] .v223-check-grid.mini::-webkit-scrollbar,
body[data-module="role_matrix"] .v223-chip-wrap::-webkit-scrollbar{
  width:8px;
  height:8px;
}
body[data-module="role_matrix"] .v223-check-grid.mini::-webkit-scrollbar-track,
body[data-module="role_matrix"] .v223-chip-wrap::-webkit-scrollbar-track{
  background:var(--v242-scroll-track);
  border-radius:99px;
}
body[data-module="role_matrix"] .v223-check-grid.mini::-webkit-scrollbar-thumb,
body[data-module="role_matrix"] .v223-chip-wrap::-webkit-scrollbar-thumb{
  background:var(--v242-scroll-thumb);
  border-radius:99px;
}

/* Pastikan tidak ada permukaan terang tertinggal pada mode gelap. */
body.dark[data-module="role_matrix"] .v223-role-grid > .card,
body.dark[data-module="role_matrix"] .v223-role-grid + .card,
body.dark[data-module="role_matrix"] .v223-menu-group,
body.dark[data-module="role_matrix"] .v223-check,
body.dark[data-module="role_matrix"] .v223-summary-row,
body.dark[data-module="role_matrix"] .v223-matrix-card,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-role-grid > .card,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-role-grid + .card,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-menu-group,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-check,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-summary-row,
html[data-theme="dark"] body[data-module="role_matrix"] .v223-matrix-card,
html.dark body[data-module="role_matrix"] .v223-role-grid > .card,
html.dark body[data-module="role_matrix"] .v223-role-grid + .card,
html.dark body[data-module="role_matrix"] .v223-menu-group,
html.dark body[data-module="role_matrix"] .v223-check,
html.dark body[data-module="role_matrix"] .v223-summary-row,
html.dark body[data-module="role_matrix"] .v223-matrix-card{
  color:var(--v242-text)!important;
}

/* HP/tablet. */
@media(max-width:760px){
  body[data-module="role_matrix"] .v223-role-hero{
    gap:14px!important;
    padding:20px!important;
  }
  body[data-module="role_matrix"] .v223-role-icon{
    width:58px!important;
    height:58px!important;
    border-radius:19px!important;
    font-size:27px!important;
  }
  body[data-module="role_matrix"] .v223-role-hero h1{
    font-size:clamp(27px,8vw,36px)!important;
  }
  body[data-module="role_matrix"] .v223-role-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body[data-module="role_matrix"] .v223-role-tabs a{
    width:100%!important;
    min-width:0!important;
    padding:10px 8px!important;
  }
  body[data-module="role_matrix"] .v223-menu-group{
    padding:13px!important;
    border-radius:20px!important;
  }
  body[data-module="role_matrix"] .v223-check{
    min-height:64px!important;
    padding:11px!important;
  }
}
@media(max-width:380px){
  body[data-module="role_matrix"] .v223-role-tabs{
    grid-template-columns:1fr!important;
  }
}
/* === END FNS V242 === */


/* =========================================================
   FNS V243 GLOBAL TRUE DARK MODE + CONTRAST FIX
   Semua halaman admin, portal, hero, card, KPI, tabel, form,
   modul WhatsApp, stok, inventaris, laporan, kas, Radius,
   billing cycle, dan komponen versi lama mengikuti tema gelap.
   ========================================================= */

/* Token tunggal untuk semua variasi penanda tema gelap. */
html.dark body.app-shell,
html[data-theme="dark"] body.app-shell,
body.app-shell.dark,
body.app-shell[data-theme="dark"]{
  --fns243-bg:#050d19;
  --fns243-bg-2:#071426;
  --fns243-surface:#0b1a2e;
  --fns243-surface-2:#0e223b;
  --fns243-surface-3:#122946;
  --fns243-input:#08182b;
  --fns243-text:#f4f8ff;
  --fns243-heading:#ffffff;
  --fns243-muted:#a9bad1;
  --fns243-muted-2:#8398b5;
  --fns243-line:rgba(111,174,240,.22);
  --fns243-line-strong:rgba(61,188,255,.42);
  --fns243-shadow:0 22px 58px rgba(0,0,0,.34);
  --fns243-shadow-soft:0 12px 32px rgba(0,0,0,.24);
  --fns243-blue:#60a5fa;
  --fns243-cyan:#67e8f9;
  --fns243-green:#6ee7a3;
  --fns243-red:#ff8da2;
  --fns243-orange:#ffd166;
  --fns243-purple:#c4b5fd;

  --bg:var(--fns243-bg)!important;
  --bg2:var(--fns243-bg-2)!important;
  --panel:var(--fns243-surface)!important;
  --panel2:var(--fns243-surface-2)!important;
  --text:var(--fns243-text)!important;
  --muted:var(--fns243-muted)!important;
  --line:var(--fns243-line)!important;
  --shadow:var(--fns243-shadow)!important;

  color-scheme:dark;
  color:var(--fns243-text)!important;
  background:
    radial-gradient(circle at 4% -8%,rgba(14,165,233,.13),transparent 30%),
    radial-gradient(circle at 96% 2%,rgba(124,58,237,.13),transparent 28%),
    linear-gradient(180deg,var(--fns243-bg),var(--fns243-bg-2))!important;
}

/* Main shell, sidebar, dan topbar tetap gelap. */
html.dark body.app-shell .main,
html[data-theme="dark"] body.app-shell .main,
body.app-shell.dark .main,
body.app-shell[data-theme="dark"] .main{
  color:var(--fns243-text)!important;
  background:transparent!important;
}

html.dark body.app-shell .sidebar,
html[data-theme="dark"] body.app-shell .sidebar,
body.app-shell.dark .sidebar,
body.app-shell[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,rgba(5,16,31,.98),rgba(7,22,40,.96))!important;
  border-color:var(--fns243-line)!important;
  color:var(--fns243-text)!important;
}

html.dark body.app-shell .topbar,
html[data-theme="dark"] body.app-shell .topbar,
body.app-shell.dark .topbar,
body.app-shell[data-theme="dark"] .topbar{
  background:linear-gradient(135deg,rgba(6,20,38,.97),rgba(10,28,52,.96),rgba(24,19,58,.88))!important;
  border-color:var(--fns243-line)!important;
  color:var(--fns243-text)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.28)!important;
}

/* Seluruh hero lama yang sebelumnya dipaksa putih. */
html.dark body.app-shell :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,
  .v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,.v226-hero,
  .radius-sync-hero,.gateway-hero,.billing-mode-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
),
html[data-theme="dark"] body.app-shell :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,
  .v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,.v226-hero,
  .radius-sync-hero,.gateway-hero,.billing-mode-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
),
body.app-shell.dark :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,
  .v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,.v226-hero,
  .radius-sync-hero,.gateway-hero,.billing-mode-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
),
body.app-shell[data-theme="dark"] :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,
  .v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,.v226-hero,
  .radius-sync-hero,.gateway-hero,.billing-mode-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
){
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  color:var(--fns243-text)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(14,165,233,.20),transparent 34%),
    radial-gradient(circle at 94% 8%,rgba(124,58,237,.18),transparent 36%),
    linear-gradient(135deg,rgba(10,29,52,.98),rgba(12,35,62,.96),rgba(27,22,64,.82))!important;
  border-color:var(--fns243-line-strong)!important;
  box-shadow:var(--fns243-shadow)!important;
}

/* Heading dan deskripsi hero harus terbaca. */
html.dark body.app-shell :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(h1,h2,h3,h4,b,strong),
html[data-theme="dark"] body.app-shell :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(h1,h2,h3,h4,b,strong),
body.app-shell.dark :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(h1,h2,h3,h4,b,strong),
body.app-shell[data-theme="dark"] :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(h1,h2,h3,h4,b,strong){
  color:var(--fns243-heading)!important;
  text-shadow:0 2px 18px rgba(0,0,0,.24)!important;
}

html.dark body.app-shell :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(p,small,.muted),
html[data-theme="dark"] body.app-shell :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(p,small,.muted),
body.app-shell.dark :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(p,small,.muted),
body.app-shell[data-theme="dark"] :is(
  .page-hero,.pro-hero,.scheduler-v201-hero,.acs-v134-hero,
  .wa-one-hero,.wa-template-hero,.wa-log-hero,.v221-hero,.v223-role-hero,
  .v224-stock-hero,.v225-inv-hero,.v226-hero,.radius-sync-hero,.gateway-hero,
  .fns-customer-mini-hero,.portal43-hero,.v216-hero
) :is(p,small,.muted){
  color:var(--fns243-muted)!important;
}

/* Eyebrow tidak pucat pada latar gelap. */
html.dark body.app-shell .eyebrow,
html[data-theme="dark"] body.app-shell .eyebrow,
body.app-shell.dark .eyebrow,
body.app-shell[data-theme="dark"] .eyebrow{
  color:#74dcff!important;
  background:rgba(14,165,233,.11)!important;
  border-color:rgba(103,232,249,.22)!important;
}

/* Permukaan umum: card, panel, kotak informasi, rekomendasi, template. */
html.dark body.app-shell :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .gateway-hero,.invoice-paper,.empty-state,.module-note,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.advanced-radius-note .note-grid>div,
  .billing-mode-card,.report-grid>div,.noc-grid>span,.finance-mini>div,
  .module-actions>span,.quick-grid>a,.v224-low-list>div,
  .v226-rule,.v226-info,.v226-card
),
html[data-theme="dark"] body.app-shell :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .gateway-hero,.invoice-paper,.empty-state,.module-note,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.advanced-radius-note .note-grid>div,
  .billing-mode-card,.report-grid>div,.noc-grid>span,.finance-mini>div,
  .module-actions>span,.quick-grid>a,.v224-low-list>div,
  .v226-rule,.v226-info,.v226-card
),
body.app-shell.dark :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .gateway-hero,.invoice-paper,.empty-state,.module-note,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.advanced-radius-note .note-grid>div,
  .billing-mode-card,.report-grid>div,.noc-grid>span,.finance-mini>div,
  .module-actions>span,.quick-grid>a,.v224-low-list>div,
  .v226-rule,.v226-info,.v226-card
),
body.app-shell[data-theme="dark"] :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .gateway-hero,.invoice-paper,.empty-state,.module-note,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.advanced-radius-note .note-grid>div,
  .billing-mode-card,.report-grid>div,.noc-grid>span,.finance-mini>div,
  .module-actions>span,.quick-grid>a,.v224-low-list>div,
  .v226-rule,.v226-info,.v226-card
){
  color:var(--fns243-text)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(124,58,237,.055),transparent 32%),
    linear-gradient(145deg,rgba(12,30,53,.97),rgba(8,22,40,.96))!important;
  border-color:var(--fns243-line)!important;
  box-shadow:var(--fns243-shadow-soft)!important;
}

/* Heading dan teks umum. */
html.dark body.app-shell :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(h1,h2,h3,h4,h5,h6,b,strong,label),
html[data-theme="dark"] body.app-shell :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(h1,h2,h3,h4,h5,h6,b,strong,label),
body.app-shell.dark :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(h1,h2,h3,h4,h5,h6,b,strong,label),
body.app-shell[data-theme="dark"] :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(h1,h2,h3,h4,h5,h6,b,strong,label){
  color:var(--fns243-heading)!important;
}

html.dark body.app-shell :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(p,small,.muted,.desc,.subtitle),
html[data-theme="dark"] body.app-shell :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(p,small,.muted,.desc,.subtitle),
body.app-shell.dark :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(p,small,.muted,.desc,.subtitle),
body.app-shell[data-theme="dark"] :is(
  .card,.panel,.box,.content-card,.module-card,.summary-card,.tab-card,
  .wa-template-card,.v221-info,.v224-guide>div,.v225-tips>div,
  .v223-menu-group,.v223-check,.v223-summary-row,.v223-matrix-card,
  .sync-profile-card,.advanced-radius-note,.billing-mode-card,
  .report-grid>div,.noc-grid>span,.finance-mini>div
) :is(p,small,.muted,.desc,.subtitle){
  color:var(--fns243-muted)!important;
}

/* KPI/statistik: tidak boleh menjadi kotak cyan terang di mode gelap. */
html.dark body.app-shell .stat-card,
html[data-theme="dark"] body.app-shell .stat-card,
body.app-shell.dark .stat-card,
body.app-shell[data-theme="dark"] .stat-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  color:var(--fns243-text)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(96,165,250,.10),transparent 36%),
    linear-gradient(145deg,rgba(13,33,58,.98),rgba(8,22,40,.97))!important;
  border:1px solid var(--fns243-line)!important;
  box-shadow:var(--fns243-shadow-soft)!important;
}

html.dark body.app-shell .stat-card::before,
html[data-theme="dark"] body.app-shell .stat-card::before,
body.app-shell.dark .stat-card::before,
body.app-shell[data-theme="dark"] .stat-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,var(--fns243-accent,rgba(96,165,250,.70)) 0 3px,transparent 3px),
    radial-gradient(circle at 92% 8%,var(--fns243-glow,rgba(96,165,250,.13)),transparent 38%)!important;
  opacity:1!important;
}

html.dark body.app-shell .stat-card > *,
html[data-theme="dark"] body.app-shell .stat-card > *,
body.app-shell.dark .stat-card > *,
body.app-shell[data-theme="dark"] .stat-card > *{
  position:relative!important;
  z-index:1!important;
}

html.dark body.app-shell .stat-card.primary,
html[data-theme="dark"] body.app-shell .stat-card.primary,
body.app-shell.dark .stat-card.primary,
body.app-shell[data-theme="dark"] .stat-card.primary{
  --fns243-accent:#38bdf8;
  --fns243-glow:rgba(56,189,248,.16);
  background:
    radial-gradient(circle at 100% 0%,rgba(56,189,248,.14),transparent 38%),
    linear-gradient(145deg,rgba(11,35,62,.98),rgba(7,24,43,.97))!important;
}

html.dark body.app-shell .stat-card.ok,
html[data-theme="dark"] body.app-shell .stat-card.ok,
body.app-shell.dark .stat-card.ok,
body.app-shell[data-theme="dark"] .stat-card.ok{
  --fns243-accent:#22c55e;
  --fns243-glow:rgba(34,197,94,.14);
}

html.dark body.app-shell .stat-card.danger,
html[data-theme="dark"] body.app-shell .stat-card.danger,
body.app-shell.dark .stat-card.danger,
body.app-shell[data-theme="dark"] .stat-card.danger{
  --fns243-accent:#fb7185;
  --fns243-glow:rgba(251,113,133,.14);
}

html.dark body.app-shell :is(.stat-card.warn,.stat-card.warning),
html[data-theme="dark"] body.app-shell :is(.stat-card.warn,.stat-card.warning),
body.app-shell.dark :is(.stat-card.warn,.stat-card.warning),
body.app-shell[data-theme="dark"] :is(.stat-card.warn,.stat-card.warning){
  --fns243-accent:#fbbf24;
  --fns243-glow:rgba(251,191,36,.14);
}

html.dark body.app-shell .stat-card :is(span,small),
html[data-theme="dark"] body.app-shell .stat-card :is(span,small),
body.app-shell.dark .stat-card :is(span,small),
body.app-shell[data-theme="dark"] .stat-card :is(span,small){
  color:var(--fns243-muted)!important;
  text-shadow:none!important;
}

html.dark body.app-shell .stat-card strong,
html[data-theme="dark"] body.app-shell .stat-card strong,
body.app-shell.dark .stat-card strong,
body.app-shell[data-theme="dark"] .stat-card strong{
  color:var(--fns243-heading)!important;
  text-shadow:none!important;
}

html.dark body.app-shell .stat-card.primary strong,
html[data-theme="dark"] body.app-shell .stat-card.primary strong,
body.app-shell.dark .stat-card.primary strong,
body.app-shell[data-theme="dark"] .stat-card.primary strong{color:var(--fns243-cyan)!important}

html.dark body.app-shell .stat-card.ok strong,
html[data-theme="dark"] body.app-shell .stat-card.ok strong,
body.app-shell.dark .stat-card.ok strong,
body.app-shell[data-theme="dark"] .stat-card.ok strong{color:var(--fns243-green)!important}

html.dark body.app-shell .stat-card.danger strong,
html[data-theme="dark"] body.app-shell .stat-card.danger strong,
body.app-shell.dark .stat-card.danger strong,
body.app-shell[data-theme="dark"] .stat-card.danger strong{color:var(--fns243-red)!important}

html.dark body.app-shell :is(.stat-card.warn,.stat-card.warning) strong,
html[data-theme="dark"] body.app-shell :is(.stat-card.warn,.stat-card.warning) strong,
body.app-shell.dark :is(.stat-card.warn,.stat-card.warning) strong,
body.app-shell[data-theme="dark"] :is(.stat-card.warn,.stat-card.warning) strong{color:var(--fns243-orange)!important}

/* WhatsApp tabs/navigation. */
html.dark body.app-shell .wa-one-nav a,
html[data-theme="dark"] body.app-shell .wa-one-nav a,
body.app-shell.dark .wa-one-nav a,
body.app-shell[data-theme="dark"] .wa-one-nav a{
  color:var(--fns243-text)!important;
  background:linear-gradient(145deg,rgba(15,36,62,.96),rgba(9,25,45,.96))!important;
  border-color:var(--fns243-line)!important;
  box-shadow:var(--fns243-shadow-soft)!important;
}

html.dark body.app-shell .wa-one-nav a:hover,
html[data-theme="dark"] body.app-shell .wa-one-nav a:hover,
body.app-shell.dark .wa-one-nav a:hover,
body.app-shell[data-theme="dark"] .wa-one-nav a:hover{
  border-color:var(--fns243-line-strong)!important;
  background:linear-gradient(145deg,rgba(20,48,80,.98),rgba(11,31,54,.98))!important;
}

/* Chip dan label yang sebelumnya biru sangat terang. */
html.dark body.app-shell :is(.wa-event,.v223-chip,.v225-chip,.v225-category-cloud span),
html[data-theme="dark"] body.app-shell :is(.wa-event,.v223-chip,.v225-chip,.v225-category-cloud span),
body.app-shell.dark :is(.wa-event,.v223-chip,.v225-chip,.v225-category-cloud span),
body.app-shell[data-theme="dark"] :is(.wa-event,.v223-chip,.v225-chip,.v225-category-cloud span){
  color:#bfe9ff!important;
  background:rgba(14,165,233,.12)!important;
  border-color:rgba(103,232,249,.22)!important;
}

/* Billing-cycle recommendation yang sebelumnya abu-abu terang. */
html.dark body.app-shell .v221-info,
html[data-theme="dark"] body.app-shell .v221-info,
body.app-shell.dark .v221-info,
body.app-shell[data-theme="dark"] .v221-info{
  background:
    linear-gradient(145deg,rgba(17,42,70,.96),rgba(10,28,49,.96))!important;
  border-color:rgba(103,193,255,.24)!important;
}
html.dark body.app-shell .v221-info :is(b,strong,h3),
html[data-theme="dark"] body.app-shell .v221-info :is(b,strong,h3),
body.app-shell.dark .v221-info :is(b,strong,h3),
body.app-shell[data-theme="dark"] .v221-info :is(b,strong,h3){
  color:#f5f9ff!important;
}
html.dark body.app-shell .v221-info p,
html[data-theme="dark"] body.app-shell .v221-info p,
body.app-shell.dark .v221-info p,
body.app-shell[data-theme="dark"] .v221-info p{
  color:var(--fns243-muted)!important;
}

/* Form, input, pilihan dan textarea. */
html.dark body.app-shell :is(input,select,textarea),
html[data-theme="dark"] body.app-shell :is(input,select,textarea),
body.app-shell.dark :is(input,select,textarea),
body.app-shell[data-theme="dark"] :is(input,select,textarea){
  color:var(--fns243-text)!important;
  background:linear-gradient(180deg,rgba(7,23,42,.98),rgba(9,28,50,.98))!important;
  border-color:var(--fns243-line)!important;
  caret-color:#67e8f9!important;
}

html.dark body.app-shell :is(input,textarea)::placeholder,
html[data-theme="dark"] body.app-shell :is(input,textarea)::placeholder,
body.app-shell.dark :is(input,textarea)::placeholder,
body.app-shell[data-theme="dark"] :is(input,textarea)::placeholder{
  color:#7187a5!important;
  opacity:1!important;
}

html.dark body.app-shell option,
html[data-theme="dark"] body.app-shell option,
body.app-shell.dark option,
body.app-shell[data-theme="dark"] option{
  color:var(--fns243-text)!important;
  background:#0b1a2e!important;
}

/* Table dan daftar. */
html.dark body.app-shell table,
html[data-theme="dark"] body.app-shell table,
body.app-shell.dark table,
body.app-shell[data-theme="dark"] table{
  color:var(--fns243-text)!important;
}

html.dark body.app-shell table thead th,
html[data-theme="dark"] body.app-shell table thead th,
body.app-shell.dark table thead th,
body.app-shell[data-theme="dark"] table thead th{
  color:#c7daf2!important;
  background:linear-gradient(180deg,rgba(18,43,72,.95),rgba(10,29,51,.95))!important;
  border-color:var(--fns243-line)!important;
}

html.dark body.app-shell table tbody td,
html[data-theme="dark"] body.app-shell table tbody td,
body.app-shell.dark table tbody td,
body.app-shell[data-theme="dark"] table tbody td{
  color:#edf6ff!important;
  background:linear-gradient(180deg,rgba(13,31,53,.94),rgba(9,25,44,.94))!important;
  border-color:rgba(111,174,240,.14)!important;
}

/* Status/badge: gelap transparan dengan tulisan terang. */
html.dark body.app-shell :is(.badge.active,.badge.online,.badge.paid,.badge.success,.badge.hadir,.badge.in,.badge.available,.badge.done,.pill.ok,.wa-status.sent,.wa-status.success,.v224-type.in),
html[data-theme="dark"] body.app-shell :is(.badge.active,.badge.online,.badge.paid,.badge.success,.badge.hadir,.badge.in,.badge.available,.badge.done,.pill.ok,.wa-status.sent,.wa-status.success,.v224-type.in),
body.app-shell.dark :is(.badge.active,.badge.online,.badge.paid,.badge.success,.badge.hadir,.badge.in,.badge.available,.badge.done,.pill.ok,.wa-status.sent,.wa-status.success,.v224-type.in),
body.app-shell[data-theme="dark"] :is(.badge.active,.badge.online,.badge.paid,.badge.success,.badge.hadir,.badge.in,.badge.available,.badge.done,.pill.ok,.wa-status.sent,.wa-status.success,.v224-type.in){
  color:#8ef0b0!important;
  background:rgba(34,197,94,.14)!important;
  border-color:rgba(74,222,128,.25)!important;
}

html.dark body.app-shell :is(.badge.isolated,.badge.offline,.badge.overdue,.badge.expense,.badge.alpa,.badge.out,.badge.used,.badge.cancelled,.wa-status.failed,.wa-status.error,.v224-type.out),
html[data-theme="dark"] body.app-shell :is(.badge.isolated,.badge.offline,.badge.overdue,.badge.expense,.badge.alpa,.badge.out,.badge.used,.badge.cancelled,.wa-status.failed,.wa-status.error,.v224-type.out),
body.app-shell.dark :is(.badge.isolated,.badge.offline,.badge.overdue,.badge.expense,.badge.alpa,.badge.out,.badge.used,.badge.cancelled,.wa-status.failed,.wa-status.error,.v224-type.out),
body.app-shell[data-theme="dark"] :is(.badge.isolated,.badge.offline,.badge.overdue,.badge.expense,.badge.alpa,.badge.out,.badge.used,.badge.cancelled,.wa-status.failed,.wa-status.error,.v224-type.out){
  color:#ff9caf!important;
  background:rgba(244,63,94,.14)!important;
  border-color:rgba(251,113,133,.26)!important;
}

html.dark body.app-shell :is(.badge.pending,.badge.warning,.badge.progress,.badge.survey,.badge.medium,.badge.scheduled,.wa-status.pending,.wa-status.disabled,.v224-type.damaged),
html[data-theme="dark"] body.app-shell :is(.badge.pending,.badge.warning,.badge.progress,.badge.survey,.badge.medium,.badge.scheduled,.wa-status.pending,.wa-status.disabled,.v224-type.damaged),
body.app-shell.dark :is(.badge.pending,.badge.warning,.badge.progress,.badge.survey,.badge.medium,.badge.scheduled,.wa-status.pending,.wa-status.disabled,.v224-type.damaged),
body.app-shell[data-theme="dark"] :is(.badge.pending,.badge.warning,.badge.progress,.badge.survey,.badge.medium,.badge.scheduled,.wa-status.pending,.wa-status.disabled,.v224-type.damaged){
  color:#ffd979!important;
  background:rgba(245,158,11,.14)!important;
  border-color:rgba(251,191,36,.25)!important;
}

html.dark body.app-shell :is(.badge.unknown,.badge.inactive,.badge.none),
html[data-theme="dark"] body.app-shell :is(.badge.unknown,.badge.inactive,.badge.none),
body.app-shell.dark :is(.badge.unknown,.badge.inactive,.badge.none),
body.app-shell[data-theme="dark"] :is(.badge.unknown,.badge.inactive,.badge.none){
  color:#bed0e8!important;
  background:rgba(100,116,139,.18)!important;
  border-color:rgba(148,163,184,.22)!important;
}

/* Stok dan inventory semantic boxes. */
html.dark body.app-shell .v224-empty-ok,
html[data-theme="dark"] body.app-shell .v224-empty-ok,
body.app-shell.dark .v224-empty-ok,
body.app-shell[data-theme="dark"] .v224-empty-ok{
  color:#8ef0b0!important;
  background:rgba(34,197,94,.12)!important;
  border-color:rgba(74,222,128,.23)!important;
}

html.dark body.app-shell .v224-low-list>div,
html[data-theme="dark"] body.app-shell .v224-low-list>div,
body.app-shell.dark .v224-low-list>div,
body.app-shell[data-theme="dark"] .v224-low-list>div{
  color:#ffe1a3!important;
  background:rgba(245,158,11,.11)!important;
  border-color:rgba(251,191,36,.22)!important;
}
html.dark body.app-shell .v224-low-list :is(b,span),
html[data-theme="dark"] body.app-shell .v224-low-list :is(b,span),
body.app-shell.dark .v224-low-list :is(b,span),
body.app-shell[data-theme="dark"] .v224-low-list :is(b,span){
  color:#ffe1a3!important;
}

html.dark body.app-shell .v225-inv-table tr.row-low td,
html[data-theme="dark"] body.app-shell .v225-inv-table tr.row-low td,
body.app-shell.dark .v225-inv-table tr.row-low td,
body.app-shell[data-theme="dark"] .v225-inv-table tr.row-low td{
  background:linear-gradient(90deg,rgba(127,29,29,.25),rgba(9,25,44,.95))!important;
}

/* Section titles dan teks global yang sempat terlalu pucat. */
html.dark body.app-shell :is(.section-title,.card-head,.v223-matrix-head,.sync-profile-head) :is(h1,h2,h3,h4,b,strong),
html[data-theme="dark"] body.app-shell :is(.section-title,.card-head,.v223-matrix-head,.sync-profile-head) :is(h1,h2,h3,h4,b,strong),
body.app-shell.dark :is(.section-title,.card-head,.v223-matrix-head,.sync-profile-head) :is(h1,h2,h3,h4,b,strong),
body.app-shell[data-theme="dark"] :is(.section-title,.card-head,.v223-matrix-head,.sync-profile-head) :is(h1,h2,h3,h4,b,strong){
  color:var(--fns243-heading)!important;
}

/* Link ghost/quick pada dark mode. */
html.dark body.app-shell :is(.btn.ghost,.quick,.pill),
html[data-theme="dark"] body.app-shell :is(.btn.ghost,.quick,.pill),
body.app-shell.dark :is(.btn.ghost,.quick,.pill),
body.app-shell[data-theme="dark"] :is(.btn.ghost,.quick,.pill){
  color:#dcecff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:var(--fns243-line)!important;
}

/* Tidak ada flash putih ketika ganti tema. */
html.dark body.app-shell *,
html[data-theme="dark"] body.app-shell *,
body.app-shell.dark *,
body.app-shell[data-theme="dark"] *{
  scrollbar-color:#2d79c9 #07111f;
}

@media(max-width:820px){
  html.dark body.app-shell :is(
    .wa-one-hero,.v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,
    .v226-hero,.page-hero,.pro-hero,.radius-sync-hero
  ),
  html[data-theme="dark"] body.app-shell :is(
    .wa-one-hero,.v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,
    .v226-hero,.page-hero,.pro-hero,.radius-sync-hero
  ),
  body.app-shell.dark :is(
    .wa-one-hero,.v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,
    .v226-hero,.page-hero,.pro-hero,.radius-sync-hero
  ),
  body.app-shell[data-theme="dark"] :is(
    .wa-one-hero,.v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,
    .v226-hero,.page-hero,.pro-hero,.radius-sync-hero
  ){
    padding:20px!important;
    border-radius:22px!important;
  }

  html.dark body.app-shell .stat-card,
  html[data-theme="dark"] body.app-shell .stat-card,
  body.app-shell.dark .stat-card,
  body.app-shell[data-theme="dark"] .stat-card{
    min-height:96px!important;
  }
}
/* === END FNS V243 === */


/* FNS V243.1 - penyempurnaan kontras global komponen kecil */
html.dark body.app-shell .main :is(h1,h2,h3,h4,h5,h6),
html[data-theme="dark"] body.app-shell .main :is(h1,h2,h3,h4,h5,h6),
body.app-shell.dark .main :is(h1,h2,h3,h4,h5,h6),
body.app-shell[data-theme="dark"] .main :is(h1,h2,h3,h4,h5,h6){
  color:var(--fns243-heading)!important;
}

html.dark body.app-shell :is(.quick,.user-chip,.theme-toggle,.mobile-menu,.nav-group,.sidebar-user-card),
html[data-theme="dark"] body.app-shell :is(.quick,.user-chip,.theme-toggle,.mobile-menu,.nav-group,.sidebar-user-card),
body.app-shell.dark :is(.quick,.user-chip,.theme-toggle,.mobile-menu,.nav-group,.sidebar-user-card),
body.app-shell[data-theme="dark"] :is(.quick,.user-chip,.theme-toggle,.mobile-menu,.nav-group,.sidebar-user-card){
  color:var(--fns243-text)!important;
  background:linear-gradient(145deg,rgba(13,32,55,.96),rgba(7,22,40,.96))!important;
  border-color:var(--fns243-line)!important;
}

html.dark body.app-shell .nav-group a.active,
html[data-theme="dark"] body.app-shell .nav-group a.active,
body.app-shell.dark .nav-group a.active,
body.app-shell[data-theme="dark"] .nav-group a.active{
  color:#9de7ff!important;
  background:linear-gradient(135deg,rgba(35,109,255,.22),rgba(0,184,255,.12))!important;
  border-color:rgba(103,232,249,.18)!important;
}

html.dark body.app-shell :is(.wa-response,.v224-guide span,.v225-tips p,.v225-inv-table td small,.v224-stock-table td small),
html[data-theme="dark"] body.app-shell :is(.wa-response,.v224-guide span,.v225-tips p,.v225-inv-table td small,.v224-stock-table td small),
body.app-shell.dark :is(.wa-response,.v224-guide span,.v225-tips p,.v225-inv-table td small,.v224-stock-table td small),
body.app-shell[data-theme="dark"] :is(.wa-response,.v224-guide span,.v225-tips p,.v225-inv-table td small,.v224-stock-table td small){
  color:var(--fns243-muted)!important;
}

html.dark body.app-shell hr,
html[data-theme="dark"] body.app-shell hr,
body.app-shell.dark hr,
body.app-shell[data-theme="dark"] hr{
  border-color:var(--fns243-line)!important;
}
/* === END FNS V243.1 === */


/* =========================================================
   FNS V244 THEME GEOMETRY PARITY
   Mode terang dan gelap memakai ukuran, bentuk, grid, padding,
   radius, dan posisi yang sama. Tema hanya mengganti palet warna.
   ========================================================= */

body.app-shell{
  --fns244-hero-gap:20px;
  --fns244-hero-pad:28px;
  --fns244-hero-radius:28px;
  --fns244-stat-height:92px;
  --fns244-card-radius:18px;
  --fns244-control-height:36px;
}

/* Hindari perubahan ukuran ketika class tema diganti. */
html.fns244-theme-switching body.app-shell *,
body.app-shell.fns244-theme-switching *{
  transition-property:
    color,background-color,background,border-color,box-shadow,
    opacity,fill,stroke,filter!important;
}

/* Kontrak geometri hero WhatsApp: sama persis pada dua tema. */
body.app-shell .wa-one-hero{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) minmax(150px,max-content)!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:var(--fns244-hero-gap)!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:var(--fns244-hero-pad)!important;
  margin:0 0 16px!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:var(--fns244-hero-radius)!important;
  box-sizing:border-box!important;
}
body.app-shell .wa-one-hero > .hero-icon{
  grid-column:1!important;
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;
  flex:0 0 72px!important;
  border-radius:24px!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
body.app-shell .wa-one-hero > div:not(.hero-icon){
  grid-column:2!important;
  min-width:0!important;
  width:100%!important;
}
body.app-shell .wa-one-hero > .wa-status-pill{
  grid-column:3!important;
  justify-self:end!important;
  align-self:center!important;
  min-width:150px!important;
  width:auto!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 16px!important;
  margin:0!important;
  border-radius:999px!important;
  box-sizing:border-box!important;
}
body.app-shell .wa-one-hero h1{
  display:block!important;
  min-width:0!important;
  margin:4px 0 8px!important;
  font-size:clamp(28px,3vw,44px)!important;
  line-height:1.05!important;
  letter-spacing:normal!important;
}
body.app-shell .wa-one-hero p{
  margin:0!important;
  line-height:1.5!important;
}
body.app-shell .v222-wa-link-btn{
  min-height:0!important;
  height:auto!important;
  margin-left:12px!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  line-height:1.15!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
}

/* Navigasi WhatsApp: ukuran dan bentuk tidak berubah saat tema berganti. */
body.app-shell .wa-one-nav{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  width:100%!important;
  min-height:48px!important;
  margin:0 0 16px!important;
  padding:0!important;
}
body.app-shell .wa-one-nav a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 16px!important;
  margin:0!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:999px!important;
  line-height:1.2!important;
  box-sizing:border-box!important;
}

/* Perbaikan utama: compact stat tidak boleh membesar hanya di mode gelap. */
body.app-shell .stat-grid.compact-stats,
body.app-shell .wa-one-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:var(--fns244-stat-height)!important;
  align-items:start!important;
  align-content:start!important;
  gap:12px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 18px!important;
  box-sizing:border-box!important;
}
body.app-shell .stat-grid.compact-stats > .stat-card,
body.app-shell .wa-one-stats > .stat-card{
  align-self:start!important;
  width:100%!important;
  height:var(--fns244-stat-height)!important;
  min-height:var(--fns244-stat-height)!important;
  max-height:var(--fns244-stat-height)!important;
  padding:13px!important;
  margin:0!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:var(--fns244-card-radius)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.app-shell .stat-grid.compact-stats > .stat-card > *,
body.app-shell .wa-one-stats > .stat-card > *{
  max-width:100%!important;
  min-width:0!important;
}
body.app-shell .stat-grid.compact-stats > .stat-card span,
body.app-shell .wa-one-stats > .stat-card span{
  display:block!important;
  line-height:1.25!important;
  margin:0!important;
}
body.app-shell .stat-grid.compact-stats > .stat-card strong,
body.app-shell .wa-one-stats > .stat-card strong{
  display:block!important;
  margin:0!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Komponen umum: geometri ditetapkan global, warna tetap dari tema. */
body.app-shell :is(.card,.stat-card,.module-card,.summary-card,.tab-card){
  box-sizing:border-box!important;
}
body.app-shell :is(input,select,textarea){
  box-sizing:border-box!important;
}
body.app-shell :is(.theme-toggle,.mobile-menu){
  height:36px!important;
  min-height:36px!important;
  border-radius:13px!important;
}
body.app-shell .user-chip{
  min-height:38px!important;
  height:38px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  box-sizing:border-box!important;
}

/* Hero versi lain: pertahankan geometri asli pada kedua tema. */
body.app-shell :is(
  .v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,.v226-hero
){
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:28px!important;
  margin-bottom:18px!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:28px!important;
  box-sizing:border-box!important;
}
body.app-shell :is(
  .v221-icon,.v223-role-icon,.v224-stock-icon,.v225-inv-icon,.v226-icon
){
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;
  flex:0 0 72px!important;
  border-radius:24px!important;
  box-sizing:border-box!important;
}

/* Tema hanya boleh mengganti warna, bukan ukuran pseudo/dekorasi. */
body.app-shell .stat-card::before,
body.app-shell .stat-card::after{
  box-sizing:border-box!important;
}

/* Tablet. */
@media(max-width:1100px){
  body.app-shell .wa-one-hero{
    grid-template-columns:72px minmax(0,1fr)!important;
  }
  body.app-shell .wa-one-hero > .wa-status-pill{
    grid-column:1 / -1!important;
    justify-self:stretch!important;
    width:100%!important;
  }
}

/* Grid statistik mengikuti breakpoint yang sama pada semua tema. */
@media(max-width:980px){
  body.app-shell .stat-grid.compact-stats,
  body.app-shell .wa-one-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* HP: tetap sama antar tema, tetapi tinggi boleh menyesuaikan isi. */
@media(max-width:760px){
  body.app-shell{
    --fns244-hero-pad:22px;
  }
  body.app-shell .wa-one-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
  }
  body.app-shell .wa-one-hero > div:not(.hero-icon){
    width:100%!important;
  }
  body.app-shell .wa-one-hero > .wa-status-pill{
    width:100%!important;
    min-width:0!important;
  }
  body.app-shell .v222-wa-link-btn{
    width:100%!important;
    margin:10px 0 0!important;
  }
  body.app-shell .wa-one-nav a{
    width:100%!important;
  }
  body.app-shell .stat-grid.compact-stats,
  body.app-shell .wa-one-stats{
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
  }
  body.app-shell .stat-grid.compact-stats > .stat-card,
  body.app-shell .wa-one-stats > .stat-card{
    height:auto!important;
    min-height:var(--fns244-stat-height)!important;
    max-height:none!important;
  }
  body.app-shell :is(
    .v221-hero,.v223-role-hero,.v224-stock-hero,.v225-inv-hero,.v226-hero
  ){
    flex-direction:column!important;
    align-items:flex-start!important;
    padding:22px!important;
  }
}
/* === END FNS V244 === */


/* =========================================================
   FNS V245 COMPACT STATS NO CLIP + TRUE THEME PARITY
   Memperbaiki angka/nilai statistik yang terpotong pada mode gelap.
   Light dan dark memakai struktur, ukuran minimum, padding, serta
   posisi teks yang sama. Perbedaannya hanya palet warna.
   ========================================================= */

body.app-shell{
  --fns245-stat-min-height:104px;
  --fns245-stat-padding-y:14px;
  --fns245-stat-padding-x:16px;
  --fns245-stat-gap:9px;
}

/*
  V244 menggunakan tinggi tetap + overflow hidden.
  Pada zoom browser tertentu, font menjadi lebih tinggi dan nilai jatuh
  melewati batas kartu. V245 memakai baris grid otomatis dengan tinggi
  minimum sehingga tidak ada teks yang dipotong.
*/
body.app-shell .stat-grid.compact-stats,
body.app-shell .wa-one-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:minmax(var(--fns245-stat-min-height),auto)!important;
  align-items:stretch!important;
  align-content:start!important;
  gap:12px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  margin:0 0 18px!important;
  padding:0!important;
  box-sizing:border-box!important;
}

body.app-shell .stat-grid.compact-stats > .stat-card,
body.app-shell .wa-one-stats > .stat-card{
  position:relative!important;
  isolation:isolate!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:100%!important;
  height:auto!important;
  min-height:var(--fns245-stat-min-height)!important;
  max-height:none!important;
  margin:0!important;
  padding:var(--fns245-stat-padding-y) var(--fns245-stat-padding-x)!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  align-items:start!important;
  justify-content:stretch!important;
  gap:var(--fns245-stat-gap)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* Cahaya hover V241 tidak boleh ikut menjadi item layout. */
body.app-shell .stat-grid.compact-stats > .stat-card > .fns241-card-light,
body.app-shell .wa-one-stats > .stat-card > .fns241-card-light{
  display:none!important;
}

/* Semua isi dikembalikan ke alur normal dan selalu terlihat. */
body.app-shell .stat-grid.compact-stats > .stat-card > :not(.fns241-card-light),
body.app-shell .wa-one-stats > .stat-card > :not(.fns241-card-light){
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  translate:none!important;
  transform:none!important;
  scale:1!important;
  filter:none!important;
  clip:auto!important;
  clip-path:none!important;
}

body.app-shell .stat-grid.compact-stats > .stat-card > span,
body.app-shell .wa-one-stats > .stat-card > span{
  align-self:start!important;
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

body.app-shell .stat-grid.compact-stats > .stat-card > strong,
body.app-shell .wa-one-stats > .stat-card > strong{
  align-self:start!important;
  color:var(--text)!important;
  font-size:22px!important;
  font-weight:950!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Warna angka semantik; bentuk dan ukuran tetap sama pada dua tema. */
body.app-shell .stat-grid.compact-stats > .stat-card.ok > strong,
body.app-shell .wa-one-stats > .stat-card.ok > strong{
  color:var(--green)!important;
}
body.app-shell .stat-grid.compact-stats > .stat-card.primary > strong,
body.app-shell .wa-one-stats > .stat-card.primary > strong{
  color:var(--primary)!important;
}
body.app-shell .stat-grid.compact-stats > .stat-card.danger > strong,
body.app-shell .wa-one-stats > .stat-card.danger > strong{
  color:var(--red)!important;
}
body.app-shell .stat-grid.compact-stats > :is(.stat-card.warning,.stat-card.warn) > strong,
body.app-shell .wa-one-stats > :is(.stat-card.warning,.stat-card.warn) > strong{
  color:var(--orange)!important;
}

/* Kontras khusus mode gelap, tanpa mengubah geometri. */
html.dark body.app-shell .stat-grid.compact-stats > .stat-card > span,
html[data-theme="dark"] body.app-shell .stat-grid.compact-stats > .stat-card > span,
body.app-shell.dark .stat-grid.compact-stats > .stat-card > span,
body.app-shell[data-theme="dark"] .stat-grid.compact-stats > .stat-card > span,
html.dark body.app-shell .wa-one-stats > .stat-card > span,
html[data-theme="dark"] body.app-shell .wa-one-stats > .stat-card > span,
body.app-shell.dark .wa-one-stats > .stat-card > span,
body.app-shell[data-theme="dark"] .wa-one-stats > .stat-card > span{
  color:#b8c9de!important;
}

html.dark body.app-shell .stat-grid.compact-stats > .stat-card > strong,
html[data-theme="dark"] body.app-shell .stat-grid.compact-stats > .stat-card > strong,
body.app-shell.dark .stat-grid.compact-stats > .stat-card > strong,
body.app-shell[data-theme="dark"] .stat-grid.compact-stats > .stat-card > strong,
html.dark body.app-shell .wa-one-stats > .stat-card > strong,
html[data-theme="dark"] body.app-shell .wa-one-stats > .stat-card > strong,
body.app-shell.dark .wa-one-stats > .stat-card > strong,
body.app-shell[data-theme="dark"] .wa-one-stats > .stat-card > strong{
  color:#f7fbff!important;
}

html.dark body.app-shell .wa-one-stats > .stat-card.ok > strong,
html[data-theme="dark"] body.app-shell .wa-one-stats > .stat-card.ok > strong,
body.app-shell.dark .wa-one-stats > .stat-card.ok > strong,
body.app-shell[data-theme="dark"] .wa-one-stats > .stat-card.ok > strong{
  color:#6ee7a3!important;
}

html.dark body.app-shell .wa-one-stats > .stat-card.primary > strong,
html[data-theme="dark"] body.app-shell .wa-one-stats > .stat-card.primary > strong,
body.app-shell.dark .wa-one-stats > .stat-card.primary > strong,
body.app-shell[data-theme="dark"] .wa-one-stats > .stat-card.primary > strong{
  color:#67e8f9!important;
}

html.dark body.app-shell .wa-one-stats > .stat-card.danger > strong,
html[data-theme="dark"] body.app-shell .wa-one-stats > .stat-card.danger > strong,
body.app-shell.dark .wa-one-stats > .stat-card.danger > strong,
body.app-shell[data-theme="dark"] .wa-one-stats > .stat-card.danger > strong{
  color:#ff8da2!important;
}

html.dark body.app-shell .wa-one-stats > :is(.stat-card.warning,.stat-card.warn) > strong,
html[data-theme="dark"] body.app-shell .wa-one-stats > :is(.stat-card.warning,.stat-card.warn) > strong,
body.app-shell.dark .wa-one-stats > :is(.stat-card.warning,.stat-card.warn) > strong,
body.app-shell[data-theme="dark"] .wa-one-stats > :is(.stat-card.warning,.stat-card.warn) > strong{
  color:#ffd166!important;
}

/* Matikan animasi reveal yang dapat menggeser isi kartu statistik saat tema berubah. */
body.app-shell.fns241-motion-ready .stat-grid.compact-stats > .stat-card.fns241-reveal,
body.app-shell.fns241-motion-ready .wa-one-stats > .stat-card.fns241-reveal,
body.app-shell.fns241-motion-ready .stat-grid.compact-stats > .stat-card.fns241-visible,
body.app-shell.fns241-motion-ready .wa-one-stats > .stat-card.fns241-visible{
  opacity:1!important;
  translate:none!important;
  transform:none!important;
  scale:1!important;
  filter:none!important;
}

/* Tablet dan HP memakai aturan identik pada light/dark. */
@media(max-width:980px){
  body.app-shell .stat-grid.compact-stats,
  body.app-shell .wa-one-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:560px){
  body.app-shell{
    --fns245-stat-min-height:96px;
  }
  body.app-shell .stat-grid.compact-stats,
  body.app-shell .wa-one-stats{
    grid-template-columns:1fr!important;
  }
  body.app-shell .stat-grid.compact-stats > .stat-card > strong,
  body.app-shell .wa-one-stats > .stat-card > strong{
    font-size:20px!important;
  }
}
/* === END FNS V245 === */


/* =========================================================
   FNS V246 FINANCE + REPORT KPI COMPACT FIX
   Memperbaiki kartu KPI yang terlalu tinggi pada menu:
   - Kas Keuangan
   - Laporan
   Light/dark menggunakan ukuran dan bentuk yang sama.
   ========================================================= */

/* Grid Keuangan terdiri dari 3 kartu dan harus memenuhi lebar halaman. */
body.app-shell[data-module="finance"] .fns246-finance-stats,
body.app-shell.dark[data-module="finance"] .fns246-finance-stats,
html.dark body.app-shell[data-module="finance"] .fns246-finance-stats,
html[data-theme="dark"] body.app-shell[data-module="finance"] .fns246-finance-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* Grid Laporan terdiri dari 4 kartu. */
body.app-shell[data-module="reports"] .fns246-report-stats,
body.app-shell.dark[data-module="reports"] .fns246-report-stats,
html.dark body.app-shell[data-module="reports"] .fns246-report-stats,
html[data-theme="dark"] body.app-shell[data-module="reports"] .fns246-report-stats{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

/* Hapus peregangan tinggi yang menyebabkan kartu memenuhi ruang kosong layar. */
body.app-shell :is(.fns246-finance-stats,.fns246-report-stats){
  display:grid!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  align-items:start!important;
  align-content:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  gap:12px!important;
  margin:0 0 16px!important;
}

/* Bentuk KPI tetap ringkas, nilai terlihat penuh, dan konsisten dua tema. */
body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card{
  align-self:start!important;
  justify-self:stretch!important;
  width:100%!important;
  height:auto!important;
  min-height:106px!important;
  max-height:none!important;
  padding:15px 16px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  align-items:start!important;
  justify-content:stretch!important;
  gap:9px!important;
  overflow:hidden!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}

/* Efek cahaya tambahan tidak boleh menjadi item layout kartu. */
body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card > .fns241-card-light{
  display:none!important;
}

/* Isi kartu selalu berada di alur normal. */
body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card > :not(.fns241-card-light){
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  translate:none!important;
  transform:none!important;
  scale:1!important;
  filter:none!important;
  clip:auto!important;
  clip-path:none!important;
}

/* Label KPI. */
body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card > span{
  display:block!important;
  align-self:start!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Nominal KPI. */
body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card > strong{
  display:block!important;
  align-self:start!important;
  font-size:22px!important;
  font-weight:950!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}

/* Matikan reveal khusus KPI agar tidak menambah tinggi/geser saat load atau ganti tema. */
body.app-shell.fns241-motion-ready :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card.fns241-reveal,
body.app-shell.fns241-motion-ready :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card.fns241-visible{
  opacity:1!important;
  translate:none!important;
  transform:none!important;
  scale:1!important;
  filter:none!important;
}

/* Form Keuangan dan Catatan memiliki tinggi alami, bukan mengikuti KPI. */
body.app-shell[data-module="finance"] .grid.two{
  align-items:stretch!important;
}
body.app-shell[data-module="finance"] .grid.two > .card{
  min-height:0!important;
  height:auto!important;
}

/* Laporan operasional rapat dan mudah dibaca. */
body.app-shell[data-module="reports"] .report-grid{
  align-items:stretch!important;
}
body.app-shell[data-module="reports"] .report-grid > div{
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}

/* Tablet. */
@media(max-width:980px){
  body.app-shell[data-module="finance"] .fns246-finance-stats,
  body.app-shell[data-module="reports"] .fns246-report-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* HP. */
@media(max-width:560px){
  body.app-shell[data-module="finance"] .fns246-finance-stats,
  body.app-shell[data-module="reports"] .fns246-report-stats{
    grid-template-columns:1fr!important;
  }
  body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card{
    min-height:96px!important;
  }
  body.app-shell :is(.fns246-finance-stats,.fns246-report-stats) > .stat-card > strong{
    font-size:20px!important;
  }
}
/* === END FNS V246 === */


/* =========================================================
   FNS V247 TECHNICIAN + NOC PORTAL LIVE CONTENT
   Membuat Portal Teknisi & Portal NOC berisi dashboard,
   statistik, dan tabel nyata, bukan kosong.
   ========================================================= */
.ops247-hero{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:16px!important;
}
.ops247-hero-copy{
  flex:1 1 680px!important;
  min-width:0!important;
}
.ops247-hero-copy h2{
  margin:8px 0 10px!important;
  font-size:clamp(28px,2.9vw,48px)!important;
  line-height:1.08!important;
}
.ops247-hero-copy p{
  margin:0!important;
  max-width:980px!important;
}
.ops247-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:flex-end!important;
  align-items:center!important;
  flex:0 1 430px!important;
}
.ops247-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
.ops247-stats.ops247-stats-wide{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.ops247-grid{
  align-items:start!important;
  margin-bottom:16px!important;
}
.ops247-card{
  min-height:0!important;
}
.ops247-card .section-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
.ops247-card .section-title h3{
  margin:6px 0 0!important;
}
.ops247-card .table-wrap,
.ops247-card .empty-state{
  margin-top:0!important;
}
body.app-shell .ops247-card .empty-state{
  padding:14px 0!important;
}
@media (max-width: 1180px){
  .ops247-stats.ops247-stats-wide{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (max-width: 980px){
  .ops247-hero{
    flex-direction:column!important;
  }
  .ops247-hero-actions{
    justify-content:flex-start!important;
  }
  .ops247-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ops247-stats.ops247-stats-wide{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width: 560px){
  .ops247-stats,
  .ops247-stats.ops247-stats-wide{
    grid-template-columns:1fr!important;
  }
  .ops247-card .section-title{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}
/* === END FNS V247 === */


/* =========================================================
   FNS V248 TOPBAR BADGE NO CLIP
   Perbaikan: badge notifikasi bell dan chat di topbar
   tidak lagi terpotong di bagian atas/kanan.
   ========================================================= */
body.app-shell .topbar,
body.app-shell .top-actions,
body.app-shell .topbar-icon,
body.app-shell .dash48-ticket-bell,
body.app-shell .topbar-wa-notif{
  overflow:visible!important;
}

body.app-shell .topbar-icon em,
body.app-shell .dash48-ticket-bell em,
body.app-shell .topbar-wa-notif em{
  top:2px!important;
  right:2px!important;
  min-width:15px!important;
  height:15px!important;
  padding:0 3px!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1!important;
  z-index:3!important;
  box-sizing:border-box!important;
}

body.portal-customer-shell .topbar .topbar-icon em,
body.portal-customer-shell .topbar .dash48-ticket-bell em,
body.portal-customer-shell .topbar .topbar-wa-notif em,
body.portal-staff-shell .topbar .topbar-icon em,
body.portal-staff-shell .topbar .dash48-ticket-bell em,
body.portal-staff-shell .topbar .topbar-wa-notif em{
  top:2px!important;
  right:2px!important;
  min-width:15px!important;
  height:15px!important;
  padding:0 3px!important;
  border-width:1.5px!important;
  font-size:9px!important;
}

@media (max-width:430px){
  body.portal-customer-shell .topbar .topbar-icon em,
  body.portal-customer-shell .topbar .dash48-ticket-bell em,
  body.portal-customer-shell .topbar .topbar-wa-notif em,
  body.portal-staff-shell .topbar .topbar-icon em,
  body.portal-staff-shell .topbar .dash48-ticket-bell em,
  body.portal-staff-shell .topbar .topbar-wa-notif em{
    top:3px!important;
    right:3px!important;
  }
}
/* === END FNS V248 === */


/* =========================================================
   FNS V249 LANDING PAGE PREMIUM ANIMATIONS
   Landing page full efek, animasi, modern premium
   ========================================================= */
.lp249-landing{
  --lp-bg:#07111f;
  --lp-bg2:#0a1730;
  --lp-bg3:#101a44;
  --lp-card:rgba(8,20,38,.70);
  --lp-card-2:rgba(14,28,56,.82);
  --lp-line:rgba(125,180,255,.18);
  --lp-text:#f8fbff;
  --lp-muted:#b7c9e5;
  --lp-accent:#1ec8ff;
  --lp-accent-2:#8b5cf6;
  --lp-accent-3:#22c55e;
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--lp-text);
  background:
    radial-gradient(circle at 12% 12%,rgba(26,161,255,.18),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(139,92,246,.16),transparent 28%),
    linear-gradient(135deg,var(--lp-bg),var(--lp-bg2) 50%,var(--lp-bg3));
}
html:not(.dark) .lp249-landing,
html[data-theme="light"] .lp249-landing{
  --lp-bg:#eef6ff;
  --lp-bg2:#dfeeff;
  --lp-bg3:#edf2ff;
  --lp-card:rgba(255,255,255,.72);
  --lp-card-2:rgba(245,250,255,.94);
  --lp-line:rgba(93,137,219,.18);
  --lp-text:#071a36;
  --lp-muted:#5d7192;
  background:
    radial-gradient(circle at 12% 12%,rgba(26,161,255,.16),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(139,92,246,.14),transparent 28%),
    linear-gradient(135deg,var(--lp-bg),var(--lp-bg2) 55%,var(--lp-bg3));
}
.lp249-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lp249-grid{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(rgba(125,211,252,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.14) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at center,#000,transparent 80%)}
.lp249-glow,.lp249-star{position:absolute;display:block}
.lp249-glow{width:340px;height:340px;border-radius:50%;filter:blur(28px);opacity:.48;animation:lp249Float 14s ease-in-out infinite}
.lp249-glow.g1{left:-100px;top:70px;background:rgba(0,184,255,.28)}
.lp249-glow.g2{right:-90px;top:40px;background:rgba(139,92,246,.28);animation-delay:-4s}
.lp249-glow.g3{left:35%;bottom:-120px;background:rgba(34,197,94,.16);animation-delay:-8s}
.lp249-star{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 0 12px rgba(255,255,255,.7);animation:lp249Blink 4s linear infinite}
.lp249-star.s1{left:18%;top:22%}.lp249-star.s2{right:20%;top:34%;animation-delay:-1s}.lp249-star.s3{left:62%;top:58%;animation-delay:-2s}.lp249-star.s4{right:12%;bottom:22%;animation-delay:-3s}

.lp249-nav,.lp249-main,.lp249-footer{position:relative;z-index:1}
.lp249-nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(1280px,calc(100% - 24px));margin:14px auto 0;padding:16px 20px;border-radius:24px;background:linear-gradient(135deg,rgba(8,23,43,.76),rgba(16,26,62,.68));border:1px solid var(--lp-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
html:not(.dark) .lp249-nav,html[data-theme="light"] .lp249-nav{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(244,249,255,.74))}
.lp249-brand{gap:12px}.lp249-brand img,.lp249-brand .brand-mark{width:52px;height:52px;border-radius:18px}.lp249-brand b{font-size:14px;line-height:1.1}.lp249-brand span{display:block;color:var(--lp-muted);font-size:11px;margin-top:4px;font-weight:800}
.lp249-nav nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lp249-nav nav a{color:var(--lp-muted);font-weight:900;font-size:13px;transition:color .18s ease,transform .18s ease}
.lp249-nav nav a:hover{color:var(--lp-text);transform:translateY(-1px)}
.lp249-nav-actions{display:flex;align-items:center;gap:10px}
.lp249-theme-btn{height:42px;border-radius:14px;padding:0 14px;border:1px solid var(--lp-line);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:var(--lp-text);font-weight:900;display:inline-flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.08)}
html:not(.dark) .lp249-theme-btn,html[data-theme="light"] .lp249-theme-btn{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(241,248,255,.82))}

.lp249-main{width:min(1280px,calc(100% - 24px));margin:0 auto;padding:24px 0 70px}
.lp249-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:28px;align-items:center;padding:34px 0 18px}
.lp249-copy,.lp249-showcase,.lp249-feature-card,.lp249-step-card,.lp249-role-card,.lp249-cta-banner{animation:lp249SlideUp .7s cubic-bezier(.2,.8,.2,1) both}
.lp249-kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border-radius:999px;background:rgba(30,200,255,.12);border:1px solid rgba(30,200,255,.24);font-size:12px;font-weight:1000;letter-spacing:.08em;color:#9ce6ff}
html:not(.dark) .lp249-kicker,html[data-theme="light"] .lp249-kicker{color:#0a6e9d}
.lp249-kicker.small{font-size:11px;padding:8px 12px}
.lp249-copy h1{margin:18px 0 16px;font-size:clamp(38px,5.5vw,74px);line-height:1.02;letter-spacing:-.05em}
.lp249-copy h1 span{background:linear-gradient(90deg,#29d4ff,#4ca0ff 42%,#9f62ff 72%,#ff66c3);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:lp249Shine 7s linear infinite}
.lp249-copy p{max-width:730px;color:var(--lp-muted);font-size:17px;line-height:1.72;font-weight:760}
.lp249-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.lp249-mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.lp249-mini-stats article{padding:18px;border-radius:20px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.04));box-shadow:0 18px 42px rgba(0,0,0,.14)}
.lp249-mini-stats strong{display:block;font-size:28px;line-height:1.05;margin-bottom:6px}
.lp249-mini-stats span{display:block;color:var(--lp-muted);font-size:12px;font-weight:850;line-height:1.45}

.lp249-showcase{padding:22px;border-radius:32px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(17,30,64,.82));box-shadow:0 28px 90px rgba(0,0,0,.28);position:relative;overflow:hidden}
html:not(.dark) .lp249-showcase,html[data-theme="light"] .lp249-showcase{background:linear-gradient(145deg,var(--lp-card),rgba(236,244,255,.92))}
.lp249-showcase:before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.02),rgba(255,255,255,.08) 25%,transparent 25% 75%,rgba(255,255,255,.04));pointer-events:none}
.lp249-showcase-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.lp249-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--lp-line);background:rgba(255,255,255,.06);font-size:12px;font-weight:950;color:var(--lp-muted)}
.lp249-pill.live i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 8px rgba(34,197,94,.14),0 0 20px rgba(34,197,94,.7);display:inline-block;animation:lp249Pulse 1.5s ease infinite}
.lp249-dashboard-card{position:relative;min-height:500px;border-radius:28px;padding:20px;border:1px solid rgba(125,180,255,.12);background:linear-gradient(135deg,rgba(6,16,32,.82),rgba(17,31,68,.88));overflow:hidden}
html:not(.dark) .lp249-dashboard-card,html[data-theme="light"] .lp249-dashboard-card{background:linear-gradient(135deg,rgba(233,243,255,.98),rgba(225,236,255,.98))}
.lp249-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:126px;height:126px;border-radius:50%;display:grid;place-items:center;font-size:62px;box-shadow:0 0 0 16px rgba(30,200,255,.08),0 0 60px rgba(30,200,255,.22);background:radial-gradient(circle at 35% 30%,rgba(30,200,255,.22),rgba(139,92,246,.18) 60%,transparent 100%);animation:lp249Float 6s ease-in-out infinite}
.lp249-orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(130,196,255,.18);transform:translate(-50%,-50%)}
.lp249-orbit.orbit-a{width:420px;height:420px;animation:lp249Spin 18s linear infinite}
.lp249-orbit.orbit-b{width:290px;height:290px;animation:lp249SpinReverse 12s linear infinite}
.lp249-orbit:before,.lp249-orbit:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#22d3ee;box-shadow:0 0 16px currentColor}
.lp249-orbit.orbit-a:before{top:20px;left:50%;transform:translateX(-50%)}
.lp249-orbit.orbit-a:after{bottom:16px;left:24%;background:#8b5cf6}
.lp249-orbit.orbit-b:before{top:50%;left:-6px;background:#22c55e}
.lp249-orbit.orbit-b:after{top:12%;right:14%;background:#ff64c8}
.lp249-node{position:absolute;width:12px;height:12px;border-radius:50%;background:#22d3ee;box-shadow:0 0 18px rgba(34,211,238,.8);animation:lp249Pulse 2.1s ease infinite}
.lp249-node.n1{left:14%;top:26%}.lp249-node.n2{right:16%;top:24%;background:#8b5cf6;animation-delay:-.6s}.lp249-node.n3{left:24%;bottom:18%;background:#22c55e;animation-delay:-1.2s}
.lp249-metric{position:absolute;width:170px;padding:16px 16px 14px;border-radius:20px;border:1px solid var(--lp-line);background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.04));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 42px rgba(0,0,0,.12)}
html:not(.dark) .lp249-metric,html[data-theme="light"] .lp249-metric{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,248,255,.65))}
.lp249-metric label{display:block;font-size:11px;font-weight:950;color:var(--lp-muted);text-transform:uppercase;letter-spacing:.06em}.lp249-metric b{display:block;font-size:26px;line-height:1.08;margin:8px 0 6px}.lp249-metric small{display:block;color:var(--lp-muted);font-size:12px;font-weight:800}
.lp249-metric.m1{left:16px;top:18px}.lp249-metric.m2{right:16px;top:110px}.lp249-metric.m3{right:26px;bottom:26px}
.lp249-strip{position:absolute;left:18px;right:18px;bottom:18px;display:flex;gap:10px;flex-wrap:wrap}.lp249-strip span{padding:10px 13px;border-radius:999px;background:linear-gradient(90deg,rgba(30,200,255,.18),rgba(139,92,246,.18));border:1px solid rgba(125,180,255,.16);font-weight:900;font-size:12px;color:var(--lp-text)}

.lp249-section{padding:28px 0}
.lp249-band{margin-top:10px;padding:28px;border-radius:30px;border:1px solid var(--lp-line);background:linear-gradient(145deg,rgba(11,25,48,.70),rgba(12,28,58,.88));box-shadow:0 28px 70px rgba(0,0,0,.18)}
html:not(.dark) .lp249-band,html[data-theme="light"] .lp249-band{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(240,247,255,.94))}
.lp249-section-head{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:end;margin-bottom:18px}
.lp249-section-head h2,.lp249-band-copy h2,.lp249-cta-banner h2{margin:12px 0 0;font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:-.03em}
.lp249-section-head p,.lp249-band-copy p,.lp249-role-card p,.lp249-cta-banner p{color:var(--lp-muted);line-height:1.72;font-size:14px;font-weight:760}
.lp249-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lp249-feature-card{padding:22px;border-radius:24px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.03));box-shadow:0 18px 50px rgba(0,0,0,.14);position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.lp249-feature-card:before{content:"";position:absolute;inset:-25% auto auto -20%;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.05)}
.lp249-feature-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.20);border-color:rgba(30,200,255,.26)}
.lp249-feature-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:26px;margin-bottom:14px;background:linear-gradient(135deg,#1f8fff,#8b5cf6);box-shadow:0 12px 28px rgba(37,99,235,.24)}
.lp249-feature-card b{display:block;font-size:20px;line-height:1.15;margin-bottom:10px}.lp249-feature-card p{color:var(--lp-muted);font-size:13px;line-height:1.66;min-height:64px}.lp249-feature-card span{display:inline-flex;margin-top:12px;padding:8px 11px;border-radius:999px;background:rgba(30,200,255,.10);color:#92e8ff;font-size:11px;font-weight:950}
html:not(.dark) .lp249-feature-card span,html[data-theme="light"] .lp249-feature-card span{color:#0a6e9d}

.lp249-band{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;align-items:start}
.lp249-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lp249-step-card{padding:22px;border-radius:24px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.04));position:relative;overflow:hidden}
.lp249-step-card strong{display:inline-flex;width:52px;height:52px;border-radius:16px;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f8fff,#00d4ff);color:#fff;font-size:18px;font-weight:1000;box-shadow:0 16px 30px rgba(0,184,255,.22)}
.lp249-step-card b{display:block;margin-top:14px;font-size:20px;line-height:1.16}.lp249-step-card p{margin-top:9px;color:var(--lp-muted);font-size:13px;line-height:1.68}

.lp249-role-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.lp249-role-row span{padding:10px 14px;border-radius:999px;border:1px solid var(--lp-line);background:rgba(255,255,255,.08);font-weight:950;color:var(--lp-text)}
.lp249-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lp249-role-card{padding:24px;border-radius:24px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.03));box-shadow:0 18px 52px rgba(0,0,0,.12)}
.lp249-role-card b{display:block;font-size:21px;margin-bottom:10px}

.lp249-cta-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:28px;border-radius:30px;border:1px solid var(--lp-line);background:linear-gradient(135deg,rgba(9,30,58,.88),rgba(14,31,74,.92),rgba(46,18,92,.84));box-shadow:0 28px 78px rgba(0,0,0,.22)}
html:not(.dark) .lp249-cta-banner,html[data-theme="light"] .lp249-cta-banner{background:linear-gradient(135deg,rgba(244,249,255,.98),rgba(233,241,255,.98),rgba(244,239,255,.96))}
.lp249-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.lp249-footer{text-align:center;padding:0 18px 40px;color:var(--lp-muted);font-size:13px;font-weight:800}

@keyframes lp249Float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(8px)}}
@keyframes lp249Pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.7}}
@keyframes lp249Blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes lp249Spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lp249SpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}
@keyframes lp249Shine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes lp249SlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:1180px){
  .lp249-hero,.lp249-band{grid-template-columns:1fr}
  .lp249-section-head{grid-template-columns:1fr}
  .lp249-mini-stats{grid-template-columns:repeat(2,1fr)}
  .lp249-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp249-role-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  .lp249-nav{position:relative;flex-wrap:wrap}
  .lp249-nav nav{order:3;width:100%;justify-content:flex-start}
  .lp249-showcase{padding:18px}
  .lp249-dashboard-card{min-height:420px}
  .lp249-metric{width:150px}
  .lp249-band{padding:20px}
  .lp249-steps{grid-template-columns:1fr}
  .lp249-cta-banner{grid-template-columns:1fr}
  .lp249-cta-actions{justify-content:flex-start}
}
@media (max-width:680px){
  .lp249-main{width:min(100% - 16px,1280px)}
  .lp249-nav{width:min(100% - 16px,1280px);padding:14px 16px;border-radius:22px}
  .lp249-nav nav{gap:12px}
  .lp249-nav nav a{font-size:12px}
  .lp249-copy h1{font-size:34px}
  .lp249-copy p{font-size:14px}
  .lp249-mini-stats,.lp249-feature-grid{grid-template-columns:1fr}
  .lp249-dashboard-card{min-height:380px}
  .lp249-core{width:96px;height:96px;font-size:46px}
  .lp249-orbit.orbit-a{width:300px;height:300px}
  .lp249-orbit.orbit-b{width:220px;height:220px}
  .lp249-metric{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%;margin-top:12px}
  .lp249-strip{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px}
  .lp249-role-row span{font-size:12px}
}
/* === END FNS V249 === */


/* =========================================================
   FNS V250 LANDING PAGE ULTRA PREMIUM
   Scroll reveal, counters, packages, testimonial slider,
   premium highlights, interactive glow, and scroll progress.
   ========================================================= */
.lp250-ultra{scroll-behavior:smooth}
.lp250-scroll-progress{position:fixed;z-index:2147483000;left:0;right:0;top:0;height:3px;pointer-events:none;background:transparent}
.lp250-scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#00d4ff,#2478ff,#8b5cf6,#ff63c9);box-shadow:0 0 18px rgba(0,212,255,.65);will-change:transform}
.lp250-backtop{position:fixed;z-index:10000;right:22px;bottom:22px;width:48px;height:48px;border:1px solid rgba(125,180,255,.24);border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(21,86,210,.94),rgba(116,56,255,.94));color:#fff;font-size:23px;font-weight:1000;box-shadow:0 18px 38px rgba(13,35,89,.28);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);transition:.25s ease}
.lp250-backtop.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lp250-backtop:hover{transform:translateY(-3px) scale(1.03)}

.lp250-reveal{opacity:0;transform:translateY(24px) scale(.985);filter:saturate(.88);transition:opacity .68s cubic-bezier(.2,.8,.2,1) var(--lp250-delay,0ms),transform .68s cubic-bezier(.2,.8,.2,1) var(--lp250-delay,0ms),filter .68s ease var(--lp250-delay,0ms)}
.lp250-reveal.is-visible{opacity:1;transform:translateY(0) scale(1);filter:saturate(1)}

.lp250-trustbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:14px;margin:4px 0 20px;border:1px solid var(--lp-line);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 18px 46px rgba(0,0,0,.12);backdrop-filter:blur(12px)}
html:not(.dark) .lp250-trustbar,html[data-theme="light"] .lp250-trustbar{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(241,247,255,.72))}
.lp250-trustbar div{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:8px 10px;border-radius:14px;color:var(--lp-text);font-weight:900;font-size:12px}
.lp250-trustbar i{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(34,197,94,.15);color:#4ade80;font-style:normal;font-weight:1000}

.lp250-adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp250-adv-card{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;align-items:start;padding:22px;border-radius:24px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.035));box-shadow:0 18px 48px rgba(0,0,0,.12);overflow:hidden;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.lp250-adv-card:hover{transform:translateY(-5px);border-color:rgba(30,200,255,.32);box-shadow:0 26px 58px rgba(0,0,0,.18)}
.lp250-adv-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#168bff,#00d4ff 48%,#8b5cf6);box-shadow:0 16px 32px rgba(37,99,235,.24)}
.lp250-adv-card b{display:block;font-size:20px;line-height:1.18;margin:4px 0 8px}
.lp250-adv-card p{margin:0;color:var(--lp-muted);font-size:13px;line-height:1.65;font-weight:750}

.lp250-pricing-section{position:relative}
.lp250-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.lp250-plan-card{position:relative;display:flex;flex-direction:column;min-height:100%;padding:26px;border-radius:28px;border:1px solid var(--lp-line);background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.035));box-shadow:0 20px 60px rgba(0,0,0,.14);overflow:hidden;transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease}
.lp250-plan-card:before{content:"";position:absolute;width:220px;height:220px;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(30,200,255,.18),transparent 70%);pointer-events:none}
.lp250-plan-card.featured{transform:translateY(-9px);border-color:rgba(78,171,255,.52);background:linear-gradient(145deg,rgba(14,43,82,.94),rgba(33,27,83,.90));box-shadow:0 32px 82px rgba(33,74,180,.26),0 0 0 1px rgba(30,200,255,.08)}
html:not(.dark) .lp250-plan-card.featured,html[data-theme="light"] .lp250-plan-card.featured{background:linear-gradient(145deg,rgba(238,248,255,.98),rgba(241,238,255,.98))}
.lp250-plan-card:hover{transform:translateY(-7px);border-color:rgba(30,200,255,.36);box-shadow:0 30px 72px rgba(0,0,0,.20)}
.lp250-plan-card.featured:hover{transform:translateY(-13px)}
.lp250-popular{position:absolute;right:18px;top:18px;padding:8px 11px;border-radius:999px;background:linear-gradient(90deg,#1d8cff,#8b5cf6);color:#fff;font-size:10px;font-weight:1000;letter-spacing:.04em;box-shadow:0 10px 22px rgba(37,99,235,.24)}
.lp250-plan-tag{display:inline-flex;align-self:flex-start;padding:8px 11px;border-radius:999px;border:1px solid rgba(30,200,255,.22);background:rgba(30,200,255,.10);color:#8fe8ff;font-size:10px;font-weight:1000;letter-spacing:.06em;text-transform:uppercase}
html:not(.dark) .lp250-plan-tag,html[data-theme="light"] .lp250-plan-tag{color:#08769f}
.lp250-plan-card h3{margin:18px 0 10px;font-size:28px;line-height:1.08}
.lp250-plan-card>p{color:var(--lp-muted);font-size:13px;line-height:1.66;min-height:66px}
.lp250-plan-price{display:grid;gap:5px;margin:18px 0;padding:16px 0;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)}
.lp250-plan-price strong{font-size:32px;line-height:1.05;background:linear-gradient(90deg,#25cfff,#4a90ff,#a062ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp250-plan-price span{color:var(--lp-muted);font-size:11px;font-weight:850}
.lp250-plan-card ul{display:grid;gap:11px;margin:0 0 22px;padding:0;list-style:none;flex:1}
.lp250-plan-card li{display:flex;align-items:flex-start;gap:10px;color:var(--lp-muted);font-size:13px;line-height:1.45;font-weight:800}
.lp250-plan-card li i{display:grid;place-items:center;width:21px;height:21px;flex:0 0 21px;border-radius:50%;background:rgba(34,197,94,.14);color:#4ade80;font-style:normal;font-weight:1000}
.lp250-plan-card .btn{width:100%;min-height:48px}

.lp250-testimonial-shell{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 54px;gap:14px;align-items:center;padding:24px;border-radius:30px;border:1px solid var(--lp-line);background:linear-gradient(145deg,rgba(9,25,50,.80),rgba(28,24,72,.78));box-shadow:0 24px 74px rgba(0,0,0,.20);overflow:hidden}
html:not(.dark) .lp250-testimonial-shell,html[data-theme="light"] .lp250-testimonial-shell{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(240,244,255,.92))}
.lp250-testimonial-shell:before{content:"";position:absolute;left:-100px;top:-130px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(30,200,255,.18),transparent 70%)}
.lp250-testimonial-viewport{position:relative;min-height:330px}
.lp250-testimonial-slide{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:28px 60px;border-radius:24px;border:1px solid rgba(125,180,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));opacity:0;visibility:hidden;transform:translateX(36px) scale(.97);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility .5s ease}
.lp250-testimonial-slide.is-active{position:relative;opacity:1;visibility:visible;transform:translateX(0) scale(1)}
.lp250-quote-mark{position:absolute;left:24px;top:7px;font-size:92px;line-height:1;color:rgba(30,200,255,.18);font-family:Georgia,serif}
.lp250-testimonial-icon{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;margin:0 auto 12px;font-size:34px;background:linear-gradient(135deg,#148fff,#00d4ff 52%,#8b5cf6);box-shadow:0 18px 36px rgba(37,99,235,.26)}
.lp250-stars{color:#fbbf24;letter-spacing:.16em;font-size:14px;margin-bottom:12px}
.lp250-testimonial-slide blockquote{max-width:820px;margin:0 auto;color:var(--lp-text);font-size:clamp(18px,2vw,25px);line-height:1.58;font-weight:800}
.lp250-testimonial-person{display:grid;gap:4px;margin-top:20px}.lp250-testimonial-person b{font-size:17px}.lp250-testimonial-person span{color:var(--lp-muted);font-size:12px;font-weight:900}
.lp250-slider-btn{position:relative;z-index:2;width:50px;height:50px;border-radius:17px;border:1px solid var(--lp-line);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:var(--lp-text);font-size:22px;font-weight:1000;cursor:pointer;transition:.2s ease}
.lp250-slider-btn:hover{transform:translateY(-2px);border-color:rgba(30,200,255,.34);background:linear-gradient(135deg,#168bff,#8b5cf6);color:#fff}
.lp250-slider-dots{grid-column:1/-1;display:flex;justify-content:center;gap:8px;margin-top:2px}
.lp250-slider-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(150,175,211,.34);cursor:pointer;transition:.25s ease}
.lp250-slider-dots button.is-active{width:32px;background:linear-gradient(90deg,#00d4ff,#8b5cf6)}

.lp250-hover-card{isolation:isolate}
.lp250-pointer-glow{position:absolute!important;z-index:-1!important;left:var(--lp250-x,50%)!important;top:var(--lp250-y,50%)!important;width:220px!important;height:220px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;background:radial-gradient(circle,rgba(30,200,255,.18),rgba(139,92,246,.06) 48%,transparent 72%)!important;opacity:0!important;pointer-events:none!important;transition:opacity .24s ease!important}
.lp250-hover-card:hover>.lp250-pointer-glow{opacity:1!important}
.lp249-showcase{transform:perspective(1100px) rotateX(var(--lp250-tilt-x,0deg)) rotateY(var(--lp250-tilt-y,0deg));transition:transform .22s ease,box-shadow .22s ease}
.lp249-showcase:hover{box-shadow:0 36px 100px rgba(0,0,0,.32)}

@media(max-width:1100px){
  .lp250-trustbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp250-adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp250-plan-grid{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
  .lp250-plan-card.featured{transform:none}
  .lp250-plan-card.featured:hover{transform:translateY(-7px)}
}
@media(max-width:760px){
  .lp250-trustbar{grid-template-columns:1fr 1fr}
  .lp250-adv-grid{grid-template-columns:1fr}
  .lp250-testimonial-shell{grid-template-columns:1fr;padding:16px}
  .lp250-testimonial-viewport{min-height:390px}
  .lp250-testimonial-slide{padding:26px 18px}
  .lp250-slider-btn{position:absolute;bottom:20px;width:43px;height:43px}
  .lp250-slider-btn.prev{left:20px}.lp250-slider-btn.next{right:20px}
  .lp250-slider-dots{padding:10px 58px 0}
  .lp250-backtop{right:14px;bottom:14px}
}
@media(max-width:480px){
  .lp250-trustbar{grid-template-columns:1fr}
  .lp250-adv-card{grid-template-columns:54px minmax(0,1fr);padding:18px}
  .lp250-adv-icon{width:54px;height:54px;border-radius:17px;font-size:24px}
  .lp250-plan-card{padding:21px}
  .lp250-testimonial-viewport{min-height:430px}
}
@media(prefers-reduced-motion:reduce){
  .lp250-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .lp250-backtop,.lp250-testimonial-slide,.lp249-showcase{transition:none!important}
}
/* === END FNS V250 === */


/* =========================================================
   FNS V251 LANDING NEON SPECTRUM MOTION
   Landing page berwarna, neon, glass, dan full animasi
   mengikuti kualitas visual halaman login premium.
   ========================================================= */
.lp251-spectrum{
  --lp251-cyan:#23d7ff;
  --lp251-blue:#1f7fff;
  --lp251-purple:#7c4dff;
  --lp251-pink:#f34dff;
  --lp251-green:#24dc8f;
  --lp251-gold:#ffbf3f;
  background:
    radial-gradient(circle at 0% 10%,rgba(0,210,255,.18),transparent 26%),
    radial-gradient(circle at 96% 4%,rgba(124,77,255,.24),transparent 28%),
    radial-gradient(circle at 55% 92%,rgba(243,77,255,.11),transparent 34%),
    linear-gradient(135deg,#020a18 0%,#06132d 46%,#111047 100%)!important;
}
html:not(.dark) .lp251-spectrum,
html[data-theme="light"] .lp251-spectrum{
  background:
    radial-gradient(circle at 0% 10%,rgba(0,180,255,.18),transparent 28%),
    radial-gradient(circle at 96% 4%,rgba(124,77,255,.18),transparent 30%),
    radial-gradient(circle at 55% 92%,rgba(243,77,255,.10),transparent 36%),
    linear-gradient(135deg,#f4fbff 0%,#e6f3ff 46%,#eee9ff 100%)!important;
}
.lp251-spectrum .lp249-grid{
  background-size:48px 48px!important;
  opacity:.28!important;
  animation:lp251GridDrift 18s linear infinite;
}
.lp251-aurora{
  position:absolute;
  display:block;
  width:46vw;
  height:46vw;
  min-width:420px;
  min-height:420px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.20;
  mix-blend-mode:screen;
  animation:lp251Aurora 17s ease-in-out infinite alternate;
}
.lp251-aurora.a1{left:-18vw;top:2vh;background:radial-gradient(circle,var(--lp251-cyan),transparent 66%)}
.lp251-aurora.a2{right:-20vw;top:5vh;background:radial-gradient(circle,var(--lp251-purple),transparent 66%);animation-delay:-6s}
.lp251-aurora.a3{left:24vw;bottom:-28vw;background:radial-gradient(circle,var(--lp251-pink),transparent 68%);animation-delay:-11s}
.lp251-beam{
  position:absolute;
  width:260px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),var(--lp251-purple),transparent);
  box-shadow:0 0 18px var(--lp251-purple);
  transform:rotate(-34deg);
  opacity:0;
  animation:lp251Meteor 9s ease-in-out infinite;
}
.lp251-beam.b1{right:8%;top:12%}
.lp251-beam.b2{left:42%;top:55%;animation-delay:-5s}

.lp251-spectrum .lp249-nav{
  background:linear-gradient(135deg,rgba(4,17,39,.78),rgba(17,22,70,.72))!important;
  border-color:rgba(89,202,255,.24)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.28),0 0 45px rgba(35,215,255,.07)!important;
}
html:not(.dark) .lp251-spectrum .lp249-nav,
html[data-theme="light"] .lp251-spectrum .lp249-nav{
  background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(243,247,255,.78))!important;
}
.lp251-spectrum .lp249-nav:after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--lp251-cyan),var(--lp251-purple),transparent);
  background-size:220% 100%;
  animation:lp251BorderFlow 6s linear infinite;
}
.lp251-spectrum .lp249-brand b{
  background:linear-gradient(90deg,#fff,var(--lp251-cyan),var(--lp251-purple),var(--lp251-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:180% 100%;animation:lp251TextFlow 7s ease infinite;
}
html:not(.dark) .lp251-spectrum .lp249-brand b,
html[data-theme="light"] .lp251-spectrum .lp249-brand b{background:linear-gradient(90deg,#0a1b35,#009ee8,#6a4cff,#cf37ff);-webkit-background-clip:text;background-clip:text;color:transparent}

.lp251-spectrum .lp249-kicker{
  background:linear-gradient(90deg,rgba(35,215,255,.13),rgba(124,77,255,.12),rgba(243,77,255,.10))!important;
  border-color:rgba(84,203,255,.28)!important;
  box-shadow:0 10px 32px rgba(35,215,255,.08),inset 0 1px 0 rgba(255,255,255,.05);
}
.lp251-spectrum .lp249-copy h1 span{
  background:linear-gradient(90deg,#23d7ff,#1f7fff,#7c4dff,#f34dff,#23d7ff)!important;
  background-size:240% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  animation:lp251TextFlow 6s ease infinite!important;
  filter:drop-shadow(0 0 28px rgba(74,146,255,.16));
}
.lp251-spectrum .lp249-cta-row .btn.primary,
.lp251-spectrum .lp249-nav .btn.primary,
.lp251-spectrum .lp250-plan-card.featured .btn.primary{
  background:linear-gradient(100deg,var(--lp251-blue),var(--lp251-cyan),var(--lp251-purple),var(--lp251-pink))!important;
  background-size:260% 100%!important;
  animation:lp251ButtonFlow 5s ease infinite!important;
  box-shadow:0 16px 38px rgba(31,127,255,.28),0 0 30px rgba(124,77,255,.12)!important;
}
.lp251-spectrum .btn.glass{
  border-color:rgba(95,197,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.12);
}

.lp251-spectrum .lp249-mini-stats article,
.lp251-spectrum .lp249-feature-card,
.lp251-spectrum .lp250-adv-card,
.lp251-spectrum .lp249-step-card,
.lp251-spectrum .lp249-role-card,
.lp251-spectrum .lp250-plan-card,
.lp251-spectrum .lp250-testimonial-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-color:rgba(99,185,255,.20)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(124,77,255,.10),transparent 34%),
    linear-gradient(145deg,rgba(10,28,56,.86),rgba(7,19,40,.78))!important;
  box-shadow:0 22px 58px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html:not(.dark) .lp251-spectrum :is(.lp249-mini-stats article,.lp249-feature-card,.lp250-adv-card,.lp249-step-card,.lp249-role-card,.lp250-plan-card,.lp250-testimonial-card),
html[data-theme="light"] .lp251-spectrum :is(.lp249-mini-stats article,.lp249-feature-card,.lp250-adv-card,.lp249-step-card,.lp249-role-card,.lp250-plan-card,.lp250-testimonial-card){
  background:
    radial-gradient(circle at 100% 0%,rgba(124,77,255,.09),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.90),rgba(240,247,255,.82))!important;
}
.lp251-spectrum :is(.lp249-mini-stats article,.lp249-feature-card,.lp250-adv-card,.lp249-step-card,.lp249-role-card,.lp250-plan-card,.lp250-testimonial-card):before{
  content:"";
  position:absolute;
  z-index:-1;
  width:180px;height:180px;border-radius:50%;
  right:-95px;top:-95px;
  background:radial-gradient(circle,rgba(35,215,255,.13),rgba(124,77,255,.07),transparent 70%);
  transition:transform .35s ease,opacity .35s ease;
}
.lp251-spectrum :is(.lp249-mini-stats article,.lp249-feature-card,.lp250-adv-card,.lp249-step-card,.lp249-role-card,.lp250-plan-card,.lp250-testimonial-card):hover:before{transform:scale(1.45);opacity:1}
.lp251-spectrum :is(.lp249-mini-stats article,.lp249-feature-card,.lp250-adv-card,.lp249-step-card,.lp249-role-card,.lp250-plan-card,.lp250-testimonial-card):after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(125deg,rgba(35,215,255,.60),transparent 28%,transparent 68%,rgba(243,77,255,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.30;pointer-events:none;
}

.lp251-showcase{
  border-color:rgba(80,198,255,.28)!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(35,215,255,.14),transparent 38%),
    radial-gradient(circle at 100% 100%,rgba(243,77,255,.11),transparent 38%),
    linear-gradient(145deg,rgba(7,23,48,.93),rgba(14,18,60,.90))!important;
  box-shadow:0 36px 110px rgba(0,0,0,.38),0 0 55px rgba(49,112,255,.10)!important;
}
html:not(.dark) .lp251-showcase,html[data-theme="light"] .lp251-showcase{
  background:
    radial-gradient(circle at 20% 0%,rgba(35,215,255,.14),transparent 38%),
    radial-gradient(circle at 100% 100%,rgba(243,77,255,.10),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(232,241,255,.92))!important;
}
.lp251-dashboard-card{
  background:
    radial-gradient(circle at 50% 45%,rgba(35,215,255,.11),transparent 30%),
    linear-gradient(135deg,rgba(5,20,46,.94),rgba(15,20,70,.94))!important;
  border-color:rgba(76,195,255,.25)!important;
  box-shadow:inset 0 0 80px rgba(20,98,255,.08),0 24px 70px rgba(0,0,0,.24)!important;
}
html:not(.dark) .lp251-dashboard-card,html[data-theme="light"] .lp251-dashboard-card{background:linear-gradient(135deg,rgba(228,241,255,.98),rgba(232,229,255,.96))!important}
.lp251-scanline{position:absolute;inset:-40% 0 auto;height:32%;background:linear-gradient(180deg,transparent,rgba(35,215,255,.08),transparent);animation:lp251Scan 7s linear infinite;pointer-events:none}
.lp251-radar-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(35,215,255,.15);transform:translate(-50%,-50%);animation:lp251Radar 4.6s ease-out infinite}
.lp251-radar-ring.r1{width:170px;height:170px}.lp251-radar-ring.r2{width:170px;height:170px;animation-delay:-2.3s}
.lp251-spectrum .lp249-core{
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.18),rgba(35,215,255,.18) 26%,rgba(124,77,255,.22) 64%,transparent 100%)!important;
  box-shadow:0 0 0 18px rgba(35,215,255,.06),0 0 70px rgba(35,215,255,.28),inset 0 0 30px rgba(255,255,255,.06)!important;
}
.lp251-spectrum .lp249-orbit{border-color:rgba(72,207,255,.24)!important;box-shadow:inset 0 0 28px rgba(124,77,255,.05)}
.lp251-spectrum .lp249-metric{
  background:linear-gradient(145deg,rgba(10,31,64,.82),rgba(15,20,58,.72))!important;
  border-color:rgba(86,200,255,.24)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
  animation:lp251MetricFloat 5s ease-in-out infinite;
}
.lp251-spectrum .lp249-metric.m2{animation-delay:-1.5s}.lp251-spectrum .lp249-metric.m3{animation-delay:-3s}
html:not(.dark) .lp251-spectrum .lp249-metric,html[data-theme="light"] .lp251-spectrum .lp249-metric{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(238,244,255,.76))!important}
.lp251-spectrum .lp249-strip span{background:linear-gradient(90deg,rgba(35,215,255,.15),rgba(124,77,255,.14),rgba(243,77,255,.12))!important;border-color:rgba(87,200,255,.20)!important}

.lp251-spectrum .lp249-feature-icon,
.lp251-spectrum .lp250-adv-icon,
.lp251-spectrum .lp249-step-card strong{
  background:linear-gradient(135deg,var(--lp251-blue),var(--lp251-cyan) 44%,var(--lp251-purple),var(--lp251-pink))!important;
  background-size:220% 100%!important;
  animation:lp251ButtonFlow 6s ease infinite!important;
  box-shadow:0 14px 34px rgba(35,127,255,.28),0 0 25px rgba(124,77,255,.14)!important;
}
.lp251-spectrum .lp249-band,
.lp251-spectrum .lp249-cta-banner{
  border-color:rgba(82,192,255,.22)!important;
  background:
    radial-gradient(circle at 0 0,rgba(35,215,255,.10),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(243,77,255,.08),transparent 35%),
    linear-gradient(135deg,rgba(7,24,49,.90),rgba(16,20,65,.88))!important;
  box-shadow:0 30px 85px rgba(0,0,0,.28)!important;
}
html:not(.dark) .lp251-spectrum :is(.lp249-band,.lp249-cta-banner),html[data-theme="light"] .lp251-spectrum :is(.lp249-band,.lp249-cta-banner){background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(236,244,255,.92),rgba(244,237,255,.90))!important}
.lp251-spectrum .lp249-role-row span,
.lp251-spectrum .lp250-trustbar div{
  background:linear-gradient(135deg,rgba(35,215,255,.09),rgba(124,77,255,.08))!important;
  border-color:rgba(91,195,255,.20)!important;
}
.lp251-spectrum .lp250-plan-card.featured{
  transform:translateY(-8px);
  border-color:rgba(35,215,255,.45)!important;
  box-shadow:0 32px 80px rgba(0,0,0,.30),0 0 42px rgba(35,215,255,.10)!important;
}

@keyframes lp251Aurora{0%{transform:translate3d(0,0,0) scale(.92)}100%{transform:translate3d(8vw,8vh,0) scale(1.12)}}
@keyframes lp251Meteor{0%,68%{transform:translate3d(180px,-130px,0) rotate(-34deg);opacity:0}73%{opacity:.8}100%{transform:translate3d(-520px,380px,0) rotate(-34deg);opacity:0}}
@keyframes lp251GridDrift{to{background-position:48px 48px}}
@keyframes lp251BorderFlow{to{background-position:220% 0}}
@keyframes lp251TextFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes lp251ButtonFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes lp251Scan{0%{top:-38%}100%{top:108%}}
@keyframes lp251Radar{0%{transform:translate(-50%,-50%) scale(.45);opacity:.75}100%{transform:translate(-50%,-50%) scale(2.7);opacity:0}}
@keyframes lp251MetricFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}

@media(max-width:880px){
  .lp251-spectrum .lp249-nav{box-shadow:0 14px 36px rgba(0,0,0,.18)!important}
  .lp251-aurora{filter:blur(90px);opacity:.14}
  .lp251-beam{display:none}
}
@media(max-width:680px){
  .lp251-spectrum .lp249-copy h1 span{filter:none}
  .lp251-spectrum .lp249-metric{animation:none}
  .lp251-scanline,.lp251-radar-ring{display:none}
}
@media(prefers-reduced-motion:reduce){
  .lp251-spectrum *, .lp251-spectrum *:before, .lp251-spectrum *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
/* === END FNS V251 === */


/* =========================================================
   FNS V252 LANDING SALES TOTAL REVAMP
   Full promosi jualan internet, colorful, modern premium
   ========================================================= */
.lp252-sales-page{
  --s-bg:#041021;--s-bg2:#061936;--s-bg3:#16175a;--s-card:rgba(7,22,45,.74);--s-card2:rgba(10,26,53,.92);--s-line:rgba(109,179,255,.18);--s-text:#f8fbff;--s-muted:#b8cae6;
  min-height:100vh;color:var(--s-text);overflow-x:hidden;position:relative;
  background:radial-gradient(circle at 15% 10%,rgba(0,194,255,.17),transparent 28%),radial-gradient(circle at 88% 18%,rgba(167,79,255,.18),transparent 28%),linear-gradient(135deg,var(--s-bg),var(--s-bg2) 50%,var(--s-bg3));
}
html:not(.dark) .lp252-sales-page,html[data-theme="light"] .lp252-sales-page{
  --s-bg:#eef6ff;--s-bg2:#e5f0ff;--s-bg3:#f3efff;--s-card:rgba(255,255,255,.76);--s-card2:rgba(248,251,255,.95);--s-line:rgba(95,139,219,.18);--s-text:#081b39;--s-muted:#5f7495;
  background:radial-gradient(circle at 15% 10%,rgba(0,194,255,.12),transparent 28%),radial-gradient(circle at 88% 18%,rgba(167,79,255,.12),transparent 28%),linear-gradient(135deg,var(--s-bg),var(--s-bg2) 55%,var(--s-bg3));
}
.lp252-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.lp252-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(125,211,252,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.14) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at center,#000,transparent 84%)}
.lp252-aurora,.lp252-beam,.lp252-dot{position:absolute;display:block}.lp252-aurora{width:360px;height:360px;border-radius:50%;filter:blur(34px);opacity:.38;animation:lp252Float 13s ease-in-out infinite}.lp252-aurora.a1{left:-90px;top:70px;background:rgba(0,200,255,.38)}.lp252-aurora.a2{right:-120px;top:40px;background:rgba(168,85,247,.35);animation-delay:-4s}.lp252-aurora.a3{left:34%;bottom:-110px;background:rgba(34,197,94,.20);animation-delay:-8s}
.lp252-beam{width:2px;height:320px;background:linear-gradient(to bottom,transparent,rgba(88,197,255,.55),transparent);transform:rotate(48deg);opacity:.3;animation:lp252Beam 9s linear infinite}.lp252-beam.b1{left:20%;top:22%}.lp252-beam.b2{right:18%;top:10%;animation-delay:-4s}
.lp252-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 14px rgba(255,255,255,.7);animation:lp252Blink 4s linear infinite}.lp252-dot.d1{left:12%;top:18%}.lp252-dot.d2{left:31%;top:10%;animation-delay:-1s}.lp252-dot.d3{right:14%;top:28%;animation-delay:-2s}.lp252-dot.d4{right:22%;bottom:24%;animation-delay:-3s}

.lp252-nav,.lp252-main,.lp252-footer{position:relative;z-index:1}.lp252-nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(1320px,calc(100% - 24px));margin:14px auto 0;padding:16px 20px;border-radius:24px;border:1px solid var(--s-line);background:linear-gradient(135deg,rgba(6,21,42,.82),rgba(14,24,59,.74));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 22px 60px rgba(0,0,0,.16)}
html:not(.dark) .lp252-nav,html[data-theme="light"] .lp252-nav{background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(246,249,255,.76))}
.lp252-brand{gap:12px}.lp252-brand img,.lp252-brand .brand-mark{width:54px;height:54px;border-radius:18px}.lp252-brand b{font-size:14px;line-height:1.1}.lp252-brand span{display:block;margin-top:4px;color:var(--s-muted);font-size:11px;font-weight:850}
.lp252-nav nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.lp252-nav nav a{font-size:13px;font-weight:900;color:var(--s-muted);transition:.18s}.lp252-nav nav a:hover{color:var(--s-text);transform:translateY(-1px)}
.lp252-actions{display:flex;align-items:center;gap:10px}.lp252-theme-btn{height:42px;border-radius:14px;padding:0 14px;border:1px solid var(--s-line);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:var(--s-text);font-weight:900;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
html:not(.dark) .lp252-theme-btn,html[data-theme="light"] .lp252-theme-btn{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(242,247,255,.86))}

.lp252-main{width:min(1320px,calc(100% - 24px));margin:0 auto;padding:24px 0 70px}.lp252-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:28px;align-items:center;padding:32px 0 20px}.lp252-copy h1{margin:18px 0 14px;font-size:clamp(40px,5.8vw,78px);line-height:1.02;letter-spacing:-.05em}.lp252-copy h1 span{background:linear-gradient(90deg,#22d3ee,#3b82f6 35%,#8b5cf6 70%,#f472b6);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lp252Shine 7s linear infinite}.lp252-copy p{font-size:17px;line-height:1.74;color:var(--s-muted);max-width:720px;font-weight:760}
.lp252-kicker{display:inline-flex;align-items:center;padding:10px 15px;border-radius:999px;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.28);font-size:12px;font-weight:1000;letter-spacing:.08em;color:#9be7ff}.lp252-kicker.small{font-size:11px;padding:8px 12px}
html:not(.dark) .lp252-kicker,html[data-theme="light"] .lp252-kicker{color:#0a6f9f}
.lp252-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.lp252-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.lp252-chip-row span{padding:10px 14px;border-radius:999px;border:1px solid var(--s-line);background:rgba(255,255,255,.06);font-size:12px;font-weight:900;color:var(--s-text)}

.lp252-visual{display:flex;flex-direction:column;gap:18px}.lp252-status{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}.lp252-status span{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(22,33,87,.82),rgba(37,48,110,.62));border:1px solid var(--s-line);font-weight:900;color:var(--s-text)}.lp252-status i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 8px rgba(34,197,94,.12)}
html:not(.dark) .lp252-status span,html[data-theme="light"] .lp252-status span{background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(238,244,255,.8))}
.lp252-showcase{position:relative;min-height:560px;border-radius:36px;border:1px solid var(--s-line);background:linear-gradient(145deg,var(--s-card2),rgba(19,32,71,.92));overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.22)}
html:not(.dark) .lp252-showcase,html[data-theme="light"] .lp252-showcase{background:linear-gradient(145deg,var(--s-card2),rgba(234,242,255,.98))}
.lp252-radar{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(34,211,238,.10),transparent 40%),linear-gradient(transparent 49%,rgba(255,255,255,.03) 50%,transparent 51%),linear-gradient(90deg,transparent 49%,rgba(255,255,255,.03) 50%,transparent 51%);background-size:auto,100% 90px,90px 100%;opacity:.55}
.lp252-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(65,197,255,.24);transform:translate(-50%,-50%);animation:lp252Spin 16s linear infinite}.lp252-ring.r1{width:360px;height:360px}.lp252-ring.r2{width:250px;height:250px;animation-direction:reverse}.lp252-ring.r3{width:150px;height:150px;animation-duration:10s}
.lp252-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;display:grid;place-items:center;font-size:66px;background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.28),rgba(139,92,246,.20) 60%,rgba(3,10,25,.1));box-shadow:0 0 0 20px rgba(34,211,238,.06),0 0 90px rgba(34,211,238,.28);animation:lp252Float 6s ease-in-out infinite}
.lp252-satellites span{position:absolute;width:14px;height:14px;border-radius:50%;box-shadow:0 0 20px currentColor;animation:lp252Pulse 2s ease infinite}.lp252-satellites span:nth-child(1){left:18%;top:28%;background:#22d3ee;color:#22d3ee}.lp252-satellites span:nth-child(2){right:18%;top:34%;background:#8b5cf6;color:#8b5cf6;animation-delay:-.5s}.lp252-satellites span:nth-child(3){left:25%;bottom:18%;background:#f59e0b;color:#f59e0b;animation-delay:-1s}.lp252-satellites span:nth-child(4){right:22%;bottom:20%;background:#22c55e;color:#22c55e;animation-delay:-1.5s}
.lp252-float-card{position:absolute;width:190px;padding:18px 16px;border-radius:22px;border:1px solid var(--s-line);background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:0 18px 40px rgba(0,0,0,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:lp252CardFloat 6s ease-in-out infinite}
html:not(.dark) .lp252-float-card,html[data-theme="light"] .lp252-float-card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(243,248,255,.70))}
.lp252-float-card small{display:block;color:var(--s-muted);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.lp252-float-card b{display:block;margin:8px 0 6px;font-size:24px;line-height:1.08}.lp252-float-card span{display:block;color:var(--s-muted);font-size:12px;font-weight:800}
.lp252-float-card.c1{left:18px;top:24px}.lp252-float-card.c2{right:24px;top:145px;animation-delay:-2s}.lp252-float-card.c3{right:34px;bottom:24px;animation-delay:-4s}

.lp252-section{padding:30px 0}.lp252-head{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:end;margin-bottom:18px}.lp252-head.centered{text-align:center;grid-template-columns:1fr}.lp252-head h2,.lp252-cta-banner h2{margin:12px 0 0;font-size:clamp(30px,3.2vw,50px);line-height:1.08;letter-spacing:-.04em}.lp252-head p,.lp252-benefit-card p,.lp252-step-card p,.lp252-testi-card p,.lp252-faq-item div,.lp252-cta-banner p{color:var(--s-muted);font-size:14px;line-height:1.72;font-weight:760}

.lp252-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.lp252-plan-card{position:relative;padding:24px;border-radius:28px;border:1px solid var(--s-line);background:linear-gradient(145deg,var(--s-card),rgba(255,255,255,.03));box-shadow:0 18px 56px rgba(0,0,0,.14);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}.lp252-plan-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0,0,0,.20)}.lp252-plan-card.featured{background:linear-gradient(145deg,rgba(13,30,68,.95),rgba(25,37,93,.95));border-color:rgba(34,211,238,.28)}
html:not(.dark) .lp252-plan-card,html[data-theme="light"] .lp252-plan-card{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(244,249,255,.98))}
.lp252-badge{position:absolute;top:16px;right:16px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#8b5cf6);color:#fff;font-size:11px;font-weight:1000}.lp252-speed{display:inline-flex;padding:10px 14px;border-radius:16px;background:linear-gradient(135deg,#1f8fff,#00cfff);font-size:18px;font-weight:1000;box-shadow:0 14px 30px rgba(37,99,235,.26)}.lp252-plan-card h3{margin:18px 0 8px;font-size:24px;line-height:1.1}.lp252-price{font-size:34px;font-weight:1000;line-height:1.05}.lp252-price small{font-size:14px;color:var(--s-muted);font-weight:900}.lp252-plan-card > p{margin:12px 0 14px}.lp252-plan-card ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}.lp252-plan-card li{padding-left:18px;position:relative;color:var(--s-muted);font-size:13px;font-weight:800}.lp252-plan-card li:before{content:"✓";position:absolute;left:0;top:0;color:#22c55e;font-weight:1000}

.lp252-benefit-wrap{padding-top:40px}.lp252-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lp252-benefit-card{padding:24px;border-radius:24px;border:1px solid var(--s-line);background:linear-gradient(145deg,var(--s-card),rgba(255,255,255,.03));box-shadow:0 18px 48px rgba(0,0,0,.12)}.lp252-benefit-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:28px;margin-bottom:14px;background:linear-gradient(135deg,#1ec8ff,#8b5cf6);box-shadow:0 12px 26px rgba(59,130,246,.26)}.lp252-benefit-card b{display:block;font-size:20px;margin-bottom:10px;line-height:1.15}

.lp252-process{padding-top:38px}.lp252-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.lp252-step-card{padding:24px;border-radius:24px;border:1px solid var(--s-line);background:linear-gradient(145deg,var(--s-card),rgba(255,255,255,.03));text-align:left;box-shadow:0 18px 48px rgba(0,0,0,.12)}.lp252-step-card strong{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#fff;font-size:20px;font-weight:1000;box-shadow:0 14px 30px rgba(34,211,238,.24)}.lp252-step-card b{display:block;margin:16px 0 10px;font-size:20px;line-height:1.14}

.lp252-testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lp252-testi-card{padding:24px;border-radius:24px;border:1px solid var(--s-line);background:linear-gradient(145deg,var(--s-card),rgba(255,255,255,.03));box-shadow:0 18px 48px rgba(0,0,0,.12)}.lp252-stars{font-size:18px;letter-spacing:2px;color:#fbbf24;margin-bottom:14px}.lp252-testi-card b{display:block;margin-top:14px;font-size:16px}

.lp252-faq-list{display:grid;gap:12px}.lp252-faq-item{border:1px solid var(--s-line);border-radius:22px;background:linear-gradient(145deg,var(--s-card),rgba(255,255,255,.03));padding:0 18px;box-shadow:0 18px 40px rgba(0,0,0,.10)}.lp252-faq-item summary{cursor:pointer;list-style:none;padding:18px 0;font-size:17px;font-weight:950;color:var(--s-text)}.lp252-faq-item summary::-webkit-details-marker{display:none}.lp252-faq-item div{padding:0 0 18px}

.lp252-cta-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:30px;border-radius:30px;border:1px solid var(--s-line);background:linear-gradient(135deg,rgba(8,28,54,.92),rgba(20,34,90,.88),rgba(59,20,111,.78));box-shadow:0 28px 74px rgba(0,0,0,.20)}
html:not(.dark) .lp252-cta-banner,html[data-theme="light"] .lp252-cta-banner{background:linear-gradient(135deg,rgba(245,250,255,.98),rgba(236,242,255,.98),rgba(243,237,255,.96))}.lp252-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.lp252-footer{text-align:center;padding:0 20px 40px;color:var(--s-muted);font-size:13px;font-weight:800}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
@keyframes lp252Float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(8px)}}
@keyframes lp252Spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lp252Pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.72}}
@keyframes lp252CardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lp252Beam{0%{transform:translateY(-30px) rotate(48deg);opacity:.15}50%{opacity:.35}100%{transform:translateY(30px) rotate(48deg);opacity:.15}}
@keyframes lp252Blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes lp252Shine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media (prefers-reduced-motion: reduce){.lp252-aurora,.lp252-beam,.lp252-dot,.lp252-ring,.lp252-core,.lp252-float-card,.lp252-copy h1 span{animation:none!important}.reveal{opacity:1;transform:none}}
@media (max-width:1180px){.lp252-hero,.lp252-head,.lp252-cta-banner{grid-template-columns:1fr}.lp252-plan-grid,.lp252-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lp252-step-grid,.lp252-testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.lp252-nav{position:relative;flex-wrap:wrap}.lp252-nav nav{order:3;width:100%;justify-content:flex-start}.lp252-showcase{min-height:470px}.lp252-status{justify-content:flex-start}.lp252-float-card{width:170px}.lp252-cta-actions{justify-content:flex-start}}
@media (max-width:680px){.lp252-main,.lp252-nav{width:min(100% - 16px,1320px)}.lp252-nav{padding:14px 16px}.lp252-copy h1{font-size:34px}.lp252-copy p{font-size:14px}.lp252-plan-grid,.lp252-benefit-grid,.lp252-step-grid,.lp252-testi-grid{grid-template-columns:1fr}.lp252-showcase{min-height:420px}.lp252-core{width:98px;height:98px;font-size:48px}.lp252-float-card{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%;margin-top:12px}.lp252-cta-banner{grid-template-columns:1fr}.lp252-cta-actions{justify-content:flex-start}}
/* === END FNS V252 === */


/* =========================================================
   FNS V254 LANDING TRUE DARK MODE
   Mode gelap landing promosi harus benar-benar gelap.
   Tidak ada background putih/abu terang dan seluruh teks terbaca.
   ========================================================= */

html.dark body.lp252-sales-page,
html[data-theme="dark"] body.lp252-sales-page,
body.lp252-sales-page.dark,
body.lp252-sales-page[data-theme="dark"]{
  --s-bg:#020814!important;
  --s-bg2:#061326!important;
  --s-bg3:#141044!important;
  --s-card:rgba(6,19,39,.92)!important;
  --s-card2:rgba(8,24,49,.98)!important;
  --s-line:rgba(92,174,255,.28)!important;
  --s-text:#f7fbff!important;
  --s-muted:#aec3df!important;
  color:#f7fbff!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(0,194,255,.18),transparent 30%),
    radial-gradient(circle at 88% 14%,rgba(139,92,246,.20),transparent 32%),
    radial-gradient(circle at 52% 92%,rgba(14,116,144,.12),transparent 30%),
    linear-gradient(135deg,#020814 0%,#061326 48%,#141044 100%)!important;
  background-attachment:fixed!important;
}

/* Sinkronisasi seluruh permukaan landing agar tidak ada blok terang. */
html.dark body.lp252-sales-page :is(
  .lp252-nav,
  .lp252-showcase,
  .lp252-float-card,
  .lp252-plan-card,
  .lp252-plan-card.featured,
  .lp252-benefit-card,
  .lp252-step-card,
  .lp252-testi-card,
  .lp252-faq-item,
  .lp252-cta-banner
),
html[data-theme="dark"] body.lp252-sales-page :is(
  .lp252-nav,
  .lp252-showcase,
  .lp252-float-card,
  .lp252-plan-card,
  .lp252-plan-card.featured,
  .lp252-benefit-card,
  .lp252-step-card,
  .lp252-testi-card,
  .lp252-faq-item,
  .lp252-cta-banner
),
body.lp252-sales-page.dark :is(
  .lp252-nav,
  .lp252-showcase,
  .lp252-float-card,
  .lp252-plan-card,
  .lp252-plan-card.featured,
  .lp252-benefit-card,
  .lp252-step-card,
  .lp252-testi-card,
  .lp252-faq-item,
  .lp252-cta-banner
),
body.lp252-sales-page[data-theme="dark"] :is(
  .lp252-nav,
  .lp252-showcase,
  .lp252-float-card,
  .lp252-plan-card,
  .lp252-plan-card.featured,
  .lp252-benefit-card,
  .lp252-step-card,
  .lp252-testi-card,
  .lp252-faq-item,
  .lp252-cta-banner
){
  color:#f7fbff!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(103,63,255,.10),transparent 34%),
    linear-gradient(145deg,rgba(8,26,51,.97),rgba(4,16,34,.98))!important;
  border-color:rgba(92,174,255,.26)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.30)!important;
}

/* CTA tetap gelap tetapi lebih berwarna. */
html.dark body.lp252-sales-page .lp252-cta-banner,
html[data-theme="dark"] body.lp252-sales-page .lp252-cta-banner,
body.lp252-sales-page.dark .lp252-cta-banner,
body.lp252-sales-page[data-theme="dark"] .lp252-cta-banner{
  background:
    radial-gradient(circle at 10% 0%,rgba(0,200,255,.16),transparent 36%),
    radial-gradient(circle at 92% 14%,rgba(168,85,247,.20),transparent 38%),
    linear-gradient(135deg,rgba(5,24,48,.98),rgba(13,27,70,.98),rgba(38,18,83,.94))!important;
}

/* Navigasi dan chip dark mode. */
html.dark body.lp252-sales-page :is(
  .lp252-theme-btn,
  .lp252-chip-row span,
  .lp252-status span
),
html[data-theme="dark"] body.lp252-sales-page :is(
  .lp252-theme-btn,
  .lp252-chip-row span,
  .lp252-status span
),
body.lp252-sales-page.dark :is(
  .lp252-theme-btn,
  .lp252-chip-row span,
  .lp252-status span
),
body.lp252-sales-page[data-theme="dark"] :is(
  .lp252-theme-btn,
  .lp252-chip-row span,
  .lp252-status span
){
  color:#eef7ff!important;
  background:linear-gradient(145deg,rgba(10,29,56,.96),rgba(10,22,48,.94))!important;
  border-color:rgba(92,174,255,.26)!important;
}

/* Judul, harga, label dan isi penting harus putih jelas. */
html.dark body.lp252-sales-page :is(
  h1,h2,h3,h4,
  .lp252-plan-card b,
  .lp252-price,
  .lp252-benefit-card b,
  .lp252-step-card b,
  .lp252-testi-card b,
  .lp252-faq-item summary,
  .lp252-brand b
),
html[data-theme="dark"] body.lp252-sales-page :is(
  h1,h2,h3,h4,
  .lp252-plan-card b,
  .lp252-price,
  .lp252-benefit-card b,
  .lp252-step-card b,
  .lp252-testi-card b,
  .lp252-faq-item summary,
  .lp252-brand b
),
body.lp252-sales-page.dark :is(
  h1,h2,h3,h4,
  .lp252-plan-card b,
  .lp252-price,
  .lp252-benefit-card b,
  .lp252-step-card b,
  .lp252-testi-card b,
  .lp252-faq-item summary,
  .lp252-brand b
),
body.lp252-sales-page[data-theme="dark"] :is(
  h1,h2,h3,h4,
  .lp252-plan-card b,
  .lp252-price,
  .lp252-benefit-card b,
  .lp252-step-card b,
  .lp252-testi-card b,
  .lp252-faq-item summary,
  .lp252-brand b
){
  color:#ffffff!important;
  text-shadow:0 2px 14px rgba(0,0,0,.24)!important;
}

/* Teks sekunder dibuat lebih terang dan terbaca. */
html.dark body.lp252-sales-page :is(
  p,
  .lp252-head p,
  .lp252-benefit-card p,
  .lp252-step-card p,
  .lp252-testi-card p,
  .lp252-faq-item div,
  .lp252-plan-card li,
  .lp252-plan-card > p,
  .lp252-brand span,
  .lp252-float-card small,
  .lp252-float-card span,
  .lp252-price small
),
html[data-theme="dark"] body.lp252-sales-page :is(
  p,
  .lp252-head p,
  .lp252-benefit-card p,
  .lp252-step-card p,
  .lp252-testi-card p,
  .lp252-faq-item div,
  .lp252-plan-card li,
  .lp252-plan-card > p,
  .lp252-brand span,
  .lp252-float-card small,
  .lp252-float-card span,
  .lp252-price small
),
body.lp252-sales-page.dark :is(
  p,
  .lp252-head p,
  .lp252-benefit-card p,
  .lp252-step-card p,
  .lp252-testi-card p,
  .lp252-faq-item div,
  .lp252-plan-card li,
  .lp252-plan-card > p,
  .lp252-brand span,
  .lp252-float-card small,
  .lp252-float-card span,
  .lp252-price small
),
body.lp252-sales-page[data-theme="dark"] :is(
  p,
  .lp252-head p,
  .lp252-benefit-card p,
  .lp252-step-card p,
  .lp252-testi-card p,
  .lp252-faq-item div,
  .lp252-plan-card li,
  .lp252-plan-card > p,
  .lp252-brand span,
  .lp252-float-card small,
  .lp252-float-card span,
  .lp252-price small
){
  color:#b9cce5!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Link navigasi tetap jelas. */
html.dark body.lp252-sales-page .lp252-nav nav a,
html[data-theme="dark"] body.lp252-sales-page .lp252-nav nav a,
body.lp252-sales-page.dark .lp252-nav nav a,
body.lp252-sales-page[data-theme="dark"] .lp252-nav nav a{
  color:#bcd0e9!important;
}
html.dark body.lp252-sales-page .lp252-nav nav a:hover,
html[data-theme="dark"] body.lp252-sales-page .lp252-nav nav a:hover,
body.lp252-sales-page.dark .lp252-nav nav a:hover,
body.lp252-sales-page[data-theme="dark"] .lp252-nav nav a:hover{
  color:#ffffff!important;
}

/* Section tidak boleh memiliki background putih dari style lama. */
html.dark body.lp252-sales-page :is(.lp252-main,.lp252-section,.lp252-benefit-wrap,.lp252-process),
html[data-theme="dark"] body.lp252-sales-page :is(.lp252-main,.lp252-section,.lp252-benefit-wrap,.lp252-process),
body.lp252-sales-page.dark :is(.lp252-main,.lp252-section,.lp252-benefit-wrap,.lp252-process),
body.lp252-sales-page[data-theme="dark"] :is(.lp252-main,.lp252-section,.lp252-benefit-wrap,.lp252-process){
  background:transparent!important;
}

/* Footer. */
html.dark body.lp252-sales-page .lp252-footer,
html[data-theme="dark"] body.lp252-sales-page .lp252-footer,
body.lp252-sales-page.dark .lp252-footer,
body.lp252-sales-page[data-theme="dark"] .lp252-footer{
  color:#a9bdd7!important;
}

/* === END FNS V254 === */


/* =========================================================
   FNS V255 SUPER PREMIUM ISP SALES LANDING
   Menu bar enterprise, landing promosi profesional, mobile-ready.
   ========================================================= */
body.lp255-sales-page{
  --lp-bg:#020814;
  --lp-bg2:#061326;
  --lp-bg3:#151044;
  --lp-card:rgba(7,21,43,.90);
  --lp-card-solid:#081a34;
  --lp-soft:rgba(13,30,59,.80);
  --lp-line:rgba(102,176,255,.22);
  --lp-line-strong:rgba(65,199,255,.48);
  --lp-text:#f7fbff;
  --lp-heading:#ffffff;
  --lp-muted:#aec2df;
  --lp-cyan:#28c8ff;
  --lp-blue:#327dff;
  --lp-purple:#a855f7;
  --lp-green:#38df91;
  --lp-orange:#ffb547;
  --lp-shadow:0 26px 70px rgba(0,0,0,.30);
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--lp-text)!important;
  background:
    radial-gradient(circle at 10% 8%,rgba(0,190,255,.15),transparent 30%),
    radial-gradient(circle at 90% 12%,rgba(139,92,246,.17),transparent 32%),
    linear-gradient(135deg,var(--lp-bg),var(--lp-bg2) 48%,var(--lp-bg3))!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html:not(.dark) body.lp255-sales-page,
html[data-theme="light"] body.lp255-sales-page,
body.lp255-sales-page[data-theme="light"]{
  --lp-bg:#eef6ff;
  --lp-bg2:#e4efff;
  --lp-bg3:#f3efff;
  --lp-card:rgba(255,255,255,.86);
  --lp-card-solid:#ffffff;
  --lp-soft:rgba(246,250,255,.92);
  --lp-line:rgba(71,119,199,.18);
  --lp-line-strong:rgba(0,139,219,.38);
  --lp-text:#0b1d3a;
  --lp-heading:#071832;
  --lp-muted:#5d7393;
  --lp-shadow:0 24px 60px rgba(63,101,161,.13);
  background:
    radial-gradient(circle at 10% 8%,rgba(0,190,255,.12),transparent 30%),
    radial-gradient(circle at 90% 12%,rgba(139,92,246,.11),transparent 32%),
    linear-gradient(135deg,var(--lp-bg),var(--lp-bg2) 52%,var(--lp-bg3))!important;
}
body.lp255-sales-page *{box-sizing:border-box}
body.lp255-sales-page a{text-decoration:none}
body.lp255-sales-page button,
body.lp255-sales-page input,
body.lp255-sales-page select,
body.lp255-sales-page textarea{font:inherit}

/* Animated background */
.lp255-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lp255-grid-bg{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(125,211,252,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.15) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,#000 0,transparent 82%)}
.lp255-aura,.lp255-meteor,.lp255-star{position:absolute;display:block}
.lp255-aura{width:390px;height:390px;border-radius:50%;filter:blur(38px);opacity:.34;animation:lp255Aura 14s ease-in-out infinite}
.lp255-aura.aura-one{left:-120px;top:80px;background:rgba(0,196,255,.35)}
.lp255-aura.aura-two{right:-120px;top:20px;background:rgba(139,92,246,.33);animation-delay:-5s}
.lp255-aura.aura-three{left:38%;bottom:-170px;background:rgba(34,197,94,.16);animation-delay:-9s}
.lp255-meteor{width:2px;height:340px;background:linear-gradient(to bottom,transparent,rgba(99,210,255,.65),transparent);transform:rotate(46deg);opacity:.28;animation:lp255Meteor 10s linear infinite}
.lp255-meteor.meteor-one{left:18%;top:12%}
.lp255-meteor.meteor-two{right:20%;top:5%;animation-delay:-5s}
.lp255-star{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 0 15px rgba(255,255,255,.75);animation:lp255Blink 4s linear infinite}
.lp255-star.star-one{left:12%;top:18%}
.lp255-star.star-two{left:38%;top:10%;animation-delay:-1s}
.lp255-star.star-three{right:16%;top:28%;animation-delay:-2s}
.lp255-star.star-four{right:24%;bottom:20%;animation-delay:-3s}

.lp255-header-shell,.lp255-main,.lp255-footer,.lp255-floating-wa,.lp255-back-top{position:relative;z-index:2}

/* Premium two-level menu bar */
.lp255-header-shell{
  position:sticky;
  top:0;
  z-index:1000;
  width:min(1400px,calc(100% - 24px));
  margin:12px auto 0;
  border:1px solid var(--lp-line);
  border-radius:26px;
  overflow:visible;
  background:linear-gradient(135deg,rgba(5,19,40,.90),rgba(14,24,61,.84));
  box-shadow:0 22px 60px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
html:not(.dark) .lp255-header-shell,
html[data-theme="light"] .lp255-header-shell{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,248,255,.86))}
.lp255-header-shell.scrolled{transform:translateY(-4px);box-shadow:0 26px 72px rgba(0,0,0,.26)}
.lp255-promo-bar{min-height:36px;padding:7px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--lp-line);color:var(--lp-muted);font-size:11px;font-weight:800}
.lp255-promo-bar>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lp255-promo-bar strong{color:var(--lp-heading)}
.lp255-promo-bar a{color:#68ddff!important;font-weight:950}
.lp255-live-dot{width:8px;height:8px;border-radius:50%;background:var(--lp-green);box-shadow:0 0 0 7px rgba(56,223,145,.13),0 0 20px rgba(56,223,145,.55);animation:lp255Pulse 1.6s ease infinite}

.lp255-navbar{min-height:74px;padding:10px 14px 10px 18px;display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);align-items:center;gap:16px}
.lp255-brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--lp-text)!important}
.lp255-brand img,.lp255-brand .brand-mark{width:50px;height:50px;flex:0 0 50px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 32px rgba(0,0,0,.16)}
.lp255-brand span{min-width:0}
.lp255-brand b{display:block;color:var(--lp-heading)!important;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp255-brand small{display:block;margin-top:4px;color:var(--lp-muted)!important;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lp255-nav-links{display:flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--lp-line);border-radius:999px;background:rgba(255,255,255,.045)}
.lp255-nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border-radius:999px;color:var(--lp-muted)!important;font-size:11px;font-weight:900;white-space:nowrap;transition:.2s ease}
.lp255-nav-links a:hover{color:var(--lp-heading)!important;transform:translateY(-1px)}
.lp255-nav-links a.active{color:#fff!important;background:linear-gradient(135deg,#168fff,#17c5ef 52%,#8258ff);box-shadow:0 10px 24px rgba(31,143,255,.28)}

.lp255-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.lp255-icon-button,.lp255-menu-button{border:1px solid var(--lp-line);background:rgba(255,255,255,.055);color:var(--lp-text);cursor:pointer}
.lp255-icon-button{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:17px}
.lp255-wa-button,.lp255-login-button{min-height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-size:11px;font-weight:950;white-space:nowrap}
.lp255-wa-button{color:#9cf1bb!important;border:1px solid rgba(56,223,145,.26);background:rgba(34,197,94,.10)}
.lp255-login-button{color:#fff!important;background:linear-gradient(135deg,#197fff,#1cccf0 58%,#8158ff);box-shadow:0 12px 26px rgba(31,143,255,.24)}
.lp255-menu-button{display:none;width:42px;height:42px;padding:0;border-radius:14px;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.lp255-menu-button span{width:18px;height:2px;border-radius:99px;background:currentColor;transition:.2s ease}
.lp255-menu-button.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lp255-menu-button.open span:nth-child(2){opacity:0}
.lp255-menu-button.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.lp255-mobile-menu{display:none;padding:0 14px 14px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lp255-mobile-menu.open{display:grid}
.lp255-mobile-menu a{min-height:44px;padding:0 14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--lp-line);border-radius:14px;color:var(--lp-text)!important;background:rgba(255,255,255,.045);font-size:12px;font-weight:900;text-align:center}
.lp255-mobile-menu a.primary{grid-column:1/-1;color:#fff!important;background:linear-gradient(135deg,#197fff,#20c9ef,#8258ff)}

/* Main and hero */
.lp255-main{width:min(1360px,calc(100% - 24px));margin:0 auto;padding:26px 0 70px}
.lp255-hero{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(480px,.97fr);gap:30px;align-items:center;min-height:700px;padding:34px 0 30px}
.lp255-eyebrow,.lp255-section-label{display:inline-flex;align-items:center;gap:10px;color:#8de7ff!important;font-size:10px;font-weight:1000;letter-spacing:.11em}
html:not(.dark) .lp255-eyebrow,html:not(.dark) .lp255-section-label,html[data-theme="light"] .lp255-eyebrow,html[data-theme="light"] .lp255-section-label{color:#08759e!important}
.lp255-eyebrow span{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#24d7ff,#925cff);box-shadow:0 0 0 8px rgba(36,215,255,.10),0 0 20px rgba(36,215,255,.50)}
.lp255-hero-copy h1{margin:20px 0 18px;color:var(--lp-heading)!important;font-size:clamp(43px,5.4vw,78px);line-height:1.01;letter-spacing:-.055em}
.lp255-hero-copy h1 em{font-style:normal;color:transparent!important;background:linear-gradient(90deg,#28d3ff,#348dff 34%,#8c60ff 70%,#f36cc5);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:lp255Gradient 7s linear infinite}
.lp255-hero-copy>p{max-width:760px;margin:0;color:var(--lp-muted)!important;font-size:16px;font-weight:700;line-height:1.78}
.lp255-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lp255-primary-cta,.lp255-secondary-cta{min-height:50px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-size:13px;font-weight:1000;transition:.2s ease}
.lp255-primary-cta{color:#fff!important;background:linear-gradient(135deg,#197fff,#1dccf0 55%,#8758ff);box-shadow:0 16px 34px rgba(31,143,255,.27)}
.lp255-secondary-cta{color:var(--lp-text)!important;border:1px solid var(--lp-line);background:rgba(255,255,255,.055)}
.lp255-primary-cta:hover,.lp255-secondary-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.20)}
.lp255-trust-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.lp255-trust-row span{padding:9px 12px;border:1px solid var(--lp-line);border-radius:999px;color:var(--lp-muted);background:rgba(255,255,255,.045);font-size:10px;font-weight:850}
.lp255-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
.lp255-hero-stats article{min-height:88px;padding:15px;border:1px solid var(--lp-line);border-radius:20px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));box-shadow:0 16px 34px rgba(0,0,0,.11)}
.lp255-hero-stats b{display:block;color:var(--lp-heading)!important;font-size:21px;line-height:1.05}
.lp255-hero-stats span{display:block;margin-top:7px;color:var(--lp-muted);font-size:10px;font-weight:850}

/* Network visual */
.lp255-network-showcase{padding:18px;border:1px solid var(--lp-line);border-radius:34px;background:radial-gradient(circle at 0 0,rgba(0,196,255,.10),transparent 30%),linear-gradient(145deg,var(--lp-card),rgba(19,27,72,.82));box-shadow:var(--lp-shadow);overflow:hidden}
html:not(.dark) .lp255-network-showcase,html[data-theme="light"] .lp255-network-showcase{background:radial-gradient(circle at 0 0,rgba(0,196,255,.10),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.88),rgba(235,242,255,.96))}
.lp255-showcase-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:var(--lp-muted);font-size:10px;font-weight:850}
.lp255-showcase-toolbar span{display:inline-flex;align-items:center;gap:9px}
.lp255-showcase-toolbar i{width:8px;height:8px;border-radius:50%;background:var(--lp-green);box-shadow:0 0 0 7px rgba(56,223,145,.12),0 0 18px rgba(56,223,145,.50)}
.lp255-network-stage{position:relative;min-height:570px;overflow:hidden;border:1px solid rgba(93,176,255,.14);border-radius:26px;background:linear-gradient(rgba(87,162,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(87,162,255,.04) 1px,transparent 1px),radial-gradient(circle at center,rgba(28,173,255,.12),transparent 44%),linear-gradient(145deg,#061528,#101649);background-size:48px 48px,48px 48px,auto,auto}
html:not(.dark) .lp255-network-stage,html[data-theme="light"] .lp255-network-stage{background:linear-gradient(rgba(59,130,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px),radial-gradient(circle at center,rgba(28,173,255,.13),transparent 44%),linear-gradient(145deg,#e8f3ff,#edf0ff);background-size:48px 48px,48px 48px,auto,auto}
.lp255-radar-sweep{position:absolute;left:50%;top:50%;width:420px;height:420px;border-radius:50%;transform:translate(-50%,-50%);overflow:hidden}
.lp255-radar-sweep:before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 76%,rgba(40,200,255,.18) 89%,transparent 100%);animation:lp255Rotate 5.8s linear infinite}
.lp255-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(78,188,255,.24);border-radius:50%;transform:translate(-50%,-50%);animation:lp255Orbit 17s linear infinite}
.lp255-orbit:before{content:"";position:absolute;left:50%;top:-7px;width:13px;height:13px;border-radius:50%;background:#2bd7ff;box-shadow:0 0 20px rgba(43,215,255,.80)}
.lp255-orbit.orbit-large{width:420px;height:420px}
.lp255-orbit.orbit-medium{width:305px;height:305px;animation-direction:reverse;animation-duration:13s}
.lp255-orbit.orbit-small{width:190px;height:190px;animation-duration:9s}
.lp255-network-core{position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-50%);display:grid;place-content:center;justify-items:center;gap:7px;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(46,217,255,.32),rgba(100,72,255,.24) 58%,rgba(7,15,39,.75));border:1px solid rgba(96,201,255,.32);box-shadow:0 0 0 18px rgba(42,199,255,.06),0 0 75px rgba(42,199,255,.28);animation:lp255Core 6s ease-in-out infinite}
.lp255-network-core span{font-size:54px}
.lp255-network-core small{color:#dff8ff;font-size:9px;font-weight:1000;letter-spacing:.13em}
.lp255-node{position:absolute;width:50px;height:50px;display:grid;place-items:center;border:1px solid var(--lp-line);border-radius:16px;background:rgba(10,27,54,.86);box-shadow:0 12px 30px rgba(0,0,0,.17),0 0 25px rgba(35,190,255,.10);font-size:22px;animation:lp255Node 5s ease-in-out infinite}
html:not(.dark) .lp255-node,html[data-theme="light"] .lp255-node{background:rgba(255,255,255,.88)}
.lp255-node.node-a{left:12%;top:26%}
.lp255-node.node-b{right:12%;top:30%;animation-delay:-1s}
.lp255-node.node-c{left:22%;bottom:16%;animation-delay:-2s}
.lp255-node.node-d{right:22%;bottom:14%;animation-delay:-3s}
.lp255-float-metric{position:absolute;width:175px;padding:15px;border:1px solid var(--lp-line);border-radius:19px;background:rgba(8,24,49,.80);backdrop-filter:blur(9px);box-shadow:0 18px 38px rgba(0,0,0,.16)}
html:not(.dark) .lp255-float-metric,html[data-theme="light"] .lp255-float-metric{background:rgba(255,255,255,.82)}
.lp255-float-metric small{display:block;color:var(--lp-muted);font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.lp255-float-metric b{display:block;margin:7px 0 5px;color:var(--lp-heading)!important;font-size:22px}
.lp255-float-metric span{display:block;color:var(--lp-muted);font-size:10px;font-weight:800}
.lp255-float-metric.metric-a{left:18px;top:18px}
.lp255-float-metric.metric-b{right:18px;top:88px}
.lp255-float-metric.metric-c{right:28px;bottom:22px}

/* Common sections */
.lp255-trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:6px 0 24px}
.lp255-trust-strip article{display:flex;align-items:center;gap:13px;min-height:84px;padding:15px;border:1px solid var(--lp-line);border-radius:20px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));box-shadow:0 16px 34px rgba(0,0,0,.10)}
.lp255-trust-strip article>span{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#1a91ff,#7759ff);font-size:23px;box-shadow:0 12px 25px rgba(31,143,255,.22)}
.lp255-trust-strip b{display:block;color:var(--lp-heading)!important;font-size:13px}
.lp255-trust-strip small{display:block;margin-top:5px;color:var(--lp-muted);font-size:10px;font-weight:750}

.lp255-section{padding:42px 0}
.lp255-section-heading{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:end;margin-bottom:22px}
.lp255-section-heading.centered{grid-template-columns:1fr;max-width:850px;margin-left:auto;margin-right:auto;text-align:center}
.lp255-section-heading h2,.lp255-lead-panel h2,.lp255-final-cta h2{margin:12px 0 0;color:var(--lp-heading)!important;font-size:clamp(30px,3.3vw,50px);line-height:1.08;letter-spacing:-.04em}
.lp255-section-heading p,.lp255-lead-panel>p,.lp255-final-cta p{margin:0;color:var(--lp-muted)!important;font-size:13px;font-weight:700;line-height:1.75}

/* Package cards */
.lp255-package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.lp255-package-card{position:relative;padding:23px;overflow:hidden;border:1px solid var(--lp-line);border-radius:27px;background:radial-gradient(circle at 100% 0,rgba(82,89,255,.08),transparent 35%),linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.024));box-shadow:0 18px 52px rgba(0,0,0,.12);transition:.22s ease}
.lp255-package-card:hover{transform:translateY(-7px);border-color:var(--lp-line-strong);box-shadow:0 28px 66px rgba(0,0,0,.22)}
.lp255-package-card.featured{border-color:rgba(43,208,255,.48);background:radial-gradient(circle at 100% 0,rgba(126,82,255,.18),transparent 36%),linear-gradient(145deg,rgba(10,35,67,.98),rgba(23,28,79,.96))}
html:not(.dark) .lp255-package-card.featured,html[data-theme="light"] .lp255-package-card.featured{background:radial-gradient(circle at 100% 0,rgba(126,82,255,.13),transparent 36%),linear-gradient(145deg,#f7fbff,#edf1ff)}
.lp255-popular-label{position:absolute;top:15px;right:15px;padding:7px 10px;border-radius:999px;color:#fff;background:linear-gradient(90deg,#20c7ed,#8258ff);font-size:9px;font-weight:1000}
.lp255-package-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp255-speed-badge{display:inline-flex;min-height:39px;padding:0 13px;align-items:center;border-radius:14px;color:#fff;background:linear-gradient(135deg,#188aff,#1bcbed);box-shadow:0 12px 26px rgba(31,143,255,.24);font-size:13px;font-weight:1000}
.lp255-package-number{color:rgba(164,197,231,.28);font-size:29px;font-weight:1000}
.lp255-package-card h3{margin:20px 0 8px;color:var(--lp-heading)!important;font-size:23px;line-height:1.12}
.lp255-package-price{display:flex;align-items:flex-end;gap:6px}
.lp255-package-price b{color:var(--lp-heading)!important;font-size:29px;line-height:1}
.lp255-package-price small{color:var(--lp-muted);font-size:10px;font-weight:850}
.lp255-package-card>p{min-height:62px;margin:15px 0;color:var(--lp-muted)!important;font-size:12px;line-height:1.65;font-weight:700}
.lp255-package-card ul{display:grid;gap:9px;margin:0 0 19px;padding:0;list-style:none}
.lp255-package-card li{position:relative;padding-left:19px;color:var(--lp-muted);font-size:10px;font-weight:800}
.lp255-package-card li:before{content:"✓";position:absolute;left:0;color:var(--lp-green);font-weight:1000}
.lp255-package-card>a{min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--lp-line);border-radius:14px;color:var(--lp-text)!important;background:rgba(255,255,255,.04);font-size:11px;font-weight:1000}
.lp255-package-card>a.primary{color:#fff!important;border-color:transparent;background:linear-gradient(135deg,#197fff,#1cccf0,#8258ff)}

/* Benefit and solution cards */
.lp255-benefit-section,.lp255-solutions-section{padding:34px 28px;border:1px solid var(--lp-line);border-radius:34px;background:radial-gradient(circle at 0 0,rgba(0,196,255,.07),transparent 30%),linear-gradient(145deg,rgba(6,21,43,.64),rgba(17,23,66,.66))}
html:not(.dark) .lp255-benefit-section,html:not(.dark) .lp255-solutions-section,html[data-theme="light"] .lp255-benefit-section,html[data-theme="light"] .lp255-solutions-section{background:radial-gradient(circle at 0 0,rgba(0,196,255,.07),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.76),rgba(238,243,255,.88))}
.lp255-benefit-grid,.lp255-solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lp255-benefit-card,.lp255-solution-card{position:relative;min-height:190px;padding:22px;overflow:hidden;border:1px solid var(--lp-line);border-radius:23px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));box-shadow:0 16px 42px rgba(0,0,0,.11);transition:.2s ease}
.lp255-benefit-card:hover,.lp255-solution-card:hover{transform:translateY(-5px);border-color:var(--lp-line-strong)}
.lp255-benefit-card>span{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#1b91ff,#8059ff);box-shadow:0 13px 28px rgba(31,143,255,.22);font-size:26px}
.lp255-solution-card>span{font-size:30px}
.lp255-benefit-card b,.lp255-solution-card b{display:block;margin:16px 0 9px;color:var(--lp-heading)!important;font-size:18px}
.lp255-benefit-card p,.lp255-solution-card p{margin:0;color:var(--lp-muted)!important;font-size:11px;line-height:1.7;font-weight:700}

/* Coverage + lead */
.lp255-coverage-section{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);gap:18px;align-items:stretch}
.lp255-coverage-visual,.lp255-lead-panel{min-height:520px;border:1px solid var(--lp-line);border-radius:30px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));box-shadow:var(--lp-shadow)}
.lp255-coverage-visual{padding:18px}
.lp255-coverage-map{position:relative;height:100%;min-height:480px;overflow:hidden;border-radius:23px;background:radial-gradient(circle at center,rgba(24,193,255,.13),transparent 38%),linear-gradient(145deg,#061528,#11174c)}
html:not(.dark) .lp255-coverage-map,html[data-theme="light"] .lp255-coverage-map{background:radial-gradient(circle at center,rgba(24,193,255,.14),transparent 38%),linear-gradient(145deg,#e8f3ff,#efeefe)}
.lp255-map-grid{position:absolute;inset:0;opacity:.38;background-image:linear-gradient(rgba(80,177,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(80,177,255,.14) 1px,transparent 1px);background-size:36px 36px;transform:perspective(800px) rotateX(48deg) scale(1.4)}
.lp255-map-center{position:absolute;left:50%;top:44%;width:80px;height:80px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#188aff,#7a59ff);box-shadow:0 0 0 18px rgba(32,195,255,.08),0 0 70px rgba(32,195,255,.34);font-size:38px}
.lp255-map-pulse{position:absolute;border:1px solid rgba(38,204,255,.32);border-radius:50%;animation:lp255Map 3.2s ease-out infinite}
.lp255-map-pulse.pulse-one{left:50%;top:44%;width:140px;height:140px;transform:translate(-50%,-50%)}
.lp255-map-pulse.pulse-two{left:50%;top:44%;width:260px;height:260px;transform:translate(-50%,-50%);animation-delay:-1s}
.lp255-map-pulse.pulse-three{left:50%;top:44%;width:390px;height:390px;transform:translate(-50%,-50%);animation-delay:-2s}
.lp255-coverage-map article{position:absolute;left:20px;right:20px;bottom:20px;padding:16px;border:1px solid var(--lp-line);border-radius:18px;background:rgba(7,23,47,.76);backdrop-filter:blur(8px)}
html:not(.dark) .lp255-coverage-map article,html[data-theme="light"] .lp255-coverage-map article{background:rgba(255,255,255,.78)}
.lp255-coverage-map small{display:block;color:var(--lp-muted);font-size:9px;font-weight:1000;text-transform:uppercase;letter-spacing:.09em}
.lp255-coverage-map b{display:block;margin-top:7px;color:var(--lp-heading)!important;font-size:14px;line-height:1.5}
.lp255-lead-panel{padding:28px}
.lp255-lead-panel h2{font-size:clamp(29px,3vw,46px)}
.lp255-lead-panel>p{margin-top:13px}
.lp255-lead-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:22px}
.lp255-lead-form label{display:grid;gap:7px;color:var(--lp-heading)!important;font-size:10px;font-weight:950}
.lp255-lead-form .wide{grid-column:1/-1}
.lp255-lead-form input,.lp255-lead-form select,.lp255-lead-form textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--lp-line)!important;border-radius:14px!important;color:var(--lp-text)!important;background:rgba(4,17,36,.70)!important;outline:none;transition:.2s ease}
html:not(.dark) .lp255-lead-form input,html:not(.dark) .lp255-lead-form select,html:not(.dark) .lp255-lead-form textarea,html[data-theme="light"] .lp255-lead-form input,html[data-theme="light"] .lp255-lead-form select,html[data-theme="light"] .lp255-lead-form textarea{background:rgba(255,255,255,.83)!important}
.lp255-lead-form input:focus,.lp255-lead-form select:focus,.lp255-lead-form textarea:focus{border-color:var(--lp-line-strong)!important;box-shadow:0 0 0 4px rgba(34,190,255,.09)}
.lp255-lead-form textarea{min-height:105px;resize:vertical}
.lp255-lead-form button{min-height:50px;border:0;border-radius:15px;color:#fff;background:linear-gradient(135deg,#197fff,#1dccf0,#8258ff);box-shadow:0 15px 30px rgba(31,143,255,.23);cursor:pointer;font-weight:1000}

/* Steps */
.lp255-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp255-step-card{display:flex;gap:16px;min-height:170px;padding:22px;border:1px solid var(--lp-line);border-radius:23px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));box-shadow:0 16px 42px rgba(0,0,0,.10)}
.lp255-step-card strong{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(135deg,#188aff,#1ccced);box-shadow:0 13px 27px rgba(31,143,255,.23);font-size:17px}
.lp255-step-card b{display:block;margin-top:3px;color:var(--lp-heading)!important;font-size:17px}
.lp255-step-card p{margin:9px 0 0;color:var(--lp-muted)!important;font-size:11px;line-height:1.7;font-weight:700}

/* FAQ */
.lp255-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp255-faq-item{border:1px solid var(--lp-line);border-radius:20px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));overflow:hidden}
.lp255-faq-item summary{min-height:66px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--lp-heading)!important;cursor:pointer;list-style:none;font-size:13px;font-weight:950}
.lp255-faq-item summary::-webkit-details-marker{display:none}
.lp255-faq-item summary span{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:10px;background:rgba(43,199,255,.10);color:#75dcff;transition:.2s ease}
.lp255-faq-item[open] summary span{transform:rotate(45deg)}
.lp255-faq-item>div{padding:0 18px 18px;color:var(--lp-muted)!important;font-size:11px;line-height:1.75;font-weight:700}

/* Final CTA + footer */
.lp255-final-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:34px;padding:32px;border:1px solid var(--lp-line);border-radius:32px;background:radial-gradient(circle at 0 0,rgba(0,196,255,.16),transparent 34%),radial-gradient(circle at 100% 20%,rgba(145,81,255,.20),transparent 38%),linear-gradient(135deg,rgba(5,24,49,.96),rgba(17,29,76,.96),rgba(47,18,91,.90));box-shadow:var(--lp-shadow)}
html:not(.dark) .lp255-final-cta,html[data-theme="light"] .lp255-final-cta{background:radial-gradient(circle at 0 0,rgba(0,196,255,.12),transparent 34%),radial-gradient(circle at 100% 20%,rgba(145,81,255,.12),transparent 38%),linear-gradient(135deg,#f5fbff,#edf2ff,#f6efff)}
.lp255-final-cta>div:last-child{display:flex;flex-wrap:wrap;gap:11px;justify-content:flex-end}
.lp255-footer{width:min(1360px,calc(100% - 24px));margin:0 auto 28px;padding:22px;display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(260px,1fr);align-items:center;gap:18px;border:1px solid var(--lp-line);border-radius:24px;background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.025));color:var(--lp-muted)}
.lp255-footer-brand{display:flex;align-items:center;gap:10px}
.lp255-footer-brand img,.lp255-footer-brand .brand-mark{width:40px;height:40px;border-radius:13px}
.lp255-footer-brand b{display:block;color:var(--lp-heading)!important;font-size:12px}
.lp255-footer-brand small{display:block;margin-top:3px;color:var(--lp-muted);font-size:9px;font-weight:750}
.lp255-footer>div:nth-child(2){display:flex;align-items:center;gap:13px}
.lp255-footer a{color:var(--lp-muted)!important;font-size:10px;font-weight:850}
.lp255-footer p{margin:0;text-align:right;color:var(--lp-muted)!important;font-size:9px;font-weight:750}

/* Floating actions */
.lp255-floating-wa{position:fixed;right:20px;bottom:22px;z-index:1200;min-height:50px;padding:0 17px 0 10px;display:flex;align-items:center;gap:9px;border:1px solid rgba(75,224,132,.30);border-radius:999px;color:#dcffe9!important;background:linear-gradient(135deg,#159a52,#22c55e);box-shadow:0 18px 42px rgba(22,163,74,.30)}
.lp255-floating-wa span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.16)}
.lp255-floating-wa b{font-size:11px}
.lp255-back-top{position:fixed;left:20px;bottom:22px;z-index:1200;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--lp-line);border-radius:15px;color:var(--lp-text);background:var(--lp-card-solid);box-shadow:0 15px 35px rgba(0,0,0,.18);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.2s ease}
.lp255-back-top.show{opacity:1;visibility:visible;transform:none}

/* Reveal */
.lp255-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.lp255-reveal.visible{opacity:1;transform:none}

/* Animations */
@keyframes lp255Aura{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(20px,-18px,0)}}
@keyframes lp255Meteor{0%{transform:translateY(-35px) rotate(46deg);opacity:.12}50%{opacity:.34}100%{transform:translateY(45px) rotate(46deg);opacity:.12}}
@keyframes lp255Blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes lp255Pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.72}}
@keyframes lp255Gradient{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes lp255Rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes lp255Orbit{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lp255Core{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}
@keyframes lp255Node{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lp255Map{0%{opacity:.7;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}

/* Responsive */
@media(max-width:1240px){
  .lp255-navbar{grid-template-columns:minmax(220px,1fr) auto}
  .lp255-nav-links{display:none}
  .lp255-menu-button{display:flex}
  .lp255-hero{grid-template-columns:1fr}
  .lp255-network-showcase{max-width:850px;width:100%;margin:0 auto}
  .lp255-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp255-benefit-grid,.lp255-solution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp255-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .lp255-header-shell{position:relative}
  .lp255-promo-bar span:last-child{display:none}
  .lp255-hero{min-height:0;padding-top:24px}
  .lp255-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp255-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp255-section-heading{grid-template-columns:1fr}
  .lp255-coverage-section{grid-template-columns:1fr}
  .lp255-coverage-visual,.lp255-lead-panel{min-height:0}
  .lp255-step-grid{grid-template-columns:1fr}
  .lp255-faq-grid{grid-template-columns:1fr}
  .lp255-final-cta{grid-template-columns:1fr}
  .lp255-final-cta>div:last-child{justify-content:flex-start}
  .lp255-footer{grid-template-columns:1fr;text-align:left}
  .lp255-footer p{text-align:left}
}
@media(max-width:680px){
  .lp255-header-shell,.lp255-main,.lp255-footer{width:min(100% - 14px,1360px)}
  .lp255-header-shell{margin-top:7px;border-radius:20px}
  .lp255-promo-bar{justify-content:center;min-height:34px;padding:7px 10px;text-align:center}
  .lp255-promo-bar>div{justify-content:center}
  .lp255-promo-bar a{display:none}
  .lp255-navbar{min-height:66px;grid-template-columns:minmax(0,1fr) auto;padding:8px 9px 8px 12px}
  .lp255-brand img,.lp255-brand .brand-mark{width:44px;height:44px;flex-basis:44px;border-radius:14px}
  .lp255-brand b{font-size:12px}
  .lp255-brand small{font-size:8px}
  .lp255-wa-button,.lp255-login-button{display:none}
  .lp255-icon-button,.lp255-menu-button{width:40px;height:40px}
  .lp255-mobile-menu{grid-template-columns:1fr}
  .lp255-main{padding-top:16px}
  .lp255-hero-copy h1{font-size:36px}
  .lp255-hero-copy>p{font-size:13px}
  .lp255-primary-cta,.lp255-secondary-cta{width:100%}
  .lp255-trust-row span{font-size:9px}
  .lp255-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp255-network-showcase{padding:12px;border-radius:24px}
  .lp255-network-stage{min-height:520px;border-radius:19px}
  .lp255-orbit.orbit-large{width:300px;height:300px}
  .lp255-orbit.orbit-medium{width:220px;height:220px}
  .lp255-orbit.orbit-small{width:150px;height:150px}
  .lp255-radar-sweep{width:310px;height:310px}
  .lp255-network-core{width:96px;height:96px}
  .lp255-network-core span{font-size:42px}
  .lp255-node{width:43px;height:43px;font-size:18px}
  .lp255-float-metric{width:145px;padding:12px}
  .lp255-float-metric b{font-size:17px}
  .lp255-float-metric.metric-a{left:10px;top:12px}
  .lp255-float-metric.metric-b{right:10px;top:82px}
  .lp255-float-metric.metric-c{right:12px;bottom:14px}
  .lp255-trust-strip{grid-template-columns:1fr}
  .lp255-section{padding:31px 0}
  .lp255-section-heading h2,.lp255-lead-panel h2,.lp255-final-cta h2{font-size:31px}
  .lp255-package-grid,.lp255-benefit-grid,.lp255-solution-grid{grid-template-columns:1fr}
  .lp255-benefit-section,.lp255-solutions-section{padding:23px 14px;border-radius:25px}
  .lp255-coverage-map{min-height:400px}
  .lp255-lead-panel{padding:22px 16px}
  .lp255-lead-form{grid-template-columns:1fr}
  .lp255-lead-form .wide{grid-column:auto}
  .lp255-final-cta{padding:24px 18px}
  .lp255-footer>div:nth-child(2){flex-wrap:wrap}
  .lp255-floating-wa b{display:none}
  .lp255-floating-wa{width:50px;padding:0;justify-content:center}
  .lp255-floating-wa span{background:transparent}
}
@media(prefers-reduced-motion:reduce){
  .lp255-aura,.lp255-meteor,.lp255-star,.lp255-live-dot,.lp255-hero-copy h1 em,.lp255-radar-sweep:before,.lp255-orbit,.lp255-network-core,.lp255-node,.lp255-map-pulse{animation:none!important}
  .lp255-reveal{opacity:1!important;transform:none!important}
}
/* === END FNS V255 === */


/* =========================================================
   FNS V256 CINEMATIC PREMIUM MENU BAR
   Menu bar neon glass, animated ticker, magnetic interaction,
   pointer glow, mobile premium drawer, and compressed scroll state.
   ========================================================= */

.lp256-header-shell{
  --lp256-x:50%;
  --lp256-y:50%;
  isolation:isolate;
  background:
    radial-gradient(circle at var(--lp256-x) var(--lp256-y),rgba(44,200,255,.12),transparent 34%),
    linear-gradient(135deg,rgba(4,18,38,.94),rgba(13,23,63,.91))!important;
  border-color:rgba(100,190,255,.28)!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(31,147,255,.04)!important;
}

html:not(.dark) .lp256-header-shell,
html[data-theme="light"] .lp256-header-shell{
  background:
    radial-gradient(circle at var(--lp256-x) var(--lp256-y),rgba(22,166,255,.10),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,247,255,.91))!important;
}

.lp256-header-shell::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-2;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(110deg,rgba(32,206,255,.15),rgba(32,206,255,.72),rgba(126,86,255,.70),rgba(245,95,202,.52),rgba(32,206,255,.15));
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:lp256BorderFlow 7s linear infinite;
  pointer-events:none;
}

.lp256-header-shell::after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:-18px;
  height:34px;
  z-index:-3;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(19,183,255,.18),rgba(112,75,255,.20),transparent);
  filter:blur(18px);
  opacity:.75;
  pointer-events:none;
}

.lp256-header-fx{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}

.lp256-edge-light{
  position:absolute;
  display:block;
  width:220px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(97,220,255,.85),transparent);
  filter:drop-shadow(0 0 8px rgba(35,203,255,.8));
  animation:lp256EdgeTravel 5.5s ease-in-out infinite;
}

.lp256-edge-light.edge-one{top:0;left:-220px}
.lp256-edge-light.edge-two{right:-220px;bottom:0;animation-direction:reverse;animation-delay:-2.8s}

.lp256-pointer-glow{
  position:absolute;
  left:var(--lp256-x);
  top:var(--lp256-y);
  width:240px;
  height:160px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(62,204,255,.13),transparent 70%);
  filter:blur(5px);
  transition:left .08s linear,top .08s linear;
}

.lp256-scan-line{
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(71,214,255,.58),rgba(151,89,255,.48),transparent);
  opacity:.38;
  animation:lp256Scan 6s ease-in-out infinite;
}

.lp256-header-shell.scrolled{
  transform:translateY(-7px) scale(.994)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 34px rgba(25,146,255,.08)!important;
}

.lp256-header-shell.scrolled .lp256-promo-bar{
  min-height:28px;
  padding-top:4px;
  padding-bottom:4px;
}

.lp256-header-shell.scrolled .lp256-navbar{
  min-height:66px;
}

/* Animated top ticker */
.lp256-promo-bar{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(12,45,78,.34),rgba(33,31,86,.22),rgba(13,49,75,.30));
}

html:not(.dark) .lp256-promo-bar,
html[data-theme="light"] .lp256-promo-bar{
  background:linear-gradient(90deg,rgba(225,243,255,.74),rgba(239,235,255,.70),rgba(224,244,255,.74));
}

.lp256-ticker-mask{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.lp256-ticker-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:34px;
  padding-right:34px;
  animation:lp256Ticker 30s linear infinite;
}

.lp256-promo-bar:hover .lp256-ticker-track{
  animation-play-state:paused;
}

.lp256-ticker-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:var(--lp-muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.015em;
}

.lp256-ticker-item strong{color:var(--lp-heading)!important}
.lp256-ticker-item i.live{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3ae196;
  box-shadow:0 0 0 6px rgba(58,225,150,.10),0 0 16px rgba(58,225,150,.55);
  animation:lp256LivePulse 1.5s ease infinite;
}

.lp256-top-status{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  padding-left:16px;
  background:linear-gradient(90deg,transparent 0,rgba(5,20,42,.86) 18%);
}

html:not(.dark) .lp256-top-status,
html[data-theme="light"] .lp256-top-status{
  background:linear-gradient(90deg,transparent 0,rgba(246,250,255,.94) 18%);
}

.lp256-top-status>span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--lp-muted);
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.lp256-top-status>span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#3ae196;
  box-shadow:0 0 11px rgba(58,225,150,.70);
}

.lp256-top-status a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#8ce9ff!important;
  font-size:10px;
  font-weight:1000;
}

.lp256-top-status a b{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:8px;
  background:rgba(37,198,255,.10);
}

/* Navbar */
.lp256-navbar{
  position:relative;
  z-index:2;
  min-height:82px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}

.lp256-brand{
  position:relative;
  max-width:330px;
}

.lp256-logo-shell{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
}

.lp256-logo-shell img,
.lp256-logo-shell .brand-mark{
  position:relative;
  z-index:3;
  width:48px!important;
  height:48px!important;
  flex-basis:48px!important;
  border-radius:16px!important;
}

.lp256-logo-ring,
.lp256-logo-pulse{
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
}

.lp256-logo-ring{
  border:1px solid rgba(64,207,255,.46);
  background:conic-gradient(from 0deg,transparent,rgba(65,205,255,.45),transparent 34%,rgba(133,87,255,.42),transparent 70%);
  animation:lp256LogoSpin 7s linear infinite;
}

.lp256-logo-pulse{
  inset:-5px;
  border:1px solid rgba(67,204,255,.20);
  animation:lp256LogoPulse 2.8s ease-out infinite;
}

.lp256-brand-copy{
  position:relative;
  display:block;
  padding-right:60px;
}

.lp256-brand-copy em{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  min-height:20px;
  padding:0 7px;
  align-items:center;
  border:1px solid rgba(61,207,255,.18);
  border-radius:999px;
  color:#7bdfff;
  background:rgba(39,190,255,.07);
  font-size:7px;
  font-style:normal;
  font-weight:1000;
  letter-spacing:.08em;
  white-space:nowrap;
}

/* Main nav capsule */
.lp256-nav-links{
  position:relative;
  isolation:isolate;
  gap:2px!important;
  padding:6px!important;
  border-color:rgba(95,182,255,.25)!important;
  background:
    linear-gradient(145deg,rgba(7,24,49,.82),rgba(15,24,62,.70))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 32px rgba(0,0,0,.12);
}

html:not(.dark) .lp256-nav-links,
html[data-theme="light"] .lp256-nav-links{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(238,244,255,.78))!important;
}

.lp256-nav-ambient{
  position:absolute;
  inset:5px;
  z-index:-1;
  border-radius:999px;
  background:
    radial-gradient(circle at var(--lp256-x) 50%,rgba(39,192,255,.09),transparent 34%);
  pointer-events:none;
}

.lp256-nav-links a{
  position:relative;
  min-height:42px!important;
  padding:0 14px!important;
  gap:7px;
  overflow:hidden;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.lp256-nav-links a::before{
  content:attr(data-icon);
  position:relative;
  z-index:2;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#9eeaff;
  background:rgba(41,194,255,.08);
  font-size:10px;
  font-weight:1000;
  transition:.2s ease;
}

.lp256-nav-links a::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#55d8ff,#9c67ff,transparent);
  transform:scaleX(0);
  opacity:0;
  transition:transform .24s ease,opacity .24s ease;
}

.lp256-nav-links a>span{
  position:relative;
  z-index:2;
}

.lp256-nav-links a:hover::before{
  color:#fff;
  background:linear-gradient(135deg,#188dff,#7b5bff);
  box-shadow:0 7px 17px rgba(44,143,255,.25);
}

.lp256-nav-links a:hover::after{
  transform:scaleX(1);
  opacity:1;
}

.lp256-nav-links a.active{
  position:relative;
  background:
    radial-gradient(circle at 28% 0,rgba(255,255,255,.18),transparent 40%),
    linear-gradient(135deg,#167dff,#1cc8ee 54%,#8058ff)!important;
  box-shadow:
    0 11px 26px rgba(31,143,255,.30),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}

.lp256-nav-links a.active::before{
  color:#fff;
  background:rgba(255,255,255,.16);
}

.lp256-nav-links a.active::after{
  transform:scaleX(1);
  opacity:1;
  background:linear-gradient(90deg,transparent,#fff,transparent);
}

.lp256-click-spark{
  position:absolute!important;
  width:8px!important;
  height:8px!important;
  z-index:5!important;
  margin:-4px 0 0 -4px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 0 16px #6fe2ff!important;
  pointer-events:none!important;
  animation:lp256ClickSpark .62s ease-out forwards!important;
}

/* Right actions */
.lp256-nav-actions{
  gap:7px!important;
}

.lp256-mini-status{
  min-height:42px;
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(58,225,150,.18);
  border-radius:14px;
  color:#78e9aa;
  background:rgba(34,197,94,.07);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
}

.lp256-mini-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3ae196;
  box-shadow:0 0 14px rgba(58,225,150,.60);
  animation:lp256LivePulse 1.5s ease infinite;
}

.lp256-theme-button,
.lp256-wa-button,
.lp256-login-button{
  position:relative;
  overflow:hidden;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.lp256-theme-button::after,
.lp256-wa-button::after,
.lp256-login-button::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-65%;
  width:55%;
  height:320%;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:lp256Shimmer 5.8s ease-in-out infinite;
  pointer-events:none;
}

.lp256-theme-button{
  position:relative;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,206,90,.14),transparent 42%),
    rgba(255,255,255,.045)!important;
}

.lp256-theme-button b{
  position:relative;
  z-index:2;
  font-size:17px;
}

.lp256-theme-orbit{
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,211,105,.20);
  border-radius:10px;
  animation:lp256ThemeOrbit 5s linear infinite;
}

.lp256-wa-button{
  gap:7px;
  min-width:104px;
  background:
    radial-gradient(circle at 20% 0,rgba(92,255,151,.12),transparent 45%),
    rgba(34,197,94,.09)!important;
}

.lp256-wa-button span{font-size:14px}
.lp256-wa-button b{font-size:10px}

.lp256-login-button{
  min-width:88px;
  gap:9px;
  box-shadow:
    0 12px 28px rgba(31,143,255,.27),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}

.lp256-login-button b{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.16);
  font-size:12px;
}

/* Premium mobile drawer */
.lp256-mobile-menu{
  position:relative;
  margin:0 10px 10px;
  padding:12px!important;
  border:1px solid rgba(96,185,255,.22);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0,rgba(133,84,255,.12),transparent 35%),
    linear-gradient(145deg,rgba(5,21,43,.98),rgba(15,23,62,.98));
  box-shadow:0 20px 48px rgba(0,0,0,.25);
  transform-origin:top center;
  animation:lp256DrawerOpen .28s ease both;
}

html:not(.dark) .lp256-mobile-menu,
html[data-theme="light"] .lp256-mobile-menu{
  background:
    radial-gradient(circle at 100% 0,rgba(133,84,255,.08),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(239,245,255,.98));
}

.lp256-mobile-menu-head{
  grid-column:1/-1;
  min-height:58px;
  padding:12px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--lp-line);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}

.lp256-mobile-menu-head span{
  display:block;
  color:#7bdfff;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.10em;
}

.lp256-mobile-menu-head b{
  display:block;
  margin-top:5px;
  color:var(--lp-heading)!important;
  font-size:11px;
}

.lp256-mobile-menu-head>i{
  padding:6px 8px;
  border-radius:999px;
  color:#9ee9ff;
  background:rgba(38,191,255,.08);
  font-size:7px;
  font-style:normal;
  font-weight:1000;
  letter-spacing:.08em;
}

.lp256-mobile-menu>a{
  position:relative;
  min-height:54px!important;
  padding:0 12px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) auto!important;
  gap:10px!important;
  justify-content:stretch!important;
  text-align:left!important;
  overflow:hidden;
}

.lp256-mobile-menu>a>span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#9eeaff;
  background:rgba(36,191,255,.08);
  font-size:13px;
}

.lp256-mobile-menu>a>b{
  color:var(--lp-heading)!important;
  font-size:11px;
}

.lp256-mobile-menu>a>i{
  color:var(--lp-muted);
  font-size:8px;
  font-style:normal;
  font-weight:950;
}

.lp256-mobile-menu>a.primary>span{
  color:#fff;
  background:rgba(255,255,255,.16);
}

.lp256-mobile-menu>a.primary>b,
.lp256-mobile-menu>a.primary>i{
  color:#fff!important;
}

/* Responsive refinements */
@media(max-width:1320px){
  .lp256-brand-copy em{display:none}
  .lp256-brand-copy{padding-right:0}
}

@media(max-width:1240px){
  .lp256-mini-status{display:none}
  .lp256-mobile-menu{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .lp256-header-shell{
    position:sticky!important;
    top:6px!important;
  }
  .lp256-top-status>span{display:none}
  .lp256-promo-bar{padding-right:10px!important}
}

@media(max-width:680px){
  .lp256-header-shell{
    top:5px!important;
    margin-top:5px!important;
    border-radius:21px!important;
  }

  .lp256-header-shell::after{bottom:-10px;height:22px}

  .lp256-promo-bar{
    min-height:32px!important;
    justify-content:stretch!important;
    padding:5px 9px!important;
  }

  .lp256-ticker-track{
    gap:26px;
    animation-duration:24s;
  }

  .lp256-ticker-item{font-size:8px}
  .lp256-top-status{padding-left:7px}
  .lp256-top-status a{
    width:31px;
    height:26px;
    padding:0;
    justify-content:center;
    font-size:0;
  }
  .lp256-top-status a b{font-size:10px}

  .lp256-navbar{
    min-height:64px!important;
    padding:7px 8px 7px 10px!important;
  }

  .lp256-logo-shell{
    width:46px;
    height:46px;
    flex-basis:46px;
  }

  .lp256-logo-shell img,
  .lp256-logo-shell .brand-mark{
    width:41px!important;
    height:41px!important;
  }

  .lp256-brand-copy b{font-size:11px!important}
  .lp256-brand-copy small{font-size:7px!important}
  .lp256-theme-button,.lp256-menu-button{width:39px!important;height:39px!important}
  .lp256-mobile-menu{
    grid-template-columns:1fr!important;
    margin:0 7px 7px;
    padding:9px!important;
    border-radius:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .lp256-header-shell::before,
  .lp256-edge-light,
  .lp256-scan-line,
  .lp256-ticker-track,
  .lp256-ticker-item i.live,
  .lp256-logo-ring,
  .lp256-logo-pulse,
  .lp256-mini-status i,
  .lp256-theme-orbit,
  .lp256-theme-button::after,
  .lp256-wa-button::after,
  .lp256-login-button::after{
    animation:none!important;
  }
}

/* Animations */
@keyframes lp256BorderFlow{
  from{background-position:0% 50%}
  to{background-position:300% 50%}
}
@keyframes lp256EdgeTravel{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(calc(100vw + 450px));opacity:0}
}
@keyframes lp256Scan{
  0%,100%{transform:translateY(0);opacity:.10}
  50%{transform:translateY(120px);opacity:.42}
}
@keyframes lp256Ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes lp256LivePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.16);opacity:.72}
}
@keyframes lp256LogoSpin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes lp256LogoPulse{
  0%{opacity:.55;transform:scale(.85)}
  100%{opacity:0;transform:scale(1.25)}
}
@keyframes lp256ClickSpark{
  0%{opacity:1;transform:scale(.6)}
  100%{opacity:0;transform:scale(12)}
}
@keyframes lp256Shimmer{
  0%,65%{transform:translateX(-130%) rotate(24deg)}
  82%,100%{transform:translateX(420%) rotate(24deg)}
}
@keyframes lp256ThemeOrbit{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes lp256DrawerOpen{
  from{opacity:0;transform:translateY(-10px) scale(.985)}
  to{opacity:1;transform:none}
}
/* === END FNS V256 === */


/* =========================================================
   FNS V257 PUBLIC BILL CHECK
   Cek tagihan publik aman dengan ID + 4 digit WhatsApp.
   ========================================================= */

.lp257-bill-section{
  scroll-margin-top:145px;
}

.lp257-bill-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);
  gap:18px;
  padding:18px;
  overflow:hidden;
  border:1px solid var(--lp-line);
  border-radius:34px;
  background:
    radial-gradient(circle at 0 0,rgba(0,195,255,.13),transparent 32%),
    radial-gradient(circle at 100% 100%,rgba(132,82,255,.13),transparent 35%),
    linear-gradient(145deg,rgba(6,22,45,.94),rgba(16,24,67,.92));
  box-shadow:var(--lp-shadow);
}

html:not(.dark) .lp257-bill-shell,
html[data-theme="light"] .lp257-bill-shell{
  background:
    radial-gradient(circle at 0 0,rgba(0,195,255,.10),transparent 32%),
    radial-gradient(circle at 100% 100%,rgba(132,82,255,.10),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(238,244,255,.97));
}

.lp257-bill-shell::before{
  content:"";
  position:absolute;
  left:-120px;
  top:38%;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(40,202,255,.13),transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}

.lp257-bill-intro,
.lp257-bill-result{
  position:relative;
  z-index:1;
  min-height:500px;
  border:1px solid var(--lp-line);
  border-radius:27px;
  background:linear-gradient(145deg,var(--lp-card),rgba(255,255,255,.024));
}

.lp257-bill-intro{
  padding:29px;
}

.lp257-bill-intro h2{
  margin:13px 0 12px;
  color:var(--lp-heading)!important;
  font-size:clamp(30px,3.2vw,47px);
  line-height:1.07;
  letter-spacing:-.045em;
}

.lp257-bill-intro>p{
  margin:0;
  color:var(--lp-muted)!important;
  font-size:13px;
  font-weight:700;
  line-height:1.74;
}

.lp257-bill-security{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.lp257-bill-security span{
  padding:8px 10px;
  border:1px solid var(--lp-line);
  border-radius:999px;
  color:var(--lp-muted);
  background:rgba(255,255,255,.04);
  font-size:9px;
  font-weight:850;
}

.lp257-bill-form{
  display:grid;
  gap:13px;
  margin-top:22px;
}

.lp257-bill-form label{
  display:grid;
  gap:7px;
  color:var(--lp-heading)!important;
  font-size:10px;
  font-weight:950;
}

.lp257-input-wrap{
  min-height:51px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid var(--lp-line);
  border-radius:15px;
  background:rgba(4,17,36,.72);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

html:not(.dark) .lp257-input-wrap,
html[data-theme="light"] .lp257-input-wrap{
  background:rgba(255,255,255,.85);
}

.lp257-input-wrap:focus-within{
  border-color:var(--lp-line-strong);
  box-shadow:0 0 0 4px rgba(34,190,255,.08);
  transform:translateY(-1px);
}

.lp257-input-wrap i{
  height:100%;
  display:grid;
  place-items:center;
  border-right:1px solid var(--lp-line);
  font-style:normal;
}

.lp257-input-wrap input{
  width:100%;
  height:49px;
  padding:0 13px;
  border:0!important;
  outline:0!important;
  color:var(--lp-text)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12px;
  font-weight:800;
}

.lp257-bill-form button{
  min-height:52px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px;
  align-items:center;
  gap:8px;
  margin-top:3px;
  border:0;
  border-radius:15px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.18),transparent 36%),
    linear-gradient(135deg,#197fff,#1dccf0 55%,#8258ff);
  box-shadow:0 16px 34px rgba(31,143,255,.27);
  cursor:pointer;
  font-size:12px;
  font-weight:1000;
  transition:transform .2s ease,box-shadow .2s ease;
}

.lp257-bill-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(31,143,255,.32);
}

.lp257-bill-form button span,
.lp257-bill-form button b{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.14);
}

.lp257-bill-note{
  display:block;
  margin-top:13px;
  color:var(--lp-muted);
  font-size:9px;
  line-height:1.55;
  font-weight:750;
}

/* Result panel */
.lp257-bill-result{
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.lp257-bill-result::after{
  content:"";
  position:absolute;
  right:-85px;
  top:-85px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(128,84,255,.13),transparent 70%);
  pointer-events:none;
}

.lp257-result-state{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:16px;
  border:1px solid var(--lp-line);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}

.lp257-result-state>span{
  width:39px;
  height:39px;
  flex:0 0 39px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#188aff,#7e59ff);
  font-weight:1000;
}

.lp257-result-state b{
  display:block;
  color:var(--lp-heading)!important;
  font-size:13px;
}

.lp257-result-state p{
  margin:6px 0 0;
  color:var(--lp-muted)!important;
  font-size:10px;
  line-height:1.65;
  font-weight:700;
}

.lp257-result-state.error{
  border-color:rgba(255,93,124,.30);
  background:rgba(255,68,103,.06);
}

.lp257-result-state.error>span{
  background:linear-gradient(135deg,#ff5478,#ff8450);
}

.lp257-result-state.success{
  border-color:rgba(56,223,145,.28);
  background:rgba(34,197,94,.06);
}

.lp257-result-state.success>span{
  background:linear-gradient(135deg,#16a466,#38df91);
}

/* Empty visual */
.lp257-bill-visual{
  position:relative;
  width:280px;
  height:280px;
  margin:0 auto 18px;
}

.lp257-bill-core{
  position:absolute;
  left:50%;
  top:50%;
  width:90px;
  height:90px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(46,217,255,.32),rgba(100,72,255,.30) 62%,rgba(8,18,43,.84));
  border:1px solid rgba(82,205,255,.30);
  box-shadow:0 0 0 16px rgba(42,199,255,.06),0 0 60px rgba(42,199,255,.28);
  font-size:42px;
  animation:lp257BillCore 5s ease-in-out infinite;
}

.lp257-bill-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(75,194,255,.23);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:lp257BillOrbit 13s linear infinite;
}

.lp257-bill-orbit::before{
  content:"";
  position:absolute;
  left:50%;
  top:-6px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#2bd7ff;
  box-shadow:0 0 17px rgba(43,215,255,.82);
}

.lp257-bill-orbit.orbit-one{width:230px;height:230px}
.lp257-bill-orbit.orbit-two{width:155px;height:155px;animation-direction:reverse;animation-duration:9s}

.lp257-bill-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 18px currentColor;
  animation:lp257BillDot 2s ease infinite;
}

.lp257-bill-dot.dot-one{left:20px;top:78px;color:#31d8ff;background:#31d8ff}
.lp257-bill-dot.dot-two{right:18px;top:110px;color:#9a62ff;background:#9a62ff;animation-delay:-.7s}
.lp257-bill-dot.dot-three{left:70px;bottom:25px;color:#39df91;background:#39df91;animation-delay:-1.4s}

/* Verified customer */
.lp257-customer-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding-bottom:16px;
  border-bottom:1px solid var(--lp-line);
}

.lp257-customer-avatar{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(135deg,#168aff,#8659ff);
  box-shadow:0 13px 28px rgba(31,143,255,.23);
  font-size:20px;
  font-weight:1000;
}

.lp257-customer-head small{
  color:#79ddff;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.10em;
}

.lp257-customer-head h3{
  margin:5px 0 3px;
  color:var(--lp-heading)!important;
  font-size:19px;
}

.lp257-customer-head p{
  margin:0;
  color:var(--lp-muted)!important;
  font-size:10px;
  font-weight:750;
}

.lp257-service-status{
  padding:8px 10px;
  border:1px solid var(--lp-line);
  border-radius:999px;
  color:#a9bed9;
  background:rgba(255,255,255,.04);
  font-size:8px;
  font-weight:1000;
  white-space:nowrap;
}

.lp257-service-status.active{
  color:#80efae;
  border-color:rgba(56,223,145,.26);
  background:rgba(34,197,94,.08);
}

.lp257-service-status.isolated,
.lp257-service-status.isolir,
.lp257-service-status.suspended{
  color:#ff91a8;
  border-color:rgba(255,82,119,.28);
  background:rgba(255,68,103,.08);
}

.lp257-bill-summary{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:14px 0;
}

.lp257-bill-summary article{
  min-height:78px;
  padding:13px;
  border:1px solid var(--lp-line);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.lp257-bill-summary small{
  display:block;
  color:var(--lp-muted);
  font-size:8px;
  font-weight:850;
}

.lp257-bill-summary b{
  display:block;
  margin-top:8px;
  color:var(--lp-heading)!important;
  font-size:17px;
}

.lp257-invoice-list{
  position:relative;
  z-index:2;
  max-height:255px;
  display:grid;
  gap:8px;
  overflow:auto;
  padding-right:4px;
}

.lp257-invoice-list article{
  min-height:62px;
  padding:9px 11px;
  display:grid;
  grid-template-columns:39px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border:1px solid var(--lp-line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.lp257-invoice-icon{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(25,127,255,.20),rgba(128,88,255,.20));
}

.lp257-invoice-info b{
  display:block;
  color:var(--lp-heading)!important;
  font-size:10px;
}

.lp257-invoice-info span{
  display:block;
  margin-top:5px;
  color:var(--lp-muted);
  font-size:8px;
  font-weight:750;
}

.lp257-invoice-amount{
  text-align:right;
}

.lp257-invoice-amount>b{
  display:block;
  color:var(--lp-heading)!important;
  font-size:11px;
}

.lp257-invoice-amount>span{
  display:inline-flex;
  margin-top:5px;
  padding:5px 7px;
  border-radius:999px;
  color:#ffd37b;
  background:rgba(245,158,11,.10);
  font-size:7px;
  font-weight:1000;
}

.lp257-invoice-amount>span.paid{
  color:#7aeda8;
  background:rgba(34,197,94,.10);
}

.lp257-invoice-amount>span.overdue{
  color:#ff8fa7;
  background:rgba(255,68,103,.10);
}

.lp257-invoice-amount>span.cancelled{
  color:#aebfd6;
  background:rgba(148,163,184,.10);
}

.lp257-result-actions{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:14px;
}

.lp257-result-actions a{
  min-height:42px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--lp-line);
  border-radius:13px;
  color:var(--lp-text)!important;
  background:rgba(255,255,255,.035);
  font-size:9px;
  font-weight:1000;
}

.lp257-result-actions a.primary{
  color:#fff!important;
  border-color:transparent;
  background:linear-gradient(135deg,#197fff,#1dccf0,#8258ff);
}

@keyframes lp257BillCore{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-8px)}
}

@keyframes lp257BillOrbit{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes lp257BillDot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.2);opacity:.65}
}

@media(max-width:1180px){
  .lp257-bill-shell{
    grid-template-columns:1fr;
  }
  .lp257-bill-intro,
  .lp257-bill-result{
    min-height:0;
  }
}

@media(max-width:680px){
  .lp257-bill-shell{
    padding:10px;
    border-radius:25px;
  }

  .lp257-bill-intro,
  .lp257-bill-result{
    padding:20px 15px;
    border-radius:20px;
  }

  .lp257-bill-intro h2{
    font-size:31px;
  }

  .lp257-customer-head{
    grid-template-columns:48px minmax(0,1fr);
  }

  .lp257-customer-avatar{
    width:48px;
    height:48px;
  }

  .lp257-service-status{
    grid-column:1/-1;
    justify-self:start;
  }

  .lp257-bill-summary{
    grid-template-columns:1fr;
  }

  .lp257-invoice-list article{
    grid-template-columns:36px minmax(0,1fr);
  }

  .lp257-invoice-amount{
    grid-column:2;
    text-align:left;
  }

  .lp257-bill-visual{
    width:230px;
    height:230px;
  }

  .lp257-bill-orbit.orbit-one{width:200px;height:200px}
  .lp257-bill-orbit.orbit-two{width:135px;height:135px}
}

@media(prefers-reduced-motion:reduce){
  .lp257-bill-core,
  .lp257-bill-orbit,
  .lp257-bill-dot{
    animation:none!important;
  }
}
/* === END FNS V257 === */


/* FNS V257 NAVBAR FIT FOR BILL CHECK */
@media(min-width:1241px){
  .lp256-nav-links a{
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:10px!important;
  }
  .lp256-nav-links a::before{
    width:18px;
    height:18px;
    font-size:9px;
  }
}


/* =========================================================
   FNS V261 DESKTOP SIDEBAR FIXED ZONES
   Laptop/desktop:
   - Logo dan nama aplikasi terkunci di atas.
   - Kolom pencarian terkunci di bawah logo.
   - Hanya daftar menu yang dapat di-scroll.
   - Kartu profil user terkunci di bagian bawah.
   ========================================================= */

@media (min-width: 821px) {
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar {
    position:fixed!important;
    inset:0 auto 0 0!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:var(--sidebar)!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;

    overflow:hidden!important;
    overscroll-behavior:none!important;
    padding:12px 11px 12px!important;
    z-index:999!important;
  }

  /* Area identitas aplikasi: selalu diam di atas. */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .brand {
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    flex:0 0 auto!important;
    min-height:62px!important;
    margin:0!important;
    padding:7px 5px 9px!important;
    z-index:30!important;

    background:transparent!important;
    transform:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .brand::after {
    content:""!important;
    position:absolute!important;
    left:4px!important;
    right:4px!important;
    bottom:0!important;
    height:1px!important;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(55,159,255,.36),
      rgba(128,83,255,.24),
      transparent
    )!important;
    pointer-events:none!important;
  }

  /* Search terkunci, tidak ikut scroll bersama menu. */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .side-search {
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    flex:0 0 auto!important;
    margin:9px 0 9px!important;
    padding:0!important;
    z-index:29!important;

    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .side-search input {
    width:100%!important;
    height:39px!important;
    min-height:39px!important;
    margin:0!important;
    padding:0 13px!important;
    border-radius:13px!important;
    box-shadow:
      inset 0 0 0 1px rgba(96,169,255,.04),
      0 7px 18px rgba(20,60,130,.04)!important;
  }

  /* Hanya bagian menu ini yang dapat bergerak ke atas/bawah. */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .nav {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;

    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:1px 3px 9px 0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    scroll-behavior:smooth!important;
    scrollbar-gutter:stable!important;
    z-index:10!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .nav::-webkit-scrollbar {
    width:6px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .nav::-webkit-scrollbar-track {
    background:rgba(148,163,184,.09)!important;
    border-radius:999px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .nav::-webkit-scrollbar-thumb {
    background:linear-gradient(
      180deg,
      rgba(35,109,255,.62),
      rgba(0,184,255,.47),
      rgba(124,60,255,.46)
    )!important;
    border-radius:999px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .nav::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(
      180deg,
      rgba(35,109,255,.82),
      rgba(0,184,255,.67),
      rgba(124,60,255,.63)
    )!important;
  }

  /* Profil selalu diam di dasar sidebar. */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card {
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:68px!important;
    max-height:76px!important;

    margin:9px 0 0!important;
    padding:9px 10px!important;
    z-index:30!important;

    transform:none!important;
    overflow:hidden!important;
    box-shadow:
      0 13px 30px rgba(24,64,125,.10),
      inset 0 0 0 1px rgba(255,255,255,.18)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card::after {
    content:""!important;
    position:absolute!important;
    left:9px!important;
    right:9px!important;
    top:-10px!important;
    height:1px!important;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(55,159,255,.30),
      rgba(128,83,255,.20),
      transparent
    )!important;
    pointer-events:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card .side-user-photo {
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card .side-user-meta {
    flex:1 1 auto!important;
    min-width:0!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card .side-user-meta b,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card .side-user-meta span {
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Konten utama tetap berada setelah sidebar tetap. */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main {
    margin-left:var(--sidebar)!important;
    width:calc(100vw - var(--sidebar))!important;
    min-width:0!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main > .topbar {
    left:var(--sidebar)!important;
    width:calc(100vw - var(--sidebar))!important;
  }
}

/* Laptop dengan tinggi layar pendek: bagian tetap dipadatkan,
   tetapi logo, search, dan profil tetap tidak ikut scroll. */
@media (min-width: 821px) and (max-height: 720px) {
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar {
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .brand {
    min-height:54px!important;
    padding-top:4px!important;
    padding-bottom:7px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .brand img,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .brand .brand-mark {
    width:36px!important;
    height:36px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .side-search {
    margin-top:7px!important;
    margin-bottom:7px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .side-search input {
    height:35px!important;
    min-height:35px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card {
    min-height:60px!important;
    max-height:66px!important;
    margin-top:7px!important;
    padding:7px 9px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar > .sidebar-user-card .side-user-photo {
    flex-basis:42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
}
/* === END FNS V261 === */


/* =========================================================
   FNS V262 REMOVE DOUBLE SIDEBAR GAP
   V261 membuat sidebar fixed, tetapi layout grid lama masih
   sudah menyediakan kolom sidebar. margin-left tambahan pada
   .main membuat jarak sidebar dihitung dua kali.
   ========================================================= */

@media (min-width: 821px) {
  /*
   * Body tetap memakai grid lama:
   * kolom 1 = lebar sidebar
   * kolom 2 = konten utama
   *
   * Karena main sudah berada di kolom kedua, jangan tambahkan
   * margin-left sebesar sidebar lagi.
   */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main {
    grid-column:2!important;
    grid-row:1!important;

    margin-left:0!important;
    margin-right:0!important;

    width:auto!important;
    max-width:none!important;
    min-width:0!important;

    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  /*
   * Topbar tetap dimulai tepat setelah sidebar.
   * Tidak diberi margin tambahan.
   */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main > .topbar {
    left:var(--sidebar)!important;
    right:0!important;
    width:calc(100vw - var(--sidebar))!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
  }

  /*
   * Pastikan blok isi halaman memenuhi kolom konten dan mulai
   * dekat dengan sidebar sesuai padding normal main.
   */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main > :not(.topbar) {
    max-width:100%!important;
  }
}

/* Laptop lebar: jarak isi terhadap sidebar dibuat ringkas. */
@media (min-width: 1280px) {
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) > .main {
    padding-left:14px!important;
    padding-right:16px!important;
  }
}

/* === END FNS V262 === */


/* =========================================================
   FNS V263 WHATSAPP INTERNAL QR GATEWAY UI
   ========================================================= */
.wa263-device-card{
  position:relative;
  overflow:hidden;
  padding:24px!important;
  border-color:rgba(43,180,255,.28)!important;
  background:
    radial-gradient(circle at 0 0,rgba(0,196,255,.12),transparent 34%),
    radial-gradient(circle at 100% 0,rgba(133,83,255,.13),transparent 36%),
    linear-gradient(145deg,var(--card),rgba(14,29,66,.76))!important;
  box-shadow:0 24px 62px rgba(0,0,0,.18)!important;
}
html:not(.dark) .wa263-device-card,
html[data-theme="light"] .wa263-device-card{
  background:
    radial-gradient(circle at 0 0,rgba(0,166,255,.10),transparent 34%),
    radial-gradient(circle at 100% 0,rgba(133,83,255,.09),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(238,244,255,.96))!important;
}
.wa263-device-card::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  bottom:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(47,202,255,.12),transparent 70%);
  pointer-events:none;
}
.wa263-device-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.wa263-device-head h3{margin:7px 0 5px;color:var(--text)!important;font-size:25px}
.wa263-device-head p{margin:0;max-width:760px}
.wa263-connection-badge{
  flex:0 0 auto;
  min-height:38px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(148,163,184,.25);
  border-radius:999px;
  color:var(--muted);
  background:rgba(148,163,184,.08);
  font-size:10px;
  font-weight:950;
  white-space:nowrap;
}
.wa263-connection-badge.connected{color:#5ce79b;border-color:rgba(56,223,145,.32);background:rgba(34,197,94,.09);box-shadow:0 0 24px rgba(34,197,94,.10)}
.wa263-connection-badge.waiting{color:#73dcff;border-color:rgba(43,199,255,.32);background:rgba(34,190,255,.09)}
.wa263-connection-badge.error{color:#ff879e;border-color:rgba(255,82,119,.30);background:rgba(255,68,103,.08)}
.wa263-device-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:18px}
.wa263-device-info,.wa263-qr-panel{border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.026)}
.wa263-device-info{padding:20px}
.wa263-device-identity{display:grid;grid-template-columns:55px minmax(0,1fr) 14px;align-items:center;gap:13px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.wa263-phone-icon{width:55px;height:55px;display:grid;place-items:center;border-radius:18px;color:#fff;background:linear-gradient(135deg,#168cff,#1cc8ed 55%,#8258ff);box-shadow:0 14px 30px rgba(31,143,255,.25);font-size:27px}
.wa263-device-identity small{display:block;color:#78ddff;font-size:8px;font-weight:1000;letter-spacing:.09em}
.wa263-device-identity b{display:block;margin:5px 0 3px;color:var(--text)!important;font-size:17px}
.wa263-device-identity span:not(.wa263-phone-icon){display:block;color:var(--muted);font-size:10px;font-weight:750}
.wa263-device-identity>i{width:10px;height:10px;border-radius:50%;background:#64748b;box-shadow:0 0 0 7px rgba(100,116,139,.08)}
.wa263-device-identity>i.on{background:#38df91;box-shadow:0 0 0 7px rgba(56,223,145,.10),0 0 18px rgba(56,223,145,.48);animation:wa263Pulse 1.7s ease infinite}
.wa263-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:15px}
.wa263-status-grid article{min-height:72px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.wa263-status-grid small{display:block;color:var(--muted);font-size:8px;font-weight:850}
.wa263-status-grid b{display:block;margin-top:7px;color:var(--text)!important;font-size:10px;word-break:break-word}
.wa263-steps{margin-top:15px;padding:15px;border:1px solid var(--line);border-radius:17px;background:rgba(24,151,255,.045)}
.wa263-steps>b{color:var(--text)!important;font-size:11px}
.wa263-steps ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:9px;font-weight:750;line-height:1.55}
.wa263-device-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.wa263-device-actions .btn{min-height:40px;font-size:9px}
.wa263-device-actions button:disabled{opacity:.55;cursor:wait}
.wa263-error-box{margin-top:13px;padding:11px 13px;border:1px solid rgba(255,82,119,.28);border-radius:13px;color:#ff9caf;background:rgba(255,68,103,.07);font-size:9px;font-weight:800;line-height:1.55}
.wa263-qr-panel{padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:430px}
.wa263-qr-frame{position:relative;width:min(100%,310px);aspect-ratio:1;border:1px solid rgba(73,197,255,.33);border-radius:25px;padding:18px;overflow:hidden;background:linear-gradient(145deg,#ffffff,#edf6ff);box-shadow:0 20px 50px rgba(0,0,0,.18),0 0 0 8px rgba(39,191,255,.045)}
.wa263-qr-frame::before,.wa263-qr-frame::after{content:"";position:absolute;width:42px;height:42px;border-color:#22bdf1;border-style:solid;z-index:4;pointer-events:none}
.wa263-qr-frame::before{left:9px;top:9px;border-width:3px 0 0 3px;border-radius:10px 0 0 0}
.wa263-qr-frame::after{right:9px;bottom:9px;border-width:0 3px 3px 0;border-radius:0 0 10px 0}
.wa263-qr-frame img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;border-radius:12px}
.wa263-qr-placeholder{position:absolute;inset:18px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:15px;color:#50647d;background:radial-gradient(circle at center,rgba(38,190,255,.10),transparent 66%)}
.wa263-qr-placeholder span{width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(33,172,225,.22);border-radius:22px;color:#168bc5;background:rgba(32,184,235,.08);font-size:35px}
.wa263-qr-placeholder b{color:#12263e;font-size:15px}
.wa263-qr-placeholder small{max-width:220px;color:#657991;font-size:9px;line-height:1.55}
.wa263-qr-scan{position:absolute;left:18px;right:18px;top:18px;height:2px;z-index:3;background:linear-gradient(90deg,transparent,#16b8ea,transparent);box-shadow:0 0 15px rgba(22,184,234,.65);opacity:0}
.wa263-device-card.has-qr .wa263-qr-scan{opacity:.9;animation:wa263Scan 2.4s ease-in-out infinite}
.wa263-qr-meta{width:min(100%,310px);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;color:var(--muted);font-size:9px;font-weight:800}
.wa263-qr-meta b{padding:6px 9px;border-radius:9px;color:#7ddfff;background:rgba(33,189,238,.08);font-size:10px}
.wa263-qr-panel>p{max-width:370px;margin:12px 0 0;color:var(--muted)!important;font-size:8px;line-height:1.55}
@keyframes wa263Pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.72}}
@keyframes wa263Scan{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(260px);opacity:1}}
@media(max-width:1100px){.wa263-device-grid{grid-template-columns:1fr}.wa263-qr-panel{min-height:390px}}
@media(max-width:680px){
  .wa263-device-card{padding:14px!important;border-radius:22px!important}
  .wa263-device-head{display:grid}
  .wa263-connection-badge{justify-self:start}
  .wa263-device-info,.wa263-qr-panel{padding:15px;border-radius:19px}
  .wa263-status-grid{grid-template-columns:1fr}
  .wa263-steps ol{grid-template-columns:1fr}
  .wa263-device-actions{display:grid;grid-template-columns:1fr}
  .wa263-device-actions .btn{width:100%}
  .wa263-qr-frame{max-width:270px}
  .wa263-qr-panel{min-height:350px}
}
@media(prefers-reduced-motion:reduce){.wa263-device-identity>i.on,.wa263-device-card.has-qr .wa263-qr-scan{animation:none!important}}
/* === END FNS V263 === */


/* =========================================================
   FNS V264 WHATSAPP ACTION ICON
   Consistent small action icon for invoice and payment tables.
   ========================================================= */
.fns112-whatsapp{
  color:#078a48!important;
  background:#e9fff3!important;
  border-color:rgba(5,150,82,.28)!important;
  box-shadow:0 3px 10px rgba(5,150,82,.10)!important;
}
.fns112-whatsapp:hover{
  color:#ffffff!important;
  background:linear-gradient(135deg,#16a864,#25d366)!important;
  border-color:rgba(22,168,100,.58)!important;
  box-shadow:0 8px 18px rgba(22,168,100,.24)!important;
}
html.dark .fns112-whatsapp,
body.dark .fns112-whatsapp,
body[data-theme="dark"] .fns112-whatsapp,
.theme-dark .fns112-whatsapp{
  color:#86efac!important;
  background:rgba(20,100,58,.38)!important;
  border-color:rgba(74,222,128,.25)!important;
}
html.dark .fns112-whatsapp:hover,
body.dark .fns112-whatsapp:hover,
body[data-theme="dark"] .fns112-whatsapp:hover,
.theme-dark .fns112-whatsapp:hover{
  color:#ffffff!important;
  background:linear-gradient(135deg,#12834d,#25d366)!important;
}
/* === END FNS V264 === */


/* =========================================================
   FNS V265 DUITKU PAYMENT GATEWAY
   Premium configuration, safe credential display, diagnostics,
   URL separation, connection test, payment methods, and return page.
   ========================================================= */

.v265-gateway-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:24px;
  align-items:center;
  margin:18px 0;
  padding:30px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 10%,rgba(0,191,255,.20),transparent 34%),
    radial-gradient(circle at 88% 20%,rgba(127,83,255,.18),transparent 36%),
    linear-gradient(135deg,rgba(35,147,255,.14),rgba(0,213,255,.08),rgba(147,89,255,.12));
  box-shadow:var(--shadow);
}

.v265-gateway-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(102,177,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(102,177,255,.12) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,#000,transparent 78%);
}

.v265-gateway-hero-copy,
.v265-gateway-mode{
  position:relative;
  z-index:1;
}

.v265-gateway-hero h2{
  max-width:900px;
  margin:10px 0 10px;
  color:var(--text);
  font-size:clamp(28px,3vw,43px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.v265-gateway-hero p{
  max-width:960px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  line-height:1.7;
}

.v265-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.v265-hero-tags span{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.05);
  font-size:9px;
  font-weight:900;
}

.v265-gateway-mode{
  min-height:150px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:25px;
  color:#fff;
  background:
    radial-gradient(circle at 30% 0,rgba(255,255,255,.16),transparent 45%),
    linear-gradient(145deg,#17263c,#3d4960);
  box-shadow:
    0 20px 40px rgba(14,30,57,.19),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.v265-gateway-mode.active{
  background:
    radial-gradient(circle at 30% 0,rgba(255,255,255,.18),transparent 45%),
    linear-gradient(145deg,#0877c9,#18bde8 54%,#6552df);
}

.v265-gateway-mode>span{
  color:rgba(255,255,255,.86);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
}

.v265-gateway-mode>b{
  display:block;
  margin:8px 0 5px;
  font-size:26px;
  letter-spacing:.03em;
}

.v265-gateway-mode>small{
  color:rgba(255,255,255,.80);
  font-size:9px;
  font-weight:800;
}

.v265-inline-warning{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin:0 0 16px;
  padding:16px 18px;
  border:1px solid rgba(245,158,11,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(255,214,102,.06));
}

.v265-inline-warning>span{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(245,158,11,.14);
  font-size:19px;
}

.v265-inline-warning b{
  display:block;
  color:var(--text);
  font-size:13px;
}

.v265-inline-warning p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.65;
}

/* Diagnostics */
.v265-diagnostic-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}

.v265-diagnostic-card{
  position:relative;
  min-height:126px;
  padding:18px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:21px;
  background:linear-gradient(145deg,var(--card),rgba(255,255,255,.025));
  box-shadow:0 15px 34px rgba(30,77,143,.07);
}

.v265-diagnostic-card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-42px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(72,155,255,.10),transparent 70%);
}

.v265-diagnostic-card>span{
  display:block;
  width:33px;
  height:4px;
  margin-bottom:14px;
  border-radius:999px;
  background:#94a3b8;
}

.v265-diagnostic-card.ok>span{background:#22c55e;box-shadow:0 0 16px rgba(34,197,94,.42)}
.v265-diagnostic-card.warn>span{background:#f59e0b;box-shadow:0 0 16px rgba(245,158,11,.38)}
.v265-diagnostic-card.bad>span{background:#ef4444;box-shadow:0 0 16px rgba(239,68,68,.38)}

.v265-diagnostic-card small{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.075em;
}

.v265-diagnostic-card b{
  display:block;
  margin-top:7px;
  color:var(--text);
  font-size:19px;
}

.v265-diagnostic-card p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  line-height:1.5;
  overflow-wrap:anywhere;
}

/* Main settings layout */
.v265-gateway-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  gap:16px;
  align-items:stretch;
}

.v265-settings-card,
.v265-url-card,
.v265-method-card,
.v265-log-card{
  border-radius:25px!important;
  overflow:hidden;
}

.v265-settings-card,
.v265-url-card{
  min-height:600px;
}

.v265-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}

.v265-card-heading>div{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.v265-card-heading>div>span{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#1789ff,#14caed 55%,#8059ff);
  box-shadow:0 11px 25px rgba(31,143,255,.25);
  font-size:12px;
  font-weight:1000;
}

.v265-card-heading h3{
  margin:0;
  color:var(--text);
  font-size:17px;
}

.v265-card-heading p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
  font-weight:750;
}

.v265-card-heading>i{
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  color:#64748b;
  background:rgba(148,163,184,.10);
  font-size:8px;
  font-style:normal;
  font-weight:1000;
}

.v265-card-heading>i.ok{
  color:#0b8a42;
  border-color:rgba(34,197,94,.24);
  background:rgba(34,197,94,.09);
}

.v265-card-heading>i.bad{
  color:#c0273f;
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.09);
}

/* Form */
.v265-gateway-form{
  display:grid;
  gap:14px;
}

.v265-field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.v265-gateway-form label{
  display:grid;
  gap:7px;
  color:var(--text);
  font-size:10px;
  font-weight:950;
}

.v265-gateway-form label>small{
  color:var(--muted);
  font-size:8px;
  font-weight:700;
  line-height:1.5;
}

.v265-gateway-form input,
.v265-gateway-form select{
  width:100%;
  min-height:47px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text);
  background:var(--input);
  outline:none;
  box-shadow:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.v265-gateway-form input:focus,
.v265-gateway-form select:focus{
  border-color:rgba(27,162,255,.60);
  box-shadow:0 0 0 4px rgba(29,164,255,.09);
  transform:translateY(-1px);
}

.v265-secret-field,
.v265-number-field{
  position:relative;
  display:block;
}

.v265-secret-field input{
  padding-right:50px;
}

.v265-secret-field button{
  position:absolute;
  right:7px;
  top:7px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  background:rgba(255,255,255,.05);
  cursor:pointer;
}

.v265-number-field input{
  padding-right:75px;
}

.v265-number-field>b{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  padding:6px 8px;
  border-radius:8px;
  color:var(--muted);
  background:rgba(148,163,184,.10);
  font-size:8px;
  font-weight:1000;
}

.v265-check-row{
  grid-template-columns:22px minmax(0,1fr)!important;
  align-items:flex-start;
  gap:10px!important;
  padding:13px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(35,147,255,.045);
}

.v265-check-row input{
  width:18px!important;
  height:18px!important;
  min-height:18px!important;
  margin:1px 0 0!important;
  padding:0!important;
  accent-color:#168eff;
}

.v265-check-row span b{
  display:block;
  color:var(--text);
  font-size:10px;
}

.v265-check-row span small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}

.v265-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:2px;
}

.v265-form-actions .btn{
  min-height:46px;
  flex:1 1 210px;
}

/* URL panel */
.v265-url-list{
  display:grid;
  gap:11px;
}

.v265-url-list>div{
  display:grid;
  grid-template-columns:minmax(145px,.68fr) minmax(0,1.32fr) auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(35,147,255,.04);
}

.v265-url-list span b{
  display:block;
  color:var(--text);
  font-size:10px;
}

.v265-url-list span small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
}

.v265-url-list code{
  min-width:0;
  padding:9px 10px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  background:rgba(4,18,38,.07);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.v265-url-list button{
  min-height:35px;
  padding:0 11px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#1789ff,#18c7ea);
  cursor:pointer;
  font-size:8px;
  font-weight:1000;
}

.v265-endpoint-box,
.v265-signature-box{
  margin-top:14px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(255,255,255,.025);
}

.v265-endpoint-box h4,
.v265-signature-box h4{
  margin:0 0 11px;
  color:var(--text);
  font-size:12px;
}

.v265-endpoint-box dl{
  display:grid;
  gap:8px;
  margin:0;
}

.v265-endpoint-box dl>div{
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  gap:9px;
}

.v265-endpoint-box dt{
  color:var(--muted);
  font-size:8px;
  font-weight:950;
}

.v265-endpoint-box dd{
  margin:0;
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px;
  overflow-wrap:anywhere;
}

.v265-endpoint-box p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.55;
}

.v265-signature-box{
  display:grid;
  gap:8px;
  color:#e9f3ff;
  background:#071425;
}

.v265-signature-box h4{color:#fff}

.v265-signature-box code{
  display:block;
  color:#d7e8fb;
  font-size:8px;
  line-height:1.5;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Payment methods */
.v265-method-card,
.v265-log-card{
  margin-top:16px;
}

.v265-method-card .card-head>div p,
.v265-log-card .card-head>div p{
  margin:4px 0 0;
}

.v265-method-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.v265-method-grid article{
  min-height:76px;
  padding:11px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(35,147,255,.035);
}

.v265-method-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.v265-method-logo img{
  width:100%;
  height:100%;
  padding:5px;
  object-fit:contain;
}

.v265-method-logo span{font-size:19px}

.v265-method-grid article b{
  display:block;
  color:var(--text);
  font-size:10px;
}

.v265-method-grid article small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:8px;
  font-weight:750;
}

.v265-method-grid article strong{
  color:#0d9c53;
  font-size:9px;
  white-space:nowrap;
}

.v265-empty-method{
  min-height:120px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:1px dashed var(--border);
  border-radius:17px;
  background:rgba(35,147,255,.025);
}

.v265-empty-method>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(23,137,255,.16),rgba(128,89,255,.16));
  font-size:23px;
}

.v265-empty-method b{
  color:var(--text);
  font-size:12px;
}

.v265-empty-method p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}

.v265-log-response{
  display:inline-block;
  max-width:320px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Public return page */
.v265-return-page{
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  padding:20px;
  color:#eef7ff;
  background:
    radial-gradient(circle at 10% 10%,rgba(0,192,255,.20),transparent 34%),
    radial-gradient(circle at 90% 15%,rgba(128,82,255,.24),transparent 36%),
    linear-gradient(135deg,#020814,#07172d 52%,#151044);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.v265-return-card{
  width:min(560px,100%);
  padding:34px;
  text-align:center;
  border:1px solid rgba(104,187,255,.23);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(8,25,50,.94),rgba(19,25,70,.92));
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.v265-return-icon{
  width:86px;
  height:86px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1a8cff,#7659ff);
  box-shadow:0 0 0 16px rgba(35,178,255,.07),0 0 55px rgba(35,178,255,.25);
  font-size:36px;
  font-weight:1000;
}

.v265-return-card.success .v265-return-icon{
  background:linear-gradient(135deg,#12a45c,#3cdf92);
}

.v265-return-card.failed .v265-return-icon{
  background:linear-gradient(135deg,#ef426f,#ff7c4e);
}

.v265-return-card>span{
  color:#79dcff;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.11em;
}

.v265-return-card h1{
  margin:12px 0 9px;
  color:#fff;
  font-size:31px;
  line-height:1.1;
}

.v265-return-card p{
  margin:0;
  color:#aec4df;
  font-size:12px;
  line-height:1.7;
}

.v265-return-invoice{
  margin-top:18px;
  padding:13px;
  border:1px solid rgba(104,187,255,.18);
  border-radius:14px;
  color:#aec4df;
  background:rgba(255,255,255,.035);
  font-size:10px;
}

.v265-return-invoice b{color:#fff}

.v265-return-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}

.v265-return-actions a{
  min-height:44px;
  flex:1 1 190px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(104,187,255,.22);
  border-radius:14px;
  color:#eef7ff;
  background:rgba(255,255,255,.04);
  font-size:10px;
  font-weight:950;
  text-decoration:none;
}

.v265-return-actions a:first-child{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#1789ff,#18c7ea,#8059ff);
}

/* Dark-mode hardening */
body.dark .v265-settings-card,
body.dark .v265-url-card,
body.dark .v265-method-card,
body.dark .v265-log-card,
html.dark .v265-settings-card,
html.dark .v265-url-card,
html.dark .v265-method-card,
html.dark .v265-log-card{
  background:linear-gradient(145deg,rgba(7,22,44,.96),rgba(13,24,54,.96))!important;
}

body.dark .v265-gateway-form input,
body.dark .v265-gateway-form select,
html.dark .v265-gateway-form input,
html.dark .v265-gateway-form select{
  color:#edf6ff!important;
  background:#07182e!important;
  border-color:rgba(105,178,255,.22)!important;
}

/* Responsive */
@media(max-width:1200px){
  .v265-diagnostic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v265-gateway-layout{grid-template-columns:1fr}
  .v265-settings-card,.v265-url-card{min-height:0}
  .v265-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .v265-gateway-hero{
    grid-template-columns:1fr;
    padding:22px 16px;
    border-radius:24px;
  }

  .v265-gateway-mode{
    min-height:115px;
  }

  .v265-diagnostic-grid{grid-template-columns:1fr}
  .v265-field-row{grid-template-columns:1fr}
  .v265-card-heading{align-items:flex-start}
  .v265-card-heading>i{display:none}

  .v265-url-list>div{
    grid-template-columns:1fr;
  }

  .v265-url-list button{
    width:100%;
  }

  .v265-endpoint-box dl>div{
    grid-template-columns:1fr;
    gap:4px;
  }

  .v265-method-grid{grid-template-columns:1fr}
  .v265-method-grid article{
    grid-template-columns:42px minmax(0,1fr);
  }
  .v265-method-grid article strong{
    grid-column:2;
  }

  .v265-form-actions .btn{
    flex-basis:100%;
  }
}

/* === END FNS V265 === */


/* =========================================================
   FNS V266 CUSTOMER PAYMENT DISCOUNT VOUCHERS
   ========================================================= */
.btn.voucher,.fns112-voucher{color:#fff!important;background:linear-gradient(135deg,#7c3aed,#d946ef)!important;border-color:transparent!important;box-shadow:0 9px 22px rgba(124,58,237,.22)!important}
.fns112-voucher:hover{transform:translateY(-2px) scale(1.04)!important}
.v266-old-total{color:var(--muted)!important;text-decoration:line-through;font-weight:750}
.v266-code-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px dashed rgba(168,85,247,.42);border-radius:8px;color:#7c3aed;background:rgba(168,85,247,.09);font-size:9px;font-weight:1000;letter-spacing:.04em;white-space:nowrap}
html.dark .v266-code-badge,body.dark .v266-code-badge{color:#d8b4fe}
.v266-voucher-hero,.v266-apply-hero{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:18px;align-items:center;margin:18px 0;padding:26px;overflow:hidden;border:1px solid var(--border);border-radius:28px;background:radial-gradient(circle at 5% 0,rgba(216,70,239,.18),transparent 34%),radial-gradient(circle at 95% 20%,rgba(59,130,246,.16),transparent 36%),linear-gradient(135deg,rgba(124,58,237,.11),rgba(6,182,212,.07));box-shadow:var(--shadow)}
.v266-voucher-hero::after,.v266-apply-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(139,92,246,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.08) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,#000,transparent 84%)}
.v266-voucher-hero>* ,.v266-apply-hero>*{position:relative;z-index:1}
.v266-voucher-hero-icon,.v266-apply-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;color:#fff;background:linear-gradient(135deg,#7c3aed,#d946ef 54%,#0ea5e9);box-shadow:0 16px 34px rgba(124,58,237,.28);font-size:28px}
.v266-voucher-hero h1,.v266-apply-hero h1{margin:7px 0;color:var(--text);font-size:clamp(25px,3vw,38px);letter-spacing:-.035em}.v266-voucher-hero p,.v266-apply-hero p{margin:0;color:var(--muted);font-size:11px;line-height:1.65;font-weight:700}
.v266-voucher-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.v266-voucher-stats article{min-height:118px;padding:18px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,var(--card),rgba(168,85,247,.035));box-shadow:0 13px 30px rgba(49,46,129,.07)}.v266-voucher-stats span,.v266-voucher-stats small{display:block;color:var(--muted);font-size:9px;font-weight:850}.v266-voucher-stats b{display:block;margin:10px 0 7px;color:var(--text);font-size:24px}
.v266-voucher-layout,.v266-apply-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:16px;align-items:start}.v266-voucher-form-card,.v266-voucher-guide,.v266-voucher-table-card,.v266-apply-summary,.v266-apply-form-card{border-radius:24px!important}.v266-voucher-guide{position:sticky;top:100px}.v266-voucher-guide>div{margin-top:10px;padding:13px;border:1px solid var(--border);border-radius:14px;background:rgba(124,58,237,.035)}.v266-voucher-guide b{color:var(--text);font-size:10px}.v266-voucher-guide p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.55}
.v266-voucher-form{gap:12px}.v266-voucher-form label{font-weight:900}.v266-code-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.v266-code-input button{min-width:58px;border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#7c3aed,#d946ef);font-size:9px;font-weight:1000;cursor:pointer}.v266-voucher-table-card{margin-top:16px}.v266-voucher-table-card td{vertical-align:middle}
.v266-apply-layout{grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr)}.v266-apply-summary dl{display:grid;gap:9px;margin:16px 0}.v266-apply-summary dl>div{display:flex;justify-content:space-between;gap:15px;padding:12px;border:1px solid var(--border);border-radius:13px;background:rgba(124,58,237,.025)}.v266-apply-summary dt{color:var(--muted);font-size:9px;font-weight:850}.v266-apply-summary dd{margin:0;color:var(--text);font-size:11px;font-weight:1000}.v266-apply-summary dd.discount{color:#ec4899}.v266-apply-summary .total{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(14,165,233,.08))}.v266-apply-summary .total dd{font-size:20px}.v266-apply-summary>p{color:var(--muted);font-size:9px;line-height:1.6}
.v266-apply-form{display:grid;gap:11px}.v266-apply-form label{display:grid;gap:7px;color:var(--text);font-size:10px;font-weight:950}.v266-apply-form input{min-height:52px;padding:0 14px;border:1px solid var(--border);border-radius:15px;color:var(--text);background:var(--input);font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;outline:none}.v266-apply-form input:focus{border-color:rgba(168,85,247,.58);box-shadow:0 0 0 4px rgba(168,85,247,.09)}.v266-apply-form .btn{min-height:46px}.v266-apply-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
@media(max-width:1100px){.v266-voucher-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v266-voucher-layout,.v266-apply-layout{grid-template-columns:1fr}.v266-voucher-guide{position:static}}
@media(max-width:680px){.v266-voucher-hero,.v266-apply-hero{grid-template-columns:52px minmax(0,1fr);padding:18px 14px;border-radius:22px}.v266-voucher-hero>.badge,.v266-apply-hero>.badge{grid-column:1/-1;justify-self:start}.v266-voucher-hero-icon,.v266-apply-icon{width:48px;height:48px;border-radius:15px;font-size:21px}.v266-voucher-stats{grid-template-columns:1fr 1fr}.v266-voucher-stats article{min-height:100px;padding:14px}.v266-voucher-stats b{font-size:18px}.v266-code-input{grid-template-columns:1fr}.v266-code-input button{min-height:40px}.v266-apply-form .btn{width:100%}}
/* === END FNS V266 === */

/* =========================================================
   FNS V267 LANDING ONLINE PAYMENT
   ========================================================= */
.lp267-old-price{display:block!important;margin-bottom:3px!important;color:var(--lp-muted)!important;font-size:8px!important;text-decoration:line-through!important;opacity:.78}
.lp267-voucher-note{display:block!important;margin-top:5px!important;color:#6fe1a4!important;font-size:7px!important;font-weight:900!important}
.lp267-inline-pay-form{margin:7px 0 0}
.lp267-inline-pay-form button{min-height:31px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;color:#fff;background:radial-gradient(circle at 25% 0,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#0d8cff,#18c9ed 55%,#7657ff);box-shadow:0 9px 22px rgba(31,143,255,.24),inset 0 1px 0 rgba(255,255,255,.22);cursor:pointer;font-size:8px;font-weight:1000;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}
.lp267-inline-pay-form button:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(31,143,255,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.lp267-result-actions{align-items:stretch}.lp267-main-pay-form{flex:1 1 210px;min-width:210px}
.lp267-main-pay-form button{width:100%;min-height:48px;padding:0 12px;display:grid;grid-template-columns:33px minmax(0,1fr) auto;align-items:center;gap:8px;border:0;border-radius:14px;color:#fff;background:radial-gradient(circle at 18% 0,rgba(255,255,255,.22),transparent 38%),linear-gradient(135deg,#0b8dff,#16caed 53%,#7658ff);box-shadow:0 15px 34px rgba(31,143,255,.28),inset 0 1px 0 rgba(255,255,255,.22);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.lp267-main-pay-form button:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(31,143,255,.35),inset 0 1px 0 rgba(255,255,255,.22)}
.lp267-main-pay-form button>span{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.16);font-size:15px}.lp267-main-pay-form button>b{text-align:left;font-size:10px}.lp267-main-pay-form button>small{padding:7px 9px;border-radius:9px;color:#fff;background:rgba(255,255,255,.14);font-size:8px;font-weight:1000;white-space:nowrap}
.lp267-multi-invoice-note,.lp267-gateway-unavailable{flex:1 1 100%;min-height:42px;padding:0 13px;display:flex;align-items:center;border:1px solid var(--lp-line);border-radius:13px;color:var(--lp-muted);background:rgba(255,255,255,.035);font-size:8px;font-weight:800}.lp267-gateway-unavailable{color:#ffd07b;border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.07)}
.lp267-payment-page{min-height:100vh;margin:0;display:grid;place-items:center;padding:20px;color:#eef7ff;background:radial-gradient(circle at 10% 10%,rgba(0,192,255,.21),transparent 34%),radial-gradient(circle at 90% 15%,rgba(128,82,255,.25),transparent 36%),linear-gradient(135deg,#020814,#07172d 52%,#151044);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.lp267-payment-message{width:min(560px,100%);padding:36px;text-align:center;border:1px solid rgba(104,187,255,.24);border-radius:30px;background:radial-gradient(circle at 50% 0,rgba(53,190,255,.09),transparent 45%),linear-gradient(145deg,rgba(8,25,50,.96),rgba(19,25,70,.94));box-shadow:0 30px 90px rgba(0,0,0,.38)}
.lp267-payment-message-icon{width:86px;height:86px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#ef426f,#ff7c4e);box-shadow:0 0 0 16px rgba(255,90,110,.07),0 0 55px rgba(255,90,110,.24);font-size:36px;font-weight:1000}.lp267-payment-message.success .lp267-payment-message-icon{background:linear-gradient(135deg,#12a45c,#3cdf92);box-shadow:0 0 0 16px rgba(52,220,143,.07),0 0 55px rgba(52,220,143,.24)}
.lp267-payment-message>span{color:#79dcff;font-size:9px;font-weight:1000;letter-spacing:.12em}.lp267-payment-message h1{margin:12px 0 10px;color:#fff;font-size:31px;line-height:1.12}.lp267-payment-message p{margin:0;color:#aec4df;font-size:12px;line-height:1.75}.lp267-payment-message-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.lp267-payment-message-actions a{min-height:46px;flex:1 1 190px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(104,187,255,.22);border-radius:14px;color:#eef7ff;background:rgba(255,255,255,.04);font-size:10px;font-weight:950;text-decoration:none}.lp267-payment-message-actions a.primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,#1789ff,#18c7ea,#8059ff)}
@media(max-width:680px){.lp267-inline-pay-form button{width:100%;min-height:38px}.lp267-main-pay-form{flex-basis:100%;min-width:0}.lp267-main-pay-form button{min-height:52px}.lp267-payment-message{padding:28px 18px;border-radius:24px}.lp267-payment-message h1{font-size:27px}}
/* === END FNS V267 === */


/* =========================================================
   FNS V268 ONLINE CHECKOUT VOUCHER
   Checkout voucher persentase sebelum redirect ke Duitku.
   ========================================================= */

.v268-percentage-only{
  min-height:47px;
  padding:8px 12px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(24,145,255,.09),rgba(121,82,255,.07));
}
.v268-percentage-only>b{
  grid-row:1/3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#168cff,#7958ff);
  font-size:18px;
}
.v268-percentage-only>span{color:var(--text);font-size:11px;font-weight:950}
.v268-percentage-only>small{color:var(--muted);font-size:8px;font-weight:700}

.v268-checkout-page{
  min-height:100vh;
  margin:0;
  color:#eaf5ff;
  background:
    radial-gradient(circle at 8% 8%,rgba(0,193,255,.20),transparent 33%),
    radial-gradient(circle at 92% 10%,rgba(126,82,255,.26),transparent 35%),
    radial-gradient(circle at 50% 100%,rgba(38,213,169,.08),transparent 34%),
    linear-gradient(135deg,#020814,#06162c 52%,#171047);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.v268-checkout-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(91,170,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,170,255,.18) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}

.v268-checkout-shell{
  position:relative;
  z-index:1;
  width:min(1220px,calc(100% - 32px));
  margin:0 auto;
  padding:22px 0 28px;
}

.v268-checkout-header{
  min-height:68px;
  padding:10px 13px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  border:1px solid rgba(100,184,255,.21);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(7,24,48,.92),rgba(19,26,69,.90));
  box-shadow:0 20px 55px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.v268-checkout-back{
  min-height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  border:1px solid rgba(104,187,255,.20);
  border-radius:13px;
  color:#cbe5ff;
  background:rgba(255,255,255,.035);
  font-size:10px;
  font-weight:900;
  text-decoration:none;
}

.v268-checkout-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.v268-checkout-brand>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#158cff,#17c8ec 55%,#7859ff);
  box-shadow:0 11px 24px rgba(29,147,255,.28);
  font-size:11px;
  font-weight:1000;
}
.v268-checkout-brand b{display:block;color:#fff;font-size:13px;letter-spacing:.02em}
.v268-checkout-brand small{display:block;margin-top:3px;color:#8eabc8;font-size:8px;font-weight:800}

.v268-secure-badge{
  padding:10px 12px;
  border:1px solid rgba(54,220,145,.25);
  border-radius:999px;
  color:#76eda9;
  background:rgba(34,197,94,.08);
  font-size:8px;
  font-weight:1000;
}

.v268-checkout-notice{
  margin-top:13px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid rgba(54,220,145,.24);
  border-radius:16px;
  background:rgba(34,197,94,.08);
}
.v268-checkout-notice.error{border-color:rgba(255,87,121,.27);background:rgba(239,68,68,.08)}
.v268-checkout-notice>span{
  width:32px;height:32px;display:grid;place-items:center;border-radius:10px;
  color:#fff;background:#25bd71;font-weight:1000;
}
.v268-checkout-notice.error>span{background:#ef4e70}
.v268-checkout-notice p{margin:0;color:#dcecff;font-size:10px;font-weight:800;line-height:1.55}

.v268-checkout-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);
  gap:16px;
  margin-top:16px;
}

.v268-checkout-card{
  position:relative;
  overflow:hidden;
  padding:24px;
  border:1px solid rgba(104,187,255,.20);
  border-radius:27px;
  background:
    radial-gradient(circle at 10% 0,rgba(24,151,255,.09),transparent 36%),
    linear-gradient(145deg,rgba(7,24,48,.95),rgba(18,25,67,.93));
  box-shadow:0 26px 75px rgba(0,0,0,.27);
}

.v268-checkout-card::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-85px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(121,83,255,.14),transparent 70%);
  pointer-events:none;
}

.v268-card-title{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding-bottom:17px;
  border-bottom:1px solid rgba(104,187,255,.15);
}
.v268-card-title>span{
  width:52px;height:52px;display:grid;place-items:center;border-radius:17px;
  background:linear-gradient(135deg,rgba(22,140,255,.22),rgba(120,89,255,.22));
  font-size:23px;
}
.v268-card-title small{color:#72d9ff;font-size:8px;font-weight:1000;letter-spacing:.11em}
.v268-card-title h1,.v268-card-title h2{margin:5px 0 0;color:#fff;line-height:1.12}
.v268-card-title h1{font-size:20px}.v268-card-title h2{font-size:18px}
.v268-card-title>i{
  padding:7px 9px;border-radius:999px;color:#ffd178;background:rgba(245,158,11,.10);
  font-size:7px;font-style:normal;font-weight:1000;
}
.v268-card-title>i.overdue{color:#ff8fa7;background:rgba(239,68,68,.10)}
.v268-card-title>i.paid{color:#74eba7;background:rgba(34,197,94,.10)}
.v268-card-title.compact{grid-template-columns:52px minmax(0,1fr)}

.v268-customer-box{
  position:relative;z-index:1;display:flex;align-items:center;gap:11px;
  margin-top:17px;padding:13px;border:1px solid rgba(104,187,255,.14);
  border-radius:16px;background:rgba(255,255,255,.028);
}
.v268-customer-avatar{
  width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,#178cff,#7958ff);font-size:17px;font-weight:1000;
}
.v268-customer-box b{display:block;color:#fff;font-size:11px}
.v268-customer-box small{display:block;margin-top:5px;color:#91abc7;font-size:8px;font-weight:750}

.v268-invoice-meta{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;margin:14px 0 0;
}
.v268-invoice-meta>div{padding:12px;border:1px solid rgba(104,187,255,.13);border-radius:14px;background:rgba(255,255,255,.025)}
.v268-invoice-meta dt{color:#819bb8;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.v268-invoice-meta dd{margin:7px 0 0;color:#eef7ff;font-size:9px;font-weight:900}

.v268-total-box{
  position:relative;z-index:1;display:grid;gap:0;margin-top:14px;overflow:hidden;
  border:1px solid rgba(104,187,255,.17);border-radius:18px;background:rgba(3,16,34,.46);
}
.v268-total-box>div{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(104,187,255,.10)}
.v268-total-box>div:last-child{border-bottom:0}
.v268-total-box span{color:#91aac5;font-size:9px;font-weight:800}
.v268-total-box b{color:#f1f7ff;font-size:11px}
.v268-total-box .discount b{color:#70e5a6}
.v268-total-box .voucher{background:rgba(126,83,255,.07)}
.v268-total-box .voucher b{color:#bda8ff}
.v268-total-box .grand-total{padding:16px 14px;background:linear-gradient(135deg,rgba(20,139,255,.15),rgba(124,81,255,.14))}
.v268-total-box .grand-total span{color:#d4e6fa;font-size:10px}
.v268-total-box .grand-total b{font-size:23px;background:linear-gradient(90deg,#53d9ff,#8c70ff);-webkit-background-clip:text;background-clip:text;color:transparent}

.v268-voucher-intro{position:relative;z-index:1;margin:17px 0 0;color:#91abc7;font-size:10px;line-height:1.65;font-weight:750}
.v268-applied-voucher{
  position:relative;z-index:1;margin-top:16px;padding:14px;display:flex;align-items:center;gap:11px;
  border:1px solid rgba(48,220,142,.23);border-radius:17px;background:rgba(34,197,94,.07);
}
.v268-applied-voucher>span{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,#14a75f,#37db90);font-weight:1000}
.v268-applied-voucher small{display:block;color:#73e9a7;font-size:7px;font-weight:1000;letter-spacing:.08em}
.v268-applied-voucher b{display:block;margin-top:4px;color:#fff;font-size:13px}
.v268-applied-voucher p{margin:4px 0 0;color:#a6c2dc;font-size:8px;font-weight:750}

.v268-remove-voucher-form{position:relative;z-index:1;margin-top:8px;text-align:right}
.v268-remove-voucher-form button{min-height:32px;padding:0 10px;border:1px solid rgba(255,94,124,.22);border-radius:10px;color:#ff9aad;background:rgba(239,68,68,.07);cursor:pointer;font-size:8px;font-weight:900}

.v268-voucher-form{position:relative;z-index:1;margin-top:14px}
.v268-voucher-form>label{display:block;margin-bottom:7px;color:#eaf4ff;font-size:9px;font-weight:950}
.v268-voucher-form>div{min-height:49px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;overflow:hidden;border:1px solid rgba(104,187,255,.19);border-radius:14px;background:rgba(3,17,36,.60)}
.v268-voucher-form>div>span{height:100%;display:grid;place-items:center;border-right:1px solid rgba(104,187,255,.13)}
.v268-voucher-form input{width:100%;height:47px;padding:0 12px;border:0;outline:0;color:#f1f7ff;background:transparent;font-size:10px;font-weight:850;text-transform:uppercase}
.v268-voucher-form input::placeholder{color:#657f9e;text-transform:none}
.v268-voucher-form button{height:37px;margin-right:6px;padding:0 13px;border:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,#168cff,#18c8ec,#7859ff);cursor:pointer;font-size:8px;font-weight:1000}
.v268-voucher-form>small{display:block;margin-top:7px;color:#7893b0;font-size:7px;line-height:1.5;font-weight:750}

.v268-gateway-active-note{position:relative;z-index:1;margin-top:14px;padding:12px;display:flex;gap:10px;border:1px solid rgba(245,158,11,.23);border-radius:14px;background:rgba(245,158,11,.07)}
.v268-gateway-active-note span{font-size:19px}.v268-gateway-active-note p{margin:0;color:#e6c886;font-size:8px;line-height:1.55;font-weight:800}

.v268-payment-security{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.v268-payment-security>div{min-height:82px;padding:10px;border:1px solid rgba(104,187,255,.12);border-radius:14px;background:rgba(255,255,255,.022)}
.v268-payment-security>div>span{font-size:17px}.v268-payment-security p{margin:7px 0 0}.v268-payment-security b{display:block;color:#edf6ff;font-size:8px}.v268-payment-security small{display:block;margin-top:4px;color:#7893ae;font-size:7px;line-height:1.45}

.v268-pay-form{position:relative;z-index:1;margin-top:16px}
.v268-pay-form button{width:100%;min-height:58px;padding:0 12px;display:grid;grid-template-columns:38px minmax(0,1fr) 32px;align-items:center;gap:10px;border:0;border-radius:16px;color:#fff;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.20),transparent 38%),linear-gradient(135deg,#108cff,#17caeb 53%,#7859ff);box-shadow:0 17px 38px rgba(27,145,255,.27);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.v268-pay-form button:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(27,145,255,.34)}
.v268-pay-form button>span,.v268-pay-form button>i{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.14);font-style:normal}
.v268-pay-form button>div{text-align:left}.v268-pay-form button b{display:block;font-size:11px}.v268-pay-form button small{display:block;margin-top:4px;color:rgba(255,255,255,.80);font-size:8px;font-weight:750}
.v268-paid-message{position:relative;z-index:1;margin-top:16px;padding:15px;text-align:center;border:1px solid rgba(48,220,142,.24);border-radius:14px;color:#76ecaa;background:rgba(34,197,94,.08);font-size:9px;font-weight:950}

.v268-checkout-footer{display:flex;justify-content:space-between;gap:15px;margin-top:15px;padding:0 8px;color:#66819f;font-size:8px;font-weight:750}

@media(max-width:900px){
  .v268-checkout-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .v268-checkout-shell{width:min(100% - 18px,1220px);padding-top:9px}
  .v268-checkout-header{grid-template-columns:auto minmax(0,1fr);border-radius:18px}
  .v268-secure-badge{display:none}
  .v268-checkout-brand{justify-content:flex-end}.v268-checkout-brand>span{display:none}
  .v268-checkout-card{padding:18px 14px;border-radius:21px}
  .v268-card-title{grid-template-columns:47px minmax(0,1fr)}
  .v268-card-title>span{width:47px;height:47px}.v268-card-title>i{grid-column:1/-1;justify-self:start}
  .v268-invoice-meta{grid-template-columns:1fr}
  .v268-payment-security{grid-template-columns:1fr}
  .v268-voucher-form>div{grid-template-columns:38px minmax(0,1fr)}
  .v268-voucher-form button{grid-column:1/-1;width:calc(100% - 12px);height:40px;margin:0 6px 6px}
  .v268-checkout-footer{flex-direction:column;text-align:center}
}
/* === END FNS V268 === */


/* =========================================================
   FNS V269 CHECKOUT THEME PARITY
   Mode terang dan gelap memakai ukuran, bentuk, grid, radius,
   padding, serta posisi yang sama. Hanya palet warnanya berubah.
   ========================================================= */

.v268-checkout-page{
  --v269-page-bg:
    radial-gradient(circle at 8% 8%,rgba(0,159,255,.16),transparent 34%),
    radial-gradient(circle at 92% 10%,rgba(126,82,255,.16),transparent 36%),
    radial-gradient(circle at 50% 100%,rgba(38,213,169,.08),transparent 34%),
    linear-gradient(135deg,#edf7ff,#f7faff 52%,#f0edff);

  --v269-grid-line:rgba(72,135,212,.12);
  --v269-page-text:#10233f;
  --v269-heading:#0b1f39;
  --v269-muted:#607692;
  --v269-muted-2:#7890aa;
  --v269-line:rgba(73,132,206,.20);
  --v269-line-soft:rgba(73,132,206,.13);

  --v269-header-bg:
    radial-gradient(circle at 12% 0,rgba(22,146,255,.09),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(237,244,255,.96));

  --v269-card-bg:
    radial-gradient(circle at 10% 0,rgba(24,151,255,.075),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(239,245,255,.97));

  --v269-card-soft:rgba(255,255,255,.72);
  --v269-card-soft-2:rgba(234,242,255,.72);
  --v269-input-bg:rgba(255,255,255,.94);
  --v269-total-bg:rgba(231,240,253,.72);
  --v269-voucher-bg:rgba(126,83,255,.075);
  --v269-grand-bg:linear-gradient(135deg,rgba(20,139,255,.10),rgba(124,81,255,.095));

  --v269-shadow:0 24px 62px rgba(51,90,151,.14);
  --v269-shadow-soft:0 16px 40px rgba(51,90,151,.11);
  --v269-card-aura:rgba(121,83,255,.095);
  --v269-back-bg:rgba(255,255,255,.66);
  --v269-placeholder:#8699af;
}

html.dark .v268-checkout-page,
html[data-theme="dark"] .v268-checkout-page,
body.v268-checkout-page.dark,
body.v268-checkout-page[data-theme="dark"]{
  --v269-page-bg:
    radial-gradient(circle at 8% 8%,rgba(0,193,255,.20),transparent 33%),
    radial-gradient(circle at 92% 10%,rgba(126,82,255,.26),transparent 35%),
    radial-gradient(circle at 50% 100%,rgba(38,213,169,.08),transparent 34%),
    linear-gradient(135deg,#020814,#06162c 52%,#171047);

  --v269-grid-line:rgba(91,170,255,.18);
  --v269-page-text:#eaf5ff;
  --v269-heading:#ffffff;
  --v269-muted:#91abc7;
  --v269-muted-2:#7893ae;
  --v269-line:rgba(104,187,255,.20);
  --v269-line-soft:rgba(104,187,255,.13);

  --v269-header-bg:
    radial-gradient(circle at 12% 0,rgba(22,146,255,.07),transparent 35%),
    linear-gradient(145deg,rgba(7,24,48,.94),rgba(19,26,69,.92));

  --v269-card-bg:
    radial-gradient(circle at 10% 0,rgba(24,151,255,.09),transparent 36%),
    linear-gradient(145deg,rgba(7,24,48,.96),rgba(18,25,67,.94));

  --v269-card-soft:rgba(255,255,255,.028);
  --v269-card-soft-2:rgba(255,255,255,.022);
  --v269-input-bg:rgba(3,17,36,.60);
  --v269-total-bg:rgba(3,16,34,.46);
  --v269-voucher-bg:rgba(126,83,255,.07);
  --v269-grand-bg:linear-gradient(135deg,rgba(20,139,255,.15),rgba(124,81,255,.14));

  --v269-shadow:0 26px 75px rgba(0,0,0,.29);
  --v269-shadow-soft:0 20px 55px rgba(0,0,0,.24);
  --v269-card-aura:rgba(121,83,255,.14);
  --v269-back-bg:rgba(255,255,255,.035);
  --v269-placeholder:#657f9e;
}

/* Halaman dan pola latar */
.v268-checkout-page{
  color:var(--v269-page-text)!important;
  background:var(--v269-page-bg)!important;
  transition:background .25s ease,color .25s ease;
}

.v268-checkout-page::before{
  background-image:
    linear-gradient(var(--v269-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--v269-grid-line) 1px,transparent 1px)!important;
}

/* Header */
.v268-checkout-header{
  border-color:var(--v269-line)!important;
  background:var(--v269-header-bg)!important;
  box-shadow:var(--v269-shadow-soft)!important;
}

.v268-checkout-back{
  color:var(--v269-heading)!important;
  border-color:var(--v269-line)!important;
  background:var(--v269-back-bg)!important;
}

.v268-checkout-brand b{
  color:var(--v269-heading)!important;
}

.v268-checkout-brand small{
  color:var(--v269-muted)!important;
}

.v269-checkout-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.v269-theme-toggle{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--v269-line);
  border-radius:12px;
  color:var(--v269-heading);
  background:var(--v269-back-bg);
  box-shadow:0 7px 18px rgba(31,90,160,.08);
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.v269-theme-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(32,154,255,.42);
}

.v269-theme-toggle span{
  display:block;
  line-height:1;
  font-size:16px;
}

/* Notifikasi */
.v268-checkout-notice p{
  color:var(--v269-heading)!important;
}

/* Dua kartu utama */
.v268-checkout-card{
  border-color:var(--v269-line)!important;
  background:var(--v269-card-bg)!important;
  box-shadow:var(--v269-shadow)!important;
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.v268-checkout-card::after{
  background:radial-gradient(circle,var(--v269-card-aura),transparent 70%)!important;
}

.v268-card-title{
  border-bottom-color:var(--v269-line-soft)!important;
}

.v268-card-title h1,
.v268-card-title h2{
  color:var(--v269-heading)!important;
}

/* Data pelanggan */
.v268-customer-box{
  border-color:var(--v269-line-soft)!important;
  background:var(--v269-card-soft)!important;
}

.v268-customer-box b{
  color:var(--v269-heading)!important;
}

.v268-customer-box small{
  color:var(--v269-muted)!important;
}

/* Metadata invoice */
.v268-invoice-meta>div{
  border-color:var(--v269-line-soft)!important;
  background:var(--v269-card-soft)!important;
}

.v268-invoice-meta dt{
  color:var(--v269-muted-2)!important;
}

.v268-invoice-meta dd{
  color:var(--v269-heading)!important;
}

/* Ringkasan total */
.v268-total-box{
  border-color:var(--v269-line)!important;
  background:var(--v269-total-bg)!important;
}

.v268-total-box>div{
  border-bottom-color:var(--v269-line-soft)!important;
}

.v268-total-box span{
  color:var(--v269-muted)!important;
}

.v268-total-box b{
  color:var(--v269-heading)!important;
}

.v268-total-box .voucher{
  background:var(--v269-voucher-bg)!important;
}

.v268-total-box .grand-total{
  background:var(--v269-grand-bg)!important;
}

.v268-total-box .grand-total span{
  color:var(--v269-heading)!important;
}

/* Voucher */
.v268-voucher-intro{
  color:var(--v269-muted)!important;
}

.v268-applied-voucher b{
  color:var(--v269-heading)!important;
}

.v268-applied-voucher p{
  color:var(--v269-muted)!important;
}

.v268-voucher-form>label{
  color:var(--v269-heading)!important;
}

.v268-voucher-form>div{
  border-color:var(--v269-line)!important;
  background:var(--v269-input-bg)!important;
}

.v268-voucher-form>div>span{
  border-right-color:var(--v269-line-soft)!important;
}

.v268-voucher-form input{
  color:var(--v269-heading)!important;
  background:transparent!important;
}

.v268-voucher-form input::placeholder{
  color:var(--v269-placeholder)!important;
}

.v268-voucher-form>small{
  color:var(--v269-muted-2)!important;
}

/* Info keamanan */
.v268-payment-security>div{
  border-color:var(--v269-line-soft)!important;
  background:var(--v269-card-soft-2)!important;
}

.v268-payment-security b{
  color:var(--v269-heading)!important;
}

.v268-payment-security small{
  color:var(--v269-muted-2)!important;
}

.v268-checkout-footer{
  color:var(--v269-muted-2)!important;
}

/* Halaman pesan publik dan return Duitku juga mengikuti tema yang sama */
.lp267-payment-page,
.v265-return-page{
  --v269-public-bg:
    radial-gradient(circle at 10% 10%,rgba(0,159,255,.15),transparent 34%),
    radial-gradient(circle at 90% 15%,rgba(128,82,255,.16),transparent 36%),
    linear-gradient(135deg,#edf7ff,#f7faff 52%,#f0edff);
  --v269-public-card:
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(239,245,255,.97));
  --v269-public-text:#10233f;
  --v269-public-muted:#607692;
  --v269-public-line:rgba(73,132,206,.20);

  color:var(--v269-public-text)!important;
  background:var(--v269-public-bg)!important;
}

html.dark .lp267-payment-page,
html[data-theme="dark"] .lp267-payment-page,
html.dark .v265-return-page,
html[data-theme="dark"] .v265-return-page,
body.lp267-payment-page.dark,
body.v265-return-page.dark{
  --v269-public-bg:
    radial-gradient(circle at 10% 10%,rgba(0,192,255,.20),transparent 34%),
    radial-gradient(circle at 90% 15%,rgba(128,82,255,.24),transparent 36%),
    linear-gradient(135deg,#020814,#07172d 52%,#151044);
  --v269-public-card:
    linear-gradient(145deg,rgba(8,25,50,.96),rgba(19,25,70,.94));
  --v269-public-text:#eef7ff;
  --v269-public-muted:#aec4df;
  --v269-public-line:rgba(104,187,255,.23);
}

.lp267-payment-message,
.v265-return-card{
  color:var(--v269-public-text)!important;
  border-color:var(--v269-public-line)!important;
  background:var(--v269-public-card)!important;
}

.lp267-payment-message h1,
.v265-return-card h1,
.v265-return-invoice b{
  color:var(--v269-public-text)!important;
}

.lp267-payment-message p,
.v265-return-card p,
.v265-return-invoice{
  color:var(--v269-public-muted)!important;
}

.v265-return-invoice{
  border-color:var(--v269-public-line)!important;
  background:rgba(100,160,220,.055)!important;
}

.v269-theme-page,
.v269-theme-page *{
  box-sizing:border-box;
}

/* Mobile: bentuk tetap sama, hanya tool tema dirapikan */
@media(max-width:620px){
  .v269-checkout-tools{
    grid-column:1/-1;
    justify-self:end;
  }

  .v269-theme-toggle{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}

/* Hormati preferensi pengurangan animasi */
@media(prefers-reduced-motion:reduce){
  .v268-checkout-page,
  .v268-checkout-card,
  .v269-theme-toggle{
    transition:none!important;
  }
}

/* === END FNS V269 === */


/* =========================================================
   FNS V271 CUSTOMER REGISTRATION PRO
   ========================================================= */
.reg271-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:18px 0 14px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 0,rgba(0,188,255,.14),transparent 36%),
    radial-gradient(circle at 90% 10%,rgba(125,82,255,.14),transparent 38%),
    linear-gradient(135deg,var(--card),rgba(59,130,246,.04));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.reg271-hero-icon{
  width:58px;height:58px;display:grid;place-items:center;border-radius:18px;
  color:#fff;background:linear-gradient(135deg,#168cff,#16c5ef 55%,#7858ff);
  box-shadow:0 14px 30px rgba(31,143,255,.28);font-size:25px;
}
.reg271-hero-copy h2{margin:4px 0 5px;color:var(--text);font-size:26px;line-height:1.1}
.reg271-hero-copy p{margin:0;color:var(--muted);font-size:10px;font-weight:700;line-height:1.55}
.reg271-hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.reg271-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.reg271-kpi{min-height:105px;padding:16px;display:flex;align-items:center;gap:13px;border:1px solid var(--border);border-radius:21px;background:var(--card);box-shadow:0 13px 30px rgba(30,75,135,.07);overflow:hidden;position:relative}
.reg271-kpi::after{content:"";position:absolute;right:-34px;top:-42px;width:120px;height:120px;border-radius:50%;background:rgba(59,130,246,.07)}
.reg271-kpi i{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:14px;background:rgba(59,130,246,.09);font-style:normal;font-size:19px}
.reg271-kpi small{display:block;color:var(--muted);font-size:8px;font-weight:1000;text-transform:uppercase;letter-spacing:.07em}
.reg271-kpi b{display:inline-block;margin:4px 7px 0 0;color:var(--text);font-size:24px;line-height:1}
.reg271-kpi span{color:var(--muted);font-size:8px;font-weight:750}
.reg271-kpi.process{border-left:3px solid #f59e0b}.reg271-kpi.approved{border-left:3px solid #22c55e}.reg271-kpi.installed{border-left:3px solid #8b5cf6}.reg271-kpi.total{border-left:3px solid #0ea5e9}

.reg271-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start;margin-bottom:14px}
.reg271-form-card{padding:18px!important;border-radius:24px!important}
.reg271-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:15px;border-bottom:1px solid var(--border)}
.reg271-form-head span{color:#168cff;font-size:8px;font-weight:1000;letter-spacing:.10em}
.reg271-form-head h3{margin:5px 0;color:var(--text);font-size:19px}
.reg271-form-head p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}
.reg271-form-head>b{padding:9px 12px;border:1px solid var(--border);border-radius:12px;color:var(--text);background:rgba(59,130,246,.06);font-size:9px;white-space:nowrap}
.reg271-section{padding:17px 0;border-bottom:1px solid var(--border)}
.reg271-section-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.reg271-section-title>i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,#168cff,#18c9ed);font-size:9px;font-style:normal;font-weight:1000}
.reg271-section-title h4{margin:0;color:var(--text);font-size:13px}.reg271-section-title p{margin:3px 0 0;color:var(--muted);font-size:8px}
.reg271-fields{display:grid;gap:11px}.reg271-fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.reg271-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.reg271-fields label,.reg271-notes{display:grid;gap:6px;color:var(--text);font-size:9px;font-weight:950}.reg271-fields label em{color:#ef4444;font-style:normal}
.reg271-fields input,.reg271-fields select,.reg271-fields textarea,.reg271-notes textarea{width:100%;min-width:0;border:1px solid var(--border);border-radius:13px;color:var(--text);background:var(--input);outline:none;box-shadow:none}
.reg271-fields input,.reg271-fields select{height:43px;padding:0 12px}.reg271-fields textarea,.reg271-notes textarea{min-height:92px;padding:11px 12px;resize:vertical;line-height:1.5}
.reg271-fields input:focus,.reg271-fields select:focus,.reg271-fields textarea:focus,.reg271-notes textarea:focus{border-color:rgba(24,151,255,.58);box-shadow:0 0 0 4px rgba(24,151,255,.08)}
.reg271-fields .wide{grid-column:1/-1}.reg271-flow-preview{min-height:43px;padding:8px 11px;display:flex;flex-direction:column;justify-content:center;border:1px dashed var(--border);border-radius:13px;background:rgba(59,130,246,.035)}.reg271-flow-preview span{color:var(--muted);font-size:7px;font-weight:900}.reg271-flow-preview b{margin-top:3px;color:var(--text);font-size:8px}
.reg271-location-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.reg271-location-tools small{flex:1 1 260px;color:var(--muted);font-size:8px;line-height:1.45}
.reg271-details{margin-top:15px;border:1px solid var(--border);border-radius:16px;background:rgba(59,130,246,.025);overflow:hidden}.reg271-details summary{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);cursor:pointer;list-style:none;font-size:10px;font-weight:950}.reg271-details summary::-webkit-details-marker{display:none}.reg271-details summary small{color:var(--muted);font-size:8px;font-weight:700}.reg271-details[open] summary{border-bottom:1px solid var(--border)}.reg271-details .reg271-fields{padding:14px}
.reg271-file-link{margin-top:1px;color:#168cff;font-size:8px;text-decoration:none}.reg271-notes textarea{min-height:82px}
.reg271-form-actions{position:sticky;bottom:9px;z-index:5;display:flex;gap:8px;margin-top:16px;padding:10px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);box-shadow:0 15px 35px rgba(20,55,110,.12)}
.reg271-form-actions .btn:first-child{flex:1}

.reg271-side-stack{display:grid;gap:12px;position:sticky;top:94px}.reg271-flow-card,.reg271-rule-card{border-radius:21px!important}.reg271-flow-card h3,.reg271-rule-card h3{margin:6px 0 13px;color:var(--text);font-size:15px}.reg271-flow-card ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}.reg271-flow-card li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:start}.reg271-flow-card li i{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(135deg,#168cff,#7858ff);font-size:8px;font-style:normal;font-weight:1000}.reg271-flow-card li b{display:block;color:var(--text);font-size:9px}.reg271-flow-card li small{display:block;margin-top:3px;color:var(--muted);font-size:8px;line-height:1.4}.reg271-rule-card p{color:var(--muted);font-size:8px;line-height:1.55}.reg271-rule-card>div{margin-top:8px;display:flex;align-items:center;gap:7px;color:var(--text);font-size:8px;font-weight:800}.reg271-rule-card>div span{width:21px;height:21px;display:grid;place-items:center;border-radius:7px;color:#0a8b47;background:rgba(34,197,94,.10)}

.reg271-list-card{border-radius:24px!important}.reg271-list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.reg271-list-head h3{margin:5px 0 4px;color:var(--text);font-size:17px}.reg271-list-head p{margin:0;color:var(--muted);font-size:9px}.reg271-filter{display:grid;grid-template-columns:minmax(240px,1fr) 180px 180px auto auto;gap:8px;margin-bottom:13px}.reg271-filter input,.reg271-filter select{height:41px;min-width:0;padding:0 11px;border:1px solid var(--border);border-radius:12px;color:var(--text);background:var(--input);outline:none}
.reg271-table-wrap{border:1px solid var(--border);border-radius:17px;overflow:auto}.reg271-table{min-width:1180px}.reg271-table th{font-size:8px;white-space:nowrap}.reg271-table td{vertical-align:middle}.reg271-table td b{display:block;color:var(--text);font-size:9px}.reg271-table td small{display:block;margin-top:4px;color:var(--muted);font-size:7.5px;line-height:1.35}.reg271-status{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border-radius:999px;font-size:7px;font-weight:1000;white-space:nowrap}.reg271-status.new{color:#0a77b9;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.20)}.reg271-status.survey{color:#9a6500;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.22)}.reg271-status.approved{color:#0a8645;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.22)}.reg271-status.installed{color:#6c3ee4;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.22)}.reg271-status.cancelled{color:#c72c46;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.22)}
.reg271-docs{display:flex;align-items:center;gap:5px}.reg271-docs a,.reg271-docs span{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:rgba(59,130,246,.04);text-decoration:none;font-size:12px}.reg271-actions{flex-wrap:nowrap!important}.reg271-actions .fns112-icon-btn{width:29px!important;height:29px!important;min-width:29px!important}.reg271-survey-action{color:#0ea5e9!important}.reg271-approve-action{color:#16a34a!important}.reg271-install-action{color:#7c3aed!important}
.reg271-empty{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.reg271-empty span{font-size:30px}.reg271-empty b{margin-top:8px;color:var(--text);font-size:12px}.reg271-empty p{margin:5px 0 0;color:var(--muted);font-size:9px}

body.dark .reg271-form-actions,html.dark .reg271-form-actions{background:rgba(7,22,44,.92)!important}
body.dark .reg271-kpi,html.dark .reg271-kpi{background:linear-gradient(145deg,rgba(7,22,44,.96),rgba(13,24,54,.95))!important}

@media(max-width:1240px){.reg271-form-layout{grid-template-columns:1fr}.reg271-side-stack{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.reg271-flow-card{grid-row:span 1}.reg271-filter{grid-template-columns:minmax(220px,1fr) 170px 170px}.reg271-filter .btn{min-height:40px}}
@media(max-width:900px){.reg271-hero{grid-template-columns:auto minmax(0,1fr)}.reg271-hero-actions{grid-column:1/-1;justify-content:flex-start}.reg271-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reg271-fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}.reg271-filter{grid-template-columns:1fr 1fr}.reg271-filter input{grid-column:1/-1}.reg271-list-head{align-items:center}}
@media(max-width:620px){.reg271-hero{grid-template-columns:1fr;padding:16px}.reg271-hero-icon{width:48px;height:48px}.reg271-hero-copy h2{font-size:22px}.reg271-hero-actions .btn{flex:1 1 100%}.reg271-kpi-grid{grid-template-columns:1fr}.reg271-fields.three,.reg271-fields.two{grid-template-columns:1fr}.reg271-form-head{flex-direction:column}.reg271-form-head>b{align-self:flex-start}.reg271-side-stack{grid-template-columns:1fr}.reg271-details summary{align-items:flex-start;flex-direction:column}.reg271-form-actions{position:static;flex-direction:column}.reg271-list-head{align-items:flex-start;flex-direction:column}.reg271-filter{grid-template-columns:1fr}.reg271-filter input{grid-column:auto}.reg271-filter .btn{width:100%}.reg271-location-tools .btn{width:100%}}
/* === END FNS V271 === */


/* =========================================================
   FNS V272 CUSTOMER FORM PRO
   Customer form premium, compact, precise, dual-theme.
   ========================================================= */

.fns272-customer-form{
  --c272-bg:linear-gradient(145deg,rgba(255,255,255,.94),rgba(242,248,255,.90));
  --c272-bg-soft:rgba(255,255,255,.70);
  --c272-bg-input:rgba(255,255,255,.92);
  --c272-text:#10233f;
  --c272-muted:#617690;
  --c272-line:rgba(89,145,216,.22);
  --c272-line-strong:rgba(44,139,255,.34);
  --c272-shadow:0 20px 55px rgba(38,87,153,.11);
  --c272-primary:#168dff;
  --c272-secondary:#16c9eb;
  --c272-purple:#745cff;
  --c272-success:#13b968;
  --c272-warning:#f59e0b;
  width:100%!important;
}
.dark .fns272-customer-form,
body.dark .fns272-customer-form{
  --c272-bg:linear-gradient(145deg,rgba(7,24,46,.96),rgba(15,25,62,.94));
  --c272-bg-soft:rgba(255,255,255,.032);
  --c272-bg-input:rgba(5,20,40,.82);
  --c272-text:#edf7ff;
  --c272-muted:#91aac5;
  --c272-line:rgba(103,180,255,.18);
  --c272-line-strong:rgba(55,159,255,.38);
  --c272-shadow:0 24px 64px rgba(0,0,0,.27);
}

.fns272-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:16px!important;
  align-items:start!important;
}
.fns272-main{display:grid!important;gap:12px!important;min-width:0!important;}

.fns272-hero,
.fns272-section,
.fns272-details,
.fns272-summary-card{
  border:1px solid var(--c272-line)!important;
  background:var(--c272-bg)!important;
  box-shadow:var(--c272-shadow)!important;
}

.fns272-hero{
  position:relative!important;
  min-height:118px!important;
  padding:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  overflow:hidden!important;
  border-radius:24px!important;
}
.fns272-hero:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 7% 0,rgba(0,190,255,.17),transparent 36%),
    radial-gradient(circle at 92% 20%,rgba(118,83,255,.16),transparent 38%)!important;
}
.fns272-hero-copy,.fns272-hero-code{position:relative!important;z-index:1!important;}
.fns272-hero-copy{display:flex!important;align-items:center!important;gap:14px!important;min-width:0!important;}
.fns272-hero-icon{
  width:58px!important;height:58px!important;flex:0 0 58px!important;display:grid!important;place-items:center!important;
  border-radius:18px!important;color:#fff!important;font-size:25px!important;
  background:linear-gradient(135deg,var(--c272-primary),var(--c272-secondary) 58%,var(--c272-purple))!important;
  box-shadow:0 15px 34px rgba(25,143,255,.27)!important;
}
.fns272-kicker{display:block!important;color:#18a7e8!important;font-size:8px!important;font-weight:1000!important;letter-spacing:.12em!important;}
.fns272-hero h2{margin:5px 0 5px!important;color:var(--c272-text)!important;font-size:24px!important;line-height:1.1!important;letter-spacing:-.035em!important;}
.fns272-hero p{margin:0!important;max-width:760px!important;color:var(--c272-muted)!important;font-size:10px!important;line-height:1.55!important;font-weight:750!important;}
.fns272-hero-code{min-width:145px!important;padding:13px 16px!important;border:1px solid var(--c272-line)!important;border-radius:17px!important;text-align:center!important;background:var(--c272-bg-soft)!important;}
.fns272-hero-code small{display:block!important;color:var(--c272-muted)!important;font-size:7px!important;font-weight:1000!important;letter-spacing:.09em!important;}
.fns272-hero-code b{display:block!important;margin-top:6px!important;color:var(--c272-text)!important;font-size:18px!important;letter-spacing:.035em!important;}

.fns272-step-nav{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important;
  padding:8px!important;border:1px solid var(--c272-line)!important;border-radius:17px!important;background:var(--c272-bg)!important;box-shadow:0 12px 32px rgba(35,90,160,.07)!important;
  position:sticky!important;top:83px!important;z-index:8!important;backdrop-filter:blur(14px)!important;
}
.fns272-step-nav button{
  min-height:38px!important;padding:6px 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  border:1px solid transparent!important;border-radius:12px!important;color:var(--c272-muted)!important;background:transparent!important;cursor:pointer!important;font-size:9px!important;font-weight:950!important;
}
.fns272-step-nav button:hover{color:var(--c272-text)!important;border-color:var(--c272-line)!important;background:var(--c272-bg-soft)!important;}
.fns272-step-nav button span{width:23px!important;height:23px!important;display:grid!important;place-items:center!important;border-radius:8px!important;color:#fff!important;background:linear-gradient(135deg,var(--c272-primary),var(--c272-purple))!important;font-size:7px!important;}

.fns272-section{padding:17px!important;border-radius:22px!important;scroll-margin-top:135px!important;}
.fns272-section-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin-bottom:14px!important;padding-bottom:13px!important;border-bottom:1px solid var(--c272-line)!important;}
.fns272-section-head>div{display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;}
.fns272-step-number{width:37px!important;height:37px!important;flex:0 0 37px!important;display:grid!important;place-items:center!important;border-radius:12px!important;color:#fff!important;background:linear-gradient(135deg,var(--c272-primary),var(--c272-purple))!important;font-size:9px!important;font-weight:1000!important;}
.fns272-section-head h3{margin:0!important;color:var(--c272-text)!important;font-size:16px!important;}
.fns272-section-head p{margin:4px 0 0!important;color:var(--c272-muted)!important;font-size:9px!important;line-height:1.45!important;font-weight:750!important;}
.fns272-required-badge{padding:7px 9px!important;border-radius:999px!important;color:#087a45!important;background:rgba(34,197,94,.11)!important;border:1px solid rgba(34,197,94,.22)!important;font-size:7px!important;font-weight:1000!important;}
.fns272-required-badge.main{color:#1664be!important;background:rgba(22,141,255,.10)!important;border-color:rgba(22,141,255,.22)!important;}

.fns272-subsection{padding:13px!important;border:1px solid var(--c272-line)!important;border-radius:17px!important;background:var(--c272-bg-soft)!important;}
.fns272-subsection+.fns272-subsection{margin-top:11px!important;}
.fns272-subsection-title{display:flex!important;align-items:center!important;gap:9px!important;margin-bottom:11px!important;}
.fns272-subsection-title>span{width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:rgba(22,141,255,.10)!important;font-size:15px!important;}
.fns272-subsection-title b{display:block!important;color:var(--c272-text)!important;font-size:12px!important;}
.fns272-subsection-title small{display:block!important;margin-top:2px!important;color:var(--c272-muted)!important;font-size:8px!important;line-height:1.4!important;}

.fns272-grid{display:grid!important;gap:10px 11px!important;align-items:start!important;}
.fns272-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.fns272-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.fns272-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.fns272-grid .wide{grid-column:1/-1!important;}
.fns272-customer-form label,.fns272-details label{display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important;color:var(--c272-text)!important;font-size:9px!important;font-weight:950!important;}
.fns272-customer-form label em{color:#ef476f!important;font-style:normal!important;}
.fns272-customer-form label>small{color:var(--c272-muted)!important;font-size:7px!important;font-weight:750!important;line-height:1.45!important;}

.fns272-customer-form input,
.fns272-customer-form select,
.fns272-customer-form textarea{
  width:100%!important;min-width:0!important;height:43px!important;padding:0 11px!important;border:1px solid var(--c272-line)!important;border-radius:13px!important;color:var(--c272-text)!important;background:var(--c272-bg-input)!important;box-shadow:none!important;outline:none!important;font-size:10px!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.fns272-customer-form textarea{height:auto!important;min-height:86px!important;padding:10px 11px!important;resize:vertical!important;}
.fns272-customer-form input:focus,.fns272-customer-form select:focus,.fns272-customer-form textarea:focus{border-color:var(--c272-line-strong)!important;box-shadow:0 0 0 4px rgba(22,141,255,.09)!important;transform:translateY(-1px)!important;}
.fns272-customer-form input[readonly]{font-weight:950!important;background:rgba(22,141,255,.075)!important;color:var(--c272-primary)!important;}
.fns272-customer-form input::placeholder,.fns272-customer-form textarea::placeholder{color:var(--c272-muted)!important;opacity:.72!important;}

.fns272-input-action{display:grid!important;grid-template-columns:minmax(0,1fr) 37px 37px!important;gap:6px!important;}
.fns272-input-action:has(button:only-child){grid-template-columns:minmax(0,1fr) 37px!important;}
.fns272-input-action button,.fns272-ip-row button,.fns272-location-actions button{border:1px solid var(--c272-line)!important;border-radius:11px!important;color:var(--c272-text)!important;background:var(--c272-bg-soft)!important;cursor:pointer!important;font-size:11px!important;font-weight:950!important;}
.fns272-input-action button:hover,.fns272-ip-row button:hover,.fns272-location-actions button:hover{border-color:var(--c272-line-strong)!important;background:rgba(22,141,255,.09)!important;}
.fns272-money-field,.fns272-number-field{position:relative!important;display:block!important;}
.fns272-money-field input{padding-left:42px!important;}
.fns272-money-field>b{position:absolute!important;left:9px!important;top:50%!important;transform:translateY(-50%)!important;padding:5px 7px!important;border-radius:8px!important;color:var(--c272-primary)!important;background:rgba(22,141,255,.10)!important;font-size:8px!important;z-index:2!important;}
.fns272-number-field input{padding-right:92px!important;}
.fns272-number-field>b{position:absolute!important;right:9px!important;top:50%!important;transform:translateY(-50%)!important;padding:5px 7px!important;border-radius:8px!important;color:var(--c272-muted)!important;background:var(--c272-bg-soft)!important;font-size:6.5px!important;z-index:2!important;}

.fns272-details{border-radius:20px!important;overflow:hidden!important;scroll-margin-top:135px!important;}
.fns272-details summary{list-style:none!important;min-height:68px!important;padding:13px 16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;cursor:pointer!important;user-select:none!important;}
.fns272-details summary::-webkit-details-marker{display:none!important;}
.fns272-details summary>div{display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;}
.fns272-details summary>div>span{width:34px!important;height:34px!important;flex:0 0 34px!important;display:grid!important;place-items:center!important;border-radius:11px!important;color:#fff!important;background:linear-gradient(135deg,var(--c272-primary),var(--c272-purple))!important;font-size:8px!important;font-weight:1000!important;}
.fns272-details summary b{display:block!important;color:var(--c272-text)!important;font-size:13px!important;}
.fns272-details summary small{display:block!important;margin-top:3px!important;color:var(--c272-muted)!important;font-size:8px!important;line-height:1.4!important;}
.fns272-details summary>i{width:31px!important;height:31px!important;flex:0 0 31px!important;display:grid!important;place-items:center!important;border:1px solid var(--c272-line)!important;border-radius:50%!important;color:var(--c272-primary)!important;background:var(--c272-bg-soft)!important;font-size:17px!important;font-style:normal!important;font-weight:1000!important;}
.fns272-details[open] summary{border-bottom:1px solid var(--c272-line)!important;}
.fns272-details[open] summary>i{color:#fff!important;background:linear-gradient(135deg,var(--c272-primary),var(--c272-purple))!important;}
.fns272-details-body{padding:14px 16px 16px!important;}

.fns272-location-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;align-self:end!important;}
.fns272-location-actions button{height:43px!important;font-size:8px!important;}
.fns272-ip-row{display:grid!important;grid-template-columns:minmax(0,1fr) 120px!important;gap:7px!important;}
.fns272-ip-row button{height:43px!important;font-size:8px!important;}

.fns272-upload-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:12px!important;}
.fns272-upload-card{position:relative!important;min-height:190px!important;padding:14px!important;align-items:center!important;text-align:center!important;border:1px dashed var(--c272-line-strong)!important;border-radius:17px!important;background:var(--c272-bg-soft)!important;cursor:pointer!important;}
.fns272-upload-card:hover{background:rgba(22,141,255,.07)!important;}
.fns272-upload-icon{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:13px!important;background:linear-gradient(135deg,rgba(22,141,255,.17),rgba(116,92,255,.17))!important;font-size:20px!important;}
.fns272-upload-card b{color:var(--c272-text)!important;font-size:10px!important;}
.fns272-upload-card>small{color:var(--c272-muted)!important;font-size:7px!important;line-height:1.4!important;}
.fns272-upload-card input[type=file]{height:auto!important;padding:7px!important;font-size:7px!important;}
.fns272-file-preview{width:100%!important;min-height:56px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;overflow:hidden!important;border:1px solid var(--c272-line)!important;border-radius:11px!important;color:var(--c272-muted)!important;background:var(--c272-bg-input)!important;font-size:7px!important;}
.fns272-file-preview img{width:48px!important;height:48px!important;object-fit:cover!important;border-radius:9px!important;}
.fns272-file-preview a{color:var(--c272-primary)!important;text-decoration:none!important;font-weight:950!important;}

.fns272-summary-card{position:sticky!important;top:84px!important;padding:15px!important;border-radius:22px!important;display:grid!important;gap:12px!important;}
.fns272-summary-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding-bottom:11px!important;border-bottom:1px solid var(--c272-line)!important;}
.fns272-summary-head>span{color:var(--c272-muted)!important;font-size:7px!important;font-weight:1000!important;letter-spacing:.10em!important;}
.fns272-summary-head>b{padding:6px 8px!important;border-radius:999px!important;color:#9a6200!important;background:rgba(245,158,11,.11)!important;border:1px solid rgba(245,158,11,.20)!important;font-size:7px!important;}
.fns272-summary-head>b[data-status=active]{color:#067942!important;background:rgba(34,197,94,.11)!important;border-color:rgba(34,197,94,.22)!important;}
.fns272-summary-head>b[data-status=isolated]{color:#d02e51!important;background:rgba(239,68,68,.10)!important;border-color:rgba(239,68,68,.22)!important;}
.fns272-profile-preview{display:flex!important;align-items:center!important;gap:10px!important;padding:11px!important;border:1px solid var(--c272-line)!important;border-radius:15px!important;background:var(--c272-bg-soft)!important;}
.fns272-avatar{width:45px!important;height:45px!important;flex:0 0 45px!important;display:grid!important;place-items:center!important;border-radius:14px!important;color:#fff!important;background:linear-gradient(135deg,var(--c272-primary),var(--c272-purple))!important;font-size:18px!important;font-weight:1000!important;}
.fns272-profile-preview b{display:block!important;color:var(--c272-text)!important;font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.fns272-profile-preview small{display:block!important;margin-top:4px!important;color:var(--c272-muted)!important;font-size:7px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.fns272-profile-preview>div:last-child{min-width:0!important;}
.fns272-progress-block>div:first-child{display:flex!important;justify-content:space-between!important;gap:8px!important;color:var(--c272-muted)!important;font-size:7px!important;font-weight:900!important;}
.fns272-progress-block>div:first-child b{color:var(--c272-text)!important;}
.fns272-progress{height:7px!important;margin-top:7px!important;overflow:hidden!important;border-radius:999px!important;background:rgba(148,163,184,.15)!important;}
.fns272-progress i{display:block!important;width:0;height:100%!important;border-radius:inherit!important;background:linear-gradient(90deg,var(--c272-primary),var(--c272-secondary),var(--c272-purple))!important;transition:width .25s ease!important;}
.fns272-summary-list{display:grid!important;gap:0!important;margin:0!important;border:1px solid var(--c272-line)!important;border-radius:14px!important;overflow:hidden!important;}
.fns272-summary-list>div{display:grid!important;grid-template-columns:75px minmax(0,1fr)!important;gap:8px!important;padding:8px 10px!important;border-bottom:1px solid var(--c272-line)!important;}
.fns272-summary-list>div:last-child{border-bottom:0!important;}
.fns272-summary-list dt{color:var(--c272-muted)!important;font-size:7px!important;font-weight:850!important;}
.fns272-summary-list dd{margin:0!important;color:var(--c272-text)!important;font-size:8px!important;font-weight:950!important;text-align:right!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.fns272-package-box,.fns272-login-box{padding:11px!important;border:1px solid var(--c272-line)!important;border-radius:14px!important;background:var(--c272-bg-soft)!important;}
.fns272-package-box>span,.fns272-login-box>span{display:block!important;color:var(--c272-muted)!important;font-size:6.5px!important;font-weight:1000!important;letter-spacing:.08em!important;}
.fns272-package-box>b{display:block!important;margin-top:6px!important;color:var(--c272-text)!important;font-size:9px!important;}
.fns272-package-box>small,.fns272-login-box>small{display:block!important;margin-top:5px!important;color:var(--c272-muted)!important;font-size:7px!important;line-height:1.4!important;}
.fns272-login-box>div{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;align-items:center!important;margin-top:7px!important;}
.fns272-login-box>div b{color:var(--c272-text)!important;font-size:11px!important;}
.fns272-login-box button{height:29px!important;padding:0 9px!important;border:0!important;border-radius:9px!important;color:#fff!important;background:linear-gradient(135deg,var(--c272-primary),var(--c272-purple))!important;font-size:7px!important;font-weight:950!important;cursor:pointer!important;}
.fns272-checklist{display:grid!important;gap:6px!important;margin:0!important;padding:0!important;list-style:none!important;}
.fns272-checklist li{display:flex!important;align-items:center!important;gap:7px!important;color:var(--c272-muted)!important;font-size:7.5px!important;font-weight:850!important;}
.fns272-checklist li span{width:19px!important;height:19px!important;display:grid!important;place-items:center!important;border-radius:7px!important;color:var(--c272-muted)!important;background:var(--c272-bg-soft)!important;border:1px solid var(--c272-line)!important;}
.fns272-checklist li.done{color:var(--c272-text)!important;}
.fns272-checklist li.done span{color:#fff!important;background:var(--c272-success)!important;border-color:transparent!important;}

.fns272-sticky-actions{position:sticky!important;bottom:10px!important;z-index:12!important;margin-top:14px!important;padding:11px 13px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:13px!important;border:1px solid var(--c272-line)!important;border-radius:18px!important;background:var(--c272-bg)!important;box-shadow:0 20px 46px rgba(28,78,145,.15)!important;backdrop-filter:blur(16px)!important;}
.fns272-sticky-actions>div:first-child b{display:block!important;color:var(--c272-text)!important;font-size:9px!important;}
.fns272-sticky-actions>div:first-child small{display:block!important;margin-top:3px!important;color:var(--c272-muted)!important;font-size:7px!important;}
.fns272-sticky-actions>div:last-child{display:flex!important;gap:8px!important;}
.fns272-sticky-actions .btn{min-height:41px!important;border-radius:13px!important;font-size:9px!important;}
.fns272-sticky-actions .btn.primary{min-width:235px!important;}

.customer-full-card:has(.fns272-customer-form){padding:12px!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.customer-full-card:has(.fns272-customer-form)>.customer-form-head{display:none!important;}

@media(max-width:1320px){
  .fns272-layout{grid-template-columns:minmax(0,1fr) 270px!important;}
  .fns272-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .fns272-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:1040px){
  .fns272-layout{grid-template-columns:1fr!important;}
  .fns272-summary-card{position:relative!important;top:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .fns272-summary-head,.fns272-progress-block{grid-column:1/-1!important;}
}
@media(max-width:760px){
  .fns272-hero{align-items:flex-start!important;flex-direction:column!important;padding:16px!important;}
  .fns272-hero-code{width:100%!important;min-width:0!important;text-align:left!important;}
  .fns272-step-nav{top:76px!important;grid-template-columns:repeat(5,1fr)!important;overflow-x:auto!important;}
  .fns272-step-nav button{min-width:64px!important;flex-direction:column!important;gap:3px!important;font-size:6.5px!important;}
  .fns272-section{padding:13px!important;}
  .fns272-section-head{align-items:flex-start!important;}
  .fns272-grid.four,.fns272-grid.three,.fns272-grid.two{grid-template-columns:1fr!important;}
  .fns272-upload-grid{grid-template-columns:1fr!important;}
  .fns272-location-actions{grid-template-columns:1fr!important;}
  .fns272-ip-row{grid-template-columns:1fr!important;}
  .fns272-summary-card{grid-template-columns:1fr!important;}
  .fns272-summary-head,.fns272-progress-block{grid-column:auto!important;}
  .fns272-sticky-actions{position:static!important;align-items:stretch!important;flex-direction:column!important;}
  .fns272-sticky-actions>div:last-child{flex-direction:column-reverse!important;}
  .fns272-sticky-actions .btn,.fns272-sticky-actions .btn.primary{width:100%!important;min-width:0!important;}
}
@media(prefers-reduced-motion:reduce){
  .fns272-progress i,.fns272-customer-form input,.fns272-customer-form select,.fns272-customer-form textarea{transition:none!important;}
}
/* === END FNS V272 === */


/* =========================================================
   FNS V273 PUBLIC CUSTOMER REGISTRATION FIX
   Public register page is accessible, functional, dual-theme,
   and protected against accidental double submissions.
   ========================================================= */

.fns230-auth-page{
  --fns273-bg:
    radial-gradient(circle at 15% 15%,rgba(14,165,233,.24),transparent 34%),
    radial-gradient(circle at 86% 22%,rgba(139,92,246,.20),transparent 34%),
    linear-gradient(135deg,#eef7ff,#f8fbff);
  --fns273-card:rgba(255,255,255,.89);
  --fns273-text:#071b34;
  --fns273-muted:#60758f;
  --fns273-field:#ffffff;
  --fns273-line:rgba(73,148,231,.25);
  --fns273-shadow:0 24px 70px rgba(31,86,160,.15);

  color:var(--fns273-text)!important;
  background:var(--fns273-bg)!important;
}

html.dark .fns230-auth-page,
html[data-theme="dark"] .fns230-auth-page,
body.fns230-auth-page.dark{
  --fns273-bg:
    radial-gradient(circle at 15% 15%,rgba(0,188,255,.18),transparent 34%),
    radial-gradient(circle at 86% 22%,rgba(139,92,246,.24),transparent 34%),
    linear-gradient(135deg,#020914,#07172d 52%,#151044);
  --fns273-card:linear-gradient(145deg,rgba(8,25,50,.96),rgba(19,25,70,.94));
  --fns273-text:#eef7ff;
  --fns273-muted:#9eb5cf;
  --fns273-field:#07182f;
  --fns273-line:rgba(105,183,255,.22);
  --fns273-shadow:0 28px 80px rgba(0,0,0,.34);
}

.fns230-auth-card{
  color:var(--fns273-text)!important;
  border-color:var(--fns273-line)!important;
  background:var(--fns273-card)!important;
  box-shadow:var(--fns273-shadow)!important;
}

.fns230-auth-brand b,
.fns230-auth-card h1,
.fns230-auth-form label{
  color:var(--fns273-text)!important;
}

.fns230-auth-brand span,
.fns230-auth-card p{
  color:var(--fns273-muted)!important;
}

.fns230-auth-form input,
.fns230-auth-form select,
.fns230-auth-form textarea{
  color:var(--fns273-text)!important;
  border-color:var(--fns273-line)!important;
  background:var(--fns273-field)!important;
}

.fns230-auth-form input::placeholder,
.fns230-auth-form textarea::placeholder{
  color:var(--fns273-muted)!important;
  opacity:.78;
}

.fns273-register-result{
  display:grid;
  gap:4px;
  line-height:1.5;
}

.fns273-register-result b{
  font-size:12px;
}

.fns273-register-result span{
  font-size:10px;
  font-weight:800;
}

.fns230-auth-form button[data-fns273-register-submit]{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease;
}

.fns230-auth-form button[data-fns273-register-submit]:hover:not(:disabled){
  transform:translateY(-1px);
}

.fns230-auth-form button[data-fns273-register-submit]:disabled,
.fns230-auth-form button[data-fns273-register-submit].is-loading{
  cursor:wait;
  opacity:.72;
  transform:none;
}

@media(max-width:720px){
  .fns230-auth-page{
    place-items:start center;
    padding:10px;
  }

  .fns230-auth-card.wide{
    width:100%;
    margin:8px 0;
  }
}

/* === END FNS V273 === */


/* =========================================================
   FNS V274 CUSTOMER FORM LAYOUT REPAIR
   Full-width dedicated page, precise desktop grid, clean
   responsive stacking, and no unused blank column.
   ========================================================= */

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page{
  display:block!important;
  grid-template-columns:none!important;
  grid-auto-columns:auto!important;
  grid-auto-flow:row!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  justify-self:stretch!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
}

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page>.customer-full-card{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  padding:8px!important;

  box-sizing:border-box!important;
  overflow:visible!important;
}

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page .fns272-customer-form{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  box-sizing:border-box!important;
}

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page .fns272-layout{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  grid-template-columns:minmax(0,1fr) minmax(320px,350px)!important;
  gap:16px!important;

  align-items:start!important;
  justify-content:stretch!important;
  box-sizing:border-box!important;
}

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page .fns272-main{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page .fns272-main>*{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* Hero dibuat horizontal dan tidak saling menimpa. */
.fns274-customer-page .fns272-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 180px!important;
  align-items:center!important;

  min-height:132px!important;
  padding:21px 23px!important;
  gap:20px!important;
}

.fns274-customer-page .fns272-hero-copy{
  width:100%!important;
  min-width:0!important;
}

.fns274-customer-page .fns272-hero-copy>div{
  min-width:0!important;
}

.fns274-customer-page .fns272-hero h2{
  margin:5px 0 7px!important;
  font-size:29px!important;
  line-height:1.05!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.fns274-customer-page .fns272-hero p{
  max-width:850px!important;
  font-size:11px!important;
  line-height:1.55!important;
}

.fns274-customer-page .fns272-hero-code{
  width:180px!important;
  min-width:180px!important;
  justify-self:end!important;
}

/* Navigasi langkah selalu memakai seluruh lebar. */
.fns274-customer-page .fns272-step-nav{
  width:100%!important;
  grid-template-columns:repeat(5,minmax(110px,1fr))!important;
  gap:8px!important;
  padding:9px!important;
  overflow-x:auto!important;
  scrollbar-width:thin!important;
}

.fns274-customer-page .fns272-step-nav button{
  min-width:0!important;
  min-height:43px!important;
  padding:7px 10px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:10px!important;
}

/* Konten form tidak lagi terlalu kecil. */
.fns274-customer-page .fns272-section{
  padding:19px!important;
}

.fns274-customer-page .fns272-section-head h3{
  font-size:17px!important;
}

.fns274-customer-page .fns272-section-head p{
  font-size:9.5px!important;
}

.fns274-customer-page .fns272-subsection{
  padding:15px!important;
}

.fns274-customer-page .fns272-grid{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  gap:12px!important;
}

.fns274-customer-page .fns272-grid.four{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

.fns274-customer-page .fns272-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.fns274-customer-page .fns272-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.fns274-customer-page .fns272-grid>label,
.fns274-customer-page .fns272-grid>div{
  min-width:0!important;
}

.fns274-customer-page .fns272-customer-form label,
.fns274-customer-page .fns272-details label{
  font-size:10px!important;
}

.fns274-customer-page .fns272-customer-form label>small{
  font-size:7.5px!important;
}

.fns274-customer-page .fns272-customer-form input,
.fns274-customer-page .fns272-customer-form select,
.fns274-customer-page .fns272-customer-form textarea{
  min-height:45px!important;
  height:45px!important;
  padding-left:12px!important;
  padding-right:12px!important;
  font-size:11px!important;
  box-sizing:border-box!important;
}

.fns274-customer-page .fns272-customer-form textarea{
  height:auto!important;
  min-height:96px!important;
}

/* Tombol pada field password tidak boleh menimpa input. */
.fns274-customer-page .fns272-input-action{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr) 39px 39px!important;
  gap:7px!important;
}

.fns274-customer-page
  .fns272-input-action:has(button:only-child){
  grid-template-columns:minmax(0,1fr) 39px!important;
}

.fns274-customer-page .fns272-input-action button{
  width:39px!important;
  min-width:39px!important;
  height:45px!important;
  padding:0!important;
}

/* Ringkasan tetap proporsional dan dapat discroll sendiri. */
.fns274-customer-page .fns272-summary-card{
  width:100%!important;
  min-width:0!important;
  max-width:350px!important;

  top:96px!important;
  max-height:calc(100vh - 112px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;

  padding:16px!important;
  gap:12px!important;
  scrollbar-width:thin!important;
}

.fns274-customer-page .fns272-summary-card::-webkit-scrollbar{
  width:6px!important;
}

.fns274-customer-page .fns272-summary-card::-webkit-scrollbar-thumb{
  border-radius:999px!important;
  background:linear-gradient(
    180deg,
    rgba(22,141,255,.60),
    rgba(116,92,255,.50)
  )!important;
}

.fns274-customer-page .fns272-profile-preview b{
  font-size:10.5px!important;
}

.fns274-customer-page .fns272-summary-list>div{
  padding:9px 10px!important;
}

/* Tombol simpan menggunakan lebar form penuh dan tetap rapi. */
.fns274-customer-page .fns272-sticky-actions{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

.fns274-customer-page .fns272-sticky-actions>div:last-child{
  flex:0 0 auto!important;
}

/* Desktop besar: form benar-benar menggunakan ruang di samping sidebar. */
@media(min-width:1500px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
    .fns274-customer-page{
    width:calc(100vw - var(--sidebar) - 36px)!important;
    max-width:calc(100vw - var(--sidebar) - 36px)!important;
  }
}

/* Laptop biasa: dua kolom field agar tidak sempit. */
@media(min-width:1051px) and (max-width:1499px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
    .fns274-customer-page{
    width:100%!important;
    max-width:none!important;
  }

  .fns274-customer-page .fns272-layout{
    grid-template-columns:minmax(0,1fr) 300px!important;
  }

  .fns274-customer-page .fns272-grid.four,
  .fns274-customer-page .fns272-grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .fns274-customer-page .fns272-summary-card{
    max-width:300px!important;
  }
}

/* Tablet: ringkasan pindah ke bawah, tidak mengecilkan form utama. */
@media(max-width:1050px){
  .fns274-customer-page .fns272-layout{
    grid-template-columns:1fr!important;
  }

  .fns274-customer-page .fns272-summary-card{
    position:relative!important;
    top:auto!important;

    max-width:none!important;
    max-height:none!important;
    overflow:visible!important;

    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .fns274-customer-page .fns272-summary-head,
  .fns274-customer-page .fns272-progress-block{
    grid-column:1/-1!important;
  }

  .fns274-customer-page .fns272-grid.four,
  .fns274-customer-page .fns272-grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* HP: satu kolom penuh dan tidak ada elemen terpotong. */
@media(max-width:760px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
    .fns274-customer-page>.customer-full-card{
    padding:0!important;
  }

  .fns274-customer-page .fns272-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    padding:16px!important;
  }

  .fns274-customer-page .fns272-hero h2{
    font-size:24px!important;
  }

  .fns274-customer-page .fns272-hero-code{
    width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
  }

  .fns274-customer-page .fns272-step-nav{
    grid-template-columns:repeat(5,76px)!important;
  }

  .fns274-customer-page .fns272-grid.four,
  .fns274-customer-page .fns272-grid.three,
  .fns274-customer-page .fns272-grid.two{
    grid-template-columns:1fr!important;
  }

  .fns274-customer-page .fns272-summary-card{
    grid-template-columns:1fr!important;
  }

  .fns274-customer-page .fns272-summary-head,
  .fns274-customer-page .fns272-progress-block{
    grid-column:auto!important;
  }
}

/* === END FNS V274 === */


/* =========================================================
   FNS V275 CUSTOMER FORM PRECISION
   Hero dan navigasi full-width, form/summary sejajar,
   tanpa potongan, tanpa ruang kosong, tanpa scrollbar ganda.
   ========================================================= */

body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .fns274-customer-page{
  padding-top:14px!important;
}

.fns275-customer-shell{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

/* Hero memakai lebar penuh sebelum kolom form dan ringkasan. */
.fns275-customer-shell>.fns272-hero{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  box-sizing:border-box!important;
}

/* Judul tidak boleh turun acak atau tertutup topbar. */
.fns275-customer-shell>.fns272-hero{
  grid-template-columns:minmax(0,1fr) 190px!important;
  min-height:126px!important;
  padding:20px 22px!important;
}

.fns275-customer-shell>.fns272-hero .fns272-hero-copy{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
}

.fns275-customer-shell>.fns272-hero h2{
  max-width:none!important;
  margin:4px 0 6px!important;

  font-size:28px!important;
  line-height:1.08!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

.fns275-customer-shell>.fns272-hero p{
  max-width:900px!important;
  font-size:10px!important;
  line-height:1.5!important;
}

/* Navigasi tidak menutupi hero dan tidak mendapat ikon pseudo global. */
.fns275-customer-shell>.fns272-step-nav{
  position:relative!important;
  top:auto!important;
  z-index:2!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  padding:8px!important;

  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}

.fns275-customer-shell>.fns272-step-nav button{
  min-width:0!important;
  min-height:43px!important;
  padding:7px 10px!important;

  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.fns275-customer-shell>.fns272-step-nav button::before,
.fns275-customer-shell>.fns272-step-nav button::after,
.fns274-customer-page .fns272-input-action button::before,
.fns274-customer-page .fns272-input-action button::after{
  content:none!important;
  display:none!important;
}

/* Form dan ringkasan baru mulai setelah hero dan navigasi. */
.fns275-form-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 320px!important;
  gap:14px!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  align-items:start!important;
  box-sizing:border-box!important;
}

.fns275-form-layout>.fns272-main{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:13px!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* Summary sejajar dengan Identitas Sistem, bukan dengan hero. */
.fns275-form-layout>.fns272-summary-card{
  position:sticky!important;
  top:116px!important;

  width:100%!important;
  min-width:0!important;
  max-width:320px!important;

  max-height:none!important;
  overflow:visible!important;

  margin:0!important;
  padding:15px!important;
  box-sizing:border-box!important;
}

/* Hindari scrollbar internal ganda pada ringkasan. */
.fns275-form-layout>.fns272-summary-card::-webkit-scrollbar{
  display:none!important;
}

/* Scroll target tidak tertutup topbar. */
.fns274-customer-page .fns272-section,
.fns274-customer-page .fns272-details{
  scroll-margin-top:126px!important;
}

/* Grid identitas: field password diberi ruang lebih luas. */
.fns274-customer-page #fns272System .fns272-grid.four{
  grid-template-columns:
    minmax(145px,.88fr)
    minmax(170px,1fr)
    minmax(155px,.92fr)
    minmax(250px,1.34fr)!important;
}

/* Grid akses internet: password dengan dua tombol lebih luas. */
.fns274-customer-page
  #fns272Service
  .fns272-subsection:first-of-type
  .fns272-grid.three{
  grid-template-columns:
    minmax(200px,1.04fr)
    minmax(235px,1.12fr)
    minmax(275px,1.28fr)!important;
}

/* Billing tetap seimbang tiga kolom. */
.fns274-customer-page
  #fns272Service
  .fns272-subsection:nth-of-type(2)
  .fns272-grid.three{
  grid-template-columns:repeat(3,minmax(210px,1fr))!important;
}

/* Tombol di dalam field dibuat rapi dan tidak menekan input. */
.fns274-customer-page .fns272-input-action{
  grid-template-columns:minmax(0,1fr) 42px 42px!important;
  gap:6px!important;
}

.fns274-customer-page .fns272-input-action:has(button:only-child){
  grid-template-columns:minmax(0,1fr) 42px!important;
}

.fns274-customer-page .fns272-input-action button{
  width:42px!important;
  min-width:42px!important;
  height:45px!important;

  display:grid!important;
  place-items:center!important;

  padding:0!important;
  line-height:1!important;
  font-size:13px!important;
}

/* Header section dan badge selalu sejajar. */
.fns274-customer-page .fns272-section-head{
  min-height:58px!important;
  align-items:center!important;
}

.fns274-customer-page .fns272-section-head>div{
  align-items:center!important;
}

.fns274-customer-page .fns272-required-badge{
  align-self:flex-start!important;
  flex:0 0 auto!important;
}

/* Ringkasan lebih mudah dibaca. */
.fns275-form-layout .fns272-summary-list>div{
  grid-template-columns:82px minmax(0,1fr)!important;
}

.fns275-form-layout .fns272-summary-card{
  font-size:10px!important;
}

.fns275-form-layout .fns272-checklist{
  padding-bottom:2px!important;
}

/* Sticky action tepat mengikuti lebar form penuh. */
.fns274-customer-page .fns272-sticky-actions{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:14px 0 0!important;
  box-sizing:border-box!important;
}

/* Laptop menengah: ringkasan tetap cukup tetapi form tidak sempit. */
@media(min-width:1201px) and (max-width:1500px){
  .fns275-form-layout{
    grid-template-columns:minmax(0,1fr) 292px!important;
  }

  .fns275-form-layout>.fns272-summary-card{
    max-width:292px!important;
  }

  .fns274-customer-page #fns272System .fns272-grid.four{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .fns274-customer-page
    #fns272Service
    .fns272-subsection:first-of-type
    .fns272-grid.three,
  .fns274-customer-page
    #fns272Service
    .fns272-subsection:nth-of-type(2)
    .fns272-grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Tablet: summary pindah ke bawah dan tidak sticky. */
@media(max-width:1200px){
  .fns275-form-layout{
    grid-template-columns:1fr!important;
  }

  .fns275-form-layout>.fns272-summary-card{
    position:relative!important;
    top:auto!important;

    max-width:none!important;
    max-height:none!important;

    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
  }

  .fns275-form-layout .fns272-summary-head,
  .fns275-form-layout .fns272-progress-block{
    grid-column:1/-1!important;
  }
}

/* HP: satu kolom penuh dan hero sederhana. */
@media(max-width:760px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
    .fns274-customer-page{
    padding-top:8px!important;
  }

  .fns275-customer-shell>.fns272-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;

    min-height:0!important;
    padding:16px!important;
  }

  .fns275-customer-shell>.fns272-hero .fns272-hero-copy{
    grid-template-columns:48px minmax(0,1fr)!important;
  }

  .fns275-customer-shell>.fns272-hero h2{
    font-size:23px!important;
  }

  .fns275-customer-shell>.fns272-step-nav{
    grid-template-columns:repeat(5,82px)!important;
    overflow-x:auto!important;
  }

  .fns274-customer-page #fns272System .fns272-grid.four,
  .fns274-customer-page
    #fns272Service
    .fns272-subsection:first-of-type
    .fns272-grid.three,
  .fns274-customer-page
    #fns272Service
    .fns272-subsection:nth-of-type(2)
    .fns272-grid.three{
    grid-template-columns:1fr!important;
  }

  .fns275-form-layout>.fns272-summary-card{
    grid-template-columns:1fr!important;
  }

  .fns275-form-layout .fns272-summary-head,
  .fns275-form-layout .fns272-progress-block{
    grid-column:auto!important;
  }
}

/* === END FNS V275 === */


/* =========================================================
   FNS V276 CONTACT MAP & REFERRAL
   Bagian alamat pemasangan disederhanakan seperti referensi:
   alamat rumah, latitude, longitude, link maps, peta, kode referral.
   ========================================================= */

.fns276-contact-stack{display:grid!important;gap:12px!important;}
.fns276-contact-top{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.fns276-map-card{
  display:grid!important;
  gap:11px!important;
  padding:2px 0 0!important;
}
.fns276-map-card .wide textarea{
  min-height:62px!important;
}
.fns276-coord-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.fns276-inline-action,
.fns276-maplink-row{
  display:grid!important;
  align-items:center!important;
  gap:0!important;
}
.fns276-inline-action{grid-template-columns:minmax(0,1fr) 42px!important;}
.fns276-maplink-row{grid-template-columns:minmax(0,1fr) 132px!important;}
.fns276-inline-action input,
.fns276-maplink-row input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;}
.fns276-inline-action button,
.fns276-maplink-row button{
  height:43px!important;
  border:1px solid var(--c272-line)!important;
  border-left:0!important;
  border-radius:0 13px 13px 0!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--c272-primary),var(--c272-secondary) 58%,var(--c272-purple))!important;
  cursor:pointer!important;
  font-size:9px!important;
  font-weight:1000!important;
  padding:0 10px!important;
}
.fns276-inline-action button:hover,
.fns276-maplink-row button:hover{filter:brightness(1.04)!important;}
.fns276-link-hint{display:inline-block!important;margin-left:4px!important;color:var(--c272-primary)!important;font-size:9px!important;font-weight:1000!important;}
.fns276-mini-map{
  width:100%!important;
  height:285px!important;
  min-height:285px!important;
  border:1px solid var(--c272-line)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:rgba(148,163,184,.08)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important;
}
.fns276-mini-map .leaflet-control-zoom a{
  color:#0f172a!important;
}
.fns276-mini-map .leaflet-control-attribution{font-size:8px!important;}

@media(max-width:980px){
  .fns276-contact-top,
  .fns276-coord-grid{grid-template-columns:1fr!important;}
}
@media(max-width:720px){
  .fns276-maplink-row{grid-template-columns:1fr!important;gap:7px!important;}
  .fns276-maplink-row input{border-radius:13px!important;}
  .fns276-maplink-row button{border-left:1px solid var(--c272-line)!important;border-radius:13px!important;}
  .fns276-mini-map{height:250px!important;min-height:250px!important;}
}
/* === END FNS V276 === */


/* =========================================================
   FNS V277 MINI MAP FALLBACK + DARK VISIBILITY
   Memastikan peta selalu muncul (Leaflet/iframe fallback)
   dan teks tetap jelas di mode gelap.
   ========================================================= */
html.dark .fns272-customer-form,
body.dark .fns272-customer-form,
html[data-theme="dark"] .fns272-customer-form,
body[data-theme="dark"] .fns272-customer-form,
.theme-dark .fns272-customer-form,
.dark-mode .fns272-customer-form,
body.theme-dark .fns272-customer-form,
body.dark-mode .fns272-customer-form{
  --c272-bg:linear-gradient(145deg,rgba(7,24,46,.96),rgba(15,25,62,.94))!important;
  --c272-bg-soft:rgba(255,255,255,.05)!important;
  --c272-bg-input:rgba(5,20,40,.88)!important;
  --c272-text:#edf7ff!important;
  --c272-muted:#bdd0e4!important;
  --c272-line:rgba(103,180,255,.22)!important;
  --c272-line-strong:rgba(55,159,255,.45)!important;
  --c272-shadow:0 24px 64px rgba(0,0,0,.30)!important;
}
html.dark .fns272-customer-form .fns272-subsection-title small,
body.dark .fns272-customer-form .fns272-subsection-title small,
html[data-theme="dark"] .fns272-customer-form .fns272-subsection-title small,
body[data-theme="dark"] .fns272-customer-form .fns272-subsection-title small,
.theme-dark .fns272-customer-form .fns272-subsection-title small,
.dark-mode .fns272-customer-form .fns272-subsection-title small,
html.dark .fns272-customer-form .fns272-section-head p,
body.dark .fns272-customer-form .fns272-section-head p,
html[data-theme="dark"] .fns272-customer-form .fns272-section-head p,
body[data-theme="dark"] .fns272-customer-form .fns272-section-head p,
.theme-dark .fns272-customer-form .fns272-section-head p,
.dark-mode .fns272-customer-form .fns272-section-head p,
html.dark .fns272-customer-form .fns272-details summary small,
body.dark .fns272-customer-form .fns272-details summary small,
html[data-theme="dark"] .fns272-customer-form .fns272-details summary small,
body[data-theme="dark"] .fns272-customer-form .fns272-details summary small,
.theme-dark .fns272-customer-form .fns272-details summary small,
.dark-mode .fns272-customer-form .fns272-details summary small,
html.dark .fns272-customer-form label>small,
body.dark .fns272-customer-form label>small,
html[data-theme="dark"] .fns272-customer-form label>small,
body[data-theme="dark"] .fns272-customer-form label>small,
.theme-dark .fns272-customer-form label>small,
.dark-mode .fns272-customer-form label>small{
  color:#c4d4e5!important;
}
html.dark .fns272-customer-form input::placeholder,
html.dark .fns272-customer-form textarea::placeholder,
body.dark .fns272-customer-form input::placeholder,
body.dark .fns272-customer-form textarea::placeholder,
html[data-theme="dark"] .fns272-customer-form input::placeholder,
html[data-theme="dark"] .fns272-customer-form textarea::placeholder,
body[data-theme="dark"] .fns272-customer-form input::placeholder,
body[data-theme="dark"] .fns272-customer-form textarea::placeholder,
.theme-dark .fns272-customer-form input::placeholder,
.theme-dark .fns272-customer-form textarea::placeholder,
.dark-mode .fns272-customer-form input::placeholder,
.dark-mode .fns272-customer-form textarea::placeholder{
  color:#8fafca!important;opacity:1!important;
}
html.dark .fns272-customer-form .fns272-input-action button,
html.dark .fns272-customer-form .fns272-ip-row button,
html.dark .fns272-customer-form .fns276-inline-action button,
html.dark .fns272-customer-form .fns276-maplink-row button,
body.dark .fns272-customer-form .fns272-input-action button,
body.dark .fns272-customer-form .fns272-ip-row button,
body.dark .fns272-customer-form .fns276-inline-action button,
body.dark .fns272-customer-form .fns276-maplink-row button,
html[data-theme="dark"] .fns272-customer-form .fns272-input-action button,
html[data-theme="dark"] .fns272-customer-form .fns272-ip-row button,
html[data-theme="dark"] .fns272-customer-form .fns276-inline-action button,
html[data-theme="dark"] .fns272-customer-form .fns276-maplink-row button,
body[data-theme="dark"] .fns272-customer-form .fns272-input-action button,
body[data-theme="dark"] .fns272-customer-form .fns272-ip-row button,
body[data-theme="dark"] .fns272-customer-form .fns276-inline-action button,
body[data-theme="dark"] .fns272-customer-form .fns276-maplink-row button,
.theme-dark .fns272-customer-form .fns272-input-action button,
.theme-dark .fns272-customer-form .fns272-ip-row button,
.theme-dark .fns272-customer-form .fns276-inline-action button,
.theme-dark .fns272-customer-form .fns276-maplink-row button,
.dark-mode .fns272-customer-form .fns272-input-action button,
.dark-mode .fns272-customer-form .fns272-ip-row button,
.dark-mode .fns272-customer-form .fns276-inline-action button,
.dark-mode .fns272-customer-form .fns276-maplink-row button{
  color:#f8fcff!important;
}
.fns276-mini-map{
  position:relative!important;
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
}
.fns276-map-frame{
  width:100%!important;
  height:100%!important;
  min-height:inherit!important;
  border:0!important;
  display:block!important;
  background:#e5eef8!important;
}
.fns276-map-fallback-note{
  position:absolute!important;
  right:10px!important;
  bottom:10px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.72)!important;
  color:#f8fcff!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  pointer-events:none!important;
}
@media(max-width:1180px){
  .fns276-mini-map{height:260px!important;min-height:260px!important;}
}
/* === END FNS V277 === */


/* =========================================================
   FNS V278 RAPID FORM PRECISION BUTTONS
   Rapikan field biaya, tombol koordinat, tombol IP Pool,
   dan layout tombol agar tidak bertumpuk/terpotong.
   ========================================================= */
.fns274-customer-page #fns272Service .fns272-money-field,
.fns274-customer-page #fns272Service .fns272-number-field{
  display:block!important;
  width:100%!important;
}
.fns274-customer-page #fns272Service .fns272-money-field input{
  padding-left:60px!important;
  padding-right:14px!important;
  font-size:12px!important;
  letter-spacing:.01em!important;
}
.fns274-customer-page #fns272Service .fns272-money-field b{
  left:12px!important;
  min-width:34px!important;
  height:26px!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
}
.fns274-customer-page #fns272Service .fns272-number-field input{
  padding-right:112px!important;
  font-size:12px!important;
}
.fns274-customer-page #fns272Service .fns272-number-field b{
  right:10px!important;
  padding:6px 8px!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1.1!important;
}

/* Tombol koordinat dipisah rapi dari input dan diberi ukuran proporsional. */
.fns274-customer-page #fns272Contact .fns276-inline-action,
.fns274-customer-page #fns272Contact .fns276-maplink-row,
.fns274-customer-page #fns272Network .fns272-ip-row{
  display:grid!important;
  align-items:stretch!important;
  gap:10px!important;
}
.fns274-customer-page #fns272Contact .fns276-inline-action{
  grid-template-columns:minmax(0,1fr) 56px!important;
}
.fns274-customer-page #fns272Contact .fns276-maplink-row{
  grid-template-columns:minmax(0,1fr) 182px!important;
}
.fns274-customer-page #fns272Network .fns272-ip-row{
  grid-template-columns:minmax(0,1fr) 170px!important;
}
.fns274-customer-page #fns272Contact .fns276-inline-action input,
.fns274-customer-page #fns272Contact .fns276-maplink-row input,
.fns274-customer-page #fns272Network .fns272-ip-row input{
  border-radius:14px!important;
  border-top-right-radius:14px!important;
  border-bottom-right-radius:14px!important;
  min-width:0!important;
}
.fns274-customer-page #fns272Contact .fns276-inline-action button,
.fns274-customer-page #fns272Contact .fns276-maplink-row button,
.fns274-customer-page #fns272Network .fns272-ip-row button{
  width:100%!important;
  min-width:0!important;
  height:45px!important;
  padding:0 14px!important;
  border:1px solid var(--c272-line)!important;
  border-left:1px solid var(--c272-line)!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:900!important;
  box-sizing:border-box!important;
}
.fns274-customer-page #fns272Contact .fns276-inline-action button{
  padding:0!important;
  font-size:17px!important;
}
.fns274-customer-page #fns272Contact .fns276-maplink-row button,
.fns274-customer-page #fns272Network .fns272-ip-row button{
  letter-spacing:.01em!important;
}
.fns274-customer-page #fns272Contact .fns276-link-hint{
  font-size:10px!important;
  vertical-align:middle!important;
}
.fns274-customer-page #fns272Contact .fns276-mini-map{
  margin-top:2px!important;
}

/* Ringkas sedikit spacing biar tetap sejajar. */
.fns274-customer-page #fns272Contact label,
.fns274-customer-page #fns272Network label,
.fns274-customer-page #fns272Service label{
  min-width:0!important;
}

@media(max-width:1180px){
  .fns274-customer-page #fns272Contact .fns276-maplink-row,
  .fns274-customer-page #fns272Network .fns272-ip-row{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:760px){
  .fns274-customer-page #fns272Contact .fns276-inline-action,
  .fns274-customer-page #fns272Contact .fns276-maplink-row,
  .fns274-customer-page #fns272Network .fns272-ip-row{
    grid-template-columns:1fr!important;
  }
  .fns274-customer-page #fns272Contact .fns276-inline-action button,
  .fns274-customer-page #fns272Contact .fns276-maplink-row button,
  .fns274-customer-page #fns272Network .fns272-ip-row button{
    height:44px!important;
  }
}
/* === END FNS V278 === */


/* =========================================================
   FNS V279 CENTERED IP POOL MODAL
   Modal dipasang langsung ke body dan dikunci ke viewport agar
   selalu melayang tepat di tengah, menutup sidebar dan topbar.
   ========================================================= */
html.fns279-modal-open,
body.fns279-modal-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

#ipPoolModal.ip-pool-modal{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;

  width:100vw!important;
  min-width:100vw!important;
  max-width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  max-height:100vh!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;

  margin:0!important;
  padding:clamp(14px,2.5vw,34px)!important;

  display:none!important;
  place-items:center!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  box-sizing:border-box!important;
  isolation:isolate!important;
  z-index:2147483646!important;

  transform:none!important;
  translate:none!important;
  scale:1!important;

  background:rgba(1,7,20,.76)!important;
  backdrop-filter:blur(12px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
}

#ipPoolModal.ip-pool-modal.show,
#ipPoolModal.ip-pool-modal[aria-hidden="false"]{
  display:grid!important;
}

#ipPoolModal.ip-pool-modal>.ip-pool-dialog{
  position:relative!important;
  inset:auto!important;

  width:min(980px,calc(100vw - clamp(28px,5vw,68px)))!important;
  min-width:0!important;
  max-width:980px!important;

  height:auto!important;
  min-height:0!important;
  max-height:min(86dvh,820px)!important;

  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;

  display:flex!important;
  flex-direction:column!important;

  border-radius:24px!important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.55),
    0 0 0 1px rgba(66,173,255,.13)!important;

  transform:none!important;
  translate:0!important;
  scale:1!important;
}

#ipPoolModal .ip-pool-head{
  flex:0 0 auto!important;
}

#ipPoolModal .ip-pool-range-picker{
  flex:0 0 auto!important;
  padding:0 20px 12px!important;
}

#ipPoolModal .ip-pool-body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}

#ipPoolModal .modal-close{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
  border-radius:12px!important;
}

#ipPoolModal .ip-pool-table{
  min-width:720px!important;
}

@media(max-width:760px){
  #ipPoolModal.ip-pool-modal{
    padding:10px!important;
  }
  #ipPoolModal.ip-pool-modal>.ip-pool-dialog{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:18px!important;
  }
  #ipPoolModal .ip-pool-head{
    padding:14px 15px!important;
  }
  #ipPoolModal .ip-pool-head b{
    font-size:14px!important;
  }
  #ipPoolModal .ip-pool-head span{
    font-size:10px!important;
  }
  #ipPoolModal .ip-pool-range-picker{
    padding:0 15px 10px!important;
  }
  #ipPoolModal .ip-pool-body{
    padding:12px 14px!important;
  }
}
/* === END FNS V279 === */


/* =========================================================
   FNS V280 WEBSITE REGISTRATION NOTIFICATIONS
   ========================================================= */
.fns280-registration-bell{position:relative!important;}
.fns280-registration-bell.has{
  border-color:rgba(56,189,248,.55)!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.08),0 10px 25px rgba(14,165,233,.18)!important;
}
.fns280-registration-bell.has::after{
  content:''!important;position:absolute!important;inset:4px!important;border-radius:12px!important;
  border:1px solid rgba(56,189,248,.50)!important;animation:fns280BellPulse 1.8s ease-out infinite!important;pointer-events:none!important;
}
@keyframes fns280BellPulse{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.35);opacity:0}}

.fns280-registration-panel{
  margin-bottom:14px;padding:14px 16px;border:1px solid rgba(56,189,248,.24);border-radius:22px;
  background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(99,102,241,.07));
  box-shadow:0 18px 45px rgba(29,78,216,.08);overflow:hidden;
}
.fns280-registration-panel.has-registration{border-color:rgba(34,197,94,.32);background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(14,165,233,.08),rgba(99,102,241,.07));}
.fns280-registration-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px;}
.fns280-registration-head>div:first-child{display:grid;grid-template-columns:12px auto;align-items:center;gap:3px 9px;min-width:0;}
.fns280-registration-head b{font-size:14px;color:var(--text);}
.fns280-registration-head small{grid-column:2;color:var(--muted);font-size:9px;font-weight:800;}
.fns280-registration-pulse{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 7px rgba(34,197,94,.12);}
.fns280-registration-panel.has-registration .fns280-registration-pulse{animation:fns280PulseDot 1.6s ease-in-out infinite;}
@keyframes fns280PulseDot{50%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
.fns280-registration-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.fns280-registration-actions a{padding:8px 11px;border:1px solid rgba(56,189,248,.25);border-radius:11px;color:var(--text);background:rgba(255,255,255,.05);font-size:9px;font-weight:900;text-decoration:none;white-space:nowrap;}
.fns280-registration-list{display:grid;gap:8px;}
.fns280-registration-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(91,157,222,.16);border-radius:14px;background:rgba(255,255,255,.04);color:var(--text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.fns280-registration-item:hover{transform:translateY(-1px);border-color:rgba(56,189,248,.40);background:rgba(56,189,248,.07);}
.fns280-registration-item>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#1d8fff,#7058ff);font-size:17px;}
.fns280-registration-item div{min-width:0;}
.fns280-registration-item strong,.fns280-registration-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fns280-registration-item strong{font-size:10px;color:var(--text);}.fns280-registration-item small{margin-top:3px;font-size:8px;color:var(--muted);}
.fns280-registration-item time{font-size:8px;color:var(--muted);white-space:nowrap;}
.fns280-registration-empty{padding:13px;border:1px dashed rgba(91,157,222,.24);border-radius:13px;color:var(--muted);font-size:9px;text-align:center;}

.fns280-registration-toast{position:fixed;right:22px;top:98px;z-index:1000000;width:min(390px,calc(100vw - 28px));display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;padding:13px 15px;border:1px solid rgba(56,189,248,.38);border-radius:17px;color:#f8fcff;background:linear-gradient(135deg,#08203c,#102a55 58%,#21195d);box-shadow:0 24px 70px rgba(0,0,0,.38);text-decoration:none;opacity:0;transform:translateY(-18px) scale(.96);transition:opacity .24s ease,transform .24s ease;}
.fns280-registration-toast.show{opacity:1;transform:translateY(0) scale(1);}
.fns280-registration-toast>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#1598ff,#7959ff);font-size:21px;}
.fns280-registration-toast b,.fns280-registration-toast small{display:block;}.fns280-registration-toast b{font-size:11px}.fns280-registration-toast small{margin-top:4px;color:#bcd2ea;font-size:9px;line-height:1.45;}

.fns280-notification-center{display:grid;gap:15px;}
.fns280-notification-hero{display:grid;grid-template-columns:72px minmax(0,1fr) 150px;align-items:center;gap:18px;padding:23px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg,rgba(14,165,233,.11),rgba(99,102,241,.10));box-shadow:0 20px 55px rgba(29,78,216,.10);}
.fns280-notification-hero-icon{width:72px;height:72px;display:grid;place-items:center;border-radius:22px;color:#fff;background:linear-gradient(135deg,#168fff,#18c7e9 58%,#7658ff);font-size:30px;box-shadow:0 15px 30px rgba(22,143,255,.25);}
.fns280-notification-hero span{font-size:9px;font-weight:1000;letter-spacing:.10em;color:#29b6ef}.fns280-notification-hero h1{margin:5px 0 7px;font-size:27px;line-height:1.1;color:var(--text)}.fns280-notification-hero p{margin:0;color:var(--muted);font-size:10px;line-height:1.55;}
.fns280-notification-count{padding:15px;border:1px solid rgba(56,189,248,.25);border-radius:18px;text-align:center;background:rgba(255,255,255,.05);}.fns280-notification-count b{display:block;font-size:30px;color:#20b7ef}.fns280-notification-count small{font-size:9px;color:var(--muted);font-weight:900;}
.fns280-notification-toolbar{display:flex;gap:9px;flex-wrap:wrap;}
.fns280-notification-list-page{display:grid;gap:10px;}
.fns280-notification-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);border-radius:19px;background:var(--card);box-shadow:0 12px 32px rgba(18,60,110,.05);}
.fns280-notification-card.unread{border-color:rgba(34,197,94,.30);background:linear-gradient(135deg,rgba(34,197,94,.07),var(--card));}
.fns280-notification-avatar{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#168fff,#7058ff);font-size:23px;}
.fns280-notification-copy{min-width:0}.fns280-notification-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fns280-notification-title b{font-size:12px;color:var(--text)}.fns280-notification-title span{padding:4px 8px;border-radius:999px;background:rgba(34,197,94,.12);color:#16a75a;font-size:7px;font-weight:1000}.fns280-notification-card.read .fns280-notification-title span{background:rgba(148,163,184,.14);color:var(--muted)}
.fns280-notification-copy p{margin:6px 0;color:var(--muted);font-size:10px;line-height:1.55}.fns280-notification-copy small{font-size:8px;color:var(--muted)}
.fns280-notification-card-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.fns280-notification-page-empty{padding:45px 20px;border:1px dashed var(--line);border-radius:22px;text-align:center;color:var(--muted)}.fns280-notification-page-empty span{display:block;font-size:36px}.fns280-notification-page-empty b{display:block;margin-top:10px;color:var(--text)}.fns280-notification-page-empty p{font-size:10px;}

@media(max-width:820px){
  .fns280-registration-head{align-items:flex-start;flex-direction:column}.fns280-registration-actions{width:100%}.fns280-registration-actions a{flex:1;text-align:center}
  .fns280-registration-item{grid-template-columns:36px minmax(0,1fr)}.fns280-registration-item time{grid-column:2}
  .fns280-registration-toast{top:84px;right:14px}
  .fns280-notification-hero{grid-template-columns:58px minmax(0,1fr)}.fns280-notification-hero-icon{width:58px;height:58px;border-radius:18px}.fns280-notification-count{grid-column:1/-1}
  .fns280-notification-card{grid-template-columns:48px minmax(0,1fr)}.fns280-notification-card-actions{grid-column:1/-1;justify-content:stretch}.fns280-notification-card-actions a{flex:1;text-align:center}
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .topbar-wa-notif{display:none!important}
}
@media(max-width:520px){.fns280-registration-panel{padding:12px}.fns280-notification-hero h1{font-size:22px}.fns280-notification-card{padding:12px}.fns280-registration-bell{display:flex!important}}
/* === END FNS V280 === */


/* =========================================================
   FNS V281 UNIFIED NOTIFICATION ICON
   Satu ikon notifikasi untuk tiket, pendaftaran, dan WhatsApp.
   ========================================================= */

body.app-shell .fns281-notification-wrap{
  position:relative;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

body.app-shell .fns281-notification-bell{
  position:relative;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--text);
  background:var(--card);
  box-shadow:0 8px 24px rgba(31,78,136,.08);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

body.app-shell .fns281-notification-bell em{
  position:absolute;
  top:-7px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--card);
  border-radius:999px;
  color:#fff;
  background:#168fff;
  box-shadow:0 4px 12px rgba(22,143,255,.34);
  font-size:9px;
  font-style:normal;
  font-weight:1000;
}

body.app-shell .fns281-notification-bell:not(.has) em{
  background:#64748b;
}

body.app-shell .fns281-notification-bell.has{
  border-color:rgba(245,158,11,.42);
  background:linear-gradient(135deg,rgba(255,247,214,.95),rgba(254,226,226,.88));
  animation:fns281BellPulse 1.8s ease-in-out infinite;
}

body.dark.app-shell .fns281-notification-bell,
body[data-theme="dark"].app-shell .fns281-notification-bell,
html.dark body.app-shell .fns281-notification-bell,
html[data-theme="dark"] body.app-shell .fns281-notification-bell{
  color:#f7fbff;
  border-color:rgba(108,181,255,.23);
  background:rgba(8,28,53,.90);
}

body.dark.app-shell .fns281-notification-bell.has,
body[data-theme="dark"].app-shell .fns281-notification-bell.has,
html.dark body.app-shell .fns281-notification-bell.has,
html[data-theme="dark"] body.app-shell .fns281-notification-bell.has{
  border-color:rgba(251,191,36,.40);
  background:linear-gradient(135deg,rgba(120,53,15,.83),rgba(127,29,29,.76));
}

.fns281-notification-menu[hidden]{
  display:none!important;
}

.fns281-notification-menu{
  position:absolute;
  z-index:100020;
  top:calc(100% + 12px);
  right:0;
  width:min(390px,calc(100vw - 24px));
  padding:12px;
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--text);
  background:var(--card);
  box-shadow:0 24px 80px rgba(11,39,78,.25);
  animation:fns281MenuIn .18s ease-out;
}

.fns281-notification-menu::before{
  content:"";
  position:absolute;
  top:-7px;
  right:16px;
  width:13px;
  height:13px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  background:var(--card);
  transform:rotate(45deg);
}

.fns281-notification-menu>header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:6px 6px 12px;
  border-bottom:1px solid var(--line);
}

.fns281-notification-menu>header b{
  display:block;
  font-size:14px;
  color:var(--text);
}

.fns281-notification-menu>header small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  line-height:1.4;
}

.fns281-notification-menu>header>span{
  min-width:40px;
  height:40px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#168fff,#18c5ea 58%,#7358ff);
  font-size:16px;
  font-weight:1000;
}

.fns281-notification-categories{
  display:grid;
  gap:8px;
  padding:11px 0;
}

.fns281-notification-categories>a{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  color:inherit;
  background:rgba(148,163,184,.045);
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.fns281-notification-categories>a:hover{
  transform:translateY(-1px);
  border-color:rgba(22,143,255,.38);
  box-shadow:0 10px 25px rgba(35,91,150,.10);
}

.fns281-notification-categories>a.has{
  border-color:rgba(245,158,11,.30);
  background:linear-gradient(135deg,rgba(245,158,11,.07),rgba(239,68,68,.05));
}

.fns281-notification-categories .icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(22,143,255,.17),rgba(115,88,255,.14));
  font-size:19px;
}

.fns281-notification-categories b{
  display:block;
  color:var(--text);
  font-size:11px;
}

.fns281-notification-categories small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
}

.fns281-notification-categories em{
  min-width:28px;
  height:28px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:#64748b;
  font-size:9px;
  font-style:normal;
  font-weight:1000;
}

.fns281-notification-categories>a.has em{
  background:#ef4444;
}

.fns281-notification-menu>footer{
  padding-top:10px;
  border-top:1px solid var(--line);
}

.fns281-notification-menu>footer a{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#168fff,#18c5ea 58%,#7358ff);
  font-size:10px;
  font-weight:1000;
  text-decoration:none;
}

/* Pusat notifikasi penuh */
.fns281-center{
  display:grid;
  gap:15px;
}

.fns281-center-hero{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 150px;
  align-items:center;
  gap:18px;
  padding:23px;
  border:1px solid var(--line);
  border-radius:27px;
  background:linear-gradient(135deg,rgba(14,165,233,.11),rgba(99,102,241,.10));
  box-shadow:0 20px 55px rgba(29,78,216,.09);
}

.fns281-center-hero-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:23px;
  color:#fff;
  background:linear-gradient(135deg,#168fff,#18c7e9 58%,#7658ff);
  box-shadow:0 15px 30px rgba(22,143,255,.25);
  font-size:32px;
}

.fns281-center-hero span{
  color:#24b4ef;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.11em;
}

.fns281-center-hero h1{
  margin:5px 0 7px;
  color:var(--text);
  font-size:27px;
  line-height:1.1;
}

.fns281-center-hero p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}

.fns281-center-total{
  padding:15px;
  border:1px solid rgba(56,189,248,.24);
  border-radius:18px;
  text-align:center;
  background:rgba(255,255,255,.05);
}

.fns281-center-total b{
  display:block;
  color:#20b7ef;
  font-size:31px;
}

.fns281-center-total small{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
}

.fns281-center-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.fns281-center-stats>a{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:94px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:20px;
  color:inherit;
  background:var(--card);
  text-decoration:none;
}

.fns281-center-stats>a>span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(22,143,255,.15),rgba(115,88,255,.12));
  font-size:23px;
}

.fns281-center-stats small{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
}

.fns281-center-stats b{
  display:block;
  margin-top:4px;
  color:var(--text);
  font-size:25px;
}

.fns281-center-stats i{
  color:#1caeea;
  font-size:9px;
  font-style:normal;
  font-weight:900;
}

.fns281-center-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.fns281-center-panel{
  min-width:0;
  border:1px solid var(--line);
  border-radius:21px;
  background:var(--card);
  overflow:hidden;
}

.fns281-center-panel>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--line);
}

.fns281-center-panel>header>div{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.fns281-center-panel>header b{
  color:var(--text);
  font-size:11px;
}

.fns281-center-panel>header a{
  color:#20aeea;
  font-size:8px;
  font-weight:1000;
  text-decoration:none;
  white-space:nowrap;
}

.fns281-center-list{
  display:grid;
  gap:7px;
  padding:10px;
}

.fns281-center-list>a{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:14px;
  color:inherit;
  background:rgba(148,163,184,.035);
  text-decoration:none;
}

.fns281-list-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(22,143,255,.10);
}

.fns281-center-list b{
  display:block;
  color:var(--text);
  font-size:9px;
  line-height:1.35;
}

.fns281-center-list small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:7.5px;
  line-height:1.4;
}

.fns281-center-list em{
  padding:5px 7px;
  border-radius:999px;
  color:#fff;
  background:#ef4444;
  font-size:7px;
  font-style:normal;
  font-weight:1000;
}

.fns281-center-empty{
  padding:18px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted);
  text-align:center;
  font-size:9px;
  font-weight:800;
}

@keyframes fns281BellPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

@keyframes fns281MenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:1050px){
  .fns281-center-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:820px){
  .fns281-notification-menu{
    position:fixed;
    top:82px;
    right:10px;
    left:10px;
    width:auto;
    max-height:calc(100svh - 96px);
    overflow:auto;
  }

  .fns281-notification-menu::before{
    display:none;
  }

  .fns281-center-hero{
    grid-template-columns:64px minmax(0,1fr);
  }

  .fns281-center-total{
    grid-column:1/-1;
  }

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

@media(max-width:520px){
  body.app-shell .fns281-notification-bell{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:13px;
  }

  .fns281-center-hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .fns281-center-hero-icon{
    margin:auto;
  }

  .fns281-center-stats>a{
    grid-template-columns:48px minmax(0,1fr);
  }

  .fns281-center-stats i{
    grid-column:2;
  }
}

/* Ikon lama topbar tidak digunakan lagi. */
body.app-shell #dash48TicketBell,
body.app-shell #fns280RegistrationBell,
body.app-shell #topbarWaNotif{
  display:none!important;
}

/* === END FNS V281 === */


/* =========================================================
   FNS V282 MOBILE LANDING HEADER LOCK
   Header landing page HP dikunci tetap di atas viewport.
   Tidak bergeser, tidak mengecil, dan tidak ikut scroll.
   ========================================================= */

@media(max-width:900px){
  :root{
    --lp282-mobile-header-top:max(5px,env(safe-area-inset-top));
    --lp282-mobile-header-space:112px;
  }

  body.landing-page.lp255-sales-page{
    padding-top:calc(var(--lp282-mobile-header-space) + env(safe-area-inset-top))!important;
    overflow-x:hidden!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell{
    position:fixed!important;
    top:var(--lp282-mobile-header-top)!important;
    left:7px!important;
    right:7px!important;

    width:auto!important;
    max-width:none!important;
    margin:0!important;

    z-index:5000!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;

    will-change:auto!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    contain:layout paint!important;

    transition:
      box-shadow .20s ease,
      background .20s ease,
      border-color .20s ease!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell.scrolled{
    top:var(--lp282-mobile-header-top)!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }

  /* Tinggi promo dan navbar tidak berubah saat scroll. */
  body.landing-page.lp255-sales-page
  .lp256-header-shell.scrolled .lp256-promo-bar,
  body.landing-page.lp255-sales-page
  .lp256-promo-bar{
    min-height:32px!important;
    height:32px!important;
    padding:5px 9px!important;
    box-sizing:border-box!important;
  }

  body.landing-page.lp255-sales-page
  .lp256-header-shell.scrolled .lp256-navbar,
  body.landing-page.lp255-sales-page
  .lp256-navbar{
    min-height:66px!important;
    height:66px!important;
    padding:7px 8px 7px 10px!important;
    box-sizing:border-box!important;
  }

  /* Konten mulai tepat di bawah header fixed. */
  body.landing-page.lp255-sales-page .lp255-main{
    padding-top:12px!important;
    margin-top:0!important;
  }

  body.landing-page.lp255-sales-page #beranda,
  body.landing-page.lp255-sales-page .lp255-section{
    scroll-margin-top:calc(var(--lp282-mobile-header-space) + 10px)!important;
  }

  /*
   * Drawer menu dibuat melayang di bawah header.
   * Membuka menu tidak mengubah tinggi/posisi header.
   */
  body.landing-page.lp255-sales-page
  .lp255-mobile-menu.lp256-mobile-menu{
    position:fixed!important;
    top:calc(var(--lp282-mobile-header-top) + 104px)!important;
    left:7px!important;
    right:7px!important;

    width:auto!important;
    max-width:none!important;
    max-height:calc(100svh - 122px - env(safe-area-inset-bottom))!important;

    margin:0!important;
    padding:10px!important;

    z-index:5001!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;

    border-radius:18px!important;
    box-shadow:0 24px 70px rgba(0,0,0,.38)!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-mobile-menu.lp256-mobile-menu:not(.open){
    display:none!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-mobile-menu.lp256-mobile-menu.open{
    display:grid!important;
  }
}

@media(max-width:680px){
  :root{
    --lp282-mobile-header-space:110px;
  }

  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell{
    border-radius:20px!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell::after{
    bottom:-8px!important;
    height:18px!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-mobile-menu.lp256-mobile-menu{
    top:calc(var(--lp282-mobile-header-top) + 102px)!important;
    max-height:calc(100svh - 120px - env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:420px){
  :root{
    --lp282-mobile-header-space:108px;
  }

  body.landing-page.lp255-sales-page
  .lp256-logo-shell{
    width:43px!important;
    height:43px!important;
    flex-basis:43px!important;
  }

  body.landing-page.lp255-sales-page
  .lp256-logo-shell img,
  body.landing-page.lp255-sales-page
  .lp256-logo-shell .brand-mark{
    width:39px!important;
    height:39px!important;
  }

  body.landing-page.lp255-sales-page
  .lp256-brand-copy b{
    font-size:10.5px!important;
  }

  body.landing-page.lp255-sales-page
  .lp256-theme-button,
  body.landing-page.lp255-sales-page
  .lp256-menu-button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
}

/* === END FNS V282 === */


/* =========================================================
   FNS V283 RESTORE MOBILE HAMBURGER
   Tombol garis tiga dipaksa tampil, diberi ruang tetap,
   dan tidak terpotong oleh brand/header landing page.
   ========================================================= */

@media(max-width:1240px){
  body.landing-page.lp255-sales-page
  .lp255-navbar.lp256-navbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content!important;
    align-items:center!important;
    column-gap:8px!important;
    overflow:visible!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-brand.lp256-brand{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  body.landing-page.lp255-sales-page
  .lp256-brand-copy{
    min-width:0!important;
    overflow:hidden!important;
  }

  body.landing-page.lp255-sales-page
  .lp256-brand-copy b,
  body.landing-page.lp255-sales-page
  .lp256-brand-copy small{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-nav-actions.lp256-nav-actions{
    position:relative!important;
    z-index:30!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;

    min-width:88px!important;
    gap:7px!important;
    overflow:visible!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button{
    position:relative!important;
    z-index:40!important;

    display:flex!important;
    visibility:visible!important;
    opacity:1!important;

    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    flex:0 0 42px!important;

    padding:0!important;
    margin:0!important;

    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:5px!important;

    border:1px solid rgba(112,184,255,.34)!important;
    border-radius:14px!important;

    color:#f7fbff!important;
    background:
      radial-gradient(circle at 30% 20%,rgba(41,193,255,.18),transparent 46%),
      rgba(11,34,65,.92)!important;

    box-shadow:
      0 10px 25px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.08)!important;

    pointer-events:auto!important;
    cursor:pointer!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }

  html:not(.dark)
  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button,
  html[data-theme="light"]
  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button{
    color:#0c2747!important;
    border-color:rgba(38,123,205,.26)!important;
    background:
      radial-gradient(circle at 30% 20%,rgba(41,193,255,.14),transparent 46%),
      rgba(246,250,255,.94)!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button span{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;

    width:20px!important;
    height:2.5px!important;
    min-height:2.5px!important;
    flex:0 0 2.5px!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:999px!important;

    color:inherit!important;
    background:currentColor!important;
    box-shadow:none!important;

    transform-origin:center!important;
    transition:
      transform .20s ease,
      opacity .20s ease!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button.open span:nth-child(1){
    transform:translateY(7.5px) rotate(45deg)!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button.open span:nth-child(2){
    opacity:0!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button.open span:nth-child(3){
    transform:translateY(-7.5px) rotate(-45deg)!important;
  }
}

/* Pada HP, hanya tombol tema dan hamburger yang ditampilkan. */
@media(max-width:900px){
  body.landing-page.lp255-sales-page .lp256-mini-status,
  body.landing-page.lp255-sales-page .lp255-wa-button.lp256-wa-button,
  body.landing-page.lp255-sales-page .lp255-login-button.lp256-login-button{
    display:none!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-nav-actions.lp256-nav-actions{
    min-width:89px!important;
  }
}

@media(max-width:420px){
  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    flex-basis:38px!important;
    border-radius:12px!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button span{
    width:18px!important;
    height:2px!important;
    min-height:2px!important;
    flex-basis:2px!important;
  }
}

/* Desktop lebar tetap menggunakan menu horizontal. */
@media(min-width:1241px){
  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button{
    display:none!important;
  }
}

/* === END FNS V283 === */


/* =========================================================
   FNS V284 MOBILE DRAWER PORTAL FIX
   Drawer dipindahkan ke BODY agar tidak terpotong oleh header
   fixed/contain. Tombol X dan drawer sekarang selalu sinkron.
   ========================================================= */

@media(max-width:1240px){
  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell{
    overflow:visible!important;
    contain:none!important;
  }

  html.lp284-menu-open,
  body.landing-page.lp255-sales-page.lp284-menu-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:none!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu{
    position:fixed!important;
    top:var(--lp284-menu-top,112px)!important;
    left:8px!important;
    right:8px!important;
    bottom:auto!important;

    z-index:6502!important;
    isolation:isolate!important;

    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:var(--lp284-menu-max-height,calc(100svh - 124px))!important;

    margin:0!important;
    padding:11px!important;

    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;

    border:1px solid rgba(83,169,255,.34)!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 100% 0,rgba(129,85,255,.17),transparent 36%),
      linear-gradient(145deg,rgba(4,20,42,.995),rgba(13,24,62,.995))!important;
    box-shadow:
      0 28px 90px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.07)!important;

    transform-origin:top right!important;
    will-change:transform,opacity!important;
  }

  html:not(.dark)
  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu,
  html[data-theme="light"]
  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu{
    border-color:rgba(34,123,210,.28)!important;
    background:
      radial-gradient(circle at 100% 0,rgba(129,85,255,.10),transparent 36%),
      linear-gradient(145deg,rgba(255,255,255,.995),rgba(236,245,255,.995))!important;
    box-shadow:
      0 28px 90px rgba(30,64,110,.28),
      inset 0 1px 0 rgba(255,255,255,.90)!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu:not(.open){
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu.open{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    animation:lp284DrawerVisible .22s cubic-bezier(.2,.8,.2,1) both!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu .lp256-mobile-menu-head{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu>a{
    min-width:0!important;
    min-height:56px!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu>a>b,
  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu>a>i{
    opacity:1!important;
    visibility:visible!important;
  }

  body.landing-page.lp255-sales-page
  >.lp284-mobile-menu-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:6500!important;

    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:0!important;
    background:rgba(2,12,28,.58)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    cursor:pointer!important;
    animation:lp284BackdropIn .18s ease both!important;
  }

  body.landing-page.lp255-sales-page
  >.lp284-mobile-menu-backdrop[hidden]{
    display:none!important;
  }

  /* Header dan tombol tetap berada di atas backdrop. */
  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell{
    z-index:6501!important;
  }

  body.landing-page.lp255-sales-page
  .lp255-menu-button.lp256-menu-button{
    z-index:6503!important;
  }
}

@media(max-width:680px){
  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu{
    grid-template-columns:1fr!important;
    left:7px!important;
    right:7px!important;
    gap:8px!important;
    padding:9px!important;
    border-radius:18px!important;
  }

  body.landing-page.lp255-sales-page
  >.lp255-mobile-menu.lp256-mobile-menu>a{
    min-height:52px!important;
  }
}

@keyframes lp284DrawerVisible{
  from{opacity:0;transform:translateY(-8px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes lp284BackdropIn{
  from{opacity:0}
  to{opacity:1}
}

/* === END FNS V284 === */


/* =========================================================
   FNS V285 LANDING CONTENT SAFE GUTTER
   Memberi jarak aman antara teks, garis dekoratif, dan tepi
   background pada tampilan laptop, tablet, dan HP.
   ========================================================= */

/* Header/ticker tidak lagi terlalu rapat ke garis tepi. */
body.landing-page.lp255-sales-page .lp256-promo-bar{
  padding-left:18px!important;
  padding-right:18px!important;
  box-sizing:border-box!important;
}
body.landing-page.lp255-sales-page .lp256-ticker-mask{
  margin-left:4px!important;
  margin-right:8px!important;
  min-width:0!important;
}
body.landing-page.lp255-sales-page .lp256-ticker-item{
  line-height:1.35!important;
}
body.landing-page.lp255-sales-page .lp256-navbar{
  padding-left:20px!important;
  padding-right:16px!important;
  box-sizing:border-box!important;
}

/* Hero desktop: seluruh isi memiliki gutter yang konsisten. */
body.landing-page.lp255-sales-page .lp255-hero{
  box-sizing:border-box!important;
  padding:
    46px
    clamp(28px,2.8vw,48px)
    38px!important;
  column-gap:clamp(34px,3.6vw,62px)!important;
}
body.landing-page.lp255-sales-page .lp255-hero-copy{
  min-width:0!important;
  max-width:100%!important;
  padding:10px 0 12px!important;
}
body.landing-page.lp255-sales-page .lp255-eyebrow{
  max-width:100%!important;
  padding-left:2px!important;
  line-height:1.55!important;
}
body.landing-page.lp255-sales-page .lp255-hero-copy h1{
  max-width:820px!important;
  margin:23px 0 21px!important;
  line-height:1.045!important;
  letter-spacing:-.047em!important;
  text-wrap:balance!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
body.landing-page.lp255-sales-page .lp255-hero-copy>p{
  max-width:760px!important;
  line-height:1.82!important;
  text-wrap:pretty!important;
}
body.landing-page.lp255-sales-page .lp255-hero-actions{
  margin-top:29px!important;
}
body.landing-page.lp255-sales-page .lp255-trust-row{
  margin-top:22px!important;
  row-gap:10px!important;
}
body.landing-page.lp255-sales-page .lp255-trust-row span{
  padding:10px 14px!important;
  line-height:1.35!important;
}
body.landing-page.lp255-sales-page .lp255-hero-stats{
  margin-top:25px!important;
}
body.landing-page.lp255-sales-page .lp255-hero-stats article{
  padding:17px!important;
}
body.landing-page.lp255-sales-page .lp255-network-showcase{
  min-width:0!important;
  max-width:100%!important;
}

/* Laptop/tablet: gutter tetap terasa tetapi ruang tidak boros. */
@media(min-width:681px) and (max-width:1240px){
  body.landing-page.lp255-sales-page .lp255-main{
    width:min(100% - 28px,1360px)!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero{
    padding:36px 30px 38px!important;
    row-gap:34px!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-copy h1{
    max-width:900px!important;
  }
}

/* HP: teks tidak lagi menempel pada garis/background kiri-kanan. */
@media(max-width:680px){
  body.landing-page.lp255-sales-page .lp255-main{
    width:calc(100% - 18px)!important;
    max-width:none!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero{
    padding:29px 19px 34px!important;
    row-gap:28px!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-copy{
    padding:3px 0 8px!important;
  }
  body.landing-page.lp255-sales-page .lp255-eyebrow{
    gap:9px!important;
    padding-left:1px!important;
    font-size:9.5px!important;
    line-height:1.55!important;
    letter-spacing:.085em!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-copy h1{
    max-width:none!important;
    margin:22px 0 21px!important;
    font-size:clamp(32px,9.2vw,39px)!important;
    line-height:1.08!important;
    letter-spacing:-.038em!important;
    text-wrap:balance!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-copy>p{
    max-width:none!important;
    font-size:13px!important;
    line-height:1.78!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-actions{
    gap:13px!important;
    margin-top:28px!important;
  }
  body.landing-page.lp255-sales-page .lp255-primary-cta,
  body.landing-page.lp255-sales-page .lp255-secondary-cta{
    min-height:58px!important;
    padding:0 18px!important;
    border-radius:17px!important;
  }
  body.landing-page.lp255-sales-page .lp255-trust-row{
    gap:9px!important;
    margin-top:24px!important;
  }
  body.landing-page.lp255-sales-page .lp255-trust-row span{
    padding:9px 12px!important;
    font-size:9px!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-stats{
    gap:12px!important;
    margin-top:27px!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-stats article{
    min-height:104px!important;
    padding:17px!important;
  }
  body.landing-page.lp255-sales-page .lp256-promo-bar{
    padding-left:13px!important;
    padding-right:13px!important;
  }
  body.landing-page.lp255-sales-page .lp256-ticker-mask{
    margin-left:5px!important;
    margin-right:6px!important;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)!important;
  }
  body.landing-page.lp255-sales-page .lp256-navbar{
    padding-left:13px!important;
    padding-right:10px!important;
  }
}

@media(max-width:420px){
  body.landing-page.lp255-sales-page .lp255-main{
    width:calc(100% - 16px)!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero{
    padding:26px 16px 31px!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-copy h1{
    font-size:clamp(31px,9.4vw,36px)!important;
    line-height:1.085!important;
  }
  body.landing-page.lp255-sales-page .lp255-hero-copy>p{
    font-size:12.5px!important;
    line-height:1.76!important;
  }
}

/* === END FNS V285 === */


/* =========================================================
   FNS V286 SMALLER LANDING HERO TITLE
   Ukuran judul utama diperkecil sedikit agar lebih proporsional
   pada laptop, tablet, dan HP tanpa mengubah struktur layout.
   ========================================================= */
body.landing-page.lp255-sales-page .lp255-hero-copy h1{
  font-size:clamp(40px,4.65vw,68px)!important;
  line-height:1.075!important;
  letter-spacing:-.042em!important;
  max-width:780px!important;
}

@media(min-width:681px) and (max-width:1240px){
  body.landing-page.lp255-sales-page .lp255-hero-copy h1{
    font-size:clamp(39px,5.7vw,58px)!important;
    line-height:1.08!important;
    max-width:760px!important;
  }
}

@media(max-width:680px){
  body.landing-page.lp255-sales-page .lp255-hero-copy h1{
    font-size:clamp(29px,8.15vw,35px)!important;
    line-height:1.11!important;
    letter-spacing:-.032em!important;
    max-width:none!important;
  }
}

@media(max-width:420px){
  body.landing-page.lp255-sales-page .lp255-hero-copy h1{
    font-size:clamp(28px,8.25vw,33px)!important;
    line-height:1.115!important;
  }
}
/* === END FNS V286 === */


/* =========================================================
   FNS V287 LANDING PACKAGE TO REGISTRATION
   Paket yang diklik membuka form daftar pelanggan baru dan
   otomatis terpilih pada field Paket Internet.
   ========================================================= */
body.landing-page.lp255-sales-page .lp255-package-card>a.lp287-package-loading{
  position:relative!important;
  pointer-events:none!important;
  opacity:.86!important;
  color:transparent!important;
}
body.landing-page.lp255-sales-page .lp255-package-card>a.lp287-package-loading::after{
  content:"Membuka Form Pendaftaran..."!important;
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:1000!important;
}

.fns230-auth-card .fns287-selected-package{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  margin:15px 0!important;
  padding:12px!important;
  border:1px solid rgba(24,181,235,.32)!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,rgba(22,143,255,.10),rgba(24,197,234,.08),rgba(115,88,255,.09))!important;
  box-shadow:0 12px 30px rgba(22,143,255,.08)!important;
}
.fns230-auth-card .fns287-selected-package>span{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#168fff,#18c5ea 58%,#7358ff)!important;
  font-size:21px!important;
}
.fns230-auth-card .fns287-selected-package small{
  display:block!important;
  color:#1caeea!important;
  font-size:7.5px!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
}
.fns230-auth-card .fns287-selected-package b{
  display:block!important;
  margin-top:4px!important;
  color:var(--text,#10243d)!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.fns230-auth-card .fns287-selected-package em{
  display:block!important;
  margin-top:3px!important;
  color:var(--muted,#667b95)!important;
  font-size:9px!important;
  font-style:normal!important;
  font-weight:800!important;
}
.fns230-auth-card .fns287-selected-package>i{
  padding:7px 9px!important;
  border:1px solid rgba(34,197,94,.25)!important;
  border-radius:999px!important;
  color:#16a34a!important;
  background:rgba(34,197,94,.09)!important;
  font-size:8px!important;
  font-style:normal!important;
  font-weight:1000!important;
  white-space:nowrap!important;
}
.fns230-auth-card .fns287-package-preselected{
  border-color:rgba(22,143,255,.58)!important;
  box-shadow:0 0 0 3px rgba(22,143,255,.10)!important;
}
html.dark .fns230-auth-card .fns287-selected-package b,
html[data-theme="dark"] .fns230-auth-card .fns287-selected-package b{
  color:#f2f8ff!important;
}
html.dark .fns230-auth-card .fns287-selected-package em,
html[data-theme="dark"] .fns230-auth-card .fns287-selected-package em{
  color:#b7cbe0!important;
}
@media(max-width:620px){
  .fns230-auth-card .fns287-selected-package{
    grid-template-columns:44px minmax(0,1fr)!important;
  }
  .fns230-auth-card .fns287-selected-package>span{
    width:44px!important;
    height:44px!important;
  }
  .fns230-auth-card .fns287-selected-package>i{
    grid-column:1/-1!important;
    justify-self:start!important;
  }
}
/* === END FNS V287 === */


/* =========================================================
   FNS V288 INVOICE SEARCH
   Pencarian tagihan presisi untuk desktop, tablet, dan HP.
   ========================================================= */
.fns288-invoice-head{
  align-items:flex-start!important;
  gap:14px!important;
}
.fns288-invoice-title{
  min-width:210px!important;
  flex:1 1 260px!important;
}
.fns288-search-summary{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  margin-top:7px!important;
  padding:6px 9px!important;
  border:1px solid rgba(14,165,233,.22)!important;
  border-radius:999px!important;
  color:var(--text)!important;
  background:rgba(14,165,233,.08)!important;
  font-size:9px!important;
  line-height:1.2!important;
}
.fns288-invoice-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  min-width:0!important;
}
.fns288-invoice-search{
  display:grid!important;
  grid-template-columns:34px minmax(230px,390px) auto auto!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
}
.fns288-invoice-search>span{
  width:34px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--line)!important;
  border-radius:11px!important;
  color:var(--text)!important;
  background:var(--panel2)!important;
  font-size:14px!important;
}
.fns288-invoice-search input[type="search"]{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  margin:0!important;
  padding:8px 12px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  color:var(--text)!important;
  background:var(--panel2)!important;
  outline:none!important;
  font-size:11px!important;
}
.fns288-invoice-search input[type="search"]:focus{
  border-color:rgba(14,165,233,.62)!important;
  box-shadow:0 0 0 3px rgba(14,165,233,.12)!important;
}
.fns288-invoice-search input[type="search"]::placeholder{
  color:var(--muted)!important;
  opacity:.88!important;
}
.fns288-invoice-search .btn,
.fns288-voucher-button{
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.fns288-reset-search{
  color:var(--text)!important;
  background:var(--panel2)!important;
}
.fns288-empty-search{
  min-height:150px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:22px!important;
  color:var(--text)!important;
  text-align:center!important;
}
.fns288-empty-search>span{
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  background:rgba(14,165,233,.10)!important;
  font-size:21px!important;
}
.fns288-empty-search>b{
  font-size:13px!important;
}
.fns288-empty-search>small{
  max-width:420px!important;
  color:var(--muted)!important;
  font-size:9px!important;
  line-height:1.5!important;
}

@media(max-width:1180px){
  .fns288-invoice-head{
    flex-direction:column!important;
  }
  .fns288-invoice-tools{
    width:100%!important;
    justify-content:flex-start!important;
  }
  .fns288-invoice-search{
    flex:1 1 600px!important;
    grid-template-columns:34px minmax(180px,1fr) auto auto!important;
  }
}
@media(max-width:700px){
  .fns288-invoice-tools,
  .fns288-invoice-search{
    width:100%!important;
  }
  .fns288-invoice-search{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
  }
  .fns288-invoice-search .btn,
  .fns288-invoice-search .fns288-reset-search{
    grid-column:auto!important;
    width:100%!important;
  }
  .fns288-invoice-search button.btn{
    grid-column:1/2!important;
  }
  .fns288-invoice-search .fns288-reset-search{
    grid-column:2/3!important;
  }
  .fns288-voucher-button{
    width:100%!important;
  }
}
@media(max-width:430px){
  .fns288-invoice-search{
    grid-template-columns:1fr!important;
  }
  .fns288-invoice-search>span{
    display:none!important;
  }
  .fns288-invoice-search button.btn,
  .fns288-invoice-search .fns288-reset-search{
    grid-column:auto!important;
  }
}
/* === END FNS V288 === */


/* =========================================================
   FNS V289 WHATSAPP LOG CLEANUP
   Hapus per log, hapus terpilih, bersihkan filter, bersihkan semua.
   ========================================================= */
.wa-log-card-head{
  align-items:flex-start!important;
  gap:14px!important;
}
.wa-log-clean-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.wa-log-clean-actions form{margin:0!important;}
.wa-log-clean-actions .btn{
  min-height:36px!important;
  white-space:nowrap!important;
}
.wa-log-bulk-form{display:block!important;margin:0!important;}
.wa-log-table-v289{
  min-width:1480px!important;
  table-layout:fixed!important;
  width:100%!important;
}
.wa-log-table-v289 th:nth-child(1){width:48px!important;}
.wa-log-table-v289 th:nth-child(2){width:158px!important;}
.wa-log-table-v289 th:nth-child(3){width:185px!important;}
.wa-log-table-v289 th:nth-child(4){width:145px!important;}
.wa-log-table-v289 th:nth-child(5){width:112px!important;}
.wa-log-table-v289 th:nth-child(6){width:35%!important;}
.wa-log-table-v289 th:nth-child(7){width:31%!important;}
.wa-log-table-v289 th:nth-child(8){width:84px!important;}
.wa-log-table-v289 td{
  vertical-align:middle!important;
  min-width:0!important;
  overflow:hidden!important;
}
.wa-log-table-v289 .wa-log-message,
.wa-log-table-v289 .wa-log-response{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  line-height:1.4!important;
}
.wa-log-check-col,
.wa-log-action-col{text-align:center!important;}
.wa-log-check-col input{
  width:18px!important;
  height:18px!important;
  accent-color:#168fff!important;
  cursor:pointer!important;
}
.wa-log-delete-one{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  display:inline-grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(248,113,113,.34)!important;
  border-radius:11px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#ef4444,#f97316)!important;
  box-shadow:0 8px 18px rgba(239,68,68,.18)!important;
  cursor:pointer!important;
  font-size:14px!important;
}
.wa-log-delete-one:hover{filter:brightness(1.07)!important;transform:translateY(-1px)!important;}
.wa-log-bulk-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-top:12px!important;
  padding:13px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:rgba(148,163,184,.05)!important;
}
.wa-log-bulk-footer b{display:block!important;color:var(--text)!important;font-size:11px!important;}
.wa-log-bulk-footer small{display:block!important;margin-top:3px!important;color:var(--muted)!important;font-size:8.5px!important;}
.wa-log-bulk-footer .btn:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
  filter:grayscale(.25)!important;
}
body.dark .wa-log-bulk-footer,
html[data-theme="dark"] .wa-log-bulk-footer{
  background:rgba(8,28,53,.58)!important;
}
@media(max-width:900px){
  .wa-log-card-head{flex-direction:column!important;align-items:stretch!important;}
  .wa-log-clean-actions{justify-content:flex-start!important;}
  .wa-log-clean-actions form,.wa-log-clean-actions .btn{flex:1 1 auto!important;}
  .wa-log-clean-actions .btn{width:100%!important;justify-content:center!important;}
}
@media(max-width:620px){
  .wa-log-clean-actions{display:grid!important;grid-template-columns:1fr!important;}
  .wa-log-bulk-footer{align-items:stretch!important;flex-direction:column!important;}
  .wa-log-bulk-footer .btn{width:100%!important;}
}
/* === END FNS V289 === */


/* =========================================================
   FNS V290 USER DROPDOWN LOGOUT
   Tombol Keluar topbar dihapus. Logout melalui menu user.
   ========================================================= */

body.app-shell .fns290-user-trigger{
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
}

body.app-shell .fns290-top-user-trigger{
  min-width:0;
  border:1px solid var(--line);
  color:var(--text);
  background:var(--card);
  text-align:left;
}

body.app-shell .fns290-top-user-trigger:hover,
body.app-shell .fns290-top-user-trigger.fns290-user-menu-active{
  border-color:rgba(33,169,238,.45);
  box-shadow:0 10px 26px rgba(30,102,176,.12);
}

body.app-shell .fns290-top-chevron{
  margin-left:2px;
  color:var(--muted);
  font-size:9px;
  font-style:normal;
  transition:transform .18s ease;
}

body.app-shell .fns290-top-user-trigger.fns290-user-menu-active
.fns290-top-chevron{
  transform:rotate(180deg);
}

body.app-shell .fns290-sidebar-user-trigger{
  width:100%;
  min-width:0;
  margin:0;
  text-align:left;
  color:inherit;
}

body.app-shell .fns290-sidebar-user-trigger:hover,
body.app-shell .fns290-sidebar-user-trigger.fns290-user-menu-active{
  border-color:rgba(33,169,238,.45);
  box-shadow:0 14px 30px rgba(20,91,160,.13);
}

body.app-shell .fns290-sidebar-user-trigger
.fns290-user-chevron{
  margin-left:auto;
  color:var(--muted);
  font-size:10px;
  line-height:1;
  transition:transform .18s ease;
}

body.app-shell .fns290-sidebar-user-trigger.fns290-user-menu-active
.fns290-user-chevron{
  transform:rotate(180deg);
}

.fns290-user-menu[hidden]{
  display:none!important;
}

.fns290-user-menu{
  position:fixed;
  z-index:100080;
  width:300px;
  max-width:calc(100vw - 20px);
  padding:11px;
  border:1px solid var(--line);
  border-radius:21px;
  color:var(--text);
  background:var(--card);
  box-shadow:0 26px 80px rgba(7,26,55,.28);
  animation:fns290UserMenuIn .16s ease-out;
}

.fns290-user-menu::before{
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  background:var(--card);
  transform:rotate(45deg);
}

.fns290-user-menu.from-topbar::before{
  top:-7px;
  right:24px;
}

.fns290-user-menu.from-sidebar::before{
  bottom:-7px;
  left:28px;
  transform:rotate(225deg);
}

.fns290-user-menu-head{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:7px 7px 13px;
  border-bottom:1px solid var(--line);
}

.fns290-user-menu-head img,
.fns290-user-menu-initial{
  width:48px;
  height:48px;
  border-radius:15px;
  object-fit:cover;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#168fff,#18c5ea 58%,#7358ff);
  font-size:17px;
  font-weight:1000;
}

.fns290-user-menu-head div{
  min-width:0;
}

.fns290-user-menu-head b{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.fns290-user-menu-head small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:var(--muted);
  font-size:8.5px;
  line-height:1.35;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.fns290-user-menu nav{
  display:grid;
  gap:7px;
  padding-top:10px;
}

.fns290-user-menu nav a{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:53px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:15px;
  color:inherit;
  background:rgba(148,163,184,.045);
  text-decoration:none;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.fns290-user-menu nav a:hover{
  transform:translateY(-1px);
  border-color:rgba(33,169,238,.30);
  background:rgba(33,169,238,.08);
}

.fns290-user-menu nav a>span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#168fff;
  background:rgba(22,143,255,.10);
  font-size:17px;
}

.fns290-user-menu nav a b{
  display:block;
  color:var(--text);
  font-size:10.5px;
}

.fns290-user-menu nav a small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
}

.fns290-user-menu nav a.fns290-logout-link{
  color:#ef476f;
}

.fns290-user-menu nav a.fns290-logout-link>span{
  color:#ef476f;
  background:rgba(239,71,111,.10);
}

.fns290-user-menu nav a.fns290-logout-link:hover{
  border-color:rgba(239,71,111,.25);
  background:rgba(239,71,111,.08);
}

body.dark .fns290-user-menu,
body[data-theme="dark"] .fns290-user-menu,
html.dark .fns290-user-menu,
html[data-theme="dark"] .fns290-user-menu{
  background:rgba(8,24,47,.98);
  border-color:rgba(103,177,255,.22);
  box-shadow:0 28px 90px rgba(0,0,0,.48);
}

body.dark .fns290-user-menu::before,
body[data-theme="dark"] .fns290-user-menu::before,
html.dark .fns290-user-menu::before,
html[data-theme="dark"] .fns290-user-menu::before{
  background:rgba(8,24,47,.98);
  border-color:rgba(103,177,255,.22);
}

@keyframes fns290UserMenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:760px){
  body.app-shell .fns290-top-user-trigger>span:not(.avatar-mini){
    display:none;
  }

  body.app-shell .fns290-top-user-trigger{
    width:43px;
    height:43px;
    min-width:43px;
    padding:3px;
    border-radius:14px;
    display:grid;
    place-items:center;
  }

  body.app-shell .fns290-top-user-trigger img,
  body.app-shell .fns290-top-user-trigger .avatar-mini{
    width:35px;
    height:35px;
    margin:0;
  }

  body.app-shell .fns290-top-chevron{
    display:none;
  }

  .fns290-user-menu{
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
  }

  .fns290-user-menu.from-topbar{
    top:76px!important;
  }

  .fns290-user-menu.from-sidebar{
    top:auto!important;
    bottom:86px!important;
  }

  .fns290-user-menu::before{
    display:none;
  }
}

/* Tombol Keluar topbar lama sengaja tidak digunakan. */
body.app-shell .top-actions>a[href*="r=logout"]{
  display:none!important;
}

/* === END FNS V290 === */


/* =========================================================
   FNS V291 USER MENU ANCHORED TO PHOTO
   Popup akun kecil, melayang, dan menempel pada foto user.
   ========================================================= */

.fns290-user-menu{
  position:fixed!important;
  left:var(--fns291-left,12px)!important;
  top:var(--fns291-top,72px)!important;
  right:auto!important;
  bottom:auto!important;

  width:var(--fns291-width,278px)!important;
  max-width:calc(100vw - 16px)!important;
  min-width:0!important;

  z-index:2147483000!important;
  margin:0!important;
  transform:none!important;
  translate:none!important;
  contain:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}

.fns290-user-menu::before{
  left:calc(var(--fns291-arrow-x,238px) - 7px)!important;
  right:auto!important;
  width:14px!important;
  height:14px!important;
}

.fns290-user-menu.fns291-place-below::before{
  top:-8px!important;
  bottom:auto!important;
  transform:rotate(45deg)!important;
}

.fns290-user-menu.fns291-place-above::before{
  top:auto!important;
  bottom:-8px!important;
  transform:rotate(225deg)!important;
}

.fns290-user-menu-head{
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:10px!important;
  padding:6px 6px 11px!important;
}

.fns290-user-menu-head img,
.fns290-user-menu-initial{
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
}

.fns290-user-menu nav{
  gap:6px!important;
  padding-top:8px!important;
}

.fns290-user-menu nav a{
  min-height:49px!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  gap:8px!important;
  padding:6px 8px!important;
  border-radius:13px!important;
}

.fns290-user-menu nav a>span{
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  font-size:15px!important;
}

.fns290-user-menu nav a b{
  font-size:10px!important;
}

.fns290-user-menu nav a small{
  font-size:7.5px!important;
}

@media(max-width:760px){
  .fns290-user-menu,
  .fns290-user-menu.from-topbar,
  .fns290-user-menu.from-sidebar{
    left:var(--fns291-left,8px)!important;
    top:var(--fns291-top,72px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--fns291-width,254px)!important;
    max-width:calc(100vw - 16px)!important;
  }

  .fns290-user-menu::before{
    display:block!important;
  }
}

/* Hindari popup terpotong oleh kontainer aplikasi. */
body.app-shell{
  overflow-x:hidden!important;
}

body.app-shell > .fns290-user-menu{
  pointer-events:auto!important;
}

/* === END FNS V291 === */


/* =========================================================
   FNS V292 COMPACT USER POPOVER
   Gaya ringkas seperti video contoh: dua baris sederhana,
   melayang tepat di dekat kartu/foto user.
   ========================================================= */

.fns290-user-menu.fns292-compact-user-menu{
  position:fixed!important;
  left:var(--fns292-left,10px)!important;
  top:var(--fns292-top,70px)!important;
  right:auto!important;
  bottom:auto!important;

  width:var(--fns292-width,166px)!important;
  min-width:0!important;
  max-width:calc(100vw - 14px)!important;

  margin:0!important;
  padding:5px!important;

  border:1px solid rgba(116,151,190,.18)!important;
  border-radius:14px!important;

  color:var(--text)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:
    0 11px 30px rgba(21,40,67,.18),
    0 2px 7px rgba(21,40,67,.10)!important;

  z-index:2147483000!important;
  overflow:hidden!important;
  transform:none!important;
  translate:none!important;
  isolation:isolate!important;

  animation:fns292PopoverIn .14s ease-out!important;
}

.fns290-user-menu.fns292-compact-user-menu::before{
  display:none!important;
  content:none!important;
}

.fns290-user-menu.fns292-compact-user-menu nav{
  display:grid!important;
  gap:2px!important;
  padding:0!important;
}

.fns290-user-menu.fns292-compact-user-menu nav a{
  display:grid!important;
  grid-template-columns:25px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;

  min-height:36px!important;
  padding:5px 8px!important;

  border:0!important;
  border-radius:9px!important;

  color:#536273!important;
  background:transparent!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transform:none!important;
}

.fns290-user-menu.fns292-compact-user-menu nav a:hover,
.fns290-user-menu.fns292-compact-user-menu nav a:focus-visible{
  color:#1594d2!important;
  background:#f3f8fc!important;
  outline:none!important;
}

.fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link{
  color:#e43d6b!important;
}

.fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link:hover,
.fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link:focus-visible{
  color:#db2158!important;
  background:#fff3f7!important;
}

.fns290-user-menu.fns292-compact-user-menu .fns292-menu-icon{
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;

  padding:0!important;
  border:0!important;
  border-radius:0!important;

  color:currentColor!important;
  background:transparent!important;

  font-size:13px!important;
  line-height:1!important;
}

.fns290-user-menu.fns292-compact-user-menu nav a b{
  display:block!important;
  margin:0!important;
  color:inherit!important;
  font-size:10.5px!important;
  font-weight:700!important;
  line-height:1.2!important;
}

/* Header profil lama disembunyikan bila cache markup lama masih tersisa. */
.fns290-user-menu.fns292-compact-user-menu
.fns290-user-menu-head{
  display:none!important;
}

body.dark .fns290-user-menu.fns292-compact-user-menu,
body[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu,
html.dark .fns290-user-menu.fns292-compact-user-menu,
html[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu{
  color:#d9e6f5!important;
  border-color:rgba(107,175,244,.22)!important;
  background:rgba(14,28,49,.985)!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 2px 8px rgba(0,0,0,.28)!important;
}

body.dark .fns290-user-menu.fns292-compact-user-menu nav a,
body[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu nav a,
html.dark .fns290-user-menu.fns292-compact-user-menu nav a,
html[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu nav a{
  color:#cbd9e9!important;
}

body.dark .fns290-user-menu.fns292-compact-user-menu nav a:hover,
body[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu nav a:hover,
html.dark .fns290-user-menu.fns292-compact-user-menu nav a:hover,
html[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu nav a:hover{
  color:#5cc9ff!important;
  background:rgba(36,145,204,.13)!important;
}

body.dark .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link,
body[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link,
html.dark .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link,
html[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link{
  color:#ff6b91!important;
}

body.dark .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link:hover,
body[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link:hover,
html.dark .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link:hover,
html[data-theme="dark"] .fns290-user-menu.fns292-compact-user-menu
nav a.fns290-logout-link:hover{
  background:rgba(255,74,124,.12)!important;
}

/*
 * Kartu user tidak berubah ukuran ketika popup dibuka.
 * Hanya diberi highlight tipis seperti contoh video.
 */
body.app-shell .fns290-user-trigger.fns290-user-menu-active{
  transform:none!important;
  border-color:rgba(34,166,231,.38)!important;
  box-shadow:0 6px 18px rgba(30,113,181,.12)!important;
}

@keyframes fns292PopoverIn{
  from{
    opacity:0;
    transform:translateY(-4px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(max-width:760px){
  .fns290-user-menu.fns292-compact-user-menu,
  .fns290-user-menu.fns292-compact-user-menu.from-topbar,
  .fns290-user-menu.fns292-compact-user-menu.from-sidebar{
    left:var(--fns292-left,7px)!important;
    top:var(--fns292-top,68px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--fns292-width,154px)!important;
    max-width:calc(100vw - 14px)!important;
  }
}

/* === END FNS V292 === */


/* =========================================================
   FNS V293 SHORT USER POPOVER
   Popup Profil/Keluar mengikuti tinggi isi, bukan tinggi layar.
   ========================================================= */
body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu,
body.dark.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu,
body[data-theme="dark"].app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu,
html.dark body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu,
html[data-theme="dark"] body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu{
  position:fixed!important;
  display:block!important;
  width:var(--fns292-width,154px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:92px!important;
  inset:auto!important;
  left:var(--fns292-left,10px)!important;
  top:var(--fns292-top,70px)!important;
  right:auto!important;
  bottom:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:start!important;
  justify-self:start!important;
  overflow:hidden!important;
  z-index:2147483000!important;
}

body.app-shell > section#fns290UserMenu.fns292-compact-user-menu[hidden],
body.dark.app-shell > section#fns290UserMenu.fns292-compact-user-menu[hidden],
body[data-theme="dark"].app-shell > section#fns290UserMenu.fns292-compact-user-menu[hidden]{
  display:none!important;
}

body.app-shell > section#fns290UserMenu.fns292-compact-user-menu nav{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
}

body.app-shell > section#fns290UserMenu.fns292-compact-user-menu nav a{
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  margin:0!important;
}

body.app-shell > section#fns290UserMenu.fns292-compact-user-menu nav a + a{
  margin-top:2px!important;
}
/* === END FNS V293 === */


/* =========================================================
   FNS V294 MOBILE DUAL THEME PARITY
   Bentuk dan ukuran mode terang/gelap sama.
   Hanya warna yang berubah.
   ========================================================= */
@media (max-width:820px){

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell){
    --m294-bg:#edf6ff;
    --m294-bg2:#f7f4ff;
    --m294-surface:rgba(250,253,255,.96);
    --m294-surface2:rgba(244,249,255,.96);
    --m294-line:rgba(83,145,211,.24);
    --m294-text:#0b2038;
    --m294-muted:#63758c;
    --m294-shadow:0 13px 34px rgba(48,92,148,.12);
    --m294-topbar:linear-gradient(135deg,#f8fcff,#eaf5ff 58%,#f3efff);
    --m294-sidebar:linear-gradient(180deg,#f9fcff,#eef7ff 54%,#f6f2ff);
    --m294-bottom:rgba(250,253,255,.98);

    background:
      radial-gradient(circle at 4% 8%,rgba(42,183,255,.18),transparent 32%),
      radial-gradient(circle at 96% 6%,rgba(126,92,255,.16),transparent 34%),
      linear-gradient(180deg,var(--m294-bg),var(--m294-bg2))!important;
    color:var(--m294-text)!important;
  }

  body.dark.app-shell:not(.portal-customer-shell):not(.portal-staff-shell),
  body[data-theme="dark"].app-shell:not(.portal-customer-shell):not(.portal-staff-shell),
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell),
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell){
    --m294-bg:#061322;
    --m294-bg2:#0a1530;
    --m294-surface:rgba(10,29,52,.96);
    --m294-surface2:rgba(13,35,62,.96);
    --m294-line:rgba(96,166,239,.22);
    --m294-text:#f3f8ff;
    --m294-muted:#9fb0c7;
    --m294-shadow:0 16px 38px rgba(0,0,0,.36);
    --m294-topbar:linear-gradient(135deg,#071426,#0b213b 58%,#171a3d);
    --m294-sidebar:linear-gradient(180deg,#08182b,#071426 54%,#0a1830);
    --m294-bottom:rgba(7,23,43,.98);

    background:
      radial-gradient(circle at 5% 5%,rgba(0,185,255,.11),transparent 31%),
      radial-gradient(circle at 96% 4%,rgba(121,79,255,.13),transparent 34%),
      linear-gradient(180deg,var(--m294-bg),var(--m294-bg2))!important;
    color:var(--m294-text)!important;
  }

  /* Struktur identik pada kedua tema */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:84px 13px calc(101px + env(safe-area-inset-bottom,0px))!important;
    background:transparent!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    min-height:74px!important;
    height:74px!important;
    padding:9px 13px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:8px!important;
    border-radius:0 0 20px 20px!important;
    background:var(--m294-topbar)!important;
    border-bottom:1px solid var(--m294-line)!important;
    box-shadow:var(--m294-shadow)!important;
    color:var(--m294-text)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .title-block,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .live-clock,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-live-clock{
    color:var(--m294-text)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns116-auto-greeting,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar .fns149-smart-greeting,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar p,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar small{
    color:var(--m294-muted)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .mobile-menu,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .theme-toggle,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar-icon,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .fns281-notification-bell{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    border-radius:14px!important;
    background:var(--m294-surface)!important;
    border:1px solid var(--m294-line)!important;
    color:var(--m294-text)!important;
    box-shadow:none!important;
  }

  /* Dashboard: ukuran sama, warna mengikuti tema */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .fns280-registration-panel,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash48-notification-panel,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash30-finance-card,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash30-mini,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash30-panel,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .card,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .panel,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .box{
    background:var(--m294-surface)!important;
    border-color:var(--m294-line)!important;
    color:var(--m294-text)!important;
    box-shadow:var(--m294-shadow)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .fns280-registration-panel,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash48-notification-panel{
    border-radius:20px!important;
    padding:13px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .fns280-registration-list,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash48-notif-list,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .fns280-registration-empty,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash48-notif-empty{
    background:var(--m294-surface2)!important;
    border-color:var(--m294-line)!important;
    color:var(--m294-muted)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-realtime-row{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-live-badge,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .dash31-rt-card{
    min-height:92px!important;
    height:92px!important;
    padding:15px 18px!important;
    border-radius:20px!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) h1,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) h2,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) h3,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) h4,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) strong,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) b{
    color:var(--m294-text);
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) p,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) small,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .muted{
    color:var(--m294-muted);
  }

  /* Sidebar bentuk sama pada mode terang dan gelap */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar{
    top:80px!important;
    bottom:91px!important;
    width:min(92vw,380px)!important;
    max-width:calc(100vw - 14px)!important;
    padding:10px!important;
    border-radius:0 24px 24px 0!important;
    background:var(--m294-sidebar)!important;
    border:1px solid var(--m294-line)!important;
    border-left:0!important;
    box-shadow:var(--m294-shadow)!important;
    color:var(--m294-text)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar .brand,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-search input,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .sidebar-user-card{
    background:var(--m294-surface)!important;
    border-color:var(--m294-line)!important;
    color:var(--m294-text)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group a{
    color:var(--m294-text)!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group>button,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .nav-group-toggle,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .side-user-meta span,
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .brand span{
    color:var(--m294-muted)!important;
  }

  /* Menu bawah: sama ukuran, tidak berubah abu/oranye saat dark */
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .app-mobile-bottom-nav{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    height:76px!important;
    min-height:76px!important;
    padding:7px!important;
    border-radius:24px!important;
    background:var(--m294-bottom)!important;
    border:1px solid var(--m294-line)!important;
    box-shadow:0 14px 36px rgba(0,0,0,.18)!important;
    overflow:hidden!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .app-mobile-bottom-nav a{
    min-width:0!important;
    height:62px!important;
    border-radius:19px!important;
    color:var(--m294-muted)!important;
    background:transparent!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .app-mobile-bottom-nav a.active{
    color:#fff!important;
    background:linear-gradient(135deg,#168fff,#18c4ea 58%,#7458ff)!important;
    box-shadow:0 9px 22px rgba(22,143,255,.28)!important;
  }

  /* Popup user sama pada kedua tema */
  body.app-shell > section#fns290UserMenu.fns292-compact-user-menu{
    width:154px!important;
    height:auto!important;
    min-height:0!important;
    max-height:84px!important;
    padding:5px!important;
    border-radius:14px!important;
    background:var(--m294-surface)!important;
    border:1px solid var(--m294-line)!important;
    box-shadow:var(--m294-shadow)!important;
    color:var(--m294-text)!important;
  }

  body.app-shell > section#fns290UserMenu.fns292-compact-user-menu nav a{
    height:36px!important;
    min-height:36px!important;
    color:var(--m294-text)!important;
    background:transparent!important;
  }

  body.app-shell > section#fns290UserMenu.fns292-compact-user-menu nav a.fns290-logout-link{
    color:#ff527c!important;
  }

  /* Theme switch tidak mengubah ukuran/layout */
  body.app-shell,
  body.app-shell *,
  body.app-shell *::before,
  body.app-shell *::after{
    transition-property:background-color,border-color,color,box-shadow,opacity!important;
    transition-duration:.18s!important;
  }
}

/* === END FNS V294 === */


/* =========================================================
   FNS V295 FIX DARK MODE AUTO OPEN USER MENU
   Popup Profil/Keluar wajib tersembunyi sampai foto user diklik.
   ========================================================= */

/* Selector dibuat lebih kuat daripada aturan mode gelap sebelumnya. */
html body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu[hidden],
html.dark body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu[hidden],
html[data-theme="dark"] body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu[hidden],
html[data-theme="light"] body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu[hidden]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Popup hanya terlihat sesudah foto/kartu user benar-benar diklik. */
html body.app-shell > section#fns290UserMenu.fns290-user-menu.fns292-compact-user-menu:not([hidden]).is-open{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* === END FNS V295 === */


/* =========================================================
   FNS V296 MOBILE HEADER CONTENT PARITY
   Konten pertama tidak tertutup header pada mode gelap/terang.
   ========================================================= */
@media (max-width:820px){

  /* Header dibuat identik pada kedua tema. */
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="light"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    height:98px!important;
    min-height:98px!important;
    margin:0!important;
    padding:10px 14px!important;
    border-radius:0 0 20px 20px!important;
    transform:none!important;
    translate:none!important;
    z-index:99990!important;
    box-sizing:border-box!important;
  }

  /* Jarak konten wajib sama dan cukup di bawah header. */
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html[data-theme="light"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    margin:0!important;
    padding:
      calc(112px + env(safe-area-inset-top,0px))
      13px
      calc(101px + env(safe-area-inset-bottom,0px))!important;
    transform:none!important;
    translate:none!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  /* Panel pertama tidak boleh masuk ke belakang header. */
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .main > .fns280-registration-panel:first-of-type,
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell)
  .main > .dash48-notification-panel:first-of-type{
    margin-top:0!important;
    transform:none!important;
    translate:none!important;
  }

  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell){
    scroll-padding-top:112px!important;
  }
}

@media (max-width:430px){
  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar,
  html[data-theme="light"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .topbar{
    height:98px!important;
    min-height:98px!important;
  }

  html body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html.dark body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html[data-theme="dark"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main,
  html[data-theme="light"] body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-top:112px!important;
  }
}

/* === END FNS V296 === */


/* =========================================================
   FNS V297 REMOVE DASHBOARD REGISTRATION PANEL
   Panel "Pendaftaran Website Baru" dihapus dari dashboard.
   ========================================================= */

body.app-shell .fns280-registration-panel,
body.app-shell .dash48-notification-panel{
  display:none!important;
}

/* Hilangkan ruang kosong bekas panel pada desktop dan HP. */
body.app-shell .fns280-registration-panel + *,
body.app-shell .dash48-notification-panel + *{
  margin-top:0!important;
}

@media(max-width:820px){
  body.app-shell:not(.portal-customer-shell):not(.portal-staff-shell) .main{
    padding-top:112px!important;
  }
}

/* === END FNS V297 === */


/* =========================================================
   FNS V300 REFERRAL BONUS COMPLETE
   ========================================================= */
.ref300-hero{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:24px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 20%,rgba(25,190,255,.20),transparent 30%),
    radial-gradient(circle at 88% 15%,rgba(122,86,255,.20),transparent 30%),
    var(--card);
  box-shadow:var(--shadow);
}
.ref300-icon{
  width:68px;height:68px;display:grid;place-items:center;border-radius:22px;
  font-size:30px;color:#fff;
  background:linear-gradient(135deg,#168fff,#18c5ea 55%,#7658ff);
  box-shadow:0 16px 34px rgba(31,134,232,.25);
}
.ref300-hero span{font-size:11px;font-weight:900;letter-spacing:.12em;color:#20aeea}
.ref300-hero h2{margin:5px 0 4px;font-size:28px}
.ref300-hero p{margin:0;color:var(--muted)}
.ref300-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.ref300-kpi article{
  min-height:122px;padding:20px;border:1px solid var(--line);border-radius:22px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--card);box-shadow:var(--shadow)
}
.ref300-kpi small{font-weight:900;color:var(--muted);text-transform:uppercase}
.ref300-kpi b{font-size:22px;margin:8px 0 3px}
.ref300-kpi span{font-size:11px;color:var(--muted)}
.ref300-main{align-items:start}
.ref300-settings .form-grid{gap:13px}
.ref300-role-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--soft)
}
.ref300-summary{max-height:720px;overflow:auto}
.ref300-summary article{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:14px;margin-bottom:9px;border:1px solid var(--line);border-radius:16px;background:var(--soft)
}
.ref300-summary article div:first-child{min-width:0}
.ref300-summary article b,.ref300-summary article small{display:block}
.ref300-summary article small{margin-top:4px;color:var(--muted)}
.ref300-summary article div:last-child{text-align:right}
.ref300-summary article span,.ref300-summary article strong{display:block;font-size:11px}
.ref300-summary article strong{margin-top:4px;color:#18b66d}
.ref300-table-card{margin-top:18px}
.ref300-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ref300-filter input{min-width:260px}
#fns300ReferralTarget{font-weight:750}
#fns300ReferralTarget optgroup{font-weight:900}
body.dark .ref300-hero,
body.dark .ref300-kpi article,
body.dark .ref300-role-grid,
body.dark .ref300-summary article{
  background-color:rgba(8,27,50,.96)
}
@media(max-width:1050px){
  .ref300-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref300-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .ref300-hero{grid-template-columns:56px minmax(0,1fr);padding:17px;border-radius:22px}
  .ref300-icon{width:54px;height:54px;border-radius:17px;font-size:24px}
  .ref300-hero h2{font-size:20px}
  .ref300-hero>a{grid-column:1/-1;width:100%}
  .ref300-kpi{grid-template-columns:1fr;gap:10px}
  .ref300-kpi article{min-height:95px;padding:15px}
  .ref300-role-grid{grid-template-columns:1fr}
  .ref300-filter{width:100%}
  .ref300-filter input,.ref300-filter select,.ref300-filter .btn{width:100%;min-width:0}
}
/* === END FNS V300 === */

/* FNS V301 IDENTITAS WAJIB */
.fns272-details em,.reg271-details em{color:#ff426c!important;font-style:normal!important;font-weight:900!important}
input:required:invalid,select:required:invalid{border-color:rgba(255,66,108,.46)!important}
input:required:valid,select:required:valid{border-color:rgba(27,190,111,.42)!important}
/* END FNS V301 */


/* =========================================================
   FNS V302 EXPORT IMPORT PELANGGAN
   ========================================================= */
.fns302-import-panel{
  margin-bottom:18px!important;
  border-radius:24px!important;
  border:1px solid rgba(66,153,225,.24)!important;
  background:
    radial-gradient(circle at 4% 0%,rgba(28,184,255,.14),transparent 31%),
    radial-gradient(circle at 96% 0%,rgba(120,86,255,.13),transparent 34%),
    var(--card)!important;
}
.fns302-import-form{
  display:grid!important;
  grid-template-columns:minmax(0,1.4fr) minmax(240px,.7fr) auto!important;
  align-items:end!important;
  gap:14px!important;
}
.fns302-import-form label{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  font-weight:850!important;
}
.fns302-import-form input[type=file],
.fns302-import-form select{
  width:100%!important;
  min-height:50px!important;
  border-radius:15px!important;
}
.fns302-import-form small{color:var(--muted)!important;font-weight:650!important}
.fns302-import-actions{display:flex!important;gap:9px!important;align-items:center!important;flex-wrap:wrap!important}
.fns302-import-note{
  margin-top:15px!important;
  padding:13px 15px!important;
  border:1px dashed rgba(48,150,230,.28)!important;
  border-radius:15px!important;
  background:var(--soft)!important;
  color:var(--muted)!important;
}
.fns302-export-btn{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,#16a36a,#22c55e)!important;
}
.fns302-import-btn{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,#7557f5,#a855f7)!important;
}
body.dark .fns302-import-panel,
html[data-theme=dark] .fns302-import-panel{
  background:
    radial-gradient(circle at 4% 0%,rgba(28,184,255,.11),transparent 31%),
    radial-gradient(circle at 96% 0%,rgba(120,86,255,.13),transparent 34%),
    rgba(7,24,44,.97)!important;
}
@media(max-width:980px){
  .fns302-import-form{grid-template-columns:1fr 1fr!important}
  .fns302-import-actions{grid-column:1/-1!important}
}
@media(max-width:700px){
  .fns302-import-form{grid-template-columns:1fr!important}
  .fns302-import-actions{grid-column:auto!important}
  .fns302-import-actions .btn{width:100%!important}
  .customer-list-actions .fns302-export-btn,
  .customer-list-actions .fns302-import-btn{min-width:140px!important}
}
/* === END FNS V302 === */


/* =========================================================
   FNS V303 CETAK INVOICE PORTAL PELANGGAN
   ========================================================= */
body.portal-customer-shell[data-module="portal"] .invoice-a4-wrap{
  padding-bottom:120px;
}
body.portal-customer-shell[data-module="portal"] .invoice-toolbar{
  position:relative;
  z-index:3;
}
@media(max-width:900px){
  body.portal-customer-shell[data-module="portal"] .invoice-a4-wrap{
    padding:10px 8px 120px!important;
    overflow-x:auto!important;
  }
  body.portal-customer-shell[data-module="portal"] .invoice-toolbar{
    position:sticky;
    left:0;
    width:min(100%,210mm);
    justify-content:flex-start!important;
    padding:0 2px;
  }
}
@media print{
  .portal-mobile-bottom-nav,
  .portal-staff-bottom-nav,
  .app-mobile-bottom-nav,
  .mobile-nav-backdrop,
  .sidebar-account-popover,
  .fns290-account-menu{
    display:none!important;
  }
  body.portal-customer-shell,
  body.portal-staff-shell{
    padding:0!important;
    margin:0!important;
    background:#fff!important;
  }
  body.portal-customer-shell .main,
  body.portal-staff-shell .main{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
}
/* === END FNS V303 === */

/* === FNS V311 VLAN MIKROTIK SYNC === */
.vlan311-head{display:flex;align-items:center;gap:15px;margin:0 0 18px;padding:8px 2px}
.vlan311-head-icon{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(145deg,#2276ff,#00b7ee);box-shadow:0 12px 28px rgba(35,109,255,.22)}
.vlan311-head h2{margin:0;font-size:29px;letter-spacing:-.04em;color:var(--text)}
.vlan311-head p{margin:5px 0 0;color:var(--muted);font-weight:700}
.vlan311-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.vlan311-kpi{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;min-height:92px;padding:17px 18px;border:1px solid var(--line);border-radius:21px;background:var(--panel);box-shadow:var(--shadow)}
.vlan311-kpi:after{content:"";position:absolute;width:90px;height:90px;border-radius:999px;right:-25px;bottom:-30px;background:rgba(35,109,255,.07)}
.vlan311-kpi i{width:43px;height:43px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-style:normal;background:rgba(35,109,255,.09);font-size:19px}
.vlan311-kpi span{display:block;color:var(--muted);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}
.vlan311-kpi b{font-size:25px;line-height:1.15;color:var(--text);margin-right:7px}.vlan311-kpi small{color:var(--muted)}
.vlan311-alert{display:flex;align-items:center;gap:12px;margin-bottom:16px;border-color:rgba(220,38,38,.25)!important}.vlan311-alert span{flex:1;color:var(--muted)}
.vlan311-main{grid-template-columns:1.2fr .8fr!important;align-items:start!important}.vlan311-form-card{overflow:visible!important}
.vlan311-card-head{display:flex;gap:13px;align-items:flex-start;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.vlan311-card-head>div:nth-child(2){flex:1}.vlan311-card-head h3{margin:0;color:var(--text);font-size:21px}.vlan311-card-head p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.vlan311-card-icon{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(35,109,255,.1);font-size:22px}
.vlan311-form input,.vlan311-form select,.vlan311-form textarea,.vlan311-import select{border:1px solid var(--line)!important;border-radius:14px!important;background:var(--panel)!important;color:var(--text)!important}
.vlan311-form label small{display:block;margin-top:6px;color:var(--muted);font-weight:650;line-height:1.35}
#vlan311ApiState.ok{color:#16803b}.dark #vlan311ApiState.ok{color:#61d98b}#vlan311ApiState.error{color:#c62828}.dark #vlan311ApiState.error{color:#ff8a8a}#vlan311ApiState.loading{color:#b76b00}
.vlan311-check{display:flex!important;align-items:center;gap:9px;min-height:49px;padding:0 13px;border:1px dashed var(--line);border-radius:14px;color:var(--text)!important;font-weight:800}.vlan311-check input{width:18px!important;height:18px!important;margin:0!important}
.vlan311-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.vlan311-primary,.vlan311-soft{min-height:43px;border:0;border-radius:13px;padding:0 17px;font-weight:900;cursor:pointer}.vlan311-primary{background:linear-gradient(135deg,#246eff,#00aee9);color:#fff;box-shadow:0 10px 22px rgba(35,109,255,.23)}.vlan311-soft{background:rgba(35,109,255,.09);color:var(--text);border:1px solid rgba(35,109,255,.18)}.vlan311-soft:disabled{opacity:.55;cursor:wait}
.vlan311-side{display:flex;flex-direction:column;gap:13px}.vlan311-guide h3,.vlan311-import h3{margin:0 0 13px;color:var(--text)}
.vlan311-guide>div{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:11px 0;border-bottom:1px solid var(--line)}.vlan311-guide>div:last-child{border-bottom:0}.vlan311-guide b{grid-row:1/3;width:31px;height:31px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(35,109,255,.1);color:#236dff}.vlan311-guide span{font-weight:900;color:var(--text)}.vlan311-guide small{color:var(--muted);line-height:1.4}
.vlan311-import p{margin:0 0 12px;color:var(--muted);line-height:1.5}.vlan311-import form{display:grid;gap:10px}
.vlan311-safe{display:flex;gap:13px;align-items:flex-start}.vlan311-safe i{width:43px;height:43px;flex:0 0 43px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-style:normal;background:rgba(22,163,74,.1)}.vlan311-safe h3{margin:0;color:var(--text)}.vlan311-safe p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.vlan311-table-card{margin-top:16px}.vlan311-table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.vlan311-table-head h3{margin:0;color:var(--text);font-size:20px}.vlan311-table-head p{margin:5px 0 0}.vlan311-table-tools{display:flex;align-items:center;gap:9px}.vlan311-table-tools input{width:300px;height:40px;border:1px solid var(--line);border-radius:13px;padding:0 13px;background:var(--panel);color:var(--text)}
.vlan311-id{display:inline-flex;min-width:48px;height:33px;align-items:center;justify-content:center;border-radius:10px;background:rgba(35,109,255,.1);font-weight:950;color:#236dff}.vlan311-table-card code{padding:5px 8px;border-radius:8px;background:rgba(100,116,139,.1);color:var(--text)}
.vlan311-row-actions{display:flex;align-items:center;gap:6px}.vlan311-icon{width:31px;height:31px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:950;border:1px solid var(--line);background:var(--panel)}.vlan311-icon.sync{color:#087bda}.vlan311-icon.edit{color:#a16207}.vlan311-icon.delete{color:#dc2626}.vlan311-icon:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(15,23,42,.12)}
.vlan311-empty{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.vlan311-empty span{font-size:34px}.vlan311-empty b{margin-top:7px;color:var(--text)}.vlan311-empty small{margin-top:4px}
body.dark .vlan311-kpi,body.dark .vlan311-form input,body.dark .vlan311-form select,body.dark .vlan311-form textarea,body.dark .vlan311-import select,body.dark .vlan311-table-tools input{background:rgba(13,27,46,.82)!important}
@media(max-width:1180px){.vlan311-main{grid-template-columns:1fr!important}.vlan311-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.vlan311-head h2{font-size:23px}.vlan311-kpis{grid-template-columns:1fr}.vlan311-table-head{align-items:stretch;flex-direction:column}.vlan311-table-tools,.vlan311-table-tools input{width:100%}.vlan311-actions{flex-direction:column}.vlan311-primary,.vlan311-soft{width:100%}.vlan311-alert{align-items:flex-start;flex-direction:column}}
/* === END FNS V311 === */

/* =========================================================
   FNS V320 LANDING TOP BAR ROUNDED CORNERS
   Memastikan bar informasi paling atas mengikuti radius header.
   Tidak mengubah ukuran, posisi, atau animasi komponen lain.
   ========================================================= */
body.landing-page.lp255-sales-page
.lp255-header-shell.lp256-header-shell
> .lp255-promo-bar.lp256-promo-bar{
  border-top-left-radius:inherit!important;
  border-top-right-radius:inherit!important;
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
  background-clip:padding-box!important;
  overflow:hidden!important;
}

body.landing-page.lp255-sales-page
.lp255-header-shell.lp256-header-shell
> .lp255-promo-bar.lp256-promo-bar
.lp256-ticker-mask{
  border-top-left-radius:inherit;
}

body.landing-page.lp255-sales-page
.lp255-header-shell.lp256-header-shell
> .lp255-promo-bar.lp256-promo-bar
.lp256-top-status{
  border-top-right-radius:inherit;
}

/* =========================================================
   FNS V321 REMOVE SQUARE TICKER COMPOSITING LAYER
   Menghilangkan bidang persegi transparan dari CSS mask pada
   ticker atas. Radius header, ukuran, dan animasi tetap sama.
   ========================================================= */
body.landing-page.lp255-sales-page
.lp255-header-shell.lp256-header-shell
> .lp255-promo-bar.lp256-promo-bar
> .lp256-ticker-mask{
  background:transparent!important;
  background-image:none!important;
  -webkit-mask:none!important;
  -webkit-mask-image:none!important;
  mask:none!important;
  mask-image:none!important;
  border-radius:0!important;
  clip-path:none!important;
  isolation:auto!important;
  contain:layout paint!important;
}

/* Seluruh isi ticker tetap dipotong aman di dalam radius bar utama. */
body.landing-page.lp255-sales-page
.lp255-header-shell.lp256-header-shell
> .lp255-promo-bar.lp256-promo-bar{
  clip-path:inset(0 round 25px 25px 0 0)!important;
}

@media(max-width:680px){
  body.landing-page.lp255-sales-page
  .lp255-header-shell.lp256-header-shell
  > .lp255-promo-bar.lp256-promo-bar{
    clip-path:inset(0 round 19px 19px 0 0)!important;
  }
}
/* === END FNS V321 === */

/* =========================================================
   V325 - Router/NAS premium light + dark theme (scoped)
   ========================================================= */
.router-page-v325{
  --rv-bg:#f7faff;
  --rv-surface:rgba(255,255,255,.94);
  --rv-surface-2:#f2f7ff;
  --rv-surface-3:#eaf2ff;
  --rv-text:#10233c;
  --rv-muted:#63758f;
  --rv-line:rgba(104,137,184,.24);
  --rv-line-strong:rgba(35,109,255,.28);
  --rv-shadow:0 16px 42px rgba(39,83,145,.11);
  --rv-shadow-soft:0 10px 28px rgba(39,83,145,.08);
  --rv-blue:#2478ff;
  --rv-cyan:#09bff7;
  --rv-green:#21c779;
  --rv-purple:#7c4dff;
  color:var(--rv-text);
}
body.dark .router-page-v325{
  --rv-bg:#071321;
  --rv-surface:rgba(12,27,47,.94);
  --rv-surface-2:#10243d;
  --rv-surface-3:#142b48;
  --rv-text:#edf6ff;
  --rv-muted:#9aacc4;
  --rv-line:rgba(115,151,201,.20);
  --rv-line-strong:rgba(71,133,255,.38);
  --rv-shadow:0 22px 54px rgba(0,0,0,.28);
  --rv-shadow-soft:0 12px 34px rgba(0,0,0,.22);
}
.router-page-v325 .router-v325-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  padding:20px 22px;
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--rv-line-strong);
  border-radius:22px;
  background:
    radial-gradient(circle at 86% 15%,rgba(124,77,255,.18),transparent 28%),
    radial-gradient(circle at 70% 100%,rgba(9,191,247,.14),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(238,246,255,.92));
  box-shadow:var(--rv-shadow);
}
body.dark .router-page-v325 .router-v325-hero{
  background:
    radial-gradient(circle at 86% 15%,rgba(124,77,255,.24),transparent 30%),
    radial-gradient(circle at 70% 100%,rgba(9,191,247,.16),transparent 36%),
    linear-gradient(135deg,rgba(12,29,51,.98),rgba(9,22,39,.96));
}
.router-page-v325 .router-v325-hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-55px;
  top:-85px;
  width:240px;
  height:240px;
  border:1px solid rgba(90,137,215,.16);
  border-radius:50%;
  box-shadow:0 0 0 32px rgba(90,137,215,.06),0 0 0 66px rgba(90,137,215,.035);
}
.router-page-v325 .router-v325-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  margin-bottom:9px;
  border:1px solid rgba(35,109,255,.20);
  border-radius:999px;
  background:rgba(35,109,255,.08);
  color:var(--rv-blue);
  font-size:10px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.dark .router-page-v325 .router-v325-eyebrow{background:rgba(71,133,255,.13);color:#7eb6ff}
.router-page-v325 .router-v325-eyebrow i{
  width:7px;height:7px;border-radius:50%;background:var(--rv-green);
  box-shadow:0 0 0 5px rgba(33,199,121,.13),0 0 14px rgba(33,199,121,.55)
}
.router-page-v325 .router-v325-hero h2{
  margin:0;
  color:var(--rv-text);
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.035em;
}
.router-page-v325 .router-v325-hero p{
  max-width:720px;
  margin:7px 0 0;
  color:var(--rv-muted);
  font-size:12px;
  line-height:1.55;
}
.router-page-v325 .router-v325-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(110px,1fr));
  gap:9px;
}
.router-page-v325 .router-v325-summary>div{
  min-width:112px;
  padding:11px 12px;
  border:1px solid var(--rv-line);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  box-shadow:var(--rv-shadow-soft);
}
body.dark .router-page-v325 .router-v325-summary>div{background:rgba(255,255,255,.045)}
.router-page-v325 .router-v325-summary span{
  display:block;
  color:var(--rv-muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.router-page-v325 .router-v325-summary strong{
  display:block;
  margin-top:4px;
  color:var(--rv-text);
  font-size:17px;
  letter-spacing:-.025em;
}
.router-page-v325 .router-editor-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:stretch}
.router-page-v325>.card,
.router-page-v325 .router-editor-grid>.card{
  border-color:var(--rv-line);
  background:linear-gradient(160deg,var(--rv-surface),rgba(246,250,255,.88));
  box-shadow:var(--rv-shadow);
}
body.dark .router-page-v325>.card,
body.dark .router-page-v325 .router-editor-grid>.card{
  background:linear-gradient(160deg,var(--rv-surface),rgba(10,24,42,.92));
}
.router-page-v325 .router-editor-grid>.card{min-height:100%;padding:17px}
.router-page-v325 .router-editor-grid>.card h3,
.router-page-v325>.card h3{color:var(--rv-text);letter-spacing:-.015em}
.router-page-v325 .router-editor-grid>.card:first-child .card-head:before{
  content:"⚙";
  width:35px;height:35px;display:grid;place-items:center;flex:none;
  margin-right:8px;border-radius:12px;color:#fff;font-size:16px;
  background:linear-gradient(135deg,var(--rv-blue),var(--rv-cyan));
  box-shadow:0 10px 22px rgba(35,109,255,.24)
}
.router-page-v325 .router-editor-grid>.card:first-child .card-head{justify-content:flex-start}
.router-page-v325 .router-editor-grid>.card:first-child .card-head .btn{margin-left:auto}
.router-page-v325 .form-grid{gap:11px 10px}
.router-page-v325 .form-grid label{color:var(--rv-muted);font-size:10px;letter-spacing:.01em}
.router-page-v325 .form-grid input,
.router-page-v325 .form-grid select,
.router-page-v325 .form-grid textarea{
  height:40px;
  border:1px solid var(--rv-line);
  border-radius:12px;
  background:var(--rv-surface-2);
  color:var(--rv-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}
body.dark .router-page-v325 .form-grid input,
body.dark .router-page-v325 .form-grid select,
body.dark .router-page-v325 .form-grid textarea{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.router-page-v325 .form-grid input:focus,
.router-page-v325 .form-grid select:focus,
.router-page-v325 .form-grid textarea:focus{
  border-color:rgba(35,109,255,.58);
  background:var(--rv-surface);
  box-shadow:0 0 0 4px rgba(35,109,255,.10);
}
.router-page-v325 .form-grid label small{color:var(--rv-muted);font-size:9px;font-weight:700;line-height:1.35}
.router-page-v325 .form-grid .check{
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--rv-line);
  border-radius:12px;
  background:var(--rv-surface-2);
  color:var(--rv-text)!important;
}
.router-page-v325 .form-grid .check input{width:17px;height:17px;flex:none;accent-color:var(--rv-blue);box-shadow:none}
.router-page-v325 .form-grid>.btn.primary.wide{min-height:40px;border-radius:12px;letter-spacing:.01em}
.router-page-v325 .router-editor-grid pre{
  min-height:232px;
  margin:0 0 11px;
  padding:16px;
  overflow:auto;
  border:1px solid var(--rv-line);
  border-radius:15px;
  background:linear-gradient(145deg,#eff5ff,#e7f0ff);
  color:#23405f;
  font:700 11px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68);
}
body.dark .router-page-v325 .router-editor-grid pre{
  background:linear-gradient(145deg,#091729,#10243d);
  color:#c9dcf4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
.router-page-v325 .router-live-card{padding:16px}
.router-page-v325 .router-live-card>.card-head{padding-bottom:10px;border-bottom:1px solid var(--rv-line)}
.router-page-v325 .router-live-card>.card-head p{margin:4px 0 0}
.router-page-v325 .router-status-list{gap:10px}
.router-page-v325 .mikrotik-status{
  position:relative;
  overflow:hidden;
  min-height:96px;
  grid-template-columns:140px minmax(240px,.85fr) minmax(260px,1fr) 44px;
  gap:15px;
  padding:14px 16px;
  border:1px solid var(--rv-line);
  border-radius:17px;
  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 58%,#edf5ff 100%);
  color:var(--rv-text);
  box-shadow:var(--rv-shadow-soft);
}
.router-page-v325 .mikrotik-status:before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--rv-blue),var(--rv-cyan));
}
.router-page-v325 .mikrotik-status.connected:before{background:linear-gradient(180deg,#19c878,#62df96)}
.router-page-v325 .mikrotik-status.disconnected:before{background:linear-gradient(180deg,#ef4444,#fb7185)}
body.dark .router-page-v325 .mikrotik-status{
  background:linear-gradient(135deg,#101f36 0%,#111d34 55%,#1d1940 100%);
  border-color:rgba(122,157,207,.20);
  color:#edf6ff;
  box-shadow:0 15px 38px rgba(0,0,0,.22)
}
.router-page-v325 .mikrotik-status.compact{min-height:90px}
.router-page-v325 .mk-left{gap:7px}
.router-page-v325 .mk-pill{min-width:102px;padding:7px 13px;font-size:10px;box-shadow:0 7px 18px rgba(27,78,130,.12)}
.router-page-v325 .mk-pill.ok{background:linear-gradient(135deg,#19bd6e,#54dc8c)}
.router-page-v325 .mk-pill.bad{background:linear-gradient(135deg,#e94a5c,#fb7185)}
.router-page-v325 .mk-left small,
.router-page-v325 .mk-center small{color:var(--rv-muted)}
body.dark .router-page-v325 .mk-left small,
body.dark .router-page-v325 .mk-center small{color:#9eb0c8}
.router-page-v325 .mk-center b{color:#0879ca;font-size:12px;letter-spacing:.015em}
body.dark .router-page-v325 .mk-center b{color:#36d8f7}
.router-page-v325 .mk-center span{color:var(--rv-text);font-size:11px}
body.dark .router-page-v325 .mk-center span{color:#f1f7ff}
.router-page-v325 .mk-center small{font-size:10px}
.router-page-v325 .mk-resource{align-content:center;gap:5px}
.router-page-v325 .mk-resource>.btn{
  width:100%;
  min-height:36px;
  border-radius:11px;
  box-shadow:0 10px 22px rgba(35,109,255,.20)
}
.router-page-v325 .mk-resource label{color:var(--rv-muted);font-size:9px}
.router-page-v325 .mk-resource label em{color:var(--rv-text)}
body.dark .router-page-v325 .mk-resource label{color:#aebed2}
body.dark .router-page-v325 .mk-resource label em{color:#f4f8ff}
.router-page-v325 .mk-bar{height:6px;background:#dce7f5;border:1px solid rgba(98,130,176,.16)}
body.dark .router-page-v325 .mk-bar{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.10)}
.router-page-v325 .mk-score{width:38px;height:38px;font-size:11px;box-shadow:0 8px 20px rgba(35,109,255,.22)}
.router-page-v325 .text-danger{color:#d6384e!important}
body.dark .router-page-v325 .text-danger{color:#ffb6c1!important}
.router-page-v325>.card:last-child .card-head{padding-bottom:9px;border-bottom:1px solid var(--rv-line)}
.router-page-v325 .table-wrap{border-radius:14px}
.router-page-v325 table{border-spacing:0 6px}
.router-page-v325 th{color:var(--rv-muted);font-size:9px;padding:0 9px}
.router-page-v325 td{
  color:var(--rv-text);
  background:var(--rv-surface-2);
  border-color:var(--rv-line);
  padding:9px;
  font-size:11px;
}
body.dark .router-page-v325 td{background:rgba(255,255,255,.035)}
.router-page-v325 tr:hover td{background:var(--rv-surface-3)}
body.dark .router-page-v325 tr:hover td{background:rgba(77,130,210,.10)}
.router-page-v325 .badge.active{background:#dff9e9;color:#14733e;border-color:#afe9c8}
body.dark .router-page-v325 .badge.active{background:rgba(34,197,94,.15);color:#71e7a2;border-color:rgba(34,197,94,.28)}
.router-page-v325 .danger-link{background:#fff0f1;color:#b92c3f;box-shadow:inset 0 0 0 1px #ffd1d7}
body.dark .router-page-v325 .danger-link{background:rgba(239,68,68,.12);color:#ff9aaa;box-shadow:inset 0 0 0 1px rgba(239,68,68,.25)}
.router-page-v325 .row-actions{align-items:center}
@media (max-width:1200px){
  .router-page-v325 .router-v325-hero{grid-template-columns:1fr}
  .router-page-v325 .router-v325-summary{max-width:560px}
  .router-page-v325 .router-editor-grid{grid-template-columns:1fr}
  .router-page-v325 .mikrotik-status{grid-template-columns:130px minmax(0,1fr) 44px}
  .router-page-v325 .mk-resource{grid-column:1/-1}
}
@media (max-width:760px){
  .router-page-v325 .router-v325-hero{padding:16px;border-radius:18px}
  .router-page-v325 .router-v325-hero h2{font-size:20px}
  .router-page-v325 .router-v325-summary{grid-template-columns:1fr 1fr}
  .router-page-v325 .router-v325-summary>div:last-child{grid-column:1/-1}
  .router-page-v325 .form-grid{grid-template-columns:1fr}
  .router-page-v325 .form-grid .wide{grid-column:auto}
  .router-page-v325 .mikrotik-status{grid-template-columns:1fr;padding:14px}
  .router-page-v325 .mk-left{align-items:flex-start}
  .router-page-v325 .mk-resource{grid-column:auto}
  .router-page-v325 .mk-score{position:absolute;right:13px;top:13px}
  .router-page-v325 .mk-center{padding-right:46px}
  .router-page-v325 .mk-center small{white-space:normal}
  .router-page-v325 .card-head{align-items:flex-start;flex-wrap:wrap}
  .router-page-v325 .row-actions{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .router-page-v325 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* V326 fix: paksa kartu Router/NAS terang saat mode terang */
body:not(.dark) .router-page-v325 .router-live-card,
body:not(.dark) .router-page-v325 .card{
  border-color: rgba(153,183,223,.55);
}
body:not(.dark) .router-page-v325 .mikrotik-status{
  background: linear-gradient(135deg,#ffffff 0%,#f7fbff 52%,#eef6ff 100%) !important;
  color:#17324f !important;
  border:1px solid rgba(145,175,218,.55) !important;
  box-shadow:0 10px 28px rgba(78,126,188,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
body:not(.dark) .router-page-v325 .mikrotik-status .mk-center b{color:#0a7bca !important;}
body:not(.dark) .router-page-v325 .mikrotik-status .mk-center span,
body:not(.dark) .router-page-v325 .mikrotik-status .mk-resource label em{color:#17324f !important;}
body:not(.dark) .router-page-v325 .mikrotik-status .mk-left small,
body:not(.dark) .router-page-v325 .mikrotik-status .mk-center small,
body:not(.dark) .router-page-v325 .mikrotik-status .mk-resource label{color:#5c7696 !important;}
body:not(.dark) .router-page-v325 .mikrotik-status .mk-bar{background:#deebf8 !important;border-color:rgba(123,157,205,.30) !important;}
body:not(.dark) .router-page-v325 .mikrotik-status .mk-bar span{background:linear-gradient(90deg,#22c55e,#84cc16) !important;}
body:not(.dark) .router-page-v325 .mikrotik-status .mk-score{box-shadow:0 8px 20px rgba(35,109,255,.18) !important;}
body:not(.dark) .router-page-v325 .mikrotik-status.connected:before{background:linear-gradient(180deg,#18bb6c,#67dc9b) !important;}
body:not(.dark) .router-page-v325 .mikrotik-status.disconnected:before{background:linear-gradient(180deg,#ef4444,#fb7185) !important;}

/* V327 fix: Router/NAS wajib ikut tema aktif sebenarnya */
html[data-theme="light"] body .router-page-v325 .mikrotik-status,
body[data-theme="light"] .router-page-v325 .mikrotik-status,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status,
.theme-light .router-page-v325 .mikrotik-status{
  background: linear-gradient(135deg,#ffffff 0%,#f8fbff 48%,#eef6ff 100%) !important;
  color:#16324f !important;
  border:1px solid rgba(150,181,222,.62) !important;
  box-shadow:0 12px 30px rgba(74,123,190,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-center b,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-center b,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-center b,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-center b,
.theme-light .router-page-v325 .mikrotik-status .mk-center b{color:#0a7ccf !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-center span,
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-resource label em,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-center span,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-resource label em,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-center span,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-resource label em,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-center span,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-resource label em,
.theme-light .router-page-v325 .mikrotik-status .mk-center span,
.theme-light .router-page-v325 .mikrotik-status .mk-resource label em{color:#16324f !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-left small,
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-center small,
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-resource label,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-left small,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-center small,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-resource label,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-left small,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-center small,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-resource label,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-left small,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-center small,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-resource label,
.theme-light .router-page-v325 .mikrotik-status .mk-left small,
.theme-light .router-page-v325 .mikrotik-status .mk-center small,
.theme-light .router-page-v325 .mikrotik-status .mk-resource label{color:#617d9c !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-bar,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-bar,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-bar,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-bar,
.theme-light .router-page-v325 .mikrotik-status .mk-bar{background:#dde9f7 !important;border-color:rgba(123,157,205,.28) !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-bar span,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-bar span,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-bar span,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-bar span,
.theme-light .router-page-v325 .mikrotik-status .mk-bar span{background:linear-gradient(90deg,#22c55e,#84cc16) !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status .mk-score,
body[data-theme="light"] .router-page-v325 .mikrotik-status .mk-score,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status .mk-score,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status .mk-score,
.theme-light .router-page-v325 .mikrotik-status .mk-score{box-shadow:0 8px 20px rgba(35,109,255,.18) !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status.connected:before,
body[data-theme="light"] .router-page-v325 .mikrotik-status.connected:before,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status.connected:before,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status.connected:before,
.theme-light .router-page-v325 .mikrotik-status.connected:before{background:linear-gradient(180deg,#18bb6c,#67dc9b) !important;}
html[data-theme="light"] body .router-page-v325 .mikrotik-status.disconnected:before,
body[data-theme="light"] .router-page-v325 .mikrotik-status.disconnected:before,
html:not(.dark):not([data-theme="dark"]) body .router-page-v325 .mikrotik-status.disconnected:before,
body:not(.dark):not([data-theme="dark"]) .router-page-v325 .mikrotik-status.disconnected:before,
.theme-light .router-page-v325 .mikrotik-status.disconnected:before{background:linear-gradient(180deg,#ef4444,#fb7185) !important;}
/* dark tetap dipertahankan */
html[data-theme="dark"] body .router-page-v325 .mikrotik-status,
body[data-theme="dark"] .router-page-v325 .mikrotik-status,
html.dark body .router-page-v325 .mikrotik-status,
body.dark .router-page-v325 .mikrotik-status,
.theme-dark .router-page-v325 .mikrotik-status{
  background:linear-gradient(135deg,#101f36 0%,#111d34 55%,#1d1940 100%) !important;
  border-color:rgba(122,157,207,.20) !important;
  color:#edf6ff !important;
  box-shadow:0 15px 38px rgba(0,0,0,.22) !important;
}
html[data-theme="dark"] body .router-page-v325 .mikrotik-status .mk-center b,
body[data-theme="dark"] .router-page-v325 .mikrotik-status .mk-center b,
html.dark body .router-page-v325 .mikrotik-status .mk-center b,
body.dark .router-page-v325 .mikrotik-status .mk-center b,
.theme-dark .router-page-v325 .mikrotik-status .mk-center b{color:#36d8f7 !important;}
html[data-theme="dark"] body .router-page-v325 .mikrotik-status .mk-center span,
body[data-theme="dark"] .router-page-v325 .mikrotik-status .mk-center span,
html.dark body .router-page-v325 .mikrotik-status .mk-center span,
body.dark .router-page-v325 .mikrotik-status .mk-center span,
.theme-dark .router-page-v325 .mikrotik-status .mk-center span{color:#f1f7ff !important;}
html[data-theme="dark"] body .router-page-v325 .mikrotik-status .mk-left small,
html[data-theme="dark"] body .router-page-v325 .mikrotik-status .mk-center small,
html[data-theme="dark"] body .router-page-v325 .mikrotik-status .mk-resource label,
body[data-theme="dark"] .router-page-v325 .mikrotik-status .mk-left small,
body[data-theme="dark"] .router-page-v325 .mikrotik-status .mk-center small,
body[data-theme="dark"] .router-page-v325 .mikrotik-status .mk-resource label,
html.dark body .router-page-v325 .mikrotik-status .mk-left small,
html.dark body .router-page-v325 .mikrotik-status .mk-center small,
html.dark body .router-page-v325 .mikrotik-status .mk-resource label,
body.dark .router-page-v325 .mikrotik-status .mk-left small,
body.dark .router-page-v325 .mikrotik-status .mk-center small,
body.dark .router-page-v325 .mikrotik-status .mk-resource label,
.theme-dark .router-page-v325 .mikrotik-status .mk-left small,
.theme-dark .router-page-v325 .mikrotik-status .mk-center small,
.theme-dark .router-page-v325 .mikrotik-status .mk-resource label{color:#9eb0c8 !important;}
html[data-theme="dark"] body .router-page-v325 .mikrotik-status .mk-resource label em,
body[data-theme="dark"] .router-page-v325 .mikrotik-status .mk-resource label em,
html.dark body .router-page-v325 .mikrotik-status .mk-resource label em,
body.dark .router-page-v325 .mikrotik-status .mk-resource label em,
.theme-dark .router-page-v325 .mikrotik-status .mk-resource label em{color:#f4f8ff !important;}

/* V331 - halaman pelanggan 500+ data tetap ringan dan responsif */
.v331-customer-pagination{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0 2px;padding-top:14px;border-top:1px solid rgba(120,155,205,.22)}
.v331-customer-pagination span{font-size:12px;color:var(--muted);text-align:center}
.v331-customer-pagination .disabled{pointer-events:none;opacity:.42}
body.dark .v331-customer-pagination,body[data-theme="dark"] .v331-customer-pagination,html[data-theme="dark"] .v331-customer-pagination{border-top-color:rgba(125,164,218,.18)}
.customer-list-card .table-wrap{max-height:calc(100vh - 290px);overflow:auto;border-radius:15px}
.customer-list-card table{min-width:1050px}
@media(max-width:760px){.v331-customer-pagination{gap:8px}.v331-customer-pagination span{order:-1;width:100%}.customer-list-card .table-wrap{max-height:none}}

/* V333: tombol tambah paket dan form selalu dapat diklik/dibuka */
.pkg150-toolbar-card,.pkg150-table-card{position:relative;isolation:isolate}
.pkg150-toolbar-actions,.pkg148-table-tools{position:relative;z-index:8}
.pkg150-add-btn{position:relative!important;z-index:9!important;pointer-events:auto!important;cursor:pointer!important;user-select:none}
#formPaketInternet[hidden]{display:none!important}
#formPaketInternet.pkg150-form-open{display:grid!important;animation:pkg150FormOpen .24s ease-out!important}
@keyframes pkg150FormOpen{from{opacity:0;transform:translateY(-10px) scale(.995)}to{opacity:1;transform:none}}

/* V337: tombol Tampilkan Semua / Per Halaman */
.v337-show-all{white-space:nowrap;border:1px solid rgba(76,139,230,.30)!important;background:linear-gradient(135deg,rgba(59,130,246,.13),rgba(34,211,238,.10))!important;color:var(--text)!important}
.v337-show-all:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,111,235,.16)}
.v337-view-summary{margin:0 0 10px;padding:8px 12px;border:1px solid rgba(105,150,210,.20);border-radius:12px;background:rgba(59,130,246,.07);color:var(--muted);font-size:11px}
body.dark .v337-show-all,html[data-theme="dark"] .v337-show-all{background:linear-gradient(135deg,rgba(59,130,246,.20),rgba(34,211,238,.12))!important;color:#eaf5ff!important;border-color:rgba(96,165,250,.28)!important}
body.dark .v337-view-summary,html[data-theme="dark"] .v337-view-summary{background:rgba(59,130,246,.08);border-color:rgba(96,165,250,.18);color:#9fb5cf}

/* ================================================================
   V338 - pilihan jumlah data + pagination angka di bawah tabel
   ================================================================ */
.v338-table-footer{
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) auto;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding:13px 14px;
  border:1px solid rgba(116,153,205,.22);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(239,247,255,.72));
  box-shadow:0 10px 24px rgba(55,103,170,.08);
}
.v338-length-form{margin:0}
.v338-length-form label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.v338-length-form select{
  width:auto;
  min-width:82px;
  height:36px;
  padding:5px 30px 5px 11px;
  border-radius:10px;
  border:1px solid rgba(93,139,203,.30);
  background:var(--surface,#fff);
  color:var(--text);
  font-weight:850;
  cursor:pointer;
}
.v338-page-info{
  justify-self:center;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}
.v338-page-info b{color:var(--text)}
.v338-number-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}
.v338-page-link{
  min-width:34px;
  height:34px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(77,135,215,.25);
  background:rgba(255,255,255,.72);
  color:#1476c7;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.v338-page-link:hover{
  transform:translateY(-1px);
  background:#e9f5ff;
  box-shadow:0 7px 16px rgba(40,112,194,.13);
}
.v338-page-link.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#2b83e6,#39aee5);
  box-shadow:0 8px 20px rgba(43,131,230,.25);
}
.v338-page-link.disabled{
  opacity:.35;
  pointer-events:none;
}
.v338-page-dots{
  min-width:24px;
  text-align:center;
  color:var(--muted);
  font-weight:900;
}
body.dark .v338-table-footer,
body[data-theme="dark"] .v338-table-footer,
html[data-theme="dark"] .v338-table-footer{
  border-color:rgba(88,139,205,.24);
  background:linear-gradient(135deg,rgba(11,29,51,.94),rgba(20,28,58,.88));
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
body.dark .v338-length-form select,
body[data-theme="dark"] .v338-length-form select,
html[data-theme="dark"] .v338-length-form select{
  background:#0b1e35;
  color:#eef7ff;
  border-color:rgba(96,165,250,.25);
}
body.dark .v338-page-link,
body[data-theme="dark"] .v338-page-link,
html[data-theme="dark"] .v338-page-link{
  background:rgba(15,35,60,.82);
  color:#8ed8ff;
  border-color:rgba(74,144,224,.25);
}
body.dark .v338-page-link:hover,
body[data-theme="dark"] .v338-page-link:hover,
html[data-theme="dark"] .v338-page-link:hover{
  background:rgba(37,83,131,.72);
}
body.dark .v338-page-link.active,
body[data-theme="dark"] .v338-page-link.active,
html[data-theme="dark"] .v338-page-link.active{
  color:#fff;
  background:linear-gradient(135deg,#2782e6,#20b6e8);
}
@media(max-width:980px){
  .v338-table-footer{grid-template-columns:1fr;justify-items:center}
  .v338-number-pagination{justify-content:center}
  .v338-page-info{order:3}
}
@media(max-width:560px){
  .v338-table-footer{padding:12px 9px;gap:10px}
  .v338-page-link{min-width:31px;height:31px;padding:0 7px;border-radius:9px}
  .v338-number-pagination{gap:4px}
}