Electrical Field Tools — Ohm's Law · Resistor · Voltage Drop

{/* LEFT — FAULT SELECTOR + AI */}

SELECT FAULT TYPE

{FAULT_TYPES.map(f=>( ))}

{/* SYMPTOMS */} {fault&&(

SYMPTOMS TO CONFIRM

{fault.symptoms.map((s,i)=>(

{fault.icon} {s}

))}

REQUIRED TOOLS

{fault.tools.map((t,i)=>

🔧 {t}

)}

)} {/* AI QUERY */}

🤖 AI CIRCUIT EXPERT

Ask any troubleshooting question — megohmmeter readings, NFPA 72 wiring faults, isolation procedures, Class A vs B behavior

setAiQuery(e.target.value)} placeholder="e.g. Megohmmeter reads 0.2 MΩ — is that a ground fault? How do I isolate a Class A SLC loop open?"/>
          <button className="calc-btn" onClick={askAI} disabled={aiLoading||!aiQuery.trim()}>
            {aiLoading?<><span className="spin"/>QUERYING EXPERT...</>:"ASK →"}
          </button>
          {aiReply&&<div className="ai-reply"><AIRender text={aiReply}/></div>}
        </div>
      </div>

{/* RIGHT — STEP-BY-STEP */}
      <div className="trouble-right">
        {!fault?(
          <div className="no-fault">
            <div style={{fontSize:48,marginBottom:16}}>🔍</div>
            <div className="nf-title">Select a fault type to begin</div>
            <div className="nf-sub">Choose the fault condition you're troubleshooting on the left. The tool will walk you through a systematic isolation procedure step by step.</div>
            <div className="nf-types">
              {FAULT_TYPES.map(f=><div key={f.id} className="nf-type" style={{borderColor:f.color+"44",color:f.color}} onClick={()=>selectFault(f.id)}>{f.icon} {f.label}</div>)}
            </div>
          </div>
        ):(
          <>
            <div className="fault-header" style={{borderColor:fault.color+"44"}}>
              <div>
                <div className="fh-type" style={{color:fault.color}}>{fault.icon} {fault.label}</div>
                <div className="fh-desc">{fault.desc}</div>
              </div>
              <div style={{display:"flex",gap:8,flexShrink:0,flexWrap:"wrap"}}>
                <div className="progress-pill">{fault.steps.filter(s=>checked[s.n]).length}/{fault.steps.length} steps</div>
                {fault.steps.every(s=>checked[s.n])&&<button className="export-btn-sm" onClick={exportTroubleshootPDF}>⬇ Save Record</button>}
              </div>
            </div>

{/* PROGRESS BAR */}
            <div className="prog-track">
              <div className="prog-fill" style={{width:`${(fault.steps.filter(s=>checked[s.n]).length/fault.steps.length)*100}%`,background:fault.color}}/>
            </div>

{/* STEPS */}
            <div className="steps-list">
              {fault.steps.map((s,i)=>{
                const isDone=!!checked[s.n];
                const isActive=!isDone&&(i===0||checked[fault.steps[i-1]?.n]);
                return (
                  <div key={s.n} className={`step-card ${isDone?"step-done":isActive?"step-active":""}`} style={isActive?{borderColor:fault.color+"66"}:{}}>
                    <div className="sc-header" onClick={()=>setChecked(p=>({...p,[s.n]:!p[s.n]}))}>
                      <div className={`sc-num ${isDone?"sc-num-done":isActive?"sc-num-active":""}`} style={isDone?{background:fault.color}:isActive?{borderColor:fault.color,color:fault.color}:{}}>
                        {isDone?"✓":s.n}
                      </div>
                      <div className="sc-title-wrap">
                        <div className="sc-title" style={{color:isDone?"#4ade80":isActive?fault.color:"#94a3b8"}}>{s.title}</div>
                        {!isDone&&<div className="sc-action">{s.action}</div>}
                      </div>
                    </div>
                    {isActive&&(
                      <div className="sc-body">
                        <div className="sc-action-full">{s.action}</div>
                        <div className="reading-row">
                          <div className="cf-label">RECORD YOUR READING / OBSERVATION</div>
                          <input className="cf-input" value={readings[s.n]||""} onChange={e=>setReadings(p=>({...p,[s.n]:e.target.value}))} placeholder="e.g. 0.2 MΩ to ground, fault on left segment, bad termination at device 12..."/>
                        </div>
                        <button className="step-done-btn" style={{background:fault.color}} onClick={()=>setChecked(p=>({...p,[s.n]:true}))}>
                          Mark Step {s.n} Complete →
                        </button>
                      </div>
                    )}
                    {isDone&&readings[s.n]&&(
                      <div className="sc-reading-done">📋 {readings[s.n]}</div>
                    )}
                  </div>
                );
              })}
            </div>

{/* FIELD TIPS */}
            <div className="tips-card">
              <div className="tips-label">💡 FIELD TIPS FOR {fault.label.toUpperCase()}</div>
              {fault.tips.map((t,i)=><div key={i} className="tip-item">• {t}</div>)}
            </div>

{/* NOTES */}
            <div className="notes-card">
              <div className="calc-title">TECHNICIAN NOTES</div>
              <textarea className="cf-textarea" rows={3} value={notes} onChange={e=>setNotes(e.target.value)} placeholder="Document findings, readings, repair actions, parts replaced..."/>
              <button className="export-btn-full" onClick={exportTroubleshootPDF}>⬇ Download Troubleshooting Record PDF</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ── STYLES ────────────────────────────────────────────────────────────────────
function Styles(){return <style>{`
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

.hdr{background:#060d18;border-bottom:1px solid #1e3a5f;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.4);}
.brand{display:flex;align-items:center;gap:12px;}
.brand-icon{width:38px;height:38px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 0 16px rgba(245,158,11,.4);}
.brand-name{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:#e2e8f0;line-height:1;}
.brand-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;color:#334155;letter-spacing:2px;margin-top:3px;}
.tab-nav{display:flex;gap:6px;}
.tab-btn{background:rgba(255,255,255,.04);border:1px solid #1e3a5f;color:#475569;font-family:'IBM Plex Mono',monospace;font-size:10px;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .15s;letter-spacing:.5px;}
.tab-btn:hover{color:#e2e8f0;border-color:#334155;}
.tab-on{background:rgba(245,158,11,.12)!important;border-color:#f59e0b!important;color:#f59e0b!important;}

.app-body{padding:20px;max-width:1280px;margin:0 auto;}

/* OHM LAYOUT */
.ohm-layout{display:grid;grid-template-columns:320px 1fr;gap:18px;grid-template-rows:auto;}
@media(max-width:860px){.ohm-layout{grid-template-columns:1fr;}}
.ohm-left{display:flex;flex-direction:column;gap:16px;}
.ohm-right{display:flex;flex-direction:column;gap:16px;}

/* CARDS */
.calc-card{background:#0b1520;border:1px solid #1e3a5f;border-radius:12px;padding:18px;}
.calc-title{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;color:#334155;margin-bottom:14px;text-transform:uppercase;}

/* TRIANGLE */
.triangle-card{background:#0b1520;border:1px solid #1e3a5f;border-radius:12px;padding:18px;text-align:center;}
.tri-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:#f59e0b;margin-bottom:8px;}
.tri-wrap{max-width:200px;margin:0 auto;}
.tri-svg{width:100%;height:auto;}
.tri-formulas{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;}
.tri-formula{background:#060d18;border:1px solid #1e3a5f;border-radius:5px;padding:6px 8px;display:flex;justify-content:space-between;align-items:center;}
.tf-eq{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#e2e8f0;}
.tf-unit{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#334155;}

/* CALC FIELDS */
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.calc-field{display:flex;flex-direction:column;gap:4px;position:relative;}
.cf-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1px;}
.cf-input-wrap{position:relative;display:flex;align-items:center;}
.cf-input{width:100%;background:#060d18;border:1.5px solid #1e3a5f;border-radius:6px;color:#e2e8f0;font-family:'IBM Plex Mono',monospace;font-size:14px;padding:9px 36px 9px 11px;outline:none;transition:border-color .15s;}
.cf-input:focus{border-color:#f59e0b;}
.cf-input::placeholder{color:#1e3a5f;}
.cf-locked{border-color:#2563eb!important;background:rgba(37,99,235,.08)!important;}
.cf-unit{position:absolute;right:10px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;pointer-events:none;}
.cf-set-badge{font-family:'IBM Plex Mono',monospace;font-size:8px;color:#2563eb;letter-spacing:1px;margin-top:2px;}
.cf-calc-badge{font-family:'IBM Plex Mono',monospace;font-size:8px;color:#f59e0b;letter-spacing:1px;margin-top:2px;}
.cf-sel{width:100%;background:#060d18;border:1.5px solid #1e3a5f;border-radius:6px;color:#e2e8f0;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:9px 11px;outline:none;cursor:pointer;}
.cf-sel:focus{border-color:#f59e0b;}
.cf-textarea{width:100%;background:#060d18;border:1.5px solid #1e3a5f;border-radius:6px;color:#e2e8f0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;padding:9px 11px;outline:none;resize:none;margin-top:8px;}
.cf-textarea:focus{border-color:#f59e0b;}

.clear-btn{width:100%;background:transparent;border:1px solid #1e3a5f;color:#334155;font-family:'IBM Plex Mono',monospace;font-size:10px;padding:8px;border-radius:6px;cursor:pointer;transition:all .15s;letter-spacing:.5px;}
.clear-btn:hover{border-color:#f59e0b;color:#f59e0b;}
.calc-btn{width:100%;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:7px;color:#0a0f1a;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;padding:13px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;}
.calc-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,158,11,.3);}
.calc-btn:disabled{opacity:.4;cursor:not-allowed;}
.ghost-btn-sm{background:transparent;border:1px solid #1e3a5f;color:#334155;font-family:'IBM Plex Mono',monospace;font-size:9px;padding:6px 12px;border-radius:5px;cursor:pointer;transition:all .15s;letter-spacing:.5px;}
.ghost-btn-sm:hover{border-color:#f59e0b;color:#f59e0b;}
.ia-sm{background:#0f1a2e;border:1px solid #1e3a5f;color:#475569;width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ia-sm:hover{border-color:#dc2626;color:#dc2626;}

/* CONVERT */
.convert-card{background:#0b1520;border:1px solid #1e3a5f;border-radius:12px;padding:16px;}
.convert-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.convert-item{background:#060d18;border:1px solid #1e2a3a;border-radius:6px;padding:9px 10px;}
.conv-title{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#e2e8f0;margin-bottom:2px;}
.conv-formula{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#f59e0b;margin-bottom:2px;}
.conv-example{font-size:10px;color:#334155;}

/* WIRE TABLE */
.wire-table{width:100%;border-collapse:collapse;font-size:12px;}
.wire-table thead th{background:#060d18;color:#334155;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.5px;padding:7px 8px;text-align:left;border-bottom:1px solid #1e3a5f;}
.wire-table tbody td{padding:7px 8px;border-bottom:1px solid #0f1a2e;}
.wire-selected td{background:rgba(245,158,11,.08)!important;}
.wire-table tbody tr:hover td{background:#0f1a2e;}
.wire-awg{font-weight:700;color:#f59e0b;}
.mono{font-family:'IBM Plex Mono',monospace;font-size:11px;}

/* DROP RESULT */
.drop-result{background:#060d18;border:1px solid #1e3a5f;border-radius:8px;padding:14px;margin-top:12px;}
.dr-title{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#334155;letter-spacing:2px;margin-bottom:10px;}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dr-item{background:#0b1520;border:1px solid #1e3a5f;border-radius:6px;padding:10px;}
.dr-label{font-family:'IBM Plex Mono',monospace;font-size:8px;color:#334155;letter-spacing:1px;margin-bottom:4px;}
.dr-val{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#e2e8f0;font-weight:600;}
.dr-val.lg{font-size:22px;}
.dr-note{font-size:10px;color:#334155;font-weight:400;}
.dr-status{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.5px;margin-top:6px;padding:5px 8px;border-radius:4px;}
.status-pass{background:rgba(63,185,80,.1);color:#3fb950;border:1px solid rgba(63,185,80,.2);}
.status-warn{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.2);}
.status-fail{background:rgba(220,38,38,.1);color:#f87171;border:1px solid rgba(220,38,38,.2);}

/* TROUBLE LAYOUT */
.trouble-layout{display:grid;grid-template-columns:340px 1fr;gap:18px;}
@media(max-width:860px){.trouble-layout{grid-template-columns:1fr;}}
.trouble-left{display:flex;flex-direction:column;gap:12px;}
.trouble-right{display:flex;flex-direction:column;gap:12px;}
.fault-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;color:#334155;margin-bottom:2px;}
.fault-list{display:flex;flex-direction:column;gap:6px;}
.fault-btn{background:#0b1520;border:1px solid #1e3a5f;border-radius:9px;padding:12px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:10px;text-align:left;}
.fault-btn:hover{border-color:#334155;background:#0f1a2e;}
.fault-on{background:#0f1520!important;}
.fb-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.fb-name{font-size:13px;font-weight:600;margin-bottom:2px;}
.fb-desc{font-size:11px;color:#334155;line-height:1.4;}

.symptom-card{background:#0b1520;border-radius:10px;padding:14px;border:1px solid;}
.symp-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.5px;margin-bottom:8px;}
.symp-item{font-size:12px;color:#64748b;padding:3px 0;border-bottom:1px solid #0f1a2e;line-height:1.5;}
.symp-item:last-child{border-bottom:none;}
.tools-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#334155;letter-spacing:1.5px;margin:10px 0 6px;}
.tool-item{font-size:11px;color:#475569;padding:2px 0;}

.ai-box{background:#0b1520;border:1px solid #1e3a5f;border-radius:12px;padding:16px;}
.ai-box-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#f59e0b;letter-spacing:2px;margin-bottom:4px;}
.ai-box-sub{font-size:11px;color:#334155;line-height:1.5;margin-bottom:10px;}
.ai-inp{width:100%;background:#060d18;border:1.5px solid #1e3a5f;border-radius:6px;color:#e2e8f0;font-family:'IBM Plex Sans',sans-serif;font-size:12px;padding:9px 11px;outline:none;resize:none;margin-bottom:8px;transition:border-color .15s;}
.ai-inp:focus{border-color:#f59e0b;}
.ai-inp::placeholder{color:#1e3a5f;}
.ai-reply{margin-top:10px;background:#060d18;border:1px solid #1e3a5f;border-radius:7px;padding:12px;max-height:220px;overflow-y:auto;}
.ai-reply::-webkit-scrollbar{width:4px;}
.ai-reply::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:2px;}

.no-fault{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:440px;text-align:center;background:#0b1520;border:1px solid #1e3a5f;border-radius:12px;padding:40px 24px;}
.nf-title{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#475569;margin-bottom:8px;}
.nf-sub{font-size:13px;color:#334155;max-width:320px;line-height:1.6;margin-bottom:24px;}
.nf-types{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.nf-type{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:6px 12px;border-radius:5px;border:1px solid;cursor:pointer;transition:all .15s;}
.nf-type:hover{opacity:.8;}

.fault-header{background:#0b1520;border:1px solid;border-radius:12px;padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.fh-type{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:5px;}
.fh-desc{font-size:12px;color:#475569;line-height:1.5;}
.progress-pill{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#334155;background:#060d18;border:1px solid #1e3a5f;padding:5px 10px;border-radius:20px;white-space:nowrap;}
.export-btn-sm{background:#1e3a5f;border:none;border-radius:5px;color:#e2e8f0;font-family:'IBM Plex Mono',monospace;font-size:9px;padding:5px 10px;cursor:pointer;white-space:nowrap;}
.export-btn-sm:hover{background:#2563eb;}

.prog-track{background:#060d18;border-radius:4px;height:6px;overflow:hidden;}
.prog-fill{height:100%;border-radius:4px;transition:width .4s ease;}

.steps-list{display:flex;flex-direction:column;gap:8px;}
.step-card{background:#0b1520;border:1px solid #1e3a5f;border-radius:10px;overflow:hidden;transition:all .2s;}
.step-done{border-color:#16a34a22!important;background:#0a1a0f!important;}
.step-active{background:#0c1825!important;}
.sc-header{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer;}
.sc-num{width:26px;height:26px;border-radius:50%;border:1.5px solid #1e3a5f;color:#334155;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.sc-num-done{border:none!important;color:#fff!important;}
.sc-num-active{border-width:2px!important;}
.sc-title-wrap{flex:1;}
.sc-title{font-size:13px;font-weight:600;margin-bottom:2px;transition:color .2s;}
.sc-action{font-size:11px;color:#334155;line-height:1.5;}
.sc-body{padding:0 14px 14px 52px;}
.sc-action-full{font-size:13px;color:#94a3b8;line-height:1.65;margin-bottom:12px;}
.reading-row{margin-bottom:10px;}
.step-done-btn{background:#1e3a5f;border:none;border-radius:6px;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1px;padding:9px 16px;cursor:pointer;transition:all .15s;}
.step-done-btn:hover{opacity:.85;}
.sc-reading-done{padding:4px 14px 10px 52px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#3fb950;}

.tips-card{background:#0b1520;border:1px solid #1e4a1e;border-radius:10px;padding:14px 16px;}
.tips-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:#3fb950;letter-spacing:1.5px;margin-bottom:8px;}
.tip-item{font-size:12px;color:#475569;padding:4px 0;line-height:1.5;border-bottom:1px solid #0f1a0f;}
.tip-item:last-child{border-bottom:none;}

.notes-card{background:#0b1520;border:1px solid #1e3a5f;border-radius:10px;padding:14px 16px;}
.export-btn-full{width:100%;background:#1e3a5f;border:none;border-radius:7px;color:#e2e8f0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;padding:11px;cursor:pointer;margin-top:10px;transition:all .15s;}
.export-btn-full:hover{background:#2563eb;}

.spin{display:inline-block;width:10px;height:10px;border:2px solid rgba(10,15,26,.3);border-top-color:#0a0f1a;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* RESISTOR IDENTIFIER */
.res-mode-btn{background:#060d18;border:1px solid #1e3a5f;color:#475569;font-family:'IBM Plex Mono',monospace;font-size:9px;padding:5px 12px;border-radius:5px;cursor:pointer;transition:all .15s;letter-spacing:.5px;}
.res-mode-btn:hover{border-color:#f59e0b;color:#f59e0b;}
.res-mode-on{background:rgba(245,158,11,.12)!important;border-color:#f59e0b!important;color:#f59e0b!important;}
.band-count-btn{background:#060d18;border:1px solid #1e3a5f;color:#475569;font-family:'IBM Plex Mono',monospace;font-size:10px;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .15s;}
.band-count-btn:hover{border-color:#f59e0b;color:#f59e0b;}
.band-count-on{background:rgba(245,158,11,.12)!important;border-color:#f59e0b!important;color:#f59e0b!important;font-weight:600!important;}
.resistor-visual{margin-bottom:16px;}
.res-diagram{display:flex;align-items:center;justify-content:center;height:68px;margin-bottom:12px;}
.res-wire{height:3px;flex:1;max-width:70px;}
.res-wire-l{background:linear-gradient(90deg,#1a1a1a,#888);}
.res-wire-r{background:linear-gradient(90deg,#888,#1a1a1a);}
.res-body-wrap{}
.res-body-bg{background:linear-gradient(180deg,#b89050 0%,#ddb060 20%,#f0c870 50%,#ddb060 80%,#b89050 100%);border-radius:14px;padding:7px 10px;width:220px;height:54px;display:flex;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.3);}
.res-stripes-wrap{display:flex;gap:6px;align-items:stretch;height:36px;width:100%;}
.res-stripe-block{flex:1;border-radius:2px;box-shadow:inset 1px 0 0 rgba(255,255,255,.15),inset -1px 0 0 rgba(0,0,0,.3);}
.res-band-row{display:flex;gap:4px;justify-content:center;padding:0 20px;}
.res-band-label-col{flex:1;text-align:center;min-width:0;}
.res-band-swatch{width:22px;height:22px;border-radius:4px;margin:0 auto 3px;}
.band-drop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:14px;}
.band-drop-item{display:flex;flex-direction:column;gap:4px;}
.res-result-box{background:#060d18;border:1px solid #1e3a5f;border-radius:10px;padding:16px;}
.rrb-main{border-bottom:1px solid #1e3a5f;padding-bottom:12px;margin-bottom:12px;}
.rrb-label{font-family:'IBM Plex Mono',monospace;font-size:8px;color:#334155;letter-spacing:2px;margin-bottom:4px;}
.rrb-value{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:700;color:#f59e0b;line-height:1;}
.rrb-raw{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#334155;margin-top:3px;}
.rrb-extras{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:640px){.rrb-extras{grid-template-columns:1fr 1fr;}}
.rrb-extra-item{background:#0b1520;border:1px solid #1e3a5f;border-radius:6px;padding:10px;}
.common-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.common-res-item{background:#060d18;border:1px solid #1e3a5f;border-radius:7px;padding:10px 10px 8px;cursor:pointer;transition:all .15s;}
.common-res-item:hover{border-color:#f59e0b;background:#0a1420;transform:translateY(-1px);}
.cri-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;color:#f59e0b;margin-top:3px;}
.cri-use{font-size:10px;color:#334155;margin-top:3px;line-height:1.4;}
`}</style>;}

const rootEl = document.getElementById('root');
const loader = document.getElementById('loadingMsg');
if (loader) loader.remove();
ReactDOM.createRoot(rootEl).render(<App />);
</script>
</body>
</html>