[data-member-portal] { color-scheme: light; }
:where(.member-shell,.member-auth-shell) {
  --paper: #f5f5f3;
  --surface: #fff;
  --surface-subtle: #f5f6f8;
  --ink: #191b21;
  --muted: #565e6e;
  --accent: #395c8d;
  --accent-hover: #294972;
  --border: #e2e5eb;
  --control-border: #919bad;
  --nav-surface: #fdfdfd;
  --nav-active: #eaf0f8;
  --focus: #476fa8;
  --primary: #365988;
  --primary-hover: #2b4971;
  --on-primary: #fff;
  --chart-up: #687d9e;
  --chart-down: #456faf;
  --chart-fill: #5a82bf35;
  --track: #e7ecf4;
  --ok: #31533e;
  --ok-bg: #edf3ef;
  --panel-shadow: 0 1px 2px #1c2d4a08;
  --overlay-shadow: 0 10px 32px #182a4921;
  --radius-panel: 16px;
  --shell-gutter: clamp(1rem,2.85vw,2.5rem);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  min-inline-size: 0;
}
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] :where(.member-shell,.member-auth-shell) {
  --paper: #15181e;
  --surface: #1e232b;
  --surface-subtle: #242c36;
  --ink: #edf0f5;
  --muted: #b5becb;
  --accent: #b6cef2;
  --accent-hover: #d2e2fd;
  --border: #333d4b;
  --control-border: #737e90;
  --nav-surface: #1b2027;
  --nav-active: #293748;
  --focus: #a9c9f7;
  --primary: #bad0f2;
  --primary-hover: #d2e2fd;
  --on-primary: #1b2b41;
  --chart-up: #a9b5ca;
  --chart-down: #86ace7;
  --chart-fill: #86ace742;
  --track: #333e4f;
  --ok: #b6ddc5;
  --ok-bg: #283e35;
  --panel-shadow: 0 1px 2px #0002;
  --overlay-shadow: 0 10px 32px #0006;
  --error: #ffc1b9;
  --error-bg: #4b2b2a;
}
:where(.member-shell,.member-auth-shell) [hidden] { display: none !important; }
:where(.member-shell,.member-auth-shell) :focus-visible { outline-color: var(--focus); }
:where(.member-shell,.member-auth-shell) a { text-underline-offset: .18em; }

.member-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 13.5rem minmax(0,1fr);
}
.workspace-sidebar {
  position: sticky;
  z-index: 2;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  padding: 0 .85rem .85rem;
  overflow: auto;
  border-right: 1px solid var(--border);
  background: var(--nav-surface);
}
.workspace-brand { display: flex; align-items: center; min-height: 3.8rem; margin-bottom: .85rem; padding-inline: .35rem; }
:where(.workspace-brand,.member-auth-header,.topbar-brand) .wordmark { gap: .55rem; color: var(--ink); font-size: 1rem; letter-spacing: -.035em; }
.relay-mark { flex: 0 0 auto; }
.relay-mark-inverse, [data-theme="dark"] .relay-mark:not(.relay-mark-inverse) { display: none; }
[data-theme="dark"] .relay-mark-inverse { display: block; }
.workspace-nav { display: grid; gap: .85rem; }
.workspace-nav-group { display: grid; gap: .13rem; }
.workspace-nav-group > p {
  color: var(--muted);
  font-size: .73rem;
  font-weight: 650;
  padding: .22rem .65rem;
}
.workspace-link, .workspace-logout .nav-control {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: .45rem .6rem;
}
.workspace-link:hover, .workspace-logout .nav-control:hover { background: var(--surface-subtle); color: var(--ink); }
.workspace-link[aria-current="page"], .mobile-tab-active > .workspace-link { background: var(--nav-active); color: var(--accent); font-weight: 700; }
.workspace-footer { margin-top: auto; padding-top: 1.65rem; }
.workspace-logout { margin: 0; }
.workspace-content { min-width: 0; }
.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 3.8rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: .4rem var(--shell-gutter);
  border-bottom: 1px solid var(--border);
  background: var(--nav-surface);
}
.topbar-brand, .mobile-tabs { display: none; }
.workspace-tools { display: flex; align-items: center; gap: .5rem; }
.workspace-tools form { margin: 0; }
.toolbar-circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--ink);
  list-style: none;
}
.toolbar-circle::-webkit-details-marker, .mobile-tab-group summary::-webkit-details-marker { display: none; }
.toolbar-circle:hover, .workspace-support[open] summary { background: var(--nav-active); color: var(--accent); }
.toolbar-language { font-size: .77rem; font-weight: 720; }
.workspace-support { position: relative; z-index: 1; }
.workspace-popover { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--overlay-shadow); }
.support-popover { position: absolute; right: 0; top: calc(100% + .5rem); width: min(19rem,calc(100vw - 2rem)); padding: .95rem; }
.support-popover h2 { font-size: 1rem; margin-bottom: .6rem; }
.support-popover label { display: block; font-size: .78rem; color: var(--muted); margin-top: .55rem; }
.contact-copy { display: flex; align-items: stretch; gap: .35rem; margin-top: .22rem; }
.contact-copy input { flex: 1 1 auto; min-width: 0; width: 100%; background: var(--surface-subtle); border: 1px solid var(--control-border); padding: .4rem .48rem; border-radius: 8px; font-size: .86rem; }
.contact-copy button { flex: 0 0 auto; background: var(--surface); }
.support-email-link { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; font-size: .84rem; }
.support-popover .action-feedback { color: var(--muted); font-size: .79rem; margin: 0; }
.member-shell .skip-link { z-index: 5; }

