/* Mada Home Redesign v1 — visual layer over the existing home */
:root{--mr-blue:#1877f2;--mr-bg:#f3f6fb;--mr-card:rgba(255,255,255,.96);--mr-text:#172033;--mr-muted:#7d8798;--mr-line:#e6ebf2;--mr-shadow:0 10px 30px rgba(22,40,75,.08)}
body{background:radial-gradient(circle at 100% 0,#eaf2ff 0,transparent 28%),var(--mr-bg)!important;color:var(--mr-text)!important}
.topbar{height:70px!important;background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(220,228,240,.8)!important;box-shadow:0 5px 24px rgba(23,37,64,.08)!important}
.topbar .brand{font-size:32px!important;font-weight:950!important;letter-spacing:-1.4px!important}
.top-actions{gap:7px!important}.top-actions button{background:#f1f5fa!important;border:1px solid #e6ebf2!important;box-shadow:0 2px 8px rgba(20,35,65,.05)!important}.top-actions button:active{background:#e8f0ff!important;color:var(--mr-blue)!important}
.container{max-width:740px!important;padding:12px 12px 28px!important}
.stories{gap:10px!important;padding:4px 2px 11px!important;margin-bottom:12px!important}.story{min-width:100px!important;width:100px!important;height:142px!important;border-radius:21px!important;box-shadow:0 8px 22px rgba(25,48,90,.12)!important}.add-story{background:linear-gradient(160deg,#eaf2ff,#dce8ff)!important;border:1px solid #d4e1fb!important}.add-story:after{background:var(--mr-blue)!important;box-shadow:0 7px 18px rgba(24,119,242,.3)!important}
.card.composer{border-radius:24px!important;border:1px solid rgba(220,228,240,.9)!important;background:var(--mr-card)!important;box-shadow:var(--mr-shadow)!important;padding:15px!important}.composer-row{gap:11px!important}.composer-row .avatar{width:48px!important;height:48px!important}.composer input{height:48px!important;background:#f3f6fa!important;border:1px solid #e8edf4!important;font-size:15px!important}.composer input:focus{background:#fff!important;box-shadow:0 0 0 3px rgba(24,119,242,.12)!important}.composer-actions{margin-top:12px!important;padding-top:11px!important;border-top:1px solid #edf0f5!important}.composer-actions button{border-radius:13px!important;font-weight:800!important;transition:.16s ease!important}.composer-actions button:hover{background:#f2f6fc!important}.composer-actions .primary{background:var(--mr-blue)!important;color:#fff!important;box-shadow:0 5px 14px rgba(24,119,242,.2)!important}
.reels-section{margin-top:14px!important;background:transparent!important}.reels-title{font-size:18px!important;font-weight:900!important}.reels-row{gap:10px!important;padding-bottom:4px!important}.reel-card{border-radius:20px!important;overflow:hidden!important;box-shadow:0 8px 22px rgba(20,35,65,.12)!important}
.feed{margin-top:14px!important;gap:14px!important}.feed .post{border-radius:24px!important;background:var(--mr-card)!important;border:1px solid rgba(220,228,240,.85)!important;box-shadow:var(--mr-shadow)!important}.feed .post-head{padding:15px 16px 11px!important}.feed .post-text{font-size:16px!important;line-height:1.78!important}.feed .post-stats{font-size:12px!important}.feed .post-actions button{font-size:13px!important;min-height:44px!important}.feed .post-actions button:hover{background:#f2f6fc!important}
.bottom-nav{height:70px!important;left:9px!important;right:9px!important;border-radius:24px!important;background:rgba(255,255,255,.9)!important;border:1px solid rgba(220,228,240,.9)!important;box-shadow:0 12px 34px rgba(20,35,65,.18)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}.bottom-nav button{height:62px!important;border-radius:18px!important}.bottom-nav .active{background:linear-gradient(180deg,#eaf2ff,#e3edff)!important;color:var(--mr-blue)!important}.bottom-nav button:active{transform:scale(.96)!important}
/* Dark mode: works with the existing body.dark / html.dark hooks */
html.dark body,body.dark{background:radial-gradient(circle at 100% 0,#101d38 0,transparent 30%),#070b13!important;color:#edf3ff!important}html.dark .topbar,body.dark .topbar{background:rgba(10,15,25,.88)!important;border-color:#1d2737!important}html.dark .top-actions button,body.dark .top-actions button{background:#121a29!important;border-color:#202c40!important;color:#dbe7ff!important}html.dark .card.composer,body.dark .card.composer,html.dark .feed .post,body.dark .feed .post{background:rgba(13,20,32,.96)!important;border-color:#202c3d!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}html.dark .composer input,body.dark .composer input{background:#111a28!important;border-color:#243148!important;color:#eef4ff!important}html.dark .composer-actions,body.dark .composer-actions,html.dark .feed .post-actions,body.dark .feed .post-actions{border-color:#202c3d!important}html.dark .feed .post-name,body.dark .feed .post-name,html.dark .feed .post-text,body.dark .feed .post-text{color:#eef4ff!important}html.dark .feed .post-actions button,body.dark .feed .post-actions button{color:#aab7ca!important}html.dark .bottom-nav,body.dark .bottom-nav{background:rgba(10,15,25,.92)!important;border-color:#202c3d!important}html.dark .bottom-nav .active,body.dark .bottom-nav .active{background:#122544!important}
@media(max-width:480px){.container{padding-left:8px!important;padding-right:8px!important}.topbar .brand{font-size:28px!important}.top-actions button{width:38px!important;height:38px!important}.story{min-width:92px!important;width:92px!important;height:134px!important}.card.composer{padding:12px!important;border-radius:21px!important}.composer-actions button{font-size:11px!important}.feed .post{border-radius:21px!important}.bottom-nav{left:6px!important;right:6px!important;height:66px!important}.bottom-nav button{height:59px!important}.bottom-nav span{font-size:9px!important}}