/* ============================================================
   HTML Presentation - dark theme design system
   Palette lifted from the product reference: near-black navy
   canvas, blue -> violet brand gradient, teal/pink/amber accents.
   ============================================================ */

:root {
  --bg: #05060f;
  --bg-soft: #080a18;
  --surface: #0e1124;
  --surface-2: #141834;
  --surface-3: #1b2044;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f7f8fc;
  --muted: #98a2b8;
  --dim: #6a7391;

  --blue: #4f7bff;
  --violet: #8b5cf6;
  --brand: linear-gradient(96deg, #4f7bff 0%, #8b5cf6 100%);
  --brand-soft: linear-gradient(96deg, rgba(79, 123, 255, 0.16), rgba(139, 92, 246, 0.16));

  --teal: #22d3c5;
  --pink: #f43f6e;
  --amber: #fbbf24;
  --green: #34d399;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-glow: 0 10px 34px -12px rgba(79, 123, 255, 0.55);
  --shadow-card: 0 18px 48px -28px rgba(0, 0, 0, 0.9);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Aurora glow + faint starfield, mirroring the reference hero. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(79, 123, 255, 0.20), transparent 60%),
    radial-gradient(760px 420px at 88% 6%, rgba(139, 92, 246, 0.16), transparent 62%),
    radial-gradient(700px 500px at 50% 108%, rgba(34, 211, 197, 0.08), transparent 60%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1.1px 1.1px at 18px 24px, rgba(255, 255, 255, 0.30), transparent),
    radial-gradient(1px 1px at 118px 76px, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.2px 1.2px at 208px 158px, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1px 1px at 62px 196px, rgba(255, 255, 255, 0.18), transparent);
  background-size: 260px 240px;
}

/* --------------------------------------------------------- typography */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.05rem; }

p { margin: 0; }

