:root{
  --bg:#050f24;
  --panel: rgba(255,255,255,.085);
  --panel2: rgba(255,255,255,.125);
  --text:#f4f8ff;
  --muted:rgba(244,248,255,.78);
  --brand:#2f6feb;
  --brand2:#1d4ed8;
  --brand-rgb: 47,111,235;
  --brand2-rgb: 29,78,216;
  --danger:#ef4444;
  --ok:#22c55e;
  --border: rgba(255,255,255,.16);
  --shadow: 0 18px 46px rgba(0,0,0,.34);
  --radius: 18px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC","Hiragino Sans GB","Microsoft YaHei", sans-serif;
  --readable: 860px;
  --prose-font-size: clamp(15px, 0.5vw + 14px, 18px);
  --prose-leading: 1.82;
  --prose-leading-tight: 1.35;
  --prose-space: 0.9em;
  --media-radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* Prevent any 1-2px horizontal overflow from making sections look misaligned on mobile */
html{overflow-x:hidden}
body{overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(980px 560px at 28% 6%, rgba(var(--brand-rgb),.12), transparent 62%),
    radial-gradient(900px 540px at 92% 18%, rgba(var(--brand2-rgb),.10), transparent 62%),
    linear-gradient(180deg, #020617 0%, var(--bg) 55%, #020617 100%);
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.95}

/* Auto-detected links inside user-generated content (Moments/comments/etc.) */
.auto-link{
  color: rgba(147,197,253,.95);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Prevent long URLs from breaking layout on mobile */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.auto-link:hover{opacity:1}
/*
  Unified page container
  - Use padding instead of `width: calc(100% - Xpx)` to avoid sub-pixel drift on mobile
  - Keep the *inner* content width equal to the previous `--max` by increasing max-width
  - Include safe-area insets for iOS notches (returns 0 if not applicable)
*/
.container{
  width:100%;
  max-width: calc(var(--max) + 32px);
  margin:0 auto;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}

/* Top navigation gets a wider container than inner content so all menu items
   can fit on common laptop widths (1366/1440) without truncation.
   (Body content remains max-width via .container above.) */
.nav .container{
  width:100%;
  max-width: 1440px;
  margin:0 auto;
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
}
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(2,6,15,.62);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  /* Slightly tighter header so all nav items fit on common desktop widths */
  padding:12px 0;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  /* Allow shrink: don't steal space from the center menu */
  min-width: 210px;
  flex:0 1 auto;
}
.brand img{width:42px; height:42px; border-radius:12px; box-shadow: 0 10px 24px rgba(0,0,0,.35)}
.brand .title{
  display:flex; flex-direction:column; line-height:1.08
}
.brand .title b{font-size:14px; letter-spacing:.2px; white-space:nowrap}
.brand .title span{font-size:10.5px; color:var(--muted); white-space:nowrap}
.menu{
  display:flex;
  gap:8px;
  flex:1 1 auto;
  flex-wrap:nowrap;
  align-items:center;
  /* Use flex-start so when items overflow, the first item isn't clipped by centering. */
  justify-content:center;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu a{
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(233,241,255,.9);
  font-size:12.5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.06;
  text-align:center;
}

/* Simple bilingual helper */
.en{font-size:10px; opacity:.72; margin-left:6px; letter-spacing:.2px}
.menu .zh{font-size:12.5px; font-weight:700}
.menu .en{margin-left:0; margin-top:2px; display:block}
.menu a.active, .menu a:hover{
  border-color: rgba(var(--brand-rgb),.30);
  background: rgba(var(--brand-rgb),.10);
}
.auth{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  /* Allow shrink on tighter widths */
  min-width: 0;
  flex:0 1 auto;
}

/* User dropdown (keeps header compact by moving admin/logout into the menu) */
.user-menu{position:relative; display:flex; align-items:center}
.user-trigger{cursor:pointer; user-select:none; border:none; color:inherit; appearance:none; -webkit-appearance:none; position:relative;}
.user-trigger:focus{outline:2px solid rgba(var(--brand-rgb),.35); outline-offset:2px}
.user-trigger .chev{font-size:12px; opacity:.75; margin-left:4px}

/* Unread indicators (red dot) */
.badge-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--danger);
  box-shadow:0 0 0 2px rgba(2,6,15,.92);
  display:none;
  flex:0 0 auto;
  margin-left:auto;
}
.user-dropdown a.has-unread .badge-dot,
.drawer-links a.has-unread .badge-dot,
.menu a.has-unread .badge-dot{display:inline-block;}

.notify-dot{
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--danger);
  box-shadow:0 0 0 2px rgba(2,6,15,.92);
  display:none;
}
.user-trigger.has-unread .notify-dot{display:block;}

