:root{color-scheme:dark;--bg:#101217;--card:#191d25;--line:#303745;--field:#10141b;--text:#f0f4fa;--muted:#9aa6b7;--blue:#77c9ff;--pink:#ff8fb8;--green:#8ee6b5;--orange:#ff9f43;--purple:#a98bff;--yellow:#ffc857}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body,button,input,textarea{font-family:"Finger Paint",system-ui,sans-serif}.view{min-height:100vh;padding:clamp(.75rem,1.5vw,1.5rem);display:grid;grid-template-rows:auto 1fr;gap:1rem}.topbar{display:grid;grid-template-columns:4rem 1fr 4rem;align-items:center}.topbar h1{text-align:center;font-size:clamp(1.6rem,3vw,2.7rem);margin:.25rem}.image-button,.small-image-button{position:relative;display:grid;place-items:center;overflow:hidden;width:3.6rem;height:3.6rem;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--text);box-shadow:0 6px 18px #0005;cursor:pointer}.image-button img,.small-image-button img{position:absolute;width:100%;height:100%;object-fit:cover}.image-button img:not([src=""])+span{z-index:0}.image-button span,.small-image-button span{font-size:1.15rem}.image-button:hover{border-color:var(--blue);transform:translateY(-1px)}button{border:0;border-radius:10px;padding:.7rem 1rem;color:#08111a;cursor:pointer}button:disabled{background:#3a4556!important;color:#89919d!important;cursor:not-allowed;filter:none!important}.blue{background:var(--blue)}.pink{background:var(--pink)}.green{background:var(--green)}.orange{background:var(--orange)}.purple{background:var(--purple)}
.generator-grid{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(240px,.72fr) minmax(330px,1.15fr);gap:1rem;min-height:0}.left-column,.middle-column,.right-column{display:grid;gap:1rem;min-height:0}.left-column{grid-template-rows:1.2fr .85fr .62fr}.middle-column{grid-template-rows:auto 1fr auto minmax(145px,.62fr) auto auto}.right-column{grid-template-rows:1fr auto auto}.panel,dialog{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px #0004}.text-panel{display:grid;grid-template-rows:auto 1fr;padding:.8rem;color:var(--muted);gap:.5rem}.text-panel textarea{resize:none;width:100%;min-height:150px;background:var(--field);color:var(--text);border:1px solid #3a4556;border-radius:10px;padding:.8rem;font-family:system-ui,sans-serif}.data-panel,.rune-panel{padding:.8rem;overflow:auto}.panel h2{font-size:.9rem;text-align:center;margin:0 0 .7rem}.data-panel dl,.info-list{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;margin:0;font-family:system-ui,sans-serif;font-size:.8rem}.data-panel dt,.info-list dt{color:var(--muted)}.data-panel dd,.info-list dd{margin:0;text-align:right;overflow-wrap:anywhere}.capacity-track,.progress-track{height:.8rem;margin-top:.75rem;background:#10141b;border:1px solid #3a4556;border-radius:99px;overflow:hidden}.capacity-track i,.progress-track i{display:block;width:0;height:100%;background:var(--blue)}#runes{display:grid;grid-template-columns:repeat(5,1fr);gap:.55rem}.rune{aspect-ratio:1;border:1px dashed #667286;border-radius:50%;display:grid;place-items:center;color:transparent;background:#10141b}.rune:after{content:"◇";color:#667286;font-family:system-ui,sans-serif}.status-lamps{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;font-family:system-ui,sans-serif;font-size:.7rem}.status-lamps div{display:flex;align-items:center;gap:.4rem}.lamp{width:.8rem;height:.8rem;border-radius:50%;box-shadow:0 0 10px currentColor}.lamp.blue{color:var(--blue);background:currentColor}.lamp.yellow{color:var(--yellow);background:currentColor}.lamp.green{color:var(--green);background:currentColor}.lamp.red{color:var(--pink);background:currentColor}.name-field{display:grid;gap:.35rem;color:var(--muted)}input{background:var(--field);color:var(--text);border:1px solid #3a4556;border-radius:10px;padding:.72rem}.image-panel{display:grid;place-items:center;align-content:center;gap:.6rem;padding:1rem;border-style:dashed;text-align:center;color:var(--muted);position:relative}.image-panel.drag{border-color:var(--blue);background:#77c9ff0d}.drop-action{background:transparent;color:var(--blue);border:1px dashed var(--blue)}#image-preview{max-width:100%;max-height:110px;border-radius:8px}.small-image-button{width:2.5rem;height:2.5rem;justify-self:end}.error,.message{min-height:1.2em;margin:0;color:#ff94a6;text-align:center;font-family:system-ui,sans-serif;font-size:.78rem}.preview-panel{display:grid;place-items:center;min-height:330px;padding:1rem;overflow:hidden}.empty-state{color:var(--muted)}#build-progress{width:min(80%,420px);text-align:center}.progress-track i{width:100%;animation:progress .35s ease-out}.preview-card{display:grid;place-items:center;gap:.8rem;text-align:center}.preview-symbol{width:min(320px,70%);aspect-ratio:1;border:2px dashed #667286;border-radius:14px;display:grid;place-items:center;color:#667286;background:#10141b}.preview-card small{color:var(--muted);font-family:system-ui,sans-serif}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.action-grid button,.library-actions button{min-width:0}.library-count{text-align:right;color:var(--blue);padding-right:.5rem}.library-box{min-height:0;height:calc(100vh - 13rem);overflow:auto;padding:1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:210px;gap:1rem;align-content:start}.library-box:empty:after{content:"Noch keine SIX-Codes gespeichert";grid-column:1/-1;align-self:center;text-align:center;color:var(--muted)}.library-tile{display:grid;grid-template-rows:1fr auto;gap:.5rem;padding:.7rem;background:#10141b;color:var(--text);border:1px solid var(--line);border-radius:12px}.library-tile.selected{border-color:var(--blue);box-shadow:0 0 0 2px #77c9ff66}.tile-preview{display:grid;place-items:center;border:1px dashed #667286;border-radius:9px;color:#667286}.tile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.library-actions{display:flex;justify-content:center;gap:.75rem}.library-actions button{min-width:9rem}
dialog{color:var(--text);width:min(560px,92vw);max-height:82vh;overflow:auto;padding:1.4rem}dialog::backdrop{background:#05070bcc}dialog h2{text-align:center;margin-top:0}.switch-setting{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.75rem;margin:1rem 0;color:var(--muted)}.switch-setting input{position:absolute;opacity:0}.switch-setting i{position:relative;width:3.25rem;height:1.65rem;border-radius:99px;background:var(--pink);cursor:pointer}.switch-setting i:after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.25rem;height:1.25rem;border-radius:50%;background:white;transition:.18s}.switch-setting input:checked+i{background:var(--blue)}.switch-setting input:checked+i:after{transform:translateX(1.6rem)}.dialog-actions{display:flex;justify-content:center;gap:.7rem;margin-top:1.3rem}.info-list{gap:.65rem 1rem}.info-list dd.content{max-width:300px;white-space:pre-wrap;text-align:left}@keyframes progress{from{width:0}to{width:100%}}
@media(max-width:1050px){.generator-grid{grid-template-columns:1fr 1fr}.right-column{grid-column:1/-1}.middle-spacer{min-height:80px}.preview-panel{min-height:420px}body{overflow:auto}}
@media(max-width:680px){.view{display:block}.topbar{margin-bottom:1rem}.generator-grid{display:block}.left-column,.middle-column,.right-column{margin-bottom:1rem}.left-column>* ,.middle-column>*,.right-column>*{margin-bottom:1rem}.middle-spacer{display:none}.action-grid{grid-template-columns:1fr 1fr}.library-box{height:65vh;grid-template-columns:1fr 1fr}.library-actions{display:grid;grid-template-columns:1fr 1fr}.library-actions button{min-width:0}}

/* Desktop-Anordnung gemäß der gelieferten Layoutskizze. */
@media(min-width:1051px){
  .view{height:100vh;overflow:hidden;padding:1rem 1.4rem 1.4rem;grid-template-rows:5.8rem minmax(0,1fr)}
  .topbar{grid-template-columns:5rem 1fr 5rem;padding:0 .6rem}
  .topbar h1{font-size:clamp(1.8rem,2.25vw,2.65rem)}
  .image-button{width:4rem;height:4rem;background:transparent;border:2px solid var(--line);box-shadow:none}
  .topbar .image-button:last-child{justify-self:end}
  .generator-grid{grid-template-columns:minmax(330px,31%) minmax(300px,28%) minmax(390px,33%);justify-content:space-between;gap:clamp(2rem,3.8vw,5rem);padding:5rem 1.2rem .4rem;min-height:0}
  .left-column{grid-template-rows:minmax(280px,1fr) 205px 72px;gap:2.25rem}
  .middle-column{grid-template-rows:auto minmax(160px,1fr) 4rem 12rem auto;gap:.75rem;align-self:stretch}
  .right-column{grid-template-rows:minmax(430px,1fr) 7.8rem auto;gap:1.5rem}
  .text-panel,.data-panel,.rune-panel,.preview-panel{border-radius:3px}
  .text-panel{padding:1.4rem}
  .text-panel textarea{border:0;background:transparent;padding:.5rem;outline:none}
  .data-panel{padding:1.4rem}
  .rune-panel{padding:.55rem 1rem;overflow:hidden}
  .rune-panel h2{text-align:left;margin:0 0 .35rem;font-size:.72rem}
  #runes{display:grid;grid-template-columns:repeat(10,1fr);gap:.45rem;align-items:center}
  .rune{width:100%;max-width:1.2rem;aspect-ratio:1;border:1px dashed #667286;border-radius:2px;background:transparent;justify-self:center}
  .rune:after{content:""}
  .name-field{align-self:end}
  .name-field span{font-size:.78rem}
  .image-row{display:grid;grid-template-columns:minmax(0,1fr) 4rem;gap:1.4rem;align-items:center;min-height:0}
  .image-panel{height:12rem;border-radius:3px}
  .small-image-button{width:3.2rem;height:3.2rem;border-radius:12px;justify-self:center;box-shadow:none}
  .preview-panel{min-height:0;height:100%}
  .action-grid{height:7.8rem;align-self:start;gap:.75rem}
  .action-grid button{padding:.55rem .4rem}
}