:root {
  --sidebar-w: 270px;
  --dock-h: 86px;
  --liquid-glass-image: url("../images/liquid-glass-bg.png");
  --dark-pro-image: url("../images/dark-pro-bg.png");
  --blue-sky-image: url("../images/blue-sky-bg.png");
  --line: rgba(215, 224, 232, .82);
  --text: #1f2937;
  --muted: #6b7280;
  --pink: #ed3b96;
  --green: #10b981;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --glass: rgba(255, 255, 255, .58);
  --shadow: 0 26px 65px rgba(75, 92, 105, .22);
  --background: linear-gradient(180deg, #f5f7fa, #f8fafc 58%, #eef3f7);
  --background-light: rgba(255,255,255,.74);
  --surface: #f8fafc;
  --panel: rgba(255,255,255,.96);
  --panel-2: rgba(247,250,252,.94);
  --sidebar: linear-gradient(140deg, rgba(255,255,255,.72), rgba(244,248,252,.48)), rgba(255,255,255,.55);
  --dock: rgba(255,255,255,.55);
  --dropdown: rgba(255,255,255,.72);
  --border: rgba(215,224,232,.82);
  --glass-border: rgba(255,255,255,.7);
  --divider: rgba(215,224,232,.82);
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --accent: #3b82f6;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --shadow-xs: 0 1px 2px rgba(75,92,105,.08);
  --shadow-sm: 0 10px 26px rgba(75,92,105,.12);
  --shadow-md: 0 18px 44px rgba(75,92,105,.14);
  --shadow-lg: 0 26px 64px rgba(75,92,105,.24);
  --blur: 24px;
  --material-radius: 14px;
  --material-bg: #f5f7fa;
  --material-surface: rgba(255,255,255,.98);
  --material-border: rgba(215,224,232,.82);
  --material-border-highlight: rgba(255,255,255,.75);
  --material-shadow: 0 14px 32px rgba(75,92,105,.13);
  --material-inner-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  --dock-radius: 24px;
  --material-blur: 0px;
  --material-saturate: 100%;
  --material-opacity: 1;
  --material-noise-opacity: .032;
  --material-highlight-opacity: .08;
  --material-reflection: linear-gradient(180deg, rgba(255,255,255,.18), transparent 36%);
  --material-edge-light: rgba(255,255,255,.76);
  --material-texture:
    repeating-linear-gradient(0deg, rgba(31,41,55,.02) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(31,41,55,.015) 0 1px, transparent 1px 6px);
  --edge-highlight: rgba(255,255,255,.75);
  --edge-shadow: rgba(148,163,184,.16);
  --panel-overlay: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.96));
  --panel-hover-light: rgba(255,255,255,.45);
  --active-lift: -1px;
  --motion: 220ms ease-out;
  --motion-fast: 180ms ease-out;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { width: 100%; min-height: 100%; font-size: 14px; overflow-x: hidden; }
@media (min-width: 768px) { html { font-size: 16px; } }
* { box-sizing: border-box; }
body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(240,248,255,.34)),
    radial-gradient(circle at 52% 8%, var(--background-light), transparent 31%),
    var(--liquid-glass-image) center center / cover no-repeat fixed,
    var(--background);
  font-family: var(--font);
  overflow-x: hidden;
}
body:has(.buildos) > header,
body:has(.buildos) > footer { display: none; }
body:has(.buildos) { overflow: hidden; }
body:has(.buildos) > main.container { width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0; padding: 0 !important; overflow: hidden; }
body:has(.whiteboard-shell) > header,
body:has(.whiteboard-shell) > footer { display: none; }
body:has(.whiteboard-shell) { overflow: hidden; }
body:has(.whiteboard-shell) > main.container { width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0; padding: 0 !important; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }

.whiteboard-shell {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #0f172a;
  background: #eef3f8;
}

.whiteboard-sidebar {
  position: relative;
  z-index: 10;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: repeat(5, auto);
  align-content: start;
  gap: 12px;
  padding: 12px 10px;
  border-right: 1px solid #d8e1ea;
  background: #fbfdff;
  box-shadow: 8px 0 24px rgba(15,23,42,.06);
  overflow-x: hidden;
  overflow-y: auto;
}

.whiteboard-brand {
  display: grid;
  place-items: center;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5edf5;
  text-align: center;
}

.whiteboard-brand img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.whiteboard-brand strong {
  font-size: 11px;
}

.whiteboard-toolset,
.whiteboard-palette,
.whiteboard-pen-settings,
.whiteboard-actions {
  display: grid;
  gap: 8px;
}

.whiteboard-toolset {
  gap: 10px;
}

.whiteboard-toolgroup {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #f8fbff;
}

.whiteboard-toolset button,
.whiteboard-palette button,
.whiteboard-actions button,
.whiteboard-templatebar button,
.whiteboard-zoom button,
.whiteboard-import {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
}

.whiteboard-toolset button,
.whiteboard-palette button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 36px;
  padding: 0;
  font-weight: 850;
}

.whiteboard-toolset button:hover,
.whiteboard-toolset button.is-active,
.whiteboard-templatebar button:hover,
.whiteboard-zoom button:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37,99,235,.12);
}

.whiteboard-palette button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--swatch) 60%, #94a3b8);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.62), transparent 42%),
    var(--swatch);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(15,23,42,.09),
    0 5px 12px rgba(15,23,42,.1);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out;
}

.whiteboard-palette button::after {
  position: absolute;
  inset: 5px;
  z-index: -1;
  content: "";
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 7px;
  pointer-events: none;
}

.whiteboard-palette button::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "✓";
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  text-shadow: 0 1px 4px rgba(15,23,42,.65);
  opacity: 0;
  transform: scale(.65);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.whiteboard-palette button:hover {
  border-color: color-mix(in srgb, var(--swatch) 45%, #475569);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(15,23,42,.1),
    0 9px 18px rgba(15,23,42,.16);
  transform: translateY(-2px) scale(1.04);
}

.whiteboard-palette button.is-active {
  border-color: #fff;
  box-shadow:
    0 0 0 2px #2563eb,
    0 8px 18px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.76);
  transform: translateY(-1px);
}

.whiteboard-palette button.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.whiteboard-pen-settings {
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.whiteboard-pen-settings label {
  display: grid;
  gap: 4px;
}

.whiteboard-pen-settings span,
.whiteboard-pen-settings b {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.whiteboard-pen-settings input {
  width: 54px;
  accent-color: #2563eb;
}

.whiteboard-color-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 46px;
  align-self: start;
  align-items: start;
  gap: 4px;
  width: 100%;
  height: auto;
}

.whiteboard-color-shortcuts button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  height: 46px;
  min-height: 0;
  max-height: 46px;
  padding: 4px 2px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 8px;
  font-weight: 850;
}

.whiteboard-color-shortcuts i {
  width: 20px;
  height: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: var(--swatch);
}

.whiteboard-color-shortcuts button[aria-expanded="true"] {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #1d4ed8;
}

.whiteboard-sticker-colors {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 10px;
  width: 214px;
  padding: 15px;
  border: 1px solid rgba(203,213,225,.88);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
  box-shadow: 0 22px 54px rgba(15,23,42,.2), inset 0 1px 0 #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px) scale(.97);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.whiteboard-sticker-colors.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.whiteboard-sticker-colors strong {
  color: #334155;
  font-size: 12px;
}

.whiteboard-sticker-colors .whiteboard-palette {
  grid-template-columns: repeat(4, 40px);
  gap: 8px;
  justify-content: center;
}

.whiteboard-sticker-colors .whiteboard-palette button {
  width: 40px;
  height: 40px;
}

.whiteboard-sticker-custom-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.whiteboard-sticker-custom-color input {
  width: 44px;
  height: 34px;
  padding: 3px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15,23,42,.1);
  cursor: pointer;
}

.whiteboard-pen-settings .whiteboard-color-setting {
  grid-template-columns: 1fr;
}

.whiteboard-pen-settings .whiteboard-color-setting input {
  width: 54px;
  height: 26px;
  padding: 2px;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.whiteboard-actions {
  align-self: start;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.whiteboard-actions button {
  width: 54px;
  min-height: 32px;
  padding: 5px;
  font-size: 10px;
  font-weight: 800;
}

.whiteboard-actions .danger-action {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.whiteboard-topbar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, auto);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid #d8e1ea;
  background: #fbfdff;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.whiteboard-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.whiteboard-heading-logo {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.whiteboard-back {
  display: inline-grid;
  place-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.whiteboard-back:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.whiteboard-boardbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-self: end;
  padding: 6px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #f6f9fc;
}

.whiteboard-boardbar select,
.whiteboard-boardbar input,
.whiteboard-boardbar button {
  height: 30px;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.whiteboard-boardbar select {
  width: 150px;
  padding: 0 9px;
}

.whiteboard-boardbar input {
  width: 190px;
  padding: 0 9px;
}

.whiteboard-boardbar button {
  padding: 0 9px;
}

.whiteboard-boardbar button.is-active {
  border-color: #34d399;
  background: #ecfdf5;
  color: #047857;
}

.whiteboard-topbar h1,
.whiteboard-topbar p {
  margin: 0;
}

.whiteboard-topbar h1 {
  font-size: 19px;
  font-weight: 820;
}

.whiteboard-topbar p {
  color: #64748b;
  font-size: 13px;
}

.whiteboard-templatebar,
.whiteboard-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  white-space: nowrap;
}

.whiteboard-templatebar {
  grid-column: 1;
}

.whiteboard-zoom {
  grid-column: 2;
  justify-self: end;
}

.whiteboard-zoom span {
  min-width: 52px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.whiteboard-templatebar button,
.whiteboard-zoom button {
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  font-weight: 850;
}

.whiteboard-zoom select,
.whiteboard-properties select,
.whiteboard-properties input,
.whiteboard-properties textarea {
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12px;
}

.whiteboard-zoom select {
  height: 34px;
  padding: 0 9px;
  font-weight: 800;
}

.whiteboard-zoom button.is-active,
.wb-prop-actions button.is-active {
  border-color: #34d399;
  background: #ecfdf5;
  color: #047857;
}

.whiteboard-import {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 34px;
  padding: 0 10px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
}

.whiteboard-import input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.whiteboard-status {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  max-width: min(560px, calc(100% - 32px));
  padding: 9px 12px;
  border: 1px solid rgba(203,213,225,.82);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  color: #475569;
  font-size: 12px;
  font-weight: 760;
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.whiteboard-text-editor {
  position: absolute;
  z-index: 30;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
}

.whiteboard-text-editor[hidden] {
  display: none !important;
}

.whiteboard-text-editor textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  padding: 10px;
  outline: 0;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
}

.whiteboard-text-editor div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.whiteboard-text-editor button {
  min-width: 48px;
  height: 30px;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-weight: 800;
}

.whiteboard-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: crosshair;
  background-color: #f6f8fb;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(100,116,139,.22) 1px, transparent 0),
    linear-gradient(rgba(148,163,184,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px);
  background-position: var(--grid-x, 0) var(--grid-y, 0);
  background-size: calc(var(--grid-size, 32px) / 2) calc(var(--grid-size, 32px) / 2), var(--grid-size, 32px) var(--grid-size, 32px), var(--grid-size, 32px) var(--grid-size, 32px);
  user-select: none;
  -webkit-user-select: none;
}

.whiteboard-stage.is-grid-hidden {
  background-image: none !important;
}

.whiteboard-shell[data-theme="draft"] .whiteboard-stage {
  background-color: #eef6ff;
  background-image:
    linear-gradient(rgba(37,99,235,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.13) 1px, transparent 1px);
}

.whiteboard-shell[data-theme="dark"] {
  color: #e5e7eb;
  background: #111827;
}

.whiteboard-shell[data-theme="dark"] .whiteboard-sidebar,
.whiteboard-shell[data-theme="dark"] .whiteboard-topbar,
.whiteboard-shell[data-theme="dark"] .whiteboard-boardbar,
.whiteboard-shell[data-theme="dark"] .whiteboard-toolgroup,
.whiteboard-shell[data-theme="dark"] .whiteboard-properties,
.whiteboard-shell[data-theme="dark"] .whiteboard-minimap {
  border-color: rgba(148,163,184,.22);
  background: #172033;
  color: #e5e7eb;
}

.whiteboard-shell[data-theme="dark"] .whiteboard-stage {
  background-color: #0f172a;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148,163,184,.22) 1px, transparent 0),
    linear-gradient(rgba(148,163,184,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.12) 1px, transparent 1px);
}

.whiteboard-shell[data-theme="dark"] .whiteboard-topbar p,
.whiteboard-shell[data-theme="dark"] .whiteboard-brand strong {
  color: #94a3b8;
}

.whiteboard-shell[data-theme="presentation"] .whiteboard-stage {
  background-color: #fff;
  background-image: none;
}

.whiteboard-shell[data-theme="presentation"] .whiteboard-item {
  box-shadow: 0 16px 36px rgba(15,23,42,.14);
}

.whiteboard-stage.is-panning,
.whiteboard-stage.is-panning * {
  cursor: grab;
}

.whiteboard-stage.is-drawing,
.whiteboard-stage.is-drawing * {
  cursor: crosshair;
}

.whiteboard-stage.is-erasing,
.whiteboard-stage.is-erasing * {
  cursor: cell;
}

.whiteboard-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.whiteboard-guides {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.whiteboard-guides i {
  position: absolute;
  display: block;
  background: #2563eb;
  opacity: .64;
}

.whiteboard-cursors {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.whiteboard-remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  will-change: transform;
}

.whiteboard-remote-cursor span {
  width: 0;
  height: 0;
  border-left: 8px solid var(--cursor-color, #2563eb);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .24));
}

.whiteboard-remote-cursor b {
  padding: 5px 7px;
  border-radius: 999px;
  background: var(--cursor-color, #2563eb);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
  white-space: nowrap;
}

.whiteboard-guides .is-vertical {
  top: 0;
  bottom: 0;
  width: 1px;
}

.whiteboard-guides .is-horizontal {
  left: 0;
  right: 0;
  height: 1px;
}

.whiteboard-selection-box {
  position: absolute;
  z-index: 20;
  border: 1px solid #2563eb;
  background: rgba(37,99,235,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
  pointer-events: none;
}

.whiteboard-links,
.whiteboard-items,
.whiteboard-drawings {
  position: absolute;
  left: -3000px;
  top: -2000px;
  width: 6000px;
  height: 4000px;
  overflow: visible;
}

.whiteboard-links {
  pointer-events: auto;
}

.whiteboard-drawings {
  pointer-events: none;
}

.whiteboard-items {
  pointer-events: none;
}

.whiteboard-item {
  position: absolute;
  display: grid;
  min-width: 72px;
  min-height: 54px;
  border: 1px solid rgba(100,116,139,.28);
  border-radius: 8px;
  background: var(--item-color);
  box-shadow: 0 12px 28px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.72);
  user-select: none;
  touch-action: none;
  pointer-events: auto;
  container-type: size;
}

.whiteboard-item.is-selected {
  outline: 3px solid rgba(37,99,235,.24);
  outline-offset: 3px;
}

.whiteboard-item.is-locked {
  opacity: .74;
}

.whiteboard-item.is-locked::after {
  position: absolute;
  right: 8px;
  top: 7px;
  content: "замок";
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.68);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.whiteboard-item.is-connector-source {
  outline: 3px solid rgba(16,185,129,.38);
  outline-offset: 5px;
}

.wb-content {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 14px;
  color: var(--text-color, #172033);
  font-size: clamp(10px, 7cqi, 15px);
  font-weight: 760;
  line-height: 1.28;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-align: center;
  white-space: pre-wrap;
}

.wb-content[contenteditable="true"] {
  place-items: stretch;
  outline: 0;
  user-select: text;
  cursor: text;
}

.wb-card .wb-content,
.wb-text .wb-content {
  place-items: start;
  text-align: left;
}

.wb-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), transparent),
    var(--item-color);
}

.wb-frame {
  border: 2px dashed #64748b;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.82), 0 12px 28px rgba(15,23,42,.08);
}

.wb-frame-title {
  position: absolute;
  left: 12px;
  top: -14px;
  max-width: calc(100% - 24px);
  padding: 4px 10px;
  border: 1px solid rgba(100,116,139,.28);
  border-radius: 999px;
  background: #fff;
  color: var(--text-color, #334155);
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-frame .wb-content {
  align-content: start;
  justify-items: start;
  place-items: start;
  color: var(--text-color, #475569);
  font-size: 14px;
  font-weight: 850;
  text-align: left;
}

.wb-text {
  border-color: rgba(148,163,184,.38);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.82);
}

.wb-text .wb-content {
  color: var(--text-color, #0f172a);
  font-size: clamp(12px, 8cqi, 20px);
  font-weight: 850;
}

.wb-shape {
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.12)),
    var(--item-color);
}

.wb-circle {
  border-radius: 999px;
}

.wb-diamond {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wb-diamond::before {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 70.7107%;
  height: 70.7107%;
  content: "";
  border: 1px solid rgba(100,116,139,.28);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.12)),
    var(--item-color);
  box-shadow: 0 12px 28px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.72);
  transform: translate(-50%, -50%) rotate(45deg);
}

.wb-diamond .wb-content {
  position: relative;
  z-index: 1;
  place-self: center;
  width: 64%;
  height: 36%;
  padding: 4px;
}

.wb-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 4px 10px rgba(37,99,235,.32);
  cursor: nwse-resize;
}

.wb-connector {
  position: absolute;
  z-index: 3;
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 6px 14px rgba(37,99,235,.34);
  cursor: crosshair;
}

.whiteboard-item.is-selected .wb-connector {
  display: block;
}

.wb-connector-top {
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
}

.wb-connector-right {
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
}

.wb-connector-bottom {
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
}

.wb-connector-left {
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
}

.wb-link {
  fill: none;
  stroke: #64748b;
  stroke-width: 3;
  stroke-linecap: round;
  pointer-events: none;
  cursor: pointer;
}

.wb-link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}

