/* ═══════════════════════════════════════════════════════════════
   DGTechQA — Community tab (mobile) · Hub / Roles redesign
   Compact type scale, matches Home: title 12-13 · sub 10 · label 9-10
   ═══════════════════════════════════════════════════════════════ */
@property --cm-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes cmSpin{to{--cm-ang:360deg}}
@keyframes cmRise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cmInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes cmInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes cmPop{0%{opacity:0;transform:scale(.55)}60%{transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes cmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cmBlob1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(34px,16px) scale(1.25)}}
@keyframes cmBlob2{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-30px,-10px) scale(.9)}}
@keyframes cmLive{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%,100%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}
@keyframes cmShine{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(340%) skewX(-18deg)}}
@keyframes cmRip{to{transform:scale(3.4);opacity:0}}
@keyframes cmArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

#cm2{
  --c-bg:#ffffff;--c-tx:#111b21;--c-sub:#667781;--c-line:#e9edef;--c-soft:#f0f2f5;--c-card:#ffffff;
  --c-acc:#128C7E;--c-acc2:#25D366;--c-dark:#075E54;
  position:relative;font-family:'Mulish',system-ui,sans-serif;color:var(--c-tx);
  opacity:0;
}
html:not([data-mobile-app]) #cm2{
  --c-bg:var(--surface,#1b1b1f);--c-tx:var(--text,#f0f0f1);--c-sub:var(--muted,#a7a7ad);
  --c-line:var(--border,#303035);--c-soft:rgba(255,255,255,.06);--c-card:var(--surface2,#232327);
}
#tab-community.active #cm2{animation:cmRise .55s cubic-bezier(.22,1,.36,1) both}

/* ───── header ───── */
.cm2-head{position:relative;overflow:hidden;isolation:isolate;border-radius:20px 20px 0 0;color:#fff;
  padding:15px 14px 16px;background:linear-gradient(135deg,#064e46,#075E54 45%,#128C7E)}
.cm2-head i.b1,.cm2-head i.b2{position:absolute;z-index:-1;border-radius:50%;filter:blur(26px);pointer-events:none}
.cm2-head i.b1{width:130px;height:130px;left:-30px;top:-50px;background:rgba(37,211,102,.55);animation:cmBlob1 7s ease-in-out infinite alternate}
.cm2-head i.b2{width:120px;height:120px;right:-30px;bottom:-60px;background:rgba(220,248,198,.35);animation:cmBlob2 8s ease-in-out infinite alternate}
.cm2-head::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.cm2-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cm2-ttl{display:flex;align-items:center;gap:10px;min-width:0}
.cm2-logo{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);animation:cmFloat 3.4s ease-in-out infinite}
.cm2-ttl h3{margin:0;font-size:14px;font-weight:800;letter-spacing:.2px;color:#fff;line-height:1.2}
.cm2-ttl small{display:block;margin-top:1px;font-size:10px;font-weight:600;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm2-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:4px 9px;border-radius:999px}
.cm2-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#25D366;animation:cmLive 1.8s infinite}
.cm2-search{display:flex;align-items:center;gap:8px;margin-top:12px;background:rgba(255,255,255,.96);color:#667781;border-radius:13px;padding:8px 12px;
  transition:transform .25s,box-shadow .25s}
.cm2-search:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.28);transform:scale(1.012)}
.cm2-search i{font-size:11px}
.cm2-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 12px 'Mulish',sans-serif;color:#111b21}
.cm2-search input::placeholder{color:#8696a0}

/* ───── segmented tabs (Hub | Roles) ───── */
.cm2-body{background:var(--c-bg);border:1px solid var(--c-line);border-top:0;border-radius:0 0 20px 20px;padding:12px 10px 12px;
  box-shadow:0 10px 26px -16px rgba(17,27,33,.35)}
.cm2-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--c-soft);border-radius:14px;padding:4px;margin:0 2px 12px}
.cm2-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:11px;z-index:0;overflow:hidden;
  background:linear-gradient(135deg,#128C7E,#075E54);box-shadow:0 6px 14px -6px rgba(7,94,84,.7);
  transition:transform .42s cubic-bezier(.34,1.45,.5,1)}
.cm2-pill::after{content:"";position:absolute;top:0;bottom:0;width:26px;background:rgba(255,255,255,.3);animation:cmShine 3.4s ease-in-out infinite}
#cm2[data-on="roles"] .cm2-pill{transform:translateX(100%)}
.cm2-tab{position:relative;z-index:1;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 6px;border-radius:11px;font:800 11.5px 'Mulish',sans-serif;color:var(--c-sub);transition:color .3s,transform .15s;-webkit-tap-highlight-color:transparent}
.cm2-tab:active{transform:scale(.94)}
.cm2-tab i{font-size:11px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.cm2-tab em{font-style:normal;font-size:9px;font-weight:800;min-width:17px;padding:1px 5px;border-radius:999px;background:rgba(128,140,150,.2);transition:background .3s,color .3s}
.cm2-tab.on{color:#fff}
.cm2-tab.on i{transform:scale(1.2) rotate(-8deg)}
.cm2-tab.on em{background:rgba(255,255,255,.25);color:#fff}

/* ───── panels ───── */
.cm2-panels{position:relative}
.cm2-panel{display:none}
.cm2-panel.on{display:block}
.cm2-cap{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--c-acc)}
.cm2-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(18,140,126,.35),transparent)}

