/* =========================================================
   THE TRUE REPUBLIC — SWTOR-style holo UI
   Palette + geometry derived from images/ mockups
   ========================================================= */

/* Palette lifted from swtor.jedipedia.net/static/css/min.css.
   Their tokens are marked (jp); the rest are tints derived from them
   where the layout needed a step the source palette doesn't define. */
:root{
  --cyan:        #43c4ef;   /* jp — primary */
  --cyan-bright: #b0f3ff;   /* jp — highlight */
  --cyan-soft:   #a6e7fc;   /* jp */
  --cyan-mid:    #51a5bc;   /* jp */
  --cyan-dim:    #246980;   /* jp */
  --cyan-line:   #235c7a;   /* jp — input borders */
  --cyan-deep:   #003d76;   /* jp */

  --gold:        #f5c413;   /* jp */
  --gold-soft:   #e9bd54;   /* jp */
  --gold-bright: #ffe9a8;   /* derived — readable gold text */
  --gold-amber:  #ffbb29;   /* jp */
  --gold-dim:    #7e672f;   /* jp */

  --green:       #82ec89;   /* jp */
  --red:         #d8434a;

  --ink:         #030b10;   /* jp — body background */
  --ink-deep:    #010204;   /* jp — field background */
  --panel-1:     rgba(0, 31, 49, .88);   /* jp #001f31 */
  --panel-2:     rgba(0, 44, 68, .74);
  --panel-3:     rgba(1, 20, 32, .82);
  --sub-bg:      rgba(0, 28, 39, .74);   /* jp #001c27 */
  --row:         rgba(5, 40, 72, .52);   /* jp #052848 */
  --row-alt:     rgba(17, 36, 48, .48);  /* jp #112430 */

  --txt:         #d2f5fb;   /* jp */
  --txt-dim:     #43c4ef;   /* jp */
  --txt-mute:    #51a5bc;   /* jp */

  --notch:       12px;
  --glow:        0 0 14px rgba(67, 196, 239, .35);
  --glow-gold:   0 0 14px rgba(245, 196, 19, .32);

  /* SWEuro is the SWTOR UI face (see fonts.css). The fallbacks keep the
     same narrow-techno proportions if the font files are removed. */
  --f-fallback: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --f-head: "SWEuro", var(--f-fallback);
  /* Restore is CAPS-ONLY — only use --f-display on uppercased text */
  --f-display: "Restore", "SWEuro", var(--f-fallback);
  --f-body: "SWEuro", "Saira", "Segoe UI", system-ui, sans-serif;
  --f-sym:  "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:14px;
  color:var(--txt);
  background:var(--ink);
  overflow-x:hidden;
}

/* every h1/h2/h3 in this page is text-transform:uppercase, which is what lets
   the caps-only display face be used here. Keep that true for new headings. */
h1,h2,h3{ font-family:var(--f-display); font-weight:700; margin:0; letter-spacing:.06em; }

button,input,select,textarea{ font:inherit; color:inherit; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* jp: scrollbar-color:#4fb1d6 #030405 */
html{ scrollbar-color:#4fb1d6 #030405; scrollbar-width:thin; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#030405; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#4fb1d6,var(--cyan-dim)); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--cyan-bright); }

/* dingbats aren't in SWEuro — route them to a symbol face, never tofu */
.fico,.ev,.lb .pos,.chev,.dot{ font-family:var(--f-sym); }

/* ============ SPACE BACKDROP ============ */
/* The generated artwork keeps its brightest nebula inside the center-safe
   upper half and fades its lower third to near-black. Bottom anchoring preserves
   that fade on ultrawide displays while cover-cropping only the quiet side fields. */
.space{
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(3,8,14,.30) 0%, rgba(3,8,14,.04) 34%,
                            rgba(3,8,14,.10) 64%, rgba(2,5,10,.38) 100%),
    url("../images/space-bg-v2.jpg") center bottom / cover no-repeat,
    #03070d;
}
#stars{ position:absolute; inset:0; width:100%; height:100%; }

.vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,12,.34) 0%, transparent 26%, transparent 66%, rgba(2,6,12,.52) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  pointer-events:none;
}

/* ============ FRAME PRIMITIVE ============ */
/* Per the isolated corner components in elements2.jpg: a ROUNDED bracket with a
   DOUBLE stroke — a thick bright outer line, a dark gap, then a thin inner line.
   Outer element = thick stroke + gap (its padding); inner element = thin stroke.
   --r is the outer radius, --bw the outer stroke, --gap the dark space between. */
.frame{
  --r: 14px;
  --bw: 2px;
  --gap: 4px;
  position:relative;
  border:var(--bw) solid var(--cyan);
  border-radius:var(--r);
  padding:var(--gap);
  background:rgba(2, 12, 20, .55);          /* the dark gap between the strokes */
  box-shadow:var(--glow), inset 0 0 12px rgba(67,196,239,.10);
}
.frame > .frame__in{
  height:100%;
  overflow:hidden;                           /* keeps square children inside the radius */
  border:1px solid rgba(67,196,239,.45);     /* the inner hairline of the bracket */
  border-radius:calc(var(--r) - var(--bw) - var(--gap));
  background:linear-gradient(160deg, var(--panel-2), var(--panel-1) 55%, var(--panel-3));
}

/* ============ MASTHEAD ============ */
.masthead{
  display:flex; align-items:center; gap:18px;
  padding:14px 26px 10px;
  position:relative;
}
.crest{
  width:78px; height:78px; flex:none;
  /* the artwork carries its own glow — keep this light so it does not double up */
  filter:drop-shadow(0 0 12px rgba(47,142,230,.35));
}
.crest img{ width:100%; height:100%; display:block; object-fit:contain; }

.guild-name{
  font-size:clamp(27px, 3.5vw, 45px);
  letter-spacing:.11em; text-transform:uppercase; line-height:1;
  color:#eaf7ff;
  text-shadow:0 0 8px rgba(120,215,255,.75), 0 0 28px rgba(60,150,210,.55);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .guild-name{
    background:linear-gradient(90deg, var(--cyan) 0%, #eaf7ff 72%, #fff 100%);
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.guild-tag{
  margin:7px 0 0; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-dim);
}
.guild-tag span{ color:var(--cyan-dim); margin:0 6px; }

.masthead__status{
  margin-left:auto; align-self:flex-start; margin-top:6px;
  font-size:11px; letter-spacing:.18em; color:var(--txt-mute);
  display:flex; align-items:center; gap:8px;
}
.pip{
  width:8px; height:8px; background:var(--green); border-radius:50%;
  box-shadow:0 0 10px var(--green); animation:blink 2.6s infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ============ NAV ============ */
.navbar{
  display:flex; align-items:center; gap:10px;
  padding:6px 22px 12px;
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(3,10,17,.94) 55%, rgba(3,10,17,0));
  backdrop-filter:blur(3px);
}
.navbar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan-dim) 12%, var(--cyan) 50%, var(--cyan-dim) 88%, transparent);
  opacity:.6;
}

/* the rail wraps rather than scrolling — with no arrow button and a hidden
   scrollbar, overflowed tabs would be unreachable on a narrow window */
.nav-rail{ flex:1; min-width:0; }
.nav-list{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0 2px;
}

/* --- holo button (buttons1.jpg / buttons2.jpg) ---
   Rounded rather than chamfered, so plain box-shadow works for the halo
   (clip-path would have clipped it). --glow / --edge are RGB triplets so the
   gold variant reuses the same ::before machinery with only two overrides. */
.hbtn,
.chip{
  --glow: 67,196,239;
  --edge: 198,244,255;
  position:relative; isolation:isolate; cursor:pointer; white-space:nowrap;
  font-family:var(--f-head); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;

  /* DEFAULT — unlit: near-black fill, thin cool edge, muted label */
  color:#c2d6e2;
  padding:10px 24px;
  border:1px solid rgba(var(--glow), .5);
  border-radius:7px;
  background:linear-gradient(180deg, #0b1c28 0%, #060f18 55%, #08141d 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--edge), .06);
  text-shadow:0 0 6px rgba(var(--edge), .28);
  transition:color .2s ease, border-color .2s ease, background .2s ease,
             box-shadow .25s ease, transform .08s ease;
}

/* the lit layer. A hairline peaks at the centre of the top and bottom edges and
   fades toward the corners; two radial blooms then spill that light inward into
   the button. mix-blend-mode:screen makes it purely additive, so it brightens the
   dark fill and the label rather than laying a film over them (isolation:isolate
   above keeps the blend inside the button). The fill itself never changes. */
.hbtn::before,
.chip::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; mix-blend-mode:screen;
  transition:opacity .25s ease;
  background:
    linear-gradient(90deg, transparent 5%, rgba(var(--edge), 1) 50%, transparent 95%)
      top    /100% 1.5px no-repeat,
    linear-gradient(90deg, transparent 5%, rgba(var(--edge), 1) 50%, transparent 95%)
      bottom /100% 1.5px no-repeat,
    radial-gradient(72% 125% at 50% 0%,
      rgba(var(--glow), .8), rgba(var(--glow), .22) 42%, transparent 78%),
    radial-gradient(72% 125% at 50% 100%,
      rgba(var(--glow), .8), rgba(var(--glow), .22) 42%, transparent 78%);
}

