/* Shared motion and glass surfaces. Geometry never depends on submenu content. */
:root{--surface-ease:cubic-bezier(.2,.8,.2,1)}
.surface-locked{position:fixed;width:100%;overflow:hidden;overscroll-behavior:none}
dialog::backdrop{background:#05070b9c;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.sheet{width:560px;height:min(760px,88dvh);max-height:88dvh;max-width:calc(100vw - 28px);margin:auto;border-radius:26px;background:linear-gradient(145deg,#1a1d23ee,#101216f5);box-shadow:0 25px 100px #0007;backdrop-filter:blur(24px);overflow:hidden}
.sheet[open]{display:flex;animation:surface-in .28s var(--surface-ease)}
.sheet-top{height:68px;min-height:68px;justify-content:flex-start;gap:10px;padding:10px 18px}
#sheet-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet #sheet-content{flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px 24px}
#settings-back,#users-back{display:none}
.settings-menu>button{min-height:56px}
.sheet .primary,.sheet .secondary{min-height:44px}
.sheet :focus-visible{outline-offset:2px}
.work-tile{position:relative;break-inside:avoid;margin-bottom:20px}
.work-tile .work{margin-bottom:0}
.work-menu{position:absolute;top:10px;right:10px;z-index:2;background:#080b10b0;backdrop-filter:blur(14px);border:1px solid #ffffff1f;font-size:23px;letter-spacing:2px;opacity:.65}
.work-tile:hover .work-menu,.work-tile:focus-within .work-menu{opacity:1}
.gallery-add{margin-bottom:20px;aspect-ratio:1;min-height:0}
.sheet #art-editor{gap:12px}
#art-editor .form-message:empty{display:none}
.photo-frame{position:relative;isolation:isolate;width:min(100%,320px,34dvh);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:18px;background:#080a0d;border:1px solid #ffffff1a}
.photo-frame img{position:absolute;inset:0;width:100%;height:100%}
.photo-fill{object-fit:cover;filter:blur(30px);transform:scale(1.2);opacity:.72;z-index:-1}
.photo-main{object-fit:contain;z-index:1}
.photo-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px;background:#111319}
.photo-frame[aria-busy=true] img{visibility:hidden}
.category-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-12px}
.category-tools .text-button{font-size:11px;padding:8px 0;min-height:40px}
#category-inline{display:grid;gap:14px;padding:14px;border:1px solid #ffffff15;border-radius:14px;background:#ffffff03}
.queue-controls{display:flex;align-items:center;justify-content:center;gap:18px;font-size:11px;color:var(--muted);margin-top:-12px}
.art-dialog{width:min(1080px,94vw);height:min(850px,92dvh);max-height:92dvh;max-width:94vw;margin:auto;border-radius:28px;border:1px solid #ffffff22;overflow:hidden;background:linear-gradient(150deg,#1a1e25c9,#101216db);backdrop-filter:blur(28px);box-shadow:0 30px 120px #0009}
.lightbox{height:100%;display:flex;flex-direction:column;position:relative;padding:20px;gap:16px;min-height:0}
.viewer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;min-height:52px;padding:0 4px}
.viewer-header>div{min-width:0}.viewer-header h2{font-size:18px;line-height:1.25;overflow-wrap:anywhere;letter-spacing:-.4px;max-height:3.8em;overflow:hidden}
.viewer-header p{font-size:11px;line-height:1.5;margin-top:5px;color:#b6b8c2;overflow-wrap:anywhere}
.viewer-header button{flex-shrink:0}
.viewer-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:16px;overflow:hidden}
.image-stage{height:100%;min-height:0;min-width:0;width:100%;display:flex;align-items:center;justify-content:center;background:#04060766;border-radius:18px;overflow:hidden;touch-action:pan-x pinch-zoom;user-select:none}
.image-stage>img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;flex-shrink:1;min-width:0;min-height:0;border-radius:5px}
.viewer-actions{align-self:end;display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:5px}
.viewer-actions .icon-button{width:48px;height:48px;border:1px solid #ffffff1a;background:#ffffff08;backdrop-filter:blur(14px);position:relative;transition:background .2s,box-shadow .2s}
.viewer-actions .icon-button:hover{background:#ffffff15;box-shadow:0 0 20px #ffffff0b;transform:none}
.viewer-actions small{position:absolute;bottom:-10px;font-size:10px;color:#b5b9c4}
.viewer-actions #art-save{margin-bottom:10px}
#art-save.saved{color:#ff668c}#art-save.saved svg{fill:#ff668c}
.viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.gold-button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;min-height:48px;border-radius:14px;color:#342204;font-size:12px;font-weight:700;background:linear-gradient(120deg,#b88b2f,#ffe7a0 38%,#d7ac4b 65%,#fff0b5);border:1px solid #ffdf82;box-shadow:0 0 22px #efc65120;transition:box-shadow .25s,filter .25s}
.gold-button:before{content:'';position:absolute;inset:-100% -50%;background:linear-gradient(110deg,transparent 40%,#ffffff99 50%,transparent 60%);transform:translateX(-80%);animation:gold-light 5s ease-in-out infinite;pointer-events:none;z-index:-1}
.gold-button:hover{box-shadow:0 0 28px #efc65165;filter:brightness(1.15);transform:none}.gold-button:active{filter:brightness(1.3)}
.gold-button svg{width:17px;height:17px}
.viewer-paging{display:flex;gap:5px;align-items:center;color:#bbb;font-size:10px;white-space:nowrap}
.viewer-paging button{width:34px;height:42px;font-size:20px}
.swipe-guide{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid #ffffff26;background:#1b202ee8;backdrop-filter:blur(18px);border-radius:17px;box-shadow:0 8px 30px #0005;font-size:12px;white-space:nowrap;z-index:3}
.swipe-guide>span:first-child{font-size:28px;color:var(--cyan);animation:swipe-hint 2s ease-in-out infinite}.swipe-guide small{font-size:10px;color:#aeb2be}.swipe-guide button{color:#e4e5eb;padding:10px 3px;font-size:10px}
.comment-list{display:grid;gap:16px;margin-bottom:28px}.comment-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:16px}.comment-row>div{min-width:0}.comment-row strong{font-size:12px}.comment-row p{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.comment-row time{font-size:10px;color:var(--muted)}.comment-row button{align-self:start;font-size:20px}
@keyframes surface-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes gold-light{0%,65%{transform:translateX(-80%)}100%{transform:translateX(80%)}}
@keyframes swipe-hint{0%,100%{transform:translateY(3px);opacity:.6}50%{transform:translateY(-4px);opacity:1}}
@media(max-width:600px){.sheet{margin:auto;height:88dvh}.sheet #sheet-content{padding:18px 20px}.lightbox{padding:14px;gap:12px}.viewer-header h2{font-size:15px}.viewer-header p{font-size:10px}.viewer-body{grid-template-columns:minmax(0,1fr) 44px;gap:10px}.viewer-actions{gap:14px}.viewer-actions .icon-button{width:40px;height:40px}.viewer-actions svg{width:20px;height:20px}.viewer-footer .gold-button{padding:13px 14px;font-size:11px;gap:8px}.viewer-paging{gap:0}.viewer-paging button{width:28px}.swipe-guide{bottom:80px;gap:8px;padding:10px 12px}.work-tile,.gallery-add{margin-bottom:12px}.art-dialog{height:92dvh;border-radius:24px}.category-tools{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.gold-button:before,.swipe-guide>span:first-child{animation:none}.sheet[open]{animation:none}}