:root{
  --gold:#f0c040;--gold2:#e08000;--green:#22c55e;
  --red:#ef4444;--blue:#3b82f6;--purple:#a855f7;--radius:16px;
}
[data-theme="dark"]{
  --bg:#0f0f1a;--card:#1a1a2e;--card2:#16162a;--border:#2a2a40;
  --text:#ffffff;--text2:#e0e0f0;--muted:#9aa0b2;--shadow:rgba(0,0,0,.45);
  --header-bg:rgba(26,26,46,.96);--input-bg:#0f0f1a;
}
[data-theme="light"]{
  --bg:#f2f3fb;--card:#ffffff;--card2:#f7f8ff;--border:#d8daea;
  --text:#14162a;--text2:#2a2a4e;--muted:#667085;--shadow:rgba(0,0,0,.10);
  --header-bg:rgba(255,255,255,.96);--input-bg:#fbfbff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  overflow:hidden;transition:background .3s,color .3s;
}
.app-wrapper{
  width:100%;max-width:430px;height:100dvh;
  margin:0 auto;display:flex;flex-direction:column;overflow:hidden;
}

/* ── Topbar ── */
.topbar{
  padding:10px 14px;display:flex;align-items:center;
  justify-content:space-between;
  background:var(--header-bg);border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-title{font-size:14px;font-weight:900;color:var(--text);line-height:1.1}
.topbar-sub{font-size:10px;color:var(--muted);margin-top:1px}

.icon-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--card2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.icon-btn svg{width:18px;height:18px;fill:var(--text)}

.theme-btn{position:relative;overflow:hidden}
.theme-btn .sun,.theme-btn .moon{
  position:absolute;transition:.25s transform,.25s opacity;
  width:17px;height:17px;
}
.theme-btn .sun{opacity:0;transform:rotate(-90deg) scale(.6);fill:var(--gold)}
.theme-btn .moon{opacity:1;transform:rotate(0) scale(1);fill:var(--gold)}
[data-theme="light"] .theme-btn .sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-btn .moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* ── Toast ── */
.toast{
  position:fixed;z-index:9999;top:16px;left:50%;
  transform:translateX(-50%) translateY(-140%);
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;
  border:1px solid var(--border);background:var(--card);
  box-shadow:0 10px 32px var(--shadow);font-size:13px;
  min-width:240px;max-width:90%;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;flex-shrink:0}
.toast.success{border-color:rgba(34,197,94,.5)}.toast.success svg{fill:var(--green)}
.toast.error{border-color:rgba(239,68,68,.5)}.toast.error svg{fill:var(--red)}
.toast.info{border-color:rgba(59,130,246,.5)}.toast.info svg{fill:var(--blue)}

/* ── Page ── */
.page{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:12px 14px 100px;
}
.page::-webkit-scrollbar{display:none}

/* ── Security notice ── */
.security-notice{
  display:flex;align-items:flex-start;gap:11px;
  background:rgba(240,192,64,.07);
  border:1px solid rgba(240,192,64,.25);
  border-radius:14px;padding:12px 13px;margin-bottom:12px;
}
.sn-icon{font-size:22px;flex-shrink:0;margin-top:1px}
.sn-title{font-size:12px;font-weight:900;color:var(--gold);margin-bottom:3px}
.sn-sub{font-size:11px;color:var(--muted);line-height:1.5}

/* ── User card ── */
.user-card{
  display:flex;align-items:center;gap:11px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:12px 13px;margin-bottom:12px;
}
.user-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.user-info{flex:1;min-width:0}
.user-phone{
  font-size:14px;font-weight:900;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-label{font-size:10px;color:var(--muted);margin-top:2px}
.user-lock{font-size:18px;flex-shrink:0}

/* ── Form card ── */
.form-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 14px;margin-bottom:12px;
}

.form-group{margin-bottom:16px}
.form-group:last-of-type{margin-bottom:0}

.form-label{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:900;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;
}
.form-label svg{width:14px;height:14px;fill:var(--muted);flex-shrink:0}

.input-wrap{position:relative;display:flex;align-items:center}

.form-input{
  width:100%;padding:13px 46px 13px 14px;
  background:var(--input-bg);border:1.5px solid var(--border);
  border-radius:12px;color:var(--text);font-size:14px;
  font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.form-input::placeholder{color:var(--muted);font-size:12px;font-weight:400}
.form-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,192,64,.14);
}
.form-input.input-error{
  border-color:var(--red)!important;
  box-shadow:0 0 0 3px rgba(239,68,68,.12)!important;
}
.form-input.input-ok{
  border-color:var(--green)!important;
  box-shadow:0 0 0 3px rgba(34,197,94,.12)!important;
}

