@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  --purple:        #7C3AED;
  --purple-light:  #A855F7;
  --purple-dim:    #5B21B6;
  --purple-dark:   #3B0764;
  --purple-bg:     #1E0B3B;

  --gold:          #F59E0B;
  --gold-light:    #FCD34D;
  --gold-dark:     #B45309;

  --bg:            #0D0618;
  --bg-card:       rgba(124,58,237,0.06);
  --bg-card-hover: rgba(124,58,237,0.11);
  --border:        rgba(124,58,237,0.22);
  --border-gold:   rgba(245,158,11,0.22);
  --border-active: rgba(245,158,11,0.5);

  --text:          #F5F3FF;
  --text-muted:    rgba(245,243,255,0.42);
  --text-sub:      rgba(245,243,255,0.65);

  --green:         #10B981;
  --red:           #EF4444;

  --r-xl:          24px;
  --r-lg:          18px;
  --r-md:          12px;
  --r-sm:          8px;

  --sidebar-w:     256px;
  --nav-h:         64px;
  --safe-b:        env(safe-area-inset-bottom, 0px);
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overscroll-behavior:none;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ══════════════════════════════════════
   LAYOUT — SHELL
══════════════════════════════════════ */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ══════════════════════════════════════
   SIDEBAR (desktop)
══════════════════════════════════════ */
.sidebar{
  background:linear-gradient(180deg,#150528 0%,#1E0840 50%,#110420 100%);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;overflow-x:hidden;z-index:50;
}
.sidebar-brand{
  padding:24px 20px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
.sidebar-logo{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:grid;place-items:center;
  font-family:'Bebas Neue',cursive;font-size:20px;
  color:var(--purple-dark);flex-shrink:0;
  box-shadow:0 4px 14px rgba(245,158,11,0.3);
}
.sidebar-logo img{width:36px;height:36px;object-fit:contain;border-radius:10px}
.sidebar-name{font-family:'Bebas Neue',cursive;font-size:22px;letter-spacing:1px;color:#fff;line-height:1}
.sidebar-tag{font-size:9px;color:var(--gold);font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-top:2px}

.sidebar-nav{flex:1;padding:16px 12px}
.nav-group-label{
  font-size:9px;font-weight:900;letter-spacing:2.5px;
  text-transform:uppercase;color:rgba(255,255,255,0.18);
  padding:14px 8px 6px;
}
.nav-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:700;color:var(--text-sub);
  transition:all .18s;border:1px solid transparent;
  margin-bottom:2px;
}
.nav-link:hover{background:rgba(124,58,237,0.15);color:var(--purple-light);border-color:var(--border)}
.nav-link.active{background:rgba(245,158,11,0.1);color:var(--gold);border-color:var(--border-gold)}
.nav-link svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sidebar-user{
  padding:16px 20px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sidebar-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:grid;place-items:center;
  font-weight:900;font-size:16px;color:var(--purple-dark);
}
.sidebar-uname{font-size:13px;font-weight:800;color:#fff;line-height:1.2}
.sidebar-urole{font-size:10px;color:var(--gold);font-weight:800;letter-spacing:1px;text-transform:uppercase}

/* ══════════════════════════════════════
   TOPBAR (mobile)
══════════════════════════════════════ */
.topbar{
  display:none;
  position:fixed;top:0;left:0;right:0;height:56px;
  background:rgba(13,6,24,0.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 16px;z-index:200;
  align-items:center;justify-content:space-between;
}
.topbar-brand{font-family:'Bebas Neue',cursive;font-size:22px;color:#fff}
.topbar-brand span{color:var(--gold)}
.topbar-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:grid;place-items:center;
  font-weight:900;font-size:14px;color:var(--purple-dark);
}

/* ══════════════════════════════════════
   BOTTOM NAV (mobile)
══════════════════════════════════════ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--nav-h) + var(--safe-b));
  background:rgba(13,6,24,0.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  padding-bottom:var(--safe-b);z-index:200;
}
.bnav{display:flex;height:var(--nav-h);align-items:stretch}
.bnav-a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text-muted);font-size:9.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;
  border-top:2px solid transparent;transition:all .2s;
}
.bnav-a:hover,.bnav-a.active{color:var(--gold);border-top-color:var(--gold);background:rgba(245,158,11,0.05)}
.bnav-a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════════════════════════
   PAGE CONTENT
══════════════════════════════════════ */
.page{padding:28px;overflow-x:hidden}
.page-header{margin-bottom:24px}
.page-title{font-family:'Bebas Neue',cursive;font-size:32px;color:#fff;letter-spacing:.5px;line-height:1}
.page-title span{color:var(--gold)}
.page-sub{font-size:14px;color:var(--text-muted);font-weight:600;margin-top:4px}

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:22px;
  transition:border-color .2s;
}
.card:hover{border-color:rgba(124,58,237,0.4)}
.card-gold{border-color:var(--border-gold);background:rgba(245,158,11,0.05)}
.card-title{font-family:'Bebas Neue',cursive;font-size:20px;color:#fff;letter-spacing:.5px;margin-bottom:14px}
.card-title span{color:var(--gold)}

/* ══════════════════════════════════════
   STAT GRID
══════════════════════════════════════ */
.stat-card{
  background:rgba(124,58,237,0.08);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:20px;
  position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple),var(--gold));
}
.stat-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:8px}
.stat-value{font-family:'Bebas Neue',cursive;font-size:40px;color:var(--gold);line-height:1}
.stat-sub{font-size:12px;color:var(--text-muted);font-weight:600;margin-top:4px}

/* ══════════════════════════════════════
   HERO (homepage)
══════════════════════════════════════ */
.hero{
  display:grid;grid-template-columns:1fr 280px;gap:28px;
  background:linear-gradient(135deg,#1E0840 0%,#2D0F5C 45%,#180535 100%);
  border:1px solid var(--border-gold);
  border-radius:var(--r-xl);padding:36px;
  margin-bottom:24px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% 50%,rgba(245,158,11,0.08) 0%,transparent 60%);
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);
  color:var(--gold);padding:5px 14px;border-radius:40px;
  font-size:11px;font-weight:800;letter-spacing:1px;margin-bottom:18px;
}
.hero h1{font-family:'Bebas Neue',cursive;font-size:60px;line-height:1;color:#fff;margin-bottom:12px}
.hero h1 span{color:var(--gold)}
.hero-desc{font-size:14px;color:var(--text-sub);line-height:1.65;max-width:480px;font-weight:600;margin-bottom:22px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.hero-stats{display:flex;gap:22px;flex-wrap:wrap}
.hstat{display:flex;flex-direction:column;gap:2px}
.hstat-n{font-family:'Bebas Neue',cursive;font-size:28px;color:var(--gold);line-height:1}
.hstat-l{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.hero-side{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.mascot-img{max-width:190px;margin:0 auto;filter:drop-shadow(0 8px 24px rgba(124,58,237,0.5))}
.hero-panel{
  background:rgba(13,6,24,0.5);backdrop-filter:blur(10px);
  border:1px solid rgba(245,158,11,0.18);border-radius:var(--r-lg);padding:16px;
}
.hpanel-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:13px;
}
.hpanel-row:last-child{border-bottom:none}
.hpanel-key{color:var(--text-muted);font-weight:600}
.hpanel-val{color:var(--gold);font-weight:800}

/* ══════════════════════════════════════
   FEATURE CARDS
══════════════════════════════════════ */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.feat-card{
  background:rgba(124,58,237,0.06);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:22px;transition:all .22s;
}
.feat-card:hover{border-color:var(--border-gold);background:rgba(124,58,237,0.1);transform:translateY(-2px)}
.feat-icon{font-size:28px;margin-bottom:12px}
.feat-title{font-family:'Bebas Neue',cursive;font-size:20px;color:#fff;letter-spacing:.5px;margin-bottom:6px}
.feat-desc{font-size:13px;color:var(--text-sub);line-height:1.6;font-weight:600}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:800;font-family:'Nunito',sans-serif;
  cursor:pointer;transition:all .18s;border:none;text-decoration:none;letter-spacing:.2px;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--purple-dark)}
.btn-primary:hover{background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:0 6px 20px rgba(245,158,11,0.35);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-sub)}
.btn-ghost:hover{background:rgba(124,58,237,0.15);color:var(--purple-light);border-color:var(--border)}
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--purple-dim));color:#fff}
.btn-purple:hover{box-shadow:0 6px 20px rgba(124,58,237,0.4);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,#EF4444,#B91C1C);color:#fff}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.field input,.field select,.field textarea{
  background:rgba(124,58,237,0.08);
  border:1.5px solid var(--border);border-radius:var(--r-md);
  color:var(--text);padding:10px 14px;
  font-size:14px;font-family:'Nunito',sans-serif;font-weight:600;
  transition:border-color .18s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(245,158,11,0.05);
}
.field input[type=color]{padding:4px 8px;height:42px;cursor:pointer}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F59E0B'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.field input[type=color]{padding:4px;cursor:pointer}

