:root {
  color-scheme: light dark;
  --bg: #fff;
  --bg-wash: #fff;
  --paper: #fff;
  --paper-soft: #f7f7f7;
  --paper-deep: #efefef;
  --ink: #111;
  --muted: #6a6a6a;
  --contrast: #111;
  --contrast-ink: #fff;
  --danger-bg: #2c2a28;
  --danger-ink: #fff;
  --sidebar-bg: var(--paper);
  --menu-bg: rgba(255, 255, 255, 0.9);
  --paper-glass: var(--paper);
  --paper-glass-soft: var(--paper-soft);
  --active-bg: var(--paper-soft);
  --stroke-faint: rgba(17, 17, 17, 0.02);
  --stroke-soft: rgba(17, 17, 17, 0.04);
  --stroke: rgba(17, 17, 17, 0.06);
  --border: rgba(17, 17, 17, 0.08);
  --border-strong: rgba(17, 17, 17, 0.12);
  --border-heavy: rgba(17, 17, 17, 0.16);
  --scrim: rgba(17, 17, 17, 0.12);
  --overlay: rgba(23, 23, 23, 0.12);
  --secret-dot: rgba(255, 255, 255, 0.86);
  --pill-bg: #111;
  --pill-ink: #fff;
  --doc-ink: #111;
  --doc-text: #171717;
  --doc-muted: #5b5751;
  --folder-preview-bg: var(--paper-soft);
  --sheet-accent: #111;
  --sheet-accent-ink: #fff;
  --sheet-header: #f8f9fa;
  --sheet-toolbar: #f1f3f4;
  --sheet-grid-border: #dfe1e5;
  --sheet-cell-bg: #fff;
  --sheet-tab-bg: #111;
  --new-accent: #f0c75a;
  --new-accent-ink: #1a1406;
  --new-accent-glow: rgba(240, 199, 90, 0.32);
  --doc-sheet-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    repeating-linear-gradient(180deg, transparent 0, transparent 34px, rgba(17, 17, 17, 0.05) 34px, rgba(17, 17, 17, 0.05) 35px);
  --dashboard-card-bg: var(--paper-soft);
  --task-group-bg: var(--paper-soft);
  --bar-fill: var(--contrast);
  --checkmark-fg: #fff;
  --body-bg: #fff;
  --rail-bg: rgba(255, 255, 255, 0.68);
  --rail-bg-strong: rgba(255, 255, 255, 0.8);
  --rail-glow: rgba(240, 199, 90, 0.18);
  --rail-border: rgba(17, 17, 17, 0.08);
  --rail-control-bg: rgba(17, 17, 17, 0.045);
  --rail-control-bg-hover: rgba(17, 17, 17, 0.075);
  --rail-control-ink: rgba(17, 17, 17, 0.58);
  --rail-shadow: 0 32px 80px rgba(17, 17, 17, 0.18);
  --nav-icon-ink: var(--ink);
  --settings-hero-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(17, 17, 17, 0.04), rgba(17, 17, 17, 0));
  --settings-note-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 243, 238, 0.98)),
    linear-gradient(90deg, rgba(17, 17, 17, 0.04), rgba(17, 17, 17, 0));
  --settings-stat-good-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 244, 0.98)),
    var(--paper);
  --settings-stat-watch-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 246, 236, 0.98)),
    var(--paper);
  --settings-stat-risk-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 238, 236, 0.98)),
    var(--paper);
  --settings-logo-preview-bg:
    radial-gradient(circle at center, rgba(17, 17, 17, 0.03), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 244, 244, 0.92));
  --integration-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(17, 17, 17, 0.035), rgba(17, 17, 17, 0));
  --integration-card-google-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(63, 81, 181, 0.07), rgba(16, 185, 129, 0.02));
  --integration-card-dropbox-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(0, 97, 255, 0.08), rgba(17, 17, 17, 0.02));
  --integration-card-onedrive-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(0, 120, 212, 0.08), rgba(17, 17, 17, 0.02));
  --integration-card-sharepoint-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(3, 131, 135, 0.08), rgba(17, 17, 17, 0.02));
  --integration-card-confluence-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(23, 43, 77, 0.08), rgba(17, 17, 17, 0.02));
  --integration-mark-bg: rgba(255, 255, 255, 0.78);
  --integration-chip-bg: rgba(255, 255, 255, 0.82);
  --integration-status-live-border: rgba(17, 17, 17, 0.22);
  --integration-status-connected-border: rgba(17, 17, 17, 0.24);
  --integration-status-error-border: rgba(164, 46, 46, 0.3);
  --integration-status-error-ink: #8a2323;
  --security-overview-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 244, 239, 0.98)),
    linear-gradient(135deg, rgba(17, 17, 17, 0.05), rgba(17, 17, 17, 0));
  --shadow-xs: 0 6px 14px rgba(17, 17, 17, 0.05);
  --shadow-sm: 0 14px 24px rgba(17, 17, 17, 0.08);
  --shadow-md: 0 22px 46px rgba(17, 17, 17, 0.11);
  --shadow-lg: 0 34px 70px rgba(17, 17, 17, 0.15);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000;
  --bg-wash: #000;
  --paper: #050505;
  --paper-soft: #0a0a0a;
  --paper-deep: #111;
  --ink: #f5f5f5;
  --muted: #a3a3a3;
  --contrast: #f5f5f5;
  --contrast-ink: #000;
  --danger-bg: #2a0f10;
  --danger-ink: #fff;
  --sidebar-bg: var(--paper);
  --menu-bg: rgba(10, 10, 10, 0.92);
  --paper-glass: var(--paper);
  --paper-glass-soft: var(--paper-soft);
  --active-bg: var(--paper-soft);
  --stroke-faint: rgba(255, 255, 255, 0.03);
  --stroke-soft: rgba(255, 255, 255, 0.05);
  --stroke: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-heavy: rgba(255, 255, 255, 0.18);
  --scrim: rgba(0, 0, 0, 0.72);
  --overlay: rgba(0, 0, 0, 0.72);
  --secret-dot: rgba(0, 0, 0, 0.84);
  --pill-bg: #f5f5f5;
  --pill-ink: #000;
  --doc-ink: #111;
  --doc-text: #171717;
  --doc-muted: #5b5751;
  --folder-preview-bg: var(--paper-soft);
  --sheet-accent: #f5f5f5;
  --sheet-accent-ink: #000;
  --sheet-header: #11161a;
  --sheet-toolbar: #171d21;
  --sheet-grid-border: rgba(255, 255, 255, 0.12);
  --sheet-cell-bg: #0d1114;
  --sheet-tab-bg: #f5f5f5;
  --new-accent: #f0c75a;
  --new-accent-ink: #1a1406;
  --new-accent-glow: rgba(240, 199, 90, 0.28);
  --doc-sheet-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    repeating-linear-gradient(180deg, transparent 0, transparent 34px, rgba(17, 17, 17, 0.05) 34px, rgba(17, 17, 17, 0.05) 35px);
  --dashboard-card-bg: var(--paper-soft);
  --task-group-bg: var(--paper-soft);
  --bar-fill: var(--contrast);
  --checkmark-fg: #000;
  --body-bg: #000;
  --rail-bg: rgba(5, 5, 5, 0.62);
  --rail-bg-strong: rgba(10, 10, 10, 0.76);
  --rail-glow: rgba(240, 199, 90, 0.12);
  --rail-border: rgba(255, 255, 255, 0.12);
  --rail-control-bg: rgba(255, 255, 255, 0.075);
  --rail-control-bg-hover: rgba(255, 255, 255, 0.12);
  --rail-control-ink: rgba(255, 255, 255, 0.72);
  --rail-shadow: 0 32px 80px rgba(0, 0, 0, 0.58);
  --nav-icon-ink: var(--ink);
  --settings-hero-bg:
    linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  --settings-note-bg:
    linear-gradient(180deg, rgba(18, 18, 18, 0.94), rgba(9, 9, 9, 0.98)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  --settings-stat-good-bg:
    linear-gradient(180deg, rgba(13, 18, 14, 0.98), rgba(6, 9, 7, 0.98)),
    var(--paper);
  --settings-stat-watch-bg:
    linear-gradient(180deg, rgba(22, 19, 11, 0.98), rgba(10, 9, 6, 0.98)),
    var(--paper);
  --settings-stat-risk-bg:
    linear-gradient(180deg, rgba(24, 14, 14, 0.98), rgba(11, 6, 6, 0.98)),
    var(--paper);
  --settings-logo-preview-bg:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 58%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.86), rgba(7, 7, 7, 0.96));
  --integration-card-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  --integration-card-google-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.08));
  --integration-card-dropbox-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(0, 97, 255, 0.18), rgba(255, 255, 255, 0.03));
  --integration-card-onedrive-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(0, 120, 212, 0.18), rgba(255, 255, 255, 0.03));
  --integration-card-sharepoint-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(3, 131, 135, 0.18), rgba(255, 255, 255, 0.03));
  --integration-card-confluence-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(38, 132, 255, 0.16), rgba(255, 255, 255, 0.03));
  --integration-mark-bg: rgba(255, 255, 255, 0.06);
  --integration-chip-bg: rgba(255, 255, 255, 0.05);
  --integration-status-live-border: rgba(255, 255, 255, 0.2);
  --integration-status-connected-border: rgba(255, 255, 255, 0.24);
  --integration-status-error-border: rgba(255, 180, 180, 0.28);
  --integration-status-error-ink: #ffb4b4;
  --security-overview-bg:
    linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(7, 7, 7, 0.98)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  --shadow-xs: 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 14px 24px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 22px 46px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 34px 70px rgba(0, 0, 0, 0.68);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #000;
    --bg-wash: #000;
    --paper: #050505;
    --paper-soft: #0a0a0a;
    --paper-deep: #111;
    --ink: #f5f5f5;
    --muted: #a3a3a3;
    --contrast: #f5f5f5;
    --contrast-ink: #000;
    --danger-bg: #2a0f10;
    --danger-ink: #fff;
    --sidebar-bg: var(--paper);
    --menu-bg: rgba(10, 10, 10, 0.92);
    --paper-glass: var(--paper);
    --paper-glass-soft: var(--paper-soft);
    --active-bg: var(--paper-soft);
    --stroke-faint: rgba(255, 255, 255, 0.03);
    --stroke-soft: rgba(255, 255, 255, 0.05);
    --stroke: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-heavy: rgba(255, 255, 255, 0.18);
    --scrim: rgba(0, 0, 0, 0.72);
    --overlay: rgba(0, 0, 0, 0.72);
    --secret-dot: rgba(0, 0, 0, 0.84);
    --pill-bg: #f5f5f5;
    --pill-ink: #000;
    --doc-ink: #111;
    --doc-text: #171717;
    --doc-muted: #5b5751;
    --folder-preview-bg: var(--paper-soft);
    --sheet-accent: #f5f5f5;
    --sheet-accent-ink: #000;
    --sheet-header: #11161a;
    --sheet-toolbar: #171d21;
    --sheet-grid-border: rgba(255, 255, 255, 0.12);
    --sheet-cell-bg: #0d1114;
    --sheet-tab-bg: #f5f5f5;
    --new-accent: #f0c75a;
    --new-accent-ink: #1a1406;
    --new-accent-glow: rgba(240, 199, 90, 0.28);
    --doc-sheet-bg:
      linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
      repeating-linear-gradient(180deg, transparent 0, transparent 34px, rgba(17, 17, 17, 0.05) 34px, rgba(17, 17, 17, 0.05) 35px);
    --dashboard-card-bg: var(--paper-soft);
    --task-group-bg: var(--paper-soft);
    --bar-fill: var(--contrast);
    --checkmark-fg: #000;
    --body-bg: #000;
    --rail-bg: rgba(5, 5, 5, 0.62);
    --rail-bg-strong: rgba(10, 10, 10, 0.76);
    --rail-glow: rgba(240, 199, 90, 0.12);
    --rail-border: rgba(255, 255, 255, 0.12);
    --rail-control-bg: rgba(255, 255, 255, 0.075);
    --rail-control-bg-hover: rgba(255, 255, 255, 0.12);
    --rail-control-ink: rgba(255, 255, 255, 0.72);
    --rail-shadow: 0 32px 80px rgba(0, 0, 0, 0.58);
    --nav-icon-ink: var(--ink);
    --settings-hero-bg:
      linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    --settings-note-bg:
      linear-gradient(180deg, rgba(18, 18, 18, 0.94), rgba(9, 9, 9, 0.98)),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    --settings-stat-good-bg:
      linear-gradient(180deg, rgba(13, 18, 14, 0.98), rgba(6, 9, 7, 0.98)),
      var(--paper);
    --settings-stat-watch-bg:
      linear-gradient(180deg, rgba(22, 19, 11, 0.98), rgba(10, 9, 6, 0.98)),
      var(--paper);
    --settings-stat-risk-bg:
      linear-gradient(180deg, rgba(24, 14, 14, 0.98), rgba(11, 6, 6, 0.98)),
      var(--paper);
    --settings-logo-preview-bg:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 58%),
      linear-gradient(180deg, rgba(16, 16, 16, 0.86), rgba(7, 7, 7, 0.96));
    --integration-card-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    --integration-card-google-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.08));
    --integration-card-dropbox-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(0, 97, 255, 0.18), rgba(255, 255, 255, 0.03));
    --integration-card-onedrive-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(0, 120, 212, 0.18), rgba(255, 255, 255, 0.03));
    --integration-card-sharepoint-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(3, 131, 135, 0.18), rgba(255, 255, 255, 0.03));
    --integration-card-confluence-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(38, 132, 255, 0.16), rgba(255, 255, 255, 0.03));
    --integration-mark-bg: rgba(255, 255, 255, 0.06);
    --integration-chip-bg: rgba(255, 255, 255, 0.05);
    --integration-status-live-border: rgba(255, 255, 255, 0.2);
    --integration-status-connected-border: rgba(255, 255, 255, 0.24);
    --integration-status-error-border: rgba(255, 180, 180, 0.28);
    --integration-status-error-ink: #ffb4b4;
    --security-overview-bg:
      linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(7, 7, 7, 0.98)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
    --shadow-xs: 0 6px 14px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 14px 24px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 22px 46px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 34px 70px rgba(0, 0, 0, 0.68);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12pt;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--body-bg);
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
  text-transform: inherit;
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

input,
textarea {
  outline: none;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

#app {
  min-height: 100vh;
}

.app-shell {
  position: relative;
  min-height: 100vh;
  --edge: 14px;
  --storage-width: 264px;
  --storage-collapsed-width: 58px;
  --create-width: 212px;
  --storage-effective: var(--storage-width);
  --create-effective: 0px;
}

.app-shell.is-storage-collapsed {
  --storage-effective: var(--storage-collapsed-width);
}