.wb-link.is-selected {
  stroke: #2563eb;
  stroke-width: 5;
}

.wb-link.is-dashed {
  stroke-dasharray: 10 8;
}

.wb-link-preview {
  stroke: #2563eb;
  stroke-dasharray: 8 7;
  stroke-opacity: .78;
}

.wb-freehand {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

.wb-freehand-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: move;
}

.wb-freehand.is-selected {
  filter: drop-shadow(0 0 0 #2563eb);
}

.wb-path-selection {
  fill: rgba(37,99,235,.04);
  stroke: #2563eb;
  stroke-width: 1.5;
  stroke-dasharray: 8 6;
  pointer-events: all;
  cursor: move;
}

.wb-path-resize {
  fill: #2563eb;
  stroke: #fff;
  stroke-width: 2;
  cursor: nwse-resize;
  pointer-events: all;
}

.whiteboard-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  gap: 7px;
  width: min(360px, calc(100% - 40px));
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  color: #64748b;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.whiteboard-empty strong {
  color: #0f172a;
  font-size: 17px;
}

.whiteboard-empty div {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.whiteboard-empty button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.whiteboard-properties {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 12;
  display: grid;
  gap: 10px;
  width: 260px;
  padding: 12px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
  backdrop-filter: blur(12px);
}

.whiteboard-properties[hidden] {
  display: none !important;
}

.wb-prop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wb-prop-head button,
.wb-prop-actions button {
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-weight: 850;
}

.wb-prop-head button {
  width: 28px;
  height: 28px;
}

.whiteboard-properties label {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.whiteboard-properties textarea {
  min-height: 74px;
  padding: 8px;
  resize: vertical;
}

.whiteboard-properties input,
.whiteboard-properties select {
  height: 32px;
  padding: 0 8px;
}

.wb-prop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.wb-prop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.wb-link-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #f8fafc;
}

.wb-link-scope button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.wb-link-scope button.is-active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 1px 4px rgba(15,23,42,.08);
}

.wb-prop-actions button {
  min-height: 32px;
  font-size: 11px;
}

.whiteboard-minimap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  width: 200px;
  height: 128px;
  padding: 10px;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
  overflow: hidden;
}

.whiteboard-minimap[hidden] {
  display: none !important;
}

.whiteboard-minimap div {
  position: relative;
  width: 180px;
  height: 108px;
}

.whiteboard-minimap span,
.whiteboard-minimap i {
  position: absolute;
  display: block;
  border-radius: 3px;
}

.whiteboard-minimap span {
  background: #93c5fd;
}

.whiteboard-minimap span.is-frame {
  border: 1px dashed #64748b;
  background: rgba(148,163,184,.18);
}

.whiteboard-minimap i {
  border: 1px solid #2563eb;
  background: rgba(37,99,235,.08);
}

@media (max-width: 760px) {
  body:has(.whiteboard-shell) > main.container {
    height: 100vh;
    height: 100dvh;
  }

  .whiteboard-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 68px minmax(0, 1fr);
    min-height: 0;
  }

  .whiteboard-sidebar {
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(203,213,225,.8);
    overflow-x: auto;
  }

  .whiteboard-brand {
    display: none;
  }

  .whiteboard-toolset,
  .whiteboard-palette,
  .whiteboard-pen-settings,
  .whiteboard-actions {
    display: flex;
  }

  .whiteboard-toolset {
    overflow-x: auto;
  }

  .whiteboard-toolgroup {
    display: flex;
    flex: 0 0 auto;
    padding: 5px;
  }

  .whiteboard-pen-settings {
    align-items: center;
    min-width: 190px;
    padding: 0 8px;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
  }

  .whiteboard-topbar {
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .whiteboard-boardbar,
  .whiteboard-templatebar,
  .whiteboard-zoom {
    grid-column: 1;
    justify-self: stretch;
    overflow-x: auto;
  }

  .whiteboard-boardbar {
    order: 2;
  }

  .whiteboard-templatebar {
    order: 3;
  }

  .whiteboard-zoom {
    order: 4;
  }

  .whiteboard-heading {
    gap: 8px;
  }

  .whiteboard-back {
    height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }

  .whiteboard-topbar p {
    display: none;
  }

  .whiteboard-topbar h1 {
    font-size: 16px;
  }

  .whiteboard-zoom button {
    min-width: 32px;
    padding: 0 8px;
  }

  .whiteboard-import {
    height: 34px;
    padding: 0 8px;
  }

  .whiteboard-properties {
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
  }

  .whiteboard-minimap {
    right: 12px;
    bottom: 12px;
    width: 156px;
    height: 104px;
  }

  .whiteboard-minimap div {
    width: 136px;
    height: 84px;
  }
}

.whiteboard-upload-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wb-attachment {
  overflow: hidden;
  background: #fff;
}

.wb-attachment-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.wb-attachment-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.wb-attachment-caption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  overflow: hidden;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(15,23,42,.68);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.wb-file-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 14px;
  color: #1e293b;
  cursor: grab;
}

.wb-file-card:hover {
  background: #eff6ff;
}

.wb-file-card > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #e0e7ff;
  font-style: normal;
  font-size: 21px;
}

.wb-file-card span,
.wb-file-card strong,
.wb-file-card small {
  display: block;
  min-width: 0;
}

.wb-file-card strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-file-card small {
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
}

.wb-file-open {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.wb-file-open:hover {
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1d4ed8;
}

.wb-file-actions {
  display: grid;
  gap: 5px;
}

.wb-inline-file {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.wb-inline-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: grab;
}

.wb-inline-file-head > strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-inline-file-head > div {
  display: flex;
  gap: 6px;
}

.wb-inline-file-head button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 9px;
  font-weight: 800;
}

.wb-inline-file pre {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 16px;
  color: #172033;
  cursor: text;
  user-select: text;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.whiteboard-file-viewer {
  position: absolute;
  inset: 24px;
  z-index: 55;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(820px, calc(100% - 48px));
  height: min(680px, calc(100% - 48px));
  margin: auto;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 28px 80px rgba(15,23,42,.3), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}

.whiteboard-file-viewer[hidden] {
  display: none !important;
}

.whiteboard-file-viewer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.whiteboard-file-viewer header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.whiteboard-file-viewer header span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.whiteboard-file-viewer header strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whiteboard-file-viewer header button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-weight: 750;
}

.whiteboard-file-viewer pre {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 20px;
  background: #fff;
  color: #172033;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .whiteboard-file-viewer {
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }

  .whiteboard-file-viewer header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 761px) and (max-width: 1920px), (min-width: 761px) and (max-height: 1200px) {
  .whiteboard-shell {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .whiteboard-sidebar {
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 7px;
    padding: 8px 7px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .whiteboard-brand img {
    width: 30px;
    height: 30px;
  }

  .whiteboard-brand strong,
  .whiteboard-topbar p {
    display: none;
  }

  .whiteboard-toolset,
  .whiteboard-toolgroup,
  .whiteboard-palette,
  .whiteboard-pen-settings,
  .whiteboard-actions {
    gap: 5px;
  }

  .whiteboard-toolgroup {
    grid-template-columns: repeat(2, 38px);
    justify-content: center;
    padding: 4px;
  }

  .whiteboard-palette,
  .whiteboard-pen-settings,
  .whiteboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
  }

  .whiteboard-pen-settings {
    padding: 6px 0;
  }

  .whiteboard-pen-settings label {
    align-content: start;
    width: 48px;
  }

  .whiteboard-pen-settings input,
  .whiteboard-pen-settings .whiteboard-color-setting input {
    max-width: 48px;
  }

  .whiteboard-toolset button,
  .whiteboard-palette button {
    width: 38px;
    height: 30px;
  }

  .whiteboard-actions button {
    width: 48px;
    min-height: 28px;
    padding: 3px;
    font-size: 9px;
  }

  .whiteboard-actions {
    align-self: start;
    width: 100%;
    padding-bottom: 6px;
  }

  .whiteboard-topbar {
    gap: 6px 10px;
    padding: 8px 12px;
  }

  .whiteboard-heading-logo {
    width: 32px;
    height: 32px;
  }

  .whiteboard-topbar h1 {
    font-size: 16px;
  }

  .whiteboard-boardbar {
    gap: 5px;
    padding: 4px;
  }

  .whiteboard-boardbar input {
    width: 150px;
  }

  .whiteboard-boardbar select {
    width: 125px;
  }

  .whiteboard-templatebar,
  .whiteboard-zoom {
    gap: 5px;
    scrollbar-width: thin;
  }

  .whiteboard-templatebar button,
  .whiteboard-zoom button,
  .whiteboard-zoom select,
  .whiteboard-import {
    height: 30px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 11px;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .whiteboard-sidebar {
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .whiteboard-brand {
    padding-bottom: 4px;
  }

  .whiteboard-sidebar,
  .whiteboard-toolset,
  .whiteboard-toolgroup,
  .whiteboard-palette,
  .whiteboard-pen-settings,
  .whiteboard-actions {
    gap: 5px;
  }

  .whiteboard-toolset button,
  .whiteboard-palette button {
    height: 30px;
  }

  .whiteboard-actions {
    align-self: start;
  }
}

/* Whiteboard toolbar — compact studio rail */
@media (min-width: 761px) {
  .whiteboard-shell {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .whiteboard-shell .whiteboard-sidebar {
    grid-template-rows: repeat(5, auto);
    align-content: start;
    gap: 12px;
    padding: 14px 12px 24px;
    border-right: 1px solid rgba(203,213,225,.72);
    background:
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.94)),
      #f8fafc;
    box-shadow: 10px 0 30px rgba(15,23,42,.07), inset -1px 0 0 rgba(255,255,255,.8);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }

  .whiteboard-shell .whiteboard-brand {
    gap: 7px;
    padding: 4px 0 14px;
    border-bottom-color: #e2e8f0;
  }

  .whiteboard-shell .whiteboard-brand img {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 5px 10px rgba(37,99,235,.16));
  }

  .whiteboard-shell .whiteboard-brand strong {
    display: block;
    color: #1e293b;
    font-size: 13px;
    letter-spacing: -.01em;
  }

  .whiteboard-shell .whiteboard-toolset {
    gap: 10px;
  }

  .whiteboard-shell .whiteboard-toolgroup {
    display: grid;
    grid-template-columns: 56px;
    justify-content: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: rgba(248,250,252,.82);
    box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(15,23,42,.035);
  }

  .whiteboard-shell .whiteboard-toolset button {
    width: 56px;
    height: 50px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    color: #24324a;
    font-size: 19px;
    box-shadow: 0 5px 12px rgba(15,23,42,.07), inset 0 1px 0 #fff;
  }

  .whiteboard-shell .whiteboard-toolset button:hover {
    border-color: #93b4ff;
    background: #f5f8ff;
    color: #2563eb;
    box-shadow: 0 8px 18px rgba(37,99,235,.14), inset 0 1px 0 #fff;
  }

  .whiteboard-shell .whiteboard-toolset button.is-active {
    border-color: #78a2ff;
    background: linear-gradient(145deg, #eef4ff, #fff);
    color: #2563eb;
    box-shadow: 0 0 0 2px rgba(59,130,246,.12), 0 8px 18px rgba(37,99,235,.16);
  }

  .whiteboard-shell .whiteboard-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
    padding: 12px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
  }

  .whiteboard-shell .whiteboard-actions button {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border-color: #dbe4ee;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    color: #334155;
    font-size: 10px;
    box-shadow: 0 4px 10px rgba(15,23,42,.055);
  }

  .whiteboard-shell .whiteboard-actions button:nth-child(-n+2) {
    min-height: 46px;
    font-size: 20px;
  }

  .whiteboard-shell .whiteboard-actions .danger-action {
    border-color: #fca5a5;
    background: #fff7f7;
    color: #dc2626;
  }

  .whiteboard-shell .whiteboard-color-shortcuts {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 54px;
    gap: 3px;
    padding: 2px 0 10px;
    border-bottom: 1px solid #e2e8f0;
  }

  .whiteboard-shell .whiteboard-color-shortcuts button {
    height: 54px;
    max-height: 54px;
    padding: 4px 1px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-size: 8px;
  }

  .whiteboard-shell .whiteboard-color-shortcuts button:hover,
  .whiteboard-shell .whiteboard-color-shortcuts button[aria-expanded="true"] {
    background: #eff6ff;
    color: #2563eb;
  }

  .whiteboard-shell .whiteboard-color-shortcuts i {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1, 0 4px 9px rgba(15,23,42,.13);
  }

  .whiteboard-shell .whiteboard-pen-settings {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 14px;
    width: 100%;
    padding: 4px 3px 12px;
    border: 0;
  }

  .whiteboard-shell .whiteboard-pen-settings label {
    width: 100%;
    gap: 7px;
  }

  .whiteboard-shell .whiteboard-pen-settings span,
  .whiteboard-shell .whiteboard-pen-settings b {
    font-size: 9px;
  }

  .whiteboard-shell .whiteboard-pen-settings input {
    width: 100%;
    max-width: none;
  }
}

.buildos {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  --sidebar-w: 270px;
  color: var(--text-primary);
  background: var(--background);
  transition: background var(--motion), color var(--motion);
}
.buildos::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: var(--material-texture);
  opacity: var(--material-noise-opacity);
  mix-blend-mode: multiply;
}
.buildos::after {
  position: fixed;
  inset: -8% -6%;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
}
.buildos.theme-dark::before,
.buildos.theme-glass::before,
.buildos.theme-sky::before {
  mix-blend-mode: screen;
}

.buildos.theme-dark::after {
  background:
    linear-gradient(94deg, transparent 0 8%, rgba(148,163,184,.04) 14%, rgba(203,213,225,.16) 25%, rgba(96,165,250,.08) 38%, transparent 56%),
    linear-gradient(102deg, transparent 0 18%, rgba(226,232,240,.13) 32%, rgba(148,163,184,.08) 48%, transparent 70%),
    radial-gradient(ellipse at 18% 54%, rgba(191,219,254,.22), transparent 30%),
    radial-gradient(ellipse at 62% 47%, rgba(148,163,184,.2), transparent 34%),
    radial-gradient(ellipse at 92% 58%, rgba(96,165,250,.14), transparent 28%);
  background-size: 170% 100%, 150% 100%, 120% 78%, 132% 84%, 118% 72%;
  filter: blur(24px) saturate(118%);
  mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.72) 24%, rgba(0,0,0,.86) 62%, transparent 92%);
  mix-blend-mode: screen;
  opacity: .58;
  transform: translate3d(-2%, 0, 0) scale(1.04);
  animation:
    mountainMistDrift 28s ease-in-out infinite alternate,
    backgroundBreath 10s ease-in-out infinite;
}

.buildos.theme-glass::after {
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.42) 26%, rgba(255,255,255,.12) 34%, transparent 45%),
    linear-gradient(38deg, transparent 0 46%, rgba(125,211,252,.18) 53%, rgba(255,255,255,.28) 58%, transparent 66%),
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.48), transparent 18%),
    radial-gradient(circle at 72% 18%, rgba(34,211,238,.18), transparent 24%),
    radial-gradient(circle at 78% 78%, rgba(196,181,253,.2), transparent 28%);
  background-size: 150% 150%, 140% 140%, 120% 120%, 110% 110%, 125% 125%;
  filter: blur(10px) saturate(150%) contrast(104%);
  mix-blend-mode: screen;
  opacity: .46;
  transform: translate3d(0, 0, 0) scale(1.02);
  animation:
    liquidGlassFlow 18s ease-in-out infinite alternate,
    backgroundBreath 8s ease-in-out infinite;
}

.buildos.theme-sky::after {
  inset: auto 0 0;
  height: 52vh;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  animation: none;
}

