/* ─── Reset & Base ──────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; max-width: 100%; }

:root {
  --bg: #1a1f2e;
  --bg-card: #242b3d;
  --text: #e8ecf3;
  --text-dim: #8c95ad;
  --accent: #f9d949;
  --danger: #e85a5a;
  --border: #323a4f;

  --c-yellow: #f9d949;
  --c-pink:   #ffb3c8;
  --c-green:  #a8d99c;
  --c-blue:   #9cc4e0;
  --c-purple: #c2a8e0;

  --c-yellow-text: #4a3a00;
  --c-pink-text:   #4a1f30;
  --c-green-text:  #1f3a1f;
  --c-blue-text:   #14304a;
  --c-purple-text: #34214a;

  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

html, body {
  width: 100%; max-width: 100vw;
  height: 100%; max-height: 100vh; max-height: 100dvh;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.45;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
}

button {
  font-family: inherit; font-size: inherit;
  border: none; background: none; color: inherit;
  cursor: pointer;
}

input, textarea {
  font-family: inherit; font-size: inherit;
  border: none; background: none; color: inherit;
  outline: none;
}

.view {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  overflow-x: hidden !important;
  overflow-y: hidden;
  width: 100%;
  max-width: 100vw;
  touch-action: pan-y;
}

.view[hidden] { display: none; }

/* Editor-View folgt dem Visual-Viewport, damit Topbar/Farb-/Format-Zeile
   beim Aufklappen der iOS-Tastatur pinned bleiben (statt mit der Page
   nach oben weggescrollt zu werden). Nur der innere Textbereich scrollt. */
#view-editor {
  bottom: auto;
  top: var(--vv-offset-top, 0);
  height: var(--vv-h, 100dvh);
}
/* Tastatur ist offen → kein Safe-Bottom-Padding mehr (der Home-Indicator
   wird ohnehin von der Tastatur überdeckt). Sonst bleibt ein ~34px-Streifen
   zwischen Sticky und Tastatur leer. */
html.kb-open #view-editor {
  padding-bottom: 0;
}

/* Read-Mode: kein Caret/Cursor-Hinweis, sonst alles wie gewohnt sichtbar. */
#view-editor.reading-mode #note-editor {
  caret-color: transparent;
  cursor: default;
}

/* ─── Login / Setup / Unlock ────────────────────────────── */
#view-login,
#view-setup,
#view-unlock {
  align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.login-icon { margin-bottom: 12px; }
.login-card h1 { font-size: 26px; font-weight: 700; }
.login-sub { color: var(--text-dim); font-size: 14px; margin: 4px 0 28px; text-align: center; }
#login-form,
#otp-form,
#pw-form,
#setup-form,
#unlock-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
#otp-form[hidden],
#login-form[hidden],
#pw-form[hidden],
#setup-form[hidden],
#unlock-form[hidden] { display: none; }
.otp-hint { font-size: 13px; color: var(--text-dim); margin: 0; text-align: center; }
#login-otp {
  width: 100%; padding: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 22px; letter-spacing: 6px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
#login-otp:focus { border-color: var(--accent); }
.link-btn {
  width: 100%; padding: 8px;
  background: transparent; color: var(--text-dim);
  font-size: 14px; border-radius: 6px;
  cursor: pointer;
}
.link-btn:hover { color: var(--text); }
#login-email,
#pw-email,
#pw-password,
#setup-password,
#setup-password2,
#unlock-password {
  width: 100%; padding: 14px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 16px;
}
#login-email:focus,
#pw-email:focus,
#pw-password:focus,
#setup-password:focus,
#setup-password2:focus,
#unlock-password:focus { border-color: var(--accent); }
#login-btn,
#otp-btn,
#pw-btn,
#setup-btn,
#unlock-btn {
  width: 100%; padding: 14px;
  background: var(--accent); color: #1a1500;
  font-weight: 600; font-size: 16px; border-radius: 10px;
  transition: opacity .15s;
}
#login-btn:hover,
#setup-btn:hover,
#unlock-btn:hover { opacity: .9; }
#login-btn:disabled,
#setup-btn:disabled,
#unlock-btn:disabled { opacity: .5; cursor: not-allowed; }

.setup-warning {
  font-size: 13px; line-height: 1.5;
  color: #ffd0a0;
  background: rgba(232,140,60,.1); border: 1px solid rgba(232,140,60,.3);
  border-radius: 8px; padding: 10px 12px;
  margin: 4px 0;
}
.setup-confirm {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--text-dim);
  cursor: pointer; padding: 4px 0;
}
.setup-confirm input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--accent);
}
.login-status {
  margin-top: 16px; padding: 12px;
  background: rgba(249,217,73,.1); border: 1px solid rgba(249,217,73,.3);
  border-radius: 8px; font-size: 14px; text-align: center;
}
.login-status.error { background: rgba(232,90,90,.1); border-color: rgba(232,90,90,.3); }

