/*
Theme Name: MicroX (Theme Only)
Description: X-inspired members-only feed using real WordPress posts.
Version: 3.7.0
Text Domain: microx
*/

:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --topbar-bg:rgba(255,255,255,.9);
  --search-focus-bg:#ffffff;
  --card:#f7f9f9;
  --border:#eff3f4;
  --text:#0f1419;
  --muted:#536471;
  --accent:#1d9bf0;
  --danger:#f4212e;
  --green:#00ba7c;
  --hover:rgba(15,20,25,.08);
  --shadow:0 1px 2px rgba(0,0,0,.08);
  --primary-btn:#0f1419;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Layout */
.mx-wrap{max-width:1260px;margin:0 auto;padding:0 16px}
.mx-grid{display:grid;grid-template-columns:275px minmax(0, 600px) 350px;gap:28px;align-items:start}
/* Messages (DM) panel: hide right sidebar and expand center like X/Twitter */
.mx-grid.mx-grid-chat{grid-template-columns:275px minmax(0, 950px)}
.mx-grid.mx-grid-chat .mx-right{display:none !important}
.mx-grid.mx-grid-no-right{grid-template-columns:275px minmax(0, 950px)}
.mx-grid.mx-grid-no-right .mx-right{display:none !important}
@media (max-width:1120px){.mx-grid{grid-template-columns:80px minmax(0, 600px) 0}.mx-grid.mx-grid-chat{grid-template-columns:80px minmax(0, 950px)}.mx-grid.mx-grid-no-right{grid-template-columns:80px minmax(0, 950px)}.mx-right{display:none}}
@media (max-width:720px){.mx-wrap{padding:0}.mx-grid{grid-template-columns:1fr}.mx-grid.mx-grid-chat{grid-template-columns:1fr}.mx-grid.mx-grid-no-right{grid-template-columns:1fr}.mx-left,.mx-right{display:none}.mx-main{border-left:none;border-right:none}}

/* Icons */
.mx-icon{width:22px;height:22px;display:block}
.mx-icon.sm{width:18px;height:18px}


/* Utilities */
.mx-hide{display:none !important}

/* Icon button (X-like) */
.mx-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  border:0;background:transparent;color:inherit;
  cursor:pointer;
}
.mx-iconbtn:hover{background:var(--hover)}
.mx-iconbtn:active{transform:scale(.98)}

/* Primary button (black, like X) */
.mx-btn-primary{
  background:var(--primary-btn);
  border-color:transparent;
  color:#fff;
  font-weight:900;
}
.mx-btn-primary:hover{filter:brightness(1.05)}
.mx-btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}

/* Heart fill toggle (outline vs solid) */
.mx-heart-solid{display:none}
.mx-action.mx-like.is-liked .mx-heart-solid{display:inline-flex}
.mx-action.mx-like.is-liked .mx-heart-outline{display:none}

/* Bookmark fill toggle */
.mx-bm-solid{display:none}
.mx-action.mx-bookmark.is-bookmarked .mx-bm-solid{display:inline-flex}
.mx-action.mx-bookmark.is-bookmarked .mx-bm-outline{display:none}
.mx-action.mx-bookmark.is-bookmarked{color:var(--accent)}

/* Home icon (filled when active, outline otherwise) */
.mx-home-solid{display:none}
.mx-navlink.is-active .mx-home-solid{display:block}
.mx-navlink.is-active .mx-home-outline{display:none}

/* Left nav */
.mx-left-inner{position:sticky;top:0;padding:12px 0 12px;height:100vh;display:flex;flex-direction:column}
.mx-brand{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:48px;max-width:100%;height:48px;padding:0 12px;border-radius:999px;cursor:pointer;overflow:hidden}
.mx-brand:hover{background:var(--hover)}
.mx-brand-img{display:block;object-fit:contain}
.mx-brand-img-nav{width:auto;max-width:160px;height:30px}
.mx-brand-text{display:inline-flex;align-items:center;font-weight:900;line-height:1;white-space:nowrap}
.mx-brand-text-full{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.mx-brand-text-short{display:none}
.mx-brand-text-nav{font-size:22px}
@media (max-width:1120px){.mx-brand{justify-content:center;padding:0;width:48px}.mx-brand-img-nav{max-width:32px;height:32px}.mx-brand-text-full{display:none}.mx-brand-text-short{display:inline-block;font-size:24px}}

.mx-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.mx-navlink{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:999px;
  font-size:20px;line-height:1.1;
}
.mx-navlink:hover{background:var(--hover)}
.mx-navlink.is-active{font-weight:900}
.mx-ico{width:28px;display:inline-flex;justify-content:center;align-items:center}
.mx-ico-wrap{position:relative}
.mx-label{white-space:nowrap}

.mx-badge{
  position:absolute;top:-3px;right:-6px;
  min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

.mx-tag{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;border-radius:6px;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:800;
}

@media (max-width:1120px){
  .mx-label,.mx-tag{display:none}
  .mx-navlink{justify-content:center;padding:12px 10px}
  .mx-ico{width:auto}
}

.mx-post-big{
  margin-top:14px;width:100%;padding:16px 16px;
  border:none;border-radius:999px;
  background:var(--primary-btn);color:#fff;
  font-weight:900;font-size:16px;
  cursor:pointer;box-shadow:var(--shadow)
}
.mx-post-big:hover{filter:brightness(1.05)}
@media (max-width:1120px){.mx-post-big{display:none}}

/* Left account bar (X-like)
   Keep Post + userbar close to the nav (like X), not pushed to the bottom */
.mx-left-bottom{margin-top:10px;display:flex;flex-direction:column;gap:10px;padding-top:0}
.mx-left-bottom .mx-post-big{margin-top:0}

.mx-userbar{margin-top:0;padding-top:0;position:relative}
.mx-userbar-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:999px;cursor:pointer}
.mx-userbar-wrap:hover{background:var(--hover)}
.mx-userbar-profile{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.mx-userbar-ava{width:40px;height:40px;border-radius:999px;border:1px solid var(--border);object-fit:cover;flex:0 0 auto}
.mx-userbar-meta{min-width:0}
.mx-userbar-name{font-weight:900;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-userbar-handle{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mx-userbar-more{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px}
.mx-userbar-more:hover{background:rgba(15,20,25,.06)}

/* Account menu (X-style) */
.mx-acct-menu{position:absolute;left:0;bottom:calc(100% + 10px);min-width:260px;max-width:320px;background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:8px;display:none;z-index:50}
.mx-acct-menu::after{content:"";position:absolute;bottom:-8px;left:34px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid var(--card);filter:drop-shadow(0 2px 0 rgba(0,0,0,.06))}
.mx-acct-menu.is-open{display:block}
.mx-acct-item{display:block;padding:12px 14px;border-radius:12px;color:var(--text);font-weight:600;line-height:1.2}
.mx-acct-item:hover{background:var(--hover)}
.mx-acct-logout{font-weight:700}


/* More menu popover (X/Twitter-style) */
.mx-more-menu{
  position:fixed;
  min-width:280px;
  max-width:340px;
  background:var(--panel);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  padding:8px;
  display:none;
  z-index:70;
}
.mx-more-menu.is-open{display:block}
.mx-more-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:14px;
  color:var(--text);
  font-weight:700;
  font-size:16px;
  line-height:1.2;
}
.mx-more-item:hover{background:var(--hover)}
.mx-more-ico{width:26px;display:inline-flex;align-items:center;justify-content:center}
.mx-more-sep{height:1px;background:rgba(0,0,0,.08);margin:6px 8px;border-radius:1px}


@media (max-width:1120px){
  .mx-userbar-wrap{justify-content:center;padding:12px 10px}
  .mx-userbar-meta{display:none}
  .mx-userbar-more{display:none}
}

/* Main column shell */
.mx-main{background:var(--panel);border-left:1px solid var(--border);border-right:1px solid var(--border);min-height:100vh}
.mx-center{display:flex;flex-direction:column}

.mx-topbar{position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);z-index:10}
.mx-tabs{display:grid;grid-template-columns:1fr 1fr}
.mx-tab{appearance:none;background:transparent;border:none;cursor:pointer;padding:14px 8px;font-weight:800;color:var(--muted);font-size:15px}
.mx-tab:hover{background:var(--hover)}
.mx-tab.is-active{color:var(--text);font-weight:900;position:relative}
.mx-tab.is-active:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:72px;height:4px;border-radius:999px;background:var(--accent)}

/* Panels */
.mx-panel{display:none}
.mx-panel.is-active{display:block}
.mx-subhead{padding:14px 16px;font-weight:900;border-bottom:1px solid var(--border)}

/* Composer */
.mx-compose{padding:12px 16px;border-bottom:1px solid var(--border)}
.mx-compose-inner{display:flex;gap:12px}
.mx-avatar{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--border);overflow:hidden;
  flex:0 0 auto
}
.mx-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mx-compose textarea{
  width:100%;min-height:84px;resize:vertical;
  background:transparent;border:none;
  padding:6px 0;color:var(--text);outline:none;
  font-size:20px;line-height:1.35
}
.mx-compose textarea::placeholder{color:var(--muted)}