.buildos.theme-dark {
  --background:
    linear-gradient(180deg, rgba(3,8,16,.34), rgba(3,8,16,.2) 42%, rgba(3,8,16,.48)),
    radial-gradient(ellipse at 42% 16%, rgba(37,99,235,.2), transparent 38%),
    radial-gradient(circle at 8% 72%, rgba(59,130,246,.08), transparent 32%),
    var(--dark-pro-image) center center / cover no-repeat,
    linear-gradient(180deg, #07111f 0%, #0b1624 46%, #060b13 100%);
  --background-light: rgba(59,130,246,.16);
  --surface: #07111f;
  --panel: rgba(17,28,44,.92);
  --panel-2: rgba(11,20,34,.94);
  --sidebar: linear-gradient(145deg, rgba(26,39,61,.88), rgba(8,16,28,.72)), rgba(11,20,34,.76);
  --dock: rgba(16,27,44,.72);
  --dropdown: rgba(15,26,43,.92);
  --glass: rgba(22,35,56,.62);
  --border: rgba(75,103,146,.46);
  --glass-border: rgba(96,165,250,.24);
  --divider: rgba(75,103,146,.42);
  --text-primary: #f8fafc;
  --text-secondary: #a9b4c3;
  --accent: #3b82f6;
  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.26);
  --shadow-sm: 0 10px 26px rgba(0,0,0,.28);
  --shadow-md: 0 20px 48px rgba(0,0,0,.38), 0 0 28px rgba(37,99,235,.08);
  --shadow-lg: 0 30px 78px rgba(0,0,0,.52), 0 0 42px rgba(37,99,235,.12);
  --material-radius: 16px;
  --material-bg: #151b24;
  --material-surface: rgba(35,43,54,.98);
  --material-border: rgba(100,116,139,.42);
  --material-border-highlight: rgba(148,163,184,.18);
  --material-shadow: 0 22px 54px rgba(0,0,0,.42), 0 0 34px rgba(37,99,235,.12);
  --material-inner-shadow: inset 0 1px 0 rgba(148,190,255,.12), inset 0 -1px 0 rgba(0,0,0,.36);
  --dock-radius: 25px;
  --material-blur: 10px;
  --material-saturate: 126%;
  --material-noise-opacity: .08;
  --material-highlight-opacity: .16;
  --material-reflection:
    linear-gradient(180deg, rgba(148,190,255,.1), transparent 42%),
    radial-gradient(circle at 8% 0%, rgba(96,165,250,.16), transparent 26%);
  --material-edge-light: rgba(96,165,250,.34);
  --material-texture:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.026) 0 1px, transparent 1px 7px);
  --edge-highlight: rgba(147,197,253,.2);
  --edge-shadow: rgba(0,0,0,.48);
  --panel-overlay:
    linear-gradient(180deg, rgba(22,35,56,.9), rgba(10,18,31,.94)),
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.11), transparent 30%);
  --panel-hover-light: rgba(96,165,250,.08);
  --active-lift: -1px;
  --line: var(--divider);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--accent);
  --green: var(--success);
  --cyan: #67e8f9;
}

.buildos.theme-sky {
  --background:
    linear-gradient(180deg, rgba(10,86,156,.04), rgba(255,255,255,.02) 42%, rgba(255,255,255,.12)),
    var(--blue-sky-image) center center / cover no-repeat,
    linear-gradient(180deg, #68bdf2 0%, #8fd3fb 34%, #c8ecfb 68%, #f4fbff 100%);
  --background-light: rgba(255,255,255,.86);
  --surface: rgba(236,248,255,.78);
  --panel: rgba(255,255,255,.88);
  --panel-2: rgba(242,250,255,.84);
  --sidebar: linear-gradient(145deg, rgba(255,255,255,.64), rgba(219,242,255,.36) 52%, rgba(125,211,252,.18)), rgba(255,255,255,.4);
  --dock: linear-gradient(135deg, rgba(255,255,255,.68), rgba(226,246,255,.36) 52%, rgba(56,189,248,.14)), rgba(255,255,255,.42);
  --dropdown: rgba(255,255,255,.78);
  --glass: rgba(255,255,255,.38);
  --border: rgba(160,209,235,.56);
  --glass-border: rgba(255,255,255,.82);
  --divider: rgba(160,209,235,.5);
  --text-primary: #123047;
  --text-secondary: #53758b;
  --accent: #0284c7;
  --success: #059669;
  --danger: #dc2626;
  --warning: #d97706;
  --shadow-xs: 0 1px 2px rgba(35,86,122,.08);
  --shadow-sm: 0 14px 34px rgba(35,86,122,.12);
  --shadow-md: 0 22px 58px rgba(35,86,122,.16);
  --shadow-lg: 0 34px 86px rgba(35,86,122,.22);
  --blur: 28px;
  --material-radius: 18px;
  --material-bg: rgba(235,248,255,.62);
  --material-surface: rgba(255,255,255,.76);
  --material-border: rgba(255,255,255,.72);
  --material-border-highlight: rgba(255,255,255,.9);
  --material-shadow: 0 24px 62px rgba(35,86,122,.15);
  --material-inner-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(14,116,144,.06);
  --dock-radius: 26px;
  --material-blur: 16px;
  --material-saturate: 132%;
  --material-opacity: 1;
  --material-noise-opacity: .018;
  --material-highlight-opacity: .28;
  --material-reflection:
    linear-gradient(180deg, rgba(255,255,255,.36), transparent 42%),
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.5), transparent 30%);
  --material-edge-light: rgba(255,255,255,.88);
  --material-texture:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.34), transparent 12%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 48%, rgba(14,165,233,.08));
  --edge-highlight: rgba(255,255,255,.9);
  --edge-shadow: rgba(35,86,122,.16);
  --panel-overlay:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,250,255,.84)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.32), transparent 30%);
  --panel-hover-light: rgba(255,255,255,.46);
  --active-lift: -2px;
  --line: var(--divider);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--accent);
  --green: var(--success);
  --cyan: #06b6d4;
}

.buildos.theme-glass {
  --background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(225,243,255,.16)),
    radial-gradient(ellipse at 42% -12%, rgba(255,255,255,.8), transparent 38%),
    radial-gradient(circle at 16% 72%, rgba(147,197,253,.16), transparent 38%),
    radial-gradient(circle at 72% 14%, rgba(125,211,252,.14), transparent 36%),
    radial-gradient(circle at 90% 74%, rgba(196,181,253,.11), transparent 36%),
    var(--liquid-glass-image) center / cover no-repeat,
    linear-gradient(145deg, #dce9ff 0%, #f8fbff 42%, #dff8fb 100%);
  --background-light: rgba(255,255,255,.9);
  --surface: rgba(248,250,252,.68);
  --panel: rgba(255,255,255,.9);
  --panel-2: rgba(255,255,255,.82);
  --sidebar: linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.22) 50%, rgba(186,230,253,.16)), rgba(255,255,255,.28);
  --dock: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,255,255,.28) 44%, rgba(96,165,250,.12)), rgba(255,255,255,.34);
  --dropdown: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.3) 42%, rgba(96,165,250,.16)), rgba(255,255,255,.42);
  --glass: rgba(255,255,255,.32);
  --border: rgba(210,228,240,.54);
  --glass-border: rgba(255,255,255,.78);
  --divider: rgba(210,228,240,.52);
  --text-primary: #172033;
  --text-secondary: #64748b;
  --accent: #0ea5e9;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #eab308;
  --shadow-xs: 0 1px 2px rgba(52,78,100,.08);
  --shadow-sm: 0 14px 32px rgba(52,78,100,.12);
  --shadow-md: 0 22px 58px rgba(52,78,100,.18);
  --shadow-lg: 0 34px 88px rgba(52,78,100,.22);
  --blur: 34px;
  --material-radius: 20px;
  --material-bg: rgba(255,255,255,.34);
  --material-surface: rgba(255,255,255,.56);
  --material-border: rgba(255,255,255,.68);
  --material-border-highlight: rgba(255,255,255,.9);
  --material-shadow: 0 28px 72px rgba(52,78,100,.18);
  --material-inner-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(15,23,42,.06), inset 1px 0 0 rgba(255,255,255,.34), inset -1px 0 0 rgba(15,23,42,.035);
  --dock-radius: 26px;
  --material-blur: 8px;
  --material-saturate: 128%;
  --material-opacity: 1;
  --material-noise-opacity: .018;
  --material-highlight-opacity: .38;
  --material-reflection:
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 42%, transparent 62%),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.55), transparent 28%),
    radial-gradient(circle at 80% 100%, rgba(59,130,246,.18), transparent 36%);
  --material-edge-light: rgba(255,255,255,.86);
  --material-texture:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.4), transparent 12%),
    radial-gradient(circle at 78% 72%, rgba(59,130,246,.16), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 46%, rgba(255,255,255,.12));
  --edge-highlight: rgba(255,255,255,.92);
  --edge-shadow: rgba(75,103,124,.18);
  --panel-overlay:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,253,255,.91)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 26%),
    radial-gradient(circle at 88% 100%, rgba(96,165,250,.055), transparent 34%);
  --panel-hover-light: rgba(255,255,255,.42);
  --active-lift: -3px;
  --line: var(--divider);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--accent);
  --green: var(--success);
  --cyan: #22d3ee;
}

.buildos.sidebar-collapsed {
  --sidebar-w: 72px;
}

.buildos-sidebar {
  position: fixed;
  inset: 12px auto 12px 12px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  padding: 18px 14px 14px;
  border: 1px solid var(--material-border);
  border-radius: 20px;
  background: var(--sidebar);
  box-shadow: var(--material-shadow), inset 1px 0 0 var(--material-border-highlight);
  backdrop-filter: blur(var(--blur)) saturate(var(--material-saturate));
  transition: width var(--motion), min-width var(--motion), box-shadow var(--motion), background var(--motion);
}
.buildos-sidebar::after,
.window-dock::after,
.profile-menu::after,
.command-palette::after,
.desktop-window::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  z-index: 0;
  pointer-events: none;
  background: var(--material-reflection);
  opacity: var(--material-highlight-opacity);
}
.brand-row { display: grid; gap: 2px; margin-bottom: 16px; }
.brand-row {
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
}
.brand-row strong { font-size: 17px; letter-spacing: 0; }
.brand-row span { color: var(--muted); font-size: 11px; }
.sidebar-toggle {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--glass);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1;
}
.sidebar-collapsed .brand-row {
  grid-template-columns: 1fr;
}
.sidebar-collapsed .brand-row > div,
.sidebar-collapsed .search-box input,
.sidebar-collapsed .search-box kbd,
.sidebar-collapsed .menu-row span,
.sidebar-collapsed .menu-row em {
  display: none;
}
.sidebar-collapsed .sidebar-toggle {
  justify-self: center;
}
.sidebar-collapsed .search-box,
.sidebar-collapsed .menu-row {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 9px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 13px;
  background: var(--glass);
}
.search-box span {
  width: 11px; height: 11px; border: 1.5px solid #99a1aa; border-radius: 50%; flex: 0 0 auto;
}
.search-box span::after {
  content: ""; display: block; width: 5px; height: 1.5px; margin: 7px 0 0 7px; background: #99a1aa; transform: rotate(45deg);
}
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 12px; }
.search-box button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}
.search-box kbd { color: var(--muted); background: transparent; font-size: 10px; font-family: var(--font); }

.menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  color: var(--text-primary);
  text-align: left;
}
.menu-row span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row.active {
  color: color-mix(in srgb, var(--accent) 72%, var(--text-primary));
  background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.84));
  font-weight: 800;
}
.side-menu { display: grid; gap: 4px; overflow: auto; padding-right: 2px; }
.menu-row {
  height: 33px;
  padding: 0 10px;
  border-radius: 11px;
  background: transparent;
  transition: background var(--motion-fast), transform var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.menu-row:hover { background: var(--glass); transform: translateX(2px); box-shadow: inset 0 1px 0 var(--glass-border); }
.menu-row em { margin-left: auto; color: var(--text-secondary); font-style: normal; }
.line-icon {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: var(--text-secondary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.active .line-icon { stroke: var(--text-primary); }
.menu-row.active .line-icon { stroke: var(--accent); }

.top-actions {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 12000;
  display: flex;
  gap: 10px;
}
.top-action-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--material-border);
  border-radius: 12px;
  background: var(--glass);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--edge-highlight);
  backdrop-filter: blur(var(--blur)) saturate(var(--material-saturate));
  transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.top-action-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.top-action-button.create-action {
  color: white;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--material-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 94%, white 6%), color-mix(in srgb, var(--accent) 68%, #111827 32%));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.34);
}
.top-action-button.more-action .top-action-icon {
  width: 19px;
  height: 19px;
  stroke-width: 3.2;
}
.top-action-button:hover,
.top-action-button[aria-expanded="true"] {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-highlight);
}
.top-action-button.create-action:hover,
.top-action-button.create-action[aria-expanded="true"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, white 14%), color-mix(in srgb, var(--accent) 76%, #0f172a 24%));
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.42);
}
.top-popover {
  position: absolute;
  top: 46px;
  right: 0;
  display: grid;
  gap: 7px;
  width: 248px;
  padding: 10px;
  border: 1px solid var(--material-border);
  border-radius: 16px;
  background: var(--dropdown);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-highlight);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  animation: commandIn var(--motion-fast);
}
.top-popover h3 {
  margin: 2px 4px 4px;
  color: var(--text-primary);
  font-size: 13px;
}
.top-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.top-popover-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
}
.top-popover-close .top-action-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.top-popover-close:hover { background: var(--glass); color: var(--text-primary); }
.top-menu-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}
.top-menu-row:hover {
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--edge-highlight);
}
.top-menu-row span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 15px;
}
.top-menu-row .menu-glyph {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 70%, transparent), color-mix(in srgb, var(--glass) 72%, transparent));
  color: color-mix(in srgb, var(--accent) 72%, var(--text-primary));
  box-shadow: inset 0 1px 0 var(--edge-highlight);
}
.top-menu-row .menu-glyph .top-action-icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.85;
}
.top-menu-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.notifications-menu {
  width: min(360px, calc(100vw - 32px));
}
.notification-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass) 70%, transparent);
}
.notification-tabs button {
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
}
.notification-tabs button.active,
.notification-tabs button:hover {
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  color: var(--text-primary);
}
.notification-list {
  display: grid;
  gap: 6px;
}
.notification-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 7px 10px;
  align-items: start;
  min-height: 48px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  color: var(--text-primary);
  text-align: left;
}
.notification-row:hover {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  box-shadow: var(--shadow-xs);
}
.notification-row > span {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.notification-row.danger > span { background: var(--danger); }
.notification-row.warning > span { background: var(--warning); }
.notification-row.info > span { background: var(--accent); }
.notification-row.success > span { background: var(--success); }
.notification-row.orange > span { background: #f97316; }
.notification-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.notification-row small {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 11px;
}
.bell-icon {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1.7px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 3px 3px;
}
.bell-icon::before {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateX(-50%);
}
.bell-icon::after {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 5px;
  height: 4px;
  border-radius: 999px 999px 0 0;
  border-top: 1.7px solid currentColor;
  content: "";
  transform: translateX(-50%);
}

.sidebar-profile {
  position: relative;
  margin-top: auto;
  padding-top: 10px;
}
.profile-main {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--glass);
  color: var(--text-primary);
  text-align: left;
}
.profile-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-primary);
  font-size: 11px;
}
.profile-main span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.profile-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.profile-main small {
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.profile-main i {
  color: var(--text-secondary);
  font-style: normal;
  text-align: center;
}
.profile-menu {
  position: absolute;
  left: calc(100% + 10px);
  right: auto;
  bottom: -2px;
  z-index: 120;
  isolation: isolate;
  display: grid;
  width: 194px;
  padding: 7px;
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--material-radius) - 2px);
  background: var(--dropdown);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--blur)) saturate(145%);
}
.profile-menu > * {
  position: relative;
  z-index: 2;
}
.profile-menu button {
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font-size: 12px;
}
.profile-menu button:hover { background: var(--glass); }
.theme-section {
  display: grid;
  gap: 5px;
  padding: 8px;
  margin: 4px 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.theme-section span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}
.theme-section small {
  color: var(--text-secondary);
  font-size: 10px;
}
.theme-options {
  display: grid;
  gap: 4px;
}
.theme-options button {
  height: 28px;
}
.theme-options button.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}
.sidebar-collapsed .profile-main {
  grid-template-columns: 32px;
  justify-content: center;
}
.sidebar-collapsed .profile-main span,
.sidebar-collapsed .profile-main i {
  display: none;
}

.desktop-canvas {
  position: fixed;
  inset: 0 0 0 calc(var(--sidebar-w) + 24px);
  z-index: 1;
  overflow: hidden;
  transition: inset var(--motion);
}
.desktop-canvas::before {
  position: absolute; inset: 18px 18px calc(var(--dock-h) + 12px);
  pointer-events: none; content: "";
  border-radius: 28px;
  background:
    linear-gradient(rgba(91,118,139,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,118,139,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 88%);
}
.workspace-empty {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.desktop-canvas::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.46), transparent 24%),
    radial-gradient(circle at 76% 22%, rgba(35,196,232,.09), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 52%);
}

