@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
    --bg:#0A0E16;
    --surface:#12172380;
    --surface-solid:#121723;
    --border:#232A3B;
    --text:#E9ECF4;
    --muted:#8892A6;
    --accent:#6EA8FE;
    --accent-dim:#6ea8fe26;
    --radius:14px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
    background:
        radial-gradient(1100px 500px at 15% -10%, #17213a 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 0%, #14203a 0%, transparent 55%),
        var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    min-height:100vh;
}

h1,h2,h3{ font-family:'Sora', sans-serif; font-weight:600; letter-spacing:-.01em; }

a{ color:inherit; text-decoration:none; }

/* ---------- nav ---------- */
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 40px;
    border-bottom:1px solid var(--border);
}

.nav b{ font-weight:600; color:var(--accent); }

.nav span.muted{ color:var(--muted); font-size:13px; }

/* ---------- generic button ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-solid);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .15s ease;
}

.btn:hover{ border-color:var(--accent); background:#161d2c; }
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#081020;
    font-weight:600;
}

.btn.primary:hover{ background:#87b8ff; }

/* ---------- hero ---------- */
.hero{
    max-width:760px;
    margin:64px auto 12px;
    padding:0 40px;
    text-align:center;
}

.hero .muted{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:16px;
}

.hero .muted::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-dim);
    animation:pulse 2.4s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{ box-shadow:0 0 0 4px var(--accent-dim); }
    50%{ box-shadow:0 0 0 8px transparent; }
}

.hero h1{ font-size:clamp(32px,5vw,48px); }
.hero p{ margin-top:12px; color:var(--muted); font-size:16px; }

/* ---------- roster grid ---------- */
.grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    max-width:780px;
    margin:52px auto 100px;
    padding:0 40px;
}

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
    opacity:0;
    animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.card img{
    width:100%;
    height:230px;
    object-fit:cover;
    filter:grayscale(.5) contrast(1.02);
    transition:filter .4s ease;
}

.card:hover img{ filter:grayscale(0); }

.card .body{ padding:16px 18px 20px; }
.card h3{ font-size:17px; }
.card .role{ color:var(--muted); font-size:13px; margin-top:3px; }

/* ---------- profile ---------- */
.profile{
    max-width:820px;
    margin:60px auto 100px;
    padding:0 40px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:48px;
}

.profile img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:var(--radius);
    border:1px solid var(--border);
}

.profile h1{ font-size:28px; }
.profile .role{ color:var(--muted); margin-top:4px; }

.profile dl{
    margin-top:28px;
    border-top:1px solid var(--border);
}

.profile .row{
    display:grid;
    grid-template-columns:120px 1fr;
    padding:14px 0;
    border-bottom:1px solid var(--border);
    font-size:15px;
}

.profile dt{ color:var(--muted); font-size:13px; }

.skills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; list-style:none; }

.tag{
    font-size:12px;
    padding:7px 13px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-solid);
    color:var(--muted);
}

/* ---------- login ---------- */
.login{
    max-width:380px;
    margin:90px auto 100px;
    padding:0 24px;
}

.login .panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px 28px;
}

.login h1{ font-size:22px; text-align:center; }
.login p.sub{ color:var(--muted); font-size:14px; text-align:center; margin-top:6px; }

.field{ margin-top:20px; }

.field label{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-bottom:7px;
}

.field input{
    width:100%;
    padding:12px 14px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#0D1220;
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:15px;
}

.field input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.login .btn{ width:100%; justify-content:center; margin-top:22px; }

.status{ margin-top:16px; font-size:13px; text-align:center; min-height:16px; color:var(--muted); }
.status.error{ color:#FF8A8A; }
.status.success{ color:#6EE7B7; }

.hidden{ display:none !important; }

@media (max-width:680px){
    .nav{ padding:18px 20px; }
    .grid{ grid-template-columns:1fr; max-width:360px; }
    .profile{ grid-template-columns:1fr; max-width:360px; }
    .profile img{ max-width:220px; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}

/* logout button text */
#logoutBtn{ color:#fff; }