:root{color-scheme:dark;--ink:#f2f3eb;--muted:#a9b5a9;--accent:#d6e87e;--line:#39463e}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#31473a 0,#1b2720 42%,#111813 100%);color:var(--ink);font-family:'Segoe UI',sans-serif}.app{max-width:1360px;margin:auto;padding:22px 28px 30px}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.toolbar::before{content:'◈';color:var(--accent);font-size:25px;margin-right:5px}.toolbar select{min-width:76px;background:#26372c;color:var(--ink);border:1px solid #53685a;border-radius:8px;padding:9px 12px;font:600 14px 'Segoe UI',sans-serif;cursor:pointer}.photo-wrap{position:relative;height:min(62vh,700px);min-height:280px;background:#0b110d;border:1px solid #435248;border-radius:14px;touch-action:pan-y;overflow:hidden;box-shadow:0 22px 60px #0006}.photo-wrap img{display:block;width:100%;height:100%;object-fit:contain}.message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:13px 18px;border-radius:8px;background:#1b251feb;text-align:center}.message[hidden]{display:none}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,145px));grid-template-areas:'. forward .' 'left around right' '. back .';justify-content:center;gap:7px;margin:18px auto 0}.controls button{min-height:49px;border:1px solid var(--line);border-radius:9px;background:#26352a;color:var(--ink);font:600 13px 'Segoe UI',sans-serif;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}.controls button span{font-size:20px;vertical-align:middle;margin-right:6px;color:var(--accent)}.controls button:hover:not(:disabled),.controls button:focus-visible{background:#394d3b;border-color:var(--accent)}.controls button:active:not(:disabled){transform:scale(.97)}.controls button:disabled{opacity:.32;cursor:default}.forward{grid-area:forward}.back{grid-area:back}.left{grid-area:left}.right{grid-area:right}.around{grid-area:around}@media(max-width:500px){.app{padding:12px}.photo-wrap{height:55vh;border-radius:10px}.controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}.controls button{font-size:12px;min-height:55px}.controls button span{display:block;margin:0;font-size:20px}}