/* ─── Site-Gate (nur im öffentlichen Web aktiv via site-gate.js) ────────── */
#site-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
#site-gate[hidden] { display: none; }
#site-gate-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
#site-gate-input {
  width: 100%; padding: 14px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 16px;
}
#site-gate-input:focus { border-color: var(--accent); }
#site-gate-btn {
  width: 100%; padding: 14px;
  background: var(--accent); color: #1a1500;
  font-weight: 600; font-size: 16px; border-radius: 10px;
  transition: opacity .15s;
}
#site-gate-btn:hover { opacity: .9; }

/* ─── Topbar (List + Editor) ────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.topbar h1 { font-size: 20px; font-weight: 700; grid-column: 1; }
.topbar-add {
  grid-column: 2;
  width: 44px; height: 44px;
  background: var(--accent); color: #1a1500;
  font-size: 26px; font-weight: 300; line-height: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(249,217,73,.4);
  transition: transform .12s;
}
.topbar-add:active { transform: scale(.92); }
.topbar #logout-btn { grid-column: 3; justify-self: end; }
.topbar-actions {
  grid-column: 3;
  justify-self: end;
  display: flex; align-items: center; gap: 2px;
}
.icon-btn.active { background: rgba(249,217,73,.18); color: var(--accent); }
.icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--text);
  transition: background .15s;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: rgba(255,255,255,.06); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: rgba(232,90,90,.15); }

/* Pull-to-refresh */
.ptr-indicator {
  position: absolute;
  top: -32px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  transition: transform 0s;
  pointer-events: none;
}
.ptr-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
}
.ptr-indicator.ready .ptr-spinner {
  border-top-color: var(--accent);
  border-color: var(--accent);
}
.ptr-indicator.refreshing .ptr-spinner {
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

.topbar.editor-bar {
  display: flex; align-items: center; gap: 8px;
}
/* margin-left:auto hält die Action-Buttons (Push/Share/Trash) immer rechtsbündig,
   auch wenn `editor-shared-with` hidden ist und keine Flex-Lücke mehr füllt. */
.editor-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }

/* ─── List ──────────────────────────────────────────────── */
.notes-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  align-content: start;
}

/* Free-Layout (Mobile) — Karten absolut positioniert, frei verschiebbar.
   Der Grid-Container ist 2D-Scroll-Container, das innere .canvas wächst
   in beide Richtungen, damit Zettel weit über den iPhone-Rand hinaus
   platziert werden können. */
.notes-grid.free-layout {
  display: block;
  position: relative;
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
.notes-grid.free-layout .canvas {
  position: relative;
  /* width/height werden inline gesetzt aus maxRight/maxBottom.
     max-width/height explizit aufheben — globales `* { max-width:100% }` würde
     den Canvas sonst auf die Breite des Grid clippen (WKWebView-strict). */
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
}
.notes-grid.free-layout .canvas .note-card {
  max-width: none !important;
  max-height: none !important;
}
.notes-grid:not(.free-layout) .canvas {
  display: contents;
}
.notes-grid.free-layout .note-card {
  position: absolute;
  /* width/height werden inline gesetzt aus mobile_width/mobile_height */
  aspect-ratio: unset;
  cursor: grab;
  touch-action: none; /* eigenes Touch-Handling */
  transition: box-shadow .12s, transform .08s;
}
.notes-grid.free-layout .note-card.dragging {
  cursor: grabbing;
  z-index: 1000;
  transform: scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  transition: none;
}
.notes-grid.free-layout .note-card.resizing {
  z-index: 1000;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  transition: none;
}
.note-card .resize-handle {
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  cursor: se-resize;
  touch-action: none;
  border-bottom-right-radius: 10px;
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 55%,
      currentColor 55%, currentColor 62%,
      transparent 62%, transparent 72%,
      currentColor 72%, currentColor 79%,
      transparent 79%);
  opacity: .4;
}
.note-card .resize-handle:hover { opacity: .8; }
.notes-grid:not(.free-layout) .note-card .resize-handle { display: none; }

.note-card {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  padding: 14px;
  font-size: 14px; line-height: 1.4;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: transform .12s, box-shadow .12s;
  white-space: pre-wrap; word-break: break-word;
}
.note-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.note-card.empty { opacity: .55; font-style: italic; }
.note-card .desktop-marker {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; opacity: .5;
}
.note-card .share-badge {
  position: absolute; bottom: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  opacity: 0.75;
  pointer-events: none;
}
.note-card .share-badge.received {
  background: rgba(74, 144, 226, 0.30);
  color: #1a4a8a;
}
/* „Es gibt neue Änderungen seit du zuletzt drauf warst" — kräftige
   Akzentfarbe + voller Opazität, damit der Badge deutlich anders aussieht
   als der reine „dies ist geteilt"-Hinweis. */
.note-card .share-badge.unseen {
  background: #ff8a3d;
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.35);
}
.note-card .share-badge.unseen.received {
  background: #ff8a3d;
  color: #ffffff;
}

.empty-state {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--text-dim); font-size: 15px;
  padding: 24px;
}
.empty-state[hidden] { display: none; }


