/* BLACKORVEX - design system "Midnight Cobalt"
   Calm and consistent: a midnight ground, a dark navy sidebar, cobalt (#1558c9) for buttons and selected items, and a
   single thin lime (#d4ff24) marker on the active menu item. Nothing flashes, blinks or moves on its own.
   Green, amber and red are kept for status. Dark by default, light optional.
   Type: Chakra Petch for titles and big numbers, Geist for text, Geist Mono for labels, code and the console.
   The fonts are stored in /fonts (open licence, see fonts/LICENSE.txt): nothing is loaded from another site. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/chakra-petch-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/chakra-petch-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* =====================================================================================
   1. Tokens
   ===================================================================================== */
:root {
  --bg: #05070c; --bg-2: #080b12; --panel: #0c111b; --panel-2: #111827; --elev: #1a2333;
  --line: rgba(148, 163, 184, .12); --line-2: rgba(148, 163, 184, .22);
  --text: #f1f5f9; --text-2: #c3cede; --muted: #8a97ad;
  --accent: #7aa5f5; --accent-2: #1558c9; --accent-fill: #1558c9; --accent-ink: #ffffff;
  --accent-glow: rgba(21, 88, 201, .35); --accent-soft: rgba(21, 88, 201, .16);
  --grad: linear-gradient(180deg, #1d63d8 0%, #1558c9 100%);
  --steel: linear-gradient(135deg, #e7eaf0 0%, #b7bdc8 100%);
  --side-bg: #080c15; --mark: #d4ff24;
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa;
  --dot: rgba(148, 163, 184, .05); --glow-a: rgba(21, 88, 201, .08); --glow-b: rgba(21, 88, 201, .04);
  --radius: 10px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --shadow-up: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 30px -14px rgba(0, 0, 0, .75);
  --term-bg: #04060a; --term-fg: #e2e8f0; --term-fs: 12.5px;
  --font: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Chakra Petch", "Geist", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Geist Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --top: 58px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f7fb; --bg-2: #eef2f8; --panel: #ffffff; --panel-2: #f8fafc; --elev: #e9eef6;
  --line: rgba(15, 23, 42, .1); --line-2: rgba(15, 23, 42, .18);
  --text: #0b1220; --text-2: #334155; --muted: #5b6b82;
  --accent: #1558c9; --accent-2: #0f469f; --accent-fill: #1558c9; --accent-ink: #ffffff;
  --accent-glow: rgba(21, 88, 201, .25); --accent-soft: rgba(21, 88, 201, .09);
  --grad: linear-gradient(180deg, #1d63d8 0%, #1558c9 100%);
  --steel: linear-gradient(135deg, #7d8490 0%, #565c66 100%);
  --side-bg: #ffffff; --mark: #1558c9;
  --ok: #0d8a4f; --warn: #a85c00; --bad: #c4213a; --info: #1558c9;
  --dot: rgba(15, 23, 42, .04); --glow-a: rgba(21, 88, 201, .05); --glow-b: rgba(21, 88, 201, .03);
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 20px -14px rgba(15, 23, 42, .25); --shadow-up: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 26px -14px rgba(15, 23, 42, .3);
  color-scheme: light;
}

/* =====================================================================================
   2. Base
   ===================================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss03", "calt"; }
/* backdrop: a fine dot grid that fades out, and two soft lights that drift slowly */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
body::after { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 34% at 78% 22%, var(--glow-a), transparent 70%), radial-gradient(34% 32% at 18% 82%, var(--glow-b), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }

a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
h1 { font: 700 28px/1.15 var(--display); letter-spacing: -.035em; }
h2 { font: 600 17px/1.3 var(--display); letter-spacing: -.02em; }
h3 { font: 600 11px/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
b, strong { font-weight: 650; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(21, 88, 201, .45); }
.muted { color: var(--muted); } .small { font-size: 12px; } .mono { font-family: var(--mono); font-feature-settings: normal; }
.right { margin-left: auto; } .grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.col { display: flex; flex-direction: column; gap: 14px; }
.hidden { display: none !important; }
.icon { flex: none; vertical-align: middle; }
*::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; border: 2px solid transparent; }
kbd { font: 11px var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--elev); border: 1px solid var(--line-2); color: var(--text-2); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: ripple .6s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* =====================================================================================
   3. Shell: sidebar (can shrink to an icon rail), top bar, content
   ===================================================================================== */
.app { --side: 252px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .3s var(--ease-out); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow: hidden auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border-right: 1px solid var(--line); backdrop-filter: blur(14px); z-index: 30; }
.sidebar::-webkit-scrollbar { display: none; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--text); font: 700 17px/1.2 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand small { display: block; margin-top: 2px; font: 500 10px var(--mono); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.logo-wrap { display: inline-flex; flex: none; }
.logo-img { display: block; border-radius: 50%; object-fit: cover; background: transparent; box-shadow: 0 0 0 1px var(--line-2), 0 8px 20px -8px rgba(0, 0, 0, .9); }
.logo { border-radius: 50%; background: var(--steel); display: grid; place-items: center; color: #15171b; font-weight: 800; width: 34px; height: 34px; font-size: 13px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .sec { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); padding: 18px 12px 7px; white-space: nowrap; overflow: hidden; }
.nav a { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex: none; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.nav a.active { font-weight: 600; }
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); background: var(--accent-soft); }
.nav a.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); animation: navOn .4s var(--ease-spring); }
.nav a.active > .icon { color: var(--accent); }
.nav a .nl { overflow: hidden; text-overflow: ellipsis; }
.nav a .ext { margin-left: auto; color: var(--muted); }
@keyframes navOn { from { transform: scaleY(0); } }
/* quick access: your own servers, one click away from anywhere */
.qi { position: relative; width: 24px; height: 24px; margin: 0 -3px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); }
.qi::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--panel); }
.qi.running::after { background: var(--ok); } .qi.starting::after, .qi.stopping::after { background: var(--warn); animation: blink 1s infinite; } .qi.crashed::after { background: var(--bad); }
.nav .qnone { padding: 4px 12px; font-size: 12px; color: var(--muted); }
.me { margin-top: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); display: flex; align-items: center; gap: 6px; flex: none; }
.me .who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 2px; border-radius: 9px; color: var(--text); }
.me .who:hover { text-decoration: none; }
.me .who b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--steel); display: grid; place-items: center; font-weight: 800; color: #15171b; flex: none; font-size: 13px; box-shadow: 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .avatar, :root[data-theme="light"] .logo { color: #fff; }
.avatar.xl { width: 64px; height: 64px; font-size: 24px; }
.main-col { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 10px; padding: 0 26px 0 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 550; min-width: 0; }
.crumbs a { color: var(--muted); white-space: nowrap; } .crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs .cur { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-btn { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 12px; min-width: 250px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); cursor: pointer; transition: border-color .2s, color .2s, box-shadow .25s; }
.search-btn span { flex: 1; text-align: left; }
.search-btn:hover { border-color: var(--accent); color: var(--text-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.content { padding: 26px 26px 64px; width: 100%; max-width: 1420px; margin: 0 auto; }
.scrim { display: none; }
@media (min-width: 901px) {
  body.nav-mini .app { --side: 72px; }
  body.nav-mini .nl, body.nav-mini .ext, body.nav-mini .brand > div, body.nav-mini .me > .btn, body.nav-mini .me .who > div:last-child, body.nav-mini .qnone { display: none; }
  body.nav-mini .brand { justify-content: center; padding: 4px 0 14px; }
  body.nav-mini .nav a { justify-content: center; padding: 0; }
  body.nav-mini .nav .sec { height: 1px; padding: 0; margin: 12px 12px 10px; background: var(--line); color: transparent; }
  body.nav-mini .me { justify-content: center; padding: 4px; background: none; border-color: transparent; }
  body.nav-mini .me .who { flex: none; }
}

/* =====================================================================================
   4. Primitives: page head, cards, buttons, forms, pills, bars, tables
   ===================================================================================== */
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 3px; }
.page-head h2 { font-size: 19px; }
.eyebrow { font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head > .icon { color: var(--accent); }
.card-head.pad { padding: 16px 18px 0; }
.sect { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; scroll-margin-top: calc(var(--top) + 16px); }
.sect h2 { font-size: 18px; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px;
  background: var(--elev); border: 1px solid var(--line-2); color: var(--text); font-weight: 600; letter-spacing: -.005em; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .18s var(--ease-out), border-color .15s, background .2s, box-shadow .25s, filter .2s, color .15s; }
a.btn, .btn:hover { text-decoration: none; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--grad); border-color: transparent; color: var(--accent-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 22px -12px var(--accent-glow); }
.btn.primary:hover { filter: brightness(1.06) saturate(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.btn.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .btn.ok:hover { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: var(--ok); }
.btn.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .btn.warn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: var(--warn); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .btn.danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon-only { width: 36px; padding: 0; } .btn.sm.icon-only { width: 30px; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; filter: none; }
.btn .icon { margin: 0; }
.spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.field { margin-bottom: 14px; } .field > label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field .hint, .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.input, input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; height: 38px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .25s, background .2s; }
textarea { height: auto; padding: 10px 12px; min-height: 90px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-fill); cursor: pointer; }
input.invalid { border-color: var(--bad) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent) !important; animation: shake .35s; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .fields .field { margin: 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--elev); border: 1px solid var(--line-2); border-radius: 99px; transition: .25s var(--ease-out); cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: var(--muted); transition: .28s var(--ease-spring); }
.switch input:checked + span { background: var(--accent-fill); border-color: var(--accent-fill); } .switch input:checked + span::before { transform: translateX(20px); background: #fff; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; }
.seg button { position: relative; overflow: hidden; height: 28px; padding: 0 12px; border-radius: 8px; border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 12.5px; transition: background .22s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--elev); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

/* status pill */
.pill { --c: var(--muted); display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 99px; font: 650 12px/1.5 var(--font); letter-spacing: .01em; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); text-transform: capitalize; white-space: nowrap; transition: color .3s, background .3s, border-color .3s; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pill.running { --c: var(--ok); } .pill.running::before { animation: pulse 1.8s infinite; }
.pill.starting, .pill.stopping { --c: var(--warn); } .pill.starting::before, .pill.stopping::before { animation: blink 1s infinite; }
.pill.crashed, .pill.off, .pill.bad { --c: var(--bad); } .pill.admin { --c: var(--accent); } .pill.info { --c: var(--info); } .pill.ok { --c: var(--ok); } .pill.offline { --c: var(--muted); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes blink { 50% { opacity: .25; } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; font: 12px var(--mono); background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { cursor: pointer; } .copy:hover { border-color: var(--accent); }

/* bars: brushed steel while everything is fine; orange and red only when it matters */
.bar { height: 6px; background: var(--elev); border-radius: 99px; overflow: hidden; }
.bar > i { position: relative; overflow: hidden; display: block; height: 100%; background: var(--steel); border-radius: 99px; transition: width .7s var(--ease-out), background .3s; }
.bar > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: barShine 2.8s ease-in-out infinite; }
.bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); }
@keyframes barShine { 60%, 100% { transform: translateX(100%); } }
.gauge { position: relative; width: 84px; height: 84px; flex: none; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .trk { stroke: var(--elev); } .gauge .val { stroke: url(#gradg); transition: stroke-dashoffset .6s ease; stroke-linecap: round; }
.gauge .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 16px; }

/* stat tile */
.tile { display: flex; gap: 14px; align-items: center; }
.tile .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--accent); flex: none; transition: transform .4s var(--ease-spring), background .25s, border-color .25s; }
.tile .lbl { color: var(--muted); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.tile .num { font: 600 22px/1.25 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile .sub { color: var(--muted); font-size: 12px; }
.card.tile { position: relative; overflow: hidden; padding: 14px 16px; }
.card.tile .grow .bar { margin-top: 8px; }
.card.tile.click { cursor: pointer; }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); margin-bottom: 22px; }
.stats .card.tile { padding: 16px 18px; }
.card.tile.plan .num { margin: 4px 0 8px; }
.card.tile.plan .sub { margin-top: 8px; }

/* skeleton / empty */
.sk { background: linear-gradient(90deg, var(--panel), var(--elev), var(--panel)); background-size: 200% 100%; animation: sh 1.3s infinite; border-radius: var(--radius); }
@keyframes sh { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .ill { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); animation: bob 3.2s ease-in-out infinite; }
.empty h2 { color: var(--text); margin-bottom: 4px; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background .18s, box-shadow .18s; } tbody tr:hover { background: var(--panel-2); }
tr.click { cursor: pointer; } tbody tr.click:hover { box-shadow: inset 3px 0 0 var(--accent-fill); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.searchbox { position: relative; flex: 1; min-width: 200px; max-width: 380px; } .searchbox .icon { position: absolute; left: 12px; top: 10px; color: var(--muted); transition: color .2s, transform .3s var(--ease-spring); } .searchbox input { padding-left: 36px; }
.searchbox:focus-within .icon { color: var(--accent); transform: scale(1.15); }

/* =====================================================================================
   5. Server cards, Servers page, create dialog
   ===================================================================================== */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.scard { position: relative; overflow: hidden; cursor: pointer; padding: 16px 16px 14px 20px; transition: transform .28s var(--ease-out), border-color .2s, box-shadow .28s; }
.scard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--line-2)); transition: width .25s var(--ease-out), background .3s; }
.scard.running { --c: var(--ok); } .scard.starting, .scard.stopping { --c: var(--warn); } .scard.crashed { --c: var(--bad); }
.scard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow-up), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.scard:active { transform: translateY(-1px) scale(.995); }
.scard:hover::before { width: 6px; }
.scard.running::before { animation: stripe 2.6s ease-in-out infinite; }
.scard.starting::before, .scard.stopping::before { animation: blink 1s infinite; }
@keyframes stripe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--ok) 70%, transparent); } }
.scard.pinned { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.scard .top { display: flex; align-items: center; gap: 12px; }
.scard .top > :first-child { transition: transform .35s var(--ease-spring); }
.scard:hover .top > :first-child { transform: scale(1.08) rotate(-4deg); }
.tplico { --t: #8a919c; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); flex: none;
  background: color-mix(in srgb, var(--t) 13%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--t) 32%, var(--line-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.tplico.node { --t: #5fa04e; } .tplico.python { --t: #4b8bbe; } .tplico.java { --t: #f0931c; } .tplico.custom { --t: #2496ed; }
.tlogo { display: block; flex: none; }
.scard .nm { font: 600 16px/1.3 var(--display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard .meta { margin: 14px 0 12px; display: flex; flex-direction: column; gap: 9px; }
.mrow { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; font: 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mrow b { color: var(--text-2); font: 600 12px var(--font); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.scard .foot { display: flex; gap: 6px; align-items: center; }
.marks { display: flex; gap: 6px; margin-top: 12px; min-width: 0; }
.mark { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; border: 1px dashed var(--line-2); background: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; flex: none; max-width: 100%; transition: transform .2s var(--ease-out), border-color .2s, color .2s, background .2s; }
.mark:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.mark.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--text); }
.mark.on .icon { color: var(--accent); }
.mark.note { flex: 0 1 auto; min-width: 0; }
.mark.note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark.note.on { border-color: var(--line-2); background: var(--panel-2); font-weight: 500; }
td .mark { margin-left: 8px; }
/* My servers / Client servers */
.stabs { display: flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; margin-bottom: 16px; width: fit-content; max-width: 100%; overflow-x: auto; }
.stabs button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .22s, color .2s, transform .2s var(--ease-out); }
.stabs button:hover { background: var(--panel-2); color: var(--text); }
.stabs button.on { background: var(--grad); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.stabs .cnt { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, currentColor 16%, transparent); font-size: 12px; text-align: center; }
/* template picker */
.tplgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 16px; }
.tplopt { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; background: var(--bg-2); transition: border-color .2s, box-shadow .25s, transform .22s var(--ease-out), background .2s; }
.tplopt:hover { border-color: var(--accent); transform: translateY(-2px); } .tplopt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--panel-2); }
.tplopt .tplico { margin: 0 auto 8px; } .tplopt b { display: block; font-size: 13px; }
.planbox { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); font-size: 13px; margin-bottom: 14px; }
.planbox.bad { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--text); }
.limnote { font-size: 12px; margin-top: 5px; min-height: 17px; color: var(--muted); transition: color .2s; }
.limnote.ok { color: var(--ok); } .limnote.bad { color: var(--bad); font-weight: 600; } .limnote.warn { color: var(--warn); font-weight: 600; }

