:root {
  color-scheme: light;
  --color-primary: #23677b;
  --color-primary-hover: #195064;
  --color-primary-soft: #eaf2f4;
  --color-on-primary: #ffffff;
  --color-secondary: #047857;
  --color-accent: #b45309;
  --color-danger: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-warning: #8a5505;
  --color-warning-soft: #fffbeb;
  --color-good: #047857;
  --color-good-soft: #ecfdf5;
  --color-background: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-muted: #e9eff4;
  --color-border: #d5dfe5;
  --color-border-strong: #c7d3dc;
  --color-text: #203343;
  --color-text-muted: #586b79;
  --color-text-faint: #586b79;
  --color-sidebar: #ffffff;
  --color-sidebar-raised: #eaf2f4;
  --color-sidebar-text: #23677b;
  --color-sidebar-muted: #586b79;
  --color-focus: #2563eb;
  --chart-uplink: #23ad9b;
  --chart-downlink: #5275f0;
  --chart-grid: #edf0f6;
  --chart-fill: #5275f013;
  --category-google: #2563eb;
  --category-youtube: #dc2626;
  --category-social: #7c3aed;
  --category-gaming: #0e7490;
  --category-ai: #7c3aed;
  --category-adult: #be185d;
  --category-malicious: #9f1239;
  --category-other: #64748b;
  --shadow-card: 0 2px 5px rgba(29, 41, 64, .025);
  --shadow-float: 0 24px 80px rgba(41, 65, 132, .08);
  --radius-sm: .55rem;
  --radius-md: .85rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --sidebar-width: 13.5rem;
  --content-max: 75rem;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-primary: #8ec6d5;
    --color-primary-hover: #b6dce6;
    --color-primary-soft: #1c2a49;
    --color-on-primary: #071b3d;
    --color-secondary: #5ee0ba;
    --color-accent: #fbbf69;
    --color-danger: #ff9898;
    --color-danger-soft: #35191c;
    --color-warning: #f4c86a;
    --color-warning-soft: #302715;
    --color-good: #5ee0ba;
    --color-good-soft: #123329;
    --color-background: #15212a;
    --color-surface: #1d2d38;
    --color-surface-raised: #172932;
    --color-surface-subtle: #102029;
    --color-muted: #20333d;
    --color-border: #29404b;
    --color-border-strong: #3a535f;
    --color-text: #edf3f6;
    --color-text-muted: #b7c7d0;
    --color-text-faint: #b7c7d0;
    --color-sidebar: #081319;
    --color-sidebar-raised: #132a35;
    --color-sidebar-text: #f2f7f7;
    --color-sidebar-muted: #a7bbc3;
    --color-focus: #8bb2ff;
    --chart-uplink: #f6ad55;
    --chart-downlink: #8bb2ff;
    --chart-grid: #29404b;
    --chart-fill: #8bb2ff18;
    --category-google: #8bb2ff;
    --category-youtube: #ff8a8a;
    --category-social: #c4a4ff;
    --category-gaming: #66d9ef;
    --category-ai: #c4a4ff;
    --category-adult: #ff9aca;
    --category-malicious: #ff809c;
    --category-other: #a8bac4;
    --shadow-card: 0 1px 1px rgba(0, 0, 0, .18), 0 12px 35px rgba(0, 0, 0, .16);
    --shadow-float: 0 18px 55px rgba(0, 0, 0, .38);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 20rem; background: var(--color-background); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--color-text); background: var(--color-background); font-size: .9rem; line-height: 1.6; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
a { color: var(--color-primary); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--color-primary-hover); }
img, svg, canvas { max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--color-text); line-height: 1.18; letter-spacing: -.025em; }
h1 { margin-bottom: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); }
h2 { margin-bottom: .35rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem); }
h3 { margin-bottom: .4rem; font-size: 1.05rem; }
p { color: var(--color-text-muted); }
code, .metric-card strong, .mini-stats dd, .hero-stats dd, td { font-variant-numeric: tabular-nums; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .9em; overflow-wrap: anywhere; }