/* ─── Editor ────────────────────────────────────────────── */
.editor-card {
  flex: 1;
  display: flex; flex-direction: column;
  /* Bottom-Padding 0 → Sticky sitzt bündig an der Tastatur, kein leerer
     dunkler Streifen zwischen Editor und der iOS-Keyboard-Toolbar. */
  padding: 8px 12px 0;
  gap: 6px;
  overflow: hidden;
}
.color-picker {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap;
  /* Selber Trick wie .format-toolbar darunter: streckt die Reihe über
     den Editor-Card-Innenrand hinaus, damit beide Zeilen exakt gleich
     breit sind und linksbündig anfangen. */
  margin: 0 -10px;
  width: calc(100% + 20px);
  max-width: none;
  padding: 0 4px;
  box-sizing: border-box;
}
.color {
  flex: 1 1 0;
  width: auto;
  min-width: 24px;
  max-width: 64px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 8px;
  /* Kein transparenter Border mehr — gleicher Auftritt wie Mode-Toggle/
     Sketch/Anhang. Aktiv-Markierung kommt jetzt aus dem inset-Shadow. */
  border: none;
  transition: transform .12s, box-shadow .12s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  /* Long-Press auf iOS: kein nativer Callout (Kopieren/Look-up-Menü) und
     kein Text-Select, damit unser eigener Long-Press-Picker greifen kann. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.color:hover { transform: scale(1.1); }
/* Aktiv-Markierung über inset-Ring (statt Border, weil Border weg ist).
   Outer-Shadow gibt der aktiven Box etwas Lift, inset-Ring gibt klar
   sichtbare Akzentfarbe innen. */
.color.active {
  box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px rgba(0,0,0,.10);
}
/* Long-Press-Visual: kurzer „Pulse"-Effekt während die Festfarbe umgefärbt
   wird. Triggered von JS sobald der 500ms-Timer feuert. */
.color.lp-pulse {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.15), inset 0 0 0 1px rgba(0,0,0,.1);
  transition: transform .18s, box-shadow .18s;
}

.palette-toggle {
  flex: 1 1 0;
  width: auto;
  min-width: 24px;
  max-width: 64px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 8px;
  background: linear-gradient(135deg, #f9d949 0%, #ffb3c8 33%, #a8d99c 66%, #9cc4e0 100%);
  border: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow .12s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

/* Modus-Toggle: Zettelfarbe ↔ Textfarbe.
   Tap schaltet um, Festfarben + Palette + Custom-Picker färben dann
   entweder die Notizfläche (sticky) oder die markierte Schrift (text). */
.color-mode-toggle {
  flex: 1 1 0;
  width: auto;
  min-width: 24px;
  max-width: 64px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 8px;
  border: none;
  /* Selber visueller Auftritt wie .color: deutlich gefüllter Hintergrund
     plus dunkler Inset-Border. Ohne diesen Fill wirkten die Icon-Buttons
     wie hohle Outlines, während die Farbflächen massiv gefüllt sind. */
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--text);
  transition: background .12s;
}
.color-mode-toggle:hover { background: rgba(255,255,255,.12); }
.color-mode-toggle[data-mode="text"] {
  background: rgba(249,217,73,.18);
  border-color: var(--accent);
  color: var(--accent);
}
.color-mode-toggle .cmt-sticky,
.color-mode-toggle .cmt-text { display: none; line-height: 1; }
.color-mode-toggle[data-mode="sticky"] .cmt-sticky { display: inline-flex; }
.color-mode-toggle[data-mode="text"] .cmt-text { display: inline-flex; }

/* Kleine feste Lücke zwischen Farbreihe und den Action-Buttons (Stift, Anhang). */
.cp-spacer { flex: 0 0 12px; }

/* Sketch + Anhang in der Color-Reihe — gleicher visueller Auftritt wie
   die Color-Buttons (32px hoch, 2px transparenter Rand, dezenter Inset-
   Schatten statt sichtbarer Border, sodass die ganze Reihe aus optisch
   gleich „dicken" Boxen besteht). */
.color-picker .cp-ft-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 24px;
  max-width: 64px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.color-picker .cp-ft-btn:hover { background: rgba(255,255,255,.12); }

/* Schriftart-Picker (Aa▾) */
.ft-fontfamily-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.font-family-btn {
  display: flex; align-items: center; gap: 1px;
  padding: 0 2px;
  height: 28px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  font-size: 13px; font-weight: 500;
  color: var(--text);
  transition: background .12s;
}
.font-family-btn:hover { background: rgba(255,255,255,.12); }
.fontfamily-popover {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex; flex-direction: column;
  z-index: 100;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  min-width: 130px;
}
.fontfamily-popover[hidden] { display: none; }
.fontfamily-popover button {
  padding: 8px 12px;
  text-align: left;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
}
.fontfamily-popover button:hover { background: rgba(255,255,255,.08); }
.fontfamily-popover button.active { background: rgba(249,217,73,.2); color: var(--accent); }
.palette-toggle:hover { transform: scale(1.1); }
.palette-toggle.active {
  box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 3px rgba(0,0,0,.15);
}
.palette-toggle svg { width: 14px; height: 14px; color: rgba(0,0,0,.55); }

.palette-panel {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 4px;
  width: 100%;
}
.palette-panel:not([hidden]) { display: flex; flex-direction: column; gap: 6px; }
.palette-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
}
.palette-row-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  width: 38px;
  flex-shrink: 0;
}
.palette-panel .color {
  flex: 1 1 0;
  width: auto;
  height: auto;
  max-width: 32px;
  aspect-ratio: 1;
}
.palette-row { gap: 4px; }
.custom-color-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.custom-color-wrap label {
  font-size: 12px;
  color: var(--text-dim);
}
#custom-color-input {
  width: 30px; height: 30px;
  padding: 0; border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}
