/* FanBoost 2.4 — consolidated responsive social shell */
:root {
  --fb-page: #07111b; --fb-header:#091622; --fb-surface:#101d2b;
  --fb-surface-raised:#142437; --fb-border:#263d4f; --fb-border-soft:#1f3445;
  --fb-text:#f1f7fb; --fb-muted:#9fb5c4; --fb-accent:#4ed7eb;
  --fb-accent-bg:#0e3747; --fb-radius:17px;
}
html { color-scheme:dark; }
body { background:var(--fb-page); color:var(--fb-text); font: 15px/1.52 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:hidden; }
a { transition:color .16s,background-color .16s,border-color .16s; }
button,input,textarea,select { font:inherit; }
.btn { gap:8px; border-radius:11px; box-shadow:none; }
.btn:hover { transform:none; }
.btn-primary { background:#0e94b5; border-color:#1bb4d1; box-shadow:none; color:#fff; }
.btn-primary:hover { background:#0aaac9; filter:none; }
.btn-outline { background:#142334; border-color:#314a5b; }
.btn-ghost:hover { background:#172738; }
.ui-icon { display:inline-flex; flex:none; align-items:center; justify-content:center; vertical-align:middle; }
.ui-icon svg { display:block; }
.wrap { width:min(100% - 44px,1300px); max-width:1300px; }

/* One coherent header, never wrapped/overlapping */
.fb-header { position:sticky; top:0; z-index:80; width:100%; height:72px; background:rgba(8,19,30,.97); border-bottom:1px solid var(--fb-border-soft); backdrop-filter:blur(16px); }
.fb-header-inner { width:min(100% - 40px,1300px); height:100%; margin:0 auto; display:grid; grid-template-columns:225px minmax(0,1fr) auto; gap:18px; align-items:center; }
.fb-logo { display:flex; align-items:center; gap:11px; min-width:0; width:max-content; color:var(--fb-text); }
.fb-logo:hover { color:var(--fb-text); }
.fb-logo-image { width:43px; height:43px; border-radius:50%; object-fit:contain; flex:none; }
.fb-logo-type { display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
.fb-logo-title { font-size:22px; line-height:1.05; font-weight:800; letter-spacing:-.055em; }
.fb-logo-title>span { color:var(--fb-accent); }
.fb-logo-subtitle { font-size:9px; letter-spacing:.14em; font-weight:750; color:#7996a8; }
.fb-header-menu { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; white-space:nowrap; }
.fb-header-menu>a { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; color:#bad0dd; font-size:13px; font-weight:680; border-radius:11px; }
.fb-header-menu>a img { display:block; object-fit:contain; }
.fb-header-menu>a:hover,.fb-header-menu>a.active { color:#effcff; background:#13293a; }
.fb-header-actions { display:flex; align-items:center; gap:9px; min-width:0; white-space:nowrap; }
.fb-langs { display:inline-flex; align-items:center; border-radius:10px; padding:3px; border:1px solid #294354; background:#111f2e; }
.fb-langs>a { min-width:27px; padding:6px 5px; color:#a4c0cf; border-radius:7px; text-align:center; font-size:10px; font-weight:800; }
.fb-langs>a.active { background:#275063; color:#fff; }
.fb-header-icon { position:relative; display:grid; place-items:center; flex:none; width:38px; height:38px; border:1px solid transparent; border-radius:11px; color:#c1d8e3; }
.fb-header-icon:hover { background:#172a3d; color:#fff; border-color:#304d60; }
.fb-header-icon .social-unread { position:absolute; right:-4px; top:-4px; }
.fb-header-profile { display:flex; align-items:center; justify-content:center; gap:8px; min-height:39px; padding:5px 12px 5px 6px; background:#0e8faf; color:#fff; font-size:12px; font-weight:750; border-radius:11px; }
.fb-header-profile:hover { color:#fff; background:#0cacca; }
.fb-header-join { width:auto; padding:9px 13px; white-space:nowrap; }
.fb-profile-avatar { display:grid; place-items:center; overflow:hidden; width:29px; height:29px; border-radius:50%; background:#0e4562; border:1px solid #5bbecf; font-size:13px; }
.fb-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.fb-header-login { color:#c7dce6; font-size:13px; font-weight:700; padding:9px 5px; }
.fb-mobile-nav { display:none; }

/* Dedicated desktop 3-column social shell */
.fb-social-layout { width:min(100% - 40px,1300px); margin:24px auto 66px; display:grid; grid-template-columns:200px minmax(0,680px) minmax(258px,300px); gap:20px; align-items:start; }
.fb-side { position:sticky; top:95px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.fb-side-menu { display:flex; flex-direction:column; gap:5px; }
.fb-side-menu>a { display:flex; align-items:center; gap:14px; min-height:46px; padding:10px 13px; border-radius:11px; font-size:14px; font-weight:650; color:#a9c2d0; }
.fb-side-menu>a:hover,.fb-side-menu>a.active { background:#152a3b; color:#f0fbff; }
.fb-side-menu>a.active { border-left:3px solid var(--fb-accent); padding-left:10px; }
.fb-side-menu .social-unread { margin-left:auto; }
.fb-side-vmesh { display:flex; align-items:center; gap:9px; background:#101e2e; border:1px solid var(--fb-border); border-radius:15px; padding:12px; color:#b9d1df; }
.fb-side-vmesh:hover { color:var(--fb-text); border-color:#39748c; }
.fb-side-vmesh img { flex:none; width:36px; height:36px; object-fit:contain; }
.fb-side-vmesh>span { min-width:0; flex:1; }
.fb-side-vmesh strong,.fb-side-vmesh small { display:block; white-space:nowrap; }
.fb-side-vmesh strong { color:#e7f6fb; font-size:12px; }
.fb-side-vmesh small { font-size:10px; color:#7e9cad; font-weight:500; }
.fb-feed { min-width:0; background:#0d1926; border:1px solid var(--fb-border-soft); border-radius:17px; overflow:hidden; }
.fb-feed-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px 17px; }
.fb-feed-header h1 { font-size:25px; font-weight:790; letter-spacing:-.035em; line-height:1.2; margin:0 0 5px; color:#f2f9fd; overflow-wrap:anywhere; }
.fb-feed-header p { margin:0; color:#89a5b8; font-size:12px; }
.fb-feed-coin { flex:none; width:37px; height:37px; object-fit:contain; }
.fb-feed-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:0; padding:0 16px; border-bottom:1px solid var(--fb-border-soft); }
.fb-feed-tabs>a { display:block; min-width:0; text-align:center; font-size:13px; font-weight:740; padding:13px 4px 12px; color:#93b0c1; border-bottom:3px solid transparent; }
.fb-feed-tabs>a:hover { background:#102333; color:#e8f8ff; }
.fb-feed-tabs>a.active { color:#56d9eb; border-color:#43cde1; }
.fb-feed .social-composer { margin:0; padding:19px 24px 15px; background:#0f1d2b; border-bottom:1px solid var(--fb-border-soft); box-shadow:none; }
.fb-feed .composer-header { gap:10px; margin-bottom:5px; }
.fb-feed .composer-header>a { color:#a4deeb; font-size:12px; }
.fb-feed .composer-form textarea { min-height:83px; resize:vertical; font-size:15px; line-height:1.5; background:transparent; border:0; box-shadow:none; width:100%; color:#eaf5fa; padding:12px 0; }
.fb-feed .composer-form textarea:focus { box-shadow:none; }
.fb-feed .composer-form textarea::placeholder { color:#7e9cac; }
.fb-feed .composer-bottom { align-items:center; gap:8px; border-top:1px solid var(--fb-border-soft); padding-top:12px; }
.fb-feed .composer-file { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:9px; background:transparent; padding:7px 9px; color:#54d5e8; font-weight:700; font-size:12px; }
.fb-feed .composer-file:hover { background:#142a3c; }
.fb-feed .composer-count { margin-left:auto; font-size:11px; color:#7f9baa; }
.fb-feed .composer-bottom .btn { margin-left:8px; }
.fb-feed .social-composer small { margin-top:8px; color:#7390a2; }
.fb-feed .social-post { margin:0; padding:20px 24px; border:0; border-bottom:1px solid var(--fb-border-soft); border-radius:0; box-shadow:none; background:transparent; }
.fb-feed .social-post:hover { background:#102030; }
.fb-feed .social-author { gap:11px; }
.fb-feed .social-author-name { font-size:13px; letter-spacing:0; }
.fb-feed .social-handle { font-size:11px; color:#829eae; }
.fb-feed .social-permalink { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:transparent; border:1px solid transparent; color:#7eacbe; }
.fb-feed .social-permalink:hover { background:#183247; border-color:#2b4f62; }
.fb-feed .social-body { font-size:14px; line-height:1.7; margin:14px 0; color:#e5f0f5; }
.fb-feed .social-actions { gap:7px; margin-top:14px; }
.fb-feed .social-action { display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:12px; min-height:36px; min-width:37px; padding:6px 8px; color:#91aebe; border:0; border-radius:9px; background:transparent; }
.fb-feed .social-action:hover { color:#55daee; background:#142c3d; }
.fb-feed .social-action.is-liked { color:#ff729e; }
.fb-feed .social-action.is-reposted { color:#57e4ba; }
.fb-feed .social-action.boost-action { color:#58d9df; }
.fb-feed .social-image-link { margin-top:10px; }
.fb-empty-feed { text-align:center; padding:50px 28px; color:#a4c2d1; }
.fb-empty-feed .ui-icon { color:#59dbea; margin-bottom:13px; }
.fb-empty-feed h3 { color:#eff9fe; }
.fb-empty-feed p { color:#8ca7b5; font-size:13px; }
.fb-mobile-sponsors { display:none; }

/* Right rail */
.fb-rail { min-width:0; display:flex; flex-direction:column; gap:14px; }
.fb-rail-search { display:flex; align-items:center; gap:9px; min-height:45px; border-radius:13px; border:1px solid var(--fb-border); background:var(--fb-surface); padding:4px 8px 4px 14px; color:#7195aa; }
.fb-rail-search input { flex:1; min-width:0; height:36px; border:0; background:transparent; box-shadow:none; font-size:12px; padding:0; }
.fb-rail-search input:focus { box-shadow:none; }
.fb-rail-search button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; background:#19384a; border-radius:9px; color:#83dcee; }
.fb-rail-card { border:1px solid var(--fb-border); background:#0e1b29; border-radius:15px; padding:17px 18px; }
.fb-rail-card h2 { margin:0 0 10px; font-size:14px; font-weight:760; letter-spacing:0; }
.fb-trend { display:flex; flex-direction:column; gap:1px; padding:9px 6px; border-radius:8px; }
.fb-trend:hover { background:#152a3c; }
.fb-trend strong { font-size:12px; color:#e2eff6; font-weight:730; }
.fb-trend small { font-size:11px; color:#7898a8; }
.fb-person { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid #22384a; }
.fb-person:last-child { border:0; }
.fb-person>span:nth-child(2) { flex:1; min-width:0; }
.fb-person strong,.fb-person small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fb-person strong { font-size:12px; }
.fb-person small { font-size:11px; color:#879fad; }
.fb-rail .social-widget,.fb-mobile-sponsors .social-widget { padding:16px; border-radius:15px; background:#0e1b29; border:1px solid var(--fb-border); box-shadow:none; }
.fb-rail .sponsored-widget h2 { font-size:13px; }
.fb-rail .sponsored-card { padding:12px; border-radius:12px; box-shadow:none; }
.fb-rail .sponsored-card p { font-size:11px; line-height:1.5; }

/* Notifications and other full-width pages */
.notifications-page { min-height:calc(100vh - 300px); max-width:930px; padding:10px 0 55px; }
.notifications-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.notifications-head h1 { font-size:clamp(26px,3vw,34px); font-weight:780; letter-spacing:-.035em; }
.notifications-head p { font-size:14px; color:var(--fb-muted); }
.notification-head-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.notification-head-actions .btn { display:inline-flex; align-items:center; gap:7px; }
.notification-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.notification-summary-card { display:flex; align-items:center; gap:10px; min-height:56px; padding:14px 17px; background:#10202d; border:1px solid var(--fb-border); border-radius:13px; font-size:12px; color:#a8c1d0; }
.notification-summary-card strong { color:var(--fb-text); }
.improved-list { background:transparent; border:0; display:grid; gap:8px; }
.improved-list .social-notification { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--fb-border); background:#101e2c; border-radius:14px; }
.improved-list .social-notification:hover { background:#142537; }
.social-notification-indicator { flex:none; display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:#5ad8eb; background:#143041; }
.social-notification-copy { flex:1; min-width:0; font-size:13px; }
.social-notification-copy small { display:block; color:#819dac; margin-top:4px; }
.social-notification-open { display:grid; place-items:center; flex:none; width:31px; height:31px; color:#8cbdce; }
.premium-empty { text-align:center; padding:55px 18px; border:1px dashed #284456; border-radius:15px; background:#0e1b29; }
.premium-empty h3 { font-size:17px; color:#dbeef6; }
.premium-empty p { font-size:13px; }
.empty-illustration { display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:#17374b; color:#60d9ec; margin:0 auto 20px; }
.premium-empty .btn { display:inline-flex; align-items:center; gap:7px; }

/* PWA */
.premium-app-page { max-width:900px; padding-bottom:60px; }
.premium-hero-card { display:flex; align-items:center; gap:18px; padding:27px; border-radius:19px; background:#102132; border:1px solid var(--fb-border); margin-bottom:18px; }
.premium-hero-card img { width:77px; height:77px; object-fit:contain; }
.premium-hero-card h1 { font-size:clamp(26px,3.2vw,35px); margin:5px 0 8px; }
.premium-hero-card p { font-size:14px; }
.pwa-install-panel,.pwa-push-panel { border:1px solid var(--fb-border); background:#101e2c; border-radius:17px; }
.pwa-install-panel h2,.pwa-push-panel h2 { display:flex; align-items:center; gap:9px; font-size:22px; }
.pwa-control-row { display:flex; flex-wrap:wrap; gap:9px; }
.pwa-control-row .btn { display:inline-flex; align-items:center; gap:7px; }

/* Footer */
.footer { background:#07121d; border-top:1px solid var(--fb-border-soft); }
.footer-grid { padding:27px 0 19px; }
.footer .brand { font-size:18px; }
.footer .brand-mark { height:35px; width:35px; }
.footer .brand-mark img { height:35px; width:35px; }
.footer p,.footer a { font-size:12px; }
.footer .fine-print { font-size:11px; color:#738b9b; }

@media (max-width:1220px) {
  .fb-header-inner { grid-template-columns:205px minmax(0,1fr) auto; gap:7px; }
  .fb-header-menu>a { gap:6px; padding-inline:9px; }
  .fb-social-layout { grid-template-columns:185px minmax(0,1fr) 270px; gap:16px; }
}
@media (max-width:1100px) {
  .fb-header-inner { grid-template-columns:1fr auto; }
  .fb-header-menu { display:none; }
  .fb-social-layout { max-width:940px; grid-template-columns:175px minmax(0,1fr); }
  .fb-rail { display:none; }
  .fb-mobile-sponsors { display:block; grid-column:2; max-width:100%; }
  .fb-mobile-sponsors .sponsored-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:780px) {
  .fb-header { height:64px; }
  .fb-header-inner { width:calc(100% - 28px); gap:6px; }
  .fb-logo-image { width:39px; height:39px; }
  .fb-logo-title { font-size:21px; }
  .fb-logo-subtitle { display:none; }
  .fb-header-profile:not(.fb-header-join) { width:38px; height:38px; padding:0; border-radius:50%; }
  .fb-header-join { min-width:65px; min-height:36px; padding:7px 10px; border-radius:10px; font-size:11px; }
  .fb-header-login { display:none; }
  .fb-header-profile>span:not(.fb-profile-avatar) { display:none; }
  .fb-profile-avatar { border:0; background:transparent; width:30px; height:30px; }
  .fb-header-actions { gap:4px; }
  .fb-langs>a { min-width:24px; padding:6px 3px; font-size:9px; }
  .fb-header-icon { width:35px; height:35px; }
  .fb-header-login { padding:7px 4px; font-size:12px; }
  .fb-social-layout { display:block; width:100%; margin:0; max-width:none; padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
  .fb-side,.fb-rail { display:none; }
  .fb-feed { border:0; border-radius:0; background:#0d1a28; width:100%; }
  .fb-feed-header { padding:20px 17px 15px; }
  .fb-feed-header h1 { font-size:22px; }
  .fb-feed-header p { font-size:12px; }
  .fb-feed-tabs { padding:0 9px; }
  .fb-feed-tabs>a { font-size:13px; padding:12px 4px; }
  .fb-feed .social-composer { padding:17px 16px 13px; }
  .fb-feed .composer-form textarea { min-height:82px; }
  .fb-feed .social-post { padding:18px 17px; }
  .fb-feed .social-body { font-size:14px; }
  .fb-feed .social-actions { justify-content:space-between; }
  .fb-mobile-sponsors { padding:18px 15px; }
  .fb-mobile-sponsors .sponsored-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fb-mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:100; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(64px + env(safe-area-inset-bottom,0px)); padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px)); background:rgba(7,18,29,.98); border-top:1px solid #294253; box-shadow:0 -10px 30px rgba(0,0,0,.28); }
  .fb-mobile-nav>a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; width:100%; padding:5px 2px; color:#839dac; text-align:center; font-size:10.5px; font-weight:720; white-space:nowrap; }
  .fb-mobile-nav>a .ui-icon { width:29px; height:26px; display:grid; place-items:center; border-radius:8px; }
  .fb-mobile-nav>a.active { color:#63deec; }
  .fb-mobile-nav>a.active .ui-icon { background:#113546; }
  .fb-mobile-nav>a>span:not(.ui-icon) { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .fb-unread-dot { width:6px; height:6px; position:absolute; top:6px; right:calc(50% - 16px); background:#f1779c; border-radius:50%; }
  .footer { padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important; }
  .notifications-page,.premium-app-page,.social-inner-page,.page-space { width:calc(100% - 32px); }
  .notifications-head { flex-direction:column; align-items:stretch; }
  .notification-toolbar { grid-template-columns:1fr; gap:8px; }
  .notification-head-actions { display:flex; gap:8px; }
  .notification-head-actions .btn { font-size:11px; }
  .premium-hero-card { padding:18px; }
  .premium-hero-card img { width:60px; height:60px; }
}
@media (max-width:420px) {
  .fb-header-inner { width:calc(100% - 20px); }
  .fb-logo { gap:6px; }
  .fb-logo-image { width:35px; height:35px; }
  .fb-logo-title { font-size:19px; }
  .fb-langs { padding:2px; }
  .fb-langs>a { min-width:22px; font-size:9px; padding:5px 3px; }
  .fb-header-icon { width:30px; }
  .fb-header-profile:not(.fb-header-join) { width:34px; height:34px; }
  .fb-header-join { min-width:61px; padding-inline:8px; }
  .fb-feed .composer-bottom { gap:5px; }
  .fb-feed .composer-file { padding-inline:3px; font-size:11px; }
  .fb-feed .composer-count { font-size:10px; }
  .fb-feed .composer-bottom .btn { margin-left:3px; padding-inline:9px; font-size:11px; }
  .fb-mobile-nav { padding-inline:3px; }
  .fb-mobile-nav>a { font-size:10px; }
  .fb-mobile-sponsors .sponsored-stack { grid-template-columns:1fr; }
}