/* ================================================================ Snatch - minimalizm i szkło
   Tło to tapeta (albo gradient motywu), na niej matowe, półprzezroczyste panele z rozmyciem.
   Czytelność: panele mają własne zabarwienie w kolorze motywu, a tapeta jest automatycznie
   przyciemniana (app.js), więc tekst ma kontrast >= 7:1 niezależnie od obrazu.
   Własne motywy ustawiają te same zmienne bezpośrednio na <html> (app.js). */
:root, [data-theme="fiolet"] {
  --bg: #0c0b12; --bg-rgb: 12, 11, 18;
  --accent: #8b6cff; --accent-2: #d16bff; --accent-rgb: 139, 108, 255; --accent-text: #b2a0ff;
}
[data-theme="ocean"]  { --bg: #070d14; --bg-rgb: 7, 13, 20;   --accent: #3ba7ff; --accent-2: #2ee6d6; --accent-rgb: 59, 167, 255;  --accent-text: #6cc0ff; }
[data-theme="neon"]   { --bg: #0b0810; --bg-rgb: 11, 8, 16;   --accent: #ff2e88; --accent-2: #00e5ff; --accent-rgb: 255, 46, 136; --accent-text: #ff6aa8; }
[data-theme="ogien"]  { --bg: #110b09; --bg-rgb: 17, 11, 9;   --accent: #ff5f3d; --accent-2: #ffb13b; --accent-rgb: 255, 95, 61;  --accent-text: #ff8a6e; }
[data-theme="las"]    { --bg: #08100c; --bg-rgb: 8, 16, 12;   --accent: #2fd98a; --accent-2: #b4f04a; --accent-rgb: 47, 217, 138; --accent-text: #4fe3a0; }
[data-theme="zloto"]  { --bg: #100e08; --bg-rgb: 16, 14, 8;   --accent: #f5c542; --accent-2: #ff8a3d; --accent-rgb: 245, 197, 66; --accent-text: #f7d268; }
[data-theme="amoled"] { --bg: #000000; --bg-rgb: 0, 0, 0;     --accent: #7cf0ff; --accent-2: #b19cff; --accent-rgb: 124, 240, 255; --accent-text: #7cf0ff; }
[data-theme="lod"]    { --bg: #eef1f8; --bg-rgb: 238, 241, 248; --accent: #4f6bff; --accent-2: #00b3ff; --accent-rgb: 79, 107, 255; --accent-text: #2f4be0; }
:root {
  --text: #f5f5f9; --muted: #b9b9ca; --faint: #8f8fa3;
  --field: rgba(255, 255, 255, .07); --hover: rgba(255, 255, 255, .08);
  --surface-2: rgba(255, 255, 255, .07); --surface-3: rgba(255, 255, 255, .15);
  --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .26);
  --glass: rgba(var(--bg-rgb), .5);
  --glass-hi: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025));
  --glass-line: rgba(255, 255, 255, .15); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .2);
  --blur: 28px;
  --shadow: 0 28px 64px -28px rgba(0, 0, 0, .7);
  --on-accent: #0b0b12;
  --red: #ff5470; --green: #34dc92; --gold: #ffd166;
  --r-panel: 26px; --r-card: 18px; --r-ctl: 12px;
  --tint: .85;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.35, .45, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);
  --tile: 300px;
  --logo-1: var(--accent);
  --wall-bg: var(--bg); --wall-blur: 0px; --wall-dim: .3;
  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --ui-zoom: 1;
  --logo-edge: #ffffff;
  color-scheme: dark;
}
:root[data-light="1"] {
  --text: #0d1220; --muted: #3d455a; --faint: #5b6377;
  --field: rgba(255, 255, 255, .62); --hover: rgba(15, 25, 50, .06);
  --surface-2: rgba(15, 25, 50, .05); --surface-3: rgba(15, 25, 50, .1);
  --line: rgba(15, 25, 50, .13); --line-strong: rgba(15, 25, 50, .26);
  --glass: rgba(255, 255, 255, .56);
  --glass-hi: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2));
  --glass-line: rgba(255, 255, 255, .85); --glass-edge: inset 0 1px 0 #fff;
  --shadow: 0 28px 56px -30px rgba(30, 40, 80, .4);
  --logo-edge: #000000;
  --red: #d61f45; --green: #0b8f55; --gold: #a46f00;
  color-scheme: light;
}