.floating-window,
.desktop-window {
  position: fixed;
  min-width: min(360px, calc(100vw - var(--sidebar-w) - 24px));
  min-height: min(280px, calc(100vh - var(--dock-h) - 24px));
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: var(--material-radius);
  background: var(--panel-overlay);
  box-shadow: var(--material-shadow), var(--material-inner-shadow);
  opacity: var(--material-opacity);
  backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  animation: windowIn var(--motion-fast);
  transition:
    left var(--motion),
    top var(--motion),
    width var(--motion),
    height var(--motion),
    opacity var(--motion-fast),
    box-shadow var(--motion),
    transform var(--motion),
    border-color var(--motion);
}
.floating-window.is-active,
.desktop-window.is-active {
  opacity: 1;
  border-color: var(--material-border-highlight);
  box-shadow: var(--shadow-lg), var(--material-inner-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(var(--active-lift));
}
.desktop-window:not(.is-active) {
  filter: saturate(.92);
}
.desktop-window:not(.is-active):hover {
  opacity: .94;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-highlight);
}
.desktop-window::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--edge-highlight), transparent);
  pointer-events: none;
}
.desktop-window.is-maximized {
  border-radius: calc(var(--material-radius) - 2px);
}
.floating-title,
.window-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--panel-2) 74%, transparent));
  cursor: grab;
  user-select: none;
  position: relative;
  z-index: 2;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.desktop-window.is-active .window-header {
  border-color: var(--divider);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel-2) 84%, transparent));
}
.floating-title:active,
.window-header:active { cursor: grabbing; }
.floating-title strong,
.window-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.traffic-lights,
.traffic-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  min-width: 54px;
  height: 100%;
  padding: 0 3px 0 1px;
  cursor: default;
}
.traffic-lights button,
.traffic-buttons button {
  display: block;
  width: 11px;
  height: 11px;
  min-width: 11px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  pointer-events: auto;
}
.traffic-lights .close-light,
.traffic-buttons .traffic-close { background: #ff625c; }
.traffic-lights .min-light,
.traffic-buttons .traffic-minimize { background: #e5c84f; }
.traffic-lights .max-light,
.traffic-buttons .traffic-maximize { background: #2ac64d; }
.floating-body,
.window-content {
  position: relative;
  z-index: 1;
  height: calc(100% - 44px);
  overflow: auto;
  background: color-mix(in srgb, var(--panel) 56%, transparent);
  scrollbar-width: thin;
  scrollbar-color: rgba(151,164,176,.5) transparent;
}
body.is-window-dragging .desktop-window,
body.is-window-resizing .desktop-window {
  transition: opacity var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}
body.is-window-dragging,
body.is-window-dragging * {
  cursor: grabbing !important;
}
body.is-window-resizing,
body.is-window-resizing * {
  cursor: nwse-resize !important;
}

.resize-zone,
.window-resize-handle {
  position: absolute;
  z-index: 6;
  padding: 0;
  border: 0;
  background: transparent;
}
.window-resize-handle.right { top: 12px; right: -4px; bottom: 12px; width: 10px; cursor: ew-resize; }
.window-resize-handle.bottom { bottom: -4px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.window-resize-handle.bottom-right { right: -4px; bottom: -4px; width: 18px; height: 18px; cursor: nwse-resize; }
.window-resize-handle.left { top: 12px; left: -4px; bottom: 12px; width: 10px; cursor: ew-resize; }
.window-resize-handle.top { top: -4px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.window-resize-handle.top-left { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.window-resize-handle.top-right { top: -4px; right: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.window-resize-handle.bottom-left { left: -4px; bottom: -4px; width: 18px; height: 18px; cursor: nesw-resize; }
.rz-n { top: -4px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.rz-s { bottom: -4px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.rz-e { top: 12px; right: -4px; bottom: 12px; width: 10px; cursor: ew-resize; }
.rz-w { top: 12px; left: -4px; bottom: 12px; width: 10px; cursor: ew-resize; }
.rz-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: nesw-resize; }
.rz-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.rz-se { right: -4px; bottom: -4px; width: 18px; height: 18px; cursor: nwse-resize; }
.rz-sw { left: -4px; bottom: -4px; width: 18px; height: 18px; cursor: nesw-resize; }
.resize-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 7;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(90,105,118,.2) 46% 52%, transparent 53%),
    linear-gradient(135deg, transparent 0 62%, rgba(90,105,118,.26) 63% 69%, transparent 70%),
    var(--glass);
  cursor: nwse-resize;
  box-shadow: 0 8px 20px rgba(75,92,105,.12);
  opacity: .78;
  transition: opacity var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.desktop-window:hover .resize-handle,
.desktop-window.is-active .resize-handle {
  opacity: 1;
}
.resize-handle:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(75,92,105,.18);
}

.snap-preview {
  position: fixed;
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--material-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass) 88%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-sm);
  backdrop-filter: blur(var(--blur)) saturate(135%);
  animation: snapIn var(--motion-fast);
  pointer-events: none;
}
.snap-left { left: calc(var(--sidebar-w) + 12px); top: 12px; width: calc((100vw - var(--sidebar-w)) / 2 - 18px); height: calc(100vh - var(--dock-h) - 24px); }
.snap-right { right: 12px; top: 12px; width: calc((100vw - var(--sidebar-w)) / 2 - 18px); height: calc(100vh - var(--dock-h) - 24px); }
.snap-top { left: calc(var(--sidebar-w) + 12px); right: 12px; top: 12px; height: calc(100vh - var(--dock-h) - 24px); }
.snap-tl { left: calc(var(--sidebar-w) + 12px); top: 12px; width: calc((100vw - var(--sidebar-w)) / 2 - 18px); height: calc((100vh - var(--dock-h)) / 2 - 18px); }
.snap-tr { right: 12px; top: 12px; width: calc((100vw - var(--sidebar-w)) / 2 - 18px); height: calc((100vh - var(--dock-h)) / 2 - 18px); }
.snap-bl { left: calc(var(--sidebar-w) + 12px); top: calc((100vh - var(--dock-h)) / 2 + 6px); width: calc((100vw - var(--sidebar-w)) / 2 - 18px); height: calc((100vh - var(--dock-h)) / 2 - 18px); }
.snap-br { right: 12px; top: calc((100vh - var(--dock-h)) / 2 + 6px); width: calc((100vw - var(--sidebar-w)) / 2 - 18px); height: calc((100vh - var(--dock-h)) / 2 - 18px); }

.dock-zone {
  position: fixed;
  left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
  bottom: 0;
  z-index: 10000;
  width: min(74vw, 980px);
  height: 118px;
  pointer-events: auto;
  transform: translateX(-50%);
}
.dock-trigger {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 78px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 46%, var(--edge-highlight)), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: .76;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.dock-zone:hover .dock-trigger,
.dock-zone:focus-within .dock-trigger {
  opacity: 1;
  transform: translateX(-50%) translateY(2px) scaleX(1.18);
}
.window-dock {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--material-border);
  border-radius: var(--dock-radius);
  background: var(--dock);
  box-shadow: var(--material-shadow), var(--material-inner-shadow);
  backdrop-filter: blur(var(--blur)) saturate(145%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px) scale(.975);
  transition:
    opacity var(--motion-fast) 520ms,
    transform var(--motion-fast) 520ms,
    background var(--motion),
    box-shadow var(--motion);
}
.dock-zone:hover .window-dock,
.dock-zone:focus-within .window-dock {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0ms;
}
.window-dock button {
  max-width: 170px;
  height: 34px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass);
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast), opacity var(--motion-fast);
}
.window-dock button.active,
.window-dock button:hover {
  color: #071018;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.window-dock button.minimized { opacity: .7; }
.window-dock .arrange-button {
  max-width: none;
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-weight: 800;
}
.window-dock .clear-button {
  width: 34px;
  padding: 0;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
}
.buildos.theme-classic .window-dock:hover {
  box-shadow: 0 20px 48px rgba(75,92,105,.18), inset 0 1px 0 rgba(255,255,255,.78);
}
.buildos.theme-dark .window-dock:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(203,213,225,.12), 0 0 0 1px rgba(96,165,250,.12);
}
.buildos.theme-dark .window-dock button.active,
.buildos.theme-dark .window-dock button:hover {
  color: #f8fafc;
  border-color: rgba(96,165,250,.58);
  background:
    linear-gradient(180deg, rgba(59,130,246,.32), rgba(37,99,235,.22)),
    rgba(15,23,42,.86);
  box-shadow: 0 12px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(147,197,253,.18);
}
.buildos.theme-glass .window-dock {
  overflow: hidden;
}
.buildos.theme-glass .window-dock::after {
  background:
    linear-gradient(120deg, transparent 14%, rgba(255,255,255,.42) 38%, transparent 62%),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.55), transparent 32%);
  opacity: .26;
  transform: translateX(-34%);
  transition: opacity var(--motion), transform 520ms ease-out;
}
.buildos.theme-glass .dock-zone:hover .window-dock::after {
  opacity: .58;
  transform: translateX(34%);
}

.command-layer {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  background: color-mix(in srgb, var(--surface) 28%, transparent);
  backdrop-filter: blur(10px);
}
.command-palette {
  width: min(620px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--dropdown);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--blur)) saturate(145%);
  animation: commandIn var(--motion-fast);
}
.command-palette input {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  outline: 0;
  background: color-mix(in srgb, var(--glass) 72%, transparent);
  color: var(--text-primary);
  font-size: 15px;
}
.command-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
  padding: 8px;
}
.command-list button {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}
.command-list button:hover { background: var(--glass); }
.command-list strong { font-size: 13px; }
.command-list span { color: var(--text-secondary); font-size: 11px; }
.buildos.theme-dark .command-list button,
.buildos.theme-dark .command-list strong {
  color: #dbeafe;
}
.buildos.theme-dark .command-list span {
  color: #a9b4c3;
}

.settings-layer {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--surface) 32%, transparent);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  animation: commandIn var(--motion-fast);
}
.settings-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: 20px;
  background: var(--dropdown);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-highlight);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
}
.settings-header,
.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.settings-header span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.settings-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}
.settings-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 11px;
  background: var(--glass);
  color: var(--text-primary);
}
.settings-close:hover { background: color-mix(in srgb, var(--panel) 78%, transparent); }
.settings-close .top-action-icon {
  width: 16px;
  height: 16px;
}
.settings-body {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  min-height: 0;
}
.settings-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px;
  border-right: 1px solid var(--divider);
  background: color-mix(in srgb, var(--glass) 56%, transparent);
}
.settings-tabs button {
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.settings-tabs button.active,
.settings-tabs button:hover {
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: var(--text-primary);
}
.settings-content {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: auto;
  padding: 16px;
}
.settings-block {
  display: grid;
  gap: 12px;
}
.settings-block h3 {
  margin: 0;
  font-size: 14px;
}
.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.settings-theme {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 82px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 56%, transparent);
  color: var(--text-primary);
  text-align: left;
}
.settings-theme.active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-xs);
}
.settings-theme:hover { background: color-mix(in srgb, var(--panel) 76%, transparent); }
.theme-swatch {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.42);
}
.theme-swatch-classic { background: linear-gradient(135deg, #f8fafc, #dbeafe 48%, #e5e7eb); }
.theme-swatch-dark { background: linear-gradient(135deg, #07111f, #1e3a8a 48%, #111827); }
.theme-swatch-glass { background: linear-gradient(135deg, rgba(255,255,255,.9), #bae6fd 48%, #c4b5fd); }
.theme-swatch-sky {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.1)),
    var(--blue-sky-image) center 58% / cover no-repeat;
}
.settings-check-row,
.settings-switch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 50%, transparent);
}
.settings-check-row {
  grid-template-columns: auto minmax(0, 1fr);
}
.settings-check-row span,
.settings-switch-row span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.settings-check-row strong,
.settings-switch-row strong {
  font-size: 13px;
}
.settings-check-row small,
.settings-switch-row small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}
.settings-check-row input,
.settings-switch-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.settings-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--divider);
  border-bottom: 0;
}
.settings-primary,
.settings-secondary {
  height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  font-weight: 800;
}
.settings-secondary {
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-primary);
}
.settings-primary {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, white 4%), color-mix(in srgb, var(--accent) 68%, #111827 32%));
  color: white;
}

.profile-layer {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--surface) 32%, transparent);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  animation: commandIn var(--motion-fast);
}
.profile-modal {
  width: min(560px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: 20px;
  background: var(--dropdown);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-highlight);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
}
.profile-modal-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.profile-modal-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--panel) 82%, transparent));
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
}
.profile-modal-header span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.profile-modal-header h2 {
  margin: 0;
  overflow: hidden;
  font-size: 22px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-modal-header small {
  color: var(--text-secondary);
}
.profile-modal-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 11px;
  background: var(--glass);
  color: var(--text-primary);
}
.profile-modal-close:hover { background: color-mix(in srgb, var(--panel) 78%, transparent); }
.profile-modal-close .top-action-icon {
  width: 16px;
  height: 16px;
}
.profile-modal-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.profile-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.profile-summary article {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 54%, transparent);
}
.profile-summary strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}
.profile-summary span {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 11px;
}
.profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.profile-fields span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}
.profile-fields input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 11px;
  outline: 0;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  color: var(--text-primary);
}
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-actions button,
.profile-modal-footer button {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--glass);
  color: var(--text-primary);
  font-weight: 800;
}
.profile-actions button:hover,
.profile-modal-footer button:hover {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}
.profile-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 16px;
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}

.ai-layer {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--surface) 32%, transparent);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  animation: commandIn var(--motion-fast);
}
.ai-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(640px, calc(100vw - 32px));
  height: min(680px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid var(--material-border);
  border-radius: 20px;
  background: var(--dropdown);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-highlight);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
}
.ai-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.ai-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--panel) 82%, transparent));
  color: var(--text-primary);
}
.ai-avatar .top-action-icon {
  width: 22px;
  height: 22px;
}
.ai-header span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.ai-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}
.ai-header small {
  color: var(--text-secondary);
}
.ai-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 11px;
  background: var(--glass);
  color: var(--text-primary);
}
.ai-close:hover { background: color-mix(in srgb, var(--panel) 78%, transparent); }
.ai-close .top-action-icon {
  width: 16px;
  height: 16px;
}
.ai-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px;
}
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-suggestions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 56%, transparent);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}
.ai-suggestions button:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.ai-chat {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 2px;
}
.ai-message {
  display: grid;
  gap: 4px;
  max-width: 82%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 58%, transparent);
}
.ai-message.user {
  justify-self: end;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.ai-message span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.ai-message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.ai-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}
.ai-compose input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 12px;
  outline: 0;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  color: var(--text-primary);
}
.ai-compose button {
  height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, white 4%), color-mix(in srgb, var(--accent) 68%, #111827 32%));
  color: white;
  font-weight: 900;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.metric-row article { min-width: 0; }
.metric-row article {
  padding: 2px 0;
  transition: transform var(--motion-fast), color var(--motion-fast);
}
.metric-row article:hover { transform: translateY(-1px); }
.metric-row span { display: block; margin-bottom: 4px; color: var(--text-secondary); font-size: 10px; }
.safe-number {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: baseline;
  gap: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text-primary);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.05;
}
.safe-number small { flex-shrink: 1; min-width: 0; font-size: clamp(9px, .9vw, 11px); font-weight: 600; }
.metric-row b { display: inline-flex; margin-top: 5px; padding: 2px 4px; color: var(--panel); border-radius: 4px; background: var(--text-primary); font-size: 8px; }

