/* The same AMNET product palette, tuned for a five-tab phone application. */
:root{--bg:#0d151e;--surface:#182631;--raised:#223542;--border:#2d4353;--text:#eff6fb;--muted:#a8bdcc;--brand:#76dfb4;--primary:#2c795c;--hero:#164a3d;--radius:20px;--scroll-track:#0d151e;--scroll-thumb:#435f73}
body{font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(ellipse at 85% -5%,#23533f30,transparent 42%),var(--bg);font-feature-settings:'tnum' 1}.app-header{padding-top:22px;padding-bottom:16px;min-height:88px}.brand-mark{border:1px solid #6edcab55;border-radius:14px;background:#2d775a;box-shadow:inset 0 1px #b3f2d41a}.brand{font-size:19px;letter-spacing:-.5px}.brand small{letter-spacing:2px;color:#9eb7c9}.icon-button{border-radius:13px;width:42px;height:42px;background:#1c2d39;border-color:#344b5c}.page-heading{margin:4px 0 22px}.page-heading h1{font-size:28px;letter-spacing:-1px;font-weight:720}.page-heading p{font-size:12px;color:var(--muted)}.sync-strip{margin-bottom:18px;font-size:10px;color:#94adbe}.sync-dot{box-shadow:0 0 0 3px #76dfb411}.panel{padding:20px;border:1px solid var(--border);background:var(--surface);box-shadow:0 8px 22px #00000012;border-radius:20px}.hero{padding:24px;border-radius:24px;border:1px solid #377c61;background:linear-gradient(120deg,#1b5946,#153c35);box-shadow:0 14px 30px #0002}.hero-label{letter-spacing:.45px;color:#b7daca}.hero h2{font-size:24px;letter-spacing:-.8px;line-height:1.25}.hero .hero-number{font-size:43px;letter-spacing:-1.8px;margin-top:12px}.hero-number small{font-size:12px;letter-spacing:0}.hero-subtitle{font-size:12px;color:#c4dfd4}.hero-bottom{border-top-color:#57967a50;padding-top:15px}.hero-icon{right:22px;top:26px;opacity:.23}.hero-icon .icon{width:80px;height:80px}.eyebrow{letter-spacing:1.55px;font-size:10px}.chip{border-radius:7px;padding:5px 8px;letter-spacing:.1px}.chip.online,.chip.paid{background:#28543f;color:#a3ebc8;border:1px solid #3c7457}.bottom-nav{bottom:0;border-top:1px solid #3a5563;background:#14232ff5;box-shadow:0 -7px 26px #00000020;backdrop-filter:blur(18px);padding-top:9px}.bottom-nav a{border-radius:13px;font-size:10px;min-height:54px;gap:5px;color:#9eb5c8}.bottom-nav a[aria-current=page]{background:#244e3f;color:#a1efcc;box-shadow:inset 0 1px #73d4a629}.bottom-nav .icon{width:22px;height:22px;stroke-width:1.7}.field input,.field select,.field textarea,input[type=password],input[type=email],input[type=text],select{border-radius:11px}.action-button,.button,button.primary,a.primary,.primary-link{border-radius:11px;box-shadow:none}h2{font-size:17px;font-weight:650;letter-spacing:-.35px}h3{font-weight:600}.metric strong{font-variant-numeric:tabular-nums}.section-title{margin-top:24px}.empty-state{border-radius:18px;border:1px dashed #405b6e;background:#142430}.shortcut{border-radius:15px}details{border-radius:14px}details summary{font-weight:600}.bill-card,.customer-card{border-color:var(--border);border-radius:17px}.form-error,.notice.error{border-radius:12px}.app-header .header-tools{gap:8px}.icon-button:focus-visible,.bottom-nav a:focus-visible{outline:3px solid #88e6c0;outline-offset:3px}@media(min-width:760px){body{padding-top:20px}.app-header,.app-main{border-left:1px solid #2d435344;border-right:1px solid #2d435344}.app-header{border-top:1px solid #2d4353;border-radius:26px 26px 0 0;background:#101d27}.app-main{background:#101d27}.bottom-nav{border-left:1px solid #2d4353;border-right:1px solid #2d4353}}@media(max-width:359px){.app-header{padding:16px}.app-main{padding-left:16px;padding-right:16px}.hero{padding:20px}.hero .hero-number{font-size:38px}.hero h2{font-size:21px}.panel{padding:17px}.bottom-nav a{font-size:9px}}

/* Ecosystem v2 / phone roles, shared typography and blue action accent. */
body{font-family:'Segoe UI',sans-serif;--brand:#91a5ff;--primary:#405ee8}
.brand-mark{background:#405ee8;color:#fff}.brand{color:var(--text)}.brand:hover{color:var(--text)}
body[data-role=customer]{color-scheme:light;--bg:#f7f8fc;--surface:#fff;--raised:#f0f3fa;--border:#e0e5ef;--text:#202d47;--muted:#5e6c84;--brand:#3859cf;--primary:#405ee8;--hero:#edf1ff;--danger:#b82b46;--warning:#806010;--scroll-track:#f7f8fc;--scroll-thumb:#b5bfd1;background:var(--bg);color:var(--text)}
body[data-role=customer] .app-header,body[data-role=customer] .app-main{background:var(--bg);border-color:#e4e9f2}
body[data-role=customer] .app-header{padding-top:24px;padding-bottom:16px}
body[data-role=customer] .brand small{color:#66748d}
body[data-role=customer] .hero{background:#fff;border:1px solid #d9e1f2;box-shadow:0 4px 18px #23335108;border-radius:20px;color:#202d47}
body[data-role=customer] .hero-label,body[data-role=customer] .hero-subtitle{color:#5c6c88}
body[data-role=customer] .hero-bottom{border-color:#e2e8f3}.hero-number{font-variant-numeric:tabular-nums}
body[data-role=customer] .hero-icon{color:#536fd3;opacity:.17}
body[data-role=customer] .panel,body[data-role=customer] .metric,body[data-role=customer] .customer-card{background:#fff;border-color:#e0e5ef;box-shadow:0 2px 8px #23335105}
body[data-role=customer] .icon-button{background:#fff;border-color:#dce3ef;color:#4d5d78}
body[data-role=customer] input,body[data-role=customer] select,body[data-role=customer] textarea,body[data-role=customer] .password-field{background:#fff;border-color:#cbd5e6;color:#202d47}
body[data-role=customer] input::placeholder,body[data-role=customer] textarea::placeholder{color:#748198}
body[data-role=customer] .password-field input{background:transparent}
body[data-role=customer] .bottom-nav{background:#fffffffa;border-color:#dde4ef;box-shadow:0 -4px 18px #23335108}
body[data-role=customer] .bottom-nav a{color:#6a7890}
body[data-role=customer] .bottom-nav a[aria-current=page]{background:#edf1ff;color:#3656c8;box-shadow:none}
body[data-role=customer] .primary,body[data-role=customer] button.primary,body[data-role=customer] .primary-link{background:#405ee8;color:#fff;border-color:#405ee8}
body[data-role=customer] .secondary{background:#fff;color:#3656c8;border-color:#ccd6ed}
body[data-role=customer] .chip.online,body[data-role=customer] .chip.paid{background:#e9f7ef;color:#18633f;border-color:#bfdfcd}
body[data-role=customer] .chip.offline,body[data-role=customer] .chip.overdue{background:#fff0f2;color:#a82641;border-color:#ecc3cc}
body[data-role=customer] .chip.pending{background:#fff8e7;color:#795811;border-color:#ead8ac}
body[data-role=customer] .action-tile span{background:#eef2fc;color:#405ac6;border-color:#dce3f7}
body[data-role=customer] .empty-state{background:#fff;border-color:#d5deed}
body[data-role=customer] .support-contact{background:#eef3ff;border-color:#d6e1fa;color:#2a4cab}
body[data-role=customer] .support-contact small{color:#5b6f99}
body[data-role=customer] .ticket-card>.note{background:#f1f4fa}
body[data-role=customer] .feedback.error,body[data-role=customer] .flash.error{color:#ac2742}
body[data-role=customer] dialog{background:#fff;color:#202d47}
body[data-role=admin]{--bg:#111317;--surface:#1a1e25;--raised:#242a34;--border:#303745;--text:#edf0f7;--muted:#a7b0c1;--brand:#91a5ff;--primary:#405ee8;background:var(--bg)}
body[data-role=admin] .app-header,body[data-role=admin] .app-main{background:var(--bg);border-color:#303745}
body[data-role=admin] .hero{background:#202b47;border-color:#384b7b;border-radius:16px;padding:21px;box-shadow:none}
body[data-role=admin] .hero-label,body[data-role=admin] .hero-subtitle{color:#bac8ed}
body[data-role=admin] .hero .hero-number{font-size:37px}
body[data-role=admin] .panel{padding:17px;border-radius:14px;box-shadow:none}
body[data-role=admin] .bottom-nav{background:#191e27fa;border-color:#353f51}
body[data-role=admin] .bottom-nav a[aria-current=page]{background:#293758;color:#bdcaff;box-shadow:none}
body[data-role=admin] .customer-card{border-radius:12px;background:var(--surface)}
body[data-role=admin] .vb-launch{background:#405ee8;border-color:#6a7fe2}
body[data-role=admin] .icon-button{background:#202733;border-color:#354157}
body[data-role=admin] .action-tile span{background:#242f48;color:#acbcff;border-color:#3c4b6d}
@media(min-width:760px){body[data-role=customer] .app-header{border-color:#dfe5ef}body[data-role=customer] .app-main{border-color:#dfe5ef}}
body[data-role=customer] .chip.neutral{background:#eef2f8;color:#52627c}
body[data-role=customer] .chip.warning,body[data-role=customer] .chip.unpaid{background:#fff7e5;color:#7b580f;border:1px solid #e8d5a4}
body[data-role=customer] .chip.error{background:#fff0f2;color:#a82641}
body[data-role=customer] .profile-card{background:#fff;border-color:#dce4f1}
body[data-role=customer] .logout-button{border-color:#e4b9c4;color:#a82641}
body[data-role=customer] .hero-number small,body[data-role=customer] .hero-bottom,body[data-role=customer] .hero-bottom small{color:#596b85}
body[data-role=customer] .hero .hero-subtitle{color:#596b85}

/* Shared navy phone theme, customer choice can switch to the soft light variant. */
html body[data-role=admin],html[data-appearance=dark] body[data-role=customer]{color-scheme:dark;--bg:#0b1220;--surface:#142035;--raised:#1b2b44;--border:#2a3b55;--text:#edf3fc;--muted:#a7b8d0;--brand:#a5b8ff;--primary:#405ee8;--danger:#ff8292;--warning:#efb35e;--scroll-track:#0b1220;--scroll-thumb:#476184;background:#0b1220;color:#edf3fc}
html body[data-role=admin] .app-header,html body[data-role=admin] .app-main,html[data-appearance=dark] body[data-role=customer] .app-header,html[data-appearance=dark] body[data-role=customer] .app-main{background:#0b1220;border-color:#2a3b55}
html[data-appearance=dark] body[data-role=customer] .brand small{color:#a7b8d0}
html body[data-role=admin] .hero,html[data-appearance=dark] body[data-role=customer] .hero{background:#172f50;border:1px solid #3d5b86;color:#edf3fc;box-shadow:none}
html[data-appearance=dark] body[data-role=customer] .hero-label,html[data-appearance=dark] body[data-role=customer] .hero-subtitle,html[data-appearance=dark] body[data-role=customer] .hero-number small,html[data-appearance=dark] body[data-role=customer] .hero-bottom,html[data-appearance=dark] body[data-role=customer] .hero-bottom small{color:#b8c9e2}
html[data-appearance=dark] body[data-role=customer] .hero-icon{color:#aac4ff;opacity:.22}
html[data-appearance=dark] body[data-role=customer] .panel,html[data-appearance=dark] body[data-role=customer] .metric,html[data-appearance=dark] body[data-role=customer] .customer-card,html[data-appearance=dark] body[data-role=customer] .profile-card{background:#142035;border-color:#2f4566;box-shadow:none}
html body[data-role=admin] .bottom-nav,html[data-appearance=dark] body[data-role=customer] .bottom-nav{background:#101d31f5;border-color:#334c70;box-shadow:0 -4px 18px #0002}
html body[data-role=admin] .bottom-nav a[aria-current=page],html[data-appearance=dark] body[data-role=customer] .bottom-nav a[aria-current=page]{background:#23375d;color:#cedaff;box-shadow:none}
html[data-appearance=dark] body[data-role=customer] .bottom-nav a{color:#a8bddc}
html body[data-role=admin] .icon-button,html[data-appearance=dark] body[data-role=customer] .icon-button{background:#192b47;border-color:#3b5275;color:#d3e1f7}
html[data-appearance=dark] body[data-role=customer] input,html[data-appearance=dark] body[data-role=customer] select,html[data-appearance=dark] body[data-role=customer] textarea,html[data-appearance=dark] body[data-role=customer] .password-field{background:#0e192c;color:#edf3fc;border-color:#405a7d}
html[data-appearance=dark] body[data-role=customer] input::placeholder,html[data-appearance=dark] body[data-role=customer] textarea::placeholder{color:#98aecd}
html[data-appearance=dark] body[data-role=customer] .password-field input{background:transparent}
html[data-appearance=dark] body[data-role=customer] .secondary{background:#1b2c49;border-color:#48618a;color:#d3e0ff}
html[data-appearance=dark] body[data-role=customer] .chip.online,html[data-appearance=dark] body[data-role=customer] .chip.paid{background:#214636;color:#a4e6c2;border-color:#3b6d53}
html[data-appearance=dark] body[data-role=customer] .chip.offline,html[data-appearance=dark] body[data-role=customer] .chip.error{background:#472c39;color:#ffc0cc;border-color:#795262}
html[data-appearance=dark] body[data-role=customer] .chip.warning,html[data-appearance=dark] body[data-role=customer] .chip.unpaid{background:#403821;color:#f0d492;border-color:#796644}
html[data-appearance=dark] body[data-role=customer] .chip.neutral{background:#233953;color:#c2d4ec}
html[data-appearance=dark] body[data-role=customer] .action-tile span,html body[data-role=admin] .action-tile span{background:#213958;border-color:#3c577e;color:#bdd0ff}
html[data-appearance=dark] body[data-role=customer] .support-contact,html[data-appearance=dark] body[data-role=customer] .empty-state,html[data-appearance=dark] body[data-role=customer] .ticket-card>.note{background:#182d49;border-color:#3b567a;color:#d0dff8}
html[data-appearance=dark] body[data-role=customer] .support-contact small{color:#a9bddc}
html[data-appearance=dark] body[data-role=customer] .feedback.error,html[data-appearance=dark] body[data-role=customer] .flash.error,html[data-appearance=dark] body[data-role=customer] .logout-button{color:#ffadbf}
html[data-appearance=dark] body[data-role=customer] dialog{background:#142035;color:#edf3fc}
.theme-toggle{font-size:22px;min-width:44px;min-height:44px;font-family:'Segoe UI Symbol','Segoe UI',sans-serif;line-height:1}.theme-toggle:focus-visible{outline:3px solid #91aaff;outline-offset:3px}
@media(max-width:359px){.app-header .brand{font-size:18px;gap:8px}.app-header .brand-mark{width:34px;height:34px;font-size:25px}.app-header .header-tools{gap:5px}.app-header:has(>.theme-toggle) .secure-label{display:none}}

/* Silent live updates preserve layout and avoid refresh flashes. */
.app-main,.app-main *{animation:none!important;transition:none!important}.app-main strong,.app-main td{font-variant-numeric:tabular-nums}