@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* --- brand (carried over from the effySalesbook / Nanovate family) --- */
  --navy:#0F1B2D; --navy2:#1A2D45; --navy3:#0A0F1E;
  --gold:#C8973A; --gold2:#E8B55A; --gold-light:#FDF4E7; --gold-border:#E8D5A3;

  /* --- this app runs in daylight at a stall: light surface for outdoor legibility --- */
  --surface:#F7F5F0; --card:#FFFFFF;
  --ink:#14202E; --ink2:#4A5568; --ink3:#8B96A3;
  --border:#E7E2D8; --border2:#D7D0C2;

  --hot:#D8483D; --hot-bg:#FDEDEB;
  --warm:#C8973A; --warm-bg:#FBF1E1;
  --cold:#3B6FA0; --cold-bg:#EAF1F8;
  --ok:#2F9E58; --ok-bg:#EAF7EF;
  --offline:#B6791E; --offline-bg:#FCF1DD;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(15,27,43,.06), 0 1px 1px rgba(15,27,43,.04);
  --shadow-2:0 8px 24px rgba(15,27,43,.10);
  --nav-h:64px; --header-h:56px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--surface); color:var(--ink);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit}
.display{font-family:'Clash Display',sans-serif;letter-spacing:-.5px}
.accent{font-family:'Instrument Serif',serif;font-style:italic}

