@import url('/theme.css');

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{background:var(--bg)}
body{
 margin:0;min-height:100vh;font:var(--text-md)/1.55 var(--font);color:var(--text);
 background:
  radial-gradient(900px 480px at 50% -120px,var(--bg-glow),transparent 70%),
  var(--bg);
 -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-text);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
p{color:var(--text-muted);margin:0 0 var(--s3)}
h1{font-size:var(--text-xl);line-height:1.25;letter-spacing:-.01em;margin:0 0 var(--s2);font-weight:650}
h2{font-size:var(--text-lg);letter-spacing:-.005em;margin:0 0 var(--s3);font-weight:600}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ------------------------------------------------------------------ controls */
button,input,select{font:inherit;color:inherit}
input,select{
 width:100%;height:var(--control-h);padding:0 var(--s3);
 background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
 caret-color:var(--accent);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s;
}
input::placeholder{color:var(--text-faint)}
input:hover,select:hover{border-color:var(--border-hover)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface-3)}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--accent);vertical-align:-3px;margin:0 var(--s2) 0 0}

button{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
 min-height:var(--control-h);padding:0 var(--s5);border-radius:var(--radius-sm);
 border:1px solid transparent;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;
 box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -6px rgba(139,92,246,.55);
 transition:background .15s var(--ease),transform .08s var(--ease),box-shadow .15s;
}
button:hover{background:var(--accent-hover)}
button:active{background:var(--accent-press);transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button.secondary{background:var(--surface-3);border-color:var(--border-strong);color:var(--text);box-shadow:none;font-weight:500}
button.secondary:hover{background:var(--surface-hover)}

label{display:block;margin-top:var(--s4);font-size:var(--text-sm);font-weight:500;color:var(--text)}
label input,label select{margin-top:6px}
label:has(input[type=checkbox]){display:flex;align-items:center;font-weight:400;color:var(--text-muted)}

/* «Показать пароль» — тихая текстовая кнопка под полем */
.password-toggle{
 min-height:0;margin-top:6px;padding:2px 0;background:none!important;border:0;box-shadow:none;
 color:var(--text-faint);font-size:var(--text-xs);font-weight:500;
}
.password-toggle:hover{color:var(--accent-text)}

/* ------------------------------------------------------------------ brand */
.rs-brand{font-family:var(--font-brand);font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;color:var(--text);white-space:nowrap;text-decoration:none!important}
.rs-brand span{background:linear-gradient(100deg,#c4b5fd,#8b5cf6 70%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------------------------------------------ auth pages (login, activation, recover, account) */
.account-main{max-width:448px;margin:0 auto;padding:10vh var(--s5) var(--s10);display:flex;flex-direction:column;align-items:center}
.account-panel{
 width:100%;margin-top:var(--s6);padding:var(--s8);
 background:linear-gradient(180deg,var(--surface-2),var(--surface));
 border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);
}
.account-panel>p:last-child{margin-bottom:0}
#intro{margin-bottom:var(--s2)}
#submit{width:100%;margin-top:var(--s6)}
.account-panel>button{margin:var(--s4) var(--s2) 0 0}

/* Errors become a visible callout instead of plain red text */
#error,.ss-error{color:var(--danger)}
#error:not(:empty),.ss-error:not(:empty){
 margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--radius-sm);
 background:var(--danger-soft);border:1px solid rgba(248,113,113,.28);font-size:var(--text-sm);color:#fecaca;
}
#error:empty,.ss-error:empty,.account-message:empty{display:none}
.account-message{color:var(--success)}

.note{font-size:var(--text-sm);color:var(--text-faint);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border)}
#note{margin-bottom:0}
#reset-info{padding:var(--s3) var(--s4);border-radius:var(--radius-sm);background:var(--surface-3);font-size:var(--text-sm)}

