:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  --ink: #050a08;
  --panel: #0a1310;
  --line: rgba(83, 217, 167, 0.22);
  --green: #55d7a5;
  --gold: #e3c46c;
  --text: #edf7f2;
  --muted: #8da49a;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(rgba(3, 8, 6, 0.92), rgba(2, 5, 4, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(83, 217, 167, 0.07) 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(83, 217, 167, 0.05) 48px);
  color: var(--text);
}

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

.order-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: 1px solid rgba(227, 196, 108, 0.25);
  background: rgba(5, 10, 8, 0.93);
  backdrop-filter: blur(18px);
  padding: 8px clamp(16px, 4vw, 64px);
}

.order-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.order-brand img { width: 48px; height: 48px; }
.order-brand span { display: grid; }
.order-brand strong { color: var(--gold); font: 700 1rem Cinzel, serif; }
.order-brand small { color: var(--muted); font-size: 0.68rem; }
.return-login { border: 1px solid rgba(227, 196, 108, 0.32); color: #f4df9d; padding: 10px 14px; text-decoration: none; font-size: 0.75rem; font-weight: 800; }

.bureau-order-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 42px 0 80px; }
.order-intro { border-left: 3px solid var(--green); padding: 2px 0 2px 22px; margin-bottom: 28px; }
.order-intro p { margin: 0 0 7px; color: var(--green); font-size: 0.68rem; font-weight: 900; }
.order-intro h1 { margin: 0; color: #fff3cf; font: 700 clamp(1.8rem, 4vw, 3.2rem) Cinzel, serif; letter-spacing: 0; }
.order-status-line { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 0.76rem; }
.order-status-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px rgba(227, 196, 108, 0.6); }
.order-status-line.verified i { background: var(--green); box-shadow: 0 0 14px rgba(85, 215, 165, 0.7); }

.code-gate, .order-workspace, .order-success { border: 1px solid var(--line); background: rgba(8, 17, 13, 0.94); box-shadow: 0 24px 90px rgba(0, 0, 0, 0.38); }
.code-gate form { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(220px, 0.8fr) auto; align-items: end; gap: 18px; padding: 26px; }
.code-gate form > div { display: grid; gap: 5px; }
.code-gate form > div span, .workspace-heading span, .order-fields header small, .order-submit-bar span { color: var(--green); font-size: 0.62rem; font-weight: 900; }
.code-gate form > div strong { color: #fff0c2; font: 700 1.2rem Cinzel, serif; }

label { display: grid; gap: 7px; }
label > span { color: #b9c9c1; font-size: 0.72rem; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid rgba(83, 217, 167, 0.22); background: #030806; color: #f7fffb; padding: 0 13px; }
input, select { min-height: 46px; }
textarea { min-height: 104px; padding-top: 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(83, 217, 167, 0.25); border-color: var(--green); }

button { min-height: 46px; border: 1px solid var(--green); background: #1d7659; color: #fff; cursor: pointer; padding: 0 18px; font-weight: 900; }
button:hover { filter: brightness(1.12); }
button:disabled { cursor: wait; opacity: 0.55; }
.portal-message { grid-column: 1 / -1; min-height: 18px; margin: 0; color: #ffaaa6; font-size: 0.76rem; font-weight: 800; }
.portal-message.success { color: #7ce5bb; }

.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(227, 196, 108, 0.18); padding: 20px 24px; }
.workspace-heading div { display: grid; gap: 4px; }
.workspace-heading h2 { margin: 0; color: #ffe7a0; font: 700 1.15rem Cinzel, serif; }
.workspace-heading button { min-height: 38px; border-color: rgba(255,255,255,0.16); background: transparent; color: #b9c9c1; font-size: 0.72rem; }
.bureau-order-form { display: grid; gap: 12px; padding: 16px; }
.order-fields { border: 1px solid rgba(83, 217, 167, 0.14); background: rgba(255,255,255,0.018); padding: 18px; }
.order-fields > header { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 12px; margin-bottom: 16px; }
.order-fields > header > span { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(83, 217, 167, 0.42); color: var(--green); font: 700 0.75rem Cinzel, serif; }
.order-fields header div { display: grid; gap: 3px; }
.order-fields h2 { margin: 0; color: #fff0c2; font: 700 1rem Cinzel, serif; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-grid .wide { grid-column: 1 / -1; }
.potion-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: end; gap: 12px; }
.external-potion-list { display: grid; gap: 8px; margin-top: 16px; }
.external-potion-list > p { margin: 0; color: var(--muted); text-align: center; padding: 20px; }
.external-potion-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 110px 38px; align-items: center; gap: 10px; border: 1px solid rgba(83, 217, 167, 0.15); background: #07100d; padding: 9px 10px; }
.external-potion-row div { display: grid; gap: 3px; }
.external-potion-row strong { color: #f2f8f5; }
.external-potion-row small { color: var(--muted); }
.external-potion-row > span { color: var(--gold); text-align: right; font-weight: 900; }
.external-potion-row button { width: 38px; min-height: 38px; padding: 0; border-color: rgba(255, 122, 116, 0.45); background: rgba(255, 122, 116, 0.08); color: #ffaaa6; }
.order-submit-bar { display: grid; grid-template-columns: 1fr minmax(180px, auto); align-items: center; gap: 12px; border-top: 1px solid rgba(227, 196, 108, 0.25); padding: 18px 8px 2px; }
.order-submit-bar > div { display: grid; gap: 3px; }
.order-submit-bar strong { color: #ffe17c; font: 700 1.35rem Cinzel, serif; }
.order-submit-bar .portal-message { grid-column: 1 / -1; grid-row: 2; }
.order-submit-bar > button { grid-column: 2; grid-row: 1; }
.order-success { display: grid; place-items: center; gap: 10px; padding: 52px 24px; text-align: center; }
.order-success > span { color: var(--green); font-size: 0.68rem; font-weight: 900; }
.order-success h2 { margin: 0; color: #ffe08a; font: 700 2rem Cinzel, serif; }
.order-success p { margin: 0 0 12px; color: #d9e8e0; font-weight: 900; }

@media (max-width: 760px) {
  .order-topbar { align-items: flex-start; }
  .return-login { padding: 8px; font-size: 0.65rem; }
  .code-gate form, .field-grid, .potion-add-row, .order-submit-bar { grid-template-columns: 1fr; }
  .field-grid .wide, .order-submit-bar > button, .order-submit-bar .portal-message { grid-column: 1; grid-row: auto; }
  .external-potion-row { grid-template-columns: minmax(0, 1fr) 78px 38px; }
  .external-potion-row > span { grid-column: 1; text-align: left; }
}