/* SYNO Control app — red theme, works on PC (3 columns) and phone (1 column) */
.app {
  --c-bg: #0b0507; --c-card: #170a0e; --c-card2: #1f0d13; --c-line: rgba(255, 90, 110, .2); --c-fg: #f6eff0; --c-mut: rgba(246, 239, 240, .6);
  --c-red: #ff2346; --c-red2: #b0102c; --c-gold: #ffcf4a; --c-win: #6dffb0;
  color: var(--c-fg); font: 600 15px/1.4 "OV Raj", "Rajdhani", "Segoe UI", system-ui, sans-serif; color-scheme: dark;
}
.app * { box-sizing: border-box; }
.app [hidden] { display: none !important; }
.app-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 12px; margin-bottom: 6px; background: linear-gradient(var(--c-bg) 70%, transparent); }
.app .brand { font: 400 30px/1 "OV Anton", Anton, Impact, sans-serif; letter-spacing: .02em; transform: skewX(-8deg); }
.app .brand b { font-weight: 400; color: var(--c-red); }
.app .chips { display: flex; gap: 6px; }
.app .chip { font: 700 12px/1 inherit; letter-spacing: .18em; padding: 7px 10px; border: 1px solid var(--c-line); background: var(--c-card); }
.app .chip.ok { border-color: rgba(109, 255, 176, .5); color: var(--c-win); }
.app .chip.warn { border-color: rgba(255, 207, 74, .5); color: var(--c-gold); }
.app .pinbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; margin-bottom: 12px; background: rgba(255, 207, 74, .08); border: 1px solid rgba(255, 207, 74, .4); }
.app .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: stretch; grid-auto-flow: row dense; }
.app .card { background: linear-gradient(170deg, var(--c-card2), var(--c-card)); border: 1px solid var(--c-line); border-top: 3px solid var(--c-red); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app h3 { margin: 2px 0 0; font: 700 13px/1 inherit; letter-spacing: .26em; text-transform: uppercase; color: #ff8a9b; display: flex; gap: 8px; }
.app h3 span { color: var(--c-fg); }
.app .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app .row.big .btn { flex: 1; padding: 18px 10px; font-size: 18px; }
.app .muted { color: var(--c-mut); font-weight: 500; font-size: 13px; margin: 0; }
.app input { font: inherit; color: var(--c-fg); background: #0a0405; border: 1px solid var(--c-line); padding: 9px 10px; min-width: 0; border-radius: 0; }
.app input:focus-visible, .app .btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.app .btn { font: 700 14px/1 inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--c-fg); background: #2a1118; border: 1px solid var(--c-line);
  padding: 11px 14px; cursor: pointer; touch-action: manipulation; }
.app .btn:hover { border-color: rgba(255, 90, 110, .6); }
.app .btn:active { transform: translateY(1px); }
.app .btn:disabled { opacity: .35; cursor: default; }
.app .btn.red { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.app .btn.gold { background: var(--c-gold); border-color: var(--c-gold); color: #160a00; }
.app .btn.win { background: rgba(255, 207, 74, .14); border-color: var(--c-gold); color: var(--c-gold); }
.app .btn.lose { background: rgba(255, 35, 70, .16); border-color: var(--c-red); color: #ff8a9b; }
.app .btn.ghost { background: transparent; }
.app .btn.wide { width: 100%; }
.app .btn.sq { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; font-size: 17px; letter-spacing: 0; flex: none; }
.app .btn[data-armed] { background: var(--c-red); color: #fff; }
.app .timer { font: 600 64px/1 "OV Teko", Teko, monospace; letter-spacing: .04em; color: var(--c-mut); font-variant-numeric: tabular-nums; padding-top: 6px; }
.app .timer.on { color: #fff; text-shadow: 0 0 18px rgba(255, 35, 70, .6); }
.app .tog { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px; border: 1px solid var(--c-line); background: #10070a; }
.app .tog input { width: 18px; height: 18px; accent-color: var(--c-red); }
.app .tog.small { border: 0; background: none; padding: 0 4px; font-size: 13px; }
.app .wlrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app .wlbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--c-line); background: #10070a; }
.app .wlbox small { font-size: 13px; letter-spacing: .3em; color: var(--c-mut); }
.app .wlbox b { font: 600 62px/.9 "OV Teko", Teko, monospace; padding-top: 6px; }
.app .wlbox.w b { color: var(--c-gold); } .app .wlbox.l b { color: var(--c-red); }
.app .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.app .list li { display: flex; align-items: center; gap: 6px; background: #10070a; padding: 5px 5px 5px 10px; min-height: 46px; }
.app .list li.empty { color: var(--c-mut); font-weight: 500; }
.app .list .no { color: #ff8a9b; width: 20px; }
.app .list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.app .list .bal { color: var(--c-gold); font-size: 13px; white-space: nowrap; }
.app .list .bal.big { font: 600 26px/1 "OV Teko", Teko, monospace; min-width: 30px; text-align: right; padding-top: 3px; }
.app .list .tag { font-size: 11px; letter-spacing: .14em; color: var(--c-win); border: 1px solid rgba(109, 255, 176, .4); padding: 4px 6px; }
.app .addform { display: flex; flex-direction: column; gap: 8px; }
.app .pk .btn { flex: 1 1 auto; }
.app .search { width: 100%; }
.app .fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; letter-spacing: .14em; color: var(--c-mut); text-transform: uppercase; }
.app .links-list { display: flex; flex-direction: column; gap: 6px; }
.app .lk { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; background: #10070a; padding: 8px 8px 8px 10px; }
.app .lk span { grid-column: 1 / -1; color: var(--c-mut); font-size: 13px; }
.app .lk code { font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: #ffb3bf; overflow-wrap: anywhere; min-width: 0; }
.app .links-list.small .lk { padding: 5px 6px 5px 10px; }
.app .toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--c-red); color: #fff;
  padding: 10px 18px; font-weight: 700; letter-spacing: .08em; z-index: 20; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.app details.quick summary { cursor: pointer; font: 700 13px/1 inherit; letter-spacing: .2em; text-transform: uppercase; color: #ff8a9b; padding: 8px 0; }
.app details.quick[open] summary { margin-bottom: 6px; }
.app .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .app .two { grid-template-columns: 1fr; } }
.app .fld input { width: 100%; text-transform: none; letter-spacing: 0; font-size: 15px; }
.app .addform #ap-games { font: 600 22px/1 "OV Teko", Teko, monospace; padding: 6px 10px 4px; }
.app .list .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app .list .who .nm { flex: none; }
.app .list .who .sub { font-size: 12px; color: var(--c-mut); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .list li.mrow { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 8px 10px; }
.app .mtop { display: flex; align-items: center; gap: 8px; }
.app .mctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app .mctl .idin { flex: 1 1 130px; min-width: 0; padding: 7px 8px; font-size: 14px; }
.app .mctl .gin { width: 70px; padding: 7px 8px; font: 600 18px/1 "OV Teko", Teko, monospace; }
.app .mctl .btn { padding: 9px 10px; font-size: 12px; }
.app .list li { flex: none; }
.app .list.members { max-height: 520px; }
.app .list .tag.sb { color: #ffd34d; border-color: rgba(255,211,77,.5); }
.app .list .tag.test { color: #8fc2ff; border-color: rgba(143,194,255,.5); }
.app .list .tag.man { color: var(--c-mut); border-color: var(--c-line); }
.app .list li.warn { outline: 1px solid rgba(255,207,74,.45); }
.app .hookst { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #10070a; border-left: 3px solid var(--c-mut); }
.app .hookst b { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-mut); }
.app .hookst.ok { border-left-color: var(--c-win); } .app .hookst.ok span { color: var(--c-win); }
.app .hookst.warn { border-left-color: var(--c-gold); } .app .hookst.warn span { color: var(--c-gold); }
.app .list.hooklog li { min-height: 0; padding: 4px 8px; } .app .list.hooklog .nm { font-size: 14px; }
.app .list.hooklog li.bad .sub { color: #ff8a9b; }
.app .songbox { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: #10070a; border-left: 3px solid var(--c-red); }
.app .np-now { display: flex; flex-direction: column; gap: 2px; }
.app .np-now span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-mut); }
.app .np-now b { font-size: 16px; overflow-wrap: anywhere; }
.app .songbox .row input { flex: 1 1 160px; }
/* queue rows with a control line */
.app .list li.qrow { flex-direction: column; align-items: stretch; gap: 6px; padding: 7px 8px 7px 10px; }
.app .qtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app .qctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.app .btn.small { padding: 8px 10px; font-size: 12px; }
.app .vv { color: var(--c-gold); font-style: normal; }
.app .vvbtn { font: 700 10px/1 inherit; letter-spacing: .12em; padding: 3px 5px; margin-left: 4px; vertical-align: 2px; cursor: pointer;
  color: var(--c-mut); background: transparent; border: 1px dashed var(--c-line); }
.app .vvbtn.on { color: #160a00; background: var(--c-gold); border: 1px solid var(--c-gold); }
.app .list li.mrow.zero { opacity: .55; }
.app .mctl .dtin { flex: 1 1 170px; min-width: 0; padding: 7px 8px; font-size: 14px; }
.app .mctl .gsel { font: inherit; font-size: 13px; color: var(--c-fg); background: #0a0405; border: 1px solid var(--c-line); padding: 7px 6px; }
/* MVP */
.app .list.mvplist { max-height: 620px; }
.app .list li.mvrow { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 8px 8px 10px; }
.app .hist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.app .hc { font: 600 15px/1 "OV Teko", Teko, monospace; padding: 4px 7px 2px; min-width: 26px; cursor: pointer; color: var(--c-fg); background: #241016; border: 1px solid var(--c-line); }
.app .hc.ok { background: #1f9d4c; border-color: #3bd977; color: #fff; }
.app .mvcin { width: 64px; text-align: center; font: 600 24px/1 "OV Teko", Teko, monospace; padding: 4px 4px 2px; }
.app .rules-in { width: 100%; font: 500 15px/1.45 "OV Raj", "Rajdhani", "Segoe UI", system-ui, sans-serif; color: var(--c-fg); background: #0a0405; border: 1px solid var(--c-line); padding: 9px 10px; resize: vertical; }
.app .rules-in:focus-visible { outline: 2px solid var(--c-gold); }
/* akaun */
.app .ak-head, .app .akrow { display: grid; grid-template-columns: 1fr 1.4fr 1fr 36px; gap: 4px; }
.app .ak-head span { font-size: 11px; letter-spacing: .2em; color: var(--c-mut); text-transform: uppercase; padding-left: 4px; }
.app .list li.akrow { display: grid; padding: 3px; min-height: 0; background: transparent; }
.app .akrow input { padding: 7px 8px; font-size: 14px; }
.app .list.aklist { max-height: 560px; }

/* ---- tidy pass ---- */
.app h3 { flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
.app h3 span { letter-spacing: .12em; }
.app .list#ap-play, .app .list.aklist { max-height: none; }
.app .list#ap-queue, .app .list.members, .app .list.mvplist { max-height: min(70vh, 720px); }
.app .list li.qrow .who .sub { white-space: normal; }
.app .qtop .bal { align-self: flex-start; padding-top: 2px; }
.app .pk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.app .pk .muted { grid-column: 1 / -1; }
.app .pk .btn { width: 100%; padding: 10px 6px; font-size: 13px; letter-spacing: .06em; }
.app .mgrid { display: grid; grid-template-columns: 58px 74px 1fr 1fr 36px; gap: 6px; align-items: stretch; }
.app .mgrid .gin { width: 100%; padding: 6px 8px 4px; font: 600 20px/1 "OV Teko", Teko, monospace; }
.app .mgrid .gsel { width: 100%; }
.app .mgrid .btn { padding: 8px 4px; font-size: 12px; letter-spacing: .06em; }
.app .mgrid .btn.sq { width: 36px; height: auto; }
.app .vvbtn { font: 700 11px/1 "OV Raj", Rajdhani, sans-serif; letter-spacing: .1em; padding: 3px 6px; border-style: solid; }
.app .mvctl { justify-content: space-between; }
.app .mvctl > .btn.sq { margin-left: auto; }
.app .songbox #ap-song { width: 100%; }
.app .songbox .row .btn { flex: 1; }
.app .gsel { font: 600 13px/1 "OV Raj", Rajdhani, sans-serif; color: var(--c-fg); background: #0a0405; border: 1px solid var(--c-line); padding: 6px 4px; border-radius: 0; }
.app .gsel:focus-visible { outline: 2px solid var(--c-gold); }
.app .list.members, .app .list.mvplist, .app .list#ap-queue { border-bottom: 1px solid var(--c-line); }
.app .list li.empty.imp { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }

/* ---- layout editing: drag to move, corner to resize ---- */
.app .card { position: relative; }
.app .card.fixed-h { overflow: auto; }
.app .lay-bar { display: none; align-items: center; gap: 6px; margin: -6px -6px 0; padding: 6px; background: rgba(255, 207, 74, .1); border: 1px dashed rgba(255, 207, 74, .5); }
.app.editing .lay-bar { display: flex; }
.app .lay-grip { flex: 1; cursor: grab; touch-action: none; user-select: none; font: 700 12px/1 "OV Raj", Rajdhani, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); padding: 9px 6px; }
.app .lay-grip:active { cursor: grabbing; }
.app .lay-w { display: inline-flex; gap: 3px; }
.app .lay-w button, .app .lay-h { font: 700 12px/1 "OV Raj", Rajdhani, sans-serif; color: var(--c-fg); background: #0a0405; border: 1px solid var(--c-line); padding: 7px 9px; cursor: pointer; }
.app .lay-w button.on { background: var(--c-gold); border-color: var(--c-gold); color: #160a00; }
.app .lay-w button:focus-visible, .app .lay-h:focus-visible { outline: 2px solid var(--c-gold); }
.app .lay-rs { display: none; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--c-gold) 50%, var(--c-gold) 58%, transparent 58%, transparent 70%, var(--c-gold) 70%, var(--c-gold) 78%, transparent 78%); }
.app.editing .lay-rs { display: block; }
.app.editing .card { outline: 1px dashed rgba(255, 207, 74, .35); outline-offset: -1px; }
.app .card.dragging { opacity: .6; outline: 2px solid var(--c-gold); }
.app .card.sizing { outline: 2px solid var(--c-gold); }
.app.editing .card > :not(.lay-bar):not(.lay-rs) { pointer-events: none; }
@media (max-width: 720px) { .app .lay-w, .app .lay-h { display: none; } }
@media (prefers-reduced-motion: no-preference) { .app .card { transition: outline-color .15s; } }

/* ---- Hutang Mabar rows: stacked on phones, one table row on wide cards ---- */
.app .card.vip, .app .card.mvp { container-type: inline-size; }
.app .list li.mrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; grid-template-areas: "name name name name st bal" "id id dt dt dt dt" "act act act act act act" "miss miss miss miss miss miss"; gap: 6px 8px; align-items: center; padding: 8px 8px 8px 10px; }
.app .mc-name { grid-area: name; min-width: 0; } .app .mc-st { grid-area: st; } .app .mbal { grid-area: bal; display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.app .mc-id { grid-area: id; min-width: 0; padding: 7px 8px; font-size: 14px; } .app .mc-dt { grid-area: dt; min-width: 0; padding: 7px 8px; font-size: 14px; }
.app .mc-act { grid-area: act; } .app .mc-miss { grid-area: miss; }
.app .list li.mhead { display: none; }
@container (min-width: 860px) {
  .app .list li.mrow, .app .list li.mhead { grid-template-columns: minmax(150px, 1.3fr) 52px 86px minmax(110px, 1fr) minmax(176px, 1.1fr) minmax(300px, 1.9fr); grid-template-areas: "name st bal id dt act" "miss miss miss miss miss miss"; }
  .app .list li.mhead { display: grid; gap: 6px 8px; min-height: 0; padding: 4px 8px 6px 10px; background: transparent; position: sticky; top: 0; z-index: 1; background: var(--c-card); }
  .app .list li.mhead span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-mut); }
  .app .list li.mhead span:nth-child(1) { grid-area: name; } .app .list li.mhead span:nth-child(2) { grid-area: st; } .app .list li.mhead span:nth-child(3) { grid-area: bal; text-align: right; }
  .app .list li.mhead span:nth-child(4) { grid-area: id; } .app .list li.mhead span:nth-child(5) { grid-area: dt; } .app .list li.mhead span:nth-child(6) { grid-area: act; }
  .app .list.members, .app .list.mvplist { max-height: min(76vh, 900px); }
  .app .list li.mvrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto); align-items: center; gap: 10px; }
  .app .mvrow .mvctl { justify-content: flex-end; }
}

/* ---- tabs ---- */
.app .app-tabs { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 4px; }
.app .app-tabs:empty { display: none; }
.app .app-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 11px 6px; cursor: pointer;
  font: 700 13px/1 "OV Raj", Rajdhani, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--c-mut); background: #1a0b10; border: 1px solid var(--c-line); }
.app .app-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .app-tabs button i { font-style: normal; font: 600 15px/1 "OV Teko", Teko, monospace; letter-spacing: .02em; color: var(--c-gold); padding-top: 2px; }
.app .app-tabs button i:empty { display: none; }
.app .app-tabs button[aria-selected="true"] { color: #fff; background: var(--c-red); border-color: var(--c-red); }
.app .app-tabs button[aria-selected="true"] i { color: #fff; }
.app .app-tabs button:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.app .grid.solo > .card { grid-column: 1 / -1 !important; height: auto !important; overflow: visible; }
.app .grid.solo { max-width: 1400px; }
@media (max-width: 520px) { .app .app-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .app .app-tabs button { padding: 10px 2px; font-size: 11px; letter-spacing: .04em; flex-direction: column; gap: 3px; } }

/* ---- queue card: playing | queue side by side when wide ---- */
.app .card.queue { container-type: inline-size; }
.app .qcols { display: flex; flex-direction: column; gap: 10px; }
.app .qcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@container (min-width: 720px) {
  .app .qcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .app .card.queue > .muted { max-width: 70ch; }
  .app .card.queue > #ap-clearq { align-self: flex-start; }
}
/* ---- Hutang Mabar add form on one row when wide ---- */
@container (min-width: 860px) {
  .app .card.vip .addform { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 110px minmax(0, 1fr); gap: 8px 10px; align-items: end; }
  .app .card.vip .addform .two { display: contents; }
  .app .card.vip .addform .pk { grid-column: 1 / -1; grid-template-columns: auto repeat(5, minmax(0, 1fr)); align-items: center; }
  .app .card.vip .addform .pk .muted { grid-column: auto; }
  .app .card.vip .addform > .row { grid-column: 1 / -1; }
  .app .card.vip .search { max-width: 420px; }
}

/* ---- undo / redo in card titles ---- */
.app h3 .hist { margin-left: auto; display: inline-flex; gap: 4px; letter-spacing: 0; }
.app .hb { font: 700 16px/1 "Segoe UI Symbol", system-ui, sans-serif; width: 32px; height: 28px; padding: 0; cursor: pointer; color: var(--c-fg); background: #1a0b10; border: 1px solid var(--c-line); }
.app .hb:hover:not(:disabled) { border-color: var(--c-gold); color: var(--c-gold); }
.app .hb:disabled { opacity: .3; cursor: default; }
.app .hb:focus-visible { outline: 2px solid var(--c-gold); }
.app.editing .card h3 .hist { pointer-events: none; }

/* ---- komen album + raw order data ---- */
.app .list li.alrow { gap: 8px; }
.app .list li.alrow.done .nm { text-decoration: line-through; opacity: .6; }
.app .list.allist { max-height: min(70vh, 720px); }
.app .list li details.raw { flex-basis: 100%; margin-top: 4px; }
.app .list li:has(details.raw) { flex-wrap: wrap; }
.app details.raw summary { cursor: pointer; font-size: 12px; letter-spacing: .12em; color: var(--c-mut); text-transform: uppercase; }
.app details.raw code { display: block; margin-top: 4px; padding: 6px 8px; background: #0a0405; font: 12px/1.4 ui-monospace, Consolas, monospace; color: #ffb3bf; overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- tabs while arranging ---- */
.app.editing .app-tabs button { cursor: grab; touch-action: none; outline: 1px dashed rgba(255, 207, 74, .45); outline-offset: -3px; }
.app.editing .app-tabs button.dragging { opacity: .55; outline: 2px solid var(--c-gold); cursor: grabbing; }

/* ---- custom test form in the Order card ---- */
.app .ctest { padding: 10px 12px; background: #10070a; border: 1px dashed rgba(255, 207, 74, .4); }
.app .ctest-h { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); }
.app .ctest .pk { display: flex; flex-wrap: wrap; gap: 6px; }
.app .ctest .pk .btn { flex: 1 1 64px; width: auto; padding: 8px 4px; }
.app .ctest .gsel { width: 100%; padding: 9px 6px; }

/* ---- roles ---- */
.app .roles { display: flex; gap: 4px; flex-wrap: wrap; }
.app .rlb { display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0; cursor: pointer; background: transparent; border: 1px solid; opacity: .55; }
.app .rlb.on { opacity: 1; color: #0b0507 !important; }
.app .rlb:hover { opacity: .9; } .app .rlb:focus-visible { outline: 2px solid var(--c-gold); }
.app .rlb.rl-exp { color: #ff7a45; border-color: #ff7a45; } .app .rlb.rl-exp.on { background: #ff7a45; }
.app .rlb.rl-jungle { color: #3ddc84; border-color: #3ddc84; } .app .rlb.rl-jungle.on { background: #3ddc84; }
.app .rlb.rl-mid { color: #b388ff; border-color: #b388ff; } .app .rlb.rl-mid.on { background: #b388ff; }
.app .rlb.rl-gold { color: #ffcf4a; border-color: #ffcf4a; } .app .rlb.rl-gold.on { background: #ffcf4a; }
.app .rlb.rl-roam { color: #4fc3f7; border-color: #4fc3f7; } .app .rlb.rl-roam.on { background: #4fc3f7; }
.app .rl { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.app .rl svg { width: 16px; height: 16px; }
.app .rlb svg { width: 17px; height: 17px; }
.app .rl.rl-exp { color: #ff7a45; } .app .rl.rl-jungle { color: #3ddc84; } .app .rl.rl-mid { color: #b388ff; } .app .rl.rl-gold { color: #ffcf4a; } .app .rl.rl-roam { color: #4fc3f7; }
/* ---- MVP remark ---- */
.app .mvnote { width: 100%; margin-top: 4px; padding: 6px 8px; font-size: 13px; }
.app .akrow .akdate { min-width: 0; padding: 6px 6px; font-size: 13px; }
.app .ak-head, .app .akrow { grid-template-columns: .9fr 1.3fr 1.2fr 36px; }

/* ---- drag players between queue and playing ---- */
.app .qgrip { flex: none; cursor: grab; touch-action: none; user-select: none; color: var(--c-mut); font-size: 18px; line-height: 1; padding: 6px 4px; margin-left: -4px; }
.app .qgrip:hover { color: var(--c-gold); }
.app .list li.qrow.qdragging { opacity: .35; }
.app .list li.qrow.qover { outline: 2px solid var(--c-gold); outline-offset: -2px; background: rgba(255, 207, 74, .1); }
.app .list li.qrow.qover-up { box-shadow: inset 0 3px 0 var(--c-gold); }
.app .list li.qrow.qover-down { box-shadow: inset 0 -3px 0 var(--c-gold); }
.qghost { position: fixed; z-index: 50; pointer-events: none; opacity: .9; list-style: none; background: #2a1118; border: 1px solid #ffcf4a; padding: 6px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); color: #f6eff0; font: 600 15px/1.3 "OV Raj", Rajdhani, sans-serif; }
.qghost .qctl, .qghost .roles { display: none; }

/* ---- song requests ---- */
.app .list li.sgrow { gap: 8px; }
.app .list li.sgrow.done .nm { opacity: .5; text-decoration: line-through; }
.app .list.sglist { max-height: min(60vh, 600px); }
.app .sgmin { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: .04em; font-size: 13px; }
.app .sgmin input { width: 70px; }

/* order: Pindah ke (baki mabar / queue / VVIP / album / akaun) */
.app .list li:has(details.omv) { flex-wrap: wrap; }
.app details.omv { order: 5; flex-basis: 100%; }
.app details.omv summary { cursor: pointer; display: inline-block; font: 700 12px/1 "OV Raj", Rajdhani, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); padding: 6px 2px; }
.app details.omv.need summary { color: #0b0507; background: var(--c-gold); padding: 6px 10px; }
.app details.omv .omv-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; padding: 6px 0 4px; }
.app details.omv .omv-n { width: 74px; }
.app details.omv .omv-n input { width: 100%; }
.app .list li details.raw { order: 6; }

.app .sglast { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; background: #0a0405; border-left: 3px solid var(--c-gold); font-size: 13px; }
.app .sglast > b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); }
.app .sglast code { font: 12px/1.4 ui-monospace, Consolas, monospace; color: #ffb3bf; overflow-wrap: anywhere; white-space: pre-wrap; }
.app ol.steps { margin: 4px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

.app .sgdet { margin-top: 10px; padding: 10px; border: 1px dashed rgba(255,207,74,.45); display: flex; flex-direction: column; gap: 6px; }
.app .sgdet .sgapp { width: 170px; }
.app .sgmedia .sgst { margin: 0; font-size: 13px; } .app .sgmedia .sgst .on { color: var(--c-win); } .app .sgmedia .sgst .warn { color: var(--c-gold); }
.app .sgmedia .list li.me { outline: 1px solid var(--c-win); }
.app .sgmedia .vu { display: inline-block; width: 70px; height: 6px; background: #2a1418; margin-right: 6px; vertical-align: 1px; } .app .sgmedia .vu i { display: block; height: 100%; background: var(--c-win); }

/* Mabar VIP OPEN / CLOSED */
.app .oc { align-items: center; gap: 6px; }
.app .oc .oc-l { font: 700 12px/1 "OV Raj", Rajdhani, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c-mut); margin-right: 4px; }
.app .oc .ocbtn { min-width: 120px; opacity: .55; }
.app .oc .oc-open[aria-pressed="true"] { opacity: 1; background: var(--c-win); border-color: var(--c-win); color: #0b0507; }
.app .oc .oc-closed[aria-pressed="true"] { opacity: 1; background: var(--c-red); border-color: var(--c-red); color: #fff; }
.app .sgifx code { display: block; margin-top: 4px; padding: 6px 8px; background: #0a0405; font: 12px/1.4 ui-monospace, Consolas, monospace; color: #ffb3bf; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* Tunjuk di overlay: portrait / landscape parts */
.app .ovparts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 8px; padding: 10px; border: 1px dashed var(--c-line); }
.app .ovparts > b { grid-column: 1 / -1; }
.app .ovp-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.app .ovp-t { font: 700 12px/1 "OV Raj", Rajdhani, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold); }
.app .ovp-obs { margin: 4px 0 0; font-size: 12px; }

/* auto kill effects card */
.app .killfx .kteam { min-width: 200px; }
.app .killfx .kwin { flex-wrap: nowrap; } .app .killfx .kwin select { flex: 1; min-width: 0; }
.app .kdbg { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 8px 10px; background: #0a0405; border-left: 3px solid var(--c-gold); font-size: 13px; }
.app .kdbg > b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); }
.app .kdbg .khit b { color: var(--c-win); } .app .kdbg .warn { color: #ff8a9b; }
.app .kdbg code { font: 12px/1.4 ui-monospace, Consolas, monospace; color: #ffb3bf; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 90px; overflow: auto; }
.app .killfx .ktest { gap: 6px; }
.app .killfx .kme { align-items: flex-end; } .app .killfx .kign { flex: 1; min-width: 180px; } .app .killfx .kme[hidden] { display: none; }
.app .kdbg .kok { color: var(--c-win); }
.app .kstep { display: block; margin: 14px 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); }
.app .kseg { display: flex; gap: 0; margin-bottom: 8px; } .app .kseg button { flex: 1; padding: 10px 8px; font: inherit; font-weight: 700; color: #c9a9b0; background: #160709; border: 1px solid #4a1a24; cursor: pointer; }
.app .kseg button[aria-pressed="true"] { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.app .ksrc[hidden], .app .killfx [hidden] { display: none !important; }
.app .killfx .kobsrow .kport { width: 110px; flex: none; } .app .killfx .kobsrow .kpass { flex: 1; min-width: 160px; }
.app .kshot { position: relative; width: 100%; min-height: 80px; aspect-ratio: 16 / 9; background: #050203 repeating-linear-gradient(45deg, #0d0507 0 10px, #080304 10px 20px); border: 1px solid #4a1a24; overflow: hidden; user-select: none; -webkit-user-select: none; }
.app .kshot.on { aspect-ratio: auto; } .app .kshot img { display: block; width: 100%; height: auto; pointer-events: none; }
.app .kshot:not(.on) img { display: none; }
.app .kshot.drawing { touch-action: none; cursor: crosshair; outline: 2px solid var(--c-gold); }
.app .kshot .kmsg { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; color: #c9a9b0; font-size: 13px; }
.app .kbox { position: absolute; border: 2px solid #ffcf4a; background: rgba(255,207,74,.12); box-shadow: 0 0 0 1px #000; pointer-events: none; }
.app .kbox.kda { border-color: #4fe38a; background: rgba(79,227,138,.14); }
.app .kbox em { position: absolute; left: -2px; top: -18px; padding: 1px 5px; font: 700 10px/14px var(--f-ui, sans-serif); font-style: normal; letter-spacing: .08em; color: #000; background: #ffcf4a; }
.app .kbox.kda em { background: #4fe38a; }
.app .killfx .kdraw { gap: 6px; margin-top: 6px; } .app .killfx .kdraw [aria-pressed="true"] { background: var(--c-gold); color: #000; }
.app .khero { margin: 6px 0 4px; padding: 10px; border: 1px dashed #4a1a24; background: #0d0507; }
.app .khrow { align-items: center; gap: 10px; } .app .khimg img { display: block; width: 56px; height: 56px; object-fit: contain; border: 2px solid var(--c-gold); background: #000; }
.app .kbans { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 8px 0; }
.app .kban { position: relative; padding: 0; border: 2px solid #4a1a24; background: #000; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.app .kban img { width: 100%; height: 100%; object-fit: cover; display: block; } .app .kban[aria-pressed="true"] { border-color: var(--c-gold); }
.app .kban em { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font: 700 10px/1.3 var(--f-ui, sans-serif); font-style: normal; color: #fff; background: rgba(0,0,0,.7); text-align: left; }
.app .khrow2 { align-items: flex-end; gap: 8px; } .app .khmin { width: 190px; flex: none; }
.app .killfx [data-draw][disabled] { opacity: .4; cursor: not-allowed; }
.app .kbox.hero { border-color: #c77dff; background: rgba(199,125,255,.15); } .app .kbox.hero em { background: #c77dff; }
.app .kbox.live { border: 2px dashed #8a8a8a; background: none; } .app .kbox.live em { left: auto; right: -2px; top: auto; bottom: -18px; background: #8a8a8a; }
.app .kbox.live.ok { border-color: #4fe38a; box-shadow: 0 0 10px #4fe38a; } .app .kbox.live.ok em { background: #4fe38a; }
.app .killfx .kvis { align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; } .app .killfx .tog.sm { padding: 4px 8px; }