/* Warchest guild portal (portal.html, guild.html, privacy.html); builds on site.css */
.pmain { padding-block: clamp(26px, 4vw, 46px) 70px; min-height: 60vh; }
.pbar2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rim); }
.pnav { display: flex; gap: 6px; flex-wrap: wrap; }
.pnav a { font: 600 12px/1 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--blue); padding: 8px 10px; border-radius: 3px; border: 1px solid transparent; }
.pnav a.on, .pnav a:hover { border-color: rgba(0,180,255,.35); background: rgba(0,180,255,.06); }
#puser { display: flex; align-items: center; gap: 8px; }
#puser img { border-radius: 50%; border: 1px solid var(--gold-lo); }
.pname { color: var(--parch); text-decoration: none; font-weight: 600; }
.phead { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.phead h1 { font: 400 clamp(30px, 4.4vw, 48px)/1.1 var(--f-head); color: var(--gold-hi); margin-top: 4px; }
.phead p { margin-top: 6px; }
.psec { font: 400 clamp(22px, 2.6vw, 28px)/1.2 var(--f-head); color: var(--parch); margin: 30px 0 12px; }
.muted { color: var(--ash); }
.fine { color: var(--ash); font-size: 15px; margin-top: 10px; }
.lede { color: var(--mist); font-size: 19px; max-width: 62ch; margin: 12px 0 20px; }
.prow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.prow.end { justify-content: flex-end; }
.prow.wrap { gap: 8px 12px; }
.btn.small { padding: 6px 10px; font-size: 11px; }
.btn.big { padding: 14px 22px; font-size: 14px; }
.btn.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(230,183,92,.1); }
.btn:disabled { opacity: .5; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; text-decoration: underline; }
.pcard { padding: 18px 20px; margin-bottom: 14px; }
.pcard h3 { font: 600 15px/1.3 var(--f-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.pcard.danger { border-color: rgba(255,90,60,.4); }
.pcard.danger h3 { color: #ff8a6a; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; }
.pgrid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pgrid.charts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.pstats.wide { margin-bottom: 18px; }
.pstats div { padding: 12px 14px; border: 1px solid var(--rim); border-radius: 4px; background: linear-gradient(180deg, var(--stone-2), var(--stone)); }
.pstats b { display: block; font: 400 26px/1.1 var(--f-head); color: var(--gold-hi); }
.pstats span { color: var(--ash); font-size: 14.5px; }
.pchip { display: inline-block; font: 600 10.5px/1 var(--f-caps); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--rim); color: var(--mist); vertical-align: middle; }
.pchip.ok { border-color: rgba(111,191,115,.5); color: #8fd18f; }
.pchip.warn { border-color: rgba(230,183,92,.5); color: var(--gold); }
.pchip.owner { border-color: var(--gold-lo); color: var(--gold-hi); }
.pchip.officer { border-color: rgba(0,180,255,.4); color: var(--blue); }
.pguilds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.pguild { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 16px 18px; border: 1px solid var(--rim); border-radius: 4px; text-decoration: none; color: var(--parch);
  background: linear-gradient(135deg, rgba(230,183,92,.06), transparent 40%), linear-gradient(180deg, var(--stone-2), var(--stone)); transition: border-color .2s, transform .2s; }
.pguild:hover { border-color: var(--gold-lo); transform: translateY(-2px); }
.pguild b { font: 400 22px/1.2 var(--f-head); color: var(--gold-hi); width: 100%; }
.realm { color: var(--ash); font-size: 15px; font-weight: 400; }
.pempty { text-align: center; padding: clamp(30px, 6vw, 60px) 16px; border: 1px dashed var(--rim); border-radius: 6px; color: var(--mist); }
.pempty h2 { font: 400 26px/1.2 var(--f-head); color: var(--parch); margin-bottom: 8px; }
.pempty p { max-width: 60ch; margin: 0 auto 14px; }
.psign { padding: clamp(10px, 3vw, 30px) 0 10px; }
.psign h1 { font: 400 clamp(36px, 5vw, 58px)/1.05 var(--f-head); color: var(--gold-hi); margin-top: 6px; }
.psteps { margin-top: 30px; }
.psteps h2 { font: 400 24px/1.2 var(--f-head); margin-bottom: 10px; }
.psteps li, .psmall li { margin: 6px 0 6px 22px; color: var(--mist); }
.ptabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--rim); margin-bottom: 18px; }
.ptabs a { font: 600 12px/1 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--mist); padding: 11px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ptabs a:hover { color: var(--parch); }
.ptabs a.on { color: var(--gold-hi); border-bottom-color: var(--gold); }
.ptable { width: 100%; border-collapse: collapse; font-size: 16px; margin: 6px 0 14px; }
.ptable th { text-align: left; font: 600 11.5px/1.2 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); padding: 8px 10px; border-bottom: 1px solid var(--rim); }
.ptable td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.ptable .end { text-align: right; white-space: nowrap; }
.ptable.compact td { padding: 5px 8px; font-size: 15px; }
.ptable tr.low td { color: #ff9a80; }
.ptable tr.click { cursor: pointer; }
.ptable tr.click:hover td { background: rgba(255,255,255,.03); }
.ptable .pdetail td { background: rgba(230,183,92,.05); color: var(--mist); font-size: 15px; }
.ptable.perms td:not(:first-child), .ptable.perms th:not(:first-child) { text-align: center; }
.item { color: #c8a8ff; text-decoration: none; }
.item:hover { text-decoration: underline; }
.who { font-weight: 600; }
.who + sup { color: var(--gold); font-size: 10px; margin-left: 2px; }
.pneed { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; margin: 6px 0; font-size: 15.5px; }
.pbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); }
.plb { list-style: none; margin: 0; padding: 0; counter-reset: lb; }
.plb li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); counter-increment: lb; }
.plb li::before { content: counter(lb); color: var(--gold); width: 1.4em; }
.plb li b { margin-left: auto; color: var(--parch); }
.pdrop { display: grid; place-items: center; min-height: 140px; margin: 14px 0; border: 2px dashed var(--gold-lo); border-radius: 6px; cursor: pointer; text-align: center; padding: 20px; color: var(--mist); transition: background .2s; }
.pdrop.over, .pdrop:hover { background: rgba(230,183,92,.06); }
.pdrop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pwarn, .pok { padding: 12px 14px; border-radius: 4px; margin: 12px 0; }
.pwarn { border: 1px solid rgba(255,90,60,.45); background: rgba(255,90,60,.07); color: #ffc6b8; }
.pok { border: 1px solid rgba(111,191,115,.45); background: rgba(111,191,115,.07); color: #d6f0d6; }
.fpath { font-family: var(--f-mono, monospace); font-size: 14.5px; color: var(--parch); background: rgba(255,255,255,.05); padding: 2px 6px; border-radius: 3px; }
.codebox.big code { font-size: 22px; letter-spacing: .06em; }
.wrapcode { white-space: pre-wrap; word-break: break-all; font-size: 13px; max-height: 160px; overflow: auto; display: block; }
.pfield { display: grid; gap: 5px; margin: 8px 0; color: var(--mist); font-size: 15px; flex: 1 1 180px; }
.pfield input, .pfield select, .pfield textarea, .prow select, .prow input[type=search] {
  font: 500 16px/1.3 var(--f-body); color: var(--parch); background: #0d0b12; border: 1px solid var(--gold-lo); border-radius: 4px; padding: 8px 10px; max-width: 100%; }
.prow input[type=search] { flex: 1 1 260px; }
.pfield .prefix { color: var(--ash); font-size: 14px; word-break: break-all; }
.pcheck { display: inline-flex; gap: 8px; align-items: center; margin: 4px 14px 4px 0; color: var(--mist); }
.pcheck input { accent-color: var(--gold); width: 16px; height: 16px; }
.found { font-size: 14px; color: #8fd18f; min-height: 1em; }
.found.no { color: #ff8a6a; }
.pops { list-style: none; padding: 0; margin: 0 0 10px; }
.pops li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.pcur { margin: 10px 0; color: var(--mist); }
.pcur summary { cursor: pointer; color: var(--blue); }
.pcur li { margin: 4px 0 4px 18px; }
.pdialog { background: var(--stone-2, #1a1620); color: var(--parch); border: 1px solid var(--gold-lo); border-radius: 6px; padding: 20px 22px; max-width: min(460px, 92vw); }
.pdialog::backdrop { background: rgba(0,0,0,.6); }
.pdialog h3 { font: 400 22px/1.2 var(--f-head); color: var(--gold-hi); margin-bottom: 8px; }
#toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: 20px; display: grid; gap: 8px; width: min(520px, 92vw); }
.ptoast { padding: 12px 16px; border-radius: 4px; background: #1c1810; border: 1px solid var(--gold-lo); color: var(--parch); box-shadow: 0 10px 30px rgba(0,0,0,.6); transition: opacity .4s, transform .4s; }
.ptoast.bad { border-color: #e0553f; background: #2a1210; }
.ptoast.out { opacity: 0; transform: translateY(8px); }
[aria-busy="true"] { opacity: .7; transition: opacity .2s; }
/* public guild page */
.pubhead { text-align: center; padding: clamp(30px, 6vw, 60px) 0 20px; }
.pubhead h1 { font: 400 clamp(40px, 6vw, 70px)/1.05 var(--f-head); color: var(--gold-hi); }
.pubroster { columns: 3 220px; column-gap: 24px; }
.pubroster div { break-inside: avoid; padding: 3px 0; }
@media (max-width: 640px) {
  .ptable { font-size: 15px; }
  .ptable th, .ptable td { padding: 6px; }
  .ptable { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .ptable td, .ptable th { min-width: 64px; }
  .pfield { flex-basis: 100%; }
  .codebox { max-width: 100%; overflow-x: auto; }
  .pneed { grid-template-columns: minmax(0, 1fr) 60px; }
  .pneed .muted { grid-column: 1 / -1; }
}
/* ---------- raid performance ---------- */
.small { font-size: 13.5px; }
.grow { flex: 1 1 auto; }
.pcard.tight { padding: 12px 14px; }
.psec.flush { margin: 0; }
.pchip.bad { border-color: rgba(255,106,82,.5); color: #ff9a80; }
.pchip .x, .x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 4px; }
.pseg { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 14px; padding: 4px; border: 1px solid var(--rim); border-radius: 6px; background: rgba(0,0,0,.25); width: fit-content; max-width: 100%; }
.pseg a, .pseg button { font: 600 11.5px/1 var(--f-caps); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--mist); padding: 9px 12px; border-radius: 4px; border: 0; background: none; cursor: pointer; }
.pseg a:hover, .pseg button:hover:not(:disabled) { color: var(--parch); background: rgba(255,255,255,.04); }
.pseg a.on, .pseg button.on { color: #1a1206; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.pseg button:disabled { opacity: .35; cursor: default; }
.pseg.sub { margin-top: 4px; }
.pfilters { position: sticky; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; padding: 10px 12px; margin-bottom: 16px;
  border: 1px solid var(--rim); border-radius: 6px; background: linear-gradient(180deg, rgba(26,22,32,.97), rgba(18,15,22,.97)); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pf { display: grid; gap: 3px; font-size: 12px; color: var(--ash); }
.pf span { font: 600 10.5px/1 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; }
.pf select, .pf input { font: 500 14.5px/1.2 var(--f-body); color: var(--parch); background: #0d0b12; border: 1px solid var(--gold-lo); border-radius: 4px; padding: 6px 8px; max-width: 190px; }
.pf.grow input { max-width: none; width: 100%; min-width: 120px; }
.pf.grow { flex: 1 1 140px; }
.pfilters .pcheck { margin: 0 0 6px; font-size: 14px; }
.fcount { margin: 0 0 8px auto; font-size: 13.5px; }
.rchip { display: inline-block; font: 600 9.5px/1 var(--f-caps); letter-spacing: .08em; text-transform: uppercase; padding: 3px 5px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; border: 1px solid; }
.r-tank { color: #8fb8ff; border-color: rgba(143,184,255,.45); }
.r-healer { color: #8fd18f; border-color: rgba(143,209,143,.45); }
.r-dps { color: #ff9a80; border-color: rgba(255,154,128,.4); }
.parse { font-weight: 700; font-variant-numeric: tabular-nums; }
.t-gray { color: #9d9d9d; } .t-green { color: #1eff00; } .t-blue { color: #0070ff; } .t-purple { color: #a335ee; } .t-orange { color: #ff8000; } .t-gold { color: #e5cc80; text-shadow: 0 0 8px rgba(229,204,128,.5); }
.up { color: #6fdc72; } .down { color: #ff7a62; }
.yes { color: #8fd18f; font-weight: 700; } .no { color: #ff8a6a; }
.plink { text-decoration: none; }
.plink:hover .who { text-decoration: underline; }
.spell { color: #71d5ff; text-decoration: none; }
.spell:hover { text-decoration: underline; }
.mbar { position: relative; height: 22px; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; min-width: 80px; }
.mbar i { position: absolute; inset: 0 auto 0 0; opacity: .8; border-radius: 3px; }
.mbar span { position: relative; z-index: 1; display: block; padding: 0 8px; font: 600 13.5px/22px var(--f-body); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.barcell { min-width: 140px; width: 26%; }
.ptable th[data-k] { cursor: pointer; user-select: none; }
.ptable th[data-k]:hover { color: var(--parch); }
.ptable th.sorted { color: var(--gold-hi); }
.ptable th.sorted[aria-sort=descending]::after { content: " ▾"; } .ptable th.sorted[aria-sort=ascending]::after { content: " ▴"; }
.ptable.ranktbl td { vertical-align: middle; }
.cbox { position: relative; height: 240px; }
.cbox.tall { height: 320px; }
.meter { display: grid; gap: 3px; }
.mrow summary { display: grid; grid-template-columns: 26px minmax(170px, 1.4fr) minmax(120px, 3fr) 64px 92px 54px minmax(130px, 1.4fr) 34px 46px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; cursor: pointer; list-style: none; font-size: 14.5px; }
.mrow summary::-webkit-details-marker { display: none; }
.mrow summary::before { display: none; }
.mrow summary { font: 400 14.5px/1.3 var(--f-body); color: var(--parch); }
.mrow .mn { display: flex; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; overflow: hidden; }
.ptable td.nm { white-space: nowrap; }
.mrow summary:hover { background: rgba(255,255,255,.035); }
.mrow[open] summary { background: rgba(230,183,92,.07); }
.mrow .mi { color: var(--ash); text-align: right; } .mrow .mv { text-align: right; font-weight: 600; color: var(--parch); }
.mrow .mr, .mrow .mp { text-align: right; color: var(--mist); font-variant-numeric: tabular-nums; } .mrow .mx { color: var(--ash); font-size: 13px; }
.mrow .mpar, .mrow .md { text-align: right; }
.mrow .mb .mbar { height: 16px; }
.mspells { padding: 6px 10px 12px 40px; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 0 0 18px; }
.award { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rim); border-radius: 6px; text-decoration: none; color: var(--parch);
  background: radial-gradient(120% 140% at 0 0, rgba(230,183,92,.14), transparent 55%), linear-gradient(180deg, var(--stone-2), var(--stone)); transition: transform .15s, border-color .15s; }
.award:hover { transform: translateY(-2px); border-color: var(--gold-lo); }
.award .aicon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; font-size: 20px; color: var(--gold-hi); border: 1px solid var(--gold-lo); background: rgba(0,0,0,.35); }
.award em { display: block; font: 600 10.5px/1.2 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-style: normal; margin-bottom: 2px; }
.award small { display: block; margin-top: 2px; }
.awards.big .award .aicon { flex-basis: 52px; height: 52px; font-size: 26px; }
.nights { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.night { display: grid; gap: 2px; text-align: left; padding: 9px 12px; border: 1px solid var(--rim); border-radius: 5px; background: rgba(255,255,255,.02); color: var(--parch); cursor: pointer; font: inherit; }
.night:hover { border-color: var(--gold-lo); background: rgba(230,183,92,.05); }
.night .nd { font: 600 10.5px/1 var(--f-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.night b { font-weight: 600; }
.fhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.fhead .pf { margin-left: 4px; }
.phero { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px; margin: 8px 0 12px; border: 1px solid var(--rim); border-left: 4px solid var(--cc, var(--gold)); border-radius: 6px;
  background: radial-gradient(100% 160% at 0 50%, color-mix(in srgb, var(--cc, #e6b75c) 16%, transparent), transparent 60%), linear-gradient(180deg, var(--stone-2), var(--stone)); }
.phero h2 { font: 400 clamp(26px, 3.4vw, 38px)/1.1 var(--f-head); }
.pbig { display: grid; justify-items: center; }
.pbig .parse { font: 400 48px/1 var(--f-head); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge { font-size: 13px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--gold-lo); color: var(--gold-hi); background: rgba(230,183,92,.08); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.pcardp { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 12px 14px 8px; border: 1px solid var(--rim); border-top: 3px solid var(--cc); border-radius: 6px; text-decoration: none; color: var(--parch);
  background: linear-gradient(180deg, var(--stone-2), var(--stone)); transition: transform .15s, border-color .15s; }
.pcardp:hover { transform: translateY(-2px); border-color: var(--gold-lo); border-top-color: var(--cc); }
.pcardp .pn { font-size: 16.5px; } .pcardp .pv { font-size: 18px; font-weight: 600; } .pcardp .pp { display: grid; justify-items: end; font-size: 20px; }
.pcardp .pp small { font-size: 12px; } .pcardp .spark { grid-column: 1 / -1; width: 100%; height: 26px; }
.dtl { position: relative; height: 30px; margin: 4px 40px 14px 0; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08)); border: 1px solid var(--rim); }
.dpt { position: absolute; top: 5px; width: 10px; height: 18px; margin-left: -5px; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
.dend { position: absolute; right: -40px; top: 6px; font-size: 12.5px; color: var(--ash); }
.hurt { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 2fr) 70px minmax(120px, 1fr); gap: 10px; align-items: center; margin: 5px 0; font-size: 14.5px; }
.hurt .mbar { height: 14px; }
.heatwrap { overflow-x: auto; }
.ptable.heat th { max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptable.heat td { font-size: 13px; }
.ptable.prep td { vertical-align: middle; }
.rec .recline { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 4px 0; }
.rec .recline > span:first-child { min-width: 118px; color: var(--ash); font-size: 14px; }
.prow.wrap .btn.small { padding: 6px 9px; }
@media (max-width: 900px) {
  .mrow summary { grid-template-columns: 22px minmax(110px, 1fr) minmax(90px, 2fr) 58px 48px; }
  .mrow .mr, .mrow .mx, .mrow .md, .mrow .mpar { display: none; }
  .hurt { grid-template-columns: 1fr 1fr 64px; } .hurt .small { display: none; }
}
@media (max-width: 640px) {
  .pfilters { position: static; }
  .pf select, .pf input { max-width: 100%; }
  .pf { flex: 1 1 45%; }
  .cbox { height: 200px; } .cbox.tall { height: 260px; }
  .mspells { padding-left: 6px; overflow-x: auto; }
  .mrow summary { grid-template-columns: 20px minmax(0, 1fr) 62px 44px; }
  .mrow .mb { display: none; }
  .phero { padding: 12px 14px; }
  .dtl { margin-right: 36px; }
  .barcell { min-width: 120px; }
}
/* admin and notices */
.pok.demo { border-color: rgba(230,183,92,.5); background: rgba(230,183,92,.08); color: var(--parch); }
.gmchange .prow { margin-bottom: 0; }
.ptable.admin td { vertical-align: top; }
.alook { padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: 14.5px; }
.alook:last-child { border-bottom: 0; }
/* ---------- insights ---------- */
.mvt { display: inline-block; min-width: 2.2em; font: 700 11.5px/1 var(--f-body); text-align: center; padding: 3px 4px; border-radius: 3px; }
.mvt.up { color: #6fdc72; background: rgba(111,220,114,.1); } .mvt.down { color: #ff7a62; background: rgba(255,122,98,.1); }
.mvt.same { color: var(--ash); } .mvt.new { color: var(--blue); background: rgba(0,180,255,.1); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
.plb li .mvt { margin-left: 6px; }
.fire { color: #ffb347; font-weight: 700; }
.heatcal { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 6px; overflow-x: auto; padding-bottom: 4px; }
.heatcal .hm { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 14px; gap: 3px; font-size: 11.5px; color: var(--ash); white-space: nowrap; }
.heatcal .hd { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, 14px); gap: 3px; font-size: 11px; color: var(--ash); }
.heatcal .hg { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; grid-auto-flow: column; gap: 3px; }
.hc { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: rgba(255,255,255,.05); }
.hc.l1 { background: #4a3a1c; } .hc.l2 { background: #8a5c20; } .hc.l3 { background: #c98f35; } .hc.l4 { background: #ffe3a3; }
.hlegend { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.hlegend .hc { width: 12px; height: 12px; }
.vspick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.vspick .vs { font: 400 28px/1 var(--f-head); color: var(--gold); padding-bottom: 4px; }
.vsbox .vhead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-bottom: 12px; font-size: 20px; }
.vsbox .vhead > div:last-child { text-align: right; }
.vsbox .vhead small { display: block; font-size: 13px; color: var(--mist); }
.vrow { display: grid; grid-template-columns: 1fr minmax(120px, 210px) 1fr; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.vrow .vl { text-align: center; color: var(--mist); font-size: 13.5px; }
.vrow .va, .vrow .vb { position: relative; display: flex; align-items: center; gap: 8px; min-height: 22px; }
.vrow .va { justify-content: flex-end; } .vrow .va i { order: 2; } .vrow .va span { order: 1; }
.vrow i { display: block; height: 10px; border-radius: 3px; background: rgba(255,255,255,.12); max-width: 60%; }
.vrow .lead i { background: linear-gradient(90deg, var(--gold-lo), var(--gold)); }
.vrow .lead span { color: var(--gold-hi); font-weight: 700; }
.builder .slist { display: grid; gap: 8px; margin: 10px 0; }
.srow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.srow select, .srow input { font: 500 14.5px/1.2 var(--f-body); color: var(--parch); background: #0d0b12; border: 1px solid var(--gold-lo); border-radius: 4px; padding: 6px 8px; max-width: 100%; }
.srow input { flex: 1 1 200px; }
.sdot, .mdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.psec .small { font: 500 14px/1 var(--f-body); margin-left: 10px; }
@media (max-width: 640px) {
  .vrow { grid-template-columns: 1fr 1fr; } .vrow .vl { grid-column: 1 / -1; order: -1; text-align: left; }
}
/* usernames */
.pinit { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-lo); background: rgba(230,183,92,.12); color: var(--gold-hi); font: 700 13px/1 var(--f-body); }
.nbox { max-width: 520px; }
.nform .pfield input { font-size: 18px; }

/* ---------- recruiting (3.4.0.5) ---------- */
.pbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #d94a3d; color: #fff; font: 700 11px/1 var(--f-body); vertical-align: 1px; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.gcards.one { grid-template-columns: minmax(0, 1fr); }
.gcard { display: grid; gap: 8px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line, #2b2733); background: var(--card, #15131b); color: var(--parch); text-decoration: none; }
a.gcard:hover { border-color: #4a4452; background: var(--card-2, #1a1721); color: var(--parch); }
.gtop { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.gtop b { font: 600 20px/1.2 var(--f-head); color: #f8eed8; }
.gtop .realm { font-size: 14px; }
.gstatus { margin-left: auto; font: 600 13px/1 var(--f-body); color: #8fd18f; }
.gstatus.s-selective { color: var(--gold); } .gstatus.s-closed { color: var(--ash); }
.gpitch { color: var(--mist); font-size: 15.5px; line-height: 1.5; margin: 0; }
.gpitch.big { font-size: 17px; color: var(--parch); margin: 6px 0 12px; }
.gwants { display: grid; gap: 4px; font-size: 15px; }
.gwants:empty, .gmeta:empty { display: none; }
.gneed em { font-style: normal; font-weight: 600; color: var(--ash); font-size: 13px; margin-right: 4px; }
.gn-high em { color: #ff8a7d; } .gn-some em { color: var(--gold); }
.gmeta { display: flex; flex-wrap: wrap; gap: 6px; }
.gtimes { margin: 0; font-size: 14.5px; }
.gproof { margin: 0; font-size: 14px; color: var(--mist); }
.gproof b { color: #f8eed8; }
.dot { color: var(--ash); padding: 0 7px; }
.tag.f-alliance { background: rgba(0,112,221,.18); color: #8cc4ff; }
.tag.f-horde { background: rgba(196,30,58,.2); color: #ff9aa6; }
.tag.ok { background: rgba(116,224,122,.14); color: #9be3a0; }
.grecruit { margin-bottom: 18px; }
.gfacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 12px 0; font-size: 15.5px; }
.gfacts dt { color: var(--ash); font-weight: 600; }
.gfacts dd { margin: 0; }
/* conversations */
.apps { display: grid; gap: 6px; margin: 10px 0 20px; }
.appr { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line, #2b2733); background: var(--card, #15131b); color: var(--parch); text-decoration: none; }
.appr:hover { border-color: #4a4452; color: var(--parch); }
.adot { width: 9px; height: 9px; border-radius: 50%; }
.appr.unread .adot { background: #d94a3d; }
.appr.unread .amain b { font-weight: 800; }
.amain { display: grid; gap: 3px; min-width: 0; }
.aex { color: var(--mist); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aside { display: grid; gap: 4px; justify-items: end; text-align: right; }
.pchip.st-open { background: rgba(0,180,255,.12); color: var(--blue-hi); }
.pchip.st-accepted { background: rgba(116,224,122,.14); color: #9be3a0; }
.pchip.st-declined, .pchip.st-withdrawn { color: var(--ash); }
.thead .prow { margin: 0; align-items: flex-start; }
.tname { font: 600 22px/1.2 var(--f-head); margin: 0 0 4px; }
.msgs { display: grid; gap: 10px; margin: 16px 0; max-height: 60vh; overflow: auto; padding-right: 4px; }
.msg { max-width: min(640px, 88%); padding: 10px 14px; border-radius: 12px; background: var(--card-2, #1a1721); border: 1px solid var(--line, #2b2733); }
.msg.mine { justify-self: end; background: rgba(230,183,92,.08); border-color: rgba(230,183,92,.25); }
.msg.sys { justify-self: center; background: none; border: 0; color: var(--mist); font-size: 14px; text-align: center; }
.mwho { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.mbody { white-space: normal; overflow-wrap: anywhere; }
.mreply textarea, .pdialog textarea { width: 100%; font: 400 16px/1.5 var(--f-body); color: var(--parch); background: #0e0c13; border: 1px solid var(--line-2, #3a3542); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.pdialog textarea { margin: 6px 0 4px; }
.pdialog textarea.bad { border-color: #d94a3d !important; }
/* listing and profile forms */
.lgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lprev { position: sticky; top: 80px; }
.lform h4 { font: 650 15px/1.3 var(--f-body); color: var(--gold-hi); margin: 18px 0 6px; }
.lform textarea { min-height: 90px; }
.prow.wrapf { align-items: flex-end; }
.prow.wrapf .pfield { flex: 1 1 150px; margin: 0; }
.lclasses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.lclasses label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.lclasses select.mini { font: 500 14px/1.2 var(--f-body); color: var(--parch); background: #0e0c13; border: 1px solid var(--line-2, #3a3542); border-radius: 6px; padding: 4px 6px; }
.srowx { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.srowx select, .srowx input { font: 500 15px/1.2 var(--f-body); color: var(--parch); background: #0e0c13; border: 1px solid var(--line-2, #3a3542); border-radius: 6px; padding: 6px 8px; }
.pchecks { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.pcheck.block { display: flex; margin: 6px 0; }
.pcheck.big { font-size: 16px; color: var(--parch); margin: 8px 0 12px; }
.pseg.small button { padding: 6px 10px; }
.dstatus { font-size: 15px; }
.dhow { margin: 4px 0 8px; }
.dhow summary { font: 600 15px/1.3 var(--f-body); color: var(--blue-hi); padding: 8px 12px; }
.dhow summary::before { width: 6px; height: 6px; }
@media (max-width: 900px) { .lgrid { grid-template-columns: minmax(0, 1fr); } .lprev { position: static; } }
@media (max-width: 560px) { .appr { grid-template-columns: 10px minmax(0, 1fr); } .aside { grid-column: 2; justify-items: start; text-align: left; } .gfacts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .gfacts dd { margin-bottom: 8px; } }

/* ================= clean theme (3.4.0.4) ================= */
:root {
  --f-head: "Fraunces", Georgia, "Times New Roman", serif;
  --line: #2b2733;            /* neutral hairline */
  --line-2: #3a3542;
  --card: #15131b;
  --card-2: #1a1721;
  --tint: rgba(230,183,92,.08);
}
h1, h2, h3, h4 { font-optical-sizing: auto; }

/* ---- top bar and navigation: plain text links, one underline for the current page ---- */
.bar { background: rgba(10,9,16,.92) !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
.nav { gap: 2px; }
.nav a, .nav a:hover, .nav a.on {
  font: 500 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; text-shadow: none;
  color: var(--mist); background: none; border: 0; border-radius: 0; padding: 20px 8px 18px; box-shadow: none;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--parch); }
.nav a.on { color: var(--gold-hi); border-bottom-color: var(--gold); }
@media (max-width: 1220px) {
  .nav a, .nav a:hover, .nav a.on { padding: 12px; font-size: 15px; border-bottom: 0; border-radius: 6px; }
  .nav a.on { background: var(--tint); }
}
.menu-btn { font: 600 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--parch); background: transparent; border: 1px solid var(--line-2); border-radius: 8px; }
.search-btn { font: 500 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--mist); background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: none; }
.search-btn:hover { color: var(--parch); border-color: #4a4452; }
.search-btn kbd { border-color: var(--line-2); color: var(--ash); }

/* ---- type ladder ---- */
.eyebrow, .phead .eyebrow { font: 600 12.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.tagline { font: 500 clamp(21px, 2.2vw, 26px)/1.35 var(--f-head); letter-spacing: -.005em; }
.chapter h2, .newshead h2 {
  font: 600 clamp(30px, 3.8vw, 44px)/1.12 var(--f-head); letter-spacing: -.015em; color: #f6ecd6;
}
.pagehead h1, .phead h1, .psign h1, .pubhead h1 {
  font-family: var(--f-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.06;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f8eed8; filter: none;
  padding: 0; margin-right: 0;
}
.pagehead h1 { font-size: clamp(38px, 5vw, 58px); }
.pagehead { background: radial-gradient(700px 240px at 15% 0%, rgba(230,183,92,.09), transparent 70%) !important; border-bottom-color: var(--line) !important; }
.prose h3, .h3, .psec, .pempty h2, .psteps h2, .phero h2 {
  font: 600 24px/1.25 var(--f-head); letter-spacing: -.01em; color: #f4e7c8;
}
.psec { font-size: clamp(22px, 2.4vw, 26px); }
.prose h3::after { content: none; }
.steps h3, .mini .panel h3, .tile h3, .legend b, .pdialog h3, .pguild b, .path b, .pager b, .key b, .rank .rn {
  font-family: var(--f-head); font-weight: 600; letter-spacing: -.005em;
}
.steps h3 { font-size: 20px; color: #f4e7c8; margin: 6px 0 4px; }
.mini .panel h3, .newscard h3 { font-size: 20px; }
.tile h3 { font-size: 17px; color: var(--parch); }
.path b, .pager b { font-size: 20px; color: var(--gold-hi); }
.panel h4, .pcard h3 {
  font: 650 16px/1.3 var(--f-body); letter-spacing: -.005em; text-transform: none; color: var(--gold-hi); margin-bottom: 10px;
}
summary { font: 600 18px/1.35 var(--f-head); color: #f4e7c8; }
summary:hover { color: var(--gold-hi); }
th, .ptable th { font: 600 12.5px/1.3 var(--f-body); letter-spacing: .02em; text-transform: none; color: var(--ash); background: none; }
.note b { font: 650 14px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; }
.meta { font: 500 13.5px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; }
.count, .copy, .tag, .chip, .onpage a, .footnav a, .pager span, .pvptags a, .award em, .night .nd, .pf span, .toast b, .ri, .rank .ri { letter-spacing: 0 !important; text-transform: none !important; }

/* ---- buttons: two looks. Solid gold for the one main action, quiet outline for the rest ---- */
.btn {
  font: 600 15px/1 var(--f-body); letter-spacing: 0; text-transform: none; text-shadow: none;
  padding: 12px 18px; border-radius: 8px; color: var(--parch);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-2); box-shadow: none; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { transform: none; color: #fff; background: rgba(255,255,255,.07); border-color: #57505f; box-shadow: none; }
.btn.primary { color: #1d1204; background: var(--gold); border-color: var(--gold); text-shadow: none; }
.btn.primary:hover { color: #1d1204; background: #f0c674; border-color: #f0c674; }
.btn.war { color: #fff; background: #b8322a; border-color: #b8322a; text-shadow: none; box-shadow: none; }
.btn.war:hover { background: #cc3d33; border-color: #cc3d33; color: #fff; }
.btn.small { padding: 7px 11px; font-size: 13.5px; border-radius: 7px; }
.btn.big { padding: 14px 22px; font-size: 16px; }
/* small actions (edit, delete, reset, sign out...) read as quiet text until hovered */
.btn.small:not(.primary):not(.war) { background: transparent; border-color: transparent; color: var(--blue-hi); padding: 7px 9px; }
.btn.small:not(.primary):not(.war):hover { background: rgba(255,255,255,.06); border-color: transparent; color: #fff; }
.btn.small.danger, .btn.small[data-danger] { color: #ff8a7d; }
/* form fields: neutral borders, gold only on focus */
.search, .pfield input, .pfield select, .pfield textarea, .pf select, .pf input, select, input[type="text"], input[type="search"], input[type="date"], input[type="number"], textarea {
  border-color: var(--line-2) !important; border-radius: 8px; box-shadow: none !important; background-color: #0e0c13;
}
.search:focus, .pfield input:focus, .pfield select:focus, .pfield textarea:focus, .pf select:focus, .pf input:focus, select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(230,183,92,.15) !important;
}
.hero .cta .btn { padding: 13px 20px; letter-spacing: 0; }
.cta { align-items: center; }
/* text links standing in for secondary buttons */
.tlink { font: 600 15px/1.2 var(--f-body); color: var(--blue-hi); text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.tlink::after { content: " \2192"; }
.tlink:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.tlink.war { color: #ff8a7d; }
.copy { font: 600 13px/1 var(--f-body); padding: 7px 10px; border-radius: 6px; color: var(--mist); background: transparent; border: 1px solid var(--line-2); }
.copy:hover { color: #fff; border-color: #57505f; }
.linkbtn { font-weight: 600; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; }

/* ---- labels that are not buttons: small, filled, no border ---- */
.tag, .pchip, .rchip {
  font: 600 12px/1 var(--f-body) !important; padding: 4px 8px; border-radius: 5px; border: 0 !important;
  background: rgba(255,255,255,.06); color: var(--mist);
}
.pchip .x { opacity: .7; }
/* filter toggles: a quiet segmented look */
.chip { font: 500 14px/1 var(--f-body); padding: 8px 12px; border-radius: 7px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--mist); }
.chip:hover { color: var(--parch); background: rgba(255,255,255,.07); }
.chip[aria-pressed="true"] { color: var(--gold-hi); background: var(--tint); border-color: rgba(230,183,92,.4); }

/* "on this page" pills become a plain list of links */
.onpage { gap: 6px 22px; }
.onpage a { font: 600 15px/1.3 var(--f-body); padding: 0; border: 0; background: none; border-radius: 0; color: var(--blue-hi); }
.onpage a::before { content: "\2193  "; color: var(--ash); }
.onpage a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* world PvP words in the hero: inline links, not badges */
.pvptags { gap: 4px 0; }
.pvptags a { font: 600 14.5px/1.4 var(--f-body); padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: #ff8a7d; border-radius: 0; }
.pvptags a + a::before { content: "\00b7"; color: var(--ash); padding: 0 9px; }
.pvptags a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---- surfaces: flat cards, one border, no ornaments or glow ---- */
.panel, .tile, .path, .pager a, .pcard, .pstats div, .pguild, .award, .night, .phero, .pbox, details, .pfilters, .pdialog {
  box-shadow: none !important;
}
.panel {
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 12px;
}
.panel.school { border-color: color-mix(in srgb, var(--school) 22%, var(--line)) !important; }
.panel::before, .panel::after { content: none !important; display: none !important; }
.tile, .path, .pager a, .pguild {
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 12px; transform: none !important;
}
.tile:hover, .path:hover, .pager a:hover, .pguild:hover, .newscard:hover { border-color: #4a4452 !important; background: var(--card-2) !important; transform: none !important; }
.pstats div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.pstats b { font: 650 26px/1.1 var(--f-body); letter-spacing: -.02em; color: #f8eed8; }
details { border-color: var(--line); background: var(--card); border-radius: 10px; }
.rule { height: 1px; margin: 40px 0 30px; background: var(--line) !important; }
.rule::before, .rule::after { content: none !important; }
footer { border-top-color: var(--line) !important; background: none !important; }
.footnav a { font: 500 14px/1 var(--f-body); color: var(--mist); }
.footnav a:hover { color: var(--parch); }

/* numbered steps: smaller, flatter counters */
.steps > li { grid-template-columns: 34px minmax(0, 1fr); }
.steps > li::before {
  width: 30px !important; height: 30px !important; font: 650 14px/1 var(--f-body) !important; color: var(--gold-hi) !important;
  background: var(--tint) !important; border: 1px solid rgba(230,183,92,.35) !important; box-shadow: none !important; margin-top: 6px;
}
.warlist li::before { box-shadow: none; }
.blue-name { text-shadow: none; }
.crest img { filter: none; }

/* ---------- portal ---------- */
.pbar2, .ptable td, .ptable th, td, th { border-color: var(--line) !important; }
.pnav a, .pnav a:hover, .pnav a.on { font: 500 14.5px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--mist); border: 0; background: none; padding: 8px 10px; }
.pnav a:hover { color: var(--parch); }
.pnav a.on { color: var(--gold-hi); }
.ptabs { border-bottom-color: var(--line) !important; gap: 2px; }
.ptabs a { font: 500 14.5px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--mist); padding: 12px 10px; }
.ptabs a:hover { color: var(--parch); }
.ptabs a.on { color: var(--gold-hi); border-bottom-color: var(--gold); }
.pseg { background: rgba(255,255,255,.04) !important; border: 1px solid var(--line) !important; border-radius: 9px !important; padding: 3px !important; }
.pseg a, .pseg button { font: 500 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; padding: 8px 12px; border-radius: 7px; }
.pseg a.on, .pseg button.on { color: var(--gold-hi); background: var(--tint); box-shadow: inset 0 0 0 1px rgba(230,183,92,.35); }
.pf span { font: 600 12.5px/1 var(--f-body); color: var(--ash); }
.pfilters { background: var(--card) !important; border-color: var(--line) !important; border-radius: 12px !important; }
.award, .night, .phero, .vsplayer { background: var(--card) !important; border-color: var(--line) !important; border-radius: 12px; transform: none !important; }
.award:hover { border-color: #4a4452 !important; }
.award em, .night .nd { font: 600 12.5px/1.2 var(--f-body); color: var(--gold); }
.phero h2 { font-size: clamp(26px, 3.2vw, 36px); }
.pbig .parse { font-family: var(--f-body); font-weight: 700; letter-spacing: -.03em; }
.vspick .vs { font-family: var(--f-head); font-weight: 600; }
.ptable tr:hover td { background: rgba(255,255,255,.025); }
.pinit { box-shadow: none !important; }

/* ================= modern layout (3.5) ================= */
:root {
  --bg: #0d0e12; --bg-2: #111217; --surface: #14161b; --surface-2: #1a1d24; --line: #23262e; --line-2: #343842;
  --text: #e9e6df; --head: #f5f2ea; --muted: #a9a6a0; --dim: #8e919a; --faint: #6f727b;
  --gold: #e2b45a; --gold-hi: #f0cd84; --blue: #7cc4ff; --blue-hi: #b5ddff; --red: #ff8a7d;
  --void: #0d0e12; --stone: #14161b; --stone-2: #1a1d24; --rim: #23262e; --parch: #e9e6df; --mist: #c4c0b7; --ash: #9a9da6;
  --card: #14161b; --card-2: #1a1d24; --line-2: #343842;
  --f-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-caps: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-head: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --radius: 14px;
}
html, body { background: var(--bg) !important; }
body { background-image: none !important; color: var(--text); font: 400 16.5px/1.65 var(--f-body); }
h1, h2, h3, h4 { letter-spacing: -0.015em; }
a { color: var(--blue); }
a:hover { color: var(--blue-hi); }
.blue-name { color: var(--blue); font-weight: 600; }

/* ---------- header ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(13,14,18,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.tb { max-width: 1440px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px 26px; min-height: 44px; position: relative; }
.tb-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; color: var(--text); }
.tb-brand img { width: 30px; height: 30px; }
.tb-brand span { font: 700 18px/1 "Cinzel Decorative", Georgia, serif; color: var(--gold); letter-spacing: .02em; }
.topbar .tb-nav { display: flex; gap: 2px; flex: 1 1 auto; justify-content: flex-start; min-width: 0; position: static; background: none; border: 0; box-shadow: none; padding: 0; }
.topbar .tb-nav a, .topbar .tb-nav a:hover, .topbar .tb-nav a.on {
  font: 500 15px/1 var(--f-body); letter-spacing: 0; text-transform: none; text-shadow: none; padding: 10px 12px; border-radius: 9px; border: 0;
  color: #cfcbc3; background: none; text-decoration: none; }
.topbar .tb-nav a:hover { color: var(--head); background: rgba(255,255,255,.04); }
.topbar .tb-nav a.on { color: var(--head); background: var(--surface-2); font-weight: 600; }
.topbar .tb-search { display: inline-flex; align-items: center; gap: 10px; min-width: 210px; height: 40px; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid var(--line-2) !important; background: var(--surface) !important; color: var(--dim) !important; font: 400 14px/1 var(--f-body) !important; letter-spacing: 0; text-transform: none; cursor: pointer; margin: 0; }
.topbar .tb-search span { flex: 1; text-align: left; display: inline; }
.topbar .tb-search kbd { display: inline; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; font: 500 12px/1.4 var(--f-body); color: var(--dim); }
.topbar .tb-search:hover { color: var(--text) !important; border-color: #4a4f5a !important; }
.tb-signin { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 10px; background: var(--gold); color: #18120a !important; font: 600 15px/1 var(--f-body); text-decoration: none; flex: none; }
.tb-signin:hover { background: var(--gold-hi); }
.topbar .tb-menu { display: none; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 600 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; }
@media (max-width: 1220px) { .topbar .tb-nav { display: flex; position: static; padding: 0; background: none; border: 0; box-shadow: none; } }
@media (max-width: 860px) {
  .topbar .tb-menu { display: inline-flex; align-items: center; margin-left: auto; }
  .topbar .tb-nav { display: none !important; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 10px 16px 14px !important; background: rgba(13,14,18,.98) !important; border-bottom: 1px solid var(--line) !important; }
  .topbar .tb-nav.open { display: flex !important; }
  .topbar .tb-nav a { padding: 14px 12px; font-size: 16px; }
  .topbar .tb-search { min-width: 0; width: 40px; padding: 0; justify-content: center; margin-left: auto; }
  .topbar .tb-search span, .topbar .tb-search kbd { display: none; }
  .tb { gap: 10px; padding: 10px 16px; }
  .tb-signin { padding: 0 12px; }
}
/* search dialog */
.sbox { background: var(--surface) !important; border: 1px solid var(--line-2) !important; border-radius: 16px !important; box-shadow: 0 40px 100px rgba(0,0,0,.7) !important; }
.srow { border-bottom-color: var(--line) !important; color: var(--dim) !important; }
.sres b { font: 600 17px/1.3 var(--f-body) !important; color: var(--head) !important; }
.sres li.on a, .sres a:hover { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
.sres .sp, .stry button { font: 600 12px/1 var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; }
.stry button { color: var(--text) !important; border-color: var(--line-2) !important; }

/* ---------- footer ---------- */
.sitefoot { margin-top: 0 !important; border-top: 1px solid var(--line) !important; background: #0a0b0e !important; }
.sf { max-width: 1240px; margin: 0 auto; padding: 48px 24px 56px; display: flex; flex-wrap: wrap; gap: 32px 48px; }
.sf-brand { flex: 2 1 280px; }
.sf-brand p { margin: 14px 0 0; max-width: 26rem; color: var(--dim); font-size: 14px; line-height: 1.6; }
.sf-col { flex: 1 1 150px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.sf-col b { color: var(--head); font-weight: 600; margin-bottom: 2px; }
.sf-col a { color: var(--muted); text-decoration: none; }
.sf-col a:hover { color: var(--head); }
.sf-log { flex: 2 1 260px; }
.sf-log span { color: var(--muted); line-height: 1.45; }
.sf-log em { font-style: normal; color: var(--gold); font-weight: 600; margin-right: 8px; }

/* ---------- shared bits ---------- */
.btn { border-radius: 10px; font-family: var(--f-body); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #18120a; }
.btn.primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #18120a; }
.panel, .tile, .path, .pager a, .pcard, details, .pfilters, .pguild { border-radius: var(--radius) !important; background: var(--surface) !important; border-color: var(--line) !important; }
.eyebrow { font: 600 13px/1.3 var(--f-body) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--gold); }
.tag, .pchip, .rchip { border-radius: 999px !important; background: var(--surface-2) !important; color: #c9c6be; }

/* ---------- home ---------- */
.h-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; }
.home .h-hero { position: relative; min-height: 680px; display: flex; align-items: center; margin-top: -61px; padding-top: 61px;
  background-image: linear-gradient(90deg, rgba(13,14,18,.97) 0%, rgba(13,14,18,.86) 36%, rgba(13,14,18,.32) 64%, rgba(13,14,18,.05) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(13,14,18,0) 26%), url(img/hero-bg.webp);
  background-size: cover; background-position: 62% 30%; }
.home .topbar { background: rgba(13,14,18,.55); border-bottom-color: rgba(255,255,255,.07); }
.h-hero-in { width: 100%; padding-block: 72px 104px; }
.h-hero-copy { max-width: 620px; }
.h-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(13,14,18,.55); color: #dcd8cf; font-size: 14px; text-decoration: none; }
.h-pill:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.h-pill > span { padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #18120a; font-weight: 700; font-size: 12px; }
.h-wordmark { margin: 26px 0 0; font: 900 clamp(56px, 8vw, 88px)/.95 "Cinzel Decorative", Georgia, serif; color: var(--gold); text-shadow: 0 4px 30px rgba(0,0,0,.6);
  background: linear-gradient(180deg, #fff3d0, #f0cd84 35%, #e2b45a 70%, #9a6a24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: .04em .14em .06em 0; display: inline-block; filter: drop-shadow(0 3px 0 #2a1c08); }
.h-hero h1 { margin: 18px 0 0; font: 600 clamp(28px, 3.4vw, 40px)/1.16 var(--f-body); letter-spacing: -.02em; color: #f7f4ec; }
.h-war { color: #ff8a7d; }
.h-lede { margin: 18px 0 0; max-width: 34rem; font-size: 18px; color: #c4c0b7; }
.h-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.h-ctas.center { justify-content: center; }
.h-btn { height: 46px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 12px; font: 600 16px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.h-btn.big { height: 52px; padding: 0 24px; }
.h-btn.gold { background: var(--gold); color: #18120a; box-shadow: 0 10px 30px rgba(226,180,90,.22); }
.h-btn.gold:hover { background: var(--gold-hi); color: #18120a; }
.h-btn.ghost { border-color: rgba(255,255,255,.22); background: rgba(13,14,18,.45); color: #f7f4ec; }
.h-btn.ghost:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.h-btn.red { margin-top: 26px; background: #c9392e; color: #fff; }
.h-btn.red:hover { background: #dc4639; color: #fff; }
.h-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.h-meta b { color: #f7f4ec; font-weight: 600; }
.h-glance { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.h-glance-in { padding-block: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 28px; }
.h-glance b { display: block; font: 700 30px/1.1 var(--f-body); color: var(--gold); letter-spacing: -.01em; }
.h-glance span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.h-show { padding-block: 88px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.h-show.rev { flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.h-show-copy { flex: 1 1 380px; min-width: 0; }
.h-show-art { flex: 1.4 1 520px; min-width: 0; position: relative; }
.h-show-art::before { content: ""; position: absolute; inset: -40px; pointer-events: none; }
.glow-gold::before { background: radial-gradient(closest-side, rgba(226,180,90,.16), transparent); }
.glow-blue::before { background: radial-gradient(closest-side, rgba(124,196,255,.13), transparent); }
.glow-red::before { background: radial-gradient(closest-side, rgba(201,57,46,.2), transparent); }
.h-show-art > img { position: relative; display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
.h-show-art.layered { padding-bottom: 64px; }
.h-show-art.layered > img:first-child { width: 88%; }
.h-show-art .h-over { position: absolute; right: 0; bottom: 0; width: 58%; border-color: #4a4f5a; box-shadow: 0 30px 70px rgba(0,0,0,.7); }
.h-kicker { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--gold); }
.h-kicker.red { color: var(--red); }
.h-show h2, .h-rest h2, .h-new h2, .h-closer h2 { margin: 14px 0 0; font: 600 clamp(28px, 3vw, 38px)/1.15 var(--f-body); letter-spacing: -.02em; color: var(--head); }
.h-show p, .h-new p { margin: 14px 0 0; font-size: 17px; color: var(--muted); }
.h-checks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #dcd8cf; }
.h-checks li { display: flex; gap: 10px; }
.h-checks svg { flex: none; margin-top: 3px; color: var(--gold); }
.h-more { display: inline-flex; gap: 6px; margin-top: 24px; font-weight: 600; text-decoration: none; }
.h-pvp { margin-top: 88px; border-block: 1px solid #3a1c1c; background-image: linear-gradient(90deg, rgba(18,8,9,.96) 0%, rgba(18,8,9,.9) 40%, rgba(18,8,9,.62) 100%), url(img/hero-bg.webp); background-size: cover; background-position: 20% 60%; }
.h-pvp .h-show { padding-block: 88px; }
.h-pvp h2 { color: #fff4f2; }
.h-pvp p { color: #d9c4c0; }
.h-pvp .h-show-art > img { border-color: #5a2a28; box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 80px rgba(201,57,46,.18); }
.h-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.h-chips a { padding: 6px 12px; border-radius: 999px; background: rgba(255,107,91,.14); color: #ffb3a9; font-size: 14px; font-weight: 500; text-decoration: none; }
.h-chips a:hover { background: rgba(255,107,91,.24); color: #fff; }
.h-rest { padding-block: 96px 24px; }
.h-center { text-align: center; max-width: 640px; margin: 0 auto; }
.h-eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--gold); }
.h-eyebrow.blue { color: var(--blue); }
.h-tiles { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.h-tile { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #16181e, #121318); color: var(--text); text-decoration: none; transition: border-color .15s; }
.h-tile:hover { border-color: #4a4f5a; color: var(--text); }
.h-tile img { flex: none; }
.h-tile b { display: block; font-size: 17px; font-weight: 600; color: var(--head); }
.h-tile span span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.h-strip { margin-top: 36px; display: block; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.h-strip img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 50% 30%; opacity: .55; }
.h-strip > span { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; max-width: 560px;
  background: linear-gradient(90deg, rgba(13,14,18,.95) 0%, rgba(13,14,18,.6) 55%, rgba(13,14,18,0) 100%); }
.h-strip b { font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--f-body); color: var(--head); }
.h-strip span span { margin-top: 10px; color: #c4c0b7; }
.h-feats { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.h-feats div { padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.h-feats b { display: block; font-weight: 600; color: var(--head); }
.h-feats span { color: var(--dim); font-size: 14px; }
.h-portal { padding-block: 72px 32px; }
.h-browser { position: relative; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 40px 90px rgba(0,0,0,.6); overflow: hidden; }
.hb-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #16181e; border-bottom: 1px solid var(--line); }
.hb-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3d46; }
.hb-bar span { margin-left: 12px; flex: 1; padding: 4px 12px; border-radius: 6px; background: var(--bg); color: var(--faint); font-size: 12px; }
.hb-body { display: flex; }
.hb-side { width: 150px; flex: none; padding: 14px 10px; border-right: 1px solid var(--line); background: #0a0b0e; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
.hb-side span { padding: 6px 8px; border-radius: 6px; }
.hb-side .on { background: var(--surface-2); color: var(--head); font-weight: 600; }
.hb-main { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hb-main > b { font-size: 18px; font-weight: 600; color: var(--head); }
.hb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hb-kpis div, .hb-chart { padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.hb-kpis span, .hb-chart span { display: block; color: var(--dim); font-size: 11px; }
.hb-kpis b { font-size: 18px; color: var(--head); }
.hb-kpis b.g { color: var(--gold); }
.h-new { padding-block: 72px 96px; display: flex; flex-wrap: wrap; gap: 32px; }
.h-new > div:first-child { flex: 1 1 300px; }
.h-log { flex: 2 1 520px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.h-log div { display: flex; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); color: #c9c6be; }
.h-log div:last-child { border-bottom: 0; }
.h-log em { width: 56px; flex: none; font-style: normal; color: var(--gold); font-weight: 600; }
.h-closer { border-top: 1px solid var(--line); background-image: linear-gradient(0deg, rgba(13,14,18,.94), rgba(13,14,18,.78)), url(img/hero-bg.webp); background-size: cover; background-position: 70% 45%; }
.h-closer-in { max-width: 820px; margin: 0 auto; padding: 104px 24px; text-align: center; }
.h-closer h2 { font-size: clamp(30px, 3.6vw, 44px); color: #f7f4ec; }
.h-closer p { margin: 14px auto 0; max-width: 34rem; font-size: 18px; color: #c4c0b7; }
@media (max-width: 700px) {
  .home .h-hero { min-height: 0; background-position: 70% 30%; background-image: linear-gradient(0deg, rgba(13,14,18,.98) 30%, rgba(13,14,18,.55) 100%), url(img/hero-bg.webp); }
  .h-hero-in { padding-block: 40px 56px; }
  .h-show { padding-block: 56px 8px; gap: 32px; }
  .h-strip > span { padding: 0 20px; }
  .h-show-art.layered { padding-bottom: 40px; }
  .hb-side { display: none; }
}

/* ---------- guide pages: documentation layout ---------- */
.docs { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; gap: 0 40px; align-items: flex-start; }
.dside { flex: 0 0 236px; position: sticky; top: 61px; max-height: calc(100vh - 61px); overflow: auto; padding: 28px 4px 40px 0; box-sizing: border-box; font-size: 15px; scrollbar-width: thin; }
.dsd > summary { display: none; }
.ds-h { margin: 0 0 6px 12px; font: 600 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ds-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 22px; }
.ds-list a { padding: 7px 12px; border-radius: 8px; color: #b3b0a9; text-decoration: none; line-height: 1.35; }
.ds-list a:hover { color: var(--head); background: rgba(255,255,255,.035); }
.ds-list a.on { background: rgba(226,180,90,.12); color: var(--gold); font-weight: 600; }
.ds-list a.sub { padding: 6px 12px 6px 26px; color: var(--dim); font-size: 14px; }
.dmain { flex: 1 1 auto; min-width: 0; padding-bottom: 64px; }
.dtoc { flex: 0 0 200px; position: sticky; top: 61px; padding: 40px 0; font-size: 14px; }
.dtoc > div { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line); padding-left: 14px; }
.dtoc a { color: var(--dim); text-decoration: none; line-height: 1.35; }
.dtoc a:hover { color: var(--head); }
.dtoc a.t1 { color: #c9c6be; font-weight: 500; }
.dtoc a.t2 { padding-left: 10px; font-size: 13.5px; }
.dmain .pagehead { background: none !important; border: 0 !important; overflow: visible; }
.dmain .pagehead .wrap { padding: 32px 0 8px !important; max-width: none; }
.dmain .pagehead h1 { font: 600 clamp(34px, 4vw, 46px)/1.08 var(--f-body) !important; letter-spacing: -.025em; color: var(--head) !important; margin-top: 10px; }
.dmain .pagehead p { font-size: 19px; color: var(--muted); max-width: 46rem; }
.crumb { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--dim); }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--head); }
.crumb b { color: #c9c6be; font-weight: 500; }
.dmain .onpage { display: none; }
.dmain .wrap { max-width: none !important; padding-inline: 0 !important; }
.dmain .chapter { padding-block: 36px 8px !important; border: 0; background: none !important; }
.dmain .chapter:first-of-type { padding-top: 24px !important; }
.dmain .chapter header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; }
.dmain .chapter .numeral { font-size: 44px !important; line-height: 1; opacity: .9; }
.dmain .chapter h2 { font: 600 clamp(26px, 2.6vw, 32px)/1.2 var(--f-body) !important; letter-spacing: -.02em; color: var(--head) !important; width: 100%; }
.dmain .chapter h2 em { color: var(--gold); }
.dmain .prose h3, .dmain .h3 { font: 600 22px/1.3 var(--f-body) !important; color: var(--head) !important; scroll-margin-top: 80px; }
.dmain .chapter, .dmain [id] { scroll-margin-top: 76px; }
.dmain .steps h3 { font: 600 18px/1.35 var(--f-body) !important; }
.dmain .pager { margin-top: 48px; padding-inline: 0; }
.dmain .pager b { font: 600 18px/1.3 var(--f-body) !important; color: var(--head) !important; }
.dmain .rule { margin: 32px 0; }
.dmain summary { font: 600 17px/1.35 var(--f-body) !important; }
@media (max-width: 1280px) { .dtoc { display: none; } }
@media (max-width: 1000px) {
  .docs { display: block; padding: 0 16px; }
  .dside { position: static; max-height: none; padding: 16px 0 0; }
  .dsd { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 4px 8px; }
  .dsd > summary { display: flex; padding: 10px 8px; font: 600 15px/1 var(--f-body); color: var(--head); cursor: pointer; }
  .dsd[open] > summary { margin-bottom: 8px; }
}
.dside .dsd { border: 0 !important; background: none !important; border-radius: 0 !important; padding: 0; }
@media (max-width: 1000px) { .dside .dsd { border: 1px solid var(--line) !important; background: var(--surface) !important; border-radius: 12px !important; padding: 4px 8px; } }

/* ---------- portal: app shell ---------- */
.papp { display: flex; align-items: stretch; min-height: calc(100vh - 61px); border-bottom: 1px solid var(--line); }
.pside { flex: 0 0 256px; box-sizing: border-box; position: sticky; top: 61px; height: calc(100vh - 61px); overflow-y: auto; scrollbar-width: thin;
  padding: 18px 12px 16px; border-right: 1px solid var(--line); background: #0a0b0e; display: flex; flex-direction: column; gap: 18px; }
.pmain { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 28px clamp(16px, 3vw, 40px) 64px !important; max-width: 1480px; min-height: 0; }
.ps-h { margin: 0 0 6px 10px; font: 600 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ps-sec { display: flex; flex-direction: column; }
.ps-switch { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; margin-bottom: 14px; }
.ps-switch:hover { border-color: #4a4f5a; }
.ps-switch:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.ps-switch select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ps-switch svg { color: var(--dim); flex: none; }
.ps-gi { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; background: rgba(226,180,90,.14); color: var(--gold); font: 700 13px/1 var(--f-body); }
.ps-gi.big { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }
.ps-gt { flex: 1; min-width: 0; display: grid; }
.ps-gt b { font-weight: 600; font-size: 15px; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-gt span { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pside .ptabs { display: flex; flex-direction: column; gap: 1px; border: 0 !important; margin: 0; padding: 0; }
.pside .ptabs .ps-h { margin-top: 16px; }
.pside .ptabs a, .pside .pnav a, .ps-guilds a { display: flex; align-items: center; gap: 10px; padding: 8px 10px !important; border-radius: 9px; border: 0 !important; margin: 0;
  font: 500 15px/1.25 var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #b3b0a9 !important; text-decoration: none; background: none; }
.pside .ptabs a svg { flex: none; color: var(--faint); }
.pside .ptabs a span { flex: 1; min-width: 0; }
.pside .ptabs a:hover, .pside .pnav a:hover, .ps-guilds a:hover { color: var(--head) !important; background: rgba(255,255,255,.035); }
.pside .ptabs a.on, .pside .pnav a.on { color: var(--head) !important; background: var(--surface-2) !important; font-weight: 600 !important; }
.pside .ptabs a.on svg { color: var(--gold); }
.pside .pnav { display: flex; flex-direction: column; gap: 1px; }
.ps-guilds { display: flex; flex-direction: column; gap: 1px; }
.ps-gn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pside .pbadge { margin-left: auto; }
.ps-user { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ps-user .pname { color: var(--head); font-weight: 600; }
.ps-user .btn.small { margin-left: auto; }
.pmain .phead h1 { font: 600 clamp(28px, 3vw, 34px)/1.15 var(--f-body) !important; letter-spacing: -.02em; color: var(--head) !important; }
.pmain .psec, .pmain .pempty h2, .pmain .psteps h2 { font-family: var(--f-body) !important; font-weight: 600 !important; color: var(--head) !important; }
.pstats div { border-radius: var(--radius) !important; }
.pstats b { font-family: var(--f-body) !important; }
.pcard h3, .panel h4 { color: var(--head) !important; font-size: 16px !important; }
.cbox { position: relative; }
@media (max-width: 900px) {
  .papp { flex-direction: column; min-height: 0; }
  .pside { position: static; height: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; gap: 10px; }
  .pside .ptabs, .pside .pnav, .ps-guilds { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .pside .ptabs .ps-h { display: none; }
  .pside .ptabs a, .pside .pnav a, .ps-guilds a { flex: none; white-space: nowrap; }
  .pside .ptabs a svg { display: none; }
  .ps-sec .ps-h { display: none; }
  .ps-switch { margin-bottom: 4px; }
  .ps-user { margin-top: 0; padding-top: 10px; }
  .pmain { padding: 20px 16px 48px !important; }
}
@media (max-width: 900px) { .pside .ptabs, .pside .pnav, .ps-guilds { flex-wrap: nowrap !important; } }
/* the decorative H's crossbar ran into the E: the wordmark uses Cinzel's plain H */
.wm-h { font-family: "Cinzel", "Cinzel Decorative", Georgia, serif; font-style: normal; }