| @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@500;600;700&display=swap"); |
|
|
| :root { |
| --bg: #03030b; |
| --surface: rgba(13, 16, 35, 0.62); |
| --surface-2: rgba(19, 24, 51, 0.58); |
| --surface-3: rgba(35, 26, 72, 0.68); |
| --ink: #f6f7ff; |
| --muted: #a6a9c8; |
| --line: rgba(197, 187, 255, 0.22); |
| --line-soft: rgba(189, 178, 255, 0.14); |
| --accent: #9b7cff; |
| --accent-2: #28e8ff; |
| --accent-3: #ff4fd8; |
| --warning: #d29922; |
| --critical: #f85149; |
| --glass: rgba(8, 11, 25, 0.58); |
| --shadow: 0 24px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08); |
| --glow: 0 0 34px rgba(155, 124, 255, 0.22), 0 0 64px rgba(40, 232, 255, 0.08); |
| color-scheme: dark; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body, |
| #root { |
| margin: 0; |
| min-height: 100%; |
| background: var(--bg); |
| color: var(--ink); |
| font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| } |
|
|
| body { |
| min-width: 320px; |
| overflow-x: hidden; |
| background: |
| radial-gradient(circle at 50% -10%, rgba(106, 68, 255, 0.28), transparent 34rem), |
| radial-gradient(circle at 85% 12%, rgba(255, 79, 216, 0.12), transparent 30rem), |
| #02020a; |
| } |
|
|
| button, |
| select, |
| input { |
| min-height: 40px; |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: rgba(8, 11, 27, 0.78); |
| color: var(--ink); |
| font: inherit; |
| } |
|
|
| button { |
| width: auto; |
| padding: 9px 14px; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent), |
| linear-gradient(135deg, var(--accent), var(--accent-2)); |
| border-color: transparent; |
| color: #030414; |
| font-weight: 700; |
| cursor: pointer; |
| box-shadow: 0 10px 30px rgba(91, 92, 255, 0.32), inset 0 0 18px rgba(255, 255, 255, 0.18); |
| transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease; |
| } |
|
|
| button:hover:not(:disabled) { |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent), |
| linear-gradient(135deg, #b49bff, #5ef5ff); |
| box-shadow: 0 14px 44px rgba(40, 232, 255, 0.26), inset 0 0 22px rgba(255, 255, 255, 0.22); |
| transform: translateY(-1px); |
| } |
|
|
| button.secondary, |
| .mode-toggle button { |
| background: rgba(155, 124, 255, 0.12); |
| border-color: rgba(155, 124, 255, 0.3); |
| color: var(--accent); |
| box-shadow: inset 0 0 16px rgba(191, 151, 255, 0.12); |
| } |
|
|
| button.secondary:hover:not(:disabled), |
| .mode-toggle button:hover:not(:disabled) { |
| background: rgba(155, 124, 255, 0.2); |
| } |
|
|
| button:disabled { |
| cursor: not-allowed; |
| opacity: 0.48; |
| transform: none; |
| } |
|
|
| select, |
| input { |
| width: 100%; |
| padding: 8px 11px; |
| backdrop-filter: blur(12px); |
| } |
|
|
| select { |
| color-scheme: dark; |
| } |
|
|
| select:focus, |
| input:focus, |
| button:focus { |
| outline: 2px solid rgba(40, 232, 255, 0.38); |
| outline-offset: 2px; |
| } |
|
|
| pre { |
| margin: 0; |
| max-height: 260px; |
| overflow: auto; |
| font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; |
| font-size: 0.76rem; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| th, |
| td { |
| padding: 8px 10px; |
| border-bottom: 1px solid var(--line-soft); |
| text-align: left; |
| font-size: 0.84rem; |
| } |
|
|
| .workbench-shell { |
| position: relative; |
| min-height: 100vh; |
| isolation: isolate; |
| overflow: hidden; |
| padding: 20px; |
| background: |
| linear-gradient(180deg, rgba(9, 11, 35, 0.22), rgba(3, 3, 11, 0.88) 44rem), |
| var(--bg); |
| } |
|
|
| .workbench-container { |
| position: relative; |
| z-index: 2; |
| width: min(1440px, 100%); |
| margin: 0 auto; |
| } |
|
|
| .metaverse-backdrop { |
| position: fixed; |
| inset: 0; |
| z-index: 0; |
| overflow: hidden; |
| pointer-events: none; |
| } |
|
|
| .blackhole-video { |
| position: absolute; |
| top: -32vh; |
| left: 50%; |
| width: min(1300px, 148vw); |
| min-width: 760px; |
| height: 74vh; |
| opacity: 0.78; |
| mix-blend-mode: screen; |
| object-fit: cover; |
| transform: translateX(-50%) rotate(180deg); |
| filter: saturate(1.18) contrast(1.08); |
| } |
|
|
| .stars-canvas { |
| position: absolute; |
| inset: 0; |
| z-index: 1; |
| opacity: 0.86; |
| } |
|
|
| .stars-canvas canvas { |
| display: block; |
| } |
|
|
| .nebula-orb { |
| position: absolute; |
| border-radius: 999px; |
| filter: blur(18px); |
| mix-blend-mode: screen; |
| } |
|
|
| .orb-one { |
| right: -8rem; |
| top: 14rem; |
| width: 28rem; |
| height: 28rem; |
| background: radial-gradient(circle, rgba(255, 79, 216, 0.24), transparent 68%); |
| } |
|
|
| .orb-two { |
| left: -10rem; |
| bottom: 0; |
| width: 34rem; |
| height: 34rem; |
| background: radial-gradient(circle, rgba(40, 232, 255, 0.18), transparent 70%); |
| } |
|
|
| .nebula-grid { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); |
| background-size: 72px 72px; |
| mask-image: linear-gradient(to bottom, transparent, black 18%, transparent 86%); |
| opacity: 0.36; |
| transform: perspective(900px) rotateX(60deg) translateY(12rem); |
| transform-origin: center bottom; |
| } |
|
|
| .cosmic-vignette { |
| position: absolute; |
| inset: 0; |
| z-index: 2; |
| background: |
| radial-gradient(circle at 50% 0%, transparent 0, rgba(3, 3, 11, 0.1) 26rem, rgba(3, 3, 11, 0.86) 62rem), |
| linear-gradient(180deg, rgba(3, 3, 11, 0.04), rgba(3, 3, 11, 0.9) 76%); |
| } |
|
|
| .metaverse-hero { |
| position: relative; |
| display: grid; |
| grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.72fr); |
| align-items: end; |
| gap: 22px; |
| margin: 18px 0 14px; |
| overflow: hidden; |
| padding: 28px; |
| } |
|
|
| .metaverse-hero::before { |
| content: ""; |
| position: absolute; |
| inset: -1px; |
| z-index: -1; |
| background: |
| radial-gradient(circle at 16% 10%, rgba(155, 124, 255, 0.26), transparent 28rem), |
| radial-gradient(circle at 80% 0%, rgba(40, 232, 255, 0.18), transparent 24rem); |
| } |
|
|
| .hero-copy { |
| min-width: 0; |
| } |
|
|
| .welcome-box { |
| display: inline-flex; |
| align-items: center; |
| width: max-content; |
| max-width: 100%; |
| gap: 9px; |
| isolation: isolate; |
| overflow: hidden; |
| margin-bottom: 18px; |
| border: 1px solid rgba(185, 157, 255, 0.45); |
| border-radius: 999px; |
| padding: 8px 12px; |
| background: rgba(113, 47, 255, 0.1); |
| box-shadow: inset 0 -7px 11px rgba(164, 143, 255, 0.12), 0 0 28px rgba(155, 124, 255, 0.14); |
| backdrop-filter: blur(10px); |
| } |
|
|
| .spark-glyph, |
| .welcome-text { |
| color: var(--accent); |
| font-size: 0.78rem; |
| font-weight: 900; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .welcome-text { |
| background: |
| linear-gradient(0deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)), |
| linear-gradient(90deg, #e59cff 0%, #ba9cff 48%, #8ff6ff 100%); |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .metaverse-hero h2 { |
| max-width: 900px; |
| margin: 0; |
| color: var(--ink); |
| font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif; |
| font-size: clamp(2.4rem, 6vw, 5.7rem); |
| line-height: 0.92; |
| letter-spacing: -0.07em; |
| } |
|
|
| .metaverse-hero h2 span { |
| display: inline; |
| background: linear-gradient(90deg, #b49bff 0%, #5ef5ff 52%, #ff7ce7 100%); |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .metaverse-hero p { |
| max-width: 760px; |
| margin: 18px 0 0; |
| color: #c5c8df; |
| font-size: 1rem; |
| line-height: 1.7; |
| } |
|
|
| .hero-stat-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .hero-stat-grid div { |
| min-width: 0; |
| border: 1px solid var(--line-soft); |
| border-radius: 18px; |
| background: rgba(9, 13, 31, 0.56); |
| padding: 14px; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(16px); |
| } |
|
|
| .hero-stat-grid span { |
| display: block; |
| color: var(--muted); |
| font-size: 0.7rem; |
| font-weight: 900; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .hero-stat-grid strong { |
| display: block; |
| margin-top: 7px; |
| overflow: hidden; |
| color: var(--ink); |
| font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; |
| font-size: 1.05rem; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .panel-surface, |
| .panel { |
| border: 1px solid var(--line); |
| border-radius: 24px; |
| background: var(--surface); |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(22px) saturate(1.25); |
| -webkit-backdrop-filter: blur(22px) saturate(1.25); |
| } |
|
|
| .topbar { |
| display: grid; |
| grid-template-columns: minmax(220px, 1fr) auto auto minmax(320px, 0.9fr); |
| align-items: center; |
| gap: 14px; |
| padding: 16px; |
| } |
|
|
| .title-wrap { |
| min-width: 0; |
| } |
|
|
| .title-wrap h1, |
| .page h1 { |
| margin: 0; |
| color: var(--ink); |
| font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; |
| font-size: 1.5rem; |
| line-height: 1.1; |
| font-weight: 800; |
| letter-spacing: -0.04em; |
| } |
|
|
| .title-wrap p, |
| .muted { |
| margin: 4px 0 0; |
| color: var(--muted); |
| font-size: 0.88rem; |
| } |
|
|
| .mode-toggle { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(126px, 1fr)); |
| gap: 6px; |
| padding: 4px; |
| border: 1px solid var(--line); |
| border-radius: 18px; |
| background: rgba(5, 8, 20, 0.7); |
| box-shadow: inset 0 0 24px rgba(155, 124, 255, 0.08); |
| } |
|
|
| .mode-toggle button { |
| min-height: 34px; |
| padding: 6px 10px; |
| border-radius: 14px; |
| box-shadow: none; |
| } |
|
|
| .mode-toggle button.active { |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); |
| color: #030414; |
| box-shadow: 0 10px 28px rgba(40, 232, 255, 0.18); |
| } |
|
|
| .topbar-status, |
| .topbar-actions, |
| .button-row { |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .topbar-actions { |
| display: grid; |
| grid-template-columns: minmax(170px, 1fr) auto; |
| } |
|
|
| .qtip-trigger { |
| min-height: 32px; |
| padding: 6px 11px; |
| } |
|
|
| .status-chip, |
| .panel-heading span, |
| .med-card-header span { |
| display: inline-flex; |
| align-items: center; |
| min-height: 28px; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| padding: 4px 10px; |
| background: rgba(12, 16, 35, 0.72); |
| color: var(--muted); |
| font-size: 0.72rem; |
| font-weight: 800; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
|
|
| .status-chip.live { |
| border-color: rgba(40, 232, 255, 0.44); |
| background: rgba(40, 232, 255, 0.12); |
| color: #78f6ff; |
| box-shadow: 0 0 18px rgba(40, 232, 255, 0.14); |
| } |
|
|
| .status-chip.idle { |
| border-color: rgba(154, 166, 178, 0.28); |
| } |
|
|
| .advanced-strip { |
| display: grid; |
| grid-template-columns: minmax(160px, 0.4fr) minmax(260px, 1fr); |
| gap: 12px; |
| margin-top: 12px; |
| padding: 14px; |
| } |
|
|
| .model-truth { |
| margin-top: 12px; |
| padding: 14px; |
| } |
|
|
| .model-truth.verified { |
| border-color: rgba(40, 232, 255, 0.5); |
| } |
|
|
| .model-truth.unverified { |
| border-color: rgba(255, 211, 92, 0.44); |
| } |
|
|
| .model-truth p { |
| margin: 0 0 12px; |
| color: var(--muted); |
| font-size: 0.88rem; |
| line-height: 1.5; |
| } |
|
|
| .model-truth-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .model-truth-grid div { |
| min-width: 0; |
| border: 1px solid var(--line-soft); |
| border-radius: 18px; |
| background: var(--surface-2); |
| padding: 10px; |
| } |
|
|
| .model-truth-grid span { |
| color: var(--muted); |
| font-size: 0.7rem; |
| font-weight: 800; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| .model-truth-grid strong { |
| display: block; |
| margin-top: 5px; |
| color: var(--ink); |
| font-size: 0.86rem; |
| line-height: 1.35; |
| overflow-wrap: anywhere; |
| } |
|
|
| .field { |
| display: flex; |
| min-width: 0; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .field span, |
| .kpi-grid span, |
| .action-detail-grid span, |
| .compact-defs dt { |
| color: var(--muted); |
| font-size: 0.72rem; |
| font-weight: 800; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| .workbench-layout { |
| display: grid; |
| grid-template-columns: minmax(320px, 1.05fr) minmax(320px, 0.95fr); |
| gap: 16px; |
| margin-top: 16px; |
| align-items: start; |
| } |
|
|
| .panel-wide { |
| grid-column: 1 / -1; |
| } |
|
|
| .panel-scroll { |
| min-height: 348px; |
| padding: 16px; |
| } |
|
|
| .panel-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| margin-bottom: 12px; |
| } |
|
|
| .inline-heading { |
| margin-bottom: 10px; |
| } |
|
|
| .panel-heading h2, |
| .panel h3, |
| .history-grid h2 { |
| margin: 0; |
| color: #d8d6ff; |
| font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; |
| font-size: 0.82rem; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .panel-surface:not(.topbar, .advanced-strip, .metaverse-hero) { |
| padding: 16px; |
| } |
|
|
| .kpi-grid, |
| .action-detail-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(120px, 1fr)); |
| gap: 10px; |
| } |
|
|
| .kpi-grid div, |
| .action-detail-grid div { |
| min-width: 0; |
| min-height: 72px; |
| border: 1px solid var(--line-soft); |
| border-radius: 18px; |
| background: var(--surface-2); |
| padding: 12px; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); |
| } |
|
|
| .kpi-grid strong, |
| .action-detail-grid strong, |
| .compact-defs dd { |
| display: block; |
| margin-top: 6px; |
| color: var(--ink); |
| font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; |
| font-size: 0.96rem; |
| line-height: 1.25; |
| overflow-wrap: anywhere; |
| } |
|
|
| .overview-lower { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| margin-top: 16px; |
| } |
|
|
| .overview-lower h3 { |
| margin: 0 0 8px; |
| color: var(--muted); |
| font-size: 0.78rem; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| } |
|
|
| .compact-defs { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| margin: 0; |
| } |
|
|
| .compact-defs div { |
| min-width: 0; |
| border: 1px solid var(--line-soft); |
| border-radius: 16px; |
| background: rgba(8, 12, 29, 0.62); |
| padding: 10px; |
| } |
|
|
| .compact-defs dd { |
| margin-left: 0; |
| font-size: 0.86rem; |
| } |
|
|
| .candidate-list, |
| .history-list, |
| .reward-bars, |
| .event-log { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| max-height: 292px; |
| overflow: auto; |
| padding-right: 2px; |
| } |
|
|
| .candidate-row { |
| display: grid; |
| grid-template-columns: minmax(150px, 1fr) minmax(90px, 0.65fr) 64px; |
| width: 100%; |
| min-height: 58px; |
| align-items: center; |
| gap: 8px; |
| border-color: var(--line-soft); |
| background: var(--surface-2); |
| color: var(--ink); |
| text-align: left; |
| box-shadow: none; |
| } |
|
|
| .candidate-row:hover:not(:disabled) { |
| border-color: rgba(40, 232, 255, 0.32); |
| background: var(--surface-3); |
| box-shadow: inset 0 0 24px rgba(40, 232, 255, 0.08); |
| } |
|
|
| .candidate-row.selected { |
| border-color: rgba(40, 232, 255, 0.72); |
| background: |
| linear-gradient(90deg, rgba(40, 232, 255, 0.16), rgba(155, 124, 255, 0.08)), |
| rgba(11, 16, 35, 0.72); |
| box-shadow: inset 3px 0 0 var(--accent-2), 0 0 26px rgba(40, 232, 255, 0.1); |
| } |
|
|
| .candidate-row.illegal { |
| border-color: rgba(255, 211, 92, 0.22); |
| background: rgba(34, 27, 49, 0.48); |
| color: rgba(246, 247, 255, 0.58); |
| } |
|
|
| .candidate-row.illegal strong { |
| color: #f7d878; |
| } |
|
|
| .candidate-row span { |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .candidate-row strong { |
| display: block; |
| color: #90f8ff; |
| font-size: 0.82rem; |
| } |
|
|
| .action-console { |
| min-height: 348px; |
| } |
|
|
| .action-detail-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| margin-bottom: 12px; |
| } |
|
|
| .action-console .field { |
| margin-bottom: 10px; |
| } |
|
|
| .console-notice { |
| margin: 0 0 12px; |
| border: 1px solid rgba(255, 211, 92, 0.34); |
| border-radius: 16px; |
| background: rgba(255, 211, 92, 0.1); |
| color: #f7d878; |
| padding: 10px 12px; |
| font-size: 0.84rem; |
| line-height: 1.45; |
| } |
|
|
| .console-notice strong { |
| color: #fff4b8; |
| } |
|
|
| .button-row { |
| justify-content: flex-start; |
| } |
|
|
| .reward-row { |
| display: grid; |
| grid-template-columns: minmax(150px, 0.9fr) minmax(110px, 1fr) 56px; |
| align-items: center; |
| gap: 8px; |
| font-size: 0.8rem; |
| } |
|
|
| .reward-row span { |
| min-width: 0; |
| overflow: hidden; |
| color: var(--muted); |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .reward-row strong { |
| color: var(--ink); |
| font-family: "JetBrains Mono", ui-monospace, monospace; |
| font-size: 0.76rem; |
| text-align: right; |
| } |
|
|
| .reward-track { |
| height: 7px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: rgba(4, 7, 18, 0.86); |
| } |
|
|
| .reward-fill { |
| height: 100%; |
| border-radius: inherit; |
| background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); |
| box-shadow: 0 0 16px rgba(40, 232, 255, 0.36); |
| transition: width 220ms ease; |
| } |
|
|
| .med-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); |
| gap: 10px; |
| } |
|
|
| .med-card { |
| min-width: 0; |
| border: 1px solid var(--line-soft); |
| border-radius: 18px; |
| background: var(--surface-2); |
| padding: 12px; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); |
| } |
|
|
| .med-card.high-risk { |
| border-color: rgba(255, 79, 216, 0.42); |
| box-shadow: 0 0 22px rgba(255, 79, 216, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06); |
| } |
|
|
| .med-card-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| } |
|
|
| .med-card-header strong { |
| min-width: 0; |
| overflow: hidden; |
| color: var(--ink); |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .med-card-header span { |
| border-color: rgba(255, 79, 216, 0.42); |
| background: rgba(255, 79, 216, 0.12); |
| color: #ff9dea; |
| font-size: 0.64rem; |
| } |
|
|
| .med-card p, |
| .med-meta { |
| margin: 6px 0 0; |
| color: var(--muted); |
| font-size: 0.84rem; |
| } |
|
|
| .med-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .med-meta span { |
| color: #8ff6ff; |
| } |
|
|
| .history-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| } |
|
|
| .history-item, |
| .event-log div { |
| border: 1px solid var(--line-soft); |
| border-radius: 16px; |
| background: var(--surface-2); |
| padding: 10px 12px; |
| color: var(--ink); |
| font-size: 0.84rem; |
| overflow-wrap: anywhere; |
| } |
|
|
| .history-item strong { |
| display: block; |
| margin-bottom: 4px; |
| } |
|
|
| .history-item span { |
| color: var(--muted); |
| } |
|
|
| .history-item.warning { |
| border-color: rgba(210, 153, 34, 0.32); |
| color: #f0c36a; |
| } |
|
|
| .detail-panel { |
| min-height: 220px; |
| } |
|
|
| .event-panel { |
| margin-bottom: 22px; |
| } |
|
|
| .event-log { |
| max-height: 210px; |
| font-family: "JetBrains Mono", ui-monospace, monospace; |
| } |
|
|
| .error-banner { |
| margin-bottom: 10px; |
| border: 1px solid rgba(248, 81, 73, 0.36); |
| border-radius: 16px; |
| background: rgba(248, 81, 73, 0.12); |
| color: #ff8b85; |
| padding: 10px 12px; |
| font-weight: 800; |
| } |
|
|
| .qtip-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 1000; |
| pointer-events: none; |
| } |
|
|
| .qtip-dim { |
| position: absolute; |
| inset: 0; |
| background: rgba(3, 3, 11, 0.72); |
| backdrop-filter: blur(4px); |
| pointer-events: auto; |
| } |
|
|
| .qtip-ring { |
| position: fixed; |
| z-index: 1001; |
| border: 2px solid var(--accent-2); |
| border-radius: 20px; |
| box-shadow: 0 0 0 4px rgba(40, 232, 255, 0.16), 0 0 38px rgba(40, 232, 255, 0.3); |
| pointer-events: none; |
| transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease; |
| } |
|
|
| .qtip-card { |
| position: fixed; |
| top: var(--tip-top, 18px); |
| left: var(--tip-left, 18px); |
| z-index: 1002; |
| width: min(374px, calc(100vw - 28px)); |
| padding: 18px; |
| pointer-events: auto; |
| animation: qtipIn 160ms ease-out; |
| } |
|
|
| .qtip-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 10px; |
| } |
|
|
| .qtip-header span, |
| .qtip-header strong { |
| color: var(--accent); |
| font-size: 0.72rem; |
| font-weight: 900; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .qtip-card h2 { |
| margin: 0 0 8px; |
| color: var(--ink); |
| font-size: 1.05rem; |
| letter-spacing: 0; |
| } |
|
|
| .qtip-card p { |
| margin: 0; |
| color: var(--muted); |
| font-size: 0.9rem; |
| line-height: 1.55; |
| } |
|
|
| .qtip-actions { |
| display: flex; |
| justify-content: flex-end; |
| gap: 8px; |
| margin-top: 16px; |
| } |
|
|
| @keyframes qtipIn { |
| from { |
| opacity: 0; |
| transform: translateY(6px); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .page { |
| padding: 20px; |
| } |
|
|
| .grid, |
| .grid-mini { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(240px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .list { |
| margin: 0; |
| padding-left: 18px; |
| } |
|
|
| .kpi { |
| margin: 0; |
| font-size: 1.6rem; |
| font-weight: 800; |
| } |
|
|
| .hero-line { |
| width: 280px; |
| max-width: 100%; |
| height: 4px; |
| margin: 14px 0; |
| border-radius: 999px; |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); |
| } |
|
|
| .actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| @media (max-width: 1180px) { |
| .metaverse-hero { |
| grid-template-columns: 1fr; |
| } |
|
|
| .topbar { |
| grid-template-columns: 1fr; |
| align-items: stretch; |
| } |
|
|
| .topbar-status, |
| .topbar-actions { |
| justify-content: flex-start; |
| } |
|
|
| .workbench-layout, |
| .overview-lower, |
| .history-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .panel-wide { |
| grid-column: auto; |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .workbench-shell { |
| padding: 10px; |
| } |
|
|
| .blackhole-video { |
| top: -20vh; |
| min-width: 620px; |
| height: 54vh; |
| } |
|
|
| .metaverse-hero { |
| margin-top: 8px; |
| padding: 18px; |
| } |
|
|
| .metaverse-hero h2 { |
| font-size: clamp(2rem, 13vw, 3.4rem); |
| letter-spacing: -0.055em; |
| } |
|
|
| .hero-stat-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .topbar, |
| .panel-surface:not(.topbar, .advanced-strip, .metaverse-hero), |
| .advanced-strip { |
| padding: 12px; |
| } |
|
|
| .mode-toggle, |
| .topbar-actions, |
| .advanced-strip, |
| .model-truth-grid, |
| .kpi-grid, |
| .action-detail-grid, |
| .compact-defs, |
| .grid, |
| .grid-mini { |
| grid-template-columns: 1fr; |
| } |
|
|
| .topbar-actions button, |
| .button-row button, |
| .qtip-actions button { |
| width: 100%; |
| } |
|
|
| .qtip-card { |
| inset: auto 10px 14px 10px; |
| width: auto; |
| } |
|
|
| .qtip-actions { |
| flex-direction: column; |
| } |
|
|
| .qtip-ring { |
| display: none; |
| } |
|
|
| .candidate-row, |
| .reward-row { |
| grid-template-columns: 1fr; |
| } |
|
|
| .candidate-row span, |
| .reward-row span { |
| white-space: normal; |
| } |
|
|
| .reward-row strong { |
| text-align: left; |
| } |
|
|
| .panel-scroll, |
| .action-console, |
| .detail-panel { |
| min-height: auto; |
| } |
|
|
| .candidate-list, |
| .history-list, |
| .reward-bars, |
| .event-log { |
| max-height: none; |
| } |
| } |
|
|
| .small-print { |
| font-size: 0.78rem; |
| line-height: 1.35; |
| } |
|
|
| .alt-med-tool { |
| margin-top: 10px; |
| border: 1px dashed rgba(155, 124, 255, 0.35); |
| background: rgba(8, 11, 27, 0.55); |
| } |
|
|
| .alt-med-tool .panel-heading h2 { |
| font-size: 1.05rem; |
| } |
|
|
| .alt-med-tool-regimen-select { |
| margin: 0 0 10px; |
| max-width: min(520px, 100%); |
| } |
|
|
| .alt-med-tool-regimen-select select { |
| width: 100%; |
| } |
|
|
| .alt-med-tool-hint { |
| margin: 8px 0 0; |
| max-width: 960px; |
| } |
|
|
| .alt-med-tool-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| align-items: flex-end; |
| } |
|
|
| .alt-med-tool-field { |
| flex: 1 1 220px; |
| margin: 0; |
| } |
|
|
| .alt-med-tool-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .alt-med-tool-results { |
| margin-top: 12px; |
| } |
|
|
| .alt-med-tool-errors { |
| color: var(--warning); |
| font-size: 0.85rem; |
| } |
|
|
| .alt-med-suggestions-scroll { |
| margin-top: 8px; |
| max-height: 17.5rem; |
| overflow-y: auto; |
| overflow-x: hidden; |
| padding-right: 4px; |
| border-radius: 12px; |
| border: 1px solid var(--line-soft); |
| background: rgba(5, 8, 20, 0.35); |
| } |
|
|
| .alt-med-suggestion-list { |
| list-style: none; |
| margin: 0; |
| padding: 8px; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .alt-med-suggestion { |
| padding: 8px 10px; |
| border-radius: 10px; |
| border: 1px solid var(--line-soft); |
| background: rgba(13, 16, 35, 0.45); |
| flex-shrink: 0; |
| } |
|
|
| .alt-med-ar { |
| margin-top: 4px; |
| font-size: 0.76rem; |
| color: var(--muted); |
| line-height: 1.35; |
| display: -webkit-box; |
| -webkit-box-orient: vertical; |
| -webkit-line-clamp: 2; |
| overflow: hidden; |
| } |
|
|
| .alt-med-link { |
| display: inline-block; |
| margin-top: 6px; |
| font-size: 0.82rem; |
| color: var(--accent-2); |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 7px; |
| height: 7px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| border-radius: 999px; |
| background: rgba(154, 166, 178, 0.34); |
| } |
|
|
