/* ACID TERMINAL — PromptZap design system */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Tektur:wght@400;500;600&display=swap");

:root{
  --bg:#000000;
  --surface-1:#050505;
  --surface-2:#0a0a0a;
  --text-primary:#f4f4f0;
  --text-secondary:#9a9a92;
  --text-muted:#4a4a45;
  --line:#20201d;
  --line-strong:#393934;
  --acid:#c5fe49;
  --acid-bright:#ccff4d;
  --acid-dim:#6f8f28;
  --white:#ffffff;
  --font-display:"Tektur","Chakra Petch",sans-serif;
  --font-mono:"IBM Plex Mono","Space Mono",monospace;
  --page-max:1600px;
  --ease-system:cubic-bezier(.22,1,.36,1);

  /* bridge older PromptZap tokens */
  --paper:#000000;
  --paper-2:#050505;
  --card:#000000;
  --ink:#f4f4f0;
  --ink-soft:#9a9a92;
  --ink-faint:#4a4a45;
  --tangerine:#c5fe49;
  --tangerine-btn:#c5fe49;
  --tangerine-btn-hover:#000000;
  --tangerine-text:#c5fe49;
  --gold:#c5fe49;
  --cream-text:#f4f4f0;
}

*{box-sizing:border-box}
html{background:var(--bg)!important;color-scheme:dark;scroll-behavior:smooth}
body{
  background:var(--bg)!important;
  color:var(--text-primary)!important;
  font-family:var(--font-mono)!important;
  font-weight:300;
  letter-spacing:-.01em;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.10) .7px,transparent .8px);
  background-size:48px 48px,48px 48px,16px 16px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.18) 58%,transparent 100%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.07;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.35) 4px);
}
body>*{position:relative;z-index:1}

h1,h2,h3,.h1,.h2,.h3,.mp-hero__title,.composer-title,.table-title,.auth-title{
  font-family:var(--font-display)!important;
  color:var(--text-primary)!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  letter-spacing:-.03em!important;
  line-height:1.1!important;
}

/* Marketing hero only - large display type */
.hero h1,.mp-hero__title{
  font-size:clamp(2rem,5vw,3.75rem)!important;
  line-height:1.05!important;
}
@media (min-width:721px){
  .hero h1,.mp-hero__title{max-width:14ch!important}
}
@media (max-width:720px){
  .hero h1,.mp-hero__title{max-width:none!important;line-height:1.08!important}
}

/* In-app and content pages */
body.dashboard-page h1,main h1{font-size:clamp(1.5rem,3vw,2rem)!important;max-width:none!important;text-transform:none!important}
body.dashboard-page h2,main h2{font-size:clamp(1.125rem,2vw,1.5rem)!important;max-width:none!important;text-transform:none!important}

