/* =====================================================================
   WILDFLOVER — Design System v4.0
   Premium, optimized, GPU-accelerated. No backdrop-filter on body.
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100vh;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg);overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea,button{font:inherit}
ul,ol{list-style:none}

/* ---------- Tokens ---------- */
:root{
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Surface palette — deep, refined */
  --bg:        #07080d;
  --bg-1:      #0c0e15;
  --bg-2:      #11141d;
  --bg-3:      #181c28;
  --surface:   rgba(20, 24, 35, .8);
  --surface-2: rgba(28, 33, 48, .85);

  --border:        rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.12);
  --border-hover:  rgba(255,255,255,.18);

  /* Text */
  --text:      #e8eaf2;
  --text-mid:  #a8acbe;
  --text-dim:  #6c7186;
  --text-mute: #4a4f63;

  /* Accent — Gold (LoL-vari) + Cyan electric */
  --gold:        #e6c275;
  --gold-bright: #ffd98a;
  --gold-deep:   #b18a3d;

  --cyan:        #5ee0d6;
  --cyan-bright: #9ff0e8;

  --purple:      #8b6cff;
  --purple-bright:#b39bff;

  --danger:  #ff5f7e;
  --success: #5ed68a;
  --warning: #ffb049;

  /* Radius / Elevation */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 10px 30px -10px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --sh-3: 0 24px 60px -20px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05) inset;
  --sh-glow: 0 0 0 1px rgba(230,194,117,.18), 0 12px 40px -10px rgba(230,194,117,.35);

  /* Motion */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t:      220ms cubic-bezier(.4,0,.2,1);
  --t-slow: 420ms cubic-bezier(.4,0,.2,1);
  --t-spring: 600ms cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --container: 1280px;
  --container-narrow: 1080px;
  --nav-h: 68px;
}

/* ---------- Animated ambient background (cheap, GPU only) ---------- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 700px at 8% -8%, rgba(139,108,255,.10), transparent 60%),
    radial-gradient(900px 700px at 105% 0%, rgba(94,224,214,.08), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(230,194,117,.08), transparent 60%),
    var(--bg);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
  font-weight:700;
  line-height:1.1;
  color:#f3f4fb;
}
h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:-0.035em}
h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;letter-spacing:-0.025em}
h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:600}
h4{font-size:1.1rem;font-weight:600}
p{color:var(--text-mid)}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--text-mid);line-height:1.6;max-width:62ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);
  font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
  padding:.45rem .85rem;
  border-radius:var(--r-pill);
  background: linear-gradient(180deg, rgba(230,194,117,.10), rgba(230,194,117,.04));
  border: 1px solid rgba(230,194,117,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 12px var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.4; transform:scale(.7)}
}

.text-gold{color:var(--gold-bright)}
.text-cyan{color:var(--cyan)}
.text-dim{color:var(--text-dim)}
.text-mid{color:var(--text-mid)}
.text-muted{color:var(--text-mute)}
.text-center{text-align:center}
.text-balance{text-wrap:balance}
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}

.gradient-text{
  background: linear-gradient(120deg, #fff 0%, var(--gold-bright) 45%, var(--cyan-bright) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gradient-gold{
  background: linear-gradient(120deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem;width:100%}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 1.5rem;width:100%}
.section{padding:5rem 0; position:relative}
.section-sm{padding:3rem 0}
.section-lg{padding:7rem 0}

.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.gap-4{gap:2rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mb-5{margin-bottom:3rem}
.w-full{width:100%}

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; inset-inline:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background: rgba(7,8,13,.65);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.navbar.scrolled{
  background: rgba(7,8,13,.88);
  border-bottom-color: var(--border);
}
.navbar .container{display:flex; align-items:center; justify-content:space-between; gap:2rem}
.nav-brand{display:flex; align-items:center; gap:.75rem; font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; font-size:1.05rem; color:var(--text)}
.nav-brand img{width:34px; height:34px; object-fit:contain}
.nav-brand span{background: linear-gradient(120deg, var(--gold-bright), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}

.nav-links{display:flex; align-items:center; gap:.25rem}
.nav-link{
  position:relative; padding:.55rem .9rem;
  font-size:.92rem; font-weight:500;
  color:var(--text-mid);
  border-radius:var(--r-sm);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.04)}
.nav-link.active{color:var(--gold-bright)}
.nav-link.active::after{
  content:""; position:absolute; left:50%; bottom:-2px;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  transform:translateX(-50%);
  box-shadow:0 0 10px var(--gold);
}

.nav-actions{display:flex; align-items:center; gap:.6rem}

/* Avatar / Bell */
.nav-bell{
  position:relative; width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%; color:var(--text-mid);
  border:1px solid var(--border);
  transition: all var(--t-fast);
}
.nav-bell:hover{color:var(--gold-bright); border-color:var(--border-hover); background:rgba(255,255,255,.03)}
.nav-bell svg{width:18px;height:18px}
.nav-bell .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px var(--danger)}

