:root[data-theme="light"] {
  --bg:#f4f4f6; --surface:#ffffff; --surface2:#f0f0f2; --text:#111114;
  --text2:#5b616e; --muted:#9096a1; --accent:#6366f1; --accent2:#4f46e5;
  --border:#e4e6eb; --danger:#dc2626; --ok:#16a34a; --mine:#6366f1; --mine-text:#fff;
  --shadow:0 8px 30px rgba(0,0,0,.10);
}
:root[data-theme="dark"] {
  --bg:#0f1115; --surface:#191c22; --surface2:#20242c; --text:#e8eaed;
  --text2:#aab0bc; --muted:#7c828e; --accent:#818cf8; --accent2:#6366f1;
  --border:#2a2f38; --danger:#f87171; --ok:#4ade80; --mine:#6366f1; --mine-text:#fff;
  --shadow:0 8px 30px rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Apple SD Gothic Neo',sans-serif; }
button { font-family:inherit; cursor:pointer; }
input, button, select { font-size:15px; }
.hidden { display:none !important; }

/* ── Auth ── */
#auth-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow); width:100%; max-width:380px; padding:34px 30px; }
.auth-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.brand { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.brand span { color:var(--accent); }
.auth-sub { color:var(--text2); font-size:13.5px; margin-bottom:22px; }
.tabs { display:flex; background:var(--surface2); border-radius:11px; padding:4px; margin-bottom:18px; }
.tabs button { flex:1; border:none; background:none; color:var(--text2); padding:9px; border-radius:8px; font-weight:700; }
.tabs button.active { background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.field { margin-bottom:13px; }
.field label { display:block; font-size:12.5px; color:var(--text2); margin-bottom:5px; font-weight:600; }
.field input { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:11px;
  background:var(--surface2); color:var(--text); outline:none; }
.field input:focus { border-color:var(--accent); }
.btn { width:100%; padding:13px; border:none; border-radius:11px; background:var(--accent);
  color:#fff; font-weight:700; transition:.15s; }
.btn:hover { background:var(--accent2); }
.btn:disabled { opacity:.55; cursor:default; }
.btn-ghost { background:var(--surface2); color:var(--text); }
.btn-ghost:hover { background:var(--border); }
.btn-danger { background:var(--danger); }
.btn-danger:hover { filter:brightness(.92); }
.icon-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text);
  width:38px; height:38px; border-radius:10px; font-size:16px; display:inline-flex;
  align-items:center; justify-content:center; }
.msg-err { color:var(--danger); font-size:13px; margin:6px 0 12px; min-height:16px; }
.foot-links { margin-top:16px; text-align:center; font-size:12px; color:var(--muted); }
.foot-links a { color:var(--accent); text-decoration:none; }

/* ── Chat ── */
#chat-screen { height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); flex-shrink:0; }
.topbar .title { font-weight:800; font-size:17px; }
.topbar .title span { color:var(--accent); }
.topbar .me { color:var(--muted); font-size:12.5px; margin-left:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.topbar .spacer { margin-left:auto; }
.topbar .icon-btn { width:36px; height:36px; }
#messages { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:74%; }
.msg .who { font-size:11.5px; color:var(--muted); margin:0 0 3px 4px; }
.msg .bubble { padding:9px 13px; border-radius:14px; background:var(--surface);
  border:1px solid var(--border); font-size:14.5px; line-height:1.45; white-space:pre-wrap;
  word-break:break-word; }
.msg .time { font-size:10.5px; color:var(--muted); margin-top:3px; padding:0 4px; }
.msg.mine { align-self:flex-end; align-items:flex-end; display:flex; flex-direction:column; }
.msg.mine .bubble { background:var(--mine); color:var(--mine-text); border-color:transparent; }
.msg.mine .time { text-align:right; }
.sysline { align-self:center; color:var(--muted); font-size:12px; padding:4px 0; }
.composer { display:flex; gap:9px; padding:12px 16px; border-top:1px solid var(--border);
  background:var(--surface); flex-shrink:0; }
.composer input { flex:1; padding:12px 15px; border:1px solid var(--border); border-radius:22px;
  background:var(--surface2); color:var(--text); outline:none; }
.composer input:focus { border-color:var(--accent); }
.composer button { border:none; background:var(--accent); color:#fff; padding:0 20px;
  border-radius:22px; font-weight:700; }
.composer button:disabled { opacity:.5; }

/* ── Modal ── */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center;
  justify-content:center; padding:18px; z-index:50; }
.modal-card { background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); width:100%; max-width:440px; max-height:86vh; overflow-y:auto; padding:24px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h2 { margin:0; font-size:19px; }
.section { border-top:1px solid var(--border); padding-top:16px; margin-top:16px; }
.section:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.section h3 { margin:0 0 10px; font-size:14px; color:var(--text2); }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:9px 0; }
.seg { display:flex; background:var(--surface2); border-radius:9px; padding:3px; }
.seg button { border:none; background:none; color:var(--text2); padding:7px 14px; border-radius:7px; font-weight:600; }
.seg button.active { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.inline-form { display:flex; flex-direction:column; gap:8px; }
.inline-form input { padding:10px 12px; border:1px solid var(--border); border-radius:9px;
  background:var(--surface2); color:var(--text); outline:none; }
.small { font-size:12px; color:var(--muted); }

/* admin table */
.utable { width:100%; font-size:13px; border-collapse:collapse; }
.utable td { padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
.utable .uemail { word-break:break-all; }
.badge { font-size:10.5px; background:var(--accent); color:#fff; padding:1px 6px; border-radius:6px; }
.mini { padding:5px 9px; font-size:12px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface2); color:var(--text); }
.mini.danger { color:var(--danger); border-color:var(--danger); }

/* calculator */
.calc-disp { background:var(--surface2); border:1px solid var(--border); border-radius:12px;
  padding:16px; text-align:right; font-size:30px; font-weight:700; margin-bottom:12px;
  min-height:62px; word-break:break-all; font-variant-numeric:tabular-nums; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-grid button { padding:16px 0; border:1px solid var(--border); border-radius:12px;
  background:var(--surface2); color:var(--text); font-size:18px; font-weight:600; }
.calc-grid button.op { background:var(--accent); color:#fff; border-color:transparent; }
.calc-grid button.wide { grid-column:span 2; }