/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.hidden { display: none !important; }

:root {
  --bg:        #050913;
  --bg2:       #0a101c;
  --bg3:       #101827;
  --border:    rgba(111,214,255,.12);
  --border2:   rgba(232,199,115,.18);
  --gold:      #e8c773;
  --gold-dim:  #9f8040;
  --gold-glow: rgba(232,199,115,.28);
  --cyan:      #62d7ff;
  --cyan-glow: rgba(98,215,255,.24);
  --red:       #f87171;
  --text:      rgba(255,255,255,.9);
  --text2:     rgba(255,255,255,.55);
  --text3:     rgba(255,255,255,.25);
  --discord:   #5865f2;
  --radius:    10px;
  --sidebar-w: 210px;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
input, textarea, select { font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Aurora background ── */
.aurora-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.aurora-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(-45deg, #080808, #0d0800, #080d08, #080008, #080808);
  background-size: 400% 400%;
  animation: auroraShift 14s ease infinite;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .18;
  animation: blobFloat 10s ease-in-out infinite;
}
.blob-1 { width:500px;height:500px;background:#62d7ff;top:-150px;left:-100px;animation-duration:12s; }
.blob-2 { width:350px;height:350px;background:#e8c773;bottom:-80px;right:5%;animation-duration:9s;animation-direction:reverse; }
.blob-3 { width:250px;height:250px;background:#4d7cff;top:40%;left:40%;animation-duration:7s;animation-delay:2s; }
.blob-4 { width:200px;height:200px;background:#4a1a1a;bottom:20%;right:20%;animation-duration:11s;animation-delay:1s; }

@keyframes auroraShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-20px) scale(1.05); }
  66%     { transform: translate(-20px,15px) scale(.95); }
}

/* ── Gold glow pulse ── */
@keyframes goldGlow {
  0%,100% { box-shadow: 0 0 16px var(--gold-glow); }
  50%      { box-shadow: 0 0 32px rgba(212,160,23,.6); }
}
@keyframes cyanPulse {
  0%,100% { opacity:1; box-shadow: 0 0 5px var(--cyan); }
  50%      { opacity:.5; box-shadow: 0 0 2px var(--cyan); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
/* Drifts alternate rather than looping. A tiled background translated by a
   distance that is not a whole number of tiles snaps back at the end of every
   cycle; swaying back and forth avoids that jump entirely, and at these
   durations reads as slow parallax. */
@keyframes starDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-130px,96px,0); }
}
@keyframes starTwinkle {
  0%,100% { opacity: .18; }
  50% { opacity: .62; }
}
@keyframes nebulaDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(3.5%,-2.5%,0) scale(1.07); }
}
@keyframes riftSweep {
  0%,100% { opacity: .42; transform: translateX(-4%) rotate(-9deg); }
  50% { opacity: .7; transform: translateX(4%) rotate(-9deg); }
}
@keyframes emblemFloat {
  0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 26px rgba(98,215,255,.24)); }
  50% { transform: translateY(-10px) scale(1.012); filter: drop-shadow(0 0 42px rgba(98,215,255,.38)); }
}
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The tail is rotated to match the travel vector: the meteor moves
   translate3d(-760px, 320px), which is atan(320/760) = 22.8 degrees below
   horizontal. It was -18deg, so the streak trailed about 5 degrees off its
   own path. */
@keyframes meteorFall {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) rotate(-22.8deg) scaleX(.72);
  }
  8% { opacity: .95; }
  18% { opacity: .95; }
  34%,100% {
    opacity: 0;
    transform: translate3d(-760px,320px,0) rotate(-22.8deg) scaleX(1);
  }
}

/* ── Layout ── */
.page { position: relative; z-index: 1; min-height: 100vh; }

/* ── Glass card ── */
.glass {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(255,255,255,.08);
}
.glass-gold { border-color: rgba(212,160,23,.2); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 7px;
  font-size: 13px; font-weight: 500; transition: all .15s;
}
.btn-gold {
  background: var(--gold); color: #000;
  box-shadow: 0 0 18px var(--gold-glow);
  animation: goldGlow 3s ease-in-out infinite;
}
.btn-gold:hover { background: #e6b020; transform: translateY(-1px); }
.btn-discord {
  background: var(--discord); color: #fff;
  box-shadow: 0 0 16px rgba(88,101,242,.35);
}
.btn-discord:hover { background: #6c75f3; transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,.05);
  border: 0.5px solid var(--border2);
  color: var(--text2);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--text); }
.btn-danger { background: rgba(248,113,113,.1); color: var(--red); border: 0.5px solid rgba(248,113,113,.2); }
/* Secondary accent, used where gold would compete with the page's primary
   action -- the marketplace cards already carry the cyan edge. */
.btn-cyan {
  background: rgba(98,215,255,.10);
  border: 0.5px solid rgba(98,215,255,.28);
  color: var(--cyan);
}
.btn-cyan:hover { background: rgba(98,215,255,.18); box-shadow: 0 0 14px var(--cyan-glow); }

/* ── Badges / Rank pills ── */
.rank-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px; letter-spacing: .3px;
}

/* ── Status dot ── */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-online  { background: var(--cyan); animation: cyanPulse 2s infinite; box-shadow: 0 0 6px var(--cyan); }
.status-offline { background: #4b5563; }
.status-busy    { background: var(--gold); }

/* ── Navbar (landing) ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 0 32px; height: 60px;
  border-bottom: 0.5px solid rgba(255,255,255,.06);
}
.navbar-logo { display: flex; align-items: center; gap: 10px; flex: 1; }
.logo-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  animation: goldGlow 3s ease-in-out infinite;
}
.logo-icon.small { width: 34px; height: 34px; }
.logo-icon i { color:#07101b; font-size:18px; }
.logo-icon svg { width: 18px; height: 18px; fill: #000; }
.logo-icon.brand-logo {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(98,215,255,.26), transparent 48%),
    rgba(232,199,115,.96);
  border: .5px solid rgba(232,199,115,.72);
}
.logo-icon.brand-logo img {
  width: 190%;
  height: 190%;
  object-fit: cover;
  object-position: 50% 26%;
  mix-blend-mode: multiply;
  transform: translateY(6%) scale(1.06);
}
.logo-icon.brand-logo.small img {
  width: 170%;
  height: 170%;
}
.logo-text { font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.logo-text span { color: var(--gold); }
.logo-tag {
  font-size: 9px; font-weight: 600; letter-spacing: 1px;
  color: var(--gold); background: rgba(212,160,23,.1);
  border: 0.5px solid rgba(212,160,23,.25);
  padding: 2px 7px; border-radius: 3px;
}

/* ── Hero ── */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 24px 40px; text-align: center;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; flex: 1; height: 0.5px; width: 40px; background: var(--gold-dim); opacity: .5;
}
.hero-title {
  font-size: clamp(36px, 6vw, 64px); font-weight: 700;
  line-height: 1.1; letter-spacing: -1.5px;
  margin-bottom: 20px; max-width: 800px;
}
.hero-title .accent { color: var(--gold); }
.hero-sub {
  font-size: 16px; color: var(--text2); max-width: 520px;
  margin: 0 auto 36px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; margin-top: 56px;
  padding-top: 40px; border-top: 0.5px solid var(--border);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stat-val { font-size: 28px; font-weight: 700; color: var(--gold); }
.hero-stat-label { font-size: 11px; color: var(--text3); margin-top: 2px; letter-spacing: .5px; }

/* ── Game cards section ── */
.section { padding: 80px 32px; max-width: 1200px; margin: 0 auto; }
.section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.section-title { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 32px; }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }

.game-card {
  position: relative; height: 180px; border-radius: 12px;
  overflow: hidden; cursor: pointer;
  border: 0.5px solid rgba(255,255,255,.07);
  transition: transform .2s, border-color .2s;
}
.game-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.game-card:hover .gc-hover { opacity: 1; }

.gc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.gc-overlay { position: absolute; inset: 0; }
.gc-hover {
  position: absolute; inset: 0;
  background: rgba(212,160,23,.06);
  border: 1.5px solid rgba(212,160,23,.4);
  border-radius: 12px; opacity: 0; transition: opacity .2s;
}
.gc-top { position: absolute; top: 10px; right: 10px; }
.gc-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; }
.gc-name { font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.gc-meta { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 3px; }
.gc-action {
  display: inline-block; margin-top: 7px;
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  border-radius: 4px; letter-spacing: .3px;
}

/* ── App shell ── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: #060606; border-right: 0.5px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar-header { padding: 14px 14px 12px; border-bottom: 0.5px solid var(--border); }
.sidebar-guild {
  margin: 10px 10px 6px;
  padding: 9px 10px;
  background: rgba(212,160,23,.05);
  border: 0.5px solid rgba(212,160,23,.18);
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.sidebar-guild-icon,
.guild-mark {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  border: .5px solid rgba(232,199,115,.35);
  box-shadow: 0 0 14px rgba(232,199,115,.18);
  flex-shrink: 0;
}
.sidebar-guild-icon {
  object-fit: cover;
}
.guild-mark {
  display: inline-grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 24%, rgba(98,215,255,.24), transparent 42%),
    linear-gradient(135deg, rgba(232,199,115,.22), rgba(11,18,28,.96));
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
}
.guild-mark i {
  font-size: 14px;
}
.sidebar-guild-name { font-size: 12px; font-weight: 500; flex: 1; color: var(--text); }
.sidebar-nav { flex: 1; padding: 6px 8px; overflow-y: auto; }
.nav-section {
  font-size: 9px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--text3); text-transform: uppercase;
  padding: 12px 8px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; margin-bottom: 1px;
  color: var(--text3); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .12s; text-decoration: none;
  border-left: 2px solid transparent;
}

.nav-button {
  width: 100%;
  text-align: left;
  background: transparent;
}
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--text2); }
.nav-item.active {
  background: rgba(212,160,23,.07);
  border-left-color: var(--gold);
  color: rgba(255,255,255,.85);
}
.nav-item.active i { color: var(--gold); }
.nav-item i { font-size: 16px; }
.nav-badge {
  margin-left: auto; font-size: 9px; font-weight: 600;
  background: rgba(212,160,23,.15); color: var(--gold);
  padding: 1px 6px; border-radius: 8px;
}
.nav-alert-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 14px rgba(248,113,113,.42);
}
.nav-alert-badge + .nav-badge { margin-left: 5px; }
.sidebar-user {
  padding: 10px 12px; border-top: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.user-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #8b5e0a);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #000; flex-shrink: 0;
  overflow: hidden;
}
.user-av img { width: 100%; height: 100%; object-fit: cover; }
.user-av.tiny { width: 28px; height: 28px; font-size: 10px; }
.user-name { font-size: 12px; font-weight: 500; color: var(--text); }
.user-role { font-size: 10px; color: var(--text3); }

/* ── Main content ── */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  padding: 0 20px; height: 58px; min-height: 58px;
  background: #070707; border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.topbar-title { font-size: 15px; font-weight: 600; flex: 1; }
.topbar-title-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-guild-mark {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  object-fit: cover;
  border: .5px solid rgba(232,199,115,.38);
  box-shadow: 0 0 18px rgba(232,199,115,.2);
  flex-shrink: 0;
}
.topbar-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.content-area { flex: 1; overflow-y: auto; padding: 20px 24px; }
/* The countdown dock floats over the page, so the last rows have to be able to
   scroll clear of it. Without this it sat on top of whatever ended the page --
   in one case the accept/reject buttons of a party application, which simply
   could not be clicked. */
.app-shell:has(.countdown-dock) .content-area { padding-bottom: 132px; }

.landing-shell {
  position: relative;
  z-index: 1;
  display: flow-root;
  width: 100%;
}

.nexus-hero {
  position: relative;
  min-height: 96vh;
  padding-top: 92px;
  padding-bottom: 86px;
  overflow: hidden;
}

.landing-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Deep space is not uniformly black: it falls off unevenly. The base is
     darkened at the edges so the centre reads as depth rather than as a flat
     panel, and the nebula layers above supply the colour. */
  background:
    radial-gradient(ellipse at 50% 38%, rgba(20,38,76,.20), transparent 52%),
    radial-gradient(ellipse at 12% 82%, rgba(12,26,54,.22), transparent 48%),
    radial-gradient(ellipse at 88% 12%, rgba(32,22,62,.18), transparent 44%),
    linear-gradient(158deg, #010207 0%, #02040b 42%, #05040c 72%, #010207 100%);
}

/* Star layers.

   Every tile size below is a prime, and no two share a factor. Tiled
   gradients repeat on the least common multiple of their sizes, so with
   co-prime tiles the pattern only restarts after tens of thousands of pixels
   and the eye reads a sky instead of a grid. The previous version used 110,
   150, 170 and 240px, which share factors and repeated every few hundred
   pixels -- that visible lattice is what made the background look "aligned".

   Star radius and opacity vary per gradient too: a sky where every point is
   the same size reads as a texture, not as depth. */
.starfield {
  position: absolute;
  inset: -25%;
  background-repeat: repeat;
  will-change: transform;
}

/* Far: dense, tiny, dim, barely moves. */
.starfield-far {
  opacity: .5;
  animation: starDrift 150s ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 0 .6px, transparent 1px),
    radial-gradient(circle, rgba(180,214,255,.4)  0 .6px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.32) 0 .5px, transparent .9px);
  background-size: 137px 137px, 191px 191px, 233px 233px;
  background-position: 0 0, 47px 89px, 113px 31px;
}

/* Mid: the main body of the sky. */
.starfield-mid {
  opacity: .72;
  animation: starDrift 78s ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9)  0 1px,   transparent 1.6px),
    radial-gradient(circle, rgba(98,215,255,.75)  0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.6)  0 .8px,  transparent 1.3px),
    radial-gradient(circle, rgba(214,226,255,.5)  0 .7px,  transparent 1.2px);
  background-size: 311px 311px, 419px 419px, 263px 263px, 487px 487px;
  background-position: 29px 61px, 173px 7px, 91px 211px, 233px 137px;
}

/* Near: a handful of bright, larger stars that carry the parallax. */
.starfield-near {
  opacity: .85;
  animation: starDrift 44s ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.98) 0 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(232,199,115,.85) 0 1.4px, transparent 2.3px);
  background-size: 601px 601px, 743px 743px;
  background-position: 211px 97px, 431px 307px;
}

/* A sparse layer that pulses, so the sky is never completely frozen. */
.starfield-twinkle {
  animation: starTwinkle 7s ease-in-out infinite;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(98,215,255,.8)   0 1px,   transparent 1.8px);
  background-size: 829px 829px, 977px 977px;
  background-position: 331px 149px, 619px 421px;
}

/* Nebulae. Screen blending lets the clouds add light to the sky the way real
   emission nebulae do, instead of sitting on top as flat translucent panels. */
.nebula {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

/* Kept small, dim and well apart. Screen blending adds light, so a nebula
   that spans the viewport stops being a cloud and becomes a wash that lifts
   the whole sky off black and drowns the stars. The empty black between them
   is what sells the depth. */
.nebula-cyan {
  top: -6%; left: -6%;
  width: 46vw; height: 36vw;
  background: radial-gradient(ellipse at 42% 46%, rgba(48,132,205,.24), rgba(40,110,180,.08) 42%, transparent 66%);
  filter: blur(64px);
  animation: nebulaDrift 52s ease-in-out infinite;
}

.nebula-violet {
  top: 44%; right: -10%;
  width: 40vw; height: 38vw;
  background: radial-gradient(ellipse at 55% 42%, rgba(118,78,205,.20), rgba(92,60,170,.07) 45%, transparent 68%);
  filter: blur(72px);
  animation: nebulaDrift 67s ease-in-out infinite reverse;
  animation-delay: -18s;
}

.nebula-gold {
  bottom: -10%; left: 30%;
  width: 36vw; height: 26vw;
  background: radial-gradient(ellipse at 50% 50%, rgba(232,199,115,.15), rgba(196,150,70,.05) 44%, transparent 66%);
  filter: blur(66px);
  animation: nebulaDrift 84s ease-in-out infinite;
  animation-delay: -40s;
}

/* A faint galactic band across the diagonal. Its job is to break the
   symmetry: without it every glow radiates from the centre and the whole
   composition reads as one concentric target. */
.dust-band {
  position: absolute;
  top: 12%; left: -30%;
  width: 160%; height: 44%;
  background:
    linear-gradient(92deg, transparent 6%, rgba(140,172,230,.075) 30%, rgba(196,182,230,.10) 50%, rgba(115,152,214,.07) 70%, transparent 94%);
  filter: blur(64px);
  transform: rotate(-24deg);
  mix-blend-mode: screen;
  opacity: .75;
}

.cosmic-rift {
  position: absolute;
  inset: 14% -15%;
  background:
    linear-gradient(90deg, transparent, rgba(98,215,255,.13), rgba(232,199,115,.1), transparent);
  filter: blur(34px);
  transform: rotate(-9deg);
  animation: riftSweep 11s ease-in-out infinite;
}

.meteor {
  position: absolute;
  top: var(--meteor-y);
  left: var(--meteor-x);
  width: var(--meteor-w);
  height: 2px;
  opacity: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(232,199,115,.9), rgba(255,255,255,.92), rgba(98,215,255,.22), transparent);
  filter: drop-shadow(0 0 9px rgba(98,215,255,.68));
  transform-origin: right center;
  animation: meteorFall var(--meteor-d, 9s) linear infinite;
  animation-delay: var(--meteor-delay, 0s);
}

.meteor::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff7d7;
  box-shadow:
    0 0 12px rgba(255,255,255,.85),
    0 0 22px rgba(98,215,255,.58);
}

.meteor-one {
  --meteor-x: 94%;
  --meteor-y: 13%;
  --meteor-w: 180px;
  --meteor-d: 9s;
  --meteor-delay: 1.2s;
}

.meteor-two {
  --meteor-x: 112%;
  --meteor-y: 34%;
  --meteor-w: 240px;
  --meteor-d: 12s;
  --meteor-delay: 4.7s;
}

.meteor-three {
  --meteor-x: 84%;
  --meteor-y: 62%;
  --meteor-w: 150px;
  --meteor-d: 10.5s;
  --meteor-delay: 7.8s;
}

.meteor-four {
  --meteor-x: 108%;
  --meteor-y: 22%;
  --meteor-w: 105px;
  --meteor-d: 14s;
  --meteor-delay: 10.4s;
}

.nexus-emblem-wrap {
  position: relative;
  width: min(520px, 68vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  isolation: isolate;
}

.nexus-emblem-wrap::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98,215,255,.16), rgba(232,199,115,.06) 44%, transparent 68%);
  filter: blur(18px);
}

.nexus-emblem {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .98;
  background: transparent;
  animation: emblemFloat 6s ease-in-out infinite;
}

.nexus-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  border: .5px solid rgba(98,215,255,.26);
  border-left-color: transparent;
  border-bottom-color: rgba(232,199,115,.2);
  animation: orbitSpin 22s linear infinite;
}

.orbit-two {
  width: 94%;
  height: 94%;
  border-color: rgba(232,199,115,.2);
  border-right-color: transparent;
  animation-duration: 34s;
  animation-direction: reverse;
}

.nexus-hero .hero-eyebrow {
  margin-top: -14px;
  margin-bottom: 12px;
  animation: heroReveal .7s ease both .15s;
}

.hero-message {
  max-width: 620px;
  margin-bottom: 24px;
  font-size: 15px;
  animation: heroReveal .7s ease both .28s;
}

.nexus-hero .hero-actions {
  animation: heroReveal .7s ease both .42s;
}

.nexus-hero .hero-stats {
  margin-top: 34px;
  padding-top: 28px;
  animation: heroReveal .7s ease both .56s;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: -34px auto 80px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.stack-form {
  display: grid;
  gap: 12px;
}

.stack-form label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.character-apply-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(98, 215, 255, .22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(98, 215, 255, .07), rgba(245, 202, 99, .04));
}

.apply-character-summary {
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.feature-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
}

.feature-card i {
  font-size: 26px;
  color: var(--cyan);
}

.feature-card strong {
  color: var(--text);
}

.feature-card span {
  color: var(--text2);
  font-size: 12px;
  line-height: 1.55;
}

.landing-modules {
  padding-top: clamp(44px, 7vw, 78px);
  padding-bottom: clamp(48px, 7vw, 86px);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.module-card {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 10px;
  border-color: rgba(98,215,255,.16);
  background:
    radial-gradient(circle at 12% 12%, rgba(98,215,255,.10), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.module-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(98,215,255,.36), transparent);
  opacity: .6;
}

.module-card-featured {
  border-color: rgba(232,199,115,.28);
  background:
    radial-gradient(circle at 18% 10%, rgba(232,199,115,.14), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(98,215,255,.10), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}

.module-card i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--gold);
  background: rgba(232,199,115,.08);
  border: .5px solid rgba(232,199,115,.2);
  font-size: 20px;
}

.module-card strong {
  color: var(--text);
  font-size: 15px;
}

.module-card span {
  color: var(--text2);
  font-size: 12px;
  line-height: 1.55;
  max-width: 44ch;
}

.directory-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}

.directory-hero.has-hero-image {
  min-height: 220px;
  padding: 28px;
  --veil-strong: .94;
  --veil-mid: .72;
  --veil-soft: .24;
  --veil-end: 82%;
}

.directory-hero .hero-scene {
  object-position: 68% 50%;
}

.directory-hero h1 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  margin-bottom: 10px;
}

.directory-hero p {
  color: var(--text2);
  max-width: 620px;
}

.directory-hero .btn {
  flex-shrink: 0;
}

.search-input {
  max-width: 320px;
}

.guild-directory {
  display: grid;
  gap: 12px;
}

