:root{--sd-accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);min-height:100vh}.container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:30px;box-shadow:0 20px 60px var(--overlay-light);max-width:1400px;width:95%;margin:20px auto}.container h1{text-align:center;color:var(--text-primary);margin-bottom:20px;font-size:28px}.container .viewer-section{display:grid;grid-template-columns:2fr 1fr;gap:30px;margin-bottom:30px}.container .viewer-box{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px}.container .viewer-box h2{font-size:18px;color:var(--text-muted);margin-bottom:15px;text-align:center}.container #spineContainer{width:100%;height:600px;background:var(--bg-secondary);border:3px solid var(--border-color);border-radius:10px;position:relative;overflow:hidden}.container #spineContainer canvas{display:block;width:100%;height:100%}.container .controls{background:var(--bg-tertiary);border-radius:15px;padding:20px}.container .control-group{margin-bottom:15px}.container .control-group label{display:block;font-weight:600;color:var(--text-muted);margin-bottom:8px;font-size:13px}.container input[type=file],.container select{width:100%;padding:8px;border:2px solid var(--border-color);border-radius:8px;font-size:12px;background:var(--bg-secondary);color:var(--text-secondary);margin-bottom:5px}.container input[type=range]{width:100%;margin-bottom:5px}.container input[type=checkbox]{margin-right:8px}.container .range-value{text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:8px}.container button{background:var(--sd-accent-gradient);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;width:100%;margin-top:8px;transition:transform var(--transition-base)}.container button:hover:not(:disabled){transform:translateY(-2px)}.container button:focus-visible{outline:3px solid color-mix(in srgb,var(--primary-color) 35%,transparent);outline-offset:2px}.container button:active:not(:disabled){transform:translateY(0)}.container button:disabled{opacity:.5;cursor:not-allowed;transform:none}.container .button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.container #displayModeBtns button{background:var(--border-color);color:var(--text-secondary)}.container #displayModeBtns button.active{background:var(--sd-accent-gradient);color:#fff}.container #displayModeBtns{grid-template-columns:repeat(3,minmax(0,1fr))}.container .animation-list,.container .skin-list{max-height:250px;overflow-y:auto;border:2px solid var(--border-color);border-radius:8px;padding:10px;background:var(--bg-secondary)}.container .animation-item,.container .skin-item{display:block;width:100%;padding:8px;margin:4px 0;background:var(--bg-tertiary);color:var(--text-secondary);border:0;border-radius:6px;cursor:pointer;transition:background var(--transition-base);font-size:12px;font-weight:500;text-align:left;transform:none}.container .animation-item:hover,.container .skin-item:hover{background:var(--bg-primary);transform:none}.container .animation-item.active,.container .skin-item.active{background:var(--sd-accent-gradient);color:#fff;font-weight:600}.container .status{text-align:center;padding:12px;background:#fff3cd;border-radius:8px;margin-bottom:20px;color:#856404;font-size:13px}.container .status.success{background:#d4edda;color:#155724}.container .status.error{background:#f8d7da;color:#721c24}.container .file-status{font-size:11px;color:var(--text-muted);margin-top:3px}.container .file-status.loaded{color:var(--success-color);font-weight:600}@media(max-width:1024px){.container .viewer-section{grid-template-columns:1fr}.container #spineContainer{height:500px}}@media(max-width:560px){.container{width:calc(100% - 20px);padding:16px;margin:10px auto}.container #displayModeBtns{grid-template-columns:1fr}.container #spineContainer{height:420px}}body.dark-mode .container{background:var(--bg-secondary);box-shadow:0 20px 60px var(--overlay-strong)}body.dark-mode .container h1{color:var(--text-primary)}body.dark-mode .viewer-box,body.dark-mode .controls{background:var(--bg-tertiary)}body.dark-mode .viewer-box h2{color:var(--text-muted)}body.dark-mode #spineContainer{background:#fff;border:3px solid var(--border-color)}body.dark-mode .control-group label{color:var(--text-muted)}body.dark-mode input[type=file],body.dark-mode select{background:var(--bg-input);border:2px solid var(--border-color);color:var(--text-secondary)}body.dark-mode .range-value{color:var(--text-muted)}body.dark-mode #displayModeBtns button{background:var(--border-color);color:var(--text-secondary)}body.dark-mode .animation-list,body.dark-mode .skin-list{background:var(--bg-secondary);border:2px solid var(--border-color)}body.dark-mode .animation-item,body.dark-mode .skin-item{background:var(--bg-tertiary);color:var(--text-secondary)}body.dark-mode .animation-item:hover,body.dark-mode .skin-item:hover{background:var(--bg-elevated)}body.dark-mode .file-status{color:var(--text-muted)}