:root{
  --blue:#1a73e8;
  --blue-hover:#1765cc;
  --blue-tint:#e8f0fe;
  --border:#dadce0;
  --border-dark:#c4c7c5;
  --bg-app:#f8f9fa;
  --bg-canvas-area:#e8eaed;
  --surface:#ffffff;
  --text:#202124;
  --text-2:#5f6368;
  --text-3:#80868b;
  --hover:rgba(60,64,67,.08);
  --hover-strong:rgba(60,64,67,.15);
  --danger:#d93025;
  --danger-tint:#fce8e6;
  --grid-dot:#e3e6e8;
  --line:#8a8f96;
  --line-selected:#1a73e8;

  --n-white:#ffffff; --n-white-b:#e0e0e0;
  --n-red:#f28b82;   --n-red-b:#e0776f;
  --n-orange:#fbcb8f; --n-orange-b:#f0b164;
  --n-yellow:#fff475; --n-yellow-b:#eee27e;
  --n-green:#ccff90;  --n-green-b:#b3e072;
  --n-blue:#aecbfa;   --n-blue-b:#8ab4f8;
  --n-purple:#d7aefb; --n-purple-b:#c390f2;
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  font-family:'Barclay Sans','Arina',Arial,sans-serif;
  color:var(--text);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}

/* ================= Title bar ================= */
#titlebar{
  position:fixed; top:0; left:0; right:0; height:64px; z-index:1001;
  background:var(--surface);
  display:flex; align-items:center; gap:14px;
  padding:0 16px 0 12px;
}
#docIcon{
  width:40px; height:40px; flex:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.title-col{display:flex; flex-direction:column; gap:1px; min-width:0;}
#docTitle{
  font-family:'Barclay Sans','Arina',sans-serif; font-size:18px; color:var(--text);
  border:none; outline:none; background:transparent; padding:4px 6px; margin-left:-6px;
  border-radius:4px; width:min(46vw,420px);
}
#docTitle:hover{background:var(--hover);}
#docTitle:focus{background:var(--blue-tint); box-shadow:inset 0 0 0 1px var(--blue);}
#saveStatus{
  font-size:12px; color:var(--text-2); padding-left:0px; display:flex; align-items:center; gap:5px;
}
#saveStatus svg{width:13px;height:13px;}
#titlebar .spacer{flex:1;}
#avatar{
  width:32px;height:32px;border-radius:50%; flex:none;
  background:#1a73e8; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
}

/* ================= Toolbar ================= */
#toolbar{
  position:fixed; top:64px; left:0; right:0; height:48px; z-index:1000;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:4px; padding:0 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.t-group{display:flex; align-items:center; gap:2px;}
.t-sep{width:1px; height:26px; background:var(--border); margin:0 8px; flex:none;}
.icon-btn-t{
  width:32px; height:32px; border-radius:6px; border:none; background:none;
  color:var(--text-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
}
.icon-btn-t svg{width:18px;height:18px;}
.icon-btn-t:hover{background:var(--hover); color:var(--text);}
.icon-btn-t:active{background:var(--hover-strong);}
.pill-btn{
  display:flex; align-items:center; gap:7px;
  height:32px; padding:0 14px 0 10px; border-radius:16px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:13px; font-weight:500; cursor:pointer;
}
.pill-btn:hover{background:var(--hover); box-shadow:0 1px 2px rgba(0,0,0,.12);}
.pill-btn.filled{background:var(--blue); border-color:var(--blue); color:#fff;}
.pill-btn.filled:hover{background:var(--blue-hover);}
.pill-btn svg{width:16px;height:16px;}
#zoomGroup{display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden;}
#zoomGroup .icon-btn-t{border-radius:0;}
#zoomLabel{
  width:52px; text-align:center; font-size:12.5px; color:var(--text-2);
  border-left:1px solid var(--border); border-right:1px solid var(--border); height:32px; line-height:32px;
}
#toolbar .spacer{flex:1;}
#hint{color:var(--text-3); font-size:12px; max-width:300px; text-align:right; line-height:1.35;}

/* ================= Canvas ================= */
#viewport{
  position:absolute; top:112px; left:0; right:0; bottom:0;
  overflow:auto;
  background:var(--bg-canvas-area);
}
#board{
  position:relative;
  width:4200px; height:2800px;
  transform-origin:0 0;
  background-color:var(--surface);
  background-image: radial-gradient(circle, var(--grid-dot) 1.3px, transparent 1.3px);
  background-size:24px 24px;
  box-shadow:0 1px 3px rgba(0,0,0,.15), 0 4px 24px rgba(0,0,0,.12);
  margin:24px;
}
#strings{
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
#strings path.string{
  fill:none; stroke:var(--line); stroke-width:1.6px;
  pointer-events:stroke; cursor:pointer;
}
#strings path.string:hover{stroke:var(--text);}
#strings path.string.selected{stroke:var(--line-selected); stroke-width:2.4px;}
.string-pin{
  fill:#ffffff; stroke:var(--line); stroke-width:1.4px;
}
.string-pin.selected{stroke:var(--line-selected);}

