/* =========================================================
   AI.MUONNOI.ORG
   V2 VISUAL SYSTEM
   COMPLETE STYLE.CSS
   SYNCS WITH INDEX.HTML V2
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root{
  --bg: #0a0f14;
  --bg-2: #0d131a;
  --bg-3: #111821;

  --surface: rgba(255,255,255,.028);
  --surface-2: rgba(255,255,255,.038);
  --surface-3: rgba(255,255,255,.05);

  --panel: #101720;
  --panel-2: #131c26;
  --panel-3: #172230;

  --card: #121b25;
  --card-2: #16212d;

  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.12);

  --text: #edf3f9;
  --text-2: #dbe5ef;
  --muted: #98aabc;
  --soft: #7a8a9b;

  --accent: #7dd3fc;
  --accent-2: #60a5fa;
  --accent-3: #38bdf8;

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --purple: #a78bfa;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  --shadow-xs: 0 4px 12px rgba(0,0,0,.12);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.18);
  --shadow: 0 18px 40px rgba(0,0,0,.24);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.32);

  --max-width: 1500px;
  --left-rail: 228px;
  --right-rail: 328px;
  --main-col: 1fr;

  --header-h: 78px;
  --transition-fast: .16s ease;
  --transition: .22s ease;
  --transition-slow: .3s ease;
}

/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.11), transparent 26%),
    radial-gradient(circle at top right, rgba(125,211,252,.08), transparent 22%),
    linear-gradient(180deg, var(--bg) 0%, #0b1016 100%);
  font: 500 16px/1.58 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea{
  font: inherit;
}

button{
  appearance: none;
  -webkit-appearance: none;
}

textarea{
  resize: vertical;
}

.hidden{
  display: none !important;
}

/* =========================================================
   3. SCROLLBAR
   ========================================================= */

*{
  scrollbar-width: thin;
  scrollbar-color: rgba(125,211,252,.25) transparent;
}

*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track{
  background: transparent;
}

*::-webkit-scrollbar-thumb{
  background: rgba(125,211,252,.2);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover{
  background: rgba(125,211,252,.32);
}

/* =========================================================
   4. GLOBAL HELPERS
   ========================================================= */

.hidden{
  display: none !important;
}

.sr-only,
.hidden-label{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* index currently uses .hidden on labels */
label.hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: block !important;
}

/* =========================================================
   5. BUTTON SYSTEM
   ========================================================= */

.primary-btn,
.primary-action,
.ghost-btn,
.action-btn,
.load-more-btn,
.clear-search-btn,
.reply-box button,
.mobile-bottom-nav a{
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition-fast),
    box-shadow var(--transition);
}

.primary-btn,
.primary-action{
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04131b;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(96,165,250,.22);
}

.primary-btn:hover,
.primary-action:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.primary-btn:active,
.primary-action:active{
  transform: translateY(0);
}

.primary-btn{
  padding: 12px 18px;
  border-radius: 14px;
}

.primary-action{
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 14px;
}

.ghost-btn,
.action-btn,
.load-more-btn,
.clear-search-btn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
}

.ghost-btn{
  padding: 10px 14px;
  border-radius: 12px;
}

.ghost-btn:hover,
.ghost-btn.active{
  background: rgba(125,211,252,.08);
  border-color: rgba(125,211,252,.2);
  color: var(--accent);
}

.small-btn{
  padding: 8px 11px;
  border-radius: 11px;
  font-size: .92rem;
}

.action-btn{
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
}

.action-btn:hover,
.action-btn.active{
  color: var(--text);
  background: rgba(125,211,252,.08);
  border-color: rgba(125,211,252,.22);
}

.load-more-btn{
  padding: 13px 18px;
  border-radius: 14px;
}

.load-more-btn:hover{
  background: rgba(125,211,252,.08);
  border-color: rgba(125,211,252,.2);
}

.clear-search-btn{
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--muted);
}

.clear-search-btn:hover{
  background: rgba(255,255,255,.08);
  color: var(--text);
}

/* =========================================================
   6. SHARED CARD SYSTEM
   ========================================================= */

.global-header,
.brand-card,
.side-panel,
.composer-card,
.post-card,
.feed-controls,
.feed-toolbar,
.topbar,
.loading-card,
.feed-mode-tabs,
.topic-chips-row{
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
  backdrop-filter: saturate(120%) blur(0px);
}

.brand-card,
.side-panel,
.composer-card,
.post-card,
.feed-controls,
.feed-toolbar,
.topbar,
.loading-card,
.feed-mode-tabs,
.topic-chips-row{
  border-radius: var(--radius-lg);
}

/* =========================================================
   7. GLOBAL HEADER
   ========================================================= */

