/* Nizhenets Screen — application stylesheet ("Nöbet" design system)
   Load order (index.html): /nz/fonts.css → /nz/tokens.css → /nz/base.css → /nz/components.css → styles.css → transfers.css.
   Everything here uses kit tokens. Elements whose className is rewritten by app.js
   (#connectionIndicator, #footerDot, toasts) are styled through their existing selectors. */

/* ---------- App-level tokens ---------- */
:root {
  /* app.js colours #footerDot with var(--mint) (connected) and var(--danger) (error); keep these aliases. */
  --mint: var(--nz-ok);
  --danger: var(--nz-bad);
  /* The remote screen area stays dark in both themes: the remote desktop is the content.
     noVNC paints its own container #080d13 (app.js), so the shell matches it; the other
     values are the dark-theme tokens, fixed on purpose. */
  --screen-bg: #080d13;
  --screen-surface: #1c2729;
  --screen-raised: #243133;
  --screen-line: #3a4b4d;
  --screen-ink: #e2e8e5;
  --screen-ink-2: #9fb0ad;
  --bar-h: 56px;
}

/* ---------- Base adjustments ---------- */
body { min-width: 320px; }
[hidden] { display: none !important; }
button, a, input, textarea { touch-action: manipulation; }
svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.eyebrow {
  display: block;
  font-size: var(--nz-text-xs); font-weight: 500; letter-spacing: 0.02em;
  color: var(--nz-ink-2);
}

/* Lamp used by the login badge, the illustration and #footerDot (app.js sets className="status-dot"). */
.status-dot {
  display: inline-block; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nz-ok);
}
.status-dot.offline { background: var(--nz-ink-3); }

/* ---------- Brand ---------- */
.brand { gap: 10px; }
.brand img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.brand > span {
  display: flex; flex-direction: column;
  font-family: var(--nz-font-serif); font-size: var(--nz-text-lg); font-weight: 500;
  letter-spacing: 0.03em; line-height: 1.15;
}
.brand-sub {
  margin-top: 1px;
  font-family: var(--nz-font-sans); font-size: var(--nz-text-xs); font-weight: 400;
  letter-spacing: 0.04em; color: var(--nz-ink-2);
}

/* ---------- Buttons (also created by transfers.js: "button button-outline" / "button button-primary") ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control);
  background: var(--nz-surface); color: var(--nz-ink);
  font-size: var(--nz-text-sm); font-weight: 500; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease);
}
.button:hover:not(:disabled) { background: var(--nz-raised); }
.button:active:not(:disabled) { background: var(--nz-line); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button svg { width: 16px; height: 16px; }
.button-primary { background: var(--nz-accent); border-color: var(--nz-accent); color: var(--nz-accent-ink); }
.button-primary:hover:not(:disabled) { background: var(--nz-accent-hover); border-color: var(--nz-accent-hover); }
.button-primary:active:not(:disabled) { background: var(--nz-accent-hover); }
.button-outline { background: transparent; }
.button-small { min-height: 30px; padding: 3px 10px; font-size: var(--nz-text-xs); }
.button-full { width: 100%; }

.icon-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--nz-radius-control);
  background: transparent; color: var(--nz-ink-2);
  transition: background-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease);
}
.icon-button:hover:not(:disabled) { background: var(--nz-raised); color: var(--nz-ink); }
.icon-button:disabled { opacity: 0.55; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button[aria-pressed="true"],
.toolbar-button[aria-pressed="true"],
.toolbar-button[aria-expanded="true"] {
  background: var(--nz-accent-soft); border-color: var(--nz-accent); color: var(--nz-accent);
}

/* ---------- Boot state ---------- */
.boot-state {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: var(--nz-text-sm); color: var(--nz-ink-2);
}
.spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--nz-line); border-top-color: var(--nz-accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Login page ---------- */
.login-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--nz-canvas); }
.login-header { grid-template-columns: auto 1fr; }
.login-header .nz-masthead-tools { justify-self: end; gap: var(--nz-space-3); }
.secure-label {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 2px 10px 2px 9px; border-radius: var(--nz-radius-pill);
  border: 1px solid var(--nz-line); background: var(--nz-surface);
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.6; color: var(--nz-ink-2);
}
.login-main {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
  gap: var(--nz-space-12);
  width: min(var(--nz-content), 100% - 2 * var(--nz-gutter)); margin: 0 auto;
  padding: var(--nz-space-10) 0 var(--nz-space-12);
}
.login-story > .eyebrow { margin-bottom: var(--nz-space-3); }
.login-story h1 { margin: 0 0 var(--nz-space-4); font-size: var(--nz-text-3xl); font-weight: 500; }
.login-story h1 span { font-style: italic; font-weight: 400; color: var(--nz-accent); }
.login-story > p { max-width: 44ch; margin: 0 0 var(--nz-space-8); font-size: var(--nz-text-md); color: var(--nz-ink-2); }

