/* HonkWatch stylesheet. Built from DESIGN.md, in the same order: tokens, base, brand, layout, then components. */

/* ---- 1. tokens ------------------------------------------------------------ */
:root {
  --accent: #f06010; --accent-ink: #181817;
  --ink: #181817; --text: #181817; --muted: #66635e;
  --bg: #efece6; --surface: #faf8f4; --surface-2: #f3f0ea; --line: #dcd7cd; --nav: #1c1b19;
  --nav-text: #b7b0a6; --nav-text-on: #f4f0ea; --nav-hover: rgba(244, 240, 234, .06); --nav-on: rgba(244, 240, 234, .1); --nav-line: rgba(244, 240, 234, .09);
  --up: #24785a; --up-bar: #2f8f6a; --down: #b33d3d; --warn: #8f5a08; --none: #e2ddd4;
  --shadow: none;
  --r-s: 5px; --r: 8px; --r-l: 10px;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, "SF Mono", monospace;
  --goose-body: #faf8f4; --goose-wing: #e2ddd4; --mark-head: #faf8f4; --mark-arc: #f06010;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #f06010; --accent-ink: #121110;
  --ink: #f4f0ea; --text: #f4f0ea; --muted: #b3ada4;
  --bg: #121110; --surface: #1c1b19; --surface-2: #242220; --line: #2e2c29; --nav: #161514;
  --nav-text: #a8a197; --nav-hover: rgba(244, 240, 234, .05); --nav-on: rgba(244, 240, 234, .08); --nav-line: rgba(244, 240, 234, .08);
  --up: #3fa57d; --up-bar: #2f8f6a; --down: #d65c5c; --warn: #d9a03a; --none: #2a2826;
  --shadow: none;
  --goose-body: #e8e3da; --goose-wing: #c8c1b6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #f06010; --accent-ink: #121110;
  --ink: #f4f0ea; --text: #f4f0ea; --muted: #b3ada4;
  --bg: #121110; --surface: #1c1b19; --surface-2: #242220; --line: #2e2c29; --nav: #161514;
  --nav-text: #a8a197; --nav-hover: rgba(244, 240, 234, .05); --nav-on: rgba(244, 240, 234, .08); --nav-line: rgba(244, 240, 234, .08);
  --up: #3fa57d; --up-bar: #2f8f6a; --down: #d65c5c; --warn: #d9a03a; --none: #2a2826;
  --shadow: none;
  --goose-body: #e8e3da; --goose-wing: #c8c1b6;
  }
}

/* ---- 2. base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; font: 15px/1.5 var(--body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1 { font: 800 32px/1.15 var(--display); letter-spacing: -.015em; margin: 0 0 6px; }
h2 { font: 700 20px/1.25 var(--display); margin: 32px 0 12px; }
h3 { font: 700 17px/1.3 var(--display); margin: 0 0 10px; }
p { margin: 0 0 12px; }
code, pre { font: 13px var(--mono); background: var(--surface-2); border-radius: 4px; }
code { padding: 2px 6px; word-break: break-all; }
pre { padding: 12px 14px; white-space: pre-wrap; border: 1px solid var(--line); margin: 0 0 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sub { color: var(--muted); font-size: 13.5px; }
.s-up { color: var(--up); } .s-down { color: var(--down); } .s-warn { color: var(--warn); }
.r { text-align: right; } .nowrap { white-space: nowrap; } .wrap { word-break: break-all; }
.between { display: flex; justify-content: space-between; gap: 10px; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
svg.i.s { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- 3. brand ---------------------------------------------------------------- */
.logo { font: 800 22px var(--display); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.logo img { height: 28px; }
.beak { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 13px solid var(--accent); flex: none; }
.beak.small { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 9px; display: inline-block; margin-right: 5px; }

/* ---- 4. layout ---------------------------------------------------------------- */
main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 72px; }
body.app { display: flex; min-height: 100vh; }
body.app main { flex: 1; max-width: 1280px; margin: 0; padding: 36px 40px 90px; min-width: 0; }
.side { width: 240px; flex: none; background: var(--side-bg); color: var(--side-text); padding: 24px 16px 20px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .logo { color: #faf8f4; padding: 0 10px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 11px; color: var(--side-text); text-decoration: none; padding: 9px 12px; border-radius: 8px; position: relative; font-size: 14.5px; }
.side nav a:hover { background: var(--side-hover); color: var(--side-on); }
.side nav a.on { background: var(--side-active); color: var(--side-on); font-weight: 600; }
.side nav a.on::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side nav .sep { height: 1px; background: var(--side-line); margin: 10px 12px; }
.who { margin-top: auto; border-top: 1px solid var(--side-line); padding: 14px 10px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; word-break: break-all; }
.who .me { color: var(--side-on); font-weight: 600; font-size: 14px; }
.who .sub { color: var(--side-text); }
.who select { background: var(--side-hover); color: var(--side-on); border: 1px solid var(--side-line); margin-top: 4px; }
.who select option { color: #1c1b19; }
.who button.link { color: var(--side-text); }
.who button.link:hover { color: var(--side-on); }
.who-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.theme { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--side-line); color: var(--side-text); border-radius: var(--r-s); padding: 0 10px 0 8px; height: 28px; line-height: 26px; font: 600 12.5px var(--body); cursor: pointer; }
.theme:hover { color: var(--side-on); border-color: var(--side-text); filter: none; background: none; }
.theme .i { width: 16px; height: 16px; }
.theme .i-sun, .theme .i-moon, .theme .i-auto { display: none; }
:root[data-theme="light"] .theme .i-sun, :root[data-theme="dark"] .theme .i-moon, :root:not([data-theme]) .theme .i-auto { display: block; }
.top { display: flex; align-items: center; gap: 24px; padding: 18px 24px; max-width: 1100px; margin: 0 auto; }
.top nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.top nav a { text-decoration: none; font-weight: 600; }
.top .theme { border-color: var(--line); color: var(--muted); }
.top .theme:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 860px) {
  body.app { display: block; }
  .side { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
  .side .logo { padding: 0; font-size: 20px; }
  .side nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; width: 100%; order: 3; gap: 4px; scrollbar-width: none; }
  .side nav a { white-space: nowrap; padding: 7px 11px; }
  .side nav a.on::before, .side nav .sep, .side nav .i { display: none; }
  .who { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; align-items: center; gap: 10px; }
  .who .me, .who label, .who form[action="/team/leave"] { display: none; }
  body.app main { padding: 20px 16px 60px; }
  h1 { font-size: 26px; }
}

/* ---- 5. page header --------------------------------------------------------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.ph h1 { margin-bottom: 2px; }
.ph .lede { margin: 0; }
.ph .actions { padding-top: 6px; }
.lede { color: var(--muted); font-size: 15.5px; }
.lede b { color: var(--ink); }
.crumbs { margin: 0 0 6px; font-size: 13.5px; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.tabs { display: flex; gap: 4px; align-items: center; margin: -6px 0 14px; color: var(--muted); font-size: 14px; }
.tabs a { text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.tabs a.current { background: var(--surface-2); color: var(--ink); font-weight: 600; }

/* ---- 6. buttons and inputs --------------------------------------------------- */
button, .button { font: 600 14.5px var(--body); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 8px; padding: 0 16px; height: 38px; line-height: 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
button:hover, .button:hover { filter: brightness(.94); color: var(--accent-ink); }
button.ghost, .button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.ghost:hover, .button.ghost:hover { filter: none; border-color: var(--muted); color: var(--ink); }
button.danger { color: var(--down); }
button.danger:hover { border-color: var(--down); color: var(--down); }
button.link { background: none; border: 0; color: inherit; padding: 0; height: auto; line-height: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; display: inline; }
button.link:hover { color: var(--accent); filter: none; }
button.sm, .button.sm { height: 30px; line-height: 28px; padding: 0 11px; font-size: 13px; border-radius: 6px; }
.button.big { height: 46px; line-height: 44px; padding: 0 22px; font-size: 16px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=color] { width: 60px; padding: 2px; height: 38px; }
input:disabled { background: var(--surface-2); color: var(--muted); }
::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ---- 7. cards, notices, empty ----------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 20px; }
.card h2, .card h3 { margin-top: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 22px; }
.cards > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; position: relative; }
.cards b { display: block; font: 800 34px/1.2 var(--display); letter-spacing: -.02em; }
.cards span { color: var(--muted); font-size: 13px; display: block; line-height: 1.4; margin-top: 2px; }
.cards > div:has(> .ico) > b { padding-right: 44px; }
.cards span small { display: block; font-size: 12.5px; }
.cards .is-down b { color: var(--down); }
.cards .is-down::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--down); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; gap: 10px; } .cards b { font-size: 24px; } }
.notice, .error, .alertline { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--r-s); padding: 10px 14px; margin: 0 0 14px; }
.notice.warn { border-left-color: var(--warn); }
.error, .alertline { border-left-color: var(--down); color: var(--text); }
.empty { color: var(--muted); padding: 28px 20px; text-align: center; }
.empty-card { color: var(--muted); }

