:root { color-scheme: dark; --ink: #f1f0eb; --muted: #92959e; --line: #292b32; --panel: #15171c; --accent: #d8ff64; --accent-ink: #10130a; }
* { box-sizing: border-box; }
body { margin: 0; background: #0d0f12; color: var(--ink); font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.shell { max-width: 1180px; margin: auto; padding: 34px 28px 26px; }
.topbar, .panel-head, footer, .chat-input, .topbar-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow, .label { color: var(--muted); font-size: 11px; letter-spacing: .16em; margin: 0 0 9px; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; } h1 { font-size: 30px; letter-spacing: -.04em; margin-bottom: 0; } h2 { font-size: 25px; letter-spacing: -.035em; margin-bottom: 9px; } h3 { font-size: 21px; letter-spacing: -.025em; margin-bottom: 7px; }
.muted { color: var(--muted); } .status-pill, .tag { color: var(--accent); border: 1px solid #43511f; border-radius: 99px; padding: 7px 11px; font-size: 12px; } .status-pill i { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: 7px; }
.hero { margin: 54px 0 28px; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 80% 0%, #28351b 0, #151a17 25%, var(--panel) 60%); display: flex; align-items: end; justify-content: space-between; gap: 30px; } .hero h2 { font-size: clamp(32px, 5vw, 62px); max-width: 650px; line-height: 1.02; } .hero .muted { max-width: 570px; margin-bottom: 0; }
button { border: 0; cursor: pointer; font: inherit; } .primary { background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 12px 16px; font-weight: 750; white-space: nowrap; } .small { padding: 9px 13px; }
.primary { text-decoration: none; display: inline-block; } .login-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.grid, .lower-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .lower-grid { grid-template-columns: 1fr 1fr; margin-top: 14px; } .card, .panel { border: 1px solid var(--line); background: var(--panel); border-radius: 15px; padding: 22px; } .card { min-height: 160px; } .card a { color: var(--ink); text-decoration: none; font-weight: 700; } .card a span { color: var(--accent); margin-left: 5px; }
.freshness { border-color: #43511f; } .tag.neutral { color: var(--muted); border-color: var(--line); } .empty-state, .chat-box { margin-top: 25px; border: 1px dashed #3a3d45; border-radius: 10px; padding: 22px; color: var(--muted); } .chat-box { min-height: 380px; display: flex; flex-direction: column; } .chat-thread { display: grid; gap: 10px; flex: 1; max-height: 280px; overflow-y: auto; padding-right: 4px; } .chat-message { width: fit-content; max-width: 90%; margin: 0; padding: 11px 13px; border-radius: 12px; white-space: pre-wrap; } .chat-message.assistant { background: #20231d; color: var(--ink); } .chat-message.user { margin-left: auto; background: #292d38; color: var(--ink); } .chat-input { margin-top: 18px; align-items: flex-end; } input, textarea { width: 100%; background: #0d0f12; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); outline: none; font: inherit; resize: vertical; } .notifications-panel { margin-top: 14px; } .notification-list { display: grid; gap: 10px; margin-top: 22px; color: var(--muted); } .notification { padding: 14px; border: 1px solid var(--line); border-radius: 10px; } .notification strong { color: var(--ink); } .notification p { margin: 5px 0; } .notification small { color: var(--muted); } footer { color: #676a72; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; }
@media (max-width: 760px) { .shell { padding: 24px 16px; } .hero { display: block; padding: 25px; margin-top: 35px; } .hero .primary { margin-top: 22px; } .grid, .lower-grid { grid-template-columns: 1fr; } .status-pill { display: none; } footer { display: block; } footer span { display: block; margin-bottom: 6px; } }