:root { --max: 1000px; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:#0b0b0c; color:#f2f2f2; }
a { color: inherit; }
.container { max-width: var(--max); margin: 0 auto; padding: 16px; }
.card { background:#141416; border:1px solid #232326; border-radius: 16px; padding: 14px; }
.row { display:flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 240px; }
input, select, textarea, button { width:100%; padding: 12px; border-radius: 12px; border:1px solid #2a2a2f; background:#0f0f12; color:#f2f2f2; }
textarea { min-height: 90px; }
button { cursor:pointer; border: 1px solid #2a2a2f; background:#1b1b20; font-weight: 650; }
button.primary { background:#2b2bff22; border-color:#3c3cff66; }
.small { font-size: 13px; color:#b8b8c6; }
.header { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius: 999px; border:1px solid #2a2a2f; background:#101015; font-size:13px; text-decoration:none; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.device { display:flex; flex-direction: column; gap: 10px; }
.device img { width:100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 14px; background:#0b0b0c; border:1px solid #232326; padding: 10px; }
hr { border: none; border-top:1px solid #232326; margin: 16px 0; }
.signature-wrap { border:1px dashed #3a3a45; border-radius: 14px; overflow:hidden; background:#0f0f12; }
canvas { width:100%; height:160px; display:block; touch-action: none; }
.inline { display:flex; gap: 10px; }
.inline > * { flex: 1; }