:root {
  --ink: #16211d;
  --ink-soft: #32423a;
  --paper: #e7ece5;
  --paper-bright: #f4f6f1;
  --rule: #a9b6ab;
  --raspberry: #b62d4d;
  --raspberry-dark: #82223a;
  --leaf: #4d7665;
  --amber: #a96f24;
  --muted: #657169;
  --focus: #176c94;
  --radius-sm: .4rem;
  --radius-md: .8rem;
  --control-height: 44px;
  --control-gap: 8px;
}

* { box-sizing: border-box; scrollbar-color: var(--ink-soft) var(--paper); scrollbar-width: thin; }

#server-view, #vpn-view, #manage-view { display: none; }
body[data-page=server] #server-view, body[data-page=vpn] #vpn-view, body[data-page=manage] #manage-view { display: block; }
body[data-page=server] .auth-panel { display: none; }
.section-tabs { display: flex; gap: 1.5rem; margin: 8px 0 18px; border-bottom: 1px solid var(--rule); }
.section-tabs a { display: block; padding: .8rem .15rem; min-height: 44px; border-bottom: 3px solid transparent; text-decoration: none; font-weight: 700; font-size: .9rem; }
.section-tabs a:hover { color: var(--raspberry-dark); }
body[data-page=server] [data-page-link=server], body[data-page=vpn] [data-page-link=vpn], body[data-page=manage] [data-page-link=manage] { border-bottom-color: var(--raspberry); color: var(--raspberry-dark); }
.vpn-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; padding: 38px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper-bright); }
.vpn-hero .eyebrow { color: var(--paper); }
.vpn-hero h1 { margin: .7rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1; }
.vpn-hero p:last-child { font-size: .9rem; line-height: 1.6; color: var(--paper); }
.vpn-signal { display: grid; gap: .7rem; padding-left: 28px; border-left: 1px solid var(--leaf); }
.vpn-signal strong { font: 500 clamp(1.5rem, 3vw, 2.4rem)/1.2 "DejaVu Sans Mono", monospace; }
.vpn-signal > span:last-child { font-size: .75rem; color: var(--paper); }
.vpn-sheet { margin-top: 14px; padding: 24px 28px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-bright); }
.vpn-sheet h2 { margin: 0; font-size: 1.4rem; }
.vpn-sheet .fan-heading > span { font-size: .8rem; }
.vpn-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 1.4rem 0 1rem; }
.vpn-grid > div { min-width: 0; padding: 16px 0; border-top: 1px solid var(--rule); }
.vpn-grid > div:nth-child(even) { padding-left: 24px; }
.vpn-grid dt { color: var(--ink-soft); font-size: .75rem; margin-bottom: .5rem; }
.vpn-grid dd { margin: 0; font: 600 .95rem/1.45 "DejaVu Sans Mono", monospace; overflow-wrap: anywhere; }
.vpn-wide { grid-column: 1 / -1; }
.status-light { --signal: var(--muted); display: inline-flex; align-items: center; gap: 10px; min-height: 24px; color: var(--ink); font: 600 .85rem/1.5 "DejaVu Sans Mono", monospace; }
.status-light::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 16%, transparent), inset 0 1px 1px rgb(255 255 255 / .5); }
.status-light[data-state=on] { --signal: var(--leaf); }
.status-light[data-state=warn] { --signal: var(--amber); }
.status-light[data-state=off] { --signal: var(--raspberry); }
.service-statuses { display: flex; gap: 16px 28px; flex-wrap: wrap; }
.state-reading { display: grid; gap: 5px; min-width: 0; }
.state-reading > small { font: 400 .7rem/1.4 "Trebuchet MS", "DejaVu Sans", sans-serif; color: var(--ink-soft); }
.project-list { margin-top: 20px; min-height: 146px; }
.project-item { padding: 20px 0 8px; border-top: 1px solid var(--rule); }
.project-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.project-heading h3 { margin: 0; font: 700 1.15rem/1.4 "DejaVu Sans Mono", monospace; overflow-wrap: anywhere; }
.project-readings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 20px 0 16px; }
.project-readings dt { margin-bottom: 6px; font-size: .75rem; color: var(--ink-soft); }
.project-readings dd { margin: 0; }
.project-detail { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 620px) { .project-readings { grid-template-columns: 1fr; gap: 12px; } .project-readings > div { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; align-items: baseline; } .project-readings dt { margin: 0; } .service-statuses { gap: 14px 24px; } }
.fan-panel.vpn-editor details { border-top: 0; padding-top: 0; margin-top: 0; }
#vpn-feedback { min-height: 3em; }
.fan-panel.vpn-editor form { max-width: 52rem; }
.fan-panel.auth-panel { margin: 0 0 18px; }
.fan-panel.auth-panel details { border-top: 0; margin-top: 0; padding-top: 0; }
.auth-panel .fan-notice { margin-bottom: 0; }
.reboot-panel { margin-top: 14px; }
.reboot-panel h2 { margin-top: 0; }
dialog { max-width: min(32rem, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-bright); color: var(--ink); }
dialog::backdrop { background: rgb(21 34 28 / .65); }
dialog h2 { margin-top: 0; }
dialog p { line-height: 1.6; }
.dialog-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--control-gap); margin-top: 24px; }
dialog .danger-action { background: var(--raspberry); color: var(--paper-bright); border-color: var(--raspberry); }
dialog .danger-action:hover { background: var(--raspberry-dark); }
.vpn-editor h3 { font-size: 1.1rem; margin: 1.7rem 0 1rem; }
.routing-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 14px; }
.routing-inputs > div { min-width: 0; }
.routing-inputs textarea { display: block; width: 100%; box-sizing: border-box; resize: none; field-sizing: content; min-height: 11rem; max-height: 22rem; margin-top: var(--control-gap); padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-bright); color: var(--ink); font: .85rem/1.6 "DejaVu Sans Mono", monospace; }
.routing-inputs textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.routing-inputs textarea[aria-invalid=true] { border-color: var(--raspberry); }
#routing-form { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
@media (max-width: 780px) { .vpn-hero { grid-template-columns: 1fr; gap: 1rem; padding: 26px; } .vpn-signal { border-left: 0; border-top: 1px solid var(--leaf); padding: 20px 0 0; } }
@media (max-width: 460px) { .vpn-sheet { padding: 20px; } .vpn-grid, .routing-inputs { grid-template-columns: 1fr; } .vpn-grid > div:nth-child(even) { padding-left: 0; } }

