/* Customer Social — a Facebook-style look. Everything is under .cs so the shared
   vendor.css (Bootstrap, Font Awesome) cannot reach in, except the icons. */
:root { --cs-blue:#1877f2; --cs-blue-d:#166fe5; --cs-blue-s:#e7f3ff; --cs-bg:#f0f2f5; --cs-card:#fff; --cs-line:#e4e6eb;
  --cs-text:#050505; --cs-mute:#65676b; --cs-hover:#f2f2f2; --cs-green:#42b72a; --cs-red:#e41e3f; --cs-top:56px; }
html, body { margin:0; padding:0; }
body.cs { background:var(--cs-bg); color:var(--cs-text); font:15px/1.34 -apple-system, "Segoe UI", Helvetica, Arial, "Noto Sans Khmer", "Kantumruy Pro", sans-serif; }
.cs a { color:inherit; text-decoration:none; }
.cs * { box-sizing:border-box; }
.cs button { font:inherit; cursor:pointer; }
.cs img { max-width:100%; }
.cs .muted { color:var(--cs-mute); }
.cs .hide { display:none !important; }

/* top bar */
.cs-top { position:fixed; top:0; left:0; right:0; height:var(--cs-top); background:#fff; z-index:50; display:flex; align-items:center;
  padding:0 16px; box-shadow:0 1px 2px rgba(0,0,0,.12); gap:8px; transition:transform .25s; }
.cs-top .cs-logo { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--cs-blue); flex:0 0 40px; }
.cs-top .cs-brand { font-weight:800; font-size:22px; color:var(--cs-blue); letter-spacing:-.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.cs-search { position:relative; }
.cs-search input { height:40px; border:0; border-radius:20px; background:var(--cs-bg); padding:0 14px 0 38px; width:240px; outline:none; font-size:15px; }
.cs-search i { position:absolute; left:14px; top:12px; color:var(--cs-mute); }
.cs-nav { flex:1; display:flex; justify-content:center; gap:6px; height:100%; }
.cs-nav a { position:relative; display:flex; align-items:center; justify-content:center; width:110px; height:100%; color:var(--cs-mute); font-size:22px; border-bottom:3px solid transparent; }
.cs-nav a:hover { background:var(--cs-hover); border-radius:8px; height:48px; margin-top:4px; }
.cs-nav a.on { color:var(--cs-blue); border-bottom-color:var(--cs-blue); border-radius:0; }
.cs-nav a.on:hover { height:100%; margin-top:0; }
.cs-right { display:flex; align-items:center; gap:8px; }
.cs-circle { position:relative; width:40px; height:40px; border-radius:50%; background:#e4e6eb; display:inline-flex; align-items:center; justify-content:center; font-size:18px; color:var(--cs-text); border:0; }
.cs-circle.on { background:var(--cs-blue-s); color:var(--cs-blue); }
.cs-circle img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.cs-badge { position:absolute; top:-4px; right:-4px; background:var(--cs-red); color:#fff; font-size:11px; font-weight:700; min-width:19px; height:19px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.cs-tabs { display:none; }

/* three columns */
.cs-wrap { display:flex; justify-content:space-between; gap:24px; padding:calc(var(--cs-top) + 16px) 16px 40px; max-width:1920px; margin:0 auto; }
.cs-left, .cs-side { width:340px; flex:0 0 340px; position:sticky; top:calc(var(--cs-top) + 16px); align-self:flex-start; max-height:calc(100vh - var(--cs-top) - 24px); overflow-y:auto; scrollbar-width:none; }
.cs-left::-webkit-scrollbar, .cs-side::-webkit-scrollbar { display:none; }
.cs-main { flex:0 1 680px; min-width:0; margin:0 auto; }
.cs-main.wide { flex-basis:1100px; }
.cs-row { display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; font-weight:600; }
.cs-row:hover { background:#e4e6eb; }
.cs-row .ic { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; flex:0 0 36px; }
.cs-row img.ic { object-fit:cover; }
.cs-h { color:var(--cs-mute); font-weight:600; font-size:17px; margin:16px 8px 6px; display:flex; justify-content:space-between; }
.cs-h a { color:var(--cs-blue); font-size:15px; font-weight:400; }
.cs-sep { border-top:1px solid #ced0d4; margin:8px; }

/* cards */
.cs-card { background:var(--cs-card); border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); margin-bottom:16px; }
.cs-pad { padding:12px 16px; }

/* composer */
.cs-compose { padding:12px 16px 10px; }
.cs-compose .top { display:flex; gap:8px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--cs-line); }
.cs-av { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 40px; background:#ddd; }
.cs-av.sm { width:32px; height:32px; flex-basis:32px; }
.cs-fake { flex:1; height:40px; border-radius:20px; background:var(--cs-bg); border:0; text-align:left; padding:0 14px; color:var(--cs-mute); font-size:16px; }
.cs-fake:hover { background:#e4e6eb; }
.cs-compose .acts { display:flex; padding-top:8px; }
.cs-compose .acts button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border:0; background:transparent; border-radius:8px; color:var(--cs-mute); font-weight:600; }
.cs-compose .acts button:hover { background:var(--cs-hover); }

/* post */
.cs-post { padding-top:12px; }
.cs-post.hidden-post { opacity:.6; }
.cs-ph { display:flex; align-items:center; gap:8px; padding:0 16px 12px; }
.cs-ph .who { flex:1; min-width:0; }
.cs-ph .who b { display:block; font-size:15px; }
.cs-ph .who b a:hover { text-decoration:underline; }
.cs-ph .who small { color:var(--cs-mute); font-size:13px; }
.cs-verified { color:var(--cs-blue); font-size:13px; margin-left:3px; }
.cs-dots { width:36px; height:36px; border-radius:50%; border:0; background:transparent; color:var(--cs-mute); font-size:18px; }
.cs-dots:hover { background:var(--cs-hover); }
.cs-menu-pop { position:absolute; right:12px; top:44px; background:#fff; border-radius:8px; box-shadow:0 12px 28px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); padding:8px; z-index:30; min-width:240px; }
.cs-menu-pop button, .cs-menu-pop a { display:flex; width:100%; align-items:center; gap:12px; border:0; background:transparent; padding:8px; border-radius:6px; font-weight:600; text-align:left; }
.cs-menu-pop button:hover, .cs-menu-pop a:hover { background:var(--cs-hover); }
.cs-menu-pop i { width:20px; text-align:center; font-size:17px; }
.cs-body { padding:0 16px 12px; white-space:pre-wrap; word-wrap:break-word; }
.cs-body.big { font-size:24px; line-height:1.25; }
.cs-flag { margin:0 16px 10px; padding:6px 10px; background:#fff3cd; color:#7a5d00; border-radius:6px; font-size:13px; font-weight:600; }
.cs-media { display:grid; gap:2px; background:#000; }
.cs-media.n1 { grid-template-columns:1fr; }
.cs-media.n2 { grid-template-columns:1fr 1fr; }
.cs-media.n3 { grid-template-columns:1fr 1fr; } .cs-media.n3 > :first-child { grid-column:1 / 3; }
.cs-media.n4, .cs-media.nmany { grid-template-columns:1fr 1fr; }
.cs-media > * { position:relative; display:block; background:#f0f2f5; overflow:hidden; }
.cs-media img { display:block; width:100%; height:100%; object-fit:cover; max-height:620px; cursor:zoom-in; }
.cs-media.n1 img { object-fit:contain; background:#f0f2f5; max-height:720px; }
.cs-media.n2 > *, .cs-media.n3 > *, .cs-media.n4 > *, .cs-media.nmany > * { aspect-ratio:1 / 1; }
.cs-media.n3 > :first-child { aspect-ratio:2 / 1; }
.cs-media .more { position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; font-size:32px; font-weight:700; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.cs-video { position:relative; background:#000; }
.cs-video video { display:block; width:100%; max-height:680px; background:#000; }
.cs-video .snd { position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; }
.cs-video .len { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; border-radius:4px; padding:2px 6px; }
.cs-prod { display:flex; gap:12px; margin:0 16px 12px; border:1px solid var(--cs-line); border-radius:8px; overflow:hidden; background:#f7f8fa; }
.cs-prod img { width:120px; height:120px; object-fit:cover; flex:0 0 120px; background:#fff; }
.cs-prod .info { padding:10px 10px 10px 0; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.cs-prod .info b { font-size:16px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cs-prod .price { color:var(--cs-text); font-weight:700; font-size:17px; }
.cs-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:6px; border:0; font-weight:600; background:#e4e6eb; color:var(--cs-text) !important; }
.cs-btn:hover { background:#d8dadf; }
.cs-btn.blue { background:var(--cs-blue); color:#fff !important; }
.cs-btn.blue:hover { background:var(--cs-blue-d); }
.cs-btn.soft { background:var(--cs-blue-s); color:var(--cs-blue) !important; }
.cs-btn.green { background:var(--cs-green); color:#fff !important; }
.cs-btn.block { width:100%; }
.cs-ev { margin:0 16px 12px; border:1px solid var(--cs-line); border-radius:8px; overflow:hidden; display:block; }
.cs-ev .cover { height:180px; background:linear-gradient(135deg,#1877f2,#7b2ff7) center/cover; }
.cs-ev .info { padding:10px 12px; }
.cs-ev .info small { color:var(--cs-red); font-weight:700; text-transform:uppercase; font-size:13px; }
.cs-ev .info b { display:block; font-size:17px; }
.cs-stats { display:flex; justify-content:space-between; align-items:center; margin:0 16px; padding:10px 0; color:var(--cs-mute); font-size:15px; }
.cs-stats .emo { display:inline-flex; align-items:center; gap:6px; }
.cs-stats .emo span.e { display:inline-flex; }
.cs-stats .emo span.e i { font-style:normal; width:20px; height:20px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:14px; margin-right:-4px; box-shadow:0 0 0 2px #fff; }
.cs-stats button { border:0; background:transparent; color:var(--cs-mute); }
.cs-stats button:hover { text-decoration:underline; }
.cs-bar { display:flex; margin:0 16px; border-top:1px solid var(--cs-line); padding:4px 0; position:relative; }
.cs-bar > button, .cs-bar > .rw > button { flex:1; height:36px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:transparent; border-radius:6px; color:var(--cs-mute); font-weight:600; width:100%; }
.cs-bar > .rw { flex:1; position:relative; }
.cs-bar > button:hover, .cs-bar > .rw > button:hover { background:var(--cs-hover); }
.cs-bar .react.on { color:var(--cs-blue); }
.cs-bar .react.on.love { color:#f33e58; } .cs-bar .react.on.haha, .cs-bar .react.on.wow, .cs-bar .react.on.sad { color:#f7b125; } .cs-bar .react.on.angry { color:#e9710f; }
.cs-bar .react .em { font-size:18px; }
.cs-picker { position:absolute; bottom:40px; left:0; background:#fff; border-radius:30px; box-shadow:0 2px 12px rgba(0,0,0,.2); padding:5px 6px; display:flex; gap:2px; z-index:20; opacity:0; transform:translateY(8px); pointer-events:none; transition:.15s; }
.cs-picker.show { opacity:1; transform:none; pointer-events:auto; }
.cs-picker button { border:0; background:transparent; font-size:30px; width:44px; height:44px; border-radius:50%; transition:transform .12s; padding:0; }
.cs-picker button:hover { transform:scale(1.3) translateY(-4px); }
.cs-cms { padding:4px 16px 12px; border-top:1px solid var(--cs-line); margin:0 0; }
.cs-cms .more-c { border:0; background:transparent; color:var(--cs-mute); font-weight:600; padding:6px 0; }
.cs-cms .more-c:hover { text-decoration:underline; }
.cs-c { display:flex; gap:6px; margin:6px 0; align-items:flex-start; }
.cs-c .bub { background:var(--cs-bg); border-radius:18px; padding:8px 12px; max-width:calc(100% - 50px); }
.cs-c .bub b { font-size:13px; display:block; }
.cs-c .bub span { white-space:pre-wrap; word-wrap:break-word; }
.cs-c .meta { font-size:12px; color:var(--cs-mute); padding:2px 12px; display:flex; gap:12px; }
.cs-c .meta button { border:0; background:transparent; color:var(--cs-mute); font-weight:700; font-size:12px; padding:0; }
.cs-cform { display:flex; gap:6px; align-items:center; margin-top:8px; }
.cs-cform .box { flex:1; display:flex; background:var(--cs-bg); border-radius:20px; align-items:center; }
.cs-cform input { flex:1; height:36px; border:0; background:transparent; padding:0 12px; outline:none; font-size:15px; min-width:0; }
.cs-cform button { border:0; background:transparent; color:var(--cs-blue); width:36px; height:36px; font-size:16px; }
.cs-end { text-align:center; color:var(--cs-mute); padding:20px; }
.cs-loader { text-align:center; padding:20px; color:var(--cs-mute); }
.cs-skel { height:280px; background:linear-gradient(90deg,#fff 0,#f0f2f5 40%,#fff 80%); background-size:200% 100%; animation:cs-sk 1.2s infinite; border-radius:8px; margin-bottom:16px; }
@keyframes cs-sk { from { background-position:200% 0 } to { background-position:-200% 0 } }

/* side widgets */
.cs-sp { display:flex; gap:12px; padding:8px; border-radius:8px; align-items:center; }
.cs-sp:hover { background:#e4e6eb; }
.cs-sp img { width:120px; height:120px; border-radius:8px; object-fit:cover; flex:0 0 120px; background:#fff; }
.cs-sp b { display:block; }
.cs-evmini { display:flex; gap:10px; padding:8px; border-radius:8px; align-items:center; }
.cs-evmini:hover { background:#e4e6eb; }
.cs-date { width:44px; flex:0 0 44px; border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); text-align:center; overflow:hidden; }
.cs-date small { display:block; background:var(--cs-red); color:#fff; font-size:11px; font-weight:700; padding:1px 0; }
.cs-date b { font-size:18px; }

/* modal */
.cs-modal { position:fixed; inset:0; background:rgba(244,244,244,.8); z-index:100; display:none; align-items:center; justify-content:center; padding:16px; }
.cs-modal.show { display:flex; }
.cs-dialog { background:#fff; border-radius:8px; width:500px; max-width:100%; box-shadow:0 12px 28px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); max-height:calc(100vh - 32px); display:flex; flex-direction:column; }
.cs-dialog header { position:relative; text-align:center; font-weight:700; font-size:20px; padding:16px; border-bottom:1px solid var(--cs-line); }
.cs-dialog header .x { position:absolute; right:12px; top:10px; }
.cs-dialog .in { padding:16px; overflow-y:auto; }
.cs-dialog textarea { width:100%; border:0; outline:none; resize:none; font-size:22px; min-height:110px; font-family:inherit; }
.cs-dialog textarea.small { font-size:15px; }
.cs-addbox { display:flex; align-items:center; justify-content:space-between; border:1px solid #ced0d4; border-radius:8px; padding:8px 14px; margin-top:10px; font-weight:600; }
.cs-addbox .ico { display:flex; gap:4px; }
.cs-addbox .ico button, .cs-addbox .ico label { width:36px; height:36px; border-radius:50%; border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; margin:0; }
.cs-addbox .ico button:hover, .cs-addbox .ico label:hover { background:var(--cs-hover); }
.cs-prev { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.cs-prev > div { position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#eee; }
.cs-prev img, .cs-prev video { width:100%; height:100%; object-fit:cover; display:block; }
.cs-prev .rm { position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.cs-prev .tag { position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:1px 5px; border-radius:4px; }
.cs-err { color:var(--cs-red); font-weight:600; margin-top:8px; font-size:14px; }
.cs-pick-list { max-height:260px; overflow:auto; margin-top:8px; }
.cs-pick-list button { display:flex; gap:10px; align-items:center; width:100%; border:0; background:transparent; padding:6px; border-radius:6px; text-align:left; }
.cs-pick-list button:hover { background:var(--cs-hover); }
.cs-pick-list img { width:44px; height:44px; border-radius:6px; object-fit:cover; }
.cs-input { width:100%; height:40px; border:1px solid #ced0d4; border-radius:6px; padding:0 12px; font-size:15px; outline:none; font-family:inherit; }
.cs-input:focus { border-color:var(--cs-blue); box-shadow:0 0 0 2px var(--cs-blue-s); }
textarea.cs-input { height:auto; padding:10px 12px; }
.cs-label { font-weight:600; margin:12px 0 6px; display:block; }

/* lightbox */
.cs-lb { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:200; display:none; align-items:center; justify-content:center; }
.cs-lb.show { display:flex; }
.cs-lb img { max-width:96vw; max-height:92vh; object-fit:contain; }
.cs-lb button { position:absolute; border:0; background:rgba(255,255,255,.15); color:#fff; width:46px; height:46px; border-radius:50%; font-size:20px; }
.cs-lb .x { top:14px; right:14px; } .cs-lb .p { left:14px; top:50%; } .cs-lb .n { right:14px; top:50%; }

/* marketplace */
.cs-mk-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.cs-mk-head h1 { font-size:24px; margin:0; flex:1; }
.cs-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; scrollbar-width:none; }
.cs-chips a { white-space:nowrap; padding:7px 14px; border-radius:18px; background:#e4e6eb; font-weight:600; font-size:14px; }
.cs-chips a.on { background:var(--cs-blue-s); color:var(--cs-blue); }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.cs-item { display:block; }
.cs-item .im { aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.cs-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.cs-item:hover img { transform:scale(1.03); }
.cs-item .pr { font-weight:700; font-size:17px; margin-top:6px; }
.cs-item .nm { font-size:15px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cs-pd { display:flex; gap:0; background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); overflow:hidden; }
.cs-pd .gal { flex:1 1 60%; background:#18191a; display:flex; flex-direction:column; min-height:420px; }
.cs-pd .gal .big { flex:1; display:flex; align-items:center; justify-content:center; }
.cs-pd .gal .big img { max-height:640px; object-fit:contain; cursor:zoom-in; }
.cs-pd .gal .thumbs { display:flex; gap:6px; padding:8px; overflow-x:auto; }
.cs-pd .gal .thumbs img { width:60px; height:60px; object-fit:cover; border-radius:6px; opacity:.6; cursor:pointer; border:2px solid transparent; }
.cs-pd .gal .thumbs img.on { opacity:1; border-color:#fff; }
.cs-pd .det { flex:0 0 380px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.cs-pd h1 { font-size:24px; margin:0; }
.cs-pd .price { font-size:20px; font-weight:700; }
.cs-qty { display:flex; align-items:center; gap:8px; }
.cs-qty button { width:36px; height:36px; border-radius:50%; border:0; background:#e4e6eb; font-size:18px; }
.cs-qty input { width:60px; text-align:center; height:36px; border:1px solid #ced0d4; border-radius:6px; font-size:16px; }
.cs-vars { display:flex; flex-wrap:wrap; gap:8px; }
.cs-vars label { border:1px solid #ced0d4; border-radius:6px; padding:6px 12px; cursor:pointer; font-weight:600; margin:0; }
.cs-vars input { display:none; }
.cs-vars input:checked + span { color:var(--cs-blue); }
.cs-vars label:has(input:checked) { border-color:var(--cs-blue); background:var(--cs-blue-s); }
.cs-toast { position:fixed; left:50%; bottom:80px; transform:translateX(-50%); background:#323436; color:#fff; padding:10px 18px; border-radius:8px; z-index:300; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.3); }

/* profile */
.cs-prof-head { background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.1); margin:calc(-16px) -16px 16px; }
.cs-prof-in { max-width:1100px; margin:0 auto; padding:0 16px; }
.cs-cover { height:350px; border-radius:0 0 8px 8px; background:linear-gradient(135deg,#d8dadf,#b0b3b8) center/cover; position:relative; }
.cs-cover .chg { position:absolute; right:16px; bottom:16px; }
.cs-prof-row { display:flex; align-items:flex-end; gap:16px; margin-top:-84px; padding:0 16px 16px; position:relative; flex-wrap:wrap; }
.cs-prof-row .pic { position:relative; }
.cs-prof-row .pic img { width:168px; height:168px; border-radius:50%; border:4px solid #fff; object-fit:cover; background:#fff; display:block; }
.cs-prof-row .pic label { position:absolute; right:8px; bottom:8px; margin:0; }
.cs-prof-row .nm { flex:1; padding-bottom:8px; min-width:200px; }
.cs-prof-row h1 { font-size:32px; margin:0; }
.cs-prof-tabs { display:flex; gap:4px; border-top:1px solid #ced0d4; margin:0 16px; }
.cs-prof-tabs a { padding:16px; font-weight:600; color:var(--cs-mute); border-bottom:3px solid transparent; }
.cs-prof-tabs a.on { color:var(--cs-blue); border-bottom-color:var(--cs-blue); }
.cs-prof-body { max-width:1100px; margin:0 auto; display:flex; gap:16px; align-items:flex-start; }
.cs-prof-body .l { flex:0 0 400px; position:sticky; top:calc(var(--cs-top) + 16px); }
.cs-prof-body .r { flex:1; min-width:0; }
.cs-about div { display:flex; gap:12px; align-items:center; padding:6px 0; }
.cs-about i { color:#8c939d; width:20px; text-align:center; font-size:18px; }
.cs-pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; border-radius:8px; overflow:hidden; }
.cs-pgrid a { aspect-ratio:1/1; background:#eee; position:relative; display:block; }
.cs-pgrid img, .cs-pgrid video { width:100%; height:100%; object-fit:cover; display:block; }
.cs-pgrid .pl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; text-shadow:0 1px 4px rgba(0,0,0,.6); }

/* events */
.cs-evcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.cs-evcard { background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); overflow:hidden; display:flex; flex-direction:column; }
.cs-evcard .cover { aspect-ratio:2/1; background:linear-gradient(135deg,#1877f2,#7b2ff7) center/cover; }
.cs-evcard .in { padding:12px; flex:1; display:flex; flex-direction:column; gap:3px; }
.cs-evcard small.when { color:var(--cs-red); font-weight:700; text-transform:uppercase; font-size:13px; }
.cs-evcard b { font-size:17px; }
.cs-evcard .btns { display:flex; gap:6px; margin-top:auto; padding-top:8px; }
.cs-evcard .btns .cs-btn { flex:1; }
.cs-evhero { background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); overflow:hidden; margin-bottom:16px; }
.cs-evhero .cover { aspect-ratio:2.6/1; background:linear-gradient(135deg,#1877f2,#7b2ff7) center/cover; }
.cs-evhero .in { padding:16px 20px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.cs-evhero .in .cs-date { width:64px; flex-basis:64px; } .cs-evhero .in .cs-date b { font-size:28px; }
.cs-evhero h1 { margin:0; font-size:28px; }
.cs-goers { display:flex; flex-wrap:wrap; gap:8px; }
.cs-goers img { width:36px; height:36px; border-radius:50%; object-fit:cover; }

/* menu page */
.cs-mgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cs-mtile { position:relative; background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.15); padding:12px; display:flex; flex-direction:column; gap:8px; font-weight:600; }
.cs-mtile:hover { background:#f7f8fa; }
.cs-mtile i { font-size:24px; }
.cs-mrow { display:flex; align-items:center; gap:12px; padding:12px; border-radius:8px; font-weight:600; background:#fff; margin-bottom:6px; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.cs-mrow i.l { width:36px; height:36px; border-radius:50%; background:#e4e6eb; display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.cs-mrow .r { margin-left:auto; color:var(--cs-mute); }
.cs-switch { position:relative; width:44px; height:24px; flex:0 0 44px; }
.cs-switch input { opacity:0; width:0; height:0; }
.cs-switch span { position:absolute; inset:0; background:#ccc; border-radius:12px; transition:.2s; cursor:pointer; }
.cs-switch span:before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.cs-switch input:checked + span { background:var(--cs-blue); }
.cs-switch input:checked + span:before { transform:translateX(20px); }
.cs-notif { display:flex; gap:12px; align-items:center; padding:8px; border-radius:8px; }
.cs-notif:hover { background:var(--cs-hover); }
.cs-notif.unread { background:var(--cs-blue-s); }
.cs-notif .i { width:56px; height:56px; border-radius:50%; background:#e4e6eb; display:flex; align-items:center; justify-content:center; font-size:26px; flex:0 0 56px; }
.cs-notif small { color:var(--cs-blue); font-weight:600; }
.cs-fab { display:none; }

/* phone: Facebook app style -- a top bar with a tab row under it, one column */
@media (max-width: 1100px) { .cs-side { display:none; } }
@media (max-width: 900px) {
  :root { --cs-top:52px; --cs-bot:56px; }
  .cs-left, .cs-search, .cs-nav { display:none; }
  .cs-top { height:auto; flex-wrap:wrap; padding:0; box-shadow:0 1px 2px rgba(0,0,0,.1); transition:transform .2s; }
  .cs-top .cs-headrow { display:flex; align-items:center; width:100%; padding:6px 12px; gap:8px; height:52px; }
  .cs-top .cs-brand { flex:1; min-width:0; font-size:26px; max-width:none; }
  .cs-top .cs-gap { display:none; }
  .cs-top .cs-logo { display:none; }
  .cs-burger { width:36px; height:40px; align-items:center; justify-content:center; font-size:24px; color:var(--cs-text); margin-left:-4px; }
  /* the Facebook app's bottom bar */
  .cs-tabs { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--cs-line);
    height:calc(var(--cs-bot) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
  .cs-tabs a { flex:1; display:flex; align-items:center; justify-content:center; color:var(--cs-mute); font-size:22px; border-top:3px solid transparent; position:relative; }
  .cs-tabs a.on { color:var(--cs-blue); border-top-color:var(--cs-blue); }
  .cs-tabs a.me img { width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 1px var(--cs-line); }
  .cs-tabs a.me.on img { box-shadow:0 0 0 2px var(--cs-blue); }
  .cs-tabs .cs-badge { top:5px; right:calc(50% - 24px); }
  .cs-right .cs-hide-m { display:none; }
  .cs-wrap { padding:calc(var(--cs-top) + 8px) 0 calc(var(--cs-bot) + env(safe-area-inset-bottom) + 16px); gap:0; }
  .cs-toast { bottom:calc(var(--cs-bot) + 24px); }
  .cs-reel-new { bottom:calc(var(--cs-bot) + 18px) !important; }
  .cs-main { flex-basis:100%; }
  .cs-card { border-radius:0; margin-bottom:8px; box-shadow:none; }
  .cs-media.n1 img { max-height:none; }
  .cs-pd { flex-direction:column; border-radius:0; }
  .cs-pd .det { flex-basis:auto; }
  .cs-pd .gal { min-height:300px; }
  .cs-mk-head, .cs-chips, .cs-grid, .cs-evcards, .cs-pad-m { padding-left:10px; padding-right:10px; }
  .cs-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .cs-prof-head { margin:-8px 0 8px; }
  .cs-cover { height:200px; border-radius:0; }
  .cs-prof-row { flex-direction:column; align-items:center; text-align:center; margin-top:-90px; }
  .cs-prof-row .pic img { width:150px; height:150px; }
  .cs-prof-row h1 { font-size:26px; }
  .cs-prof-body { flex-direction:column; gap:0; }
  .cs-prof-body .l { position:static; flex-basis:auto; width:100%; }
  .cs-prof-body .r { width:100%; }
  .cs-evhero { border-radius:0; }
  .cs-top.away { transform:translateY(-100%); }
  .cs-dialog { width:100%; height:100%; max-height:none; border-radius:0; }
  .cs-modal { padding:0; }
}

/* shop inside the social pages: cart, checkout, orders */
.cs-cline { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--cs-line); }
.cs-cline img { width:72px; height:72px; border-radius:8px; object-fit:cover; flex:0 0 72px; background:#f0f2f5; }
.cs-cline .info { flex:1; min-width:0; }
.cs-cline .lt { white-space:nowrap; }
.cs-qty.sm { margin-top:6px; gap:6px; }
.cs-qty.sm button { width:30px; height:30px; font-size:16px; }
.cs-qty.sm input { width:46px; height:30px; font-size:15px; }
.cs-qty .rm { background:transparent !important; color:var(--cs-mute); }
.cs-ctotal { display:flex; justify-content:space-between; padding:14px 16px; font-size:18px; }
.cs-addr { display:flex; gap:10px; align-items:flex-start; border:1px solid #ced0d4; border-radius:8px; padding:10px 12px; margin:0 0 8px; cursor:pointer; font-weight:400; }
.cs-addr:has(input:checked) { border-color:var(--cs-blue); background:var(--cs-blue-s); }
.cs-addr input { margin-top:3px; }
.cs-order { display:flex; gap:12px; align-items:center; padding:12px 16px; }
.cs-order img { width:64px; height:64px; border-radius:8px; object-fit:cover; flex:0 0 64px; }
.cs-order .info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cs-order .tot { white-space:nowrap; }
.cs-pill { display:inline-block; color:#fff; font-size:12px; font-weight:700; padding:2px 9px; border-radius:10px; }
.cs-steps { display:flex; margin-top:16px; }
.cs-steps > div { flex:1; text-align:center; font-size:13px; color:var(--cs-mute); position:relative; padding-top:22px; }
.cs-steps > div span { position:absolute; top:0; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:#ced0d4; z-index:1; }
.cs-steps > div:before { content:""; position:absolute; top:7px; left:-50%; right:50%; height:3px; background:#ced0d4; }
.cs-steps > div:first-child:before { display:none; }
.cs-steps > div.on { color:var(--cs-blue); font-weight:700; }
.cs-steps > div.on span, .cs-steps > div.on:before { background:var(--cs-blue); }
.cs-item .im { position:relative; }
.cs-qadd { position:absolute; right:8px; bottom:8px; width:38px; height:38px; border-radius:50%; border:0; background:var(--cs-blue); color:#fff; font-size:16px; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.cs-qadd:hover { background:var(--cs-blue-d); }
.cs-cart-n.hide { display:none; }

/* friends */
.cs-fb { display:inline-flex; gap:6px; flex-wrap:wrap; }
.cs-pgrid2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.cs-person { background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.2); overflow:hidden; display:flex; flex-direction:column; }
.cs-person .pic { display:block; aspect-ratio:1/1; background:#f0f2f5; }
.cs-person .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-person .in { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.cs-person .in b { font-size:17px; }
.cs-person .mut { font-size:13px; }
.cs-person .cs-fb { flex-direction:column; }
.cs-person .cs-fb .cs-btn { width:100%; }
.cs-sreq { display:flex; gap:10px; padding:8px; border-radius:8px; align-items:flex-start; }
.cs-sreq img { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.cs-sreq .cs-fb { margin-top:6px; } .cs-sreq .cs-btn { height:32px; padding:0 12px; }
.cs-stack { display:flex; margin-top:6px; } .cs-stack img { width:32px; height:32px; border-radius:50%; border:2px solid #fff; margin-right:-8px; object-fit:cover; }
.cs-fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cs-fgrid a { display:block; } .cs-fgrid img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }
.cs-fgrid b { font-size:13px; display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-row.on { background:#e4e6eb; }
.cs-nav a .cs-badge { top:8px; right:28px; }
@media (max-width: 900px) { .cs-pgrid2 { grid-template-columns:repeat(2, 1fr); gap:8px; padding:0 8px; } .cs-person .in b { font-size:15px; } }
.cs-fr-chips { display:none; }
@media (max-width: 900px) { .cs-fr-chips { display:flex; max-width:100vw; } }

/* side columns as cards; one-line comment under a post */
.cs-sidecard { padding:4px 8px 8px; }
.cs-sidecard .cs-h { margin:10px 8px 6px; }
.cs-left .cs-sidecard { padding:8px; }
.cs-sp img { width:96px; height:96px; flex-basis:96px; }
/* Facebook comment: bubble with name and text, one small line under it */
.cs-c .cs-cbody { min-width:0; max-width:calc(100% - 40px); }
.cs-c .bub b { font-size:13px; display:block; line-height:1.3; white-space:nowrap; }
.cs-c .bub { display:inline-block; }
.cs-c .bub .txt { display:block; }
.cs-c .bub .txt { font-size:15px; }
.cs-c .meta { display:flex; gap:14px; align-items:center; padding:3px 12px 0; font-size:12px; color:var(--cs-mute); }
.cs-c .meta button { border:0; background:transparent; color:var(--cs-mute); font-weight:700; font-size:12px; padding:0; }
.cs-c .meta button:hover { text-decoration:underline; }
.cs-cms .list.fold .bub { cursor:pointer; }
.cs-cms .list.fold .bub .txt { display:block; max-height:2.7em; overflow:hidden; }
@media (max-width: 900px) { .cs-left .cs-sidecard { box-shadow:none; } }
.cs-setpics { position:relative; margin:10px 0 70px; }
.cs-setcover { height:180px; border-radius:8px; background:linear-gradient(135deg,#d8dadf,#b0b3b8) center/cover; position:relative; }
.cs-setcover label { position:absolute; right:10px; bottom:10px; margin:0; cursor:pointer; }
.cs-setav { position:absolute; left:16px; bottom:-60px; display:flex; align-items:flex-end; gap:10px; }
.cs-setav img { width:120px; height:120px; border-radius:50%; border:4px solid #fff; object-fit:cover; background:#fff; }
.cs-setav label { margin:0 0 8px; cursor:pointer; }
.cs-cam { cursor:pointer; background:#e4e6eb; box-shadow:0 1px 3px rgba(0,0,0,.25); width:40px; height:40px; }
.cs-cover .chg { cursor:pointer; background:#fff; }
/* only the picture sits over the cover; name and buttons start below it */
@media (min-width: 901px) {
  .cs-prof-row { align-items:flex-start; }
  .cs-prof-row .nm { padding-top:96px; padding-bottom:0; }
  .cs-prof-row > div:last-child:not(.nm):not(.pic) { padding-top:104px; }
}

/* signed-out pages: landing, sign up, forgotten password, policies */
.cs-landing { background:#f0f2f5; min-height:100vh; display:flex; flex-direction:column; }
.cs-land { flex:1; display:flex; align-items:center; justify-content:center; gap:40px; padding:80px 20px 60px; max-width:1000px; margin:0 auto; width:100%; flex-wrap:wrap; }
.cs-land-brand { flex:1 1 480px; max-width:560px; }
.cs-land-brand .logo { display:flex; align-items:center; gap:14px; }
.cs-land-brand .logo img { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#fff; }
.cs-land-brand .logo span { color:var(--cs-blue); font-size:56px; font-weight:800; letter-spacing:-2px; line-height:1; }
.cs-land-brand h2 { font-size:26px; font-weight:400; line-height:32px; margin:16px 0 0; }
.cs-land-right { flex:0 0 396px; max-width:100%; }
.cs-land-card { padding:16px; text-align:center; margin:0; }
.cs-in { width:100%; height:52px; border:1px solid #dddfe2; border-radius:6px; padding:0 16px; font-size:17px; margin-bottom:12px; outline:none; font-family:inherit; background:#fff; }
.cs-in:focus { border-color:var(--cs-blue); box-shadow:0 0 0 2px #e7f3ff; }
.cs-signup .cs-in { height:40px; font-size:15px; padding:0 11px; background:#f5f6f7; margin-bottom:10px; }
.cs-big { height:48px; font-size:20px !important; font-weight:700; padding:0 16px; }
.cs-land-card .cs-btn.green.cs-big { font-size:17px !important; }
.cs-forgot { color:var(--cs-blue) !important; font-size:14px; display:inline-block; margin-top:16px; }
.cs-forgot:hover { text-decoration:underline; }
.cs-land-err { background:#ffebe8; border:1px solid #dd3c10; color:#1c1e21; border-radius:6px; padding:10px 12px; margin-bottom:12px; font-size:14px; text-align:left; }
.cs-land-note { text-align:center; font-size:14px; margin-top:24px; }
.cs-pw { position:relative; }
.cs-pw button { position:absolute; right:8px; top:8px; border:0; background:transparent; color:var(--cs-mute); width:36px; height:36px; }
.cs-signup .cs-pw button { top:2px; }
.cs-signup { width:432px; }
.cs-signup .row2 { display:flex; gap:10px; } .cs-signup .row2 .cs-in { flex:1; min-width:0; }
.cs-signup .row3 { display:flex; gap:10px; margin-bottom:10px; }
.cs-g { flex:1; display:flex; justify-content:space-between; align-items:center; border:1px solid #ccd0d5; border-radius:4px; height:36px; padding:0 10px; font-weight:400; margin:0; cursor:pointer; }
.cs-small { font-size:12px; color:var(--cs-mute); display:block; margin:2px 0 4px; }
.cs-small a { color:var(--cs-blue) !important; }
.cs-foot { background:#fff; padding:20px 16px; font-size:12px; color:var(--cs-mute); }
.cs-foot > div { max-width:980px; margin:0 auto; }
.cs-foot .langs { display:flex; gap:12px; flex-wrap:wrap; border-bottom:1px solid #dddfe2; padding-bottom:8px; margin-bottom:8px; }
.cs-foot .langs a.on { color:var(--cs-text); font-weight:700; }
.cs-foot .links { display:flex; gap:14px; flex-wrap:wrap; }
.cs-foot a:hover { text-decoration:underline; }
.cs-foot .copy { margin-top:16px; }
.cs-pubtop { position:fixed; top:0; left:0; right:0; height:60px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; box-shadow:0 1px 2px rgba(0,0,0,.1); z-index:10; }
.cs-pubtop .cs-brand { font-size:30px; font-weight:800; color:var(--cs-blue); letter-spacing:-1px; }
.cs-legal { display:flex; gap:20px; max-width:1100px; width:100%; margin:0 auto; padding:80px 16px 40px; align-items:flex-start; flex:1; }
.cs-legal aside { flex:0 0 280px; position:sticky; top:76px; }
.cs-legal main { flex:1; min-width:0; }
.cs-legal h1 { margin:0 0 16px; font-size:28px; }
.cs-legal-body { line-height:1.6; font-size:16px; }
.cs-faq { border-bottom:1px solid var(--cs-line); padding:12px 0; }
.cs-faq summary { font-weight:700; cursor:pointer; font-size:16px; }
.cs-faq p { margin:8px 0 0; }
.cs-leftfoot { font-size:13px; color:var(--cs-mute); padding:12px 8px; line-height:1.6; }
.cs-leftfoot a:hover { text-decoration:underline; }
/* account menu */
.cs-acct-wrap { position:relative; }
.cs-acct { position:absolute; right:0; top:48px; width:360px; background:#fff; border-radius:8px; box-shadow:0 12px 28px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1); padding:12px; z-index:60; }
.cs-acct a { display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; font-weight:600; }
.cs-acct a:hover { background:var(--cs-hover); }
.cs-acct a i { width:36px; height:36px; border-radius:50%; background:#e4e6eb; display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.cs-acct .cs-acct-me { box-shadow:0 2px 12px rgba(0,0,0,.15); margin-bottom:10px; padding:12px; font-size:17px; }
.cs-acct .cs-acct-me img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.cs-acct-foot { font-size:12px; color:var(--cs-mute); padding:8px; line-height:1.6; }
.cs-acct-foot a { display:inline; padding:0; font-weight:400; } .cs-acct-foot a:hover { background:none; text-decoration:underline; }
@media (max-width: 900px) {
  .cs-land { padding-top:30px; gap:20px; text-align:center; }
  .cs-land-brand { flex-basis:100%; } .cs-land-brand .logo { justify-content:center; } .cs-land-brand .logo span { font-size:40px; }
  .cs-land-brand h2 { font-size:18px; line-height:24px; }
  .cs-land-right { flex-basis:100%; }
  .cs-legal { flex-direction:column; padding-top:70px; } .cs-legal aside { position:static; flex-basis:auto; width:100%; }
  .cs-signup { width:100%; }
}
.cs-c .bub { max-width:100%; } .cs-c .bub .txt { overflow-wrap:anywhere; white-space:pre-wrap; }
.cs-c .cs-cbody { flex:0 1 auto; }
.cs-cms.shut { display:none; }

/* inside the feed: friend requests / people you may know rows, sponsored products */
.cs-strip { padding:12px 0 14px; }
.cs-strip-h { display:flex; justify-content:space-between; align-items:center; padding:0 16px 10px; }
.cs-strip-h b { font-size:17px; display:inline-flex; gap:6px; align-items:center; }
.cs-strip-h a { color:var(--cs-blue); }
.cs-strip-row { display:flex; gap:8px; overflow-x:auto; padding:0 16px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.cs-scard { flex:0 0 176px; border:1px solid var(--cs-line); border-radius:8px; overflow:hidden; scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; }
.cs-scard .pic { display:block; aspect-ratio:1/1; background:#f0f2f5; }
.cs-scard .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.cs-scard .in { padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; flex:1; }
.cs-scard .in b { font-size:15px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-scard .mut { font-size:12px; }
.cs-scard .cs-fb { flex-direction:column; margin-top:auto; } .cs-scard .cs-fb .cs-btn { width:100%; height:34px; }
.cs-ad-img { display:block; background:#f0f2f5; }
.cs-ad-img img { width:100%; max-height:560px; object-fit:contain; display:block; }
.cs-ad-foot { display:flex; align-items:center; gap:10px; padding:10px 16px 14px; background:#f7f8fa; }
.cs-ad-foot .info { flex:1; min-width:0; display:flex; flex-direction:column; }
.cs-ad-foot small { color:var(--cs-mute); font-size:12px; }
.cs-ad-foot b { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-ad-foot .price { font-weight:700; }
.cs-ad-foot .btns { display:flex; gap:6px; }
@media (max-width: 900px) { .cs-scard { flex-basis:150px; } }

/* Video tab (short videos, one per screen) */
.cs-reels-main { flex:0 1 auto !important; margin:0 auto; }
body.cs:has(.cs-reels) .cs-wrap { padding-bottom:0; }
.cs-reels { height:calc(100vh - var(--cs-top) - 32px); overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; border-radius:12px; }
.cs-reels::-webkit-scrollbar { display:none; }
.cs-reel { height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; align-items:center; justify-content:center; padding:6px 0; }
.cs-reel-stage { position:relative; height:100%; aspect-ratio:9/16; max-width:100vw; background:#000; border-radius:12px; overflow:hidden; }
.cs-reel-stage video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.cs-reel-tap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:64px; opacity:0; pointer-events:none; transition:opacity .2s; }
.cs-reel.paused .cs-reel-tap { opacity:1; }
.cs-reel-info { position:absolute; left:0; right:64px; bottom:0; padding:60px 14px 16px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.65)); display:flex; flex-direction:column; gap:6px; }
.cs-reel-info .who { display:flex; align-items:center; gap:8px; color:#fff !important; }
.cs-reel-info .who img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.cs-reel-info .cap { font-size:14px; white-space:pre-wrap; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.cs-reel-info small { color:rgba(255,255,255,.8); }
.cs-reel-info .prod { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); border-radius:8px; padding:6px 8px; color:#fff !important; font-size:13px; }
.cs-reel-info .prod img { width:34px; height:34px; border-radius:6px; object-fit:cover; }
.cs-reel-info .prod span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-reel-acts { position:absolute; right:8px; bottom:24px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.cs-reel-acts .ra { border:0; background:transparent; color:#fff !important; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.cs-reel-acts .ra i { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:20px; }
.cs-reel-acts .ra.on i { background:var(--cs-blue); }
.cs-reel-empty { color:var(--cs-mute); text-align:center; }
.cs-reel-new { position:fixed; right:24px; bottom:24px; z-index:40; border:0; border-radius:24px; height:48px; padding:0 18px; background:var(--cs-blue); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.25); display:flex; gap:8px; align-items:center; }
@media (max-width: 900px) {
  .cs-reels { height:calc(100vh - var(--cs-top) - var(--cs-bot) - 8px); border-radius:0; }
  .cs-reel { padding:0; }
  .cs-reel-stage { width:100vw; aspect-ratio:auto; border-radius:0; }
  .cs-reel-new { right:14px; bottom:18px; width:52px; height:52px; padding:0; justify-content:center; border-radius:50%; }
  .cs-reel-new span { display:none; }
  body.cs:has(.cs-reels) .cs-top.away { transform:none; }
}

/* Marketing promotions on prices */
.cs-price s { color:var(--cs-mute); font-weight:400; font-size:.85em; margin-left:4px; }
.cs-off { color:#e41e3f; font-style:normal; font-weight:700; font-size:.85em; }
.cs-gift { display:block; color:#7a3fe0; font-size:12.5px; font-weight:600; margin-top:2px; }
.cs-badge-off { position:absolute; left:8px; top:8px; background:#e41e3f; color:#fff; font-weight:800; font-size:13px; padding:3px 8px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.cs-badge-off.gift { background:#7a3fe0; }
.cs-badge-off.big { font-size:18px; padding:6px 12px; left:14px; top:14px; }
.cs-ad-img { position:relative; }
.cs-promo { background:#fff0f2; color:#c4122f; border-radius:6px; padding:6px 10px; font-weight:600; font-size:14px; }

/* a video link in a post */
.cs-embed { position:relative; background:#000; aspect-ratio:16/9; }
.cs-embed.tall { aspect-ratio:9/16; max-height:720px; margin:0 auto; }
.cs-embed iframe, .cs-embed video { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.cs-reel-frame { width:100%; height:100%; border:0; display:block; }
.cs-embed iframe { overflow:hidden; }
.cs-embed.tall { width:min(100%, 405px); max-height:none; }
/* TikTok's player draws its own counts at the bottom right: ours go to the top right */
.cs-reel-stage.tk .cs-reel-acts { bottom:auto; top:90px; }
.cs-reel-stage.tk .cs-reel-info { right:90px; background:linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events:none; }
.cs-reel-stage.tk .cs-reel-info a { pointer-events:auto; }
.cs-reel-stage.tk .cs-reel-info { bottom:56px; padding-top:30px; background:none; text-shadow:0 1px 3px rgba(0,0,0,.8); }
/* the profile picture in the top bar: a true circle, photo shrunk to fit */
.cs-top .cs-circle { padding:0; flex:0 0 40px; }
.cs-acct-wrap .cs-circle { overflow:hidden; }
.cs-top .cs-circle img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.cs-acct-wrap { display:inline-flex; }

/* My account */
.cs-acc h2 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:22px; }
.cs-acc h2 .ic, .cs-acc-chips .ic { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.cs-acc-row { display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--cs-line); }
.cs-acc-row:last-child { border-bottom:0; }
a.cs-acc-row:hover { background:var(--cs-hover); }
.cs-acc-row .l { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-acc-row .l small { color:var(--cs-mute); }
.cs-acc-row .r { white-space:nowrap; }
.cs-acc-total { font-size:18px; margin-bottom:10px; }
.cs-acc-table { overflow-x:auto; }
.cs-acc-table table { width:100%; border-collapse:collapse; font-size:14px; }
.cs-acc-table th, .cs-acc-table td { padding:8px; border-bottom:1px solid var(--cs-line); text-align:left; white-space:nowrap; }
.cs-acc-table th { color:var(--cs-mute); font-weight:600; }
.ok { color:#0a9d58; } .bad { color:#e41e3f; }
.cs-points { background:linear-gradient(135deg,#f7b928,#ff8a00); color:#fff; border-radius:12px; padding:16px; margin-bottom:12px; }
.cs-points .big { font-size:34px; font-weight:800; }
.cs-points .row { display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
.cs-disc { border:1px solid var(--cs-line); border-radius:10px; padding:12px; margin-bottom:12px; }
.cs-disc .h { margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cs-acc-chips { display:none; }
.cs-prof-tabs a.ext { color:var(--cs-mute); font-weight:600; }
.cs-prof-tabs { overflow-x:auto; scrollbar-width:none; }
@media (max-width: 900px) { .cs-acc-chips { display:flex; padding:0 8px; } .cs-acc { border-radius:0; } }
/* #hashtags and @mentions */
.cs-tag { color:var(--cs-blue) !important; font-weight:600; }
a.cs-tag:hover { text-decoration:underline; }
/* "Change cover" sits under the name row's top edge: keep it on top so it can be clicked */
.cs-cover .chg { z-index:5; }
.cs-prof-row .pic label { z-index:5; }

/* long text: one line, then "See more" */
.cs-body.clamp { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; padding-bottom:0; margin-bottom:0; }
.cs-seemore { border:0; background:transparent; color:var(--cs-mute); font-weight:700; padding:0 16px 12px; font-size:15px; }
.cs-seemore:hover { text-decoration:underline; }
/* YouTube cover + play, and the Watch on YouTube bar */
.cs-yt { cursor:pointer; overflow:hidden; }
.cs-yt img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-yt-title { position:absolute; left:0; right:0; top:0; padding:12px 14px 30px; color:#fff; font-weight:600; font-size:15px; background:linear-gradient(rgba(0,0,0,.65), transparent); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.cs-yt-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:48px; border:0; border-radius:12px; background:#ff0033; color:#fff; font-size:22px; box-shadow:0 2px 10px rgba(0,0,0,.4); }
.cs-yt:hover .cs-yt-play { background:#e0002d; }
.cs-yt-bar { display:flex; align-items:center; gap:8px; padding:9px 16px; background:#f7f8fa; border-top:1px solid var(--cs-line); font-size:13px; color:var(--cs-mute) !important; }
.cs-yt-bar > i { color:#ff0033; font-size:18px; }
.cs-yt-bar span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-yt-bar b { color:var(--cs-text); white-space:nowrap; }
.cs-yt-bar:hover b { text-decoration:underline; }

/* MLM network */
.cs-mlm-top { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.cs-mlm-top .box { background:linear-gradient(135deg,#7b2ff7,#1877f2); color:#fff; border-radius:10px; padding:12px; display:flex; flex-direction:column; }
.cs-mlm-top .box b { font-size:24px; }
.cs-ref { border:1px dashed #7b2ff7; border-radius:10px; padding:12px; margin-bottom:8px; }
.cs-ref .row { display:flex; gap:6px; margin-top:8px; } .cs-ref .row .cs-input { flex:1; min-width:0; }
.cs-node { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--cs-line); border-radius:10px; background:#fff; }
.cs-node .av { width:32px; height:32px; border-radius:50%; background:#7b2ff7; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.cs-node .nm { display:flex; flex-direction:column; } .cs-node small { color:var(--cs-mute); }
.cs-tree, .cs-tree ul { list-style:none; margin:0; padding-left:22px; border-left:2px solid #e4e6eb; }
.cs-tree { padding-left:8px; border-left:0; } .cs-tree li { margin:6px 0; position:relative; }
.cs-tree ul li:before { content:""; position:absolute; left:-22px; top:20px; width:18px; border-top:2px solid #e4e6eb; }

/* a post being sent: faded, under a shade with a progress bar, at the top of the feed */
.cs-pending { position:relative; overflow:hidden; }
.cs-pending > :not(.cs-pend-shade) { opacity:.55; filter:grayscale(.3); }
.cs-pend-media { background:#000; }
.cs-pend-media video, .cs-pend-media img { width:100%; max-height:420px; object-fit:contain; display:block; }
.cs-pend-shade { position:absolute; inset:0; background:rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; padding:16px; }
.cs-pend-box { background:rgba(0,0,0,.72); color:#fff; border-radius:12px; padding:14px 18px; width:min(320px, 90%); display:flex; flex-direction:column; align-items:center; gap:8px; }
.cs-pend-box > i { font-size:26px; }
.cs-pend-box .lbl { font-weight:700; text-align:center; }
.cs-pend-box .bar { width:100%; height:6px; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; }
.cs-pend-box .bar i { display:block; height:100%; width:0; background:#4ea1ff; border-radius:3px; transition:width .25s; }
.cs-pending.indef .bar i { width:40% !important; animation:cs-indef 1s infinite ease-in-out; }
@keyframes cs-indef { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.cs-pending.failed .cs-pend-box { background:rgba(228,30,63,.85); }
.cs-pend-box .acts { display:flex; gap:6px; }
.cs-just { animation:cs-pop .5s ease; }
@keyframes cs-pop { from { box-shadow:0 0 0 3px var(--cs-blue); } to { box-shadow:0 1px 2px rgba(0,0,0,.2); } }
.cs-invited { background:#efe7ff; color:#5b21b6; border-radius:6px; padding:6px 10px; font-size:13px; margin:-4px 0 10px; text-align:left; }
/* unfinished uploads on pages without the feed: a strip under the top bar */
.cs-upq { position:fixed; top:calc(var(--cs-top) + 8px); right:12px; width:min(340px, calc(100vw - 24px)); z-index:45; display:flex; flex-direction:column; gap:8px; }
.cs-pending.mini { margin:0; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.cs-pending.mini .cs-pend-media, .cs-pending.mini .cs-body { display:none; }
.cs-pending.mini .cs-pend-shade { position:static; background:none; padding:0 10px 10px; }
.cs-pending.mini .cs-pend-box { width:100%; flex-direction:row; flex-wrap:wrap; padding:8px 12px; }
.cs-pending.mini .cs-pend-box > i { font-size:18px; } .cs-pending.mini .lbl { flex:1; font-size:13px; }

/* the website's content in the left column */
.cs-cmsbox { margin-top:12px; }
.cs-cmsitem { display:flex; gap:10px; padding:8px; border-radius:8px; align-items:center; }
.cs-cmsitem:hover { background:var(--cs-hover); }
.cs-cmsitem img, .cs-cmsitem .ph { width:64px; height:64px; border-radius:8px; object-fit:cover; flex:0 0 64px; background:#f0f2f5; }
.cs-cmsitem .ph { display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
.cs-cmsitem div { min-width:0; display:flex; flex-direction:column; gap:1px; }
.cs-cmsitem small { font-weight:700; font-size:12px; text-transform:uppercase; }
.cs-cmsitem b { font-size:14px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cs-cmsitem span { color:var(--cs-mute); font-size:12px; }

/* Full policies (legal_texts.py, owner 2026-11-04): last updated, contents, numbered sections. */
.cs-legal-body h2{font-size:18px;font-weight:700;margin:26px 0 8px;scroll-margin-top:70px}
.cs-legal-body p{margin:0 0 10px;line-height:1.75}
.cs-legal-upd{color:var(--cs-muted,#65676b);font-size:13px;margin:-4px 0 14px!important}
.cs-legal-toc{background:var(--cs-bg,#f0f2f5);border-radius:10px;padding:12px 16px;margin:0 0 8px}
.cs-legal-toc ol{margin:6px 0 0;padding-left:22px;columns:2;column-gap:28px}
.cs-legal-toc li{margin:3px 0;break-inside:avoid}
.cs-legal-toc a{color:var(--cs-blue,#1877f2);text-decoration:none}
@media(max-width:640px){.cs-legal-toc ol{columns:1}}

/* Profile dropdown carries Menu / Notifications / Cart / Events on desktop (owner 2026-11-04). */
.cs-acct a.on { background:var(--cs-hover); }
.cs-acct .cs-acct-n { margin-left:auto; position:static; min-width:22px; height:22px; padding:0 7px; border-radius:11px;
  background:#e41e3f; color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.cs-acct .cs-acct-n.hide { display:none; }
.cs-acct-sep { height:1px; background:#e4e6eb; margin:6px 4px; }
.cs-acct-wrap [data-acct] .cs-badge { position:absolute; top:-4px; right:-4px; }
.cs-acct-wrap [data-acct] { overflow:visible; }
.cs-acct-wrap [data-acct] > img { border-radius:50%; }
/* Log-in page: the website, as a clear button under the card (owner 2026-11-04). */
.cs-land-site { display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0; padding:12px 16px;
  background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.06);
  color:var(--cs-blue,#1877f2); font-weight:700; font-size:16px; text-decoration:none; }
.cs-land-site:hover { background:#f5f9ff; text-decoration:none; }
/* "No account yet" — laid over the sign-up box itself (same size), fading into the form. */
.cs-signup { position:relative; }
.cs-ask { position:absolute; inset:0; z-index:5; background:#fff; border-radius:8px; display:flex; flex-direction:column;
  padding:16px; transition:opacity .35s ease, transform .35s ease; animation:csAskIn .25s ease; }
.cs-ask.gone { opacity:0; transform:scale(.98); pointer-events:none; }
@keyframes csAskIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
.cs-ask-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 16px; }
.cs-ask-ico { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#e7f3ff,#d4e8ff); color:var(--cs-blue,#1877f2);
  display:flex; align-items:center; justify-content:center; font-size:36px; margin-bottom:18px; box-shadow:0 0 0 8px #f3f8ff; }
.cs-ask-body h2 { margin:0 0 10px; font-size:24px; font-weight:800; }
.cs-ask-body p { margin:0 0 16px; font-size:16px; line-height:1.7; color:#4b4f56; max-width:340px; }
.cs-ask-phone { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:#f0f2f5;
  font-weight:700; font-size:17px; letter-spacing:.5px; }
.cs-ask-foot { padding:0 0 0; }