/* empty state */
#emptyState{
  position:absolute; top:100px; left:50%; transform:translateX(-50%);
  color:var(--text-3); font-size:16px; text-align:center; pointer-events:none; width:360px;
}
#emptyState svg{width:56px;height:56px; color:var(--border-dark); margin-bottom:10px;}

/* midpoint delete button for a selected string */
#stringDeleteBtn{
  position:absolute; width:24px; height:24px; border-radius:50%;
  background:var(--surface); color:var(--danger); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:1500;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
#stringDeleteBtn svg{width:14px;height:14px;}
#stringDeleteBtn:hover{background:var(--danger-tint);}

/* ================= Sticky (Keep-style card) ================= */
.sticky{
  position:absolute;
  min-width:160px; min-height:120px;
  background:var(--n-white);
  border:1px solid var(--n-white-b);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.10);
  display:flex; flex-direction:column;
  user-select:none;
  transition:box-shadow .12s;
}
.sticky:hover .pin{opacity:1; transform:translate(-50%,-50%) scale(1);}
.sticky.dragging, .sticky.resizing{
  box-shadow:0 4px 8px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.2);
  z-index:9999 !important;
}
.sticky[data-color="white"]{ background:var(--n-white); border-color:var(--n-white-b); }
.sticky[data-color="red"]{ background:var(--n-red); border-color:var(--n-red-b); }
.sticky[data-color="orange"]{ background:var(--n-orange); border-color:var(--n-orange-b); }
.sticky[data-color="yellow"]{ background:var(--n-yellow); border-color:var(--n-yellow-b); }
.sticky[data-color="green"]{ background:var(--n-green); border-color:var(--n-green-b); }
.sticky[data-color="blue"]{ background:var(--n-blue); border-color:var(--n-blue-b); }
.sticky[data-color="purple"]{ background:var(--n-purple); border-color:var(--n-purple-b); }

.sticky .pin{
  position:absolute; top:0; left:50%;
  width:14px; height:14px; border-radius:50%;
  background:var(--blue); border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  cursor:crosshair; z-index:5;
  opacity:0; transform:translate(-50%,-50%) scale(.7);
  transition:opacity .12s, transform .12s;
}
.sticky .pin:hover{ transform:translate(-50%,-50%) scale(1.15); }
.sticky .pin.linking{ opacity:1; box-shadow:0 0 0 5px rgba(26,115,232,.28); }

.sticky-head{
  display:flex; align-items:center; gap:4px;
  padding:7px 6px 3px 10px;
  cursor:grab;
  flex:none;
}
.sticky-head:active{cursor:grabbing;}
.swatches{display:flex; gap:5px; margin-right:auto;}
.swatch{
  width:16px; height:16px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.swatch[data-c="white"]{background:var(--n-white);}
.swatch[data-c="red"]{background:var(--n-red);}
.swatch[data-c="orange"]{background:var(--n-orange);}
.swatch[data-c="yellow"]{background:var(--n-yellow);}
.swatch[data-c="green"]{background:var(--n-green);}
.swatch[data-c="blue"]{background:var(--n-blue);}
.swatch[data-c="purple"]{background:var(--n-purple);}
.swatch.active::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 2px var(--blue);
}

