/* ==========================================================
   Security pages (verify.php / locked.php) — same design system
   as user.css, self-contained because these pages load only this file.
   ========================================================== */
:root{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --sec-bg:#0a0c13;--sec-card:#131723;--sec-card2:#191e2c;
  --sec-border:rgba(255,255,255,.08);--sec-border2:rgba(255,255,255,.16);
  --sec-text:#e9ebf3;--sec-text2:#a3abc0;--sec-text3:#6f7891;
  --sec-accent:#7385ff;--sec-accent-soft:rgba(115,133,255,.14);--sec-accent-ring:rgba(115,133,255,.4);
  --sec-grad:linear-gradient(135deg,#6f82ff,#9a73ff);
  --sec-danger:#f87171;--sec-success:#34d399;--sec-warn:#fbbf24;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  /* legacy names kept for any inline style still referencing them */
  --sec-pink:var(--sec-accent);--sec-purple:#9a73ff;--sec-blue:#6f82ff;
  color-scheme:dark;
}
[data-theme="light"]{
  --sec-bg:#f3f4f9;--sec-card:#ffffff;--sec-card2:#f6f7fb;
  --sec-border:rgba(20,24,45,.09);--sec-border2:rgba(20,24,45,.18);
  --sec-text:#141829;--sec-text2:#4a5270;--sec-text3:#7b84a0;
  --sec-accent:#5568f0;--sec-accent-soft:rgba(85,104,240,.10);--sec-accent-ring:rgba(85,104,240,.35);
  --sec-danger:#dc3f3f;--sec-success:#0f9d6c;--sec-warn:#b57a00;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{min-height:100vh;min-height:100dvh;background:var(--sec-bg);color:var(--sec-text);font-family:var(--font);font-size:15px;line-height:1.5;
  display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b));position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(800px 460px at 85% -8%,var(--sec-accent-soft),transparent 70%),radial-gradient(640px 380px at -8% 108%,rgba(154,115,255,.08),transparent 70%);}
a{color:var(--sec-accent);text-decoration:none;font-weight:600;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--sec-accent);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}
.sec-wrap{position:relative;z-index:1;width:100%;max-width:440px;}
.sec-card{background:var(--sec-card);border:1px solid var(--sec-border);border-radius:24px;padding:30px 24px;box-shadow:0 1px 2px rgba(0,0,0,.3),0 28px 70px -20px rgba(0,0,0,.6);animation:secIn .4s cubic-bezier(.2,.8,.2,1);}
@keyframes secIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sec-icon{width:56px;height:56px;border-radius:17px;background:var(--sec-grad);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin-bottom:18px;box-shadow:0 10px 26px -8px var(--sec-accent-ring);}
.sec-title{font-size:22px;font-weight:750;letter-spacing:-.015em;line-height:1.2;}
.sec-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec-text3);margin-top:6px;font-weight:600;}

.sec-steps{display:flex;align-items:center;margin:24px 0 8px;}
.sec-step{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--sec-card2);border:1px solid var(--sec-border2);color:var(--sec-text3);flex:none;transition:all .3s;}
.sec-step.done,.sec-step.active{background:var(--sec-accent);border-color:var(--sec-accent);color:#fff;}
.sec-step.done{background:var(--sec-success);border-color:var(--sec-success);}
.sec-step.active{box-shadow:0 0 0 5px var(--sec-accent-soft);}
.sec-step-line{flex:1;height:2px;background:var(--sec-border2);margin:0 6px;border-radius:2px;transition:background .3s;}
.sec-step-line.done{background:var(--sec-success);}
.sec-steps-labels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sec-text3);margin-bottom:20px;font-weight:600;}

.sec-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:13.5px;margin-bottom:16px;line-height:1.45;animation:secIn .2s ease;}
.sec-alert-success{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:var(--sec-success);}
.sec-alert-danger{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:var(--sec-danger);}
.sec-alert-warn{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);color:var(--sec-warn);}
.sec-alert strong{color:inherit;word-break:break-all;}

.sec-timer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;background:var(--sec-card2);border:1px solid var(--sec-border);margin-bottom:18px;}
.sec-timer-label{font-size:13px;color:var(--sec-text2);font-weight:500;}
.sec-timer-val{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--sec-accent);font-variant-numeric:tabular-nums;}

