.workshop-page { --ink:#243d58; --muted:#5f7284; --line:#dce5eb; --blue:#236fa6; color:var(--ink); width:100%; max-width:1200px; margin-inline:auto; padding:2.5rem 20px; }
.workshop-page, .workshop-page *, .workshop-review, .workshop-review * { box-sizing:border-box; }
.workshop-page[data-workshop-state] { position:relative; }
.workshop-page[data-workshop-state="loading"], .workshop-page[data-workshop-state="error"] { height:80svh; min-height:360px; overflow:hidden; max-width:none; }
.workshop-page[data-workshop-state="loading"] > :not([data-workshop-loading]), .workshop-page[data-workshop-state="error"] > :not([data-workshop-loading]) { visibility:hidden; pointer-events:none; }
.workshop-loading { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:32px; text-align:center; }
.workshop-loading[hidden] { display:none; }
.workshop-loading h1 { margin:0; font-family:inherit; font-weight:800; font-size:clamp(1.4rem,4vw,2rem); line-height:1.2; }
.workshop-loading p { max-width:320px; margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.workshop-loading-spinner { width:44px; height:44px; margin-bottom:8px; border:4px solid #dce8e7; border-top-color:#236fa6; border-radius:50%; animation:workshop-spin .9s linear infinite; }
.workshop-loading button { padding:10px 18px; border:1px solid #236fa6; border-radius:9px; background:#236fa6; color:#fff; font:inherit; cursor:pointer; }
.workshop-page[data-workshop-state="error"] .workshop-loading-spinner { display:none; }
@keyframes workshop-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .workshop-loading-spinner { animation:none; border-top-color:#236fa6; } }
.workshop-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.workshop-heading h1 { font-size:clamp(1.8rem,4vw,2.8rem); margin:.3rem 0; }
.workshop-kicker { text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; font-weight:800; color:var(--blue); }
.workshop-heading p { color:var(--muted); margin:0; max-width:42rem; }
.workshop-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:1.5rem 0; }
.workshop-tabs a { text-decoration:none; padding:.7rem 1.2rem; border:1px solid var(--line); border-radius:2rem; color:var(--ink); background:#fff; }
.workshop-tabs a[aria-current="page"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.workshop-editor { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.5rem; align-items:start; }
.workshop-sidebar { min-width:0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.4rem; }
.workshop-sidebar h2 { font-family:inherit; font-size:1.2rem; font-weight:800; margin:0 0 1.25rem; }
.workshop-sidebar .mb-3 { margin-bottom:18px; }
.workshop-sidebar label { display:block; margin-bottom:7px; font-weight:700; font-size:.85rem; }
.workshop-sidebar .form-control { display:block; width:100%; min-width:0; max-width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:.85rem; }
.workshop-sidebar input[type="file"] { padding:0; font-size:.75rem; line-height:40px; overflow:hidden; }
.workshop-sidebar input[type="file"]::file-selector-button { margin:0 10px 0 0; padding:0 10px; height:40px; border:0; border-right:1px solid var(--line); background:#eff5f8; color:var(--ink); font:inherit; cursor:pointer; }
.workshop-sidebar .form-control:focus-visible { outline:3px solid #f7a83c; outline-offset:2px; }
.workshop-sidebar [data-valmsg-for] { font-size:.75rem; }
.workshop-sidebar [data-thumbnail-preview] { width:100%; height:160px; object-fit:contain; margin-top:12px; background:#eff5f6; border-radius:8px; }
.workshop-sidebar small { font-size:.76rem; line-height:1.5; display:block; margin-top:.4rem; }
.workshop-sidebar .btn-primary { display:block; width:100%; border:1px solid #236fa6; border-radius:10px; padding:12px 16px; margin-top:20px; background:#236fa6; color:white; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
.workshop-sidebar .btn-primary:hover { background:#1c5b89; }
.workshop-sidebar .btn-primary:disabled { opacity:.65; cursor:wait; }
.workshop-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.workshop-actions button,.workshop-review-close { border:1px solid #dce5eb; border-radius:8px; background:white; color:#29475e; padding:7px 11px; font-size:.78rem; }
.workshop-review { width:min(800px,95vw); max-height:95vh; overflow:auto; padding:24px; border:0; border-radius:18px; background:#f5f7f9; color:#243d58; }
.workshop-review::backdrop { background:#14273599; }
.workshop-review h2 { font-family:inherit; font-size:1.3rem; margin:0 5rem 18px 0; }
.workshop-review-close { position:absolute; right:24px; top:20px; }
.dressing-textures[hidden] { display:none; }
.workshop-library { margin-top:3rem; }
.workshop-library h2 { font-size:1.5rem; }
.workshop-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; }
.workshop-card { border:1px solid var(--line); border-radius:14px; padding:1rem; background:#fff; }
.workshop-card img { width:100%; height:160px; object-fit:contain; background:#eff5f6; border-radius:8px; margin-bottom:.75rem; }
.workshop-card strong { display:block; margin-bottom:.5rem; }
.workshop-card .btn { border-radius:6px; margin-top:.8rem; font-size:.8rem; }
.workshop-empty { padding:1.6rem; background:#edf3f6; border-radius:12px; color:var(--muted); }
.dressing-room { min-width:0; }
.dressing-stage { position:relative; overflow:hidden; border:1px solid #d7e5e6; border-radius:20px; background:radial-gradient(ellipse at 50% 42%,#fff 0%,#edf5f4 55%,#dcebe8 100%); }
.dressing-stage::after { content:""; position:absolute; pointer-events:none; width:34%; height:22px; border-radius:50%; bottom:85px; left:33%; background:#27584912; filter:blur(7px); }
.dressing-canvas { height:430px; margin:38px 0 82px; width:100%; touch-action:none; }
.dressing-canvas canvas { display:block; }
.dressing-status { position:absolute; bottom:62px; left:15px; right:15px; text-align:center; font-size:.73rem; color:#48635d; pointer-events:none; }
.dressing-status.is-error { background:#fff1ef; color:#982b22; border-radius:8px; padding:9px; }
.dressing-retry { position:absolute; top:52px; left:22px; }
.dressing-views { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; background:#fff; padding:4px; border:1px solid #dce5e4; border-radius:30px; box-shadow:0 3px 8px #253e5410; }
.dressing-room button { font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer; border:1px solid #dce5eb; border-radius:8px; background:white; color:#29475e; padding:7px 11px; }
.dressing-room button:hover { background:#eaf2f8; }
.dressing-room button:focus-visible,.dressing-room a:focus-visible { outline:3px solid #f7a83c; outline-offset:2px; }
.dressing-views button { border:0; border-radius:24px; padding:7px 16px; }
.dressing-views button[aria-pressed="true"] { background:#294b5c; color:white; }
.dressing-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:12px; padding:16px 0; border-bottom:1px solid #dce5eb; }
.dressing-toolbar label { display:flex; min-width:0; flex-direction:column; align-self:start; gap:6px; margin:0; font-size:.73rem; font-weight:700; color:#526578; }
.dressing-toolbar [data-valmsg-for]:empty { display:none; }
.dressing-toolbar select { width:100%; min-width:0; height:38px; border:1px solid #dce5eb; border-radius:8px; padding:7px 26px 7px 9px; color:#243d58; background:white; font:inherit; }
.dressing-toolbar [data-action="capture"] { min-height:38px; white-space:nowrap; }
.dressing-bottoms .dressing-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dressing-bottoms [data-action="capture"] { grid-column:1 / -1; justify-self:end; }
.dressing-textures { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:12px; padding-top:16px; }
.dressing-texture { min-width:0; border:1px solid #dce5eb; border-radius:12px; background:white; padding:14px; }
.dressing-texture.is-dragging { border-color:#236fa6; background:#eaf4fc; }
.dressing-texture>div { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:12px; font-size:.82rem; }
.dressing-texture a { font-size:.7rem; color:#236fa6; }
.dressing-texture .dressing-downloads { justify-content:flex-start; flex-wrap:wrap; gap:8px 16px; }
.dressing-file { position:relative; display:block; background:#eff5f8; border:1px dashed #a9c0ce; border-radius:8px; text-align:center; padding:14px 8px; font-size:.8rem; cursor:pointer; }
.dressing-file input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.dressing-file:focus-within { outline:3px solid #f7a83c; }
.dressing-file-name { display:block; font-size:.72rem; color:#5f7284; margin:9px 0; overflow-wrap:anywhere; }
.dressing-texture button { font-size:.7rem; padding:4px 8px; }
.dressing-help { font-size:.75rem; color:#5f7284; line-height:1.6; margin-top:12px; }
.species-editor .dressing-room { position:sticky; top:20px; }
.species-editor .dressing-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
.species-editor [data-head-status],.species-editor [data-dialog-status] { font-size:.76rem; color:#526578; overflow-wrap:anywhere; margin:12px 0; }
.species-fit { border-top:1px solid #dce5eb; padding-top:14px; margin-top:14px; }
.species-fit[hidden] { display:none; }
.species-fit input[type="range"] { display:block; width:100%; margin:8px 0 14px; accent-color:#236fa6; }
.species-editor select { width:100%; max-width:100%; padding:7px; border:1px solid #dce5eb; border-radius:7px; background:white; color:#243d58; font:inherit; font-size:.75rem; }
.species-dialog-heading { display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.species-dialog-heading h3 { font-family:inherit; font-size:1rem; font-weight:700; margin:0; }
.species-muzzle { border-bottom:1px solid #e5edf1; padding:12px 0; }
.species-muzzle summary { cursor:pointer; font-weight:700; }
.species-muzzle label,.species-muzzle small,.species-muzzle a { display:block; margin:10px 0; }
.species-muzzle input { max-width:100%; }
.species-muzzle input[type="range"] { width:100%; accent-color:#236fa6; }
.species-muzzle button,.species-editor [data-reset-head-texture] { border:1px solid #dce5eb; border-radius:7px; padding:6px 10px; background:white; color:#29475e; font:inherit; font-size:.75rem; cursor:pointer; }
.species-muzzle button[aria-pressed="true"] { background:#236fa6; color:white; }
.species-editor [data-muzzle-controls] { margin-top:24px; }
.species-editor [data-muzzle-status] { font-size:.76rem; color:#526578; }
.species-editor [data-muzzle-controls] h3 { font-size:1rem; font-weight:700; }
.cog-hand-color { display:flex; align-items:center; gap:14px; margin-top:20px; }
.cog-hand-color input { width:64px; height:38px; border:1px solid #dce5eb; border-radius:7px; }
.dressing-toolbar label[hidden] { display:none; }
.species-dialog-heading span { font-size:.75rem; color:#526578; }
.species-dialog { padding:14px 0; border-bottom:1px solid #e5edf1; }
.species-dialog input[type="file"] { display:block; width:100%; min-width:0; line-height:32px; margin-top:5px; }
.species-dialog input[type="file"]::file-selector-button { height:32px; }
.species-dialog select { margin:5px 0 8px; }
.species-dialog button { border:1px solid #dce5eb; border-radius:7px; padding:6px 10px; background:white; color:#29475e; font:inherit; font-size:.75rem; cursor:pointer; }
.species-dialog button[aria-pressed="true"] { background:#236fa6; color:white; }
.species-editor button:disabled { opacity:.45; cursor:default; }
@media(max-width:991px) { .species-editor .dressing-room { position:static; } }
@media(max-width:991px) { .workshop-editor { grid-template-columns:1fr; } .workshop-sidebar { max-width:none; } }
@media(max-width:575px) { .workshop-page { padding:1.5rem 14px; } .workshop-heading { align-items:start; } .workshop-sidebar { padding:18px; } .dressing-canvas { height:420px; } .dressing-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .dressing-toolbar [data-action="capture"] { grid-column:1 / -1; } .dressing-views button { padding:7px 12px; } }

.workshop-hat-editor { grid-template-columns:minmax(0,1fr) 330px; gap:24px; }
.workshop-hat-editor .workshop-sidebar { padding:24px; }
.hat-shape-label { display:block; margin-bottom:8px; font-size:.85rem; font-weight:700; }
.hat-shape-trigger { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:2px 12px; width:100%; border:1px solid #cddde6; border-radius:12px; padding:12px; text-align:left; background:#f4f8fa; color:#243d58; font:inherit; cursor:pointer; }
.hat-shape-trigger img { width:64px; height:64px; object-fit:contain; grid-row:span 2; }
.hat-shape-trigger strong { font-size:.85rem; }
.hat-shape-trigger span { font-size:.75rem; color:#236fa6; }
.hat-shape-trigger:hover { border-color:#236fa6; background:#eaf3fa; }
.hat-picker { box-sizing:border-box; width:min(740px,calc(100vw - 24px)); max-height:85svh; border:1px solid #dce5eb; border-radius:20px; padding:26px; color:#243d58; background:#f7fafb; }
.hat-picker::backdrop { background:#183047aa; }
.hat-picker h2 { font-family:inherit; font-size:1.45rem; font-weight:800; margin:0 70px 22px 0; }
.hat-picker-close { position:absolute; top:24px; right:24px; background:white; border:1px solid #dce5eb; border-radius:8px; padding:7px 12px; color:#243d58; font:inherit; font-size:.8rem; }
.hat-picker input { box-sizing:border-box; width:100%; border:1px solid #cbdce7; border-radius:9px; background:white; padding:12px 14px; margin-bottom:18px; font:inherit; color:#243d58; }
.hat-shape-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.hat-shape-option { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px; border:2px solid #e1e9ef; border-radius:12px; background:white; color:#243d58; font:inherit; font-size:.78rem; line-height:1.3; cursor:pointer; }
.hat-shape-option img { width:100%; height:86px; object-fit:contain; }
.hat-shape-option:hover { background:#eef5fa; border-color:#aac9dd; }
.hat-shape-option[aria-pressed="true"] { background:#e9f4fc; border-color:#236fa6; }
.hat-picker [hidden] { display:none; }
.hat-picker :is(input,button):focus-visible,.hat-shape-trigger:focus-visible { outline:3px solid #f7a83c; outline-offset:2px; }
@media(max-width:991px) { .workshop-hat-editor { grid-template-columns:1fr; } }
@media(max-width:500px) { .hat-picker { padding:20px; } .hat-shape-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.workshop-verification { max-width:480px; padding-block:64px; text-align:center; }
.workshop-verification h1 { margin-bottom:24px; }
.workshop-verification form { margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.workshop-verification button { width:100%; margin-top:16px; }
.workshop-captcha { margin-top:20px; }
.workshop-captcha-status { font-size:.8rem; color:#982b22; margin:8px 0; }
.workshop-captcha-status:empty { display:none; }
@media(max-width:400px) { .workshop-hat-editor .workshop-sidebar { padding:16px; } .workshop-verification form { padding:16px; } }