.main {
  margin-left: calc(var(--edge) + var(--storage-effective));
  margin-right: var(--edge);
  min-height: 100vh;
  transition:
    margin-left 360ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.main.main-sheet-mode {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.main.main-sheet-mode .status-bar {
  min-height: 0;
  padding: 6px 18px 0;
}

.main.main-sheet-mode .status-bar:not(.is-visible) {
  display: none;
}

.storage-sidebar,
.create-sidebar {
  display: grid;
  gap: 14px;
  padding: 18px 14px;
  background: var(--rail-bg);
  position: fixed;
  top: var(--edge);
  bottom: var(--edge);
  border: 1px solid var(--rail-border);
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: var(--rail-shadow);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  z-index: 120;
}

.storage-sidebar {
  left: var(--edge);
  width: var(--storage-effective);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 360ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms ease,
    background 180ms ease;
  will-change: width;
}

.create-sidebar {
  right: var(--edge);
  width: var(--create-width);
  grid-template-rows: auto auto auto 1fr;
  max-width: calc(100vw - (var(--edge) * 2));
  transform: translateX(calc(100% + 18px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden auto;
  scrollbar-width: none;
  will-change: transform, opacity;
}

.create-sidebar::-webkit-scrollbar {
  display: none;
}

.create-rail {
  position: relative;
  z-index: 120;
}

.app-shell.is-create-open .create-sidebar {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: createRailSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-shell.is-create-closing .create-sidebar {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: createRailSlideOut 240ms cubic-bezier(0.55, 0, 0.12, 1) both;
}

@keyframes createRailSlideIn {
  from {
    transform: translateX(calc(100% + 18px));
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes createRailSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(calc(100% + 18px));
    opacity: 0;
  }
}

.create-edge-trigger {
  position: fixed;
  top: 14px;
  bottom: 14px;
  width: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

.create-edge-trigger {
  right: 0;
  z-index: 109;
}

.app-shell.is-create-open .create-edge-trigger {
  pointer-events: none;
}

.app-shell.is-create-closing .create-edge-trigger {
  pointer-events: none;
}

@media (max-width: 900px) {
  .main {
    margin-left: 0;
    margin-right: var(--edge);
  }
}

.app-shell.is-creation-mode .main {
  margin-left: 0;
  margin-right: var(--edge);
}

.app-shell.is-creation-mode .page {
  padding: 0;
}

.app-shell.is-creation-mode .page-header,
.app-shell.is-creation-mode .breadcrumbs,
.app-shell.is-creation-mode .meta-panel {
  display: none;
}

.app-shell.is-creation-mode .detail-layout {
  grid-template-columns: 1fr !important;
}

.creation-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 12px;
  background: transparent;
}

.creation-name {
  font-weight: 700;
}

.storage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workspace-account {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 180ms ease;
}

.workspace-account:hover,
.workspace-account.is-active {
  background: var(--paper);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.workspace-account-avatar {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--paper);
  border: 1px solid var(--border);
  overflow: hidden;
}

.workspace-account-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workspace-account-initials {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
}

.workspace-account-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workspace-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
}

.workspace-account-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
}

.workspace-account-glyph {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--muted);
}

.workspace-account-glyph svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.brand-row {
  display: block;
  overflow: hidden;
  max-height: 40px;
  padding: 2px 0 0;
  transition:
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    padding 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-home {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  text-align: left;
  transform-origin: left center;
  transition:
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-wordmark {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-wordmark-image {
  width: 100%;
  height: auto;
  display: block;
}

.sidebar-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  min-height: 30px;
  transition: opacity 180ms ease;
  font-weight: 600;
  border: 0;
  box-shadow: none;
}

.sidebar-collapse-button {
  justify-self: end;
  width: 30px;
  height: 30px;
  min-height: 30px;
  color: var(--muted);
  opacity: 0.72;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 180ms ease;
}

.sidebar-collapse-button:hover {
  background: transparent;
  color: var(--rail-control-ink);
  opacity: 0.82;
}

.sidebar-toggle-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.sidebar-toggle-icon,
.brand-badge {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-badge {
  display: none;
}

.brand-badge-image {
  width: 0;
  height: auto;
  display: block;
}

.brand-name,
.section-head h1,
.page-header h1,
.dialog-head h2 {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  font-weight: 600;
}

.brand-name {
  font-size: 12pt;
  font-weight: 700;
}

.new-wrap {
  position: relative;
  overflow: visible;
}

.new-button,
.menu-item,
.action-button,
.view-button,
.close-button,
.nav-button,
.create-item,
.storage-card,
.search-shell,
.dialog,
.editor-panel,
.meta-panel,
.preview-panel,
.list-row,
.grid-card {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.new-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  background: var(--rail-bg-strong);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.new-button-storage {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 248, 0.98)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.25));
  border: 0;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.08), 0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.new-button-storage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.9) 44%, rgba(255, 255, 255, 0.35) 54%, transparent 76%);
  opacity: 0.9;
  transform: translateX(-35%);
  pointer-events: none;
}

.new-button-storage:hover {
  box-shadow: 0 18px 32px rgba(17, 17, 17, 0.1), 0 1px 0 rgba(255, 255, 255, 0.98) inset;
}

.new-button-plus {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.new-button-plus svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.new-button-copy {
  min-width: 0;
  max-width: 180px;
  display: grid;
  gap: 2px;
  overflow: hidden;
  transition:
    max-width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.new-button-label {
  white-space: nowrap;
}

.new-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  padding: 8px;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 20;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateY(8px);
  animation: railMenuIn 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes railMenuIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-new-scrim {
  position: fixed;
  inset: 0;
  border: 0;
  background: transparent;
  z-index: 55;
}

.floating-new {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 60;
}

.app-shell.is-whiteboard-route .floating-new {
  bottom: 94px;
}

.floating-new-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--new-accent);
  color: var(--new-accent-ink);
  box-shadow: 0 18px 34px var(--new-accent-glow), var(--shadow-sm);
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  font-weight: 700;
}

.floating-new-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px var(--new-accent-glow), var(--shadow-md);
}

.floating-new-plus {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.12);
  color: var(--new-accent-ink);
  font-size: 16px;
  line-height: 1;
}

.floating-new-menu {
  width: 240px;
  padding: 8px;
  background: var(--menu-bg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.floating-new-menu .menu-item {
  border-radius: 14px;
}

.menu-item,
.nav-button,
.create-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
}

.nav-button {
  transition:
    width 360ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 360ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.menu-item:hover,
.nav-button:hover,
.create-item:hover,
.view-button:hover,
.action-button:hover,
.close-button:hover,
.plain-link:hover,
.crumb-button:hover,
.grid-card:hover,
.list-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.nav-sections,
.nav-group,
.tree-root,
.folder-group {
  display: grid;
  gap: 6px;
}

.nav-sections {
  align-content: start;
  min-height: 0;
}

.utility-group {
  margin-top: 6px;
}

.nav-button.is-active,
.view-button.is-active {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--nav-icon-ink);
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.nav-icon-folder {
  background: none;
}

.nav-icon-system {
  background: none;
}

.nav-label {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    max-width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-count {
  margin-left: auto;
  min-width: 28px;
  max-width: 28px;
  padding: 0;
  color: var(--muted);
  font-size: 9pt;
  text-align: center;
  overflow: hidden;
  transition:
    max-width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-button-collection {
  background: transparent;
  box-shadow: none;
}

.nav-button-collection,
.nav-button-tree {
  padding: 7px 10px;
}

.nav-button-collection:hover,
.nav-button-tree:hover {
  background: transparent;
  box-shadow: none;
}

.nav-button-collection.is-active,
.nav-button-tree.is-active {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.nav-button.is-active .nav-count {
  color: var(--ink);
}

.nav-section {
  display: grid;
  gap: 8px;
}

.folder-group-title,
.storage-label,
.field span,
.meta-block span,
.dialog-location,
.file-chip {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.tree-item {
  display: grid;
  gap: 4px;
}

.tree-children {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  display: grid;
  gap: 4px;
}

.storage-card {
  display: grid;
  gap: 8px;
  padding: 4px 8px 0;
  background: transparent;
  box-shadow: none;
}

.storage-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.storage-bar {
  height: 8px;
  background: var(--border);
}

.storage-fill {
  height: 100%;
  background: var(--contrast);
}

.storage-card-value {
  font-weight: 600;
}

.storage-summary {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.storage-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.storage-summary-eyebrow,
.storage-summary-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.storage-summary-title,
.storage-summary-percent,
.storage-summary-stat strong {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.storage-summary-title {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
}

.storage-summary-percent {
  font-size: 12px;
  font-weight: 600;
}

.storage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.storage-summary-stat {
  display: grid;
  gap: 4px;
}

.storage-summary-stat strong {
  font-size: 12px;
  font-weight: 600;
}

.create-toolbar {
  display: block;
}

.new-button-rail {
  min-height: 38px;
}

.create-section {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid var(--stroke);
}

.create-section-head {
  display: none;
}

.create-section-icon {
  display: none;
}

.create-section-title {
  padding: 2px 0 4px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.create-section-title-centered {
  text-align: center;
}

.create-space-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 4px;
}

.create-space-tile-shell {
  position: relative;
}

.create-space-tile-shell.is-picker-open {
  z-index: 2;
}

.create-space-tile {
  aspect-ratio: 1;
  width: 100%;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: var(--paper-glass-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.create-space-tile:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.create-space-tile:hover .create-space-tile-icon,
.create-space-tile-shell:hover .create-space-tile-icon {
  transform: scale(1.06);
}

.create-space-tile.is-active {
  border-color: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.create-space-tile-shell.is-picker-open .create-space-tile {
  border-color: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.create-space-tile-add {
  background: transparent;
  border-color: var(--stroke);
  border-style: dashed;
  box-shadow: none;
  color: var(--muted);
}

.create-space-tile-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: transform 160ms ease;
}

.create-space-tile-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.create-space-edit {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--ink);
  color: var(--contrast-ink);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  transform: translateY(2px);
}

.create-space-tile-shell:hover .create-space-edit,
.create-space-tile-shell:focus-within .create-space-edit,
.create-space-tile-shell.is-picker-open .create-space-edit {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.create-space-edit-icon {
  width: 10px;
  height: 10px;
  display: grid;
  place-items: center;
}

.create-space-edit-icon svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.space-icon-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  min-width: 118px;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.space-icon-option {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
}

.space-icon-option:hover,
.space-icon-option.is-active {
  border-color: var(--border);
  background: var(--paper-soft);
}

.space-icon-option:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.space-icon-option-glyph {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
}

.space-icon-option-glyph svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.create-item-meta {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-transform: none;
}

.create-list {
  display: grid;
  align-content: start;
  gap: 0;
}

.create-empty {
  padding: 2px 0 0;
  color: var(--muted);
  text-transform: none;
  font-size: 11px;
  text-align: center;
}

.create-item {
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--stroke);
}

.create-item:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.create-item-icon {
  width: 16px;
  min-width: 16px;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.create-item-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.create-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 600;
}

.create-space-list {
  padding-top: 0;
}

.create-space-list .tree-children {
  margin-left: 8px;
  padding-left: 12px;
}

.workspace-rail-toggle {
  white-space: nowrap;
}

.app-shell.is-storage-collapsed .folder-group-title,
.app-shell.is-storage-collapsed .folder-group-subtitle,
.app-shell.is-storage-collapsed .storage-card {
  display: none;
}

.app-shell.is-storage-collapsed .storage-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 12px;
  gap: 10px;
  justify-content: flex-start;
}

.app-shell.is-storage-collapsed .storage-header {
  width: auto;
  flex-direction: column;
  gap: 8px;
}

.app-shell.is-storage-collapsed .brand-wordmark,
.app-shell.is-storage-collapsed .new-button-copy,
.app-shell.is-storage-collapsed .nav-label,
.app-shell.is-storage-collapsed .nav-count {
  display: none;
}

.app-shell.is-storage-collapsed .brand-row,
.app-shell.is-storage-collapsed .storage-summary,
.app-shell.is-storage-collapsed .workspace-account-copy,
.app-shell.is-storage-collapsed .workspace-account-glyph {
  display: none;
}

.app-shell.is-storage-collapsed .workspace-account {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
}

.app-shell.is-storage-collapsed .workspace-account-avatar {
  width: 38px;
  height: 38px;
}

.app-shell.is-storage-collapsed .nav-button,
.app-shell.is-storage-collapsed .new-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  justify-content: center;
  gap: 0;
  padding: 0;
  min-height: 38px;
}

.app-shell.is-storage-collapsed .nav-button,
.app-shell.is-storage-collapsed .new-button,
.app-shell.is-storage-collapsed .sidebar-collapse-button {
  align-self: center;
}

.app-shell.is-storage-collapsed .new-button {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.app-shell.is-storage-collapsed .new-button-storage::before {
  display: none;
}

.app-shell.is-storage-collapsed .tree-children,
.app-shell.is-storage-collapsed .folder-group {
  display: none;
}

.app-shell.is-storage-collapsed .sidebar-collapse-button {
  color: var(--muted);
  opacity: 0.58;
  margin: 0;
}

.app-shell.is-storage-collapsed .new-wrap {
  width: auto;
}

.app-shell.is-storage-collapsed .nav-sections,
.app-shell.is-storage-collapsed .nav-group,
.app-shell.is-storage-collapsed .nav-section {
  width: auto;
}

.app-shell.is-storage-collapsed .nav-sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.app-shell.is-storage-collapsed .nav-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.app-shell.is-storage-collapsed .nav-icon,
.app-shell.is-storage-collapsed .new-button-plus,
.app-shell.is-storage-collapsed .sidebar-toggle-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin: 0;
}

.app-shell.is-storage-collapsed .new-menu {
  top: -2px;
  left: calc(100% + 10px);
  width: 228px;
  min-width: 228px;
}

.main {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-width: 0;
}

.vault-provider-announcement {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto auto;
  align-items: center;
  gap: 18px;
  margin: 12px 28px 0;
  padding: 16px 18px;
  background: #050505;
  color: #fff;
}

.vault-provider-announcement-copy {
  display: grid;
  gap: 4px;
}

.vault-provider-announcement-copy strong,
.vault-provider-announcement-copy p,
.vault-provider-announcement-copy small,
.vault-provider-announcement-eyebrow,
.vault-provider-announcement-button {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.vault-provider-announcement-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.vault-provider-announcement-copy strong {
  font-size: 16px;
  font-weight: 600;
}

.vault-provider-announcement-copy p {
  margin: 0;
  max-width: 72ch;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}

.vault-provider-announcement-logos {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
}

.vault-provider-announcement-logo {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 96px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.vault-provider-announcement-logo-mark {
  display: grid;
  place-items: center;
}

.vault-provider-announcement-logo-mark svg {
  width: 20px;
  height: 20px;
}

.vault-provider-announcement-logo small {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.vault-provider-announcement-actions {
  display: grid;
  justify-items: end;
}

.vault-provider-announcement-button {
  min-height: 40px;
  border-radius: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 28px 12px;
  background: var(--paper-glass);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
}

.topbar-doc {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}

.doc-topbar-left {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.doc-topbar-breadcrumbs {
  min-height: 16px;
}

.doc-topbar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
}

.doc-toolbar {
  display: flex;
}

.doc-dock {
  position: fixed;
  right: 32px;
  top: 92px;
  z-index: 60;
  width: 260px;
  padding: 14px;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  text-transform: none;
  animation: docDockEnter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.doc-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.doc-dock-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.doc-dock-title {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
}

.doc-dock-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.doc-dock-item {
  display: grid;
  place-items: center;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  color: var(--muted);
}

.doc-dock-item.is-active {
  border-color: var(--ink);
  color: var(--ink);
}

.doc-dock-shortcuts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 12px;
}

.search-shell {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0;
  border-bottom: 1px solid var(--ink);
  box-shadow: none;
  background: transparent;
}

.search-shell input {
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-transform: none;
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.search-shell input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.view-toggle {
  display: flex;
  gap: 8px;
  position: relative;
}

.topbar-view-button {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
}

.topbar-view-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.type-filter-shell {
  position: relative;
}

.type-filter-trigger {
  position: relative;
}

.type-filter-count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--contrast);
  color: var(--contrast-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.type-filter-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 30;
  text-transform: none;
}

.type-filter-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.type-filter-menu-head strong,
.type-filter-menu-head span {
  display: block;
}

.type-filter-menu-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.type-filter-clear {
  padding: 0;
  text-transform: uppercase;
}

.type-filter-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.type-filter-option {
  min-height: 52px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
  text-transform: none;
  font-weight: 600;
}

.type-filter-option:hover,
.type-filter-option.is-active {
  background: var(--active-bg);
  border-color: var(--ink);
}

.type-filter-option .paper-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--contrast);
  color: var(--contrast-ink);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.avatar-sidebar {
  flex: 0 0 auto;
}

.status-bar {
  min-height: 22px;
  padding: 0 28px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0;
}

.status-bar.is-visible {
  opacity: 1;
}

.page {
  position: relative;
  isolation: isolate;
  padding: 0 28px 28px;
}

.page-node-mode {
  padding-top: 18px;
}

.page > * {
  position: relative;
  z-index: 1;
}

.page > .workspace-watermark {
  z-index: 0;
}

.page-header,
.section-head,
.dialog-head,
.dialog-footer,
.form-actions,
.detail-actions,
.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-header,
.section-head {
  min-height: 92px;
  padding: 24px 0;
}

.page-section {
  margin-bottom: 20px;
}

.section-head h1,
.page-header h1,
.welcome-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}

.surface-page,
.surface-detail-page {
  display: grid;
  gap: 20px;
}

.surface-header {
  position: sticky;
  top: 0;
  z-index: 35;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 0 10px;
  background: linear-gradient(180deg, var(--body-bg) 74%, rgba(255, 255, 255, 0));
}

.surface-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 72px;
  min-height: 52px;
  padding: 0;
  color: var(--ink);
}

.surface-back-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 18px;
  line-height: 1;
}

.surface-header-center {
  min-width: 0;
}

.surface-header-title-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.surface-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 72px;
}

.surface-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 0 2px;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.surface-secondary-bar,
.surface-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.surface-secondary-bar {
  flex-wrap: wrap;
}

.surface-breadcrumbs {
  min-height: 24px;
}

.surface-breadcrumbs .breadcrumbs {
  margin: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.settings-page {
  max-width: 1220px;
  margin: 0 auto;
}

.settings-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-transform: none;
}

.settings-card-wide {
  grid-column: 1 / -1;
}

.settings-hero-card {
  gap: 18px;
  background: var(--settings-hero-bg);
}

.settings-card h2,
.settings-card p {
  margin: 0;
}

.settings-card h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.settings-card p {
  color: var(--muted);
  line-height: 1.5;
}

.settings-card-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 18px;
  align-items: end;
}

.settings-section-note {
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--settings-note-bg);
  color: var(--ink);
  line-height: 1.45;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.settings-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-xs);
}

.settings-stat-good {
  background: var(--settings-stat-good-bg);
}

.settings-stat-watch {
  background: var(--settings-stat-watch-bg);
}

.settings-stat-risk {
  background: var(--settings-stat-risk-bg);
}

.settings-stat-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.settings-stat-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.settings-stat-copy {
  display: grid;
  gap: 4px;
}

.settings-stat-copy span {
  color: var(--muted);
  font-size: 11px;
}

.settings-stat-copy strong {
  font-size: 16px;
  font-weight: 600;
}

.settings-form {
  display: grid;
  gap: 14px;
}

.settings-identity-notes {
  min-height: 112px;
}

.settings-logo-widget {
  display: grid;
  gap: 14px;
}

.settings-logo-preview {
  position: relative;
  min-height: 160px;
  display: grid;
  place-items: center;
  background: var(--settings-logo-preview-bg);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
}

.settings-logo-image {
  max-width: min(240px, 72%);
  max-height: 92px;
  object-fit: contain;
  opacity: 0.9;
}

.settings-logo-preview span {
  color: var(--muted);
}

.settings-logo-input {
  display: none;
}

.settings-option {
  min-width: 120px;
  padding: 12px 14px;
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
  color: var(--ink);
  font-weight: 600;
}

.settings-option:disabled {
  opacity: 0.56;
  cursor: default;
}

.settings-option.is-active {
  border-color: var(--ink);
}

.settings-option-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--contrast-ink);
}

.settings-inline-note {
  color: var(--muted);
  line-height: 1.5;
  text-transform: none;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.integration-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--integration-card-bg);
  box-shadow: var(--shadow-xs);
}