/* =====================================================================================
   6. One server: header band (always with power buttons), tab bar, console
   ===================================================================================== */
.shead { --c: var(--line-2); position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px 18px 24px; margin-bottom: 6px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 9%, var(--panel)) 0%, var(--panel) 42%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: background .4s; }
.shead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); transition: background .3s; }
.shead.running { --c: var(--ok); } .shead.starting, .shead.stopping { --c: var(--warn); } .shead.crashed { --c: var(--bad); }
.shead.running::before { animation: stripe 2.6s ease-in-out infinite; } .shead.starting::before, .shead.stopping::before { animation: blink 1s infinite; }
.shead .tplico { width: 50px; height: 50px; border-radius: 14px; }
.shead h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 24px; }
.power { display: flex; gap: 8px; flex-wrap: wrap; }
.power .btn { min-width: 92px; }
.tabs { position: sticky; top: var(--top); z-index: 15; display: flex; gap: 2px; margin: 0 -26px 22px; padding: 0 26px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; flex: none; height: 46px; padding: 0 14px; color: var(--muted); font-weight: 600; white-space: nowrap; border-radius: 10px 10px 0 0; transition: color .2s, background .22s; }
.tabs a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--grad); transform: scaleX(0); transition: transform .32s var(--ease-out); }
.tabs a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.tabs a.active { color: var(--text); } .tabs a.active::after { transform: scaleX(1); } .tabs a.active .icon { color: var(--accent); }
.tabs a .icon { transition: transform .35s var(--ease-spring), color .2s; } .tabs a:hover .icon { transform: scale(1.15) rotate(-5deg); }
.mstrip { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.mstrip .tile .num { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mstrip .tile.addr .num { font: 600 12.5px/1.45 var(--mono); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.mstrip .tile .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1500px) { .mstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.graphs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 16px; }
.gcard { padding: 12px 14px 8px; }
.gcard .gh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.gcard .gh .t { color: var(--muted); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; } .gcard .gh .v { font-weight: 700; font-variant-numeric: tabular-nums; }
canvas.graph { display: block; width: 100%; height: 130px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); } .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* terminal (always dark, in both themes) */
.term { background: var(--term-bg); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; height: clamp(400px, 58vh, 700px); box-shadow: var(--shadow-up); }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .07); color: #a9afb9; flex-wrap: wrap; }
.term-bar .ttl { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; color: #e6e8ec; }
.term-bar .ttl > .icon { color: #7aa5f5; }
.live { display: inline-flex; align-items: center; gap: 6px; font: 650 11px var(--font); letter-spacing: 0; text-transform: none; padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: #a9afb9; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6d7480; }
.live.on { color: #4ade80; } .live.on::before { background: #4ade80; animation: pulse 1.8s infinite; }
.live.wait { color: #fbbf24; } .live.wait::before { background: #fbbf24; animation: blink 1s infinite; }
.term-bar .btn { background: transparent; border-color: transparent; color: #a9afb9; height: 28px; padding: 0 8px; } .term-bar .btn:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.term-bar input { width: 170px; height: 28px; background: rgba(255, 255, 255, .07); border-color: transparent; color: #eef0f3; font-size: 12.5px; }
.term-main { position: relative; flex: 1; min-height: 0; display: flex; }
.term-scroll { flex: 1; min-width: 0; overflow: auto; padding: 12px 14px; position: relative; scroll-behavior: auto; overscroll-behavior: contain; }
.tl { white-space: pre-wrap; word-break: break-word; font: var(--term-fs)/1.5 var(--mono); color: var(--term-fg); min-height: 1.5em; }
.tl.hit { background: rgba(250, 204, 21, .1); } .tl.hidden { display: none; }
.tl mark { background: rgba(250, 204, 21, .35); color: inherit; border-radius: 2px; }
.term-banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; color: #7b828d; padding: 20px; }
.term-banner div { background: rgba(8, 9, 11, .8); padding: 14px 20px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .14); }
.jump { position: absolute; right: 18px; bottom: 14px; z-index: 5; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .8); }
.term-input { display: flex; align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.term-input .prompt { color: #7aa5f5; padding: 0 6px 0 14px; font: 700 14px var(--mono); }
.term-input input { flex: 1; height: 42px; background: transparent; border: 0; border-radius: 0; box-shadow: none !important; color: #eef0f3; font: var(--term-fs) var(--mono); }
.term-input input:disabled { opacity: .5; }
/* ANSI colours */
.a0{color:#1e222a}.a1{color:#ef6b73}.a2{color:#7fd962}.a3{color:#e5c07b}.a4{color:#61afef}.a5{color:#c678dd}.a6{color:#56b6c2}.a7{color:#d5dcec}
.a8{color:#5c6370}.a9{color:#ff7b86}.a10{color:#98f07a}.a11{color:#f5d68a}.a12{color:#7cc4ff}.a13{color:#dd8cf5}.a14{color:#73d7e3}.a15{color:#fff}
.b0{background:#1e222a}.b1{background:#ef6b73}.b2{background:#7fd962}.b3{background:#e5c07b}.b4{background:#61afef}.b5{background:#c678dd}.b6{background:#56b6c2}.b7{background:#d5dcec}
.b8{background:#5c6370}.b9{background:#ff7b86}.b10{background:#98f07a}.b11{background:#f5d68a}.b12{background:#7cc4ff}.b13{background:#dd8cf5}.b14{background:#73d7e3}.b15{background:#fff}
.sb{font-weight:700}.sd{opacity:.65}.si{font-style:italic}.su{text-decoration:underline}

/* files + editor */
.fm-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fm-path { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; font: 12.5px var(--mono); }
.fm-path a { cursor: pointer; padding: 1px 4px; border-radius: 5px; color: var(--text); } .fm-path a:hover { background: var(--elev); text-decoration: none; color: var(--accent); }
.fico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--elev); color: var(--text-2); margin-right: 10px; vertical-align: middle; transition: transform .3s var(--ease-spring); }
.fico.dir { color: var(--accent); background: var(--accent-soft); }
.fname { cursor: pointer; font-weight: 550; transition: color .15s; } .fname:hover { color: var(--accent); } .fname:hover .fico { transform: scale(1.2) rotate(-6deg); }
.fname.plain { cursor: default; } .fname.plain:hover { color: inherit; }
.btn.binfull { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.dropzone { position: relative; } .dropzone.over { outline: 2px dashed var(--accent); outline-offset: 4px; animation: dropPulse 1s ease-in-out infinite; }
@keyframes dropPulse { 50% { outline-offset: 8px; } }
.dropmsg { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); font-weight: 700; border-radius: var(--radius); backdrop-filter: blur(4px); }
.dropzone.over .dropmsg { display: grid; }
.progress { height: 4px; background: var(--elev); border-radius: 99px; overflow: hidden; } .progress i { display: block; height: 100%; width: 0; background: var(--grad); background-size: 200% 100%; transition: width .15s; animation: sh 1.2s linear infinite; }
.editor { display: grid; grid-template-columns: 54px minmax(0, 1fr); background: var(--term-bg); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; height: min(66vh, 640px); }
.gutter { overflow: hidden; text-align: right; padding: 12px 10px 12px 0; color: #565d68; font: 12.5px/1.5 var(--mono); user-select: none; background: rgba(255, 255, 255, .02); border-right: 1px solid rgba(255, 255, 255, .06); white-space: pre; }
.editor textarea { height: 100%; min-height: 0; padding: 12px 14px; background: transparent; border: 0; border-radius: 0; box-shadow: none !important; resize: none; white-space: pre; overflow: auto; font: 12.5px/1.5 var(--mono); color: var(--term-fg); tab-size: 2; }
.statusbar { display: flex; gap: 16px; padding: 6px 4px; color: var(--muted); font-size: 12px; align-items: center; } .statusbar span { white-space: nowrap; }
.dot-unsaved { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block; }

/* other tabs */
.alloc { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .alloc:last-child { border-bottom: 0; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); } .kv:last-child { border-bottom: 0; }
.act { display: flex; gap: 14px; padding: 12px 0; position: relative; } .act + .act { border-top: 1px solid var(--line); }
.aico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); color: var(--c, var(--accent)); }
.envrow { display: flex; gap: 8px; align-items: center; }
.usage { display: flex; align-items: center; gap: 10px; min-width: 120px; } .usage .bar { flex: 1; min-width: 60px; }
.banner { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.banner.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }

/* =====================================================================================
   7. Dashboard (admin): live strip on top, the big graph with the VPS facts beside it
   ===================================================================================== */
.jumpnav { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 18px; }
.jumpnav button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--ease-out), background .2s; }
.jumpnav button:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.jumpnav button .icon { color: var(--accent); }
.plist { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.pitem { position: relative; overflow: hidden; display: flex; flex-direction: row-reverse; gap: 12px; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: background .2s, border-color .2s, transform .25s var(--ease-out), box-shadow .25s; }
.pitem::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--grad); transform: scaleX(0); transition: transform .32s var(--ease-out); }
.pitem:hover { transform: translateY(-3px); border-color: var(--line-2); }
.pitem.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--panel); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }
.pitem.on::before { transform: scaleX(1); }
canvas.pmini { width: 92px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.ptxt { min-width: 0; display: grid; gap: 1px; }
.ptxt .pname { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pitem.on .pname { color: var(--accent); }
.ptxt b { font: 600 20px/1.3 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptxt span { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; margin-bottom: 8px; align-items: start; }
.pmain { min-width: 0; }
.pside { display: grid; gap: 12px; min-width: 0; align-content: start; }
.pside .sidetiles { display: grid; gap: 12px; }
.pside .tile .num { font-size: 18px; }
.ppanel { display: grid; gap: 12px; }
.ptitle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ptitle h2 { font-size: 24px; letter-spacing: -.03em; }
.psub { color: var(--muted); font-size: 13px; }
.ppanel canvas.graph { height: 230px; }
.pcores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pcores canvas.graph { height: 120px; }
.pkv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 22px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pkv > div { display: grid; min-width: 0; }
.pkv span { font-size: 11.5px; color: var(--muted); }
.pkv b { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pkv b.big { font: 600 20px/1.3 var(--display); letter-spacing: -.03em; }
.pkv.flat { padding: 0; border: 0; background: none; }
.pkv.puse { padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0; }
.pmembar { display: flex; height: 26px; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; background: var(--bg-2); margin: 6px 0 10px; }
.pmembar i { display: block; height: 100%; transition: width .7s var(--ease-out); }
.pmembar i.u { background: #b79cff; } .pmembar i.c { background: #5c6470; }
/* location, date and time of the VPS */
.pplace { margin: 0; padding: 14px 16px; }
.pplace .card-head { margin-bottom: 10px; } .pplace .card-head h2 { font-size: 14px; }
.pplace .pkv { grid-template-columns: 1fr; gap: 7px; }
.pplace .pkv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pplace .pkv b { text-align: right; font-size: 12.5px; } .pplace .pkv b.big { font: 600 12.5px var(--mono); color: var(--text); }
.pplace:not(.open) .pkv > div:nth-child(n+7) { display: none; }
.pplace .pmore { margin-top: 8px; width: 100%; justify-content: center; }
/* who is using the VPS */
.shares { --mine: var(--accent-fill); --clients: var(--info); --sys: #7b828d; }
.shgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px 28px; padding: 18px; border-bottom: 1px solid var(--line); }
.shtop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shtop b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; } .shtop b .icon { color: var(--muted); }
.sbar { display: flex; height: 12px; margin: 8px 0; border-radius: 99px; overflow: hidden; background: var(--elev); }
.sbar i { display: block; height: 100%; transition: width .7s var(--ease-out); }
.shares i.mine { background: var(--mine); } .shares i.clients { background: var(--clients); } .shares i.sys { background: var(--sys); } .shares i.free { background: var(--elev); border: 1px solid var(--line-2); }
.shvals { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-2); }
.shv { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shv i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .shv b { color: var(--text); }
.shown { padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.shown.mine { background: color-mix(in srgb, var(--mine) 18%, transparent); } .shown.clients { background: color-mix(in srgb, var(--clients) 18%, transparent); }
tr.shtot td { background: var(--panel-2); font-weight: 600; }
.ptable td.num, .ptable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ptable td.hot { color: var(--bad); font-weight: 700; } .ptable td.warm { color: var(--warn); font-weight: 600; }
.pcmd { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* internet: free data limit beside the speed test */
.pspeed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
.pspeed h2 { font-size: 16px; margin-bottom: 2px; }
.quota { padding-right: 26px; border-right: 1px solid var(--line); min-width: 0; }
.quota .bar { height: 10px; margin-top: 10px; }
.quota .qhead { font: 700 18px var(--display); }
.spbox { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 1101px) {
  /* the graph grows so the left side is exactly as tall as the facts column (no blank space) */
  .perf { align-items: stretch; }
  .pmain { display: flex; flex-direction: column; }
  .ppanel:not(.hidden) { flex: 1; grid-template-rows: auto 1fr; grid-auto-rows: auto; }
  .ppanel > .gcard:not(.hidden), .pcores .gcard { display: flex; flex-direction: column; }
  .ppanel > .gcard canvas.graph { flex: 1 1 230px; height: 0; min-height: 230px; }
  .pcores:not(.hidden) { grid-auto-rows: 1fr; }
  .pcores .gcard canvas.graph { flex: 1 1 120px; height: 0; min-height: 120px; }
}

/* =====================================================================================
   8. Users, account
   ===================================================================================== */
.ulink { border: 0; background: none; padding: 0; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; transition: color .15s; }
.ulink:hover { color: var(--accent); text-decoration: underline; }
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ukv { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; overflow-wrap: anywhere; transition: border-color .2s, transform .25s var(--ease-out); }
.ukv:hover { transform: translateY(-2px); border-color: var(--line-2); }
.ukv b { display: block; font-size: 15px; margin: 2px 0; }
.uhead { margin: 18px 0 8px; font: 600 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.actbars { display: flex; align-items: stretch; gap: 5px; height: 130px; }
.actcol { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.actcol i { display: block; width: 100%; min-height: 2px; border-radius: 5px 5px 0 0; background: var(--grad); transform-origin: bottom; animation: grow .7s var(--ease-out) backwards; }
.actcol span { white-space: nowrap; font-size: 10.5px; }
@keyframes grow { from { transform: scaleY(0); } }
.ulog { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
/* Access tab: permissions by group, a checkbox for the whole group and one for each permission */
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 10px; }
.pg { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); overflow: hidden; transition: border-color .2s; }
.pg:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pg-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.pg-head .icon { color: var(--accent); } .pg-head b { font: 600 14px var(--display); } .pg-head span { margin-left: auto; }
.pg-list { display: grid; padding: 6px; }
.pcheck { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.pcheck:hover { background: var(--panel-2); }
.pcheck input, .pg-head input { flex: none; margin: 2px 0 0; }
.pcheck b { display: block; font-weight: 550; font-size: 13px; line-height: 1.35; }
.pcheck small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.chip.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--text); }
.chip.on .icon { color: var(--accent); }
.profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; padding: 20px; }

/* =====================================================================================
   9. Overlays: dialogs, toasts, command palette, notifications
   ===================================================================================== */
.overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 7, .7); backdrop-filter: blur(7px); animation: fadein .2s ease-out; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: 100%; max-width: 580px; max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); animation: pop .38s var(--ease-spring); }
.modal.wide { max-width: 760px; } .modal h2 { font-size: 19px; margin-bottom: 14px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(10px); } }
#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 120; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; max-width: 380px; padding: 12px 14px; border-radius: 12px; background: var(--elev); border: 1px solid var(--line-2); border-left: 3px solid var(--accent-fill); box-shadow: var(--shadow-up); animation: toastIn .45s var(--ease-spring); }
.toast.ok { border-left-color: var(--ok); } .toast.ok > .icon { color: var(--ok); } .toast.bad { border-left-color: var(--bad); } .toast.bad > .icon { color: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.95); } }
.palette { align-items: start; padding-top: 12vh; }
.palette .box { width: 100%; max-width: 580px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); animation: dropIn .28s var(--ease-out); }
.palette input { height: 52px; border: 0; border-radius: 0; background: transparent; font-size: 15px; box-shadow: none !important; border-bottom: 1px solid var(--line); }
.palette .res { max-height: 340px; overflow: auto; padding: 6px; }
.palette .it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text-2); }
.palette .it.sel, .palette .it:hover { background: var(--accent-soft); color: var(--text); } .palette .it.sel .icon { color: var(--accent); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.btn.bell { position: relative; overflow: visible; }
.bell-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-badge:not(.hidden) { animation: popIn .4s var(--ease-spring); }
.bell:has(.bell-badge:not(.hidden)) > .icon { transform-origin: 50% 10%; animation: ring 3.2s ease-in-out infinite; }
@keyframes ring { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(14deg); } 86% { transform: rotate(-12deg); } 90% { transform: rotate(8deg); } 94% { transform: rotate(-5deg); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
.notif-panel { position: fixed; top: calc(var(--top) - 2px); right: 14px; z-index: 60; width: min(420px, calc(100vw - 20px)); max-height: min(620px, calc(100vh - 80px)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9); overflow: hidden; transform-origin: top right; animation: dropIn .28s var(--ease-out); }
.notif-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.notif-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.notif-list { overflow-y: auto; }
.notif { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); transition: background .2s, transform .2s var(--ease-out); }
.notif:last-child { border-bottom: 0; }
.notif.unread { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-fill); }
.notif.click { cursor: pointer; } .notif.click:hover { background: var(--panel-2); transform: translateX(3px); }
.notif .nico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.notif .nt { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.notif .nb { color: var(--text-2); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.notif .nw { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.notif-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; text-align: center; color: var(--text-2); }
.notif-empty svg { color: var(--muted); }

/* =====================================================================================
   10. Sign-in
   ===================================================================================== */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hero { position: relative; overflow: hidden; padding: 40px 64px; display: flex; flex-direction: column; justify-content: center; gap: 20px; background: var(--panel); border-right: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent); }
.hero > * { position: relative; animation: rise .7s var(--ease-out) backwards; }
.hero > .orb { animation: float 14s ease-in-out infinite; }
.hero > :nth-child(4) { animation-delay: .08s; } .hero > :nth-child(5) { animation-delay: .16s; } .hero > :nth-child(6) { animation-delay: .24s; }
.hero > :nth-child(7) { animation-delay: .32s; } .hero > :nth-child(8) { animation-delay: .4s; } .hero > :nth-child(9) { animation-delay: .48s; }
.hbrand { display: flex; align-items: center; gap: 14px; }
.hbrand b { display: block; font: 700 21px/1.2 var(--display); letter-spacing: -.03em; }
.hbrand small { display: block; margin-top: 3px; font: 500 10.5px var(--mono); color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.hbrand .logo-wrap { border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, #f3f5f8, #5b616b, #f3f5f8, #5b616b, #f3f5f8); animation: sheen 9s linear infinite; }
.hbrand .logo-wrap .logo-img { box-shadow: 0 0 0 3px var(--panel); animation: sheenBack 9s linear infinite; }
@keyframes sheen { to { transform: rotate(360deg); } } @keyframes sheenBack { to { transform: rotate(-360deg); } }
.hpill { display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 5px 13px 5px 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); color: var(--accent); font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hpill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 1.8s infinite; }
.hero h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: .96; letter-spacing: -.055em; font-weight: 700; }
.hero h1 span { display: block; width: fit-content; background: linear-gradient(100deg, #e8ff7a 0%, #d4ff24 35%, #5b9bff 65%, #e8ff7a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shineText 6s linear infinite; padding-bottom: .08em; }
@keyframes shineText { to { background-position: -220% 0; } }
.hero p { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 520px; }
/* the little console that types by itself */
.hterm { max-width: 520px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--term-bg); box-shadow: var(--shadow-up); overflow: hidden; }
.hterm-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .035); }
.hterm-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3f47; } .hterm-bar i:first-child { background: #ff5d5d; } .hterm-bar i:nth-child(2) { background: #ffb224; } .hterm-bar i:nth-child(3) { background: #3ddc91; }
.hterm-bar span { margin-left: 8px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #868d99; }
.hterm-body { height: 170px; padding: 12px 14px; font: 13px/1.6 var(--mono); color: #d9dde4; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hl { display: flex; gap: 10px; white-space: nowrap; } .hl b { width: 10px; flex: none; text-align: center; }
.hl.cmd b { color: #7aa5f5; } .hl.ok { color: #9aa1ac; } .hl.ok b { color: #3ddc91; }
.hl:last-child span::after { content: "▍"; margin-left: 2px; color: #d4ff24; animation: blink 1s steps(1) infinite; }
.hero ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; max-width: 620px; }
.hero li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); transition: border-color .25s, transform .25s var(--ease-out), background .25s; }
.hero li:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); background: color-mix(in srgb, var(--bg) 35%, transparent); }
.hero li .fi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); transition: transform .35s var(--ease-spring); }
.hero li:hover .fi { transform: scale(1.1) rotate(-6deg); }
.hero li b { display: block; font: 650 14px/1.3 var(--display); color: var(--text); }
.hero li div span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.hchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-height: 900px) { .hero { gap: 16px; padding-top: 30px; padding-bottom: 30px; } .hero h1 { font-size: clamp(40px, 4.6vw, 62px); } .hterm-body { height: 124px; } .hero p { font-size: 15.5px; } }
@media (max-height: 800px) { .hterm { display: none; } }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; animation: float 14s ease-in-out infinite; pointer-events: none; }
.orb.a { width: 300px; height: 300px; background: #1558c9; top: -90px; right: -70px; } .orb.b { width: 240px; height: 240px; background: #5b9bff; bottom: -70px; left: 18%; animation-delay: -6s; }
@keyframes float { 50% { transform: translate(30px, 24px) scale(1.08); } }
.formside { display: grid; place-items: center; padding: 32px; }
.formwrap { width: 100%; max-width: 420px; display: grid; gap: 18px; }
.formwrap > .hbrand { display: none; justify-content: center; }
.formcard { position: relative; overflow: hidden; padding: 32px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow-up); }
.formcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.fhead { margin-bottom: 26px; } .fhead h1 { font-size: 30px; } .fhead .muted { margin-top: 5px; }
.formcard input { height: 44px; font-size: 15px; }
.pwwrap { position: relative; } .pwwrap input { padding-right: 44px; }
.pweye { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.pweye:hover { color: var(--text); background: var(--elev); } .pweye.on { color: var(--accent); }
.lbtn { width: 100%; height: 46px; font-size: 15px; border-radius: 12px; }
.lbtn .icon { transition: transform .3s var(--ease-out); } .lbtn:not(:disabled):hover .icon { transform: translateX(4px); }
.lnote { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--muted); text-align: center; }
.err { color: var(--bad); font-size: 13px; min-height: 20px; margin: 4px 0 10px; }

