* { box-sizing: border-box; }
html, body { margin: 0; background: #f4f6f8; color: #1d2d3d; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
header { position: sticky; top: 0; z-index: 5; background: #1d2d3d; color: #fff; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
h1 { margin: 0; font-size: 20px; }
h2 { margin: 0 0 6px; font-size: 17px; }
.sub { margin: 2px 0 0; font-size: 12px; opacity: .8; }
section { background: #fff; margin: 12px; padding: 14px; border-radius: 18px; border: 1px solid #d3dae1; }
section p { margin: 0 0 8px; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
button, .filebtn { font: 600 15px system-ui, sans-serif; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #1d2d3d;
  background: #cdb8f5; color: #1d2d3d; display: inline-flex; align-items: center; cursor: pointer; }
.filebtn input { display: none; }
button.done { background: #1d2d3d; color: #fff; }
select { font-size: 15px; min-height: 36px; }
#pad { width: 100%; height: 320px; border-radius: 12px; border: 2px dashed #9aa8b6; background: #fff; touch-action: none; display: block; }
pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: #f4f6f8; border-radius: 10px; padding: 8px; margin: 6px 0 0; -webkit-user-select: text; user-select: text; }
pre.mini:empty { display: none; }
video { width: 100%; max-height: 220px; background: #000; border-radius: 10px; }
.hidden { display: none !important; }
.banner { margin-top: 8px; background: #cdb8f5; color: #1d2d3d; padding: 8px 12px; border-radius: 12px; font-weight: 600; }
.sendstate { margin-top: 6px; font-size: 12px; opacity: .85; }