[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:#f5f7f1;color:#213d34;font:16px/1.65 system-ui,'Malgun Gothic',sans-serif}header,main,footer{max-width:1280px;margin:auto;padding:22px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #ccd8ca}nav,.actions,.filters,.pager{display:flex;gap:10px;align-items:center;flex-wrap:wrap}a{color:#276752}button,.button{display:inline-block;padding:10px 16px;background:#ffea87;color:#2e371f;border:1px solid #c9b255;border-radius:7px;font:inherit;cursor:pointer;text-decoration:none}button:hover,.button:hover{background:#ffdf51}button:disabled{opacity:.5;cursor:default}h1{font-size:32px}h2{font-size:22px}input,select,textarea{display:block;width:100%;padding:10px;background:white;color:#213d34;border:1px solid #a5b9aa;border-radius:5px;font:inherit}input[type=checkbox]{display:inline-block;width:auto}label{display:block;margin:10px 0}.panel{background:white;padding:24px;border:1px solid #d1ddcf;border-radius:10px;margin:18px 0}.notice{padding:14px;background:#fff4c9;border-left:4px solid #d8b844;white-space:pre-wrap}.muted,small{color:#627568}#status{white-space:pre-line;min-height:24px}#status.error{color:#a42d25}#loginForm{display:flex;gap:14px;align-items:end;flex-wrap:wrap}#loginForm label{flex:1;min-width:180px}.filters label{flex:1;min-width:130px}.collections{display:flex;gap:9px;flex-wrap:wrap}.collections button[aria-pressed=true]{background:#234d3b;color:white}.image-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}.image-card{background:white;border:1px solid #cdd8ca;border-radius:9px;padding:10px;min-width:0}.image-card>button:first-child{border:0;background:transparent;width:100%;padding:0}.image-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:#eeeee8}.image-card strong,.image-card small{display:block;overflow-wrap:anywhere}.image-card .actions{margin-top:9px}.image-card .actions button{font-size:13px;padding:7px 10px}.pager{justify-content:center;margin:22px 0}.profile-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px}.avatar,.placeholder{width:160px;height:200px;background:#eff1e9;object-fit:contain;border-radius:8px}.placeholder{display:grid;place-items:center;font-size:70px}.order{padding:15px;border-bottom:1px solid #d5dfd1;overflow-wrap:anywhere}.order code{font-size:12px}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}dialog{width:min(94vw,900px);max-height:94vh;overflow:auto;padding:24px;background:#fafbf6;color:#213d34;border:1px solid #809b85;border-radius:12px}dialog::backdrop{background:#122b24c9}.viewer-image{display:block;width:auto;max-width:100%;max-height:65vh;object-fit:contain;margin:15px auto}.viewer-head{display:flex;justify-content:space-between;align-items:center;gap:10px}:focus-visible{outline:3px solid #23865f;outline-offset:3px}@media(max-width:950px){.image-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.split{grid-template-columns:1fr}}@media(max-width:650px){header{flex-direction:column;align-items:flex-start}header,main,footer{padding:14px}h1{font-size:25px}.panel{padding:16px}.image-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-layout{grid-template-columns:1fr}.image-card strong{font-size:14px}}

/* All motion fits inside reserved margins: no crop, scaling, mirror or distortion. */
.preview-stage{position:relative;display:block;padding:12px;background:#eeeee8;overflow:hidden;border-radius:6px}
.image-card .preview-stage img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;animation:preview-drift 18s ease-in-out infinite}
.preview-stamp{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#234d3be8;color:#fff;font-size:10px;padding:1px 7px;border-radius:3px;pointer-events:none}
.viewer-stage{max-width:408px;margin:14px auto;padding:12px}
.viewer-image{width:100%;height:auto;max-height:58vh;margin:0;object-fit:contain;animation:preview-drift 18s ease-in-out infinite}
.viewer-head{flex-wrap:wrap}.viewer-head h2{flex:1;min-width:180px}
.preview-paused .preview-stage img{animation-play-state:paused}
@keyframes preview-drift{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.preview-paused .preview-stage img{animation:none!important}}