/* ====== Theme tokens ====== */
:root[data-theme="light"]{
  --bg:#f8fafc; --panel:#ffffff; --ink:#0f172a; --muted:#475569; --acc:#2563eb;
  --border:#e2e8f0; --field-bg:#f1f5f9; --chip-bg:#eef2f7; --elev: color-mix(in srgb, var(--bg) 90%, transparent);
  --danger-bg:#fee2e2; --danger-border:#fecaca; --danger-ink:#7f1d1d;
}
:root[data-theme="dark"]{
  --bg:#0f172a; --panel:#111827; --ink:#e5e7eb; --muted:#9ca3af; --acc:#38bdf8;
  --border:#1f2937; --field-bg:#0b1220; --chip-bg:#0b1220; --elev: color-mix(in srgb, var(--bg) 90%, transparent);
  --danger-bg:#3f1d1d; --danger-border:#7f1d1d; --danger-ink:#fca5a5;
}
:root { color-scheme: light dark; }

/* ====== Layout & elements ====== */
*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--ink); }
a{ color:var(--acc); text-decoration:none; }
header{ padding:16px 20px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--elev); backdrop-filter: blur(6px);}
.wrap{ max-width:980px; margin:0 auto; padding:20px;}

/* Buttons */
.btn{
  --btn-bg: var(--panel);
  --btn-ink: var(--ink);
  --btn-border: var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 14px; border-radius:12px; border:1px solid var(--btn-border);
  background:var(--btn-bg); color:var(--btn-ink);
  font: 600 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  cursor:pointer; text-decoration:none;
}
.btn:hover{ filter:brightness(0.98); }
.btn.primary{ --btn-bg: var(--acc); --btn-ink:#fff; --btn-border: var(--acc); }
.btn.ghost{ --btn-bg: transparent; --btn-border: var(--border); }
.btn.danger{ --btn-bg: var(--danger-bg); --btn-ink: var(--danger-ink); --btn-border: var(--danger-border); }
.btn.sm{ height:30px; padding:0 10px; font-size:13px; }
.btn.lg{ height:42px; padding:0 18px; font-size:15px; }
.btn.icon{ width:36px; padding:0; }

.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.grid{ display:grid; gap:16px; }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; }
.muted{ color:var(--muted); font-size:14px; }

input[type="text"], input[type="password"]{
  height:36px; width:100%; padding:0 12px; border-radius:12px;
  background:var(--field-bg); border:1px solid var(--border); color:var(--ink);
  font-size:14px; font-weight:500;
}

textarea{
  width:100%; min-height:50vh; padding:12px; border-radius:12px;
  background:var(--field-bg); border:1px solid var(--border); color:var(--ink);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:14px; line-height:1.5;
}

.split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.preview{ background:var(--field-bg); border:1px solid var(--border); border-radius:12px; padding:16px; overflow:auto; }

@media (max-width: 900px){ .split{ grid-template-columns:1fr; } }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.right{ margin-left:auto; }
.chip{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--chip-bg); color:var(--muted); }
.status{ font-size:12px; color:var(--muted); }
.tag { padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:var(--chip-bg); }
hr{ border:0; border-top:1px solid var(--border); margin:12px 0; }
.title-input { font-size:20px; font-weight:600; }
.note-title{ font-weight:600; }
pre, code{ white-space:pre-wrap; word-break:break-word; }
form { margin: 0; }