*{box-sizing:border-box}:root{font-family:Arial,sans-serif;color:#fff;background:#0b0d10}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#202630,#0b0d10 55%)}a{color:#fff;text-decoration:none}.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:#11151a;border-bottom:1px solid #2b3139}.topbar h1{margin:0}.topbar span{color:#aab2bd}.container{max-width:1200px;margin:auto;padding:24px}.card{background:#171b21;border:1px solid #2e343d;border-radius:18px;padding:22px;margin-bottom:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.stat{background:#11151a;border:1px solid #2e343d;border-radius:16px;padding:22px;text-align:center}.stat strong{display:block;font-size:36px}.stat span{color:#9da6b1}button{background:#df2424;color:#fff;border:0;border-radius:10px;padding:12px 16px;font-weight:700}button.danger{background:#681f25}input,select{background:#0e1217;color:#fff;border:1px solid #49515d;border-radius:9px;padding:11px}.form-grid{display:flex;gap:10px;flex-wrap:wrap}.form-grid input{flex:1;min-width:220px}.screen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.screen-card{background:#0e1217;border:1px solid #2e343d;border-radius:14px;padding:16px}.screen-title{display:flex;gap:9px;align-items:center}.status-dot{width:12px;height:12px;border-radius:50%}.online{background:#22c55e;box-shadow:0 0 12px #22c55e}.offline{background:#ef4444}.small{color:#9da6b1;font-size:12px}code{font-size:12px;word-break:break-all;color:#9fe3ff}.manage-row{display:grid;grid-template-columns:1fr 220px auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #29303a}.playlist-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.playlistTab{background:#303640}.playlistTab.active{background:#df2424}.playlist-panel{display:none}.playlist-panel.active{display:block}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.media-item{background:#0e1217;border:1px solid #2e343d;border-radius:14px;padding:10px}.media-item video,.media-item img{width:100%;height:140px;object-fit:contain;background:#000;border-radius:9px}.dropzone{border:2px dashed #4b5563;border-radius:16px;padding:34px;text-align:center;cursor:pointer;background:#0e1217}.dropzone input{display:none}.progress-wrap{height:14px;background:#0e1217;border-radius:10px;overflow:hidden;margin-top:16px}.progress-bar{height:100%;width:0;background:#df2424}.hidden{display:none}.section-head{display:flex;justify-content:space-between;gap:14px}.login-page{display:grid;place-items:center}.login-card{width:min(430px,92vw);background:#171b21;border:1px solid #2e343d;border-radius:20px;padding:30px;text-align:center}.login-card input{width:100%;margin-bottom:12px}.brand-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#df2424;font-size:34px;font-weight:800}.error{color:#ff8c8c}@media(max-width:700px){.stats{grid-template-columns:1fr}.manage-row{grid-template-columns:1fr}}

.playlist-create{margin-bottom:18px}
.playlist-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.playlist-card{background:#0e1217;border:1px solid #2e343d;border-radius:16px;padding:16px}
.playlist-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.playlist-card-head h3{margin:0 0 5px}.playlist-card-head span{color:#9da6b1;font-size:13px}
.playlist-selected-media{display:flex;flex-direction:column;gap:7px}
.selected-media-chip{display:flex;align-items:center;gap:9px;padding:9px 10px;background:#171b21;border:1px solid #2b3139;border-radius:9px;min-width:0}
.selected-media-chip span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-kind{width:24px;height:24px;border-radius:6px;background:#2a3039;display:grid;place-items:center;flex:0 0 auto}
button.secondary{background:#303640}
.playlist-editor-card{scroll-margin-top:90px}
.select-media{position:relative;cursor:pointer;transition:.15s}
.select-media.selected{border-color:#df2424;box-shadow:0 0 0 1px #df2424 inset}
.select-media input[type=checkbox]{position:absolute;top:16px;left:16px;z-index:3;width:20px;height:20px}
.editor-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.empty.compact{margin:4px 0;color:#8e98a4}

.selected-media-chip{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:52px;
}
.selected-media-preview{
  width:64px;
  height:42px;
  border-radius:7px;
  overflow:hidden;
  background:#000;
  border:1px solid #343b45;
}
.selected-media-preview img,
.selected-media-preview video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.selected-media-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}

.quick-tools-row{display:flex;gap:20px;align-items:center;justify-content:space-between}
.quick-tools-row h2{margin:0 0 5px}
.quick-tools-row p{margin:0;color:#9da6b1}
#mediaSearch{min-width:320px;max-width:460px;width:100%}
@media(max-width:700px){.quick-tools-row{flex-direction:column;align-items:stretch}#mediaSearch{min-width:0;max-width:none}}

.screen-actions{margin:12px 0}
.forceRefresh{background:#2563eb}
.forceRefresh:disabled{opacity:.65;cursor:wait}

.url-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.screen-url-code{flex:1;min-width:220px}
.button-link{display:inline-flex;align-items:center;justify-content:center;background:#303640;color:#fff;border-radius:10px;padding:12px 16px;font-weight:700;text-decoration:none}