:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --accent-3: #10b981;
  --surface-shadow: 0 6px 18px rgba(15,23,42,0.08);
  --radius: 12px;
  --gap: 16px;
  --success: #16a34a;
  --danger: #ef4444;
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg, var(--bg), #eef2f7 100%);
  -webkit-font-smoothing:antialiased;
  color:#0f172a;
  padding:48px 20px;
  display:flex;
  justify-content:center;
}
body.auth  { align-items:center; }
body.page  { align-items:flex-start; }

/* Card wrapper */
.card{
  width:100%;
  max-width:960px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--surface-shadow);
  padding:24px;
  overflow:hidden;
}

h1{margin:0 0 12px;font-size:20px;color:#0b1220}
.subtitle{margin:0 0 18px;color:var(--muted);font-size:13px}

/* Table */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(79,70,229,0.03), rgba(6,182,212,0.01));
  padding:10px;
}
table{
  width:100%;border-collapse:separate;border-spacing:0;min-width:560px
}
thead th{
  text-align:left;font-size:13px;padding:12px 16px;position:sticky;top:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  backdrop-filter:blur(6px);z-index:2;color:var(--muted);font-weight:600;
  border-bottom:1px solid #e6edf3;
}
tbody tr{
  transition:transform .18s ease, box-shadow .18s ease;
}
tbody tr:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(11,18,32,0.06);
  border-radius:8px;
}
td{
  padding:14px 16px;font-size:15px;border-bottom:1px dashed #eef4f8;
}
tbody tr:nth-child(even){
  background:linear-gradient(90deg, rgba(79,70,229,0.02), transparent);
}

/* Cells */
.name-cell{display:flex;gap:12px;align-items:center}
.avatar{
  width:45px;height:45px;border-radius:8px;display:inline-grid;place-items:center;
  font-weight:600;color:white;
  /*background:linear-gradient(135deg,var(--accent), var(--accent-2));*/
	border: 1px solid #eee;
}
.muted, label {color:var(--muted);font-size:13px}
.credit{font-weight:600}
.balance-positive{color:var(--success);font-weight:600}
.balance-negative{color:var(--danger);font-weight:600}

/* Login block */
.login-box{
  max-width:360px;width:100%;background:#fff;border-radius:var(--radius);
  box-shadow:var(--surface-shadow);padding:32px;text-align:center;
}
.login-box input{
  width:100%;padding:12px;margin-top:10px;border:1px solid #d1d5db;
  border-radius:8px;font-size:15px;
}
.login-box button{
  margin-top:16px;width:100%;padding:12px;background:var(--accent);
  color:#fff;border-radius:8px;font-size:15px;cursor:pointer;
}

.error{color:var(--danger);margin-top:10px}
.logout{
  text-align:right;margin-bottom:12px;
}
.logout a{
  font-size:14px;color:var(--accent);font-weight:600;text-decoration:none;
}

/* Form in stats.php */
.form-box{
  background:#fff;padding:30px;border-radius:12px;
  max-width:400px;box-shadow:var(--surface-shadow);
}
input, textarea, select{
  width:100%;padding:10px;margin:8px 0 16px;border:1px solid #ddd;border-radius:8px;
}
textarea {
  resize: vertical;
}
.button{
  width:100%;padding:12px;border:none;border-radius:8px;
  font-size:16px;cursor:pointer;background:var(--accent);color:white;
}
.button-delete{
  background:var(--danger);margin-top:8px;
}

/* Mobile */
@media (max-width:640px){
  body{padding:24px 12px}
  .card{padding:16px}
  thead th, td{padding:12px}
  .avatar{width:36px;height:36px}
}