body.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font: 700 16px var(--font-display); text-decoration: none; margin-right: 6px; white-space: nowrap; }
#pname-top { width: 200px; font-weight: 600; }
.grow { flex: 1; } .mute { color: var(--mute); font-size: 12px; }
.zoom { display: flex; align-items: center; gap: 4px; } .zoom input { width: 90px; }
.btn { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.btn:hover { border-color: var(--acc); }
#topbar select { width: auto; }
#layout { flex: 1; display: grid; grid-template-columns: 380px 1fr; min-height: 0; }
#side, #stage { min-width: 0; }
#side { display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); min-height: 0; }
.palette { max-width: 100%; }
#tabs { display: flex; border-bottom: 1px solid var(--line); }
#tabs button { flex: 1; border: 0; border-radius: 0; padding: 10px 4px; border-bottom: 2px solid transparent; }
#tabs button.on { border-bottom-color: var(--acc); color: var(--acc); font-weight: 650; }
#sidebody { flex: 1; overflow: auto; padding: 12px; }
#stage { overflow: auto; padding: 18px; background: color-mix(in srgb, var(--bg) 85%, #000); }
#pages { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pgwrap .plabel { text-align: center; color: var(--mute); font-size: 12px; margin-bottom: 4px; }
.pgbox { box-shadow: var(--shadow); background: #fff; overflow: hidden; }
.pgscale { transform-origin: 0 0; width: 794px; height: 1123px; }
.selhl { outline: 2px solid var(--focus); outline-offset: 2px; background: rgba(59, 91, 219, .08); }
.hwink [data-bid] { cursor: pointer; }
.hint { color: var(--mute); font-size: 12px; margin: 5px 0; }
.palette { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.card { border: 1px solid var(--line); border-radius: 9px; margin: 6px 0; background: var(--bg); }
.card.sel { border-color: var(--acc); }
.card.dropbefore { box-shadow: 0 -3px 0 var(--focus); } .card.dropafter { box-shadow: 0 3px 0 var(--focus); }
.chead { display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer; }
.chead .snip { flex: 1; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.grip { cursor: grab; color: var(--mute); user-select: none; }
.cacts { display: flex; } .cacts button { padding: 2px 6px; }
.cbody { padding: 4px 10px 10px; border-top: 1px solid var(--line); }
textarea.mono, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.thumb { border: 1px dashed var(--line); border-radius: 8px; padding: 6px; text-align: center; color: var(--mute); }
.thumb img { max-width: 100%; max-height: 140px; }
.tpls { display: grid; gap: 6px; margin: 8px 0; }
.tpl { text-align: left; display: flex; flex-direction: column; } .tpl small, .proj small { color: var(--mute); display: block; }
.proj { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin: 5px 0; }
.proj.cur { border-color: var(--acc); }
.tbl { width: 100%; border-collapse: collapse; } .tbl td { padding: 2px; } .tbl input { padding: 4px; }
.fl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .fl img { width: 100%; box-shadow: var(--shadow); }
.fatal { padding: 20px; color: var(--danger); }
.card { cursor: grab; touch-action: manipulation; } .card input, .card textarea, .card select, .card button { cursor: auto; } .chead { cursor: grab; }
.grip { padding: 2px 4px; pointer-events: none; } .palette [data-add] { cursor: grab; }
.card[data-dnd-dragging], [data-dnd-dragging] { opacity: .9; box-shadow: var(--shadow); z-index: 60; }
body.dragging { user-select: none; } body.dragging .card { transition: transform .15s; }
.rzh { position: absolute; right: -9px; bottom: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--focus); border: 3px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 6px rgba(0,0,0,.4); touch-action: none; z-index: 9; }
#mnav { display: none; }
@media (max-width: 860px) {
  body.app { height: 100dvh; overflow: hidden; } #layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 54px; }
  #layout[data-view="edit"] #stage, #layout[data-view="pages"] #side, #layout[data-view="add"] #stage { display: none; }
  #side { border-right: 0; max-height: none; } #stage { padding: 10px 4px; }
  #topbar { gap: 6px; padding: 6px 8px; padding-top: calc(6px + env(safe-area-inset-top)); } #topbar .grow { display: none; } #pname-top { flex: 1 1 120px; width: auto; min-width: 0; } #bDownload { margin-left: auto; }
  .brand { font-size: 0; } .brand::before { content: "✎"; font-size: 20px; } #pname-top { width: 120px; } .zoom, #saved { display: none; }
  #mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 8px; }
  #mnav button { flex: 1; padding: 10px 4px; font-weight: 600; } #mnav button.on { border-color: var(--acc); color: var(--acc); }
  .btn-sm { padding: 7px 10px; } .cacts button { padding: 6px 9px; } .grip { padding: 8px 8px; }
}
.raw textarea { margin-top: 4px; }
/* the open card's header (move / duplicate / delete) stays visible while its form scrolls */
.card.sel > .chead { position: sticky; top: -12px; z-index: 5; background: color-mix(in srgb, var(--acc-soft) 70%, var(--panel)); border-radius: 9px 9px 0 0; border-bottom: 1px solid var(--line); }