/* the BODY of a post (photos, video, a shared link) never makes the post taller than the screen (owner, 2026-10-24):
   the screen minus the card's header / text / Open Now / stats; the cards are zoomed 1.25 on a computer, 1 on a phone */
.dg-post { --dg-body: max(240px, min(500px, calc(80vh - 400px))); }
@media (max-width: 767px) { .dg-post { --dg-body: max(240px, min(500px, calc(100vh - 470px))); } }
/* Duegho posts (photo, video, text) = the poll post's card (ogapoll.css / ogapoll-core.css): same frame, same
   fonts (Poppins titles and names, Nunito text), same stats row; only the author line moves to the top. */
.dg-post .ogapoll-pc-author.dg-top { border-top: 0; border-bottom: .8px solid #E3EEF6; padding: 14px 20px 12px; }
.dg-text { padding: 14px 20px 12px; font-family: Nunito, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.45; color: #0B2C57; white-space: pre-line; }
/* ONE description style for every post (owner, 2026-10-24: like X / Facebook) — only a text on a background has its own */
.dg-text a, .dg-cm-text a { color: #1F7BC0; font-weight: 700; text-decoration: none; }
.dg-media { position: relative; }
.dg-media .ogapoll-pcover { border-radius: 0; margin: 0; }
.dg-count { position: absolute; top: 12px; right: 12px; background: rgba(11, 44, 87, .78); color: #fff; font: 700 12px Nunito, sans-serif; padding: 3px 10px; border-radius: 12px; }
.dg-dots { display: flex; gap: 5px; justify-content: center; padding: 8px 0 0; }
.dg-dots i { width: 6px; height: 6px; border-radius: 50%; background: #CFE6F5; }
.dg-dots i.on { background: #1F7BC0; }
.dg-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
.dg-dur { position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, .7); color: #fff; font: 700 12px Nunito, sans-serif; padding: 2px 8px; border-radius: 6px; }
/* the last comment + write a comment: in the timeline, on every post (polls too) */
.dg-cm { border-top: .8px solid #E3EEF6; padding: 10px 20px 4px; }
.dg-cm-all { font: 600 12px Nunito, sans-serif; color: #6C8098; text-decoration: none; }
.dg-cm-row { display: flex; gap: 10px; margin-top: 8px; }
.dg-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 12px Poppins, sans-serif; color: #fff; }
.dg-cm-bubble { background: #F3F8FC; border-radius: 14px; padding: 7px 12px; }
.dg-cm-name { font: 700 13px Poppins, sans-serif; color: #0B2C57; }
.dg-cm-text { font: 400 14px/1.4 Nunito, sans-serif; color: #0B2C57; }
.dg-cm-meta { font: 600 12px Nunito, sans-serif; color: #6C8098; margin: 3px 0 0 12px; display: flex; gap: 12px; align-items: center; }
.dg-cm-meta img { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.dg-cm-input { display: flex; gap: 10px; align-items: center; padding: 8px 20px 14px; }
.dg-cm-input input { flex: 1; border: .8px solid #CFE6F5; border-radius: 18px; padding: 8px 14px; font: 400 14px Nunito, sans-serif; color: #0B2C57; outline: none; }
.dg-cm-input input::placeholder { color: #6C8098; }
.dg-cm-input button { border: 0; background: none; padding: 0; }
.dg-cm-input button img { width: 22px; height: 22px; }
/* the 4 tabs = the mobile app's tab icons (Play Store screens): posts, grid, profile, # ; active red, others blue */
.posttabwrapper .nav-tabs .nav-link i { font-size: 26px; color: #1F7BC0; }
.posttabwrapper .nav-tabs .nav-link.active i { color: #E63329; }
.posttabwrapper .nav-tabs .nav-link.active { border-bottom-color: #E63329 !important; }
#logo img { height: 34px; width: auto; }
#logo .lg-mini { display: none; width: 34px; border-radius: 50%; }
@media (max-width: 360px) { #logo .lg-full { display: none; } #logo .lg-mini { display: inline-block; } }
/* Open Now: the template's .cardbtn (hover = navy), full width of the card */
.ogapoll-pcard .cardbtn.dg-open { margin: 0; border-top: .8px solid #E3EEF6; font-family: Nunito, sans-serif; font-size: 14px; font-weight: 700; color: #1DA1F2; }
.ogapoll-pcard .cardbtn.dg-open:hover { color: #fff; }
/* the DGC coin (the old KRI coin): Duegho Gifts */
.dg-coin { width: 26px !important; height: 26px !important; border-radius: 50%; }
.dg-gift { border: 0; background: none; cursor: pointer; }
.dg-gift:hover .dg-coin { transform: scale(1.12); }
.dg-price { color: #B07A00 !important; }
.dg-price .dg-coin { width: 20px !important; height: 20px !important; }
.ogapoll-pc-info .bi, .ogapoll-pc-status .bi { font-size: 16px; }
.dg-tray { padding: 0 16px 12px; }
/* a paid VOD: the clear thumbnail with the hook playing (muted loop), a lock badge, then the unlock button (gift + price) */
.dg-locked .ogapoll-pcover { animation: dg-hook 15s linear infinite; background-size: 112% auto; }
@keyframes dg-hook { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } }
.dg-badge { position: absolute; top: 12px; left: 12px; background: #fff; color: #0B2C57; font: 700 12px Nunito, sans-serif; padding: 4px 10px; border-radius: 12px; box-shadow: 0 2px 8px rgba(11, 44, 87, .18); }
.dg-badge .bi { color: #E63329; }
.dg-hook { position: absolute; bottom: 12px; left: 12px; background: #fff; color: #0B2C57; font: 700 12px Nunito, sans-serif; padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(11, 44, 87, .18); }
.dg-hook-bar { width: 60px; height: 4px; border-radius: 2px; background: #E3EEF6; overflow: hidden; display: inline-block; }
.dg-hook-bar b { display: block; height: 100%; width: 0; background: #E63329; animation: dg-bar 15s linear infinite; }
@keyframes dg-bar { to { width: 100%; } }
.dg-unlock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px 4px; }
.dg-unlock { white-space: nowrap; border: 0; border-radius: 22px; background: #E63329; color: #fff; font: 700 14px Nunito, sans-serif; padding: 9px 16px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.dg-unlock:hover { background: #C42A21; }
.dg-unlock img { width: 22px; height: 22px; border-radius: 50%; }
.dg-unlock-s { font: 600 12px Nunito, sans-serif; color: #6C8098; }
/* the post detail in a modal (post-detail.html), like Instagram */
.dg-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; }
.dg-modal[hidden] { display: none; }
.dg-modal-box { width: min(1200px, 94vw); height: 88vh; background: #fff; border-radius: 10px; overflow: hidden; }
.dg-modal-box iframe { width: 100%; height: 100%; border: 0; }
.dg-x { position: absolute; top: 14px; right: 22px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; }
/* the template's KRI coin -> the DGC coin */
.donate a:before { background: url(../images/dgc.svg) no-repeat 0 0 / cover !important; }
/* no ad banner on top, anywhere */
.headertop { display: none !important; }
/* red = the main color: every icon red (the template's blue icons and Core's card icons), the verified check red;
   blue stays only for links, hashtags and the Follow buttons */
/* (owner, 2026-10-24: the post footer's icons keep the template's own colours — eye, like, comments, send, repost, save) */
.sidebarmenu img, .posttabwrapper .nav-tabs .nav-link i, .ogapoll-pc-line2 > img,
img[src*="verifiedusericon"], .ogapoll-pc-verified,
.like a:before, .comment a:before, .share a:before, .profileinfo img, .profiledetails img, .profilewrappertop img:not([src*="profile"]) {
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2620%) hue-rotate(349deg) brightness(93%) contrast(93%);
}
.posttabwrapper .nav-tabs .nav-link i { filter: none; color: #E63329 !important; opacity: .55; }
.posttabwrapper .nav-tabs .nav-link.active i { opacity: 1; }
.ogapoll-pc-like .on { filter: none; }
.profilenumberslisting li span, .profilenumberslisting li { color: #0B2C57; }
.profilenumberslisting li { color: #E63329 !important; }
.profilenumberslisting li span { color: #0B2C57 !important; }
/* red rings (profile photo, stories / profile circles), red dots, red Open Now */
img { border-color: #E63329 !important; }
.slick-dots li.slick-active a, .slickdot.on, .slick-dots .on, .dg-dots i.on { background: #E63329 !important; }
.cardbtn, .ogapoll-pcard .cardbtn.dg-open { color: #E63329 !important; background: #FDF1F0 !important; }
.cardbtn:hover, .ogapoll-pcard .cardbtn.dg-open:hover { background: #E63329 !important; color: #fff !important; }
.cardbtn:before { filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2620%) hue-rotate(349deg) brightness(93%) contrast(93%); }
.cardbtn:hover:before { filter: brightness(0) invert(1); }
/* red main color: Create Post + the active category chip */
.createpostbtn, a.createpost, .btn-primary, .createpostwrapper .btn, .postblockwrapper .createpostbtn { background: #E63329 !important; border-color: #E63329 !important; }
.filterslider .active a, .filterslider a.active, .categorieslisting .active a, .tagslisting li.active a { background: #E63329 !important; border-color: #E63329 !important; color: #fff !important; }
/* the mobile app's bottom bar (Play Store screens): home, grid, + , Duegho Gifts (DGC), more */
.dg-bottombar { display: none; }
@media (max-width: 767px) {
  .topheader-actions { display: none !important; }
  .dg-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; height: 60px; background: #0B2C57; justify-content: space-around; align-items: center; }
  .dg-bottombar a { color: #fff; font-size: 24px; opacity: .85; text-decoration: none; display: flex; flex-direction: column; align-items: center; }
  .dg-bottombar a.on { opacity: 1; }
  .dg-bottombar a.on:after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; margin-top: 3px; }
  .dg-bottombar .dg-plus { width: 46px; height: 46px; border-radius: 50%; background: #E63329; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: 1; }
  .dg-bottombar img { width: 30px; height: 30px; border-radius: 50%; }
  body { padding-bottom: 70px; }
}
/* the second chips row and the menu button: red too */
.postfilterwrapper a.active, .slick-track a.active { background: #E63329 !important; color: #fff !important; }
.navtogglebtn { border-color: #fff !important; background: transparent !important; }
.navtogglebtn .menulines, .navtogglebtn .menulines:before, .navtogglebtn .menulines:after { background: #fff !important; }
/* the template's cards: neutral borders, red icons and counts */
.card.border-primary, .quickmsgslider .card, .border-primary { border-color: #E3EEF6 !important; }
.likecomment li a, .donateshare li a { color: #E63329 !important; }
.likecomment li a:before, .donateshare li.share a:before, li.like a:before, li.comment a:before, li.share a:before {
  filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(2620%) hue-rotate(349deg) brightness(93%) contrast(93%) !important; }
.dg-msearch { display: none; }
@media (max-width: 767px) { .dg-msearch { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 24px; } .headermiddle { position: relative; } }
.dg-coin, .dg-unlock img, .dg-bottombar img, img[src*="dgc.svg"] { filter: none !important; }
.preloader { display: none !important; }
/* repost (like X): red icon + count */
.dg-repost { border: 0; background: none; cursor: pointer; }
.dg-repost .bi { font-size: 19px; color: #E63329; font-weight: 700; }

/* ---- Duegho phase 2 (the shell's feed): the template's Open Now bar (style.css .cardbtn) without the template ---- */
.cardbtn { display: block; position: relative; text-decoration: none; text-transform: uppercase; padding: 10px 22px; }
.cardbtn:before { content: ''; position: absolute; top: 50%; right: 22px; background: url(/dg/images/opennowarrowicon.svg) no-repeat 0 0; width: 10px; height: 17px; transform: translateY(-50%); }
.cardbtn:hover:before { filter: brightness(0) invert(1); }
.dg-media { display: block; background: #000; }
.dg-media .dg-img { width: 100%; height: auto; max-height: var(--dg-body); object-fit: cover; display: block; }   /* never taller than the screen: a tall photo is cropped at its centre (Instagram's feed) */
.dg-fol { font: 800 13px Nunito, system-ui, sans-serif; color: #1D9BF0; border: 1.5px solid #1D9BF0; border-radius: 999px; padding: 4px 12px; background: #fff; cursor: pointer; white-space: nowrap; }
.dg-fol.on { color: #6C8098; border-color: #E3EEF6; }
.dg-reposted { display: flex; align-items: center; gap: 6px; padding: 10px 20px 0; font: 700 13px Nunito, system-ui, sans-serif; color: #6C8098; }
.dg-reposted svg { width: 16px; height: 16px; }
.dg-repost.active svg { stroke: #E21B2D; }
.dg-cm-input { margin: 0; }
.dg-cm-input button { border: 0; background: none; cursor: pointer; padding: 4px; }
.dg-cm-input input { font: 400 14px Nunito, system-ui, sans-serif; }
.ogapoll-pc-actions { display: flex; align-items: center; gap: 6px; }

/* ---- the ads engine's labels (a promoted placement / an ambassador's post) and the owner's tools ---------------- */
.dg-spons, .dg-amb, .dg-pinned { margin-left: 6px; font: 800 11px/1 Nunito, system-ui, sans-serif; padding: 3px 7px; border-radius: 999px; letter-spacing: .02em; }
.dg-spons { color: #6C8098; background: #EEF2F6; }
.dg-amb { color: #B8121F; background: #FDECEE; }
.dg-pinned { color: #0B2C57; background: #E8F4FD; }
.dg-edited { font-weight: 400; color: #8A94A6; }
.dg-promote { color: #E21B2D; border-color: #E21B2D; margin-right: 4px; }
.dg-ambbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #E9EDF1; border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; }
.dg-ambbar b { font: 800 16px Poppins, system-ui, sans-serif; display: block; }
.dg-ambbar p { margin: 2px 0 0; color: #657786; font-size: 14px; }
.dg-ambbar button { flex: none; background: #E21B2D; color: #fff; font-weight: 800; border-radius: 999px; padding: 8px 16px; }
.dg-ambbar button.ghost { background: #fff; color: #657786; border: 1px solid #D9E2EA; }
.dg-form label { display: block; font-weight: 800; font-size: 14px; margin: 10px 0 4px; }
.dg-form select, .dg-form input[type=number], .dg-form input[type=text] { width: 100%; border: 1px solid #D9E2EA; border-radius: 10px; padding: 9px 10px; font: inherit; background: #fff; }
.dg-form .dg-price { margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px; background: #F4F6F8; font-weight: 800; }
.dg-form .dg-msg { min-height: 20px; margin-top: 8px; font-weight: 700; font-size: 14px; }
.dg-form .dg-msg.ok { color: #0A8A4A; } .dg-form .dg-msg.err { color: #E21B2D; }
.dg-ins table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 12px; }
.dg-ins th, .dg-ins td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #EEF1F4; }
.dg-ins td.n, .dg-ins th.n { text-align: right; }
.dg-ins .tot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 12px; }
.dg-ins .tot div { background: #F4F6F8; border-radius: 10px; padding: 8px; text-align: center; font-size: 12px; color: #657786; }
.dg-ins .tot b { display: block; font: 800 18px Poppins, system-ui, sans-serif; color: #14171A; }
.modal .sheet.dg-ins, .modal .sheet.dg-form { max-height: calc(100vh - 90px); overflow: auto; }
@media (max-width: 480px) { .dg-promote { font-size: 12px; padding: 3px 8px; margin-right: 2px; } }

/* ---- the Ambassadors page: the banner, then a 3-per-row grid of 9:16 tiles (TikTok / Instagram Explore) ------------ */
.dg-ambbar .st { color: #0A8A4A; font-weight: 800; margin-top: 4px; }
.dg-ambbtn { flex: none; background: #E21B2D; color: #fff !important; font-weight: 800; border-radius: 999px; padding: 9px 18px; white-space: nowrap; text-decoration: none; }
.dg-ambbtn.ghost { background: #fff; color: #657786 !important; border: 1px solid #D9E2EA; }
.dg-spons.promoted { color: #B8121F; background: #FDECEE; }
/* like YouTube Shorts (owner, 2026-10-23): 2:3 cards, 6 per row on a computer, then 5, 4, 3 on a phone; the header's width */
.dg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 1100px) { .dg-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .dg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .dg-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } }
.dg-grid .empty { grid-column: 1 / -1; }
.dg-tile { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 8px; container-type: inline-size; background: #E9EDF1; text-decoration: none; }
.dg-tile > img, .dg-tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-tile > img.dg-tile-play { inset: clamp(4px, 4cqw, 8px) clamp(4px, 4cqw, 8px) auto auto; width: clamp(12px, 10cqw, 22px); height: clamp(12px, 10cqw, 22px); object-fit: contain; }
.dg-tile-lbl { position: absolute; top: clamp(4px, 4cqw, 8px); left: clamp(4px, 4cqw, 8px); max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 clamp(8px, 5cqw, 11px)/1 Nunito, system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.5); padding: clamp(2px, 2cqw, 4px) clamp(4px, 3.5cqw, 8px); border-radius: 999px; }
/* the three counters (views, likes, comments): a VERTICAL rail at the bottom right, icon above its number — the design of
   Reels / Shorts / TikTok, and of Duegho's own Shorts player later; every size, sized by the card */
.dg-tile-stats { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 5cqw, 10px); padding: 16px clamp(3px, 4cqw, 8px) clamp(4px, 5cqw, 10px) 16px; background: radial-gradient(ellipse at 100% 100%, rgba(0,0,0,.5), transparent 70%); color: #fff; font: 800 clamp(9px, 7cqw, 13px)/1 Nunito, system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dg-tile-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dg-tile-stats img { width: clamp(13px, 11cqw, 22px); height: clamp(13px, 11cqw, 22px); object-fit: contain; }
/* the posts' own icons (owner 2026-10-25: the real icons, not white copies), each on a white disc so it reads on any picture */
.dg-tile-stats img { background: rgba(255,255,255,.92); border-radius: 50%; padding: 3px; box-sizing: content-box; }
/* a video tile playing by itself (muted, the one on screen) */
.dg-tile > video.dg-tile-auto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dg-tile.playing > img.dg-tile-play { opacity: 0; }
@container (max-width: 56px) { .dg-tile-stats span:nth-child(n+2) { display: none; } }   /* a tiny tile (a ~200 px screen): the views only */

/* ---- a text post on a background (owner, 2026-10-23: like Facebook's): the values of TEXT_STYLE (API constants.ts) ------ */
.dg-tbg { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1.4 / 1; min-height: 240px; padding: 28px 32px; margin: 0 0 12px; color: #fff; text-align: center; overflow: hidden; background: #E21B2D center / cover no-repeat; word-break: break-word; }
.dg-tbg .dg-tbg-t { position: relative; z-index: 1; white-space: pre-wrap; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.dg-tbg[data-align="left"] { justify-content: flex-start; text-align: left; }
.dg-tbg.sz-s { font-size: 20px; } .dg-tbg.sz-m { font-size: 26px; } .dg-tbg.sz-l { font-size: 32px; } .dg-tbg.sz-xl { font-size: 40px; }
@media (max-width: 767px) { .dg-tbg { padding: 20px 22px; } .dg-tbg.sz-s { font-size: 17px; } .dg-tbg.sz-m { font-size: 21px; } .dg-tbg.sz-l { font-size: 25px; } .dg-tbg.sz-xl { font-size: 30px; } }
.dg-tbg { line-height: 1.25; font-weight: 800; }
.ft-poppins { font-family: Poppins, system-ui, sans-serif; } .ft-nunito { font-family: Nunito, system-ui, sans-serif; }
.ft-serif { font-family: Georgia, 'Times New Roman', serif; } .ft-mono { font-family: 'Courier New', ui-monospace, monospace; }
.ft-bebas { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; letter-spacing: .02em; } .ft-pacifico { font-family: Pacifico, cursive; font-weight: 400; }
.bg-g1 { background-image: linear-gradient(135deg, #E21B2D, #FF7A45); } .bg-g2 { background-image: linear-gradient(135deg, #1D9BF0, #0B2C57); }
.bg-g3 { background-image: linear-gradient(135deg, #7F00FF, #E100FF); } .bg-g4 { background-image: linear-gradient(135deg, #11998E, #38EF7D); }
.bg-g5 { background-image: linear-gradient(135deg, #F7971E, #FFD200); } .bg-g6 { background-image: linear-gradient(135deg, #0F2027, #2C5364); }
.bg-g7 { background-image: linear-gradient(135deg, #EE0979, #FF6A00); } .bg-g8 { background-image: linear-gradient(135deg, #00C6FF, #0072FF); }
.bg-g9 { background-image: linear-gradient(135deg, #FC466B, #3F5EFB); } .bg-g10 { background-image: linear-gradient(135deg, #009245, #FCEE21); }
.bg-g11 { background-image: linear-gradient(135deg, #8E2DE2, #4A00E0); } .bg-g12 { background-image: linear-gradient(135deg, #232526, #414345); }
.bg-p1 { background-image: url(/dg/images/tbg/p1.jpg); } .bg-p2 { background-image: url(/dg/images/tbg/p2.jpg); } .bg-p3 { background-image: url(/dg/images/tbg/p3.jpg); }
.bg-p4 { background-image: url(/dg/images/tbg/p4.jpg); } .bg-p5 { background-image: url(/dg/images/tbg/p5.jpg); } .bg-p6 { background-image: url(/dg/images/tbg/p6.jpg); }
.dg-tbg.bg-img:after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); }   /* a picture of the author: darkened so the text reads */

/* ---- several photos / videos in a post: a carousel (swipe, ← → on a computer, 1/N) ---------------------------------- */
.dg-car { position: relative; background: #000; }
.dg-car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dg-car-track::-webkit-scrollbar { display: none; }
.dg-car-item { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 5; max-height: min(70vh, 560px); display: grid; place-items: center; background: #000; }
.dg-car-item img, .dg-car-item video { width: 100%; height: 100%; object-fit: contain; display: block; }
.dg-car .dg-count { position: absolute; right: 10px; top: 10px; z-index: 2; }
.dg-car-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 1px 6px rgba(0,0,0,.3); display: none; place-items: center; cursor: pointer; }
.dg-car-btn img { width: 8px; height: 13px; } .dg-car-btn.prev { left: 10px; } .dg-car-btn.next { right: 10px; }
@media (hover: hover) { .dg-car:hover .dg-car-btn.on { display: grid; } }
.dg-car-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; z-index: 2; pointer-events: none; }
.dg-car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); } .dg-car-dots i.on { background: #fff; }
.dg-place { display: flex; align-items: center; gap: 4px; color: #657786; font-size: 13px; margin: -4px 16px 10px; }
.dg-car .dg-car-btn { display: none !important; } @media (hover: hover) { .dg-car:hover .dg-car-btn.on { display: grid !important; } }

/* ---- restored (2026-10-24): the video, the gift tray, the notifications, the link preview ---- */
.dg-video { max-height: var(--dg-body); } .dg-video video.dg-img { height: 100%; max-height: var(--dg-body); object-fit: contain; background: #000; }   /* a video: whole, on black, within the screen */
.dg-gift[disabled] { cursor: default; opacity: .9; }
/* the gift tray (a bottom sheet on phones, a centered window on wide screens): the site's gift picker inside */
.dg-giftsheet { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.45); display: none; align-items: flex-end; justify-content: center; }
.dg-giftsheet.open { display: flex; }
.dg-giftsheet .in { width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 14px 14px 18px; }
.dg-giftsheet .dg-gift-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 800 16px Poppins, system-ui, sans-serif; }
.dg-giftsheet .dg-gift-hd b span { color: #E21B2D; }
.dg-giftsheet .x { font-size: 26px; line-height: 1; color: #657786; }
@media (min-width: 768px) { .dg-giftsheet { align-items: center; } .dg-giftsheet .in { border-radius: 18px; } }
.dg-giftbal { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 700; color: #14171A; }
.dg-giftbal a { margin-left: auto; color: #E21B2D; font-weight: 800; }
/* ---- the notifications: the mock's notifications.html (#notificationtab, .notificationcard, .notificationstar) ------- */
.dg-bell { position: relative; }
.dg-bell img { filter: brightness(0) invert(1); }
/* the bell's badge: dg-shell.css (.hd .dg-badge) */
.dg-ntop { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 0; }
.dg-ntop h3 { font: 800 22px Poppins, system-ui, sans-serif; margin: 0; }
.dg-ntabs { display: flex; list-style: none; margin: 15px 0 22px; padding: 0; border-bottom: 1px solid #E9EDF1; }
.dg-ntabs li { flex: 0 0 50%; max-width: 50%; }
.dg-ntabs a { display: block; text-align: center; padding: 10px; font-weight: 800; color: #657786; border-bottom: 3px solid transparent; }
.dg-ntabs a.on { color: #E21B2D; border-bottom-color: #E21B2D; }
.dg-ncard { position: relative; display: block; background: #fff; border: 1px solid #34B7F1; border-radius: 17px; padding: 24px 24px 24px 62px; margin-bottom: 14px; color: inherit; text-decoration: none; }
.dg-ncard.unread { background: #F2FAFE; }
.dg-nstar { position: absolute; top: 34px; left: 24px; }
.dg-nhead { display: flex; align-items: center; gap: 12px; }
.dg-nav { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; overflow: hidden; }
.dg-nav img { width: 100%; height: 100%; object-fit: cover; }
.dg-ninfo { flex: 1; min-width: 0; }
.dg-ninfo h4 { margin: 0; font: 800 17px Poppins, system-ui, sans-serif; color: #14171A; }
.dg-ninfo p { margin: 2px 0 0; font-size: 16px; color: #4F5368; }
.dg-nago { color: #8A94A6; white-space: nowrap; }
.dg-nthumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; }
.dg-nbody { margin-top: 10px; font-size: 17px; opacity: .7; }
@media (max-width: 767px) { .dg-ncard { padding: 18px 18px 18px 42px; border-radius: 14px; margin: 0 8px 10px; } .dg-nstar { top: 30px; left: 12px; width: 22px; } .dg-nbody { font-size: 14px; } .dg-ninfo p { font-size: 14px; margin-top: 3px; } .dg-ntop, .dg-ntabs { margin-left: 12px; margin-right: 12px; } }
/* ---- a link's preview in a post ---------------------------------------------------------------------------------- */
/* a shared link, one body per platform (_LinkBody.cshtml; the card's header / footer never change). Every body stays
   under the media cap: var(--dg-body) */
.dg-link { display: flex; gap: 12px; margin: 0 16px 12px; border: 1px solid #E9EDF1; border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; background: #fff; }
.dg-link img { width: 120px; min-height: 100%; aspect-ratio: 1; object-fit: cover; flex: none; background: #F4F6F8; }
.dg-link-t { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 0; min-width: 0; }
.dg-link-t small { color: #657786; font-size: 12px; text-transform: lowercase; display: flex; align-items: center; gap: 6px; }
.dg-link-t small img { width: 16px; height: 16px; min-height: 0; aspect-ratio: auto; background: none; }
.dg-link-t b { font: 800 15px/1.3 Poppins, system-ui, sans-serif; color: #14171A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-link-t span { font-size: 13px; color: #657786; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-link-lg { flex-direction: column; gap: 0; }
.dg-link-lg > img { width: 100%; aspect-ratio: 1.91 / 1; max-height: var(--dg-body); min-height: 0; }
.dg-link-lg .dg-link-t { padding: 10px 12px; background: #F7F9FA; }

.dg-lk { display: block; margin: 0 0 12px; position: relative; color: inherit; text-decoration: none; }
.dg-lk-frame { position: relative; overflow: hidden; background: #0F1419; cursor: pointer; }
.dg-lk-video .dg-lk-frame { aspect-ratio: 16 / 9; max-height: var(--dg-body); margin: 0 auto; }
.dg-lk-short .dg-lk-frame, .dg-lk-post .dg-lk-frame { height: var(--dg-body); }
.dg-lk-bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) brightness(.55); }
.dg-lk-img { position: relative; display: block; height: 100%; width: 100%; object-fit: cover; }
.dg-lk-short .dg-lk-img { width: auto; aspect-ratio: 9 / 16; margin: 0 auto; }
.dg-lk-post .dg-lk-img { object-fit: contain; }
.dg-lk-brand { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #2a2f36, #0F1419); color: #fff; font-size: 14px; }
.dg-lk-brand img { width: 56px; height: 56px; }
.dg-lk-brand em { font-style: normal; opacity: .85; }
.dg-lk-video .dg-lk-brand, .dg-lk-short .dg-lk-brand { align-items: flex-start; justify-content: flex-start; padding: 14px; } /* a player without a picture: the platform's mark in the corner, ▶ in the middle */
.dg-lk-video .dg-lk-brand img, .dg-lk-short .dg-lk-brand img { width: 34px; height: 34px; }
.dg-lk-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dg-lk-play img { width: 26px; height: 26px; margin-left: 3px; }
.dg-lk iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.dg-lk.on .dg-lk-play, .dg-lk.on .dg-lk-brand { display: none; }
.dg-lk-bar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #F7F9FA; border-bottom: 1px solid #E9EDF1; color: inherit; text-decoration: none; }
.dg-lk-bar > img { width: 22px; height: 22px; flex: none; }
.dg-lk-bar span { display: flex; flex-direction: column; min-width: 0; }
.dg-lk-bar small { color: #657786; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-lk-bar b { font: 700 14px/1.3 Poppins, system-ui, sans-serif; color: #14171A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* X: the tweet's text, as a quoted post */
.dg-lk-x { margin: 0 16px 12px; padding: 12px 14px; border: 1px solid #E9EDF1; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.dg-lk-xhd { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dg-lk-xhd img { width: 20px; height: 20px; }
.dg-lk-xt { font-size: 15px; line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.dg-lk-x small { color: #1d9bf0; font-weight: 600; }
/* Spotify / SoundCloud: a player strip (152 / 166 / 352 px once loaded) */
.dg-lk-audio { margin: 0 16px 12px; }
.dg-lk-audio .dg-lk-frame { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #F7F9FA; border: 1px solid #E9EDF1; min-height: 96px; }
.dg-lk-cover { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; }
span.dg-lk-cover img { width: 40px; height: 40px; }
.dg-lk-at { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-right: 64px; }
.dg-lk-at small { display: flex; align-items: center; gap: 6px; color: #657786; font-size: 12px; }
.dg-lk-at small img { width: 16px; height: 16px; }
.dg-lk-at b { font: 700 15px/1.3 Poppins, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-lk-at span { color: #657786; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-lk-audio .dg-lk-play { left: auto; right: 14px; transform: translateY(-50%); width: 48px; height: 48px; background: #14171A; }
.dg-lk-audio .dg-lk-play img { width: 20px; height: 20px; }
.dg-lk-audio.on .dg-lk-frame { padding: 0; min-height: 0; display: block; background: none; border: 0; }
.dg-lk-audio.on .dg-lk-frame > :not(iframe) { display: none; }
.dg-lk-audio iframe { position: static; height: 152px; border-radius: 12px; }
.dg-form .row { flex-wrap: wrap; gap: 8px; } .dg-form .row a, .dg-form .row button { white-space: nowrap; } .dg-form .row > span { margin-left: auto; }

/* ---- the post's tools: the template's .postmoreoptionlisting, .confirmationpopwrapper, #editpostModal (style.css) ------ */
.postmoreoptionlisting { position: absolute; z-index: 130; background: #fff; width: 190px; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 13px 18px; border-radius: 10px; list-style: none; margin: 0; }
.postmoreoptionlisting[hidden] { display: none; }
.postmoreoptionlisting li { margin-bottom: 14px; } .postmoreoptionlisting li:last-child { margin-bottom: 0; }
.postmoreoptionlisting li a { font-size: 14px; color: #002D56; text-decoration: none; display: block; }
.postmoreoptionlisting li a:hover { color: #1DA1F2; }
.dg-more img { width: 20px; height: 20px; }
.dgm-box { width: 100%; max-width: 480px; background: #fff; border-radius: 17px; padding: 26px 24px 22px; max-height: calc(100vh - 40px); overflow: auto; }
.modal.confirmationmodal, .modal.editpostmodal { align-items: center; z-index: 140; }
.confirmationpopwrapper { text-align: center; }
.confirmationpopwrapper h4 { font: 800 20px Poppins, system-ui, sans-serif; margin: 0; color: #14171A; }
.confirmationpopwrapper p { margin: 15px 0; color: #4F5368; }
.confirmationpopwrapper ul { display: flex; list-style: none; margin: 0; padding: 0; }
.confirmationpopwrapper ul li { flex: 0 0 50%; max-width: 50%; padding: 0 6px; }
.confirmationpopwrapper ul li a { display: block; background: #E0245E; border-radius: 50px; padding: 13px 0; font-weight: bold; font-size: 14px; color: #fff; text-decoration: none; }
.confirmationpopwrapper ul li a.confirmbtn { background: #1DA1F2; } .confirmationpopwrapper ul li a.confirmbtn.btndelete { background: #E0245E; }
.confirmationpopwrapper ul li a.cancelbtn { background: #EEF2F6; color: #002D56; }
.confirmationpopwrapper ul li a:hover { background: #002D56; color: #fff; }
.editpostwrapper h3 { font: 800 24px Poppins, system-ui, sans-serif; margin: 0 0 22px; color: #14171A; }
.textareaformgroup { position: relative; margin-bottom: 14px; }
.textareaformgroup span { position: absolute; top: -10px; left: 14px; background: #fff; padding: 0 6px; font-size: 14px; color: #657786; }
.textareaformgroup textarea { width: 100%; height: 119px; font: 14px/1.5 Nunito, system-ui, sans-serif; padding: 18px; border: 1px solid #99DBF8; border-radius: 12px; resize: vertical; outline: 0; }
.editpostphotouploadslider { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 12px; }
.editpostphotouploadslider .item { flex: 0 0 90px; position: relative; } .editpostphotouploadslider figure { width: 90px; height: 90px; margin: 0; border-radius: 7px; overflow: hidden; }
.editpostphotouploadslider figure img, .editpostphotouploadslider figure video { width: 100%; height: 100%; object-fit: cover; }
.editpostphotouploadslider .del { position: absolute; top: 4px; right: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.editpostphotouploadslider .item.gone { opacity: .3; }
.dge-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; font-weight: 600; color: #4F5368; font-size: 14px; }
.dge-row input, .dge-row select { flex: 1; max-width: 260px; border: 1px solid #99DBF8; border-radius: 8px; padding: 7px 9px; font: inherit; }
.dgm-msg { min-height: 18px; margin: 8px 0; font-weight: 700; font-size: 14px; color: #E21B2D; } .dgm-msg.ok { color: #0A8A4A; }
.dgm-foot { display: flex; justify-content: flex-end; gap: 10px; }
.dgm-foot .cmbutton { padding: 10px 26px; border-radius: 50px; color: #fff; font-weight: 800; text-decoration: none; } .dgm-foot .btnred { background: #E0245E; } .dgm-foot .btndark { background: #002D56; }
.dgr-reasons { display: grid; gap: 8px; text-align: left; margin: 0 0 6px; } .dgr-reasons label { display: flex; gap: 8px; align-items: center; font-weight: 600; color: #14171A; }
/* the reactions bar (above the like button) and the like button's reaction */
.dg-rxbar { position: absolute; z-index: 135; display: flex; gap: 4px; background: #fff; border-radius: 999px; padding: 6px 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.dg-rxbar[hidden] { display: none; }
.dg-rxbar button { width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: transform .12s; background: none; border: 0; cursor: pointer; }
.dg-rxbar button:hover { transform: scale(1.25) translateY(-4px); } .dg-rxbar button img { width: 26px; height: 26px; }
.ogapoll-pc-like.dg-rx img { display: none !important; } .dg-rx-me { display: none; font-size: 18px; line-height: 1; } .ogapoll-pc-like.dg-rx .dg-rx-me { display: inline; }
.dg-rx-top { font-size: 12px; letter-spacing: -3px; margin-right: 4px; }
.ogapoll-pc-like { -webkit-touch-callout: none; user-select: none; }
/* a carousel scrolls sideways only: every item exactly as tall as the frame, nothing scrolls vertically inside a post */
.dg-car-track { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.dg-car-item { height: min(var(--dg-body), 125vw); aspect-ratio: auto; overflow: hidden; }
.dg-car-item img, .dg-car-item video { max-height: 100%; }
/* .dg-toast: dg-shell.css */

/* the place of the post: under the author (where the poll card shows its category) */
.ogapoll-pc-line2 .dg-loc-ic { width: 14px; height: 14px; flex: none; } .ogapoll-pc-line2 .dg-loc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the body never taller than needed: the description in 5 lines, "See more" opens it (Facebook) */
.dg-text.dg-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.dg-text.dg-clamp.open { display: block; -webkit-line-clamp: unset; }
.dg-more-txt { display: block; margin: -6px 20px 10px; padding: 0; background: none; border: 0; color: #657786; font-weight: 800; cursor: pointer; }

.dg-at { color: #1F7BC0; font-weight: 700; text-decoration: none; }   /* an @handle, like a #hashtag */
/* a profile photo in an avatar: the round frame keeps its size (the initials one is a grid already) */
span.ogapoll-pc-avatar:not(.initials), span.dg-av:not(.initials) { display: block; overflow: hidden; flex: none; }

/* photos are never cut (owner, 2026-10-24): each keeps its own shape up to the --dg-body cap; a photo taller than the
   cap is shown whole and centred, its sides filled by a blurred copy of itself (the small grid copy) */
.dg-fit { position: relative; overflow: hidden; }
.dg-fit::before { content: ""; position: absolute; inset: -24px; background: var(--bg) center / cover no-repeat; filter: blur(22px) brightness(.75); }
.dg-fit > img { position: relative; }
.dg-one { width: 100%; max-height: var(--dg-body); }
.dg-one .dg-img { width: 100%; height: 100%; max-height: var(--dg-body); object-fit: contain; }
.dg-car .dg-car-item { height: auto; aspect-ratio: var(--car-ar, 4 / 5); max-height: var(--dg-body); }
.dg-car .dg-car-item img { width: 100%; height: 100%; object-fit: contain; }

/* the home's 7 tabs (the template's .posttabwrapper, red icons as in phase 0; the active one full, underlined) */
.dg-htabs { background: #fff; border: 1px solid #E9EDF1; border-radius: 14px; margin: 0 0 12px; overflow: hidden; }
.dg-htabs .nav-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);   /* as many equal columns as tabs (8 with Reels; 7 on a profile without Activité) */ list-style: none; margin: 0; padding: 0; border: 0; }
.dg-htabs .nav-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border: 0; border-bottom: 3px solid transparent; color: #657786; font: 700 11px/1.1 Nunito, system-ui, sans-serif; text-decoration: none; text-align: center; }
.dg-htabs .nav-link img { width: 24px; height: 24px; }
/* the template's tabs: icons in our blue (#1F7BC0, the approved red icon recoloured — owner 2026-10-24), the active one red */
.dg-htabs .nav-link:not(.active) img { filter: brightness(0) saturate(100%) invert(47%) sepia(88%) saturate(815%) hue-rotate(181deg) brightness(76%) contrast(103%); }
.dg-htabs .nav-link:not(.active) { color: #1F7BC0; }
.dg-htabs .nav-link.active { border-bottom-color: #E63329; color: #E63329; }
@media (max-width: 420px) { .dg-htabs .nav-link span { display: none; } .dg-htabs .nav-link { padding: 11px 0 9px; } }
/* Média / VOD / Lives inside the middle column: 3 cards a row (the 2:3 cards of the grids) */
.dg-grid.dg-grid-in { grid-template-columns: repeat(3, 1fr) !important; gap: 4px; max-width: none; padding: 0; }
.dg-live .dg-live-badge { position: absolute; left: 6px; top: 6px; z-index: 2; background: #E21B2D; color: #fff; font: 800 10px/1 Nunito, sans-serif; padding: 3px 6px; border-radius: 4px; letter-spacing: .04em; }
.dg-live .dg-live-name { position: absolute; left: 8px; right: 40px; bottom: 8px; z-index: 2; color: #fff; display: flex; flex-direction: column; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dg-live .dg-live-name b { font: 800 13px/1.2 Poppins, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-live .dg-live-name small { font-size: 11px; opacity: .9; }
.dg-live { background: linear-gradient(160deg, #2a2f36, #0F1419); }
/* # : the trending hashtags, ranked */
.dg-htags { list-style: none; counter-reset: h; margin: 0; padding: 0; background: #fff; border: 1px solid #E9EDF1; border-radius: 14px; }
.dg-htags li { counter-increment: h; border-top: 1px solid #F0F3F6; } .dg-htags li:first-child { border-top: 0; }
.dg-htags a { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; color: inherit; text-decoration: none; }
.dg-htags a::before { content: counter(h); color: #8A94A6; font: 700 13px Nunito, sans-serif; min-width: 18px; }
.dg-htags b { font: 800 15px Poppins, sans-serif; color: #1DA1F2; } .dg-htags small { margin-left: auto; color: #657786; }
/* Activité: its 7 lists */
.dg-actf { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding: 2px 0; }
.dg-actf::-webkit-scrollbar { display: none; }
.dg-actf a { flex: none; padding: 6px 12px; border-radius: 999px; background: #EEF6FD; border: 1px solid #D9E7F3; color: #0B2C57; font: 700 13px Nunito, sans-serif; text-decoration: none; }
.dg-actf a.on { background: #E21B2D; border-color: #E21B2D; color: #fff; }

/* ==== phase 3 — a post's detail (Instagram): /p/{id} and the modal ==================================================== */
html.dg-noscroll { overflow: hidden; }
.dgd { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; padding: 24px 68px; }
.dgd.open { display: flex; }
.dgd-box { width: min(1180px, 100%); max-height: calc(100vh - 48px); display: flex; justify-content: center; overflow: auto; border-radius: 6px; }
.dgd-box > .dg-post { margin: 0 !important; width: 100%; }
.dgd-x { position: fixed; top: 10px; right: 18px; z-index: 2; color: #fff; font-size: 36px; line-height: 1; background: none; border: 0; cursor: pointer; }
.dgd-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.dgd-nav img { width: 9px; height: 15px; } .dgd-prev { left: 16px; } .dgd-next { right: 16px; } .dgd-nav[hidden] { display: none; }
.dgd-load { width: 42px; height: 42px; margin: 40vh auto; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: dgdSpin 1s linear infinite; }
@keyframes dgdSpin { to { transform: rotate(360deg); } }

/* the thread: MyOga's comment rows, compact as on Instagram */
.dg-thread { padding: 6px 16px; }
.dg-thread .ogapoll-cm-item { padding: 8px 0; margin: 0; border-radius: 0; }
.dg-thread .ogapoll-cm-item.reply { padding: 6px 0; }
.dg-thread .ogapoll-cm-replies { margin-top: 4px; }
.dg-thread .dg-caption { border-bottom: 1px solid #F0F3F6; padding-bottom: 12px; margin-bottom: 4px; }
.dg-thread .ogapoll-cm-text { white-space: pre-line; word-break: break-word; }
.dg-thread .ogapoll-cm-empty { color: #8A94A6; text-align: center; padding: 24px 0; }
.dg-thread.loading .dg-thread-more { height: 28px; background: linear-gradient(90deg, #F2F4F6 25%, #E9EDF1 50%, #F2F4F6 75%) 0 0 / 200% 100%; animation: dgcShim 1.2s linear infinite; border-radius: 8px; }
@keyframes dgcShim { to { background-position: -200% 0; } }
.dg-thread-input { border-top: 1px solid #E9EDF1; padding: 10px 16px; background: #fff; }
.dg-thread-row { display: flex; gap: 10px; align-items: flex-end; }
.dg-thread-row textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; font: 400 15px/1.4 Nunito, system-ui, sans-serif; padding: 6px 0; max-height: 120px; background: transparent; }
.dg-thread-row button { border: 0; background: none; color: #1DA1F2; font: 800 15px Nunito, sans-serif; cursor: pointer; padding: 6px 2px; }
.dg-thread-row button:disabled { opacity: .4; cursor: default; }
.dg-replyto { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #657786; background: #F7F9FA; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.dg-replyto[hidden] { display: none; }
.dg-replyto button { border: 0; background: none; font-size: 18px; line-height: 1; color: #657786; cursor: pointer; }

/* with photos / videos, on a computer: the media on the left, the rest on the right (Instagram) */
@media (min-width: 768px) {
  /* the cards are zoomed 1.25 on a computer (MyOga's card): the detail's sizes are divided by it */
  .ogapoll-core.dg-detail { max-width: none; width: 100%; }
  .dgd-box > .ogapoll-core.dg-detail:not(.has-media) { max-width: calc(640px / var(--mo-zoom, 1.25)); }
  /* the media side carries the post's stats footer (the template's .imagepost > .card-footer); the other side: the
     author, the caption with the comments (scrolling), the field */
  /* the media column = the media's own shape, no bands (owner, 2026-10-24): height H, width H x ratio; a wide one lowers H
     so its width fits the room left (--room). Sizes are in the card's 1.25-zoomed units. */
  .dg-detail.has-media { --rc: calc(400px / var(--mo-zoom, 1.25)); --room: calc(min(100vw - 140px, 1180px) / var(--mo-zoom, 1.25) - var(--rc));
    /* H = the media's height: the window's height minus the footer under the media (≈112 units) and the margins */
    --h: min(calc(min(100vh - 64px, 980px) / var(--mo-zoom, 1.25) - 112px), calc(var(--room) / var(--arn, .8)));
    width: max-content !important; max-width: 100%; margin-left: auto !important; margin-right: auto !important; }
  .dg-pdetail .dg-detail.has-media { --room: calc(min(100vw - 40px, 1000px) / var(--mo-zoom, 1.25) - var(--rc)); }
  .dg-detail.has-media .ogapoll-pcard { display: grid; grid-template-columns: calc(var(--h) * var(--arn, .8)) var(--rc); grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "media author" "media thread" "info thread" "stats input"; height: calc(var(--h) + 112px); padding: 0; overflow: hidden; }
  .dg-detail.has-media .dg-fit::before { display: none; }
  .dg-detail.has-media .ogapoll-pcard > * { min-width: 0; }
  .dg-detail.has-media .ogapoll-pcard > .dg-media { grid-area: media; height: 100%; max-height: none; aspect-ratio: auto !important; background: #000; }
  .dg-detail.has-media .dg-reposted { display: none; }
  .dg-detail.has-media .ogapoll-pc-author { grid-area: author; border-left: 1px solid #E9EDF1; }
  .dg-detail.has-media .dg-thread { grid-area: thread; overflow-y: auto; border-left: 1px solid #E9EDF1; }
  .dg-detail.has-media .ogapoll-pc-info { grid-area: info; border-top: 1px solid #E9EDF1; }
  .dg-detail.has-media .ogapoll-pc-stats { grid-area: stats; }
  .dg-detail.has-media .dg-thread-input { grid-area: input; border-left: 1px solid #E9EDF1; }
  .dg-detail.has-media .dg-one .dg-img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  .dg-detail.has-media .dg-car, .dg-detail.has-media .dg-car-track { height: 100%; }
  .dg-detail.has-media .dg-car .dg-car-item { height: 100%; max-height: none; aspect-ratio: auto; }
  .dg-detail.has-media .dg-video video { max-height: none; height: 100%; }
}
.dg-detail .dg-media { cursor: zoom-in; }
.dg-detail .dg-media:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; }
.dg-detail .dg-media:fullscreen img { max-height: 100vh; object-fit: contain; }

/* the post's page: the detail across the page, the author's other photos below */
.dg-pdetail main { max-width: 1000px; margin: 0 auto; width: 100%; }
.dg-pdetail .dg-post:not(.has-media) { max-width: calc(640px / var(--mo-zoom, 1.25)); margin-left: auto; margin-right: auto; }
.dg-more-from { margin: 28px 0 10px; }
.dg-more-from h3 { font: 700 15px Poppins, system-ui, sans-serif; color: #657786; margin: 0 0 12px; padding: 0 4px; }
.dg-more-from h3 a { color: #14171A; }


/* ==== every card's header and footer hold their 2 lines at every width (owner, 2026-10-24) ==========================
   header: line 1 = name · @handle · time (the name shortens first, then the handle), line 2 = place · visibility · label;
   footer: the gifts row and the stats row stay one line each (the gaps tighten on a narrow card) */
.dg-post .ogapoll-pc-author { flex-wrap: nowrap; }
.dg-post .ogapoll-pc-author > a { flex: none; }
.dg-post .ogapoll-pc-who { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.dg-post .ogapoll-pc-line1 { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.dg-post .ogapoll-pc-line1 .ogapoll-pc-name { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-post .ogapoll-pc-line1 .ogapoll-pc-verified { flex: none; }
.dg-post .ogapoll-pc-handle { min-width: 0; flex: 0 100 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-post .ogapoll-pc-line2 { flex-wrap: nowrap; min-width: 0; white-space: nowrap; overflow: hidden; }
.dg-post .ogapoll-pc-line2 .dg-loc { min-width: 0; flex: 0 1 auto; }
.dg-post .ogapoll-pc-line2 > img, .dg-post .ogapoll-pc-line2 > span:not(.dg-loc) { flex: none; }
.dg-post .ogapoll-pc-actions { flex: none; }
.dg-post .ogapoll-pc-info, .dg-post .ogapoll-pc-stats { flex-wrap: nowrap; gap: 8px; }
.dg-post .ogapoll-pc-info > div, .dg-post .ogapoll-pc-stats > div { flex-wrap: nowrap; min-width: 0; gap: clamp(8px, 3.2cqw, 18px); }
.dg-post .ogapoll-pc-stats, .dg-post .ogapoll-pc-info { container-type: inline-size; }
.dg-post .ogapoll-pc-stats .ogapoll-pc-stat { white-space: nowrap; flex: none; }
.dg-post .ogapoll-pc-stats .ogapoll-pc-save { flex: none; }
@container (max-width: 300px) {
  .dg-post .ogapoll-pc-stats .ogapoll-pc-stat { gap: 3px; font-size: 12px; }
  .dg-post .ogapoll-pc-stats .ogapoll-pc-stat img { width: 18px; height: 18px; }
}
@media (max-width: 400px) { .dg-post .ogapoll-pc-author, .dg-post .ogapoll-pc-stats, .dg-post .ogapoll-pc-info { padding-left: 12px; padding-right: 12px; } .dg-post .ogapoll-pc-author { gap: 8px; } }

/* the post's author liked the comment (YouTube): their small avatar with a heart */
.dg-thread .ogapoll-cm-hearted { position: relative; display: inline-flex; align-items: center; margin-left: 2px; }
.dg-thread .ogapoll-cm-hearted .ogapoll-pc-avatar { width: 18px; height: 18px; font-size: 8px; }
.dg-thread .ogapoll-cm-hearted i { position: absolute; right: -6px; bottom: -4px; display: flex; }
.dg-thread .ogapoll-cm-hearted i img { width: 11px; height: 11px; }

/* a video on the timeline: the whole width, the video centred in it at its own shape, its blurred cover on the sides
   (like the photos); in the detail the media column already has the video's shape */
.dg-post .dg-video { display: flex; justify-content: center; align-items: center; width: 100%; max-height: var(--dg-body); background: #000; }
.dg-post .dg-video video.dg-img { position: relative; width: auto; max-width: 100%; height: 100%; max-height: var(--dg-body); object-fit: contain; background: transparent; }
@media (min-width: 768px) { .dg-detail.has-media .dg-video video.dg-img { width: 100%; height: 100%; max-height: none; } }

/* ==== phase 4 — a profile's top: the approved mockup (_qa/duegho-mock/userprofile-duegho.html, the template's
   .myprofilewrapper rules); it spans the left menu and the centre, the right column runs beside it ==================== */
body.dg-profile .wrap > .dg-ptop { grid-column: 1 / 3; grid-row: 1; }
body.dg-profile .wrap > .nav { grid-column: 1; grid-row: 2; }
body.dg-profile .wrap > main { grid-column: 2; grid-row: 2; }
body.dg-profile .wrap > .side { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 960px) { body.dg-profile .wrap > .dg-ptop, body.dg-profile .wrap > main { grid-column: 1 / -1; } }
.dg-ptop { background: #fff; border: 1px solid #E9EDF1; border-radius: 14px; padding: 22px 22px 0; min-width: 0; }
.dg-ptop .profilewrappertopleft { display: flex; gap: 22px; align-items: flex-start; }
.dg-ptop .secprofileimg { flex: none; margin: 0; }
.dg-ptop .secprofileimg img, .dg-ptop .dg-pinit { width: 118px; height: 118px; border-radius: 50%; border: 3px solid #E63329; object-fit: cover; display: grid; place-items: center; font: 800 40px Poppins, system-ui, sans-serif; }
.dg-ptop .secprofilewrappertopright { flex: 1; min-width: 0; }
.dg-ptop .dg-prow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dg-ptop h5 { margin: 0; font: 700 19px/1.2 Poppins, system-ui, sans-serif; color: #002D56; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-ptop h5 span { display: block; font: 600 13px Nunito, system-ui, sans-serif; color: #1DA1F2; overflow: hidden; text-overflow: ellipsis; }
.dg-ptop .dg-pbiz { font: 800 11px Nunito, sans-serif; color: #0B2C57; background: #E8F4FD; border-radius: 999px; padding: 3px 8px; }
.dg-ptop .dg-pacts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dg-ptop .cmbutton { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font: 800 13px Nunito, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dg-ptop .cmbutton-outline { background: #fff; border: 1px solid #1DA1F2; color: #1DA1F2; }
.dg-ptop .cmbutton-outline.on { color: #657786; border-color: #CFD9E0; }
.dg-ptop .dg-pdonate { background: #E21B2D; color: #fff; border: 0; }
.dg-ptop .moreoptionmenuwrapper { position: relative; }
.dg-ptop .moreoptionmenu { border: 0; background: none; padding: 4px; cursor: pointer; display: grid; }
.dg-ptop .moreoptionmenu img { width: 22px; height: 22px; }
.dg-ptop .moreoptionmenuwrapper .postmoreoptionlisting { position: absolute; right: 0; top: 34px; z-index: 30; min-width: 190px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); list-style: none; margin: 0; padding: 6px 0; }
.dg-ptop .moreoptionmenuwrapper .postmoreoptionlisting[hidden] { display: none; }
.dg-ptop .postmoreoptionlisting a { display: block; padding: 9px 16px; color: #14171A; font: 600 14px Nunito, sans-serif; text-decoration: none; }
.dg-ptop .postmoreoptionlisting a:hover { background: #F5F8FA; }
.dg-ptop .dg-pfy { display: inline-block; margin-top: 6px; font: 700 11px Nunito, sans-serif; color: #657786; background: #EEF2F6; border-radius: 4px; padding: 2px 6px; }
.dg-ptop .profileintro { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dg-ptop .profileintro li { display: flex; align-items: center; gap: 6px; font: 400 14px/1.4 Nunito, sans-serif; color: #000; min-width: 0; }
.dg-ptop .profileintro li img { width: 14px; height: 14px; flex: none; }
.dg-ptop .profileintro li span { min-width: 0; overflow-wrap: anywhere; }
.dg-ptop .profileintro a { color: inherit; }
.dg-ptop .profileintro .dg-pbio span { font-style: normal; }
.dg-ptop .accountinfo { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.dg-ptop .accountinfo li { position: relative; padding-left: 17px; }
.dg-ptop .accountinfo li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; }
.dg-ptop .accountinfo li::after { content: ''; display: inline-block; vertical-align: middle; background: #BDBDBD; width: 1px; height: 16px; margin: 0 18px; }
.dg-ptop .accountinfo li:last-child::after { display: none; }
.dg-ptop .accountinfo li.joined::before { background-image: url(../images/profilejoinedicon.svg); width: 13px; height: 13px; }
.dg-ptop .accountinfo li.website::before { background-image: url(../images/profilewebicon.svg); width: 13px; height: 11px; }
.dg-ptop .accountinfo li.location::before { background-image: url(../images/profilelocationicon.svg); width: 9px; height: 12px; }
.dg-ptop .accountinfo a, .dg-ptop .accountinfo span { font: 600 13px Nunito, sans-serif; color: #002D56; text-decoration: none; }
.dg-ptop .profilenumberslisting { margin: 18px -22px 0; padding: 14px 22px; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; overflow-x: auto; scrollbar-width: none; }
.dg-ptop .profilenumberslisting::-webkit-scrollbar { display: none; }
.dg-ptop .profilenumberslisting ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.dg-ptop .profilenumberslisting li { flex: none; text-align: center; font: 700 12px Nunito, sans-serif; color: #E63329; }
.dg-ptop .profilenumberslisting li span { display: block; font: 700 18px Poppins, sans-serif; color: #002D56; }
.dg-ptop .profilewrapperbottom { margin: 0 -22px; padding: 14px 22px; overflow-x: auto; scrollbar-width: none; }
.dg-ptop .profilewrapperbottom::-webkit-scrollbar { display: none; }
.dg-ptop .otherprofileslider { display: flex; gap: 16px; }
.dg-ptop .otherprofileslider .item { flex: none; width: 68px; }
.dg-ptop .otherprofileslider figure { margin: 0; }
.dg-ptop .otherprofileslider a { display: block; text-align: center; text-decoration: none; }
.dg-ptop .otherprofileslider img, .dg-ptop .otherprofileslider .dg-pinit.sm { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #E63329; object-fit: cover; display: grid; place-items: center; margin: 0 auto; font: 800 20px Poppins, sans-serif; font-style: normal; }
.dg-ptop .otherprofileslider span { display: block; margin-top: 4px; font: 600 12px Nunito, sans-serif; color: #002D56; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .dg-ptop { border-radius: 0; border-left: 0; border-right: 0; padding: 16px 14px 0; margin-bottom: 8px; }
  .dg-ptop .profilewrappertopleft { gap: 14px; }
  .dg-ptop .secprofileimg img, .dg-ptop .dg-pinit { width: 82px; height: 82px; font-size: 28px; }
  .dg-ptop .dg-pacts { margin-left: 0; width: 100%; }
  .dg-ptop .profilenumberslisting, .dg-ptop .profilewrapperbottom { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}
/* photos are never recoloured (the old "every icon red" rule targets the template's icons only) */
.dg-ptop .secprofileimg img, .dg-ptop .otherprofileslider img, .dg-ptop .dg-pdonate img { filter: none !important; }

.dg-ptop h5 b { font-weight: 700; } .dg-ptop h5 img { width: 18px; height: 18px; vertical-align: -3px; margin-left: 5px; }
/* a phone (the small screens of Africa first): Instagram's order — the photo and the name, the intro, the dates, then
   the buttons across the width (Donate and Follow share it, ⋯ at the end) */
@media (max-width: 767px) {
  .dg-ptop .profilewrappertopleft { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; }
  .dg-ptop .secprofilewrappertopright, .dg-ptop .dg-prow { display: contents; }
  .dg-ptop .secprofileimg { grid-column: 1; grid-row: 1 / span 2; }
  .dg-ptop .secprofileimg img, .dg-ptop .secprofileimg .dg-pinit { width: 76px; height: 76px; font-size: 26px; }
  .dg-ptop h5 { grid-column: 2; grid-row: 1; align-self: end; font-size: 17px; white-space: normal; }
  .dg-ptop h5 b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dg-ptop .dg-pbiz, .dg-ptop .dg-pfy { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin-top: 4px; }
  .dg-ptop .profileintro { grid-column: 1 / -1; order: 3; margin: 12px 0 6px; }
  .dg-ptop .accountinfo { grid-column: 1 / -1; order: 4; gap: 4px 14px; margin: 0; }
  .dg-ptop .accountinfo li::after { display: none; }
  .dg-ptop .dg-pacts { grid-column: 1 / -1; order: 5; display: flex; gap: 8px; margin: 12px 0 0; width: auto; }
  .dg-ptop .dg-pacts > .cmbutton, .dg-ptop .dg-pacts > .dg-fol { flex: 1 1 0; justify-content: center; min-width: 0; }
  .dg-ptop .dg-pacts .moreoptionmenuwrapper { flex: none; }
  .dg-ptop .profilenumberslisting ul { gap: 20px; }
}

/* (the old 1.25 zoom of the whole page is gone: the page is at 100 %, dg-look.css) */

/* ---- Edit profile (phase 4.4): the template's #editprofileModal (style.css: .profilepictureuploader, .formgroup.iconinput,
   .textareaformgroup) in the site's modal box, 2 parts (Profile / About) --------------------------------------------- */
.modal.editprofilemodal { align-items: center; z-index: 140; padding: 20px 12px; }
.editprofilemodal .dgm-box { max-width: 760px; padding: 24px 26px 20px; }
.editprofilewrapper h3 { font: 800 24px Poppins, system-ui, sans-serif; margin: 0 0 12px; color: #14171A; }
.dg-pe-tabs { display: flex; gap: 6px; border-bottom: 1px solid #E6ECF0; margin: 0 0 22px; }
.dg-pe-tabs button { background: none; border: 0; padding: 9px 14px; font: 800 15px Nunito, system-ui, sans-serif; color: #657786; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.dg-pe-tabs button.on { color: #E63329; border-bottom-color: #E63329; }
.editprofilemodal .profilepictureuploader { max-width: 120px; margin: 0 auto 26px; }
.editprofilemodal .profileimgcurrent img, .editprofilemodal .dg-pe-init { width: 100%; aspect-ratio: 1; object-fit: cover; display: grid; place-items: center; border: 0; border-radius: 50%; font: 800 40px Poppins, system-ui, sans-serif; }
.editprofilemodal .formgroup { position: relative; margin-bottom: 26px; }
.editprofilemodal .formgroup input { height: 52px; font-size: 16px; border: 1px solid #99DBF8; border-radius: 10px; padding: 6px 16px; outline: 0; }
.editprofilemodal .formgroup.iconinput input { padding-left: 50px; }
.editprofilemodal .formgroup.iconinput > img { left: 18px; width: 20px; height: 20px; }
.editprofilemodal .formgroup > span { top: -11px; left: 14px; font-size: 14px; padding: 0 6px; color: #657786; line-height: 1.4; }
.editprofilemodal .formgroup input:focus, .editprofilemodal textarea:focus { border-color: #1F7BC0; }
.editprofilemodal .textareaformgroup textarea { font-size: 16px; height: 110px; }
.dg-pe-help { margin: -18px 2px 20px; font-size: 13px; color: #657786; word-break: break-all; }
.dg-pe-help b { color: #14171A; } .dg-pe-help em { font-style: normal; font-weight: 700; margin-left: 6px; } .dg-pe-help em.ok { color: #0A8A4A; } .dg-pe-help em.bad { color: #E21B2D; }
.dg-pe-count { position: absolute; right: 12px; bottom: 8px; font-style: normal; font-size: 12px; color: #8899A6; }
.dg-pe-h { display: flex; align-items: center; gap: 8px; font: 700 16px Poppins, system-ui, sans-serif; color: #14171A; margin: 6px 0 14px; } .dg-pe-h img { width: 20px; height: 20px; }
.dg-pe-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 4px 0 6px; font-size: 14px; color: #4F5368; }
.dg-pe-switch input { width: 20px; height: 20px; margin-top: 2px; accent-color: #E63329; flex: 0 0 auto; } .dg-pe-switch b { display: block; color: #14171A; font-size: 15px; }
.dg-pe-item { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 40px 12px 12px; border: 1px solid #E6ECF0; border-radius: 12px; margin-bottom: 10px; }
.dg-pe-item input[type=text], .dg-pe-item input[type=number] { width: 100%; min-width: 0; border: 1px solid #99DBF8; border-radius: 8px; padding: 9px 10px; font: 15px Nunito, system-ui, sans-serif; outline: 0; }
.dg-pe-item input:disabled { background: #F5F8FA; }
.dg-pe-years { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dg-pe-years input[type=number] { width: 96px !important; }
.dg-pe-years label { display: flex; gap: 6px; align-items: center; font-size: 14px; color: #4F5368; margin: 0; } .dg-pe-years label input { accent-color: #E63329; }
.dg-pe-del { position: absolute; top: 6px; right: 4px; background: none; border: 0; padding: 4px; cursor: pointer; } .dg-pe-del img { width: 30px; height: 30px; }
.dg-pe-add { background: none; border: 1px dashed #1F7BC0; color: #1F7BC0; font-weight: 800; border-radius: 10px; padding: 9px 14px; margin: 0 0 22px; cursor: pointer; width: 100%; }
.dgm-foot .cmbutton.disabled { opacity: .6; pointer-events: none; }
@media (max-width: 575px) {
  .modal.editprofilemodal { padding: 0; align-items: stretch; }
  .editprofilemodal .dgm-box { max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 18px 16px 16px; }
  .editprofilemodal .profilepictureuploader { max-width: 96px; margin-bottom: 22px; }
  .dg-pe-item { grid-template-columns: 1fr; }
  .editprofilemodal .dgm-foot { position: sticky; bottom: -16px; background: #fff; padding: 10px 0; }
}
/* the template's rules (style.css, not loaded on the feed pages) for this modal only */
.dg-pe-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.editprofilemodal .formgroup > span { position: absolute; background: #fff; z-index: 2; }
.editprofilemodal .formgroup input, .editprofilemodal .textareaformgroup textarea { width: 100%; color: #4F5368; box-sizing: border-box; }
.editprofilemodal .iconinput > img { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.editprofilemodal .profilepictureuploader { position: relative; width: 100%; }
.editprofilemodal .profilepictureuploader .inputupload { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; opacity: 0; cursor: pointer; }
.editprofilemodal .profileimgcurrent { border: #ddd solid 2px; border-radius: 50%; position: relative; overflow: hidden; }
.editprofilemodal .profileimgcurrent::before, .editprofilemodal .profileimgcurrent::after { content: ''; position: absolute; transition: .2s all; z-index: 2; }
.editprofilemodal .profileimgcurrent::before { inset: 0; background: #000; opacity: .2; }
.editprofilemodal .profileimgcurrent::after { top: 50%; left: 0; right: 0; margin: 0 auto; width: 26px; height: 23px; background: url(../images/cameraicon.svg) no-repeat 0 / cover; transform: translateY(-50%); opacity: .85; }
.editprofilemodal .profilepictureuploader:hover .profileimgcurrent::before { opacity: .4; }
.editprofilemodal .profilepictureuploader:hover .profileimgcurrent::after { opacity: 1; }
@media (max-width: 575px) { .dg-pe-grid { grid-template-columns: 1fr; } }

/* ---- a profile's 2nd header (its own things first, then the site's menus), the user menu's More ----------------------- */
.m2 .dg-ppill { display: inline-flex; align-items: center; gap: 6px; color: #0B2C57; text-decoration: none; }
.m2 .dg-ppill b { font-weight: 800; color: #E63329; }
.m2 .dg-ppill-red { background: #E63329; border-color: #E63329; color: #fff; }
.m2 .dg-psep { flex: none; width: 1px; align-self: stretch; margin: 4px 2px; background: #D9E7F3; }
.nav .dg-navmore.on { background: #fff; }
.nav .dg-navsub { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid #F1F4F7; margin-left: 22px; }
.nav .dg-navsub[hidden] { display: none; }

/* ---- the stats: Followers / Following / Gifts open the modal, Videos / Posts are links; a stat hidden by its owner ---- */
.dg-ptop .profilenumberslisting li button, .dg-ptop .profilenumberslisting li a { all: unset; cursor: pointer; display: block; text-align: center; font: inherit; color: inherit; }
.dg-ptop .profilenumberslisting li button:hover span, .dg-ptop .profilenumberslisting li a:hover span { color: #1F7BC0; }
.dg-ptop .profilenumberslisting li button:focus-visible, .dg-ptop .profilenumberslisting li a:focus-visible { outline: 2px solid #1F7BC0; outline-offset: 3px; border-radius: 4px; }
.dg-ptop .profilenumberslisting li.dg-phid { opacity: .45; }

/* ---- the profile's modals: Stats (tabs), Affiliates, Links — rows = the app's Followers screen ---------------------- */
.modal.dg-pmodal { align-items: center; z-index: 140; padding: 20px 12px; }
.dg-pmodal .dgm-box { max-width: 520px; padding: 0; display: flex; flex-direction: column; height: min(640px, calc(100vh - 40px)); overflow: hidden; }
.dg-pm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #E21B2D; color: #fff; }
.dg-pm-head b { font: 700 18px Poppins, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-pm-x { background: none; border: 0; padding: 4px; cursor: pointer; flex: none; } .dg-pm-x img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.dg-pm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #E6ECF0; flex: none; }
.dg-pm-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 4px 8px; font: 700 13px/1.25 Nunito, system-ui, sans-serif; color: #1F7BC0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dg-pm-tabs button span { font: 700 16px Poppins, system-ui, sans-serif; color: #002D56; }
.dg-pm-tabs button img { width: 12px; height: 12px; vertical-align: -1px; margin-left: 3px; }
.dg-pm-tabs button.on { color: #E63329; border-bottom-color: #E63329; }
.dg-pm-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.dg-pm-note { margin: 10px 18px 0; color: #657786; font-size: 14px; }
.dg-pm-load { height: 60px; background: linear-gradient(90deg, #F1F4F7 25%, #E6ECF0 50%, #F1F4F7 75%); background-size: 200% 100%; animation: dgshim 1.2s infinite; margin: 14px 18px; border-radius: 10px; }
@keyframes dgshim { to { background-position: -200% 0; } }
.dg-pm-private { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dg-prow2 { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E6ECF0; }
.dg-prow2 .av { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 800 17px Poppins, sans-serif; text-decoration: none; }
.dg-prow2 .av img { width: 100%; height: 100%; object-fit: cover; }
.dg-prow2 .who { min-width: 0; text-decoration: none; color: #14171A; }
.dg-prow2 .who b { display: flex; align-items: center; gap: 4px; font: 700 16px Poppins, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-prow2 .who small { display: block; color: #4F5368; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-prow2 .dg-fol { justify-self: end; }
.dg-prow2 .bio { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14px; color: #14171A; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dg-giftrow .gift { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4F5368; max-width: 150px; }
.dg-giftrow .gift > span { display: flex; flex-direction: column; overflow: hidden; } .dg-giftrow .gift b { color: #E63329; font: 800 15px Poppins, sans-serif; }
.dg-plink { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #E6ECF0; text-decoration: none; color: #14171A; }
.dg-plink img { width: 30px; height: 30px; flex: none; border-radius: 6px; } .dg-plink > span { min-width: 0; }
.dg-plink b { display: block; font: 700 15px Poppins, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-plink small { display: block; color: #1F7BC0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-plink:hover { background: #F7F9FA; }
@media (max-width: 575px) {
  .modal.dg-pmodal { padding: 0; align-items: stretch; }
  .dg-pmodal .dgm-box { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .dg-pm-tabs button { font-size: 12px; }
}

/* ---- a profile's Activité: the sub-tabs as icons (approved icons, our blue; the active one red) ---------------------- */
.dg-acti { display: flex; gap: 8px; margin: 0 0 12px; padding: 0 2px; }
.dg-acti a { flex: 1; display: grid; place-items: center; height: 42px; border-radius: 12px; background: #fff; border: 1px solid #E9EDF1; }
.dg-acti a img { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(47%) sepia(88%) saturate(815%) hue-rotate(181deg) brightness(76%) contrast(103%); }
.dg-acti a.on { border-color: #E63329; box-shadow: inset 0 -3px 0 #E63329; }
.dg-acti a.on img { filter: brightness(0) saturate(100%) invert(27%) sepia(83%) saturate(2780%) hue-rotate(347deg) brightness(93%) contrast(91%); }

/* ---- Edit profile: Links / Privacy -------------------------------------------------------------------------------- */
.dg-pe-intro { margin: 0 0 14px !important; }
.dg-pe-link { grid-template-columns: 2fr 1fr; }
.dg-pe-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin: 0 0 20px; }
.dg-pe-checks label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #14171A; margin: 0; cursor: pointer; }
.dg-pe-checks input { width: 18px; height: 18px; accent-color: #E63329; } .dg-pe-checks label.off { color: #8899A6; cursor: default; }
@media (max-width: 575px) { .dg-pe-link { grid-template-columns: 1fr; } .dg-pe-checks { grid-template-columns: 1fr 1fr; } .dg-pe-tabs { overflow-x: auto; scrollbar-width: none; } .dg-pe-tabs button { flex: none; } }
.dg-giftrow .gift .emo { font-style: normal; font-size: 28px; line-height: 1; }

/* ---- a long intro (owner's max-length QA, 2026-10-24): the website on ONE line (ellipsis); on phones the intro folds to
   a few lines with "See more", as Instagram does with a long bio ------------------------------------------------------- */
.dg-ptop .accountinfo li.website { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-ptop .accountinfo li.website a { white-space: nowrap; }
.dg-ptop .accountinfo li.location { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-pmore { display: none; background: none; border: 0; padding: 4px 0; font: 800 14px Nunito, system-ui, sans-serif; color: #1F7BC0; cursor: pointer; }
@media (max-width: 575px) {
  .dg-ptop .dg-pintro.fold { max-height: 8.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .dg-ptop .dg-pintro.long + .dg-pmore { display: inline-block; }
}
/* the post's time never disappears (owner 2026-10-24): the @handle shrinks first, the time keeps its place (template: "17h") */
.dg-post .dg-time, .ph-xcard .dg-time { flex: none; margin-left: 4px; font: 700 12px Nunito, system-ui, sans-serif; color: var(--muted, #657786); white-space: nowrap; }

/* ---- the right column's Promoted slider (the template's .promotedpostslider, at the top of the side column): on a computer
   the ads live HERE, so the timeline's ad slots are not shown there (phones keep them in the timeline) -------------------- */
.dg-promoside { padding-bottom: 6px; }
.dg-promoside-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dg-promoside-h h3 { margin: 0; }
.dg-promoside-h button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #D9E7F3; background: #fff; display: inline-grid; place-items: center; margin-left: 6px; cursor: pointer; }
.dg-promoside-h button img { width: 14px; height: 14px; }
.dg-pslide { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; }
.dg-pslide::-webkit-scrollbar { display: none; }
.dg-pslide > .dg-post { flex: 0 0 100%; scroll-snap-align: start; margin-bottom: 0 !important; }
@media (min-width: 961px) { body:not(.dg-full) #dgFeed > .dg-post[data-promo]:not([data-promo=""]) { display: none; } }

/* ---- the icon tabs: icons only, the name in a tooltip (hover on a computer, a long press on a phone: .tip) ------------ */
.dg-htabs { overflow: visible; }
.dg-htabs .nav-link span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dg-htabs .nav-link { position: relative; padding: 12px 2px 10px; -webkit-touch-callout: none; user-select: none; }
.dg-htabs .nav-link img { width: 26px; height: 26px; }
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-2px); background: #0B2C57; color: #fff; font: 700 12px/1 Nunito, system-ui, sans-serif; padding: 6px 9px; border-radius: 6px; white-space: nowrap; z-index: 60; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s, transform .12s; }
@media (hover: hover) { [data-tip]:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%); } }
[data-tip]:focus-visible::after, [data-tip].tip::after { opacity: 1; visibility: visible; transform: translateX(-50%); }
.dg-htabs li:first-child [data-tip]::after { left: 0; transform: none; } .dg-htabs li:last-child [data-tip]::after { left: auto; right: 0; transform: none; }
.dg-acti a { -webkit-touch-callout: none; user-select: none; }

/* ==== the profile's top, round 3 (owner 2026-10-24) ===================================================================
   the name + verified + Follow / Following + the red ⋯ on ONE line everywhere; the @handle and badges under it; the intro
   at most 5 lines (one line each, the bio on 2); the date and the place on the same line, then the website */
.dg-ptop .dg-prow { flex-wrap: nowrap; }
.dg-ptop .dg-prow h5 { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.dg-ptop .dg-prow h5 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-ptop .dg-prow h5 img { flex: none; }
.dg-ptop .dg-prow .dg-pacts { flex: none; margin-left: auto; width: auto; }
.dg-ptop [data-pedit] .sm { display: none; }
.dg-ptop .dg-phandle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font: 600 13px Nunito, system-ui, sans-serif; color: #1DA1F2; }
.dg-ptop .dg-phandle > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-ptop .dg-phandle .dg-pfy { margin-top: 0; }
.dg-ptop .profileintro li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.dg-ptop .profileintro .dg-pbio span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.dg-ptop .accountinfo { flex-wrap: nowrap; min-width: 0; }
.dg-ptop .accountinfo li { min-width: 0; white-space: nowrap; }
.dg-ptop .accountinfo li.joined { flex: none; }
.dg-ptop .accountinfo li.location { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.dg-ptop .accountinfo li.website { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; }
.dg-ptop .accountinfo li.location span { overflow: hidden; text-overflow: ellipsis; }
/* the circles: tighter, the full name under each (bold, the template), left-right arrows (our blue) */
.dg-ptop .profilewrapperbottom { position: relative; overflow: visible; }
.dg-ptop .otherprofileslider { gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.dg-ptop .otherprofileslider::-webkit-scrollbar { display: none; }
.dg-ptop .otherprofileslider .item { width: 84px; }
.dg-ptop .otherprofileslider img, .dg-ptop .otherprofileslider .dg-pinit.sm { width: 72px; height: 72px; }
.dg-ptop .otherprofileslider span { margin-top: 6px; font: 700 14px Poppins, system-ui, sans-serif; color: #0B2C57; padding: 0 2px; }
.dg-cir-arrow { position: absolute; top: 38px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #1DA1F2; display: grid; place-items: center; z-index: 3; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.dg-cir-arrow[hidden] { display: none; }
.dg-cir-arrow img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.dg-cir-arrow.prev { left: 6px; } .dg-cir-arrow.next { right: 6px; }
@media (hover: none) { .dg-cir-arrow { display: none !important; } }
/* About */
.dg-about section { padding: 14px 18px; border-bottom: 1px solid #E6ECF0; }
.dg-about h4 { margin: 0 0 8px; font: 700 15px Poppins, system-ui, sans-serif; color: #E63329; }
.dg-about .bio { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.dg-about .row { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; color: #14171A; overflow-wrap: anywhere; }
.dg-about .row img { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.dg-about .row b { display: block; font: 700 14px Poppins, system-ui, sans-serif; } .dg-about .row small { display: block; color: #657786; }
.dg-about .row a { color: #1F7BC0; }
@media (max-width: 767px) {
  .dg-ptop .dg-prow { display: flex; grid-column: 2; grid-row: 1; align-self: end; gap: 6px; min-width: 0; }
  .dg-ptop .dg-prow h5 { grid-column: auto; grid-row: auto; font-size: 16px; }
  .dg-ptop .dg-prow .dg-pacts { order: 0; grid-column: auto; margin: 0; gap: 4px; display: flex; }
  .dg-ptop .dg-prow .dg-pacts > .cmbutton, .dg-ptop .dg-prow .dg-pacts > .dg-fol { flex: none; padding: 5px 10px; font-size: 13px; }
  .dg-ptop .dg-prow .moreoptionmenu img { width: 22px; }
  .dg-ptop [data-pedit] .lg { display: none; } .dg-ptop [data-pedit] .sm { display: inline; }
  .dg-ptop .dg-phandle { grid-column: 2; grid-row: 2; align-self: start; }
  .dg-ptop .accountinfo { flex-wrap: wrap; }
  .dg-ptop .accountinfo li.joined, .dg-ptop .accountinfo li.location { order: 0; }
  .dg-ptop .accountinfo li.location { flex: 1 1 0; }
  .dg-ptop .accountinfo li.website { flex: 0 0 100%; order: 1; }
  .dg-ptop .otherprofileslider .item { width: 76px; }
  .dg-ptop .otherprofileslider img, .dg-ptop .otherprofileslider .dg-pinit.sm { width: 64px; height: 64px; }
  .dg-ptop .otherprofileslider span { font-size: 13px; }
}
/* the Promoted slider's card: the side column is already at the page's 1.25, the card keeps it (no second zoom) */
.dg-pslide > .ogapoll-core { zoom: 1; max-width: 100%; min-width: 0; flex: 0 0 100%; }
.dg-promoside-h button img { filter: brightness(0) saturate(100%) invert(47%) sepia(88%) saturate(815%) hue-rotate(181deg) brightness(76%) contrast(103%); }
/* the date and the place share the line with the website: the place keeps at most half of it */
.dg-ptop .accountinfo li.location { max-width: 50%; }
.dg-ptop .accountinfo li.website { min-width: 60px; }
@media (max-width: 767px) { .dg-ptop .accountinfo li.location { max-width: none; } }
.dg-pslide > .ogapoll-core { box-sizing: border-box; width: 100%; }
.dg-pslide .ogapoll-pc-actions .dg-fol { display: none; }   /* a narrow card: the author's name first (the template's promoted card) */
.dg-promoside { overflow: hidden; }
/* the lists' rows: a long name is cut (…) and never pushes the Follow button out; the bio on 2 lines; the modal's tabs
   centred (Suggested has no number) */
.dg-prow2 .who b { min-width: 0; }
.dg-prow2 .who b .nmx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-prow2 .who b img { flex: none; }
.dg-prow2 .bio { -webkit-line-clamp: 2; }
.dg-pm-tabs button { justify-content: center; min-height: 58px; }
/* a phone's card header (owner 2026-10-24): the name first — Follow becomes a short blue word (Instagram), hidden once
   followed; the ⋯ stays */
@media (max-width: 767px) {
  .dg-post .ogapoll-pc-actions .dg-fol { border: 0 !important; background: none !important; padding: 0 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #1D9BF0 !important; min-width: 0; height: auto; }
  .dg-post .ogapoll-pc-actions .dg-fol.on { display: none !important; }
  .dg-post .ogapoll-pc-actions { gap: 0; }
}
.dg-prow2 .dg-fol { background: transparent; }

/* ---- private accounts (phase 4.5): the Requested button, the lock card, the requests' Accept / Decline ---------------- */
.dg-fol.req { color: #536471 !important; border-color: #E1E8ED !important; background: #F7F9FA !important; }
.dg-lockcard { background: #fff; border: 1px solid var(--line, #E9EDF1); border-radius: 16px; padding: 36px 20px; text-align: center; color: #536471; margin: 0 0 14px; }
.dg-lockcard img { margin: 0 auto 10px; opacity: .8; } .dg-lockcard b { display: block; color: #0F1419; font-size: 17px; margin-bottom: 4px; } .dg-lockcard p { margin: 0; font-size: 14px; }
.dg-reqbtns { display: flex; gap: 6px; justify-self: end; }
.dg-reqbtns button { border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.dg-req-ok { background: #1D9BF0; color: #fff; } .dg-req-no { background: transparent; color: #536471; border-color: #E1E8ED !important; }
.dg-reqbtns button:disabled { opacity: .5; }
.dg-reqn { margin-left: 4px; color: #E63329; }
body.dg-locked #dgFeed, body.dg-locked #dgNew, body.dg-locked .more { display: none !important; }   /* a private account seen by a non-follower: the lock card only */

/* ---- a phone's profile top, round 4 (owner 2026-10-25): the name at the TOP, level with the photo; line 1 = name +
   badge + ⋯, line 2 = @handle + badges + Follow / Following (on the right); the circles further apart, names readable -- */
@media (max-width: 767px) {
  .dg-ptop .profilewrappertopleft { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; }
  .dg-ptop .secprofileimg { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .dg-ptop .dg-prow, .dg-ptop .dg-prow .dg-pacts { display: contents !important; }
  .dg-ptop .dg-prow h5 { grid-column: 2; grid-row: 1; align-self: start; margin-top: 2px; min-width: 0; }
  .dg-ptop .dg-pacts .moreoptionmenuwrapper { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .dg-ptop .dg-pacts > .cmbutton, .dg-ptop .dg-pacts > .dg-fol { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; margin-top: 4px; }
  .dg-ptop .dg-phandle { grid-column: 2; grid-row: 2; align-self: center; margin-top: 4px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
  .dg-ptop .dg-phandle > span { flex: none; } .dg-ptop .dg-phandle > span:first-child { flex: 0 1 auto; min-width: 0; }
  .dg-ptop .profileintro, .dg-ptop .accountinfo { grid-column: 1 / -1; }
}
/* a computer: the circles a little further apart too */
/* phone: name and @handle tight under each other; the ⋯ and Follow buttons no longer drive the row heights */
@media (max-width: 767px) {
  .dg-ptop .profilewrappertopleft { row-gap: 0; }
  .dg-ptop .dg-prow h5 { margin-top: 6px !important; line-height: 20px; }
  .dg-ptop .dg-pacts .moreoptionmenuwrapper { height: 20px; margin-top: 6px; display: flex; align-items: center; }
  .dg-ptop .dg-phandle { margin-top: 2px !important; line-height: 20px; }
  .dg-ptop .dg-pacts > .cmbutton, .dg-ptop .dg-pacts > .dg-fol { margin: -4px 0 -8px !important; }
}

.dg-tile > img.dg-tile-reel { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

/* Send in a message (phase 7) */
.dg-dmshare .dg-dms { max-width: 440px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; }
.dg-dms-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #EBEEF0; font: 700 17px Inter, system-ui, sans-serif; }
.dg-dms-h button { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; }
.dg-dms-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; min-height: 120px; }
.dg-dms-list label { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; margin: 0; }
.dg-dms-list label:hover { background: #F7F9FA; }
.dg-dms-list b { flex: 1; min-width: 0; font: 550 15px Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-dms-list input { width: 22px; height: 22px; accent-color: #1D9BF0; flex: none; }
.dg-dms-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font: 700 13px Inter, system-ui, sans-serif; flex: none; }
.dg-dms-av img { width: 100%; height: 100%; object-fit: cover; }
.dg-dms-av.grp { background: linear-gradient(135deg, #1D9BF0, #0B2C57); }
.dg-dms-none { padding: 20px 16px; color: #536471; text-align: center; font-size: 14px; }
.dg-dms-wait { height: 44px; margin: 8px 16px; border-radius: 10px; background: #EEF1F4; }
.dg-dms-f { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #EBEEF0; }
.dg-dms-f input { flex: 1; min-width: 0; border: 1px solid #EBEEF0; border-radius: 999px; padding: 8px 14px; font: 15px Inter, system-ui, sans-serif; }
.dg-dmshare [data-msg] { padding: 0 16px 10px; }

/* the profile's channels (phase 7) */
.dg-chan { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #EFF3F4; }
.dg-chan-ic { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #1D9BF0, #0B2C57); display: grid; place-items: center; font-size: 20px; flex: none; }
.dg-chan-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dg-chan-w b { font: 550 15px Inter, system-ui, sans-serif; }
.dg-chan-w small { font-size: 13px; color: #536471; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* row 1 of a poll post (owner 2026-10-26): share + DGC on the left, the poll's vote / results / time on the right */
.dg-post .ogapoll-pc-info .dg-poll-right, .ogapoll-core .ogapoll-pc-info .dg-poll-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* saved = red (the approved bookmark-fill icon recoloured, never a new icon) */
.ogapoll-pc-save.active img.on { filter: brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(4870%) hue-rotate(349deg) brightness(91%) contrast(95%); }
.dg-post .ogapoll-pc-stats .ogapoll-pc-save { display: inline-flex; align-items: center; gap: 6px; }

/* a text post's height (owner 2026-10-26): low / medium (as before) / tall */
.dg-tbg.h-s { aspect-ratio: 2.4 / 1; min-height: 140px; }
.dg-tbg.h-m { aspect-ratio: 1.4 / 1; min-height: 240px; }
.dg-tbg.h-l { aspect-ratio: 1 / 1; min-height: 300px; }

/* Edit profile > Settings */
.dg-pe-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 8px; }
.dg-pe-radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.dg-pe-field { display: block; margin-top: 10px; }
.dg-pe-field b { display: block; font-size: 14px; margin-bottom: 4px; }
.dg-pe-field textarea { width: 100%; border: 1px solid #CFD9DE; border-radius: 10px; padding: 8px 10px; font: 14px Inter, system-ui, sans-serif; resize: vertical; }
.dg-pe-field small { display: block; color: #536471; font-size: 12px; margin-top: 4px; }

/* Insights > Audience */
.dg-ins-h { margin: 14px 0 6px; font-size: 14px; color: #536471; }
.dg-ins-w { margin: 6px 0 10px; font-size: 14px; color: #0F1419; }

/* the platform's totals in the menu ("Community 104.1k") */
.dg-nav-n { margin-left: 6px; font-size: 12px; font-weight: 700; color: #536471; }

/* the right column's Trending Posts: the grid's tiles in one row, scrolled left / right (swipe or the arrows) */
.dg-trend-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.dg-trend-row::-webkit-scrollbar { display: none; }
.dg-trend-row > * { flex: 0 0 calc((100% - 8px) / 2); scroll-snap-align: start; }

/* Add a sound: the streaming links */
.dg-sndlinks { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.dg-sndlinks legend { font-size: 13px; font-weight: 700; margin-bottom: 4px; }

/* /audio/{id}: the artist's clip and links */
.dg-sndfull { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.dg-sndbtn.red { background: #E21B2D; color: #fff; border-color: #E21B2D; display: inline-flex; align-items: center; gap: 6px; }
.dg-sndbtn.red img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.dg-clip-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dg-clip { position: relative; width: min(900px, 100%); }
.dg-clip video { width: 100%; max-height: 80vh; border-radius: 12px; background: #000; display: block; }
.dg-clip-x { position: absolute; top: -40px; right: 0; border: 0; background: none; color: #fff; font-size: 34px; cursor: pointer; }

/* the post's author block: ALWAYS 2 lines (owner 2026-10-26) — the time never cut, the place / badges cut with … */
.dg-top .ogapoll-pc-line1 .dg-time, .dg-top .ogapoll-pc-line1 .dg-edited { flex: none; white-space: nowrap; }
.dg-top .ogapoll-pc-line2 > * { flex: none; }
.dg-top .ogapoll-pc-line2 .dg-loc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }