:root{
  --bg:#0e1417; --panel:#141d21; --line:#243238;
  --teal:#2dd4bf; --violet:#a78bfa; --gold:#e5b769;
  --text:#e7f0f0; --muted:#8aa0a2; --ok:#2dd4bf; --bad:#f0a5a5;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);
  font-family:'Vazirmatn',sans-serif;line-height:1.7;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
h1{font-family:'Noto Kufi Arabic',sans-serif;margin:14px 0 6px;font-size:1.6rem}
.view{max-width:520px;margin:0 auto;padding:34px 22px;
  min-height:100dvh;display:flex;flex-direction:column}
.hidden{display:none !important}

/* لۆگۆ */
.logo{width:76px;height:76px;border-radius:22px;margin:6vh auto 0;
  display:grid;place-items:center;font-family:'Noto Kufi Arabic';
  font-weight:900;font-size:2rem;color:#08110f;
  background:linear-gradient(135deg,var(--teal),var(--violet))}
.logo.sm{width:44px;height:44px;border-radius:13px;font-size:1.2rem;margin:0}

.sub{color:var(--muted);margin:0 0 26px}
input{width:100%;padding:15px 16px;border-radius:13px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-family:inherit;
  font-size:1.15rem;text-align:center;letter-spacing:3px}
#codeInput{text-transform:uppercase}
button{font-family:inherit;cursor:pointer}
.big{width:100%;margin-top:16px;padding:15px;border:0;border-radius:13px;
  font-weight:700;font-size:1.05rem;color:#08110f;
  background:linear-gradient(135deg,var(--teal),#5eead4)}
.msg{min-height:24px;margin:14px 0 0}
.msg.bad{color:var(--bad)} .msg.ok{color:var(--ok)}

/* topbar */
.topbar{display:flex;align-items:center;gap:12px}
.topbar b{display:block} .topbar small.ok{color:var(--ok)}

/* hero + backup button */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.backup{width:210px;height:210px;border-radius:50%;border:0;color:#08110f;
  background:linear-gradient(135deg,var(--teal),var(--violet));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:'Noto Kufi Arabic';font-weight:900;font-size:1.25rem;
  box-shadow:0 0 0 8px rgba(45,212,191,.08),0 20px 50px rgba(45,212,191,.18);
  transition:transform .15s}
.backup:active{transform:scale(.96)}
.backup .ic{font-size:2.6rem;line-height:1}
.backup:disabled{opacity:.5}
.hint{color:var(--muted);text-align:center;margin-top:22px;font-size:.9rem;max-width:300px}

/* progress */
.progress{background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:16px;margin-top:8px}
.pline{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
.pbar{height:9px;background:#0b1113;border-radius:20px;overflow:hidden;margin:10px 0}
#pFill{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--violet));transition:width .25s}
#pList{list-style:none;margin:6px 0 0;padding:0;max-height:200px;overflow:auto}
#pList li{display:flex;justify-content:space-between;padding:7px 2px;
  border-top:1px solid var(--line);font-size:.85rem}
#pList li .st.ok{color:var(--ok)} #pList li .st.bad{color:var(--bad)}
#pList li .st.skip{color:var(--muted)}

.link{background:none;border:0;color:var(--muted);margin-top:20px;
  text-decoration:underline;font-size:.85rem}

/* banner */
.banner{background:var(--gold);color:#231a06;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem}
.banner button{background:#231a06;color:var(--gold);border:0;
  border-radius:8px;padding:7px 12px;font-weight:700}