.guild-directory.compact {
  max-height: 360px;
  overflow-y: auto;
}

.guild-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: .5px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 12%, rgba(232,199,115,.12), transparent 28%),
    linear-gradient(135deg, rgba(98,215,255,.08), transparent 45%),
    rgba(255,255,255,.025);
}

.guild-card-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.guild-card-logo {
  width: 64px;
  height: 64px;
  border-radius: 13px;
  object-fit: cover;
  border: .5px solid rgba(232,199,115,.36);
  box-shadow: 0 0 28px rgba(232,199,115,.14);
  flex-shrink: 0;
}

.guild-card-copy {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 7px 16px;
  align-items: center;
  min-width: 0;
}

.guild-card-titleline {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.guild-card strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.guild-card p {
  grid-column: 1;
  margin: 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.35;
  max-width: 540px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.guild-game-pill,
.guild-recruiting-pill,
.guild-closed-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.guild-game-pill {
  color: var(--cyan);
  background: rgba(98,215,255,.09);
  border: .5px solid rgba(98,215,255,.18);
}

.guild-recruiting-pill {
  color: #05120a;
  background: rgba(126,231,135,.9);
}

.guild-closed-pill {
  color: var(--text2);
  background: rgba(255,255,255,.06);
  border: .5px solid rgba(255,255,255,.08);
}

.guild-card-meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guild-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text3);
  font-size: 11px;
}

.guild-recruitment-bars {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 6px 0;
  scrollbar-width: thin;
}

.guild-recruitment-role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  width: 190px;
  min-width: 190px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  border: .5px solid rgba(255,255,255,.065);
}

.guild-recruitment-role span {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-recruitment-role strong {
  color: var(--gold);
  font-size: 11px;
}

.guild-recruitment-role div {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
}

.guild-recruitment-role i {
  display: block;
  width: min(var(--fill), 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--class-color, var(--gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--class-color, var(--gold)) 55%, transparent);
}

.guild-recruitment-role small {
  grid-column: 1 / -1;
  color: var(--text3);
  font-size: 10px;
}

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
  gap: 14px;
  margin-bottom: 14px;
}

/* ── Stats row ── */
.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-toolbar .panel-hint { margin: 3px 0 0; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: stretch;
  gap: 12px;
}

.dashboard-widget {
  position: relative;
  min-width: 0;
  grid-column: span 4;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.dashboard-widget[data-widget-size="quarter"] { grid-column: span 3; }
.dashboard-widget[data-widget-size="metric"] { grid-column: span 2; }
.dashboard-widget[data-widget-size="third"] { grid-column: span 4; }
.dashboard-widget[data-widget-size="wide"] { grid-column: span 8; }
.dashboard-widget[data-widget-size="narrow"] { grid-column: span 4; }

.dashboard-widget.dragging {
  opacity: .48;
  transform: scale(.995);
  border-color: rgba(232,199,115,.45);
}

.dashboard-widget.drag-over {
  border-color: rgba(98,215,255,.42);
  box-shadow: 0 0 0 1px rgba(98,215,255,.12), 0 12px 30px rgba(0,0,0,.28);
}

.widget-grip {
  position: absolute;
  top: 9px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--text3);
  opacity: 0;
  cursor: grab;
  transition: opacity 140ms ease, color 140ms ease;
}

.dashboard-widget:hover .widget-grip,
.dashboard-widget:focus-within .widget-grip { opacity: 1; }

.widget-grip:hover { color: var(--gold); }
.dashboard-widget.dragging .widget-grip { cursor: grabbing; }
.dashboard-widget > .panel-header,
.dashboard-widget.stat-card { padding-left: 22px; }
.dashboard-widget[draggable="true"] { cursor: grab; }
.dashboard-widget.dragging { cursor: grabbing; }
.dashboard-widget a,
.dashboard-widget button,
.dashboard-widget input,
.dashboard-widget select,
.dashboard-widget textarea,
.dashboard-widget label { cursor: revert; }

.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; }
.stat-card {
  background: var(--bg2); border: 0.5px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.stat-card.gold-border { border-color: rgba(212,160,23,.2); }
.stat-val { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-label { font-size: 10px; color: var(--text3); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.stat-sub { font-size: 11px; margin-top: 4px; }
.metric-stat {
  min-height: 72px;
  padding-top: 11px;
  padding-bottom: 10px;
}
.metric-stat .stat-val { font-size: 22px; }
.metric-stat .stat-label {
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-stat .stat-sub {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-stat {
  border-color: color-mix(in oklab, var(--class-color) 34%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--class-color) 10%, transparent), transparent 52%),
    var(--bg2);
}
.role-stat .stat-label { color: var(--class-color); }

/* ── Panels ── */
.panel {
  background: var(--bg2); border: 0.5px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.panel-title { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .8px; }
/* Right-hand counter/label in a panel header. Sits opposite .panel-title, so
   it stays quiet: same scale, no emphasis, just enough contrast to read. */
.panel-count {
  flex-shrink: 0;
  padding: 3px 9px;
  border: .5px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.panel-link { font-size: 12px; color: var(--gold); cursor: pointer; }
.panel-link:hover { color: #e6b020; }
.panel-link-button {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.guild-news-widget {
  min-height: 240px;
  background:
    linear-gradient(145deg, rgba(98,215,255,.07), transparent 45%),
    linear-gradient(315deg, rgba(232,199,115,.07), transparent 55%),
    var(--bg2);
}

.guild-news-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.guild-news-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: .5px solid rgba(98,215,255,.16);
  border-radius: 8px;
  background: rgba(8, 14, 23, .56);
}

.guild-news-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: .5px solid color-mix(in oklab, var(--news-color, var(--gold)) 48%, var(--border));
  color: var(--news-color, var(--gold));
  background: color-mix(in oklab, var(--news-color, var(--gold)) 14%, transparent);
}

.guild-news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text3);
  font-size: 11px;
  margin-bottom: 5px;
}

.guild-news-category {
  display: inline-flex;
  align-items: center;
  color: var(--news-color, var(--gold));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.guild-news-type {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: .5px solid rgba(232,199,115,.28);
  background: rgba(232,199,115,.1);
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.guild-news-item h3 {
  margin: 0 0 5px;
  font-size: 15px;
  color: var(--text);
}

.guild-news-item p {
  margin: 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.news-empty {
  min-height: 150px;
}

.news-announcement { --news-color: #fb7185; }
.news-event { --news-color: var(--cyan); }
.news-member { --news-color: #43e18f; }
.news-resources { --news-color: var(--gold); }
.news-media { --news-color: #a78bfa; }
.news-other { --news-color: #93c5fd; }

.party-row,
.party-card {
  display: grid;
  gap: 5px;
  padding: 12px 0;
  border-bottom: .5px solid var(--border);
}

.party-row:last-child,
.party-card:last-child {
  border-bottom: 0;
}

.party-row span,
.party-card span,
.party-card small {
  color: var(--text2);
  font-size: 12px;
}

.slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.slot-list span {
  padding: 4px 8px;
  border: .5px solid rgba(98,215,255,.18);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(98,215,255,.07);
}

.table-lite {
  display: grid;
}

.table-lite > div:not(.empty-state) {
  display: grid;
  grid-template-columns: 50px 1.2fr 1fr 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 9px 0;
  border-bottom: .5px solid var(--border);
  font-size: 12px;
}

.table-lite > div:last-child {
  border-bottom: 0;
}

.table-lite span,
.table-lite em {
  color: var(--text2);
  font-style: normal;
}

.table-lite b {
  color: var(--gold);
}

.mini-action {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(98,215,255,.08);
  color: var(--cyan);
  border: .5px solid rgba(98,215,255,.18);
  margin-left: 4px;
}

.mini-action.danger {
  color: var(--red);
  background: rgba(248,113,113,.08);
  border-color: rgba(248,113,113,.18);
}

.mini-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-area {
  display: grid;
  gap: 14px;
}

.admin-stats {
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 0;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 14px;
}

.admin-grid.lower {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-table {
  display: grid;
}

.admin-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr .7fr .75fr auto;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 10px 0;
  border-bottom: .5px solid var(--border);
  font-size: 12px;
}

.guilds-table .admin-row {
  grid-template-columns: 1.4fr .7fr .9fr .7fr;
}

.events-table .admin-row {
  grid-template-columns: 1.3fr 1fr .8fr;
}

.applications-table .admin-row {
  grid-template-columns: 1.2fr .9fr .8fr .6fr;
}

.admin-row:last-child {
  border-bottom: 0;
}

.admin-head {
  min-height: 32px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 10px;
}

.admin-row span {
  min-width: 0;
  color: var(--text2);
}

.admin-row strong,
.admin-row small {
  display: block;
}

.admin-row strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.admin-row small {
  color: var(--text3);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* ── Member row ── */
.member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 0.5px solid var(--border);
}
.member-row:last-child { border-bottom: none; }
.member-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.member-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.av-status {
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--bg2);
}
.member-name { font-size: 13px; font-weight: 500; color: var(--text); }
.member-game { font-size: 10px; color: var(--text3); margin-top: 1px; }
.member-stat-val { font-size: 12px; font-weight: 600; color: var(--text2); text-align: right; }
.member-stat-label { font-size: 9px; color: var(--text3); text-align: right; }

/* ── Event row ── */
.event-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 0.5px solid var(--border);
}
.event-row:last-child { border-bottom: none; }
.event-date { width: 36px; text-align: center; flex-shrink: 0; }
.event-day { font-size: 20px; font-weight: 700; color: var(--gold); line-height: 1; }
.event-mon { font-size: 8px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.event-title { font-size: 12px; font-weight: 500; color: var(--text); }
.event-title-link { text-decoration: none; }
.event-title-link:hover { color: var(--gold); }
.event-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }
.event-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.btn-rsvp {
  font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: 5px;
  color: var(--cyan); background: rgba(0,229,255,.07);
  border: 0.5px solid rgba(0,229,255,.2); white-space: nowrap;
  box-shadow: 0 0 8px rgba(0,229,255,.1); cursor: pointer;
  transition: all .15s;
}
.btn-rsvp:hover { background: rgba(0,229,255,.14); box-shadow: 0 0 14px rgba(0,229,255,.2); }
.btn-rsvp.status-yes { color: #43e18f; border-color: rgba(67,225,143,.26); background: rgba(67,225,143,.08); }
.btn-rsvp.status-maybe { color: var(--gold); border-color: rgba(232,199,115,.28); background: rgba(232,199,115,.08); }
.btn-rsvp.status-bench { color: #bda8ff; border-color: rgba(189,168,255,.28); background: rgba(189,168,255,.08); }
.btn-rsvp.status-no { color: #ff7474; border-color: rgba(255,116,116,.28); background: rgba(255,116,116,.08); }

.events-hub {
  display: grid;
  gap: 14px;
}

.events-command {
  /* Taller than it was: there is a painting behind it now and 150px cropped it
     to a strip. The flat gradient it used to carry is gone -- the shared veil
     does that job, and keeping both would bury the art. */
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: .5px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
}

/* The gathering and the citadel sit centre-right; the copy is on the left. */
.events-command .hero-scene {
  object-position: 62% 46%;
  /* Measured at 56/255 average against the marketplace painting's 87, so it
     gets a lift as well as a lighter veil -- otherwise it reads as an empty
     dark panel, which is exactly what it did. */
  filter: brightness(1.28) saturate(1.06);
}

/* Both selectors are one class, so source order would decide -- and the shared
   block sits further down the file. Naming both classes wins it outright. */
.events-command.has-hero-image {
  --veil-strong: .86;
  --veil-mid: .40;
  --veil-soft: .06;
  --veil-end: 56%;
}

/* The whole cluster gets one base rather than each control getting its own:
   a red "delete" label over a sunlit citadel is unreadable, and patching the
   buttons one by one missed the status pill anyway. */
.events-command-actions {
  padding: 10px;
  border-radius: 12px;
  border: .5px solid rgba(255,255,255,.07);
  background: rgba(6,10,18,.74);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.events-command h1 {
  /* Narrower than before: the actions cluster now takes real width on the
     right, and at 760px the headline ran into it and wrapped to three lines. */
  max-width: 600px;
  margin: 6px 0 8px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
  letter-spacing: 0;
}

.events-command p {
  max-width: 640px;
  margin: 0;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.45;
}

.events-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

/* The count badge is all the events and marketplace tabs add on top of the
   shared pill styling; it follows the same gold as the active state. */
.events-tab span,
.market-tab span {
  min-width: 18px;
  min-height: 16px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
}

.events-tab.is-active span,
.market-tab.is-active span {
  background: rgba(232,199,115,.16);
  color: var(--gold);
}

.events-tab-panel {
  display: none;
}

.events-tab-panel.is-active {
  display: block;
}

.events-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.events-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 15px 18px;
  border-radius: 10px;
  border: .5px solid var(--border);
  background: rgba(255,255,255,.025);
}

.events-kpi i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  font-size: 20px;
}

.events-kpi strong {
  display: block;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.events-kpi span {
  display: block;
  margin-top: 5px;
  color: var(--text3);
  font-size: 12px;
}

.events-kpi.status-yes { border-color: rgba(67,225,143,.20); }
.events-kpi.status-maybe { border-color: rgba(232,199,115,.22); }
.events-kpi.status-no { border-color: rgba(255,116,116,.18); }
.events-kpi.status-attended { border-color: rgba(98,215,255,.20); }

.events-board {
  display: grid;
  grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: stretch;
}

.events-list-panel {
  min-height: 460px;
}

.events-card-list {
  display: grid;
  gap: 10px;
}

.event-list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: .5px solid rgba(255,255,255,.08);
}

.event-list-pager span {
  color: var(--text3);
  font-size: 12px;
  white-space: nowrap;
}

.event-list-pager .mini-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mini-action.disabled {
  opacity: .35;
  pointer-events: none;
  cursor: not-allowed;
}

.event-card-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(98,215,255,.06), transparent),
    rgba(0,0,0,.14);
  text-decoration: none;
  cursor: pointer;
}

.event-card-strip.has-select {
  grid-template-columns: auto minmax(0, 1fr);
}

.event-strip-link {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.event-card-strip.is-selected,
.event-card-strip.is-checked,
.event-card-strip:hover {
  border-color: rgba(98,215,255,.36);
  background:
    linear-gradient(90deg, rgba(98,215,255,.13), rgba(232,199,115,.04)),
    rgba(0,0,0,.22);
}

.event-row-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.event-row-check input,
.event-bulk-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}

.event-bulk-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text3);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.event-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: .5px solid rgba(248,113,113,.18);
  border-radius: 10px;
  background: rgba(248,113,113,.06);
}

.event-bulk-toolbar span {
  color: var(--text2);
  font-size: 12px;
}

.event-bulk-toolbar b {
  color: var(--red);
}

.event-strip-date {
  display: grid;
  place-items: center;
  align-content: center;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 9px;
  border: .5px solid rgba(232,199,115,.28);
  background: rgba(232,199,115,.07);
}

.event-strip-date strong {
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
}

.event-strip-date small {
  color: var(--text3);
  font-size: 9px;
  font-weight: 800;
}

.event-strip-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.event-strip-main > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.event-strip-main b {
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-strip-main em {
  color: #ff9b9b;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.event-strip-main small {
  color: var(--text3);
  font-size: 11px;
}

.event-strip-capacity {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.events-feature {
  padding: 0;
  overflow: hidden;
}

.events-feature-art {
  min-height: 250px;
  display: grid;
  align-content: end;
  gap: 16px;
  padding: 24px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(6,10,16,.18), rgba(6,10,16,.96)),
    radial-gradient(circle at 78% 40%, rgba(67,225,143,.20), transparent 28%),
    radial-gradient(circle at 42% 24%, rgba(98,215,255,.20), transparent 34%),
    linear-gradient(135deg, #0a1620, #081015 48%, #132019);
}

.events-feature-art.has-banner {
  background:
    linear-gradient(180deg, rgba(6,10,16,.16), rgba(6,10,16,.96)),
    linear-gradient(135deg, #0a1620, #081015 48%, #132019);
}

.events-feature-art.has-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--event-feature-image);
  background-size: cover;
  background-position: center;
  opacity: .52;
  filter: saturate(.95) contrast(1.05);
  transform: scale(1.01);
}

.events-feature-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,.05) 46%, transparent 49%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 90px);
  opacity: .28;
  pointer-events: none;
}

.events-feature-tags {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.events-feature-art h2 {
  position: relative;
  z-index: 1;
  margin: 6px 0 6px;
  color: var(--text);
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: .98;
  letter-spacing: 0;
}

.events-feature-art p,
.events-feature-art .eyebrow {
  position: relative;
  z-index: 1;
}

.events-feature-capacity {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 120px;
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 12px;
  border: .5px solid rgba(98,215,255,.20);
  background: rgba(6,10,16,.58);
  z-index: 1;
}

.events-feature-capacity strong {
  color: #ff9b9b;
  font-size: 34px;
  line-height: 1;
}

.events-feature-capacity span {
  color: var(--text3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.events-feature-body {
  display: grid;
  gap: 14px;
  padding: 18px 24px 22px;
}

.events-feature-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.event-preview-management {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.events-feature-body p {
  max-width: 820px;
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.55;
}

.events-feature-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.events-feature-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: .5px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
}

.events-feature-stats b {
  color: var(--gold);
}

.events-table-panel {
  min-height: 420px;
}

.events-wide-list {
  display: grid;
  border: .5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.events-wide-list a {
  display: grid;
  grid-template-columns: 54px minmax(220px, 1fr) 130px 100px 120px 180px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 9px 12px;
  border-bottom: .5px solid var(--border);
  color: var(--text2);
  text-decoration: none;
  font-size: 12px;
}

.events-wide-list a:last-child {
  border-bottom: 0;
}

.events-wide-list a:hover {
  background: rgba(255,255,255,.025);
}

.events-wide-list strong {
  color: var(--text);
}

.event-calendar-large .calendar-day {
  min-height: 112px;
}

.event-viewer { display: grid; gap: 14px; }
.event-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 320px);
  gap: 18px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(232,199,115,.09), rgba(98,215,255,.035) 45%, transparent),
    var(--bg2);
}
.event-hero-date {
  width: 70px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 10px;
  border: .5px solid rgba(232,199,115,.42);
  background: rgba(232,199,115,.08);
  box-shadow: inset 0 0 18px rgba(232,199,115,.08);
}
.event-hero-date strong { color: var(--gold); font-size: 30px; line-height: 1; }
.event-hero-date span { color: var(--text3); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.event-kicker {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.event-hero h1 {
  margin: 4px 0 8px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.1;
}
.event-hero p {
  margin: 10px 0 0;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.55;
}
.event-meta-line,
.rsvp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.event-meta-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text2);
  font-size: 11px;
}
.event-rsvp-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 9px;
  border: .5px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.event-rsvp-box > span {
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.event-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.event-status-card {
  padding: 12px;
  border-radius: 9px;
  border: .5px solid var(--border);
  background: rgba(255,255,255,.025);
}
.event-status-card strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}
.event-status-card span { display: block; margin-top: 7px; color: var(--text3); font-size: 11px; }
.event-status-card.status-yes { border-color: rgba(67,225,143,.22); }
.event-status-card.status-no { border-color: rgba(255,116,116,.24); }
.event-status-card.status-maybe { border-color: rgba(232,199,115,.25); }
.event-status-card.status-bench { border-color: rgba(189,168,255,.24); }
.event-status-card.status-attended { border-color: rgba(98,215,255,.24); }
.event-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}
.event-roster {
  display: grid;
  border: .5px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.event-roster-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(120px, .8fr) minmax(150px, 1fr) 110px 140px;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 9px 12px;
  border-bottom: .5px solid var(--border);
  color: var(--text2);
  font-size: 12px;
}
.event-roster-row:last-child { border-bottom: none; }
.event-roster-row.is-attended {
  background:
    linear-gradient(90deg, rgba(232,199,115,.06), transparent 38%),
    rgba(255,255,255,.018);
}
.event-roster-head {
  min-height: 40px;
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.025);
}
.event-groups { display: grid; gap: 10px; }
.event-group-card { padding: 12px; }
.event-group-list { display: grid; gap: 7px; }
.event-group-list > div:not(.empty-state) {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: .5px solid var(--border);
  font-size: 11px;
}
.event-group-list > div:last-child { border-bottom: none; }
.event-group-list strong { color: var(--text); font-weight: 600; }
.event-group-list span { color: var(--text3); overflow-wrap: anywhere; }
.attendance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
}
.attendance-toggle input { accent-color: var(--gold); }
.attendance-toggle span { font-size: 11px; }
.event-staff-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.event-staff-tools .mini-action {
  min-height: 30px;
  padding: 0 10px;
}
.event-staff-tools .mini-action.danger {
  color: #ff9b9b;
  border-color: rgba(255,116,116,.24);
  background: rgba(255,116,116,.08);
}
.event-staff-tools .mini-action.is-active {
  color: var(--gold);
  border-color: rgba(232,199,115,.34);
  background: rgba(232,199,115,.12);
}
.status-pill.status-event-draft { color: var(--text3); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.status-pill.status-event-published { color: #43e18f; background: rgba(67,225,143,.12); border-color: rgba(67,225,143,.22); }
.status-pill.status-event-closed { color: var(--gold); background: rgba(232,199,115,.12); border-color: rgba(232,199,115,.24); }
.status-pill.status-event-finished { color: var(--cyan); background: rgba(98,215,255,.12); border-color: rgba(98,215,255,.22); }
.status-pill.status-event-cancelled { color: #ff7474; background: rgba(255,116,116,.12); border-color: rgba(255,116,116,.22); }
.composition-list,
.event-ops-form,
.event-composition-editor {
  display: grid;
  gap: 10px;
}
.composition-row {
  display: grid;
  gap: 7px;
  padding: 9px 0;
  border-bottom: .5px solid rgba(255,255,255,.08);
}
.composition-row:last-child { border-bottom: 0; }
.composition-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.composition-row strong { color: var(--text); font-size: 12px; }
.composition-row span { color: var(--text3); font-size: 11px; }
.mini-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
}
.mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}
.event-composition-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-composition-editor label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 8px;
}
.event-composition-editor label span {
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}
.event-composition-editor.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.form-details {
  padding: 10px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.form-details summary {
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
.form-details[open] summary { margin-bottom: 10px; }
.status-pill.status-yes { color: #43e18f; background: rgba(67,225,143,.12); border-color: rgba(67,225,143,.22); }
.status-pill.status-no { color: #ff7474; background: rgba(255,116,116,.12); border-color: rgba(255,116,116,.22); }
.status-pill.status-maybe { color: var(--gold); background: rgba(232,199,115,.12); border-color: rgba(232,199,115,.24); }
.status-pill.status-bench { color: #bda8ff; background: rgba(189,168,255,.12); border-color: rgba(189,168,255,.22); }
.status-pill.status-pending { color: var(--text3); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.status-pill.status-attended { color: var(--cyan); background: rgba(98,215,255,.12); border-color: rgba(98,215,255,.22); }
.status-pill.status-accepted { color: #43e18f; background: rgba(67,225,143,.12); border-color: rgba(67,225,143,.22); }
.status-pill.status-declined { color: #ff7474; background: rgba(255,116,116,.12); border-color: rgba(255,116,116,.22); }

.application-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.application-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 9px;
  border: .5px solid var(--border);
  background: linear-gradient(145deg, rgba(232,199,115,.045), rgba(98,215,255,.025)), var(--bg2);
}
.application-media {
  min-height: 150px;
  border-radius: 8px;
  overflow: hidden;
  border: .5px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.application-media.empty {
  display: grid;
  place-items: center;
  color: var(--text3);
}
.application-media.empty i {
  color: var(--gold);
  font-size: 28px;
}
.application-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.application-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.application-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.application-head h3 {
  margin: 7px 0 2px;
  color: var(--text);
  font-size: 16px;
}
.application-head p,
.application-message {
  margin: 0;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.45;
}
.application-head strong {
  color: var(--gold);
  font-size: 18px;
  white-space: nowrap;
}
.application-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.application-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 6px;
  border: .5px solid rgba(255,255,255,.08);
  color: var(--text2);
  font-size: 10px;
  background: rgba(255,255,255,.025);
}
.application-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: auto;
}

/* ── AI panel ── */
.ai-panel {
  background: var(--bg2);
  border: 0.5px solid rgba(212,160,23,.15);
  border-radius: 10px; padding: 14px 16px; margin-top: 12px;
}
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; background: rgba(212,160,23,.07);
  border: 0.5px solid rgba(212,160,23,.2); border-radius: 6px;
  font-size: 11px; color: rgba(212,160,23,.9); cursor: pointer;
  transition: all .15s;
}
.ai-chip:hover { background: rgba(212,160,23,.14); border-color: var(--gold); }

/* ── Form elements ── */
.form-group { margin-bottom: 16px; }
.form-label { font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .5px; }
.form-input {
  width: 100%; padding: 9px 12px;
  background: var(--bg); border: 0.5px solid var(--border2);
  border-radius: 7px; color: var(--text); font-size: 13px;
  transition: border-color .15s;
}
.form-input:focus { outline: none; border-color: var(--gold); }
.form-input::placeholder { color: var(--text3); }

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  font-size: 12px;
}

/* ── Modal ── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.hidden { display: none !important; }
.modal {
  background: var(--bg2); border: 0.5px solid var(--border2);
  border-radius: 14px; padding: 24px; width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}
/* Composed with .modal, which is what gives a dialog its surface: background,
   border, padding, and -- the part whose absence was visible -- a max-height
   with scroll. On its own this class laid out a form with nothing behind it
   that ran off the top and bottom of the screen. */
.modal-card {
  display: grid;
  gap: 16px;
}

/* max-width, not only width: .modal caps every dialog at 480px, and a bare
   width loses to it. The same trap the guide editor fell into. */
.modal-card-wide {
  width: min(100%, 760px);
  max-width: min(calc(100vw - 32px), 760px);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.modal-header h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}
.modal-header p {
  margin-top: 6px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0.5px solid var(--border2);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--text2);
  cursor: pointer;
}
.icon-button:hover {
  color: var(--text);
  border-color: var(--gold2);
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 20px; }
.modal-hint {
  margin: -12px 0 14px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.55;
}
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
}

.party-create-requirements {
  border: 0.5px solid var(--border2);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.party-create-requirements .panel-hint { margin: 4px 0 0; }
.party-create-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.party-create-slot {
  display: grid;
  gap: 5px;
}
.party-create-slot span {
  color: var(--text2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  padding: 12px 18px; border-radius: 8px; font-size: 13px;
  background: var(--bg3); border: 0.5px solid var(--border2);
  display: flex; align-items: center; gap: 8px;
  animation: toastIn .25s ease; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.toast.success { border-color: rgba(0,229,255,.3); color: var(--cyan); }
.toast.error   { border-color: rgba(248,113,113,.3); color: var(--red); }
@keyframes toastIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--text3);
}
.empty-state.compact {
  padding: 24px;
}
.empty-state i { font-size: 40px; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 13px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-right: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover { color: var(--text); border-color: rgba(232,199,115,.35); }

/* The reference clock. Tabular figures so the seconds do not shove the zone
   name sideways once a second. */
.topbar-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
  cursor: default;
}
.topbar-clock i { font-size: 13px; color: var(--text3); align-self: center; }
.topbar-clock [data-clock-time] { font-variant-numeric: tabular-nums; color: var(--text); }
.topbar-clock small { font-size: 10px; color: var(--text3); }

/* Two docked clocks: the guild's own events and the game's fixed windows.
   Bottom-right so they sit out of the reading path but stay glanceable. */
.countdown-dock {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 50;
  /* The gaps between the panels are not the dock's to claim: a click that
     lands between them belongs to the page underneath. */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  max-width: min(300px, calc(100vw - 32px));
}
.countdown-panel {
  pointer-events: auto;
  width: 240px;
  border-radius: 10px;
  border: 1px solid rgba(232,199,115,.22);
  background: rgba(16,18,24,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.countdown-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "kicker caret" "next caret" "left caret";
  align-items: center;
  gap: 0 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text2);
  text-align: left;
  cursor: pointer;
}
.countdown-kicker { grid-area: kicker; display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text3); }
.countdown-head strong { grid-area: next; font-size: 17px; color: #e8c773; font-variant-numeric: tabular-nums; }
.countdown-head small { grid-area: left; font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.countdown-caret { grid-area: caret; font-size: 15px; color: var(--text3); transition: transform .18s ease; }
.countdown-panel.is-open .countdown-caret { transform: rotate(180deg); }

.countdown-dock.is-hidden .countdown-panel { display: none; }
.countdown-peek {
  pointer-events: auto;
  align-self: flex-end;
  display: none;
  align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(232,199,115,.3);
  background: rgba(16,18,24,.94);
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
}
.countdown-dock.is-hidden .countdown-peek { display: inline-flex; }
.countdown-dismiss {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text3); font-size: 13px;
  padding: 0 2px;
}
.countdown-dismiss:hover { color: var(--text); }

.countdown-list { border-top: 1px solid rgba(255,255,255,.06); max-height: 210px; overflow-y: auto; }
.countdown-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 11px;
  color: var(--text2);
  text-decoration: none;
}
.countdown-row:last-child { border-bottom: 0; }
a.countdown-row:hover { background: rgba(232,199,115,.07); }
.countdown-row strong { display: block; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.countdown-row small { display: block; font-size: 10px; color: var(--text3); }
.countdown-row b { font-variant-numeric: tabular-nums; color: var(--text2); }
/* Already started: still listed, but it is no longer something to wait for. */
.countdown-row.is-live b { color: #7ee787; }

@media (max-width: 768px) {
  .countdown-dock { right: 10px; bottom: 10px; gap: 6px; }
  .countdown-panel { width: 200px; }
}

/* Motion is a hint here, not the message: the drawer still opens instantly. */
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* The sidebar used to be display:none here with nothing to bring it back, so
     on a phone the only way to reach another page was to rotate the screen
     until the viewport cleared this breakpoint. It is a drawer now.

     `visibility` rather than only `transform`, so a closed drawer is not
     reachable by tab either -- an off-screen menu that still takes focus is
     worse than one that is missing. */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: 18px 0 40px rgba(0,0,0,.5);
    transition: transform .22s var(--ease-out, ease), visibility .22s;
  }
  .app-shell.nav-open .sidebar { transform: none; visibility: visible; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0,0,0,.55);
    border: 0;
  }

  .nav-toggle { display: inline-flex; }
  .topbar-clock { margin-right: 6px; padding: 3px 7px; }
  .topbar-clock small { display: none; }

  /* The search box was sharing one row with a nowrap button and collapsed to a
     26px sliver. On a phone the filters get their own line and fill it. */
  .panel-filters { flex-wrap: wrap; width: 100%; }
  .panel-filters .search-input { flex: 1 1 100%; min-width: 0; }

  .navbar { padding: 0 16px; }
  .logo-tag { display: none; }
  .nexus-hero {
    min-height: 92vh;
    padding: 78px 18px 68px;
  }
  .nexus-emblem-wrap {
    width: min(390px, 86vw);
    margin-bottom: 4px;
  }
  .hero-message {
    max-width: 340px;
    font-size: 14px;
  }
  .hero-stats {
    gap: 22px;
    margin-top: 28px;
    padding-top: 22px;
  }
  .hero-stat-val {
    font-size: 20px;
  }
  .hero-stat-label {
    font-size: 10px;
  }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .access-grid,
  .ops-grid,
  .directory-hero,
  .admin-grid,
  .admin-grid.lower {
    grid-template-columns: 1fr;
    display: grid;
  }
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-row,
  .guilds-table .admin-row,
  .events-table .admin-row,
  .applications-table .admin-row {
    grid-template-columns: 1fr;
  }
  .table-lite > div:not(.empty-state) {
    grid-template-columns: 36px 1fr;
  }
  .access-grid {
    margin-top: -22px;
  }
  .guild-card {
    grid-template-columns: 1fr;
  }
  .guild-card-main {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .guild-card-copy {
    grid-template-columns: 1fr;
  }
  .guild-card-titleline,
  .guild-card p,
  .guild-card-meta {
    grid-column: 1;
  }
  .guild-recruitment-bars {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .guild-card .btn {
    width: 100%;
  }
  .dashboard-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dashboard-widget,
  .dashboard-widget[data-widget-size="quarter"],
  .dashboard-widget[data-widget-size="metric"],
  .dashboard-widget[data-widget-size="third"],
  .dashboard-widget[data-widget-size="wide"],
  .dashboard-widget[data-widget-size="narrow"] {
    grid-column: span 6;
  }
  .event-hero,
  .event-detail-grid,
  .events-board {
    grid-template-columns: 1fr;
  }
  .event-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .events-command {
    align-items: flex-start;
    flex-direction: column;
  }
  .events-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .events-wide-list {
    overflow-x: auto;
  }
  .events-wide-list a {
    min-width: 860px;
  }
  .events-feature-capacity {
    position: static;
    width: 116px;
    min-height: 74px;
  }
  .event-roster {
    overflow-x: auto;
  }
  .event-roster-row {
    min-width: 760px;
  }
  .application-grid {
    grid-template-columns: 1fr;
  }
  .settings-form-grid,
  .settings-split,
  .settings-compact-form {
    grid-template-columns: 1fr;
  }
  .settings-tabs {
    padding: 6px;
  }
  .settings-tab {
    min-height: 34px;
    padding: 0 10px;
  }
}

/* ---------- characters, roles and classes ---------- */

/* Every element that represents a class or role takes its accent from the
   guild's own configuration, injected as --class-color. */
.class-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--class-color, var(--text3));
  box-shadow: 0 0 6px var(--class-color, transparent);
  vertical-align: middle;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.character-card {
  position: relative;
  padding: 11px 12px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, color-mix(in oklab, var(--class-color) 12%, var(--bg3)), var(--bg2));
  border: 0.5px solid color-mix(in oklab, var(--class-color) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--duration, 160ms) ease, box-shadow 160ms ease;
}
.character-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--class-color);
}
.character-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.character-card.is-main { border-color: var(--gold); }

.character-head { display: flex; align-items: center; gap: 7px; }
.character-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.character-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: #07101b; background: var(--gold);
  padding: 2px 6px; border-radius: 4px;
}

