/* lock.css — shared modern design system for lock/onboarding/vault screens.
   Pages define --bg/--accent; this layers glass + gradient on top. */
:root{
  --bg:#0b0f1a; --card:#141a2b; --fg:#eef2ff; --muted:#9aa4c2;
  --accent:#5b8cff; --accent-2:#7c5cff; --err:#ff8080; --ok:#42d392; --line:#26304d;
  --glass:rgba(18,24,41,.68); --glass-2:rgba(24,32,54,.55);
  --gborder:rgba(255,255,255,.09); --gborder-2:rgba(255,255,255,.16);
  --field-bg:rgba(8,12,24,.55);
  --sh2:0 10px 30px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.4);
  --sh3:0 30px 70px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.45);
  --glow:0 0 0 4px rgba(91,140,255,.16);
  --r:20px; --rs:13px; --rx:10px;
  --ease:cubic-bezier(.16,1,.3,1); --eo:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
/* ambient blurred blobs for depth */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.ambient::before{width:46vmax;height:46vmax;top:-16vmax;left:-12vmax;background:radial-gradient(circle,var(--accent),transparent 65%);animation:drift1 22s var(--ease) infinite alternate}
.ambient::after{width:40vmax;height:40vmax;bottom:-14vmax;right:-10vmax;background:radial-gradient(circle,var(--accent-2),transparent 65%);animation:drift2 26s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-7vmax,-5vmax) scale(1.08)}}
/* glass card */
.card{
  width:100%;max-width:380px;background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--gborder);border-radius:var(--r);padding:30px 26px;
  box-shadow:var(--sh3);position:relative;animation:rise .45s var(--eo) both;
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,transparent,var(--gborder-2),transparent);pointer-events:none}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* lock badge */
.lock-badge{
  width:56px;height:56px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent-2) 20%,transparent));
  border:1px solid var(--gborder-2);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.12);
  animation:badgeIn .5s var(--eo) .08s both;
}
.lock-badge svg{width:26px;height:26px;display:block}
@keyframes badgeIn{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
/* headings */
h1,h2{letter-spacing:-.01em}
.card h1{font-size:20px;margin:0 0 4px;text-align:center;font-weight:680}
.card p.sub{margin:0 0 22px;text-align:center;color:var(--muted);font-size:14px}
/* fields */
label{display:block;font-size:13px;color:var(--muted);margin:0 0 7px;font-weight:550}
.input,input[type=text],input[type=url],input[type=password],select{
  width:100%;padding:13px 15px;font-size:16px;color:var(--fg);background:var(--field-bg);
  border:1px solid var(--line);border-radius:var(--rs);outline:none;font-family:inherit;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.input:focus,input:focus,select:focus{border-color:var(--accent);box-shadow:var(--glow);background:rgba(8,12,24,.8)}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239aa4c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.hint{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.45}
/* primary button */
.btn,.card button[type=submit]{
  width:100%;margin-top:18px;padding:14px 16px;font-size:16px;font-weight:650;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0;border-radius:var(--rs);cursor:pointer;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 32%,transparent);
  transition:transform .14s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}
.btn:hover,.card button[type=submit]:hover{transform:translateY(-1px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 42%,transparent);filter:brightness(1.05)}
.btn:active,.card button[type=submit]:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
/* ghost button */
.btn-ghost{
  appearance:none;-webkit-appearance:none;flex:1;min-width:90px;margin-top:0;padding:10px 13px;
  font-size:14px;font-weight:600;color:var(--fg);background:var(--glass-2);
  border:1px solid var(--gborder);border-radius:var(--rx);cursor:pointer;
  transition:background-color .15s var(--ease),transform .12s var(--ease),border-color .15s var(--ease);
}
.btn-ghost:hover{background:rgba(38,48,77,.7);border-color:var(--gborder-2)}
.btn-ghost:active{transform:scale(.97)}
/* messages */
.err{color:var(--err);font-size:14px;text-align:center;margin:14px 0 0}
.foot{margin-top:20px;text-align:center;color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ambient::before,.ambient::after{animation:none}
}