.sec-label{display:block;font-size:13px;font-weight:600;color:var(--sec-text2);margin-bottom:8px;}
.sec-otp-input{width:100%;min-height:56px;padding:0 16px;border-radius:14px;background:var(--sec-card2);border:1px solid var(--sec-border2);color:var(--sec-text);font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.5em;text-align:center;outline:none;margin-bottom:16px;transition:border-color .18s,box-shadow .18s;}
.sec-otp-input::placeholder{color:var(--sec-text3);letter-spacing:.4em;}
.sec-otp-input:focus{border-color:var(--sec-accent);box-shadow:0 0 0 4px var(--sec-accent-soft);}
.sec-otp-input:disabled{opacity:.5;}
.sec-otp-input.error{border-color:var(--sec-danger);animation:secShake .35s;}
@keyframes secShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.sec-input{width:100%;min-height:50px;padding:0 14px;border-radius:12px;background:var(--sec-card2);border:1px solid var(--sec-border2);color:var(--sec-text);font-family:inherit;font-size:16px;outline:none;transition:border-color .18s,box-shadow .18s;}
.sec-input:focus{border-color:var(--sec-accent);box-shadow:0 0 0 4px var(--sec-accent-soft);}
.sec-input-wrap{position:relative;margin-bottom:14px;}
.sec-input-wrap .sec-input{padding-right:48px;}
.sec-pw-toggle{position:absolute;right:5px;top:5px;width:40px;height:40px;border:none;background:none;color:var(--sec-text3);cursor:pointer;border-radius:10px;font-size:15px;}
.sec-pw-toggle:hover{color:var(--sec-text);background:var(--sec-border);}

.sec-btn,.sec-btn-gmail,.sec-btn-outline{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;border-radius:13px;font-family:inherit;font-size:15px;font-weight:650;cursor:pointer;transition:transform .12s,filter .18s,background .18s,border-color .18s;margin-top:10px;}
.sec-btn{border:none;color:#fff;background:var(--sec-grad);box-shadow:0 10px 24px -10px var(--sec-accent-ring);}
.sec-btn:hover{filter:brightness(1.07);}
.sec-btn:active,.sec-btn-gmail:active,.sec-btn-outline:active{transform:scale(.98);}
.sec-btn:disabled,.sec-btn-outline:disabled{opacity:.5;cursor:not-allowed;filter:none;}
.sec-btn-gmail{background:var(--sec-card2);border:1px solid var(--sec-border2);color:var(--sec-text);}
.sec-btn-gmail:hover{border-color:var(--sec-accent-ring);background:var(--sec-accent-soft);}
.sec-btn-gmail i{color:#f87171;}
.sec-btn-outline{background:transparent;border:1px solid var(--sec-border2);color:var(--sec-text2);}
.sec-btn-outline:not(:disabled):hover{border-color:var(--sec-accent-ring);color:var(--sec-text);}
.sec-hint{margin-top:22px;text-align:center;font-size:13px;color:var(--sec-text3);}

.sec-loading{display:none;flex-direction:column;align-items:center;gap:14px;padding:30px 0 10px;}
.sec-loading.show{display:flex;}
.sec-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--sec-border2);border-top-color:var(--sec-accent);animation:secSpin .8s linear infinite;}
@keyframes secSpin{to{transform:rotate(360deg)}}
.sec-loading-text{font-size:14px;color:var(--sec-text2);}

.sec-center{text-align:center;}
.sec-lock-icon{width:68px;height:68px;border-radius:20px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--sec-danger);background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);}
.sec-lock-title{font-size:24px;font-weight:750;letter-spacing:-.015em;}
.sec-lock-sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec-danger);margin-top:4px;font-weight:650;}
.sec-lock-msg{font-size:14px;color:var(--sec-text2);margin:14px 0 20px;}
.sec-meta{background:var(--sec-card2);border:1px solid var(--sec-border);border-radius:14px;padding:4px 16px;margin-bottom:22px;text-align:left;}
.sec-meta-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--sec-border);font-size:13.5px;}
.sec-meta-row:last-child{border-bottom:none;}
.sec-meta-row span{color:var(--sec-text3);}
.sec-meta-row strong{text-align:right;font-weight:600;}
#unlock-form-area .sec-label{margin-top:2px;}
.sec-role-note{font-size:12.5px;color:var(--sec-text3);margin:-2px 0 4px;text-align:left;}
.sec-role-note a{cursor:pointer;}
@media (max-width:380px){.sec-card{padding:24px 18px;}.sec-otp-input{font-size:22px;letter-spacing:.35em;}}