@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --bg-deep:#05060f;
  --text:#f5f7fb;
  --text-dim:#a7b0c4;
  --text-faint:#616b82;
  --glass-bg:rgba(255,255,255,.07);
  --glass-bg-strong:rgba(255,255,255,.12);
  --glass-border:rgba(255,255,255,.16);
  --accent:#0a84ff;
  --accent-2:#5e9bff;
  --success:#30d158;
  --danger:#ff453a;
  --warning:#ffd60a;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Vazirmatn',sans-serif;
  color:var(--text);
  background:var(--bg-deep);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.7;
  font-size:15px;
}

/* ---------- animated mesh background ---------- */
.mesh-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--bg-deep);
}
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  will-change:transform;
}
.blob-1{width:60vmax;height:60vmax; background:radial-gradient(circle,#0a84ff,transparent 70%); top:-20vmax; right:-15vmax; animation:float1 22s ease-in-out infinite;}
.blob-2{width:50vmax;height:50vmax; background:radial-gradient(circle,#8b5cf6,transparent 70%); bottom:-18vmax; left:-12vmax; animation:float2 26s ease-in-out infinite;}
.blob-3{width:38vmax;height:38vmax; background:radial-gradient(circle,#22d3ee,transparent 70%); top:35%; left:50%; transform:translateX(-50%); animation:float3 30s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,8%)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(8%,-6%)}}
@keyframes float3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-45%,10%)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.page{position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:28px 16px 60px;}
.brand{text-align:center; margin-bottom:22px; max-width:520px;}
.brand-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:999px;
  background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  font-size:12px; color:var(--text-dim); margin-bottom:14px;
}
.brand-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);}
.brand h1{font-size:22px; font-weight:800; letter-spacing:-.01em; margin-bottom:6px;}
.brand p{font-size:13.5px; color:var(--text-dim); max-width:440px; margin:0 auto;}

/* glass card */
.glass-card{
  width:100%; max-width:520px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  padding:26px 22px 22px;
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}

/* progress dots (iOS setup style) */
.progress-row{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:22px;}
.progress-seg{height:5px; border-radius:99px; background:rgba(255,255,255,.14); flex:1; max-width:64px; overflow:hidden;}
.progress-seg > i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:99px; transition:width .45s cubic-bezier(.4,0,.2,1);}
.progress-seg.done > i{width:100%}
.progress-seg.active > i{width:100%}

.step-title{font-size:18px; font-weight:800; margin-bottom:4px;}
.step-sub{font-size:12.5px; color:var(--text-dim); margin-bottom:20px;}

/* form elements */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:7px; font-weight:500;}
.field input[type=text],
.field input[type=tel],
.field select{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  color:var(--text); font-family:'Vazirmatn',sans-serif; font-size:14.5px;
  outline:none; transition:.2s;
}
.field input::placeholder{color:var(--text-faint)}
.field input:focus, .field select:focus{
  border-color:var(--accent); background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(10,132,255,.16);
}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23a7b0c4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; padding-left:34px;
}
.field-err{color:var(--danger); font-size:11.5px; margin-top:6px; display:none;}
.field.has-err input, .field.has-err select{border-color:var(--danger); box-shadow:0 0 0 4px rgba(255,69,58,.12);}
.field.has-err .field-err{display:block;}

.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:420px){.row-2{grid-template-columns:1fr;}}

/* role picker (chips grid) */
.role-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;}
@media (max-width:420px){.role-grid{grid-template-columns:1fr;}}
.role-chip{
  border:1px solid var(--glass-border); background:rgba(255,255,255,.05);
  border-radius:var(--radius-sm); padding:13px 14px; cursor:pointer; text-align:right;
  transition:.18s; display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500;
}
.role-chip .rc-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--text-faint); flex-shrink:0; transition:.18s;}
.role-chip:hover{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08);}
.role-chip.sel{border-color:var(--accent); background:rgba(10,132,255,.14);}
.role-chip.sel .rc-dot{border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.25);}

/* gender pills */
.pill-row{display:flex; gap:10px;}
.pill{flex:1; text-align:center; padding:12px; border-radius:var(--radius-sm); border:1px solid var(--glass-border); background:rgba(255,255,255,.05); cursor:pointer; font-size:13.5px; font-weight:600; transition:.18s;}
.pill.sel{border-color:var(--accent); background:rgba(10,132,255,.16); color:#fff;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 18px; border-radius:999px; border:none; cursor:pointer;
  font-family:'Vazirmatn',sans-serif; font-size:14.5px; font-weight:700; transition:.18s;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),#3f6fe0); color:#fff; box-shadow:0 6px 20px rgba(10,132,255,.35);}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--glass-border);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.btn-row{display:flex; gap:10px; margin-top:22px;}