#custom-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
#custom-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }

/* Desktop-Toggle in der Quick-Picker-Zeile — kompakt */
.desktop-toggle-wrap { margin-left: auto; flex-shrink: 0; }
.desktop-toggle, .md-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-dim);
  cursor: pointer; user-select: none;
}

.desktop-toggle input { accent-color: var(--accent); }

/* Format-Toolbar — Undo bleibt links als fixierter Sonderfall (andere
   Funktion als die Format-Buttons), gefolgt von einer kleinen Lücke. Alle
   Buttons dazwischen wachsen mit `flex:1 1 0` und nutzen den Platz aus.
   RemoveFormat sitzt rechts, ebenfalls fixiert, mit kleiner Lücke davor. */
.format-toolbar {
  display: flex; align-items: center; gap: 1px;
  flex-wrap: nowrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
  /* Streckt die Toolbar über den Editor-Card-Innenrand hinaus, damit die
     mittleren Format-Buttons sichtbar mehr Platz bekommen. Width auto
     reicht in flex-column nicht — explizite calc() sorgt dafür dass die
     Breite die negativen Margins tatsächlich übernimmt. */
  margin: 0 -10px;
  width: calc(100% + 20px);
  /* Globales `* { max-width:100% }` würde calc(100%+20px) auf 100% clampen. */
  max-width: none;
}
.ft-btn {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px; font-weight: 600;
  transition: background .12s;
  /* iOS: keine Native-Selection / kein Callout auf Toolbar-Tap. Sonst
     interpretiert iOS einen Tap auf Undo o.ä. gelegentlich als Long-Press
     auf die darunterliegende Editor-Region und markiert ein Wort. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Undo links und RemoveFormat rechts bleiben kompakt-fixiert (andere
   Funktionalität als die Format-Buttons). Alles dazwischen — inkl. der
   Schriftart- und Schriftgröße-Pillen — wächst per `flex:1 1 0` und füllt
   den Platz dazwischen aus, sodass die Buttons sichtbar breiter werden
   als der ft-btn-Mindestmaß. */
.format-toolbar > .ft-btn:not([data-cmd="undo"]):not(.ft-removeformat),
.format-toolbar > .ft-fontfamily-wrap,
.format-toolbar > .ft-fontsize-wrap {
  flex: 1 1 0;
  min-width: 28px;
  max-width: 80px;
}
/* Undo + RemoveFormat etwas schmaler, damit mehr Platz für die mittleren
   Buttons übrig bleibt. */
.format-toolbar > .ft-btn[data-cmd="undo"],
.format-toolbar > .ft-btn.ft-removeformat {
  width: 26px;
}
.format-toolbar > .ft-btn:not([data-cmd="undo"]):not(.ft-removeformat) {
  width: auto;
}
.format-toolbar > .ft-fontfamily-wrap,
.format-toolbar > .ft-fontsize-wrap {
  display: flex;
}
.format-toolbar > .ft-fontfamily-wrap > .font-family-btn,
.format-toolbar > .ft-fontsize-wrap > .font-family-btn {
  width: 100%;
  justify-content: center;
}
/* Kleine Lücken: nach Undo und vor RemoveFormat, damit beide Sonder-Buttons
   optisch von den Format-Knöpfen abgesetzt sind. */
.format-toolbar > .ft-btn[data-cmd="undo"] { margin-right: 6px; }
.ft-btn:hover { background: rgba(255,255,255,.07); }
.ft-btn:active { background: rgba(255,255,255,.12); }
.ft-btn.active { background: rgba(249,217,73,.18); color: var(--accent); }
.ft-sep {
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 2px;
}
/* RemoveFormat-Button rechts mit kleiner Lücke vor sich. Die mittleren
   Format-Buttons wachsen via flex-grow, deshalb ist `margin-left: auto`
   nicht mehr nötig — sie schieben den Knopf von selbst nach rechts. */
.ft-btn.ft-removeformat { margin-left: 6px; }
.ft-fontsize-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.ft-fontsize-btn {
  /* Keine width/height-Overrides — nutzt die Pill-Größe von .font-family-btn */
}
.ft-caret { font-size: 9px; color: var(--text-dim); }

.fontsize-popover {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex; flex-direction: column;
  z-index: 100;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  min-width: 56px;
}
.fontsize-popover[hidden] { display: none; }
.fontsize-popover button {
  padding: 8px 12px;
  text-align: center;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.fontsize-popover button:hover { background: rgba(255,255,255,.08); }
.fontsize-popover button.active { background: rgba(249,217,73,.2); color: var(--accent); }

#note-editor {
  flex: 1;
  width: 100%;
  max-width: 100%;
  background: #f9d949; color: #4a3a00;
  border-radius: 10px;
  padding: 18px;
  font-size: 15px; line-height: 1.5;
  word-break: break-word; overflow-wrap: anywhere;
  overflow-y: auto;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.1);
  touch-action: pan-y;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
#note-editor:empty::before {
  content: attr(data-placeholder);
  opacity: .5;
  pointer-events: none;
}
/* Aufgabenliste — <ul class="zk-todo"> rendert ein Kästchen vor jedem <li>
   via ::before. `<li class="checked">` macht den Eintrag erledigt: Haken im
   Kästchen + durchgestrichener Text + leicht gedimmt. Klicks im 28px-Streifen
   links vom Text togglen den Haken (siehe app.js click-Handler). */