/* Landing section headings */
.frameworks h2,.flow h2,.free h2,.everywhere h2{font-size:clamp(1.35rem,2.5vw,2rem)!important;line-height:1.15!important}
.marketplace h2{font-size:clamp(1.25rem,2.2vw,1.75rem)!important;line-height:1.2!important;text-transform:none!important}
@media (min-width:721px){
  .frameworks h2,.flow h2,.free h2,.everywhere h2{max-width:22ch!important}
  .marketplace h2{max-width:28ch!important}
}
p,li,span,div,label,input,textarea,select,button,a{font-family:var(--font-mono)}
p,li,.hero__sub,.flow__copy,.mp-hero__sub,.free__copy,.hint{color:var(--text-secondary)!important;line-height:1.55}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--acid)!important}
::selection{background:var(--acid);color:#000}
:focus-visible{outline:1px solid var(--acid)!important;outline-offset:4px!important}

/* layout */
.container,.auth-wrapper,.max-w-7xl,.mx-auto{max-width:var(--page-max)!important}
section,.hero,.flow,.frameworks,.free,.marketplace__section,.mp-hero,.mp-publish{padding-block:clamp(96px,14vw,220px)!important}
.page-grid,.hero>.container,.mp-hero__inner,.marketplace__grid{
  display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;
  column-gap:clamp(12px,1.5vw,24px)!important;padding-inline:clamp(16px,3vw,48px)!important;
}
.hero__intro{grid-column:1 / span 7!important}.prompt-demo,.acid-protocol-map{grid-column:8 / span 5!important}.mp-hero__inner>*{grid-column:1 / span 7}

/* nav */
.navbar,.site-nav,nav,.top-nav,.sidebar,.mobile-menu{
  background:rgba(0,0,0,.88)!important;border-color:var(--line)!important;box-shadow:none!important;backdrop-filter:blur(10px)
}
.nav-links a,.nav-link,.sidebar-link,.mobile-menu__link,.user-dropdown__item{
  color:var(--text-secondary)!important;text-transform:uppercase!important;font:400 .68rem/1 var(--font-mono)!important;letter-spacing:.08em!important;border-radius:0!important
}
.nav-links a.active,.nav-link[aria-current="page"],.sidebar-link.active,.mp-chip--active{
  color:#000!important;background:var(--acid)!important;padding:.35rem .55rem!important
}
.nav-logo img,.site-nav__logo img,.site-logo img,.footer-brand img{height:28px;width:auto;display:block;min-width:120px}
.auth-logo img{height:32px;width:auto;display:block;min-width:140px}
.footer-brand img{height:24px;min-width:100px}

/* Nav user menu - initials only, no duplicate name label */
.avatar-name{display:none!important}
.avatar-btn{gap:var(--avatar-btn-gap,6px)!important;padding:4px 8px 4px 4px!important}
#auth-status #signin-link.hidden{display:none!important}
#auth-status:has(#user-menu:not(.hidden)) #signin-link{display:none!important}

/* buttons */
.btn,.button-primary,button[type="submit"],.auth-submit,#generateBtn,.btn-primary,.bg-gradient-to-r,a.btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:var(--acid)!important;color:#000!important;border:1px solid var(--acid)!important;border-radius:0!important;box-shadow:none!important;
  min-height:44px;padding:12px 20px!important;font:500 .8125rem/1.25 var(--font-mono)!important;letter-spacing:.07em!important;text-transform:uppercase!important;text-align:center!important
}
.btn-lg{font-size:.875rem!important;padding:14px 28px!important;min-height:48px!important}
.btn-sm{font-size:.75rem!important;padding:10px 16px!important;min-height:40px!important}
.btn-full{width:100%!important}
.btn:hover,.button-primary:hover,button[type="submit"]:hover,.auth-submit:hover,#generateBtn:hover,.btn-primary:hover{
  background:transparent!important;color:var(--acid)!important;border-color:var(--acid)!important;transform:none!important
}
.btn-ghost,.btn-ghost-light,.btn-secondary,.sso-btn,.btn-ghost-sm,a.btn-ghost{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:transparent!important;color:var(--text-primary)!important;border:1px solid var(--line-strong)!important;border-radius:0!important;box-shadow:none!important;
  min-height:44px;padding:12px 20px!important;font:500 .8125rem/1.25 var(--font-mono)!important;letter-spacing:.07em!important;text-transform:uppercase!important;text-align:center!important
}
.btn-ghost:hover,.btn-ghost-light:hover,.btn-secondary:hover,.sso-btn:hover,.btn-ghost-sm:hover{border-color:var(--acid-dim)!important;color:var(--acid)!important;background:transparent!important}

/* panels/cards */
.tech-panel,.prompt-demo,.flow__node,.auth-card,.glass-card,.stat-card,.composer-card,.table-card,.mp-card,.mp-modal,.bg-\[\#003049\],.bg-\[\#023e58\],.bg-white,.rounded-lg,.rounded-xl,.rounded-2xl,.shadow-lg,.shadow-xl{
  background:transparent!important;border:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;color:var(--text-primary)!important
}
.prompt-demo,.auth-card,.composer-card,.table-card,.mp-modal{background:rgba(5,5,5,.72)!important}
.tech-panel:hover,.prompt-demo:hover,.flow__node:hover,.stat-card:hover,.mp-card:hover{border-color:var(--acid-dim)!important}

