/* Rack — reference kit (Tastefolio). Cloud servers, VPS and domains as hardware: rack-unit faceplates with ears
   and screws, status LEDs, recessed VFD windows, an orange power button for the one action, mixing-desk faders that
   build a server, a rack elevation, datacenters with ping, domain search with LEDs, a 90-day uptime strip, and a
   control panel of server units with power keys, live graphs, a web console, snapshots, firewall and DNS zones.
   Requires tokens.css; icons are Boxicons (<i class="bx bx-name" aria-hidden="true"></i>); assets/rack.js drives
   faders, ping, domain search, uptime, the console and power states. Dark-first, RTL-first. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand); color: var(--brand-ink); }
.bx { font-size: 1.2em; line-height: 1; flex: none; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; background: var(--brand); color: var(--brand-ink); padding: 10px 16px; border-radius: var(--radius-sm); }
.skip-link:focus { inset-block-start: 12px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ layout & type */
.container { max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.spacer { flex: 1; }
.section { padding-block: var(--space-8); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-block-end: var(--space-6); }
.sec-head > :first-child { display: grid; gap: 10px; max-inline-size: 64ch; }
.display { font: var(--fw-display) var(--fs-display)/var(--lh-tight) var(--font-display); font-stretch: 112%; letter-spacing: var(--tracking-display); text-transform: uppercase; text-wrap: balance; }
:lang(fa) .display { text-transform: none; }
.display .on { color: var(--brand); }
.h1 { font: 700 clamp(28px, 3.2vw, 44px)/1.08 var(--font-display); font-stretch: 108%; text-wrap: balance; }
.h2 { font: 700 var(--fs-xl)/1.2 var(--font-display); }
.h3 { font: 700 var(--fs-lg)/1.3 var(--font-sans); }
:lang(fa) .h1 { font-weight: 900; line-height: 1.5; }
:lang(fa) .h2 { font-weight: 800; line-height: 1.55; }
.lead { font-size: var(--fs-lg); color: var(--ink-2); max-inline-size: 56ch; }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
/* engraved panel label: tiny caps like the print on a faceplate */
.plate { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
:lang(fa) .plate { font: 700 11.5px/1.5 var(--font-sans); letter-spacing: 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--fs-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand); }
.kicker .led { --c: var(--brand); }
:lang(fa) .kicker { font: 700 var(--fs-sm)/1.5 var(--font-sans); letter-spacing: 0; }

/* ------------------------------------------------------------ LEDs, VFD, screws */
.led { --c: var(--led-green); display: inline-block; inline-size: 8px; block-size: 8px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 18%, transparent), 0 0 10px var(--c); }
.led.amber { --c: var(--led-amber); }
.led.red { --c: var(--led-red); }
.led.blue { --c: var(--led-blue); }
.led.off { --c: var(--line-2); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .led.blink { animation: led-blink 1.1s steps(2, jump-none) infinite; }
  .led.pulse { animation: led-pulse 1.8s ease-in-out infinite; }
}
@keyframes led-blink { 50% { opacity: .25; } }
@keyframes led-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--c) 10%, transparent), 0 0 18px var(--c); } }
.vfd { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--vfd-bg); box-shadow: var(--inset); color: var(--vfd); font: 500 var(--fs-md)/1.2 var(--font-mono); letter-spacing: .06em; text-shadow: 0 0 8px color-mix(in oklab, var(--vfd) 70%, transparent); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.vfd small { font-size: .7em; opacity: .7; }
.vfd.big { padding: 12px 16px; font-size: 34px; }
.vfd.fa { direction: rtl; font-family: var(--font-sans); letter-spacing: 0; }
.screw { inline-size: 9px; block-size: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--screw) 60%, #fff), var(--screw) 55%, color-mix(in oklab, var(--screw) 60%, #000)); position: relative; }
.screw::after { content: ""; position: absolute; inset: 4px 1px; background: rgba(0, 0, 0, .45); transform: rotate(var(--sr, 35deg)); border-radius: 1px; }