.payment-card { padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
.chart-heading { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 10px; align-items: start; padding-top: 14px; }
.chart-heading h2 { margin: 0 0 10px; font-size: 13px; }
.chart-heading small, .mini-chart-card small { color: var(--text-secondary); font-size: 9px; }
.legend { display: flex; flex-wrap: wrap; gap: 15px; padding-top: 20px; font-size: 9px; }
.legend span::before { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; content: ""; }
.legend .pink::before { background: var(--pink); }
.legend .green::before { background: var(--green); }
.legend .blue::before { background: var(--blue); }
.range-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 7px; font-size: 9px; }
.range-tabs button { height: 23px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #858d96; transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); }
.range-tabs button:hover { background: rgba(241,244,247,.85); color: #3f4851; }
.range-tabs .active { color: #242a31; background: #f1f2f4; font-weight: 800; }
.line-chart { position: relative; height: 212px; }
.line-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grid-lines path { fill: none; stroke: var(--divider); stroke-width: 1; }
.area { fill: url(#profitFill); }
.pink-line, .green-line, .blue-line { fill: none; stroke-width: 1.7; }
.pink-line { stroke: var(--pink); }
.green-line { stroke: var(--green); }
.blue-line { stroke: var(--blue); }
.pink-line.soft { opacity: .55; }
.hover-line { stroke: #bfc7cf; stroke-width: 1; }
.hover-dot.green { fill: var(--green); stroke: #fff; stroke-width: 2; }
.chart-tooltip { position: absolute; top: 57px; width: 140px; padding: 10px; border: 1px solid #dfe4e9; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 12px 28px rgba(57,70,84,.12); font-size: 9px; pointer-events: none; }
.chart-tooltip strong { display: block; margin-bottom: 8px; }
.chart-tooltip dl, .chart-tooltip div { margin: 0; }
.chart-tooltip div { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }
.chart-tooltip dt, .chart-tooltip dd { margin: 0; }

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  min-height: 202px;
}
.mini-chart-card {
  min-width: 0;
  padding: 17px 18px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: background .18s ease, box-shadow .18s ease;
}
.mini-chart-card:hover { background: rgba(249,251,253,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transform: translateY(-1px); }
.mini-chart-card header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.mini-chart-card h3 { margin: 0; font-size: 12px; }
.interactive-card header span { color: var(--blue); font-size: 9px; }
.mini-chart-card svg { display: block; width: 100%; height: 126px; overflow: visible; }
.scatter { fill: #9fa8b2; opacity: .7; }
.bars rect { fill: #5e91d8; }
.band { fill: #edf0f3; stroke: #cfd5db; }
.expense-list { display: grid; gap: 9px; margin-top: 13px; }
.expense-list div { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(72px, 1.3fr) 26px; gap: 8px; align-items: center; min-width: 0; }
.expense-list span, .expense-list b { color: #7d8790; font-size: 9px; font-weight: 500; }
.expense-list b { text-align: right; }
.expense-list i { position: relative; height: 5px; overflow: hidden; border-radius: 999px; background: #edf0f3; }
.expense-list i::before, .expense-list i::after { position: absolute; top: 0; left: 0; height: 100%; border-radius: inherit; content: ""; }
.expense-list i::before { width: var(--blue); background: #5b8fd8; }
.expense-list i::after { left: var(--blue); width: var(--extra); background: var(--pink); }

.section-screen { padding: 14px; }
.section-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: end; justify-content: space-between; margin-bottom: 10px; }
.section-head h2 { margin: 0; font-size: clamp(16px, 1.7vw, 20px); font-weight: 600; }
.section-head p { margin: 0; color: var(--muted); font-size: 12px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.table-actions button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; }
.table-actions button:disabled { opacity: .45; cursor: default; }
.table-actions button:hover { color: var(--text-primary); background: var(--surface); }
.table-filter { width: 128px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); color: var(--text-primary); font-size: 11px; outline: 0; }
.table-import { position: relative; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; }
.table-import input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.table-save-status { color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.table-save-status.saved { color: var(--green); }
.table-role-badge { border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: var(--text-secondary); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.table-history { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.table-history span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--text-secondary); font-size: 10px; }
.table-presence { margin: -2px 0 10px; color: var(--text-secondary); font-size: 11px; }
.table-presence.conflict { color: var(--red); font-weight: 800; }
.data-table { overflow: auto; max-height: min(58vh, 620px); border: 1px solid var(--divider); border-radius: 12px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
.table-row { display: grid; grid-template-columns: var(--table-template, repeat(4, minmax(112px, 1fr))); gap: 10px; min-width: max-content; padding: 8px 12px; border-bottom: 1px solid var(--line); transition: background var(--motion-fast); }
.table-row:not(.table-head):hover { background: color-mix(in srgb, var(--surface) 74%, transparent); }
.table-row:last-child { border-bottom: 0; }
.table-head { position: sticky; top: 0; z-index: 3; color: var(--text-secondary); background: color-mix(in srgb, var(--surface) 96%, transparent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.table-head-cell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(74px, .5fr) 24px; gap: 4px; align-items: center; min-width: 0; }
.table-head-cell:first-child, .table-cell-editor:first-child { position: sticky; left: 0; z-index: 2; background: color-mix(in srgb, var(--panel) 96%, transparent); }
.table-head-cell:first-child { z-index: 4; background: color-mix(in srgb, var(--surface) 98%, transparent); }
.table-head-cell button { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-secondary); cursor: pointer; }
.table-head-cell button:hover { color: var(--blue); }
.table-head input, .table-head select { width: 100%; min-width: 0; border: 0; border-radius: 6px; padding: 3px 6px; background: transparent; color: inherit; font: inherit; text-transform: uppercase; outline: 0; }
.table-head input:focus, .table-head select:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--blue); color: var(--text-primary); }
.table-row span { min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; font-size: 11px; line-height: 1.2; }
.editable-table-row { position: relative; padding: 0; gap: 0; }
.table-cell-editor { display: grid; min-width: 0; border-right: 1px solid var(--line); transition: background var(--motion-fast), box-shadow var(--motion-fast); }
.table-cell-editor:last-child { border-right: 0; }
.table-cell-editor span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-cell-box { position: relative; min-width: 0; }
.table-cell-box.selected { background: color-mix(in srgb, var(--blue) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 70%, transparent); }
.table-cell-box.invalid { box-shadow: inset 0 0 0 1px var(--red); }
.table-cell-box.condition-good { background: color-mix(in srgb, var(--green) 12%, transparent); }
.table-cell-box.condition-warn { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.table-cell-box.condition-bad { background: color-mix(in srgb, var(--red) 10%, transparent); }
.table-cell-editor input, .table-cell-editor select, .table-cell-editor textarea { width: 100%; min-width: 0; border: 0; border-radius: 0; padding: 9px 12px; background: transparent; color: var(--text-primary); font: inherit; font-size: 11px; line-height: 1.2; outline: 0; }
.table-cell-editor input:disabled, .table-cell-editor select:disabled, .table-cell-editor textarea:disabled, .table-head input:disabled, .table-head select:disabled, .table-head-cell button:disabled { opacity: .64; cursor: not-allowed; }
.table-cell-editor textarea { min-height: 32px; resize: vertical; overflow: hidden; }
.table-cell-editor select { cursor: pointer; }
.table-cell-editor.row-active, .table-cell-editor.col-active { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.table-cell-editor.active { box-shadow: inset 0 0 0 1px var(--blue); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.table-cell-editor input:focus, .table-cell-editor select:focus, .table-cell-editor textarea:focus { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.column-resizer { position: absolute; top: 0; right: -6px; width: 10px; height: 100%; cursor: col-resize; }
.column-resizer::after { position: absolute; top: 20%; bottom: 20%; left: 4px; width: 2px; border-radius: 99px; background: color-mix(in srgb, var(--blue) 45%, transparent); content: ""; opacity: 0; }
.table-head-cell:hover .column-resizer::after { opacity: 1; }
.table-delete-row, .table-add-column { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-secondary); cursor: pointer; font-weight: 800; transition: opacity var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); }
.table-delete-row { position: absolute; top: 50%; right: 6px; width: 22px; height: 22px; opacity: 0; transform: translateY(-50%) scale(.94); }
.editable-table-row:hover .table-delete-row, .table-delete-row:focus { opacity: 1; transform: translateY(-50%) scale(1); }
.table-delete-row:hover { color: var(--red); }
.table-add-column { position: absolute; top: 50%; right: 7px; width: 22px; height: 22px; transform: translateY(-50%); }
.table-add-column:hover { color: var(--blue); }
.formula-result { display: block; padding: 0 12px 7px; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 800; }
.table-add-row { display: grid; place-items: center; width: 100%; min-height: 34px; border: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 74%, transparent); color: var(--text-secondary); font-size: 18px; font-weight: 700; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.table-add-row:hover { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); }
.table-virtual-note { padding: 9px 12px; border-top: 1px solid var(--line); color: var(--text-secondary); font-size: 11px; }
.table-context-menu { position: fixed; z-index: 80; display: grid; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 18px 45px rgba(17,24,39,.2); }
.table-context-menu button { border: 0; border-radius: 7px; padding: 8px 9px; background: transparent; color: var(--text-primary); text-align: left; font-size: 11px; cursor: pointer; }
.table-context-menu button:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.crm-data-table .crm-row { align-items: center; }
.crm-data-table .crm-object-row { grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1.25fr) minmax(140px, 1fr) minmax(130px, .9fr) minmax(100px, .7fr) minmax(120px, .75fr) minmax(190px, auto); min-width: 980px; }
.crm-data-table .crm-user-row { grid-template-columns: minmax(180px, 1.25fr) minmax(120px, .8fr) minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(120px, .8fr) minmax(90px, .6fr) minmax(170px, auto); min-width: 1210px; }
.crm-data-table .crm-role-row { grid-template-columns: minmax(160px, 1fr) minmax(150px, .8fr) minmax(100px, .55fr) minmax(320px, 2fr); min-width: 760px; }
.crm-data-table .crm-role-row:not(.table-head) { align-items: start; }
.crm-data-table .crm-role-row.is-clickable { cursor: pointer; }
.crm-data-table .crm-role-row.is-clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; background: color-mix(in srgb, var(--blue) 9%, transparent); }
.crm-data-table .crm-head-cell { display: block; min-width: 0; }
.role-permissions { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.role-permissions em { display: block; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-secondary); font-style: normal; white-space: normal; overflow-wrap: anywhere; }
.role-permissions strong { color: var(--text-primary); }
.crm-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.crm-row-actions button, .crm-link { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text-secondary); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.crm-row-actions button:hover, .crm-link:hover { color: var(--text-primary); background: var(--surface); }
.crm-row-actions .danger { color: var(--red); }
.crm-edit-modal { width: min(760px, calc(100% - 24px)); }
.crm-role-modal { grid-template-rows: auto auto auto minmax(130px, 1fr) auto; width: min(880px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: hidden; }
.crm-checkbox { align-content: end; justify-items: start; }
.crm-checkbox input { width: 14px !important; height: 14px !important; min-height: 0; padding: 0; accent-color: var(--blue); }
.kanban-modal label small { color: var(--text-secondary); font-size: 10px; font-weight: 500; line-height: 1.35; }
.crm-password-note { align-self: end; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.temporary-password-box { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 84%, transparent); }
.temporary-password-box > span { color: var(--text-secondary); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.temporary-password-box > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.temporary-password-box input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; letter-spacing: 0; }
.temporary-password-box button { border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: var(--surface); color: var(--text-primary); font-size: 11px; font-weight: 800; }
.temporary-password-box p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.temporary-password-page { display: grid; gap: 18px; max-width: 680px; margin: 32px auto; }
.temporary-password-page header h1 { margin: 0; font-size: 24px; }
.temporary-password-page header p { margin: 5px 0 0; color: var(--text-secondary); }
.temporary-password-page .temporary-password-box { padding: 18px; }
.temporary-password-page .temporary-password-box input { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; }
.temporary-password-page .temporary-password-box button { min-height: 40px; }
.role-system-checkbox { grid-template-columns: auto 16px; align-items: center; justify-content: start; }
.role-permission-editor { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; min-height: 0; }
.role-permission-editor h4 { margin: 0; color: var(--text-primary); font-size: 12px; }
.role-permission-table { min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.role-permission-row { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(96px, .55fr)); min-width: 560px; border-bottom: 1px solid var(--line); }
.role-permission-row:last-child { border-bottom: 0; }
.role-permission-row > strong { display: flex; align-items: center; min-width: 0; padding: 8px 10px; color: var(--text-primary); font-size: 11px; overflow-wrap: anywhere; }
.role-permission-row > label { display: grid; place-items: center; min-width: 0; border-left: 1px solid var(--line); cursor: pointer; }
.role-permission-row > label span { display: none; }
.kanban-modal .role-permission-row input { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--blue); }
.role-permission-head { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--surface) 98%, transparent); }
.role-permission-head > strong:not(:first-child) { justify-content: center; border-left: 1px solid var(--line); color: var(--text-secondary); font-size: 10px; text-align: center; }
.object-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.object-detail-grid article { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.object-detail-grid span { display: block; margin-bottom: 4px; color: var(--text-secondary); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.object-detail-grid strong { display: block; color: var(--text-primary); font-size: 12px; }
.object-detail-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.object-detail-columns section { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--panel) 76%, transparent); }
.object-detail-columns h3 { margin: 0 0 8px; font-size: 13px; }
.object-detail-columns ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.object-detail-columns li { color: var(--text-secondary); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.progress-cell { color: var(--blue); font-weight: 800; }
.gantt { display: grid; gap: 9px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(90deg, transparent 0 19%, rgba(232,235,239,.8) 20%, transparent 21% 39%, rgba(232,235,239,.8) 40%, transparent 41% 59%, rgba(232,235,239,.8) 60%, transparent 61% 79%, rgba(232,235,239,.8) 80%, transparent 81%); }
.gantt-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; }
.gantt-row span { font-size: 11px; }
.gantt-row i { display: block; width: var(--width); height: 13px; margin-left: var(--start); border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }

.kanban-screen {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  position: relative;
  height: 100%;
  min-height: 0;
}
.kanban-head {
  align-items: center;
}
.kanban-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.kanban-summary span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
}
.kanban-summary strong {
  color: var(--text-primary);
}
.kanban-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.kanban-toolbar label {
  display: grid;
  gap: 5px;
  width: min(220px, 32%);
  min-width: 0;
  max-width: 240px;
}
.kanban-toolbar label span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}
.kanban-toolbar select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}
.kanban-add-column {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.kanban-add-column:hover {
  border-color: color-mix(in srgb, var(--success) 58%, var(--line));
  background: color-mix(in srgb, var(--success) 16%, var(--panel));
  transform: translateY(-1px);
}
.kanban-column-management-toggle {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-column-management-toggle.active {
  border-color: color-mix(in srgb, var(--info) 55%, var(--line));
  background: color-mix(in srgb, var(--info) 14%, var(--panel));
}
.kanban-ai-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(14, 116, 144, .08);
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.kanban-ai-toggle:hover,
.kanban-ai-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  transform: translateY(-1px);
}
.kanban-ai-popover {
  position: absolute;
  top: 86px;
  right: 14px;
  z-index: 20;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100% - 28px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, white 6%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
  backdrop-filter: blur(18px);
}
.kanban-ai-popover header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.kanban-ai-popover header div {
  display: grid;
  gap: 2px;
}
.kanban-ai-popover strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}
.kanban-ai-popover header span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
}
.kanban-ai-popover header button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
}
.kanban-ai-thread {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}
.kanban-ai-message {
  display: grid;
  gap: 4px;
  max-width: 88%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.kanban-ai-message.user {
  justify-self: end;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.kanban-ai-message b {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.kanban-ai-message p {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.35;
}
.kanban-ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kanban-ai-suggestions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-ai-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.kanban-ai-compose input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}
.kanban-ai-compose input:focus {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
}
.kanban-ai-compose button {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--text-primary);
  color: var(--panel);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.kanban-workload {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 2px;
}
.kanban-workload span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.kanban-workload span.overloaded {
  border-color: rgba(245,158,11,.34);
  background: rgba(245,158,11,.12);
  color: #b45309;
}
.kanban-workload b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text-primary);
  font-size: 9px;
}
.kanban-board {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
}
.kanban-column {
  --column-accent: var(--accent);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 64%, transparent);
  transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.kanban-column.drag-over {
  border-color: color-mix(in srgb, var(--column-accent) 54%, var(--line));
  background: color-mix(in srgb, var(--column-accent) 10%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--column-accent) 22%, transparent);
}
.kanban-column.warning { --column-accent: var(--warning); }
.kanban-column.success { --column-accent: var(--success); }
.kanban-column.purple { --column-accent: #8b5cf6; }
.kanban-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
}
.kanban-column header > div:first-child {
  min-width: 0;
}
.kanban-column h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-column small {
  color: var(--text-secondary);
  font-size: 10px;
}
.kanban-column-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
.kanban-column header button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--column-accent) 34%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--column-accent) 12%, transparent);
  color: var(--text-primary);
  font-weight: 850;
}
.kanban-column header button:disabled {
  opacity: .38;
  cursor: default;
}
.kanban-column header button.danger {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}
.kanban-confirm-modal {
  max-width: 430px;
}
.kanban-confirm-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.kanban-modal footer button.danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: var(--danger);
  color: #fff;
}
.kanban-task-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}
.kanban-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-left: 3px solid var(--column-accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: var(--shadow-xs);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
  cursor: grab;
}
.kanban-card:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: var(--shadow-sm);
}
.kanban-card.is-dragging {
  cursor: grabbing;
  opacity: .48;
  transform: scale(.985);
}
.kanban-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.due-pill {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.due-pill.today {
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
}
.due-pill.hot {
  background: rgba(239,68,68,.13);
  color: #b91c1c;
}
.due-pill.done {
  background: rgba(16,185,129,.13);
  color: #047857;
}
.priority-pill {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  min-width: 30px;
  padding: 0 6px;
  gap: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--priority-color) 60%, var(--line));
  background: color-mix(in srgb, var(--priority-color) 16%, var(--panel));
  color: color-mix(in srgb, var(--priority-color) 78%, #202020);
  letter-spacing: 0;
}
.priority-icon {
  display: block;
  width: 11px;
  height: 8px;
  flex: 0 0 8px;
  color: inherit;
}
.priority-icon + .priority-icon {
  margin-top: -4px;
}
.blocker-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(239,68,68,.34);
  border-radius: 999px;
  background: rgba(239,68,68,.11);
  color: #dc2626;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.kanban-card-labels,
