:root{--bg:#0c1012;--top:#111516;--surface:#171d1c;--surface2:#202725;--border:#38433f;--text:#fffaf0;--muted:#b5b8ae;--mint:#61c7a7;--coral:#ef6951;--gold:#f1b447;--danger:#f07a70;font-family:Inter,Segoe UI,system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 0,rgba(239,105,81,.12),transparent 28%),radial-gradient(circle at 88% 0,rgba(97,199,167,.1),transparent 30%),var(--bg);color:var(--text);min-height:100vh}button,input,select,textarea{font:inherit}button,a{transition:.16s ease}.topbar{height:64px;display:flex;align-items:center;gap:24px;padding:0 24px;background:rgba(17,21,22,.96);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap}.logo,.login-mark{display:grid;place-items:center;background:linear-gradient(135deg,var(--coral),var(--gold),var(--mint));color:#101412}.logo{width:30px;height:30px;border-radius:9px}.topbar nav{display:flex;gap:5px;flex:1}.topbar nav a{color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:8px}.topbar nav a:hover,.topbar nav a.active{background:#29312e;color:var(--text)}button,.button-link{border:0;border-radius:9px;padding:10px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary{background:linear-gradient(135deg,var(--coral),var(--gold),var(--mint));color:#101412;font-weight:600}.primary:hover{filter:brightness(1.08)}.secondary{background:#252d2a;color:var(--text);border:1px solid var(--border)}.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.danger{background:rgba(240,122,112,.12);color:#ffaaa3;border:1px solid rgba(240,122,112,.4)}.page{max-width:1540px;margin:auto;padding:24px}.page h1,.page h2,.page h3{margin:0 0 5px;font-weight:600}.page h1{font-size:1.45rem}.page h2{font-size:1.08rem}.page h3{font-size:.9rem}.page p{color:var(--muted);margin:4px 0 0}.intro-row,.section-head,.output-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}.intro-row{margin-bottom:18px}.inline-field{display:flex;align-items:center;gap:9px;color:var(--muted)}input,select,textarea{width:100%;background:#101614;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 11px}label{display:grid;gap:6px;color:var(--muted)}.inline-field select{width:150px}.workspace{display:grid;grid-template-columns:minmax(600px,1.25fr) minmax(380px,.75fr);gap:16px;align-items:start}.ingredient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.ingredient{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}.art{height:74px;background-image:linear-gradient(180deg,transparent 55%,rgba(12,16,18,.68)),url('/static/card-sprite.webp');background-repeat:no-repeat;background-size:400% auto}.art-1{background-position:0 25%}.art-2{background-position:33.333% 25%}.art-3{background-position:66.666% 25%}.art-4{background-position:100% 25%}.art-5{background-position:0 75%}.art-6{background-position:33.333% 75%}.art-7{background-position:66.666% 75%}.art-8{background-position:100% 75%}.ingredient-body{padding:10px}.ingredient-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.dice{padding:4px 8px;background:#2a3531;color:var(--muted)}.dna-box,.output-panel,.admin-card,.admin-table,.saved-card{background:var(--surface);border:1px solid var(--border);border-radius:13px}.dna-box{padding:14px;margin-top:12px;background:linear-gradient(120deg,rgba(239,105,81,.1),rgba(97,199,167,.07)),var(--surface)}.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.chip{border:1px solid var(--border);background:#222a27;color:var(--text);border-radius:99px}.chip[aria-pressed=true]{border-color:var(--mint);background:#304139}.output-panel{padding:14px;position:sticky;top:80px}.language{display:flex;gap:4px}.language button{padding:6px 8px;background:#101614;color:var(--muted);border:1px solid var(--border)}.language button.active{border-color:var(--mint);color:var(--text)}#result{min-height:430px;margin-top:12px;resize:vertical;line-height:1.55}.output-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.88rem;margin-top:7px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.flash{padding:11px 13px;border-radius:8px;margin-bottom:14px}.flash.success{background:rgba(97,199,167,.13);border:1px solid rgba(97,199,167,.4)}.flash.error{background:rgba(240,122,112,.13);border:1px solid rgba(240,122,112,.4)}dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;min-width:min(420px,90vw)}dialog::backdrop{background:rgba(0,0,0,.68)}.stack{display:grid;gap:13px}.login-page{display:grid;place-items:center;min-height:100vh}.login-card{width:min(420px,94vw);padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:18px;text-align:center}.login-mark{width:54px;height:54px;border-radius:15px;margin:0 auto 15px;font-size:1.5rem}.login-card .stack{text-align:left;margin-top:24px}.admin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.admin-card,.admin-table{padding:15px}.admin-card p{margin-bottom:13px}.admin-card textarea{min-height:90px}.admin-table{margin-top:14px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;margin-top:10px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--border);vertical-align:top}th{color:var(--muted);font-size:.85rem}.inactive{opacity:.5}.saved-list{display:grid;gap:11px}.saved-card{padding:15px;display:grid;grid-template-columns:220px 1fr auto;gap:15px;align-items:start}.saved-card summary{cursor:pointer;color:var(--mint)}pre{white-space:pre-wrap;font-family:inherit;color:var(--text);line-height:1.5}.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:12px}code{color:var(--gold)}
.table-actions{display:flex;gap:6px}.admin-table td input{min-width:160px}.admin-table td textarea{min-width:260px;min-height:75px}
.version-badge{padding:3px 7px;border:1px solid var(--border);border-radius:99px;color:var(--muted);font-size:.72rem;font-weight:500;background:rgba(255,255,255,.035)}.stack small{color:var(--muted);line-height:1.45}
.art-9{background-position:0 25%}.art-10{background-position:33.333% 25%}
.import-counts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.status-pill{display:inline-flex;padding:4px 8px;border-radius:99px;border:1px solid var(--border);font-size:.78rem;white-space:nowrap}.status-neu{color:var(--mint);border-color:rgba(97,199,167,.45);background:rgba(97,199,167,.09)}.status-vorhanden,.status-doppelt{color:var(--gold);border-color:rgba(246,192,93,.42);background:rgba(246,192,93,.08)}.status-fehler{color:#ffaaa3;border-color:rgba(240,122,112,.45);background:rgba(240,122,112,.09)}.import-preview-table{max-height:580px;margin-top:12px;border:1px solid var(--border);border-radius:10px}.import-preview-table table{margin-top:0;min-width:1200px}.import-preview-table thead{position:sticky;top:0;background:var(--surface);z-index:1}.import-preview-table td:nth-child(6){min-width:360px;white-space:normal}.import-preview-table input[type=checkbox]{width:auto}.import-cancel{margin-top:8px}
.order-hint{padding:9px 10px;background:#222a27;border-radius:8px}.option-group{margin-top:18px}.option-group h3{color:var(--gold);margin-bottom:8px}.sortable-list{display:grid;gap:6px}.option-row{display:grid;grid-template-columns:42px 34px minmax(180px,1fr) 70px auto;align-items:center;gap:10px;padding:9px;background:#101614;border:1px solid var(--border);border-radius:9px}.option-row small{display:block;color:var(--muted);margin-top:3px}.drag-handle{background:#252d2a;color:var(--muted);padding:7px;cursor:grab;font-size:1.15rem}.drag-handle:active{cursor:grabbing}.option-row.dragging{opacity:.35;border-color:var(--mint)}.position{color:var(--muted);text-align:center}.state{color:var(--muted);font-size:.85rem}#sort-status{color:var(--mint);font-size:.88rem}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.output-panel{position:static}.admin-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.topbar{height:auto;align-items:flex-start;flex-wrap:wrap;padding:12px}.topbar nav{order:3;width:100%;overflow:auto}.topbar nav a{padding:7px}.page{padding:15px}.intro-row{align-items:flex-start;flex-direction:column}.workspace{display:block}.ingredient-grid{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.saved-card{grid-template-columns:1fr}.output-panel{margin-top:12px}.art{height:82px}.option-row{grid-template-columns:38px 28px 1fr}.option-row .state{display:none}.option-row .table-actions{grid-column:3}}

/* Kompakte Zutatenkarten: Bezeichnung und Werkzeuge liegen direkt im Bild. */
.art{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:9px;background-image:linear-gradient(180deg,rgba(12,16,18,.03) 18%,rgba(12,16,18,.82) 100%),url('/static/card-sprite.webp')}
.art-label{color:#fffaf0;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.78);letter-spacing:.02em}
.art-tools{display:flex;gap:5px}
.art-icon{width:31px;height:31px;padding:0;border:1px solid rgba(255,255,255,.22);background:rgba(45,49,48,.72);backdrop-filter:blur(5px);color:#fff;border-radius:8px;font-size:1rem}
.art-icon:hover{background:rgba(20,24,23,.92)}
.art-icon[aria-pressed=true]{background:rgba(97,199,167,.88);color:#0d1713;border-color:var(--mint)}
.ingredient-body{padding:8px}
@media(max-width:700px){.art{height:82px}}
.mode-switch{display:flex;gap:4px;padding:4px;margin:0 0 14px;background:#151c1a;border:1px solid var(--border);border-radius:10px}
.mode-switch button{background:transparent;color:var(--muted);padding:8px 11px}
.mode-switch button.active{background:#304139;color:var(--text)}
.intensity{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px;background:#202725;border-radius:9px}
.intensity select{width:150px}
[hidden]{display:none!important}