:focus-visible { outline: .2rem solid var(--color-focus); outline-offset: .18rem; }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .65rem 1rem; color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-sm); transform: translateY(-160%); transition: transform .18s ease-out; }
.skip-link:focus { transform: translateY(0); }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; width: var(--sidebar-width); height: 100vh; height: 100dvh; padding: 1.7rem 1rem 1rem; color: var(--color-text); background: var(--color-sidebar); border-right: 1px solid var(--color-border); overflow-y: auto; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 3rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: #ffffff; background: #23677b; border-radius: .8rem; box-shadow: 0 4px 10px #23677b20; }
.brand-mark svg { width: 1.55rem; height: 1.55rem; }
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font-size: 1.06rem; letter-spacing: .08em; }
.brand small { margin-top: .25rem; color: var(--color-sidebar-muted); font-size: .8125rem; font-weight: 500; letter-spacing: .1em; }
.nav-label { margin: 2.5rem .8rem .6rem; color: var(--color-text-faint); font-size: .8125rem; letter-spacing: .12em; }
.primary-nav { display: grid; gap: .4rem; margin-top: 0; }
.primary-nav a, .nav-logout { display: flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .65rem .8rem; color: var(--color-sidebar-muted); background: transparent; border: 0; border-radius: .7rem; text-decoration: none; font-weight: 600; text-align: left; transition: color .18s ease, background-color .18s ease; }
.primary-nav a:hover, .nav-logout:hover { color: var(--color-sidebar-text); background: var(--color-sidebar-raised); }
.primary-nav a[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); box-shadow: none; }
.primary-nav a[aria-current="page"]::after { content: ""; width: .35rem; height: .35rem; margin-left: auto; background: currentColor; border-radius: 50%; }
.nav-management { margin-top: 1.1rem; }
.primary-nav svg, .nav-logout svg { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; }
.sidebar-foot { display: grid; gap: .8rem; margin-top: auto; padding-top: 2rem; }
.privacy-note { display: flex; align-items: flex-start; gap: .6rem; padding: .9rem; color: var(--color-text-muted); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: .75rem; font-size: .8125rem; line-height: 1.5; }
.privacy-note small { color: var(--color-sidebar-muted); }
.nav-logout { width: 100%; }
.workspace { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.6rem; padding: 1.1rem clamp(1rem, 3vw, 2.6rem); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.eyebrow { margin-bottom: .28rem; color: var(--color-text-faint); font-size: .8125rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.topbar-meta { display: flex; align-items: center; gap: .7rem; }
.status-pill, .time-chip, .capacity-chip, .impact-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .3rem .65rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-size: .8125rem; font-weight: 650; white-space: nowrap; }
.status-dot { display: inline-block; width: .52rem; height: .52rem; flex: 0 0 auto; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 15%, transparent); }
.main-content { width: min(100%, var(--content-max)); margin-inline: auto; padding: clamp(1rem, 2.7vw, 2.5rem); }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.6rem) 1.5rem; color: var(--color-text-faint); font-size: .8125rem; }

.request-progress { position: fixed; z-index: 100; top: 0; left: var(--sidebar-width); right: 0; height: .2rem; overflow: hidden; pointer-events: none; }
.request-feedback { position: fixed; z-index: 110; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 1rem; max-width: min(28rem, calc(100% - 2rem)); padding: 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .85rem; box-shadow: var(--shadow-float); }
.request-feedback[hidden] { display: none; }
.request-feedback button { min-width: 2rem; min-height: 2rem; background: transparent; border: 0; font-size: 1.3rem; }
.is-pending button[type="submit"] { opacity: .65; cursor: wait; }
.main-content:focus { outline: none; }
.request-progress span { display: block; width: 100%; height: 100%; background: var(--color-primary); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .3s ease-out, opacity .18s ease; }
.htmx-request .request-progress span, body.is-requesting .request-progress span { transform: scaleX(.78); opacity: 1; }

.notice { display: flex; align-items: flex-start; gap: .65rem 1rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid currentColor; border-radius: var(--radius-md); }
.notice strong { flex: 0 0 auto; }
.notice span { color: inherit; }
.tone-good { color: var(--color-good) !important; }
.tone-warn { color: var(--color-warning) !important; }
.tone-bad { color: var(--color-danger) !important; }
.tone-neutral { color: var(--color-text-muted) !important; }
.notice.tone-good { background: var(--color-good-soft); }
.notice.tone-warn { background: var(--color-warning-soft); }
.notice.tone-bad { background: var(--color-danger-soft); }