/* ------------------------------------------------------------ rack unit faceplate */
.unit { --ear: 20px; position: relative; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5) calc(var(--ear) + var(--space-5)); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--brushed), var(--faceplate); box-shadow: var(--shadow-2); min-inline-size: 0; }
.unit::before, .unit::after { content: ""; position: absolute; inset-block: 8px; inline-size: 9px; border-radius: 50%; background: radial-gradient(circle 4.5px at 50% 4.5px, var(--screw) 98%, transparent) top / 9px 9px no-repeat, radial-gradient(circle 4.5px at 50% calc(100% - 4.5px), var(--screw) 98%, transparent) bottom / 9px 9px no-repeat; }
.unit::before { inset-inline-start: 6px; }
.unit::after { inset-inline-end: 6px; }
.unit.flat { padding-inline: var(--space-5); }
@media (max-width: 560px) { .unit { --ear: 14px; padding: var(--space-4) calc(var(--ear) + var(--space-3)); } .unit.flat { padding-inline: var(--space-3); } }
.unit.flat::before, .unit.flat::after { display: none; }
.unit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.u-tag { font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-3); padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 3px; direction: ltr; }

/* ------------------------------------------------------------ buttons & controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: var(--control-h); padding: 0 18px; border: 1px solid color-mix(in oklab, var(--brand) 80%, #000); border-radius: var(--radius-sm); background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, #fff), var(--brand)); color: var(--brand-ink); font: 700 var(--fs-sm)/1 var(--font-sans); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 0 color-mix(in oklab, var(--brand) 55%, #000), 0 8px 20px -10px var(--brand); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1); }
.btn:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 0 color-mix(in oklab, var(--brand) 55%, #000), 0 10px 26px -8px var(--brand); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 color-mix(in oklab, var(--brand) 55%, #000); }
/* key: a neutral hardware key */
.btn-key { border-color: var(--line-2); background: var(--brushed), var(--faceplate); color: var(--ink); box-shadow: var(--shadow-1), 0 2px 0 var(--surface-ink); }
.btn-key:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1), 0 2px 0 var(--surface-ink); }
.btn-key:active { box-shadow: var(--shadow-1); }
.btn-ghost { border-color: transparent; background: none; color: var(--ink-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.btn-ghost:active { transform: none; }
.btn-sm { min-block-size: 36px; padding: 0 12px; }
.btn-lg { min-block-size: var(--control-h-lg); padding: 0 24px; font-size: var(--fs-md); }
.btn-icon { inline-size: var(--control-h); padding: 0; }
.btn-icon.btn-sm { inline-size: 36px; }
.btn-block { inline-size: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn .led { --c: var(--brand-ink); box-shadow: none; }
/* the power button: round, orange ring, the hero action */
.power { display: inline-grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 35%, #34393f, #1b1e22); color: var(--brand); box-shadow: 0 0 0 3px var(--surface-ink), 0 0 0 5px color-mix(in oklab, var(--brand) 70%, transparent), 0 0 24px -2px var(--brand); cursor: pointer; font-size: 30px; }
.power:active { transform: scale(.96); }
.link { color: var(--brand); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

.field { display: grid; gap: 6px; min-inline-size: 0; }
.label { font: 700 var(--fs-sm)/1.4 var(--font-sans); }
.hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field-error { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }
.input, .select, .textarea { inline-size: 100%; min-block-size: var(--control-h); padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-ink); color: var(--ink); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); outline: none; }
[data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] .textarea { background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.textarea { min-block-size: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input::placeholder { color: var(--ink-3); }
.switch { position: relative; inline-size: 42px; block-size: 24px; flex: none; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-ink); cursor: pointer; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.switch::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 18px; block-size: 18px; border-radius: 3px; background: var(--faceplate); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); transition: inset-inline-start var(--dur-2) var(--ease); }
.switch[aria-checked="true"] { background: color-mix(in oklab, var(--led-green) 30%, var(--surface-ink)); border-color: var(--led-green); }
.switch[aria-checked="true"]::after { inset-inline-start: 20px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; }
.keys button { display: inline-flex; align-items: center; gap: 8px; min-block-size: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--brushed), var(--faceplate); color: var(--ink-2); font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-1), 0 2px 0 var(--surface-ink); }
.keys button::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--line-2); }
.keys button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-3); transform: translateY(2px); box-shadow: var(--shadow-1); }
.keys button[aria-pressed="true"]::before { background: var(--led-green); box-shadow: 0 0 8px var(--led-green); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); font: 600 var(--fs-xs)/1.5 var(--font-sans); white-space: nowrap; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }

/* ------------------------------------------------------------ header */
.site-head { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in oklab, var(--canvas) 88%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); }
.site-head .container { display: flex; align-items: center; gap: var(--space-5); min-block-size: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--font-display); font-stretch: 115%; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
:lang(fa) .logo { text-transform: none; letter-spacing: 0; font-weight: 900; }
.logo-mark { display: grid; grid-template-rows: repeat(3, 1fr); gap: 3px; inline-size: 30px; block-size: 30px; padding: 4px; border-radius: 5px; background: var(--surface-3); box-shadow: var(--shadow-1); }
.logo-mark i { border-radius: 2px; background: var(--surface-ink); position: relative; }
.logo-mark i::after { content: ""; position: absolute; inset-block: 2px; inset-inline-end: 3px; inline-size: 3px; border-radius: 50%; background: var(--led-green); box-shadow: 0 0 4px var(--led-green); }
.logo-mark i:nth-child(2)::after { background: var(--brand); box-shadow: 0 0 4px var(--brand); }
.nav { display: flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 600; }
.nav a { padding: 8px 11px; border-radius: var(--radius-sm); color: var(--ink-2); white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.head-end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; padding: 10px var(--gutter) 18px; background: var(--surface); border-block-end: 1px solid var(--line); box-shadow: var(--shadow-3); }
  .nav[data-open] { display: flex; }
  .nav a { padding: 12px; font-size: var(--fs-md); }
}
@media (max-width: 640px) { .hide-sm { display: none !important; } }
@media (max-width: 480px) { .head-end .btn > span, .panel-top .btn > span { display: none; } }
@media (max-width: 900px) { .hide-md { display: none !important; } }

