*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#eee;background:#080808}a{color:#ff4b4b;text-decoration:none}.public{min-height:100vh;padding:25px;background:radial-gradient(circle at top,#4b0000,#090909 62%)}.install-card,.request-card{max-width:600px;margin:35px auto;padding:28px;background:#111;border:1px solid #f22;border-radius:20px;box-shadow:0 0 35px #e0000055}h1{margin-top:8px;text-shadow:0 0 12px red}.live{color:#ff3c3c;font-weight:900;letter-spacing:2px}label{display:block;margin-top:9px}input,textarea,button{width:100%;padding:13px;margin:6px 0 10px;background:#181818;color:#fff;border:1px solid #682020;border-radius:9px;font-size:15px}textarea{min-height:105px}button{background:#c90000;border-color:#ff3636;font-weight:900;cursor:pointer}.error,.notice{padding:12px;margin:12px 0;border-left:4px solid red;background:#2b1010}.notice{border-color:#32c832;background:#102510}.admin-body{display:flex;min-height:100vh}.sidebar{position:fixed;width:250px;height:100vh;background:linear-gradient(#111,#080808);border-right:1px solid #4c1515;padding:20px 14px;overflow:auto}.brand{font-size:22px;font-weight:900;color:#fff;text-align:center;text-shadow:0 0 12px red}.brand span{color:#f22;font-size:15px}.profile{text-align:center;padding:20px 0}.profile small,.profile b{display:block;margin:5px}.avatar{width:76px;height:76px;margin:auto;border-radius:50%;display:grid;place-items:center;font-size:35px;font-weight:bold;background:#260000;border:3px solid #f22;box-shadow:0 0 20px red}.sidebar nav a,.logout{display:block;padding:12px;margin:5px 0;border-radius:8px;color:#ddd}.sidebar nav a:hover,.sidebar nav a.active{background:#8c0000;color:white;box-shadow:0 0 12px #e0000066}.logout{margin-top:20px;background:#250000}.content{margin-left:250px;width:calc(100% - 250px);padding:24px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #4c1515;margin-bottom:24px}.top p{color:#aaa}.live-actions{display:flex;gap:10px}.live-actions a{padding:12px 18px;color:#fff;border-radius:8px;font-weight:bold}.green{background:#087b28}.red{background:#b00000}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.stat,.panel{background:#111;border:1px solid #4e1818;border-radius:14px;padding:20px}.stat strong{font-size:38px;color:#ff3535;display:block}.stat span{color:#bbb}.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.icon-grid a{min-height:130px;background:#111;border:1px solid #4e1818;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#eee;transition:.2s}.icon-grid a:hover{border-color:red;box-shadow:0 0 18px #d0000055;transform:translateY(-2px)}.ico{font-size:38px;color:#f33;margin-bottom:10px}.request{padding:15px;border-bottom:1px solid #482020}.badge{float:right;background:#8b0000;padding:5px 9px;border-radius:15px}.row{display:flex;justify-content:space-between;gap:15px;padding:13px;border-bottom:1px solid #3d1c1c}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}code{display:block;padding:14px;background:#050505;border:1px solid #532020;overflow:auto}@media(max-width:850px){.sidebar{position:relative;width:100%;height:auto}.admin-body{display:block}.content{margin:0;width:100%;padding:14px}.cards,.icon-grid{grid-template-columns:1fr 1fr}.top{align-items:flex-start;gap:12px;flex-direction:column}.form-grid{grid-template-columns:1fr}}@media(max-width:520px){.cards,.icon-grid{grid-template-columns:1fr}.live-actions{width:100%}.live-actions a{flex:1;text-align:center}}
.now-live{padding:12px 18px;border-radius:8px;background:#087b28;color:#fff;font-weight:900;box-shadow:0 0 18px #00c83c88}
.live-success{padding:18px;margin:0 0 20px;border:2px solid #21d653;border-radius:12px;background:#0b2914;color:#72ff97;font-size:20px;font-weight:900;text-align:center;box-shadow:0 0 20px #00c83c55}
.current-dj{padding:14px 18px;margin-bottom:20px;background:#171717;border-left:5px solid #21d653;border-radius:8px;color:#eee}
.current-dj.offline{border-left-color:#e00000}

.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.theme-choice{position:relative;padding:16px;background:#171717;border:2px solid #333;border-radius:12px}
.theme-choice.selected{border-color:#20c64a;box-shadow:0 0 18px #20c64a55}
.theme-choice h3{margin-top:0}.widget-preview,.live-widget{width:190px;min-height:105px;padding:8px;display:flex;align-items:center;gap:8px;overflow:hidden}
.preview-photo,.widget-dj-photo{width:65px;height:78px;display:grid;place-items:center;background:#ddd;color:#222;font-weight:900;border:3px solid #bbb}
.widget-dj-photo img{width:100%;height:100%;object-fit:cover}
.preview-text,.widget-dj-info{display:flex;flex-direction:column}.preview-text b,.widget-dj-info b{font-size:13px}.preview-text span,.widget-dj-info span{font-size:12px}
.theme-buttons{display:flex;gap:8px}.theme-buttons a{padding:7px 12px;border-radius:6px;color:#fff;font-weight:bold}.choose{background:#079321}.demo{background:#555}.active-theme{display:block;margin-top:10px;color:#4cff75}
.theme-i-query{background:linear-gradient(#f5f5f5,#333);color:#00d9ff}.theme-i-easy{background:#111;color:#fff;border-bottom:8px solid #19c83b}.theme-i-ventum{background:#eee;color:#222;border:4px solid #bbb;flex-wrap:wrap}.theme-i-easter{background:linear-gradient(135deg,#fff4c4,#bff5ff,#ffc8e5);color:#7b155b}.theme-i-sint{background:radial-gradient(circle,#122a70,#020617);color:#ffe54d}.theme-i-xmas{background:linear-gradient(135deg,#063b21,#fff,#8c0018);color:#b3001b}
.next-dj,.widget-next{width:100%;font-size:11px;border-top:1px solid #999;padding-top:4px}.widget-body{margin:0;padding:10px;background:transparent}.live-widget{width:240px;min-height:120px;border-radius:8px}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.theme-grid{grid-template-columns:1fr}}

.dj-list{display:grid;gap:14px}.dj-edit{display:flex;gap:16px;align-items:center;padding:15px;background:#0b0b0b;border:1px solid #4e1818;border-radius:12px}
.dj-thumb{width:100px;height:100px;flex:0 0 100px;border-radius:50%;overflow:hidden;border:3px solid #e22;box-shadow:0 0 15px #e0000066;display:grid;place-items:center;font-weight:900;font-size:25px}
.dj-thumb img{width:100%;height:100%;object-fit:cover}.dj-fields{flex:1}.dj-fields small{display:block;margin:3px 0 8px;color:#aaa}.file-field{padding:8px;background:#151515;border:1px solid #682020;border-radius:9px}.file-field input{margin-bottom:0}
@media(max-width:600px){.dj-edit{align-items:flex-start;flex-direction:column}.dj-thumb{margin:auto}}

.html-code-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:25px}.html-code-card{background:#f7f7f7;color:#555;border:1px solid #ccc;border-radius:10px;padding:18px;text-align:center}.html-code-card h3{min-height:48px;font-size:20px;text-align:left}.html-book{width:82px;height:82px;margin:10px auto 18px;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-7deg);background:linear-gradient(135deg,#aa8b50,#fff 35%,#ddd);border:4px solid #9a7d48;color:#146c88;font-weight:900;font-size:23px;box-shadow:3px 4px 5px #0004}.html-book small{font-size:11px}.html-code-card button{width:auto;padding:8px 12px;margin:4px;background:#078f16}.code-box{display:none;text-align:left;margin-top:15px}.code-box.open{display:block}.code-box textarea{min-height:130px;background:#111}.code-actions{display:flex;flex-wrap:wrap;gap:5px}.code-actions a{padding:9px 12px;background:#555;color:white;border-radius:7px;font-weight:bold}.np-body{margin:0;padding:6px;background:transparent}.np-widget{min-height:70px;padding:12px 18px;border-radius:10px;background:#111;border:1px solid #e22;color:#fff;box-shadow:0 0 15px #d0000044;display:flex;flex-direction:column;justify-content:center}.np-widget small{color:#ff4242;font-weight:900;margin-bottom:5px}.np-widget strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:1100px){.html-code-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.html-code-grid{grid-template-columns:1fr}}

.step-box{margin:18px 0;padding:20px;background:#0d0d0d;border:1px solid #4d1818;border-radius:12px}
.dj-theme-grid-v6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dj-theme-card-v6{padding:16px;background:#171717;border:2px solid #333;border-radius:12px}
.dj-theme-card-v6.selected{border-color:#20c64a;box-shadow:0 0 18px #20c64a55}
.theme-demo-frame{width:100%;height:190px;border:0;background:transparent}
@media(max-width:1000px){.dj-theme-grid-v6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dj-theme-grid-v6{grid-template-columns:1fr}}

/* V7: Nu / Straks tekstbalk onder Deejay Display */
.live-widget,.widget-preview{position:relative;padding-bottom:31px}
.dj-now-next{position:absolute;left:0;right:0;bottom:0;height:27px;padding:5px 7px;background:#050505;color:#fff;border-top:1px solid #333;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dj-now-next strong:first-child{color:#20e55a}
.theme-i-sint .dj-now-next strong:first-child{color:#ffe64f}
.theme-i-xmas .dj-now-next strong:first-child{color:#ff304f}
.theme-i-easter .dj-now-next strong:first-child{color:#d8208d}

/* V8: tekstbalk echt BUITEN en ONDER de volledige Deejay Display */
.widget-body{display:inline-flex;flex-direction:column;align-items:stretch}
.live-widget{position:relative;padding-bottom:8px}
.live-widget .dj-now-next{display:none!important}
.dj-now-next-outside{width:240px;box-sizing:border-box;margin-top:4px;padding:7px 8px;background:#050505;color:#fff;border:1px solid #333;border-radius:0 0 6px 6px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dj-now-next-outside strong:first-child{color:#20e55a}

/* V9: Deejay Display exact 150 x 160 px, tekstbalk apart eronder */
.widget-body{display:inline-flex!important;flex-direction:column!important;align-items:flex-start!important;margin:0!important;padding:0!important}
.live-widget{width:150px!important;height:160px!important;min-height:160px!important;box-sizing:border-box!important;padding:7px!important;gap:5px!important}
.widget-dj-photo{width:58px!important;height:92px!important;flex:0 0 58px!important}
.widget-dj-info{min-width:0!important}
.widget-dj-info b{font-size:10px!important}
.widget-dj-info span{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:72px!important}
.dj-now-next-outside{width:150px!important;box-sizing:border-box!important;margin-top:3px!important;padding:6px 5px!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* V10: compacte totale DJ-widget, exact 150 x 160 inclusief tekstbalk */
.widget-body{
 width:150px!important;
 height:160px!important;
 min-width:150px!important;
 max-width:150px!important;
 overflow:hidden!important;
 display:flex!important;
 flex-direction:column!important;
 margin:0!important;
 padding:0!important;
}
.live-widget{
 width:150px!important;
 height:132px!important;
 min-height:132px!important;
 max-height:132px!important;
 box-sizing:border-box!important;
 margin:0!important;
 padding:7px!important;
 border-radius:6px 6px 0 0!important;
 overflow:hidden!important;
}
.widget-dj-photo{
 width:62px!important;
 height:105px!important;
 flex:0 0 62px!important;
}
.widget-dj-info{
 flex:1!important;
 min-width:0!important;
 max-width:67px!important;
}
.widget-dj-info b,.widget-dj-info span{
 font-size:10px!important;
 line-height:12px!important;
}
.dj-now-next-outside{
 width:150px!important;
 height:28px!important;
 min-height:28px!important;
 max-height:28px!important;
 box-sizing:border-box!important;
 margin:0!important;
 padding:7px 4px!important;
 border-radius:0 0 5px 5px!important;
 font-size:9px!important;
 line-height:12px!important;
 overflow:hidden!important;
 white-space:nowrap!important;
 text-overflow:ellipsis!important;
}

/* V11: geen achtergrond achter DJ-foto/display */
html, body.dj-display-body, .widget-body{
 background:transparent!important;
}
.live-widget{
 background:transparent!important;
 border:none!important;
 box-shadow:none!important;
}
.live-widget.theme-i-query,
.live-widget.theme-i-easy,
.live-widget.theme-i-ventum,
.live-widget.theme-i-easter,
.live-widget.theme-i-sint,
.live-widget.theme-i-xmas{
 background:transparent!important;
 border:none!important;
 box-shadow:none!important;
}
.widget-dj-photo{
 background:transparent!important;
}

/* V12: Deejay Display exact 150 x 150, transparant, balk apart eronder */
html,body.dj-display-body,.widget-body{
 background:transparent!important;
 margin:0!important;
 padding:0!important;
}
.widget-body{
 width:150px!important;
 height:auto!important;
 min-width:150px!important;
 max-width:150px!important;
 overflow:visible!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
}
.live-widget{
 width:150px!important;
 height:150px!important;
 min-height:150px!important;
 max-height:150px!important;
 box-sizing:border-box!important;
 margin:0!important;
 padding:7px!important;
 background:transparent!important;
 border:none!important;
 box-shadow:none!important;
 overflow:hidden!important;
}
.live-widget.theme-i-query,.live-widget.theme-i-easy,.live-widget.theme-i-ventum,
.live-widget.theme-i-easter,.live-widget.theme-i-sint,.live-widget.theme-i-xmas{
 width:150px!important;height:150px!important;min-height:150px!important;max-height:150px!important;
 background:transparent!important;border:none!important;box-shadow:none!important;
}
.dj-now-next-outside{
 position:relative!important;
 width:150px!important;
 height:28px!important;
 min-height:28px!important;
 max-height:28px!important;
 box-sizing:border-box!important;
 margin:3px 0 0!important;
 padding:7px 4px!important;
 background:#050505!important;
 color:#fff!important;
 font-size:9px!important;
 line-height:12px!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
}