.member-main {
  min-width: 0;
  width: 100%;
  max-width: 86rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 2.45vw, 2.1rem) var(--shell-gutter) 3.5rem;
}
.member-shell .member-main [id] { scroll-margin-block-start: 4.4rem; }
.member-main h1 { font-size: clamp(1.7rem,2.55vw,2.18rem); line-height: 1.15; font-weight: 720; letter-spacing: -.035em; }
.member-main h2 { color: var(--ink); font-size: 1.04rem; font-weight: 720; line-height: 1.35; overflow-wrap: anywhere; }
.workspace-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  margin-bottom: 1.25rem;
}
.workspace-heading > div { min-width: 0; }
.workspace-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.workspace-heading .section-note { margin-top: .38rem; }
.workspace-subline { display: flex; align-items: center; gap: .6rem; color: var(--muted); margin-top: .5rem; overflow-wrap: anywhere; }
.workspace-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem .95rem;
}
.workspace-section-head > div { min-width: 0; }
.workspace-paragraph { margin-top: .7rem; font-size: .89rem; }
.section-note { font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.workspace-section-head h2 + p { margin-top: .23rem; }
.member-main .card { background: var(--surface); box-shadow: var(--panel-shadow); padding: clamp(.95rem,1.65vw,1.25rem); }
.member-main .pill { background: var(--surface-subtle); color: var(--muted); border-color: var(--border); font-size: .77rem; }
.member-main .pill-online { background: var(--ok-bg); color: var(--ok); }
.member-main .empty-state { font-size: .88rem; padding-block: .3rem; }
.member-main .button, .member-auth-header .button { border-color: var(--border); border-radius: 9px; font-weight: 660; gap: .45rem; padding-inline: .85rem; }
.member-main .button:hover { background: var(--surface-subtle); }
.member-main .button-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.member-main .button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.member-main .button-danger { border-color: var(--control-border); }
.member-main input:not([type="hidden"]), .member-main select, .member-main textarea {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--control-border);
}
.member-main input[readonly], .member-main textarea[readonly] { background: var(--surface-subtle); }
.member-main .text-link, .member-main input, .member-main select, .member-main textarea { font-size: .9rem; }
.member-main .notice { margin-block: 0 1.05rem; }
.member-main .member-notice { font-size: .9rem; }
.member-main .notice a { color: inherit; font-weight: 700; margin-inline-start: .4rem; }
.member-main .action-feedback:not(:empty) { padding: .55rem .7rem; margin-top: .75rem; background: var(--surface-subtle); border-radius: 8px; }

.workspace-icon {
  display: inline-grid;
  place-items: center;
  width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 auto;
  position: relative;
  color: inherit;
}
.workspace-icon::before, .workspace-icon::after { position: absolute; display: block; }
.icon-dashboard::before { content: ""; width: .93rem; height: .88rem; border: 1.5px solid; border-radius: 3px; }
.icon-dashboard::after { content: ""; left: 46%; width: 1.5px; height: .8rem; background: currentColor; }
.icon-connect::before, .icon-connect::after { content: ""; width: .63rem; height: .39rem; border: 1.5px solid; border-radius: 3px; transform: rotate(-40deg); }
.icon-connect::before { translate: -.17rem .14rem; }
.icon-connect::after { translate: .18rem -.14rem; }
.icon-server::before, .icon-server::after { content: ""; width: .92rem; height: .39rem; border: 1.5px solid; border-radius: 2px; }
.icon-server::before { translate: 0 -.23rem; }
.icon-server::after { translate: 0 .23rem; }
.icon-download::before { content: ""; width: .72rem; height: .3rem; border: 1.5px solid; border-top: 0; border-radius: 0 0 2px 2px; bottom: .1rem; }
.icon-download::after { content: ""; width: .42rem; height: .42rem; border: solid currentColor; border-width: 0 1.7px 1.7px 0; rotate: 45deg; top: .22rem; }
.icon-account::before { content: ""; width: .42rem; height: .42rem; border: 1.5px solid; border-radius: 50%; top: .06rem; }
.icon-account::after { content: ""; width: .92rem; height: .44rem; border: 1.5px solid; border-bottom: 0; border-radius: 5px 5px 0 0; bottom: .09rem; }
.icon-invite::before { content: ""; width: .96rem; height: .66rem; border: 1.5px solid; border-radius: 3px; }
.icon-invite::after { content: ""; height: .5rem; border-left: 1.5px dashed currentColor; left: .38rem; }
.icon-logout::before { content: ""; width: .63rem; height: .86rem; border: 1.5px solid; border-right: 0; left: .1rem; border-radius: 2px 0 0 2px; }
.icon-logout::after { content: ""; width: .43rem; height: .43rem; border: solid currentColor; border-width: 1.5px 1.5px 0 0; rotate: 45deg; right: .12rem; }
.icon-calendar::before { content: ""; width: .91rem; height: .84rem; border: 1.5px solid; border-radius: 2px; }
.icon-calendar::after { content: ""; width: .83rem; height: 1.5px; background: currentColor; top: .37rem; }
.icon-device::before { content: ""; width: .98rem; height: .67rem; border: 1.5px solid; border-radius: 2px; top: .07rem; }
.icon-device::after { content: ""; width: .59rem; height: 1.5px; background: currentColor; bottom: .12rem; }
.icon-phone::before { content: ""; width: .63rem; height: .94rem; border: 1.5px solid; border-radius: 3px; }
.icon-phone::after { content: ""; width: .17rem; height: 1.5px; background: currentColor; bottom: .17rem; }
.icon-traffic::before { content: ""; width: .65rem; height: .82rem; border: 1.5px solid; border-radius: 55% 55% 55% 15%; rotate: -45deg; }
.icon-chart::before { content: ""; width: .13rem; height: .35rem; background: currentColor; box-shadow: .29rem 0 0 .01rem, .58rem 0 0 .015rem; left: .17rem; bottom: .08rem; }
.icon-chart::after { content: ""; width: .13rem; height: .41rem; background: currentColor; left: .46rem; bottom: .25rem; box-shadow: .29rem -.13rem; }
.icon-wallet::before { content: ""; width: .96rem; height: .7rem; border: 1.5px solid; border-radius: 3px; }
.icon-wallet::after { content: ""; width: .37rem; height: .31rem; border: 1.5px solid; border-radius: 2px 0 0 2px; right: .06rem; }
.icon-mail::before { content: ""; width: .98rem; height: .68rem; border: 1.5px solid; border-radius: 3px; }
.icon-mail::after { content: ""; width: .49rem; height: .49rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; top: .12rem; }
.icon-language::before { content: ""; width: .87rem; height: .87rem; border: 1.5px solid; border-radius: 50%; }
.icon-language::after { content: ""; width: .41rem; height: .84rem; border: 1.5px solid; border-radius: 50%; }
.icon-key::before { content: ""; width: .46rem; height: .46rem; border: 1.5px solid; border-radius: 50%; translate: -.18rem -.13rem; }
.icon-key::after { content: ""; width: .54rem; height: .15rem; background: currentColor; rotate: 31deg; translate: .23rem .19rem; border-radius: 1px; }
.icon-theme::before { content: ""; width: .89rem; height: .89rem; border: 1.5px solid; border-radius: 50%; }
.icon-theme::after { content: ""; width: .76rem; height: .76rem; border-radius: 50%; background: var(--surface-subtle); top: -.08rem; right: -.05rem; }
.toolbar-circle:hover .icon-theme::after { background: var(--nav-active); }
[aria-pressed="true"] .icon-theme::before { width: .55rem; height: .55rem; }
[aria-pressed="true"] .icon-theme::after { inset: auto; width: .11rem; height: .11rem; background: currentColor; box-shadow: 0 -.51rem, 0 .51rem, .51rem 0, -.51rem 0, .37rem .37rem, -.37rem .37rem, .37rem -.37rem, -.37rem -.37rem; }
.icon-support::before { content: ""; width: 1rem; height: .78rem; border: 1.5px solid; border-radius: 5px; top: .07rem; }
.icon-support::after { content: ""; width: .29rem; height: .29rem; border: solid; border-width: 0 0 1.5px 1.5px; background: var(--surface-subtle); rotate: -22deg; left: .25rem; bottom: .13rem; }
.toolbar-circle:hover .icon-support::after, .workspace-support[open] .icon-support::after { background: var(--nav-active); }
.icon-announcement::before { content: ""; width: .95rem; height: .7rem; border: 1.5px solid; border-radius: 3px; transform: skewY(-10deg); top: .08rem; }
.icon-announcement::after { content: ""; width: .12rem; height: .36rem; background: currentColor; border-radius: 2px; left: .32rem; bottom: .02rem; transform: rotate(-18deg); }

