/* ============================================================
   DeFight V2 — Design System
   Dark theme + gold accents. Mobile-first. Built to the
   approved references in "To do/new UX style + references/".
   ============================================================ */

:root {
    --df-bg:        #0B0E13;   /* app background (near-black navy) */
    --df-surface:   #151A22;   /* cards / panels */
    --df-surface-2: #1C222C;   /* raised inputs / inner cards */
    --df-border:    #232A35;
    --df-gold:      #F5B829;   /* primary accent */
    --df-gold-soft: #F7C44D;
    --df-text:      #F4F5F7;
    --df-muted:     #8A94A6;
    --df-green:     #34D399;
    --df-red:       #F87171;
    --df-purple:    #8B5CF6;
    --df-radius:    18px;
    --df-radius-lg: 26px;
    --df-maxw:      480px;     /* phone column width (mobile / default) */
    --df-maxw-lg:   1120px;    /* desktop content max width */
}

* { -webkit-tap-highlight-color: transparent; }

body.df {
    background: var(--df-bg);
    color: var(--df-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Phone-shaped app column, centered on desktop */
.df-app {
    max-width: var(--df-maxw);
    margin: 0 auto;
    min-height: 100vh;
    background: var(--df-bg);
    position: relative;
    padding-bottom: 96px;          /* room for bottom nav */
}

/* ---------- Top header ---------- */
.df-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
}
.df-header__title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
}
.df-header__title .dot { color: var(--df-gold); }
.df-header__menu { color: var(--df-muted); font-size: 22px; }
.df-header__right { display: flex; align-items: center; gap: 16px; }
.df-bell { position: relative; color: var(--df-text); font-size: 20px; }
.df-bell .dot {
    position: absolute; top: -2px; right: -2px;
    width: 8px; height: 8px; background: var(--df-red); border-radius: 50%;
}
.df-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--df-border); }
.df-hr { border: none; border-top: 1px solid var(--df-border); margin: 0; }

/* ---------- Page title (Ranking / Wallet style) ---------- */
.df-page-title { font-size: 30px; font-weight: 800; padding: 8px 20px 18px; margin: 0; }

/* ---------- Buttons ---------- */
.df-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border: none; cursor: pointer;
    font-weight: 700; font-size: 16px;
    padding: 15px 26px; border-radius: 999px;
    transition: transform .08s ease, opacity .15s ease;
    text-decoration: none;
}
.df-btn:active { transform: scale(.98); }
.df-btn--gold { background: var(--df-gold); color: #1a1304; }
.df-btn--gold:hover { background: var(--df-gold-soft); }
.df-btn--ghost { background: transparent; color: var(--df-text); border: 1px solid var(--df-border); }
.df-btn--block { width: 100%; }

/* ---------- Inputs ---------- */
.df-field { margin-bottom: 18px; }
.df-label { display: block; font-weight: 700; margin: 0 0 8px; font-size: 15px; }
.df-input, .df-select, .df-textarea {
    width: 100%; box-sizing: border-box;
    background: var(--df-surface-2); border: 1px solid var(--df-border);
    color: var(--df-text); border-radius: 999px;
    padding: 15px 18px; font-size: 16px; outline: none;
}
.df-textarea { border-radius: var(--df-radius); min-height: 110px; resize: vertical; }
.df-input::placeholder, .df-textarea::placeholder { color: var(--df-muted); }
.df-input:focus, .df-select:focus, .df-textarea:focus { border-color: var(--df-gold); }
.df-hint { color: var(--df-gold); font-size: 13px; margin: 6px 2px 0; }

/* ---------- Cards ---------- */
.df-card {
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    padding: 18px;
}
.df-section { padding: 0 20px; }

/* ---------- Fighter VS block (Feed / Fight / Offer) ---------- */
.df-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.df-vs-bleed { margin-left: -16px; margin-right: -16px; }
.df-fighter-card {
    position: relative; border-radius: var(--df-radius);
    overflow: hidden; aspect-ratio: 1 / 1; background: #222;
}
.df-fighter-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
/* ---- REUSABLE fighter-card colour BACKGROUND (ref 2.Home.jpg) ----
   The colour sits BEHIND the fighter (card background), NOT an overlay.
   ONE radial gradient anchored at the OUTER-BOTTOM corner (--fc-anchor):
   saturated in that corner, fades A LITTLE straight up, and fades A LOT
   toward the opposite (inner-top) corner — a two-axis diagonal falloff.
   Keyed on one custom prop --fc-glow ("R,G,B").
   Gold  -> anchor bottom-LEFT  (0% 100%)
   Purple-> anchor bottom-RIGHT (100% 100%)
   Add a new colour = set --fc-glow + --fc-anchor on a new modifier. */
.df-fighter-card {
  --fc-glow: 245,184,41;
  --fc-anchor: 0% 100%;
  background:
    radial-gradient(150% 125% at var(--fc-anchor),
      rgba(var(--fc-glow), 1)   0%,
      rgba(var(--fc-glow), .75) 22%,
      rgba(var(--fc-glow), .40) 44%,
      rgba(var(--fc-glow), .14) 66%,
      rgba(var(--fc-glow), 0)   84%),
    #14181f;
}
.df-fighter-card img { position: relative; z-index: 1; }
.df-fighter-card--gold   { --fc-glow: 245,184,41; --fc-anchor: 0% 100%;   box-shadow: inset 0 0 0 1.5px rgba(245,184,41,.55); }
.df-fighter-card--purple { --fc-glow: 168,85,247; --fc-anchor: 100% 100%; box-shadow: inset 0 0 0 1.5px rgba(168,85,247,.55); }
/* full thin colored outline (box-shadow above) + brighter thick corner bracket on top (ref 2.Home) */
.df-fighter-card::after { content:''; position:absolute; z-index:2; pointer-events:none; width:44px; height:44px; }
.df-fighter-card--gold::after   { top:0; left:0; border-top:3px solid var(--df-gold); border-left:3px solid var(--df-gold); border-top-left-radius:var(--df-radius); }
.df-fighter-card--purple::after { bottom:0; right:0; border-bottom:3px solid var(--df-purple); border-right:3px solid var(--df-purple); border-bottom-right-radius:var(--df-radius); }
/* name + rank stacked at the TOP, no overlap (gradient keeps text readable) */
.df-fighter-card__head {
    position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px 18px;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
    display: flex; flex-direction: column; gap: 2px; z-index: 1;
}
.df-fighter-card--right .df-fighter-card__head { align-items: flex-end; text-align: right; }
.df-fighter-card__name {
    font-weight: 800; font-size: 36px; line-height: 1.1;
    text-shadow: 0 2px 6px rgba(0,0,0,.7); overflow-wrap: anywhere;
}
.df-fighter-card__rank { color: var(--df-gold); font-weight: 600; font-size: 13px; }
.df-vs__badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 34px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); z-index: 2;
}