.hero-strip, .member-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; padding: clamp(1.2rem, 2.5vw, 2rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.hero-strip > div:first-child { max-width: 54rem; }
.hero-strip { position: relative; isolation: isolate; overflow: hidden; padding-block: 1.7rem; background: linear-gradient(110deg, var(--color-primary-soft), var(--color-surface)); border-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-border)); }
.hero-strip::after { content: ""; position: absolute; z-index: -1; width: 17rem; height: 17rem; right: -3rem; top: -7rem; border: 2.3rem solid color-mix(in srgb, var(--color-primary) 3%, transparent); border-radius: 50%; pointer-events: none; }
.hero-indicator { display: inline-block; width: .45rem; height: .45rem; margin-right: .25rem; border-radius: 50%; background: var(--color-primary); }
.hero-strip h2 { font-size: clamp(1.35rem, 2.3vw, 2rem); }
.hero-strip p:last-child, .page-intro p { margin-bottom: 0; }
.danger-strip { border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border)); }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.page-intro > div { max-width: 62rem; }
.section-heading { display: flex; justify-content: space-between; margin: 2rem 0 1rem; }
.section-heading p:last-child { margin-bottom: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { display: grid; gap: .6rem; min-height: 9rem; padding: 1.15rem 1.3rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--color-text-muted); font-size: .8125rem; font-weight: 550; }
.metric-label svg { width: 1.8rem; height: 1.8rem; padding: .4rem; color: var(--color-primary); background: var(--color-primary-soft); border-radius: .5rem; }
.metric-highlight { border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); }
.metric-highlight strong { color: var(--color-primary); }
.metric-card strong { align-self: end; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.035em; }
.metric-card strong small { color: var(--color-text-faint); font-size: .6em; }
.metric-note { color: var(--color-text-faint); font-size: .8125rem; }
.content-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.content-grid.two-thirds { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr); }
.content-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel { min-width: 0; padding: clamp(1rem, 2vw, 1.45rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.panel + .panel:not(.content-grid .panel) { margin-top: 1rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2, .panel-head p:last-child { margin-bottom: 0; }
.panel-head p:not(.eyebrow) { color: var(--color-text-muted); font-size: .84rem; }
.panel-copy { max-width: 58ch; }
.compact-panel { margin-bottom: 1rem; }
.subdued-panel { background: var(--color-surface-subtle); box-shadow: none; }
.stat-panel { display: grid; min-height: 9rem; }
.stat-panel strong { align-self: end; font-size: 1.25rem; }
.stat-panel span { color: var(--color-text-muted); font-size: .82rem; }
.muted { color: var(--color-text-faint); font-size: .8125rem; }
.text-link { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: .82rem; font-weight: 700; white-space: nowrap; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.8rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: .7rem; text-decoration: none; font-size: .9rem; font-weight: 720; line-height: 1.2; text-align: center; touch-action: manipulation; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button.primary { color: var(--color-on-primary); background: var(--color-primary); }
.button.primary:hover { color: var(--color-on-primary); background: var(--color-primary-hover); }
.button.secondary { color: var(--color-text); background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.button.secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }
.button.ghost { color: var(--color-text-muted); background: transparent; }
.button.ghost:hover { color: var(--color-text); background: var(--color-muted); }
.button.danger { color: #fff; background: #b91c1c; }
.button.danger:hover { color: #fff; background: #991b1b; }
.button.danger-ghost { color: var(--color-danger); background: transparent; border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); }
.button.danger-ghost:hover { color: var(--color-danger); background: var(--color-danger-soft); }
.button.full { width: 100%; }
.button.tiny { min-height: 2.4rem; padding: .45rem .7rem; font-size: .8125rem; }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.compact-buttons { flex-wrap: nowrap; }

.inline-form { display: flex; align-items: end; gap: 1rem; }
.stack-form { display: grid; gap: .72rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.field { min-width: 0; }
.field.grow { flex: 1 1 20rem; }
.span-all { grid-column: 1 / -1; }
.narrow-form { max-width: 36rem; }
label, legend { color: var(--color-text); font-size: .84rem; font-weight: 680; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 2.85rem; padding: .65rem .75rem; color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: .62rem; }
textarea { min-height: 7rem; resize: vertical; font-family: "SFMono-Regular", Consolas, monospace; font-size: .86rem; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--color-focus) 18%, transparent); outline: none; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--color-primary); }
.field-help { margin: .3rem 0 0; color: var(--color-text-faint); font-size: .8125rem; line-height: 1.45; }
.switch-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .6rem 0; }
.switch-line > span { display: grid; }
.switch-line small { color: var(--color-text-faint); font-size: .8125rem; font-weight: 450; }
.switch-line input { appearance: none; width: 3.1rem; height: 1.8rem; padding: .18rem; background: var(--color-border-strong); border: 0; border-radius: 999px; transition: background-color .18s ease; }
.switch-line input::before { content: ""; display: block; width: 1.44rem; height: 1.44rem; background: #fff; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .18s ease-out; }
.switch-line input:checked { background: var(--color-primary); }
.switch-line input:checked::before { transform: translateX(1.3rem); }
.switch-line.prominent { padding: .9rem 1rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.confirm-line { display: flex; align-items: flex-start; gap: .6rem; min-height: 2.75rem; padding: .65rem 0; font-weight: 550; }
.confirm-line input { margin-top: .2rem; }
.compact-check { font-size: .8125rem; }
.access-form { display: grid; gap: 1.15rem; }
.category-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.category-fieldset legend { margin-bottom: .6rem; }
.check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.check-card { display: flex; align-items: flex-start; gap: .6rem; min-height: 5.1rem; padding: .8rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: .75rem; }
.check-card > span:last-child { display: grid; }
.check-card small { color: var(--color-text-faint); font-size: .8125rem; font-weight: 450; }

.chart-frame { position: relative; min-height: 19rem; }
.chart-frame.compact { min-height: 15.5rem; }
.chart-frame canvas { width: 100% !important; height: 19rem !important; }
.chart-frame.compact canvas { height: 15.5rem !important; }
.chart-frame.is-empty canvas { visibility: hidden; }
.chart-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-text-faint); font-size: .8rem; pointer-events: none; }
.chart-frame.is-ready .chart-loading { display: none; }
.chart-frame.is-error .chart-loading { color: var(--color-danger); }
.legend-inline { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-text-muted); font-size: .8125rem; white-space: nowrap; }
.legend-inline i { display: inline-block; width: 1.1rem; height: .16rem; border-radius: 999px; }
.legend-up { background: var(--chart-uplink); }
.legend-down { background: var(--chart-downlink); border-top: 1px dashed var(--color-surface); }
.data-fallback { margin-top: .7rem; }
.data-fallback summary, .disclosure summary, details > summary { min-height: 2.75rem; padding: .55rem 0; cursor: pointer; color: var(--color-text-muted); font-size: .82rem; font-weight: 650; }

.category-list { display: grid; gap: .45rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.category-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .45rem; border-top: 1px solid var(--color-border); font-size: .8125rem; }
.category-list li span { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-text-muted); }
.category-swatch { display: inline-block; width: .62rem; height: .62rem; flex: 0 0 auto; border-radius: .18rem; background: currentColor; }
.category-google { color: var(--category-google); }
.category-youtube { color: var(--category-youtube); }
.category-social { color: var(--category-social); }
.category-gaming { color: var(--category-gaming); }
.category-adult { color: var(--category-adult); }
.category-malicious { color: var(--category-malicious); }
.category-other { color: var(--category-other); }
.category-label { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .12rem .45rem; border: 1px solid currentColor; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }

.member-stack { display: grid; }
.member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; min-height: 4.2rem; padding: .65rem .2rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); text-decoration: none; }
.member-row:last-child { border-bottom: 0; }
.member-row:hover { color: var(--color-text); background: var(--color-surface-subtle); }
.avatar { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; color: var(--color-primary); background: var(--color-primary-soft); border: 1px solid color-mix(in srgb, var(--color-primary) 10%, var(--color-border)); border-radius: .72rem; font-size: .9rem; font-weight: 750; text-transform: uppercase; }
.member-card:nth-child(3n+2) .avatar, .member-row:nth-child(3n+2) .avatar { color: var(--color-good); background: var(--color-good-soft); }
.avatar.large { width: 3rem; height: 3rem; font-size: 1.05rem; }
.avatar.xlarge { width: 4rem; height: 4rem; font-size: 1.35rem; border-radius: 1rem; }
.muted-avatar { filter: grayscale(1); opacity: .72; }
.member-main { display: grid; min-width: 0; }
.member-main small { color: var(--color-text-faint); font-size: .8125rem; overflow-wrap: anywhere; }
.member-usage { color: var(--color-text-muted); font-size: .82rem; font-weight: 700; }
.state-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 1.65rem; padding: .15rem .5rem; background: color-mix(in srgb, currentColor 9%, transparent); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; font-size: .8125rem; font-weight: 750; white-space: nowrap; }
.member-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.member-card { display: grid; gap: 1rem; padding: 1rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.member-card-main { display: flex; align-items: center; gap: .75rem; color: var(--color-text); text-decoration: none; }
.member-card-main > span:last-child { display: grid; }
.member-card-main small { color: var(--color-text-faint); font-size: .8125rem; }
.member-card-status { display: flex; flex-wrap: wrap; gap: .45rem; }
.mini-stats, .hero-stats, .detail-list { display: grid; margin: 0; }
.mini-stats { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mini-stats div, .hero-stats div { min-width: 0; }
.mini-stats dt, .hero-stats dt, .detail-list dt { color: var(--color-text-faint); font-size: .8125rem; }
.mini-stats dd, .hero-stats dd, .detail-list dd { margin: .12rem 0 0; color: var(--color-text); font-size: .8125rem; font-weight: 700; overflow-wrap: anywhere; }
.member-hero { align-items: stretch; }
.member-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.member-identity p { margin-bottom: 0; }
.heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.heading-line h2 { margin-bottom: 0; }
.hero-stats { grid-template-columns: repeat(3, minmax(7rem, 1fr)); align-items: center; }
.hero-stats div { padding: .35rem 1rem; border-left: 1px solid var(--color-border); }
.hero-stats dd { font-size: 1rem; }
.detail-list div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.detail-list div:last-child { border-bottom: 0; }

.health-list { display: grid; margin: 0; padding: 0; list-style: none; }
.health-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 4rem; border-bottom: 1px solid var(--color-border); }
.health-list li:last-child { border-bottom: 0; }
.health-list li > span:nth-child(2) { display: grid; }
.health-list small { color: var(--color-text-faint); font-size: .8125rem; }
.health-icon { display: grid; place-items: center; width: 2rem; height: 2rem; background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 999px; }
.health-icon svg { width: 1.05rem; height: 1.05rem; }
.boundary-callout { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1rem; padding: .85rem; color: var(--color-text-muted); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.boundary-callout svg { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: var(--color-warning); }
.boundary-callout p { margin: 0; font-size: .8125rem; }
.wide-callout { margin: 0 0 1rem; }

.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
th, td { padding: .68rem .6rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
th { color: var(--color-text-faint); font-size: .8125rem; font-weight: 750; letter-spacing: .035em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-surface-subtle); }
.target-kind { display: inline-flex; min-width: 2.7rem; margin-right: .45rem; color: var(--color-text-faint); font-size: .8125rem; font-weight: 700; text-transform: uppercase; }
.target-value { color: var(--color-text); overflow-wrap: anywhere; }

.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; min-height: 2.75rem; margin-bottom: .75rem; color: var(--color-text-faint); font-size: .8125rem; }
.breadcrumb svg { width: 1rem; height: 1rem; }
.breadcrumb span { color: var(--color-text); font-weight: 650; }
.danger-zone { border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border)); }
.danger-action { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--color-border); }
.danger-action:first-of-type { border-top: 0; }
.danger-action p { max-width: 48ch; margin: .2rem 0 0; font-size: .8125rem; }
.danger-action form { display: grid; min-width: 11rem; gap: .4rem; }
.impact-chip { color: var(--color-warning); background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); }