#note-editor ul.zk-todo,
.note-card-content ul.zk-todo {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
#note-editor ul.zk-todo > li,
.note-card-content ul.zk-todo > li {
  position: relative;
  padding-left: 28px;
  min-height: 22px;
  margin: 2px 0;
}
/* Abhakbox an die ERSTE Zeile des zugehörigen Items binden (statt vertikal
   mittig im ganzen Item). Mehrzeilige Items: Box steht oben — eindeutige
   Zuordnung, welcher Text-Bereich zu welcher Box gehört. Box-Höhe 16, top:3
   zentriert die Box vertikal in der ersten 22.5px-Zeile. */
#note-editor ul.zk-todo > li::before,
.note-card-content ul.zk-todo > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .7;
  box-sizing: border-box;
  background: rgba(255,255,255,.2);
}
/* Haken: Unicode ✓ in 16x16-Flexbox zentriert. Sauberer als das gedrehte
   Pseudo-Border-Konstrukt — keine Rotation-Asymmetrie an den Box-Kanten. */
#note-editor ul.zk-todo > li.checked::after,
.note-card-content ul.zk-todo > li.checked::after {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 3px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
  opacity: .9;
  pointer-events: none;
}
#note-editor ul.zk-todo > li.checked,
.note-card-content ul.zk-todo > li.checked {
  text-decoration: line-through;
  opacity: .55;
}
/* Tap-Streifen links als Cursor-Hinweis. */
#note-editor ul.zk-todo > li {
  cursor: text;
}

#note-editor img.note-sketch,
.note-card-content img.note-sketch {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  vertical-align: top;
  margin: 4px 0;
  -webkit-user-drag: none;
}
#note-editor img.note-photo,
.note-card-content img.note-photo {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  vertical-align: top;
  margin: 4px 4px 4px 0;
  -webkit-user-drag: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
/* Foto-Wrapper: hält das Foto + Resize-Handle. Wrap diktiert die Breite,
   das Foto füllt mit width:100% und behält durch height:auto sein Aspect-Ratio. */
#note-editor span.photo-wrap,
.note-card-content span.photo-wrap {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin: 4px 4px 4px 0;
  max-width: 100%;
  line-height: 0; /* sonst Lücke unter dem inline-img wegen Baseline */
}
#note-editor span.photo-wrap img.note-photo,
.note-card-content span.photo-wrap img.note-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
#note-editor span.photo-wrap.resizing img.note-photo {
  /* Während des Drags Aspect-Ratio sichtbar halten ohne Layout-Hüpfer */
  pointer-events: none;
}
#note-editor span.photo-wrap .photo-resize-handle {
  position: absolute;
  right: -8px; bottom: -8px;
  width: 26px; height: 26px;
  background: rgba(0, 0, 0, .65);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
}
#note-editor span.photo-wrap .photo-resize-handle::before {
  /* zwei diagonale Striche als Visual-Hint („Greifen") */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: .9;
}
/* In der Listen-Vorschau kein Handle anzeigen — die Karte ist klickbar,
   nicht resizebar. */
.note-card-content span.photo-wrap .photo-resize-handle { display: none; }
#note-editor a.note-file,
.note-card-content a.note-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#note-editor a.note-file:hover { background: rgba(0, 0, 0, .15); }
/* In der Listen-Vorschau sollen Datei-Chips nur visuell sein —
   der Karten-Klick darf den Editor öffnen, nicht die Datei runterladen. */
.note-card-content a.note-file { pointer-events: none; }

/* Externe Links (http/https) — dezent unterstrichen, Farbe inherited
   vom Sticky (kontrastiert je nach Hintergrund). Wird via Auto-Linkify
   im Sanitizer und beim Paste erzeugt. .note-file ist ausgenommen, weil
   das die Datei-Anhang-Chips sind. */
