:root{
--bg:#eef2ff;
--surface:#ffffff;
--surface-alt:#f8faff;
--text:#1c1f2a;
--muted:#6a7084;
--primary:#3358ff;
--primary-dark:#2446dd;
--success:#23a66f;
--danger:#cb4365;
--border:#dbe3ff;
}

:root[data-theme="dark"]{
--bg:#111827;
--surface:#172033;
--surface-alt:#202a40;
--text:#edf3ff;
--muted:#a9b4cc;
--primary:#7c9cff;
--primary-dark:#5e7cff;
--success:#34c98a;
--danger:#f06b8c;
--border:#33415f;
}

*{box-sizing:border-box;}

body{
margin:0;
padding:24px 16px 44px;
font-family:"Segoe UI",Tahoma,sans-serif;
background:radial-gradient(circle at 0% 0%,#ffffff 0%,var(--bg) 45%,#e9edff 100%);
color:var(--text);
min-width:320px;
}

:root[data-theme="dark"] body{
background:radial-gradient(circle at 0% 0%,#24304b 0%,var(--bg) 48%,#0b1020 100%);
}

.container{
max-width:1080px;
margin:0 auto;
}

.top-nav{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:18px;
}

.nav-links{
display:flex;
flex-wrap:wrap;
gap:8px;
}

[data-creator-only]{
display:none;
}

.top-nav a,
.button-link{
text-decoration:none;
padding:8px 12px;
border-radius:8px;
background:#1f2a52;
color:white;
font-size:13px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
}

.top-nav a[data-creator-only]{
display:none;
}

.identity-row{
display:flex;
align-items:center;
gap:8px;
}

[data-identity]{
display:none;
font-size:13px;
font-weight:700;
color:var(--muted);
}

button{
border:none;
border-radius:8px;
cursor:pointer;
font-weight:700;
font-size:14px;
}

[data-login-btn],
.primary-btn{
background:var(--primary);
color:white;
padding:10px 14px;
}

[data-logout-btn]{
display:none;
background:var(--danger);
color:white;
padding:8px 12px;
}

.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:14px;
box-shadow:0 10px 30px rgba(39,56,130,0.08);
padding:16px;
}

h1,
h2,
h3,
p{
overflow-wrap:anywhere;
}

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

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

input,
textarea,
select{
width:100%;
padding:10px;
border:1px solid var(--border);
border-radius:8px;
background:var(--surface);
color:var(--text);
font:inherit;
}

textarea{
min-height:150px;
resize:vertical;
}

label{
display:block;
font-size:12px;
text-transform:uppercase;
letter-spacing:.07em;
color:var(--muted);
font-weight:700;
margin-bottom:6px;
}

.field{
background:var(--surface-alt);
border:1px solid var(--border);
border-radius:12px;
padding:12px;
}

.button-row{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}

.locked-card{
max-width:620px;
margin:40px auto;
}

@media (max-width:720px){
body{
padding:14px 10px 32px;
background:linear-gradient(180deg,var(--surface-alt) 0%,var(--bg) 100%);
}

:root[data-theme="dark"] body{
background:linear-gradient(180deg,#1b253b 0%,var(--bg) 100%);
}

.container{
width:100%;
}

.top-nav{
align-items:stretch;
flex-direction:column;
gap:10px;
margin-bottom:12px;
}

.nav-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}

.top-nav a,
.button-link{
width:100%;
padding:9px 10px;
font-size:12px;
line-height:1.2;
text-align:center;
}

.identity-row{
width:100%;
justify-content:space-between;
gap:8px;
background:var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:8px;
}

[data-identity]{
min-width:0;
line-height:1.25;
overflow-wrap:anywhere;
}

[data-login-btn],
[data-logout-btn]{
min-height:38px;
white-space:nowrap;
}

.card{
border-radius:12px;
padding:14px;
box-shadow:0 8px 22px rgba(39,56,130,0.07);
}

.grid{
grid-template-columns:1fr;
gap:10px;
}

h1{
font-size:30px;
line-height:1.08;
margin-top:0;
}

h2{
font-size:20px;
line-height:1.2;
}
}

@media (max-width:420px){
body{
padding-inline:8px;
}

.nav-links{
grid-template-columns:1fr;
}

.identity-row{
align-items:stretch;
flex-direction:column;
}

[data-login-btn],
[data-logout-btn],
.primary-btn{
width:100%;
}
}