.empty-state { display: grid; place-items: center; min-height: 12rem; padding: 1.5rem; text-align: center; }
.empty-state svg { width: 2.2rem; height: 2.2rem; color: var(--color-text-faint); }
.empty-state p { max-width: 42ch; margin-bottom: 0; font-size: .82rem; }
.timeline { display: grid; }
.timeline-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--color-border); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-mark { width: .75rem; height: .75rem; margin-top: .38rem; background: currentColor; border: .2rem solid color-mix(in srgb, currentColor 18%, var(--color-surface)); border-radius: 999px; box-sizing: content-box; }
.timeline-item p { margin: .22rem 0; font-size: .8rem; }
.timeline-item small { color: var(--color-text-faint); font-size: .8125rem; }
.command-card { padding: 1rem; background: var(--color-sidebar); border-radius: var(--radius-md); }
.command-card > code { display: block; color: #d7eee7; }
.command-card p { margin: .7rem 0 0; color: #b8c9cf; font-size: .8125rem; }
.command-card p code { color: #e6f4ef; }

.secret-reveal { max-width: 58rem; margin-inline: auto; text-align: center; }
.success-mark, .error-mark { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin: 0 auto 1rem; color: var(--color-good); background: var(--color-good-soft); border: 1px solid color-mix(in srgb, var(--color-good) 28%, var(--color-border)); border-radius: 999px; }
.success-mark svg, .error-mark svg { width: 1.7rem; height: 1.7rem; }
.error-mark { color: var(--color-danger); background: var(--color-danger-soft); }
.secret-box { display: grid; gap: .55rem; padding: 1rem; color: var(--color-text); background: var(--color-sidebar); border-radius: var(--radius-md); text-align: left; }
.secret-box span { color: #aebfc6; font-size: .8125rem; font-weight: 700; }
.secret-box code { color: #eaf8f3; }
.large-secret { margin: 1.5rem 0; }
.large-secret code { padding: .55rem; background: rgba(255,255,255,.05); border-radius: .45rem; font-size: .82rem; }
.large-secret .button { justify-self: start; }
.wrap-code { display: block; padding: .75rem; overflow-wrap: anywhere; background: var(--color-surface-subtle); border-radius: var(--radius-sm); }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0; list-style-position: inside; }
.recovery-grid li { padding: .65rem; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.error-state { max-width: 42rem; margin: 5vh auto; text-align: center; }
.error-state > p:not(.eyebrow) { max-width: 52ch; margin-inline: auto; }
.error-state .button-cluster { justify-content: center; }
.error-state small { display: block; margin-top: 1rem; color: var(--color-text-faint); }

.auth-body { background: radial-gradient(ellipse at 15% 20%, var(--color-primary-soft), transparent 60%), var(--color-background); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 27rem); align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 6rem); width: min(100% - 3rem, 64rem); min-height: 100vh; min-height: 100dvh; margin-inline: auto; padding: 2rem 0; }
.login-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
.auth-card { padding: clamp(1.25rem, 4vw, 2.25rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.auth-card .brand { color: var(--color-text); }
.auth-card .brand-mark { color: #ffffff; }
.auth-card .brand small { color: var(--color-text-faint); }
.auth-heading { margin: 2.2rem 0 1.3rem; }
.auth-heading h1 { margin: .55rem 0; font-size: 1.6rem; }
.auth-heading p { margin-bottom: 0; }
.auth-aside { color: var(--color-text); }
.auth-aside h2 { margin: 1.1rem 0 1.5rem; color: var(--color-text); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.3; letter-spacing: -.06em; }
.auth-aside h2 span { color: var(--color-primary); }
.auth-aside p, .auth-aside li { color: var(--color-text-muted); }
.auth-aside li { margin-block: .7rem; }
.auth-features { display: grid; gap: 1rem; padding: 0; margin: 2rem 0; list-style: none; }
.auth-features li { display: flex; align-items: center; gap: .7rem; margin: 0; }
.auth-features svg { width: 1.15rem; height: 1.15rem; color: var(--color-primary); }
.auth-note { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-text-faint); font-size: .8125rem; text-align: center; }
.step-chip { display: inline-flex; padding: .25rem .55rem; color: var(--color-good); background: var(--color-good-soft); border: 1px solid color-mix(in srgb, var(--color-good) 28%, var(--color-border)); border-radius: 999px; font-size: .8125rem; font-weight: 750; }
.wide-auth { max-width: 36rem; }
.auth-card > .success-mark { margin-top: 1.7rem; }

@media (max-width: 74rem) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid.two-thirds { grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 1fr); }
  .member-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-hero { align-items: center; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats div { border-left: 0; border-top: 1px solid var(--color-border); }
}

@media (max-width: 58rem) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: .75rem 1rem; overflow: visible; }
  .sidebar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: .75rem; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .nav-label { display: none; }
  .nav-management { margin-top: 0; }
  .sidebar .brand { min-width: 8rem; }
  .brand-mark { width: 2.35rem; height: 2.35rem; }
  .primary-nav { display: flex; gap: .25rem; margin: 0; overflow-x: auto; scrollbar-width: thin; }
  .primary-nav a { flex: 0 0 auto; min-height: 2.75rem; padding: .55rem .65rem; }
  .primary-nav a[aria-current="page"] { box-shadow: none; }
  .primary-nav a[aria-current="page"]::after { display: none; }
  .primary-nav svg { display: none; }
  .sidebar-foot { display: block; position: absolute; top: .75rem; right: 1rem; margin: 0; padding: 0; }
  .sidebar-foot .privacy-note { display: none; }
  .nav-logout { min-height: 2.8rem; font-size: .8125rem; }
  .request-progress { left: 0; }
  .topbar { min-height: 5.25rem; }
  .content-grid.equal, .content-grid.thirds, .content-grid.two-thirds { grid-template-columns: 1fr; }
  .member-cards { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-layout { grid-template-columns: minmax(0, 27rem); }
  .auth-aside { display: none; }
}

@media (max-width: 40rem) {
  html { min-width: 0; }
  .sidebar { grid-template-columns: 1fr; gap: .45rem; padding: .65rem .75rem .5rem; }
  .sidebar .brand { min-width: 0; }
  .primary-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; gap: .2rem; overflow: visible; }
  .primary-nav a { justify-content: center; flex-direction: column; gap: .35rem; min-width: 0; min-height: 3.5rem; padding: .3rem .1rem; font-size: .8125rem; line-height: 1.3; text-align: center; }
  .primary-nav svg { display: block; width: 1.1rem; height: 1.1rem; }
  .topbar { align-items: flex-start; padding: 1rem; }
  .topbar-meta .status-pill { display: none; }
  .main-content { padding: 1rem; }
  .app-footer { display: grid; padding-inline: 1rem; }
  .hero-strip, .member-hero, .page-intro, .danger-action { align-items: stretch; flex-direction: column; }
  .hero-strip .button, .page-intro .button { width: 100%; }
  .metric-grid, .metric-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .metric-grid.three .metric-card:last-child { grid-column: 1 / -1; }
  .metric-card { min-height: 8rem; padding: .9rem; }
  .metric-card strong { font-size: 1.5rem; }
  .metric-label svg { width: 1.55rem; height: 1.55rem; }
  .metric-note { font-size: .8125rem; }
  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form .field.grow { flex-basis: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .member-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .member-row .member-usage { grid-column: 2 / -1; }
  .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-identity { align-items: flex-start; }
  .member-hero { display: grid; }
  .hero-stats { width: 100%; }
  .hero-stats div { padding-inline: 0; }
  .button-cluster:not(.compact-buttons) { display: grid; }
  .compact-buttons { flex-direction: column; align-items: stretch; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .recovery-grid { grid-template-columns: 1fr; }
  .auth-layout { width: min(100% - 2rem, 27rem); padding: 1rem 0; }
  .auth-card { border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .sidebar, .topbar-meta, .app-footer, .button, .request-progress { display: none !important; }
  .app-shell { display: block; }
  .main-content { width: 100%; padding: 0; }
  .panel, .metric-card { box-shadow: none; break-inside: avoid; }
}

.category-ai { color: var(--category-ai); }
.residential-table td:last-child form + form { margin-top: .5rem; }
@media (max-width: 760px) {
  .residential-table, .residential-table tbody { display: block; width: 100%; }
  .residential-table thead { display: none; }
  .residential-table tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
  .residential-table td { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; border: 0; padding: .5rem 0; }
  .residential-table td::before { content: attr(data-label); font-weight: 600; color: var(--color-text-muted); }
  .residential-table td[colspan] { display: block; }
  .residential-table td[colspan]::before { display: none; }
  .residential-table td > * { grid-column: 2; overflow-wrap: anywhere; }
}

/* Shared editing, history and navigation contracts. */
[hidden] { display: none !important; }
body { font-size: 15px; }
small, .field-help, .metric-note, .nav-label, .eyebrow { font-size: 13px; }
button, .button, input:not([type=checkbox]), select { min-height: 44px; }
button, .button { white-space: normal; }
input, select, textarea { min-width: 0; }
code { overflow-wrap: anywhere; }
.brand-mark { background: var(--color-primary); color: var(--color-on-primary); box-shadow:none; }
.hero-strip { background:var(--color-surface); }
.hero-strip::after { display:none; }
.auth-body { background:var(--color-background); }
.login-layout { grid-template-columns:minmax(0,27rem); }
.secret-box, .command-card { background:var(--color-surface-subtle); border:1px solid var(--color-border); }
.secret-box code, .command-card > code, .command-card p code { color:var(--color-text); }
.secret-box span, .command-card p { color:var(--color-text-muted); }
.secret-box code { overflow-wrap:anywhere; word-break:break-all; }
.form-panel { max-width:720px; }
.narrow-form { max-width:680px; }
.stack-form label { display:grid; gap:.4rem; }
.stack-form label.confirm-line, .stack-form label.switch-line { display:flex; }
.form-grid .field { align-self:start; display:grid; gap:.4rem; }
.form-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.section-tabs, .sub-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:1rem 0 1.5rem; border-bottom:1px solid var(--color-border); }
.section-tabs a, .sub-tabs a { display:flex; align-items:center; padding:.65rem .85rem; min-height:44px; text-decoration:none; color:var(--color-text-muted); border-bottom:3px solid transparent; }
.section-tabs a[aria-current], .sub-tabs a[aria-current] { color:var(--color-primary); border-color:var(--color-primary); font-weight:700; }
.action-disclosure { padding:.8rem 0; border-top:1px solid var(--color-border); }
summary { cursor:pointer; min-height:44px; padding:.6rem 0; }
.action-disclosure form { padding:1rem 0; display:grid; gap:.8rem; }
.pause-editor { position:relative; }
.pause-editor form { min-width:240px; padding:.8rem; background:var(--color-surface); border:1px solid var(--color-border); }
.more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.more-grid a { color:var(--color-text); text-decoration:none; }
.mobile-nav { display:none; }
.is-stale, .stale-label { color:var(--color-warning); }
.is-dirty { border-left:3px solid var(--color-warning); padding-left:.8rem; }
.form-feedback { flex-wrap:wrap; grid-column:1/-1; margin:0 0 1rem; }
[aria-invalid=true] { border-color:var(--color-danger); }
.confirm-dialog { color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; width:min(440px,calc(100% - 2rem)); padding:1.5rem; }
.confirm-dialog::backdrop { background:#15212a99; }
.confirm-dialog button { margin:.5rem .5rem 0 0; }
.editor-rows { display:grid; gap:.75rem; }
.editor-row { min-width:0; border:1px solid var(--color-border); padding:1rem; border-radius:8px; display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; }
.editor-row legend { padding:0 .35rem; }
.editor-row label { flex:1 1 100px; min-width:0; }
.editor-row label:has(input:not([type=checkbox])) { flex:2 1 160px; }
.editor-times { display:flex; flex-wrap:wrap; gap:1rem; width:100%; }
.weekday-picker { display:flex; flex-wrap:wrap; width:100%; gap:.5rem; }
.weekday-picker label { display:flex; flex:0 1 auto; align-items:center; gap:.35rem; min-height:44px; padding:.3rem; }
.structured-editor .button-cluster { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.is-disabled { opacity:.7; }
.history-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.history-filters label { display:grid; gap:.4rem; }
.pagination { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:1rem 0; }
.records-list { display:grid; }
.record-item { padding:1rem 0; border-bottom:1px solid var(--color-border); }
.record-item header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; }
.record-item strong { overflow-wrap:anywhere; }
.record-item p { margin:.3rem 0; }
.record-item small { color:var(--color-text-muted); }
.detail-list { display:grid; gap:.7rem; }
.detail-list > div { display:flex; flex-wrap:wrap; gap:.75rem; }
.detail-list dt { color:var(--color-text-muted); min-width:7rem; }
.detail-list dd { margin:0; min-width:0; overflow-wrap:anywhere; }
@media(max-width:58rem) {
 .sidebar .primary-nav { display:none; }
 .mobile-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--color-surface); border-top:1px solid var(--color-border); padding-bottom:env(safe-area-inset-bottom); }
 .mobile-nav a { display:grid; place-items:center; min-height:56px; padding:.5rem; color:var(--color-text-muted); text-decoration:none; }
 .mobile-nav a[aria-current] { color:var(--color-primary); background:var(--color-primary-soft); font-weight:700; }
 .app-footer { padding-bottom:5.5rem; }
 .request-feedback { bottom:4.5rem; }
 .history-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:40rem) {
 input,select,textarea { font-size:16px; }
 .more-grid,.history-filters { grid-template-columns:1fr; }
 .topbar { flex-wrap:wrap; gap:.5rem; }
 .topbar-meta .status-pill { display:inline-flex; }
 .topbar-meta .time-chip { display:none; }
 .metric-label { font-size:13px; }
 .section-tabs a { padding:.6rem .45rem; font-size:14px; }
 .record-table,.record-table tbody { display:block; width:100%; }
 .record-table thead { display:none; }
 .record-table tr { display:flex; flex-wrap:wrap; padding:.75rem 0; border-bottom:1px solid var(--color-border); gap:.4rem .7rem; }
 .record-table td { display:block; border:0; padding:0; font-size:13px; }
 .record-table td:first-child { flex-basis:100%; font-size:15px; }
 .record-table .target-value { overflow-wrap:anywhere; }
 .member-row { grid-template-columns:auto minmax(0,1fr); }
 .member-row .state-badge { grid-column:2; justify-self:start; }
 .editor-row { padding:.75rem; }
 .form-actions .button { flex:1 1 120px; }
}