body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #fbfaf9;
      color: #333;
      padding-top: 70px;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      z-index: 1000;
    }
    header .logo img { height: 48px; }

    nav.breadcrumb {
      font-size: 14px;
      margin: 20px 0 0 0;
      padding-left: 20px;
    }
    nav.breadcrumb ol {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 5px;
    }
    nav.breadcrumb li::after {
      content: "›";
      margin: 0 5px;
      color: #666;
    }
    nav.breadcrumb li:last-child::after { content: ""; }
    nav.breadcrumb a { text-decoration: none; color: #0077cc; }
    nav.breadcrumb span { color: #555; }

    main {
      max-width: 900px;
      margin: 20px auto 50px auto;
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    h1 { color: #004aad; margin-bottom: 15px; }
    h2 { color: #222; margin-top: 25px; }

    .kriteria { margin-bottom: 40px; }
    .sub-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
      margin-top: 15px;
    }
    .sub-item {
      background: #f8f8f8;
      border-radius: 8px;
      padding: 10px;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      transition: transform 0.2s ease;
    }
    .sub-item:hover { transform: translateY(-3px); }
    .sub-item h3 { font-size: 1rem; margin-bottom: 8px; color: #004aad; }

    iframe {
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .download-btn {
      display: inline-block;
      background: #004aad;
      color: white;
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-weight: 600;
      margin: 4px 2px 0 2px;
      transition: background 0.2s ease;
      font-size: 0.9rem;
    }
    .download-btn:hover { background: #00327a; }

    nav.page-nav {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
    }
    nav.page-nav a {
      color: #004aad;
      text-decoration: none;
      font-weight: bold;
    }

    footer {
      background: #f3f4f6;
      text-align: center;
      padding: 12px 0;
      margin-top: 40px;
      font-size: 0.9rem;
      color: #666;
    }

    @media print {
      body {
        user-select: text !important;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
      }
    }

    /* =====================
      🧭 Breadcrumb
    ===================== */
    .breadcrumb {
      font-size: 14px;
      margin: 10px 0 0px 0;
      padding-left: 15px;
    }
    .breadcrumb ol {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 5px;
    }
    .breadcrumb li::after {
      content: "›";
      margin: 0 5px;
      color: #666;
    }
    .breadcrumb li:last-child::after {
      content: "";
    }
    .breadcrumb a {
      text-decoration: none;
      color: #0077cc;
    }
    .breadcrumb span {
      color: #555;
    }

    .note {
      background: #fffbe6;
      border-left: 4px solid #f4c542;
      padding: 10px 15px;
      margin: 20px 0;
      font-size: 14.5px;
      border-radius: 6px;
      color: #444;
    }
    .note strong {
      color: #333;
    }