:root { --bg: #e4e1db; --ink: #1c1c1c; --dim: #c2401c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#c { display: block; width: 100vw; height: 100vh; touch-action: none; }

#ui { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: flex; background: rgba(255,255,255,.82); border: 1px solid rgba(0,0,0,.12); border-radius: 8px; overflow: hidden;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.seg button { border: 0; background: none; padding: 7px 12px; font: inherit; color: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid rgba(0,0,0,.08); }
.seg button:hover { background: rgba(0,0,0,.05); }
.seg button.on { background: var(--ink); color: #fff; }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lb { position: absolute; left: 0; top: 0; padding: 0 3px; font: 600 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--dim); background: var(--bg); border-radius: 2px; white-space: nowrap; will-change: transform; }
.lb.big { font-size: 12px; color: var(--ink); }


#ui select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.82); color: inherit; }
.seg button:disabled { opacity: .4; cursor: default; }
#tools { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.lb.tape { color: #fff; background: #d8261b; }
.lb.draft { color: #fff; background: #2f6fd0; font-size: 12px; }

#panel { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 230px; padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#panel .ph { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
#panel .x { margin-left: auto; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: rgba(0,0,0,.5); }
#panel .pb, #panel .cut { display: flex; gap: 6px; flex-wrap: wrap; }
#panel .cut { margin-top: 8px; align-items: end; }
#panel .cut label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; flex: 1; }
#panel input { font: inherit; padding: 5px 6px; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; width: 100%; }
#panel .pb button, #panel .cut button { font: inherit; padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); background: #fff; cursor: pointer; }
#panel .pb button[data-act=row], #panel .cut button { background: var(--ink); color: #fff; border-color: var(--ink); }
#panel button:disabled { opacity: .4; cursor: default; }
[hidden] { display: none !important; }

#toast { position: fixed; left: 50%; top: 64px; transform: translate(-50%, -8px); padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  #tools { left: 12px; transform: none; flex-direction: column; align-items: flex-start; }
  #panel { width: auto; left: auto; bottom: 110px; }
}