.integration-card-google {
  background: var(--integration-card-google-bg);
}

.integration-card-dropbox {
  background: var(--integration-card-dropbox-bg);
}

.integration-card-onedrive {
  background: var(--integration-card-onedrive-bg);
}

.integration-card-sharepoint {
  background: var(--integration-card-sharepoint-bg);
}

.integration-card-confluence {
  background: var(--integration-card-confluence-bg);
}

.integration-card-head,
.integration-card-topline,
.integration-status-row,
.integration-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.integration-card-head,
.integration-card-topline {
  justify-content: space-between;
}

.integration-status-row,
.integration-actions {
  flex-wrap: wrap;
}

.integration-card-meta {
  min-width: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}

.integration-card h3,
.integration-card p {
  margin: 0;
}

.integration-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.integration-card p,
.integration-card-detail {
  color: var(--muted);
  line-height: 1.45;
}

.integration-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--integration-mark-bg);
}

.integration-mark-glyph {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--ink);
}

.integration-mark-glyph svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.integration-mark-glyph-brand svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: none;
}

.integration-chip,
.integration-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--integration-chip-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

.integration-status-live {
  border-color: var(--integration-status-live-border);
}

.integration-status-muted {
  color: var(--muted);
}

.integration-status-connected {
  border-color: var(--integration-status-connected-border);
}

.integration-status-error {
  border-color: var(--integration-status-error-border);
  color: var(--integration-status-error-ink);
}

.integration-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.integration-fact {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.integration-fact span {
  color: var(--muted);
  font-size: 11px;
}

.integration-fact strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.integration-uri {
  display: block;
  word-break: break-all;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.45;
}

.integration-fact-wide {
  grid-column: 1 / -1;
}

.workspace-watermark {
  position: absolute;
  inset: 24px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.workspace-watermark-image {
  max-width: min(42vw, 360px);
  max-height: 180px;
  object-fit: contain;
  opacity: 0.055;
}

.brand-wordmark-image.is-default,
.settings-logo-image.is-default,
.workspace-watermark-image.is-default {
  filter: none;
}

:root[data-theme="dark"] .brand-wordmark-image.is-default,
:root[data-theme="dark"] .settings-logo-image.is-default,
:root[data-theme="dark"] .workspace-watermark-image.is-default {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-wordmark-image.is-default,
  :root:not([data-theme]) .settings-logo-image.is-default,
  :root:not([data-theme]) .workspace-watermark-image.is-default {
    filter: invert(1);
  }
}

@media (max-width: 820px) {
  .settings-section-head {
    grid-template-columns: 1fr;
  }

  .integration-facts {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="dark"] .new-button-storage {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

:root[data-theme="dark"] .new-button-storage::before {
  background: linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.18) 44%, rgba(255, 255, 255, 0.06) 54%, transparent 76%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .new-button-storage {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  }

  :root:not([data-theme]) .new-button-storage::before {
    background: linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.18) 44%, rgba(255, 255, 255, 0.06) 54%, transparent 76%);
  }
}

.plain-link,
.crumb-button {
  padding: 0;
  color: var(--muted);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.crumb-sep {
  color: var(--muted);
}

.grid-surface {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.list-surface,
.list-body {
  display: grid;
  gap: 0;
}

.grid-card,
.list-row {
  text-align: left;
  background: transparent;
  box-shadow: none;
}

.grid-card {
  display: grid;
  gap: 14px;
  padding: 0;
}

.paper-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  padding: 9px 0;
  align-items: center;
}

.paper-row-body,
.grid-card-body {
  display: grid;
  gap: 8px;
  align-content: start;
}

.grid-card-topline,
.paper-row-topline,
.paper-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paper-row-title,
.grid-card-title {
  font-size: 12pt;
  font-weight: 600;
  line-height: 1.1;
}

.paper-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-row-summary,
.grid-card-summary,
.grid-card-meta,
.paper-row-meta {
  color: var(--muted);
  font-size: 10pt;
  line-height: 1.2;
}

.paper-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.paper-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.grid-card-preview,
.paper-row-preview {
  min-width: 0;
  background: transparent;
  box-shadow: none;
}

.list-surface {
  background: transparent;
  box-shadow: none;
}

.list-body {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.list-row {
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--border);
}

.list-body .list-row:first-child {
  border-top: 0;
}

.list-row.paper-row {
  min-width: 0;
}

.list-row .paper-row-meta {
  min-width: 0;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row .paper-row-meta span {
  white-space: nowrap;
}

.list-row .paper-row-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
}

.paper-preview {
  position: relative;
  overflow: hidden;
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--stroke-faint);
}

.paper-preview-card {
  min-height: 220px;
}

.paper-preview-row {
  min-height: 78px;
}

.paper-preview-card,
.paper-preview-row {
  box-shadow: none;
}

.paper-preview-image {
  background: transparent;
}

.paper-preview-image-tag {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.paper-preview-folder {
  display: grid;
  place-items: center;
  background: var(--folder-preview-bg);
}

.paper-stack {
  position: relative;
  width: 160px;
  height: 120px;
}

.sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.sheet.back {
  transform: rotate(-8deg) translate(-12px, 10px);
}

.sheet.middle {
  transform: rotate(5deg) translate(8px, 4px);
}

.sheet.front {
  transform: translateY(-4px);
}

.paper-preview-doc,
.paper-preview-file,
.paper-preview-sheet,
.paper-preview-task_list,
.paper-preview-secret,
.paper-preview-board {
  padding: 18px;
}

.paper-preview-row.paper-preview-doc,
.paper-preview-row.paper-preview-file,
.paper-preview-row.paper-preview-sheet,
.paper-preview-row.paper-preview-task_list,
.paper-preview-row.paper-preview-secret,
.paper-preview-row.paper-preview-board,
.paper-preview-row.paper-preview-whiteboard {
  padding: 10px;
}

.paper-preview-row.paper-preview-folder {
  padding: 8px;
}

.paper-preview-row .paper-page {
  min-height: 58px;
  padding: 10px;
}

.paper-preview-row .paper-stack {
  width: 74px;
  height: 56px;
}

.paper-preview-row .sheet {
  box-shadow: var(--shadow-xs);
}

.paper-preview-row .sheet.back {
  transform: rotate(-8deg) translate(-4px, 5px);
}

.paper-preview-row .sheet.middle {
  transform: rotate(5deg) translate(4px, 2px);
}

.paper-preview-row .sheet.front {
  transform: translateY(-1px);
}

.paper-preview-row .paper-lines {
  gap: 5px;
}

.paper-preview-row .paper-page-title {
  margin-bottom: 6px;
  font-size: 8pt;
}

.paper-preview-row .sheet-grid {
  gap: 5px;
}

.paper-preview-row .sheet-grid-row {
  min-height: 0;
}

.paper-preview-row .board-note {
  transform: none;
}

.paper-preview-row .board-note.a,
.paper-preview-row .board-note.b,
.paper-preview-row .board-note.c {
  width: 26px;
  height: 22px;
}

.paper-preview-row .board-note-labels {
  gap: 5px;
  font-size: 7pt;
}

.paper-preview-row .task-preview-list {
  gap: 6px;
}

.paper-preview-row .task-preview-row {
  font-size: 8pt;
}

.paper-preview-row .secret-slip {
  width: 54px;
  height: 32px;
}

.paper-preview-row .secret-dots {
  gap: 6px;
}

.paper-preview-row .secret-dots span {
  width: 7px;
  height: 7px;
}

.paper-preview-row .paper-icon {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  font-size: 9px;
}

.paper-row-meta {
  gap: 8px;
}

.paper-row-meta span:not(:last-child)::after {
  content: "•";
  margin-left: 8px;
  color: var(--border-heavy);
}

.paper-row-summary {
  max-width: 72ch;
}

.list-row:hover {
  transform: none;
  box-shadow: none;
  background: var(--active-bg);
}

.paper-page {
  min-height: 188px;
  padding: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.paper-page-title {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 12pt;
}

.paper-lines {
  display: grid;
  gap: 8px;
}

.paper-lines span {
  display: block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12pt;
}

.sheet-grid {
  display: grid;
  gap: 8px;
  min-height: 188px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.sheet-grid-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sheet-grid-row span {
  min-height: 32px;
  padding: 8px;
  background: var(--stroke-soft);
  font-size: 12pt;
}

.sheet-grid-head span {
  background: var(--contrast);
  color: var(--contrast-ink);
  font-weight: 600;
}

.paper-preview-board {
  display: grid;
  place-items: center;
}

.board-note {
  position: absolute;
  width: 92px;
  height: 92px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.board-note.a {
  transform: translate(-64px, -24px) rotate(-8deg);
}

.board-note.b {
  transform: translate(12px, -6px) rotate(5deg);
}

.board-note.c {
  transform: translate(-18px, 50px) rotate(-2deg);
}

.board-note-labels {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  width: 70%;
  color: var(--muted);
  font-size: 12pt;
}

.paper-preview-whiteboard {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.paper-preview-whiteboard .whiteboard-mini-grid {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image: radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.12) 1px, transparent 1px);
  background-size: 14px 14px;
}

:root[data-theme="dark"] .paper-preview-whiteboard .whiteboard-mini-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
}

.paper-preview-whiteboard .whiteboard-mini-note {
  position: absolute;
  width: 44%;
  height: 28%;
  background: var(--paper-soft);
  box-shadow: var(--shadow-xs);
}

.paper-preview-whiteboard .whiteboard-mini-note.a {
  left: 12%;
  top: 18%;
}

.paper-preview-whiteboard .whiteboard-mini-note.b {
  left: 40%;
  top: 44%;
  background: var(--paper);
}

.paper-preview-whiteboard .whiteboard-mini-note.c {
  left: 18%;
  top: 58%;
  width: 36%;
  height: 22%;
  background: var(--paper-deep);
}

.paper-preview-whiteboard .whiteboard-mini-link {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 44%;
  height: 2px;
  background: rgba(17, 17, 17, 0.16);
  transform: rotate(12deg);
}

:root[data-theme="dark"] .paper-preview-whiteboard .whiteboard-mini-link {
  background: rgba(255, 255, 255, 0.18);
}

.task-preview-list {
  display: grid;
  gap: 10px;
  min-height: 188px;
  padding: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.task-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.task-preview-row.is-complete span:last-child {
  text-decoration: line-through;
  opacity: 0.72;
}

.task-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--contrast);
  background: transparent;
}

.task-check.is-checked {
  background: var(--contrast);
}

.secret-slip {
  min-height: 188px;
  background: var(--contrast);
  box-shadow: var(--shadow-sm);
}

.secret-dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}

.secret-dots span {
  width: 8px;
  height: 8px;
  background: var(--secret-dot);
  border-radius: 50%;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}

.detail-layout-sheet {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.doc-mode {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.doc-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 28px;
  align-items: start;
  justify-content: center;
}

.doc-form,
.doc-pages {
  display: grid;
  gap: 24px;
  justify-items: center;
}

.doc-toolbar-shell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  width: auto;
}

.doc-pages-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

.doc-sheet-wrap {
  display: grid;
  grid-template-columns: 36px minmax(0, 210mm);
  gap: 14px;
  align-items: start;
}

.doc-page-label {
  position: sticky;
  top: 24px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 24px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  background: transparent;
  box-shadow: none;
}

.doc-sheet {
  display: grid;
  gap: 18px;
  width: min(210mm, calc(100vw - 128px));
  min-height: 297mm;
  padding: 18mm 16mm 16mm;
  background: var(--doc-sheet-bg);
  box-shadow: var(--shadow-lg);
  color: var(--doc-text);
}

.doc-sheet-top,
.doc-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.doc-brand-lockup,
.doc-page-meta,
.doc-sheet-foot {
  color: var(--doc-muted);
  font-size: 12px;
  text-transform: none;
}

.doc-brand-panel {
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  flex: 1;
}

.doc-brand-mark {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
}

.doc-brand-mark-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.doc-brand-copy,
.doc-page-meta,
.doc-sheet-head {
  display: grid;
  gap: 4px;
}

.doc-brand-copy strong {
  color: var(--doc-text);
  font-size: 16px;
}

.doc-brand-copy span {
  color: var(--doc-muted);
  font-size: 12px;
  text-transform: none;
}

.doc-address-card {
  width: 72mm;
  min-width: 72mm;
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
}

.doc-address-card.is-secondary {
  opacity: 0;
  pointer-events: none;
}

.doc-address-label {
  color: var(--doc-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.doc-address-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--doc-text);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.doc-address-meta {
  display: grid;
  gap: 2px;
  color: var(--doc-muted);
  font-size: 11px;
  text-transform: none;
}

.doc-address-meta strong {
  color: var(--doc-text);
  font-weight: 600;
}

.doc-template-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.92) 0 144px, rgba(17, 17, 17, 0.12) 144px 100%);
}

.doc-title-input,
.doc-summary-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-transform: none;
}

