/*
 * Deck Mode landing page (deck-template.php) — loaded only on that template.
 *   1. Tokens + reset against Bootstrap reboot
 *   2. App styles, every selector scoped under .sbm-deck (generated from the prototype)
 *   3. Site integration: full-width shell, theme header/footer, fullscreen Deck Mode, intro section
 * Light/dark follows the site toggle (html[data-bs-theme]); fullscreen Deck Mode is always dark.
 * Classes renamed to stay clear of Bootstrap: .dk-btn .dk-row .dk-toast .dk-mark.
 */

/* ================= 1. TOKENS + RESET ================= */
.sbm-deck, body.deckonly .sbm-deck{
  --bg:#0c0e12; --panel:#15181f; --panel-2:#1b1f28; --line:#262b36;
  --text:#f2f4f8; --muted:#9aa3b2; --faint:#6b7280;
  --accent:#ffb020; --accent-ink:#1a1200;
  --danger:#ff4d4d; --ok:#2fd67c;
  --radius:14px;
  --deck-gap:10px;
  color-scheme:dark;
}
[data-bs-theme="light"] .sbm-deck{ --bg:#eceef2; --panel:#ffffff; --panel-2:#f4f5f8; --line:#d9dde6; --text:#14171d; --muted:#5b6472; --faint:#8a93a3; color-scheme:light; }
.sbm-deck, .sbm-deck *{ box-sizing:border-box; }
.sbm-deck{ background:var(--bg); color:var(--text); font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size:16px; font-weight:400; line-height:normal; text-align:left; -webkit-tap-highlight-color:transparent; }
/* Bootstrap reboot changes these element defaults; the app was designed against browser defaults */
.sbm-deck h1, .sbm-deck h2, .sbm-deck h3{ font-weight:700; line-height:normal; color:inherit; }
.sbm-deck p{ margin:1em 0; }
.sbm-deck kbd{ color:inherit; }
.sbm-deck button, .sbm-deck select, .sbm-deck input{ font:inherit; color:inherit; }
.sbm-deck button{ cursor:pointer; }
.sbm-deck button, .sbm-deck [role="button"], .sbm-deck select, .sbm-deck input:not([type="checkbox"],[type="radio"]){ min-height:2.25rem; }

/* ================= 2. APP ================= */
.sbm-deck .app{ display:flex; flex-direction:column; min-height:100dvh; }
/* ---------- Toolbar ---------- */
.sbm-deck .toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.sbm-deck .brand{ display:flex; align-items:center; gap:9px; margin-right:4px; }
.sbm-deck .brand .dk-mark{ width:auto; height:38px; display:block; object-fit:contain; background:transparent; border-radius:0; flex:none; }
.sbm-deck .brand .brandtitle{ margin:0; font-size:16px; letter-spacing:.2px; line-height:1.2; }
.sbm-deck .brand small{ display:block; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.sbm-deck .tgroup{ display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:4px; }
.sbm-deck .tgroup .lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:0 4px 0 6px; }
.sbm-deck .tbtn{ border:1px solid transparent; background:transparent; border-radius:8px; padding:6px 11px; font-size:13px; font-weight:600; color:var(--muted); min-height:2.25rem; }
.sbm-deck .tbtn:hover{ color:var(--text); }
.sbm-deck .tbtn.on{ background:var(--accent); color:var(--accent-ink); }
.sbm-deck .tbtn.danger.on{ background:var(--danger); color:#fff; }
.sbm-deck .tbtn.solid{ background:var(--panel-2); border-color:var(--line); color:var(--text); }
.sbm-deck .tbtn.stop{ background:#2a1215; border:1px solid #57222a; color:#ff8585; }
[data-bs-theme="light"] .sbm-deck .tbtn.stop{ background:#fdecec; border-color:#f3c2c2; color:#b32626; }
.sbm-deck .spacer{ flex:1; }
.sbm-deck input[type="range"]{ accent-color:var(--accent); width:110px; min-height:2.25rem; }
.sbm-deck .volval{ font-size:12px; color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
.sbm-deck .fsbtn{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:10px; font-weight:800; padding:8px 16px; font-size:14px; }
.sbm-deck .fsbtn:hover{ filter:brightness(1.07); }
/* ---------- Deck tools: save / share / export ---------- */
.sbm-deck .deckbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
.sbm-deck .deckbar .dbtn{ border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:9px; padding:7px 13px; font-size:13px; font-weight:700; min-height:2.4rem; }
.sbm-deck .deckbar .dbtn:hover{ border-color:var(--accent); }
.sbm-deck .deckbar .dbtn.share{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.sbm-deck .deckbar .dbtn.armed{ background:var(--danger); border-color:var(--danger); color:#fff; }
.sbm-deck .savestate{ margin-left:auto; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sbm-deck .savestate .dotok{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.sbm-deck .srctag{ background:var(--panel-2); border:1px solid var(--accent); color:var(--accent); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:700; }
/* ---------- Pages bar ---------- */
.sbm-deck .pagesbar{ display:flex; gap:8px; align-items:center; padding:10px 12px 2px; flex-wrap:wrap; }
.sbm-deck .page-tab{ display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:7px 14px; font-weight:700; font-size:13px; min-height:2.5rem; }
.sbm-deck .page-tab .dot{ width:9px; height:9px; border-radius:50%; }
.sbm-deck .page-tab.on{ color:var(--text); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.sbm-deck .page-tab.add{ border-style:dashed; }
.sbm-deck .page-tab.del{ color:#ff8585; border-color:#57222a; background:#2a1215; }
[data-bs-theme="light"] .sbm-deck .page-tab.del{ background:#fdecec; border-color:#f3c2c2; color:#b32626; }
.sbm-deck .page-tab.del.armed{ background:var(--danger); border-color:var(--danger); color:#fff; max-width:100%; white-space:normal; text-align:left; line-height:1.35; }
.sbm-deck .page-tab.del:disabled{ opacity:.45; cursor:not-allowed; }
.sbm-deck .hint{ margin-left:auto; font-size:12px; color:var(--faint); }
.sbm-deck kbd{ background:var(--panel-2); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px; font-size:11px; font-family:inherit; font-weight:700; }
/* ---------- Layout ---------- */
.sbm-deck .layout{ flex:1; display:grid; grid-template-columns:300px 1fr; gap:12px; padding:12px; align-items:start; }
@media (max-width:860px){
  .sbm-deck .layout{ grid-template-columns:1fr; }
}
/* Library */
.sbm-deck .library{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; position:sticky; top:118px; max-height:calc(100dvh - 140px); display:flex; flex-direction:column; }
@media (max-width:860px){
  .sbm-deck .library{ position:static; max-height:none; order:2; }
}
.sbm-deck .library h2{ margin:0 0 4px; font-size:15px; }
.sbm-deck .library p{ margin:0 0 10px; font-size:12px; color:var(--muted); line-height:1.45; }
.sbm-deck .search{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:14px; margin-bottom:10px; }
.sbm-deck .search:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.sbm-deck .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.sbm-deck .chip{ border:1px solid var(--line); background:var(--panel-2); color:var(--muted); border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; min-height:2rem; }
.sbm-deck .chip.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.sbm-deck .liblist{ overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:2px; }
.sbm-deck .libitem{ display:flex; align-items:center; gap:10px; text-align:left; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-height:3rem; }
.sbm-deck .libitem:hover{ border-color:var(--accent); }
.sbm-deck .libitem .ic{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:18px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.sbm-deck .libitem .nm{ font-size:13px; font-weight:700; line-height:1.25; }
.sbm-deck .libitem .ct{ font-size:11px; color:var(--muted); }
.sbm-deck .libitem .mp3badge{ display:inline-block; background:var(--accent); color:var(--accent-ink); border-radius:4px; padding:0 5px; font-size:10px; font-weight:800; vertical-align:1px; }
.sbm-deck .libitem .drag{ margin-left:auto; color:var(--faint); font-size:15px; flex:none; }
.sbm-deck .libempty{ font-size:13px; color:var(--muted); padding:14px 4px; text-align:center; }
.sbm-deck .sitecontrols{ display:flex; gap:6px; margin-bottom:8px; }
.sbm-deck .sitecontrols select{ flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:8px 6px; font-size:12.5px; font-weight:700; min-height:2.5rem; }
.sbm-deck .sitemeta{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:8px; }
.sbm-deck .sitemeta b{ color:var(--text); }
.sbm-deck .siterow{ cursor:pointer; }
.sbm-deck .libitem .pvbtn{ flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--accent); font-size:14px; display:grid; place-items:center; padding:0; min-height:2rem; }
.sbm-deck .libitem .pvbtn:hover{ border-color:var(--accent); }
.sbm-deck .libitem .meta{ min-width:0; flex:1; }
.sbm-deck .libitem .meta .nm{ display:block; overflow-wrap:break-word; }
.sbm-deck .catchip{ display:inline-block; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:0 7px; font-size:10.5px; font-weight:700; }
.sbm-deck .playsbadge{ color:var(--accent); font-weight:800; }
.sbm-deck .varbadge{ display:inline-block; background:#2e86de; color:#fff; border-radius:4px; padding:0 5px; font-size:10px; font-weight:800; }
.sbm-deck .sitemore{ width:100%; margin-top:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:9px; padding:9px; font-weight:800; font-size:13px; min-height:2.6rem; }
.sbm-deck .sitemore:hover{ border-color:var(--accent); }
.sbm-deck .siterefresh{ border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:7px; padding:3px 10px; font-size:12px; font-weight:700; min-height:2rem; }
.sbm-deck .siteerror{ border:1px solid #57222a; background:#2a1215; color:#ffb3b3; border-radius:10px; padding:10px; font-size:12.5px; line-height:1.5; margin-bottom:8px; }
[data-bs-theme="light"] .sbm-deck .siteerror{ background:#fdecec; border-color:#f3c2c2; color:#8c1d1d; }
/* Deck */
.sbm-deck .deckwrap{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; }
.sbm-deck .deckhead{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sbm-deck .deckhead h2{ margin:0; font-size:19px; }
.sbm-deck .deckhead span{ font-size:12px; color:var(--muted); }
.sbm-deck .deck{ display:grid; gap:var(--deck-gap); }
.sbm-deck .cell{ position:relative; border:1px solid rgba(255,255,255,.22); border-radius:16px; aspect-ratio:1.18; width:100%; min-width:0; min-height:76px; padding:12px 9px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; color:#fff; overflow:hidden; transition:transform .08s ease, box-shadow .15s ease, filter .15s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -4px 0 rgba(0,0,0,.20), 0 5px 12px rgba(0,0,0,.30); }
.sbm-deck .cell:hover{ transform:translateY(-2px); filter:brightness(1.08); }
@media (max-width:560px){
  .sbm-deck .deckwrap{ padding:10px; }
  .sbm-deck .deck{ gap:6px; }
  .sbm-deck .cell{ min-height:62px; padding:8px 4px 7px; border-radius:12px; }
  .sbm-deck .cell .nm{ font-size:11px; }
  .sbm-deck .cell .nm.long{ font-size:10px; }
  .sbm-deck .cell .nm.xlong{ font-size:9px; }
  .sbm-deck .cell .hk{ top:4px; right:4px; padding:0 4px; font-size:9.5px; }
  .sbm-deck .cell .loopbadge{ top:4px; left:4px; padding:0 4px; font-size:8.5px; }
}
.sbm-deck .cell:active{ transform:scale(.96); filter:brightness(.97); }
.sbm-deck .cell .nm{ font-size:clamp(12px, 1.6vw, 15px); font-weight:700; letter-spacing:.01em; line-height:1.22; text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none; max-width:100%; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }
.sbm-deck .cell .nm.long{ font-size:clamp(10.5px, 1.35vw, 12.5px); }
.sbm-deck .cell .nm.xlong{ font-size:clamp(9.5px, 1.15vw, 11px); }
.sbm-deck .cell .badgerow{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; pointer-events:none; }
.sbm-deck .cell.isloop{ outline:2px dotted rgba(255,255,255,.55); outline-offset:-6px; }
.sbm-deck .cell .hk{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,.45); border-radius:5px; padding:1px 6px; font-size:10.5px; font-weight:800; letter-spacing:.03em; }
.sbm-deck .cell .loopbadge{ position:absolute; top:6px; left:6px; background:rgba(0,0,0,.45); border-radius:5px; padding:1px 6px; font-size:9.5px; font-weight:800; letter-spacing:.08em; }
.sbm-deck .cell.empty{ background:var(--panel-2); color:var(--faint); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); border:2px dashed var(--line); }
.sbm-deck .cell.empty:hover{ transform:none; filter:none; }
.sbm-deck .cell.empty .plus{ font-size:22px; font-weight:300; opacity:.55; line-height:1; }
.sbm-deck .cell.empty .nm{ color:var(--faint); font-weight:600; text-shadow:none; font-size:10.5px; letter-spacing:.05em; }
.sbm-deck .cell.playing{ box-shadow:0 0 0 3px var(--keyc, #fff), 0 0 24px var(--keyc, rgba(255,255,255,.5)), inset 0 1px 0 rgba(255,255,255,.4); animation:keypulse 1s ease-in-out infinite; }
@keyframes keypulse{ 50%{ box-shadow:0 0 0 3px var(--keyc, #fff), 0 0 7px var(--keyc, rgba(255,255,255,.35)), inset 0 1px 0 rgba(255,255,255,.4); } }
.sbm-deck .cell .eq{ display:none; position:absolute; bottom:9px; left:50%; transform:translateX(-50%); gap:2.5px; align-items:flex-end; height:12px; pointer-events:none; }
.sbm-deck .cell.playing .eq{ display:flex; }
.sbm-deck .cell .eq i{ width:3.5px; height:40%; background:rgba(255,255,255,.92); border-radius:2px; animation:eqb .7s ease-in-out infinite; }
.sbm-deck .cell .eq i:nth-child(2){ animation-delay:.18s; }
.sbm-deck .cell .eq i:nth-child(3){ animation-delay:.36s; }
.sbm-deck .cell .eq i:nth-child(4){ animation-delay:.1s; }
@keyframes eqb{ 0%,100%{ height:30%; } 50%{ height:100%; } }
body.deckonly .sbm-deck .cell{ border-radius:18px; }
body.deckonly .sbm-deck .cell .nm{ font-size:clamp(14px, 2vw, 20px); }
body.deckonly .sbm-deck .cell .nm.long{ font-size:clamp(12px, 1.7vw, 16px); }
body.deckonly .sbm-deck .cell .nm.xlong{ font-size:clamp(11px, 1.4vw, 13.5px); }
.sbm-deck .cell.playing::after{ content:""; position:absolute; inset:0 10px auto; height:4px; border-radius:2px; background:rgba(255,255,255,.9); transform-origin:left; animation:prog var(--dur,1s) linear forwards; }
@keyframes prog{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.sbm-deck .cell.dragover{ box-shadow:0 0 0 3px var(--accent); }
.sbm-deck .cell .editbadge{ display:none; position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.55); border-radius:5px; padding:1px 6px; font-size:10px; font-weight:700; }
body.editing .sbm-deck .cell .editbadge{ display:block; }
/* Status bar */
.sbm-deck .statusbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 12px; background:var(--panel); border-top:1px solid var(--line); font-size:13px; color:var(--muted); position:sticky; bottom:0; z-index:20; }
.sbm-deck .statusbar .live{ display:flex; align-items:center; gap:7px; font-weight:700; color:var(--text); }
.sbm-deck .pulse{ width:9px; height:9px; border-radius:50%; background:var(--faint); }
.sbm-deck .pulse.on{ background:var(--ok); animation:pl 0.9s ease-in-out infinite; }
@keyframes pl{ 50%{ opacity:.35; } }
.sbm-deck .statusbar .right{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width:560px){
  /* Thanh trạng thái không sticky ở điện thoại để không che hàng nút cuối của deck */
  .sbm-deck .statusbar{ position:static; }
  .sbm-deck .statusbar .right{ margin-left:0; }
}
.sbm-deck .tag{ background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; }
/* Sheets (editor + share/import) */
.sbm-deck .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; z-index:50; }
.sbm-deck .scrim.open{ display:block; }
.sbm-deck .sheet{ position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); width:min(480px, 100%); background:var(--panel); border:1px solid var(--line); border-bottom:none; border-radius:18px 18px 0 0; padding:18px; z-index:60; transition:transform .22s ease; max-height:88dvh; overflow-y:auto; }
.sbm-deck .sheet.open{ transform:translate(-50%,0); }
@media (min-width:700px){
  .sbm-deck .sheet{ bottom:auto; top:50%; transform:translate(-50%,-46%) scale(.97); opacity:0; pointer-events:none; border-radius:18px; border-bottom:1px solid var(--line); }
  .sbm-deck .sheet.open{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
}
.sbm-deck .sheet h3{ margin:0 0 2px; font-size:17px; }
.sbm-deck .sheet .sub{ font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.5; }
.sbm-deck .field{ margin-bottom:14px; }
.sbm-deck .field label{ display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.sbm-deck .field input[type="text"]{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:15px; }
.sbm-deck .field textarea{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:12.5px; line-height:1.5; min-height:130px; resize:vertical; word-break:break-all; color:var(--text); font-family:ui-monospace, Consolas, monospace; }
.sbm-deck .swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.sbm-deck .sw{ width:40px; height:40px; border-radius:10px; border:2px solid transparent; padding:0; }
.sbm-deck .sw.on{ border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
.sbm-deck .emojis{ display:flex; gap:6px; flex-wrap:wrap; }
.sbm-deck .em{ width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); font-size:19px; padding:0; }
.sbm-deck .em.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.sbm-deck .hkrow{ display:flex; gap:8px; align-items:center; }
.sbm-deck .hkcap{ flex:1; background:var(--panel-2); border:1px dashed var(--line); border-radius:9px; padding:9px 11px; font-weight:800; text-align:center; font-size:14px; min-height:2.75rem; }
.sbm-deck .hkcap.listening{ border-color:var(--accent); color:var(--accent); }
.sbm-deck .sheet .dk-row{ display:flex; gap:8px; flex-wrap:wrap; }
.sbm-deck .dk-btn{ border:1px solid var(--line); background:var(--panel-2); border-radius:10px; padding:9px 14px; font-weight:700; font-size:14px; min-height:2.75rem; }
.sbm-deck .dk-btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); flex:1; }
.sbm-deck .dk-btn.danger{ color:#ff8585; border-color:#57222a; background:#2a1215; }
[data-bs-theme="light"] .sbm-deck .dk-btn.danger{ background:#fdecec; border-color:#f3c2c2; color:#b32626; }
.sbm-deck .checkline{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; padding:6px 0; cursor:pointer; min-height:2.5rem; }
.sbm-deck .checkline input{ width:20px; height:20px; accent-color:var(--accent); }
.sbm-deck .libitem .cbadge{ display:inline-block; border-radius:4px; padding:0 5px; font-size:10px; font-weight:800; vertical-align:1px; background:#2e86de; color:#fff; }
/* Per-button controls in editor */
.sbm-deck .field input[type="number"]{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:15px; }
.sbm-deck .field .rangerow{ display:flex; align-items:center; gap:10px; }
.sbm-deck .field .rangerow input[type="range"]{ flex:1; width:auto; }
.sbm-deck .field .rval{ font-size:13px; font-weight:800; min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.sbm-deck .trimrow{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.sbm-deck .trimrow .sublbl{ font-size:11px; color:var(--muted); font-weight:600; margin-bottom:4px; display:block; text-transform:none; letter-spacing:0; }
.sbm-deck .cell .ctrlbadge{ position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.5); border-radius:5px; padding:1px 6px; font-size:9.5px; font-weight:700; pointer-events:none; }
.sbm-deck .cell .typebadge{ display:inline-block; background:rgba(0,0,0,.62); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:1px 7px; font-size:9.5px; font-weight:800; letter-spacing:.04em; pointer-events:none; line-height:1.5; }
.sbm-deck .cell .ladflash{ position:absolute; top:6px; left:50%; transform:translateX(-50%); background:#ffb020; color:#1a1200; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:900; pointer-events:none; opacity:0; z-index:3; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.sbm-deck .cell .ladflash.show{ animation:ladpop .95s ease-out; }
@keyframes ladpop{ 0%{ opacity:0; transform:translateX(-50%) translateY(5px) scale(.75); } 14%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1.12); } 30%{ transform:translateX(-50%) scale(1); } 72%{ opacity:1; } 100%{ opacity:0; transform:translateX(-50%) translateY(-3px); } }
@media (prefers-reduced-motion: reduce){
  .sbm-deck .cell .ladflash.show{ animation-duration:.01s; }
}
.sbm-deck .automenu{ display:none; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 12px 2px; }
.sbm-deck .automenu.open{ display:flex; }
.sbm-deck .automenu .amlabel{ font-size:12.5px; font-weight:800; color:var(--muted); }
body.deckonly .sbm-deck .automenu{ display:none !important; }
.sbm-deck .typesel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:6px; }
.sbm-deck .typesel button{ border:1px solid var(--line); background:var(--panel-2); border-radius:9px; padding:8px 4px; font-size:12.5px; font-weight:800; min-height:2.6rem; }
.sbm-deck .typesel button.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
@media (max-width:560px){
  .sbm-deck .typesel{ grid-template-columns:repeat(2,1fr); }
}
.sbm-deck .steprow, .sbm-deck .randrow{ display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:7px 9px; margin-bottom:6px; font-size:13px; }
.sbm-deck .steprow .sname, .sbm-deck .randrow .sname{ flex:1; font-weight:700; min-width:0; overflow-wrap:break-word; }
.sbm-deck .steprow .mini, .sbm-deck .randrow .mini{ flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--panel); font-weight:800; padding:0; min-height:2rem; }
.sbm-deck .randrow input{ width:20px; height:20px; accent-color:var(--accent); flex:none; }
.sbm-deck .pickrow{ display:flex; gap:8px; }
.sbm-deck .pickrow select{ flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:14px; min-height:2.6rem; }
.sbm-deck .field select{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:15px; min-height:2.6rem; }
.sbm-deck .scrollpick{ max-height:220px; overflow-y:auto; padding-right:2px; }
.sbm-deck .typenote{ font-size:12px; color:var(--muted); line-height:1.5; margin:0 0 10px; }
body.editing .sbm-deck .cell .ctrlbadge{ bottom:auto; top:26px; }
/* ---------- View tabs + Sequencer ---------- */
.sbm-deck .viewtabs{ display:flex; gap:8px; align-items:center; padding:8px 12px 0; flex-wrap:wrap; }
.sbm-deck .vtab{ border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:8px 18px; font-weight:800; font-size:14px; min-height:2.6rem; }
.sbm-deck .vtab.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.sbm-deck .seqwrap{ margin:12px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; }
.sbm-deck .seqhead{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.sbm-deck .seqhead h2{ margin:0; font-size:19px; }
.sbm-deck .seqhead p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; flex-basis:100%; }
.sbm-deck .seqtransport{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:10px; margin-bottom:12px; }
.sbm-deck .seqbtn{ border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:9px; padding:8px 14px; font-weight:800; font-size:13.5px; min-height:2.6rem; }
.sbm-deck .seqbtn.play{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); min-width:118px; }
.sbm-deck .seqbtn.stopb{ background:#2a1215; border-color:#57222a; color:#ff8585; }
[data-bs-theme="light"] .sbm-deck .seqbtn.stopb{ background:#fdecec; border-color:#f3c2c2; color:#b32626; }
.sbm-deck .seqbpm{ display:flex; align-items:center; gap:8px; margin-left:4px; }
.sbm-deck .seqbpm label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sbm-deck .seqbpm input[type="range"]{ width:150px; }
.sbm-deck .seqbpm .bpmval{ font-weight:800; font-variant-numeric:tabular-nums; min-width:86px; }
.sbm-deck .seqstatus{ margin-left:auto; font-size:13px; font-weight:700; color:var(--muted); }
.sbm-deck .seqstatus.on{ color:var(--ok); }
.sbm-deck .seqscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.sbm-deck .seqgrid{ min-width:820px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.sbm-deck .seqrow{ display:grid; grid-template-columns:210px repeat(16, minmax(34px, 1fr)); gap:5px; align-items:center; }
.sbm-deck .seqrowhead{ position:sticky; left:0; z-index:2; background:var(--panel-2); display:flex; gap:6px; align-items:center; padding-right:8px; }
.sbm-deck .seqrowhead .dotc{ width:12px; height:12px; border-radius:50%; flex:none; }
.sbm-deck .seqrowhead select{ flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 6px; font-size:12.5px; font-weight:700; min-height:2.4rem; }
.sbm-deck .seqmute{ flex:none; width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:var(--panel); padding:0; font-size:15px; }
.sbm-deck .seqmute.muted{ background:var(--danger); border-color:var(--danger); color:#fff; }
.sbm-deck .stepcell{ height:42px; border-radius:8px; border:1px solid var(--line); background:var(--panel); padding:0; min-height:2.6rem; position:relative; }
.sbm-deck .stepcell.beatstart{ border-left:3px solid var(--muted); }
.sbm-deck .stepcell.on{ background:var(--rowc, var(--accent)); border-color:var(--rowc, var(--accent)); box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); }
.sbm-deck .stepcell.playcol{ outline:3px solid #fff; outline-offset:-1px; }
.sbm-deck .stepcell.on.playcol{ filter:brightness(1.25); }
.sbm-deck .seqstepshead{ display:grid; grid-template-columns:210px repeat(16, minmax(34px, 1fr)); gap:5px; align-items:center; }
.sbm-deck .seqstepshead .sh{ text-align:center; font-size:11px; font-weight:800; color:var(--faint); }
.sbm-deck .seqstepshead .sh.beat{ color:var(--text); }
body.deckonly .sbm-deck .viewtabs, body.deckonly .sbm-deck .seqwrap{ display:none !important; }
/* Deck-only (fullscreen) mode */
body.deckonly .sbm-deck .toolbar, body.deckonly .sbm-deck .deckbar, body.deckonly .sbm-deck .pagesbar, body.deckonly .sbm-deck .library, body.deckonly .sbm-deck .statusbar .right, body.deckonly .sbm-deck .deckhead span{ display:none; }
body.deckonly .sbm-deck .layout{ grid-template-columns:1fr; padding:10px; }
body.deckonly .sbm-deck .deckwrap{ border:none; background:transparent; padding:6px; }
body.deckonly{ background:#000; }
body.deckonly .sbm-deck .deckwrap{ background:#000; }
.sbm-deck .exitfs{ display:none; position:fixed; top:10px; right:10px; z-index:80; background:rgba(20,22,28,.85); color:#fff; border:1px solid #3a4152; border-radius:999px; padding:8px 15px; font-weight:700; font-size:13px; backdrop-filter:blur(4px); }
body.deckonly .sbm-deck .exitfs{ display:block; }
.sbm-deck .dk-toast{ position:fixed; left:50%; bottom:76px; transform:translateX(-50%) translateY(20px); background:#1d212b; color:#fff; border:1px solid #343b4a; padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:.2s; z-index:90; max-width:92vw; text-align:center; }
.sbm-deck .dk-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* ---------- Tabs scroll + Piano / Hands-free / Timer / Ambient ---------- */
.sbm-deck .viewtabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.sbm-deck .viewtabs .vtab{ flex:none; }
.sbm-deck .viewtabs .hint{ flex:none; }
body.deckonly .sbm-deck .seqwrap, body.deckonly .sbm-deck #extrasPanel, body.deckonly .sbm-deck #pianoPanel, body.deckonly .sbm-deck #ambientPanel{ display:none !important; }
.sbm-deck .extrasgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:860px){
  .sbm-deck .extrasgrid{ grid-template-columns:1fr; }
}
.sbm-deck .xbox{ border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--panel-2); }
.sbm-deck .xbox h3{ margin:0 0 6px; font-size:15px; }
.sbm-deck .xbox p{ margin:0 0 10px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.sbm-deck .xrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.sbm-deck .xrow select, .sbm-deck .xrow input[type="text"], .sbm-deck .xrow input[type="number"]{ flex:1; min-width:130px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:14px; min-height:2.6rem; }
.sbm-deck .xbtn{ border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:9px; padding:8px 14px; font-weight:800; font-size:13.5px; min-height:2.6rem; }
.sbm-deck .xbtn.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.sbm-deck .xbtn.stopb{ background:#2a1215; border-color:#57222a; color:#ff8585; }
[data-bs-theme="light"] .sbm-deck .xbtn.stopb{ background:#fdecec; border-color:#f3c2c2; color:#b32626; }
.sbm-deck .xstatus{ font-size:13px; font-weight:700; color:var(--muted); }
.sbm-deck .xstatus.on{ color:var(--ok); }
.sbm-deck .levelbar{ height:14px; background:var(--panel); border:1px solid var(--line); border-radius:7px; overflow:hidden; margin:6px 0 10px; position:relative; }
.sbm-deck .levelbar > i{ display:block; height:100%; width:0%; background:var(--ok); transition:width .05s linear; }
.sbm-deck .levelbar > b{ position:absolute; top:0; bottom:0; width:2px; background:var(--danger); }
.sbm-deck .sensrow{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sbm-deck .sensrow label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sbm-deck .sensrow input[type="range"]{ flex:1; width:auto; }
.sbm-deck .presetbtn{ border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:700; min-height:2.2rem; }
.sbm-deck .presetbtn:hover{ color:var(--text); border-color:var(--accent); }
.sbm-deck .timerrow{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:7px 10px; margin-bottom:6px; font-size:13.5px; }
.sbm-deck .timerrow .tname{ flex:1; font-weight:700; min-width:0; overflow-wrap:break-word; }
.sbm-deck .timerrow .tremain{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent); }
.sbm-deck .timerrow .mini{ flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); font-weight:800; padding:0; min-height:2rem; }
/* Piano */
.sbm-deck .piano{ position:relative; height:210px; background:#101216; border:1px solid var(--line); border-radius:12px; padding:10px; overflow:hidden; }
.sbm-deck .pwhites{ display:flex; height:100%; gap:2px; }
.sbm-deck .pkey-w{ flex:1; min-width:0; background:linear-gradient(#ffffff,#dfe3ea); color:#22242a; border:1px solid #9aa0ad; border-radius:0 0 8px 8px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; padding:0 1px 8px; font-weight:800; cursor:pointer; }
.sbm-deck .pkey-w .kn{ font-size:12px; }
.sbm-deck .pkey-w .kk, .sbm-deck .pkey-b .kk{ font-size:10px; font-weight:700; opacity:.65; text-transform:uppercase; }
.sbm-deck .pkey-b{ position:absolute; top:10px; height:56%; background:linear-gradient(#2b2e35,#0c0d10); color:#fff; border:1px solid #000; border-radius:0 0 6px 6px; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; padding:0 1px 6px; font-weight:800; cursor:pointer; }
.sbm-deck .pkey-b .kn{ font-size:10.5px; }
.sbm-deck .pkey-w.hit, .sbm-deck .pkey-b.hit{ background:var(--accent); color:var(--accent-ink); }
/* Ambient */
.sbm-deck .ambrow{ display:flex; gap:10px; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; flex-wrap:wrap; }
.sbm-deck .ambrow .aic{ font-size:22px; }
.sbm-deck .ambrow .anm{ font-weight:800; min-width:110px; }
.sbm-deck .ambrow input[type="range"]{ flex:1; min-width:110px; width:auto; }
.sbm-deck .ambrow .aval{ font-size:12.5px; color:var(--muted); min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.sbm-deck .fxbadge{ display:inline-block; background:#111827; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:1px 7px; font-size:9.5px; font-weight:800; letter-spacing:.03em; pointer-events:none; line-height:1.5; }
.sbm-deck .cell.gpflash{ box-shadow:0 0 0 4px #fff, 0 0 26px rgba(255,255,255,.7) !important; transform:scale(.95); }
.sbm-deck .gprow{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:6px 9px; margin-bottom:6px; font-size:13px; }
.sbm-deck .gprow .gdot{ width:12px; height:12px; border-radius:50%; background:var(--faint); flex:none; }
.sbm-deck .gprow .gdot.on{ background:var(--ok); box-shadow:0 0 8px var(--ok); }
.sbm-deck .gprow .gname{ font-weight:800; min-width:86px; }
.sbm-deck .gprow select{ flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:7px 8px; min-height:2.4rem; }
.sbm-deck .ambrow .adel{ flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:#ff8585; font-weight:800; display:grid; place-items:center; padding:0; min-height:2rem; }
.sbm-deck .ambrow .adel:hover{ border-color:var(--danger); }
.sbm-deck .ambrow.missing{ opacity:.72; }
.sbm-deck .ambrow .anote{ flex-basis:100%; font-size:12px; color:#ff8585; line-height:1.45; }
.sbm-deck .xbtn:disabled{ opacity:.5; cursor:not-allowed; }
.sbm-deck #ambLoopPicker{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--panel); margin-bottom:10px; }
.sbm-deck #ambLoopPicker .liblist{ max-height:320px; }
@media (prefers-reduced-motion: reduce){
  .sbm-deck *{ animation:none !important; transition:none !important; }
}
/* ================= ĐỢT TỐI ƯU DESKTOP + MOBILE ================= */
.sbm-deck{ overflow-x:clip; }
/* CSS containment: giảm chi phí repaint cho ô deck + hàng thư viện */
.sbm-deck .cell{ contain:layout paint; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.sbm-deck .libitem{ contain:layout paint; }
/* Tap target ≥44px cho mọi control tương tác */
.sbm-deck button, .sbm-deck [role="button"], .sbm-deck select, .sbm-deck input:not([type="checkbox"],[type="radio"]){ min-height:2.75rem; }
.sbm-deck .tbtn, .sbm-deck .chip, .sbm-deck .page-tab, .sbm-deck .dbtn, .sbm-deck .vtab, .sbm-deck .seqbtn, .sbm-deck .xbtn, .sbm-deck .presetbtn, .sbm-deck .siterefresh, .sbm-deck .sitemore{ min-height:2.75rem; }
.sbm-deck .libitem{ min-height:3rem; }
.sbm-deck .libitem .pvbtn{ width:44px; height:44px; min-height:44px; }
.sbm-deck .libitem .delx{ width:40px; height:44px; }
.sbm-deck .seqmute{ width:44px; height:44px; }
.sbm-deck .stepcell{ height:44px; min-height:44px; }
.sbm-deck .steprow .mini, .sbm-deck .randrow .mini, .sbm-deck .timerrow .mini{ width:40px; height:44px; min-height:44px; }
.sbm-deck .ambrow .adel{ width:44px; height:44px; min-height:44px; }
.sbm-deck .gprow select{ min-height:2.75rem; }
.sbm-deck .sw{ width:44px; height:44px; }
.sbm-deck .em{ width:44px; height:44px; }
.sbm-deck .checkline{ min-height:2.75rem; }
/* Bố cục: <1200px một cột (deck trước, rail dưới); ≥1200px deck trái + rail phải sticky cuộn độc lập */
.sbm-deck .layout{ grid-template-columns:minmax(0,1fr); }
.sbm-deck .layout > *, .sbm-deck .rail > *{ min-width:0; }
.sbm-deck .rail{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.sbm-deck .rail .library{ position:static; max-height:none; flex:none; order:0; }
.sbm-deck .rail .seqwrap{ margin:0; }
.sbm-deck .rail .extrasgrid{ grid-template-columns:1fr; }
@media (min-width:1200px){
  .sbm-deck .layout{ grid-template-columns:minmax(0,1fr) 400px; align-items:start; }
  /* Trừ thêm ~66px cho thanh trạng thái sticky ở đáy viewport: mép dưới của
       rail phải nằm TRÊN thanh trạng thái, nếu không hàng thư viện cuối rail
       (vd nút Preview) bị thanh trạng thái phủ lên và không bấm được. */
  .sbm-deck .rail{ position:sticky; top:70px; max-height:calc(100dvh - 148px); overflow-y:auto; overscroll-behavior:contain; padding-right:2px; scrollbar-width:thin; }
}
/* Editor: 700–768px giữ bottom sheet (ghi đè rule modal giữa màn hình ở ≥700px) */
@media (min-width:700px) and (max-width:768px){
  .sbm-deck .sheet{ bottom:0; top:auto; transform:translate(-50%,105%); opacity:1; pointer-events:auto; border-radius:18px 18px 0 0; border-bottom:none; }
  .sbm-deck .sheet.open{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
}
/* Thanh điều khiển dính cho mobile (ẩn mặc định + ẩn trong Deck Mode) */
.sbm-deck .mobilebar{ display:none; }
body.deckonly .sbm-deck .mobilebar{ display:none !important; }
body.deckonly .sbm-deck .app{ padding-bottom:0; }
/* Deck Mode toàn màn hình: khớp dvh + safe-area cả dọc lẫn ngang, chặn pull-to-refresh */
body.deckonly{ overscroll-behavior:none; }
html:has(body.deckonly){ overscroll-behavior:none; }
body.deckonly .sbm-deck .deckhead{ display:none; }
body.deckonly .sbm-deck .layout{ padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
body.deckonly .sbm-deck .deck{ height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); grid-auto-rows:minmax(0,1fr); }
body.deckonly .sbm-deck .cell{ aspect-ratio:auto; height:100%; min-height:0; }
/* Kéo-thả cảm ứng (Pointer Events): ghost + khoá cuộn trang khi đang kéo */
.sbm-deck .td-ghost{ position:fixed; z-index:200; pointer-events:none; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:13px; padding:10px 14px; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.45); transform:translate(-50%,-140%); max-width:70vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.td-dragging{ overflow:hidden; touch-action:none; }
.sbm-deck .td-src{ opacity:.45; touch-action:none; }
@media (max-width:768px){
  /* Chữ trong input/select ≥16px để iOS không tự zoom khi focus */
  .sbm-deck input, .sbm-deck select, .sbm-deck textarea{ font-size:16px !important; }
  .sbm-deck .sheet{ width:100%; max-width:100%; max-height:85dvh; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  /* Hàng tab page cuộn ngang */
  .sbm-deck .pagesbar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; }
  .sbm-deck .pagesbar::-webkit-scrollbar{ display:none; }
  .sbm-deck .pagesbar > *{ flex:none; }
  .sbm-deck .pagesbar .hint{ display:none; }
  .sbm-deck .viewtabs .hint{ display:none; }
  /* Giảm chi phí chuyển động trên màn hình nhỏ: bỏ pulse/EQ động, giữ chỉ báo tĩnh */
  .sbm-deck .cell.playing{ animation:none; box-shadow:0 0 0 3px var(--keyc, #fff), inset 0 1px 0 rgba(255,255,255,.4); }
  .sbm-deck .cell .eq i{ animation:none; height:70%; }
  .sbm-deck .cell, .sbm-deck .libitem, .sbm-deck .tbtn, .sbm-deck .vtab, .sbm-deck .page-tab, .sbm-deck .chip{ transition-duration:.08s; }
  .sbm-deck .app{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  .sbm-deck .statusbar{ position:static; }
  .sbm-deck .mobilebar{ display:flex; gap:8px; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--panel); border-top:1px solid var(--line); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .sbm-deck .mobilebar .mb-stop{ background:#2a1215; border:1px solid #57222a; color:#ff8585; border-radius:10px; font-weight:800; padding:8px 12px; min-height:44px; white-space:nowrap; }
  [data-bs-theme="light"] .sbm-deck .mobilebar .mb-stop{ background:#fdecec; border-color:#f3c2c2; color:#b32626; }
  .sbm-deck .mobilebar input[type="range"]{ flex:1; min-width:0; width:auto; }
  .sbm-deck .mobilebar .mb-volval{ font-size:12px; color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
  .sbm-deck .mobilebar .mb-fs{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:10px; font-weight:800; padding:8px 12px; min-height:44px; white-space:nowrap; }
  /* Accordion cho các panel ở tab Deck: thu gọn mặc định, bấm tiêu đề để mở */
  .sbm-deck #extrasPanel .xbox > *:not(h3){ display:none; }
  .sbm-deck #extrasPanel .xbox.open > *:not(h3){ display:block; }
  .sbm-deck #extrasPanel .xbox.open > .xrow, .sbm-deck #extrasPanel .xbox.open > .sensrow{ display:flex; }
  .sbm-deck #extrasPanel .xbox h3{ cursor:pointer; position:relative; padding-right:30px; min-height:44px; display:flex; align-items:center; margin-bottom:0; }
  .sbm-deck #extrasPanel .xbox.open h3{ margin-bottom:6px; }
  .sbm-deck #extrasPanel .xbox h3::after{ content:"▸"; position:absolute; right:8px; font-size:19px; color:var(--muted); }
  .sbm-deck #extrasPanel .xbox.open h3::after{ content:"▾"; }
  /* Sequencer: cột chọn track hẹp hơn trên mobile để dành chỗ cho step */
  .sbm-deck .seqgrid{ min-width:760px; }
}
@media (max-width:560px){
  .sbm-deck .toolbar{ padding:8px; gap:6px; }
  .sbm-deck .brand small{ display:none; }
  .sbm-deck .fsbtn{ padding:8px 12px; font-size:13px; }
  .sbm-deck .deckbar{ padding:8px; }
}
@media (max-width:768px){
  /* FIX 1 — Chrome mobile KHÔNG còn là hàng cuộn ngang ẩn: toolbar gói thành
       các hàng compact, điều khiển chính (Play / Volume / Stop All / Edit /
       Fullscreen) luôn thấy trọn trong bề ngang ban đầu; mục phụ (Grid,
       Share / Export / Import / Reset) nằm trong menu "⋯ More". */
  .sbm-deck .toolbar{ flex-wrap:wrap; overflow:visible; gap:6px; }
  .sbm-deck .toolbar .spacer{ display:none; }
  .sbm-deck .brand{ order:1; flex:1 1 auto; min-width:0; }
  .sbm-deck .brand small{ display:none; }
  .sbm-deck .fsbtn{ order:2; flex:none; }
  .sbm-deck .playgroup{ order:3; flex:none; }
  .sbm-deck #editToggle{ order:4; flex:none; margin-left:auto; }
  .sbm-deck .volgroup{ order:5; flex:1 1 170px; min-width:0; }
  .sbm-deck .volgroup input[type="range"]{ flex:1; min-width:52px; width:auto; }
  .sbm-deck #stopAll{ order:6; flex:none; }
  .sbm-deck .gridgroup{ order:7; flex:1 1 100%; }
  .sbm-deck .toolbar .tbtn{ font-size:12px; padding:6px 8px; }
  body:not(.moreopen) .sbm-deck .gridgroup{ display:none; }
  .sbm-deck .deckbar{ flex-wrap:wrap; overflow:visible; }
  .sbm-deck .deckbar > *{ flex:none; }
  .sbm-deck .deckbar #btnMore{ display:inline-block; }
  body:not(.moreopen) .sbm-deck .deckbar .dbtn:not(#btnMore){ display:none; }
  .sbm-deck .deckbar .savestate{ margin-left:auto; }
  /* Gợi ý cuộn ngang cho 2 thanh được phép cuộn: mép phải mờ dần */
  .sbm-deck .viewtabs, .sbm-deck .pagesbar{ -webkit-mask-image:linear-gradient(90deg, #000 93%, transparent 100%); mask-image:linear-gradient(90deg, #000 93%, transparent 100%); }
}
.sbm-deck #btnMore{ display:none; }
/* ================= DECK MODE QUICK ACTIONS (HUD / STRIP / NOW / RECENT / QS) ================= */
.sbm-deck .dmhud, .sbm-deck .dmbottom{ display:none; }
body.deckonly .sbm-deck .app{ height:100dvh; min-height:0; overflow:hidden; }
body.deckonly .sbm-deck .dmhud{ display:flex; align-items:center; gap:10px; padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left)); background:#000; flex:none; max-width:100%; }
body.deckonly .sbm-deck .layout{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
body.deckonly .sbm-deck .rail{ display:none; }
body.deckonly .sbm-deck .deckwrap{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
body.deckonly .sbm-deck .deck{ flex:1 1 auto; height:auto; min-height:0; }
body.deckonly .sbm-deck .statusbar{ display:none; }
body.deckonly .sbm-deck .dmbottom{ display:flex; flex-direction:column; flex:none; background:#000; max-width:100%; }
body.deckonly .sbm-deck .exitfs{ top:calc(64px + env(safe-area-inset-top)); }
.sbm-deck .dmnavbtn{ flex:none; width:52px; height:48px; border-radius:12px; border:1px solid #3a4152; background:#171a21; color:#fff; font-size:19px; font-weight:800; }
.sbm-deck .dmnavbtn:disabled{ opacity:.35; }
.sbm-deck .dmpageinfo{ flex:1 1 auto; min-width:0; text-align:center; }
.sbm-deck .dmpagename{ font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sbm-deck .dmdots{ display:flex; gap:6px; justify-content:center; margin-top:4px; overflow:hidden; }
.sbm-deck .dmdot{ width:9px; height:9px; border-radius:50%; background:#3a4152; flex:none; }
.sbm-deck .dmdot.on{ background:var(--accent); }
.sbm-deck .dmclockbox{ flex:none; text-align:right; font-variant-numeric:tabular-nums; }
.sbm-deck .dmclockbox #dmClock{ font-size:17px; font-weight:800; }
.sbm-deck .dmclockbox .dmsep{ color:var(--faint); margin:0 5px; }
.sbm-deck .dmclockbox #dmSession{ font-size:13px; color:var(--muted); font-weight:700; }
.sbm-deck .deck.pageanim{ animation:dmpagein .18s ease; }
@keyframes dmpagein{ from{ opacity:.2; transform:translateX(var(--dm-slide, 18px)); } }
/* Recent strip */
.sbm-deck .dmrecent{ border-top:1px solid #262b36; padding:4px 10px 2px; }
.sbm-deck .dmrecenthead{ display:flex; align-items:center; gap:8px; min-height:30px; cursor:pointer; }
.sbm-deck .dmrecenthead .dmrtitle{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sbm-deck .dmrecenthead .dmrchev{ color:var(--muted); font-size:13px; }
.sbm-deck .dmrecent.collapsed .dmrchev{ transform:rotate(-90deg); display:inline-block; }
.sbm-deck .dmclear{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:12px; font-weight:700; text-decoration:underline; min-height:30px; padding:0 6px; }
.sbm-deck .dmchips{ display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0 7px; scrollbar-width:none; max-width:100%; }
.sbm-deck .dmchips::-webkit-scrollbar{ display:none; }
.sbm-deck .dmrecent.collapsed .dmchips{ display:none; }
.sbm-deck .dmchip{ flex:none; max-width:46vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid #3a4152; background:#171a21; color:#fff; border-radius:999px; padding:8px 13px; font-size:13px; font-weight:700; min-height:40px; }
.sbm-deck .dmchip:disabled{ opacity:.42; }
.sbm-deck .dmchips .dmrempty{ font-size:12.5px; color:var(--faint); padding:6px 2px; }
/* Now Playing banner */
.sbm-deck .dmnow{ display:none; align-items:center; gap:10px; margin:6px 10px 0; background:#171a21; border:1px solid var(--accent); border-radius:12px; padding:9px 12px; }
.sbm-deck .dmnow.show{ display:flex; }
.sbm-deck .dmnowdot{ width:10px; height:10px; border-radius:50%; background:var(--ok); flex:none; animation:pl .9s ease-in-out infinite; }
.sbm-deck .dmnowname{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sbm-deck .dmnowtime{ flex:none; font-size:13px; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.sbm-deck .dmnowstop{ flex:none; background:#2a1215; border:1px solid #57222a; color:#ff8585; border-radius:9px; font-weight:800; padding:8px 13px; min-height:44px; }
/* Performance strip */
.sbm-deck .dmstrip{ display:flex; align-items:center; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #262b36; }
.sbm-deck .dmpanic{ flex:none; background:var(--danger); color:#fff; border:none; border-radius:12px; font-weight:900; font-size:15px; padding:12px 16px; min-height:52px; letter-spacing:.02em; }
.sbm-deck .dmpanic:active{ transform:scale(.97); }
.sbm-deck .dmvol{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px; }
.sbm-deck .dmvol span{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); flex:none; }
.sbm-deck .dmvol input[type="range"]{ flex:1 1 auto; min-width:0; width:auto; }
.sbm-deck .dmvol #dmVolVal{ min-width:36px; text-align:right; font-variant-numeric:tabular-nums; }
.sbm-deck .dmbtn{ flex:none; border:1px solid #3a4152; background:#171a21; color:#fff; border-radius:11px; font-weight:800; font-size:13.5px; padding:10px 13px; min-height:52px; }
@media (max-width:560px){
  .sbm-deck .dmpanic{ font-size:13px; padding:11px 11px; }
  .sbm-deck .dmbtn{ padding:9px 9px; font-size:12.5px; }
  .sbm-deck .dmvol span.lbl{ display:none; }
}
/* Lock mode: hide Exit + secondary strip controls; PANIC, grid, page nav, lock stay */
body.dm-locked .sbm-deck .exitfs{ display:none !important; }
body.dm-locked .sbm-deck .dm-hide-lock{ display:none !important; }
/* Quick Search overlay */
.sbm-deck .qsoverlay{ position:fixed; inset:0; z-index:130; background:rgba(4,5,8,.98); display:none; flex-direction:column; padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
.sbm-deck .qsoverlay.open{ display:flex; }
.sbm-deck .qsbar{ display:flex; gap:8px; align-items:center; flex:none; }
.sbm-deck .qsbar input{ flex:1 1 auto; min-width:0; font-size:18px; background:#171a21; color:#fff; border:1px solid #3a4152; border-radius:12px; padding:13px 14px; min-height:54px; }
.sbm-deck .qsbar input:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.sbm-deck .qsclose{ flex:none; background:#171a21; color:#fff; border:1px solid #3a4152; border-radius:12px; font-weight:800; padding:12px 14px; min-height:54px; }
.sbm-deck .qsmeta{ flex:none; font-size:13px; color:var(--muted); line-height:1.5; padding:10px 2px 6px; }
.sbm-deck .qslist{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.sbm-deck .qsrow{ display:flex; align-items:center; gap:10px; text-align:left; background:#171a21; border:1px solid #262b36; border-radius:12px; padding:12px; color:#fff; min-height:56px; width:100%; }
.sbm-deck .qsrow:hover{ border-color:var(--accent); }
.sbm-deck .qsrow .qsnm{ flex:1 1 auto; min-width:0; font-weight:800; font-size:15px; overflow-wrap:break-word; }
.sbm-deck .qsrow .qsplay{ flex:none; color:var(--accent); font-weight:900; font-size:13px; }
.sbm-deck .qsempty{ font-size:14px; color:var(--muted); text-align:center; padding:22px 8px; line-height:1.6; }
/* ================= ĐỢT VÁ LỖI XÁC NHẬN (FIX 2 + FIX 6) ================= */
/* FIX 2 — Badge phím tắt / LOOP không đè chữ: chừa khoảng trên cho badge khi
     ô có badge, badge nhỏ lại; nhãn TUYỆT ĐỐI không vỡ giữa từ (overflow-wrap:
     normal) — chữ tự thu nhỏ theo độ dài; chỉ từ đơn dài >12 ký tự (không thể
     vừa một dòng ở bất kỳ cỡ nào) mới được bẻ bất đắc dĩ qua class .anyw. */
.sbm-deck .cell .nm{ word-break:normal; overflow-wrap:normal; }
.sbm-deck .cell .nm.anyw{ overflow-wrap:anywhere; }
.sbm-deck .cell.hashk, .sbm-deck .cell.hasloop{ padding-top:26px; }
.sbm-deck .cell .hk{ max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){
  .sbm-deck .cell.hashk, .sbm-deck .cell.hasloop{ padding-top:19px; }
  .sbm-deck .cell .hk{ font-size:9px; padding:0 3px; }
  .sbm-deck .cell .loopbadge{ font-size:8px; padding:0 3px; }
  /* Ô hẹp 5 cột: thu chữ thêm để nhãn dài nằm trọn 2–3 dòng nguyên từ trong ô */
  .sbm-deck .cell .nm{ font-size:10.5px; line-height:1.18; }
  .sbm-deck .cell .nm.long{ font-size:9.5px; }
  .sbm-deck .cell .nm.xlong{ font-size:8.5px; }
}
/* Thanh điều khiển dính ở đáy (mobilebar) không được che mất control khi
     trình duyệt cuộn control đó vào tầm nhìn */
@media (max-width:768px){
  .sbm-deck button, .sbm-deck input, .sbm-deck select, .sbm-deck textarea, .sbm-deck [tabindex]{ scroll-margin-bottom:calc(92px + env(safe-area-inset-bottom)); }
  /* Mobilebar chỉ trượt vào SAU khi người dùng cuộn xuống (>120px): ở đầu
       trang nó nằm hẳn ngoài khung hình nên không phủ lên bất kỳ control nào
       ở cuối màn hình đầu (vd ô tìm kiếm thư viện). */
  .sbm-deck .mobilebar{ transform:translateY(calc(100% + 6px)); transition:transform .25s ease; }
  .sbm-deck .mobilebar.mb-on{ transform:none; }
}
/* FIX 6 (desktop) — Thanh trạng thái sticky ở đáy không được che control:
     đợt vá trước chỉ chừa khoảng chống che cho mobile ≤768px (nơi statusbar
     đã chuyển static), còn desktop statusbar vẫn sticky bottom:0 nên control
     nào cuộn tới vệt đáy viewport (vd nút Preview của hàng thư viện) bị nó
     phủ lên, không bấm được. Bổ sung khoảng chừa tương đương cho desktop:
     scroll-margin cho mọi control + scroll-padding cho trang và cho các
     vùng cuộn độc lập (rail ≥1200px, danh sách thư viện / Quick Search). */
@media (min-width:769px){
  html:has(.sbm-deck){ scroll-padding-bottom:96px; }
  .sbm-deck button, .sbm-deck input, .sbm-deck select, .sbm-deck textarea, .sbm-deck [tabindex]{ scroll-margin-bottom:96px; }
  .sbm-deck .rail{ scroll-padding-bottom:96px; }
  .sbm-deck .liblist, .sbm-deck .qslist{ scroll-padding-bottom:24px; }
}
/* FIX 6 — Sheet / Quick Search đã đóng: ngoài tầm tab + cây accessibility */
.sbm-deck .sheet{ visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; }
.sbm-deck .sheet.open{ visibility:visible; transition:transform .22s ease, visibility 0s; }
.sbm-deck .qsoverlay{ visibility:hidden; }
.sbm-deck .qsoverlay.open{ visibility:visible; }
/* FIX 6 — span.tag ở status bar không bao giờ che input của các thanh đáy */
.sbm-deck .statusbar .tag{ pointer-events:none; }
.sbm-deck .mobilebar{ z-index:60; }
.sbm-deck .mobilebar input[type="range"], .sbm-deck .dmvol input[type="range"]{ position:relative; z-index:2; }
/* Random editor: chip sound đã chọn */
.sbm-deck .randchip{ display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--accent); border-radius:999px; padding:3px 6px 3px 11px; font-size:12.5px; font-weight:700; margin:0 6px 6px 0; max-width:100%; }
.sbm-deck .randchip button{ flex:none; width:26px; height:26px; min-height:26px; border-radius:50%; border:1px solid var(--line); background:var(--panel-2); color:#ff8585; font-weight:800; padding:0; display:grid; place-items:center; }
/* ================= PiP MODE (Document Picture-in-Picture + fallback panel) ================= */
.sbm-deck .fsbtn.on{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ink); }
.sbm-deck .piproot{ display:none; flex-direction:column; background:var(--bg); color:var(--text); min-height:0; container-type:inline-size; container-name:pipdeck; }
.sbm-deck .piproot.open{ display:flex; }
/* Inside the real PiP window: fill the whole floating window */
.sbm-deck .piproot.inwin{ height:100dvh; width:100%; }
/* Fallback: floating panel inside the page — drag the bottom-right corner to resize it */
.sbm-deck .piproot.float{ position:fixed; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:120; width:min(430px, calc(100vw - 24px)); height:min(580px, 74dvh); min-width:260px; min-height:320px; max-width:calc(100vw - 16px); max-height:94dvh; resize:both; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.5); overflow:hidden; }
.sbm-deck .piproot.float::after{ content:""; position:absolute; right:3px; bottom:3px; width:15px; height:15px; pointer-events:none; background:linear-gradient(135deg, transparent 50%, var(--faint) 50%, var(--faint) 58%, transparent 58%, transparent 68%, var(--faint) 68%, var(--faint) 76%, transparent 76%); opacity:.8; }
@media (max-width:560px){
  .sbm-deck .piproot.float{ right:8px; width:calc(100vw - 16px); }
}
.sbm-deck .piphead{ display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; }
.sbm-deck .piproot.inwin .piphead{ background:var(--panel-2); }
.sbm-deck .piphead .piptitle{ font-weight:800; font-size:13.5px; flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; }
.sbm-deck .piphead .piplogo{ width:22px; height:22px; flex:none; display:block; object-fit:contain; background:transparent; }
.sbm-deck .piphead .piptitletxt{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sbm-deck .piproot.float .piphead{ cursor:grab; touch-action:none; }
.sbm-deck .piproot.float .piphead:active{ cursor:grabbing; }
.sbm-deck .pipclose{ flex:none; width:34px; height:34px; min-height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font-weight:800; display:grid; place-items:center; padding:0; }
.sbm-deck .pipclose:hover{ border-color:var(--danger); color:#ff8585; }
.sbm-deck .pipnav{ display:flex; align-items:center; gap:10px; padding:8px 10px 4px; flex:none; }
.sbm-deck .pipnav .dmnavbtn{ width:46px; height:44px; min-height:44px; }
.sbm-deck .pipdeck{ flex:1 1 auto; min-height:0; display:grid; gap:8px; padding:6px 10px 10px; grid-auto-rows:minmax(0,1fr); }
.sbm-deck .pipdeck .cell{ aspect-ratio:auto; height:100%; min-height:0; }
.sbm-deck .piproot .dmnow{ margin:0 10px 8px; flex:none; }
.sbm-deck .piproot{ position:relative; }
.sbm-deck .piproot .dmstrip{ flex:none; flex-wrap:wrap; border-top:1px solid var(--line); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
.sbm-deck .piproot .dmpanic{ min-height:48px; padding:10px 13px; }
.sbm-deck .piproot .dmbtn{ min-height:48px; }
.sbm-deck .piproot .dmbtn:disabled{ opacity:.45; cursor:not-allowed; }
.sbm-deck .piproot .dmbtn.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
/* PiP Recent row: collapsed by default, costs no space until toggled */
.sbm-deck .piproot .piprecent{ flex:none; border-top:1px solid var(--line); padding:2px 10px 0; }
.sbm-deck .piproot .piprecent .dmchips{ padding-bottom:5px; }
/* PiP Quick Search: overlay covering the PiP root itself (never the main page) */
.sbm-deck .pipqs{ position:absolute; inset:0; z-index:6; background:var(--bg); display:none; flex-direction:column; padding:10px; }
.sbm-deck .pipqs.open{ display:flex; }
body.deckonly .sbm-deck .piproot.float{ display:none !important; }
/* ---- Responsive PiP: keys + controls adapt to the PiP window's own width.
     Container queries on .piproot (container-type: inline-size) so the SAME
     rules drive the real Document PiP window (resized by dragging its edges)
     and the in-page fallback panel (resized by its corner). The chosen deck
     layout (3×2 / 5×3 / 8×4) never changes — only size and density do — and
     the grid is minmax(0,1fr) with min-height:0 rows, so no horizontal
     scrollbar and no overlap appears at any window size. ---- */
@container pipdeck (max-width:400px){
  .sbm-deck .piphead{ padding:5px 8px; }
  .sbm-deck .piphead .piptitle{ font-size:12.5px; }
  .sbm-deck .piphead .piplogo{ width:20px; height:20px; }
  .sbm-deck .pipclose{ width:32px; height:32px; min-height:32px; }
  .sbm-deck .pipnav{ gap:6px; padding:6px 6px 2px; }
  .sbm-deck .pipnav .dmnavbtn{ width:40px; height:40px; min-height:40px; font-size:16px; }
  .sbm-deck .pipnav .dmpagename{ font-size:14px; }
  .sbm-deck .pipnav .dmdot{ width:7px; height:7px; }
  .sbm-deck .pipdeck{ gap:5px; padding:4px 6px 6px; }
  .sbm-deck .pipdeck .cell{ padding:6px 3px 5px; border-radius:10px; }
  .sbm-deck .pipdeck .cell .nm{ font-size:10.5px; line-height:1.18; }
  .sbm-deck .pipdeck .cell .nm.long{ font-size:9.5px; }
  .sbm-deck .pipdeck .cell .nm.xlong{ font-size:8.5px; }
  .sbm-deck .pipdeck .cell.hashk, .sbm-deck .pipdeck .cell.hasloop{ padding-top:19px; }
  .sbm-deck .piproot .dmnow{ margin:0 6px 6px; padding:7px 9px; gap:7px; }
  .sbm-deck .piproot .dmnowname{ font-size:13.5px; }
  .sbm-deck .piproot .dmnowtime{ display:none; }
  .sbm-deck .piproot .dmnowstop{ padding:6px 9px; min-height:40px; }
  .sbm-deck .piproot .dmstrip{ gap:5px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .sbm-deck .piproot .dmpanic{ min-height:44px; padding:8px 9px; font-size:12.5px; }
  .sbm-deck .piproot .dmbtn{ min-height:44px; padding:8px; font-size:12px; }
  .sbm-deck .piproot .dmvol{ gap:5px; }
  .sbm-deck .piproot .dmvol .lbl{ display:none; }
  .sbm-deck .piproot .dmvol input[type="range"]{ min-width:38px; }
  .sbm-deck .piproot .piprecent{ padding:2px 6px 0; }
  .sbm-deck .piproot .dmchip{ min-height:36px; padding:6px 10px; font-size:12px; max-width:62vw; }
  .sbm-deck .pipqs{ padding:7px; }
  .sbm-deck .pipqs .qsbar input{ font-size:15px; padding:10px 11px; min-height:46px; }
  .sbm-deck .pipqs .qsclose{ padding:9px 10px; min-height:46px; }
  .sbm-deck .pipqs .qsmeta{ padding:7px 2px 4px; font-size:12px; }
  .sbm-deck .pipqs .qsrow{ padding:9px; min-height:48px; gap:7px; }
  .sbm-deck .pipqs .qsrow .qsnm{ font-size:13.5px; }
}
@container pipdeck (max-width:300px){
  .sbm-deck .pipdeck{ gap:4px; padding:3px 5px 5px; }
  .sbm-deck .pipdeck .cell{ padding:5px 2px 4px; border-radius:9px; }
  .sbm-deck .pipdeck .cell .nm{ font-size:9.5px; }
  .sbm-deck .pipdeck .cell .nm.long{ font-size:8.5px; }
  .sbm-deck .pipdeck .cell .nm.xlong{ font-size:8px; }
  .sbm-deck .piproot .dmpanic{ font-size:11.5px; padding:8px 7px; }
  .sbm-deck .piproot .dmbtn{ font-size:11px; padding:7px 6px; }
  .sbm-deck .piproot .dmvol #pipVolVal{ display:none; }
  .sbm-deck .pipnav .dmdots{ display:none; }
  .sbm-deck .pipqs .qsrow .catchip, .sbm-deck .pipqs .qsrow .playsbadge{ display:none; }
  .sbm-deck .pipqs .qsclose{ font-size:12px; padding:8px; }
}
@container pipdeck (min-width:580px){
  .sbm-deck .pipnav{ padding:10px 14px 4px; }
  .sbm-deck .pipdeck{ gap:11px; padding:8px 14px 14px; }
  .sbm-deck .pipdeck .cell{ border-radius:18px; }
  .sbm-deck .pipdeck .cell .nm{ font-size:15px; }
  .sbm-deck .pipdeck .cell .nm.long{ font-size:13px; }
  .sbm-deck .pipdeck .cell .nm.xlong{ font-size:11.5px; }
  .sbm-deck .piproot .dmnow{ margin:0 14px 10px; }
  .sbm-deck .piproot .dmstrip{ gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
}
@container pipdeck (min-width:840px){
  /* Very wide: cap the grid so keys stop growing and stay centered */
  .sbm-deck .pipdeck{ width:min(100%, 880px); margin-inline:auto; }
  .sbm-deck .pipnav{ width:min(100%, 880px); margin-inline:auto; }
  .sbm-deck .piproot .dmnow{ width:min(calc(100% - 28px), 852px); margin-inline:auto; }
  .sbm-deck .piproot .dmstrip{ justify-content:center; }
  .sbm-deck .piproot .dmvol{ max-width:440px; }
  .sbm-deck .pipdeck .cell .nm{ font-size:16px; }
  .sbm-deck .pipdeck .cell .nm.long{ font-size:14px; }
  .sbm-deck .pipdeck .cell .nm.xlong{ font-size:12.5px; }
}
/* Short PiP windows (viewport height of the PiP window itself): compact
     chrome so the key grid keeps the room. Grid rows already flex via
     minmax(0,1fr), so keys shrink instead of overlapping. */
@media (max-height:430px){
  .sbm-deck .piproot.inwin .piphead{ padding-top:4px; padding-bottom:4px; }
  .sbm-deck .piproot.inwin .pipnav{ padding-top:4px; padding-bottom:0; }
  .sbm-deck .piproot.inwin .pipnav .dmnavbtn{ width:42px; height:38px; min-height:38px; }
  .sbm-deck .piproot.inwin .pipnav .dmdots{ display:none; }
  .sbm-deck .piproot.inwin .dmstrip{ padding-top:5px; padding-bottom:calc(5px + env(safe-area-inset-bottom)); }
  .sbm-deck .piproot.inwin .dmpanic{ min-height:42px; padding:8px 11px; }
  .sbm-deck .piproot.inwin .dmbtn{ min-height:42px; }
}

/* ================= 3. SITE INTEGRATION ================= */
/* The theme wraps every page in .container > .row > main.col-lg-9 + sidebar (header.php / footer.php).
   This page is a full-width tool, so the shell is flattened here instead of touching those two files. */
.site-content-wrapper.container{ max-width:none; padding:0; margin-top:0 !important; margin-bottom:0 !important; }
.site-content-wrapper > .row{ --bs-gutter-x:0; margin:0; }
#mainContentArea{ flex:0 0 100%; width:100%; max-width:100%; padding:0; }
#sidebarArea{ display:none; }
#backToTopBtn{ display:none !important; } /* would sit on top of the sticky status bar / mobile bar */
/* The app toolbar is the sticky bar on this page; two stacked sticky bars would eat the deck */
header.navbar.sticky-top{ position:static; }
/* WordPress admin bar (logged-in only): the theme prints no body classes, so key off the bar itself */
html:has(#wpadminbar) .sbm-deck .toolbar{ top:32px; }
@media (min-width:1200px){
  html:has(#wpadminbar) .sbm-deck .rail{ top:102px; max-height:calc(100dvh - 180px); }
}
@media (max-width:782px){ html:has(#wpadminbar) .sbm-deck .toolbar{ top:46px; } }
@media (max-width:600px){ html:has(#wpadminbar) .sbm-deck .toolbar{ top:0; } }
/* Fixed mobile control bar stays visible past the app: keep the footer bottom readable */
@media (max-width:768px){
  footer{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* Fullscreen Deck Mode: the app root covers the page (and is the element sent to the Fullscreen API,
   so the site header, footer and anything else on the page stay out of the picture) */
body.deckonly{ overflow:hidden; }
body.deckonly .sbm-deck{ position:fixed; inset:0; z-index:100000; overflow:hidden; background:#000; color:#f2f4f8; }
.sbm-deck:fullscreen{ width:100%; height:100%; }
/* The prototype left .layout on align-items:start, so in Deck Mode (flex column) the grid shrank to
   its content width (832px on a 1440px screen) instead of filling the screen. */
body.deckonly .sbm-deck .layout{ align-items:stretch; }

/* ---------- Intro / how-to section under the app ---------- */
.sbm-deck-about{ --dk-ink:var(--bs-emphasis-color); --dk-amber:#ffb020; padding:clamp(2.5rem, 2rem + 3vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sbm-deck-about .dk-kicker{ display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-secondary-color); }
.sbm-deck-about .dk-kicker::before{ content:""; width:1.75rem; height:3px; border-radius:2px; background:var(--dk-amber); }
.sbm-deck-about .dk-lead-title{ font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--dk-ink); margin:.6rem 0 1rem; max-width:18ch; }
.sbm-deck-about .dk-lead{ font-size:clamp(1rem, .95rem + .3vw, 1.2rem); color:var(--bs-secondary-color); max-width:62ch; margin:0; }
.sbm-deck-about .dk-steps{ list-style:none; counter-reset:dkstep; padding:0; margin:clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1rem; }
.sbm-deck-about .dk-steps li{ counter-increment:dkstep; position:relative; padding:1.25rem 1.25rem 1.35rem; border-radius:18px; background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color-translucent); box-shadow:inset 0 -4px 0 rgba(0,0,0,.06); }
.sbm-deck-about .dk-steps li::before{ content:counter(dkstep); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:11px; background:var(--dk-amber); color:#1a1200; font-weight:900; font-size:1.05rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.18); margin-bottom:.9rem; }
.sbm-deck-about .dk-steps h3{ font-size:1.05rem; font-weight:800; margin:0 0 .35rem; color:var(--dk-ink); }
.sbm-deck-about .dk-steps p{ margin:0; font-size:.94rem; color:var(--bs-secondary-color); }
.sbm-deck-about .dk-split{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(1.5rem, 1rem + 3vw, 4rem); margin-top:clamp(2.5rem, 2rem + 3vw, 5rem); align-items:start; }
@media (max-width:991.98px){ .sbm-deck-about .dk-split{ grid-template-columns:minmax(0, 1fr); } }
.sbm-deck-about .dk-h2{ font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight:800; letter-spacing:-.01em; color:var(--dk-ink); margin:0 0 1rem; }
.sbm-deck-about .dk-features{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem; }
.sbm-deck-about .dk-features li{ display:grid; grid-template-columns:2.25rem minmax(0, 1fr); gap:.75rem; padding:.8rem 0; border-top:1px solid var(--bs-border-color-translucent); font-size:.95rem; color:var(--bs-secondary-color); }
.sbm-deck-about .dk-features li:first-child{ border-top:0; padding-top:0; }
.sbm-deck-about .dk-features .dk-ico{ font-size:1.35rem; line-height:1.2; }
.sbm-deck-about .dk-features b{ display:block; color:var(--dk-ink); font-weight:700; }
.sbm-deck-about .dk-faq details{ border-top:1px solid var(--bs-border-color-translucent); }
.sbm-deck-about .dk-faq details:last-child{ border-bottom:1px solid var(--bs-border-color-translucent); }
.sbm-deck-about .dk-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; font-weight:700; color:var(--dk-ink); }
.sbm-deck-about .dk-faq summary::-webkit-details-marker{ display:none; }
.sbm-deck-about .dk-faq summary::after{ content:"+"; flex:none; display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:8px; background:var(--bs-tertiary-bg); font-weight:800; transition:transform .2s ease, background-color .2s ease; }
.sbm-deck-about .dk-faq details[open] summary::after{ transform:rotate(45deg); background:var(--dk-amber); color:#1a1200; }
.sbm-deck-about .dk-faq summary:hover{ color:var(--bs-primary); }
.sbm-deck-about .dk-faq summary:focus-visible{ outline:2px solid var(--dk-amber); outline-offset:3px; border-radius:6px; }
.sbm-deck-about .dk-faq p{ margin:0 0 1.1rem; color:var(--bs-secondary-color); max-width:68ch; }
.sbm-deck-about .dk-top{ display:inline-flex; align-items:center; gap:.5rem; margin-top:2.25rem; padding:.7rem 1.15rem; border-radius:12px; background:var(--dk-amber); color:#1a1200; font-weight:800; text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.18); transition:transform .12s ease, filter .12s ease; }
.sbm-deck-about .dk-top:hover{ filter:brightness(1.06); transform:translateY(-1px); color:#1a1200; }
.sbm-deck-about .dk-top:active{ transform:translateY(1px); }
.sbm-deck-about .dk-top:focus-visible{ outline:3px solid var(--bs-emphasis-color); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .sbm-deck-about .dk-faq summary::after, .sbm-deck-about .dk-top{ transition:none; }
}