/* Quiet illustration of a desktop: plate, lines and lamps, no perspective or glow. */
.desktop-art {
  position: relative; width: 100%; max-width: 480px;
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface);
}
.art-top {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-bottom: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate) var(--nz-radius-plate) 0 0;
  background: var(--nz-raised);
}
.art-top > span { width: 7px; height: 7px; border-radius: 50%; background: var(--nz-line-strong); }
.art-top > i { margin-left: auto; font-style: normal; font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.art-body { display: flex; height: 224px; }
.art-menu {
  display: flex; flex-direction: column; gap: 18px; width: 44px; padding: 18px 14px;
  border-right: 1px solid var(--nz-line); border-radius: 0 0 0 var(--nz-radius-plate); background: var(--nz-raised);
}
.art-menu b { display: block; width: 16px; height: 12px; border-radius: 3px; background: var(--nz-line); }
.art-menu b:first-child { background: var(--nz-accent); opacity: 0.7; }
.art-content { flex: 1; min-width: 0; padding: 18px 20px; }
.art-line { height: 7px; margin-bottom: 8px; border-radius: 4px; background: var(--nz-line); }
.art-line.long { width: 48%; }
.art-line.short { width: 30%; height: 5px; background: var(--nz-raised); }
.art-cards { display: flex; gap: 10px; margin: 20px 0 14px; }
.art-cards > div {
  flex: 1; height: 60px; padding: 10px;
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-canvas);
}
.art-cards span { display: block; width: 12px; height: 12px; margin-bottom: 8px; border-radius: 50%; background: var(--nz-ok); }
.art-cards > div:nth-child(2) span { background: transparent; border: 2px solid var(--nz-warn); }
.art-cards > div:nth-child(3) span { background: var(--nz-info); }
.art-cards b { display: block; width: 50%; height: 5px; border-radius: 2px; background: var(--nz-line-strong); }
.art-cards i { display: block; width: 72%; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--nz-line); }
.art-terminal {
  padding: 10px 12px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control);
  background: var(--nz-canvas); font-family: var(--nz-font-mono);
}
.art-terminal > span { font-size: var(--nz-text-xs); letter-spacing: 0.04em; color: var(--nz-accent); }
.art-terminal p { margin: 4px 0 0; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.art-terminal i { font-style: normal; color: var(--nz-accent); }
.art-cursor { position: absolute; right: 84px; bottom: 92px; display: flex; align-items: flex-end; color: var(--nz-accent); }
.art-cursor svg { width: 22px; height: 22px; fill: var(--nz-accent); stroke: var(--nz-surface); stroke-width: 1.2; }
.art-cursor span {
  margin-left: -2px; transform: translateY(12px); padding: 2px 7px;
  border-radius: 0 6px 6px 6px; background: var(--nz-accent); color: var(--nz-accent-ink);
  font-size: var(--nz-text-xs); font-weight: 500; line-height: 1.5;
}
.art-badge {
  position: absolute; right: -14px; bottom: -14px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 4px 12px 4px 10px; border-radius: var(--nz-radius-pill);
  border: 1px solid var(--nz-line); background: var(--nz-surface);
  font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2);
}
.art-badge .status-dot { background: var(--nz-lamp-glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nz-lamp-glow) 22%, transparent); }
.login-details {
  display: flex; flex-wrap: wrap; gap: var(--nz-space-3) var(--nz-space-6); margin-top: var(--nz-space-10);
  font-size: var(--nz-text-xs); color: var(--nz-ink-2);
}
.login-details > span { display: inline-flex; align-items: center; gap: 7px; }
.login-details svg { width: 15px; height: 15px; color: var(--nz-ink-2); }

.login-card { width: 100%; max-width: 420px; justify-self: end; padding: var(--nz-space-8); }
.card-mark {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  margin-bottom: var(--nz-space-5); border-radius: var(--nz-radius-control);
  background: var(--nz-accent-soft); color: var(--nz-accent);
}
.card-mark svg { width: 22px; height: 22px; }
.login-card > .eyebrow { margin-bottom: 6px; }
.login-card h2 { margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-2xl); }
.login-card > p:not(.login-footnote):not(.lifecycle-note) { margin: 0 0 var(--nz-space-6); font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.login-card label { display: block; margin-bottom: 6px; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.password-field { position: relative; }
.password-field .nz-input { min-height: 44px; padding-right: 44px; }
.reveal-password {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--nz-radius-control); background: none; color: var(--nz-ink-2);
}
.reveal-password:hover { background: var(--nz-raised); color: var(--nz-accent); }
.reveal-password svg { width: 18px; height: 18px; }
.login-card .nz-captcha { margin-top: var(--nz-space-3); }
.login-duration { margin-top: var(--nz-space-3); }
.login-duration .nz-select { width: 100%; min-height: 44px; }
.login-duration .form-hint { margin: 6px 0 0; font-size: var(--nz-text-xs); line-height: 1.5; color: var(--nz-ink-2); }
.shared-sessions-note { margin-top: var(--nz-space-3); }
.login-button { width: 100%; min-height: 44px; margin-top: var(--nz-space-4); font-size: var(--nz-text-md); }
.login-security {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--nz-space-5);
  font-size: var(--nz-text-xs); color: var(--nz-ink-2);
}
.login-security svg { width: 15px; height: 15px; color: var(--nz-ok); }
.login-card .lifecycle-note { margin: var(--nz-space-4) 0 0; text-align: center; font-size: var(--nz-text-xs); line-height: 1.6; color: var(--nz-ink-2); }
.login-footnote { margin: var(--nz-space-4) 0 0; text-align: center; font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.login-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nz-space-1) var(--nz-space-4);
  margin: 0 var(--nz-gutter); padding: var(--nz-space-5) 0; border-top: 1px solid var(--nz-line);
  font-size: var(--nz-text-xs); color: var(--nz-ink-2);
}
.form-error {
  margin: var(--nz-space-3) 0; padding: 10px 12px;
  border: 1px solid var(--nz-line); border-left: 3px solid var(--nz-bad); border-radius: var(--nz-radius-control);
  background: var(--nz-surface); color: var(--nz-bad);
  font-size: var(--nz-text-sm); line-height: 1.5;
}