.nav-avatar{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem .55rem .35rem .35rem;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  transition:all var(--t-fast);
}
.nav-avatar:hover{border-color:var(--border-hover); background:rgba(255,255,255,.04)}
.nav-avatar .av{
  width:30px; height:30px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center;
  color:#1a1300; font-weight:800; font-size:.78rem;
}
.nav-avatar .uname{font-size:.85rem; font-weight:500; color:var(--text)}

/* Mobile toggle */
.nav-toggle{display:none; width:38px; height:38px; place-items:center; border-radius:var(--r-sm); border:1px solid var(--border)}

/* ---------- Buttons ---------- */
.btn{
  --bg:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  --color: var(--text);
  --border-c: var(--border-strong);

  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.7rem 1.15rem; font-size:.92rem; font-weight:600; letter-spacing:-0.01em;
  color:var(--color); background:var(--bg);
  border:1px solid var(--border-c);
  border-radius:var(--r-sm);
  cursor:pointer; user-select:none;
  transition: transform var(--t-fast), box-shadow var(--t), border-color var(--t), background var(--t), color var(--t-fast);
  white-space:nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  will-change: transform;
}
.btn:hover{transform:translateY(-1px); border-color:var(--border-hover)}
.btn:active{transform:translateY(0); transition-duration:60ms}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.btn svg{width:16px; height:16px}

.btn-primary{
  --color:#1a1300;
  background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  border-color: rgba(255,217,138,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 0 0 1px rgba(230,194,117,.3),
    0 12px 30px -10px rgba(230,194,117,.5);
}
.btn-primary:hover{
  filter:brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 0 0 1px rgba(255,217,138,.5),
    0 16px 38px -10px rgba(230,194,117,.65);
}

.btn-secondary{
  background: linear-gradient(180deg, rgba(94,224,214,.12), rgba(94,224,214,.04));
  border-color: rgba(94,224,214,.25);
  color: var(--cyan-bright);
}
.btn-secondary:hover{border-color:rgba(94,224,214,.45); box-shadow:0 0 30px -10px rgba(94,224,214,.4)}

.btn-ghost{ background:transparent; border-color:var(--border) }
.btn-ghost:hover{ background: rgba(255,255,255,.04); border-color: var(--border-hover) }

.btn-danger{ background: linear-gradient(180deg, rgba(255,95,126,.16), rgba(255,95,126,.06)); border-color: rgba(255,95,126,.3); color: #ffb1c0 }
.btn-danger:hover{ border-color: rgba(255,95,126,.55); box-shadow: 0 0 30px -10px rgba(255,95,126,.4) }

.btn-sm{padding:.45rem .8rem; font-size:.82rem; border-radius:var(--r-xs)}
.btn-lg{padding:.95rem 1.5rem; font-size:1rem; border-radius:var(--r-md)}
.btn-xl{padding:1.1rem 2rem; font-size:1.05rem; border-radius:var(--r-md)}
.btn-block{display:flex; width:100%}
.btn-icon{padding:.55rem; aspect-ratio:1}

/* Loading state */
.btn[data-busy="true"]{pointer-events:none; opacity:.7}
.btn[data-busy="true"]::after{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin .7s linear infinite; margin-left:.25rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Cards ---------- */
.card{
  position:relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.5rem;
  box-shadow: var(--sh-2);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.card-hover{ transition: border-color var(--t), transform var(--t), box-shadow var(--t) }
.card-hover:hover{ border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--sh-3) }

.card-glow{
  position:relative; isolation:isolate;
}
.card-glow::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(135deg, rgba(230,194,117,.4), transparent 40%, rgba(94,224,214,.3) 100%);
  z-index:-1; opacity:0; transition: opacity var(--t);
  filter: blur(8px);
}
.card-glow:hover::before{opacity:.55}

/* Stat card */
.stat-card{
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.3rem 1.4rem;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition: all var(--t);
}
.stat-card:hover{ border-color: var(--border-hover); transform: translateY(-2px) }
.stat-card .stat-label{ font-size:.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; font-weight:600 }
.stat-card .stat-value{ font-family:var(--font-display); font-size:2rem; font-weight:800; letter-spacing:-0.03em; color:var(--text); line-height:1 }
.stat-card .stat-meta{ font-size:.8rem; color:var(--text-mid) }
.stat-card .stat-icon{
  position:absolute; top:1rem; right:1rem; width:36px; height:36px;
  border-radius:var(--r-sm); display:grid; place-items:center;
  background: rgba(230,194,117,.08); color: var(--gold-bright);
  border:1px solid rgba(230,194,117,.18);
}
.stat-card{position:relative}

/* ---------- Forms ---------- */
.form-group{margin-bottom:1.1rem}
.form-row{display:grid; gap:1rem; margin-bottom:1.1rem}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}

.form-label{
  display:flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:600; color:var(--text-mid);
  margin-bottom:.5rem; letter-spacing:-0.005em;
}
.form-label .required{color:var(--danger); font-weight:700}

.form-input, .form-select, .form-textarea{
  width:100%; padding:.78rem 1rem;
  background:rgba(7,8,13,.6);
  color:var(--text); font-size:.95rem;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t);
  outline:none;
}
.form-input::placeholder, .form-textarea::placeholder{color:var(--text-mute)}
.form-input:hover, .form-select:hover, .form-textarea:hover{border-color:var(--border-hover)}
.form-input:focus, .form-select:focus, .form-textarea:focus{
  border-color: var(--gold);
  background:rgba(7,8,13,.85);
  box-shadow: 0 0 0 4px rgba(230,194,117,.10);
}
.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 4px rgba(255,95,126,.10);
}
.form-textarea{min-height:120px; resize:vertical; font-family:inherit}
.form-select{appearance:none; padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a8acbe' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 1rem center;
}

