:root {
  --bg: #f1f1f2;
  --bar: #f9f9fa;
  --bar-line: #e0e0e3;
  --text: #25221e;
  --muted: #7b766d;
  --accent: #2f6fe4;
  --accent-soft: rgba(47, 111, 228, .12);
  --hover: rgba(37, 34, 30, .07);
  --field: #fff;
  --field-line: #cfcbc3;
  --danger: #e5484d;

  --note-head-l: 84%;  --note-head-s: 70%;
  --note-body-l: 95%;  --note-body-s: 85%;
  --note-line-l: 68%;  --note-line-s: 30%;
  --plain-head: #e9eaec; --plain-body: #ffffff; --plain-line: #cfd1d5;
  --note-text: #222;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur: .32s;
}
:root[data-theme="dark"] {
  --bg: #121417;
  --bar: #1a1d21;
  --bar-line: #2a2f36;
  --text: #e5e7ea;
  --muted: #8b94a1;
  --accent: #5a9bff;
  --accent-soft: rgba(90, 155, 255, .16);
  --hover: rgba(255, 255, 255, .08);
  --field: #22262c;
  --field-line: #384049;

  --note-head-l: 27%;  --note-head-s: 28%;
  --note-body-l: 17%;  --note-body-s: 20%;
  --note-line-l: 11%;  --note-line-s: 20%;
  --plain-head: #43474d; --plain-body: #34373c; --plain-line: #1c1e22;
  --note-text: #e6e6e6;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 13.5px/1.4 "Segoe UI", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- icons ---------- */
i[data-i] { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
i[data-i] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
i.chev svg { width: 12px; height: 12px; opacity: .6; }

/* ---------- bars ---------- */
.topbar, .toolbar2 {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 7px 14px; background: var(--bar); border-bottom: 1px solid var(--bar-line);
}
.topbar { flex-wrap: wrap; row-gap: 6px; }
.toolbar2 { padding: 6px 14px; flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1360px) { .group .lbl { display: none; } .group .btn:has(.lbl) { width: 32px; padding: 0; } }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.1px; margin-right: 6px; }
.logo { width: 24px; height: 24px; display: block; }
.group { display: flex; align-items: center; gap: 4px; }
.vr { width: 1px; height: 20px; background: var(--bar-line); margin: 0 4px; }
.spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; white-space: nowrap; max-width: 220px;
  transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:active:not(:disabled) { background: var(--accent-soft); }
.btn:focus-visible, .field:focus-visible, .inp:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.primary { background: var(--accent); color: #fff; font-weight: 600; padding: 0 12px; }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.icon { width: 28px; padding: 0; }
.btn.txt { font-size: 12px; font-weight: 600; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
#folderLabel { overflow: hidden; text-overflow: ellipsis; }

.field {
  height: 28px; padding: 0 8px; background: var(--field); border: 1px solid var(--field-line); border-radius: 6px;
}
.field.narrow { width: 62px; }
select.field { padding-right: 4px; }
.inp {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; width: 170px;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 6px; color: var(--muted);
}
.inp input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.find { margin-left: 2px; }
.find-count { color: var(--muted); font-size: 12px; min-width: 54px; }

.seg { display: flex; padding: 2px; gap: 2px; background: var(--hover); border-radius: 7px; }
.seg button { border: 0; background: transparent; height: 24px; padding: 0 11px; border-radius: 5px; color: var(--muted); }
.seg button.active { background: var(--field); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18); font-weight: 600; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }

/* ---------- workspace: ad | notes | ad ---------- */
.workspace { flex: 1; min-height: 0; display: flex; }
.ad { flex: none; width: 160px; display: flex; justify-content: center; padding: 8px 0; }
.ad-inner { width: 160px; min-height: 600px; max-height: 100%; }
.stage { flex: 1; min-width: 0; position: relative; overflow-x: hidden; overflow-y: auto; }
.grid { position: relative; width: 100%; min-height: 100%; }
@media (max-width: 1000px) { .ad { display: none; } }

.empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--muted); text-align: center; padding: 20px; pointer-events: none;
}
.empty p { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--text); }
.empty b { color: var(--text); font-weight: 600; }