.btn-row .btn{flex:1;}

/* dropdown search (school picker) */
.school-search{position:relative;}
.school-list{
  position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:20;
  max-height:240px; overflow-y:auto; border-radius:var(--radius-sm);
  background:rgba(18,20,32,.92); border:1px solid var(--glass-border);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 12px 30px rgba(0,0,0,.5); display:none;
}
.school-list.open{display:block;}
.school-opt{padding:11px 15px; cursor:pointer; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.06); transition:.12s;}
.school-opt:last-child{border-bottom:none;}
.school-opt:hover, .school-opt.hl{background:rgba(10,132,255,.16);}
.school-opt small{display:block; color:var(--text-dim); font-size:11px; margin-top:2px;}
.school-empty{padding:16px; text-align:center; color:var(--text-dim); font-size:12.5px;}

.selected-school{
  margin-top:10px; padding:12px 14px; border-radius:var(--radius-sm);
  background:rgba(48,209,88,.08); border:1px solid rgba(48,209,88,.3); display:none;
  font-size:13px; align-items:center; gap:10px;
}
.selected-school.show{display:flex;}
.selected-school .chk{width:20px;height:20px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#04150a;font-size:12px;font-weight:900;}

/* summary (review step) */
.summary-list{display:flex; flex-direction:column; gap:0; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--glass-border);}
.summary-row{display:flex; justify-content:space-between; gap:10px; padding:12px 15px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); font-size:13px;}
.summary-row:last-child{border-bottom:none;}
.summary-row .k{color:var(--text-dim);}
.summary-row .v{font-weight:600; text-align:left;}

/* success screen */
.success-wrap{text-align:center; padding:12px 6px 4px;}
.success-icon{
  width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #4fe084, var(--success));
  display:flex; align-items:center; justify-content:center; font-size:34px; color:#04150a;
  box-shadow:0 0 0 10px rgba(48,209,88,.1), 0 10px 30px rgba(48,209,88,.35);
  animation:pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{0%{transform:scale(0)}80%{transform:scale(1.08)}100%{transform:scale(1)}}
.ref-code{
  display:inline-block; margin-top:14px; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px dashed var(--glass-border); font-size:13px; letter-spacing:.03em;
}

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(20,22,34,.92); border:1px solid var(--glass-border); backdrop-filter:blur(20px);
  color:var(--text); padding:12px 22px; border-radius:999px; font-size:13px; z-index:999;
  opacity:0; pointer-events:none; transition:.25s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{border-color:rgba(255,69,58,.4); color:#ffb4ae;}

.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

footer.note{margin-top:18px; text-align:center; color:var(--text-faint); font-size:11.5px; max-width:480px;}

/* ---------- admin ---------- */
.admin-wrap{max-width:1080px; width:100%;}
.admin-top{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:18px;}
.admin-top h1{font-size:19px; font-weight:800;}
.stat-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.stat-chip{background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:999px; padding:8px 16px; font-size:12.5px; backdrop-filter:blur(20px);}
.stat-chip b{color:#fff; font-size:14px; margin-left:5px;}
.table-card{background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md); backdrop-filter:blur(24px); overflow:hidden;}
.table-toolbar{display:flex; flex-wrap:wrap; gap:10px; padding:14px 16px; border-bottom:1px solid var(--glass-border);}
.table-toolbar input, .table-toolbar select{
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--text);
  border-radius:var(--radius-sm); padding:9px 13px; font-family:'Vazirmatn',sans-serif; font-size:13px; outline:none;
}
.table-toolbar input{flex:1; min-width:160px;}
.table-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:760px;}
thead th{text-align:right; padding:11px 14px; color:var(--text-dim); font-weight:600; font-size:12px; border-bottom:1px solid var(--glass-border); white-space:nowrap;}
tbody td{padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap;}
tbody tr:hover{background:rgba(255,255,255,.04);}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; background:rgba(10,132,255,.15); color:#8fc1ff;}
.login-wrap{max-width:360px; margin:14vh auto 0;}