:root {
  --bg: #0b0d12;
  --bg-2: #11141b;
  --panel: #0f1320;
  --border: rgba(255,255,255,0.08);
  --text: #e7eaf2;
  --muted: #8b93a8;
  --muted-2: #5d7aae;
  --accent: #3a8eff;
}
[data-brand="primcast"] { --accent: #ff5a26; }

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
code, pre { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

header.site { display:flex; align-items:center; justify-content:space-between; padding: 18px 32px; border-bottom:1px solid var(--border); background: var(--bg-2); }
header.site .logo { font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--text); }
header.site .logo .dot { color: var(--accent); }
header.site nav { display:flex; gap:24px; }
header.site nav a { color:#c4c9d8; font-size:14px; }
header.site nav a:hover { color:#fff; }
header.site .cta { background: var(--accent); color:#fff !important; padding:8px 16px; border-radius:8px; font-weight:500; font-size:14px; }
@media (max-width: 880px) { header.site nav { display:none; } header.site { padding:14px 18px; } }

.container { max-width: 1100px; margin: 0 auto; padding: 56px 32px 30px; }
@media (max-width: 600px) { .container { padding: 40px 18px 24px; } }

.eyebrow { display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); border:1px solid var(--accent); padding:4px 10px; border-radius:999px; margin-bottom: 18px; }
h1 { font-size: 42px; line-height:1.1; margin: 0 0 14px; letter-spacing:-.02em; font-weight:700; }
.lead { font-size: 16px; color: var(--muted); margin: 0 0 28px; max-width: 720px; line-height:1.5; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.card h3 { margin: 0 0 8px; font-size: 14px; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); font-weight:600; }

.form-card .row { display:grid; grid-template-columns: 1fr 1fr 2fr; gap:14px; align-items:end; }
.form-card .row.buttons { display:flex; align-items:center; gap:14px; margin-top:18px; grid-template-columns: unset; }
@media (max-width: 720px) { .form-card .row { grid-template-columns: 1fr; } }

label { display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--muted); letter-spacing:.04em; text-transform:uppercase; font-weight:500; }
select, input[type=text] { background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color: var(--text); font-family:inherit; font-size:14px; }
select:focus, input[type=text]:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.05); }

button.primary { padding:11px 30px; border:none; border-radius:8px; background: var(--accent); color:#fff; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; }
button.primary:hover { filter: brightness(1.1); }
button.primary:disabled { opacity:.5; cursor:not-allowed; }
button.link-btn { background:none; border:none; color: var(--accent); font-family:inherit; font-size:12px; cursor:pointer; padding:4px 8px; }
button.link-btn:hover { text-decoration: underline; }

.result-card .meta-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
pre { background: rgba(0,0,0,.3); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin:0; font-size:13px; line-height:1.5; color: #c8d0e0; overflow-x:auto; white-space:pre; max-height:60vh; }

.help-card ul { margin: 0; padding-left: 20px; }
.help-card li { margin: 6px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.help-card code { background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: #c8d0e0; }

footer.site { margin-top: 60px; padding: 24px 32px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; text-align: center; }