Yog965/grc-ai-command-deck
0
1:root {2 --bg: #070c16;3 --bg-soft: #0d1527;4 --panel: rgba(13, 22, 41, 0.65);5 --panel-hover: rgba(18, 30, 56, 0.8);6 --border: rgba(129, 170, 225, 0.15);7 --border-focus: rgba(0, 178, 200, 0.6);8 --border-active: rgba(129, 170, 225, 0.35);9 --ink: #f0f5ff;10 --muted: #8ca3c7;11 --accent: #ff7a1a;12 --accent-glow: rgba(255, 122, 26, 0.45);13 --accent-2: #00b2c8;14 --accent-2-glow: rgba(0, 178, 200, 0.4);15 --accent-3: #ffe066;16 --success: #10b981;17 --success-bg: rgba(16, 185, 129, 0.12);18 --danger: #ef4444;19 --danger-bg: rgba(239, 68, 68, 0.12);20 --warning: #f59e0b;21 --warning-bg: rgba(245, 158, 11, 0.12);22 --shadow: 0 15px 40px rgba(0, 0, 0, 0.6);23 --transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);24}25 26* {27 box-sizing: border-box;28 margin: 0;29 padding: 0;30}31 32body {33 margin: 0;34 min-height: 100vh;35 color: var(--ink);36 font-family: "Space Grotesk", sans-serif;37 background-color: var(--bg);38 background-image:39 radial-gradient(circle at 10% 15%, rgba(255, 122, 26, 0.08), transparent 25%),40 radial-gradient(circle at 85% 15%, rgba(0, 178, 200, 0.08), transparent 25%),41 radial-gradient(circle at 50% 90%, rgba(255, 224, 102, 0.04), transparent 30%),42 linear-gradient(185deg, #050912 0%, #0d1425 60%, #080d19 100%);43 overflow-x: hidden;44}45 46/* Custom Scrollbars */47::-webkit-scrollbar {48 width: 8px;49 height: 8px;50}51::-webkit-scrollbar-track {52 background: rgba(13, 21, 38, 0.5);53}54::-webkit-scrollbar-thumb {55 background: rgba(129, 170, 225, 0.2);56 border-radius: 4px;57}58::-webkit-scrollbar-thumb:hover {59 background: rgba(129, 170, 225, 0.4);60}61 62/* Ambient Background Grid & Noise */63.ambient-grid {64 position: fixed;65 inset: 0;66 background-image:67 linear-gradient(to right, rgba(129, 170, 225, 0.05) 1px, transparent 1px),68 linear-gradient(to bottom, rgba(129, 170, 225, 0.05) 1px, transparent 1px);69 background-size: 40px 40px;70 mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 85%);71 pointer-events: none;72 z-index: -3;73}74 75.ambient-noise {76 position: fixed;77 inset: 0;78 pointer-events: none;79 z-index: -2;80 opacity: 0.15;81 background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);82 background-size: 4px 4px;83}84 85.bg-orb {86 position: fixed;87 width: 400px;88 height: 400px;89 border-radius: 50%;90 filter: blur(80px);91 pointer-events: none;92 z-index: -1;93 opacity: 0.5;94 animation: floaty 15s ease-in-out infinite alternate;95}96 97.orb-1 {98 left: -150px;99 top: -100px;100 background: rgba(255, 122, 26, 0.18);101}102 103.orb-2 {104 right: -150px;105 bottom: -100px;106 background: rgba(0, 178, 200, 0.18);107 animation-delay: 3s;108}109 110.orb-3 {111 left: 30%;112 top: 40%;113 width: 300px;114 height: 300px;115 background: rgba(255, 224, 102, 0.06);116 animation-delay: 6s;117}118 119@keyframes floaty {120 0% { transform: translate(0, 0) scale(1); }121 100% { transform: translate(40px, 30px) scale(1.1); }122}123 124/* ==========================================================================125 Login Interface (Glassmorphic Gateway)126 ========================================================================== */127.login-screen {128 position: fixed;129 inset: 0;130 display: flex;131 justify-content: center;132 align-items: center;133 z-index: 1000;134 background: radial-gradient(circle at center, #0e172a 0%, #050811 100%);135 transition: opacity 0.4s ease, visibility 0.4s ease;136}137 138.login-screen.hidden {139 opacity: 0;140 visibility: hidden;141 pointer-events: none;142}143 144.login-card {145 width: 100%;146 max-width: 460px;147 background: rgba(13, 22, 41, 0.75);148 border: 1px solid var(--border);149 border-radius: 24px;150 box-shadow: var(--shadow), 0 0 40px rgba(0, 178, 200, 0.1);151 padding: 2.5rem;152 backdrop-filter: blur(20px);153 position: relative;154 overflow: hidden;155}156 157.login-card::before {158 content: "";159 position: absolute;160 top: 0;161 left: 0;162 right: 0;163 height: 3px;164 background: linear-gradient(90deg, var(--accent), var(--accent-2));165}166 167.login-header {168 text-align: center;169 margin-bottom: 2rem;170}171 172.login-logo {173 display: inline-flex;174 align-items: center;175 justify-content: center;176 width: 60px;177 height: 60px;178 border-radius: 16px;179 background: linear-gradient(135deg, var(--accent), var(--accent-2));180 color: #0c1527;181 font-size: 1.8rem;182 font-weight: 700;183 margin-bottom: 1rem;184 box-shadow: 0 8px 24px rgba(0, 178, 200, 0.25);185}186 187.login-header h2 {188 font-size: 1.7rem;189 font-weight: 700;190 color: var(--ink);191 letter-spacing: 0.02em;192}193 194.login-header p {195 color: var(--muted);196 font-size: 0.9rem;197 margin-top: 0.3rem;198}199 200.login-form {201 display: flex;202 flex-direction: column;203 gap: 1.2rem;204}205 206.form-group {207 display: flex;208 flex-direction: column;209 gap: 0.4rem;210}211 212.form-group label {213 font-size: 0.85rem;214 font-weight: 500;215 color: #bed1ed;216 display: flex;217 align-items: center;218 gap: 0.4rem;219}220 221.form-group label i {222 font-size: 0.9rem;223 color: var(--accent-2);224}225 226.input-with-icon {227 position: relative;228}229 230.input-with-icon i {231 position: absolute;232 left: 12px;233 top: 50%;234 transform: translateY(-50%);235 color: var(--muted);236 font-size: 1rem;237 pointer-events: none;238 transition: var(--transition);239}240 241.login-form input {242 width: 100%;243 padding: 0.75rem 0.8rem 0.75rem 2.5rem;244 background: rgba(6, 12, 23, 0.85);245 border: 1px solid var(--border);246 border-radius: 12px;247 color: var(--ink);248 font-size: 0.95rem;249 transition: var(--transition);250}251 252.login-form input:focus {253 outline: none;254 border-color: var(--border-focus);255 box-shadow: 0 0 12px rgba(0, 178, 200, 0.15);256}257 258.login-form input:focus + i {259 color: var(--accent-2);260}261 262.login-helper {263 margin-top: 1.5rem;264 background: rgba(10, 18, 33, 0.6);265 border: 1px dashed var(--border);266 border-radius: 12px;267 padding: 1rem;268}269 270.login-helper h4 {271 font-size: 0.82rem;272 color: var(--accent-3);273 margin-bottom: 0.4rem;274 text-transform: uppercase;275 letter-spacing: 0.05em;276 display: flex;277 align-items: center;278 gap: 0.3rem;279}280 281.login-helper ul {282 list-style: none;283 font-size: 0.8rem;284 color: var(--muted);285 display: flex;286 flex-direction: column;287 gap: 0.3rem;288}289 290.login-helper li code {291 color: #dceeff;292 background: rgba(129, 170, 225, 0.1);293 padding: 0.1rem 0.3rem;294 border-radius: 4px;295}296 297/* ==========================================================================298 Dashboard Shell & Navigation299 ========================================================================== */300.app-container {301 display: flex;302 min-height: 100vh;303 transition: opacity 0.3s ease;304}305 306.app-container.blur-bg {307 filter: blur(4px);308}309 310/* Sidebar Navigation */311.sidebar {312 width: 260px;313 background: rgba(9, 15, 28, 0.85);314 border-right: 1px solid var(--border);315 display: flex;316 flex-direction: column;317 position: fixed;318 top: 0;319 bottom: 0;320 left: 0;321 z-index: 100;322 padding: 1.5rem 1rem;323 backdrop-filter: blur(15px);324}325 326.brand-section {327 display: flex;328 align-items: center;329 gap: 0.75rem;330 margin-bottom: 2.2rem;331 padding-left: 0.5rem;332}333 334.brand-icon {335 width: 36px;336 height: 36px;337 border-radius: 8px;338 background: linear-gradient(135deg, var(--accent), var(--accent-2));339 color: #0c1527;340 display: flex;341 align-items: center;342 justify-content: center;343 font-weight: 700;344 font-size: 1.2rem;345}346 347.brand-name {348 font-family: "Space Grotesk", sans-serif;349 font-size: 1.15rem;350 font-weight: 700;351 letter-spacing: 0.05em;352 background: linear-gradient(90deg, #fff, #8cb6f5);353 -webkit-background-clip: text;354 -webkit-text-fill-color: transparent;355}356 357.nav-menu {358 display: flex;359 flex-direction: column;360 gap: 0.4rem;361 flex: 1;362}363 364.nav-item {365 display: flex;366 align-items: center;367 gap: 0.8rem;368 padding: 0.8rem 1rem;369 border-radius: 12px;370 color: var(--muted);371 cursor: pointer;372 font-size: 0.92rem;373 font-weight: 500;374 transition: var(--transition);375 border: 1px solid transparent;376}377 378.nav-item i {379 font-size: 1.1rem;380 transition: var(--transition);381}382 383.nav-item:hover {384 color: var(--ink);385 background: rgba(129, 170, 225, 0.06);386 border-color: rgba(129, 170, 225, 0.08);387}388 389.nav-item.active {390 color: var(--ink);391 background: rgba(0, 178, 200, 0.1);392 border-color: rgba(0, 178, 200, 0.25);393 box-shadow: inset 0 0 10px rgba(0, 178, 200, 0.05);394}395 396.nav-item.active i {397 color: var(--accent-2);398}399 400.user-profile-section {401 border-top: 1px solid var(--border);402 padding-top: 1.2rem;403 margin-top: auto;404 display: flex;405 flex-direction: column;406 gap: 0.8rem;407}408 409.user-profile-info {410 display: flex;411 align-items: center;412 gap: 0.7rem;413}414 415.user-avatar {416 width: 36px;417 height: 36px;418 border-radius: 50%;419 background: linear-gradient(135deg, var(--accent-2), #ffe066);420 color: #0c1527;421 display: flex;422 align-items: center;423 justify-content: center;424 font-weight: 700;425 font-size: 0.95rem;426}427 428.user-meta {429 display: flex;430 flex-direction: column;431}432 433.user-display-name {434 font-size: 0.88rem;435 font-weight: 600;436 color: var(--ink);437}438 439.user-role-badge {440 font-size: 0.72rem;441 color: var(--accent-2);442 font-weight: 600;443 text-transform: uppercase;444 letter-spacing: 0.05em;445}446 447.btn-logout {448 width: 100%;449 display: flex;450 align-items: center;451 justify-content: center;452 gap: 0.5rem;453 background: rgba(239, 68, 68, 0.08);454 border: 1px solid rgba(239, 68, 68, 0.15);455 color: var(--danger);456 padding: 0.55rem;457 border-radius: 10px;458 font-size: 0.85rem;459 cursor: pointer;460 transition: var(--transition);461}462 463.btn-logout:hover {464 background: rgba(239, 68, 68, 0.18);465 border-color: rgba(239, 68, 68, 0.35);466}467 468/* Main Dashboard Panel Areas */469.main-content {470 flex: 1;471 margin-left: 260px;472 padding: 1.5rem 2rem 2.5rem;473 min-width: 0;474 display: flex;475 flex-direction: column;476}477 478/* Header Banner */479.top-header {480 display: flex;481 justify-content: space-between;482 align-items: center;483 margin-bottom: 2rem;484 border-bottom: 1px solid var(--border);485 padding-bottom: 1.2rem;486}487 488.header-title-area h1 {489 font-size: 1.8rem;490 font-weight: 700;491 color: var(--ink);492}493 494.header-title-area p {495 font-size: 0.9rem;496 color: var(--muted);497 margin-top: 0.2rem;498}499 500.header-controls {501 display: flex;502 align-items: center;503 gap: 0.8rem;504}505 506/* Dropdowns & Toolbar Select */507.output-set-box {508 display: flex;509 align-items: center;510 gap: 0.5rem;511 background: var(--bg-soft);512 border: 1px solid var(--border);513 border-radius: 12px;514 padding: 0.45rem 0.8rem;515}516 517.output-set-box label {518 font-size: 0.82rem;519 color: var(--muted);520 font-weight: 500;521}522 523.output-set-box select {524 background: transparent;525 border: none;526 color: var(--ink);527 font-size: 0.88rem;528 font-weight: 600;529 cursor: pointer;530 outline: none;531 padding-right: 0.5rem;532}533 534/* Tabs Content Switching */535.tab-content {536 display: none;537 animation: tabFadeIn 0.35s ease forwards;538}539 540.tab-content.active {541 display: block;542}543 544@keyframes tabFadeIn {545 from { opacity: 0; transform: translateY(8px); }546 to { opacity: 1; transform: translateY(0); }547}548 549/* Buttons Styling */550.btn {551 display: inline-flex;552 align-items: center;553 justify-content: center;554 gap: 0.5rem;555 border: none;556 border-radius: 10px;557 padding: 0.6rem 1rem;558 font-size: 0.88rem;559 font-weight: 600;560 cursor: pointer;561 transition: var(--transition);562 text-decoration: none;563}564 565.btn:active {566 transform: translateY(1px);567}568 569.btn-primary {570 background: linear-gradient(135deg, var(--accent), #ff9f55);571 color: #0c1527;572 box-shadow: 0 4px 15px rgba(255, 122, 26, 0.25);573}574 575.btn-primary:hover {576 box-shadow: 0 6px 20px rgba(255, 122, 26, 0.4);577 filter: brightness(1.08);578}579 580.btn-secondary {581 background: rgba(129, 170, 225, 0.08);582 border: 1px solid var(--border);583 color: var(--ink);584}585 586.btn-secondary:hover {587 background: rgba(129, 170, 225, 0.16);588 border-color: var(--border-active);589}590 591.btn-accent {592 background: linear-gradient(135deg, var(--accent-2), #4be8fc);593 color: #0c1527;594 box-shadow: 0 4px 15px rgba(0, 178, 200, 0.25);595}596 597.btn-accent:hover {598 box-shadow: 0 6px 20px rgba(0, 178, 200, 0.4);599 filter: brightness(1.08);600}601 602.btn:disabled {603 opacity: 0.4;604 cursor: not-allowed;605 transform: none !important;606 box-shadow: none !important;607}608 609/* Telemetry/Summary Grid */610.telemetry-row {611 display: grid;612 grid-template-columns: repeat(4, 1fr);613 gap: 1.2rem;614 margin-bottom: 1.5rem;615}616 617.telemetry-card {618 background: var(--panel);619 border: 1px solid var(--border);620 border-radius: 16px;621 padding: 1.2rem;622 display: flex;623 align-items: center;624 gap: 1rem;625 position: relative;626 overflow: hidden;627 backdrop-filter: blur(10px);628}629 630.telemetry-card::before {631 content: "";632 position: absolute;633 inset: 0;634 background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);635 pointer-events: none;636}637 638.telemetry-icon-wrap {639 width: 48px;640 height: 48px;641 border-radius: 12px;642 display: flex;643 align-items: center;644 justify-content: center;645 font-size: 1.3rem;646}647 648.card-purple .telemetry-icon-wrap { background: rgba(168, 85, 247, 0.12); color: #a855f7; }649.card-blue .telemetry-icon-wrap { background: rgba(0, 178, 200, 0.12); color: var(--accent-2); }650.card-red .telemetry-icon-wrap { background: rgba(239, 68, 68, 0.12); color: var(--danger); }651.card-yellow .telemetry-icon-wrap { background: rgba(245, 158, 11, 0.12); color: var(--warning); }652 653.telemetry-card-data {654 display: flex;655 flex-direction: column;656}657 658.telemetry-card-data span {659 font-size: 0.8rem;660 color: var(--muted);661 text-transform: uppercase;662 letter-spacing: 0.05em;663 font-weight: 600;664}665 666.telemetry-card-data strong {667 font-size: 1.7rem;668 color: var(--ink);669 font-weight: 700;670 margin-top: 0.15rem;671}672 673/* Glassmorphic Panels layout */674.glass-panel {675 background: var(--panel);676 border: 1px solid var(--border);677 border-radius: 20px;678 padding: 1.5rem;679 box-shadow: var(--shadow);680 backdrop-filter: blur(14px);681 position: relative;682 overflow: hidden;683 margin-bottom: 1.5rem;684}685 686.glass-panel::before {687 content: "";688 position: absolute;689 inset: 0;690 background: linear-gradient(135deg, rgba(129, 170, 225, 0.03), transparent 60%);691 pointer-events: none;692}693 694.panel-header {695 display: flex;696 justify-content: space-between;697 align-items: center;698 margin-bottom: 1.2rem;699 padding-bottom: 0.8rem;700 border-bottom: 1px solid rgba(129, 170, 225, 0.08);701}702 703.panel-header h2 {704 font-size: 1.15rem;705 font-weight: 600;706 display: flex;707 align-items: center;708 gap: 0.5rem;709 color: #e2eeff;710}711 712.panel-header h2 i {713 color: var(--accent-2);714}715 716.panel-sub {717 font-size: 0.85rem;718 color: var(--muted);719 margin-top: -0.6rem;720 margin-bottom: 1.2rem;721}722 723/* Overview layout grids */724.overview-grid {725 display: grid;726 grid-template-columns: 4fr 8fr;727 gap: 1.2rem;728}729 730/* Run config inputs */731.run-form {732 display: flex;733 flex-direction: column;734 gap: 1rem;735}736 737.run-form label {738 display: flex;739 flex-direction: column;740 gap: 0.4rem;741 font-size: 0.84rem;742 color: #bed1ed;743 font-weight: 500;744}745 746.run-form input {747 padding: 0.6rem 0.8rem;748 background: rgba(6, 12, 23, 0.6);749 border: 1px solid var(--border);750 border-radius: 10px;751 color: var(--ink);752 font-size: 0.9rem;753 transition: var(--transition);754}755 756.run-form input:focus {757 outline: none;758 border-color: var(--border-focus);759}760 761/* Job progress indicators */762.job-card {763 margin-top: 1.2rem;764 background: rgba(10, 18, 33, 0.5);765 border: 1px solid rgba(129, 170, 225, 0.08);766 border-radius: 12px;767 padding: 1rem;768}769 770.job-card-header {771 display: flex;772 justify-content: space-between;773 font-size: 0.8rem;774 color: var(--muted);775 margin-bottom: 0.5rem;776}777 778.progress-bar-container {779 height: 8px;780 background: rgba(129, 170, 225, 0.06);781 border-radius: 4px;782 overflow: hidden;783 border: 1px solid rgba(129, 170, 225, 0.08);784 margin-bottom: 0.5rem;785}786 787.progress-bar-fill {788 height: 100%;789 width: 0%;790 background: linear-gradient(90deg, var(--accent-2), var(--accent-3), var(--accent));791 background-size: 200% 100%;792 transition: width 0.3s ease;793 animation: pulseShift 2s linear infinite;794}795 796@keyframes pulseShift {797 0% { background-position: 0% 50%; }798 100% { background-position: 200% 50%; }799}800 801.job-status-text {802 font-size: 0.82rem;803 color: #dceeff;804 display: flex;805 align-items: center;806 gap: 0.4rem;807}808 809.job-status-text.pulse i {810 animation: blinker 1.5s linear infinite;811}812 813@keyframes blinker {814 50% { opacity: 0.3; }815}816 817/* Telemetry Donut Chart wrap */818.chart-wrap {819 display: flex;820 align-items: center;821 justify-content: center;822 height: 240px;823 position: relative;824}825 826.chart-center-text {827 position: absolute;828 display: flex;829 flex-direction: column;830 align-items: center;831 justify-content: center;832 pointer-events: none;833}834 835.chart-center-text strong {836 font-size: 1.8rem;837 font-weight: 700;838 color: var(--ink);839}840 841.chart-center-text span {842 font-size: 0.75rem;843 color: var(--muted);844 text-transform: uppercase;845 letter-spacing: 0.05em;846}847 848/* ==========================================================================849 Compliance Drift Report Tab850 ========================================================================== */851.report-layout {852 display: grid;853 grid-template-columns: 9fr 3fr;854 gap: 1.2rem;855}856 857.report-markdown-content {858 background: #03060c;859 border: 1px solid var(--border);860 border-radius: 16px;861 padding: 2rem;862 max-height: 70vh;863 overflow-y: auto;864 font-size: 0.95rem;865 line-height: 1.6;866 color: #dbe7f9;867}868 869/* Markdown styling inside report */870.report-markdown-content h1 {871 font-size: 1.6rem;872 color: var(--ink);873 margin-bottom: 1.2rem;874 border-bottom: 2px solid var(--border);875 padding-bottom: 0.5rem;876}877 878.report-markdown-content h2 {879 font-size: 1.25rem;880 color: #e2eeff;881 margin-top: 1.5rem;882 margin-bottom: 0.8rem;883 display: flex;884 align-items: center;885 gap: 0.4rem;886}887 888.report-markdown-content h2::before {889 content: "⚡";890 font-size: 1rem;891}892 893.report-markdown-content p {894 margin-bottom: 1rem;895}896 897.report-markdown-content ul, .report-markdown-content ol {898 margin-left: 1.5rem;899 margin-bottom: 1rem;900}901 902.report-markdown-content li {903 margin-bottom: 0.4rem;904}905 906.report-markdown-content blockquote {907 border-left: 4px solid var(--accent);908 background: rgba(255, 122, 26, 0.05);909 padding: 0.8rem 1.2rem;910 border-radius: 0 8px 8px 0;911 margin-bottom: 1rem;912 font-style: italic;913}914 915.report-metadata-panel {916 display: flex;917 flex-direction: column;918 gap: 1.2rem;919}920 921.metadata-card {922 background: rgba(13, 21, 38, 0.4);923 border: 1px solid var(--border);924 border-radius: 14px;925 padding: 1.2rem;926}927 928.metadata-card h3 {929 font-size: 0.9rem;930 color: var(--accent-3);931 margin-bottom: 0.6rem;932 text-transform: uppercase;933 letter-spacing: 0.05em;934}935 936.metadata-row {937 display: flex;938 justify-content: space-between;939 font-size: 0.84rem;940 padding: 0.4rem 0;941 border-bottom: 1px dashed rgba(129, 170, 225, 0.08);942}943 944.metadata-row:last-child {945 border-bottom: none;946}947 948.metadata-row span {949 color: var(--muted);950}951 952.metadata-row strong {953 color: var(--ink);954}955 956/* ==========================================================================957 Compliance Mappings & HITL Overrides958 ========================================================================== */959.mappings-layout {960 display: grid;961 grid-template-columns: 5fr 7fr;962 gap: 1.5rem;963}964 965.mappings-list-wrap {966 display: flex;967 flex-direction: column;968 gap: 0.8rem;969 max-height: 70vh;970 overflow-y: auto;971 padding-right: 0.4rem;972}973 974.mapping-card-item {975 background: rgba(13, 21, 38, 0.5);976 border: 1px solid var(--border);977 border-radius: 14px;978 padding: 1rem;979 cursor: pointer;980 transition: var(--transition);981 position: relative;982}983 984.mapping-card-item:hover {985 background: rgba(18, 30, 56, 0.7);986 border-color: var(--border-active);987 transform: translateY(-2px);988}989 990.mapping-card-item.selected {991 background: rgba(0, 178, 200, 0.1);992 border-color: var(--accent-2);993 box-shadow: 0 0 15px rgba(0, 178, 200, 0.1);994}995 996.mapping-item-meta {997 display: flex;998 justify-content: space-between;999 align-items: center;1000 margin-bottom: 0.5rem;1001}1002 1003.mapping-control-id {1004 font-family: "IBM Plex Mono", monospace;1005 font-weight: 700;1006 color: var(--accent-2);1007 font-size: 0.95rem;1008}1009 1010.mapping-similarity {1011 font-size: 0.8rem;1012 padding: 0.15rem 0.4rem;1013 border-radius: 6px;1014 font-weight: 600;1015}1016 1017.similarity-high { background: rgba(16, 185, 129, 0.1); color: var(--success); }1018.similarity-low { background: rgba(239, 68, 68, 0.1); color: var(--danger); }1019.similarity-warn { background: rgba(245, 158, 11, 0.1); color: var(--warning); }1020 1021.mapping-item-log {1022 font-family: "IBM Plex Mono", monospace;1023 font-size: 0.78rem;1024 color: var(--muted);1025 word-break: break-all;1026 line-clamp: 2;1027 display: -webkit-box;1028 -webkit-line-clamp: 2;1029 -webkit-box-orient: vertical;1030 overflow: hidden;1031 margin-bottom: 0.5rem;1032}1033 1034.hitl-status-badge {1035 display: inline-flex;1036 align-items: center;1037 gap: 0.25rem;1038 font-size: 0.72rem;1039 font-weight: 600;1040 padding: 0.2rem 0.5rem;1041 border-radius: 999px;1042}1043 1044.hitl-status-required {1045 background: var(--warning-bg);1046 color: var(--warning);1047}1048 1049.hitl-status-resolved {1050 background: var(--success-bg);1051 color: var(--success);1052}1053 1054/* HITL Editor Detail view */1055.hitl-editor-wrap {1056 display: flex;1057 flex-direction: column;1058 gap: 1.2rem;1059}1060 1061.hitl-empty-state {1062 display: flex;1063 flex-direction: column;1064 align-items: center;1065 justify-content: center;1066 height: 300px;1067 color: var(--muted);1068 text-align: center;1069 border: 1px dashed var(--border);1070 border-radius: 16px;1071}1072 1073.hitl-empty-state i {1074 font-size: 2.5rem;1075 margin-bottom: 1rem;1076 color: rgba(129, 170, 225, 0.25);1077}1078 1079.editor-log-panel {1080 background: #040811;1081 border: 1px solid var(--border);1082 border-radius: 12px;1083 padding: 1rem;1084 font-family: "IBM Plex Mono", monospace;1085 font-size: 0.84rem;1086 color: #e2eeff;1087 word-break: break-all;1088 margin-bottom: 0.5rem;1089}1090 1091.recommendations-box {1092 background: rgba(129, 170, 225, 0.04);1093 border: 1px solid var(--border);1094 border-radius: 12px;1095 padding: 1rem;1096}1097 1098.recommendations-box h3 {1099 font-size: 0.88rem;1100 margin-bottom: 0.6rem;1101 color: var(--accent-3);1102 display: flex;1103 align-items: center;1104 gap: 0.3rem;1105}1106 1107.rec-item {1108 display: flex;1109 justify-content: space-between;1110 align-items: center;1111 padding: 0.5rem 0.6rem;1112 border-radius: 8px;1113 font-size: 0.82rem;1114 cursor: pointer;1115 transition: var(--transition);1116}1117 1118.rec-item:hover {1119 background: rgba(129, 170, 225, 0.08);1120}1121 1122.rec-item-title {1123 font-weight: 500;1124}1125 1126.rec-item-score {1127 font-family: "IBM Plex Mono", monospace;1128 font-weight: 600;1129 color: var(--accent-2);1130}1131 1132/* Resolution override form */1133.override-form {1134 background: rgba(13, 21, 38, 0.4);1135 border: 1px solid var(--border);1136 border-radius: 12px;1137 padding: 1.2rem;1138}1139 1140.override-form h3 {1141 font-size: 0.95rem;1142 color: var(--ink);1143 margin-bottom: 0.8rem;1144}1145 1146.override-grid {1147 display: grid;1148 grid-template-columns: 1fr;1149 gap: 0.8rem;1150 margin-bottom: 1rem;1151}1152 1153.override-grid label {1154 display: flex;1155 flex-direction: column;1156 gap: 0.3rem;1157 font-size: 0.8rem;1158 color: var(--muted);1159}1160 1161.override-grid input, .override-grid select {1162 padding: 0.55rem 0.7rem;1163 background: rgba(6, 12, 23, 0.6);1164 border: 1px solid var(--border);1165 border-radius: 8px;1166 color: var(--ink);1167 font-size: 0.88rem;1168}1169 1170.override-grid input:focus, .override-grid select:focus {1171 outline: none;1172 border-color: var(--border-focus);1173}1174 1175/* ==========================================================================1176 Tables, Lists & Run History1177 ========================================================================== */1178.table-wrap {1179 width: 100%;1180 overflow-x: auto;1181 margin-bottom: 1.5rem;1182 border: 1px solid var(--border);1183 border-radius: 14px;1184 background: rgba(10, 18, 33, 0.3);1185}1186 1187table {1188 width: 100%;1189 border-collapse: collapse;1190 text-align: left;1191 font-size: 0.88rem;1192}1193 1194th {1195 background: rgba(9, 15, 28, 0.7);1196 padding: 0.8rem 1rem;1197 font-weight: 600;1198 text-transform: uppercase;1199 font-size: 0.76rem;1200 letter-spacing: 0.05em;