.form-error{margin-top:.4rem; font-size:.8rem; color:#ff95a8; display:flex; align-items:center; gap:.35rem}
.form-error::before{content:"⚠"; font-size:.85rem}
.form-hint{margin-top:.4rem; font-size:.78rem; color:var(--text-dim)}

/* Input with leading icon */
.input-group{position:relative}
.input-group .form-input{padding-right:2.6rem}
.input-group svg{position:absolute; right:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-mute); pointer-events:none}

.input-group-suffix{position:relative}
.input-group-suffix .form-input{padding-right:3rem}
.suffix-btn{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--r-xs); color:var(--text-mid);
  transition: all var(--t-fast);
}
.suffix-btn:hover{color:var(--gold-bright); background:rgba(255,255,255,.04)}
.suffix-btn svg{width:16px; height:16px}

/* Slug field */
.slug-field{position:relative}
.slug-prefix{
  position:absolute; left:1px; top:1px; bottom:1px;
  display:flex; align-items:center; padding:0 .9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.1));
  color:var(--text-dim); font-family:var(--font-mono); font-size:.85rem;
  border-right:1px solid var(--border);
  border-radius: calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px);
  pointer-events:none; user-select:none;
}
.slug-field .form-input{padding-left:9.5rem}

/* Checkbox / Switch */
.form-check{display:flex; align-items:flex-start; gap:.65rem; font-size:.88rem; color:var(--text-mid)}
.form-check input[type="checkbox"]{
  appearance:none; width:18px; height:18px;
  border:1.5px solid var(--border-strong); border-radius:5px;
  background:rgba(0,0,0,.4); cursor:pointer; flex-shrink:0;
  margin-top:2px; position:relative;
  transition: all var(--t-fast);
}
.form-check input[type="checkbox"]:hover{border-color:var(--border-hover)}
.form-check input[type="checkbox"]:checked{background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold)}
.form-check input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px; border:solid #1a1300; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.form-switch{position:relative; width:42px; height:24px; cursor:pointer; flex-shrink:0}
.form-switch input{position:absolute; opacity:0; pointer-events:none}
.form-switch .track{
  position:absolute; inset:0; border-radius:999px;
  background: var(--bg-3); border:1px solid var(--border);
  transition: all var(--t);
}
.form-switch .thumb{
  position:absolute; left:3px; top:3px;
  width:16px; height:16px; border-radius:50%;
  background: linear-gradient(180deg, #fff, #d8d8e0);
  transition: all var(--t-spring);
}
.form-switch input:checked ~ .track{ background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border-color: var(--gold) }
.form-switch input:checked ~ .thumb{ left:21px; background: linear-gradient(180deg, #fff, #fde8b0) }

/* Password strength */
.password-strength{margin-top:.6rem}
.password-strength-bar{display:flex; gap:4px; height:4px}
.password-strength-bar span{flex:1; background:rgba(255,255,255,.06); border-radius:999px; transition:background var(--t)}
.password-strength-bar[data-strength="1"] span:nth-child(-n+1){background:var(--danger)}
.password-strength-bar[data-strength="2"] span:nth-child(-n+2){background:#ff944a}
.password-strength-bar[data-strength="3"] span:nth-child(-n+3){background:var(--warning)}
.password-strength-bar[data-strength="4"] span{background:var(--success)}
.password-strength-text{display:flex; justify-content:space-between; margin-top:.4rem; font-size:.74rem; color:var(--text-dim)}

/* Role pick */
.role-pick input{display:none}
.role-pick-card{
  text-align:center; padding:.65rem .4rem;
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  background: var(--bg-2); color:var(--text-mid);
  font-size:.82rem; font-weight:500;
  cursor:pointer; transition: all var(--t-fast);
}
.role-pick:hover .role-pick-card{border-color:var(--border-hover); color:var(--text); transform:translateY(-1px)}
.role-pick input:checked + .role-pick-card{
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(230,194,117,.18), rgba(230,194,117,.04));
  color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(230,194,117,.3), 0 6px 20px -10px rgba(230,194,117,.5);
}

/* ---------- Alerts ---------- */
.alert{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.95rem 1.1rem;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-strong);
  margin-bottom:1.25rem;
  font-size:.9rem;
}
.alert svg{width:20px; height:20px; flex-shrink:0; margin-top:1px}
.alert-success{ background:rgba(94,214,138,.08); border-color:rgba(94,214,138,.25); color:#a9efc1 }
.alert-danger { background:rgba(255,95,126,.08);  border-color:rgba(255,95,126,.25);  color:#ffb1c0 }
.alert-warning{ background:rgba(255,176,73,.08);  border-color:rgba(255,176,73,.25);  color:#ffd49a }
.alert-info   { background:rgba(94,224,214,.08);  border-color:rgba(94,224,214,.25);  color:#a4ece4 }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .65rem; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  background:rgba(255,255,255,.06); color:var(--text-mid);
  border:1px solid var(--border-strong);
}
.badge-gold  { background:rgba(230,194,117,.12); color:var(--gold-bright); border-color:rgba(230,194,117,.3) }
.badge-cyan  { background:rgba(94,224,214,.12);  color:var(--cyan-bright); border-color:rgba(94,224,214,.3) }
.badge-accent{ background:rgba(139,108,255,.14); color:var(--purple-bright); border-color:rgba(139,108,255,.3) }
.badge-success{ background:rgba(94,214,138,.12); color:#a9efc1; border-color:rgba(94,214,138,.3) }
.badge-danger{ background:rgba(255,95,126,.12); color:#ffb1c0; border-color:rgba(255,95,126,.3) }

/* Rank tier badges */
.badge-tier-IRON       { background:rgba(120,120,140,.15); color:#c2c2cf; border-color:rgba(120,120,140,.3) }
.badge-tier-BRONZE     { background:rgba(176,108,68,.15); color:#e8b189; border-color:rgba(176,108,68,.3) }
.badge-tier-SILVER     { background:rgba(190,200,215,.12); color:#dde3ee; border-color:rgba(190,200,215,.25) }
.badge-tier-GOLD       { background:rgba(230,194,117,.15); color:var(--gold-bright); border-color:rgba(230,194,117,.3) }
.badge-tier-PLATINUM   { background:rgba(120,200,220,.12); color:#a8e4f0; border-color:rgba(120,200,220,.25) }
.badge-tier-EMERALD    { background:rgba(80,200,150,.14); color:#a0ecc6; border-color:rgba(80,200,150,.3) }
.badge-tier-DIAMOND    { background:rgba(140,180,255,.14); color:#bcd0ff; border-color:rgba(140,180,255,.3) }
.badge-tier-MASTER     { background:rgba(190,120,220,.14); color:#dfb1f1; border-color:rgba(190,120,220,.3) }
.badge-tier-GRANDMASTER{ background:rgba(220,80,100,.14); color:#ffacb8; border-color:rgba(220,80,100,.3) }
.badge-tier-CHALLENGER { background: linear-gradient(135deg, rgba(230,194,117,.2), rgba(94,224,214,.2)); color:#ffe5a8; border-color:rgba(230,194,117,.4) }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: calc(var(--nav-h) + 5rem) 0 5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background-position:center; background-size:cover;
  opacity:.35;
  filter: saturate(.85);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, transparent 0%, var(--bg) 90%),
    linear-gradient(180deg, transparent 0%, var(--bg) 100%);
}
.hero-content{ max-width:780px; margin:0 auto; text-align:center; position:relative; z-index:1 }
.hero-title{
  font-size:clamp(2.8rem, 6vw, 4.6rem);
  font-weight:800; letter-spacing:-0.04em; line-height:1.02;
  margin-bottom:1.25rem;
}
.hero-sub{
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  color:var(--text-mid);
  max-width:60ch; margin:0 auto 2rem; line-height:1.6;
}
.hero-actions{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}

.hero-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  margin-top:4rem; padding:1.5rem 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.hero-stat{
  text-align:center; padding:.5rem 1rem;
  border-right:1px solid var(--border);
}
.hero-stat:last-child{border-right:0}
.hero-stat-num{
  display:block; font-family:var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.4rem); font-weight:800;
  letter-spacing:-0.03em;
  background: linear-gradient(120deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stat-label{font-size:.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; font-weight:600; margin-top:.3rem; display:block}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden; padding:1.5rem 0;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{ display:flex; gap:2rem; animation: scroll 40s linear infinite; will-change:transform }
.marquee-item{
  flex-shrink:0; width:280px; height:160px;
  border-radius:var(--r-md);
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.marquee-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,8,13,.9) 100%);
}
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - 1rem))} }

/* ---------- Feature cards ---------- */
.feature-card{
  position:relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.75rem;
  transition: all var(--t);
  overflow:hidden;
}
.feature-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; transition: opacity var(--t);
}
.feature-card:hover{border-color:var(--border-hover); transform:translateY(-4px); box-shadow:var(--sh-3)}
.feature-card:hover::before{opacity:1}
.feature-icon{
  width:48px; height:48px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(230,194,117,.15), rgba(230,194,117,.03));
  border:1px solid rgba(230,194,117,.2);
  color:var(--gold-bright); margin-bottom:1.1rem;
}
.feature-icon svg{width:22px; height:22px}
.feature-title{font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--text)}
.feature-desc{color:var(--text-mid); font-size:.92rem; line-height:1.6}

/* ---------- Section header ---------- */
.section-head{ text-align:center; max-width:680px; margin:0 auto 3rem }
.section-head .eyebrow{margin-bottom:1rem}
.section-head h2{margin-bottom:.75rem}

/* ---------- Auth ---------- */
/* Auth-only modunda navbar ve footer gizli — split-screen tam ekran */
body.auth-only{ overflow-x:hidden }
body.auth-only > .navbar,
body.auth-only > main > footer,
body.auth-only > .site-footer{ display:none !important }
body.auth-only > main{ display:block }
body.auth-only::before,
body.auth-only::after{ display:none }

.auth-split{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh;
  width:100%;
}
.auth-visual{
  position:relative;
  background-color:var(--bg-1);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:3rem;
  overflow:hidden;
  min-height:100vh;
}
.auth-visual::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(135deg, rgba(7,8,13,.55) 0%, rgba(7,8,13,.92) 100%);
}
.auth-visual > *{ position:relative; z-index:1 }
.auth-visual-quote{ max-width:380px }
.auth-visual-quote p{ font-family:var(--font-display); font-size:1.15rem; font-style:italic; color:rgba(255,255,255,.94); line-height:1.5 }
.auth-visual-quote cite{ display:block; margin-top:.75rem; font-size:.85rem; color:var(--gold-bright); font-style:normal }
.auth-visual-content h2{ font-size:2.2rem; line-height:1.1; margin-bottom:.75rem; color:#fff }
.auth-visual-content p{ color:rgba(255,255,255,.75); max-width:380px }

.auth-form-side{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:3rem 2rem; background:var(--bg);
  min-height:100vh;
  position:relative;
}
.auth-form-side::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(230,194,117,.06), transparent 60%),
    radial-gradient(700px 500px at 20% 100%, rgba(139,108,255,.05), transparent 60%);
}
.auth-form-wrap{ width:100%; max-width:440px; position:relative; z-index:1 }
.auth-form-wrap.wide{ max-width:560px }
.auth-header{ margin-bottom:2rem }
.auth-header h1{ font-size:2rem; letter-spacing:-0.03em; margin-bottom:.4rem }
.auth-header p{ color:var(--text-mid) }

.auth-divider{
  display:flex; align-items:center; gap:1rem;
  margin:1.5rem 0; font-size:.78rem; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.12em; font-weight:600;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background:var(--border);
}

.auth-footer{
  margin-top:2rem; text-align:center;
  padding-top:1.5rem; border-top:1px solid var(--border);
  font-size:.9rem; color:var(--text-mid);
}

/* Auth single card (install etc.) */
.auth-page{ min-height:100vh; display:grid; place-items:center; padding:2rem }
.auth-card{ width:100%; max-width:480px }
.auth-card.wide{ max-width:640px }

/* ---------- Dashboard layout ---------- */
.dash{
  display:grid; grid-template-columns:260px 1fr;
  min-height:100vh; padding-top:var(--nav-h);
}
.sidebar{
  position:sticky; top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  padding:1.5rem 1rem;
  border-right:1px solid var(--border);
  background: rgba(7,8,13,.5);
  overflow-y:auto;
}
.sidebar-section{ margin-bottom:1.5rem }
.sidebar-title{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-dim); font-weight:700;
  margin-bottom:.5rem; padding:0 .75rem;
}
.sidebar-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .8rem; margin-bottom:.15rem;
  font-size:.92rem; font-weight:500;
  color:var(--text-mid); border-radius:var(--r-sm);
  transition: all var(--t-fast);
}
.sidebar-link svg{ width:18px; height:18px; flex-shrink:0 }
.sidebar-link:hover{ color:var(--text); background:rgba(255,255,255,.04) }
.sidebar-link.active{
  color:var(--gold-bright);
  background: linear-gradient(90deg, rgba(230,194,117,.12), rgba(230,194,117,.03));
  border-left:2px solid var(--gold);
  padding-left: calc(.8rem - 2px);
}
.sidebar-link .badge{ margin-left:auto; padding:.15rem .5rem; font-size:.68rem }

.dash-main{ padding:2rem 2.5rem; max-width: 100%; overflow-x:hidden }
.dash-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; gap:1rem; flex-wrap:wrap }
.dash-header h1{ font-size:1.75rem; letter-spacing:-0.025em; margin-bottom:.25rem }
.dash-header p{ color:var(--text-dim); font-size:.92rem }

/* Profile banner */
.profile-banner{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border);
  padding:2rem; display:flex; gap:1.5rem; align-items:center;
  margin-bottom:2rem;
}
.profile-banner-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.18;
  filter: saturate(.7);
}
.profile-banner > *{ position:relative; z-index:1 }
.profile-avatar{
  width:88px; height:88px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center;
  color:#1a1300; font-weight:800; font-size:2rem;
  flex-shrink:0;
  border:2px solid rgba(255,217,138,.4);
  box-shadow: 0 0 0 4px rgba(230,194,117,.08);
}
.profile-info h2{ font-size:1.4rem; margin-bottom:.25rem }
.profile-info .summoner{ color:var(--cyan); font-family:var(--font-mono); font-size:.88rem }
.profile-meta{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap }

