/* ===== Design Tokens (neutral, professional) ===== */
:root{
  --bg: #0b0f14;            /* page background (dark slate) */
  --panel: #11161d;         /* card/nav background */
  --panel-2: #0e1319;
  --text: #e6edf5;          /* primary text */
  --text-dim: #b5c0cd;      /* secondary text */
  --muted: #7a8594;         /* tertiary */
  --line: #1f2630;          /* borders */
  --accent: #4c8bf5;        /* Microsoft-y blue */
  --accent-2: #2f6fe8;
  --success: #2cc36b;
  --error: #f05454;
  --warn: #f2b035;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --shadow-1: 0 2px 10px rgba(0,0,0,.25);
  --shadow-2: 0 10px 30px rgba(0,0,0,.35);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --maxw: 1180px;
}

/* Optional light mode if you ever want to flip quickly
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f8f9fb; --text:#0c121a; --text-dim:#4b5563;
    --line:#e5e7eb; --accent:#2563eb; --accent-2:#1d4ed8;
    --shadow-1: 0 2px 8px rgba(0,0,0,.06);
    --shadow-2: 0 16px 36px rgba(0,0,0,.08);
  }
}
*/

/* ===== Resets & Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}

/* ===== Top Bar ===== */
.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.top .brand{font-weight:800; letter-spacing:.2px}
.top nav{display:flex; gap:12px; flex-wrap:wrap}
.top nav a{
  color:var(--text-dim); padding:8px 10px; border-radius:8px;
}
.top nav a:hover{background:var(--panel-2); text-decoration:none}
.balance{color:var(--text-dim); font-weight:600}

/* ===== Layout ===== */
.container{
  max-width:var(--maxw); margin:0 auto; padding:16px;
  display:grid; grid-template-columns: 1fr 300px; gap:16px;
}
@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
}

/* ===== Cards, Panels ===== */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-1); padding:14px;
}
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); }

/* ===== Buttons ===== */
.button, .composer button, button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--radius-s);
  background:var(--accent); color:#fff; border:1px solid var(--accent-2);
  cursor:pointer; font-weight:700;
}
.button:hover, .composer button:hover, button:hover, .btn:hover{
  background:var(--accent-2);
}
.button.secondary, .btn.secondary{
  background:transparent; color:var(--text); border:1px solid var(--line);
}
.button.secondary:hover{ background:var(--panel-2); }

/* ===== Forms ===== */
label{display:block; margin:8px 0 6px; color:var(--text-dim)}
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-s); padding:10px 12px; outline:none;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,139,245,.15); }
.error{ color:#ffb4b4; background:#2a1313; border:1px solid #6d2b2b; padding:10px 12px; border-radius:var(--radius-s) }
.note{ color:var(--text-dim); }

/* ===== Chat ===== */
.chat{ display:flex; flex-direction:column; gap:0; overflow:hidden; }
.chat .messages{
  height:64vh; min-height:360px; overflow:auto; padding:14px;
  background:var(--panel-2); border:1px solid var(--line); border-bottom:none;
  border-top-left-radius:var(--radius-m); border-top-right-radius:var(--radius-m);
}
@media (max-width: 980px){
  .chat .messages{ height:55vh; }
}
.bubble{
  max-width:88%; padding:10px 12px; margin:8px 0; border-radius:14px; line-height:1.45;
  box-shadow: var(--shadow-1);
}
.bubble.user{
  margin-left:auto; background:#1a2431; border:1px solid #223045;
}
.bubble.assistant{
  background:#11161d; border:1px solid var(--line);
}
.bubble.error{
  background:#2a1313; border:1px solid #6d2b2b;
}
.composer{
  display:flex; gap:10px; align-items:flex-end;
  background:var(--panel); border:1px solid var(--line);
  border-bottom-left-radius:var(--radius-m); border-bottom-right-radius:var(--radius-m);
  padding:10px;
}
.composer textarea{
  flex:1; min-height:48px; max-height:160px; resize:vertical;
}
.composer .button{white-space:nowrap}
/* Section spacing inside answer cards */
.card .section + .section { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); }
.card .guidance { line-height:1.55; }
.card .steps ol { margin:8px 0 0 18px; }
.card .proofs { display:flex; flex-wrap:wrap; gap:6px 8px; }

/* Evidence / chips / meta */
.chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#0f1b2b; border:1px solid #213048; color:#cfe2ff; margin:3px 4px 0 0; font-size:.9em;
}
blockquote{
  margin:10px 0; padding:10px 12px; border-left:3px solid #223045; background:#0f151c; border-radius:6px;
}
.disc{ color:var(--muted); font-size:.92em; margin-top:6px }
.meta{ color:var(--muted); font-size:.85em; margin-top:6px }

/* ===== Side ===== */
.side{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px; display:flex; flex-direction:column; gap:10px }
.side h3{ margin:4px 0 0 }
.side form{ display:flex; gap:8px; align-items:center; }
.side .note{ font-size:.92em }

/* ===== Auth pages (login/register) ===== */
body.auth .card{ max-width:420px; margin:10vh auto; padding:18px }
body.auth .card h2{ margin:6px 2px 10px }
body.auth .card .button, body.auth .card button{ width:100% }

/* ===== Tables (admin) ===== */
table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden }
th,td{ padding:10px 12px; border-bottom:1px solid var(--line) }
th{ text-align:left; color:var(--text-dim); font-weight:600; background:var(--panel-2) }
tr:hover td{ background:#0f151c }

/* ===== Helpers ===== */
hr{ border:none; border-top:1px solid var(--line); margin:12px 0 }
.small{ font-size:.9em; color:var(--text-dim) }
.center{ text-align:center }

/* ===== Toasts / banners (optional) ===== */
.banner{
  background:#101820; border:1px solid var(--line); border-radius:var(--radius-s); padding:10px 12px;
}
.banner.success{ border-color:#1f5137; background:#0f1f18; color:#c9f3de }
.banner.warn{ border-color:#4f3e1a; background:#1a170e; color:#ffe7b0 }
.banner.error{ border-color:#6d2b2b; background:#2a1313; color:#ffd3d3 }

/* ===== Focus/Accessibility ===== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===== Scrollbars (subtle) ===== */
*::-webkit-scrollbar{ width:12px; height:12px }
*::-webkit-scrollbar-thumb{ background:#1d2733; border:3px solid var(--panel-2); border-radius:10px }
*::-webkit-scrollbar-track{ background:transparent }

/* ===== Headings spacing ===== */
h1,h2,h3{ margin:8px 0 10px }