:root{
  --vt-bg:#0b0e13; --vt-surface:#161b23; --vt-surface-2:#11151c; --vt-surface-3:#1a212c;
  --vt-ink:#e8ecf2; --vt-ink-2:#c6ccd6; --vt-ink-3:#9aa2af;
  --vt-line:rgba(255,255,255,.08);
  --vt-accent:#1793d1; --vt-accent-2:#3aabe4; --vt-accent-soft:rgba(23,147,209,.15);
  --vt-sans:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --vt-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
/* Optional privacy-friendly font (Bunny Fonts, GDPR-safe). Remove if you want system fonts only. */
@import url('https://fonts.bunny.net/css?family=ibm-plex-sans:400,500,600|ibm-plex-mono:400,500');

html,body{ background:var(--vt-bg); color:var(--vt-ink-2);
  font-family:var(--vt-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; }

/* Card container */
.container.wrap{
  background:var(--vt-surface); border:1px solid var(--vt-line);
  border-radius:14px; padding:2.2rem 2.4rem; margin-top:3rem;
  box-shadow:0 12px 40px rgba(0,0,0,.45); }

h1,h2,h3,h4{ color:var(--vt-ink); font-weight:600; letter-spacing:-.01em; }

a{ color:var(--vt-accent-2); text-decoration:none; }
a:hover{ color:var(--vt-ink); }

label{ color:var(--vt-ink-2); font-weight:500; }
.small{ color:var(--vt-ink-3); }

/* Inputs */
input[type="text"],input[type="email"],input[type="password"],select,textarea{
  background:var(--vt-surface-2); color:var(--vt-ink);
  border:1px solid var(--vt-line); border-radius:8px; }
input:focus,select:focus,textarea:focus{
  border-color:var(--vt-accent); box-shadow:0 0 0 3px var(--vt-accent-soft); outline:none; }
input::placeholder{ color:var(--vt-ink-3); }
input[type="checkbox"],input[type="radio"]{ accent-color:var(--vt-accent); }

/* Buttons (Milligram) */
.button{
  background:var(--vt-accent); border-color:var(--vt-accent);
  color:#0b0e13; font-family:var(--vt-mono); font-weight:500;
  border-radius:8px; letter-spacing:.02em; }
.button:hover{ background:var(--vt-accent-2); border-color:var(--vt-accent-2); color:#0b0e13; }
.button.button-outline{ background:transparent; color:var(--vt-accent-2);
  border-color:var(--vt-accent); }
.button.button-outline:hover{ background:var(--vt-accent-soft); color:var(--vt-ink); }

/* Logo / header */
.header .logo img{ max-height:44px; }

/* List rows */
.lists li{ background:var(--vt-surface-2); border:1px solid var(--vt-line);
  border-radius:10px; padding:.8rem 1rem; margin-bottom:.6rem; list-style:none; }
.lists .description{ color:var(--vt-ink-3); }

/* Messages */
.error{ background:rgba(240,90,90,.12); border:1px solid rgba(240,90,90,.4);
  color:#f2b8b8; border-radius:8px; padding:.7rem 1rem; }

/* Pagination */
.pg-page{ color:var(--vt-ink-2); }
.pg-page.pg-selected{ color:var(--vt-accent-2); font-weight:600; }

/* Footer */
footer.container{ color:var(--vt-ink-3); }
footer a{ color:var(--vt-ink-3); }
footer a:hover{ color:var(--vt-accent-2); }