/* AFNAAN Outfit Studio. All visual rules scoped to this feature. */
.os-page{max-width:520px;margin:0 auto;padding:12px 14px 18px;color:#edf3ff}.os-page [hidden]{display:none!important}.os-back{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-bottom:6px;color:#92e6ff;text-decoration:none;font-size:14px}.os-hero{position:relative;overflow:hidden;padding:16px 18px;margin-bottom:12px;border:1px solid #344865;border-radius:14px;background:radial-gradient(ellipse at top right,#3f2f695c,transparent 60%),linear-gradient(125deg,#153344,#151a30);box-shadow:inset 0 1px #ffffff15,0 14px 38px #0003}.os-hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(22px,5.8vw,29px);letter-spacing:-1px;line-height:1.3;margin:0;position:relative;z-index:1}.os-hero h1 span{color:#a9c9ff;text-shadow:0 0 22px #648fff55}.os-form{border:1px solid #2d3c56;border-radius:14px;padding:14px;background:linear-gradient(130deg,#151e30,#0d1120);box-shadow:inset 0 1px #ffffff0e}.os-form>label{display:block;color:#b8cae1;letter-spacing:1.5px;font-size:11px;font-weight:700;margin-bottom:9px}.os-form input[type=text]{display:block;width:100%;min-width:0;font:600 18px 'Rajdhani',sans-serif;padding:13px 14px;min-height:46px;border:1px solid #344963;border-radius:11px;background:#080e1a;color:#effaff;box-shadow:inset 0 2px 8px #0003;transition:border-color .2s,box-shadow .2s}.os-form input[type=text]:focus{border-color:#6fdfec;box-shadow:0 0 0 3px #73e3ff19;outline:2px solid #73e3ff;outline-offset:2px}.os-form input::placeholder{font-size:14px;color:#8897b3}.os-backgrounds{display:flex;gap:8px;flex-wrap:wrap;border:0;margin:12px 0}.os-backgrounds legend{font-size:12px;color:#c6d3e4;margin-bottom:9px}.os-color{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;flex:1;background:#0b1423;border:1px solid #30415b;border-radius:9px;padding:8px;font-size:12px;cursor:pointer;white-space:nowrap}.os-color.is-selected{border-color:#73d7ec;box-shadow:inset 0 0 0 1px #73d7ec;background:#18303e}.os-color input{accent-color:#7bd7e4;width:13px;height:13px}.os-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.os-red{background:#ff586e}.os-blue{background:#4baaff}.os-green{background:#37d69a}.os-submit{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;overflow:hidden;width:100%;min-height:46px;border:1px solid #b0ddff40;border-radius:11px;background:linear-gradient(110deg,#168fa5,#526ad9 60%,#8857cb);color:white;font:700 15px 'Rajdhani',sans-serif;box-shadow:0 8px 24px #3a66da35,inset 0 1px #ffffff30;cursor:pointer;transition:transform .18s,box-shadow .18s}.os-submit:after{content:'';position:absolute;top:-65%;left:-60%;height:230%;width:38%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#fff4,transparent);animation:os-shine 1.1s ease-out 1;pointer-events:none}.os-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px #536de966}.os-submit:active{transform:scale(.98)}.os-submit:disabled{opacity:.65;transform:none;cursor:wait}.os-status{font-size:13px;line-height:1.7;color:#b9d7f1;margin:10px 0;overflow-wrap:anywhere}.os-status:empty{display:none}.os-loading{margin-top:12px;text-align:center;padding:18px 14px;background:radial-gradient(ellipse,#18334b,#0f1524);border:1px solid #344b6c;border-radius:15px}.os-loading strong{font-size:14px;color:#a3eaf4}.os-scan{width:66px;height:70px;position:relative;overflow:hidden;margin:0 auto 12px;border:1px solid #5c8caa80;border-radius:13px;background:linear-gradient(#12202e,#142e42);display:grid;place-items:center;box-shadow:0 0 28px #65dbff12}.os-scan i{font-size:34px;color:#9bc5e3}.os-scan span{position:absolute;left:0;right:0;top:0;height:2px;background:#87f4fc;box-shadow:0 0 16px 6px #64e5ff50;animation:os-scan 1.8s ease-in-out infinite alternate}.os-result{overflow:hidden;border:1px solid #3e577e;border-radius:14px;background:#101827;margin-top:12px;box-shadow:0 12px 38px #0005,0 0 24px #648dff15;animation:os-reveal .28s cubic-bezier(.16,1,.3,1)}.os-result header{padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(100deg,#153549,#202640)}.os-result header span{color:#a6e1ec;font-size:10px;letter-spacing:1px}.os-result header strong{font-size:12px;color:#cfdaee}.os-image-button{display:block;position:relative;border:0;padding:0;width:100%;background:#0a1020;cursor:zoom-in}.os-image-button img{display:block;width:100%;height:auto;object-fit:contain}.os-zoom-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:7px 11px;border:1px solid #b6e7ff44;border-radius:20px;background:#080e22dd;color:#f5f9ff;font-size:11px;white-space:nowrap;pointer-events:none}.os-download{margin:10px;display:flex;gap:9px;align-items:center;justify-content:center;min-height:46px;border:1px solid #40617c;border-radius:10px;background:linear-gradient(110deg,#173e4e,#202843);color:#bfeeff;text-decoration:none;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s}.os-download:hover{transform:translateY(-1px);box-shadow:0 0 22px #81cbef22}.os-viewer{position:fixed;inset:0;margin:auto;width:95vw;max-width:900px;max-height:90vh;max-height:90dvh;padding:0;border:1px solid #516b8e;border-radius:15px;background:#0b1120;color:#eef5ff;box-shadow:0 20px 100px #000a;overflow:auto;z-index:99999}.os-viewer::backdrop{background:#020511df;backdrop-filter:blur(8px)}.os-viewer-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-bottom:1px solid #30405a;gap:10px}.os-viewer-toolbar strong{font-size:14px}.os-viewer button{min-width:44px;min-height:44px;border:1px solid #354b67;border-radius:8px;background:#18263c;color:white;font-size:20px;cursor:pointer}.os-zoom-controls{display:flex;align-items:center;justify-content:center;gap:20px;padding:10px}.os-zoom-controls output{font-size:14px;min-width:44px;text-align:center}.os-zoom-controls button:disabled{opacity:.4}.os-zoom-area{overflow:auto;max-height:65vh;max-height:65dvh;touch-action:pan-x pan-y pinch-zoom}.os-zoom-area img{display:block;width:100%;max-width:none;height:auto}.os-page button:focus-visible,.os-page a:focus-visible{outline:2px solid #9eeaff;outline-offset:3px}@keyframes os-shine{from{left:-60%}to{left:160%}}@keyframes os-scan{from{transform:translateY(5px)}to{transform:translateY(62px)}}@keyframes os-reveal{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:359px){.os-page{padding:10px}.os-form{padding:12px}.os-color{gap:5px;padding:7px 5px}.os-hero{padding:14px 16px}}@media(prefers-reduced-motion:reduce){.os-page *,.os-page *:after,.os-page *:before{animation:none!important;transition:none!important}}

.os-viewer:not([open]){display:none}.os-page.os-paused *,.os-page.os-paused *:after{animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){.os-submit:hover:after{animation:os-shine 1.1s ease-out 1}}
@media(hover:none),(pointer:coarse){.os-viewer::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}.os-submit:hover{transform:none}}

/* Announce completion without a redundant visible row above the result. */
.os-status.os-success{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Preserve the original PNG; premium finish belongs to the surrounding frame. */
.os-result{border-color:#966153;background:linear-gradient(135deg,#22151d,#0e1424);box-shadow:inset 0 1px #fff1,0 8px 24px #0004}
.os-result[data-bg="3"]{border-color:#397d91;background:linear-gradient(135deg,#102933,#101627)}
.os-result[data-bg="2"]{border-color:#548343;background:linear-gradient(135deg,#1a2a1c,#101627)}
.os-image-button img{image-rendering:auto}
.os-result.os-updating{border-color:#78dce8}
.os-downloads{display:flex;gap:8px;padding:10px}
.os-downloads .os-download,.os-hd-download{margin:0;min-width:0;flex:1;min-height:44px;font:700 13px 'Rajdhani',sans-serif}
.os-hd-download{border:1px solid #8fcbdc60;border-radius:10px;background:linear-gradient(110deg,#196b81,#4e46a5);color:#f3fbff;padding:8px 10px;cursor:pointer}
.os-hd-download:disabled{opacity:.65;cursor:wait}
.os-viewer{max-width:800px}