/* ==============================================================
   PassportLens — simplified 5-step studio
   ============================================================== */

.studio-main{max-width:1180px; margin:0 auto; padding:22px 20px 70px;}
.step-head{margin-bottom:22px;}
.step-head h1{font-size:clamp(24px,3.2vw,34px);}
.step-head h2{font-size:22px;}
.step-head p{color:var(--text-2); margin-top:6px; font-size:16px;}
.step-head.small-head{margin:26px 0 14px;}
.step-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; margin-top:26px;}

/* stepper */
.stepper{list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; counter-reset:step;}
.stepper li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r); background:#fff; border:1px solid var(--line); color:var(--mut); font-weight:600; font-size:14px; cursor:default; user-select:none;}
.stepper li i{font-style:normal; width:26px; height:26px; border-radius:50%; background:var(--bg-3); color:var(--mut); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:13px; flex:none;}
.stepper li.done{color:var(--navy); cursor:pointer;} .stepper li.done i{background:var(--ok-soft); color:var(--ok);}
.stepper li.active{color:var(--navy); border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,181,0,.18);} .stepper li.active i{background:var(--gold); color:var(--navy);}
@media (max-width:720px){ .stepper{grid-template-columns:repeat(5,1fr); gap:4px;} .stepper li{padding:8px 6px; justify-content:center;} .stepper li span{display:none;} }