/* ---- 8. status ---------------------------------------------------------------- */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; text-transform: capitalize; white-space: nowrap; color: var(--muted); }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--none); flex: none; }
.st-up { color: var(--up); }
.list .st-up { font-weight: 700; }
.st-up::before { background: var(--up); }
.st-down { color: var(--down); font-weight: 700; }
.st-down::before { background: var(--down); }
.st-paused { color: var(--muted); } .st-pending::before { background: var(--warn); }
h1 .st { font-size: 14px; vertical-align: 7px; margin-right: 4px; }
h1 .st-up { font-weight: 700; }
.bars { display: flex; gap: 2px; height: 30px; }
.bars i { flex: 1; background: var(--none); border-radius: 2px; }
.bars i.ok { background: var(--up-bar); } .bars i.warn { background: var(--warn); } .bars i.bad { background: var(--down); }
.bars.mini { height: 24px; }
.bars.big { height: 40px; gap: 3px; margin: 4px 0 6px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font: 11px var(--body); }
.chart .area { fill: var(--accent); opacity: .12; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }

/* ---- 9. tables ---------------------------------------------------------------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
table.list, table.plain, table.grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.list th, .list td, .plain th, .plain td, .grid th, .grid td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list tr:last-child td, .plain tr:last-child th, .plain tr:last-child td, .grid tr:last-child td { border-bottom: 0; }
.list th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); padding: 11px 16px; }
.list tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.list.small td { padding: 7px 16px; font-size: 13.5px; }
.plain th { width: 190px; font-weight: 600; color: var(--muted); }
.plain.small th, .plain.small td { padding: 6px 16px; font-size: 14px; }
.grid th { background: var(--surface-2); font: 700 16px var(--display); }
.grid td, .grid th { text-align: center; } .grid td:first-child, .grid th:first-child { text-align: left; }
tr.group td { font: 700 15px var(--display); background: var(--surface-2); }
.list .name a { font-weight: 700; font-size: 15.5px; text-decoration: none; }
.list .name a:hover { color: var(--accent); }
.list tr.is-down td { background: color-mix(in srgb, var(--down) 7%, var(--surface)); }
.list tr.is-down:hover td { background: color-mix(in srgb, var(--down) 11%, var(--surface)); }
@media (max-width: 700px) {
  .list thead { display: none; }
  .list tr { display: block; padding: 10px 6px; border-bottom: 1px solid var(--line); }
  .list td { display: inline-block; border: 0; padding: 3px 10px; vertical-align: middle; }
}

/* ---- 10. list card with filters -------------------------------------------- */
.listcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.listcard table.list { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.listcard > p { padding: 20px; margin: 0; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filters input[name=q] { flex: 1 1 220px; width: auto; padding-left: 36px; background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7385' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px 50%; }
.filters select { width: auto; background-color: var(--bg); }
.filters label.check { margin: 0 6px; }
.filters .apply { display: none; }
.bulk { display: none; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; background: var(--surface-2); }
.bulk.on { display: flex; }
.bulk label.check { margin: 0 8px 0 0; }
.mon td:first-child, .mon th:first-child { width: 34px; padding-right: 0; }
.mon .minibars { width: 200px; }
.mon .minibars .sub { margin-top: 3px; }

/* ---- 11. forms ---------------------------------------------------------------- */
.form, .narrow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; }
.form { max-width: 640px; margin-bottom: 18px; }
.form.wide { max-width: 860px; }
.form.wide > label, .form.wide > fieldset, .form.wide > details, .form.wide > div[data-for], .form.wide > p:not(.step) { max-width: 600px; }
.form h1, .form h2, .narrow h1 { margin-top: 0; }
.form label, .narrow label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 14px; }
.form label input, .form label select, .form label textarea, .narrow label input { margin-top: 5px; font-weight: 400; }
label.check, .form label.check { display: inline-flex; gap: 7px; align-items: center; margin: 0 16px 8px 0; font-weight: 400; font-size: 15px; }
.narrow { max-width: 400px; margin: 48px auto; }
.narrow p { margin: 14px 0 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-s); margin: 0 0 16px; padding: 12px 16px 4px; background: var(--bg); }
legend { font: 700 15px var(--display); padding: 0 6px; }
details { margin: 0 0 16px; border-top: 1px solid var(--line); padding-top: 12px; }
summary { cursor: pointer; margin-bottom: 12px; font-weight: 600; }
summary::marker { color: var(--accent); }
.step { font: 700 16px var(--display); margin: 4px 0 12px; }
.cols { columns: 3 170px; margin-bottom: 12px; }
.cols label { display: flex; }
.inline, .inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline input, .inline select { width: auto; }
.inline-form label { flex: 1 1 150px; }
.inline-form button { align-self: flex-end; margin-bottom: 14px; }
.apibox { padding: 14px 20px; border-top: 1px solid var(--line); }
.apibox summary { margin: 0; }
.apibox[open] summary { margin-bottom: 12px; }
.apibox table.list { box-shadow: none; margin: 0; }
.formfoot { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; }
.typepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 22px; }
.typepick.kinds { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
label.tp, .form label.tp { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg); font-weight: 400; transition: border-color .12s, background .12s; }
label.tp:hover { border-color: var(--muted); }
label.tp input { flex: none; margin: 3px 0 0; }
label.tp span { flex: 1; min-width: 0; }
label.tp b { display: block; font-size: 14.5px; }
label.tp small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 1px; }
label.tp:has(input:checked) { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---- 12. monitor page --------------------------------------------------------- */
.target { font-family: var(--mono); font-size: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.locs { list-style: none; margin: 0; padding: 0; }
.locs li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.locs li:last-child { border: 0; }
.locs .st { padding: 0; background: none; }

.hb pre { margin: 10px 0 6px; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }

/* ---- 13. auth and home -------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side { background: var(--nav); color: var(--nav-text); padding: 44px 56px; display: flex; flex-direction: column; }
.auth-side .logo { color: #faf8f4; font-size: 24px; }
.auth-side h2 { font: 800 40px/1.1 var(--display); color: #faf8f4; margin: 64px 0 22px; max-width: 460px; letter-spacing: -.02em; }
.auth-side p { color: var(--nav-text); max-width: 440px; font-size: 16px; }
.auth-side .fine { margin-top: auto; font-size: 13px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-main > div { width: 100%; max-width: 400px; }
.auth-main .narrow { margin: 0; width: 100%; padding: 30px 30px 24px; }
.auth-main .narrow h1 { font-size: 28px; }
.auth-main .narrow button { width: 100%; justify-content: center; height: 42px; margin-top: 4px; }
.sample { margin-top: 26px; background: var(--nav-hover); border: 1px solid var(--nav-line); border-radius: 12px; padding: 14px 16px; max-width: 440px; }
.sample div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: #ece8e0; }
.sample div + div { border-top: 1px solid var(--nav-line); }
.sample .st { text-transform: none; }
.sample .st-up { color: #6cc19c; } .sample .st-up::before { background: #6cc19c; box-shadow: none; }
.hero { background: var(--nav); color: var(--nav-text); border-radius: 18px; padding: 54px 56px; margin: 8px 0 30px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.hero h1 { color: #faf8f4; font-size: 48px; line-height: 1.04; margin: 0 0 16px; letter-spacing: -.025em; }
.hero p { font-size: 17px; max-width: 520px; }
.hero .sample { margin: 0; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; } .auth-side { padding: 28px 22px; } .auth-side h2 { margin-top: 26px; font-size: 30px; } .auth .sample { display: none; }
  .hero { grid-template-columns: 1fr; padding: 30px 22px; } .hero h1 { font-size: 34px; }
}

/* ---- 14. public status page ---------------------------------------------- */
body.status main { max-width: 780px; margin-top: -50px; padding-top: 0; }
.sp-head { background: var(--nav); color: #faf8f4; padding: 34px 0 70px; }
.sp-wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sp-brand { display: flex; align-items: center; gap: 12px; }
.sp-head h1 { color: #faf8f4; margin: 0; }
.plogo { height: 46px; }
.sp-head .button.ghost { background: transparent; color: #faf8f4; border-color: rgba(255, 255, 255, .3); }
.sp-head .button.ghost:hover { border-color: #faf8f4; }
.sp-intro { margin: 0 0 14px; color: #cfc8bd; position: relative; top: -14px; }
.overall { display: flex; gap: 14px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); }
.overall b { display: block; font: 800 22px var(--display); }
.overall span { color: var(--muted); font-size: 13.5px; }
.overall-down b { color: var(--down); }
.ov-mark { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--up); position: relative; }
.ov-mark::after { content: ""; position: absolute; left: 13px; top: 8px; width: 9px; height: 16px; border: solid #faf8f4; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.overall-partial .ov-mark { background: var(--warn); } .overall-down .ov-mark { background: var(--down); }
.overall-partial .ov-mark::after, .overall-down .ov-mark::after { left: 17px; top: 8px; width: 0; height: 14px; border-width: 0 0 0 4px; transform: none; border-radius: 2px; }
.svcs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); margin-top: 16px; overflow: hidden; }
.svc { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.svc:last-child { border-bottom: 0; }
.svc-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.svc .bars { height: 34px; margin: 10px 0 6px; }
.svc .bars i:hover { opacity: .7; }
.timeline { list-style: none; margin: 0; padding: 4px 0 0; }
.timeline li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--line); margin-left: 8px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--up); border: 2px solid var(--bg); }
.timeline li.open::before { background: var(--down); }
.timeline li:last-child { border-left-color: transparent; }
.tl-when { font-size: 13px; color: var(--muted); }
.tl-note { margin-top: 4px; color: var(--muted); }
.subscribe { margin-top: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 22px; }
.subscribe h2 { margin: 0 0 12px; font-size: 18px; }
.sub-row { display: flex; gap: 10px; }
.sub-row input { flex: 1; }
footer { margin-top: 40px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
footer a { text-decoration: none; font-weight: 600; }
footer .theme { border-color: var(--line); color: var(--muted); }
footer .theme:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 640px) { .sp-head h1 { font-size: 24px; } .sp-sub { display: none; } .sub-row { flex-direction: column; } }

/* ---- 15. artwork ------------------------------------------------------------- */
.art { display: block; max-width: 100%; height: auto; }
.shot { filter: drop-shadow(0 18px 30px rgba(18, 17, 16, .25)); }
.hero { grid-template-columns: 1fr 1.1fr; padding: 48px 20px 48px 56px; overflow: hidden; }
.hero-text { position: relative; }
.hero-text .goose { position: absolute; right: -10px; top: -22px; width: 86px; height: 86px; }
.hero-shot { transform: perspective(1400px) rotateY(-10deg) rotateX(3deg); transform-origin: left center; margin-right: -60px; }
.hero .cta { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.where { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; align-items: center; margin: 40px 0 10px; }
.where h2 { margin-top: 0; }
.where p { font-size: 16px; }
.pulse { transform-origin: center; animation: pulse 2.4s ease-out infinite; transform-box: fill-box; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }
.auth-shot { position: relative; margin-top: 30px; max-width: 480px; }
.auth-shot .goose { position: absolute; right: -24px; bottom: -34px; }
.empty-art { display: flex; gap: 24px; align-items: center; padding: 28px 24px; }
.empty-art h3 { margin-bottom: 6px; }
.empty-art p { color: var(--muted); max-width: 440px; }
.empty-art .button { margin-top: 4px; }
label.tp .tp-i { width: 22px; height: 22px; margin-top: 1px; color: var(--muted); }
label.tp:has(input:checked) .tp-i { color: var(--accent); }
.bars-anim rect { transform-origin: center bottom; transform-box: fill-box; animation: grow .9s cubic-bezier(.2, .8, .3, 1) backwards; }
.bars-anim rect:nth-child(odd) { animation-delay: .15s; } .bars-anim rect:nth-child(3n) { animation-delay: .3s; }
@keyframes grow { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .pulse, .bars-anim rect { animation: none; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 28px 22px; }
  .hero-shot { transform: none; margin: 10px 0 0; }
  .hero-text .goose { display: none; }
  .where { grid-template-columns: 1fr; }
  .auth .auth-shot { display: none; }
  .empty-art { flex-direction: column; text-align: center; }
}

/* ---- 16. logo mark and home sections ------------------------------------------ */
.mark { flex: none; }
.logo .mark { border-radius: 0; }
img.mark { display: inline-block; vertical-align: -4px; }
footer .brandmark, footer.site .brandmark { vertical-align: -6px; margin-right: 4px; }
.top .logo .mark, .hero .mark { --mark-head: var(--ink); }
:root[data-theme="dark"] .top .logo .mark { --mark-head: #faf8f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top .logo .mark { --mark-head: #faf8f4; } }
footer.site .mark { vertical-align: -5px; margin-right: 4px; --mark-head: var(--ink); }
.auth-shot .goose { z-index: 2; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 10px; }
.steps > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 22px 16px; }
.steps .n { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 15px var(--display); margin-bottom: 12px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); margin: 0; }
.feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.feat > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 14px; }
.feat .i { width: 26px; height: 26px; color: var(--accent); margin-bottom: 10px; }
.feat h3 { font-size: 16px; margin-bottom: 4px; }
.feat p { color: var(--muted); font-size: 14px; margin: 0; }
.where.flip { grid-template-columns: 1.1fr 1fr; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 20px 20px; display: flex; flex-direction: column; }
.plan.pick { border-color: var(--ink); }
.plan .tag { position: absolute; top: -10px; left: 16px; background: var(--accent); color: var(--accent-ink); font: 700 11.5px var(--body); padding: 2px 8px; border-radius: 3px; letter-spacing: .02em; }
.plan h3 { margin-bottom: 2px; }
.plan .price { font: 800 30px var(--display); letter-spacing: -.02em; }
.plan .price small { font: 600 14px var(--body); color: var(--muted); margin-left: 2px; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 18px; font-size: 14px; }
.plan li { padding: 6px 0; border-top: 1px solid var(--line); }
.plan .button { margin-top: auto; justify-content: center; }
footer.site { max-width: 1080px; margin: 50px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .where.flip { grid-template-columns: 1fr; } .where.flip .art { order: 2; } }

/* ---- 17. marketing page (home) ------------------------------------------------ */
body.marketing .top { border-bottom: 1px solid var(--line); max-width: none; padding: 14px 40px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
body.marketing .top nav a:not(.button) { color: var(--text); }
body.marketing main { max-width: none; padding: 0; overflow-x: hidden; }
.mk-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 70px 40px 60px; position: relative; }
.mk-hero::before { content: none; }
.mk-hero-text { position: relative; }
.mk-hero h1 { font-size: 54px; line-height: 1.04; letter-spacing: -.03em; margin: 18px 0 16px; max-width: 560px; }
.mk-hero p.big { font-size: 19px; color: var(--muted); max-width: 520px; }
.mk-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 26px; }
.live { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 6px; background: var(--surface); padding: 7px 12px 7px 12px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap; overflow: hidden; }
.live span { overflow: hidden; text-overflow: ellipsis; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--up); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); animation: livedot 2s ease-out infinite; }
.live em { font-style: normal; }
.live:hover { border-color: var(--up); color: var(--text); }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.proof { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.proof b { color: var(--ink); font: 800 18px var(--display); margin-right: 4px; }
.mk-hero-shot { position: relative; }

.mk-section { max-width: 1180px; margin: 0 auto; padding: 60px 40px; }
.mk-section + .mk-section { padding-top: 10px; }
.center { text-align: center; }
h2.center { font-size: 36px; letter-spacing: -.02em; margin: 0 auto 10px; max-width: 760px; }
.mk-section > .lede { margin: 0 auto 36px; max-width: 640px; font-size: 17px; }
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 4px rgba(18, 17, 16, .04), 0 16px 40px -20px rgba(18, 17, 16, .25); padding: 32px 28px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mk-card h3 { font-size: 20px; margin: 18px 0 8px; }
.mk-card p { color: var(--muted); flex: 1; }
.mk-card a { font-weight: 600; color: var(--ink); }
svg.big { width: 72px; height: 72px; }
svg.big.sm { width: 52px; height: 52px; flex: none; }
.mk-band { background: none; color: var(--text); padding: 56px 40px 40px; margin: 10px auto 0; max-width: 1180px; border-top: 1px solid var(--line); }
.mk-band h2 { color: var(--ink); text-align: left !important; max-width: 1100px; margin: 0 auto; }
.mk-band > p.center { text-align: left; max-width: 1100px; margin: 0 auto; }
.mk-band a { color: var(--ink); font-weight: 600; }
.mk-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 26px auto 22px; max-width: 1100px; }
.mk-lists > div { background: none; color: var(--text); border-radius: 0; padding: 0; }
.mk-lists h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--body); }
.mk-lists ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.mk-lists li { padding: 9px 0 9px 22px; position: relative; break-inside: avoid; font-size: 15.5px; border-top: 1px solid var(--line); }
.mk-lists li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px; border: solid var(--up); border-width: 0 0 2px 2px; transform: rotate(-45deg); background: none; border-radius: 0; }
.mk-lists li::after { content: none; }
.mk-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin-top: 24px; }
.mk-rows > div { display: flex; gap: 16px; align-items: flex-start; }
.mk-rows h3 { font-size: 17px; margin: 6px 0 6px; }
.mk-rows p { color: var(--muted); margin: 0; font-size: 14.5px; }
.mk-cta { max-width: 1180px; margin: 20px auto 0; padding: 40px; display: flex; align-items: center; gap: 28px; background: var(--surface-2); border-radius: 18px; }
.mk-cta h2 { margin: 0 0 4px; }
.mk-cta p { margin: 0; color: var(--muted); }
.mk-cta .button { margin-left: auto; }
body.marketing footer.site { max-width: 1180px; padding: 20px 40px 40px; }
@media (max-width: 960px) {
  .mk-hero { grid-template-columns: 1fr; padding: 40px 20px 20px; }
  .mk-hero h1 { font-size: 36px; }
  .mk-hero-shot { transform: none; margin: 20px 0 0; }
  .mk-cards, .mk-rows { grid-template-columns: 1fr 1fr; }
  .mk-section { padding: 40px 20px; }
  .mk-lists { grid-template-columns: 1fr; }
  body.marketing .top { padding: 12px 16px; }
  .mk-cta { flex-direction: column; text-align: center; margin: 20px 16px; }
  .mk-cta .button { margin: 0; }
}
@media (max-width: 600px) { .mk-cards, .mk-rows { grid-template-columns: 1fr; } .mk-lists ul { columns: 1; } }

