:root{--u:clamp(7px, min(1.05vh, 1.05vw), 22px);--radius:calc(var(--u) * 1.6);--background:#cfeafd;--foreground:#0c1f3c;--surface:#fff;--primary:#0089dd;--primary-hover:#0073bd;--primary-foreground:#fff;--muted:#e5f2fc;--muted-foreground:#5c7894;--destructive:#e0463b;--border:#bcd9ee;--navy:#0e2742;--tile:#e5f2fc;--tile-selected:#0089dd;--shadow-card:0 calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * -1) #0850912e;--shadow-soft:0 calc(var(--u) * .4) calc(var(--u) * 1.4) calc(var(--u) * -.4) #0850911a;--gradient-screen:linear-gradient(180deg, #cfeafd 0%, #bce0fb 55%, #aedaf9 100%);--font-arabic:"Tajawal", "Cairo", system-ui, sans-serif;--content-max:clamp(420px, 60vw, 900px)}@media (orientation:portrait){:root{--u:clamp(10px, 1.75vw, 36px);--content-max:min(94vw, calc(var(--u) * 44))}}@media (orientation:portrait) and (aspect-ratio>=9/20){:root{--content-max:min(92vw, calc(var(--u) * 42))}}*{box-sizing:border-box;border-color:var(--border)}html,body,#root{width:100%;height:100%;margin:0;padding:0}html,body{background:var(--gradient-screen);color:var(--foreground);font-family:var(--font-arabic);font-size:calc(var(--u) * 1.6);-webkit-font-smoothing:antialiased;overflow:hidden}#root{justify-content:stretch;align-items:stretch;height:100dvh;min-height:100dvh;display:flex}button{cursor:pointer;background:0 0;border:none;font-family:inherit}img{max-width:100%;display:block}.phone-frame{width:100vw;height:100dvh;min-height:100dvh;padding:0 max(calc((100vw - var(--content-max)) / 2), calc(var(--u) * 2));background:0 0;flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.phone-frame>*{width:100%;max-width:var(--content-max)}.screen-header{padding:calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 1);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.screen-header h2{font-size:calc(var(--u) * 2.8);color:var(--foreground);margin:0;font-weight:700}.screen-header .spacer{width:calc(var(--u) * 5)}.back-btn{width:calc(var(--u) * 5);height:calc(var(--u) * 5);color:var(--foreground);background:#7fc0e299;border-radius:9999px;justify-content:center;align-items:center;transition:background .15s;display:inline-flex}.back-btn svg{width:calc(var(--u) * 2.8);height:calc(var(--u) * 2.8)}.back-btn:hover{background:#7fc0e2cc}.screen-main{min-height:0;padding:0 calc(var(--u) * 2) calc(var(--u) * 2);flex-direction:column;flex:auto;display:flex}.screen-main.bleed{padding:0}.face-guide-oval{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.face-guide-oval:after{aspect-ratio:3/4;border:4px dashed #ffffffd9;border-radius:50%;width:82%;max-width:900px}.btn{justify-content:center;align-items:center;gap:calc(var(--u) * 1);padding:calc(var(--u) * 2.4) calc(var(--u) * 3.5);border-radius:calc(var(--u) * 1.8);font-size:calc(var(--u) * 2.2);width:100%;min-height:calc(var(--u) * 7);font-weight:700;line-height:1.2;transition:all .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:active:not(:disabled){transform:scale(.98)}.btn--auto{width:auto}.btn--primary{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-soft)}.btn--primary:hover:not(:disabled){background:var(--primary-hover)}.btn--navy{background:var(--navy);color:#fff}.btn--navy:hover:not(:disabled){opacity:.9}.btn--outline{color:var(--foreground);background:0 0;border:2px solid #0c1f3ccc}.btn--outline:hover:not(:disabled){background:#0c1f3c0d}.btn--ghost{color:var(--foreground)}.btn--ghost:hover:not(:disabled){background:#0c1f3c0d}.btn--outline-white{color:#fff;padding:calc(var(--u) * 2.4) calc(var(--u) * 3.5);border-radius:calc(var(--u) * 1.8);font-size:calc(var(--u) * 2.2);min-height:calc(var(--u) * 7);background:0 0;border:2px solid #fff;font-weight:700}.btn--outline-white:hover:not(:disabled){background:#ffffff1a}.spinner{width:calc(var(--u) * 2.4);height:calc(var(--u) * 2.4);animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sel-card{border-radius:calc(var(--u) * 2.4);text-align:center;background:var(--tile);width:100%;color:var(--foreground);transition:all .2s;position:relative;overflow:hidden}.sel-card:hover{filter:brightness(.98)}.sel-card:active{transform:scale(.99)}.sel-card.is-selected{background:var(--tile-selected);color:#fff;box-shadow:var(--shadow-card)}.sel-check{top:calc(var(--u) * 1.4);left:calc(var(--u) * 1.4);z-index:1;width:calc(var(--u) * 3.4);height:calc(var(--u) * 3.4);color:#0000;background:#fff9;border:2px solid #fffc;border-radius:9999px;justify-content:center;align-items:center;display:flex;position:absolute}.sel-check svg{width:calc(var(--u) * 2);height:calc(var(--u) * 2)}.sel-card.is-selected .sel-check{color:var(--tile-selected);background:#fff;border-color:#fff}.sel-stacked{justify-content:center;align-items:center;gap:calc(var(--u) * 2);padding:calc(var(--u) * 4) calc(var(--u) * 3);flex-direction:column;display:flex}.sel-stacked .avatar{width:calc(var(--u) * 16);height:calc(var(--u) * 16);background:#fff;border-radius:9999px;justify-content:center;align-items:center;display:flex;overflow:hidden;box-shadow:inset 0 2px 4px #0000000f}.sel-stacked .avatar img{object-fit:cover;width:100%;height:100%}.sel-stacked .label{font-size:calc(var(--u) * 2.6);font-weight:700}.sel-tile{flex-direction:column;height:100%;display:flex}.sel-tile .thumb{aspect-ratio:3/4;flex:auto;width:100%;overflow:hidden}.sel-tile .thumb img{object-fit:cover;width:100%;height:100%}.sel-tile .label{padding:calc(var(--u) * 1.8);font-size:calc(var(--u) * 2.2);font-weight:700}.stack{flex-direction:column;display:flex}.stack-gap-4>*+*{margin-top:calc(var(--u) * 2.5)}.stack-gap-6>*+*{margin-top:calc(var(--u) * 3)}.grid-2{gap:calc(var(--u) * 2.5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.mt-2{margin-top:calc(var(--u) * 1)}.mt-auto{margin-top:auto}.pt-6{padding-top:calc(var(--u) * 3)}.text-center{text-align:center}.flex-1{flex:1}.selection-fill{flex-direction:column;flex:auto;justify-content:center;min-height:0;display:flex}.welcome{text-align:center;padding:calc(var(--u) * 2) 0 calc(var(--u) * 2);justify-content:space-between;align-items:center;gap:calc(var(--u) * 2);flex-direction:column;flex:auto;min-height:0;display:flex}.welcome .logo{height:calc(var(--u) * 14);object-fit:contain;width:auto}.welcome .pill{padding:calc(var(--u) * 1.2) calc(var(--u) * 3);background:var(--primary);color:var(--primary-foreground);font-size:calc(var(--u) * 1.8);border-radius:9999px;font-weight:600;display:inline-block}.welcome .body{justify-content:center;gap:calc(var(--u) * 3);flex-direction:column;flex:auto;display:flex}.welcome h1{font-size:calc(var(--u) * 6);color:var(--foreground);margin:0;font-weight:800;line-height:1.12}.welcome p{font-size:calc(var(--u) * 2.2);color:#0c1f3cd9;padding:0 calc(var(--u) * 2);margin:0;line-height:1.6}.capture-wrap{z-index:1;background:#000;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.capture-title{z-index:20;text-align:center;color:#fff;margin:0;font-size:3rem;font-weight:700;position:absolute;top:24px;left:0;right:0}.capture-stage{width:100vw;height:100vh;position:absolute;inset:0;overflow:hidden}.capture-stage video,.capture-stage img{object-fit:cover;width:100%;height:100%}.capture-stage video.mirror{transform:scaleX(-1)}.capture-empty{justify-content:center;align-items:center;gap:calc(var(--u) * 3);padding:calc(var(--u) * 3);text-align:center;flex-direction:column;display:flex;position:absolute;inset:0}.capture-empty .icon{color:#ffffffd9;width:calc(var(--u) * 6);height:calc(var(--u) * 6);position:relative}.capture-empty .msg{color:#ffffffe6;font-size:calc(var(--u) * 2);max-width:80%;line-height:1.6;position:relative}.capture-empty .err{color:var(--destructive);width:calc(var(--u) * 6);height:calc(var(--u) * 6);position:relative}.capture-actions-col{gap:calc(var(--u) * 1.2);flex-direction:column;width:100%;max-width:70%;display:flex;position:relative}.capture-actions-col a{font-size:calc(var(--u) * 1.6);color:#ffffffbf;text-align:center;text-decoration:underline}.capture-bottom{z-index:30;background:0 0;grid-template-columns:1fr 1fr;gap:20px;display:grid;position:absolute;bottom:40px;left:40px;right:40px}.countdown-overlay{pointer-events:none;background:radial-gradient(circle,#00000059,#0000008c);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown-num{color:#fff;width:220px;height:220px;box-shadow:0 0 calc(var(--u) * 4) #0089dd73;background:#0089ddd9;border-radius:9999px;justify-content:center;align-items:center;font-size:8rem;font-weight:800;line-height:1;animation:1s ease-out countdown-pop;display:inline-flex}@keyframes countdown-pop{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.result-stage{align-items:center;gap:calc(var(--u) * 1.5);flex-direction:column;flex:auto;min-height:0;display:flex}.result-photos{margin-top:calc(var(--u) * 1);justify-content:center;align-items:center;gap:calc(var(--u) * 1.5);flex:auto;width:100%;min-height:0;display:flex}.polaroid{border-radius:calc(var(--u) * 1.8);padding:calc(var(--u) * 1.8);box-shadow:var(--shadow-card);background:#fff}.polaroid img{object-fit:cover;border-radius:calc(var(--u) * 1.2)}.polaroid p{text-align:center;font-size:calc(var(--u) * 1.8);margin:calc(var(--u) * 1.2) 0 0;color:var(--foreground);font-weight:700}.polaroid--me{transform:rotate(-4deg)}.polaroid--me img{width:calc(var(--u) * 22);aspect-ratio:3/4}.polaroid--outfit{transform:rotate(4deg)}.polaroid--outfit img{width:calc(var(--u) * 17);aspect-ratio:3/4}.placeholder-box{width:calc(var(--u) * 22);aspect-ratio:3/4;background:var(--muted);border-radius:calc(var(--u) * 1.2)}.polaroid--single{margin-top:calc(var(--u) * 1);transform:rotate(-2deg)}.polaroid--single img,.placeholder-box--single{width:min(70vw, calc(var(--u) * 34));aspect-ratio:3/4}.result-loading{justify-content:center;align-items:center;gap:calc(var(--u) * 1.5);color:var(--muted-foreground);font-size:calc(var(--u) * 1.7);text-align:center;padding:calc(var(--u) * 2);flex-direction:column;font-weight:600;display:flex}.result-loading .spin{width:calc(var(--u) * 4);height:calc(var(--u) * 4);color:var(--primary);animation:1s linear infinite spin}.share-msg{align-items:center;gap:calc(var(--u) * 1);font-size:calc(var(--u) * 1.8);display:flex}.share-msg.ok{color:var(--primary)}.share-msg.err{color:var(--destructive)}.share-card{background:var(--tile);border-radius:calc(var(--u) * 2.4);padding:calc(var(--u) * 2.5);box-shadow:var(--shadow-soft)}.share-card h3{font-size:calc(var(--u) * 2.2);color:var(--foreground);margin:0 0 calc(var(--u) * 1.8);text-align:center;font-weight:700}.share-grid{gap:calc(var(--u) * 1.5);grid-template-columns:1fr 1fr;display:grid}.share-btn{justify-content:center;align-items:center;gap:calc(var(--u) * 1);padding:calc(var(--u) * 2) calc(var(--u) * 2);border-radius:calc(var(--u) * 1.6);background:var(--navy);color:#fff;font-weight:700;font-size:calc(var(--u) * 1.9);min-height:calc(var(--u) * 6);transition:opacity .15s;display:inline-flex}.share-btn:hover:not(:disabled){opacity:.9}.share-btn:disabled{opacity:.5}.share-btn:active:not(:disabled){transform:scale(.98)}.share-btn svg{width:calc(var(--u) * 2);height:calc(var(--u) * 2)}.result-bottom{flex-shrink:0;width:100%}.result-bottom .home-btn{margin-top:calc(var(--u) * 1.5)}.thanks{text-align:center;justify-content:center;align-items:center;gap:calc(var(--u) * 3);flex-direction:column;flex:1;display:flex}.thanks-circle{width:calc(var(--u) * 14);height:calc(var(--u) * 14);background:var(--primary);box-shadow:var(--shadow-card);color:#fff;border-radius:9999px;justify-content:center;align-items:center;display:flex}.thanks-circle svg{width:calc(var(--u) * 7);height:calc(var(--u) * 7)}.thanks h1{font-size:calc(var(--u) * 4.4);color:var(--foreground);margin:0;font-weight:800}.thanks p.sub{font-size:calc(var(--u) * 2);color:#0c1f3ccc;margin:0}.thanks-card{border-radius:calc(var(--u) * 1.6);width:100%;padding:calc(var(--u) * 2.2) calc(var(--u) * 2.5);box-shadow:var(--shadow-soft);background:#ffffffb3}.thanks-card p{font-size:calc(var(--u) * 1.9);color:#0c1f3ccc;margin:0 0 calc(var(--u) * 1.5)}.progress{height:calc(var(--u) * 1);background:var(--tile);border-radius:9999px;width:100%;overflow:hidden}.progress-fill{background:var(--primary);height:100%;transition:width .1s linear}.footer-note{text-align:center;font-size:calc(var(--u) * 1.5);color:#0c1f3c99;padding-bottom:calc(var(--u) * 2);flex-shrink:0;margin:0}.root-error{background:var(--background);justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.root-error-inner{text-align:center;max-width:28rem}.root-error h1{color:var(--foreground);margin:0;font-size:4.5rem;font-weight:700}.root-error h2{color:var(--foreground);margin-top:1rem;font-size:1.25rem;font-weight:600}.root-error p{color:var(--muted-foreground);margin-top:.5rem;font-size:.875rem}.root-error .actions{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;display:flex}.root-error a,.root-error button{background:var(--primary);color:var(--primary-foreground);border-radius:.5rem;justify-content:center;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:opacity .15s;display:inline-flex}.root-error a:hover,.root-error button:hover{opacity:.9}.root-error a.secondary{background:var(--background);border:1px solid var(--border);color:var(--foreground)}