/*
 * קודנסט — visual layer reconstructed from the supplied 1672×941 references.
 * The base files provide the component contract; this file owns the final look.
 */

:root {
  --bg: #050b14;
  --bg-2: #07101a;
  --surface: #0b1521;
  --surface-2: #0e1a28;
  --surface-3: #132235;
  --line: #1c2d40;
  --line-2: #2a4058;
  --line-soft: #142235;
  --text: #f2f5fb;
  --text-2: #aeb9cb;
  --muted: #75839a;
  --dim: #59667a;
  --brand: #3f86ff;
  --brand-2: #6658ff;
  --purple: #8b4cff;
  --green: #35d58a;
  --amber: #f2b321;
  --red: #ff575f;
  --teal: #36d7d0;
  --cyan: #28b5ff;
  --grad-primary: linear-gradient(100deg, #246ce7 0%, #465cf2 56%, #7b3dff 100%);
  --grad-mark: linear-gradient(135deg, #26a0ff 0%, #355cf1 48%, #873aff 100%);
  --grad-nav-active: linear-gradient(100deg, rgba(31, 73, 197, .96), rgba(73, 59, 195, .95) 62%, rgba(90, 44, 194, .95));
  --sidebar-w: 258px;
  --topbar-h: 82px;
  --content-max: none;
  --content-pad: 20px;
  --radius: 11px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --fs-md: 13.5px;
  --fs-sm: 13px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 25px;
  --fs-3xl: 29px;
}

:root[data-theme="light"] {
  --bg: #eef3f8;
  --bg-2: #f9fbfd;
  --surface: #ffffff;
  --surface-2: #f2f6fa;
  --surface-3: #e9f0f7;
  --line: #d8e1ec;
  --line-2: #c6d3e2;
  --line-soft: #e4ebf3;
  --text: #0b1422;
  --text-2: #42516a;
  --muted: #68778d;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 54% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 35rem),
    var(--bg);
}

.no-script {
  max-inline-size: 460px;
  margin: 18vh auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.app-shell { background: transparent; }
.shell-main { background: transparent; }
.view-wrap { padding: 11px var(--content-pad) 18px; }
#view { min-inline-size: 0; }

.sidebar {
  padding: 0 15px 15px;
  background:
    radial-gradient(circle at 70% 5%, rgba(48, 111, 225, .055), transparent 23rem),
    linear-gradient(180deg, #07111d 0%, #050c15 100%);
  border-inline-end-color: #203247;
}

.side-brand {
  min-block-size: 104px;
  gap: 12px;
  padding-inline: 3px;
  border-block-end: 1px solid var(--line-soft);
}

.brand-tile {
  inline-size: 50px;
  block-size: 50px;
  border-radius: 15px;
  background: transparent;
  filter: drop-shadow(0 0 12px rgba(70, 89, 255, .32));
}

.brand-tile svg { inline-size: 50px; block-size: 50px; }
.brand-word { font-size: 29px; font-weight: 820; letter-spacing: -.045em; }
.brand-tagline { margin-block-start: 3px; font-size: 11.5px; color: #8190a6; }

.nav { gap: 5px; padding-block-start: 13px; }
.nav-item {
  min-block-size: 50px;
  padding-inline: 14px;
  border-radius: 8px;
  gap: 13px;
  font-size: 15px;
  color: #bdc7d8;
}
.nav-item .icon { inline-size: 22px; block-size: 22px; color: #bdc7d8; }
.nav-item.is-active {
  border: 1px solid rgba(82, 112, 255, .45);
  box-shadow: inset 0 0 22px rgba(63, 89, 255, .22), 0 0 18px rgba(52, 70, 255, .10);
}
.nav-item.is-active::after {
  content: "";
  position: absolute;
  inset-block: 9px;
  inset-inline-end: -1px;
  inline-size: 3px;
  border-radius: 3px;
  background: #7b49ff;
  box-shadow: 0 0 10px #6b4cff;
}

.sidebar-foot { padding-block-start: 13px; }
.server-card {
  gap: 15px;
  min-block-size: 184px;
  padding: 18px 15px;
  border-color: #23374c;
  background: linear-gradient(145deg, rgba(13, 25, 39, .96), rgba(7, 15, 25, .98));
}
.server-head { padding-block-end: 4px; }
.server-title { font-size: 16px; font-weight: 700; }
.conn-indicator { color: var(--green); font-size: 13px; }
.server-rows { gap: 0; }
.server-row {
  min-block-size: 49px;
  border-block-start: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.server-row:first-child { border-block-start: 0; }
.server-key { color: #8c99ad; }
.server-val { color: #e9edf5; font-size: 13px; }

.topbar {
  gap: 10px;
  min-block-size: var(--topbar-h);
  padding-inline: var(--content-pad);
  background: linear-gradient(180deg, rgba(6, 14, 24, .97), rgba(6, 13, 22, .94));
  border-block-end-color: rgba(28, 45, 64, .6);
}

.user-chip { min-inline-size: 166px; padding-inline: 3px 9px; }
.user-chip .avatar-photo {
  inline-size: 45px;
  block-size: 45px;
  border: 2px solid #32445d;
  border-radius: 50%;
  background: linear-gradient(145deg, #d59a68, #64422f);
  display: grid;
  place-items: center;
  font-size: 27px;
  overflow: hidden;
}
.user-chip-name { font-size: 16px; }
.user-chip-role { font-size: 12px; }
.topbar .btn-icon { background: rgba(15, 27, 41, .84); border-color: var(--line-soft); }
.topbar-sep { block-size: 32px; }
.topbar-search { inline-size: 332px; background: rgba(14, 26, 40, .82); }
.topbar .btn-upload {
  min-inline-size: 136px;
  background: var(--grad-primary);
  border-color: rgba(94, 107, 255, .7);
  box-shadow: 0 8px 25px -13px rgba(88, 71, 255, .9);
}

.card,
.stat-card {
  border-color: var(--line);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, #172d47), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .012);
}
.card-head { min-block-size: 54px; padding: 12px 16px; }
.card-title { font-size: 15px; font-weight: 680; }
.card-body { padding: 16px; }
.card-footer { min-block-size: 39px; padding: 9px 16px; }

.page-head { margin-block: 1px 13px; }
.page-title { font-size: 26px; font-weight: 780; letter-spacing: -.025em; }
.page-sub { color: var(--text-2); margin-block-start: 3px; }

.tone-blue { --tone: var(--brand); }
.tone-green { --tone: var(--green); }
.tone-violet, .tone-purple { --tone: var(--purple); }
.tone-indigo { --tone: #526cff; }
.tone-amber { --tone: var(--amber); }
.tone-cyan { --tone: var(--cyan); }
.tone-teal { --tone: var(--teal); }
.tone-red { --tone: var(--red); }

.icon { inline-size: 1.2em; block-size: 1.2em; }
.block { display: block; }
.icon.icon-lg { inline-size: 28px; block-size: 28px; }
.icon.icon-xl { inline-size: 36px; block-size: 36px; }
.icon-label { display: inline-flex; align-items: center; gap: 7px; }
.icon-label .icon { color: var(--tone, var(--brand)); }
.muted-link { color: var(--brand); font-size: 12.5px; font-weight: 620; }

.status-dot[data-tone="ok"] { box-shadow: 0 0 8px rgba(53, 213, 138, .4); }
.pill { block-size: 23px; }
.pill-ok { color: #4ee29a; }
.badge-number {
  display: inline-grid;
  place-items: center;
  min-inline-size: 28px;
  block-size: 23px;
  padding-inline: 7px;
  border-radius: 7px;
  background: rgba(50, 111, 226, .16);
  color: #68a5ff;
  font-size: 12px;
}

.table-wrap { scrollbar-color: var(--line-2) transparent; }
.table { font-size: 12.7px; }
.table thead th { block-size: 42px; color: #c2cada; background: rgba(14, 26, 40, .9); }
.table tbody td { block-size: 52px; }
.table th, .table td { padding-inline: 14px; }
.table tbody tr { border-block-start-color: #18283a; }
.table tbody tr:hover { background: rgba(29, 49, 71, .48); }
.cell-title { font-weight: 700; }
.cell-sub { color: #7c8aa0; }
.code-text { direction: ltr; unicode-bidi: plaintext; font-family: var(--mono); }

.mini-actions { display: inline-flex; align-items: center; gap: 6px; }
.mini-action {
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-2);
  background: #09121e;
}
.mini-action:hover { border-color: var(--line-2); color: #fff; }
.mini-action.danger { color: var(--red); border-color: rgba(255, 87, 95, .26); }
.mini-action.purple { color: var(--purple); }
.mini-action.blue { color: var(--brand); }

.tech-mark {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tone, var(--brand)) 12%, transparent);
  color: var(--tone, var(--brand));
  font-weight: 800;
  font-size: 15px;
  flex: none;
}
.tech-mark.node { --tone: #83c82d; clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); border-radius: 0; }
.tech-mark.python { --tone: #4ba3ff; font-size: 22px; }
.tech-mark.web { --tone: #478eff; font-size: 21px; }
.tech-mark.telegram { --tone: #31a9e9; font-size: 20px; }

.spark-svg { inline-size: 58px; block-size: 26px; overflow: visible; }
.spark-svg .area { fill: color-mix(in srgb, var(--tone, var(--brand)) 13%, transparent); }
.spark-svg .line { fill: none; stroke: var(--tone, var(--brand)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Dashboard */
.dashboard-view { display: flex; flex-direction: column; gap: 11px; }
.dashboard-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dashboard-stats .stat-card { min-block-size: 126px; padding: 19px 16px; }
.dashboard-stats .stat-card-icon {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}
.dashboard-stats .stat-card-icon .icon { inline-size: 28px; block-size: 28px; }
.dashboard-stats .stat-card-value { font-size: 26px; }
.dashboard-stats .stat-card-value.health { color: #59e5a0; font-size: 23px; }
.dashboard-stats .stat-card-foot { color: #a6b0c2; }
.dashboard-projects .card-head { min-block-size: 54px; }
.dashboard-projects .table-wrap { min-block-size: 302px; }
.dashboard-projects .card-footer { min-block-size: 37px; }
.project-cell { display: flex; align-items: center; gap: 11px; min-inline-size: 190px; }
.project-cell-text { display: flex; flex-direction: column; min-inline-size: 0; }
.project-name { color: var(--text); font-size: 14px; font-weight: 700; }
.project-path { color: #76859b; font-size: 11.5px; }
.ram-cell { min-inline-size: 108px; }
.ram-cell .meter { margin-block-start: 6px; }
.runtime-cell { line-height: 1.25; }
.runtime-cell b { display: block; color: var(--text); }
.runtime-cell span { color: #8491a5; }
.project-action { min-inline-size: 64px; }

.dashboard-bottom { display: grid; grid-template-columns: .92fr 1.02fr .9fr; gap: 10px; }
.dashboard-bottom > .card { min-block-size: 267px; }
.activity-list { padding: 8px 16px 6px; }
.activity-row {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
  min-block-size: 48px;
}
.activity-copy { min-inline-size: 0; line-height: 1.32; }
.activity-copy b { display: block; color: var(--text); font-size: 12.5px; }
.activity-copy span { display: block; color: #7d8ba0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-time { color: #8b98aa; font-size: 11px; text-align: end; }
.activity-icon { inline-size: 31px; block-size: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--tone, var(--brand)); }

.health-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 8px 7px; }
.mini-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; text-align: center; border-inline-start: 1px solid var(--line-soft); }
.mini-gauge:first-child { border-inline-start: 0; }
.gauge-ring-custom { position: relative; inline-size: 70px; block-size: 70px; display: grid; place-items: center; }
.gauge-ring-custom svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.gauge-ring-custom circle { fill: none; stroke-width: 5; }
.gauge-ring-custom .track { stroke: #1c2a3b; }
.gauge-ring-custom .value { stroke: var(--tone, var(--brand)); stroke-linecap: round; }
.gauge-ring-custom b { font-size: 15px; }
.mini-gauge .label { color: #d8deea; font-size: 11.5px; }
.mini-gauge small { color: #75839a; font-size: 10px; }
/* The two traffic lines of the network tile: rate on the left of the row, run total in
   bold on the right, so the eye can scan either column on its own. */
.dash-net-line {
  display: flex; align-items: center; gap: 3px;
  inline-size: 100%; justify-content: center;
  font-size: 9.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  direction: ltr;                 /* a rate is a number, not a sentence */
}
.dash-net-line svg { flex: none; opacity: .75; inline-size: 11px; block-size: 11px; }
.dash-net-line b { color: #d8deea; font-weight: 600; }
.dash-net-line b::before { content: '·'; margin-inline: 3px; opacity: .5; font-weight: 400; }
.dash-net-since { opacity: .75; font-size: 9px; line-height: 1.25; }
.health-spark { inline-size: 100%; block-size: 37px; margin-block-start: 2px; }

.domain-list { padding: 8px 15px 4px; }
.domain-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 100px;
  gap: 9px;
  align-items: center;
  min-block-size: 31px;
  border-block-end: 1px solid var(--line-soft);
  font-size: 11.5px;
}
.domain-row:last-child { border: 0; }
.domain-host { direction: ltr; text-align: start; color: #e0e6f0; }
.domain-project { direction: ltr; text-align: start; color: #8996aa; }

/* Shared compact KPI row */
.compact-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.compact-stats .stat-card { min-block-size: 92px; padding: 15px; }
.compact-stats .stat-card-icon { inline-size: 46px; block-size: 46px; border-radius: 50%; }
.compact-stats .stat-card-value { font-size: 24px; }

/* Deploy */
.deploy-view { display: grid; grid-template-columns: minmax(0, 1fr) 398px; gap: 13px; align-items: stretch; }
.deploy-primary { display: flex; flex-direction: column; gap: 9px; min-inline-size: 0; }
.deploy-top-card .card-head { border: 0; align-items: flex-start; padding-block-end: 7px; }
.deploy-top-card .card-title { font-size: 24px; }
.deploy-top-card .card-sub { font-size: 13px; }
.upload-zone {
  margin: 0 22px 11px;
  min-block-size: 198px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed #314862;
  border-radius: 11px;
  background: rgba(9, 18, 29, .35);
  color: var(--text-2);
}
.upload-zone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.upload-zone .upload-icon { color: #5c9cff; }
.upload-zone .upload-title { color: #5597ff; font-size: 18px; font-weight: 650; }
.upload-zone .upload-hint { color: #9aa6b8; }
.upload-zone .btn { margin-block-start: 7px; min-inline-size: 146px; }
.upload-zone input { display: none; }

.deploy-form-card { min-block-size: 552px; }
.deploy-tabs { padding-inline: 20px; }
.deploy-form { display: flex; flex-direction: column; gap: 10px; padding: 13px 22px 9px; }
.field .label { color: #c9d1de; font-size: 12.5px; }
.field .hint { color: #6f7d91; font-size: 10.5px; }
.input, .select, .textarea { background: #0a1420; }
.runtime-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.runtime-option {
  min-block-size: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b1521;
  color: #dce2ec;
  font-size: 12px;
}
.runtime-option.is-selected { border-color: #4d7dff; background: rgba(48, 83, 175, .14); }
.runtime-option .check-corner { display: none; }
.runtime-option.is-selected .check-corner {
  display: grid;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 17px;
  block-size: 17px;
  place-items: center;
  background: #4f72ff;
  color: white;
  border-end-start-radius: 6px;
  font-size: 10px;
}
.runtime-option { position: relative; }
.runtime-option .runtime-glyph { font-size: 18px; }
.deploy-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.port-row { display: grid; grid-template-columns: 84px 1fr 24px 1fr; align-items: end; gap: 10px; }
.port-arrow { block-size: 38px; display: grid; place-items: center; color: #8090a4; }
.fold-row { min-block-size: 37px; display: flex; align-items: center; gap: 8px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 6px; background: #0a1420; }
.fold-row .icon { margin-inline-start: auto; color: #8b98aa; }
.deploy-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.deploy-option { min-block-size: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #0b1521; }
.deploy-option-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #dce2ec; font-size: 12px; }
.deploy-option p { color: #7c899d; font-size: 10.5px; margin-block-start: 4px; }
.deploy-actions { display: flex; align-items: center; gap: 10px; }
.deploy-actions .btn-primary { min-inline-size: 176px; }
.deploy-preview { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.deploy-preview > .card { padding: 20px; }
.deploy-preview-title { margin-block-end: 12px; font-size: 18px; text-align: center; }
.file-card { display: flex; align-items: center; gap: 15px; min-block-size: 89px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #0d1926; }
.zip-file-icon { inline-size: 52px; block-size: 52px; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(135deg, #743bff, #425dff); color: white; font-size: 23px; }
.auto-card { margin-block-start: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #0d1926; }
.auto-title { font-size: 16px; font-weight: 700; margin-block-end: 14px; }
.auto-runtime { display: flex; align-items: center; justify-content: space-between; padding-block: 9px; }
.auto-kv { display: grid; grid-template-columns: 1fr auto; gap: 0; }
.auto-kv > * { padding-block: 12px; border-block-start: 1px solid var(--line-soft); }
.success-callout { min-block-size: 73px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(53, 213, 138, .38); border-radius: 8px; background: rgba(35, 161, 104, .10); color: #4ee29a; text-align: center; }

/* Users */
.users-view { display: flex; flex-direction: column; gap: 10px; }
.users-layout { display: grid; grid-template-columns: 266px minmax(0, 1fr); gap: 11px; align-items: stretch; }
.users-aside { display: flex; flex-direction: column; gap: 10px; }
.users-aside > .card { padding: 0; }
.org-summary { padding: 18px; }
.org-logo { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(124, 64, 255, .18); color: #9a62ff; border: 1px solid rgba(139, 76, 255, .28); }
.org-summary-head { display: flex; align-items: center; gap: 12px; }
.org-summary-head h3 { font-size: 17px; }
.avatar-stack { display: flex; align-items: center; direction: ltr; }
.avatar-stack span { inline-size: 26px; block-size: 26px; display: grid; place-items: center; margin-inline-start: -6px; border: 2px solid var(--surface); border-radius: 50%; background: #26374c; font-size: 13px; }
.summary-line { display: flex; align-items: center; justify-content: space-between; min-block-size: 54px; border-block-start: 1px solid var(--line-soft); }
.summary-line b { font-size: 18px; }
.storage-block { padding: 14px 18px 16px; }
.storage-line { margin-block-start: 14px; }
.storage-line:first-child { margin-block-start: 0; }
.storage-line-head { display: flex; justify-content: space-between; font-size: 11.5px; }
.storage-line .meter { margin-block: 7px 4px; }
.storage-line small { color: #78869a; font-size: 10.5px; }
.plan-card { padding: 16px 18px; }
.plan-head { display: flex; align-items: center; gap: 13px; }
.plan-star { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; }
.users-table-card .card-head { min-block-size: 58px; }
.users-table-card .table-wrap { min-block-size: 409px; }
.users-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.users-toolbar .search-box { margin-inline-start: auto; inline-size: 210px; }
.permission-icons { display: flex; align-items: center; gap: 6px; direction: ltr; }
.permission-icons .icon { inline-size: 16px; block-size: 16px; }
.role-badge { min-inline-size: 70px; justify-content: center; }
.role-owner { color: #a575ff; border-color: rgba(139, 76, 255, .45); background: rgba(139, 76, 255, .10); }
.role-admin { color: #4fa2ff; border-color: rgba(63, 134, 255, .45); background: rgba(63, 134, 255, .09); }
.role-developer { color: #34cfd0; border-color: rgba(54, 215, 208, .42); background: rgba(54, 215, 208, .09); }
.role-viewer { color: #f2b321; border-color: rgba(242, 179, 33, .44); background: rgba(242, 179, 33, .08); }
.users-bottom { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px; }
.users-bottom > .card { min-block-size: 176px; }
.permission-matrix { inline-size: 100%; border-collapse: collapse; font-size: 11.5px; }
.permission-matrix th, .permission-matrix td { padding: 6px 12px; text-align: center; border-block-start: 1px solid var(--line-soft); }
.permission-matrix th:first-child, .permission-matrix td:first-child { text-align: start; }
.ok-check { color: var(--green); font-weight: 800; }
.recent-users { padding: 7px 16px; }
.recent-user-row { min-block-size: 39px; display: grid; grid-template-columns: 90px minmax(0, 1fr) 82px; gap: 9px; align-items: center; border-block-start: 1px solid var(--line-soft); font-size: 11.5px; }
.recent-user-row:first-child { border: 0; }
.recent-user-row .when { color: #79869a; }
.recent-user-row a { color: #4b96ff; }

/* Backups */
.backups-view { display: flex; flex-direction: column; gap: 10px; }
.backups-hero { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 11px; align-items: center; }
.backup-title { padding: 6px 10px; }
.backup-title h1 { display: flex; align-items: center; gap: 12px; font-size: 28px; }
.backup-title h1 .icon { color: var(--cyan); inline-size: 38px; block-size: 38px; }
.backup-title p { margin-block-start: 5px; font-size: 15px; color: #8d9aae; }
.backup-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.backup-metric { min-block-size: 90px; padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface), #09131f); }
.backup-metric .metric-icon { inline-size: 47px; block-size: 47px; display: grid; place-items: center; border-radius: 10px; color: var(--tone); }
.backup-metric b { display: block; font-size: 18px; }
.backup-metric span { color: #8c99ac; font-size: 11.5px; }
.backup-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; align-items: stretch; }
.backup-layout > .card { min-block-size: 289px; }
.restore-card { grid-row: span 1; }
.restore-steps { padding: 14px 16px; }
.restore-step { position: relative; padding-inline-start: 22px; padding-block-end: 18px; }
.restore-step::before { content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 11px; inline-size: 1px; block-size: calc(100% - 2px); background: #243b56; }
.restore-step:last-child::before { display: none; }
.restore-step::after { content: ""; position: absolute; inset-inline-start: 1px; inset-block-start: 6px; inline-size: 10px; block-size: 10px; border: 2px solid #508bff; border-radius: 50%; background: #0a1420; }
.restore-step h4 { font-size: 12px; }
.restore-step p { margin-block-start: 8px; color: #8794a7; font-size: 10.5px; }
.restore-choice { margin-block-start: 8px; min-block-size: 39px; display: flex; align-items: center; padding-inline: 10px; border: 1px solid var(--line); border-radius: 6px; background: #0b1521; font-size: 11px; }
.restore-choice.is-selected { border-color: rgba(53, 213, 138, .55); }
.restore-actions { display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; padding: 0 16px 15px; }
.backup-card-body { padding: 16px; }
.backup-card-body ul { display: flex; flex-direction: column; gap: 13px; color: #a2aec0; font-size: 11.5px; }
.backup-card-body li { display: flex; align-items: center; gap: 8px; }
.backup-card-body li .icon { color: var(--green); }
.backup-card-body .btn-primary { inline-size: 100%; margin-block-start: 34px; }
.schedule-kv { display: grid; grid-template-columns: 1fr auto; gap: 0; margin-block-end: 18px; }
.schedule-kv > * { padding-block: 9px; border-block-start: 1px solid var(--line-soft); font-size: 11.5px; }
.schedule-kv > :nth-child(1), .schedule-kv > :nth-child(2) { border: 0; }
.gofile-form { display: flex; flex-direction: column; gap: 9px; }
.gofile-last { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #0a1420; font-size: 10.5px; }
.backup-history .table-wrap { min-block-size: 250px; }
.backup-history .table tbody td { block-size: 42px; }
.backup-history .table thead th { block-size: 39px; }
.backup-history .card-footer { min-block-size: 37px; }
.backup-coverage .card-body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 10px 16px 13px; }
.coverage-item { min-block-size: 75px; display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #0b1521; }
.coverage-item .icon { inline-size: 34px; block-size: 34px; color: var(--tone, var(--brand)); }
.coverage-item b { display: block; font-size: 12px; }
.coverage-item span { color: #7c899c; font-size: 10px; }

/* Additional routes */
.route-view { display: flex; flex-direction: column; gap: 12px; }
.route-view .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.route-actions { display: flex; align-items: center; gap: 8px; }
.route-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.route-toolbar .search-box { inline-size: min(330px, 100%); }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.project-card { padding: 17px; }
.project-card-head { display: flex; align-items: center; gap: 12px; }
.project-card-head h3 { font-size: 16px; }
.project-card-head .pill { margin-inline-start: auto; }
.project-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block: 18px; }
.project-kv { padding: 10px; border: 1px solid var(--line-soft); border-radius: 7px; background: #09131f; }
.project-kv span { display: block; color: #738197; font-size: 10.5px; }
.project-kv b { display: block; margin-block-start: 3px; font-size: 12px; }
.project-card-actions { display: flex; gap: 7px; }
.project-card-actions .btn { flex: 1; }
.side-help-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.help-card { padding: 18px; }
.help-card h3 { display: flex; align-items: center; gap: 8px; }
.help-card p { margin-block-start: 8px; color: #8290a4; font-size: 12px; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; }
.settings-menu { padding: 9px; }
.settings-menu button { inline-size: 100%; min-block-size: 42px; display: flex; align-items: center; gap: 10px; padding-inline: 12px; border-radius: 7px; color: var(--text-2); text-align: start; }
.settings-menu button.is-active { background: var(--brand-soft); color: #77a9ff; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.setting-row { min-block-size: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-start: 1px solid var(--line-soft); }
.setting-row:first-child { border: 0; }
.setting-copy b { display: block; font-size: 12.5px; }
.setting-copy span { display: block; margin-block-start: 2px; color: #79879b; font-size: 11px; }

.toast-root { position: fixed; inset-block-end: 22px; inset-inline-end: calc(var(--sidebar-w) + 22px); z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.demo-toast { min-inline-size: 270px; padding: 12px 15px; border: 1px solid #29415a; border-radius: 9px; background: #0d1926; color: #eaf0f8; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); animation: toast-in .18s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }

@media (max-width: 1320px) {
  :root { --sidebar-w: 232px; --content-pad: 15px; }
  .brand-word { font-size: 26px; }
  .dashboard-stats { grid-template-columns: repeat(3, 1fr); }
  .dashboard-stats .stat-card { min-block-size: 102px; }
  .dashboard-bottom { grid-template-columns: 1fr 1fr; }
  .dashboard-bottom > :last-child { grid-column: 1 / -1; }
  .deploy-view { grid-template-columns: minmax(0, 1fr) 330px; }
  .backup-layout { grid-template-columns: 280px repeat(3, minmax(0, 1fr)); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  :root { --content-pad: 14px; }
  .view-wrap { padding-block-start: 14px; }
  .topbar { min-block-size: 68px; }
  .show-mobile { display: inline-grid !important; place-items: center; }
  .deploy-view,
  .users-layout,
  .backups-hero,
  .backup-layout,
  .side-help-grid,
  .settings-layout { grid-template-columns: 1fr; }
  .deploy-preview { grid-row: auto; }
  .compact-stats { grid-template-columns: repeat(2, 1fr); }
  .compact-stats > :last-child { grid-column: 1 / -1; }
  .backup-title { order: -1; }
  .backup-metrics { grid-template-columns: repeat(2, 1fr); }
  .backup-coverage .card-body { grid-template-columns: repeat(2, 1fr); }
  .users-bottom { grid-template-columns: 1fr; }
  .dashboard-bottom { grid-template-columns: 1fr; }
  .dashboard-bottom > :last-child { grid-column: auto; }
  .settings-grid { grid-template-columns: 1fr; }
  .toast-root { inset-inline-end: 18px; }
}

@media (max-width: 700px) {
  .user-chip { min-inline-size: 0; }
  .topbar .btn-icon:nth-of-type(3), .topbar-sep { display: none; }
  .dashboard-stats,
  .compact-stats,
  .backup-metrics,
  .projects-grid,
  .settings-grid { grid-template-columns: 1fr; }
  .compact-stats > :last-child { grid-column: auto; }
  .dashboard-stats .stat-card { min-block-size: 92px; }
  .health-body { grid-template-columns: repeat(2, 1fr); }
  .deploy-fields-2,
  .runtime-grid,
  .deploy-options,
  .backup-coverage .card-body { grid-template-columns: 1fr; }
  .port-row { grid-template-columns: 1fr; }
  .port-arrow { display: none; }
  .route-view .page-head { flex-direction: column; }
  .topbar .btn-upload { min-inline-size: 44px; }
  .table-wrap { overflow-x: auto; }
  .table { min-inline-size: 840px; }
  .backup-history .table { min-inline-size: 760px; }
}

/* ---------------------------------------------------------------- logo ---
   Instance logo controls in Settings, and the mark it replaces in the sidebar.
   Sized so a wide wordmark and a square glyph both look deliberate. */
.logo-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.logo-preview {
  display: grid; place-items: center;
  inline-size: 64px; block-size: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  flex: none;
}
.logo-preview-img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; display: block; }
.logo-preview-empty { color: var(--muted); display: grid; place-items: center; }
.brand-logo-img {
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}

/* --------------------------------------------------------- root terminal ---
   A root shell must never be mistaken for the ordinary one. */
.term-root-btn { color: var(--amber); }
.term-root-banner {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 12px;
  border: 1px solid var(--err);
  border-radius: var(--radius-sm);
  background: var(--err-soft);
  color: var(--err);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ------------------------------------------------------------ select menu ---
   The native <select> popup is drawn by the OS and cannot be themed — on macOS it
   opens as a white sheet over this dark UI. The real element is kept (so value and
   change events are unchanged) but visually replaced by this button + .menu list. */
.sm-wrap { position: relative; display: block; inline-size: 100%; }
.sm-native {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.sm-button {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  text-align: start;
  cursor: pointer;
  /* Belt and braces: no inherited caret gradient, whatever the direction rules say. */
  background-image: none !important;
  padding-inline-end: 12px;
}
.sm-button:disabled { opacity: .55; cursor: not-allowed; }
.sm-label { flex: 1; min-inline-size: 0; }
.sm-caret { color: var(--muted); flex: none; transition: transform var(--t); }
.sm-wrap.is-open .sm-caret { transform: rotate(180deg); }
.sm-wrap.is-open .sm-button { border-color: var(--brand); }
.sm-menu {
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: auto;
  min-inline-size: 100%;
  max-block-size: 320px;
  overflow-y: auto;
}