/* Customer-center clarity pass: stable navigation, readable glass, private subscription controls. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.route-app .eyebrow{display:none}
.route-app .topbar{min-height:58px;margin-bottom:12px;align-items:center;justify-content:flex-end}
.route-app .topbar-title{display:none}
.route-app .brand{height:72px;padding:0 12px;justify-content:flex-start}
.route-app .brand-copy{display:flex;align-items:baseline;gap:10px;text-align:left;white-space:nowrap}
.route-app .brand-copy strong{color:#172a35;font-size:21px;font-weight:810;letter-spacing:.07em}
.route-app .brand-copy small{color:#667b84;font-size:10px;font-weight:790;letter-spacing:.28em}
.topbar-brand{display:inline-flex;align-items:center;gap:9px;color:#20343d}
.topbar-brand strong{font-size:16px;font-weight:800;letter-spacing:.08em}
.topbar-brand i{width:1px;height:15px;background:rgba(47,70,79,.22)}
.topbar-brand b{color:#64777f;font-size:10px;letter-spacing:.2em}
.route-app .mode-button .ui-icon{width:19px;height:19px;margin:auto;color:#44555e}
.route-app .view.entering{animation:view-enter-refined .32s ease-out both}
@keyframes view-enter-refined{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* More opacity and stronger grayscale contrast without losing the liquid material. */
.route-app .liquid-surface,
.route-app .device-card,.route-app .pricing-card,.route-app .metric-card,.route-app .setting-card,
.route-app .table-card,.route-app .referral-card,.route-app .commission-card,.route-app .profile-card,
.route-app .subscription-summary,.route-app .subscription-tools,.route-app .import-panel,
.route-app .traffic-panel,.route-app .help-card,.route-app .notice-card,.route-app .guide-steps,
.route-app .simple-empty,.route-app .empty-list-card{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(221,230,233,.58));
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 18px 48px rgba(64,81,91,.12);
  backdrop-filter:blur(22px) saturate(112%);
  -webkit-backdrop-filter:blur(22px) saturate(112%);
}
.route-app .section-toolbar h2,.route-app .panel-heading h3,.route-app .device-card h3,
.route-app .help-card h3,.route-app .simple-empty h3,.route-app .subscription-tools h3{color:#27363e}
.route-app .section-toolbar p,.route-app .device-card p,.route-app .help-card p,
.route-app .simple-empty p,.route-app .subscription-tools>p:not(.eyebrow){color:#53636c;font-size:13px;line-height:1.65}
.route-app .section-toolbar{margin-bottom:18px}
.route-app .section-toolbar h2{font-size:clamp(32px,3vw,48px)}
.route-app .section-primary{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(55,75,84,.14);border-radius:14px;background:#324850;color:#fff;box-shadow:0 10px 24px rgba(52,72,81,.14);font-weight:750;white-space:nowrap;cursor:pointer}
.route-app .section-primary:hover{background:#293f47;transform:translateY(-1px)}
.route-app .metric-card>span{color:#53656e}
.route-app .metric-card strong{color:#233740}
.route-app .metric-card small{color:#6b7a81}
.route-app .setting-card h3,.route-app .profile-card h3,.route-app .account-details h3{color:#273940}
.route-app .setting-card p{color:#5b6d75}
.route-app .account-details{padding:24px;border:1px solid rgba(255,255,255,.95);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(221,230,233,.58));box-shadow:inset 0 1px 0 #fff,0 18px 48px rgba(64,81,91,.12)}
.route-app .account-details dl{margin:0}
.route-app .account-details dl>div{border-bottom-color:rgba(54,73,82,.11)}
.route-app .account-details dt{color:#66777e;font-size:11px}
.route-app .account-details dd{margin:0;color:#2f434b;font-size:12px;font-weight:700;text-align:right;overflow-wrap:anywhere}
.route-app .active-chip{background:rgba(255,255,255,.7);color:#356852;border-color:rgba(65,105,89,.18)}
.route-app .nav-item{color:#53626b}
.route-app .nav-item svg{width:19px;height:19px}
.route-app .nav-item.active{color:#17272f}
.route-app .nav-lens{transition:transform .28s ease,width .18s ease,height .18s ease}
.route-app .rail{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(221,230,233,.57))}

/* Official Tabler icon treatment. */
.device-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#fff,#cdd8dc);color:#33474f;box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(58,75,84,.12)}
.device-icon .ui-icon{width:23px;height:23px}
.device-card{min-height:176px;padding:22px;gap:24px}
.device-card h3{margin:0 0 7px;font-size:20px}
.device-card:hover{transform:translateY(-2px);border-color:#fff}
.help-icon,.simple-empty-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.72);color:#344a53;box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(57,76,86,.1)}
.help-icon .ui-icon,.simple-empty-icon .ui-icon{width:25px;height:25px}
.help-card .portal-symbol{display:none}

/* Remove dead placeholder pricing and use one honest action. */
.simple-empty{min-height:220px;padding:30px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;border-radius:26px}
.simple-empty h3{margin:0 0 7px;font-size:23px}
.simple-empty p{margin:0}
.simple-empty button{height:48px;padding:0 18px;display:flex;align-items:center;gap:12px;border:1px solid rgba(59,76,86,.15);border-radius:14px;background:#324850;color:#fff;font-weight:700;cursor:pointer}
.simple-empty button .ui-icon{width:17px;height:17px}
.empty-list-card{min-height:170px;padding:28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;border-radius:26px}
.empty-list-card h3{margin:0 0 7px;color:#27363e;font-size:22px}
.empty-list-card p{max-width:680px;margin:0;color:#596a72;font-size:13px;line-height:1.65}
.empty-list-card>button{min-height:46px;padding:0 16px;display:flex;align-items:center;gap:10px;border:1px solid rgba(59,76,86,.15);border-radius:14px;background:#324850;color:#fff;font-weight:700;cursor:pointer}
.empty-list-card>button .ui-icon{width:16px;height:16px}
.status-label{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 11px;border:1px solid rgba(61,80,89,.13);border-radius:999px;background:rgba(255,255,255,.66);color:#536870;font-size:10px;font-weight:750;white-space:nowrap}
.profile-card{display:flex;align-items:center;gap:16px}
.profile-card>div:nth-child(2){min-width:0;flex:1}
.profile-card h3{margin:0 0 5px!important}
.profile-card>div:nth-child(2)>span{color:#66777e;font-size:12px}
.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:16px}
.setting-card{min-height:150px;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:0 14px;transform:none!important}
.setting-card .setting-icon{width:42px;height:42px;display:grid;place-items:center;grid-row:1/3;border:1px solid rgba(55,76,85,.12);border-radius:14px;background:rgba(255,255,255,.66);color:#344b54}
.setting-card .setting-icon .ui-icon{width:20px;height:20px}
.setting-card h3{margin:2px 0 5px}
.setting-card .status-label{grid-column:1/-1;justify-self:start;margin-top:16px}

/* Subscription cards must never grow beyond their column. */
.subscription-overview{grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr)}
.subscription-summary,.subscription-tools{overflow:hidden}
.subscription-stats div{background:rgba(255,255,255,.58);border:1px solid rgba(76,92,101,.08)}
.subscription-stats small{color:#5f6e76}
.subscription-stats strong{color:#26363e}
.progress-label{color:#46565f}
.wide-progress{background:rgba(58,74,84,.12)}
.wide-progress i{background:#667a83;box-shadow:none}
.secure-link-row{display:grid!important;grid-template-columns:minmax(0,1fr) 42px auto!important;gap:0!important;min-width:0;overflow:hidden;padding:0!important;border:1px solid rgba(61,78,88,.13)!important;background:rgba(255,255,255,.68)!important}
.subscription-link.secure-link-row{grid-template-columns:40px minmax(0,1fr) 42px auto!important}
.secure-link-row code{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 14px;color:#344851!important;font-size:12px}
.secure-link-row>button{height:48px;min-width:0;border:0;border-left:1px solid rgba(61,78,88,.12);background:rgba(255,255,255,.42);color:#334850;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.secure-link-row>button:hover{background:#fff}
.subscription-link.secure-link-row>button{height:50px}
.icon-control{width:42px;padding:0!important}
.icon-control .ui-icon{width:18px;height:18px}
.copy-control{padding:0 14px!important;font-weight:750}
.copy-control .ui-icon{width:17px;height:17px}
.link-lock{width:18px;height:18px;margin-left:14px;padding:0!important;color:#526970!important}
.tool-buttons{padding-top:12px}
.tool-buttons button{width:100%;height:48px;padding:0 14px;display:grid;grid-template-columns:22px 1fr 18px;align-items:center;gap:11px;border:1px solid rgba(61,78,88,.12);border-radius:14px;background:rgba(255,255,255,.65);color:#2d414a;text-align:left;font-weight:700;cursor:pointer}
.tool-buttons button:hover{background:#fff}
.tool-buttons .ui-icon{width:19px;height:19px}
.quick-actions button{background:rgba(255,255,255,.5);border-color:rgba(61,78,88,.1);color:#30434c}
.quick-actions button:hover{background:rgba(255,255,255,.82)}
.quick-actions i.ui-icon,.quick-actions em.ui-icon{width:19px;height:19px;color:#405861}
.quick-actions small{color:#5b6a72}

/* Cleaner import buttons — icon, platform, action. */
.import-panel{padding:24px}
.import-panel .panel-heading{padding:0 0 18px}
.import-panel .panel-heading>button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#3c5059;font-weight:700;cursor:pointer}
.import-panel .panel-heading>button .ui-icon{width:16px;height:16px}
.import-grid button{min-width:0;min-height:62px;padding:10px 13px;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:10px;border:1px solid rgba(61,78,88,.11);border-radius:15px;background:rgba(255,255,255,.56);color:#2b3d45;text-align:left;cursor:pointer}
.import-grid button:hover{background:#fff}
.import-grid button b{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(77,95,104,.08)}
.import-grid button b .ui-icon{width:19px;height:19px}
.import-grid button span{font-weight:750;overflow:hidden}
.import-grid button small{display:block;margin-top:3px;color:#617078;font-size:10px;font-weight:500}
.import-grid button em.ui-icon{width:17px;height:17px;color:#607179}

/* Guide steps were inheriting white text from dark mode. */
.route-app .guide-steps li{background:rgba(255,255,255,.55);border:1px solid rgba(61,78,88,.07)}
.route-app .guide-steps li>b{background:#dce6e8;color:#304750}
.route-app .guide-steps li strong{color:#293b43}
.route-app .guide-steps li p{color:#596971}
.route-app .panel-heading>span{color:#56666e}
.route-app .help-card button{height:42px;margin-top:16px;padding:0 14px;border:1px solid rgba(61,78,88,.12);border-radius:12px;background:rgba(255,255,255,.62);color:#314750;font-weight:700}

/* Real QR dialog. */
.qr-dialog-card{width:min(420px,calc(100vw - 28px));padding:26px;background:rgba(244,248,248,.98)!important;color:#25363e!important}
.qr-dialog-card h2{margin-top:20px;color:#25363e}
.qr-dialog-card>p{color:#596971!important}
.real-qr{width:246px;min-height:246px;margin:22px auto;display:grid;place-items:center;padding:14px;border-radius:20px;background:#fff;box-shadow:0 12px 36px rgba(39,56,65,.14)}
.real-qr svg{display:block;width:100%;height:auto}
.real-qr p{max-width:190px;color:#617078;font-size:12px;line-height:1.6}
.qr-dialog-card .dialog-close{color:#30434c;background:#fff;border-color:rgba(61,78,88,.12)}

/* Compact, stable small-screen layout. */
@media(max-width:1100px){.subscription-overview{grid-template-columns:minmax(0,1fr)}.subscription-tools{min-height:auto}}
@media(max-width:760px){
  .route-app .topbar{min-height:52px;margin-bottom:8px}
  .route-app .section-toolbar{align-items:flex-start;flex-wrap:wrap}.route-app .section-primary{width:100%;justify-content:space-between}
  .simple-empty{grid-template-columns:auto minmax(0,1fr);padding:22px}.simple-empty button{grid-column:1/-1;justify-content:space-between}
  .empty-list-card{min-height:0;grid-template-columns:auto minmax(0,1fr);padding:20px;gap:16px}.empty-list-card>button,.empty-list-card>.status-label{grid-column:1/-1;width:100%;justify-content:space-between}
  .settings-grid{grid-template-columns:minmax(0,1fr)!important}
  .secure-link-row{grid-template-columns:minmax(0,1fr) 42px 48px!important}.subscription-link.secure-link-row{grid-template-columns:34px minmax(0,1fr) 42px 48px!important}
  .copy-control{padding:0!important}.copy-control>span:last-child{display:none}
  .subscription-stats{gap:8px}.subscription-stats div{padding:12px}
  .import-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media(prefers-reduced-motion:reduce){.route-app .view.entering{animation:none}}

/* Do not replay the homepage blur animation inside the authenticated workspace. */
.route-app .reveal{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
.route-app .signal-bar,.route-app .nodes-card{display:none}
.route-app .usage-card{grid-column:span 7}
.route-app .access-card{grid-column:span 5}
.route-app .subscription-card{grid-column:1/-1;min-height:auto}
.subscription-stats strong>span{display:inline!important;color:inherit!important;font:inherit!important}

/* Traffic page: real aggregate data, honest empty detail state, deliberate contrast. */
#traffic{max-width:1500px;margin:0 auto;padding-bottom:24px}
#traffic .traffic-toolbar{align-items:center;margin-bottom:20px}
#traffic .traffic-toolbar h2{margin:0;color:#1e3038;font-size:clamp(38px,4.2vw,62px);font-weight:760;letter-spacing:-.055em;line-height:1}
#traffic .traffic-toolbar p{margin-top:10px;color:#52656e;font-size:14px;font-weight:520}
.traffic-period{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 15px;border:1px solid rgba(48,69,78,.13);border-radius:999px;background:rgba(255,255,255,.76);box-shadow:inset 0 1px 0 #fff;color:#2d4149;font-size:12px;font-weight:760;white-space:nowrap}
.traffic-period .status-dot{width:7px;height:7px;margin:0;background:#4d9879;box-shadow:0 0 0 5px rgba(77,152,121,.11)}
.traffic-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
#traffic .traffic-metrics .metric-card{min-height:132px;padding:20px;display:flex;align-items:center;gap:16px;overflow:hidden}
#traffic .traffic-metric-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border:1px solid rgba(48,72,82,.16);border-radius:15px;background:linear-gradient(145deg,#f9fbfb,#cedbdd);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(44,64,73,.12);color:#203f49}
.traffic-metric-icon .ui-icon{width:21px;height:21px}
.traffic-metric-icon.upload-icon .ui-icon,.traffic-metric-icon.download-icon .ui-icon{--icon:url('./assets/app-icons/arrow-right.svg')}
.traffic-metric-icon.upload-icon .ui-icon{transform:rotate(-45deg)}
.traffic-metric-icon.download-icon .ui-icon{transform:rotate(45deg)}
.traffic-metric-icon.total-icon .ui-icon{--icon:url('./assets/app-icons/chart-bar.svg')}
#traffic .traffic-metrics .metric-card>div{min-width:0}
#traffic .traffic-metrics .metric-card span:not(.traffic-metric-icon){display:block;color:#50626b;font-size:12px;font-weight:720}
#traffic .traffic-metrics .metric-card strong{margin:5px 0 3px;color:#1f3038;font-size:clamp(27px,2.2vw,38px);font-weight:780;letter-spacing:-.045em;line-height:1}
#traffic .traffic-metrics .metric-card small{color:#6b7a81;font-size:10px;font-weight:600}
.traffic-trend-panel{padding:20px!important;border-radius:27px!important}
#traffic .panel-heading{position:relative;z-index:1;align-items:center;padding:0 2px 17px}
#traffic .panel-heading h3{margin:0;color:#21343c;font-size:21px;font-weight:760;letter-spacing:-.025em}
#traffic .panel-heading p{margin:6px 0 0;color:#60727a;font-size:11px;line-height:1.45}
.traffic-sync-state{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:#e5edee;color:#496069;font-size:10px;font-weight:720;white-space:nowrap}
.traffic-sync-state i{width:7px;height:7px;border-radius:50%;background:#70878e}
.traffic-chart-surface{position:relative;min-height:300px;overflow:hidden;border:1px solid rgba(21,42,50,.2);border-radius:21px;background:radial-gradient(circle at 76% 10%,rgba(105,147,146,.2),transparent 37%),linear-gradient(145deg,#24363e,#16272e);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 15px 32px rgba(41,62,72,.15)}
.traffic-grid-lines{position:absolute;inset:22px 24px 42px;display:grid;grid-template-rows:repeat(4,1fr);pointer-events:none}
.traffic-grid-lines i{border-bottom:1px solid rgba(224,239,238,.11)}
.traffic-grid-lines:before,.traffic-grid-lines:after{content:"";position:absolute;top:0;bottom:0;border-left:1px dashed rgba(224,239,238,.08)}
.traffic-grid-lines:before{left:33.333%}.traffic-grid-lines:after{left:66.666%}
.traffic-empty{position:absolute;z-index:2;inset:0;display:grid;place-content:center;justify-items:center;padding:34px;text-align:center}
.traffic-empty-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:17px;border:1px solid rgba(231,244,243,.18);border-radius:19px;background:rgba(236,247,246,.08);color:#bcd1cf;box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.traffic-empty-icon .ui-icon{width:27px;height:27px;--icon:url('./assets/app-icons/chart-bar.svg')}
.traffic-empty strong{color:#f2f7f6;font-size:18px;font-weight:720;letter-spacing:-.015em}
.traffic-empty p{max-width:340px;margin:8px 0 0;color:#aebfbe;font-size:12px;line-height:1.55}
.traffic-axis{position:absolute;z-index:2;left:24px;right:24px;bottom:13px;display:flex;justify-content:space-between;color:#8fa4a4;font-size:9px;font-weight:650}
.traffic-detail-panel{margin-top:14px;padding:0!important;overflow:hidden;border-radius:27px!important}
.traffic-detail-panel .panel-heading{padding:20px 22px 17px!important;border-bottom:1px solid rgba(55,75,84,.1)}
.traffic-timezone{color:#546971!important;font-size:10px!important;font-weight:700}
.traffic-table{position:relative;z-index:1;width:100%;color:#2a3e47}
.traffic-table-row{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:14px;padding:13px 22px;border-bottom:1px solid rgba(55,75,84,.09)}
.traffic-table-head{background:rgba(223,232,234,.42);color:#52666e;font-size:10px;font-weight:780}
.traffic-table-empty{min-height:76px;display:grid;place-items:center;padding:18px 22px;color:#667981;font-size:12px;font-weight:600;text-align:center}

@media(max-width:760px){
  .route-app[data-active-view="traffic"] .topbar{min-height:52px;margin-bottom:6px;align-items:center}
  #traffic .traffic-toolbar{display:flex;flex-direction:row;align-items:flex-end;gap:12px}
  #traffic .traffic-toolbar>div{flex:1;min-width:0}
  #traffic .traffic-toolbar h2{font-size:36px}
  #traffic .traffic-toolbar p{font-size:12px;line-height:1.45}
  .traffic-period{min-height:34px;padding:0 11px;font-size:10px}
  .traffic-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  #traffic .traffic-metrics .metric-card{min-height:112px;padding:15px;gap:11px}
  #traffic .traffic-metrics .metric-card:last-child{grid-column:1/-1}
  .traffic-metric-icon{width:39px;height:39px;flex-basis:39px;border-radius:13px}
  .traffic-metric-icon .ui-icon{width:18px;height:18px}
  #traffic .traffic-metrics .metric-card strong{font-size:25px}
  .traffic-trend-panel{padding:14px!important}
  #traffic .panel-heading{padding-bottom:13px}
  #traffic .panel-heading h3{font-size:18px}
  .traffic-chart-surface{min-height:270px;border-radius:18px}
  .traffic-empty{padding:28px 18px}
  .traffic-empty strong{font-size:16px}
  .traffic-detail-panel .panel-heading{padding:17px 16px 14px!important}
  .traffic-table-row{grid-template-columns:1.15fr repeat(3,.85fr);gap:8px;padding:12px 15px;font-size:10px}
}
@media(max-width:430px){
  #traffic .traffic-toolbar h2{font-size:32px}
  .traffic-period .status-dot{display:none}
  #traffic .traffic-metrics .metric-card{min-height:104px;padding:13px}
  #traffic .traffic-metrics .metric-card span:not(.traffic-metric-icon){font-size:10px}
  #traffic .traffic-metrics .metric-card strong{font-size:22px}
  .traffic-metric-icon{display:none}
  .traffic-chart-surface{min-height:250px}
  .traffic-timezone{font-size:9px!important}
}

/* 2026-10-18 customer experience refinement: one quiet pearl system, real data, no theme switch. */
:root{--portal-ink:#22343c;--portal-muted:#5b6d75;--portal-line:rgba(50,70,79,.14);--portal-glass:linear-gradient(145deg,rgba(255,255,255,.82),rgba(223,232,235,.58));--portal-shadow:0 22px 64px rgba(54,75,85,.12),inset 0 1px 0 rgba(255,255,255,.96)}
.route-app{background:#dfe7e9;color:var(--portal-ink)}
.route-app:before{background:radial-gradient(circle at 80% 4%,rgba(255,255,255,.92),transparent 31%),radial-gradient(circle at 8% 86%,rgba(181,206,207,.28),transparent 36%),linear-gradient(135deg,#eef2f2,#d8e1e3 58%,#eef1f1)}
.route-app #prismCanvas{opacity:.045}
.route-app .topbar{min-height:82px;margin-bottom:10px;align-items:center}
.route-app .topbar-title h1{max-width:760px;margin:0;color:#293b43;font-size:clamp(26px,2.1vw,38px);font-weight:690;line-height:1.04;letter-spacing:-.045em}
.route-app .topbar-title h1 em{display:inline;color:#293b43!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.route-app .top-actions{padding-top:0}
.route-app .account-profile{min-height:48px;padding:5px 10px 5px 6px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.54);box-shadow:inset 0 1px 0 #fff,0 10px 25px rgba(54,75,85,.07)}
.route-app .logout-button{min-height:44px;padding:0 14px;border-color:var(--portal-line);background:rgba(255,255,255,.44);color:#33474f}

.overview-redesign{max-width:1480px;margin:0 auto;padding-bottom:30px}
.overview-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:8px 2px 18px}
.overview-welcome p{margin:0 0 7px;color:#52656d;font-size:13px}
.overview-welcome p strong{color:#243740}
.overview-welcome h2{margin:0;color:#20333b;font-size:clamp(32px,4.2vw,62px);font-weight:720;letter-spacing:-.058em;line-height:1}
.overview-sync{display:grid;grid-template-columns:8px auto;gap:2px 8px;align-items:center;padding:10px 14px;border:1px solid rgba(255,255,255,.86);border-radius:16px;background:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 #fff;color:#3d565e;font-size:11px}
.overview-sync i{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:#4b9877;box-shadow:0 0 0 5px rgba(75,152,119,.1)}
.overview-sync time{color:#708087;font-size:9px}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);gap:15px}
.overview-grid>article{border:1px solid rgba(255,255,255,.9);border-radius:28px;background:var(--portal-glass);box-shadow:var(--portal-shadow);overflow:hidden}
.overview-usage{min-height:430px;padding:27px 28px}
.overview-entitlement{min-height:430px;padding:27px 28px;display:flex;flex-direction:column}
.overview-connect{grid-column:1/-1;padding:24px 28px}
.overview-card-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.overview-card-head h3{margin:0;color:#233740;font-size:24px;font-weight:750;letter-spacing:-.035em}
.overview-card-head p{margin:6px 0 0;color:#66777e;font-size:11px}
.overview-card-head>button{border:0;background:transparent;color:#445d66;font-weight:720;cursor:pointer}
.overview-card-head>button span{margin-left:7px}
.overview-usage-content{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:center;margin-top:26px}
.overview-ring{--remaining-progress:100;position:relative;width:228px;aspect-ratio:1;display:grid;place-items:center}
.overview-ring:before{content:"";position:absolute;inset:25px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,#dce6e8 63%,#c3d0d4);box-shadow:inset 0 1px 0 #fff,0 18px 42px rgba(66,86,95,.14)}
.overview-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.overview-ring circle{fill:none;stroke-width:8}
.overview-ring-track{stroke:rgba(52,75,84,.09)}
.overview-ring-value{stroke:#6f8991;stroke-linecap:round;stroke-dasharray:452.4;stroke-dashoffset:calc(452.4 - (452.4 * var(--remaining-progress)/100));transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.overview-ring>div{position:relative;z-index:1;text-align:center}
.overview-ring small,.overview-ring span{display:block;color:#60727a;font-size:11px}
.overview-ring strong{display:block;margin:2px 0;color:#20333b;font-size:48px;font-weight:760;letter-spacing:-.065em;line-height:1}
.overview-usage-side{display:grid;gap:18px;min-width:0}
.overview-usage-side dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border:1px solid rgba(54,74,83,.11);border-radius:17px;background:rgba(255,255,255,.38);overflow:hidden}
.overview-usage-side dl>div{padding:13px 15px;border-right:1px solid rgba(54,74,83,.09)}
.overview-usage-side dl>div:last-child{border:0}
.overview-usage-side dt{color:#66777e;font-size:10px}
.overview-usage-side dd{margin:6px 0 0;color:#2b3e46;font-size:13px;font-weight:750;white-space:nowrap}
.overview-mini-chart{min-width:0}
.overview-mini-chart svg{display:block;width:100%;height:112px;overflow:visible}
.chart-line{fill:none;stroke:#58747d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart-area{fill:rgba(91,129,132,.12)}
[data-overview-chart-dots] circle{fill:#f8fbfb;stroke:#58747d;stroke-width:2;vector-effect:non-scaling-stroke}
.overview-mini-chart>div{display:flex;justify-content:space-between;margin-top:5px;color:#78868b;font-size:9px}
.overview-mini-chart>p{margin:7px 0 0;color:#5a6d74;font-size:10px}
.entitlement-date{margin:44px 0 30px}
.entitlement-date small{display:block;color:#687a81;font-size:11px}
.entitlement-date strong{display:block;margin-top:5px;color:#23363e;font-size:clamp(34px,3.3vw,52px);font-weight:740;letter-spacing:-.055em;line-height:1}
.entitlement-details{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:auto}
.entitlement-details>span{padding:14px;border:1px solid rgba(56,75,84,.1);border-radius:15px;background:rgba(255,255,255,.38)}
.entitlement-details small,.entitlement-details b{display:block}
.entitlement-details small{color:#6a7b82;font-size:9px}
.entitlement-details b{margin-top:5px;color:#293d45;font-size:12px}
.entitlement-details em{font-style:normal}
.entitlement-action{display:flex;align-items:center;justify-content:space-between;min-height:50px;margin-top:10px;padding:0 15px;border:1px solid rgba(55,74,83,.11);border-radius:15px;background:rgba(255,255,255,.67);color:#283d45;font-weight:760;cursor:pointer}
.overview-subscription-row{margin-top:18px;grid-template-columns:42px minmax(0,1fr) 46px 92px!important;background:rgba(255,255,255,.54)!important}
.overview-connect-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:10px;margin-top:10px}
.overview-connect-actions>button,.overview-connect-actions>a{min-height:58px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 16px;border:1px solid rgba(55,74,83,.1);border-radius:16px;background:rgba(255,255,255,.43);color:#2b4048;text-decoration:none;font-size:12px;font-weight:740;cursor:pointer}
.overview-connect-actions .ui-icon{width:19px;height:19px}
.overview-connect-actions b{color:#63737a;font-size:10px;font-weight:650}
.overview-connect-actions>*:hover{background:rgba(255,255,255,.8)}

/* Profile is compact and functional rather than a large decorative placeholder. */
.profile-layout-refined{grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr)}
.profile-identity{min-height:214px!important;padding:28px!important;align-items:center}
.profile-identity>div:nth-child(2)>p{margin:0 0 5px;color:#6a7a80;font-size:10px}
.profile-identity h3{font-size:30px!important;letter-spacing:-.035em}
.profile-avatar{width:72px;height:72px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,#8de0e4,#8f84f2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px rgba(75,99,113,.15);color:#182d35;font-size:24px;font-weight:800}
.profile-actions-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:16px;margin-top:16px}
.password-card,.account-security-note{padding:24px;border:1px solid rgba(255,255,255,.92);border-radius:24px;background:var(--portal-glass);box-shadow:var(--portal-shadow)}
.password-card-heading{display:flex;gap:14px;align-items:center}
.password-card-heading h3,.account-security-note h3{margin:0;color:#263a42;font-size:19px}
.password-card-heading p,.account-security-note>p{margin:5px 0 0;color:#5f7178;font-size:11px;line-height:1.6}
.password-card .setting-icon,.account-security-note .setting-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--portal-line);border-radius:14px;background:rgba(255,255,255,.62);color:#314b54}
.password-card .ui-icon,.account-security-note .ui-icon{width:20px;height:20px}
.password-card form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:20px}
.password-card label{display:grid;gap:7px;color:#5f7077;font-size:10px;font-weight:700}
.password-card input{min-width:0;height:46px;padding:0 13px;border:1px solid rgba(52,73,82,.16);border-radius:13px;background:rgba(255,255,255,.67);color:#243941;outline:none}
.password-card input:focus{border-color:#668990;box-shadow:0 0 0 3px rgba(102,137,144,.13)}
.password-submit-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px}
.password-submit-row p{min-height:18px;margin:0;color:#a04747;font-size:11px}
.password-submit-row p[data-kind="success"]{color:#327458}
.password-submit-row button{min-height:44px;padding:0 16px;border:0;border-radius:13px;background:#2d444c;color:#fff;font-weight:740;cursor:pointer}
.password-submit-row button:disabled{opacity:.55;cursor:wait}
.account-security-note{display:flex;flex-direction:column}
.account-security-note h3{margin-top:16px}
.account-security-note dl{margin:auto 0 0}
.account-security-note dl>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(55,74,83,.1)}
.account-security-note dl>div:last-child{border:0}
.account-security-note dt{color:#66777e;font-size:10px}.account-security-note dd{margin:0;color:#2c424a;font-size:10px;font-weight:740;text-align:right}
.account-id{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tutorial support card keeps its action inside its own column at every width. */
.guide-layout{grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);align-items:stretch}
.help-card{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.help-card p{max-width:34ch}
.route-app .help-card button{margin-top:auto;align-self:flex-start;max-width:100%;white-space:nowrap}

/* Real traffic chart and readable table. */
.traffic-line-chart{position:absolute;z-index:1;inset:24px 24px 42px;width:calc(100% - 48px);height:calc(100% - 66px);overflow:visible}
.traffic-chart-line{fill:none;stroke:#9ed3cd;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 5px 10px rgba(109,195,184,.22))}
.traffic-chart-area{fill:rgba(112,183,176,.14)}
[data-traffic-chart-dots] circle{fill:#e9f6f4;stroke:#67a69f;stroke-width:3;vector-effect:non-scaling-stroke}
.traffic-empty[hidden]{display:none}
.traffic-table-row:not(.traffic-table-head){color:#30464e;font-size:11px}

/* Dedicated five-item mobile dock: a web approximation of fluid glass, above the safe area. */
.mobile-dock{display:none}
@media(max-width:1100px){.overview-grid{grid-template-columns:minmax(0,1fr)}.overview-entitlement{min-height:330px}.overview-connect{grid-column:auto}}
@media(max-width:900px){
  .route-app .app-shell{display:block;padding:12px 12px calc(116px + env(safe-area-inset-bottom))}
  .route-app .rail{display:none!important}
  .route-app .main{width:100%;max-width:none;padding:0}
  .mobile-dock{position:fixed;z-index:80;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100vw - 24px));height:72px;display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border:1px solid rgba(255,255,255,.88);border-radius:25px;background:linear-gradient(150deg,rgba(255,255,255,.76),rgba(214,225,229,.58));box-shadow:inset 0 1px 0 #fff,0 18px 55px rgba(40,60,69,.24);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);overflow:hidden}
  .mobile-dock:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.65),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.18),transparent 45%,rgba(255,255,255,.12));pointer-events:none}
  .mobile-dock-lens{position:absolute;z-index:0;left:0;top:6px;height:58px;border:1px solid rgba(255,255,255,.96);border-radius:20px;background:radial-gradient(circle at 35% 15%,rgba(255,255,255,.95),rgba(207,223,227,.73) 62%,rgba(166,198,199,.55));box-shadow:inset 0 1px 0 #fff,inset 0 -8px 20px rgba(109,151,151,.13),0 9px 22px rgba(50,76,84,.16);transition:transform .48s cubic-bezier(.2,.8,.2,1),width .3s ease}
  .mobile-dock button{position:relative;z-index:1;min-width:0;border:0;background:transparent;color:#6c7c82;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;cursor:pointer}
  .mobile-dock button.active{color:#20363e;font-weight:800}
  .mobile-dock .ui-icon{width:20px;height:20px}
  .overview-welcome h2{font-size:clamp(32px,8.5vw,48px)}
}
@media(max-width:760px){
  .route-app .topbar{min-height:58px;margin-bottom:14px;display:flex;flex-direction:row;align-items:center;gap:10px}
  .route-app .topbar-title{display:none}
  .route-app .top-actions{margin-left:auto;width:auto}
  .route-app .account-actions{gap:6px}
  .route-app .account-profile{max-width:185px}
  .route-app .logout-button{padding:0 11px}
  .overview-welcome{align-items:flex-start;margin:0 2px 14px}
  .overview-welcome h2{font-size:34px;line-height:1.02}
  .overview-sync{display:none}
  .overview-grid{gap:11px}
  .overview-grid>article{border-radius:24px}
  .overview-usage,.overview-entitlement,.overview-connect{min-height:0;padding:20px}
  .overview-card-head h3{font-size:21px}
  .overview-usage-content{grid-template-columns:1fr;gap:16px;margin-top:18px}
  .overview-ring{width:196px;margin:auto}
  .overview-ring strong{font-size:44px}
  .overview-usage-side dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .overview-usage-side dl>div{padding:11px 9px}
  .overview-usage-side dd{font-size:11px}
  .overview-mini-chart svg{height:94px}
  .entitlement-date{margin:28px 0 22px}
  .entitlement-date strong{font-size:38px}
  .overview-subscription-row{grid-template-columns:34px minmax(0,1fr) 42px 48px!important}
  .overview-connect-actions{grid-template-columns:1fr 1fr}
  .overview-connect-actions>a{grid-column:1/-1}
  .profile-layout-refined,.profile-actions-grid{grid-template-columns:minmax(0,1fr)}
  .profile-identity{min-height:160px!important;padding:20px!important}
  .profile-avatar{width:58px;height:58px;border-radius:18px}
  .profile-identity h3{font-size:24px!important}
  .password-card form{grid-template-columns:minmax(0,1fr)}
  .password-submit-row{grid-column:auto;align-items:stretch;flex-direction:column}
  .password-submit-row button{width:100%}
  .guide-layout{grid-template-columns:minmax(0,1fr)}
  .traffic-line-chart{inset:20px 16px 38px;width:calc(100% - 32px);height:calc(100% - 58px)}
}
@media(max-width:430px){
  .route-app .account-profile span:last-child small{display:none}
  .route-app .account-profile{max-width:145px}
  .overview-welcome h2{font-size:31px}
  .overview-usage-side dl{grid-template-columns:1fr}
  .overview-usage-side dl>div{display:flex;justify-content:space-between;align-items:center;border-right:0;border-bottom:1px solid rgba(54,74,83,.09)}
  .overview-usage-side dl>div:last-child{border-bottom:0}
  .overview-usage-side dd{margin:0}
  .overview-connect-actions>button,.overview-connect-actions>a{padding:0 12px}
  .entitlement-date strong{font-size:34px}
  .mobile-dock{height:68px;border-radius:23px}
  .mobile-dock-lens{height:54px;border-radius:18px}
}
@media(prefers-reduced-transparency:reduce){.mobile-dock,.overview-grid>article,.password-card,.account-security-note{background:#f4f7f7;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* 2026-10-19 account overview: match the approved desktop/mobile composition. */
.route-app[data-active-view="overview"] .topbar-title{visibility:hidden}
.route-app[data-active-view="overview"] .topbar{min-height:64px;margin-bottom:0}
.overview-redesign{max-width:1480px;margin:0 auto;padding:0 0 34px}
.overview-welcome{align-items:center;margin:0 2px 18px}
.overview-welcome h2{margin:0;color:#172632;font-size:clamp(30px,2.75vw,44px);font-weight:760;letter-spacing:-.055em;line-height:1}
.overview-welcome h2 strong{font-weight:760}
.overview-welcome p{margin:9px 0 0;color:#61737b;font-size:13px}
.overview-sync{display:none}
.overview-grid{display:grid;grid-template-columns:1fr;gap:16px}
.overview-grid>article{border:1px solid rgba(255,255,255,.96);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(224,234,237,.62));box-shadow:0 22px 64px rgba(54,75,85,.11),inset 0 1px 0 #fff;overflow:hidden}
.overview-usage{min-height:0;padding:28px 30px 24px}
.overview-usage-content{display:grid;grid-template-columns:250px 290px minmax(350px,1fr);grid-template-rows:auto auto;gap:0 30px;align-items:center;margin:0}
.overview-ring-block{min-width:0}
.overview-ring-block>h3{display:block;margin:0 0 14px;color:#1c3039;font-size:18px;font-weight:760;letter-spacing:-.025em}
.overview-ring{width:220px;margin:0 auto}
.overview-ring:before{inset:26px;background:radial-gradient(circle at 36% 28%,#fff 0,#edf2f4 42%,#dde6ee 70%,#cbd8df 100%);box-shadow:inset 0 1px 0 #fff,0 18px 42px rgba(66,86,95,.13)}
.overview-ring circle{stroke-width:7}
.overview-ring-track{stroke:rgba(55,82,92,.1)}
.overview-ring-accent{fill:none;stroke:#bae6d5;stroke-width:7;stroke-linecap:round;stroke-dasharray:360 402;transform-origin:90px 90px;transform:rotate(78deg)}
.overview-ring-value{stroke:#507c78;filter:drop-shadow(0 3px 5px rgba(72,117,113,.16))}
.overview-ring strong{font-size:50px;color:#111d2b}
.overview-ring small,.overview-ring span{color:#60747d;font-size:11px}
.overview-usage-facts{align-self:center;display:grid;margin:0;border:1px solid rgba(52,73,82,.1);border-radius:16px;background:rgba(255,255,255,.5);overflow:hidden}
.overview-usage-facts>div{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px;padding:0 18px;border-bottom:1px solid rgba(52,73,82,.09)}
.overview-usage-facts>div:last-child{border:0}
.overview-usage-facts dt{color:#61737b;font-size:12px}
.overview-usage-facts dd{margin:0;color:#192a35;font-size:14px;font-weight:780;white-space:nowrap}
.overview-chart-panel{position:relative;align-self:stretch;min-width:0;display:flex;flex-direction:column;padding-left:28px;border-left:1px solid rgba(53,75,84,.12)}
.overview-chart-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.overview-chart-head h3{margin:0;color:#152632;font-size:21px;font-weight:760;letter-spacing:-.025em}
.overview-chart-live{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(61,92,93,.08);border-radius:999px;background:rgba(255,255,255,.58);color:#576e75;font-size:10px;font-weight:650;white-space:nowrap}
.overview-chart-live i{width:7px;height:7px;border-radius:50%;background:#21a17e;box-shadow:0 0 0 4px rgba(33,161,126,.1)}
.overview-chart-live time{padding-left:6px;border-left:1px solid rgba(55,76,85,.12);color:#718188;font:inherit}
.overview-chart-legend{display:flex;justify-content:flex-end;gap:20px;margin:10px 2px 0;color:#53666f;font-size:10px}
.overview-chart-legend span{display:flex;align-items:center;gap:7px}.overview-chart-legend i{width:9px;height:9px;border-radius:50%}.overview-chart-legend .download{background:#5875f5}.overview-chart-legend .upload{background:#159b76}
.overview-mini-chart{position:relative;flex:1;min-height:152px;margin-top:4px;padding:0 0 20px 40px}
.overview-mini-chart>svg{position:relative;z-index:2;width:100%;height:152px;overflow:visible}
.overview-chart-grid{position:absolute;z-index:0;left:40px;right:0;top:0;height:152px;background-image:linear-gradient(to bottom,rgba(55,80,90,.1) 1px,transparent 1px),linear-gradient(to right,rgba(55,80,90,.08) 1px,transparent 1px);background-size:100% 33.333%,14.285% 100%;border-bottom:1px solid rgba(55,80,90,.1)}
.overview-y-axis{position:absolute;z-index:3;left:0;top:-5px;height:162px;display:flex;flex-direction:column;justify-content:space-between;color:#697b83;font-size:9px}.overview-y-axis b{font-weight:600}
.overview-chart-axis{position:absolute!important;z-index:3;left:40px;right:0;bottom:0;margin:0!important;color:#637780!important;font-size:9px!important}
.overview-mini-chart .chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.overview-mini-chart .download-line{stroke:#5875f5;filter:drop-shadow(0 4px 7px rgba(88,117,245,.2))}
.overview-mini-chart .upload-line{stroke:#159b76;filter:drop-shadow(0 4px 7px rgba(21,155,118,.16))}
.overview-mini-chart .download-area{fill:rgba(88,117,245,.1)}
.overview-mini-chart .upload-area{fill:rgba(21,155,118,.06)}
[data-overview-chart-dots] circle.download{fill:#fff;stroke:#5875f5;stroke-width:2.5}[data-overview-chart-dots] circle.upload{fill:#fff;stroke:#159b76;stroke-width:2.5}
.overview-chart-note{grid-column:1/3;display:flex;align-items:center;gap:8px;margin:8px 0 0;color:#687a82;font-size:10px}.overview-chart-note .ui-icon{width:15px;height:15px;color:#5f747c}
.overview-entitlement-strip{min-height:82px!important;padding:0 28px!important;display:grid!important;grid-template-columns:minmax(310px,1.25fr) repeat(3,minmax(190px,.75fr));align-items:center}
.entitlement-plan,.entitlement-stat{min-width:0;display:flex;align-items:center;gap:15px}
.entitlement-plan>div{display:flex;align-items:center;gap:13px}.entitlement-plan h3{margin:0;color:#172a35;font-size:19px;font-weight:760}.entitlement-crown{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#fff8d7,#f5e4a7);color:#a87513;box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(170,127,29,.1)}.entitlement-crown .ui-icon{width:23px;height:23px}
.entitlement-stat{justify-content:center;min-height:42px;border-left:1px solid rgba(53,75,84,.11);color:#52666f;font-size:12px}.entitlement-stat .ui-icon{width:22px;height:22px;color:#38515c}.entitlement-stat b{margin-left:5px;color:#172a35;font-size:13px}.entitlement-stat em{font-style:normal}
.entitlement-activate{display:none;min-height:46px;padding:0 17px;border:0;border-radius:14px;background:#263e47;color:#fff;font-weight:760;cursor:pointer}.entitlement-activate span{margin-left:10px}
.overview-entitlement .active-chip{position:static;padding:6px 10px;font-size:9px}
.overview-connect{grid-column:auto;padding:24px 28px}
.overview-connect-title{display:flex;align-items:center;gap:14px}.overview-connect-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(55,74,83,.11);border-radius:50%;background:rgba(255,255,255,.62)}.overview-connect-icon .ui-icon{width:22px;height:22px}
.overview-connect .overview-card-head h3{font-size:22px}.overview-connect .overview-card-head p{margin-top:4px;font-size:11px}
.overview-subscription-row{margin-top:18px;grid-template-columns:42px minmax(0,1fr) 46px 92px!important;min-height:58px;background:rgba(255,255,255,.62)!important}
.overview-connect-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.overview-connect-actions>button{min-height:64px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 17px;border:1px solid rgba(55,74,83,.1);border-radius:16px;background:rgba(255,255,255,.46);color:#263d47;text-align:left;cursor:pointer}
.overview-connect-actions>button>.ui-icon{width:22px;height:22px}.overview-connect-actions span b,.overview-connect-actions span small{display:block}.overview-connect-actions span b{font-size:12px}.overview-connect-actions span small{margin-top:3px;color:#718087;font-size:9px;font-weight:560}.overview-connect-actions em{color:#405963;font-size:24px;font-style:normal}
.overview-connect-actions>button:hover{background:rgba(255,255,255,.82)}
.overview-connect-empty{display:none;min-height:92px;margin-top:18px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;border:1px solid rgba(55,74,83,.1);border-radius:18px;background:rgba(255,255,255,.48)}
.overview-connect-empty b{display:block;color:#20343d;font-size:14px}.overview-connect-empty p{margin:5px 0 0;color:#62747c;font-size:11px;line-height:1.55}.overview-connect-empty button,.subscription-empty-state>button{min-height:44px;padding:0 15px;border:0;border-radius:13px;background:#2b444d;color:#fff;font-weight:740;white-space:nowrap;cursor:pointer}.overview-connect-empty button span,.subscription-empty-state>button span{margin-left:9px}
.subscription-empty-state{display:none;min-height:190px;padding:28px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;border-radius:26px}.subscription-empty-state h3{margin:0 0 7px;color:#243841;font-size:22px}.subscription-empty-state p{margin:0;color:#5d7078;font-size:12px;line-height:1.65}

html[data-subscription-state="empty"] .overview-ring-value{stroke-dashoffset:452.4}
html[data-subscription-state="empty"] .overview-ring-accent{stroke:rgba(83,108,116,.11)}
html[data-subscription-state="empty"] .overview-chart-panel{opacity:.48}
html[data-subscription-state="empty"] .overview-entitlement-strip{grid-template-columns:minmax(0,1fr) auto}
html[data-subscription-state="empty"] .overview-entitlement-strip .entitlement-stat{display:none}
html[data-subscription-state="empty"] .entitlement-activate{display:inline-flex;align-items:center;justify-content:center}
html[data-subscription-state="empty"] .overview-entitlement .active-chip,
html[data-subscription-state="empty"] #subscription>.section-toolbar .active-chip{border-color:rgba(80,94,101,.13);background:rgba(255,255,255,.62);color:#677980}
html[data-subscription-state="empty"] .overview-entitlement .active-chip i,
html[data-subscription-state="empty"] #subscription>.section-toolbar .active-chip i{background:#91a0a6;box-shadow:none}
html[data-subscription-state="empty"] .overview-subscription-row,
html[data-subscription-state="empty"] .overview-connect-actions{display:none}
html[data-subscription-state="empty"] .overview-subscription-row{display:none!important}
html[data-subscription-state="empty"] .entitlement-crown{background:linear-gradient(145deg,#f8faf9,#dfe7e8);color:#75878d;box-shadow:inset 0 1px 0 #fff}
html[data-subscription-state="empty"] .overview-connect-empty{display:grid}
html[data-subscription-state="empty"] .subscription-overview,
html[data-subscription-state="empty"] #subscription>.import-panel{display:none}
html[data-subscription-state="empty"] .subscription-empty-state{display:grid}

@media(max-width:1200px){
  .overview-usage-content{grid-template-columns:220px 240px minmax(300px,1fr);gap:0 20px}.overview-chart-panel{padding-left:20px}.overview-ring{width:200px}
  .overview-entitlement-strip{grid-template-columns:minmax(270px,1.1fr) repeat(3,minmax(160px,.72fr))}
}
@media(max-width:900px){
  .route-app[data-active-view="overview"] .topbar{min-height:64px;margin-bottom:10px}
  .route-app .topbar{justify-content:space-between}
  .route-app .topbar-title{display:block;flex:0 0 auto}
  .route-app[data-active-view="overview"] .account-actions{width:auto;justify-content:flex-end}
  .route-app[data-active-view="overview"] .account-profile{margin-right:0}
  .overview-redesign{padding-bottom:18px}.overview-welcome{margin:0 6px 16px}.overview-welcome h2{font-size:34px}.overview-welcome p{font-size:12px}
  .overview-usage{padding:22px}.overview-usage-content{grid-template-columns:38% minmax(0,62%);grid-template-rows:auto auto auto;gap:17px 10px}
  .overview-ring-block>h3{display:flex}.overview-ring{width:min(100%,210px)}
  .overview-chart-panel{padding:42px 0 0;border:0}.overview-chart-head{position:absolute;left:0;top:0}.overview-chart-head h3{font-size:17px}.overview-chart-live{display:none}.overview-chart-legend{position:absolute;right:0;top:5px;margin:0;gap:12px}
  .overview-mini-chart{min-height:170px;padding-left:34px}.overview-mini-chart>svg{height:145px}.overview-chart-grid{left:34px;height:145px}.overview-y-axis{height:152px}.overview-chart-axis{left:34px}.overview-chart-axis span:nth-child(2){display:none}
  .overview-usage-facts{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,1fr);border-radius:18px}.overview-usage-facts>div{display:block;min-height:76px;padding:16px 14px;text-align:center;border-right:1px solid rgba(52,73,82,.11);border-bottom:0}.overview-usage-facts>div:last-child{border-right:0}.overview-usage-facts dd{margin-top:8px;font-size:16px}
  .overview-chart-note{grid-column:1/-1;grid-row:3;margin:0}
  .overview-entitlement-strip{min-height:166px!important;padding:20px!important;grid-template-columns:1fr 1fr 1fr;gap:16px 0}.entitlement-plan{grid-column:1/-1}.entitlement-stat{min-height:52px;padding:0 7px;font-size:11px;flex-direction:column;gap:7px;text-align:center}.entitlement-stat:nth-child(2){border-left:0}.entitlement-plan>div{flex-wrap:wrap}
}
@media(max-width:560px){
  .route-app[data-active-view="overview"] .topbar{padding:0 4px}.route-app .topbar-title{display:block;visibility:visible!important}.route-app .topbar-brand{gap:6px}.route-app .topbar-brand strong{font-size:13px}.route-app .topbar-brand b{font-size:8px}.route-app .topbar-brand i{height:12px}.route-app .account-profile{max-width:128px}.route-app .account-profile>span:last-child{display:grid}.route-app .account-profile span:last-child small{display:none}
  .overview-welcome h2{font-size:31px}.overview-welcome p{margin-top:7px}
  .overview-grid{gap:12px}.overview-grid>article{border-radius:25px}.overview-usage{padding:20px 16px 18px}
  .overview-usage-content{grid-template-columns:minmax(0,43%) minmax(0,57%);gap:15px 4px}.overview-ring-block>h3{font-size:21px}.overview-ring-block>h3 .ui-icon{display:none}.overview-ring{width:100%;max-width:176px}.overview-ring:before{inset:22px}.overview-ring strong{font-size:40px}.overview-ring small,.overview-ring span{font-size:10px}
  .overview-chart-panel{padding-top:40px}.overview-chart-head h3{font-size:16px}.overview-chart-legend{font-size:9px;gap:9px}.overview-mini-chart{min-height:157px;padding-left:30px}.overview-mini-chart>svg{height:132px}.overview-chart-grid{left:30px;height:132px;background-size:100% 33.333%,25% 100%}.overview-y-axis{height:139px;font-size:8px}.overview-chart-axis{left:30px;font-size:8px!important}
  .overview-usage-facts{gap:0}.overview-usage-facts>div{min-height:70px;padding:14px 6px}.overview-usage-facts dt{font-size:10px}.overview-usage-facts dd{font-size:14px}.overview-chart-note{align-items:flex-start;font-size:9px;line-height:1.45}
  .overview-entitlement-strip{min-height:162px!important;padding:18px 16px!important}.entitlement-crown{width:44px;height:44px}.entitlement-plan h3{font-size:18px}.entitlement-stat{font-size:10px}.entitlement-stat .ui-icon{width:20px;height:20px}.entitlement-stat b{display:block;margin:3px 0 0;font-size:11px}
  .overview-connect{padding:20px 16px}.overview-connect-icon{width:42px;height:42px}.overview-subscription-row{grid-template-columns:28px minmax(0,1fr) 42px 52px!important}.overview-subscription-row .link-lock{display:block!important}.overview-subscription-row .copy-control span:last-child{display:none}.overview-connect-actions>button{min-height:70px;padding:0 13px;grid-template-columns:28px minmax(0,1fr) auto}.overview-connect-actions>button>.ui-icon{width:20px;height:20px}
  .overview-connect-empty,.subscription-empty-state{grid-template-columns:auto minmax(0,1fr);padding:15px;gap:13px}.overview-connect-empty .simple-empty-icon,.subscription-empty-state .simple-empty-icon{width:44px;height:44px}.overview-connect-empty button,.subscription-empty-state>button{grid-column:1/-1;width:100%}
}
@media(max-width:390px){.overview-ring strong{font-size:36px}.overview-chart-head h3{font-size:15px}.overview-chart-legend{gap:6px}.overview-usage-facts dd{font-size:13px}.entitlement-stat{padding:0 3px}.overview-connect-actions span small{display:none}}