*{box-sizing:border-box;font-family:'Space Mono',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{margin:0;background:#101010;color:#eee}
#app{display:flex;flex-direction:column;min-height:100vh;gap:16px;padding:16px;max-width:1400px;margin:0 auto}
header{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
#time{font-size:2rem;font-weight:700;padding:20px 24px;background:#1e1e1e;border:1px solid #2f2f2f;border-radius:18px;min-width:220px;width:220px;text-align:center;flex:0 0 220px}
.panel{background:#161616;padding:20px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.intercom-card{flex:1 1 620px;min-width:320px}
.row{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.row.wrap{flex-wrap:wrap}
.field-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
main{display:flex;flex-wrap:wrap;gap:16px}
#left,#right{flex:1 1 48%;min-width:320px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
ul{list-style:none;padding:0;margin:12px 0;max-height:320px;overflow:auto}
li{position:relative;padding:14px 14px 14px 20px;border-radius:16px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s}
li:hover{border-color:#444}
li.active{background:#2f1254;border-color:#482b72}
li .progress-underlay{position:absolute;left:0;top:0;width:0;height:100%;background:rgba(255,255,255,.08);border-radius:16px;z-index:0;transition:width .2s ease}
li .item-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px}
li .detail-group{display:flex;flex-direction:column;gap:4px;min-width:0}
li .item-info{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
li .item-info span{font-size:.95rem;color:#ccc}
li .item-actions{display:flex;gap:8px;align-items:center}
li .item-actions button{padding:6px 10px;font-size:.9rem;border-radius:10px;border:1px solid #3a3a3a;background:#1d1d1d;color:#eee}
li .item-actions button:hover{background:#2a2a2a}
.bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:18px 20px;border-top:1px solid #222;border-radius:0 0 18px 18px;background:#131313}
button{background:#262626;color:#fff;border:1px solid #333;padding:10px 14px;border-radius:10px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
button:hover{border-color:#5b5b5b}
button.action-button.inactive{background:#2d2d2d;color:#bbb}
.page-banner{position:relative;display:flex;align-items:center;justify-content:center;height:160px;border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.page-banner:hover{transform:translateY(-1px);box-shadow:0 14px 35px rgba(0,0,0,.25)}
.page-banner .banner-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.65)}
.banner-title{position:relative;z-index:1;font-size:2rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.6)}
.brand-banner{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;background:#111;border:1px solid #2f2f2f;border-radius:14px;padding:12px 16px;font-size:.95rem;letter-spacing:.08em;transition:background .2s,border-color .2s;margin-top:-6px;z-index:1;position:relative}
.brand-banner:hover{background:#1f1f1f;border-color:#444}
.brand-banner .brand-logo{height:28px;width:auto;display:block}
button.action-button.active-play{background:#2a8;color:#011;border-color:#2f9;color:#011}
button.action-button.active-pause{background:#b33;color:#fff;border-color:#d55}
button.action-button.active-announcement{background:#2a8;color:#fff;border-color:#2f9}
button.action-button.active-announcement.inactive{background:#2d2d2d;color:#bbb;border-color:#333}
input[type=file],input[type=number]{width:100%;margin-top:12px;padding:10px 12px;background:#121212;border:1px solid #333;border-radius:10px;color:#eee}
#status{margin-top:8px;font-size:.95rem;color:#aaa}
#currentSong,#currentMedia{font-weight:700;margin-bottom:10px}
.media-mirror{margin-top:16px;padding:14px;background:#121212;border:1px solid #292929;border-radius:14px}
.media-mirror h4{margin:0 0 10px;font-size:1rem;color:#ccc}
.mirror-content{min-height:220px;display:flex;align-items:center;justify-content:center;background:#080808;border-radius:14px;overflow:hidden}
.mirror-content img,.mirror-content video{max-width:100%;max-height:100%;display:block}
.open-display-row{margin-top:12px}
@media (max-width:900px){main{flex-direction:column}#left,#right{flex:1 1 100%}}