/* =============================
   AGORA MUSE — THEME: CULTURAL NETWORK (YOUTH/SOCIAL)
   Author: ChatGPT
   ============================= */
:root{
  --blue:#1E90FF;         /* primary */
  --blue-dark:#187bd6;    /* primary hover */
  --navy:#1E3A5F;         /* headings / strong */
  --teal:#2A506B;         /* accents */
  --gold:#C59B3B;         /* CTA accent */
  --sand:#D6C6A1;         /* soft blocks */
  --pearl:#F5F5F5;        /* page bg */
  --ink:#0F1B2D;          /* base text */
  --muted:#6B7280;        /* muted text */
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink); background:var(--pearl);
}
img{max-width:100%; display:block}

/* Header */
.header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid #e5e7eb}
.header__inner{max-width:1100px; margin:auto; padding:12px 16px; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand__logo{width:32px; height:32px; border-radius:999px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,#4F46E5,#1E90FF 60%,#06B6D4)}
.header__search{margin-left:auto; display:flex; align-items:center; gap:10px}
.input{border:0; outline:0; background:#f3f4f6; padding:10px 14px; border-radius:999px; font-size:14px; min-width:260px}
.btn{border:0; cursor:pointer; padding:10px 16px; border-radius:999px; font-weight:600}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--outline{background:#fff; color:var(--ink); border:1px solid #e5e7eb}

/* Tabs */
.tabs{max-width:1100px; margin:0 auto; padding:0 16px 10px}
.tabs ul{list-style:none; margin:0; padding:0; display:flex; gap:10px}
.tabs li{font-size:14px; color:#6b7280; padding:8px 12px; border-radius:999px; cursor:pointer}
.tabs li.active{background:#E6F0FF; color:var(--blue)}
.tabs li:hover{background:#f3f4f6}

/* Stories */
.section{max-width:1100px; margin:0 auto; padding:24px 16px}
.section__title{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.story-row{display:flex; gap:16px; overflow:auto; padding-bottom:8px}
.story{flex:0 0 96px}
.story__thumb{aspect-ratio:1/1; border-radius:18px; background:linear-gradient(135deg,#FDE68A,#C7D2FE,#A7F3D0); box-shadow:var(--shadow)}
.story__label{margin-top:6px; font-size:12px; text-align:center; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Composer */
.card{background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:var(--shadow)}
.card__body{padding:16px}
.composer{display:flex; align-items:center; gap:12px}
.avatar{width:36px; height:36px; border-radius:999px; background:#e5e7eb; display:grid; place-items:center; font-size:12px; color:#6b7280}
.composer input{flex:1; background:#f9fafb; border:0; outline:0; padding:12px 16px; border-radius:999px; font-size:14px}

/* Layout */
.grid{display:grid; gap:24px}
@media(min-width:880px){.grid{grid-template-columns:1fr 320px}}

/* Post */
.post{overflow:hidden}
.post__head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.post__meta{line-height:1.1}
.post__title{font-weight:700; font-size:14px}
.post__sub{font-size:12px; color:#6b7280}
.media{aspect-ratio:16/9; border-radius:12px; background:#f3f4f6; margin-bottom:12px}
.post__text{font-size:14px; margin:0 0 12px}
.post__actions{display:flex; align-items:center; gap:16px; font-size:14px; color:#6b7280}
.post__actions .spacer{margin-left:auto}
.btn--cta{background:var(--gold); color:#fff; border-radius:999px; padding:8px 14px}
.btn--cta:hover{filter:brightness(.95)}

/* Right rail */
.widget h3{margin:0 0 12px; font-size:16px}
.tag-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:12px}
.tag-row:hover{background:#f9fafb}
.badge{padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; font-size:12px; background:#fff}
.event{background:#f9fafb; padding:12px; border-radius:12px; font-size:14px}

/* Bottom nav (mobile) */
.bottomnav{position:fixed; bottom:16px; inset-inline:0; padding:0 16px}
.bottomnav__inner{max-width:560px; margin:auto; display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid #e5e7eb; border-radius:999px; box-shadow:var(--shadow)}
.bottomnav__btn{font-size:12px; color:#6b7280}
.bottomnav__btn.active{color:var(--blue); font-weight:700}

/* Footer */
.footer{color:#9ca3af; text-align:center; padding:28px 16px}

/* Helpers */
.hide-md{display:none}
@media(min-width:880px){.hide-md{display:block}}