:root{
  --md-primary:#0061a4; --md-on-primary:#fff; --md-primary-container:#d2e4ff; --md-on-primary-container:#001c38;
  --md-secondary:#535f70; --md-secondary-container:#d7e3f7; --md-on-secondary-container:#101c2b;
  --md-tertiary:#6b5778; --md-tertiary-container:#f2daff; --md-on-tertiary-container:#251431;
  --md-error:#ba1a1a; --md-error-container:#ffdad6; --md-on-error-container:#410002;
  --md-success:#146c2e; --md-success-container:#a5f2b6; --md-on-success-container:#072711;
  --md-warn:#7a5900; --md-warn-container:#ffdf9e; --md-on-warn-container:#261a00;
  --md-surface:#fdfcff; --md-on-surface:#1a1c1e; --md-surface-variant:#dfe2eb; --md-on-surface-variant:#42474e;
  --md-surface-container-lowest:#fff; --md-surface-container-low:#f3f4f9; --md-surface-container:#edeef4;
  --md-surface-container-high:#e7e8ee; --md-surface-container-highest:#e1e2e8;
  --md-outline:#73777f; --md-outline-variant:#c3c7cf;
  --md-scrim:rgba(0,0,0,.45);
  --radius-s:8px; --radius-m:16px; --radius-l:28px;
  --fiber-1:#00c2ff; --fiber-2:#0061a4; --fiber-3:#7c4dff;
}
[data-theme="dark"]{
  --md-primary:#a4c9ff; --md-on-primary:#00315d; --md-primary-container:#00497f; --md-on-primary-container:#d2e4ff;
  --md-secondary:#bcc7db; --md-secondary-container:#39485c; --md-on-secondary-container:#d7e3f7;
  --md-tertiary:#d7bde2; --md-tertiary-container:#523f5f; --md-on-tertiary-container:#f2daff;
  --md-error:#ffb4ab; --md-error-container:#93000a; --md-on-error-container:#ffdad6;
  --md-success:#7bda95; --md-success-container:#00522b; --md-on-success-container:#a5f2b6;
  --md-warn:#f5bd00; --md-warn-container:#544600; --md-on-warn-container:#ffdf9e;
  --md-surface:#0e1116; --md-on-surface:#e2e2e6; --md-surface-variant:#42474e; --md-on-surface-variant:#c3c7cf;
  --md-surface-container-lowest:#0a0d12; --md-surface-container-low:#14181f; --md-surface-container:#191e27;
  --md-surface-container-high:#222934; --md-surface-container-highest:#2d3542;
  --md-outline:#8e9199; --md-outline-variant:#42474e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--md-surface);color:var(--md-on-surface);min-height:100vh;-webkit-font-smoothing:antialiased}
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;user-select:none}
button{font-family:inherit}
a{color:var(--md-primary)}