.user-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:240px;
  border-radius:14px;
  background: rgba(2,6,15,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  display:none;
  flex-direction:column;
  overflow:hidden;
  max-height: min(80vh, 520px);
}
.user-menu.open .user-dropdown{display:flex;}

.user-dropdown .ud-scroll{
  padding:10px;
  /* Make the middle section scrollable within the capped dropdown height.
     Important on iOS: flex children need min-height:0 to allow scrolling. */
  overflow:auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.user-dropdown .ud-footer{
  padding:10px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,15,.96);
}

.user-dropdown .ud-mode{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-size:13px;
}
.user-dropdown .ud-mode:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12)}
.user-dropdown .ud-meta{padding:8px 10px 10px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:6px}
.user-dropdown .ud-meta b{display:block; font-size:13px}
.user-dropdown .ud-meta div{font-size:11.5px; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-dropdown a,
.user-dropdown button{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-size:13px;
}
.user-dropdown a:hover,
.user-dropdown button:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12)}
.user-dropdown .ud-split{height:1px; background: rgba(255,255,255,.10); margin:8px 6px}
.user-dropdown .ud-danger{color: rgba(255,155,170,.95)}

/* In the mobile drawer, render dropdown inline (not absolute) */
.mobile-drawer .user-dropdown{position:static; top:auto; right:auto; min-width:0; width:100%; margin-top:10px; max-height:none}

/* Admin group inside user dropdown */
.ud-group{
  margin-top:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.ud-group summary{
  list-style:none;
  cursor:pointer;
  padding:10px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  user-select:none;
}
.ud-group summary::-webkit-details-marker{display:none;}
.ud-group summary::after{
  content:"▾";
  margin-left:auto;
  opacity:.8;
  transform: rotate(0deg);
}
.ud-group[open] summary::after{transform: rotate(180deg);}
.ud-group .ud-group-items{
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Make header buttons slightly smaller (only in the top nav) */
.nav .auth .btn{padding:8px 12px; font-size:13px}

/* Mobile menu toggle (hamburger) */
.menu-toggle{
  display:none;
  position:relative;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.menu-toggle:hover{background: rgba(255,255,255,.10)}

/* Mobile hamburger unread dot (same logic as avatar) */
.menu-toggle.has-unread .notify-dot{display:block;}

/* Mobile drawer */
body.menu-open{overflow:hidden}
.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
  opacity:0;
  transition: opacity .16s ease;
}
body.menu-open .mobile-drawer{
  pointer-events:auto;
  opacity:1;
}
.drawer-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.drawer-panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width: min(380px, 88vw);
  background: rgba(2,6,15,.96);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding:16px;
  /* Mobile drawer MUST be scrollable; body is locked when open.
     iOS needs -webkit-overflow-scrolling for momentum scrolling. */
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display:flex;
  flex-direction:column;
  gap:14px;
  transform: translateX(110%);
  transition: transform .18s ease;
}
body.menu-open .drawer-panel{transform: translateX(0)}

.drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.icon-btn:hover{background: rgba(255,255,255,.10)}

.drawer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.drawer-brand .brand{min-width:0}
.drawer-brand .brand img{width:44px;height:44px}
.drawer-brand .brand .title b,
.drawer-brand .brand .title span{
  max-width: 52vw;
  overflow:hidden;
  text-overflow: ellipsis;
}

.drawer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.drawer-links a{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}
.drawer-links a .zh{font-size:14px; font-weight:800}
.drawer-links a .en{font-size:12px; opacity:.70; margin:4px 0 0}
.drawer-links a.active{border-color: rgba(var(--brand-rgb),.35); background: rgba(var(--brand-rgb),.10)}

.mobile-drawer [data-auth]{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.mobile-drawer [data-auth] .btn{width:100%}
.mobile-drawer [data-auth] .pill{width:100%; max-width:none; justify-content:space-between}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
}

.btn.tiny{padding:6px 10px; font-size:12px}

.btn.disabled,
.btn[aria-disabled="true"],
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

.muted{color:var(--muted)}

/* About page showcase */
.stack{display:flex; flex-direction:column; gap:10px}

/* About page layout helpers (About) */
.about-links,
.about-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.about-links{margin-top:14px}
.about-subnav{margin: 0 0 14px}
.about-block{display:flex; flex-direction:column}
.about-block-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.about-more{margin-top:8px}
.about-more .btn{width:100%}
@media (min-width: 980px){
  .about-more .btn{width:auto}
}

.admin-details{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.12);
}
.admin-details > summary{
  cursor:pointer;
  font-weight:800;
  color: rgba(233,241,255,.92);
  list-style:none;
}
.admin-details > summary::-webkit-details-marker{display:none}
.admin-details[open]{background: rgba(255,255,255,.03)}
.admin-details .admin-body{margin-top:12px}