.character-meta { display: flex; gap: 7px; font-size: 10px; }
.character-class { color: var(--class-color); font-weight: 600; }
.character-role { color: var(--text2); }
.character-stats { display: flex; gap: 8px; font-size: 10px; color: var(--text3); }
.character-note { font-size: 10px; color: var(--text2); margin: 0; }
.character-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.compact-character-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.compact-character-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 118px;
}

.compact-character-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  align-self: start;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  font-weight: 800;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.22), transparent 30%),
    color-mix(in oklab, var(--class-color) 24%, var(--bg));
  border: .5px solid color-mix(in oklab, var(--class-color) 55%, var(--gold));
  box-shadow: 0 0 22px color-mix(in oklab, var(--class-color) 18%, transparent);
}

.compact-character-avatar b {
  position: absolute;
  right: -4px;
  bottom: -5px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #07101b;
  border: 2px solid var(--bg3);
  font-size: 10px;
}

.compact-character-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.compact-character-card .weapon-tags,
.compact-character-card .character-note,
.compact-character-card .character-actions {
  grid-column: 1 / -1;
}

.identity-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: stretch;
}

.aion-character-card {
  position: relative;
  min-height: 284px;
  padding: 22px 16px 14px;
  overflow: hidden;
  border-radius: 8px;
  border: .5px solid color-mix(in oklab, var(--class-color) 38%, var(--border));
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 20%),
    radial-gradient(circle at 50% 8%, color-mix(in oklab, var(--class-color) 26%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in oklab, var(--class-color) 8%, #203444), var(--bg3) 68%);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 14px 32px rgba(0,0,0,.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aion-character-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.34)),
    radial-gradient(circle at 50% 100%, rgba(232,199,115,.12), transparent 48%);
  pointer-events: none;
}

.aion-character-card.is-main {
  border-color: color-mix(in oklab, var(--gold) 70%, var(--class-color));
}

.aion-character-card > * {
  position: relative;
  z-index: 1;
}

.aion-character-portrait {
  position: relative;
  width: 98px;
  height: 98px;
  margin-bottom: 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: visible;
  background:
    radial-gradient(circle at 38% 18%, rgba(255,255,255,.22), transparent 28%),
    color-mix(in oklab, var(--class-color) 22%, #05070c);
  border: 2px solid rgba(0,0,0,.55);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--class-color) 45%, rgba(255,255,255,.14)),
    0 12px 30px rgba(0,0,0,.42);
}

.aion-character-portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.aion-character-portrait span {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
}

.aion-character-portrait b {
  position: absolute;
  right: -8px;
  bottom: 1px;
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 32%),
    var(--gold);
  color: #07101b;
  font-size: 14px;
  font-weight: 900;
  border: 2px solid color-mix(in oklab, var(--class-color) 25%, var(--bg3));
}

.aion-character-title {
  max-width: 100%;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aion-character-verify {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  border: .5px solid rgba(126,231,135,.26);
  background: rgba(126,231,135,.08);
  color: #9ef5a7;
  font-size: 10px;
  font-weight: 800;
}

.aion-character-card h3 {
  margin: 0;
  max-width: 100%;
  color: var(--text);
  font-size: 22px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.aion-character-card p {
  min-height: 18px;
  margin: 8px 0 12px;
  color: var(--text2);
  font-size: 13px;
}

.aion-character-pillbar {
  width: min(100%, 190px);
  min-height: 38px;
  padding: 6px 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(6, 17, 28, .46);
  border: .5px solid rgba(255,255,255,.08);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.aion-character-pillbar span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.aion-class-pill {
  color: var(--class-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aion-character-card .character-actions {
  justify-content: center;
  margin-top: auto;
}

.character-image-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 10px;
}

.character-photo-upload .gear-preview {
  min-height: 128px;
}

.character-photo-upload .gear-preview {
  aspect-ratio: 1;
  min-height: 0;
  max-width: 190px;
  justify-self: center;
  border-radius: 50%;
}

.character-photo-upload .gear-preview img {
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
}

.character-verify-upload .gear-preview {
  min-height: 128px;
}

/* ---------- guild configuration ---------- */

.config-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.config-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  font-size: 12px;
}
.config-row strong { flex: 1; font-weight: 500; color: var(--text); }
.config-sub { font-size: 11px; color: var(--text3); }

/* Games where the class is a weapon pair: the name alone is unreadable, so the
   weapons sit next to it rather than at the far end of the row. */
.config-row:has(.config-weapons) strong { flex: 0 0 auto; }
.config-weapons {
  flex: 1;
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* El rol se edita en la propia fila. Angosto a proposito: es una eleccion
   entre tres o cuatro palabras, no un campo de texto, y la fila la comparte
   con el nombre y las armas. */
.config-role-select {
  flex: 0 0 auto;
  width: 118px;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.config-flag {
  display: inline-grid;
  place-items: center;
  color: var(--text3);
  font-size: 12px;
}

/* Offer to load a game's class list. Stays visible once loaded, because the
   action is additive and picks up classes added to the template later. */
.template-offer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(232,199,115,.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(232,199,115,.07), rgba(232,199,115,.02));
}
.template-offer strong { display: block; font-size: 13px; color: var(--gold, #e8c773); }
.template-offer p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--text3); max-width: 62ch; }
.template-offer .btn { flex: 0 0 auto; }

/* Weapons, for games where the class is a weapon pair. */
.weapon-picker { border: 0; padding: 0; margin: 0; }
.weapon-picker legend { padding: 0; margin-bottom: 6px; }
.weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}
.weapon-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--duration-fast, 150ms), background var(--duration-fast, 150ms);
}
.weapon-chip:hover { border-color: rgba(232,199,115,.35); }
.weapon-chip:has(input:checked) {
  border-color: rgba(232,199,115,.5);
  background: rgba(232,199,115,.1);
}
.weapon-chip input { accent-color: #e8c773; }

/* Whether a character's numbers came from the game or from a form. Unlabelled
   they read identically, which is the whole thing worth saying. */
.armory-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.armory-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  font-size: 10px;
  color: var(--text3);
}
.armory-badge.is-linked { border-color: rgba(126,231,135,.45); color: #7ee787; }
.armory-line small { font-size: 10px; color: var(--text3); }

.armory-region-select { max-width: 220px; }

/* Searching the game at creation time, so a roster does not fill with typed
   rows nobody goes back to verify. */
.create-search {
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid rgba(232,199,115,.22);
  background: linear-gradient(180deg, rgba(232,199,115,.06), transparent);
}
.create-search-head { margin-bottom: 8px; }
.create-search-head strong {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #e8c773;
}
.create-search-head small { display: block; font-size: 10px; color: var(--text3); margin-top: 2px; }
.create-search .armory-results { max-height: 190px; }
/* A linked character shows its numbers rather than offering them as fields:
   typing over verified data only survives until the next refresh. */
.armory-metrics.is-verified {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.armory-metrics.is-verified span {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(126,231,135,.22);
  background: rgba(126,231,135,.05);
}
.armory-metrics.is-verified strong {
  font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums;
}
.armory-metrics.is-verified small { font-size: 10px; color: var(--text3); }

.gear-verified-note {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text3);
}
.gear-verified-note i { color: #7ee787; }
.gear-verified-note span { flex: 1; min-width: 160px; }

.create-picked {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 8px 0 0;
  font-size: 11px;
  color: #7ee787;
}

/* The two uploads used to share a grid with no common height, so the round one
   spilled over the square one. Same track, same internal rhythm. */
.character-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.character-image-grid .gear-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.character-image-grid .gear-preview {
  flex: 1;
  min-height: 116px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  text-align: center;
}
.character-image-grid .gear-upload-actions {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.character-image-grid .gear-upload small {
  font-size: 10px; color: var(--text3); text-align: center; line-height: 1.4;
}

.armory-results { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin: 4px 0; }
.armory-result {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text2);
  text-align: left;
  cursor: pointer;
}
.armory-result:hover { border-color: rgba(232,199,115,.4); }
.armory-result strong { display: block; font-size: 13px; color: var(--text); }
.armory-result small { display: block; font-size: 10px; color: var(--text3); }
.armory-result b { font-size: 11px; color: var(--text2); }

/* The character sheet. Grade is the one thing a player reads before the name,
   so it is the border rather than a word at the end of the line. */
/* Room to work: a loadout is 23 pieces and 35 skills, and a narrow dialog
   turns both into a scroll. */
.modal.sheet-modal {
  width: min(1340px, 96vw);
  max-width: none;
  padding: 0;
}
.sheet-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(232,199,115,.06), transparent);
}
.sheet-portrait {
  width: 62px; height: 62px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(232,199,115,.3);
  background: rgba(255,255,255,.04);
  font-size: 18px; font-weight: 600; color: var(--text2);
  overflow: hidden;
}
.sheet-portrait img { width: 100%; height: 100%; object-fit: cover; }
.sheet-identity { flex: 1; min-width: 0; }
.sheet-identity h2 { margin: 0; font-size: 20px; color: var(--text); }
.sheet-title { display: block; font-size: 12px; color: #e8c773; margin-top: 1px; }
.sheet-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text3); }
.sheet-facts span:empty { display: none; }