/* ══════════════════════════════════════
   TABLES
══════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse}
thead th{
  padding:10px 14px;text-align:left;
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-muted);background:rgba(124,58,237,0.1);
  border-bottom:1px solid var(--border);
}
tbody td{
  padding:13px 14px;border-bottom:1px solid rgba(124,58,237,0.1);
  font-size:13.5px;color:var(--text-sub);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(245,158,11,0.04)}

/* ══════════════════════════════════════
   BADGES / PILLS
══════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:800;white-space:nowrap;
}
.badge-gold{background:rgba(245,158,11,0.14);color:var(--gold);border:1px solid rgba(245,158,11,0.28)}
.badge-purple{background:rgba(124,58,237,0.18);color:var(--purple-light);border:1px solid var(--border)}
.badge-green{background:rgba(16,185,129,0.14);color:#34D399;border:1px solid rgba(16,185,129,0.28)}
.badge-red{background:rgba(239,68,68,0.14);color:#F87171;border:1px solid rgba(239,68,68,0.2)}
.badge-muted{background:rgba(255,255,255,0.06);color:var(--text-muted)}

/* ══════════════════════════════════════
   ALERTS
══════════════════════════════════════ */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:700;margin-bottom:18px;
}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert-success{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.25);color:#34D399}
.alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#F87171}
.alert-info{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);color:var(--gold)}

