/* Lys = off-white (ejer-krav), mørk = #161616 (ejerens reference) — IKKE rent hvid/sort */
  :root{
    --bg:#FAF9F6;
    --surface:#FFFFFF;
    --ink:#262626;
    --gray:#8E8E8E;
    --line:#DBDBDB;
    --line2:#C7C7C7;
    --chip:#EEEDEA;
    /* Citat-chippen inde i en modtaget besked-boble: en tone MØRKERE end den lyse boble,
       og lysere end den mørke (se den mørke blok nedenfor). Samme effekt begge veje. */
    --qbg:rgba(0,0,0,.06);
    --inputbg:#F3F2EF;
    --red:#E0402F;
    --red-dark:#C4351F;
    --scrim:rgba(0,0,0,.4);
    --modal-scrim:rgba(0,0,0,.28);
    --toastbg:#262626;
    --toastink:#FFFFFF;
    --glass:rgba(250,249,246,.6);
    --glass-brd:rgba(0,0,0,.08);
    --tab-hi:rgba(0,0,0,.07);
  }
  @media(prefers-color-scheme:dark){
    :root{
      --bg:#161616;
      --surface:#1E1E1E;
      --ink:#F5F5F5;
      --gray:#A8A8A8;
      --line:#2C2C2C;
      --line2:#3C3C3C;
      --chip:#292929;
      --qbg:rgba(255,255,255,.07);
      --inputbg:#1E1E1E;
      --scrim:rgba(0,0,0,.6);
      --modal-scrim:rgba(0,0,0,.5);
      --toastbg:#3A3A3A;
      --toastink:#FFFFFF;
      --glass:rgba(30,30,32,.55);
      --glass-brd:rgba(255,255,255,.12);
      --tab-hi:rgba(255,255,255,.15);
    }
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    min-height:100dvh;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  button,input,textarea,select,a{touch-action:manipulation}
  button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;-webkit-tap-highlight-color:transparent}
  input,textarea{font:inherit;color:inherit}
  img{-webkit-user-drag:none}
  :focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

  .stroke{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .fillic{fill:currentColor;stroke:none}

  /* ================= Avatar (fælles helper) ================= */
  .av{
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;overflow:hidden;
    object-fit:cover;
    color:#fff;font-weight:700;line-height:1;
    flex:0 0 auto;
  }

  /* ================= App-ramme ================= */
  .phone{
    position:relative;
    width:100%;
    height:100dvh;
    overflow:hidden;
    background:var(--bg);
  }
  @media(min-width:700px){
    .phone{
      max-width:680px;margin:0 auto;
      border-left:1px solid var(--line);
      border-right:1px solid var(--line);
    }
  }
  .app{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg);display:flex;flex-direction:column;position:relative;z-index:1;overscroll-behavior:none}
  /* Pull-to-refresh: spinner bag #app, øverst i .phone — vises når #app glider ned */
  .ptr{
    position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 12px);z-index:0;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .15s ease;
  }
  .ptr-ring{
    width:26px;height:26px;border-radius:50%;
    border:2.5px solid var(--line);border-top-color:var(--red);
  }
  .ptr.loading .ptr-ring{animation:ptrspin .7s linear infinite}
  @keyframes ptrspin{to{transform:rotate(360deg)}}

  /* ================= Topbar ================= */
  .topbar{
    position:sticky;top:0;z-index:50;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;
    height:calc(52px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 16px 0;
    background:var(--bg);
    /* ingen streg under topbaren (ejer-krav: streg-frit look) */
    transition:transform .25s ease;
  }
  /* Skjul topbaren ved scroll ned — feedbar/søgehoved glider op til toppen */
  body.hidebar .topbar{transform:translateY(-100%)}
  body.hidebar .feedbar,body.hidebar .searchhead{top:env(safe-area-inset-top)}
  /* Blød fade under systemets statusbar/Dynamic Island — ENS på alle skærme. Farven er
     app-baggrunden → gennemsigtig: usynlig oven på en bjælke med samme baggrund (fx topbaren),
     men lader indhold der scroller op fade blødt ud i stedet for at "bleede" råt bag statusbaren. */
  .topfade{
    position:absolute;top:0;left:0;right:0;
    height:calc(env(safe-area-inset-top) + 8px);
    background:linear-gradient(to bottom, var(--bg) 58%, transparent);
    z-index:60;pointer-events:none;   /* over topbar/feedbar/indhold, men under profil/lightbox/ark (egen baggrund) */
  }
  /* Ordmærke som billede (theme-bevidst): sort i lys mode, hvidt i mørk mode. Teksten
     beholdes i DOM'en for skærmlæsere, men skjules visuelt. */
  /* Genvej til Ny kreds i topbarens HØJRE side. Topbarens space-between gør resten: logoet
     bliver liggende helt til venstre, præcis hvor det altid har været, og knappen lander
     modsat. Vises KUN på Beskeder (ejer-valg): på Hjem har kreds-baren allerede sin egen
     "+ Ny kreds"-pille, så to knapper til det samme ville støje. (switchTab sætter
     body[data-tab], så synligheden er ren CSS.) */
  .topnew{
    display:none;
    position:relative; /* bærer plus-badgen, som .cmtp-btn bærer lås-badgen */
    flex:0 0 auto;
    align-items:center;justify-content:center;
    width:26px;height:26px;
    color:var(--ink);
  }
  body[data-tab="chat"] .topnew{display:flex}
  .topnew > svg{width:24px;height:24px}
  .topnew svg .stroke{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  .topnew svg .fillic{fill:currentColor}
  /* Plus-badge i hjørnet, samme greb som .cmtp-lock: egen baggrund, så den står frit af kredsen */
  .topnew-plus{
    position:absolute;right:-4px;bottom:-3px;
    width:14px;height:14px;border-radius:50%;
    background:var(--bg);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
  }
  .topnew-plus svg{width:11px;height:11px}
  .topnew-plus svg .stroke{stroke-width:3.2}
  .topnew:active{opacity:.55}
  .wordmark{
    background-image:url(../img/logo-light.png);
    background-repeat:no-repeat;background-position:left center;background-size:contain;
    width:117px;height:24px;
    font-size:0;color:transparent;line-height:0;overflow:hidden;
  }
  @media (prefers-color-scheme: dark){ .wordmark{ background-image:url(../img/logo-dark.png); } }
  .wordmark .prik{display:none}
  .authview .wordmark,.langview .wordmark,.consentview .wordmark{width:214px;height:44px;margin:0 auto}

  /* ================= Stories ================= */
  .stories{
    display:flex;gap:12px;
    padding:10px 12px;
    overflow-x:auto;
    scrollbar-width:none;
    /* ingen streg under story-rækken (ejer-krav: streg-frit look) */
  }
  .stories::-webkit-scrollbar{display:none}
  /* Instagram-størrelse: 92px ring, avataren fylder hele boblen (avaHTML(…, 80) i profile.js følger med) */
  .story{flex:0 0 auto;width:96px;text-align:center}
  .story .bub{
    margin:0 auto;border-radius:50%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .story .lbl{
    display:block;
    margin-top:6px;font-size:12px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .story .plusb{
    position:absolute;right:1px;bottom:1px;
    width:26px;height:26px;border-radius:50%;
    background:var(--red);color:#fff;
    border:3px solid var(--bg);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;line-height:1;
  }
  /* Story-ringe: farvet = uset, grå = set; egen uden story = ingen ring (transparent) */
  .story .ringwrap{
    width:92px;height:92px;border-radius:50%;padding:3.5px;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;
  }
  .story.unseen .ringwrap{background:linear-gradient(90deg,#ff3130,#ff6a3d,#ffa14e)}
  .story.seen .ringwrap{background:#c7c7cc}
  .story .ringwrap .bub{width:100%;height:100%;border:3px solid var(--bg);box-sizing:border-box}

  /* ================= Story-viewer (fuldskærm) ================= */
  .storyview{position:fixed;inset:0;z-index:200;background:#000;display:block;opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.05);transition:opacity .22s ease, visibility .22s ease, transform .22s cubic-bezier(.32,.72,.25,1)}
  .storyview.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .storyview .sv-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  /* Storyen FYLDER hele skærmen (9:16-format; cover beskærer evt. gamle 4:5-stories) */
  .storyview .sv-media img,.storyview .sv-media video{width:100%;height:100%;object-fit:cover}
  /* Sikkerhedsnet: indlæsnings-prik indtil mediet er klar (i stedet for helt sort). */
  .storyview .sv-loading{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:svspin .8s linear infinite;pointer-events:none;transition:opacity .2s ease}
  .storyview .sv-media.loaded .sv-loading{opacity:0}
  @keyframes svspin{to{transform:rotate(360deg)}}
  /* Slet egen story: skraldespand i headeren; første tryk armerer ("Slet?"), andet sletter */
  .sv-del{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    color:#fff;padding:6px;margin-right:2px;
  }
  .sv-del svg{width:19px;height:19px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
  .sv-del.arm{
    background:var(--red);border-radius:999px;
    padding:6px 14px;font-size:13.5px;font-weight:800;
  }
  /* Anmeld/blokér på ANDRES stories: samme ⋯ som på opslag, i story-headeren */
  .sv-more{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    color:#fff;padding:6px;margin-right:2px;
  }
  .sv-more svg{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
  /* Menuen ligger INDE i vieweren (som seer-listen), så den kommer over storyen.
     Den arver hele .modal.sheet-glasset fra web-modalerne. */
  .storyview .modal{z-index:6}
  .storyview .sv-bars{
    position:absolute;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;
    display:flex;gap:4px;z-index:3;
  }
  .storyview .sv-bar{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
  .storyview .sv-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
  .storyview .sv-bar.done i{width:100%}
  /* Bjælken er PAUSET indtil mediet er synligt (.storyview.playing) — så de 6 sek ikke
     løber mens storyen stadig loader. */
  .storyview .sv-bar.active i{animation:svfill 6s linear forwards;animation-play-state:paused}
  .storyview.playing .sv-bar.active i{animation-play-state:running}
  @keyframes svfill{from{width:0}to{width:100%}}
  .storyview .sv-head{
    position:absolute;top:calc(20px + env(safe-area-inset-top));left:12px;right:12px;
    display:flex;align-items:center;gap:9px;z-index:3;color:#fff;
  }
  .storyview .sv-head .sv-ava img,.storyview .sv-head .sv-ava > div{width:30px;height:30px;border-radius:50%}
  .storyview .sv-name{flex:1;font-size:14px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}
  .storyview .sv-close{color:#fff;font-size:22px;line-height:1;padding:4px 10px}
  /* Navn + evt. kreds-kchip i en kolonne; kchip'en er samme pille som på feedet, i mørk glas-udgave */
  .storyview .sv-hcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
  .storyview .sv-hcol .sv-name{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .storyview .kchip{background:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  /* "Set af N" (kun egne stories): øje + tal nederst til venstre; tap åbner seer-listen */
  .sv-seen{
    position:absolute;left:14px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:3;
    display:flex;align-items:center;gap:7px;color:#fff;
    font-size:14px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.5);
  }
  .sv-seen svg{width:21px;height:21px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
  /* Seer-listen: mørkt bundkort over storyen (fremdriften er på pause imens) */
  .sv-vback{position:absolute;inset:0;z-index:4;background:rgba(0,0,0,.45)}
  .sv-viewers{
    position:absolute;left:0;right:0;bottom:0;z-index:5;
    background:#161616;color:#fff;
    border-radius:20px 20px 0 0;
    max-height:62%;display:flex;flex-direction:column;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .sv-viewers header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 10px;font-size:15px;font-weight:800}
  .sv-vx{color:#fff;font-size:18px;line-height:1;padding:2px 8px}
  .sv-vlist{overflow-y:auto;padding:0 14px 8px}
  .sv-vrow{display:flex;align-items:center;gap:11px;padding:8px 2px}
  .sv-vrow .vname{min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sv-vrow .vtime{margin-left:auto;flex:0 0 auto;color:rgba(255,255,255,.55);font-size:12.5px}
  .sv-vempty{padding:18px 4px 14px;color:rgba(255,255,255,.6);font-size:14px}
  .storyview .sv-tap{position:absolute;top:0;bottom:0;z-index:2;background:transparent}
  .storyview .sv-left{left:0;width:35%}
  .storyview .sv-right{right:0;width:65%}

  /* ================= Kreds-vælger ================= */
  .feedbar{
    position:sticky;top:calc(52px + env(safe-area-inset-top));z-index:45;
    display:flex;gap:8px;align-items:center;
    padding:9px 12px;
    overflow-x:auto;scrollbar-width:none;
    background:transparent;
    transition:top .25s ease;
  }
  .feedbar::-webkit-scrollbar{display:none}
  /* Liquid glass: matterede, gennemskinnelige piller der flyder over det fadede indhold */
  .fpill{
    flex:0 0 auto;
    border-radius:999px;
    padding:7px 15px;
    font-size:13.5px;font-weight:700;
    background:var(--glass);
    -webkit-backdrop-filter:blur(18px) saturate(1.7);
    backdrop-filter:blur(18px) saturate(1.7);
    border:1px solid var(--glass-brd);
    color:var(--ink);
    white-space:nowrap;
  }
  .fpill:active{opacity:.65}
  .fpill.on{background:var(--ink);color:var(--bg);border-color:transparent}
  .fpill.new{color:var(--red)}
  /* Ulæste opslag i en kreds: lille rød prik øverst til højre på pillen */
  .fpill{position:relative}
  .fpill .pdot{
    position:absolute;top:2px;right:4px;
    width:7px;height:7px;border-radius:50%;
    background:var(--red);
    pointer-events:none;
  }

  /* ---- Kreds-søgning i feedbaren ---- */
  .fbseek{
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    width:31px;height:31px;border-radius:50%;
    background:var(--glass);color:var(--gray);
    -webkit-backdrop-filter:blur(18px) saturate(1.7);
    backdrop-filter:blur(18px) saturate(1.7);
    border:1px solid var(--glass-brd);
  }
  .fbseek svg{width:16px;height:16px}
  .fbseek:active{opacity:.65}
  .feedbar.searching{flex-wrap:wrap;overflow-x:visible}
  .fbsearch{
    flex:1 1 100%;
    display:flex;align-items:center;gap:8px;
    background:var(--inputbg);
    border:1px solid var(--line);
    border-radius:10px;
    padding:7px 12px;
  }
  .fbsearch>svg{width:15px;height:15px;color:var(--gray);flex:0 0 auto}
  .fbsearch input{flex:1;min-width:0;border:none;background:transparent;font-size:16px}
  .fbsearch input:focus{outline:none}
  .fbsearch .fbx{display:flex;padding:2px;color:var(--gray)}
  .fbsearch .fbx svg{width:14px;height:14px}
  .fbpills{display:contents}
  .fbnone{font-size:13px;color:var(--gray);padding:3px 2px}

  .kredshead{
    display:flex;align-items:center;gap:11px;
    padding:12px 16px;
    cursor:pointer;
  }
  .kredshead:active{opacity:.7}
  .mstack{display:flex}
  .mav{border:2px solid var(--bg)}
  .mav+.mav{margin-left:-9px}
  .kredshead .ktxt{font-size:13px;color:var(--gray);line-height:1.35}
  .kredshead .ktxt b{color:var(--ink);font-weight:700;font-size:13.5px}

  /* ================= Views ================= */
  .view{display:none}
  /* Plads i bunden så sidste opslag kan scrolles fri af den svævende tabbar */
  .view.active{display:block;flex:1 0 auto;padding-bottom:calc(82px + env(safe-area-inset-bottom));animation:vfViewIn .22s ease}
  @keyframes vfViewIn{from{opacity:0}to{opacity:1}}
  /* Genbrugelig ind-toning (JS slår den til på profil-fanens indhold) */
  .vf-fadein{animation:vfViewIn .22s ease}

  /* ================= Timeline-post (X-anatomi: to kolonner) ================= */
  .post{
    display:flex;gap:10px;
    padding:12px 16px;
    /* Ingen skillelinje mellem opslag (ejer-ønske) — renere feed i alle visninger
       (hovedfeed, kreds-feed og profilens tanke-feed). */
  }
  /* Fastgjort-label (officielt opslag øverst i 'Hele kredsen') */
  .pinlabel{padding:10px 16px 0;font-size:12px;font-weight:700;color:var(--gray)}
  /* Flash-highlight når man hopper til et opslag (eller en kommentar) fra en notifikation */
  .post.flash{animation:postflash 1.6s ease}
  .crow.flash{animation:postflash 1.6s ease;border-radius:12px}
  @keyframes postflash{
    0%,100%{background:transparent}
    25%,60%{background:var(--chip)}
  }
  .post>.pavab{flex:0 0 auto;display:flex;padding:0;align-self:flex-start}
  .pcol{flex:1;min-width:0}

  /* ===== Reklame-kort (ligner et OPSLAG: profil-header + 300×250 MREC) =====
     Side-padding 10px så et 300px MREC-hul lige går op på iPhone SE (10+300+10=320pt).
     Kun skelettet er web; annoncen er den native MREC oven på .adhole. */
  .adslot{display:block;padding:12px 10px;border-bottom:1px solid var(--line)}
  .adslot.collapsed{display:none} /* intet fill → skjul hele kortet */
  /* Profil-header (ikke klikbar) — avatar + navn + "Annonce" + handle, som et opslag */
  .adhead2{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
  .adav{width:40px;height:40px;background:var(--red)}
  .adav svg{color:#fff}
  .adname{min-width:0;line-height:1.25}
  .adnrow{display:flex;align-items:center;gap:7px}
  .adnrow b{font-weight:700;font-size:15px;color:var(--ink)}
  .adannonce{
    font-size:11px;font-weight:700;color:var(--gray);
    border:1px solid var(--line2);border-radius:5px;padding:1px 6px;line-height:1.4
  }
  .adhandle{font-size:13px;color:var(--gray)}
  .adhole{
    position:relative;width:300px;height:250px;margin:0 auto;
    border-radius:14px;overflow:hidden;background:var(--chip)
  }
  /* Skeletten shimrer altid i hullet; den ugennemsigtige native-annonce dækker
     den når den vises, og den træder frem igen under scroll (annoncen skjules). */
  .adskel{
    position:absolute;inset:0;
    background:linear-gradient(100deg,var(--chip) 30%,var(--line) 50%,var(--chip) 70%);
    background-size:200% 100%;animation:adshimmer 1.3s ease-in-out infinite
  }
  @keyframes adshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  @media (prefers-reduced-motion: reduce){.adskel{animation:none}}

  .phead{display:flex;align-items:center;gap:5px;min-width:0}
  .phead .nm{font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
  .phead .badge{flex:0 0 auto;display:flex}
  .phead .badge svg{width:15px;height:15px}
  .phead .ph{color:var(--gray);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:28px}
  .phead .dots{margin-left:auto;color:var(--gray);padding:2px 0 2px 10px;flex:0 0 auto}
  .phead .dots svg{width:19px;height:19px}
  /* NY-mærke på nye/usete opslag (højrestillet i header-linjen før ⋯-knappen) */
  .phead .newchip{
    margin-left:auto;flex:0 0 auto;
    font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1;
    color:var(--red);background:var(--chip);
    border-radius:999px;
    padding:3px 7px;
  }
  .phead .newchip+.dots{margin-left:0}
  /* Kreds-mærke på opslag i "Hele kredsen" (lille pille: kreds-ikon + navn, tap = åbn kredsen) */
  .kchip{
    display:inline-flex;align-items:center;gap:4px;
    flex:0 1 auto;min-width:0;
    font-size:11.5px;font-weight:600;line-height:1;
    color:var(--gray);background:var(--chip);
    border-radius:999px;
    padding:3px 8px 3px 6px;
  }
  .kchip svg{width:12px;height:12px;flex:0 0 auto}
  .kchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
  .kchip:active{opacity:.6}
  /* Egen række ved handlingsrækken (kommentar/like/del) — ude af den klemte header.
     Tanker: lige OVER rækken. Minder: lige UNDER den (ejer-ønske). */
  .kchiprow{display:flex;padding:9px 0 0}
  .post.memory .mbelow .kchiprow{padding:10px 0 0}

  .ptext{padding:1px 0 0;font-size:14px;color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word}

  .pmedia{
    position:relative;
    margin-top:9px;
    border-radius:16px;
    border:1px solid var(--line);
    overflow:hidden;
    background:var(--chip);
    transition:opacity .12s ease;
  }
  .pmedia:active{opacity:.82}
  /* Minde-billeder må IKKE dæmpes/få skygge når man rører dem (enkelt-tryk gør intet,
     man pincher for at zoome). Tryk-dæmp beholdes kun på tanke-medier (tap = åbn). */
  .post.memory .pmedia:active{opacity:1}
  .pmedia img,.pmedia video{
    display:block;width:100%;max-height:510px;object-fit:cover;
    -webkit-touch-callout:none;
    -webkit-user-select:none;user-select:none;
  }
  /* Lille lyd-prik i hjørnet af feed-videoer (Instagram-agtigt) */
  .vsound{
    position:absolute;right:10px;bottom:10px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .vsound svg{width:16px;height:16px}
  .vsound:active{opacity:.7}
  .bigheart{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
  }
  .bigheart svg{
    width:88px;height:88px;fill:#fff;stroke:none;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
    opacity:0;
  }
  .bigheart.go svg{animation:bigpop .9s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes bigpop{
    0%{opacity:0;transform:scale(.35)}
    18%{opacity:.95;transform:scale(1.12)}
    45%{opacity:.95;transform:scale(1)}
    78%{opacity:.95;transform:scale(1)}
    100%{opacity:0;transform:scale(.9) translateY(-10px)}
  }
  /* ---------- Minde (Instagram-agtigt: header ØVERST, fuld-bleed medie, handlinger, så
     billedtekst UNDER klippet til 2 linjer med "Se mere", derefter kommentarer) ---------- */
  .post.memory{display:block;padding:0;gap:0}
  /* Header: avatar + navn/dato + ⋯ (fuld bredde over billedet, egen side-margin) */
  .post.memory .mhead{display:flex;align-items:center;gap:10px;padding:11px 14px 10px}
  .post.memory .mhead .mava{flex:0 0 auto;padding:0;border-radius:50%}
  .post.memory .mhcol{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
  .post.memory .mhrow{display:flex;align-items:center;gap:5px;min-width:0}
  .post.memory .mhrow .nm{
    font-weight:700;font-size:14.5px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;
  }
  .post.memory .mhrow .badge{flex:0 0 auto;display:flex}
  .post.memory .mhrow .badge svg{width:15px;height:15px}
  .post.memory .mdate{
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);
  }
  /* NY-mærket: identisk pille som på en tanke (.phead .newchip) */
  .post.memory .mhead .newchip{
    margin-left:auto;flex:0 0 auto;
    font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1;
    color:var(--red);background:var(--chip);
    border-radius:999px;padding:3px 7px;
  }
  .post.memory .mhead .dots{margin-left:auto;color:var(--gray);padding:2px 0 2px 8px;flex:0 0 auto}
  .post.memory .mhead .newchip+.dots{margin-left:8px}
  .post.memory .mhead .dots svg{width:19px;height:19px}
  /* Fuld-bleed medie ud til kortets kant — HELE billedet uden beskæring (ejerens valg) */
  .post.memory .mmedia{
    position:relative;margin:0;border:0;border-radius:0;
    overflow:hidden;background:#000;
  }
  .post.memory .mmedia img,.post.memory .mmedia video{
    display:block;width:100%;height:auto;max-height:none;object-fit:contain;
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
  /* Handlinger + billedtekst + kommentarer under mediet, med normal side-margin */
  .post.memory .mbelow{padding:8px 16px 12px}
  /* Billedtekst i normal skrift (opret, ikke kursiv — som en tanke), klippet til 2 linjer indtil
     "Se mere". Ekstra top-margin giver luft mellem handlingsknapperne og teksten. */
  .post.memory .mcap{margin-top:12px}
  .post.memory .mcap .ptext.cap{
    display:block;padding:0;margin:0;
    font-size:14px;line-height:1.45;color:var(--ink);
    white-space:pre-wrap;overflow-wrap:break-word;
  }
  .post.memory .mcap:not(.open) .ptext.cap{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .post.memory .cap-more{
    display:none;margin-top:3px;
    font-size:13px;font-weight:600;color:var(--gray);
  }
  .post.memory .mcap.has-more .cap-more{display:block}
  .post.memory .cap-more:active{opacity:.5}
  /* Handlingsknapper samlet tæt til venstre (Instagram-stil), rækkefølge: hjerte, kommentar, del */
  .post.memory .pactions{justify-content:flex-start;gap:20px}
  .post.memory .pactions .save-btn{order:4;margin-left:auto} /* sidst i order-rækken (1/2/3), yderst th. */
  .save-btn.on{color:var(--ink)}
  .save-btn.on svg path{fill:var(--ink);stroke:var(--ink)}
  .post.memory .like-btn{order:1}
  .post.memory .cmt-btn{order:2}
  .post.memory .cmtp-btn{order:2} /* privat-kommentar (lås) lige efter kommentar-ikonet */
  .post.memory .share-btn{order:3}
  /* Privat kommentar på et kreds-minde: kommentar-boble med lille lås-badge */
  .cmtp-btn{position:relative}
  .cmtp-lock{
    position:absolute;right:-4px;bottom:-3px;
    width:14px;height:14px;border-radius:50%;
    background:var(--bg);color:var(--gray);
    display:flex;align-items:center;justify-content:center;
  }
  .cmtp-lock svg{width:9px;height:9px}
  /* Minde-compose: ingen afstemning */
  .compose.memory #pollbtn{display:none}
  /* Minde-format (browser-fallback): 1:1/4:5-piller + center-beskåret preview */
  .mem-format{display:flex;gap:8px;margin:0 0 8px}
  .mem-format[hidden]{display:none}
  .mf-btn{
    padding:7px 16px;border-radius:999px;
    font-size:13.5px;font-weight:700;color:var(--gray);
    background:var(--chip);
  }
  .mf-btn:active{opacity:.6}
  .mf-btn.on{background:var(--red);color:#fff}
  #attach-img.memcrop{width:100%;object-fit:cover}
  #attach-img.memcrop.a11{aspect-ratio:1/1}
  #attach-img.memcrop.a45{aspect-ratio:4/5}
  /* Profil: toggle (Alt/Minder) + 3-kolonne minde-grid */
  /* Instagram-agtige profil-faner: ikoner i fuld bredde med streg under den aktive */
  .profbar{display:flex}
  .profbar-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0 11px;color:var(--gray);position:relative}
  .profbar-btn.on{color:var(--ink)}
  .profbar-btn.on::after{content:"";position:absolute;left:26%;right:26%;bottom:-1px;height:2px;background:var(--ink)}
  .profbar-btn:active{opacity:.6}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px 0}
  .pgrid-item{position:relative;display:block;aspect-ratio:1;background:var(--chip);overflow:hidden}
  .pgrid-item img,.pgrid-item video{width:100%;height:100%;object-fit:cover;display:block}
  .pgrid-item:active{opacity:.82}
  .pgrid-play{position:absolute;top:7px;right:7px;width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
  /* Kreds-minde i grid'et: lille lås (opslaget bor i en privat kreds) */
  .pgrid-lock{position:absolute;top:6px;left:6px;display:flex;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
  .pgrid-lock svg{width:14px;height:14px}
  .post.flash{animation:postflash 1.4s ease}
  @keyframes postflash{0%,100%{background:transparent}22%{background:var(--tab-hi)}}
  .tl-back{display:flex;align-items:center;gap:5px;padding:11px 14px;color:var(--ink);font-weight:700;font-size:14.5px;border-bottom:1px solid var(--line)}
  .tl-back:active{opacity:.6}

  .pactions{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 0 0;
    color:var(--gray);
  }
  .pactions button{display:flex;align-items:center;gap:5px;color:var(--gray);padding:0}
  .pactions svg{width:21px;height:21px}
  .pactions .cnt{font-size:13px;color:var(--gray);line-height:1}
  .pactions button:active{opacity:.5}
  .like-btn.on{color:var(--red)}
  .like-btn.on .cnt{color:var(--red)}
  .like-btn.on svg path{fill:var(--red);stroke:var(--red)}
  .like-btn.on svg{animation:pop .3s ease}
  @keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}

  /* ---------- Meningsmåling ---------- */
  .pollwrap{padding:6px 0 0}
  .poll-opt{
    display:block;width:100%;
    border:1px solid var(--line2);border-radius:8px;
    padding:9px 12px;margin-top:6px;
    font-size:14px;font-weight:600;color:var(--ink);
    text-align:left;background:none;
  }
  .poll-opt:active{opacity:.6}
  .poll-res{
    position:relative;display:flex;align-items:center;gap:8px;
    width:100%;overflow:hidden;
    border:1px solid var(--line);border-radius:8px;
    padding:9px 12px;margin-top:6px;
    text-align:left;background:none;
  }
  /* Afgjort governance-afstemning: resultat-rækkerne er statiske <div>, ikke knapper */
  div.poll-res{cursor:default}
  .poll-res .pfill{position:absolute;left:0;top:0;bottom:0;background:var(--chip)}
  .poll-res .ptxt{position:relative;flex:1;min-width:0;font-size:14px;color:var(--ink);overflow-wrap:break-word;display:flex;align-items:center;gap:6px}
  .poll-res.mine .ptxt{font-weight:700}
  .poll-res .pcheck{width:14px;height:14px;flex:0 0 auto}
  .poll-res .ppct{position:relative;flex:0 0 auto;font-size:13px;font-weight:700;color:var(--gray)}
  .pollmeta{padding:7px 0 0;font-size:12.5px;color:var(--gray)}
  /* Governance-afstemning: kun en label (ingen ramme), i primær tekstfarve */
  .gov-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px;font-weight:800;color:var(--ink);letter-spacing:.02em}
  /* Live optagelses-afstemning (målpersonens boks i Notifikationer) */
  #admvotes:empty{display:none}
  .admvote{margin:12px 16px 18px;padding:12px 14px;background:var(--chip);border-radius:14px}
  .admvote.done{opacity:.65}
  .adm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14.5px}
  .adm-countdown{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--red)}
  .adm-done{flex:0 0 auto;font-size:12.5px;font-weight:800}
  .adm-done.ok{color:var(--ink)}
  .adm-done.no{color:var(--gray)}
  .adm-tally{margin-top:6px;font-size:13px;color:var(--gray)}
  .adm-bar{margin-top:8px;height:8px;border-radius:999px;background:var(--chip);overflow:hidden}
  .adm-bar span{display:block;height:100%;background:var(--red);transition:width .3s ease}

  /* ---------- Kommentartråd (inline, sammenklappet som standard) ---------- */
  .cmt-toggle{display:block;font-size:13px;font-weight:600;color:var(--gray);padding:9px 0 0;text-align:left}
  .cthread{padding:4px 0 0}
  .crow{display:flex;gap:9px;padding:6px 0;align-items:flex-start}
  .crow.cnest{padding-left:10px}
  /* Kommentator-avataren er en knap (åbner profilen) — samme mønster som post-avatarer */
  .crow>.pavab{flex:0 0 auto;display:flex;padding:0}
  .crow .cbody{flex:1;min-width:0}
  .crow .ctext{font-size:13px;color:var(--ink);overflow-wrap:break-word}
  .crow .ctext b{font-weight:700;font-size:12.5px;margin-right:5px}
  .crow .ctext .cat{color:var(--red);font-weight:600}
  /* @-mention i opslag/captions/kommentarer: klikbart handle i brand-farven */
  .mention{display:inline;padding:0;font:inherit;color:var(--red);font-weight:700}
  .mention:active{opacity:.6}
  /* @-autocomplete: VANDRET chip-strip (matcher det native minde-sheets tag-vælger) —
     store touch-venlige piller m. avatar + @navn der scroller side til side, OVER feltet */
  .mdrop{
    display:none;position:fixed;z-index:260;
    overflow-x:auto;overflow-y:hidden;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:6px;border-radius:999px;
    background:var(--bg);border:1px solid var(--line);
    box-shadow:0 8px 28px rgba(0,0,0,.16);
  }
  .mdrop::-webkit-scrollbar{display:none;width:0;height:0}
  .mitem{
    display:inline-flex;align-items:center;gap:7px;vertical-align:top;
    padding:5px 13px 5px 6px;margin-right:6px;border-radius:999px;
    background:var(--chip);font-size:13.5px;font-weight:700;color:var(--ink);
  }
  .mitem:last-child{margin-right:0}
  .mitem:active{opacity:.6}
  .mitem .av{flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;object-fit:cover}
  .cimg{display:block;margin-top:5px;max-height:180px;max-width:70%;border-radius:8px;object-fit:cover;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .cmeta{display:flex;align-items:center;gap:12px;margin-top:3px;font-size:12px;color:var(--gray)}
  .cmeta .csvar{font-size:12px;font-weight:700;color:var(--gray);padding:0}
  .cmeta .cdel{font-size:12px;font-weight:700;color:var(--gray);padding:0}
  .cmeta .cdel.confirm{color:var(--red)}
  .cmeta .likec{margin-left:auto;padding:2px;color:var(--gray)}
  .likec svg{width:14px;height:14px;display:block}
  .likec.on{color:var(--red)}
  .likec.on svg path{fill:var(--red);stroke:var(--red)}
  .cbox{padding:8px 0 0}
  .cchiprow{padding:0 0 6px}
  .cchip{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--chip);border-radius:999px;
    padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink);
  }
  .cchip .cchip-x{padding:0 2px;color:var(--gray);font-size:13px;line-height:1}
  .cprevrow{padding:2px 0 8px}
  .cprev{position:relative;display:inline-block}
  .cprev img{display:block;width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
  .cprev .cprev-x{
    position:absolute;top:-6px;right:-6px;
    width:18px;height:18px;border-radius:50%;
    background:var(--toastbg);color:var(--toastink);
    font-size:11px;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  .ccomposer{display:flex;align-items:center;gap:9px}
  .ccomposer .cfield{flex:1;min-width:0;border:none;background:transparent;font-size:16px;padding:3px 0}
  .ccomposer .cfield:focus{outline:none}
  .ccomposer .cimgb{color:var(--gray);display:flex;padding:2px}
  .ccomposer .cimgb svg{width:20px;height:20px}
  .ccomposer .csend{color:var(--red);font-weight:800;font-size:14px}
  .ccomposer .csend:disabled{opacity:.35;cursor:default}

  /* ---------- Du er helt opdateret ---------- */
  .caughtup{
    text-align:center;
    padding:36px 20px 60px;
  }
  .caughtup .ring{
    width:80px;height:80px;border-radius:50%;
    margin:0 auto 14px;
    padding:3px;
    background:linear-gradient(45deg,#FF9A3E,#E0402F,#B8288F);
  }
  .caughtup .inner{
    width:100%;height:100%;border-radius:50%;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
  }
  .caughtup .inner svg{width:36px;height:36px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .caughtup h3{font-size:15px;font-weight:700;color:var(--ink)}
  .caughtup p{font-size:13.5px;color:var(--gray);margin-top:4px}

  /* ================= Søg ================= */
  /* Ingen streg under søge-headeren (ejer-krav: streg-frit look) */
  .searchhead{
    padding:12px 16px 10px;position:sticky;top:calc(52px + env(safe-area-inset-top));z-index:40;
    background:var(--bg);
    transition:top .25s ease;
  }
  /* Fælles søgefelt-look (Søg-fanen OG Beskeder): stort, blødt gråt felt uden kant */
  .searchbox{
    display:flex;align-items:center;gap:10px;
    background:var(--chip);
    border-radius:15px;
    padding:13px 14px;
  }
  .searchbox svg{width:19px;height:19px;color:var(--gray);flex:0 0 auto}
  .searchbox input{flex:1;min-width:0;border:none;background:transparent;font-size:16px}
  .searchbox input:focus{outline:none}
  .listrow{display:flex;align-items:center;gap:12px;padding:11px 16px}
  .listrow.tap{cursor:pointer}
  .listrow.tap:active{opacity:.7}
  .listrow .grow{flex:1;min-width:0;line-height:1.3}
  .listrow .l1{font-weight:700;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:4px}
  .listrow .l1 svg{width:14px;height:14px}
  .listrow .l2{font-size:13.5px;color:var(--gray)}
  /* "Inviter en ven": øverste række på de lister hvor man leder efter folk. Plus i stedet
     for avatar, så den ikke kan forveksles med en ven, men samme højde som de andre. */
  .inviteav{background:var(--chip);color:var(--red);flex:0 0 auto}
  .inviteav svg{width:22px;height:22px}
  .inviteav svg .stroke{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  .inviterow .l1{color:var(--red)}
  .sectionlabel{font-size:16px;font-weight:700;padding:14px 16px 6px;color:var(--ink)}
  .addaction{color:var(--red);font-weight:700;font-size:14px;text-align:left}
  .addaction.pending{color:var(--gray)}
  .emptynote{padding:18px 16px;color:var(--gray);font-size:14px}

  /* ================= Notifikationer ================= */
  .pagetitle{font-size:19px;font-weight:800;color:var(--ink);padding:12px 16px 8px}
  /* (topbar-stregen er nu fjernet globalt — chat-særreglen er overflødig) */
  .notif{
    display:flex;align-items:center;gap:12px;
    padding:11px 16px;
  }
  .notif[data-pid],.notif[data-friend]{cursor:pointer}
  .notif[data-pid]:active,.notif[data-friend]:active{opacity:.7}
  .notif .grow{flex:1;min-width:0}
  .notif .ntext{font-size:14px;color:var(--ink);line-height:1.4}
  .notif .ntext b{font-weight:700}
  .notif .nt{color:var(--gray)}
  .notif .nsnip{font-size:13.5px;color:var(--gray);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .notif .nicon{flex:0 0 auto;display:flex;color:var(--gray)}
  .notif .nicon.kvote{color:var(--red)} /* afstemnings-notifikation skiller sig ud */
  .notif .nicon svg{width:18px;height:18px}
  .notif .nicon.heart{color:var(--red)}
  .notif .nicon.heart svg path{fill:var(--red);stroke:var(--red)}
  .notif .nicon.bubble{color:var(--gray)}
  .notif .nicon.friend{color:var(--red)}
  .notif .nicon.kpost{color:var(--red)}
  .notif .nicon.mention{color:var(--red)}
  /* Ulæste notifikationer (siden sidste åbning af fanen): rød prik + tonet række */
  .notif.unread{background:var(--chip)}
  .notif.unread .ntext{font-weight:600}
  .notif .udot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--red)}
  .notif.kreq,.notif.kinv{align-items:flex-start}
  .notif .kbtns{display:flex;gap:8px;margin-top:7px}
  .kbtn{
    border-radius:999px;
    padding:6px 14px;
    font-size:13px;font-weight:700;
    background:var(--chip);color:var(--ink);
  }
  .kbtn.kap,.kbtn.kacc{background:var(--red);color:#fff}
  .kbtn:active{opacity:.75}
  .kbtn:disabled{opacity:.5;cursor:default}

  /* ================= Profil ================= */
  /* ---- Profil-banner (YouTube-agtigt; skjult når profilen ikke har et) ----
     Fuld bredde helt til toppen af indholdet (ingen margin/afrunding) og en blød
     fade i bunden ind i baggrundsfarven. */
  .pbanner{
    display:none;
    position:relative;
    height:130px;overflow:hidden;
    background:var(--chip);
  }
  .pbanner.on{display:block}
  .pbanner img{width:100%;height:100%;object-fit:cover;display:block}
  .pbanner::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
    background:linear-gradient(180deg, rgba(0,0,0,0), var(--bg));
    pointer-events:none;
  }
  /* Med banner: profilbilledet overlapper bannerets nederste kant (YouTube/X-agtigt)
     med en ring i baggrundsfarven, og tallene lander lige under banneret */
  .phead-own.withban{margin-top:-40px;align-items:flex-end;padding-top:0;position:relative}
  .phead-own.withban>span:first-child,
  .phead-own.withban>div:first-child{
    border-radius:50%;
    border:4px solid var(--bg);
    background:var(--bg);
    margin-left:-4px;
  }
  /* Banner-forhåndsvisning i Rediger profil (browser-sheetet): afrundet kort UDEN fade */
  .ep-banwrap{padding:12px 16px 0}
  .ep-banwrap .pbanner{display:block;margin:0 0 8px;height:84px;border-radius:12px}
  .ep-banwrap .pbanner::after{display:none}
  .ep-banwrap .pic{font-size:14px;font-weight:700;color:var(--red);padding:4px 0}

  .phead-own{display:flex;align-items:center;gap:16px;padding:16px 16px 10px}
  /* Venner/Kredse-tallene er tap-bare (åbner liste-sheetet) */
  .stat[data-l]{cursor:pointer}
  .stat[data-l]:active{opacity:.6}
  /* ---- Liste-sheet: venner/kredse ---- */
  .lrow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;text-align:left}
  .lrow:active{background:var(--chip)}
  .lcol{display:flex;flex-direction:column;min-width:0}
  .lnm{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lh{font-size:13px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lki{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--chip);color:var(--gray);flex:0 0 auto}
  .lki svg{width:20px;height:20px}
  .lnote{padding:2px 16px 8px;font-size:12.5px;color:var(--gray)}
  .lrow.go{cursor:pointer}
  /* Anmod-knap på kredse man ikke er med i */
  .lreq{
    flex:0 0 auto;margin-left:auto;
    padding:8px 14px;border-radius:999px;
    background:var(--red);color:#fff;
    font-size:13px;font-weight:700;
  }
  .lreq.sent{background:var(--chip);color:var(--gray)}
  .lreq:active{opacity:.7}
  .pstats{display:flex;flex:1;min-width:0;gap:4px;justify-content:space-around;text-align:center}
  .pstats .stat{flex:1;min-width:0}
  .pstats .stat b{display:block;font-size:18px;font-weight:800;color:var(--ink);line-height:1.2}
  .pstats .stat span{font-size:12.5px;color:var(--gray);white-space:nowrap}
  .pinfo{padding:0 16px 12px}
  .pinfo .n{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:5px}
  .pinfo .n svg{width:15px;height:15px}
  .pinfo .h{font-size:13.5px;color:var(--gray)}
  .pinfo .bio{font-size:14.5px;color:var(--ink);margin-top:6px;white-space:pre-wrap}
  .pinfo .since{font-size:14px;color:var(--gray);margin-top:6px}
  .pv-add{
    display:inline-flex;align-items:center;
    margin-top:10px;
    background:var(--red);color:#fff;
    border-radius:999px;
    padding:7px 16px;
    font-size:13px;font-weight:700;
  }
  .pv-add:active{opacity:.8}
  .pv-add.done,.pv-add:disabled{background:var(--chip);color:var(--gray);cursor:default;opacity:1}
  /* Sendt ven-anmodning: dæmpet, men stadig klikbar (tryk = fortryd) */
  .pv-add.pending{background:var(--chip);color:var(--gray);cursor:pointer;opacity:1}
  /* "Se aktivitet"-chip på ven-profilen */
  .pv-actbtn{
    display:inline-flex;align-items:center;
    margin-top:10px;margin-left:8px;
    background:var(--chip);color:var(--ink);
    border-radius:999px;
    padding:7px 16px;
    font-size:13px;font-weight:700;
  }
  .pv-actbtn:active{opacity:.7}
  .pv-actbtn:disabled{opacity:.5;cursor:default}
  /* "Fjern ven" — lille grå tekst-knap under relations-linjen på ven-profilen */
  .pv-unfriend{
    display:block;
    margin-top:10px;padding:2px 0;
    font-size:13px;font-weight:600;color:var(--gray);
    text-align:left;
  }
  .pv-unfriend:active{opacity:.6}
  /* Tre knapper på én række blev trange, da "Inviter venner" kom til: de lange danske ord
     havde kun 7 px luft i hver side, og på sprog med længere ord (russisk "Редактировать
     профиль", vietnamesisk "Chỉnh sửa trang cá nhân") blev teksten klippet.
     wrap gør rækken selvregulerende: knapperne deler pladsen efter deres eget indhold, og de
     sprog der ikke kan være på én linje, får en ekstra række i stedet for afhuggede ord. */
  .pbtns{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
  .chipbtn{
    flex:1 1 auto;min-width:0;
    background:var(--chip);
    border-radius:8px;
    padding:8px 10px;
    font-weight:700;font-size:13px;
    color:var(--ink);
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; /* sidste værn, hvis selv en hel række er for smal */
  }
  .chipbtn:active{opacity:.7}

  /* ================= Tabbar (flydende liquid glass) ================= */
  /* Svævende, matteret pille; indhold glider bag den. Krymper ved scroll ned (body.hidebar),
     vokser igen ved scroll op — samme scroll-retningstilstand som skjuler topbaren. */
  .tabbar{
    position:fixed;z-index:50;
    left:16px;right:16px;
    bottom:max(8px, calc(env(safe-area-inset-bottom) - 8px));
    display:flex;align-items:center;
    height:58px;
    padding:0 6px;
    background:var(--glass);
    -webkit-backdrop-filter:blur(24px) saturate(1.8);
    backdrop-filter:blur(24px) saturate(1.8);
    border:1px solid var(--glass-brd);
    border-radius:999px;
    box-shadow:0 6px 24px rgba(0,0,0,.16);
    transform-origin:bottom center;
    transition:transform .28s cubic-bezier(.32,.72,.25,1);
  }
  body.hidebar .tabbar{transform:scale(.86)}
  /* I app'en overtager de native Liquid Glass-barer — skjul web-tabbaren OG kreds-baren helt
     (også søgningen er native nu). */
  body.native .tabbar{display:none}
  body.native .feedbar{display:none}
  /* Plads i toppen af feedet til den svævende native kreds-bar */
  body.native #view-feed{padding-top:56px}
  /* De native glas-sheets erstatter web-sheet'et i app'en → skjul web-#fsheet/#msheet
     (klasserne nfs/nms sættes af main.js når __vfFsheet/__vfMemberSheet er sat). */
  /* (nfs/nms-skjulningen er væk: Ny kreds + Medlemmer er hele sider overalt) */
  /* Ny kreds + Medlemmer: helt STREG-FRIE sider (ingen linje under headeren) */
  #fsheet .pv-head, #msheet .pv-head{border-bottom:none}
  body.nep #esheet{display:none}
  .tabbar button{
    position:relative;
    flex:1;
    display:flex;align-items:center;justify-content:center;
    height:100%;
    color:var(--ink);
  }
  /* Aktiv fane: ÉN glidende indikator-pille bag ikonerne. Position + bredde sættes i JS
     (moveTabIndicator); transform-transition giver den fjedrende "swish" mellem faner. */
  .tab-ind{
    position:absolute;top:50%;left:0;height:44px;
    border-radius:999px;background:var(--tab-hi);
    transform:translateY(-50%);
    opacity:0;
    transition:transform .4s cubic-bezier(.34,1.28,.5,1), width .4s cubic-bezier(.34,1.28,.5,1);
    pointer-events:none;
  }
  .tabbar button svg{position:relative;z-index:1}
  /* Notifikations-prik (session-only) øverst til højre på hjerte-fanen */
  .tabdot{
    position:absolute;top:15px;left:calc(50% + 7px);
    width:8px;height:8px;border-radius:50%;
    background:var(--red);
    display:none;pointer-events:none;
  }
  .tabdot.on{display:block}
  .tabbar button:active{opacity:.55}
  .tabbar svg{width:26px;height:26px}
  .tabava{
    width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }

  /* ================= Overlays ================= */
  .scrim{
    position:absolute;inset:0;z-index:80;
    background:var(--scrim);
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .scrim.on{opacity:1;pointer-events:auto}

  /* ---- Sheet-fælles ---- */
  .cmt-grab{width:38px;height:4px;border-radius:2px;background:var(--line2);margin:8px auto 6px}
  .cmt-title{
    text-align:center;font-weight:700;font-size:15px;color:var(--ink);
    padding-bottom:10px;border-bottom:1px solid var(--line);
  }

  /* ---- Ny kreds / Rediger profil (sheets) ---- */
  .fsheet{
    position:absolute;left:0;right:0;bottom:0;z-index:86;
    max-height:80%;
    background:var(--surface);
    border:1px solid var(--line);border-bottom:none;
    border-radius:16px 16px 0 0;
    transform:translateY(105%);
    transition:transform .28s cubic-bezier(.32,.72,.25,1);
    display:flex;flex-direction:column;
  }
  .fsheet.on{transform:translateY(0)}
  .fs-name{
    margin:10px 16px 2px;
    display:flex;align-items:center;
    /* Samme look som søgefeltet i Beskeder: blødt gråt felt uden kant */
    background:var(--chip);
    border:none;
    border-radius:15px;
    padding:13px 14px;
  }
  .fs-name input{flex:1;min-width:0;border:none;background:transparent;font-size:16px;font-weight:600}
  .fs-name input:focus{outline:none}
  .fs-name textarea{flex:1;min-width:0;border:none;background:transparent;font-size:16px;resize:none;line-height:1.35}
  .fs-name textarea:focus{outline:none}
  .fs-label{font-size:12.5px;font-weight:700;color:var(--gray);padding:14px 18px 2px;text-transform:uppercase;letter-spacing:.05em}
  .fs-labelrow{display:flex;align-items:flex-end;justify-content:space-between;padding-right:16px}
  /* Styreform-vælger i "Ny kreds" */
  .fs-gov{display:flex;gap:8px;padding:4px 18px}
  .fs-govbtn{flex:1;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--gray);font-size:13.5px;font-weight:700}
  .fs-govbtn.on{border-color:var(--red);color:var(--red);background:var(--chip)}
  .fs-govbtn:active{opacity:.7}
  /* "Ejeren bestemmer"-note i medlemmer-arket */
  .ms-govnote{margin:2px 16px 10px;padding:9px 12px;border-radius:12px;background:var(--chip);color:var(--ink);font-size:13px;font-weight:700}
  .fs-all{
    flex:0 0 auto;
    background:var(--chip);color:var(--ink);
    border-radius:999px;
    padding:5px 12px;
    font-size:12.5px;font-weight:700;
  }
  .fs-all:active{opacity:.7}
  .fs-list{flex:1;overflow-y:auto;min-height:120px}
  .mcheck{
    width:24px;height:24px;border-radius:50%;
    border:2px solid var(--line2);
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .mcheck svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
  .listrow.sel .mcheck{background:var(--red);border-color:var(--red)}
  .listrow.sel .mcheck svg{opacity:1}
  .fs-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .fs-create{
    width:100%;
    background:var(--red);color:#fff;
    border-radius:8px;
    padding:12px 0;
    font-weight:700;font-size:15px;
  }
  .fs-create:disabled{opacity:.45;cursor:default}

  /* ---- Kredsens medlemmer (sheet) ---- */
  .ms-owner{
    background:var(--chip);color:var(--gray);
    border-radius:999px;
    padding:1px 8px;
    font-size:11px;font-weight:700;
  }
  .ms-btn{
    flex:0 0 auto;
    background:var(--chip);color:var(--gray);
    border-radius:999px;
    padding:6px 14px;
    font-size:13px;font-weight:700;
  }
  .ms-btn.add{color:var(--red)}
  /* Allerede inviteret: dæmpet status-tekst "Invitation sendt ✓" + evt. Fortryd-knap (inviter/ejer) */
  .ms-sent{flex:0 0 auto;color:var(--gray);font-size:12px;font-weight:700;white-space:nowrap}
  .ms-btn.cancel{background:none;color:var(--red);padding:6px 2px}
  .ms-btn:active{opacity:.7}
  .ms-btn:disabled{opacity:.5;cursor:default}
  .ms-leavezone{margin-top:14px;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
  .ms-leave{color:var(--red);font-size:14px;font-weight:700;text-align:left;padding:0}
  .ms-confirmtxt{font-size:13.5px;color:var(--gray);line-height:1.45;padding-bottom:12px}

  /* ---- Skriv (compose) ---- */
  .compose{
    position:absolute;inset:0;z-index:90;
    background:var(--bg);
    transform:translateY(103%);
    transition:transform .3s cubic-bezier(.32,.72,.25,1);
    display:flex;flex-direction:column;
  }
  .compose.on{transform:translateY(0)}
  .compose-head{
    display:flex;align-items:center;
    height:calc(52px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 16px 0;
    border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  .compose-head .cancel{font-size:15px;color:var(--ink);flex:0 0 auto}
  .compose-head .ctitle{flex:1;text-align:center;font-weight:700;font-size:16px;color:var(--ink)}
  .compose-head .postbtn{
    color:var(--red);
    font-weight:800;font-size:15px;
    flex:0 0 auto;
    padding:4px 0;
    transition:transform .12s ease;
  }
  .compose-head .postbtn:active:not(:disabled){transform:scale(.9)}
  .compose-head .postbtn:disabled{opacity:.4;cursor:default}
  .compose-dest{
    display:flex;gap:8px;align-items:center;
    padding:10px 16px;
    overflow-x:auto;scrollbar-width:none;
    flex:0 0 auto;
    border-bottom:1px solid var(--line);
  }
  .compose-dest::-webkit-scrollbar{display:none}
  .dlabel{font-size:13px;color:var(--gray);font-weight:700;flex:0 0 auto}
  .compose-body{flex:1;overflow-y:auto;display:flex;gap:11px;padding:12px 16px 16px}
  .compose-body .col{flex:1;min-width:0}
  .compose-body textarea{
    width:100%;
    border:none;resize:none;
    min-height:120px;
    font-size:19px;line-height:1.4;
    background:transparent;
    padding-top:8px;
  }
  .compose-body textarea:focus{outline:none}
  .attach{
    position:relative;
    margin-top:6px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--line);
    display:none;
  }
  .attach.on{display:block}
  .attach img,.attach video{display:block;width:100%;max-height:320px;object-fit:cover;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .attach button{
    position:absolute;top:8px;right:8px;
    width:30px;height:30px;border-radius:50%;
    background:rgba(0,0,0,.65);color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .attach button svg{width:15px;height:15px;stroke-width:2.4}
  .compose-foot{
    display:flex;align-items:center;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    gap:16px;
  }
  .compose-foot .imgbtn{color:var(--red)}
  .compose-foot .imgbtn svg{width:23px;height:23px}
  .compose-foot .spacer{flex:1}
  .charring{position:relative;width:26px;height:26px}
  .charring svg{width:26px;height:26px;transform:rotate(-90deg)}
  .charring .track{fill:none;stroke:var(--line2);stroke-width:2.5}
  .charring .prog{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round}
  .charring .left{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:700;color:var(--gray);
    opacity:0;
  }
  .charring.warn .left{opacity:1}

  /* ---- Poll-editor (compose) ---- */
  .pollbox{margin-top:4px}
  .pe-row{
    display:flex;align-items:center;gap:8px;
    background:var(--inputbg);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    margin-top:8px;
  }
  .pe-row input{flex:1;min-width:0;border:none;background:transparent;font-size:16px}
  .pe-row input:focus{outline:none}
  .pe-rm{flex:0 0 auto;color:var(--gray);font-size:14px;line-height:1;padding:2px 4px}
  .pe-add{display:block;color:var(--red);font-weight:700;font-size:14px;padding:10px 2px 0;text-align:left}
  .pe-off{display:block;color:var(--gray);font-weight:600;font-size:13px;padding:8px 2px 0;text-align:left}

  /* ---- Centreret popup (modal) ---- */
  .modal{
    position:absolute;inset:0;z-index:120;
    background:var(--scrim);
    display:flex;align-items:center;justify-content:center;
    padding:28px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;   /* symmetrisk fade ind/ud */
  }
  .modal.on{opacity:1;visibility:visible;pointer-events:auto}
  /* Basis-kort (ét frostet glas-kort): bruges af #mediamenu + #delmodal (tekstfelt).
     Report/opslag-menu/fjern-ven bruger .modal.sheet nedenfor (grupperede glas-"pills"). */
  .modal-card{
    width:100%;max-width:320px;
    background:var(--glass);
    -webkit-backdrop-filter:blur(24px) saturate(1.6);
    backdrop-filter:blur(24px) saturate(1.6);
    border:1px solid var(--glass-brd);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.18);
    transform:scale(.96) translateY(8px);
    transition:transform .2s cubic-bezier(.32,.72,.25,1);   /* løfter sig ind/ud sammen med fade */
  }
  .modal.on .modal-card{transform:none}
  .mrow{
    display:block;width:100%;
    padding:14px 16px;
    font-size:15px;font-weight:600;color:var(--ink);
    text-align:center;
    border-top:1px solid var(--glass-brd);
  }
  .mrow:first-child{border-top:none}
  .mrow:active{background:var(--tab-hi)}
  .mrow.danger{color:var(--red);font-weight:700}
  .mtitle{padding:18px 16px 4px;text-align:center;font-weight:700;font-size:16px;color:var(--ink)}
  .mtitle+.mrow{margin-top:8px;border-top:1px solid var(--glass-brd)}
  .mtext{padding:6px 18px 14px;text-align:center;font-size:13.5px;color:var(--gray);line-height:1.45}
  .mfoot{padding:0 16px 16px}

  /* ---- Liquid Glass "action sheet" (report / opslag-menu / fjern ven) ----
     Fungerer præcis som web-modalen (samme 2-trins-flow + id'er), men ser ud som
     iOS 26: et centreret kort af grupperede glas-"pills" — en handlings-gruppe og en
     separat "Annuller"-pille med mellemrum — over et dæmpet-men-synligt feed. */
  .modal.sheet{background:var(--modal-scrim)}
  .modal.sheet .modal-card{
    max-width:300px;
    background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border:none;border-radius:0;box-shadow:none;overflow:visible;
    display:flex;flex-direction:column;gap:10px;
  }
  .modal.sheet .mstep{display:flex;flex-direction:column;gap:10px}
  /* De frostede glas-piller */
  .modal.sheet .mgroup,
  .modal.sheet .mcancel{
    background:var(--glass);
    -webkit-backdrop-filter:blur(30px) saturate(1.8);
    backdrop-filter:blur(30px) saturate(1.8);
    border:1px solid var(--glass-brd);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 14px 44px rgba(0,0,0,.22);
  }
  .modal.sheet .mcancel{font-weight:700;border-top:none}
  /* Rækker i en gruppe */
  .modal.sheet .mrow{padding:15px 18px;font-size:16px;border-top:1px solid var(--glass-brd)}
  .modal.sheet .mgroup>*:first-child{border-top:none}
  .modal.sheet .mprev+.mrow{border-top:none}
  /* Titel/note som gruppe-header (bekræftelses-trin) */
  .modal.sheet .mtitle{padding:16px 18px 4px}
  .modal.sheet .mtitle+.mrow{margin-top:0}
  .modal.sheet .mtext{padding:4px 18px 14px}
  /* Opslag-preview øverst i report-kortet (kun #rmenu) */
  .mprev{display:flex;align-items:center;gap:11px;padding:14px 16px;text-align:left;border-bottom:1px solid var(--glass-brd)}
  .mprev:empty{display:none}
  .mprev .av{flex:0 0 auto}
  .mprev-txt{display:flex;flex-direction:column;min-width:0;gap:2px}
  .mprev-nm{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mprev-snip{font-size:13px;color:var(--gray);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* ---- Rediger opslag (sheet) ---- */
  .ed-body{
    margin:10px 16px 0;
    background:var(--inputbg);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 14px;
  }
  .ed-body textarea{
    display:block;width:100%;
    border:none;background:transparent;resize:none;
    font-size:16px;line-height:1.35;
  }
  .ed-body textarea:focus{outline:none}
  .ed-hint{padding:8px 18px 0;font-size:13px;font-weight:600;color:var(--red)}

  /* ---- Rediger profil: "Del min aktivitet"-toggle (flad switch) ---- */
  .ep-actrow{padding:10px 16px 0}
  .eptoggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-size:15px;font-weight:600;color:var(--ink);
    cursor:pointer;
  }
  .eptoggle input{position:absolute;opacity:0;pointer-events:none}
  .epswitch{
    width:44px;height:26px;border-radius:999px;
    background:var(--line2);
    position:relative;flex:0 0 auto;
    transition:background .2s ease;
  }
  .epswitch::after{
    content:"";position:absolute;top:3px;left:3px;
    width:20px;height:20px;border-radius:50%;
    background:#fff;
    transition:transform .2s ease;
  }
  .eptoggle input:checked+.epswitch{background:var(--red)}
  .eptoggle input:checked+.epswitch::after{transform:translateX(18px)}
  .eptoggle input:focus-visible+.epswitch{outline:2px solid var(--red);outline-offset:2px}
  .ep-actnote{font-size:12.5px;color:var(--gray);margin-top:6px;line-height:1.4}

  /* ---- Rediger profil: avatar + slet konto ---- */
  .ep-avarow{display:flex;align-items:center;gap:14px;padding:12px 16px 0}
  .ep-avarow .pic{font-size:14px;font-weight:700;color:var(--red);text-align:left;padding:4px 0}
  .delzone{border-top:1px solid var(--line);margin-top:14px;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
  .del-open{color:var(--red);font-size:14px;font-weight:700;text-align:left;padding:0}
  .del-cancel{display:block;width:100%;text-align:center;color:var(--gray);font-weight:700;font-size:14px;margin-top:10px;padding:8px 0}

  /* ---- Ven-profil ---- */
  .profileview{
    position:absolute;inset:0;z-index:70;
    background:var(--bg);
    transform:translateX(103%);
    transition:transform .28s cubic-bezier(.32,.72,.25,1);
    display:flex;flex-direction:column;
  }
  .profileview.on{transform:translateX(0)}
  /* Minde-side: ét minde i fuld skærm — samme glid-ind fra højre som en profil, men et lag over
     (så den også kan lægge sig oven på en anden brugers profil). Genbruger .pv-head/.back/.t1/.pv-body. */
  .postview{
    position:absolute;inset:0;z-index:90;
    background:var(--bg);
    transform:translateX(103%);
    transition:transform .28s cubic-bezier(.32,.72,.25,1);
    display:flex;flex-direction:column;
  }
  .postview.on{transform:translateX(0)}
  .pv-head{
    display:flex;align-items:center;gap:16px;
    height:calc(52px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 12px 0;
    border-bottom:1px solid var(--line);
    background:var(--bg);
    flex:0 0 auto;
  }
  .pv-head .back{padding:6px;color:var(--ink)}
  .pv-head .back svg{width:22px;height:22px}
  .pv-head .t1{font-size:16px;font-weight:700;color:var(--ink);line-height:1.15}
  .pv-head .t2{font-size:12.5px;color:var(--gray)}
  .pv-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* ================= Beskeder (kreds-chat, Messenger-agtig) ================= */
  .chatrow{
    display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;text-align:left;
    /* long-press åbner tråd-menuen — iOS må ikke markere teksten imens */
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
  .chatrow:active{background:var(--chip)}
  .chatrow .lnm{font-size:16px}
  .chatrow .lcol{flex:1}
  /* Ulæst tråd: fed tekst + rød prik yderst til højre (Messenger-agtigt) */
  .chatrow.unread .lnm{font-weight:800}
  .chatrow.unread .lh{color:var(--ink);font-weight:600}
  .cv-udot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--red)}
  /* Kredsens "ansigt": én avatar, eller to stablede for grupper (Messenger-agtigt) */
  .chatava{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
  /* Privat tråd: lille lås-badge på avataren (kan aldrig få flere medlemmer) */
  .chatlock{
    position:absolute;right:-3px;bottom:-3px;
    width:17px;height:17px;border-radius:50%;
    background:var(--chip);color:var(--gray);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px var(--bg);
  }
  .chatlock svg{width:10px;height:10px}
  .cv-hava .chatlock{width:14px;height:14px;right:-2px;bottom:-2px}
  .cv-hava .chatlock svg{width:8px;height:8px}
  .chatava2 > :first-child{position:absolute;top:0;right:0}
  .chatava2 > :last-child{position:absolute;bottom:0;left:0;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
  .cv-hava{flex:0 0 auto;display:flex;margin-left:-6px}
  /* ⋯-knappen (tråd-menu) yderst til højre i tråd-headeren */
  .cv-hmenu{margin-left:auto;padding:8px 2px;color:var(--ink);display:flex}
  .cv-hmenu svg{width:22px;height:22px}
  .cv-hmenu:active{opacity:.6}
  /* Pin/mute-mærker på en liste-række */
  .cv-flag{flex:0 0 auto;display:flex;color:var(--gray)}
  .cv-flag svg{width:15px;height:15px}
  /* Søgefeltet øverst i Beskeder: selve feltet er det fælles .searchbox-look */
  .chat-search{padding:12px 16px 10px}
  /* Tråd-siden: under minde-siden (z-90), så et delt minde kan åbnes ovenpå */
  .chatview{z-index:85}
  /* En åben tråd er sin EGEN side: alt bagved skjules helt, så hverken feedet eller
     besked-listen skinner igennem mens tastaturet åbner/lukker */
  body.chat-open .app{visibility:hidden}
  /* ---- Tastatur-lås: dokumentet må ALDRIG kunne rulle mens en tråd er åben ----
     WKWebView krymper ikke layoutet når tastaturet åbner; den ruller sin ydre scroller
     for at "afsløre" det fokuserede felt bag tastaturet, og dét var hoppet i toppen.
     Modtrækket: gør dokumentet præcis lige så højt som det SYNLIGE område (--vvh, sat
     af js/chat.js allerede når feltet får fokus). Så er der hverken rulle-rum eller
     noget at afsløre, og headeren i toppen af .phone kan ikke flytte sig. Uden tastatur
     er --vvh ikke sat, og alt falder tilbage til de normale 100dvh. */
  html.chat-open, body.chat-open{
    height:var(--vvh, 100%);
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body.chat-open{position:fixed;top:0;left:0;right:0;width:100%}
  body.chat-open .phone{height:var(--vvh, 100dvh)}
  .chatview .pv-body{padding:12px 12px 6px;display:flex;flex-direction:column}
  .cv-msg{display:flex;gap:8px;align-items:flex-end;max-width:86%;margin-top:2px}
  .cv-msg.first{margin-top:12px}
  .cv-avasp{width:28px;flex:0 0 auto}
  .cv-msg.mine{align-self:flex-end;flex-direction:row-reverse}
  .cv-ava{flex:0 0 auto;padding:0;border-radius:50%}
  /* Avataren flugter med BOBLENS underkant, ikke med tids-linjen under den
     (rækken er align-items:flex-end, og tiden fylder ~18px i bunden af kolonnen) */
  .cv-msg .pavab.cv-ava{margin-bottom:18px}
  /* align-items er BÆRENDE: uden den strækkes boblen til kolonnens bredeste element
     (fx afsender-navnet), så boblen bliver længere end teksten */
  .cv-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .cv-msg.mine .cv-col{align-items:flex-end}
  .cv-nm{font-size:11.5px;font-weight:700;color:var(--gray);margin:0 0 2px 12px}
  .cv-bubble{
    background:var(--chip);color:var(--ink);
    border-radius:18px;padding:9px 13px;
    font-size:15px;line-height:1.35;
    overflow-wrap:anywhere;min-width:0; /* anywhere er BÆRENDE: break-word reducerer
       ikke min-content i flex, så lange ord uden mellemrum stak sidelæns ud */
    /* Uden dette får boblen sin bredde fra max-content og kan vokse UD OVER .cv-col:
       align-items:flex-start på forælderen begrænser den ikke. Almindelig tekst wrapper
       og skjuler problemet, men citat-chippens nowrap-tekst trak boblen ud af skærmen. */
    max-width:100%;
    display:flex;flex-direction:column;gap:6px;
    position:relative;z-index:1; /* boblen ligger FORAN citat-chippen (den grå bagved) */
  }
  .cv-msg.mine .cv-bubble{background:var(--red);color:#fff}
  .cv-text{white-space:pre-wrap}
  .cv-time{font-size:10.5px;color:var(--gray);margin:3px 12px 0}
  /* Gester: lodret scroll ejes af browseren, vandret swipe (Svar) af JS; ingen
     iOS-callout/markering på long-press — kopiering sker via menuen */
  .cv-msg{touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  /* Hop-til-citat: KUN selve boblen lyser op (lysstyrke-puls virker på både grå og rød) */
  .cv-bubble.flash{animation:bubflash 1.3s ease}
  @keyframes bubflash{0%,100%{filter:none}30%{filter:brightness(1.35)}60%{filter:brightness(1.12)}}
  /* Citat-svar (Messenger-agtigt): "Svar til Navn"-etiket + tydelig chip m. evt.
     miniature, som svar-boblen overlapper — tap på chippen hopper til beskeden */
  /* ---- Citat-svar: chippen ligger INDE i svarboblen ----
     Før lå den som tre løse lag ovenover boblen: en "Svar til X"-etiket, en grå chip i samme
     form og størrelse som en rigtig besked, og så selve svaret. Det læste som to beskeder
     frem for ét svar, og de 9 px overlap var for lidt til at binde dem sammen.
     Nu er det ét element: navnet står i citatet (etiketten er dermed overflødig), og
     baggrunden er en let tone af boblen selv, så den hører synligt til. Ingen streger. */
  .cv-quote{
    display:flex;align-items:center;gap:8px;
    width:100%;max-width:100%;min-width:0;
    background:var(--qbg);
    border:0;border-radius:12px;
    padding:6px 10px;margin:-1px 0 1px;
    text-align:left;color:inherit;
    overflow:hidden;
  }
  .cv-msg.mine .cv-quote{background:rgba(255,255,255,.18)} /* boblen er rød i begge temaer */
  .cv-quote:active{opacity:.7}
  .cv-qcol{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .cv-qnm{font-size:11.5px;font-weight:700;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cv-qthumb{width:30px;height:30px;border-radius:7px;object-fit:cover;flex:0 0 auto;display:block}
  .cv-qtxt{font-size:13px;opacity:.75;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  /* Reaktioner: grupperet emoji-pille der overlapper boblens hjørne */
  .cv-reacts{
    align-self:flex-start;
    margin:-7px 0 0 8px;position:relative;z-index:2; /* pillen ligger igen FORAN boblen */
    background:var(--bg);
    border:1.5px solid var(--line);
    border-radius:999px;padding:1.5px 7px;
    font-size:12px;line-height:1.5;
  }
  .cv-msg.mine .cv-reacts{align-self:flex-end;margin:-7px 8px 0 0}
  .cv-reacts b{font-size:11px;font-weight:700;color:var(--gray);margin-left:2px}
  /* Beskedens eget billede/video: uden boble-baggrund når det står alene */
  .cv-mimg{max-width:210px;max-height:280px;border-radius:14px;display:block}
  .cv-bubble.cv-bare{background:none;padding:0}
  /* ---- Besked-menuen (iMessage-anatomi): forankret ved boblen ---- */
  #cmenu.anchor{padding:0}
  #cmenu.anchor.on{display:block}
  #cmenu.anchor .modal-card{
    max-width:none;width:100%;height:100%;
    position:relative;display:block;gap:0;
  }
  .cmenu-pos{position:absolute;display:flex;flex-direction:column;gap:10px;max-width:280px;transform-origin:bottom center;transition:transform .18s cubic-bezier(.32,.72,.25,1), opacity .18s ease}
  #cmenu.anchor:not(.on) .cmenu-pos{transform:scale(.9);opacity:0}
  #cmenu.anchor.on .cmenu-pos{transform:none;opacity:1}
  .cmenu-pos.mine{align-items:flex-end}
  /* Emoji-pillen (reaktioner) lige over boblen */
  .cm-emojis{
    display:flex;gap:2px;width:max-content;
    background:var(--bg);border-radius:999px;padding:6px 9px;
    box-shadow:0 10px 32px rgba(0,0,0,.18);
  }
  .cm-emoji{font-size:23px;padding:5px 6px;border-radius:50%;line-height:1}
  .cm-emoji.on{background:var(--tab-hi)}
  .cm-emoji:active{transform:scale(1.3)}
  /* Det hvide handlings-kort med ikon-rækker */
  .cm-card{
    background:var(--bg);border-radius:16px;overflow:hidden;
    min-width:225px;
    box-shadow:0 14px 44px rgba(0,0,0,.22);
  }
  .cm-row{
    display:flex;align-items:center;gap:13px;width:100%;
    padding:12.5px 16px;font-size:15.5px;color:var(--ink);text-align:left;
    border-top:1px solid var(--line);
  }
  .cm-row:first-child{border-top:none}
  .cm-row svg{width:19px;height:19px;flex:0 0 auto}
  .cm-row.danger{color:var(--red)}
  .cm-row:active{background:var(--chip)}
  /* Set-kvitteringer: små avatarer under den sidste besked hvert medlem har læst
     (højst 10 + "+N" — tap åbner hele Set af-listen) */
  .cv-reads{display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:3px 2px 0;width:100%}
  .cv-reads:active{opacity:.6}
  .cv-read{display:flex}
  .cv-reads .av{box-shadow:0 0 0 2px var(--bg)}
  .cv-rmore{font-size:10.5px;font-weight:700;color:var(--gray);margin-left:2px}
  /* Person-rækker i liste-arket (Set af / Reaktioner, web-fallback) */
  .cm-prow{display:flex;align-items:center;gap:11px;padding:9px 16px;font-size:15px;color:var(--ink)}
  .cm-prow .cm-pn{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .cm-prow .cm-pe{flex:0 0 auto;font-size:18px}
  /* "Ulæste beskeder"-skillelinjen (fryses når tråden åbnes) */
  .cv-unread{
    display:flex;align-items:center;gap:10px;margin:14px 0 4px;
    color:var(--gray);font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.4px;
  }
  .cv-unread::before,.cv-unread::after{content:"";flex:1;height:1px;background:var(--line)}
  /* Minde-deling i en boble: miniature + "delte et minde" — tap åbner opslaget */
  /* ---- Delt minde i en besked ----
     Miniaturen var låst til 150×150, så et minde i højformat fik skåret top og bund af.
     Nu er kun BREDDEN fast, og højden følger mediets eget format (max-height klipper først
     ved det meget høje, hvor en fuld 9:16 ellers ville fylde en halv skærm). */
  .cv-share{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:0;color:inherit;text-align:left}
  .cv-share:active{opacity:.7}
  .cv-thumb{width:190px;height:auto;max-height:250px;object-fit:cover;border-radius:12px;display:block}
  .cv-sharetxt{font-size:13px;font-weight:600;opacity:.85}
  /* Med medie ligger etiketten OVENPÅ billedet i stedet for at bruge en hel linje under det. */
  .cv-share.has-media{position:relative;display:block}
  .cv-share.has-media .cv-sharetxt{
    position:absolute;left:8px;bottom:8px;
    background:rgba(0,0,0,.55);color:#fff;
    /* Rektangel med bløde hjørner, ikke en pille (ejer-ønske). Radius holdes under
       billedets egne 12 px, så etiketten ikke ser rundere ud end det den ligger på. */
    padding:4px 10px;border-radius:9px;
    font-size:11.5px;font-weight:700;opacity:1;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  /* Composer i bunden af tråden: blød skygge i stedet for en streg */
  .cv-composer{
    flex:0 0 auto;
    display:flex;align-items:flex-end;gap:10px; /* knapperne bliver i bunden når feltet vokser */
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg);
    box-shadow:0 -8px 20px rgba(0,0,0,.07);
  }
  /* Mørk: meget blødere og svagere end lys-skyggen — den skarpe kant var for markant */
  @media(prefers-color-scheme:dark){
    .cv-composer{box-shadow:0 -18px 40px rgba(0,0,0,.20)}
  }
  /* Nye beskeder glider blødt ind (kun den nyankomne boble — re-renders animerer ikke) */
  @keyframes cvMsgIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
  .cv-msg.msg-new{animation:cvMsgIn .32s cubic-bezier(.2,.8,.25,1) both}
  /* Svar-kontekst over composeren: miniature + "Du svarer på et minde fra X" + kryds */
  .cv-ctx{
    flex:0 0 auto;
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;
    background:var(--chip);
  }
  .cv-ctx[hidden]{display:none}
  .cv-ctxthumb{width:36px;height:36px;object-fit:cover;border-radius:8px;flex:0 0 auto;display:block}
  .cv-ctxtxt{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cv-ctxx{flex:0 0 auto;display:flex;color:var(--gray);padding:6px}
  .cv-ctxx svg{width:16px;height:16px}
  .cv-ctxx:active{opacity:.5}
  /* Læst/Ikke læst med småt under ens egen sidste besked */
  .cv-status{align-self:flex-end;font-size:10.5px;font-weight:600;color:var(--gray);margin:2px 6px 0}
  /* "X skriver ..." over composeren */
  .cv-typing{flex:0 0 auto;padding:2px 16px 5px;font-size:12px;color:var(--gray)}
  .cv-typing[hidden]{display:none}
  /* Plus-knappen: åbner minde-flowet i en kreds-tråd; dæmpet i en privat tråd
     (medier deles kun gennem en kreds) */
  #cv-plus{flex:0 0 auto;color:var(--red);padding:8px 2px;display:flex}
  #cv-plus svg{width:24px;height:24px}
  #cv-plus:active{opacity:.6}
  .chatview.dm #cv-plus{opacity:.3}
  /* Skrivefeltet vokser NEDAD mens man skriver (auto-grow i JS, max ~5 linjer) */
  .cv-composer textarea{
    flex:1;min-width:0;
    background:var(--chip);color:var(--ink);
    border:none;border-radius:20px;
    padding:11px 16px;font-size:15px;line-height:1.35;
    resize:none;max-height:118px;overflow-y:auto;
  }
  .cv-composer textarea:focus{outline:none}
  .cv-composer textarea::placeholder{color:var(--gray)}
  /* Tastaturet er åbent (JS pinner siden til den synlige viewport): tastaturet dækker
     hjemme-indikatoren, så safe-area-luften i bunden af composeren skal væk */
  .chatview.kb .cv-composer{padding-bottom:10px}
  #cv-send{flex:0 0 auto;color:var(--red);padding:8px 4px;display:flex}
  #cv-send svg{width:23px;height:23px}
  #cv-send:active{opacity:.6}

  /* ---- Live pinch-zoom på minde-billeder (fixed klon + dæmpet baggrund) ---- */
  .pz-dim{position:fixed;inset:0;z-index:240;background:#000;opacity:0;pointer-events:none}
  .pz-clone{position:fixed;z-index:241;object-fit:cover;pointer-events:none;will-change:transform}

  /* ---- Fuldskærms-lightbox (billede/video) ---- */
  /* Symmetrisk ind/ud: fade på baggrunden + let zoom på medie-scenen (samme begge veje). */
  .lightbox{
    position:fixed;inset:0;z-index:300; /* over alt — også tabbar og sheets */
    background:#000;
    display:block;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .lightbox.on{opacity:1;visibility:visible;pointer-events:auto}
  .lb-stage{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    transform:scale(.94);
    transition:transform .22s cubic-bezier(.32,.72,.25,1);
  }
  .lightbox.on .lb-stage{transform:none}
  .lb-stage img{
    max-width:100%;max-height:100%;object-fit:contain;
    will-change:transform;
    touch-action:none; /* gestures håndteres selv med Pointer Events */
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
  .lb-stage video{max-width:100%;max-height:100%;object-fit:contain}
  /* X-agtig viewer: rund tilbage-pil øverst tv. + lyd-knap og ⋯ øverst th. (samme mørke chip) */
  .lb-close,.lb-dots,.lb-sound{
    position:absolute;top:calc(10px + env(safe-area-inset-top));z-index:2;
    width:38px;height:38px;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .lb-close{left:12px}
  .lb-dots{right:12px}
  .lb-sound{right:62px}
  .lb-close svg,.lb-dots svg,.lb-sound svg{width:20px;height:20px}
  /* Info-overlay i bunden: forfatter, tekst (2 linjer), handlings-chips + kommentarfelt */
  .lb-info{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:26px 16px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.85) 100%);
    display:flex;flex-direction:column;gap:10px;
  }
  /* Zoomet ind = rent billede: overlay og knapper væk indtil der zoomes ud igen */
  .lightbox.zoomed .lb-info,.lightbox.zoomed .lb-dots{display:none}
  .lb-author{display:flex;align-items:center;gap:8px;min-width:0}
  .lb-author .badge{flex:0 0 auto;display:flex}
  .lb-author .badge svg{width:15px;height:15px}
  .lb-nm{font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
  .lb-h{font-size:13.5px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:28px}
  .lb-cap{
    font-size:14.5px;color:#fff;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .lb-actions{display:flex;gap:10px}
  .lb-chip{
    display:flex;align-items:center;gap:6px;
    padding:9px 14px;border-radius:999px;
    background:rgba(255,255,255,.16);color:#fff;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  .lb-chip svg{width:18px;height:18px}
  .lb-chip .lb-cnt{font-size:13.5px;font-weight:700}
  .lb-chip.on,.lb-chip.on .lb-cnt{color:var(--red)}
  .lb-chip.on svg path{fill:var(--red);stroke:var(--red)}
  .lb-chip:active{opacity:.7}
  /* Rækken spejler feedet: bogmærket yderst til højre (som .save-btn's order:4) */
  .lb-save{margin-left:auto}
  /* Privat-kommentar (lås) — samme badge-idé som feedets .cmtp-lock, i viewerens mørke look */
  .lb-cwrap{position:relative;display:flex}
  .lb-plock{
    position:absolute;right:-5px;bottom:-4px;
    width:13px;height:13px;border-radius:50%;
    background:#161616;color:#ddd;
    display:flex;align-items:center;justify-content:center;
  }
  .lb-plock svg{width:8px;height:8px}
  .lb-close:active{opacity:.7}
  .lb-lock{overflow:hidden !important} /* låser app/body-scroll mens lightboxen er åben */

  /* ---- Toast ---- */
  .toast{
    position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));z-index:310; /* over lightboxen (300), så feedback ikke skjules */
    transform:translateX(-50%) translateY(6px);
    background:var(--toastbg);color:var(--toastink);
    font-size:14px;font-weight:600;
    padding:11px 16px;border-radius:8px;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    max-width:86%;text-align:center;
  }
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  /* Fortryd-snackbar (anmeld): besked + Fortryd-knap, vises i 5 sek */
  .undobar{
    position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));z-index:311;
    transform:translateX(-50%) translateY(6px);
    display:flex;align-items:center;gap:12px;
    background:var(--toastbg);color:var(--toastink);
    font-size:14px;font-weight:600;
    padding:8px 8px 8px 16px;border-radius:10px;
    opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
    max-width:86%;
  }
  .undobar.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .undobar button{flex:0 0 auto;background:transparent;color:#ff8a7a;font-weight:800;font-size:14px;padding:5px 10px}
  .undobar button:active{opacity:.6}

  /* ---- Boot-splash (dækker den tomme app-skal ved (gen)indlæsning) ---- */
  .splash{
    position:absolute;inset:0;z-index:150;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .35s ease;
  }
  .splash.gone{opacity:0;pointer-events:none}
  /* Statisk brand på splashen (ejeren fravalgte animationen) */
  .sp-brand{display:flex;align-items:center;justify-content:center}
  .sp-name{
    background-image:url(../img/logo-light.png);
    background-repeat:no-repeat;background-position:center;background-size:contain;
    width:238px;height:49px;font-size:0;color:transparent;line-height:0;white-space:nowrap;
  }
  @media (prefers-color-scheme: dark){ .sp-name{ background-image:url(../img/logo-dark.png); } }
  .sp-dot{display:none}
  /* Sprog-skift direkte på login-skærmen (detekteres automatisk fra enheden ved første
     start — alle 32 sprog). Pillen viser koden; en usynlig <select> ligger ovenpå og
     åbner iOS' native sprogliste ved tap. */
  .auth-langwrap{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:1;display:inline-block}
  .auth-lang{
    padding:7px 14px;border-radius:999px;
    border:1px solid var(--line);color:var(--gray);
    font-size:13px;font-weight:800;letter-spacing:.04em;
  }
  .auth-langwrap:active .auth-lang{opacity:.6}
  .langsel-overlay{
    position:absolute;inset:0;opacity:0;width:100%;height:100%;
    -webkit-appearance:none;appearance:none;border:none;background:transparent;
    font-size:16px;
  }
  /* Sprogvælgeren i Rediger profil (web-arket): stil som inputfelterne */
  .langsel{
    width:100%;
    -webkit-appearance:none;appearance:none;
    background:var(--inputbg);color:var(--ink);
    border:1px solid var(--line);border-radius:12px;
    padding:11px 12px;font-size:15px;font-weight:600;
  }

  /* ---- Auth ---- */
  .authview{
    position:absolute;inset:0;z-index:200;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:calc(34px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom));
    overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, visibility .25s ease;
  }
  .authview.on{opacity:1;visibility:visible;pointer-events:auto}
  .authview .auth-inner{margin:auto;width:100%;max-width:420px}
  .authview .wordmark{font-size:44px;text-align:center}
  .auth-tag{text-align:center;color:var(--gray);font-size:14.5px;margin-top:6px}
  .auth-form{display:flex;flex-direction:column;gap:10px;margin-top:30px}
  .auth-form input{
    width:100%;
    background:var(--inputbg);
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px 14px;
    font-size:16px;
  }
  .auth-form input:focus{outline:2px solid var(--red);outline-offset:0}
  .auth-err{color:var(--red);font-size:13.5px;font-weight:600;text-align:center;min-height:19px;margin-top:2px}
  .auth-btn{
    background:var(--red);color:#fff;
    border-radius:8px;
    padding:12px 0;
    font-weight:700;font-size:15px;
    transition:transform .12s ease, opacity .12s ease;
  }
  .auth-btn:active:not(:disabled){transform:scale(.98);opacity:.9}
  .auth-btn:disabled{opacity:.5;cursor:default}
  .auth-alt{text-align:center;color:var(--gray);font-size:13px;margin-top:18px}
  .auth-alt button{color:var(--red);font-weight:700}
  /* Lille grå politik-linje under opret-knappen */
  .auth-policy{text-align:center;color:var(--gray);font-size:12.5px;line-height:1.45;margin-top:2px}
  .auth-policy:empty{display:none}
  .auth-policy a{color:var(--gray);text-decoration:underline}
  .auth-forgot{align-self:flex-end;color:var(--gray);font-size:13px;font-weight:600;padding:2px 2px;margin-top:-2px}
  .auth-note{text-align:center;color:var(--gray);font-size:14.5px;line-height:1.45;margin-bottom:4px}
  .auth-back{color:var(--gray);font-size:13px;font-weight:600;margin-top:10px}
  .auth-err.ok{color:var(--gray)}

  /* ---- Sprogvalg (første start — over authview) ---- */
  .langview{
    position:absolute;inset:0;z-index:250;
    background:var(--bg);
    display:none;
    flex-direction:column;
    align-items:center;
    padding:calc(34px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom));
  }
  .langview.on{display:flex}
  .langview .lang-inner{margin:auto;width:100%;max-width:420px;display:flex;flex-direction:column}
  .langview .wordmark{font-size:44px;text-align:center}
  .lang-tag{text-align:center;color:var(--gray);font-size:14.5px;margin:6px 0 30px}
  .lang-btn{
    background:var(--chip);color:var(--ink);
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 0;
    font-weight:700;font-size:17px;
    text-align:center;
    margin-bottom:12px;
  }
  .lang-btn:active{opacity:.7}

  /* ---- Reklame-samtykke (vises én gang — efter sprogvalget, under langview) ---- */
  .consentview{
    position:absolute;inset:0;z-index:240;
    background:var(--bg);
    display:none;
    flex-direction:column;
    align-items:center;
    padding:calc(34px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  .consentview.on{display:flex}
  .consentview .consent-inner{margin:auto;width:100%;max-width:420px;display:flex;flex-direction:column}
  .consentview .wordmark{font-size:44px;text-align:center}
  /* Reklame-valget som ARK over feedet (vises efter login/oprettelse — ikke en væg før appen) */
  .consentview.as-sheet{background:rgba(0,0,0,.45);justify-content:flex-end;padding:0}
  .consentview.as-sheet .consent-inner{
    margin:0;width:100%;max-width:none;
    background:var(--bg);border-radius:22px 22px 0 0;
    padding:24px 24px calc(20px + env(safe-area-inset-bottom));
  }
  .consentview.as-sheet.on .consent-inner{animation:consentup .34s cubic-bezier(.2,.8,.25,1)}
  .consentview.as-sheet .wordmark{display:none}
  .consentview.as-sheet .consent-title{margin-top:0}
  @keyframes consentup{from{transform:translateY(45%)}}
  .consent-title{text-align:center;font-weight:800;font-size:17px;color:var(--ink);margin-top:26px}
  .consent-text{text-align:center;color:var(--gray);font-size:14.5px;line-height:1.5;margin-top:8px}
  .consent-policy{
    display:block;text-align:center;
    color:var(--gray);font-size:13px;font-weight:600;
    text-decoration:underline;
    margin:10px 0 26px;
  }
  .consent-btn{
    background:var(--chip);color:var(--ink);
    border:1px solid var(--line);
    border-radius:10px;
    padding:15px 12px;
    font-weight:700;font-size:15.5px;
    text-align:center;
    margin-bottom:12px;
  }
  .consent-btn.primary{background:var(--red);color:#fff;border-color:var(--red)}
  /* Reklame-arket har et politik-link mellem tekst og knapper, der giver luften. Invitations-
     arket har ikke det link, så den første knap sad klods op ad teksten. */
  #inviteview .consent-btn.primary{margin-top:22px}
  /* ---- Blød ind OG ud (symmetrisk) ----
     Arket arvede display:none/flex fra reklame-arket: baggrunds-dæmpningen sprang frem på én
     gang mens selve arket gled op, og ved luk forsvandt begge dele brat. Her styres det med
     opacity+visibility i stedet, så dæmpningen fader og arket glider begge veje. visibility
     skifter først EFTER fade-out (forsinket transition), ellers ville arket forsvinde med det
     samme og tage animationen med sig. Ingen JS-timer involveret. */
  #inviteview{
    display:flex;opacity:0;visibility:hidden;
    /* pointer-events er bælte og seler: visibility skifter først EFTER fade-out, og skulle den
       transition af en eller anden grund ikke fyre, må et lukket ark alligevel aldrig ligge
       usynligt og opsnappe tryk fra listen bagved. */
    pointer-events:none;
    transition:opacity .26s ease, visibility 0s linear .26s;
  }
  #inviteview.on{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .26s ease, visibility 0s;
  }
  #inviteview .consent-inner{
    transform:translateY(45%);
    transition:transform .3s cubic-bezier(.2,.8,.25,1);
    animation:none; /* erstatter reklame-arkets consentup, som kun kan spille indad */
  }
  #inviteview.on .consent-inner{transform:translateY(0)}
  .consent-btn:active{opacity:.7}

  /* ---- Privatliv (Rediger profil): politik-link under samtykke-chips ---- */
  .ep-policyrow{padding:8px 18px 0}
  .ep-policyrow a{color:var(--gray);font-size:13px;font-weight:600;text-decoration:underline}

  /* ---- Sprog-chips (Rediger profil) ---- */
  .ep-langrow{display:flex;gap:8px;padding:8px 18px 4px}
  .langchip{
    flex:1;
    background:var(--chip);color:var(--ink);
    border-radius:8px;
    padding:9px 0;
    font-weight:700;font-size:14px;
    text-align:center;
  }
  .langchip:active{opacity:.7}
  .langchip.on{background:var(--ink);color:var(--bg)}

  /* ---- Ingen synlige scrollbars i appen (kun indikatoren skjules — scroll uændret) ---- */
  .app,.pv-body,.fs-list,.compose-body,.ep-scroll,.authview,.consentview,textarea{scrollbar-width:none;-ms-overflow-style:none}
  .app::-webkit-scrollbar,.pv-body::-webkit-scrollbar,.fs-list::-webkit-scrollbar,
  .compose-body::-webkit-scrollbar,.ep-scroll::-webkit-scrollbar,.authview::-webkit-scrollbar,.consentview::-webkit-scrollbar,textarea::-webkit-scrollbar{display:none;width:0;height:0}

  @media(prefers-reduced-motion:reduce){
    .fsheet,.compose,.profileview,.scrim,.toast,.topbar,.feedbar,.searchhead,.epswitch,.epswitch::after{transition:none}
    .bigheart.go svg,.like-btn.on svg,.post.flash,.crow.flash{animation:none}
    .bigheart.go svg{opacity:0}
    .post.flash,.crow.flash{background:var(--chip)}
  }