/* global.css */
:root{
  --bg: #f6f7f8;
  --panel: #ffffff;
  --muted: #6b7280;
  --accent: #3b82f6;
  --text: #111827;
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:var(--bg);color:var(--text);display:flex}
.loading, .error{padding:40px;text-align:center}
.content{flex:1;padding:20px;overflow:auto}
.page-root{background:var(--panel);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;cursor:pointer;border:none}
.row{display:flex;gap:12px;align-items:center}
.form-row{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.switch{display:inline-flex;align-items:center;gap:8px}
.slider{width:100%}
.small{font-size:0.9rem;color:var(--muted)}
/* Dark mode variables */
body.dark{
  --bg: #0b1020;
  --panel:#0f1724;
  --muted:#93c5fd;
  --accent:#60a5fa;
  --text:#e6eef8;
}