:root{
  --mf-bg: #ffffff;
  --mf-text: #111827;
  --mf-muted: #6b7280;
  --mf-border: #e5e7eb;
  --mf-card: #ffffff;
  --mf-accent: var(--mf-accent, #4f46e5);
  --mf-radius: 14px;
  --mf-font: var(--mf-font, system-ui, -apple-system, Segoe UI, Roboto, Arial);
}

html[data-theme="dark"]{
  --mf-bg: #0b1220;
  --mf-text: #e5e7eb;
  --mf-muted: #9ca3af;
  --mf-border: #1f2937;
  --mf-card: #0f172a;
}

body{
  font-family: var(--mf-font);
  background: var(--mf-bg);
  color: var(--mf-text);
  margin: 0;
}

a{ color: var(--mf-accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.mf-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px 24px;
}

.mf-site-body{ padding-top: 14px; }

.mf-site-footer{
  border-top: 1px solid var(--mf-border);
  background: var(--mf-card);
}

.mf-site-footer .mf-container{ padding-top: 18px; }

.mf-bc{
  margin: 12px 0 18px;
  color: var(--mf-muted);
  font-size: 14px;
}

.mf-layout{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.mf-main{
  flex: 1;
  min-width: 0;
}

.mf-sidebar{
  width: 320px;
  position: sticky;
  top: 76px;
}

body.mf-sidebar-left .mf-layout{ flex-direction: row-reverse; }
body.mf-sidebar-none .mf-sidebar{ display:none; }

@media (max-width: 980px){
  .mf-layout{ flex-direction: column; }
  .mf-sidebar{ width: 100%; position: static; top: auto; }
}

/* Header */
.mf-site-header{
  border-bottom: 1px solid var(--mf-border);
  background: var(--mf-card);
  position: sticky;
  top: 0;
  z-index: 50;
}

.mf-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.mf-brand .custom-logo{ max-height: 40px; width: auto; }

.mf-site-title{
  font-weight: 800;
  color: var(--mf-text);
}

.mf-nav-toggle{
  display: none;
  border: 1px solid var(--mf-border);
  background: var(--mf-card);
  border-radius: 12px;
  padding: 10px 12px;
}

.mf-dark-toggle{
  border: 1px solid var(--mf-border);
  background: var(--mf-card);
  border-radius: 12px;
  padding: 10px 12px;
}

.mf-menu{
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.mf-menu a{
  color: var(--mf-text);
  font-weight: 600;
}

.mf-header-banner{ padding-top: 0; padding-bottom: 0; }
.mf-banner-img{
  width: 100%;
  height: auto;
  border-radius: var(--mf-radius);
  border: 1px solid var(--mf-border);
  display: block;
  margin: 0 0 14px;
}

/* Mobile nav */
@media (max-width: 768px){
  .mf-nav-toggle{ display: inline-flex; }

  .mf-nav{
    display: none;
    width: 100%;
  }

  body.mf-nav-open .mf-nav{
    display: block;
  }

  .mf-header-inner{
    flex-wrap: wrap;
  }

  .mf-menu{
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    background: var(--mf-card);
    width: 100%;
  }
}

/* Cards / widgets */
.mf-card, .mf-widget, .mf-stats, .mf-between{
  background: var(--mf-card);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 14px;
}

.mf-widget{ margin-bottom: 12px; }
.mf-widget-title{
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--mf-muted);
  font-weight: 600;
}

.mf-muted{ color: var(--mf-muted); font-size: 13px; }

/* Search bar */
.mf-search{
  display: flex;
  gap: 10px;
  margin: 12px 0 14px;
}

.mf-search input[type="search"]{
  flex: 1;
  border: 1px solid var(--mf-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--mf-card);
  color: var(--mf-text);
}

button, .button, input[type="submit"]{
  border: 1px solid var(--mf-border);
  background: var(--mf-card);
  color: var(--mf-text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

button:hover, .button:hover{
  border-color: var(--mf-accent);
}

@media (max-width: 540px){
  .mf-search{ flex-direction: column; }
  .mf-search input[type="search"], .mf-search button{ width: 100%; }
}

/* Topic list */
.mf-topic-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mf-topic-row{
  background: var(--mf-card);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 12px 14px;
}

.mf-row-title{
  font-weight: 700;
  margin-bottom: 6px;
}

.mf-row-meta{
  color: var(--mf-muted);
  font-size: 13px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Topic/replies */
.mf-topic h1{ margin: 10px 0 10px; }
.mf-meta{
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--mf-muted);
  font-size: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.mf-avatar{
  border-radius: 999px;
  border: 1px solid var(--mf-border);
}

.mf-badge{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--mf-border);
  font-size: 12px;
  color: var(--mf-muted);
}

.mf-badge-verified{
  border-color: var(--mf-accent);
  color: var(--mf-accent);
}

.mf-signature{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--mf-border);
  color: var(--mf-muted);
  font-size: 13px;
}

.mf-replies{ margin-top: 18px; }
.mf-reply{
  background: var(--mf-card);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}

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

.mf-pagination{
  margin: 14px 0;
  color: var(--mf-muted);
}

#mf-reply-form textarea{
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--mf-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--mf-card);
  color: var(--mf-text);
}

.mf-note{ color: var(--mf-muted); font-size: 13px; }

/* Tags */
.mf-tag{
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--mf-border);
  font-size: 12px;
  color: var(--mf-muted);
  vertical-align: middle;
}

.mf-tag-vip{
  border-color: var(--mf-accent);
  color: var(--mf-accent);
}

/* Upgrade card */
.mf-upgrade-card h2{ margin: 0 0 8px; }

/* Prevent overflow */
.mf-content, .mf-topic-row, .mf-reply{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mf-content img, .mf-widget img{
  max-width: 100%;
  height: auto;
}
.mf-content iframe, .mf-content video{
  max-width: 100%;
}

/* Tables scroll */
.mf-card table, .mf-widget table{
  display: block;
  overflow-x: auto;
  max-width: 100%;
}