/* Composer audience (X-style) */
.mx-compose-audience-row{margin-top:2px;margin-bottom:6px}
.mx-audience-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:4px 10px;color:var(--accent);font-weight:900;font-size:13px;cursor:pointer}
.mx-audience-btn:hover{background:rgba(29,155,240,.08)}
.mx-audience-btn .mx-icon{width:16px;height:16px}

.mx-audience-menu{position:fixed;min-width:340px;max-width:380px;background:var(--panel);border:1px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:10px;display:none;z-index:90}
.mx-audience-menu.is-open{display:block}
.mx-aud-title{font-weight:900;font-size:16px;padding:6px 8px 10px}
.mx-aud-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:14px;border:none;background:transparent;cursor:pointer;text-align:left}
.mx-aud-item:hover{background:var(--hover)}
.mx-aud-ico{width:40px;height:40px;border-radius:999px;background:rgba(29,155,240,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto}
.mx-aud-ico .mx-icon{width:20px;height:20px}
.mx-aud-txt{flex:1;min-width:0}
.mx-aud-txt strong{display:block;font-weight:900;font-size:15px;color:var(--text)}
.mx-aud-sub{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.mx-aud-check{width:22px;height:22px;color:var(--accent);display:none;flex:0 0 auto}
.mx-aud-item.is-selected .mx-aud-check{display:inline-flex}


.mx-compose-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.mx-compose-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.mx-tool{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:none;background:transparent;color:var(--accent);cursor:pointer}
.mx-tool:hover{background:rgba(29,155,240,.12)}
.mx-tool.is-on{background:rgba(29,155,240,.12)}
.mx-tool[disabled]{opacity:.45;cursor:not-allowed}
.mx-tool.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.mx-tool input{display:none}

.mx-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);cursor:pointer;color:var(--text);font-weight:800}
.mx-btn:hover{filter:brightness(0.98)}
.mx-btn-accent{background:var(--accent);border-color:transparent;color:#fff;font-weight:900}
.mx-btn-accent:hover{filter:brightness(1.04)}
.mx-btn-accent:disabled{background:rgba(29,155,240,.45);cursor:not-allowed;filter:none}

/* X-like follow buttons */
.mx-btn-follow{background:var(--text);border-color:transparent;color:#fff;font-weight:900}
.mx-btn-follow:hover{filter:brightness(1.05)}
.mx-btn-following{background:var(--panel);color:var(--text);border-color:var(--border)}


.mx-video-player{position:relative;margin-top:10px;width:min(100%,520px);border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#000;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
.mx-video-player.is-dm{margin-top:0;width:100%;border-radius:18px}
.mx-video-stage{position:relative;background:#000;isolation:isolate}
.mx-video-el{display:block;width:100%;max-width:100%;height:auto;max-height:min(72vh,640px);background:#000;border:0 !important;border-radius:0 !important;margin:0 !important;outline:none}
.mx-video-player.is-dm .mx-video-el{max-height:420px}
.mx-video-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;pointer-events:none;z-index:2}
.mx-video-top-actions{display:inline-flex;align-items:center;gap:8px;pointer-events:auto}
.mx-video-badge,.mx-video-btn{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(15,20,25,.72);border:1px solid rgba(255,255,255,.08);box-shadow:0 2px 8px rgba(0,0,0,.24)}
.mx-video-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:800;line-height:1;color:#fff}
.mx-video-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:999px;color:#fff;cursor:pointer;pointer-events:auto}
.mx-video-btn:hover{background:rgba(15,20,25,.86)}
.mx-video-btn svg{width:18px;height:18px;display:block}
.mx-video-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(15,20,25,.72);box-shadow:0 10px 24px rgba(0,0,0,.30);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;z-index:2;opacity:1;transition:opacity .2s ease,transform .2s ease}
.mx-video-center:hover{transform:translate(-50%,-50%) scale(1.03)}
.mx-video-center svg{width:28px;height:28px;display:block}
.mx-video-player.is-playing .mx-video-center{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.96)}
.mx-video-chrome{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.88) 100%);z-index:2;opacity:1;transition:opacity .18s ease}
.mx-video-progress{position:relative;height:14px;display:flex;align-items:center}
.mx-video-bar{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);border-radius:999px;background:rgba(255,255,255,.26);overflow:hidden}
.mx-video-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent)}
.mx-video-range{position:relative;z-index:1;width:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.mx-video-range::-webkit-slider-runnable-track{height:14px;background:transparent}
.mx-video-range::-moz-range-track{height:14px;background:transparent;border:0}
.mx-video-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:999px;background:#fff;border:0;box-shadow:0 0 0 2px rgba(0,0,0,.15);margin-top:0;opacity:0;transition:opacity .18s ease,transform .18s ease}
.mx-video-range::-moz-range-thumb{width:14px;height:14px;border-radius:999px;background:#fff;border:0;box-shadow:0 0 0 2px rgba(0,0,0,.15);opacity:0;transition:opacity .18s ease,transform .18s ease}
.mx-video-player:hover .mx-video-range::-webkit-slider-thumb,.mx-video-player:focus-within .mx-video-range::-webkit-slider-thumb,.mx-video-player.is-paused .mx-video-range::-webkit-slider-thumb{opacity:1}
.mx-video-player:hover .mx-video-range::-moz-range-thumb,.mx-video-player:focus-within .mx-video-range::-moz-range-thumb,.mx-video-player.is-paused .mx-video-range::-moz-range-thumb{opacity:1}
.mx-video-meta{margin-top:8px;display:flex;align-items:center;gap:10px;color:#fff}
.mx-video-time{font-size:12px;font-weight:800;letter-spacing:.01em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mx-msg-media .mx-video-player,.mx-msg-media .mx-video-stage{width:100%}
.mx-msg-media .mx-video-player .mx-video-chrome{padding-bottom:10px}
.mx-video-stage:fullscreen,.mx-video-stage:-webkit-full-screen{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#000}
.mx-video-stage:fullscreen .mx-video-el,.mx-video-stage:-webkit-full-screen .mx-video-el{width:auto;max-width:100vw;max-height:100vh;height:auto}
.mx-video-stage:fullscreen .mx-video-chrome,.mx-video-stage:-webkit-full-screen .mx-video-chrome{padding:18px 16px 14px}
.mx-video-stage:fullscreen .mx-video-top,.mx-video-stage:-webkit-full-screen .mx-video-top{padding:16px}
@media (hover:hover){.mx-video-player.is-playing:not(:hover):not(:focus-within) .mx-video-chrome{opacity:.14}}
@media (max-width:720px){.mx-video-player{border-radius:18px}.mx-video-center{width:64px;height:64px}.mx-video-center svg{width:24px;height:24px}}

.mx-media-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Feed */
.mx-feed-head{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:900}

/* Repost wrapper (X-style) */
.mx-repost-label{
  display:flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13px;
  margin-left:52px; /* align under text column (40 avatar + 12 gap) */
  margin-bottom:6px;
}
.mx-repost-item .mx-post-grid{margin-top:0}

.mx-post{padding:12px 16px;border-bottom:1px solid var(--border)}
.mx-post:hover{background:rgba(15,20,25,.03)}

.mx-post-grid{display:flex;gap:12px}
.mx-post-body{min-width:0;flex:1}
.mx-meta{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px}
.mx-name{font-weight:900;color:var(--text)}
.mx-handle{color:var(--muted)}
.mx-more{margin-left:auto;opacity:.7}
.mx-more:hover{opacity:1}

.mx-post-text{margin-top:4px;white-space:pre-wrap;word-wrap:break-word}

.mx-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:6px;color:var(--muted);font-size:13px}
.mx-action{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  cursor:pointer;user-select:none;
  border:none;background:transparent;color:inherit;font:inherit
}
.mx-action .mx-icon{width:18px;height:18px}
.mx-action:hover{background:rgba(15,20,25,.06)}

.mx-action.mx-reply:hover{color:var(--accent);background:rgba(29,155,240,.12)}
.mx-action.mx-repost:hover{color:var(--green);background:rgba(0,186,124,.12)}
.mx-action.mx-repost.is-reposted{color:var(--green)}
.mx-action.mx-like:hover{color:var(--danger);background:rgba(244,33,46,.12)}
.mx-action.mx-like.is-liked{color:var(--danger)}
.mx-action.mx-bookmark:hover,.mx-action.mx-share:hover{color:var(--accent);background:rgba(29,155,240,.12)}
.mx-action.mx-bookmark.is-liked{color:var(--accent)}

@media (max-width:720px){
  .mx-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mx-action{justify-content:center;gap:6px;padding:8px 8px}
  .mx-action-count{font-size:12px}
  /* .mx-action.mx-bookmark{display:none} */
}

.mx-action:disabled{opacity:.55;cursor:default}

/* Thread / replies (X-like) */
.mx-link{color:var(--accent);font-weight:800}

.mx-thread .mx-post{border-bottom:1px solid var(--border)}
.mx-reply-compose{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel)}
.mx-reply-text{width:100%;min-height:70px;resize:vertical;border:none;outline:none;font-size:16px;line-height:1.35;color:var(--text);padding:6px 0;background:transparent}
.mx-reply-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}

.mx-reply-item{padding:12px 16px;border-bottom:1px solid var(--border)}
.mx-reply-item:hover{background:rgba(15,20,25,.03)}

/* Right column */
.mx-right-inner{position:sticky;top:0;padding:12px 0 20px}
.mx-searchbox{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:var(--card);border:1px solid var(--border)}
.mx-searchbox:focus-within{border-color:rgba(29,155,240,.5);background:var(--search-focus-bg)}
.mx-search-input{border:none;background:transparent;outline:none;color:var(--text);width:100%;font-size:15px}
.mx-search-input::placeholder{color:var(--muted)}

.mx-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.mx-card-soft{background:var(--card)}
.mx-head{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:900;display:flex;align-items:center;justify-content:space-between}
.mx-body{padding:14px 16px}

/* Widgets (Right sidebar) */
.mx-widget{padding:0}
.mx-widget > :not(.mx-head){padding:14px 16px}
.mx-widget ul{list-style:none;margin:0;padding-left:0}
.mx-widget li{padding:8px 0;border-bottom:1px solid var(--border)}
.mx-widget li:last-child{border-bottom:0}
.mx-widget input[type="search"],
.mx-widget input[type="text"],
.mx-widget input[type="email"],
.mx-widget input[type="url"],
.mx-widget textarea{width:100%;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);outline:none}
.mx-widget textarea{border-radius:16px}
.mx-widget button,
.mx-widget input[type="submit"]{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-weight:800;cursor:pointer}
.mx-widget button:hover,
.mx-widget input[type="submit"]:hover{background:var(--card)}
.mx-widget .wp-block-search__inside-wrapper{display:flex;gap:10px;align-items:center}
.mx-widget .wp-block-search__button{white-space:nowrap}

/* Ensure follow buttons remain readable inside widgets (widget button styles would otherwise override them) */
.mx-widget .mx-btn-follow{background:var(--text);border-color:transparent;color:#fff;font-weight:900}
.mx-widget .mx-btn-follow:hover{filter:brightness(1.05)}
.mx-widget .mx-btn-following{background:var(--panel);color:var(--text);border-color:var(--border)}

.mx-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;
  background:rgba(0,186,124,.12);color:var(--green);
  font-weight:900;font-size:12px;border:1px solid rgba(0,186,124,.22)
}

.mx-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.mx-small{font-size:13px;color:var(--muted)}
.mx-status-error{color:var(--danger)!important}
.mx-input{flex:1;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);outline:none}
.mx-input::placeholder{color:var(--muted)}


