:root{
    --bg:#08111c;
    --panel:rgba(13,24,40,.88);
    --panel2:rgba(21,34,56,.92);
    --line:rgba(255,255,255,.09);
    --text:#e8eef8;
    --muted:#aebcd0;
    --accent:#55b8ff;
    --accent2:#1e88e5;
    --danger:#a93b45;
    --success:#238654;
    --shadow:0 18px 44px rgba(0,0,0,.35);
    --radius:18px;
    --radius-sm:12px;
}

*{box-sizing:border-box;}

html,body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
        linear-gradient(rgba(6,10,18,.70), rgba(6,10,18,.88)),
        url("img/background.jpg") center top / cover no-repeat fixed;
}

a{
    color:var(--accent);
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.page-shell{
    width:min(calc(100% - 24px), 1200px);
    margin:0 auto;
    padding:20px 0 40px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
}

.brand img{
    width:180px;
    max-width:100%;
    height:auto;
}

.topnav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.topnav a{
    padding:10px 14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    border-radius:999px;
    color:var(--text);
}

.auth-wrap{
    min-height:70vh;
    display:grid;
    place-items:center;
}

.auth-card,
.hero-card,
.panel,
.char-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(8px);
}

.auth-card{
    width:min(100%, 520px);
    padding:28px;
}

.auth-card h1,
.hero-card h1,
.panel h2,
.char-card h3{
    margin-top:0;
}

.auth-form{
    display:grid;
    gap:16px;
    margin-top:18px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.field label{
    font-weight:700;
}

.field input{
    min-height:48px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);
    color:var(--text);
}

.field input:focus{
    outline:none;
    border-color:rgba(85,184,255,.75);
    box-shadow:0 0 0 4px rgba(85,184,255,.12);
}

.auth-links{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
}

.hero-card{
    padding:24px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:18px;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(120px,1fr));
    gap:12px;
    min-width:min(100%, 460px);
}

.stat{
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
}

.stat-label{
    display:block;
    color:var(--muted);
    font-size:.82rem;
    margin-bottom:4px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
    margin-bottom:18px;
}

.dashboard-grid .panel:nth-child(1){
    grid-column:span 4;
}

.dashboard-grid .panel:nth-child(2){
    grid-column:span 8;
}

.panel{
    padding:22px;
}

.action-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.character-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:18px;
}

.char-card{
    padding:20px;
}

.char-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:16px;
}

.status{
    padding:8px 12px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
    border:1px solid var(--line);
}

.status.online{
    background:rgba(35,134,84,.20);
    color:#d9ffe8;
}

.status.offline{
    background:rgba(255,255,255,.08);
    color:#e6edf7;
}

.char-meta{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px 14px;
    margin-bottom:18px;
    color:var(--muted);
}

.char-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.inline-form{
    margin:0;
}

.btn{
    appearance:none;
    border:0;
    border-radius:999px;
    padding:12px 16px;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.btn.primary{
    background:linear-gradient(180deg, var(--accent), var(--accent2));
    color:#fff;
}

.btn.secondary{
    background:rgba(255,255,255,.08);
    border:1px solid var(--line);
    color:var(--text);
}

.btn.danger{
    background:var(--danger);
    color:#fff;
}

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.notice{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:14px;
}

.notice.error{
    background:rgba(169,59,69,.20);
    border:1px solid rgba(169,59,69,.45);
    color:#ffdfe3;
}

.notice.success{
    background:rgba(35,134,84,.20);
    border:1px solid rgba(35,134,84,.45);
    color:#ddffeb;
}

.muted{
    color:var(--muted);
}

@media (max-width: 900px){
    .hero-card{
        flex-direction:column;
    }

    .hero-stats{
        grid-template-columns:1fr;
        min-width:unset;
        width:100%;
    }

    .dashboard-grid .panel:nth-child(1),
    .dashboard-grid .panel:nth-child(2){
        grid-column:span 12;
    }
}

@media (max-width: 640px){
    .page-shell{
        width:min(calc(100% - 14px), 1200px);
    }

    .auth-card,
    .hero-card,
    .panel,
    .char-card{
        padding:18px;
    }

    .char-meta{
        grid-template-columns:1fr;
    }

    .char-actions{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .auth-links{
        flex-direction:column;
    }
}