#note-editor a:not(.note-file),
.note-card-content a:not(.note-file) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 0, 0, .45);
  cursor: pointer;
  word-break: break-word;
}
#note-editor a:not(.note-file):hover {
  text-decoration-color: rgba(0, 0, 0, .8);
}
/* Listen-Karten: Links nicht klickbar, Karten-Tap öffnet den Editor. */
.note-card-content a:not(.note-file) { pointer-events: none; }

/* ─── Sketch-Modal ─────────────────────────────────────────
   Vollbild-Overlay über die Editor-View. Top + Höhe via Visual-Viewport,
   damit auch hier die iOS-Tastatur (ungenutzt im Modal) keinen Mist baut. */
.sketch-modal {
  position: fixed;
  top: var(--vv-offset-top, 0);
  left: 0; right: 0;
  height: var(--vv-h, 100dvh);
  background: rgba(8, 12, 22, .96);
  z-index: 1000;
  display: flex; flex-direction: column;
}
.sketch-modal[hidden] { display: none; }
.sketch-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  padding-top: calc(8px + var(--safe-top));
  background: rgba(0, 0, 0, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  flex-wrap: wrap;
}
.sk-btn {
  padding: 8px 14px;
  background: rgba(255, 255, 255, .08);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.sk-btn:hover { background: rgba(255, 255, 255, .15); }
.sk-btn.primary {
  background: var(--accent);
  color: #1a1500;
  font-weight: 700;
}
.sk-btn.icon-only {
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: center;
}
.sk-spacer { flex: 1 1 0; min-width: 0; }
.sk-color-row, .sk-width-row {
  display: flex; align-items: center; gap: 6px;
}
.sk-color {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: transform .12s, border-color .12s;
}
.sk-color:hover { transform: scale(1.1); }
.sk-color.active { border-color: #fff; }
.sk-width {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
.sk-width:hover { background: rgba(255, 255, 255, .15); }
.sk-width.active { border-color: var(--accent); }
.sk-width span {
  display: block;
  height: 12px;
  border-radius: 2px;
  background: #fff;
}
.sketch-canvas-wrap {
  flex: 1;
  display: flex;
  padding: 12px;
  padding-bottom: calc(12px + var(--safe-bottom));
  overflow: hidden;
}
#sketch-canvas {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  touch-action: none;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
#note-editor h1 { font-size: 22px; font-weight: 700; margin: 4px 0 8px; }
#note-editor h2 { font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
#note-editor p  { margin: 0 0 8px; }
#note-editor ul, #note-editor ol { margin: 4px 0 8px 22px; }
#note-editor li { margin: 2px 0; }
#note-editor b, #note-editor strong { font-weight: 700; }
#note-editor i, #note-editor em { font-style: italic; }
#note-editor u { text-decoration: underline; }
#note-editor s, #note-editor strike { text-decoration: line-through; }

/* Formatierung in der Karten-Vorschau */
.note-card-content {
  word-break: break-word;
  overflow-wrap: anywhere;
  /* white-space: normal überschreibt das pre-wrap der .note-card —
     contenteditable-HTML enthält Source-Newlines zwischen <div>s, die
     mit pre-wrap als sichtbare Leerzeilen gerendert werden. */
  white-space: normal;
}
.note-card-content h1 { font-size: 1.4em; font-weight: 700; margin: 0 0 4px; }
.note-card-content h2 { font-size: 1.2em; font-weight: 700; margin: 0 0 3px; }
.note-card-content ul, .note-card-content ol { margin: 2px 0 0 18px; }
.note-card-content p { margin: 0 0 4px; }
.note-card-content div { margin: 0; }
.note-card-content br { line-height: 1; }

/* ─── Toast ─────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(90px + var(--safe-bottom));
  background: var(--bg-card);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  z-index: 100;
  animation: toast-in .2s ease-out;
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── Desktop layout (≥ 768px) ──────────────────────────── */
@media (min-width: 768px) {
  .notes-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    padding: 24px;
    gap: 16px;
  }
  .editor-card {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
  }
}

/* ─── Share-Sheet ──────────────────────────────────────────── */
.share-sheet[hidden] { display: none !important; }
.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.share-content {
  position: relative;
  background: #ffffff;
  color: #1a1a1a;
  width: 100%;
  max-width: 480px;
  border-radius: 16px 16px 0 0;
  padding: 18px 18px 22px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
@media (min-width: 768px) {
  .share-sheet { align-items: center; padding: 24px; }
  .share-content { border-radius: 16px; max-height: 80vh; }
}
.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.share-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
#share-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #1a1a1a;
}
#share-close-btn:hover {
  background: rgba(0,0,0,0.14);
}
.share-recipients {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.share-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.05);
}
.share-recipient .email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
/* Dreizeiliger Empfänger-Block: Hauptlabel + Sub-Zeile mit Email + display_name
   + verstecktes Spitzname-Edit-Form. Nimmt den .email-flex-Slot ein, hebt die
   nowrap-Regel auf weil Inhalt mehrzeilig wird. */