.doc-sheet-kicker {
  color: var(--doc-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.doc-title-input {
  max-width: 150mm;
  justify-self: start;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 600;
  text-align: left;
  border-bottom: 0;
  padding-bottom: 0;
}

.doc-sheet-credentials {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  color: var(--doc-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.doc-sheet-head.is-secondary .doc-title-input,
.doc-sheet-head.is-secondary .doc-summary-input,
.doc-sheet-head.is-secondary .doc-sheet-kicker,
.doc-sheet-head.is-secondary .doc-sheet-credentials {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
}

.doc-page-input {
  width: 100%;
  height: 214mm;
  min-height: 214mm;
  resize: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--doc-text);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12pt;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  overflow: hidden;
}

.doc-page-input-measure {
  position: fixed;
  left: -9999px;
  top: 0;
  pointer-events: none;
  visibility: hidden;
}

.doc-side-rail {
  position: sticky;
  top: 124px;
  display: grid;
  gap: 12px;
  align-content: start;
  justify-content: start;
  padding: 10px 0 10px 14px;
  border-left: 1px solid rgba(17, 17, 17, 0.08);
}

.doc-side-rail-group {
  display: grid;
  gap: 8px;
}

.doc-side-tool {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.doc-side-tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.doc-side-tool:hover,
.doc-side-tool:focus-visible {
  background: transparent;
  color: var(--contrast);
}

.doc-sheet-wrap.is-entering {
  animation: docSheetEnter 260ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

@keyframes docSheetEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes docDockEnter {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.doc-actions {
  justify-content: flex-end;
}

.editor-panel,
.meta-panel,
.dialog {
  padding: 18px;
}

.meta-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.meta-block {
  display: grid;
  gap: 4px;
}

.meta-block strong {
  font-weight: 600;
}

.edit-form {
  display: grid;
  gap: 16px;
}

.edit-form.compact {
  margin-top: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.task-list-head,
.task-list-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-progress {
  color: var(--muted);
  font-weight: 600;
}

.task-editor-list {
  display: grid;
  gap: 12px;
}

.task-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.task-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.task-toggle-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--contrast);
  background: transparent;
}

.task-toggle input:checked + .task-toggle-box {
  background:
    linear-gradient(135deg, transparent 42%, var(--checkmark-fg) 42% 58%, transparent 58%),
    linear-gradient(45deg, transparent 58%, var(--checkmark-fg) 58% 74%, transparent 74%);
  background-color: var(--contrast);
}

.task-line-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  padding: 10px 0;
}

.task-row-remove {
  padding: 0;
  color: var(--muted);
}

.task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}


.line-input,
.editor-area {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-strong);
}

.editor-area {
  min-height: 180px;
  padding: 14px;
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--stroke-soft);
}

.security-input,
.security-select,
.security-secret-view,
.security-overview-card,
.security-card,
.security-side-card {
  text-transform: none;
}

.security-select {
  appearance: none;
  cursor: pointer;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 1px),
    calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sheet-editor-panel {
  display: grid;
  gap: 18px;
}

.page-sheet-mode {
  padding: 0;
}

.sheet-mode {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  background: var(--bg);
}

.sheet-frame {
  display: grid;
  gap: 10px;
  padding: 14px 18px 12px;
  background: var(--sheet-header);
  border-bottom: 1px solid var(--sheet-grid-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.sheet-surface-bar {
  align-items: flex-start;
}

.sheet-titlebar,
.sheet-menubar,
.sheet-toolbar,
.sheet-formula-row,
.sheet-header-actions,
.sheet-toolbar-group,
.sheet-tabs,
.sheet-bottom-bar,
.sheet-selection-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sheet-titlebar,
.sheet-toolbar,
.sheet-bottom-bar {
  justify-content: space-between;
}

.sheet-titlebar,
.sheet-toolbar,
.sheet-formula-row,
.sheet-bottom-bar,
.sheet-menubar {
  flex-wrap: wrap;
}

.sheet-title-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.sheet-surface-title {
  color: var(--ink);
}

.sheet-subtitle-input {
  width: min(100%, 720px);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
  text-transform: none;
}

.sheet-sync-state,
.sheet-toolbar-metrics span,
.sheet-selection-meta span,
.sheet-dashboard-head span,
.sheet-dashboard-head p,
.metric-card span,
.dashboard-card span,
.sheet-empty-dashboard,
.sheet-bottom-summary,
.sheet-summary-chip {
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
}

.sheet-sync-state {
  padding-top: 2px;
}

.sheet-breadcrumbs,
.sheet-breadcrumbs .breadcrumbs {
  margin: 0;
}

.sheet-breadcrumbs .crumb-button,
.sheet-breadcrumbs .crumb-sep {
  font-size: 12px;
  text-transform: none;
}

.sheet-header-actions,
.sheet-tabs,
.sheet-toolbar-group {
  flex-wrap: wrap;
}

.sheet-pill,
.sheet-tool,
.sheet-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--sheet-grid-border);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.sheet-pill:hover,
.sheet-tool:hover,
.sheet-tab:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--sheet-accent);
}

.sheet-pill.is-active,
.sheet-tool.is-active,
.sheet-tab.is-active {
  background: var(--sheet-tab-bg);
  border-color: var(--sheet-accent);
  color: var(--sheet-accent-ink);
}

.sheet-pill-primary {
  background: var(--sheet-accent);
  border-color: var(--sheet-accent);
  color: var(--sheet-accent-ink);
}

.sheet-pill-primary:hover {
  color: var(--sheet-accent-ink);
}

.sheet-menu-pill {
  background: transparent;
}

.sheet-toolbar-select,
.sheet-name-box,
.sheet-formula-input,
.sheet-toolbar-text {
  border: 1px solid var(--sheet-grid-border);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  text-transform: none;
}

.sheet-formula-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--sheet-grid-border);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}

.sheet-formula-shell span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.sheet-name-box {
  width: 92px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
}

.sheet-toolbar-select {
  min-width: 112px;
  padding: 10px 12px;
}

.sheet-toolbar-text {
  min-width: 180px;
  padding: 10px 12px;
  border-left: 0;
}

.sheet-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
}

.sheet-toolbar-field .sheet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-right: 1px solid var(--sheet-grid-border);
}

.sheet-color-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
}

.sheet-color-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sheet-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.sheet-icon svg {
  width: 100%;
  height: 100%;
}

.sheet-formula-input {
  width: 100%;
  border: 0;
  padding: 10px 0;
  background: transparent;
}

.sheet-selection-meta {
  justify-content: flex-end;
  min-width: 180px;
}

.sheet-selection-meta strong,
.dashboard-card strong,
.metric-card strong {
  font-weight: 600;
}

.sheet-selection-meta strong {
  text-transform: none;
}

.sheet-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.sheet-stage.is-dashboard-open {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
}

.sheet-workspace {
  min-width: 0;
  background: var(--paper);
  overflow: auto;
}

.sheet-grid-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - 246px);
  background: var(--paper);
  overflow: auto;
}

.sheet-grid-topbar,
.sheet-grid-row-live {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
}

.sheet-grid-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
}

.sheet-corner-cell,
.sheet-row-header,
.sheet-column-header,
.sheet-cell {
  border-right: 1px solid var(--sheet-grid-border);
  border-bottom: 1px solid var(--sheet-grid-border);
}

.sheet-corner-cell,
.sheet-row-header,
.sheet-column-header,
.sheet-column-endcap,
.sheet-add-row-bar {
  background: var(--sheet-toolbar);
}

.sheet-corner-cell {
  min-height: 62px;
  position: sticky;
  left: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-top: 0;
  border-left: 0;
  color: var(--ink);
  cursor: pointer;
}

.sheet-column-track,
.sheet-row-track {
  display: grid;
  min-width: max-content;
}

.sheet-column-track {
  grid-template-columns: repeat(var(--sheet-columns, 10), minmax(180px, 1fr)) 164px;
}

.sheet-row-track {
  grid-template-columns: repeat(var(--sheet-columns, 10), minmax(180px, 1fr));
}

.sheet-column-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border-top: 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.sheet-column-header,
.sheet-row-header,
.sheet-column-endcap,
.sheet-add-row-bar {
  appearance: none;
  padding: 0;
  border-left: 0;
  font: inherit;
}

.sheet-column-header.is-range-selected,
.sheet-row-header.is-range-selected,
.sheet-corner-cell.is-selected {
  background: var(--paper);
}

.sheet-column-header.is-selected,
.sheet-row-header.is-selected {
  box-shadow: inset 0 0 0 2px var(--sheet-accent);
}

.sheet-column-header-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
}

.sheet-column-header span,
.sheet-column-header small,
.sheet-row-index {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
}

.sheet-column-header strong {
  font-size: 13px;
  text-transform: none;
}

.sheet-grid-body {
  display: grid;
  align-content: start;
}

.sheet-row-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  position: sticky;
  left: 0;
  z-index: 3;
  cursor: pointer;
  color: var(--ink);
}

.sheet-column-endcap,
.sheet-add-row-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 16px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--sheet-grid-border);
}

.sheet-column-endcap span,
.sheet-add-row-bar span {
  font-size: 12px;
  text-transform: none;
}

.sheet-column-endcap {
  position: sticky;
  right: 0;
  z-index: 4;
}

.sheet-grid-add-row {
  grid-template-columns: 56px minmax(0, 1fr);
}

.sheet-add-row-spacer {
  position: sticky;
  left: 0;
  border-right: 1px solid var(--sheet-grid-border);
  border-bottom: 1px solid var(--sheet-grid-border);
  background: var(--sheet-toolbar);
}

.sheet-axis-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: #fbfbfa;
  color: #171717;
  box-shadow: none;
}

.sheet-axis-add:hover {
  border-color: var(--sheet-accent);
  background: #fff;
}

.sheet-axis-add:focus-visible {
  outline: 2px solid var(--sheet-accent);
  outline-offset: 2px;
}

.sheet-axis-add .sheet-icon {
  width: 18px;
  height: 18px;
}

.sheet-axis-add-row {
  width: 28px;
  height: 28px;
}

.sheet-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  background: var(--cell-bg, var(--sheet-cell-bg));
  color: var(--cell-color, var(--ink));
}

.sheet-cell.is-range-selected {
  background:
    linear-gradient(0deg, rgba(17, 17, 17, 0.035), rgba(17, 17, 17, 0.035)),
    var(--cell-bg, var(--sheet-cell-bg));
}

.sheet-cell.is-selected {
  box-shadow: inset 0 0 0 2px var(--sheet-accent);
  z-index: 2;
}

.sheet-cell.is-bold .sheet-cell-input {
  font-weight: 600;
}

.sheet-cell.is-italic .sheet-cell-input {
  font-style: italic;
}

.sheet-cell.is-selected::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  background: var(--sheet-accent);
}

.sheet-cell.is-numeric {
  justify-content: flex-end;
}

.sheet-cell-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  text-transform: none;
  font: inherit;
}

.sheet-cell.is-numeric .sheet-cell-input {
  text-align: right;
}

.sheet-dashboard-page-body,
.dashboard-metrics,
.dashboard-grid {
  display: grid;
  gap: 12px;
}

.sheet-dashboard-page {
  display: none;
  gap: 18px;
  padding: 18px;
  background: var(--sheet-header);
  border-left: 1px solid var(--sheet-grid-border);
}

.sheet-stage.is-dashboard-open .sheet-dashboard-page {
  display: grid;
}

.sheet-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.sheet-dashboard-hero-copy,
.sheet-dashboard-hero-stats,
.sheet-dashboard-hero-card {
  display: grid;
  gap: 8px;
}

.sheet-dashboard-hero-copy,
.sheet-dashboard-hero-card {
  padding: 18px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
}

.sheet-dashboard-hero-copy span,
.sheet-dashboard-hero-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: none;
}

.sheet-dashboard-hero-copy h2,
.sheet-dashboard-hero-card strong {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  text-transform: none;
}

.sheet-dashboard-hero-copy p {
  margin: 0;
  color: var(--muted);
  text-transform: none;
  line-height: 1.5;
}

.sheet-dashboard-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sheet-dashboard-insights span {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper-soft);
  color: var(--muted);
  font-size: 11px;
}

.sheet-dashboard-hero-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.dashboard-card,
.sheet-empty-dashboard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
  box-shadow: none;
}

.sheet-bottom-bar {
  padding: 12px 18px 16px;
  background: var(--sheet-toolbar);
  border-top: 1px solid var(--sheet-grid-border);
  position: sticky;
  bottom: 0;
  z-index: 18;
}

.dashboard-metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
  display: grid;
  gap: 10px;
}

.metric-card strong {
  font-size: 22px;
  line-height: 1;
}

.dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dashboard-card {
  display: grid;
  gap: 14px;
  background: var(--dashboard-card-bg);
}

.dashboard-card-head {
  display: grid;
  gap: 6px;
}

.dashboard-chart-shell,
.dashboard-progress-list,
.dashboard-ring-wrap,
.dashboard-axis-labels,
.dashboard-legend {
  display: grid;
  gap: 12px;
}

.dashboard-svg-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.dashboard-axis-line {
  stroke: var(--border-heavy);
  stroke-width: 1;
}

.dashboard-axis-labels {
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}

.dashboard-axis-labels span {
  display: grid;
  gap: 4px;
}

.dashboard-axis-labels strong,
.dashboard-progress-row strong,
.dashboard-legend-row strong {
  font-size: 12px;
}

.dashboard-axis-labels small {
  color: var(--muted);
  font-size: 11px;
}

.dashboard-ring-wrap {
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
}

.dashboard-ring {
  width: 160px;
  aspect-ratio: 1;
  padding: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.dashboard-ring-center {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
}

.dashboard-ring-center span {
  color: var(--muted);
  font-size: 11px;
}

.dashboard-ring-center strong {
  font-size: 18px;
}

.dashboard-legend-row,
.dashboard-progress-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dashboard-legend-swatch {
  width: 12px;
  height: 12px;
}

.dashboard-progress-track {
  height: 10px;
  background: var(--border);
}

.dashboard-progress-fill {
  height: 100%;
}

.sheet-empty-chart {
  padding: 18px;
  background: var(--paper-soft);
  color: var(--muted);
}

.sheet-context-menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.sheet-context-action {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
}

.sheet-context-action:hover {
  background: var(--paper-soft);
}

.sheet-context-action small {
  color: var(--muted);
  font-size: 11px;
}

.sheet-mode {
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg);
}

.sheet-frame {
  gap: 14px;
  padding: 12px 18px 14px;
  background: color-mix(in srgb, var(--sheet-header) 92%, var(--paper) 8%);
}

.sheet-breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sheet-toolbar-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sheet-view-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
}

.sheet-view-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.sheet-view-toggle-button.is-active {
  background: var(--sheet-accent);
  color: var(--sheet-accent-ink);
}

.sheet-toolbar,
.sheet-formula-row {
  gap: 14px;
}

.sheet-toolbar-group {
  gap: 10px;
}

.sheet-toolbar-metrics {
  margin-left: auto;
}

.sheet-toolbar-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--sheet-grid-border);
  background: rgba(255, 255, 255, 0.55);
}

.sheet-tool,
.sheet-color-control,
.sheet-toolbar-field,
.sheet-name-box,
.sheet-formula-shell,
.sheet-context-action,
.sheet-type-option,
.sheet-date-nav,
.sheet-date-action,
.sheet-date-day {
  border-radius: 0;
}

.sheet-tool,
.sheet-color-control {
  min-height: 40px;
}

.sheet-color-control {
  gap: 8px;
  width: auto;
  padding: 0 12px;
}

.sheet-color-control span {
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.sheet-color-control-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.sheet-column-type-pill {
  min-width: 124px;
  justify-content: flex-start;
}

.sheet-toolbar-field {
  align-items: stretch;
  min-height: 40px;
}

.sheet-toolbar-label {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--sheet-grid-border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sheet-toolbar-field-column {
  min-width: 220px;
}

.sheet-toolbar-text {
  border-left: 0;
  min-width: 180px;
}

.sheet-name-box,
.sheet-formula-shell,
.sheet-selection-meta {
  min-height: 40px;
}

.sheet-selection-meta {
  display: grid;
  gap: 2px;
  justify-items: end;
  min-width: 168px;
}

.sheet-selection-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sheet-stage,
.sheet-stage.is-dashboard-open {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.sheet-workspace {
  overflow: auto;
  padding: 0 18px 18px;
  background: var(--bg);
}

.sheet-grid-shell {
  width: max-content;
  min-width: 100%;
  min-height: calc(100vh - 225px);
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
}

.sheet-grid-topbar,
.sheet-grid-row-live,
.sheet-grid-add-row {
  grid-template-columns: 54px minmax(0, 1fr);
  min-width: max-content;
}

.sheet-column-track,
.sheet-row-track,
.sheet-grid-body {
  min-width: max-content;
}

.sheet-corner-cell,
.sheet-row-header,
.sheet-column-header,
.sheet-column-endcap,
.sheet-add-row-bar,
.sheet-add-row-spacer {
  background: #f4f4f1;
}

.sheet-column-header {
  min-height: 82px;
  padding: 0;
}

.sheet-column-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 0;
}

.sheet-column-letter {
  letter-spacing: 0.04em;
}

.sheet-column-type-trigger,
.sheet-date-nav,
.sheet-date-action,
.sheet-type-option,
.sheet-context-action,
.sheet-date-day {
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.sheet-column-type-trigger,
.sheet-date-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: var(--paper);
  color: var(--ink);
}

.sheet-column-title-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 12px 12px;
}

.sheet-column-type-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: var(--paper);
}

.sheet-column-header-copy {
  padding: 0;
}

.sheet-row-header,
.sheet-cell {
  min-height: 56px;
}

.sheet-column-endcap,
.sheet-add-row-bar {
  min-height: 56px;
  font-weight: 600;
}