.sheet-modal .market-tabs { padding: 10px 18px 0; }
.sheet-body { min-height: 300px; max-height: 62vh; overflow-y: auto; padding: 12px 18px 18px; }

/* Blocks, in the game's own order: weapons, armour, the rest. */
.sheet-block + .sheet-block { margin-top: 14px; }
.sheet-block h4 {
  margin: 0 0 7px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text3);
}
.sheet-block h4 span { color: var(--text2); }

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
}

/* Skills read as a bar of icons, the way they sit in the game. */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.skill-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  text-align: center;
}
.skill-tile img, .skill-tile .sheet-noicon { width: 38px; height: 38px; border-radius: 7px; }
.skill-tile b {
  position: absolute; top: 3px; right: 4px;
  min-width: 17px; padding: 0 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  font-size: 10px; color: var(--text2);
}
.skill-tile small {
  font-size: 9px; color: var(--text3);
  width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* On the bar, so it is the build rather than the class's whole spellbook. */
.skill-tile.is-equipped { border-color: rgba(126,231,135,.5); background: rgba(126,231,135,.08); }
.skill-tile.is-equipped b { color: #7ee787; }
.sheet-noicon { display: block; background: rgba(255,255,255,.05); flex: 0 0 auto; }

/* Progression trees: eight peers, so a flat grid rather than an invented
   hierarchy. The bar is the answer -- how invested is this character. */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.board-card {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.board-card img, .board-card .sheet-noicon { width: 30px; height: 30px; border-radius: 6px; }
.board-card > span { flex: 1; min-width: 0; }
.board-card strong { display: block; font-size: 12px; color: var(--text); }
.board-card small { display: block; font-size: 10px; color: var(--text3); }
.board-card b { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.board-bar {
  display: block; height: 3px; margin-top: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.board-bar i { display: block; height: 100%; background: #e8c773; }

/* Daevanion: chips to choose a tree, the grid underneath. */
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.board-chip {
  min-width: 104px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text2);
  text-align: left;
  cursor: pointer;
}
.board-chip strong { display: block; font-size: 12px; color: var(--text); }
.board-chip small { display: block; font-size: 10px; color: var(--text3); }
.board-chip.is-active { border-color: rgba(232,199,115,.55); background: rgba(232,199,115,.1); }

.board-layout {
  display: grid;
  grid-template-columns: auto minmax(190px, 250px);
  gap: 16px;
  align-items: start;
}
.node-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 15), 38px);
  gap: 3px;
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
}
.node {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
/* A gap in the board's shape, not a node nobody opened. */
.node.is-void { border-color: transparent; background: transparent; }
.node.is-void img { display: none; }
/* Dim until opened: the shape of the board stays readable, the detail does
   not shout. */
/* Dim until opened, so the board's shape reads without shouting. */
.node img { width: 100%; height: 100%; object-fit: contain; opacity: .38; }
.node.is-open img { opacity: 1; }

/* Closed nodes still carry their grade, faintly: the shape of what is worth
   reaching is half of what a board tells you. */
.node.grade-common { border-color: rgba(159,178,196,.22); }
.node.grade-rare   { border-color: rgba(98,215,255,.28); }
.node.grade-legend { border-color: rgba(232,199,115,.3); }
.node.grade-unique { border-color: rgba(192,132,252,.3); }

/* Opened: the cell fills with its grade. There is no icon to light up -- the
   one the service names for a node 404s on their own CDN. */
.node.is-open.grade-common {
  border-color: rgba(159,178,196,.75); background: rgba(159,178,196,.35);
}
.node.is-open.grade-rare {
  border-color: rgba(98,215,255,.85); background: rgba(98,215,255,.4);
  box-shadow: 0 0 6px rgba(98,215,255,.3);
}
.node.is-open.grade-legend {
  border-color: rgba(232,199,115,.9); background: rgba(232,199,115,.42);
  box-shadow: 0 0 7px rgba(232,199,115,.4);
}
.node.is-open.grade-unique {
  border-color: rgba(192,132,252,.9); background: rgba(192,132,252,.42);
  box-shadow: 0 0 7px rgba(192,132,252,.4);
}

.board-effects {
  position: sticky; top: 0;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.board-effects h5 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text3);
}
.board-effects h5 span { color: var(--text2); }
/* A list, not a cloud of pills: these are read top to bottom. */
.effect-list { list-style: none; margin: 0; padding: 0; }
.effect-list li {
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 11px;
  color: var(--text2);
}
.effect-list li:last-child { border-bottom: 0; }
.board-empty { margin: 0; font-size: 11px; color: var(--text3); }

/* Stats: six allocated, ten divine. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.stat-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.stat-card strong { font-size: 12px; font-weight: 500; color: var(--text2); }
.stat-card b { font-size: 15px; color: #e8c773; font-variant-numeric: tabular-nums; }
/* A zero is a real answer here, just a quiet one. */
.stat-card.is-empty b { color: var(--text3); }
.sheet-card {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.sheet-card img { width: 30px; height: 30px; border-radius: 5px; flex: 0 0 auto; }
.sheet-card strong { display: block; font-size: 12px; color: var(--text); }
.sheet-card small { display: block; font-size: 10px; color: var(--text3); }

.sheet-card.grade-rare    { border-left-color: #62d7ff; }
.sheet-card.grade-legend  { border-left-color: #e8c773; }
.sheet-card.grade-unique  { border-left-color: #c084fc; }
.sheet-card.grade-epic    { border-left-color: #fb923c; }
.sheet-card.grade-mythic  { border-left-color: #f87171; }

/* A skill on the bar is the build; the rest is everything this class knows. */
.sheet-card.is-equipped { border-left-color: #7ee787; background: rgba(126,231,135,.06); }

.weapon-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.weapon-tag {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(232,199,115,.3);
  background: rgba(232,199,115,.08);
  font-size: 10px;
  color: var(--text2);
}
/* Spare weapons read quieter than the pair actually equipped. */
.weapon-tag.is-spare {
  border-style: dashed;
  border-color: rgba(255,255,255,.14);
  background: transparent;
  color: var(--text3);
}

.weapon-filter {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.weapon-filter-label { font-size: 11px; color: var(--text3); margin-right: 2px; }
.weapon-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--duration-fast, 150ms), color var(--duration-fast, 150ms);
}
.weapon-pill:hover { border-color: rgba(232,199,115,.35); color: var(--text); }
.weapon-pill.is-active {
  border-color: rgba(232,199,115,.55);
  background: rgba(232,199,115,.12);
  color: #e8c773;
}

/* Choosing a build by its two weapons instead of by a name nobody recognises. */
.pair-picker { margin-bottom: 4px; }
.pair-result {
  margin: 6px 0 0;
  font-size: 11px;
  color: #e8c773;
}
.pair-result.is-unknown { color: var(--text3); }

/* The class name plus the pair it is made of, because "Invocator" alone does
   not tell an officer what that person brings. */
.roster-class { display: flex; align-items: center; gap: 6px; }
.roster-class small {
  display: block;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .01em;
}

/* People who said they are coming and are not in any group for the night yet.
   This is the list an organiser is actually working from. */
.event-loose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.loose-card {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--class-color, #9fb2c4);
  background: rgba(255,255,255,.03);
}
.loose-card strong { display: block; font-size: 13px; color: var(--text); }
.loose-card span { display: block; font-size: 11px; color: var(--text2); margin-top: 2px; }
.loose-card small { display: block; font-size: 10px; color: var(--text3); margin-top: 2px; }

/* The event view stacks two panels inside one tab, unlike the market tabs it
   borrows its classes from. */
.market-tab-panel[data-eventview-panel].is-active { display: grid; gap: 14px; }

.inline-form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form .form-input { flex: 1; min-width: 120px; }
.color-input { flex: 0 0 44px; min-width: 44px; padding: 2px; height: 32px; cursor: pointer; }

.settings-layout {
  display: grid;
  gap: 14px;
}

.settings-tabs,
.events-tabs,
.market-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: .5px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(232,199,115,.08), transparent 42%),
    rgba(7, 12, 18, .82);
  overflow-x: auto;
}

.settings-tab,
.events-tab,
.market-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: .5px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.settings-tab i,
.events-tab i,
.market-tab i {
  font-size: 15px;
}

.settings-tab:hover,
.events-tab:hover,
.market-tab:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}

.settings-tab.is-active,
.events-tab.is-active,
.market-tab.is-active {
  color: var(--gold);
  border-color: rgba(232,199,115,.32);
  background: rgba(232,199,115,.10);
  box-shadow: inset 0 -1px 0 rgba(232,199,115,.36), 0 0 18px rgba(232,199,115,.05);
}

.settings-tab-form {
  display: contents;
}

.settings-tab-panel {
  display: none;
}

.settings-tab-panel.is-active {
  display: block;
}

.market-tab-panel {
  display: none;
}

.market-tab-panel.is-active {
  display: block;
}

.settings-form-grid,
.settings-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr);
  gap: 16px;
  align-items: start;
}

.settings-logo-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.settings-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
  padding-top: 14px;
  border-top: .5px solid var(--border);
}

.settings-compact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 360px));
  gap: 14px;
  align-items: end;
}

.settings-compact-form label {
  display: grid;
  gap: 7px;
}

.event-type-settings {
  display: grid;
  gap: 12px;
  max-width: 900px;
}

.event-type-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.event-type-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: .5px solid rgba(232,199,115,.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, rgba(232,199,115,.08), transparent 36%),
    rgba(255,255,255,.02);
}

.event-type-row > i {
  color: var(--gold);
  font-size: 17px;
}

/* A quien avisa el bot. Una tabla pequena: etiqueta, destino y en que canales
   entra, que son las tres preguntas y ninguna mas. */
.mention-settings {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(88,101,242,.22);
  border-radius: 10px;
  background: rgba(88,101,242,.05);
}

.mention-tag-list {
  display: grid;
  gap: 6px;
}

.mention-tag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 74px 74px auto;
  gap: 8px;
  align-items: center;
}

.mention-tag-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
}

/* Las dos casillas van centradas bajo su columna: ahi el encabezado dice cual
   es cual, y el nombre repetido en cada fila solo seria ruido. */
.mention-tag-row .check-line {
  justify-content: center;
  margin: 0;
}

.mention-check-label { display: none; }

.mention-tag-row input[readonly] {
  color: var(--text2);
  cursor: default;
}

.mention-tag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 720px) {
  /* Sin sitio para cinco columnas: cada fila se lee como una ficha. */
  .mention-tag-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mention-tag-head { display: none; }
  .mention-tag-row .check-line { justify-content: flex-start; }
  /* Sin encabezado, cada casilla tiene que decir de que es. */
  .mention-check-label { display: inline; font-size: 11px; }
}

.activity-reset-panel {
  overflow: hidden;
}

.activity-reset-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .58fr);
  gap: 16px;
  align-items: stretch;
}

.activity-reset-copy,
.danger-zone-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.activity-reset-copy {
  padding: 16px;
  border: .5px solid rgba(232,199,115,.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 0%, rgba(232,199,115,.10), transparent 32%),
    rgba(255,255,255,.018);
}

.activity-reset-copy h3 {
  margin: 0;
  max-width: 680px;
  font-size: 24px;
  line-height: 1.08;
}

.activity-reset-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--text2);
  line-height: 1.55;
}

.activity-reset-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.activity-stat-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(6, 10, 16, .72);
}

.activity-stat-card strong {
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
}

.activity-stat-card span {
  color: var(--text3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.danger-zone-card {
  padding: 16px;
  border: .5px solid rgba(255,107,107,.32);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,107,107,.12), transparent 30%),
    rgba(42, 12, 16, .20);
}

.danger-zone-card label {
  display: grid;
  gap: 7px;
}

.danger-zone-card small {
  color: var(--text3);
  line-height: 1.4;
}

.danger-zone-card .btn-danger {
  justify-content: center;
  width: 100%;
}

.settings-inline-create {
  margin-top: 14px;
  padding-top: 14px;
  border-top: .5px solid var(--border);
}

.rank-settings-panel {
  margin-bottom: 14px;
  overflow: hidden;
}

.rank-settings-header {
  align-items: flex-start;
}

.rank-table-shell {
  overflow-x: auto;
  border: .5px solid var(--border);
  border-radius: 8px;
  background: rgba(0,0,0,.12);
}

.rank-table-head,
.rank-editor-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 150px 76px 96px minmax(390px, 1.15fr) 138px;
  gap: 10px;
  align-items: center;
  min-width: 1160px;
}

.rank-table-head {
  min-height: 36px;
  padding: 0 12px;
  color: var(--text3);
  background: rgba(255,255,255,.018);
  border-bottom: .5px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rank-editor-list {
  display: grid;
}

.rank-editor-row {
  min-height: 58px;
  padding: 8px 12px;
  border-bottom: .5px solid var(--border);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--rank-color, #9fb2c4) 8%, transparent), transparent 34%),
    rgba(255,255,255,.018);
}

.rank-editor-row:last-child {
  border-bottom: 0;
}

.rank-permissions,
.rank-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rank-name-cell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.rank-name-input {
  min-width: 0;
  font-weight: 700;
}

.rank-swatch-input {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 2px;
  border-radius: 8px;
  border: .5px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  cursor: pointer;
}

.rank-position-input {
  width: 64px;
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rank-discord-input {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.rank-default-toggle,
.permission-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rank-default-toggle {
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
}

.rank-default-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
}

.permission-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.permission-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: .5px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.permission-chip input:checked + span {
  color: var(--gold);
  border-color: rgba(232,199,115,.35);
  background: rgba(232,199,115,.09);
  box-shadow: inset 0 0 0 1px rgba(232,199,115,.06);
}

.mention-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: .5px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}

.mention-picker .field-label,
.mention-picker .field-help {
  flex: 0 0 100%;
}

.mention-chip span {
  min-width: 0;
  border-color: color-mix(in oklab, var(--rank-color, var(--gold)) 28%, rgba(255,255,255,.08));
}

.mention-chip input:checked + span {
  color: var(--text);
  border-color: color-mix(in oklab, var(--rank-color, var(--gold)) 70%, rgba(255,255,255,.08));
  background: color-mix(in oklab, var(--rank-color, var(--gold)) 18%, rgba(255,255,255,.02));
}

.permission-chip span i {
  font-size: 14px;
}

.rank-create-form {
  display: grid;
  grid-template-columns: minmax(170px, .32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  border: .5px solid rgba(232,199,115,.16);
  background:
    radial-gradient(circle at 18% 8%, rgba(232,199,115,.08), transparent 35%),
    rgba(232,199,115,.035);
}

.rank-create-title {
  display: grid;
  gap: 3px;
}

.rank-create-title strong {
  color: var(--text);
  font-size: 13px;
}

.rank-create-title span {
  color: var(--text3);
  font-size: 11px;
}

.rank-create-fields {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.rank-create-fields .rank-name-cell {
  flex: 1 1 220px;
}

.rank-permissions.compact {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.field-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text3); margin-bottom: -4px;
}
.field-help {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.35;
  margin-top: -2px;
  text-transform: none;
  letter-spacing: 0;
}
.locked-field {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 211, 111, 0.28);
  border-radius: 8px;
  background: rgba(244, 211, 111, 0.08);
}
.locked-field strong {
  color: var(--gold);
  font-size: 13px;
}
.locked-field span {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.4;
}
.panel-hint { font-size: 11px; color: var(--text3); margin: 0 0 10px; }
.panel-filters { display: flex; gap: 8px; align-items: center; }
.form-row { display: flex; gap: 8px; }
/* The flex children are the wrapping labels, not the inputs, so the sizing has
   to sit on the direct child or the columns size to their content and drift. */
.form-row > * { flex: 1; min-width: 0; }
.event-date-group {
  display: grid;
  gap: 8px;
}
.event-date-row label {
  flex: 1;
}
.date-input {
  color-scheme: dark;
}
.date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(88%) sepia(27%) saturate(961%) hue-rotate(358deg) brightness(99%) contrast(92%);
  opacity: .95;
}
.muted { color: var(--text3); }

/* `.stack-form label` sets display:grid and outranks `.check-line`, which
   stacked the checkbox above its text instead of sitting beside it. */
.stack-form label.check-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
}
/* Same trap as above: `.stack-form label` also outranks the `hidden`
   attribute, so a hidden field kept rendering. */
.stack-form label[hidden] { display: none; }

/* And it stacked the weapon checkboxes above their names. */
.stack-form label.weapon-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
}
.stack-form label.weapon-chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--gold);
}

.stack-form label.check-line input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
}

.optional-fields {
  padding: 10px 12px;
  border: .5px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

.optional-fields summary {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.optional-fields .form-row {
  margin-top: 10px;
}

/* A form's own submit button should size to its label rather than stretching
   across the grid. Modal buttons are unaffected: they sit inside
   .modal-footer, so they are not direct children of the form. */
.stack-form > button { justify-self: start; }

.event-calendar {
  display: grid;
  gap: 8px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekdays span {
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.calendar-day {
  min-height: 76px;
  padding: 7px;
  border-radius: 7px;
  border: .5px solid rgba(255,255,255,.065);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.calendar-day.is-empty {
  opacity: .35;
  background: rgba(255,255,255,.01);
}

.calendar-day.is-today {
  border-color: rgba(232,199,115,.55);
  box-shadow: inset 0 0 0 1px rgba(232,199,115,.18);
}

.calendar-day.has-events {
  background:
    linear-gradient(135deg, rgba(232,199,115,.08), rgba(98,215,255,.035)),
    rgba(255,255,255,.02);
}

.calendar-day strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  margin-bottom: 5px;
}

.calendar-day a {
  display: block;
  color: var(--gold);
  font-size: 10px;
  line-height: 1.25;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- party composition box ---------- */

.party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.party-grid.single { grid-template-columns: 1fr; max-width: 780px; }

.party-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--bg3), var(--bg2));
  border: 0.5px solid var(--border);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.party-box:hover { border-color: var(--border2); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.party-box.is-full { border-color: rgba(126,231,135,.28); }
.party-box.is-locked { opacity: .72; }
.party-box.has-pending-applications {
  border-color: rgba(248,113,113,.38);
  box-shadow: 0 0 0 1px rgba(248,113,113,.08), 0 12px 34px rgba(0,0,0,.34);
}

.party-alert-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 2px solid var(--bg2);
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(248,113,113,.45);
}

.party-alert-badge:hover {
  transform: translateY(-1px);
  background: #ff8a8a;
}

.party-box-head { display: flex; align-items: flex-start; gap: 10px; }
.party-box-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.party-box-title a {
  font-size: 15px; font-weight: 600; color: var(--text);
  text-decoration: none; letter-spacing: -.2px;
}
.party-box-title a:hover { color: var(--gold); }
.party-purpose { font-size: 11px; color: var(--text2); }

.party-box-tags {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: flex-end;
}
.party-tag {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(255,255,255,.05); color: var(--text2);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.party-tag.tag-event { background: rgba(98,215,255,.12); color: var(--cyan); }
.party-tag.tag-open { background: rgba(126,231,135,.12); color: #7ee787; }
.party-tag.tag-application { background: rgba(232,199,115,.12); color: var(--gold); }
.party-tag.tag-invite { background: rgba(255,255,255,.06); color: var(--text3); }
.party-tag.tag-pending { background: rgba(248,113,113,.14); color: var(--red); }

.party-count {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gold); padding: 2px 6px; border-radius: 4px;
  background: rgba(232,199,115,.1);
}
.party-count.full { color: #7ee787; background: rgba(126,231,135,.12); }

/* The slot grid is the point of the box: it shows the shape of the group,
   including the holes, and wraps to as many rows as the size needs. */
.party-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 6px;
}

.party-slot {
  position: relative;
  min-height: 76px;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.party-slot.filled {
  background: linear-gradient(160deg, color-mix(in oklab, var(--class-color) 16%, var(--bg3)), var(--bg2));
  border: 0.5px solid color-mix(in oklab, var(--class-color) 40%, transparent);
}
.party-slot.filled::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--class-color);
}

.party-slot.empty {
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.015);
  align-items: center;
  justify-content: center;
}
.party-slot.empty.required {
  border-color: color-mix(in oklab, var(--class-color) 45%, transparent);
  background: color-mix(in oklab, var(--class-color) 6%, transparent);
}

.slot-index {
  position: absolute; top: 5px; right: 6px;
  font-size: 9px; color: var(--text3); font-variant-numeric: tabular-nums;
}
.slot-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 14px;
}
.slot-class { font-size: 10px; font-weight: 600; color: var(--class-color); }
.slot-foot {
  margin-top: auto; display: flex; gap: 6px;
  font-size: 9px; color: var(--text3);
}
.slot-empty-label {
  font-size: 10px; letter-spacing: .04em;
  color: var(--class-color, var(--text3));
  text-transform: uppercase;
}

.slot-clear {
  position: absolute; bottom: 4px; right: 4px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--text2);
  font-size: 11px; opacity: 0;
  transition: opacity 140ms ease;
}
.party-slot:hover .slot-clear { opacity: 1; }
.slot-clear:hover { background: rgba(248,113,113,.2); color: var(--red); }

.slot-fill {
  margin-top: 4px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--text3);
  font-size: 11px; opacity: .5;
  transition: opacity 140ms ease, background 140ms ease;
}
.party-slot.empty:hover .slot-fill {
  opacity: 1; background: rgba(232,199,115,.18); color: var(--gold);
}

.party-slot.drag-over,
.builder-slot.drag-over {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 24px rgba(232,199,115,.22);
}