/* ---------- Login hero ---------- */
.login-hero{position:relative;height:38vh;min-height:230px;max-height:340px;overflow:hidden;background:var(--navy)}
.login-hero img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.login-hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,43,.15) 0%,rgba(15,27,43,.55) 55%,var(--surface) 100%)}
.login-hero-brand{position:absolute;left:20px;bottom:18px;display:flex;align-items:center;gap:10px;color:#fff}
.login-hero-brand .brand-mark{width:38px;height:38px;border-radius:11px;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.login-hero-brand .brand-mark i{color:var(--navy2);font-size:19px}
.login-hero-brand span{font-family:'Clash Display',sans-serif;font-size:17px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.login-body{padding:22px 16px 40px;margin-top:-22px;position:relative}

/* ---------- App shell ---------- */
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--surface)}
.app-header{
  position:sticky;top:0;z-index:20;height:var(--header-h);display:flex;align-items:center;gap:12px;
  padding:0 16px;background:var(--navy);color:#fff;
}
.app-header .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.app-header .brand-mark{width:30px;height:30px;border-radius:9px;background:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-header .brand-mark i{color:var(--navy2);font-size:15px}
.app-header h1{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header .stall{font-size:11px;color:rgba(255,255,255,.55)}
.icon-btn{width:36px;height:36px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn:active{background:rgba(255,255,255,.18)}

.screen{flex:1;padding:16px 16px 90px;display:none}
.screen.active{display:block}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--nav-h);
  max-width:560px;margin:0 auto;display:flex;background:#fff;border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;cursor:pointer;color:var(--ink3);font-size:11px;font-weight:600}
.nav-item i{font-size:21px}
.nav-item.active{color:var(--gold)}
.nav-item .fab-wrap{width:46px;height:46px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-top:-22px;box-shadow:var(--shadow-2)}
.nav-item .fab-wrap i{color:var(--gold);font-size:22px}

/* ---------- Connectivity banner ---------- */
.sync-banner{
  display:none;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r);
  background:var(--offline-bg);color:var(--offline);font-size:12.5px;font-weight:600;margin-bottom:14px;
}
.sync-banner.show{display:flex}
.sync-banner.syncing{background:var(--cold-bg);color:var(--cold)}
.sync-banner i{font-size:16px;flex-shrink:0}
.sync-banner button{margin-left:auto;background:none;border:1px solid currentColor;border-radius:var(--r-pill);padding:4px 10px;font-size:11px;font-weight:700;color:inherit;cursor:pointer}

/* ---------- Generic ---------- */
.section-title{font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin:22px 0 10px}
.section-title:first-child{margin-top:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r);padding:13px 18px;font-size:14px;font-weight:700;cursor:pointer;width:100%}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:active{background:var(--gold2)}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--border2)}
.btn-sm{padding:9px 14px;font-size:13px;width:auto}
.btn[disabled]{opacity:.5}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--border2);border-radius:var(--r-sm);padding:11px 12px;font-size:14.5px;color:var(--ink);background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold-border);border-color:var(--gold)}
.field textarea{resize:vertical;min-height:70px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 13px;border-radius:var(--r-pill);border:1.5px solid var(--border2);font-size:12.5px;font-weight:600;color:var(--ink2);background:#fff;cursor:pointer}
.chip.selected{background:var(--navy);border-color:var(--navy);color:#fff}
.tabs{display:flex;gap:6px;background:#EFEAE0;border-radius:var(--r-pill);padding:4px;margin-bottom:18px}
.tab{flex:1;text-align:center;padding:9px 0;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;border:none;background:none}
.tab.active{background:#fff;color:var(--navy);box-shadow:var(--shadow-1)}
.empty{text-align:center;padding:50px 20px;color:var(--ink3)}
.empty i{font-size:34px;color:var(--border2);margin-bottom:10px;display:block}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;box-shadow:var(--shadow-2);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1}

/* ---------- Stat tiles (dashboard) ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.stat-tile .n{font-family:'Clash Display',sans-serif;font-size:28px;color:var(--navy);line-height:1}
.stat-tile .l{font-size:12px;color:var(--ink2);margin-top:4px}
.cta-capture{
  margin-top:18px;display:flex;align-items:center;gap:14px;background:var(--navy);border-radius:var(--r-lg);
  padding:18px;color:#fff;cursor:pointer;background-image:radial-gradient(circle at 100% 0%,rgba(200,151,58,.25),transparent 60%);
}
.cta-capture .ic{width:46px;height:46px;border-radius:13px;background:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cta-capture .ic i{color:var(--navy2);font-size:22px}
.cta-capture h3{font-size:15px;font-weight:700;margin-bottom:2px}
.cta-capture p{font-size:12px;color:rgba(255,255,255,.6)}

/* ---------- Signature element: the visitor "stall badge" card ---------- */
.badge-card{
  position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 16px 14px;margin-bottom:10px;cursor:pointer;
  overflow:visible;
}
.badge-card::before{
  /* the die-cut "lanyard" notch every show badge has */
  content:'';position:absolute;top:-1px;left:24px;width:22px;height:11px;background:var(--surface);
  border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;
}
.badge-card .seal{
  position:absolute;top:14px;right:14px;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 3px var(--card);
}
.badge-card .seal.hot{background:var(--hot)}
.badge-card .seal.warm{background:var(--warm)}
.badge-card .seal.cold{background:var(--cold)}
.badge-card .avatar{width:42px;height:42px;border-radius:11px;background:var(--gold-light);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.badge-card .body{flex:1;min-width:0}
.badge-card .name{font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:1px;padding-right:18px}
.badge-card .org{font-size:12.5px;color:var(--ink2);margin-bottom:7px}
.badge-card .meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stage-pill{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-pill)}
.stage-pill.new{background:var(--cold-bg);color:var(--cold)}
.stage-pill.contacted{background:#F1ECFB;color:#6B46C1}
.stage-pill.interested{background:var(--warm-bg);color:var(--warm)}
.stage-pill.meeting_scheduled{background:#E3F2EE;color:#1F7A5C}
.stage-pill.proposal_sent{background:#FDF1E3;color:#B5650A}
.stage-pill.converted{background:var(--ok-bg);color:var(--ok)}
.stage-pill.lost{background:var(--hot-bg);color:var(--hot)}
.method-tag{font-size:11px;color:var(--ink3);display:inline-flex;align-items:center;gap:3px}

/* ---------- Lead pipeline stepper ---------- */
.pipeline-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;-ms-overflow-style:none;scrollbar-width:none}
.pipeline-scroll::-webkit-scrollbar{display:none}
.pipeline-chip{flex-shrink:0;padding:8px 14px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--border2);font-size:12.5px;font-weight:700;color:var(--ink2);white-space:nowrap;cursor:pointer}
.pipeline-chip .ct{margin-left:6px;opacity:.6}
.pipeline-chip.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- Capture tabs / scanner ---------- */
.scan-frame{position:relative;width:100%;aspect-ratio:1/1;background:#000;border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px}
.scan-frame video{width:100%;height:100%;object-fit:cover}
.scan-reticle{position:absolute;inset:14%;border:2.5px solid var(--gold);border-radius:var(--r);box-shadow:0 0 0 2000px rgba(0,0,0,.35)}
.scan-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:12.5px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.card-photo-input{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:2px dashed var(--border2);border-radius:var(--r-lg);padding:36px 16px;color:var(--ink3);background:#fff;cursor:pointer;text-align:center}
.card-photo-input i{font-size:30px}
.ocr-progress{font-size:12.5px;color:var(--ink2);text-align:center;margin:10px 0}

/* ---------- Visitor detail ---------- */
.detail-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.detail-header .avatar{width:56px;height:56px;border-radius:14px;background:var(--gold-light);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;flex-shrink:0}
.detail-header h2{font-size:18px;font-weight:700}
.detail-header .org{font-size:13px;color:var(--ink2)}
.info-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.info-row:last-child{border-bottom:none}
.info-row i{color:var(--ink3);width:18px;text-align:center}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.cta-grid button{padding:10px;border-radius:var(--r-sm);border:1.5px solid var(--border2);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;text-align:left;display:flex;align-items:center;gap:7px}
.cta-grid button.selected{background:var(--navy);border-color:var(--navy);color:#fff}
.note-item{padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.note-item:last-child{border-bottom:none}
.note-item .meta{font-size:11px;color:var(--ink3);margin-top:3px}
.rating-row{display:flex;gap:8px}
.rating-row button{flex:1;padding:10px;border-radius:var(--r-sm);border:1.5px solid var(--border2);background:#fff;font-weight:700;font-size:12.5px;cursor:pointer}
.rating-row button.hot.selected{background:var(--hot);border-color:var(--hot);color:#fff}
.rating-row button.warm.selected{background:var(--warm);border-color:var(--warm);color:#fff}
.rating-row button.cold.selected{background:var(--cold);border-color:var(--cold);color:#fff}

/* ---------- Playbook builder ---------- */
.content-pick{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid var(--border2);border-radius:var(--r);margin-bottom:8px;cursor:pointer;background:#fff}
.content-pick.selected{border-color:var(--gold);background:var(--gold-light)}
.content-pick .ic{width:34px;height:34px;border-radius:9px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--navy2);flex-shrink:0}
.content-pick .t{font-size:13.5px;font-weight:600}
.content-pick .d{font-size:11.5px;color:var(--ink3)}
.content-pick .check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.content-pick.selected .check{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.preview-card{background:var(--navy);border-radius:var(--r-lg);padding:20px;color:#fff;margin-bottom:16px;background-image:radial-gradient(circle at 100% 0%,rgba(200,151,58,.22),transparent 60%)}
.preview-card .greet{font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;line-height:1.4;margin-bottom:14px}
.preview-card .pitem{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.preview-card .pitem:first-of-type{border-top:none}

/* ---------- Modal / sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(15,27,43,.45);z-index:90;display:none}
.sheet-backdrop.show{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:#fff;border-radius:20px 20px 0 0;z-index:91;max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .25s ease;padding:18px 18px calc(20px + env(safe-area-inset-bottom))}
.sheet.show{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 14px}
.sheet h3{font-size:16px;font-weight:700;margin-bottom:16px}

@media (min-width:480px){
  #app{border-left:1px solid var(--border);border-right:1px solid var(--border)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}