/* ==========================================================================
   VLC media player — web recreation of the classic Qt interface
   ========================================================================== */
:root {
  --win-bg: #f0f0f0;
  --win-bg-grad: linear-gradient(#f7f7f7, #ececec);
  --menubar-bg: linear-gradient(#fafafa, #efefef);
  --border: #b0b0b0;
  --border-light: #d0d0d0;
  --text: #1a1a1a;
  --text-dim: #666666;
  --accent: #ff7f00;
  --highlight: #3d7ec7;
  --menu-hover: #dbe9f7;
  --slider-fill: #4a90d9;
  --font: "Segoe UI", "Helvetica Neue", -apple-system, "Lucida Grande", Ubuntu, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: #2b2b2b;
  display: flex; align-items: center; justify-content: center;
}

#app {
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--win-bg);
  overflow: hidden;
  position: relative;
}

.hidden { display: none !important; }

/* ---------- title bar ---------- */
#titlebar {
  height: 28px; flex: none;
  background: linear-gradient(#4a4a4a, #383838);
  color: #e8e8e8;
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px;
  font-size: 12.5px;
  -webkit-app-region: drag;
}
#titlebar-cone { width: 16px; height: 16px; }
#title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#titlebar-buttons { margin-left: auto; display: flex; gap: 8px; }
.tb-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.tb-min { background: #f5bd4f; }
.tb-max { background: #61c454; }
.tb-close { background: #ec6a5e; }
.tb-btn:hover { filter: brightness(1.15); }

/* ---------- menu bar ---------- */
#menubar {
  height: 26px; flex: none;
  background: var(--menubar-bg);
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: stretch;
  padding: 0 4px;
  position: relative;
  z-index: 300;
}
.menu-top {
  padding: 0 10px;
  display: flex; align-items: center;
  font-size: 13px;
  cursor: default;
  border: 1px solid transparent;
}
.menu-top:hover, .menu-top.open {
  background: var(--menu-hover);
  border-color: #aecbe8;
  border-radius: 3px;
}

/* dropdown menus */
.vlc-menu {
  position: absolute;
  min-width: 210px;
  background: #fdfdfd;
  border: 1px solid #9a9a9a;
  border-radius: 3px;
  box-shadow: 3px 4px 14px rgba(0,0,0,0.35);
  padding: 3px 0;
  z-index: 1000;
  font-size: 13px;
}
.vlc-menu .mi {
  display: flex; align-items: center;
  padding: 4px 10px 4px 26px;
  position: relative;
  white-space: nowrap;
  cursor: default;
}
.vlc-menu .mi:hover:not(.disabled):not(.separator) { background: var(--highlight); color: #fff; }
.vlc-menu .mi.disabled { color: #a8a8a8; }
.vlc-menu .mi .check {
  position: absolute; left: 7px; width: 14px; text-align: center;
  font-size: 12px;
}
.vlc-menu .mi .sc { margin-left: auto; padding-left: 26px; color: #888; font-size: 12px; }
.vlc-menu .mi:hover:not(.disabled) .sc { color: #dcecfa; }
.vlc-menu .mi .sub-arrow { margin-left: auto; padding-left: 26px; font-size: 10px; }
.vlc-menu .mi .sub-arrow + .sc { display: none; }
.vlc-menu .mi.separator { height: 1px; padding: 0; margin: 4px 8px; background: #d4d4d4; }
.vlc-menu .mi .sub-arrow::after { content: "▶"; }

/* ---------- main area ---------- */
#main { flex: 1; position: relative; min-height: 0; display: flex; }

/* video view */
#video-view { flex: 1; display: flex; min-width: 0; }
#video-stage {
  flex: 1; position: relative;
  background: #000;
  overflow: hidden;
}
#video-box {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#video-box video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
#idle-cone {
  position: absolute; left: 50%; top: 50%;
  width: 128px; height: 128px;
  transform: translate(-50%, -50%);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity .25s;
}
#cover-art {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 60%; max-height: 60%;
  border-radius: 4px;
  box-shadow: 0 6px 40px rgba(0,0,0,.8);
  pointer-events: none;
}
#viz-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#osd {
  position: absolute; top: 14px; right: 18px;
  color: #fff; font-size: 26px; font-weight: 300;
  text-shadow: 0 1px 4px #000;
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
  letter-spacing: .5px;
}
#osd.show { opacity: 1; transition: opacity .05s; }
#drop-hint {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.28);
  font-size: 12px;
  pointer-events: none;
  letter-spacing: .4px;
}
::cue {
  font-family: var(--font);
  background: rgba(0,0,0,.55);
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

/* ---------- playlist view ---------- */
#playlist-view { flex: 1; display: flex; min-width: 0; background: #fff; }
#sidebar {
  width: 228px; flex: none;
  background: #f7f7f7;
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
  padding: 6px 0;
}
.tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 12px;
  font-size: 13px;
  cursor: default;
  white-space: nowrap;
}
.tree-item > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tree-item:hover { background: #eaf3fc; }
.tree-item.selected { background: var(--highlight); color: #fff; }
.tree-item .twisty { width: 12px; font-size: 9px; color: #777; flex: none; text-align: center; }
.tree-item.selected .twisty { color: #fff; }
.tree-item .t-icon { width: 16px; height: 16px; flex: none; display: inline-flex; }
.tree-item .t-icon svg { width: 16px; height: 16px; }
.tree-children { overflow: hidden; }
.tree-children .tree-item { padding-left: 34px; }
.tree-children.depth2 .tree-item { padding-left: 52px; }

#playlist-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#playlist-toolbar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--win-bg-grad);
}
#playlist-search {
  width: 220px; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; outline: none;
  user-select: text;
}
#playlist-search:focus { border-color: var(--highlight); }
#playlist-count { margin-left: auto; color: var(--text-dim); font-size: 12px; }
#playlist-table-wrap { flex: 1; overflow: auto; position: relative; }
#playlist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#playlist-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left;
  background: linear-gradient(#fbfbfb, #e8e8e8);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border-light);
  padding: 4px 10px;
  font-weight: 600; font-size: 12px;
  cursor: default;
}
#playlist-table thead th:hover { background: linear-gradient(#f0f6fc, #ddeaf7); }
#playlist-table thead th .sort-arrow { font-size: 9px; color: var(--highlight); }
#playlist-table td {
  padding: 4px 10px;
  border-bottom: 1px solid #eee;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 380px;
}
#playlist-table tbody tr { cursor: default; }
#playlist-table tbody tr:hover { background: #f0f7fe; }
#playlist-table tbody tr.playing { color: #0d5c0d; font-weight: 600; }
#playlist-table tbody tr.playing td:first-child::before { content: "► "; color: var(--accent); }
#playlist-table tbody tr.selected { background: var(--highlight); color: #fff; }
#playlist-table tbody tr.selected.playing { color: #fff; }
#playlist-table tbody tr.stale { color: #999; font-style: italic; }
#playlist-empty {
  position: absolute; inset: 40px 0 0 0;
  text-align: center; color: #999; font-size: 13px; line-height: 1.7;
  pointer-events: none;
}
#playlist-footer {
  flex: none; display: flex; gap: 6px;
  padding: 5px 10px;
  border-top: 1px solid var(--border-light);
  background: var(--win-bg-grad);
}
.pl-btn {
  border: 1px solid var(--border); border-radius: 3px;
  background: linear-gradient(#fdfdfd, #e9e9e9);
  padding: 3px 10px; font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.pl-btn:hover { background: linear-gradient(#fff, #dff0ff); }
.pl-btn.active { background: linear-gradient(#cfe5fa, #b7d9f5); border-color: #7ca9d4; box-shadow: inset 0 1px 2px rgba(0,60,120,.25); }
.pl-btn .pl-ic { font-size: 13px; }

/* ---------- advanced controls strip ---------- */
#advanced-strip {
  flex: none; display: flex; gap: 4px;
  padding: 4px 8px;
  background: var(--win-bg-grad);
  border-top: 1px solid var(--border-light);
}
.adv-btn {
  width: 38px; height: 30px;
  border: 1px solid var(--border); border-radius: 4px;
  background: linear-gradient(#fdfdfd, #e6e6e6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.adv-btn:hover { background: linear-gradient(#fff, #d9ecfc); }
.adv-btn.active { background: linear-gradient(#f8d3c0, #f2b795); border-color: #c96a2b; box-shadow: inset 0 1px 3px rgba(140,50,0,.35); }
.adv-icon.rec { width: 12px; height: 12px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 2px #eee inset; }
.adv-btn.active .adv-icon.rec { animation: recblink 1.1s infinite; }
@keyframes recblink { 50% { opacity: .35; } }
.adv-icon.snap { width: 14px; height: 11px; border: 2px solid #555; border-radius: 2px; position: relative; }
.adv-icon.snap::before { content: ""; position: absolute; left: 50%; top: -5px; width: 6px; height: 3px; background: #555; transform: translateX(-50%); border-radius: 1px 1px 0 0; }
.adv-icon.ab { font-size: 10px; font-weight: 700; color: #555; letter-spacing: -0.5px; }
.adv-btn.aba .adv-icon.ab { color: #c0392b; }
.adv-btn.abb .adv-icon.ab { color: #1e7d34; }
.adv-icon.frame { width: 13px; height: 13px; position: relative; }
.adv-icon.frame::before { content: ""; position: absolute; inset: 0; border: 2px solid #555; border-radius: 1px; }
.adv-icon.frame::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: #555; transform: translateY(-50%); }

/* ---------- control deck ---------- */
#control-deck {
  flex: none;
  background: var(--win-bg-grad);
  border-top: 1px solid var(--border);
  padding: 6px 12px 8px;
}
#seek-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.time-label {
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: #333; min-width: 46px; text-align: center;
  font-weight: 600;
}

/* VLC custom sliders */
.vlc-slider {
  position: relative; height: 18px;
  flex: 1;
  cursor: pointer;
}
.vlc-slider .slider-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 6px; transform: translateY(-50%);
  background: linear-gradient(#c4c4c4, #d9d9d9);
  border: 1px solid #a3a3a3;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.vlc-slider .slider-loaded {
  position: absolute; left: 1px; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: rgba(255,255,255,.55);
  border-radius: 2px;
  width: 0%;
}
.vlc-slider .slider-fill {
  position: absolute; left: 1px; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: linear-gradient(#6aa9e8, #3f7fc4);
  border-radius: 2px;
  width: 0%;
}
.vlc-slider .slider-knob {
  position: absolute; top: 50%; left: 0%;
  width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8 75%);
  border: 1px solid #8a8a8a;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  pointer-events: none;
}
.vlc-slider:hover .slider-knob { width: 15px; height: 15px; }

#volume-slider { width: 96px; flex: none; margin-left: 4px; }

#seek-tooltip {
  position: absolute; bottom: 24px;
  transform: translateX(-50%);
  background: rgba(20,20,20,.92);
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  text-align: center;
  pointer-events: none;
  z-index: 50;
  font-variant-numeric: tabular-nums;
}
#seek-tooltip canvas { display: block; border-radius: 2px; margin-bottom: 3px; }

/* buttons row */
#buttons-row { display: flex; align-items: center; }
.btn-group { display: flex; align-items: center; gap: 5px; }
.deck-spacer { flex: 1; }
.deck-btn {
  width: 36px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: linear-gradient(#fdfdfd, #e6e6e6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #333;
}
.deck-btn:hover { background: linear-gradient(#ffffff, #d9ecfc); border-color: #8fb9dd; }
.deck-btn:active { background: linear-gradient(#d9d9d9, #c7c7c7); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.deck-btn.toggled { background: linear-gradient(#cfe5fa, #b7d9f5); border-color: #7ca9d4; box-shadow: inset 0 1px 2px rgba(0,60,120,.25); }
.play-btn {
  width: 52px; height: 44px;
  border-radius: 50%;
  margin: -6px 4px -6px 0;
  background: radial-gradient(circle at 38% 32%, #ffffff, #e3e3e3 70%, #c9c9c9);
  border: 1px solid #9a9a9a;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.play-btn:hover { background: radial-gradient(circle at 38% 32%, #ffffff, #d9ecfc 70%, #b9d9f2); }
.play-btn:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.25); }

/* deck icons (pure CSS) */
.icon { display: inline-block; position: relative; }
.play-btn .icon { width: 0; height: 0; border-left: 15px solid #444; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.play-btn.playing .icon { width: 13px; height: 15px; border: none; margin-left: 0; background: linear-gradient(90deg, #444 0 5px, transparent 5px 8px, #444 8px 13px); }
.icon-stop { width: 13px; height: 13px; background: #444; border-radius: 2px; }
.icon-prev { width: 0; height: 0; border-right: 11px solid #444; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.icon-prev::after { content: ""; position: absolute; right: 9px; top: -7px; width: 3px; height: 14px; background: #444; border-radius: 1px; }
.icon-next { width: 0; height: 0; border-left: 11px solid #444; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.icon-next::after { content: ""; position: absolute; left: 9px; top: -7px; width: 3px; height: 14px; background: #444; border-radius: 1px; }
.icon-fullscreen { width: 15px; height: 15px; border: 2px solid #444; border-radius: 2px; }
.icon-fullscreen::after { content: ""; position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-right: 2px solid #444; border-top: 2px solid #444; }
.icon-playlist { width: 15px; height: 12px; background: repeating-linear-gradient(#444 0 2px, transparent 2px 4px); }
.icon-extended { width: 15px; height: 15px; background:
  linear-gradient(#444, #444) left 2px top 0 / 2px 15px no-repeat,
  linear-gradient(#444, #444) left 7px top 0 / 2px 15px no-repeat,
  linear-gradient(#444, #444) left 12px top 0 / 2px 15px no-repeat,
  radial-gradient(circle, #444 2.5px, transparent 3px) left 0px top 2px / 6px 6px no-repeat,
  radial-gradient(circle, #444 2.5px, transparent 3px) left 5px top 8px / 6px 6px no-repeat,
  radial-gradient(circle, #444 2.5px, transparent 3px) left 10px top 4px / 6px 6px no-repeat; }
.icon-vol-high, .icon-vol-low, .icon-vol-mute { width: 16px; height: 14px; }
.icon-vol-high::before, .icon-vol-low::before, .icon-vol-mute::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 5px; height: 6px; background: #444;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.icon-vol-high::after, .icon-vol-low::after {
  content: ""; position: absolute; left: 3px; top: 1px;
  width: 9px; height: 12px;
  border: 2px solid #444; border-left: none;
  border-radius: 0 12px 12px 0;
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
}
.icon-vol-low::after { width: 6px; height: 9px; top: 2.5px; }
.icon-vol-mute::after { content: "✕"; position: absolute; left: 7px; top: 0; font-size: 11px; color: #c0392b; font-weight: 700; }
.vol-icon-btn { width: 30px; border: none; background: transparent; }
.vol-icon-btn:hover { background: rgba(0,0,0,.06); }

/* ---------- status bar ---------- */
#statusbar {
  flex: none; height: 22px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 10px;
  background: var(--win-bg-grad);
  border-top: 1px solid var(--border-light);
  font-size: 12px; color: #444;
}
#status-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.status-spacer { flex: 1; }
#status-rate { color: var(--accent); font-weight: 600; }
#status-pos { font-variant-numeric: tabular-nums; }

/* ---------- dialogs ---------- */
.vlc-dialog {
  position: absolute;
  background: #f6f6f6;
  border: 1px solid #8a8a8a;
  border-radius: 6px;
  box-shadow: 0 10px 45px rgba(0,0,0,.5);
  z-index: 500;
  display: flex; flex-direction: column;
  min-width: 320px;
  font-size: 13px;
}
.vlc-dialog .dlg-title {
  flex: none;
  background: linear-gradient(#555, #404040);
  color: #fff;
  padding: 6px 12px;
  border-radius: 5px 5px 0 0;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  cursor: move;
}
.vlc-dialog .dlg-title img { width: 15px; height: 15px; }
.vlc-dialog .dlg-close {
  margin-left: auto; border: none; background: transparent;
  color: #ddd; font-size: 15px; cursor: pointer; line-height: 1;
  padding: 0 2px;
}
.vlc-dialog .dlg-close:hover { color: #ff7f00; }
.vlc-dialog .dlg-body { padding: 12px; overflow: auto; }
.vlc-dialog .dlg-buttons {
  flex: none; display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--win-bg-grad);
  border-radius: 0 0 5px 5px;
}
.vlc-btn {
  border: 1px solid var(--border); border-radius: 4px;
  background: linear-gradient(#fdfdfd, #e6e6e6);
  padding: 5px 16px; font-size: 13px; cursor: pointer;
}
.vlc-btn:hover { background: linear-gradient(#fff, #d9ecfc); border-color: #8fb9dd; }
.vlc-btn.primary { background: linear-gradient(#5a9ddc, #3d7ec7); color: #fff; border-color: #2c62a0; }
.vlc-btn.primary:hover { background: linear-gradient(#6aa9e8, #4a8ad4); }

/* tabs */
.dlg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.dlg-tab {
  padding: 5px 14px; cursor: default;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: transparent; font-size: 12.5px;
}
.dlg-tab:hover { background: #e8f1fa; }
.dlg-tab.active {
  background: #fdfdfd; border-color: var(--border);
  margin-bottom: -1px; font-weight: 600;
}

/* equalizer */
.eq-wrap { display: flex; gap: 10px; }
.eq-preamp { display: flex; flex-direction: column; align-items: center; width: 56px; }
.eq-band { display: flex; flex-direction: column; align-items: center; width: 38px; }
.eq-slider { position: relative; height: 130px; width: 24px; cursor: pointer; }
.eq-slider .eq-rail {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 5px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #c4c4c4, #dcdcdc);
  border: 1px solid #a3a3a3; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.eq-slider .eq-handle {
  position: absolute; left: 50%; width: 20px; height: 10px;
  transform: translate(-50%, 50%);
  background: linear-gradient(#fdfdfd, #cfcfcf);
  border: 1px solid #888; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.eq-label { font-size: 10.5px; color: #555; margin-top: 5px; text-align: center; }
.eq-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.eq-controls select, .dlg-body select, .dlg-body input[type=text], .dlg-body input[type=number] {
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 3px;
  font-size: 12.5px; background: #fff; user-select: text;
}
.eq-2pass { font-size: 11.5px; color: #777; }

/* generic form rows */
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.form-row label:first-child { min-width: 150px; color: #333; }
.form-row .vlc-slider { height: 14px; }
.form-row .val { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: #444; font-size: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.check-row input { accent-color: var(--highlight); }

/* preferences */
.prefs-simple-icons { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; }
.prefs-icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 78px; padding: 8px 4px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; cursor: pointer; font-size: 11.5px;
}
.prefs-icon-btn:hover { background: #e8f1fa; }
.prefs-icon-btn.active { background: #dbe9f7; border-color: #9cc3e5; }
.prefs-icon-btn .pi { font-size: 22px; }
.prefs-advanced { display: flex; gap: 0; min-height: 330px; }
.prefs-tree {
  width: 200px; flex: none; overflow: auto;
  border: 1px solid var(--border-light); border-radius: 3px;
  background: #fff; margin-right: 10px; padding: 4px 0;
}
.prefs-panel { flex: 1; border: 1px solid var(--border-light); border-radius: 3px; background: #fff; padding: 12px; overflow: auto; }
.prefs-panel h4 { font-size: 12.5px; margin-bottom: 10px; color: #222; border-bottom: 1px solid #e5e5e5; padding-bottom: 5px; }
.prefs-mode { display: flex; align-items: center; gap: 14px; margin-right: auto; font-size: 12.5px; }
.prefs-search { width: 100%; margin-bottom: 8px; }
.prefs-search input { width: 100%; }

/* about dialog */
.about-body { text-align: center; padding: 18px 26px; }
.about-body img { width: 84px; height: 84px; }
.about-body h2 { font-size: 17px; margin: 8px 0 2px; }
.about-body .ver { color: #666; margin-bottom: 10px; }
.about-body p { font-size: 12px; color: #555; line-height: 1.6; max-width: 380px; }

/* media information */
.mi-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mi-table td { padding: 4px 8px; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
.mi-table td:first-child { color: #666; width: 130px; }

/* hotkeys table */
.hk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hk-table th { text-align: left; padding: 4px 8px; background: #efefef; border-bottom: 1px solid var(--border); }
.hk-table td { padding: 4px 8px; border-bottom: 1px solid #eee; }
.hk-key {
  display: inline-block; min-width: 70px;
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 8px; font-size: 11.5px; text-align: center; cursor: pointer;
}
.hk-key:hover { border-color: var(--highlight); background: #eef6ff; }
.hk-key.capturing { background: var(--accent); color: #fff; border-color: #c96a2b; }

/* network open dialog */
.net-note { font-size: 11.5px; color: #777; margin-top: 6px; max-width: 380px; line-height: 1.5; }

/* scrollbars */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #c2c2c2; border: 2px solid #f0f0f0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* fullscreen: let the app fill the native fullscreen surface */
#app:fullscreen { width: 100%; height: 100%; }
#app:fullscreen #titlebar { display: none; }
#app:fullscreen #menubar { display: none; }
#app:fullscreen.autohide #control-deck,
#app:fullscreen.autohide #statusbar,
#app:fullscreen.autohide #advanced-strip { opacity: 0; transition: opacity .4s; pointer-events: none; }
#control-deck, #statusbar { transition: opacity .25s; }

/* recording indicator in status bar */
#statusbar .rec-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #e02b1d;
  display: inline-block; margin-right: 4px;
  animation: recblink 1.1s infinite;
}

/* minimal interface */
#app.minimal #titlebar,
#app.minimal #menubar,
#app.minimal #statusbar,
#app.minimal #advanced-strip { display: none; }