.party-box-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 0.5px solid var(--border);
}
.party-meta {
  flex: 1; display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 10px; color: var(--text3);
}
.party-meta span { display: inline-flex; align-items: center; gap: 4px; }
.party-status { font-weight: 600; }
.party-status.status-completa { color: #7ee787; }
.party-status.status-reclutando { color: var(--gold); }
.party-status.status-cerrada { color: var(--text3); }
.party-actions { display: flex; align-items: center; gap: 6px; }
.party-hint { font-size: 10px; color: var(--text3); }
.btn-sm { padding: 5px 10px; font-size: 11px; }

.party-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 0.5px solid var(--border);
  text-decoration: none; color: inherit;
}
.party-row:last-child { border-bottom: 0; }
.party-row:hover strong { color: var(--gold); }
.party-row strong { font-size: 12px; font-weight: 500; color: var(--text); }
.party-row > span { font-size: 11px; color: var(--text3); flex: 1; }
.party-notes { font-size: 12px; color: var(--text2); margin: 12px 0 0; }
.slot-role-select { max-width: 160px; padding: 4px 8px; font-size: 11px; }

.party-application-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: .5px solid rgba(248,113,113,.28);
  background: rgba(248,113,113,.075);
}

.party-alert-dot {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(248,113,113,.35);
}

.party-application-alert strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}

.party-application-alert p {
  margin: 2px 0 0;
  color: var(--text2);
  font-size: 11px;
}

.party-builder-panel {
  margin-top: 14px;
  border-color: rgba(98, 215, 255, .18);
  background:
    radial-gradient(circle at 12% 0%, rgba(98,215,255,.09), transparent 32%),
    radial-gradient(circle at 85% 10%, rgba(232,199,115,.08), transparent 30%),
    rgba(6,13,24,.78);
}

.party-page-tabs {
  margin-bottom: 14px;
}

.party-page-tabs .events-tab {
  text-decoration: none;
}

.tag-temporary {
  color: #93c5fd;
  background: rgba(59, 130, 246, .13);
  border-color: rgba(59, 130, 246, .3);
}

.party-builder {
  display: grid;
  grid-template-columns: minmax(340px, .52fr) minmax(0, .76fr);
  gap: 16px;
  align-items: start;
}

.party-builder-workspace {
  min-width: 0;
  order: 2;
}

.plan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.plan-controls .form-input[data-plan-name] {
  flex: 1 1 220px;
}

.plan-controls .form-input[data-plan-size] {
  flex: 0 0 86px;
}

.plan-controls .btn {
  flex: 0 0 auto;
}

.party-builder-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  min-width: 0;
}

.builder-party {
  padding: 14px;
  border-radius: 8px;
  border: .5px solid rgba(98,215,255,.18);
  background:
    linear-gradient(145deg, rgba(12,26,44,.86), rgba(5,10,18,.82)),
    rgba(5, 12, 22, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.builder-party header,
.builder-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.builder-party-name {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  outline: none;
}

.builder-party header strong,
.builder-roster-head strong {
  font-size: 12px;
  color: var(--text);
}

.builder-party header span,
.builder-roster-head small {
  font-size: 10px;
  color: var(--gold);
  font-weight: 700;
}

.builder-party-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.builder-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.builder-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 18px rgba(98,215,255,.22);
}

.builder-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.builder-role-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 4px;
  border: .5px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: var(--text2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.builder-role-chip.role-tank { color: #62d7ff; background: rgba(98,215,255,.1); border-color: rgba(98,215,255,.24); }
.builder-role-chip.role-healer { color: #7ee787; background: rgba(126,231,135,.1); border-color: rgba(126,231,135,.24); }
.builder-role-chip.role-support { color: #facc15; background: rgba(250,204,21,.1); border-color: rgba(250,204,21,.25); }
.builder-role-chip.role-dps { color: #fb7185; background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.24); }
.builder-role-chip.role-flex { color: #c4b5fd; background: rgba(196,181,253,.1); border-color: rgba(196,181,253,.24); }
.builder-role-chip.missing { color: var(--gold); background: rgba(232,199,115,.1); border-color: rgba(232,199,115,.24); }
.builder-role-chip.full { color: #7ee787; background: rgba(126,231,135,.1); border-color: rgba(126,231,135,.24); }
.builder-role-chip.is-empty { color: var(--text3); }

.builder-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.builder-slot {
  position: relative;
  min-height: 92px;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.14);
  background:
    linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.builder-slot.is-filled {
  border-style: solid;
  border-color: color-mix(in oklab, var(--class-color) 52%, transparent);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--class-color) 18%, rgba(10,18,30,.95)), rgba(5,10,18,.88)),
    var(--bg2);
  box-shadow: inset 2px 0 0 var(--class-color), 0 12px 24px rgba(0,0,0,.18);
}

.builder-slot strong {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-slot small {
  color: var(--class-color, var(--text3));
  font-size: 10px;
  font-weight: 800;
}

.builder-slot em {
  color: var(--text3);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-slot.drag-over {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,199,115,.2), 0 0 18px rgba(232,199,115,.18);
}

.plan-slot-clear {
  top: 4px;
  right: 4px;
}

.builder-party-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.party-builder-roster {
  position: sticky;
  top: 76px;
  order: 1;
  padding: 14px;
  border-radius: 8px;
  border: .5px solid rgba(232,199,115,.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(232,199,115,.12), transparent 32%),
    linear-gradient(165deg, rgba(232,199,115,.06), rgba(6,13,24,.9));
  max-height: calc(100vh - 110px);
  overflow: auto;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.builder-member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.builder-member-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 8px;
  align-items: center;
  min-height: 84px;
  padding: 10px;
  border-radius: 8px;
  border: .5px solid color-mix(in oklab, var(--class-color) 44%, transparent);
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--class-color) 13%, rgba(8,16,28,.95)), rgba(5,10,18,.76));
  box-shadow: inset 2px 0 0 var(--class-color);
  cursor: grab;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.builder-member-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--class-color) 68%, transparent);
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--class-color) 19%, rgba(8,16,28,.95)), rgba(5,10,18,.86));
}

.builder-member-card.dragging {
  opacity: .55;
  cursor: grabbing;
}

.builder-member-card div {
  min-width: 0;
}

.builder-member-card strong,
.builder-member-card span,
.builder-member-card small,
.builder-member-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-member-card strong {
  display: block;
  font-size: 11px;
  color: var(--text);
}

.builder-member-card span {
  display: block;
  font-size: 10px;
  color: var(--text3);
}

.builder-member-card small,
.builder-member-card em {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text2);
  font-style: normal;
}

.builder-member-card small {
  color: var(--class-color);
  font-weight: 700;
}

.danger-soft {
  border-color: rgba(248,113,113,.35);
  color: #ff9b9b;
}

@media (max-width: 1180px) {
  .party-builder {
    grid-template-columns: 1fr;
  }

  .party-builder-roster {
    position: static;
    max-height: none;
    order: initial;
  }

  .party-builder-workspace {
    order: initial;
  }

  .builder-member-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .plan-controls {
    grid-template-columns: 1fr 88px;
  }

  .plan-controls .btn {
    justify-content: center;
  }
}

/* ---------- admin panel ---------- */

.pill {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px; margin-right: 4px;
  text-transform: uppercase;
}
.pill-ok { background: rgba(126,231,135,.12); color: #7ee787; }
.pill-danger { background: rgba(248,113,113,.14); color: var(--red); }
.pill-dead { background: rgba(255,255,255,.06); color: var(--text3); }
.pill-gold { background: rgba(232,199,115,.14); color: var(--gold); }

.admin-row.row-banned { background: rgba(248,113,113,.04); }
.admin-row.row-deleted { opacity: .55; }

.row-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.detail-actions { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--border); }
.mini-action[disabled] { opacity: .35; cursor: not-allowed; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.detail-grid > div { display: flex; flex-direction: column; gap: 3px; }
.detail-grid strong { font-size: 13px; font-weight: 500; color: var(--text); }

.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding-top: 14px; margin-top: 10px;
  border-top: 0.5px solid var(--border);
}
.pagination-info { font-size: 11px; color: var(--text3); }

.audit-action {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--cyan);
}
.audit-table .admin-row { grid-template-columns: 150px 1fr 120px 140px; }

.danger-title { color: var(--red); }
.danger-copy {
  font-size: 12px; color: var(--text2);
  background: rgba(248,113,113,.07);
  border-left: 2px solid var(--red);
  padding: 8px 10px; border-radius: 4px; margin: 0;
}

.points-input { width: 70px; padding: 4px 6px; font-size: 11px; }
.admin-area .panel-filters { flex-wrap: wrap; }

/* ---------- roster table ---------- */

.roster-panel { overflow-x: auto; }
.roster-toolbar { align-items: flex-start; }
.roster-toolbar .btn { white-space: nowrap; }

.roster-table {
  min-width: 1160px;
  display: grid;
  border: .5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Una casilla mas por fila cuando se pueden elegir miembros, asi que la tabla
   necesita el hueco. Sin el, la fila se salia de sus columnas. */
.roster-table.has-picks { min-width: 1206px; }

.roster-row {
  display: grid;
  grid-template-columns: 44px minmax(190px, 1.25fr) 110px 150px 110px 170px 150px 120px 86px;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: .5px solid var(--border);
  font-size: 12px;
}

/* La columna de seleccion va delante de todo lo demas. Declararla aqui es lo
   que mantiene la fila en una sola linea: una rejilla con menos columnas que
   hijos manda el sobrante a una fila nueva, que es como la lupa acabo debajo
   de la casilla. */
.roster-table.has-picks .roster-row {
  grid-template-columns: 34px 44px minmax(190px, 1.25fr) 110px 150px 110px 170px 150px 120px 86px;
}

.roster-row:last-child { border-bottom: 0; }
.roster-row:hover { background: rgba(255,255,255,.025); }

.roster-head {
  min-height: 38px;
  color: var(--text3);
  background: rgba(255,255,255,.018);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
}

.roster-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.roster-user strong,
.roster-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-user small {
  color: var(--text3);
  font-size: 10px;
  margin-top: 1px;
}

.role-pill,
.points-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.role-pill {
  color: var(--cyan);
  background: rgba(98,215,255,.1);
}

.points-pill {
  color: #fff;
  background: rgba(248,113,113,.88);
}

.status-pill {
  color: #07101b;
  background: #22c55e;
  font-style: normal;
}

.gear-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.gear-score i { color: var(--text2); }
.gear-score .ti-camera-check { color: var(--gold); }
/* El numero prestado del otro juego, cuando no hay el que se pide: se lee,
   pero no se confunde con el bueno. */
.gear-score small { color: var(--text3); }

.icon-action {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: .5px solid var(--border);
  background: rgba(255,255,255,.035);
  color: var(--text2);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.icon-action:hover {
  color: var(--gold);
  border-color: var(--border2);
  background: rgba(232,199,115,.08);
}

.icon-action.danger {
  color: var(--red);
  background: rgba(248,113,113,.07);
  border-color: rgba(248,113,113,.18);
}

.icon-action.danger:hover {
  color: #fecaca;
  background: rgba(248,113,113,.13);
  border-color: rgba(248,113,113,.35);
}

.icon-action:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.roster-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.class-distribution {
  display: grid;
  gap: 10px;
}

.class-meter {
  display: grid;
  grid-template-columns: auto minmax(100px, .55fr) minmax(160px, 1fr) 34px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.class-meter strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-meter > div {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.class-meter > div span {
  display: block;
  width: var(--meter);
  height: 100%;
  border-radius: inherit;
  background: var(--class-color);
  box-shadow: 0 0 16px color-mix(in oklab, var(--class-color) 38%, transparent);
}

.class-meter em {
  color: var(--gold);
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

/* ---------- user profile / armory ---------- */

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  overflow: hidden;
}

.profile-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%, rgba(98,215,255,.35), rgba(212,160,23,.12) 45%, rgba(255,255,255,.05));
  border: .5px solid rgba(212,160,23,.35);
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero-main h1 {
  margin: 2px 0 4px;
  font-size: 26px;
  letter-spacing: 0;
}

.profile-hero-main p {
  max-width: 760px;
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
}

.profile-quick {
  display: grid;
  gap: 7px;
  min-width: 150px;
}

.profile-quick span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text2);
  font-size: 12px;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: 14px;
}

.profile-tabs-layout {
  display: grid;
  gap: 14px;
}

.profile-tab-panel {
  display: none;
}

.profile-tab-panel.is-active {
  display: block;
}

.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.profile-section-head h2 {
  margin: 4px 0 6px;
  font-size: 24px;
  line-height: 1.1;
}

.profile-section-head p {
  max-width: 720px;
  margin: 0;
  color: var(--text2);
  line-height: 1.45;
}

.profile-stat-list {
  display: grid;
  gap: 8px;
}

.profile-stat-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: .5px solid var(--border);
}

.profile-stat-list div:last-child {
  border-bottom: 0;
}

.profile-stat-list strong {
  color: var(--gold);
  font-size: 22px;
}

.profile-stat-list span {
  color: var(--text3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.profile-module-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.profile-module-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 7px;
  border: .5px solid rgba(98,215,255,.16);
  color: var(--cyan);
  background: rgba(98,215,255,.055);
  font-size: 11px;
  font-weight: 600;
}

.profile-character-stack,
.profile-guild-block {
  display: grid;
  gap: 12px;
}

.profile-guild-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: .5px solid var(--border);
}

.profile-guild-title span {
  color: var(--text);
  font-weight: 700;
}

.profile-guild-title small {
  color: var(--text3);
}

.profile-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.profile-character-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  border: .5px solid color-mix(in oklab, var(--class-color) 35%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--class-color) 10%, transparent), transparent 52%),
    var(--bg3);
}

.account-character-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 158px;
}

.account-character-card .character-actions {
  grid-column: 1 / -1;
}

.account-character-avatar {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  border: .5px solid color-mix(in oklab, var(--class-color) 60%, var(--gold));
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.22), transparent 30%),
    color-mix(in oklab, var(--class-color) 22%, var(--bg));
  box-shadow: 0 0 24px color-mix(in oklab, var(--class-color) 24%, transparent);
}

.account-character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-character-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-character-main h3,
.account-character-main p {
  margin: 0;
}

.account-character-main p {
  color: var(--text2);
  font-size: 12px;
}

.account-gear-card .gear-preview {
  min-height: 180px;
}

.account-gear-preview {
  border-radius: 7px;
  overflow: hidden;
  border: .5px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}

.account-gear-preview img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #050505;
}

.portrait-upload .gear-preview {
  aspect-ratio: 1;
  min-height: 0;
}

.portrait-upload .gear-preview img {
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.form-label {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.uploads-row {
  align-items: start;
}

.armory-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 106px;
  margin: -14px -14px 0;
  padding: 16px 14px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in oklab, var(--class-color) 34%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(98,215,255,.12), rgba(232,199,115,.07) 50%, rgba(255,255,255,.025));
  border-bottom: .5px solid color-mix(in oklab, var(--class-color) 28%, var(--border));
}

.armory-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 42%, rgba(0,0,0,.22)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.armory-portrait,
.armory-identity,
.armory-power {
  position: relative;
  z-index: 1;
}

.armory-portrait {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: .5px solid color-mix(in oklab, var(--class-color) 55%, var(--gold));
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.28), transparent 28%),
    color-mix(in oklab, var(--class-color) 22%, var(--bg));
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 0 28px color-mix(in oklab, var(--class-color) 28%, transparent);
}

.armory-portrait span {
  position: absolute;
  right: -3px;
  bottom: -2px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #07101b;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid var(--bg3);
}

.armory-identity {
  min-width: 0;
}

.armory-identity small {
  display: block;
  color: var(--gold);
  font-size: 11px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.armory-power {
  min-width: 92px;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: right;
  border: .5px solid rgba(232,199,115,.2);
  background: rgba(0,0,0,.22);
}

.armory-power strong {
  display: block;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.armory-power span {
  display: block;
  margin-top: 4px;
  color: var(--text3);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.armory-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.armory-tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  border-radius: 6px;
  border: .5px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
  color: var(--text2);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.armory-tabs span:first-child {
  color: var(--gold);
  border-color: rgba(232,199,115,.24);
  background: rgba(232,199,115,.07);
}

.gear-upload {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(232,199,115,.22);
  background: rgba(232,199,115,.035);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.roster-rank-select {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.gear-upload.is-dragging {
  border-color: rgba(98,215,255,.65);
  background: rgba(98,215,255,.065);
  box-shadow: inset 0 0 0 1px rgba(98,215,255,.16), 0 0 24px rgba(98,215,255,.08);
}

.gear-preview {
  min-height: 150px;
  border-radius: 7px;
  overflow: hidden;
  border: .5px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}

.gear-preview.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text3);
}

.gear-preview.empty i {
  font-size: 28px;
  color: var(--gold);
}

.gear-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #050505;
}

.guild-logo-upload {
  max-width: 520px;
}

.guild-logo-preview {
  min-height: 132px;
}

.guild-logo-preview img {
  max-height: 148px;
  background: radial-gradient(circle at 50% 46%, rgba(98,215,255,.1), rgba(0,0,0,.28));
}

.gear-upload-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gear-upload small {
  color: var(--text3);
  font-size: 10px;
}

.settings-divider {
  height: .5px;
  margin: 8px 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.flat-header {
  padding: 0;
  border: 0;
}

.recruitment-slots-editor {
  display: grid;
  gap: 10px;
}

.recruitment-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.recruitment-slot-input {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.14);
  border: .5px solid rgba(255,255,255,.065);
}

.recruitment-slot-input span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.recruitment-slot-input .form-input {
  min-height: 34px;
  padding: 7px 9px;
}

.armory-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: .5px solid rgba(255,255,255,.065);
  background: rgba(0,0,0,.12);
}

.armory-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.armory-section-title i {
  color: var(--gold);
  font-size: 15px;
}

.armory-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.armory-metrics label {
  display: grid;
  gap: 4px;
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.empty-state.compact {
  min-height: 120px;
}

/* ---------- member inspector ---------- */

.member-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: .5px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(98,215,255,.055), rgba(232,199,115,.035)),
    rgba(8,14,24,.78);
}

.member-profile-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.member-profile-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.member-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.member-title-line h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
}

.member-profile-id p {
  margin: 5px 0 0;
  color: var(--text2);
  font-size: 12px;
}

.member-profile-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
}

.member-profile-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  border: .5px solid rgba(255,255,255,.07);
  color: var(--text2);
  background: rgba(255,255,255,.025);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.member-profile-tabs a.active,
.member-profile-tabs a:hover {
  color: var(--gold);
  border-color: rgba(232,199,115,.25);
  background: rgba(232,199,115,.08);
}

.member-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.member-chart-panel {
  margin-bottom: 14px;
}

.attendance-bars {
  display: grid;
  grid-template-columns: repeat(30, minmax(12px, 1fr));
  gap: 5px;
  align-items: end;
  min-height: 170px;
  padding: 10px 4px 24px;
  border-bottom: .5px solid rgba(126,231,135,.22);
}

.attendance-bars span {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 132px;
}

.attendance-bars span i {
  width: 100%;
  min-height: 2px;
  height: var(--bar);
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(98,215,255,.35));
  box-shadow: 0 0 14px rgba(98,215,255,.18);
}

.attendance-bars span em {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  color: var(--text3);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.member-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--text2);
  font-size: 11px;
}

.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
}

.legend-dot.cyan { background: var(--cyan); }
.legend-dot.gold { background: var(--gold); }
.legend-dot.red { background: var(--red); }

.member-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}

.member-detail-grid > article:only-child {
  grid-column: 1 / -1;
}

.member-character-showcase {
  margin-bottom: 14px;
}
.member-character-profile-card.is-main {
  border-color: color-mix(in oklab, var(--gold) 62%, var(--class-color));
}
.member-character-identity .aion-character-portrait {
  width: 82px;
  height: 82px;
  margin: 0;
}
.member-character-verification .gear-preview {
  min-height: 172px;
}

.member-character-verification .gear-preview img {
  max-height: 320px;
}

.member-data-table {
  display: grid;
  border: .5px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}

.member-data-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) minmax(150px, .75fr) 100px 90px;
  gap: 12px;
  align-items: center;
  min-width: 680px;
  min-height: 46px;
  padding: 8px 12px;
  border-bottom: .5px solid var(--border);
  color: var(--text2);
  font-size: 12px;
}

.member-data-row:last-child { border-bottom: 0; }
.member-data-row strong { color: var(--text); font-weight: 600; }
.member-data-row b { color: var(--gold); font-variant-numeric: tabular-nums; }

.member-data-head {
  min-height: 36px;
  color: var(--text3);
  background: rgba(255,255,255,.018);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
}

.transactions-table .member-data-row {
  grid-template-columns: 42px minmax(220px, 1fr) 110px 160px;
}

/* The loot ledger carries two extra columns (member and event) over the
   default five, so it needs its own track list or the date wraps out. */
.loot-table .member-data-row {
  grid-template-columns: 42px minmax(180px, 1fr) minmax(130px, .8fr) minmax(130px, .8fr) 80px 130px;
  min-width: 780px;
}

.market-audit-table .member-data-row {
  grid-template-columns: 140px minmax(110px, .7fr) minmax(140px, 1fr) minmax(200px, 1.5fr);
  min-width: 720px;
}

/* The trail puts the action first and the detail under it, so a row reads as
   one statement instead of two competing columns. */
.market-audit-table .member-data-row strong {
  display: grid;
  gap: 2px;
}

.market-audit-table .member-data-row small {
  color: var(--text3);
  font-weight: 400;
}

.positive { color: #7ee787 !important; }
.negative { color: var(--red) !important; }

.member-side-card {
  position: sticky;
  top: 64px;
}

.member-note-box {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  border: .5px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.14);
}

.member-note-box strong {
  color: var(--text);
  font-size: 12px;
}

.member-note-box p {
  margin: 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
}

