:root{--bg:#0f1014;--panel:rgba(17,18,22,.94);--line:rgba(255,255,255,.1);--muted:rgba(255,255,255,.58);--input:rgba(255,255,255,.08);--pink:#ff5d9e;--orange:#ffa243;--green:#22c55e;--red:#ef4444;--wheel:min(74vw,520px)}
*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:transparent;color:#fff;overflow-x:hidden}
body.admin{background:radial-gradient(circle at 0 0,rgba(255,93,158,.18),transparent 30%),radial-gradient(circle at 100% 0,rgba(255,162,67,.16),transparent 26%),linear-gradient(180deg,#f8f5f4,#ece8e7);color:#111}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.page.admin{align-items:flex-start}
.layout{width:min(1160px,100%);display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,450px);gap:22px;align-items:start}
.stage{display:flex;align-items:center;justify-content:center;transition:opacity .35s ease,transform .35s ease}
body.display-idle .stage{opacity:0;transform:scale(.96);pointer-events:none}
.wheel-wrap{position:relative;width:var(--wheel);height:var(--wheel);filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}
canvas{width:100%;height:100%;display:block;cursor:pointer}
.spin-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:999px;border:4px solid #ececec;background:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 10px 20px rgba(0,0,0,.2);cursor:pointer;user-select:none;transition:.15s}
.spin-btn:hover:not(.busy){transform:translate(-50%,-50%) scale(1.05)}.spin-btn.busy{cursor:wait}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 18px 42px rgba(0,0,0,.3);max-height:calc(100vh - 44px);overflow:auto;color:#fff}
.panel.hidden{display:none}.title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.56;font-weight:800;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.box,.section{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:16px;padding:12px;margin-bottom:12px}
.status{display:grid;gap:8px}.status-row{display:flex;justify-content:space-between;gap:10px;font-size:12px}.status-row .l{color:var(--muted)}.status-row .v{font-weight:800;text-align:right}.v.on{color:#86efac}.v.off{color:#fca5a5}.v.pending{color:#fde68a}.v.claimed{color:#93c5fd}
.btns,.btns2,.btns3{display:grid;gap:10px}.btns{margin-bottom:12px}.btns2,.btns3{grid-template-columns:repeat(2,1fr)}.btns2{margin-top:10px}.btns3{margin-bottom:12px}
button{border:none;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:800;color:#fff;cursor:pointer;transition:.14s}
button:hover{opacity:.92}button:active{transform:scale(.98)}
.spin{background:linear-gradient(135deg,var(--pink),var(--orange))}.lock{background:var(--red)}.lock.unlock,.reset{background:var(--green)}.add{background:rgba(255,255,255,.08);border:1px solid var(--line)}.add[disabled]{opacity:.35;cursor:not-allowed}
.section h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.54;font-weight:800;margin-bottom:10px}
.treats{display:grid;gap:10px}.treat{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);border-radius:14px;padding:10px;display:grid;gap:9px}
.t-main{display:grid;grid-template-columns:28px 58px 1fr 36px;gap:10px;align-items:center}.t-sub{display:grid;grid-template-columns:74px repeat(4,1fr);gap:10px}
.f{display:flex;flex-direction:column;gap:4px}.f label{font-size:10px;color:rgba(255,255,255,.5)}.m{font-size:10px;color:rgba(255,255,255,.48);min-height:12px}
input[type=text],input[type=number],input[type=color],select{width:100%;border:1px solid rgba(255,255,255,.16);background:var(--input);color:#fff;border-radius:10px;padding:9px 10px;font-size:13px;font-weight:600}
select{cursor:pointer}select option{background:#15161b;color:#fff}
input[type=text]:focus,input[type=number]:focus,input[type=color]:focus,select:focus{outline:none;border-color:rgba(255,93,158,.72);box-shadow:0 0 0 3px rgba(255,93,158,.14)}
input.num{text-align:center}input.emoji{text-align:center;font-size:20px;padding-left:0;padding-right:0}input[type=color]{padding:4px;min-height:42px}
input[type=checkbox]{accent-color:var(--pink);width:18px;height:18px;cursor:pointer}.del{height:42px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:18px}.del[disabled]{opacity:.35;cursor:not-allowed}
.toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid rgba(255,255,255,.16);background:var(--input);border-radius:10px;font-size:12px;font-weight:700;color:#fff;padding:0 10px;text-align:center}
.grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.grid .wide{grid-column:1/-1}
.hint{font-size:11px;line-height:1.5;color:rgba(255,255,255,.54);margin-top:12px}
.result{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;z-index:20;padding:18px}.result.show{opacity:1}
.card{width:min(92vw,420px);padding:28px;border-radius:28px;text-align:center;background:linear-gradient(135deg,var(--pink),var(--orange));box-shadow:0 18px 44px rgba(0,0,0,.42);animation:b .55s cubic-bezier(.18,.9,.32,1.24)}
@keyframes b{0%{transform:scale(.2) rotate(-12deg);opacity:0}70%{transform:scale(1.04) rotate(2deg);opacity:1}100%{transform:none}}
.re{display:block;font-size:70px;line-height:1;margin-bottom:8px}.rn{font-size:clamp(28px,5vw,34px);font-weight:800;color:#fff;margin-bottom:8px;text-shadow:0 4px 12px rgba(0,0,0,.24)}.rs{font-size:15px;font-weight:600;color:rgba(255,255,255,.92)}
.flash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(124,0,0,.24);opacity:0;pointer-events:none;transition:.12s;z-index:18}.flash.show{opacity:1}.flash div{background:rgba(140,0,0,.94);color:#fff;border-radius:16px;padding:14px 22px;font-size:22px;font-weight:800}
.bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);max-width:calc(100vw - 30px);padding:10px 16px;border-radius:999px;background:rgba(10,10,12,.84);font-size:13px;font-weight:700;color:#fff;opacity:0;transition:.28s;z-index:30;white-space:nowrap}.bar.show{opacity:1}.bar.locked{background:rgba(175,20,20,.9)}
@media (max-width:980px){.layout{grid-template-columns:1fr}.panel{max-height:none}}
@media (max-width:680px){:root{--wheel:min(88vw,400px)}.page{padding:14px 12px 24px}.panel{padding:14px;border-radius:18px}.t-main{grid-template-columns:26px 54px 1fr 34px;gap:8px}.t-sub,.grid,.grid.two,.btns2,.btns3{grid-template-columns:1fr}.status-row{flex-direction:column;align-items:flex-start;gap:2px}.status-row .v{text-align:left}.bar{white-space:normal;text-align:center;border-radius:18px}}
body.streamer{--wheel:min(88vw,300px);background:#0e1117;color:#fff}
body.streamer .page{flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 8px}
body.streamer .layout{display:block;width:100%}
body.streamer .stage{opacity:1!important;transform:none!important}
body.streamer canvas,body.streamer .spin-btn{pointer-events:none}
body.streamer .panel,body.streamer .result,body.streamer .flash,body.streamer .bar{display:none!important}
.sr-latest{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);min-height:64px;margin-top:8px;transition:background .5s,border-color .5s;box-sizing:border-box}
.sr-emoji{font-size:36px;flex-shrink:0;line-height:1}
.sr-text{min-width:0;flex:1}
.sr-name{font-size:17px;font-weight:800;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:3px}
.sr-empty{color:rgba(255,255,255,.4);font-size:13px;font-style:italic}
.sr-hist-wrap{width:100%;margin-top:10px;box-sizing:border-box}
.sr-hist-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:800;padding:0 4px 8px}
#srHistItems{display:flex;flex-direction:column;gap:5px;transition:opacity .25s}
.sr-hi{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);border-left:4px solid var(--c,rgba(255,255,255,.25))}
.sr-hi-e{font-size:20px;flex-shrink:0;line-height:1}
.sr-hi-n{flex:1;min-width:0;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.multi-res{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);width:min(480px,92vw);background:rgba(14,17,23,.96);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:16px 18px;z-index:24;opacity:0;pointer-events:none;transition:opacity .35s;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.multi-res.show{opacity:1}
body.streamer .multi-res{display:none!important}
.mr-head{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);font-weight:800;margin-bottom:10px}
.mr-items{display:flex;flex-wrap:wrap;gap:8px}
.mr-item{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.08);border-left:4px solid var(--c)}
.mr-e{font-size:22px;flex-shrink:0}
.mr-n{font-size:13px;font-weight:700;color:#fff}
.mr-c{font-size:16px;font-weight:800;color:rgba(255,255,255,.58);margin-left:3px}
.sr-multi-wrap{width:100%;margin-top:10px;box-sizing:border-box}
.sr-multi-items{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.sr-multi-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);border-left:4px solid var(--c)}
.sr-mi-e2{font-size:20px;flex-shrink:0}
.sr-mi-n2{flex:1;min-width:0;font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-mi-c{font-size:15px;font-weight:800;color:rgba(255,255,255,.6);flex-shrink:0}

/* --- Presets & Steuerung --- */
.preset-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.preset-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.preset-actions button{padding:9px 8px;font-size:12px}
.preset-actions .danger{background:rgba(239,68,68,.85)}
.preset-hint{font-size:10px;color:rgba(255,255,255,.5);margin-top:8px}
.popout-btn{background:rgba(255,255,255,.1);border:1px solid var(--line);font-size:11px;font-weight:800;padding:7px 11px;border-radius:10px;text-transform:none;letter-spacing:0;color:#fff;white-space:nowrap}
.openlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.openlinks a{font-size:11px;font-weight:700;color:#fff;text-decoration:none;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.openlinks a:hover{background:rgba(255,255,255,.16)}

/* Kompaktes Popup-Fenster (zweiter Monitor): nur die Steuerung, kein Rad */
body.popup .page{padding:10px}
body.popup .layout{display:block;width:100%}
body.popup .stage{display:none!important}
body.popup .panel{border-radius:14px;padding:12px;max-height:none}
body.popup .popout-btn,body.popup .openlinks{display:none}