/* ===== Orbit — premium dark theme ===== */
:root{--bg:#0c0d10;--bg2:#13151a;--card:#171a20;--card2:#1e222a;--line:#2a2f39;--text:#e9e6df;--muted:#8d93a0;
  --gold:#d4b46a;--gold2:#a8843a;--accent:#7aa7ff;--ok:#2f6f55;--okh:#3a8a6a;--red:#7d2a2a;--redh:#9a3434;--r:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.03) inset}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%,#1b2030 0%,transparent 60%),radial-gradient(900px 500px at -10% 10%,#221c14 0%,transparent 55%),var(--bg);
  background-attachment:fixed;min-height:100vh}
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;
  background:rgba(12,13,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
h1{margin:0;font:600 1.15rem/1 Georgia,"Times New Roman",serif;letter-spacing:.06em}
h1 .brand{background:linear-gradient(90deg,#f3e2b3,var(--gold) 50%,#b8913f);-webkit-background-clip:text;background-clip:text;color:transparent}
main{max-width:1240px;margin:0 auto;padding:22px 18px 60px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:22px;align-items:start}
#wallSec{grid-column:1/-1}
.col{display:grid;gap:22px;min-width:0}
section{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;box-shadow:var(--shadow);min-width:0}
section[hidden]{display:none}
h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 .78rem/1.2 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#cfc6b2}
h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);order:1}
h2 .sw,h2 .x{order:2}
#remote h2{font:600 1.15rem/1.2 Georgia,serif;letter-spacing:.02em;text-transform:none;color:var(--text)}
p{margin:6px 0}
.muted{color:var(--muted);font-size:.85rem}.small{font-size:.8rem;line-height:1.55}
a{color:var(--gold)}
/* controls */
button,input,select{font:inherit;font-size:.92rem;padding:11px 14px;border-radius:11px;border:1px solid var(--line);background:#20242d;color:var(--text);
  transition:background .15s,border-color .15s,transform .08s,box-shadow .15s;min-width:0}
input,select{background:#12141a}
input:focus,select:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(212,180,106,.15)}
input::placeholder{color:#626876}
button{cursor:pointer;font-weight:500;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 2px 6px rgba(0,0,0,.25)}
button:hover{background:#2a2f3a;border-color:#3a414e}
button:active{transform:translateY(1px) scale(.99)}
button.ok{background:linear-gradient(180deg,var(--okh),var(--ok));border-color:#3f8b6c}
button.red{background:linear-gradient(180deg,var(--redh),var(--red));border-color:#a04040}
button.x{background:none;border:none;box-shadow:none;color:var(--muted);padding:6px 8px}
button.x:hover{color:var(--gold)}
header button{background:rgba(255,255,255,.06)}
input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;padding:0;vertical-align:-3px}
input[type=file]{width:100%;padding:10px;border-style:dashed}
details summary{cursor:pointer;margin-top:8px}
.row{display:flex;gap:10px;margin:10px 0}.row>*{flex:1}
.wrap{flex-wrap:wrap}.wrap>*{flex:1 1 40%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sw{display:inline-flex;align-items:center;gap:8px;font:500 .8rem system-ui;letter-spacing:.02em;text-transform:none;color:var(--muted);cursor:pointer}
/* devices */
#devices h2{margin-bottom:8px}
.dev{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;margin:8px 0;border-radius:12px;background:#14171d;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s}
.dev:hover{background:#191d24;border-color:#3a414e}
.dev.sel{border-color:var(--gold2);background:linear-gradient(90deg,rgba(212,180,106,.10),#14171d 60%);box-shadow:0 0 0 1px rgba(212,180,106,.25)}
.dev b{font-weight:600}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;background:#555;vertical-align:1px}
.dot.on{background:#46d18a;box-shadow:0 0 8px #46d18a99}.dot.off{background:#d65454}
/* remote */
#remote{position:relative}
#rinfo{margin-top:-6px}
.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:8px;justify-content:center;margin:18px auto;
  padding:14px;border-radius:50%;width:max-content;background:radial-gradient(circle,#232833,#15181e 70%);border:1px solid var(--line);box-shadow:inset 0 2px 12px rgba(0,0,0,.5)}
.pad button{padding:0;border-radius:50%;font-size:1.05rem;background:#262b35}
.pad button.ok{background:radial-gradient(circle at 40% 35%,#e9cf8f,var(--gold2));color:#1b160c;font-weight:700;border-color:#c9a75a}
#themes{margin-top:14px}
#themeRow button{font-size:.85rem}
#apps{margin-top:12px}
.appsHead{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.appRow,.appGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;margin:8px 0}.appRow:empty{display:none}
.app{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px;font-size:.72rem;text-align:center;overflow:hidden;border-radius:12px}
.app img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:7px;background:#000}
.app .nm{max-height:2.4em;overflow:hidden}
.app .pin{position:absolute;top:3px;right:6px;font-size:.9rem;color:#666}.app .pin.on{color:#f5c518}
#favRow{padding-bottom:10px;border-bottom:1px solid var(--line)}
#msg{min-height:1.2em}
/* panels */
#syncBox,#castBox,#artBox{display:grid;gap:10px}
#syncBox[hidden],#castBox[hidden],#artBox[hidden]{display:none}
#syncDevs,#castDevs,#artDevs{display:flex;flex-wrap:wrap;gap:8px}
#syncDevs label,#castDevs label,#artDevs label,.chk{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#14171d;border:1px solid var(--line);font-size:.85rem;cursor:pointer}
#mediaList{display:grid;gap:6px}#mediaList label{display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;background:#14171d}
#mediaList img,#mediaList video{width:60px;height:40px;object-fit:cover;border-radius:6px;background:#222}
.wli{display:flex;gap:8px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}.wli:last-child{border-bottom:0}.wli b{flex:1;font-weight:500}.wli select{padding:7px;max-width:40%}
.badge{font-size:.7em;padding:1px .5em;border-radius:6px;background:#2b3140;color:#cde}
#add{display:grid;grid-template-columns:1fr 1fr;gap:10px}#add button{grid-column:1/-1}
#addSec summary{list-style:none}#addSec summary::-webkit-details-marker{display:none}
.artnow{display:flex;gap:14px;align-items:center;margin:4px 0}.artnow img{width:150px;aspect-ratio:16/9;object-fit:cover;border:6px solid #c9a95a;outline:1px solid #5a4318;box-shadow:0 6px 16px rgba(0,0,0,.6)}
/* toast-like status lines */
#msg:not(:empty),#syncMsg:not(:empty),#castMsg:not(:empty),#artMsg:not(:empty),#wlMsg:not(:empty){padding:8px 12px;border-radius:10px;background:#12141a;border:1px solid var(--line)}
/* mobile */
@media (max-width:900px){main{grid-template-columns:1fr;padding:14px 12px 50px;gap:16px}.col{gap:16px}section{padding:16px 14px}}
@media (max-width:520px){body{font-size:14.5px}header{padding:12px 14px}.grid2,#add{grid-template-columns:1fr}
  .pad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px)}.row{gap:8px}button,input,select{padding:11px 12px}}

/* ---- Now playing: gallery wall ---- */
#wallSec{background:radial-gradient(ellipse at 50% -10%,#2a2620 0%,#151412 55%,#0e0e0e 100%);padding:18px 20px 28px;border-color:#2c2619}
#wallSec h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.16em;color:#e9dcc0;font-size:.95rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 26px;padding-top:6px}
.art{margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .35s ease}
.art:hover{transform:translateY(-3px)}
.art::before{content:'';width:60%;height:40px;margin-bottom:-26px;background:radial-gradient(ellipse at 50% 0,rgba(255,230,180,.22),transparent 70%);pointer-events:none} /* gallery spotlight */
.frame{width:100%;padding:12px;border-radius:3px;position:relative;
  background:linear-gradient(135deg,#7a5a24 0%,#e6c878 18%,#a07a32 35%,#f3dc96 52%,#8a6628 70%,#d8b462 86%,#6d5020 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.15) inset,0 -2px 0 rgba(0,0,0,.35) inset,0 0 0 1px #3d2c10}
.frame::after{content:'';position:absolute;inset:6px;border:1px solid rgba(60,40,10,.55);box-shadow:0 0 0 1px rgba(255,240,200,.25);pointer-events:none}
.mat{background:linear-gradient(#f4efe4,#e7e0d0);padding:12px;box-shadow:inset 0 2px 6px rgba(0,0,0,.35);position:relative}
.canvas{aspect-ratio:16/9;background:#0b0b0b;overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 0 18px rgba(0,0,0,.6)}
.canvas>img{width:100%;height:100%;object-fit:cover;display:block;animation:fadein .6s ease}
.art.live .canvas{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 22px rgba(255,214,140,.18)}
.art.drm .canvas>img{filter:grayscale(.6) brightness(.45)}
.cap{position:absolute;left:12px;right:12px;bottom:16px;text-align:center;font:italic .75rem Georgia,serif;color:#f5ead2;text-shadow:0 1px 3px #000}
.livedot{position:absolute;top:18px;right:18px;font:600 .6rem/1 system-ui;letter-spacing:.1em;color:#fff;background:rgba(200,30,30,.85);padding:3px 6px;border-radius:3px}
.still{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#2d2a26,#0d0c0b 75%)}
.still .blur{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(28px) saturate(1.3) brightness(.55)}
.still .ico{position:relative;max-width:42%;max-height:55%;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.still .glyph{position:relative;font:300 3rem Georgia,serif;color:#cdb98e;opacity:.7}
.art.off .frame{filter:saturate(.35) brightness(.7)}
.placard{margin-top:16px;width:82%;background:linear-gradient(#fbf8f1,#ece5d6);color:#2b2620;padding:9px 12px 10px;border-radius:2px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);font-family:Georgia,'Times New Roman',serif;text-align:left}
.placard .room{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7b6a4c}
.placard .work{font-size:1rem;font-weight:700;margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.placard .title{font-style:italic;font-size:.85rem;margin-top:3px;line-height:1.25}
.placard .artist{font-size:.75rem;color:#5d5444}
.placard .prog{font:.7rem system-ui;color:#6b604d;margin-top:5px;text-transform:capitalize}
.placard .bar{height:3px;background:#d8cfbd;margin-top:3px;border-radius:2px}.placard .bar i{display:block;height:100%;background:#a07a32;border-radius:2px}
.placard .note{font:.66rem system-ui;color:#8a7f6c;margin-top:5px}.placard a{color:#8a5a10}
.placard .badge{font:600 .55rem system-ui;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;border-radius:2px;background:#d9cfbb;color:#5b513f}
.placard .badge.ok{background:#2f4a36;color:#dff0e2}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (max-width:520px){.wall{grid-template-columns:1fr;gap:28px}.frame{padding:9px}.mat{padding:8px}.placard{width:90%}}