/* MicroX: What's happening widget (X/Twitter-style) */
.widget_microx_whats_happening.mx-widget > :not(.mx-head){padding:0}
.widget_microx_whats_happening .mx-wh{display:block}
.widget_microx_whats_happening .mx-wh-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;text-decoration:none;color:inherit}
.widget_microx_whats_happening .mx-wh-item:hover{background:var(--card)}
.widget_microx_whats_happening .mx-wh-main{flex:1;min-width:0}
.widget_microx_whats_happening .mx-wh-meta{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.2;color:var(--muted)}
.widget_microx_whats_happening .mx-wh-title{margin-top:4px;font-size:15px;line-height:1.25;font-weight:900;word-break:break-word}
.widget_microx_whats_happening .mx-wh-moreicon{opacity:.75}
.widget_microx_whats_happening .mx-wh-showmore{display:block;padding:14px 16px;text-decoration:none;color:var(--brand);font-weight:800}
.widget_microx_whats_happening .mx-wh-showmore:hover{background:var(--card)}


/* MicroX: Who to follow widget (X/Twitter-style) */
.widget_microx_who_to_follow.mx-widget > :not(.mx-head){padding:0}
.widget_microx_who_to_follow .mx-user-row{padding:12px 16px;border-bottom:1px solid var(--border)}
.widget_microx_who_to_follow .mx-user-row:hover{background:var(--card)}
.widget_microx_who_to_follow .mx-user-row:last-of-type{border-bottom:none}
.widget_microx_who_to_follow .mx-wtf-showmore{display:block;padding:14px 16px;text-decoration:none;color:var(--brand);font-weight:800}
.widget_microx_who_to_follow .mx-wtf-showmore:hover{background:var(--card)}

/* DMs */
.mx-dm-grid{display:grid;grid-template-columns: 1fr 1.4fr; gap:12px;padding:14px 16px}
@media (max-width:720px){.mx-dm-grid{grid-template-columns:1fr}}

.mx-chat{height:460px; overflow:auto; border:1px solid var(--border); border-radius:16px; padding:12px;background:var(--card)}
.mx-msg{margin:8px 0;max-width:80%}
.mx-msg.me{margin-left:auto;text-align:right}
.mx-bubble{display:inline-block;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}
.mx-msg.me .mx-bubble{background:rgba(29,155,240,.12);border-color:rgba(29,155,240,.25)}

/* Floating buttons (like screenshot bottom-right) */
.mx-fabs{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:50}
.mx-fab-btn{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--border);background:#fff;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer
}
.mx-fab-btn:hover{background:var(--card)}
.mx-theme-dim .mx-fab-btn,
.mx-theme-dark .mx-fab-btn{background:var(--card)}
@media (max-width:720px){.mx-fabs{right:12px;bottom:12px}}

/* Quote embed (X-like) */
.mx-quote-embed{border:1px solid var(--border);border-radius:16px;padding:12px;background:var(--panel)}
.mx-quote-item .mx-quote-embed{margin-left:52px;margin-top:10px}
.mx-quote-embed .mx-post-grid{gap:10px}
.mx-quote-embed .mx-meta{font-size:12px}
.mx-quote-embed .mx-post-text{font-size:15px}

/* Modals */
.mx-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:9999;padding:20px;display:flex;align-items:flex-start;justify-content:center}
.mx-modal-card{width:min(760px, 100%);max-height:90vh;overflow:auto}

/* Compose modal (X-like) */
.mx-compose-modal-card{width:min(600px, 100%);border-radius:18px;overflow:hidden}
.mx-compose-modal-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:2}
.mx-compose-modal-drafts{color:var(--accent);font-weight:900;padding-right:6px}
.mx-compose-modal-body{padding:0;background:var(--panel)}
.mx-compose.is-modal{border-bottom:0}
.mx-compose.is-modal textarea{min-height:120px}
.mx-compose-placeholder{height:0}

