.workshop-shell { max-width: 900px; margin: 24px auto; padding: clamp(12px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.workshop-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.workshop-heading h1 { margin: 6px 0 12px; font-size: clamp(1.65rem, 5vw, 2.5rem); line-height: 1.2; }
.workshop-kicker { color: #08746b; font-weight: 800; font-size: .8rem; letter-spacing: .14em; }
.workshop-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.workshop-hud div { padding: 10px; border-radius: 10px; background: #eaf2ef; text-align: center; }
.workshop-hud span { display: block; color: #425d58; font-size: .78rem; }
.workshop-hud strong { display: block; font-size: clamp(1.2rem, 4vw, 1.8rem); color: #123e37; font-variant-numeric: tabular-nums; }
.workshop-viewport { position: relative; overflow: hidden; border-radius: 12px; background: #101f2b; }
.workshop-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; touch-action: none; }
.workshop-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 12px; text-align: center; padding: 20px; color: white; background: #10232be8; }
.workshop-overlay[hidden], .workshop-result[hidden], .workshop-shell [hidden] { display: none !important; }
.workshop-overlay h2, .workshop-overlay p { margin: 0; color: white; }
.workshop-overlay .button { justify-self: center; min-width: 190px; }
.sort-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sort-button { min-height: 76px; border-radius: 12px; border: 2px solid transparent; font: inherit; font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 800; color: #122934; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sort-button[data-sort="0"] { background: #71e3dc; border-color: #26958d; }
.sort-button[data-sort="1"] { background: #ffd18b; border-color: #bb8130; }
.sort-button:active { transform: translateY(2px); }
.sort-button:disabled { opacity: .55; cursor: default; }
.sort-button small { display: block; font-size: .75rem; font-weight: 500; }
.workshop-status { min-height: 3em; margin: 12px 0; color: #214e43; font-weight: 700; line-height: 1.5; }
.workshop-status[data-error="true"] { color: #a12e32; }
.workshop-result { border: 2px solid #146b5b; background: #eff9f3; padding: 20px; border-radius: 12px; margin-top: 14px; text-align: center; }
.workshop-result h2 { margin-top: 0; }
.workshop-result__score { font-size: 2.4rem; font-weight: 900; color: #125945; margin: 8px; }
.workshop-result__stars { color: #8d5d00; font-size: 1.5rem; }
.workshop-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.workshop-toolbar button, .gear-inventory button, .gear-axes button { min-height: 44px; padding: 10px 14px; border: 1px solid #b3c8c0; border-radius: 8px; background: #f5faf7; color: #173f36; font: inherit; cursor: pointer; }
.workshop-toolbar button:disabled { opacity: .5; cursor: default; }
.workshop-toolbar .button--primary { background: #146b5b; color: #fff; border-color: #146b5b; }
.workshop-toolbar select { min-height: 44px; max-width: 100%; font: inherit; border: 1px solid #abc2b9; border-radius: 8px; padding: 6px; background: #fff; color: #153d33; }
.gear-inventory, .gear-axes { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.gear-inventory button[aria-pressed="true"], .gear-axes button[aria-pressed="true"] { background: #146b5b; color: #fff; border-color: #146b5b; }
.gear-inventory button:disabled { opacity: .45; }
.gear-axes button { min-width: 48px; }
.gear-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; padding: 8px 0; }
.gear-legend span { display: flex; gap: 6px; align-items: center; }
.gear-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ffd27a; }
.gear-dot--target { background: #64d99b; }
.gear-dot--placed { background: #79c8ed; }
.gear-targets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.gear-targets span { padding: 6px 10px; background: #e9f5ed; border: 1px solid #b2d9c0; border-radius: 8px; font-size: .85rem; }
.gear-targets span[data-powered="true"] { background: #146b5b; color: #fff; }
.gear-view-hint { position: absolute; top: 8px; left: 10px; pointer-events: none; padding: 4px 8px; background: #10232bcc; color: #c9e7e8; font-size: .74rem; border-radius: 6px; }
.workshop-guide { max-width: 900px; margin: 30px auto; }
.workshop-guide h2 { margin-top: 24px; }
.workshop-guide li { margin: 8px 0; }
@media (max-width: 500px) { .workshop-shell { margin: 12px auto; border-radius: 12px; } .workshop-canvas { aspect-ratio: 1 / 1; } .workshop-hud { gap: 5px; } .workshop-hud div { padding: 8px 4px; } .sort-button { min-height: 70px; } .workshop-toolbar { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .sort-button:active { transform: none; } }