/* Basal reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: system-ui, sans-serif; background: #0b0f12; color:#e7ecef; }

/* Telefon-emulering på desktop */
.wrapper {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.phone {
  width: 100%;
  max-width: none;           /* ← skift til 690px hvis du vil */
  background: #0b0f12;
  border-left: 1px solid #1c2633;
  border-right: 1px solid #1c2633;
}

/* Kun på større enheder (PC + tablets) emulerer vi en smal telefonbredde.
   Heuristik: begge dimensioner “store” → undgår at ramme telefon i landscape. */
@media (min-width: 700px) and (min-height: 600px) {
  .phone {
    max-width: 414px;   /* skift til 690px hvis du vil vise “lang” telefon */
    margin: 0 auto;
  }
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: #10151d;
  border-bottom: 1px solid #1c2633;
  padding: 12px;
  display:flex; align-items:center; gap:8px;
}
.topbar h1 { font-size: 16px; margin:0; color:#cfe; }
.search { flex:1; }
.search input {
  width:100%; padding:10px; border-radius:10px;
  border:1px solid #243243; background:#0f141c; color:#eee;
}
/* (behold resten som før) */
.topbar h1 { font-size: 16px; margin:0; color:#cfe; line-height:1; }
.topbar img { display:block; }


/* Filter chips */
.filters { padding: 8px 12px; display:flex; gap:8px; overflow:auto; }
.chip {
  white-space: nowrap; padding:6px 10px; border-radius:999px;
  border:1px solid #2c3e52; background:#0f141c; color:#cfe; font-size:13px;
}
.chip.active { background:#223142; }

/* Listekort */
.list { padding: 12px; display:grid; gap:12px; }
.cardItem {
  background:#121821; border:1px solid #1b2736; border-radius:12px; padding:12px;
}
.cardItem h3 { margin:0 0 4px; font-size:16px; color:#fff; }
.meta { font-size:12px; color:#9ab; }

/* Enkelt-kort view */
.viewer-header {
  position: sticky; top: 0; z-index: 10;
  display:flex; align-items:center; gap:8px;
  background:#10151d; border-bottom:1px solid #1c2633; padding:10px 12px;
}
.viewer h2 { font-size:16px; margin:0; color:#fff; }
.btn { padding:8px 12px; border-radius:10px; border:1px solid #2c3e52; background:#223142; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }

/* Kort-indhold */
.ik { padding:12px; }
.ik-card {
  background: var(--ik-card, #0f141c);
  color: var(--ik-fg, #e7ecef);
  border: 1px solid var(--ik-border, #223142);
  border-radius: 12px;
  padding: 12px;
}