:root{
  --bg:#f4f1ec;
  --bg2:#f8f6f2;
  --text:#181818;
  --muted:#66615b;
  --muted2:#8a847d;
  --stroke:#e2ded8;
  --accent1:#e85d75;
  --accent2:#f08a5d;
  --dark:#181818;
  --danger:#c94757;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:"Tajawal",sans-serif;-webkit-text-size-adjust:100%;touch-action:manipulation}
body{background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.72),transparent 31%),radial-gradient(circle at 18% 58%,rgba(232,93,117,.07),transparent 26%),linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%)}
a{color:inherit;text-decoration:none}
button,input{font-family:"Tajawal",sans-serif}
button{-webkit-tap-highlight-color:transparent}
.page{position:fixed;inset:0;width:min(690px,90vw);height:auto;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:22px 0 92px;overflow:hidden}
.single-screen{height:100%;overflow:hidden}
.stack{width:100%;text-align:center;transform:translateY(14px)}
.brand{font-family:"Montserrat",sans-serif;font-size:32px;font-weight:900;letter-spacing:.2px;margin-bottom:28px;color:var(--text);line-height:1}
.title{max-width:560px;margin:0 auto 24px;font-size:clamp(22px,2.75vw,32px);line-height:1.2;letter-spacing:-.35px;font-weight:900;color:var(--text)}
.compact-title{font-size:clamp(22px,2.8vw,30px);margin-bottom:18px}
.desc{max-width:560px;margin:0 auto 18px;color:var(--muted);font-size:14.5px;line-height:1.75;font-weight:500}
.form{width:min(410px,100%);margin:0 auto}
.input{width:100%;height:56px;border:1px solid var(--stroke);background:#fff;color:var(--text);border-radius:16px;padding:0 20px;font:700 16px "Tajawal",sans-serif;outline:none;text-align:right;margin-bottom:12px;box-shadow:0 10px 26px rgba(24,24,24,.035);-webkit-appearance:none;appearance:none}
.input::placeholder{color:#9a948d;font-weight:500}
.input:focus{border-color:#bbb2a8;background:#fff;box-shadow:0 0 0 4px rgba(232,93,117,.08),0 10px 26px rgba(24,24,24,.045)}
.file-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.upload-btn,.primary-btn,.outline-btn{width:100%;height:57px;border:0;border-radius:999px;cursor:pointer;font:800 16px "Tajawal",sans-serif;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .18s ease,filter .18s ease,background .18s ease,box-shadow .18s ease;position:relative}
.upload-btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;margin-bottom:12px;box-shadow:0 18px 38px rgba(232,93,117,.18)}
.primary-btn{background:var(--dark);color:#fff;box-shadow:0 18px 38px rgba(24,24,24,.16)}
.outline-btn{background:#fff;color:var(--text);border:1px solid var(--stroke);box-shadow:0 12px 28px rgba(24,24,24,.045)}
.upload-btn:hover,.primary-btn:hover,.outline-btn:hover,.icon-btn:hover{transform:translateY(-2px);filter:brightness(1.02)}
.btn-icon{width:21px;height:21px;object-fit:contain;filter:brightness(0) invert(1)}
.help{min-height:19px;margin-top:13px;color:var(--muted2);font-size:12px;line-height:1.65}
.tiny-link{display:inline-block;margin-top:14px;color:var(--muted);font-size:12.5px;border-bottom:1px solid #cfc8c0;padding-bottom:3px}
.tiny-link:hover{color:var(--text)}
.turnstile-wrap{width:100%;min-height:68px;margin:1px auto 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.turnstile-missing{width:100%;min-height:50px;margin:0 auto 12px;border:1px solid rgba(201,71,87,.20);background:rgba(201,71,87,.07);border-radius:16px;color:#9d2635;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;line-height:1.7;padding:10px 12px}
.card{width:min(480px,100%);margin:0 auto;border:1px solid var(--stroke);background:rgba(255,255,255,.84);border-radius:28px;padding:28px 22px;box-shadow:0 24px 70px rgba(24,24,24,.09);backdrop-filter:blur(10px)}
.slim-card{width:min(440px,100%)}
.cv-card{width:min(430px,100%)}
.status-icon{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--stroke);box-shadow:0 14px 36px rgba(24,24,24,.075)}
.status-icon img{width:34px;height:34px;filter:none;opacity:.86}
.name{font-size:30px;font-weight:900;line-height:1.25;margin:6px 0 18px;color:var(--text)}
.url-box{direction:ltr;text-align:center;width:100%;border:1px solid var(--stroke);background:#fff;color:var(--text);border-radius:16px;padding:14px;font-family:"Montserrat",sans-serif;font-size:13px;font-weight:700;word-break:break-all;margin:14px 0 18px;box-shadow:0 10px 24px rgba(24,24,24,.035)}
.icon-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.icon-btn{width:46px;height:46px;border:1px solid var(--stroke);background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;box-shadow:0 10px 24px rgba(24,24,24,.05)}
.icon-btn img{width:21px;height:21px;filter:none;opacity:.82}
.main-action{width:min(330px,100%);margin:12px auto 0}
.footer{position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));text-align:center;color:#8a847d;font-size:11.5px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.4}
.footer-links{display:flex;align-items:center;justify-content:center;gap:7px;color:#7f7972}
.footer a,.footer button{font:700 11.5px "Tajawal",sans-serif;background:transparent;border:0;color:#7f7972;cursor:pointer;padding:0}
.footer a:hover,.footer button:hover{color:var(--text)}
.copyright{display:flex;align-items:center;justify-content:center;gap:6px}
.footer .flag{width:16px!important;height:16px!important;object-fit:contain;display:inline-block;transform:translateY(-.5px);flex:0 0 16px}
.alert{width:min(410px,100%);margin:0 auto 16px;border:1px solid rgba(201,71,87,.20);background:rgba(201,71,87,.075);border-radius:16px;padding:12px 14px;color:#9d2635;font-size:13px;line-height:1.7}
.success-note{margin-top:18px;color:var(--muted);font-size:12.5px;line-height:1.75}
.hidden{display:none!important}
.sheet{position:fixed;inset:0;z-index:20;visibility:hidden;opacity:0;pointer-events:none;transition:opacity calc(var(--sheet-speed) - 120ms) ease,visibility 0s linear var(--sheet-speed)}
.sheet.active{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.sheet-backdrop{position:absolute;inset:0;background:rgba(24,24,24,.28);backdrop-filter:blur(2px);opacity:0;transition:opacity calc(var(--sheet-speed) - 120ms) ease}
.sheet.active .sheet-backdrop{opacity:1}
.sheet-panel{position:absolute;left:50%;bottom:0;transform:translate3d(-50%,102%,0);width:min(620px,100%);max-height:min(78dvh,620px);background:#fff;border:1px solid var(--stroke);border-radius:28px 28px 0 0;box-shadow:0 -24px 70px rgba(24,24,24,.18);padding:18px 22px 24px;text-align:right;transition:transform var(--sheet-speed) cubic-bezier(.18,.86,.18,1),opacity calc(var(--sheet-speed) - 160ms) ease;opacity:.4;will-change:transform,opacity}
.sheet.active .sheet-panel{transform:translate3d(-50%,0,0);opacity:1}
.sheet-handle{width:44px;height:5px;background:#d6d0c8;border-radius:999px;margin:0 auto 16px}
.sheet-close{position:absolute;top:14px;left:18px;width:34px;height:34px;border:1px solid var(--stroke);background:#f7f5f0;border-radius:50%;font-size:23px;line-height:1;color:var(--text);cursor:pointer}
.sheet-panel h2{font-size:22px;font-weight:900;margin:0 0 16px;color:var(--text)}
.sheet-content{max-height:calc(min(78dvh,620px) - 94px);overflow:auto;padding-inline-end:4px;color:var(--muted);font-size:14px;line-height:1.85;-webkit-overflow-scrolling:touch}
.sheet-content h3{color:var(--text);font-size:15px;font-weight:900;margin:18px 0 5px}
.sheet-content p{margin:0 0 6px}
.sheet-content a{font-weight:800;border-bottom:1px solid #cfc8c0}
@media(max-width:700px){
  .page{width:min(390px,88vw);padding:18px 0 78px;align-items:center}
  .stack{transform:translateY(22px)}
  .brand{font-size:30px;margin-bottom:24px}
  .title{max-width:560px;margin:0 auto 24px;font-size:clamp(22px,2.75vw,32px);line-height:1.2;letter-spacing:-.35px;font-weight:900;color:var(--text)}
  .input,.upload-btn,.primary-btn,.outline-btn{height:54px;font-size:16px}
    .card{padding:25px 18px;border-radius:26px}
  .name{font-size:26px}
  .footer{bottom:max(9px,env(safe-area-inset-bottom));font-size:11px}
  .footer a,.footer button{font-size:11px}
  .sheet-panel{border-radius:26px 26px 0 0;padding:18px 18px 24px}
}
@media(max-height:640px){
  .stack{transform:translateY(4px)}
  .brand{font-size:27px;margin-bottom:18px}
  .title{max-width:560px;margin:0 auto 24px;font-size:clamp(22px,2.75vw,32px);line-height:1.2;letter-spacing:-.35px;font-weight:900;color:var(--text)}
  .input,.upload-btn,.primary-btn,.outline-btn{height:50px;margin-bottom:9px}
  .turnstile-wrap{min-height:62px;margin-bottom:9px}
  .help{margin-top:9px}
  .card{padding:22px 18px}
  .status-icon{width:56px;height:56px;margin-bottom:12px}
  .footer{font-size:10.5px;bottom:7px}
}