/* Vordenk extras — layout only. No theme/colour changes: everything borrows the site's own variables. */

/* ---------- Settings: full screen ---------- */
.settings-panel{
  position:fixed !important; inset:0 !important; z-index:55 !important;
  width:100vw; height:100vh; height:100dvh; max-width:none; border-radius:0;
  padding-inline:max(20px, calc((100vw - 760px) / 2)) !important;
  overflow-y:auto; overscroll-behavior:contain;
}
.settings-panel > .overlay-head{
  position:sticky; top:calc(-16px - env(safe-area-inset-top)); z-index:3;
  margin:calc(-16px - env(safe-area-inset-top)) -20px 0; padding:calc(14px + env(safe-area-inset-top)) 20px 12px;
  background:var(--navy-800); border-bottom:1px solid var(--navy-700);
}
@media (min-width:900px){
  .settings-panel > .overlay-head{ margin-inline:calc(-1 * max(20px, (100vw - 760px) / 2)); padding-inline:max(20px, calc((100vw - 760px) / 2)); }
}

/* ---------- DELETE confirmation ---------- */
.vk-del-back{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(2,12,15,.72); }
.vk-del-box{ width:min(420px,100%); padding:18px; border-radius:var(--radius-md,14px); background:var(--navy-800); border:1px solid var(--navy-700); color:var(--foam); display:flex; flex-direction:column; gap:10px; }
.vk-del-box h3{ margin:0; font-size:16px; }
.vk-del-box p{ margin:0; font-size:13px; line-height:1.5; opacity:.85; }
.vk-del-box input{ font:inherit; font-size:15px; letter-spacing:.08em; padding:10px 12px; border-radius:10px; color:inherit; background:var(--navy-900,transparent); border:1px solid var(--navy-700); outline:none; }
.vk-del-box input:focus{ border-color:var(--danger,#d9704a); }
.vk-del-actions{ display:flex; gap:8px; justify-content:flex-end; }
.vk-del-actions button:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- Install status ---------- */
.vk-installed{ display:flex; align-items:center; gap:8px; font-size:13px; padding:8px 10px; border-radius:10px; border:1px solid var(--navy-700); color:var(--foam); }
.vk-installed[hidden]{ display:none; }
.vk-installed svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Compact + menu ---------- */
.composer-menu .composer-menu-note, .composer-menu .composer-menu-divider{ display:none !important; }
.composer-menu .composer-menu-row{ padding-top:4px; border-top:0; }
.composer-menu #song-row > span{ display:none; }
.vk-tools{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding-top:6px; border-top:1px solid var(--navy-700); }
.vk-tools .vk-chip{ justify-content:center; padding:6px 4px; font-size:11.5px; min-width:0; white-space:nowrap; }
.vk-tools .vk-chip[aria-expanded="true"]{ border-color:currentColor; }
.vk-pane{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.vk-pane[hidden]{ display:none; }
.vk-pane label.vk-sw{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 0; }
.vk-pane input[type=text], .vk-pane textarea{ font:inherit; font-size:13px; padding:7px 9px; border-radius:10px; color:inherit; background:var(--navy-900,transparent); border:1px solid var(--navy-700); outline:none; resize:none; width:100%; box-sizing:border-box; }
.vk-pane .row{ display:flex; gap:6px; }
.vk-pane small{ opacity:.65; }
.vk-pane a{ color:inherit; text-decoration:underline; cursor:pointer; }

/* ---------- Sandbox ---------- */
.vk-sbx-back{ position:fixed; inset:0; z-index:110; display:flex; flex-direction:column; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); background:var(--navy-800); color:var(--foam); }
.vk-sbx-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vk-sbx-body{ flex:1; min-height:0; display:grid; gap:8px; grid-template-rows:1fr 1fr; }
@media (min-width:900px){ .vk-sbx-body{ grid-template-rows:none; grid-template-columns:1fr 1fr; } }
.vk-sbx-body textarea{ font:12.5px ui-monospace,Menlo,Consolas,monospace; padding:10px; border-radius:10px; color:inherit; background:var(--navy-900,transparent); border:1px solid var(--navy-700); resize:none; outline:none; min-height:0; }
.vk-sbx-body iframe{ width:100%; height:100%; min-height:0; border:1px solid var(--navy-700); border-radius:10px; background:#fff; }