/* ================================================================ podstawy */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
html[data-native="1"][data-glass="1"][data-wall="none"] { background: transparent; }
body {
  color: var(--text); background: transparent;
  font: 14.5px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
  overflow: hidden; user-select: none;
}
html[data-native="1"][data-glass="1"][data-wall="none"] body { background: rgba(var(--bg-rgb), var(--tint)); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: var(--text); }
kbd { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; font: 600 12px/20px "Cascadia Mono", Consolas, monospace; color: var(--text); }
[hidden] { display: none !important; }
.hint { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.spacer { flex: 1; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* tapeta */
#wall { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); pointer-events: none; }
html[data-wall="none"] #wall { display: none; }
.wall-img { position: absolute; inset: -48px; background: var(--wall-bg); background-size: cover; background-position: center; filter: blur(var(--wall-blur)); transition: opacity .4s; }
.wall-scrim { position: absolute; inset: 0; background: #000; opacity: var(--wall-dim); transition: opacity .3s; }
:root[data-light="1"] .wall-scrim { background: #fff; }
/* zoom na <html> skaluje też vh, więc bez dzielenia aplikacja kończyłaby się przed dołem okna (albo za nim) */
.app { position: relative; z-index: 1; height: calc(100vh / var(--ui-zoom)); display: flex; flex-direction: column; }

/* szkło */
.glass { background: var(--glass-hi), var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), var(--shadow);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5); backdrop-filter: blur(var(--blur)) saturate(1.5); }
[data-glass="0"] .glass { background: rgba(var(--bg-rgb), .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-light="1"][data-glass="0"] .glass { background: rgba(255, 255, 255, .92); }

/* ================================================================ górny pasek */
.corner { position: absolute; z-index: 6; left: 24px; top: 0; height: 66px; display: flex; align-items: center; gap: 14px; }
.topbar { display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 16px; padding: 14px 32px 6px; }
.topbar .dock { grid-column: 2; }
.brand { display: flex; align-items: center; gap: 12px; font: 600 19px/1 var(--display); letter-spacing: -.03em; }
.brand svg { width: 34px; height: 34px; flex: none; border-radius: 9px; transition: transform .4s var(--spring); }
.brand:hover svg { transform: rotate(-6deg); }
.dock { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; justify-self: center; }
.dock button { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 17px; border-radius: 999px; color: var(--muted); font-weight: 500; white-space: nowrap; transition: color .2s; }
.dock button:hover { color: var(--text); }
.dock button.active { color: var(--text); font-weight: 600; }
.dock button .ic { width: 16px; height: 16px; }
.dock button em { font-style: normal; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dock button em:empty { display: none; }
.dock-ind { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: var(--surface-3); box-shadow: var(--glass-edge), 0 0 0 1px var(--line);
  transition: transform .5s var(--spring), width .36s var(--glide), height .36s var(--glide), opacity .2s; }
.bar-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 14px; font-weight: 500; white-space: nowrap; color: var(--text);
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .25s, transform .32s var(--spring); }
.btn .ic { width: 16px; height: 16px; }
.btn.icon-btn { padding: 9px; }
.btn.icon-btn .ic { width: 18px; height: 18px; transition: transform .4s var(--spring); }
.btn.icon-btn:hover .ic { transform: rotate(60deg); }
.btn:hover { border-color: var(--line-strong); background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: 0 8px 24px -10px rgba(var(--accent-rgb), .8); }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.danger:hover { background: rgba(255, 84, 112, .12); border-color: var(--red); color: var(--red); }
.btn.rec { background: var(--red); border-color: var(--red); color: #fff; }
.btn.rec .ic { animation: blink 1s infinite; }
.btn.sm { padding: 5px 11px; font-size: 13px; border-radius: 10px; }
.btn.sm .ic { width: 14px; height: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.pill { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: border-color .2s, color .2s; }
.pill:hover { border-color: var(--line-strong); color: var(--text); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.pill.on i { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 220, 146, .2); }
.pill.rec { border-color: rgba(255, 84, 112, .55); color: var(--text); }
.pill.rec i { background: var(--red); animation: blink 1s infinite; }
.pill.err i { background: var(--red); }
@keyframes blink { 50% { opacity: .25; } }

main { flex: 1; min-height: 0; position: relative; }
#library { position: absolute; inset: 0; overflow-y: auto; padding: 18px 40px 64px; }
.view-enter { animation: viewIn .5s var(--glide) both; }
.view-leave { animation: viewOut .22s ease both; pointer-events: none; }
@keyframes viewIn { from { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 12px), 0); } }
@keyframes viewOut { to { opacity: 0; } }

/* pola */
select, .settings input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]) { background: var(--field); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 11px; outline: none; transition: border-color .15s, box-shadow .15s; }
select:hover, .settings input:not([type=checkbox]):not([type=range]):not([type=color]):hover { border-color: var(--line-strong); }
select:focus, .settings input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
select option, select optgroup { background: var(--bg); color: var(--text); }
:root[data-light="1"] select option { background: #fff; }

/* ================================================================ biblioteka */
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 22px; flex-wrap: wrap; }
h1 { font: 300 42px/1.05 var(--display); margin: 0; letter-spacing: -.045em; display: flex; align-items: center; gap: 14px; }
h1 .gi { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; margin: 0; }
.lib-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; min-width: 0; }
.lib-tools { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 16px; }
.search { position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.search input { width: 240px; min-width: 0; background: var(--field); border: 1px solid transparent; border-radius: 11px; padding: 7px 12px 7px 34px; outline: none; transition: border-color .15s, box-shadow .15s; }
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
.lib-tools select { border-color: transparent; padding: 7px 10px; }
.seg { display: flex; background: var(--field); border-radius: 11px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 9px; width: 32px; height: 28px; display: grid; place-items: center; color: var(--faint); transition: background-color .15s, color .15s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface-3); color: var(--text); }
.seg .ic { width: 16px; height: 16px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 20px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { display: flex; align-items: center; gap: 8px; flex: none; padding: 5px 13px 5px 6px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass-hi), var(--glass); color: var(--muted); font-weight: 500; white-space: nowrap;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: color .15s, border-color .15s, background-color .15s; }
.chips button:hover { color: var(--text); border-color: var(--line-strong); }
.chips button.on { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.chips button em { font-style: normal; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.gi { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; overflow: hidden; position: relative; }
.gi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); padding: 1px; }
:root[data-icons="mono"] .gi { background: var(--surface-3) !important; color: var(--text); }
:root[data-icons="mono"] .gi img, :root[data-icons="mono"] .audio-ic img { filter: grayscale(1) contrast(1.15); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 24px 20px; }
.card { cursor: pointer; position: relative; }
.card.anim { animation: cardIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
.thumb { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--glass-line);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .7); transition: border-color .2s, box-shadow .3s, transform .35s var(--ease); }
.card:hover .thumb { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .8); }
.card.fresh .thumb { box-shadow: 0 0 0 2px var(--accent), 0 18px 36px -22px rgba(var(--accent-rgb), .6); }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.thumb > img { opacity: 0; }
.thumb > img.loaded { opacity: 1; }
.card:hover .thumb > img { transform: scale(1.04); }
.thumb video { animation: fadeIn .3s both; }
@keyframes fadeIn { from { opacity: 0; } }
.thumb .play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; display: grid; place-items: center; z-index: 2; color: #fff;
  background: rgba(20, 20, 28, .45); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s var(--ease); }
