.workshopShell { max-width: 1100px; margin: 0 auto; }
.workshopSection { margin-top: 14px; border: 2px solid #514d45; border-right-color: #121210; border-bottom-color: #121210; background: rgba(7,7,6,.78); }
.sectionBar, .editorTop, .subBar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border-bottom: 2px solid #0b0b0a; background: linear-gradient(#302e29,#181715); box-shadow: inset 0 -1px 0 #4d4941; }
.sectionBar h2, .previewPanel h2 { margin: 0; color: #f0e5d0; font: 900 18px var(--doom-mono); text-transform: uppercase; }
.sectionBar > .doom-badge { margin-left: auto; }
.sectionActions, .skinCardActions, .saveButtons, .toolButtons, .resetButtons { display: flex; flex-wrap: wrap; gap: 7px; }
.sectionActions button { min-height: 34px; padding: 5px 9px; font-size: 10px; }
.skinList { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 9px; padding: 11px; }
.skinCard { min-width: 0; padding: 10px; border: 2px solid #47433c; background: #0a0a09; box-shadow: inset 1px 1px 0 rgba(255,255,255,.04); }
.skinCard.selected { border-color: #c34f32; background: rgba(104,31,18,.22); }
.skinCard strong { display: block; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f0e7d7; font: 900 13px var(--doom-mono); text-transform: uppercase; }
.skinCardActions button { flex: 1; min-height: 32px; padding: 4px 7px; font-size: 10px; }
.editorTop { flex-wrap: wrap; }
.nameField, .colorField { display: flex; align-items: center; gap: 8px; color: #c6bdad; font: 12px var(--doom-mono); text-transform: uppercase; }
.nameField { flex: 1 1 300px; }
.nameField input { width: min(320px,100%); }
.selectionState { flex: 1 1 auto; color: #c9af69; font: 11px var(--doom-mono); }
.saveButtons { margin-left: auto; }
.frameGroupTabs { display: flex; gap: 6px; padding: 10px 10px 6px; overflow-x: auto; scrollbar-color: #6c6455 #090909; }
.frameGroupTabs button { flex: 0 0 auto; min-height: 34px; padding: 5px 9px; font-size: 10px; }
.frameGroupTabs button.active, .frameButton.active, .toolButtons button.active { border-color: var(--doom-gold) #5b4310 #5b4310 var(--doom-gold); background: linear-gradient(#5b401c,#211609); color: #ffe995; }
.frameList { display: flex; gap: 7px; min-height: 88px; padding: 6px 10px 11px; overflow-x: auto; }
.frameButton { flex: 0 0 auto; width: 72px; min-height: 78px; padding: 4px; background: #090908; }
.frameButton canvas { display: block; width: 58px; height: 60px; margin: 0 auto 3px; image-rendering: pixelated; }
.frameButton span { display: block; color: #b9af9f; font: 9px var(--doom-mono); }
.workspace { display: grid; grid-template-columns: minmax(360px,1fr) 260px; gap: 12px; padding: 11px; border-top: 2px solid #3d3932; }
.canvasPanel, .previewPanel, .toolsPanel { border: 2px solid #454139; background: #080807; }
.subBar { min-height: 40px; color: #e3d8c5; font: 900 11px var(--doom-mono); text-transform: uppercase; }
.canvasWrap { padding: 11px; overflow: auto; text-align: center; background: repeating-conic-gradient(#111 0 25%,#0b0b0b 0 50%) 50%/16px 16px; }
#editorCanvas { display: block; width: 340px; height: 352px; max-width: none; margin: 0 auto; background: #050505; image-rendering: pixelated; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 3px #000, 0 0 0 5px #5a554b; }
.sidePanel { display: grid; align-content: start; gap: 12px; }
#previewCanvas { display: block; width: 230px; height: 245px; max-width: 100%; margin: 0 auto; background: radial-gradient(circle at 50% 70%,#222019,#070707 64%); image-rendering: pixelated; }
.toolsPanel { padding: 11px; }
.colorField { justify-content: space-between; margin-bottom: 10px; }
.colorField input { width: 82px; height: 38px; padding: 2px; cursor: pointer; }
.toolButtons button, .resetButtons button { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 10px; }
.resetButtons { margin-top: 8px; }
#statusBar.success, .doom-message.success { color: #9bd88b; }
#statusBar.error, .doom-message.error { color: var(--doom-danger); }
@media (max-width: 800px) {
  .workspace { grid-template-columns: 1fr; }
  .sidePanel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sidePanel { grid-template-columns: 1fr; }
  .saveButtons { width: 100%; margin-left: 0; }
  .saveButtons button { flex: 1; width: auto; }
  .sectionBar { align-items: flex-start; flex-wrap: wrap; }
  .sectionActions { width: 100%; }
  .sectionActions button { flex: 1; width: auto; }
  .frameGroupTabs button, .frameButton, .toolButtons button, .resetButtons button, .skinCardActions button { width: auto; }
}