.sheet-cell {
  padding: 0 14px;
  box-sizing: border-box;
}

.sheet-cell-input,
.sheet-date-trigger {
  width: 100%;
  font-size: 15px;
}

.sheet-date-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 12px 0;
  text-transform: none;
}

.sheet-date-trigger .sheet-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.sheet-floating-panel {
  position: fixed;
  z-index: 60;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
  box-shadow: 0 18px 36px rgba(17, 17, 17, 0.12);
}

.sheet-context-menu,
.sheet-type-menu {
  min-width: 220px;
  padding: 8px;
}

.sheet-type-menu.is-countries-config {
  width: min(460px, calc(100vw - 24px));
  max-height: min(76vh, 840px);
  overflow: auto;
}

.sheet-type-group {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  box-shadow: inset 0 -1px 0 var(--sheet-grid-border);
}

.sheet-context-action,
.sheet-type-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
}

.sheet-country-config {
  display: grid;
  gap: 14px;
  padding: 0 4px 4px;
}

.sheet-country-config-head {
  display: grid;
  gap: 4px;
  padding: 0 6px;
}

.sheet-country-config-head strong {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sheet-country-config-head small,
.sheet-country-region-toggle small {
  color: var(--muted);
  line-height: 1.4;
}

.sheet-country-config-reset,
.sheet-country-region-toggle,
.sheet-country-pill {
  font: inherit;
}

.sheet-country-config-reset,
.sheet-country-region-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}

.sheet-country-config-reset:hover,
.sheet-country-region-toggle:hover,
.sheet-country-region-toggle.is-active {
  background: var(--paper-soft);
}

.sheet-country-region-block {
  display: grid;
  gap: 8px;
}

.sheet-country-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sheet-country-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: var(--paper);
  color: var(--ink);
}

.sheet-country-pill:hover,
.sheet-country-pill.is-active {
  background: var(--paper-soft);
}

.sheet-country-pill.is-disabled,
.sheet-country-pill:disabled {
  opacity: 0.38;
}

.sheet-context-action {
  display: grid;
  gap: 2px;
}

.sheet-type-option .sheet-icon {
  width: 18px;
  height: 18px;
}

.sheet-context-action:hover,
.sheet-type-option:hover,
.sheet-type-option.is-active,
.sheet-date-nav:hover,
.sheet-date-action:hover,
.sheet-date-day:hover,
.sheet-column-type-trigger:hover {
  background: var(--paper-soft);
}

.sheet-date-popover {
  width: 296px;
  padding: 14px;
}

.sheet-date-popover-head,
.sheet-date-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sheet-date-popover-head {
  margin-bottom: 12px;
}

.sheet-date-popover-head strong {
  font-size: 14px;
}

.sheet-date-weekdays,
.sheet-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.sheet-date-weekdays {
  margin-bottom: 8px;
}

.sheet-date-weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sheet-date-empty,
.sheet-date-day {
  aspect-ratio: 1;
}

.sheet-date-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: #f4f4f1;
  color: var(--ink);
  font: inherit;
}

.sheet-date-day.is-today {
  border-color: var(--sheet-grid-border);
}

.sheet-date-day.is-selected {
  background: var(--sheet-accent);
  color: var(--sheet-accent-ink);
}

.sheet-date-actions {
  margin-top: 12px;
}

.sheet-date-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--sheet-grid-border);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.sheet-frame.is-dashboard-frame {
  gap: 10px;
  padding-bottom: 8px;
  background: #fff;
}

.sheet-stage.is-dashboard-open {
  background: #fff;
}

