@font-face {
  font-family: 'PlakW02-BlackExtraCondensed';
  src: url('./fonts/PlakW02-BlackExtraCondensed.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gravtrac Cd Rg';
  src: url('./fonts/GravtracCdRg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b1e3d;
  --bg2: #13294b;
  --fg: #ffffff;
  --muted: #cfd6e5;
  --accent-r: #c8102e;
  --accent-b: #0033a0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'DejaVu Sans', sans-serif; background: linear-gradient(135deg, var(--bg), var(--bg2)); color: var(--fg); }

header { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
header h1 { margin: 0; font-size: 22px; }
header p { margin: 4px 0 0; color: var(--muted); }

main { display: grid; grid-template-columns: 380px 1fr; gap: 24px; padding: 20px; align-items: start; }

.controls { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; }
.controls .field { margin-bottom: 16px; }
.controls label {
  margin-right: 12px;
  font-weight: 600;
}
.controls input[type='text'], .controls input[type='url'], .controls input[type='number'] { width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); color: var(--fg); border-radius: 8px; }
.controls select { width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); color: var(--fg); border-radius: 8px; font-family: inherit; font-size: 14px; }
.controls details { margin-top: 8px; }
.controls details .grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }

.actions { display: flex; gap: 10px; margin-top: 10px; }
.actions button, .actions a { appearance: none; border: 0; padding: 10px 14px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-b), var(--accent-r)); color: #fff; text-decoration: none; font-weight: 600; cursor: pointer; letter-spacing: 0.5px; }
.actions a.secondary { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); }

.preview .frame { position: relative; width: 100%; max-width: 720px; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 12px 30px rgba(0,0,0,0.35); background: rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; }
.preview canvas { width: 100%; height: 100%; display:block; }
.preview .hint { color: var(--muted); margin-top: 10px; }
.message { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.2); padding: 10px; border-radius: 8px; color: var(--muted); }

.spinner-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 10; }
.spinner-overlay[hidden] { display: none; }
.spinner-ring { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 940px) {
  main { grid-template-columns: 1fr; }
}