/* --- Home v4.1 modules --- */
.home-hub .grid{align-items:stretch}
.home-hub .card.soft{min-width:0}
.home-hub .home-list,
.home-hub .stack,
.home-hub .sponsor-wall{width:100%}

/* --- Home Showcase board (Experts / Flagship / Co-building / Partners) --- */
.home-showcase .home-showcase-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.home-showcase-stats{display:flex; gap:8px; flex-wrap:wrap}

.home-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.home-tabs .tab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: rgba(233,241,255,.92);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.home-tabs .tab:hover{background: rgba(255,255,255,.06)}
.home-tabs .tab.active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

.home-showcase-panel{position:relative;margin-top:12px}
.home-carousel{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:4px 2px;
  -webkit-overflow-scrolling: touch;
}
.home-carousel::-webkit-scrollbar{height:10px}
.home-carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.home-carousel::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}

.home-showcase-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  min-width:280px;
  max-width:340px;
  width: 320px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-decoration:none;
}
.home-showcase-card:hover{background: rgba(255,255,255,.06)}

.home-showcase-card .thumb{
  width:84px;
  height:84px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  object-fit:contain;
  flex:0 0 auto;
}
.home-showcase-card .main{flex:1; min-width:0}
.home-showcase-card .title{
  font-weight:900;
  color: rgba(233,241,255,.96);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-showcase-card[data-kind="experts"] .title{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.home-showcase-card .meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.home-showcase-card .desc{
  margin-top:8px;
  color: rgba(233,241,255,.88);
  line-height:1.55;
  font-size:13px;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-showcase-card[data-kind="experts"] .desc{
  /* Experts bios are typically long; show more by default */
  -webkit-line-clamp:18;
}

.home-showcase-card .more{
  margin-left:auto;
  font-size:12px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(233,241,255,.90);
  cursor:pointer;
  user-select:none;
}
.home-showcase-card .more:hover{background: rgba(255,255,255,.06)}

.home-showcase-card.expanded{
  background: rgba(255,255,255,.06);
}
.home-showcase-card.expanded .desc{
  display:block;
  -webkit-line-clamp:unset;
  -webkit-box-orient:unset;
  overflow:auto;
  /* Allow a larger reading area when expanded */
  max-height:420px;
  padding-right:6px;
}
.home-showcase-card.expanded .desc::-webkit-scrollbar{width:8px}
.home-showcase-card.expanded .desc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.home-showcase-card.expanded .desc::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.home-showcase-card .pill{
  font-size:12px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  color: rgba(233,241,255,.88);
}

.home-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: rgba(233,241,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.home-showcase-panel .home-nav{
  /* Autoplay-first: keep arrows subtle and only show when the user hovers the carousel */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.home-showcase-panel:hover .home-nav{
  opacity: 1;
  pointer-events: auto;
}
.home-nav:hover{background: rgba(255,255,255,.08)}
.home-nav.prev{left:-10px}
.home-nav.next{right:-10px}

.home-showcase-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

@media (max-width: 860px){
  .home-nav{display:none}
  .home-showcase-card{width: 280px; min-width: 260px;}
  .home-showcase-card .thumb{width:72px;height:72px}
}

/* Hide legacy home modules title block (older builds had the large "一眼看见" header)
   so that even if a stale HTML is served, the home modules stay clean. */
section[aria-label="Home Modules"] .section-title{display:none !important}
.home-list{display:flex;flex-direction:column;gap:10px}
.home-item{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:14px;
}
.home-item .meta{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.home-item .who{display:flex;gap:10px;align-items:center;min-width:0}
.home-item .who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 220px}
.home-item .sub{color:var(--muted);font-size:12px}
.home-item .preview{
  margin-top:8px;
  color:rgba(233,241,255,.92);
  line-height:1.55;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.home-thumb{
  width:56px;height:56px;border-radius:14px;
  border:1px solid var(--border);
  object-fit:cover;
  flex:0 0 auto;
}
.sponsor-wall{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
}
.sponsor-card{
  display:flex;
  width:100%;
  box-sizing:border-box;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  min-height:92px;
}
.sponsor-card img{max-width:100%;max-height:44px;object-fit:contain;filter: drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.sponsor-card .sponsor-name{font-size:12px;color:rgba(233,241,255,.88);text-align:center}
.showcase-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-start;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:14px;
}
.showcase-main{flex:1; min-width:0;}
.showcase-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.showcase-row .spacer{flex:1 1 auto;}
.showcase-avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid var(--border);flex:0 0 auto}

/* Experts page (bigger photo + bio) */
.expert-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:16px;
}
.expert-avatar{
  width:140px;
  height:140px;
  border-radius:18px;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.14);
  flex:0 0 auto;
  background: rgba(255,255,255,.06);

  object-position: center;
}
.expert-main{flex:1; min-width:0;}
.expert-name{font-size:19px; font-weight:900;}
.expert-desc{margin-top:10px; font-size:16px; line-height:1.75; color:rgba(233,241,255,.90); white-space:pre-wrap;}

@media (max-width: 640px){
  .expert-item{padding:14px 14px; gap:12px}
  .expert-avatar{width:100px; height:100px; border-radius:16px}
  .expert-name{font-size:17px}
  .expert-desc{font-size:15.5px}
}


/* Small form layout */
.form label{display:block; margin:10px 0; font-weight:600}
.form input, .form textarea{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
}
.form textarea{resize:vertical}

/* Drag & drop helper (used for paste/drag uploads) */
.drop-hover{
  outline: 2px dashed rgba(var(--brand-rgb), 0.55);
  outline-offset: 4px;
}

/* About: image upload drop zone */
.upload-drop{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.upload-drop:hover{
  background: rgba(255,255,255,.06);
}
.upload-drop.drop-hover{
  border-color: rgba(var(--brand-rgb), 0.65);
  background: rgba(var(--brand-rgb), 0.06);
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn.primary{
  border-color: rgba(var(--brand-rgb),.45);
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.32), rgba(var(--brand2-rgb),.22));
}
.btn.danger{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.14);
}
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  max-width: 240px;
  color: rgba(233,241,255,.94);
}
.avatar{
  width:28px; height:28px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--brand-rgb),.9), rgba(var(--brand2-rgb),.9));
  display:grid; place-items:center;
  font-weight:800;
  box-shadow: 0 10px 18px rgba(0,0,0,.3);
  flex:0 0 auto;
}
.pill .who{
  display:flex; flex-direction:column; line-height:1.1; overflow:hidden;
}
.pill .who b{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pill .who span{font-size:11.5px; color: rgba(233,241,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.hero{
  padding:44px 0 24px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:stretch;
}
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.card.soft{background: rgba(255,255,255,.045)}

/* Clickable card links */
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover{border-color: rgba(var(--brand-rgb),.35); background: rgba(255,255,255,.06)}

h1{margin:0 0 12px; font-size:34px; letter-spacing:.2px}
h2{margin:0 0 10px; font-size:20px}
h3{margin:0 0 8px; font-size:16px}
p{margin:0 0 10px; color:var(--muted); line-height:1.65}
.kpi{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:14px
}
.kpi .item{padding:14px; border-radius:16px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10)}
.kpi .item b{display:block; font-size:16px}
.kpi .item span{display:block; margin-top:4px; font-size:12.5px; color:var(--muted)}

.grid{
  display:grid; gap:14px;
}
/* Prevent child content from forcing horizontal overflow (common on mobile with long strings / images). */
.grid > *{min-width:0}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
/*
  Responsive 2-column grid:
  - If only 1 item, it will naturally take full width (auto-fit collapses empty tracks)
  - If multiple items, it will render as 2 columns on desktop
  - Mobile remains 1 column via the media query below
*/
.grid.cols-2{grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr))}
.section{padding: 10px 0 38px}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin: 8px 0 12px}
.section-title p{margin:0}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(var(--brand-rgb),.30);
  background: rgba(var(--brand-rgb),.10);
  color: rgba(233,241,255,.95);
  font-size:12px;
}