.global-header{
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(8,12,16,.92), rgba(10,15,20,.82));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}

.global-header__inner{
  width: min(calc(100% - 28px), var(--max-width));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}

.global-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.global-brand__mark{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04131b;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 10px 20px rgba(96,165,250,.22);
}

.global-brand__text{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.global-brand__text strong{
  font-size: .98rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.global-brand__text em{
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-search{
  min-width: 0;
}

.global-search .search-input{
  width: 100%;
  min-width: 0;
}

.global-actions,
.global-user{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   8. MAIN PAGE LAYOUT
   ========================================================= */

.site-shell{
  width: min(calc(100% - 28px), var(--max-width));
  margin: 22px auto 28px;
  display: grid;
  grid-template-columns: var(--left-rail) minmax(0, 1fr) var(--right-rail);
  gap: 22px;
  align-items: start;
}

.sidebar,
.content-column{
  min-width: 0;
}

.left-sidebar{
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.right-sidebar{
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

/* =========================================================
   9. LEFT RAIL
   ========================================================= */

.main-nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.secondary-links{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item{
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--muted);
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition-fast);
}

.nav-item:hover{
  transform: translateX(2px);
  color: var(--text);
}

.nav-item.active,
.nav-item:hover{
  background: rgba(125,211,252,.08);
  border-color: rgba(125,211,252,.18);
}

.brand-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 14px;
}

.brand-card .brand-mark{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04131b;
  font-weight: 900;
  letter-spacing: .04em;
}

.brand-card .brand-copy{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-card .brand-copy strong{
  font-size: 1rem;
  line-height: 1.2;
}

.brand-card .brand-copy span{
  margin-top: 3px;
  color: var(--muted);
  font-size: .9rem;
}

.side-panel{
  padding: 18px;
  margin-bottom: 14px;
}

.side-panel h3{
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.side-panel p{
  margin: 0;
  color: var(--muted);
}

/* =========================================================
   10. TOPBAR + MAIN HEADER BLOCKS
   ========================================================= */

.topbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.topbar-title h1{
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.topbar-title p{
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 760px;
}

.topbar-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.feed-mode-tabs,
.topic-chips-row{
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* =========================================================
   11. SEARCH + FILTERS
   ========================================================= */

.feed-controls{
  padding: 16px 18px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
}

.search-wrap{
  position: relative;
}

.search-input,
.topic-select,
.reply-box input,
.composer-box textarea{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  outline: none;
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--text);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

.search-input,
.topic-select{
  padding: 14px 16px;
}

.search-input::placeholder,
.composer-box textarea::placeholder,
.reply-box input::placeholder{
  color: var(--soft);
}

.search-input:focus,
.topic-select:focus,
.reply-box input:focus,
.composer-box textarea:focus{
  border-color: rgba(125,211,252,.28);
  box-shadow: 0 0 0 3px rgba(125,211,252,.08);
}

.clear-search-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.topic-filter-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.topic-label{
  color: var(--muted);
  font-size: .9rem;
}

.tool-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-tags span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125,211,252,.14);
  background: rgba(125,211,252,.08);
  color: var(--accent);
  font-size: .88rem;
  white-space: nowrap;
}

/* =========================================================
   12. FEED SUMMARY BAR
   ========================================================= */

.feed-toolbar{
  padding: 13px 18px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.feed-toolbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.feed-toolbar-left strong{
  font-size: 1rem;
}

.feed-toolbar-left span{
  color: var(--muted);
  font-size: .94rem;
}

/* =========================================================
   13. COMPOSER
   ========================================================= */

.composer-card{
  padding: 18px;
  margin-bottom: 14px;
}

.composer-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.composer-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.composer-meta strong{
  line-height: 1.2;
}

.composer-meta span{
  color: var(--muted);
  font-size: .94rem;
  margin-top: 3px;
}

.avatar{
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #06131b;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(96,165,250,.14);
  background: linear-gradient(135deg, #93c5fd, #7dd3fc);
}

.avatar.user{
  background: linear-gradient(135deg, #93c5fd, #7dd3fc);
}

.avatar.mod{
  background: linear-gradient(135deg, #67e8f9, #60a5fa);
}

.avatar.user2{
  background: linear-gradient(135deg, #a7f3d0, #34d399);
}

.avatar.tech{
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
}

.avatar.ai{
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
}

.avatar.small{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  font-size: .8rem;
}

.composer-box textarea{
  min-height: 112px;
  padding: 16px 18px;
}

.composer-assist-row{
  margin-top: 14px;
}

.composer-tools{
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.composer-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.composer-fields{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.composer-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.composer-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer-field span{
  color: var(--muted);
  font-size: .92rem;
}

/* =========================================================
   14. FEED LIST
   ========================================================= */

.feed-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.post-card{
  padding: 18px;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition-fast);
}

.post-card:hover{
  border-color: rgba(255,255,255,.11);
  box-shadow: var(--shadow-lg);
}

.post-card.featured{
  border-color: rgba(125,211,252,.22);
}

.post-card.hot{
  box-shadow: 0 18px 40px rgba(251,191,36,.08);
}

.post-header{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.post-meta{
  min-width: 0;
  flex: 1;
}

.post-userline{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-userline strong{
  line-height: 1.2;
}

.post-userline span{
  color: var(--muted);
  font-size: .92rem;
}

.dot{
  opacity: .5;
}

.post-topic{
  margin-top: 3px;
  color: var(--soft);
  font-size: .92rem;
}

.verified{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
  font-size: .78rem !important;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.18);
  color: var(--success) !important;
}

.post-labels{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.post-label{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .84rem;
}

.post-label.hot{
  background: rgba(251,191,36,.08);
  border-color: rgba(251,191,36,.18);
  color: var(--warning);
}

.post-label.verified{
  color: var(--success);
}

.post-label.ai{
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.18);
  color: var(--purple);
}

.post-title{
  margin: 14px 0 10px;
  font-size: 1.42rem;
  line-height: 1.26;
  letter-spacing: -.02em;
}

.post-body{
  margin: 0;
  color: var(--text-2);
}

.link-preview{
  margin-top: 16px;
  padding: 14px;
  display: flex;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.link-badge{
  align-self: flex-start;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(96,165,250,.16);
  background: rgba(96,165,250,.10);
  color: var(--accent);
  font-size: .88rem;
}

.link-content{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-content strong{
  line-height: 1.3;
}

.link-content span{
  color: var(--muted);
}

.post-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
}

.vote-btn.voted,
.save-btn.saved{
  border-color: rgba(125,211,252,.24);
  background: rgba(125,211,252,.12);
  color: var(--accent);
}

.post-author{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
}

.post-author-link{
  color: inherit;
}

.post-author-link:hover,
.post-link:hover{
  color: var(--accent);
}

.ai-mark,
.verified-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}

.ai-mark{
  background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.22);
  color: var(--purple);
}

.verified-mark{
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.2);
  color: var(--success);
}

.ai-summary{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(167,139,250,.18);
  background: rgba(167,139,250,.08);
}

.ai-summary strong{
  display: block;
  margin-bottom: 6px;
}

/* =========================================================
   15. POLLS
   ========================================================= */

.mini-poll{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.poll-row{
  display: grid;
  grid-template-columns: 120px 1fr 52px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.poll-row:last-child{
  margin-bottom: 0;
}

.poll-row span{
  color: var(--muted);
  font-size: .94rem;
}

.poll-row b{
  text-align: right;
}

.poll-bar{
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.poll-bar i{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* =========================================================
   16. COMMENTS
   ========================================================= */

.comment-thread{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-item{
  display: flex;
  gap: 12px;
}

.comment-item.nested{
  margin-left: 28px;
}

.comment-body{
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.comment-head{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.comment-head span{
  color: var(--muted);
  font-size: .88rem;
}

.comment-author{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-weight: 700;
}

.comment-time{
  color: var(--muted);
  font-size: .86rem;
  font-weight: 500;
}

.comment-text{
  margin: 0;
  color: var(--text-2);
}

.comment-form{
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-input{
  width: 100%;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--panel-2);
  color: var(--text);
}

.comment-input:focus{
  border-color: rgba(125,211,252,.28);
  box-shadow: 0 0 0 3px rgba(125,211,252,.08);
}

.comment-form-actions{
  display: flex;
  justify-content: flex-end;
}

.comment-form-submit{
  min-width: 160px;
}

.comments-loading{
  color: var(--muted);
}

.comment-body p{
  margin: 0;
  color: var(--text-2);
}

.comment-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.comment-actions button{
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.comment-actions button:hover{
  color: var(--accent);
}

.reply-box{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.reply-box input{
  padding: 10px 12px;
  border-radius: 12px;
}

.reply-box button{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125,211,252,.18);
  background: rgba(125,211,252,.10);
  color: var(--accent);
  cursor: pointer;
}

.reply-box button:hover{
  background: rgba(125,211,252,.16);
}

/* =========================================================
   17. RIGHT RAIL
   ========================================================= */

.trend-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trend-list li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.trend-list a:hover{
  color: var(--accent);
}

.trend-list span{
  color: var(--muted);
  font-size: .9rem;
  white-space: nowrap;
}

.room-card,
.tool-card{
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.room-card:last-child,
.tool-card:last-child{
  margin-bottom: 0;
}

.room-card strong,
.tool-card strong{
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}

.room-card span,
.tool-card p{
  margin: 0;
  color: var(--muted);
}

.room-row,
.trending-item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.trending-item{
  cursor: pointer;
  text-align: left;
}

.trending-item:hover,
.room-row:hover{
  border-color: rgba(125,211,252,.18);
  background: rgba(125,211,252,.06);
}

.trending-item strong,
.room-row strong{
  font-size: .95rem;
}

.trending-item span,
.room-row span{
  color: var(--muted);
  font-size: .88rem;
  white-space: nowrap;
}

.stat-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat-box{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.stat-box b{
  display: block;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.stat-box span{
  color: var(--muted);
  font-size: .92rem;
}

/* =========================================================
   18. LOADING / EMPTY / LOAD MORE
   ========================================================= */

.loading-card{
  padding: 18px;
}

.loading-line{
  height: 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.1),
      rgba(255,255,255,.04)
    );
}

.loading-line:last-child{
  margin-bottom: 0;
}

.w-40{ width: 40%; }
.w-75{ width: 75%; }
.w-90{ width: 90%; }

.empty-state{
  padding: 28px 20px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed var(--line-strong);
  background: rgba(255,255,255,.02);
  color: var(--muted);
}

.load-more-wrap{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.site-footer{
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding: 20px 0 32px;
}

.site-footer__inner{
  width: min(calc(100% - 28px), var(--max-width));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.site-footer__inner p{
  color: var(--muted);
}

.site-footer__links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.site-footer__links a{
  color: var(--muted);
}

.site-footer__links a:hover{
  color: var(--accent);
}

/* =========================================================
   19. MOBILE BOTTOM NAV
   ========================================================= */

.mobile-bottom-nav{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(9,14,19,.92);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.mobile-bottom-nav a{
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-radius: 12px;
  color: var(--muted);
  font-size: .86rem;
}

.mobile-bottom-nav a:hover{
  background: rgba(125,211,252,.08);
  color: var(--accent);
}

/* =========================================================
   20. FOCUS STATES
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(125,211,252,.12);
  border-color: rgba(125,211,252,.28);
}

/* =========================================================
   21. RESPONSIVE
   ========================================================= */

@media (max-width: 1360px){
  :root{
    --left-rail: 216px;
    --right-rail: 300px;
  }
}

@media (max-width: 1200px){
  .global-header__inner{
    grid-template-columns: 220px minmax(220px, 1fr) auto;
  }

  .global-user{
    display: none;
  }

  .site-shell{
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .right-sidebar{
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .right-sidebar .side-panel{
    margin-bottom: 0;
  }
}

@media (max-width: 920px){
  .global-header{
    height: auto;
    padding: 10px 0;
  }

  .global-header__inner{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .global-actions{
    justify-content: flex-start;
  }

  .site-shell{
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .left-sidebar{
    position: static;
    order: 2;
  }

  .content-column{
    order: 1;
  }

  .right-sidebar{
    order: 3;
    position: static;
    grid-template-columns: 1fr;
  }

  .topbar{
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions{
    justify-content: flex-start;
  }

  .feed-controls{
    grid-template-columns: 1fr;
  }

  .composer-grid{
    grid-template-columns: 1fr;
  }

  .feed-toolbar{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px){
  .left-sidebar{
    display: none;
  }

  .mobile-bottom-nav{
    display: flex;
  }

  body{
    padding-bottom: 92px;
  }
}

@media (max-width: 640px){
  .site-shell{
    width: min(calc(100% - 16px), var(--max-width));
    gap: 12px;
    margin-bottom: 18px;
  }

  .global-header__inner{
    width: min(calc(100% - 16px), var(--max-width));
  }

  .topbar,
  .feed-mode-tabs,
  .topic-chips-row,
  .feed-controls,
  .feed-toolbar,
  .composer-card,
  .post-card,
  .side-panel,
  .loading-card{
    border-radius: 18px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar-title h1{
    font-size: 1.5rem;
  }

  .post-title{
    font-size: 1.18rem;
  }

  .post-actions{
    gap: 8px;
  }

  .action-btn{
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }

  .poll-row{
    grid-template-columns: 90px 1fr 44px;
    gap: 8px;
  }

  .comment-item.nested{
    margin-left: 14px;
  }

  .reply-box{
    flex-direction: column;
  }

  .reply-box button{
    width: 100%;
  }
}

@media (max-width: 420px){
  .global-brand__text em{
    display: none;
  }

  .tool-tags,
  .composer-actions,
  .topbar-actions,
  .feed-toolbar-left,
  .site-footer__links{
    gap: 8px;
  }

  .action-btn{
    flex: 1 1 100%;
  }

  .site-footer__inner{
    flex-direction: column;
  }
}