/**
 * Product Mockup Styles — Full Funnel & Anti-Scam
 * Shared sidebar + app layout for complex mockups
 */

/* App layout inside mac-screen */
.mac-screen .app {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    transition: opacity 0.75s ease;
}
.mac-screen .app.active { opacity: 1; }

/* Sidebar */
.sb { width: 160px; flex-shrink: 0; background: #070710; border-right: 1px solid #111128; display: flex; flex-direction: column; }
.sb-head { display: flex; align-items: center; gap: 7px; padding: 10px 10px 9px; border-bottom: 1px solid #111128; }
.sb-mark { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.sb-logo { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; color: #dcdcf0; letter-spacing: -0.4px; }
.sb-logo small { font-family: 'Inter', sans-serif; font-size: 7px; font-weight: 400; color: #2a2a50; display: block; }
.sb-section { font-size: 7px; color: #1e1e40; text-transform: uppercase; letter-spacing: 1.4px; padding: 9px 10px 4px; font-weight: 600; }
.ni { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 9px; color: #2e2e58; cursor: pointer; border-left: 2px solid transparent; }
.ni svg { flex-shrink: 0; opacity: 0.45; width: 10px; height: 10px; }
.ni.on svg { opacity: 1; }
.sb-foot { margin-top: auto; border-top: 1px solid #111128; padding: 8px 10px; }
.ws { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: #0c0c1e; border: 1px solid #181830; border-radius: 6px; }
.ws-av { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; }
.ws-name { font-size: 8px; color: #4a4a78; font-weight: 500; }
.ws-plan { font-size: 7px; color: #1e1e40; }
.ws-dot { width: 4px; height: 4px; border-radius: 50%; margin-left: auto; }

/* Main area */
.mac-screen .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.mac-screen .tb { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid #111128; flex-shrink: 0; background: #09091a; }
.tb-l { display: flex; align-items: center; gap: 8px; }
.tb-title { font-size: 10px; font-weight: 600; color: #d0d0ec; }
.tb-crumb { font-size: 8px; color: #1e1e40; }
.tb-r { display: flex; align-items: center; gap: 5px; }
.btn-sm { display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 5px; font-size: 8px; cursor: pointer; }
.btn-ghost { background: #0d0d24; border: 1px solid #1a1a38; color: #5a5a88; }
.btn-purple { background: rgba(102,68,255,0.1); border: 1px solid rgba(102,68,255,0.25); color: #8866ff; }
.btn-red { background: rgba(255,68,68,0.1); border: 1px solid rgba(255,68,68,0.22); color: #ff7777; }
.live-pill { display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 16px; font-size: 8px; }
.ld { width: 4px; height: 4px; border-radius: 50%; animation: blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.15} }

.subtabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid #111128; background: #09091a; flex-shrink: 0; }
.stab { padding: 5px 8px; font-size: 8px; color: #252550; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }

.cnt { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }

/* Cards */
.cc { background: #0c0c20; border: 1px solid #14142e; border-radius: 7px; padding: 8px 10px; display: flex; flex-direction: column; }
.cc-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; flex-shrink: 0; }
.cc-t { font-size: 8px; font-weight: 600; color: #9090c0; }
.cc-b { font-size: 7px; color: #1e1e40; background: #0a0a1c; border: 1px solid #181836; padding: 1px 6px; border-radius: 6px; }
.cg { display: flex; gap: 7px; flex: 1; min-height: 0; }
.cc.w2 { flex: 2; } .cc.w25 { flex: 2.5; } .cc.w3 { flex: 3; } .cc.w15 { flex: 1.5; }

/* KPI */
.kpi { background: #0c0c20; border: 1px solid #14142e; border-radius: 7px; padding: 8px 10px; flex: 1; position: relative; overflow: hidden; }
.kpi.hi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.kpi.red::before { background: linear-gradient(90deg,#ff4444,transparent); }
.kpi.grn::before { background: linear-gradient(90deg,#00E5A0,transparent); }
.kpi.ylw::before { background: linear-gradient(90deg,#ffaa00,transparent); }
.kpi-l { font-size: 7px; color: #252550; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; font-weight: 500; }
.kpi-v { font-size: 16px; font-weight: 700; color: #e4e4f8; line-height: 1; letter-spacing: -0.5px; }
.kpi-sub { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.up { font-size: 7px; color: #00975c; }
.dn { font-size: 7px; color: #aa4444; }
.mt { font-size: 7px; color: #1e1e40; }

/* Mac base (used by full-funnel and anti-scam) */
.mac-base { width: 100%; height: 22px; background: linear-gradient(180deg,#C0C0C0 0%,#B2B2B2 55%,#A4A4A4 100%); border-radius: 0 0 11px 11px; position: relative; box-shadow: 0 12px 50px rgba(0,0,0,0.7); }
.mac-base::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 110px; height: 9px; background: rgba(0,0,0,0.12); border-radius: 3px; }

/* Slide dots variant */
.sdots { display: flex; gap: 7px; margin-top: 16px; }

/* ===== FULL FUNNEL specific ===== */
.mockup-full-funnel .sb-mark { background: linear-gradient(135deg,#6644ff,#4422cc); }
.mockup-full-funnel .ni.on { color: #6644ff; border-left-color: #6644ff; background: rgba(102,68,255,0.05); }
.mockup-full-funnel .ws-av { background: linear-gradient(135deg,#6644ff,#3322aa); }
.mockup-full-funnel .ws-dot { background: #6644ff; }
.mockup-full-funnel .ld { background: #6644ff; }
.mockup-full-funnel .live-pill { background: #09091e; border: 1px solid rgba(102,68,255,0.2); color: #8866ff; }
.mockup-full-funnel .stab.on { color: #8866ff; border-bottom-color: #6644ff; }
.mockup-full-funnel .sdot.on { background: #6644ff; }

.ai-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; background: rgba(102,68,255,0.12); border: 1px solid rgba(102,68,255,0.2); border-radius: 6px; font-size: 7px; color: #8866ff; font-weight: 600; }

/* Suggestion cards */
.sug-card { background: #0a0a1e; border: 1px solid #18183a; border-radius: 6px; padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.sug-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.sug-card.up::before { background: #00E5A0; }
.sug-card.down::before { background: #ff5555; }
.sug-card.freq::before { background: #ffaa00; }
.sug-card.tgt::before { background: #6644ff; }
.sug-card.pause::before { background: #555580; }
.sug-head { display: flex; align-items: center; justify-content: space-between; }
.sug-media { font-size: 8px; font-weight: 600; color: #c0c0e0; display: flex; align-items: center; gap: 5px; }
.sug-media .ico { width: 14px; height: 14px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.sug-action { font-size: 7px; font-weight: 600; padding: 1px 6px; border-radius: 8px; }
.sug-action.up { background: rgba(0,229,160,0.1); color: #00E5A0; }
.sug-action.down { background: rgba(255,85,85,0.1); color: #ff7777; }
.sug-action.freq { background: rgba(255,170,0,0.1); color: #ffcc44; }
.sug-action.tgt { background: rgba(102,68,255,0.12); color: #9977ff; }
.sug-action.pause { background: rgba(80,80,120,0.15); color: #7070a0; }
.sug-body { font-size: 7.5px; color: #40406a; line-height: 1.4; }
.sug-body strong { color: #9090c0; }
.sug-delta { display: flex; align-items: center; gap: 6px; }
.sug-delta-item { font-size: 7px; display: flex; align-items: center; gap: 2px; }
.conf-bar { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.conf-lbl { font-size: 7px; color: #252550; min-width: 45px; }
.conf-trk { flex: 1; height: 3px; background: #0a0a18; border-radius: 2px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 2px; }
.conf-pct { font-size: 7px; color: #6644ff; min-width: 20px; text-align: right; }

/* AI analysis */
.ai-analysis { background: #09091e; border: 1px solid rgba(102,68,255,0.15); border-radius: 6px; padding: 8px 10px; }
.ai-analysis-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #111128; }
.ai-avatar { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg,#6644ff,#4422cc); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.ai-name { font-size: 8px; font-weight: 600; color: #8866ff; }
.ai-sub { font-size: 7px; color: #252550; }
.ai-text { font-size: 7.5px; color: #5a5a88; line-height: 1.5; }
.ai-text strong { color: #a0a0cc; }
.ai-text .hi { color: #00E5A0; }
.ai-text .warn { color: #ffaa44; }
.ai-text .bad { color: #ff6666; }

/* Media performance rows */
.mp-row { display: flex; align-items: center; gap: 0; padding: 4px 0; border-bottom: 1px solid #0e0e1e; }
.mp-row:last-child { border: none; }
.mp-media { display: flex; align-items: center; gap: 5px; min-width: 90px; flex-shrink: 0; }
.mp-icon { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.mp-name { font-size: 8px; color: #7070a0; }
.mp-val { font-size: 8px; color: #9090c0; min-width: 42px; text-align: right; }
.mp-val.g { color: #00E5A0; } .mp-val.r { color: #ff6666; }
.mp-bar-col { flex: 1; padding: 0 6px; }
.mp-bar-bg { height: 4px; background: #080818; border-radius: 3px; overflow: hidden; }
.mp-bar-fill { height: 100%; border-radius: 3px; width: 0; transition: width 1.1s cubic-bezier(0.4,0,0.2,1); }
.mp-trend { font-size: 7px; min-width: 30px; text-align: right; }
.mp-trend.up { color: #00835c; } .mp-trend.dn { color: #aa4444; }

/* Chart axis text */
.ax { font-size: 6px; fill: #1c1c3c; font-family: Inter, sans-serif; }
.gl { stroke: #111128; stroke-width: 1; }

/* Line draw animations */
.ld1{stroke-dasharray:600;stroke-dashoffset:600;animation:drw 2s ease forwards 0.4s;}
.ld2{stroke-dasharray:600;stroke-dashoffset:600;animation:drw 2s ease forwards 0.7s;}
.ld3{stroke-dasharray:600;stroke-dashoffset:600;animation:drw 2s ease forwards 1.0s;}
.ld4{stroke-dasharray:600;stroke-dashoffset:600;animation:drw 2s ease forwards 1.3s;}
@keyframes drw{to{stroke-dashoffset:0}}

/* ===== ANTI-SCAM specific ===== */
.mockup-anti-scam .sb-mark { background: linear-gradient(135deg,#ff4444,#cc2200); }
.mockup-anti-scam .ni.on { color: #ff5555; border-left-color: #ff4444; background: rgba(255,68,68,0.05); }
.mockup-anti-scam .ws-av { background: linear-gradient(135deg,#ff4444,#aa1100); }
.mockup-anti-scam .ws-dot { background: #ff4444; }
.mockup-anti-scam .ld { background: #ff4444; }
.mockup-anti-scam .live-pill { background: #1a0808; border: 1px solid rgba(255,68,68,0.2); color: #ff7777; }
.mockup-anti-scam .stab.on { color: #ff7777; border-bottom-color: #ff4444; }
.mockup-anti-scam .sdot.on { background: #ff4444; }

/* Lead rows */
.lead-row { display: flex; align-items: center; gap: 0; padding: 4px 0; border-bottom: 1px solid #0d0d1c; }
.lead-row:last-child { border: none; }
.lead-id { font-family: 'JetBrains Mono', monospace; font-size: 7px; color: #303058; min-width: 48px; flex-shrink: 0; }
.lead-name { font-size: 8px; color: #8080b8; min-width: 72px; flex-shrink: 0; }
.lead-source { font-size: 7px; min-width: 50px; flex-shrink: 0; }
.lead-score-wrap { display: flex; align-items: center; gap: 4px; min-width: 56px; flex-shrink: 0; }
.score-bar { width: 30px; height: 4px; background: #080818; border-radius: 3px; overflow: hidden; }
.score-fill { height: 100%; border-radius: 3px; transition: width 1s; }
.score-num { font-size: 8px; font-weight: 600; min-width: 16px; }
.lead-tags { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 6px; font-size: 6px; font-weight: 600; }
.tag-vpn { background: rgba(255,100,50,0.1); color: #ff8855; border: 1px solid rgba(255,100,50,0.2); }
.tag-dup { background: rgba(255,50,50,0.1); color: #ff6666; border: 1px solid rgba(255,50,50,0.2); }
.tag-geo { background: rgba(255,180,50,0.1); color: #ffcc55; border: 1px solid rgba(255,180,50,0.2); }
.tag-ok { background: rgba(0,229,160,0.08); color: #00E5A0; border: 1px solid rgba(0,229,160,0.18); }
.tag-bot { background: rgba(200,50,255,0.1); color: #cc66ff; border: 1px solid rgba(200,50,255,0.2); }
.tag-freq { background: rgba(255,150,0,0.1); color: #ffaa44; border: 1px solid rgba(255,150,0,0.2); }
.tag-data { background: rgba(100,100,255,0.1); color: #8899ff; border: 1px solid rgba(100,100,255,0.2); }

/* Decision badges */
.decision { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 16px; font-size: 7px; font-weight: 700; flex-shrink: 0; }
.dec-pass { background: rgba(0,229,160,0.12); color: #00E5A0; border: 1px solid rgba(0,229,160,0.25); }
.dec-block { background: rgba(255,50,50,0.12); color: #ff6666; border: 1px solid rgba(255,50,50,0.25); }
.dec-review { background: rgba(255,170,0,0.12); color: #ffcc44; border: 1px solid rgba(255,170,0,0.25); }

/* Connector cards */
.conn-card { background: #0a0a1c; border: 1px solid #181832; border-radius: 7px; padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; }
.conn-head { display: flex; align-items: center; justify-content: space-between; }
.conn-name { display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 600; color: #c0c0e0; }
.conn-logo { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.toggle { width: 26px; height: 14px; border-radius: 7px; display: flex; align-items: center; padding: 2px; cursor: pointer; flex-shrink: 0; }
.toggle.on { background: #00E5A0; justify-content: flex-end; }
.toggle.off { background: #1e1e38; justify-content: flex-start; }
.toggle-knob { width: 10px; height: 10px; border-radius: 5px; background: #fff; }
.conn-rule { font-size: 7px; color: #35355a; line-height: 1.4; }
.conn-rule strong { color: #7070a0; }
.conn-stats { display: flex; gap: 5px; }
.conn-stat { flex: 1; text-align: center; background: #0d0d22; border: 1px solid #161630; border-radius: 5px; padding: 4px 5px; }
.conn-stat-n { font-size: 10px; font-weight: 700; line-height: 1; }
.conn-stat-l { font-size: 6px; color: #252550; margin-top: 2px; }

/* Badge stream */
.badge-stream { display: flex; flex-direction: column; gap: 3px; overflow: hidden; flex: 1; }
.bs-item { display: flex; align-items: center; gap: 5px; padding: 3px 6px; background: #0a0a1c; border-radius: 5px; border: 1px solid #141428; opacity: 0; animation: slideIn 0.4s ease forwards; }
@keyframes slideIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
.bs-time { font-family: 'JetBrains Mono', monospace; font-size: 7px; color: #1e1e40; min-width: 32px; flex-shrink: 0; }
.bs-id { font-family: 'JetBrains Mono', monospace; font-size: 7px; color: #404060; min-width: 56px; }
.bs-action { font-size: 7px; font-weight: 600; flex: 1; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sb { width: 0; overflow: hidden; border: none; }
    .mac-screen .tb { padding: 5px 8px; }
    .tb-title { font-size: 8px; }
    .tb-r { display: none; }
    .subtabs { display: none; }
    .cnt { padding: 6px 8px; gap: 5px; }
    .kpi-v { font-size: 12px; }
    .cc { padding: 6px 8px; border-radius: 5px; }
    .lead-row { font-size: 6px; }
    .conn-card { padding: 5px 6px; }
    .sug-card { padding: 5px 7px; }
    .ai-badge { display: none; }
}