html {
  min-width: 20rem;
  background: var(--paper);
  scrollbar-color: var(--ink-soft) var(--paper);
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--paper); }
*::-webkit-scrollbar-thumb { background: var(--ink-soft); border: 3px solid var(--paper); border-radius: 99px; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(22, 33, 29, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 33, 29, .045) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  font-family: "Trebuchet MS", "DejaVu Sans", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }

.shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 34px;
}

.masthead,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.masthead {
  min-height: 42px;
  margin-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font: 800 .84rem/1 "DejaVu Sans Mono", "Liberation Mono", monospace;
  letter-spacing: .12em;
}

.brand > span:last-child > span { color: var(--raspberry); }

.brand-mark {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--paper-bright);
  background: var(--raspberry);
  letter-spacing: -.08em;
}

.live {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink-soft);
  font: 700 .71rem/1 "DejaVu Sans Mono", "Liberation Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-dot {
  width: .58rem;
  height: .58rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

body[data-state="online"] .live-dot { background: var(--leaf); box-shadow: 0 0 0 1px var(--leaf); }
body[data-state="offline"] .live-dot { background: var(--raspberry); box-shadow: 0 0 0 1px var(--raspberry); }
.live-rate { color: var(--muted); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, .7fr);
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--paper-bright);
  background: var(--ink);
  box-shadow: 0 16px 45px rgba(22, 33, 29, .16);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vw, 58px);
  background:
    radial-gradient(circle at 78% 22%, rgba(182, 45, 77, .22), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 55%);
}

