:root{--navy:#073b84;--blue:#0758b8;--cyan:#10bada;--yellow:#ffd92f;--ink:#17324f;--muted:#67809a;--line:#dfe9f2;--bg:#f4f8fc;--white:#fff;--green:#16a46c;--shadow:0 20px 55px rgba(18,59,101,.13)}
*{box-sizing:border-box}html{font-family:"Nunito",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0}button,input,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{text-decoration:none;color:inherit}[hidden]{display:none!important}.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px;background:#fff}.skip:focus{top:12px}.demo-ribbon{position:fixed;z-index:50;top:0;left:0;right:0;height:30px;display:flex;justify-content:center;align-items:center;gap:9px;background:#fff4be;color:#6e5100;font-size:.72rem;letter-spacing:.02em}.demo-ribbon strong{text-transform:uppercase}.login-screen{min-height:100vh;padding-top:30px;display:grid;grid-template-columns:minmax(420px,47%) 1fr;background:#fff}.login-brand-panel{position:relative;overflow:hidden;padding:54px clamp(34px,6vw,90px);display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(2,45,108,.97),rgba(0,133,181,.92)),url("assets/3149ee24-19be-4926-ba8e-935de200d2d3.png") center/cover;color:#fff}.login-brand-panel:after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-220px;bottom:-260px;background:rgba(255,217,47,.16);box-shadow:0 0 0 55px rgba(255,255,255,.05)}.login-brand-panel>img{width:min(300px,75%);filter:brightness(0) invert(1)}.back-link{width:max-content;margin-bottom:55px;font-weight:800;opacity:.9}.login-message{position:relative;z-index:1;margin:auto 0;max-width:520px}.island-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--yellow);color:var(--navy);font-size:1.7rem;box-shadow:0 12px 30px rgba(0,0,0,.18)}.login-message>p,.eyebrow,.panel-heading>div>span,.welcome>div>span{font-size:.75rem;font-weight:900;letter-spacing:.15em}.login-message h1{font-family:"Baloo 2";font-size:clamp(2.2rem,4vw,4.1rem);line-height:.95;margin:13px 0 25px}.login-message ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}.login-message li{padding:9px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.08)}.login-form-panel{display:grid;place-items:center;padding:55px 8vw}.login-form-panel form{width:min(440px,100%)}.eyebrow{color:var(--blue)}.login-form-panel h2{font-family:"Baloo 2";font-size:2.25rem;line-height:1.05;margin:10px 0}.login-form-panel form>p{color:var(--muted);margin:0 0 30px}.login-form-panel label{display:grid;gap:7px;margin:18px 0;font-weight:800}.login-form-panel input{width:100%;height:54px;border:1.5px solid var(--line);border-radius:14px;padding:0 15px;outline:0;transition:.2s}.login-form-panel input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(16,186,218,.12)}.password-wrap{position:relative}.password-wrap button{position:absolute;right:8px;top:8px;height:38px;border:0;background:#eff6fb;border-radius:9px;color:var(--blue);font-weight:900}.primary-button{width:100%;height:54px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--blue),#008ec0);color:#fff;font-weight:900;box-shadow:0 12px 25px rgba(7,88,184,.23)}.login-form-panel small{display:block;text-align:center;margin-top:18px;color:var(--muted)}.login-form-panel small a{color:var(--blue);font-weight:900}
.portal{height:100vh;padding-top:30px;display:grid;grid-template-columns:260px 1fr;overflow:hidden}.sidebar{z-index:20;display:flex;flex-direction:column;padding:24px 18px;background:linear-gradient(180deg,#063a82,#052e67);color:#fff}.portal-brand{display:grid;justify-items:start;gap:7px;padding:5px 10px 25px}.portal-brand img{width:185px;filter:brightness(0) invert(1)}.portal-brand span{font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#85e7f6}.sidebar nav{display:grid;gap:5px}.sidebar button,.sidebar nav button{border:0;color:inherit;background:transparent}.sidebar nav button{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:12px;text-align:left;font-weight:800;opacity:.78}.sidebar nav button span{width:24px;font-size:1.25rem}.sidebar nav button:hover,.sidebar nav button.active{opacity:1;background:rgba(255,255,255,.13)}.sidebar-help{display:grid;gap:7px;margin:auto 4px 20px;padding:16px;border-radius:14px;background:rgba(16,186,218,.17);font-size:.83rem}.sidebar-help a{color:#78eeff;font-weight:900}.logout{padding:12px;text-align:left;opacity:.75;font-weight:800}.portal-main{min-width:0;overflow:auto}.topbar{position:sticky;top:0;z-index:10;height:75px;padding:0 clamp(22px,4vw,52px);display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.topbar div{display:grid}.topbar small{color:var(--muted)}.online{display:flex;align-items:center;gap:8px;margin-left:auto;padding:8px 12px;border-radius:999px;background:#e9fbf4;color:#117d56;font-size:.78rem;font-weight:900}.online i{width:8px;height:8px;border-radius:50%;background:#18b978;box-shadow:0 0 0 4px rgba(24,185,120,.13)}.menu-toggle{display:none;border:0;background:#eef5fb;border-radius:9px;width:40px;height:40px}.portal-content{max-width:1340px;margin:auto;padding:34px clamp(22px,4vw,52px) 70px}.panel{animation:panelIn .25s ease}@keyframes panelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.welcome{position:relative;overflow:hidden;min-height:155px;padding:27px 32px;display:flex;justify-content:space-between;align-items:center;border-radius:24px;background:linear-gradient(110deg,#0855b4,#00a5c5);color:#fff;box-shadow:var(--shadow)}.welcome h2{font-family:"Baloo 2";font-size:2rem;margin:4px 0}.welcome p{margin:0;opacity:.86}.welcome-sun{font-size:6rem;color:var(--yellow);filter:drop-shadow(0 0 28px rgba(255,217,47,.48))}.summary-grid{display:grid;grid-template-columns:1.25fr 1fr .75fr;gap:18px;margin-top:20px}.summary-grid article,.chart-card,.future-note,.service-detail,.info-cards article,.profile-card,.data-grid,.security-note{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(32,70,110,.07)}.summary-grid article{padding:23px}.summary-grid small,.panel small,.bill small,.service-copy small,.data-grid label{color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.08em}.plan-card h3{font-size:1.35rem;margin:8px 0 0}.plan-card p{margin:3px 0;color:var(--muted)}.speed{display:flex;align-items:end;gap:6px;margin:14px 0}.speed b{font-family:"Baloo 2";font-size:3.1rem;line-height:.8;color:var(--blue)}.speed span{font-weight:900;color:var(--blue)}.plan-card>button{border:0;padding:0;background:transparent;color:var(--blue);font-weight:900}.invoice-head{display:flex;justify-content:space-between}.invoice-head span,.count-badge{padding:5px 8px;border-radius:8px;background:#fff1c4;color:#8d6500;font-size:.7rem;font-weight:900}.invoice-card>strong{display:block;font-family:"Baloo 2";font-size:2.2rem;color:var(--navy);margin-top:16px}.invoice-card>p{color:var(--muted)}.invoice-card>div:last-child,.bill-actions{display:flex;gap:8px}.invoice-card button,.bill-actions button,.future-note button,.outline{border:1px solid #b9d6eb;border-radius:10px;padding:9px 11px;background:#f6fbff;color:var(--blue);font-weight:900}.connection-card{text-align:center}.connection-ring{display:grid;place-items:center;width:68px;height:68px;margin:15px auto 7px;border:7px solid #d7f6e9;border-radius:50%}.connection-ring span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1ab477;color:#fff;font-size:1.4rem}.connection-card h3{margin:5px}.connection-card p{color:var(--muted);margin:0}.section-title{margin:31px 0 13px}.quick-grid,.support-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick-grid button,.support-grid button,.support-grid a{display:grid;gap:5px;padding:19px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-align:left}.quick-grid span,.support-grid span{font-size:1.4rem;color:var(--blue)}.quick-grid small,.support-grid small{color:var(--muted)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.panel-heading h2{font-family:"Baloo 2";font-size:2.35rem;line-height:1;margin:5px 0}.panel-heading p{color:var(--muted);margin:0}.bill{display:grid;grid-template-columns:1.5fr .65fr auto;align-items:center;gap:22px;margin-bottom:12px;padding:22px;border:1px solid var(--line);border-radius:17px;background:#fff}.bill>div{display:grid;gap:5px}.bill .status{width:max-content;padding:5px 9px;border-radius:7px;background:#fff1c4;color:#8b6400;font-size:.7rem;font-weight:900}.bill.paid .status{background:#e5f9f0;color:#147c57}.bill p{margin:0;color:var(--muted);font-size:.8rem}.paid-mark{color:var(--green);font-weight:900}.future-note{margin-top:25px;padding:20px 22px}.future-note p{color:var(--muted)}.service-detail{display:grid;grid-template-columns:250px 1fr;overflow:hidden}.mega-badge{display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#05499f,#09bad5);color:#fff}.mega-badge b{font-family:"Baloo 2";font-size:5rem;line-height:.8}.mega-badge span{font-size:1.3rem;font-weight:900}.service-copy{padding:30px}.service-copy h3{font-size:1.6rem;margin:7px 0}.service-copy>p{color:var(--muted)}.service-copy dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}.service-copy dl div{display:grid;gap:4px;padding:12px;border-radius:12px;background:#f3f8fc}.service-copy dt{font-size:.7rem;color:var(--muted);font-weight:900}.service-copy dd{margin:0;font-weight:800}.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.info-cards article{display:flex;gap:15px;padding:20px}.info-cards article>span{font-size:2rem;color:var(--blue)}.info-cards p{color:var(--muted);margin:4px 0}.usage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.usage-stats article{display:grid;gap:8px;padding:21px;border-radius:17px;background:#fff;border:1px solid var(--line)}.usage-stats strong{font-size:1.55rem}.usage-stats span{color:var(--blue);font-size:.8rem;font-weight:800}.chart-card{padding:25px;margin-top:18px}.chart{height:300px;display:flex;align-items:end;gap:clamp(8px,4vw,48px);padding:30px 20px 40px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 59px,#edf2f6 60px)}.chart div{position:relative;flex:1;height:var(--h);min-width:18px;border-radius:9px 9px 2px 2px;background:linear-gradient(#09c3d9,#0861bf);animation:grow .7s ease both}.chart span{position:absolute;bottom:-27px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:900;color:var(--muted)}@keyframes grow{from{height:0}}.ticket{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:17px;border:1px solid var(--line);border-radius:15px;background:#fff}.ticket>span{color:var(--blue);font-weight:900}.ticket p{margin:3px 0;color:var(--muted)}.ticket em{font-style:normal;color:var(--green);font-weight:900}.profile-card{display:flex;align-items:center;gap:18px;padding:22px}.avatar{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:900;font-size:1.2rem}.profile-card h3{margin:4px 0}.profile-card p{margin:0;color:var(--muted)}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:16px;overflow:hidden;background:var(--line)}.data-grid label{display:grid;gap:6px;padding:20px;background:#fff}.data-grid strong{color:var(--ink);font-size:.93rem;letter-spacing:0}.security-note{display:flex;gap:14px;margin-top:16px;padding:20px}.security-note>span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#e4f9ef;color:var(--green);font-weight:900}.security-note p{margin:4px 0;color:var(--muted)}.toast{position:fixed;z-index:80;left:50%;bottom:25px;max-width:min(560px,calc(100% - 30px));padding:13px 18px;border-radius:12px;background:#123654;color:#fff;box-shadow:var(--shadow);opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:.25s}.toast.visible{opacity:1;transform:translate(-50%,0)}.mobile-nav{display:none}
@media(max-width:1050px){.summary-grid{grid-template-columns:1fr 1fr}.connection-card{grid-column:span 2}.quick-grid,.support-grid{grid-template-columns:1fr 1fr}.header-client-link{display:none}}
@media(max-width:760px){.demo-ribbon span{display:none}.login-screen{grid-template-columns:1fr}.login-brand-panel{min-height:260px;padding:35px 25px}.back-link{margin-bottom:25px}.login-brand-panel>img{width:210px}.login-message h1{font-size:2.3rem}.login-message ul{display:none}.login-form-panel{padding:40px 24px 70px;align-items:start}.portal{display:block;padding-bottom:70px}.sidebar{position:fixed;inset:30px auto 0 0;width:260px;transform:translateX(-105%);transition:.25s;box-shadow:var(--shadow)}.sidebar.open{transform:none}.menu-toggle{display:block}.topbar{height:67px;padding:0 16px}.portal-content{padding:22px 15px 40px}.welcome{padding:22px;min-height:140px}.welcome-sun{font-size:3.5rem}.summary-grid{grid-template-columns:1fr}.connection-card{grid-column:auto}.quick-grid,.support-grid,.usage-stats,.info-cards{grid-template-columns:1fr 1fr}.panel-heading{align-items:flex-start;gap:12px}.panel-heading h2{font-size:1.9rem}.bill{grid-template-columns:1fr}.bill-actions{margin-top:5px}.service-detail{grid-template-columns:1fr}.mega-badge{padding:30px}.service-copy dl{grid-template-columns:1fr 1fr}.chart{height:230px;padding-left:4px;padding-right:4px;gap:8px}.mobile-nav{position:fixed;z-index:15;left:0;right:0;bottom:0;height:66px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(20,55,90,.08)}.mobile-nav button{display:grid;place-content:center;gap:1px;border:0;background:#fff;color:var(--muted);font-weight:900}.mobile-nav button span{font-size:.66rem}.mobile-nav button.active{color:var(--blue)}.data-grid{grid-template-columns:1fr}.online{padding:7px 9px;font-size:.7rem}}
@media(max-width:430px){.quick-grid,.support-grid,.usage-stats,.info-cards{grid-template-columns:1fr}.welcome-sun{display:none}.service-copy{padding:22px}.service-copy dl{grid-template-columns:1fr}.panel-heading .outline{max-width:120px}.login-form-panel h2{font-size:1.9rem}}
.staff-access{display:block;margin-top:25px;text-align:center;color:var(--blue);font-weight:900;font-size:.86rem}
.coupon-summary{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-radius:22px;background:linear-gradient(115deg,#063b86,#0879be);color:#fff;box-shadow:var(--shadow)}.coupon-summary>div{display:flex;align-items:center;gap:22px}.coupon-summary img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.18))}.coupon-summary small{color:#a6eefa}.coupon-summary strong{display:block;font-family:"Baloo 2";font-size:2.25rem}.coupon-summary p{margin:0;opacity:.82}.coupon-summary>span{font-size:7rem;color:var(--yellow);opacity:.22}.coupon-history{display:grid;gap:10px}.coupon-history article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:17px 20px;border:1px solid var(--line);border-radius:15px;background:#fff}.coupon-history p{margin:3px 0;color:var(--muted);font-size:.86rem}.coupon-history article>b{font-size:1.2rem;color:var(--green)}.coupon-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eaf8fc;color:var(--blue);font-size:1.2rem}.coupon-note{margin-top:18px;padding:20px 22px;border:1px solid #ffe17b;border-radius:16px;background:#fff9dc}.coupon-note p{color:#6f6340}.coupon-note a{color:var(--blue);font-weight:900}
@media(max-width:760px){.coupon-summary{padding:20px}.coupon-summary img{width:82px;height:82px}.coupon-summary>span{display:none}.coupon-summary strong{font-size:1.8rem}.coupon-history article{padding:14px}.coupon-history p{font-size:.78rem}}
.logout{margin-top:auto}