.member-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; }
.member-metrics .card + .card { margin: 0; }
.metric-label { position: relative; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: .45rem; color: var(--ink); font-weight: 640; font-size: .875rem; }
.metric-label .workspace-icon { width: 1.65rem; height: 1.65rem; border-radius: 7px; background: var(--nav-active); color: var(--accent); }
.metric-label .icon-device::before, .metric-label .icon-chart::before { top: auto; bottom: .55rem; }
.metric-label .icon-device::after { bottom: .37rem; }
.metric-label .icon-chart::before { bottom: .37rem; left: .37rem; }
.metric-label .icon-chart::after { left: .66rem; bottom: .54rem; }
.metric-label .icon-calendar::after { top: .65rem; }
.metric-value {
  font-size: clamp(1.72rem,2.85vw,2.35rem);
  font-weight: 740;
  line-height: 1.17;
  letter-spacing: -.042em;
  font-variant-numeric: tabular-nums;
  margin-top: .58rem;
  overflow-wrap: anywhere;
}
.metric-value > span { font-size: .48em; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.metric-bytes { font-size: clamp(1.52rem,2.55vw,2.12rem); line-height: 1.32; }
.metric-caption { margin-top: .55rem; color: var(--muted); font-size: .76rem; line-height: 1.38; }
.metric-divider { margin-inline: .15rem; }
.member-metric .quota-meter { height: 5px; margin-top: .55rem; background: var(--track); }
.member-metric .quota-meter::-webkit-progress-bar { background: var(--track); }
.member-metric .quota-meter::-webkit-progress-value { background: var(--chart-down); }
.member-metric .quota-meter::-moz-progress-bar { background: var(--chart-down); }

.member-chart-grid, .member-connection-grid, .member-account-grid, .account-overview { display: grid; align-items: start; gap: .85rem; }
.member-chart-grid { grid-template-columns: minmax(0,1.9fr) minmax(15rem,1fr); margin-top: .85rem; }
.dashboard-column { display: grid; gap: .85rem; min-width: 0; }
.member-chart-grid .card + .card, .member-connection-grid .card + .card, .member-account-grid .card + .card { margin-top: 0; }
.period-label { color: var(--muted); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 99px; font-size: .75rem; padding: .2rem .62rem; }
.usage-chart-totals { display: flex; flex-wrap: wrap; gap: .55rem clamp(.7rem,2.5vw,1.75rem); margin-block: .95rem .65rem; }
.usage-chart-totals > div { display: grid; gap: .15rem; }
.usage-chart-totals span { display: flex; gap: .25rem; align-items: center; color: var(--muted); font-size: .76rem; }
.usage-chart-totals strong { font-size: clamp(1rem,1.9vw,1.28rem); font-variant-numeric: tabular-nums; font-weight: 705; }
.usage-chart-totals > div:first-child strong { line-height: 1.28; font-size: clamp(1.3rem,2.3vw,1.68rem); letter-spacing: -.035em; }
.legend-dot { width: .72rem; height: .15rem; border-radius: 1px; }
.legend-up { background: repeating-linear-gradient(90deg,var(--chart-up) 0 4px,transparent 4px 6px); }
.legend-down { background: var(--chart-down); }
.traffic-chart { position: relative; margin: 0; }
.traffic-chart canvas { display: block; width: 100%; height: clamp(9.8rem,15vw,13.3rem); }
.chart-tooltip {
  position: absolute;
  top: .2rem;
  right: .4rem;
  max-width: calc(100% - .8rem);
  padding: .35rem .52rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--overlay-shadow);
  color: var(--ink);
  border-radius: 8px;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.chart-tooltip-start { right: auto; left: .4rem; }
.member-main .chart-empty { display: grid; place-items: center; min-height: 9rem; border: 1px dashed var(--border); border-radius: 10px; padding: 1rem; text-align: center; }

.usage-gauge {
  width: min(75%,11.1rem);
  aspect-ratio: 2 / 1;
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-items: end;
  margin: 1.15rem auto .92rem;
}
.usage-gauge::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 270deg,var(--chart-down) calc(var(--filled,0) * 1.8deg),var(--track) 0);
  background: conic-gradient(from 270deg,var(--chart-down) calc(attr(data-fill type(<number>),0) * 1.8deg),var(--track) 0);
  mask-image: radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
}
.usage-gauge-text { z-index: 1; display: grid; justify-items: center; padding-bottom: .1rem; }
.usage-gauge strong { font-size: 1.86rem; line-height: 1.1; font-weight: 735; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.usage-gauge span { font-size: .75rem; color: var(--muted); margin-top: .18rem; }
.meter-1 { --filled: 5; } .meter-2 { --filled: 10; } .meter-3 { --filled: 15; } .meter-4 { --filled: 20; } .meter-5 { --filled: 25; }
.meter-6 { --filled: 30; } .meter-7 { --filled: 35; } .meter-8 { --filled: 40; } .meter-9 { --filled: 45; } .meter-10 { --filled: 50; }
.meter-11 { --filled: 55; } .meter-12 { --filled: 60; } .meter-13 { --filled: 65; } .meter-14 { --filled: 70; } .meter-15 { --filled: 75; }
.meter-16 { --filled: 80; } .meter-17 { --filled: 85; } .meter-18 { --filled: 90; } .meter-19 { --filled: 95; } .meter-20 { --filled: 100; }
.member-compact-list { margin-top: .75rem; font-size: .81rem; }
.member-compact-list > div {
  padding: .45rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .14rem .75rem;
  border-top: 1px solid var(--border);
}
.member-compact-list dt { color: var(--muted); }
.member-compact-list dd { font-weight: 610; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.member-announcements .icon-announcement { color: var(--accent); }
.member-announcements .empty-state { margin-top: .55rem; }
.announcement-list { list-style: none; margin: .3rem 0 0; padding: 0; }
.announcement-list li { padding: .64rem 0; overflow-wrap: anywhere; }
.announcement-list li + li { border-top: 1px solid var(--border); }
.announcement-list li:last-child { padding-bottom: 0; }
.announcement-list time { color: var(--muted); font-size: .73rem; font-variant-numeric: tabular-nums; }
.announcement-list h3 { margin: .07rem 0 .15rem; font-size: .89rem; font-weight: 680; }
.announcement-list p { color: var(--muted); font-size: .84rem; white-space: pre-line; }
.member-table-wrap { margin-top: .7rem; max-height: 25rem; overflow: auto; }
.member-table-wrap table { width: 100%; border-collapse: collapse; font-size: .84rem; text-align: start; }
.member-table-wrap th, .member-table-wrap td { text-align: start; padding: .5rem .25rem; border-bottom: 1px solid var(--border); }
.member-table-wrap thead th { color: var(--muted); background: var(--surface); font-weight: 640; position: sticky; top: 0; }
.member-table-wrap tbody th { font-weight: 620; font-variant-numeric: tabular-nums; }
.member-table-wrap tbody td:last-child { color: var(--muted); }
.member-table-wrap tbody tr:last-child > * { border-bottom: 0; }

.member-connection-grid { grid-template-columns: minmax(15rem,.86fr) minmax(0,1.45fr); }
.connection-work { display: grid; gap: .85rem; min-width: 0; }
.device-list { margin-top: .8rem; }
.device-item { align-items: center; flex-wrap: nowrap; border-color: var(--border); }
.device-mark, .node-mark, .login-step > .workspace-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--accent);
}
.device-mark { align-self: center; }
.device-list .record-body { flex: 1 1 auto; }
.device-list .record-body a { font-weight: 670; color: var(--ink); }
.device-list .record-body a[aria-current="true"] { color: var(--accent); }
.device-select { display: grid; align-content: center; min-height: 44px; text-decoration: none; }
.device-select:hover strong, .device-select[aria-current="true"] strong { text-decoration: underline; }
.device-selected { background: var(--surface-subtle); border-radius: 9px; padding-inline: .4rem; }
.member-config-output { border-color: var(--control-border); }
.connection-meta { margin-top: .85rem; }
.selected-device .notice { margin-top: .72rem; }
.device-maintenance { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .7rem; padding-top: .4rem; border-top: 1px solid var(--border); }
.device-maintenance details[open] { flex-basis: 100%; }
.member-device-mode { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .4rem .5rem; margin-top: .85rem; }
.member-device-mode .field-help { grid-column: 1 / -1; }
.member-device-form { display: grid; gap: .75rem; margin-top: .42rem; }
.member-device-form .button, .first-login-form .button { justify-self: start; margin-top: .35rem; }
.add-device-card .add-device { margin: 0; }
.add-device-card summary { color: var(--ink); padding-block: .48rem; font-weight: 715; }
.add-device-card .new-device-meta { margin: .1rem 0; }
.add-device-card .new-device-meta > div { padding-block: .32rem; }
.node-heading { display: flex; align-items: center; gap: .65rem; }
.member-node { max-width: 46rem; }