/* =====================================================================================
   11. Motion: entrances, hover and press feedback. Entrances sit on elements that are built once per page
       (never on parts that refresh every few seconds), so nothing flickers.
       The owner wants the animations on every device, so the system "reduce motion" setting is not followed here.
   ===================================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.content > * { animation: rise .5s var(--ease-out) backwards; }
.content > *:nth-child(2) { animation-delay: .05s; } .content > *:nth-child(3) { animation-delay: .1s; } .content > *:nth-child(4) { animation-delay: .15s; }
.content > *:nth-child(5) { animation-delay: .2s; } .content > *:nth-child(6) { animation-delay: .25s; } .content > *:nth-child(n+7) { animation-delay: .3s; }
/* moving between the tabs of one server: the header and the tab bar stay still, only the tab's own content comes in */
.content.stale > *, .content.swap > .shead, .content.swap > .tabs { animation: none; }
.cards > *, .plist > *, .mstrip > *, .stats > * { animation: rise .5s var(--ease-out) backwards; }
.cards > *:nth-child(2), .plist > *:nth-child(2), .mstrip > *:nth-child(2), .stats > *:nth-child(2) { animation-delay: .05s; }
.cards > *:nth-child(3), .plist > *:nth-child(3), .mstrip > *:nth-child(3), .stats > *:nth-child(3) { animation-delay: .1s; }
.cards > *:nth-child(4), .plist > *:nth-child(4), .mstrip > *:nth-child(4), .stats > *:nth-child(4) { animation-delay: .15s; }
.cards > *:nth-child(5), .mstrip > *:nth-child(5), .stats > *:nth-child(5) { animation-delay: .2s; }
.cards > *:nth-child(6), .mstrip > *:nth-child(6) { animation-delay: .25s; } .cards > *:nth-child(7) { animation-delay: .3s; } .cards > *:nth-child(n+8) { animation-delay: .35s; }
.login > * { animation: rise .7s var(--ease-out) backwards; } .login > *:nth-child(2) { animation-delay: .12s; }
/* a soft light follows the pointer across cards that can be pressed */
.scard::after, .card.tile::after, .pitem::after, .tplopt::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-fill) 13%, transparent), transparent 62%); }
.scard:hover::after, .card.tile:hover::after, .pitem:hover::after, .tplopt:hover::after { opacity: 1; }
.card { transition: border-color .25s, box-shadow .3s, transform .28s var(--ease-out); }
.card.tile:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-up); }
.card.tile:hover .ico { transform: scale(1.1) rotate(-6deg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(1px) scale(.97); transition-duration: .06s; }
.btn.primary:not(:disabled):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 28px -10px var(--accent-glow); }
.btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
.btn.primary:not(:disabled):hover::after { animation: sweep .7s var(--ease-out); }
@keyframes sweep { to { left: 130%; } }
.btn .icon { transition: transform .3s var(--ease-spring); }
.btn:not(:disabled):hover .icon { transform: scale(1.15); }
.nav a { transition: background .2s, color .2s, transform .22s var(--ease-out); }
.nav a:hover { transform: translateX(3px); }
.nav a > .icon { transition: transform .35s var(--ease-spring), color .2s; }
.nav a:hover > .icon { transform: scale(1.18); }
body.nav-mini .nav a:hover { transform: none; }
.logo-img, .logo { transition: transform .5s var(--ease-spring), box-shadow .3s; }
.brand:hover .logo-img, .brand:hover .logo { transform: rotate(-8deg) scale(1.08); }
.avatar { transition: transform .35s var(--ease-spring), box-shadow .25s; }
.me .who:hover .avatar { transform: scale(1.08); box-shadow: 0 0 0 3px var(--accent-glow); }
.chip { transition: transform .2s var(--ease-out), border-color .2s, color .2s; } .chip[title]:hover { transform: translateY(-1px); }
input[type=checkbox]:checked { animation: popIn .3s var(--ease-spring); }