/* ══════════════════════════════════════
   GRIDS
══════════════════════════════════════ */
.g{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ══════════════════════════════════════
   AUTH
══════════════════════════════════════ */
.auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse at 20% 20%,rgba(124,58,237,0.25) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 80%,rgba(245,158,11,0.1) 0%,transparent 50%),
    var(--bg);
}
.auth-box{
  width:100%;max-width:420px;
  background:rgba(124,58,237,0.07);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:38px 34px;position:relative;overflow:hidden;
}
.auth-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple),var(--gold),var(--purple-light));
}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo-mark{
  width:68px;height:68px;border-radius:20px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:grid;place-items:center;
  box-shadow:0 8px 28px rgba(245,158,11,0.35);
  font-size:32px;
}
.auth-logo-mark img{width:52px;height:52px;object-fit:contain;border-radius:12px}
.auth-title{font-family:'Bebas Neue',cursive;font-size:34px;color:#fff;line-height:1}
.auth-title span{color:var(--gold)}
.auth-sub{font-size:13px;color:var(--text-muted);font-weight:600;margin-top:4px}
.auth-footer{text-align:center;margin-top:20px;font-size:13px;color:var(--text-muted);font-weight:600}
.auth-link{color:var(--gold);font-weight:800}
.auth-link:hover{text-decoration:underline}

/* ══════════════════════════════════════
   MARKET — player cards
══════════════════════════════════════ */
.player-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:18px 16px;
  text-align:center;transition:all .22s;position:relative;overflow:hidden;
}
.player-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple-dim),var(--purple-light));
}
.player-card:hover{border-color:var(--border-active);transform:translateY(-3px);box-shadow:0 14px 36px rgba(124,58,237,0.2)}
.player-card.owned{border-color:rgba(16,185,129,0.35)}
.player-card.owned::before{background:linear-gradient(90deg,#065F46,#10B981)}
.player-jersey{margin:0 auto 10px;width:68px;height:78px}
.player-name{font-weight:900;font-size:14.5px;color:#fff;margin-bottom:2px}
.player-club{font-size:11.5px;color:var(--text-muted);font-weight:700;margin-bottom:8px}
.player-price{font-family:'Bebas Neue',cursive;font-size:24px;color:var(--gold);display:block;margin-bottom:2px}
.player-pts{font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:12px}

/* ══════════════════════════════════════
   RANKING — podium
══════════════════════════════════════ */
.podium-card{
  border-radius:var(--r-xl);padding:26px 20px;text-align:center;
  border:1px solid;
}
.podium-1{background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.35)}
.podium-2{background:rgba(192,192,192,0.06);border-color:rgba(192,192,192,0.25)}
.podium-3{background:rgba(205,127,50,0.06);border-color:rgba(205,127,50,0.25)}
.podium-medal{font-size:42px;margin-bottom:8px}
.podium-pos{font-family:'Bebas Neue',cursive;font-size:48px;line-height:1}
.podium-pts{font-family:'Bebas Neue',cursive;font-size:36px;margin-top:10px}

/* ══════════════════════════════════════
   LINEUP — 3D PERSPECTIVE PITCH
══════════════════════════════════════ */

/* ── Campo moderno flat ── */
.field-bg {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  background: #0d1a0e;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Faixa de placar no topo */
.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.6);
  letter-spacing: .5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.field-header-badge {
  background: var(--gold);
  color: #1a0a3a;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 1px;
}

/* ── Gramado flat sem perspectiva 3D ── */
.field-pitch {
  position: relative;
  flex: 1;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0.07) 0px,
      rgba(0,0,0,0.07) 44px,
      transparent 44px,
      transparent 88px
    ),
    linear-gradient(180deg,
      #1a5c2c 0%, #1e6e34 12%, #1a5c2c 24%,
      #1e6e34 36%, #1a5c2c 48%, #1e6e34 60%,
      #1a5c2c 72%, #1e6e34 84%, #1a5c2c 100%
    );
  min-height: 480px;
  padding: 16px 8px 24px;
}

