* { box-sizing: border-box; }
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --accent: #245b4a;
  --surface: #ffffff;
  --background: #f4f6f4;
  --text: #1f2a25;
  --font-scale: 1;
  color: var(--text);
  background: var(--background);
  font-size: calc(16px * var(--font-scale));
}
body { margin: 0; background: var(--background); color: var(--text); }
.topbar {
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding: 1.2rem 2rem; background:#183b32; color:white;
}
.topbar h1 { margin:0; font-size:1.55rem; }
.topbar p { margin:.25rem 0 0; opacity:.8; }
main { max-width: 1320px; margin: 0 auto; padding: 1.5rem; }
.panel {
  background:var(--surface); border:1px solid #dbe2de; border-radius:14px;
  padding:1rem 1.15rem; box-shadow:0 2px 8px rgba(20,45,36,.05);
}
.hero textarea {
  width:100%; resize:vertical; border:1px solid #bccac3; border-radius:10px;
  padding:.8rem; font:inherit;
}
.actions { display:flex; gap:.65rem; margin:.8rem 0; }
button {
  border:0; border-radius:9px; padding:.65rem .95rem; cursor:pointer;
  background:var(--accent); color:white; font-weight:650;
}
button.secondary { background:#e9efec; color:#244238; }
button.small { font-size:.85rem; padding:.45rem .7rem; }
.pill {
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  padding:.45rem .7rem; border-radius:999px; font-size:.9rem;
}
.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.75rem; margin:1rem 0;
}
.stat { background:var(--surface); border:1px solid #dbe2de; border-radius:12px; padding:.8rem; }
.stat strong { display:block; font-size:1.55rem; }
.stat span { color:#64736c; font-size:.85rem; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.item { border-top:1px solid #edf0ee; padding:.8rem 0; }
.item:first-child { border-top:0; }
.item h3 { font-size:1rem; margin:0 0 .25rem; }
.meta { color:#6a7871; font-size:.82rem; }
.badge { display:inline-block; padding:.2rem .45rem; border-radius:999px; font-size:.75rem; background:#eef3f0; margin-right:.25rem; }
.badge.warn { background:#fff2d5; color:#70520d; }
.badge.hot { background:#ffe4df; color:#803226; }
.result {
  white-space:pre-wrap; max-height:320px; overflow:auto; background:#12231e;
  color:#d9efe6; padding:.8rem; border-radius:10px; font-size:.85rem;
}
select, input {
  width:100%; margin:.3rem 0; padding:.5rem; border:1px solid #c6d1cc;
  border-radius:8px; background:white;
}
.inline { display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:end; }
.empty { color:#738078; font-style:italic; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:.55rem; border-bottom:1px solid #edf0ee; font-size:.88rem; vertical-align:top; }
@media (max-width: 850px) { .grid { grid-template-columns:1fr; } .topbar { padding:1rem; } main { padding:1rem; } }

.hidden { display: none !important; }
.top-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.login-overlay {
  position: fixed; inset: 0; z-index: 1000; display:flex; align-items:center; justify-content:center;
  background: rgba(15, 23, 42, .72); backdrop-filter: blur(6px); padding: 1rem;
}
.login-card { width:min(420px, 100%); background:white; border-radius:18px; padding:2rem; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.login-card label { display:block; margin:.8rem 0; font-weight:600; }
.login-card input { display:block; width:100%; box-sizing:border-box; margin-top:.35rem; padding:.75rem; border:1px solid #cbd5e1; border-radius:9px; }
.error-text { color:#b91c1c; min-height:1.4rem; margin-top:.75rem; }

.pill.warn { border-color: #b68b2e; }
.version-tag { font-size:.72rem; opacity:.72; font-weight:600; }
.nav-button { background:transparent; border:1px solid rgba(255,255,255,.25); }
.nav-button.active { background:rgba(255,255,255,.18); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.settings-grid .panel label, #settingsPage .panel > label { display:block; font-size:.88rem; font-weight:650; margin:.55rem 0; }
.check { display:flex !important; align-items:center; gap:.5rem; font-weight:500 !important; }
.check input { width:auto; margin:0; }
.settings-head { margin-bottom:1rem; }
.settings-save { margin-top:1rem; display:flex; justify-content:flex-end; }
.provider-row { border-top:1px solid #edf0ee; padding:1rem 0; }
.provider-row:first-child { border-top:0; }
.provider-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.provider-flags { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:.55rem; }
@media (max-width: 850px) { .settings-grid, .provider-grid { grid-template-columns:1fr; } }
.chat-shell { display:grid; grid-template-columns:280px minmax(0,1fr); gap:1rem; min-height:70vh; }
.chat-sidebar { padding:.8rem; }
.chat-sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.chat-sidebar-head h2 { margin:.2rem 0; }
.conversation-list { margin-top:.7rem; display:flex; flex-direction:column; gap:.35rem; }
.conversation-button { width:100%; text-align:left; background:#eef3f0; color:#244238; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-button.active { background:var(--accent); color:white; }
.chat-main { display:flex; flex-direction:column; min-height:70vh; }
.chat-head { border-bottom:1px solid #edf0ee; padding-bottom:.7rem; }
.chat-head h2 { margin:.15rem 0; }
.chat-messages { flex:1; overflow:auto; padding:1rem 0; display:flex; flex-direction:column; gap:.75rem; }
.chat-message { max-width:82%; padding:.7rem .85rem; border-radius:12px; white-space:pre-wrap; line-height:1.45; }
.chat-message.user { align-self:flex-end; background:var(--accent); color:white; }
.chat-message.assistant { align-self:flex-start; background:#eef3f0; color:#1f2a25; }
.chat-compose { display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:end; border-top:1px solid #edf0ee; padding-top:.8rem; }
.chat-compose textarea { width:100%; resize:vertical; border:1px solid #bccac3; border-radius:10px; padding:.75rem; font:inherit; }
@media (max-width: 850px) { .chat-shell { grid-template-columns:1fr; } .chat-sidebar { max-height:220px; overflow:auto; } .chat-message { max-width:94%; } }

.color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.color-grid input[type="color"] { min-height:2.4rem; padding:.2rem; }
.compact-ui .panel { padding:.72rem .85rem; }
.compact-ui main { padding:1rem; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
:root[data-appearance="dark"] { color-scheme: dark; }
:root[data-appearance="dark"] select, :root[data-appearance="dark"] input, :root[data-appearance="dark"] textarea { background:var(--surface); color:var(--text); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; } }
@media (max-width: 850px) { .color-grid { grid-template-columns:1fr; } }
.component-card { border:1px solid #d5ddd8; border-radius:.75rem; padding:.8rem; margin:.7rem 0; }
.component-card h3 { margin:.1rem 0 .5rem 0; }
.component-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .8rem; }
@media (max-width:850px){ .component-grid{grid-template-columns:1fr;} }