.badge.mod{
  border-color: rgba(255,208,80,.45);
  background: rgba(255,208,80,.10);
}


/* Small status chips (used on Home) */
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color: rgba(233,241,255,.88);
  white-space:nowrap;
}
.chip.soon{
  border-color: rgba(43,228,167,.35);
  background: rgba(43,228,167,.10);
}
.chip.todo{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  opacity:.92;
}

/* Mini list blocks */
.mini{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.mini li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.mini li b{font-size:14.5px}
.list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:10px;
}
.list li{
  padding:14px; border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.small{font-size:12.5px; color:var(--muted)}
.hr{height:1px; background: rgba(255,255,255,.10); margin:14px 0}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}

/* Make native <select> dropdown options readable on dark theme */
select.input { color-scheme: dark; }
select.input option { color: #111; background: #fff; }
.input:focus{border-color: rgba(var(--brand-rgb),.55)}
label{display:block; font-size:13px; color: rgba(233,241,255,.88); margin: 10px 0 6px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.note{
  padding:12px 14px; border-radius:16px;
  border:1px dashed rgba(var(--brand-rgb),.35);
  background: rgba(var(--brand-rgb),.08);
  color: rgba(233,241,255,.88);
  font-size:13px;
  line-height:1.55;
}
.toast{
  position:fixed; right:18px; bottom:18px; z-index:200;
  width:min(420px, calc(100% - 36px));
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(2,6,15,.86);
  box-shadow: var(--shadow);
  display:none;
}
.toast.show{display:block}
.toast.ok{border-color: rgba(43,228,167,.40)}
.toast.err{border-color: rgba(239,68,68,.45)}
.toast b{display:block; margin-bottom:6px}
.footer{
  padding:26px 0 36px;
  border-top:1px solid rgba(255,255,255,.10);
  color: rgba(233,241,255,.72);
  font-size:13px;
}
.footer-grid{
  display:grid; gap:12px;
  grid-template-columns: 1.2fr .8fr;
  align-items:flex-start;
}
.footer a{color: rgba(233,241,255,.8); text-decoration:underline; text-underline-offset: 3px}

/* -------- Header layout breakpoints (v4.1 final) --------
   Goal: no truncation at 1366/1440 with logged-in long names.

   >=1600px: bilingual nav (zh + en)
   <1600px: hide English line to save width
   <=1366px: additionally hide brand subtitle line
   <=1180px: switch to hamburger/drawer
*/

/* <1600: hide English labels, tighten spacing a bit, and keep the user pill compact */
@media (max-width: 1599px){
  .menu{gap:6px}
  .menu a{padding:6px 7px}
  .menu .en{display:none}
  .brand{min-width: 180px}
  .nav .pill{max-width: 210px}
  .nav .pill .who span{display:none}
}

/* <=1366: hide brand subtitle (GlomCon line) and allow the brand to shrink */
@media (max-width: 1366px){
  .brand .title span{display:none}
  .brand{min-width: 150px}
}

/* <=1180: use hamburger + drawer for stable tablet/small-desktop experience */
@media (max-width: 1180px){
  .nav .menu{display:none}
  .nav .auth{display:none}
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center}
}

@media (max-width: 980px){
  /* Align header with body content padding on mobile */
  .nav .container{
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }

  /* Mobile readability: allow the *Next Meeting* title line to wrap instead of clipping.
     The generic `.home-item .who b` rule clamps to 220px (used for Moments author name),
     but the meeting title needs the full width on phones. */
  #homeNextMeeting .home-item .who{flex-wrap:wrap; align-items:flex-start}
  #homeNextMeeting .home-item .who b{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    max-width:100%;
  }
  #homeNextMeeting .home-item .who .sub{flex-basis:100%; margin-top:4px}
  .brand img{width:42px; height:42px}
  /* On phones, allow section headers to wrap to avoid edge overflow (e.g., Learning/Articles badges). */
  .section-title{flex-wrap:wrap; align-items:flex-start}
  .section-title .badge{margin-top:8px}
  .hero-grid{grid-template-columns: 1fr}
  .brand{min-width:auto}
  .brand .title b{font-size:15px}
  .brand .title span{font-size:11.5px}
  .brand .title b,
  .brand .title span{
    max-width: 52vw;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .kpi{grid-template-columns: 1fr}
  .grid.cols-3{grid-template-columns: 1fr}
  .grid.cols-2{grid-template-columns: 1fr}
  /* On mobile, keep sponsor logo cards full-width to align with other home modules. */
  .sponsor-wall{grid-template-columns: 1fr}
  .form-row{grid-template-columns:1fr}
}

/* --- Video library UI --- */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill-btn{
  cursor:pointer;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(233,241,255,.88);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pill-btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22)}
