/* === OUTBOUND ANVIL — APP STYLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#09090b;--surface:#18181b;--elevated:#27272a;--border:#3f3f46;
  --text:#fafafa;--muted:#a1a1aa;--dim:#71717a;
  --accent:#f97316;--accent-hover:#ea580c;--accent-glow:rgba(249,115,22,0.15);--accent-soft:rgba(249,115,22,0.08);
  --success:#22c55e;--success-soft:rgba(34,197,94,0.1);
  --error:#ef4444;--error-soft:rgba(239,68,68,0.1);
  --warning:#eab308;--warning-soft:rgba(234,179,8,0.1);
  --font-display:'Syne',sans-serif;--font-body:'DM Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-hover)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.02em}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;border-radius:8px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all .2s;font-family:var(--font-body);text-decoration:none;color:var(--text)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--muted);background:var(--surface)}
.btn-success{background:var(--success-soft);color:var(--success);border:1px solid rgba(34,197,94,0.2)}
.btn-success:hover{background:rgba(34,197,94,0.15)}
.btn-success-solid{background:var(--success);color:#fff}
.btn-full{width:100%}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-lg{padding:14px 32px;font-size:1rem}

/* === AUTH PAGES === */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth-container{width:100%;max-width:440px}
.auth-logo{display:block;text-align:center;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--text);margin-bottom:32px}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px}
.auth-card h1{font-size:1.8rem;font-weight:700;margin-bottom:8px}
.auth-sub{color:var(--muted);margin-bottom:28px;font-size:.95rem}
.auth-form{display:flex;flex-direction:column;gap:20px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-size:.85rem;font-weight:600;color:var(--muted)}
.fg input,.fg textarea,.fg select{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-size:.95rem;color:var(--text);font-family:var(--font-body);transition:border-color .2s;resize:vertical}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--accent)}
.fg input::placeholder,.fg textarea::placeholder{color:var(--dim)}
.auth-switch{text-align:center;color:var(--muted);font-size:.9rem;margin-top:20px}
.auth-switch a{color:var(--accent);font-weight:600}
.onboarding-card{max-width:520px}
.onboarding-note{text-align:center;color:var(--dim);font-size:.85rem;margin-top:16px;font-style:italic}

/* === ALERTS === */
.alert{padding:12px 16px;border-radius:8px;font-size:.9rem;margin-bottom:16px}
.alert-error{background:var(--error-soft);color:var(--error);border:1px solid rgba(239,68,68,0.2)}