/* ------------------------------------------------------------------ two-factor */
.mfa-qr{
 display:block;margin:var(--s5) auto var(--s3);padding:10px;width:200px!important;height:200px!important;
 background:#fff;border-radius:var(--radius-md);image-rendering:pixelated;
 box-shadow:0 0 0 6px var(--accent-soft),0 16px 40px -12px rgba(139,92,246,.45);
}
.mfa-secret{
 display:inline-block;margin:var(--s1) 0 var(--s3);padding:var(--s2) var(--s3);border-radius:var(--radius-sm);
 background:var(--surface-3);border:1px dashed var(--border-strong);
 font:600 var(--text-md)/1.4 var(--font-mono);letter-spacing:.08em;color:var(--accent-text);user-select:all;word-break:break-all;
}
.mfa-recovery{
 list-style:none;counter-reset:code;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);
 margin:var(--s4) 0 0;padding:0;
}
.mfa-recovery li{
 counter-increment:code;padding:var(--s2) var(--s3);border-radius:var(--radius-sm);background:var(--surface-3);border:1px solid var(--border);
 font:600 var(--text-md)/1.4 var(--font-mono);letter-spacing:.06em;color:var(--text);
}
.mfa-recovery li::before{content:counter(code);color:var(--text-faint);font-weight:400;margin-right:var(--s2);font-size:var(--text-xs)}

/* ------------------------------------------------------------------ app shell (admin) */
.rs-admin{margin-left:64px}
.account-rail{
 position:fixed;inset:0 auto 0 0;width:64px;display:flex;flex-direction:column;align-items:center;gap:var(--s2);
 padding:var(--s4) var(--s2) var(--s3);background:rgba(17,17,20,.8);backdrop-filter:blur(12px);border-right:1px solid var(--border);z-index:10;
}
.account-rail a,.account-rail button{
 width:40px;height:40px;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--radius-md);
 background:transparent;color:var(--text-muted);box-shadow:none;
}
.account-rail a:hover,.account-rail button:hover{background:var(--surface-3);color:var(--text);text-decoration:none}
.rail-spacer{flex:1}
.rs-avatar{
 display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;
 background:linear-gradient(135deg,#a78bfa,#6d28d9);color:#fff;font-size:var(--text-sm);font-weight:700;
}

.admin-main{max-width:1120px;margin:0 auto;padding:var(--s6) var(--s8) 80px}
.admin-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);padding:var(--s2) 0 var(--s8)}
.admin-header .rs-brand{font-size:var(--text-xl)}
.admin-header a:not(.rs-brand){font-size:var(--text-sm);color:var(--text-muted)}
.admin-header a:not(.rs-brand):hover{color:var(--text)}
.admin-header .spacer{flex:1}
.admin-main>h1{font-size:28px;margin-bottom:var(--s2)}
.admin-main>p{max-width:720px}
.pill{
 display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);
 background:var(--accent-soft);color:var(--accent-text);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Section cards (admin, MFA card, enrollment) */
.admin-section{
 margin:0 0 var(--s4);padding:var(--s6);background:var(--surface);border:1px solid var(--border);
 border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.admin-section>h2:first-child{margin-top:0}
.admin-section form{max-width:560px}
.admin-section form>button,.admin-section form button[type=submit]{margin-top:var(--s5)}
.admin-section details>summary{cursor:pointer;color:var(--text-muted);font-size:var(--text-sm);padding:var(--s2) 0}
.admin-section details>summary:hover{color:var(--text)}

@media (max-width:640px){
 .account-main{padding-top:6vh}
 .account-panel{padding:var(--s6) var(--s5)}
 .rs-admin{margin-left:0;padding-bottom:64px}
 .account-rail{inset:auto 0 0 0;width:auto;height:60px;flex-direction:row;padding:var(--s2) var(--s4);border-right:0;border-top:1px solid var(--border)}
 .admin-main{padding:var(--s5) var(--s4) 80px}
 .admin-section{padding:var(--s5) var(--s4)}
 .mfa-recovery{grid-template-columns:1fr}
}

/* Secondary links under the main button (Забыли пароль?, Перейти ко входу…) */
.account-panel>p:has(>a:only-child){margin:var(--s2) 0 0;font-size:var(--text-sm)}
.account-panel>form+p:has(>a:only-child),.account-panel>#error+p:has(>a:only-child){margin-top:var(--s5)}