/* ===== Sida: svart bakgrund + vit text ===== */
    body{
      max-width:1200px;
      margin:20px auto;
      padding:12px;
      font-family:system-ui,sans-serif;
      background:#0b0c0f;
      color:#fff;
    }
    a{color:#fff}
    a:hover{opacity:.9}

    .top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .top a{display:inline-block;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px;text-decoration:none;background:rgba(255,255,255,.06)}
    .top a:hover{background:rgba(255,255,255,.10)}

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
      gap:12px;
      align-items:start;
      margin-top:12px;

    }


    /* ===== Kortet: bilden + text under bilden ===== */
    .card{
.card{ background:#0f1116; }
    }
    .card a{display:block; color:inherit; text-decoration:none}
.card img{
  width:100%;
  height:auto;
  display:block;
  background:#0f1116;
}
.item { background:#0f1116; }
   /* TEXTEN UNDER THUMBNAILS: ska vara SVART */
    .meta{
      padding:10px;
      background:#f3f3f3;   /* ljus bakgrund bakom texten */
      color:#111;           /* svart text */
    }
    .meta small{opacity:.8}
.meta a { color:#111; }
.meta a:hover { opacity:.85; }


    .hp-badge{
      display:inline-block;
      margin-top:6px;
      padding:2px 8px;
      border:1px solid #bbb;
      border-radius:999px;
      font-size:12px;
      color:#111;
      background:#fff;
    }

    /* Pagination: mörk för att matcha sidan */
    .pagination{
      display:flex;
      gap:8px;
      justify-content:center;
      margin:18px 0;
      flex-wrap:wrap
    }
    .pagination a,.pagination span{
      border:1px solid rgba(255,255,255,.2);
      padding:6px 10px;
      border-radius:8px;
      text-decoration:none;
      color:#fff;
      background:rgba(255,255,255,.06);
    }
    .pagination span{opacity:.7}

    /* ===== Modal / AJAX lightbox: svart panel + vit text ===== */
    .hp-modal{
      position:fixed; inset:0;
      display:none;
      background:rgba(0,0,0,.78);
      z-index:9999;
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    .hp-modal[aria-hidden="false"]{display:flex;}

    .hp-modal__panel{
      width:min(960px, 100%);
      max-height:90vh;
      overflow:auto;
      background:#111;
      color:#fff;
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      box-shadow:0 18px 60px rgba(0,0,0,.55);
      position:relative;
    }
    .hp-modal__close{
      position:absolute; top:10px; right:10px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.10);
      color:#fff;
      border-radius:10px;
      padding:8px 10px;
      cursor:pointer;
    }
    .hp-modal__body{padding:14px;}
    .hp-modal__img{
      width:100%;
      height:auto;
      display:block;
      border-radius:10px;
      background:#000;
    }
    .hp-modal__meta{
      margin-top:12px;
      color:#ddd;
      font-size:14px;
      line-height:1.5;
    }
    .hp-modal__meta strong{color:#fff;}

    .hp-modal__actions{
      margin-top:10px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .hp-modal__actions a, .hp-modal__navbtn{
      display:inline-block;
      padding:8px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:10px;
      color:#fff;
      text-decoration:none;
      background:rgba(255,255,255,.06);
      cursor:pointer;
      user-select:none;
    }
    .hp-modal__actions a:hover, .hp-modal__navbtn:hover{background:rgba(255,255,255,.10)}
    .hp-modal__nav{display:flex;gap:10px;align-items:center}
    .hp-modal__navbtn[disabled]{opacity:.35;cursor:not-allowed}

    .hp-modal__loading{color:#fff;padding:22px;opacity:.9;font-size:14px}
    .hp-modal__error{
      color:#ffdede;
      padding:22px;
      background:#3b1111;
      border:1px solid #7a2a2a;
      border-radius:10px;
      margin:14px;
}