/* Linhas do campo SVG */
.field-pitch::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 520' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cstyle%3Eline,rect,ellipse,circle%7Bfill:none;stroke:rgba(255,255,255,0.45);stroke-width:1.6%7D%3C/style%3E%3C/defs%3E%3Crect x='10' y='10' width='340' height='500'/%3E%3Cline x1='10' y1='260' x2='350' y2='260'/%3E%3Ccircle cx='180' cy='260' r='50'/%3E%3Ccircle cx='180' cy='260' r='2.5' fill='rgba(255,255,255,0.5)' stroke='none'/%3E%3Crect x='105' y='10' width='150' height='72'/%3E%3Crect x='142' y='10' width='76' height='28'/%3E%3Crect x='105' y='438' width='150' height='72'/%3E%3Crect x='142' y='482' width='76' height='28'/%3E%3Ccircle cx='180' cy='78' r='2.5' fill='rgba(255,255,255,0.5)' stroke='none'/%3E%3Ccircle cx='180' cy='442' r='2.5' fill='rgba(255,255,255,0.5)' stroke='none'/%3E%3Cellipse cx='180' cy='82' rx='50' ry='50' clip-path='url(%23at)'/%3E%3CclipPath id='at'%3E%3Crect x='0' y='82' width='360' height='52'/%3E%3C/clipPath%3E%3Cellipse cx='180' cy='438' rx='50' ry='50' clip-path='url(%23ab)'/%3E%3CclipPath id='ab'%3E%3Crect x='0' y='370' width='360' height='70'/%3E%3C/clipPath%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Brilho no topo do gramado */
.field-pitch::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Rows de jogadores ── */
.field-rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 440px;
  justify-content: space-between;
  gap: 4px;
}

.field-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  flex: 1;
}

/* ── Player card moderno ── */
.starter-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  cursor: default;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  min-width: 68px;
}
.starter-slot:hover { transform: translateY(-6px) scale(1.08); }

/* Card da camisa — maior */
.starter-jersey-wrap {
  position: relative;
  width: 64px;
  height: 72px;
  background: rgba(0,0,0,0.6);
  border-radius: 12px 12px 0 0;
  border: 1.5px solid rgba(255,255,255,0.16);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}

.starter-jersey-img {
  width: 50px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7));
}

/* Badge capitão */
.captain-star {
  position: absolute;
  top: -9px;
  right: -9px;
  background: var(--gold);
  color: #1a0a3a;
  font-size: 9px;
  font-weight: 900;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(0,0,0,0.5);
  box-shadow: 0 2px 10px rgba(245,158,11,0.8);
  z-index: 2;
  letter-spacing: 0;
}

/* Info do jogador */
.starter-info {
  background: rgba(8,12,8,0.92);
  border: 1.5px solid rgba(255,255,255,0.13);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 3px 5px 5px;
  width: 64px;
  text-align: center;
}
.starter-nm {
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
  line-height: 1.25;
  display: block;
}
.starter-club {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .2px;
  display: block;
  line-height: 1.2;
}
.starter-pts {
  font-size: 9px;
  font-weight: 900;
  color: var(--gold);
  display: block;
  line-height: 1.3;
}

/* Badge posição */
.starter-pos-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .4px;
  padding: 1px 5px;
  border-radius: 4px;
  z-index: 3;
  opacity: .92;
}

