:root {
  color-scheme: light;
  --canvas: #f3f4f7;
  --paper: #fff;
  --ink: #171f30;
  --muted: #596376;
  --line: #e2e5ed;
  --nav: #141c2b;
  --nav-line: #31394a;
  --nav-text: #bbc5d6;
  --red: #b92e40;
  --red-dark: #a32236;
  --red-soft: #fff1f2;
  --green: #22674e;
  --green-soft: #e8f5ed;
  --amber: #804d0e;
  --amber-soft: #fcf1dd;
  --blue: #294a94;
  --blue-soft: #edf2ff;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; min-width: 0; font: 400 15px/1.6 var(--sans); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased }
h1,h2,h3,p,dl,dd { margin: 0 }
h1,h2,h3 { line-height: 1.25; color: var(--ink) }
h1 { font-size: clamp(28px,3.3vw,42px); font-weight: 750; letter-spacing: -.047em }
h2 { font-size: 18px; font-weight: 690; letter-spacing: -.025em }
h3 { font-size: 15px; font-weight: 680 }
a { color: var(--red); text-underline-offset: 3px }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 3px solid #cf5864; outline-offset: 3px }
:focus:not(:focus-visible) { outline: none }
img,svg { vertical-align: middle }
.muted { color: var(--muted) }
.mono,code { font-family: var(--mono) }
.skip { position: fixed; left: 12px; top: 10px; z-index: 20; transform: translateY(-160%); padding: 8px 12px; border-radius: 8px; background: var(--paper); color: var(--ink) }
.skip:focus { transform: none }
.icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle }
.svg-library { position: absolute; overflow: hidden }
.shell { display: grid; grid-template-columns: 234px minmax(0,1fr); min-height: 100dvh }
.rail { background: var(--nav); color: var(--nav-text); position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow: auto }
.rail-head { padding: 21px 18px 19px; border-bottom: 1px solid var(--nav-line) }
.brand { display: inline-flex; align-items: center; gap: 9px; color: white; text-decoration: none; min-width: 0; line-height: 1.05 }
.brand strong { display: block; font-size: 22px; letter-spacing: -.045em }
.brand small { display: block; margin-top: 6px; color: var(--nav-text); font-size: 11px; letter-spacing: .045em }
.menu-icon { display: none }
.rail-body { display: flex; flex-direction: column; gap: 18px; padding: 15px 13px 14px; flex: 1 }
.space-label { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #384154; border-radius: 9px; background: #1f293b; color: #fff }
.space-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; flex: none; background: #4a3744; color: #ffd1d3; font: 700 15px var(--mono) }
.space-label>span+span { overflow: hidden }
.space-label strong,.space-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.space-label strong { font-size: 13px }
.space-label small { color: var(--nav-text); font-size: 11px }
.rail-nav { display: grid; gap: 2px }
.rail-nav p { margin: 9px 9px 3px; color: #a0aec6; font-size: 10px; font-weight: 680; letter-spacing: .12em }
.rail-nav a { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; color: var(--nav-text); text-decoration: none; font-size: 13px; font-weight: 550; white-space: nowrap }
.rail-nav a:hover { color: #fff; background: #233046 }
.rail-nav a[aria-current="page"] { color: #fff; background: #363043; box-shadow: inset 3px 0 #f37881 }
.rail-nav a[aria-current="page"] .icon { color: #ff9aa2 }
.nav-count { min-width: 21px; margin-left: auto; padding: 0 5px; border-radius: 999px; background: #693d4e; color: #fff; text-align: center; font: 650 10px/19px var(--mono) }
.rail-foot { display: grid; gap: 8px; border-top: 1px solid var(--nav-line); padding: 11px 9px 0; margin-top: auto }
.rail-foot a { display: flex; align-items: center; gap: 8px; color: var(--nav-text); font-size: 12px; text-decoration: none }
.rail-foot a:hover { color: #fff; text-decoration: underline }
.rail-foot .icon { width: 13px; height: 13px }
.workspace-body { min-width: 0 }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 65px; padding: 8px clamp(15px,3vw,36px); border-bottom: 1px solid var(--line); background: var(--paper) }
.crumb { color: var(--muted); min-width: 0; font-size: 13px; font-weight: 500 }
.crumb span { color: #7c8493; padding: 0 5px }
.crumb strong { color: var(--ink); font-weight: 680 }
.top-actions,.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.top-actions { justify-content: flex-end }
.content { max-width: 1420px; padding: clamp(15px,3vw,38px); margin: 0 auto }
.content>section { min-width: 0; display: grid; gap: 16px }
.eyebrow { color: var(--red); font: 660 11px/1.5 var(--mono); letter-spacing: .08em }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; padding: 5px 0 7px }
.page-head h1 { margin: 5px 0 6px }
.page-head p:not(.eyebrow) { color: var(--muted) }
.panel { min-width: 0; padding: clamp(13px,2vw,21px); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 2px 5px #1c244104 }
.panel-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px }
.panel-heading p { color: var(--muted); font-size: 13px; margin-top: 4px }
.panel-heading a { font-size: 13px; font-weight: 650 }
.panel.detail { scroll-margin-top: 84px }
.panel .callout { margin-top: 12px }
.callout { display: block; min-width: 0; border: 1px solid #dfe5f0; border-radius: 9px; background: #f8faff; color: #394764; padding: 11px 14px; font-size: 13px; overflow-wrap: anywhere }
.callout p,.callout span { margin-top: 3px }
.callout.demo { border-color: #ebd8c3; background: #fcf4e8; color: #704716 }
.callout.danger { border-color: #eed0d5; background: var(--red-soft); color: #982a3a }
#demo-banner { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-bottom: 14px }
#demo-banner span { margin: 0 }
#service-mode,#notice,#error-page { margin-bottom: 12px }
#notice,#error-page { scroll-margin-top: 84px }
.btn { min-height: 38px; min-width: 0; display: inline-flex; justify-content: center; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); background: #f6f7fa; font: 620 13px/1.3 var(--sans); text-decoration: none; text-align: center; white-space: normal; cursor: pointer }
.btn:hover:not(:disabled) { background: #edeff5; text-decoration: none }
.btn:disabled { opacity: .55; cursor: not-allowed }
.btn.primary { background: var(--red); color: white }
.btn.primary:hover:not(:disabled) { background: var(--red-dark) }
.btn.secondary { border-color: #d9dde6; background: var(--paper) }
.btn.quiet { background: transparent; color: var(--blue) }
.btn.quiet:hover:not(:disabled) { background: var(--blue-soft) }
.btn.compact { padding: 5px 9px; font-size: 12px; min-height: 33px }
.btn .icon { width: 15px; height: 15px }
label { display: grid; gap: 5px; min-width: 0; font-size: 13px; font-weight: 630 }
input:not([type=checkbox]),select,textarea { min-width: 0; width: 100%; border: 1px solid #d3d8e3; border-radius: 7px; padding: 8px 10px; min-height: 38px; background: var(--paper); color: var(--ink); font: 400 14px/1.4 var(--sans) }
input::placeholder,textarea::placeholder { color: #647086 }
textarea { min-height: 112px; resize: vertical }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--red); flex: none }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted) }
.stack { display: grid; gap: 12px; align-content: start }
.stack>.btn { justify-self: start }
.stack .panel-heading { margin-bottom: 0 }
.form-row,.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px }
.form-row label,.filters label { flex: 1 1 160px }
.form-row label:first-child,.filters label:first-child { flex-basis: 230px }
.filters { margin-bottom: 13px }
.form-row .btn,.filters .btn { min-height: 38px }
.file-box { background: #f8f9fc; border: 1px dashed #b9c1d3; border-radius: 9px; padding: 12px; gap: 6px }
.file-box span { color: var(--muted); font-weight: 400 }
input[type=file]::file-selector-button { color: var(--ink); border: 0; border-radius: 4px; background: var(--blue-soft); padding: 4px 7px; margin-right: 8px; cursor: pointer }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px }
.metric { display: grid; gap: 3px; min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); text-decoration: none }
.metric:hover { text-decoration: none; border-color: #c88f9a }
.metric .metric-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); margin-bottom: 4px }
.metric:nth-child(2) .metric-icon { background: var(--green-soft); color: var(--green) }
.metric:nth-child(3) .metric-icon { background: var(--amber-soft); color: var(--amber) }
.metric:nth-child(4) .metric-icon { background: var(--red-soft); color: var(--red) }
.metric b { font: 660 29px/1.2 var(--mono); letter-spacing: -.07em; overflow-wrap: anywhere }
.metric span:not(.metric-icon),.metric small { color: var(--muted); overflow-wrap: anywhere }
.metric span:not(.metric-icon) { font-weight: 630; font-size: 13px }
.metric small { font-size: 11px }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 15px; align-items: start }
.overview-grid.live-only { grid-template-columns: repeat(2,minmax(0,1fr)) }
.service-list { display: grid }
.service-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px }
.service-row dd { text-align: right }
#overview-usage { margin-top: 13px }
.shortcuts { display: grid; grid-template-columns: minmax(130px,1fr) repeat(3,minmax(130px,1fr)); align-items: center; gap: 8px }
.shortcuts a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; border-radius: 7px; background: #f7f8fc; color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 650 }
.shortcuts a:hover { background: var(--blue-soft) }
.badge { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 680; line-height: 1.35; overflow-wrap: anywhere }
.badge.good { background: var(--green-soft); color: var(--green) }
.badge.warn { background: var(--amber-soft); color: var(--amber) }
.badge.info { background: var(--blue-soft); color: var(--blue) }
.badge.bad { background: var(--red-soft); color: var(--red) }
.badge.neutral { background: #eff1f5; color: #4f586a }
.badge.pulse::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none }
.empty { display: grid; align-content: center; justify-items: start; gap: 4px; min-height: 108px; border: 1px dashed #d6dce8; border-radius: 9px; background: #fafbfe; padding: 14px; color: var(--muted); font-size: 13px }
.empty strong { color: var(--ink) }
.empty .btn { margin-top: 6px }
.record-list { display: grid; border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0 }
.record { display: grid; grid-template-columns: minmax(110px,1fr) minmax(84px,auto) auto; align-items: center; gap: 9px 13px; padding: 11px 1px; border-bottom: 1px solid var(--line) }
.record.unread { box-shadow: inset 3px 0 #cf5a68; padding-left: 9px }
.record-title { font-size: 14px; line-height: 1.4; font-weight: 680; overflow-wrap: anywhere }
.record-meta { margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere }
.record .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px }
.record .status { justify-self: end }
.detail-block { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line) }
.detail-block p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); margin-top: 6px }
.detail-block li { margin: 3px 0; overflow-wrap: anywhere }
.detail-block ul { padding-left: 20px; margin: 6px 0 0 }
.detail .button-row { margin-top: 14px }
.response-chart { margin-top: 8px; display: grid; gap: 5px }
.response-row { display: grid; grid-template-columns: 3em minmax(0,1fr); gap: 8px; font-size: 12px }
.response-row dd { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px }
.response-meter { width: 100%; height: 12px; accent-color: var(--red) }
.response-meter::-webkit-meter-optimum-value { background: #ba5361 }
.response-meter::-moz-meter-bar { background: #ba5361 }
.detail h2 { overflow-wrap: anywhere }
.timeline { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid #e4e8f0 }
.timeline li { position: relative; margin-bottom: 11px; font-size: 13px }
.timeline li::before { position: absolute; left: -19px; top: 6px; content: ""; width: 8px; height: 8px; border-radius: 100%; background: #c15461 }
.timeline small { display: block; color: var(--muted) }
.pagination { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 13px; font-size: 13px }
.plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px }
.plan-card { border: 1px solid var(--line); border-radius: 9px; padding: 11px; overflow-wrap: anywhere }
.plan-card h3 { margin: 6px 0 }
.plan-card .price { font: 680 19px/1.4 var(--mono) }
.plan-card small { display: block; color: var(--muted); margin-top: 4px }
.usage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px }
.usage-meter { padding: 10px; border: 1px solid var(--line); border-radius: 8px }
.usage-meter strong { display: block; margin-top: 3px }
progress { width: 100%; height: 7px; accent-color: #b73b4a }
.proof-location, #proof-status { margin: 8px 0; color: var(--muted); overflow-wrap: anywhere }
#schedule-history:not(:empty) { margin-top: 14px }
#team-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px }
#team-nav button { border: 1px solid var(--line); background: #f6f8fb; border-radius: 6px; padding: 7px 10px; min-height: 38px; cursor: pointer }
#team-nav [aria-selected=true] { background: var(--blue-soft); color: var(--blue); font-weight: 660 }
#team form { display: grid; gap: 8px; margin-top: 10px }
#team form>button { justify-self: start }
.workspace-footer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px }
.workspace-footer a,.welcome-foot a { color: var(--muted) }
.welcome-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,.8fr); gap: clamp(16px,5vw,64px); align-items: center; min-height: 390px }
.welcome-copy h1 { margin: 10px 0 12px }
.welcome-copy>p:not(.eyebrow) { max-width: 33em; color: var(--muted); margin-bottom: 17px }
.welcome-foot { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 15px; font-size: 12px }
.auth-card { display: grid; gap: 10px; padding: clamp(15px,3vw,27px) }
#preview-guest { display: grid; justify-items: start; gap: 13px }
.segments { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 10px }
.segments [aria-pressed=true] { color: var(--red); background: var(--red-soft) }
body[data-mode="demo"] .live-only,body:not([data-mode="live"]) #logout,body:not([data-mode="live"]) #refresh-view,
body:not([data-mode="demo"]) #exit-demo,body[data-mode="demo"] #top-demo,
body:is([data-mode="loading"],[data-mode="guest"]) .rail-nav>:not(.home-link) { display: none }
body:not(.workspace)>header,body:not(.workspace)>main { max-width: 760px; margin-inline: auto; padding: 22px }
body:not(.workspace)>header { margin-top: 26px }
body:not(.workspace)>main>section { padding: 17px; margin-bottom: 13px; background: white; border: 1px solid var(--line); border-radius: 9px }
body:not(.workspace)>main>section>p { margin-top: 6px; color: var(--muted) }
@media (max-width: 1060px) {
  .shell { grid-template-columns: 196px minmax(0,1fr) }
  .overview-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) }
  .shortcuts { grid-template-columns: repeat(3,minmax(0,1fr)) }
  .shortcuts>div { grid-column: 1/-1 }
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media (max-width: 900px) {
  .overview-grid,.overview-grid.live-only { grid-template-columns: minmax(0,1fr) }
  .welcome-grid { min-height: auto; grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 720px) {
  .shell { display: block }
  .rail { height: auto; position: relative; top: auto; overflow: visible }
  .rail-head { min-height: 56px; padding: 9px 13px; display: flex; justify-content: space-between; align-items: center }
  .brand img { width: 31px; height: 31px }
  .brand strong { font-size: 20px }
  .menu-icon { display: grid; place-items: center; min-width: 44px; min-height: 44px; color: white; background: #273349; border: 1px solid #40506a; border-radius: 7px; cursor: pointer }
  .rail-body:not(.is-open) { display: none }
  .rail-nav { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .rail-nav p,.rail-nav .home-link { grid-column: 1/-1 }
  .rail-nav a { min-height: 44px; white-space: normal }
  .rail-foot { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .topbar { min-height: 56px; gap: 8px; flex-wrap: wrap }
  .topbar .badge { display: none }
  .topbar .btn { min-height: 36px }
  .content { padding: 13px }
  .btn,select,input:not([type=checkbox]) { min-height: 44px }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
  .metric { padding: 11px }
  .record { grid-template-columns: minmax(95px,1fr) auto; gap: 7px }
  .record .actions { grid-column: 1/-1; justify-content: start }
  .record .actions:empty { display: none }
  .record .actions .btn { min-height: 40px }
  .shortcuts,.usage-grid { grid-template-columns: 1fr }
}

.admin-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 700 }
.admin-brand span { color: var(--muted); font-size: 12px; font-weight: 600 }
.admin-content { max-width: 1130px }
.admin-content .page-head { margin-bottom: 12px }
.admin-content .auth-card { max-width: 510px }
.admin-content > .callout { margin-bottom: 14px }
.admin-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px }
.admin-nav a[aria-current="page"] { border-color: #e5bac0; background: var(--red-soft); color: var(--red) }
.admin-list { margin-top: 16px }
#invite-result .button-row { margin-top: 8px }
#invite-result label, #mfa-setup label { margin-top: 9px }
#invite-code, #mfa-secret { font-family: var(--mono) }
@media (max-width: 420px) {
  .admin-brand span { display: none }
  .admin-content .page-head { align-items: start }
}