.kanban-tag-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.kanban-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 150px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.25;
}
.kanban-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
}
.kanban-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
}
.kanban-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--column-accent), color-mix(in srgb, var(--column-accent) 66%, white));
}
.kanban-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.employee-badge {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.employee-badge b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--column-accent) 16%, var(--panel));
  color: var(--text-primary);
  font-size: 10px;
}
.employee-badge span {
  display: grid;
  min-width: 0;
}
.employee-badge strong,
.employee-badge small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-badge strong {
  color: var(--text-primary);
  font-size: 11px;
}
.employee-badge small {
  color: var(--text-secondary);
  font-size: 9px;
}
.kanban-card footer button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
}
.kanban-card footer button:hover {
  background: color-mix(in srgb, var(--column-accent) 10%, transparent);
  color: var(--text-primary);
}
.kanban-modal-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.kanban-modal {
  display: grid;
  gap: 13px;
  width: min(440px, 100%);
  padding: 16px;
  border: 1px solid var(--material-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-highlight);
}
.kanban-modal header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.kanban-modal h3,
.kanban-modal p {
  margin: 0;
}
.kanban-modal h3 {
  color: var(--text-primary);
  font-size: 16px;
}
.kanban-modal p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}
.kanban-modal header button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
}
.kanban-modal header button:hover {
  background: var(--glass);
  color: var(--text-primary);
}
.kanban-modal label {
  display: grid;
  gap: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}
.kanban-modal input,
.kanban-modal select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  color: var(--text-primary);
  font: inherit;
}
.kanban-modal input[type="range"] {
  padding: 0;
  box-shadow: none;
  accent-color: var(--accent);
}
.kanban-modal input:focus,
.kanban-modal select:focus {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.kanban-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr);
  gap: 10px;
}
.kanban-modal footer {
  display: flex;
  justify-content: end;
  gap: 8px;
  margin-top: 2px;
}
.kanban-modal footer button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 800;
}
.kanban-modal footer button.primary {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-primary);
}
.kanban-modal footer button.danger {
  margin-right: auto;
  border-color: rgba(239,68,68,.32);
  background: rgba(239,68,68,.1);
  color: #b91c1c;
}
.kanban-modal footer button:hover {
  background: var(--glass);
  color: var(--text-primary);
}
.kanban-modal button:disabled { opacity: .55; cursor: default; }
.kanban-board-modal { width: min(430px, calc(100% - 24px)); }
.kanban-board-error { color: var(--danger) !important; font-size: 11px !important; }
.kanban-card-window {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  color: var(--text-primary);
}
.kanban-card-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--line);
}
.kanban-card-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-card-tabs button.active {
  border-bottom-color: var(--accent);
  color: var(--text-primary);
}
.kanban-card-editor {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}
.kanban-card-editor > label,
.kanban-card-editor .kanban-modal-grid > label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
}
.kanban-card-editor input:not([type="checkbox"]):not([type="range"]),
.kanban-card-editor select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
}
.kanban-card-editor footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.kanban-card-editor footer button,
.kanban-history header button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.kanban-card-editor footer button.primary { margin-left: auto; background: var(--accent); color: #fff; }
.kanban-card-editor footer button.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); }
.kanban-card-save-status { color: var(--success); font-size: 11px; }
.kanban-tag-editor {
  display: grid;
  gap: 7px;
}
.kanban-tag-editor > span { font-size: 12px; font-weight: 750; }
.kanban-tag-list .kanban-tag { gap: 4px; padding-right: 3px; }
.kanban-tag-list .kanban-tag button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.kanban-tag-picker-open {
  justify-self: start;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-tag-error { color: var(--danger); font-size: 10px; }
.kanban-tag-picker-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, .42);
}
.kanban-tag-picker {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(440px, 100%);
  max-height: min(520px, calc(100% - 16px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .24);
}
.kanban-tag-picker > header,
.kanban-tag-picker > footer,
.kanban-tag-picker-create,
.kanban-tag-option {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-tag-picker > header { justify-content: space-between; }
.kanban-tag-picker > header button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.kanban-tag-picker-create input {
  min-width: 0;
  min-height: 38px;
  flex: 1;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
}
.kanban-tag-picker-create button,
.kanban-tag-picker > footer button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.kanban-tag-picker-create button:disabled { opacity: .5; cursor: default; }
.kanban-tag-picker-options {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 80px;
  overflow: auto;
}
.kanban-tag-option {
  justify-content: space-between;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kanban-tag-option:hover { background: var(--glass); }
.kanban-tag-option.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.kanban-tag-option-state { color: var(--text-secondary); font-size: 11px; font-weight: 750; }
.kanban-tag-option.selected .kanban-tag-option-state { color: var(--accent); }
.kanban-tag-picker-empty { margin: auto; color: var(--text-secondary); font-size: 12px; }
.kanban-tag-picker > footer { justify-content: flex-end; }
.kanban-card-close-layer {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(15, 23, 42, .46);
}
.kanban-card-close-dialog {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .26);
}
.kanban-card-close-dialog > header,
.kanban-card-close-dialog > footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-card-close-dialog > header { justify-content: space-between; }
.kanban-card-close-dialog > header button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.kanban-card-close-dialog > p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.kanban-card-close-dialog > footer { justify-content: flex-end; flex-wrap: wrap; }
.kanban-card-close-dialog > footer button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-card-close-dialog > footer button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.kanban-card-close-dialog > footer button.danger { margin-right: auto; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); }
.kanban-blockers {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.kanban-blockers > header,
.kanban-linked-card,
.kanban-blocker-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kanban-blockers > header button,
.kanban-linked-card button,
.kanban-blocker-add button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-blocker-group { display: grid; gap: 6px; }
.kanban-blocker-group h4 { margin: 0; color: var(--text-secondary); font-size: 11px; }
.kanban-blocker-group > p { margin: 0; color: var(--text-secondary); font-size: 11px; }
.kanban-linked-card {
  min-height: 38px;
  padding: 6px 8px 6px 10px;
  border-left: 2px solid var(--line);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.kanban-blocker-group.blocked-by .kanban-linked-card { border-left-color: var(--danger); }
.kanban-linked-card span { display: grid; min-width: 0; }
.kanban-linked-card strong { overflow: hidden; color: var(--text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-linked-card small { color: var(--text-secondary); font-size: 9px; }
.kanban-linked-card button { width: 30px; padding: 0; color: var(--danger); }
.kanban-linked-card button.kanban-linked-card-open {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}
.kanban-linked-card-open:hover strong { color: var(--accent); }
.kanban-blocker-add select { min-width: 0; flex: 1; }
.kanban-blocker-error { margin: 0; color: var(--danger); font-size: 11px; }
.kanban-comments {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.kanban-comments > header,
.kanban-comment-list article > div,
.kanban-comment-compose > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kanban-comments > header button,
.kanban-comment-compose button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.kanban-comments button:disabled { opacity: .5; cursor: default; }
.kanban-comment-list {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
}
.kanban-comment-list article {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.kanban-comment-list strong { font-size: 11px; }
.kanban-comment-list time,
.kanban-comment-compose small { color: var(--text-secondary); font-size: 10px; }
.kanban-comment-list p {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kanban-comments-empty { margin: 8px 0; color: var(--text-secondary); font-size: 11px; }
.kanban-comments-error { margin: 8px 0; color: var(--danger); font-size: 11px; }
.kanban-comment-compose { display: grid; gap: 7px; }
.kanban-comment-compose textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--panel);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}
.kanban-toolbar select:disabled { opacity: .6; cursor: wait; }
.kanban-toolbar label.kanban-board-select { width: min(260px, 36%); max-width: 280px; }
.kanban-add-board {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.kanban-add-board:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.kanban-comment-compose textarea:focus { border-color: var(--accent); }
.kanban-history {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 14px 16px 16px;
}
.kanban-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
}
.kanban-history-list { display: grid; align-content: start; gap: 8px; overflow: auto; }
.kanban-history-list article {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.kanban-history-list article > div { display: flex; justify-content: space-between; gap: 12px; }
.kanban-history-list strong { font-size: 12px; }
.kanban-history-list time,
.kanban-history-list small { color: var(--text-secondary); font-size: 10px; }
.kanban-history-list p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; }
.kanban-history-list del { color: var(--danger); }
.kanban-history-list ins { color: var(--success); text-decoration: none; }
.kanban-history-empty { margin: 16px 0; color: var(--text-secondary); font-size: 12px; }
.desktop-window.compact .kanban-card-editor .kanban-modal-grid { grid-template-columns: 1fr; }

.desktop-window.compact .window-header {
  height: 38px;
  gap: 7px;
  padding: 0 9px;
}
.desktop-window.compact .window-header .line-icon { display: none; }
.desktop-window.compact .window-header strong { font-size: 12px; }
.desktop-window.compact .window-content { height: calc(100% - 38px); }
.desktop-window.compact .metric-row {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 12px;
}
.desktop-window.medium .metric-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.desktop-window.wide .metric-row {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}
.desktop-window.compact .safe-number { font-size: clamp(12px, 4.8vw, 17px); }
.desktop-window.compact .payment-card { padding: 0 12px 12px; }
.desktop-window.compact .chart-heading {
  grid-template-columns: 1fr;
  gap: 6px;
  padding-top: 12px;
}
.desktop-window.compact .chart-heading small { display: none; }
.desktop-window.compact .range-tabs button {
  height: 22px;
  padding: 0 6px;
  font-size: 9px;
}
.desktop-window.compact .line-chart { height: 145px; }
.desktop-window.medium .line-chart { height: 190px; }
.desktop-window.compact .grid-lines path:nth-child(even) { display: none; }
.desktop-window.compact .section-screen { padding: 12px; }
.desktop-window.compact .section-head {
  display: block;
  margin-bottom: 10px;
}
.desktop-window.compact .section-head h2 { font-size: 17px; }
.desktop-window.compact .section-head p { display: none; }
.desktop-window.compact .kanban-screen { padding: 12px; }
.desktop-window.compact .kanban-summary { margin-top: 8px; }
.desktop-window.compact .kanban-toolbar,
.desktop-window.medium .kanban-toolbar {
  align-items: stretch;
}
.desktop-window.compact .kanban-toolbar {
  display: grid;
  grid-template-columns: 1fr;
}
.desktop-window.compact .kanban-toolbar label,
.desktop-window.medium .kanban-toolbar label {
  width: 100%;
  max-width: none;
}
.desktop-window.compact .kanban-ai-toggle,
.desktop-window.medium .kanban-ai-toggle {
  margin-left: 0;
}
.desktop-window.compact .kanban-ai-popover {
  position: static;
  width: 100%;
  margin-bottom: 10px;
}
.desktop-window.medium .kanban-ai-popover {
  top: 122px;
  right: 12px;
}
.desktop-window.compact .kanban-board {
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 86vw);
  overflow-x: auto;
  overflow-y: hidden;
}
.employee-badge-multiple {
  grid-template-columns: auto minmax(0, 1fr);
}
.employee-avatars {
  display: flex;
  padding-left: 8px;
}
.employee-avatars b {
  margin-left: -8px;
  border: 2px solid var(--panel);
}
.kanban-assignee-picker {
  display: grid;
  max-height: 190px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.kanban-assignee-picker label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.kanban-assignee-picker label:last-child {
  border-bottom: 0;
}
.kanban-assignee-picker input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.kanban-assignee-picker span {
  display: grid;
  min-width: 0;
}
.kanban-assignee-picker strong {
  color: var(--text-primary);
  font-size: 12px;
}
.kanban-assignee-picker small {
  color: var(--text-secondary);
  font-size: 10px;
}
.kanban-card-object {
  width: fit-content;
  color: var(--info);
  font-size: 11px;
  text-decoration: none;
}
.kanban-card-object:hover {
  text-decoration: underline;
}
.desktop-window.compact .kanban-column {
  min-width: 0;
}
.desktop-window.compact .kanban-task-list {
  max-height: none;
}
.desktop-window.compact .kanban-modal-grid {
  grid-template-columns: 1fr;
}
.desktop-window.medium .kanban-board {
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
}
.desktop-window.compact .data-table {
  display: grid;
  gap: 9px;
  overflow: visible;
  border: 0;
  background: transparent;
}
.desktop-window.compact .table-head { display: none; }
.desktop-window.compact .table-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}
.desktop-window.compact .table-row span {
  font-size: 11px;
  line-height: 1.28;
}
.desktop-window.compact .table-row span:nth-child(n+4) { display: none; }
.desktop-window.compact .table-cell-editor {
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.desktop-window.compact .table-cell-editor:last-child { border-bottom: 0; }
.desktop-window.compact .table-cell-editor span {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  padding: 8px 11px 0;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: normal;
}
.desktop-window.compact .table-cell-editor input,
.desktop-window.compact .table-cell-editor select,
.desktop-window.compact .table-cell-editor textarea { padding: 4px 11px 9px; }
.desktop-window.compact .table-cell-editor:nth-child(n+4) { display: none; }
.desktop-window.compact .table-delete-row { opacity: 1; }
.desktop-window.medium .table-row {
  min-width: 0;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}
.desktop-window.medium .table-row span:nth-child(n+4) { display: none; }
.desktop-window.medium .table-cell-editor:nth-child(n+4) { display: none; }
.desktop-window.wide .table-row {
  min-width: max-content;
  grid-template-columns: var(--table-template, repeat(4, minmax(110px, 1fr)));
}
.desktop-window.compact .analytics-grid {
  grid-template-columns: 1fr;
}
.desktop-window.medium .analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.desktop-window.compact .mini-chart-card {
  padding: 12px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.desktop-window.compact .mini-chart-card svg { height: 86px; }

.buildos.theme-sky .desktop-canvas::before {
  background: none;
  opacity: 0;
  animation: none;
}
.buildos.theme-sky .desktop-canvas::after {
  background: none;
  opacity: 0;
  animation: none;
}
.buildos.theme-sky .desktop-window {
  border-color: rgba(255,255,255,.74);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,250,255,.78)),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.55), transparent 32%);
}
.buildos.theme-sky .window-dock:hover {
  box-shadow: 0 24px 58px rgba(35,86,122,.18), inset 0 1px 0 rgba(255,255,255,.82);
}

.buildos.theme-dark .desktop-canvas::before {
  inset: 12px 12px calc(var(--dock-h) + 8px);
  background:
    linear-gradient(rgba(96,165,250,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.055) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(circle at 52% 40%, rgba(0,0,0,.56), transparent 78%);
  animation: backgroundGridBreath 16s ease-in-out infinite;
}
.buildos.theme-dark .desktop-canvas::after {
  background:
    radial-gradient(ellipse at 48% 18%, rgba(37,99,235,.2), transparent 34%),
    radial-gradient(circle at 18% 8%, rgba(96,165,250,.12), transparent 22%),
    radial-gradient(circle at 84% 8%, rgba(14,165,233,.09), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 42%, rgba(0,0,0,.2));
  opacity: .74;
  animation: darkSkyBreath 14s ease-in-out infinite;
}
.buildos.theme-dark .desktop-window {
  border-color: rgba(84,119,169,.42);
  background:
    linear-gradient(180deg, rgba(22,35,56,.9), rgba(9,17,29,.92)),
    radial-gradient(circle at 16% 0%, rgba(59,130,246,.1), transparent 32%);
  backdrop-filter: blur(18px) saturate(136%);
  -webkit-backdrop-filter: blur(18px) saturate(136%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(147,197,253,.12), inset 0 -1px 0 rgba(0,0,0,.32);
}
.buildos.theme-dark .desktop-window.is-active {
  border-color: rgba(96,165,250,.58);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(147,197,253,.18), 0 0 0 1px rgba(59,130,246,.24);
}
.buildos.theme-dark .desktop-window.compact {
  color: #dbeafe;
  background:
    linear-gradient(180deg, rgba(18,30,48,.96), rgba(7,14,25,.96)),
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.16), transparent 34%);
}
.buildos.theme-dark .desktop-window.compact .window-header {
  border-color: rgba(75,103,146,.48);
  background: linear-gradient(180deg, rgba(30,45,68,.94), rgba(13,24,40,.92));
}
.buildos.theme-dark .desktop-window.compact .window-content {
  color: #dbeafe;
  background:
    linear-gradient(180deg, rgba(13,24,40,.92), rgba(7,14,25,.94)),
    rgba(11,20,34,.94);
}
.buildos.theme-dark .desktop-window.compact .window-header strong,
.buildos.theme-dark .desktop-window.compact .section-head h2,
.buildos.theme-dark .desktop-window.compact .chart-heading h2,
.buildos.theme-dark .desktop-window.compact .mini-chart-card h3,
.buildos.theme-dark .desktop-window.compact .safe-number,
.buildos.theme-dark .desktop-window.compact .table-row span {
  color: #dbeafe;
}
.buildos.theme-dark .desktop-window.compact .metric-row span,
.buildos.theme-dark .desktop-window.compact .section-head p,
.buildos.theme-dark .desktop-window.compact .chart-heading small,
.buildos.theme-dark .desktop-window.compact .mini-chart-card small,
.buildos.theme-dark .desktop-window.compact .expense-list span,
.buildos.theme-dark .desktop-window.compact .expense-list b {
  color: #7dd3fc;
}
.buildos.theme-dark .desktop-window.compact .metric-row b {
  color: #07111f;
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
}
.buildos.theme-dark .desktop-window.compact .metric-row,
.buildos.theme-dark .desktop-window.compact .payment-card,
.buildos.theme-dark .desktop-window.compact .mini-chart-card {
  border-color: rgba(75,103,146,.42);
}
.buildos.theme-dark .desktop-window.compact .data-table,
.buildos.theme-dark .desktop-window.compact .gantt {
  border-color: rgba(75,103,146,.46);
  background: rgba(11,20,34,.78);
}
.buildos.theme-dark .desktop-window.compact .table-head {
  color: #67e8f9;
  background: rgba(15,45,76,.68);
}
.buildos.theme-dark .desktop-window.compact .table-row {
  border-color: rgba(59,130,246,.38);
  background:
    linear-gradient(180deg, rgba(13,39,66,.92), rgba(8,22,39,.94)),
    rgba(11,20,34,.96);
}
.buildos.theme-dark .desktop-window.compact .table-row:not(.table-head):hover,
.buildos.theme-dark .desktop-window.compact .mini-chart-card:hover {
  background: rgba(37,99,235,.12);
  box-shadow: inset 0 1px 0 rgba(34,211,238,.16);
}
.buildos.theme-dark .desktop-window.compact .range-tabs button {
  color: #7dd3fc;
}
.buildos.theme-dark .desktop-window.compact .range-tabs button:hover,
.buildos.theme-dark .desktop-window.compact .range-tabs .active {
  color: #dbeafe;
  background: rgba(14,165,233,.22);
}
.buildos.theme-dark .desktop-window.compact .band {
  fill: rgba(37,99,235,.16);
  stroke: rgba(34,211,238,.42);
}
.buildos.theme-dark .desktop-window.compact .scatter {
  fill: #38bdf8;
  opacity: .82;
}
.buildos.theme-dark .desktop-window.compact .expense-list i {
  background: rgba(30,64,175,.26);
}
.buildos.theme-dark .desktop-window.compact .hover-dot.green {
  stroke: #07111f;
}
.buildos.theme-dark .desktop-window.compact .chart-tooltip {
  color: #dbeafe;
  border-color: rgba(75,103,146,.52);
  background:
    linear-gradient(180deg, rgba(13,39,66,.98), rgba(7,17,31,.98)),
    rgba(11,20,34,.96);
  box-shadow: 0 16px 34px rgba(0,0,0,.42);
}
.buildos.theme-dark .buildos-sidebar {
  border-color: rgba(84,119,169,.46);
  box-shadow: var(--shadow-md), inset -1px 0 0 rgba(147,197,253,.1);
}
.buildos.theme-dark .traffic-buttons button {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.buildos.theme-dark .area {
  fill: rgba(96,165,250,.08);
}
.buildos.theme-dark .resize-handle {
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(203,213,225,.22) 46% 52%, transparent 53%),
    linear-gradient(135deg, transparent 0 62%, rgba(203,213,225,.3) 63% 69%, transparent 70%),
    var(--glass);
}

.buildos.theme-glass .desktop-canvas::before {
  inset: 14px 14px calc(var(--dock-h) + 10px);
  background:
    linear-gradient(rgba(91,118,139,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,118,139,.052) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  mask-image: radial-gradient(circle at 40% 28%, rgba(0,0,0,.72), transparent 78%);
  animation: backgroundGridBreath 14s ease-in-out infinite;
}
.buildos.theme-glass .desktop-canvas::after {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.78), transparent 28%),
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.36), transparent 18%),
    radial-gradient(circle at 72% 20%, rgba(34,211,238,.13), transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(96,165,250,.12), transparent 30%),
    linear-gradient(124deg, transparent 0 18%, rgba(255,255,255,.34) 21%, transparent 24% 46%, rgba(125,211,252,.2) 49%, transparent 54%),
    linear-gradient(28deg, transparent 0 38%, rgba(255,255,255,.28) 43%, transparent 48% 70%, rgba(196,181,253,.16) 74%, transparent 79%),
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 46%),
    radial-gradient(ellipse at 50% 118%, rgba(32,54,78,.08), transparent 54%);
  background-size: 120% 120%, 110% 110%, 118% 118%, 116% 116%, 150% 150%, 142% 142%, 100% 100%, 100% 100%;
  animation: glassCaustics 12s ease-in-out infinite alternate;
}

