:root {
  --bg: #0f1220;
  --panel: #171a2b;
  --panel2: #20243a;
  --text: #f6f7ff;
  --muted: #b8bdd6;
  --accent: #8f5cff;
  --accent2: #00d1ff;
  --danger: #ff5c7a;
  --ok: #2ee59d;
  --line: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at top left, rgba(143,92,255,.22), transparent 35%), var(--bg);
  color: var(--text);
  min-height: 100vh;
}
a { color: inherit; }
.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0; }
.hero { padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: rgba(23,26,43,.82); box-shadow: 0 20px 70px rgba(0,0,0,.28); }
.badge { display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background: rgba(143,92,255,.16); border:1px solid rgba(143,92,255,.35); color:#dbcfff; font-size:13px; }
h1 { margin: 14px 0 8px; font-size: clamp(30px, 5vw, 54px); line-height: 1.02; }
p { color: var(--muted); line-height: 1.6; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:20px; }
.card { background: rgba(255,255,255,.055); border:1px solid var(--line); border-radius:18px; padding:18px; }
.card h3 { margin: 0 0 10px; }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.btn, button { border:0; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 14px; border-radius:12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; font-weight:700; }
.btn.secondary, button.secondary { background: rgba(255,255,255,.09); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:18px; }
label { display:block; color:#e7e9ff; font-weight:700; margin-bottom:7px; }
input, textarea, select { width:100%; border:1px solid var(--line); background:#0d1020; color:var(--text); min-height:42px; border-radius:12px; padding:10px 12px; outline:none; }
small { color: var(--muted); display:block; margin-top:6px; }
.row-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.output { word-break: break-all; background:#0d1020; border:1px solid var(--line); border-radius:14px; padding:12px; color:#dce1ff; }
.marker-page { background:#fff; color:#000; }
.marker-wrap { width: 100%; min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:20mm; }
.marker-card { text-align:center; }
.marker-img { width:10cm; height:10cm; object-fit:contain; display:block; margin:0 auto; }
.print-title { font-family: Arial, sans-serif; font-weight:700; margin: 8mm 0 2mm; }
.print-note { color:#222; font-family: Arial, sans-serif; }
.viewer-overlay { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 10; pointer-events:none; display:flex; justify-content:space-between; gap:10px; }
.viewer-pill { pointer-events:auto; padding:9px 12px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-family:Arial,sans-serif; font-size:13px; }
@media (max-width: 850px) { .grid, .form-grid { grid-template-columns:1fr; } .row-3 { grid-template-columns:1fr; } }
@media print { body.marker-page { background:#fff; } .no-print { display:none!important; } .marker-wrap { padding:0; } .marker-img { width:10cm; height:10cm; } }