:root {
  font-family: "Instrument Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #272723;
  background: #fbfaf8;
  --paper: #fbfaf8;
  --line: #eae6df;
  --muted: #746f65;
  --accent: #b54b31;
  --tint: #f6e9e2;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { border: 1px solid var(--line); background: #fff; color: inherit; border-radius: 8px; padding: 8px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 550; }
button:hover { background: #f3f0eb; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary { background: #a8432c; color: #fff; border-color: #a8432c; }
.primary:hover { background: #903a26; }
.icon { display: inline-block; width: 17px; height: 17px; flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
.workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.project-library { width: min(100%, 936px); margin: 0 auto; padding: 48px 24px; overflow: auto; }
.library-header, .library-actions, .project-row, .project-actions { display: flex; align-items: center; gap: 8px; }
.library-header { justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.library-header h1 { margin: 0; font-size: 26px; }
.library-actions, .project-actions { flex-wrap: wrap; }
.project-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.project-row { justify-content: space-between; min-height: 64px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.project-open { border-color: transparent; background: transparent; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 14px; }
.project-open .icon { margin-right: 9px; color: var(--accent); }
.project-actions { flex-shrink: 0; }
.project-actions button { border-color: transparent; background: transparent; }
.project-actions button:hover { background: #f3f0eb; }
.delete-project { color: #983c2a; }
#no-projects { color: var(--muted); font-size: 14px; }
.page-navigation { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); }
#back { width: 36px; height: 36px; flex-shrink: 0; padding: 0; border-color: #e2dbd0; border-radius: 9px; background: #fdfcfb; }
#back:hover { background: #f8f4ee; }
.page-menu { position: relative; min-width: 0; cursor: default; }
.page-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: max-content; max-width: 100%; padding: 8px 11px; border: 1px solid #e2dbd0; border-radius: 9px; background: #fdfcfb; font-size: 13px; font-weight: 650; list-style: none; cursor: pointer; }
.page-menu summary::-webkit-details-marker { display: none; }
.page-menu summary:hover { background: #f8f4ee; }
.page-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#current-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(220px, 65vw); }
.page-menu[open] summary .icon { transform: rotate(180deg); }
.page-options { position: absolute; top: calc(100% + 6px); left: 0; width: 236px; max-width: calc(100vw - 76px); padding: 5px; border: 1px solid #e2dbd0; border-radius: 10px; background: #fdfcfb; box-shadow: 0 5px 18px #3b291520; }
#pages { max-height: min(45dvh, 300px); overflow-y: auto; }
.page-actions { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.nav-row { width: 100%; justify-content: flex-start; border: 0; background: transparent; border-radius: 7px; color: #544f46; padding: 9px; min-height: 36px; margin: 2px 0; text-align: left; }
.nav-row span { overflow: hidden; text-overflow: ellipsis; }
.nav-row .icon { width: 15px; height: 15px; color: #827b6d; }
.nav-row.active { background: var(--tint); color: #863d2b; font-weight: 680; }
.nav-row.active .icon { color: #aa513c; }
.canvas { flex: 1; min-height: 0; position: relative; isolation: isolate; overflow: hidden; touch-action: none; background-color: #f1eee8; background-image: radial-gradient(circle, #d4cec2 1px, transparent 1.2px); background-size: 16px 16px; outline: none; }
.canvas[data-hand="true"] { cursor: grab; }
.canvas[data-drag="true"] { cursor: grabbing; }
#world { transform-origin: 0 0; position: absolute; inset: 0; width: 0; height: 0; }
.board { position: absolute; background: #fff; box-shadow: 0 0 0 calc(1px / var(--scale)) #d5cdc2, 0 8px 26px #3732271a; }
.board.selected { box-shadow: 0 0 0 calc(2px / var(--scale)) var(--accent), 0 10px 35px #59322023; }
.board.moving { z-index: 1; }
.board iframe { width: 100%; height: 100%; display: block; border: 0; pointer-events: none; }
.board::after { content: ""; position: absolute; inset: 0; }
.toolbar, .zoom { display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #e2dbd0; border-radius: 12px; background: #fdfcfb; box-shadow: 0 4px 14px #3b291513; }
.toolbar { position: absolute; left: 50%; bottom: 19px; transform: translateX(-50%); }
.toolbar button, .zoom button { height: 32px; min-width: 31px; border: 0; padding: 5px 7px; background: transparent; }
.toolbar button:hover, .zoom button:hover { background: #f2eee9; }
.toolbar button.active { background: var(--tint); color: var(--accent); }
.divider { height: 19px; width: 1px; background: var(--line); margin: 0 3px; }
.canvas-nav { position: absolute; right: 15px; bottom: 19px; display: grid; gap: 8px; justify-items: end; }
#zoom-label { min-width: 47px; font-size: 12px; font-variant-numeric: tabular-nums; }
.empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; white-space: nowrap; }
.empty-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #e8e2d8; color: #81756a; }
.empty-icon .icon { width: 24px; height: 24px; }
.empty h2 { font-size: 17px; margin: 12px 0; }
.inline-form { margin-bottom: 16px; border-radius: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px; background: #fdfcfb; border-bottom: 1px solid var(--line); font-size: 13px; }
.inline-form input, .inline-name { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 7px 8px; font-size: 13px; }
.inline-name { width: 100%; }
.project-row .inline-name { width: min(100%, 280px); }
#toast { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 5; bottom: 78px; left: 50%; transform: translateX(-50%); border-radius: 9px; background: #302c27; color: #fff; padding: 10px 14px; font-size: 13px; max-width: 85vw; }
#toast-action { padding: 4px 7px; }
@media (max-width: 700px) {
  .toolbar { left: 7px; bottom: 52px; transform: none; }
  .canvas-nav { right: 7px; bottom: 8px; }
  .project-library { padding: 24px 14px; }
}
@media (max-width: 420px) {
  .project-actions { gap: 0; }
  .project-actions button { padding-inline: 5px; }
  .library-actions button { padding-inline: 6px; }
  .library-actions .icon { display: none; }
}

#save-notice { position: fixed; z-index: 6; left: 16px; bottom: 16px; max-width: calc(100vw - 32px); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fdfcfb; font-size: 13px; }
#login-status { color: var(--muted); font-size: 13px; }
@media (max-width: 700px) {
  #save-notice { bottom: 105px; }
}

.canvas[data-comment="true"] .board { cursor: crosshair; }
.comment-pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.comment-pin {
  position: absolute;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a8432c;
  color: #fff;
  box-shadow: 0 2px 6px #302c2755;
  pointer-events: auto;
  translate: -50% -50%;
  scale: calc(1 / var(--scale));
}
.comment-pin:hover { background: #903a26; }
.comment-pin.resolved { background: #68645c; }
.comment-draft { z-index: 3; pointer-events: none; background: var(--accent); }
.comment-outline {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  outline: calc(2px / var(--scale)) solid var(--accent);
}
#comment-dialog {
  position: fixed;
  inset: auto;
  z-index: 5;
  margin: 0;
  width: min(330px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: inherit;
  box-shadow: 0 8px 24px #302c2733;
}
#comment-title { margin: 0 0 5px; font-size: 17px; }
#comment-board, #comment-element, #comment-status { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
#comment-board, #comment-element { margin: 0 0 8px; }
#delete-comment { margin-right: auto; color: #983c2a; }
#comment-input { width: 100%; resize: vertical; padding: 9px; border: 1px solid #d5cdc2; border-radius: 7px; }
#comment-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow: auto; }
.comment-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }