Prospect Report Generator — Croc's & Clicks :root { /* ── Croc's & Clicks Brand Colors ── */ --pink:#F06478; /* coral pink — croc body */ --pink-hot:#D94060; /* deep coral — emphasis */ --pink-light:rgba(240,100,120,.1); --cyan:#5BC4D0; /* sky blue — logo text */ --cyan-light:rgba(91,196,208,.1); --dark:#0f0f1a; --dark2:#1a1a2e; --dark3:#252540; --card:#ffffff; --bg:#FDF0EC; /* warm peach — logo card bg */ --surface:#FAE8E0; /* warmer surface */ --border:#EDD8D0; --border2:#DEC8C0; /* warm peach borders */ --text:#1a1a2e; --muted:#8B6070; --faint:#B8928A; /* warm dusty rose */ --green:#22c55e; --yellow:#f59e0b; --red:#ef4444; --purple:#8b5cf6; --shadow:0 2px 12px rgba(15,15,26,.08); --shadow-lg:0 8px 32px rgba(15,15,26,.14); } *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden} /* ── HEADER ── */ .header{ background:var(--dark2); padding:0 2rem;height:60px; display:flex;align-items:center;justify-content:space-between; position:sticky;top:0;z-index:200; border-bottom:1px solid rgba(255,255,255,.07); } .header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--pink),var(--cyan))} .logo{display:flex;align-items:center;gap:.65rem} .logo img{height:36px;width:auto;object-fit:contain} .logo-text{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:800;color:#fff} .agent-badge{font-size:.6rem;background:linear-gradient(135deg,var(--pink),var(--cyan));color:#fff;padding:.2rem .5rem;border-radius:4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .header-right{display:flex;align-items:center;gap:.75rem} .hdr-meta{font-size:.72rem;color:rgba(255,255,255,.4);font-family:'Space Mono',monospace} /* ── DATABASE PANEL ── */ .db-btn{background:linear-gradient(135deg,var(--pink),var(--cyan));color:#fff;border:none;border-radius:7px;padding:.35rem .85rem;font-size:.72rem;font-weight:700;cursor:pointer;letter-spacing:.03em;display:flex;align-items:center;gap:.4rem;transition:opacity .2s;font-family:inherit} .db-btn:hover{opacity:.88} .db-btn svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .db-overlay{position:fixed;inset:0;background:rgba(15,15,26,.35);z-index:290;opacity:0;pointer-events:none;transition:opacity .3s} .db-overlay.open{opacity:1;pointer-events:all} .db-panel{position:fixed;top:60px;right:0;width:700px;max-width:95vw;height:calc(100vh - 60px);background:var(--card);border-left:1px solid var(--border);z-index:300;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-12px 0 50px rgba(15,15,26,.18)} .db-panel.open{transform:translateX(0)} .db-panel-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--bg)} .db-panel-title{font-size:.95rem;font-weight:800;color:var(--text)} .db-panel-actions{display:flex;align-items:center;gap:.5rem} .db-close-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.1rem;padding:.2rem .4rem;border-radius:5px;transition:background .15s} .db-close-btn:hover{background:var(--border)} .db-upload-zone{border:2px dashed var(--border2);border-radius:10px;padding:1.25rem;text-align:center;cursor:pointer;transition:all .2s;margin:1rem 1.25rem;flex-shrink:0} .db-upload-zone:hover,.db-upload-zone.drag{border-color:var(--pink);background:var(--pink-light)} .db-upload-zone input{display:none} .db-upload-text{font-size:.8rem;font-weight:600;color:var(--muted)} .db-upload-hint{font-size:.68rem;color:var(--faint);margin-top:.2rem} .db-stats{display:flex;gap:.75rem;padding:.5rem 1.25rem;flex-shrink:0;border-bottom:1px solid var(--border)} .db-stat{font-size:.7rem;color:var(--muted)} .db-stat strong{color:var(--text);font-weight:700} .db-search-bar{padding:.5rem 1.25rem;flex-shrink:0} .db-search-bar input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:.45rem .75rem;font-size:.8rem;font-family:inherit;color:var(--text);background:#fff;outline:none;transition:border-color .2s} .db-search-bar input:focus{border-color:var(--pink)} .db-table-wrap{flex:1;overflow-y:auto;padding:0 1.25rem 1rem} .db-account-group{margin-bottom:.75rem} .db-account-name{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:.5rem 0 .3rem;border-bottom:1px solid var(--border);margin-bottom:.3rem;display:flex;align-items:center;justify-content:space-between} .db-account-name .db-acct-badge{background:var(--border);color:var(--muted);font-size:.6rem;padding:.1rem .4rem;border-radius:10px;font-weight:700} .db-contact-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:.5rem;align-items:center;padding:.55rem .65rem;border-radius:8px;transition:background .15s;margin-bottom:2px} .db-contact-row:hover{background:var(--bg)} .db-contact-row.sent{border-left:3px solid var(--green);padding-left:calc(.65rem - 3px);background:#f0fdf9} .db-contact-row.active-sel{border-left:3px solid var(--pink);padding-left:calc(.65rem - 3px);background:var(--pink-light)} .db-contact-name{font-size:.78rem;font-weight:700;color:var(--text)} .db-contact-role{font-size:.67rem;color:var(--muted)} .db-contact-email{font-size:.7rem;color:var(--cyan);word-break:break-all} .db-contact-email.no-email{color:var(--faint);font-style:italic} .db-contact-sent{font-size:.64rem;color:var(--green);font-weight:700;margin-top:1px} .db-select-btn{background:var(--pink);color:#fff;border:none;border-radius:6px;padding:.3rem .65rem;font-size:.68rem;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;transition:opacity .2s;flex-shrink:0} .db-select-btn:hover{opacity:.85} .db-select-btn:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;opacity:1} .db-export-btn{background:var(--cyan);color:#fff;border:none;border-radius:7px;padding:.35rem .85rem;font-size:.72rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.35rem;font-family:inherit;transition:opacity .2s} .db-export-btn:hover{opacity:.85} /* ── SCRUB REPORT ── */ .scrub-panel{margin:.5rem 1.25rem;border:1px solid var(--border);border-radius:10px;overflow:hidden;flex-shrink:0;display:none;} .scrub-panel.on{display:block;} .scrub-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem .85rem;background:var(--bg);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;} .scrub-panel-title{font-size:.72rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:.4rem;} .scrub-count-badge{font-size:.6rem;font-weight:800;padding:.15rem .45rem;border-radius:8px;} .scrub-count-ok{background:rgba(34,197,94,.15);color:var(--green);} .scrub-count-warn{background:#fef3c7;color:#92400e;} .scrub-chevron{font-size:.65rem;color:var(--muted);transition:transform .2s;} .scrub-chevron.open{transform:rotate(180deg);} .scrub-body{padding:.6rem .85rem .75rem;display:none;} .scrub-body.open{display:block;} .scrub-group{margin-bottom:.75rem;} .scrub-group:last-child{margin-bottom:0;} .scrub-group-title{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem;} .scrub-item{font-size:.7rem;padding:.3rem .5rem;border-radius:6px;margin-bottom:3px;display:flex;align-items:flex-start;gap:.4rem;line-height:1.45;} .scrub-item.fixed{background:rgba(34,197,94,.08);color:#166534;} .scrub-item.warn{background:#fef3c7;color:#92400e;} .scrub-item.info{background:rgba(91,196,208,.07);color:#0f766e;} .scrub-icon{flex-shrink:0;font-size:.72rem;margin-top:.05rem;} .scrub-apply-btn{width:100%;background:var(--cyan);color:#fff;border:none;border-radius:7px;padding:.42rem;font-size:.73rem;font-weight:700;cursor:pointer;font-family:inherit;margin-top:.6rem;transition:opacity .2s;} .scrub-apply-btn:hover{opacity:.85;} /* ── BATCH MODE ── */ .batch-btn{display:none;align-items:center;gap:.4rem;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#fff;border:none;border-radius:7px;padding:.38rem .85rem;font-size:.7rem;font-weight:800;cursor:pointer;font-family:inherit;transition:opacity .2s;white-space:nowrap;} .batch-btn:hover{opacity:.88;} .batch-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:none;align-items:center;justify-content:center;padding:1rem;} .batch-modal-overlay.open{display:flex;} .batch-modal{background:var(--bg);border:1px solid var(--border);border-radius:16px;width:min(620px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);} .batch-modal-header{padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);} .batch-modal-title{font-size:1.05rem;font-weight:900;color:var(--text);display:flex;align-items:center;gap:.5rem;} .batch-modal-sub{font-size:.72rem;color:var(--muted);margin-top:.3rem;line-height:1.5;} .batch-modal-body{overflow-y:auto;flex:1;background:var(--bg);} .batch-settings-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-bottom:1px solid var(--border);background:var(--surface);} .batch-setting-cell{padding:.85rem 1.25rem;border-right:1px solid var(--border);} .batch-setting-cell:last-child{border-right:none;} .batch-setting-label{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem;} .batch-setting-cell select,.batch-setting-cell input{width:100%;border:1.5px solid var(--border);border-radius:7px;padding:.4rem .6rem;font-size:.78rem;font-family:inherit;color:var(--text);background:var(--bg);outline:none;} .batch-setting-cell select:focus,.batch-setting-cell input:focus{border-color:var(--pink);} .batch-delay-row{display:flex;align-items:center;gap:.4rem;} .batch-delay-row input{flex:1;} .batch-delay-sep{font-size:.72rem;color:var(--muted);flex-shrink:0;} .batch-contacts-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem .5rem;background:var(--bg);border-bottom:1px solid var(--border);} .batch-contacts-title{font-size:.72rem;font-weight:800;color:var(--text);} .batch-contacts-actions{display:flex;gap:.75rem;} .batch-contacts-actions button{font-size:.68rem;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;} .batch-contact-list-wrap{padding:.75rem 1rem;} .batch-setting{margin-bottom:.9rem;} .batch-setting label{display:block;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;} .batch-setting select,.batch-setting input[type=number]{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.45rem .7rem;font-size:.8rem;color:var(--text);font-family:inherit;} .batch-queue-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;} .batch-contact-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-bottom:1px solid var(--border);font-size:.71rem;background:var(--bg);transition:background .1s;} .batch-contact-row:hover{background:var(--surface);} .batch-contact-row:last-child{border-bottom:none;} .batch-contact-row.excluded{opacity:.35;} .batch-company-group{border:1px solid var(--border);border-radius:10px;margin-bottom:.6rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);} .batch-company-header{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--surface);cursor:pointer;user-select:none;border-bottom:1px solid var(--border);} .batch-company-header:hover{background:var(--bg);} .batch-company-name{font-size:.78rem;font-weight:800;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .batch-company-meta{font-size:.65rem;color:var(--muted);white-space:nowrap;flex-shrink:0;} .batch-company-domain{font-size:.65rem;color:var(--cyan);font-weight:700;white-space:nowrap;flex-shrink:0;} .batch-one-scan{font-size:.62rem;font-weight:800;color:var(--green);background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2);padding:2px 7px;border-radius:20px;white-space:nowrap;} .batch-company-contacts{background:var(--bg);} .batch-company-contacts .batch-contact-row{padding:.5rem .9rem .5rem 2.2rem;} .batch-company-chk{flex-shrink:0;width:15px;height:15px;cursor:pointer;accent-color:var(--cyan);} .db-btn-add{background:var(--pink);color:#fff;border:none;border-radius:8px;padding:.35rem .85rem;font-size:.72rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;font-family:inherit;transition:opacity .2s;} .db-btn-add:hover{opacity:.85;} .db-delete-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:.2rem .4rem;border-radius:5px;opacity:0;transition:opacity .15s,color .15s;flex-shrink:0;} .db-unsub-badge{font-size:.6rem;font-weight:800;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;padding:1px 6px;border-radius:10px;flex-shrink:0;} .db-contact-row:hover .db-delete-btn{opacity:1;} .db-delete-btn:hover{color:#ef4444;background:rgba(239,68,68,.1);} .ac-label{font-size:.68rem;font-weight:700;color:var(--muted);display:block;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.04em;} .ac-input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:.45rem .65rem;font-size:.78rem;font-family:inherit;color:var(--text);background:var(--bg);outline:none;box-sizing:border-box;} .ac-input:focus{border-color:var(--pink);} .ac-input::placeholder{color:var(--faint);} .batch-contact-chk{flex-shrink:0;width:14px;height:14px;cursor:pointer;} .batch-contact-name{font-weight:700;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .batch-contact-email{color:var(--muted);font-size:.67rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;} .batch-modal-footer{padding:.85rem 1.4rem;border-top:1px solid var(--border);display:flex;gap:.6rem;align-items:center;flex-shrink:0;} .batch-start-btn{flex:1;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#fff;border:none;border-radius:8px;padding:.55rem;font-size:.8rem;font-weight:800;cursor:pointer;font-family:inherit;} .batch-start-btn:disabled{opacity:.45;cursor:not-allowed;} .batch-cancel-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:.55rem .9rem;font-size:.75rem;color:var(--muted);cursor:pointer;font-family:inherit;} .batch-progress{padding:.8rem 1.4rem;border-top:1px solid var(--border);flex-shrink:0;display:none;} .batch-progress.on{display:block;} .batch-prog-bar-wrap{height:5px;background:var(--border);border-radius:3px;margin:.5rem 0;} .batch-prog-bar{height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));border-radius:3px;transition:width .4s;} .batch-log{font-size:.67rem;color:var(--muted);max-height:130px;overflow-y:auto;font-family:monospace;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.5rem .7rem;margin-top:.5rem;} .batch-log-line{padding:1px 0;line-height:1.5;} .batch-log-line.ok{color:var(--green);} .batch-log-line.err{color:var(--red);} .batch-log-line.inf{color:var(--cyan);} .db-empty{text-align:center;padding:3rem 1rem;color:var(--faint);font-size:.82rem} /* ── SEND QUEUE ── */ .queue-drawer{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--border);box-shadow:0 -8px 40px rgba(15,15,26,.14);z-index:280;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);max-height:55vh;display:flex;flex-direction:column} .queue-drawer.open{transform:translateY(0)} .queue-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg)} .queue-drawer-title{font-size:.88rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:.5rem} .q-count-badge{background:var(--pink);color:#fff;font-size:.62rem;font-weight:800;padding:.15rem .45rem;border-radius:10px;min-width:18px;text-align:center} .queue-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .q-delay-label{font-size:.7rem;color:var(--muted);white-space:nowrap} .q-delay-input{width:52px;border:1.5px solid var(--border);border-radius:6px;padding:.25rem .4rem;font-size:.75rem;font-family:inherit;color:var(--text);text-align:center;outline:none} .q-delay-input:focus{border-color:var(--pink)} .q-hours-toggle{display:flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--muted);cursor:pointer;user-select:none;padding:.2rem .4rem;border-radius:5px;transition:background .15s;} .q-hours-toggle:hover{background:var(--border);} .q-hours-toggle input{margin:0;cursor:pointer;accent-color:var(--cyan);} .recovery-banner{position:fixed;top:0;left:0;right:0;z-index:8000;background:linear-gradient(135deg,#1e40af,#0f766e);color:#fff;padding:.65rem 1.25rem;display:none;align-items:center;gap:1rem;font-size:.75rem;box-shadow:0 2px 12px rgba(0,0,0,.25);} .recovery-banner.on{display:flex;} .recovery-banner-text{flex:1;font-weight:600;line-height:1.4;} .recovery-banner-text span{opacity:.8;font-weight:400;} .recovery-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:7px;padding:.35rem .85rem;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s;} .recovery-btn:hover{background:rgba(255,255,255,.35);} .recovery-btn.primary{background:#fff;color:#1e40af;} .recovery-btn.primary:hover{background:#e6f7f6;} .recovery-dismiss{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem;padding:.2rem .4rem;font-family:inherit;} .q-overnight{background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(91,196,208,.06));border:1px solid rgba(14,165,233,.25);border-radius:8px;padding:.6rem 1rem;margin:.5rem 1rem 0;font-size:.72rem;display:none;} .q-overnight.on{display:block;} .q-overnight-title{font-weight:800;color:#0ea5e9;margin-bottom:.2rem;} .q-overnight-msg{color:var(--muted);line-height:1.5;} .q-btn{border:none;border-radius:7px;padding:.32rem .75rem;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.35rem;transition:opacity .2s} .q-btn:hover{opacity:.85} .q-btn-start{background:var(--cyan);color:#fff} .q-btn-pause{background:var(--yellow);color:#fff} .q-btn-cancel{background:var(--red);color:#fff} .q-btn-clear{background:var(--border);color:var(--muted)} .q-btn:disabled{opacity:.45;cursor:not-allowed} .q-close-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.1rem;padding:.2rem .4rem;border-radius:5px;transition:background .15s;margin-left:.25rem} .q-close-btn:hover{background:var(--border)} .queue-countdown{background:linear-gradient(135deg,rgba(91,196,208,.08),rgba(240,100,120,.06));border-bottom:1px solid var(--border);padding:.5rem 1.25rem;font-size:.78rem;color:var(--text);text-align:center;flex-shrink:0;display:none} .queue-list{overflow-y:auto;padding:.5rem 1.25rem 1rem;flex:1} .queue-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:8px;margin-bottom:4px;background:var(--bg);border:1px solid var(--border)} .queue-item.queue-sending{background:rgba(91,196,208,.08);border-color:rgba(91,196,208,.3)} .queue-item.queue-sent{background:#f0fdf9;border-color:rgba(34,197,94,.25)} .queue-item.queue-failed{background:#fef2f2;border-color:rgba(239,68,68,.25)} .queue-item-info{flex:1;min-width:0} .queue-item-name{font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .queue-item-email{font-size:.68rem;color:var(--muted)} .q-badge{font-size:.65rem;font-weight:800;padding:.18rem .5rem;border-radius:6px;white-space:nowrap} .q-pending{background:#fef3c7;color:#92400e} .q-sending{background:rgba(91,196,208,.15);color:#0f766e;animation:qpulse 1.2s ease-in-out infinite} .q-sent{background:#dcfce7;color:#166534} .q-failed{background:#fee2e2;color:#991b1b} @keyframes qpulse{0%,100%{opacity:1}50%{opacity:.6}} .q-remove-btn{background:none;border:none;cursor:pointer;color:var(--faint);font-size:.85rem;padding:.1rem .3rem;border-radius:4px;line-height:1;transition:color .15s} .q-remove-btn:hover{color:var(--red)} .queue-empty{text-align:center;padding:2rem 1rem;color:var(--faint);font-size:.8rem} .add-queue-btn{background:var(--dark2);color:#fff;border:none;border-radius:8px;padding:.42rem .85rem;font-size:.75rem;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.35rem;transition:opacity .2s;position:relative} .add-queue-btn:hover{opacity:.85} .add-queue-btn .q-hdr-badge{position:absolute;top:-6px;right:-6px;background:var(--pink);color:#fff;font-size:.55rem;font-weight:800;padding:.1rem .35rem;border-radius:8px;min-width:16px;text-align:center;display:none} .add-queue-btn .q-hdr-badge.on{display:block} /* ── LAYOUT ── */ .app{display:grid;grid-template-columns:440px 1fr;min-height:calc(100vh - 60px);gap:0} @media(max-width:900px){.app{grid-template-columns:1fr}} /* ── SIDEBAR / WIZARD ── */ .sidebar{background:var(--card);border-right:1px solid var(--border);padding:1.75rem 1.5rem;overflow-y:auto;max-height:calc(100vh - 60px);position:sticky;top:60px} .wizard-progress{display:flex;align-items:center;gap:.3rem;margin-bottom:2rem} .wp-step{flex:1;display:flex;align-items:center;gap:.3rem} .wp-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0;transition:all .3s;font-family:'Space Mono',monospace} .wp-dot.done{background:var(--cyan);color:#fff} .wp-dot.active{background:var(--pink);color:#fff;box-shadow:0 0 0 3px var(--pink-light)} .wp-dot.idle{background:var(--bg);color:var(--faint);border:2px solid var(--border)} .wp-line{flex:1;height:2px;border-radius:1px;transition:background .3s} .wp-line.done{background:var(--cyan)} .wp-line.idle{background:var(--border)} .wp-label{font-size:.6rem;color:var(--muted);white-space:nowrap;margin-top:.2rem} .step-card{background:var(--bg);border:1.5px solid var(--border);border-radius:14px;padding:1.25rem;margin-bottom:1rem;transition:all .3s;position:relative} .step-card.active{border-color:var(--pink);background:#fff;box-shadow:var(--shadow)} .step-card.done{border-color:var(--cyan);opacity:.75} .step-card.locked{opacity:.45;pointer-events:none} .step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--pink);color:#fff;font-size:.65rem;font-weight:800;margin-bottom:.6rem;font-family:'Space Mono',monospace} .step-card.done .step-num{background:var(--cyan)} .step-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text);margin-bottom:.85rem} /* Inputs */ label{display:block;font-size:.7rem;font-weight:600;color:var(--muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.04em} input,textarea,select{ width:100%;padding:.6rem .85rem; background:#fff;border:1.5px solid var(--border2); border-radius:8px;color:var(--text);font:inherit;font-size:.82rem; margin-bottom:.75rem;transition:border-color .15s; } input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-light)} textarea{resize:vertical;min-height:80px;font-family:inherit} input::placeholder,textarea::placeholder{color:var(--faint)} /* Search row */ .search-row{display:flex;gap:.4rem;margin-bottom:.4rem} .search-row input{flex:1;margin:0} .search-btn{padding:.6rem 1rem;background:var(--cyan);border:none;border-radius:8px;color:#fff;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s} .search-btn:hover{background:#239e96} .search-btn:disabled{opacity:.5;cursor:not-allowed} .type-hint{font-size:.65rem;color:var(--muted);min-height:.9rem;margin-bottom:.5rem} .type-hint.maps{color:var(--cyan)} .type-hint.web{color:var(--pink)} .type-hint.phone{color:var(--yellow)} /* Results list */ .biz-results{background:#fff;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:.75rem;display:none} .biz-item{padding:.6rem .85rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s} .biz-item:last-child{border:none} .biz-item:hover{background:var(--cyan-light)} .biz-item-name{font-size:.8rem;font-weight:700} .biz-item-sub{font-size:.68rem;color:var(--muted);margin-top:.1rem} /* Selected biz card */ .biz-selected{display:none;background:linear-gradient(135deg,rgba(91,196,208,.08),rgba(240,100,120,.06));border:1.5px solid rgba(91,196,208,.3);border-radius:10px;padding:.85rem;margin-bottom:.75rem;position:relative} .biz-sel-name{font-size:.9rem;font-weight:800;color:var(--text);margin-bottom:.2rem} .biz-sel-addr{font-size:.72rem;color:var(--muted);margin-bottom:.15rem} .biz-sel-domain{font-size:.68rem;color:var(--cyan);font-family:'Space Mono',monospace} .biz-sel-clear{position:absolute;top:.6rem;right:.6rem;background:none;border:none;color:var(--faint);cursor:pointer;font-size:.85rem;line-height:1;padding:.2rem} .biz-sel-clear:hover{color:var(--red)} .biz-domain-edit{display:flex;gap:.4rem;margin-top:.6rem} .biz-domain-edit input{margin:0;flex:1;font-size:.75rem;padding:.45rem .65rem} .domain-badge{font-size:.6rem;padding:.15rem .4rem;border-radius:4px;font-weight:700} .domain-badge.found{background:rgba(34,197,94,.12);color:var(--green)} .domain-badge.manual{background:rgba(240,100,120,.12);color:var(--pink)} /* Grid config */ .range-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.75rem} .range-row input[type=range]{flex:1;margin:0;-webkit-appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--pink);border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(240,100,120,.4)} .range-val{font-size:.82rem;font-weight:700;color:var(--pink);min-width:48px;text-align:right;font-family:'Space Mono',monospace} .grid-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin-bottom:.75rem} .g-opt{padding:.4rem;background:var(--bg);border:1.5px solid var(--border);border-radius:6px;font-size:.7rem;font-family:'Space Mono',monospace;text-align:center;cursor:pointer;color:var(--muted);transition:all .15s} .g-opt.on{background:rgba(240,100,120,.1);border-color:var(--pink);color:var(--text);font-weight:700} .kw-hint{font-size:.65rem;color:var(--muted);margin-top:-.5rem;margin-bottom:.75rem;line-height:1.5} /* Main generate button */ .gen-btn{ width:100%;padding:.85rem;border:none;border-radius:10px; background:linear-gradient(135deg,var(--pink),var(--cyan)); color:#fff;font:inherit;font-size:.9rem;font-weight:800; cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem; letter-spacing:.01em;transition:all .2s;margin-top:.25rem; } .gen-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(240,100,120,.35)} .gen-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .gen-btn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} /* Status callouts */ .status-box{border-radius:8px;padding:.6rem .85rem;font-size:.75rem;margin-bottom:.75rem;display:none} .status-box.on{display:block} .status-box.err{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.25)} .status-box.ok{background:rgba(34,197,94,.1);color:#16a34a;border:1px solid rgba(34,197,94,.25)} .status-box.info{background:var(--cyan-light);color:#0e7e78;border:1px solid rgba(91,196,208,.25)} /* ── MAIN PANEL ── */ .main-panel{background:var(--bg);padding:2rem;overflow-y:auto} /* Empty state */ .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:2rem} .empty-icon{font-size:3.5rem;margin-bottom:1rem;opacity:.4} .empty-title{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--text);margin-bottom:.5rem} .empty-sub{font-size:.9rem;color:var(--muted);max-width:380px;line-height:1.6} /* Progress panel */ .progress-panel{display:none;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:1.75rem;margin-bottom:1.5rem;box-shadow:var(--shadow)} .progress-panel.on{display:block} .progress-title{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--text);margin-bottom:1.25rem} .progress-track{margin-bottom:1.25rem} .progress-track-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem} .pt-name{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .pt-status{font-size:.68rem;font-family:'Space Mono',monospace;color:var(--muted)} .pt-status.running{color:var(--pink)} .pt-status.done{color:var(--green)} .pt-status.err{color:var(--red)} .progress-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden} .progress-bar-fill{height:100%;border-radius:4px;transition:width .4s;min-width:3%} .pb-grid{background:linear-gradient(90deg,var(--pink),#f87ba0)} .pb-audit{background:linear-gradient(90deg,var(--cyan),#6dd5cf)} .progress-log{background:var(--bg);border-radius:8px;padding:.75rem;max-height:120px;overflow-y:auto;font-family:'Space Mono',monospace;font-size:.65rem;color:var(--muted);line-height:1.7;margin-top:.75rem} .log-ok{color:var(--green)} .log-err{color:var(--red)} .log-info{color:var(--cyan)} /* Preview report */ .preview-wrapper{display:none} .preview-wrapper.on{display:block} .preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem} .preview-title{font-family:'Fraunces',serif;font-size:1.4rem;color:var(--text)} .send-btn{ display:flex;align-items:center;gap:.4rem; padding:.7rem 1.35rem;border:none;border-radius:10px; background:linear-gradient(135deg,var(--pink),var(--cyan)); color:#fff;font:inherit;font-size:.85rem;font-weight:800; cursor:pointer;transition:all .2s; } .send-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(240,100,120,.35)} .send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .send-btn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .sent-badge{display:none;align-items:center;gap:.4rem;padding:.5rem 1rem;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);border-radius:8px;color:var(--green);font-size:.8rem;font-weight:700} .sent-badge.on{display:flex} /* Report iframe preview */ .report-frame-wrap{background:#fff;border:1.5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)} .report-frame-bar{background:var(--dark2);padding:.5rem .85rem;display:flex;align-items:center;gap:.5rem} .rfb-dots{display:flex;gap:.35rem} .rfb-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15)} .rfb-url{flex:1;background:rgba(255,255,255,.07);border-radius:4px;padding:.25rem .6rem;font-size:.65rem;font-family:'Space Mono',monospace;color:rgba(255,255,255,.35)} .report-preview-container{padding:0;background:#faf5f5;min-height:400px} /* Two-track scan summary */ .scan-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem} .scan-stat-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:1rem;text-align:center;box-shadow:var(--shadow)} .ssc-val{font-family:'Space Mono',monospace;font-size:1.6rem;font-weight:700;margin-bottom:.2rem} .ssc-label{font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em} .ssc-sub{font-size:.65rem;color:var(--faint);margin-top:.15rem} /* Toast */ .toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--dark2);color:#fff;padding:.65rem 1.1rem;border-radius:8px;font-size:.8rem;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;border:1px solid rgba(255,255,255,.1)} .toast.show{transform:translateX(-50%) translateY(0);opacity:1} .toast.ok{border-color:var(--cyan)} .toast.err{border-color:var(--red)} /* Report HTML embedded preview */ #reportPreview{width:100%;border:none;display:block;min-height:600px}
Croc's & Clicks Croc's & Clicks Agent Tool
Ready
1
2
3
1
Business Lookup
2
Keywords & Scan Settings
These are the search terms you'll test local visibility for. Use the exact phrases a customer would Google.
5 mi
3×3
5×5
7×7
9×9
3
Send Report To
Prospect Report Generator
Search for a business on the left, add keywords, enter the prospect's email, then generate a combined Local Visibility + Website Health report.
Generating Report…
Local Grid Scan Waiting…
Website Audit Waiting…
Report Preview
Report Sent!
report preview
Send Queue 0
Delay: – min
🌙 Overnight pause
Queue paused — resumes at 7:00 AM PT
No reports queued yet. Generate a report then click "Add to Queue".
🔄
Previous session interrupted — restore your progress?
Batch Send Reports
5×5 grid · 2 keywords per company · one scan per company · personalized email to every contact
Grid Size
5×5 — 2 keywords
Service Category + Service 1
Search Radius
Email Delay (min)
–
Loading…
Preparing…
Prospect Database
Loading database…
📂
Click or drag your prospect CSV here
Account · Contact Name · Email · Domain · Service 1/2/3 · etc.
🧹 Data Scrub Report 0 issues
▼
📋
Your database is empty
Add contacts one-by-one or import your existing CSV to get started.
Loading your database…
Add Contact