/* =====================================================================================
   12. Responsive
   ===================================================================================== */
@media (max-width: 1280px) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .perf { grid-template-columns: 1fr; }
  .pside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pspeed { grid-template-columns: 1fr; gap: 16px; }
  .quota { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-102%); transition: transform .28s var(--ease-out); box-shadow: 0 0 60px rgba(0, 0, 0, .7); }
  body.nav-open .sidebar { transform: none; } body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .6); animation: fadein .2s; }
  .search-btn { min-width: 0; } .search-btn span, .search-btn kbd { display: none; }
  .topbar { padding: 0 12px 0 8px; } .content { padding: 18px 14px 60px; }
  .tabs { margin: 0 -14px 18px; padding: 0 14px; }
  .login { grid-template-columns: 1fr; } .hero { display: none; } .formwrap > .hbrand { display: flex; }
  .ppanel canvas.graph { height: 180px; }
  .shead { padding: 16px 16px 16px 20px; } .power { width: 100%; } .power .btn { flex: 1; min-width: 0; }
  h1 { font-size: 22px; }
}
@media (max-width: 640px) {
  .pside { grid-template-columns: 1fr; }
  .mstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  canvas.pmini { display: none; }
  .ptxt b { font-size: 16px; }
}
.tabs a.active::after { animation: tabIn .35s var(--ease-out); }
@keyframes tabIn { from { transform: scaleX(0); } }