/* ---------- Login ---------- */
#bg-fiber{position:fixed;inset:0;z-index:0;opacity:.9}
.login-wrap{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;gap:48px;flex-wrap:wrap}
.brand-hero{max-width:520px;color:#fff}
.brand-hero .logo-row{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.logo-badge{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--fiber-1),var(--fiber-3));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,194,255,.45)}
.logo-badge .material-symbols-rounded{font-size:32px;color:#fff}
.brand-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.05;margin:0 0 12px;font-weight:700;letter-spacing:-.5px}
.brand-hero h1 span{background:linear-gradient(90deg,#7dd7ff,#c9a7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-hero p{font-size:17px;line-height:1.6;opacity:.85;margin:0 0 24px}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap}
.hero-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);padding:9px 16px;border-radius:999px;font-size:14px}
.login-card{width:400px;max-width:100%;background:var(--md-surface-container-low);border-radius:var(--radius-l);padding:36px 32px 28px;box-shadow:0 24px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);color:var(--md-on-surface)}
.login-card h2{margin:0 0 4px;font-size:24px}
.login-card .sub{color:var(--md-on-surface-variant);font-size:14px;margin:0 0 24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--md-on-surface-variant);margin-bottom:6px}
.input-wrap{position:relative}
.input-wrap .material-symbols-rounded{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--md-on-surface-variant);font-size:22px}
.input-wrap input{width:100%;padding:14px 44px 14px 46px;border-radius:12px;border:1.5px solid var(--md-outline-variant);background:var(--md-surface-container-lowest);color:var(--md-on-surface);font-size:16px;outline:none;transition:border .15s, box-shadow .15s}
.input-wrap input:focus{border-color:var(--md-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 22%,transparent)}
.input-wrap .trail{left:auto;right:8px;cursor:pointer;background:none;border:none;color:var(--md-on-surface-variant);padding:6px;border-radius:8px}
.input-wrap .trail:hover{background:var(--md-surface-container-high)}
.login-err{display:none;align-items:center;gap:8px;background:var(--md-error-container);color:var(--md-on-error-container);border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.login-err.show{display:flex;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-weight:500;font-size:15px;border-radius:999px;padding:13px 26px;transition:filter .15s, transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--md-primary);color:var(--md-on-primary);box-shadow:0 4px 14px color-mix(in srgb,var(--md-primary) 40%,transparent)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.btn-tonal:hover{filter:brightness(.96)}
.btn-outline{background:transparent;color:var(--md-primary);border:1.5px solid var(--md-outline-variant)}
.btn-text{background:transparent;color:var(--md-primary);padding:9px 16px}
.btn-danger{background:var(--md-error);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:8px 18px;font-size:14px}
.demo-hint{margin-top:18px;background:var(--md-primary-container);color:var(--md-on-primary-container);border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:1.55}
.demo-hint code{background:rgba(0,0,0,.12);padding:1px 7px;border-radius:6px;font-weight:700}
[data-theme="dark"] .demo-hint code{background:rgba(255,255,255,.15)}
.login-foot{margin-top:16px;text-align:center;font-size:12.5px;color:var(--md-on-surface-variant)}

/* ---------- App shell ---------- */
#view-app{display:none;min-height:100vh}
#view-app.visible{display:block}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;padding:10px 20px;background:color-mix(in srgb,var(--md-surface) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--md-outline-variant)}
.topbar .brand-mini{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;margin-right:8px}
.topbar .brand-mini .logo-badge{width:34px;height:34px;border-radius:10px}
.topbar .brand-mini .logo-badge .material-symbols-rounded{font-size:21px}
.live-pill{display:flex;align-items:center;gap:7px;background:var(--md-success-container);color:var(--md-on-success-container);font-size:13px;font-weight:500;border-radius:999px;padding:6px 14px;white-space:nowrap}
.live-dot{width:8px;height:8px;border-radius:50%;background:#1db954;animation:pulse 1.6s infinite;flex-shrink:0}
@keyframes pulse{50%{opacity:.35}}
.topbar .spacer{flex:1}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:none;background:transparent;color:var(--md-on-surface-variant);cursor:pointer}
.icon-btn:hover{background:var(--md-surface-container-high)}
.icon-btn .badge-dot{position:absolute;top:7px;right:7px;min-width:18px;height:18px;border-radius:9px;background:var(--md-error);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.avatar-btn{width:38px;height:38px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--fiber-1),var(--fiber-3));color:#fff;font-weight:700;font-size:15px;cursor:pointer;margin-left:4px}
.layout{display:flex;align-items:stretch;max-width:1560px;margin:0 auto}
.nav-rail{width:264px;flex-shrink:0;padding:20px 12px;position:sticky;top:63px;height:calc(100vh - 63px);overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:14px;width:100%;border:none;background:transparent;color:var(--md-on-surface-variant);font-size:14.5px;font-weight:500;padding:12px 16px;border-radius:999px;cursor:pointer;margin-bottom:2px;text-align:left}
.nav-item .material-symbols-rounded{font-size:23px}
.nav-item:hover{background:var(--md-surface-container-high)}
.nav-item.active{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.nav-sect{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--md-on-surface-variant);padding:18px 16px 6px;opacity:.75}
.nav-card{margin:16px 8px 0;background:linear-gradient(135deg,#0b3b66,#123a6d 45%,#2b1a5e);color:#fff;border-radius:20px;padding:18px;position:relative;overflow:hidden}
.nav-card::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(0,194,255,.5),transparent 70%);top:-60px;right:-50px}
.nav-card h4{margin:0 0 6px;font-size:15px;position:relative}
.nav-card p{margin:0 0 12px;font-size:13px;opacity:.85;line-height:1.5;position:relative}
.nav-card button{background:#fff;color:#0b3b66;border:none;border-radius:999px;padding:9px 18px;font-weight:700;font-size:13.5px;cursor:pointer;position:relative}
main{flex:1;min-width:0;padding:24px 28px 90px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{margin:0;font-size:28px;letter-spacing:-.3px}
.page-head p{margin:4px 0 0;color:var(--md-on-surface-variant);font-size:14.5px}
.route{display:none}
.route.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
.grid{display:grid;gap:16px}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--md-surface-container-low);border:1px solid var(--md-outline-variant);border-radius:24px;padding:22px;position:relative;overflow:hidden}
.card h3{margin:0 0 4px;font-size:17px}
.card .card-sub{margin:0 0 14px;font-size:13.5px;color:var(--md-on-surface-variant)}
.kpi-card{display:flex;flex-direction:column;gap:6px}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.kpi-icon .material-symbols-rounded{font-size:25px}
.kpi-val{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.kpi-val small{font-size:14px;font-weight:500;color:var(--md-on-surface-variant)}
.kpi-label{font-size:13.5px;color:var(--md-on-surface-variant)}
.kpi-delta{font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px}
.kpi-delta.up{color:var(--md-success)}
.kpi-delta.down{color:var(--md-error)}
.status-hero{background:linear-gradient(120deg,#06283f,#0b3b66 55%,#2b1a5e);color:#fff;border:none;overflow:hidden}
.status-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 85% -20%,rgba(0,194,255,.35),transparent),radial-gradient(400px 200px at 10% 120%,rgba(124,77,255,.3),transparent)}
.status-hero>*{position:relative}
.status-hero .big-speed{font-size:clamp(40px,5vw,58px);font-weight:700;letter-spacing:-1px}
.status-hero .big-speed small{font-size:16px;font-weight:500;opacity:.75}
.conn-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.spark-box{height:120px;position:relative}
.spark-box canvas{max-width:100%}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--md-on-surface-variant);padding:10px 12px;border-bottom:1.5px solid var(--md-outline-variant)}
table.tbl td{padding:12px;border-bottom:1px solid var(--md-outline-variant)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr{cursor:pointer}
table.tbl tbody tr:hover td{background:var(--md-surface-container-high)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 12px;white-space:nowrap}
.chip.ok{background:var(--md-success-container);color:var(--md-on-success-container)}
.chip.warn{background:var(--md-warn-container);color:var(--md-on-warn-container)}
.chip.err{background:var(--md-error-container);color:var(--md-on-error-container)}
.chip.info{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.chip.neutral{background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed var(--md-outline-variant);align-items:flex-start}
.timeline li:last-child{border:none}
.tl-dot{width:36px;height:36px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center}
.tl-body b{display:block;font-size:14px}
.tl-body span{font-size:13px;color:var(--md-on-surface-variant)}
.tl-time{margin-left:auto;font-size:12px;color:var(--md-on-surface-variant);white-space:nowrap}
.tariff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tariff{border:2px solid var(--md-outline-variant);border-radius:20px;padding:20px;background:var(--md-surface-container-lowest);position:relative}
.tariff.current{border-color:var(--md-primary);box-shadow:0 6px 24px color-mix(in srgb,var(--md-primary) 25%,transparent)}
.tariff .flag{position:absolute;top:-13px;left:18px;background:var(--md-primary);color:var(--md-on-primary);font-size:12px;font-weight:700;border-radius:999px;padding:3px 13px}
.tariff h4{margin:2px 0;font-size:19px}
.tariff .price{font-size:30px;font-weight:700;margin:8px 0 2px}
.tariff .price small{font-size:13px;font-weight:400;color:var(--md-on-surface-variant)}
.tariff ul{list-style:none;margin:12px 0 16px;padding:0;font-size:13.5px}
.tariff ul li{display:flex;gap:8px;align-items:center;padding:4px 0;color:var(--md-on-surface-variant)}
.tariff ul .material-symbols-rounded{font-size:18px;color:var(--md-success)}
.device-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--md-outline-variant)}
.device-row:last-child{border:none}
.device-ico{width:42px;height:42px;border-radius:13px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.switch{position:relative;width:48px;height:28px;flex-shrink:0;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--md-surface-container-highest);border:1.5px solid var(--md-outline);border-radius:999px;cursor:pointer;transition:.2s}
.switch .sl::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--md-outline);top:3px;left:4px;transition:.2s}
.switch input:checked+.sl{background:var(--md-primary);border-color:var(--md-primary)}
.switch input:checked+.sl::before{transform:translateX(19px);background:#fff}
.faq{border-bottom:1px solid var(--md-outline-variant)}
.faq button.q{width:100%;background:none;border:none;color:var(--md-on-surface);font-size:15px;font-weight:500;text-align:left;padding:15px 4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq .a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14px;color:var(--md-on-surface-variant);line-height:1.6}
.faq.open .a{max-height:220px;padding-bottom:14px}
.chat-box{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding:6px 2px;margin-bottom:12px}
.msg{max-width:82%;padding:11px 15px;border-radius:18px;font-size:14px;line-height:1.5}
.msg.bot{background:var(--md-surface-container-high);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--md-primary);color:var(--md-on-primary);border-bottom-right-radius:6px;align-self:flex-end}
.chat-input{display:flex;gap:8px}
.chat-input input{flex:1;padding:12px 16px;border-radius:999px;border:1.5px solid var(--md-outline-variant);background:var(--md-surface-container-lowest);color:var(--md-on-surface);font-size:14.5px;outline:none}
.chat-input input:focus{border-color:var(--md-primary)}
.gauge-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0}
.gauge-num{font-size:52px;font-weight:700;letter-spacing:-1px;line-height:1}
.gauge-num small{font-size:16px;color:var(--md-on-surface-variant);font-weight:500}
.gauge-bar{width:100%;max-width:420px;height:16px;border-radius:999px;background:var(--md-surface-container-highest);margin:16px 0 8px;overflow:hidden}
.gauge-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--fiber-1),var(--fiber-3));transition:width .2s}
.speed-meta{display:flex;gap:26px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.speed-meta div{text-align:center}
.speed-meta b{display:block;font-size:21px}
.speed-meta span{font-size:12.5px;color:var(--md-on-surface-variant)}
textarea,select.input,input.input{width:100%;padding:13px 15px;border-radius:12px;border:1.5px solid var(--md-outline-variant);background:var(--md-surface-container-lowest);color:var(--md-on-surface);font-size:15px;outline:none;font-family:inherit}
textarea:focus,select.input:focus,input.input:focus{border-color:var(--md-primary)}
textarea{min-height:96px;resize:vertical}
.menu{position:fixed;z-index:200;background:var(--md-surface-container-high);border:1px solid var(--md-outline-variant);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.3);min-width:260px;max-width:340px;padding:8px;display:none}
.menu.show{display:block;animation:fadeUp .18s}
.menu button{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;color:var(--md-on-surface);font-size:14px;padding:11px 12px;border-radius:10px;cursor:pointer;text-align:left}
.menu button:hover{background:var(--md-surface-container-highest)}
.menu .m-head{padding:10px 12px;border-bottom:1px solid var(--md-outline-variant);margin-bottom:6px}
.menu .m-head b{display:block;font-size:14.5px}
.menu .m-head span{font-size:12.5px;color:var(--md-on-surface-variant)}
.menu .m-item small{display:block;font-size:12px;color:var(--md-on-surface-variant)}
.dialog-back{position:fixed;inset:0;z-index:300;background:var(--md-scrim);display:none;align-items:center;justify-content:center;padding:20px}
.dialog-back.show{display:flex}
.dialog{background:var(--md-surface-container-high);border-radius:28px;padding:28px;width:560px;max-width:100%;max-height:88vh;overflow-y:auto;animation:fadeUp .22s}
.dialog h3{margin:0 0 6px;font-size:21px}
.dialog .d-sub{font-size:14px;color:var(--md-on-surface-variant);margin:0 0 18px}
.dialog .d-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}
#snackbar{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);z-index:400;background:#22262e;color:#fff;border-radius:14px;padding:14px 20px;font-size:14.5px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 34px rgba(0,0,0,.45);transition:transform .3s;max-width:min(520px,92vw)}
[data-theme="dark"] #snackbar{background:#e8eaf0;color:#14181f}
#snackbar.show{transform:translateX(-50%) translateY(0)}
.prog{height:8px;border-radius:99px;background:var(--md-surface-container-highest);overflow:hidden;margin:14px 0}
.prog>div{height:100%;width:0;background:linear-gradient(90deg,var(--fiber-1),var(--fiber-3));transition:width .4s;border-radius:99px}
.steps{list-style:none;margin:0;padding:0;font-size:14px}
.steps li{display:flex;gap:10px;align-items:center;padding:7px 0;color:var(--md-on-surface-variant)}
.steps li.done{color:var(--md-on-surface)}
.steps li.done .material-symbols-rounded{color:var(--md-success)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--md-outline-variant);font-size:14.5px;align-items:center}
.kv:last-child{border:none}
.kv span{color:var(--md-on-surface-variant)}
.kv b{text-align:right;font-weight:600}
.doc-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--md-outline-variant);font-size:14px}
.doc-row:last-child{border:none}
.empty{padding:26px;text-align:center;color:var(--md-on-surface-variant);font-size:14px}
.bottomnav{display:none}
.invoice-print{font-family:Roboto,Arial,sans-serif;color:#111;max-width:640px;margin:0 auto}
.invoice-print h2{margin:0 0 4px}
.invoice-print table{width:100%;border-collapse:collapse;margin:16px 0}
.invoice-print th,.invoice-print td{text-align:left;padding:8px;border-bottom:1px solid #ccc;font-size:14px}
@media(max-width:960px){
  .nav-rail{display:none}
  main{padding:18px 16px 110px}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:color-mix(in srgb,var(--md-surface-container-low) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--md-outline-variant);padding:6px 4px calc(8px + env(safe-area-inset-bottom))}
  .bottomnav button{flex:1;background:none;border:none;color:var(--md-on-surface-variant);font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;cursor:pointer;border-radius:12px}
  .bottomnav button.active{color:var(--md-primary)}
  .login-wrap{gap:20px}
  .brand-hero{text-align:center}
  .brand-hero .logo-row,.hero-chips{justify-content:center}
  .live-pill{display:none}
}
@media print{
  body>*{display:none !important}
  #print-area{display:block !important}
}