/* Rabiro Hiring Form - Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

.rh-wrap *{box-sizing:border-box;margin:0;padding:0}
.rh-wrap{
  --bg:#07070F;--bg2:#0D0D1A;
  --card:rgba(255,255,255,0.035);--card-h:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.07);--border-h:rgba(255,255,255,0.18);
  --accent:#6C63FF;--accent2:#9B92FF;
  --accent-bg:rgba(108,99,255,0.10);--accent-glow:rgba(108,99,255,0.20);
  --white:#EFEFEF;--muted:rgba(239,239,239,0.45);--faint:rgba(239,239,239,0.22);
  --error:#FF6B6B;--success:#6DFFB3;
  --r:14px;--r2:9px;--ease:cubic-bezier(.4,0,.2,1);
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--white);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* BG */
.rh-wrap .bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rh-wrap .orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.18}
.rh-wrap .orb-1{width:600px;height:600px;background:#6C63FF;top:-200px;left:-150px}
.rh-wrap .orb-2{width:500px;height:500px;background:#3D35AA;bottom:-150px;right:-100px}
.rh-wrap .orb-3{width:300px;height:300px;background:#9B92FF;top:50%;left:60%;opacity:.10}
.rh-wrap .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(108,99,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(108,99,255,.04) 1px,transparent 1px);background-size:60px 60px}

/* Layout */
.rh-page{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:56px 20px 100px}

/* Header */
.hdr{text-align:center;margin-bottom:48px;animation:rhFadeUp .7s var(--ease) both}
.rh-wrap .pill{display:inline-flex;align-items:center;gap:7px;background:var(--accent-bg);border:1px solid rgba(108,99,255,.3);border-radius:100px;padding:5px 14px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);margin-bottom:20px}
.rh-wrap .pill-dot{width:5px;height:5px;border-radius:50%;background:var(--accent2);animation:rhBlink 2s infinite}
.rh-h1{font-family:'Syne',sans-serif;font-size:clamp(32px,6vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--white);margin-bottom:14px}
.rh-wrap .sub{font-size:15px;color:var(--muted);line-height:1.7;max-width:420px;margin:0 auto}

/* Resume alert */
.rh-resume-alert{background:var(--accent-bg);border:1px solid rgba(108,99,255,.3);border-radius:12px;padding:20px 24px;margin-bottom:28px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;animation:rhFadeUp .4s var(--ease) both}
.rh-resume-icon{font-size:28px;flex-shrink:0}
.rh-resume-alert div{flex:1;min-width:200px}
.rh-resume-alert strong{color:var(--accent2);display:block;margin-bottom:4px}
.rh-resume-alert p{font-size:13px;color:var(--muted)}

/* Roles */
.rh-wrap .roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:36px;animation:rhFadeUp .7s .1s var(--ease) both}
.rh-wrap .role-opt input{display:none}
.rh-wrap .role-opt label{display:flex;flex-direction:column;gap:10px;padding:22px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .25s var(--ease);backdrop-filter:blur(16px)}
.rh-wrap .role-opt label:hover{background:var(--card-h);border-color:rgba(108,99,255,.25);transform:translateY(-2px)}
.rh-wrap .role-opt input:checked+label{background:var(--accent-bg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 32px var(--accent-glow)}
.rh-wrap .role-emoji{font-size:26px;line-height:1}
.rh-wrap .role-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--white)}
.rh-wrap .role-opt input:checked+label .role-title{color:var(--accent2)}
.rh-wrap .role-info{font-size:12px;color:var(--muted);line-height:1.5}

/* Shell */
.rh-shell{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px 32px;backdrop-filter:blur(24px);position:relative;overflow:hidden;animation:rhFadeUp .5s var(--ease) both}
.rh-shell::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(108,99,255,.4) 50%,transparent 100%)}