/* step 1 */
.prog-search{margin-bottom:18px; max-width:520px;}
.prog-groups-grid{display:grid; gap:18px;}
.prog-country{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px;}
.prog-country h2{font-size:17px; display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.prog-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:10px;}
.prog-card{text-align:left; background:var(--bg-2); border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:border-color .15s, background .15s, transform .15s;}
.prog-card:hover{border-color:var(--navy); background:#fff; transform:translateY(-1px);}
.prog-card.on{border-color:var(--gold); background:var(--gold-soft);}
.prog-card b{font-family:var(--font-head); font-size:15px; color:var(--navy);}
.prog-card span{font-size:12.5px; color:var(--mut);}
.prog-card .tag{align-self:flex-start; margin-top:4px;}

/* step 2 */
.photo-options{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:34px 20px; text-align:center; cursor:pointer; border:2px dashed var(--line-2) !important; background:#fff; font:inherit; color:inherit;}
.drop.over{border-color:var(--gold) !important; background:var(--gold-soft);}
.drop b{font-family:var(--font-head); font-size:17px; color:var(--navy);}
.drop-ico{width:52px; height:52px; border-radius:14px; background:var(--navy-soft); color:var(--navy); display:flex; align-items:center; justify-content:center;}
.drop-ico svg{width:26px; height:26px;}
.tips{margin-top:16px; padding:16px 20px; font-size:14px;}
.tips ul{margin:8px 0 0; padding-left:18px; color:var(--text-2); display:grid; gap:4px;}
@media (max-width:640px){ .photo-options{grid-template-columns:1fr;} }

.camera{margin-top:16px; padding:14px; }
.camera-stage{position:relative; width:100%; max-width:640px; margin:0 auto; aspect-ratio:4/3; background:#0f1f33; border-radius:var(--r); overflow:hidden;}
.camera-stage video,.camera-stage canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.camera-stage canvas{pointer-events:none;}
.camera-instruction{position:absolute; left:12px; right:12px; bottom:12px; background:rgba(53,28,21,.82); color:#fff; padding:10px 14px; border-radius:10px; font-weight:600; font-size:15px; text-align:center;}
.camera-instruction.ready{background:rgba(31,138,76,.9);}
.camera-actions{display:flex; justify-content:center; gap:12px; margin-top:12px;}

.demo-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px;}
.demo-card{border:2px solid transparent; border-radius:var(--r); overflow:hidden; background:#fff; cursor:pointer; padding:0; text-align:left;}
.demo-card img{width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 20%; display:block;}
.demo-card span{display:block; padding:8px 10px; font-size:12.5px; font-weight:600; color:var(--navy);}
.demo-card:hover{border-color:var(--gold);}
.demo-card{position:relative;}
.demo-tag{position:absolute; top:8px; left:8px; font-style:normal; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; line-height:1.2;}
.demo-tag.ok{background:var(--ok-soft); color:var(--ok);}
.demo-tag.bad{background:var(--bad-soft); color:var(--bad);}

/* step 3 */
.processing{display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; text-align:center;}
.verdict{display:flex; gap:20px; padding:26px 28px; align-items:flex-start; border-left:6px solid var(--ok); margin-bottom:20px;}
.verdict.ok{border-left-color:var(--ok);} .verdict.warn{border-left-color:var(--warn);} .verdict.bad{border-left-color:var(--bad);}
.verdict-icon{flex:none; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; background:var(--ok-soft); color:var(--ok);}
.verdict.warn .verdict-icon{background:var(--warn-soft); color:var(--warn);} .verdict.bad .verdict-icon{background:var(--bad-soft); color:var(--bad);}
.verdict h1{font-size:clamp(24px,3vw,32px);}
.verdict p{color:var(--text-2); margin-top:6px; font-size:16px;}
.reasons{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px;}
.reasons li{background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:15px; font-weight:500; display:flex; gap:10px; align-items:flex-start;}
.reasons li::before{content:"→"; color:var(--gold-2); font-weight:800;}
.confirm{margin-top:14px; font-size:14px; color:var(--text-2);}
.confirm ul{margin:6px 0 0; padding-left:18px; display:grid; gap:3px;}
.result-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:20px; align-items:start;}
@media (max-width:860px){ .result-grid{grid-template-columns:1fr;} }
.preview{padding:12px;}
.preview figcaption{margin-top:8px;}
.ba{position:relative; width:100%; max-width:460px; margin:0 auto; border-radius:12px; overflow:hidden; background:var(--bg-3); user-select:none; touch-action:none; aspect-ratio:var(--ratio, 5/7);}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; pointer-events:none;}
.ba .after-img{clip-path:inset(0 0 0 50%);}
.ba-tag{position:absolute; top:10px; padding:5px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; font-family:var(--font-head); letter-spacing:.05em; text-transform:uppercase;}
.ba-tag.b{left:10px; background:rgba(36,16,9,.75); color:#fff;}
.ba-tag.a{right:10px; background:var(--gold); color:var(--navy);}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(53,28,21,.3); cursor:ew-resize; transform:translateX(-1px);}
.ba-knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:var(--shadow); border:2px solid var(--gold);}
.result-side{display:grid; gap:14px;}
.tech summary{cursor:pointer; font-weight:700; padding:14px 18px; color:var(--navy);}
.tech > div{padding:0 18px 18px; font-size:13px;}
.tech table{width:100%; border-collapse:collapse; margin-top:8px;}
.tech th,.tech td{padding:5px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.tech th{color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.06em;}
.tech .st{font-weight:700;} .tech .st.pass{color:var(--ok);} .tech .st.warning{color:var(--warn);} .tech .st.fail{color:var(--bad);} .tech .st.review{color:var(--info);}
.tech h4{margin:14px 0 4px; font-size:13px;}
.tech pre{white-space:pre-wrap; font-size:12px; background:var(--bg-2); padding:8px 10px; border-radius:8px;}

/* step 4 */
.adjust-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px); gap:20px; align-items:start;}
@media (max-width:860px){ .adjust-grid{grid-template-columns:1fr;} }
.adjust-preview{position:relative; min-height:560px;}
.adjust-preview img{width:100%; max-width:460px; margin:0 auto; border-radius:12px; background:#fff; display:block;}
.adjust-busy{position:absolute; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; border-radius:var(--r-lg);}
.controls{display:grid; gap:18px;}
.control{display:grid; gap:8px;}
.control-head{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.control b{font-family:var(--font-head); color:var(--navy); font-size:15px;}
.control .hint{font-size:12.5px; color:var(--mut); font-weight:400;}
.switch{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--text-2); cursor:pointer;}
.swatches{display:flex; gap:10px; flex-wrap:wrap;}
.swatch{width:40px; height:40px; border-radius:50%; border:2px solid var(--line-2); cursor:pointer; position:relative; box-shadow:inset 0 0 0 2px #fff;}
.swatch.on{border-color:var(--gold); box-shadow:inset 0 0 0 2px #fff, 0 0 0 3px rgba(255,181,0,.25);}
.seg{display:inline-flex; background:var(--bg-3); border-radius:var(--r-pill); padding:3px; border:1px solid var(--line);}
.seg button{border:0; background:transparent; padding:8px 14px; border-radius:var(--r-pill); font-weight:700; font-size:13.5px; color:var(--text-2); cursor:pointer;}
.seg button.on{background:var(--navy); color:#fff;}
input[type=range]{width:100%; accent-color:var(--gold);}
.nudge{display:grid; grid-template-columns:repeat(6, 44px); gap:6px;}
.nudge button{width:44px; height:40px; border:1.5px solid var(--line-2); border-radius:10px; background:#fff; font-size:18px; cursor:pointer; color:var(--navy); font-weight:700;}
.nudge button:hover{border-color:var(--navy);}
.control-actions{display:flex; gap:10px; justify-content:flex-end;}

/* step 5 */
.download-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr); gap:20px; align-items:start;}
@media (max-width:860px){ .download-grid{grid-template-columns:1fr;} }
.final-preview img{width:100%; max-width:420px; margin:0 auto; border-radius:12px; background:#fff; display:block; border:1px solid var(--line);}
.download-side{display:grid; gap:14px;}
.sheet-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 12px;}

/* ==============================================================
   v5 motion + elegance pass (2D only)
   ============================================================== */
:root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); }
.studio-main{padding-top:28px;}
img.flag{display:inline-block; width:20px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08); vertical-align:-2px;}
.btn{transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, border-color .2s;}
.btn:not(.ghost):not([disabled]):hover{box-shadow:0 10px 24px -8px rgba(255,181,0,.7);}
.btn:active{transform:scale(.97); transition-duration:.08s;}

