:root{color-scheme:dark;font:16px/1.5 system-ui,sans-serif;background:#121519;color:#f4eddf;--border:#363632;--gold:#edbd69;--muted:#b9b7ae;--surface:#1b1e22}
*{box-sizing:border-box}body{margin:0}a{color:var(--gold)}header{border-bottom:1px solid var(--border);background:#17191c}.shell{max-width:1240px;margin:auto;padding-inline:clamp(16px,4vw,52px)}.top,.heading,.inline,.guild-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.top{min-height:68px}.brand{font-size:1.2rem;text-decoration:none;font-weight:750}.brand span{color:#f4eddf;margin-left:6px}#account{display:flex;align-items:center;gap:12px}.hero{padding:48px 0 32px;background:radial-gradient(ellipse at 25% 0%,#392a1d85,transparent 65%)}.eyebrow{color:var(--gold);font-size:.72rem;letter-spacing:.17em;font-weight:750}h1,h2{font-family:Georgia,serif;line-height:1.12}h1{font-size:clamp(2.45rem,6vw,4.6rem);margin:10px 0}h2{font-size:1.55rem;margin:6px 0 16px}p,small,.muted,footer{color:var(--muted)}p{margin:0}button,.button,input,select{font:inherit;border-radius:7px;padding:8px 11px;min-height:42px;border:1px solid #605649}button,.button{background:#edbd69;color:#21180d;font-weight:720;text-decoration:none;cursor:pointer;white-space:nowrap}button:hover,.button:hover{background:#ffcf7d}.quiet{background:#23262a;color:#f4eddf;font-size:.83rem}.quiet:hover{background:#35383c}button:disabled{opacity:.6;cursor:wait}input,select{background:#131619;color:#f4eddf;min-width:0}input{width:100%}label{font-weight:700;display:block;margin-bottom:6px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}.forms,.grid,.metrics{display:grid;gap:14px}.forms,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.forms #guilds{grid-column:1/-1}.forms #guilds:empty{display:none}.guild-line{border-top:1px solid var(--border);padding:8px 0}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0}.metric strong{display:block;color:var(--gold);font:2rem Georgia,serif}.heading{align-items:flex-start}.heading select,.heading input{max-width:48%}.roster{margin-top:14px}.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;min-width:650px}td,th{padding:9px 8px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.bar{display:grid;grid-template-columns:minmax(86px,1.2fr) 2fr 3ch;gap:10px;align-items:center;margin:5px 0;font-size:.9rem}meter{width:100%;height:14px;accent-color:var(--gold)}meter::-webkit-meter-optimum-value{background:var(--gold)}.bar small{overflow-wrap:anywhere}.group{border-bottom:1px solid var(--border);padding:8px 0}.group:last-child{border:0}.chart{width:100%;height:auto;display:block}.chart text{fill:var(--muted);font:11px system-ui}.chart .gridline{stroke:#434340}#notice:not(:empty){background:#252321;border:1px solid #504637;padding:12px 15px;border-radius:8px;margin-bottom:14px}footer{padding-block:25px;font-size:.85rem}[hidden]{display:none!important}.empty{padding:10px 0}
@media(max-width:780px){.grid,.forms{grid-template-columns:1fr}.card{padding:15px}.hero{padding-top:32px}.metric strong{font-size:1.6rem}#account>span{display:none}}
@media(max-width:420px){.forms .inline{align-items:stretch;flex-direction:column}.metric{padding:9px}}
.bar-detail{grid-column:2/-1}
.icon-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.wow-icon { flex: none; display: block; border: 1px solid #45403a; border-radius: 4px; }
.progression-card { grid-column: 1 / -1; }
.composition-card { grid-column: 1 / -1; }
.class-distribution { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px 0; padding: 0; margin: 16px 0 0; list-style: none; }
.class-distribution li { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; gap: 4px; }
.class-plot { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 105px; padding-top: 24px; border-bottom: 1px solid var(--border); }
.class-fill { position: relative; width: 52%; border-radius: 3px 3px 0 0; background-image: linear-gradient(#0005, transparent); }
.class-fill strong { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: .85rem; }
.class-distribution .icon-label { flex-direction: column; gap: 4px; margin-top: 4px; font-size: .9rem; }
.class-distribution small { padding-inline: 4px; overflow-wrap: anywhere; }
@media (max-width: 700px) { .class-distribution { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.progression-note { margin-bottom: 8px; }
.guild-chart text { font-size: 13px; }

.gear-card { grid-column: 1 / -1; }
.gear-filters { display: grid; gap: 9px; margin: 0 0 14px; }
.gear-filters fieldset { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.gear-filters legend { padding: 0 4px; color: var(--muted); font-size: .82rem; }
.gear-filters label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: .85rem; }
.gear-filters label:has(input:checked) { border-color: var(--gold); color: var(--gold); }
.gear-filters input { width: 1em; height: 1em; min-height: 0; margin: 0; accent-color: var(--gold); }
.gear-scroll { max-height: 30rem; overflow: auto; margin: 8px 0; }
.gear-scroll thead th { position: sticky; top: 0; background: #1c1e22; }
.gear-behind { color: #ffbd97; }
.equipped-trigger, .equipped-trigger:hover { padding: 0; min-height: 32px; border: 0; background: transparent; color: var(--gold); text-align: left; white-space: normal; font-weight: inherit; }
.equipped-trigger:hover { text-decoration: underline; }
.item-popup { position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 10px 12px; border: 2px solid #807c91; border-radius: 6px; background: linear-gradient(#101222, #070911); color: #fff; box-shadow: 0 3px 16px #000b, inset 0 0 0 1px #343443; font: 14px/1.35 Verdana, sans-serif; }
.item-title { font-weight: bold; margin-bottom: 5px; }
.item-title[data-quality="0"] { color: #9d9d9d; }
.item-title[data-quality="2"], .item-effect { color: #1eff00; }
.item-title[data-quality="3"] { color: #459dff; }
.item-title[data-quality="4"] { color: #bd72ff; }
.item-title[data-quality="5"] { color: #ff8000; }
.item-popup a { display: inline-block; margin-top: 7px; font-size: .75rem; }



.progression-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.progression-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.progression-frame { position: relative; min-width: 0; background: #141619; border: 1px solid var(--border); border-radius: 10px; }
.progression-frame .guild-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.progression-line { pointer-events: none; }
.progression-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: crosshair; }
.guild-chart.has-highlight .progression-series:not(.is-highlighted) { opacity: .24; }
.progression-series.is-highlighted .progression-line { stroke-width: 3; }
.guild-chart .plot-surface { fill: #090a0b; }
.guild-chart .gridline { stroke: #292c30; }
.guild-chart .chart-axis-title { font-size: 10px; font-weight: 750; letter-spacing: 1.1px; }
.progression-footnote { margin-top: 10px; font-size: .85rem; }





.chart-cursor { stroke: #696b6e; stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.progression-layout { display: grid; grid-template-columns: clamp(100px, 23%, 220px) minmax(0, 1fr); gap: 8px 10px; }
.progression-players { display: grid; grid-auto-rows: 40px; align-content: start; gap: 4px; min-height: 180px; }
.progression-players button { display: grid; grid-template-columns: auto minmax(0,1fr) 3ch; align-items: center; gap: 5px; min-height: 0; padding: 4px 6px; text-align: left; }
.progression-players .icon-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.progression-players .wow-icon { flex: none; width: 18px; height: 18px; }
.progression-players button.is-highlighted { background: #35383c; border-color: var(--gold); }
.progression-players button[aria-pressed="false"] { opacity: .52; }
.progression-players.has-highlight button:not(.is-highlighted) { opacity: .35; }
.progression-player-level { color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; }

:root {
  background: #0d131a;
  color: #f3ecdf;
  --surface: #151f28;
  --border: #34414b;
  --gold: #e6bf85;
  --muted: #bac4cd;
}
.shell { max-width: 1380px; }
header { background: #101820; }
.brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand span { margin: 0; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.top nav a { color: var(--muted); font-size: .88rem; text-decoration: none; }
.top nav a:hover { color: var(--gold); }
.hero {
  background: linear-gradient(90deg,#101a24f5,#101a24bc 44%,#101a240a 85%),
    #15202b url('/stronghold.jpg') right 46% / cover no-repeat;
  display: grid;
  align-content: end;
  min-height: 258px;
  padding: clamp(15px, 3vw, 32px);
  margin-bottom: 18px;
  border: 1px solid #736047;
  border-radius: 14px;
}
.hero-copy { padding: 0; }
.hero .eyebrow { text-transform: uppercase; }
.hero h1 { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.035em; text-wrap: balance; margin: 4px 0 7px; }
main.shell { padding-top: 16px; }
.card { background: linear-gradient(145deg,#19252e,var(--surface) 75%); border-radius: 10px; }
#guild-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: .85rem;
}
.hero .metrics { max-width: 680px; margin: 17px 0 0; gap: 1px; border: 1px solid #806a4d; border-radius: 8px; background: #806a4d; overflow: hidden; }
.hero .metric { display: flex; align-items: baseline; gap: 7px 12px; flex-wrap: wrap; background: #101820f7; border: 0; border-radius: 0; padding: 8px 12px; }
.metric strong { font: 700 1.65rem/1.2 Georgia,serif; font-variant-numeric: tabular-nums; }
.metric span { color: var(--muted); font-size: .86rem; }
.progression-card { padding: clamp(12px, 2vw, 22px); border-top: 2px solid #b69562; }
.progression-frame { background: #0b1118; border-radius: 0 8px 8px 0; }
.progression-layout { gap: 0; }
.progression-players { gap: 0; grid-auto-rows: 44px; border: 1px solid var(--border); border-right: 0; border-radius: 8px 0 0 8px; background: #101820; }
.guild-chart .plot-surface { fill: #0b1118; }
.guild-chart .gridline { stroke: #2b3944; }
.progression-players button { background: transparent; border: 1px solid transparent; border-bottom-color: #2b3944; border-radius: 0; padding-inline: 8px; }
.progression-players button:nth-child(even) { background: #ffffff05; }
.progression-players button:last-child { border-bottom-color: transparent; }
.progression-players button:hover, .progression-players button.is-highlighted { background: #27343d; border-color: var(--gold); }
.progression-players .icon-label { white-space: nowrap; }
.class-distribution { column-gap: 5px; }
.class-distribution li { padding: 0 3px 8px; border-bottom: 1px solid var(--border); background: #0b111844; border-radius: 6px; }
.gear-workspace { display: grid; gap: 14px; grid-template-columns: minmax(0,1fr); }
#gear { min-width: 0; }
@media (min-width: 1100px) {
  .gear-workspace { grid-template-columns: 185px minmax(0,1fr); }
  .gear-filters { align-self: start; }
  .gear-filters fieldset { flex-direction: column; }
  .gear-filters label { border-color: transparent; }
}
.quiet { background: #202e39; border-color: #4b5964; }
.quiet:hover { background: #2b3a46; }
.gear-scroll thead th { background: #18232d; }
tbody tr:hover { background: #d9e9ff08; }
.roster-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.roster-tools input { flex: 1 1 190px; }
.roster-tools select { flex: 1 1 220px; max-width: 100%; }
.roster-tools small { flex-basis: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 540px) {
  .top { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; padding-block: 9px; }
  .top nav { gap: 3px 13px; }
  .hero { background-position: center, 70% 48%; }
  .hero .metric { flex-direction: column; gap: 1px; padding: 7px; }
  .metric span { font-size: .73rem; }
  .progression-layout { grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); }
  .progression-players button { padding-inline: 3px; gap: 3px; font-size: .72rem; }
  .progression-players .icon-label { gap: 3px; }
  .progression-players .wow-icon { width: 14px; height: 14px; }
}