/* DevFlow design tokens — dark AI-builder aesthetic (bolt.new / Lovable / Base44 direction) */
:root {
  --bg: #09090B;
  --panel: #0E0E12;
  --card: #131318;
  --card-hover: #18181F;
  --text: #F4F4F6;
  --muted: #9EA0AA;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --brand: #9B111E;
  --brand-2: #EF4444;
  --grad: linear-gradient(135deg, #9B111E, #EF4444);
  --brand-soft: rgba(155, 17, 30, 0.18);

  --ok: #34D399;
  --ok-soft: rgba(52, 211, 153, 0.12);
  --warn: #FBBF24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --error: #F87171;
  --error-soft: rgba(248, 113, 113, 0.12);

  --radius: 12px;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --glow: 0 0 0 1px rgba(220, 38, 38, .45), 0 0 40px rgba(155, 17, 30, .25);

  /* legacy aliases (older page styles reference these) */
  --paper: var(--bg);
  --ink: var(--text);
  --petrol: var(--brand);
  --petrol-dark: #7A0C16;
  --petrol-soft: var(--brand-soft);
  --amber: var(--warn);
  --amber-soft: var(--warn-soft);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
}

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.025em; font-weight: 650; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); line-height: 1.06; margin: 0 0 .5em; }
h2 { font-size: 1.3rem; margin: 0 0 .5em; }
h3 { font-size: 1rem; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
a { color: #F87171; }
code { background: var(--brand-soft); padding: .1em .35em; border-radius: 5px; font-size: .9em; }

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

.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 500; color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px;
  padding: .32rem .85rem;
  background: rgba(255, 255, 255, .03);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---- Ambient glow (hero pages) ---- */
.glow-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 420px at 50% -8%, rgba(155, 17, 30, .3), transparent 70%),
    radial-gradient(500px 380px at 82% 12%, rgba(236, 72, 153, .10), transparent 70%),
    var(--bg);
}

/* ---- Nav ---- */
.nav {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .75rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 11, .75);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.nav .brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em;
  color: var(--text); text-decoration: none; display: flex; align-items: center; gap: .5rem;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(220, 38, 38, .5);
}
.nav .links { display: flex; gap: 1.1rem; align-items: center; margin-left: auto; }
.nav a.navlink { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.nav a.navlink:hover, .nav a.navlink[aria-current] { color: var(--text); }

/* ---- Layout helpers ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.5rem); }
.grid { display: grid; gap: 1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card.lifted { box-shadow: var(--shadow); }

/* ---- Prompt composer (the signature element) ---- */
.promptbox {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 1rem 1rem .75rem;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, border-color .2s ease;
  text-align: left;
}
.promptbox:focus-within { border-color: transparent; box-shadow: var(--glow); }
.promptbox textarea {
  width: 100%; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 1.02rem; resize: none; min-height: 92px;
  padding: 0;
}
.promptbox textarea:focus { outline: none; }
.promptbox textarea::placeholder { color: #6B6D78; }
.promptbox .foot {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .5rem;
}
.sendbtn {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .9rem var(--font-body); color: #fff;
  background: var(--grad); border: 0; border-radius: 10px;
  padding: .55rem 1.05rem; cursor: pointer;
  box-shadow: 0 4px 18px rgba(155, 17, 30, .45);
}
.sendbtn:hover { filter: brightness(1.1); }
.sendbtn[disabled] { opacity: .55; cursor: not-allowed; }

.suggs { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.sugg {
  font: 500 .8rem var(--font-body); color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); border-radius: 99px;
  padding: .38rem .85rem; cursor: pointer;
}
.sugg:hover { color: var(--text); border-color: var(--line-strong); background: var(--card-hover); }

/* ---- Forms ---- */
label { display: block; font-weight: 550; font-size: .84rem; margin: 0 0 .3rem; color: var(--text); }
input[type="text"], input[type="url"], input[type="email"], textarea, select {
  width: 100%;
  font: inherit; color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .55rem .7rem;
}
textarea { resize: vertical; min-height: 90px; }
input::placeholder, textarea::placeholder { color: #6B6D78; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
select option { background: var(--card); color: var(--text); }
input[type="file"] { color: var(--muted); font-size: .88rem; }

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 550 .9rem var(--font-body);
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: .55rem 1rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--card-hover); border-color: rgba(255, 255, 255, .22); }
.btn.primary {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 18px rgba(155, 17, 30, .4);
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { color: var(--error); border-color: rgba(248, 113, 113, .25); background: transparent; }
.btn.danger:hover { background: var(--error-soft); }
.btn.sm { padding: .32rem .7rem; font-size: .8rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Status chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 99px;
}
.chip.ready { background: var(--ok-soft); color: var(--ok); }
.chip.generating { background: var(--warn-soft); color: var(--warn); }
.chip.error { background: var(--error-soft); color: var(--error); }
.chip.published { background: var(--brand-soft); color: #F87171; }
.chip.draft { background: rgba(255, 255, 255, .05); color: var(--muted); border: 1px solid var(--line); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.generating .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---- Tables (admin) ---- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }

/* ---- Toast + dialog ---- */
.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  background: var(--card); color: var(--text);
  border: 1px solid var(--line-strong);
  padding: .6rem 1.1rem; border-radius: 10px; font-size: .9rem;
  z-index: 200; box-shadow: var(--shadow);
}
.toast.error { border-color: rgba(248, 113, 113, .4); color: var(--error); }

dialog {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 1.4rem; max-width: 30rem; width: calc(100vw - 2rem);
  box-shadow: var(--shadow);
  background: var(--card); color: var(--text);
}
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }

/* ---- Feedback launcher ---- */
.feedback-fab {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 100;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 99px;
  font: 550 .84rem var(--font-body);
  padding: .55rem 1rem; cursor: pointer;
  box-shadow: var(--shadow);
}
.feedback-fab:hover { background: var(--card-hover); }

/* ---- Empty states ---- */
.empty {
  text-align: center; padding: 3rem 1rem;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--muted);
}

/* ---- Utility ---- */
.hidden { display: none !important; }
.mono { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: .85em; }

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