:root{--c-dark: #0C2032;--c-dark-2: #27343E;--c-blue: #008FCF;--c-light: #E9EFF4;--c-green: #2B9F5E;--c-amber: #D4921C;--c-red: #C93B3B;--c-white: #FFFFFF;--c-grey: #5D6870;--c-light-grey: #C5CCD3}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--c-light);color:var(--c-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;min-height:100vh}.app{max-width:1400px;margin:0 auto;padding:16px}header.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--c-dark);color:var(--c-white);border-radius:8px;margin-bottom:16px}header.topbar h1{margin:0;font-size:18px;font-weight:600;letter-spacing:.2px}header.topbar .brand{height:26px;display:block}.main{display:grid;grid-template-columns:minmax(320px,1fr) minmax(400px,1.2fr);gap:16px}@media (max-width: 1023px){.main{grid-template-columns:1fr}}.panel{background:var(--c-white);border-radius:8px;padding:12px;box-shadow:0 1px 3px #0c203214}.panel h2{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--c-grey);font-weight:600}.bearing-panel{display:flex;flex-direction:column;align-items:center}.bearing-canvas-wrap{width:100%;aspect-ratio:1;max-width:520px;background:var(--c-dark);border-radius:6px;overflow:hidden}.bearing-canvas-wrap canvas{display:block;width:100%;height:100%}.freq-info{margin-top:10px;width:100%;font-size:13px;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}.freq-info .chip{background:var(--c-light);padding:7px 10px;border-radius:4px;border-left:3px solid var(--c-blue)}.freq-info .chip.bpfo{border-left-color:var(--c-red)}.freq-info .chip.bpfi{border-left-color:var(--c-blue)}.freq-info .chip.bsf{border-left-color:var(--c-green)}.freq-info .chip.ftf{border-left-color:var(--c-amber)}.freq-info .chip.shaft{border-left-color:var(--c-grey)}.freq-info .chip .k{color:var(--c-grey);font-size:11px;display:block;text-transform:uppercase;letter-spacing:.8px}.freq-info .chip .v{color:var(--c-dark);font-weight:600;font-size:15px}.signals{display:flex;flex-direction:column;gap:12px}.sigbox{background:var(--c-dark);border-radius:6px;padding:8px}.sigbox .sighead{display:flex;justify-content:space-between;align-items:center;color:var(--c-light-grey);font-size:13px;margin-bottom:6px;padding:0 4px}.sigbox .sighead .ttl{color:var(--c-white);font-weight:600;letter-spacing:.5px}.sigbox .sighead .sub{color:var(--c-light-grey);font-size:12px}.sigbox canvas{display:block;width:100%;height:120px;border-radius:4px}.sigbox.env canvas{height:160px}.controls{margin-top:16px;background:var(--c-white);border-radius:8px;padding:16px;box-shadow:0 1px 3px #0c203214}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px}.ctrl label.top{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--c-grey);margin-bottom:6px;font-weight:600}.ctrl .row{display:flex;align-items:center;gap:10px}.ctrl .val{min-width:70px;font-weight:600;font-size:15px;color:var(--c-dark)}input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:var(--c-light-grey);border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--c-blue);border-radius:50%;cursor:pointer;border:2px solid var(--c-white);box-shadow:0 1px 3px #0003}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--c-blue);border-radius:50%;cursor:pointer;border:2px solid var(--c-white)}select,button,input[type=number]{font:inherit;padding:6px 10px;border-radius:4px;border:1px solid var(--c-light-grey);background:var(--c-white);color:var(--c-dark);cursor:pointer}input[type=number]{width:88px;cursor:text}.dim-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dim-row .dim{display:flex;flex-direction:column;gap:2px}.dim-row .dim span{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--c-grey)}.ctrl.wide{grid-column:span 2}.explain{margin-top:12px;padding:14px 16px;background:var(--c-light);border-radius:6px;font-size:14px;line-height:1.55;color:var(--c-dark)}.explain h3{margin:0 0 6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--c-grey);font-weight:600}.explain p{margin:0 0 8px}.explain p:last-child{margin-bottom:0}.explain strong{color:var(--c-dark)}.explain .tag{display:inline-block;padding:1px 6px;border-radius:3px;font-weight:600;font-size:11px;margin-right:2px}.explain .tag.sig{background:#d4921c2e;color:#8a5b0c}.explain .tag.fft,.explain .tag.bpfi{background:#008fcf2e;color:#004e71}.explain .tag.bpfo{background:#c93b3b2e;color:#7a1f1f}.explain .tag.bsf{background:#2b9f5e2e;color:#134f2a}.explain .tag.sound{background:#5d687033;color:var(--c-dark)}.explain .tag.drag{background:#2b9f5e2e;color:#134f2a}.explain .tag.imb{background:#d4921c33;color:#8a5b0c}button.primary{background:var(--c-blue);color:var(--c-white);border-color:var(--c-blue);font-weight:600;padding:8px 16px}button.primary:hover{background:#0078ac}.top-bar{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap}.top-bar .speed-inline{display:flex;align-items:center;gap:8px;flex:1 1 240px;max-width:360px;min-width:220px}.top-bar .speed-inline label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--c-grey);font-weight:600;white-space:nowrap}.top-bar .speed-inline .val{min-width:46px;text-align:right;font-weight:600;font-size:15px;color:var(--c-dark)}.group{border:1px solid var(--c-light-grey);border-radius:6px;margin-bottom:8px;overflow:hidden;background:var(--c-white)}.group-header{width:100%;background:var(--c-light);border:none;text-align:left;padding:11px 14px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--c-grey);cursor:pointer;display:flex;align-items:center;gap:10px;border-radius:0;transition:background .12s}.group-header:hover{background:#e7edf2}.group.open .group-header{color:var(--c-dark)}.group-header .chev{display:inline-block;width:10px;font-size:9px;color:var(--c-grey);transition:transform .15s}.group.open .group-header .chev{transform:rotate(90deg);color:var(--c-dark)}.group-body{padding:14px}.audio-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.sev-label{font-size:13px;color:var(--c-grey)}.sev-label .v{color:var(--c-dark);font-weight:600;margin-left:6px}