/* Saving */
.rh-saving{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.rh-spinner{width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:rhSpin 0.8s linear infinite;display:inline-block}

/* Stepper */
.rh-wrap .stepper{display:flex;align-items:flex-start;margin-bottom:34px}
.rh-wrap .st{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.rh-wrap .st-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'Syne',sans-serif;color:var(--faint);background:var(--bg);transition:all .3s var(--ease);position:relative;z-index:1;flex-shrink:0}
.rh-wrap .st.active .st-dot{border-color:var(--accent);color:var(--accent2);background:var(--accent-bg);box-shadow:0 0 16px var(--accent-glow)}
.rh-wrap .st.done .st-dot{border-color:var(--accent);background:var(--accent);color:#fff;font-size:12px}
.rh-wrap .st-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-top:6px;text-align:center;transition:color .3s;white-space:nowrap}
.rh-wrap .st.active .st-label,.rh-wrap .st.done .st-label{color:var(--muted)}
.rh-wrap .st-line{flex:1;height:1.5px;background:var(--border);margin-top:13px;transition:background .4s}
.rh-wrap .st.done .st-line{background:var(--accent)}
.rh-wrap .st:last-child .st-line{display:none}

/* Section label */
.rh-wrap .sec-lbl{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.rh-wrap .sec-lbl::after{content:'';flex:1;height:1px;background:var(--border)}

/* Fields */
.rh-wrap .fld{margin-bottom:16px}
.rh-wrap .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rh-wrap .lbl{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px;letter-spacing:.01em}
.rh-wrap .req{color:var(--accent2);margin-left:2px}
.rh-wrap .hint{font-size:11px;color:var(--faint);margin-top:4px;line-height:1.5}
.rh-wrap input[type=text],.rh-wrap input[type=email],.rh-wrap input[type=tel],.rh-wrap input[type=url],.rh-wrap input[type=number],.rh-wrap select,.rh-wrap textarea{width:100%;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:var(--r2);padding:11px 13px;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--white);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.rh-wrap input:focus,.rh-wrap select:focus,.rh-wrap textarea:focus{border-color:rgba(108,99,255,.5);background:rgba(108,99,255,.05);box-shadow:0 0 0 3px rgba(108,99,255,.08)}
.rh-wrap .invalid{border-color:var(--error)!important}
.rh-wrap input::placeholder,.rh-wrap textarea::placeholder{color:var(--faint)}
.rh-wrap select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(239,239,239,0.25)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer}
.rh-wrap select option{background:#111122;color:var(--white)}
.rh-wrap textarea{resize:vertical;min-height:88px;line-height:1.6}

/* Pills */
.rh-wrap .pills{display:flex;flex-wrap:wrap;gap:7px}
.rh-wrap .p-opt input{display:none}
.rh-wrap .p-opt label{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:100px;font-size:12.5px;color:var(--muted);cursor:pointer;transition:all .2s var(--ease);white-space:nowrap}
.rh-wrap .p-opt label:hover{border-color:rgba(108,99,255,.3);color:var(--white)}
.rh-wrap .p-opt input:checked+label{background:var(--accent-bg);border-color:var(--accent);color:var(--accent2)}

/* Slider */
.rh-wrap .slider-wrap{padding:4px 0}
.rh-wrap input[type=range]{width:100%;height:3px;border-radius:100px;background:var(--border);padding:0;border:none;accent-color:var(--accent);cursor:pointer}
.rh-wrap .slider-val{text-align:right;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--accent2);margin-top:6px}

/* Drop */
.rh-wrap .drop{position:relative;border:1px dashed var(--border);border-radius:var(--r2);padding:24px 20px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.015)}
.rh-wrap .drop:hover{border-color:rgba(108,99,255,.35);background:var(--accent-bg)}
.rh-wrap .drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:none;padding:0;background:none}
.rh-wrap .drop-icon{font-size:22px;margin-bottom:7px}
.rh-wrap .drop-txt{font-size:12.5px;color:var(--muted)}
.rh-wrap .drop-txt strong{color:var(--accent2)}
.rh-wrap .drop-name{font-size:12px;color:var(--success);margin-top:5px;display:none}

/* Char count / error */
.rh-wrap .cc{text-align:right;font-size:10px;color:var(--faint);margin-top:3px}
.rh-wrap .err-msg{font-size:11px;color:var(--error);margin-top:4px;display:none}

/* Conditionals */
.rh-wrap .cond{display:none}
.rh-wrap .cond.on{display:block;animation:rhFadeUp .35s var(--ease) both}

/* Step pages */
.rh-wrap .pg{display:none}
.rh-wrap .pg.on{display:block;animation:rhFadeIn .3s var(--ease) both}

/* Nav */
.rh-wrap .nav{display:flex;align-items:center;gap:10px;margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
.rh-wrap .spacer{flex:1}
.rh-wrap .btn{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;border-radius:var(--r2);font-family:'Syne',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s var(--ease);border:none;letter-spacing:.02em;white-space:nowrap}
.rh-wrap .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.rh-wrap .btn-ghost:hover{border-color:var(--border-h);color:var(--white)}
.rh-wrap .btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 24px rgba(108,99,255,.35)}
.rh-wrap .btn-primary:hover{background:#7B73FF;transform:translateY(-1px);box-shadow:0 6px 32px rgba(108,99,255,.5)}
.rh-wrap .btn-primary:active{transform:translateY(0)}
.rh-wrap .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Success */
.rh-wrap .success-scr{text-align:center;padding:56px 20px;animation:rhFadeUp .5s var(--ease) both}
.rh-wrap .s-icon{width:72px;height:72px;border-radius:50%;background:var(--accent-bg);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 24px;box-shadow:0 0 40px var(--accent-glow)}
.rh-wrap .s-title{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;margin-bottom:12px;color:var(--white)}
.rh-wrap .s-sub{font-size:14px;color:var(--muted);line-height:1.8;max-width:360px;margin:0 auto}

/* Anims */
@keyframes rhFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes rhFadeIn{from{opacity:0}to{opacity:1}}
@keyframes rhBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rhSpin{to{transform:rotate(360deg)}}

/* Responsive */
@media(max-width:580px){
  .rh-shell{padding:22px 16px}
  .rh-wrap .row2{grid-template-columns:1fr;gap:0}
  .rh-wrap .roles{grid-template-columns:1fr}
  .rh-page{padding:36px 14px 80px}
  .rh-h1{font-size:30px}
  .rh-wrap .st-label{font-size:8px}
  .rh-wrap .nav{flex-wrap:wrap}
  .rh-wrap .btn-primary{width:100%;justify-content:center;order:-1}
  .rh-wrap .spacer{display:none}
  .rh-resume-alert{flex-direction:column}
}