/* When a modal is open, prevent the page (document) from scrolling */
html.mx-modal-open, body.mx-modal-open{overflow:hidden}

/* GIF picker (X-like) */
.mx-gif-card{width:min(640px, 100%)}
.mx-gif-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.mx-gif-title{font-weight:900}
.mx-gif-searchwrap{padding:12px 16px;border-bottom:1px solid var(--border)}
.mx-gif-search{width:100%;border:1px solid var(--border);border-radius:999px;padding:12px 14px;background:var(--card);outline:none;font-size:15px}
.mx-gif-search:focus{background:var(--search-focus-bg);border-color:rgba(29,155,240,.6);box-shadow:0 0 0 3px rgba(29,155,240,.14)}
.mx-gif-body{padding:12px 0 14px}
.mx-gif-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 16px}
@media (max-width:520px){.mx-gif-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mx-gif-item{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--panel);cursor:pointer}
.mx-gif-item:hover{border-color:rgba(29,155,240,.6);box-shadow:0 0 0 3px rgba(29,155,240,.12)}
.mx-gif-item img{width:100%;height:120px;object-fit:cover;display:block}
.mx-gif-item .mx-gif-badge{position:absolute;left:10px;bottom:10px;padding:2px 6px;border-radius:6px;background:rgba(15,20,25,.65);color:#fff;font-size:11px;font-weight:900}

/* Selected GIF chip in composer */
.mx-gif-chip{position:relative;display:inline-flex;align-items:center}
.mx-gif-chip img{max-width:160px;border-radius:14px;border:1px solid var(--border)}
.mx-gif-remove{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:999px;border:1px solid var(--border);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow)}
.mx-gif-remove:hover{background:var(--card)}

/* Auth modal (X-like, no Google/Apple buttons) */
.mx-auth-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10001;display:flex;align-items:center;justify-content:center;padding:22px}
.mx-auth-card{position:relative;width:min(600px,100%);background:var(--panel);border-radius:20px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 80px rgba(0,0,0,.28);padding:26px 24px 20px}
.mx-auth-close{position:absolute;left:12px;top:12px;width:38px;height:38px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mx-auth-close:hover{background:rgba(15,20,25,.06)}
.mx-auth-logo{display:flex;justify-content:center;align-items:center;margin-bottom:10px;min-height:34px}
.mx-brand-img-auth{max-width:220px;max-height:42px;width:auto;height:auto}
.mx-brand-text-auth{font-size:28px;font-weight:900;line-height:1.1;color:#0f1419;text-align:center}
.mx-brand-text-auth .mx-brand-text-short{display:none}
.mx-auth-title{margin:8px 0 14px;text-align:center;font-size:32px;line-height:1.1;font-weight:900;color:#0f1419}
.mx-auth-sub{font-weight:800;margin:2px 0 10px;color:#0f1419}
.mx-auth-input{width:100%;border:1px solid rgba(0,0,0,.18);border-radius:12px;padding:14px 12px;font-size:16px;outline:none}
.mx-auth-input:focus{border-color:rgba(29,155,240,.8);box-shadow:0 0 0 3px rgba(29,155,240,.18)}
.mx-auth-btn{width:100%;border:none;border-radius:999px;padding:12px 14px;font-weight:900;font-size:15px;cursor:pointer;margin-top:12px}
.mx-auth-primary{background:#0f1419;color:#fff}
.mx-auth-primary:disabled{opacity:.45;cursor:not-allowed}
.mx-auth-ghost{background:transparent;color:#0f1419;border:1px solid rgba(0,0,0,.18)}
.mx-auth-link{display:block;text-align:center;margin-top:12px;color:#0f1419;font-weight:700}
.mx-auth-link:hover{text-decoration:underline}
.mx-auth-status{min-height:20px;margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}
.mx-auth-status.is-error{color:var(--danger);font-weight:700}

/* Analytics modal (X-like) */
.mx-analytics-card{width:min(640px,100%);max-height:calc(100vh - 40px);border-radius:24px;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.28)}
.mx-analytics-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:900;font-size:20px;position:sticky;top:0;background:var(--panel);z-index:3}
.mx-analytics-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:none;background:transparent;cursor:pointer;flex:0 0 auto}
.mx-analytics-close:hover{background:var(--hover)}

.mx-analytics-postwrap{padding:16px 16px 10px}
.mx-analytics-postwrap .mx-post{padding:0;border-bottom:0}
.mx-ana-preview{border:1px solid var(--border);border-radius:22px;background:var(--panel);padding:14px 14px 16px;overflow:hidden}
.mx-ana-preview-head{display:flex;align-items:center;gap:8px}
.mx-ana-preview-avatar{width:24px;height:24px;border-radius:999px;border:1px solid var(--border);display:block;flex:0 0 auto}
.mx-ana-preview-body{margin-top:12px}
.mx-ana-preview-body.has-thumb{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:start}
.mx-ana-preview-thumb{width:140px}
.mx-ana-preview-thumbimg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid var(--border);background:#f5f5f5}
.mx-ana-preview-main{min-width:0}
.mx-ana-preview-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.2;min-width:0}
.mx-ana-preview-name{font-weight:900;color:var(--text)}
.mx-ana-preview-handle,.mx-ana-preview-date,.mx-ana-preview-sep{color:var(--muted)}
.mx-ana-preview-text{font-size:15px;line-height:1.45;word-break:break-word;white-space:normal}
.mx-ana-preview-loc{margin-top:10px;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:700}
.mx-ana-preview-media{margin-top:12px}
.mx-ana-preview-media img,
.mx-ana-preview-media video,
.mx-ana-preview-media .mx-video-player{margin-top:0 !important;max-height:240px}
.mx-ana-preview-media img,
.mx-ana-preview-media video{width:100%;object-fit:cover}

.mx-analytics-icons{margin:4px 16px 0;border:1px solid var(--border);border-radius:18px;background:var(--panel);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.mx-analytics-icons .mx-ana-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 10px;color:var(--muted);font-weight:800;min-height:78px}
.mx-analytics-icons .mx-ana-item + .mx-ana-item{border-left:1px solid var(--border)}
.mx-analytics-icons .mx-ana-item .mx-icon{width:20px;height:20px}
.mx-ana-iconwrap{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.mx-analytics-icons .mx-ana-count{color:var(--text);font-weight:900;font-size:16px;line-height:1}

.mx-analytics-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px;padding:22px 16px 8px}
.mx-ana-metric{padding:0;grid-column:span 2}
.mx-ana-metric-wide{grid-column:span 3}
.mx-ana-label{display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:700}
.mx-ana-info{display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.mx-ana-num{font-size:38px;line-height:1.02;font-weight:900;color:var(--text);margin-top:8px;letter-spacing:-.02em}

.mx-analytics-footer{padding:2px 16px 20px;color:var(--muted)}

.mx-post-edited{font-weight:700;color:var(--muted)}

/* Edit post modal (X-like) */
.mx-edit-card{width:min(640px,100%);max-height:calc(100vh - 40px);border-radius:24px;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.28)}
.mx-edit-head{justify-content:space-between;gap:12px}
.mx-edit-head > span{flex:1;min-width:0}
.mx-edit-save{min-width:88px;padding-inline:16px}
.mx-edit-save:disabled{opacity:.5;cursor:not-allowed}
.mx-edit-body{padding:16px 16px 18px}
.mx-edit-grid{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.mx-edit-main{min-width:0}
.mx-edit-text{width:100%;min-height:148px;resize:vertical;border:none;outline:none;background:transparent;color:var(--text);font-size:24px;line-height:1.35;padding:2px 0 0;font-family:inherit}
.mx-edit-text::placeholder{color:var(--muted)}
.mx-edit-preview{margin-top:14px}
.mx-edit-note{margin-top:12px;color:var(--muted);font-weight:700}
.mx-edit-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--muted)}
.mx-edit-preview .mx-edit-static-wrap{display:flex;flex-direction:column;gap:12px}
.mx-edit-preview .mx-edit-media-grid img,
.mx-edit-preview .mx-edit-media-grid video,
.mx-edit-preview .mx-edit-media-grid .mx-video-player{margin-top:0 !important}
.mx-edit-preview .mx-edit-media-grid img,
.mx-edit-preview .mx-edit-media-grid video{width:100%;max-height:320px;object-fit:cover;border-radius:18px}
.mx-edit-lock-row{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-weight:800;color:var(--text)}
.mx-edit-quote-box{border:1px solid var(--border);border-radius:18px;padding:10px 12px;background:var(--panel)}
.mx-edit-quote-box .mx-post{padding:0;border-bottom:0}
.mx-edit-quote-box .mx-post-text{font-size:15px}

/* Schedule modal (X-like) */
.mx-schedule-card{width:min(560px,100%)}
.mx-schedule-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:900}
.mx-schedule-title{font-weight:900}
.mx-schedule-body{padding:16px}
.mx-schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.mx-schedule-grid{grid-template-columns:1fr}}
.mx-schedule-actions{display:flex;align-items:center;gap:10px;margin-top:14px}
.mx-schedule-actions .mx-small{color:var(--muted)}

