BiasLab2025/perception2
0
1/* =========================================2 LaserPerception Design System3 ========================================= */4 5:root {6 /* --- Colors --- */7 --bg: #060914;8 --panel: #0b1026;9 --panel2: #0a0f22;10 11 --stroke: rgba(255, 255, 255, .08);12 --stroke2: rgba(255, 255, 255, .12);13 14 --text: rgba(255, 255, 255, .92);15 --muted: rgba(255, 255, 255, .62);16 --faint: rgba(255, 255, 255, .42);17 18 --good: #22c55e;19 --warn: #f59e0b;20 --bad: #ef4444;21 22 --accent: #7c3aed;23 --cyan: #22d3ee;24 --mag: #fb7185;25 26 /* --- Effects --- */27 --shadow: 0 18px 60px rgba(0, 0, 0, .55);28 29 /* --- Typography --- */30 --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;31 --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;32}33 34* {35 box-sizing: border-box;36}37 38html,39body {40 height: 100%;41 margin: 0;42}43 44body {45 background:46 radial-gradient(1200px 700px at 20% 8%, rgba(124, 58, 237, .22), transparent 60%),47 radial-gradient(900px 500px at 82% 18%, rgba(34, 211, 238, .18), transparent 60%),48 radial-gradient(800px 520px at 52% 82%, rgba(251, 113, 133, .10), transparent 65%),49 linear-gradient(180deg, #040614, #060914);50 color: var(--text);51 font-family: var(--sans);52 overflow: hidden;53}54 55/* =========================================56 Layout & Structure57 ========================================= */58 59#app {60 height: 100%;61 display: flex;62 flex-direction: column;63}64 65header {66 display: flex;67 align-items: center;68 justify-content: space-between;69 padding: 14px 16px 12px;70 border-bottom: 1px solid var(--stroke);71 background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);72}73 74.workspace {75 flex: 1;76 display: grid;77 grid-template-columns: 540px 1fr;78 /* Fixed sidebar width */79 gap: 12px;80 padding: 12px;81 min-height: 0;82}83 84aside,85main {86 background: rgba(255, 255, 255, .02);87 border: 1px solid var(--stroke);88 border-radius: 16px;89 box-shadow: var(--shadow);90 overflow: hidden;91 display: flex;92 flex-direction: column;93 min-height: 0;94}95 96footer {97 padding: 10px 14px;98 border-top: 1px solid var(--stroke);99 color: var(--muted);100 font-size: 11px;101 display: flex;102 justify-content: space-between;103 align-items: center;104 gap: 10px;105 background: linear-gradient(0deg, rgba(255, 255, 255, .03), transparent);106}107 108footer .mono {109 font-family: var(--mono);110 color: rgba(255, 255, 255, .76);111}112 113/* =========================================114 Brand & Status115 ========================================= */116 117.brand {118 display: flex;119 gap: 12px;120 align-items: center;121 min-width: 420px;122}123 124.logo {125 width: 40px;126 height: 40px;127 border-radius: 14px;128 background:129 radial-gradient(circle at 30% 30%, rgba(34, 211, 238, .9), rgba(124, 58, 237, .9) 55%, rgba(0, 0, 0, .1) 70%),130 linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 60%);131 box-shadow: 0 16px 46px rgba(124, 58, 237, .25);132 border: 1px solid rgba(255, 255, 255, .16);133 position: relative;134 overflow: hidden;135}136 137.logo:after {138 content: "";139 position: absolute;140 inset: -40px;141 background: conic-gradient(from 180deg, transparent, rgba(255, 255, 255, .10), transparent);142 animation: spin 10s linear infinite;143}144 145@keyframes spin {146 to {147 transform: rotate(360deg);148 }149}150 151.brand h1 {152 font-size: 14px;153 margin: 0;154 letter-spacing: .16em;155 text-transform: uppercase;156}157 158.brand .sub {159 font-size: 12px;160 color: var(--muted);161 margin-top: 2px;162 line-height: 1.2;163}164 165.status-row {166 display: flex;167 gap: 10px;168 align-items: center;169 flex-wrap: wrap;170 justify-content: flex-end;171}172 173/* =========================================174 Components: Cards & Panels175 ========================================= */176 177.card {178 padding: 12px 12px 10px;179 border-bottom: 1px solid var(--stroke);180 position: relative;181}182 183.card:last-child {184 border-bottom: none;185}186 187.card h2 {188 margin: 0;189 font-size: 12px;190 letter-spacing: .14em;191 text-transform: uppercase;192 color: rgba(255, 255, 255, .78);193}194 195.card small {196 color: var(--muted);197}198 199.card .hint {200 color: var(--faint);201 font-size: 11px;202 line-height: 1.35;203 margin-top: 6px;204}205 206.panel {207 background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));208 border: 1px solid var(--stroke);209 border-radius: 16px;210 padding: 10px;211 box-shadow: 0 10px 30px rgba(0, 0, 0, .35);212 overflow: hidden;213 position: relative;214}215 216.panel h3 {217 margin: 0 0 8px;218 font-size: 12px;219 letter-spacing: .14em;220 text-transform: uppercase;221 color: rgba(255, 255, 255, .78);222 display: flex;223 align-items: center;224 justify-content: space-between;225 gap: 8px;226}227 228.panel h3 .rightnote {229 font-size: 11px;230 color: var(--muted);231 font-family: var(--mono);232 letter-spacing: 0;233 text-transform: none;234}235 236.collapse-btn {237 background: rgba(255, 255, 255, .05);238 border: 1px solid rgba(255, 255, 255, .12);239 border-radius: 8px;240 padding: 4px 8px;241 color: var(--muted);242 cursor: pointer;243 font-size: 11px;244 font-family: var(--mono);245 transition: all 0.2s ease;246 text-transform: none;247 letter-spacing: 0;248}249 250.collapse-btn:hover {251 background: rgba(255, 255, 255, .08);252 color: var(--text);253 border-color: rgba(255, 255, 255, .18);254}255 256/* =========================================257 Components: Inputs & Controls258 ========================================= */259 260.grid2 {261 display: grid;262 grid-template-columns: 1fr 1fr;263 gap: 8px;264 margin-top: 10px;265}266 267.row {268 display: flex;269 gap: 8px;270 align-items: center;271 justify-content: space-between;272 margin-top: 8px;273}274 275label {276 font-size: 11px;277 color: var(--muted);278}279 280input[type="range"] {281 width: 100%;282}283 284select,285textarea,286input[type="text"],287input[type="number"] {288 width: 100%;289 background: rgba(255, 255, 255, .04);290 border: 1px solid var(--stroke2);291 border-radius: 10px;292 padding: 8px 10px;293 color: var(--text);294 outline: none;295 font-size: 12px;296}297 298select:focus,299textarea:focus,300input[type="text"]:focus,301input[type="number"]:focus {302 border-color: rgba(124, 58, 237, .55);303 box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);304}305 306.btn {307 user-select: none;308 cursor: pointer;309 border: none;310 border-radius: 12px;311 padding: 10px 12px;312 font-weight: 700;313 font-size: 12px;314 letter-spacing: .04em;315 color: rgba(255, 255, 255, .92);316 background: linear-gradient(135deg, rgba(124, 58, 237, .95), rgba(34, 211, 238, .45));317 box-shadow: 0 18px 40px rgba(124, 58, 237, .24);318}319 320.btn:hover {321 filter: brightness(1.06);322}323 324.btn:active {325 transform: translateY(1px);326}327 328.btn.secondary {329 background: rgba(255, 255, 255, .06);330 border: 1px solid var(--stroke2);331 box-shadow: none;332 font-weight: 600;333}334 335.btn.secondary:hover {336 background: rgba(255, 255, 255, .08);337}338 339.btn.danger {340 background: linear-gradient(135deg, rgba(239, 68, 68, .95), rgba(251, 113, 133, .55));341 box-shadow: 0 18px 40px rgba(239, 68, 68, .18);342}343 344.btnrow {345 display: flex;346 gap: 8px;347 margin-top: 10px;348}349 350.btnrow .btn {351 flex: 1;352}353 354.pill {355 display: flex;356 align-items: center;357 gap: 10px;358 padding: 8px 12px;359 border-radius: 999px;360 border: 1px solid var(--stroke2);361 background: rgba(255, 255, 255, .04);362 box-shadow: 0 10px 26px rgba(0, 0, 0, .35);363 font-size: 12px;364 color: var(--muted);365 white-space: nowrap;366}367 368.dot {369 width: 8px;370 height: 8px;371 border-radius: 50%;372 background: var(--good);373 box-shadow: 0 0 16px rgba(34, 197, 94, .6);374}375 376.dot.warn {377 background: var(--warn);378 box-shadow: 0 0 16px rgba(245, 158, 11, .55);379}380 381.dot.bad {382 background: var(--bad);383 box-shadow: 0 0 16px rgba(239, 68, 68, .55);384}385 386.kbd {387 font-family: var(--mono);388 font-size: 11px;389 padding: 2px 6px;390 border: 1px solid var(--stroke2);391 border-bottom-color: rgba(255, 255, 255, .24);392 background: rgba(0, 0, 0, .35);393 border-radius: 7px;394 color: rgba(255, 255, 255, .78);395}396 397.badge {398 display: inline-flex;399 align-items: center;400 gap: 6px;401 padding: 4px 8px;402 border-radius: 999px;403 border: 1px solid var(--stroke2);404 background: rgba(0, 0, 0, .25);405 font-family: var(--mono);406}407 408/* =========================================409 Navigation: Tabs410 ========================================= */411 412.tabs {413 display: flex;414 gap: 8px;415 padding: 10px 12px;416 border-bottom: 1px solid var(--stroke);417 background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);418 flex-wrap: wrap;419}420 421.tabbtn {422 cursor: pointer;423 border: none;424 border-radius: 999px;425 padding: 8px 12px;426 font-size: 12px;427 color: rgba(255, 255, 255, .75);428 background: rgba(255, 255, 255, .04);429 border: 1px solid var(--stroke2);430}431 432.tabbtn.active {433 color: rgba(255, 255, 255, .92);434 background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(34, 211, 238, .10));435 border-color: rgba(124, 58, 237, .45);436 box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);437}438 439.tab {440 display: none;441 flex: 1;442 min-height: 0;443 overflow: auto;444 padding: 12px;445}446 447.tab.active {448 display: block;449}450 451/* =========================================452 Visualization: Views & Canvas453 ========================================= */454 455.viewbox {456 position: relative;457 border-radius: 14px;458 overflow: hidden;459 background: radial-gradient(700px 380px at 30% 30%, rgba(124, 58, 237, .12), rgba(0, 0, 0, .0) 60%),460 linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .15));461 border: 1px solid rgba(255, 255, 255, .08);462 min-height: 360px;463}464 465.viewbox canvas,466.viewbox video {467 width: 100%;468 height: 100%;469 display: block;470 object-fit: contain;471 /* Maintain aspect ratio, letterbox if needed */472}473 474/* Always show the engage video feed */475#videoEngage {476 display: block;477 opacity: 1;478}479 480/* Overlay must use same object-fit as the main canvas to align properly */481.viewbox .overlay {482 position: absolute;483 top: 0;484 left: 0;485 width: 100%;486 height: 100%;487 pointer-events: none;488 object-fit: contain;489 /* CRITICAL: match frameCanvas object-fit */490}491 492/* Make engage overlay visible as main display (not just overlay) */493#engageOverlay {494 display: none;495 pointer-events: none;496}497 498.viewbox .watermark {499 position: absolute;500 left: 10px;501 bottom: 10px;502 font-family: var(--mono);503 font-size: 11px;504 color: rgba(255, 255, 255, .55);505 background: rgba(0, 0, 0, .35);506 border: 1px solid rgba(255, 255, 255, .14);507 padding: 6px 8px;508 border-radius: 10px;509}510 511.viewbox .empty {512 position: absolute;513 inset: 0;514 display: flex;515 flex-direction: column;516 align-items: center;517 justify-content: center;518 gap: 10px;519 color: rgba(255, 255, 255, .72);520 text-align: center;521 padding: 22px;522}523 524.viewbox .empty .big {525 font-size: 14px;526 letter-spacing: .12em;527 text-transform: uppercase;528}529 530.viewbox .empty .small {531 color: var(--muted);532 font-size: 12px;533 max-width: 520px;534 line-height: 1.4;535}536 537/* =========================================538 Lists & Tables539 ========================================= */540 541.list {542 display: flex;543 flex-direction: column;544 gap: 8px;545 min-height: 160px;546 max-height: 320px;547 overflow: auto;548 padding-right: 4px;549}550 551.obj {552 padding: 10px;553 border-radius: 14px;554 border: 1px solid var(--stroke2);555 background: rgba(255, 255, 255, .03);556 cursor: pointer;557}558 559.obj:hover {560 background: rgba(255, 255, 255, .05);561}562 563.obj.active {564 border-color: rgba(34, 211, 238, .45);565 box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);566 background: linear-gradient(135deg, rgba(34, 211, 238, .10), rgba(124, 58, 237, .08));567}568 569.obj .top {570 display: flex;571 align-items: center;572 justify-content: space-between;573 gap: 10px;574}575 576.obj .id {577 font-family: var(--mono);578 font-size: 12px;579 color: rgba(255, 255, 255, .90);580}581 582.obj .cls {583 font-size: 12px;584 color: rgba(255, 255, 255, .80);585}586 587.obj .meta {588 margin-top: 6px;589 display: flex;590 gap: 10px;591 flex-wrap: wrap;592 font-size: 11px;593 color: var(--muted);594}595 596.table {597 width: 100%;598 border-collapse: separate;599 border-spacing: 0;600 overflow: hidden;601 border-radius: 14px;602 border: 1px solid rgba(255, 255, 255, .10);603}604 605.table th,606.table td {607 padding: 8px 10px;608 font-size: 12px;609 border-bottom: 1px solid rgba(255, 255, 255, .08);610 vertical-align: top;611}612 613.table th {614 background: rgba(255, 255, 255, .04);615 color: rgba(255, 255, 255, .78);616 letter-spacing: .12em;617 text-transform: uppercase;618 font-size: 11px;619}620 621.table tr:last-child td {622 border-bottom: none;623}624 625.k {626 font-family: var(--mono);627 color: rgba(255, 255, 255, .84);628}629 630.mini {631 font-size: 11px;632 color: var(--muted);633 line-height: 1.35;634}635 636/* =========================================637 Metrics & Logs638 ========================================= */639 640.metricgrid {641 display: grid;642 grid-template-columns: 1fr 1fr;643 gap: 8px;644}645 646.metric {647 border: 1px solid rgba(255, 255, 255, .10);648 background: rgba(255, 255, 255, .03);649 border-radius: 14px;650 padding: 10px;651}652 653.metric .label {654 font-size: 11px;655 color: var(--muted);656 letter-spacing: .12em;657 text-transform: uppercase;658}659 660.metric .value {661 margin-top: 6px;662 font-family: var(--mono);663 font-size: 16px;664 color: rgba(255, 255, 255, .92);665}666 667.metric .sub {668 margin-top: 4px;669 font-size: 11px;670 color: var(--faint);671 line-height: 1.35;672}673 674.log {675 font-family: var(--mono);676 font-size: 11px;677 color: rgba(255, 255, 255, .78);678 line-height: 1.45;679 background: rgba(0, 0, 0, .35);680 border: 1px solid rgba(255, 255, 255, .12);681 border-radius: 14px;682 padding: 10px;683 height: 210px;684 overflow: auto;685 white-space: pre-wrap;686}687 688.log .t {689 color: rgba(34, 211, 238, .95);690}691 692.log .w {693 color: rgba(245, 158, 11, .95);694}695 696.log .e {697 color: rgba(239, 68, 68, .95);698}699 700.log .g {701 color: rgba(34, 197, 94, .95);702}703 704/* =========================================705 Tab Specific: Intel + Frame706 ========================================= */707 708.frame-grid {709 display: grid;710 grid-template-columns: 1.6fr .9fr;711 grid-template-rows: auto auto 1fr;712 gap: 12px;713 min-height: 0;714}715 716.intel {717 margin-top: 10px;718 display: flex;719 flex-direction: column;720 gap: 8px;721}722 723.intel-top {724 display: flex;725 align-items: center;726 justify-content: space-between;727 gap: 8px;728}729 730.thumbrow {731 display: flex;732 gap: 8px;733}734 735.thumbrow img {736 flex: 1;737 height: 86px;738 object-fit: cover;739 border-radius: 12px;740 border: 1px solid rgba(255, 255, 255, .12);741 background: rgba(0, 0, 0, .25);742}743 744.intelbox {745 font-size: 12px;746 line-height: 1.45;747 color: rgba(255, 255, 255, .84);748 background: rgba(0, 0, 0, .35);749 border: 1px solid rgba(255, 255, 255, .12);750 border-radius: 14px;751 padding: 10px;752 min-height: 72px;753}754 755/* =========================================756 Tab Specific: Engage757 ========================================= */758 759.engage-grid {760 display: grid;761 grid-template-columns: 1.6fr .9fr;762 gap: 12px;763 min-height: 0;764 transition: grid-template-columns 0.3s ease;765}766 767.engage-grid.sidebar-collapsed {768 grid-template-columns: 1fr 0fr;769}770 771.engage-grid.sidebar-collapsed .engage-right {772 display: none;773}774 775.engage-right {776 display: flex;777 flex-direction: column;778 gap: 12px;779 min-height: 0;780}781 782.radar {783 height: 540px;784 display: flex;785 flex-direction: column;786}787 788.radar canvas {789 flex: 1;790 width: 100%;791 height: 100%;792 display: block;793}794 795.strip {796 display: flex;797 gap: 8px;798 flex-wrap: wrap;799 align-items: center;800 font-size: 12px;801 color: var(--muted);802}803 804.strip .chip {805 padding: 6px 10px;806 border-radius: 999px;807 border: 1px solid rgba(255, 255, 255, .12);808 background: rgba(255, 255, 255, .03);809 font-family: var(--mono);810 color: rgba(255, 255, 255, .78);811}812 813/* Sidebar Checkbox Row */814.checkbox-row {815 grid-column: span 2;816 margin-top: 8px;817 border-top: 1px solid var(--stroke2);818 padding-top: 8px;819 display: flex;820 align-items: center;821 gap: 8px;822 cursor: pointer;823}824 825.checkbox-row input[type="checkbox"] {826 width: auto;827 margin: 0;828}829 830.bar {831 height: 10px;832 border-radius: 999px;833 background: rgba(255, 255, 255, .08);834 border: 1px solid rgba(255, 255, 255, .12);835 overflow: hidden;836}837 838.bar>div {839 height: 100%;840 width: 0%;841 background: linear-gradient(90deg, rgba(34, 211, 238, .95), rgba(124, 58, 237, .95));842 transition: width .18s ease;843}844 845/* =========================================846 Tab Specific: Trade Space847 ========================================= */848 849.trade-grid {850 display: grid;851 grid-template-columns: 1.35fr .65fr;852 gap: 12px;853 min-height: 0;854}855 856.plot {857 height: 420px;858}859 860/* =========================================861 Utilities862 ========================================= */863 864::-webkit-scrollbar {865 width: 10px;866 height: 10px;867}868 869::-webkit-scrollbar-thumb {870 background: rgba(255, 255, 255, .10);871 border-radius: 999px;872 border: 2px solid rgba(0, 0, 0, .25);873}874 875::-webkit-scrollbar-thumb:hover {876 background: rgba(255, 255, 255, .16);877}878 879/* Track Cards */880.track-card {881 background: rgba(255, 255, 255, 0.03);882 border: 1px solid var(--border-color);883 border-radius: 4px;884 padding: 8px;885 margin-bottom: 8px;886 cursor: pointer;887 transition: all 0.2s;888}889 890.track-card:hover {891 background: rgba(255, 255, 255, 0.08);892}893 894.track-card.active {895 border-color: var(--accent);896 background: rgba(34, 211, 238, 0.1);897}898 899.track-card-header {900 display: flex;901 justify-content: space-between;902 align-items: center;903 font-weight: 600;904 margin-bottom: 4px;905 font-size: 13px;906 color: var(--text-color);907}908 909.track-card-meta {910 font-size: 11px;911 color: var(--text-dim);912 margin-bottom: 4px;913}914 915.track-card-body {916 font-size: 11px;917 line-height: 1.4;918 color: #ccc;919 background: rgba(0, 0, 0, 0.2);920 padding: 6px;921 border-radius: 4px;922}923 924.gpt-badge {925 color: gold;926 font-size: 10px;927 border: 1px solid gold;928 border-radius: 3px;929 padding: 1px 4px;930 margin-left: 6px;931}932 933.gpt-text {934 color: #e0e0e0;935}