.member-character-list {
  display: grid;
  gap: 10px;
}

.member-character-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  border: .5px solid color-mix(in oklab, var(--class-color) 30%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--class-color) 10%, transparent), transparent 58%),
    rgba(255,255,255,.025);
}

.armory-metrics.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.armory-metrics.compact span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(0,0,0,.18);
  border: .5px solid rgba(255,255,255,.06);
}

.armory-metrics.compact strong {
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}

.armory-metrics.compact small {
  color: var(--text3);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 980px) {
  .profile-hero,
  .profile-grid,
  .member-profile-head,
  .member-detail-grid,
  .character-image-grid {
    grid-template-columns: 1fr;
  }

  .rank-table-head,
  .rank-editor-row {
    grid-template-columns: minmax(220px, 1fr) 70px 90px minmax(330px, 1fr) 130px;
    min-width: 840px;
  }

  .rank-permissions,
  .rank-create-fields {
    flex-wrap: wrap;
  }

  .rank-create-form {
    grid-template-columns: 1fr;
  }

  .rank-create-fields {
    justify-content: flex-start;
  }

  .member-side-card {
    position: static;
  }

  .profile-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .event-row {
    align-items: flex-start;
  }
  .event-row-actions,
  .rsvp-actions {
    justify-content: flex-start;
  }
  .event-hero h1 {
    font-size: 22px;
  }
  .application-card {
    grid-template-columns: 1fr;
  }
  .application-media {
    min-height: 180px;
  }
  .profile-character-grid {
    grid-template-columns: 1fr;
  }

  .armory-metrics,
  .profile-quick,
  .profile-module-strip,
  .member-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .armory-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .armory-power {
    grid-column: 1 / -1;
    text-align: left;
  }

  .armory-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- reduced motion ---------- */

/* The landing animates almost everything: three drifting star layers, three
   nebulae, twinkle, orbits, the floating emblem and four meteors. For anyone
   who has asked their system for less motion that is a lot to put on screen,
   so the sky is held still and the meteors are removed. The composition still
   reads as space; it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .starfield,
  .nebula,
  .cosmic-rift,
  .nexus-emblem,
  .nexus-orbit {
    animation: none !important;
  }
  .starfield-twinkle { opacity: .4; }
  .meteor { display: none; }
}

/* ---------- landing showcase ---------- */

/* Alternating copy/preview sections. The previews are live markup built from
   the app's own component classes, so they inherit every style change the
   product gets and never go stale the way a screenshot would. */
.landing-shell > .showcase {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(420px, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  width: min(calc(100% - 48px), 1140px);
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) 0;
  position: relative;
}

/* A hairline between sections, fading at both ends so it reads as a divider
   rather than a hard rule across the cosmos. */
.landing-shell > .showcase + .showcase::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.landing-shell > .showcase.reversed .showcase-copy { order: 2; }
.landing-shell > .showcase.reversed .showcase-visual { order: 1; }

.showcase-copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.showcase-title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -.7px;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

.showcase-copy p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text2);
  margin: 0;
  max-width: 44ch;
}

/* The preview sits slightly forward of the page: a soft lift is enough to
   read as a screen without needing a browser chrome frame around it. */
.showcase-visual {
  min-width: 0;
}

.showcase-visual > * {
  width: 100%;
  max-width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  border-radius: var(--radius);
}

.preview-panel { padding: 16px; }
.preview-panel .event-row:last-child { border-bottom: 0; }

.landing-events-preview {
  display: grid;
  gap: 12px;
}

.landing-event-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.landing-event-stats div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 76px;
  padding: 14px;
  border: .5px solid rgba(232,199,115,.22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(232,199,115,.08), rgba(98,215,255,.035));
}

.landing-event-stats i {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(255,255,255,.06);
}

.landing-event-stats strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.landing-event-stats span {
  color: var(--text3);
  font-size: 11px;
}

.landing-event-console {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.28fr);
  gap: 12px;
  min-width: 0;
}

.landing-event-list,
.landing-event-feature {
  border: .5px solid rgba(98,215,255,.18);
  border-radius: 12px;
  background: rgba(8,14,24,.86);
  overflow: hidden;
}

.landing-event-list {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.landing-event-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}

.landing-event-card.is-selected {
  border-color: rgba(98,215,255,.38);
  background: linear-gradient(90deg, rgba(98,215,255,.12), rgba(255,255,255,.025));
}

.landing-event-card strong {
  color: var(--text);
  font-size: 13px;
  display: block;
}

.landing-event-card span {
  color: var(--text3);
  font-size: 10px;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-event-card b {
  color: var(--text);
  font-size: 18px;
}

.landing-event-feature {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.landing-event-banner {
  position: relative;
  min-height: 230px;
  padding: 24px;
  display: grid;
  align-content: end;
  gap: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4,8,15,.10), rgba(4,8,15,.84)),
    url("/static/img/event-banners/pvp.jpg") center / cover;
}

.landing-event-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,10,18,.88), transparent 45%, rgba(5,10,18,.18));
  pointer-events: none;
}

.landing-event-banner > * {
  position: relative;
  z-index: 1;
}

.landing-event-banner h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 4vw, 44px);
  line-height: .95;
}

.landing-event-banner p {
  margin: 0;
  color: var(--text2);
  font-size: 12px;
}

.landing-event-banner > strong {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  min-width: 94px;
  min-height: 74px;
  display: grid;
  place-items: center;
  border: .5px solid rgba(98,215,255,.26);
  border-radius: 12px;
  color: #ff9b9b;
  font-size: 32px;
  background: rgba(4,8,15,.72);
}

.landing-event-banner > strong span {
  display: block;
  color: var(--text3);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.landing-event-body {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.landing-event-body p {
  margin: 0;
  color: var(--text2);
  font-size: 12px;
}

.landing-event-chips,
.landing-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.landing-event-chips span {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 7px;
  border: .5px solid rgba(255,255,255,.09);
  color: var(--text3);
  background: rgba(255,255,255,.04);
  font-size: 10px;
  font-weight: 700;
}

.discord-preview {
  display: grid;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 12% 20%, rgba(88,101,242,.12), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(98,215,255,.10), transparent 38%),
    rgba(8,12,20,.88);
}

.discord-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.discord-preview-head span:last-child {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: #5865f2;
}

.discord-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #43e18f;
  box-shadow: 0 0 14px rgba(67,225,143,.52);
}

.discord-embed {
  border-left: 4px solid #8b5cf6;
  border-radius: 6px;
  padding: 16px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08);
}

.discord-guild {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}

.discord-embed h3 {
  margin: 0 0 8px;
  color: #6daeff;
  font-size: 18px;
}

.discord-embed p {
  margin: 0 0 14px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
}

.discord-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.discord-fields div {
  display: grid;
  gap: 3px;
}

.discord-fields span {
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.discord-fields strong {
  color: var(--text);
  font-size: 13px;
}

.discord-banner {
  min-height: 150px;
  border-radius: 6px;
  border: .5px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(4,8,15,.04), rgba(4,8,15,.52)),
    url("/static/img/event-banners/pvp.jpg") center / cover;
}

/* Previews are decorative: nothing inside them should look clickable. */
.showcase-visual .party-box-title a,
.showcase-visual .btn-rsvp {
  pointer-events: none;
}

.closing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto clamp(56px, 8vw, 96px);
  padding: clamp(24px, 4vw, 40px);
}
.closing-cta h2 { font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 6px; letter-spacing: -.5px; }
.closing-cta p { margin: 0; font-size: 13px; color: var(--text2); }

@media (max-width: 860px) {
  .landing-shell > .showcase {
    grid-template-columns: 1fr;
    width: min(calc(100% - 32px), 640px);
    padding-left: 0;
    padding-right: 0;
  }
  /* On one column the copy always leads, whichever side it takes on desktop. */
  .landing-shell > .showcase.reversed .showcase-copy { order: 1; }
  .landing-shell > .showcase.reversed .showcase-visual { order: 2; }
  .module-grid {
    grid-template-columns: 1fr;
  }
  .landing-event-stats,
  .landing-event-console {
    grid-template-columns: 1fr;
  }
  .landing-event-banner {
    min-height: 200px;
  }
  .discord-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A guild that counts places as a headcount gets one bar for the whole
   roster instead of a row per role. Gold rather than a class colour, since
   it represents the guild as a whole and not any one role. */
.guild-recruitment-total {
  --class-color: var(--gold);
}

.profile-gear-card {
  max-width: 980px;
}

/* ---------- event banner ---------- */

.event-banner {
  position: relative;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  min-height: clamp(220px, 24vw, 360px);
  border: .5px solid var(--border);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(6,10,16,.06), rgba(6,10,16,.76)),
    var(--bg2);
}
.event-banner::before {
  content: "";
  position: absolute;
  inset: -22px;
  background-image: var(--event-banner-image);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(.9);
  opacity: .58;
  transform: scale(1.06);
}
.event-banner img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(220px, 24vw, 360px);
  object-fit: contain;
  object-position: center;
}
/* Fade the lower edge into the panel below so the banner reads as part of the
   card rather than a picture sitting on top of it. */
.event-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
}
.event-hero.has-banner {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* Banners are wide, so the preview mirrors that rather than showing a square. */
.event-banner-upload .gear-preview { aspect-ratio: 16 / 5; }

/* ---------- marketplace / loot ---------- */


.market-hero h1 {
  margin: 8px 0;
  max-width: 780px;
  font-size: clamp(28px, 4vw, 52px);
  line-height: .98;
}

.market-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
}




.market-section {
  margin-top: 14px;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.market-list {
  display: grid;
  gap: 10px;
}

.market-list.is-grouped {
  gap: 12px;
}

.market-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  min-height: 136px;
  padding: 13px;
  border: .5px solid rgba(98,215,255,.16);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(98,215,255,.06), transparent 45%),
    rgba(8,14,24,.72);
}

/* A wish is not on sale, so it should not look like the trade cards next to
   it: warmer edge, no price line, shorter body. */
.market-card-wish {
  min-height: 0;
  border-color: rgba(232,199,115,.18);
  background:
    linear-gradient(135deg, rgba(232,199,115,.05), transparent 45%),
    rgba(8,14,24,.72);
}

.market-card-wish .market-card-media i {
  color: rgba(232,199,115,.7);
}

.market-card-wish .market-card-foot {
  gap: 8px;
  flex-wrap: wrap;
}

.market-card-wish-group {
  align-items: start;
}

.wish-candidate-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.wish-candidate {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--text2);
  text-decoration: none;
}

.wish-candidate:hover {
  border-color: rgba(98,215,255,.24);
  background: rgba(98,215,255,.055);
  color: var(--text);
}

.wish-candidate.is-me {
  border-color: rgba(232,199,115,.35);
  background: rgba(232,199,115,.07);
}

.wish-candidate-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(232,199,115,.9), rgba(98,215,255,.4));
  color: #081018;
  font-size: 11px;
  font-weight: 900;
}

.wish-candidate strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wish-candidate small {
  display: block;
  color: var(--text3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wish-candidate em {
  color: var(--gold);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.market-card-media {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  overflow: hidden;
}

.market-card-media img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.market-card-media i {
  color: var(--gold);
  font-size: 28px;
}

.market-card-body {
  min-width: 0;
}

.market-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.market-card-title strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-tag {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--gold);
  background: rgba(239,199,104,.11);
  border: .5px solid rgba(239,199,104,.22);
  font-size: 10px;
  font-weight: 800;
}

.market-meta,
.market-card-foot,
.market-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.market-meta {
  margin-top: 7px;
}

.market-meta span {
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  color: var(--text3);
  font-size: 10px;
}

.market-card p {
  margin: 10px 0 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
}

.market-card-foot {
  justify-content: space-between;
  margin-top: 12px;
}

.market-card-foot span {
  color: var(--gold);
  font-weight: 900;
}

.market-card-foot small {
  color: var(--text3);
}

.market-actions {
  margin-top: 10px;
}

.market-offers {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: .5px solid rgba(255,255,255,.08);
}

.market-offers > span {
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.market-offers div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text2);
  font-size: 12px;
}

.market-offers em {
  color: var(--gold);
  font-style: normal;
  font-size: 10px;
}

/* Two-sided trade confirmation. Both ticks read at a glance, so it is obvious
   which half of the deal everyone is still waiting on. */
.market-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: .5px solid rgba(255,255,255,.08);
  font-size: 11px;
}

.market-confirm span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text3);
}

.market-confirm span.is-done {
  color: #7ee787;
}

.market-confirm i {
  font-size: 14px;
}

/* Search-backed item picker. The results float over the form rather than
   pushing it down, so the fields below do not jump while you type. */
.item-picker {
  position: relative;
  display: grid;
  gap: 6px;
}

.item-picker-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px;
  border: .5px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}

.item-picker-row,
.item-picker-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text2);
  text-align: left;
  cursor: pointer;
}

.item-picker-row:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.item-picker-row img,
.item-picker-chosen img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.item-picker-row span,
.item-picker-chosen span {
  display: grid;
  min-width: 0;
}

.item-picker-row strong,
.item-picker-chosen strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.item-picker-row small,
.item-picker-chosen small {
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.item-picker-chosen {
  cursor: default;
  border: .5px solid rgba(232,199,115,.28);
  background: rgba(232,199,115,.07);
}

.item-picker-chosen .mini-action {
  margin-left: auto;
}

.item-picker-empty {
  margin: 0;
  padding: 10px;
  color: var(--text3);
  font-size: 11px;
}

.catalog-search {
  margin-bottom: 12px;
}

.item-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.catalog-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 11px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}

.catalog-item div {
  grid-row: span 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(0,0,0,.22);
}

.catalog-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.catalog-item strong,
.catalog-item span,
.catalog-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item span,
.catalog-item small {
  color: var(--text3);
  font-size: 11px;
}

.catalog-item a {
  color: var(--blue);
  font-size: 11px;
  text-decoration: none;
}

.tl-modules .module-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.tl-modules .module-grid.module-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 14px;
}

.tl-modules .module-grid > div {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}

.market-empty {
  min-height: 130px;
}

.guild-loot-board {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.guild-loot-row {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: 14px;
  padding: 13px;
  border: .5px solid rgba(98,215,255,.14);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(98,215,255,.05), transparent 50%),
    rgba(8,14,24,.72);
}

.guild-loot-item {
  min-width: 0;
}

.guild-loot-item strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-loot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.guild-loot-meta span {
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  color: var(--text3);
  font-size: 10px;
}

.guild-loot-item p {
  margin: 10px 0 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
}

.guild-loot-candidates {
  min-width: 0;
  padding: 10px;
  border: .5px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.guild-loot-candidates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
}

.wish-candidate-list.is-compact {
  margin-top: 8px;
}

.guild-loot-empty {
  margin: 8px 0 0;
  color: var(--text3);
  font-size: 12px;
}

@media (max-width: 900px) {
  .guild-loot-row {
    grid-template-columns: 1fr;
  }
}

/* ── Crafting demand board ── */
/* The point of this board is scanability: a crafter should find their bench in
   one glance and read the queue under it without clicking anything. */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
}

.craft-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: .5px solid rgba(232,199,115,.20);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(150deg, rgba(232,199,115,.07), transparent 55%),
    rgba(8,14,24,.74);
}

/* A bench with nothing queued still shows, so you can see there is no demand
   rather than wondering whether it is missing. It just stops competing. */
.craft-card.is-quiet {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.015);
  opacity: .58;
}

.craft-card header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.craft-card header i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(232,199,115,.10);
  color: var(--gold);
  font-size: 18px;
}

.craft-card.is-quiet header i {
  background: rgba(255,255,255,.05);
  color: var(--text3);
}

.craft-card header strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.craft-card header small {
  display: block;
  margin-top: 2px;
  color: var(--text3);
  font-size: 10.5px;
  line-height: 1.35;
}

.craft-count {
  min-width: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(232,199,115,.14);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.craft-card.is-quiet .craft-count {
  background: rgba(255,255,255,.05);
  color: var(--text3);
}

.craft-wanted {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.craft-wanted li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  font-size: 12px;
}

.craft-wanted li:hover { background: rgba(255,255,255,.05); }

.craft-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.craft-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Who wants it sits under the name, quieter: useful once you have decided to
   make the thing, noise while you are still scanning the list. */
.craft-who {
  grid-column: 1;
  color: var(--text3);
  font-size: 10.5px;
}

.craft-pay {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--text2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Someone is paying real money for this one. That is the line a crafter is
   scanning for, so it is the only thing on the row allowed to be gold. */
.craft-pay.pays {
  color: var(--gold);
  font-weight: 700;
}

.craft-empty {
  margin: 0;
  color: var(--text3);
  font-size: 11.5px;
}

.craft-unplaced {
  margin-top: 16px;
  padding-top: 14px;
  border-top: .5px solid var(--border);
}

@media (max-width: 720px) {
  .craft-grid { grid-template-columns: 1fr; }
}

/* ── Auction bidding ── */
/* The amount to beat is what everyone opens an auction to find out, so it gets
   its own line rather than competing with the rows underneath. */
.bid-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: .5px solid rgba(232,199,115,.24);
  border-radius: 8px;
  background: rgba(232,199,115,.07);
}

.bid-top-amount {
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bid-top-who { color: var(--text3); font-size: 11px; }
.bid-top .btn { margin-left: auto; }

.market-offers time {
  color: var(--text3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* The bid that is currently winning, marked in the history too so the line and
   the row above it agree at a glance. */
.market-offers .is-top-bid strong { color: var(--gold); }
.market-offers .is-top-bid small { color: var(--gold); font-weight: 700; }

.bid-more { color: var(--text3); font-size: 10px; }

.bid-help {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: .5px solid rgba(232,199,115,.22);
  border-radius: 8px;
  background: rgba(232,199,115,.06);
  font-size: 12px;
}

.bid-help strong {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.bid-steps { display: flex; flex-wrap: wrap; gap: 6px; }


/* ── Page heroes with an illustration ── */
/* Shared by the marketplace and the events header. Both put copy over a wide
   painting, so the layering, the veil that keeps type legible and the shadows
   live here once instead of being copied per page. */
.has-hero-image {
  position: relative;
  overflow: hidden;
  /* How hard the veil bites. Tuned per banner, because how much a painting can
     take depends on how bright it is: a sunlit plaza survives what turns a
     night scene into a black rectangle. */
  --veil-strong: .90;
  --veil-mid: .62;
  --veil-soft: .18;
  --veil-end: 72%;
}

/* Cropped, never squashed: the art is far wider than the banner is ever shown. */
.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Darkens the side the copy sits on and lets the far side stay visible, plus a
   foot so the banner melts into the page instead of cutting. */
.has-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(102deg,
      rgba(5,9,19,var(--veil-strong)) 0%,
      rgba(5,9,19,var(--veil-mid)) 28%,
      rgba(5,9,19,var(--veil-soft)) 52%,
      rgba(5,9,19,0) var(--veil-end)),
    linear-gradient(0deg, rgba(5,9,19,.5) 0%, rgba(5,9,19,0) 45%);
}

/* Everything that is not the painting sits above the veil. */
.has-hero-image > *:not(.hero-scene) {
  position: relative;
  z-index: 2;
}

.has-hero-image h1 {
  text-shadow: 0 2px 18px rgba(5,9,19,.9), 0 1px 3px rgba(5,9,19,.8);
}

.has-hero-image p,
.has-hero-image .eyebrow {
  text-shadow: 0 1px 10px rgba(5,9,19,.9);
}

/* ── Marketplace hero ── */
/* The copy sits left, and the busiest part of the painting -- the plaza and the
   stalls -- is on the right, so the crop leans that way. */
.market-hero .hero-scene { object-position: 68% 50%; }

.market-hero {
  min-height: 268px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: 28px;
  border: .5px solid rgba(232,199,115,.20);
  border-radius: var(--radius);
}

.market-hero-copy h1 {
  margin: 6px 0 8px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -.5px;
}

.market-hero-copy p {
  max-width: 46ch;
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
}

.market-hero-stats {
  display: flex;
  gap: 10px;
  align-self: end;
}

.market-hero-stats div {
  min-width: 84px;
  padding: 10px 12px;
  border: .5px solid rgba(232,199,115,.20);
  border-radius: 10px;
  /* The painting behind this is a sunlit plaza, so the tiles need to hold
     their own against it rather than assuming a dark backdrop. */
  background: rgba(6,10,18,.80);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  text-align: center;
}

.market-hero-stats strong {
  display: block;
  color: var(--gold);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.market-hero-stats span {
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

@media (max-width: 760px) {
  .market-hero { grid-template-columns: 1fr; min-height: 300px; }
  .market-hero-stats { flex-wrap: wrap; }
}

.bid-clock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text3);
  font-size: 11px;
}

/* A finished auction stops inviting bids: the warm frame goes cold and the
   amount reads as a result rather than a target. */
.bid-top.is-ended {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.bid-top.is-ended .bid-top-amount { color: var(--text2); }
.bid-top.is-ended .bid-clock { color: var(--red); }

/* ── Season ranking ── */
.rank-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.rank-hero h1 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}

.rank-hero p { max-width: 52ch; margin: 0; color: var(--text2); font-size: 13px; line-height: 1.5; }

/* Your own standing, first thing on the page: on a leaderboard the question is
   always "where am I", and hunting for your own row answers it slowly. */
.rank-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 260px;
  padding: 14px 16px;
  border: .5px solid color-mix(in srgb, var(--tier-color) 34%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tier-color) 12%, transparent), transparent 60%),
    rgba(8,13,22,.8);
}

.rank-card-badge {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
}

.rank-card-badge img { width: 100%; height: 100%; object-fit: contain; }

.rank-card-body > span { color: var(--text3); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.rank-card-body strong { display: block; color: var(--tier-color); font-size: 19px; line-height: 1.2; }
.rank-card-body small { color: var(--text3); font-size: 11px; }

.rank-bar {
  height: 5px;
  margin: 7px 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.rank-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tier-color);
}

.rank-bar.is-max span { background: linear-gradient(90deg, var(--tier-color), #fff6d8); }

/* Podium: the winner sits centre and taller, which is the shape everyone
   already reads as first place without needing to be told. */
.rank-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.podium-slot {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: .5px solid color-mix(in srgb, var(--tier-color) 26%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tier-color) 10%, transparent), transparent 70%),
    rgba(8,13,22,.7);
  text-align: center;
}

.podium-gold { padding: 26px 12px; border-color: rgba(232,199,115,.45); }
.podium-gold .podium-place { color: var(--gold); font-size: 30px; }
.podium-gold .podium-avatar { width: 68px; height: 68px; font-size: 28px; }

.podium-place { color: var(--text3); font-size: 22px; font-weight: 800; line-height: 1; }

/* The ornate ring is the border now, so the plain circle underneath loses its
   own outline -- two rings around one face reads as a mistake. The avatar is
   inset because the artwork's opening is smaller than its bounding box. */
.podium-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  color: var(--tier-color);
  font-size: 24px;
}