/* ---- 18. the owner's icon set ------------------------------------------------- */
.ico { display: inline-flex; width: var(--s); height: var(--s); flex: none; vertical-align: middle; }
.ico img { width: var(--s); height: var(--s); display: block; }
.ico .ico-dark { display: none; }
:root[data-theme="dark"] .ico .ico-light { display: none; } :root[data-theme="dark"] .ico .ico-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico .ico-light { display: none; } :root:not([data-theme="light"]) .ico .ico-dark { display: block; } }
.ico.tile img { border-radius: 22%; }
.nico { width: 22px; height: 22px; flex: none; }
.side nav a .nico { opacity: .85; } .side nav a.on .nico, .side nav a:hover .nico { opacity: 1; }
.ph > div:first-child:has(> .ico) { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.ph > div:first-child:has(> .ico) > .ico { grid-row: 1 / span 2; }
.ph > div:first-child:has(> .ico) > h1, .ph > div:first-child:has(> .ico) > .lede { grid-column: 2; }
.ph > div:first-child:has(> .ico) > h1:last-child { grid-row: 1 / span 2; }
.cards .c-ink .ico-light { display: none; } .cards .c-ink .ico-dark { display: block; }
.cards > div { padding-right: 70px; }
.cards > div > .ico { position: absolute; right: 18px; top: 18px; }
.cards .c-down { background: color-mix(in srgb, var(--down) 5%, var(--surface)); border-color: color-mix(in srgb, var(--down) 35%, var(--line)); }
.cards .c-up { background: var(--surface); }
.cards .c-up b { color: var(--up); }
.cards .c-ink { background: var(--nav); border-color: var(--nav); color: #f4f0ea; }
.cards .c-ink b { color: #faf8f4; } .cards .c-ink span { color: #b7b0a6; }
.cards .c-used { background: var(--surface); }
.empty-art .ico { flex: none; }
.auth-shot .tile { position: absolute; right: -10px; bottom: -40px; filter: drop-shadow(0 10px 20px rgba(18, 17, 16, .3)); }
.hero-text .ico { position: absolute; right: -10px; top: -30px; }
.mk-card .ico { margin-bottom: 4px; }
.mk-rows .ico { flex: none; margin-top: 2px; }
.mk-cta .ico { flex: none; }

/* ---- 19. monitoring dashboard: overview, events, monitor cards -------------------- */
.overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; margin-bottom: 20px; }
.overview .card { margin: 0; }
.ov-chart .chart { margin-top: 4px; }
.ov-chart .mark { fill: var(--down); opacity: .18; }
.legend { margin: 8px 0 0; }
.legend i { display: inline-block; width: 14px; height: 3px; background: var(--accent); vertical-align: middle; margin: 0 4px 0 2px; border-radius: 2px; }
.legend .lg-mark { background: var(--down); opacity: .7; width: 2px; height: 12px; margin-left: 14px; }
.events { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.events li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.events li:last-child { border: 0; }
.events li i { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.events .ev-down i { background: var(--down); }
.events .ev-up i { background: var(--up-bar); }
.events .ev-ack i { background: var(--warn); }
.events .ev-alert i { background: var(--accent); }
.layout { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: auto; }
.layout a { padding: 6px 11px; text-decoration: none; color: var(--muted); font-size: 16px; line-height: 1; background: var(--surface); }
.layout a.on { background: var(--surface-2); color: var(--ink); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 16px; }
.mcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 16px 14px; text-decoration: none; color: var(--text); position: relative; transition: transform .12s, box-shadow .12s, border-color .12s; }
.mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--muted); color: var(--text); }
.mcard.st-down { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); background: color-mix(in srgb, var(--down) 6%, var(--surface)); }
.mcard.st-paused, .mcard.st-pending { opacity: .75; }
.mc-top { display: flex; align-items: center; gap: 10px; }
.mc-top .ti { flex: none; }
.mc-name { font-weight: 700; font-size: 15.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-top .st { font-size: 13px; }
.mc-sub { color: var(--muted); font-size: 13px; margin: 4px 0 10px 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark { width: 100%; height: 44px; display: block; }
.sp-line { fill: none; stroke: var(--up); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sp-area { fill: var(--up); opacity: .12; }
.st-down .sp-line { stroke: var(--down); } .st-down .sp-area { fill: var(--down); }
.sp-none { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mc-foot { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mc-foot span { white-space: nowrap; }
.mc-foot b { color: var(--text); font-size: 14px; margin-right: 3px; }
.mc-why { margin-top: 10px; font-size: 13px; color: var(--down); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .name .ti { margin-right: 8px; vertical-align: -6px; }
.list .name .ti + a { font-weight: 700; }
@media (max-width: 980px) { .overview { grid-template-columns: 1fr; } .mgrid { padding: 12px; grid-template-columns: 1fr; } }

/* ---- 20. real product screenshots ------------------------------------------------ */
.shot-real { display: block; width: 100%; height: auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(18, 17, 16, .45); background: var(--surface); }
.shot-real img { width: 100%; height: auto; display: block; }
.mk-hero-shot .shot-real { width: 100%; }
.auth-shot .shot-real { box-shadow: 0 30px 60px -30px rgba(18, 17, 16, .6); border-color: rgba(255, 255, 255, .12); }
.shot-status { max-width: 520px; }
@media (max-width: 960px) { .mk-hero-shot .shot-real { width: 100%; } }

/* ---- 21. monitor page v2 --------------------------------------------------------- */
.status-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; }
.status-hero.sh-up { background: var(--surface); }
.status-hero.sh-down { background: color-mix(in srgb, var(--down) 5%, var(--surface)); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.sh-main b { display: block; font: 800 26px/1.15 var(--display); margin-top: 8px; }
.sh-main small { display: block; font: 400 14px var(--body); color: var(--muted); margin-top: 2px; }
.sh-why { margin-top: 8px; color: var(--down); font-weight: 600; }
.sh-bars .bars.mini { height: 34px; }
.chart .mark { fill: var(--down); opacity: .18; }
.events.big { max-height: none; }
.events.big li { padding: 12px 0; align-items: flex-start; }
.events.big li i { margin-top: 5px; }
.ev-body { flex: 1; min-width: 0; }
.ev-note { margin-top: 4px; }
.ev-ack { margin-top: 8px; }
.ev-ack input { max-width: 260px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 14px 64px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.checks li:last-child { border: 0; }
.checks .st { padding: 0; background: none; min-width: 0; }
.checks .st-down::before { background: var(--down); }
@media (max-width: 700px) { .status-hero { grid-template-columns: 1fr; } }

/* ---- 22. sign-in page ------------------------------------------------------------ */
.auth-points { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; }
.auth-points .ico { flex: none; }
.auth-points .ico .ico-light { display: none; } .auth-points .ico .ico-dark { display: block; }
.auth-points b { display: block; color: #faf8f4; font-size: 15px; }
.auth-points span { color: var(--nav-text); font-size: 14px; }
.auth-side .auth-shot { margin-top: 28px; }
.form-goose { margin-bottom: 12px; }
.auth-main .narrow h1 { margin-top: 0; }

.split .cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.split .cards > div { padding: 16px 52px 14px 16px; min-width: 0; }
.split .cards > div > .ico { right: 12px; top: 14px; }
.split .cards b { font-size: 26px; }

.locs-table { max-width: 760px; margin: 24px auto 10px; }
/* ---- 23. world map ----------------------------------------------------------------- */
.where .worldmap { max-width: 100%; }

/* ---- 24. certificate / domain expiry block ------------------------------------------ */
.expiry { display: flex; flex-direction: column; gap: 2px; }
.expiry b { font: 800 30px/1.1 var(--display); color: var(--up); }
.expiry.warn b { color: var(--warn); } .expiry.bad b { color: var(--down); }
.expiry-bar { height: 8px; border-radius: 4px; background: var(--none); margin: 8px 0 4px; overflow: hidden; }
.expiry-bar i { display: block; height: 100%; background: var(--up); border-radius: 4px; }
.expiry.warn .expiry-bar i { background: var(--warn); } .expiry.bad .expiry-bar i { background: var(--down); }

/* ---- 25. ping latency block ------------------------------------------------------------- */
.latency { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.latency b { display: block; font: 800 30px/1.1 var(--display); }
.latency span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.locs li.fastest > span:first-child { font-weight: 700; }
.locs li.fastest > span:last-child { color: var(--up); }

/* ---- 26. chart range picker, per-location lines ----------------------------------------------- */
.chart-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.ranges { display: flex; flex-wrap: wrap; gap: 2px; }
.ranges a { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.ranges a:hover { background: var(--none); color: var(--ink); }
.ranges a.on { background: var(--ink); color: var(--bg); font-weight: 600; }
.chart-tools select { font-size: 13px; padding: 5px 8px; }
.chart .loc-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.loc-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.loc-legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.loc-legend input { margin: 0; }
.loc-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }

/* ---- 27. legal and docs pages ------------------------------------------------------------- */
.legal { max-width: 760px; margin: 40px auto 80px; padding: 0 20px; }
.legal h1 { font: 800 38px/1.1 var(--display); margin: 0 0 6px; }
.legal h2 { font: 700 20px/1.2 var(--display); margin: 28px 0 8px; }
.legal p, .legal li { line-height: 1.6; }
.legal table.plain th { text-align: left; white-space: nowrap; vertical-align: top; padding-right: 16px; }
.legal pre { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; }

/* ---- 28. two-factor setup ------------------------------------------------------------------ */
.qr { background: #faf8f4; border-radius: 12px; padding: 12px; display: inline-block; margin: 6px 0 10px; }
.qr svg { display: block; width: 200px; height: 200px; }
pre.codes { font-size: 16px; letter-spacing: 1px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; display: inline-block; }

/* ---- 29. billing plans inside the app, status page forms ---------------------------------- */
body.app .plans { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
body.app .plan { padding: 18px 16px 16px; }
body.app .plan .price { font-size: 26px; }
body.app .plan ul { font-size: 13.5px; }
details.add { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); padding: 0; max-width: 640px; }
details.add > summary { cursor: pointer; padding: 16px 22px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 10px; }
details.add > summary::before { content: "+"; font: 700 20px/1 var(--display); color: var(--accent); }
details.add[open] > summary::before { content: "‘2"; }
details.add > .form { border: 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }

/* ---- 30. phones ------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .copy-row { flex-wrap: wrap; } .copy-row input { flex-basis: 100%; }
  body.app main { overflow-x: hidden; padding: 16px 14px 60px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cards > div { padding: 14px 14px; }
  .cards b { font-size: 22px; }
  .cards span { padding-right: 30px; font-size: 12.5px; }
  .cards .ico { width: 24px; height: 24px; }
  .overview, .split, .status-hero { grid-template-columns: 1fr; }
  .mgrid { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .mcard { min-width: 0; overflow: hidden; }
  .filters { padding: 10px; gap: 8px; }
  .filters input[type="search"], .filters input[name="q"] { flex: 1 1 100%; }
  .filters select { flex: 1 1 40%; }
  .latency { gap: 18px; }
  .latency b { font-size: 24px; }
  .chart text { font-size: 15px; }
  .ranges a { padding: 4px 7px; font-size: 12px; }
  table.plain, .list table { display: block; overflow-x: auto; }
  .ph .actions { width: 100%; }
}

/* ---- 31. plan cards: footer line always on the bottom edge, lists start level ------------------- */
.plan .sub { min-height: 2.9em; }
.plan > form, .plan > .button, .plan > span.sub:last-child, .plan > a.button { margin-top: auto; }
.plan > span.sub:last-child { min-height: 0; padding-top: 4px; }

/* ---- 32. less template, more console ------------------------------------------------------------ */
.split .cards .ico { display: none; }
.split .cards > div { padding: 16px 18px; }
.split .cards b { font-size: 26px; }
.card-note { margin: -4px 0 8px; }
.num, .cards b, .latency b, .expiry b, .locs .sub, .facts dd { font-variant-numeric: tabular-nums; }
.loc-legend input { accent-color: var(--muted); }
.mk-real { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.mk-real h2 { margin-top: 0; }
.mk-real-text p { font-size: 16.5px; line-height: 1.6; }
.mk-real-shot { margin: 0; }
.mk-real-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px -24px rgba(18, 17, 16, .45); }
.mk-what { max-width: 860px; }
.mk-plain { font-size: 18px; line-height: 1.65; color: var(--text); }
.mk-rows > div { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 900px) { .mk-real { grid-template-columns: 1fr; gap: 20px; } }
.who .sub { word-break: normal; overflow-wrap: break-word; }
.who a.link { color: var(--side-text); text-decoration: underline; text-underline-offset: 3px; }
.who a.link:hover { color: var(--side-on); }

/* ---- 33. brand mark: navy goose on light, cream goose on navy ------------------------------------ */
.brandmark.on-dark .ico-light { display: none; } .brandmark.on-dark .ico-dark { display: block; }
.side .brandmark { margin-right: 2px; }

/* ---- 34. probe map ------------------------------------------------------------------------------- */
.worldmap { width: 100%; height: auto; display: block; border-radius: var(--r-l); border: 1px solid var(--line);
  --wm-sea: #ebe7df; --wm-land: #d9d3c8; --wm-coast: #c6bfb3; --wm-arc: var(--accent); --wm-label: #1c1b19; --wm-halo: #ebe7df; --wm-off: #9a948c;
  background: var(--wm-sea); }
:root[data-theme="dark"] .worldmap { --wm-sea: #161514; --wm-land: #2a2826; --wm-coast: #3a3733; --wm-label: #f4f0ea; --wm-halo: #161514; --wm-off: #6e6861; border-color: #2e2c29; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .worldmap { --wm-sea: #161514; --wm-land: #2a2826; --wm-coast: #3a3733; --wm-label: #f4f0ea; --wm-halo: #161514; --wm-off: #6e6861; border-color: #2e2c29; } }
.wm-land { fill: var(--wm-land); stroke: var(--wm-coast); stroke-width: .5; }
.wm-arcs path { fill: none; stroke: var(--wm-arc); stroke-width: .9; stroke-dasharray: 2 3; opacity: .55; }
.wm-arcs path.off { stroke: var(--wm-off); opacity: .35; }
.wm-pin { fill: var(--accent); stroke: var(--wm-sea); stroke-width: 1.6; }
.wm-pulse { fill: var(--accent); opacity: .22; }
.wm-city.off .wm-pin { fill: var(--wm-off); }
.wm-city.off .wm-label { fill: var(--wm-off); }
.wm-label { font: 600 11.5px var(--body); fill: var(--wm-label); paint-order: stroke; stroke: var(--wm-halo); stroke-width: 3px; stroke-linejoin: round; }
.where .worldmap { max-width: 100%; }

/* ---- 35. wordmark: Honk + Watch (brand sheet) ---------------------------------------------------- */
.wm2 { color: var(--accent); }
.logo { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.num, .locs .sub, .chart text, code, pre, .loc-legend .sub { font-family: var(--mono); }
.num { font-size: .94em; }
.cards b, .latency b, .expiry b { white-space: nowrap; }

/* ---- 36. status page: days before monitoring began stay quiet; home page status section -------- */
.svc .bars i.none { opacity: .4; }
.mk-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.mk-real-shot .shot-real { box-shadow: 0 18px 40px -24px rgba(18, 17, 16, .45); }
@media (max-width: 900px) { .mk-flip .mk-real-shot { order: 2; } }

/* ---- 37. read-only demo ------------------------------------------------------------------------- */
.demo-bar { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); font-size: 14px; }
.demo-bar a { font-weight: 600; }
/* nothing that changes data is offered in the demo (the server refuses it anyway) */
body.demo main form[method="post"], body.demo main a[href$="/edit"], body.demo main a[href^="/monitors/new"],
body.demo main .actions, body.demo main input[type="checkbox"][form="bulk"], body.demo main #all, body.demo main #all2 { display: none !important; }
.who .button.sm { align-self: flex-start; }

/* ---- 38. error pages ----------------------------------------------------------------------------- */
.err { max-width: 560px; margin: 70px auto 90px; padding: 0 20px; text-align: center; }
.err .err-goose { display: inline-flex; margin-bottom: 10px; }
.err-code { font: 600 15px var(--mono); color: var(--muted); margin: 0; }
.err h1 { font: 800 38px/1.1 var(--display); margin: 0 0 10px; }
.err .lede { margin: 0 auto 24px; max-width: 460px; }
.err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- 39. copy-ready share links ------------------------------------------------------------------ */
.share-url { margin: -2px 0 18px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); }
.share-url label { display: block; margin: 0 0 6px; font-weight: 600; }
.share-url p.sub { margin: 6px 0 0; }
.copy-row { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; background: var(--surface); }
.copy-row .button, .copy-row button { flex: none; height: 38px; }
.page-card { max-width: 640px; margin-bottom: 12px; }
.page-card .share-url { margin: 8px 0 0; }
body.demo .page-card ~ form, body.demo details.add { display: none; }

/* ---- 40. warm carbon: flat surfaces, crisp 1px borders, accent only where it acts --------------- */
.card, .cards > div, .mcard, .form, .narrow, .plan, .status-hero, .overall, .svcs, .mk-card { box-shadow: none; }
.mcard:hover { box-shadow: none; border-color: var(--muted); }
.mk-band .mk-intro { max-width: 760px; margin: 14px 0 0; font-size: 17px; color: var(--muted); }
.mk-band .mk-intro, .mk-band .mk-lists { margin-left: auto; margin-right: auto; }
.mk-band .mk-intro { max-width: 1100px; }
/* login side panel is always dark: dark screenshot and cream goose in both modes */
.auth-shot .shot-real .ico-light { display: none !important; } .auth-shot .shot-real .ico-dark { display: block !important; }

/* ---- 41. dashboard hierarchy: health line, quieter card footers, one-line filters ----------------- */
.health { margin: 4px 0 0; font-size: 17px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.health::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--none); flex: none; }
.health b { color: var(--ink); font-weight: 700; }
.health.h-up::before { background: var(--up-bar); } .health.h-up b { color: var(--up); }
.health.h-down::before { background: var(--down); } .health.h-down b { color: var(--down); }
.mc-foot { display: flex; align-items: baseline; gap: 14px; flex-wrap: nowrap; overflow: hidden; }
.mc-foot small { color: var(--muted); font-size: 12px; }
.mc-foot .mc-ago { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mcard.st-down { border-left: 4px solid var(--down); }
.mcard.st-down .mc-why { font-weight: 600; }
.filters { flex-wrap: nowrap; }
.filters input[name=q] { min-width: 140px; }
.filters select { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1100px) { .filters { flex-wrap: wrap; } }
.svc-why { display: block; font-weight: 400; font-size: 13px; color: var(--down); margin-top: 2px; }
.mk-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; }
.mk-three > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.mk-three h3 { margin: 0 0 6px; font-size: 19px; }
.mk-three p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 800px) { .mk-three { grid-template-columns: 1fr; gap: 18px; } }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 42. light mode, calmer: the uptime card is a normal card, events never scroll, faint incident stripes ---- */
:root:not([data-theme="dark"]) .cards .c-ink { background: var(--surface); border-color: var(--line); color: var(--text); }
:root:not([data-theme="dark"]) .cards .c-ink b { color: var(--ink); } :root:not([data-theme="dark"]) .cards .c-ink span { color: var(--muted); }
:root:not([data-theme="dark"]) .cards .c-ink .ico-light { display: block; } :root:not([data-theme="dark"]) .cards .c-ink .ico-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cards .c-ink { background: var(--nav); border-color: var(--nav); color: #f4f0ea; }
  :root:not([data-theme="light"]) .cards .c-ink b { color: #faf8f4; } :root:not([data-theme="light"]) .cards .c-ink span { color: #b7b0a6; }
  :root:not([data-theme="light"]) .cards .c-ink .ico-light { display: none; } :root:not([data-theme="light"]) .cards .c-ink .ico-dark { display: block; } }
.events { max-height: none; overflow: visible; }
.chart .mark { fill: var(--down); opacity: .7; }  /* incidents: thin, solid, clearly red */
.overview { align-items: start; }

/* ---- 43. sidebar follows the theme: light sidebar in light mode, dark in dark mode ------------------- */
:root { --side-bg: #fbfaf7; --side-text: #57534d; --side-on: #181817; --side-hover: rgba(24, 23, 22, .05);
  --side-active: rgba(24, 23, 22, .07); --side-line: #e3ded4; }
:root[data-theme="dark"] { --side-bg: #161514; --side-text: #a8a197; --side-on: #f4f0ea; --side-hover: rgba(244, 240, 234, .05);
  --side-active: rgba(244, 240, 234, .08); --side-line: rgba(244, 240, 234, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --side-bg: #161514; --side-text: #a8a197; --side-on: #f4f0ea;
  --side-hover: rgba(244, 240, 234, .05); --side-active: rgba(244, 240, 234, .08); --side-line: rgba(244, 240, 234, .08); } }
.side { border-right: 1px solid var(--side-line); }
.side .logo { color: var(--side-on); }
.nicon .nico-d { display: none; }
:root[data-theme="dark"] .nicon .nico-l { display: none; } :root[data-theme="dark"] .nicon .nico-d { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nicon .nico-l { display: none; } :root:not([data-theme="light"]) .nicon .nico-d { display: inline; } }

.facts dd.slowest { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locs li > span:first-child { white-space: nowrap; }
.locs li .sub { white-space: nowrap; font-size: 12.5px; }

/* ---- 44. wall screen: no menu, bigger type, updates itself ------------------------------------------ */
.wall-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-top: 6px; }
.wall-tools .live-note { font-size: 12.5px; white-space: nowrap; }
body.wall .side, body.wall .demo-bar, body.wall .filters, body.wall .bulk, body.wall .notice,
body.wall .cards .c-used a, body.wall main form[method="post"] { display: none !important; }
body.wall.app { display: block; }
body.wall.app main { max-width: none; padding: 22px 28px 40px; }
body.wall h1 { font-size: 34px; }
body.wall .wall-clock { font: 600 22px var(--mono); color: var(--muted); margin-left: 10px; vertical-align: 4px; }
body.wall .health { font-size: 22px; }
body.wall .health::before { width: 16px; height: 16px; }
body.wall .cards b { font-size: 44px; }
body.wall .mgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
body.wall .mc-name { font-size: 17px; }
body.wall .mcard { pointer-events: none; }
body.wall input[type="checkbox"][form="bulk"] { display: none; }
@media (max-width: 860px) { .wall-tools .live-note { display: none; } }

/* ---- 45. design audit 30 Oct: flat, quiet, readable --------------------------------------------- */
.shot-real, .mk-real-shot img, .mk-real-shot .shot-real, .auth-shot .shot-real { box-shadow: none !important; filter: none !important; border: 1px solid var(--line); border-radius: var(--r); }
.wm-pulse { display: none; }                         /* no halos on map pins */
.st-up::before, .st-down::before, .live i { box-shadow: none !important; animation: none !important; }
.cards > div > b { padding-right: 0; }
@media (min-width: 961px) { .mk-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }  /* phones keep one column */
.mk-hero .cta-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.demo-note { padding: 18px 20px; }
.demo-note p { margin: 0 0 10px; }

/* ---- 46. second pass: no tinted callouts, quiet empty history ---------------------------------- */
.demo-note { background: var(--surface-2); }
.bars.big i.none { opacity: .35; }

/* ---- 47. pricing: four self-serve plans, Enterprise as a wide row below ----------------------- */
.plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan.pick { border: 2px solid var(--accent); padding: 21px 19px 19px; }
.plan .tag { border-radius: 3px; }
.plan-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 28px; align-items: center; margin-top: 16px; }
.plan-wide .sub { min-height: 0; margin: 0; }
.plan-wide ul { margin: 0; columns: 2; column-gap: 24px; }
.plan-wide li { break-inside: avoid; }
.plan-wide > .button { margin-top: 0; }
.plan-wide + .sub { margin-top: 22px; }
@media (max-width: 960px) {
  .plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-wide { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .plans.four { grid-template-columns: 1fr; }
  .plan-wide ul { columns: 1; }
}

/* ---- 48. phones: the top menu fits on one line ------------------------------------------------- */
@media (max-width: 640px) {
  header.top { padding-left: 16px; padding-right: 16px; gap: 10px; }
  header.top nav { gap: 8px; }
  header.top nav .nav-x, header.top .theme { display: none; }   /* phones follow their own light/dark setting */
  header.top .logo .wordmark { font-size: 19px; }
  header.top .button.sm { padding-left: 11px; padding-right: 11px; }
}

/* ---- 49. home, second review pass: bigger product, two-city diagram, section contrast ----------- */
@media (min-width: 961px) { .mk-hero { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); max-width: 1240px; } }
:root[data-theme="dark"] .shot-real { border-color: #3a3733; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-real { border-color: #3a3733; } }

.vote { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.vote > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.vote-head { font: 700 14px var(--display); margin: 0 0 8px; }
.vote ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.vote li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.vote li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--up-bar); }
.vote li.bad::before { background: var(--down); }
.vote li span { margin-left: auto; color: var(--muted); font: 12.5px var(--mono); }
.vote li.bad span { color: var(--down); }
.mk-real-text .vote-out { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.vote-out.ok { color: var(--up); } .vote-out.bad { color: var(--down); }
@media (max-width: 420px) { .vote { grid-template-columns: 1fr; } }

.mk-dark { background: #161514; color: #f4f0ea; margin: 50px 0 0;
  --ink: #f4f0ea; --text: #f4f0ea; --muted: #a8a197; --line: #2e2c29; --surface: #1c1b19; }
.mk-dark .where { margin: 0 auto; padding-top: 64px; padding-bottom: 64px; }
.mk-dark h2 { color: #f4f0ea; }
.mk-dark a { color: #f4f0ea; }
.mk-dark .worldmap { --wm-sea: #1c1b19; --wm-land: #2a2826; --wm-coast: #3a3733; --wm-label: #f4f0ea; --wm-halo: #1c1b19; --wm-off: #6e6861; border-color: #2e2c29; }
:root[data-theme="dark"] .mk-dark { background: #1c1b19; border-top: 1px solid #2e2c29; border-bottom: 1px solid #2e2c29; }
:root[data-theme="dark"] .mk-dark .worldmap { --wm-sea: #161514; --wm-halo: #161514; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-dark { background: #1c1b19; border-top: 1px solid #2e2c29; border-bottom: 1px solid #2e2c29; }
  :root:not([data-theme="light"]) .mk-dark .worldmap { --wm-sea: #161514; --wm-halo: #161514; }
}
.mk-dark + .mk-section { padding-top: 60px; }

.mk-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 48px 48px 40px; margin-top: 30px; }
@media (max-width: 960px) { .mk-band { margin-left: 16px; margin-right: 16px; padding: 32px 20px 28px; } }

/* ---- 50. app dashboard: compact header, lighter type, clearer small icons (30 Oct review) -------- */
h1 { font-weight: 700; letter-spacing: -.01em; }
.ph { margin-bottom: 14px; }
.cards { gap: 12px; margin-bottom: 18px; }
.cards > div { padding: 15px 18px 14px; }
.cards b { font: 700 26px/1.15 var(--display); letter-spacing: -.01em; }
.cards span { font-size: 13px; margin-top: 3px; }
.side nav a .nico { opacity: 1; }

/* ---- 51. monitor form: the alert rule in one sentence ------------------------------------------ */
.form .rule { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); font-weight: 600; font-size: 14px; }