.thumb .play .ic { width: 20px; height: 20px; margin-left: 2px; }
.card:hover .play { opacity: 1; transform: none; }
.thumb .dur, .thumb .kind, .thumb .star { background: rgba(14, 14, 20, .62); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.thumb .dur { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 1px 8px; border-radius: 8px; font: 600 12px/20px var(--font-text); font-variant-numeric: tabular-nums; }
.thumb .kind { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 1px 9px 1px 7px; border-radius: 8px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.thumb .kind .ic { width: 11px; height: 11px; color: #ff6a82; }
.thumb .star { position: absolute; right: 10px; top: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 0; opacity: 0; transition: opacity .15s, color .15s; }
.thumb .star .ic { width: 16px; height: 16px; }
.thumb .star.on { color: var(--gold); opacity: 1; }
.card:hover .star { opacity: 1; }
.star.pop { animation: pop .35s var(--spring); }
@keyframes pop { 50% { transform: scale(1.3); } }
.card .meta { padding: 11px 4px 0; display: flex; gap: 10px; align-items: flex-start; }
.card .meta .gi { width: 22px; height: 22px; margin: 1px 0 0; }
.card .meta div { min-width: 0; }
.card .meta b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.card .meta span { color: var(--muted); font-size: 12.5px; }
.date-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; font-weight: 500; margin: 12px 0 -10px; }
.date-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.empty { text-align: center; color: var(--muted); padding: 90px 20px; max-width: 520px; margin: 40px auto; border-radius: var(--r-panel); }
.empty .big { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; color: var(--accent-text); background: var(--surface-2); border: 1px solid var(--line); }
.empty .big .ic { width: 32px; height: 32px; }
.empty h2 { color: var(--text); margin: 0 0 8px; font: 400 22px/1.2 var(--display); letter-spacing: -.03em; }
.storage { margin-top: 36px; max-width: 320px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.storage .bar { height: 3px; border-radius: 3px; background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.storage .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .8s var(--ease); }

/* ================================================================ ustawienia */
.settings-win { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: calc(28px / var(--ui-zoom)); background: rgba(4, 4, 10, 0); transition: background-color .28s ease; }
.settings-win.show { background: rgba(4, 4, 10, .55); }
:root[data-light="1"] .settings-win.show { background: rgba(255, 255, 255, .4); }
.settings-box { width: min(1180px, 100%); height: min(860px, calc(100vh / var(--ui-zoom) - 56px)); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; opacity: 0; transform: translateY(18px) scale(.97); transition: transform .42s var(--spring), opacity .2s ease; }
.settings-win.show .settings-box { opacity: 1; transform: none; }
.settings-box > header { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 28px; border-bottom: 1px solid var(--line); }
.settings-box > header h1 { margin: 0; font: 400 26px/1.2 var(--display); letter-spacing: -.03em; }
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 40px; }
.settings-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 32px; align-items: start; }
.s-index { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
.s-index button { position: relative; text-align: left; border: 0; background: none; padding: 7px 14px; border-radius: 10px; color: var(--muted); font-weight: 500; transition: color .15s, background-color .15s; }
.s-index button:hover { color: var(--text); background: var(--hover); }
.s-index button.on { color: var(--text); font-weight: 600; }
.settings { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
fieldset { border-radius: var(--r-panel); padding: 24px 30px 10px; margin: 0; min-width: 0; scroll-margin-top: 4px; }
legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font: 300 26px/1.15 var(--display); letter-spacing: -.04em; }
legend + * { clear: both; }
.settings label, .row-block { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); font-weight: 500; }
.row-block { flex-direction: column; align-items: stretch; gap: 13px; }
.settings label > span:first-child { flex: 1; }
.settings label .hint { display: block; font-weight: 400; margin-top: 1px; max-width: 520px; }
.settings label .warn-text, .setup .warn-text { color: #ffb020; }
:root[data-light="1"] .settings label .warn-text, :root[data-light="1"] .setup .warn-text { color: #9a6200; }
.settings fieldset > :last-child { padding-bottom: 20px; }
.settings input[type=checkbox] { appearance: none; width: 42px; height: 25px; border-radius: 999px; background: var(--surface-3); position: relative; cursor: pointer; flex: none; transition: background-color .2s; border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.settings input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .25s var(--ease); }
.settings input[type=checkbox]:checked { background: var(--accent); box-shadow: none; }
.settings input[type=checkbox]:checked::after { transform: translateX(17px); }
.settings input.wide { width: 420px; }
.settings input.hotkey { width: 150px; text-align: center; cursor: pointer; font: 600 13px "Cascadia Mono", Consolas, monospace; }
.settings input.hotkey.listening { border-color: var(--accent); color: var(--accent-text); }
.settings select { min-width: 170px; max-width: 360px; }
.unit-input { position: relative; display: inline-flex; align-items: center; }
.unit-input input { width: 110px; padding-right: 46px !important; font-variant-numeric: tabular-nums; }
.unit-input em { position: absolute; right: 11px; font-style: normal; color: var(--faint); font-size: 12px; pointer-events: none; }
.len-wrap { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.note { margin: 6px 0 12px; padding: 11px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 220px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--surface-3) var(--p, 50%)); outline: none; flex: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .45); cursor: pointer; }
.saved-badge { color: var(--green); font-weight: 500; font-size: 13px; opacity: 0; transition: opacity .25s; display: flex; align-items: center; gap: 4px; }
.saved-badge .ic { width: 14px; height: 14px; }
.saved-badge.show { opacity: 1; }
.form-actions { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.form-actions .hint { margin-right: auto; }
.row-title { font-weight: 500; }
.row-plain { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); font-weight: 500; }
.row-plain > span:first-child { flex: 1; }
.row-plain .hint { display: block; font-weight: 400; margin-top: 1px; max-width: 520px; }
.rpc-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); }
.rpc-card svg { width: 52px; height: 52px; flex: none; }
.rpc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rpc-text b { font-weight: 600; }
.rpc-text span { color: var(--muted); font-size: 13.5px; }
.rpc-state { color: var(--muted); font-size: 13px; }
.settings input[readonly]:not(.hotkey) { opacity: .6; cursor: not-allowed; }
.row-title .hint { display: block; margin-top: 2px; }

