:root{--bg:#120c08;--panel:#1b120c;--panel-2:#24170e;--line:#4a2e1b;--text:#fff8ef;--muted:#c9ae96;--gold:#f0aa3c;--gold-2:#ffcc75;--danger:#c94a3e;--shadow:0 18px 50px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 45% 0,#332015 0,#120c08 52%,#090604 100%);color:var(--text);overflow:hidden}button,input,select,textarea{font:inherit}button,.file-button{border:1px solid #684326;background:#2b1b10;color:var(--text);border-radius:10px;padding:.58rem .78rem;cursor:pointer;transition:.15s ease}button:hover,.file-button:hover{border-color:var(--gold);transform:translateY(-1px)}button:disabled{opacity:.42;cursor:not-allowed;transform:none}.primary{background:linear-gradient(180deg,#f2b64f,#c97b1c);color:#211207;border-color:#ffc76c;font-weight:800}.danger{border-color:#78362f;color:#ffd4cf}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 18px;border-bottom:1px solid var(--line);background:rgba(18,12,8,.92);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px;min-width:240px}.brand-icon{width:48px;height:48px;border-radius:12px}.brand strong{display:block;font-size:1.3rem;letter-spacing:.04em}.brand span{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow:auto;padding-bottom:2px}.top-actions input,.top-actions select{background:#120c08;color:var(--text);border:1px solid #5f3b23;border-radius:9px;padding:.58rem .7rem;min-width:160px}.file-button{display:inline-flex;align-items:center;white-space:nowrap}.file-button input{display:none}
.app-shell{height:calc(100vh - 72px);display:grid;grid-template-columns:300px minmax(520px,1fr) 330px;gap:12px;padding:12px}.panel{background:linear-gradient(180deg,rgba(36,23,14,.96),rgba(22,14,9,.98));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);min-height:0}.library-panel,.layers-panel{display:flex;flex-direction:column;overflow:hidden}.panel-heading{padding:14px;border-bottom:1px solid var(--line)}h2{font-size:1rem;margin:0}.panel-heading p,.helper{color:var(--muted);font-size:.76rem;margin:.25rem 0 0}.panel-heading input{margin-top:10px;width:100%;background:#100a07;border:1px solid #56351f;color:var(--text);border-radius:9px;padding:.65rem}.library{padding:10px;overflow:auto}.category-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-2);margin:10px 4px 7px}.ingredient-card{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;padding:8px;margin-bottom:8px;border:1px solid #4e301c;border-radius:12px;background:#1a100a;cursor:grab;user-select:none}.ingredient-card:hover{border-color:#b9782f;background:#21150d}.ingredient-card:active{cursor:grabbing}.ingredient-card img{width:72px;height:58px;object-fit:contain;background-image:linear-gradient(45deg,#2b211a 25%,transparent 25%),linear-gradient(-45deg,#2b211a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2b211a 75%),linear-gradient(-45deg,transparent 75%,#2b211a 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;border-radius:8px}.ingredient-card span{font-size:.82rem;line-height:1.2}.ingredient-card b{font-size:1.1rem;color:var(--gold)}.future-note{margin:10px;padding:12px;border:1px dashed #735038;border-radius:12px;color:var(--muted);font-size:.76rem}.future-note strong{display:block;color:var(--text);margin-bottom:4px}
.workspace-panel{display:flex;flex-direction:column;overflow:hidden}.workspace-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line)}.segmented{display:flex;gap:5px}.segmented button{padding:.5rem .65rem}.segmented .active{background:#5b371d;border-color:var(--gold)}.history-actions{display:flex;gap:6px}.stage-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto}.stage{position:relative;width:min(100%,960px);aspect-ratio:4/3;background:radial-gradient(ellipse at center,#4a321f 0,#23160e 55%,#120c08 100%);border:1px solid #6a4326;border-radius:18px;overflow:hidden;touch-action:none;box-shadow:inset 0 0 80px rgba(0,0,0,.55),0 12px 35px rgba(0,0,0,.35)}.stage-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:8.333% 11.111%;pointer-events:none}.empty-hint{position:absolute;inset:0;display:grid;place-items:center;color:#aa8c75;font-size:.9rem;pointer-events:none}.stage-item{position:absolute;transform-origin:center center;user-select:none;touch-action:none;cursor:grab;filter:drop-shadow(0 9px 8px rgba(0,0,0,.35));will-change:transform,left,top,width}.stage-item.selected{outline:2px solid var(--gold-2);outline-offset:7px;border-radius:8px}.stage-item.hidden{display:none}.statusbar{height:34px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:var(--muted);font-size:.72rem}
.layers-panel{overflow:auto;padding:0}.recipe-builder,.selection-controls,.layers-section{padding:13px;border-bottom:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.section-title span{font-size:.7rem;color:var(--muted)}textarea{width:100%;resize:vertical;background:#100a07;color:var(--text);border:1px solid #56351f;border-radius:10px;padding:.7rem;line-height:1.35}.row-actions{display:flex;gap:8px;margin-top:8px}.selection-controls label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:.78rem;color:var(--muted);margin-bottom:10px}.selection-controls input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--gold)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.layers-list{display:flex;flex-direction:column;gap:7px}.layer-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid #4d301c;background:#18100a;border-radius:10px;padding:6px;cursor:pointer}.layer-row.active{border-color:var(--gold);background:#2c1b10}.layer-row img{width:44px;height:38px;object-fit:contain}.layer-row span{font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-row button{padding:.25rem .4rem;font-size:.7rem}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#fff2dd;color:#24140a;padding:.7rem 1rem;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 35px rgba(0,0,0,.45);font-weight:700;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1180px){body{overflow:auto}.topbar{height:auto;align-items:flex-start;flex-direction:column}.top-actions{width:100%}.app-shell{height:auto;min-height:calc(100vh - 120px);grid-template-columns:250px minmax(480px,1fr);grid-template-areas:'lib work' 'layers work'}.library-panel{grid-area:lib;max-height:48vh}.workspace-panel{grid-area:work;min-height:760px}.layers-panel{grid-area:layers;max-height:50vh}}
@media(max-width:820px){.topbar{position:sticky;top:0;z-index:10}.brand{min-width:auto}.top-actions{display:grid;grid-template-columns:1fr 1fr}.top-actions input,.top-actions select{min-width:0;width:100%}.app-shell{display:flex;flex-direction:column;padding:8px}.library-panel{max-height:none}.workspace-panel{min-height:640px;order:-1}.layers-panel{max-height:none}.stage-wrap{padding:7px}.workspace-toolbar{align-items:flex-start;flex-direction:column}.segmented{width:100%;overflow:auto}.history-actions{width:100%;overflow:auto}.library{display:grid;grid-template-columns:1fr 1fr;gap:7px}.category-title{grid-column:1/-1}.ingredient-card{grid-template-columns:58px 1fr auto;margin:0}.ingredient-card img{width:58px;height:48px}}