:root {
  --bg: #eef1f5; --panel: #ffffff; --line: #dfe3ea; --text: #1a2233; --muted: #6b7386;
  --accent: #1e88e5; --accent-dark: #1565c0; --danger: #d32f2f; --ok: #2e7d32; --warn: #ef6c00;
  --radius: 8px; --shadow: 0 1px 3px rgba(20, 30, 50, .08), 0 6px 18px rgba(20, 30, 50, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--text); background: var(--bg); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 11px; line-height: 1.2; }
button:hover { background: #f4f6fa; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--accent-dark); }
button.danger { color: var(--danger); }
button.danger:hover { background: #fdecea; }
button.ghost { border-color: transparent; background: transparent; }
button.ghost:hover { background: #eef1f5; }
button:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(30, 136, 229, .35); outline-offset: 0; border-color: var(--accent); }
textarea { resize: vertical; min-height: 60px; }
label.f { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; font-weight: 600; letter-spacing: .02em; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.err { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 16px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #e8eef7; color: #2b4a75; }
.pill.ok { background: #e3f3e6; color: #1d5b24; }
.pill.warn { background: #fdecd8; color: #8a4500; }
.pill.bad { background: #fde8e8; color: #8b1a1a; }
a { color: var(--accent); }
kbd { font-family: var(--mono); font-size: 11px; background: #f0f2f6; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }

/* ---------------- auth + list pages ---------------- */
.center { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.card { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 26px 28px; width: 100%; max-width: 420px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.brand svg { width: 28px; height: 28px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 14px 0 6px; }
.tabs button { border: 0; background: none; padding: 8px 12px; border-radius: 0; color: var(--muted); font-weight: 600; }
.tabs button.sel { color: var(--text); border-bottom: 2px solid var(--accent); }
.page { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
table.list { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
table.list th, table.list td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.clickable:hover td { background: #f6f8fb; cursor: pointer; }
.counts { display: flex; gap: 6px; flex-wrap: wrap; }
.counts span { font-size: 11px; background: #eef1f5; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

/* ---------------- editor layout ---------------- */
#app { display: grid; grid-template-rows: 48px 1fr; grid-template-columns: 56px 1fr 320px; height: 100vh; overflow: hidden; }
#app.viewer { grid-template-columns: 0 1fr 320px; }
#app.nopanel { grid-template-columns: 56px 1fr 0; }
#app.viewer.nopanel { grid-template-columns: 0 1fr 0; }
header#top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 5; }
header#top .title { font-weight: 700; font-size: 15px; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; min-width: 60px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header#top .title[contenteditable=true]:hover, header#top .title:focus { border-color: var(--line); outline: none; background: #fafbfd; }
header#top .spacer { flex: 1; }
header#top .facility { color: var(--muted); font-size: 13px; }
#presence { display: flex; gap: -4px; }
#presence .av { width: 26px; height: 26px; border-radius: 50%; background: #5c6bc0; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -6px; }
#presence .av.me { background: var(--accent); }
.menu { position: relative; }
.menu .dd { position: absolute; right: 0; top: 36px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); min-width: 190px; padding: 6px; z-index: 30; }
.menu .dd button { display: block; width: 100%; text-align: left; border: 0; padding: 8px 10px; border-radius: 6px; }
#status { font-size: 12px; color: var(--muted); min-width: 90px; text-align: right; }
#status.saving { color: var(--warn); }
#status.error { color: var(--danger); font-weight: 600; }

nav#tools { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; overflow: hidden; }
nav#tools button { width: 42px; height: 40px; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; background: transparent; }
nav#tools button:hover { background: #eef1f5; }
nav#tools button.sel { background: #e3f0fd; color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--accent); }
nav#tools button svg { width: 24px; height: 24px; }
nav#tools .sep { height: 1px; width: 32px; background: var(--line); margin: 6px 0; }
nav#tools button .k { position: absolute; right: 3px; bottom: 2px; font-size: 9px; color: var(--muted); font-family: var(--mono); }

#stage { position: relative; overflow: hidden; background: #dfe4ea; touch-action: none; }
#stage canvas { display: block; width: 100%; height: 100%; }
#stage.cursor-cross { cursor: crosshair; }
#stage.cursor-grab { cursor: grab; }
#stage.cursor-grabbing { cursor: grabbing; }
#stage.cursor-move { cursor: move; }
#hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(20, 28, 42, .82); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
#zoombox { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 4px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
#zoombox button { border: 0; width: 30px; height: 28px; padding: 0; }
#zoombox span { display: flex; align-items: center; font-size: 12px; color: var(--muted); padding: 0 6px; min-width: 52px; justify-content: center; font-family: var(--mono); }
#dropzone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#dropzone .box { pointer-events: auto; background: #fff; border: 2px dashed #b8c2d0; border-radius: 14px; padding: 36px 40px; text-align: center; max-width: 440px; box-shadow: var(--shadow); }
#dropzone .box h3 { margin: 0 0 6px; }
#dropzone.over .box { border-color: var(--accent); background: #f2f8ff; }
#courtbar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(255,255,255,.97); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 12px; font-size: 12px; display: flex; gap: 12px; align-items: center; white-space: nowrap; z-index: 5; }
#courtbar label { display: flex; gap: 5px; align-items: center; }
#courtbar input[type=number] { padding: 3px 6px; font-size: 12px; }
#courtbar .seg button { padding: 4px 9px; font-size: 12px; }
#courtbar .sep { width: 1px; height: 22px; background: var(--line); }
#courtbar button { padding: 4px 9px; font-size: 12px; }
#modal .box.wide { max-width: 760px; }
#mp-stage { position: relative; width: 640px; max-width: 100%; height: 400px; background: #e6eaf0; border-radius: 8px; overflow: hidden; margin: 8px 0; user-select: none; touch-action: none; }
#mp-stage img { position: absolute; left: 0; top: 0; width: 640px; height: 400px; pointer-events: none; }
#mp-stage canvas { position: absolute; left: 0; top: 0; }
#mp-stage.pan { cursor: grab; }
#mp-stage.sel { cursor: crosshair; }
#mp-stage .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); font-size: 13px; color: var(--muted); }
.mp-zoom { display: flex; gap: 4px; align-items: center; }
.mp-zoom button { padding: 3px 9px; }
.imglist { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.imgrow { display: flex; gap: 10px; align-items: center; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.imgrow:hover { border-color: #b8c2d0; }
.imgrow.sel { border-color: var(--accent); background: #f2f8ff; }
.imgrow canvas { flex: 0 0 64px; border-radius: 4px; background: #e6eaf0; }
#scalebadge { position: absolute; left: 14px; bottom: 14px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; }
#scalebadge.none { color: var(--warn); }
#scalebadge button { padding: 3px 8px; font-size: 12px; }
#viewbadge { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.92); border-radius: 8px; box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px; }
#layers { position: absolute; right: 14px; top: 14px; background: rgba(255,255,255,.95); border-radius: 8px; box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
#layers label { display: flex; gap: 6px; align-items: center; cursor: pointer; user-select: none; }

aside#panel { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
aside#panel .ptabs { display: flex; border-bottom: 1px solid var(--line); }
aside#panel .ptabs button { flex: 1; border: 0; border-radius: 0; background: none; padding: 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
aside#panel .ptabs button.sel { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
aside#panel .pbody { flex: 1; overflow: auto; padding: 12px 14px 30px; }
aside#panel h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
aside#panel h4:first-child { margin-top: 2px; }
.props .head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.props .head .sw { width: 12px; height: 12px; border-radius: 3px; }
.props .head b { flex: 1; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; padding: 5px 4px; font-size: 12px; }
.seg button.sel { background: #e3f0fd; color: var(--accent-dark); font-weight: 600; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f2f6; }
.legend-row canvas { width: 26px; height: 26px; }
.legend-row .n { flex: 1; }
.legend-row .c { font-family: var(--mono); font-size: 12px; color: var(--muted); }
table.mini { width: 100%; border-collapse: collapse; font-size: 12px; }
table.mini th, table.mini td { padding: 4px 6px; border-bottom: 1px solid #f0f2f6; text-align: left; }
table.mini th { color: var(--muted); font-weight: 600; }
table.mini td.num { font-family: var(--mono); text-align: right; }
.bar { height: 6px; background: #eceff3; border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ok); }
.bar.warn i { background: var(--warn); }
.bar.bad i { background: var(--danger); }
.comment { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.comment.sel { border-color: var(--accent); background: #f5f9ff; }
.comment.resolved { opacity: .6; }
.comment .who { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.comment .who b { color: var(--text); }
.comment .who .num { background: #ffb300; color: #1a1a1a; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.comment .txt { margin: 4px 0; white-space: pre-wrap; }
.comment .reply { margin-left: 14px; border-left: 2px solid #eceff3; padding-left: 8px; margin-top: 6px; }
.comment .acts { display: flex; gap: 6px; margin-top: 4px; }
.comment .acts button { padding: 2px 7px; font-size: 11px; }
.share-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12px; }
.share-item code { font-family: var(--mono); font-size: 11px; word-break: break-all; display: block; margin: 3px 0; color: #345; }
.notice { background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 10px; }
.notice.info { background: #e8f2fd; border-color: #b6d7f7; }

/* modal */
#modal { position: fixed; inset: 0; background: rgba(15, 22, 35, .45); display: flex; align-items: center; justify-content: center; z-index: 50; }
#modal .box { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 20px 22px; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; }
#modal h3 { margin: 0 0 12px; }
#modal .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 900px) {
  #app { grid-template-columns: 48px 1fr 0; }
  #app.panelopen { grid-template-columns: 48px 1fr 300px; }
  #app.viewer.panelopen { grid-template-columns: 0 1fr 300px; }
  header#top .facility, #status { display: none; }
}