.segctl { position: relative; display: inline-flex; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 2px; flex: none; }
.segctl button { position: relative; z-index: 1; border: 0; background: none; padding: 6px 13px; border-radius: 10px; font-weight: 500; font-size: 13px; color: var(--muted); white-space: nowrap; transition: color .2s; font-variant-numeric: tabular-nums; }
.segctl button:hover { color: var(--text); }
.segctl button.on { color: var(--text); font-weight: 600; }
.segctl .knob { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; border-radius: 10px; background: var(--surface-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--line); transition: transform .35s var(--ease), width .3s var(--ease), opacity .2s; }
:root[data-light="1"] .segctl .knob { background: #fff; }

/* panel jakości */
.q-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.q-cards button { position: relative; display: flex; flex-direction: column; gap: 1px; text-align: left; min-height: 100px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--field); color: var(--muted); font-size: 13px; line-height: 1.35; transition: border-color .15s, background-color .15s, transform .15s; }
.q-cards button:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.q-cards button b { color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 3px; letter-spacing: -.01em; }
.q-cards button.chosen { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.q-cards button.chosen::after { content: ""; position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
#q-custom { display: grid; gap: 14px; }
.q-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.dd-field { display: grid; gap: 5px; }
.dd-field > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.dd { position: relative; min-width: 112px; }
.dd.wide { min-width: 220px; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 13px; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--text); font-weight: 600; white-space: nowrap; transition: border-color .15s; }
.dd-btn:hover { border-color: var(--line-strong); }
.dd-btn span { overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.dd-btn::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.dd.open .dd-btn::after { transform: translateY(2px) rotate(225deg); }
.dd-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 420px; overflow-y: auto; padding: 5px; background: rgba(var(--bg-rgb), .94); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
:root[data-light="1"] .dd-menu { background: rgba(255, 255, 255, .96); }
.dd-menu button { width: 100%; display: flex; justify-content: space-between; gap: 18px; padding: 8px 11px; border: 0; border-radius: 9px; background: none; color: var(--text); font-weight: 500; text-align: left; white-space: nowrap; }
.dd-menu button:hover { background: var(--hover); }
.dd-menu button.warn { color: #ffb020; }
.dd-menu button.danger { color: #ff7a7a; }
:root[data-light="1"] .dd-menu button.warn { color: #9a6200; }
:root[data-light="1"] .dd-menu button.danger { color: #c0192f; }
.dd-menu button.on::after { content: "✓"; color: var(--accent-text); }
fieldset:has(.dd.open) { position: relative; z-index: 20; }

/* kalkulator rozmiaru klipu */
.estimate { border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); padding: 20px 22px; gap: 16px; }
.est-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.est-num { font: 250 46px/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.est-label { color: var(--muted); font-size: 14px; }
.est-label b { color: var(--text); font-weight: 600; }
.est-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.est-grid div { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; border-left: 2px solid var(--line); }
.est-grid b { font-weight: 600; font-size: 16px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.est-grid span { color: var(--muted); font-size: 12.5px; }
.sharp { display: grid; gap: 7px; }
.sharp-bar { position: relative; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #ff6b6b 0%, #ffb020 38%, #7bd88f 68%, #34dc92 100%); opacity: .9; }
.sharp-bar i { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); transition: left .5s var(--ease); }
.sharp-text { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.sharp-text b { color: var(--text); font-weight: 600; }
.est-tip { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.est-tip span { flex: 1 1 320px; }

/* kolor logo */
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-preview { width: 48px; height: 48px; flex: none; border-radius: 12px; }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.chosen { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.swatch.auto { background: conic-gradient(from 180deg, var(--accent), var(--accent-2), var(--accent)); }
.swatch.auto::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.custom-logo { padding: 3px 11px 3px 4px !important; border: 1px solid var(--line) !important; border-radius: 999px; font-size: 13px; gap: 8px !important; }
.custom-logo input { width: 22px; height: 22px; }

/* motywy */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
.theme { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--field); text-align: left; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.theme:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.theme.chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme .pv { height: 58px; position: relative; overflow: hidden; }
.theme .pv i { position: absolute; width: 64px; height: 64px; border-radius: 50%; filter: blur(22px); opacity: .7; }
.theme .pv b { position: absolute; left: 10px; bottom: 10px; width: 46px; height: 14px; border-radius: 5px; }
.theme .pv u { position: absolute; left: 10px; top: 10px; width: 60px; height: 6px; border-radius: 3px; }
.theme > span { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 11px; font-weight: 500; font-size: 13px; color: var(--text); border-top: 1px solid var(--line); }
.theme > span em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme.chosen > span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.theme .edit { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 8px; border: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .15s; }
.theme .edit .ic { width: 13px; height: 13px; }
.theme:hover .edit { opacity: 1; }
.theme.add { border-style: dashed; display: grid; place-items: center; min-height: 94px; color: var(--muted); gap: 4px; text-align: center; font-size: 13px; background: transparent; }
.theme.add .ic { width: 20px; height: 20px; margin: 0 auto; }
.theme.add:hover { color: var(--text); }
.theme-editor { border-radius: 16px; padding: 15px; display: grid; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.te-row { display: flex; align-items: center; gap: 12px; }
.te-row input { flex: 1; }
.te-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.color { display: flex !important; align-items: center; gap: 10px; padding: 6px 10px !important; border: 1px solid var(--line) !important; border-radius: 12px; cursor: pointer; font-size: 13px; }
.color input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border: 0; border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.color input::-webkit-color-swatch-wrapper { padding: 0; }
.color input::-webkit-color-swatch { border: 1px solid var(--line-strong); border-radius: 8px; }
.te-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.te-actions .hint { margin-right: auto; }

/* tapety */
.walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.wall { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; padding: 0; background: var(--bg); transition: border-color .15s, box-shadow .15s, transform .15s; }
.wall:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.wall.chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.wall .wv { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wall.none .wv { background: repeating-conic-gradient(rgba(128, 128, 140, .35) 0 25%, rgba(128, 128, 140, .12) 0 50%) 0 0 / 14px 14px; }
.wall .wn { position: absolute; left: 7px; right: 7px; bottom: 7px; padding: 2px 9px; border-radius: 9px; font-size: 12px; font-weight: 600; text-align: left; color: #fff; background: rgba(14, 14, 20, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wall .del, .own-item .del { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 8px; border: 0; display: grid; place-items: center; color: #fff; background: rgba(14, 14, 20, .65); opacity: 0; transition: opacity .15s, background-color .15s; }
.wall .del .ic { width: 12px; height: 12px; }
.wall:hover .del { opacity: 1; }
.wall .del:hover { background: var(--red); }
.tools-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* dźwięki */
.audio-rows { display: grid; gap: 1px; margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.audio-row { display: grid; grid-template-columns: 20px 22px minmax(90px, 1fr) minmax(130px, 220px) 44px; gap: 12px; align-items: center; min-height: 50px; padding: 8px 14px; background: var(--field); }
.audio-ic { position: relative; display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.audio-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.audio-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-name small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.audio-row input[type=range] { width: 100%; }
.audio-pct { text-align: right; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.audio-row.off .audio-ic, .audio-row.off .audio-name, .audio-row.off input[type=range], .audio-row.off .audio-pct { opacity: .42; }
.audio-row.off input[type=range] { pointer-events: none; }
.settings .audio-row input[type=checkbox], .settings .ac-event input[type=checkbox] { width: 20px; height: 20px; border-radius: 6px; }
.settings .audio-row input[type=checkbox]:disabled { opacity: .4; cursor: default; }
.settings .audio-row input[type=checkbox]::after, .settings .audio-row input[type=checkbox]:active::after, .settings .ac-event input[type=checkbox]::after, .settings .ac-event input[type=checkbox]:active::after { top: 3px; left: 7px; width: 6px; height: 10px; border-radius: 0; background: none; box-shadow: none; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .18s var(--ease); }
.settings .audio-row input[type=checkbox]:checked::after, .settings .audio-row input[type=checkbox]:checked:active::after, .settings .ac-event input[type=checkbox]:checked::after, .settings .ac-event input[type=checkbox]:checked:active::after { transform: rotate(45deg) scale(1); }
.audio-note { margin: 4px 0 10px; }

/* auto-klipy: osobna karta dla każdej gry */
.ac-game { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.ac-game[hidden] { display: none; }
.ac-cover { display: block; width: 84px; height: 126px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); transition: filter .2s, opacity .2s; }
.ac-steam { display: grid; place-items: center; background: linear-gradient(165deg, #1b2838, #2a475e 60%, #171a21); color: #fff; font-weight: 700; font-size: 15px; }
.ac-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; transition: opacity .2s; }
.ac-body > strong { font-weight: 600; }
.ac-game:has(> input[type=checkbox]:not(:checked)) .ac-body { opacity: .5; }
.ac-game:has(> input[type=checkbox]:not(:checked)) .ac-cover { filter: grayscale(.8); opacity: .6; }
.ac-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; margin-top: 8px; }
.settings .ac-event { padding: 4px 0; border: 0; gap: 10px; font-weight: 400; cursor: pointer; }
.settings .ac-parent { font-weight: 500; }
.settings .ac-event input[type=checkbox]:indeterminate { background: var(--accent); box-shadow: none; }
.settings .ac-event input[type=checkbox]:indeterminate::after, .settings .ac-event input[type=checkbox]:indeterminate:active::after { top: 9px; left: 5px; width: 10px; height: 2px; background: #fff; border: 0; transform: none; }
.ac-group { margin-top: 8px; }
.ac-group > .hint { display: block; margin: 0 0 2px 30px; }
.ac-group > .ac-events { margin-top: 2px; padding-left: 30px; }
.ac-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 2px; }
.ac-group > .ac-line { padding-left: 30px; }
.ac-rarity-note { margin-top: 2px; max-width: 560px; }
.ac-game:has(input[name=auto_clip_steam_all]:checked) .ac-rarity-note { display: none; }
.ac-skip { display: grid; gap: 8px; margin-top: 10px; }
.ac-search { width: 100%; }
.settings .ac-search input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]) { width: 100%; padding-left: 34px; }
.ac-find { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.ac-results { display: grid; max-height: 184px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.ac-results[hidden] { display: none; }
.ac-results button { border: 0; background: none; padding: 7px 12px; text-align: left; color: var(--text); }
.ac-results button:hover, .ac-results button:focus-visible { background: var(--hover); }
.ac-results p { margin: 0; padding: 8px 12px; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chips:empty { display: none; }
.ac-chips button { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; background: var(--field); padding: 4px 11px; color: var(--text); font-size: 13px; }
.ac-chips button:hover { border-color: var(--line-strong); }
.ac-chips button span { color: var(--muted); }
.audio-menu { position: relative; }
.audio-pop { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: 260px; padding: 6px; background: rgba(var(--bg-rgb), .96); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); }
.audio-pop .hint { display: block; margin: 6px 8px 4px; font-size: 12px; }
.track-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font-weight: 500; text-align: left; transition: background-color .15s; }
.track-item:hover { background: var(--surface-2); }
.track-item .track-ic { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; }
.track-item .ic { width: 16px; height: 16px; }
.track-item.muted span:last-child { color: var(--muted); text-decoration: line-through; }
.track-item.muted .track-ic { color: var(--muted); }
.sound-rows { display: grid; gap: 4px; }
.sound-row { display: grid; grid-template-columns: 1fr minmax(200px, 270px) 38px; gap: 12px; align-items: center; padding: 5px 0; }
.sound-row > span { font-weight: 500; }
.sound-row select { width: 100%; max-width: none; }
.round { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); display: grid; place-items: center; color: var(--text); transition: background-color .15s, border-color .15s, transform .1s; }
.round:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .16); }
.round:active { transform: scale(.92); }
.round .ic { width: 15px; height: 15px; margin-left: 2px; }
.own-sounds { display: flex; flex-wrap: wrap; gap: 8px; }
.own-item { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); font-size: 13px; font-weight: 500; }
.own-item .round { width: 28px; height: 28px; }
.own-item .round .ic { width: 12px; height: 12px; }
.own-item small { color: var(--muted); font-size: 12px; }
.own-item .del { position: static; width: 22px; height: 22px; opacity: .7; color: var(--muted); background: none; }
.own-item .del .ic { width: 11px; height: 11px; }
.own-item .del:hover { opacity: 1; color: var(--red); background: rgba(255, 84, 112, .12); }
.own-empty { color: var(--muted); font-size: 13px; }

/* pozycja powiadomienia */
.corners { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; width: 172px; height: 112px; padding: 5px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface-2); }
.corners button { border: 0; border-radius: 8px; background: transparent; display: flex; padding: 4px; }
.corners button[data-pos^="top"] { align-items: flex-start; }
.corners button[data-pos^="center"] { align-items: center; }
.corners button[data-pos^="bottom"] { align-items: flex-end; }
.corners button[data-pos$="left"] { justify-content: flex-start; }
.corners button[data-pos$="center"] { justify-content: center; }
.corners button[data-pos$="right"] { justify-content: flex-end; }
.corners button::before { content: ""; width: 26px; height: 9px; border-radius: 4px; background: var(--surface-3); transition: background-color .15s; }
.corners button:hover::before { background: var(--line-strong); }
.corners button.chosen::before { background: var(--accent); }

/* podgląd nakładki w nagraniu (4 rogi) */
.ov-desc { margin: 12px 0 12px; }
.ov-frame { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .8fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 8px; padding: 8px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); min-height: 400px; margin-bottom: 14px; }
.ov-slot { border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 8px; background: rgba(var(--bg-rgb), .6); min-height: 140px; transition: border-color .2s; }
.ov-slot.active { border-color: rgba(var(--accent-rgb), .65); }
.ov-slot[data-corner="top-left"] { grid-area: 1 / 1; }
.ov-slot[data-corner="top-right"] { grid-area: 1 / 3; }
.ov-slot[data-corner="bottom-left"] { grid-area: 3 / 1; }
.ov-slot[data-corner="bottom-right"] { grid-area: 3 / 3; }
.ov-preview { flex: 1; display: grid; place-items: center; min-height: 88px; }
.ov-controls { display: flex; gap: 6px; }
.ov-controls select { min-width: 0 !important; flex: 1; padding: 6px 8px; font-size: 12.5px; }
.ov-controls select.size { flex: 0 0 90px; }
.ov-center { grid-area: 2 / 1 / 3 / 4; display: grid; place-items: center; align-content: center; text-align: center; gap: 2px; }
.ov-center b { font-size: 14px; font-weight: 600; }
.ov-center span { color: var(--muted); font-size: 12.5px; }
.kbm { display: flex; align-items: center; gap: 8px; transform-origin: center; }
.kb { display: grid; gap: 2px; }
.kb .row { display: flex; gap: 2px; }
.kb .k { height: 16px; min-width: 16px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(16, 16, 24, .85); color: #eee; font-size: 8px; font-weight: 600; display: grid; place-items: center; transition: background-color .06s, color .06s; }
.kb .k.on, .ms .on { background: var(--accent) !important; border-color: var(--accent); color: #111; }
.ms { width: 40px; height: 66px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(16, 16, 24, .85); position: relative; overflow: hidden; }
.ms .l, .ms .r { position: absolute; top: 0; height: 42%; width: 50%; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.ms .l { left: 0; border-right: 1px solid rgba(255, 255, 255, .3); }
.ms .r { right: 0; }
.ms .w { position: absolute; left: 50%; top: 9px; width: 6px; height: 12px; margin-left: -3px; border-radius: 3px; background: #282834; border: 1px solid rgba(255, 255, 255, .3); z-index: 1; }
.ov-empty-ic { color: var(--faint); }
.ov-empty-ic .ic { width: 24px; height: 24px; }

/* ================================================================ odtwarzacz */
.viewer { position: fixed; inset: 0; background: rgba(4, 4, 10, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; z-index: 10; opacity: 0; transition: opacity .2s var(--ease); }
.viewer.show { opacity: 1; }
.viewer-box { width: min(1200px, 94vw); border-radius: 26px; overflow: hidden; transform: translateY(16px) scale(.97); transition: transform .45s var(--spring); }
.viewer.show .viewer-box { transform: none; }
.viewer-box header { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.name-input { background: none; border: 1px solid transparent; border-radius: 10px; padding: 5px 9px; font-weight: 600; font-size: 15px; width: 440px; outline: none; letter-spacing: -.01em; }
.name-input:hover { border-color: var(--line); }
.name-input:focus { border-color: var(--accent); background: var(--field); }
.icon { background: none; border: 0; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); display: grid; place-items: center; transition: background-color .15s, color .15s; }
.icon .ic { width: 18px; height: 18px; }
.icon:hover { background: var(--hover); color: var(--text); }
#v-fav.on { color: var(--gold); }
video { display: block; width: 100%; max-height: calc(64vh / var(--ui-zoom)); background: #000; }
.trim { padding: 16px 18px 2px; }
.track { position: relative; height: 36px; background: var(--surface-2); border-radius: 10px; cursor: pointer; border: 1px solid var(--line); }
.sel { position: absolute; top: -1px; bottom: -1px; background: rgba(var(--accent-rgb), .2); border: 2px solid var(--accent); border-left: 0; border-right: 0; }
.head { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; pointer-events: none; }
.handle { position: absolute; top: -1px; bottom: -1px; width: 10px; margin-left: -5px; background: var(--accent); border-radius: 5px; cursor: ew-resize; }
.handle::after { content: ""; position: absolute; left: 4px; top: 11px; bottom: 11px; width: 2px; background: rgba(0, 0, 0, .35); border-radius: 1px; }
.trim-row { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; }
.trim-row .hint { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 6px; padding: 14px 18px 18px; flex-wrap: wrap; }

/* ================================================================ powiadomienie */
.toast { position: fixed; bottom: 26px; left: 50%; z-index: 20; padding: 10px 16px; border-radius: 14px; display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 13.5px;
  transform: translate(-50%, 16px) scale(.96); opacity: 0; pointer-events: none; transition: transform .42s var(--spring), opacity .22s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.toast.err .dot { background: var(--red); }
.busy { pointer-events: none; opacity: .7; }
.busy::before { content: ""; display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* płynna zmiana motywu (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ================================================================ pasek z boku */
.nav-ic { display: none; }
:root[data-axis="v"] .app { flex-direction: row; }
:root[data-axis="v"] .topbar { width: 240px; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 66px 0 18px 18px; }
:root[data-axis="v"] .dock { flex-direction: column; justify-self: stretch; border-radius: 22px; padding: 6px; }
:root[data-axis="v"] .dock button { justify-content: flex-start; padding: 10px 14px; border-radius: 16px; }
:root[data-axis="v"] .dock button em { margin-left: auto; }
:root[data-axis="v"] .dock-ind { border-radius: 16px; }
:root[data-axis="v"] .nav-ic { display: block; }
:root[data-axis="v"] .bar-actions { margin-top: auto; flex-direction: column; align-items: stretch; justify-self: stretch; }
:root[data-axis="v"] .bar-actions .btn, :root[data-axis="v"] .bar-actions .pill { justify-content: center; }
:root[data-axis="v"] #library { padding: 26px 32px 64px; }
/* pozostałe krawędzie */
:root[data-nav="right"] .app { flex-direction: row-reverse; }
:root[data-nav="right"] .topbar { padding: 18px 18px 18px 0; }
:root[data-nav="right"] main, :root[data-nav="bottom"] main { margin-top: 62px; }
:root[data-nav="bottom"] .app { flex-direction: column-reverse; }
:root[data-nav="bottom"] .topbar { padding: 6px 32px 16px; }
/* przenoszenie paska: przeglądarka sama przekształca pasek, przyciski i treść między starym a nowym układem */
.dock-ghost { position: fixed; left: 0; top: 0; z-index: 40; margin: 0; pointer-events: none; opacity: .94; transition: scale .2s var(--spring); scale: 1.03; box-shadow: var(--glass-edge), 0 30px 60px -18px rgba(0, 0, 0, .8); }
.dock-ghost .dock-ind { display: none; }
.dock-ghost button.active { background: var(--surface-3); }
.dock-ghost.v { flex-direction: column; border-radius: 22px; }
.dock-ghost.v button { justify-content: flex-start; }
.dock.lifted { opacity: 0; }
.nav-zone { position: fixed; z-index: 39; background: var(--accent); box-shadow: 0 0 34px 6px rgba(var(--accent-rgb), .7); pointer-events: none; transition: all .22s var(--glide); }
.nav-zone.top { left: 0; right: 0; top: 0; height: 5px; }
.nav-zone.bottom { left: 0; right: 0; bottom: 0; height: 5px; }
.nav-zone.left { top: 0; bottom: 0; left: 0; width: 5px; }
.nav-zone.right { top: 0; bottom: 0; right: 0; width: 5px; }
.nav-glow { position: fixed; inset: 0; z-index: 37; pointer-events: none; transition: opacity .26s ease; }
.nav-glow.leaving { opacity: 0; }
.nav-glow i { position: absolute; opacity: 0; transition: opacity .3s var(--glide); }
.nav-glow i.on { opacity: 1; }
.nav-glow i[data-edge=top] { left: 0; right: 0; top: 0; height: 200px; background: linear-gradient(to bottom, rgba(var(--accent-rgb), .42), transparent); }
.nav-glow i[data-edge=bottom] { left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(to top, rgba(var(--accent-rgb), .42), transparent); }
.nav-glow i[data-edge=left] { top: 0; bottom: 0; left: 0; width: 200px; background: linear-gradient(to right, rgba(var(--accent-rgb), .42), transparent); }
.nav-glow i[data-edge=right] { top: 0; bottom: 0; right: 0; width: 200px; background: linear-gradient(to left, rgba(var(--accent-rgb), .42), transparent); }
.nav-frame { position: fixed; inset: 0; z-index: 38; border: 2px solid rgba(var(--accent-rgb), .3); pointer-events: none; }
body.nav-dragging, body.nav-dragging * { cursor: grabbing !important; user-select: none; }
.brand { cursor: grab; }
:root[data-nav="bottom"] .toast { bottom: 84px; }
/* easter egg */
.party .brand svg { animation: spin 1s linear infinite; }
.party #wall { animation: partyHue 2.4s linear infinite; }
@keyframes partyHue { to { filter: hue-rotate(360deg); } }
.confetti { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* ================================================================ ruch */
/* fala po kliknięciu: nie może wpływać na układ przycisku, inaczej rozpycha go do swojej wielkości */
.pill, .round, .chips button, .dock button { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .26; transform: scale(0); pointer-events: none; animation: ripple .62s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(2.8); opacity: 0; } }
.btn:hover, .pill:hover, .chips button:hover { transform: translateY(-1px); }
.btn:active, .pill:active, .chips button:active, .dock button:active, .q-cards button:active, .theme:active, .wall:active { transform: scale(.96); transition-duration: .08s; }
.btn.primary:hover { box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), .95); }
.pill, .chips button, .dock button, .q-cards button, .theme, .wall { transition: transform .32s var(--spring), color .18s, background-color .18s, border-color .18s, box-shadow .25s; }
.settings input[type=checkbox]:active::after { width: 24px; }
.settings input[type=checkbox]:checked:active::after { transform: translateX(12px); }
.settings input[type=checkbox]::after { transition: transform .3s var(--spring), width .18s var(--ease); }
input[type=range]::-webkit-slider-thumb { transition: transform .2s var(--spring); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); }
.segctl[data-drag] { cursor: grab; touch-action: none; }
.segctl[data-drag].dragging { cursor: grabbing; }
.segctl[data-drag].dragging .knob { box-shadow: 0 2px 10px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--line-strong); }
.s-mark { position: absolute; left: 0; top: 0; width: 3px; height: 16px; border-radius: 3px; background: var(--accent); transition: transform .45s var(--spring), height .3s var(--ease); }
.dd-menu { transform-origin: top left; animation: menuIn .24s var(--spring) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.settings-win.show fieldset { animation: panelIn .5s var(--glide) both; }
.settings-win.show fieldset:nth-of-type(2) { animation-delay: 60ms; }
.settings-win.show fieldset:nth-of-type(n+3) { animation-delay: 110ms; }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px); } }
.card.fresh .thumb { animation: freshIn .9s var(--ease) both; }
@keyframes freshIn { from { transform: scale(.94); box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .35); } }
/* elementy, które pojawiają się po wyborze opcji, wsuwają się zamiast wyskakiwać */
#q-custom, .theme-editor, .est-tip, #row-wall-blur, #row-wall-dim, #row-glass-opacity { transition: opacity .32s var(--ease), translate .4s var(--glide); }
@starting-style { #q-custom, .theme-editor, .est-tip, #row-wall-blur, #row-wall-dim, #row-glass-opacity { opacity: 0; translate: 0 -8px; } }

/* ================================================================ kreator pierwszego uruchomienia */
.setup { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 24px; background: rgba(4, 4, 10, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-light="1"] .setup { background: rgba(255, 255, 255, .35); }
.setup-box { width: min(640px, 100%); max-height: calc(100vh / var(--ui-zoom) - 48px); overflow-y: auto; border-radius: var(--r-panel); padding: 30px 36px 24px; animation: panelIn .6s var(--glide) both; }
.setup section { animation: setupIn .42s var(--glide) both; }
@keyframes setupIn { from { opacity: 0; transform: translateX(var(--step-dir, 24px)); } }
.setup h2 { font: 300 34px/1.1 var(--display); letter-spacing: -.04em; margin: 0 0 8px; }
.setup p { color: var(--muted); margin: 0 0 16px; }
.setup-logo { display: block; width: 72px; height: 72px; margin-bottom: 18px; }
.setup-dots { display: flex; gap: 6px; margin-bottom: 26px; }
.setup-dots i { height: 4px; flex: 1; border-radius: 4px; background: var(--surface-3); transition: background-color .35s; }
.setup-dots i.on { background: var(--accent); }
.setup-label { font-weight: 500; margin: 18px 0 8px; }
.setup-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.setup-pick button { flex: 0 0 auto; padding: 9px 18px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--field); color: var(--text); font-weight: 500; transition: transform .3s var(--spring), border-color .18s, background-color .18s; }
.setup-pick.wide button { flex: 1; }
.setup-pick button:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.setup-pick button.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .16); box-shadow: 0 0 0 1px var(--accent); }
.setup-themes { grid-template-columns: repeat(4, 1fr); }
.setup select { width: 100%; }
.setup-est { margin: 14px 0 0; font-size: 13px; }
.setup p.setup-note { margin: 3px 0 0; font-size: 13px; }
.setup p.setup-note.first { margin-top: 10px; }
.setup-key { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 500; }
.setup-key + p { border-top: 1px solid var(--line); padding-top: 14px; margin: 0; }
.setup input.hotkey { width: 170px; text-align: center; cursor: pointer; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 11px; outline: none; font: 600 13px "Cascadia Mono", Consolas, monospace; }
.setup input.hotkey.listening { border-color: var(--accent); color: var(--accent-text); }
.setup footer { display: flex; align-items: center; margin-top: 26px; }

/* węższe okno */
@media (max-width: 1320px) {
}
@media (max-width: 1180px) {
  :root:not([data-axis="v"]) .topbar { grid-template-columns: minmax(250px, auto) minmax(0, 1fr); }
  :root:not([data-axis="v"]) .topbar .dock { justify-self: start; }
  :root:not([data-axis="v"]) .bar-actions { grid-column: 1 / -1; justify-self: start; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .s-index { display: none; }
  .q-cards { grid-template-columns: repeat(2, 1fr); }
  .est-grid { grid-template-columns: repeat(2, 1fr); }
}

/* wyłączone animacje: decyduje przełącznik w aplikacji. Nie patrzymy na prefers-reduced-motion, bo wyłączone
   "efekty animacji" w Windows (częste na komputerach do gier) wycinałyby wszystko mimo włączonej opcji. */
[data-anim="0"] *, [data-anim="0"] *::before, [data-anim="0"] *::after { animation: none !important; transition: none !important; }