/* ---------- the Sonik skin for the whole Generator ----------
   The page takes the deep blue of the Sonik Labs mark and every panel becomes a window like the three that open it:
   a blue screen, a thin line of light along its top, corner marks, small capitals for readouts. */
html[data-skin="sonik"] { --bg: #061631; --bg-glow: #0E3466; --surface: #0A2550; --surface-2: #0C2E5E; --line: #1D4A82; --muted: #93B3DA; --ink: #E8F1FF; --accent: #8FD0FF; --accent-ink: #04112A; }
html[data-skin="sonik"] :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) { --scope-bg: #05142E; --scope-grid: #12386E; --scope-label: #7FA6D6; }
html[data-skin="sonik"] .app :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .panel { position: relative; background: linear-gradient(180deg, #0B2A57, #081F45); border: 1px solid #1D4A82; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(143, 208, 255, 0.22), 0 24px 60px -40px #4DA8FF; }
html[data-skin="sonik"] .app :is(#scr-gen, #scr-sf, #scr-in, #scr-bw) .panel::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--k, #8FD0FF) 30%, var(--k, #8FD0FF) 70%, transparent); opacity: 0.7; }
html[data-skin="sonik"] .app .scope { position: relative; background: #05142E; border-color: rgba(77, 168, 255, 0.3); }
html[data-skin="sonik"] .app .scope::after { content: ""; position: absolute; inset: 6px; pointer-events: none; opacity: 0.5;
  background: linear-gradient(#8FD0FF, #8FD0FF) top left / 10px 1px no-repeat, linear-gradient(#8FD0FF, #8FD0FF) top left / 1px 10px no-repeat,
              linear-gradient(#8FD0FF, #8FD0FF) top right / 10px 1px no-repeat, linear-gradient(#8FD0FF, #8FD0FF) top right / 1px 10px no-repeat,
              linear-gradient(#8FD0FF, #8FD0FF) bottom left / 10px 1px no-repeat, linear-gradient(#8FD0FF, #8FD0FF) bottom left / 1px 10px no-repeat,
              linear-gradient(#8FD0FF, #8FD0FF) bottom right / 10px 1px no-repeat, linear-gradient(#8FD0FF, #8FD0FF) bottom right / 1px 10px no-repeat; }
html[data-skin="sonik"] .app .ktab { background: #0A2550; border-color: #1D4A82; }
html[data-skin="sonik"] .app .ktab[aria-selected="true"] { background: #0C3266; box-shadow: 0 0 0 1px var(--k), 0 0 22px -10px var(--k); }
html[data-skin="sonik"] .topbar { background: rgba(6, 22, 49, 0.82); border-bottom-color: rgba(77, 168, 255, 0.22); }
html[data-skin="sonik"] .gm-bar { background: #071C40; border-color: #1D4A82; }