/* ============================================================
   DESKTOP LAYOUT
============================================================ */


.user-shell{display:grid;grid-template-columns:170px minmax(0,1fr);height:100vh;overflow:hidden}.sidebar{background:#fff;border-right:1px solid var(--line);padding:22px 12px}.sidebar .brand{padding:0 10px 24px}.sidebtn{width:100%;border:0;background:transparent;text-align:left;padding:10px;border-radius:9px;margin:2px 0}.sidebtn.active{background:var(--soft);font-weight:650}.user-main{min-width:0;overflow:hidden}.user-head{height:76px;padding:15px 22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);display:flex;justify-content:space-between;align-items:center}.album-home{height:calc(100vh - 76px);overflow:auto;padding:22px}.wall-stage{height:calc(100vh - 76px);display:flex;align-items:center;overflow:hidden;perspective:950px;position:relative;background:linear-gradient(180deg,#fafbfc,#f4f5f7)}.viewport{width:100%;overflow-x:auto;overflow-y:hidden;padding:28px 24px 42px;cursor:grab;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}.viewport::-webkit-scrollbar{display:none}.viewport.drag{cursor:grabbing}.wall{display:grid;grid-template-rows:repeat(var(--wall-desktop-rows,3),calc((100vh - 146px)/var(--wall-desktop-rows,3)));grid-auto-columns:calc((100vh - 146px)/var(--wall-desktop-rows,3));grid-auto-flow:column;gap:var(--wall-desktop-gap,10px);width:max-content;padding-right:280px;transform-style:preserve-3d}.tile{border:0;padding:0;border-radius:13px;overflow:hidden;background:#e2e5e9;box-shadow:0 4px 12px rgba(0,0,0,.08);position:relative;transform-style:preserve-3d}.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.video-mark{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.58);color:#fff;border-radius:999px;padding:4px 7px;font-size:10px}.viewer{position:fixed;inset:0;z-index:80;background:rgba(10,12,15,.58);padding:0;display:none;align-items:center;justify-content:center}
.viewer.open{display:flex}.viewer>div,.viewer>.viewer-media{pointer-events:auto}
.viewer::before{content:"";position:absolute;inset:0}
.viewer-media{height:min(78vh,calc(100vh - 170px));width:100%;min-height:0;border-radius:12px;overflow:hidden;background:#111;display:flex;align-items:center;justify-content:center;position:relative;touch-action:none}
.viewer-media img,.viewer-media video{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transition:transform .12s;transform-origin:center center;user-select:none;-webkit-user-drag:none}
.viewer .viewer-card{position:relative;z-index:2;width:80vw;height:80vh;max-width:1500px;background:#fff;border-radius:16px;padding:14px;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.viewer.fullscreen-view .viewer-card{width:96vw;height:96vh;max-width:none;background:#0d0f12;color:#fff}
.viewer.fullscreen-view .sub,.viewer.fullscreen-view .status{color:#c8cbd0}.viewer.fullscreen-view .btn{background:#181b20;color:#fff;border-color:#353941}
.mobilebar{display:none}

.menu-overlay,.mobile-close{display:none}

/* UI10 UNIFIED MEDIA VIEWER */
.viewer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.viewer-title{min-width:0}.viewer-title b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-meta{margin-top:3px;gap:8px;flex-wrap:wrap}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}.viewer-photo-tools,.viewer-actions{gap:6px}.viewer-hint{font-size:11px;color:var(--muted);text-align:center;margin-top:7px}.viewer.video-view .viewer-media video{width:100%;height:100%;max-width:100%;max-height:100%}.viewer .hidden{display:none!important}


/* ============================================================
   UI11 USER UX FINAL STATES
============================================================ */
.album-state{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none}
.album-state.hidden{display:none}
.album-state.bad{color:var(--bad)}
.viewer-loading,.viewer-error{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px}
.spinner{width:24px;height:24px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:pp-spin .8s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
.tile-error{position:absolute;left:6px;right:6px;bottom:6px;text-align:center;background:rgba(255,255,255,.88);padding:3px;border-radius:5px}
.viewer-media{touch-action:none}
.viewer.video-view .viewer-media{touch-action:pan-y}