/* ---------- Tables ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background: var(--bg-1);
}
.table{ width:100%; border-collapse:collapse; font-size:.92rem }
.table thead th{
  text-align:left; padding:.85rem 1rem;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--text-dim);
  background: rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}
.table tbody td{ padding:.9rem 1rem; border-bottom:1px solid var(--border); color:var(--text) }
.table tbody tr:last-child td{ border-bottom:0 }
.table tbody tr{ transition: background var(--t-fast) }
.table tbody tr:hover{ background:rgba(255,255,255,.02) }
.table-actions{ display:flex; gap:.4rem }

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:.25rem;
  border-bottom:1px solid var(--border);
  margin-bottom:1.5rem;
}
.tab{
  padding:.75rem 1.1rem; font-size:.9rem; font-weight:500;
  color:var(--text-mid); border-bottom:2px solid transparent;
  transition: all var(--t-fast); cursor:pointer;
  margin-bottom:-1px;
}
.tab:hover{ color:var(--text) }
.tab.active{ color:var(--gold-bright); border-bottom-color:var(--gold) }
.tab-content{ display:none }
.tab-content.active{ display:block }

/* ---------- Modals ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:200;
  background: rgba(0,0,0,.7);
  display:none; align-items:center; justify-content:center;
  padding:2rem; opacity:0;
  transition: opacity var(--t);
}
.modal-backdrop.show{ display:flex; opacity:1 }
.modal{
  width:100%; max-width:520px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  padding:2rem;
  transform:translateY(20px) scale(.96);
  transition: transform var(--t-spring);
  box-shadow: var(--sh-3);
}
.modal-backdrop.show .modal{ transform:translateY(0) scale(1) }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem }
.modal-head h3{ font-size:1.25rem }
.modal-close{ width:34px; height:34px; display:grid; place-items:center; color:var(--text-mid); border-radius:var(--r-sm) }
.modal-close:hover{ color:var(--text); background:rgba(255,255,255,.05) }

/* ---------- Footer ---------- */
.site-footer{
  margin-top:5rem; padding:3rem 0 2rem;
  border-top:1px solid var(--border);
  background: rgba(7,8,13,.5);
}
.footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:2rem }
.footer-brand{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem }
.footer-brand img{ width:28px; height:28px }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); font-weight:700; margin-bottom:.85rem }
.footer-col a{ display:block; padding:.25rem 0; font-size:.88rem; color:var(--text-mid); transition: color var(--t-fast) }
.footer-col a:hover{ color:var(--gold-bright) }
.footer-bottom{
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--text-dim); gap:1rem; flex-wrap:wrap;
}
.social-links{ display:flex; gap:.5rem }
.social-links a{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--border);
  color:var(--text-mid); transition: all var(--t-fast);
}
.social-links a:hover{ color:var(--gold-bright); border-color:var(--gold); transform:translateY(-2px) }
.social-links svg{ width:16px; height:16px }