/* =====================================================================================
   13. BLACKORVEX brand layer: "Midnight Cobalt". A calm, premium finish: one dark sidebar, cobalt for action,
       a single lime marker on the active menu item, and no motion that runs on its own.
   ===================================================================================== */
.sidebar { background: var(--side-bg); border-right: 1px solid var(--line); backdrop-filter: none; }
.brand { justify-content: flex-start; border-bottom-color: var(--line); padding: 4px 4px 16px; }
.hbrand .logo-wrap { background: none; padding: 0; border-radius: 0; }
.logo-text { font: 700 22px var(--display); letter-spacing: .04em; color: var(--text); }
.brand-mark { display: block; width: auto; max-width: 100%; }
.sidebar .nav a { color: var(--text-2); font-family: var(--display); font-weight: 600; font-size: 15.5px; }
.sidebar .nav a:hover { background: rgba(148, 163, 184, .07); color: var(--text); }
.sidebar .nav a.active { background: var(--accent-soft); color: var(--text); }
.sidebar .nav a.active::before { background: var(--mark); }
.sidebar .nav a > .icon { color: inherit; }
.sidebar .nav a.active > .icon { color: var(--accent); }
.sidebar .qi::after { box-shadow: 0 0 0 2px var(--side-bg); }
.btn.primary { background: var(--grad); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.btn.primary:not(:disabled):hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); filter: brightness(1.08); }
.bar > i { background: var(--accent-fill); }
.tile .num, .ptxt b { color: var(--text); }
.hero h1 span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); }
.orb { display: none; }
.hl:last-child span::after { content: none; }
.hterm-body { height: auto !important; }
@media (max-width: 900px) { .sidebar { width: 280px; } }

