Spaces:
Sleeping
Sleeping
| /* | |
| * ContentGuard Supreme UI | |
| * Premium editorial + control-room aesthetic while preserving existing app.js hooks. | |
| */ | |
| @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Sora:wght@400;500;600;700&display=swap'); | |
| :root { | |
| --paper-0: #fffbf2; | |
| --paper-1: #f4eddf; | |
| --paper-2: #e7ddca; | |
| --ink-900: #10202a; | |
| --ink-800: #1d3341; | |
| --ink-700: #2a4b5f; | |
| --ink-500: #4f6f80; | |
| --ink-400: #658696; | |
| --teal-500: #0f9f9b; | |
| --teal-600: #0b7f86; | |
| --cyan-500: #0ea5e9; | |
| --coral-500: #ef6f47; | |
| --amber-500: #f59e0b; | |
| --emerald-500: #10b981; | |
| --rose-500: #e5484d; | |
| /* Compatibility tokens used by app.js */ | |
| --zinc-50: #f7f4ee; | |
| --zinc-100: #e8e0d3; | |
| --zinc-200: #d5cab8; | |
| --zinc-300: #c0b39f; | |
| --zinc-400: #8f7e66; | |
| --zinc-500: #75654f; | |
| --zinc-600: #5f523f; | |
| --zinc-700: #4a4031; | |
| --zinc-800: #312a20; | |
| --zinc-900: #231e17; | |
| --zinc-950: #18140f; | |
| --indigo-500: var(--teal-500); | |
| --indigo-600: var(--teal-600); | |
| --danger: var(--rose-500); | |
| --warning: var(--amber-500); | |
| --bg-app: radial-gradient(circle at 20% 10%, #fff6dc 0%, #f8f1e4 40%, #efe7d8 100%); | |
| --surface-base: rgba(255, 250, 240, 0.74); | |
| --surface-strong: #fffdf8; | |
| --surface-overlay: rgba(24, 20, 15, 0.86); | |
| --border-subtle: rgba(16, 32, 42, 0.1); | |
| --border-medium: rgba(16, 32, 42, 0.18); | |
| --border-strong: rgba(16, 32, 42, 0.24); | |
| --border-accent: rgba(15, 159, 155, 0.42); | |
| --text-primary: var(--ink-900); | |
| --text-secondary: var(--ink-700); | |
| --text-tertiary: var(--ink-500); | |
| --text-accent: var(--teal-600); | |
| --radius-xs: 8px; | |
| --radius-sm: 12px; | |
| --radius-md: 18px; | |
| --radius-lg: 24px; | |
| --sidebar-w: 306px; | |
| --hud-gap: 24px; | |
| --ease-out: cubic-bezier(0.16, 1, 0.3, 1); | |
| --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); | |
| --spring-snappy: cubic-bezier(0.18, 0.88, 0.32, 1.22); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg-app); | |
| color: var(--text-primary); | |
| font-family: 'Sora', sans-serif; | |
| overflow: hidden; | |
| letter-spacing: -0.01em; | |
| position: relative; | |
| } | |
| body::before, | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| } | |
| body::before { | |
| background: | |
| radial-gradient(circle at 8% 12%, rgba(14, 165, 233, 0.16), transparent 40%), | |
| radial-gradient(circle at 88% 20%, rgba(239, 111, 71, 0.15), transparent 42%), | |
| radial-gradient(circle at 75% 90%, rgba(15, 159, 155, 0.12), transparent 40%); | |
| z-index: -3; | |
| } | |
| body::after { | |
| background-image: | |
| linear-gradient(rgba(16, 32, 42, 0.025) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(16, 32, 42, 0.025) 1px, transparent 1px); | |
| background-size: 26px 26px; | |
| z-index: -2; | |
| } | |
| #fluid-canvas { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| opacity: 0.55; | |
| filter: saturate(1.1); | |
| } | |
| .scanline { | |
| position: fixed; | |
| top: -180px; | |
| left: 0; | |
| width: 100%; | |
| height: 180px; | |
| background: linear-gradient(to bottom, transparent, rgba(14, 165, 233, 0.07), transparent); | |
| pointer-events: none; | |
| animation: scanMove 9s linear infinite; | |
| z-index: 3; | |
| } | |
| .ambient-orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(48px); | |
| pointer-events: none; | |
| z-index: -1; | |
| opacity: 0.35; | |
| } | |
| .orb-a { | |
| width: 340px; | |
| height: 340px; | |
| background: rgba(14, 165, 233, 0.32); | |
| top: -60px; | |
| right: 10%; | |
| } | |
| .orb-b { | |
| width: 320px; | |
| height: 320px; | |
| background: rgba(239, 111, 71, 0.26); | |
| bottom: -120px; | |
| left: -40px; | |
| } | |
| .app-shell { | |
| display: grid; | |
| grid-template-columns: var(--sidebar-w) 1fr; | |
| width: 100%; | |
| height: 100dvh; | |
| gap: 0; | |
| animation: shellLift 1s var(--ease-out); | |
| } | |
| .sidebar { | |
| background: linear-gradient(155deg, rgba(15, 25, 34, 0.92), rgba(9, 17, 24, 0.96)); | |
| border-right: 1px solid rgba(255, 255, 255, 0.08); | |
| color: #eff8ff; | |
| padding: 26px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| z-index: 4; | |
| box-shadow: 0 20px 44px rgba(11, 18, 24, 0.42); | |
| } | |
| .sidebar::after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 1px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, rgba(14, 165, 233, 0.55), transparent); | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| margin-bottom: 20px; | |
| } | |
| .logo-icon { | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 13px; | |
| display: grid; | |
| place-items: center; | |
| color: #e9feff; | |
| background: linear-gradient(140deg, var(--teal-600), #096d74); | |
| box-shadow: 0 14px 24px rgba(15, 159, 155, 0.38); | |
| } | |
| .brand-text { | |
| margin: 0; | |
| font-family: 'Bricolage Grotesque', sans-serif; | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| color: #f8feff; | |
| } | |
| .brand-subtitle { | |
| margin: 2px 0 0; | |
| font-size: 0.72rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: rgba(220, 242, 250, 0.78); | |
| } | |
| .brand-info { | |
| min-width: 0; | |
| } | |
| .sidebar-intro { | |
| margin-bottom: 18px; | |
| padding: 14px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .sidebar-nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| } | |
| .nav-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .nav-label { | |
| margin: 0; | |
| font-size: 0.67rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| color: rgba(204, 230, 240, 0.74); | |
| } | |
| .nav-item { | |
| width: 100%; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| border-radius: 14px; | |
| background: rgba(255, 255, 255, 0.04); | |
| color: #eaf8fd; | |
| padding: 12px 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); | |
| } | |
| .nav-item i { | |
| width: 18px; | |
| text-align: center; | |
| color: rgba(164, 235, 238, 0.95); | |
| } | |
| .nav-item:hover { | |
| transform: translateY(-1px); | |
| border-color: rgba(14, 165, 233, 0.6); | |
| background: rgba(14, 165, 233, 0.12); | |
| } | |
| .nav-item.active { | |
| border-color: rgba(15, 159, 155, 0.9); | |
| background: linear-gradient(125deg, rgba(15, 159, 155, 0.28), rgba(14, 165, 233, 0.24)); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28); | |
| } | |
| .nav-badge { | |
| margin-left: auto; | |
| font-size: 0.61rem; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: rgba(223, 250, 255, 0.9); | |
| padding: 4px 7px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.12); | |
| } | |
| .sidebar-footer { | |
| margin-top: auto; | |
| padding-top: 16px; | |
| } | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: rgba(239, 111, 71, 0.92); | |
| box-shadow: 0 0 0 0 rgba(239, 111, 71, 0.46); | |
| } | |
| .status-indicator.connected { | |
| background: rgba(16, 185, 129, 0.94); | |
| animation: pulse 1.8s infinite; | |
| } | |
| .sidebar .text-secondary, | |
| .sidebar .hud-label { | |
| color: rgba(220, 242, 250, 0.78); | |
| } | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| position: relative; | |
| min-height: 0; | |
| height: 100dvh; | |
| overflow: hidden; | |
| } | |
| .topbar { | |
| min-height: 82px; | |
| padding: 14px var(--hud-gap); | |
| border-bottom: 1px solid var(--border-subtle); | |
| background: rgba(255, 251, 244, 0.82); | |
| backdrop-filter: blur(12px); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 14px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 3; | |
| } | |
| .breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .breadcrumb-sep { | |
| font-size: 0.74rem; | |
| color: var(--text-tertiary); | |
| } | |
| .breadcrumb-current { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .hud-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| } | |
| .hud-group { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| } | |
| .hud-label { | |
| font-size: 0.65rem; | |
| letter-spacing: 0.11em; | |
| text-transform: uppercase; | |
| color: var(--text-tertiary); | |
| } | |
| .hud-value { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 0.9rem; | |
| color: var(--teal-600); | |
| font-weight: 600; | |
| } | |
| .page-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 30px var(--hud-gap); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 22px; | |
| } | |
| #main-interface { | |
| flex: 1; | |
| min-height: 0; | |
| height: auto; | |
| overflow: hidden; | |
| } | |
| .workspace-tabs { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px var(--hud-gap) 0; | |
| border-bottom: 1px solid var(--border-subtle); | |
| background: rgba(255, 251, 244, 0.72); | |
| backdrop-filter: blur(9px); | |
| } | |
| .workspace-tab { | |
| border: 1px solid var(--border-medium); | |
| border-bottom: none; | |
| border-top-left-radius: 12px; | |
| border-top-right-radius: 12px; | |
| padding: 10px 14px; | |
| background: rgba(255, 255, 255, 0.52); | |
| color: var(--text-secondary); | |
| font-family: 'Sora', sans-serif; | |
| font-weight: 600; | |
| font-size: 0.78rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); | |
| } | |
| .workspace-tab:hover { | |
| background: rgba(255, 255, 255, 0.88); | |
| color: var(--text-primary); | |
| } | |
| .workspace-tab.active { | |
| background: var(--surface-strong); | |
| color: var(--teal-600); | |
| border-color: rgba(15, 159, 155, 0.34); | |
| } | |
| .history-page { | |
| flex: 1; | |
| min-height: 0; | |
| overflow: hidden; | |
| padding: 18px var(--hud-gap) var(--hud-gap); | |
| } | |
| .history-grid { | |
| display: grid; | |
| grid-template-rows: auto 1fr; | |
| gap: var(--hud-gap); | |
| height: 100%; | |
| min-height: 0; | |
| } | |
| .history-chart-card { | |
| padding-bottom: 14px; | |
| } | |
| #accuracy-chart { | |
| width: 100%; | |
| height: 240px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-subtle); | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(245, 252, 250, 0.64)); | |
| } | |
| .history-log-card { | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .history-list { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| padding-right: 4px; | |
| } | |
| .history-empty { | |
| border: 1px dashed var(--border-medium); | |
| border-radius: var(--radius-sm); | |
| padding: 16px; | |
| color: var(--text-secondary); | |
| } | |
| .history-item { | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-sm); | |
| padding: 12px; | |
| background: rgba(255, 255, 255, 0.58); | |
| display: grid; | |
| gap: 9px; | |
| } | |
| .history-item-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .history-item-title { | |
| margin: 0; | |
| font-size: 0.8rem; | |
| font-family: 'IBM Plex Mono', monospace; | |
| color: var(--ink-800); | |
| } | |
| .history-score { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| } | |
| .history-meta { | |
| margin: 0; | |
| font-size: 0.72rem; | |
| color: var(--text-secondary); | |
| overflow-wrap: anywhere; | |
| } | |
| .history-block { | |
| margin: 0; | |
| font-size: 0.78rem; | |
| line-height: 1.55; | |
| color: var(--ink-800); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.72); | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| min-height: 0; | |
| } | |
| .history-block-body { | |
| overflow-y: auto; | |
| max-height: 118px; | |
| padding-right: 4px; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| white-space: pre-wrap; | |
| overscroll-behavior: contain; | |
| } | |
| .history-block-body-logs { | |
| max-height: 160px; | |
| } | |
| .history-label { | |
| display: inline-block; | |
| margin-bottom: 6px; | |
| font-size: 0.67rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.09em; | |
| color: var(--text-tertiary); | |
| } | |
| .landing-hero { | |
| border: 1px solid rgba(15, 159, 155, 0.18); | |
| background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 238, 0.8)); | |
| } | |
| .fade-in { | |
| animation: heroRise 0.9s var(--ease-out) both; | |
| } | |
| .hero-kicker { | |
| margin: 0 0 10px; | |
| font-size: 0.76rem; | |
| letter-spacing: 0.17em; | |
| text-transform: uppercase; | |
| color: var(--teal-600); | |
| font-weight: 700; | |
| } | |
| .landing-title { | |
| margin: 0; | |
| font-family: 'Bricolage Grotesque', sans-serif; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1.07; | |
| font-size: clamp(1.8rem, 3vw, 2.7rem); | |
| max-width: 850px; | |
| } | |
| .landing-subtitle { | |
| margin: 12px 0 0; | |
| max-width: 720px; | |
| line-height: 1.7; | |
| } | |
| .hero-pills { | |
| margin-top: 20px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .hero-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 9px 12px; | |
| border-radius: 999px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--ink-800); | |
| background: rgba(14, 165, 233, 0.12); | |
| border: 1px solid rgba(14, 165, 233, 0.22); | |
| } | |
| .landing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: var(--hud-gap); | |
| } | |
| .spotlight-card { | |
| min-height: 186px; | |
| } | |
| .spotlight-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 11px; | |
| color: var(--text-secondary); | |
| } | |
| .spotlight-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| line-height: 1.5; | |
| } | |
| .list-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: linear-gradient(120deg, var(--teal-500), var(--cyan-500)); | |
| box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); | |
| flex: 0 0 auto; | |
| } | |
| .workspace { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr); | |
| gap: 0; | |
| min-height: 0; | |
| height: 100%; | |
| align-items: stretch; | |
| overflow: hidden; | |
| } | |
| .view-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--hud-gap); | |
| padding: var(--hud-gap); | |
| overflow-y: hidden; | |
| min-width: 0; | |
| min-height: 0; | |
| } | |
| .view-col:first-child { | |
| height: 100%; | |
| max-height: 100%; | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| scrollbar-gutter: stable; | |
| } | |
| .view-col:first-child > .alert-banner, | |
| .view-col:first-child > .card { | |
| flex: 0 0 auto; | |
| } | |
| .terminal-column { | |
| padding-left: 0; | |
| overflow: hidden; | |
| } | |
| .card { | |
| border: 1px solid var(--border-medium); | |
| border-radius: var(--radius-md); | |
| background: var(--surface-base); | |
| backdrop-filter: blur(12px); | |
| box-shadow: 0 14px 38px rgba(16, 32, 42, 0.12); | |
| padding: 22px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, rgba(15, 159, 155, 0.8), rgba(14, 165, 233, 0.5), transparent 70%); | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 18px 44px rgba(16, 32, 42, 0.16); | |
| border-color: var(--border-accent); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 14px; | |
| margin-bottom: 14px; | |
| } | |
| .card-header h3, | |
| .card-header h4 { | |
| margin: 0; | |
| font-family: 'Bricolage Grotesque', sans-serif; | |
| font-size: 0.92rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| } | |
| .compact-header { | |
| margin-bottom: 8px; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 5px 10px; | |
| border-radius: 999px; | |
| font-size: 0.67rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| background: rgba(15, 159, 155, 0.14); | |
| color: var(--teal-600); | |
| border: 1px solid rgba(15, 159, 155, 0.28); | |
| font-weight: 700; | |
| } | |
| .alert-banner { | |
| border-left: 5px solid var(--indigo-500); | |
| border-radius: var(--radius-sm); | |
| padding: 16px; | |
| display: flex; | |
| gap: 14px; | |
| align-items: flex-start; | |
| background: linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(243, 253, 251, 0.88)); | |
| border: 1px solid rgba(15, 159, 155, 0.18); | |
| } | |
| .alert-badge { | |
| flex: 0 0 auto; | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 0.66rem; | |
| letter-spacing: 0.09em; | |
| color: #07474e; | |
| background: rgba(15, 159, 155, 0.16); | |
| border: 1px solid rgba(15, 159, 155, 0.24); | |
| font-weight: 600; | |
| } | |
| .alert-content strong { | |
| display: block; | |
| margin-bottom: 4px; | |
| font-size: 0.95rem; | |
| } | |
| .alert-content p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| line-height: 1.55; | |
| overflow-wrap: anywhere; | |
| } | |
| .content-box { | |
| min-height: 116px; | |
| max-height: clamp(130px, 28vh, 260px); | |
| overflow-y: auto; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-medium); | |
| background: linear-gradient(145deg, #fffdfa, #f7f1e6); | |
| padding: 18px; | |
| line-height: 1.72; | |
| color: var(--ink-800); | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .stat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .stat-item { | |
| border-radius: var(--radius-xs); | |
| border: 1px solid var(--border-subtle); | |
| background: rgba(255, 255, 255, 0.62); | |
| padding: 12px; | |
| } | |
| .label { | |
| margin: 0 0 3px; | |
| font-size: 0.67rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-tertiary); | |
| } | |
| .value { | |
| margin: 0; | |
| font-family: 'IBM Plex Mono', monospace; | |
| color: var(--ink-800); | |
| font-weight: 500; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| #action-panel { | |
| display: block; | |
| max-height: 30vh; | |
| overflow-y: auto; | |
| padding-right: 2px; | |
| } | |
| #action-panel .stat-grid { | |
| margin-bottom: 8px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 7px; | |
| } | |
| .form-group label { | |
| margin: 0; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| width: 100%; | |
| border-radius: 11px; | |
| border: 1px solid var(--border-medium); | |
| background: rgba(255, 255, 255, 0.86); | |
| color: var(--text-primary); | |
| padding: 10px 12px; | |
| font-family: 'Sora', sans-serif; | |
| font-size: 0.88rem; | |
| transition: border-color 0.2s var(--ease-in-out), box-shadow 0.2s var(--ease-in-out), background 0.2s var(--ease-in-out); | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: rgba(15, 159, 155, 0.7); | |
| box-shadow: 0 0 0 4px rgba(15, 159, 155, 0.15); | |
| background: #ffffff; | |
| } | |
| .auto-agent-box { | |
| margin-top: 18px; | |
| border-radius: var(--radius-sm); | |
| border: 1px dashed rgba(14, 165, 233, 0.35); | |
| padding: 16px; | |
| background: rgba(14, 165, 233, 0.08); | |
| } | |
| .section-copy { | |
| margin-bottom: 16px; | |
| } | |
| .agent-btns { | |
| display: flex; | |
| gap: 10px; | |
| align-items: stretch; | |
| } | |
| .btn { | |
| border: 1px solid transparent; | |
| border-radius: 12px; | |
| padding: 11px 16px; | |
| font-family: 'Sora', sans-serif; | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| font-weight: 700; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); | |
| } | |
| .btn:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| } | |
| .btn:disabled { | |
| opacity: 0.55; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| color: #f3fffe; | |
| background: linear-gradient(130deg, var(--teal-600), var(--cyan-500)); | |
| box-shadow: 0 10px 20px rgba(14, 165, 233, 0.25); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| box-shadow: 0 14px 24px rgba(14, 165, 233, 0.3); | |
| } | |
| .btn-secondary { | |
| color: var(--ink-800); | |
| background: rgba(255, 255, 255, 0.7); | |
| border-color: rgba(16, 32, 42, 0.2); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: #ffffff; | |
| border-color: rgba(16, 32, 42, 0.3); | |
| } | |
| .btn-icon { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-medium); | |
| background: rgba(255, 255, 255, 0.75); | |
| color: var(--text-secondary); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.2s var(--ease-out); | |
| } | |
| .btn-icon:hover { | |
| color: var(--text-primary); | |
| border-color: var(--border-strong); | |
| background: #ffffff; | |
| } | |
| .terminal-card { | |
| background: linear-gradient(175deg, rgba(9, 17, 24, 0.96), rgba(8, 14, 20, 0.98)); | |
| border: 1px solid rgba(139, 209, 225, 0.2); | |
| box-shadow: 0 24px 50px rgba(6, 10, 14, 0.45); | |
| color: #dbe9ef; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100%; | |
| height: 100%; | |
| } | |
| .terminal-card::before { | |
| background: linear-gradient(90deg, rgba(14, 165, 233, 0.78), rgba(15, 159, 155, 0.52), transparent 70%); | |
| } | |
| .terminal-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 14px; | |
| border-bottom: 1px solid rgba(219, 233, 239, 0.12); | |
| } | |
| .terminal-header .btn-icon { | |
| margin-left: auto; | |
| border-color: rgba(219, 233, 239, 0.22); | |
| background: rgba(219, 233, 239, 0.08); | |
| color: rgba(219, 233, 239, 0.85); | |
| } | |
| .terminal-header .btn-icon:hover { | |
| background: rgba(219, 233, 239, 0.16); | |
| } | |
| .dot { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| } | |
| .dot.red { | |
| background: var(--rose-500); | |
| } | |
| .dot.yellow { | |
| background: var(--amber-500); | |
| } | |
| .dot.green { | |
| background: var(--emerald-500); | |
| } | |
| .terminal-title { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 0.69rem; | |
| letter-spacing: 0.1em; | |
| color: rgba(219, 233, 239, 0.75); | |
| } | |
| .terminal-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 18px; | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: 0.84rem; | |
| line-height: 1.74; | |
| color: rgba(219, 233, 239, 0.9); | |
| position: relative; | |
| min-height: 0; | |
| max-height: 100%; | |
| overscroll-behavior: contain; | |
| } | |
| .log-line { | |
| margin-bottom: 8px; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .log-line.active::after { | |
| content: '_'; | |
| margin-left: 2px; | |
| color: var(--teal-500); | |
| animation: blink 1s steps(1) infinite; | |
| } | |
| .reward-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(8, 14, 20, 0.94); | |
| backdrop-filter: blur(8px); | |
| padding: 34px 26px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| gap: 14px; | |
| z-index: 4; | |
| animation: overlayIn 0.3s var(--ease-out); | |
| } | |
| .reward-score { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-size: clamp(2.5rem, 8vw, 3.9rem); | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .feedback-bubble { | |
| width: min(620px, 100%); | |
| max-height: 240px; | |
| overflow-y: auto; | |
| border: 1px solid rgba(219, 233, 239, 0.2); | |
| border-radius: var(--radius-sm); | |
| background: rgba(219, 233, 239, 0.08); | |
| padding: 18px; | |
| text-align: left; | |
| color: rgba(231, 240, 245, 0.92); | |
| line-height: 1.7; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(13, 22, 30, 0.5); | |
| backdrop-filter: blur(6px); | |
| z-index: 9; | |
| padding: 18px; | |
| } | |
| .modal-card { | |
| width: min(540px, 100%); | |
| margin: 0; | |
| animation: modalIn 0.25s var(--spring-snappy); | |
| } | |
| .panel-body { | |
| padding-top: 0; | |
| } | |
| .modal-actions { | |
| margin-top: 22px; | |
| } | |
| .modal-actions .btn { | |
| flex: 1; | |
| } | |
| .text-primary { | |
| color: var(--text-primary); | |
| } | |
| .text-secondary { | |
| color: var(--text-secondary); | |
| } | |
| .text-accent { | |
| color: var(--text-accent); | |
| } | |
| .text-danger { | |
| color: var(--danger); | |
| } | |
| .text-sm { | |
| font-size: 0.84rem; | |
| line-height: 1.6; | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(16, 32, 42, 0.26); | |
| border-radius: 999px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(15, 159, 155, 0.45); | |
| } | |
| @keyframes scanMove { | |
| from { | |
| transform: translateY(-180px); | |
| } | |
| to { | |
| transform: translateY(120vh); | |
| } | |
| } | |
| @keyframes shellLift { | |
| from { | |
| opacity: 0; | |
| transform: translateY(5px) scale(0.996); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| @keyframes heroRise { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes modalIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px) scale(0.985); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| @keyframes overlayIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes blink { | |
| 50% { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); | |
| } | |
| } | |
| @media (max-width: 1280px) { | |
| .workspace { | |
| grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr); | |
| } | |
| .landing-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| body { | |
| overflow: auto; | |
| } | |
| .app-shell { | |
| grid-template-columns: 1fr; | |
| height: auto; | |
| min-height: 100dvh; | |
| } | |
| .sidebar { | |
| border-right: none; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .sidebar::after { | |
| display: none; | |
| } | |
| .sidebar-nav { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .nav-section { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 14px; | |
| padding: 12px; | |
| } | |
| .main-content { | |
| min-height: 0; | |
| } | |
| .topbar { | |
| position: static; | |
| flex-wrap: wrap; | |
| } | |
| .workspace { | |
| grid-template-columns: 1fr; | |
| } | |
| .workspace-tabs { | |
| padding-top: 8px; | |
| } | |
| .history-page { | |
| padding-top: 16px; | |
| } | |
| .history-grid { | |
| grid-template-rows: auto 1fr; | |
| } | |
| .terminal-column { | |
| padding-left: var(--hud-gap); | |
| padding-top: 0; | |
| } | |
| .terminal-card { | |
| min-height: 430px; | |
| } | |
| .page-content, | |
| .view-col { | |
| padding: 20px; | |
| gap: 18px; | |
| } | |
| .view-col { | |
| overflow-y: auto; | |
| } | |
| } | |
| @media (max-width: 700px) { | |
| :root { | |
| --hud-gap: 16px; | |
| } | |
| .sidebar { | |
| padding: 18px 14px; | |
| } | |
| .sidebar-nav { | |
| grid-template-columns: 1fr; | |
| } | |
| .topbar { | |
| padding: 12px 16px; | |
| } | |
| .hud-item { | |
| width: 100%; | |
| justify-content: flex-start; | |
| gap: 16px; | |
| } | |
| .hud-group { | |
| align-items: flex-start; | |
| } | |
| .landing-title { | |
| font-size: clamp(1.4rem, 8vw, 2rem); | |
| } | |
| .card { | |
| padding: 16px; | |
| } | |
| .stat-grid, | |
| #action-panel .stat-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .agent-btns { | |
| flex-direction: column; | |
| } | |
| .modal-card { | |
| width: 100%; | |
| } | |
| } | |