.cm2-panel.on .cm2-i{animation:cmInR .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 55ms + 60ms)}
#cm2.back .cm2-panel.on .cm2-i{animation-name:cmInL}

/* HUB — feature rows */
.cm2-hub{display:flex;flex-direction:column;gap:8px}
.cm2-hrow{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:16px;text-decoration:none;color:inherit;
  background:var(--c-card);border:1px solid var(--c-line);transition:transform .2s,box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.cm2-hrow:active{transform:scale(.975);border-color:var(--hc,#128C7E)}
.cm2-hrow::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--hc,#128C7E)}
.cm2-hic{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;
  background:linear-gradient(135deg,var(--hc,#128C7E),var(--hc2,#25D366));box-shadow:0 6px 12px -6px var(--hc,#128C7E);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cm2-hrow:active .cm2-hic{transform:rotate(-8deg) scale(1.12)}
.cm2-hmid{flex:1;min-width:0}
.cm2-hmid b{display:block;font-size:12.5px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm2-hmid p{margin:2px 0 0;font-size:10.5px;line-height:1.35;color:var(--c-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm2-harr{flex:0 0 auto;font-size:10px;color:#b1bac0;transition:color .2s}
.cm2-hrow:active .cm2-harr{color:var(--hc,#128C7E);animation:cmArrow .5s ease}
.cm2-tag{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:#25D366;padding:2px 7px;border-radius:999px}

/* HUB — featured first card */
.cm2-hrow.feat{padding:14px 13px;background:linear-gradient(135deg,#075E54,#128C7E);border-color:transparent;color:#fff}
.cm2-hrow.feat::before{display:none}
.cm2-hrow.feat .cm2-hmid p{color:rgba(255,255,255,.82)}
.cm2-hrow.feat .cm2-harr{color:#fff}
.cm2-hrow.feat .cm2-hic{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);box-shadow:none;animation:cmFloat 3.2s ease-in-out infinite}
.cm2-hrow.feat::after{content:"";position:absolute;top:0;bottom:0;width:34px;background:rgba(255,255,255,.22);animation:cmShine 3.6s ease-in-out infinite}

/* ROLES — 2-col cards */
.cm2-roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm2-rcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:11px 10px 10px;border-radius:16px;text-decoration:none;color:inherit;min-width:0;
  background:var(--c-card);border:1px solid var(--c-line);transition:transform .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.cm2-rcard::before{content:"";position:absolute;right:-18px;top:-18px;width:62px;height:62px;border-radius:50%;background:var(--rc,#128C7E);opacity:.12;transition:transform .4s,opacity .3s}
.cm2-rcard:active{transform:scale(.95);border-color:var(--rc,#128C7E)}
.cm2-rcard:active::before{transform:scale(2.2);opacity:.2}
.cm2-rtop{display:flex;align-items:center;justify-content:space-between}
.cm2-ric{width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;
  background:linear-gradient(135deg,var(--rc,#128C7E),color-mix(in srgb,var(--rc,#128C7E) 60%,#fff));box-shadow:0 5px 10px -5px var(--rc,#128C7E);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cm2-rcard:active .cm2-ric{transform:rotate(-10deg) scale(1.15)}
.cm2-rgo{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--c-sub);background:var(--c-soft);transition:transform .25s,background .25s,color .25s}
.cm2-rcard:active .cm2-rgo{background:var(--rc,#128C7E);color:#fff;transform:translateX(2px)}
.cm2-rcard b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;font-weight:800;line-height:1.25;min-height:2.5em}
.cm2-rcard p{margin:-3px 0 0;font-size:9.5px;line-height:1.35;color:var(--c-sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm2-roles .cm2-rcard:nth-child(odd) .cm2-ric{animation:cmFloat 3.6s ease-in-out infinite}
.cm2-roles .cm2-rcard:nth-child(even) .cm2-ric{animation:cmFloat 3.6s ease-in-out -1.8s infinite}

.cm2-empty{display:none;text-align:center;font-size:11px;color:var(--c-sub);padding:22px 10px}
.cm2-empty i{display:block;font-size:20px;margin-bottom:6px;opacity:.5}
.cm2-hide{display:none!important}

/* tap ripple */
.cm2-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(18,140,126,.28);animation:cmRip .6s ease-out forwards}
.cm2-hrow.feat .cm2-rip{background:rgba(255,255,255,.35)}

@media (max-width:340px){
  .cm2-roles{gap:6px}.cm2-rcard{padding:9px 8px}.cm2-rcard b{font-size:11px}.cm2-hmid p{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  #cm2,#cm2 *,#cm2 *::before,#cm2 *::after{animation:none!important;transition:none!important}
  #cm2{opacity:1}
}