@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Kalam:wght@400;700&display=swap');

:root {
  --canvas: #eee9de;
  --canvas-deep: #e5ded1;
  --paper: #faf8f2;
  --ink: #24231f;
  --muted: #746f65;
  --line: rgba(49, 46, 40, .14);
  --line-strong: rgba(49, 46, 40, .24);
  --charcoal: #282823;
  --red: #d95b4b;
  --green: #477765;
  --yellow: #f7df6c;
  --peach: #f5b983;
  --mint: #a9dcc0;
  --blue: #a9d7e8;
  --lilac: #c9b8e9;
  --rose: #efb4bf;
  --sidebar-w: 216px;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(59, 51, 39, .12);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.5), transparent 26%),
    repeating-linear-gradient(115deg, transparent 0 4px, rgba(83,69,46,.012) 4px 5px),
    var(--canvas);
  font-family: "DM Sans", ui-sans-serif, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, .sticky-note { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(71,119,101,.32);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 25px 16px 18px;
  border-right: 1px solid var(--line);
  background: rgba(243, 239, 231, .82);
  backdrop-filter: blur(16px);
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 6px 38px;
  color: var(--ink);
  text-decoration: none;
}
.brand > span:last-child { display: flex; align-items: baseline; gap: 3px; font-size: 18px; letter-spacing: -.04em; }
.brand strong { font-weight: 700; }
.brand small { color: var(--muted); font-size: 13px; }
.brand-mark { position: relative; display: block; width: 31px; height: 27px; }
.brand-mark i { position: absolute; display: block; width: 18px; height: 18px; border-radius: 2px; box-shadow: 0 3px 5px rgba(32,29,24,.13); }
.brand-mark i:nth-child(1) { left: 0; top: 5px; background: var(--yellow); transform: rotate(-8deg); }
.brand-mark i:nth-child(2) { left: 10px; top: 0; background: var(--mint); transform: rotate(5deg); }
.brand-mark i:nth-child(3) { right: 0; bottom: 0; background: var(--peach); transform: rotate(10deg); }
.sidebar-label { padding: 0 10px 8px; color: #8a8479; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.board-nav { display: grid; gap: 4px; }
.board-link {
  position: relative;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.board-link:hover { background: rgba(255,255,255,.55); }
.board-link.active { background: #fffdfa; box-shadow: 0 4px 16px rgba(56,49,38,.07); }
.board-link.active::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--charcoal); }
.board-link .board-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--pin, #777); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.board-link .board-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board-link .board-count { color: #9a9488; font-size: 12px; font-variant-numeric: tabular-nums; }
.add-board-btn, .utility-btn {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.add-board-btn:hover, .utility-btn:hover { background: rgba(255,255,255,.5); color: var(--ink); }
.add-board-btn > span { font-size: 20px; font-weight: 300; }
.sidebar-spacer { flex: 1; }
.utility-btn { color: var(--ink); }
.utility-icon { width: 14px; font-size: 22px; transform: rotate(180deg); }
.settings-gear { font-size: 15px; transform: none; }
.planner-utility-icon { font-size: 16px; transform: none; }
.count-badge { margin-left: auto; min-width: 23px; padding: 2px 7px; border-radius: 20px; background: rgba(42,42,37,.08); color: var(--muted); font-size: 11px; text-align: center; }
.save-note { display: flex; align-items: center; gap: 7px; margin: 13px 10px 0; color: #928c80; font-size: 10px; }
.save-note span { width: 6px; height: 6px; border-radius: 50%; background: #68a083; box-shadow: 0 0 0 3px rgba(104,160,131,.13); }

.main-content { min-width: 0; padding: 0 28px 28px; }
.topbar {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 21px 4px 17px;
}
.eyebrow { margin: 0 0 4px; color: #888176; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.title-line { display: flex; align-items: center; gap: 7px; }
h1 { margin: 0; font-size: clamp(25px, 2.2vw, 33px); line-height: 1; letter-spacing: -.045em; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.icon-btn:hover { background: white; box-shadow: 0 5px 13px rgba(48,42,33,.08); transform: translateY(-1px); }
.board-menu-btn { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); letter-spacing: 1px; }
.primary-btn, .secondary-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary-btn { border: 1px solid #1d1d1a; background: var(--charcoal); color: white; box-shadow: 0 7px 15px rgba(38,37,32,.13); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(38,37,32,.18); background: #171714; }
.secondary-btn { border: 1px solid var(--line-strong); background: white; color: var(--ink); }
.secondary-btn:hover { background: #f7f4ed; }
.label-toggle-btn { min-width: 88px; padding: 0 12px; }
.overview-toggle-btn { min-width: 104px; padding: 0 12px; }
.planner-btn { min-width: 82px; padding: 0 12px; border-color: rgba(71,119,101,.28); background: #edf3ef; color: #3e6d59; }
.planner-btn:hover { background: #e3eee7; }
.planner-btn-icon { margin-right: 1px; font-size: 15px; }
.label-toggle-btn.hidden { display: none; }
.label-toggle-btn[aria-pressed="false"] { background: #efede7; color: #898378; box-shadow: inset 0 0 0 1px rgba(48,44,37,.03); }
.overview-toggle-btn[aria-pressed="true"] { border-color: #779383; background: #e8f0eb; color: var(--green); }
.label-toggle-icon { position: relative; width: 17px; height: 12px; flex: 0 0 17px; overflow: hidden; color: transparent; font-size: 0; }
.label-toggle-icon::before { content: ""; position: absolute; left: 1px; right: 1px; top: 6px; border-top: 1px dashed currentColor; color: #5f5a51; transform: rotate(-18deg); transform-origin: center; }
.label-toggle-icon::after { content: ""; position: absolute; right: 1px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; color: #5f5a51; box-shadow: -12px 5px 0 currentColor; }
.label-toggle-btn[aria-pressed="false"] .label-toggle-icon { opacity: .45; }
.overview-toggle-icon { margin-right: 6px; font-size: 15px; }

.workspace { display: grid; grid-template-columns: minmax(560px, 1fr) 330px; gap: 18px; align-items: stretch; }
.matrix-column { min-width: 0; }
.matrix-toolbar { min-height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 0 7px 8px; }
.matrix-toolbar p { margin: 0; color: var(--muted); font-size: 11px; }
.matrix-toolbar p strong { color: var(--ink); }
.matrix-toolbar p span { padding: 0 4px; }
.legend { max-width: 72%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.mini-note { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; border: 0; border-radius: 2px; background: var(--note-color); color: #3d3a34; box-shadow: 0 2px 3px rgba(34,31,25,.13); cursor: pointer; font-family: inherit; transition: width .2s ease, height .2s ease, padding .2s ease, transform .16s ease, border-radius .2s ease; }
.mini-note:hover { transform: translateY(-2px) rotate(3deg); }
.mini-note.named-subgroup { width: auto; min-width: 54px; max-width: 150px; height: 28px; padding: 0 10px; border-radius: 5px 5px 8px 5px; box-shadow: 0 4px 8px rgba(34,31,25,.14); }
.subgroup-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 750; letter-spacing: .015em; }
.yellow { --note-color: var(--yellow); }
.peach { --note-color: var(--peach); }
.mint { --note-color: var(--mint); }
.blue { --note-color: var(--blue); }
.lilac { --note-color: var(--lilac); }
.rose { --note-color: var(--rose); }
.teal { --note-color: #79cdb7; }
.slate { --note-color: #aeb8c5; }

.subgroup-dialog { width: min(440px, calc(100vw - 28px)); }
.subgroup-dialog form { padding: 27px; }
.subgroup-context { display: flex; align-items: center; gap: 12px; margin: 2px 0 20px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.48); }
.subgroup-context > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.subgroup-context strong { font-size: 12px; text-transform: capitalize; }
.subgroup-context small, .subgroup-help { color: var(--muted); font-size: 10px; line-height: 1.5; }
.subgroup-color-preview { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 5px 5px 9px 5px; background: var(--subgroup-color); box-shadow: 0 4px 9px rgba(45,40,33,.14); }
.subgroup-help { margin: 9px 2px 0; }
.subgroup-dialog-actions { justify-content: flex-end; }

.board-frame {
  position: relative;
  padding: 12px;
  border-radius: 9px;
  background:
    linear-gradient(145deg, #b5aaa0, #f7f3ec 18%, #c2b9ad 52%, #fcfaf5 76%, #a49c91),
    #d5cec4;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(68,60,50,.22), inset 0 0 0 2px rgba(255,255,255,.45);
}
.board-frame::before, .board-frame::after { content: ""; position: absolute; z-index: 3; border-radius: 50%; width: 5px; height: 5px; background: #938b80; box-shadow: inset 0 1px 1px #5f594f, 0 1px 1px white; }
.board-frame::before { left: 6px; top: 6px; }
.board-frame::after { right: 6px; bottom: 6px; }
.matrix-board {
  position: relative;
  height: clamp(570px, calc(100vh - 196px), 760px);
  min-height: 570px;
  overflow: visible;
  border: 1px solid rgba(75,72,65,.13);
  border-radius: 2px;
  background:
    radial-gradient(circle at 23% 19%, rgba(255,255,255,.9), transparent 25%),
    radial-gradient(circle at 78% 83%, rgba(234,231,222,.55), transparent 28%),
    repeating-linear-gradient(8deg, transparent 0 16px, rgba(62,61,55,.012) 16px 17px),
    #fbfaf6;
  box-shadow: inset 0 1px 8px rgba(60,56,47,.1);
  isolation: isolate;
  perspective: 1100px;
  touch-action: none;
}
.matrix-board::before, .matrix-board::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.matrix-board::before { left: 50%; top: 45px; bottom: 45px; width: 1px; background: rgba(55,53,48,.19); }
.matrix-board::after { top: 50%; left: 48px; right: 48px; height: 1px; background: rgba(55,53,48,.19); }
.quadrant { position: absolute; width: 50%; height: 50%; padding: 20px 22px; pointer-events: none; }
.quadrant > div { display: flex; flex-direction: column; gap: 2px; opacity: .62; }
.quadrant strong { font-family: "Kalam", cursive; font-size: 17px; font-weight: 700; }
.quadrant span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.q-tl { left: 0; top: 0; }
.q-tr { right: 0; top: 0; text-align: right; }
.q-tr > div { align-items: flex-end; }
.q-bl { left: 0; bottom: 0; display: flex; align-items: flex-end; padding-bottom: 36px; }
.q-br { right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding-bottom: 36px; text-align: right; }
.q-br > div { align-items: flex-end; }
.axis { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #989185; font-size: 7px; font-weight: 700; letter-spacing: .1em; pointer-events: none; }
.axis b { color: #656057; font-size: 8px; letter-spacing: .16em; }
.axis-x { left: 58px; right: 58px; bottom: 15px; }
.axis-y { top: 66px; bottom: 66px; left: 14px; writing-mode: vertical-rl; transform: rotate(180deg); }
.sticky-layer { position: absolute; inset: 0; z-index: 5; overflow: visible; }
.callout-lines { position: absolute; inset: 0; z-index: 92; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.callout-line { fill: none; stroke: rgba(38,37,33,.62); stroke-width: 1.25; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.callout-target { fill: #292923; stroke: rgba(255,255,255,.84); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.overlap-callouts { position: absolute; inset: 0; z-index: 96; overflow: visible; pointer-events: none; }
.overlap-callout { position: absolute; max-width: 180px; min-height: 24px; display: flex; align-items: center; gap: 6px; overflow: hidden; padding: 5px 9px; border: 1px solid rgba(47,43,36,.18); border-radius: 999px; background: rgba(251,249,243,.96); color: #39362f; box-shadow: 0 5px 18px rgba(45,40,32,.14); font-size: 8px; font-weight: 700; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); }
.overlap-callout::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 2px; background: var(--callout-color); box-shadow: inset 0 0 0 1px rgba(42,37,26,.14); }
.overlap-callout:hover, .overlap-callout:focus-visible { outline: none; border-color: rgba(47,43,36,.38); background: white; transform: translate(-50%, -50%) translateY(-1px); }
.board-empty { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; transition: opacity .2s ease; }
.board-empty.hidden { opacity: 0; }
.empty-sticky {
  width: 170px;
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(247,223,108,.54);
  color: rgba(67,58,31,.58);
  font-family: "Kalam", cursive;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 11px 24px rgba(57,50,31,.08);
}
.coordinate-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 17px 0; color: #928b80; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.sticky-note {
  --rotation: 0deg;
  --note-scale: 1;
  --note-pad-x: 15px;
  --note-pad-top: 25px;
  --note-pad-bottom: 20px;
  position: absolute;
  width: var(--note-w, 142px);
  height: var(--note-h, 126px);
  min-width: 12px;
  min-height: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--note-pad-top) var(--note-pad-right, var(--note-pad-x)) var(--note-pad-bottom) var(--note-pad-left, var(--note-pad-x));
  border: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 37%),
    linear-gradient(to bottom, var(--note-color) 0 88%, color-mix(in srgb, var(--note-color) 82%, #8e7d45) 100%);
  color: #3f3828;
  cursor: grab;
  text-align: left;
  user-select: none;
  transform: translate(-50%, -50%) rotate(var(--rotation)) rotateX(1deg);
  transform-origin: 50% 20%;
  box-shadow: 2px 4px 3px rgba(45,39,25,.13), 0 15px 22px rgba(45,39,25,.09);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
  touch-action: none;
}
.sticky-note::before { content: ""; position: absolute; right: 0; bottom: 0; width: 19px; height: 19px; background: linear-gradient(315deg, rgba(255,255,255,.58) 48%, rgba(91,74,34,.13) 51%, transparent 55%); pointer-events: none; }
.sticky-note::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -8px; height: 12px; border-radius: 50%; background: rgba(53,43,22,.13); filter: blur(5px); z-index: -1; }
.sticky-note:hover { transform: translate(-50%, -52%) rotate(var(--rotation)) rotateX(0) scale(1.025); box-shadow: 3px 7px 5px rgba(45,39,25,.16), 0 21px 26px rgba(45,39,25,.12); z-index: 80 !important; }
.sticky-note.dragging { cursor: grabbing; transform: translate(-50%, -55%) rotate(0) scale(1.06); box-shadow: 8px 18px 16px rgba(45,39,25,.2), 0 30px 30px rgba(45,39,25,.13); filter: saturate(1.04); z-index: 200 !important; transition: box-shadow .12s ease, transform .12s ease; }
.sticky-note.resizing { cursor: nwse-resize; transform: translate(-50%, -50%) rotate(0); z-index: 210 !important; transition: none; }
.sticky-note.keyboard-selected { outline: 3px solid rgba(36,65,52,.82); outline-offset: 4px; box-shadow: 0 0 0 7px rgba(255,255,255,.72), 3px 8px 8px rgba(45,39,25,.17), 0 22px 30px rgba(45,39,25,.12); z-index: 120 !important; }
.sticky-content { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.sticky-top { order: 0; display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: calc(7px * var(--note-scale)); margin-bottom: calc(8px * var(--note-scale)); }
.sticky-check {
  width: calc(22px * var(--note-scale));
  height: calc(22px * var(--note-scale));
  min-width: 3px;
  min-height: 3px;
  flex: 0 0 calc(22px * var(--note-scale));
  display: grid;
  place-items: center;
  padding: 0;
  border: max(1px, calc(1.5px * var(--note-scale))) solid rgba(57,50,34,.4);
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: transparent;
  cursor: pointer;
  font-family: sans-serif;
  font-size: calc(13px * var(--note-scale));
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.sticky-check:hover { background: rgba(255,255,255,.48); color: rgba(57,50,34,.55); transform: scale(1.08); }
.sticky-board-tag { max-width: calc(100% - (31px * var(--note-scale))); overflow: hidden; color: rgba(57,50,34,.58); font-size: calc(7px * var(--note-scale)); font-weight: 700; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sticky-title { order: 1; display: block; flex: 0 0 auto; min-height: 0; max-width: 100%; overflow: hidden; margin: 0; font-family: "Kalam", cursive; font-size: var(--title-size, 16px); font-weight: 700; line-height: 1.16; overflow-wrap: anywhere; word-break: break-word; }
.sticky-notes { order: 2; display: block; flex: 0 0 auto; min-height: 0; max-width: 100%; overflow: hidden; margin: var(--text-gap, calc(6px * var(--note-scale))) 0 0; color: rgba(57,50,34,.65); font-family: "Kalam", cursive; font-size: var(--notes-size, 11px); line-height: 1.23; overflow-wrap: anywhere; word-break: break-word; }
.sticky-score { order: 3; flex: 0 0 auto; margin-top: auto; padding-top: calc(9px * var(--note-scale)); color: rgba(57,50,34,.56); font-size: calc(8px * var(--note-scale)); font-weight: 700; letter-spacing: .08em; }
.sticky-note.layout-meta-bottom .sticky-top { order: 4; margin: var(--text-gap, 6px) 0 0; }
.sticky-note.layout-score-top .sticky-score { order: -1; margin: 0 0 var(--text-gap, 6px); padding-top: 0; }
.sticky-note.layout-meta-bottom.layout-score-top .sticky-top { margin-top: var(--text-gap, 6px); }
.drag-anchor-dot { position: absolute; left: 50%; top: 50%; z-index: 12; width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; background: #191917; box-shadow: 0 2px 8px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.55); transition: opacity .1s ease, transform .1s ease; }
.sticky-note.dragging .drag-anchor-dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sticky-edit { position: absolute; right: calc(20px * var(--note-scale)); bottom: 1px; width: max(10px, calc(24px * var(--note-scale))); height: max(8px, calc(20px * var(--note-scale))); border: 0; background: transparent; opacity: 0; cursor: pointer; font-size: calc(13px * var(--note-scale)); font-weight: 700; letter-spacing: 1px; transition: opacity .15s ease; }
.sticky-note:hover .sticky-edit, .sticky-note:focus-within .sticky-edit { opacity: .62; }
.sticky-edge-title { position: absolute; z-index: 2; overflow: hidden; color: rgba(57,50,34,.46); font-size: max(4px, calc(7px * var(--note-scale))); font-weight: 700; letter-spacing: .06em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.sticky-edge-title.edge-top { top: max(2px, calc(8px * var(--note-scale))); right: max(7px, calc(25px * var(--note-scale))); max-width: calc(100% - max(12px, calc(42px * var(--note-scale)))); text-align: right; }
.sticky-edge-title.edge-bottom { left: max(2px, calc(10px * var(--note-scale))); bottom: max(2px, calc(7px * var(--note-scale))); max-width: calc(100% - max(15px, calc(62px * var(--note-scale)))); }
.sticky-category-dot { position: absolute; top: max(2px, calc(7px * var(--note-scale))); right: max(2px, calc(8px * var(--note-scale))); z-index: 3; width: max(4px, calc(9px * var(--note-scale))); height: max(4px, calc(9px * var(--note-scale))); border-radius: 50%; background: var(--source-note-color, #777); box-shadow: inset 0 0 0 1px rgba(30,27,22,.18), 0 1px 2px rgba(40,35,25,.16); }
.sticky-resize-handle { position: absolute; right: 0; bottom: 0; z-index: 15; width: max(12px, calc(20px * var(--note-scale))); height: max(12px, calc(20px * var(--note-scale))); border: 0; background: transparent; cursor: nwse-resize; opacity: 0; }
.sticky-resize-handle::before { content: ""; position: absolute; right: 3px; bottom: 3px; width: max(4px, calc(8px * var(--note-scale))); height: max(4px, calc(8px * var(--note-scale))); border-right: 1px solid rgba(57,50,34,.45); border-bottom: 1px solid rgba(57,50,34,.45); }
.sticky-note:hover .sticky-resize-handle, .sticky-note:focus-within .sticky-resize-handle, .sticky-note.resizing .sticky-resize-handle { opacity: 1; }
.sticky-note.appearance-clean { transform: translate(-50%, -50%); border-radius: 5px; background: var(--note-color); box-shadow: 0 7px 18px rgba(45,39,25,.13); }
.sticky-note.appearance-clean:hover { transform: translate(-50%, -52%) scale(1.02); }
.sticky-note.appearance-clean::before, .sticky-note.appearance-clean::after { display: none; }
.sticky-note.appearance-outline { transform: translate(-50%, -50%); border: 2px solid color-mix(in srgb, var(--note-color) 72%, #514b40); border-radius: 7px; background: color-mix(in srgb, var(--note-color) 23%, white); box-shadow: 0 8px 18px rgba(45,39,25,.09); }
.sticky-note.appearance-outline:hover { transform: translate(-50%, -52%) scale(1.02); }
.sticky-note.appearance-outline::before, .sticky-note.appearance-outline::after { display: none; }
.sticky-note.appearance-clean.dragging, .sticky-note.appearance-outline.dragging { transform: translate(-50%, -55%) scale(1.06); }
.sticky-note.appearance-clean.resizing, .sticky-note.appearance-outline.resizing { transform: translate(-50%, -50%); }
.sticky-note.title-align-center .sticky-title { text-align: center; }
.sticky-note.overflow-clip .sticky-title { text-overflow: clip !important; }
.sticky-note.title-only .sticky-content { justify-content: center; }
.sticky-note.title-only .sticky-top, .sticky-note.title-only .sticky-notes, .sticky-note.title-only .sticky-score, .sticky-note.title-only .sticky-edge-title, .sticky-note.title-only .sticky-category-dot { display: none; }
.sticky-note.title-only .sticky-title { width: 100%; max-height: 100%; margin: auto 0; overflow: hidden; }
.sticky-note.title-only .sticky-edit, .sticky-note.title-only .sticky-resize-handle { opacity: 0; }
.sticky-note.title-only:hover .sticky-edit { opacity: .62; }
.sticky-note.title-only:hover .sticky-resize-handle { opacity: 1; }
.sticky-note.title-only.title-show-complete .sticky-top, .sticky-note.title-only.title-show-meta .sticky-top { position: absolute; left: var(--note-pad-x); right: var(--note-pad-x); top: var(--note-pad-top); display: flex; z-index: 5; margin: 0; }
.sticky-note.title-only:not(.title-show-complete) .sticky-check { display: none; }
.sticky-note.title-only:not(.title-show-meta) .sticky-board-tag { display: none; }
.sticky-note.title-only.title-show-color .sticky-category-dot { display: block; }
.sticky-note.title-only.title-show-score .sticky-score { position: absolute; left: var(--note-pad-x); bottom: var(--note-pad-bottom); display: block; z-index: 5; margin: 0; padding: 0; }
.sticky-note.title-only.title-show-mini .sticky-edge-title { display: block; }

/* Freeform mode positions every element inside the padded sticky coordinate space. */
.sticky-note.layout-free { padding: 0; }
.sticky-note.layout-free .sticky-content { position: absolute; inset: 0; height: auto; display: block; overflow: hidden; }
.sticky-note.layout-free .sticky-top { position: static !important; inset: auto !important; margin: 0 !important; }
.sticky-note.layout-free:not(.title-only) .sticky-top,
.sticky-note.layout-free.title-only.title-show-complete .sticky-top,
.sticky-note.layout-free.title-only.title-show-meta .sticky-top { display: contents; }
.sticky-note.layout-free .sticky-title,
.sticky-note.layout-free .sticky-notes,
.sticky-note.layout-free .sticky-board-tag,
.sticky-note.layout-free .sticky-score,
.sticky-note.layout-free .sticky-check,
.sticky-note.layout-free .sticky-category-dot,
.sticky-note.layout-free .sticky-edge-title { position: absolute; max-width: none; max-height: none; min-width: 0; min-height: 0; z-index: 4; margin: 0; padding: 0; overflow: hidden; }
.sticky-note.layout-free .sticky-title { left: var(--box-title-left); top: var(--box-title-top); width: var(--box-title-width); height: var(--box-title-height); display: flex; flex-direction: column; }
.sticky-note.layout-free .sticky-notes { left: var(--box-notes-left); top: var(--box-notes-top); width: var(--box-notes-width); height: var(--box-notes-height); }
.sticky-note.layout-free .sticky-board-tag { left: var(--box-meta-left); top: var(--box-meta-top); width: var(--box-meta-width); height: var(--box-meta-height); display: flex; align-items: center; white-space: nowrap; }
.sticky-note.layout-free .sticky-score { left: var(--box-score-left); top: var(--box-score-top); bottom: auto; width: var(--box-score-width); height: var(--box-score-height); display: flex; align-items: center; }
.sticky-note.layout-free .sticky-check { left: var(--box-complete-left); top: var(--box-complete-top); width: var(--box-complete-width); height: var(--box-complete-height); display: grid; flex: none; font-size: min(var(--box-complete-width), var(--box-complete-height)); }
.sticky-note.layout-free .sticky-category-dot { left: var(--box-color-left); top: var(--box-color-top); right: auto; width: var(--box-color-width); height: var(--box-color-height); }
.sticky-note.layout-free .sticky-edge-title.edge-top { left: var(--box-mini-top-left); top: var(--box-mini-top-top); right: auto; bottom: auto; width: var(--box-mini-top-width); height: var(--box-mini-top-height); text-align: inherit; }
.sticky-note.layout-free .sticky-edge-title.edge-bottom { left: var(--box-mini-bottom-left); top: var(--box-mini-bottom-top); right: auto; bottom: auto; width: var(--box-mini-bottom-width); height: var(--box-mini-bottom-height); }
.sticky-note.layout-free.title-only .sticky-title { width: var(--box-title-width); height: var(--box-title-height); margin: 0; }
.sticky-note.layout-free.title-only.title-show-score .sticky-score { left: var(--box-score-left); top: var(--box-score-top); bottom: auto; width: var(--box-score-width); height: var(--box-score-height); }
.sticky-note.layout-free.compact-note:not(.title-only) .sticky-edge-title,
.sticky-note.layout-free.compact-note.title-only.title-show-mini .sticky-edge-title { display: block; }
.sticky-note.layout-free.tiny-note { padding: 0; }
.sticky-note.layout-free.tiny-note .sticky-content { display: block; }
.sticky-note.layout-free.tiny-note .sticky-title { width: var(--box-title-width); height: var(--box-title-height); font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; white-space: normal; word-break: break-word; }
.sticky-note.layout-free.tiny-note:not(.title-only) .sticky-top { display: contents; }
.sticky-note.layout-free.tiny-note:not(.title-only) .sticky-notes,
.sticky-note.layout-free.tiny-note:not(.title-only) .sticky-score,
.sticky-note.layout-free.tiny-note:not(.title-only) .sticky-edge-title { display: block; }
.sticky-note.compact-note .sticky-edge-title, .sticky-note.compact-note .sticky-edit { display: none; }
.sticky-note.tiny-note { padding: 2px; border-radius: 2px; }
.sticky-note.tiny-note .sticky-content { display: grid; place-items: center; }
.sticky-note.tiny-note .sticky-top, .sticky-note.tiny-note .sticky-notes, .sticky-note.tiny-note .sticky-score, .sticky-note.tiny-note .sticky-edge-title, .sticky-note.tiny-note .sticky-edit { display: none; }
.sticky-note.tiny-note .sticky-title { width: 100%; max-height: 100%; overflow: hidden; font-size: var(--tiny-title-size, 9px); line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.sticky-note.icon-note .sticky-category-dot { display: none; }
.sticky-note.icon-note .sticky-title { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.sticky-note.icon-note .sticky-resize-handle { width: 7px; height: 7px; }
.sticky-note.tiny-note::before { width: 6px; height: 6px; }
.sticky-note.tiny-note::after { display: none; }

.queue-panel {
  position: relative;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 49px, rgba(71,65,55,.045) 49px 50px),
    rgba(250,248,242,.84);
  box-shadow: 0 15px 40px rgba(58,51,41,.08);
}
.queue-header { position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 22px 10px; }
.queue-grip { display: none; position: absolute; left: 50%; top: 7px; color: #aaa398; font-size: 8px; letter-spacing: 2px; transform: translateX(-50%); }
.queue-resize-handle { display: none; position: absolute; right: 0; bottom: 0; z-index: 10; width: 24px; height: 24px; cursor: nwse-resize; }
.queue-resize-handle::before { content: ""; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px; border-right: 2px solid rgba(68,64,57,.35); border-bottom: 2px solid rgba(68,64,57,.35); }
.queue-header h2 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.queue-count { min-width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--charcoal); color: white; font-size: 12px; font-weight: 700; }
.queue-explainer { margin: 0; padding: 0 22px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.todo-list { max-height: calc(100vh - 324px); min-height: 0; overflow: auto; margin: 0; padding: 4px 0 0; list-style: none; scrollbar-width: thin; }
.todo-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(49,46,40,.08);
  cursor: pointer;
  transition: background .14s ease;
}
.todo-item:hover { background: rgba(255,255,255,.65); }
.todo-rank { z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; justify-self: center; color: #8f897f; font-family: "Kalam", cursive; font-size: 11px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.todo-main { min-width: 0; }
.todo-title { display: block; overflow: hidden; margin-bottom: 3px; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.todo-meta { display: flex; align-items: center; gap: 6px; color: #8a8378; font-size: 9px; }
.todo-color { width: 7px; height: 7px; border-radius: 1px; background: var(--note-color); }
.todo-score { min-width: 35px; padding: 3px 6px; border-radius: 12px; background: rgba(42,42,37,.06); color: #676158; font-size: 9px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.todo-complete { position: absolute; left: 19px; top: 50%; z-index: 4; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; transform: translateY(-50%); }
.todo-check-visual { position: absolute; left: 19px; top: 50%; z-index: 2; width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid #aaa398; border-radius: 50%; color: white; pointer-events: none; transform: translateY(-50%); transition: background .14s ease, border .14s ease, transform .14s ease; }
.todo-check-visual::after { content: "✓"; opacity: 0; font-family: ui-sans-serif, sans-serif; font-size: 14px; font-weight: 800; line-height: 1; transform: scale(.65); transition: opacity .12s ease, transform .12s ease; }
.todo-complete:hover ~ .todo-check-visual,
.todo-complete:focus-visible ~ .todo-check-visual { border-color: var(--green); background: var(--green); transform: translateY(-50%) scale(1.04); }
.todo-complete:hover ~ .todo-check-visual::after,
.todo-complete:focus-visible ~ .todo-check-visual::after { opacity: 1; transform: scale(1); }
.todo-complete:hover ~ .todo-rank,
.todo-complete:focus-visible ~ .todo-rank { opacity: 0; }
.todo-complete:focus-visible ~ .todo-check-visual { outline: 2px solid rgba(71,119,101,.32); outline-offset: 3px; }
.queue-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 36px; color: #958e82; text-align: center; }
.queue-empty.hidden { display: none; }
.queue-empty p { max-width: 170px; margin: 0; font-family: "Kalam", cursive; font-size: 16px; }
.queue-empty-line { width: 55px; height: 1px; background: #c1baae; }
.score-key { margin-top: auto; display: flex; justify-content: space-around; gap: 5px; padding: 13px 12px; border-top: 1px solid var(--line); background: rgba(245,242,234,.9); color: #898276; font-size: 8px; font-weight: 600; }
.score-key span { display: flex; align-items: center; gap: 4px; }
.score-dot { width: 6px; height: 6px; border-radius: 50%; }
.score-dot.high { background: #5f987a; }.score-dot.mid { background: #d0a85c; }.score-dot.low { background: #b77b70; }

.app-dialog {
  width: min(620px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(47,43,36,.15);
  border-radius: 16px;
  background: #fbf9f3;
  color: var(--ink);
  box-shadow: 0 35px 90px rgba(37,32,24,.28);
}
.app-dialog::backdrop { background: rgba(42,39,34,.38); backdrop-filter: blur(3px); }
.app-dialog[open] { animation: dialog-in .2s cubic-bezier(.2,.8,.2,1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.app-dialog form, .bin-dialog, .help-dialog { padding: 27px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dialog-head h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.dialog-head .dialog-close { flex: 0 0 40px; font-size: 22px; }
.field-label { display: block; margin: 0 0 7px; color: #5c574f; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field-label span { color: #aaa397; font-weight: 500; text-transform: lowercase; }
.text-input {
  width: 100%;
  min-height: 44px;
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid #d8d2c7;
  border-radius: 9px;
  background: white;
  color: var(--ink);
  resize: vertical;
  transition: border .15s ease, box-shadow .15s ease;
}
.text-input:focus { outline: none; border-color: #799c8b; box-shadow: 0 0 0 3px rgba(71,119,101,.12); }
.title-input { font-size: 17px; font-weight: 600; }
.task-planning-fields { margin: 4px 0 20px; padding: 15px; border: 1px solid #cbd7ce; border-radius: 11px; background: linear-gradient(145deg, rgba(235,243,237,.74), rgba(255,255,255,.48)); }
.task-planning-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.task-planning-head .field-label { margin-bottom: 3px; }
.task-planning-head small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.task-source-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #dfe9e2; color: #47725f; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.planning-field-grid { gap: 9px 12px; }
.planning-field-grid .text-input { margin: 0; min-height: 39px; padding: 8px 10px; font-size: 10px; }
.mode-field { margin: 0 0 18px; padding: 0; border: 0; }
.segmented-control { display: inline-grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #efebe2; }
.segmented-control label { cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control span { min-height: 34px; display: grid; place-items: center; padding: 0 13px; border-radius: 7px; color: #817a70; font-size: 10px; font-weight: 700; }
.segmented-control input:checked + span { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(48,42,33,.09); }
.form-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }
.field-group { min-width: 0; }
.color-picker, .board-color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-choice, .board-color-choice { position: relative; width: 32px; height: 32px; border: 0; border-radius: 5px; background: var(--choice-color); box-shadow: 0 3px 7px rgba(47,40,26,.12); cursor: pointer; transition: transform .15s ease; }
.color-choice:hover, .board-color-choice:hover { transform: translateY(-2px); }
.color-choice.selected::after, .board-color-choice.selected::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(40,36,27,.72); font-size: 14px; font-weight: 700; }
.board-color-choice { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.position-editor { margin-top: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #f4f1e9; }
.position-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.position-head .field-label { margin-bottom: 2px; }
.position-head small { color: #928b80; font-size: 10px; }
.position-head output { padding: 5px 8px; border-radius: 6px; background: var(--charcoal); color: white; font-size: 10px; font-weight: 700; }
.slider-row { display: grid; grid-template-columns: 76px 24px 1fr 25px; align-items: center; gap: 7px; margin-top: 9px; }
.slider-row label { font-size: 11px; font-weight: 700; }.slider-row label strong { color: var(--green); }
.slider-row > span { color: #a29b90; font-size: 8px; }
.slider-row input { width: 100%; accent-color: var(--charcoal); }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 23px; }
.dialog-actions-right { display: flex; gap: 8px; margin-left: auto; }
.danger-text-btn { padding: 8px 0; border: 0; background: transparent; color: #b05448; font-size: 11px; font-weight: 700; cursor: pointer; }
.danger-text-btn:hover { text-decoration: underline; }
.danger-text-btn.hidden { visibility: hidden; }
.board-dialog { width: min(470px, calc(100vw - 30px)); }
.board-dialog-actions { margin-top: 28px; }
.bin-dialog { width: min(720px, calc(100vw - 30px)); }
.bin-head { margin-bottom: 15px; }
.bin-head p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.bin-toolbar { display: grid; grid-template-columns: minmax(170px,1.35fr) repeat(3, minmax(115px,1fr)) auto; align-items: end; gap: 8px; margin-bottom: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #f4f1e9; }
.bin-search { min-width: 0; }
.bin-search .text-input, .bin-control .text-input { width: 100%; min-height: 38px; margin: 0; padding: 0 10px; font-size: 9px; }
.bin-control { min-width: 0; color: #756e64; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bin-control > span { display: block; margin-bottom: 5px; }
.bin-result-count { align-self: center; padding: 6px 8px; border-radius: 999px; background: white; color: var(--green); font-size: 8px; font-weight: 800; white-space: nowrap; }
.bin-content { min-height: 220px; max-height: 520px; overflow: auto; border-top: 1px solid var(--line); }
.bin-empty { display: grid; place-items: center; min-height: 220px; color: #989185; font-family: "Kalam", cursive; font-size: 17px; }
.bin-date { padding: 18px 3px 8px; color: #8c8579; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.bin-item { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid rgba(49,46,40,.08); }
.bin-colors { width: 17px; height: 38px; display: flex; gap: 3px; }
.bin-color { width: 7px; height: 38px; border-radius: 2px; }
.bin-category-color { background: var(--category-color); }
.bin-sticky-color { background: var(--note-color); }
.bin-task strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bin-task small { display: block; margin-top: 3px; color: #8c857a; font-size: 10px; }
.restore-btn { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.restore-btn:hover { border-color: #9eac9f; background: #f4f8f3; }
.help-dialog { width: min(520px, calc(100vw - 30px)); }
.formula-card { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0 0 20px; padding: 21px; border: 1px solid var(--line); border-radius: 11px; background: #f3efe5; text-align: center; }
.formula-card span { color: #817a6e; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.formula-card strong { font-family: "Kalam", cursive; font-size: 24px; }
.formula-card small { color: #8a8378; font-size: 10px; }
.help-copy { color: #5f5a51; font-size: 13px; line-height: 1.6; }
.full-btn { width: 100%; margin-top: 13px; }
.planner-dialog { width: min(1080px, calc(100vw - 30px)); padding: 27px; overflow-x: hidden; }
.planner-dialog-head { margin-bottom: 18px; }
.planner-dialog-head p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.planner-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 15px; }
.planner-stat { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.planner-stat span { align-self: center; color: #777066; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.planner-stat strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.planner-stat small { overflow: hidden; color: #9a9388; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.planner-stat.overdue strong { color: #b95e52; }
.planner-stat.today { border-color: rgba(71,119,101,.25); background: #f3f7f4; }
.planner-stat.today strong { color: var(--green); }
.planner-foundation { margin-bottom: 12px; border: 1px solid rgba(71,119,101,.25); border-radius: 12px; background: linear-gradient(135deg,#f0f5f1,#f8f6ef); }
.planner-foundation > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; cursor: pointer; list-style: none; }
.planner-foundation > summary::-webkit-details-marker { display: none; }
.planner-foundation > summary span { min-width: 0; }
.planner-foundation > summary strong, .planner-foundation > summary small { display: block; }
.planner-foundation > summary strong { font-size: 12px; }
.planner-foundation > summary small { margin-top: 3px; overflow: hidden; color: #7d766c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.planner-foundation > summary b { flex: 0 0 auto; color: var(--green); font-size: 9px; }
.planner-foundation > summary b::after { content: " ↓"; }
.planner-foundation[open] > summary { border-bottom: 1px solid rgba(71,119,101,.18); }
.planner-foundation[open] > summary b::after { content: " ↑"; }
.planner-foundation-body { max-height: min(49vh,520px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: auto; padding: 12px; outline: none; }
.planner-foundation-body:focus-visible { box-shadow: inset 0 0 0 3px rgba(71,119,101,.32); }
.planner-foundation-section { min-width: 0; padding: 12px; border: 1px solid rgba(49,46,40,.09); border-radius: 10px; background: rgba(255,255,255,.68); }
.planner-foundation-head { margin-bottom: 10px; }
.planner-foundation-head > small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.planner-foundation-head h3 { font-size: 14px; }
.planner-rule-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.planner-rule { min-width: 0; padding: 8px 7px; border-radius: 8px; background: #f0eee8; }
.planner-rule span, .planner-rule strong, .planner-rule small { display: block; }
.planner-rule span { color: #7c756a; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.planner-rule strong { margin-top: 4px; font-size: 11px; }
.planner-rule small { margin-top: 2px; color: #777066; font-size: 8.5px; line-height: 1.4; }
.planner-course-list, .planner-source-list, .planner-move-list { display: grid; gap: 6px; }
.planner-course { padding: 9px; border: 1px solid rgba(49,46,40,.08); border-radius: 8px; background: #fbfaf6; }
.planner-course-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.planner-course-heading strong { font-size: 9px; letter-spacing: .05em; }
.planner-course-heading span { color: var(--green); font-size: 7px; font-weight: 750; }
.planner-course p { margin: 4px 0 2px; font-size: 9px; font-weight: 700; }
.planner-course small { color: #858075; font-size: 7.5px; line-height: 1.45; }
.planner-source-row { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: start; gap: 8px; padding: 8px; border-radius: 8px; background: #fbfaf6; }
.planner-source-status { min-height: 22px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; background: #ece8de; color: #5f584f; font-size: 8.5px; font-weight: 800; text-align: center; }
.planner-source-status.ready { background: #dfede4; color: #396b55; }
.planner-source-status.blocked { background: #f4dfda; color: #994c43; }
.planner-source-status.setup, .planner-source-status.pending { background: #f3e9cc; color: #8a6920; }
.planner-source-status.manual { background: #e4e7ed; color: #586478; }
.planner-source-row strong, .planner-source-row small { display: block; }
.planner-source-row strong { font-size: 10px; }
.planner-source-row small { margin-top: 3px; color: #686158; font-size: 9.5px; line-height: 1.45; }
.planner-safeguard-copy { margin: 0 0 9px; color: #625c54; font-size: 9.5px; line-height: 1.5; }
.planner-safeguard-copy strong { color: var(--ink); }
.planner-foundation-empty { margin: 0; padding: 10px; border-radius: 8px; background: #f2f0ea; color: #8c867c; font-size: 8px; text-align: center; }
.planner-move-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #fbfaf6; }
.planner-move-row.reverted { opacity: .58; }
.planner-move-copy strong, .planner-move-copy span, .planner-move-copy small { display: block; }
.planner-move-copy strong { font-size: 9px; }
.planner-move-copy span { margin-top: 2px; color: #625d55; font-size: 7.5px; }
.planner-move-copy small { margin-top: 2px; color: #8b857a; font-size: 7px; }
.planner-live-panel, .planner-schedule-panel { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.64); }
.planner-live-panel { border-color: rgba(71,119,101,.3); background: linear-gradient(135deg,rgba(236,244,238,.96),rgba(250,248,241,.96)); }
.planner-live-head { min-height: 72px; }
.planner-live-head > div:first-child { min-width: 0; }
.planner-live-head small { display: block; max-width: 670px; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.planner-live-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.planner-source-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(49,46,40,.08); }
.source-action { min-width: 0; min-height: 54px; display: grid; align-content: center; padding: 8px 10px; border: 1px solid rgba(49,46,40,.14); border-radius: 9px; background: rgba(255,255,255,.68); color: var(--ink); text-align: left; white-space: normal; }
button.source-action { cursor: pointer; }
button.source-action:hover { border-color: rgba(49,46,40,.34); background: #fff; }
.source-action strong, .source-action span { display: block; min-width: 0; }
.source-action strong { font-size: 9px; line-height: 1.25; }
.source-action span { margin-top: 3px; overflow-wrap: anywhere; color: #837c71; font-size: 7.5px; line-height: 1.35; }
.source-action-readonly { background: rgba(216,235,226,.52); }
.source-import-btn { min-width: 188px; min-height: 48px; display: block; padding: 7px 10px; text-align: left; white-space: normal; }
.source-import-btn strong, .source-import-btn small, .source-account-card strong, .source-account-card small { display: block; }
.source-import-btn strong, .source-account-card strong { font-size: 9px; line-height: 1.25; }
.source-import-btn small, .source-account-card small { margin-top: 3px; color: #837c71; font-size: 7.5px; line-height: 1.35; }
.source-account-card { min-width: 170px; min-height: 48px; display: grid; align-content: center; padding: 7px 10px; border: 1px solid rgba(49,46,40,.12); border-radius: 8px; background: rgba(255,255,255,.58); }
.planner-live-account { min-height: 32px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(49,46,40,.08); color: #6d675d; font-size: 9px; font-weight: 700; }
.source-inbox { padding: 10px 14px 13px; }
.planner-live-panel > .source-inbox-head { margin-bottom: 0; padding: 9px 14px 6px; }
.planner-live-panel > .source-inbox-list { padding: 0 14px 13px; }
.source-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.source-inbox-head strong { font-size: 10px; }
.source-inbox-head span { padding: 4px 7px; border-radius: 999px; background: #eee9dd; color: #777066; font-size: 8px; font-weight: 800; }
.source-inbox-list { display: grid; gap: 6px; }
.source-inbox-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(49,46,40,.08); border-radius: 9px; background: rgba(255,255,255,.72); }
.source-inbox-row strong, .source-inbox-row small { display: block; }
.source-inbox-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.source-inbox-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.source-inbox-actions, .schedule-actions { display: flex; gap: 5px; }
.source-inbox-actions .compact-action, .schedule-actions .compact-action { min-height: 30px; padding: 0 8px; font-size: 8px; }
.planner-schedule-panel { margin-top: 12px; }
.planner-schedule-head { min-height: 72px; }
.planner-schedule-head > div:first-child { min-width: 0; }
.planner-schedule-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.planner-schedule-summary { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px; border-bottom: 1px solid rgba(49,46,40,.08); background: #f4f1ea; }
.schedule-chip { padding: 5px 8px; border-radius: 999px; background: #e8e5dd; color: #6d675d; font-size: 8px; font-weight: 800; }
.schedule-chip.flexible { background: #dfede4; color: #396b55; }
.schedule-chip.warning { background: #f5ded8; color: #9a4b42; }
.planner-schedule-list { max-height: min(46vh,470px); overflow: auto; }
.schedule-day + .schedule-day { border-top: 1px solid var(--line); }
.schedule-day-title { position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px 14px; background: rgba(242,239,231,.96); color: #6f695f; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(5px); }
.schedule-block { min-width: 0; display: grid; grid-template-columns: 116px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-top: 1px solid rgba(49,46,40,.055); box-shadow: inset 3px 0 #9d988f; }
.schedule-block.flexible { box-shadow: inset 3px 0 var(--green); background: rgba(234,242,236,.48); }
.schedule-block.conflict { box-shadow: inset 3px 0 #bd5d51; background: rgba(250,233,229,.6); }
.schedule-time { color: #655f57; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.schedule-copy { min-width: 0; }
.schedule-copy strong, .schedule-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-copy strong { font-size: 10px; }
.schedule-copy small { margin-top: 3px; color: #8a8379; font-size: 8px; }
.planner-schedule-status { margin: 0; padding: 9px 14px; border-top: 1px solid rgba(49,46,40,.08); background: #f7f4ec; color: #7b746a; font-size: 8px; line-height: 1.5; }
.planner-toolbar { display: grid; grid-template-columns: auto auto minmax(180px,1fr); align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #efebe3; }
.planner-tabs { display: flex; gap: 3px; }
.planner-tab { min-height: 35px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #7e776c; cursor: pointer; font-size: 10px; font-weight: 750; }
.planner-tab.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(45,40,32,.08); }
.planner-date-navigation { display: flex; align-items: center; gap: 5px; }
.planner-date-navigation .icon-btn { width: 35px; height: 35px; background: rgba(255,255,255,.65); font-size: 21px; }
.planner-date-navigation .compact-action { min-height: 35px; background: rgba(255,255,255,.72); }
.planner-search .text-input { min-height: 35px; margin: 0; padding: 8px 11px; font-size: 10px; }
.planner-content-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.75fr); gap: 14px; margin-top: 14px; }
.planner-agenda, .planner-focus { min-width: 0; min-height: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.58); }
.planner-focus { padding-bottom: 14px; background: linear-gradient(150deg, #f0f5f1, #f9f7f1); }
.planner-section-head { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.planner-section-head h3 { margin: 0; font-size: 17px; letter-spacing: -.03em; }
.planner-workload { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e8eee9; color: var(--green); font-size: 9px; font-weight: 800; }
.planner-workload.over-capacity { background: #f6e8e5; color: #a94e43; }
.planner-agenda-list { max-height: min(52vh, 530px); overflow: auto; }
.planner-day-group + .planner-day-group { border-top: 1px solid var(--line); }
.planner-day-heading { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 8px 15px; background: rgba(242,239,231,.96); color: #716a60; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(5px); }
.planner-day-heading span:last-child { color: #989185; font-weight: 650; letter-spacing: 0; text-transform: none; }
.planner-task { position: relative; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 65px; padding: 9px 14px; border-top: 1px solid rgba(49,46,40,.065); cursor: pointer; }
.planner-task:hover { background: rgba(255,255,255,.76); }
.planner-task.overdue { box-shadow: inset 3px 0 #cc786d; }
.planner-task-complete { width: 24px; height: 24px; border: 1.5px solid #9f998e; border-radius: 50%; background: transparent; cursor: pointer; }
.planner-task-complete:hover { border-color: var(--green); background: rgba(71,119,101,.09); }
.planner-task-main { min-width: 0; }
.planner-task-title { display: block; overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.planner-task-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; color: #898277; font-size: 8px; }
.planner-task-meta span { display: inline-flex; align-items: center; gap: 3px; }
.planner-source { padding: 2px 5px; border-radius: 999px; background: #e6ece7; color: #52705f; font-weight: 750; text-transform: capitalize; }
.planner-task-score { min-width: 38px; padding: 4px 6px; border-radius: 999px; background: rgba(42,42,37,.055); color: #676158; font-size: 9px; font-weight: 800; text-align: center; }
.planner-empty { display: grid; place-items: center; min-height: 290px; padding: 35px; color: #8f887d; text-align: center; }
.planner-empty strong { display: block; margin-bottom: 5px; font-family: "Kalam", cursive; font-size: 18px; }
.planner-empty small { display: block; max-width: 260px; line-height: 1.5; }
.planner-focus-copy { margin: 13px 16px 8px; color: #7f786e; font-size: 9px; line-height: 1.5; }
.planner-focus-list { max-height: 305px; display: grid; gap: 6px; overflow: auto; margin: 0; padding: 4px 13px 7px; list-style: none; }
.planner-focus-list .planner-empty { min-height: 150px; padding: 20px; }
.planner-focus-item { display: grid; grid-template-columns: 23px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 43px; padding: 7px 9px; border: 1px solid rgba(49,46,40,.09); border-radius: 9px; background: rgba(255,255,255,.72); cursor: pointer; }
.planner-focus-rank { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--charcoal); color: white; font-size: 8px; font-weight: 800; }
.planner-focus-item strong { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.planner-focus-item small { color: #888176; font-size: 8px; white-space: nowrap; }
.planner-capacity-status { margin: 7px 13px 0; padding: 10px 11px; border-radius: 9px; background: rgba(255,255,255,.62); color: #6f695f; font-size: 9px; line-height: 1.5; }
.planner-capacity-status strong { color: var(--green); }
.planner-capacity-status.over-capacity { background: #faeeeb; color: #8f4b43; }
.planning-settings-card, .data-safety-card { display: grid; gap: 14px; }
.planning-settings-card > div > strong, .data-safety-card > div > strong { display: block; font-size: 13px; }
.planning-settings-card > div > small, .data-safety-card > div > small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.planning-settings-card .text-input { margin: 0; }
.data-safety-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-dialog { width: min(930px, calc(100vw - 30px)); }
.settings-dialog form { padding: 27px; }
.settings-head { margin-bottom: 16px; }
.settings-head p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.settings-tabs { display: flex; gap: 5px; margin-bottom: 20px; padding: 4px; border-radius: 11px; background: #eeebe3; }
.settings-tab { flex: 1; min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: #827c72; cursor: pointer; font-size: 11px; font-weight: 700; }
.settings-tab.active { background: white; color: var(--ink); box-shadow: 0 3px 10px rgba(45,40,32,.08); }
.settings-panel { min-height: 320px; }
.settings-panel[hidden] { display: none; }
.settings-card, .settings-note { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.54); }
.settings-panel .settings-card + .settings-card { margin-top: 10px; }
.setting-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.setting-switch-row strong, .settings-note strong { display: block; font-size: 13px; }
.setting-switch-row small, .settings-note p { display: block; margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.overview-settings-card { display: grid; gap: 16px; }
.overview-settings-card > div > strong, .compact-switch-row strong { display: block; font-size: 13px; }
.overview-settings-card > div > small, .compact-switch-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.compact-switch-row { min-height: 0; padding-top: 13px; border-top: 1px solid var(--line); }
.settings-note { margin-top: 12px; background: #f1eee6; }
.switch-control { position: relative; flex: 0 0 44px; width: 44px; height: 24px; cursor: pointer; }
.switch-control input { position: absolute; opacity: 0; }
.switch-control span { position: absolute; inset: 0; border-radius: 20px; background: #c8c2b7; transition: background .15s ease; }
.switch-control span::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(39,34,27,.2); transition: transform .15s ease; }
.switch-control input:checked + span { background: var(--green); }
.switch-control input:checked + span::after { transform: translateX(20px); }
.preset-toolbar { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.preset-actions { display: flex; align-items: center; gap: 7px; }
.preset-actions .text-input { min-width: 190px; margin: 0; }
.compact-action { min-height: 38px; padding: 0 11px; font-size: 10px; }
.preset-actions .danger-text-btn { margin-left: auto; padding: 8px 5px; }
.workshop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 25px; padding-top: 20px; }
.workshop-controls { min-width: 0; }
.settings-grid { display: grid; gap: 12px; }
.settings-grid.two-up { grid-template-columns: 1fr 1fr; }
.setting-field { display: block; min-width: 0; color: #5c574f; font-size: 10px; font-weight: 700; }
.setting-field > span { display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.setting-field .text-input { margin-bottom: 14px; }
.workshop-color-picker { margin: 0 0 17px; }
.workshop-mode-control { width: 100%; margin-bottom: 16px; }
.range-setting { display: block; margin: 0 0 16px; color: #5c574f; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.range-setting > span { display: flex; justify-content: space-between; margin-bottom: 8px; }
.range-setting output { color: var(--green); }
.range-setting input { width: 100%; accent-color: var(--green); }
.layout-workshop { display: grid; gap: 13px; margin: 20px 0 17px; padding: 17px; border: 1px solid #cdd8cf; border-radius: 12px; background: linear-gradient(145deg, rgba(239,245,240,.78), rgba(255,255,255,.58)); }
.layout-workshop .text-workshop-head { margin-bottom: 0; }
.placement-mode-field { margin: 0; padding: 0; border: 0; }
.placement-mode-field .workshop-mode-control { margin: 0; }
.padding-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.padding-control-grid .text-input { width: 100%; }
.layout-placement-grid { gap: 8px; }
.freeform-layout-controls { display: grid; gap: 10px; }
.freeform-layout-controls[hidden] { display: none; }
.freeform-head { padding: 11px 12px; border: 1px solid rgba(69,112,89,.16); border-radius: 9px; background: rgba(255,255,255,.5); }
.freeform-head strong { display: block; font-size: 10px; }
.freeform-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.freeform-placement-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.placement-box-card { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.6); }
.placement-box-card[open] { grid-column: 1 / -1; border-color: #b8cabd; box-shadow: 0 5px 14px rgba(46,72,56,.06); }
.placement-box-summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; cursor: pointer; list-style: none; }
.placement-box-summary::-webkit-details-marker { display: none; }
.placement-box-summary strong { font-size: 9px; }
.placement-box-summary span { color: var(--green); font-size: 7px; font-weight: 700; text-align: right; }
.placement-box-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; padding: 10px; border-top: 1px solid rgba(49,46,40,.08); }
.placement-box-grid .text-input { min-height: 35px; margin: 0; padding: 0 7px; font-size: 9px; }
.text-workshop { margin: 20px 0 17px; padding-top: 18px; border-top: 1px solid var(--line); }
.text-workshop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.text-workshop-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.text-workshop-badge { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; background: #e8eee9; color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.text-style-controls { display: grid; gap: 8px; }
.text-role-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.56); }
.text-role-card[open] { border-color: #bdcabe; box-shadow: 0 5px 16px rgba(55,71,60,.06); }
.text-role-summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 12px 13px; cursor: pointer; list-style: none; }
.text-role-summary::-webkit-details-marker { display: none; }
.text-role-summary::after { content: "+"; color: #8a8479; font-size: 16px; line-height: 1; }
.text-role-card[open] .text-role-summary::after { content: "−"; }
.text-role-summary strong { display: block; font-size: 11px; }
.text-role-summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 500; }
.text-role-summary output { grid-column: 2; grid-row: 1; margin-right: 22px; color: var(--green); font-size: 10px; font-weight: 800; }
.text-role-body { display: grid; gap: 12px; padding: 2px 13px 14px; border-top: 1px solid rgba(49,46,40,.07); }
.text-role-size { margin: 12px 0 0; }
.text-role-size input { width: 100%; accent-color: var(--green); }
.text-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.text-control-grid.three-up { grid-template-columns: repeat(3, minmax(0,1fr)); }
.text-control-field { min-width: 0; color: #676158; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.text-control-field span { display: block; margin-bottom: 5px; }
.text-control-field .text-input { min-height: 35px; margin: 0; padding: 0 8px; font-size: 9px; }
.text-role-help { margin: 0; color: #8d867b; font-size: 8px; line-height: 1.45; }
.title-only-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 2px 0 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #f5f2ea; }
.title-only-options legend { grid-column: 1 / -1; padding: 0 4px; }
.title-only-options label { display: flex; align-items: center; gap: 7px; color: #6e685e; font-size: 10px; }
.title-only-options input { accent-color: var(--green); }
.workshop-preview-wrap { position: sticky; top: 0; align-self: start; }
.preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.preview-heading small { color: var(--muted); font-size: 8px; }
.clean-preview-heading { margin-top: 18px; }
.workshop-preview-stage { min-height: 248px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(70,64,54,.045) 39px 40px), #f4f1e8; }
.guide-stage { background: linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52)), repeating-linear-gradient(0deg, transparent 0 19px, rgba(61,99,77,.08) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(61,99,77,.08) 19px 20px), #eef2ed; }
.clean-stage { min-height: 248px; }
.workshop-sticky.sticky-note { position: relative; left: auto !important; top: auto !important; max-width: 270px; max-height: 260px; transform: rotate(-1deg) !important; }
.workshop-sticky:hover { transform: rotate(-1deg) !important; }
.workshop-sticky .sticky-check { pointer-events: none; }
.workshop-preview-wrap > p { margin: 10px 4px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.preview-fit-status { min-height: 27px; padding: 7px 9px; border-radius: 7px; background: #eef3ef; color: #476452 !important; font-variant-numeric: tabular-nums; }
.layout-guide-overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.guide-padding-box, .guide-title-box, .guide-notes-box, .guide-free-box { position: absolute; box-sizing: border-box; }
.guide-padding-box { border: 1px dashed rgba(45,108,75,.82); background: rgba(80,163,116,.045); }
.guide-title-box { border: 1.5px solid rgba(42,94,156,.88); background: rgba(62,123,198,.08); }
.guide-notes-box { border: 1.5px solid rgba(157,79,55,.82); background: rgba(194,94,61,.07); }
.guide-free-boxes { position: absolute; inset: 0; }
.guide-free-box { border: 1px solid rgba(53,84,120,.68); background: rgba(70,113,160,.035); }
.guide-free-box:nth-child(2n) { border-color: rgba(145,76,53,.68); background: rgba(168,87,59,.035); }
.guide-padding-box span, .guide-title-box span, .guide-notes-box span, .guide-free-box span { position: absolute; left: 3px; top: 2px; max-width: calc(100% - 4px); overflow: hidden; padding: 1px 3px; border-radius: 3px; background: rgba(255,255,255,.88); font-family: Inter, sans-serif; font-size: 6px; font-weight: 800; letter-spacing: .05em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.guide-padding-box span { color: #2d6c4b; }
.guide-title-box span { color: #2a5e9c; }
.guide-notes-box span { color: #9d4f37; }
.shortcut-note { margin: 0 0 14px; }
.shortcut-list { display: grid; gap: 15px; }
.shortcut-group { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.55); }
.shortcut-group h3 { margin: 0; padding: 12px 15px; border-bottom: 1px solid var(--line); color: #7b7469; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.shortcut-row { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px; border-bottom: 1px solid rgba(49,46,40,.07); }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row span { font-size: 11px; font-weight: 600; }
.shortcut-key { min-width: 108px; min-height: 32px; padding: 0 10px; border: 1px solid #d5cfc4; border-radius: 7px; background: white; color: #5f5a51; cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 700; }
.shortcut-key.recording { border-color: var(--green); background: #edf5f0; color: var(--green); box-shadow: 0 0 0 3px rgba(71,119,101,.1); }
.shortcut-key.empty { color: #a09a90; font-weight: 500; }
.settings-actions { position: sticky; bottom: -27px; z-index: 5; justify-content: flex-end; margin: 22px -27px -27px; padding: 15px 27px; border-top: 1px solid var(--line); background: rgba(251,249,243,.96); backdrop-filter: blur(7px); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 1000; display: flex; align-items: center; gap: 22px; min-width: 270px; padding: 13px 16px; border-radius: 10px; background: #292923; color: white; box-shadow: 0 14px 35px rgba(36,33,27,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast span { font-size: 12px; }.toast button { margin-left: auto; padding: 0; border: 0; background: transparent; color: #f2d86c; font-size: 11px; font-weight: 700; cursor: pointer; }
.calendar-change-notice[hidden] { display: none; }
.calendar-change-notice { position: fixed; top: 15px; left: 50%; z-index: 1600; width: min(900px,calc(100vw - 30px)); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; border: 2px solid #f0bd57; border-radius: 13px; background: #292923; color: white; box-shadow: 0 18px 55px rgba(28,26,21,.35); transform: translateX(-50%); }
.calendar-change-notice p { margin: 0 0 5px; color: #f0bd57; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.calendar-change-notice strong { display: block; font-size: 12px; line-height: 1.4; }
.calendar-change-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.notice-revert-btn { min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; background: #f0bd57; color: #25231f; font-size: 9px; font-weight: 850; cursor: pointer; }
.notice-dismiss-btn { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: transparent; color: white; font-size: 18px; cursor: pointer; }

/* Comfort and realism modes */
body.realistic-graphics .board-frame { border-color: rgba(64,58,46,.28); background: linear-gradient(90deg, #c9a26f 0 7px, #e1c393 7px 10px, #b88b55 10px 16px, #eee8da 16px calc(100% - 16px), #b88b55 calc(100% - 16px) calc(100% - 10px), #e1c393 calc(100% - 10px) calc(100% - 7px), #c9a26f calc(100% - 7px)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 14px 38px rgba(49,40,26,.17); }
body.realistic-graphics .matrix-board { background-color: #f7f6ef; background-image: radial-gradient(circle at 20% 30%, rgba(38,79,62,.018) 0 1px, transparent 1.3px), radial-gradient(circle at 72% 63%, rgba(84,64,40,.022) 0 1px, transparent 1.4px), linear-gradient(110deg, rgba(255,255,255,.72), rgba(237,239,231,.46) 43%, rgba(255,255,255,.66)); background-size: 17px 19px, 23px 29px, 100% 100%; box-shadow: inset 0 0 32px rgba(79,72,58,.09), inset 0 0 0 2px rgba(255,255,255,.78); }
body.realistic-graphics .quadrant { background-image: linear-gradient(120deg, rgba(255,255,255,.12), rgba(93,89,76,.018)); }
body.realistic-graphics .sticky-note.appearance-tactile { background-image: linear-gradient(135deg, rgba(255,255,255,.34), transparent 35%), repeating-linear-gradient(6deg, rgba(92,70,25,.018) 0 1px, transparent 1px 5px); box-shadow: 2px 6px 6px rgba(45,39,25,.2), 0 18px 25px rgba(45,39,25,.15), inset 0 1px rgba(255,255,255,.5); filter: saturate(1.03) contrast(1.015); }
body.realistic-graphics .sticky-note.appearance-tactile::after { bottom: -10px; height: 16px; background: rgba(53,43,22,.2); filter: blur(7px); }
body.overview-mode .matrix-board { cursor: default; }
body.overview-mode .sticky-note { cursor: pointer; transition: left .28s cubic-bezier(.2,.8,.2,1), top .28s cubic-bezier(.2,.8,.2,1), width .28s ease, height .28s ease, transform .2s ease; }
body.overview-mode .sticky-resize-handle { display: none !important; }
body.context-help-mode button[data-help] { position: relative; }
body.context-help-mode button[data-help]:hover::after, body.context-help-mode button[data-help]:focus-visible::after { content: attr(data-help); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 1200; width: max-content; max-width: 230px; padding: 7px 9px; border: 1px solid rgba(46,43,36,.16); border-radius: 7px; background: rgba(36,36,32,.96); color: white; box-shadow: 0 8px 22px rgba(25,23,19,.2); font-size: 9px; font-weight: 600; letter-spacing: 0; line-height: 1.35; text-align: left; text-transform: none; white-space: normal; pointer-events: none; transform: translateX(-50%); }

/* Immersive board view */
body.fullscreen-mode { overflow: hidden; }
.fullscreen-mode .app-shell { display: block; height: 100vh; }
.fullscreen-mode .sidebar { display: none; }
.fullscreen-mode .main-content { height: 100vh; padding: 0; }
.fullscreen-mode .topbar {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 150;
  width: auto;
  min-height: 0;
  gap: 18px;
  padding: 9px 10px 9px 13px;
  border: 1px solid rgba(49,46,40,.14);
  border-radius: 13px;
  background: rgba(250,248,242,.9);
  box-shadow: 0 12px 35px rgba(50,44,35,.14);
  backdrop-filter: blur(14px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.fullscreen-mode .topbar .eyebrow { display: none; }
.fullscreen-mode .topbar h1 { max-width: 280px; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-mode .topbar-actions { gap: 7px; }
.fullscreen-mode .topbar-actions .icon-btn { width: 38px; height: 38px; }
.fullscreen-mode .topbar-actions .primary-btn, .fullscreen-mode .view-toggle-btn, .fullscreen-mode .label-toggle-btn { min-height: 38px; }
.fullscreen-mode .workspace { display: block; }
.fullscreen-mode .matrix-column { height: 100vh; }
.fullscreen-mode .matrix-toolbar {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 140;
  gap: 18px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(49,46,40,.11);
  border-radius: 10px;
  background: rgba(250,248,242,.82);
  box-shadow: 0 8px 25px rgba(50,44,35,.09);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.fullscreen-mode .board-frame { position: fixed; inset: 8px; padding: 12px; border-radius: 11px; }
.fullscreen-mode .matrix-board { width: 100%; height: 100%; min-height: 0; }
.fullscreen-mode .coordinate-footer { position: fixed; right: 24px; bottom: 12px; left: 24px; z-index: 20; padding: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.fullscreen-mode .queue-panel {
  position: fixed;
  z-index: 160;
  min-width: 280px;
  min-height: 260px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  align-self: auto;
  background: rgba(250,248,242,.94);
  box-shadow: 0 22px 65px rgba(48,42,33,.22);
  backdrop-filter: blur(14px);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.fullscreen-mode .queue-header { cursor: move; touch-action: none; }
.fullscreen-mode .queue-grip, .fullscreen-mode .queue-resize-handle { display: block; }
.fullscreen-mode .todo-list { flex: 1; max-height: none; }
.fullscreen-mode .score-key { flex: 0 0 auto; }

.focus-board-btn { position: fixed; left: 20px; bottom: 20px; z-index: 220; width: 43px; height: 43px; display: none; place-items: center; padding: 0; border: 1px solid rgba(49,46,40,.18); border-radius: 50%; background: rgba(250,248,242,.92); color: #2c2b27; box-shadow: 0 10px 30px rgba(45,40,32,.18); cursor: pointer; backdrop-filter: blur(12px); transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.focus-board-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.focus-board-btn:hover { background: white; box-shadow: 0 13px 34px rgba(45,40,32,.24); transform: translateY(-2px); }
.focus-board-btn:focus-visible { outline: 3px solid rgba(95,142,121,.28); outline-offset: 2px; }
.fullscreen-mode .focus-board-btn { display: grid; }
.board-focus-mode .topbar { opacity: 0; pointer-events: none; transform: translateY(-160%); }
.board-focus-mode .matrix-toolbar { opacity: 0; pointer-events: none; transform: translate(-50%, -180%); }
.board-focus-mode .queue-panel { opacity: 0; pointer-events: none; transform: translateX(calc(100vw + 100%)); }
.board-focus-mode .coordinate-footer { opacity: 0; transform: translateY(180%); }
.board-focus-mode .focus-board-btn { background: #292923; color: white; }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: 1fr; }
  .queue-panel { min-height: 400px; }
  .todo-list { max-height: 420px; }
  .planner-content-grid { grid-template-columns: 1fr; }
  .planner-agenda, .planner-focus { min-height: 300px; }
  .planner-toolbar { grid-template-columns: 1fr auto; }
  .planner-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --sidebar-w: 0px; }
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin: 0 3px 13px; }
  .sidebar-label { display: none; }
  .board-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
  .board-link { flex: 0 0 auto; width: auto; min-width: 104px; grid-template-columns: 11px auto auto; }
  .board-link.active::before { left: 10px; right: 10px; top: auto; bottom: -4px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .add-board-btn { width: auto; margin-top: 5px; }
  .sidebar-spacer, .save-note { display: none; }
  .utility-btn { width: auto; align-self: flex-start; }
  .main-content { padding: 0 12px 20px; }
  .topbar { min-height: 86px; flex-wrap: wrap; gap: 8px; padding: 15px 0; }
  .topbar > div:first-child { min-width: 0; }
  .topbar-actions { width: 100%; justify-content: space-between; gap: 6px; }
  .topbar-actions .icon-btn { display: none; }
  .topbar-actions .primary-btn { width: 44px; padding: 0; font-size: 0; }
  .topbar-actions .primary-btn span { font-size: 20px; }
  .topbar-actions .view-toggle-btn { width: 44px; padding: 0; font-size: 0; }
  .topbar-actions .view-toggle-icon { font-size: 17px; }
  .topbar-actions .label-toggle-btn { width: 44px; min-width: 44px; padding: 0; }
  .topbar-actions .label-toggle-label { display: none; }
  .topbar-actions .overview-toggle-btn { width: 44px; min-width: 44px; padding: 0; }
  .topbar-actions .overview-toggle-label { display: none; }
  .topbar-actions .overview-toggle-icon { margin-right: 0; }
  .topbar-actions .planner-btn { width: 44px; min-width: 44px; padding: 0; }
  .topbar-actions .planner-btn-label { display: none; }
  .fullscreen-mode .matrix-toolbar { display: none; }
  .primary-btn { padding: 0 12px; }
  .matrix-toolbar { align-items: flex-end; }
  .legend { max-width: 68%; }
  .mini-note.named-subgroup { max-width: 112px; height: 26px; padding: 0 8px; }
  .matrix-toolbar p span, .matrix-toolbar p { font-size: 9px; }
  .matrix-board { min-height: 540px; height: 68vh; }
  .sticky-note { width: var(--note-w, 120px); height: var(--note-h, 112px); }
  .sticky-title { font-size: 14px; }
  .quadrant { padding: 15px; }
  .quadrant strong { font-size: 14px; }
  .axis-y { display: none; }
  .queue-panel { min-height: 380px; }
  .form-row { grid-template-columns: 1fr; }
  .planning-field-grid { grid-template-columns: 1fr 1fr; }
  .slider-row { grid-template-columns: 68px 22px 1fr 22px; }
  .settings-dialog form { padding: 18px; }
  .settings-tabs { overflow: hidden; }
  .settings-tab { min-width: 0; padding: 0 6px; font-size: 9px; }
  .preset-actions { flex-wrap: wrap; }
  .preset-actions .text-input { flex: 1 1 100%; }
  .workshop-layout { grid-template-columns: 1fr; }
  .workshop-preview-wrap { position: static; }
  .workshop-preview-stage { min-height: 280px; }
  .padding-control-grid { grid-template-columns: 1fr 1fr; }
  .layout-placement-grid { grid-template-columns: 1fr; }
  .freeform-placement-list { grid-template-columns: 1fr; }
  .placement-box-card[open] { grid-column: auto; }
  .placement-box-grid { grid-template-columns: 1fr 1fr; }
  .text-control-grid.three-up { grid-template-columns: 1fr 1fr; }
  .text-control-grid.three-up .text-control-field:last-child { grid-column: 1 / -1; }
  .settings-actions { bottom: -18px; margin: 20px -18px -18px; padding: 13px 18px; }
  .planner-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); padding: 18px; }
  .planner-summary { grid-template-columns: 1fr 1fr; }
  .planner-foundation > summary b { display: none; }
  .planner-foundation-body { grid-template-columns: 1fr; max-height: 56vh; padding: 9px; }
  .planner-rule-list { grid-template-columns: 1fr 1fr; }
  .planner-rule:last-child { grid-column: 1 / -1; }
  .planner-source-row { grid-template-columns: 68px minmax(0,1fr); }
  .planner-live-head, .planner-schedule-head { align-items: flex-start; flex-direction: column; }
  .planner-live-head small { white-space: normal; }
  .planner-live-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .planner-live-actions #planner-refresh-sources { grid-column: 1 / -1; }
  .planner-source-actions { grid-template-columns: 1fr; }
  .source-action { width: 100%; }
  .source-import-btn, .source-account-card { width: 100%; min-width: 0; }
  .source-inbox-row { grid-template-columns: 1fr; }
  .source-inbox-actions { justify-content: flex-start; }
  .schedule-block { grid-template-columns: 86px minmax(0,1fr); padding: 8px 10px; }
  .schedule-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .planner-toolbar { display: flex; flex-wrap: wrap; }
  .planner-tabs { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .planner-tab { min-width: 0; padding: 0 5px; }
  .planner-date-navigation { order: 2; }
  .planner-search { order: 3; flex: 1 1 100%; }
  .planner-content-grid { grid-template-columns: 1fr; }
  .planner-agenda-list { max-height: 48vh; }
  .planner-task { grid-template-columns: 27px minmax(0,1fr); }
  .planner-task-score { display: none; }
  .bin-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); padding: 18px; }
  .bin-toolbar { grid-template-columns: 1fr 1fr; }
  .bin-search { grid-column: 1 / -1; }
  .bin-result-count { justify-self: start; }
  .bin-item { grid-template-columns: 17px minmax(0,1fr); }
  .restore-btn { grid-column: 2; justify-self: start; }
  .dialog-actions { align-items: flex-end; }
  .dialog-actions-right { flex-direction: column-reverse; }
  .calendar-change-notice { top: 9px; width: calc(100vw - 18px); align-items: flex-start; gap: 10px; padding: 13px; }
  .calendar-change-notice strong { font-size: 10px; }
  .calendar-change-actions { flex-direction: column-reverse; }
  .notice-revert-btn { min-height: 32px; padding: 0 9px; }
}

.cloud-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 14% 18%, rgba(111,99,168,.18), transparent 34%),
    radial-gradient(circle at 86% 76%, rgba(38,129,98,.18), transparent 32%),
    #eee9de;
}
html.cloud-local .cloud-lock-screen,
html.cloud-ready .cloud-lock-screen { display: none; }
html.cloud-pending .app-shell,
html.cloud-locked .app-shell { visibility: hidden; }
html.cloud-pending,
html.cloud-locked { overflow: hidden; }
.cloud-lock-card {
  width: min(520px, 100%);
  padding: clamp(30px, 6vw, 58px);
  border: 1px solid rgba(25,31,28,.15);
  border-radius: 26px;
  text-align: center;
  background: rgba(255,253,248,.92);
  box-shadow: 0 28px 80px rgba(25,31,28,.16);
}
.cloud-lock-card h1 { margin: 10px 0 12px; font: 800 clamp(30px,6vw,50px)/.98 var(--display); letter-spacing: -.045em; }
.cloud-lock-card > p:not(.eyebrow) { max-width: 380px; margin: 0 auto 24px; color: var(--muted); line-height: 1.6; }
.cloud-lock-mark { display: inline-flex; gap: 5px; margin-bottom: 18px; }
.cloud-lock-mark i { width: 14px; height: 14px; border-radius: 50% 50% 50% 8%; background: var(--ink); transform: rotate(45deg); }
.cloud-lock-mark i:nth-child(2) { background: var(--purple); }
.cloud-lock-mark i:nth-child(3) { background: var(--green); }

.cloud-status-btn { min-width: 112px; gap: 8px; padding: 0 13px; }
.cloud-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #8d918d; box-shadow: 0 0 0 3px rgba(141,145,141,.13); }
.cloud-status-btn[data-cloud-status="synced"] .cloud-status-dot { background: #268162; box-shadow: 0 0 0 3px rgba(38,129,98,.15); }
.cloud-status-btn[data-cloud-status="syncing"] .cloud-status-dot { background: #d08a29; animation: cloudPulse 1s ease-in-out infinite; }
.cloud-status-btn[data-cloud-status="offline"] .cloud-status-dot,
.cloud-status-btn[data-cloud-status="error"] .cloud-status-dot { background: #c95c4f; }
.cloud-status-btn[data-cloud-status="locked"] .cloud-status-dot { background: #6f63a8; }
@keyframes cloudPulse { 50% { opacity: .35; transform: scale(.78); } }

.cloud-dialog { width: min(650px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); padding: 25px; }
.cloud-dialog-head p:last-child { margin: 5px 0 0; color: var(--muted); }
.cloud-panel { display: grid; gap: 16px; }
.cloud-panel[hidden], .cloud-share-form[hidden], .cloud-share-result[hidden] { display: none !important; }
.cloud-trust-card,
.cloud-account-row,
.cloud-share-form { border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.64); }
.cloud-trust-card { display: grid; gap: 5px; padding: 15px 16px; }
.cloud-trust-card strong { font: 800 13px/1.2 var(--display); }
.cloud-trust-card span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.cloud-signin-form { display: grid; gap: 8px; }
.cloud-inline-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.cloud-account-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; }
.cloud-account-row > div { display: grid; gap: 3px; min-width: 0; }
.cloud-account-row span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.cloud-account-row strong { overflow: hidden; text-overflow: ellipsis; }
.cloud-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-share-form { display: grid; gap: 11px; padding: 17px; }
.cloud-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cloud-section-head h3 { margin: 2px 0 0; font: 800 18px/1.1 var(--display); }
.cloud-section-head > span { padding: 5px 8px; border-radius: 999px; color: var(--green); background: rgba(38,129,98,.1); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.cloud-share-result { font-size: 11px; }
.cloud-message { min-height: 20px; margin: 16px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.cloud-message[data-error="true"] { color: #a43f35; }

.sticky-note.cloud-readonly {
  cursor: default;
  outline: 2px solid color-mix(in srgb, #6f63a8 42%, transparent);
  outline-offset: 2px;
}
.sticky-note.cloud-readonly .sticky-board-tag::after {
  content: " · VIEW";
  color: #6f63a8;
  font-weight: 800;
}
.sticky-note.cloud-readonly .drag-anchor-dot,
.sticky-note.cloud-readonly .sticky-resize-handle {
  display: none !important;
}

@media (max-width: 760px) {
  .cloud-status-btn { width: 44px; min-width: 44px; padding: 0; }
  .cloud-status-btn #cloud-status-label { display: none; }
  .cloud-inline-form { grid-template-columns: 1fr; }
  .cloud-inline-form .primary-btn { width: 100%; min-height: 44px; font-size: 11px; }
  .cloud-dialog { padding: 18px; }
  .cloud-account-row { align-items: flex-start; }
  .cloud-share-form .settings-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}