.designer-main{max-width:1380px}.designer-columns{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}.designer-main .workshop-controls,.design-result{min-width:0}.design-settings{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.design-settings select{margin-bottom:0}.brief-examples{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.brief-examples button{font-size:11px;padding:7px 9px;color:var(--muted)}.check-label{display:flex;align-items:center;gap:10px;font-size:12px!important;line-height:1.6;cursor:pointer}.check-label input{width:15px;height:15px;padding:0;accent-color:var(--gold);flex-shrink:0}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.canvas-toolbar label{margin:0}.background-label{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}.background-label select{width:auto;margin:0;padding:6px;font-size:12px}.drawing-stage{position:relative;display:grid;place-items:center;min-height:384px;padding:20px;border:1px solid #405147;overflow:hidden;background-color:#17201c;background-image:conic-gradient(#ffffff05 25%,transparent 0 50%,#ffffff05 0 75%,transparent 0);background-size:24px 24px}.drawing-stage[data-background=dark]{background:#0b1010}.drawing-stage[data-background=light]{background:#e2e0d6}.drawing-stage canvas{display:block;width:100%;max-width:384px;height:auto;aspect-ratio:1;image-rendering:pixelated;touch-action:pan-y}.drawing-stage canvas[hidden]{display:none}#empty-drawing{text-align:center;color:var(--muted);max-width:280px;padding:32px 0}#empty-drawing h3{font:500 18px Unbounded,sans-serif;color:var(--text)}#empty-drawing p{font-size:13px;line-height:1.8}.drawing-stage[data-background=light] #empty-drawing,.drawing-stage[data-background=light] #empty-drawing h3{color:#39483e}.pixel-mark{display:block;color:var(--gold);font-size:52px;margin-bottom:30px}.pixel-inspector{min-height:18px;font:11px/1.6 monospace;color:var(--muted);margin:10px 0 20px}.sprite-title-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.sprite-title-row h3{font:500 20px/1.5 Unbounded,sans-serif;margin:0}.sprite-title-row p{margin:7px 0}.sprite-title-row canvas{image-rendering:pixelated;flex-shrink:0}.sprite-palette{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}.color-swatch{width:22px;height:22px;border:1px solid #ffffff40;border-radius:3px}.export-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.export-actions button{font-size:12px}.pixel-data{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--muted)}.pixel-data summary{cursor:pointer}.pixel-data pre{white-space:pre;overflow:auto;max-height:260px;background:#101815;padding:16px;line-height:1.6;color:var(--teal);max-width:100%}.design-history{margin-top:32px;border-top:1px solid var(--line);padding-top:28px}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.history-heading h2{font:500 22px/1.5 Unbounded,sans-serif;margin:10px 0}.history-heading button{font-size:12px}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:22px 0}.history-card{display:flex;flex-direction:column;align-items:center;background:#17201b;border:1px solid #384a3e;color:var(--text);padding:18px 12px;gap:12px;min-width:0;text-align:center}.history-card[aria-pressed=true]{border-color:var(--gold);background:#282d23}.history-card canvas{width:96px;height:96px;image-rendering:pixelated}.history-card strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.history-card small{color:var(--muted);font-size:10px}.design-result .eyebrow{margin:0;font-family:'DM Sans',sans-serif}.designer-main [hidden]{display:none!important}
@media(max-width:900px){.designer-columns{grid-template-columns:1fr}.drawing-stage{min-height:320px}.designer-main{padding-inline:5%}}
@media(max-width:480px){.drawing-stage{min-height:260px;padding:12px}.design-settings{grid-template-columns:1fr}.history-heading h2{font-size:18px}.designer-main .workshop-intro h1{font-size:23px}body>header{height:auto;min-height:76px;flex-wrap:wrap;padding-block:14px;gap:12px}.header-right{gap:18px}.workshop-link{font-size:12px}.history-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

.design-logs{margin-top:28px;border:1px solid var(--line);padding:20px;background:#151e19}.design-logs summary{cursor:pointer;color:var(--gold);font-size:14px}.log-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.log-toolbar label{flex:1;min-width:180px;margin:8px 0}.log-toolbar select{margin:8px 0;font-size:12px}.log-toolbar button{font-size:12px}.log-output{max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#0d1511;padding:14px;color:var(--teal);font:12px/1.7 monospace}.log-output:empty{display:none}

.gameplay-panel{border-block:1px solid var(--line);margin-top:20px;padding:16px 0}.gameplay-panel h3{font:500 17px Unbounded,sans-serif;margin:4px 0 16px}.gameplay-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gameplay-fields label{margin:0;font-size:12px;color:var(--muted)}.gameplay-fields input,.gameplay-fields select{margin:6px 0 0}.gameplay-fields .check-label{grid-column:1/-1}.gameplay-panel select{font-size:13px}#history-type{max-width:280px}#gameplay-message{min-height:20px}.gameplay-panel button{font-size:12px}@media(max-width:480px){.gameplay-fields{grid-template-columns:1fr}}

.history-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.history-filters label{font-size:12px;margin:8px 0}.history-filters select,.history-filters input{font-size:12px;margin:8px 0 0}#review-form textarea{min-height:65px}.sprite-rating{color:var(--gold);font-size:12px}.history-card[data-status=rejected]{opacity:.65}.history-card[data-status=approved]{border-bottom:3px solid var(--teal)}@media(max-width:700px){.history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}

.active-sprite-bar{position:sticky;top:12px;z-index:20;display:grid;grid-template-columns:72px minmax(180px,1fr) auto;align-items:center;gap:16px;margin:0 0 24px;padding:12px 16px;background:linear-gradient(110deg,#202b24f5,#151d19f5);border:1px solid #657254;border-left:4px solid var(--gold);box-shadow:0 12px 30px #050a0888;backdrop-filter:blur(10px)}.active-sprite-bar[hidden]{display:none}.active-sprite-bar canvas{width:72px;height:72px;image-rendering:pixelated;background:#111a15;border:1px solid #53624d;padding:5px}.active-sprite-copy{min-width:0}.active-sprite-copy strong{display:block;margin-top:4px;color:var(--text);font:500 18px/1.4 Unbounded,sans-serif;overflow-wrap:anywhere}.active-sprite-copy .field-hint{margin:5px 0 0}.active-sprite-family{margin:5px 0 0;color:var(--teal);font-size:12px}.active-sprite-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.active-sprite-actions button{font-size:11px;padding:9px 11px}.active-sprite-actions #active-variant{box-shadow:0 3px 0 #6b5337}.history-card{position:relative;overflow:hidden}.history-card[data-variant=true]{background:linear-gradient(145deg,#1d2720,#18201b);border-style:dashed}.history-card[data-variant=true]::before{content:'↳ VARIANTE';position:absolute;top:7px;right:7px;padding:3px 5px;background:#3b493b;color:var(--teal);font-size:8px;letter-spacing:.7px}.history-card[data-variant=false]::before{content:'ORIGINAL';position:absolute;top:7px;right:7px;padding:3px 5px;background:#493c2c;color:var(--gold);font-size:8px;letter-spacing:.7px}.history-card .history-family{display:block;max-width:100%;color:var(--teal);font-size:10px;line-height:1.4;overflow-wrap:anywhere}.history-card .sprite-rating{display:block;line-height:1.5}.history-card[data-variant=true] canvas{border:1px dashed #607765}.history-card[data-variant=false] canvas{border:1px solid #756142}
@media(max-width:800px){.active-sprite-bar{grid-template-columns:58px minmax(0,1fr);top:6px;padding:10px;gap:10px}.active-sprite-bar canvas{width:58px;height:58px}.active-sprite-copy strong{font-size:14px}.active-sprite-actions{grid-column:1/-1;justify-content:flex-start;border-top:1px solid #ffffff18;padding-top:9px}.active-sprite-actions button{flex:1;min-width:0}.active-sprite-actions #active-variant{flex:1.5}}
@media(max-width:480px){.active-sprite-bar{top:4px}.active-sprite-actions{display:grid;grid-template-columns:1fr 1fr}.active-sprite-actions button{width:100%}.active-sprite-actions #active-variant{grid-column:1/-1}}

/* Stable two-column workshop layout: controls and filters stay in the left rail. */
.designer-columns{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:24px;align-items:start}
.designer-sidebar{display:flex!important;flex-direction:column;gap:16px;align-self:start;min-width:0}
.designer-sidebar>.designer-accordion{width:100%;margin:0}
.designer-columns>.design-result{grid-column:2;grid-row:1;min-width:0}
.filter-panel .history-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px 18px}
.filter-panel .history-filters label{min-width:0}
.filter-panel .history-filters input,.filter-panel .history-filters select{width:100%;min-width:0}
.sprite-list-accordion{margin-top:28px}
@media(max-width:900px){
 .designer-columns{grid-template-columns:1fr;gap:16px}
 .designer-sidebar{display:flex!important}
 .designer-columns>.design-result{grid-column:1;grid-row:2}
 .filter-panel .history-filters{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.filter-panel .history-filters{grid-template-columns:1fr}}

.new-sprite-card{border:1px dashed var(--gold);background:linear-gradient(145deg,#2a2b20,#1b241d);cursor:pointer;justify-content:center;min-height:205px}
.new-sprite-card:hover,.new-sprite-card:focus-visible{border-color:var(--teal);background:#29372d;transform:translateY(-2px)}
.new-sprite-plus{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font:300 38px/1 'DM Sans',sans-serif}
.new-sprite-card strong{color:var(--gold);font:500 14px/1.4 Unbounded,sans-serif}
.new-sprite-card small{color:var(--muted);font-size:11px}
.carnet-create-button{font-size:11px;padding:8px 11px;white-space:nowrap}
.generation-modal{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid #62735b;background:#111a15;color:var(--text);box-shadow:0 24px 90px #000b;overflow:hidden}
.generation-modal::backdrop{background:#050908c9;backdrop-filter:blur(4px)}
.generation-modal-shell{max-height:calc(100vh - 32px);overflow:auto;padding:24px}
.generation-modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.generation-modal-heading h2{margin:8px 0 0;font:500 22px/1.4 Unbounded,sans-serif}
.modal-close{width:36px;height:36px;padding:0;font-size:24px;line-height:1}
.generation-modal .designer-accordion{border:0;background:transparent}
.generation-modal .designer-accordion>summary{padding:0 0 14px}
.generation-modal .designer-accordion>.workshop-controls{padding:0}
.generation-modal .generation-options{margin:16px 0;border:1px solid #34453a;padding:0 14px 14px;background:#17201b}
.generation-modal .generation-options summary{padding:13px 0;cursor:pointer;color:var(--gold);font-size:12px}
.generation-modal .generation-options[open] summary{border-bottom:1px solid #34453a;margin-bottom:14px}
.generation-modal .connection-box{margin-bottom:16px}
@media(max-width:560px){.generation-modal-shell{padding:18px}.generation-modal-heading h2{font-size:18px}.new-sprite-card{min-height:160px}}

.drawing-modal{width:min(1500px,calc(100vw - 24px));height:min(94vh,1100px);max-width:none;max-height:calc(100vh - 24px);padding:0;border:1px solid #62735b;background:#111a15;color:var(--text);box-shadow:0 24px 90px #000b;overflow:hidden}
.drawing-modal::backdrop{background:#050908d4;backdrop-filter:blur(4px)}
.drawing-modal-shell{height:100%;overflow:auto;padding:20px 24px 28px}
.drawing-modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.drawing-modal-heading h2{margin:8px 0 0;font:500 22px/1.4 Unbounded,sans-serif}
.drawing-modal-content{min-width:0}
.drawing-modal .design-result{display:block;min-width:0}
.drawing-modal .drawing-stage{min-height:min(64vh,680px)}
.drawing-modal .drawing-stage canvas{max-width:min(70vh,680px)}
.drawing-modal .sprite-title-row{align-items:flex-start}
@media(max-width:700px){.drawing-modal{width:calc(100vw - 12px);height:calc(100vh - 12px);max-height:none}.drawing-modal-shell{padding:16px}.drawing-modal-heading h2{font-size:18px}.drawing-modal .drawing-stage{min-height:52vh}.drawing-modal .drawing-stage canvas{max-width:82vw}}

/* The notebook owns its filters: a left rail beside the sprite cards. */
.designer-columns{display:block}
.designer-columns>.design-result{grid-column:auto;grid-row:auto}
.designer-accordion>summary{display:flex!important;align-items:center;gap:12px}
.designer-accordion>summary strong{margin-right:auto}
.sprite-list-accordion{width:100%;margin-top:28px}
.sprite-carnet-layout{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);gap:24px;padding:22px}
.sprite-filters-panel{align-self:start;border-right:1px solid var(--line);padding:0 22px 0 0}
.sprite-filters-heading{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.sprite-filters-heading h2{margin:7px 0 0;font:500 17px/1.4 Unbounded,sans-serif}
.sprite-filters-panel .history-filters{display:flex!important;flex-direction:column;gap:2px}
.sprite-filters-panel .history-filters label{margin:7px 0;font-size:12px}
.sprite-filters-panel .history-filters input,.sprite-filters-panel .history-filters select{width:100%;margin-top:6px;font-size:12px}
.sprite-carnet-layout .design-history{min-width:0;margin:0;border-top:0;padding:0}
.sprite-carnet-layout .history-list{margin-top:18px}
@media(max-width:800px){
 .sprite-carnet-layout{grid-template-columns:1fr;gap:18px;padding:16px}
 .sprite-filters-panel{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}
 .sprite-filters-panel .history-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(max-width:500px){.sprite-filters-panel .history-filters{display:grid!important;grid-template-columns:1fr}}

.active-sprite-copy select{width:min(100%,360px);margin:7px 0 0;padding:7px 9px;font-size:11px;background:#101815}

.designer-sidebar{display:flex;flex-direction:column;gap:16px;min-width:0}.designer-accordion{border:1px solid #3d4e42;background:#17201b;min-width:0}.designer-accordion>summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none}.designer-accordion>summary::-webkit-details-marker{display:none}.designer-accordion>summary::before{content:'▸';color:var(--gold);font-size:14px;transition:transform .15s}.designer-accordion[open]>summary::before{transform:rotate(90deg)}.designer-accordion>summary strong{font:500 14px Unbounded,sans-serif;letter-spacing:.1px}.accordion-state{color:var(--muted);font-size:11px}.designer-accordion>.workshop-controls{border:0;background:transparent;padding:18px}.filter-panel .history-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px 16px;gap:8px}.filter-panel .history-filters label{margin:6px 0}.filter-panel .history-filters input,.filter-panel .history-filters select{margin-top:6px;padding:9px 8px;font-size:11px}.sprite-list-accordion{margin-top:28px}.sprite-list-accordion .design-history{margin:0;border-top:0;padding:20px}.sprite-list-accordion .history-filters{display:none}.sprite-list-accordion .history-list{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}.sprite-list-accordion[open]>summary{border-bottom:1px solid #3d4e42}@media(max-width:900px){.designer-columns{grid-template-columns:1fr}.designer-sidebar{display:contents}.designer-sidebar .designer-accordion{order:1}.designer-columns>.design-result{order:2}.sprite-list-accordion{margin-top:20px}.filter-panel .history-filters{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){.filter-panel .history-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}