.share-recipient .recipient-name-block {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.recipient-name-row {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.recipient-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.recipient-edit-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: #555;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.recipient-edit-btn:hover {
  background: rgba(249,217,73,.3);
  color: #1a1a1a;
}
.recipient-sub {
  font-size: 11px;
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipient-edit-form {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.recipient-edit-form[hidden] { display: none; }
.recipient-edit-form input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-size: 13px;
  color: #1a1a1a;
}
.recipient-edit-form input:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
.recipient-save-btn {
  padding: 6px 10px;
  background: var(--accent);
  color: #1a1500;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.recipient-cancel-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #555;
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.share-recipient .role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
}
.share-recipient .icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: #1a1a1a;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
}
.share-recipient .icon-btn:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #c53030;
}
.share-empty {
  padding: 14px 8px;
  opacity: 0.55;
  text-align: center;
  font-size: 13px;
}
#share-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#share-email-input {
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
}
#share-email-input:focus {
  outline: none;
  border-color: #4a90e2;
}
.share-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#share-add-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: #4a90e2;
  color: white;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin-left: auto;
}
#share-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.share-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.share-status.error { color: #c53030; }
.share-status.success { color: #2f855a; }

.share-suggestions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  padding: 4px;
  background: rgba(0,0,0,0.03);
}
.share-suggestions[hidden] { display: none; }
.share-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}
.share-suggestion:hover, .share-suggestion:focus {
  background: rgba(0,0,0,0.07);
  outline: none;
}
.share-suggestion .ss-email { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-suggestion .ss-arrow { opacity: 0.4; font-size: 12px; }
.share-suggestions-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
  padding: 4px 10px 2px;
}

.share-suggestion-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.share-suggestion-row .share-suggestion {
  flex: 1;
  width: auto;
}
.share-suggestion-forget {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.4;
  color: inherit;
}
.share-suggestion-forget:hover, .share-suggestion-forget:focus {
  opacity: 1;
  background: rgba(220, 38, 38, 0.18);
  color: #c53030;
  outline: none;
}

.share-recipient.removed {
  background: rgba(220, 38, 38, 0.10);
}
.share-recipient.removed .email {
  text-decoration: line-through;
  opacity: 0.7;
}
.share-recipient.removed .role {
  color: #c53030;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  opacity: 1;
}