/* Calm: nothing flashes, blinks, shimmers, drifts or lifts on its own. Only quick colour changes on hover remain. */
*, *::before, *::after { animation: none !important; }
.ripple, .btn.primary::after, .bar > i::after { display: none !important; }
.scard::after, .card.tile::after, .pitem::after, .tplopt::after { display: none !important; }
.btn:not(:disabled):hover, .btn:not(:disabled):active, .card.tile:hover, .scard:hover, .nav a:hover, .hero li:hover,
.chip[title]:hover, .mark:hover, .me .who:hover .avatar, .brand:hover .logo-img, .brand:hover .logo { transform: none !important; }
.btn:not(:disabled):hover .icon, .nav a:hover > .icon, .card.tile:hover .ico, .hero li:hover .fi { transform: none !important; }
html { scroll-behavior: auto; }
/* =====================================================================================
   14. BLACKORVEX identity layer. The signature is the "signal square": a small lime square that marks where
       you are (menu, page labels, sign-in). Pill page labels, a segmented tab bar, 14px cards and document-style
       page headers give the panel its own shape. Everything is static: no motion, no glow that changes.
   ===================================================================================== */
:root { --radius: 14px; --radius-sm: 10px; --sq: 6px; }
body { background: radial-gradient(1100px 520px at 100% -8%, rgba(21, 88, 201, .10), transparent 62%) fixed, var(--bg); }
:root[data-theme="light"] body { background: radial-gradient(1100px 520px at 100% -8%, rgba(21, 88, 201, .06), transparent 62%) fixed, var(--bg); }
[hidden] { display: none !important; }

/* page labels: a pill with the signal square */
.eyebrow { display: inline-flex; width: fit-content; padding: 4px 11px 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--text-2); letter-spacing: .12em; margin-bottom: 10px; }
.eyebrow::before { width: var(--sq); height: var(--sq); border-radius: 1px; background: var(--mark); }

