/* ============================================================
   PCGeek OS - style systemu
   Struktura:
   1.  Zmienne i motywy
   2.  Reset i podstawy
   3.  Boot i lock screen
   4.  Tapety
   5.  Pulpit i ikony
   6.  Okna
   7.  Pasek zadań, dock, tray
   8.  Menu Start
   9.  Menu kontekstowe
   10. Powiadomienia
   11. Wspólne elementy UI aplikacji
   12. Style poszczególnych aplikacji
   13. Nakładki (BSOD, wyłączanie)
   14. Wersja mobilna
   15. Preferencje dostępności
   16. Wodotryski (efekty specjalne)
   ============================================================ */

/* ---------- 1. Zmienne i motywy ---------- */
:root {
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, "Courier New", monospace;
  --radius-win: 14px;
  --radius-ui: 10px;
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --dur: 320ms;
  --taskbar-h: 66px;
}

[data-theme="light"] {
  --text: #1c2230;
  --text-dim: rgba(28, 34, 48, 0.62);
  --surface: rgba(248, 250, 253, 0.78);
  --surface-solid: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.65);
  --titlebar: rgba(255, 255, 255, 0.45);
  --border: rgba(20, 30, 50, 0.14);
  --border-soft: rgba(20, 30, 50, 0.08);
  --hover: rgba(20, 30, 50, 0.07);
  --active: rgba(20, 30, 50, 0.12);
  --input-bg: rgba(255, 255, 255, 0.9);
  --shadow-win: 0 24px 70px rgba(15, 23, 42, 0.30), 0 3px 14px rgba(15, 23, 42, 0.16);
  --shadow-win-blur: 0 12px 34px rgba(15, 23, 42, 0.18);
  --glass: rgba(250, 252, 255, 0.62);
  --card: rgba(255, 255, 255, 0.72);
  --scroll-thumb: rgba(20, 30, 50, 0.28);
  /* Serie wykresów. Osobne kroki na motyw, sprawdzone walidatorem
     palety (pasmo jasności, chroma, rozdzielność CVD, kontrast). */
  --chart-power: #c2410c;
  --chart-batt: #047857;
  --chart-energy: #0a84ff;
}

[data-theme="dark"] {
  --text: #e8ebf2;
  --text-dim: rgba(232, 235, 242, 0.60);
  --surface: rgba(26, 32, 46, 0.78);
  --surface-solid: #1d2432;
  --surface-2: rgba(255, 255, 255, 0.05);
  --titlebar: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.08);
  --active: rgba(255, 255, 255, 0.14);
  --input-bg: rgba(0, 0, 0, 0.28);
  --shadow-win: 0 26px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-win-blur: 0 12px 34px rgba(0, 0, 0, 0.35);
  --glass: rgba(22, 28, 42, 0.60);
  --card: rgba(255, 255, 255, 0.055);
  --scroll-thumb: rgba(255, 255, 255, 0.26);
  /* Nie odwrócenie jasnych kroków, tylko własny dobór pod ciemne tło. */
  --chart-power: #d97706;
  --chart-batt: #0ea472;
  --chart-energy: #3b93f0;
}

/* ---------- 2. Reset i podstawy ---------- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  overflow: hidden;
  background: #0b1220;
}
[data-theme="light"] body { background: #dfe6f0; }

button { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}

#seo-content { display: none; }

.hidden { display: none !important; }

/* ---------- 3. Boot i lock screen ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060a13;
  color: #dfe6f2;
  transition: opacity 500ms ease;
}
#boot.fade-out { opacity: 0; pointer-events: none; }

.boot-inner { text-align: center; }

.boot-logo {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  animation: boot-pulse 2.2s ease-in-out infinite;
}
.boot-logo i {
  border-radius: 9px;
  background: linear-gradient(145deg, #34a5ff, #0a84ff);
  box-shadow: 0 0 22px rgba(10, 132, 255, 0.35);
}
.boot-logo i:nth-child(2) { background: linear-gradient(145deg, #6cd0ff, #2f9bff); }
.boot-logo i:nth-child(3) { background: linear-gradient(145deg, #1272d9, #0a5cbf); }
.boot-logo i:nth-child(4) { background: linear-gradient(145deg, #45b1ff, #0a84ff); }

@keyframes boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.96); opacity: 0.85; }
}

.boot-name { font-size: 22px; font-weight: 700; letter-spacing: 0.4px; }
.boot-name span { font-weight: 300; opacity: 0.7; }

.boot-bar {
  width: 220px;
  height: 4px;
  margin: 26px auto 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #0a84ff, #6cd0ff);
  transition: width 300ms ease;
}
.boot-msg { font-size: 12.5px; color: rgba(223, 230, 242, 0.55); min-height: 18px; }

#lock {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 9vh 20px 10vh;
  background:
    radial-gradient(1100px 600px at 20% 15%, rgba(59, 110, 255, 0.35), transparent 60%),
    radial-gradient(900px 550px at 85% 80%, rgba(16, 92, 92, 0.5), transparent 65%),
    linear-gradient(135deg, #0a1f3f 0%, #14295c 45%, #0f4a4a 100%);
  color: #eef2fa;
  text-align: center;
  transition: opacity 450ms ease, transform 450ms ease;
}
#lock.fade-out { opacity: 0; transform: translateY(-24px); pointer-events: none; }

.lock-clock {
  font-size: clamp(56px, 11vw, 108px);
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 1.05;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35);
}
.lock-date { font-size: clamp(15px, 2.4vw, 21px); opacity: 0.85; margin-top: 8px; }

.lock-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #34a5ff, #0a5cbf);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
.lock-user { font-size: 19px; font-weight: 600; margin-bottom: 18px; }

.lock-hint {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eef2fa;
  padding: 11px 22px;
  border-radius: 99px;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 200ms ease, transform 200ms ease;
  animation: hint-bob 2.6s ease-in-out infinite;
}
.lock-hint:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- 4. Tapety ---------- */
#os { position: fixed; inset: 0; }

#wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 600ms ease;
  overflow: hidden;
}

.wp-blobs { position: absolute; inset: 0; display: none; }
.wp-blobs i {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  animation: blob-drift 26s ease-in-out infinite alternate;
}
.wp-blobs .b1 { left: 4%; top: 12%; width: 46vw; height: 42vh; background: radial-gradient(circle at 30% 30%, #3b6eff, transparent 70%); }
.wp-blobs .b2 { right: 2%; top: 4%; width: 34vw; height: 36vh; background: radial-gradient(circle at 70% 70%, #4fd8bd, transparent 70%); animation-delay: -8s; }
.wp-blobs .b3 { left: 42%; bottom: 2%; width: 50vw; height: 44vh; background: radial-gradient(circle at 40% 60%, #d98a4c, transparent 72%); animation-delay: -16s; }

@keyframes blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-4vw, -5vh) scale(1.12); }
}

#wallpaper.wp-aurora {
  background: linear-gradient(135deg, #0a1f3f 0%, #1b3260 45%, #0f5c5c 100%);
}
#wallpaper.wp-aurora .wp-blobs { display: block; }

#wallpaper.wp-dawn {
  background:
    radial-gradient(1000px 700px at 15% 20%, rgba(255, 190, 160, 0.75), transparent 60%),
    radial-gradient(900px 700px at 85% 30%, rgba(178, 200, 255, 0.8), transparent 60%),
    linear-gradient(160deg, #ffd9c4 0%, #f2c4d8 45%, #a9c3f5 100%);
}

#wallpaper.wp-mesh {
  background:
    radial-gradient(800px 600px at 12% 18%, rgba(120, 90, 255, 0.55), transparent 55%),
    radial-gradient(700px 600px at 88% 22%, rgba(0, 200, 255, 0.4), transparent 55%),
    radial-gradient(900px 700px at 50% 95%, rgba(255, 70, 130, 0.35), transparent 55%),
    linear-gradient(180deg, #141a2e, #1a2340);
}

#wallpaper.wp-forest {
  background:
    radial-gradient(900px 600px at 80% 15%, rgba(90, 220, 170, 0.28), transparent 60%),
    radial-gradient(800px 700px at 15% 85%, rgba(20, 120, 90, 0.5), transparent 60%),
    linear-gradient(150deg, #0c1f1a 0%, #133a2e 55%, #0d2b33 100%);
}

#wallpaper.wp-graphite {
  background:
    radial-gradient(1000px 700px at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(160deg, #16181d 0%, #22252d 60%, #191c22 100%);
}

/* ---------- 5. Pulpit i ikony ---------- */
#desktop {
  position: absolute;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
}

.desk-icon {
  position: absolute;
  width: 92px;
  padding: 8px 4px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: default;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.desk-icon.arranging { transition: left 360ms var(--ease), top 360ms var(--ease), background 160ms ease; }
.desk-icon:hover { background: rgba(255, 255, 255, 0.10); }
.desk-icon:hover .app-tile { transform: translateY(-3px) scale(1.04); }
.desk-icon.selected {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.desk-icon.dragging { opacity: 0.82; transform: scale(1.05); z-index: 50; transition: none; }

.app-tile {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 200ms var(--ease);
  flex: 0 0 auto;
}
.app-tile.mono-glyph { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: -1px; }

.desk-icon .di-name {
  font-size: 12.5px;
  line-height: 1.25;
  color: #f2f5fb;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#marquee {
  position: absolute;
  z-index: 40;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
  background: var(--accent-soft);
  border-radius: 4px;
  pointer-events: none;
}

/* ---------- 6. Okna ---------- */
#windows { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 340px;
  min-height: 220px;
  border-radius: var(--radius-win);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  pointer-events: auto;
  outline: none;
  transition: box-shadow 250ms ease, opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.window.blurred { box-shadow: var(--shadow-win-blur); }
.window.blurred .win-title { opacity: 0.55; }
.window.blurred .tl-btn { background: color-mix(in srgb, var(--text) 22%, transparent); }

.window.geo-anim { transition: left var(--dur) var(--ease), top var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease), box-shadow 250ms ease; }
.window.maximized { border-radius: 0; border-left: none; border-right: none; border-top: none; }

.window.opening { opacity: 0; transform: scale(0.90) translateY(18px); }
.window.closing { opacity: 0; transform: scale(0.92) translateY(10px); pointer-events: none; }
.window.minimizing, .window.restoring {
  transition: transform 360ms var(--ease), opacity 340ms ease;
  pointer-events: none;
}

.win-titlebar {
  height: 42px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--titlebar);
  border-bottom: 1px solid var(--border-soft);
  cursor: grab;
  touch-action: none;
}
.win-titlebar:active { cursor: grabbing; }

.traffic { display: flex; gap: 8px; flex: 0 0 auto; }
.tl-btn {
  width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  transition: background 180ms ease, color 120ms ease;
}
.tl-close { background: #ff5f57; }
.tl-min { background: #febc2e; }
.tl-max { background: #28c840; }
.window .traffic:hover .tl-close { color: #7d1712; }
.window .traffic:hover .tl-min { color: #8f5f00; }
.window .traffic:hover .tl-max { color: #0b5a1d; }
.window .traffic:hover .tl-btn { color-scheme: light; }
.window.blurred .traffic:hover .tl-close { background: #ff5f57; }
.window.blurred .traffic:hover .tl-min { background: #febc2e; }
.window.blurred .traffic:hover .tl-max { background: #28c840; }

.win-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.win-title .wt-icon { font-size: 15px; }
.win-title-pad { width: 55px; flex: 0 0 auto; }

.win-body {
  flex: 1;
  overflow: auto;
  position: relative;
  overscroll-behavior: contain;
}

/* Uchwyty zmiany rozmiaru */
.rs { position: absolute; z-index: 5; }
.rs-n { top: -4px; left: 10px; right: 10px; height: 8px; cursor: n-resize; }
.rs-s { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: s-resize; }
.rs-e { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: e-resize; }
.rs-w { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: w-resize; }
.rs-ne { top: -5px; right: -5px; width: 14px; height: 14px; cursor: ne-resize; }
.rs-nw { top: -5px; left: -5px; width: 14px; height: 14px; cursor: nw-resize; }
.rs-se { bottom: -5px; right: -5px; width: 14px; height: 14px; cursor: se-resize; }
.rs-sw { bottom: -5px; left: -5px; width: 14px; height: 14px; cursor: sw-resize; }
.window.maximized .rs { display: none; }

/* Podgląd przyciągania */
#snap-preview {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-win);
  border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: var(--accent-soft);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: all 160ms var(--ease);
}

/* ---------- 7. Pasek zadań, dock, tray ---------- */
#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-h);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px 10px;
  pointer-events: none;
}

.dock {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.30);
}

.dock-sep { width: 1px; height: 30px; background: var(--border); margin: 0 4px; }

.dock-apps { display: flex; align-items: center; gap: 6px; }

.dock-item {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 13px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, transform 180ms var(--ease);
}
.dock-item:hover { background: var(--hover); transform: translateY(-4px); }
.dock-item:active { transform: translateY(-1px) scale(0.94); }

.dock-item .app-tile { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.dock-item .app-tile.mono-glyph { font-size: 14px; }

.dock-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--border-soft);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.dock-item:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.dock-item .run-dot {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: var(--text-dim);
  opacity: 0;
  transition: all 200ms var(--ease);
}
.dock-item.running .run-dot { opacity: 1; }
.dock-item.active .run-dot { width: 14px; background: var(--accent); opacity: 1; }

.start-btn .start-logo {
  width: 24px;
  height: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5px;
}
.start-btn .start-logo i { border-radius: 3px; background: linear-gradient(145deg, #45b1ff, #0a6ee0); }
.start-btn:hover .start-logo i { background: linear-gradient(145deg, #6cc4ff, #1d84f0); }

.tray {
  pointer-events: auto;
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.30);
}

.tray-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.tray-btn:hover { background: var(--hover); }

.tray-clock {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 3px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  cursor: default;
  line-height: 1.2;
}
.tray-clock:hover { background: var(--hover); }
#clockTime { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
#clockDate { font-size: 10.5px; color: var(--text-dim); }

/* ---------- 8. Menu Start ---------- */
#startMenu {
  position: absolute;
  left: 50%;
  bottom: calc(var(--taskbar-h) + 6px);
  transform: translateX(-50%);
  z-index: 3500;
  width: min(560px, calc(100vw - 24px));
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(1.7);
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: 18px;
  opacity: 1;
  transition: opacity 220ms ease, transform 220ms var(--ease);
}
#startMenu.closed {
  opacity: 0;
  transform: translateX(-50%) translateY(14px) scale(0.98);
  pointer-events: none;
}

.sm-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 99px;
  border: 1px solid var(--border-soft);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 16px;
}
.sm-search:focus { border-color: var(--accent); }
.sm-search::placeholder { color: var(--text-dim); }

.sm-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin: 0 4px 10px; }

.sm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-height: 178px;
  align-content: start;
}

.sm-app {
  border: none;
  background: transparent;
  border-radius: 12px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: background 150ms ease;
}
.sm-app:hover { background: var(--hover); }
.sm-app .app-tile { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
.sm-app .app-tile.mono-glyph { font-size: 15px; }
.sm-app span.sm-app-name { font-size: 12px; color: var(--text); }

.sm-empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); font-size: 13.5px; padding: 40px 0; }

.sm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.sm-user { display: flex; align-items: center; gap: 10px; }
.sm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #34a5ff, #0a5cbf);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.sm-user-name { font-size: 13.5px; font-weight: 600; }
.sm-user-role { font-size: 11.5px; color: var(--text-dim); }

.sm-power { display: flex; gap: 4px; }
.sm-power button {
  border: none;
  background: transparent;
  border-radius: 9px;
  width: 34px;
  height: 34px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.sm-power button:hover { background: var(--hover); }

/* ---------- 9. Menu kontekstowe ---------- */
.ctx-menu {
  position: fixed;
  z-index: 6000;
  min-width: 210px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: ctx-in 140ms var(--ease);
}
@keyframes ctx-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.ctx-item:hover, .ctx-item.hover { background: var(--accent); color: #fff; }
.ctx-item .ctx-ico { width: 18px; text-align: center; flex: 0 0 auto; }
.ctx-item .ctx-sub-arrow { margin-left: auto; opacity: 0.6; font-size: 11px; }
.ctx-item[disabled] { opacity: 0.45; pointer-events: none; }
.ctx-item .ctx-check { margin-left: auto; font-size: 12px; }

.ctx-sep { height: 1px; margin: 5px 8px; background: var(--border-soft); }

/* ---------- 10. Powiadomienia ---------- */
#notifications {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 7000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 28px));
  pointer-events: none;
}

.notif {
  pointer-events: auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
  transform: translateX(20px);
  opacity: 0;
  transition: transform 320ms var(--ease), opacity 320ms ease;
}
.notif.shown { transform: none; opacity: 1; }
.notif.hiding { transform: translateX(30px); opacity: 0; }
.notif-ico { font-size: 20px; flex: 0 0 auto; }
.notif-title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.notif-body { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }

/* ---------- 11. Wspólne elementy UI aplikacji ---------- */
.app-pad { padding: 22px 24px; }

.win-body h1 { font-size: 21px; margin: 0 0 14px; }
.win-body h2 { font-size: 16.5px; margin: 22px 0 10px; }
.win-body p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; color: var(--text); }
.win-body a { color: var(--accent); }

.muted { color: var(--text-dim); font-size: 13px; }

.os-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-ui);
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 150ms ease, transform 120ms ease;
  text-decoration: none;
}
.os-btn:hover { filter: brightness(1.12); }
.os-btn:active { transform: scale(0.97); }
.os-btn[disabled] { opacity: 0.55; cursor: default; }
.os-btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.os-btn.secondary:hover { background: var(--hover); filter: none; }

/* .win-body a ma wyższą specyficzność niż .os-btn, więc gdy przycisk jest
   linkiem (np. "Otwórz stronę" w podglądzie projektu), trzeba to nadpisać
   jawnie, inaczej tekst wychodzi w kolorze akcentu na tle w kolorze akcentu. */
.win-body a.os-btn { color: #fff; }
.win-body a.os-btn.secondary { color: var(--text); }

.os-input, .os-textarea, .os-select {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-ui);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms ease;
}
.os-input:focus, .os-textarea:focus, .os-select:focus { border-color: var(--accent); }
.os-textarea { resize: vertical; min-height: 110px; }

.os-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 16px;
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }

/* Układ z bocznym panelem (eksplorator, mail, ustawienia) */
.split {
  display: flex;
  height: 100%;
  min-height: 0;
}
.split-side {
  flex: 0 0 190px;
  border-right: 1px solid var(--border-soft);
  padding: 12px 8px;
  overflow: auto;
  background: var(--surface-2);
}
.split-main { flex: 1; overflow: auto; min-width: 0; display: flex; flex-direction: column; }

.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  margin-bottom: 2px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: background 140ms ease;
}
.side-item:hover { background: var(--hover); }
.side-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-item .cnt { margin-left: auto; font-size: 11px; color: var(--text-dim); }

.toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.toolbar .tb-title { font-size: 13.5px; font-weight: 700; }
.toolbar .spacer { flex: 1; }
.tool-btn {
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 140ms ease;
}
.tool-btn:hover { background: var(--hover); }
.tool-btn.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

.statusbar {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* Progress bar generyczny */
.meter { background: color-mix(in srgb, var(--text) 12%, transparent); height: 8px; border-radius: 99px; overflow: hidden; }
.meter > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6));
  transition: width 800ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ---------- 12. Style aplikacji ---------- */

/* --- O mnie --- */
.about-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.about-avatar {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #34a5ff, #0a5cbf);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(10, 132, 255, 0.35);
}
.about-hero h1 { margin: 0 0 4px; }
.about-hero .muted { font-size: 13.5px; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.skill { padding: 13px 14px; }
.skill .sk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.skill h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.skill .percent { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.skill.tilted .meter { transform: rotate(3deg); transition: transform 500ms ease; }

.skills-cta { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.skills-cta .cta-thanks { font-weight: 600; }

/* --- Eksplorator projektów --- */
.explorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 4px;
  padding: 14px;
  align-content: start;
}
.fs-item {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 11px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: default;
  text-align: center;
  transition: background 140ms ease, border-color 140ms ease;
}
.fs-item:hover { background: var(--hover); }
.fs-item.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fs-ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
.fs-thumb {
  width: 82px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.fs-name { font-size: 12px; line-height: 1.3; word-break: break-word; max-width: 100%; }

.explorer-list { padding: 8px 14px; }
.fs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: default;
  font-size: 13px;
}
.fs-row:hover { background: var(--hover); }
.fs-row.selected { background: var(--accent-soft); }
.fs-row .fs-ico { font-size: 20px; }
.fs-row .fs-row-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-row .fs-row-desc { flex: 1.4; color: var(--text-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13px; min-width: 0; overflow: hidden; }
.breadcrumb button {
  border: none;
  background: transparent;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.breadcrumb button:hover { background: var(--hover); }
.breadcrumb .bc-sep { color: var(--text-dim); font-size: 11px; }
.breadcrumb .current { font-weight: 700; }

/* Podgląd projektu (case study) */
.case-hero { border-radius: 12px; overflow: hidden; border: 1px solid var(--border-soft); margin-bottom: 16px; background: var(--surface-2); }
.case-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9.5; object-fit: cover; }
.case-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.case-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* --- Usługi --- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.service-card .sv-ico { font-size: 26px; margin-bottom: 10px; }
.service-card h3 { margin: 0 0 7px; font-size: 14.5px; }
.service-card p { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.55; }
.services-cta { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* --- Mail / kontakt --- */
.mail-list-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  display: block;
}
.mail-list-item:hover { background: var(--hover); }
.mail-list-item.active { background: var(--accent-soft); }
.mail-from { font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.mail-from .mail-date { font-weight: 400; font-size: 11.5px; color: var(--text-dim); flex: 0 0 auto; }
.mail-subject { font-size: 13px; margin-top: 2px; }
.mail-preview { font-size: 12px; color: var(--text-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; }

.mail-read-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-soft); }
.mail-read-head h1 { font-size: 18px; margin: 0 0 8px; }
.mail-read-meta { font-size: 12.5px; color: var(--text-dim); }
.mail-read-body { padding: 18px 22px; }

.compose-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.compose-row .cr-label { flex: 0 0 62px; color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.compose-row input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  padding: 4px 0;
}
.compose-body { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; min-height: 0; }
.compose-body textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  outline: none;
  resize: none;
  min-height: 140px;
}
.compose-actions { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }

/* --- Blog --- */
.blog-post-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: block;
}
.blog-post-item:hover { background: var(--hover); }
.blog-post-item h3 { margin: 0 0 5px; font-size: 15px; }
.blog-post-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 10px; align-items: center; }
.blog-reader { padding: 22px 26px; max-width: 660px; }
.blog-reader h1 { font-size: 20px; }
.blog-back { margin-bottom: 14px; }

/* --- Terminal --- */
.terminal-body {
  background: rgba(8, 12, 20, 0.92);
  color: #c9e3ff;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  height: 100%;
  overflow: auto;
  cursor: text;
}
.terminal-body .t-out { white-space: pre-wrap; word-break: break-word; }
.terminal-body .t-line { display: flex; gap: 0; }
.terminal-body .t-prompt { color: #52d97e; white-space: nowrap; }
.terminal-body .t-prompt .path { color: #58a6ff; }
.terminal-body input.t-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #c9e3ff;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  padding: 0;
  caret-color: #52d97e;
}
.terminal-body .t-err { color: #ff8080; }
.terminal-body .t-dim { color: #6b7f99; }
.terminal-body .t-accent { color: #58a6ff; }
.terminal-body .t-warn { color: #ffcc66; }
.win-terminal .win-body { background: rgba(8, 12, 20, 0.6); }

/* --- Homelab --- */
.server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.server-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.server-host { font-weight: 700; font-size: 14.5px; }
.badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; color: #fff; }
.badge-online { background: #10b981; }
.badge-stale { background: #ef4444; }
.badge-unknown { background: #9ca3af; }
.server-tile.stale { opacity: 0.6; }

.server-id { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 8px; }
.server-chip {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.server-chip.price {
  background: var(--surface-2);
  color: var(--text-dim);
  border-color: var(--border-soft);
}
.server-specs { margin: 0 0 8px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.server-desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; }

.stat-row { margin-bottom: 10px; }
.stat-label { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.stat-label .stat-sub { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.cores { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.core { flex: 1 1 26px; min-width: 22px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.core > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fb923c, #ef4444); transition: width 600ms ease; }

.temps { display: flex; gap: 5px; flex-wrap: wrap; }
.temp-item { font-size: 11px; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border-soft); }

.server-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }

/* Odświeżanie: przygaszamy poprzedni render zamiast podmieniać go
   na skeleton, żeby układ nie skakał. */
#hlServers.is-reloading, #hlPower.is-reloading { opacity: 0.45; transition: opacity 160ms ease; }

/* --- Homelab: zużycie prądu --- */
.pwr-card { margin-top: 12px; }

.pwr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pwr-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-ui);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.pwr-label { font-size: 11px; color: var(--text-dim); }
/* Proporcjonalne cyfry: tabular rozstrzeliłoby duże wartości. */
.pwr-value { font-size: 21px; font-weight: 650; line-height: 1.15; }
.pwr-sub { font-size: 10.5px; color: var(--text-dim); }

.pwr-charts { position: relative; }
.pwr-fig { margin: 0 0 16px; }
.pwr-cap { font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; }
.pwr-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.pwr-tick { font-size: 9.5px; fill: var(--text-dim); font-variant-numeric: tabular-nums; }

.pwr-tip {
  position: absolute;
  top: 0;
  width: 150px;
  padding: 7px 9px;
  border-radius: 9px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-win-blur);
  font-size: 11.5px;
  pointer-events: none;
  z-index: 3;
}
.pwr-tip[hidden] { display: none; }
.pwr-tip-time { display: block; color: var(--text-dim); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.pwr-tip-row { display: flex; align-items: center; gap: 6px; }
.pwr-tip-row strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.pwr-tip-row i { width: 8px; height: 8px; border-radius: 3px; flex: none; }

.pwr-bars { display: flex; flex-direction: column; gap: 7px; }
.pwr-bar-row { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.pwr-bar-label { flex: none; width: 42px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pwr-bar-track { flex: 1 1 auto; height: 12px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
/* Zaokrąglony koniec danych, kwadratowy przy linii bazowej. */
.pwr-bar-track > i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--chart-energy); }
.pwr-bar-val { flex: none; min-width: 132px; text-align: right; font-variant-numeric: tabular-nums; }
.pwr-bar-sub { color: var(--text-dim); }

.pwr-actions { margin-top: 4px; }
.pwr-tables[hidden] { display: none; }
.pwr-tab-title { font-size: 12px; margin: 14px 0 6px; }
.pwr-tab-scroll { overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-ui); }
.pwr-tab-tall { max-height: 240px; }
.pwr-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pwr-table th, .pwr-table td { padding: 5px 9px; text-align: right; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.pwr-table th:first-child, .pwr-table td:first-child { text-align: left; }
.pwr-table thead th { position: sticky; top: 0; background: var(--surface-solid); color: var(--text-dim); font-weight: 600; }
.pwr-table tbody tr:last-child td { border-bottom: none; }

body.mobile .pwr-bar-val { min-width: 0; }
body.mobile .pwr-bar-sub { display: none; }
/* viewBox ma 820 jednostek i na telefonie skaluje się do ~310 px, więc
   tekst i promień znacznika trzeba podbić w jednostkach użytkownika,
   inaczej opis osi schodzi do nieczytelnych 3-4 px. Kreski linii i
   siatki tego nie potrzebują - mają non-scaling-stroke. */
body.mobile .pwr-tick { font-size: 25px; }
body.mobile .pwr-dot { r: 12; }

.loader {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Księga gości --- */
.gb-entry { margin-bottom: 10px; }
.gb-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.gb-meta .gb-name { font-weight: 700; color: var(--text); }
.gb-msg { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.gb-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.gb-status { min-height: 18px; font-size: 12.5px; margin-top: 6px; }
.gb-status.ok { color: #10b981; }
.gb-status.err { color: #ef4444; }
.gb-form-note { font-size: 11.5px; color: var(--text-dim); }

/* --- Ustawienia --- */
.set-section { padding: 20px 24px; max-width: 560px; }
.set-section h2 { margin: 0 0 6px; font-size: 17px; }
.set-section .sec-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.set-row .sr-label { font-size: 13.5px; font-weight: 600; }
.set-row .sr-hint { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  border: none;
  background: transparent;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-dim);
}
.seg button.active { background: var(--accent); color: #fff; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 140ms ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface-solid) inset; }

.wp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.wp-thumb {
  border: 2px solid var(--border-soft);
  border-radius: 12px;
  height: 74px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: transform 150ms ease, border-color 150ms ease;
}
.wp-thumb:hover { transform: translateY(-2px); }
.wp-thumb.active { border-color: var(--accent); }

/* Miniaturowe wersje tapet (odpowiedniki #wallpaper.wp-*) */
.wp-thumb { background: var(--surface-2); }
.wp-thumb.wp-aurora {
  background:
    radial-gradient(60px 40px at 20% 30%, rgba(59, 110, 255, 0.75), transparent 70%),
    radial-gradient(50px 35px at 80% 18%, rgba(79, 216, 189, 0.6), transparent 70%),
    radial-gradient(70px 45px at 55% 92%, rgba(217, 138, 76, 0.5), transparent 72%),
    linear-gradient(135deg, #0a1f3f 0%, #1b3260 45%, #0f5c5c 100%);
}
.wp-thumb.wp-dawn {
  background:
    radial-gradient(80px 55px at 15% 20%, rgba(255, 190, 160, 0.75), transparent 60%),
    radial-gradient(70px 55px at 85% 30%, rgba(178, 200, 255, 0.8), transparent 60%),
    linear-gradient(160deg, #ffd9c4 0%, #f2c4d8 45%, #a9c3f5 100%);
}
.wp-thumb.wp-mesh {
  background:
    radial-gradient(60px 45px at 12% 18%, rgba(120, 90, 255, 0.55), transparent 55%),
    radial-gradient(55px 45px at 88% 22%, rgba(0, 200, 255, 0.4), transparent 55%),
    radial-gradient(70px 55px at 50% 95%, rgba(255, 70, 130, 0.35), transparent 55%),
    linear-gradient(180deg, #141a2e, #1a2340);
}
.wp-thumb.wp-forest {
  background:
    radial-gradient(70px 45px at 80% 15%, rgba(90, 220, 170, 0.28), transparent 60%),
    radial-gradient(60px 55px at 15% 85%, rgba(20, 120, 90, 0.5), transparent 60%),
    linear-gradient(150deg, #0c1f1a 0%, #133a2e 55%, #0d2b33 100%);
}
.wp-thumb.wp-graphite {
  background:
    radial-gradient(75px 55px at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(160deg, #16181d 0%, #22252d 60%, #191c22 100%);
}
.wp-thumb.wp-particles {
  background:
    radial-gradient(circle 1.5px at 22% 30%, rgba(255, 255, 255, 0.9) 100%, transparent),
    radial-gradient(circle 1.5px at 58% 18%, rgba(255, 255, 255, 0.8) 100%, transparent),
    radial-gradient(circle 1.5px at 80% 55%, rgba(255, 255, 255, 0.85) 100%, transparent),
    radial-gradient(circle 1.5px at 38% 68%, rgba(255, 255, 255, 0.75) 100%, transparent),
    radial-gradient(circle 1.5px at 12% 60%, rgba(255, 255, 255, 0.7) 100%, transparent),
    linear-gradient(160deg, #0a1120, #142446);
}
.wp-thumb .wp-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  padding: 12px 6px 4px;
  text-align: center;
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 99px;
  border: none;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  cursor: pointer;
  transition: background 200ms ease;
  flex: 0 0 auto;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: left 200ms var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { left: 23px; }

.sysinfo-rows { font-size: 13px; }
.sysinfo-rows .set-row { padding: 10px 2px; }
.sysinfo-rows .sr-val { color: var(--text-dim); text-align: right; }

/* ---------- 13. Nakładki (BSOD, wyłączanie) ---------- */
#bsod {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: #0b57a4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  cursor: pointer;
  animation: ctx-in 200ms ease;
}
#bsod .bsod-box { max-width: 760px; }
#bsod .bsod-sad { font-size: 84px; margin-bottom: 20px; }
#bsod h1 { font-size: 26px; font-weight: 400; line-height: 1.4; margin: 0 0 18px; }
#bsod .bsod-progress { font-size: 17px; margin-bottom: 26px; }
#bsod .bsod-details { font-size: 12.5px; opacity: 0.85; font-family: var(--mono); line-height: 1.7; }
#bsod .bsod-exit { margin-top: 26px; font-size: 13px; opacity: 0.9; }

#shutdown {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: #000;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 900ms ease;
}
#shutdown.on { opacity: 1; }

/* ---------- 14. Wersja mobilna ---------- */
body.mobile #desktop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px;
  align-content: start;
  padding: max(18px, env(safe-area-inset-top)) 14px 14px;
  overflow: auto;
}
body.mobile .desk-icon {
  position: static !important;
  width: auto;
}
body.mobile #marquee { display: none; }

body.mobile .window {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: calc(100% - var(--taskbar-h)) !important;
  min-width: 0;
  border-radius: 0;
  border: none;
}
body.mobile .window.opening { transform: translateY(6%); }
body.mobile .rs { display: none; }
body.mobile .tl-min, body.mobile .tl-max { display: none; }
body.mobile .win-titlebar { cursor: default; height: 46px; }
body.mobile .tl-btn { width: 17px; height: 17px; font-size: 11px; }
body.mobile .traffic .tl-close { color: #7d1712; }

body.mobile .split-side { flex-basis: 64px; }
body.mobile .split-side .side-item span.side-label, body.mobile .split-side .side-item .cnt { display: none; }
body.mobile .dock-item::after { display: none; }
body.mobile .tray { position: static; box-shadow: none; border: none; background: transparent; padding: 5px 0; }
body.mobile #taskbar { justify-content: space-between; gap: 8px; padding: 0 10px calc(6px + env(safe-area-inset-bottom)); }
body.mobile .dock { flex: 1; overflow-x: auto; }
body.mobile #tray .tray-clock { display: none; }
body.mobile #startMenu { bottom: calc(var(--taskbar-h) + 4px); }
body.mobile .app-pad { padding: 16px; }
body.mobile #notifications { top: max(10px, env(safe-area-inset-top)); }

@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr; }
  .blog-reader { padding: 18px; }
  .set-section { padding: 16px; }
}

/* ---------- 15. Preferencje dostępności ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 16. Wodotryski (efekty specjalne) ---------- */

/* Galaretowate okna: transform steruje JS, więc bez przejść */
.window.wobbling {
  transition: none;
  transform-origin: 50% 8%;
  will-change: transform;
}

/* Dock: powiększanie pod kursorem */
.dock.magnifying .dock-item {
  transition: transform 90ms linear;
  transform-origin: 50% 100%;
}

/* Paralaksa tapety: lekki zoom chowa krawędzie przy przesuwaniu.
   Uwaga: transform tylko na #wallpaper (to już i tak stacking context,
   bo ma z-index) - transform na .wp-blobs psułby mix-blend-mode plam. */
#wallpaper {
  transform: scale(1.06) translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
}

/* Tapeta: Cząsteczki */
#wallpaper.wp-particles {
  background:
    radial-gradient(900px 600px at 78% 12%, rgba(43, 76, 145, 0.5), transparent 60%),
    radial-gradient(800px 620px at 12% 88%, rgba(22, 46, 92, 0.55), transparent 65%),
    linear-gradient(160deg, #070c18 0%, #0d1729 55%, #0a1120 100%);
}
#fx-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Wygaszacz ekranu */
#screensaver {
  position: fixed;
  inset: 0;
  z-index: 15000;
  background: #000;
  cursor: none;
  opacity: 0;
  transition: opacity 700ms ease;
}
#screensaver.on { opacity: 1; }
#screensaver canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#screensaver .saver-clock {
  position: absolute;
  font-weight: 200;
  font-size: clamp(42px, 7vw, 88px);
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.65);
  font-variant-numeric: tabular-nums;
  transition: top 2.4s ease, left 2.4s ease;
  pointer-events: none;
}
#screensaver .saver-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* Zapasowe konfetti (gdy CDN niedostępny) */
.fx-confetti {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
}

/* Tryb imprezowy */
body.party #wallpaper {
  animation: fx-party-hue 6s linear infinite;
}
body.party .window:not(.minimizing):not(.restoring):not(.wobbling):not(.maximized) {
  animation: fx-party-sway 1.6s ease-in-out infinite;
}
body.party .dock {
  animation: fx-party-bop 800ms ease-in-out infinite;
}
@keyframes fx-party-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}
@keyframes fx-party-sway {
  0%, 100% { transform: rotate(-0.5deg); }
  50% { transform: rotate(0.5deg); }
}
@keyframes fx-party-bop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- 17. Gry ---------- */

/* Launcher (Salon gier) */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.game-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms var(--ease), background 160ms ease;
}
.game-card:hover { transform: translateY(-3px); background: var(--hover); }
.game-card:active { transform: scale(0.98); }
.gc-emoji { font-size: 34px; line-height: 1; }
.gc-name { font-weight: 700; font-size: 15px; color: var(--text); }
.gc-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.gc-best { font-size: 11.5px; color: var(--accent); font-weight: 600; margin-top: 2px; }

/* Wspólny szkielet okien gier */
.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px;
  height: 100%;
  overflow: auto;
}
.game-hud {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  flex-wrap: wrap;
}
.hud-spacer { flex: 1; }
.hud-box {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.hud-box strong { color: var(--text); font-variant-numeric: tabular-nums; }
.game-hint { text-align: center; font-size: 12px; line-height: 1.5; margin: 0; }
.game-board {
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
}
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid) 74%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.game-overlay[hidden] { display: none; }
.game-overlay h3 { margin: 0 0 8px; font-size: 19px; }
.game-overlay p { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); }

/* Snake */
.snake-board {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 6px;
}
.snake-board canvas { display: block; max-width: 100%; height: auto; }

.dpad {
  display: none;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 46px);
  gap: 8px;
}
.dpad button {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--card);
  font-size: 16px;
  cursor: pointer;
}
.dpad button:active { background: var(--active); }
.dpad [data-d="up"] { grid-column: 2; grid-row: 1; }
.dpad [data-d="left"] { grid-column: 1; grid-row: 2; }
.dpad [data-d="down"] { grid-column: 2; grid-row: 2; }
.dpad [data-d="right"] { grid-column: 3; grid-row: 2; }
body.mobile .dpad { display: grid; }

/* Saper */
.mine-grid {
  display: grid;
  grid-template-columns: repeat(9, 34px);
  gap: 4px;
}
.mine-cell {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text) 14%, transparent);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 120ms ease;
}
.mine-cell:hover:not(.open) { background: color-mix(in srgb, var(--text) 22%, transparent); }
.mine-cell.open {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  cursor: default;
}
.mine-cell.boom { background: rgba(255, 69, 58, 0.45); }
.mine-cell[data-n="1"] { color: #4da3ff; }
.mine-cell[data-n="2"] { color: #30d158; }
.mine-cell[data-n="3"] { color: #ff453a; }
.mine-cell[data-n="4"] { color: #bf5af2; }
.mine-cell[data-n="5"] { color: #ff9f0a; }
.mine-cell[data-n="6"] { color: #64d2ff; }
.mine-cell[data-n="7"] { color: #ff375f; }
.mine-cell[data-n="8"] { color: var(--text); }
.ms-face { font-size: 17px; padding: 6px 10px; }
.os-btn.toggled {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Memory */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 74px);
  gap: 10px;
  perspective: 900px;
}
.mem-card {
  width: 74px;
  height: 74px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.mem-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease);
}
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }
.mem-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 30px;
}
.mem-front {
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  color: rgba(255, 255, 255, 0.85);
  font-size: 22px;
  font-weight: 800;
}
.mem-back {
  transform: rotateY(180deg);
  background: var(--card);
}
.mem-card.matched .mem-inner { opacity: 0.55; }
.mem-card.matched .mem-back { border-color: var(--accent); }

/* 2048 */
.g2048-grid {
  display: grid;
  grid-template-columns: repeat(4, 74px);
  grid-auto-rows: 74px;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.g2048-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-weight: 800;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.g2048-cell.pop { animation: g2048-pop 170ms var(--ease); }
@keyframes g2048-pop {
  from { transform: scale(0.4); }
  to { transform: scale(1); }
}
.g2048-cell.v2 { background: #eee4da; color: #776e65; }
.g2048-cell.v4 { background: #ede0c8; color: #776e65; }
.g2048-cell.v8 { background: #f2b179; color: #fff; }
.g2048-cell.v16 { background: #f59563; color: #fff; }
.g2048-cell.v32 { background: #f67c5f; color: #fff; }
.g2048-cell.v64 { background: #f65e3b; color: #fff; }
.g2048-cell.v128 { background: #edcf72; color: #fff; font-size: 22px; }
.g2048-cell.v256 { background: #edcc61; color: #fff; font-size: 22px; }
.g2048-cell.v512 { background: #edc850; color: #fff; font-size: 22px; }
.g2048-cell.v1024 { background: #edc53f; color: #fff; font-size: 18px; }
.g2048-cell.v2048 { background: #edc22e; color: #fff; font-size: 18px; }
.g2048-cell.vbig { background: #3c3a32; color: #fff; font-size: 18px; }

/* Kółko i krzyżyk */
.ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  gap: 8px;
}
.ttt-cell {
  height: 84px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  font-size: 38px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease;
}
.ttt-cell:hover:not([disabled]) { background: var(--hover); }
.ttt-cell[disabled] { cursor: default; }
.ttt-cell.x { color: var(--accent); }
.ttt-cell.o { color: #ff9f0a; }
.ttt-cell.winline {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Dopasowanie do telefonów */
body.mobile .game-wrap { padding: 14px 10px; }
body.mobile .mine-grid { grid-template-columns: repeat(9, minmax(30px, 1fr)); width: 100%; max-width: 360px; }
body.mobile .mine-cell { width: 100%; height: auto; aspect-ratio: 1; }
body.mobile .mem-grid { grid-template-columns: repeat(4, minmax(64px, 1fr)); width: 100%; max-width: 360px; }
body.mobile .mem-card { width: 100%; height: auto; aspect-ratio: 1; }
body.mobile .g2048-grid { grid-template-columns: repeat(4, 68px); grid-auto-rows: 68px; }