/* ---------- Reveal animation (cheap) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out }
.reveal.visible{ opacity:1; transform:none }
.fade-up{ animation: fadeUp .55s ease-out both }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:999px; border:2px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.15) }
::selection{ background: rgba(230,194,117,.3); color:#fff }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr }
  .dash{ grid-template-columns:1fr }
  .sidebar{ display:none }
  .dash-main{ padding:1.5rem }
}
@media (max-width: 768px){
  .nav-toggle{ display:grid }
  .nav-links{
    position:fixed; top:var(--nav-h); right:0; left:0;
    flex-direction:column; align-items:stretch;
    background:rgba(7,8,13,.96); padding:1rem;
    border-bottom:1px solid var(--border);
    transform: translateY(-110%); transition: transform var(--t);
  }
  .nav-links.open{ transform:translateY(0) }
  .nav-link{ padding:.85rem 1rem }
  .auth-split{ grid-template-columns:1fr }
  .auth-visual{ display:none }
  .auth-form-side{ padding:2rem 1.5rem }
  .grid-2, .grid-3, .form-row-2, .form-row-3{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr 1fr }
  .hero-stats{ grid-template-columns:1fr 1fr }
  .hero-stat:nth-child(2){ border-right:0 }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns:1fr }
  .container{ padding:0 1rem }
  .section{ padding:3.5rem 0 }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .marquee-track{ animation:none }
}

/* ---------- Print hide ---------- */
@media print{ .navbar, .sidebar, .site-footer{ display:none } }

