:root {
    --primary:#5b45d6;
    --primary-soft:#ece9ff;
    --background:#f4f5fb;
    --card:#ffffff;
    --text:#252438;
    --muted:#6b687d;
    --border:#d8d5e2;
    --danger:#b42318;
    --success:#18794e;
    --shadow:#31266b14;
}

:root[data-theme="dark"] {
    --primary:#9b8cff;
    --primary-soft:#302858;
    --background:#171622;
    --card:#242232;
    --text:#f4f2ff;
    --muted:#b7b2c8;
    --border:#454158;
    --danger:#ff928a;
    --success:#66d6a1;
    --shadow:#00000040;
}

* { box-sizing:border-box; }

html {
    min-height:100%;
    background:var(--background);
}

body {
    margin:0;
    min-height:100vh;
    background:var(--background);
    color:var(--text);
    font-family:Arial,sans-serif;
    transition:background .2s ease,color .2s ease;
}

main { width:min(980px,92%); margin:36px auto; }

.settings-header,
.profile-summary,
.settings-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 5px 22px var(--shadow);
}

.settings-header {
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.settings-header h1 { margin:0 0 5px; }
.settings-header p { margin:0; color:var(--muted); }
.back-link {
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    border-radius:10px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:28px;
    text-decoration:none;
}
.beta {
    margin-left:auto;
    padding:5px 10px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:12px;
    font-weight:bold;
}

.message { min-height:24px; margin:15px 4px; color:var(--danger); }
.message.success { color:var(--success); }

.profile-summary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:18px;
    padding:20px 24px;
}
.profile-summary span { display:block; margin-bottom:5px; color:var(--muted); font-size:14px; }
.profile-summary strong { overflow-wrap:anywhere; }

.guest-notice {
    padding:14px 18px;
    border-radius:10px;
    background:var(--primary-soft);
    color:var(--primary);
}

.settings-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.settings-card {
    display:grid;
    align-content:start;
    gap:11px;
    padding:24px;
}
.settings-card h2 { margin:0; }
.settings-card p { min-height:40px; margin:0 0 5px; color:var(--muted); }

label { font-weight:bold; }
input {
    width:100%;
    padding:13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    font-size:16px;
}
button {
    margin-top:7px;
    padding:13px 18px;
    border:0;
    border-radius:8px;
    background:var(--primary);
    color:white;
    font-weight:bold;
    cursor:pointer;
}
button:disabled { opacity:.55; cursor:wait; }

.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.theme-option input { position:absolute; opacity:0; pointer-events:none; }
.theme-option span {
    display:block;
    padding:18px 12px;
    border:2px solid var(--border);
    border-radius:10px;
    text-align:center;
    cursor:pointer;
}
.theme-option input:checked + span {
    border-color:var(--primary);
    background:var(--primary-soft);
    color:var(--primary);
}

footer { padding:26px 4px; text-align:center; }
footer a { color:var(--danger); font-weight:bold; text-decoration:none; }

@media(max-width:720px) {
    main { margin:18px auto; }
    .settings-grid,.profile-summary { grid-template-columns:1fr; }
    .settings-header { align-items:flex-start; }
    .settings-header h1 { font-size:26px; }
    .settings-card p { min-height:0; }
}