/* ---------- Application frame ---------- */
.app { height: var(--app-h, 100dvh); display: flex; flex-direction: column; overflow: hidden; background: var(--nz-canvas); }
.app-header { flex: none; position: relative; z-index: 1; }   /* below the fixed overlays that live in #workspace */
.header-host { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: var(--nz-space-6); border-left: 1px solid var(--nz-line); }
.host-symbol {
  display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  border-radius: var(--nz-radius-control); background: var(--nz-raised); color: var(--nz-ink-2);
}
.host-symbol svg { width: 17px; height: 17px; }
.header-host > div { min-width: 0; }
.header-host strong { display: block; max-width: 260px; font-size: var(--nz-text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-host > div > span { display: block; font-size: var(--nz-text-xs); color: var(--nz-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { gap: var(--nz-space-1); }
.transport-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: var(--nz-space-2);
  padding: 2px 10px; border-radius: var(--nz-radius-pill); border: 1px solid var(--nz-line); background: var(--nz-surface);
  font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2);
}
.transport-badge svg { width: 13px; height: 13px; }

.workspace { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 0 var(--nz-gutter) var(--nz-space-3); background: var(--nz-canvas); }
.workspace:fullscreen { height: 100dvh; max-height: none; padding-top: var(--nz-space-2); background: var(--nz-canvas); }

/* ---------- Control bar ---------- */
.control-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-space-2); min-height: var(--bar-h); padding: var(--nz-space-2) 0; }
.control-bar > .control-group:last-child { flex-shrink: 0; }
.control-group { display: flex; align-items: center; gap: var(--nz-space-1); }
.connection-group { gap: var(--nz-space-2); }
.connection-indicator {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--nz-line-strong); background: transparent;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease);
}
.connection-indicator.connected { background: var(--nz-ok); border-color: var(--nz-ok); }
.connection-indicator.connecting { background: transparent; border-color: var(--nz-warn); animation: status-pulse 1.6s ease-in-out infinite; }
.connection-indicator.disconnected { background: transparent; border-color: var(--nz-line-strong); }
.connection-indicator.error { background: var(--nz-bad); border-color: var(--nz-bad); }
@keyframes status-pulse { 50% { opacity: 0.35; } }
.connection-label { min-width: 64px; font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2); }
.toolbar-separator { flex: none; width: 1px; height: 22px; margin: 0 var(--nz-space-1); background: var(--nz-line); }
.toolbar-spacer { flex: 1; min-width: 0; }
.segmented { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-surface); }
.segmented button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 3px 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--nz-ink-2);
  font-size: var(--nz-text-xs); font-weight: 500;
  transition: background-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease);
}
.segmented button:hover { background: var(--nz-raised); color: var(--nz-ink); }
.segmented button.active { background: var(--nz-accent-soft); color: var(--nz-accent); }
.segmented svg { width: 14px; height: 14px; }
.toolbar-button {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: var(--nz-radius-control); background: transparent; color: var(--nz-ink-2);
  font-size: var(--nz-text-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease);
}
.toolbar-button:hover:not(:disabled) { background: var(--nz-raised); color: var(--nz-ink); }
.toolbar-button svg { width: 18px; height: 18px; }
.settings-button { border-color: var(--nz-line-strong); background: var(--nz-surface); color: var(--nz-ink); }
.notification-dot {
  position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--nz-lamp-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-lamp-glow) 22%, transparent);
}

