:root {
  --ink: #171714;
  --muted: #706f67;
  --soft-muted: #a09f96;
  --paper: #f6f6f1;
  --panel: #fff;
  --line: #e3e3dc;
  --line-dark: #d3d3ca;
  --accent: #8eb7d4;
  --acid: var(--accent);
  --acid-strong: #709cb9;
  --coral: #ff674d;
  --coral-soft: #fff0ed;
  --green: #4a8b64;
  --green-soft: #edf7f0;
  --purple: #7158e2;
  --shadow: 0 18px 60px rgba(20, 20, 16, .12);
  --radius: 14px;
  --topbar: 72px;
  --rail: 224px;
  --comments: 360px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 320px; overflow: hidden; background: var(--paper); font-size: 16px; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(113, 88, 226, .28); outline-offset: 2px; }

.app-shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--comments);
  grid-template-rows: var(--topbar) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--comments);
  align-items: center;
  height: var(--topbar);
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 30;
}

.brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  text-decoration: none;
  border-right: 1px solid var(--line);
  color: var(--ink);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--acid);
  font-size: .77rem;
  font-weight: 850;
  letter-spacing: -.04em;
}
.brand-name { font-size: .91rem; font-weight: 540; letter-spacing: -.02em; }
.brand-name strong { display: block; font-weight: 800; }

.project-context { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 26px; }
.client-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: #dcd7ff; color: #3b2d8d; font-size: .74rem; font-weight: 800;
}
.project-context strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.eyebrow { display: block; color: var(--muted); font-size: .71rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }

