| :root { |
| --bg: #070a0f; |
| --bg-soft: #0b111a; |
| --panel: rgba(17, 24, 39, 0.88); |
| --panel-solid: #111827; |
| --panel-strong: #182235; |
| --line: rgba(148, 163, 184, 0.20); |
| --line-strong: rgba(148, 163, 184, 0.34); |
| --text: #edf2f7; |
| --muted: #9aa8bc; |
| --muted-2: #718096; |
| --accent: #bfff4f; |
| --accent-2: #6ee7f9; |
| --danger: #fb7185; |
| --ok: #34d399; |
| --warn: #fbbf24; |
| --button: #f8fafc; |
| --button-text: #0f172a; |
| --shadow: 0 24px 80px rgba(0, 0, 0, 0.34); |
| --radius-lg: 28px; |
| --radius-md: 18px; |
| --radius-sm: 12px; |
| } |
|
|
| * { box-sizing: border-box; } |
| html, body { min-height: 100%; } |
| body { |
| margin: 0; |
| color: var(--text); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; |
| background: |
| radial-gradient(circle at 12% 0%, rgba(191, 255, 79, 0.14), transparent 27%), |
| radial-gradient(circle at 88% 9%, rgba(110, 231, 249, 0.10), transparent 30%), |
| linear-gradient(145deg, #05070b 0%, #0b111a 55%, #06080d 100%); |
| } |
|
|
| button, input, textarea, select { font: inherit; } |
| *, *::before, *::after { box-sizing: border-box; } |
| button { user-select: none; } |
|
|
| .app-shell { |
| display: grid; |
| grid-template-columns: 304px minmax(0, 1fr); |
| min-height: 100vh; |
| } |
|
|
| .sidebar { |
| position: sticky; |
| top: 0; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| padding: 20px; |
| border-right: 1px solid var(--line); |
| background: rgba(7, 10, 15, 0.72); |
| backdrop-filter: blur(18px); |
| } |
|
|
| .brand-card { |
| display: flex; |
| align-items: center; |
| gap: 13px; |
| padding: 12px; |
| border: 1px solid var(--line); |
| border-radius: 22px; |
| background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)); |
| } |
|
|
| .brand-mark { |
| width: 48px; |
| height: 48px; |
| border-radius: 17px; |
| display: grid; |
| place-items: center; |
| font-size: 24px; |
| font-weight: 950; |
| color: #0a0f16; |
| background: linear-gradient(135deg, var(--accent), #ffffff 62%, var(--accent-2)); |
| box-shadow: 0 12px 30px rgba(191,255,79,0.16); |
| } |
|
|
| .brand-name { font-weight: 900; letter-spacing: 0.2px; } |
| .brand-subtitle, .muted { color: var(--muted); } |
| .small, small { font-size: 12px; } |
|
|
| .language-switch { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px; |
| } |
|
|
| .lang-btn, .nav, button, .security-pill { |
| border: 1px solid var(--line); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .lang-btn { |
| padding: 9px 10px; |
| color: var(--muted); |
| background: rgba(15, 23, 42, 0.76); |
| cursor: pointer; |
| font-weight: 800; |
| } |
|
|
| .lang-btn.active { |
| color: var(--button-text); |
| background: var(--button); |
| } |
|
|
| .status-card { |
| padding: 14px; |
| border: 1px solid var(--line); |
| border-radius: 18px; |
| background: var(--panel); |
| } |
|
|
| .status-header { display: flex; align-items: center; gap: 9px; } |
| .status-dot { |
| width: 11px; |
| height: 11px; |
| border-radius: 99px; |
| background: var(--warn); |
| box-shadow: 0 0 18px rgba(251, 191, 36, 0.7); |
| } |
| .state-ok .status-dot { background: var(--ok); box-shadow: 0 0 18px rgba(52, 211, 153, 0.7); } |
| .state-error .status-dot { background: var(--danger); box-shadow: 0 0 18px rgba(251, 113, 133, 0.7); } |
| .status-title { font-weight: 850; } |
| .status-subtitle { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; } |
|
|
| .nav-list { display: grid; gap: 7px; } |
| .nav { |
| appearance: none; |
| display: grid; |
| grid-template-columns: 24px 1fr; |
| align-items: center; |
| gap: 9px; |
| width: 100%; |
| padding: 12px 13px; |
| text-align: left; |
| background: transparent; |
| color: #dbe7f3; |
| cursor: pointer; |
| font-weight: 780; |
| } |
| .nav span:first-child { color: var(--muted); text-align: center; } |
| .nav:hover { background: rgba(148, 163, 184, 0.08); } |
| .nav.active { |
| background: linear-gradient(90deg, rgba(191,255,79,0.15), rgba(110,231,249,0.04)); |
| border-color: rgba(191,255,79,0.34); |
| box-shadow: inset 3px 0 0 var(--accent); |
| } |
|
|
| .sidebar-footer { margin-top: auto; } |
| .mini-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; } |
| .security-pill { |
| display: inline-flex; |
| margin-top: 7px; |
| padding: 6px 10px; |
| background: rgba(52, 211, 153, 0.10); |
| border-color: rgba(52, 211, 153, 0.28); |
| color: #bbf7d0; |
| font-weight: 800; |
| } |
| .mini-copy { margin-top: 6px; color: var(--muted); font-size: 12px; } |
|
|
| .main { min-width: 0; padding: 24px; overflow: auto; } |
| .app-topbar { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 18px; |
| margin-bottom: 18px; |
| } |
| .eyebrow, .hero-kicker { |
| color: var(--accent); |
| font-size: 12px; |
| font-weight: 900; |
| text-transform: uppercase; |
| letter-spacing: 0.13em; |
| } |
| #viewTitle { margin: 4px 0 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.04em; } |
| .top-actions { display: flex; gap: 10px; } |
|
|
| .view { display: none; animation: enter 0.16s ease-out; } |
| .view.active { display: block; } |
| @keyframes enter { from { opacity: 0.75; transform: translateY(6px); } to { opacity: 1; transform: none; } } |
|
|
| .banner { |
| margin-bottom: 16px; |
| padding: 13px 15px; |
| border-radius: 16px; |
| border: 1px solid rgba(251,113,133,0.42); |
| background: rgba(127, 29, 29, 0.22); |
| color: #fecdd3; |
| line-height: 1.45; |
| } |
| .hidden { display: none !important; } |
|
|
| .hero-panel, .panel, .metric-card { |
| border: 1px solid var(--line); |
| background: var(--panel); |
| box-shadow: var(--shadow); |
| } |
| .hero-panel { |
| display: flex; |
| justify-content: space-between; |
| align-items: stretch; |
| gap: 24px; |
| padding: clamp(22px, 4vw, 34px); |
| border-radius: var(--radius-lg); |
| background: |
| linear-gradient(135deg, rgba(191,255,79,0.13), transparent 42%), |
| linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); |
| } |
| .hero-panel h2 { margin: 8px 0 8px; font-size: clamp(30px, 4vw, 54px); line-height: 0.96; letter-spacing: -0.055em; max-width: 850px; } |
| .hero-panel p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; } |
| .hero-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } |
|
|
| .metric-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 14px; |
| margin: 16px 0; |
| } |
| .metric-card { padding: 16px; border-radius: var(--radius-md); } |
| .metric-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 10px; } |
| .metric-card strong { display: block; font-size: 21px; line-height: 1.1; } |
| .metric-card small { display: block; margin-top: 7px; color: var(--muted); } |
|
|
| .split-hero, .split, .chat-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr); |
| gap: 14px; |
| } |
| .panel { padding: 18px; border-radius: var(--radius-md); } |
| .panel h2, .section-header h2 { margin: 0 0 7px; font-size: 22px; letter-spacing: -0.02em; } |
| .panel p, .section-header p { margin: 0; color: var(--muted); line-height: 1.5; } |
|
|
| .checklist { display: grid; gap: 10px; } |
| .check-row { |
| display: grid; |
| grid-template-columns: 13px 1fr; |
| gap: 12px; |
| align-items: start; |
| padding: 12px; |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: rgba(15, 23, 42, 0.42); |
| } |
| .check-row > span { width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 14px rgba(251,191,36,0.6); } |
| .check-row.ok > span { background: var(--ok); box-shadow: 0 0 14px rgba(52,211,153,0.6); } |
| .check-row.error > span { background: var(--danger); box-shadow: 0 0 14px rgba(251,113,133,0.6); } |
| .check-row strong { display: block; } |
| .check-row small { display: block; color: var(--muted); margin-top: 3px; } |
|
|
| .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } |
|
|
| .section-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| gap: 20px; |
| margin-bottom: 16px; |
| } |
|
|
| button { |
| border: 0; |
| padding: 11px 15px; |
| border-radius: 13px; |
| cursor: pointer; |
| font-weight: 900; |
| transition: transform 0.11s ease, filter 0.11s ease, border-color 0.11s ease; |
| } |
| button:hover { transform: translateY(-1px); filter: brightness(1.04); } |
| button:active { transform: translateY(0); } |
| button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } |
| button:focus-visible, .nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } |
| .primary { color: #061016; background: linear-gradient(135deg, var(--accent), #ffffff); } |
| .secondary { color: var(--text); background: rgba(148, 163, 184, 0.10); border: 1px solid var(--line); } |
|
|
| input:not([type="checkbox"]):not([type="radio"]), textarea, select { |
| width: 100%; |
| color: var(--text); |
| background: rgba(3, 7, 18, 0.72); |
| border: 1px solid var(--line-strong); |
| border-radius: 13px; |
| padding: 11px 12px; |
| outline: none; |
| } |
| input[type="checkbox"], input[type="radio"] { |
| width: 18px; |
| height: 18px; |
| min-width: 18px; |
| margin: 2px 0 0; |
| flex: 0 0 auto; |
| accent-color: var(--accent); |
| } |
| input:focus, textarea:focus, select:focus { border-color: rgba(191,255,79,0.55); box-shadow: 0 0 0 3px rgba(191,255,79,0.09); } |
| textarea { resize: vertical; } |
|
|
| .chat-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } |
| .chat-panel, .side-panel { |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: var(--panel); |
| box-shadow: var(--shadow); |
| } |
| .chat-panel { overflow: hidden; } |
| .chat-log { |
| height: calc(100vh - 285px); |
| min-height: 420px; |
| padding: 20px; |
| overflow: auto; |
| background: rgba(2, 6, 23, 0.35); |
| } |
| .msg { display: flex; margin: 12px 0; } |
| .msg.user { justify-content: flex-end; } |
| .bubble { |
| max-width: min(820px, 84%); |
| padding: 13px 15px; |
| border-radius: 17px; |
| line-height: 1.52; |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
| .user .bubble { color: #ffffff; background: linear-gradient(135deg, #2558a8, #1d4ed8); border-bottom-right-radius: 6px; } |
| .assistant .bubble { background: rgba(24, 34, 53, 0.96); border: 1px solid var(--line); border-bottom-left-radius: 6px; } |
| .system .bubble { background: rgba(191,255,79,0.09); border: 1px solid rgba(191,255,79,0.24); color: #eaffb3; } |
|
|
| .composer-card { padding: 14px; border-top: 1px solid var(--line); } |
| .composer-card textarea { min-height: 96px; } |
| .composer-actions { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 10px; align-items: end; margin-top: 10px; } |
| .select-label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; } |
|
|
| .side-panel { padding: 18px; position: sticky; top: 24px; } |
| .side-panel h2 { margin: 0 0 8px; } |
| .side-panel p { color: var(--muted); line-height: 1.45; } |
| .chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } |
| .chip, .pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| padding: 5px 9px; |
| color: #dbe7f3; |
| background: rgba(15, 23, 42, 0.68); |
| font-size: 12px; |
| font-weight: 760; |
| } |
| .chip.recommended { border-color: rgba(191,255,79,0.44); color: #eaff99; } |
| .hint-box { display: grid; gap: 5px; margin-top: 16px; padding: 13px; border: 1px solid rgba(110,231,249,0.22); border-radius: 16px; background: rgba(110,231,249,0.075); } |
| .hint-box span { color: var(--muted); line-height: 1.4; } |
|
|
| .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 14px; margin-bottom: 16px; } |
| .model-card { position: relative; min-height: 220px; } |
| .model-card.recommended { border-color: rgba(191,255,79,0.45); } |
| .recommended-badge { position: absolute; right: 14px; top: 14px; color: #eaff99; border: 1px solid rgba(191,255,79,0.36); border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 900; background: rgba(191,255,79,0.08); } |
| .model-title { padding-right: 112px; } |
| .model-card .desc { min-height: 42px; color: var(--muted); } |
| .model-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; } |
| .progress-track { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(148,163,184,0.14); margin: 14px 0 8px; } |
| .progress-bar { height: 100%; width: 60%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; } |
|
|
| .form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; } |
| .doc-textarea { min-height: 220px; margin: 10px 0; } |
| .doc-list { display: grid; gap: 9px; } |
| .doc-item { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(15,23,42,0.44); } |
| .settings-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.55fr); |
| gap: 14px; |
| align-items: start; |
| } |
| .settings-panel { min-height: 0; } |
| .option-stack { display: grid; gap: 10px; margin: 16px 0; } |
| .option-card { |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| padding: 14px; |
| border: 1px solid var(--line); |
| border-radius: 16px; |
| background: rgba(15, 23, 42, 0.42); |
| cursor: pointer; |
| } |
| .option-card:hover { border-color: rgba(191,255,79,0.30); background: rgba(15, 23, 42, 0.62); } |
| .option-copy { display: grid; gap: 4px; min-width: 0; } |
| .option-copy strong { display: block; color: var(--text); } |
| .option-copy small { display: block; color: var(--muted); line-height: 1.35; } |
| .settings-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } |
| .feature-list { display: grid; gap: 8px; margin-top: 16px; } |
| .feature-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: center; } |
| .feature-row span:first-child { color: var(--muted); word-break: break-word; } |
|
|
| .chat-workspace { |
| display: grid; |
| grid-template-columns: 260px minmax(0, 1fr) 300px; |
| gap: 14px; |
| align-items: start; |
| } |
| .thread-panel { |
| min-height: calc(100vh - 150px); |
| padding: 14px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| background: var(--panel); |
| box-shadow: var(--shadow); |
| } |
| .thread-header, .chat-thread-bar, .button-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| } |
| .thread-header h2 { margin: 0; } |
| .thread-list { display: grid; gap: 8px; margin-top: 12px; max-height: calc(100vh - 260px); overflow: auto; } |
| .thread-item { |
| width: 100%; |
| display: grid; |
| gap: 4px; |
| padding: 11px; |
| text-align: left; |
| color: var(--text); |
| background: rgba(15, 23, 42, 0.42); |
| border: 1px solid var(--line); |
| } |
| .thread-item.active { border-color: rgba(191,255,79,0.45); background: rgba(191,255,79,0.08); } |
| .thread-item small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .chat-thread-bar { padding: 12px 14px; border-bottom: 1px solid var(--line); } |
| .compact { padding: 7px 10px; font-size: 12px; } |
| .danger-button { color: #fecdd3; border-color: rgba(251,113,133,0.34); } |
| .image-preview { width: 100%; max-height: 420px; object-fit: contain; margin: 12px 0; border: 1px solid var(--line); border-radius: 14px; background: #020617; } |
| .audio-player { width: 100%; margin: 14px 0; } |
| .qr-panel { display: grid; place-items: center; min-height: 280px; background: #ffffff; } |
| .qr-panel svg { width: min(280px, 100%); height: auto; } |
| .compact-stack { margin: 12px 0; } |
| .compact-stack .option-card { padding: 10px 12px; } |
| .field-card .field-steps { padding-left: 20px; color: var(--muted); line-height: 1.5; } |
| .field-card .warning-list { color: #fbbf24; } |
| .availability-on { color: #bbf7d0; border-color: rgba(52,211,153,0.35); } |
| .availability-off { color: #fecdd3; border-color: rgba(251,113,133,0.35); } |
| .security-pill.availability-off { background: rgba(251, 113, 133, 0.10); } |
| .license-install { display: grid; gap: 10px; margin: 16px 0 12px; } |
|
|
| .eula-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 1000; |
| display: grid; |
| place-items: center; |
| padding: 24px; |
| background: rgba(2, 6, 23, 0.82); |
| backdrop-filter: blur(8px); |
| } |
| .eula-modal { |
| width: min(720px, 100%); |
| max-height: min(82vh, 760px); |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| } |
| .eula-modal h2 { margin: 0; } |
| .eula-text { |
| flex: 1; |
| min-height: 200px; |
| overflow: auto; |
| padding: 14px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-sm); |
| background: rgba(2, 6, 23, 0.55); |
| color: var(--text); |
| white-space: pre-wrap; |
| line-height: 1.55; |
| font-size: 13px; |
| } |
| .eula-actions { display: flex; justify-content: flex-end; } |
|
|
| .terminal, pre { |
| color: #dbe7f3; |
| background: rgba(2, 6, 23, 0.72); |
| border: 1px solid var(--line); |
| border-radius: 16px; |
| padding: 14px; |
| white-space: pre-wrap; |
| overflow: auto; |
| line-height: 1.45; |
| } |
| .small-terminal { min-height: 60px; max-height: 220px; } |
| code { color: #eaff99; } |
|
|
| @media (max-width: 1120px) { |
| .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .chat-layout, .chat-workspace, .split-hero, .split, .settings-grid { grid-template-columns: 1fr; } |
| .side-panel { position: static; } |
| .thread-panel { min-height: auto; } |
| .thread-list { max-height: 240px; } |
| } |
|
|
| @media (max-width: 820px) { |
| .app-shell { display: block; } |
| .sidebar { position: relative; height: auto; } |
| .main { padding: 16px; } |
| .app-topbar, .hero-panel, .section-header { display: block; } |
| .top-actions, .hero-actions { margin-top: 12px; } |
| .composer-actions, .form-grid { grid-template-columns: 1fr; } |
| .chat-log { height: 420px; min-height: 320px; } |
| .metric-grid { grid-template-columns: 1fr; } |
| } |
|
|
| @media (prefers-color-scheme: light) { |
| :root { |
| --bg: #f5f7fb; |
| --bg-soft: #ffffff; |
| --panel: rgba(255, 255, 255, 0.90); |
| --panel-solid: #ffffff; |
| --panel-strong: #eef2f7; |
| --line: rgba(15, 23, 42, 0.13); |
| --line-strong: rgba(15, 23, 42, 0.22); |
| --text: #111827; |
| --muted: #64748b; |
| --muted-2: #7b8797; |
| --button: #111827; |
| --button-text: #ffffff; |
| --shadow: 0 24px 70px rgba(15, 23, 42, 0.10); |
| } |
| body { background: linear-gradient(145deg, #f7fafc, #eef4ff 60%, #f8fafc); } |
| .sidebar { background: rgba(255,255,255,0.76); } |
| input:not([type="checkbox"]):not([type="radio"]), textarea, select, .terminal, pre, .eula-text { background: rgba(255,255,255,0.86); color: var(--text); } |
| .assistant .bubble { background: #f1f5f9; } |
| .system .bubble { color: #3f4d08; } |
| .security-pill { color: #065f46; } |
| .nav { color: #1f2937; } |
| } |
|
|