/* ---------- Meta row (date / time / value / location) ---------- */
.df-meta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; padding: 14px 0; }
.df-meta__item { display: flex; align-items: center; gap: 8px; color: var(--df-muted); font-size: 15px; }
.df-meta__item i { color: var(--df-gold); font-size: 16px; }
/* ref 2.Home.jpg: date/time/comment icons are WHITE; only money-bag (gold glyph) + location pin (gold chip) are gold */
.df-meta__item--white i { color: var(--df-text); }
.df-chip-icon {
    width: 26px; height: 26px; border-radius: 50%; background: var(--df-gold);
    color: #1a1304; display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    flex: 0 0 auto;
}
/* the glyph INSIDE the gold chip must be dark, not gold — override the gold .df-meta__item i rule */
.df-chip-icon i, .df-meta__item .df-chip-icon i { color: #1a1304; }
.df-value { color: var(--df-gold); font-weight: 800; font-size: 18px; }

/* ---------- Vault tiles (profile) ---------- */
.df-vaults { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.df-vault {
    display: flex; align-items: center; gap: 12px;
    background: var(--df-surface); border: 1px solid var(--df-border);
    border-radius: var(--df-radius); padding: 16px;
}
.df-vault__icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.df-vault__icon--gold { background: var(--df-gold); color: #1a1304; }
.df-vault__icon--purple { background: var(--df-purple); color: #fff; }
.df-vault__label { font-size: 14px; color: var(--df-text); font-weight: 600; }
.df-vault__amt { font-size: 14px; font-weight: 700; }
.df-vault__amt--gold { color: var(--df-gold); }
.df-vault__amt--purple { color: #b794f6; }

/* ---------- Stat row (fights / wins / losses) ---------- */
.df-stats { display: grid; grid-template-columns: repeat(3,1fr); background: var(--df-surface); border:1px solid var(--df-border); border-radius: var(--df-radius); padding: 18px 0; }
.df-stat { text-align: center; border-right: 1px solid var(--df-border); }
.df-stat:last-child { border-right: none; }
.df-stat__num { font-size: 24px; font-weight: 800; }
.df-stat__num--win { color: var(--df-green); }
.df-stat__num--loss { color: var(--df-red); }
.df-stat__label { color: var(--df-muted); font-size: 14px; }

/* ---------- Vitals row (level/weight/height/age) ---------- */
.df-vitals { display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 0 4px; }
.df-vital { text-align: left; padding-left: 4px; border-left: 1px solid var(--df-border); }
.df-vital:first-child { border-left: none; }
.df-vital__label { color: var(--df-muted); font-size: 14px; }
.df-vital__value { font-weight: 700; font-size: 16px; margin-top: 2px; }

/* ---------- Tabs ---------- */
.df-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--df-border); padding: 0 20px; }
.df-tab { padding: 12px 0; color: var(--df-muted); font-weight: 600; border-bottom: 2px solid transparent; cursor: pointer; background:none;border:none;font-size:15px; }
.df-tab.is-active { color: var(--df-text); border-bottom-color: var(--df-gold); }

/* ---------- Ranking list ---------- */
.df-rank-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--df-border); }
.df-rank-row__img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.df-rank-row__name { flex: 1; font-weight: 600; font-size: 17px; }
.df-rank-row__apy { color: var(--df-muted); font-size: 14px; }
.df-rank-row__apy b { color: var(--df-green); }
.df-rank-row__chev { width: 30px; height: 30px; border-radius: 50%; background: var(--df-gold); color:#1a1304; display:flex;align-items:center;justify-content:center; font-size:12px; }

/* ---------- Search ---------- */
.df-search { display: flex; align-items: center; gap: 12px; }
.df-search__box { flex:1; display:flex; align-items:center; gap:10px; background: var(--df-surface-2); border:1px solid var(--df-border); border-radius: var(--df-radius); padding: 12px 16px; }
.df-search__box input { background:none;border:none;color:var(--df-text);outline:none;width:100%;font-size:16px; }
.df-search__filter { width:46px;height:46px;border-radius:12px;border:1px solid var(--df-border);background:var(--df-surface-2);color:var(--df-text);display:flex;align-items:center;justify-content:center; }

/* ---------- Wallet balance card ---------- */
.df-balance {
    background: linear-gradient(135deg, #1A2029, #11151C);
    border:1px solid var(--df-border); border-radius: var(--df-radius-lg);
    padding: 22px; position: relative; overflow: hidden;
}
.df-balance__label { color: var(--df-muted); font-size: 15px; display:flex;align-items:center;gap:8px; }
.df-balance__amt { font-size: 34px; font-weight: 800; margin: 6px 0 14px; }
.df-balance__chev { position:absolute; right:-30px; top:0; bottom:0; opacity:.08; font-size:160px; }

/* ---------- Asset row (wallet) ---------- */
.df-asset { display:flex; gap:18px; align-items:center; padding: 16px 0; }
.df-asset__img { width: 130px; height: 130px; border-radius: 18px; object-fit: cover; flex:0 0 auto; box-shadow: inset 0 0 0 2px var(--df-gold); }
.df-asset__info { flex:1; min-width:0; }
.df-asset__name { font-size: 22px; font-weight: 800; }
.df-asset__qty { color: var(--df-muted); font-size: 16px; margin: 6px 0 2px; }
.df-asset__roi { color: var(--df-green); font-weight: 700; margin-bottom: 12px; font-size:16px; }

/* ---------- Comments ---------- */
.df-comment { display:flex; gap:10px; padding: 10px 0; }
.df-comment__img { width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto; }
.df-comment__name { color: var(--df-muted); font-weight:600; }
.df-comment__text { color: var(--df-text); }
.df-comment-bar { display:flex; align-items:center; gap:10px; background:var(--df-surface-2); border:1px solid var(--df-border); border-radius:999px; padding:8px 8px 8px 18px; }
.df-comment-bar input { flex:1; background:none;border:none;color:var(--df-text);outline:none;font-size:16px; }
.df-comment-bar button { width:42px;height:42px;border-radius:50%;background:var(--df-gold);color:#1a1304;border:none;font-size:16px; }

/* ---------- Modal ---------- */
.df-modal-backdrop { position: fixed; inset: 0; background: rgba(5,7,11,.72); display:flex; align-items:center; justify-content:center; z-index: 100; padding: 24px; }
.df-modal { background: #2A313B; border-radius: var(--df-radius-lg); padding: 34px 26px; width: 100%; max-width: 360px; position: relative; text-align: center; }
.df-modal__close { position:absolute; top:16px; right:18px; color: var(--df-muted); font-size:20px; background:none;border:none; cursor:pointer; }

/* ---------- Bottom navigation ---------- */
.df-bottom-nav {
      position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
      width: calc(100% - 24px); max-width: var(--df-maxw);
      box-sizing: border-box;
      display: flex; align-items: center; justify-content: space-between; gap: 4px;
      background: #10141B; border: 1px solid var(--df-border); border-bottom: none;
      border-radius: 22px 22px 0 0;
      padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
      overflow: hidden;                 /* clip any gold state to the rounded bar — kills edge half-pills */
      z-index: 60;
  }
.df-nav-item { color: var(--df-muted); font-size: 22px; display:flex; align-items:center; justify-content:center; width:48px;height:48px; border-radius:14px; text-decoration:none; background:none; flex:0 0 auto; }
  /* Only the icon turns gold on active — NO gold background/pill on the edge items (ref 1) */
  .df-nav-item.is-active { color: var(--df-gold); background:none; }
.df-nav-center {
    width: 60px; height: 60px; border-radius: 18px; background: var(--df-gold);
    color: #1a1304; display:flex; align-items:center; justify-content:center; font-size:26px;
    box-shadow: 0 8px 20px rgba(0,0,0,.35); text-decoration:none; margin-top:-18px;
}
.df-nav-center.is-active { background: var(--df-gold); color:#1a1304; }

/* ---------- ROI quality badge (my-fighter header) ---------- */
.df-roi-badge { display:inline-flex; flex-direction:column; gap:1px; background:var(--df-surface-2); border:1px solid var(--df-border); border-radius:12px; padding:6px 12px; line-height:1.2; }
.df-roi-badge b { font-size:15px; }

/* ---------- Round icon button (profile back / 3-dots — refs 2,4) ---------- */
.df-icon-btn { width:44px;height:44px;border-radius:50%;background:var(--df-surface-2);border:1px solid var(--df-border);color:var(--df-text);display:flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none;cursor:pointer;flex:0 0 auto; }
.df-icon-btn:hover { background:var(--df-surface); }

/* ---------- Utility ---------- */
.df-flex { display:flex; } .df-between { justify-content: space-between; } .df-center { align-items:center; }
.df-gap { gap: 12px; } .df-mt { margin-top: 16px; } .df-mb { margin-bottom: 16px; }
.df-muted { color: var(--df-muted); } .df-gold { color: var(--df-gold); }
.df-stack > * + * { margin-top: 16px; }
.df-bubble { background: var(--df-surface); border:1px solid var(--df-border); border-radius: var(--df-radius); padding: 14px 18px; color: var(--df-text); }



/* ============================================================
   GLOBAL — never scroll sideways; media never overflows.
   ============================================================ */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Sidebar hidden by default (mobile). Shell is the scroll container. */
.df-root { display: block; }
.df-sidebar { display: none; }
.df-shell { width: 100%; }

/* ============================================================
   MOBILE (<= 899px) — phone column, fixed top+bottom bars, content scrolls.
   ============================================================ */
@media (max-width: 899px) {
      html, body { height: 100%; overflow-y: hidden; }
      .df-shell { height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
      .df-app {
          max-width: 100%;
          margin: 0 auto;
          padding: 0 6px 104px;        /* small even gutter both sides */
          min-height: auto;
      }
      /* feed grid must not add its own inset on top of .df-app padding — card runs edge-to-edge */
      .df-section.df-feed-grid { padding-left: 0; padding-right: 0; }
      .df-header, .df-page-title { position: sticky; top: 0; z-index: 40; background: var(--df-bg); }
      .df-bottom-nav { z-index: 80; }
      /* one column on phones — !important overrides the 2/3/4-col breakpoints above at very small widths */
      .df-feed-grid, .df-rank-grid, .df-org-grid, .df-asset-grid { grid-template-columns: 1fr !important; }

      /* Feed card: reclaim the empty gap between the comment bubble and the VS block,
         and let the card use more of the screen width (was 18px padding + 16px gap). */
      .df-mfc { padding: 14px !important; height: 100%; display: flex; flex-direction: column; }
      .df-mfc .df-mt { margin-top: 10px; }
      .df-mfc .df-bubble { padding: 10px 14px; }
      .df-vs { gap: 8px; }
      .df-fighter-card__name { font-size: 22px; }
      }

/* ============================================================
   DESKTOP (>= 900px) — fixed left sidebar; content area scrolls; bars hidden.
   ============================================================ */
@media (min-width: 900px) {
    .df-bottom-nav { display: none !important; }

    html, body.df { background: #0E121A; }

    .df-root {
        display: flex; align-items: stretch; height: 100vh;
        max-width: 1440px; margin: 0 auto;
        border-left: 1px solid var(--df-border);
        border-right: 1px solid var(--df-border);
        background: var(--df-bg);
    }
    .df-sidebar {
        display: flex; flex-direction: column;
        flex: 0 0 240px; width: 240px; height: 100vh;
        padding: 24px 16px;
        background: #0E121A; border-right: 1px solid var(--df-border);
        position: sticky; top: 0;
    }
    .df-sidebar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin: 0 8px 26px; }
    .df-sidebar__logo { width: 40px; height: 40px; border-radius: 11px; background: var(--df-gold); color: #1a1304; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
    .df-sidebar__brandtext { font-weight: 800; font-size: 20px; letter-spacing: 1px; }
    .df-sidebar__nav { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
    .df-sidebar__link { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 12px; text-decoration: none; color: var(--df-muted); font-weight: 600; font-size: 16px; }
    .df-sidebar__link i { width: 22px; text-align: center; font-size: 18px; }
    .df-sidebar__link:hover { background: var(--df-surface); color: var(--df-text); }
    .df-sidebar__link.is-active { background: rgba(245,184,41,.12); color: var(--df-gold); }
    .df-sidebar__foot { margin-top: auto; padding-top: 18px; }
    .df-sidebar__user { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--df-text); padding: 8px; border-radius: 12px; }
    .df-sidebar__user img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }

    /* The scroll viewport sits to the right of the fixed sidebar. */
    .df-shell {
        flex: 1 1 auto; min-width: 0;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Content column: fills the shell, capped, centered, with safe gutters. */
    .df-app {
        width: 100%;
        max-width: var(--df-maxw-lg);
        margin: 0 auto;
        padding: 8px 32px 56px;
        min-height: auto;
    }
    .df-header, .df-page-title { position: sticky; top: 0; z-index: 40; background: var(--df-bg); }
    .df-header__menu { display: none; }     /* hamburger redundant beside sidebar */
    .df-page-title { padding-left: 0; padding-right: 0; font-size: 32px; }
    .df-header { padding-left: 0; padding-right: 0; }
    .df-section { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   FLUID GRIDS — wrap to fit ANY width. minmax keeps columns inside the box.
   (min() guarantees the min track never exceeds the container => no overflow)
   ============================================================ */
.df-feed-grid  { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; justify-content: start; }
.df-feed-grid > * { width: 100%; }
.df-rank-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 28px; }
@media (min-width: 900px) {
  .df-feed-grid  { grid-template-columns: 1fr; max-width: none; margin: 0; }
  .df-org-grid   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .df-asset-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .df-feed-grid .df-fighter-card { aspect-ratio: 4 / 3; }
  .df-fighter-card__name { font-size: 62px; }
}

/* Extra-wide screens: keep the content column from stretching further — bigger side gutters instead */
@media (min-width: 1400px) {
  .df-app { padding-left: 120px; padding-right: 56px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .df-feed-grid { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .df-feed-grid { grid-template-columns: 1fr; }
}
/* every card + nested wrapper must be allowed to shrink below its intrinsic content width,
   otherwise one card's content forces its grid track wider than its sibling's */
.df-feed-grid, .df-feed-grid > *, .df-mfc, .df-vs, .df-vs-bleed,
.df-fighter-card, .df-meta, .df-mfc .df-flex { min-width: 0; }
/* .df-vs-bleed uses -16px side margins to run the VS block edge-to-edge inside the card.
   In the LAST grid column that overflowed the viewport. Clip it to the card. */
.df-mfc { width: 100%; box-sizing: border-box; overflow: hidden; }
/* every card and every nested wrapper must be allowed to shrink below its content size,
   otherwise one card's intrinsic width (image, VS bleed, long name) forces its grid track
   wider than the sibling's, producing the uneven two-column split seen on narrow screens */
.df-feed-grid, .df-feed-grid > *, .df-mfc, .df-vs, .df-vs-bleed, .df-fighter-card, .df-meta, .df-flex {
  min-width: 0;
}
.df-mfc { width: 100%; box-sizing: border-box; overflow: hidden; }
.df-org-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.df-asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.df-org-grid .df-mb { margin-bottom: 0; }

/* every grid + its children may shrink (prevents min-content overflow) */
.df-feed-grid, .df-rank-grid, .df-org-grid, .df-asset-grid,
.df-vaults, .df-vitals, .df-stats { min-width: 0; max-width: 100%; }
.df-feed-grid > *, .df-rank-grid > *, .df-org-grid > *, .df-asset-grid > *,
.df-vaults > *, .df-vitals > *, .df-stats > * { min-width: 0; }

/* long text wraps instead of widening layout */
.df-rank-row__name, .df-asset__name, .df-vault__amt, .df-fighter-card__name { overflow-wrap: anywhere; }
.df-btn { max-width: 100%; }

/* ============================================================
   SLIDE-OUT DRAWER (hamburger menu)
   ============================================================ */
.df-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(5,7,11,.6);
    opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 90;
}
.df-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.df-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 82vw;
    background: #0E121A; border-right: 1px solid var(--df-border);
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 100; display: flex; flex-direction: column; padding: 18px 14px;
    overflow-y: auto;
}
.df-drawer.is-open { transform: translateX(0); }
.df-drawer__head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; position: relative; }
.df-drawer__close { position: absolute; right: 4px; top: 0; background: none; border: none; color: var(--df-muted); font-size: 26px; cursor: pointer; line-height: 1; }
.df-drawer__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.df-drawer__link {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 14px; border-radius: 12px; text-decoration: none;
    color: var(--df-text); font-weight: 600; font-size: 16px;
}
.df-drawer__link i { width: 22px; text-align: center; color: var(--df-muted); }
.df-drawer__link:hover { background: var(--df-surface); }
.df-drawer__link.is-active { background: rgba(245,184,41,.12); color: var(--df-gold); }
.df-drawer__link.is-active i { color: var(--df-gold); }
.df-drawer__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--df-border); }

/* On desktop the sidebar already exists → hide the hamburger + drawer entirely */
@media (min-width: 900px) {
    .df-drawer, .df-drawer-backdrop { display: none !important; }
}

/* ============================================================
   STYLED SELECT — dark theme + gold custom arrow (matches design)
   ============================================================ */
.df-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F5B829' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}
.df-select:hover { border-color: #2E3744; }
/* Style the dropdown option list (supported in modern Chromium/Firefox) */
.df-select option {
    background: #1C222C; color: var(--df-text);
    padding: 12px;
}
.df-select option:checked,
.df-select option:hover { background: #2A313B; color: var(--df-gold); }

/* ============================================================
   NOTIFICATIONS — topbar bell + unread badge
   ============================================================ */
.df-topbar {
    position: relative; z-index: 70;
    display: flex; justify-content: flex-end; align-items: center;
    width: 100%; max-width: none; margin: 0; padding: 12px 0 0;
    box-sizing: border-box;
}
@media (max-width: 899px) {
    .df-topbar { max-width: 100%; padding: 10px 2mm 0; }
    .df-header { padding-left: 0; padding-right: 0; }
    .df-page-title { padding-left: 0; padding-right: 0; }
    .df-section { padding-left: 0; padding-right: 0; }
    .df-bottom-nav { width: calc(100% - 4mm); max-width: none; }
}
.df-bell-btn {
    position: relative; width: 42px; height: 42px; border-radius: 50%;
    background: var(--df-surface-2); border: 1px solid var(--df-border);
    color: var(--df-text); font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.df-bell-btn:hover { background: var(--df-surface); color: var(--df-gold); }
.df-bell-badge {
    position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px;
    padding: 0 4px; box-sizing: border-box; border-radius: 999px;
    background: var(--df-red); color: #2a0b0b;
    font-size: 10px; font-weight: 800; line-height: 1; text-align: center;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--df-bg);
}
.df-notif-empty { padding: 26px 16px; text-align: center; font-size: 14px; }

.df-header { position: sticky; top: 0; z-index: 70; background: var(--df-bg); }
.df-notif-panel {
    position: absolute; top: 46px; right: 0; width: 340px; max-width: 90vw;
    background: #151A22 !important; border: 1px solid var(--df-border); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 1002;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    overflow: hidden; isolation: isolate;
}
.df-notif-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* opaque scrim so page content can NEVER bleed through the panel on any page */
.df-notif-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(5,7,11,.82); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
/* the panel's own header ancestor caps z-index at 70; lift the whole right cluster above the scrim when a panel is open so the panel paints over EVERY page's sticky header/banner */
.df-header__right { position: relative; }
body:has(.df-notif-panel.is-open) .df-header__right { z-index: 1001; }
.df-notif-scrim.is-open { opacity: 1; visibility: visible; }
.df-notif-list { background: #151A22; }
.df-notif-item { background: #151A22; }
.df-notif-panel__head { background: #151A22; }
.df-notif-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--df-border); }
.df-notif-readall { background: none; border: none; color: var(--df-gold); font-size: 13px; font-weight: 600; cursor: pointer; }
.df-notif-list { max-height: 380px; overflow-y: auto; }
.df-notif-item { display: flex; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--df-text); border-bottom: 1px solid var(--df-border); }
.df-notif-item:hover { background: var(--df-surface-2); }
.df-notif-item.is-unread { background: rgba(245,184,41,.06); }
.df-notif-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--df-surface-2); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.df-notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.df-notif-txt b { font-size: 14px; }
.df-notif-txt .df-muted { font-size: 13px; }
.df-notif-time { font-size: 11px; color: #5A6473; margin-top: 2px; }

/* ============================================================
   CUSTOM SELECT WIDGET (themed dropdown for all <select>)
   The native select is hidden; this themed UI mirrors it.
   ============================================================ */
.dfx-select { position: relative; width: 100%; }
.dfx-select__btn {
    width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
    background: var(--df-surface-2); border: 1px solid var(--df-border); color: var(--df-text);
    border-radius: 999px; padding: 15px 44px 15px 18px; font-size: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dfx-select__btn:hover { border-color: #2E3744; }
.dfx-select.is-open .dfx-select__btn { border-color: var(--df-gold); }
.dfx-select__btn .dfx-arrow { color: var(--df-gold); transition: transform .18s ease; flex: 0 0 auto; }
.dfx-select.is-open .dfx-arrow { transform: rotate(180deg); }
.dfx-select__btn .dfx-ph { color: var(--df-muted); }
.dfx-select__menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    background: #1C222C; border: 1px solid var(--df-border); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px; max-height: 280px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease;
}
.dfx-select.is-open .dfx-select__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dfx-opt { padding: 12px 14px; border-radius: 10px; cursor: pointer; font-size: 15px; color: var(--df-text); }
.dfx-opt:hover { background: var(--df-surface); }
.dfx-opt.is-selected { background: rgba(245,184,41,.14); color: var(--df-gold); font-weight: 600; }

/* ============================================================
   DATE / TIME inputs — themed to match dark UI
   ============================================================ */
input[type="datetime-local"].df-input,
input[type="date"].df-input,
input[type="time"].df-input { color-scheme: dark; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(70%) sepia(60%) saturate(600%) hue-rotate(2deg);  /* gold-ish icon */
    cursor: pointer;
}

/* ============================================================
   Fighter-profile three-dots menu
   ============================================================ */
.df-fp-menu {
    position: absolute; top: 48px; right: 0; width: 220px; z-index: 60;
    background: #1C222C; border: 1px solid var(--df-border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease;
}
.df-fp-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.df-fp-menu__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: none; border: none; text-align: left; cursor: pointer;
    color: var(--df-text); font-size: 15px; font-weight: 600; padding: 12px 12px; border-radius: 10px;
    text-decoration: none;
}
.df-fp-menu__item:hover { background: var(--df-surface); }
.df-fp-menu__item i { width: 20px; text-align: center; color: var(--df-muted); }

/* ============================================================
   ORGANIZERS — hero card (ref 1.Organizers) + verified badge (ref 5)
   ============================================================ */
.df-org-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.df-org-hero { background: var(--df-surface); border: 1px solid var(--df-border); border-radius: var(--df-radius-lg); overflow: hidden; }
.df-org-hero__cover { height: 190px; background: #222; }
.df-org-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-org-hero__body { padding: 0 18px 18px; }
.df-org-hero__top { display: flex; align-items: flex-end; gap: 14px; margin-top: -44px; margin-bottom: 16px; position: relative; z-index: 1; }
.df-org-hero__avatar { width: 88px; height: 88px; border-radius: 16px; object-fit: cover; border: 3px solid var(--df-surface); flex: 0 0 auto; }
.df-org-hero__name { font-size: 26px; font-weight: 800; line-height: 1; overflow-wrap: anywhere; }
.df-org-hero__stats { display: grid; grid-template-columns: repeat(3,1fr); background: var(--df-surface-2); border-radius: var(--df-radius); padding: 14px 0; }
.df-org-hero__stat { padding: 0 12px; border-right: 1px solid var(--df-border); }
.df-org-hero__stat:last-child { border-right: none; }
.df-org-cta { position: relative; border-radius: var(--df-radius-lg); overflow: hidden; }
.df-org-cta img { width: 100%; height: 150px; object-fit: cover; display: block; filter: brightness(.5); }
.df-org-cta .df-btn { position: absolute; left: 18px; right: 18px; bottom: 18px; width: auto; }

/* ============================================================
   DARK MAP (Leaflet + CARTO dark tiles)
   ============================================================ */
.df-map { height: 300px; width: 100%; background: var(--df-bg); z-index: 0; }
.df-map .leaflet-container { background: var(--df-bg); font-family: inherit; }
/* lift street contrast on the dark basemap */
.df-map .leaflet-tile-pane { filter: brightness(1.85) contrast(1.12) saturate(.9); }
.df-map .leaflet-control-zoom a {
    background: var(--df-surface-2); color: var(--df-text);
    border: 1px solid var(--df-border); border-radius: 8px; margin-bottom: 4px;
    width: 32px; height: 32px; line-height: 30px; font-size: 18px;
}
.df-map .leaflet-control-zoom a:hover { background: var(--df-surface); color: var(--df-gold); }
.df-map .leaflet-bar { border: none; box-shadow: none; }
.df-map .leaflet-control-attribution {
    background: rgba(11,14,19,.72); color: var(--df-muted);
    font-size: 10px; padding: 2px 8px; border-radius: 8px 0 0 0;
}
.df-map .leaflet-control-attribution a { color: var(--df-muted); }
.df-map .df-pin span {
    display: block; width: 20px; height: 20px; margin: 3px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: var(--df-gold);
    box-shadow: 0 0 0 4px rgba(245,184,41,.22), 0 4px 12px rgba(0,0,0,.55);
}

/* Verified badge (ref 5) */
.df-verified { display: inline-flex; align-items: center; gap: 7px; background: var(--df-green); color: #06281c; font-weight: 800; font-size: 14px; padding: 7px 14px; border-radius: 999px; }
.df-verified i { font-size: 14px; }

/* VS rank pill (refs 3,5,6,7,9) — filled chip, uppercased, top-corner aligned */
.df-fighter-card__rank { display: inline-block; background: rgba(0,0,0,.45); color: var(--df-gold); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; align-self: flex-start; }
.df-fighter-card--right .df-fighter-card__rank { color: #d9a7ff; align-self: flex-end; }

/* "It's You" marker — bottom-inner corner so it never overlaps the top name/rank or the centre VS badge */
.df-me-badge { position: absolute; bottom: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #0b0b0b; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.df-me-badge i { font-size: 10px; }
.df-me-badge--gold { background: linear-gradient(135deg, #ffd36b, #f0a92b); }
.df-me-badge--purple { bottom: auto; top: 12px; left: auto; right: 12px; color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); }

/* === admin overview — cards === */
.df-ov{padding:8px 4px 40px}
.df-ov-h{font-size:22px;margin:6px 0 16px;font-weight:800}
.df-ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.df-ov-card{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--df-border);border-radius:16px;background:var(--df-surface);text-decoration:none;color:inherit;transition:.15s}
.df-ov-card:hover{border-color:#22c55e;transform:translateY(-2px)}
.df-ov-card--wide{grid-column:span 2}
.df-ov-lbl{font-size:11px;color:var(--df-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.df-ov-num{font-size:28px;font-weight:800;line-height:1.1}
.df-ov-sub{font-size:12px;color:var(--df-muted)}
.df-ov-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.df-ov-back{color:var(--df-muted);text-decoration:none;font-size:15px}
.df-ov-back:hover{color:var(--df-text)}
/* === admin overview — polished list === */
.df-ov-h .df-ov-count{display:inline-block;min-width:22px;padding:1px 8px;margin-left:8px;font-size:13px;font-weight:600;color:#cbd5e1;background:rgba(255,255,255,.08);border-radius:999px;vertical-align:middle}
.df-ov-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.df-ov-tab{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#94a3b8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);text-decoration:none;transition:.15s}
.df-ov-tab:hover{color:#e2e8f0;border-color:rgba(255,255,255,.18)}
.df-ov-tab.is-on{color:#052e16;background:#22c55e;border-color:#22c55e}
.df-ov-panel{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.02);overflow:hidden}
.df-ov-tools{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.df-ov-search{flex:1;min-width:0;padding:9px 13px;font-size:14px;color:#e2e8f0;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);border-radius:10px;outline:none}
.df-ov-search:focus{border-color:#22c55e}
.df-ov-search::placeholder{color:#64748b}
.df-ov-shown{font-size:12px;color:#64748b;white-space:nowrap}
.df-ov-scroll{overflow-x:auto}
.df-ov-tbl{width:100%;border-collapse:collapse;font-size:14px}
.df-ov-tbl th{position:sticky;top:0;padding:11px 16px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;background:rgba(15,23,42,.6);border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.df-ov-tbl th.df-sort{cursor:pointer;user-select:none}
.df-ov-tbl th.df-sort:hover{color:#e2e8f0}
.df-ov-tbl th.df-num,.df-ov-tbl td.df-num{text-align:right}
.df-ov-tbl th.df-sort::after{content:'\2195';margin-left:6px;opacity:.35;font-size:11px}
.df-ov-tbl th.is-asc::after{content:'\2191';opacity:1;color:#22c55e}
.df-ov-tbl th.is-desc::after{content:'\2193';opacity:1;color:#22c55e}
.df-ov-tbl td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.df-ov-tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.df-ov-tbl tbody tr:last-child td{border-bottom:0}
.df-mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.df-ov-acc{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.df-ov-av{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;font-size:14px;font-weight:700;color:#fff;background:#334155}
.df-av-fighter{background:#dc2626}.df-av-organizer{background:#2563eb}.df-av-admin{background:#9333ea}.df-av-superadmin{background:#c026d3}.df-av-user{background:#475569}
.df-ov-acc-txt{display:flex;flex-direction:column;min-width:0}
.df-ov-name{font-weight:600;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-ov-acc:hover .df-ov-name{color:#22c55e}
.df-ov-mail{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;text-transform:capitalize}
.df-badge-fighter{color:#fca5a5;background:rgba(220,38,38,.16)}
.df-badge-organizer{color:#93c5fd;background:rgba(37,99,235,.16)}
.df-badge-admin{color:#d8b4fe;background:rgba(147,51,234,.16)}
.df-badge-superadmin{color:#f0abfc;background:rgba(192,38,211,.16)}
.df-badge-user{color:#cbd5e1;background:rgba(255,255,255,.08)}
.df-ov-foot{font-weight:700;color:#e2e8f0;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.1)}
.df-ov-empty{padding:40px 16px;text-align:center;color:#64748b;font-size:14px}

/* === admin overview — mint cards + responsive === */
.df-ov-card--mint .df-ov-num{color:#22c55e}
.df-ov-bar-wrap{margin-top:8px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.df-ov-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#16a34a,#22c55e)}
@media (max-width:720px){
  .df-ov{padding:6px 2px 32px}
  .df-ov-h{font-size:19px}
  .df-ov-grid{grid-template-columns:1fr 1fr;gap:10px}
  .df-ov-card{padding:13px}
  .df-ov-card--wide{grid-column:span 2}
  .df-ov-num{font-size:23px}
  .df-ov-tabs{gap:6px}
  .df-ov-tab{padding:6px 11px;font-size:12px}
  .df-ov-tools{flex-wrap:wrap;padding:12px}
  /* stacked cards instead of an overflowing table */
  .df-ov-tbl thead,.df-ov-tbl tfoot{display:none}
  .df-ov-tbl,.df-ov-tbl tbody,.df-ov-tbl tr,.df-ov-tbl td{display:block;width:100%}
  .df-ov-tbl tr{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
  .df-ov-tbl td{padding:0;border:0}
  .df-ov-tbl td[data-v]:nth-child(3),.df-ov-tbl td[data-v]:nth-child(4){display:inline-flex;align-items:baseline;gap:6px;width:auto;margin-top:8px;font-size:13px}
  .df-ov-tbl td[data-v]:nth-child(3){margin-right:18px}
  .df-ov-tbl td[data-v]:nth-child(3)::before{content:'DFT';font-size:10px;letter-spacing:.05em;color:#64748b;font-weight:600}
  .df-ov-tbl td[data-v]:nth-child(4)::before{content:'USDT';font-size:10px;letter-spacing:.05em;color:#64748b;font-weight:600}
  .df-ov-tbl td:nth-child(2){margin-top:6px}
}
@media (max-width:420px){ .df-ov-grid{grid-template-columns:1fr} .df-ov-card--wide{grid-column:span 1} }