.img-page,.lightbox,.qr-modal{--ip-ink:#101426;--ip-muted:#6f7488;--ip-line:#e7eaf5;--ip-blue:#2563eb;--ip-indigo:#4f46e5;--ip-violet:#6a3be8;--ip-pink:#ec008c;--ip-grad:linear-gradient(90deg, #2643e6 0%, #8a2be2 55%, #ec008c 100%);--ip-pad:clamp(12px, 4vw, 32px);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.img-page,.img-page *,.lightbox,.lightbox *,.qr-modal,.qr-modal *{box-sizing:border-box}.img-page{max-width:960px;padding:clamp(12px, 3vw, 24px) var(--ip-pad) calc(clamp(18px, 3vw, 28px) + env(safe-area-inset-bottom));width:100%;color:var(--ip-ink);flex-direction:column;gap:clamp(10px,1.6vw,12px);margin:0 auto;display:flex}.img-page button{font:inherit;cursor:pointer;touch-action:manipulation}.img-page img,.img-page svg,.img-page canvas,.lightbox img,.qr-modal img,.qr-modal canvas{max-width:100%;display:block}.img-page :focus-visible,.lightbox :focus-visible,.qr-modal :focus-visible{outline:2px solid var(--ip-indigo);outline-offset:2px;border-radius:6px}.img-stage{background:#0d1128;border-radius:16px;justify-content:center;align-items:center;min-width:0;padding:clamp(8px,2vw,18px);display:flex;position:relative;overflow:hidden}.img-stage img{object-fit:contain;cursor:zoom-in;border-radius:10px;width:100%;max-height:clamp(240px,62vh,720px)}.img-stage:fullscreen{background:#0d1128;border-radius:0;padding:24px}.img-stage:fullscreen img{width:auto;max-height:100vh}.stage-badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;letter-spacing:.3px;background:#0d11288c;border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:10px;font-weight:800;display:inline-flex;position:absolute}.stage-badge.l{top:clamp(14px,2.5vw,26px);left:clamp(14px,2.5vw,26px)}.stage-badge.r{background:#6b3bf6d9;top:clamp(14px,2.5vw,26px);right:clamp(14px,2.5vw,26px)}.pv-actions{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pv-actions.two{grid-template-columns:repeat(2,1fr)}.pv-btn{color:#171b34;background:#fff;border:1px solid #e3e6f3;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-width:0;height:clamp(42px,5.5vw,46px);padding:0 clamp(6px,1.6vw,14px);font-size:clamp(11px,1.7vw,12.5px);font-weight:700;transition:all .15s;display:flex}.pv-btn svg{flex:none}.pv-btn:hover{background:#f6f7fd;border-color:#c9cdea;transform:translateY(-1px)}.pv-btn.danger{color:#e11d48}.pv-btn.danger:hover{background:#fff1f2;border-color:#fecdd3}.pv-btn:disabled{opacity:.55;cursor:wait}.img-grid{grid-template-columns:1fr 1.15fr;align-items:stretch;gap:clamp(10px,1.6vw,12px);display:grid}.panel{background:#fff;border:1px solid #eceef8;border-radius:14px;flex-direction:column;gap:12px;min-width:0;padding:clamp(12px,2.4vw,18px);display:flex}.panel h3,.history h3{color:#9aa0b5;text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:11px;font-weight:800}.share-flex{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.qr-box{background:0 0;border:none;border-radius:10px;flex:none;padding:0;position:relative}.qr-render{box-sizing:border-box;background:#fff;border:1px solid #edeff9;border-radius:8px;width:clamp(88px,11vw,96px);height:clamp(88px,11vw,96px);transition:transform .2s,box-shadow .2s;display:block;overflow:hidden}.qr-render img,.qr-render canvas{width:100%;height:100%;image-rendering:pixelated}.qr-box:hover .qr-render,.qr-box:focus-visible .qr-render{transform:scale(1.06);box-shadow:0 10px 24px #1e28782e}.share-circles{flex-wrap:wrap;gap:8px;display:flex}.sh{color:#fff;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;width:clamp(38px,5vw,40px);height:clamp(38px,5vw,40px);transition:all .15s;display:flex}.sh svg{width:clamp(14px,2vw,16px);height:auto}.sh:hover{transform:translateY(-2px)scale(1.06)}.sh.tw{background:#1da1f2}.sh.wa{background:#25d366}.sh.tg{background:#229ed9}.sh.fb{background:#1877f2}.field{flex-direction:column;gap:7px;min-width:0;display:flex}.field>label{color:#171b34;font-size:11.5px;font-weight:700}.control{background:#fff;border:1px solid #e3e6f3;border-radius:10px;align-items:center;gap:8px;height:clamp(44px,6vw,48px);padding:0 8px 0 14px;transition:border-color .15s,box-shadow .15s;display:flex}.control:focus-within{border-color:#8a2be2;box-shadow:0 0 0 4px #8a2be01f}.control input{color:var(--ip-ink);background:0 0;border:none;outline:none;flex:1;min-width:0;font:600 clamp(12px,1.7vw,13px) Inter,system-ui,sans-serif}.copy-btn{background:var(--ip-grad);color:#fff;border:none;border-radius:8px;flex:none;align-items:center;gap:7px;height:clamp(32px,4.5vw,36px);padding:0 clamp(10px,1.6vw,14px);font-size:11.5px;font-weight:800;transition:all .2s;display:inline-flex}.copy-btn:hover{filter:brightness(1.08)}.format-tabs{background:#eef0fa;border-radius:10px;grid-template-columns:repeat(4,1fr);padding:3px;display:grid;position:relative}.format-tabs button{z-index:1;color:#565b74;white-space:nowrap;background:0 0;border:none;border-radius:8px;padding:clamp(6px,1vw,8px) 0;font-size:clamp(10px,1.4vw,11px);font-weight:800;transition:color .2s;position:relative}.format-tabs button.on{color:#fff}.fmt-pill{background:linear-gradient(90deg,#2643e6,#8a2be2);border-radius:8px;width:calc(25% - 1.5px);height:calc(100% - 6px);transition:transform .3s cubic-bezier(.2,.8,.25,1);position:absolute;top:3px;left:3px}.format-tabs.f1 .fmt-pill{transform:translate(100%)}.format-tabs.f2 .fmt-pill{transform:translate(200%)}.format-tabs.f3 .fmt-pill{transform:translate(300%)}.snippet{color:#c9e6ff;word-break:break-all;cursor:copy;background:#0d1128;border-radius:10px;max-height:70px;margin-top:8px;padding:10px 12px;font:600 clamp(9.5px,1.4vw,10.5px)/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto}.snippet::-webkit-scrollbar{width:6px;height:6px}.snippet::-webkit-scrollbar-thumb{background:#3a4067;border-radius:3px}.meta-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.meta{text-align:center;background:#fff;border:1px solid #edeff9;border-radius:10px;min-width:0;padding:clamp(8px,1.4vw,10px) 6px}.meta b{letter-spacing:-.2px;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10.5px,1.6vw,12.5px);display:block;overflow:hidden}.meta span{color:#9aa0b5;text-transform:uppercase;letter-spacing:.4px;font-size:clamp(8.5px,1.2vw,9.5px);font-weight:700}.history h3{margin-bottom:8px}.thumbs{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:10px;padding-bottom:6px;display:flex;overflow-x:auto}.thumbs::-webkit-scrollbar{height:6px}.thumbs::-webkit-scrollbar-thumb{background:#d9dcee;border-radius:3px}.thumb{scroll-snap-align:start;text-align:left;background:#fff;border:1px solid #eceef8;border-radius:12px;flex:none;width:clamp(108px,16vw,132px);padding:0;transition:all .15s;overflow:hidden}.thumb:hover{transform:translateY(-2px);box-shadow:0 10px 24px #1e28781f}.thumb img{object-fit:cover;width:100%;height:clamp(64px,9vw,78px)}.thumb .t-name{text-overflow:ellipsis;white-space:nowrap;padding:7px 9px;font-size:10.5px;font-weight:700;display:block;overflow:hidden}.thumb.active{border-color:#8a2be2;box-shadow:0 0 0 3px #8a2be026}.next-row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px;display:flex}.big-btn{border:none;border-radius:999px;align-items:center;gap:10px;height:clamp(44px,6vw,50px);padding:0 clamp(16px,3vw,22px);font-size:clamp(12px,1.9vw,13.5px);font-weight:800;transition:all .2s;display:inline-flex}.big-btn.grad{background:var(--ip-grad);color:#fff;box-shadow:0 10px 26px #5a32e64d}.big-btn.grad:hover{filter:brightness(1.07);transform:translateY(-2px)}.big-btn.ghost{color:#171b34;background:#fff;border:1px solid #e3e6f3}.big-btn.ghost:hover{background:#f6f7fd;border-color:#c9cdea}.lightbox,.qr-modal{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1080;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:#0d1128e0;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.lightbox.show,.qr-modal.show{display:flex}.lightbox img{border-radius:14px;max-width:min(92vw,900px);max-height:84vh;box-shadow:0 30px 80px #00000080}.ovl-close{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));color:#171b34;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:absolute;box-shadow:0 8px 20px #00000059}.qr-modal{z-index:1085;padding:20px}.qr-card{text-align:center;background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:10px;max-width:92vw;padding:clamp(16px,4vw,24px);animation:.3s cubic-bezier(.3,1.4,.4,1) both image-detail-pop;display:flex;box-shadow:0 30px 80px #00000080}.qr-card .qr-render{border-radius:10px;width:clamp(200px,58vw,288px);height:clamp(200px,58vw,288px)}.qr-card b{word-break:break-all;max-width:280px;font-size:12px}.qr-card>span:last-child{color:var(--ip-muted);font-size:10.5px;font-weight:600}@keyframes image-detail-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}html.image-overlay-open{overflow:hidden}@media (width>=1400px){.img-stage img{max-height:70vh}.thumb{width:150px}}@media (width<=820px){:is(html:has(.img-page),body:has(.img-page)){max-width:100%;overflow-x:clip}.img-page{width:100%;min-width:0;max-width:100%;margin-left:0;margin-right:0}.img-page>*{min-width:0;max-width:100%}.img-stage,.pv-actions,.img-grid,.panel,.meta-grid,.history{width:100%;min-width:0;max-width:100%}.img-stage img{object-fit:contain;width:100%;min-width:0;max-width:100%;height:auto}.img-grid{grid-template-columns:minmax(0,1fr)}.control{width:100%;min-width:0;max-width:100%;overflow:hidden}.control input{flex:1 1 0;width:1px;min-width:0}.format-tabs,.snippet{width:100%;min-width:0;max-width:100%}.format-tabs button{text-overflow:ellipsis;min-width:0;overflow:hidden}.img-page .meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.meta{min-width:0}}@media (width<=560px){.meta-grid{grid-template-columns:repeat(2,1fr)}.img-stage img{max-height:48vh}.pv-btn .pv-lbl{display:none}.qr-render{width:88px;height:88px}}@media (width<=420px){.thumb{width:112px}.share-flex{align-items:flex-start}.img-page .ad{gap:10px;padding:10px 14px}}@media (width<=320px){.copy-btn span{display:none}.copy-btn{padding:0 12px}.qr-render{width:80px;height:80px}.sh{width:38px;height:38px}.qr-card .qr-render{width:min(200px,70vw);height:min(200px,70vw)}}@media (width<=280px){.pv-actions,.pv-actions.two,.meta-grid{grid-template-columns:1fr 1fr}}@media (height<=520px) and (orientation:landscape){.img-page{gap:8px}.img-stage img{max-height:52vh}.img-grid{grid-template-columns:1fr 1fr}.qr-card{text-align:left;flex-direction:row}.qr-card .qr-render{width:min(180px,40vh);height:min(180px,40vh)}.img-page .ad{min-height:44px}}@media (pointer:coarse){.control input{font-size:16px}.sh{width:44px;height:44px}.pv-btn{height:48px}.thumb img{height:84px}.qr-render{width:96px;height:96px}}@media (prefers-reduced-motion:reduce){.img-page *,.lightbox *,.qr-modal *{scroll-behavior:auto;transition:none;animation:none}}@media (hover:none){.big-btn.grad:hover{filter:none;transform:none}.pv-btn:hover,.thumb:hover{transform:none}}