.buildos.theme-glass .desktop-window {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.66);
  background:
    linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.34) 48%, rgba(224,242,254,.26)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.56), transparent 30%),
    radial-gradient(circle at 92% 100%, rgba(96,165,250,.1), transparent 36%);
  backdrop-filter: blur(24px) saturate(172%) contrast(104%);
  -webkit-backdrop-filter: blur(24px) saturate(172%) contrast(104%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(15,23,42,.055),
    inset 1px 0 0 rgba(255,255,255,.32),
    0 20px 58px rgba(52,78,100,.16);
}
.buildos.theme-glass .desktop-window::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 32%, rgba(15,23,42,.024)),
    radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.24), transparent 32%);
  opacity: .34;
  mix-blend-mode: normal;
}
.buildos.theme-glass .desktop-window:hover::after {
  opacity: .4;
}
.buildos.theme-glass .desktop-window:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(15,23,42,.05),
    0 24px 62px rgba(52,78,100,.17);
}
.buildos.theme-glass .desktop-window.is-active {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.86);
  backdrop-filter: blur(28px) saturate(184%) contrast(105%);
  -webkit-backdrop-filter: blur(28px) saturate(184%) contrast(105%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(15,23,42,.055),
    0 32px 84px rgba(52,78,100,.2);
}
.buildos.theme-glass .window-header,
.buildos.theme-glass .window-content {
  position: relative;
  z-index: 2;
}
.buildos.theme-glass .window-header {
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.18));
  backdrop-filter: blur(22px) saturate(168%);
  -webkit-backdrop-filter: blur(22px) saturate(168%);
}
.buildos.theme-glass .window-content {
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.13)),
    color-mix(in srgb, var(--panel) 62%, transparent);
}
.buildos.theme-glass .buildos-sidebar::before,
.buildos.theme-glass .window-dock::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  pointer-events: none;
}
.buildos.theme-glass .buildos-sidebar {
  border-color: rgba(255,255,255,.76);
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34) 46%, rgba(96,165,250,.14)),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.72), transparent 30%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.14), transparent 34%);
  backdrop-filter: blur(30px) saturate(172%) contrast(104%);
  -webkit-backdrop-filter: blur(30px) saturate(172%) contrast(104%);
}
.buildos.theme-glass .buildos-sidebar > * {
  position: relative;
  z-index: 2;
}
.buildos.theme-glass .buildos-sidebar,
.buildos.theme-glass .buildos-sidebar button,
.buildos.theme-glass .buildos-sidebar input {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.buildos.theme-glass .brand-row strong,
.buildos.theme-glass .menu-row,
.buildos.theme-glass .profile-main strong {
  color: #111827;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}
.buildos.theme-glass .menu-row em,
.buildos.theme-glass .profile-main small,
.buildos.theme-glass .profile-main i,
.buildos.theme-glass .search-box button,
.buildos.theme-glass .search-box kbd {
  color: #475569;
}
.buildos.theme-glass .window-dock {
  padding: 12px;
  border-color: rgba(255,255,255,.8);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.3) 42%, rgba(96,165,250,.16)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.62), transparent 30%),
    radial-gradient(circle at 82% 92%, rgba(59,130,246,.16), transparent 34%);
  backdrop-filter: blur(46px) saturate(196%) contrast(106%);
  -webkit-backdrop-filter: blur(46px) saturate(196%) contrast(106%);
}
.buildos.theme-glass .profile-menu,
.buildos.theme-glass .command-palette {
  border-color: rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.3) 42%, rgba(96,165,250,.18)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.7), transparent 28%),
    radial-gradient(circle at 82% 88%, rgba(96,165,250,.2), transparent 34%);
  backdrop-filter: blur(48px) saturate(198%) contrast(107%);
  -webkit-backdrop-filter: blur(48px) saturate(198%) contrast(107%);
}
.buildos.theme-glass .buildos-sidebar,
.buildos.theme-glass .window-dock,
.buildos.theme-glass .profile-menu,
.buildos.theme-glass .command-palette,
.buildos.theme-glass .top-action-button,
.buildos.theme-glass .top-popover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.08),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(15,23,42,.045),
    0 32px 86px rgba(52,78,100,.2),
    0 1px 0 rgba(255,255,255,.42);
}
.buildos.theme-glass .data-table,
.buildos.theme-glass .window-content {
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}
.buildos.theme-glass .top-action-button {
  overflow: hidden;
  border-color: rgba(255,255,255,.72);
  background:
    linear-gradient(135deg, rgba(255,255,255,.56), rgba(255,255,255,.22) 48%, rgba(96,165,250,.12)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.58), transparent 32%);
  backdrop-filter: blur(34px) saturate(190%) contrast(106%);
  -webkit-backdrop-filter: blur(34px) saturate(190%) contrast(106%);
}
.buildos.theme-glass .top-action-button.create-action {
  color: white;
  border-color: rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, white 14%), color-mix(in srgb, var(--accent) 70%, #0f172a 30%)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.34), transparent 34%);
}
.buildos.theme-glass .top-popover {
  border-color: rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.34) 42%, rgba(96,165,250,.16)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.62), transparent 30%);
  backdrop-filter: blur(42px) saturate(190%) contrast(106%);
  -webkit-backdrop-filter: blur(42px) saturate(190%) contrast(106%);
}
.buildos.theme-glass .data-table {
  border-color: rgba(255,255,255,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.22)),
    color-mix(in srgb, var(--panel) 54%, transparent);
}
.buildos.theme-glass .table-head {
  background: rgba(255,255,255,.42);
}
.buildos.theme-glass .table-row:not(.table-head) {
  background: rgba(255,255,255,.08);
}
.buildos.theme-glass .buildos-sidebar::after,
.buildos.theme-glass .window-dock::after,
.buildos.theme-glass .profile-menu::after,
.buildos.theme-glass .command-palette::after {
  inset: 1px;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.2),
    inset 12px 0 30px rgba(255,255,255,.08),
    inset -12px 0 26px rgba(59,130,246,.055);
  background:
    linear-gradient(116deg, transparent 0 20%, rgba(255,255,255,.18) 21%, transparent 24% 48%, rgba(59,130,246,.075) 50%, transparent 54%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.22), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(34,211,238,.08), transparent 28%);
  opacity: 1;
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
}
.buildos.theme-glass .buildos-sidebar::after {
  background:
    linear-gradient(116deg, transparent 0 28%, rgba(255,255,255,.12) 32%, transparent 42% 100%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.16), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(34,211,238,.05), transparent 28%);
  opacity: .72;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.buildos.theme-glass .buildos-sidebar::before,
.buildos.theme-glass .window-dock::before,
.buildos.theme-glass .profile-menu::before,
.buildos.theme-glass .command-palette::before {
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(120deg, transparent 0%, transparent 28%, rgba(255,255,255,.48) 44%, rgba(255,255,255,.18) 52%, transparent 68%),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.72), transparent 26%),
    radial-gradient(circle at 84% 92%, rgba(34,211,238,.12), transparent 30%);
  opacity: .3;
  transform: translateX(-38%);
  mix-blend-mode: screen;
}
.buildos.theme-glass .buildos-sidebar:hover::before,
.buildos.theme-glass .window-dock:hover::before,
.buildos.theme-glass .profile-menu:hover::before,
.buildos.theme-glass .command-palette:hover::before {
  animation: glassShine 800ms ease-out forwards;
}
body.is-window-dragging .buildos.theme-glass .desktop-window.is-active {
  opacity: .94;
  backdrop-filter: blur(16px) saturate(152%) contrast(103%);
  -webkit-backdrop-filter: blur(16px) saturate(152%) contrast(103%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.07),
    0 44px 108px rgba(52,78,100,.24);
}
.buildos.theme-classic .desktop-window {
  backdrop-filter: none;
  box-shadow: 0 14px 32px rgba(75,92,105,.13), inset 0 1px 0 rgba(255,255,255,.74);
}
.buildos.theme-classic .desktop-window.is-active {
  box-shadow: 0 22px 56px rgba(75,92,105,.2), inset 0 1px 0 rgba(255,255,255,.84);
}
.buildos.theme-classic .buildos-sidebar {
  backdrop-filter: blur(18px) saturate(110%);
  box-shadow: 0 12px 34px rgba(75,92,105,.12), inset -1px 0 0 rgba(255,255,255,.64);
}
.buildos.theme-classic .window-dock {
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: 0 18px 44px rgba(75,92,105,.16);
}

@keyframes windowIn { from { opacity: 0; transform: translateX(-14px) translateY(8px) scale(.985); } to { opacity: .9; transform: translateX(0) translateY(0) scale(1); } }
@keyframes snapIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes commandIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes glassShine {
  from { transform: translateX(-42%); opacity: .12; }
  45% { opacity: .46; }
  to { transform: translateX(42%); opacity: .24; }
}
@keyframes backgroundBreath {
  0%, 100% { opacity: .42; }
  50% { opacity: .68; }
}
@keyframes mountainMistDrift {
  0% {
    background-position: 0% 52%, 100% 48%, 0% 52%, 68% 46%, 100% 56%;
    transform: translate3d(-4%, 1%, 0) scale(1.04);
  }
  50% {
    background-position: 42% 50%, 54% 52%, 28% 48%, 44% 51%, 72% 52%;
    transform: translate3d(1%, -1%, 0) scale(1.07);
  }
  100% {
    background-position: 88% 54%, 0% 48%, 56% 54%, 18% 47%, 34% 58%;
    transform: translate3d(5%, 1.5%, 0) scale(1.05);
  }
}
@keyframes liquidGlassFlow {
  0% {
    background-position: 0% 0%, 100% 100%, 18% 24%, 72% 18%, 78% 78%;
    transform: translate3d(-1%, -1%, 0) scale(1.02) rotate(.001deg);
  }
  50% {
    background-position: 54% 42%, 48% 60%, 26% 18%, 62% 28%, 84% 68%;
    transform: translate3d(1%, .8%, 0) scale(1.045) rotate(.001deg);
  }
  100% {
    background-position: 100% 92%, 0% 18%, 14% 30%, 80% 14%, 68% 84%;
    transform: translate3d(2%, -1%, 0) scale(1.03) rotate(.001deg);
  }
}
@keyframes skyAtmosphereBreath {
  0%, 100% { opacity: .62; }
  50% { opacity: .76; }
}
@keyframes darkSkyBreath {
  0%, 100% { opacity: .62; transform: scale(1); }
  50% { opacity: .82; transform: scale(1.018); }
}
@keyframes glassCaustics {
  0% {
    opacity: .82;
    background-position: 0% 0%, 17% 24%, 72% 20%, 88% 78%, 0% 42%, 100% 64%, 0 0, 0 0;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    background-position: 8% 4%, 22% 18%, 64% 28%, 78% 70%, 62% 46%, 28% 58%, 0 0, 0 0;
    transform: scale(1.012);
  }
}
@keyframes backgroundGridBreath {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.01); }
}
@media (max-width: 720px) {
  .settings-layer {
    align-items: stretch;
    padding: 10px;
  }
  .settings-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }
  .settings-body {
    grid-template-columns: 1fr;
  }
  .settings-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--divider);
  }
  .settings-tabs button {
    text-align: center;
    font-size: 12px;
  }
  .settings-theme-grid {
    grid-template-columns: 1fr;
  }
  .profile-layer {
    padding: 10px;
  }
  .profile-modal {
    width: 100%;
    border-radius: 16px;
  }
  .profile-modal-header {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    padding: 12px;
  }
  .profile-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .profile-summary,
  .profile-fields {
    grid-template-columns: 1fr;
  }
  .ai-layer {
    padding: 10px;
  }
  .ai-modal {
    width: 100%;
    height: calc(100dvh - 20px);
    border-radius: 16px;
  }
  .ai-header {
    padding: 12px;
  }
  .ai-message {
    max-width: 94%;
  }
  .ai-compose {
    grid-template-columns: 1fr;
  }
  .ai-compose button {
    width: 100%;
  }
  .settings-header,
  .settings-footer {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body:has(.auth-shell) > header,
body:has(.auth-shell) > footer {
  display: none;
}

body:has(.auth-shell) {
  overflow: hidden;
}

body:has(.auth-shell) > main.container {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}

.auth-shell {
  --auth-text: #0f172a;
  --auth-muted: #64748b;
  --auth-line: rgba(203, 213, 225, .92);
  --auth-blue: #0284c7;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(8px, 1.4vh, 18px);
  height: 100vh;
  height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: clamp(10px, 3vh, 42px) clamp(10px, 3vw, 42px);
  color: var(--auth-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(222,244,255,.2)),
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.78), transparent 34%),
    radial-gradient(circle at 76% 18%, rgba(14,165,233,.2), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(59,130,246,.16), transparent 32%),
    var(--liquid-glass-image) center / cover no-repeat,
    linear-gradient(145deg, #dce9ff 0%, #f8fbff 44%, #dff8fb 100%);
  isolation: isolate;
}