.account-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.account-overview, .member-account-grid { grid-template-columns: minmax(0,1.9fr) minmax(15rem,1fr); margin-bottom: .85rem; }
.account-overview { align-items: stretch; }
.account-identity { align-self: start; min-height: 11.5rem; }
.membership-pass {
  --pass-ink: #1f385c;
  --pass-secondary: #355578;
  --pass-line: #4a6a9840;
  --pass-surface: #edf4ff;
  --pass-end: #d6e4f7;
  --pass-halo: #ffffffdf;
  --pass-mark: url('/static/vocanect-mark.svg');
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 11.5rem;
  padding: 1.04rem 1.18rem;
  border: 1px solid var(--pass-line);
  border-radius: var(--radius-panel);
  background: radial-gradient(ellipse at 85% 0,var(--pass-halo),transparent 66%), linear-gradient(144deg,var(--pass-surface),var(--pass-end));
  color: var(--pass-ink);
  box-shadow: var(--panel-shadow);
}
.membership-pass--pro {
  --pass-ink: #f3f6fd;
  --pass-secondary: #c7d9f3;
  --pass-line: #abc8f24f;
  --pass-surface: #253a5a;
  --pass-end: #12243d;
  --pass-halo: #5175aa83;
  --pass-mark: url('/static/vocanect-mark-inverse.svg');
}
.membership-pass--pending {
  --pass-ink: var(--ink);
  --pass-secondary: var(--muted);
  --pass-line: var(--border);
  --pass-surface: var(--surface);
  --pass-end: var(--surface-subtle);
  --pass-halo: transparent;
}
[data-theme="dark"] .membership-pass--pending .pass-top img { filter: invert(1); }
.pass-imprint {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background: var(--pass-mark) right -1.7rem top -2.85rem / 12.2rem no-repeat,
    repeating-radial-gradient(ellipse at 98% -12%,transparent 0 18px,var(--pass-secondary) 19px,transparent 20px 24px);
}
.pass-top { width: 100%; display: flex; justify-content: space-between; align-items: start; gap: .55rem; color: var(--pass-secondary); }
.pass-label { display: flex; align-items: center; gap: .4rem; min-height: 26px; font-size: .8rem; line-height: 1.3; font-weight: 680; }
.pass-top img { display: block; }
.member-main .pass-tier, .pass-tier { color: var(--pass-ink); font-size: clamp(1.7rem,2.6vw,2.24rem); margin-top: .52rem; line-height: 1.12; font-weight: 740; letter-spacing: -.045em; }
.pass-date { color: var(--pass-secondary); font-size: .76rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pass-top .pass-date { display: grid; gap: .08rem; max-width: 66%; text-align: end; padding: .25rem .48rem; border-radius: 7px; background: var(--pass-surface); line-height: 1.35; }
.pass-top .pass-date span { font-size: .68rem; }
.pass-top .pass-date time { font-weight: 640; }
.pass-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: .65rem;
  padding: .25rem .74rem;
  border: 1px solid var(--pass-line);
  border-radius: 9px;
  color: inherit;
  background: var(--pass-surface);
  font-size: .83rem;
  font-weight: 670;
  text-decoration: none;
}
.pass-action:hover, .pass-redeem[open] > summary { background: var(--pass-end); }
.pass-action:focus-visible { outline-color: currentColor; }
.pass-redeem { width: 100%; margin-top: auto; padding-top: .85rem; }
.pass-redeem > summary { list-style: none; }
.pass-redeem > summary::-webkit-details-marker { display: none; }
.redeem-panel { margin-top: .55rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); background: var(--surface); }
.redeem-panel form { gap: .42rem; }
.redeem-panel label { font-weight: 650; font-size: .85rem; }
.redeem-fields { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; }
.redeem-fields input { min-width: 0; }
.redeem-panel .section-note { font-size: .77rem; }
.qualification-error { color: var(--error); font-size: .82rem; }
.membership-pass--compact { min-height: 0; padding: .7rem .72rem; border-radius: 13px; }
.membership-pass--compact .pass-label { min-height: 19px; font-size: .71rem; }
.membership-pass--compact .pass-top img { width: 19px; height: 19px; }
.membership-pass--compact .pass-tier { font-size: 1.42rem; margin-top: .38rem; }
.membership-pass--compact .pass-date { font-size: .71rem; margin-top: .2rem; }
.pass-account-link { width: 100%; margin-top: .58rem; font-size: .79rem; padding-inline: .58rem; }
.pass-account-link[aria-current="page"] { background: var(--pass-end); }
.membership-pass--compact .pass-imprint { background-size: 8.5rem, auto; background-position: top -1.3rem right -1.8rem, center; }
.identity-heading { display: flex; gap: .7rem; align-items: center; }
.identity-avatar {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  background: var(--nav-active);
  color: var(--accent);
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 740;
}
.account-figures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin-top: .98rem; }
.account-figures > div { border: 1px solid var(--border); padding: .68rem .82rem; border-radius: 10px; background: var(--surface-subtle); }
.account-figures dt { display: flex; align-items: center; gap: .4rem; font-weight: 620; font-size: .85rem; color: var(--muted); }
.account-figures dd { margin-top: .35rem; font-size: 1.5rem; font-weight: 690; line-height: 1.21; font-variant-numeric: tabular-nums; }
.account-figures dd span { font-size: .65em; color: var(--muted); }
.account-figures .panel-caption { font-size: .78rem; color: var(--muted); font-weight: normal; line-height: 1.4; overflow-wrap: anywhere; }
.settings-rows { margin-top: .55rem; }
.settings-rows > * + * { border-top: 1px solid var(--border); }
.setting-row { display: flex; gap: .6rem; align-items: center; padding: .72rem .25rem; min-height: 44px; color: var(--ink); font-size: .9rem; }
.setting-row .section-note { display: block; margin-top: .15rem; font-size: .8rem; }
.setting-row > .workspace-icon { color: var(--accent); }
.setting-disclosure summary:hover { background: var(--surface-subtle); }
.setting-arrow {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border: solid var(--muted);
  border-width: 1.5px 1.5px 0 0;
  rotate: 45deg;
  margin-left: auto;
  margin-right: .2rem;
}
.setting-disclosure summary { list-style: none; }
.setting-disclosure summary::-webkit-details-marker { display: none; }
.setting-disclosure summary::after { content: ""; flex: 0 0 auto; width: .47rem; height: .47rem; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; rotate: 45deg; margin-inline-start: auto; }
.setting-disclosure[open] summary::after { rotate: 225deg; }
.setting-details { padding: .05rem .4rem .6rem 1.9rem; }
.version-value { margin-inline-start: auto; font-size: .81rem; color: var(--muted); text-align: end; overflow-wrap: anywhere; }
.setting-row .service-contacts { display: flex; flex-wrap: wrap; gap: .15rem .65rem; }
.account-contact-details { max-width: 26rem; }
.account-contact-details label { display: block; font-size: .78rem; color: var(--muted); margin-top: .4rem; }
.account-contact-details .action-feedback { color: var(--muted); font-size: .79rem; }
.related-sites { padding: .7rem .25rem .05rem; }
.related-sites h3 { margin: 0 0 .55rem; font-size: .88rem; }
.related-sites-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.related-site { min-width: 0; min-height: 48px; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; padding: .48rem .64rem; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: var(--surface-subtle); font-size: .83rem; font-weight: 660; text-decoration: none; }
a.related-site:hover { border-color: var(--control-border); color: var(--accent); }
.related-site .workspace-icon { color: var(--accent); }
.related-state { color: var(--muted); margin-inline-start: auto; font-size: .72rem; font-weight: 550; }
.qualification-history .empty-state { margin-top: .5rem; }
.qualification-history .record { align-items: center; }
.redemption-success { margin-top: .55rem; border-radius: 8px; padding: .43rem .6rem; font-size: .83rem; background: var(--ok-bg); color: var(--ok); }