/* Schedule chip (shown under composer tools) */
.mx-schedule-chip{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mx-schedule-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-weight:800;color:var(--text)}
.mx-schedule-pill .mx-small{color:var(--muted);font-weight:800}
.mx-schedule-x{width:28px;height:28px;border-radius:999px;border:1px solid var(--border);background:var(--panel);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mx-schedule-x:hover{background:var(--hover)}

@media (max-width:720px){
  .mx-analytics-card{width:min(640px,100%);max-height:calc(100vh - 16px);border-radius:20px}
  .mx-analytics-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .mx-ana-metric,.mx-ana-metric-wide{grid-column:span 1}
  .mx-ana-num{font-size:30px}
}
@media (max-width:520px){
  .mx-analytics-head{padding:12px 14px;font-size:18px}
  .mx-edit-card{width:min(640px,100%);max-height:calc(100vh - 16px);border-radius:20px}
  .mx-edit-body{padding:14px 14px 16px}
  .mx-edit-text{font-size:22px;min-height:128px}
  .mx-analytics-postwrap{padding:14px 14px 10px}
  .mx-ana-preview-body.has-thumb{grid-template-columns:110px minmax(0,1fr);gap:12px}
  .mx-ana-preview-thumb{width:110px}
  .mx-analytics-icons{margin:2px 14px 0}
  .mx-analytics-metrics{padding:18px 14px 8px;grid-template-columns:1fr}
  .mx-ana-preview{padding:14px}
  .mx-ana-preview-grid{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .mx-ana-preview-avatar{width:36px;height:36px}
  .mx-ana-num{font-size:28px}
}

/* Repost / Quote menu */
.mx-menu{position:fixed;z-index:10000;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:180px}
.mx-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;border:none;background:transparent;cursor:pointer;font-weight:800;color:var(--text)}
.mx-menu-item:hover{background:var(--hover)}
.mx-menu-item span{font-size:14px}
.mx-menu-sep{height:1px;background:var(--border);margin:6px 4px}
.mx-menu-item-danger{color:var(--danger)}
.mx-menu-item-danger:hover{background:color-mix(in srgb, var(--danger) 10%, transparent)}
.mx-pinned-block{display:block}
.mx-pinned-label{display:flex;align-items:center;gap:8px;padding:10px 16px 0;color:var(--muted);font-size:13px;font-weight:800}
.mx-pinned-label .mx-icon{width:15px;height:15px}

/* Emoji picker (X-like) */
.mx-emoji-pop{position:fixed;z-index:10050;width:340px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.mx-emoji-arrow{position:absolute;width:12px;height:12px;background:var(--panel);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg);left:24px;top:-7px;}
.mx-emoji-pop[data-place="top"] .mx-emoji-arrow{top:auto;bottom:-7px;transform:rotate(225deg);}
.mx-emoji-head{display:flex;align-items:center;gap:8px;padding:10px 10px;border-bottom:1px solid var(--border);}
.mx-emoji-search{flex:1;border:1px solid var(--border);border-radius:999px;padding:9px 12px;font-size:14px;background:var(--bg);outline:none;}
.mx-emoji-search:focus{border-color:rgba(29,155,240,.55);box-shadow:0 0 0 3px rgba(29,155,240,.18);}
.mx-emoji-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:none;background:transparent;color:var(--muted);cursor:pointer;}
.mx-emoji-close:hover{background:var(--hover);color:var(--text);}
.mx-emoji-cats{display:flex;align-items:center;gap:4px;padding:8px 8px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.mx-emoji-cats::-webkit-scrollbar{height:0;width:0;}
.mx-emoji-cat{flex:0 0 auto;border:none;background:transparent;width:34px;height:34px;border-radius:999px;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;}
.mx-emoji-cat:hover{background:var(--hover);}
.mx-emoji-cat.is-active{background:rgba(29,155,240,.12);}
.mx-emoji-grid{padding:10px;display:grid;grid-template-columns:repeat(8, 1fr);gap:6px;max-height:300px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.mx-emoji-grid::-webkit-scrollbar{height:0;width:0;}
.mx-emoji-btn{width:36px;height:36px;border:none;background:transparent;border-radius:10px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;}
.mx-emoji-btn:hover{background:var(--hover);}
.mx-twemoji{width:1em;height:1em;vertical-align:-0.15em;}
.mx-emoji-btn .mx-twemoji{width:20px;height:20px;}
.mx-emoji-cat .mx-twemoji{width:16px;height:16px;}
.mx-emoji-empty{padding:14px 16px;color:var(--muted);font-size:13px;}

.mx-reply-tools{display:flex;align-items:center;gap:8px;min-width:0;}

/* Thread page top bar */
.mx-thread-top{display:flex;align-items:center;gap:10px;padding:10px 12px}
.mx-back{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px}
.mx-back:hover{background:var(--hover)}
.mx-thread-title{font-weight:900}

/* Infinite scroll */
.mx-load-sentinel{height:1px}
.mx-load-status{padding:12px 16px;text-align:center}

/* Like animation */
.mx-like-pop{animation:mxLikePop .18s ease-out}
@keyframes mxLikePop{0%{transform:scale(1)}60%{transform:scale(1.15)}100%{transform:scale(1)}}


/* Follow / user list (X-like) */
.mx-user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.mx-user-left{display:flex;align-items:center;gap:12px;min-width:0}
.mx-user-ava{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);object-fit:cover;flex:0 0 auto}
.mx-user-meta{min-width:0}
.mx-user-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-user-handle{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Notifications (X-like) */
.mx-notif{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.mx-notif:hover{background:rgba(15,20,25,.03)}
.mx-notif-ico{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);flex:0 0 auto;color:var(--muted)}
.mx-notif-body{min-width:0}
.mx-notif-text{font-size:14px;color:var(--text)}
.mx-notif-text strong{font-weight:900}


/* Direct Messages (X-like) */
.mx-dm-grid{display:grid;grid-template-columns:320px 1fr;gap:12px;padding:12px 16px}
@media (max-width:900px){.mx-dm-grid{grid-template-columns:1fr}}

#mx-chats{max-height:calc(100vh - 300px);overflow:auto}
.mx-chat-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;cursor:pointer}
.mx-chat-item:hover{background:var(--hover)}
.mx-chat-item.is-active{background:rgba(29,155,240,.10)}
.mx-chat-ava{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);object-fit:cover;flex:0 0 auto}
.mx-chat-meta{min-width:0;flex:1}
.mx-chat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mx-chat-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-chat-time{font-size:12px;color:var(--muted);flex:0 0 auto}
.mx-chat-snippet{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

.mx-chat{border:1px solid var(--border);border-radius:16px;background:var(--card);min-height:420px;height:calc(100vh - 340px);overflow:auto;padding:12px}
@media (max-width:900px){.mx-chat{height:420px}}

.mx-msg{display:flex;margin:8px 0}
.mx-msg.is-me{justify-content:flex-end}
.mx-msg-bubble{max-width:min(460px,86%);border:1px solid var(--border);border-radius:18px;padding:10px 12px;background:var(--panel)}
.mx-msg.is-me .mx-msg-bubble{background:rgba(29,155,240,.10);border-color:rgba(29,155,240,.20)}
.mx-msg-text{font-size:14px;line-height:1.35;color:var(--text);white-space:pre-wrap;word-break:break-word}
.mx-msg-media{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mx-msg-media img,.mx-msg-media video{width:100%;border-radius:14px;border:1px solid var(--border);object-fit:cover;background:#000;display:block}
.mx-msg-time{margin-top:6px;font-size:12px;color:var(--muted)}

.mx-dm-compose{margin-top:10px}
.mx-dm-inputrow{display:flex;align-items:center;gap:10px}
.mx-dm-tools{display:flex;align-items:center;gap:6px}
.mx-dm-input{flex:1;min-width:0;border-radius:999px}
.mx-dm-meta{margin-top:6px;min-height:18px}


/* Polls (X-like) */
.mx-btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:999px;font-weight:700;cursor:pointer}
.mx-btn-ghost:hover{background:var(--hover)}
.mx-btn-ghost:disabled{opacity:.6;cursor:not-allowed}
.mx-danger{color:var(--danger)}
.mx-select{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:var(--panel);color:var(--text);font-weight:700}

.mx-poll-editor{margin-top:10px;border:1px solid var(--border);border-radius:16px;padding:12px;background:var(--panel)}
.mx-poll-title{font-weight:800;margin-bottom:10px}
.mx-poll-choice-row{margin-bottom:8px}
.mx-poll-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
.mx-poll-duration{display:flex;flex-direction:column;gap:4px;margin-left:auto}
@media(max-width:520px){.mx-poll-duration{margin-left:0}}

.mx-poll{margin-top:10px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--panel)}
.mx-poll-choicebtn{width:100%;text-align:left;background:var(--panel);border:0;border-top:1px solid var(--border);padding:12px 14px;font-weight:700;cursor:pointer}
.mx-poll-choicebtn:first-child{border-top:0}
.mx-poll-choicebtn:hover{background:var(--hover)}
.mx-poll-choicebtn:disabled{cursor:not-allowed;color:var(--muted)}
.mx-poll-result{position:relative;padding:12px 14px;border-top:1px solid var(--border);background:var(--panel)}
.mx-poll-result:first-child{border-top:0}
.mx-poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(29,155,240,.16);width:0}
.mx-poll-result.is-voted .mx-poll-bar{background:rgba(29,155,240,.26)}
.mx-poll-row{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:center}
.mx-poll-text{font-weight:700}
.mx-poll-pct{font-weight:800}
.mx-poll-footer{padding:10px 14px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:13px}

