/* Account overview UI 15 — faithful implementation of the approved blue-white control panel. */
.route-app{
  --concept-ink:#101b31;
  --concept-muted:#5d7085;
  --concept-blue:#3f73ff;
  --concept-green:#119875;
  --concept-line:rgba(85,112,137,.16);
  background:#edf4f8;
  color:var(--concept-ink);
}
.route-app:before{
  opacity:1;
  background:
    radial-gradient(ellipse at 58% -8%,rgba(255,255,255,.98) 0 17%,transparent 48%),
    radial-gradient(ellipse at 78% 16%,rgba(185,224,255,.44),transparent 38%),
    radial-gradient(ellipse at 44% 42%,rgba(205,235,255,.38),transparent 42%),
    radial-gradient(ellipse at 92% 88%,rgba(198,220,255,.34),transparent 38%),
    linear-gradient(135deg,#f8fbfd 0%,#eaf3f8 44%,#f8fbfc 76%,#e6f0f5 100%);
}
.route-app #prismCanvas{opacity:.055;filter:hue-rotate(168deg) saturate(1.2)}
.route-app .app-shell{grid-template-columns:216px minmax(0,1fr);gap:24px;max-width:1600px;min-height:100dvh;margin:0 auto;padding:30px}
.route-app .rail{top:30px;height:calc(100dvh - 60px);padding:18px 12px 16px;border:1px solid rgba(255,255,255,.92);border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(228,239,246,.58));box-shadow:0 22px 60px rgba(73,103,125,.10),inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%)}
.route-app .brand{width:100%;height:70px;padding:0 14px;display:flex;align-items:center;justify-content:flex-start}
.route-app .brand-copy{gap:9px}.route-app .brand-copy strong{color:#111c31;font-size:20px;font-weight:820;letter-spacing:.035em}.route-app .brand-copy small{color:#53697f;font-size:9px;font-weight:820;letter-spacing:.22em}
.route-app .rail-nav{margin-top:28px}.route-app .nav-group-label{margin:17px 13px 7px;color:#8a9aaa;font-size:9px;letter-spacing:.12em}.route-app .nav-item{min-height:48px;padding:0 14px;border-radius:13px;color:#516578;font-size:12px}.route-app .nav-item svg{width:18px;height:18px}.route-app .nav-item.active{color:#0f1a2e;font-weight:760}.route-app .nav-lens{border:1px solid rgba(255,255,255,.94);border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(216,231,243,.72));box-shadow:0 8px 22px rgba(62,98,128,.10),inset 0 1px 0 #fff}
.route-app .main{min-width:0;padding:0 0 32px}.route-app .topbar{min-height:70px;margin:0 0 4px;align-items:flex-start}.route-app .top-actions{padding:3px 0 0}.route-app .account-profile{min-height:56px;padding:6px 15px 6px 7px;border-radius:18px;background:rgba(255,255,255,.68);box-shadow:0 12px 30px rgba(71,102,127,.09),inset 0 1px 0 #fff}.route-app .account-profile>span:first-child{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#72e5ff,#8d74ff);color:#12203b}.route-app .logout-button{min-height:52px;padding:0 17px;border-radius:17px;background:rgba(255,255,255,.62);font-weight:700}
.route-app[data-active-view="overview"] .topbar{min-height:70px;margin-bottom:0}
.overview-redesign{max-width:none;padding:0 0 26px}.overview-welcome{min-height:76px;margin:0 14px 15px;align-items:flex-start}.overview-welcome h2{color:#101a31;font-size:clamp(34px,2.7vw,46px);font-weight:800;letter-spacing:-.045em}.overview-welcome p{margin-top:10px;color:#526a80;font-size:13px;font-weight:530}
.overview-grid{gap:14px}.overview-grid>article{border:1px solid rgba(255,255,255,.98);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.83),rgba(225,237,246,.64));box-shadow:0 22px 60px rgba(71,104,128,.10),inset 0 1px 0 #fff;backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
.overview-usage{padding:26px 28px 22px}.overview-usage-content{grid-template-columns:260px 300px minmax(360px,1fr);gap:0 24px}.overview-ring-block>h3{display:none}.overview-ring{width:248px}.overview-ring:before{inset:27px;background:radial-gradient(circle at 37% 27%,#fff 0 8%,#f1f5ff 42%,#e0e7fb 72%,#d3ddf1 100%);box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(86,108,145,.12)}.overview-ring circle{stroke-width:6}.overview-ring-track{stroke:rgba(75,105,128,.11)}.overview-ring-accent{stroke:#c7eedf;stroke-width:7}.overview-ring-value{stroke:#4b7d78;filter:drop-shadow(0 4px 8px rgba(59,124,120,.16))}.overview-ring strong{color:#101a31;font-size:54px;letter-spacing:-.06em}.overview-ring small,.overview-ring span{color:#607386;font-size:12px}
.overview-usage-facts{border:0;border-radius:0;background:transparent;gap:10px;overflow:visible}.overview-usage-facts>div{min-height:58px;padding:0 17px;border:1px solid rgba(80,106,131,.13)!important;border-radius:13px;background:rgba(255,255,255,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.overview-usage-facts dt{color:#596d80;font-size:12px;font-weight:590}.overview-usage-facts dd{color:#101a31;font-size:15px;font-weight:800}
.overview-chart-panel{padding-left:28px;border-left:1px solid rgba(79,106,128,.15)}.overview-chart-head h3{color:#101a31;font-size:23px;font-weight:800}.overview-chart-live{padding:6px 10px;border-color:rgba(69,102,124,.1);background:rgba(255,255,255,.7);color:#5b6f80}.overview-chart-live i{background:#35c88b;box-shadow:none}.overview-chart-legend{color:#4b6074;font-size:10px}.overview-chart-legend .download{background:#476fff}.overview-chart-legend .upload{background:#109976}.overview-chart-grid{background-image:linear-gradient(to bottom,rgba(70,99,123,.11) 1px,transparent 1px),linear-gradient(to right,rgba(70,99,123,.075) 1px,transparent 1px)}.overview-y-axis,.overview-chart-axis{color:#667b8d!important}.overview-mini-chart .download-line{stroke:#4c70ff;stroke-width:2.6}.overview-mini-chart .upload-line{stroke:#119978;stroke-width:2.6}.overview-mini-chart .download-area{fill:rgba(76,112,255,.11)}.overview-mini-chart .upload-area{fill:rgba(17,153,120,.065)}[data-overview-chart-dots] circle.download{stroke:#4c70ff}[data-overview-chart-dots] circle.upload{stroke:#119978}.overview-chart-note{margin-top:4px;color:#647789}
.overview-entitlement-strip{min-height:82px!important;padding:0 28px!important;grid-template-columns:minmax(300px,1.25fr) repeat(3,minmax(170px,.75fr))}.entitlement-plan{gap:15px}.entitlement-plan>div{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:start;align-items:center;gap:2px 12px}.entitlement-plan h3{grid-column:1;color:#111c31;font-size:19px;font-weight:800}.entitlement-plan p{grid-column:1;margin:0;color:#7a8a98;font-size:9px}.entitlement-plan .active-chip{grid-column:2;grid-row:1/3}.entitlement-crown{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff8dc,#ffe59a);color:#ae7612}.entitlement-stat{border-left-color:rgba(76,102,124,.16);color:#52687a}.entitlement-stat .ui-icon{color:#3f5970}.entitlement-stat b{color:#111c31}
.overview-connect{padding:22px 28px}.overview-connect-title{gap:14px}.overview-connect-icon{width:44px;height:44px;background:rgba(255,255,255,.74)}.overview-connect .overview-card-head h3{color:#101a31;font-size:21px;font-weight:800}.overview-connect .overview-card-head p{color:#61778a;font-size:11px}.overview-subscription-row{min-height:56px;margin-top:14px;border-color:rgba(80,106,131,.13)!important;border-radius:13px!important;background:rgba(255,255,255,.64)!important}.overview-subscription-row code{color:#52667c}.overview-connect-actions{margin-top:10px}.overview-connect-actions>button{min-height:60px;border-color:rgba(80,106,131,.12);border-radius:13px;background:rgba(255,255,255,.48);color:#14213a}.overview-connect-actions span b{font-size:12px;font-weight:760}.overview-connect-actions span small{color:#708396}

@media(max-width:1280px){
  .route-app .app-shell{grid-template-columns:190px minmax(0,1fr);gap:18px;padding:20px}.route-app .rail{top:20px;height:calc(100dvh - 40px)}
  .overview-usage-content{grid-template-columns:220px 238px minmax(310px,1fr);gap:0 18px}.overview-ring{width:210px}.overview-chart-panel{padding-left:18px}
  .overview-entitlement-strip{grid-template-columns:minmax(250px,1.1fr) repeat(3,minmax(150px,.72fr))}
}
@media(max-width:900px){
  .route-app .app-shell{display:block;padding:12px 12px calc(112px + env(safe-area-inset-bottom))}.route-app .rail{display:none!important}.route-app .main{padding:0}
  .overview-welcome{min-height:70px;margin:0 6px 14px}.overview-welcome h2{font-size:34px}.overview-welcome p{font-size:12px}
  .overview-usage-content{grid-template-columns:minmax(0,42%) minmax(0,58%);grid-template-rows:auto auto auto;gap:16px 8px}.overview-ring{width:min(100%,220px)}
  .overview-chart-panel{padding:42px 0 0;border-left:0}.overview-usage-facts{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(80,106,131,.13);border-radius:15px;overflow:hidden}.overview-usage-facts>div{display:block;min-height:72px;padding:14px 8px;border:0!important;border-right:1px solid rgba(80,106,131,.13)!important;border-radius:0;text-align:center}.overview-usage-facts>div:last-child{border-right:0!important}
  .overview-chart-note{grid-column:1/-1;grid-row:3}.overview-entitlement-strip{grid-template-columns:1fr 1fr 1fr}.entitlement-plan{grid-column:1/-1}
}
@media(max-width:560px){
  .route-app[data-active-view="overview"] .topbar{min-height:58px}.route-app .account-profile{min-height:46px}.route-app .logout-button{min-height:44px}.overview-welcome{min-height:74px}.overview-welcome h2{font-size:31px}.overview-welcome p{max-width:270px;line-height:1.5}
  .overview-grid>article{border-radius:24px}.overview-usage{padding:20px 15px 17px}.overview-usage-content{grid-template-columns:minmax(0,43%) minmax(0,57%);gap:14px 4px}.overview-ring{max-width:176px}.overview-ring strong{font-size:40px}.overview-chart-head h3{font-size:16px}.overview-chart-legend{font-size:9px}.overview-entitlement-strip{min-height:160px!important;padding:17px 15px!important}.overview-connect{padding:19px 15px}.overview-connect-actions>button{min-height:68px}
}

/* UI 13 — component-for-component reconstruction of the selected reference. */
.route-app:before{
  background:
    radial-gradient(ellipse at 54% -18%,rgba(255,255,255,.98) 0 19%,transparent 45%),
    radial-gradient(ellipse at 67% 8%,rgba(176,219,255,.58) 0 5%,rgba(219,239,255,.34) 22%,transparent 48%),
    radial-gradient(ellipse at 40% 32%,rgba(205,235,255,.48),transparent 37%),
    radial-gradient(ellipse at 98% 82%,rgba(192,220,255,.44),transparent 43%),
    linear-gradient(132deg,#f7fbfe 0%,#eaf4fa 42%,#f7fbfd 70%,#e3eff7 100%);
}
.route-app:after{content:"";position:fixed;z-index:0;left:29%;top:-31%;width:62vw;height:72vw;max-height:880px;border-radius:48%;border:1px solid rgba(255,255,255,.66);background:radial-gradient(ellipse at 30% 78%,rgba(121,191,255,.18),transparent 42%),linear-gradient(130deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.48) 49%,rgba(183,224,255,.15) 57%,transparent 66%);filter:blur(.2px);transform:rotate(-18deg);pointer-events:none}
.route-app .app-shell{position:relative;z-index:1;grid-template-columns:216px minmax(0,1fr);gap:26px;width:100%;max-width:none;margin:0;padding:32px 30px}
.route-app .rail{top:32px;height:calc(100dvh - 64px)}
.route-app .brand-copy strong{font-size:20px}.route-app .brand-copy small{font-size:9px}
.route-app .topbar{min-height:60px}.route-app[data-active-view="overview"] .topbar{min-height:60px}
.route-app .account-profile{min-height:54px}.route-app .logout-button{min-height:50px}
.overview-redesign{max-width:none}.overview-welcome{min-height:73px;margin:0 14px 14px}.overview-welcome h2{font-size:40px}.overview-welcome p{margin-top:9px;font-size:13px}
.overview-grid{grid-template-columns:minmax(430px,.9fr) minmax(540px,1.1fr);gap:12px}
.overview-grid>article{border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(229,240,248,.65));box-shadow:0 18px 46px rgba(68,104,132,.09),inset 0 1px 0 #fff}
.overview-usage{min-height:340px;padding:20px 20px 18px}
.overview-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.overview-card-title h3{margin:0;color:#132239;font-size:18px;font-weight:800}.overview-card-title>span{color:#70849a;font-size:9px;font-weight:650;white-space:nowrap}.overview-card-title time{font:inherit}
.overview-usage-content{grid-template-columns:minmax(205px,.95fr) minmax(190px,1.05fr);grid-template-rows:1fr auto;gap:8px 12px;margin-top:6px}
.overview-ring{width:230px}.overview-ring:before{inset:29px;background:radial-gradient(circle at 35% 25%,#fff 0 8%,#eef5ff 39%,#dfe9ff 70%,#d1e1f2 100%)}
.overview-ring-track{stroke:rgba(63,107,153,.09)}.overview-ring-accent{stroke:#69d8eb;stroke-width:7}.overview-ring-value{stroke:#5797ff;filter:drop-shadow(0 4px 8px rgba(56,139,255,.2))}.overview-ring strong{font-size:45px}.overview-ring small{font-size:11px}
.overview-usage-facts{display:grid;gap:4px;border:0;border-radius:0;background:transparent;overflow:visible}
.overview-usage-facts>div{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;justify-content:start;align-content:center;gap:3px 11px;min-height:64px;padding:8px 5px;border:0!important;background:transparent}
.overview-usage-facts .usage-fact-icon{grid-row:1/3}.overview-usage-facts dt{grid-column:2;font-size:11px}.overview-usage-facts dd{grid-column:2;margin:0;font-size:19px;line-height:1}
.usage-fact-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px}.usage-fact-icon .ui-icon{width:20px;height:20px}.usage-fact-used{background:#e5f2ff;color:#2d86ff}.usage-fact-used .ui-icon{transform:rotate(90deg)}.usage-fact-average{background:#eeeaff;color:#765df1}.usage-fact-reset{background:#dcf8eb;color:#17a76d}
.overview-chart-note{grid-column:1/-1;margin:0 8px;font-size:9px}
.overview-chart-card{min-height:340px;padding:20px 20px 17px}.overview-chart-panel{height:100%;padding:0;border:0}.overview-chart-head h3{font-size:18px}.overview-chart-live{padding:5px 8px;font-size:9px;background:transparent;border:0}.overview-chart-legend{margin-top:8px}
.overview-mini-chart{min-height:225px;margin-top:3px;padding:0 0 22px 42px}.overview-mini-chart>svg{height:210px}.overview-chart-grid{left:42px;height:210px;background-size:100% 33.333%,12.5% 100%}.overview-y-axis{height:218px}.overview-chart-axis{left:42px}.overview-mini-chart .chart-line{stroke-width:2}.overview-mini-chart [data-overview-chart-dots] circle{r:3;stroke-width:1.5}
.overview-chart-empty{position:absolute;z-index:4;inset:48px 12px 31px 42px;display:grid;place-content:center;gap:6px;text-align:center;color:#52697f;pointer-events:none}.overview-chart-empty strong{font-size:14px;font-weight:780;color:#263a52}.overview-chart-empty span{font-size:10px;color:#768a9b}.overview-chart-empty[hidden]{display:none}.overview-mini-chart:has(.overview-chart-empty:not([hidden]))>svg{opacity:0}.overview-mini-chart:has(.overview-chart-empty:not([hidden])) .overview-chart-grid{opacity:.42}
.overview-entitlement-strip{grid-column:1/-1;min-height:88px!important;padding:0 26px!important;grid-template-columns:minmax(300px,1.15fr) repeat(3,minmax(190px,.76fr))}
.entitlement-plan{gap:14px}.entitlement-plan>div{display:block}.entitlement-plan h3{font-size:17px}.entitlement-plan p{margin-top:5px;color:#71849a;font-size:9px}.entitlement-crown{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#f2efff,#e4ddff);color:#765df1}
.entitlement-stat{justify-content:flex-start;gap:11px;padding-left:26px}.entitlement-stat-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#edf1ff;color:#3450b7}.entitlement-stat-icon .ui-icon{width:20px;height:20px}.entitlement-status .entitlement-stat-icon{background:#dcf8eb;color:#19b879}.entitlement-stat>span:last-child{display:grid;gap:3px}.entitlement-stat small{color:#61778c;font-size:9px}.entitlement-stat b{margin:0;font-size:12px}
.overview-connect{grid-column:1/-1;padding:18px 20px 17px}.overview-connect-icon{width:40px;height:40px}.overview-connect .overview-card-head h3{font-size:18px}.overview-connect .overview-card-head p{font-size:9px}.overview-subscription-row{min-height:52px;margin-top:12px;border-radius:11px!important}.overview-connect-actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.overview-connect-actions>button{min-height:52px;border-radius:11px}.overview-connect-actions span b{font-size:11px}.overview-connect-actions span small{font-size:8px}

@media(max-width:1280px){
  .route-app .app-shell{grid-template-columns:190px minmax(0,1fr);gap:18px;padding:20px}.route-app .rail{top:20px;height:calc(100dvh - 40px)}
  .overview-grid{grid-template-columns:minmax(380px,.9fr) minmax(450px,1.1fr)}.overview-usage-content{grid-template-columns:minmax(180px,.9fr) minmax(170px,1.1fr)}.overview-ring{width:205px}.overview-entitlement-strip{grid-template-columns:minmax(245px,1.05fr) repeat(3,minmax(155px,.75fr))}.entitlement-stat{padding-left:17px}
}
@media(max-width:900px){
  .route-app:after{left:-20%;top:-10%;width:140vw;height:100vw}.overview-grid{grid-template-columns:1fr}.overview-usage,.overview-chart-card,.overview-entitlement-strip,.overview-connect{grid-column:1}
  .overview-usage{min-height:0}.overview-usage-content{grid-template-columns:minmax(0,44%) minmax(0,56%);grid-template-rows:auto auto}.overview-chart-note{grid-row:2}.overview-chart-card{min-height:330px}
  .overview-entitlement-strip{grid-template-columns:1fr 1fr 1fr}.entitlement-plan{grid-column:1/-1}.entitlement-stat{padding-left:0}
}
@media(max-width:560px){
  .overview-welcome{margin:0 6px 14px}.overview-welcome h2{font-size:31px}.overview-card-title h3{font-size:16px}.overview-card-title>span{font-size:8px}
  .overview-usage{padding:18px 14px}.overview-usage-content{grid-template-columns:minmax(0,43%) minmax(0,57%);gap:7px 2px}.overview-ring{width:100%;max-width:174px}.overview-ring:before{inset:22px}.overview-ring strong{font-size:37px}
  .overview-usage-facts>div{grid-template-columns:34px minmax(0,1fr);gap:7px;min-height:54px;padding:5px 2px}.usage-fact-icon{width:32px;height:32px;border-radius:10px}.usage-fact-icon .ui-icon{width:16px;height:16px}.overview-usage-facts dt{font-size:9px}.overview-usage-facts dd{font-size:14px}.overview-chart-note{margin:4px 2px 0}
  .overview-chart-card{min-height:290px;padding:18px 14px}.overview-mini-chart{min-height:210px;padding-left:32px}.overview-mini-chart>svg{height:192px}.overview-chart-grid{left:32px;height:192px}.overview-y-axis{height:200px}.overview-chart-axis{left:32px}
  .overview-entitlement-strip{min-height:168px!important;padding:17px 14px!important}.entitlement-stat{border-left:1px solid rgba(53,75,84,.11)}.entitlement-status{border-left:0}.entitlement-stat-icon{width:34px;height:34px}
  .overview-connect{padding:18px 14px}
}

/* UI 16: account-only responsive refinement. Landing animation remains untouched. */
.route-app {font-variant-numeric:tabular-nums;--portal-text:#17283f;--portal-muted:#536b81}
.route-app .app-shell{max-width:1720px;margin-inline:auto;padding:24px;gap:24px;grid-template-columns:200px minmax(0,1fr)}
.route-app .rail{top:24px;height:calc(100dvh - 48px);min-width:0;overflow:auto;scrollbar-width:thin}
.route-app .brand{height:64px;flex:none;padding-inline:12px}
.route-app .brand-copy strong{font-size:21px}
.route-app .rail-nav{margin-top:12px;flex:none}
.route-app .nav-item{min-height:48px;font-size:13px}
.route-app .nav-item[hidden]{display:none!important}
.route-app .nav-group-label{font-size:11px;margin-top:22px}
.route-app .topbar,.route-app[data-active-view="overview"] .topbar{min-height:64px;margin:0 0 12px;padding:0;align-items:center}
.route-app .top-actions{padding:0}
.route-app .overview-welcome{margin:4px 0 24px;min-height:0}
.route-app .overview-welcome h2{font-size:32px;line-height:1.3;letter-spacing:-.035em;overflow-wrap:anywhere}
.route-app .overview-welcome p{margin-top:8px;font-size:14px;line-height:1.6}
.route-app .overview-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px}
.route-app .overview-grid>article{min-width:0;border-radius:22px}
.route-app .overview-usage,.route-app .overview-chart-card{padding:24px;min-height:326px}
.route-app .overview-card-title{align-items:baseline;flex-wrap:wrap;gap:8px}
.route-app .overview-card-title h3,.route-app .overview-chart-head h3{font-size:18px;line-height:1.5}
.route-app .overview-card-title>span{font-size:11px;white-space:normal}
.route-app .overview-usage-content{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px;margin-top:14px;align-items:center}
.route-app .overview-ring{width:min(100%,224px);margin:auto;aspect-ratio:1}
.route-app .overview-ring strong{font-size:clamp(30px,3.1vw,48px)}
.route-app .overview-ring small,.route-app .overview-ring span{font-size:12px}
.route-app .overview-usage-facts{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;border:0;overflow:visible}
.route-app .overview-usage-facts>div{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;text-align:left;padding:6px 0;gap:4px 10px;min-height:58px;border:0!important;border-radius:0;background:none}
.route-app .usage-fact-icon{width:36px;height:36px;grid-column:1;grid-row:1/3}
.route-app .overview-usage-facts dt{font-size:12px;line-height:1.4;grid-column:2}
.route-app .overview-usage-facts dd{font-size:20px;line-height:1.2;grid-column:2;margin:0;overflow-wrap:anywhere}
.route-app .overview-chart-note{grid-column:1/-1;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;font-size:11px;line-height:1.6}
.route-app .overview-chart-note>.ui-icon{flex:none}
.route-app .chart-details{margin-left:auto;padding:8px 0 8px 8px;min-height:44px;border:0;background:none;color:#315bbd;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.route-app .overview-chart-panel{position:relative;padding:0;border:0;opacity:1}
.route-app .overview-chart-head{position:static;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.route-app .overview-chart-live{display:inline-flex;padding:0;font-size:11px;gap:6px}
.route-app .overview-chart-live time{display:none}
.route-app .overview-chart-legend{position:static;display:flex;justify-content:flex-end;margin:10px 0 12px;gap:16px;font-size:12px}
.route-app .overview-mini-chart{padding:0 0 28px 48px;margin:0;min-height:222px}
.route-app .overview-mini-chart>svg{display:block;width:100%;height:194px}
.route-app .overview-chart-grid{left:48px;right:0;top:0;height:194px}
.route-app .overview-y-axis{top:0;left:0;height:194px;font-size:10px}
.route-app .overview-chart-axis{left:48px;right:0;bottom:0;font-size:11px}
.route-app .overview-chart-axis span:nth-child(2){display:inline}
.route-app .overview-chart-empty{inset:30px 8px 44px 48px}
.route-app .overview-chart-empty span{font-size:12px;line-height:1.6}
.route-app .overview-entitlement-strip{grid-column:1/-1;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:0;min-height:98px!important;padding:20px 24px!important}
.route-app .entitlement-plan{grid-column:auto;min-width:0;gap:12px}
.route-app .entitlement-plan h3{font-size:17px;overflow-wrap:anywhere}
.route-app .entitlement-plan p,.route-app .entitlement-stat small{font-size:11px}
.route-app .entitlement-stat{min-width:0;padding:0 14px;flex-direction:row;text-align:left;gap:10px}
.route-app .entitlement-stat b{font-size:13px}
.route-app .entitlement-stat-icon,.route-app .entitlement-crown{flex:none}
.route-app .overview-connect{grid-column:1/-1;padding:24px}
.route-app .overview-connect .overview-card-head p{font-size:12px}
.route-app .overview-connect-actions span b{font-size:14px}
.route-app .overview-connect-actions span small{font-size:12px;line-height:1.5}
.route-app .overview-connect-actions>button{min-height:68px}
.route-app .overview-subscription-row code{font-size:13px}
.route-app .workspace-view{padding:0 0 24px;min-width:0}
.route-app .section-toolbar{margin:4px 0 24px;gap:16px;align-items:center}
.route-app .section-toolbar h2{font-size:32px;line-height:1.3;letter-spacing:-.035em}
.route-app .section-toolbar p{font-size:14px;line-height:1.65;margin-top:8px}
.route-app .section-toolbar .active-chip{flex:none}
.route-app .subscription-summary,.route-app .subscription-tools,.route-app .import-panel,.route-app .account-details,.route-app .profile-identity,.route-app .password-card,.route-app .account-security-note,.route-app .guide-steps,.route-app .help-card,.route-app .traffic-panel,.route-app .traffic-detail-panel{border-radius:22px;padding:24px}
.route-app .subscription-stats{gap:20px}
.route-app .subscription-stats small,.route-app .progress-label,.route-app .subscription-tools p{font-size:12px;line-height:1.6}
.route-app .subscription-stats strong{font-size:22px;overflow-wrap:anywhere}
.route-app .secure-link-row{min-width:0}
.route-app .secure-link-row code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-app .import-grid button{min-width:0}
.route-app .import-grid small{font-size:11px}
.route-app .device-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.route-app .device-card{min-width:0;min-height:110px;padding:18px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--concept-ink);cursor:pointer}
.route-app .device-card h3{font-size:16px}
.route-app .device-card p{font-size:11px;line-height:1.5;margin:5px 0 0}
.route-app .device-icon{width:38px;height:38px;flex:none}
.route-app .device-card[aria-pressed="true"]{border-color:#7da5fa;background:#edf4ff;box-shadow:0 0 0 1px rgba(90,137,240,.18)}
.route-app .device-guide{padding:26px;border-radius:22px;margin:16px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center}
.route-app .guide-kicker{grid-column:1;font-size:11px;letter-spacing:.12em;color:#426dc6;font-weight:750}
.route-app .device-guide h3{grid-column:1;margin:0;font-size:21px}
.route-app .device-guide p{grid-column:1;max-width:72ch;margin:0;font-size:14px;line-height:1.8;color:#536b81}
.route-app .device-guide button{grid-column:2;grid-row:1/4;min-height:46px;padding:0 18px;border:0;border-radius:12px;background:#315fc2;color:#fff;font-weight:700;cursor:pointer}
.route-app .guide-steps p,.route-app .help-card p,.route-app .password-card p,.route-app .account-security-note p{font-size:13px;line-height:1.8}
.route-app .account-details dt,.route-app .account-details dd,.route-app .account-security-note dt,.route-app .account-security-note dd,.route-app .password-card label{font-size:12px}
.route-app .password-card input{font-size:16px}
.route-app .traffic-metrics{gap:16px}
.route-app .traffic-metrics .metric-card{min-width:0;padding:20px;gap:14px;border-radius:22px}
.route-app .traffic-metrics strong{font-size:30px;white-space:nowrap}
.route-app .traffic-metrics small{font-size:11px}
.route-app .traffic-metric-icon{width:42px;height:42px;flex:none}
.route-app .traffic-chart-surface{background:linear-gradient(140deg,#f8fbff,#eaf3fc);border:1px solid #dbe7f1;box-shadow:none}
.route-app .traffic-grid-lines i{border-color:rgba(77,106,140,.13)}
.route-app .traffic-chart-line{stroke:#4778f5;stroke-width:2.5;filter:none}
.route-app .traffic-chart-area{fill:rgba(71,120,245,.10)}
.route-app [data-traffic-chart-dots] circle{fill:#fff;stroke:#4778f5;stroke-width:2}
.route-app .traffic-axis,.route-app .traffic-empty strong,.route-app .traffic-empty p{color:#526d87}
.route-app .traffic-table-row:not(.traffic-table-head){font-size:13px;font-variant-numeric:tabular-nums}
.route-app .panel-heading p{font-size:12px;line-height:1.6}
.route-app .panel-heading{gap:12px;flex-wrap:wrap}
.route-app button:focus-visible,.route-app a:focus-visible{outline:3px solid #698df1;outline-offset:3px}
.route-app button:disabled{opacity:.5;cursor:not-allowed}
body:not(.route-app) .mobile-dock{display:none!important}
html[data-subscription-state="empty"] .route-app .overview-entitlement-strip{grid-template-columns:minmax(0,1fr) auto}
html[data-subscription-state="empty"] .route-app .overview-chart-panel{opacity:1}
html[data-preview-mode="true"] .route-app .overview-chart-live i{background:#6c89ba}
@media(min-width:901px) and (max-width:1250px){
  .route-app .app-shell{grid-template-columns:172px minmax(0,1fr);padding:20px;gap:20px}
  .route-app .rail{top:20px;height:calc(100dvh - 40px);padding-inline:8px}
  .route-app .brand-copy strong{font-size:19px}
  .route-app .overview-grid{grid-template-columns:minmax(0,1fr)}
  .route-app .overview-usage{min-height:0}
  .route-app .overview-usage-content{grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr)}
  .route-app .overview-ring{max-width:196px}
  .route-app .overview-entitlement-strip{grid-template-columns:1fr 1fr;gap:20px}
  .route-app .entitlement-stat{border:0;padding:0}
  .route-app .profile-layout-refined,.route-app .profile-actions-grid{grid-template-columns:minmax(0,1fr)}
  .route-app .device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .route-app .app-shell{display:block;padding:24px 24px calc(112px + env(safe-area-inset-bottom))}
  .route-app .overview-grid{grid-template-columns:minmax(0,1fr)}
  .route-app .overview-usage{min-height:0}
  .route-app .overview-ring{max-width:220px}
  .route-app .overview-usage-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .route-app .overview-usage-facts{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr)}
  .route-app .overview-chart-note{grid-row:2}
  .route-app .overview-entitlement-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 0}
  .route-app .entitlement-plan{grid-column:1/-1}
  .route-app .entitlement-stat{padding:0 12px;flex-direction:row;min-height:44px}
  .route-app .entitlement-stat:nth-child(2){padding-left:0;border:0}
  .route-app .device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route-app .profile-layout-refined,.route-app .profile-actions-grid{grid-template-columns:minmax(0,1fr)}
  .route-app .password-card form{grid-template-columns:minmax(0,1fr)}
  .route-app .mobile-dock button{font-size:11px;min-height:44px}
  .route-app .subscription-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .route-app .app-shell{padding:14px 14px calc(104px + env(safe-area-inset-bottom))}
  .route-app .topbar-brand strong{font-size:16px}
  .route-app .topbar-brand b{font-size:9px}
  .route-app .account-profile{max-width:132px;padding:5px 9px 5px 5px;min-height:44px}
  .route-app .account-profile>span:first-child{width:30px;height:30px;border-radius:10px}
  .route-app .account-profile>span:last-child{min-width:0}
  .route-app .account-profile b{font-size:12px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .route-app .account-profile small{display:none!important}
  .route-app .logout-button{font-size:12px;min-height:44px;padding:0 12px}
  .route-app .overview-welcome{margin:10px 0 20px}
  .route-app .overview-welcome h2,.route-app .section-toolbar h2{font-size:28px}
  .route-app .overview-welcome p,.route-app .section-toolbar p{font-size:13px}
  .route-app .overview-grid{gap:12px}
  .route-app .overview-usage,.route-app .overview-chart-card,.route-app .overview-connect{padding:18px 16px}
  .route-app .overview-card-title h3,.route-app .overview-chart-head h3{font-size:16px}
  .route-app .overview-usage-content{gap:12px 8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .route-app .overview-ring{max-width:174px}
  .route-app .overview-ring:before{inset:20px}
  .route-app .overview-ring strong{font-size:34px}
  .route-app .overview-ring small{font-size:11px}
  .route-app .overview-usage-facts>div{grid-template-columns:28px minmax(0,1fr);gap:3px 7px;min-height:50px}
  .route-app .usage-fact-icon{width:28px;height:28px;border-radius:9px}
  .route-app .usage-fact-icon .ui-icon{width:16px;height:16px}
  .route-app .overview-usage-facts dt{font-size:11px}
  .route-app .overview-usage-facts dd{font-size:16px}
  .route-app .overview-chart-note{font-size:10px;gap:4px}
  .route-app .overview-chart-note>.ui-icon{display:none}
  .route-app .overview-chart-live{font-size:10px}
  .route-app .overview-mini-chart{padding-left:42px;min-height:200px}
  .route-app .overview-mini-chart>svg,.route-app .overview-chart-grid,.route-app .overview-y-axis{height:172px}
  .route-app .overview-chart-grid,.route-app .overview-chart-axis{left:42px}
  .route-app .overview-y-axis{font-size:9px}
  .route-app .overview-chart-axis span:nth-child(2){display:none}
  .route-app .overview-chart-card{min-height:284px}
  .route-app .overview-entitlement-strip{padding:18px 16px!important}
  .route-app .entitlement-stat{flex-direction:column;text-align:center;padding:0 4px;gap:8px}
  .route-app .entitlement-stat b{font-size:11px}
  .route-app .entitlement-stat small{font-size:10px}
  .route-app .overview-subscription-row{grid-template-columns:minmax(0,1fr) 44px 60px!important;padding-inline:10px}
  .route-app .overview-subscription-row>.link-lock{display:none}
  .route-app .overview-connect-actions{gap:8px}
  .route-app .overview-connect-actions>button{padding:10px;grid-template-columns:22px minmax(0,1fr);gap:8px}
  .route-app .overview-connect-actions em{display:none}
  .route-app .overview-connect-actions span b{font-size:12px}
  .route-app .overview-connect-actions span small{font-size:10px}
  .route-app .overview-connect-empty,.route-app .subscription-empty-state{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px}
  .route-app .overview-connect-empty>.simple-empty-icon{display:none}
  html[data-subscription-state="empty"] .route-app .overview-entitlement-strip{grid-template-columns:minmax(0,1fr)}
  html[data-subscription-state="empty"] .route-app .entitlement-activate{justify-self:start}
  .route-app .subscription-summary,.route-app .subscription-tools,.route-app .import-panel,.route-app .account-details,.route-app .password-card,.route-app .account-security-note,.route-app .guide-steps,.route-app .help-card,.route-app .traffic-panel,.route-app .traffic-detail-panel{padding:20px 16px}
  .route-app .subscription-stats strong{font-size:18px}
  .route-app .device-card{padding:14px;gap:10px;min-height:96px}
  .route-app .device-card h3{font-size:14px}
  .route-app .device-icon{width:30px;height:30px}
  .route-app .device-guide{grid-template-columns:minmax(0,1fr);padding:20px;gap:12px}
  .route-app .device-guide h3{font-size:18px}
  .route-app .device-guide button{grid-column:1;grid-row:auto;justify-self:start}
  .route-app .traffic-metrics{grid-template-columns:minmax(0,1fr);gap:10px}
  .route-app .traffic-metrics .metric-card{padding:16px;min-height:94px}
  .route-app .traffic-metrics strong{font-size:26px}
  .route-app .traffic-table-row{padding:14px 8px;gap:8px;grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}
  .route-app .traffic-table-row:not(.traffic-table-head){font-size:11px}
  .route-app .traffic-table-head{font-size:10px}
  .route-app .panel-heading h3{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.route-app .view,.route-app .nav-lens,.route-app .mobile-dock-lens{animation:none!important;transition:none!important}}
/* Keep the sidebar's glass compositor inside its own bounds (WebKit/tablet). */
.route-app .rail{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(230,240,248,.88));isolation:isolate}
.route-app .overview-mini-chart{flex:none}
@media(max-width:900px){.route-app .topbar-title{display:block!important;visibility:visible!important}.route-app .topbar{gap:12px}.route-app .topbar-brand{white-space:nowrap}}
.route-app .wide-progress i{width:var(--used,0%);background:linear-gradient(90deg,#5ba5ff,#6d83ff)}
.route-app .progress-label{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
@media(max-width:600px){
 .route-app .overview-subscription-row>.link-lock{display:none!important}
 .route-app .secure-link-row{grid-template-columns:minmax(0,1fr) 44px 60px!important}
 .route-app .secure-link-row .copy-control>span:last-child{display:inline!important;font-size:12px}
 .route-app .secure-link-row .copy-control>.ui-icon{display:none}
 .route-app .section-toolbar{padding:0;flex-direction:row;align-items:flex-start}
 .route-app .section-toolbar>div:first-child{min-width:0;flex:1}
 .route-app .section-toolbar>.active-chip{padding:8px 10px;white-space:nowrap}
}
.route-app .overview-chart-empty{display:grid;place-content:center;justify-content:center;align-content:center;text-align:center;margin:0;gap:8px}
.route-app .overview-chart-empty[hidden]{display:none}
.route-app .help-card button,.route-app .import-panel .panel-heading button{min-height:44px}
.route-app .icon-control{width:44px}
.route-app .traffic-y-axis{position:absolute;z-index:3;top:46px;bottom:66px;left:10px;display:flex;flex-direction:column;justify-content:space-between;color:#536f8b;font-size:10px;pointer-events:none}
.route-app .traffic-line-chart{left:62px;width:calc(100% - 86px)}
@media(max-width:600px){.route-app .traffic-line-chart{left:52px;width:calc(100% - 68px)}.route-app .traffic-y-axis{top:40px;bottom:58px;font-size:9px}}
html[data-subscription-state="empty"] .route-app .overview-ring-value{display:none}

.package-selector:not([hidden]) { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px 20px; margin:16px 0; }
.package-selector select { min-width:180px; max-width:100%; padding:10px 12px; border:1px solid rgba(70,90,110,.28); border-radius:10px; background:#fff; color:#172b3d; }
.package-selector small { color:#536575; }