:root{
  --bg:#E8E8E8; --white:#FFFFFF; --blue:#C8E0F4; --pink:#F5E0E8;
  --shadow-light:#FFFFFF; --shadow-dark:#D0D0D0; --border:#D8D8D8;
  --text:#33363B; --text-dim:#7C7F84;
  --gold:#C8E0F4; --gold-deep:#9CC3E8; --gold-soft:#DCEBF8;
  --charcoal:#4A4E54; --charcoal-deep:#33363B;
  --success:#3F8F6B; --success-soft:#DCEEE4;
  --danger:#C0505A; --danger-soft:#F5D9DC;
  --radius:14px;
  --n-out: -5px -5px 15px var(--shadow-light), 5px 5px 15px var(--shadow-dark);
  --n-out-sm: -3px -3px 9px var(--shadow-light), 3px 3px 9px var(--shadow-dark);
  --n-in: inset -5px -5px 15px var(--shadow-light), inset 5px 5px 15px var(--shadow-dark);
  --n-in-sm: inset -3px -3px 8px var(--shadow-light), inset 3px 3px 8px var(--shadow-dark);
  --press:150ms ease;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI',Arial,sans-serif; color:var(--text); min-height:100vh;
  background:linear-gradient(160deg, #ECF3FA 0%, var(--bg) 45%, #FBF1F4 100%);
  background-attachment:fixed;
}
a{ color:var(--gold-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }

.auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-box{
  background:var(--bg); border-radius:18px; padding:32px 30px; width:100%; max-width:380px;
  box-shadow:-10px -10px 30px rgba(255,255,255,.9), 10px 10px 34px rgba(180,180,180,.55);
}
.auth-brand{ text-align:center; margin-bottom:20px; }
.auth-brand img{ width:56px; height:56px; object-fit:contain; margin-bottom:8px; }
.auth-brand-name{ font-weight:800; font-size:20px; letter-spacing:.04em; color:var(--text); }
.auth-brand-sub{ font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.auth-box form{ display:flex; flex-direction:column; gap:6px; }
.auth-box label{ font-size:12px; font-weight:600; color:var(--text-dim); margin-top:8px; }
.auth-box input, .auth-box select{
  padding:10px; border:none; border-radius:10px; font-size:14px;
  background:var(--bg); box-shadow:var(--n-in-sm); transition:box-shadow var(--press);
}
.auth-box input:focus, .auth-box select:focus{ outline:none; box-shadow:var(--n-in-sm), 0 0 0 2px var(--gold-deep) inset; }
.auth-footnote{ text-align:center; font-size:11px; color:var(--text-dim); margin-top:16px; }

.btn-gold, .btn-dark, .btn-danger{
  border:none; padding:11px; border-radius:10px; font-weight:700; cursor:pointer; margin-top:14px;
  display:inline-block; text-align:center; text-decoration:none; box-shadow:var(--n-out-sm);
  transition:box-shadow var(--press), transform var(--press);
}
.btn-gold:active, .btn-dark:active, .btn-danger:active{ box-shadow:var(--n-in-sm); transform:translateY(1px); }
.btn-gold{ background:var(--gold); color:#1D2023; }
.btn-gold:hover{ background:var(--gold-deep); color:#1D2023; text-decoration:none; }
.btn-dark{ background:var(--charcoal-deep); color:#fff; }
.btn-danger{ background:var(--danger-soft); color:var(--danger); }

.alert{ padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:10px; }
.alert-error{ background:var(--danger-soft); color:var(--danger); }
.alert-success{ background:var(--success-soft); color:var(--success); }

.topbar{
  background:var(--bg); box-shadow:0 6px 20px rgba(208,208,208,.5);
  color:var(--text); padding:14px 26px; display:flex; justify-content:space-between; align-items:center; font-size:13px;
}
.topbar-brand{ font-weight:700; display:flex; align-items:center; gap:10px; }
.topbar-brand img{ width:26px; height:26px; object-fit:contain; }
.topbar-user a{ color:var(--gold-deep); }

.page{ max-width:960px; margin:30px auto; padding:0 20px; }
.page-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }

.form-card{
  background:var(--bg); border-radius:var(--radius); padding:20px; margin-bottom:18px;
  display:flex; flex-direction:column; gap:6px; max-width:420px; box-shadow:var(--n-out);
}
.form-card label{ font-size:12px; font-weight:600; color:var(--text-dim); margin-top:8px; }
.form-card input, .form-card select{ padding:9px; border:none; border-radius:10px; background:var(--bg); box-shadow:var(--n-in-sm); }

.data-table{
  width:100%; border-collapse:collapse; background:var(--bg); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--n-out);
}
.data-table th, .data-table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:13px; }
.data-table th{ background:var(--pink); font-size:11px; text-transform:uppercase; color:var(--text-dim); }

.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700; background:var(--white); color:var(--text-dim); box-shadow:var(--n-in-sm); }
.badge-green{ background:var(--success-soft); color:var(--success); box-shadow:none; }
.badge-red{ background:var(--danger-soft); color:var(--danger); box-shadow:none; }