.sheet-dashboard-page {
  --dashboard-gray-0: #ffffff;
  --dashboard-gray-1: #f2f2f2;
  --dashboard-gray-2: #d9d9d9;
  --dashboard-gray-3: #a8a8a8;
  --dashboard-gray-4: #5a5a5a;
  --dashboard-gray-5: #161616;
  --dashboard-gray-6: #000000;
  --dashboard-card-glow:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.99) 0%, rgba(247, 247, 247, 0.98) 24%, rgba(230, 230, 230, 0.48) 48%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(circle at 50% 118%, rgba(226, 226, 226, 0.18) 0%, rgba(255, 255, 255, 0) 58%);
  --dashboard-divider-gradient:
    linear-gradient(127deg, rgba(255, 255, 255, 0) 0%, rgba(224, 224, 224, 0.86) 30%, rgba(28, 28, 28, 0.9) 50%, rgba(224, 224, 224, 0.86) 70%, rgba(255, 255, 255, 0) 100%);
  --dashboard-number-gradient:
    linear-gradient(127deg, #dddddd 0%, #cecece 18%, #a8a8a8 46%, #626262 72%, #1e1e1e 100%);
  --dashboard-soft-number-gradient:
    linear-gradient(127deg, #e5e5e5 0%, #d7d7d7 28%, #bebebe 58%, #656565 100%);
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: calc(100vh - 170px);
  padding: 4px 18px 24px;
  background: #fff;
  border-left: 0;
  align-content: start;
}

.sheet-dashboard-kpis,
.sheet-dashboard-main-grid,
.sheet-dashboard-secondary-grid {
  display: grid;
  gap: 12px;
  width: 100%;
}

.sheet-dashboard-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sheet-dashboard-main-grid {
  grid-template-columns: minmax(0, 1.85fr) minmax(360px, 1fr);
  align-items: start;
}

.sheet-dashboard-secondary-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.sheet-dashboard-kpis > *,
.sheet-dashboard-main-grid > *,
.sheet-dashboard-secondary-grid > * {
  min-width: 0;
}

.metric-card,
.dashboard-card,
.sheet-empty-dashboard {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 20px 18px;
  border: 0;
  background: var(--dashboard-card-glow), #fff;
  box-shadow:
    0 18px 44px rgba(17, 17, 17, 0.05),
    0 0 22px rgba(214, 214, 214, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  overflow: hidden;
  text-align: center;
  justify-items: center;
  letter-spacing: 0;
  text-transform: uppercase;
}

.metric-card::before,
.dashboard-card::before {
  content: none;
}

.metric-card {
  min-height: 136px;
  align-content: center;
}

.metric-card span,
.sheet-dashboard-tooltip span,
.dashboard-mini-table-row.is-head span {
  color: #111;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-card-divider {
  width: min(128px, 52%);
  height: 1px;
  background: var(--dashboard-divider-gradient);
}

.metric-card strong {
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  background: var(--dashboard-number-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.metric-card small,
.sheet-empty-dashboard p,
.sheet-dashboard-tooltip small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-transform: uppercase;
}

.dashboard-card {
  align-content: start;
  min-height: 340px;
}

.dashboard-card-primary,
.dashboard-card-readout {
  min-height: 0;
}

.dashboard-card-primary {
  min-height: 400px;
}

.dashboard-card-readout {
  align-self: start;
  gap: 14px;
  padding-top: 18px;
  padding-bottom: 16px;
}

.dashboard-card-table {
  min-height: 0;
}

.dashboard-card-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.dashboard-card-titleblock {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
}

.dashboard-card-titleblock strong,
.sheet-empty-dashboard strong,
.dashboard-brief-row strong,
.dashboard-readout-callout strong,
.dashboard-card-summary strong {
  text-transform: uppercase;
}

.dashboard-card-titleblock strong {
  color: #111;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.dashboard-card-summary {
  display: grid;
  gap: 0;
  justify-items: center;
  max-width: none;
  width: 100%;
  text-align: center;
}

.dashboard-card-summary strong,
.dashboard-readout-callout strong {
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 0.95;
  letter-spacing: 0;
  background: var(--dashboard-number-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-card-primary .dashboard-card-summary strong {
  font-size: clamp(23px, 3vw, 34px);
}

.dashboard-chart-shell,
.dashboard-progress-list,
.dashboard-ring-wrap,
.dashboard-axis-labels,
.dashboard-legend,
.dashboard-brief-list,
.dashboard-mini-table {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.dashboard-chart-shell.is-primary {
  gap: 18px;
}

.dashboard-svg-chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.dashboard-grid-line {
  stroke: rgba(17, 17, 17, 0.08);
  stroke-width: 1;
}

.dashboard-axis-line {
  stroke: rgba(17, 17, 17, 0.18);
  stroke-width: 1;
}

.dashboard-axis-labels {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 10px;
}

.dashboard-axis-labels span {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 0;
  justify-items: center;
}

.dashboard-axis-labels strong,
.dashboard-progress-row strong,
.dashboard-legend-row strong {
  font-size: 13px;
  letter-spacing: 0;
}

.dashboard-axis-labels small {
  font-size: 11px;
  text-transform: uppercase;
  background: var(--dashboard-soft-number-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-ring-wrap {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
}

.dashboard-donut-chart {
  max-width: 220px;
}

.dashboard-donut-track {
  stroke: rgba(17, 17, 17, 0.06);
  stroke-width: 28;
}

.dashboard-donut-center {
  fill: var(--paper);
}

.dashboard-donut-total-label,
.dashboard-donut-total-value {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.dashboard-donut-total-label {
  font-size: 12px;
  opacity: 0.56;
  text-transform: uppercase;
  fill: var(--ink);
}

.dashboard-donut-total-value {
  font-size: 24px;
  font-weight: 600;
}

.dashboard-progress-row strong,
.dashboard-legend-row strong,
.dashboard-brief-row strong,
.dashboard-mini-table-row > strong,
.dashboard-country-list-row strong {
  background: var(--dashboard-number-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-legend-row,
.dashboard-progress-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.dashboard-legend-row,
.dashboard-progress-row,
.dashboard-mini-table-row {
  padding: 12px 0;
  border-top: 0;
}

.dashboard-legend-swatch {
  width: 11px;
  height: 11px;
  background: linear-gradient(127deg, var(--dashboard-gray-2), var(--dashboard-gray-6));
}

.dashboard-progress-list {
  align-content: start;
  width: 100%;
}

.dashboard-progress-row {
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto;
  padding: 10px 0;
  border: 0;
  background: #fff;
}

.dashboard-progress-track {
  height: 8px;
  background: linear-gradient(127deg, rgba(17, 17, 17, 0.06), rgba(17, 17, 17, 0.1));
  overflow: hidden;
}

.dashboard-progress-fill {
  height: 100%;
}

.dashboard-country-shell {
  display: grid;
  gap: 14px;
  width: 100%;
  align-content: start;
}

.dashboard-country-chart {
  width: 100%;
  height: auto;
}

.dashboard-map-backdrop {
  fill: rgba(255, 255, 255, 0.92);
}

.dashboard-map-graticule {
  stroke: rgba(17, 17, 17, 0.05);
  stroke-width: 1;
}

.dashboard-world-land {
  fill: rgba(17, 17, 17, 0.05);
  stroke: rgba(17, 17, 17, 0.11);
  stroke-width: 1.2;
}

.dashboard-country-list {
  display: grid;
  gap: 10px;
  width: 100%;
}

.dashboard-country-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}

.dashboard-country-list-row > span:nth-child(2) {
  min-width: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-country-list-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dashboard-point,
.dashboard-bar,
.dashboard-donut-segment,
.dashboard-progress-fill,
.dashboard-legend-row,
.dashboard-progress-row,
.dashboard-country-dot,
.dashboard-country-glow,
.dashboard-country-list-row {
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    stroke-width 140ms ease;
}

.dashboard-point {
  stroke: var(--paper);
  stroke-width: 2px;
  transform-origin: center;
  transform-box: fill-box;
}

.dashboard-bar-group,
.dashboard-point-group,
.dashboard-donut-segment,
.dashboard-progress-row,
.dashboard-legend-row,
.dashboard-country-group,
.dashboard-country-list-row {
  cursor: pointer;
  outline: none;
}

.dashboard-card.is-hovering [data-dashboard-series-item]:not(.is-active) {
  opacity: 0.28;
}

.dashboard-card.is-hovering [data-dashboard-series-item].is-active {
  opacity: 1;
}

.dashboard-point-group.is-active .dashboard-point {
  transform: scale(1.28);
}

.dashboard-bar-group.is-active .dashboard-bar {
  transform: translateY(-4px);
  transform-origin: center bottom;
  transform-box: fill-box;
}

.dashboard-donut-segment.is-active {
  stroke-width: 32;
}

.dashboard-progress-row.is-active,
.dashboard-legend-row.is-active,
.dashboard-country-list-row.is-active {
  background: linear-gradient(127deg, rgba(244, 244, 244, 0.9), rgba(255, 255, 255, 0.98));
}

.dashboard-country-dot {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2px;
  transform-origin: center;
  transform-box: fill-box;
}

.dashboard-country-glow {
  opacity: 0.34;
}

.dashboard-country-group.is-active .dashboard-country-dot {
  transform: scale(1.12);
}

.dashboard-country-group.is-active .dashboard-country-glow {
  opacity: 0.82;
}

.dashboard-readout-callout {
  display: grid;
  gap: 6px;
  padding: 2px 0 0;
  border: 0;
  background: #fff;
  justify-items: center;
}

.dashboard-brief-list {
  gap: 0;
  align-content: start;
  width: 100%;
}

.dashboard-brief-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  width: 100%;
  align-items: center;
  padding: 12px 0;
  box-shadow: inset 0 -1px 0 rgba(17, 17, 17, 0.06);
}

.dashboard-brief-row:last-child {
  box-shadow: none;
}

.dashboard-brief-row span {
  color: rgba(17, 17, 17, 0.56);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-brief-row strong {
  justify-self: end;
  font-size: 16px;
}

.dashboard-inline-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

.dashboard-mini-table {
  gap: 0;
  width: 100%;
}

.dashboard-mini-table-row {
  display: grid;
  grid-template-columns: 48px repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  width: 100%;
  text-align: center;
  box-shadow: inset 0 -1px 0 rgba(17, 17, 17, 0.06);
}

.dashboard-mini-table-row > span,
.dashboard-mini-table-row > strong {
  min-width: 0;
  padding-right: 10px;
  letter-spacing: 0;
}

.dashboard-mini-table-row > span {
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-mini-table-row > strong {
  font-size: 13px;
}

.dashboard-mini-table-row.is-head {
  background: #fff;
  border-top: 0;
  box-shadow: inset 0 -1px 0 rgba(17, 17, 17, 0.12);
}

.dashboard-mini-table-row.is-head span {
  font-size: 11px;
}

.sheet-dashboard-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 172px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 0;
  background: var(--dashboard-card-glow), #fff;
  box-shadow:
    0 16px 38px rgba(17, 17, 17, 0.06),
    0 0 18px rgba(214, 214, 214, 0.3);
  pointer-events: none;
  z-index: 4;
  transform: translate(-9999px, -9999px);
}

.sheet-dashboard-tooltip[hidden] {
  display: none !important;
}

.sheet-dashboard-tooltip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--dashboard-tooltip-color, var(--ink));
}

.sheet-dashboard-tooltip strong {
  font-size: 18px;
  line-height: 0.96;
  letter-spacing: 0;
  background: var(--dashboard-number-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sheet-empty-chart,
.sheet-empty-dashboard {
  min-height: 220px;
  place-items: center;
  text-align: center;
  background: #fff;
}

:root[data-theme="dark"] .sheet-frame.is-dashboard-frame,
:root[data-theme="dark"] .sheet-stage.is-dashboard-open,
:root[data-theme="dark"] .sheet-dashboard-page,
:root[data-theme="dark"] .sheet-workspace,
:root[data-theme="dark"] .sheet-grid-shell,
:root[data-theme="dark"] .sheet-empty-chart,
:root[data-theme="dark"] .sheet-empty-dashboard {
  background: var(--bg);
}

:root[data-theme="dark"] .sheet-toolbar-metrics span,
:root[data-theme="dark"] .sheet-corner-cell,
:root[data-theme="dark"] .sheet-row-header,
:root[data-theme="dark"] .sheet-column-header,
:root[data-theme="dark"] .sheet-column-endcap,
:root[data-theme="dark"] .sheet-add-row-bar,
:root[data-theme="dark"] .sheet-add-row-spacer {
  background: #101010;
}

:root[data-theme="dark"] .sheet-grid-shell,
:root[data-theme="dark"] .sheet-floating-panel,
:root[data-theme="dark"] .sheet-view-toggle,
:root[data-theme="dark"] .sheet-toolbar-meta-chip,
:root[data-theme="dark"] .sheet-toolbar-field,
:root[data-theme="dark"] .sheet-color-control,
:root[data-theme="dark"] .sheet-toolbar-select,
:root[data-theme="dark"] .sheet-name-box,
:root[data-theme="dark"] .sheet-formula-shell,
:root[data-theme="dark"] .sheet-toolbar-text,
:root[data-theme="dark"] .sheet-column-type-trigger,
:root[data-theme="dark"] .sheet-column-type-mark,
:root[data-theme="dark"] .sheet-date-nav,
:root[data-theme="dark"] .sheet-date-action,
:root[data-theme="dark"] .sheet-date-day,
:root[data-theme="dark"] .sheet-axis-add,
:root[data-theme="dark"] .sheet-country-config-reset,
:root[data-theme="dark"] .sheet-country-region-toggle,
:root[data-theme="dark"] .sheet-country-pill {
  background: #0c0c0c;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .sheet-toolbar-metrics span {
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .sheet-column-type-trigger:hover,
:root[data-theme="dark"] .sheet-date-nav:hover,
:root[data-theme="dark"] .sheet-date-action:hover,
:root[data-theme="dark"] .sheet-date-day:hover,
:root[data-theme="dark"] .sheet-context-action:hover,
:root[data-theme="dark"] .sheet-type-option:hover,
:root[data-theme="dark"] .sheet-type-option.is-active,
:root[data-theme="dark"] .sheet-country-config-reset:hover,
:root[data-theme="dark"] .sheet-country-region-toggle:hover,
:root[data-theme="dark"] .sheet-country-region-toggle.is-active,
:root[data-theme="dark"] .sheet-country-pill:hover,
:root[data-theme="dark"] .sheet-country-pill.is-active,
:root[data-theme="dark"] .sheet-axis-add:hover {
  background: #151515;
}

:root[data-theme="dark"] .sheet-axis-add {
  color: var(--ink);
}

:root[data-theme="dark"] .sheet-date-day {
  background: #101010;
}

:root[data-theme="dark"] .sheet-cell.is-range-selected {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)),
    var(--cell-bg, var(--sheet-cell-bg));
}

:root[data-theme="dark"] .sheet-dashboard-page {
  --dashboard-gray-0: #0a0a0a;
  --dashboard-gray-1: #111111;
  --dashboard-gray-2: #202020;
  --dashboard-gray-3: #5f5f5f;
  --dashboard-gray-4: #949494;
  --dashboard-gray-5: #d8d8d8;
  --dashboard-gray-6: #f4f4f4;
  --dashboard-card-glow:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.08) 0%, rgba(128, 128, 128, 0.08) 24%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 58%);
  --dashboard-divider-gradient:
    linear-gradient(127deg, rgba(255, 255, 255, 0) 0%, rgba(132, 132, 132, 0.48) 30%, rgba(245, 245, 245, 0.92) 50%, rgba(132, 132, 132, 0.48) 70%, rgba(255, 255, 255, 0) 100%);
  --dashboard-number-gradient:
    linear-gradient(127deg, #767676 0%, #9f9f9f 18%, #c3c3c3 46%, #e3e3e3 72%, #fafafa 100%);
  --dashboard-soft-number-gradient:
    linear-gradient(127deg, #636363 0%, #898989 28%, #b5b5b5 58%, #e6e6e6 100%);
  background: #070707;
}

:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .dashboard-card,
:root[data-theme="dark"] .sheet-dashboard-tooltip,
:root[data-theme="dark"] .sheet-empty-dashboard,
:root[data-theme="dark"] .sheet-empty-chart,
:root[data-theme="dark"] .dashboard-progress-row,
:root[data-theme="dark"] .dashboard-readout-callout,
:root[data-theme="dark"] .dashboard-inline-chip,
:root[data-theme="dark"] .dashboard-mini-table-row.is-head {
  background: var(--dashboard-card-glow), #0c0c0c;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .metric-card span,
:root[data-theme="dark"] .sheet-dashboard-tooltip span,
:root[data-theme="dark"] .dashboard-mini-table-row.is-head span,
:root[data-theme="dark"] .dashboard-card-titleblock strong,
:root[data-theme="dark"] .dashboard-donut-total-label,
:root[data-theme="dark"] .dashboard-inline-chip {
  color: var(--ink);
}

:root[data-theme="dark"] .dashboard-grid-line {
  stroke: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .dashboard-axis-line {
  stroke: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .dashboard-donut-track {
  stroke: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .dashboard-donut-center {
  fill: #0c0c0c;
}

:root[data-theme="dark"] .dashboard-progress-track {
  background: linear-gradient(127deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.14));
}

:root[data-theme="dark"] .dashboard-map-backdrop {
  fill: rgba(10, 10, 10, 0.94);
}

:root[data-theme="dark"] .dashboard-map-graticule {
  stroke: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .dashboard-world-land {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .dashboard-country-dot,
:root[data-theme="dark"] .dashboard-point {
  stroke: rgba(7, 7, 7, 0.92);
}

:root[data-theme="dark"] .dashboard-progress-row.is-active,
:root[data-theme="dark"] .dashboard-legend-row.is-active,
:root[data-theme="dark"] .dashboard-country-list-row.is-active {
  background: linear-gradient(127deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

:root[data-theme="dark"] .dashboard-mini-table-row,
:root[data-theme="dark"] .dashboard-brief-row {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .dashboard-brief-row span {
  color: rgba(245, 245, 245, 0.56);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sheet-frame.is-dashboard-frame,
  :root:not([data-theme]) .sheet-stage.is-dashboard-open,
  :root:not([data-theme]) .sheet-dashboard-page,
  :root:not([data-theme]) .sheet-workspace,
  :root:not([data-theme]) .sheet-grid-shell,
  :root:not([data-theme]) .sheet-empty-chart,
  :root:not([data-theme]) .sheet-empty-dashboard {
    background: var(--bg);
  }

  :root:not([data-theme]) .sheet-toolbar-metrics span,
  :root:not([data-theme]) .sheet-corner-cell,
  :root:not([data-theme]) .sheet-row-header,
  :root:not([data-theme]) .sheet-column-header,
  :root:not([data-theme]) .sheet-column-endcap,
  :root:not([data-theme]) .sheet-add-row-bar,
  :root:not([data-theme]) .sheet-add-row-spacer {
    background: #101010;
  }

  :root:not([data-theme]) .sheet-grid-shell,
  :root:not([data-theme]) .sheet-floating-panel,
  :root:not([data-theme]) .sheet-view-toggle,
  :root:not([data-theme]) .sheet-toolbar-meta-chip,
  :root:not([data-theme]) .sheet-toolbar-field,
  :root:not([data-theme]) .sheet-color-control,
  :root:not([data-theme]) .sheet-toolbar-select,
  :root:not([data-theme]) .sheet-name-box,
  :root:not([data-theme]) .sheet-formula-shell,
  :root:not([data-theme]) .sheet-toolbar-text,
  :root:not([data-theme]) .sheet-column-type-trigger,
  :root:not([data-theme]) .sheet-column-type-mark,
  :root:not([data-theme]) .sheet-date-nav,
  :root:not([data-theme]) .sheet-date-action,
  :root:not([data-theme]) .sheet-date-day,
  :root:not([data-theme]) .sheet-axis-add,
  :root:not([data-theme]) .sheet-country-config-reset,
  :root:not([data-theme]) .sheet-country-region-toggle,
  :root:not([data-theme]) .sheet-country-pill {
    background: #0c0c0c;
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.12);
  }

  :root:not([data-theme]) .sheet-toolbar-metrics span {
    border-color: rgba(255, 255, 255, 0.12);
  }

  :root:not([data-theme]) .sheet-column-type-trigger:hover,
  :root:not([data-theme]) .sheet-date-nav:hover,
  :root:not([data-theme]) .sheet-date-action:hover,
  :root:not([data-theme]) .sheet-date-day:hover,
  :root:not([data-theme]) .sheet-context-action:hover,
  :root:not([data-theme]) .sheet-type-option:hover,
  :root:not([data-theme]) .sheet-type-option.is-active,
  :root:not([data-theme]) .sheet-country-config-reset:hover,
  :root:not([data-theme]) .sheet-country-region-toggle:hover,
  :root:not([data-theme]) .sheet-country-region-toggle.is-active,
  :root:not([data-theme]) .sheet-country-pill:hover,
  :root:not([data-theme]) .sheet-country-pill.is-active,
  :root:not([data-theme]) .sheet-axis-add:hover {
    background: #151515;
  }

  :root:not([data-theme]) .sheet-axis-add {
    color: var(--ink);
  }

  :root:not([data-theme]) .sheet-date-day {
    background: #101010;
  }

  :root:not([data-theme]) .sheet-cell.is-range-selected {
    background:
      linear-gradient(0deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)),
      var(--cell-bg, var(--sheet-cell-bg));
  }

  :root:not([data-theme]) .sheet-dashboard-page {
    --dashboard-gray-0: #0a0a0a;
    --dashboard-gray-1: #111111;
    --dashboard-gray-2: #202020;
    --dashboard-gray-3: #5f5f5f;
    --dashboard-gray-4: #949494;
    --dashboard-gray-5: #d8d8d8;
    --dashboard-gray-6: #f4f4f4;
    --dashboard-card-glow:
      radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.08) 0%, rgba(128, 128, 128, 0.08) 24%, rgba(0, 0, 0, 0) 62%),
      radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 58%);
    --dashboard-divider-gradient:
      linear-gradient(127deg, rgba(255, 255, 255, 0) 0%, rgba(132, 132, 132, 0.48) 30%, rgba(245, 245, 245, 0.92) 50%, rgba(132, 132, 132, 0.48) 70%, rgba(255, 255, 255, 0) 100%);
    --dashboard-number-gradient:
      linear-gradient(127deg, #767676 0%, #9f9f9f 18%, #c3c3c3 46%, #e3e3e3 72%, #fafafa 100%);
    --dashboard-soft-number-gradient:
      linear-gradient(127deg, #636363 0%, #898989 28%, #b5b5b5 58%, #e6e6e6 100%);
    background: #070707;
  }

  :root:not([data-theme]) .metric-card,
  :root:not([data-theme]) .dashboard-card,
  :root:not([data-theme]) .sheet-dashboard-tooltip,
  :root:not([data-theme]) .sheet-empty-dashboard,
  :root:not([data-theme]) .sheet-empty-chart,
  :root:not([data-theme]) .dashboard-progress-row,
  :root:not([data-theme]) .dashboard-readout-callout,
  :root:not([data-theme]) .dashboard-inline-chip,
  :root:not([data-theme]) .dashboard-mini-table-row.is-head {
    background: var(--dashboard-card-glow), #0c0c0c;
    box-shadow:
      0 24px 54px rgba(0, 0, 0, 0.44),
      0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  :root:not([data-theme]) .metric-card span,
  :root:not([data-theme]) .sheet-dashboard-tooltip span,
  :root:not([data-theme]) .dashboard-mini-table-row.is-head span,
  :root:not([data-theme]) .dashboard-card-titleblock strong,
  :root:not([data-theme]) .dashboard-donut-total-label,
  :root:not([data-theme]) .dashboard-inline-chip {
    color: var(--ink);
  }

  :root:not([data-theme]) .dashboard-grid-line {
    stroke: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme]) .dashboard-axis-line {
    stroke: rgba(255, 255, 255, 0.16);
  }

  :root:not([data-theme]) .dashboard-donut-track {
    stroke: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme]) .dashboard-donut-center {
    fill: #0c0c0c;
  }

  :root:not([data-theme]) .dashboard-progress-track {
    background: linear-gradient(127deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.14));
  }

  :root:not([data-theme]) .dashboard-map-backdrop {
    fill: rgba(10, 10, 10, 0.94);
  }

  :root:not([data-theme]) .dashboard-map-graticule {
    stroke: rgba(255, 255, 255, 0.06);
  }

  :root:not([data-theme]) .dashboard-world-land {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(255, 255, 255, 0.16);
  }

  :root:not([data-theme]) .dashboard-country-dot,
  :root:not([data-theme]) .dashboard-point {
    stroke: rgba(7, 7, 7, 0.92);
  }

  :root:not([data-theme]) .dashboard-progress-row.is-active,
  :root:not([data-theme]) .dashboard-legend-row.is-active,
  :root:not([data-theme]) .dashboard-country-list-row.is-active {
    background: linear-gradient(127deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  }

  :root:not([data-theme]) .dashboard-mini-table-row,
  :root:not([data-theme]) .dashboard-brief-row {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme]) .dashboard-brief-row span {
    color: rgba(245, 245, 245, 0.56);
  }
}

@media (max-width: 1280px) {
  .sheet-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sheet-dashboard-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sheet-dashboard-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sheet-dashboard-kpis,
  .sheet-dashboard-secondary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card-head {
    grid-template-columns: 1fr;
  }

  .dashboard-card-summary {
    justify-items: center;
    max-width: none;
    text-align: center;
  }

  .dashboard-ring-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .dashboard-mini-table {
    overflow-x: auto;
  }

  .dashboard-mini-table-row {
    min-width: 620px;
  }
}

.preview-panel {
  min-height: 320px;
  padding: 18px;
}

.preview-text {
  white-space: pre-wrap;
}

.file-preview-image {
  max-width: 100%;
  max-height: 560px;
  display: block;
  margin: 0 auto;
}

.secret-area {
  min-height: 120px;
}

.secret-view {
  min-height: 64px;
  padding: 14px;
  background: var(--contrast);
  color: var(--contrast-ink);
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}

.security-node-page {
  max-width: 1180px;
  margin: 0 auto;
}

.security-hero,
.security-layout {
  display: grid;
  gap: 18px;
}

.security-overview-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--security-overview-bg);
  box-shadow: var(--shadow-sm);
}

.security-overview-main,
.security-card-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.security-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.security-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.security-overview-copy,
.security-main-column,
.security-side-column {
  display: grid;
  gap: 10px;
}

.security-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.security-overline {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.security-overview-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
}

.security-overview-subtitle,
.security-card-head p,
.security-health-copy span {
  color: var(--muted);
  line-height: 1.45;
}

.security-overview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.security-badge {
  padding: 10px 12px;
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  font-size: 11px;
  font-weight: 600;
}

.security-badge-good {
  background: #f1f8f1;
}

.security-badge-watch {
  background: #faf4e3;
}

.security-badge-risk {
  background: #f9ebe7;
}

:root[data-theme="dark"] .security-badge-good {
  background: rgba(64, 116, 82, 0.24);
}

:root[data-theme="dark"] .security-badge-watch {
  background: rgba(138, 110, 49, 0.24);
}

:root[data-theme="dark"] .security-badge-risk {
  background: rgba(128, 67, 57, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .security-badge-good {
    background: rgba(64, 116, 82, 0.24);
  }

  :root:not([data-theme]) .security-badge-watch {
    background: rgba(138, 110, 49, 0.24);
  }

  :root:not([data-theme]) .security-badge-risk {
    background: rgba(128, 67, 57, 0.24);
  }
}

.security-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.security-card,
.security-side-card {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.security-card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.security-card-head {
  margin-bottom: 6px;
}

.security-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.security-password-head {
  display: grid;
  gap: 10px;
}

.security-health-meter {
  position: relative;
  height: 8px;
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}

.security-health-meter-fill {
  display: block;
  height: 100%;
  background: var(--ink);
}

.security-health-meter-fill-good {
  background: #1e734b;
}

.security-health-meter-fill-watch {
  background: #b8801d;
}

.security-health-meter-fill-risk {
  background: #a4432b;
}

.security-health-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.security-secret-view {
  min-height: 84px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.security-side-column {
  align-content: start;
}

.security-side-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.security-side-card-quiet {
  background: var(--paper-soft);
}

.action-button,
.close-button {
  padding: 12px 16px;
}

.action-button.primary {
  background: var(--contrast);
  color: var(--contrast-ink);
}

.action-button.danger {
  color: var(--danger-ink);
  background: var(--danger-bg);
}

.empty-state,
.boot-error {
  padding: 56px 20px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
  color: var(--muted);
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay);
}

.dialog {
  width: min(620px, 100%);
  box-shadow: var(--shadow-lg);
}

.doc-create-note {
  padding: 14px 0;
  color: var(--muted);
  text-transform: none;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .vault-provider-announcement {
    grid-template-columns: 1fr;
    justify-items: start;
    margin: 10px 20px 0;
  }

  .vault-provider-announcement-logos {
    flex-wrap: wrap;
  }

  .vault-provider-announcement-actions {
    justify-items: start;
  }

  .detail-layout,
  .paper-row,
  .doc-sheet-wrap,
  .security-layout,
  .security-field-grid {
    grid-template-columns: 1fr;
  }

  .doc-canvas {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-side-rail {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: 44px;
    justify-content: center;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
  }

  .doc-side-rail-group {
    grid-auto-flow: column;
    grid-auto-columns: 44px;
  }

  .doc-index,
  .doc-page-label {
    position: static;
  }

  .doc-sheet {
    width: min(210mm, calc(100vw - 64px));
    min-height: auto;
    padding: 22mm 14mm 16mm;
  }

  .doc-sheet-top {
    align-items: start;
  }

  .doc-brand-panel {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .doc-brand-mark {
    min-height: 40px;
  }

  .doc-address-card {
    width: 56mm;
    min-width: 56mm;
  }

  .doc-page-input {
    height: 180mm;
    min-height: 180mm;
  }

  .list-row.paper-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (max-width: 760px) {
  .app-shell {
    --create-width: min(212px, calc(100vw - 20px));
    --edge: 10px;
  }

  .topbar,
  .page,
  .status-bar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .vault-provider-announcement {
    margin: 10px 16px 0;
    padding: 14px 16px;
    gap: 14px;
  }

  .vault-provider-announcement-logo {
    min-width: 86px;
  }

  .page.page-sheet-mode {
    padding-left: 0;
    padding-right: 0;
  }

  .grid-surface {
    grid-template-columns: 1fr;
  }

  .view-toggle {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .type-filter-menu {
    right: auto;
    left: 0;
    width: min(320px, calc(100vw - 32px));
  }

  .type-filter-options {
    grid-template-columns: 1fr;
  }

  .paper-row-title,
  .grid-card-title {
    font-size: 12pt;
  }

  .list-row.paper-row {
    grid-template-columns: auto minmax(0, auto);
    gap: 10px;
    padding: 8px 0;
  }

  .paper-row-meta {
    font-size: 9pt;
  }

  .list-row .paper-row-meta {
    display: none;
  }

  .paper-preview-row.paper-preview-doc,
  .paper-preview-row.paper-preview-file,
  .paper-preview-row.paper-preview-sheet,
  .paper-preview-row.paper-preview-task_list,
  .paper-preview-row.paper-preview-secret,
  .paper-preview-row.paper-preview-board,
  .paper-preview-row.paper-preview-whiteboard {
    padding: 8px;
  }

  .paper-preview-row .paper-icon {
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
  }

  .main.main-sheet-mode .status-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sheet-stage.is-dashboard-open {
    grid-template-columns: 1fr;
  }

  .sheet-grid-topbar,
  .sheet-grid-row-live {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .sheet-axis-add {
    width: 30px;
    height: 30px;
  }

  .sheet-column-track {
    grid-template-columns: repeat(var(--sheet-columns, 10), minmax(150px, 1fr)) 132px;
  }

  .sheet-row-track {
    grid-template-columns: repeat(var(--sheet-columns, 10), minmax(150px, 1fr));
  }

  .sheet-frame {
    padding: 12px;
  }

  .sheet-titlebar,
  .sheet-toolbar,
  .sheet-formula-row,
  .sheet-bottom-bar {
    align-items: stretch;
  }

  .sheet-selection-meta {
    justify-content: flex-start;
    min-width: 0;
  }

  .sheet-pill,
  .sheet-tool,
  .sheet-tab,
  .sheet-toolbar-select,
  .sheet-toolbar-field {
    width: 100%;
  }

  .sheet-name-box {
    width: 72px;
  }

  .sheet-toolbar-text {
    min-width: 0;
    width: 100%;
  }

  .sheet-dashboard-page {
    border-left: 0;
    border-top: 0;
  }

  .sheet-dashboard-kpis,
  .sheet-dashboard-main-grid,
  .sheet-dashboard-secondary-grid,
  .dashboard-ring-wrap,
  .dashboard-legend-row,
  .dashboard-progress-row {
    grid-template-columns: 1fr;
  }

  .sheet-frame,
  .sheet-dashboard-page,
  .sheet-workspace {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sheet-breadcrumb-row,
  .sheet-toolbar,
  .sheet-formula-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sheet-toolbar-group,
  .sheet-toolbar-metrics {
    width: 100%;
    margin-left: 0;
  }

  .sheet-view-toggle {
    width: 100%;
  }

  .sheet-view-toggle-button {
    flex: 1 1 0;
  }

  .sheet-color-control,
  .sheet-column-type-pill,
  .sheet-toolbar-field-column,
  .sheet-selection-meta {
    width: 100%;
  }

  .sheet-selection-meta {
    justify-items: start;
  }

  .sheet-grid-shell {
    min-height: calc(100vh - 270px);
  }

  .sheet-column-header {
    min-height: 76px;
  }

  .doc-sheet {
    width: calc(100vw - 48px);
    padding: 18mm 10mm 14mm;
  }

  .doc-canvas {
    gap: 14px;
  }

  .doc-sheet-top,
  .doc-sheet-credentials {
    display: grid;
    gap: 10px;
  }

  .doc-brand-panel,
  .doc-address-card {
    width: 100%;
    min-width: 0;
  }

  .doc-title-input {
    max-width: 100%;
    font-size: 20px;
  }

  .doc-dock {
    right: 16px;
    top: 84px;
    width: min(260px, calc(100vw - 32px));
  }

  .doc-page-input {
    height: 170mm;
    min-height: 170mm;
    font-size: 12pt;
    line-height: 1.65;
  }

  .main {
    margin-right: calc(var(--edge) + var(--create-effective));
  }

  .create-sidebar {
    padding: 16px 12px;
  }
}

/* --- Canvas board (whiteboard) --- */

.whiteboard-shell.board-shell {
  --board-viewport-padding: 20px;
  --board-topbar-height: 46px;
  --board-topbar-gap: 14px;
  --board-toolbar-height: 98px;
  --board-toolbar-gap: 14px;
  --board-stage-max-width: min(
    1980px,
    calc(100vw - (var(--board-viewport-padding) * 2)),
    calc(
      (
          100dvh
          - (var(--board-viewport-padding) * 2)
          - var(--board-topbar-height)
          - var(--board-topbar-gap)
          - var(--board-toolbar-height)
          - var(--board-toolbar-gap)
        ) * (1400 / 920)
    )
  );
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: #101010;
  text-transform: none;
  background:
    radial-gradient(circle at 50% -16%, rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #ffffff, #f8f8f6 58%, #f3f3f1);
}

:root[data-theme="dark"] .whiteboard-shell.board-shell {
  color: #f5f5f5;
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #181b1f, #101215 54%, #0a0b0d);
}

.board-topbar {
  position: absolute;
  top: var(--board-viewport-padding);
  left: var(--board-viewport-padding);
  right: var(--board-viewport-padding);
  z-index: 5;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}

.board-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 120px;
  pointer-events: auto;
}

.board-icon-button,
.board-tool-button,
.board-mini-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

:root[data-theme="dark"] .board-icon-button,
:root[data-theme="dark"] .board-tool-button,
:root[data-theme="dark"] .board-mini-delete {
  background: transparent;
  box-shadow: none;
}

.board-icon-button svg,
.board-tool-button svg,
.board-mini-delete svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-title {
  width: min(520px, 82vw);
  justify-self: center;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  text-align: center;
  text-transform: uppercase;
  pointer-events: auto;
}

.board-status {
  min-width: 48px;
  min-height: 16px;
  font-size: 11px;
  text-align: right;
  color: color-mix(in srgb, currentColor 58%, transparent);
}

.board-back-button,
.board-save-button {
  pointer-events: auto;
}

.board-image-input {
  display: none;
}

.board-stage-wrap {
  position: absolute;
  inset:
    calc(var(--board-viewport-padding) + var(--board-topbar-height) + var(--board-topbar-gap))
    var(--board-viewport-padding)
    calc(var(--board-viewport-padding) + var(--board-toolbar-height) + var(--board-toolbar-gap))
    var(--board-viewport-padding);
  display: grid;
  place-items: center;
  perspective: 2400px;
}

.board-ruler-dock {
  position: absolute;
  right: 22px;
  top: 50%;
  z-index: 5;
  width: 50px;
  height: 210px;
  padding: 6px;
  transform: translateY(-50%);
  border: 1px solid rgba(20, 20, 20, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 34px rgba(31, 37, 42, 0.08);
}

.board-ruler-dock.is-active {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(31, 37, 42, 0.12);
}

.board-ruler-dock-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 243, 247, 0.86)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 0 0 1px rgba(121, 137, 154, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.board-ruler-dock-ticks,
.board-ruler-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.board-ruler-dock-ticks {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      rgba(62, 74, 90, 0.1) 18px,
      rgba(62, 74, 90, 0.1) 19px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 90px,
      rgba(34, 40, 46, 0.16) 90px,
      rgba(34, 40, 46, 0.16) 92px
    );
}

.board-stage {
  position: relative;
  width: var(--board-stage-max-width);
  aspect-ratio: 1400 / 920;
  overflow: hidden;
  outline: none;
  transform: rotateX(0.85deg);
  touch-action: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0) 8%),
    linear-gradient(180deg, #ffffff, #fbfbf9 52%, #f1f1ed 100%);
  border: 24px solid #d8d2c9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(115, 106, 93, 0.12),
    0 54px 90px rgba(32, 38, 45, 0.16),
    0 14px 28px rgba(32, 38, 45, 0.1),
    0 3px 0 rgba(255, 255, 255, 0.72);
}

.board-stage.is-draw-mode,
.board-stage.is-erase-mode {
  cursor: crosshair;
}

:root[data-theme="dark"] .board-stage {
  box-shadow:
    inset 0 0 0 2px rgba(229, 233, 237, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 0 rgba(5, 7, 9, 0.32),
    0 38px 88px rgba(0, 0, 0, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(
      180deg,
      rgba(191, 201, 211, 0.07) 0,
      rgba(191, 201, 211, 0.07) 58px,
      rgba(0, 0, 0, 0) 58px,
      rgba(0, 0, 0, 0) 116px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(212, 220, 229, 0.03) 0,
      rgba(212, 220, 229, 0.03) 72px,
      rgba(0, 0, 0, 0) 72px,
      rgba(0, 0, 0, 0) 144px
    ),
    linear-gradient(180deg, #262b31, #191d22 48%, #0f1215 100%);
  border-color: #565f68;
}

.board-stage::before,
.board-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.board-stage::before {
  z-index: 0;
  inset: 14px;
  border: 1px solid rgba(86, 82, 74, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.92),
    inset 0 0 40px rgba(91, 94, 98, 0.06);
}

.board-stage::after {
  z-index: 0;
  inset: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 12%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 42%);
}

.board-links,
.board-surface,
.board-overlay {
  position: absolute;
  inset: 0;
}

.board-surface {
  z-index: 2;
}

.board-links {
  z-index: 3;
}

.board-overlay {
  z-index: 4;
}

.board-links,
.board-overlay {
  pointer-events: none;
}

.board-center-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.board-center-mark img {
  max-width: min(34vw, 420px);
  max-height: 220px;
  object-fit: contain;
  opacity: 0.06;
  filter: grayscale(1);
}

.board-item {
  position: absolute;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  background: transparent;
  z-index: 2;
  user-select: none;
  transform-origin: center top;
}

.board-item[data-selected="true"] {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.26));
  z-index: 8;
}

.board-item-note {
  transform: rotate(-1.2deg);
  z-index: 3;
  overflow: visible;
  isolation: isolate;
}

.board-note-paper,
.board-note-yellow,
.board-note-blue,
.board-note-pink,
.board-note-graphite,
.board-item-pad {
  border: 1px solid rgba(58, 63, 68, 0.1);
  box-shadow:
    0 24px 34px rgba(38, 42, 48, 0.16),
    0 6px 12px rgba(38, 42, 48, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.82) inset;
}

.board-note-paper {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 246, 247, 0.99)),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(113, 127, 143, 0.06) 28px, rgba(113, 127, 143, 0.06) 29px);
}

.board-note-yellow {
  background:
    linear-gradient(180deg, #fff7c8, #f2df7e),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(138, 122, 66, 0.1) 28px, rgba(138, 122, 66, 0.1) 29px);
}

.board-note-blue {
  background:
    linear-gradient(180deg, #edf4fd, #c5daef),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(108, 125, 147, 0.1) 28px, rgba(108, 125, 147, 0.1) 29px);
}

.board-note-pink {
  background:
    linear-gradient(180deg, #fff0f3, #efc8d4),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(145, 116, 128, 0.1) 28px, rgba(145, 116, 128, 0.1) 29px);
}

.board-note-graphite {
  background:
    linear-gradient(180deg, #686f79, #3d434a),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(232, 238, 244, 0.11) 28px, rgba(232, 238, 244, 0.11) 29px);
}

.board-item-pad {
  overflow: visible;
  transform: rotate(0.8deg);
  isolation: isolate;
  background:
    linear-gradient(180deg, #ff7f7d, #ff6768 72%, #f15558 100%);
}

.board-pad-sheet {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(145, 88, 88, 0.18);
  background: linear-gradient(180deg, rgba(255, 170, 170, 0.72), rgba(255, 111, 111, 0.72));
  z-index: -1;
}

.board-pad-sheet-back {
  transform: translate(8px, 10px);
  opacity: 0.55;
}

.board-pad-sheet-middle {
  transform: translate(4px, 5px);
  opacity: 0.82;
}

.board-pad-clip {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 60px;
  height: 38px;
  transform: translateX(-50%);
  z-index: 3;
}

.board-pad-clip::before,
.board-pad-clip::after {
  content: "";
  position: absolute;
}

.board-pad-clip::before {
  inset: 12px 10px 0;
  background:
    linear-gradient(180deg, #4f545b, #121417);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.board-pad-clip::after {
  left: 20px;
  top: -8px;
  width: 20px;
  height: 34px;
  border: 4px solid rgba(26, 29, 33, 0.78);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.4);
}

.board-pad-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0) 0 49%, rgba(255, 210, 210, 0.9) 50%, rgba(242, 151, 151, 0.98) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: 100% 100%;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55);
}

.board-item-pad.is-flipping .board-pad-corner {
  animation: board-pad-corner-flip 220ms ease;
}

.board-pad-page-indicator {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 35, 35, 0.62);
}

:root[data-theme="dark"] .board-pad-page-indicator {
  color: rgba(255, 233, 233, 0.68);
}

.board-pad-copy {
  inset: 46px 20px 34px;
}

.board-pad-mark {
  inset: 44px 18px 34px;
}

@keyframes board-pad-corner-flip {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-14deg) scale(0.98);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

:root[data-theme="dark"] .board-note-paper,
:root[data-theme="dark"] .board-note-yellow,
:root[data-theme="dark"] .board-note-blue,
:root[data-theme="dark"] .board-note-pink,
:root[data-theme="dark"] .board-note-graphite,
:root[data-theme="dark"] .board-item-pad {
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .board-note-paper {
  background:
    linear-gradient(180deg, rgba(236, 240, 244, 0.96), rgba(212, 219, 228, 0.96)),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(89, 102, 117, 0.14) 28px, rgba(89, 102, 117, 0.14) 29px);
}

:root[data-theme="dark"] .board-note-graphite {
  background:
    linear-gradient(180deg, #6d7682, #434a53),
    repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(241, 244, 247, 0.12) 28px, rgba(241, 244, 247, 0.12) 29px);
}

:root[data-theme="dark"] .board-item-pad {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, #f87474, #d24b50 72%, #b5373c 100%);
}

:root[data-theme="dark"] .board-pad-sheet {
  border-color: rgba(255, 255, 255, 0.08);
}

.board-note-copy,
.board-text-copy,
.board-inline-editor {
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.16;
}

.board-note-copy {
  position: absolute;
  inset: 26px 18px 18px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

.board-note-mark {
  position: absolute;
  inset: 20px 16px 16px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.board-note-mark img {
  max-width: 70%;
  max-height: 56%;
  object-fit: contain;
  opacity: 0.06;
  filter: grayscale(1);
}

.board-item-text {
  min-width: 80px;
  min-height: 56px;
  z-index: 3;
}

.board-text-copy {
  position: absolute;
  inset: 8px 12px 8px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.board-item-image {
  box-shadow:
    0 22px 34px rgba(26, 31, 38, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  z-index: 1;
}

.board-photo {
  position: absolute;
  inset: 0;
  display: block;
  padding: 18px 18px 24px;
  background: linear-gradient(180deg, #ffffff, #f3efe7);
}

.board-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

.board-artifact-pins {
  position: absolute;
  inset: -24px 0 auto;
  height: 44px;
  pointer-events: none;
  z-index: 3;
}

.board-artifact-pin {
  position: absolute;
  top: 0;
  width: 24px;
  height: 34px;
}

.board-artifact-pin::before,
.board-artifact-pin::after {
  content: "";
  position: absolute;
}

.board-artifact-pin::before {
  left: 1px;
  right: 1px;
  top: 0;
  height: 18px;
  border-radius: 50% 50% 46% 46% / 46% 46% 54% 54%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #666d76, #15191d 72%, #08090b 100%);
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.board-artifact-pin::after {
  left: 50%;
  top: 15px;
  width: 4px;
  height: 24px;
  margin-left: -2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #505761, #0b0d10);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.12);
}

.board-artifact-pin-center {
  left: 50%;
  margin-left: -12px;
}

.board-ruler {
  position: absolute;
  z-index: 7;
  transform-origin: center;
  pointer-events: auto;
}

.board-ruler-body {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(233, 239, 246, 0.84)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 0 0 1px rgba(126, 138, 151, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 28px rgba(22, 28, 34, 0.12);
}

.board-ruler-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(67, 78, 92, 0.24);
}

.board-ruler-edge-top {
  top: 9px;
}

.board-ruler-edge-bottom {
  bottom: 9px;
}

.board-ruler-tick {
  position: absolute;
  bottom: 10px;
  width: 1px;
  height: 14px;
  background: rgba(47, 59, 71, 0.3);
}

.board-ruler-tick.is-major {
  height: 24px;
  background: rgba(25, 31, 37, 0.48);
}

.board-ruler.is-selected .board-ruler-body,
.board-ruler[data-selected="true"] .board-ruler-body {
  box-shadow:
    inset 0 0 0 1px rgba(126, 138, 151, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 2px rgba(27, 82, 214, 0.18),
    0 18px 28px rgba(22, 28, 34, 0.14);
}

.board-ink-black {
  color: #101010;
}

.board-ink-red {
  color: #c72222;
}

.board-ink-blue {
  color: #1f52d6;
}

.board-ink-green {
  color: #1c7a48;
}

.board-resize-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  background: rgba(16, 16, 16, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.82);
  cursor: nwse-resize;
}

.board-inline-editor {
  position: absolute;
  inset: 18px 14px 14px;
  border: 0;
  background: transparent;
  resize: none;
  outline: none;
  color: inherit;
  overflow: hidden;
}

.board-item-text .board-inline-editor {
  inset: 6px 10px;
}

.board-item-pad .board-inline-editor {
  inset: 40px 18px 30px;
}

.board-overlay {
  z-index: 4;
}

.board-mini-palette {
  position: absolute;
  transform: translate(-50%, -112%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 30px rgba(28, 34, 39, 0.16);
  border: 1px solid rgba(16, 16, 16, 0.1);
  pointer-events: auto;
}

.board-mini-palette-hint {
  max-width: 260px;
  padding: 10px 14px;
}

.board-mini-hint {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink);
}

:root[data-theme="dark"] .board-mini-palette {
  background: rgba(10, 10, 10, 0.76);
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .board-mini-hint {
  color: var(--paper);
}

.board-mini-palette-line {
  transform: translate(-50%, -50%);
}

.board-mini-palette-fixed {
  left: auto;
  right: 84px;
  top: 22px;
  transform: none;
}

.board-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(16, 16, 16, 0.22);
  border-radius: 50%;
  padding: 0;
}

.board-swatch.is-active {
  outline: 2px solid rgba(16, 16, 16, 0.42);
  outline-offset: 2px;
}

:root[data-theme="dark"] .board-swatch {
  border-color: rgba(255, 255, 255, 0.24);
}

:root[data-theme="dark"] .board-swatch.is-active {
  outline-color: rgba(255, 255, 255, 0.52);
}

.board-swatch-black {
  background: #101010;
}

.board-swatch-red {
  background: #c72222;
}

.board-swatch-blue {
  background: #1f52d6;
}

.board-swatch-green {
  background: #1c7a48;
}

.board-tone-swatch-paper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 250, 0.98));
}

.board-tone-swatch-yellow {
  background: linear-gradient(180deg, #fff6cf, #f6e7a2);
}

.board-tone-swatch-blue {
  background: linear-gradient(180deg, #ecf3fb, #cedded);
}

.board-tone-swatch-pink {
  background: linear-gradient(180deg, #fef0f4, #efd4dc);
}

.board-tone-swatch-graphite {
  background: linear-gradient(180deg, #4d545d, #2e3339);
}

.board-toolbar {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: var(--board-viewport-padding);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: auto;
  max-width: calc(100vw - (var(--board-viewport-padding) * 2));
  min-height: 88px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  backdrop-filter: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

:root[data-theme="dark"] .board-toolbar {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.board-corner-tool {
  position: absolute;
  left: var(--board-viewport-padding);
  top: calc(var(--board-viewport-padding) + var(--board-topbar-height) + var(--board-topbar-gap));
  z-index: 5;
}

.board-toolbar::-webkit-scrollbar {
  display: none;
}

.board-toolbar-divider {
  align-self: center;
  width: 1px;
  height: 56px;
  margin: 0 2px;
  background: linear-gradient(180deg, transparent, rgba(17, 17, 17, 0.1), transparent);
}

:root[data-theme="dark"] .board-toolbar-divider {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.board-toolbar-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.board-tool-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 82px;
  min-width: 82px;
  min-height: 66px;
  padding: 6px 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.board-tool-button:hover,
.board-tool-button.is-active {
  transform: translateY(-2px);
}

.board-tool-button.is-primary,
.board-tool-button.is-active {
  background: rgba(17, 17, 17, 0.04);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.board-tool-button.is-primary .board-tool-label,
.board-tool-button.is-active .board-tool-label {
  color: var(--ink);
}

.board-tool-label {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-tool-visual {
  position: relative;
  display: block;
  width: 56px;
  height: 42px;
  margin-bottom: 7px;
}

.board-tool-visual-svg {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 244, 247, 0.94));
}

.board-tool-visual-svg svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}

.board-tool-button.is-primary .board-tool-visual-svg,
.board-tool-button.is-active .board-tool-visual-svg {
  background: rgba(17, 17, 17, 0.94);
  color: #fff;
  box-shadow:
    0 12px 20px rgba(17, 17, 17, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .board-tool-button.is-primary .board-tool-visual-svg,
:root[data-theme="dark"] .board-tool-button.is-active .board-tool-visual-svg {
  background: rgba(245, 245, 245, 0.94);
  color: #000;
}

.board-tool-visual-svg,
.board-tool-text-card,
.board-tool-photo-card {
  border: 1px solid rgba(16, 16, 16, 0.12);
  box-shadow:
    0 14px 22px rgba(17, 17, 17, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.board-tool-visual-draw {
  --board-draw-preview: #101010;
}

.board-tool-draw-pen {
  position: absolute;
  left: 18px;
  top: 2px;
  width: 18px;
  height: 34px;
  transform: rotate(42deg);
  background:
    linear-gradient(180deg, #ffffff 0 58%, #d5d8de 58% 100%);
  border: 1px solid rgba(16, 16, 16, 0.16);
  box-shadow:
    0 12px 20px rgba(17, 17, 17, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.board-tool-draw-pen::before,
.board-tool-draw-pen::after {
  content: "";
  position: absolute;
}

.board-tool-draw-pen::before {
  left: 2px;
  right: 2px;
  top: -7px;
  height: 10px;
  background: linear-gradient(180deg, #2b2b2b, #090909);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.board-tool-draw-pen::after {
  left: 3px;
  right: 3px;
  bottom: -7px;
  height: 8px;
  background: var(--board-draw-preview);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
}

.board-tool-draw-ink {
  position: absolute;
  left: 40px;
  top: 22px;
  width: 10px;
  height: 10px;
  background: var(--board-draw-preview);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--board-draw-preview) 18%, transparent);
}

.board-tool-eraser-block {
  position: absolute;
  inset: 2px 0 4px;
  transform: skewX(-28deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, #ffb9bf 0 34%, #f34f52 34% 70%, #2878db 70% 100%);
  box-shadow:
    0 18px 24px rgba(23, 30, 38, 0.18),
    inset 0 -10px 24px rgba(0, 0, 0, 0.12);
}

.board-tool-eraser-block::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 40%;
  height: 8px;
  background: linear-gradient(180deg, #ffffff, #d7dde4);
}

.board-tool-note-sheet,
.board-tool-pad-sheet {
  position: absolute;
  inset: 8px 6px 0;
  box-shadow: 0 14px 20px rgba(25, 28, 33, 0.15);
}

.board-tool-note-sheet.is-back {
  transform: rotate(-8deg) translate(-5px, 6px);
  background: linear-gradient(180deg, #f9d777, #e9bb44);
}

.board-tool-note-sheet.is-middle {
  transform: rotate(7deg) translate(4px, 2px);
  background: linear-gradient(180deg, #bacbf2, #91a7da);
}

.board-tool-note-sheet.is-front {
  transform: rotate(-2deg);
  background: linear-gradient(180deg, #f7f3ff, #ddd5f0);
}

.board-tool-pin-cap {
  position: absolute;
  left: 25px;
  top: 2px;
  width: 12px;
  height: 18px;
}

.board-tool-pin-cap::before,
.board-tool-pin-cap::after {
  content: "";
  position: absolute;
}

.board-tool-pin-cap::before {
  inset: 0 0 auto;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #666d76, #111417);
}

.board-tool-pin-cap::after {
  left: 50%;
  top: 10px;
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #4b535d, #090b0d);
}

.board-tool-pad-sheet.is-back {
  transform: translate(4px, 6px);
  opacity: 0.58;
  background: linear-gradient(180deg, rgba(255, 168, 168, 0.68), rgba(255, 111, 111, 0.68));
}

.board-tool-pad-sheet.is-middle {
  transform: translate(2px, 3px);
  opacity: 0.8;
  background: linear-gradient(180deg, rgba(255, 168, 168, 0.84), rgba(255, 111, 111, 0.84));
}

.board-tool-pad-sheet.is-front {
  background: linear-gradient(180deg, #ff8784, #ef5256);
}

.board-tool-pad-clip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 18px;
  transform: translateX(-50%);
}

.board-tool-pad-clip::before,
.board-tool-pad-clip::after {
  content: "";
  position: absolute;
}

.board-tool-pad-clip::before {
  inset: 6px 0 0;
  background: linear-gradient(180deg, #464b52, #0f1215);
}

.board-tool-pad-clip::after {
  left: 5px;
  top: -5px;
  width: 10px;
  height: 16px;
  border: 3px solid rgba(24, 26, 29, 0.8);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.board-tool-pad-fold {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0 46%, rgba(255, 208, 208, 0.9) 47%, rgba(245, 164, 164, 0.98) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.board-tool-text-card {
  position: absolute;
  inset: 5px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 248, 0.98)),
    repeating-linear-gradient(180deg, transparent 0, transparent 9px, rgba(92, 102, 110, 0.09) 9px, rgba(92, 102, 110, 0.09) 10px);
}

.board-tool-text-lines {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  bottom: 14px;
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.88), rgba(17, 17, 17, 0.88)) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(17, 17, 17, 0.58), rgba(17, 17, 17, 0.58)) 0 12px / 82% 2px no-repeat,
    linear-gradient(180deg, rgba(17, 17, 17, 0.38), rgba(17, 17, 17, 0.38)) 0 24px / 65% 2px no-repeat;
}

.board-tool-photo-card {
  position: absolute;
  inset: 5px 8px;
  background: linear-gradient(180deg, #ffffff, #f0ece5);
}

.board-tool-photo-sun {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 7px;
  height: 7px;
  background: #f0c75a;
}

.board-tool-photo-mountain {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 11px;
  height: 16px;
  background:
    linear-gradient(145deg, rgba(35, 76, 51, 0) 0 50%, #7aa365 50% 100%) left bottom / 56% 100% no-repeat,
    linear-gradient(145deg, rgba(32, 61, 109, 0) 0 52%, #5e86bf 52% 100%) right bottom / 58% 100% no-repeat;
}

:root[data-theme="dark"] .board-tool-label {
  color: rgba(238, 242, 245, 0.68);
}

:root[data-theme="dark"] .board-tool-button.is-primary,
:root[data-theme="dark"] .board-tool-button.is-active {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .board-tool-visual-svg,
:root[data-theme="dark"] .board-tool-text-card,
:root[data-theme="dark"] .board-tool-photo-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(40, 45, 51, 0.98), rgba(21, 24, 28, 0.96));
  box-shadow:
    0 16px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .board-tool-button.is-primary .board-tool-label,
:root[data-theme="dark"] .board-tool-button.is-active .board-tool-label {
  color: var(--paper);
}

@media (max-width: 760px) {
  .whiteboard-shell.board-shell {
    --board-topbar-height: 40px;
    --board-topbar-gap: 14px;
    --board-toolbar-height: 88px;
    --board-toolbar-gap: 14px;
  }

  .board-topbar {
    grid-template-columns: 64px 1fr 64px;
  }

  .board-title {
    width: min(260px, 70vw);
    font-size: 12px;
  }

  .board-stage {
    border-width: 14px;
  }

  .board-toolbar {
    min-height: 78px;
    padding: 0;
    gap: 8px;
  }

  .board-corner-tool {
    left: var(--board-viewport-padding);
    top: calc(var(--board-viewport-padding) + var(--board-topbar-height) + var(--board-topbar-gap));
  }

  .board-toolbar-group {
    gap: 6px;
  }

  .board-tool-button {
    width: 70px;
    min-width: 70px;
    min-height: 62px;
  }

  .board-tool-visual {
    width: 48px;
    height: 38px;
    margin-bottom: 6px;
  }

  .board-tool-visual-svg svg {
    width: 20px;
    height: 20px;
  }

  .board-toolbar-divider {
    height: 48px;
    margin: 0 4px;
  }

  .board-icon-button,
  .board-mini-delete {
    width: 40px;
    height: 40px;
  }

}

/* ─── HOME PAGE ─────────────────────────────────────────────────────────────── */

.home-page {
  height: calc(100vh - 176px);
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 22px;
  padding-bottom: 28px;
}

.home-page-sidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: transparent;
  border: 0;
  transition:
    background 140ms ease,
    box-shadow 140ms ease;
}

.home-panel.is-drop-active {
  background: color-mix(in srgb, var(--paper-soft) 82%, transparent);
}

.home-panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px 10px;
}

.home-panel-header div {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  box-shadow: inset 0 -1px 0 var(--border);
}

.home-panel-title-group {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.home-panel-header strong,
.home-panel-count {
  font-size: 12px;
  letter-spacing: 0;
}

.home-panel-header strong {
  font-weight: 600;
}

.home-panel-count {
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.home-panel-back {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.home-panel-path {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-panel-body {
  min-height: 0;
  overflow: auto;
  padding: 10px 0 24px;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 1) 14px,
    rgba(0, 0, 0, 1) calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0, 0, 0, 1) 14px,
    rgba(0, 0, 0, 1) calc(100% - 14px),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.home-panel-body::-webkit-scrollbar {
  width: 10px;
}

.home-panel-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.home-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.home-panel-body.is-empty {
  display: grid;
  place-items: center;
  padding: 20px 12px 32px;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-panel-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.home-panel-empty p {
  max-width: 240px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.home-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  margin: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: grab;
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease,
    opacity 140ms ease;
}

.home-row:hover {
  background: var(--paper);
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.08);
  transform: translateY(-1px);
}

.home-row:active {
  cursor: grabbing;
}

.home-row.is-dragging {
  opacity: 0.42;
  box-shadow: none;
  transform: none;
}

.home-row-type-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--muted);
  margin-top: 1px;
}

.home-row-type-icon svg {
  width: 18px;
  height: 18px;
}

.home-row-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.home-row-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.home-row-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-row-date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-row-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-row-summary {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-row.is-compact {
  align-items: center;
  padding: 9px 12px;
}

.home-row.is-compact .home-row-summary {
  display: none;
}

.home-panel-secondary .home-row-title {
  font-weight: 500;
}

@media (max-width: 800px) {
  .home-page {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .home-page-sidebar {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .home-panel {
    min-height: 220px;
  }
}

@media (max-width: 520px) {
  .home-page {
    padding-bottom: 40px;
  }

  .home-panel-header {
    padding: 0 0 10px;
  }

  .home-panel-header div {
    padding-bottom: 8px;
  }

  .home-panel-body {
    padding-bottom: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .home-row {
    padding: 10px 8px;
  }

  .home-row-head {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .home-row-date {
    width: 100%;
  }
}