.mx-poll-choice-row{position:relative}
.mx-poll-choice-remove{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.mx-poll-choice-remove:hover{color:var(--text);background:var(--hover);border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}


/* Location (X-like) */
.mx-location-chip{margin-top:10px;display:flex;gap:8px;align-items:center;}
.mx-location-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  background:var(--card);
  padding:8px 10px;border-radius:999px;
  font-weight:600;color:var(--text);
  cursor:pointer;
}
.mx-location-pill .mx-small{color:var(--muted);font-weight:600;}
.mx-location-x{
  border:0;background:transparent;
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;
  color:var(--muted);
}
.mx-location-x:hover{background:var(--hover);color:var(--text);}
.mx-loc{display:inline-flex;align-items:center;gap:6px;}
.mx-icon.xs{width:14px;height:14px;}

.mx-location-card{width:min(600px,96vw);max-height:min(82vh,720px);overflow:hidden;}
.mx-location-head{display:flex;align-items:center;gap:10px;padding:12px 12px;border-bottom:1px solid var(--border);}
.mx-location-title{font-weight:800;}
.mx-location-body{padding:0 0 14px;}
.mx-location-searchwrap{padding:12px 16px;}
.mx-location-search{
  width:100%;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:999px;
  padding:10px 14px;
  outline:none;
}
.mx-location-actions{padding:0 16px 12px;display:flex;flex-direction:column;gap:8px;}
.mx-location-row{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
  padding:10px 12px;
  display:flex;align-items:center;gap:10px;
  cursor:pointer;
  text-align:left;
}
.mx-location-row:hover{background:var(--hover);}
.mx-location-row.mx-danger{color:var(--danger);border-color:rgba(244,33,46,.25);}
.mx-loc-ico{display:flex;}
.mx-location-results{padding:0 16px;display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;}
.mx-location-item{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  text-align:left;
}
.mx-location-item:hover{background:var(--hover);}
.mx-location-item-title{font-weight:700;}
.mx-location-item-sub{margin-top:2px;color:var(--muted);}

/* Profile page (X-like) */
.mx-ava-link{display:inline-block;border-radius:999px;}
.mx-ava-link:hover{opacity:.95}

.mx-user-link{color:inherit;text-decoration:none;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mx-user-link:hover{text-decoration:underline;}

.mx-prof-top{display:flex;align-items:center;gap:12px;padding:12px 16px;}
.mx-prof-topmeta{min-width:0;}
.mx-prof-topname{font-weight:900;font-size:18px;line-height:1.1;}

.mx-prof{border-bottom:1px solid var(--border);}
.mx-prof-cover{height:200px;background:#cfd9de;background-size:cover;background-position:center;}

.mx-prof-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 16px;margin-top:-56px;}
.mx-prof-avawrap{width:140px;height:140px;}
.mx-prof-ava{width:134px;height:134px;border-radius:999px;border:4px solid var(--bg);background:var(--bg);display:block;object-fit:cover;}
.mx-prof-actions{display:flex;gap:10px;align-items:center;padding-bottom:8px;}
.mx-prof-btn{border-radius:999px;font-weight:800;background:transparent;border:1px solid var(--border);} 
.mx-prof-iconbtn{border:1px solid var(--border);background:transparent;}

.mx-prof-meta{padding:10px 16px 12px;}
.mx-prof-name{font-size:22px;font-weight:900;}
.mx-prof-handle{color:var(--muted);margin-top:2px;}
.mx-prof-row{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--muted);}
.mx-prof-join{display:inline-flex;gap:8px;align-items:center;}
.mx-prof-stats{display:flex;gap:18px;margin-top:10px;color:var(--muted);}
.mx-prof-stats strong{color:var(--text);}

.mx-prof-tabs{
  display:flex;
  gap:0;
  /* Match X/Twitter: tabs should not show a scrollbar */
  overflow-x:auto;
  overflow-y:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg);
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* IE/Edge */
}
.mx-prof-tabs::-webkit-scrollbar{height:0;width:0} /* Chrome/Safari */

.mx-prof-tab{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  padding:14px 12px;
  font-weight:800;
  color:var(--muted);
  text-decoration:none;
  position:relative;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mx-prof-tab:hover{background:var(--hover);}
.mx-prof-tab.is-active{color:var(--text);}
.mx-prof-tab.is-active::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:4px;background:var(--accent);border-radius:999px;transform:translateX(-50%);} 

.mx-prof-feed{padding-top:0;}

.mx-info{padding:12px 16px;}
.mx-info-inner{border:1px solid var(--border);background:rgba(29,155,240,.08);border-radius:12px;padding:12px 14px;font-weight:700;}

.mx-replywrap{border-bottom:1px solid var(--border);}