/* page headers read like a document title block */
.page-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.page-head h1 { font-size: 30px; letter-spacing: -.03em; }
.sect h2 { font-size: 17px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.sect h2::before { content: ""; width: var(--sq); height: var(--sq); border-radius: 1px; background: var(--accent-2); flex: none; }

/* sidebar groups */
.nav .sec { color: color-mix(in srgb, var(--muted) 85%, transparent); letter-spacing: .18em; padding-top: 22px; }
.sidebar .nav a.active::before { top: 50%; bottom: auto; left: 4px; width: var(--sq); height: var(--sq); border-radius: 1px; transform: translateY(-50%); }
.sidebar .nav a { padding-left: 18px; }
.topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); }

/* cards */
.card { border-radius: var(--radius); }
.card-head h2, .card-head h3, .card-head b { font-family: var(--display); letter-spacing: -.01em; }

/* server tabs become a segmented control */
.tabs { margin: 0 0 22px; padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 94%, transparent); top: calc(var(--top) + 8px); }
.tabs a { height: 36px; padding: 0 13px; border-radius: 8px; font-family: var(--display); font-size: 14px; }
.tabs a::after { content: none; }
.tabs a:hover { background: rgba(148, 163, 184, .07); }
.tabs a.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.tabs a .icon, .tabs a:hover .icon { transform: none !important; }

/* instance header and cards: a thin status rail, cobalt hairline on top */
.shead { border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--accent-2) 40%, transparent); }
.shead::before, .scard::before { width: 3px; }
.scard { border-radius: var(--radius); }
.scard:hover { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); box-shadow: var(--shadow); }
.scard:hover::before { width: 3px; }
.chip { border-radius: 6px; }

/* ---------- sign-in gate ---------- */
.gate { min-height: 100vh; display: flex; flex-direction: column; gap: 8px; padding: 26px clamp(16px, 5vw, 64px) 22px;
  background: radial-gradient(1000px 560px at 88% -12%, rgba(21, 88, 201, .16), transparent 62%), linear-gradient(var(--bg), var(--bg)); }
:root[data-theme="light"] .gate { background: radial-gradient(1000px 560px at 88% -12%, rgba(21, 88, 201, .08), transparent 62%), var(--bg); }
.gate-top, .gate-main, .gate-foot { width: 100%; max-width: 1180px; margin: 0 auto; }
.gate-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gate-logo .brand-mark { height: 44px !important; }
.gate-conn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px var(--mono); color: var(--muted); background: var(--panel); }
.gate-conn .icon { color: var(--warn); } .gate-conn.ok .icon { color: var(--ok); }
.gate-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 430px); gap: clamp(32px, 6vw, 96px); align-items: center; padding: 44px 0; }
.gate-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.gate-eyebrow i { width: var(--sq); height: var(--sq); border-radius: 1px; background: var(--mark); }
.gate-copy h1 { margin: 22px 0 18px; font: 700 clamp(40px, 5.2vw, 70px)/1 var(--display); letter-spacing: -.045em; }
.gate-copy h1 span { display: block; color: var(--accent); }
.gate-lead { max-width: 560px; color: var(--text-2); font-size: 17px; line-height: 1.6; }
.gate-caps4 { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; max-width: 640px; border-top: 1px solid var(--line); }
.gate-caps4 li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.gate-idx { flex: none; font: 600 12px/1.6 var(--mono); color: var(--accent); }
.gate-caps4 b { display: flex; align-items: center; gap: 8px; font: 600 15px/1.4 var(--display); color: var(--text); }
.gate-caps4 b .icon { color: var(--muted); }
.gate-caps4 li span:not(.gate-idx) { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gate-card { position: relative; padding: 30px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-up), inset 0 2px 0 var(--accent-2); }
.gate-card-head { margin-bottom: 22px; }
.gate-kicker { display: flex; align-items: center; gap: 8px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.gate-kicker::before { content: ""; width: var(--sq); height: var(--sq); border-radius: 1px; background: var(--mark); }
.gate-card h2 { margin: 12px 0 6px; font: 700 26px/1.15 var(--display); letter-spacing: -.03em; }
.gate-card-head p { font-size: 14px; line-height: 1.5; }
.gate-form input { height: 46px; font-size: 15px; }
.gate-form .pweye { top: 7px; }
.gate-form .err:empty { min-height: 0; margin: 0 0 14px; }
.gate-caps { display: flex; align-items: center; gap: 7px; margin: -4px 0 8px; font-size: 12.5px; color: var(--warn); }
.gate-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.gate-note .icon { flex: none; margin-top: 2px; color: var(--accent); }
.gate-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.gate-stack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gate-stack > span:first-child { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.gate-mark { font: 500 12px var(--mono); color: var(--muted); }
/* The sign-in page is exactly one screen and never scrolls. Nothing is hidden: every word and element stays on every device.
   When the content is taller than the screen, the whole page is scaled down evenly to fit (fitGate() in app.js). */
body.gate-on, html:has(body.gate-on) { height: 100%; overflow: hidden; overscroll-behavior: none; }
.gate { position: fixed; inset: 0; min-height: 0; display: block; padding: 0; gap: 0; overflow: hidden; }
.gate.typing { overflow-y: auto; } /* only while a phone keyboard covers part of the screen, so the field stays reachable */
.gate-inner { display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 100%; padding: 26px clamp(16px, 5vw, 64px) 22px; transform-origin: 0 0; }
.gate-main { padding: 32px 0; }
.gate-copy { min-width: 0; }
.gate-form .pweye { top: 50%; transform: translateY(-50%); }

/* tablets and phones held sideways keep the two columns, a little tighter */
@media (max-width: 940px) and (orientation: landscape) {
  .gate-main { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 400px); gap: 32px; padding: 20px 0; }
  .gate-copy h1 { font-size: 40px; }
}
/* tablets and phones held upright: one column, the sign-in card first */
@media (max-width: 940px) and (orientation: portrait) {
  .gate-main { grid-template-columns: minmax(0, 1fr); padding: 24px 0; gap: 28px; }
  .gate-card { order: -1; }
  .gate-copy h1 { margin-top: 18px; }
}
@media (max-width: 560px) {
  .gate-inner { padding: 16px 16px 14px; }
  .gate-logo .brand-mark { height: 36px !important; }
  .gate-conn { font-size: 11px; padding: 5px 10px; }
  .gate-main { padding: 16px 0; gap: 22px; }
  .gate-card { padding: 22px 18px; border-radius: 16px; }
  .gate-copy h1 { font-size: 36px; margin: 14px 0 12px; }
  .gate-lead { font-size: 15px; }
  .gate-caps4 { column-gap: 16px; margin-top: 20px; }
  .gate-caps4 li { gap: 8px; padding: 12px 0; }
  .gate-caps4 b { font-size: 14px; }
  .gate-caps4 li span:not(.gate-idx) { font-size: 12px; }
  .page-head h1 { font-size: 24px; }
  .power { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .power .btn { min-width: 0; white-space: nowrap; }
}

/* =====================================================================================
   16. BLACKORVEX motion (approved effects A1-A15, UI refinements U1-U6).
       Levels on <html data-motion>: "full", "subtle" or "off" (Profile & security -> Appearance). The calm base above
       switches every legacy animation off; the rules here switch the approved ones back on, per level.
       Only transform and opacity move. Nothing flashes; the only loops are the slow online dot and loading states.
   ===================================================================================== */
:root { --m-ease: cubic-bezier(.22, 1, .36, 1); --spot: rgba(122, 165, 245, .075); --spot-edge: rgba(122, 165, 245, .5); }
:root[data-theme="light"] { --spot: rgba(21, 88, 201, .05); --spot-edge: rgba(21, 88, 201, .45); }

/* cursor light canvas (A13-A15) sits behind the whole app */
#bvx-light { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }
html[data-motion="off"] #bvx-light { display: none; }
/* the sign-in page lets the light through: its background moves to the page itself */
body.gate-on { background: radial-gradient(1000px 560px at 88% -12%, rgba(21, 88, 201, .16), transparent 62%) fixed, var(--bg); }
:root[data-theme="light"] body.gate-on { background: radial-gradient(1000px 560px at 88% -12%, rgba(21, 88, 201, .08), transparent 62%) fixed, var(--bg); }
.gate, :root[data-theme="light"] .gate { background: transparent; }
.gate-inner { position: relative; z-index: 1; }
/* A10: two soft lights behind the sign-in page */
.gate-aura { position: absolute; z-index: 0; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; will-change: transform; transition: transform 1s var(--m-ease); }
.gate-aura.a { top: -300px; right: -200px; background: radial-gradient(circle, rgba(29, 99, 216, .22), transparent 62%); }
.gate-aura.b { bottom: -340px; left: -240px; background: radial-gradient(circle, rgba(60, 84, 160, .2), transparent 62%); }
:root[data-theme="light"] .gate-aura.a { background: radial-gradient(circle, rgba(21, 88, 201, .1), transparent 62%); }
:root[data-theme="light"] .gate-aura.b { background: radial-gradient(circle, rgba(21, 88, 201, .07), transparent 62%); }

/* U1: depth without glare */
.card, .pitem { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .03); }
:root[data-theme="light"] .card, :root[data-theme="light"] .pitem { box-shadow: var(--shadow); }
/* U4: a clear focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
/* U6: calm empty states */
.empty .ill { border-radius: 16px; background: var(--panel-2); border-color: var(--line-2); color: var(--accent); }

/* A1: cursor spotlight on cards, with the border brightening near the cursor (mouse only) */
html.bvx-fine:not([data-motion="off"]) :is(.card, .pitem):not(.term):hover {
  border-color: transparent;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    radial-gradient(170px circle at var(--mx, 50%) var(--my, 50%), var(--spot-edge), transparent 70%) border-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
}
html.bvx-fine:not([data-motion="off"]) .pitem.on:hover {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%) padding-box,
    linear-gradient(180deg, var(--accent-soft), transparent 70%) padding-box, linear-gradient(var(--panel), var(--panel)) padding-box,
    radial-gradient(170px circle at var(--mx, 50%) var(--my, 50%), var(--spot-edge), transparent 70%) border-box,
    linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 60%, transparent)) border-box;
}

