/* Image to CSS — Unified stylesheet (landing + app) — no gradients */
:root{
  --bg:#f6f7f9;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --accent:#0ea5e9;
  --accent-ink:#05212c;
  --radius:14px;
  --shadow:0 2px 18px rgba(0,0,0,.06);
  --maxw:1120px;
  --headerH:64px;
  --footerH:56px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  overflow:hidden; /* landing: no scroll */
}
/* App page can scroll */
.is-app{ overflow:auto; }

/* Layout */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Header */
.header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--border)}
.nav{height:var(--headerH);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--ink)}
.brand b{font-weight:800;letter-spacing:.2px}

/* === New nav layout: centered links + right auth slot === */
.links{
  position:relative;
  display:flex; align-items:center; flex:1;
}
.nav-center{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
}
.nav-auth{ margin-left:auto; display:flex; align-items:center; }

/* Link/button base styles (work for buttons inside .links too) */
.links a, .links button{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
  background:none; border:0; cursor:pointer; font:inherit;
}
.links a:hover, .links button:hover{ color:var(--ink); background:#f2f4f7 }

/* Buttons */
.btn{appearance:none;border:1px solid var(--border);background:#fff;color:var(--ink);
  padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--ink);color:#fff;border-color:transparent}
.btn.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.small{padding:8px 10px;font-size:13px}
.btn.block{display:inline-flex;justify-content:center;width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Hero (fills viewport between header & footer) */
.hero{min-height:calc(100vh - var(--headerH) - var(--footerH));display:flex;align-items:center}
h1{font-size:38px;line-height:1.15;margin:6px 0 10px}
.lead{color:var(--muted);margin:0 0 14px}
.kicker{
  display:inline-flex;gap:8px;align-items:center;
  font-size:12px;color:#0b3b4f;background:#e6f6fd;border:1px solid #c8e9f8;border-radius:999px;
  padding:6px 10px;font-weight:700;
}
.k-dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}

/* Cards / visuals */
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.hero-visual{border:1px solid var(--border);border-radius:12px;background:#fbfbfc;padding:14px}

/* “Photo/snipping” frame */
.snip-frame{position:relative;border:2px dashed var(--border);border-radius:12px;padding:12px;background:#fff}
.snip-frame::before{
  content:"✂";position:absolute;top:-12px;left:-12px;width:24px;height:24px;border-radius:999px;
  background:#fff;border:1px solid var(--border);display:grid;place-items:center;font-size:12px;color:var(--muted);
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
/* Drag highlight */
.snip-frame.drop{cursor:pointer;transition:background .2s ease,border-color .2s ease}
.snip-frame.drop.drag{border-color:var(--accent);background:#f0fbff}

/* Demo component */
.demo-card{
  --d-bg:#ffffff; --d-ink:#0f172a; --d-sub:#64748b; --d-accent:#0ea5e9; --d-border:#e5e7eb;
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--d-border);border-radius:12px;background:var(--d-bg);padding:14px;
  box-shadow:0 1px 10px rgba(0,0,0,.04);
  max-width:520px;
}
.demo-avatar{width:56px;height:56px;border-radius:50%;background:#e2f2fb;border:1px solid var(--d-border);
  display:grid;place-items:center;color:#093247;font-weight:800}
.demo-title{margin:0 0 2px;color:var(--d-ink);font-weight:700}
.demo-sub{margin:0;color:var(--d-sub);font-size:13px}
.demo-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.demo-tag{font-size:12px;color:#0b3b4f;background:#e6f6fd;border:1px solid #c8e9f8;padding:4px 8px;border-radius:999px}
.demo-cta .btn{background:var(--d-accent);color:var(--accent-ink);border-color:transparent}

/* Map generated tokens to the demo (so the card reflects :root variables) */
.token-card{
  --d-bg: var(--paper);
  --d-ink: var(--color-2, #0f172a);
  --d-accent: var(--color-1, #0ea5e9);
  --d-border: var(--color-3, #e5e7eb);
}

/* Code block */
.code{
  background:#0a0c10;color:#e5e7eb;font:13px/1.45 ui-monospace, Menlo, Consolas, monospace;
  border-radius:10px;border:1px solid #1f2937;padding:12px;
  overflow:auto;height:220px;white-space:pre;contain:content;
}
/* Taller code area on app page */
.code#output{height:280px}

/* Drop zone inner */
.drop-inner{min-height:340px;display:grid;place-items:center;text-align:center;color:var(--muted);padding:12px}
.drop-inner>div{max-width:90%}
.drop-inner .hint{margin-top:6px;font-size:13px;color:var(--muted)}
.drop-inner .btn-row{display:flex;gap:10px;justify-content:center;margin-top:10px}

/* Previewed image */
.preview-img{max-width:100%;max-height:420px;border-radius:8px;display:block}

/* Output header + copy button -->
*/.outputbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.outputbar .label{color:var(--muted);font-size:13px}

/* Footer */
.footer{height:var(--footerH);display:flex;align-items:center;border-top:1px solid var(--border);
  padding:0 0;color:var(--muted);background:#fff}

/* Responsive */
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  h1{font-size:32px}
}
@media (max-height:680px){
  body{overflow:auto;} /* safety: re-enable scroll if viewport is too short */
}
@media (max-width:640px){
  h1{font-size:28px}
}

/* ===================== */
/* App-specific additions */
/* ===================== */

.app-grid{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:980px){ .app-grid{ grid-template-columns:1fr } }

.app-panel{ height:560px; display:flex; flex-direction:column; min-width:0; }
.app-panel .code#output{ flex:1 1 auto; height:auto; min-height:180px; }
#errors{ height:120px; border-color:rgba(239,68,68,.35); color:#ffe1e1; background:#2a0b0b; }

.app-panel .snip-frame{ height:100%; display:grid; place-items:center; }

.snip-frame .preview-img{ display:none; max-width:100%; max-height:100%; object-fit:contain; }
.snip-frame.has-image .preview-img{ display:block; }
.snip-frame.has-image .drop-inner{ display:none; }

.overlay{
  position:absolute; inset:12px;
  display:grid; place-items:center;
  background:rgba(2,6,23,.45);
  border-radius:inherit;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
  z-index:2;
}
.snip-frame.has-image:hover .overlay,
.snip-frame.has-image:focus-within .overlay{ opacity:1; pointer-events:auto; }

.code{ max-width:100%; overflow-x:auto; }

.controls{ display:flex; gap:10px; align-items:center; flex-wrap:nowrap; min-width:0; }
.controls .spacer{ flex:1 1 auto; min-width:0; }
#statusLead{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.controls .btn{ min-height:44px; }
.api-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; line-height:1.55; white-space:nowrap;
  min-height:44px;
  border-radius:999px; background:#e6f6fd; border:1px solid #c8e9f8;
  color:#0b3b4f; font-weight:700;
}
.api-pill b{ font-weight:800; }

/* Loading UI */
.loading-scrim{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,23,42,.42); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.loading-scrim.open{ opacity:1; pointer-events:auto; }
.loading-card{
  display:flex; align-items:center; gap:12px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:14px 16px; min-width:260px;
}
.loading-title{ font-weight:800; }
.loading-sub{ font-size:12px; color:var(--muted); }
.spinner{
  width:24px; height:24px; border-radius:999px;
  border:3px solid #e5e7eb; border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* ================ */
/* Auth Modal UI    */
/* ================ */

.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.modal.open{ display:flex; }
.modal__scrim{
  position:absolute; inset:0; background:rgba(2,6,23,.45); backdrop-filter: blur(2px);
}
.modal__dialog{
  position:relative; z-index:1;
  width:100%; max-width: 420px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.modal__close{
  position:absolute; top:8px; right:10px;
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--border); background:#fff; cursor:pointer;
  font-size:18px; line-height:1;
}
.modal__close:hover{ background:#f7f8fa; }
.modal__header h2{ margin:4px 0 6px; font-size:22px; }
.modal__desc{ color:var(--muted); margin:0 0 12px; }

/* Tabs */
.modal__tabs{ display:flex; gap:8px; margin-bottom:12px; }
.tab{
  appearance:none; border:1px solid var(--border); background:#fff; color:#var(--muted);
  padding:8px 10px; border-radius:10px; font-weight:700; cursor:pointer;
}
.tab.is-active{ color:var(--ink); background:#f7f8fa; border-color:#dfe3ea; }

/* Form */
.form{ display:grid; gap:10px; }
.label{ font-size:13px; color:var(--muted); font-weight:700; }
.input{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:#fff; outline:none;
}
.input:focus{ border-color:#c5c9d1; box-shadow:0 0 0 2px rgba(14,165,233,.18); }
.row{ display:flex; gap:10px; align-items:end; }
.row-end{ margin-left:auto; }
.link{ color:#0b3b4f; text-decoration:none; font-weight:700; }
.link:hover{ text-decoration:underline; }
.or{ display:flex; align-items:center; gap:14px; margin:10px 0; color:var(--muted); }
.or::before, .or::after{ content:""; height:1px; flex:1; background:var(--border); }

/* Google button */
.btn.google{
  display:inline-flex; align-items:center; gap:10px;
  border-color:#dfe3ea; background:#fff; color:#1f2937;
}
.btn.google:hover{ background:#f7f8fa; }

/* ===================== */
/* Account dropdown      */
/* ===================== */
.account { position: relative; }
.account-btn[aria-expanded="true"] { background:#f2f4f7; }
.account-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width: 170px; padding:6px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow: var(--shadow); display:none; z-index:60;
}
.account-menu.open{ display:block; }
.account-menu .item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:0; background:none; text-align:left;
  border-radius:8px; cursor:pointer; color:var(--ink);
}
.account-menu .item:hover{ background:#f7f8fa; }

/* Responsive adjustments for centered nav */
@media (max-width:720px){
  .nav-center{ position:static; transform:none; margin:0 auto; }
  .links{ justify-content:space-between; }
}