/* THE Duegho shell components, on every page (one source, owner 2026-10-24): the red header (.hd), the 2nd header
   (.m2, .pill), the left menu (#dgNav .nav, a drawer on phones), the phone's bottom bar (.bb). Moved out of the feed page;
   the other layouts (_DgShell, _pageLayout, _LayoutHome) load the same file. Rules scoped to these components only. */
:root{--red:#E21B2D;--redD:#B8121F;--ink:#14171A;--mute:#657786;--line:#E9EDF1;--bg:#F4F6F8;--card:#fff;--blue:#1D9BF0;--pill:#EEF5FB}
.hd{position:sticky;top:0;z-index:50;background:var(--red);color:#fff}
.hd-in{max-width:1240px;margin:0 auto;height:50px;display:flex;align-items:center;gap:12px;padding:0 16px}
.logo{flex:none;display:flex;align-items:center;gap:8px;font:800 24px/1 Poppins,system-ui,sans-serif;letter-spacing:-.5px}
.navtogglebtn{display:none;flex:none;width:35px;height:35px;border:1px solid #1DA1F2;border-radius:6px;background:#fff;padding:6px 6px 7px;position:relative}
.menulines{display:block;width:20px;height:3px;background:#1DA1F2;position:relative;margin:9px auto 0;transition:all .4s cubic-bezier(.45,1,.32,1)}
.menulines:before,.menulines:after{content:"";position:absolute;left:0;width:20px;height:3px;background:#1DA1F2;transition:all .4s cubic-bezier(.45,1,.32,1)}
.menulines:before{top:7px}
.menulines:after{top:-7px}
.navtogglebtn.active .menulines{background:none}
.navtogglebtn.active .menulines:before,.navtogglebtn.active .menulines:after{top:0}
.navtogglebtn.active .menulines:before{transform:rotate(45deg)}
.navtogglebtn.active .menulines:after{transform:rotate(-45deg)}
.dg-veil{position:fixed;inset:0;z-index:105;background:rgba(0,0,0,.4)}
@media (max-width:960px){.navtogglebtn{display:block}body .nav,body.dg-full .nav{display:flex!important;position:fixed;top:0;left:-260px;width:240px;height:100vh;z-index:110;background:#fff;padding:72px 12px 20px;box-shadow:4px 0 24px rgba(0,0,0,.18);transition:left .25s;overflow-y:auto}body .nav.open{left:0}body .nav span{display:inline!important}}
.srch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 15px Nunito,system-ui,sans-serif;color:var(--ink)}
.ib.dg-srch-ib{display:none}
@media (max-width:960px){.ib.dg-srch-ib{display:grid}}
@media (max-width:300px){.ib.dg-srch-ib{display:none}}
.logo .lg-full{height:32px;width:auto}
.logo .lg-mini{display:none;width:32px;height:32px;border-radius:50%;background:#fff}
.srch{flex:1;max-width:420px;margin:0 auto;display:flex;align-items:center;gap:8px;background:#fff;color:var(--mute);border-radius:999px;height:38px;padding:0 14px}
.srch input{border:0;outline:0;flex:1;font:inherit;color:var(--ink);background:transparent;min-width:0}
.hd-act{display:flex;align-items:center;gap:10px;margin-left:auto}
.ib{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.7)}
.ib svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.btn-w{background:#fff;color:var(--red);font-weight:800;border-radius:999px;padding:8px 16px;white-space:nowrap;flex:none}
@media (max-width:420px){.btn-w{padding:6px 12px;font-size:14px}}
@media (max-width:360px){.logo .lg-full{display:none}.logo .lg-mini{display:block}}
.m2{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 14px -10px rgba(0,0,0,.28);position:sticky;top:50px;z-index:40}
.m2-row{max-width:1240px;margin:0 auto;display:flex;gap:10px;overflow-x:auto;padding:6px 16px;scrollbar-width:none}
.m2-row::-webkit-scrollbar{display:none}
.pill{flex:none;padding:7px 16px;border-radius:999px;border:1px solid #D9E7F3;background:var(--pill);font:700 14px/1.2 Nunito,system-ui,sans-serif;white-space:nowrap}
.pill.on{background:var(--red);border-color:var(--red);color:#fff}
.nav{position:sticky;top:112px;align-self:start;display:flex;flex-direction:column;gap:4px}
.nav a,.nav button{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;font-weight:800;color:var(--ink);text-align:left}
.nav a.on{color:var(--red);background:#FDECEE}
.nav a:hover,.nav button:hover{background:#fff}
.nav .ic{width:22px;height:22px;object-fit:contain}
.nav .dg-nav-search{display:none!important}
@media (max-width:960px){body .nav .dg-nav-search{display:flex!important}}
.nav .ic-dark{filter:brightness(0);opacity:.85}
.nav .cta{margin-top:10px;justify-content:center;background:var(--red);color:#fff;border-radius:999px}
.nav .cta:hover{background:var(--redD)}
.bb{display:none}
@media (max-width:1180px){.nav span{display:none}.nav .cta{padding:10px}}
@media (max-width:960px){.srch{display:none}}
@media (max-width:767px){.hd-in{height:46px;padding:0 12px}.m2{top:46px}.bb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#0B2C57;height:64px;padding-bottom:env(safe-area-inset-bottom);align-items:center;justify-content:space-around}.bb a,.bb button{width:52px;height:52px;display:grid;place-items:center}.bb .ic{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}.bb a:hover .ic,.bb a.on .ic{opacity:1}.bb .plus .ic,.nav .cta .ic{filter:none;width:22px;height:22px}.bb .plus{width:46px;height:46px;border-radius:50%;background:var(--red)}.bb img{width:30px;height:30px}}
.hd,.m2,.bb,#dgNav{box-sizing:border-box;font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.45}
.hd *,.m2 *,.bb *,#dgNav *{box-sizing:border-box}
.hd a,.m2 a,.bb a,#dgNav a{color:inherit;text-decoration:none}
.hd button,.m2 button,.bb button,#dgNav button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.hd img,.bb img,#dgNav img{max-width:100%;display:block}
.m2 .pill{color:var(--ink)}.m2 .pill.on{color:#fff}
/* the page grid of the shell: left menu · centre · right column (the feed, the profile, /coin, /pay…) */
.wrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,640px) 320px;gap:24px;padding:18px 16px 90px;justify-content:center}
.dg-full .wrap{grid-template-columns:minmax(0,1fr)!important;max-width:1240px;padding-left:16px;padding-right:16px}
.dg-full .nav,.dg-full .side,.dg-full #dgSideMobile{display:none!important}
.side{position:sticky;top:112px;align-self:start;display:flex;flex-direction:column;gap:16px}
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.box h3{margin:0 0 10px;font:800 17px/1.2 Poppins,system-ui,sans-serif}
.sk{height:14px;border-radius:7px;background:linear-gradient(90deg,#eef1f4,#f7f9fa,#eef1f4);background-size:200% 100%;animation:sk 1.2s infinite;margin:10px 0}
@keyframes sk{to{background-position:-200% 0}}
@media (max-width:1180px){.wrap{grid-template-columns:76px minmax(0,640px) 300px}}
@media (max-width:960px){.wrap{grid-template-columns:minmax(0,640px)}}
@media (max-width:767px){.dg-full .wrap{padding-left:12px!important;padding-right:12px!important}.wrap{padding:10px 0 84px;gap:0}}
/* pages without the left column (the Core-built pages: gifts, super chat, polls, legal): the same left menu, as a drawer
   opened by the header's ☰ at every width */
.dg-navdrawer .navtogglebtn{display:block}
.dg-navdrawer #dgNav{display:flex!important;flex-direction:column;gap:4px;position:fixed;top:0;left:-260px;width:240px;height:100vh;z-index:110;background:#fff;padding:72px 12px 20px;box-shadow:4px 0 24px rgba(0,0,0,.18);transition:left .25s;overflow-y:auto}
.dg-navdrawer #dgNav.open{left:0}.dg-navdrawer #dgNav span{display:inline!important}
.dg-navdrawer .dg-veil{position:fixed;inset:0;z-index:105;background:rgba(0,0,0,.4)}
.hd .dg-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#1D9BF0;color:#fff;font:800 11px/18px Nunito,system-ui,sans-serif;text-align:center;border:2px solid #E21B2D}
.hd .dg-badge[hidden]{display:none}
.dg-bell{position:relative}
.dg-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:200;background:#14171A;color:#fff;font-weight:700;padding:10px 16px;border-radius:999px}
.dg-foot{max-width:1240px;margin:0 auto;padding:18px 16px 90px;color:var(--mute);font:600 13px Nunito,system-ui,sans-serif;display:flex;gap:14px;flex-wrap:wrap}
.dg-foot a{color:var(--mute)}

/* the right column's people rows (/feed/side, on every page with the column) */
.side .ch{display:flex;align-items:center;gap:10px;padding:12px 14px 6px}
.side .av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 16px Poppins,system-ui,sans-serif;overflow:hidden}
.side .av img{width:100%;height:100%;object-fit:cover}
.side .who{min-width:0;flex:1}
.side .nm{font-weight:800;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.side .sub{color:var(--mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .fol{flex:none;font-weight:800;color:var(--blue);border:1.5px solid var(--blue);border-radius:999px;padding:4px 12px;font-size:13px;background:none;cursor:pointer}
.side .fol.on{color:var(--mute);border-color:var(--line)}
.side a{color:inherit;text-decoration:none}
.dg-bell img{filter:brightness(0) invert(1)}
.hd .btn-w{color:var(--red)}   /* "Sign in": red text on its white pill (the components reset made it white on white) */
/* the right column's people (the template's "You Might Like"): a line between the rows, transparent outline Follow,
   the name cut (…) then the red badge, the @handle only */
.side .box .ch{padding:10px 0!important;border-top:1px solid var(--line)}
.side .box h3 + .ch{border-top:0}
.side .nm span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .nm .vb{width:16px;height:16px;flex:none}
.side .fol{background:transparent!important;border:1px solid #A9D8F7;color:#1D9BF0;font-weight:600}
.side .fol:hover{background:#EEF7FE!important}
.side .fol.on{color:var(--mute);border-color:var(--line)}

/* Messages (phase 7): the unread badge of the menu */
.nav .dg-nav-msg { position: relative; }
.dg-msg-badge { min-width: 18px; height: 18px; border-radius: 999px; background: #1D9BF0; color: #fff; font: 700 11px/18px Inter, system-ui, sans-serif; text-align: center; padding: 0 5px; font-style: normal; margin-left: auto; }
.dg-msg-badge[hidden] { display: none; }
@media (max-width: 1180px) and (min-width: 961px) { .nav .dg-msg-badge { position: absolute; top: 2px; left: 34px; margin: 0; } }

/* the footer (_DgFooter, owner 2026-10-25): language, (c) Duegho, Terms, Privacy - the right column, or the left menu's bottom */
.dg-sfoot{padding:12px 6px 4px;font:500 13px Inter,system-ui,sans-serif;color:#536471}
.dg-lang select{width:100%;height:38px;padding:0 34px 0 12px;border:1px solid #CFD9DE;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23536471' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;font:600 14px Inter,system-ui,sans-serif;color:#0F1419;cursor:pointer}
.dg-sfoot-b{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
.dg-sfoot-b a{color:#536471;text-decoration:none}
.dg-sfoot-b a:hover{text-decoration:underline}
.nav .dg-sfoot-nav{display:none}
body.dg-noside .nav .dg-sfoot-nav{display:block}
@media (max-width:960px){.nav .dg-sfoot-nav{display:block}}
@media (min-width:961px) and (max-width:1180px){.nav .dg-sfoot-nav{display:none!important}}
.nav .dg-sfoot{padding:14px 12px 4px}
.nav .dg-sfoot-b a,.nav .dg-sfoot-b span{display:inline;padding:0;margin:0;font:500 13px Inter,system-ui,sans-serif;color:#536471;background:none;border-radius:0;min-height:0;gap:0}
.nav .dg-sfoot-b a:hover{background:none}
@media (min-width:961px){body.dg-noside .nav{max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:none}body.dg-noside .nav::-webkit-scrollbar{display:none}}
/* the bottom bar (owner 2026-10-26): 6 equal slots; the "+" in the middle, raised half outside the bar, ringed with the page's colour */
@media (max-width:767px){
  .bb{justify-content:space-between;padding-left:4px;padding-right:4px;overflow:visible}
  .bb>a,.bb>button{flex:1 1 0;width:auto}
  .bb .plus{flex:0 0 52px;width:52px;height:52px;transform:translateY(-32px);border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25);display:grid;place-items:center}
  .bb .plus .ic{width:24px;height:24px}
}