:root {
    --bg:#050505;
    --panel:#111111;
    --panel-soft:#18121f;
    --purple:#6C00FF;
    --purple-mid:#B57FFF;
    --purple-dark:#34235A;
    --white:#FFFFFF;
    --text:#F4F0FF;
    --muted:#9f95b8;
    --border:rgba(181,127,255,0.22);
}
* { box-sizing:border-box; }
body {
    font-family:Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(108,0,255,0.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(181,127,255,0.14), transparent 30%),
        var(--bg);
    color:var(--text);
    margin:0;
    min-height:100vh;
    padding:42px;
}
.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
}
.brand-wrap {
    display:flex;
    align-items:center;
    gap:18px;
}
.logo {
    height:54px;
    width:auto;
    display:block;
}
.brand-copy {
    min-width:0;
    max-width:420px;
}
h1 {
    margin:0;
    font-size:18px;
    line-height:1.15;
    letter-spacing:0.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.subtitle-main {
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    line-height:1.25;
}
.nav-actions {
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:flex-end;
}
.nav-btn {
    padding:11px 22px;
    min-width:145px;
    text-align:center;
    margin:0;
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
    font-size:14px;
    line-height:18px;
    font-family:Arial, sans-serif;
}
.nav-btn:hover {
    border-color:var(--purple-mid);
    background:rgba(108,0,255,0.16);
}
@media (max-width: 760px) {
    body {
        padding:18px;
    }
    .header {
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        margin-bottom:22px;
    }
    .brand-wrap {
        width:100%;
        display:grid;
        grid-template-columns:170px 1fr;
        align-items:center;
        gap:14px;
    }
    .brand-wrap .logo {
        width:170px;
        height:auto;
        max-width:100%;
    }
    .brand-wrap h1 {
        margin:0;
        font-size:12px;
        line-height:1.15;
        font-weight:600;
        color:var(--text);
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:100%;
    }
    .subtitle-main {
        margin-top:2px;
        font-size:11px;
        line-height:1.2;
        color:var(--muted);
    }
    .nav-actions {
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
    .nav-actions form {
        width:100%;
    }
    .nav-btn {
        width:100%;
        min-width:0;
        display:block;
        padding:13px 16px;
    }
}

/* AUTH PAGES */
.login-box {
    width:390px;
    max-width:100%;
    background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
    padding:36px;
    border-radius:18px;
    border:1px solid var(--border);
    box-shadow:0 24px 90px rgba(0,0,0,0.45);
}

.subtitle {
    color:var(--muted);
    margin:8px 0 28px 0;
    font-size:14px;
    text-align:center;
}

.auth-title {
    margin:0;
    font-size:14px;
    font-weight:400;
    line-height:1.2;
    text-align:center;
    color:var(--muted);
}

.auth-title-large {
    margin:0 0 8px 0;
    font-size:20px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    color:var(--text);
}

.auth-subtitle {
    color:var(--muted);
    margin:10px 0 28px 0;
    font-size:14px;
    text-align:center;
}

.message {
    color:var(--purple-mid);
    margin-bottom:14px;
}

.error {
    color:#ff7f9d;
    margin-bottom:14px;
}

.auth-link {
    color:var(--purple-mid);
    text-decoration:none;
    font-size:14px;
}

.brand {
    margin-top:22px;
    color:#6f6682;
    font-size:12px;
    text-align:center;
}

input {
    width:100%;
    padding:13px;
    margin-bottom:14px;
    background:#080808;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:10px;
    font-size:15px;
}

input:focus {
    outline:none;
    border-color:var(--purple-mid);
}

button {
    width:100%;
    padding:13px;
    margin-top:6px;
    background:linear-gradient(90deg, var(--purple), var(--purple-mid));
    color:var(--white);
    border:0;
    border-radius:10px;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

button:hover {
    filter:brightness(1.12);
}

@media (max-width: 760px) {
    .login-box {
        width:100%;
        padding:28px 22px;
        margin-top:40px;
    }

    input,
    button {
        min-height:46px;
    }
}

/* SHARED AUTH LAYOUT */
body.auth-page {
    margin:0;
    height:100vh;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at top left, rgba(108,0,255,0.34), transparent 34%),
        radial-gradient(circle at bottom right, rgba(181,127,255,0.18), transparent 34%),
        var(--bg);
}

body.auth-page .logo {
    width:250px;
    height:auto;
    max-width:100%;
    display:block;
    margin:0 auto 28px auto;
}

@media (max-width: 760px) {
    body.auth-page {
        align-items:flex-start;
        padding:18px;
        height:auto;
        min-height:100vh;
    }

    body.auth-page .logo {
        width:220px;
        margin-bottom:24px;
    }
}