.share-removed-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.10);
}
.share-removed-section[hidden] { display: none; }
.share-removed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.share-removed-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
}
.share-removed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Shared-With sitzt in der Editor-Topbar zwischen Back-Button und
   Editor-Actions. Max 2 Chips + „+N"-Overflow-Pill — kein horizontales
   Scrollen mehr nötig. Lange Namen werden via ellipsis gekürzt, der volle
   Name steht im title-Tooltip und im Share-Sheet (Tap öffnet's). */
.editor-shared-with {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  overflow: hidden;
}
.editor-shared-with[hidden] { display: none; }
.editor-shared-with .esw-icon {
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Legacy-Selector belassen, falls außerhalb des Editors noch jemand das
   Label rendert (Mac-Bridge etc.) — aktuell ungenutzt. */
.editor-shared-with .esw-label {
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  flex-shrink: 0;
}
.editor-shared-with .esw-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  font-size: 12px;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-shared-with .esw-chip.esw-more {
  /* +N-Pill bekommt einen leicht stärkeren Akzent + nimmt nie ellipsis. */
  flex-shrink: 0;
  max-width: none;
  background: rgba(255,255,255,0.18);
  font-weight: 600;
}
.editor-shared-with:hover .esw-chip {
  background: rgba(255,255,255,0.18);
}
.editor-shared-with:hover .esw-chip.esw-more {
  background: rgba(255,255,255,0.28);
}

/* ─── Editor-Empty-State (nur sichtbar im Split-View ohne aktiven Zettel) ─── */
.editor-empty-state {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-dim);
  text-align: center;
  padding: 32px;
}
.editor-empty-state svg {
  opacity: 0.5;
}
.editor-empty-state p {
  font-size: 15px;
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* ─── iPad Split-View (≥ 1000px) ───────────────────────────
   Liste links (Default 360px, per Drag-Divider 280–700px änderbar),
   Editor rechts. Breite kommt aus CSS-Var `--list-pane-width`, gesetzt
   von JS aus localStorage `zk_list_pane_width`. Default-Fallback:
   var() greift auf 360px zurück. */
:root {
  --list-pane-width: 360px;
}
@media (min-width: 1000px) {
  body.split-view #view-list,
  body.split-view #view-editor {
    /* Hidden-Attribut wird von JS ignoriert solange split-view aktiv ist —
       trotzdem als Sicherheitsnetz: display erzwingen. */
    display: flex !important;
  }
  body.split-view #view-list {
    left: 0;
    right: auto;
    width: var(--list-pane-width, 360px);
    border-right: 1px solid var(--border);
  }
  body.split-view #view-editor {
    left: var(--list-pane-width, 360px);
    right: 0;
    width: auto;
  }
  /* Im Split-View: Titel optional (siehe Container-Query unten), ✚ rechts
     bei den Actions — sonst klebt der ✚-Button verloren am linken Rand.
     Layout: [Titel-Bereich 1fr] [✚] [Actions]. Bei schmaler Liste-Pane
     bleibt Spalte 1 leer, ✚+Actions schweben rechts. */
  body.split-view #view-list .topbar {
    grid-template-columns: 1fr auto auto;
    column-gap: 8px;
  }
  body.split-view #view-list .topbar h1 {
    display: none;
  }
  body.split-view #view-list .topbar .topbar-add {
    grid-column: 2;
    justify-self: end;
  }
  body.split-view #view-list .topbar .topbar-actions {
    grid-column: 3;
    justify-self: end;
  }
  /* Container-Query auf der Liste-Pane: ab ~460px ist genug Platz für den
     Schriftzug links neben ✚ und Actions. Aktualisiert sich live beim
     Divider-Ziehen, weil #view-list ein Inline-Size-Container ist. */
  body.split-view #view-list {
    container: list-pane / inline-size;
  }
  @container list-pane (min-width: 460px) {
    body.split-view #view-list .topbar h1 {
      display: block;
      grid-column: 1;
      justify-self: start;
      align-self: center;
    }
  }
  /* Topbar-Höhen list/editor angleichen — der ✚-Button (44px) bestimmt
     im Listen-Pane die Zeilenhöhe, im Editor-Pane sind nur 40px-Icons
     drin. Ohne min-height läuft die untere Trennlinie 4px unterschiedlich
     hoch zwischen den Panes. */
  body.split-view .topbar {
    min-height: 60px;
  }
  /* Im Split-View braucht der Editor keinen Zurück-Button — Liste ist
     immer links sichtbar. */
  body.split-view #view-editor #back-btn {
    display: none;
  }
  /* Editor-Card nutzt mehr Breite — vorher 720px, ließ rechts viel
     dunkle Fläche frei. 900px gibt der Sticky mehr Raum, ohne dass
     Zeilen unangenehm lang werden. */
  body.split-view #view-editor .editor-card {
    max-width: 900px;
  }
  /* Empty-State sichtbar wenn kein Zettel gewählt ist. Alles andere
     im Editor versteckt. */
  body.split-view #view-editor:not(.has-note) > :not(.editor-empty-state) {
    display: none !important;
  }
  body.split-view #view-editor:not(.has-note) .editor-empty-state {
    display: flex;
  }
  /* Aktiver Zettel in der Liste markiert — visueller Anker im Split. */
  body.split-view .note-card.active-in-editor {
    outline: 2px solid var(--accent, #4a8af4);
    outline-offset: 2px;
  }
  /* Drag-Divider: 20px breite Hit-Zone (komfortables Greifen mit dem
     Finger) plus sichtbarer Grip — vertikale Pille mittig, damit klar
     ist dass man hier ziehen kann. */
  body.split-view #split-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(var(--list-pane-width, 360px) - 10px);
    width: 20px;
    z-index: 50;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
  }
  /* Grip-Indikator (4×40px-Pille) mittig im Pane — dezent im Idle,
     leuchtet beim Hover/Drag. */
  body.split-view #split-divider::before {
    content: "";
    width: 4px;
    height: 40px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.15s, transform 0.15s;
  }
  body.split-view #split-divider:hover::before,
  body.split-view #split-divider.dragging::before {
    background: rgba(249, 217, 73, 0.85);
    transform: scaleY(1.3);
  }
}
/* Default: Divider versteckt — nur im Split-View aktiv. */
#split-divider {
  display: none;
}

/* ─── iPad Windowed-Mode: native Fenster-Controls oben links ──────
   iPadOS 26 rendert ×/–/⤢ über dem Web-Content. ~96px Clearance links
   reicht (Controls + kleiner Innenabstand), damit weder Titel noch
   Back-Button verdeckt werden. Greift NUR auf Capacitor-iOS-iPad —
   nicht im Browser oder auf dem iPhone. !important, weil der Padding-
   Default in `.topbar`/`.sketch-toolbar` mit gleicher Specificity steht. */
body.ipad-window .topbar,
body.ipad-window .sketch-toolbar {
  padding-left: 96px !important;
}
/* Im Split-View klebt der Editor-Pane an left:360px — der ist sowieso
   außerhalb der Controls. Nur die Liste links braucht Padding. */
body.ipad-window.split-view #view-editor .topbar {
  padding-left: 12px !important;
}

/* ─── iPad Querformat: mehr Spalten in der Liste (auch ohne Split) ── */
@media (min-width: 768px) {
  /* Greift NICHT für free-layout — dort positioniert JS die Karten absolut
     in einem .canvas-Wrapper (Tidy-Mode mit Drag-Reorder). */
  body.split-view .notes-grid:not(.free-layout) {
    /* Im Split-View ist die Liste schmal (360px) — kompaktere Spalten. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    padding: 14px;
    gap: 12px;
  }
}