/* =====================================================================
   LEGACY COMPATIBILITY — mevcut template'ler için uyum katmanı
   ===================================================================== */
.app-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; padding-top:var(--nav-h) }
.app-content{ padding:2rem 2.5rem; max-width:100%; overflow-x:hidden }
@media (max-width:1024px){
  .app-shell{ grid-template-columns:1fr }
  .app-content{ padding:1.5rem }
}

.page-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:2rem; gap:1rem; flex-wrap:wrap;
  padding-bottom:1.25rem; border-bottom:1px solid var(--border);
}
.page-head h1{ font-size:1.5rem; letter-spacing:-0.025em; margin-bottom:.25rem }
.page-head p{ color:var(--text-dim); font-size:.88rem }

.card-ornate{
  position:relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.75rem; box-shadow: var(--sh-2);
}
.corner{ display:none }

.toggle{ position:relative; display:inline-block; width:42px; height:24px; cursor:pointer; flex-shrink:0 }
.toggle input{ opacity:0; width:0; height:0 }
.toggle .track{
  position:absolute; inset:0; border-radius:999px;
  background: var(--bg-3); border:1px solid var(--border-strong);
  transition: background var(--t), border-color var(--t);
}
.toggle .track::after{
  content:""; position:absolute; left:3px; top:50%;
  transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background: linear-gradient(180deg,#fff,#d8d8e0);
  transition: left var(--t-spring), background var(--t-fast);
}
.toggle input:checked + .track{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); border-color:var(--gold) }
.toggle input:checked + .track::after{ left:22px; background:linear-gradient(180deg,#fff,#fde8b0) }

.divider{ height:1px; background:var(--border); margin:1.25rem 0; border:0 }

.text-gold-bright{ color:var(--gold-bright) }
.text-mono{ font-family:var(--font-mono) }
.text-teal{ color:var(--cyan) }
.badge-teal{ background:rgba(94,224,214,.12); color:var(--cyan-bright); border-color:rgba(94,224,214,.3) }
.btn-outline{ background:transparent; border-color:var(--border-strong) }
.btn-outline:hover{ background:rgba(255,255,255,.04); border-color:var(--border-hover) }

/* Old slug-field override (matches old template) */
.slug-field .form-input[data-slug-target]{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding-left:.85rem !important;
}

/* Empty state */
.empty-state{ text-align:center; padding:2.5rem 1rem }
.empty-state-icon{
  width:64px; height:64px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--text-dim);
}
.empty-state-icon svg{ width:26px; height:26px }

/* Role badge / rank chip (legacy) */
.role-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .55rem; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:600;
  background:rgba(94,224,214,.12); color:var(--cyan-bright);
  border:1px solid rgba(94,224,214,.25);
}
.rank-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .65rem; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:600;
  background:rgba(230,194,117,.12); color:var(--gold-bright);
  border:1px solid rgba(230,194,117,.3);
}
.captain-mark{
  position:absolute; top:.5rem; right:.5rem;
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1300; font-size:.72rem; font-weight:800;
  display:grid; place-items:center;
}