.pill-btn.active{
  border-color: rgba(99, 225, 255, .55);
  background: rgba(99, 225, 255, .10);
}

.video-wrap{width:100%}
.video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Moments UI --- */
.moment-composer{max-width: 980px}

.edit-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--brand-rgb),.30);
  background: rgba(var(--brand-rgb),.08);
  margin-bottom: 10px;
}
.edit-bar b{line-height:1.2}

.uploader{
  margin-top: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  outline: none;
}
.uploader.dragover{
  border-color: rgba(var(--brand-rgb),.60);
  background: rgba(var(--brand-rgb),.10);
}

.thumb-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.thumb{
  position:relative;
  width: 110px;
  height: 110px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-x{
  position:absolute;
  top:6px;
  right:6px;
  width:30px;
  height:30px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(2,6,15,.70);
  color: var(--text);
  cursor:pointer;
}
.thumb-x:hover{background: rgba(2,6,15,.92)}

.img-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.img-grid.two{grid-template-columns: repeat(2, 1fr)}
.img-grid.one{grid-template-columns: 1fr}
.img-grid .img{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.img-grid .img img{width:100%;height:100%;max-height:420px;object-fit:cover;display:block}

.moment-video{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.moment-video video{
  width: 100%;
  max-height: 560px;
  display: block;
  background: #000;
}

@media (max-width: 980px){
  .thumb{width: 96px; height: 96px}
  .img-grid{grid-template-columns: 1fr}
  .img-grid .img img{max-height: 560px}
}


/* --- Moment comments (留言/回复) --- */
.moment-comments{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.comment-list{margin-top: 8px}
.comment-group{margin-top: 10px}
.comment, .reply{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.reply{margin-left: 16px}
.reply-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.comment-body{
  margin-top: 8px;
  line-height: 1.75;
}
.comment-actions{
  margin-top: 8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.reply-box{margin-top: 10px}
.reply-compose{padding: 10px 0 0}

.badge.mini{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}

/* --- Discussion attachments (图片 / PDF / Word) --- */
.attach-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}
.attach-hint{font-size:12px; color: rgba(233,241,255,.68)}
.attach-list{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.attach-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.attach-item .name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size: 13px;
}
.attach-item .meta{font-size: 11.5px; color: rgba(233,241,255,.65); margin-top:2px}
.attach-item .left{min-width:0}
.attach-grid{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.attach-img{
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.attach-img img{width:100%;height:100%;object-fit:cover;display:block}
.file-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 13px;
}
.file-chip:hover{background: rgba(255,255,255,.06)}

/* --- Thread-style list (case comments overview) --- */
.thread-item{
  cursor:pointer;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
}
.thread-item:hover{background: rgba(255,255,255,.06)}
.thread-main{min-width:0; flex:1 1 auto}
.thread-arrow{opacity:.75; font-size: 18px; line-height:1; padding-top: 6px}
.thread-snippet{margin-top:6px; color: rgba(233,241,255,.78); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* --- Simple modal (for comment detail) --- */
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.modal[hidden]{display:none}
.modal-panel{
  width: min(920px, 94vw);
  max-height: min(82vh, 760px);
  overflow:auto;
  border-radius: 18px;
  background: rgba(2,6,15,.95);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  padding: 14px 14px 16px;
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.modal-close{border:none; background: rgba(255,255,255,.06); border:1px solid var(--border); color: var(--text); border-radius:12px; padding:8px 10px; cursor:pointer}
.modal-close:hover{background: rgba(255,255,255,.10)}



/* --- v7 additions: articles + speaker avatar + list items + video embeds --- */

.list-item{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration:none;
}
.list-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(var(--brand-rgb),.25);
}

.thumb{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* Learning: hot articles list (keeps the same outer card layout as training-project cards) */
.hot-article-list{display:flex;flex-direction:column;gap:0}
.hot-article-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  color: var(--text);
  text-decoration:none;
}
.hot-article-row:hover{opacity:.96}
.hot-article-row:last-child{border-bottom:none;padding-bottom:0}
.hot-article-row:first-child{padding-top:0}
.hot-article-thumb{
  width:46px;
  height:46px;
  border-radius:14px;
  object-fit:cover;
  flex:0 0 46px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.hot-article-thumb.placeholder{background: rgba(255,255,255,.06); border-style:dashed}
.hot-article-content{flex:1;min-width:0}
.hot-article-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hot-article-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge.badge-ghost{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10)}

.speaker-block{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.speaker-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.speaker-text{min-width:0}

.video-embed-wrap{
  margin-top: 12px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}
.video-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display:block;
}

.article-cover{
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.article-row + .article-row{ margin-top: 12px; }
.article-link{ display:block; text-decoration:none; color:inherit; }

.article-preview{
  border: 1px solid rgba(255,255,255,.10);
}

.article-content h1,.article-content h2,.article-content h3{
  margin: 14px 0 10px;
}
.article-content p{
  margin: 10px 0;
  line-height: 1.7;
}
.article-content ul{
  margin: 10px 0 10px 18px;
  padding: 0;
}
.article-content li{
  margin: 6px 0;
  line-height: 1.7;
}
.article-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
pre.codeblock{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:auto;
}
pre.codeblock code{
  border: none;
  background: transparent;
  padding: 0;
}


/* ------------------------------
   v7.2 Mentions + Comment likes
------------------------------ */

.mention{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,.16);
  border: 1px solid rgba(99,102,241,.35);
  color: rgba(233,236,255,.98);
  font-weight: 600;
  font-size: 0.92em;
  white-space: nowrap;
}

.mention-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mention-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  text-align:left;
}
.mention-row:hover{
  border-color: rgba(99,102,241,.45);
  background: rgba(99,102,241,.08);
}

.mention-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 0 34px;
}
.mention-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mention-main{ flex: 1; min-width:0; }
.mention-name{ font-weight: 700; }
.mention-cta{ font-size: 0.92em; color: rgba(233,236,255,.9); }

/* v7.2 Article media */
.article-media{
  width: 100%;
  max-width: 980px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  display: block;
  margin: 12px auto;
}

.article-video{
  margin: 12px 0;
  display: block;
}

/* v7.3.10: Learning center mobile alignment fixes (Hot Articles + Content Format cards)
   - iOS Safari on small screens may clip the right-side badges (date/views) inside flex rows.
   - Also reduce nested padding slightly so the inner cards have enough horizontal room.
*/
@media (max-width: 520px){
  /* Hot Articles rows: keep the title on its own line so date/views badges wrap below */
  #hotArticlesList .hot-article-head{ align-items: flex-start; }
  #hotArticlesList .hot-article-title{ flex: 0 0 100%; width: 100%; }

  /* Prevent any long strings (URLs, etc.) from causing horizontal overflow */
  #hotArticlesList, #hotArticlesList *{ max-width: 100%; }
  #hotArticlesList{ overflow-x: hidden; }
}

/* --- v8.4 Case discussion: desktop full thread, mobile collapsible --- */
.page-case .hero .container{ max-width: 1440px; }
.page-case #commentForm{ max-width: 1100px; }
.page-case #commentForm{ margin-left:auto; margin-right:auto; }
.page-case .attach-img{ width: 110px; height: 110px; }

.case-thread{ display:flex; flex-direction:column; gap:14px; }

.msg{ border:1px solid var(--border); background: rgba(255,255,255,.035); border-radius: 18px; }

/* When jumped from Notifications / deep link */
.msg.highlight{ outline: 2px solid rgba(100,220,255,.45); box-shadow: 0 0 0 2px rgba(100,220,255,.10); }

.msg-desktop{
  padding: 14px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.msg-left{ flex:0 0 auto; }
.msg-avatar{
  width:46px;
  height:46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.4px;
  background: rgba(var(--brand-rgb),.14);
  border:1px solid rgba(var(--brand-rgb),.25);
  color: rgba(233,241,255,.98);
}

.msg-content{ min-width:0; flex:1 1 auto; }

.msg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.msg-meta{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.msg-author{ font-size: 15.5px; }
.msg-when{ font-size:12.5px; color: var(--muted); }
.msg-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.msg-body{
  margin-top:10px;
  line-height:1.8;
  color: rgba(233,241,255,.88);
  word-break: break-word;
}
.msg-body .auto-link{ word-break: break-all; }
.msg-attaches{ margin-top:10px; }

/* Mobile collapsible */
.msg-mobile{ padding:0; }
.msg-mobile > summary{ list-style:none; cursor:pointer; padding:14px; }
.msg-mobile > summary::-webkit-details-marker{ display:none; }
.msg-mobile[open]{ background: rgba(255,255,255,.04); }
.msg-s-top{ display:flex; gap:12px; align-items:flex-start; }
.msg-s-main{ flex:1 1 auto; min-width:0; }
.msg-snippet{
  margin-top:8px;
  color: rgba(233,241,255,.82);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.msg-chevron{ opacity:.8; font-size: 18px; padding-top: 10px; }
.msg-detail{ padding: 0 14px 14px; }

/* PDF first-page preview thumbnails (desktop best-effort) */
.pdf-grid{ margin-top:10px; display:flex; flex-wrap:wrap; gap:12px; }
.pdf-card{
  width: 190px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
}
.pdf-card:hover{ background: rgba(255,255,255,.06); }
.pdf-frame{ width:100%; aspect-ratio: 3/4; background: rgba(255,255,255,.06); }
.pdf-frame iframe{ width:100%; height:100%; border:0; display:block; pointer-events:none; background:#fff; }
.pdf-cap{ padding:8px 10px; font-size:12.5px; color: rgba(233,241,255,.90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 860px){
  .page-case .hero{ padding-top: 28px; }
  .msg-avatar{ width:40px; height:40px; border-radius: 14px; }
  .pdf-card{ width:100%; }
  .pdf-frame{ display:none; }
}

/* Featured poster thumbnail (Home / Events / GlomCon page) */
.poster-thumb{
  display:block;
  width:280px;
  max-width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.poster-thumb img{
  width:100%;
  height:auto;
  display:block;
}
.poster-thumb:hover{opacity:.98}

@media (max-width: 860px){
  .poster-thumb{width:100%;}
}


/* Expert PPT: force native select dropdown to be readable on all platforms */
.select-light-options{
  /*
    Force native controls into a "light" scheme so the dropdown items remain
    readable even when the overall site uses light text on a dark background.
    (Some browsers ignore <option> styling and inherit from <select>.)
  */
  color-scheme: light;
  background: #ffffff;
  color: #111827;
}

.select-light-options option{
  background: #ffffff;
  color: #111827;
}

/* ------------------------------
   v8.16.15 Typography System: KS Prose
   Goal: consistent, tidy reading experience on desktop + mobile
   - Articles / Notes / Moments / Comments
   - Better text-image pairing with responsive media blocks
------------------------------ */

.ks-reading{
  max-width: var(--readable);
  margin-left: auto;
  margin-right: auto;
}

.ks-prose, .article-content{
  font-size: var(--prose-font-size);
  line-height: var(--prose-leading);
  color: rgba(244,248,255,.94);
  overflow-wrap: anywhere;
  word-break: break-word;
  letter-spacing: .1px;
}

.ks-prose p, .article-content p{
  margin: var(--prose-space) 0;
  color: rgba(244,248,255,.92);
}
.ks-prose p:first-child, .article-content p:first-child{margin-top:0}
.ks-prose p:last-child, .article-content p:last-child{margin-bottom:0}

.ks-prose h1, .ks-prose h2, .ks-prose h3,
.article-content h1, .article-content h2, .article-content h3{
  margin: 1.05em 0 0.55em;
  line-height: var(--prose-leading-tight);
  color: rgba(244,248,255,.98);
  letter-spacing: .2px;
}
.ks-prose h1, .article-content h1{ font-size: clamp(1.55rem, 1.35vw + 1.15rem, 2.15rem); }
.ks-prose h2, .article-content h2{ font-size: clamp(1.25rem, 0.95vw + 1.05rem, 1.70rem); }
.ks-prose h3, .article-content h3{ font-size: clamp(1.08rem, 0.55vw + 0.95rem, 1.28rem); opacity: .98; }

.ks-prose ul, .ks-prose ol,
.article-content ul, .article-content ol{
  margin: var(--prose-space) 0 var(--prose-space) 1.2em;
  padding: 0;
}
.ks-prose li, .article-content li{
  margin: 0.35em 0;
  line-height: var(--prose-leading);
}

.ks-prose code, .article-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.ks-prose pre.codeblock, .article-content pre.codeblock{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:auto;
  margin: 1.05em 0;
}
.ks-prose pre.codeblock code, .article-content pre.codeblock code{
  border: none;
  background: transparent;
  padding: 0;
}

.ks-prose hr, .article-content hr{
  border: none;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 1.35em 0;
}

.ks-prose a, .article-content a{
  color: rgba(147,197,253,.95);
}
.ks-prose a:not(.btn):not(.file-chip):not(.list-item):not(.img):not(.ks-media-item),
.article-content a:not(.btn):not(.file-chip):not(.list-item):not(.img):not(.ks-media-item){
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ks-prose a:hover, .article-content a:hover{opacity:1}

/* Figures + media blocks */
.ks-figure{
  margin: 1.05em 0;
}
.ks-figure img, .ks-figure video{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--media-radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.ks-figure figcaption{
  margin-top: 8px;
  font-size: 0.92em;
  color: rgba(244,248,255,.72);
  text-align: center;
}

/* Article legacy media class (kept for compatibility) */
.article-media{
  width: 100%;
  max-width: 980px;
  border-radius: var(--media-radius);
  border: 1px solid rgba(255,255,255,.12);
  display:block;
  margin: 12px auto;
  background: rgba(255,255,255,.03);
}
.article-video{ margin: 12px 0; display:block; }

/* Responsive media grid (articles) */
.ks-media-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin: 1.0em 0;
}
.ks-media-grid[data-count="1"]{ grid-template-columns: 1fr; }
.ks-media-item{
  display:block;
  border-radius: var(--media-radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.ks-media-grid[data-count="1"] .ks-media-item{
  overflow: visible;
  border: none;
  background: transparent;
}
.ks-media-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}
.ks-media-grid[data-count="1"] .ks-media-item img{
  object-fit: contain;
  height: auto;
  max-height: 70vh;
  border-radius: var(--media-radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

@media (max-width: 980px){
  .ks-media-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-media-grid[data-count="1"]{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .ks-media-grid{ grid-template-columns: 1fr; }
}

/* Moments: tighter, consistent text + nicer image grid */
.moment-body{ margin-top: 10px; }
.comment-body{ margin-top: 8px; }
.moment-body.ks-prose p, .comment-body.ks-prose p{ margin: 0.75em 0; }

/* Upgrade existing moments img-grid to match the same aesthetic */
.img-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.img-grid.two{grid-template-columns: repeat(2, minmax(0, 1fr))}
.img-grid.one{grid-template-columns: 1fr}

/* Multi-image: uniform tiles for tidy layout */
.img-grid:not(.one) .img{ aspect-ratio: 4 / 3; }
.img-grid:not(.one) .img img{ width:100%; height:100%; object-fit:cover; max-height: none; }

/* Single image: show full image (no cropping) */
.img-grid.one .img{ aspect-ratio: auto; }
.img-grid.one .img img{
  width:100%;
  height:auto;
  max-height: 70vh;
  object-fit: contain;
  background: rgba(0,0,0,.22);
}

@media (max-width: 980px){
  .img-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .img-grid.one{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .img-grid{ grid-template-columns: 1fr; }
}

/* Prose-like inputs (editor / composer / comments) */
.prose-input{
  font-size: var(--prose-font-size);
  line-height: var(--prose-leading);
  letter-spacing: .1px;
  padding: 14px 14px;
}
textarea.prose-input{
  resize: vertical;
}