*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif;color:#eee;min-height:100vh}

/* ─── background layer used on auth + home ─── */
body.bg{
  background:
    linear-gradient(135deg, #0a1220 0%, #12233a 45%, #0b1a2c 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
body.bg::before{
  content:'';
  position: fixed; inset:0;
  background-image: url('/static/bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .35;
  z-index: -2;
  filter: saturate(1.05) brightness(.85);
}
body.bg::after{
  content:'';
  position: fixed; inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(10,18,32,.35) 0%, rgba(10,18,32,.7) 100%);
  z-index: -1;
}
@media(max-width:600px){
  body.bg::before{
    background-size: cover;
    background-position: 50% 30%;
    opacity: .28;
  }
}

a{color:#7dd3fc}
a:hover{color:#a5e3ff}

/* ─── home hero ─── */
.hero{max-width:720px;margin:80px auto 40px;padding:24px;text-align:center;position:relative;z-index:1}
.hero h1{font-size:56px;margin:0 0 12px 0;letter-spacing:-1px;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.hero p{color:#d5e0ec;font-size:18px;margin:0 0 30px 0;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.actions{display:flex;gap:12px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}
@media(max-width:600px){
  .hero{margin:40px auto 20px;padding:16px}
  .hero h1{font-size:42px}
  .hero p{font-size:16px}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{padding:12px 20px}
}

/* ─── buttons ─── */
.btn{
  display:inline-block;padding:10px 24px;border-radius:10px;
  background: rgba(255,255,255,.08);
  color:#eee;text-decoration:none;border:1px solid rgba(255,255,255,.14);
  cursor:pointer;font-size:15px;font-family:inherit;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .15s ease;
}
.btn:hover{background: rgba(255,255,255,.14);border-color: rgba(255,255,255,.24)}
.btn.primary{background:#22c55e;color:#0a1220;font-weight:700;border-color:transparent;box-shadow:0 4px 20px rgba(34,197,94,.35)}
.btn.primary:hover{background:#16a34a;box-shadow:0 6px 24px rgba(34,197,94,.5)}
.btn.danger{background:#ef4444;color:#fff;border-color:transparent}
.btn.danger:hover{background:#dc2626}
.btn.full{width:100%}

.how{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;margin-top:30px}
.how-item{
  background: rgba(20,30,45,.55);
  border:1px solid rgba(255,255,255,.14);
  padding:20px;border-radius:16px;
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.how-role{font-weight:700;color:#7dd3fc;margin-bottom:8px}
.how-desc{color:#d0dae5;font-size:14px}
@media(max-width:600px){.how{grid-template-columns:1fr;gap:12px}}

/* ─── glass auth card ─── */
.auth-box{
  max-width:420px;width:calc(100% - 32px);margin:80px auto;padding:32px;
  background: rgba(20,30,45,.55);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.1);
  position:relative;z-index:1;
}
@media(max-width:600px){
  .auth-box{margin:40px auto;padding:24px 20px;border-radius:16px}
}
.auth-box h2{margin-top:0;text-align:center;font-weight:700;letter-spacing:-.5px}
.auth-box label{display:block;font-size:12px;color:#a8b8c8;margin:14px 0 6px 0;font-weight:500;letter-spacing:.3px}
.auth-box input, .auth-box select{
  width:100%;padding:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#eee;border-radius:10px;font-family:inherit;font-size:14px;
  transition: all .15s ease;
}
.auth-box input:focus, .auth-box select:focus{
  outline:none;
  background: rgba(255,255,255,.09);
  border-color: rgba(125,211,252,.6);
  box-shadow: 0 0 0 3px rgba(125,211,252,.15);
}
.auth-box .err{color:#fca5a5;font-size:13px;margin-top:10px;text-align:center;min-height:16px}
.auth-box .link{display:block;text-align:center;margin-top:16px;font-size:13px;color:#a8b8c8}
.auth-box .btn.primary.full{margin-top:20px}

/* ─── shared topbar / list page ─── */
.topbar{
  background: rgba(18,28,42,.75);
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;padding:10px 14px;gap:14px;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.topbar .brand{font-weight:700;font-size:18px;white-space:nowrap}
.topbar .user{opacity:.85;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:1}
.topbar a{color:#eee;text-decoration:none;padding:8px 12px;border-radius:8px;white-space:nowrap}
.topbar a:hover{background:rgba(255,255,255,.08)}
@media(max-width:600px){
  .topbar{padding:8px 10px;gap:8px;font-size:13px}
  .topbar .brand{font-size:16px}
  .topbar .user{display:none}
  .topbar a{padding:6px 10px;font-size:13px}
}

.page{max-width:820px;margin:24px auto;padding:0 16px;position:relative;z-index:1}
.page h2{margin-top:0}
.card{
  background: rgba(20,30,45,.6);
  border:1px solid rgba(255,255,255,.14);
  padding:18px;border-radius:14px;margin-bottom:14px;line-height:1.7;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.card-head{font-weight:600;margin-bottom:6px;color:#a5e3ff}
.card button{margin-top:10px;margin-right:8px}
@media(max-width:600px){
  .card{padding:14px;border-radius:12px}
}