/* ── Placas de patrocinador no campo ── */
.field-sponsor-bar {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
/* Placa lateral esquerda */
.field-sponsor-bar.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  width: 120px;
  margin-left: -42px;
}
/* Placa lateral direita */
.field-sponsor-bar.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  width: 120px;
  margin-right: -42px;
}
/* Placa fundo (linha de gol inferior) */
.field-sponsor-bar.bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  justify-content: space-around;
}
.field-sponsor-plaque {
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 22px;
  backdrop-filter: blur(4px);
}
.field-sponsor-plaque img {
  max-width: 70px;
  max-height: 16px;
  object-fit: contain;
  filter: brightness(1.1) contrast(1.05);
}
.field-sponsor-plaque-text {
  font-size: 9px;
  font-weight: 900;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ── Placeholder campo vazio ── */
.field-empty {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  gap: 10px;
}
.field-empty p {
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  font-weight: 700;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .field-pitch { min-height: 420px; padding: 10px 4px 56px; }
  .starter-slot { min-width: 56px; }
  .starter-jersey-wrap { width: 54px; height: 60px; }
  .starter-jersey-img  { width: 42px; height: 50px; }
  .starter-info { width: 54px; }
  .starter-nm   { font-size: 8px; }
  .starter-club { font-size: 7px; }
  .field-sponsor-bar.left,
  .field-sponsor-bar.right { display: none; }
}

/* ══════════════════════════════════════
   PROFILE — team logo box
══════════════════════════════════════ */
.team-logo-box{
  width:72px;height:72px;border-radius:18px;
  display:grid;place-items:center;
  font-family:'Bebas Neue',cursive;font-size:20px;color:#fff;flex-shrink:0;
  border:2px solid rgba(245,158,11,0.2);
}
.team-logo-box img{width:62px;height:62px;object-fit:contain;border-radius:14px}

/* ══════════════════════════════════════
   ADMIN bar
══════════════════════════════════════ */
.admin-notice{
  background:rgba(245,158,11,0.08);border:1px solid var(--border-gold);
  border-radius:var(--r-md);padding:10px 16px;margin-bottom:20px;
  font-size:13px;font-weight:700;color:var(--gold);
  display:flex;align-items:center;gap:8px;
}

/* ══════════════════════════════════════
   UTILS
══════════════════════════════════════ */
.muted{color:var(--text-muted);font-size:13px;font-weight:600}
.text-gold{color:var(--gold)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.flex-wrap{flex-wrap:wrap}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.w-full{width:100%}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:768px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar{display:flex}
  .bottom-nav{display:block}
  .page{padding:72px 14px calc(var(--nav-h) + var(--safe-b) + 12px)}
  .hero{grid-template-columns:1fr;padding:22px 18px;gap:18px}
  .hero h1{font-size:48px}
  .hero-stats{gap:14px}
  .features-grid,.g-3,.g-4{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
  .g-2.keep2{grid-template-columns:repeat(2,1fr)}
  .g-auto{grid-template-columns:repeat(2,1fr)}
  .hide-m{display:none}
  .auth-box{padding:28px 20px}
}
@media(max-width:420px){
  .g-auto{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   ADMIN CMS — missing classes
══════════════════════════════════════ */
.section-title{font-family:'Bebas Neue',cursive;font-size:24px;letter-spacing:1px;color:#fff}
.section-title span{color:var(--gold)}
.grid{display:grid}
.grid-2{grid-template-columns:repeat(2,1fr)}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.form-group input:not([type=color]):not([type=file]):not([type=checkbox]),
.form-group select,
.form-group textarea{
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  border-radius:var(--r-md);padding:10px 14px;
  color:var(--text);font-size:14px;font-family:inherit;width:100%;
  transition:border-color .18s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--purple-light);background:rgba(124,58,237,0.07);
}
.small{font-size:12px;color:var(--text-muted);font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.secondary{
  background:rgba(255,255,255,0.06);border:1px solid var(--border);
  color:var(--text-sub);border-radius:var(--r-md);padding:8px 14px;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn.secondary:hover{background:rgba(124,58,237,0.15);border-color:var(--border-active);color:#fff}
@media(max-width:768px){
  .grid-2{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   LINEUP — formation selector
══════════════════════════════════════ */
.formation-picker{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
}
.formation-btn{
  padding:5px 13px;border-radius:20px;
  font-size:12px;font-weight:800;letter-spacing:.5px;
  border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text-sub);
  cursor:pointer;transition:all .18s;
}
.formation-btn:hover{border-color:var(--purple-light);color:#fff}
.formation-btn.active{
  background:rgba(245,158,11,0.12);
  border-color:var(--gold);color:var(--gold);
}