/* step transitions */
.step-panel.enter-fwd{animation:stepFwd .55s var(--ease-out) both;}
.step-panel.enter-back{animation:stepBack .55s var(--ease-out) both;}
@keyframes stepFwd{from{opacity:0; transform:translateX(34px); filter:blur(4px);} to{opacity:1; transform:none; filter:none;}}
@keyframes stepBack{from{opacity:0; transform:translateX(-34px); filter:blur(4px);} to{opacity:1; transform:none; filter:none;}}

/* stepper with a filling track */
.stepper{position:relative; padding-bottom:12px;}
.stepper-track{position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:var(--line);}
.stepper-track span{position:absolute; left:0; top:0; bottom:0; width:calc(var(--progress,0) * 100%); border-radius:3px; background:linear-gradient(90deg, var(--gold), #E08A00); box-shadow:0 0 12px rgba(255,181,0,.7); transition:width .7s var(--ease-out);}
.stepper li{transition:border-color .3s, box-shadow .3s, color .3s, transform .3s var(--ease-out);}
.stepper li.done:hover{transform:translateY(-2px);}
.stepper li i{transition:background .3s, color .3s, transform .45s var(--ease-spring);}
.stepper li.active i{background:var(--gold); color:var(--navy); transform:scale(1.12);}

/* ---------- step 1: flag grid ---------- */
.flag-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;}
.flag-tile{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 14px 16px; background:#fff; border:1.5px solid var(--line); border-radius:20px; cursor:pointer; text-align:left; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s, opacity .3s; animation:tileIn .6s var(--ease-out) both; animation-delay:calc(var(--i) * 22ms);}
@keyframes tileIn{from{opacity:0; transform:translateY(14px) scale(.97);}}
.flag-tile:hover{transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(53,28,21,.45); border-color:var(--line-2);}
.ft-flag{display:block; width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 8px 18px -12px rgba(0,0,0,.5); margin-bottom:8px; transition:transform .5s var(--ease-spring);}
.ft-flag img{width:100%; height:100%; object-fit:cover; display:block;}
.flag-tile:hover .ft-flag{transform:scale(1.04) rotate(-1.5deg);}
.ft-studio{display:flex; width:100%; height:100%; align-items:center; justify-content:center; background:var(--navy); color:var(--gold);}
.ft-studio svg{width:40%; height:40%; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ft-name{font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--navy);}
.ft-count{font-size:12px; color:var(--mut);}
.flag-grid.has-open .flag-tile:not(.on){opacity:.62;}
.flag-grid.has-open .flag-tile:not(.on):hover{opacity:1;}
.flag-tile.on{border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,181,0,.22), 0 18px 34px -18px rgba(255,181,0,.8); transform:translateY(-4px);}

.doc-drawer{grid-column:1 / -1; position:relative; background:linear-gradient(180deg,#fff, #FFFBF1); border:1.5px solid var(--gold-line); border-radius:24px; padding:20px; box-shadow:0 24px 50px -30px rgba(53,28,21,.45); animation:drawerIn .55s var(--ease-out) both; transform-origin:var(--x) 0;}
.doc-drawer.instant{animation:none;}
.doc-drawer::before{content:""; position:absolute; top:-9px; left:calc(var(--x) - 9px); width:16px; height:16px; background:#fff; border-left:1.5px solid var(--gold-line); border-top:1.5px solid var(--gold-line); transform:rotate(45deg);}
@keyframes drawerIn{from{opacity:0; transform:translateY(-10px) scaleY(.92);}}
.dd-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.dd-head img{width:34px; height:25px; border-radius:5px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.dd-head b{font-family:var(--font-head); font-size:19px; color:var(--navy);}
.dd-head span{color:var(--mut); font-size:14px;}
.doc-drawer .prog-cards,.prog-results .prog-cards{grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px;}
.prog-card{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:#fff; animation:tileIn .5s var(--ease-out) both; animation-delay:calc(var(--i,0) * 45ms); transition:transform .3s var(--ease-out), border-color .2s, box-shadow .3s, background .2s;}
.prog-card:hover{transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(53,28,21,.5);}
.pc-shape{width:34px; height:42px; display:flex; align-items:center; justify-content:center;}
.pc-shape i{display:block; height:38px; width:calc(38px * var(--r)); max-width:34px; border-radius:4px; border:2px solid var(--navy); background:linear-gradient(180deg, var(--gold-soft) 0 55%, #fff 55%); position:relative;}
.pc-shape i::after{content:""; position:absolute; left:50%; top:22%; width:38%; aspect-ratio:1; border-radius:50%; background:var(--navy); transform:translateX(-50%); opacity:.8;}
.pc-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
.pc-go{font-weight:800; color:var(--gold-2); transition:transform .3s var(--ease-out);}
.prog-card:hover .pc-go{transform:translateX(4px);}
.prog-card.picked{border-color:var(--gold); background:var(--gold-soft); transform:scale(.98);}
.prog-card.picked .pc-go{transform:translateX(8px);}
.prog-search .input{border-radius:999px; padding-left:18px;}

/* ---------- step 2 ---------- */
.drop{border-radius:24px; transition:transform .35s var(--ease-out), box-shadow .35s, border-color .25s, background .25s;}
.drop:hover{transform:translateY(-3px);}
.drop-ico{transition:transform .5s var(--ease-spring), background .25s;}
.drop:hover .drop-ico,.drop.over .drop-ico{transform:translateY(-4px) scale(1.08); background:var(--gold); }
.drop.over{background-image:linear-gradient(90deg, var(--gold) 50%, transparent 50%), linear-gradient(90deg, var(--gold) 50%, transparent 50%), linear-gradient(0deg, var(--gold) 50%, transparent 50%), linear-gradient(0deg, var(--gold) 50%, transparent 50%); background-repeat:repeat-x, repeat-x, repeat-y, repeat-y; background-size:16px 2px, 16px 2px, 2px 16px, 2px 16px; background-position:0 0, 0 100%, 0 0, 100% 0; animation:march .6s linear infinite;}
@keyframes march{to{background-position:16px 0, -16px 100%, 0 -16px, 100% 16px;}}
.demo-card{border-radius:18px; transition:transform .35s var(--ease-out), border-color .2s, box-shadow .35s; animation:tileIn .5s var(--ease-out) both;}
.demo-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(53,28,21,.55);}
.demo-card img{transition:transform .6s var(--ease-out);}
.demo-card:hover img{transform:scale(1.05);}

/* ---------- processing: scan ---------- */
.processing{flex-direction:row; justify-content:center; gap:44px; padding:48px 20px; text-align:left; flex-wrap:wrap;}
.scan-frame{position:relative; width:230px; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:#120a07; box-shadow:0 30px 60px -24px rgba(18,10,7,.6), 0 0 60px -16px rgba(255,181,0,.5);}
.scan-frame img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; filter:saturate(.85); animation:breatheImg 3s ease-in-out infinite;}
@keyframes breatheImg{50%{transform:scale(1.03);}}
.scan-line{position:absolute; left:-10%; right:-10%; height:46px; top:-46px; background:linear-gradient(180deg, rgba(255,181,0,0), rgba(255,200,60,.55) 70%, rgba(255,255,255,.95) 72%, rgba(255,181,0,0) 76%); animation:scan 1.8s var(--ease-out) infinite;}
@keyframes scan{to{top:100%;}}
.sc{position:absolute; width:22px; height:22px; border:3px solid var(--gold);}
.sc.tl{left:10px; top:10px; border-right:0; border-bottom:0; border-radius:8px 0 0 0;}
.sc.tr{right:10px; top:10px; border-left:0; border-bottom:0; border-radius:0 8px 0 0;}
.sc.bl{left:10px; bottom:10px; border-right:0; border-top:0; border-radius:0 0 0 8px;}
.sc.br{right:10px; bottom:10px; border-left:0; border-top:0; border-radius:0 0 8px 0;}
.scan-copy b{font-family:var(--font-head); font-size:24px; color:var(--navy);}
.scan-steps{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px;}
.scan-steps li{display:flex; align-items:center; gap:12px; color:var(--mut-2); font-weight:600; transition:color .3s;}
.scan-steps li::before{content:""; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); flex:none; transition:all .35s var(--ease-spring);}
.scan-steps li.now{color:var(--navy);}
.scan-steps li.now::before{border-color:var(--gold); border-top-color:transparent; animation:spin .8s linear infinite;}
.scan-steps li.done{color:var(--navy);}
.scan-steps li.done::before{content:"✓"; background:var(--ok); border-color:var(--ok); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; transform:scale(1.05);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- result ---------- */
.verdict{border-radius:24px;}
.verdict.pop{animation:pop .6s var(--ease-spring) both;}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.97);}}
.verdict-icon svg{width:56px; height:56px; fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;}
.verdict-icon svg circle{stroke-dasharray:145; stroke-dashoffset:145; animation:draw .7s var(--ease-out) .15s forwards; opacity:.35;}
.verdict-icon svg path{stroke-dasharray:40; stroke-dashoffset:40; animation:draw .5s var(--ease-out) .55s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.verdict.ok .verdict-icon{box-shadow:0 0 0 0 rgba(31,138,76,.4); animation:okPulse 1.6s .9s ease-out 1;}
@keyframes okPulse{0%{box-shadow:0 0 0 0 rgba(31,138,76,.45);} 100%{box-shadow:0 0 0 18px rgba(31,138,76,0);}}
.reasons li{animation:tileIn .5s var(--ease-out) both; animation-delay:calc(.5s + var(--i,0) * 110ms);}
.preview{border-radius:24px;}
.ba-knob{display:flex; align-items:center; justify-content:center;}
.ba-knob svg{width:18px; height:18px; stroke:var(--navy); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.ba-handle{background:var(--gold); box-shadow:0 0 10px rgba(255,181,0,.8);}

/* ---------- adjust ---------- */
#adjust-img{transition:opacity .25s var(--ease-out), filter .25s;}
#adjust-img.fade{opacity:.35; filter:blur(3px);}
input[type=range]{accent-color:var(--gold);}

/* ---------- download burst ---------- */
.burst{position:fixed; width:0; height:0; z-index:200; pointer-events:none;}
.burst i{position:absolute; width:8px; height:8px; border-radius:2px; background:var(--c); animation:burst 1s var(--ease-out) forwards;}
@keyframes burst{to{transform:translate(var(--dx), var(--dy)) rotate(260deg); opacity:0;}}

@media (max-width:640px){
  .flag-grid{grid-template-columns:repeat(3, 1fr); gap:10px;}
  .flag-tile{padding:10px; border-radius:16px;}
  .ft-name{font-size:13px;} .ft-count{display:none;}
  .processing{gap:24px;}
  .scan-frame{width:180px;}
}
@media (prefers-reduced-motion: reduce){
  .step-panel,.flag-tile,.prog-card,.demo-card,.reasons li,.verdict{animation:none !important;}
  .scan-line{animation:none; top:40%;}
  .verdict-icon svg circle,.verdict-icon svg path{animation:none; stroke-dashoffset:0;}
}

/* ---------- manual crop editor ---------- */
.adjust-preview{position:relative; min-height:560px;}
.crop-editor{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; background:#1a0f0a; border-radius:inherit; overflow:hidden; animation:tileIn .35s var(--ease-out);}
.ce-stage{position:relative; flex:1; min-height:360px; overflow:hidden; touch-action:none; background:repeating-conic-gradient(#221510 0 25%, #1a0f0a 0 50%) 0 0/22px 22px;}
.ce-stage img{position:absolute; user-select:none; pointer-events:none;}
.ce-box{position:absolute; cursor:move; box-shadow:0 0 0 9999px rgba(18,10,7,.55); outline:2px solid var(--gold); touch-action:none;}
.ce-box svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.ce-box svg .g-line{stroke:#FFB500; stroke-width:.6; stroke-dasharray:2 1.5; vector-effect:non-scaling-stroke;}
.ce-box svg .g-mid{stroke:rgba(255,255,255,.35); stroke-width:.3; stroke-dasharray:1.5 1.5;}
.ce-box svg .g-oval{fill:none; stroke:rgba(255,255,255,.55); stroke-width:.4; stroke-dasharray:1.5 1;}
.ce-box svg .g-band{fill:rgba(61,220,132,.16); stroke:none;}
.ce-box svg text{fill:#FFD27A; font:700 3px var(--font-mono); letter-spacing:.05em;}
.ce-box > span[data-h]{position:absolute; width:18px; height:18px; background:#fff; border:3px solid var(--gold); border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.4);}
.ce-box > [data-h=tl]{left:-10px; top:-10px; cursor:nwse-resize;} .ce-box > [data-h=br]{right:-10px; bottom:-10px; cursor:nwse-resize;}
.ce-box > [data-h=tr]{right:-10px; top:-10px; cursor:nesw-resize;} .ce-box > [data-h=bl]{left:-10px; bottom:-10px; cursor:nesw-resize;}
.ce-bar{padding:12px 14px; background:#fff; display:grid; gap:8px;}
.ce-feedback{display:flex; flex-wrap:wrap; gap:8px;}
.ce-feedback span{font-weight:700; font-size:13px; padding:5px 10px; border-radius:999px;}
.ce-feedback span small{font-weight:500; opacity:.8;}
.ce-feedback .ok{background:var(--ok-soft); color:var(--ok);} .ce-feedback .bad{background:var(--warn-soft); color:var(--warn);}
.ce-tip{font-size:12.5px; color:var(--mut); margin:0;}
.ce-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}
#adjust-controls.dim{opacity:.4; pointer-events:none; transition:opacity .3s;}
.fix-crop{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; border-radius:14px; background:var(--gold-soft); border:1px solid var(--gold-line); font-size:14px; color:var(--navy); animation:tileIn .5s var(--ease-out) .7s both;}
#crop-open{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px;}
.ce-labels{position:absolute; inset:0; pointer-events:none;}
.ce-labels span{position:absolute; right:6px; transform:translateY(-120%); font:700 10.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:#1a0f0a; background:#FFB500; padding:3px 6px; border-radius:5px;}
.ce-labels span.eye{background:#3ddc84; transform:translateY(-50%);}
/* crop editor as a full modal: more room, never clipped */
.crop-editor{position:fixed; inset:0; z-index:120; background:rgba(18,10,7,.72); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; border-radius:0;}
.crop-editor > .ce-stage, .crop-editor > .ce-bar{width:min(920px, 100%);}
.crop-editor > .ce-stage{flex:none; height:min(72vh, 720px); border-radius:22px 22px 0 0;}
.crop-editor > .ce-bar{border-radius:0 0 22px 22px;}
.crop-editor{flex-direction:column;}
.ce-labels span{right:auto; left:calc(100% + 10px); white-space:nowrap; transform:translateY(-50%);}
.ce-labels span.eye{transform:translateY(-50%);}
@media (max-width:640px){
  .crop-editor{padding:0; background:#1a0f0a;}
  .crop-editor > .ce-stage{height:auto; flex:1; border-radius:0;}
  .crop-editor > .ce-bar{border-radius:0;}
  .ce-labels span{left:auto; right:4px; font-size:9.5px;}
}