:root {
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --border: #dbe3ef;
  --muted: #64748b;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --danger: #dc2626;
  --shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { color: #172033; background: var(--surface-soft); overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
}

.app { display: flex; flex-direction: column; height: 100%; }
.screen {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: radial-gradient(circle at 20% 15%, #dbeafe 0, transparent 32%), radial-gradient(circle at 80% 80%, #ede9fe 0, transparent 30%), #f8fafc;
}
.auth-card { width: min(430px, 100%); padding: 30px; border: 1px solid var(--border); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.auth-card h1 { margin: 0 0 8px; font-size: 1.55rem; }
.auth-card p { margin: 0 0 24px; color: var(--muted); line-height: 1.55; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; }
.wide { width: 100%; }
.home-shell { width: min(920px, 100%); align-self: start; margin: 4vh auto; }
.home-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.home-head h1 { margin: 0; }
.home-head p { margin: 5px 0 0; color: var(--muted); }
.home-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.home-card { display: flex; flex-direction: column; min-height: 238px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: white; box-shadow: 0 5px 18px rgba(15,23,42,.06); }
.home-card h2 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.home-card time { margin-top: 6px; color: var(--muted); font-size: .78rem; }
.home-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: var(--muted); font-size: .72rem; }
.note-preview { position: relative; height: 112px; margin-top: 10px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 9px; background-color: #fff; background-image: radial-gradient(circle, #d8e0eb 1px, transparent 1px); background-size: 12px 12px; }
.preview-stage { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }
.preview-node { position: absolute; display: grid; place-items: center; overflow: hidden; padding: 2px; border: 1px solid #94a3b8; border-radius: 3px; color: #334155; background: #fff; font-size: 5px; line-height: 1.15; text-align: center; white-space: pre-wrap; }
.preview-node.ellipse { border-radius: 50%; }
.preview-node.text { display: block; width: max-content !important; height: auto !important; border: 0; background: transparent; }
.preview-node img { width: 100%; height: 100%; object-fit: cover; }
.preview-lines { position: absolute; inset: 0; overflow: visible; }
.storage-panel { position: sticky; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin: 18px 0 0 auto; width: min(620px, 100%); padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.storage-panel strong { font-size: .86rem; }
.storage-panel p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; }
.backup-setting { display: flex; align-items: center; gap: 7px; }
.usb-state { color: #475569; font-size: .74rem; font-weight: 700; }
.home-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.topbar, .formatbar {
  position: relative;
  /* 상단 툴바가 서식 바보다 위에 쌓여야 '도형 ▾' 드롭다운이 가려지지 않는다.
     (topbar 가 쌓임 맥락을 만들기 때문에 드롭다운의 z-index 만 올려서는 해결되지 않는다.) */
  z-index: 20;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}
.topbar { z-index: 30; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(360px, 1fr); height: 64px; min-height: 64px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.topbar > .group { min-width: 0; height: 44px; flex-wrap: nowrap; }
.topbar > .group.wrap { flex-wrap: nowrap; }
.topbar > .group:last-child { justify-content: flex-end; overflow-x: auto; scrollbar-width: thin; }
.topbar .btn, .modebar .btn { flex: 0 0 auto; white-space: nowrap; }
/* 도구 묶음이 늘어나 한 줄을 넘치면 다음 줄로 접힌다(팔레트 드롭다운은 계속 떠 있어야 하므로 overflow 는 visible 유지). */
.formatbar { display: flex; min-height: 56px; flex-wrap: wrap; row-gap: 6px; overflow: visible; background: #f8fafc; }
.formatbar > .group { min-width: 0; flex-wrap: nowrap; }
.formatbar > .group.wrap { flex-wrap: nowrap; }
.formatbar .separator { align-self: center; }
.group { display: flex; align-items: center; gap: 8px; min-width: 0; }
.group.wrap { flex-wrap: wrap; }
.title-input {
  width: min(40vw, 430px);
  min-width: 180px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #162033;
  background: transparent;
  font-size: 1.06rem;
  font-weight: 750;
}
.title-input:hover { border-color: var(--border); }
.title-input:focus { border-color: #93c5fd; background: white; }
.label { color: var(--muted); font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
.btn {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #334155;
  background: white;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.btn:hover { border-color: #a8b5c7; background: #f8fafc; }
.btn.primary { color: white; border-color: var(--blue); background: var(--blue); }
.btn.primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.btn.success { color: white; border-color: #15803d; background: #15803d; }
.btn.danger { color: #b91c1c; border-color: #fecaca; background: #fff7f7; }
.btn.active { color: white; border-color: var(--blue); background: var(--blue); }
.btn:disabled { cursor: not-allowed; opacity: 0.45; }
.icon-btn { width: 36px; padding: 7px; }
.separator { width: 1px; height: 24px; background: var(--border); }
.color-control { display: flex; align-items: center; gap: 6px; }
.color-control input { width: 32px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.size-select { min-height: 34px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: white; }
.hidden { display: none !important; }

.workspace { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.canvas {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  cursor: crosshair;
  background-color: #fff;
  background-image: radial-gradient(circle, #cbd5e1 1.4px, transparent 1.4px);
  background-size: 32px 32px;
  touch-action: none;
}
.canvas.no-grid { background-image: none; }
.connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: auto; }
.connection-hit { fill: none; stroke: rgba(15, 23, 42, 0.001); stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.connection-path { fill: none; stroke: #64748b; stroke-width: 2.5; pointer-events: none; }
.connection-group:hover .connection-path, .connection-path.selected { stroke: var(--blue) !important; stroke-width: 4 !important; }
.connection-label {
  fill: #1e293b; font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none;
}
.empty-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90%, 520px);
  transform: translate(-50%, -50%);
  color: #94a3b8;
  text-align: center;
  pointer-events: none;
}
.empty-hint strong { display: block; margin-bottom: 6px; color: #64748b; font-size: 1.05rem; }
.selection-box { position: absolute; z-index: 12; border: 1.5px solid var(--blue); background: rgba(37,99,235,.1); pointer-events: none; }
.shortcut-panel { position: absolute; z-index: 35; top: 14px; right: 14px; width: min(340px, calc(100% - 28px)); padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.shortcut-panel h2 { margin: 0 0 10px; font-size: 1rem; }
.shortcut-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .8rem; }
.shortcut-grid dt { font-family: ui-monospace, monospace; font-weight: 800; }
.shortcut-grid dd { margin: 0; color: var(--muted); }
.node {
  position: absolute;
  z-index: 3;
  max-width: min(360px, 75vw);
  padding: 10px 14px;
  border: 2px solid #d4dce7;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.1);
  cursor: grab;
  user-select: none;
  overflow-wrap: anywhere;
  touch-action: none;
}
.node.shape { display: flex; align-items: center; justify-content: center; min-width: 80px; min-height: 48px; text-align: center; }
.node.shape { max-width: min(900px, calc(100vw - 20px)); }
.node.shape-rectangle { border-radius: 10px; }
.node.shape-ellipse { border-radius: 50%; }
.node.shape-note { border-color: #f4cf55; border-radius: 4px; background: #fff4ad; box-shadow: 4px 5px 10px rgba(71, 56, 15, 0.16); }
.node.shape-text {
  padding: 3px 5px;
  border-color: transparent;
  border-radius: 3px;
  background: transparent !important;
  box-shadow: none;
}
.node.shape-text:hover { border-color: transparent; box-shadow: none; }
.node.shape-text.selected { border-color: var(--blue); border-style: dashed; box-shadow: none; }
.node.shape-image { padding: 0; overflow: hidden; border-radius: 6px; background: #f1f5f9; }

/* 확장 도형: 테두리·배경을 SVG 레이어가 그리므로 상자 자체는 투명하게 둔다. */
.node.shape-poly { border-color: transparent; background: transparent !important; box-shadow: none; }
.node.shape-poly:hover { border-color: transparent; box-shadow: none; }
.node.shape-poly.selected { border-color: var(--blue); border-style: dashed; }
.shape-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.node.shape-poly p { position: relative; z-index: 1; }
.shape-preview.poly { border: 0; background: transparent; }
.shape-preview.table-preview {
  background-image: linear-gradient(#64748b 1px, transparent 1px), linear-gradient(90deg, #64748b 1px, transparent 1px);
  background-size: 100% 8px, 12px 100%;
}
.shape-preview.check-preview { display: grid; place-items: center; border: 0; font-size: 20px; line-height: 1; }
.shape-preview.check-preview::before { content: '☑'; color: #15803d; }
.shape-preview.poly svg { display: block; width: 100%; height: 100%; }

/* 표·체크리스트 */
.node.shape-data { display: block; padding: 0; overflow: hidden; text-align: left; }
.node-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.node-table th, .node-table td {
  position: relative; padding: 3px 5px; border: 1px solid rgba(15, 23, 42, .28);
  overflow: hidden; overflow-wrap: anywhere; vertical-align: top;
}
.node-table .node-cell.active { box-shadow: inset 0 0 0 2px var(--blue); }
.cell-image { display: block; width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.cell-text:empty { display: block; min-height: 1em; }
/* 열·행 경계를 잡는 손잡이. 평소엔 보이지 않다가 표에 커서를 올리면 나타난다. */
.table-resizer { position: absolute; z-index: 2; background: transparent; touch-action: none; }
.table-resizer.col { top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; }
.table-resizer.row { bottom: -3px; left: 0; width: 100%; height: 7px; cursor: row-resize; }
.node-table:hover .table-resizer { background: rgba(37, 99, 235, .18); }
.table-resizer:hover { background: var(--blue) !important; }
.node-table th { background: rgba(15, 23, 42, .06); font-weight: 750; }
.node-table th:focus-visible, .node-table td:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.check-body { display: flex; flex-direction: column; height: 100%; }
.check-list { display: flex; flex-direction: column; gap: 3px; height: 100%; margin: 0; padding: 8px 10px; overflow: auto; list-style: none; }
.check-item { display: flex; align-items: flex-start; gap: 7px; }
.check-item input { flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; }
.check-item span { min-width: 20px; flex: 1; overflow-wrap: anywhere; cursor: text; }
.check-item span:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.check-item.done span { opacity: .55; text-decoration: line-through; }
.check-progress { margin: 0; padding: 2px 10px 6px; color: var(--muted); font-size: .7em; font-weight: 700; }
.node-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.node:hover { border-color: #93c5fd; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); }
.node.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13); }
.node.connecting { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15); }
.node.dragging { cursor: grabbing; }
.node p { margin: 0; white-space: pre-wrap; }

/* 글자 선택 모드 - 개체를 옮기는 대신 안의 글자를 드래그로 선택한다.
   (툴바의 "글자 선택" 토글 또는 Alt 키를 누른 상태) */
.canvas.text-select .node { cursor: text; touch-action: auto; }
.canvas.text-select .node p,
.canvas.text-select .node .cell-text,
.canvas.text-select .node .check-item span {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.canvas.text-select .node-cell { cursor: text; }
.canvas.text-select .node.shape-image { cursor: default; }
.canvas.text-select ::selection { background: rgba(37, 99, 235, 0.28); }
.node p[contenteditable="true"] { min-width: 42px; cursor: text; user-select: text; outline: 0; }
.node.inline-editing { cursor: text; }
.memo-toggle { position: absolute; top: 5px; right: 5px; z-index: 3; display: none; padding: 3px 6px; border: 1px solid #d4b72e; border-radius: 5px; background: rgba(255,255,255,.78); font-size: 11px; }
.node.shape-note .memo-toggle { display: block; }
.node.shape-note.collapsed { height: 48px !important; min-height: 48px; }
.node.shape-note.collapsed p { max-height: 24px; padding-right: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node.shape-note.collapsed .resize-handle { display: none; }
.resize-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  display: none;
  border: 2px solid white;
  border-radius: 3px;
  background: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
  cursor: nwse-resize;
  touch-action: none;
}
.node.selected:not(.shape-text) .resize-handle { display: block; }
.modebar {
  position: relative;
  z-index: 25;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
}
.canvas.mode-place { cursor: copy; }
.tool-menu { position: relative; }
/* 좁은 화면에서 .modebar 가 overflow-x:auto 로 바뀌면 그 안의 절대배치 메뉴가
   잘려 나간다. 조상의 클리핑·쌓임 맥락에서 아예 벗어나도록 fixed 로 띄우고
   위치는 여는 시점에 버튼 좌표로 계산한다. */
.shape-menu {
  position: fixed;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  box-shadow: var(--shadow);
}
.shape-choice { height: 58px; display: grid; place-items: center; padding: 4px; }
.shape-preview { display: block; width: 38px; height: 26px; border: 2px solid #64748b; background: #fff; }
.shape-preview.ellipse { border-radius: 50%; }
.shape-preview.note { border-color: #eab308; background: #fff4ad; }
.palette-wrap { position: relative; }
.palette-trigger { display: inline-flex; align-items: center; gap: 7px; }
.swatch-preview { width: 18px; height: 18px; border: 1px solid rgba(15,23,42,.25); border-radius: 4px; background: #fff; }
.palette-grid {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(7, 25px);
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: white;
  box-shadow: var(--shadow);
}
.palette-color { width: 25px; height: 25px; padding: 0; border: 1px solid rgba(15,23,42,.2); border-radius: 5px; }
.node-editor {
  position: absolute;
  z-index: 8;
  width: min(300px, 70vw);
  padding: 9px 11px;
  border: 2px solid var(--blue);
  border-radius: 9px;
  background: white;
  box-shadow: var(--shadow);
  resize: none;
  line-height: 1.45;
}

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 24px;
  max-width: min(90vw, 520px);
  transform: translateX(-50%);
  padding: 10px 15px;
  border-radius: 10px;
  color: white;
  background: #172033;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
}
.toast.error { background: #991b1b; }

/* 공유 */
.share-body { overflow: auto; padding: 0 20px; }
.share-section { padding: 6px 0 14px; border-bottom: 1px solid #edf1f6; }
.share-section:last-child { border-bottom: 0; }
.share-section h3 { margin: 0 0 4px; font-size: .94rem; }
.share-hint { margin: 0 0 10px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.share-input { min-width: 0; flex: 1 1 130px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.share-list { margin: 12px 0 0; padding: 0; list-style: none; }
.share-list li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #edf1f6; font-size: .84rem; }
.share-list li:first-child { border-top: 0; }
.share-main { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.share-meta { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; }
.share-url {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-soft); color: #1e293b;
  font-family: ui-monospace, monospace; font-size: .74rem;
}
.role-tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .7rem; font-weight: 750; }
.role-tag.owner { background: #dcfce7; color: #15803d; }
.role-tag.shared { background: #dbeafe; color: #1d4ed8; }
.read-only-banner {
  position: fixed; z-index: 45; left: 50%; top: 12px; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 999px;
  background: rgba(23, 32, 51, .93); color: white; box-shadow: var(--shadow); font-size: .8rem;
}
.read-only-banner span { color: #cbd5e1; }
/* 실시간 협업: 참여자 커서와 접속자 배지 */
.peer-cursor { position: absolute; z-index: 41; display: flex; align-items: center; gap: 5px; pointer-events: none; transform: translate(2px, 2px); }
.peer-dot { width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: #7c3aed; box-shadow: 0 1px 4px rgba(15,23,42,.35); }
.peer-name { padding: 1px 7px; border-radius: 999px; background: #7c3aed; color: white; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.peer-badge {
  position: absolute; z-index: 36; right: 14px; bottom: 14px; padding: 7px 13px;
  border-radius: 999px; background: rgba(23,32,51,.9); color: white; font-size: .74rem; font-weight: 700;
  box-shadow: var(--shadow); pointer-events: none;
}
.account-modal { width: min(680px, 100%); }
.account-body { overflow: auto; padding: 0 20px 18px; }
.account-password-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.account-create-grid { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1fr) auto auto; align-items: center; gap: 7px; }
.account-check { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.account-user-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.account-user-actions .btn { padding: 5px 9px; font-size: .72rem; }
.account-danger-zone { border-color: #fecaca; background: #fffafa; }
.role-tag.suspended { background: #fee2e2; color: #b91c1c; }
.unread-badge { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 3px; padding: 0 5px; border-radius: 999px; color: white; background: #dc2626; font-size: .66rem; }
.collab-panel {
  position: absolute; z-index: 46; top: 12px; right: 12px; width: min(390px, calc(100% - 24px)); height: calc(100% - 24px);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255,255,255,.98); box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.collab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid #edf1f6; }
.collab-head h2 { margin: 0; font-size: 1rem; }
.collab-head p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.call-controls { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-bottom: 1px solid #edf1f6; }
.call-controls .btn.active { color: white; border-color: #15803d; background: #15803d; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 240px; padding: 0 12px 10px; overflow: auto; }
.remote-videos { display: contents; }
.video-card { position: relative; min-height: 104px; margin: 0; overflow: hidden; border-radius: 10px; background: #0f172a; }
.video-card video { display: block; width: 100%; height: 100%; min-height: 104px; object-fit: cover; }
.video-card figcaption { position: absolute; left: 7px; bottom: 6px; padding: 2px 7px; border-radius: 999px; color: white; background: rgba(15,23,42,.72); font-size: .68rem; }
.call-participants { padding: 7px 12px; border-bottom: 1px solid #edf1f6; color: var(--muted); font-size: .72rem; }
.chat-list { min-height: 120px; flex: 1; margin: 0; padding: 12px; overflow-y: auto; list-style: none; }
.chat-message { max-width: 88%; margin: 0 0 9px; padding: 8px 10px; border-radius: 11px 11px 11px 3px; background: #f1f5f9; overflow-wrap: anywhere; }
.chat-message.mine { margin-left: auto; border-radius: 11px 11px 3px 11px; background: #dbeafe; }
.chat-message.deleted { color: var(--muted); font-style: italic; }
.chat-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; color: var(--muted); font-size: .66rem; }
.chat-body { margin: 0; white-space: pre-wrap; font-size: .82rem; line-height: 1.45; }
.chat-delete { border: 0; padding: 0; color: #94a3b8; background: transparent; font-size: .66rem; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid #edf1f6; }
.chat-form textarea { width: 100%; max-height: 100px; resize: vertical; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; line-height: 1.4; }
.canvas.read-only { cursor: default; }
.canvas.read-only .node { cursor: default; }
.canvas.read-only .resize-handle, .canvas.read-only .table-resizer { display: none !important; }

.asset-summary { margin: 0 20px 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: .78rem; line-height: 1.5; }
.asset-item { display: flex; align-items: center; gap: 10px; padding: 11px; border-bottom: 1px solid #edf1f6; }
.asset-item:last-child { border-bottom: 0; }
.asset-thumb { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #f1f5f9; font-size: .62rem; font-weight: 800; color: #64748b; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-main { min-width: 0; flex: 1; }
.asset-name { display: block; overflow: hidden; color: #1e293b; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.asset-meta { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; }
.asset-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.asset-tag.unused { color: #b45309; background: #fef3c7; }
.asset-tag.used { color: #15803d; background: #dcfce7; }
.asset-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.init-note { margin: 0 0 14px !important; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); color: var(--muted) !important; font-size: .8rem !important; line-height: 1.5; }
.init-note.error { border-color: #fecaca; background: #fff7f7; color: #b91c1c !important; }
.init-note.ready { border-color: #bbf7d0; background: #f0fdf4; color: #15803d !important; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.offline-backdrop {
  position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 20px;
  background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(3px);
}
.offline-card {
  width: min(480px, 100%); padding: 26px 28px; border: 1px solid #fecaca;
  border-top: 6px solid var(--danger); border-radius: 16px; background: white;
  box-shadow: var(--shadow); text-align: center;
}
.offline-card h2 { margin: 0 0 10px; color: #b91c1c; font-size: 1.2rem; }
.offline-card p { margin: 0 0 10px; color: #334155; font-size: .9rem; line-height: 1.6; }
.offline-card p.small { margin: 0; color: var(--muted); font-size: .8rem; }

.modal-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.48);
}
.modal {
  width: min(560px, 100%);
  max-height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.modal-header h2 { margin: 0; font-size: 1.08rem; }
.note-list { min-height: 120px; overflow: auto; margin: 0 20px; border: 1px solid var(--border); border-radius: 10px; }
.note-item { display: flex; align-items: center; gap: 10px; padding: 11px; border-bottom: 1px solid #edf1f6; }
.note-item:last-child { border-bottom: 0; }
.note-open { min-width: 0; flex: 1; border: 0; padding: 3px; text-align: left; background: transparent; }
.note-title { display: block; overflow: hidden; color: #1e293b; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.note-date { display: block; margin-top: 4px; color: var(--muted); font-size: 0.75rem; }
.empty-list { padding: 38px 20px; color: var(--muted); text-align: center; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 20px; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: minmax(180px, 1fr) minmax(0, 1.5fr); grid-template-rows: 48px 48px; height: 108px; min-height: 108px; padding: 6px 10px; }
  .topbar > .group:first-child { grid-column: 1; grid-row: 1; }
  .topbar > .group:last-child { grid-column: 2; grid-row: 1; }
  .modebar { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 44px; overflow-x: auto; justify-content: flex-start; }
  .formatbar { min-height: 56px; padding-inline: 10px; }
}

@media (max-width: 760px) {
  .topbar > .group { justify-content: flex-start; }
  .title-input { width: 100%; min-width: 0; }
  .separator { display: none; }
  .desktop-label { display: none; }
  .home-head { align-items: stretch; flex-direction: column; }
  .home-head .group { display: grid; grid-template-columns: 1fr 1fr; }
  .storage-panel { grid-template-columns: 1fr; }
  .btn { min-height: 44px; }
  .collab-panel { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
  .account-password-grid, .account-create-grid { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .btn, .size-select { min-height: 46px; }
  .resize-handle { right: -11px; bottom: -11px; width: 22px; height: 22px; }
  .palette-color { width: 31px; height: 31px; }
  .palette-grid { grid-template-columns: repeat(7, 31px); }
}

@media print {
  @page { size: landscape; margin: 8mm; }
  html, body { width: auto; height: auto; overflow: visible; background: white; }
  #login-view, #home-view, .topbar, .formatbar, .shortcut-panel, .collab-panel, .toast, .modal-backdrop { display: none !important; }
  #editor-view { display: block !important; height: auto; overflow: visible; }
  .workspace { display: block; width: auto; height: auto; overflow: visible; }
  .canvas { position: relative; min-width: 0; min-height: 0; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; transform-origin: top left; }
  .node { box-shadow: none !important; }
  .resize-handle, .memo-toggle { display: none !important; }
}