/* forms */
input,textarea,select,.form-input,#taskInput{
  background:#000!important;color:var(--text-primary)!important;border:1px solid var(--line-strong)!important;border-radius:0!important;box-shadow:none!important;font-family:var(--font-mono)!important
}
input::placeholder,textarea::placeholder{color:var(--text-muted)!important}
.form-label,label,.section-marker,.caption,.stat-label,.mp-sort__label,.mp-card__eyebrow,.plan-label{
  color:var(--acid)!important;font-size:.62rem!important;letter-spacing:.1em!important;text-transform:uppercase!important;font-weight:400!important
}

/* data rows + metrics */
.stat-value,#qualityScore,#wordCount,#processingTime,#statPromptsToday,#statTotalPrompts,#statAvgScore,#statTopFramework{
  color:var(--acid)!important;font-variant-numeric:tabular-nums lining-nums!important;font-family:var(--font-display)!important;font-weight:400!important
}
table,tr,td,th,.data-row,.prompt-demo__field{border-color:var(--line)!important}
th{color:var(--acid)!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-size:.65rem!important}
.badge,.badge-framework,.mp-badge,.plan-free-text{background:transparent!important;border:1px solid var(--acid-dim)!important;color:var(--acid)!important;border-radius:0!important}

/* landing protocol diagram */
.acid-protocol-map{min-height:460px;align-self:center;border:1px solid var(--line);padding:24px;background:#000}
.acid-protocol-map svg{width:100%;height:auto;display:block}
.diagram path,.diagram line,.diagram rect,.diagram circle{vector-effect:non-scaling-stroke}
.d-edge{fill:none;stroke:#2c2c28;stroke-width:1}.d-edge.secondary{stroke:var(--acid-dim)}.d-edge.active{stroke:var(--acid);stroke-width:1.5;stroke-dasharray:320;animation:acid-draw 1.4s var(--ease-system) both}.d-node{fill:#000;stroke:#2c2c28}.d-node.live{stroke:var(--acid);animation:acid-pulse 2.4s linear infinite}.d-node.term{fill:var(--white);stroke:var(--white)}
.d-label{fill:var(--text-secondary);font:400 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.d-label.hot{fill:var(--acid)}
@keyframes acid-draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}@keyframes acid-pulse{0%,100%{stroke:var(--acid-dim)}50%{stroke:var(--acid)}}

/* signal bands */
.signal-band,.free{background:var(--acid)!important;color:#000!important;min-height:34px}.signal-band *,.free *{color:#000!important}.free .btn{background:#000!important;color:var(--acid)!important;border-color:#000!important}

/* hide SaaS ornamentation */
.auth-photo,.hero__glow,.bg-gradient-to-r::before,.floating-shape{display:none!important}

@media (max-width:720px){
  body:not(.landing-page) section,body:not(.landing-page) .hero,body:not(.landing-page) .flow,body:not(.landing-page) .frameworks,body:not(.landing-page) .free,body:not(.landing-page) .mp-hero,body:not(.landing-page) .mp-publish{padding-block:88px!important}
  body:not(.landing-page) .acid-protocol-map{min-height:280px!important}
  body:not(.landing-page) .page-grid,body:not(.landing-page) .hero>.container,body:not(.landing-page) .mp-hero__inner,body:not(.landing-page) .marketplace__grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;padding-inline:16px!important}
  body:not(.landing-page) .hero__intro,body:not(.landing-page) .prompt-demo,body:not(.landing-page) .acid-protocol-map,body:not(.landing-page) .mp-hero__inner>*{grid-column:1 / -1!important}
  body:not(.landing-page) .hero h1{font-size:clamp(2rem,10vw,3.25rem)!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
