.viewer-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.viewer-stage-card,.viewer-sidebar{background:var(--cb-surface);border:1px solid var(--cb-line);border-radius:18px;box-shadow:var(--cb-shadow)}.viewer-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--cb-line)}.viewer-toolbar button,.viewer-toolbar select{min-height:40px;border:1px solid var(--cb-line);background:var(--cb-surface-2);color:var(--cb-text);border-radius:10px;padding:8px 11px;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.viewer-toolbar button:hover{border-color:var(--cb-primary);color:var(--cb-primary)}.viewer-toolbar button:disabled{opacity:.45;cursor:not-allowed}.viewer-toolbar .viewer-spacer{flex:1}.viewer-stage{min-height:560px;position:relative;display:grid;place-items:center;overflow:hidden;background:repeating-conic-gradient(color-mix(in srgb,var(--cb-muted) 10%,transparent) 0 25%,transparent 0 50%) 50%/22px 22px;border-radius:0 0 18px 18px;touch-action:none}.viewer-stage.dark-checker{background:#151922}.viewer-stage.light-checker{background:#fff}.viewer-transform{transform-origin:center;will-change:transform;transition:transform .12s ease}.viewer-transform img,.viewer-transform canvas{display:block;max-width:min(100%,1100px);max-height:72vh;object-fit:contain;user-select:none;-webkit-user-drag:none}.viewer-empty{text-align:center;padding:48px 24px;max-width:620px}.viewer-empty-icon{width:86px;height:86px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;font-size:38px;background:linear-gradient(135deg,color-mix(in srgb,var(--cb-primary) 16%,var(--cb-surface)),color-mix(in srgb,var(--cb-accent) 16%,var(--cb-surface)));border:1px solid color-mix(in srgb,var(--cb-primary) 24%,var(--cb-line))}.viewer-dropzone{border:2px dashed color-mix(in srgb,var(--cb-primary) 38%,var(--cb-line));border-radius:16px;padding:28px 18px;margin-top:20px;cursor:pointer;background:color-mix(in srgb,var(--cb-primary) 5%,var(--cb-surface))}.viewer-dropzone.dragover{border-color:var(--cb-primary);background:color-mix(in srgb,var(--cb-primary) 11%,var(--cb-surface))}.viewer-sidebar{padding:18px;position:sticky;top:84px}.viewer-sidebar h2{font-size:18px;margin:0 0 14px}.viewer-info{display:grid;gap:0;border:1px solid var(--cb-line);border-radius:13px;overflow:hidden}.viewer-info-row{display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px;padding:10px 11px;border-bottom:1px solid var(--cb-line);font-size:12px}.viewer-info-row:last-child{border-bottom:0}.viewer-info-row span{color:var(--cb-muted)}.viewer-info-row strong{overflow-wrap:anywhere}.viewer-actions{display:grid;gap:9px;margin-top:16px}.viewer-actions .cb-button{width:100%;justify-content:center}.viewer-note{font-size:12px;line-height:1.55;color:var(--cb-muted);padding:12px;border-radius:12px;background:var(--cb-surface-2);margin-top:14px}.viewer-error{max-width:660px;text-align:center;padding:40px 24px}.viewer-error h2{margin-bottom:8px}.viewer-error code{display:inline-block;margin:8px 0;padding:4px 7px;border-radius:7px;background:var(--cb-surface-2)}.viewer-filmstrip{display:flex;gap:9px;overflow:auto;padding:10px;border-top:1px solid var(--cb-line)}.viewer-thumb{flex:0 0 72px;height:60px;border:2px solid transparent;border-radius:9px;overflow:hidden;padding:0;background:var(--cb-surface-2);cursor:pointer}.viewer-thumb.active{border-color:var(--cb-primary)}.viewer-thumb img{width:100%;height:100%;object-fit:cover}.viewer-status{font-size:12px;color:var(--cb-muted);font-weight:700}.viewer-seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.viewer-format-list{display:flex;flex-wrap:wrap;gap:8px}.viewer-format-list span{padding:7px 10px;border-radius:999px;background:var(--cb-surface-2);border:1px solid var(--cb-line);font-size:12px;font-weight:750}.viewer-hidden{display:none!important}@media(max-width:980px){.viewer-shell{grid-template-columns:1fr}.viewer-sidebar{position:static}.viewer-stage{min-height:480px}.viewer-seo-grid{grid-template-columns:1fr}}@media(max-width:620px){.viewer-stage{min-height:390px}.viewer-toolbar{gap:6px}.viewer-toolbar button,.viewer-toolbar select{min-height:38px;padding:7px 9px;font-size:12px}.viewer-toolbar .viewer-status{width:100%;order:10}.viewer-info-row{grid-template-columns:90px minmax(0,1fr)}}