/* HOVER — the background is deliberately left alone; only the edges light and
   spill inward. The outer halo is offset above and below with a negative spread
   so it is strongest at mid top/bottom and thin at the sides. */
.hbtn:hover,
.chip:hover{
  color:#ffffff;
  border-color:rgba(var(--edge), .9);
  text-shadow:0 0 10px rgba(var(--glow), .95);
  box-shadow:
    0 -7px 18px -8px rgba(var(--glow), .95),
    0  7px 18px -8px rgba(var(--glow), .95),
    0  0  24px -8px rgba(var(--glow), .55);
}
.hbtn:hover::before,
.chip:hover::before{ opacity:1; }

/* PRESSED — power cut, pushed into the panel */
.hbtn:active,
.chip:active{
  color:#7c9caa;
  border-color:rgba(var(--glow), .45);
  background:linear-gradient(180deg, #03090f 0%, #061019 100%);
  text-shadow:none;
  box-shadow:inset 0 3px 9px rgba(0,0,0,.8);
  transform:translateY(1px);
}
.hbtn:active::before,
.chip:active::before{ opacity:.2; }

/* keyboard parity — hover is otherwise the only affordance */
.hbtn:focus-visible,
.chip:focus-visible{
  outline:none;
  border-color:rgba(var(--edge), .85);
  box-shadow:
    0 -7px 18px -8px rgba(var(--glow), .95),
    0  7px 18px -8px rgba(var(--glow), .95);
}
.hbtn:focus-visible::before,
.chip:focus-visible::before{ opacity:1; }

/* --- gold variant: selected nav tab / primary action --- */
.hbtn.is-active,
.hbtn--gold,
.chip.is-on{
  --glow: 245,196,19;
  --edge: 255,238,180;
  color:var(--gold-bright);
  background:linear-gradient(180deg, #3a2709 0%, #1d1305 55%, #33220a 100%);
}
.hbtn.is-active:hover,
.hbtn--gold:hover,
.chip.is-on:hover{ color:#fff8e2; }
.hbtn--discord{
  --glow:139,92,246; --edge:196,181,253;
  display:inline-block; color:#c4b5fd; text-decoration:none;
  background:linear-gradient(180deg, #0b1c28 0%, #060f18 55%, #08141d 100%);
  border-color:rgba(139,92,246,.82);
  text-shadow:0 0 7px rgba(196,181,253,.55);
}
.hbtn--discord:hover{ color:#ddd6fe; border-color:#a78bfa; }
.hbtn.is-active:active,
.hbtn--gold:active,
.chip.is-on:active{
  color:#8a7233;
  background:linear-gradient(180deg, #0e0a03 0%, #171004 100%);
}

/* ============ LAYOUT ============ */
.viewport{ padding:6px 22px 26px; }
.page{ display:none; animation:fade .28s ease both; }
.page.is-active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.columns{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;
}
.columns--recruitment{ align-items:stretch; }
.column-stack{ display:grid; gap:18px; min-width:0; }

/* ============ PANEL ============ */
.panel{ --r:14px; --bw:2px; --gap:4px; }
.panel__head{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:11px 20px;
  background:linear-gradient(180deg, rgba(34,96,133,.75), rgba(12,44,66,.7) 60%, rgba(8,28,44,.55));
  border-bottom:1px solid var(--cyan-dim);
  /* the stepped shoulder from elements1.jpg "FULL TOP BORDER" */
  clip-path:polygon(0 0, 62% 0, 68% 42%, 100% 42%, 100% 100%, 0 100%);
}
.panel__head h2{
  font-size:19px; letter-spacing:.10em; text-transform:uppercase; color:#e9f8ff;
  text-shadow:0 0 10px rgba(120,215,255,.6);
}
.panel__head--sm{ padding-right:44px; }   /* modal keeps its close button */
.panel__head--sm h2{ font-size:15px; }

/* modal close button */
.xbtn{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; cursor:pointer; border:0; background:transparent;
}
.xbtn::before,.xbtn::after{
  content:""; position:absolute; left:3px; top:10px; width:16px; height:2px;
  background:var(--cyan-bright); box-shadow:0 0 8px rgba(140,225,255,.8);
}
.xbtn::before{ transform:rotate(45deg); }
.xbtn::after{ transform:rotate(-45deg); }
.xbtn:hover::before,.xbtn:hover::after{ background:#fff; }

.panel__body{ padding:14px; display:grid; gap:14px; }
.panel--application > .frame__in{ display:flex; flex-direction:column; }
.panel--application .panel__body{
  flex:1; grid-template-rows:auto minmax(0, 1fr);
}
.panel--application .panel__body > .sub > .frame__in{
  display:flex; flex-direction:column;
}
.panel--application .discord{
  flex:1; min-height:0; display:flex; flex-direction:column;
}
.panel--application .dc-list{
  flex:1; min-height:0; max-height:280px; align-content:start;
}
.panel--application .dc-foot{ margin-top:auto; }

/* ============ SUB-PANEL ============ */
.sub{
  --r:10px; --bw:2px; --gap:3px;
  border-color:var(--cyan-mid);
  box-shadow:none;
  background:rgba(2, 12, 20, .5);
}
.sub > .frame__in{ background:var(--sub-bg); border-color:rgba(67,196,239,.3); }
.sub__head{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(22,68,96,.7), rgba(10,34,52,.5));
  border-bottom:1px solid rgba(79,195,247,.28);
}
.sub__head h3{
  font-size:14px; letter-spacing:.10em; text-transform:uppercase; color:#bfe7fb;
}

.sub--gold{
  border-color:var(--gold);
  background:rgba(14, 9, 2, .55);
  box-shadow:var(--glow-gold);
}
.sub--gold > .frame__in{ border-color:rgba(245,196,19,.35); }
.sub--gold > .frame__in{ background:linear-gradient(160deg, rgba(38,26,10,.75), rgba(20,15,8,.8)); }
.sub--gold .sub__head{
  background:linear-gradient(180deg, rgba(110,74,20,.75), rgba(48,32,10,.6));
  border-bottom-color:rgba(240,168,48,.35);
}
.sub--gold .sub__head h3{ color:var(--gold-bright); }

.sub__foot{
  display:flex; justify-content:flex-end; padding:7px 10px;
  border-top:1px solid rgba(79,195,247,.16);
}
.pill{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-dim); background:transparent; border:0; padding:2px 4px;
}
.pill .chev{
  width:14px; height:14px; border:1px solid var(--cyan-dim); border-radius:50%;
  position:relative; display:inline-block;
}
.pill .chev::before{
  content:""; position:absolute; left:4px; top:3px;
  border:4px solid transparent; border-left-color:var(--cyan); border-width:3px 0 3px 5px;
}
.pill:hover{ color:var(--cyan-bright); }

/* ============ SPLIT ============ */
.split{ display:grid; grid-template-columns:1.15fr 1fr; gap:12px; align-items:start; }
.split--ops{ grid-template-columns:1fr 1.05fr; align-items:stretch; }

/* Leaderboard + Recruitment Status share a height. The grid stretches both to
   the taller one, each panel becomes a flex column so its list absorbs the
   leftover space rather than leaving a gap underneath, and grid-auto-rows:1fr
   makes the pills divide that space evenly instead of clumping at the top.

   The Events split also stretches its two outer frames, while allowing each
   panel's own scrollable list to manage overflow independently. */
.split:not(.split--ops){ align-items:stretch; }
.split:not(.split--ops) > .frame > .frame__in{ display:flex; flex-direction:column; }
.split:not(.split--ops) .lb,
.split:not(.split--ops) .rec{ flex:1; min-height:0; grid-auto-rows:1fr; }
.split:not(.split--ops) .lb{ max-height:none; }   /* the shared height is the cap now */
.split--ops > .frame > .frame__in{ display:flex; flex-direction:column; }
.split--ops .ops{ flex:1; min-height:0; max-height:none; }

/* ============ JUMBOTRON CAROUSEL ============ */
/* The gold surround is images/slider-top.png used twice — once as-is at the
   top, once flipped on Y at the bottom. Its own 1966x85 proportions drive the
   rail height via aspect-ratio, so the decoration scales with the panel and
   never needs a fixed pixel height. */
.jumbo{ display:grid; gap:10px; }
.jumbo__frame{ position:relative; }

.jumbo__stage{
  position:relative; overflow:hidden;
  aspect-ratio:1786 / 730;          /* matches the cropped slide */
  border-radius:4px;
}
.jumbo__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .7s ease;
}
.jumbo__slide.is-on{ opacity:1; }
.jumbo__slide img{
  position:absolute;
  /* Keep the artwork inside the gold surround. These percentages are one
     scaled rail-height (85 / 1966 of the frame width) on every side. */
  left:4.3235%; top:10.5778%;
  width:91.353%; height:78.8444%;
  object-fit:cover; display:block;
  /* feathered edges, as in the slide.jpg mockup — the art fades into the
     surrounding page rather than ending on a hard line */
  -webkit-mask-image:radial-gradient(118% 128% at 50% 50%, #000 56%, transparent 100%);
          mask-image:radial-gradient(118% 128% at 50% 50%, #000 56%, transparent 100%);
}

.jumbo__rail{
  position:absolute; left:0; right:0; z-index:3;
  aspect-ratio:1966 / 85;           /* the asset's own proportions */
  background:url("../images/slider-top.png") center / 100% 100% no-repeat;
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(245,196,19,.28));
}
.jumbo__rail--top{ top:0; }
.jumbo__rail--bot{ bottom:0; transform:scaleY(-1); }

.jumbo__dots{ display:flex; justify-content:center; align-items:center; gap:10px; }
.jumbo__dot{
  width:10px; height:10px; padding:0; cursor:pointer;
  border:1px solid var(--gold-dim); border-radius:50%;
  background:rgba(20,14,4,.85);
  transition:background .18s ease, border-color .18s ease, box-shadow .25s ease, transform .15s ease;
}
.jumbo__dot:hover{ border-color:var(--gold); transform:scale(1.2); }
.jumbo__dot.is-on{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 10px rgba(245,196,19,.85);
}
.jumbo__dot:focus-visible{ outline:none; border-color:var(--gold-bright); box-shadow:0 0 10px rgba(245,196,19,.9); }

/* ============ GUILD INFO ============ */
.guild-info{
  margin:0; padding:10px; display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
}
.guild-info__tile{
  min-width:0; display:grid; gap:8px; padding:8px;
  background:linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border:1px solid rgba(67,196,239,.20);
  border-radius:8px;
}
.guild-info__image{
  aspect-ratio:16 / 9; overflow:hidden; display:grid; place-items:center;
  border:1px dashed rgba(67,196,239,.45); border-radius:6px;
  background:linear-gradient(135deg, rgba(18,52,76,.7), rgba(5,18,29,.82));
  color:var(--txt-mute); text-align:center;
}
.guild-info__image span{
  padding:6px; font-size:9px; letter-spacing:.12em; line-height:1.35; text-transform:uppercase;
}
.guild-info__image img{ width:100%; height:100%; display:block; object-fit:cover; }
.guild-info dt{
  font-family:var(--f-head); font-size:12px; line-height:1.25;
  letter-spacing:.06em; color:var(--txt);
}
.guild-info dd{
  margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-bright);
}

@media (min-width: 1920px){
  .guild-info{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}

/* ============ CONQUEST REWARDS ============ */
.conquest-rewards{ padding:10px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.conquest-prize{ min-width:0; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:10px; padding:12px; border:1px solid; border-radius:8px; overflow:hidden; }
.conquest-prize--champion{ border-color:rgba(245,196,19,.58); background:linear-gradient(135deg,rgba(91,62,10,.72),rgba(27,21,8,.82)); box-shadow:inset 0 0 22px rgba(245,196,19,.1); }
.conquest-prize--top-ten{ border-color:rgba(130,236,137,.48); background:linear-gradient(135deg,rgba(18,73,43,.64),rgba(5,28,20,.82)); box-shadow:inset 0 0 22px rgba(130,236,137,.08); }
.conquest-prize__icon{ display:grid; place-items:center; width:40px; height:40px; font-family:var(--f-sym); font-size:20px; border:1px solid currentColor; border-radius:50%; }
.conquest-credit-glyph{ width:22px; height:25px; display:block; color:inherit; overflow:visible; }
.conquest-credit-glyph path{ fill:currentColor; }
.conquest-prize--champion .conquest-prize__icon{ color:var(--gold); box-shadow:0 0 12px rgba(245,196,19,.32); }
.conquest-prize--top-ten .conquest-prize__icon{ color:var(--green); box-shadow:0 0 12px rgba(130,236,137,.25); }
.conquest-prize__tier{ display:block; margin-bottom:3px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-mute); }
.conquest-prize strong{ display:block; font-family:var(--f-head); font-size:17px; letter-spacing:.04em; color:var(--gold-bright); }
.conquest-prize--top-ten strong{ color:#b8f4bc; }
.conquest-prize p{ margin:4px 0 0; font-size:10.5px; line-height:1.4; color:var(--txt); }
/* ============ LEADERBOARD ============ */
.lb-head{
  display:flex; justify-content:space-between;
  padding:6px 12px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-mute); border-bottom:1px solid rgba(79,195,247,.16);
}
.lb{ list-style:none; margin:0; padding:7px; display:grid; gap:6px; max-height:250px; overflow-y:auto; }
.lb--full{ max-height:none; }

/* each contributor is a pill, matching the recruitment list.
   --medal-rgb defaults to cyan here and is overridden per podium rank, so the
   podium and hover rules below are written once and recoloured by variable. */
.lb li{
  --medal: var(--cyan);
  --medal-rgb: 67,196,239;
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px;
  padding:8px 12px; font-size:12.5px;
  background:linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border:1px solid rgba(67,196,239,.20);
  border-radius:8px;
  transition:background .18s ease, border-color .18s ease,
             box-shadow .25s ease, transform .12s ease;
}
.lb .pos{ font-family:var(--f-head); font-size:15px; color:var(--txt-dim); text-align:center; }
.lb .nm{ font-family:var(--f-head); letter-spacing:.05em; color:var(--txt); line-height:1; }
.lb .pts{ font-family:var(--f-head); font-size:14px; color:var(--cyan-bright); }

/* --- podium: gold / silver / bronze ---
   Each rank sets only the three variables; the shared block does the drawing. */
.lb li.is-gold  { --medal:#f5c413; --medal-lt:#ffe9a8; --medal-rgb:245,196,19;  }
.lb li.is-silver{ --medal:#c3d2de; --medal-lt:#f4f9fd; --medal-rgb:195,210,222; }
.lb li.is-bronze{ --medal:#cd7f32; --medal-lt:#f0b070; --medal-rgb:205,127,50;  }

.lb li.is-gold,
.lb li.is-silver,
.lb li.is-bronze{
  /* medal wash layered over the base pill fill */
  background:
    linear-gradient(90deg, rgba(var(--medal-rgb), .22), rgba(var(--medal-rgb), .05) 62%, transparent),
    linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border-color:rgba(var(--medal-rgb), .5);
  border-left:3px solid var(--medal);   /* after border-color, so it survives */
}
.lb li.is-gold .pos,   .lb li.is-silver .pos,   .lb li.is-bronze .pos{
  color:var(--medal-lt); text-shadow:0 0 9px rgba(var(--medal-rgb), .85);
}
.lb li.is-gold .nm,    .lb li.is-silver .nm,    .lb li.is-bronze .nm{ color:var(--medal-lt); }
.lb li.is-gold .pts,   .lb li.is-silver .pts,   .lb li.is-bronze .pts{
  color:var(--medal); text-shadow:0 0 10px rgba(var(--medal-rgb), .55);
}

/* first place keeps a slow breathing glow; the global prefers-reduced-motion
   rule collapses this animation to nothing */
.lb li.is-gold{ animation:medalGlow 3.4s ease-in-out infinite; }
@keyframes medalGlow{
  0%, 100%{ box-shadow:inset 0 0 14px rgba(245,196,19,.14); }
  50%     { box-shadow:inset 0 0 26px rgba(245,196,19,.34); }
}
.lb li.is-silver{ box-shadow:inset 0 0 14px rgba(195,210,222,.10); }
.lb li.is-bronze{ box-shadow:inset 0 0 14px rgba(205,127,50,.12); }

/* --- hover: the pill lights in its own colour ---
   Declared after the podium rules: identical specificity, so source order wins. */
.lb li:hover{
  background:
    linear-gradient(90deg, rgba(var(--medal-rgb), .30), rgba(var(--medal-rgb), .08) 60%, transparent),
    linear-gradient(180deg, rgba(18,50,74,.8), rgba(7,22,35,.8));
  border-color:rgba(var(--medal-rgb), .8);
  box-shadow:0 0 16px -3px rgba(var(--medal-rgb), .55),
             inset 0 0 22px rgba(var(--medal-rgb), .18);
  transform:translateX(2px);
}
.lb li.is-gold:hover,
.lb li.is-silver:hover,
.lb li.is-bronze:hover{ border-left-color:var(--medal); }   /* keep the solid accent */
.lb li:hover .nm{ color:#ffffff; text-shadow:0 0 10px rgba(var(--medal-rgb), .75); }
.lb li:hover .pos{ text-shadow:0 0 12px rgba(var(--medal-rgb), .9); }
.lb li:hover .pts{ text-shadow:0 0 12px rgba(var(--medal-rgb), .85); }
/* a running animation outranks a normal declaration, so pause it to let the
   hover shadow through */
.lb li.is-gold:hover{ animation:none; }

/* ============ RECRUITMENT LIST ============ */
.rec{ list-style:none; margin:0; padding:7px; display:grid; gap:6px; }
.rec li{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:8px 12px; font-size:12.5px;
  background:linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border:1px solid rgba(67,196,239,.20);
  border-radius:8px;
  transition:.15s;
}
.rec li:hover{
  background:linear-gradient(180deg, rgba(18,52,76,.8), rgba(9,28,44,.8));
  border-color:rgba(67,196,239,.5);
}
.rec .cname{ font-family:var(--f-head); letter-spacing:.06em; }
.state{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.state--info{ color:var(--cyan-bright); text-shadow:0 0 8px rgba(79,195,247,.45); }
.state--open{ color:var(--green); text-shadow:0 0 8px rgba(130,236,137,.4); }
.state--closed{ color:var(--red); }
.state--limited{ color:var(--gold); }
/* ============ OPERATIONS ============ */
.ops{ list-style:none; margin:0; padding:8px; display:grid; gap:7px; overflow-y:auto; }
.ops li{
  display:grid; grid-template-columns:minmax(0, 1fr) 48px; gap:10px; align-items:center;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(10,28,42,.5), rgba(4,12,20,.6));
  border:1px solid rgba(67,196,239,.20);
  border-left:3px solid var(--cyan);   /* tone accent, after the shorthand */
  border-radius:8px;
  transition:.15s;
}
.ops li:hover{
  background:linear-gradient(180deg, rgba(20,52,76,.65), rgba(9,26,40,.7));
  border-color:rgba(67,196,239,.5);
  transform:translateX(2px);
}
.ops li[data-tone="rakghoul"]{ border-left-color:#17b72e; }
.ops li[data-tone="spirakris"]{ border-left-color:#f5c413; }
.ops li[data-tone="gree"]{ border-left-color:#1182e9; }
.ops li[data-tone="red"]{ border-left-color:var(--red); }
.ops li[data-tone="violet"]{ border-left-color:#a06fd8; }
/* inside the gold pane the pill outline picks up the warm tint */
.sub--gold .ops li{ border-color:rgba(245,196,19,.22); }
.sub--gold .ops li:hover{ border-color:rgba(245,196,19,.5); }
.sub--gold .ops li[data-tone="rakghoul"]{ border-left-color:#17b72e; }
.ops li[data-tone="spirakris"]{ border-left-color:#f5c413; }
.ops li[data-tone="gree"]{ border-left-color:#1182e9; }
.sub--gold .ops li[data-tone="red"]{ border-left-color:var(--red); }
.sub--gold .ops li[data-tone="violet"]{ border-left-color:#a06fd8; }
.ops h4{ margin:0 0 3px; font-family:var(--f-head); font-size:13px; letter-spacing:.02em; color:#e6f6ff; }
.ops time{ font-size:11px; color:var(--txt-mute); letter-spacing:.06em; }
.ops .sign{ display:block; font-size:10.5px; color:var(--txt-mute); margin-top:3px; letter-spacing:.05em; }
.op-logo{ width:44px; height:44px; display:block; object-fit:contain; justify-self:end; }

/* ============ DISCORD ============ */
/* Rendered from Discord's widget.json rather than embedded as an iframe, so the
   member list can wear the site's own chrome. Rows are pills like every other
   list on the page. */
.join-info{
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border:1px solid rgba(67,196,239,.28); border-radius:8px;
  display:grid; gap:10px;
}
.join-info p{ margin:0; color:var(--txt-dim); font-size:13px; line-height:1.6; }
.join-info code{
  font-family:var(--f-head); color:var(--cyan-bright); letter-spacing:.04em;
  background:rgba(2,12,20,.72); border:1px solid rgba(67,196,239,.22);
  border-radius:4px; padding:1px 5px;
}
.join-info .join-consent{
  padding-top:10px; border-top:1px solid rgba(67,196,239,.16); color:var(--txt-mute);
}
.rules-link{ color:var(--gold-bright); text-underline-offset:3px; }
.rules-link:hover{ color:#fff2b0; text-shadow:0 0 8px rgba(245,196,19,.45); }
.discord{ padding:8px; display:grid; gap:8px; }
.dc-top{
  display:flex; align-items:center; gap:10px; padding:2px 4px 8px;
  border-bottom:1px solid rgba(67,196,239,.16);
}
.dc-server{
  font-family:var(--f-head); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt);
}
.dc-count{
  margin-left:auto; display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-mute);
}
.dc-list{ display:grid; gap:6px; max-height:238px; overflow-y:auto; padding-right:2px; }
.dc-m{
  display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:center;
  padding:6px 10px;
  background:linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border:1px solid rgba(67,196,239,.20);
  border-radius:8px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dc-m:hover{
  background:linear-gradient(180deg, rgba(18,52,76,.8), rgba(9,28,44,.8));
  border-color:rgba(67,196,239,.5);
}
.dc-m.is-gold{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(38,28,8,.65), rgba(18,13,4,.72));
}
.dc-m.is-gold:hover{
  background:linear-gradient(180deg, rgba(58,44,12,.85), rgba(28,21,6,.85));
  border-color:var(--gold-bright);
  box-shadow:0 0 14px rgba(245,196,19,.55);
}
.dc-m.is-gold .dc-nm{
  color:var(--gold-bright);
}
.dc-av{
  position:relative; width:26px; height:26px; border-radius:50%;
  background:rgba(30,60,86,.8);
}
.dc-av img{ width:100%; height:100%; border-radius:50%; display:block; }
.dc-dot{
  position:absolute; right:-2px; bottom:-2px; width:10px; height:10px;
  border-radius:50%; border:2px solid #071c2c; background:var(--txt-mute);
}
.dc-dot--online{ background:var(--green); box-shadow:0 0 7px rgba(130,236,137,.8); }
.dc-dot--idle{   background:var(--gold);  box-shadow:0 0 7px rgba(245,196,19,.7); }
.dc-dot--dnd{    background:var(--red);   box-shadow:0 0 7px rgba(216,67,74,.7); }
.dc-nm{
  font-family:var(--f-head); font-size:12.5px; letter-spacing:.05em; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dc-act{
  display:block; font-family:var(--f-body); font-size:10px; letter-spacing:.05em;
  color:var(--txt-mute); overflow:hidden; text-overflow:ellipsis;
}
.dc-foot{ display:flex; padding:2px 2px 0; }
.dc-foot .hbtn{ flex:1; text-align:center; text-decoration:none; }

.dc-note{ padding:18px 14px; text-align:center; }
.dc-note .dc-glyph{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:9px;
  border:1px solid var(--cyan-dim); border-radius:50%;
  font-family:var(--f-sym); color:var(--cyan); background:rgba(10,36,54,.8);
}
.dc-note h4{
  margin:0 0 8px; font-family:var(--f-head); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt);
}
.dc-note p{ margin:0 0 6px; font-size:11.5px; line-height:1.5; color:var(--txt-mute); }
.dc-note p b{ color:var(--txt-dim); font-weight:500; }

/* Discord brand chrome — member rows intentionally retain their cyan rules above. */
.discord-panel{
  border-color:#8b5cf6;
  background:rgba(24,17,48,.58);
  box-shadow:0 0 14px rgba(139,92,246,.22);
}
.discord-panel > .frame__in{
  border-color:rgba(167,139,250,.38);
  background:linear-gradient(160deg,rgba(28,21,55,.74),rgba(5,19,31,.82));
}
.discord-panel .sub__head{
  border-bottom-color:rgba(139,92,246,.45);
  background:linear-gradient(180deg,rgba(76,52,132,.62),rgba(29,25,61,.56));
}
.discord-panel .sub__head h3{ color:#ddd6fe; text-shadow:0 0 9px rgba(139,92,246,.55); }
.discord-panel .discord{ background:linear-gradient(180deg,rgba(27,20,53,.42),rgba(3,17,27,.12)); }
.discord-panel .dc-top{ border-bottom-color:rgba(139,92,246,.45); }
.discord-panel .dc-server{ color:#ddd6fe; }
.discord-panel .dc-count{ color:#a78bfa; }
.discord-panel .dc-note .dc-glyph{ color:#c4b5fd; border-color:rgba(139,92,246,.7); background:rgba(48,33,88,.7); }
.discord-panel .dc-note p b{ color:#c4b5fd; }
.discord-panel .dc-foot .hbtn{
  --glow:139,92,246; --edge:196,181,253;
  color:#c4b5fd; border-color:rgba(139,92,246,.82);
  background:linear-gradient(180deg,rgba(55,36,100,.82),rgba(23,18,48,.92));
  text-shadow:0 0 7px rgba(196,181,253,.55);
}
.discord-panel .dc-foot .hbtn:hover{ color:#fff; border-color:#a78bfa; }
/* ============ MEMBER PORTRAITS ============ */
.members{
  padding:10px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
}
.mcard{ text-align:center; }
.pcell{
  position:relative; width:84px; aspect-ratio:56 / 59; margin:0 auto;
}
.portrait-photo{
  position:absolute; inset:6% 7%;
  width:86%; height:88%; display:block;
  object-fit:cover; object-position:center top;
  border-radius:6px; background:#07131d;
}
.portrait-frame{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; display:block;
  pointer-events:none;
}
.mcard .mname{
  display:block; margin-top:6px; font-family:var(--f-head); font-size:11.5px;
  letter-spacing:.06em; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mcard .mname--multiline{
  line-height:1.18; white-space:normal; overflow:visible; text-overflow:clip;
}

/* ============ TOOLBAR / FIELDS ============ */
.toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.field{                        /* jp: input bg #010204, border #235c7a */
  background:var(--ink-deep);
  border:1px solid var(--cyan-line);
  color:var(--txt); padding:9px 12px; letter-spacing:.06em;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  outline:none; width:100%;
}
.field::placeholder{ color:var(--txt-mute); letter-spacing:.1em; font-size:12px; }
.field:focus{ border-color:var(--cyan); box-shadow:0 0 14px rgba(79,195,247,.3); }
select.field{ appearance:none; cursor:pointer; }
select.field option{ background:#08202f; }
textarea.field{ resize:vertical; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
/* chips are .hbtn at a smaller size — all state styling comes from the button
   rules above, which now list .chip alongside .hbtn. .is-on maps to the gold
   selected state, the same one the current nav tab uses. */
.chip{ padding:7px 16px; font-size:12px; border-radius:6px; }

/* ============ FORM ============ */
.form{ display:grid; gap:14px; }
.lbl{
  display:grid; gap:6px;
  font-family:var(--f-head); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-dim);
}
.form-row{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
.form-actions{ display:flex; gap:12px; margin-top:2px; }
.formmsg{ margin:0; font-size:12px; letter-spacing:.08em; min-height:18px; }
.formmsg.ok{ color:var(--green); }
.formmsg.err{ color:var(--red); }
.field.invalid{ border-color:var(--red); box-shadow:0 0 12px rgba(216,67,74,.3); }

/* ============ STATS / METERS ============ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.stat{
  padding:12px; text-align:center;
  background:linear-gradient(180deg, rgba(10,30,46,.62), rgba(4,14,23,.68));
  border:1px solid rgba(67,196,239,.20); border-radius:8px;
}
.stat b{
  display:block; font-family:var(--f-head); font-size:26px; font-weight:600;
  color:var(--cyan-bright); text-shadow:0 0 12px rgba(120,215,255,.5);
}
.stat span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-mute); }

.meters{ list-style:none; margin:0; padding:10px; display:grid; gap:12px; }
.meters li{ display:grid; gap:6px; }
.meters .mrow{ display:flex; justify-content:space-between; font-size:12px; }
.meters .mrow span:first-child{ font-family:var(--f-head); letter-spacing:.06em; color:var(--txt); }
.meters .mrow span:last-child{ color:var(--txt-mute); font-size:11px; letter-spacing:.08em; }
.bar{ height:9px; background:rgba(6,22,34,.9); border:1px solid var(--cyan-line); overflow:hidden; }
.bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--cyan-dim), var(--cyan-bright));
  box-shadow:0 0 12px rgba(120,215,255,.55);
  transition:width 1.1s cubic-bezier(.2,.8,.3,1);
}
.bar.reached i{
  background:linear-gradient(90deg, #168247, var(--green));
  box-shadow:0 0 12px rgba(130,236,137,.6);
}

/* ============ GUIDES ============ */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.card{
  --r:11px; --bw:2px; --gap:3px;
  width:100%; padding:var(--gap); text-align:left;
  border:var(--bw) solid var(--cyan-mid); border-radius:var(--r);
  background:rgba(2,12,20,.5); transition:.18s;
}
.card:hover,.card:focus-visible{
  outline:none; border-color:var(--cyan); box-shadow:var(--glow); transform:translateY(-2px);
}
.card__in{
  display:flex; flex-direction:column; gap:8px; height:100%; padding:16px;
  border:1px solid rgba(67,196,239,.3);
  border-radius:calc(var(--r) - var(--bw) - var(--gap)); background:var(--sub-bg);
}
.card .tag,.guide-toolbar .tag,.rules-toolbar .tag{
  align-self:flex-start; display:inline-block; padding:3px 9px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-dim); background:rgba(60,42,12,.5);
}
.card__title{
  font-family:var(--f-head); font-size:17px; font-weight:700;
  letter-spacing:.05em; color:#e6f6ff;
}
.card__summary{ font-size:12px; line-height:1.55; color:var(--txt-dim); }
.card .meta{
  margin-top:auto; font-size:10.5px; line-height:1.4; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-mute);
}

.guide-detail{ scroll-margin-top:70px; }
.guide-detail:focus{ outline:none; }
.guide-detail__head h2{ line-height:1.2; }
.guide-detail__body{
  width:min(1120px,100%); margin:0 auto; padding:18px;
  display:grid; gap:18px;
}
.guide-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guide-back{ padding:8px 16px; }
.guide-intro{ display:grid; gap:12px; }
.guide-intro p{ margin:0; color:var(--txt); line-height:1.55; }
.guide-kicker{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)!important;
}
.guide-lead{ font-size:18px; }
.guide-note{
  margin:0; padding:11px 14px; color:#a9bac4;
  border-left:3px solid var(--cyan-mid); background:rgba(7,24,36,.62);
}

.guide-figure{ margin:0; display:grid; gap:8px; }
.guide-figure figcaption{ font-size:11px; line-height:1.5; color:var(--txt-mute); }
.guide-shot{
  display:block; width:100%; height:auto;
  border:2px solid var(--cyan); border-radius:10px; background:#001522;
  box-shadow:0 0 14px rgba(67,196,239,.22);
}
.guide-columns{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:16px; }
.guide-section{
  min-width:0; padding:16px; border:1px solid rgba(67,196,239,.32);
  border-radius:8px; background:linear-gradient(180deg,rgba(7,31,47,.72),rgba(2,17,27,.78));
}
.guide-section h3{
  margin-bottom:14px; font-size:15px; text-transform:uppercase; color:var(--cyan-bright);
}
.guide-section p{ margin:14px 0 0; line-height:1.6; color:var(--txt); }
.guide-costs{ margin:0; display:grid; gap:2px; }
.guide-costs div{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px;
  padding:7px 9px; border-bottom:1px solid rgba(67,196,239,.12);
}
.guide-costs dt{ font-weight:700; color:#e6f6ff; }
.guide-costs dd{ margin:0; color:var(--cyan-soft); font-variant-numeric:tabular-nums; }
.guide-total,.guide-readout{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding:11px 12px; border:1px solid var(--gold-dim);
  background:linear-gradient(90deg,rgba(92,62,10,.45),rgba(30,24,8,.62));
}
.guide-total span,.guide-readout span{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft);
}
.guide-total strong,.guide-readout strong{ color:var(--gold-bright); font-size:16px; }
.guide-steps{ margin:0; padding-left:22px; display:grid; gap:10px; line-height:1.45; }
.guide-steps li::marker{ color:var(--cyan); font-weight:700; }
kbd{
  display:inline-block; min-width:24px; padding:2px 6px; text-align:center;
  color:#fff; border:1px solid var(--cyan-mid); border-radius:4px;
  background:#071522; box-shadow:inset 0 -2px 0 rgba(0,0,0,.5);
}
.guide-closing{
  margin:0; padding:14px 16px; line-height:1.6;
  color:var(--txt); border-left:3px solid var(--gold); background:rgba(47,34,8,.42);
}

.gear-version{
  justify-self:start; margin:0; padding:5px 10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green)!important; border:1px solid rgba(130,236,137,.55);
  border-radius:5px; background:rgba(18,73,43,.42);
}
.gear-route{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;
}
.gear-route li{
  min-width:0; padding:11px 9px; text-align:center;
  border:1px solid rgba(67,196,239,.28); border-radius:7px;
  background:linear-gradient(180deg,rgba(11,42,61,.82),rgba(4,21,32,.86));
}
.gear-route b{
  display:block; margin-bottom:4px; font-family:var(--f-head);
  font-size:14px; letter-spacing:.06em; color:var(--cyan-bright);
}
.gear-route span{
  display:block; font-size:10px; line-height:1.35;
  letter-spacing:.08em; text-transform:uppercase; color:var(--txt-mute);
}
.gear-visuals{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.gear-support-grid{
  display:grid; grid-template-columns:1fr;
  gap:16px; align-items:start;
}
.gear-workaround-tag{
  display:inline-block; margin:0 0 4px!important; padding:4px 8px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-bright)!important; border:1px solid var(--gold-dim);
  border-radius:4px; background:rgba(74,51,8,.45);
}
.gear-visuals .guide-shot{ aspect-ratio:16/9; object-fit:cover; }
.guide-figure figcaption a{ color:var(--cyan-soft); }
.guide-figure figcaption a:hover{ color:#fff; }
.gear-steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.gear-step{ position:relative; }
.gear-step h3{ padding-right:42px; }
.gear-step__num{
  position:absolute; top:12px; right:14px;
  font-family:var(--f-head); font-size:24px; color:rgba(67,196,239,.32);
}
.guide-checklist{
  list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px;
}
.guide-checklist li{
  position:relative; padding-left:18px; line-height:1.52; color:var(--txt);
}
.guide-checklist li::before{
  content:""; position:absolute; left:1px; top:.55em; width:6px; height:6px;
  transform:rotate(45deg); background:var(--cyan); box-shadow:0 0 7px rgba(67,196,239,.65);
}
.guide-checklist--ordered{ counter-reset:gear-check; }
.guide-checklist--ordered li{ counter-increment:gear-check; padding-left:28px; }
.guide-checklist--ordered li::before{
  content:counter(gear-check); top:0; width:20px; height:20px;
  display:grid; place-items:center; transform:none; border-radius:50%;
  font-size:10px; font-weight:700; color:#021018; background:var(--cyan);
}
.guide-note--warning{ margin-top:14px; border-left-color:var(--gold); color:var(--gold-bright); }
.guide-sources{
  padding:16px; border:1px solid rgba(67,196,239,.28); border-radius:8px;
  background:rgba(2,17,27,.66);
}
.guide-sources h3{
  margin-bottom:12px; font-size:15px; text-transform:uppercase; color:var(--cyan-bright);
}
.guide-sources ul{ margin:0; padding-left:20px; display:grid; gap:8px; }
.guide-sources li{ line-height:1.5; color:var(--txt); }
.guide-sources a{ color:var(--cyan-soft); }
.guide-sources a:hover{ color:#fff; }
.guide-sources p{ margin:12px 0 0; font-size:10.5px; line-height:1.5; color:var(--txt-mute); }
.guide-toolbar .tag--discord{
  color:#c4b5fd; border-color:rgba(139,92,246,.75); background:rgba(55,36,100,.48);
}
.discord-note{ border-left-color:#8b5cf6; }
.discord-route{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;
}
.discord-route li{
  min-width:0; padding:11px 9px; text-align:center;
  border:1px solid rgba(139,92,246,.38); border-radius:7px;
  background:linear-gradient(180deg,rgba(38,30,73,.76),rgba(13,18,35,.86));
}
.discord-route b{
  display:grid; place-items:center; width:24px; height:24px; margin:0 auto 6px;
  font-family:var(--f-head); color:#fff; border:1px solid #a78bfa; border-radius:50%;
  background:rgba(139,92,246,.48); box-shadow:0 0 10px rgba(139,92,246,.35);
}
.discord-route span{
  display:block; font-size:10px; line-height:1.35;
  letter-spacing:.08em; text-transform:uppercase; color:#c4b5fd;
}
.discord-command{
  display:block; margin:12px 0; padding:12px 14px; overflow-wrap:anywhere;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:14px;
  color:#ddd6fe; border:1px solid rgba(139,92,246,.72); border-radius:6px;
  background:rgba(31,24,62,.72); box-shadow:inset 0 0 14px rgba(139,92,246,.1);
}
.guide-toolbar .tag--rakghoul{
  color:#9df5a9; border-color:rgba(23,183,46,.72); background:rgba(12,72,28,.5);
}
.rakghoul-status{
  justify-self:start; margin:0; padding:5px 10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#9df5a9!important; border:1px solid rgba(23,183,46,.58);
  border-radius:5px; background:rgba(12,72,28,.4);
}
.rakghoul-note{ border-left-color:#17b72e; }
.rakghoul-hero{ max-height:480px; object-fit:cover; object-position:center 42%; }
.rakghoul-route{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;
}
.rakghoul-route li{
  min-width:0; padding:11px 9px; text-align:center;
  border:1px solid rgba(23,183,46,.34); border-radius:7px;
  background:linear-gradient(180deg,rgba(12,65,30,.68),rgba(4,28,20,.82));
}
.rakghoul-route b{
  display:grid; place-items:center; width:24px; height:24px; margin:0 auto 6px;
  font-family:var(--f-head); color:#03170a; border-radius:50%; background:#79e98a;
  box-shadow:0 0 10px rgba(23,183,46,.48);
}
.rakghoul-route span{
  display:block; font-size:10px; line-height:1.35;
  letter-spacing:.08em; text-transform:uppercase; color:#9df5a9;
}
.rakghoul-visuals{
  display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:16px; align-items:stretch;
}
.rakghoul-visuals .guide-figure{ min-width:0; }
.rakghoul-visuals .guide-shot{ width:100%; height:420px; }
.rakghoul-map{ object-fit:contain; background:#000b10; }
.rakghoul-eyeless{ object-fit:cover; }
.guide-toolbar .tag--gree{
  color:#9fdcff; border-color:rgba(17,130,233,.75); background:rgba(8,53,98,.55);
}
.gree-status{
  justify-self:start; margin:0; padding:5px 10px; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#9fdcff!important;
  border:1px solid rgba(17,130,233,.62); border-radius:5px; background:rgba(8,53,98,.42);
}
.gree-note{ border-left-color:#1182e9; }
.gree-hero{ max-height:480px; object-fit:cover; }
.gree-route{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;
}
.gree-route li{
  min-width:0; padding:11px 9px; text-align:center; border:1px solid rgba(17,130,233,.38);
  border-radius:7px; background:linear-gradient(180deg,rgba(8,53,98,.7),rgba(3,25,50,.84));
}
.gree-route b{
  display:grid; place-items:center; width:24px; height:24px; margin:0 auto 6px;
  font-family:var(--f-head); color:#02111e; border-radius:50%; background:#76c8ff;
  box-shadow:0 0 10px rgba(17,130,233,.5);
}
.gree-route span{
  display:block; font-size:10px; line-height:1.35; letter-spacing:.08em;
  text-transform:uppercase; color:#9fdcff;
}
.gree-rewards{ max-height:480px; object-fit:cover; }
.guide-toolbar .tag--pirate{color:#ffd49b;border-color:rgba(220,124,35,.75);background:rgba(91,45,8,.55);}
.pirate-status{justify-self:start;margin:0;padding:5px 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ffd49b!important;border:1px solid rgba(220,124,35,.62);border-radius:5px;background:rgba(91,45,8,.42);}
.pirate-note{border-left-color:#dc7c23;}
.pirate-hero{max-height:480px;object-fit:cover;}
.pirate-route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.pirate-route li{min-width:0;padding:11px 9px;text-align:center;border:1px solid rgba(220,124,35,.38);border-radius:7px;background:linear-gradient(180deg,rgba(91,45,8,.7),rgba(42,24,5,.84));}
.pirate-route b{display:grid;place-items:center;width:24px;height:24px;margin:0 auto 6px;font-family:var(--f-head);color:#241000;border-radius:50%;background:#ffbd70;box-shadow:0 0 10px rgba(220,124,35,.5);}
.pirate-route span{display:block;font-size:10px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:#ffd49b;}
.pirate-visuals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.pirate-visuals .guide-shot{aspect-ratio:16/9;object-fit:cover;}
.capture-hero{max-height:480px;object-fit:cover;}
.capture-reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.capture-yields{margin:14px 0 0;display:grid;gap:8px;}
.capture-yields div{display:flex;justify-content:space-between;gap:16px;padding:11px 12px;border:1px solid rgba(245,196,19,.3);border-radius:7px;background:rgba(51,37,8,.38);}
.capture-yields dt{font-weight:700;color:var(--txt);}
.capture-yields dd{margin:0;color:var(--gold-bright);text-align:right;}
/* ============ MONEY GUIDE ============ */
.guide-toolbar .tag--money{
  color:var(--gold-bright); border-color:rgba(245,196,19,.72); background:rgba(77,54,8,.52);
}
.money-credit-panel{
  display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:16px;
  padding:14px 16px; border:1px solid rgba(245,196,19,.45); border-radius:8px;
  background:linear-gradient(105deg,rgba(74,51,8,.56),rgba(5,25,36,.76));
}
.money-credit-panel img{
  width:68px; height:68px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(245,196,19,.42));
}
.money-credit-panel span{
  display:block; margin-bottom:4px; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.money-credit-panel strong{ display:block; font-family:var(--f-head); color:var(--gold-bright); }
.money-credit-panel p{ margin:6px 0 0; color:var(--txt-dim); font-size:12px; line-height:1.5; }
.money-route{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.money-route li{ border-color:rgba(245,196,19,.34); background:linear-gradient(180deg,rgba(67,48,10,.54),rgba(4,21,32,.86)); }
.money-route b{ color:var(--gold-bright); }
.money-route-section > p{ margin-bottom:0; }
.money-section-title{
  margin:0 0 12px; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cyan-bright);
}
.money-method-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.money-method{ position:relative; min-height:100%; padding-top:18px; }
.money-method h3{ padding-right:78px; }
.money-method__risk{
  position:absolute; top:12px; right:12px; padding:3px 6px; border:1px solid;
  border-radius:4px; font-size:8px; line-height:1; letter-spacing:.1em; text-transform:uppercase;
}
.money-method__risk.is-low{ color:var(--green); border-color:rgba(130,236,137,.48); background:rgba(18,73,43,.42); }
.money-method__risk.is-market,.money-method__risk.is-medium{ color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(74,51,8,.45); }
.money-method__risk.is-high{ color:#ff9a8e; border-color:rgba(242,85,73,.58); background:rgba(80,24,22,.42); }
.money-equation{
  padding:11px 12px; border:1px solid var(--gold-dim); border-radius:6px;
  background:rgba(74,51,8,.36); color:var(--gold-bright)!important;
}
.money-equation strong{ color:#fff1a9; }
.money-weekly-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.money-risk-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.money-risk-grid > div{
  min-width:0; display:grid; gap:5px; padding:12px; border:1px solid rgba(67,196,239,.28);
  border-top:3px solid var(--green); border-radius:7px; background:rgba(3,20,31,.76);
}
.money-risk-grid > div:nth-child(2){ border-top-color:var(--gold); }
.money-risk-grid > div:nth-child(3){ border-top-color:#f25549; }
.money-risk-grid span{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-mute); }
.money-risk-grid strong{ color:var(--txt); font-size:12px; }
.money-risk-grid small{ color:var(--txt-mute); font-size:10px; }
.money-safety{ border-color:rgba(242,85,73,.42); }
/* ============ MODAL (swtor_Hv8EcCh2ow.png) ============ */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(2,6,12,.72); backdrop-filter:blur(2px); }
.modal__box{
  position:relative; width:min(420px, 92vw);
  animation:pop .2s ease both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.modal__body{ padding:22px 20px; text-align:center; font-size:14px; letter-spacing:.04em; }
.modal__body p{ margin:0; }
.modal__foot{
  display:flex; justify-content:space-between; gap:14px; padding:0 18px 18px;
}
.modal__foot .hbtn{ flex:1; }

/* ============ TOAST ============ */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 24px);
  padding:11px 22px; z-index:110;
  font-family:var(--f-head); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan-bright); background:rgba(8,28,44,.95);
  border:1px solid var(--cyan);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 0 22px rgba(79,195,247,.35);
  opacity:0; pointer-events:none; transition:.25s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }
.toast.gold{ color:var(--gold-bright); border-color:var(--gold); box-shadow:0 0 22px rgba(240,168,48,.4); }

/* ============ FOOTER ============ */
.foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  padding:16px 22px 26px; font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--txt-mute);
  border-top:1px solid rgba(79,195,247,.14); margin:0 22px;
}
.foot__sep{ width:5px; height:5px; background:var(--cyan-dim); transform:rotate(45deg); }
.foot__gateway{
  padding:5px 9px; color:var(--cyan-soft); text-decoration:none;
  border:1px solid rgba(67,196,239,.34); border-radius:5px;
  background:rgba(3,18,28,.58); transition:.2s ease;
}
.foot__gateway:hover,.foot__gateway:focus-visible{
  outline:none; color:var(--gold-bright); border-color:var(--gold);
  text-shadow:0 0 8px rgba(245,196,19,.65);
  box-shadow:0 -5px 14px -8px rgba(245,196,19,.8),0 5px 14px -8px rgba(245,196,19,.8);
}

/* ============ BULLETS ============ */
.bullets{ list-style:none; margin:0; padding:10px 12px; display:grid; gap:8px; }
.bullets li{ position:relative; padding-left:18px; font-size:12.5px; color:var(--txt-dim); line-height:1.5; }
.bullets li::before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px;
  background:var(--cyan); transform:rotate(45deg); box-shadow:0 0 8px var(--cyan);
}

/* ============ GUILD RULES ============ */
.rules-page{ width:min(1120px,100%); margin:0 auto; }
.rules-page__body{ padding:18px; display:grid; gap:16px; }
.rules-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rules-back{ padding:8px 16px; }
.rules-intro{
  padding:14px 16px; border:1px solid rgba(67,196,239,.3); border-radius:8px;
  background:linear-gradient(180deg,rgba(10,30,46,.68),rgba(4,14,23,.72));
}
.rules-intro p{ margin:0; color:var(--txt-dim); font-size:13px; line-height:1.65; }
.rules-list{ counter-reset:guild-rule; list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rules-list li{
  counter-increment:guild-rule; min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr);
  align-items:stretch; border:1px solid rgba(67,196,239,.28); border-radius:8px;
  background:linear-gradient(100deg,rgba(9,33,49,.82),rgba(3,17,27,.76)); overflow:hidden;
}
.rules-list li::before{
  content:counter(guild-rule,decimal-leading-zero); display:grid; place-items:center;
  font-family:var(--f-head); font-size:13px; letter-spacing:.08em; color:var(--cyan-bright);
  border-right:1px solid rgba(67,196,239,.3); background:rgba(8,43,62,.72);
  text-shadow:0 0 8px rgba(79,195,247,.55);
}
.rules-list p{ margin:0; padding:13px 14px; color:var(--txt); font-size:13px; line-height:1.6; }
.rules-acknowledgement{
  margin:0; padding:12px 14px; border-left:3px solid var(--gold); color:var(--gold-bright);
  background:rgba(59,42,9,.38); font-size:12px; line-height:1.55;
}
/* ============ SYSTEM ERROR PAGES ============ */
.system-page{
  min-height:100svh; height:auto; display:grid; grid-template-rows:auto 1fr auto;
  isolation:isolate; background:var(--ink);
}
.system-page .space{ z-index:-2; }
.system-brand{
  width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:18px 0 8px;
}
.system-brand__link{
  width:max-content; max-width:100%; display:flex; align-items:center; gap:14px;
  color:inherit; text-decoration:none;
}
.system-brand__link img{
  width:64px; height:64px; display:block; object-fit:contain; flex:none;
  filter:drop-shadow(0 0 11px rgba(67,196,239,.42));
}
.system-brand__link > span{ min-width:0; display:grid; gap:5px; }
.system-brand__link strong{
  font-family:var(--f-display); font-size:24px; line-height:1; letter-spacing:.1em;
  text-transform:uppercase; color:#eefaff; text-shadow:0 0 10px rgba(79,195,247,.58);
}
.system-brand__link small{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-mid);
}
.system-shell{
  width:min(1040px,calc(100% - 32px)); margin:auto; padding:24px 0 40px;
  display:grid; place-items:center;
}
.system-card{ width:100%; --r:18px; }
.system-card > .frame__in{ background:linear-gradient(145deg,rgba(0,46,70,.88),rgba(0,25,40,.94) 58%,rgba(2,14,24,.96)); }
.system-card__grid{ display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.35fr); min-height:430px; }
.system-code{
  min-width:0; margin:0; display:grid; place-items:center; padding:24px;
  overflow:hidden; font-family:var(--f-display); font-size:clamp(96px,10vw,140px); line-height:.8;
  letter-spacing:0; color:rgba(176,243,255,.18);
  border-right:1px solid rgba(67,196,239,.3);
  background:
    linear-gradient(135deg,rgba(67,196,239,.12),transparent 56%),
    repeating-linear-gradient(0deg,rgba(67,196,239,.06) 0 1px,transparent 1px 5px);
  -webkit-text-stroke:1px rgba(176,243,255,.7);
  text-shadow:0 0 18px rgba(67,196,239,.46),0 0 55px rgba(67,196,239,.2);
}
.system-card__content{ min-width:0; align-self:center; padding:42px; }
.system-eyebrow{
  margin:0 0 12px; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan);
}
.system-card h1{
  margin:0; font-family:var(--f-display); font-size:clamp(27px,4vw,46px);
  line-height:1.05; letter-spacing:.08em; text-transform:uppercase;
  color:#effbff; text-shadow:0 0 12px rgba(79,195,247,.5);
}
.system-lead{
  max-width:620px; margin:18px 0 0; color:var(--txt); font-size:15px; line-height:1.65;
}
.system-readout{ margin:24px 0 0; display:grid; gap:8px; }
.system-readout div{
  min-width:0; display:grid; grid-template-columns:minmax(120px,.65fr) minmax(0,1fr);
  gap:14px; padding:10px 12px; border:1px solid rgba(67,196,239,.23);
  border-radius:7px; background:rgba(2,18,29,.62);
}
.system-readout dt{
  font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-mute);
}
.system-readout dd{ margin:0; color:var(--cyan-bright); text-align:right; }
.system-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.system-actions .hbtn{ display:inline-block; text-align:center; text-decoration:none; }
.system-status{
  margin-top:22px; display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid rgba(245,196,19,.4); border-radius:7px; background:rgba(65,45,8,.4);
}
.system-status > span:last-child{ display:grid; gap:3px; }
.system-status small{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft);
}
.system-status strong{ color:var(--gold-bright); }
.system-beacon{
  width:11px; height:11px; flex:none; border-radius:50%; background:var(--gold);
  box-shadow:0 0 12px var(--gold); animation:system-pulse 1.8s ease-in-out infinite;
}
@keyframes system-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.system-assurance{ margin:12px 0 0; color:var(--txt-mute); font-size:12px; line-height:1.55; }
.system-page--503 .system-code{
  color:rgba(255,233,168,.18); -webkit-text-stroke-color:rgba(255,233,168,.72);
  border-right-color:rgba(245,196,19,.3);
  background:
    linear-gradient(135deg,rgba(245,196,19,.12),transparent 56%),
    repeating-linear-gradient(0deg,rgba(245,196,19,.05) 0 1px,transparent 1px 5px);
  text-shadow:0 0 18px rgba(245,196,19,.42),0 0 55px rgba(245,196,19,.16);
}
.system-page--503 .system-eyebrow{ color:var(--gold); }
.system-card--warning > .frame__in{ border-color:rgba(245,196,19,.42); }
.system-footer{
  display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px 22px; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-mute);
}
.system-footer i{ width:5px; height:5px; background:var(--cyan-dim); transform:rotate(45deg); }
/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .columns{ grid-template-columns:1fr; }
  .split,.split--ops{ grid-template-columns:1fr; }
  .gear-route{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .money-method-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .money-risk-grid{ grid-template-columns:1fr; }
  .discord-route,.rakghoul-route,.gree-route,.pirate-route{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px){
  .system-brand{ width:min(100% - 24px,1120px); padding-top:12px; }
  .system-brand__link img{ width:54px; height:54px; }
  .system-brand__link strong{ font-size:20px; }
  .system-shell{ width:min(100% - 24px,1040px); padding:14px 0 28px; }
  .system-card__grid{ grid-template-columns:1fr; min-height:0; }
  .system-code{
    min-height:150px; padding:18px; font-size:clamp(92px,34vw,150px);
    border-right:0; border-bottom:1px solid rgba(67,196,239,.3);
  }
  .system-page--503 .system-code{ border-bottom-color:rgba(245,196,19,.3); }
  .system-card__content{ padding:28px 24px; }
  .system-card h1{ font-size:clamp(25px,8vw,38px); }
  .guild-info{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .conquest-rewards{ grid-template-columns:1fr; }
  .guide-detail{ scroll-margin-top:150px; }
  .guide-detail__head{ clip-path:none; }
  .guide-detail__head h2{ font-size:15px; }
  .guide-detail__body{ padding:12px; gap:14px; }
  .guide-columns{ grid-template-columns:1fr; }
  .gear-visuals,.gear-steps,.gear-support-grid,.capture-reward-grid{ grid-template-columns:1fr; }
  .money-method-grid,.money-weekly-grid,.money-risk-grid{ grid-template-columns:1fr; }
  .money-credit-panel{ grid-template-columns:56px minmax(0,1fr); padding:12px; gap:12px; }
  .money-credit-panel img{ width:50px; height:50px; }
  .gear-route,.discord-route,.rakghoul-route,.gree-route,.pirate-route{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rakghoul-visuals,.pirate-visuals{ grid-template-columns:1fr; }
  .rakghoul-visuals .guide-shot{ height:auto; max-height:none; }
  .masthead{ flex-wrap:wrap; padding:12px 14px 8px; }
  .masthead__status{ width:100%; margin:4px 0 0; }
  .navbar{ padding:6px 12px 10px; }
  .viewport{ padding:6px 12px 20px; }
  .hbtn{ padding:8px 16px; font-size:12.5px; }
  .form-row{ grid-template-columns:1fr; }
  .app__in{ grid-template-columns:1fr; text-align:center; }
  .app .acts{ justify-content:center; }
  .app__pf,.app .pframe{ margin:0 auto; }
  .foot{ text-align:center; }
  .rules-page__body{ padding:12px; }
  .rules-list li{ grid-template-columns:40px minmax(0,1fr); }
  .rules-list p{ padding:11px 12px; font-size:12.5px; }
}

@media (max-width: 420px){
  .system-brand__link{ gap:10px; }
  .system-brand__link img{ width:48px; height:48px; }
  .system-brand__link strong{ font-size:17px; }
  .system-brand__link small{ font-size:8px; letter-spacing:.1em; }
  .system-shell{ width:calc(100% - 16px); padding-top:8px; }
  .system-code{ min-height:112px; font-size:90px; }
  .system-card__content{ padding:22px 14px; }
  .system-lead{ font-size:13.5px; }
  .system-readout div{ grid-template-columns:1fr; gap:4px; }
  .system-readout dd{ text-align:left; }
  .system-actions{ display:grid; }
  .system-actions .hbtn{ width:100%; white-space:normal; }
  .system-footer{ gap:9px; padding-bottom:16px; text-align:center; }
  .guild-info{ grid-template-columns:1fr; }
  .gear-route,.discord-route,.rakghoul-route,.gree-route,.pirate-route{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============ CURSORS ============ */
/* SWTOR UI cursors, taken from swtor.jedipedia.net (/static/cursors/).
   Declared last on purpose: many components above set cursor:pointer, and
   equal-specificity rules are settled by source order, so these must come
   after to win. Each pair is .cur first (legacy fallback) then the PNG with
   its hotspot offsets, matching the source implementation. */
html, body{
  cursor:url(../cursors/default.cur), default;
  cursor:url(../cursors/default.png) 8 3, default;
}

a, button, select, summary, label,
input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"],
.hbtn, .chip, .pill, .xbtn, .card, .pointer{
  cursor:url(../cursors/pointer.cur), pointer;
  cursor:url(../cursors/pointer.png) 13 1, pointer;
}

/* text entry keeps the I-beam — a hand over a text field reads as broken */
input[type="text"], input[type="search"], input[type="number"],
input:not([type]), textarea{ cursor:text; }

/* non-interactive readouts inherit the plain arrow */
.lb li, .rec li{ cursor:url(../cursors/default.png) 8 3, default; }