/* ---------- Keyboard tray ---------- */
.keyboard-tray {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-height: 180px; overflow-y: auto;
  margin: 0 0 var(--nz-space-2); padding: var(--nz-space-2) var(--nz-space-3);
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-surface);
}
.tray-caption { margin-right: var(--nz-space-2); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.key-button {
  min-height: 30px; padding: 3px 10px; white-space: nowrap;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control); background: var(--nz-canvas); color: var(--nz-ink);
  font-size: var(--nz-text-xs); font-weight: 500;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease);
}
.key-button:hover:not(:disabled) { background: var(--nz-raised); }
.key-button:disabled { opacity: 0.5; }
.key-button[aria-pressed="true"] { background: var(--nz-accent-soft); border-color: var(--nz-accent); color: var(--nz-accent); }
.tray-divider { width: 1px; height: 18px; margin: 0 var(--nz-space-1); background: var(--nz-line); }
.soft-keyboard-button { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.soft-keyboard-button svg { width: 15px; height: 15px; }
.tray-close { width: 30px; height: 30px; margin-left: 2px; }
.tray-close svg { width: 16px; height: 16px; }

/* ---------- Remote screen ---------- */
.workspace-body { display: flex; gap: var(--nz-space-3); flex: 1; min-height: 0; position: relative; }
.screen-shell {
  position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate);
  background: var(--screen-bg); color: var(--screen-ink);
}
.remote-screen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.remote-screen canvas, .remote-screen canvas:focus, .remote-screen canvas:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.screen-placeholder {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--nz-space-6); text-align: center; background: var(--screen-bg); color: var(--screen-ink);
}
.placeholder-icon {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--nz-space-5);
  border: 1px solid var(--screen-line); border-radius: var(--nz-radius-plate); background: var(--screen-surface); color: var(--screen-ink-2);
}
.placeholder-icon svg { width: 26px; height: 26px; }
.screen-placeholder h2 { margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-xl); color: var(--screen-ink); }
.screen-placeholder p { max-width: 46ch; margin: 0 0 var(--nz-space-5); font-size: var(--nz-text-sm); line-height: 1.6; color: var(--screen-ink-2); white-space: pre-line; }
.placeholder-host { position: absolute; bottom: var(--nz-space-5); font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); letter-spacing: 0.08em; color: var(--screen-ink-2); }
.screen-hint {
  position: absolute; left: 50%; bottom: var(--nz-space-5); z-index: 2; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 6px 14px; border-radius: var(--nz-radius-pill);
  border: 1px solid var(--screen-line); background: var(--screen-raised); color: var(--screen-ink);
  font-size: var(--nz-text-xs); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* Hidden textarea that receives mobile soft-keyboard input; must stay focusable but invisible. */
.mobile-keyboard {
  position: absolute; left: 20px; bottom: 10px; z-index: -1; width: 2px; height: 2px; opacity: 0.01;
  pointer-events: none; resize: none;
  padding: 0 !important; border: 0 !important; color: transparent !important;
}

/* ---------- Status bar ---------- */
.status-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--nz-space-3);
  min-height: 28px; padding: var(--nz-space-1) 2px 0; font-size: var(--nz-text-xs); color: var(--nz-ink-2);
}
.status-bar > div { display: flex; align-items: center; gap: var(--nz-space-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.footer-divider { flex: none; width: 1px; height: 12px; margin: 0 2px; background: var(--nz-line); }
#resolutionLabel { font-family: var(--nz-font-mono); font-variant-numeric: tabular-nums; }
.footer-brand { margin-left: var(--nz-space-3); font-family: var(--nz-font-serif); font-size: var(--nz-text-xs); letter-spacing: 0.06em; color: var(--nz-ink-2); }

/* ---------- Settings panel ---------- */
.settings-panel {
  width: 300px; min-width: 300px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface);
}
.panel-heading {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--nz-space-3);
  padding: var(--nz-space-5) var(--nz-space-5) var(--nz-space-4); border-bottom: 1px solid var(--nz-line);
}
.panel-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h2 { margin: 0; font-size: var(--nz-text-lg); }
.panel-heading .icon-button { width: 30px; height: 30px; margin: -4px -6px 0 0; }
.panel-heading .icon-button svg { width: 16px; height: 16px; }
.panel-section { padding: var(--nz-space-4) var(--nz-space-5); border-bottom: 1px solid var(--nz-line); }
.panel-section:last-child { border-bottom: 0; }
.panel-section h3 { margin: 0 0 4px; font-family: var(--nz-font-sans); font-size: var(--nz-text-sm); font-weight: 600; }
.panel-section > p:not(.setting-note) { margin: 0 0 var(--nz-space-3); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.profile-options { display: flex; flex-direction: column; gap: 6px; }
.profile-button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-3); width: 100%; min-height: 40px; padding: 7px 12px;
  border: 1px solid var(--nz-line-strong); border-radius: var(--nz-radius-control); background: var(--nz-canvas); color: var(--nz-ink); text-align: left;
  transition: background-color var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), color var(--nz-fast) var(--nz-ease);
}
.profile-button:hover { background: var(--nz-raised); }
.profile-button > span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--nz-text-sm); font-weight: 500; }
.profile-button svg { width: 15px; height: 15px; color: var(--nz-ink-2); }
.profile-button small { font-size: var(--nz-text-xs); color: var(--nz-ink-2); white-space: nowrap; }
.profile-button.active { background: var(--nz-accent-soft); border-color: var(--nz-accent); color: var(--nz-accent); }
.profile-button.active svg, .profile-button.active small { color: var(--nz-accent); }
.range-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nz-space-3); margin-top: var(--nz-space-4); }
.range-heading label { margin: 0; font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink); }
.range-heading output { font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); font-variant-numeric: tabular-nums; }
input[type="range"] {
  display: block; width: 100%; height: 4px; margin: 12px 0 8px;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--nz-radius-pill);
  background: var(--nz-line-strong); accent-color: var(--nz-accent); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--nz-surface); background: var(--nz-accent); box-shadow: 0 0 0 1px var(--nz-line-strong);
}
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--nz-surface); background: var(--nz-accent); }
input[type="range"]:focus-visible { box-shadow: var(--nz-focus); }
.range-captions { display: flex; justify-content: space-between; font-size: var(--nz-text-xs); color: var(--nz-ink-2); }
.setting-note { margin: var(--nz-space-3) 0 0; font-size: var(--nz-text-xs); line-height: 1.55; color: var(--nz-ink-2); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-3); margin: var(--nz-space-3) 0; cursor: pointer; }
.switch-row > span:first-child { min-width: 0; }
.switch-row strong { display: block; font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink); }
.switch-row small { display: block; margin-top: 2px; font-size: var(--nz-text-xs); line-height: 1.5; color: var(--nz-ink-2); }
.switch { position: relative; display: block; flex: none; width: 38px; height: 22px; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch > span { display: block; width: 38px; height: 22px; border-radius: var(--nz-radius-pill); background: var(--nz-line-strong); transition: background-color var(--nz-fast) var(--nz-ease); }
.switch > span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--nz-surface); transition: transform var(--nz-fast) var(--nz-ease);
}
.switch input:checked + span { background: var(--nz-accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: var(--nz-focus); }
.panel-section .button-full { margin-top: var(--nz-space-2); }
.panel-section .button-full svg { width: 15px; height: 15px; }
.connection-details dl { display: grid; gap: 8px; margin: var(--nz-space-3) 0 0; }
.connection-details dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nz-space-3); font-size: var(--nz-text-xs); }
.connection-details dt { color: var(--nz-ink-2); }
.connection-details dd { margin: 0; text-align: right; color: var(--nz-ink); font-variant-numeric: tabular-nums; }
.connection-details .button-full { margin-top: var(--nz-space-3); }
.tcp-note {
  display: flex; align-items: center; gap: var(--nz-space-3); margin-top: var(--nz-space-4); padding-top: var(--nz-space-4);
  border-top: 1px solid var(--nz-line); font-size: var(--nz-text-xs); color: var(--nz-ink-2);
}
.tcp-note svg { width: 18px; height: 18px; color: var(--nz-ink-2); }
.tcp-note small { display: block; margin-top: 2px; font-family: var(--nz-font-mono); font-size: var(--nz-text-xs); color: var(--nz-ink-2); }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: var(--nz-space-6); overflow: auto;
  background: color-mix(in srgb, var(--nz-canvas) 70%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal {
  width: 100%; max-width: 560px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: var(--nz-space-6);
  border: 1px solid var(--nz-line); border-radius: var(--nz-radius-plate); background: var(--nz-surface); color: var(--nz-ink);
  box-shadow: var(--nz-shadow-float);
}
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--nz-space-4); }
.modal-heading .eyebrow { margin-bottom: 4px; }
.modal-heading h2 { margin: 0; font-size: var(--nz-text-xl); }
.modal-close { margin: -6px -8px 0 0; }
.modal-description { margin: var(--nz-space-4) 0 var(--nz-space-5); font-size: var(--nz-text-sm); line-height: 1.6; color: var(--nz-ink-2); }
.modal label { display: block; margin: 0 0 6px; font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-ink-2); }
.modal input + label, .modal .form-error + label { margin-top: var(--nz-space-4); }
.modal .nz-textarea { min-height: 130px; }
.clipboard-read-link {
  display: inline-block; margin-top: 6px; padding: 6px 0; border: 0; background: none; text-align: left;
  font-size: var(--nz-text-xs); font-weight: 500; color: var(--nz-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--nz-accent) 45%, transparent);
}
.clipboard-read-link:hover { text-decoration-color: currentColor; }
.clipboard-actions { display: flex; justify-content: space-between; gap: var(--nz-space-2); margin-top: var(--nz-space-3); }
.clipboard-actions svg { width: 15px; height: 15px; }
.remote-clipboard { display: block; margin-top: var(--nz-space-5); padding-top: var(--nz-space-5); border-top: 1px solid var(--nz-line); }
.remote-clipboard-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-4); }
.remote-clipboard strong { font-size: var(--nz-text-sm); font-weight: 600; }
.remote-clipboard p { margin: 4px 0 0; font-size: var(--nz-text-xs); line-height: 1.5; color: var(--nz-ink-2); }
.modal .remote-clipboard-preview { min-height: 72px; margin: var(--nz-space-3) 0; background: var(--nz-raised); font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.remote-clipboard > #copyRemoteClipboard { margin-top: var(--nz-space-3); }
.remote-clipboard-preview:not([hidden]) + #copyRemoteClipboard { margin-top: 0; }
.password-modal { max-width: 440px; }
.password-modal form .button { margin-top: var(--nz-space-5); }

/* ---------- Toasts (created by app.js: "toast" / "toast error") ---------- */
.toast-container {
  position: fixed; left: 16px; right: 16px; bottom: 44px; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: var(--nz-space-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; max-width: min(480px, 100%); padding: 10px 14px;
  border: 1px solid var(--nz-line); border-left: 3px solid var(--nz-ok); border-radius: var(--nz-radius-control);
  background: var(--nz-surface); color: var(--nz-ink); box-shadow: var(--nz-shadow-float);
  font-size: var(--nz-text-sm); line-height: 1.5;
  animation: toast-in var(--nz-fast) var(--nz-ease);
}
.toast svg { width: 16px; height: 16px; margin-top: 2px; color: var(--nz-ok); }
.toast.error { border-left-color: var(--nz-bad); }
.toast.error svg { color: var(--nz-bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .control-bar .toolbar-button > span { display: none; }
  .toolbar-button { padding: 6px 8px; }
  .settings-panel { width: 280px; min-width: 280px; }
  .keyboard-tray { max-height: 220px; }
  .login-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nz-space-8); }
  .login-story h1 { font-size: var(--nz-text-2xl); }
}

@media (max-width: 900px) {
  .settings-panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 5;
    width: 300px; min-width: 0; max-width: 100%; box-shadow: var(--nz-shadow-float);
  }
}