/* ---------- notes ---------- */
.note {
  --c-head: hsl(var(--h) var(--note-head-s) var(--note-head-l));
  --c-body: hsl(var(--h) var(--note-body-s) var(--note-body-l));
  --c-line: hsl(var(--h) var(--note-line-s) var(--note-line-l));
  --ff: Consolas, "D2Coding", "Malgun Gothic", monospace; --fs: 14px; --fw: 400; --fi: normal;
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  container-type: inline-size;
  background: var(--c-body);
  transition: left var(--dur) var(--ease), top var(--dur) var(--ease),
              width var(--dur) var(--ease), height var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity .22s ease, transform .22s ease;
  animation: pop .3s var(--ease);
}
.note::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 0 solid var(--c-line); border-width: 1px 0 0 1px; }
.note.plain { --c-head: var(--plain-head); --c-body: var(--plain-body); --c-line: var(--plain-line); }
.grid.noanim .note { transition: none; animation: none; }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.note.leaving { opacity: 0; transform: scale(.9); pointer-events: none; }
.note.active { z-index: 2; }
.note.active::after { border: 1px solid var(--accent); }
.note.hit { z-index: 3; }
.note.hit::after { border: 1px solid var(--danger); }
.note.dragging {
  z-index: 60; transition: none; opacity: .94; cursor: grabbing;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.note.dragging::after, .note.max::after { border: 2px solid var(--accent); }
.note.max { z-index: 50; box-shadow: 0 18px 50px rgba(0,0,0,.38); }

.note-head {
  flex: none; min-height: 30px; display: flex; align-items: center; gap: 0; padding: 0 3px 0 2px;
  background: var(--c-head); border-bottom: 1px solid var(--c-line);
  user-select: none; cursor: grab; color: var(--note-text);
}
.note.max .note-head { cursor: default; }
.grip { flex: none; width: 16px; text-align: center; opacity: .45; font-size: 12px; letter-spacing: -2px; }
.dot { flex: none; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--danger); }
.title {
  flex: 1; min-width: 0; height: 22px; padding: 0 6px; margin: 0 3px 0 1px;
  border: 1px solid var(--c-line); border-bottom-style: dashed; border-radius: 4px;
  background: color-mix(in srgb, var(--c-body) 55%, transparent);
  font: inherit; font-weight: 600; color: inherit; cursor: text; text-overflow: ellipsis;
}
.title:hover { border-color: var(--accent); background: var(--c-body); }
.title:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--c-body); box-shadow: 0 0 0 2px var(--accent-soft); }
.note.pinned .title { border-color: transparent; background: transparent; cursor: default; }
.ext { flex: none; opacity: .5; font-size: 12px; margin-left: -2px; }
.pen { flex: none; width: 14px; height: 14px; display: grid; place-items: center; opacity: .5; cursor: text; }
.pen svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.title:hover ~ .pen, .pen:hover { opacity: 1; color: var(--accent); }
.note.pinned .pen { display: none; }
.head-fill { flex: 1; min-width: 0; align-self: stretch; }
.ibtn {
  flex: none; width: 20px; height: 22px; padding: 0; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--note-text); opacity: .75;
}
.ibtn:hover { opacity: 1; background: rgba(0,0,0,.08); }
:root[data-theme="dark"] .ibtn:hover { background: rgba(255,255,255,.1); }
.ibtn.on { opacity: 1; color: var(--accent); background: var(--accent-soft); }
.ibtn.close:hover { color: var(--danger); }
.ibtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.swatch-dot { width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--h) 70% 72%); box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
.note.plain .swatch-dot { background: conic-gradient(#f7b6c2, #fbd38d, #f6ec9a, #b9efc0, #a9e3f5, #c9b9f6, #f7b6c2); }

.note-body { position: relative; flex: 1; min-height: 0; }
.ed {
  position: absolute; inset: 0; overflow: auto; margin: 0; padding: 8px 10px; outline: none; color: var(--note-text);
  font-family: var(--ff); font-size: var(--fs); font-weight: var(--fw); font-style: var(--fi); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; cursor: text;
}
.ed.over-link { cursor: pointer; }
.note.pinned .ed { cursor: default; }
::highlight(lnk) { color: var(--link); text-decoration: none; }
::highlight(code-tag) { color: var(--c-tag); }
::highlight(code-attr) { color: var(--c-attr); }
::highlight(code-val) { color: var(--c-val); }
::highlight(code-doctype) { color: var(--c-doctype); }
::highlight(code-comment) { color: var(--c-comment); }

.backdrop {
  position: absolute; inset: 0; z-index: 40; background: rgba(10, 14, 22, .45);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.backdrop.on { opacity: 1; pointer-events: auto; }

/* ---------- popovers ---------- */
.pop {
  position: fixed; z-index: 100; padding: 6px; background: var(--bar); color: var(--text);
  border: 1px solid var(--bar-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
.palette { display: grid; grid-template-columns: repeat(6, 26px); gap: 6px; padding: 9px; }
.palette button {
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  border: 2px solid transparent; background: hsl(var(--h) 75% 80%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22);
}
.palette button.plainsw { background: var(--plain-body); position: relative; }
.palette button.plainsw::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: var(--muted); transform: rotate(-45deg); }
.palette button:hover { transform: scale(1.12); }
.palette button.sel { border-color: var(--accent); }

.menu { min-width: 190px; padding: 5px; }
.menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 30px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; text-align: left;
}
.menu button:hover:not(:disabled) { background: var(--accent-soft); }
.menu button:disabled { opacity: .4; cursor: not-allowed; }
.menu hr { border: 0; height: 1px; margin: 4px 6px; background: var(--bar-line); }

.gridpop { padding: 12px; user-select: none; }
.grid-cells { display: grid; grid-template-columns: repeat(10, 20px); gap: 3px; touch-action: none; cursor: pointer; }
.grid-cells i { width: 20px; height: 20px; border-radius: 3px; background: var(--field); border: 1px solid var(--field-line); }
.grid-cells i.sel { background: var(--accent); border-color: var(--accent); }
.grid-info { margin-top: 10px; color: var(--muted); font-size: 12.5px; text-align: center; min-height: 18px; }
.grid-info b { color: var(--text); }
.inp.wide { width: 200px; }
.arrow { color: var(--muted); }

/* ---------- dialog, status bar, toast ---------- */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(8, 10, 14, .5); }
.dlg {
  width: min(400px, 90vw); padding: 22px 24px 18px; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px;
  background: var(--bar); border: 1px solid var(--bar-line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: dlgin .18s var(--ease);
}
@keyframes dlgin { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.dlg-icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dlg-icon.warn { background: rgba(224, 160, 58, .18); color: #d28a14; }
.dlg-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dlg h3 { margin: 2px 0 6px; font-size: 16px; }
.dlg p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.dlg-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.dlg-btns .btn { border-color: var(--field-line); height: 32px; padding: 0 16px; }
.dlg-btns .btn.primary { border-color: var(--accent); }

.statusbar {
  flex: none; display: flex; align-items: center; gap: 16px; padding: 4px 14px;
  background: var(--bar); border-top: 1px solid var(--bar-line); color: var(--muted); font-size: 12px;
}
.st-save.err { color: var(--danger); }
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); z-index: 400;
  padding: 9px 16px; border-radius: 8px; background: #263140; color: #fff; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01s; }
  .note { animation: none; }
}
i.lead { color: var(--muted); margin-right: 2px; }

/* toolbar icons: larger, soft two-tone */
i[data-i] svg .f { fill: currentColor; fill-opacity: .16; }
.topbar i[data-i] { width: 20px; height: 20px; }
.topbar i[data-i] svg { width: 20px; height: 20px; stroke-width: 1.4; }
.topbar .btn { height: 34px; }
.topbar .btn.icon { width: 34px; }
.topbar i.chev { width: 12px; height: 12px; }
.topbar i.chev svg { width: 12px; height: 12px; stroke-width: 1.6; }
#btnOpen i { color: #e0a03a; }
#btnSave i, #btnSaveAll i { color: var(--accent); }
#btnClose i { color: #8b93a3; }
#btnCloseAll i { color: #e0584a; }
#btnPrint i:first-child { color: #34a877; }
#btnFolder i { color: #e0a03a; }
#btnGrid i:first-child { color: var(--accent); }


.note.no-r::after { border-right-width: 0; }
.note.no-b::after { border-bottom-width: 0; }

/* narrow notes: title on the first line, buttons wrap to a second line */
@container (max-width: 250px) {
  .note-head { flex-wrap: wrap; row-gap: 2px; padding: 3px 3px 2px 3px; }
  .dot { order: 0; margin-right: 2px; }
  .title { order: 1; flex: 1 1 calc(100% - 14px); margin: 0; }
  .dot[hidden] + .title { flex-basis: 100%; }
  .grip { order: 2; margin-right: auto; }
  .ibtn { order: 3; }
}
@container (max-width: 135px) {
  .ibtn { width: 17px; }
  .grip { width: 12px; letter-spacing: -3px; }
}

a.btn { text-decoration: none; }
.foot-links { display: flex; gap: 14px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

:root { --link: #1d4ed8; --c-tag: #1a1aff; --c-attr: #d70000; --c-val: #c000c0; --c-doctype: #7a0a9a; --c-comment: #2f7d32; }
:root[data-theme="dark"] { --link: #6ea8ff; --c-tag: #6ea8ff; --c-attr: #ff7b72; --c-val: #e0a3ff; --c-doctype: #c792ea; --c-comment: #7fbf7f; }

/* resize handles between notes */
.rz { position: absolute; z-index: 30; touch-action: none; }
.rz-v { cursor: col-resize; }
.rz-h { cursor: row-resize; }
.rz::after { content: ""; position: absolute; background: var(--accent); opacity: 0; transition: opacity .12s; }
.rz-v::after { left: 2px; right: 2px; top: 0; bottom: 0; }
.rz-h::after { top: 2px; bottom: 2px; left: 0; right: 0; }
.rz:hover::after, .rz.drag::after { opacity: .55; }
body.resizing-v, body.resizing-v * { cursor: col-resize !important; user-select: none; }
body.resizing-h, body.resizing-h * { cursor: row-resize !important; user-select: none; }
#btnReset i { color: #3a9bb0; }

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

/* small screens: keep everything inside the viewport */
@media (max-width: 700px) {
  .topbar, .toolbar2 { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .toolbar2 .group { flex-wrap: wrap; }
  .toolbar2 .group.find { flex: 1 1 100%; }
  .inp, .inp.wide { width: auto; flex: 1 1 130px; min-width: 0; }
  .toolbar2 .vr { display: none; }
  .statusbar { flex-wrap: wrap; gap: 2px 12px; padding: 4px 10px; }
  .st-save { display: none; }
  .foot-links { flex-wrap: wrap; gap: 4px 12px; }
  .brand { margin-right: 0; }
}