body.display-body, body.admin-body { margin:0; font-family: system-ui, Arial, sans-serif; background:#0e0e10; color:#e6e6e6; }

/* Display page */
.display-body .player { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
.fullscreen-item { width:100%; height:100%; background:#000; }
.fullscreen-item.contain { object-fit:contain; }
.empty { font-size:2rem; color:#666; }
.control-bar { position:fixed; top:8px; left:8px; z-index:10; display:flex; gap:8px; }
.control-bar button { background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); padding:8px 12px; border:1px solid #444; color:#eee; font-size:14px; border-radius:6px; cursor:pointer; }
.control-bar button:hover { background:rgba(60,60,60,0.6); }

/* Admin page enhanced styling */
.admin-body { padding:1.2rem 1.4rem 3rem; background:linear-gradient(135deg,#1b1b1f,#121214 60%,#18181c); min-height:100vh; }
.admin-body h1 { font-size:1.9rem; letter-spacing:.5px; font-weight:600; background:linear-gradient(90deg,#fff,#bbb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.admin-body h2 { margin-top:2.2rem; font-size:1.2rem; font-weight:600; color:#ddd; position:relative; }
.admin-body h2::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:80px; background:#444; border-radius:2px; }

.upload-section { margin-bottom:1.5rem; background:rgba(255,255,255,0.03); padding:1rem; border:1px solid #2d2d32; border-radius:10px; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
#uploadForm { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
#uploadForm input[type='file'] { background:#222; padding:6px 10px; border-radius:6px; border:1px solid #333; color:#ccc; }
#uploadForm button { background:#2563eb; border:none; padding:8px 14px; color:#fff; font-weight:600; border-radius:8px; cursor:pointer; box-shadow:0 2px 6px -2px rgba(0,0,0,.5); }
#uploadForm button:hover { background:#1d4ed8; }
#uploadStatus { font-size:.85rem; color:#9ca3af; margin-left:.5rem; }

.table-wrapper { background:rgba(255,255,255,0.03); padding:1rem; border:1px solid #2d2d32; border-radius:10px; box-shadow:0 4px 14px -6px rgba(0,0,0,.7); }
#promoTable { width:100%; }
#promoTable th, #promoTable td { padding:10px 8px; font-size:14px; vertical-align:middle; }
#promoTable tbody tr.dragging { opacity:0.5; }
.thumb { max-width:120px; max-height:70px; object-fit:cover; border-radius:6px; box-shadow:0 2px 4px -2px rgba(0,0,0,.6); }
button { cursor:pointer; background:#333; color:#eee; border:1px solid #444; padding:6px 10px; border-radius:8px; font-size:13px; line-height:1.1; display:inline-flex; align-items:center; gap:4px; }
button:hover { background:#3d3d3d; }
button[title='Simpan'] { background:#0891b2; border-color:#0e7490; }
button[title='Simpan']:hover { background:#0e7490; }
button[title='Hapus'] { background:#dc2626; border-color:#b91c1c; }
button[title='Hapus']:hover { background:#b91c1c; }
input[type='number'] { width:100px; background:#222; color:#eee; border:1px solid #333; padding:4px 6px; border-radius:6px; }
input[type='checkbox'] { width:18px; height:18px; accent-color:#2563eb; }
#saveOrderBtn { margin-top:0.8rem; background:#10b981; border-color:#059669; font-weight:600; }
#saveOrderBtn:hover { background:#059669; }

/* Utility */
.order-cell { font-weight:600; color:#9ca3af; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#161618; }
::-webkit-scrollbar-thumb { background:#2e2e33; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#3b3b41; }