/* ------------------------------------------------------------ hero & rack elevation */
.hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-9); border-block-end: 1px solid var(--line); background: radial-gradient(60% 70% at 85% 30%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%); }
[dir="rtl"] .hero { background: radial-gradient(60% 70% at 15% 30%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%); }
.hero .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); align-items: center; }
.hero-copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero-cta .power + div { display: grid; gap: 2px; }
.specs-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.specs-row > div { display: grid; gap: 4px; }
.rack { --rail: 26px; position: relative; display: grid; gap: 4px; padding: 16px var(--rail); border-radius: var(--radius-md); background: #0b0d0f; box-shadow: var(--shadow-3), inset 0 0 0 1px #24292e; counter-reset: u 13; }
.rack::before, .rack::after { content: ""; position: absolute; inset-block: 10px; inline-size: 14px; background: repeating-linear-gradient(180deg, transparent 0 9px, #30363c 9px 13px, transparent 13px 22px), #15181b; border-radius: 3px; }
.rack::before { inset-inline-start: 6px; }
.rack::after { inset-inline-end: 6px; }
.srv { position: relative; display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding: 0 12px; border-radius: 4px; background: var(--brushed), linear-gradient(180deg, #2a2f35, #1d2125); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 1px 2px #000; color: #c9d0d8; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; direction: ltr; }
.srv.u2 { min-block-size: 84px; }
.srv .bays { flex: 1; align-self: stretch; margin-block: 8px; background: repeating-linear-gradient(90deg, #121518 0 18px, transparent 18px 22px); border-radius: 2px; opacity: .9; }
.srv .name { min-inline-size: 64px; color: #8f98a3; }
.srv.blank { background: repeating-linear-gradient(90deg, #15181b 0 3px, #1a1d21 3px 6px); box-shadow: inset 0 0 0 1px #20252a; }
.rack-caption { position: absolute; inset-block-end: -30px; inset-inline-end: 0; }
@media (max-width: 1000px) { .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } }

/* ------------------------------------------------------------ configurator: faders */
.builder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.mixer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.channel { display: grid; justify-items: center; gap: 10px; padding: 14px 8px; border-radius: var(--radius-md); background: var(--surface-ink); box-shadow: var(--inset); }
.channel .vfd { min-inline-size: 76px; justify-content: center; padding: 5px 8px; font-size: var(--fs-sm); }
.fader-wrap { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; block-size: 200px; }
/* vertical faders: in vertical writing mode inline-size is the height, so the sizes here are physical */
.fader { writing-mode: vertical-lr; direction: rtl; width: 34px; height: 200px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ns-resize; }
.fader::-webkit-slider-runnable-track { width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #050607, #23282d); box-shadow: inset 0 1px 2px #000; }
.fader::-moz-range-track { width: 6px; border-radius: 3px; background: #0a0c0e; }
.fader::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #e8ebee, #9aa3ad 48%, #4a525b 50%, #c4cad1); box-shadow: 0 3px 6px #000; margin-left: -12px; }
.fader::-moz-range-thumb { width: 30px; height: 18px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #e8ebee, #9aa3ad 48%, #4a525b 50%, #c4cad1); }
.fader:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.meter-led { display: grid; grid-template-rows: repeat(12, 1fr); gap: 3px; inline-size: 8px; }
.meter-led i { border-radius: 1px; background: #1e2328; }
.meter-led i.on { background: var(--led-green); box-shadow: 0 0 6px var(--led-green); }
.meter-led i.on.hot { background: var(--led-amber); box-shadow: 0 0 6px var(--led-amber); }
.meter-led i.on.peak { background: var(--led-red); box-shadow: 0 0 6px var(--led-red); }
.channel .plate { text-align: center; }
.order { position: sticky; inset-block-start: 88px; }
.order dl { display: grid; gap: 8px; }
.order dl > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; border-block-end: 1px dashed var(--line-2); font-size: var(--fs-sm); }
.order dd { font-family: var(--font-mono); direction: ltr; }
.price-display { display: grid; gap: 6px; }
.price-display .vfd.big { justify-content: center; }
@media (max-width: 1000px) { .builder { grid-template-columns: minmax(0, 1fr); } .order { position: static; } }
@media (max-width: 560px) { .mixer { gap: 6px; } .channel { padding: 10px 4px; } .channel .vfd { min-inline-size: 0; font-size: 12px; padding: 4px 6px; } .fader-wrap { gap: 4px; } }
.os-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.os-grid button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font: 600 var(--fs-xs)/1.3 var(--font-sans); cursor: pointer; }
.os-grid button .bx { font-size: 24px; }
.os-grid button small { font-family: var(--font-mono); color: var(--ink-3); }
.os-grid button[aria-pressed="true"] { border-color: var(--brand); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand), 0 0 18px -8px var(--brand); }
@media (max-width: 480px) { .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ datacenters, presets, domains, uptime */
.dcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.dc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); text-align: start; cursor: pointer; }
.dc b { display: block; }
.dc .code { font: 600 var(--fs-lg)/1 var(--font-mono); color: var(--ink-3); direction: ltr; }
.dc[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
@media (max-width: 1000px) { .dcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dcs { grid-template-columns: minmax(0, 1fr); } }
.presets { display: grid; gap: var(--space-3); }
.preset { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); }
.preset .specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 var(--fs-sm)/1.4 var(--font-mono); color: var(--ink-2); direction: ltr; justify-content: flex-end; }
[dir="ltr"] .preset .specs { justify-content: flex-start; }
.preset .specs span { white-space: nowrap; }
@media (max-width: 820px) { .preset { grid-template-columns: minmax(0, 1fr) auto; } .preset .u-tag { display: none; } .preset .specs { grid-column: 1 / -1; justify-content: flex-start; direction: ltr; } }
.domain-box { display: grid; gap: var(--space-4); }
.domain-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.domain-form .input { min-block-size: var(--control-h-lg); font: 500 var(--fs-lg)/1 var(--font-mono); direction: ltr; text-align: left; }
.tld-list { display: grid; gap: 6px; }
.tld-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.tld-row .dn { font: 500 var(--fs-md)/1.2 var(--font-mono); direction: ltr; text-align: start; overflow-wrap: anywhere; }
.tld-row[data-state="taken"] .dn { color: var(--ink-3); text-decoration: line-through; }
@media (max-width: 520px) { .tld-row { grid-template-columns: auto minmax(0, 1fr) auto; } .tld-row .vfd { grid-column: 2; justify-self: start; } }
.tld-prices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tld-prices div { display: grid; gap: 4px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.tld-prices b { font: 600 var(--fs-lg)/1 var(--font-mono); direction: ltr; text-align: start; }
@media (max-width: 900px) { .tld-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.uptime { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; block-size: 34px; direction: ltr; }
.uptime i { border-radius: 1px; background: var(--led-green); opacity: .85; }
.uptime i.amber { background: var(--led-amber); }
.uptime i.red { background: var(--led-red); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.feature-grid .unit { gap: var(--space-3); }
.feature-grid .bx { font-size: 28px; color: var(--brand); }
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.faq { display: grid; gap: 8px; max-inline-size: 860px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.faq summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.faq details[open] summary::before { background: var(--led-green); box-shadow: 0 0 8px var(--led-green); }
.faq details p { padding: 0 16px 16px 36px; color: var(--ink-2); }
[dir="rtl"] .faq details p { padding: 0 36px 16px 16px; }
.site-foot { margin-block-start: var(--space-8); padding-block: var(--space-7) var(--space-5); background: var(--surface-ink); border-block-start: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.foot-grid h3 { margin-block-end: 10px; }
.foot-grid ul { display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ dialogs, toast, console */
dialog.modal { inline-size: min(540px, calc(100vw - 24px)); max-block-size: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); overflow: auto; }
dialog.modal::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--line); background: var(--brushed), var(--faceplate); }
.modal-head .h3 { display: flex; align-items: center; gap: 10px; }
.modal-body { display: grid; gap: var(--space-4); padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-block-start: 1px solid var(--line); }
.tf-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface-ink); border: 1px solid var(--line-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-3); }
.tf-toast::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--led-green); box-shadow: 0 0 8px var(--led-green); }
.console { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: var(--radius-md); background: #050607; border: 1px solid var(--line-2); overflow: hidden; direction: ltr; }
.console-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #111417; color: #8f98a3; font: 500 var(--fs-xs)/1.4 var(--font-mono); }
.console-out { block-size: 240px; margin: 0; padding: 12px 14px; overflow-y: auto; color: #b9f5e3; font: 400 13px/1.6 var(--font-mono); white-space: pre-wrap; text-align: left; }
.console-out .p { color: var(--vfd); }
.console-out .dim { color: #5c6670; }
.console-in { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-block-start: 1px solid #1a1e22; color: var(--vfd); font: 400 13px/1 var(--font-mono); }
.console-in input { flex: 1; min-inline-size: 0; border: 0; background: none; outline: none; color: #e7eaee; font: inherit; }

/* ------------------------------------------------------------ control panel */
.panel-app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-block-size: 100vh; }
.panel-top { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-block-size: 62px; padding: 0 var(--gutter); background: color-mix(in oklab, var(--canvas) 90%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; overflow-x: auto; }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-2); font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-2); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--brand); }
.wallet { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .panel-top { flex-wrap: wrap; padding-block: 8px; } .panel-top .tabs { order: 9; inline-size: 100%; } }
.page { display: grid; gap: var(--space-5); padding: var(--space-5) var(--gutter) var(--space-8); max-inline-size: 1400px; margin-inline: auto; inline-size: 100%; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.servers { display: grid; gap: 8px; }
.srv-row { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: 14px; }
.srv-row .host { display: grid; gap: 2px; min-inline-size: 0; }
.srv-row .host b { font: 600 var(--fs-md)/1.3 var(--font-mono); direction: ltr; text-align: start; overflow-wrap: anywhere; }
.srv-row .leds { display: grid; gap: 6px; justify-items: center; }
.srv-row .leds .plate { font-size: 9px; }
.srv-row[aria-current="true"] { border-color: var(--brand); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--brand); }
.srv-row .power-keys { display: flex; gap: 6px; }
.srv-row > .badge, .srv-row > .vfd { justify-self: start; }
@media (max-width: 900px) { .srv-row { grid-template-columns: auto minmax(0, 1fr) auto; } .srv-row .hide-row { display: none; } }
.stat-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.stat-cells > div { display: grid; gap: 6px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-ink); box-shadow: var(--inset); }
.stat-cells .vfd { padding: 0; background: none; box-shadow: none; font-size: 26px; }
@media (max-width: 800px) { .stat-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { padding: 10px 14px; text-align: start; background: var(--surface-2); white-space: nowrap; }
.table th, .table th button { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:lang(fa) .table th, :lang(fa) .table th button { font: 700 var(--fs-xs)/1.4 var(--font-sans); letter-spacing: 0; }
.table th button { all: unset; cursor: pointer; }
.table td { padding: 10px 14px; border-block-start: 1px solid var(--line); vertical-align: middle; }
.table td.mono { direction: ltr; text-align: start; }
.table tr:hover td { background: color-mix(in oklab, var(--surface-2) 50%, transparent); }
.snap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.empty { padding: var(--space-5); text-align: center; color: var(--ink-3); }

/* ------------------------------------------------------------ small phones */
.tabs { min-inline-size: 0; }
@media (max-width: 480px) {
  .srv-row { grid-template-columns: auto minmax(0, 1fr); }
  .srv-row .power-keys { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .logo > span:not(.logo-mark) { display: none; }
  .vfd { font-size: var(--fs-sm); padding: 5px 8px; }
  .vfd.big { font-size: 24px; padding: 10px 12px; }
}