:root {
  --bg: #000;
  --panel: #080808;
  --panel-2: #0d0d0d;
  --panel-3: #121212;
  --border: #202020;
  --border-strong: #2d2d2d;
  --text: #f4f4f5;
  --muted: #8b8b91;
  --muted-2: #5f5f65;
  --white: #fff;
  --black: #000;
  --good: #8ee6a0;
  --warn: #f0c674;
  --bad: #ef8c8c;
  --radius: 12px;
  --shadow: 0 18px 65px rgba(0,0,0,.55);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: #fff; color: #000; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #282828; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0,1fr); background: #000; }
.sidebar { height: 100vh; border-right: 1px solid var(--border); padding: 14px 10px 10px; display: flex; flex-direction: column; background: #030303; }
.sidebar-top { display: grid; gap: 14px; padding: 0 2px 14px; }
.brand { display:flex; align-items:center; gap:10px; border:0; background:transparent; padding:8px 9px; border-radius:9px; text-align:left; }
.brand:hover { background:#0c0c0c; }
.brand-mark { display:grid; place-items:center; width:25px; height:25px; border:1px solid #303030; border-radius:7px; font-size:12px; font-weight:800; letter-spacing:-.04em; background:#050505; color:#fff; }
.brand-name { font-size:15px; font-weight:650; letter-spacing:-.02em; }
.new-chat { height:38px; display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:9px; border:1px solid var(--border); background:#090909; border-radius:9px; padding:0 10px; color:#e8e8e8; text-align:left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.new-chat:hover { background:#111; border-color:#343434; transform:translateY(-1px); }
kbd { font-size:10px; line-height:1; padding:4px 6px; border:1px solid #2c2c2c; border-bottom-color:#3a3a3a; border-radius:5px; color:#7f7f84; background:#0a0a0a; box-shadow: inset 0 -1px 0 #151515; white-space:nowrap; }
.nav-section { margin-top:8px; }
.nav-label { color:#55555b; font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.11em; padding:9px 10px 6px; }
.nav-item { width:100%; height:36px; display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:8px; padding:0 10px; color:#929298; background:transparent; text-align:left; transition: color .14s ease, background .14s ease, border-color .14s ease; }
.nav-item svg { width:16px; height:16px; }
.nav-item:hover { color:#ddd; background:#0b0b0b; }
.nav-item.active { color:#fff; background:#101010; border-color:#1c1c1c; }
.sidebar-spacer { margin-top:auto; }
.sidebar-footer { border-top:1px solid #151515; padding-top:9px; margin-top:10px; }
.command-trigger { width:100%; height:34px; display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:8px; border:0; background:transparent; color:#6d6d73; padding:0 8px; border-radius:7px; text-align:left; font-size:12px; }
.command-trigger:hover { background:#0c0c0c; color:#aaa; }
.command-trigger svg { width:14px; height:14px; }

.main { min-width:0; height:100vh; display:flex; flex-direction:column; background:#000; }
.topbar { height:54px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid #171717; background:rgba(0,0,0,.96); }
.topbar-title { font-size:13px; font-weight:600; color:#dedede; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.status-dot { display:flex; align-items:center; gap:7px; font-size:11px; color:#6f6f74; user-select:none; }
.status-dot span { width:6px; height:6px; border-radius:50%; background:#6d6d72; box-shadow:0 0 0 3px rgba(255,255,255,.025); }
.status-dot.ready span { background:#d7d7d7; }
.status-dot.busy span { background:#fff; animation:statusPulse 1s ease infinite; }
.status-dot.error span { background:#ef8c8c; }
@keyframes statusPulse { 50% { opacity:.35; } }
.icon-btn, .mobile-menu { display:grid; place-items:center; width:32px; height:32px; border:1px solid transparent; background:transparent; border-radius:7px; color:#6d6d72; }
.icon-btn:hover, .mobile-menu:hover { border-color:#222; background:#0b0b0b; color:#cfcfd2; }
.mobile-menu { display:none; }
.view-root { flex:1; overflow:auto; min-height:0; position:relative; }

.page { min-height:100%; padding:38px clamp(24px,4vw,56px) 52px; animation:fadeUp .22s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.page-narrow { max-width:900px; margin:0 auto; }
.page-wide { max-width:1080px; margin:0 auto; }
.hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.eyebrow { color:#616166; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:650; margin-bottom:8px; }
h1, h2, h3, p { margin-top:0; }
h1 { font-size:26px; line-height:1.15; letter-spacing:-.04em; margin-bottom:8px; font-weight:650; }
h2 { font-size:15px; letter-spacing:-.015em; }
.subcopy { margin:0; color:#77777d; font-size:13px; line-height:1.55; max-width:680px; }

.segmented { display:inline-flex; padding:3px; border:1px solid #1e1e1e; background:#080808; border-radius:9px; }
.segmented button { min-width:82px; height:30px; padding:0 12px; border:0; background:transparent; color:#66666d; border-radius:6px; font-size:12px; }
.segmented button.active { background:#171717; color:#f2f2f3; box-shadow: inset 0 0 0 1px #232323; }

.panel { border:1px solid var(--border); background:var(--panel); border-radius:var(--radius); }
.tool-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:14px; }
.tool-main { min-height:360px; }
.tool-side { display:grid; gap:14px; align-content:start; }
.panel-head { min-height:45px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid #181818; }
.panel-head h2 { margin:0; font-size:12px; font-weight:600; color:#bdbdc1; }
.panel-body { padding:14px; }

.field-label { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#77777d; font-size:11px; margin-bottom:7px; }
.field-label b { font-weight:500; color:#9e9ea3; }
.input, .textarea, .select { width:100%; border:1px solid #252525; background:#050505; color:#e8e8e8; border-radius:9px; outline:none; transition:border-color .15s ease, background .15s ease; }
.input:focus, .textarea:focus, .select:focus { border-color:#4a4a4a; background:#070707; }
.input { height:38px; padding:0 11px; }
.textarea { min-height:190px; resize:vertical; padding:12px; line-height:1.55; font-size:13px; }
.textarea.large { min-height:260px; }
.textarea::placeholder, .input::placeholder { color:#414146; }
.select { height:36px; padding:0 10px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%); background-position:calc(100% - 15px) 14px,calc(100% - 11px) 14px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }

.action-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
.action-group { display:flex; gap:7px; flex-wrap:wrap; }
.primary-btn, .secondary-btn, .ghost-btn { height:36px; padding:0 13px; border-radius:8px; border:1px solid; font-size:12px; font-weight:570; transition:transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease; }
.primary-btn { background:#f5f5f5; color:#050505; border-color:#fff; }
.primary-btn:hover { background:#fff; transform:translateY(-1px); }
.primary-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.secondary-btn { background:#0d0d0d; color:#bbb; border-color:#292929; }
.secondary-btn:hover { background:#141414; border-color:#363636; color:#eee; }
.ghost-btn { background:transparent; color:#707076; border-color:transparent; }
.ghost-btn:hover { color:#bbb; background:#0c0c0c; }
.tiny-btn { height:27px; padding:0 9px; border:1px solid #262626; background:#0b0b0b; border-radius:6px; color:#85858a; font-size:10px; }
.tiny-btn:hover { color:#d8d8da; border-color:#3a3a3a; }

.file-drop { border:1px dashed #292929; background:#050505; min-height:112px; border-radius:9px; display:grid; place-items:center; padding:14px; text-align:center; transition:border-color .15s ease, background .15s ease; }
.file-drop.drag { border-color:#626262; background:#090909; }
.file-drop input { display:none; }
.file-drop button { border:0; background:transparent; color:#c9c9cc; font-size:12px; padding:5px; }
.file-drop small { display:block; color:#57575d; margin-top:4px; line-height:1.4; }
.file-pill { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #242424; border-radius:8px; background:#0a0a0a; font-size:11px; color:#b8b8bc; }
.file-pill span { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.file-pill button { border:0; background:transparent; color:#6c6c72; padding:0; }

.source-tabs { display:flex; gap:4px; margin-bottom:10px; }
.source-tabs button { height:29px; padding:0 10px; border:1px solid transparent; background:transparent; border-radius:6px; color:#606066; font-size:11px; }
.source-tabs button.active { color:#ddd; border-color:#252525; background:#0d0d0d; }
.source-pane.hidden { display:none; }

.result-card { margin-top:14px; border:1px solid #202020; border-radius:11px; background:#060606; overflow:hidden; animation:resultIn .25s ease both; }
@keyframes resultIn { from { opacity:0; transform:translateY(6px) scale(.995); } to { opacity:1; transform:none; } }
.result-head { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 11px 0 13px; border-bottom:1px solid #171717; }
.result-state { display:flex; align-items:center; gap:8px; color:#6f6f75; font-size:10px; }
.pulse-dot { width:6px; height:6px; border-radius:50%; background:#777; }
.result-card.loading .pulse-dot { background:#fff; animation:statusPulse .8s ease infinite; }
.result-body { padding:16px 17px 18px; font-size:13px; line-height:1.62; color:#d7d7da; min-height:42px; }
.result-body.streaming::after { content:'▋'; font-size:10px; margin-left:3px; color:#777; animation:blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.markdown h1,.markdown h2,.markdown h3 { color:#f6f6f6; margin:1.2em 0 .55em; }
.markdown h1 { font-size:18px; }.markdown h2 { font-size:15px; }.markdown h3 { font-size:13px; }
.markdown p { margin:0 0 .82em; }
.markdown ul,.markdown ol { margin:.45em 0 .9em; padding-left:1.5em; }
.markdown li { margin:.26em 0; }
.markdown strong { color:#fff; font-weight:650; }
.markdown code { font-family:"SFMono-Regular",Consolas,monospace; font-size:.9em; background:#121212; border:1px solid #252525; padding:.12em .34em; border-radius:5px; color:#eaeaea; }
.markdown pre { overflow:auto; padding:12px; background:#050505; border:1px solid #232323; border-radius:8px; }
.markdown pre code { border:0; padding:0; background:transparent; }
.markdown blockquote { border-left:2px solid #3a3a3a; margin:1em 0; padding-left:12px; color:#99999e; }
.markdown hr { border:0; border-top:1px solid #242424; margin:18px 0; }

.chat-page { height:100%; max-width:950px; margin:0 auto; display:flex; flex-direction:column; padding:0 clamp(18px,3vw,38px); }
.chat-scroll { flex:1; min-height:0; overflow:auto; padding:34px 0 16px; scroll-behavior:smooth; }
.empty-chat { min-height:calc(100vh - 210px); display:grid; place-items:center; text-align:center; }
.empty-inner { max-width:560px; transform:translateY(-4vh); }
.empty-chat h1 { font-size:30px; margin-bottom:9px; }
.empty-chat p { color:#65656b; font-size:13px; }
.prompt-chips { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:20px; }
.prompt-chip { border:1px solid #232323; background:#070707; color:#7f7f85; border-radius:8px; padding:8px 10px; font-size:11px; }
.prompt-chip:hover { color:#ddd; border-color:#383838; background:#0d0d0d; }
.message { display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; padding:13px 2px; border-bottom:1px solid #0e0e0e; animation:fadeUp .18s ease; }
.message-role { font-size:10px; color:#535359; text-transform:uppercase; letter-spacing:.09em; padding-top:4px; }
.message-content { font-size:13px; line-height:1.65; color:#d7d7da; min-width:0; }
.message.user .message-content { color:#aaaab0; }
.composer-shell { flex:0 0 auto; padding:12px 0 18px; background:linear-gradient(180deg,transparent 0,#000 18%); }
.composer { border:1px solid #2a2a2a; background:#090909; border-radius:13px; padding:10px 10px 8px; box-shadow:0 18px 60px rgba(0,0,0,.35); transition:border-color .15s ease; }
.composer:focus-within { border-color:#484848; }
.composer textarea { width:100%; min-height:48px; max-height:180px; resize:none; background:transparent; border:0; outline:0; padding:4px 5px; color:#e8e8ea; line-height:1.5; font-size:13px; }
.composer textarea::placeholder { color:#48484d; }
.composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.composer-tools { display:flex; align-items:center; gap:5px; }
.round-btn { width:30px; height:30px; display:grid; place-items:center; border:1px solid #252525; background:#0d0d0d; color:#67676d; border-radius:7px; }
.round-btn:hover { color:#ddd; border-color:#383838; }
.round-btn.send { background:#f4f4f4; color:#000; border-color:#fff; }
.round-btn.send:disabled { background:#181818; color:#4b4b4f; border-color:#262626; }
.composer-file { max-width:250px; margin:0 0 8px 4px; }
.hidden-input { display:none; }

.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.stat { border:1px solid #202020; background:#080808; border-radius:9px; padding:12px; }
.stat b { display:block; font-size:18px; letter-spacing:-.03em; margin-bottom:3px; }.stat span { color:#5f5f65; font-size:10px; }
.score-ring { width:118px; height:118px; border-radius:50%; display:grid; place-items:center; margin:18px auto; background:conic-gradient(#eee var(--score,0%),#171717 0); position:relative; }
.score-ring::after { content:''; position:absolute; inset:8px; border-radius:50%; background:#080808; }
.score-ring div { position:relative; z-index:1; text-align:center; }.score-ring strong { display:block; font-size:28px; letter-spacing:-.05em; }.score-ring span { color:#66666c; font-size:10px; }
.reason-list { display:grid; gap:7px; }.reason { border:1px solid #202020; background:#070707; padding:9px 10px; border-radius:8px; color:#929298; font-size:11px; line-height:1.45; }
.disclaimer { color:#55555b; font-size:10px; line-height:1.5; padding-top:10px; }

.history-list { display:grid; gap:8px; }.history-item { border:1px solid #1e1e1e; background:#070707; border-radius:9px; padding:11px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.history-item:hover { border-color:#303030; background:#0a0a0a; }.history-meta { min-width:0; }.history-meta b { display:block; font-size:12px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.history-meta span { display:block; color:#5f5f65; font-size:10px; margin-top:4px; }.history-actions { display:flex; gap:5px; }
.empty-state { border:1px dashed #222; border-radius:10px; padding:34px; text-align:center; color:#55555b; font-size:12px; }

.settings-list { display:grid; gap:1px; border:1px solid #202020; background:#202020; border-radius:10px; overflow:hidden; }
.setting-row { background:#070707; min-height:58px; padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.setting-copy b { display:block; font-size:12px; font-weight:560; }.setting-copy span { display:block; color:#5e5e64; font-size:10px; margin-top:3px; line-height:1.35; }.setting-control { width:190px; max-width:45%; }
.toggle { width:36px; height:20px; border:1px solid #2b2b2b; background:#0c0c0c; border-radius:999px; padding:2px; position:relative; transition:background .15s ease; }
.toggle::after { content:''; display:block; width:14px; height:14px; border-radius:50%; background:#57575c; transition:transform .15s ease, background .15s ease; }.toggle.on { background:#efefef; border-color:#fff; }.toggle.on::after { transform:translateX(16px); background:#000; }

.command-backdrop { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62); display:grid; place-items:start center; padding-top:14vh; backdrop-filter:blur(3px); animation:backdropIn .12s ease; }
.command-backdrop.hidden { display:none; }
@keyframes backdropIn { from { opacity:0; } }
.command-palette { width:min(540px,calc(100vw - 28px)); border:1px solid #303030; background:#080808; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; animation:paletteIn .16s ease; }
@keyframes paletteIn { from { opacity:0; transform:translateY(-7px) scale(.99); } }
.command-search-wrap { height:48px; display:grid; grid-template-columns:18px 1fr auto; gap:9px; align-items:center; padding:0 12px; border-bottom:1px solid #1e1e1e; color:#55555b; }.command-search-wrap input { border:0; outline:0; background:transparent; color:#eee; font-size:13px; }.command-search-wrap input::placeholder { color:#4f4f55; }
.command-results { padding:6px; max-height:320px; overflow:auto; }.command-row { width:100%; height:40px; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; padding:0 8px; border:0; background:transparent; color:#9a9aa0; border-radius:7px; text-align:left; }.command-row:hover,.command-row.selected { background:#141414; color:#fff; }.command-row small { color:#505056; font-size:10px; }
.toast-wrap { position:fixed; right:18px; bottom:18px; z-index:80; display:grid; gap:7px; pointer-events:none; }.toast { min-width:220px; max-width:360px; border:1px solid #2c2c2c; background:#0b0b0b; color:#bcbcc0; border-radius:9px; padding:10px 12px; box-shadow:var(--shadow); font-size:11px; animation:toastIn .2s ease; }.toast.error { border-color:#513030; color:#e6b3b3; }@keyframes toastIn { from{opacity:0;transform:translateY(7px)} }

.skeleton-lines { display:grid; gap:8px; padding:4px 0; }.skeleton-lines i { height:9px; border-radius:5px; background:linear-gradient(90deg,#111 20%,#1a1a1a 40%,#111 60%); background-size:220% 100%; animation:shimmer 1.3s linear infinite; }.skeleton-lines i:nth-child(2){width:88%}.skeleton-lines i:nth-child(3){width:72%}@keyframes shimmer { to { background-position:-220% 0; } }

@media (max-width: 850px) {
  body { overflow:auto; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:50; left:0; top:0; width:236px; transform:translateX(-100%); transition:transform .18s ease; box-shadow:20px 0 60px rgba(0,0,0,.5); }
  .sidebar.open { transform:none; }
  .main { height:100vh; }
  .mobile-menu { display:grid; }
  .topbar { padding:0 12px; }
  .topbar-title { margin-right:auto; margin-left:6px; }
  .tool-grid { grid-template-columns:1fr; }
  .page { padding:26px 16px 42px; }
  .hero-row { align-items:flex-start; flex-direction:column; }
  .setting-row { align-items:flex-start; flex-direction:column; }
  .setting-control { width:100%; max-width:none; }
}
@media (max-width: 520px) {
  .status-dot b { display:none; }
  .message { grid-template-columns:1fr; gap:5px; }
  .message-role { padding-top:0; }
  .stat-grid { grid-template-columns:1fr; }
  .empty-chat h1 { font-size:25px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}