.eyebrow {
  margin: 0 0 1.4rem;
  color: #b9c5bc;
  font: 700 .7rem/1.3 "DejaVu Sans Mono", "Liberation Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "DejaVu Serif", serif;
  font-size: clamp(3.15rem, 8vw, 6.7rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .84;
}

h1 em { color: #e86d83; font-weight: 400; }

.uptime-label {
  margin: auto 0 4px;
  color: #aebbb2;
  font: 700 .68rem/1 "DejaVu Sans Mono", "Liberation Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.uptime {
  min-height: 2rem;
  margin: 0;
  font: 500 clamp(1.2rem, 2.8vw, 1.85rem)/1.2 "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.thermal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 46px);
  color: var(--ink);
  background: #cbd5cb;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.thermal-head,
.metric-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.thermal-head {
  font: 700 .68rem/1 "DejaVu Sans Mono", "Liberation Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.thermal > strong {
  margin: 1.7rem 0 1.2rem;
  font: 500 clamp(4.1rem, 8vw, 7.4rem)/.85 "DejaVu Sans Mono", "Liberation Mono", monospace;
  letter-spacing: -.09em;
  font-variant-numeric: tabular-nums;
}

.thermal > strong small { margin-left: .15em; font-size: .24em; letter-spacing: 0; }
.thermal > p { margin: 1rem 0 0; color: var(--ink-soft); font-size: .78rem; }

progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  color: var(--raspberry);
  background: rgba(22, 33, 29, .13);
  accent-color: var(--raspberry);
}

progress::-webkit-progress-bar { background: rgba(22, 33, 29, .13); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--raspberry); border-radius: 99px; transition: width .45s ease; }
progress::-moz-progress-bar { background: var(--raspberry); border-radius: 99px; transition: width .45s ease; }
.metric progress { color: var(--leaf); accent-color: var(--leaf); }
.metric progress::-webkit-progress-value { background: var(--leaf); }
.metric progress::-moz-progress-bar { background: var(--leaf); }

.scale { display: flex; justify-content: space-between; margin-top: .5rem; color: var(--muted); font: 600 .58rem/1 monospace; }

.telemetry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: rgba(244, 246, 241, .78);
}

.metric { display: grid; grid-template-columns: 42px 1fr; min-width: 0; padding: 24px 24px 22px 17px; }
.metric + .metric { border-left: 1px solid var(--rule); }
.metric-index { color: var(--raspberry); font: 700 .63rem/1 "DejaVu Sans Mono", monospace; }
.metric h2 { margin: 0; font-size: .85rem; font-weight: 700; }
.metric strong { font: 600 1.55rem/1 "DejaVu Sans Mono", monospace; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.metric progress { margin: 1.25rem 0 .75rem; height: 5px; }
.metric p { min-height: 2.4em; margin: 0; color: var(--muted); font-size: .73rem; }

.trace-panel {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1.4fr);
  align-items: end;
  gap: 36px;
  min-height: 185px;
  margin-top: 14px;
  padding: 27px 30px;
  border-radius: var(--radius-md);
  color: var(--paper-bright);
  background: #293831;
}