.podium-avatar .rank-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.podium-gold .podium-avatar { width: 104px; height: 104px; }

.podium-avatar .class-dot { position: absolute; right: 12%; bottom: 14%; }

/* The member's own photo, not a tier glyph: on a podium you want to recognise
   the person at a glance. Initials stand in when there is no avatar. */
.podium-avatar .user-av {
  width: 60%;
  height: 60%;
  font-size: 15px;
}

.podium-gold .podium-avatar .user-av { font-size: 19px; }
.podium-slot strong { color: var(--text); font-size: 14px; }
.podium-class { color: var(--text3); font-size: 11px; }
.podium-slot b { color: var(--gold); font-size: 15px; font-variant-numeric: tabular-nums; }

.rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: .5px solid color-mix(in srgb, var(--tier-color) 34%, transparent);
  background: color-mix(in srgb, var(--tier-color) 12%, transparent);
  color: var(--tier-color);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.rank-table .member-data-row {
  grid-template-columns: 46px minmax(180px, 1fr) minmax(130px, .9fr) 116px 74px;
  min-width: 680px;
}

.rank-who {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.rank-who strong { display: block; color: var(--text); font-size: 12.5px; }
.rank-who small { display: block; color: var(--text3); font-size: 10.5px; }

.rank-position { color: var(--text3); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Your own row, so you can find yourself in a long table without counting. */
.rank-table .is-me {
  background: rgba(232,199,115,.07);
  box-shadow: inset 2px 0 0 var(--gold);
}






/* The five ranks read as a ladder, so they sit in a row. Restored after a
   careless cleanup regex took this rule out with a neighbouring one, which left
   every step stacked full width down the page. */
.tier-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.tier-step {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px;
  border: .5px solid rgba(255,255,255,.06);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  color: var(--text3);
  text-align: center;
}

.tier-frame {
  width: 58px;
  height: 58px;
  object-fit: contain;
  /* Unreached ranks sit back so the one you hold reads first. */
  opacity: .42;
  filter: grayscale(.55);
  transition: opacity .2s ease, filter .2s ease;
}
.tier-step strong { color: var(--text2); font-size: 12px; }
.tier-step small { font-size: 10px; }

/* The one you are on, so the scale reads as a ladder you are standing on. */
.tier-step.is-current {
  border-color: color-mix(in srgb, var(--tier-color) 40%, transparent);
  background: color-mix(in srgb, var(--tier-color) 10%, transparent);
}

.tier-step.is-current .tier-frame { opacity: 1; filter: none; }
.tier-step.is-current strong { color: var(--tier-color); }

@media (max-width: 820px) {
  .rank-hero { grid-template-columns: 1fr; }
  .rank-podium { grid-template-columns: 1fr; }
  .podium-gold { padding: 16px 12px; }
}

.tier-pace {
  color: color-mix(in srgb, var(--tier-color) 70%, transparent);
  font-size: 10px;
  font-weight: 600;
}

/* Each class board is the full treatment -- podium then table -- so it needs
   breathing room between the tab strip and the podium. */
/* Only ever laid out when it is the visible one. A bare `.rank-class-panel`
   with `display: grid` sits below `.market-tab-panel { display: none }` in this
   file at the same specificity, so it won the cascade and every class panel
   stayed on screen at once -- the tabs looked broken because nothing hid. */
.market-tab-panel.rank-class-panel.is-active {
  display: grid;
  padding-top: 14px;
  gap: 14px;
}

.rank-class-panel .rank-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* A class with one or two members should not stretch a lone card across the
   whole row; it looks like a bug rather than a small class. */
.rank-class-panel .rank-podium:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 320px); }
.rank-class-panel .rank-podium:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 300px)); }

.market-tab .class-dot { margin-right: 2px; }

.rank-all-on-podium {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  color: var(--text3);
  font-size: 12px;
  text-align: center;
}

.planning-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  min-height: 170px;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 184, 210, .16), transparent 34%),
    linear-gradient(135deg, rgba(232,199,115,.10), rgba(8, 14, 24, .96) 42%, rgba(39, 91, 105, .20));
}

.planning-hero h1 {
  max-width: 760px;
  margin: 8px 0 8px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .95;
  letter-spacing: 0;
}

.planning-hero p {
  max-width: 620px;
  margin: 0;
  color: var(--text2);
  font-size: 14px;
}

.planning-hero-stats {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.planning-hero-stats span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(4, 8, 13, .48);
  color: var(--text3);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.planning-hero-stats strong {
  color: var(--gold);
  font-size: 18px;
}

.planning-tabs { margin: 14px 0; }

.planning-modal {
  width: min(640px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 36px));
  overflow: auto;
  padding: 22px;
  border-color: rgba(232, 199, 115, .22);
  background:
    radial-gradient(circle at 18% 8%, rgba(70, 184, 210, .12), transparent 28%),
    linear-gradient(145deg, rgba(12, 20, 34, .98), rgba(5, 8, 13, .98));
}

.planning-modal.wide-modal {
  width: min(860px, calc(100vw - 28px));
}

.planning-modal-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.planning-modal-head h2 {
  margin: 0;
  letter-spacing: 0;
}

.planning-modal-head p {
  max-width: 520px;
  margin: 5px 0 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.45;
}

.planning-modal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: .5px solid rgba(232, 199, 115, .3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(232,199,115,.34), transparent 45%),
    rgba(232,199,115,.08);
  color: var(--gold);
  box-shadow: 0 0 24px rgba(232,199,115,.12);
}

.planning-template-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 18px;
}

.planning-template {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px;
  border: .5px solid rgba(70, 184, 210, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(70,184,210,.08), rgba(232,199,115,.05)),
    rgba(8, 14, 24, .76);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.planning-template:hover,
.planning-template:focus-visible {
  border-color: rgba(232,199,115,.46);
  color: var(--gold);
  box-shadow: 0 0 18px rgba(232,199,115,.12);
}

.planning-modal .field-label {
  margin-top: 10px;
}

.planning-modal .form-input {
  background: rgba(4, 8, 13, .82);
}

.market-tab-panel[data-planning-panel].is-active {
  display: grid;
  gap: 14px;
}

.market-tab-panel[data-leaders-panel].is-active {
  display: grid;
  gap: 14px;
}

.planning-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.planning-main-panel,
.planning-side-panel {
  min-height: 180px;
}

.planning-task-list {
  display: grid;
  gap: 10px;
}

.planning-task-card,
.daily-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: .5px solid rgba(70, 184, 210, .18);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(70, 184, 210, .07), transparent 40%),
    rgba(8, 14, 24, .76);
}

.daily-card {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 96px;
}

.planning-task-card.is-complete,
.daily-card.is-complete {
  border-color: rgba(68, 211, 123, .32);
  background:
    linear-gradient(90deg, rgba(68, 211, 123, .08), transparent 42%),
    rgba(8, 14, 24, .72);
}

.planning-task-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
}

.planning-task-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

.planning-task-copy {
  min-width: 0;
}

.planning-task-copy p,
.recommendation-card p,
.guide-card p,
.daily-card p {
  margin: 6px 0 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.45;
}

.planning-task-head,
.recommendation-head,
.guide-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.planning-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: .5px solid rgba(232,199,115,.22);
  border-radius: 8px;
  background: rgba(232,199,115,.08);
  color: var(--gold);
}

.planning-task-head strong,
.daily-card strong,
.recommendation-card h3,
.guide-card h3 {
  color: var(--text);
}

.planning-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.planning-meta span,
/* Cadence and priority are the two things you read off a plan at a glance:
   how often it comes back, and whether it matters. Both were being rendered as
   modifier classes with nothing behind them. */
.cadence-pill.cadence-once   { border-color: rgba(159,178,196,.4); color: #9fb2c4; }
.cadence-pill.cadence-daily  { border-color: rgba(98,215,255,.45); color: #62d7ff; }
.cadence-pill.cadence-weekly { border-color: rgba(232,199,115,.45); color: #e8c773; }

.recommendation-card { border-left: 3px solid rgba(255,255,255,.08); }
.recommendation-card.priority-1 { border-left-color: #f87171; }
.recommendation-card.priority-2 { border-left-color: #e8c773; }
.recommendation-card.priority-3 { border-left-color: #9fb2c4; }

.cadence-pill,
.guide-card-top span,
.guide-card-top b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
}

.cadence-daily { color: #5de0ff; background: rgba(93,224,255,.12); }
.cadence-weekly { color: var(--gold); background: rgba(232,199,115,.13); }
.cadence-once { color: #a5b4fc; background: rgba(165,180,252,.13); }

.planning-actions,
.recommendation-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.planning-mini-list {
  display: grid;
  gap: 8px;
}

.planning-mini-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 12px;
  border: .5px solid rgba(232,199,115,.18);
  border-radius: 8px;
  background: rgba(232,199,115,.055);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.planning-mini-item small {
  color: var(--text3);
  font-size: 11px;
}

.daily-grid,
.recommendation-grid,
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.recommendation-card,
.guide-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: .5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(70,184,210,.055), transparent 46%),
    rgba(8, 14, 24, .76);
  position: relative;
  overflow: hidden;
}

.recommendation-card::before,
.guide-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(232,199,115,.7), rgba(70,184,210,.45));
  opacity: .65;
}

.recommendation-card.priority-1 {
  border-color: rgba(232,199,115,.35);
  box-shadow: inset 0 0 0 1px rgba(232,199,115,.06);
}

.recommendation-card.priority-3 {
  opacity: .88;
}

.guide-card.is-pinned {
  border-color: rgba(232,199,115,.36);
  background:
    linear-gradient(135deg, rgba(232,199,115,.08), transparent 45%),
    rgba(8, 14, 24, .78);
}

.guide-card details {
  border-top: .5px solid rgba(255,255,255,.08);
  padding-top: 10px;
}

.guide-card summary {
  color: var(--gold);
  cursor: pointer;
  font-weight: 700;
}

.guide-body {
  margin-top: 10px;
  color: var(--text2);
  white-space: pre-wrap;
  line-height: 1.55;
}

.planning-guide-editor {
  min-height: 260px;
  line-height: 1.55;
  resize: vertical;
}

.planning-empty {
  min-height: 140px;
  border: .5px dashed rgba(255,255,255,.12);
  border-radius: 10px;
}

.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1100px) {
  .planning-hero,
  .planning-board {
    grid-template-columns: 1fr;
  }

  .planning-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .planning-template-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-task-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .planning-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .planning-hero-stats {
    grid-template-columns: 1fr;
  }
}

/* ── Leaders / Attendance ── */
.leaders-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  gap: 16px;
  align-items: stretch;
  min-height: 190px;
  background:
    radial-gradient(circle at 15% 20%, rgba(98,215,255,.12), transparent 34%),
    radial-gradient(circle at 86% 28%, rgba(232,199,115,.09), transparent 32%),
    linear-gradient(135deg, rgba(11,18,31,.92), rgba(8,13,23,.84));
}

.leaders-hero-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.leaders-hero-copy h1 {
  max-width: 760px;
  color: var(--text);
  font-size: clamp(34px, 4vw, 64px);
  line-height: .96;
  margin: 0;
}

.leaders-hero-copy p {
  max-width: 680px;
  color: var(--text2);
}

.leaders-hero-stats,
.leader-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.leader-kpi-card,
.leader-mini-stats > div {
  min-height: 78px;
  padding: 14px;
  border: .5px solid rgba(232,199,115,.18);
  border-radius: 8px;
  background: rgba(7, 12, 21, .62);
}

.leader-kpi-card strong,
.leader-mini-stats strong {
  display: block;
  color: var(--gold);
  font-size: 28px;
  line-height: 1;
}

.leader-kpi-card span,
.leader-mini-stats span {
  display: block;
  margin-top: 8px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.leaders-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
  gap: 12px;
  margin-top: 12px;
}

.leaders-overview-panel {
  min-height: 180px;
}

.leader-role-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.leader-role-strip > div {
  padding: 10px;
  border: .5px solid color-mix(in oklab, var(--class-color) 36%, var(--border));
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--class-color) 10%, transparent), rgba(255,255,255,.02));
}

.leader-role-strip span,
.leader-role-strip strong {
  display: block;
}

.leader-role-strip span {
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
}

.leader-role-strip strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
}

.leader-top-list {
  display: grid;
  gap: 2px;
}

.leader-top-list a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 7px 8px;
  border-bottom: .5px solid rgba(255,255,255,.07);
  color: var(--text2);
}

.leader-top-list strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-top-list b {
  color: var(--gold);
}

.leaders-attendance-panel {
  margin-top: 12px;
  overflow: hidden;
}

.leader-attendance-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.leader-attendance-header p {
  color: var(--text3);
  margin-top: 6px;
}

.leader-attendance-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.leader-attendance-tools .form-input {
  width: 240px;
}

.leader-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.leader-matrix-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
}

.legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
}

.legend-cell.attended { background: #79e780; }
.legend-cell.yes { background: rgba(28, 214, 125, .45); }
.legend-cell.maybe { background: rgba(232, 199, 115, .62); }
.legend-cell.no { background: rgba(255, 104, 119, .72); }
.legend-cell.bench { background: rgba(180, 132, 255, .62); }

.leader-matrix-scroll {
  max-height: 68vh;
  overflow: auto;
  border: .5px solid rgba(98,215,255,.16);
  border-radius: 10px;
  background: rgba(3, 7, 13, .42);
}

.leader-matrix {
  min-width: calc(300px + (var(--member-count) * 42px));
}

.leader-matrix-head,
.leader-matrix-row {
  display: grid;
  grid-template-columns: 300px repeat(var(--member-count), 42px);
}

.leader-matrix-head {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 154px;
  border-bottom: .5px solid rgba(255,255,255,.09);
  background: rgba(10, 13, 22, .98);
}

.leader-event-axis,
.leader-event-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  background: rgba(9, 14, 24, .98);
  border-right: .5px solid rgba(255,255,255,.08);
}

.leader-event-axis {
  display: grid;
  align-content: end;
  padding: 16px;
}

.leader-event-axis strong,
.leader-event-cell strong {
  color: var(--text);
}

.leader-event-axis small,
.leader-event-cell small,
.leader-event-cell span {
  color: var(--text3);
  font-size: 11px;
}

.leader-member-head {
  position: relative;
  border-right: .5px solid rgba(255,255,255,.05);
}

.leader-member-rail {
  position: absolute;
  left: 7px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 132px;
  transform: rotate(-56deg);
  transform-origin: left center;
  color: var(--text2);
}

.leader-member-rail b {
  max-width: 78px;
  overflow: hidden;
  color: color-mix(in oklab, var(--class-color) 76%, var(--text));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-member-rail em {
  color: var(--gold);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.leader-matrix-row {
  min-height: 38px;
  border-bottom: .5px solid rgba(255,255,255,.055);
}

.leader-event-cell {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
}

.leader-attendance-cell {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-right: .5px solid rgba(255,255,255,.045);
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 900;
}

.leader-attendance-cell.status-attended {
  background: linear-gradient(180deg, rgba(121,231,128,.94), rgba(88,205,99,.88));
  color: #061208;
}

.leader-attendance-cell.status-yes {
  background: rgba(28, 214, 125, .26);
  color: #70ffa8;
}

.leader-attendance-cell.status-maybe {
  background: rgba(232,199,115,.18);
  color: var(--gold);
}

.leader-attendance-cell.status-no {
  background: rgba(255,104,119,.16);
  color: #ff7b88;
}

.leader-attendance-cell.status-bench {
  background: rgba(180,132,255,.14);
  color: #c5a3ff;
}

[data-attendance-member][hidden] {
  display: none !important;
}

.attendance-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.attendance-history-card {
  border: .5px solid rgba(98,215,255,.16);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(9, 18, 31, .88), rgba(7, 10, 17, .92));
  padding: 14px;
}

.attendance-history-card .panel-header {
  margin-bottom: 12px;
}

.attendance-history-card small {
  color: var(--text3);
}

.attendance-history-card .panel-header strong {
  color: var(--gold);
  font-size: 28px;
}

.attendance-history-list {
  display: grid;
  gap: 6px;
}

.attendance-history-list a,
.attendance-history-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: .5px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  padding: 9px 10px;
}

.attendance-history-list span {
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-history-list b {
  color: var(--gold);
}

@media (max-width: 1100px) {
  .leaders-hero,
  .leaders-board-grid {
    grid-template-columns: 1fr;
  }

  .leader-attendance-header {
    flex-direction: column;
  }

  .leader-attendance-tools,
  .leader-attendance-tools .form-input {
    width: 100%;
  }
}

/* ---------- Editor de guias ---------- */

/* Wider than the other planning modals because a guide is written, not filled
   in: the text and its preview sit side by side, and a screenshot has to be
   readable at the size it will be published. */
/* `max-width` and not only `width`: the base .modal caps every dialog at 480px,
   which was quietly overriding the width set here -- and had been overriding
   .wide-modal the same way. */
.planning-modal.guide-modal {
  width: calc(100vw - 40px);
  max-width: 1720px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}

/* Three short answers on one band, so the rows they save go to the editor. */
.guide-meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin-bottom: 4px;
}

.guide-meta-wide { grid-column: 1 / -1; }

.guide-meta .form-input { margin-bottom: 0; }

.guide-meta textarea.form-input { resize: vertical; }

.guide-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
}

.guide-toolbar .mini-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.guide-toolbar-count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--muted);
}

/* The whole editor resizes as one block from its bottom-right corner, rather
   than each pane having its own handle: text and preview are read together and
   dragging them apart only makes one of them useless. It starts tall enough to
   write in and remembers nothing -- the drag is for this sitting. */
.guide-editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  height: clamp(320px, 60vh, 900px);
  min-height: 240px;
  overflow: hidden;
  resize: vertical;
  /* Without this the modal's flex layout shrinks the block straight back to
     whatever fits, which makes the resize handle look broken: you drag it
     taller and it springs back. It keeps its height and the modal scrolls. */
  flex: none;
}

.guide-editor-split .planning-guide-editor {
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
  /* The block above is the handle; a second one inside it would fight it. */
  resize: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86rem;
  line-height: 1.6;
}

.guide-preview {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  font-size: .9rem;
  line-height: 1.65;
}

.guide-preview-empty {
  color: var(--muted);
  font-style: italic;
}

.guide-image-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.guide-thumb {
  position: relative;
  width: 120px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
}

.guide-thumb img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
}

.guide-thumb figcaption {
  padding: 4px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  color: var(--muted);
  text-align: center;
}

