/* ============================================================
   Convrly Forms — shared design system
   Brand: navy ink, teal→blue→violet gradient, three lanes.
   Used by index.html, builder.html, responses.html.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --ink:#0d1633;         /* navy wordmark */
  --ink-soft:#3a4668;
  --blue:#2f6bff;        /* CRM lane */
  --teal:#10b886;        /* Automation lane */
  --violet:#7b3ff2;      /* AI Calling lane */
  --grad:linear-gradient(100deg,#10b886 0%,#2f6bff 52%,#7b3ff2 100%);
  --bg:#f5f7fc;
  --card:#ffffff;
  --line:#e6e9f2;
  --muted:#6a7391;
  --danger:#e4546c;
  --radius:14px;
  --shadow:0 10px 34px rgba(13,22,51,.07);
  --shadow-sm:0 2px 10px rgba(13,22,51,.05);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;margin:0}
.mono{font-family:'JetBrains Mono',monospace}

/* --- Wordmark --- */
.wordmark{font-family:'Bricolage Grotesque';font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.wordmark .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lanes{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.04em}
.lanes .crm{color:var(--blue)} .lanes .auto{color:var(--teal)} .lanes .ai{color:var(--violet)}
.lanes .sep{color:var(--line)}

/* --- Buttons --- */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-family:Inter;transition:.15s;white-space:nowrap}
.btn:hover{border-color:#cfd6e6}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.primary{border:none;background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(47,107,255,.25)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.solid{border:none;background:var(--blue);color:#fff}
.btn.ghost{border:none;background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
.btn.danger{color:var(--danger);border-color:#f3d3da}
.btn:disabled{opacity:.55;cursor:not-allowed}
.icon-btn{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}
.icon-btn:hover{background:#eef1f8;color:var(--ink)}

/* --- Inputs --- */
.input,select.input,textarea.input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;font-family:Inter;background:#fff;color:var(--ink);outline:none;transition:.15s}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
textarea.input{resize:vertical;min-height:80px}
.label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.field{margin-bottom:16px}

/* --- Pills --- */
.pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;text-transform:capitalize}
.pill.published{background:#e6f6ef;color:#0e9c6b}
.pill.draft{background:#fff2df;color:#b57d1a}
.pill.archived{background:#eef0f4;color:#6a7391}

/* --- Cards --- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* --- Layout shell --- */
.shell{display:flex;min-height:100vh}
.side{width:76px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;padding-top:18px;gap:6px;position:sticky;top:0;height:100vh}
.side .mark{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;margin-bottom:12px}
.nav-btn{width:48px;height:48px;border-radius:12px;border:none;background:transparent;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;position:relative}
.nav-btn.on{background:#eef3ff;color:var(--blue)}
.nav-btn.on::before{content:"";position:absolute;left:-18px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--grad)}
.main{flex:1;min-width:0}

.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:14px}
.container{max-width:1080px;margin:0 auto;padding:30px 26px}

/* --- Stats --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{padding:18px 20px}
.stat .num{font-family:'Bricolage Grotesque';font-weight:800;font-size:32px;line-height:1}
.stat .lbl{color:var(--muted);font-size:13px;margin-top:6px}

/* --- Form rows --- */
.row{display:flex;align-items:center;gap:16px;padding:16px 20px}
.row + .row{border-top:1px solid var(--line)}
.row .fico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.row .meta{color:var(--muted);font-size:12.5px;margin-top:3px}

/* --- Toast --- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;z-index:200;
  transition:.25s;box-shadow:var(--shadow);pointer-events:none;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger)}

/* --- Modal --- */
.overlay{position:fixed;inset:0;background:rgba(13,22,51,.42);display:none;place-items:center;z-index:100;padding:20px}
.overlay.show{display:grid}
.modal{background:#fff;border-radius:18px;padding:26px;width:440px;max-width:100%;box-shadow:var(--shadow)}
.modal h2{font-size:20px;margin-bottom:6px}
.modal .sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* --- Auth screen --- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 500px at 50% -10%, #eaf0ff, transparent), var(--bg)}
.auth-card{width:400px;max-width:100%;padding:32px}
.auth-logo{text-align:center;margin-bottom:22px}
.auth-tabs{display:flex;gap:6px;background:#eef1f8;padding:4px;border-radius:12px;margin-bottom:20px}
.auth-tab{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);border:none;background:transparent}
.auth-tab.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}

.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:52px;text-align:center;color:var(--muted);background:#fff}
.spinner{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center-load{display:grid;place-items:center;padding:60px}

@media(max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .side{width:60px}
  .row{flex-wrap:wrap}
}