/* ===== Przełącznik motywu ===== */
  .theme-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #45484e;
    border-radius: 10px;
    background: #292c31;
    color: #dfe1e5;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  }

  .theme-toggle:hover {
    background: #32353b;
    border-color: #5a5d64;
    color: #fff;
  }

  .theme-toggle:active {
    transform: translateY(1px);
  }

  .theme-icon {
    width: 16px;
    height: 16px;
    flex: none;
  }

  .sun-icon { display: none; }
  body.light-theme .moon-icon { display: none; }
  body.light-theme .sun-icon { display: block; }

  /* ===== Light theme ===== */
  body.light-theme {
    --bg: #f1f2f4;
    --desk: #e5e7ea;
    --card: #ffffff;
    --card-2: #f8f8f9;
    --text: #202226;
    --muted: #666a72;
    --accent: #25272b;
    --accent-2: #55585f;
    --accent-text: #ffffff;
    --border: #d5d7db;
    --border-strong: #b9bcc2;
    --error: #55585f;
    --ok: #55585f;
    --red: #666970;

    background:
      radial-gradient(900px 420px at 50% -12%, rgba(0,0,0,.035), transparent 62%),
      linear-gradient(180deg, #f4f5f6 0%, #f1f2f4 55%, #eceef0 100%);
    color: var(--text);
    color-scheme: light;
  }

  body.light-theme::before {
    background:
      linear-gradient(rgba(0,0,0,.014) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.014) 1px, transparent 1px);
  }

  body.light-theme .topbar {
    background: rgba(255,255,255,.90);
    border-bottom-color: #d7d9dd;
    box-shadow: 0 6px 22px rgba(0,0,0,.06);
  }

  body.light-theme .brand {
    color: #202226;
  }

  body.light-theme .topbar .local {
    color: #666a72;
  }

  body.light-theme .theme-toggle {
    background: #f3f4f5;
    color: #34363a;
    border-color: #d0d2d6;
  }

  body.light-theme .theme-toggle:hover {
    background: #e9eaec;
    border-color: #bfc2c7;
    color: #111214;
  }

  body.light-theme .hero h1,
  body.light-theme .toolhead h1,
  body.light-theme .viewhead h1, body.light-theme .hero .xh1, body.light-theme .toolhead .xh1, body.light-theme .viewhead .xh1 {
    color: #202226;
    -webkit-text-fill-color: #202226;
    background: none;
  }

  body.light-theme .hero p,
  body.light-theme .toolhead p,
  body.light-theme .viewhead p,
  body.light-theme .tile p,
  body.light-theme .tile li,
  body.light-theme .facts p {
    color: #686c74;
  }

  body.light-theme .tile {
    background: #fff;
    border-color: #d7d9dd;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }

  body.light-theme .tile::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
  }

  body.light-theme .tile:hover {
    background: #fff;
    border-color: #b7bac0;
    box-shadow: 0 18px 34px rgba(0,0,0,.09);
  }

  body.light-theme .tile h2,
  body.light-theme .facts h3 {
    color: #292b2f;
  }

  body.light-theme .tile:hover h2,
  body.light-theme .tile .cta,
  body.light-theme a {
    color: #24262a;
  }

  body.light-theme .tile .art {
    background: #eceef0;
    border-bottom-color: #d8dade;
  }

  /* obudowa telefonu / laptopa na kafelkach: w ciemnym motywie jaśniejsza i z obrysem, żeby nie zlewała się z tłem */
  .tile .art .art-dev { fill: #3A4457; stroke: #8792A8; stroke-width: 1.6; }
  body.light-theme .tile .art .art-dev { fill: #1C2433; stroke: none; }

  body.light-theme .tile li::before {
    background: #858990;
  }

  body.light-theme .facts {
    border-top-color: #d4d6da;
  }

  body.light-theme .footer {
    background: #fafafa;
    border-top-color: #d7d9dd;
  }

  body.light-theme .footer .in {
    color: #777b82;
  }

  body.light-theme .card,
  body.light-theme .viewhead .vi {
    background: #fff;
    border-color: #d7d9dd;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
  }

  body.light-theme input[type=text],
  body.light-theme input[type=number],
  body.light-theme .toolbar input[type=number] {
    background: #fff;
    color: #24262a;
    border-color: #cfd2d7;
  }

  body.light-theme input[type=text]::placeholder,
  body.light-theme input[type=number]::placeholder {
    color: #9a9da3;
  }

  body.light-theme input[type=text]:focus,
  body.light-theme input[type=number]:focus {
    border-color: #858990;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
  }

  body.light-theme .hint,
  body.light-theme .row .count,
  body.light-theme .actionbar .count,
  body.light-theme .back {
    color: #777b82;
  }

  body.light-theme .back:hover {
    color: #24262a;
  }

  body.light-theme button.ghost,
  body.light-theme .ephead button,
  body.light-theme .mt .del {
    background: #f4f5f6;
    color: #3f4248;
    border-color: #d0d3d7;
  }

  body.light-theme button.ghost:hover:not(:disabled),
  body.light-theme .ephead button:hover:not(:disabled) {
    background: #e9eaec;
    border-color: #babdc3;
    color: #202226;
  }

  body.light-theme button:not(.ghost):not(.tool) {
    background: linear-gradient(180deg, #303237 0%, #202226 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
  }

  body.light-theme button:not(.ghost):not(.tool):hover:not(:disabled) {
    background: linear-gradient(180deg, #3a3c42 0%, #292b30 100%);
  }

  body.light-theme .dz {
    background:
      radial-gradient(circle at 50% 22%, rgba(0,0,0,.025), transparent 48%),
      #f8f8f9;
    border-color: #bfc2c7;
    box-shadow: 0 16px 34px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
  }

  body.light-theme .dz:hover {
    border-color: #858990;
  }

  body.light-theme .dz.over {
    background: #f2f3f4;
    border-color: #55585f;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
  }

  body.light-theme .dz-title,
  body.light-theme .dz-file {
    color: #282a2e;
  }

  body.light-theme .dz-link {
    color: #44474d;
  }

  body.light-theme .dz-art .dz-disc {
    fill: #e9eaec;
  }

  body.light-theme .dz-art .dz-paper {
    fill: #fff;
    stroke: #70737a;
  }

  body.light-theme .dz-art .dz-fold {
    stroke: #70737a;
  }

  body.light-theme .dz-art .dz-line {
    fill: #b2b5bb;
  }

  body.light-theme .dz-art .dz-badge {
    fill: #777a81;
  }

  body.light-theme #grid,
  body.light-theme #mgrid {
    gap: 16px;
  }

  body.light-theme .thumb,
  body.light-theme .mt {
    background: #fff;
    border-color: #d5d7db;
    box-shadow: 0 7px 16px rgba(0,0,0,.07);
  }

  body.light-theme .thumb:hover,
  body.light-theme .mt:hover {
    border-color: #b8bbc1;
  }

  body.light-theme .thumb.sel,
  body.light-theme .mt.lifted {
    background: #f0f1f3;
    border-color: #82858b;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
  }

  body.light-theme .thumb .badge,
  body.light-theme .mt .pos {
    background: #676a71;
  }

  body.light-theme .mt {
    border-bottom-color: #7d8086 !important;
  }

  body.light-theme .actionbar {
    border-top-color: #d4d6da;
    background: rgba(241,242,244,.88);
  }

  body.light-theme .workspace .toolbar,
  body.light-theme .appbar {
    background: rgba(255,255,255,.92);
    border-color: #d5d7db;
  }

  body.light-theme #etools {
    border-color: #d0d3d7;
    background: #f3f4f5;
  }

  body.light-theme #etools .tool {
    color: #646870;
    border-color: #d7d9dd;
  }

  body.light-theme #etools .tool:hover {
    background: #e9eaec;
    color: #25272b;
  }

  body.light-theme #etools .tool[aria-pressed="true"] {
    background: #303237;
    color: #fff;
  }

  body.light-theme .zoom {
    border-color: #d0d3d7;
    background: #f3f4f5;
  }

  body.light-theme .zoom span {
    color: #5e6269;
  }

  body.light-theme #estage {
    background:
      radial-gradient(circle at 50% 0%, rgba(0,0,0,.025), transparent 40%),
      #e1e3e6;
  }

  body.light-theme .ewrap {
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
  }

  body.light-theme #emsg {
    background: #303237;
    color: #fff;
  }

  body.light-theme #emsg.error,
  body.light-theme #emsg.ok {
    background: #3a3c41;
    color: #f3f4f5;
    border-color: #55585f;
  }

  body.light-theme .chip {
    background: #f6f7f8;
    border-color: #d3d5d9;
  }

  body.light-theme .chip small {
    color: #858990;
  }

  @media (max-width: 520px) {
    .theme-toggle {
      padding: 7px 9px;
      min-width: 38px;
    }
    .theme-toggle #themeLabel {
      display: none;
    }
  }