/* Profile edit modal (X-like) */
/* Allow the Edit Profile modal to scroll so all fields (incl. Bio) remain visible on smaller viewports */
.mx-profedit-card{width:min(640px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:var(--panel)}
.mx-profedit-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);flex:0 0 auto;background:var(--panel);z-index:2}
.mx-profedit-title{font-weight:900;font-size:20px;flex:1;line-height:1.1}
.mx-profedit-save{margin-left:auto;padding:8px 14px}
.mx-profedit-body{position:relative;background:var(--panel);flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-width:0;
  /* Match X/Twitter-style modal: allow scroll but don't show a scrollbar gutter */
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* IE/Edge legacy */
}
.mx-profedit-body::-webkit-scrollbar{width:0;height:0} /* Chrome/Safari */
.mx-profedit-cover{height:200px;background:#cfd9de;background-size:cover;background-position:center;position:relative;min-width:0}
.mx-profedit-coverveil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;background:rgba(15,20,25,.25)}
.mx-profedit-coverbtn{width:44px;height:44px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.mx-profedit-coverbtn:hover{background:rgba(0,0,0,.7)}
.mx-profedit-coverbtn:disabled{opacity:.35;cursor:not-allowed}

.mx-profedit-avawrap{position:absolute;left:16px;top:140px}
.mx-profedit-ava{width:112px;height:112px;border-radius:999px;border:4px solid var(--panel);overflow:hidden;position:relative;background:#fff}
.mx-profedit-ava img{width:100%;height:100%;object-fit:cover;display:block}
.mx-profedit-avabtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.mx-profedit-avabtn:hover{background:rgba(0,0,0,.7)}

.mx-profedit-fields{padding:76px 16px 18px;background:var(--panel);min-width:0}
#mx-profedit-modal .mx-profedit-body *{box-sizing:border-box;}
#mx-profedit-modal label.mx-xfield{display:block;width:100%;}

/* X-like floating label fields */
.mx-xfield{position:relative;border:1px solid var(--border);border-radius:14px;padding:20px 12px 10px;margin:12px 0;background:var(--panel)}
.mx-xfield:focus-within{border-color:rgba(29,155,240,.65);box-shadow:0 0 0 1px rgba(29,155,240,.35) inset}
.mx-xlabel{position:absolute;top:6px;left:12px;font-size:12px;color:var(--muted);pointer-events:none}
.mx-xinput,.mx-xtextarea{width:100%;max-width:100%;border:0;outline:none;background:transparent;font-size:15px;color:var(--text);padding:0;margin:0;min-width:0}
.mx-xtextarea{resize:none;min-height:110px;line-height:1.35;display:block;overflow:auto}
.mx-mini{font-size:12px;color:var(--muted);margin-top:8px}
.mx-prof-row2{gap:12px;flex-wrap:wrap}
.mx-prof-metaitem{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.mx-prof-link{color:var(--blue);text-decoration:none}
.mx-prof-bio{margin-top:10px;font-size:15px;line-height:1.3}

/* Settings (X-like) */
.mx-grid-settings{grid-template-columns:275px minmax(0, 920px);gap:28px}
.mx-settings-page{border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--panel);min-height:100vh}
.mx-settings-cols{display:grid;grid-template-columns: 1fr 1.45fr;min-height:100%}
.mx-settings-left{border-right:1px solid var(--border);padding:10px 0}
.mx-settings-title{font-size:20px;font-weight:800;padding:10px 16px}
.mx-settings-search{padding:0 16px 12px}
.mx-settings-search .mx-searchbox{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:999px;padding:10px 12px}
.mx-settings-search input{border:0;background:transparent;outline:none;width:100%;font-size:14px;color:var(--text)}
.mx-settings-nav{padding:6px 0}
.mx-settings-navitem{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:999px;margin:2px 10px;color:var(--text)}
.mx-settings-navitem:hover{background:var(--hover)}
.mx-settings-navitem.is-active{background:rgba(29,155,240,.12);font-weight:600}
.mx-settings-navchev{color:var(--muted);font-size:18px;line-height:1}

.mx-settings-right{min-width:0}
.mx-settings-rhead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2}
.mx-settings-rtitle{font-size:20px;font-weight:800}
.mx-settings-back{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.mx-settings-back:hover{background:var(--hover)}

.mx-settings-cardlist{padding:4px 0}
.mx-settings-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.mx-settings-row:hover{background:rgba(15,20,25,.03)}
.mx-settings-row-ico{width:34px;height:34px;border-radius:999px;background:var(--card);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mx-settings-row-title{font-weight:600}
.mx-settings-row-sub{color:var(--muted);font-size:13px;margin-top:2px}
.mx-settings-row-main{flex:1;min-width:0}
.mx-settings-row-chev{color:var(--muted);font-size:18px;line-height:1;flex:0 0 auto}

.mx-settings-pad{padding:16px}
.mx-settings-form .mx-form-row{margin-top:12px}
.mx-settings-form label{display:block;margin-bottom:6px}

.mx-settings-banner{margin:12px 16px 0;border-radius:12px;padding:10px 12px;font-size:13px}
.mx-settings-banner-ok{background:rgba(0,186,124,.12);color:var(--text)}
.mx-settings-banner-err{background:rgba(244,33,46,.10);color:var(--text)}


/* Settings: sessions + empty states */
.mx-settings-empty{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:16px;
  padding:14px 12px;
  color:var(--muted);
  font-size:14px;
}
.mx-settings-sessionlist{
  padding:0 16px 16px;
}
.mx-settings-session{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.mx-settings-session:last-child{border-bottom:0}
.mx-settings-session-ico{margin-top:2px;color:var(--muted)}
.mx-settings-session-main{flex:1;min-width:0}
.mx-settings-session-title{font-weight:800;font-size:15px;color:var(--text)}
.mx-settings-session-sub{margin-top:3px;color:var(--muted);font-size:13px;line-height:1.3}
.mx-settings-session-act{margin-left:10px;display:flex;align-items:center}
.mx-linkbtn{
  background:transparent;
  border:0;
  color:var(--accent);
  font-weight:800;
  cursor:pointer;
  padding:6px 10px;
  border-radius:999px;
}
.mx-linkbtn:hover{background:rgba(29,155,240,.10)}

/* Settings: toggle switches (X-like) */
.mx-settings-toggleform{display:block}
.mx-settings-row-toggle{align-items:center}
.mx-switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.mx-switch input{opacity:0;width:0;height:0}
.mx-slider{position:absolute;inset:0;border-radius:999px;background:rgba(15,20,25,.18);transition:.15s ease}
.mx-slider:before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:.15s ease}
.mx-switch input:checked + .mx-slider{background:var(--accent)}
.mx-switch input:checked + .mx-slider:before{transform:translateX(20px)}


/* Explore (X-like) */
.mx-explore-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px 6px;
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:5;
}
.mx-explore-searchbox{
  flex:1;
  margin:0;
}
.mx-explore-tabs{
  display:flex;
  gap:6px;
  padding:0 10px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:56px;
  background:var(--bg);
  z-index:4;
}
.mx-explore-tab{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:14px 10px;
  flex:1;
  min-width:0;
  font-weight:600;
  color:var(--muted);
  position:relative;
  border-radius:999px;
}
.mx-explore-tab:hover{background:var(--hover)}
.mx-explore-tab.is-active{color:var(--text);font-weight:800}
.mx-explore-tab.is-active:after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1px;
  height:4px;
  width:54px;
  border-radius:999px;
  background:var(--accent);
}

.mx-explore-main{padding:0}
.mx-explore-section{padding:14px 0;border-bottom:1px solid var(--border)}
.mx-explore-h{
  font-size:20px;
  font-weight:900;
  padding:0 16px 8px;
}
.mx-explore-list{padding:0}
.mx-explore-item{
  padding:12px 16px;
  cursor:pointer;
}
.mx-explore-item:hover{background:var(--hover)}
.mx-explore-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mx-explore-item-title{font-weight:800;margin-top:6px;line-height:1.25}
.mx-explore-more{opacity:.8}

/* Trends list (sidebar + explore) */
.mx-trend{
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.mx-trend:last-child{border-bottom:0}
.mx-trend-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mx-trend-title{font-weight:900;margin-top:4px;line-height:1.15}
.mx-trend-more{opacity:.75}


/* Settings: small section headers */
.mx-subhead-sm{font-size:15px;font-weight:800;color:var(--text)}

/* Settings: choice rows (radio-like) */
.mx-settings-choiceform{margin:0}
button.mx-settings-row.mx-settings-row-choice{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  cursor:pointer;
}
button.mx-settings-row.mx-settings-row-choice:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:12px;
}
.mx-settings-choice-check{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto}

/* Accessibility: reduce motion */
.mx-reduce-motion *, .mx-reduce-motion *::before, .mx-reduce-motion *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

/* Accessibility: high contrast */
.mx-high-contrast{
  --border: rgba(15,20,25,.25);
  --hover: rgba(15,20,25,.12);
}

/* Display themes */
.mx-theme-dim{
  --bg:#15202b;
  --panel:#15202b;
  --topbar-bg:rgba(21,32,43,.88);
  --search-focus-bg:var(--card);
  --card:#1e2732;
  --border:#2f3b48;
  --text:#e7e9ea;
  --muted:#8b98a5;
  --hover:rgba(231,233,234,.10);
  --shadow:0 1px 2px rgba(0,0,0,.25);
  /* Keep the primary "Post" button readable in dark modes (X-like). */
  --primary-btn:var(--accent);
}
.mx-theme-dark{
  --bg:#000000;
  --panel:#000000;
  --topbar-bg:rgba(0,0,0,.88);
  --search-focus-bg:var(--card);
  --card:#16181c;
  --border:#2f3336;
  --text:#e7e9ea;
  --muted:#71767b;
  --hover:rgba(231,233,234,.10);
  --shadow:0 1px 2px rgba(0,0,0,.35);
  /* Keep the primary "Post" button readable in dark modes (X-like). */
  --primary-btn:var(--accent);
}
.mx-theme-dim .mx-badge,
.mx-theme-dark .mx-badge{border-color:var(--panel)}

/* Display font size */
.mx-font-xs{font-size:13px}
.mx-font-sm{font-size:14px}
.mx-font-lg{font-size:18px}
.mx-font-xl{font-size:20px}

/* Display page (X-style controls) */
.mx-display-wrap{padding:16px 16px 22px}
.mx-display-help{color:var(--muted);font-size:14px;line-height:1.35;margin:0 0 14px}
.mx-display-preview{border:1px solid var(--border);border-radius:18px;padding:14px;background:var(--panel);box-shadow:var(--shadow);margin-bottom:16px}
.mx-display-preview .mx-prev-top{display:flex;gap:10px;align-items:flex-start}
.mx-display-preview .mx-prev-ava{width:40px;height:40px;border-radius:12px;background:#000;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;overflow:hidden;padding:4px}
.mx-display-preview .mx-prev-ava svg{width:22px;height:22px}
.mx-brand-img-preview{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#fff}
.mx-brand-text-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:15px;font-weight:900;color:#fff;text-align:center}
.mx-brand-text-preview .mx-brand-text-short{display:none}
.mx-brand-text-preview .mx-brand-text-full{max-width:100%;white-space:normal;line-height:1.05}
.mx-display-preview .mx-prev-meta{flex:1 1 auto;min-width:0}
.mx-display-preview .mx-prev-name{font-weight:900}
.mx-display-preview .mx-prev-handle{color:var(--muted);font-weight:700;margin-left:6px}
.mx-display-preview .mx-prev-text{margin-top:6px;color:var(--text);line-height:1.35}
.mx-display-preview .mx-prev-text .mx-prev-mention{color:var(--accent);font-weight:800}

.mx-display-section{margin-top:12px}
.mx-display-section h3{margin:0 0 10px;font-size:20px;font-weight:900}

/* Font size slider */
.mx-display-slider{border-top:1px solid var(--border);padding-top:14px}
.mx-display-sliderbar{position:relative;margin:12px 0 6px}
.mx-display-sliderbar .mx-line{height:4px;border-radius:999px;background:rgba(83,100,113,.35)}
.mx-display-sliderbar .mx-line-fill{height:4px;border-radius:999px;background:var(--accent);width:50%}
.mx-display-dots{display:flex;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.mx-display-dot{width:12px;height:12px;border-radius:999px;background:rgba(83,100,113,.35);border:2px solid var(--panel)}
.mx-display-dot.is-on{background:var(--accent)}
.mx-display-range{width:100%;appearance:none;background:transparent;position:absolute;left:0;top:-10px;height:28px;cursor:pointer}
.mx-display-range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:999px;background:var(--accent);border:4px solid var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mx-display-range::-moz-range-thumb{width:22px;height:22px;border-radius:999px;background:var(--accent);border:4px solid var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mx-display-aa{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-weight:800}

/* Color circles */
.mx-display-colors{border-top:1px solid var(--border);padding-top:14px}
.mx-color-row{display:flex;gap:18px;flex-wrap:wrap}
.mx-colorbtn{width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--panel)}
.mx-colorbtn:focus{outline:2px solid var(--accent);outline-offset:3px}
.mx-colorbtn svg{width:22px;height:22px;color:#fff;display:none}
.mx-colorbtn.is-active svg{display:block}
.mx-c-blue{background:#1d9bf0}
.mx-c-yellow{background:#ffd400}
.mx-c-pink{background:#f91880}
.mx-c-purple{background:#7856ff}
.mx-c-orange{background:#ff7a00}
.mx-c-green{background:#00ba7c}

/* Background cards */
.mx-display-bg{border-top:1px solid var(--border);padding-top:14px}
.mx-bg-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.mx-bgcard{border:2px solid var(--border);border-radius:16px;padding:14px;cursor:pointer;display:flex;align-items:center;gap:12px;background:var(--panel)}
.mx-bgcard .mx-bg-radio{width:22px;height:22px;border-radius:999px;border:2px solid rgba(83,100,113,.5);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.mx-bgcard .mx-bg-radio svg{width:14px;height:14px;color:#fff;display:none}
.mx-bgcard.is-active{border-color:var(--accent)}
.mx-bgcard.is-active .mx-bg-radio{background:var(--accent);border-color:var(--accent)}
.mx-bgcard.is-active .mx-bg-radio svg{display:block}
.mx-bgcard .mx-bg-txt{font-weight:900}
.mx-bgcard.mx-bg-dark{background:#000;color:#e7e9ea;border-color:#2f3336}
.mx-bgcard.mx-bg-dim{background:#15202b;color:#e7e9ea;border-color:#2f3b48}
.mx-bgcard.mx-bg-light{background:#fff;color:#0f1419;border-color:#eff3f4}

.mx-display-system{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.mx-display-system .mx-small{margin:0;color:var(--muted)}

/* Display accent colors */
.mx-accent-blue{--accent:#1d9bf0}
.mx-accent-yellow{--accent:#ffd400}
.mx-accent-pink{--accent:#f91880}
.mx-accent-purple{--accent:#7856ff}
.mx-accent-orange{--accent:#ff7a00}
.mx-accent-green{--accent:#00ba7c}


/* Dark themes: primary button text */
.mx-theme-dim .mx-btn-primary,
.mx-theme-dark .mx-btn-primary{color:#0f1419}

/* Dark themes: Follow button should be readable (X-style) */
.mx-theme-dim .mx-btn-follow,
.mx-theme-dark .mx-btn-follow{
  background:#eff3f4;
  color:#0f1419;
}

/* Post 3-dot menu trigger */
.mx-meta .mx-more{cursor:pointer;user-select:none}

/* Reports (Report post / Report account) – X-like list UI */
.mx-report-card{max-width:600px}

/* reasons list like Twitter/X (full-width rows) */
.mx-report-reasons{
  display:flex;
  flex-direction:column;
  margin:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel)
}
.mx-report-reason{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  cursor:pointer;
  text-align:left;
  font-size:15px;
  font-weight:700;
  color:var(--text)
}
.mx-report-reason:last-child{border-bottom:0}
.mx-report-reason:hover{background:var(--hover)}
.mx-report-reason:focus{outline:2px solid rgba(29,155,240,.55);outline-offset:-2px}

/* selected state */
.mx-report-reason.is-selected{background:rgba(29,155,240,.08)}
.mx-report-mark{display:none;font-weight:900;color:var(--accent)}
.mx-report-reason.is-selected .mx-report-mark{display:inline-flex}

/* details box */
.mx-report-details{
  width:100%;
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  resize:vertical;
  min-height:92px;
  outline:none
}
.mx-report-details:focus{border-color:rgba(29,155,240,.7);box-shadow:0 0 0 3px rgba(29,155,240,.14)}

.mx-report-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

.mx-video-quality-wrap{position:relative;pointer-events:auto}
.mx-video-quality-btn{min-width:52px;width:auto;padding:0 10px;font-size:12px;font-weight:800;line-height:1.1}
.mx-video-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:132px;padding:6px;background:rgba(15,20,25,.94);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.34);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;z-index:5}
.mx-video-quality-wrap.is-open .mx-video-menu{display:block}
.mx-video-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;color:#fff;padding:9px 10px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.mx-video-menu-item:hover,.mx-video-menu-item:focus-visible{background:rgba(255,255,255,.08);outline:none}
.mx-video-menu-item.is-active{background:rgba(29,155,240,.18);color:#fff}
.mx-video-player.is-loading .mx-video-quality-btn{opacity:.7}
.mx-video-player.is-loading .mx-video-center,.mx-video-player.is-loading .mx-video-play{opacity:.72}