@media (max-width: 760px) {
  .login-main { grid-template-columns: minmax(0, 1fr); gap: var(--nz-space-6); max-width: 440px; padding: var(--nz-space-6) 0 var(--nz-space-8); }
  .login-story { text-align: center; }
  .login-story h1 { margin: 0 auto var(--nz-space-3); font-size: var(--nz-text-2xl); }
  .login-story > p { margin: 0 auto var(--nz-space-2); }
  .desktop-art, .login-details { display: none; }
  .login-card { justify-self: center; max-width: 440px; padding: var(--nz-space-6); }
  .card-mark { display: none; }
  .login-footer { justify-content: center; text-align: center; }

  .app-header { gap: var(--nz-space-3); }
  .header-host { gap: 8px; padding-left: var(--nz-space-3); }
  .header-host strong { max-width: 160px; }
  .transport-badge { display: none; }
  .app-header .brand img { width: 26px; height: 26px; }
  .workspace { padding: 0 10px 6px; }
  .control-bar { gap: 6px; min-height: 48px; padding: 6px 0; }
  .connection-label { min-width: 0; }
  .toolbar-separator { margin: 0; }
  .compact-separator { display: none; }
  .settings-button { border-color: transparent; background: transparent; color: var(--nz-ink-2); }
  .screen-shell { border-radius: var(--nz-radius-control); }
  .workspace-body { gap: var(--nz-space-2); }
  .status-bar { min-height: 26px; }
  .footer-brand { display: none; }
  .screen-placeholder h2 { font-size: var(--nz-text-lg); }
  .screen-hint { bottom: var(--nz-space-3); }
  .keyboard-tray { gap: 5px; padding: 6px 8px; }
  .tray-caption, .tray-divider { display: none; }
  .soft-keyboard-button { margin-left: 0; }
  .tray-close { margin-left: auto; }
  .modal-backdrop { padding: var(--nz-space-3); }
  .modal { padding: var(--nz-space-5); max-height: calc(100dvh - 24px); }
  .clipboard-actions { flex-direction: column; }
  .clipboard-actions .button { width: 100%; }
  .remote-clipboard-heading { flex-direction: column; align-items: stretch; gap: var(--nz-space-3); }
  .toast-container { bottom: 36px; }
}

