:root {
  color-scheme: dark;
  --bg: #0b0d0c;
  --panel: #111412;
  --panel-raised: #161a17;
  --line: #2a2f2b;
  --line-bright: #3c443d;
  --text: #f3f5ef;
  --muted: #929a92;
  --green: #b8f34a;
  --green-dark: #84b52e;
  --orange: #ff8a3d;
  --red: #ff6b5f;
  --sans: "Arsenica", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-caption: 0.75rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-title: 1.25rem;
  --text-headline: 1.625rem;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --z-sticky: 10;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

@font-face {
  font-family: "Arsenica";
  src: url("./Arsenica.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { color: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip-link { position: fixed; z-index: calc(var(--z-sticky) + 1); inset: var(--space-2) auto auto var(--space-2); transform: translateY(-200%); padding: var(--space-2) var(--space-3); background: var(--green); color: var(--bg); font-weight: 800; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: var(--text-label); font-weight: 700; }
.brand-logo { display: block; width: 106px; height: auto; filter: brightness(0) invert(1); }
.status { display: none; color: var(--muted); font: var(--text-caption)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.status i { display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.hero { padding: var(--space-6) 0 var(--space-5); max-width: 44rem; }
.eyebrow, .step-label { margin: 0 0 var(--space-2); font: 500 var(--text-caption)/1.4 var(--mono); color: var(--muted); letter-spacing: .08em; }
.eyebrow span { color: var(--green); }
h1 { margin: 0; font-size: 2.625rem; line-height: 1.12; font-weight: 800; text-wrap: balance; }
h1 em { color: var(--muted); font-style: normal; font-weight: 500; }
.subtitle { max-width: 42rem; margin: var(--space-4) 0 0; color: #c0c6bf; font-size: var(--text-body); line-height: 1.7; text-wrap: pretty; }

.app-shell { display: grid; border: 1px solid var(--line); background: rgba(15,18,16,.9); box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.library, .builder { padding: var(--space-4) var(--space-3); min-width: 0; }
.library { border-bottom: 1px solid var(--line); }
.section-heading, .builder-title-row, .preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h2, .builder h2, .preview-heading h3 { margin: 0; }
.section-heading h2 { font-size: var(--text-title); font-weight: 700; }
.count { display: grid; place-items: center; min-width: 29px; height: 24px; padding: 0 7px; border: 1px solid var(--line-bright); color: var(--muted); font: var(--text-caption) var(--mono); }

.search-wrap { height: 46px; margin: var(--space-4) 0 var(--space-3); padding: 0 var(--space-2); display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: #0d100e; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.search-wrap:focus-within { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(184,243,74,.08); }
.search-wrap svg { width: 17px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--text-label); }
.search-wrap input::placeholder { color: #9ca49c; }
kbd { border: 1px solid var(--line-bright); background: #171b18; color: #aeb5ae; font: var(--text-caption) var(--mono); padding: 3px 5px; border-radius: 3px; }

.template-list { display: grid; gap: var(--space-1); }
.template-card { width: 100%; padding: var(--space-3); border: 1px solid transparent; border-bottom-color: var(--line); background: transparent; text-align: start; cursor: pointer; transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out); }
.template-card:hover { border-color: var(--line-bright); background: var(--panel-raised); transform: translateY(-1px); }
.template-card.selected { border-color: var(--green-dark); background: rgba(184,243,74,.065); }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.card-top strong { font-size: var(--text-label); font-weight: 700; }
.card-top svg { width: 15px; fill: none; stroke: var(--muted); stroke-width: 1.7; transition: transform .18s, stroke .18s; }
.template-card.selected .card-top svg { stroke: var(--green); transform: translateX(-2px); }
.template-card p { margin: var(--space-1) 0 var(--space-2); color: var(--muted); font-size: var(--text-label); line-height: 1.6; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { padding: 3px 6px; border: 1px solid #2b302c; color: #a3aaa3; font: var(--text-caption) var(--mono); letter-spacing: .03em; }
.tag.category { color: var(--orange); border-color: rgba(255,138,61,.28); background: rgba(255,138,61,.05); }
.empty-state { color: var(--muted); text-align: center; padding: 30px 0; font-size: var(--text-body); }

.builder { padding-top: var(--space-4); }
.builder h2 { font-size: var(--text-headline); font-weight: 700; }
.builder-description { margin: 9px 0 0; max-width: 65ch; color: var(--muted); font-size: var(--text-body); line-height: 1.7; text-wrap: pretty; }
.text-button { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 0; border: 0; background: none; color: #b6bdb6; font-size: var(--text-label); cursor: pointer; }
.text-button svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.request-template-footer { display: flex; justify-content: flex-end; padding: var(--space-4) 0; }
.copy-button.request-template-button { width: auto; padding-inline: var(--space-4); }

.variables-form { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4) 0 var(--space-5); }
.field { min-width: 0; }
.field label { display: flex; justify-content: space-between; margin-bottom: var(--space-1); color: var(--text); font-size: var(--text-label); font-weight: 700; }
.field label span { color: var(--orange); font: var(--text-caption) var(--mono); font-weight: 400; }
.field input { width: 100%; height: 45px; padding: 0 12px; border: 1px solid var(--line); outline: 0; background: #0d100e; color: var(--text); font: var(--text-label) var(--mono); direction: ltr; text-align: start; transition: border-color .18s, box-shadow .18s; }
.field input:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(184,243,74,.07); }
.field input.invalid { border-color: var(--red); }
.hint { margin: var(--space-1) 0 0; color: #aeb5ae; font: var(--text-label)/1.6 var(--sans); }
.list-inputs { display: grid; max-height: 13.5rem; gap: var(--space-1); overflow-y: auto; padding-inline-end: 4px; }
.list-input-row { display: flex; gap: var(--space-1); }
.list-input-row input { flex: 1; }
.remove-list-item { width: 45px; flex: 0 0 45px; border: 1px solid var(--line); background: #0d100e; color: var(--muted); font: 1.4rem/1 var(--mono); cursor: pointer; }
.remove-list-item:hover { border-color: var(--red); color: var(--red); }
.add-list-item { min-height: 36px; margin-top: var(--space-2); padding: 0 10px; border: 1px dashed var(--line-bright); background: transparent; color: var(--green); font: var(--text-caption) var(--mono); cursor: pointer; }
.add-list-item:hover { border-color: var(--green-dark); background: rgba(184,243,74,.06); }

.preview-section { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.preview-heading { align-items: center; margin-bottom: var(--space-2); }
.preview-heading .step-label { margin-bottom: 8px; }
.preview-heading h3 { font-size: var(--text-title); font-weight: 700; }
.editor-dots { display: flex; gap: 5px; }
.editor-dots i { width: 6px; height: 6px; border-radius: 50%; background: #353b36; }
.editor-dots i:first-child { background: var(--orange); }
.code-editor { overflow: hidden; border: 1px solid var(--line-bright); background: #090b0a; text-align: left; unicode-bidi: plaintext; }
.editor-bar { height: 34px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #131613; color: #b1b8b1; font: var(--text-caption) var(--mono); }
pre { margin: 0; padding: var(--space-3) var(--space-3) var(--space-4); overflow-x: auto; min-height: 104px; white-space: pre; }
code { color: #d9ded6; font: var(--text-label)/1.8 var(--mono); font-variant-ligatures: none; }
.token-string { color: #e8c07d; }
.token-number { color: #b9ddff; }
.token-keyword { color: #d8a2f0; }
.token-function { color: var(--green); }
.token-comment { color: #a4aca4; }
.validation-message { min-height: 21px; margin: var(--space-2) 0 0; color: var(--red); font-size: var(--text-label); line-height: 1.5; }
.copy-button { position: relative; width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--green); background: var(--green); color: #0d100b; font-size: var(--text-label); font-weight: 800; cursor: pointer; box-shadow: 0 10px 34px rgba(184,243,74,.10); transition: transform .18s var(--ease-out), background .18s var(--ease-out), opacity .18s var(--ease-out); }
.copy-button:active:not(:disabled) { transform: translateY(0); }
.copy-button:disabled { cursor: not-allowed; opacity: .38; }
.copy-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-button .check-icon { display: none; }
.copy-button.copied .copy-icon { display: none; }
.copy-button.copied .check-icon { display: block; }
.copy-button kbd { position: absolute; inset-inline-end: 32px; border-color: rgba(0,0,0,.32); background: rgba(0,0,0,.08); color: #27350f; }

.request-dialog { width: min(600px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-bright); background: var(--panel); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.request-dialog::backdrop { background: rgba(0,0,0,.72); }
.request-form { display: grid; gap: var(--space-3); padding: var(--space-5); }
.request-heading { display: flex; justify-content: space-between; gap: var(--space-3); align-items: start; }
.request-heading h2 { margin: 0; font-size: var(--text-headline); }
.request-heading .text-button { min-width: 40px; padding: 0; font-size: 1.75rem; line-height: 1; justify-content: center; }
.request-form > label { color: var(--text); font-size: var(--text-label); font-weight: 700; }
.request-form > label span { color: var(--muted); font: var(--text-caption) var(--mono); font-weight: 400; }
.request-form textarea, .request-form input[type="file"] { width: 100%; border: 1px solid var(--line); background: #0d100e; color: var(--text); }
.request-form textarea { min-height: 150px; padding: 12px; resize: vertical; line-height: 1.6; }
.request-form input[type="file"] { padding: 10px; font-size: var(--text-label); }
.request-message { min-height: 1.5em; margin: 0; color: var(--red); }
.request-message.success { color: var(--green); }

footer { min-height: 68px; padding: 20px max(20px, calc((100% - 1180px) / 2)); display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); color: #a3aaa3; font: var(--text-caption)/1.5 var(--mono); letter-spacing: .1em; }
.footer-logo { display: block; width: 126px; height: auto; filter: brightness(0) invert(1); }
.admin-page { padding-bottom: var(--space-6); }
.admin-login { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); background: var(--panel); }
.admin-login label { font-weight: 700; }
.admin-login > div { display: flex; gap: var(--space-2); }
.admin-login input { min-width: 0; flex: 1; padding: 0 12px; border: 1px solid var(--line); background: #0d100e; color: var(--text); }
.admin-login .copy-button { width: auto; height: 45px; padding: 0 var(--space-3); white-space: nowrap; }
.requests-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.request-card { padding: var(--space-4); border: 1px solid var(--line); background: var(--panel); }
.request-card time { color: var(--muted); font: var(--text-caption) var(--mono); }
.request-card p { white-space: pre-wrap; line-height: 1.7; }

@media (min-width: 600px) {
  .site-header { padding-inline: 32px; }
  .status { display: block; }
  main { width: min(1180px, calc(100% - 64px)); }
  .library, .builder { padding: var(--space-5); }
  .variables-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 920px) {
  .hero { padding: 4.5rem 0 var(--space-6); }
  h1 { font-size: 3.5rem; }
  .app-shell { grid-template-columns: 340px minmax(0, 1fr); }
  .library { border-bottom: 0; border-inline-end: 1px solid var(--line); }
  .builder { padding: var(--space-5); }
  .variables-form { gap: var(--space-4) var(--space-3); }
}

@media (hover: hover) {
  .text-button:hover { color: var(--text); }
  .copy-button:hover:not(:disabled) { background: #cbff68; transform: translateY(-1px); }
}

@media (pointer: coarse) {
  .template-card { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}