.auth-shell::before,
.auth-shell::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.auth-shell::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.16) 0 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .28;
}

.auth-shell::after {
  background:
    linear-gradient(116deg, transparent 0 22%, rgba(255,255,255,.34) 34%, transparent 46% 100%),
    radial-gradient(circle at 8% 78%, rgba(255,255,255,.34), transparent 28%);
  opacity: .62;
  mix-blend-mode: screen;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, min(58vw, 900px)) minmax(380px, min(34vw, 520px));
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  width: min(100%, 1500px);
  transform: scale(var(--auth-fit-scale, 1));
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.auth-showcase,
.auth-panel,
.auth-recovery-panel {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.36) 48%, rgba(186,230,253,.18)),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.68), transparent 30%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.06),
    0 38px 100px rgba(52,78,100,.24);
  backdrop-filter: blur(30px) saturate(156%);
  -webkit-backdrop-filter: blur(30px) saturate(156%);
}

.auth-showcase::after,
.auth-recovery-panel::after {
  position: absolute;
  inset: 1px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(128deg, transparent 0 30%, rgba(255,255,255,.28) 38%, transparent 48% 100%),
    radial-gradient(circle at 92% 100%, rgba(14,165,233,.11), transparent 34%);
  opacity: .78;
}

.auth-showcase > *,
.auth-panel > *,
.auth-recovery-panel > * {
  position: relative;
  z-index: 1;
}

.auth-showcase {
  min-height: clamp(480px, calc(100dvh - 140px), 560px);
  gap: clamp(16px, 2vh, 24px);
  padding: clamp(20px, 2.4vh, 28px) clamp(22px, 2.6vw, 34px);
  align-content: space-between;
  animation: authPanelEnter 620ms ease-out both;
}

.auth-showcase-top,
.auth-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.auth-brand,
.auth-panel-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #111827;
}

.auth-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.auth-brand strong,
.auth-panel-brand strong {
  font-size: 16px;
  font-weight: 760;
}

.auth-hero-copy {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.auth-hero-copy span,
.auth-tip-kicker {
  width: max-content;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: #0369a1;
  font-size: 12px;
  font-weight: 850;
}

.auth-hero-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(30px, 2.55vw, 40px);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: 0;
}

.auth-ai-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: min(100%, 760px);
  padding: 14px;
  border: 1px solid rgba(14,165,233,.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(224,242,254,.46)),
    radial-gradient(circle at 0% 0%, rgba(14,165,233,.18), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 18px 42px rgba(14,165,233,.12);
  animation: authFloat 5200ms ease-in-out infinite;
}

.auth-ai-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f172a, #075985);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 14px 28px rgba(15,23,42,.22);
}

.auth-ai-card strong,
.auth-ai-card span {
  display: block;
}

.auth-ai-card strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 820;
}

.auth-ai-card span {
  margin-top: 4px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.auth-product-window {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.36)),
    radial-gradient(circle at 82% 18%, rgba(14,165,233,.12), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 30px 76px rgba(52,78,100,.22);
}

.auth-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 50px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.65);
}

.auth-window-bar span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #94a3b8;
  opacity: .54;
}

.auth-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, .7fr);
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(16px, 2vh, 22px) clamp(16px, 2vw, 24px);
}

.auth-tip-content {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: clamp(170px, 22vh, 226px);
  padding: clamp(12px, 1.5vw, 18px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.auth-shell.tip-ready .auth-tip-content {
  opacity: 1;
  transform: translateY(0);
}

.auth-tip-content h3 {
  max-width: 470px;
  margin: 0;
  color: #111827;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 740;
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-tip-content p {
  max-width: 450px;
  margin: 0;
  color: #475569;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.58;
}

.auth-metric-stack {
  display: grid;
  gap: 10px;
  align-content: center;
}

.auth-metric-stack article,
.auth-flow div,
.auth-progress-card,
.auth-chart-card {
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 8px;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, background 220ms ease-out;
}

.auth-metric-stack article {
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 16px;
  animation: authCardLift 680ms ease-out both;
}

.auth-metric-stack article:nth-child(2) {
  animation-delay: 90ms;
}

.auth-metric-stack article:nth-child(3) {
  animation-delay: 180ms;
}

.auth-metric-stack span,
.auth-flow small,
.auth-progress-card span,
.auth-chart-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.auth-metric-stack strong {
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
}

.auth-metric-stack small {
  color: #b45309;
  font-size: 12px;
  font-weight: 750;
}

.auth-metric-stack article.is-highlighted,
.auth-flow div.is-highlighted,
.auth-progress-card.is-highlighted,
.auth-chart-card.is-highlighted {
  transform: translateY(-3px);
  border-color: rgba(14,165,233,.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(224,242,254,.56)),
    radial-gradient(circle at 10% 0%, rgba(14,165,233,.18), transparent 34%);
  box-shadow: 0 16px 38px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.86);
}

.auth-insight-board {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  padding: 0 24px 8px;
}

.auth-progress-card,
.auth-chart-card {
  display: grid;
  gap: 12px;
  min-height: 108px;
  padding: 16px;
}

.auth-progress-card strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 18px;
}

.auth-progress-card i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.2);
}

.auth-progress-card b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #2563eb);
  animation: authProgressFill 1100ms ease-out both;
}

.auth-chart-card svg {
  width: 100%;
  height: 72px;
  overflow: visible;
}

.auth-chart-card path:first-child {
  fill: none;
  stroke: #0284c7;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: authChartDraw 1400ms ease-out 180ms forwards;
}

.auth-chart-card path:last-child {
  fill: rgba(14,165,233,.12);
  stroke: none;
  opacity: 0;
  animation: authFadeUp 700ms ease-out 720ms forwards;
}

.auth-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 24px 22px;
}

.auth-flow div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  min-height: 66px;
  padding: 14px;
  animation: authFadeUp 620ms ease-out both;
}

.auth-flow div:nth-child(2) {
  animation-delay: 110ms;
}

.auth-flow div:nth-child(3) {
  animation-delay: 220ms;
}

.auth-flow span {
  grid-row: span 2;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 0 5px rgba(14,165,233,.12);
}

.auth-flow div[data-visual-card="purchases"] span {
  background: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245,158,11,.14);
}

.auth-flow div[data-visual-card="finance"] span {
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16,185,129,.14);
}

.auth-flow strong,
.auth-flow small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-flow strong {
  color: #111827;
  font-size: 13px;
}

.auth-flow small {
  grid-column: 2;
}

.auth-tip-progress {
  height: 4px;
  overflow: hidden;
  background: rgba(100,116,139,.14);
}

.auth-tip-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #0284c7;
  transform-origin: left;
  animation: authTipProgress 5600ms linear infinite;
}

.auth-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.auth-showcase-grid span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34)),
    radial-gradient(circle at 20% 0%, rgba(14,165,233,.13), transparent 30%);
  color: #334155;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out, background 220ms ease-out, color 220ms ease-out;
}

.auth-showcase-grid span.active {
  border-color: rgba(14,165,233,.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(224,242,254,.62)),
    radial-gradient(circle at 20% 0%, rgba(14,165,233,.22), transparent 34%);
  color: #075985;
  box-shadow: 0 14px 32px rgba(14,165,233,.14), inset 0 1px 0 rgba(255,255,255,.84);
  transform: translateY(-3px);
}

.auth-tip-kicker {
  transition: background 220ms ease-out, color 220ms ease-out, border-color 220ms ease-out;
}

.auth-panel {
  gap: clamp(22px, 3vh, 34px);
  width: min(100%, 520px);
  padding: clamp(30px, 4vh, 50px);
  overflow: visible;
  border-color: var(--auth-line);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 28px 70px rgba(15,23,42,.16), 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}

.auth-secure-badge {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.auth-heading {
  display: grid;
  gap: 8px;
  text-align: left;
}

.auth-heading h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(30px, 2.3vw, 36px);
  font-weight: 780;
  letter-spacing: 0;
}

.auth-heading p {
  max-width: 390px;
  margin: 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field label {
  color: #334155;
  font-size: 13px;
  font-weight: 760;
}

.auth-field input {
  width: 100%;
  height: clamp(50px, 6vh, 58px);
  padding: 0 18px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #0f172a;
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}

.auth-field input::placeholder {
  color: #94a3b8;
}

.auth-field input:focus,
.auth-field input:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 1px 2px rgba(15,23,42,.06);
}

.auth-validation {
  display: none;
  min-height: 0;
}

.auth-validation.validation-summary-errors {
  display: block;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.35;
}

.auth-validation ul {
  margin: 0;
  padding-left: 18px;
}

.auth-field span:not(.auth-tip-kicker) {
  min-height: 16px;
  color: #ef4444;
  font-size: 12px;
}

.auth-field span:empty {
  display: none;
}

.auth-password-control {
  position: relative;
}

.auth-password-control input {
  padding-right: 96px;
}

.auth-password-control button {
  position: absolute;
  top: 50%;
  right: 8px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 760;
  transform: translateY(-50%);
}

.auth-password-control button:hover {
  background: #eef2f7;
  color: #0f172a;
}

.auth-password-control button:focus-visible,
.auth-remember input:focus-visible,
.auth-submit:focus-visible,
.auth-field input:focus-visible,
.auth-back-link:focus-visible {
  outline: 3px solid rgba(37,99,235,.22);
  outline-offset: 2px;
}

.auth-caps-warning {
  display: none;
  margin-top: -3px;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}

.auth-caps-warning.visible {
  display: block;
}

.auth-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  color: #475569;
  font-size: 13px;
  font-weight: 650;
}

.auth-remember input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #0f172a;
}

.auth-form-options a,
.auth-back-link {
  color: #075985;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.auth-form-options a:hover,
.auth-back-link:hover {
  text-decoration: underline;
}

.auth-submit {
  height: clamp(50px, 6vh, 58px);
  border: 0;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  box-shadow: 0 16px 34px rgba(15,23,42,.18);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast), background var(--motion-fast);
}

.auth-submit:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(15,23,42,.22);
}

.auth-submit:active {
  transform: translateY(0);
  opacity: .88;
}

.auth-submit [data-submit-loading] {
  display: none;
}

.auth-submit.is-loading {
  cursor: wait;
  opacity: .82;
}

.auth-submit.is-loading [data-submit-text] {
  display: none;
}

.auth-submit.is-loading [data-submit-loading] {
  display: inline;
}

.auth-page-footer {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(51,65,85,.74);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  transform: scale(var(--auth-fit-scale, 1));
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.auth-recovery-panel {
  gap: 28px;
  width: min(100%, 520px);
  padding: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  transform: scale(var(--auth-fit-scale, 1));
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.auth-recovery-note {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
}

.auth-recovery-note strong {
  color: #0f172a;
}

.auth-back-link {
  width: max-content;
}

.password-change-panel {
  gap: 20px;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.password-change-logout {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@keyframes authTipProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes authPanelEnter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes authCardLift {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes authProgressFill {
  from { width: 0; }
}

@keyframes authChartDraw {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 1440px) and (min-width: 1081px) {
  .auth-layout {
    grid-template-columns: minmax(0, min(54vw, 820px)) minmax(360px, min(32vw, 480px));
    gap: clamp(24px, 2.6vw, 40px);
  }
}

@media (max-height: 850px) and (min-width: 1081px) {
  .auth-shell {
    align-items: start;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .auth-showcase {
    min-height: auto;
    gap: 12px;
    padding: 18px 22px;
  }

  .auth-logo {
    width: 38px;
    height: 38px;
  }

  .auth-hero-copy {
    gap: 7px;
  }

  .auth-hero-copy h2 {
    font-size: 28px;
  }

  .auth-ai-card {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 11px;
  }

  .auth-ai-mark {
    width: 42px;
    height: 42px;
  }

  .auth-product-grid {
    padding: 12px 16px;
  }

  .auth-tip-content {
    min-height: 136px;
    gap: 9px;
    padding: 10px;
  }

  .auth-tip-content h3 {
    font-size: 24px;
  }

  .auth-tip-content p,
  .auth-ai-card span {
    font-size: 13px;
    line-height: 1.38;
  }

  .auth-metric-stack article {
    min-height: 76px;
    padding: 12px;
  }

  .auth-insight-board {
    padding: 0 16px 6px;
  }

  .auth-progress-card,
  .auth-chart-card {
    min-height: 86px;
    padding: 12px;
  }

  .auth-flow {
    padding: 0 16px 16px;
  }

  .auth-flow div {
    min-height: 58px;
    padding: 11px;
  }

  .auth-showcase-grid span {
    min-height: 46px;
    font-size: 12px;
  }

  .auth-panel {
    gap: 18px;
    padding: 28px;
  }

  .auth-heading {
    gap: 6px;
  }

  .auth-heading h1 {
    font-size: 28px;
  }

  .auth-heading p {
    font-size: 14px;
  }

  .auth-form {
    gap: 14px;
  }

  .auth-page-footer {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 1080px) {
  .auth-layout {
    grid-template-columns: 1fr;
    width: min(100%, 680px);
  }

  .auth-showcase {
    min-height: auto;
  }

  .auth-hero-copy h2 {
    font-size: 34px;
  }

  .auth-ai-card {
    width: 100%;
  }

  .auth-product-grid,
  .auth-insight-board,
  .auth-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .auth-shell {
    padding: 18px;
  }

  .auth-showcase {
    display: none;
  }

  .auth-layout {
    width: min(100%, 480px);
  }

  .auth-panel,
  .auth-recovery-panel {
    gap: 24px;
    padding: 30px 22px;
  }

  .auth-panel-top,
  .auth-form-options {
    display: grid;
    justify-content: stretch;
  }

  .auth-panel-brand {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .auth-panel-brand::after {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    content: "Внутренняя система управления объектами";
  }

  .auth-heading h1 {
    font-size: 30px;
  }

  .auth-page-footer {
    margin-top: 18px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-showcase,
  .auth-ai-card,
  .auth-metric-stack article,
  .auth-flow div,
  .auth-progress-card b,
  .auth-chart-card path {
    animation: none !important;
  }

  .auth-chart-card path:first-child {
    stroke-dashoffset: 0;
  }

  .auth-chart-card path:last-child {
    opacity: 1;
  }
}

.error-page {
  display: grid;
  min-height: min(680px, calc(100vh - 190px));
  place-items: center;
  padding: 40px 16px 64px;
}

.error-panel {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  width: min(100%, 780px);
  padding: 34px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92)),
    radial-gradient(circle at 0% 0%, rgba(14,165,233,.12), transparent 32%);
  box-shadow: 0 26px 70px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.error-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(14,165,233,.22);
  border-radius: 8px;
  background: linear-gradient(135deg, #0f172a, #075985);
  color: #fff;
  font-size: 38px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 20px 48px rgba(15,23,42,.22);
}

.error-page-forbidden .error-mark {
  background: linear-gradient(135deg, #7f1d1d, #b45309);
}

.error-copy {
  display: grid;
  gap: 12px;
}

.error-copy span {
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(14,165,233,.18);
  border-radius: 999px;
  background: rgba(224,242,254,.66);
  color: #0369a1;
  font-size: 12px;
  font-weight: 800;
}

.error-page-forbidden .error-copy span {
  border-color: rgba(245,158,11,.24);
  background: rgba(254,243,199,.7);
  color: #92400e;
}

.error-copy h1 {
  margin: 0;
  color: #0f172a;
  font-size: 34px;
  font-weight: 780;
  line-height: 1.1;
}

.error-copy p {
  max-width: 560px;
  margin: 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.55;
}

.error-detail {
  display: grid;
  gap: 4px;
  width: min(100%, 520px);
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.error-detail small {
  color: #64748b;
  font-size: 12px;
  font-weight: 760;
}

.error-detail code {
  color: #0f172a;
  white-space: normal;
  word-break: break-word;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.error-primary,
.error-secondary {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
}

.error-primary {
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #fff;
}

.error-primary:hover {
  color: #fff;
  background: #111827;
}

.error-secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.error-secondary:hover {
  background: #f8fafc;
}

@media (max-width: 720px) {
  .error-panel {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .error-mark {
    width: 112px;
  }

  .error-copy h1 {
    font-size: 28px;
  }
}