/* ═══════════════════════════════════════════════════════════════
   KOMPUTER: NOWY WYGLĄD JAK NA TELEFONIE (8.10.2026, prośba Konrada)

   Telefon ma wygląd z prototypu (app/telefon/). Komputer zostaje przy
   swoim układzie (pasek boczny, siatka Pulpitu), a przejmuje język
   wyglądu z telefonu: kremowo-szare tło ze złotą poświatą, białe karty
   z większym zaokrągleniem i miękkim cieniem, zwykły krój w etykietach
   zamiast wersalików pisma maszynowego, złota pigułka na aktywnej
   pozycji menu (jak dolny pasek na telefonie), nagłówek jako biała
   pigułka. Pasek boczny zostaje granatowy jak logo.
   Tylko od 861 px: telefon ma własne warstwy i ich nie ruszamy.
   Ładowany po z27-kolory.css, przed telefon.css.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  /* ── tło ── */
  :root:not([data-theme="dark"]) { --bg: #F5F5F7; --surface: #FFFFFF; --line: #ECE8DF; --line-2: #F1EEE7; --ink-2: #5E6670; }
  html:not([data-theme="dark"]) body {
    background: radial-gradient(ellipse 70% 520px at 100% 0, rgba(244, 223, 166, .30), transparent 70%), #F5F5F7;
    background-attachment: fixed;
  }
  [data-theme="dark"] body {
    background: radial-gradient(ellipse 70% 520px at 100% 0, rgba(82, 105, 108, .22), transparent 70%), var(--bg);
    background-attachment: fixed;
  }

  /* ── pasek boczny: granat z logo, aktywna pozycja jako złota pigułka ── */
  .side { background: radial-gradient(ellipse at 100% 0, rgba(82, 105, 108, .35) 0, transparent 55%), linear-gradient(180deg, #17262F 0%, #0F1A22 100%); }
  .side-sec { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #7D8B95; }
  .nav-i { border-radius: 14px; color: #B9C3CA; font-size: 15px; transition: background-color .15s, color .15s; }
  .nav-i:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .nav-i.on { background: #F6E7BE; color: #3D2C0B; font-weight: 600; }
  .nav-i.on .ic { opacity: 1; color: #6B4E16; }
  .nav-i .cnt { font-family: var(--f-sans); font-weight: 600; font-size: 11px; background: rgba(255, 255, 255, .08); color: #D9C08A; }
  .nav-i.on .cnt { background: rgba(23, 35, 43, .1); color: #5A4111; }
  .pass-box { background: rgba(255, 255, 255, .06); border-radius: 18px; }
  .pass-box .t { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #8E9AA3; }

  /* ── nagłówek: biała pigułka ── */
  .top { border-radius: 26px; box-shadow: 0 2px 4px rgba(23, 35, 43, .03), 0 14px 34px -22px rgba(23, 35, 43, .22); }
  html:not([data-theme="dark"]) .top { background: rgba(255, 255, 255, .86); border-color: #ECE8DF; }
  .top .crumb { font-family: var(--f-sans); font-size: 12px; font-weight: 600; color: #8C939B; letter-spacing: .01em; }
  .top h1 { letter-spacing: -.02em; }

  /* ── karty: biel, zaokrąglenie 24 px, miękki cień ── */
  .card, .pl-blok, .view .zad, .view .kaz, .view .egz-wyb {
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(23, 35, 43, .03), 0 18px 40px -24px rgba(23, 35, 43, .16);
  }
  html:not([data-theme="dark"]) .card, html:not([data-theme="dark"]) .pl-blok { border-color: #ECE8DF; }
  .card-h h2, .pl-blok h3 { letter-spacing: -.02em; }

  /* ── etykiety: zwykły krój zamiast pisma maszynowego ──
     Aplikacja bierze krój maszynowy z --f-mono (132 miejsca), więc podmieniamy
     zmienną. Kod (pre, code, .kd) zostaje o stałej szerokości znaków. */
  :root { --f-mono: 'IBM Plex Sans', system-ui, sans-serif; }
  pre, code, .kd, .kd * { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; }
  .view .lab, .card-h .r, .pl-blok .r, .pl-dni small, .pl-proc-op, .pl-postep-t, .pl-blok h3 small {
    font-family: var(--f-sans) !important; letter-spacing: .02em; font-weight: 600;
  }
  .pl-teraz .lab { color: #E5C56E; letter-spacing: .04em; }

  /* ── pigułki i przyciski drugorzędne ── */
  .view .pill { font-family: var(--f-sans); border-radius: 999px; }
  .view .btn-g { border-color: #E3DED3; }
}