* { margin:0; padding:0; box-sizing:border-box; }
a { text-decoration:none; }
ul { list-style:none; }

body { background:#f6f6ef; color:#1d2620; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:15px; line-height:1.55; }
main, .nav, .footer { max-width:1060px; margin:0 auto; padding-left:24px; padding-right:24px; }
.nav { display:flex; justify-content:space-between; align-items:center; padding-top:22px; padding-bottom:22px; border-bottom:2px solid #1d2620; }
.brand { font-size:24px; font-weight:700; letter-spacing:-.5px; }
.brand-dot { color:#1a7f37; }
.nav-links a { color:#1d2620; margin-left:20px; font-size:14px; }
.nav-links a:hover { color:#1a7f37; }
.nav-links a.active { border-bottom:2px solid #1a7f37; }
.account { margin-left:20px; color:#5a6a5e; font-size:13px; }
.btn { display:inline-block; border:2px solid #1d2620; color:#1d2620; padding:6px 14px; font-size:14px; background:transparent; }
a.btn-primary { background:#1a7f37; border-color:#1a7f37; color:#fff; margin-left:20px; }
.hero .btn-primary, .panel-head .btn-primary { margin-left:0; }
.btn-ghost { background:transparent; }
.btn-big { padding:10px 20px; font-size:15px; }
.btn-small { padding:3px 10px; font-size:13px; border-width:1px; }
.hero { padding:56px 0 8px; }
.hero-tag { display:inline-block; border:1px dashed #1a7f37; color:#1a7f37; padding:2px 10px; font-size:13px; margin-bottom:20px; }
.hero h1, .panel-head h1 { font-size:38px; line-height:1.2; letter-spacing:-1px; }
.hero-sub { max-width:620px; margin:18px 0 26px; color:#3c4a40; }
.hero-cta .btn { margin-right:12px; }
.window { margin:36px 0 14px; border:2px solid #1d2620; background:#fff; box-shadow:6px 6px 0 #dfe5da; }
.window-bar { display:flex; align-items:center; gap:7px; border-bottom:2px solid #1d2620; padding:8px 12px; background:#eef1e6; }
.dot { width:11px; height:11px; border:2px solid #1d2620; border-radius:50%; display:inline-block; }
.window-title { margin-left:8px; font-size:12px; color:#5a6a5e; }
.term { padding:18px 20px; font-size:14px; line-height:1.7; overflow-x:auto; }
.prompt { color:#1a7f37; font-weight:700; }
.ok { color:#1a7f37; }
.hero-note { color:#5a6a5e; font-size:13px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:44px 0 8px; }
.feature { border:2px solid #1d2620; background:#fff; padding:20px; }
.feature-mark { color:#1a7f37; font-weight:700; margin-bottom:10px; }
.feature h3 { font-size:16px; margin-bottom:8px; }
.feature p { font-size:13.5px; color:#3c4a40; }
.devices { padding:52px 0 8px; }
.devices-title { font-size:22px; margin-bottom:8px; }
.devices-title::before { content:"$ "; color:#1a7f37; }
.devices-sub { color:#3c4a40; font-size:14px; margin-bottom:26px; }
.device-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px; }
.device { padding:6px 2px; }
.device svg { display:block; margin-bottom:12px; }
.device h3 { font-size:15px; margin-bottom:4px; }
.device-host { color:#1a7f37; font-size:13px; margin-bottom:6px; }
.device p { font-size:13.5px; color:#3c4a40; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-end; padding:40px 0 6px; }
.panel-head h1 { font-size:30px; }
.panel-sub { color:#3c4a40; margin-top:6px; font-size:14px; }
.quota { display:flex; align-items:center; gap:16px; margin:22px 0 4px; border:2px dashed #9db09f; padding:12px 16px; background:#fff; }
.quota-bar { flex:0 0 220px; height:12px; border:2px solid #1d2620; }
.quota-fill { height:100%; background:#1a7f37; }
.quota-note { color:#5a6a5e; font-size:13px; }
table.hosts { width:100%; border-collapse:collapse; font-size:13.5px; }
.hosts th { text-align:left; padding:10px 12px; border-bottom:2px solid #1d2620; background:#eef1e6; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.hosts td { padding:12px; border-bottom:1px solid #dde3d8; vertical-align:middle; }
.host-name { font-weight:700; }
.val { white-space:nowrap; }
.dim { color:#8a978c; }
.pill { border:1.5px solid; padding:1px 9px; font-size:12px; border-radius:20px; }
.pill-live { color:#1a7f37; border-color:#1a7f37; background:#eef6ee; }
.pill-off { color:#8a5a00; border-color:#c08a00; background:#fdf6e0; }
.actions { white-space:nowrap; text-align:right; }
.actions .btn { margin-left:0; }
.panel-note { color:#5a6a5e; font-size:13px; margin-top:6px; }
.footer { display:flex; gap:24px; flex-wrap:wrap; border-top:2px solid #1d2620; margin-top:48px; padding-top:18px; padding-bottom:30px; font-size:13px; color:#5a6a5e; }
.footer a { color:#1d2620; margin-right:14px; }
.mock-note { margin-left:auto; color:#8a978c; }

/* -- legitdns web UI additions (LDNS-025/070): forms, messages,
   detail sections, legal text. Same direction-A system. -- */
.brand img { width:30px; height:30px; vertical-align:-7px; margin-right:9px; }
.brand a { color:#1d2620; }
.nav-form { display:inline; margin-left:20px; }
.nav-form button { background:none; border:none; font:inherit; font-size:14px; color:#1d2620; cursor:pointer; padding:0; }
.nav-form button:hover { color:#1a7f37; }
.form-window { max-width:560px; margin:40px auto 8px; }
.form-body { padding:22px 24px; }
.form-body h1 { font-size:24px; margin-bottom:8px; }
.form-intro { color:#3c4a40; font-size:14px; margin-bottom:18px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:700; margin-bottom:5px; }
.field .hint { font-weight:400; color:#5a6a5e; font-size:12.5px; }
.field-hint { margin:6px 0 0; font-size:12.5px; color:#5a6a5e; }
.field input, .field select, .field textarea { width:100%; font:inherit; font-size:14px; padding:8px 10px; border:2px solid #1d2620; background:#fff; color:#1d2620; }
.field input:focus, .field select:focus { outline:2px solid #1a7f37; outline-offset:1px; }
.field-row { display:flex; gap:16px; }
.field-row .field { flex:1; }
.checkline { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; margin:14px 0; }
.checkline input { margin-top:3px; }
button.btn { font:inherit; cursor:pointer; background:transparent; }
button.btn-primary { background:#1a7f37; border:2px solid #1a7f37; color:#fff; padding:6px 14px; font-size:14px; }
button.btn-danger { border-color:#b03a48; color:#b03a48; }
.btn-danger-link { color:#b03a48; }
.notice { border:2px dashed #1a7f37; background:#eef6ee; padding:12px 16px; margin:20px 0; font-size:14px; }
.error-box { border:2px solid #b03a48; background:#fdf0f0; padding:12px 16px; margin:20px 0; font-size:14px; }
.warn-box { border:2px dashed #c08a00; background:#fdf6e0; padding:12px 16px; margin:20px 0; font-size:14px; }
.token-box { border:2px dashed #1d2620; background:#fff; padding:14px 16px; margin:14px 0; font-size:15px; word-break:break-all; }
.token-box .prompt { margin-right:8px; }
.section-block { border-top:2px solid #1d2620; padding:24px 0 8px; margin-top:28px; }
.section-block h2 { font-size:19px; margin-bottom:6px; }
.section-block h2::before { content:"$ "; color:#1a7f37; }
.section-sub { color:#3c4a40; font-size:13.5px; margin-bottom:14px; max-width:640px; }
.kv { font-size:13.5px; margin-bottom:4px; }
.kv .k { color:#5a6a5e; }
.inline-form { display:inline; }
.pager { display:flex; gap:16px; margin:18px 0; font-size:14px; }
.legal { max-width:760px; padding-top:36px; }
.legal h1 { font-size:26px; margin-bottom:14px; }
.legal h2 { font-size:17px; margin:22px 0 8px; }
.legal h3 { font-size:15px; margin:18px 0 6px; }
.legal p { margin-bottom:10px; font-size:14px; color:#243028; }
.legal ul { list-style:none; margin-bottom:10px; }
.legal li { font-size:14px; padding:2px 0 2px 18px; position:relative; }
.legal li::before { content:"> "; color:#1a7f37; position:absolute; left:0; }
.legal ol { margin-bottom:10px; padding-left:24px; }
.legal ol li { font-size:14px; padding:2px 0; }
.legal ol li::before { content:""; }
.legal code { font-size:13px; background:#eeeede; padding:0 3px; }
.legal pre { font-size:13px; line-height:1.45; background:#1d2620; color:#f6f6ef; padding:12px 14px; overflow-x:auto; margin-bottom:12px; }
.legal pre code { background:none; padding:0; color:inherit; }
.legal table { border-collapse:collapse; margin-bottom:12px; font-size:13.5px; }
.legal th, .legal td { border:1px solid #1d2620; padding:5px 9px; text-align:left; vertical-align:top; }
.hp-field { display:none; }
.rating-field { border:0; padding:0; margin:0 0 16px; }
.rating-field legend { font-size:13px; font-weight:700; margin-bottom:5px; padding:0; }
.rating-field legend .hint { font-weight:400; color:#5a6a5e; font-size:12.5px; }
.rating-option { display:inline-block; margin-right:14px; font-size:14px; }
.rating-option input { width:auto; }
.footer-links a { margin-right:14px; }
.small { font-size:12.5px; color:#5a6a5e; }

/* -- small screens (LDNS-070 fix round 2, Mohammad's phone
   review 2026-11-03): the header is one flex row - brand on
   the left, links on the right - which squeezed, overlapped
   and wrapped badly at phone widths. Under 640px the brand
   takes its own row and the links wrap evenly underneath it:
   no overlap, no horizontal scroll, no hamburger (this site
   ships no menu JS, and stays that way). One stylesheet
   serves the user layout AND the admin layout, so both get
   the same treatment. The hero buttons stack full-width
   instead of crushing side by side, and the 3-column grids
   go single-column. -- */
@media (max-width: 640px) {
  main, .nav, .footer { padding-left:16px; padding-right:16px; }
  .nav { flex-wrap:wrap; padding-top:16px; padding-bottom:14px; }
  .brand { flex:0 0 100%; margin-bottom:12px; }
  .nav-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; }
  .nav-links a { margin-left:0; }
  .nav-links a.btn-primary { margin-left:0; }
  .account { margin-left:0; }
  .nav-form { margin-left:0; }
  .hero-cta .btn { display:block; margin:0 0 12px; text-align:center; }
  .features, .device-grid { grid-template-columns:1fr; }
}

/* -- LDNS-125 admin overhaul (wave B): ONE design system.
   Shared form controls: every text input, select, textarea
   and button on every surface (public, panel, admin) gets
   the same treatment the .field rules gave the panel forms,
   so a bare control in an admin table or filter form looks
   like a panel form control. The .field rules above stay -
   they add width and focus behaviour on top of the same
   values. Checkbox/radio/hidden inputs are excluded by the
   attribute selectors. -- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  font:inherit; font-size:14px; padding:8px 10px;
  border:2px solid #1d2620; background:#fff; color:#1d2620;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
  outline:2px solid #1a7f37; outline-offset:1px;
}
button { font:inherit; font-size:14px; color:#1d2620;
  background:transparent; border:2px solid #1d2620;
  padding:6px 14px; cursor:pointer; }
button:hover { color:#1a7f37; border-color:#1a7f37; }
button.btn-primary:hover { color:#fff; border-color:#1a7f37; }
button.btn-danger:hover { color:#b03a48; border-color:#b03a48; }
.small-gap { margin-top:14px; }
.section-block-first { border-top:none; margin-top:0; padding-top:8px; }
.filter-form { margin:14px 0; }

/* -- data tables (admin lists, inbox, audit, pivot results;
   the panel's .hosts tables share the zebra/hover rules).
   One rule set, applied by class: _table() emits
   class="data zebra"; panel tables carry class="hosts". -- */
table.data { width:100%; border-collapse:collapse; font-size:13.5px; }
.data th { text-align:left; padding:10px 12px; border-bottom:2px solid #1d2620; background:#eef1e6; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.data td { padding:10px 12px; border-bottom:1px solid #dde3d8; vertical-align:top; }
table.zebra tbody tr:nth-child(even), table.hosts tbody tr:nth-child(even) { background:#ecefe2; }
table.zebra tbody tr:hover, table.hosts tbody tr:hover { background:#e0e9d2; }

/* -- admin shell: slim top bar (brand, identity, sign out)
   + left sidebar grouped by purpose, content beside it.
   The sidebar groups are a list in adminweb.py (_NAV_GROUPS);
   adding a group later is a list append plus these rules,
   which are group-agnostic. -- */
.admin-shell { max-width:1060px; margin:0 auto; padding-left:24px; padding-right:24px; display:flex; gap:28px; align-items:flex-start; }
main.admin-main { max-width:none; margin:0; padding-left:0; padding-right:0; flex:1; min-width:0; padding-top:28px; }
.admin-side { flex:0 0 188px; padding-top:36px; }
.side-group { margin-bottom:22px; }
.side-group h2 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#5a6a5e; border-bottom:2px solid #1d2620; padding-bottom:6px; margin-bottom:8px; }
.side-links a { display:block; color:#1d2620; font-size:14px; padding:5px 8px; }
.side-links a:hover { color:#1a7f37; }
.side-links a.active { background:#eef1e6; border-left:3px solid #1a7f37; font-weight:700; }

/* -- narrow screens: the sidebar collapses to a stacked
   block above the content (CSS only - no menu JS, as
   everywhere on this site). -- */
@media (max-width: 760px) {
  .admin-shell { flex-direction:column; gap:0; padding-left:16px; padding-right:16px; }
  .admin-side { flex:none; width:100%; padding-top:20px; }
  .side-links a { display:inline-block; margin:0 6px 6px 0; }
  main.admin-main { width:100%; padding-top:8px; }
}

/* -- LDNS-140 admin density + section rhythm (Mohammad's
   panel feedback, 2026-11-03): on multi-section admin
   pages the sections sat flush against each other (the
   reset leaves bare h2/p/form with no margins at all),
   and the shared form controls felt oversized in a dense
   operator console - search inputs concatenated straight
   into their buttons, stacked action forms touching.
   EVERY rule here is scoped under .admin-main, the admin
   layout's content wrapper, so public pages keep the
   shared rules above byte-for-byte. SECTIONS: an admin h2
   is a section heading (the markup hook every admin page
   already uses) and gets the .section-block treatment -
   a rule above it, clear air around it, the $ marker.
   The first section on a page sits a little closer to
   the page head. The Reference pages render their
   documents inside .legal within .admin-main; the
   counter-rules at the end keep those headings in the
   .legal shape above. FORMS: controls shrink a step
   (13px text, tighter padding; the 2px border stays -
   it is the theme's signature), stacked forms and
   paragraphs gain a bottom gap, and a button directly
   after a visible control or label gains a left gap so
   the search/filter rows no longer touch. -- */
.admin-main h1 { margin-bottom:10px; }
.admin-main h2 { font-size:17px; margin:36px 0 12px; padding-top:22px; border-top:2px solid #1d2620; }
.admin-main h2::before { content:"$ "; color:#1a7f37; }
.admin-main h2:first-of-type { margin-top:26px; }
.admin-main p { margin-bottom:10px; }
.admin-main form { margin-bottom:16px; }
.admin-main .features { padding-top:24px; }
.admin-main input[type="text"], .admin-main input[type="email"],
.admin-main input[type="password"], .admin-main input[type="search"],
.admin-main input[type="number"], .admin-main select,
.admin-main textarea { font-size:13px; padding:5px 8px; }
.admin-main button, .admin-main .btn { font-size:13px; padding:4px 10px; }
.admin-main input:not([type="hidden"]) + button,
.admin-main select + button,
.admin-main label + button { margin-left:8px; }
.admin-main .legal h1 { margin-bottom:14px; }
.admin-main .legal h2 { margin:22px 0 8px; padding-top:0; border-top:none; }
.admin-main .legal h2::before { content:none; }