/* Eye toggle */
.eye-btn{
  position:absolute;right:12px;width:24px;height:24px;
  border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.eye-btn svg{width:18px;height:18px;fill:var(--muted)}

/* Field hint */
.field-hint{
  font-size:11px;margin-top:5px;min-height:16px;
  transition:color .2s;line-height:1.3;
}
.hint-error{color:var(--red)}
.hint-ok{color:var(--green)}
.hint-info{color:var(--muted)}

/* Divider */
.divider{
  display:flex;align-items:center;gap:8px;margin:4px 0 16px;
}
.divider-line{flex:1;height:1px;background:var(--border)}
.divider-lbl{
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
}

/* Strength meter */
.strength-wrap{
  margin-top:8px;display:flex;align-items:center;gap:8px;
}
.strength-bar{
  flex:1;height:5px;border-radius:999px;
  background:var(--border);overflow:hidden;
}
.strength-fill{
  height:100%;border-radius:999px;
  transition:width .35s ease,background .35s ease;width:0;
}
.strength-fill.s1{width:25%;background:var(--red)}
.strength-fill.s2{width:50%;background:var(--gold)}
.strength-fill.s3{width:75%;background:var(--gold2)}
.strength-fill.s4{width:100%;background:var(--green)}
.strength-lbl{font-size:10px;font-weight:900;white-space:nowrap}
.strength-lbl.s1{color:var(--red)}
.strength-lbl.s2,.strength-lbl.s3{color:var(--gold)}
.strength-lbl.s4{color:var(--green)}

/* Requirements */
.requirements{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.req-item{
  display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--muted);transition:color .2s;
}
.req-item.met{color:var(--green)}
.req-icon{width:14px;height:14px;flex-shrink:0;fill:var(--muted);transition:fill .2s}
.req-item.met .req-icon{fill:var(--green)}

/* Submit button */
.submit-btn{
  width:100%;margin-top:18px;padding:14px;
  border-radius:13px;border:none;cursor:pointer;
  font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--green),#16a34a);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 18px rgba(34,197,94,.3);
}
.submit-btn:not(:disabled):active{transform:scale(.98)}
.submit-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.submit-label{display:flex;align-items:center;gap:7px}
.submit-label svg{width:17px;height:17px;fill:#fff}
.submit-spinner{display:flex;align-items:center;gap:8px}
.spinner-svg{
  width:18px;height:18px;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Tips card ── */
.tips-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;margin-bottom:12px;
}
.tips-title{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:900;color:var(--text2);margin-bottom:10px;
}
.tips-title svg{width:16px;height:16px;fill:var(--gold)}
.tips-list{display:flex;flex-direction:column;gap:7px}
.tip-item{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11px;color:var(--muted);line-height:1.4;
}
.tip-dot{
  width:7px;height:7px;border-radius:50%;
  flex-shrink:0;margin-top:3px;
}
.green-dot{background:var(--green)}
.red-dot{background:var(--red)}

/* ── Footer ── */
.footer{
  text-align:center;font-size:10px;color:var(--muted);padding:8px 0 4px;
}

/* ── Success overlay ── */
.success-overlay{
  position:fixed;inset:0;
  background:rgba(5,3,20,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  z-index:8000;padding:20px;
}
.success-box{
  width:100%;max-width:320px;
  background:var(--card);border:1px solid var(--border);
  border-radius:22px;overflow:hidden;
  padding:28px 22px 22px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;position:relative;
  animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn{
  from{opacity:0;transform:scale(.6)}
  to{opacity:1;transform:scale(1)}
}
.success-glow{
  position:absolute;top:0;left:0;right:0;height:100px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(34,197,94,.2) 0%,transparent 70%);
}
.success-emoji{
  font-size:56px;margin-bottom:12px;position:relative;z-index:1;
  animation:floatEmoji 3s ease-in-out infinite;
}
@keyframes floatEmoji{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-8px) rotate(4deg)}
}
.success-title{
  font-size:18px;font-weight:900;color:var(--green);
  margin-bottom:8px;position:relative;z-index:1;
}
.success-sub{
  font-size:12px;color:var(--muted);line-height:1.55;
  margin-bottom:14px;position:relative;z-index:1;
}
.success-timer{
  font-size:12px;font-weight:700;color:var(--muted);
  margin-bottom:16px;position:relative;z-index:1;
}
.success-btn{
  width:100%;padding:13px;border-radius:12px;border:none;cursor:pointer;
  font-size:13px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--green),#16a34a);
  position:relative;z-index:1;
}