:root{--navy:#0b172a;--blue:#2563eb;--cyan:#14b8a6;--bg:#f3f7fc;--card:#fff;--text:#13233a;--muted:#68768a;--line:#dce5f0;--red:#dc2626;--amber:#d97706;--green:#059669;--shadow:0 18px 55px rgba(23,44,76,.09)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#f7faff,#eef4fb);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}.topbar{height:76px;padding:0 max(24px,calc((100% - 1280px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(11,23,42,.97);color:#fff;box-shadow:0 8px 30px rgba(6,16,32,.16)}a{text-decoration:none;color:inherit}.brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.02em}.brand span,.login-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 10px 24px rgba(37,99,235,.3)}.owner{display:flex;align-items:center;gap:20px}.owner>div{display:grid;text-align:right}.owner small{color:#9eb0c8}.owner strong{font-size:14px}.link-button{border:1px solid #41516a;border-radius:10px;background:transparent;color:#fff;padding:8px 12px;cursor:pointer}.page{max-width:1280px;margin:0 auto;padding:42px 24px 70px}.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.heading.compact{margin-bottom:18px}.heading h1{font-size:34px;margin:5px 0 8px;letter-spacing:-.04em}.heading p{margin:0;color:var(--muted)}.eyebrow{font-size:12px;color:var(--blue);font-weight:800;letter-spacing:.18em}.button{display:inline-flex;align-items:center;justify-content:center;min-height:43px;border:0;border-radius:12px;padding:0 17px;font-weight:750;font-size:14px;cursor:pointer}.button.primary{color:#fff;background:linear-gradient(135deg,var(--blue),#4f46e5);box-shadow:0 10px 22px rgba(37,99,235,.22)}.button.secondary{color:var(--text);background:#fff;border:1px solid var(--line)}.button.danger{color:#fff;background:var(--red)}.button.full{width:100%;margin-top:8px}.card{background:var(--card);border:1px solid rgba(210,221,235,.9);border-radius:20px;box-shadow:var(--shadow)}.alert{max-width:760px;margin:0 auto 22px;padding:13px 17px;border-radius:12px;font-weight:650}.alert.success{color:#076b4f;background:#dff8ef;border:1px solid #a8ead6}.alert.error{color:#a51d2d;background:#fff0f2;border:1px solid #ffc9d0}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.stat-card{padding:20px;border-radius:17px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(23,44,76,.05)}.stat-card span{display:block;color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:31px;margin-top:5px}.stat-card.active{border-top:3px solid var(--green)}.stat-card.expired{border-top:3px solid var(--amber)}.stat-card.suspended{border-top:3px solid var(--red)}.table-card{overflow:hidden}.filters{display:flex;gap:10px;padding:18px;border-bottom:1px solid var(--line)}input,select,textarea{width:100%;border:1px solid #ccd8e6;border-radius:11px;background:#fff;color:var(--text);font:inherit;padding:11px 12px;outline:none;transition:border .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{border-color:#6c98f7;box-shadow:0 0 0 3px rgba(37,99,235,.11)}.filters input{max-width:480px}.filters select{max-width:170px}.clear{align-self:center;color:var(--muted);font-size:13px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:930px}th{text-align:left;padding:13px 16px;color:#728097;background:#f7f9fc;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.08em}td{padding:16px;border-bottom:1px solid #e8eef5;vertical-align:middle;font-size:14px}td strong,td small{display:block}td small{margin-top:4px;color:var(--muted)}td code{display:inline-block;max-width:210px;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#374865;background:#f2f5fa;padding:6px 8px;border-radius:7px}.badge{display:inline-block;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:750}.badge.active{color:#067152;background:#dff8ef}.badge.expired{color:#a25306;background:#fff2d9}.badge.suspended{color:#a21c2b;background:#ffe4e8}.actions{display:flex;gap:6px}.actions form{display:inline}.icon-button{border:1px solid var(--line);border-radius:9px;background:#fff;padding:7px 9px;color:#506078;font-size:12px;cursor:pointer}.empty{text-align:center;color:var(--muted);padding:44px}.pagination{padding:18px}.back{color:var(--blue);font-size:14px;font-weight:700}.form-card{padding:28px;max-width:940px;margin:0 auto}.section-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin:0 0 20px;padding:0 0 12px}.section-title:not(:first-child){margin-top:30px}.section-title h2{font-size:18px;margin:0}.section-title span{font-size:12px;color:var(--muted)}.grid{display:grid;gap:17px}.grid.two{grid-template-columns:1fr 1fr}.grid label,.login-card label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#42516a}.grid .wide{grid-column:1/-1}.mono{font-family:Consolas,monospace}.form-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);margin-top:28px;padding-top:20px}.device-card{max-width:940px;margin:18px auto 0;padding:24px;display:grid;gap:16px}.device-card h2{margin:0 0 5px;font-size:18px}.device-card p{margin:0;color:var(--muted)}.device-list{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:14px;background:#f7f9fc;border-radius:12px}.device-list span{color:var(--muted);font-size:13px}.login-wrap{min-height:calc(100vh - 85px);display:grid;place-items:center}.login-card{width:min(430px,100%);padding:36px}.login-mark{margin:0 auto 15px;width:56px;height:56px;font-size:20px}.login-card h1{text-align:center;margin:0 0 7px;font-size:28px}.login-card>p{text-align:center;color:var(--muted);line-height:1.6;margin:0 0 26px}.login-card label{margin-bottom:15px}.login-card .check{display:flex;align-items:center}.login-card .check input{width:auto}.login-home{display:block;text-align:center;color:var(--muted);font-size:13px;margin-top:18px}
@media(max-width:850px){.page{padding:28px 16px}.heading{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr}.grid.two{grid-template-columns:1fr}.grid .wide{grid-column:auto}.filters{flex-wrap:wrap}.topbar{padding:0 16px}.owner>div{display:none}}
@media(max-width:520px){.stats-grid{grid-template-columns:1fr}.heading h1{font-size:28px}.form-card{padding:19px}.brand{font-size:16px}}
.icon-button.renew{color:#075f49;border-color:#9addc9;background:#e9faf4}.renewal-card{max-width:940px;margin:18px auto 0;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.renewal-card h2{margin:0 0 6px;font-size:18px}.renewal-card p{margin:0;color:var(--muted)}.renewal-card form{display:flex;gap:9px}.renewal-card select{min-width:110px}@media(max-width:650px){.renewal-card{align-items:stretch;flex-direction:column}.renewal-card form{flex-direction:column}}

@font-face{font-family:h1Font;src:url('../fonts/alk-tommaso-webfont.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:liFont;src:url('../fonts/bpg_boxo-boxo.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:h4Font;src:url('../fonts/bpg-glaho-web-caps-webfont.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
body{font-family:liFont,"Segoe UI",Arial,sans-serif}
.heading h1,.section-title h2,.device-card h2,.renewal-card h2{font-family:h1Font,liFont,sans-serif;font-weight:400;letter-spacing:.01em}
.heading h1{font-size:42px;line-height:1}
.button,.link-button,.icon-button,.back,.eyebrow,.grid label,.login-card label,th,.badge{font-family:liFont,sans-serif;font-weight:400}
.login-card h1{font-family:h1Font,liFont,sans-serif;font-size:36px;font-weight:400;letter-spacing:.02em}
@media(max-width:520px){.heading h1{font-size:36px}}
.portal-topbar{height:auto;min-height:76px;gap:20px;flex-wrap:wrap}.portal-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.portal-nav a{padding:9px 11px;border-radius:9px;color:#b8c5d8;font-size:13px}.portal-nav a:hover,.portal-nav a.active{color:#fff;background:#20324c}.portal-page{max-width:1440px}.portal-context{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:12px}.portal-context>div{display:grid;gap:5px}.portal-context strong{font-size:25px}.portal-context form{width:240px}.sync-strip{display:flex;align-items:center;gap:7px;min-height:40px;padding:9px 13px;margin-bottom:27px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);overflow:auto}.sync-strip b{color:var(--text);white-space:nowrap}.sync-strip small{white-space:nowrap;margin-right:15px}.sync-dot{width:9px;height:9px;border-radius:99px;background:var(--amber);box-shadow:0 0 0 3px #fff2d9}.sync-dot.online{background:var(--green);box-shadow:0 0 0 3px #dff8ef}.portal-stats{grid-template-columns:repeat(4,1fr)}.portal-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.portal-grid+.portal-grid{grid-template-columns:1.4fr 1fr}.portal-card{padding:20px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px}.portal-card .card-head{padding:0 0 18px}.card-head h2{margin:0;font-size:18px}.card-head a{color:var(--blue);font-size:13px}.cloud-chart{display:flex;align-items:end;height:220px;gap:4px;padding-top:10px;border-bottom:1px solid var(--line)}.cloud-chart i{display:block;flex:1;min-height:3px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));opacity:.88}.metric-list{display:grid;gap:2px}.metric-list>div{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}.metric-list span{color:var(--muted)}.inline-check{display:flex!important;align-items:center;gap:7px;white-space:nowrap}.inline-check input{width:auto}.portal-body table{min-width:720px}.portal-body .pagination nav>div:first-child{display:none}.portal-body .pagination nav>div:last-child{display:flex;justify-content:space-between;align-items:center;gap:10px}.portal-body .pagination svg{width:18px}.portal-body .pagination a,.portal-body .pagination span{font-size:12px}.grid label small{color:var(--muted);font-weight:400}
@media(max-width:1100px){.portal-topbar{padding:14px 20px}.portal-nav{order:3;flex-basis:100%;overflow:auto;justify-content:flex-start}.portal-grid,.portal-grid+.portal-grid{grid-template-columns:1fr}.portal-stats{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.portal-context{align-items:stretch;flex-direction:column}.portal-context form{width:100%}.portal-stats{grid-template-columns:1fr}.portal-topbar .owner strong{display:none}.cloud-chart{height:160px}}