/* === APP NAV === */
.app-nav{background:rgba(9,9,11,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.nav-logo{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--text);display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-logo span{display:inline}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-links a{color:var(--muted);font-size:.9rem;font-weight:500}
.nav-links a:hover{color:var(--text)}
.nav-cta{background:var(--accent-soft) !important;color:var(--accent) !important;padding:6px 14px;border-radius:6px;font-weight:600 !important}
.nav-cta:hover{background:var(--accent-glow) !important}
.nav-right{display:flex;align-items:center;gap:16px}
.usage-pill{background:var(--elevated);border:1px solid var(--border);padding:4px 12px;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.usage-empty{color:var(--error);border-color:rgba(239,68,68,0.3);background:var(--error-soft)}
.nav-user{display:flex;align-items:center;gap:12px;font-size:.85rem}
.nav-email{color:var(--dim)}
.nav-logout{color:var(--dim);font-size:.8rem}
.nav-logout:hover{color:var(--error)}
.plan-badge{display:inline-flex;padding:2px 10px;border-radius:100px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.plan-free{background:var(--elevated);color:var(--muted)}
.plan-starter{background:var(--accent-soft);color:var(--accent)}
.plan-pro{background:rgba(168,85,247,0.1);color:#a855f7}
.plan-enterprise{background:rgba(34,197,94,0.1);color:var(--success)}

/* === APP MAIN === */
.app-main{max-width:1200px;margin:0 auto;padding:32px 24px}

/* === DASHBOARD === */
.dash-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.dash-header h1{font-size:1.8rem;font-weight:700}
.dash-sub{color:var(--muted);font-size:.95rem;margin-top:4px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;text-align:center}
.stat-val{font-family:var(--font-display);font-size:2rem;font-weight:800}
.stat-lbl{font-size:.85rem;color:var(--muted);margin-top:4px}
.stat-warn{border-color:rgba(234,179,8,0.3)}
.stat-warn .stat-val{color:var(--warning)}

/* === UPGRADE BANNER === */
.upgrade-banner{background:linear-gradient(135deg,var(--accent-soft),rgba(249,115,22,0.03));border:1px solid rgba(249,115,22,0.2);border-radius:12px;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.ub-text h3{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.ub-text p{color:var(--muted);font-size:.9rem}

/* === SECTION === */
.section{margin-bottom:32px}
.section h2{font-size:1.3rem;font-weight:700;margin-bottom:16px}

/* === CAMPAIGNS LIST === */
.campaign-list{display:flex;flex-direction:column;gap:8px}
.campaign-row{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px;transition:all .2s;text-decoration:none;color:var(--text);gap:16px}
.campaign-row:hover{border-color:var(--accent);transform:translateX(4px);color:var(--text)}
.cr-info{flex:1}
.cr-info h3{font-size:1rem;font-weight:600;margin-bottom:2px}
.cr-meta{color:var(--dim);font-size:.85rem}
.cr-date{color:var(--dim);font-size:.85rem;white-space:nowrap}
.cr-arrow{color:var(--dim);font-size:1.2rem}

/* === EMPTY STATE === */
.empty-state{text-align:center;padding:60px 24px;color:var(--muted)}
.empty-icon{font-size:2.5rem;margin-bottom:12px}
.empty-state h3{font-size:1.2rem;color:var(--text);margin-bottom:8px}
.empty-state p{margin-bottom:20px}

/* === PAGE HEADER === */
.page-header{margin-bottom:32px}
.back-link{color:var(--dim);font-size:.85rem;display:inline-block;margin-bottom:12px}
.back-link:hover{color:var(--accent)}
.page-header h1{font-size:1.8rem;font-weight:700}
.page-sub{color:var(--muted);font-size:.95rem;margin-top:4px}
.ph-row{display:flex;justify-content:space-between;align-items:flex-start}

/* === CAMPAIGN FORM === */
.campaign-form{max-width:800px}
.form-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;margin-bottom:20px}
.form-section h2{font-size:1.1rem;font-weight:700;margin-bottom:16px}

/* === TABS === */
.tab-bar{display:flex;gap:8px;margin-bottom:20px}
.tab{background:var(--bg);border:1px solid var(--border);padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all .2s}
.tab.active{background:var(--accent-soft);color:var(--accent);border-color:rgba(249,115,22,0.2)}
.tab-content{display:none}
.tab-content.active{display:block}

/* === PROSPECT ENTRY === */
.prospect-entry{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.prospect-entry:last-child{border:none;margin-bottom:0}
.prospect-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* === CSV UPLOAD === */
.csv-dropzone{border:2px dashed var(--border);border-radius:12px;padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .2s}
.csv-dropzone:hover{border-color:var(--accent)}
.csv-icon{font-size:2rem;margin-bottom:8px}
.csv-browse{color:var(--accent);cursor:pointer;font-weight:600}
.csv-hint{font-size:.8rem;color:var(--dim);margin-top:8px}

/* === FORM ACTIONS === */
.form-actions{margin-top:8px}
.form-note{color:var(--dim);font-size:.85rem;margin-top:12px}

/* === GENERATION STATUS === */
.gen-status{text-align:center;padding:60px 24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:20px}
.gen-status h3{font-size:1.2rem;margin-bottom:8px}
.gen-status p{color:var(--muted);font-size:.95rem}
.gen-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}

/* === CAMPAIGN EMAILS === */
.prospect-section{margin-bottom:32px}
.ps-header{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ps-header h3{font-size:1.1rem;font-weight:700}
.ps-meta{color:var(--dim);font-size:.85rem}
.email-sequence{display:flex;flex-direction:column;gap:12px}
.email-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:border-color .2s}
.email-card:hover{border-color:var(--elevated)}
.ec-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ec-seq{font-family:var(--font-display);font-weight:700;font-size:.9rem}
.ec-status{font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:100px;text-transform:capitalize}
.status-draft{background:var(--elevated);color:var(--muted)}
.status-approved{background:var(--success-soft);color:var(--success)}
.ec-subject{font-size:.95rem;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ec-body pre{font-family:var(--font-body);font-size:.9rem;color:var(--muted);white-space:pre-wrap;word-wrap:break-word;line-height:1.7;background:none;border:none;padding:0;outline:none}
.ec-body pre:focus{color:var(--text)}
.editable-subject{outline:none;padding:2px 4px;border-radius:4px;transition:background .2s}
.editable-subject:focus{background:var(--elevated)}
.ec-actions{display:flex;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}

/* === PRICING PAGE === */
.pricing-page{text-align:center;max-width:1000px;margin:0 auto;padding:20px 0}
.pricing-page h1{font-size:2rem;font-weight:800;margin-bottom:8px}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;text-align:left}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;position:relative;transition:all .3s}
.price-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.price-active{border-color:var(--accent)}
.price-popular{border-color:var(--accent);background:linear-gradient(180deg,rgba(249,115,22,0.06),var(--surface))}
.pc-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:3px 12px;border-radius:100px;white-space:nowrap}
.pc-tier{font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--muted);margin-bottom:10px}
.pc-price{font-family:var(--font-display);font-size:2.5rem;font-weight:800;margin-bottom:20px;line-height:1}
.pc-dollar{font-size:1.2rem;vertical-align:super;margin-right:2px}
.pc-period{font-size:.85rem;color:var(--muted);font-weight:400}
.pc-features{list-style:none;margin-bottom:24px}
.pc-features li{padding:6px 0;color:var(--muted);font-size:.85rem;border-bottom:1px solid var(--border)}
.pc-features li:last-child{border:none}
.pc-features li strong{color:var(--text)}
.pc-current{text-align:center;color:var(--accent);font-weight:600;font-size:.85rem;padding:10px}
.pricing-back{margin-top:32px;color:var(--dim);font-size:.9rem}

/* === RESPONSIVE === */
@media(max-width:768px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .prospect-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .nav-links{display:none}
  .nav-right{gap:8px}
  .nav-email{display:none}
  .dash-header{flex-direction:column}
  .upgrade-banner{flex-direction:column;text-align:center}
}