/* Approved sessions composition: light, navy/cyan, and compact variants. */
.sessions-design-pay9{--s31-bg:#ffffff;--s31-inset:#effaf9;--s31-line:#b6dedc;--s31-ink:#123849;--s31-muted:#426777;--s31-accent:#008984;--s31-quota:#99620c;--s31-track:#d5e9ea;--s31-button:#f5fcfc}
html[data-appearance=night] .sessions-design-pay9{--s31-bg:#092534;--s31-inset:#082332;--s31-line:#1a6175;--s31-ink:#edfaff;--s31-muted:#a7c6d5;--s31-accent:#22e4e7;--s31-quota:#e8b45f;--s31-track:#183f51;--s31-button:#0b2a3a}
#app #content .session-design31{padding:20px 20px 18px;border:1px solid var(--s31-line);border-radius:14px;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--s31-accent) 5%,var(--s31-bg)),var(--s31-bg) 70%);color:var(--s31-ink);box-shadow:0 6px 24px #001a2510;min-width:0;overflow:hidden}
#app #content .session-grid13{gap:16px}
#app #content .session-design31 .session-card-head{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:5px 12px;align-items:center;position:relative;margin:0 0 8px}
#app #content .session-design31 .device-mark12{grid-row:1/3;width:52px;height:62px;border-radius:11px;border:1px solid var(--s31-line);background:linear-gradient(145deg,var(--s31-inset),var(--s31-bg));color:var(--s31-accent)}
#app #content .session-design31 .device-mark12>svg:not(.device-signal1634){width:32px;height:36px}
#app #content .session-design31 .session-person13{min-width:0;align-self:end}
#app #content .session-design31 .session-person13 h3{font:750 16px/1.25 system-ui,sans-serif;color:var(--s31-ink);overflow-wrap:anywhere;margin:0 0 7px}
#app #content .session-design31 .session-person13>span{font:12px/1.4 system-ui,sans-serif;color:var(--s31-muted)}
#app #content .session-design31 .session-status13{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin:0;font-size:11px}
#app #content .session-design31 .session-status13 .last-seen-pay7,#app #content .session-design31 .session-policy26{display:none}
#app #content .session-design31 .session-status13>span:last-of-type:not(.state12){border:1px solid var(--s31-line);border-radius:7px;padding:4px 7px;font-size:10px;letter-spacing:0;color:var(--s31-ink)}
#app #content .session-design31 .state12{border-radius:8px;font-size:11px;padding:5px 8px}
#app #content .session-design31 .session-tools31{grid-column:2;display:flex;gap:4px;align-items:center;height:20px}
#app #content .session-design31 .session-tools31 button{border:0;background:transparent;padding:0 3px;min-height:20px;width:auto;color:var(--s31-muted);font-size:15px}
#app #content .session-design31 .timer-design31{position:relative;display:grid;place-items:center;width:214px;max-width:80%;aspect-ratio:1;margin:17px auto 24px;color:var(--s31-ink)}
.timer-design31>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.timer-design31 circle{fill:none;stroke-width:9;stroke-linecap:round}
.timer-track31{stroke:var(--s31-track)}
.timer-progress31{transition:stroke-dasharray .72s cubic-bezier(.22,.7,.2,1),filter .4s ease;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--s31-accent) 32%,transparent));animation:session-ring-glow-pay56 3.6s ease-in-out infinite}
.timer-content31{text-align:center;position:relative;max-width:82%;display:flex;flex-direction:column;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
#app #content .timer-content31 strong{font:750 46px/1.05 system-ui,sans-serif;color:var(--s31-ink);letter-spacing:-1px}
#app #content .timer-content31 strong em{font-size:.72em;font-style:normal;letter-spacing:0}
#app #content .timer-content31 b{font:650 22px/1.15 system-ui,sans-serif;color:var(--s31-ink)}
#app #content .timer-content31 .infinity31{font-size:66px;line-height:.85}
#app #content .timer-content31 .timer-caption31{font-size:24px}
#app #content .timer-content31 small{font:500 9px/1.3 system-ui,sans-serif;letter-spacing:1px;color:var(--s31-muted);margin-top:8px}
#app #content .session-design31 .usage-meter12{margin:0 0 15px}
#app #content .session-design31 .usage-meter12>div{gap:10px;margin-bottom:7px;font-size:12px;color:var(--s31-ink)}
#app #content .session-design31 .usage-meter12 strong{color:var(--s31-ink);font-weight:600;font-size:12px}
#app #content .session-design31 progress{width:100%;height:9px;border-radius:10px;background:var(--s31-track);accent-color:var(--s31-accent);appearance:none;overflow:hidden}
#app #content .session-design31 progress::-webkit-progress-bar{background:var(--s31-track);border-radius:10px}
#app #content .session-design31 progress::-webkit-progress-value{background:linear-gradient(105deg,var(--s31-accent) 0%,color-mix(in srgb,var(--s31-accent) 52%,#e2ffff) 42%,#eaffff 52%,var(--s31-accent) 68%,color-mix(in srgb,var(--s31-accent) 60%,#e2ffff) 100%);background-size:220% 100%;border-radius:10px;animation:session-usage-flow-pay56 3.6s linear infinite;transition:width .72s cubic-bezier(.22,.7,.2,1)}
#app #content .session-design31 progress::-moz-progress-bar{background:linear-gradient(105deg,var(--s31-accent) 0%,color-mix(in srgb,var(--s31-accent) 52%,#e2ffff) 42%,#eaffff 52%,var(--s31-accent) 68%,color-mix(in srgb,var(--s31-accent) 60%,#e2ffff) 100%);background-size:220% 100%;animation:session-usage-flow-pay56 3.6s linear infinite;transition:width .72s cubic-bezier(.22,.7,.2,1)}
#app #content .session-design31 .quota-meter12 strong{color:var(--s31-quota)}
#app #content .session12 .quota-meter12 progress{accent-color:#d99b35}
#app #content .session12 .quota-meter12 progress::-webkit-progress-value{background:linear-gradient(105deg,#d99b35 0%,#f3ca79 38%,#ffe0a0 52%,#d99b35 72%,#f3ca79 100%);background-size:220% 100%;animation:quota-flow-pay55 3.4s linear infinite;transition:width .72s cubic-bezier(.22,.7,.2,1)}
#app #content .session12 .quota-meter12 progress::-moz-progress-bar{background:linear-gradient(105deg,#d99b35 0%,#f3ca79 38%,#ffe0a0 52%,#d99b35 72%,#f3ca79 100%);background-size:220% 100%;animation:quota-flow-pay55 3.4s linear infinite;transition:width .72s cubic-bezier(.22,.7,.2,1)}
@keyframes quota-flow-pay55{to{background-position:220% 0}}
@keyframes session-usage-flow-pay56{to{background-position:220% 0}}
@keyframes session-ring-glow-pay56{0%,100%{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--s31-accent) 28%,transparent));opacity:.92}50%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--s31-accent) 58%,transparent));opacity:1}}
.motion-paused-pay55 #app #content .session12 .quota-meter12 progress::-webkit-progress-value,.motion-paused-pay55 #app #content .session12 .quota-meter12 progress::-moz-progress-bar,.motion-paused-pay55 #app #content .session-design31 progress::-webkit-progress-value,.motion-paused-pay55 #app #content .session-design31 progress::-moz-progress-bar,.motion-paused-pay55 #app #content .timer-progress31{animation-play-state:paused}
#app #content .session-design31 .session-speed26{border:0;padding:10px 0 17px;gap:12px}
#app #content .session-design31 .session-speed26 span{flex:1;font-size:20px;color:var(--s31-accent)}
#app #content .session-design31 .session-speed26 span+span{border-left:1px solid var(--s31-line);padding-left:20px}
#app #content .session-design31 .session-speed26 strong{display:inline;font-size:16px;letter-spacing:0;font-weight:650;color:var(--s31-ink)}
#app #content .session-design31 .session-speed26 small{font:11px/1.3 system-ui,sans-serif;color:var(--s31-muted);margin:4px 0 0 20px;opacity:1}
.connection-route31{border:1px solid var(--s31-line);border-radius:12px;padding:12px;background:var(--s31-inset);margin-bottom:10px;color:var(--s31-ink)}
.connection-route31>header{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:9px}
.connection-route31>header strong{font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.65px;color:var(--s31-ink)}
.connection-route31>header small{font:10px/1.3 system-ui,sans-serif;max-width:50%;color:var(--s31-muted);text-align:right}
#app #content .route-switch31{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;border:1px solid var(--s31-line);border-radius:9px;background:var(--s31-button);padding:7px 10px;color:var(--s31-ink);margin:5px 0;box-shadow:none}
.route-switch31>span:first-child{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.route-switch31 svg{height:21px;width:21px;stroke:currentColor}
#app #content .route-track31{display:inline-flex;align-items:center;width:47px;height:25px;min-width:47px;border-radius:20px;background:var(--s31-track);padding:3px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--s31-line) 85%,#fff)}
.route-track31 i{width:19px;height:19px;border-radius:50%;background:#f1fbff;box-shadow:0 1px 4px #001e3255;transform:translateX(0);transition:transform .18s ease}
#app #content .route-track31.is-on{background:var(--s31-accent);border-color:var(--s31-accent);box-shadow:0 0 9px color-mix(in srgb,var(--s31-accent) 25%,transparent)}
.route-track31.is-on i{transform:translateX(20px)}
.route-result31{display:flex;gap:7px;align-items:center;margin:9px 0 0;font:11px/1.4 system-ui,sans-serif;color:var(--s31-ink);min-height:17px}
.route-result31>i{width:8px;height:8px;border-radius:50%;background:#b5a057;flex-shrink:0}.route-result31>i.confirmed{background:#25c687;box-shadow:0 0 5px #25c68744}
#app #content .session-design31 .session-bottom13{border:0;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
#app #content .session-design31 .session-bottom13>span{font:11px/1.4 system-ui,sans-serif;display:flex;gap:6px;align-items:center;color:var(--s31-ink);flex:1;min-width:85px}
#app #content .session-design31 .session-bottom13 svg{width:19px;height:19px}
#app #content .session-design31 .session-bottom13 button{border:1px solid var(--s31-line);border-radius:8px;padding:8px 10px;background:var(--s31-button);color:var(--s31-ink);font-size:11px;min-height:36px;display:flex;align-items:center;gap:5px}
#app #content .session-temporary31{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:8px;border:2px solid var(--s31-accent);border-radius:10px;padding:10px;background:transparent;color:var(--s31-accent);margin-top:9px;text-align:center}
.session-temporary31>svg{width:19px;height:19px}.session-temporary31 strong{font-size:13px}.session-temporary31 small{display:block;font-size:10px;margin-top:4px;color:var(--s31-muted)}
.connection-route31 button:focus-visible,.session-temporary31:focus-visible{outline:3px solid var(--s31-accent);outline-offset:3px}
.compact-sessions13 .connection-route31{min-width:210px;padding:7px;margin:5px 0}.compact-sessions13 .connection-route31>header{display:none}.compact-sessions13 .connection-route31 .route-switch31{min-height:32px;padding:4px 7px}.compact-sessions13 .route-result31{font-size:10px}
@media(max-width:650px){#app #content .session-design31{padding:18px}#app #content .session-grid13{grid-template-columns:1fr}#app #content .session-design31 .session-person13 h3{font-size:15px}.connection-route31>header small{font-size:10px}.connection-route31>header strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.route-track31 i,.timer-progress31{transition:none!important}#app #content .session12 .quota-meter12 progress::-webkit-progress-value,#app #content .session12 .quota-meter12 progress::-moz-progress-bar{animation:none!important;transition:none!important}}
html[data-appearance=compact] #app #content .session12{padding:14px 14px 12px}
html[data-appearance=compact] #app #content .session12 .timer-design31{width:184px;margin:12px auto 16px}
html[data-appearance=compact] #app #content .session12 .session-card-head{gap:4px 9px}
html[data-appearance=compact] #app #content .session12 .usage-meter12{margin-bottom:10px}

#app #content .route-switch31>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#app #content .session-design31:before,#app #content .session-design31:after{display:none}
#app #content .session-grid13{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#app #content .session-design31{display:flex;flex-direction:column}
#app #content .session-design31 .session-card-head{min-height:84px;align-content:center}
#app #content .session-design31 .timer-design31{flex-shrink:0}
#app #content .session-design31>.connection-route31{margin-top:auto}
@media(max-width:1200px){#app #content .session-grid13{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#app #content .session-grid13{grid-template-columns:1fr}}

#app #content .session-design31>.session-temporary31{width:auto;min-width:118px;min-height:34px;align-self:flex-end;align-items:center;gap:7px;padding:7px 12px;border-width:1px;border-radius:8px;margin-top:9px}
#app #content .session-temporary31 small{display:none}
#app #content .session-temporary31 strong{font-size:12px;font-weight:600}
#app #content .session-temporary31>svg{width:16px;height:16px}

/* Digital Orbit: every value stays inside the ring, no network-driven ticks. */
#app #content .digital-orbit32{width:230px;max-width:88%;margin:22px auto 25px}
#app #content .digital-orbit32 .timer-ticks32{stroke:var(--s31-line);stroke-width:3;stroke-linecap:butt;stroke-dasharray:0.35 1.65;opacity:.8}
#app #content .digital-orbit32 .timer-content31{width:80%;max-width:80%;gap:7px}
#app #content .digital-orbit32 .digital-days32{font:700 clamp(32px,3.3vw,44px)/1.15 SawdaDigital,monospace;letter-spacing:-1px;white-space:nowrap}
#app #content .digital-orbit32 .digital-days32 em{font-size:.45em;margin-left:4px}
#app #content .digital-orbit32 .digital-clock32{font:650 19px/1.5 SawdaDigital,monospace;font-variant-numeric:tabular-nums;letter-spacing:.2px;white-space:nowrap;color:var(--s31-accent)}
.digital-clock32 i{font-style:normal;opacity:.7;padding:0 1px}
#app #content .digital-label32{font:500 7px/1.4 system-ui,sans-serif;letter-spacing:.7px;color:var(--s31-muted);white-space:nowrap}
#app #content .digital-orbit32 .timer-content31 small{margin-top:2px;font-size:8px;letter-spacing:1px}
#app #content .digital-orbit32 .infinity31{font:650 69px/1 system-ui,sans-serif;animation:lifetime32 4s ease-in-out infinite}
@keyframes lifetime32{50%{opacity:.65;transform:scale(.95)}}
.session-speed26{position:relative;flex-wrap:wrap;min-height:59px}
#app #content .session-speed26 .speed-age32{flex:0 0 100%;font:10px/1.4 system-ui,sans-serif;color:var(--s31-muted,#557583);margin:0;display:block}
.session-speed26[data-speed-state=stale] strong{opacity:.7}
@media(prefers-reduced-motion:reduce){.digital-orbit32 *{animation:none!important;transition:none!important}.session-design31 progress::-webkit-progress-value,.session-design31 progress::-moz-progress-bar{animation:none!important;transition:none!important}}
.compact-sessions13 .digital-orbit32{width:122px!important;max-width:none!important;margin:5px auto!important}
#app #content .compact-sessions13 .digital-orbit32 .digital-days32{font-size:23px}
#app #content .compact-sessions13 .digital-orbit32 .digital-clock32{font-size:11px}
#app #content .compact-sessions13 .digital-orbit32 .digital-label32{font-size:4px;letter-spacing:.2px}
#app #content .compact-sessions13 .digital-orbit32 .timer-content31{gap:3px}
#app #content .compact-sessions13 .digital-orbit32 .timer-content31 small{font-size:5px;letter-spacing:.3px}
#app #content .compact-sessions13 .digital-orbit32 .infinity31{font-size:36px}
#app #content .compact-sessions13 .digital-orbit32 .timer-content31 b:not(.digital-clock32){font-size:13px}

/* pay57: slower, calmer motion for session rings and quota/time progress. */
.timer-progress31{transition:stroke-dasharray 1.8s cubic-bezier(.22,.7,.2,1),filter .8s ease;animation:session-ring-glow-pay57 5.5s ease-in-out infinite}
#app #content .session-design31 progress::-webkit-progress-value{animation:session-usage-flow-pay57 7.5s linear infinite;transition:width 1.8s cubic-bezier(.22,.7,.2,1)}
#app #content .session-design31 progress::-moz-progress-bar{animation:session-usage-flow-pay57 7.5s linear infinite;transition:width 1.8s cubic-bezier(.22,.7,.2,1)}
#app #content .session12 .quota-meter12 progress::-webkit-progress-value{animation:quota-flow-pay57 7.5s linear infinite;transition:width 1.8s cubic-bezier(.22,.7,.2,1)}
#app #content .session12 .quota-meter12 progress::-moz-progress-bar{animation:quota-flow-pay57 7.5s linear infinite;transition:width 1.8s cubic-bezier(.22,.7,.2,1)}
@keyframes session-usage-flow-pay57{to{background-position:220% 0}}
@keyframes quota-flow-pay57{to{background-position:220% 0}}
@keyframes session-ring-glow-pay57{0%,100%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--s31-accent) 24%,transparent));opacity:.94}50%{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--s31-accent) 46%,transparent));opacity:1}}
@media(prefers-reduced-motion:reduce){.timer-progress31,#app #content .session-design31 progress::-webkit-progress-value,#app #content .session-design31 progress::-moz-progress-bar,#app #content .session12 .quota-meter12 progress::-webkit-progress-value,#app #content .session12 .quota-meter12 progress::-moz-progress-bar{animation:none!important;transition:none!important}}