/* Old roster (legacy) */
.roster{ display:grid; gap:.85rem }
.roster-card{ position:relative; padding:1rem; text-align:center;
  background:rgba(7,8,13,.4); border:1px solid var(--border); border-radius:var(--r-md) }
.r-avatar{
  margin:0 auto .5rem;
  border-radius:50%; background:linear-gradient(135deg,var(--bg-3),var(--bg-2));
  display:grid; place-items:center; font-weight:700; color:var(--text);
  width:48px; height:48px;
}
.r-name{ font-weight:600 }
.r-summoner{ color:var(--text-dim); margin-bottom:.4rem }
.r-role{ margin-top:.25rem }

/* Stats grid (legacy) */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem }
.stats-grid .stat-icon{ position:absolute; top:1rem; right:1rem }
@media (max-width:1024px){ .stats-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .stats-grid{ grid-template-columns:1fr } }

/* Stat icon color variants (legacy) */
.stat-icon.success{ background:rgba(94,214,138,.12); color:#a9efc1; border-color:rgba(94,214,138,.3) }
.stat-icon.teal,
.stat-icon.cyan{ background:rgba(94,224,214,.12); color:var(--cyan-bright); border-color:rgba(94,224,214,.3) }
.stat-icon.danger{ background:rgba(255,95,126,.12); color:#ffb1c0; border-color:rgba(255,95,126,.3) }

/* Profile banner (legacy)— already styled; just helper for inner content */
.profile-banner-content{ display:flex; gap:1.5rem; align-items:center; flex:1 }
.profile-info .meta{ color:var(--text-dim); font-size:.85rem; margin-top:.25rem }
.profile-info .chips{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap }

/* Auth page fallback */
.auth-page{ min-height:100vh; display:grid; place-items:center; padding:2rem }

/* Counter span fallback (legacy data-counter) */
[data-counter]{ user-select:none }

/* Tournament card legacy */
.tournament-card{ position:relative; overflow:hidden; border-radius:var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border) }
.tournament-card .t-cover{ position:relative; height:180px; overflow:hidden }
.tournament-card .t-cover img{ width:100%; height:100%; object-fit:cover }
.tournament-card .t-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(7,8,13,.95) 100%) }
.tournament-card .t-status{ position:absolute; top:1rem; left:1rem; z-index:1 }
.tournament-card .t-prize{ position:absolute; bottom:1rem; right:1rem; z-index:1; font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--gold-bright); letter-spacing:-0.02em }
.tournament-card .t-body{ padding:1.4rem 1.5rem }
.tournament-card .t-meta{ display:flex; gap:1.25rem; font-size:.82rem; color:var(--text-dim); margin-top:1rem }
.tournament-card .t-meta span{ display:inline-flex; align-items:center; gap:.4rem }