.guide-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 12, 20, .82);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.guide-thumb-remove:hover {
  background: var(--danger, #d9534f);
}

/* ---------- Guia publicada ---------- */

.guide-body {
  font-size: .92rem;
  line-height: 1.7;
}

.guide-body h3,
.guide-body h4,
.guide-body h5 {
  margin: 16px 0 6px;
  color: var(--text);
}

.guide-body h3 { font-size: 1.02rem; }
.guide-body h4 { font-size: .94rem; }
.guide-body h5 { font-size: .88rem; }

.guide-body p { margin: 0 0 8px; }

.guide-body ul {
  margin: 0 0 10px;
  padding-left: 18px;
}

.guide-body li { margin-bottom: 4px; }

.guide-figure,
.guide-preview .guide-figure {
  margin: 12px 0;
}

.guide-figure img,
.guide-preview .guide-figure img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

@media (max-width: 900px) {
  /* Below this the two panes are too narrow to write in, so the preview goes
     under the text instead of beside it -- and the block grows to fit both. */
  .guide-editor-split {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    height: clamp(360px, 66vh, 720px);
  }

  .guide-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Guild de inicio ---------- */

.guild-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.guild-card-row .guild-card { min-width: 0; }

.guild-favorite {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
  border: 0.5px solid var(--border2);
  border-radius: 12px;
  background: transparent;
  color: var(--text2);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.guild-favorite:hover {
  color: var(--gold, #e8c773);
  border-color: rgba(232, 199, 115, .4);
}

.guild-card-row.is-favorite .guild-favorite {
  color: var(--gold, #e8c773);
  border-color: rgba(232, 199, 115, .5);
  background: rgba(232, 199, 115, .08);
}

/* ---------- Guia como documento ---------- */

.guide-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--gold, #e8c773);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap .15s ease;
}

.guide-open:hover { gap: 10px; }

/* A guide is read, not scanned, so it gets one column at reading width instead
   of the dashboard's full span. */
.guide-article {
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 32px 36px;
}

.guide-article-head {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.guide-article-head h1 {
  margin: 12px 0 8px;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.2;
}

.guide-article-summary {
  margin: 0 0 8px;
  color: var(--text2);
  font-size: 1rem;
  line-height: 1.6;
}

.guide-article-meta {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}

.guide-draft {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.guide-article .guide-body {
  font-size: 1rem;
  line-height: 1.75;
}

.guide-article .guide-body h3 { font-size: 1.24rem; margin-top: 30px; }
.guide-article .guide-body h4 { font-size: 1.06rem; margin-top: 24px; }

.guide-article .guide-figure img,
.guide-article .guide-image img {
  max-width: 100%;
}

@media (max-width: 720px) {
  .guide-article { padding: 20px 16px 28px; }
}

/* ---------- Colores del texto de una guia ---------- */

/* One class per name the renderer publishes. Authors pick a name, never a
   value, so the palette stays the theme's to decide and no guide can put
   unreadable text on the page. */
.gc-gold   { color: #e8c773; }
.gc-cyan   { color: #46b8d2; }
.gc-green  { color: #6fcf8b; }
.gc-red    { color: #e2726e; }
.gc-purple { color: #b18cf0; }
.gc-muted  { color: var(--muted); }

.guide-colors {
  display: inline-flex;
  gap: 4px;
  padding-left: 4px;
}

.guide-color {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.guide-color:hover {
  border-color: currentColor;
  background: rgba(255, 255, 255, .06);
}

/* The verification capture on a card somebody else is reading. A thumbnail
   that opens full size, and only when there is one: the old card reserved a
   frame for it on every character, which is what made those cards so tall. */
.character-capture {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background: none;
  cursor: zoom-in;
}

.character-capture img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  transition: transform .2s ease;
}

.character-capture:hover img { transform: scale(1.04); }

.character-capture span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: linear-gradient(transparent, rgba(4, 7, 12, .92));
  color: var(--text2);
  font-size: .72rem;
}

/* ---------- Seguridad de la cuenta ---------- */

.account-security { display: grid; gap: 14px; }

.security-row {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

.security-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.security-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .9rem;
}

.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}

.security-badge.is-ok {
  color: #6fcf8b;
  background: rgba(111, 207, 139, .12);
}

.security-badge.is-warn {
  color: #e8c773;
  background: rgba(232, 199, 115, .12);
}

.security-value {
  margin: 8px 0 0;
  font-size: .95rem;
  word-break: break-all;
}

.security-note {
  margin: 6px 0 0;
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.5;
}

.security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Says how the secrets are handled, next to the buttons that create them.
   Somebody deciding whether to hand over a real address reads this here or
   nowhere. */
.security-footnote {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(70, 184, 210, .07);
  color: var(--text2);
  font-size: .8rem;
  line-height: 1.55;
}

.security-footnote i {
  flex: none;
  margin-top: 2px;
  color: #46b8d2;
  font-size: 1rem;
}

/* ---------- Paginas de cuenta sin sesion ---------- */

.auth-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  width: min(460px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(10, 14, 22, .9);
  text-align: center;
}

.auth-card h1 {
  margin: 16px 0 8px;
  font-size: 1.4rem;
}

.auth-card > p {
  margin: 0 0 22px;
  color: var(--text2);
  line-height: 1.6;
}

.auth-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(232, 199, 115, .12);
  color: #e8c773;
  font-size: 1.6rem;
}

.auth-mark.is-ok { background: rgba(111, 207, 139, .13); color: #6fcf8b; }
.auth-mark.is-bad { background: rgba(226, 114, 110, .13); color: #e2726e; }

.auth-form {
  display: grid;
  gap: 4px;
  text-align: left;
}

.auth-form .btn { margin-top: 14px; }

.auth-hint {
  margin: 4px 0 0;
  color: var(--text3, var(--text2));
  font-size: .76rem;
  line-height: 1.5;
}

.landing-body .auth-shell { position: relative; z-index: 1; }

/* A button that reads as a link, for the secondary way out of a form. */
.link-button {
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: var(--text2);
  font-size: .82rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .15s ease;
}

.link-button:hover { color: var(--gold, #e8c773); }

.applications-panel {
  overflow: hidden;
}

.applications-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(110, 199, 255, .16);
  border-radius: 10px;
  background: rgba(4, 10, 18, .55);
}

.applications-review-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.applications-review-table th,
.applications-review-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(110, 199, 255, .12);
  text-align: left;
  vertical-align: middle;
}

.applications-review-table th {
  color: var(--text3, var(--text2));
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.application-row {
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.application-row:hover,
.application-row.selected {
  background: rgba(55, 166, 221, .08);
}

.application-row.selected {
  box-shadow: inset 3px 0 0 var(--gold, #e8c773);
}

.application-applicant {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.application-avatar {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(110, 199, 255, .22);
  border-radius: 8px;
  background: rgba(10, 16, 28, .75);
  color: var(--gold, #e8c773);
}

.application-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.application-avatar.empty {
  font-size: 1.25rem;
}

.application-character {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.application-character strong {
  color: var(--text, #f3f6ff);
}

.application-character span {
  color: var(--text2, #9aa7b8);
  font-size: .82rem;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(55, 166, 221, .16);
  color: #8edfff;
  font-size: .78rem;
  font-weight: 700;
}

.metric-cell strong {
  color: var(--gold, #e8c773);
  font-size: 1.05rem;
}

.weapon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 280px;
}

.weapon-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 216, 113, .2);
  border-radius: 7px;
  background: rgba(255, 216, 113, .08);
  color: var(--text, #f3f6ff);
  font-size: .78rem;
}

.application-actions.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.application-detail-row.hidden {
  display: none;
}

.application-detail-row td {
  padding: 0;
  background: rgba(7, 13, 25, .78);
}

.application-detail-panel {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-top: 1px solid rgba(255, 216, 113, .16);
}

.application-detail-media {
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(110, 199, 255, .16);
  border-radius: 10px;
  background: #05070c;
  color: var(--text2, #9aa7b8);
}

.application-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05070c;
}

.application-detail-media.empty {
  gap: 8px;
}

.application-detail-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.application-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.application-detail-header h3 {
  margin: 4px 0 0;
  font-size: 1.5rem;
}

.application-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.application-detail-box {
  padding: 10px 12px;
  border: 1px solid rgba(110, 199, 255, .14);
  border-radius: 8px;
  background: rgba(7, 14, 25, .75);
}

.application-detail-box span,
.application-detail-section .field-label {
  color: var(--text3, var(--text2));
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.application-detail-box strong {
  display: block;
  margin-top: 4px;
  color: var(--text, #f3f6ff);
}

.application-detail-section p {
  margin: 6px 0 0;
  color: var(--text2, #9aa7b8);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .application-detail-panel {
    grid-template-columns: 1fr;
  }

  .application-detail-media {
    min-height: 180px;
  }
}

/* ---------- Vincular un personaje desde el perfil ---------- */

/* Enmarcado aparte del resto del formulario porque es lo unico ahi dentro que
   sustituye lo que la persona escribe por lo que dice el juego. */
.armory-lookup {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(70, 184, 210, .28);
  border-radius: 12px;
  background: rgba(70, 184, 210, .05);
}

.armory-lookup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.armory-lookup-head .field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.armory-lookup-head small {
  color: var(--text2);
  font-size: .76rem;
}

.armory-lookup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.armory-lookup-status {
  color: var(--text2);
  font-size: .82rem;
}

/* ---------- Intercambio ---------- */

/* Lo que doy, la flecha, lo que pido. La linea entera se lee de una pasada,
   que es lo unico que hace util un tablon de trueques. */
.trade-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  font-size: .88rem;
}

.trade-line > i {
  flex: none;
  color: var(--gold, #e8c773);
  font-size: 1.05rem;
}

.trade-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
}

.trade-side img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

.trade-side.is-wanted { color: var(--gold, #e8c773); }

/* Escuchar ofertas no es una pieza, asi que no se disfraza de una. */
.trade-side.is-open {
  color: var(--text2);
  font-weight: 500;
  font-style: italic;
}

.trade-note {
  margin: 0 0 8px;
  color: var(--text2);
  font-size: .78rem;
}

.trade-wants {
  display: grid;
  gap: 8px;
  margin: 4px 0;
  padding: 14px 16px;
  border: 1px solid rgba(232, 199, 115, .28);
  border-radius: 12px;
  background: rgba(232, 199, 115, .05);
}

.trade-wants legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  color: var(--gold, #e8c773);
  font-size: .8rem;
  font-weight: 700;
}

/* Lo que pide la otra parte, delante de quien va a ofertar. */
.trade-asked {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(70, 184, 210, .1);
  color: var(--text);
  font-size: .84rem;
}

.trade-asked i { color: #46b8d2; }

.offer-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.offer-item img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}

/* El precio sigue ahi en un trueque -- alguien puede pedir pieza mas oro --
   pero deja de ser lo principal. */
.is-muted { opacity: .55; }

/* ---------- Ficha de invitacion ---------- */

/* Todo lo que sigue se pinta desde --guild-accent, que la plantilla define con
   el color de la guild. El CSS no sabe de que guild se trata; por eso la misma
   hoja sirve para el morado de VOID y para cualquier otro. */

.invite-body {
  min-height: 100vh;
  background: #05070c;
}

.invite-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  overflow: hidden;
}

/* El halo detras del emblema. Es lo que hace que la pagina se sienta de la
   guild antes de leer una sola palabra. */
.invite-glow {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(760px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--guild-accent) 42%, transparent) 0%,
    transparent 62%
  );
  filter: blur(52px);
  pointer-events: none;
}

.invite-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 38px 34px 30px;
  border: 1px solid color-mix(in oklab, var(--guild-accent) 26%, transparent);
  border-radius: 20px;
  background: rgba(9, 12, 20, .82);
  backdrop-filter: blur(10px);
  text-align: center;
}

.invite-head h1 {
  margin: 18px 0 4px;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  letter-spacing: .01em;
  text-wrap: balance;
}

/* Recortado en circulo, y el motivo es el de siempre: casi ningun logo de
   guild viene con fondo transparente. Ensenarlo entero suena bien -- no le
   comes ninguna punta al sigilo -- pero lo que se ve de verdad es el
   rectangulo negro del PNG, con el brillo siguiendo ese rectangulo en vez de
   seguir el emblema. La forma que ya tiene el dibujo es un disco; el recorte
   lo respeta en vez de inventarse una.

   Lo que se pierde es lo que asome fuera de ese disco, que es poco: los
   emblemas se dibujan centrados. Si alguna vez hace falta el logo completo, la
   tarjeta del directorio lo ensena sin recortar. */
.invite-emblem {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  /* El anillo hace que el recorte se lea como una decision y no como una
     imagen mal cortada, y le da el borde que el PNG no trae. */
  border: 2px solid color-mix(in oklab, var(--guild-accent) 60%, transparent);
  /* Sobre un elemento recortado el drop-shadow sigue la forma recortada, asi
     que el resplandor sale redondo con el emblema. */
  filter: drop-shadow(0 0 26px color-mix(in oklab, var(--guild-accent) 55%, transparent));
}

/* Las iniciales si van en circulo: ahi el circulo es la forma, no un recorte
   de algo que tenia otra. */
.invite-emblem-initials {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--guild-accent);
  color: var(--guild-accent);
  font-size: 2.4rem;
  font-weight: 800;
}

.invite-game {
  margin: 0 0 14px;
  color: var(--text2);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.invite-headline {
  margin: 0;
  color: var(--guild-accent);
  font-size: 1.06rem;
  line-height: 1.5;
  text-wrap: balance;
}

.invite-pitch {
  max-width: 46ch;
  margin: 18px auto 0;
  color: var(--text2);
  font-size: .92rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

.invite-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 4px;
}

.invite-slot {
  min-width: 84px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.invite-slot strong {
  display: block;
  color: var(--slot-color, var(--guild-accent));
  font-size: 1.3rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.invite-slot span {
  color: var(--text2);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.invite-step {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  text-align: center;
}

/* El formulario si va alineado a la izquierda por dentro: una etiqueta
   centrada sobre su campo se lee peor, no mejor. */
.invite-step form {
  display: grid;
  gap: 10px;
  text-align: left;
}

.invite-step .field-label { margin-bottom: 4px; }

.invite-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 44ch;
  margin: 0 auto;
  color: var(--text2);
  font-size: .92rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.invite-note i {
  flex: none;
  color: var(--guild-accent);
  font-size: 1.05rem;
}

.btn-invite {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--guild-accent);
  color: #07090f;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: filter .15s ease, transform .15s ease;
}

.btn-invite:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.invite-secondary {
  color: var(--text2);
  font-size: .84rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.invite-secondary:hover { color: var(--guild-accent); }

/* Dice en voz alta que esto no mete a nadie dentro. Es la promesa que la
   pagina no debe romper, asi que se lee antes de pulsar y no despues. */
.invite-fineprint {
  margin: 0;
  color: var(--text3, var(--text2));
  font-size: .76rem;
  text-align: center;
}

.invite-footer {
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  color: var(--text3, var(--text2));
  font-size: .78rem;
}

.invite-footer a { color: var(--text2); }

@media (max-width: 520px) {
  .invite-card { padding: 28px 20px 24px; }
  .invite-emblem { width: 92px; height: 92px; }
}

/* ---------- Configuracion del enlace de invitacion ---------- */

.invite-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.invite-link-row { display: grid; gap: 8px; }

.invite-link-box {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* El enlace ocupa lo que pueda y los botones lo justo: es lo que se copia, no
   lo que se pulsa. */
.invite-link-box .form-input {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
}

.invite-link-box .btn { flex: none; }

.accent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.accent-swatch {
  flex: none;
  width: 62px;
  height: 40px;
  padding: 4px;
  margin: 0;
  cursor: pointer;
}

.accent-row .field-help { flex: 1 1 180px; margin: 0; }

.settings-divider {
  height: 0;
  margin: 26px 0 20px;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Dos acciones por tarjeta del directorio: mirar antes de decidir, o aplicar
   directamente si ya conoces la guild. */
.guild-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Sin esto el boton se estira a lo alto de su fila -- setenta pixeles de
     alto para dos palabras -- porque el estirado es lo que hace un flex por
     defecto. Un sello tiene su tamano. */
  align-items: center;
}

/* La unica accion de la tarjeta, y la unica puerta al guild: un sello, no un
   boton de formulario. Placa de laton biselada con las esquinas cortadas, que
   es lo que hace que se lea como un juego y no como un panel de administracion.

   `--gold` plano se queda corto para eso, asi que aqui hay degradado: la luz
   arriba, la sombra abajo, y un filo claro dentro del borde oscuro. Es el mismo
   truco con el que se dibuja el metal en cualquier UI de fantasia. */
.btn-apply {
  position: relative;
  overflow: hidden;
  /* En movil la tarjeta estira sus botones a todo el ancho, y sin esto el
     texto se quedaba pegado al borde izquierdo de una placa de 257px. */
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid #5a4413;
  border-radius: 4px;
  /* Esquinas cortadas: sin esto es un rectangulo dorado y nada mas. */
  clip-path: polygon(
    9px 0, calc(100% - 9px) 0, 100% 9px,
    100% calc(100% - 9px), calc(100% - 9px) 100%,
    9px 100%, 0 calc(100% - 9px), 0 9px
  );
  background:
    linear-gradient(180deg, #f6dfa0 0%, #e8c773 42%, #c9a44f 58%, #a6822f 100%);
  color: #2a1e07;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 10px rgba(0,0,0,.45),
    0 0 18px var(--gold-glow);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-apply i {
  font-size: 15px;
  /* El icono grabado en la placa, no pegado encima. */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4));
}

/* El brillo que cruza al pasar por encima. Vive en un pseudoelemento para que
   no toque el fondo del boton: nada se mueve hasta que alguien lo apunta. */
.btn-apply::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}

.btn-apply:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 4px 14px rgba(0,0,0,.5),
    0 0 26px rgba(232,199,115,.5);
}

.btn-apply:hover::after { left: 115%; }

/* Se hunde al pulsarlo: la luz de arriba se apaga y la sombra pasa dentro. */
.btn-apply:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.4),
    0 0 12px var(--gold-glow);
}

.btn-apply:focus-visible {
  outline: 2px solid #fff2cf;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* El destello es adorno; el boton sigue diciendo lo mismo sin el. */
  .btn-apply::after { display: none; }
  .btn-apply,
  .btn-apply:hover,
  .btn-apply:active { transform: none; transition: none; }
}

/* ---------- Instalar el bot ---------- */

.bot-install {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(88, 101, 242, .3);
  border-radius: 12px;
  background: rgba(88, 101, 242, .06);
}

.bot-install-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bot-install-head .field-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.bot-install .panel-hint { margin: 0; }

.bot-install code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .3);
  font-size: .84em;
}

.bot-install .btn { justify-self: start; }

/* Un aviso corto tras volver de una accion externa. Se usaba ya en el perfil
   sin ninguna regla: se veia como texto suelto sin marco ni color. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}

.notice > i {
  flex: none;
  margin-top: 2px;
  font-size: 1.1rem;
  color: var(--text2);
}

.notice strong {
  display: block;
  margin-bottom: 2px;
  font-size: .9rem;
}

.notice p {
  margin: 0;
  color: var(--text2);
  font-size: .84rem;
  line-height: 1.5;
}

.notice.success {
  border-color: rgba(111, 207, 139, .35);
  background: rgba(111, 207, 139, .08);
}

.notice.success > i { color: #6fcf8b; }

/* ---------- Ver una imagen a tamano completo ---------- */

/* Encima de todo, incluido un modal: se abre desde dentro de uno. */
.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(3, 6, 12, .92);
  backdrop-filter: blur(3px);
}

.image-viewer.hidden { display: none; }

.image-viewer figure {
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: 100%;
  max-height: 100%;
}

/* Entera y sin deformar: una captura de inventario se mira para leerla. */
.image-viewer img {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border2);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.image-viewer figcaption {
  color: var(--text2);
  font-size: 12px;
}

.image-viewer-close {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.image-viewer-close:hover { background: rgba(255,255,255,.12); }

/* La pagina de debajo no se desplaza mientras se mira una captura. */
body.has-image-viewer { overflow: hidden; }

/* Cualquier cosa ampliable avisa de que lo es. */
[data-zoom] { cursor: zoom-in; }

/* Lo entregado, en la pestana de leaders. Una fila por peticion y las capturas
   solo al abrirla: son data URLs de varios megas y no caben en una lista. */
.gear-check-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* Como el roster: la tabla mantiene sus columnas y el panel se desplaza. Siete
   celdas apiladas en dos columnas sin cabecera se leen peor que arrastrando. */
.gear-check-panel { overflow-x: auto; }

.gear-check-table {
  min-width: 940px;
  display: grid;
  border: .5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.gear-check-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) 110px minmax(120px, 1fr) minmax(120px, 1fr) 100px 130px 90px;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: .5px solid var(--border);
  font-size: 12px;
}

.gear-check-row:last-child { border-bottom: 0; }
.gear-check-row[hidden] { display: none; }

.gear-check-head {
  min-height: 34px;
  color: var(--text3);
  background: rgba(255,255,255,.018);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
}

.gear-check-member {
  min-width: 0;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear-check-member a { color: inherit; }
.gear-check-member a:hover { color: var(--gold); }

.gear-check-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.gear-check-metrics,
.gear-check-loadout {
  display: grid;
  gap: 1px;
}

.gear-check-metrics b { color: var(--text); }
.gear-check-shots { color: var(--text2); }
.gear-check-shots i { margin-right: 4px; color: var(--gold); }
.is-muted { color: var(--text3); }

.gear-review-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.gear-review-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 7px;
  border: .5px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size: 11px;
  color: var(--text2);
}

.gear-review-metrics b {
  color: var(--gold);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.gear-review-loadout { color: var(--text2); font-size: 12px; }
.gear-review-loadout i { margin-right: 6px; color: var(--text3); }

.gear-review-message {
  padding: 8px 10px;
  border-left: 2px solid var(--gold);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: var(--text2);
}

/* Miniaturas que abren la captura entera: un inventario no se revisa en 160px. */
.gear-review-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.gear-review-shots button {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gear-review-shots img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: .5px solid var(--border);
  transition: border-color .15s ease;
}

.gear-review-shots button:hover img { border-color: var(--gold); }


/* ---------- Gear check ---------- */

.roster-pick {
  display: grid;
  place-items: center;
}

.roster-pick input { cursor: pointer; }

.gear-picked-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--gold, #e8c773);
  color: #07090f;
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Mas ancho que un modal normal: se ensenan hasta ocho capturas y hay que
   poder verlas antes de mandarlas. */
.gear-check-modal {
  width: min(720px, calc(100vw - 28px));
  max-width: min(720px, calc(100vw - 28px));
}

.gear-check-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.gear-check-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(232, 199, 115, .12);
  color: var(--gold, #e8c773);
  font-size: 1.3rem;
}

.gear-check-head .modal-title { margin-bottom: 4px; }
.gear-check-head .modal-hint { margin: 0; }

.gear-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
}

.gear-shots:empty { display: none; }

.gear-shot {
  position: relative;
  width: 118px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.gear-shot img {
  display: block;
  width: 100%;
  height: 76px;
  object-fit: cover;
}

.gear-shot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 12, 20, .85);
  color: #fff;
  cursor: pointer;
}

.gear-shot-remove:hover { background: var(--danger, #d9534f); }

.gear-shot-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Aplazar a la izquierda y enviar a la derecha: la accion que se espera queda
   donde siempre, y la salida no compite con ella. */
.gear-check-footer { justify-content: space-between; }

.gear-check-reminder {
  margin: 6px 0 0;
  color: var(--text3, var(--text2));
  font-size: .78rem;
}