.guide-selector { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin-bottom: .87rem; }
.guide-selector .card + .card { margin: 0; }
.guide-shortcut { display: flex; min-height: 66px; gap: .6rem; align-items: center; color: var(--ink); text-decoration: none; }
.guide-shortcut:hover { border-color: var(--control-border); background: var(--surface-subtle); }
.guide-shortcut strong, .guide-shortcut div span { display: block; }
.guide-shortcut div { min-width: 0; overflow-wrap: anywhere; }
.guide-shortcut div span { color: var(--muted); font-size: .82rem; }
.guide-panel .steps { margin-top: .88rem; font-size: .91rem; }
.guide-footnote { margin-top: .68rem; }
.guide-panel .recover-list dt { font-size: .9rem; }
.guide-panel .recover-list dd { font-size: .85rem; }
.guide-assistance { border-top: 1px solid var(--border); margin-top: .78rem; }
.guide-assistance textarea { margin-top: .6rem; }

.member-auth-shell { min-height: 100vh; }
.member-auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  min-height: 62px;
  width: min(75rem,100%);
  margin-inline: auto;
  padding: .4rem clamp(1rem,3vw,2.5rem);
}
.auth-guide-link { display: grid; place-items: center; min-height: 44px; color: var(--ink); font-size: .87rem; }
.member-auth-shell .shell-narrow { max-width: 37rem; }
.member-auth-shell .member-login-main { width: min(62rem,100%); padding-top: clamp(1.25rem,8vh,5.7rem); }
.member-login-layout { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr); gap: .95rem; }
.member-main .member-login-card { padding: clamp(1.15rem,4.3vw,2.4rem); }
.member-login-card .auth-form { margin-top: 1.15rem; gap: .43rem; }
.member-login-card .auth-form label { font-size: .88rem; }
.member-login-card .auth-form button { margin-top: .9rem; }
.member-login-aside {
  padding: clamp(1.1rem,3.2vw,2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface-subtle);
  align-content: center;
}
.member-login-aside h2 { font-size: 1.23rem; padding-bottom: .65rem; }
.login-step { display: flex; gap: .6rem; padding-block: .65rem; }
.login-step + .login-step { border-top: 1px solid var(--border); }
.login-step strong { font-size: .89rem; }
.login-step p { font-size: .82rem; color: var(--muted); }
.first-login-form { margin-top: .7rem; gap: .38rem; }
.first-login-form label:not(:first-of-type) { margin-top: .42rem; }
.first-login-form label { font-size: .88rem; }
.first-login-form .email-code { width: min(100%,13rem); letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.password-panel { max-width: 36rem; }

@media (max-width: 71rem) {
  .member-shell { grid-template-columns: 12.1rem minmax(0,1fr); }
}
@media (max-width: 62rem) {
  .member-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .member-chart-grid { grid-template-columns: minmax(0,1.55fr) minmax(12.8rem,1fr); }
  .account-overview, .member-account-grid { grid-template-columns: minmax(0,1fr); }
  .member-connection-grid { grid-template-columns: minmax(12rem,.8fr) minmax(0,1.2fr); }
}
@media (max-width: 46rem) {
  .member-shell { display: block; }
  .workspace-sidebar { display: none; }
  .workspace-topbar { justify-content: space-between; padding-top: calc(.36rem + env(safe-area-inset-top)); }
  .topbar-brand { display: block; }
  .mobile-tabs {
    position: fixed;
    inset: auto 0 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .46rem;
    padding: .36rem var(--shell-gutter) calc(.36rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--nav-surface);
  }
  .mobile-tabs > .workspace-link, .mobile-tab-group > .workspace-link {
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    gap: .26rem;
    padding: .26rem .12rem;
    text-align: center;
    font-size: .76rem;
    list-style: none;
  }
  .mobile-tab-group[open] > .workspace-link { background: var(--nav-active); color: var(--accent); }
  .mobile-tab-menu {
    position: absolute;
    right: var(--shell-gutter);
    bottom: calc(100% + .45rem);
    display: grid;
    gap: .16rem;
    width: min(22rem,calc(100% - 2 * var(--shell-gutter)));
    padding: .43rem;
  }
  .mobile-tab-group:not([open]) .mobile-tab-menu { display: none; }
  .member-main { padding-top: 1.15rem; }
  .member-shell .member-main { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .workspace-heading { margin-bottom: .95rem; gap: .65rem; }
  .workspace-heading .button { font-size: .83rem; }
  .member-chart-grid, .member-connection-grid { grid-template-columns: minmax(0,1fr); }
  .member-chart-grid { margin-top: .7rem; gap: .7rem; }
  .dashboard-column { display: contents; }
  .member-cycle { grid-row: 2; }
  .member-data-table { grid-row: 3; }
  .member-metrics { gap: .6rem; }
  .metric-value { font-size: clamp(1.6rem,7vw,2.2rem); }
  .metric-bytes { font-size: clamp(1.42rem,6.4vw,1.95rem); }
  .member-metric .quota-meter { margin-top: .38rem; }
  .member-data-table { padding-inline: .7rem; }
  .member-table-wrap table { font-size: .77rem; }
  .member-table-wrap tbody th { white-space: nowrap; }
  .account-figures { gap: .35rem; }
  .account-figures > div { padding: .52rem .42rem; }
  .account-figures dt { font-size: .72rem; gap: .18rem; }
  .account-figures dt .workspace-icon { display: none; }
  .account-figures dd { font-size: 1.21rem; }
  .account-figures .panel-caption { font-size: .69rem; }
  .guide-selector { grid-template-columns: minmax(0,1fr); gap: .38rem; }
  .guide-shortcut { min-height: 49px; }
  .guide-shortcut div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; }
  .member-login-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 24rem) {
  :where(.member-shell,.member-auth-shell) { --shell-gutter: .75rem; }
  .workspace-tools { gap: .34rem; }
  .workspace-quick-actions { gap: .4rem; }
  .member-main .card { padding: .78rem; }
  .device-item { gap: .32rem; }
  .member-device-mode { grid-template-columns: 1fr; }
  .member-device-mode button { justify-self: start; }
  .account-figures > div { padding: .6rem; }
  .related-sites-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .member-shell *, .member-auth-shell * { scroll-behavior: auto !important; }
}