.top-actions { height: 100%; position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 20px; border-left: 1px solid var(--line); }
.save-state { display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.save-state > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.save-state.saving > span { background: #e0a528; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.avatar-button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: .73rem; font-weight: 800; cursor: pointer; }
.account-menu { position: absolute; right: 18px; top: 60px; width: 220px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 70; }
.account-menu strong, .account-menu span { display: block; }
.account-menu span { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.account-menu button, .account-menu a { display: block; width: 100%; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; font-size: .82rem; }

.left-rail { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; background: #fff; border-right: 1px solid var(--line); }
.rail-section { padding: 22px 16px 14px; }
.pages-section { flex: 1; overflow: auto; border-top: 1px solid var(--line); }
.rail-title-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; }
.rail-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: .72rem; font-weight: 700; }
.rail-actions { display: flex; align-items: center; gap: 6px; }
.mini-button { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; font-size: 1.05rem; }
.version-list, .page-list { display: grid; gap: 5px; }
.version-button, .page-button { width: 100%; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.version-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; }
.version-button strong { font-size: .86rem; }
.version-button small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.version-button.active { background: var(--ink); color: #fff; }
.version-button.active small { color: #bdbdb6; }
.version-status { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--line-dark); }
.version-status.review { background: var(--accent); box-shadow: 0 0 0 3px rgba(142,183,212,.18); }
.version-status.done { background: var(--green); }
.page-button { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 11px; font-size: .85rem; font-weight: 640; color: #55544e; }
.page-button::before { content: ""; width: 16px; height: 18px; border: 1.5px solid #aaa9a1; border-radius: 3px; background: linear-gradient(#aaa9a1,#aaa9a1) 4px 5px/7px 1px no-repeat, linear-gradient(#aaa9a1,#aaa9a1) 4px 9px/5px 1px no-repeat; }
.page-button.active { background: #f1f1eb; color: var(--ink); }
.page-button.active::after { content: ""; position: absolute; left: 0; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--purple); }
.page-comment-count { margin-left: auto; min-width: 20px; padding: 3px 5px; border-radius: 999px; background: #e7e4ff; color: #4d3ca8; text-align: center; font-size: .65rem; font-weight: 800; }
.rail-footer { padding: 16px 22px 20px; border-top: 1px solid var(--line); }
.progress-copy { display: flex; justify-content: space-between; font-size: .76rem; }
.progress-copy strong { font-size: .75rem; }
.progress-track { height: 5px; margin-top: 10px; border-radius: 99px; background: #ecece6; overflow: hidden; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.rail-footer p { margin: 8px 0 0; color: var(--muted); font-size: .7rem; }

.workspace { grid-column: 2; grid-row: 2; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #ededE7; }
.workspace-bar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; background: rgba(246,246,241,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); z-index: 15; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: .88rem; }
.breadcrumb span { color: var(--muted); }
.workspace-bar p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; }
.workspace-actions { display: flex; align-items: center; gap: 18px; }
.quiet-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 9px; cursor: pointer; font-size: .8rem; font-weight: 720; }
.quiet-button { border: 1px solid var(--line-dark); background: #fff; }
.primary-button { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.resolved-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .77rem; cursor: pointer; }
.resolved-toggle input { width: 16px; height: 16px; accent-color: var(--ink); }

.canvas-scroller { flex: 1; min-height: 0; overflow: auto; padding: 34px clamp(22px, 4vw, 54px) 100px; scroll-behavior: smooth; }
.capture-stage { position: relative; width: min(100%, 920px); margin: 0 auto; background: #fff; box-shadow: 0 12px 44px rgba(28, 27, 22, .14); transform-origin: top center; transition: width .25s ease; }
.capture-stage > img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.annotation-layer, .draw-layer { position: absolute; inset: 0; pointer-events: none; }
.capture-stage.drawing { cursor: crosshair; touch-action: none; user-select: none; }
.capture-stage[data-tool="pin"] { touch-action: none; }
.capture-stage:not([data-tool="select"]) .annotation { pointer-events: none; }
.capture-stage[data-tool="pin"] { cursor: crosshair; }
.annotation { position: absolute; pointer-events: auto; cursor: pointer; transition: filter .15s, opacity .2s; }
.annotation:hover, .annotation.active { filter: drop-shadow(0 5px 9px rgba(0,0,0,.2)); }
.annotation.hidden { display: none; }
.annotation.rectangle, .annotation.circle { border: 3px solid var(--coral); background: rgba(255, 103, 77, .08); }
.annotation.circle { border-radius: 50%; }
.annotation.resolved.rectangle, .annotation.resolved.circle { border-color: var(--green); background: rgba(74,139,100,.08); }
.annotation .annotation-number { position: absolute; top: -15px; right: -15px; display: grid; place-items: center; width: 29px; height: 29px; border: 3px solid white; border-radius: 50%; background: var(--coral); color: #fff; font-size: .7rem; font-weight: 850; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.annotation.resolved .annotation-number { background: var(--green); }
.annotation.pin { width: 28px; height: 34px; transform: translate(-50%, -100%); }
.annotation.pin::before { content: ""; position: absolute; left: 1px; top: 0; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50% 50% 50% 5px; transform: rotate(-45deg); background: var(--coral); box-shadow: 0 4px 10px rgba(0,0,0,.22); }
.annotation.pin .annotation-number { inset: 5px auto auto 5px; width: 18px; height: 18px; border: 0; background: transparent; box-shadow: none; transform: none; font-size: .66rem; }
.annotation.pin.resolved::before { background: var(--green); }
.draft-shape { position: absolute; border: 2px dashed var(--purple); background: rgba(113,88,226,.09); }
.draft-shape.circle { border-radius: 50%; }
.draft-shape.pin { width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); }
.draft-actions { position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%); z-index: 21; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); white-space: nowrap; }
.draft-actions[hidden] { display: none; }
.draft-actions > span { font-size: .85rem; margin-right: 6px; }

.tool-palette { position: absolute; left: 50%; bottom: 22px; z-index: 20; display: flex; gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; background: rgba(24,24,21,.94); box-shadow: 0 12px 34px rgba(0,0,0,.24); transform: translateX(-50%); backdrop-filter: blur(12px); }
.tool-button { min-width: 72px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #d5d5ce; cursor: pointer; }
.tool-button span { display: block; margin: 4px auto 0; font-size: .62rem; }
.tool-button .icon { margin-top: 0; }
.tool-button:hover { background: rgba(255,255,255,.08); }
.tool-button.active { background: var(--acid); color: var(--ink); }

.comments-panel { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-left: 1px solid var(--line); z-index: 25; }
.comments-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 16px; }
.comments-header h2 { margin: 5px 0 0; font-size: 1.18rem; letter-spacing: -.035em; }
.comment-filters { display: flex; gap: 4px; margin: 0 18px; padding: 4px; border-radius: 10px; background: var(--paper); }
.comment-filters button { flex: 1; padding: 7px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: .7rem; font-weight: 700; }
.comment-filters button span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 2px; border-radius: 999px; background: rgba(0,0,0,.06); font-size: .6rem; }
.comment-filters button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.comment-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 36px; }
.comment-card { position: relative; padding: 16px 15px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.comment-card + .comment-card { margin-top: 9px; }
.comment-card:hover, .comment-card.active { border-color: #bbb9ae; box-shadow: 0 8px 24px rgba(25,25,20,.08); transform: translateY(-1px); }
.comment-card.resolved { background: #fbfdfb; }
.comment-topline { display: flex; align-items: center; gap: 8px; }
.comment-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--coral-soft); color: #c7412f; font-size: .68rem; font-weight: 850; }
.comment-card.resolved .comment-number { background: var(--green-soft); color: var(--green); }
.comment-author { flex: 1; min-width: 0; font-size: .79rem; font-weight: 780; }
.comment-time { color: var(--soft-muted); font-size: .64rem; }
.comment-card p { margin: 12px 0 14px; font-size: .83rem; line-height: 1.5; }
.comment-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: var(--coral-soft); color: #b33e2d; font-size: .64rem; font-weight: 780; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.resolved { background: var(--green-soft); color: var(--green); }
.resolve-button { padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: .66rem; font-weight: 700; }
.resolve-button:hover { background: var(--paper); color: var(--ink); }
.notion-state { display: inline-flex; align-items: center; gap: 4px; flex-basis: 100%; margin-top: 3px; color: var(--soft-muted); font-size: .6rem; }
.notion-state::before { content: "N"; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--line-dark); border-radius: 3px; color: var(--muted); font-size: .55rem; font-weight: 850; }
.comments-empty { margin: auto; padding: 30px; text-align: center; }
.empty-mark { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 900; }
.comments-empty h3 { margin: 13px 0 6px; font-size: 1rem; }
.comments-empty p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

.comment-dialog { width: min(480px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 16px; color: var(--ink); box-shadow: var(--shadow); }
.comment-dialog::backdrop { background: rgba(15,15,12,.48); backdrop-filter: blur(3px); }
.comment-dialog form { padding: 22px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dialog-heading h2 { margin: 5px 0 0; font-size: 1.25rem; letter-spacing: -.035em; }
.field-label { display: block; margin: 14px 0 7px; font-size: .73rem; font-weight: 760; }
.comment-dialog input, .comment-dialog textarea { display: block; width: 100%; padding: 11px 12px; border: 1px solid var(--line-dark); border-radius: 9px; background: #fff; color: var(--ink); font-size: .88rem; }
.comment-dialog textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; padding: 11px 15px; border-radius: 9px; background: var(--ink); color: #fff; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; font-size: .78rem; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.icon-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.count-badge { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .58rem; font-weight: 800; }
.icon { display: inline-block; width: 17px; height: 17px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
.icon-pointer { clip-path: polygon(10% 0, 80% 60%, 54% 63%, 72% 94%, 57% 100%, 39% 69%, 20% 88%); }
.icon-pin { border-radius: 50% 50% 50% 5px; transform: rotate(-45deg) scale(.82); mask-image: none; }
.icon-rectangle { border: 1.7px solid currentColor; background: transparent; mask-image: none; border-radius: 2px; }
.icon-circle { border: 1.7px solid currentColor; background: transparent; mask-image: none; border-radius: 50%; }
.icon-comments { mask-image: radial-gradient(circle at 30% 38%, transparent 0 7%, #000 8% 14%, transparent 15%), radial-gradient(circle at 50% 38%, transparent 0 7%, #000 8% 14%, transparent 15%), radial-gradient(circle at 70% 38%, transparent 0 7%, #000 8% 14%, transparent 15%), linear-gradient(#000,#000); clip-path: polygon(5% 8%,95% 8%,95% 75%,58% 75%,42% 96%,39% 75%,5% 75%); }
.icon-close { mask-image: linear-gradient(45deg, transparent 44%,#000 45% 55%,transparent 56%), linear-gradient(-45deg, transparent 44%,#000 45% 55%,transparent 56%); }
.icon-fit { mask-image: linear-gradient(#000,#000); clip-path: polygon(0 0,42% 0,42% 13%,15% 13%,15% 40%,0 40%,0 0,58% 0,100% 0,100% 40%,85% 40%,85% 13%,58% 13%,58% 0,0 60%,15% 60%,15% 87%,42% 87%,42% 100%,0 100%,0 60%,58% 87%,85% 87%,85% 60%,100% 60%,100% 100%,58% 100%); }
.mobile-only { display: none; }
.client-mode .admin-only { display: none !important; }

@media (max-width: 1120px) {
  :root { --rail: 196px; --comments: 320px; }
  .brand-name { font-size: .82rem; }
  .save-state { display: none; }
}

@media (max-width: 880px) {
  :root { --rail: 184px; }
  .app-shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .topbar { grid-template-columns: var(--rail) 1fr auto; }
  .top-actions { border-left: 0; }
  .comments-panel { position: fixed; inset: var(--topbar) 0 0 auto; width: min(380px, 92vw); transform: translateX(102%); transition: transform .25s ease; box-shadow: -12px 0 45px rgba(0,0,0,.16); }
  .comments-panel.open { transform: translateX(0); }
  .workspace { grid-column: 2; }
  .mobile-only { display: grid; }
  .tool-button { min-width: 63px; }
}

@media (max-width: 640px) {
  :root { --topbar: 62px; }
  .app-shell { display: block; min-height: 100dvh; overflow: visible; }
  body { overflow: auto; }
  .topbar { position: sticky; top: 0; display: flex; height: var(--topbar); z-index: 40; }
  .brand { border-right: 0; padding: 0 13px; }
  .brand-name { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .project-context { flex: 1; padding: 0 4px; }
  .project-context .client-avatar, .project-context .eyebrow { display: none; }
  .project-context strong { max-width: 43vw; font-size: .8rem; }
  .top-actions { padding: 0 11px; gap: 8px; }
  .avatar-button { display: none; }
  .left-rail { position: static; width: 100%; display: block; border: 0; border-bottom: 1px solid var(--line); }
  .left-rail .rail-section { padding: 10px 12px; }
  .left-rail .rail-title-row, .left-rail .pages-section, .left-rail .rail-footer { display: none; }
  .version-list { display: flex; gap: 6px; overflow-x: auto; }
  .version-button { flex: 0 0 auto; width: auto; min-width: 85px; padding: 8px 10px; }
  .version-button small { display: none; }
  .workspace { min-height: calc(100dvh - 115px); }
  .workspace-bar { min-height: 58px; padding: 9px 14px; }
  .workspace-bar p, .workspace-actions .resolved-toggle { display: none; }
  .workspace-actions #fitButton { display: none; }
  .quiet-button { min-height: 34px; padding: 0 10px; }
  .canvas-scroller { min-height: 65dvh; padding: 16px 12px 92px; }
  .tool-palette { position: fixed; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); width: auto; transform: none; justify-content: center; }
  .draft-actions { position: fixed; bottom: calc(94px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); }
  .tool-button { flex: 1; min-width: 0; padding: 7px 4px; }
  .comments-panel { top: var(--topbar); }
  .comment-dialog form { padding: 18px; }
}

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