/* Brand Form — Shared styles for all brand integration pages */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0e1a;color:#e2e8f0;min-height:100vh}
a{color:#60a5fa;text-decoration:none}
code{background:#1e293b;padding:0.1rem 0.35rem;border-radius:0.2rem;font-size:0.7rem;color:#60a5fa;word-break:break-all}

/* Header */
.bf-header{padding:1rem 1.25rem;display:flex;align-items:center;gap:0.75rem;border-bottom:1px solid #1e293b;position:sticky;top:0;background:#0a0e1aee;backdrop-filter:blur(8px);z-index:50}
.bf-header-icon{width:48px;height:48px;border-radius:0.75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.bf-header-info h1{font-size:1.15rem;font-weight:700}
.bf-header-info p{font-size:0.75rem;color:#94a3b8}
.bf-back{font-size:0.75rem;color:#94a3b8;margin-left:auto;padding:0.3rem 0.6rem;background:#1e293b;border-radius:0.3rem;border:1px solid #334155;cursor:pointer;transition:all 0.2s}
.bf-back:hover{background:#334155;color:#e2e8f0}

/* Layout */
.bf-main{max-width:900px;margin:0 auto;padding:1rem}
.bf-section{background:#0f172a;border:1px solid #1e293b;border-radius:0.5rem;padding:1rem;margin-bottom:1rem}
.bf-section-title{font-size:0.85rem;font-weight:700;margin-bottom:0.75rem;display:flex;align-items:center;gap:0.4rem}

/* Device Cards */
.bf-device-card{padding:0.6rem;background:#0a0e1a;border:1px solid #1e293b;border-radius:0.4rem;cursor:pointer;transition:all 0.15s;margin-bottom:0.4rem}
.bf-device-card:hover{border-color:#8b5cf680}
.bf-device-card.active{border-color:#8b5cf6;background:#1e1b4b}
.bf-device-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.2rem}
.bf-device-name{font-weight:700;font-size:0.8rem}
.bf-tier{font-size:0.55rem}
.bf-device-meta{font-size:0.65rem;color:#94a3b8;margin-bottom:0.15rem}
.bf-device-desc{font-size:0.6rem;color:#64748b}
.bf-device-price{font-size:0.6rem;color:#475569;margin-top:0.1rem}

/* Active Device Banner */
#bf-active-banner{display:none;align-items:center;gap:0.6rem;padding:0.5rem 0.75rem;background:linear-gradient(135deg,#1e1b4b,#0f172a);border:1px solid #8b5cf640;border-radius:0.4rem;margin-bottom:0.75rem}
.bf-active-icon{font-size:1.5rem}
.bf-active-name{font-weight:700;font-size:0.85rem}
.bf-active-specs{font-size:0.65rem;color:#94a3b8}
.bf-active-info{flex:1}

/* Connection */
.bf-conn-tabs{display:flex;gap:0.25rem;margin-bottom:0.75rem}
.bf-conn-tab{padding:0.3rem 0.6rem;font-size:0.7rem;background:#1e293b;color:#94a3b8;border:1px solid transparent;border-radius:0.3rem;cursor:pointer;transition:all 0.15s;font-family:inherit}
.bf-conn-tab.active{background:#3b82f620;color:#60a5fa;border-color:#3b82f650}
.bf-conn-tab:hover{background:#334155}
.bf-conn-status{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;background:#0a0e1a;border-radius:0.3rem;margin-bottom:0.75rem;font-size:0.8rem}
.bf-status-dot{width:10px;height:10px;border-radius:50%;background:#475569;transition:background 0.3s}
.bf-status-dot.connected{background:#10b981;box-shadow:0 0 8px #10b98180}
.bf-device-label{font-size:0.65rem;color:#64748b;margin-left:auto}
.bf-conn-panel{animation:fadeIn 0.15s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Form Fields */
.bf-field{margin-bottom:0.5rem}
.bf-field label{display:block;font-size:0.65rem;color:#94a3b8;margin-bottom:0.2rem}
.bf-input{width:100%;padding:0.4rem 0.6rem;background:#0a0e1a;border:1px solid #334155;border-radius:0.3rem;color:#e2e8f0;font-size:0.75rem;font-family:inherit;transition:border-color 0.2s}
.bf-input:focus{outline:none;border-color:#3b82f6}
.bf-row{display:flex;gap:0.5rem}
.bf-row .bf-field{flex:1}
.bf-hint{font-size:0.65rem;color:#64748b;margin-bottom:0.5rem}

/* Buttons */
.bf-btn{padding:0.45rem 0.9rem;border:none;border-radius:0.35rem;font-size:0.75rem;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:inherit;display:inline-flex;align-items:center;gap:0.3rem}
.bf-btn:hover{filter:brightness(1.15)}
.bf-btn:disabled{opacity:0.5;cursor:not-allowed}
.bf-btn-primary{background:#3b82f6;color:white}
.bf-btn-scan{background:linear-gradient(135deg,#10b981,#059669);color:white;width:100%;justify-content:center;padding:0.65rem;font-size:0.85rem}
.bf-btn-sm{padding:0.25rem 0.5rem;font-size:0.65rem}
.bf-btn-outline{background:transparent;border:1px solid #334155;color:#94a3b8}
.bf-btn-outline:hover{border-color:#64748b;color:#e2e8f0}
.bf-btn-danger{background:#ef444430;color:#ef4444;border:1px solid #ef444450}
.bf-btn-gold{background:#fbbf2420;color:#fbbf24;border:1px solid #fbbf2440}
.bf-btn-silver{background:#94a3b820;color:#94a3b8;border:1px solid #94a3b840}
.bf-btn-metal{background:#f9731620;color:#f97316;border:1px solid #f9731640}

/* Live Readout */
.bf-signal-ring{width:100px;height:100px;border-radius:50%;border:4px solid #475569;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 0.75rem;transition:border-color 0.3s}
.bf-signal-value{font-size:2rem;font-weight:800;line-height:1}
.bf-signal-label{font-size:0.6rem;color:#94a3b8}
.bf-readout-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.35rem}
.bf-rg-item{display:flex;justify-content:space-between;padding:0.25rem 0.4rem;background:#0a0e1a;border-radius:0.25rem;font-size:0.7rem}
.bf-rg-label{color:#64748b}
.bf-rg-value{font-weight:600;color:#e2e8f0}

/* Calibration */
.bf-cal-buttons{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:0.5rem}
.bf-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.3rem;margin-bottom:0.5rem}
.bf-preset{background:#0a0e1a;padding:0.3rem 0.5rem;border-radius:0.25rem;font-size:0.6rem;text-align:center}
.bf-preset span{display:block;color:#64748b;font-size:0.55rem}
.bf-preset b{color:#a78bfa}
.bf-cal-status{font-size:0.7rem;margin-top:0.3rem}
.bf-cal-active{color:#fbbf24}
.bf-cal-ok{color:#34d399}
.bf-cal-err{color:#ef4444}

/* Detection Types */
.bf-det-types{display:flex;flex-wrap:wrap;gap:0.25rem;margin-bottom:0.5rem}
.bf-det-badge{font-size:0.6rem;padding:0.15rem 0.4rem;background:#1e293b;border-radius:0.2rem;color:#94a3b8;text-transform:capitalize}

/* Scan */
.bf-scan-status{margin:0.5rem 0;font-size:0.75rem}
.bf-scan-active{color:#ef4444;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.bf-scan-done{color:#34d399}
.bf-results-summary{display:flex;gap:0.5rem;margin:0.5rem 0}
.bf-rs-stat{flex:1;text-align:center;padding:0.4rem;background:#0a0e1a;border-radius:0.3rem;font-size:0.65rem;color:#94a3b8}
.bf-rs-num{display:block;font-size:1.1rem;font-weight:700;color:#e2e8f0}
.bf-results-types{display:flex;flex-wrap:wrap;gap:0.25rem;margin-bottom:0.5rem}
.bf-results-actions{display:flex;gap:0.3rem}

/* Detection Log */
.bf-log-empty{text-align:center;color:#64748b;padding:1rem;font-size:0.75rem}
.bf-log-row{display:flex;gap:0.5rem;padding:0.3rem 0.5rem;border-bottom:1px solid #1e293b;font-size:0.7rem;animation:fadeIn 0.15s ease}
.bf-log-type{font-weight:700;text-transform:capitalize;min-width:60px}
.bf-log-depth{color:#94a3b8;min-width:50px}
.bf-log-conf{color:#64748b;min-width:35px}
.bf-log-time{color:#475569;margin-left:auto;font-size:0.6rem}
#bf-log{max-height:250px;overflow-y:auto}

/* Toast */
.bf-toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(100px);background:#ef4444;color:white;padding:0.5rem 1rem;border-radius:0.4rem;font-size:0.75rem;z-index:999;transition:transform 0.3s ease;pointer-events:none}
.bf-toast.show{transform:translateX(-50%) translateY(0)}

/* Brand-specific accent overrides (set via CSS variable) */
.bf-accent{color:var(--brand-color,#3b82f6)}
.bf-header-icon{background:linear-gradient(135deg,var(--brand-color,#3b82f6),var(--brand-color-dark,#1d4ed8))}

/* ══════════════════════════════════════════════ */
/* PLUGIN PANEL                                   */
/* ══════════════════════════════════════════════ */
.bf-plugin-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem}
.bf-plugin-name{font-size:1rem;font-weight:800;background:linear-gradient(135deg,var(--brand-color,#3b82f6),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bf-plugin-badge{font-size:0.55rem;font-weight:700;padding:0.15rem 0.45rem;background:#10b98120;color:#10b981;border:1px solid #10b98140;border-radius:0.2rem;letter-spacing:0.05em}
.bf-plugin-features{display:flex;flex-wrap:wrap;gap:0.3rem;margin-bottom:0.75rem}
.bf-feat-chip{font-size:0.6rem;padding:0.2rem 0.5rem;background:#1e293b;border:1px solid #334155;border-radius:0.25rem;color:#94a3b8;transition:all 0.15s}
.bf-feat-chip:hover{border-color:var(--brand-color,#3b82f6);color:#e2e8f0}
.bf-plugin-section{margin-bottom:0.6rem}
.bf-plugin-section b{font-size:0.7rem;color:#94a3b8;display:block;margin-bottom:0.35rem}
.bf-scan-modes{display:flex;flex-wrap:wrap;gap:0.25rem}
.bf-mode-btn{background:#0a0e1a;border:1px solid #334155;color:#64748b;transition:all 0.15s}
.bf-mode-btn.active{background:var(--brand-color,#3b82f6)20;color:var(--brand-color,#3b82f6);border-color:var(--brand-color,#3b82f6)50}
.bf-mode-btn:hover{border-color:#64748b;color:#e2e8f0}
.bf-sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem}
.bf-sp-item{background:#0a0e1a;padding:0.35rem 0.5rem;border-radius:0.25rem;font-size:0.65rem;display:flex;justify-content:space-between;align-items:center}
.bf-sp-item span{color:#64748b}
.bf-sp-item b{color:#a78bfa;font-size:0.7rem}
.bf-ai-models{display:flex;flex-wrap:wrap;gap:0.25rem}
.bf-ai-chip{font-size:0.6rem;padding:0.15rem 0.45rem;background:#8b5cf610;border:1px solid #8b5cf630;border-radius:0.2rem;color:#a78bfa}

/* ══════════════════════════════════════════════ */
/* ENHANCED FEATURES                              */
/* ══════════════════════════════════════════════ */
.bf-feat-banner{font-size:0.7rem;color:#94a3b8;padding:0.5rem 0.75rem;background:linear-gradient(135deg,#1e1b4b40,#0f172a);border:1px solid #8b5cf620;border-radius:0.35rem;margin-bottom:0.75rem;text-align:center}
.bf-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem}
.bf-feat-card{background:#0a0e1a;border:1px solid #1e293b;border-radius:0.4rem;padding:0.6rem;cursor:pointer;transition:all 0.2s;text-align:center}
.bf-feat-card:hover{border-color:var(--brand-color,#3b82f6);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.bf-feat-icon{font-size:1.5rem;margin-bottom:0.25rem}
.bf-feat-title{font-size:0.7rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem}
.bf-feat-sub{font-size:0.55rem;color:#64748b;line-height:1.3}
.bf-feat-empty{text-align:center;color:#64748b;padding:1.5rem;font-size:0.75rem}
#bf-feat-output{background:#0a0e1a;border:1px solid #1e293b;border-radius:0.4rem;padding:0.75rem;margin-top:0.5rem}

/* AI Classifier */
.bf-ai-header{font-size:0.85rem;font-weight:700;margin-bottom:0.5rem}
.bf-ai-models-active{font-size:0.6rem;color:#64748b;margin-bottom:0.75rem;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center}
.bf-ai-results{display:flex;flex-direction:column;gap:0.5rem}
.bf-ai-result{background:#0f172a;border:1px solid #1e293b;border-radius:0.35rem;padding:0.5rem 0.6rem}
.bf-ai-type{font-size:0.8rem;font-weight:700;margin-bottom:0.25rem}
.bf-ai-stats{display:flex;flex-wrap:wrap;gap:0.5rem;font-size:0.6rem;color:#94a3b8;margin-bottom:0.35rem}
.bf-ai-bar{height:4px;background:#1e293b;border-radius:2px;overflow:hidden}
.bf-ai-bar div{height:100%;border-radius:2px;transition:width 0.5s ease}

/* Signal Compare */
.bf-compare-header{font-size:0.85rem;font-weight:700;margin-bottom:0.5rem}
.bf-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.5rem}
.bf-compare-col{background:#0f172a;border:1px solid #1e293b;border-radius:0.3rem;padding:0.5rem;font-size:0.7rem;display:flex;flex-direction:column;gap:0.2rem}
.bf-compare-diff{font-size:0.7rem;color:#fbbf24;text-align:center;padding:0.4rem;background:#fbbf2410;border-radius:0.25rem}

/* Target Tracker */
.bf-tracker-header{font-size:0.85rem;font-weight:700;margin-bottom:0.5rem}
.bf-tracker-list{display:flex;flex-direction:column;gap:0.3rem}
.bf-tracker-item{display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0.5rem;background:#0f172a;border:1px solid #1e293b;border-radius:0.3rem;font-size:0.7rem}
.bf-tracker-id{font-size:0.6rem;font-weight:700;color:white;padding:0.1rem 0.35rem;border-radius:0.2rem;min-width:24px;text-align:center}
.bf-tracker-type{font-weight:600;min-width:80px}
.bf-tracker-conf{margin-left:auto;font-weight:700;color:#34d399}

/* ══════════════════════════════════════════════ */
/* SUPERIOR LIVE DETECTOR                         */
/* ══════════════════════════════════════════════ */
.bf-live-controls{display:flex;align-items:center;gap:0.75rem}
.bf-btn-live{background:linear-gradient(135deg,#ef4444,#dc2626);color:white;font-size:0.85rem;padding:0.6rem 1.2rem;width:100%;justify-content:center;animation:pulse 2s infinite}
.bf-live-status{font-size:0.75rem;font-weight:700;color:#ef4444;animation:pulse 1s infinite}
.bf-live-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.bf-live-cell{background:#0a0e1a;border:1px solid #1e293b;border-radius:0.4rem;padding:0.5rem;text-align:center}
.bf-live-label{font-size:0.65rem;color:#64748b;margin-bottom:0.35rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.bf-live-cell canvas{width:100%;border-radius:0.3rem;background:#0a0e1a}
.bf-target-lock{border:2px solid #475569;border-radius:0.5rem;padding:1rem;text-align:center;transition:border-color 0.3s;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem}
.bf-tl-main{font-size:2.5rem;font-weight:900;color:#e2e8f0;line-height:1}
.bf-tl-type{font-size:0.85rem;font-weight:700;text-transform:capitalize}
.bf-tl-conf{font-size:1.5rem;font-weight:800}
.bf-tl-depth{font-size:0.8rem;color:#94a3b8}
.bf-live-bottom{display:flex;gap:0.3rem;margin-top:0.5rem;justify-content:center}

/* ══════════════════════════════════════════════ */
/* REPORT ENGINE                                  */
/* ══════════════════════════════════════════════ */
.bf-report-actions{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:0.75rem}
.bf-rpt-summary{background:linear-gradient(135deg,#1e1b4b40,#0f172a);border:1px solid #8b5cf620;border-radius:0.4rem;padding:0.75rem;margin-bottom:0.75rem}
.bf-rpt-summary h3{font-size:0.9rem;margin-bottom:0.4rem}
.bf-rpt-summary p{font-size:0.7rem;color:#94a3b8;line-height:1.5}
.bf-rpt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem;margin-bottom:0.75rem}
.bf-rpt-stat{background:#0a0e1a;border:1px solid #1e293b;border-radius:0.35rem;padding:0.5rem;text-align:center}
.bf-rpt-num{display:block;font-size:1.25rem;font-weight:800;color:var(--brand-color,#3b82f6);margin-bottom:0.1rem}
.bf-rpt-stat span:last-child{font-size:0.6rem;color:#64748b}
.bf-rpt-charts{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.75rem}
.bf-rpt-charts canvas{width:100%;border-radius:0.35rem;background:#0f172a;border:1px solid #1e293b}
.bf-rpt-section{margin-bottom:0.75rem}
.bf-rpt-section h4{font-size:0.8rem;margin-bottom:0.5rem}
.bf-rpt-breakdown{display:flex;flex-direction:column;gap:0.35rem}
.bf-rpt-row{display:grid;grid-template-columns:100px 70px 120px 60px 1fr;gap:0.4rem;align-items:center;font-size:0.65rem;padding:0.3rem 0.5rem;background:#0a0e1a;border-radius:0.25rem}
.bf-rpt-type{font-weight:700;text-transform:capitalize}
.bf-rpt-bar{height:4px;background:#1e293b;border-radius:2px;overflow:hidden}
.bf-rpt-bar div{height:100%;border-radius:2px}
.bf-rpt-table{width:100%;border-collapse:collapse;font-size:0.65rem}
.bf-rpt-table th{text-align:left;padding:0.35rem 0.5rem;background:#1e293b;color:#94a3b8;font-weight:600;border-bottom:1px solid #334155}
.bf-rpt-table td{padding:0.3rem 0.5rem;border-bottom:1px solid #1e293b40}
.bf-rpt-table tr:hover td{background:#1e293b30}

/* ══════════════════════════════════════════════ */
/* RESPONSIVE                                     */
/* ══════════════════════════════════════════════ */
@media(max-width:600px){
    .bf-header{padding:0.75rem}
    .bf-header-icon{width:40px;height:40px;font-size:1.2rem}
    .bf-header-info h1{font-size:1rem}
    .bf-main{padding:0.75rem}
    .bf-section{padding:0.75rem}
    .bf-row{flex-direction:column}
    .bf-readout-grid{grid-template-columns:1fr 1fr}
    .bf-preset-grid{grid-template-columns:1fr 1fr}
    .bf-results-summary{flex-direction:column}
    .bf-feat-grid{grid-template-columns:1fr 1fr}
    .bf-live-grid{grid-template-columns:1fr}
    .bf-sp-grid{grid-template-columns:1fr}
    .bf-rpt-stats{grid-template-columns:1fr 1fr}
    .bf-rpt-charts{grid-template-columns:1fr}
    .bf-rpt-row{grid-template-columns:80px 50px 1fr;font-size:0.6rem}
    .bf-rpt-row span:nth-child(4){display:none}
    .bf-compare-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
    .bf-feat-grid{grid-template-columns:1fr}
    .bf-rpt-stats{grid-template-columns:1fr}
}