.trace-copy .eyebrow { margin-bottom: .6rem; }
.trace-copy h2 { margin: 0; font: 400 1.65rem/1.1 Georgia, serif; }
.trace-copy > p:last-child { margin: .7rem 0 0; color: #b8c4bb; font-size: .75rem; }
#trace { display: block; width: 100%; height: 120px; overflow: visible; }
.trace-grid { stroke: rgba(231, 236, 229, .12); stroke-width: 1; stroke-dasharray: 3 7; }
.trace-line { fill: none; stroke: #ee8296; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trace-fill { fill: none; stroke: rgba(238, 130, 150, .15); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.facts { margin-top: 14px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.facts dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.facts dl > div { padding: 18px 22px 20px; }
.facts dl > div + div { border-left: 1px solid var(--rule); }
.facts dt { margin-bottom: .7rem; color: var(--muted); font: 700 .65rem/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.facts dd { margin: 0; }
.facts strong, .facts span { display: block; }
.facts strong { overflow: hidden; font: 600 1.05rem/1.2 "DejaVu Sans Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.facts span { margin-top: .3rem; color: var(--muted); font-size: .68rem; }

.machine {
  display: grid;
  grid-template-columns: minmax(190px, .48fr) minmax(0, 1.52fr);
  gap: clamp(28px, 5vw, 64px);
  margin-top: 14px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: rgba(244, 246, 241, .82);
}

.machine-copy .eyebrow { margin-bottom: .65rem; color: var(--raspberry-dark); }
.machine-copy h2 { margin: 0; font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/1 Georgia, "DejaVu Serif", serif; letter-spacing: -.035em; }
.machine-copy > p:last-child { max-width: 28rem; margin: 1rem 0 0; color: var(--muted); font-size: .78rem; }
.machine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.machine-grid > div { min-width: 0; padding: 15px 17px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.machine-grid dt { margin-bottom: .55rem; color: var(--muted); font: 700 .61rem/1.2 "DejaVu Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.machine-grid dd { min-height: 2.65rem; margin: 0; }
.machine-grid strong,
.machine-grid span { display: block; overflow-wrap: anywhere; }
.machine-grid strong { font: 600 .83rem/1.3 "DejaVu Sans Mono", monospace; font-variant-numeric: tabular-nums; }
.machine-grid span { min-height: 1rem; margin-top: .28rem; color: var(--muted); font-size: .66rem; }

footer { padding: 18px 2px 0; color: var(--muted); font: 600 .64rem/1.3 "DejaVu Sans Mono", monospace; letter-spacing: .03em; }

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 330px; }
  .thermal { border-top: 1px solid rgba(255, 255, 255, .14); border-left: 0; }
  .telemetry { grid-template-columns: 1fr; }
  .metric + .metric { border-top: 1px solid var(--rule); border-left: 0; }
  .trace-panel { grid-template-columns: 1fr; gap: 18px; }
  .facts dl { grid-template-columns: repeat(2, 1fr); }
  .facts dl > div + div { border-left: 0; }
  .facts dl > div:nth-child(even) { border-left: 1px solid var(--rule); }
  .facts dl > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .machine { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .shell { width: min(100% - 20px, 1120px); padding-top: 14px; }
  .live-rate { display: none; }
  .hero-copy { min-height: 305px; }
  h1 { font-size: clamp(3rem, 17vw, 4.4rem); }
  .metric { grid-template-columns: 32px 1fr; padding-right: 17px; }
  .trace-panel { padding: 24px 20px; }
  .machine { padding: 24px 20px; }
  .machine-grid { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

.core-panel { margin-top: 14px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-bright); overflow: hidden; }
.core-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 24px 28px 0; }
.core-heading .eyebrow { margin: 0 0 .4rem; color: var(--raspberry); }
.core-heading h2 { margin: 0; font-size: 1.4rem; }
.core-heading > p { margin: 0; color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }
#core-help { margin: .6rem 28px 1.2rem; color: var(--ink-soft); font-size: .8rem; }
.core-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 246px; border-top: 1px solid var(--rule); }
.core-metric { min-width: 0; min-height: 246px; padding: 20px 22px 16px; }
.core-metric + .core-metric { border-left: 1px solid var(--rule); }
.core-label, .core-current, .core-scale { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.core-label h3 { margin: 0; font-size: .85rem; }
.core-id { color: var(--muted); font: .65rem/1 "DejaVu Sans Mono", monospace; }
.core-current { margin-top: 1rem; min-height: 2.2rem; }
.core-current strong { font: 600 1.8rem/1 "DejaVu Sans Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: -.07em; }
.core-condition { color: var(--ink-soft); font-size: .65rem; text-align: right; max-width: 6rem; }
.core-metric[data-busy=true] .core-condition { color: var(--raspberry-dark); font-weight: 700; }
.core-metric progress { margin: .6rem 0 1rem; height: 5px; }
.core-metric svg { display: block; width: 100%; height: 72px; overflow: visible; }
.core-guide { stroke: var(--rule); stroke-width: .6; stroke-dasharray: 2 6; }
.core-trace { fill: none; stroke: var(--raspberry); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.core-dot { fill: var(--raspberry); }
.core-scale { margin-top: .45rem; color: var(--muted); font: .6rem/1 "DejaVu Sans Mono", monospace; }
.core-status { min-height: 1.5em; margin: .5rem 28px .75rem; color: var(--ink-soft); font-size: .75rem; }
body[data-state=offline] .core-grid { opacity: .65; }
@media (max-width: 900px) {
  .core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 492px; }
  .core-metric:nth-child(odd) { border-left: 0; }
  .core-metric:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 460px) {
  .core-heading { padding: 20px 20px 0; }
  #core-help { margin-left: 20px; margin-right: 20px; }
  .core-metric { padding: 16px 12px 14px; }
  .core-current { flex-wrap: wrap; gap: .4rem; min-height: 3.3rem; }
  .core-current strong { font-size: 1.6rem; }
  .core-condition { max-width: none; text-align: left; }
  .core-status { margin-left: 20px; margin-right: 20px; }
}

.fan-panel { margin-top: 14px; padding: 24px 28px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-bright); }
.fan-heading, .fan-summary, .fan-modes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fan-heading h2 { margin: 0; font-size: 1.4rem; }
.fan-heading .eyebrow { margin: 0 0 .35rem; }
.fan-reading { margin: 0; font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; }
.fan-reading strong { font-size: 1.75rem; }
.fan-summary { margin-top: 1rem; font-size: .9rem; }
.fan-summary strong { font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; }
.fan-panel details { border-top: 1px solid var(--rule); margin-top: .75rem; padding-top: .75rem; }
.fan-panel summary { cursor: pointer; font-weight: 700; padding: .4rem 0; }
.fan-panel summary:hover { color: var(--raspberry-dark); }
.fan-panel form { width: 100%; max-width: 52rem; }
.fan-panel label { display: block; font-size: .9rem; line-height: 1.5; }
.fan-panel fieldset { border: 0; margin: 1rem 0 0; padding: 0; min-width: 0; }
.fan-panel legend { font-weight: 700; padding: 0 0 .5rem; }
.fan-panel button, dialog button, .fan-panel input[type=password], .fan-panel input[type=text], .fan-panel input[type=number] { min-height: var(--control-height); margin: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .65rem 1rem; font: inherit; line-height: 1.35; color: var(--ink); background: var(--paper-bright); }
.fan-panel button, dialog button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; font-size: .9rem; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.fan-panel button:hover, dialog button:hover { border-color: var(--ink); background: var(--paper); }
.fan-panel button:active, dialog button:active { transform: translateY(1px); }
.fan-panel button:disabled, dialog button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.fan-panel .fan-primary { background: var(--ink); color: var(--paper-bright); min-width: 12rem; }
.fan-panel fieldset > .fan-primary { margin-top: 1rem; }
.fan-panel .fan-primary:hover { background: var(--ink-soft); }
.fan-panel :focus-visible, dialog :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fan-panel [aria-invalid=true] { border-color: var(--raspberry); }
.fan-panel input { accent-color: var(--raspberry); }
#subscription-settings > label { display: block; margin: 16px 0 var(--control-gap); }
#subscription-settings > label:first-of-type { display: flex; align-items: center; gap: 10px; min-height: var(--control-height); margin-top: 0; }
#subscription-interval { display: block; width: min(100%,12rem); box-sizing: border-box; }
#subscription-enabled { width: 20px; height: 20px; flex: 0 0 20px; }
.fan-auth { display: grid; grid-template-columns: minmax(0,1fr) 6.5rem; align-items: stretch; margin-top: var(--control-gap); gap: var(--control-gap); }
.fan-auth input { min-width: 0; width: 100%; }
.auth-panel .fan-auth { grid-template-columns: minmax(0,1fr) 6.5rem 7rem; }
.auth-panel .fan-auth .fan-primary { min-width: 0; }
.form-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--control-gap); margin-top: 16px; }
.routing-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 16px 0 20px; }
.routing-tools button { min-height: 64px; }
#auth-logout { margin-top: 12px; }
.fan-modes { justify-content: flex-start; gap: .5rem 1.5rem; }
.fan-modes label { min-height: 44px; display: flex; align-items: center; cursor: pointer; gap: .35rem; }
.fan-panel input[type=radio], .fan-panel input[type=range] { cursor: pointer; }
.fan-panel input[type=range] { width: 100%; min-height: 44px; margin: 0; }
.fan-panel output { font-weight: 700; margin-left: .5rem; }
.fan-help { font-size: .8rem; color: var(--ink-soft); margin: .5rem 0 .8rem; }
.fan-notice { font-size: .85rem; min-height: 1.5em; margin: .5rem 0 0; color: var(--ink-soft); }
.fan-notice[data-error=true] { color: var(--raspberry-dark); }
.fan-panel [hidden] { display: none; }
@media (max-width: 620px) {
  .auth-panel .fan-auth { grid-template-columns: minmax(0,1fr) 6.5rem; }
  .auth-panel .fan-auth .fan-primary { grid-column: 1 / -1; }
  .routing-tools { grid-template-columns: 1fr; }
  .form-actions > button, .fan-panel fieldset > .fan-primary, #reboot-open, #auth-logout { width: 100%; }
  .dialog-actions { grid-template-columns: 1fr; }
}
@media (max-width: 460px) { .fan-panel { padding: 20px; } .fan-reading strong { font-size: 1.4rem; } .fan-heading { align-items: flex-start; } }

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

@media (forced-colors: active) {
  html { scrollbar-color: auto; }
  .live-dot { forced-color-adjust: none; }
  progress { forced-color-adjust: auto; }
}