@media (max-width: 480px) {
  .header-host { border: 0; padding-left: 0; }
  .header-host > span, .header-host > div > span { display: none; }
  .header-host strong { max-width: 120px; }
  .app-header .brand-sub { display: none; }
  .app-header .brand img { width: 24px; height: 24px; }
  .app-header .brand > span { font-size: var(--nz-text-md); }
  .connection-label { display: none; }
  .control-bar { gap: 4px; }
  .control-bar > .control-group:last-child { width: 100%; justify-content: space-between; }
  .segmented button > span { display: none; }
  .segmented button { padding: 3px 8px; }
  .status-bar #controlStatus, .status-bar #footerStatus + .footer-divider { display: none; }
  .settings-panel { width: min(300px, 100%); }
  .login-header { gap: var(--nz-space-2); }
  .login-card { padding: var(--nz-space-5); }
  .screen-placeholder { padding: var(--nz-space-5); }
  .placeholder-host { bottom: var(--nz-space-4); }
}

@media (max-width: 360px) {
  .connection-group .button { display: block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .control-bar { gap: 3px; }
  .remote-clipboard-heading { align-items: stretch; }
  .remote-clipboard-heading > .button { width: 100%; }
}

@media (max-height: 550px) and (min-width: 650px) {
  .app-header { min-height: 48px; }
  .control-bar { min-height: 46px; padding: 4px 0; }
  .workspace { padding-bottom: 4px; }
  .status-bar { min-height: 22px; }
  .keyboard-tray { padding: 5px 8px; margin-bottom: 5px; }
  .modal { max-height: calc(100dvh - 24px); }
  .login-main { padding: var(--nz-space-4) 0 var(--nz-space-6); }
  .login-card { padding: var(--nz-space-6); }
  .card-mark, .desktop-art { display: none; }
  .login-story h1 { font-size: var(--nz-text-2xl); }
  .login-details { margin-top: var(--nz-space-5); }
}

/* ---------- Idle warning, second factor, security center (round 2) ---------- */
.idle-banner {
  display: flex; align-items: center; gap: var(--nz-space-3); flex-wrap: wrap;
  margin: 0 0 var(--nz-space-2); padding: 8px var(--nz-space-4);
  border: 1px solid var(--nz-warn); border-left-width: 3px; border-radius: var(--nz-radius-control);
  background: var(--nz-warn-soft); color: var(--nz-ink); font-size: var(--nz-text-sm);
}
.idle-banner svg { width: 18px; height: 18px; color: var(--nz-warn); }
.idle-banner span { flex: 1 1 220px; min-width: 0; }
.idle-banner strong { font-variant-numeric: tabular-nums; }
#totpForm { display: grid; gap: var(--nz-space-2); }
#totpForm .button { margin-top: var(--nz-space-3); }
.form-note { margin: 0 0 var(--nz-space-2); font-size: var(--nz-text-sm); line-height: 1.6; color: var(--nz-ink-2); }
.security-modal { max-width: 640px; }
.security-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--nz-space-4) 0 0; border-bottom: 1px solid var(--nz-line); }
.security-tab {
  padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-size: var(--nz-text-sm); font-weight: 500; color: var(--nz-ink-2);
}
.security-tab:hover { color: var(--nz-ink); }
.security-tab[aria-selected="true"] { border-bottom-color: var(--nz-accent); color: var(--nz-ink); }
.security-panel { padding-top: var(--nz-space-1); }
.security-panel .button { margin-top: var(--nz-space-3); }
.session-list, .audit-list { display: grid; gap: var(--nz-space-2); margin: 0 0 var(--nz-space-3); padding: 0; list-style: none; }
.session-row, .audit-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nz-space-3);
  padding: 10px 12px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-canvas);
}
.session-row .button { margin-top: 0; }
.audit-row { flex-direction: column; align-items: flex-start; gap: 2px; font-size: var(--nz-text-sm); }
.audit-row small, .session-meta { display: block; margin-top: 2px; font-size: var(--nz-text-xs); color: var(--nz-ink-2); overflow-wrap: anywhere; }
.session-text { min-width: 0; }
.session-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.session-badge { padding: 1px 8px; border-radius: var(--nz-radius-pill); font-size: var(--nz-text-xs); font-weight: 500; background: var(--nz-raised); color: var(--nz-ink-2); }
.session-badge.current { background: var(--nz-info-soft); color: var(--nz-info); }
.session-badge.live { background: var(--nz-ok-soft); color: var(--nz-ok); }
.totp-steps { margin: 0 0 var(--nz-space-3); padding-left: 1.2em; font-size: var(--nz-text-sm); line-height: 1.6; color: var(--nz-ink-2); }
.totp-qr { display: block; margin: var(--nz-space-3) 0; width: 192px; height: 192px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: #fff; image-rendering: pixelated; }
.totp-secret-line { margin: 0 0 var(--nz-space-3); font-size: var(--nz-text-sm); color: var(--nz-ink-2); }
.totp-secret-line code, .recovery-codes { font-family: var(--nz-font-mono); }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 0 0 var(--nz-space-3); padding: 0; list-style: none; font-size: var(--nz-text-sm); }
.recovery-codes li { padding: 6px 10px; border: 1px solid var(--nz-line); border-radius: var(--nz-radius-control); background: var(--nz-raised); user-select: all; }
#limitsForm .button { margin-top: var(--nz-space-4); }
@media (max-width: 520px) {
  .session-row { flex-direction: column; align-items: stretch; }
  .security-tab { padding: 8px; font-size: var(--nz-text-xs); }
}
/* NOBET VISUAL 20261011 START */
/* Nöbet / Architecture of connection — shared visual layer, 2026-10-11.
   Master source. Distributed by visual-20261011/build_visuals.py; never edit generated copies.
   Artwork is decorative. Controls, text, state classes and all form contracts stay in the app. */
