@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.viewer-mode-bar{position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(26,26,26,.95);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;padding:0 var(--spacing-md);z-index:100;box-shadow:0-2px 8px rgba(0,0,0,.5);transition:transform var(--transition-medium) ease,opacity var(--transition-medium) ease}.viewer-mode-bar.viewer-bar-hidden{transform:translateY(100%);opacity:0;pointer-events:none}.viewer-controls{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;max-width:1200px;flex-wrap:wrap;justify-content:flex-start}.viewer-btn{background:var(--bg-hover);border:1px solid var(--border-color);color:var(--text-primary);padding:var(--spacing-sm) 12px;border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--font-size-lg);transition:all var(--transition-fast) ease;flex-shrink:0}.viewer-btn:hover{background:var(--accent-blue);border-color:var(--accent-blue)}.viewer-btn:active{transform:scale(.98)}.viewer-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.viewer-btn.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.viewer-display-mode,.viewer-slideshow{flex-shrink:0}.viewer-filename,.viewer-shift{color:var(--text-secondary);white-space:nowrap}.viewer-shift{font-size:var(--font-size-sm);flex-shrink:0;padding-left:var(--spacing-sm);font-variant-numeric:tabular-nums}.viewer-filename{margin-left:auto;font-size:var(--font-size-md);overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0;padding-left:var(--spacing-md)}.viewer-mode-bar .modern-select{background:var(--bg-hover);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast) ease}.viewer-mode-bar .modern-select:hover{background:rgba(51,51,51,.8);border-color:var(--accent-blue)}.viewer-mode-bar .modern-select:focus{outline:0;background:rgba(51,51,51,.95);border-color:var(--accent-blue)}.file-input-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.file-input-label{display:inline-block;padding:var(--spacing-md) 15px;background:var(--bg-hover);border:2px dashed var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;text-align:center;transition:all var(--transition-fast) ease;color:var(--text-secondary)}.file-input-label:hover{border-color:var(--accent-blue);background:rgba(33,150,243,.1);color:var(--accent-blue)}#canvas-container.viewer-mode{margin-bottom:60px}body:has(#canvas-container.viewer-mode) .drawer-handle,body:has(#canvas-container.viewer-mode) .panel-tab{display:none!important}@media (max-width:768px){.viewer-controls{justify-content:space-between;font-size:var(--font-size-md)}.viewer-btn{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--font-size-md)}.viewer-filename{position:absolute;bottom:-20px;left:var(--spacing-md);font-size:var(--font-size-xs)}}.portrait-guard{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);z-index:99999;justify-content:center;align-items:center;padding:var(--spacing-xl)}.portrait-guard-content{text-align:center;max-width:400px;animation:fadeIn .5s ease-in-out}.portrait-guard-icon{font-size:80px;margin-bottom:var(--spacing-xl);animation:pulse 2s infinite}.portrait-guard-rotate-icon{font-size:60px;margin-bottom:30px;animation:rotate 2s linear infinite;display:inline-block}.portrait-guard-title{font-size:24px;font-weight:600;color:var(--text-primary);margin-bottom:15px}.portrait-guard-message{font-size:var(--font-size-xl);color:var(--text-secondary);line-height:1.6;margin-bottom:30px}.portrait-guard-actions{display:flex;flex-direction:column;gap:15px;align-items:center}.portrait-guard-btn{padding:var(--spacing-xl) 32px;font-size:18px;font-weight:600;border:0;border-radius:var(--border-radius-lg);cursor:pointer;transition:all var(--transition-fast) ease;min-width:200px}.portrait-guard-btn-primary{background:var(--accent-blue);color:#fff;box-shadow:0 4px 12px rgba(74,158,255,.4)}.portrait-guard-btn-primary:hover{opacity:1;transform:translateY(-3px);box-shadow:0 8px 20px rgba(74,158,255,.6)}.portrait-guard-btn-primary:active{transform:translateY(-1px);box-shadow:0 4px 12px rgba(74,158,255,.4)}.portrait-guard-checkbox{display:flex;align-items:center;gap:var(--spacing-lg);cursor:pointer;font-size:var(--font-size-lg);color:var(--text-secondary)}.portrait-guard-checkbox input[type=checkbox]{cursor:pointer;width:18px;height:18px}.portrait-guard-checkbox input[type=checkbox]:checked{accent-color:var(--accent-blue)}@media (orientation:portrait) and (pointer:coarse) and (max-width:600px){.portrait-guard{display:flex}}.viewer-file-list-item{padding:var(--spacing-lg) 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);background-color:rgba(255,255,255,.05);border-radius:var(--border-radius-sm);transition:background-color var(--transition-fast) ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.viewer-file-list-item:hover{background-color:rgba(255,255,255,.1)}.viewer-file-list-item--current{background-color:var(--accent-blue)!important;color:#fff;font-weight:700}.viewer-file-list-item--error{background-color:rgba(200,40,40,.15);color:var(--text-tertiary)}.viewer-file-list-item--error:hover{background-color:rgba(200,40,40,.25)}