.icon-btn{
  background:none; border:none; border-radius:50%;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2); flex:none;
}
.icon-btn:hover{background:var(--hover); color:var(--text);}
.icon-btn svg{width:15px;height:15px;}
.icon-btn.del:hover{background:var(--danger-tint); color:var(--danger);}

.sticky-body{
  flex:1; overflow:auto; padding:2px 12px 10px 12px;
  font-family:'Arina',Arial,sans-serif; font-size:14px; line-height:1.5;
  color:var(--text); outline:none; cursor:text;
  word-wrap:break-word;
}
.sticky-body img, .sticky-body video, .sticky-body iframe{
  max-width:100%; display:block; margin:6px 0; border-radius:4px;
}
.sticky-body iframe{width:100%; aspect-ratio:16/9; border:none; height:auto;}
.sticky-body:empty:before{
  content:attr(data-placeholder); color:rgba(32,33,36,.42);
}

.sticky-foot{
  display:flex; gap:2px; padding:2px 6px 6px; flex:none;
}
.foot-btn{
  background:none; border:none; border-radius:6px;
  font-size:11px; font-family:'Barclay Sans','Arina',sans-serif; font-weight:500;
  padding:5px 8px; cursor:pointer; color:var(--text-2);
  display:flex; align-items:center; gap:5px;
}
.foot-btn:hover{background:var(--hover); color:var(--text);}
.foot-btn svg{width:14px;height:14px;}

.resize-handle{
  position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor:nwse-resize; flex:none; z-index:5;
  background:
    linear-gradient(135deg, transparent 0 42%, var(--text-3) 42% 48%, transparent 48% 62%, var(--text-3) 62% 68%, transparent 68%);
  opacity:.55;
}
.resize-handle:hover{opacity:1;}

::-webkit-scrollbar{width:12px; height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#bdc1c6; border-radius:8px; border:3px solid var(--bg-canvas-area);}
::-webkit-scrollbar-thumb:hover{background:#9aa0a6;}

/* ===== Rich text, selection, help ===== */
#toolbar{overflow-x:auto; overflow-y:hidden;}
#toolbar::-webkit-scrollbar{display:none;}
.icon-btn-t[data-act]{font-size:15px; font-weight:600;}
.icon-btn-t.on{background:var(--blue-tint); color:var(--blue);}
.icon-btn-t:disabled{opacity:.35; pointer-events:none;}
#board{cursor:grab;} #board.panning{cursor:grabbing;}
.sticky{cursor:default;}
.sticky.selected{box-shadow:0 0 0 2px var(--blue), 0 2px 8px rgba(0,0,0,.22);}
.sticky-body{user-select:text; -webkit-user-select:text;}
.sticky-body ul,.sticky-body ol{margin:2px 0; padding-left:22px;}
.sticky-body h3{margin:4px 0; font-size:16px; line-height:1.3;}
.sticky-body a{color:var(--blue); text-decoration:underline;}
.sticky-body ul.checklist{list-style:none; padding-left:2px;}
ul.checklist li{position:relative; padding-left:24px;}
ul.checklist li::before{
  content:""; position:absolute; left:0; top:.3em; width:15px; height:15px;
  border:2px solid var(--text-2); border-radius:3px; cursor:pointer;
}
ul.checklist li[data-done]{text-decoration:line-through; color:var(--text-3);}
ul.checklist li[data-done]::before{
  border-color:var(--blue);
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7l3 3 5-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
#autosave{margin-left:auto; font-size:12px; color:var(--text-2);}
#zoomGroup{background:var(--surface);}
#helpOverlay{position:fixed; inset:0; z-index:3000; background:rgba(32,33,36,.5); display:flex; align-items:center; justify-content:center;}
#helpOverlay[hidden]{display:none;}
#helpOverlay .card{background:#fff; border-radius:12px; padding:20px 26px; width:min(560px,92vw); max-height:84vh; overflow:auto; box-shadow:0 8px 32px rgba(0,0,0,.3);}
#helpOverlay h2{margin:0 0 6px; font-size:20px;}
#helpOverlay h4{margin:16px 0 4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2);}
.kb{display:flex; justify-content:space-between; gap:16px; padding:5px 0; border-bottom:1px solid var(--border); font-size:13px;}
kbd{background:var(--bg-app); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font:12px monospace; white-space:nowrap;}