@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg-base);color:var(--text-body);font-family:var(--font-text);-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;border:2px solid var(--bg-base)}
::-webkit-scrollbar-track{background:transparent}
@keyframes vfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mfade{from{opacity:0}to{opacity:1}}
button{font-family:var(--font-text)}
input{font-family:var(--font-text)}
a{color:inherit}

/* ---------- Button component (replicates DS Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-text);font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;transition:all var(--dur-base) var(--ease-out);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{height:36px;padding:0 14px;font-size:13px}
.btn-md{height:48px;padding:0 20px;font-size:14px}
.btn-lg{height:58px;padding:0 26px;font-size:15px}
.btn-full{width:100%}
.btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:var(--glow-accent-sm)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-secondary{background:var(--surface-3);color:var(--text-primary);border-color:var(--line-default)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-subtle{background:var(--accent-soft);color:var(--accent);border-color:var(--line-accent)}
.btn-subtle:hover{background:var(--accent-soft-hover)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--line-default)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-primary)}

/* ---------- Avatar ---------- */
.avatar{border-radius:50%;background:var(--gradient-accent);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;flex-shrink:0}

/* ---------- hover helper for rows ---------- */
.row-hover{transition:background var(--dur-fast) var(--ease-out)}
.row-hover:hover{background:var(--surface-2)}
.card-hover{transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.card-hover:hover{border-color:var(--line-accent);transform:translateY(-2px)}
.icon{width:19px;height:19px;flex-shrink:0}

/* ---------- inputs ---------- */
.inp{width:100%;height:48px;padding:0 15px;background:var(--bg-raised);border:1px solid var(--border-input);
  border-radius:var(--radius-sm);outline:none;color:var(--text-primary);font-family:var(--font-text);font-size:14px}
.inp:focus{box-shadow:var(--focus-ring);border-color:var(--line-accent)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--bg-base);background-image:var(--gradient-glow),radial-gradient(circle,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:auto,34px 34px}
.login-card{width:420px;max-width:100%;background:var(--surface-1);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;animation:vfade .4s var(--ease-out)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;padding:13px 20px;
  border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);animation:vfade .25s var(--ease-out)}
.toast-ok{background:var(--success);color:#06231a}
.toast-err{background:var(--danger);color:#2a0708}