.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
@media (max-width:1024px){ .features-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .features-grid{ grid-template-columns:1fr } }

.cta-section{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:5rem 2rem; text-align:center;
  background-size:cover; background-position:center;
  border:1px solid var(--border);
}
.cta-section::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(7,8,13,.85), rgba(7,8,13,.92)) }
.cta-section > .cta-content{ position:relative; z-index:1 }

/* Hero eyebrow alt format (legacy with .dot) */
.hero-eyebrow{ display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .85rem; border-radius:var(--r-pill);
  background: linear-gradient(180deg, rgba(230,194,117,.10), rgba(230,194,117,.04));
  border: 1px solid rgba(230,194,117,.20);
  font-family:var(--font-display); font-size:.78rem; font-weight:600;
  color:var(--gold-bright); letter-spacing:-0.01em; }
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); animation:pulse 1.8s ease-in-out infinite }
.hero-eyebrow + h1{ margin-top:1.5rem }
.hero-cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:2rem }
.hero-stats .num{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; letter-spacing:-0.03em; background: linear-gradient(120deg, var(--gold-bright), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-stats .label{ font-size:.78rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; font-weight:600 }

.accent{ color:var(--gold-bright) }

/* Navbar inner legacy */
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100% }
.brand{ display:flex; align-items:center; gap:.75rem; font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; color:var(--text); font-size:1.05rem }
.brand-logo{ width:34px; height:34px; object-fit:contain }
.brand span{ background:linear-gradient(120deg,var(--gold-bright),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }

/* Old marquee item */
.marquee-item img{ width:100%; height:100%; object-fit:cover }
.marquee-item .label{
  position:absolute; bottom:.75rem; left:1rem; z-index:1;
  font-family:var(--font-display); font-weight:600; font-size:.85rem; color:#fff;
}

/* Footer legacy */
.footer{ margin-top:5rem; padding:3rem 0 2rem; border-top:1px solid var(--border); background: rgba(7,8,13,.5) }
.footer-links{ list-style:none }
.footer-links li{ padding:.2rem 0 }
.footer-links a{ font-size:.88rem; color:var(--text-mid) }
.footer-links a:hover{ color:var(--gold-bright) }
.footer-social{ display:flex; gap:.5rem; margin-top:1rem }
.footer-social a{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--border);
  color:var(--text-mid); transition: all var(--t-fast);
}
.footer-social a:hover{ color:var(--gold-bright); border-color:var(--gold); transform:translateY(-2px) }
.footer-social svg{ width:16px; height:16px }

/* Nav action button legacy */
.nav-icon-btn{
  position:relative; width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%; color:var(--text-mid);
  border:1px solid var(--border);
  transition: all var(--t-fast);
}
.nav-icon-btn:hover{ color:var(--gold-bright); border-color:var(--border-hover); background:rgba(255,255,255,.03) }
.nav-icon-btn svg{ width:18px; height:18px }
.nav-user{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem .55rem .35rem .35rem;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  transition:all var(--t-fast);
}
.nav-user:hover{ border-color:var(--border-hover); background:rgba(255,255,255,.04) }
.nav-user .avatar{
  width:30px; height:30px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center; color:#1a1300; font-weight:800; font-size:.78rem;
}
.nav-user .name{ font-size:.85rem; font-weight:500; color:var(--text) }

/* Reveal data attribute (legacy data-reveal) */
[data-reveal]{ opacity:0; transform:translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out }
[data-reveal].visible{ opacity:1; transform:none }

/* Delay utilities (legacy) */
.delay-1{ animation-delay:.08s }
.delay-2{ animation-delay:.16s }
.delay-3{ animation-delay:.24s }
.delay-4{ animation-delay:.32s }

/* Auth visual legacy mb-2 helper already exists */