@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#0b1220;--navy2:#111b2d;--ink:#172033;--muted:#7c879b;--line:#e7ebf2;--surface:#fff;--bg:#f6f8fc;--purple:#6c5ce7;--purple-dark:#5143c7;--green:#15966a;--amber:#bb7908;--red:#c2414c;--shadow:0 12px 35px rgba(25,37,65,.06)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b7afff;outline-offset:2px}[hidden]{display:none!important}.muted{color:var(--muted)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.04em}h1{font-size:30px;margin-bottom:8px}h2{font-size:18px;margin-bottom:7px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#8274ed;margin-bottom:10px}.button{border:1px solid transparent;border-radius:9px;padding:11px 15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:12px;transition:.15s ease}.button-primary{background:var(--purple);color:white;box-shadow:0 5px 12px #6c5ce729}.button-primary:hover{background:var(--purple-dark);transform:translateY(-1px)}.button-secondary{background:#fff;border-color:var(--line);color:#4d5870}.button-secondary:hover{border-color:#c6c1f8;color:var(--purple)}.button-full{width:100%;padding:13px 16px;justify-content:space-between;margin-top:8px}.toast{position:fixed;top:18px;right:18px;z-index:1000;background:#152039;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);max-width:min(420px,calc(100vw - 36px));opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#9f2937}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,.95fr) minmax(420px,1.05fr);background:white}.login-brand{background:radial-gradient(ellipse at 80% 18%,#2e3c65 0%,transparent 34%),linear-gradient(145deg,#0b1220,#111b31 75%);color:#fff;padding:50px clamp(35px,6vw,100px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;width:430px;height:430px;border:1px solid #ffffff12;border-radius:50%;right:-180px;bottom:-200px;box-shadow:0 0 0 45px #ffffff06,0 0 0 95px #ffffff04}.brand-mark{width:45px;height:45px;border-radius:13px;background:linear-gradient(135deg,#8d80ff,#5e50d9);display:grid;place-items:center;color:#fff;font-family:Manrope,sans-serif;font-size:16px;font-weight:800;box-shadow:0 8px 20px #6c5ce744}.login-brand>.brand-mark{margin-bottom:52px}.login-brand .eyebrow{color:#a8a0ff}.login-brand h1{font-size:clamp(38px,4.5vw,59px);line-height:1.13;margin:0 0 20px;letter-spacing:-.06em}.login-brand h1 span{color:#aaa2ff}.login-brand>p{color:#aab4c7;line-height:1.8;max-width:390px;font-size:14px}.login-points{display:grid;gap:15px;margin-top:34px;color:#d7deeb;font-size:13px}.point-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#4e987c33;color:#80dfb9;margin-right:9px;font-size:11px}.brand-foot{position:absolute;bottom:32px;left:clamp(35px,6vw,100px);color:#77839a;font-size:9px;letter-spacing:.15em;font-weight:800}.brand-foot span{color:#8e82ff;padding:0 8px}.login-panel{padding:40px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.login-card{width:min(100%,380px)}.login-card h2{font-size:28px;margin-bottom:10px}.login-card>.muted{margin-bottom:31px}.login-card form label,.field label{display:block;font-size:12px;font-weight:700;margin:18px 0 8px;color:#354057}.login-card input,.field input{width:100%;border:1px solid #dfe4ed;border-radius:9px;padding:13px 13px;color:var(--ink);background:#fff;transition:.15s}.login-card input:focus,.field input:focus{border-color:#9a90f4;outline:3px solid #6c5ce718}.login-card input::placeholder,.field input::placeholder{color:#a6afbd}.password-wrap{position:relative}.password-wrap input{padding-right:65px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--purple);font-size:11px;font-weight:700;padding:8px}.demo-hint{background:#f7f6ff;border:1px solid #ebe8ff;padding:13px 15px;border-radius:9px;margin-top:21px;font-size:11px;line-height:1.8;color:#6359ad}.demo-hint strong{color:#5145b7}.login-note{font-size:10px;line-height:1.6;color:#9aa3b3;margin-top:15px}.login-copyright{position:absolute;bottom:24px;color:#a0a8b6;font-size:10px}.mobile-brand{display:none}.form-error{color:#b83242;background:#fff1f2;border:1px solid #ffd5da;padding:10px 12px;border-radius:8px;margin-top:12px;font-size:12px;line-height:1.5}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:var(--navy);color:#c3cbda;display:flex;flex-direction:column;padding:24px 15px 16px;z-index:20}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px;border-bottom:1px solid #ffffff12}.brand-mark.small{width:36px;height:36px;border-radius:10px;font-size:13px;flex-shrink:0}.sidebar-brand strong{display:block;color:#fff;font-family:Manrope,sans-serif;font-size:13px;letter-spacing:-.02em}.sidebar-brand small{display:block;color:#737f97;font-size:8px;letter-spacing:.14em;margin-top:4px}.workspace-label,.nav-section-label{font-size:9px;font-weight:800;letter-spacing:.15em;color:#65728a;padding:23px 12px 9px}.main-nav{display:flex;flex-direction:column;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#aeb8c9;text-align:left;border-radius:8px;padding:11px 12px;font-size:12px;font-weight:600;min-height:40px}.nav-item:hover{background:#ffffff0b;color:#fff}.nav-item.active{background:linear-gradient(90deg,#6c5ce73a,#6c5ce714);color:#c5bfff;box-shadow:inset 3px 0 #8274ff}.nav-icon{width:17px;text-align:center;font-size:16px;color:#8490a6}.nav-item.active .nav-icon{color:#a69bff}.nav-count{margin-left:auto;background:#ffffff12;border-radius:5px;padding:3px 6px;font-size:9px;color:#9faac0}.nav-coming{cursor:pointer}.soon-tag{margin-left:auto;font-size:7px;letter-spacing:.06em;border:1px solid #ffffff16;border-radius:4px;padding:3px 4px;color:#69768e}.sidebar-bottom{margin-top:auto}.help-card{border:1px solid #ffffff13;background:#ffffff06;border-radius:10px;padding:14px;margin-bottom:15px}.help-icon{color:#a69bff;font-size:18px;margin-bottom:8px}.help-card strong{font-size:11px;color:#e5e9f1}.help-card p{font-size:10px;line-height:1.6;color:#8f9bb1;margin:7px 0 0}.logout-button{width:100%;display:flex;gap:11px;align-items:center;border:0;border-top:1px solid #ffffff12;padding:18px 12px 6px;background:transparent;color:#aab4c5;text-align:left;font-size:12px}.logout-button:hover{color:#fff}.logout-button span{font-size:17px}.main-column{margin-left:250px;min-height:100vh}.topbar{height:75px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;position:sticky;top:0;z-index:10}.breadcrumbs{display:flex;align-items:center;gap:10px;color:#99a2b2;font-size:11px}.breadcrumbs strong{color:#2b3448;font-weight:700}.crumb-slash{color:#d1d6e0}.topbar-right{display:flex;align-items:center;gap:12px}.status-pill{display:flex;align-items:center;gap:7px;background:#edfaf4;color:#16865f;border:1px solid #d8f4e7;padding:7px 10px;border-radius:20px;font-size:10px;font-weight:700;margin-right:8px}.status-dot,.footer-dot{width:6px;height:6px;background:#22b77d;border-radius:50%;box-shadow:0 0 0 3px #22b77d1b}.avatar{width:33px;height:33px;border-radius:10px;background:#edeaff;color:#6255d4;display:grid;place-items:center;font-size:10px;font-weight:800}.topbar-user strong,.topbar-user small{display:block}.topbar-user strong{font-size:11px}.topbar-user small{font-size:9px;color:#929bad;margin-top:4px;letter-spacing:.08em}.mobile-menu{display:none}.page-content{max-width:1480px;margin:auto;padding:34px 36px 24px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.page-heading h1{margin-bottom:7px}.page-heading p{margin-bottom:0;font-size:12px}.welcome-banner{background:linear-gradient(105deg,#28245f,#5546bc 65%,#6b5ce1);border-radius:15px;min-height:190px;padding:28px 33px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;margin-bottom:30px;box-shadow:0 14px 32px #5143c71c}.welcome-copy{position:relative;z-index:2;max-width:560px}.banner-label{font-size:9px;letter-spacing:.16em;font-weight:800;color:#c2bcff;margin-bottom:14px}.sparkle{margin-right:6px}.welcome-banner h2{font-size:25px;margin-bottom:10px}.welcome-banner h2 span{color:#d4d0ff}.welcome-banner p{font-size:12px;line-height:1.7;color:#d1cff2;max-width:470px;margin-bottom:14px}.banner-link{border:0;background:none;color:#fff;padding:0;font-weight:700;font-size:11px}.banner-link span{margin-left:8px}.banner-art{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:210px;height:190px;opacity:.85}.art-orbit{position:absolute;border:1px solid #ffffff3b;border-radius:50%;width:165px;height:165px;left:20px;top:12px}.orbit-two{width:122px;height:122px;left:42px;top:34px;border-style:dashed;transform:rotate(35deg)}.art-core{position:absolute;width:62px;height:62px;left:72px;top:64px;border-radius:19px;background:linear-gradient(135deg,#fff,#c6c0ff);display:grid;place-items:center;color:#5143c7;font-family:Manrope,sans-serif;font-weight:800;font-size:19px;box-shadow:0 0 0 10px #ffffff10,0 12px 24px #17104c45}.art-node{position:absolute;width:12px;height:12px;background:#d7d2ff;border:3px solid #8c80ff;border-radius:50%}.node-one{top:23px;left:75px}.node-two{bottom:20px;left:44px}.node-three{top:94px;right:10px}.section-heading,.panel-heading,.table-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.section-heading{margin-bottom:15px}.section-heading h2,.panel-heading h2,.table-heading h2{margin-bottom:5px;font-size:16px}.section-heading p,.panel-heading p,.table-heading p{font-size:11px;margin-bottom:0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:28px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 19px;box-shadow:0 3px 10px #1c2a4a04}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#758096;font-size:11px;font-weight:600}.stat-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;font-size:13px;font-weight:800}.stat-icon.purple{background:#f0edff;color:#6c5ce7}.stat-icon.green{background:#e8f9f1;color:#15966a}.stat-icon.amber{background:#fff5df;color:#bb7908}.stat-icon.slate{background:#eff2f7;color:#68758a}.stat-value{font-family:Manrope,sans-serif;font-size:31px;letter-spacing:-.06em;font-weight:800;margin:13px 0 9px}.stat-foot{font-size:10px;color:#9aa3b2}.mini-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin:0 5px 1px 0}.green-dot{background:#23b77e}.amber-dot{background:#e9a22b}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 10px #1c2a4a04}.recent-panel{padding:22px 22px 8px}.panel-heading{margin-bottom:15px}.text-button{border:0;background:transparent;color:var(--purple);font-weight:700;font-size:11px}.text-button span{margin-left:6px}.recent-list{min-height:80px}.recent-row{display:grid;grid-template-columns:minmax(150px,1.5fr) minmax(100px,.8fr) minmax(90px,.7fr) minmax(90px,.7fr);gap:12px;align-items:center;padding:13px 0;border-top:1px solid #f0f2f7}.recent-person{display:flex;align-items:center;gap:10px;min-width:0}.person-avatar{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:#f0edff;color:#6b5cdb;display:grid;place-items:center;font-size:11px;font-weight:800}.person-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-code,.recent-meta{font-size:10px;color:#919bad;margin-top:4px}.recent-label{font-size:9px;color:#a0a8b7;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.status-badge{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 8px;font-size:9px;font-weight:700;white-space:nowrap}.status-badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.status-active{color:#16845f;background:#e9f9f1}.status-suspended{color:#a86d09;background:#fff4dd}.status-terminated{color:#68758a;background:#eff2f7}.footer-note{display:flex;align-items:center;gap:8px;color:#9aa3b2;font-size:10px;padding:22px 0 0}.footer-dot{width:5px;height:5px;box-shadow:none}.customer-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:17px}.search-box{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:0 12px;min-width:220px;max-width:420px;flex:1;color:#9ca5b4}.search-box>span{font-size:20px}.search-box input{border:0;outline:0!important;box-shadow:none!important;width:100%;min-width:0;padding:11px 0;font-size:11px;background:transparent}.filter-select{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 12px;color:#536077;font-size:11px;min-width:145px}.customer-form-panel{padding:21px;margin-bottom:17px}.icon-button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:white;color:#788399;font-size:20px;line-height:1}.customer-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}.field label{margin-top:8px}.field label span{color:#e05b67}.field input{padding:11px;font-size:12px}.form-actions{display:flex;justify-content:flex-end;align-items:end;gap:8px;padding-top:21px}.full-span{grid-column:1/-1}.table-panel{overflow:hidden}.table-heading{padding:21px 22px 17px}.table-tag{background:#f5f4ff;color:#8274dc;font-size:8px;font-weight:800;letter-spacing:.1em;padding:7px 9px;border-radius:5px}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px}thead{background:#fafbfe}th{font-size:9px;letter-spacing:.09em;color:#939db0;text-align:left;font-weight:800;padding:12px 18px;border-top:1px solid #f0f2f7;border-bottom:1px solid #f0f2f7}td{padding:14px 18px;border-bottom:1px solid #f0f2f7;font-size:11px;color:#5f6b80}tbody tr:last-child td{border-bottom:0}.table-person{display:flex;align-items:center;gap:10px;min-width:190px}.table-person .person-avatar{width:32px;height:32px}.table-person strong{display:block;font-size:11px;color:#2c3549}.table-person small{display:block;font-size:9px;color:#9aa3b2;margin-top:4px}.action-select{background:#fff;border:1px solid #e6e9f1;border-radius:6px;padding:6px 7px;font-size:10px;color:#67738a}.action-select:disabled{opacity:.5;cursor:not-allowed}.empty-state{text-align:center;padding:40px 15px;color:#8e98aa}.empty-icon{font-size:28px;color:#b2aaf9;margin-bottom:12px}.empty-state strong{display:block;color:#424d63;font-size:12px}.empty-state p{font-size:11px;margin:8px 0 0}.loading-state{text-align:center;padding:25px;color:#98a2b3;font-size:11px}.mobile-brand{align-items:center;gap:10px;margin-bottom:36px;color:#1b2437;font-weight:800}.mobile-brand .brand-mark{width:36px;height:36px;font-size:13px}
@media(max-width:1100px){.page-content{padding:28px 24px}.topbar{padding:0 24px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.banner-art{right:2%;opacity:.55}.login-shell{grid-template-columns:.85fr 1.15fr}.login-brand{padding-left:35px;padding-right:35px}.brand-foot{left:35px}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:transform .2s ease;box-shadow:15px 0 40px #0b122033}.sidebar.open{transform:translateX(0)}.main-column{margin-left:0}.mobile-menu{display:inline-flex;border:0;background:none;font-size:19px;color:#4e5a70;padding:6px}.topbar{height:64px;padding:0 16px;gap:12px}.breadcrumbs{margin-right:auto}.status-pill{font-size:0;padding:8px;margin-right:0}.status-pill .status-dot{width:7px;height:7px}.topbar-user{display:none}.topbar-right{gap:9px}.page-content{padding:24px 16px}.page-heading{align-items:flex-start}.page-heading h1{font-size:25px}.page-heading>.button{white-space:nowrap;padding:10px 11px;font-size:10px}.welcome-banner{padding:23px;min-height:180px}.welcome-banner h2{font-size:22px}.banner-art{right:-60px;opacity:.28}.recent-row{grid-template-columns:minmax(150px,1.4fr) minmax(80px,.7fr) minmax(85px,.7fr)}.recent-row .recent-column:nth-child(3){display:none}.customer-toolbar{flex-wrap:wrap}.search-box{max-width:none;flex-basis:100%}.filter-select{flex:1}.customer-form{grid-template-columns:1fr 1fr}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-panel{min-height:100vh;padding:28px 22px 60px}.mobile-brand{display:flex}.login-card{max-width:410px}.login-copyright{bottom:20px}}
@media(max-width:480px){h1{font-size:24px}.page-heading{gap:10px}.page-heading>.button{font-size:0;gap:0;width:42px;height:42px;padding:0;flex-shrink:0}.page-heading>.button span{font-size:20px}.welcome-banner{margin-bottom:23px}.welcome-banner p{max-width:290px}.stats-grid{gap:10px}.stat-card{padding:14px}.stat-value{font-size:27px}.stat-top{font-size:10px}.stat-foot{font-size:9px}.section-heading{align-items:flex-start}.section-heading .button{padding:9px;font-size:10px}.recent-panel{padding:17px 15px 5px}.recent-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}.recent-row .recent-column:nth-child(2){display:none}.recent-row .recent-column:nth-child(3){display:block}.recent-row .recent-column:nth-child(4){display:none}.customer-form{grid-template-columns:1fr}.form-actions{grid-column:1/-1}.table-heading{padding:17px}.table-tag{display:none}.customer-toolbar .button{padding:11px}.filter-select{min-width:0}.page-heading p{max-width:250px;line-height:1.5}}

.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.package-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 3px 10px #1c2a4a04}.package-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.package-symbol{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f0edff;color:#6c5ce7;font-size:18px}.package-card h3{font:700 15px Manrope,sans-serif;letter-spacing:-.03em;margin:15px 0 5px}.package-speed{color:#68758a;font-size:11px}.package-price{font:800 25px Manrope,sans-serif;letter-spacing:-.05em;margin:20px 0 5px}.package-price small{font:500 10px 'DM Sans',sans-serif;letter-spacing:0;color:#8c96a7}.package-description{color:#909bad;font-size:10px;line-height:1.6;min-height:32px}.package-card-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f2f7;padding-top:13px;margin-top:15px}.package-card-footer .action-select{max-width:125px}.package-inactive{opacity:.65}.invoice-stats{margin-top:0}.invoice-stats .stat-value{font-size:27px}.status-badge.status-unpaid{color:#a86d09;background:#fff4dd}.status-badge.status-paid{color:#16845f;background:#e9f9f1}.status-badge.status-void{color:#68758a;background:#eff2f7}.invoice-person strong{display:block;color:#2c3549;font-size:11px}.invoice-person small{display:block;color:#929bad;font-size:9px;margin-top:4px}.invoice-amount{font-weight:800;color:#29334a;white-space:nowrap}.invoice-action{border:1px solid #dedafc;border-radius:7px;background:#f5f3ff;color:#6556d4;padding:7px 9px;font-size:10px;font-weight:700;white-space:nowrap}.invoice-action:hover{background:#eae6ff}.invoice-action:disabled{opacity:.45;cursor:not-allowed}.customer-form select{width:100%;border:1px solid #dfe4ed;border-radius:9px;padding:11px;background:#fff;color:#39445a;font-size:12px}.table-scroll td{vertical-align:middle}
@media(max-width:1100px){.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.package-grid{grid-template-columns:1fr}.package-stats,.invoice-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.invoice-stats .stat-card:last-child{grid-column:1/-1}}

.heading-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.heading-actions .button{white-space:nowrap}

/* Operational dashboard additions */
.dashboard-billing-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-12px}
.chart-panel{padding:22px;margin-bottom:20px}
.chart-panel .panel-heading{margin-bottom:22px}
.billing-chart{min-height:190px}
.chart-legend{display:flex;gap:18px;justify-content:flex-end;margin-bottom:13px;color:#7d8799;font-size:10px}
.chart-legend span{display:flex;align-items:center;gap:7px}
.chart-legend i{width:8px;height:8px;border-radius:3px;display:inline-block}
.legend-paid{background:#2eb889}.legend-open{background:#f0b74a}
.chart-columns{height:155px;display:grid;grid-template-columns:repeat(6,minmax(36px,1fr));gap:clamp(9px,3vw,32px);align-items:end;border-bottom:1px solid #e9edf3;padding:0 5px}
.chart-column{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.chart-total{font-size:9px;color:#8390a2;margin-bottom:5px}
.chart-bar-track{height:112px;width:min(36px,75%);display:flex;flex-direction:column-reverse;justify-content:flex-start;overflow:hidden;border-radius:7px 7px 2px 2px;background:#f3f5f9}
.chart-bar{width:100%;min-height:0;transition:height .2s ease}.chart-open{background:#f0b74a}.chart-paid{background:#2eb889}
.chart-label{font-size:9px;color:#778398;margin:9px 0 11px;white-space:nowrap}
.table-pagination{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid #f0f2f7;color:#7d8799;font-size:10px}
.table-pagination>div{display:flex;gap:7px}.table-pagination .button{padding:7px 10px;font-size:10px}
.table-pagination button:disabled{opacity:.45;cursor:not-allowed}
.payment-value,.report-value{font-size:clamp(15px,2vw,24px);letter-spacing:-.035em;white-space:nowrap}
.report-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.report-table-panel{overflow:hidden;margin-top:20px}
.settings-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.settings-card{padding:22px}.settings-card-heading{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid #eff1f5}
.settings-card-heading h2{font-size:15px;margin:0 0 5px}.settings-card-heading p{font-size:10px;margin:0}
.settings-icon{width:38px;height:38px;flex:none;border-radius:11px;background:#eeecff;color:#6355d5;display:grid;place-items:center;font-size:18px}
.whatsapp-icon{background:#e9f9f1;color:#16976b}
.settings-details{margin:8px 0 18px}.settings-details>div{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #f1f3f7;font-size:11px}
.settings-details dt{color:#8490a2}.settings-details dd{margin:0;color:#2d374b;font-weight:700;text-align:right;overflow-wrap:anywhere}
.settings-notice{font-size:10px;color:#788398;background:#f7f8fb;border:1px solid #edf0f5;border-radius:8px;padding:11px 12px;line-height:1.6;margin-top:15px}
.integration-state{display:flex;gap:11px;align-items:flex-start;padding:18px 0 5px}.integration-dot{width:9px;height:9px;border-radius:50%;margin-top:4px;flex:none;background:#2eb889;box-shadow:0 0 0 4px #e8f8f1}.integration-limited{background:#e9aa35;box-shadow:0 0 0 4px #fff5df}
.integration-state strong{display:block;font-size:11px;color:#303a4f}.integration-state p{font-size:10px;color:#7e899b;line-height:1.6;margin:6px 0 0}.settings-card>.button{margin-top:12px}
.mikrotik-status-card{padding:clamp(20px,4vw,36px);display:grid;grid-template-columns:120px 1fr;gap:25px;align-items:start}
.mikrotik-illustration{width:100px;height:100px;border-radius:25px;background:linear-gradient(145deg,#101b31,#20385a);color:#a9baff;display:grid;place-items:center;font-size:55px;box-shadow:0 15px 30px #14243c24}
.mikrotik-status-card h2{margin:13px 0 8px;font-size:20px}.mikrotik-status-card p{font-size:12px;color:#758196;line-height:1.8;max-width:750px}
.mikrotik-capabilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.mikrotik-capabilities>div{padding:15px;border:1px solid #edf0f5;border-radius:9px;background:#fafbfc}.mikrotik-capabilities strong,.mikrotik-capabilities span{display:block;font-size:10px}.mikrotik-capabilities strong{color:#3a4559;margin-bottom:7px}.mikrotik-capabilities span{color:#7f8a9b;line-height:1.6}
.inline-error{padding:13px 15px;border:1px solid #ffd6dc;background:#fff4f5;color:#a83d4a;border-radius:9px;font-size:11px;line-height:1.6}.error-state{color:#a83d4a}
.status-pill-error{background:#fff1f2;color:#b43b49;border-color:#ffd8dd}.status-pill-error .status-dot{background:#d94c5b;box-shadow:0 0 0 3px #d94c5b1b}
.chart-empty{padding:28px 12px}.chart-empty p{margin:7px 0 0}
@media(max-width:1000px){.report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-layout{grid-template-columns:1fr}}
@media(max-width:650px){.dashboard-billing-stats{margin-top:-12px}.chart-panel{padding:17px}.chart-columns{gap:8px}.chart-label{font-size:8px}.table-pagination{padding:12px;gap:10px}.table-pagination .button{font-size:9px;padding:7px}.mikrotik-status-card{grid-template-columns:1fr;gap:14px}.mikrotik-illustration{width:70px;height:70px;font-size:40px;border-radius:18px}.mikrotik-capabilities{grid-template-columns:1fr}.settings-card{padding:18px}}
.router-list { display:grid; gap:14px; }
.router-item { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid var(--border,#e8edf3); }
.router-item:last-child { border-bottom:0; }
.router-item h3 { margin:10px 0 4px; }
.router-item p,.router-item small { display:block; margin:4px 0; color:var(--muted,#718096); }
.router-actions { display:flex; flex-wrap:wrap; gap:8px; }
.router-help { display:grid; gap:14px; padding-left:20px; color:var(--muted,#64748b); line-height:1.55; }
.router-form-note { grid-column:1/-1; margin:0; }
.modal-backdrop[hidden] { display:none; }
@media (max-width:680px) { .router-item { flex-direction:column; } .router-actions { width:100%; } .router-actions .button { flex:1; } }
.form-span { grid-column:1/-1; }
.olt-system-info { margin-top:10px; display:grid; gap:4px; color:var(--muted,#64748b); font-size:12px; overflow-wrap:anywhere; }
.olt-system-info strong { color:var(--text,#26334d); }
.audit-log-list { display:grid; max-height:390px; overflow:auto; }
.audit-log-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--line,#edf0f5); font-size:11px; }
.audit-log-row strong,.audit-log-row span { display:block; overflow-wrap:anywhere; }
.audit-log-row span,.audit-log-row time { margin-top:4px; color:var(--muted,#7a8496); font-size:10px; }
@media(max-width:600px){.audit-log-row{flex-direction:column;gap:4px}}

.ai-privacy-note{background:#f4f2ff;border:1px solid #e4dfff;color:#5d53a6;padding:14px 16px;border-radius:10px;font-size:11px;line-height:1.6;margin:-8px 0 18px}
.ai-privacy-note strong{color:#39316f}
.ai-employee-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.ai-employee-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;display:grid;grid-template-columns:40px 1fr;gap:0 11px;align-items:center;min-height:158px;box-shadow:0 3px 10px #1c2a4a04}
.ai-employee-card{cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}
.ai-employee-card:hover,.ai-employee-card:focus-visible{border-color:#bdb5fb;box-shadow:0 7px 18px #4d42a214;outline:none}
.ai-employee-icon{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f0edff;color:var(--purple);font-size:18px;font-weight:800}
.ai-employee-card strong,.ai-employee-card small{display:block}
.ai-employee-card strong{font-size:12px;color:#293349}
.ai-employee-card small{font-size:10px;color:#8993a6;margin-top:4px}
.ai-employee-card p{grid-column:1/-1;font-size:10px;line-height:1.6;color:#748096;margin:14px 0 11px}
.ai-employee-state{grid-column:1/-1;color:#9a7a37;background:#fff7e7;border-radius:6px;padding:6px 8px;font-size:9px;font-weight:700;width:max-content}
.ai-employee-card-active{border-color:#d8f0e4}
.ai-employee-card-active .ai-employee-state{color:#16845f;background:#e9f9f1}
.ai-chat-panel{padding:20px 22px;margin:0 0 15px}
.ai-provider-notice{background:#fff7e7;color:#8c6418;border:1px solid #f6e7c7;border-radius:8px;padding:10px 12px;font-size:10px;line-height:1.5;margin:0 0 12px}
.ai-chat-messages{height:270px;overflow:auto;padding:14px;background:#fafbfe;border:1px solid #eef0f6;border-radius:10px;display:flex;flex-direction:column;gap:10px}
.ai-chat-empty{margin:auto;display:grid;gap:7px;text-align:center;color:#8a94a7;font-size:11px;max-width:360px;line-height:1.6}
.ai-chat-empty strong{color:#45516a;font-size:12px}
.ai-chat-message{max-width:min(82%,680px);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:11px;padding:10px 12px;font-size:11px;line-height:1.65}
.ai-chat-message.from-user{align-self:flex-end;background:#6558d9;color:#fff;border-bottom-right-radius:3px}
.ai-chat-message.from-ai{align-self:flex-start;background:#fff;border:1px solid #e9ecf3;color:#3b465d;border-bottom-left-radius:3px}
.ai-prompt-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.ai-prompt-chip{border:1px solid #e6e8f1;background:#fff;color:#6558d9;border-radius:20px;padding:7px 10px;font-size:9px;font-weight:700;cursor:pointer}
.ai-prompt-chip:hover{background:#f6f4ff;border-color:#d4ceff}
.ai-chat-form{display:flex;align-items:flex-end;gap:10px}
.ai-chat-form textarea{resize:vertical;min-height:44px;max-height:140px;flex:1;background:#fff;border:1px solid #e2e6ef;border-radius:9px;padding:11px 12px;font:inherit;font-size:11px;line-height:1.5;color:#303b51}
.ai-chat-form textarea:focus{outline:2px solid #7d71e533;border-color:#8277e9}
.ai-chat-form button:disabled{opacity:.55;cursor:not-allowed}
.ai-health-panel{padding:20px 22px}
.ai-health-time{font-size:10px;color:#8993a6;white-space:nowrap}
.ai-health-checks{border-top:1px solid #f0f2f7}
.ai-health-row{display:grid;grid-template-columns:10px minmax(130px,1fr) minmax(100px,1.2fr) 58px;gap:11px;align-items:center;padding:12px 2px;border-bottom:1px solid #f0f2f7;font-size:11px}
.ai-health-row:last-child{border-bottom:0}
.ai-health-row strong{font-size:10px;color:#364158}
.ai-health-indicator{width:8px;height:8px;border-radius:50%;background:#e1a43a;box-shadow:0 0 0 3px #fff5df}
.ai-health-indicator.is-ok{background:#20a875;box-shadow:0 0 0 3px #e8f9f1}
.ai-health-indicator.is-error{background:#dc5360;box-shadow:0 0 0 3px #fff0f1}
.ai-health-detail{color:#16845f;font-size:10px}
.ai-health-detail.is-error-text{color:#b54450}
.ai-health-row small{text-align:right;color:#9aa3b2;font-size:9px}
@media(max-width:1100px){.ai-employee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ai-employee-grid{grid-template-columns:1fr}.ai-health-panel,.ai-chat-panel{padding:16px}.ai-health-row{grid-template-columns:10px minmax(90px,1fr) minmax(86px,1.2fr);gap:8px}.ai-health-row small{display:none}.ai-health-time{font-size:9px}.ai-chat-form{align-items:stretch}.ai-chat-form button{padding:10px}.ai-chat-message{max-width:94%}}
.feature-panel{margin:0 0 16px}.feature-form{padding:20px}.feature-form textarea,.feature-form select{width:100%;border:1px solid #dfe4ed;border-radius:9px;padding:11px;background:#fff;color:#39445a;font:inherit;font-size:12px}.block-muted{display:block;margin-top:5px;color:#8792a4;font-size:10px;max-width:420px;white-space:normal}.page-content [hidden]{display:none!important}
@media(max-width:800px){#import-preview .panel-heading{align-items:flex-start;flex-direction:column}#import-preview .panel-heading>div:last-child{display:flex;gap:7px}}

/* Keep the sidebar header and account controls visible while the menu scrolls. */
.sidebar{min-height:0}
.sidebar-brand,.workspace-label,.sidebar-bottom{flex-shrink:0}
.main-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#52617b transparent}
.main-nav::-webkit-scrollbar{width:5px}
.main-nav::-webkit-scrollbar-thumb{background:#52617b;border-radius:8px}

/* Add-router dialog */
.router-modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(11,18,32,.62);backdrop-filter:blur(5px);overflow-y:auto}
.router-modal-card{width:min(100%,620px);max-height:min(760px,calc(100dvh - 48px));overflow-y:auto;background:#fff;border:1px solid #ffffffa6;border-radius:18px;padding:26px;box-shadow:0 28px 90px rgba(8,16,33,.32);animation:router-modal-in .18s ease-out}
.router-modal-heading{display:flex;align-items:flex-start;gap:14px;padding-bottom:20px;border-bottom:1px solid #edf0f5}
.router-modal-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:#efedff;color:#6255d4;font-size:24px}
.router-modal-title{flex:1;min-width:0}.router-modal-title .eyebrow{margin:2px 0 6px;font-size:9px}.router-modal-title h2{margin:0;color:#202a3d;font-size:21px;letter-spacing:-.04em}.router-modal-title p{margin:6px 0 0;color:#8791a2;font-size:11px;line-height:1.55}
.router-modal-heading .icon-button{flex:none;width:34px;height:34px;font-size:21px}
.router-connection-chip{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:17px 0 4px;padding:8px 11px;border:1px solid #e9e6ff;border-radius:8px;background:#f8f7ff;color:#6b61bd;font-size:10px;font-weight:600}.router-connection-chip .status-dot{width:7px;height:7px;box-shadow:0 0 0 3px #22b77d1b}.router-connection-chip strong{color:#5143c7}.router-chip-divider{color:#b7b1e6}
.router-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding-top:13px}
.router-field{display:block;min-width:0}.router-field>span{display:block;margin-bottom:5px;color:#354057;font-size:11px;font-weight:700}.router-field>small{display:block;min-height:28px;margin-bottom:7px;color:#929bad;font-size:9px;line-height:1.45}.router-field input{display:block;width:100%;height:43px;border:1px solid #dfe4ed;border-radius:9px;padding:0 12px;background:#fff;color:#263149;font-size:12px;transition:border-color .15s,box-shadow .15s}.router-field input::placeholder{color:#a8b0bf}.router-field input:hover{border-color:#c8cde0}.router-field input:focus{outline:0;border-color:#9185f0;box-shadow:0 0 0 3px #6c5ce71b}
.router-security-note{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border:1px solid #e8edf4;border-radius:10px;background:#f8fafc;color:#637086}.router-security-note>span{color:#6c5ce7;font-size:16px;line-height:1}.router-security-note p{margin:0;font-size:10px;line-height:1.6}
.router-form-error{grid-column:1/-1;margin:0;font-size:11px;line-height:1.5}
.router-modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;padding-top:4px}.router-modal-actions .button{min-width:112px}.router-modal-actions .button-primary{min-width:152px}
@keyframes router-modal-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.router-modal-backdrop{place-items:end center;padding:10px}.router-modal-card{width:100%;max-height:calc(100dvh - 20px);padding:20px 17px;border-radius:16px}.router-modal-heading{gap:11px}.router-modal-icon{width:39px;height:39px}.router-modal-title h2{font-size:19px}.router-connection-chip{margin-top:14px}.router-form-grid{grid-template-columns:1fr;gap:12px}.router-field>small{min-height:0}.router-security-note,.router-form-error,.router-modal-actions{grid-column:1}.router-modal-actions{position:sticky;bottom:-20px;margin:0 -17px -20px;padding:13px 17px max(13px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #edf0f5}.router-modal-actions .button{flex:1}}