:root {
  --nz-canvas: #eaf0e9;
  --nz-surface: #f8faf6;
  --nz-raised: #e0e9df;
  --nz-line: #cbd7cb;
  --nz-line-strong: #9faf9f;
  --nz-ink: #1d302b;
  --nz-ink-2: #52685b;
  --nz-ink-3: #596a60;
  --nz-accent: #286d5e;
  --nz-accent-hover: #205747;
  --nz-accent-soft: #dcece1;
  --nz-radius-plate: 20px;
  --nz-radius-control: 10px;
  --nv-art-day: url("/art/nobet-day.jpg?v=20261011");
  --nv-art-night: url("/art/nobet-night.jpg?v=20261011");
  --nv-art: var(--nv-art-day);
  --nv-shadow: 0 12px 32px -22px #31543d55, 0 1px 0 #ffffffa6 inset;
  --nv-shadow-large: 0 30px 80px -36px #294b386b, 0 1px 0 #ffffffb3 inset;
  --nv-grid: #36684708;
  --nv-hero-wash: #f0f5ed;
  --nv-hero-ink: #20372c;
  --nv-metal: #b99450;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nz-accent-ink: #122b21;
  --nz-canvas: #162725;
  --nz-surface: #203430;
  --nz-raised: #2a4039;
  --nz-line: #38524a;
  --nz-line-strong: #597669;
  --nz-ink: #e8efe4;
  --nz-ink-2: #aec2b3;
  --nz-ink-3: #93ac9c;
  --nz-accent: #8acbb1;
  --nz-accent-hover: #a1d8c1;
  --nz-accent-soft: #29463b;
  --nv-art: var(--nv-art-night);
  --nv-shadow: 0 16px 36px -25px #030c0799, 0 1px 0 #c9ebc710 inset;
  --nv-shadow-large: 0 32px 80px -36px #020905cf, 0 1px 0 #d9efd014 inset;
  --nv-grid: #a0c49a05;
  --nv-hero-wash: #192e27;
  --nv-hero-ink: #e8efe4;
  --nv-metal: #d6b875;
}
:root[data-theme="black"] {
  color-scheme: dark;
  --nz-accent-ink: #04110f;
  --nz-canvas: #0a0a0a;
  --nz-surface: #121212;
  --nz-raised: #1b1b1b;
  --nz-line: #2a2a2a;
  --nz-line-strong: #6b6b6b;
  --nz-ink: #ededed;
  --nz-ink-2: #b3b3b3;
  --nz-ink-3: #8f8f8f;
  --nz-accent: #5ec2b5;
  --nz-accent-hover: #80d4c9;
  --nz-accent-soft: #0f2a27;
  --nv-art: var(--nv-art-night);
  --nv-shadow: 0 16px 36px -25px #000000d9, 0 1px 0 #ffffff0d inset;
  --nv-shadow-large: 0 32px 80px -36px #000000f2, 0 1px 0 #ffffff12 inset;
  --nv-grid: #ffffff05;
  --nv-hero-wash: #0f0f0f;
  --nv-hero-ink: #ededed;
  --nv-metal: #d6b875;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="black"]) {
    color-scheme: dark; --nz-accent-ink: #122b21;
    --nz-canvas: #162725; --nz-surface: #203430; --nz-raised: #2a4039;
    --nz-line: #38524a; --nz-line-strong: #597669;
    --nz-ink: #e8efe4; --nz-ink-2: #aec2b3; --nz-ink-3: #93ac9c;
    --nz-accent: #8acbb1; --nz-accent-hover: #a1d8c1; --nz-accent-soft: #29463b;
    --nv-art: var(--nv-art-night);
    --nv-shadow: 0 16px 36px -25px #030c0799, 0 1px 0 #c9ebc710 inset;
    --nv-shadow-large: 0 32px 80px -36px #020905cf, 0 1px 0 #d9efd014 inset;
    --nv-grid: #a0c49a05; --nv-hero-wash: #192e27; --nv-hero-ink: #e8efe4; --nv-metal: #d6b875;
  }
}
body {
  background-color: var(--nz-canvas);
  background-image: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--nz-accent) 9%, transparent), transparent 58%), linear-gradient(var(--nv-grid) 1px, transparent 1px), linear-gradient(90deg, var(--nv-grid) 1px, transparent 1px);
  background-size: 100% 900px, 48px 48px, 48px 48px;
  background-repeat: no-repeat, repeat, repeat;
}
.nz-masthead { background: color-mix(in srgb, var(--nz-surface) 94%, transparent); border-bottom-color: var(--nz-line); box-shadow: 0 3px 18px #122d1907; }
:is(.nz-button,.button,.primary-button,.secondary-button) { border-radius: var(--nz-radius-control); }
:is(.nz-button.is-primary,.button.primary,.button-primary,.primary-button) { box-shadow: 0 3px 9px #0b33291a, 0 1px 0 #ffffff1f inset; }
:is(.nz-input,.nz-select,.nz-textarea) { background: color-mix(in srgb, var(--nz-surface) 94%, var(--nz-canvas)); }
:is(.nz-plate,.nz-dialog) { box-shadow: var(--nv-shadow); }
:is(.nz-stats) { border: 1px solid var(--nz-line); border-radius: 16px; background: var(--nz-surface); padding: 16px 0; box-shadow: var(--nv-shadow); }
.nz-table thead th { background: var(--nz-raised); }
/* One rail treatment across the three dense applications; semantic status colors are preserved. */
:is(.shared-sidebar,.app-rail,.sidebar) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--nz-accent-soft) 80%, var(--nz-surface)), var(--nz-surface) 290px);
  border-right-color: var(--nz-line);
}
:is(.shared-brand,.app-rail>.brand,.sidebar>.brand) { border-bottom: 1px solid var(--nz-line); padding-bottom: 22px; margin-bottom: 14px; }
:is(.shared-mark,.brand-mark,.card-mark) { box-shadow: 0 0 0 5px color-mix(in srgb, var(--nz-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--nz-accent) 26%, transparent); }
:is(.shared-nav a.active,.nz-rail-nav a.active,.nav-item.active) { border-radius: 10px; background: var(--nz-accent-soft); box-shadow: inset 3px 0 var(--nv-metal); }
@media (max-width: 600px) { :root { --nz-radius-plate: 16px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }

/* Screen: the illustration belongs to entry and disconnected state; it never covers a remote canvas. */
.login-page { background: transparent; }
.login-story h1 { font-size: clamp(30px,3.3vw,44px); }
.login-story > p { font-size: 17px; }
.desktop-art { min-height: 280px; max-width: none; overflow: hidden; background: var(--nv-art) 70% 54% / cover; box-shadow: var(--nv-shadow-large); border-radius: 22px; }
.desktop-art .art-top { background: color-mix(in srgb,var(--nz-surface) 88%,transparent); }
.desktop-art .art-body { visibility: hidden; }
.desktop-art .art-badge { background: var(--nz-surface); bottom: 14px; right: 14px; }
.desktop-art .art-cursor { opacity: .8; }
.login-details { margin-top: 26px; gap: 12px 18px; }
.login-card { border-top: 3px solid var(--nv-metal); box-shadow: var(--nv-shadow-large); padding: 32px; }
.login-card h2 { font-size: 28px; }
.login-card .nz-input { min-height: 44px; }
.app-header { box-shadow: 0 4px 20px #10241912; }
.toolbar { border-radius: 12px; }
.screen-shell { border: 1px solid var(--nz-line-strong); box-shadow: var(--nv-shadow); }
.screen-placeholder { background: linear-gradient(90deg,#142c25ed,#142c25d9),var(--nv-art-night) 70% 50% / cover; }
.screen-placeholder h2 { color: #eff4e9; }
.screen-placeholder p { color: #c1d3c4; }
:is(.settings-panel,.account-panel,.transfer-panel,.modal-card) { box-shadow: var(--nv-shadow-large); }
@media (max-width: 760px) {
 .login-story { text-align: left; }
 .login-story h1 { margin-inline: 0; }
 .desktop-art { display: block; min-height: 180px; max-height: 200px; }
 .login-card { padding: 24px; }
}

/* NOBET VISUAL 20261011 END */

/* DESIGN POLISH 20261021 — app-owned refinements after the generated visual layer. */
/* The username field had no kit class and rendered as a small browser-default box; it now matches the password field. */
.login-card #loginUsername {
  display:block; width:100%; min-height:44px; margin:0; padding:6px 12px;
  border:1px solid var(--nz-line-strong); border-radius:var(--nz-radius-control);
  background:color-mix(in srgb, var(--nz-surface) 94%, var(--nz-canvas)); color:var(--nz-ink);
  font-size:var(--nz-text-md); line-height:1.4; transition:border-color var(--nz-fast) var(--nz-ease);
}
.login-card #loginUsername:hover { border-color:var(--nz-ink-3); }
.login-card #loginUsername:focus-visible { border-color:var(--nz-accent); box-shadow:var(--nz-focus); outline:none; }
/* Even spacing between the field groups of the sign-in form. */
.login-card #loginUsername + label { margin-top:var(--nz-space-4); }
.login-card .login-duration { margin-top:var(--nz-space-4); }