/* A2: instance cards lift (A3 tilt is added by motion.js on top, full motion only) */
html:not([data-motion="off"]) .scard { transition: transform .28s var(--m-ease), box-shadow .28s var(--m-ease), border-color .2s !important; }
html:not([data-motion="off"]) .scard:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .3) !important; }
:root[data-theme="light"]:not([data-motion="off"]) .scard:hover { box-shadow: 0 16px 30px -18px rgba(15, 23, 42, .35) !important; }
html:not([data-motion="off"]) .card.tile.click:hover, html:not([data-motion="off"]) .pitem:hover { box-shadow: var(--shadow-up); }

/* A4 / U2: sliding indicators (motion.js places .bvx-ind) */
.has-ind:not(.tabs) { position: relative; } /* the tab bar keeps its sticky position, which also anchors the indicator */
.sidebar > .nav.has-ind a { z-index: 1; }
.sidebar > .nav.has-ind a.active { background: transparent; }
.sidebar > .nav.has-ind a.active::before { opacity: 0; }
.bvx-ind { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 9px; opacity: 0;
  transition: transform .34s var(--m-ease), width .34s var(--m-ease), height .34s var(--m-ease), opacity .2s; }
html[data-motion="off"] .bvx-ind { transition: none; }
.sidebar > .nav > .bvx-ind { right: 0; background: var(--accent-soft); }
.sidebar > .nav > .bvx-ind::before { content: ""; position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: var(--mark); }
body.nav-mini .sidebar > .nav > .bvx-ind::before { display: none; }
.tabs.has-ind a { position: relative; z-index: 1; }
.tabs.has-ind a.active { background: transparent !important; box-shadow: none !important; }
.tabs > .bvx-ind { border-radius: 7px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.seg.has-ind button { z-index: 1; }
.seg.has-ind button.on { background: transparent; box-shadow: none; }
.seg > .bvx-ind { border-radius: 8px; background: var(--elev); box-shadow: inset 0 0 0 1px var(--line-2); }
.stabs.has-ind button { z-index: 1; }
.stabs.has-ind button.on { background: transparent; box-shadow: none; }
.stabs > .bvx-ind { border-radius: 10px; background: var(--grad); }

/* A5: page content fades up once when a page opens (never on live refreshes) */
@keyframes bvxUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes bvxFade { from { opacity: 0; } }
@keyframes bvxPop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes bvxDrop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes bvxToast { from { opacity: 0; transform: translateY(12px); } }
@keyframes bvxSpin { to { transform: rotate(360deg); } }
@keyframes bvxShimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@keyframes bvxBreathe { 50% { opacity: .45; } }
@keyframes bvxReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html:not([data-motion="off"]) .content > * { animation: bvxUp .42s var(--m-ease) both !important; }
html:not([data-motion="off"]) .content > *:nth-child(2) { animation-delay: .04s !important; }
html:not([data-motion="off"]) .content > *:nth-child(3) { animation-delay: .08s !important; }
html:not([data-motion="off"]) .content > *:nth-child(n+4) { animation-delay: .12s !important; }
html:not([data-motion="off"]) .content.stale > *, html:not([data-motion="off"]) .content.swap > .shead, html:not([data-motion="off"]) .content.swap > .tabs { animation: none !important; }

/* U5: dialogs, menus and toasts settle in */
html:not([data-motion="off"]) .overlay { animation: bvxFade .2s ease-out both !important; }
html:not([data-motion="off"]) .modal { animation: bvxPop .3s var(--m-ease) both !important; }
html:not([data-motion="off"]) .palette .box, html:not([data-motion="off"]) .notif-panel { animation: bvxDrop .22s var(--m-ease) both !important; }
html:not([data-motion="off"]) .toast { animation: bvxToast .32s var(--m-ease) both !important; }
html:not([data-motion="off"]) body.nav-open .scrim { animation: bvxFade .2s ease-out both !important; }
.overlay { backdrop-filter: blur(6px); }
.modal { border-radius: 16px; }
.modal .actions { padding-top: 16px; border-top: 1px solid var(--line); }

/* U3: loading placeholders shimmer softly; a spinner always turns */
html:not([data-motion="off"]) .sk { background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 45%, var(--panel) 90%) !important; background-size: 220% 100% !important; animation: bvxShimmer 1.5s ease-in-out infinite !important; }
.spin { animation: bvxSpin .8s linear infinite !important; }

/* A8: buttons dip when pressed; arrows, refresh and plus icons nudge on hover */
html:not([data-motion="off"]) .btn:not(:disabled):active { transform: scale(.97) !important; transition-duration: .06s !important; }
html:not([data-motion="off"]) .btn .icon { transition: transform .25s var(--m-ease) !important; }
html:not([data-motion="off"]) .btn:not(:disabled):hover .i-chevR { transform: translateX(3px) !important; }
html:not([data-motion="off"]) .btn:not(:disabled):hover .i-refresh { transform: rotate(-45deg) !important; }
html:not([data-motion="off"]) .btn:not(:disabled):hover .i-plus { transform: rotate(90deg) !important; }
html:not([data-motion="off"]) .btn.primary { transition: background .18s, box-shadow .2s, transform .18s var(--m-ease), translate .25s var(--m-ease) !important; }

/* A9: the online dot breathes slowly (full motion only) */
html[data-motion="full"] .pill.running::before { animation: bvxBreathe 3s ease-in-out infinite !important; }

/* A11: graphs draw in from the left the first time a page opens */
html:not([data-motion="off"]) canvas.graph { animation: bvxReveal 1s var(--m-ease) both !important; }
html:not([data-motion="off"]) .content.stale canvas.graph { animation: none !important; }

@media (prefers-reduced-motion: reduce) { html:not([data-motion]) * { transition-duration: 0s !important; } }
/* =====================================================================================
   17. BLACKORVEX logo (Event Horizon): the light-lettered file in the dark theme, the dark-lettered file in the light theme
   ===================================================================================== */
.brand-mark.for-light { display: none; }
:root[data-theme="light"] .brand-mark.for-dark { display: none; }
:root[data-theme="light"] .brand-mark.for-light { display: block; }