.grad-text {
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lead   { color: var(--muted); font-size: 1rem; }
.muted  { color: var(--muted); }
.dim    { color: var(--dim); }
.small  { font-size: 0.82rem; }
.mono   { font-family: var(--mono); font-size: 0.84rem; }
.nowrap { white-space: nowrap; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, opacity 0.18s ease;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

.btn-primary { background: var(--brand); box-shadow: var(--shadow-glow); }
.btn-primary:not(:disabled):hover { box-shadow: 0 14px 40px -10px rgba(110, 106, 250, 0.75); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-strong);
}
.btn-secondary:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-ghost { color: var(--muted); padding: 8px 12px; }
.btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.btn-danger { color: #ffb3c4; border-color: rgba(244, 63, 110, 0.35); }
.btn-danger:hover { background: rgba(244, 63, 110, 0.14); border-color: rgba(244, 63, 110, 0.6); }

.btn-sm { padding: 7px 13px; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* Any icon inside any button.
   An inline SVG that has a viewBox but no width/height attributes collapses to
   zero width, while still taking up a flex slot and the button's 8px gap. That
   silently knocks the label off centre, so size them here rather than relying
   on every icon remembering its own attributes.
   Must stay ABOVE .btn-icon svg: same specificity, so source order decides. */
.btn svg { flex: 0 0 auto; width: 14px; height: 14px; display: block; }

/* Square-ish button holding only an icon; stretches to match a sibling input. */
.btn-icon { padding-left: 11px; padding-right: 11px; }
.btn-icon svg { width: 15px; height: 15px; display: block; }

/* Momentary confirmation after a copy, shown on the button rather than as a
   banner so nothing in the page shifts. Covers .icon-btn too. */
.btn.is-ok,
.icon-btn.is-ok {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(52, 211, 153, 0.14);
  color: #9beecd;
}
.btn.is-fail,
.icon-btn.is-fail {
  border-color: rgba(244, 63, 110, 0.55);
  background: rgba(244, 63, 110, 0.14);
  color: #ffc0cf;
}

/* ------------------------------------------------------------- inputs */

.field { display: block; margin-bottom: 16px; }

.field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.input,
textarea.input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: rgba(5, 6, 15, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.input::placeholder { color: var(--dim); }

.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(79, 123, 255, 0.18);
}

textarea.input { resize: vertical; min-height: 76px; line-height: 1.55; }

/* Wraps rather than crushing the input on narrow screens. */
.input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.input-row .input { flex: 1 1 150px; min-width: 0; }
.input-row .btn { flex: 0 0 auto; }

.hint { margin-top: 6px; color: var(--dim); font-size: 0.78rem; }

/* Input with a trailing action (eye toggle) tucked inside its right edge. */
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-right: 44px; }
.input-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.input-eye:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.input-eye svg { display: block; }

/* -------------------------------------------------------------- cards */

.card {
  background: linear-gradient(180deg, rgba(20, 24, 52, 0.72), rgba(14, 17, 36, 0.72));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px);
}

.card-pad { padding: 22px; }

/* --------------------------------------------------------------- chip */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chip-brand { background: var(--brand-soft); border-color: rgba(139, 92, 246, 0.35); color: #cfd6ff; }
.chip-teal  { background: rgba(34, 211, 197, 0.12); border-color: rgba(34, 211, 197, 0.32); color: #8ff0e6; }
.chip-amber { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.32); color: #fcd97a; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------- layout */

.shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 6, 15, 0.78);
  backdrop-filter: blur(12px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand-lockup:hover { text-decoration: none; }
.brand-lockup img { width: 28px; height: 28px; border-radius: 7px; }

.spacer { flex: 1; }

/* ------------------------------------------------------------- alerts */

.alert {
  display: none;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  margin-bottom: 16px;
}
.alert.show { display: block; }
.alert-error   { background: rgba(244, 63, 110, 0.12); border-color: rgba(244, 63, 110, 0.4); color: #ffc0cf; }
.alert-success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); color: #9beecd; }
.alert-info    { background: rgba(79, 123, 255, 0.12); border-color: rgba(79, 123, 255, 0.4); color: #c3d0ff; }

/* ------------------------------------------------------------ spinner */

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: rgba(3, 4, 10, 0.76);
  backdrop-filter: blur(5px);
  /* Deliberately NOT the scroll container. Centring an over-tall child in a
     scrollable flex parent makes its top overflow unreachable, which hides the
     modal header. The body scrolls internally instead. */
  overflow: hidden;
  overscroll-behavior: contain;
}
.modal-backdrop.show { display: flex; }

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  /* Never taller than the viewport, so the header and footer always stay put. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  animation: rise 0.22s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;            /* lets a flex child actually overflow */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px;
}

.modal-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
}

/* Locked while a modal is open so the page behind cannot scroll and its
   scrollbar does not sit alongside the modal's own. */
body.modal-open { overflow: hidden; }

/* ---------------------------------------------------- themed scrollbars */

.scroll-y {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.scroll-y::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.17);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.scroll-y::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: content-box;
}

/* ----------------------------------------------------------- dropzone */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 20px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(5, 6, 15, 0.5);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--blue);
  background: rgba(79, 123, 255, 0.08);
}
.dropzone.has-file { border-style: solid; border-color: rgba(52, 211, 153, 0.55); }

/* ----------------------------------------------------------- utilities */

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.gap-6   { gap: 6px; }  .gap-8  { gap: 8px; }
.gap-10  { gap: 10px; } .gap-12 { gap: 12px; }
.gap-16  { gap: 16px; } .gap-24 { gap: 24px; }
.wrap    { flex-wrap: wrap; }
.center  { text-align: center; }
.hidden  { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
  body { font-size: 14.5px; }

  .shell { padding: 0 16px; }
  .card-pad { padding: 18px; }

  .modal-backdrop { padding: 12px; }
  .modal {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .modal-head { padding: 16px 17px 12px; }
  .modal-body { padding: 15px 17px; }
  .modal-foot { padding: 12px 17px 16px; }
  /* Buttons share the row evenly instead of bunching at the right edge. */
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 400px) {
  .btn { padding: 10px 15px; font-size: 0.88rem; }
  .btn-sm { padding: 7px 11px; }
  .card-pad { padding: 15px; }
}

/* Short viewports (landscape phones): reclaim vertical space. */
@media (max-height: 560px) {
  .modal-head { padding-top: 14px; padding-bottom: 10px; }
  .modal-foot { padding-bottom: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}