/* /style.css */
:root {
 color-scheme:dark;
 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
 --text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:18px; --text-xl:24px; --text-2xl:32px; --text-3xl:40px;
 --radius-sm:6px; --radius:10px; --radius-lg:16px;
 --bg:#101115; --sidebar:#14151b; --panel:#1b1d25; --raised:#252832; --input:#13151c;
 --line:#3c404e; --line-soft:#2d303c; --text:#f0f0f5; --muted:#b8bbc9; --quiet:#9297ab;
 --brand:#66dce5; --accent:#b9a3f6; --accent-rgb:185,163,246; --purple:#b9a3f6;
 --blue:#8fc8ff; --green:#7cdb9b; --amber:#f3c76a; --red:#f28a96; --discord:#a5adff;
 --skill-farming:#edc663; --skill-mining:#6ddce8; --skill-combat:#ef8880; --skill-foraging:#8ccc70; --skill-fishing:#77b9f3; --skill-enchanting:#bc95f2;
 --skill-alchemy:#e895ce; --skill-carpentry:#cfaa7e; --skill-runecrafting:#d7a4fa; --skill-social:#70cbd3; --skill-taming:#efa988; --skill-hunting:#dda077;
 --sidebar-width:240px; --control-height:42px; --scene:none;
 --item-art-size:40px; --item-art-compact:32px; --item-row-height:64px;
}
* { box-sizing: border-box }
html { min-width: 320px; scrollbar-gutter: stable }
@font-face { font-family:"Inter"; src:url("/fonts/inter.woff2") format("woff2"); font-style:normal; font-weight:100 900; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family:"Bricolage Grotesque"; src:url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-style:normal; font-weight:200 800; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
body { margin:0; font: 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased }
/* Headings and the wordmark use Bricolage Grotesque. A Premium font choice still wins. */
body:not([data-premium-font]) :where(h1,h2,h3,#pageTitle,.atlas-wordmark) { font-family:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
button, input, select { font: inherit; color: inherit }
button, a, input, summary, select { -webkit-tap-highlight-color: transparent }
button, .button-link { display: inline-flex; align-items: center; justify-content: center; gap:var(--space-2); min-height: 40px; border: 1px solid var(--line); border-radius:var(--radius); color: var(--text); font-size:var(--text-xs); white-space: nowrap; cursor: pointer; }

button:disabled { opacity: .38; cursor: default }
button.primary { background: #ac95f7; border-color: #ac95f7; color: #191126; box-shadow: 0 3px 12px #a48be815 }
button.primary:hover:not(:disabled) { background: #bda9ff; border-color: #bda9ff; box-shadow: 0 4px 18px #a48be828 }
button.subtle { background: transparent }
button.icon-button { padding:var(--space-2); width: 40px; flex: 0 0 40px; background: transparent }
a { text-decoration: none }


input:not([type="checkbox"]), select { min-width: 0; min-height: 42px; padding:var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius:var(--radius); background: var(--input); font-size:var(--text-sm); transition: border-color .16s, box-shadow .16s }
input:not([type="checkbox"]):hover, select:hover { border-color: #42465b }
input:not([type="checkbox"]):focus { border-color: #8e79ca; box-shadow: 0 0 0 3px #ac95f712; outline: none }
input::placeholder { opacity: 1 }
input[type="number"] { font-variant-numeric: tabular-nums }
input[type="checkbox"] { appearance: none; display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; margin:0; border: 1px solid #45495d; border-radius:var(--radius-sm); background: var(--input); cursor: pointer }

input[type="checkbox"]:checked::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #201833; border-bottom: 2px solid #201833; transform: rotate(-45deg) translateY(-1px) }
small, .muted { color: var(--muted) }

.hidden, [hidden] { display: none !important }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden }
.icon { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; pointer-events: none }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding:var(--space-3) var(--space-4); background: var(--purple); color: #161020; border-radius:var(--radius) }
.skip-link:focus { top: 12px }
.mobile-only { display: none }

/* Workspace shell */
.sidebar { overflow-y: auto; position: fixed; inset: 0 auto 0 0; z-index: 50; }
.sidebar-top { display: flex; align-items: center; }
.wordmark { display: inline-flex; color: var(--text); line-height: 1.1 }
.wordmark:hover { color: #fff }
.brand-symbol { display: grid; place-items: center; color: #fff }

.account-tier { margin:var(--space-2) var(--space-2) var(--space-1); color: #aab8cd; font-size:var(--text-sm) }
.account-tier.account-premium { color: #f0c46c }
.account-identity-status { display: block; padding:var(--space-1) var(--space-2) var(--space-2); color: #9eacc0; font-size:var(--text-xs); line-height: 1.5 }
.brand-logo { display: block; object-fit: contain; image-rendering: auto }
.wordmark-sub { display: block; margin-top:var(--space-1); font-size:var(--text-xs); letter-spacing: 3.6px; font-weight: 600; color: #a2a0b6 }
.nav-section-label { padding:0 var(--space-3); margin:0 0 var(--space-3); color: var(--quiet); font-size:var(--text-xs); letter-spacing: 1.8px; font-weight: 700 }
.category-tabs { display: flex; flex-direction: column; }
.category-tabs button { font-weight: 550 }


.nav-icon { display: grid; place-items: center; color: #797d94 }
.category-tabs button:hover .nav-icon, .category-tabs button[aria-pressed="true"] .nav-icon { color: inherit }
.nav-active-dot { margin-left:auto; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0 }
.category-tabs button[aria-pressed="true"] .nav-active-dot { opacity: 1 }

.workspace-access { display: flex; align-items: center; gap:var(--space-2); padding:var(--space-3) var(--space-3); color: var(--quiet); font-size:var(--text-xs) }
.workspace-access .icon { width: 13px; height: 13px; flex-basis: 13px }
.account-button { border: 1px solid var(--line-soft); width: 100%; justify-content: flex-start; text-align: left; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius:var(--radius); background: #3d355b; color: #d3bfff; font-size:var(--text-sm); font-weight: 600; flex-shrink: 0 }
.account-label { line-height: 1.4; font-weight: 550 }
.account-label small { display: block; font-weight: 400; margin-top:3px; }
.account-chevron { margin-left:auto; width: 14px; height: 14px; flex-basis: 14px; color: var(--quiet) }
.sidebar-version { display: flex; justify-content: space-between; letter-spacing: 1.4px }
.sidebar-version span { letter-spacing: 0 }
.account-menu { display: none; position: fixed; margin:0; inset: auto; width: 258px; border: 1px solid #3b3c4e; border-radius:var(--radius); padding:var(--space-2); background: #1c1e29; color: var(--text); box-shadow: 0 16px 60px #0008 }
.account-menu:not(:popover-open) { display: none }
.account-menu.is-open { display: block }
.menu-caption { display: block; padding:var(--space-2) var(--space-2) var(--space-1); font-size:var(--text-xs); letter-spacing: 1.2px; color: var(--quiet) }
.account { display: block; padding:0 var(--space-2) var(--space-3); font-size:var(--text-xs); overflow-wrap: anywhere; color: #cccddd }
.logout-link { display: flex; align-items: center; gap:var(--space-2); padding:var(--space-2); border-top: 1px solid #333646; border-radius: 0 0 6px 6px; color: #eeb5c5; font-size:var(--text-sm) }
.logout-link:hover { color: #ffd7e1; background: #ed92b109 }
.logout-link .icon:last-child { margin-left:auto; width: 14px; height: 14px }
main { min-height: 100dvh; }
main:focus { outline: none }
.app-header { display: flex; justify-content: space-between; margin-bottom:var(--space-8); }
.page-heading { display: flex; align-items: center; }
.eyebrow { font-size:var(--text-xs); letter-spacing: 1.7px; color: var(--quiet); font-weight: 650 }
.eyebrow span { margin:0 var(--space-2); color: #474959 }

.live-controls { min-width:0; max-width:100%; }
.live-controls #refresh { flex:none }
.refresh-state { display: flex; flex-direction: column; align-items: flex-end; gap:var(--space-1) }
.connection { display: inline-flex; align-items: center; gap:var(--space-2); color: var(--green); font-size:var(--text-xs); font-weight: 600 }
.connection::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px #69dfb510 }
.connection.warn { color: var(--amber) }
.connection.error { color: var(--red) }
#countdown { min-width:0; font-variant-numeric:tabular-nums; line-height:1.4; text-align:right; overflow-wrap:anywhere }
#refresh .icon { width: 15px; height: 15px; flex-basis: 15px }
#refresh[disabled] .icon { animation: spin 1.5s linear infinite }

/* Settings and dropdowns */
.setup { padding:var(--space-5) var(--space-6) var(--space-4); border: 1px solid var(--line-soft); border-radius:var(--radius-lg); background: #14161f }
.setup-top { display: flex; align-items: flex-end; flex-wrap: wrap; gap:var(--space-4) }
.budget-field { width: 260px; flex: 0 1 260px; min-width: 160px }
.budget-label { display: flex; justify-content: space-between; align-items: center; gap:var(--space-3); margin-bottom:var(--space-2); font-size:var(--text-xs); font-weight: 500; color: #b7bacb }
.budget-label small { font-size:var(--text-xs); font-weight: 400; color: var(--quiet) }
.input-unit { position: relative }
.input-unit input { width: 100%; padding-right:54px; font-size:var(--text-sm) }
.input-unit>span { position: absolute; right: 13px; top: 12px; color: var(--quiet); font-size:var(--text-xs); pointer-events: none }
.field-label { display: flex; flex-direction: column; gap:var(--space-2); font-size:var(--text-xs); color: #b7bacb; min-width: 155px; width: 202px }
#orderLimitLabel, #volumeLabel { width: 145px; min-width: 120px }
#craftMethodLabel { width:100%; min-width:0; max-width:100% }
.settings-bottom { position: relative; margin-top:var(--space-4); padding-top:var(--space-3); border-top: 1px solid var(--line-soft) }
.fee-summary { right: 0; top: 13px; }
summary { display: flex; align-items: center; gap:var(--space-2); width: fit-content; list-style: none; cursor: pointer; font-size:var(--text-xs); color: var(--muted); font-weight: 500 }
summary::-webkit-details-marker { display: none }
summary::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin:0 3px 0 1px; transition: transform .16s }
details[open]>summary { color: var(--purple) }
details[open]>summary::before { transform: rotate(45deg) translateY(-1px) }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap:var(--space-4); margin-top:var(--space-5); padding:0 0 var(--space-1) }
.settings-grid label { display: flex; flex-direction: column; gap:var(--space-2); color: var(--muted); font-size:var(--text-xs); min-width: 0 }
.settings-note { margin:var(--space-4) 0 2px; font-size:var(--text-xs); color: var(--quiet) }
.select-native { display: none !important }
.picker { display: inline-flex; min-width: 0; position: relative }
.picker-button { min-width: 0; min-height: 42px; width: 100%; padding:var(--space-2) var(--space-3); justify-content: space-between; background: var(--input); font-weight: 450; font-size:var(--text-xs); border: 1px solid var(--line) }
.picker-button:hover:not(:disabled) { background: #171a25; border-color: #42465b }
.picker-button[aria-expanded="true"] { border-color: #8f7abd; box-shadow: 0 0 0 3px #ac95f70b; background: #191a26 }
.picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left }
.picker-chevron { display: block; width: 6px; height: 6px; flex: 0 0 6px; margin:-3px 2px 0 var(--space-2); border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .16s }
.picker-button[aria-expanded="true"] .picker-chevron { transform: rotate(225deg); margin-top:3px }
.picker-panel { display: none; position: fixed; margin:0; inset: auto; padding:var(--space-1); border: 1px solid #3b3c50; border-radius:var(--radius); background: #1b1d28; color: var(--text); box-shadow: 0 18px 55px #0009, 0 4px 10px #0003; overflow: hidden; max-width: calc(100vw - 20px); z-index: 100; }
.picker-panel:not(:popover-open) { display: none }
.picker-panel.is-open { display: flex; flex-direction: column }
.picker-search { margin:3px 3px var(--space-2); width: calc(100% - 6px); flex-shrink: 0; font-size:var(--text-xs) !important; min-height: 37px !important }
.picker-options { overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: 290px; scrollbar-width: thin; scrollbar-color: #484359 transparent }
.picker-option { display: flex; align-items: center; gap:var(--space-3); padding:var(--space-2) var(--space-2); min-height: 36px; border-radius:var(--radius-sm); cursor: pointer; user-select: none }
.picker-option.active { background: #ffffff07; color: var(--text) }

.picker-option[aria-selected="true"]::after { content: ""; flex: 0 0 7px; width: 7px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-left:auto }
.picker-option[aria-disabled="true"] { opacity: .4; cursor: default }
.picker-empty { padding:var(--space-5) var(--space-3); color: var(--quiet); text-align: center; font-size:var(--text-xs) }

/* Summary and ranked opportunities */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap:var(--space-4); margin:var(--space-5) 0 }
.stat { position: relative; overflow: hidden; border: 1px solid #2b2d3b; border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6) var(--space-5); background: var(--panel) }
.stat-offer { background: var(--panel); border-color: #302c40 }
.stat::after { position: absolute; content: ""; height: 115px; width: 115px; border: 1px solid #71d7b408; border-radius: 50%; right: -24px; bottom: -66px; box-shadow: 0 0 0 23px #71d7b403, 0 0 0 46px #71d7b402; pointer-events: none }
.stat-offer::after { border-color: #af94ff0c; box-shadow: 0 0 0 23px #af94ff04, 0 0 0 46px #af94ff03 }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap:var(--space-3); color: #a6abba; font-size:var(--text-xs) }
.stat-icon { display: grid; place-items: center; border-radius:var(--radius); color: var(--green); background: #6fdfb412; width: 28px; height: 28px; flex: 0 0 28px }
.stat-offer .stat-icon { color: var(--purple); background: #b4a1ff12 }
.stat-icon .icon { width: 14px; height: 14px; flex-basis: 14px }
.stat strong { display: block; margin:var(--space-1) 0 var(--space-1); font-size: clamp(27px,2.5vw,36px); font-weight: 550; line-height: 1.3; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; color: #a4f0d2 }
.stat-offer strong { color: #cabbff }
.stat small { font-size:var(--text-xs); color: #81899d }
.stat.coverage { display: none }
.status { min-height: 20px; margin:-7px 0 var(--space-4); font-size:var(--text-xs); color: var(--muted) }
.status.warn, .status.error { padding:var(--space-3) var(--space-3); border: 1px solid #68503566; background: #ac783812; border-radius:var(--radius); color: var(--amber) }
.status.error { border-color: #70404d66; background: #d5728a12; color: var(--red) }
.results { border: 1px solid var(--line); border-radius:var(--radius-lg); background: #13151e; overflow: hidden }
.results-header { display: flex; justify-content: space-between; align-items: center; gap:var(--space-4); padding:var(--space-5) var(--space-6) 0 }
.section-title { display: flex; align-items: center; gap:var(--space-2) }
.section-title h2 { font-size:var(--text-base); font-weight: 550; letter-spacing: -.25px; margin:0 }
.section-indicator { width: 6px; height: 6px; border-radius:var(--radius-sm); background: var(--accent) }
.tabs { display: flex; }
.tabs button { padding:var(--space-1) var(--space-3); font-size:var(--text-xs) }
.tabs button[aria-selected="true"] { border-color: #393245; }
.tabs button:hover:not([aria-selected="true"]) { border-color: transparent; background: #ffffff04; color: #cccddd }
.tabs span { display: inline-block; min-width: 15px; margin-left:var(--space-1); color: inherit; opacity: .65; font-size:var(--text-xs); font-variant-numeric: tabular-nums }
.toolbar { display: flex; gap:var(--space-3); align-items: center; padding:var(--space-5) var(--space-6); flex-wrap: wrap }
.search-field { display: flex; position: relative; flex: 1 1 210px; min-width: 170px; }
.search-field>.icon { position: absolute; top: 13px; left: 12px; width: 15px; height: 15px; color: #737990 }
#search { width: 100%; min-width: 0; padding-left:var(--space-8); font-size:var(--text-xs); min-height: 40px }
.sort-label { display: flex; gap:var(--space-2); align-items: center; color: #8d92a8; font-size:var(--text-xs); min-width: 0 }
.sort-label>span { white-space: nowrap }
.sort-label .picker { width: auto; min-width: 162px; max-width: 100% }
.sort-label .picker-button { min-height: 40px; font-size:var(--text-xs) }
.check-label { display: flex; align-items: center; gap:var(--space-2); font-size:var(--text-xs); color: #9ca1b5; white-space: nowrap; cursor: pointer }
.mode-note { font-size:var(--text-xs); color: var(--muted); margin:-7px var(--space-6) var(--space-4); line-height: 1.6 }
.mode-note.offer { color: #b0a293 }
.tablewrap { position: relative; overflow: auto; max-width: 100%; scrollbar-width: thin; scrollbar-color: #3d3d50 #13151e }
.rankings { border-collapse: collapse; width: 100%; font-size:var(--text-xs); white-space: nowrap }
th { text-align: left; background: #1a1c27; font-size:var(--text-xs); font-weight: 500; color: #8a90a7; letter-spacing: .15px }
td, th { padding:var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft) }
td { padding-top:var(--space-5); padding-bottom:var(--space-5); vertical-align: middle; color: #d5d7e4 }
th:first-child, td:first-child { padding-left:var(--space-6) }
th:last-child, td:last-child { padding-right:var(--space-6); text-align: right }
tr:last-child td { border-bottom: 0 }
.rankings tbody tr { transition: background .12s }

.rankings td:last-child button { background: #1a1c28; border: 1px solid #2c2e40; color: #b6b4cd; font-size:var(--text-xs); font-weight: 500; border-radius:var(--radius-sm); min-height: 32px; padding:var(--space-2) var(--space-3) }
.rankings td:last-child button::after { content: "↗"; font-size:var(--text-xs); color: #74738e; margin-left:3px }
.rankings td:last-child button:hover { color: #d6c9ff; background: #29243b; border-color: #574575 }
.num { text-align: right; font-variant-numeric: tabular-nums }
.rank { display: inline-block; min-width: 19px; color: #5b627c; font-size:var(--text-xs); font-weight: 400; margin-right:var(--space-1) }
.shard-name { font-size:var(--text-sm); font-weight: 550; letter-spacing: -.1px }
.recipe { min-width: 245px; max-width: 420px; white-space: normal }
.recipe small { display: block; color: #777f98; font-size:var(--text-xs); line-height: 1.6; margin-top:var(--space-1) }
.profit { color: #7fe1b9; font-weight: 650; font-size:var(--text-base) }
.metric-secondary { color: var(--quiet); font-weight: 500 }
.subvalue { display: block; font-size:var(--text-xs); color: #767f96; font-weight: 400; margin-top:var(--space-1) }
.tag { display: inline-flex; align-items: center; background: #748ba410; border: 1px solid #728aaa20; color: #97aac1; padding:var(--space-1) var(--space-2); font-size:var(--text-xs); font-weight: 450; border-radius:var(--radius-sm); white-space: nowrap }
.tag::before { content: ""; width: 4px; height: 4px; margin-right:var(--space-1); border-radius: 50%; background: currentColor; opacity: .75 }
.tag.budget { color: #92cdb7; background: #60bc9310; border-color: #71bc9420 }
.tag.profit { color: #d0af7e; background: #c2a1560d; border-color: #c2a15620 }
.tag.allowance { color: #b8a1d5; background: #b397e010; border-color: #b397e020 }
.chain-label { display: inline-block; font-size:var(--text-xs); border-radius:var(--radius-sm); padding:2px var(--space-1); background: #a791f00e; color: #a897ce; margin-left:var(--space-1); white-space: nowrap }
.empty { text-align: center !important; padding:60px var(--space-6) !important; color: #767d95; font-size:var(--text-xs); white-space: normal }
.pager { border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap:var(--space-3); padding:var(--space-4) var(--space-6); font-size:var(--text-xs); color: #787f98 }
.pager>div { display: flex; align-items: center; gap:var(--space-3); white-space: nowrap }
.pager button { min-height: 30px; font-size:var(--text-xs); padding:var(--space-1) var(--space-2); background: transparent; border-color: #2b2d3c }
#pageLabel, #minionPage { font-variant-numeric: tabular-nums }
footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap:var(--space-3); margin-top:var(--space-6); padding-top:var(--space-4); border-top: 1px solid #232430; font-size:var(--text-xs); color: #575e76 }
footer a { color: #7b7699 }
.footer-links { display: flex; gap:var(--space-3) }
footer>span:last-child { text-align: right }
.footer-dot { margin:0 var(--space-1); color: #4d5064 }
#stopScanner { min-height: 25px; padding:var(--space-1) var(--space-2); font-size:var(--text-xs); margin-left:var(--space-3) }

/* Trade drawer */
.common { color: #e0e1ed }
.uncommon { color: #96d4ad }
.rare { color: #9cb7e7 }
.epic { color: #c4a8ed }
.legendary { color: #e5c18e }
.mythic { color: #f095c7 }
.divine { color: #7fe0e6 }
.special { color: #ef8f8f }
dialog { position: fixed; inset: 12px 12px 12px auto; width: 650px; max-width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); margin:0; padding:var(--space-6) var(--space-8); overflow: auto; color: var(--text); background: #151720; border: 1px solid #383447; border-radius:var(--radius-lg); box-shadow: -20px 0 100px #0008; scrollbar-width: thin; scrollbar-color: #474059 transparent }
dialog[open] { animation: drawer-in .22s ease-out }
dialog::backdrop { background: #070810b8; backdrop-filter: none }
body:has(dialog[open]) { overflow: hidden }
.dialog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom:var(--space-6) }
.dialog-top .eyebrow { color: #9081b6 }
.dialog-top .icon-button { min-height: 32px; width: 32px; flex-basis: 32px; padding:var(--space-2); border-color: #302c40 }
dialog h2 { font-size:var(--text-2xl); font-weight: 550; line-height: 1.2; margin:0 0 var(--space-2); letter-spacing: -.8px }
#tradeSubtitle { font-size:var(--text-xs); line-height: 1.7; margin:0 0 var(--space-6); color: #8f95ab }
.detail-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:var(--space-2); margin:var(--space-5) 0 }
.detail-metrics>div { padding:var(--space-4); border-radius:var(--radius); border: 1px solid #302f41; background: #1c1c2a }
.detail-metrics span { display: block; font-size:var(--text-xs); color: #9095ac; margin-bottom:var(--space-2) }
.detail-metrics strong { font-size:var(--text-xl); font-weight: 550; letter-spacing: -.5px; font-variant-numeric: tabular-nums }
.detail-section { margin:var(--space-6) 0 }
h3 { color: #b8bbcc; font-weight: 550; margin:0 0 var(--space-3) }
.shopping { display: grid; gap:var(--space-2) }
.ingredient { display: flex; justify-content: space-between; align-items: center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background: #1a1c27; border: 1px solid #2b2e3e; border-radius:var(--radius) }
.ingredient strong { display: block; font-size:var(--text-xs); font-weight: 500 }
.ingredient span { display: block; font-size:var(--text-xs); color: #888fa7; margin-top:var(--space-1) }
.ingredient .amount { text-align: right; font-variant-numeric: tabular-nums }
.ingredient .amount strong { font-size:var(--text-base); color: #ded8f4 }
.fusion-steps { list-style: none; counter-reset: fusion; padding:0; margin:0; display: grid; gap:var(--space-2) }
.fusion-steps li { counter-increment: fusion; position: relative; padding:var(--space-4) var(--space-4) var(--space-4) var(--space-12); border: 1px solid #343040; border-radius:var(--radius); background: #1c1928; font-size:var(--text-xs); line-height: 1.7 }
.fusion-steps li::before { content: counter(fusion); position: absolute; top: 16px; left: 14px; width: 22px; height: 22px; display: grid; place-items: center; background: #ac95f717; color: #c6b3f4; border: 1px solid #ac95f729; border-radius:var(--radius-sm); font-size:var(--text-xs) }
.fusion-steps strong { font-weight: 550 }
.fusion-steps small { display: block; color: #9b91b4; font-size:var(--text-xs) }
.sale-step { padding:var(--space-4); border: 1px solid var(--line-soft); border-left: 2px solid var(--accent); background: transparent; border-radius:var(--radius-sm); font-size:var(--text-sm); color: var(--muted); line-height: 1.8 }
.sale-step b { font-weight: 550 }
.math { margin:var(--space-3) 0 }
.math>div { display: flex; justify-content: space-between; gap:var(--space-4); padding:var(--space-2) 0; border-bottom: 1px solid var(--line-soft); font-size:var(--text-xs) }
.math dt { color: #8a91a8 }
.math dd { margin:0; text-align: right; font-variant-numeric: tabular-nums }
.math>div.total { font-size:var(--text-sm); font-weight: 550; color: var(--green) }
.math>div.total dt { color: var(--text) }
.detail-note { color: #8d94ad; font-size:var(--text-xs); line-height: 1.8 }
.detail-note.warning { color: #d6b78e; background: #a77b3e0d; border: 1px solid #b58a5328; border-radius:var(--radius); padding:var(--space-3) var(--space-3) }
.more-math { border-top: 1px solid var(--line-soft); margin-top:var(--space-6); padding-top:var(--space-4) }
.dialog-foot { font-size:var(--text-xs); color: #7b829a; border-top: 1px solid var(--line-soft); padding-top:var(--space-4) }
.stale .profit, .stale .shard-name { color: var(--muted) }
.stale table { opacity: .65 }

/* Minion workspace */
.minion-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: end }
.minion-controls label { display: flex; flex-direction: column; gap:var(--space-2); color: #a5a9bc; min-width: 0 }
.minion-controls select, .minion-controls input, .minion-controls .picker { width: 100%; min-width: 0 }
.minion-settings details { border-top: 1px solid var(--line-soft); padding-top:var(--space-3); margin-top:var(--space-4) }
.minion-settings details[open] .minion-controls { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) }

#minionNote.warning { color: var(--amber) }
.minion-heading { display: flex; justify-content: space-between; align-items: center; gap:var(--space-3); flex-wrap: wrap; padding:var(--space-5) var(--space-6) }
.minion-heading h2 { font-size:var(--text-base); letter-spacing: -.25px; font-weight: 550; margin:0 }

#minionCsv { background: transparent; color: #adb0c2; font-size:var(--text-xs) }
#minionRows strong { font-weight: 550 }
#minionRows small { display: block; color: #7f87a0; margin-top:var(--space-1) }

.nav-backdrop { position: fixed; inset: 0; z-index: 45; border: 0; border-radius: 0; width: 100%; height: 100%; background: #030510ac; backdrop-filter: none }
.nav-backdrop:hover:not(:disabled) { background: #030510ac; border-color: transparent }

/* Smaller workspaces */
@media (min-width: 1850px) { main { margin-right:auto } }
@media (max-width: 1320px) {
  .sidebar { padding-inline: 12px }
  main { padding-inline: 26px }

  .toolbar { gap:var(--space-3) }
  .toolbar .check-label { margin-left:auto }
  .toolbar .search-field { min-width: 220px }
  .sort-label>span:not(.picker) { display: none }
  .setup-top { gap:var(--space-4) }
}
@media (max-width: 1080px) {
  .category-tabs button { padding-inline: 11px; }
  .live-controls { margin-left:auto }

  .budget-field { width: 225px; flex-basis: 225px }
  .minion-controls { grid-template-columns: 1fr 1fr }
}
@media (max-width: 820px) {


  .sidebar { visibility: hidden; }

  .sidebar-top .icon-button { width: 29px; flex-basis: 29px; min-height: 30px; padding:var(--space-1); color: #9297ad; border: 0 }

  body.nav-open { overflow: hidden }
  body.nav-open .sidebar { transform: translateX(0); visibility: visible }

  .page-heading .icon-button { margin-left:-3px; border-color: var(--line-soft) }
  .eyebrow { font-size:var(--text-xs); letter-spacing: 1.3px }
  .live-controls { margin-left:auto; }

  .stat strong { font-size:var(--text-2xl) }
}
@media (max-width: 590px) {

  .app-header { margin-bottom:var(--space-5) }
  .page-heading { width: 100%; }
  h1 { margin-top:var(--space-1) }
  .eyebrow { font-size:var(--text-xs); letter-spacing: 1.2px }
  .eyebrow span { margin:0 var(--space-1) }
  .live-controls { width: 100%; justify-content: space-between; }
  .refresh-state { align-items: flex-start; flex: 1 }
  .connection { font-size:var(--text-xs) }

  #refresh { min-height: 36px; padding:var(--space-2) var(--space-2); font-size:var(--text-xs) }
  #refresh .icon { width: 13px; height: 13px; flex-basis: 13px }
  .setup { padding:var(--space-4) }
  .setup-top { gap:var(--space-4) var(--space-3) }
  .budget-field { width: 100%; flex-basis: 100% }
  .field-label, #craftMethodLabel { width: auto; min-width: 0; flex: 1 1 145px }
  #orderLimitLabel, #volumeLabel { width: auto; min-width: 0; flex: 1 1 125px }

  .settings-bottom { padding-top:var(--space-3); margin-top:var(--space-4) }
  .settings-grid { grid-template-columns: 1fr 1fr; gap:var(--space-3) var(--space-2); margin-top:var(--space-4) }
  .settings-grid label { font-size:var(--text-xs) }
  .stats { gap:var(--space-2); margin:var(--space-4) 0 var(--space-5) }
  .stat { padding:var(--space-3) var(--space-3) var(--space-4); border-radius:var(--radius) }
  .stat-top { align-items: flex-start; font-size:var(--text-xs); gap:var(--space-2); line-height: 1.6 }
  .stat-icon { width: 22px; height: 22px; flex-basis: 22px; border-radius:var(--radius-sm) }
  .stat-icon .icon { width: 11px; height: 11px; flex-basis: 11px }
  .stat strong { font-size: clamp(19px,5.6vw,30px); letter-spacing: -.7px; margin-top:var(--space-2) }
  .stat small { display: block; font-size:var(--text-xs); line-height: 1.7 }
  .results { border-radius:var(--radius) }
  .results-header { padding:var(--space-4) var(--space-3) 0; flex-wrap: wrap; gap:var(--space-3) }
  .section-title h2 { font-size:var(--text-sm) }
  .section-indicator { width: 5px; height: 5px }
  .tabs button { font-size:var(--text-xs); padding:var(--space-1) var(--space-2); }
  .tabs span { font-size:var(--text-xs); margin-left:3px }
  .toolbar { padding:var(--space-4) var(--space-3); gap:var(--space-3) var(--space-2) }
  .toolbar .search-field { min-width: 0; flex-basis: 100% }
  .toolbar .sort-label { flex: 1; }
  .toolbar .sort-label .picker { width: 100%; min-width: 140px }
  .toolbar .check-label { font-size:var(--text-xs) }
  .mode-note { margin:0 var(--space-3) var(--space-3); font-size:var(--text-xs) }
  td, th { padding-left:var(--space-4); padding-right:var(--space-4) }
  th:first-child, td:first-child { padding-left:var(--space-4) }
  .recipe { min-width: 240px }
  .pager { padding:var(--space-3) var(--space-3); flex-wrap: wrap; font-size:var(--text-xs) }
  .pager>div { margin-left:auto; gap:var(--space-2) }
  .pager button { font-size:var(--text-xs); padding:var(--space-1) var(--space-2); min-height: 29px }
  footer { font-size:var(--text-xs); gap:var(--space-2) }
  footer>span:last-child { text-align: left; line-height: 2 }
  .footer-dot { margin:0 var(--space-1) }


  .minion-settings details[open] .minion-controls { grid-template-columns: 1fr 1fr }
  .minion-heading { padding:var(--space-4) var(--space-3); gap:var(--space-3) var(--space-2) }
  .minion-heading h2 { font-size:var(--text-sm); flex: 1 }
  .minion-heading .sort-label { order: 1; width: 100% }
  .minion-heading .sort-label .picker { width: 100% }
  #minionCsv { font-size:var(--text-xs); min-height: 32px; padding:var(--space-1) var(--space-2) }

  dialog { padding:var(--space-5); inset: 6px 6px 6px auto; border-radius:var(--radius-lg); width: calc(100vw - 12px); max-width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px) }
  .dialog-top { margin-bottom:var(--space-6) }
  dialog h2 { font-size:var(--text-xl) }
  .detail-metrics { gap:var(--space-2); grid-template-columns: repeat(auto-fit,minmax(115px,1fr)) }
  .detail-metrics strong { font-size:var(--text-lg) }
}
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(18px) } to { opacity: 1; transform: translateX(0) } }

.stat-unit { font-size:var(--text-xs); letter-spacing: 0; font-weight: 400; color: #83988f; margin-left:2px }
.stat-offer .stat-unit { color: #9286ac }
.stat-caption { display: flex; flex-wrap: wrap; align-items: center; gap:var(--space-2) }
.stat-badge { font-style: normal; font-size:var(--text-xs); padding:2px var(--space-1); border-radius:var(--radius-sm); border: 1px solid #a997cc1c; background: #aa91d20b; color: #9a87b6 }
@media(max-width:590px) { .stat-unit { font-size:var(--text-xs) } .stat-caption { gap:var(--space-1) } .stat-badge { font-size:var(--text-xs); padding:1px 3px } }

/* Quantity planning, fusion trees and market history */
.quantity-field { position: relative; width: 174px; min-width: 140px; padding-bottom:0 }
.quantity-field>small { position: static; margin:0; font-size:var(--text-xs); line-height: 1.5; color: var(--quiet) }
#qualityPreset { width: 100% }
.setup-top:has(.quantity-field) { align-items: start }
.tag.quality-normal { color: #9fc6b0; background: transparent; border-color: transparent }
.tag.quality-watch { color: #d7ba85; background: transparent; border-color: transparent }
.tag.quality-high { color: #dea0aa; background: transparent; border-color: transparent }
.tag.quality-unknown { color: #9699b0 }
.quality-details { display: flex; gap:var(--space-3); align-items: center; flex-wrap: wrap; padding-top:var(--space-4) }
.quality-details p { color: var(--muted); font-size:var(--text-xs); margin:0 }
.detail-quantity { display: flex; align-items: center; flex-wrap: wrap; gap:var(--space-3); margin:var(--space-4) 0 }
.detail-quantity label { color: var(--muted); font-size:var(--text-xs); display: flex; align-items: center; gap:var(--space-3) }
.detail-quantity input { width: 110px; min-height: 36px; padding:var(--space-2) var(--space-2) }
.detail-quantity small { font-size:var(--text-xs); color: var(--quiet) }
.direct-comparison { color: #b9afd2; background: #a48ad80a; border: 1px solid #b397e51c; border-radius:var(--radius); padding:var(--space-3) var(--space-3); font-size:var(--text-xs); line-height: 1.8 }
.fusion-tree-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap:var(--space-1); margin-bottom:var(--space-3) }
.fusion-tree-controls>span { margin-right:auto; color: var(--quiet); font-size:var(--text-xs) }
.fusion-tree-controls button { min-height: 27px; padding:var(--space-1) var(--space-2); background: transparent; font-size:var(--text-xs); font-weight: 450 }
.fusion-tree { padding:1px; overflow-x: auto }
.fusion-node { border: 1px solid #3c334e; border-radius:var(--radius); background: #1b1925; min-width: 0 }
.fusion-node>.fusion-node-head { display: flex; width: 100%; min-height: 65px; padding:var(--space-3); gap:var(--space-2); border-radius:var(--radius); color: #c7b5ef }
.fusion-node>.fusion-node-head>span:not(.fusion-number):not(.fusion-stage):not(.game-image) { flex: 1; min-width: 0 }
.fusion-node strong, .fusion-leaf strong { font-size:var(--text-xs); font-weight: 550; overflow-wrap: anywhere }
.fusion-node .fusion-node-head small { display: block; font-size:var(--text-xs); color: #9387a8; margin-top:var(--space-1); font-weight: 400 }
.fusion-number { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; background: #aa87df13; border: 1px solid #b394e426; border-radius:var(--radius-sm); color: #c2a7f1; font-size:var(--text-xs); font-weight: 500 }
.fusion-stage { margin-left:auto; color: #9580b6; font-size:var(--text-xs); font-weight: 400; padding-left:var(--space-1) }
.root-node { border-color: #645075; background: #211c30 }
.root-node>summary strong { color: #e1cffb }
.root-node>summary .fusion-stage { color: #c4a9ec }
.fusion-children { border-top: 1px solid #ad8ad71a; padding:var(--space-4) var(--space-3) var(--space-4) var(--space-6); display: grid; gap:var(--space-3) }
.fusion-branch { position: relative; padding-left:var(--space-3); border-left: 1px solid #544266; min-width: 0 }
.fusion-branch::before { content: ""; position: absolute; top: 34px; left: 0; width: 14px; height: 1px; background: #544266 }
.branch-need { display: block; color: #9589a9; font-size:var(--text-xs); padding:0 0 var(--space-2) 1px }
.fusion-leaf { display: flex; align-items: center; gap:var(--space-2); padding:var(--space-3) var(--space-3); border: 1px solid var(--line-soft); background: transparent; border-radius:var(--radius-sm) }
.fusion-leaf>div { flex: 1; min-width: 0 }
.fusion-leaf strong { color: #9bd8b7; font-size:var(--text-xs) }
.fusion-leaf small { display: block; color: #799d90; font-size:var(--text-xs); margin-top:3px }
.leaf-dot { flex: 0 0 5px; width: 5px; height: 5px; background: #75cca2; border-radius: 50% }
.fusion-source { display: inline-flex; min-height: 22px; padding:3px var(--space-1); border-radius:var(--radius-sm); color: #b5a1da; border: 1px solid #b4a1ff22; background: #b4a1ff09; font-size:var(--text-xs); font-weight: 450; line-height: 1.5; white-space: normal; text-align: left }
.buy-source { color: #8fc5a7; border-color: #78c39b20; background: #66c79908 }
.fusion-shared { display: flex; align-items: center; gap:var(--space-2); padding:var(--space-2); border: 1px dashed #6a567b60; border-radius:var(--radius-sm) }
.fusion-shared>span { font-size:var(--text-xs); color: var(--quiet) }
.fusion-path { display: grid; gap:var(--space-3) }
.fusion-card { border: 1px solid #423347; background: #201b29; border-radius:var(--radius); overflow: hidden }
.fusion-card header { display: flex; align-items: center; gap:var(--space-2); padding:var(--space-3); border-bottom: 1px solid #8c689226 }
.fusion-card header strong { font-size:var(--text-xs); font-weight: 550; color: #d5b9d3 }
.fusion-card header small { display: block; color: #9d89a1; font-size:var(--text-xs); margin-top:var(--space-1) }
.fusion-inputs { padding:var(--space-3) var(--space-3); display: grid; gap:var(--space-2) }
.fusion-input { display: flex; justify-content: space-between; gap:var(--space-3); font-size:var(--text-xs); align-items: center }
.fusion-input strong { color: #b9aec9; font-weight: 500 }
.fusion-input small { display: flex; gap:var(--space-1) }
.history-panel { padding-top:var(--space-5); border-top: 1px solid var(--line-soft) }
.history-heading { display: flex; align-items: center; justify-content: space-between; gap:var(--space-3); margin-bottom:var(--space-3) }
.history-heading h3 { margin:0 }
.history-range { display: flex; padding:3px; border: 1px solid var(--line); border-radius:var(--radius-sm); background: #11121b }
.history-range button { min-height: 24px; padding:var(--space-1) var(--space-2); font-size:var(--text-xs); background: transparent; border: 1px solid transparent; color: var(--muted) }
.history-range button[aria-pressed="true"] { color: #d4c6f5; background: #342b45; border-color: #70538444 }
.history-selector { display: flex; align-items: center; gap:var(--space-2); color: var(--muted); font-size:var(--text-xs) }
.history-selector .picker, .history-selector select { flex: 1; width: 100% }
.history-selector .picker-button { min-height: 35px; padding:var(--space-2) var(--space-2); font-size:var(--text-xs) }
.history-legend { display: flex; flex-wrap: wrap; gap:var(--space-3); margin:var(--space-4) 0 var(--space-2); color: var(--muted); font-size:var(--text-xs) }
.history-legend>span { display: flex; gap:var(--space-1); align-items: center }
.history-legend>span::before { content: ""; width: 11px; height: 2px; border-radius:var(--radius-sm); background: #b7a0f4 }
.history-legend>.legend-bid::before { background: #76ceb1 }
.history-plot { background: #11131c; border: 1px solid #2d2b3b; border-radius:var(--radius); padding:var(--space-3) var(--space-2) var(--space-2) }
.history-plot .empty { padding:var(--space-8) var(--space-2) !important; line-height: 1.9; margin:0; font-size:var(--text-xs) }
.price-chart { display: block; width: 100%; height: auto; touch-action: pan-y }
.price-chart polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.line-ask { stroke: #b7a0f4 }.line-bid { stroke: #76ceb1 }
.point-ask { fill: #b7a0f4 }.point-bid { fill: #76ceb1 }
.chart-grid { stroke: #3e3b4b; stroke-width: .6; stroke-dasharray: 3 5 }
.chart-axis { fill: #73788e; font-size:var(--text-xs); font-family: inherit }
.chart-readout { display: block; font-size:var(--text-xs); color: #aba2c0; text-align: center; padding:var(--space-1); min-height: 30px; font-variant-numeric: tabular-nums }
.history-caption { font-size:var(--text-xs); color: #74778d; line-height: 1.8; margin:var(--space-2) 0 0 }
.history-retry { padding:var(--space-1) var(--space-2); min-height: 25px; font-size:var(--text-xs); margin-left:var(--space-2) }
.optimizer-panel { margin-bottom:var(--space-5); border-color: #b295652d; background: var(--panel) }
.optimizer-panel>.panel-title { width: 100%; padding:var(--space-5) var(--space-6); gap:var(--space-3) }
.optimizer-panel>.panel-title>span { font-size:var(--text-sm); color: #dfc195; font-weight: 550 }
.optimizer-panel>.panel-title { border-bottom: 1px solid #b295651c; color: #dfc195 }


.optimizer-controls label { display: flex; flex-direction: column; gap:var(--space-2); min-width: 0; font-size:var(--text-xs); color: #a69b8b }
.optimizer-controls .picker { width: 100% }
.optimizer-controls .picker-button { font-size:var(--text-xs) }


.optimizer-actions .primary { box-shadow: none }
.optimizer-actions .primary:hover:not(:disabled) { background: #e8c692; }
#optimizerStatus { margin-bottom:0; }
.optimizer-stats { display: grid; grid-template-columns: 1fr 1fr .65fr; gap:var(--space-3); margin:var(--space-5) 0 var(--space-4) }
.optimizer-stats>div { padding:var(--space-4) var(--space-4); border-radius:var(--radius); border: 1px solid #b3a07d22; background: #c4ac7910 }
.optimizer-stats span { display: block; font-size:var(--text-xs); color: #a39784; margin-bottom:var(--space-2) }
.optimizer-stats strong { font-size:var(--text-xl); font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -.5px }


.optimizer-groups article>div { align-items: center; }
.optimizer-groups strong { font-weight: 550; }
@media(max-width:590px) {
  .quantity-field { flex-basis: 140px }
  .optimizer-panel>.panel-title { padding:var(--space-4) var(--space-3); flex-wrap: wrap }


  .optimizer-controls label { font-size:var(--text-xs) }
  .optimizer-actions { flex-wrap: wrap }
  .optimizer-stats { gap:var(--space-2); grid-template-columns: 1fr 1fr }
  .optimizer-stats>div { padding:var(--space-3) }
  .optimizer-stats>div:last-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between }
  .optimizer-stats>div:last-child span { margin:0 }
  .optimizer-stats strong { font-size:var(--text-xl) }
  .fusion-children { padding:var(--space-2) var(--space-1) var(--space-2) var(--space-2); gap:var(--space-2) }
  .fusion-branch { padding-left:var(--space-2) }
  .fusion-branch::before { width: 7px }
  .fusion-node>.fusion-node-head { gap:var(--space-2); padding:var(--space-2) var(--space-2) }
  .fusion-node strong { font-size:var(--text-xs) }
  .fusion-number { flex-basis: 21px; width: 21px; height: 21px }
  .fusion-stage { display: none }
  .fusion-leaf { padding:var(--space-2) var(--space-2); flex-wrap: wrap; gap:var(--space-1) }
  .fusion-leaf strong { font-size:var(--text-xs) }
  .fusion-tree-controls { gap:var(--space-1) }
  .fusion-tree-controls>span { font-size:var(--text-xs) }
  .history-heading h3 { font-size:var(--text-xs) }
  .chart-readout { font-size:var(--text-xs) }
}

/* Auction, shop and pet workspaces */
.extra-filters { display:flex; gap:var(--space-4); flex-wrap:wrap; padding-top:var(--space-4); margin-top:var(--space-1); border-top:1px solid var(--line-soft) }
.extra-filters>label { display:flex; flex-direction:column; gap:var(--space-2); min-width:155px; max-width:270px; flex:1; font-size:var(--text-sm); color:var(--muted) }
.extra-filters .picker { width:100% }
#extraFees label { font-size:var(--text-sm) }
.auction-list { display:grid; gap:var(--space-2); margin-top:var(--space-3) }
.auction-list article { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-3) var(--space-4); border:1px solid #7298d025; border-radius:var(--radius); background:#6290cc09 }
.auction-list strong { font-size:var(--text-sm); font-weight:500 }
.auction-list small { display:block; margin-top:var(--space-1); font-size:var(--text-xs) }
.auction-list button { font-size:var(--text-xs); min-height:34px; background:#9cbcf810; border-color:#9cbcf825; color:#b3c5e6 }
.auction-command { width:100%; font-size:var(--text-xs) }
.kat-steps { display:grid; gap:var(--space-2) }
.kat-steps article { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border:1px solid #b788ad33; border-radius:var(--radius); background:#c197b309 }
.kat-steps strong { color:#e6b7d2; font-size:var(--text-sm); font-weight:500 }
.kat-steps small { display:block; font-size:var(--text-xs); color:#ad90a6; margin-top:var(--space-1); line-height:1.6 }
@media(max-width:590px) {
 .extra-filters { gap:var(--space-3) }
 .extra-filters>label { min-width:125px; flex:1 1 125px; font-size:var(--text-sm) }
 .auction-list article { padding:var(--space-3) }
 .auction-list strong { font-size:var(--text-xs) }
 .auction-list button { min-height:36px }
 .kat-steps article { padding:var(--space-3); gap:var(--space-2) }
}

/* Focused settings and minion planning */
#settings .settings-grid { grid-template-columns:repeat(auto-fit,minmax(150px,230px)); justify-content:start }
.minion-controls label { font-size:var(--text-sm) }
.minion-controls { gap:var(--space-4) }

#minionRows strong { font-size:var(--text-sm) }
#minionRows small { font-size:var(--text-xs); line-height:1.6 }
#minionRows .production-line { margin:0; font-size:var(--text-xs); white-space:normal }
.production-line b { color:var(--text); font-weight:500 }
.minion-production { min-width:175px; max-width:245px }

.minion-coverage { border-top:1px solid var(--line-soft); padding-top:var(--space-4); }

.minion-detail-controls { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-3) }
.minion-detail-controls label { display:flex; flex-direction:column; gap:var(--space-2); flex:1; min-width:100px; font-size:var(--text-sm); color:var(--muted) }
.minion-detail-controls .picker { width:100% }
.minion-detail-controls input { width:100% }
.equipment-summary { font-size:var(--text-sm); line-height:1.6; color:var(--muted); margin:0 0 var(--space-5) }
.minion-detail-table { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.minion-detail-table th { text-align:left; font-size:var(--text-xs); font-weight:500; color:var(--muted); padding:var(--space-3) var(--space-2); background:#a2abc008 }
.minion-detail-table td { padding:var(--space-3) var(--space-2); border-bottom:1px solid var(--line-soft); font-variant-numeric:tabular-nums }
.minion-storage { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:var(--space-3) var(--space-4); margin:var(--space-5) 0; color:var(--muted); font-size:var(--text-sm) }
.minion-storage strong { color:var(--text); font-size:var(--text-sm); font-weight:500 }
.minion-storage small { flex-basis:100%; font-size:var(--text-xs); line-height:1.6 }
.minion-sale-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-2) }
.minion-sale-grid button { display:flex; flex-direction:column; align-items:start; gap:var(--space-2); padding:var(--space-4) var(--space-3); background:#a5a8c208; border:1px solid var(--line-soft); text-align:left; white-space:normal }
.minion-sale-grid button[aria-pressed="true"] { border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.08) }
.minion-sale-grid span { font-size:var(--text-sm) }
.minion-sale-grid strong { color:var(--accent); font-size:var(--text-lg); font-weight:550 }
.minion-sale-grid small { color:var(--muted); font-size:var(--text-xs); line-height:1.4 }

@media(max-width:700px){
 .minion-sale-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .minion-controls label { font-size:var(--text-sm) }
 .minion-detail-table { min-width:460px }
}

.detail-metrics .metric-context { display: block; margin-top:var(--space-2); color: var(--muted); font-size:var(--text-xs); font-weight: 400 }
.ingredient .buy-check { display: block; margin-top:var(--space-1); color: var(--green); font-size:var(--text-xs) }
input[aria-invalid="true"]{border-color:#f28a9b;outline:2px solid #f28a9b55}.needs-connection{color:#d4bcff}#profileServiceConnect{margin:0 .5rem .5rem 0}

/* Account details and actions share one content-sized popover. */
#accountMenu { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#555e70 transparent; overscroll-behavior:contain }
#accountMenu .account-tier { display:block; margin:0 var(--space-2) var(--space-1); color:var(--text); font-size:var(--text-sm); font-weight:600 }
#accountMenu .account-identity-status { display:block; margin:0 var(--space-2) var(--space-2); color:var(--quiet); font-size:var(--text-xs); line-height:1.5; overflow-wrap:anywhere }
#accountMenu .account-minecraft { padding-bottom:var(--space-2); margin-bottom:var(--space-2); border-bottom:1px solid var(--line-soft) }
#accountMenu .account-link-help,#accountMenu .account-link-status,#accountMenu .account-link-confirmation p { margin:0 var(--space-2) var(--space-2); color:var(--quiet); font-size:var(--text-xs); line-height:1.5; overflow-wrap:anywhere }
#accountMenu .account-link-status { color:var(--text) }
#accountMenu .account-link-confirmation { margin:var(--space-1) 0; padding-top:var(--space-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm) }
#accountMenu .account-menu-action:disabled { opacity:.55; cursor:wait }
#accountMenu .account-menu-action { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-2); width:100%; margin:0; padding:var(--space-2); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text); font:inherit; line-height:1.4; text-align:left; text-decoration:none; white-space:normal }
#accountMenu .account-menu-action:hover { background:#ffffff09 }
#accountMenu .account-menu-action:focus-visible { outline:2px solid var(--accent); outline-offset:-2px }
#accountMenu .account-menu-action .icon { width:16px; height:16px; flex:0 0 16px; color:var(--quiet) }

#accountMenu [hidden],#accountMenu .hidden { display:none !important }

/* Workspace routing remains independent of appearance. */
body[data-workspace="introduction"] :is(#moneyWorkspace,.profile-shell,#profileContext,.method-navigation,.live-controls) { display:none!important }
body:not([data-workspace="introduction"]) #introductionWorkspace { display:none }
#accountMenu{width:min(292px,calc(100vw - 24px));padding:var(--space-2);border-radius:var(--radius-lg)}
#accountMenu .menu-caption{font-size:var(--text-xs);padding:var(--space-2) var(--space-2) var(--space-1);letter-spacing:1px}
#accountMenu .account{font-size:var(--text-base);font-weight:650;color:var(--text);padding:0 var(--space-2) var(--space-2);overflow-wrap:anywhere}
#accountMenu .account-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0 var(--space-2) var(--space-3)}
#accountMenu .account-tier,#accountMenu .account-role{margin:0;padding:3px var(--space-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--muted);font-weight:500}
#accountMenu .account-role{color:#dec391;border-color:#65553b;background:#3d342933}
#accountMenu .account-identity-status{padding:0 0 var(--space-3);margin-bottom:var(--space-1);border-bottom:1px solid var(--line-soft)}
#accountMenu .account-menu-action{min-height:43px;font-size:var(--text-sm)}
#accountMenu .account-menu-action .action-chevron{margin-left:auto;width:12px;height:12px;flex:0 0 12px}
#accountMenu .logout-link{font-size:var(--text-sm);padding:var(--space-3) var(--space-2);margin-top:var(--space-2);border-top:1px solid var(--line-soft)}
#accountMenu .logout-link .icon{width:16px;height:16px;flex:0 0 16px}
#accountMenu .logout-link .icon:last-child{width:12px;height:12px;flex:0 0 12px}
.account-button .account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.account-detail-dialog .account-minecraft{display:grid;gap:var(--space-2)}
.account-detail-dialog .account-link-help,.account-detail-dialog .account-link-status,.account-detail-dialog .account-link-confirmation p{font-size:var(--text-sm);line-height:1.6;color:var(--muted);margin:0 0 var(--space-2)}
.account-detail-dialog .account-menu-action{width:100%;text-align:left;padding:var(--space-3) var(--space-3);font-size:var(--text-sm);border:1px solid var(--line-soft);border-radius:var(--radius);background:#ffffff06;color:var(--text)}
.account-detail-dialog #minecraftUnlinkButton{margin-top:var(--space-2);color:#edb0b8;background:transparent}
.account-detail-dialog .account-link-confirmation{padding:var(--space-4);border:1px solid #6a414a;border-radius:var(--radius);background:#43262d33}
.account-detail-dialog .account-link-confirmation button+button{margin-top:var(--space-2)}
.account-detail-dialog [hidden]{display:none!important}
.more-math-title { margin:0 0 var(--space-3); font-size:var(--text-sm); font-weight:600; color:var(--text) }

/* /profile.css */
/* Profile foundations and illustrated player views. */
.profile-shell { container:profile-shell / inline-size; min-width:0; margin:0 0 var(--space-8); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); overflow:clip }
.profile-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5) }
.profile-identity { display:flex; align-items:center; gap:var(--space-3); flex:1 0 210px; min-width:0 }
.profile-identity > div { min-width:0 }
.profile-identity h2 { margin:0 0 var(--space-1); font-size:var(--text-lg); overflow-wrap:anywhere }
.profile-identity p { margin:0; color:var(--muted); font-size:var(--text-sm) }
.profile-monogram { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--raised); color:var(--accent) }
.profile-monogram img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated }
.profile-monogram > .icon { width:24px; height:24px }
.profile-search { display:flex; align-items:end; gap:var(--space-2); flex:1 1 160px; min-width:0 }
.profile-search label { flex:1; min-width:0 }
.profile-search input,.profile-profile-picker select { width:100% }
.profile-search button,.profile-bar-actions button { min-height:40px }
.profile-bar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-left:auto }
.profile-bar-actions button { padding:var(--space-2) var(--space-3); font-size:var(--text-sm) }
body[data-workspace="profile"] #profileToggle { display:none }
.profile-bar-actions .icon { width:16px; height:16px; flex:none }
.profile-profile-picker { flex:0 0 230px; min-width:0; font-size:var(--text-sm) }
.profile-profile-picker .picker,.profile-profile-picker .picker-button { width:100%; min-width:0; max-width:100% }
.profile-profile-picker .picker-text { min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:left }
.profile-profile-picker .picker-button { height:auto; min-height:42px }
.profile-status-line { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding:0 var(--space-6) var(--space-4); font-size:var(--text-xs); color:var(--quiet) }
.profile-status-line:has(#profileUpdated:empty) { display:none }
.profile-stale { color:var(--amber) }
.profile-error { margin:0 var(--space-6) var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line)); border-radius:var(--radius-sm); color:var(--amber); background:var(--input); font-size:var(--text-sm); overflow-wrap:anywhere }
.profile-explorer { min-width:0; padding:var(--space-4) var(--space-6) var(--space-6); border-top:1px solid var(--line) }

.profile-connection { margin:0 var(--space-6) var(--space-6); padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--input) }
.profile-connection-heading { display:flex; justify-content:space-between; gap:var(--space-4); align-items:start }
.profile-connection h3 { margin:0; font-size:var(--text-lg) }
.profile-connection p { color:var(--muted); font-size:var(--text-sm); line-height:1.6 }
.profile-connection-fields { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-3) }
.profile-connection-fields label { display:grid; gap:var(--space-2); flex:1 1 240px; min-width:0; font-size:var(--text-sm) }
.profile-connection-fields input { width:100% }
.profile-disconnect { margin-left:auto; color:var(--red) }
.profile-welcome { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); padding:var(--space-5) var(--space-6); border-top:1px solid var(--line); text-align:left }
.profile-welcome-icon { display:none }
.profile-welcome h2 { flex-basis:100%; font-size:var(--text-lg); margin:0 }
.profile-welcome p { flex:1 1 360px; margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.5 }
.profile-welcome > button { min-height:36px; padding:var(--space-2) var(--space-3); font-size:var(--text-sm); white-space:normal }
.profile-summary,.profile-mini-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:var(--space-4); margin:0 0 var(--space-6) }
.profile-metric { min-width:0; font-variant-numeric:tabular-nums }
.profile-metric > span { display:block; color:var(--muted); font-size:var(--text-sm); margin-bottom:var(--space-2); line-height:1.4 }
.profile-metric > strong { display:block; font-size:var(--text-xl); font-weight:650; letter-spacing:-.03em; line-height:1.25; overflow-wrap:anywhere }
.profile-metric > small { display:block; color:var(--quiet); font-size:var(--text-xs); margin-top:var(--space-1); line-height:1.5 }
.profile-availability { margin:0 0 var(--space-6); padding:var(--space-3) var(--space-4); border-left:3px solid var(--amber); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--input); color:var(--muted); font-size:var(--text-sm); line-height:1.65; overflow-wrap:anywhere }
.profile-sections { display:grid; gap:var(--space-4); min-width:0 }
.profile-section { min-width:0; border:0; border-radius:0; background:transparent; scroll-margin-top:var(--space-6) }
.profile-section > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5); list-style:none; cursor:pointer }
.profile-section > summary > span { min-width:0 }
.profile-section > summary b { display:flex; align-items:center; gap:var(--space-2); color:var(--text); font-size:var(--text-lg) }
.profile-section > summary small { display:block; color:var(--quiet); font-size:var(--text-sm); margin-top:var(--space-1) }
.profile-section > summary .icon { width:18px; height:18px; flex:none; color:var(--muted) }
.profile-section[open] > summary > .icon { transform:rotate(90deg) }
.profile-section > summary b > .icon { transform:none }
.profile-section-body { min-width:0; padding:var(--space-5) }
.profile-subheading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin:0 0 var(--space-5) }
.profile-subheading h3 { display:flex; align-items:center; gap:var(--space-2); margin:0; color:var(--text); font-size:var(--text-lg); font-weight:600 }
.profile-subheading .icon { width:18px; height:18px }
.profile-subheading > span { color:var(--quiet); font-size:var(--text-sm) }
.profile-link-button { min-height:36px; padding:var(--space-1) 0; border:0; background:transparent; color:var(--accent); font-size:var(--text-sm); white-space:normal }
.profile-link-button .icon { width:14px; height:14px; flex:none }
.profile-pill { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); font-size:var(--text-xs); color:var(--muted) }
.profile-pill .game-image { width:24px; height:24px; flex:0 0 24px }
.profile-empty { grid-column:1/-1; margin:0; padding:var(--space-6) var(--space-2); color:var(--muted); font-size:var(--text-sm); font-weight:400; line-height:1.65; overflow-wrap:anywhere }
.profile-nested { margin:var(--space-6) 0 0; border-top:1px solid var(--line); padding-top:var(--space-3); min-width:0 }
.profile-nested > .profile-nested-title { margin:0; padding:var(--space-3) 0; font-size:var(--text-base); font-weight:600; color:var(--text); overflow-wrap:anywhere }
.profile-nested > .profile-nested-title small { margin-left:var(--space-2); font-size:var(--text-xs); color:var(--quiet); font-weight:400 }
.profile-nested li { color:var(--muted); font-size:var(--text-sm); line-height:1.65 }
.profile-filters { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-4); margin:0 0 var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--input) }
.profile-filters label { display:grid; gap:var(--space-2); flex:1 1 160px; min-width:0; color:var(--muted); font-size:var(--text-sm) }
.profile-filters input,.profile-filters select { width:100% }
.profile-list-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-3); margin-top:var(--space-5); color:var(--quiet); font-size:var(--text-sm) }
/* Game imagery keeps its native silhouettes and meaningful rarity colours. */
.game-image { position:relative; display:inline-grid; place-items:center; width:var(--item-art-size); height:var(--item-art-size); flex:0 0 var(--item-art-size); min-width:0; vertical-align:middle; border-radius:var(--radius-sm); background:transparent }
.game-image > img { display:block; width:100%; height:100%; object-fit:contain; }
.game-image > .icon { position:absolute; width:24px; height:24px; opacity:.65; color:var(--rarity,var(--accent)) }
.game-image:has(img.art-ready:not([hidden])) > .icon { visibility:hidden }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card) { --rarity:var(--text) }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card).uncommon { --rarity:#85d6a9 }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card).rare { --rarity:#96b6ff }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card).epic { --rarity:#c699ef }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card).legendary { --rarity:#edc082 }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card).mythic { --rarity:#ee9ccc }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card).divine { --rarity:#90dbe6 }
:is(.profile-item,.profile-pet,.overview-active-pet,.profile-shard-card,.minecraft-item-card):is(.special,.very-special,.very_special) { --rarity:#f598a3 }
.profile-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,224px),1fr)); gap:var(--space-2) }
.profile-item { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-2); width:100%; min-width:0; min-height:var(--item-row-height); padding:var(--space-2); text-align:left; white-space:normal; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised) }
.profile-item > span:last-child { min-width:0 }
.profile-item b { display:block; color:var(--rarity); font-size:var(--text-sm); font-weight:600; line-height:1.5; overflow-wrap:anywhere }
.profile-item small { display:block; color:var(--quiet); font-size:var(--text-xs); font-weight:400; margin-top:var(--space-1); line-height:1.5 }
.profile-item:hover { border-color:var(--rarity); background:var(--panel) }
.profile-item .game-image { filter:drop-shadow(0 3px 3px #0004) }
/* Character and balances beside skills, with equipped gear across the bottom. */
.profile-overview-layout { min-width:0 }
.profile-overview { display:grid; grid-template-columns:160px minmax(0,1fr); gap:var(--space-6); align-items:start; min-width:0 }
.overview-panel { min-width:0; margin:0; padding:0; border:0; border-radius:0; background:transparent }
.overview-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:32px; margin-bottom:var(--space-4) }
.overview-panel-title { margin:0; font-size:var(--text-lg); font-weight:600; line-height:1.4 }
.overview-panel-link { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); min-height:32px; padding:0; font-size:var(--text-xs); white-space:normal; text-align:right }
.overview-panel-link .icon { width:12px; height:12px; flex:none }
.profile-hero { padding-right:var(--space-6); border-right:1px solid var(--line-soft); align-self:stretch }
.overview-character { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin:0 0 var(--space-6) }
.overview-character img { display:block; width:80px; height:160px; object-fit:contain }
.overview-badges { display:flex; align-items:center; justify-content:center; gap:var(--space-2) }
.overview-fairy-souls { display:grid; flex:none; width:26px; height:26px; cursor:help }
.overview-fairy-souls .game-image { width:100%; height:100% }
#profileHero .overview-fairy-souls img { width:100%; height:100%; max-width:none }
.overview-fairy-souls:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm) }
.overview-stat-list { display:grid; gap:var(--space-5); text-align:center }
.profile-hero .profile-metric > strong { font-size:var(--text-xl); overflow-wrap:anywhere }
.minecraft-rank { padding:var(--space-1) var(--space-2); border:1px solid currentColor; border-radius:var(--radius-sm); font-size:var(--text-xs); white-space:nowrap }
.overview-skills { min-width:0; scroll-margin-top:var(--space-6) }
.overview-level { min-width:0; text-align:right; font-variant-numeric:tabular-nums }
.overview-level strong { color:var(--lv-color,var(--text)); font-size:var(--text-lg); font-weight:600; overflow-wrap:anywhere }
.overview-level small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs) }
.overview-loadout { grid-column:1/-1; padding-top:var(--space-5); border-top:1px solid var(--line) }
/* Skill artwork, levels and progress use aligned rows. */
.profile-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-8); align-items:start }
.profile-skill { min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); --skill:var(--accent) }
.skill-farming { --skill:var(--skill-farming) }
.skill-mining { --skill:var(--skill-mining) }
.skill-combat { --skill:var(--skill-combat) }
.skill-foraging { --skill:var(--skill-foraging) }
.skill-fishing { --skill:var(--skill-fishing) }
.skill-enchanting { --skill:var(--skill-enchanting) }
.skill-alchemy { --skill:var(--skill-alchemy) }
.skill-carpentry { --skill:var(--skill-carpentry) }
.skill-runecrafting { --skill:var(--skill-runecrafting) }
.skill-social { --skill:var(--skill-social) }
.skill-taming { --skill:var(--skill-taming) }
.skill-hunting { --skill:var(--skill-hunting) }
.profile-skill.maxed { --skill:var(--amber); border-color:color-mix(in srgb,var(--amber) 40%,var(--line)) }
.profile-skill.maxed .skill-cap-state { color:var(--skill); font-weight:600 }
.profile-skill > summary { width:100%; min-width:0; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:var(--space-1) var(--space-3); cursor:pointer; list-style:none }
.profile-skill .skill-icon { grid-row:1/4; display:grid; place-items:center; width:40px; height:40px; background:var(--raised); border:1px solid color-mix(in srgb,var(--skill) 45%,var(--line)); border-radius:var(--radius-sm) }
.profile-skill .skill-icon .icon { width:24px; height:24px; color:var(--skill) }
.skill-heading { width:100%; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); min-width:0; grid-column:2/-1 }
.skill-heading > span { font-size:var(--text-base); color:var(--text); overflow-wrap:anywhere }
.skill-heading b { color:var(--skill,var(--text)); font-size:var(--text-lg); font-variant-numeric:tabular-nums; line-height:1.3; overflow-wrap:anywhere }
.skill-heading b small { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.profile-skill > summary > .profile-progress { grid-column:2/-1; min-width:0; width:100%; justify-self:stretch }
.skill-cap-state { min-width:0; grid-column:2; color:var(--quiet); font-size:var(--text-xs); line-height:1.5 }
.profile-expand-hint { justify-self:end; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-1); font-size:var(--text-xs); color:var(--muted) }
.profile-expand-hint .icon { width:12px; height:12px; flex:none }
details[open] > summary .profile-expand-hint .icon { transform:rotate(90deg) }
.profile-skill-note { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--line-soft); color:var(--muted); font-size:var(--text-sm); line-height:1.6 }
.profile-skill ul { padding-left:var(--space-5); color:var(--muted); font-size:var(--text-sm); line-height:1.65 }
.overview-skills .profile-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:0 var(--space-6); align-items:stretch }
.overview-skills .profile-skill-grid:has(.profile-skill[open]) { grid-auto-rows:auto }
.overview-skills .profile-skill { padding:var(--space-3) 0; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; background:transparent }
.overview-skills .profile-skill > summary { grid-template-columns:32px minmax(0,1fr) auto; row-gap:var(--space-1) }
.overview-skills .profile-skill .skill-icon { grid-row:1 / span 2; width:32px; height:32px; border:0; background:transparent }
.overview-skills .skill-heading { grid-column:2 }
.overview-skills .skill-heading b { font-size:var(--text-base) }
.overview-skills .skill-cap-state { grid-column:2/-1; min-height:1.5em; overflow-wrap:anywhere }
.overview-skills .profile-skill .profile-expand-hint { grid-column:3; grid-row:1; font-size:0 }
.overview-skills .profile-expand-hint .icon { width:12px; height:12px }

.profile-shell progress { display:block; width:100%; height:5px; margin-top:var(--space-3); appearance:none; border:0; border-radius:var(--radius-sm); overflow:hidden; background:var(--line); accent-color:var(--accent) }
.profile-shell progress::-webkit-progress-bar { background:var(--line) }
.profile-shell progress::-webkit-progress-value { background:var(--accent) }
.profile-shell progress::-moz-progress-bar { background:var(--accent) }
/* Collectibles have room for art and consistent name/level positions. */
.profile-pet-category { display:flex; align-items:baseline; gap:var(--space-2); margin:var(--space-5) 0 var(--space-2); padding-bottom:var(--space-2); border-bottom:1px solid var(--line); font-size:var(--text-base); font-weight:600; color:var(--text) }
/* The pet count sits on the right, level with the first group heading. */
.pet-collection-browser { display:grid; grid-template-columns:minmax(0,1fr) auto }
.pet-collection-browser > * { grid-column:1/-1 }
.pet-collection-browser > #profilePetGroups { grid-row:2 }
.pet-collection-browser > #profilePetCount { grid-column:2; grid-row:2; align-self:start; justify-self:end; position:relative; z-index:1; margin:var(--space-5) 0 0; line-height:23.25px }
.profile-pet-category small { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.profile-pet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr)); gap:var(--space-2); margin:var(--space-2) 0 var(--space-5) }
.profile-pet { display:grid; grid-template-columns:var(--item-art-size) minmax(0,1fr) 12px; align-items:center; gap:var(--space-2); min-width:0; min-height:var(--item-row-height); padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); text-align:left; white-space:normal }
.profile-pet .game-image { width:var(--item-art-size); height:var(--item-art-size) }
.profile-pet-copy { min-width:0 }
.profile-pet b { display:block; color:var(--rarity); font-size:var(--text-sm); font-weight:600; line-height:1.4; overflow-wrap:anywhere }
.profile-pet-copy small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs); font-weight:400; line-height:1.4 }
.profile-pet > .icon { width:12px; height:12px; color:var(--quiet); justify-self:end }
.profile-pet:hover { background:var(--raised); border-color:var(--rarity) }
.profile-pet.is-active { background:var(--raised); border-color:var(--rarity) }
.profile-collection-grid,.profile-minion-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,256px),1fr)); gap:var(--space-3) }
.profile-collection { display:grid; grid-template-columns:var(--item-art-size) minmax(0,1fr) auto; gap:var(--space-2); align-items:center; text-align:left; white-space:normal; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); min-width:0 }
.profile-collection b { font-size:var(--text-sm); overflow-wrap:anywhere }
.profile-collection > strong { font-size:var(--text-sm); color:var(--accent) }
.profile-collection small { display:block; color:var(--quiet); font-size:var(--text-xs); margin-top:var(--space-1); line-height:1.5 }
.profile-collection progress,.profile-collection-next { grid-column:1/-1 }
.profile-minion-family { min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }
.profile-minion-family > button { display:flex; justify-content:flex-start; gap:var(--space-3); width:100%; padding:0; border:0; background:transparent; color:var(--text); font-size:var(--text-base); text-align:left; white-space:normal }
.profile-tier-strip { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-3) }
.profile-section-action { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); margin:0 0 var(--space-6); color:var(--muted); font-size:var(--text-sm) }
.profile-world { width:100%; min-width:0; margin:0; padding:0; border:0; background:transparent }
.profile-records { min-width:0 }
.profile-record { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-4); align-items:baseline; padding:var(--space-3) 0; border-bottom:1px solid var(--line-soft); font-size:var(--text-sm); line-height:1.5 }
.profile-record > span { color:var(--muted); overflow-wrap:anywhere }
.profile-record > strong { text-align:right; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.profile-record-group { min-width:0; padding-top:var(--space-2) }
.profile-record-group > .record-group-title { margin:var(--space-3) 0 var(--space-1); color:var(--text); font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere }
.profile-record-group.record-depth-1 > .record-group-title,.profile-record-group.record-depth-2 > .record-group-title { color:var(--muted); font-weight:500 }
.profile-record-group > .record-group-title small { margin-left:var(--space-2); font-size:var(--text-xs); color:var(--quiet); font-weight:400 }
.profile-record-group > .profile-records { padding:0 0 var(--space-2) var(--space-4); border-left:1px solid var(--line); margin:0 0 var(--space-3) }
.dungeon-summary { padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); margin-bottom:var(--space-8) }
.profile-class-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); padding-top:var(--space-5); gap:var(--space-4) }
.profile-class-strip > div { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2); color:var(--muted); font-size:var(--text-sm) }
.profile-class-strip b { color:var(--text); font-size:var(--text-lg) }
.profile-class-strip progress,.profile-class-strip small { grid-column:1/-1; margin:0; font-size:var(--text-xs); overflow-wrap:anywhere }
.dungeon-track { margin-bottom:var(--space-8); min-width:0 }
.dungeon-track-heading { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-3) }
.dungeon-track-heading h3 { margin:0; font-size:var(--text-lg) }
.dungeon-track-heading strong { color:var(--accent); font-size:var(--text-lg) }
.dungeon-track > progress { margin-bottom:var(--space-5) }
.profile-table-wrap { overflow-x:auto; max-width:100% }
.profile-table { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.profile-table th,.profile-table td { padding:var(--space-3); text-align:left; border-bottom:1px solid var(--line); white-space:nowrap }
.profile-table th { color:var(--quiet); font-weight:500 }
.profile-shard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,256px),1fr)); gap:var(--space-3) }
.profile-shard-card { min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }
.profile-shard-card > button { display:flex; align-items:center; width:100%; gap:var(--space-3); padding:0; border:0; background:transparent; text-align:left; white-space:normal }
.profile-shard-card > button > span:not(.game-image) { min-width:0; flex:1 }
.profile-shard-card > button > .icon { width:14px; height:14px; flex:none; color:var(--quiet) }
.profile-shard-card b { color:var(--rarity); font-size:var(--text-base); overflow-wrap:anywhere }
.profile-shard-card small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs); line-height:1.6 }
.profile-shard-card > div { display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; padding-top:var(--space-3); border-top:1px solid var(--line); color:var(--muted); font-size:var(--text-sm) }
.profile-shard-card > div > b { color:var(--text); font-size:var(--text-sm) }
.shard-effect-preview { margin:var(--space-4) 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.6 }
.shard-effect-preview > span:first-child,.shard-effect h4 { color:var(--accent); font-size:var(--text-xs) }
.profile-attribution { color:var(--quiet); font-size:var(--text-xs); margin:var(--space-5) 0; line-height:1.65; overflow-wrap:anywhere }
.profile-attribution a { color:var(--muted) }
.profile-context { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3) var(--space-5); padding:var(--space-4); margin:0 0 var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); font-size:var(--text-sm) }
.profile-context-name { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) }
.profile-context-name small,.profile-context-values > span { font-size:var(--text-xs); color:var(--quiet) }
.profile-context-dot { width:6px; height:6px; border-radius:50%; background:var(--accent) }
.profile-context-values { display:flex; flex:1; flex-wrap:wrap; gap:var(--space-2) var(--space-5) }
.profile-context-values b { margin-left:var(--space-2); color:var(--text); font-size:var(--text-sm); font-weight:600 }
.profile-context-warning { flex-basis:100%; color:var(--amber); font-size:var(--text-xs) }
.profile-owned { display:block; margin-top:var(--space-1); color:var(--accent); font-size:var(--text-xs) }
#profileItemDialog,#siteConnectionDialog { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); color:var(--text); box-shadow:0 24px 80px #0009; overflow:auto }
#profileItemDialog::backdrop,#siteConnectionDialog::backdrop { background:#050b12cc }
#profileItemDialog h2,#siteConnectionDialog h2 { margin:var(--space-5) 0 var(--space-2); font-size:var(--text-xl); overflow-wrap:anywhere }
#profileItemSubtitle { margin:0 0 var(--space-5); color:var(--muted); font-size:var(--text-sm); overflow-wrap:anywhere }
#siteConnectionDialog label { display:grid; gap:var(--space-2); font-size:var(--text-sm) }
#siteConnectionDialog p { font-size:var(--text-sm); line-height:1.65 }
#siteConnectionForm,#siteConnectionStatus,.profile-item-actions { margin-top:var(--space-6) }
.profile-item-lore { padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--input); margin:var(--space-3) 0 var(--space-5) }
.profile-item-lore p { margin:var(--space-1) 0; white-space:pre-wrap; font-size:var(--text-sm); color:var(--muted); line-height:1.65; overflow-wrap:anywhere }
.profile-item-lore p:empty { height:var(--space-2) }
.recipe .game-image { float:left; margin-right:var(--space-3); width:40px; height:40px; min-width:40px }
.ingredient .game-image { float:left; margin-right:var(--space-3) }
.fusion-node > .fusion-node-head > .game-image,.fusion-card > header > .game-image,.fusion-leaf > .game-image { width:32px; height:32px; flex:0 0 32px }
.profile-ranked-name { display:inline }
.rank-vip,.rank-vip-plus { color:#5cd65c; font-weight:600 }
.rank-mvp,.rank-mvp-plus { color:#5ce1e6; font-weight:600 }
.rank-mvp-plusplus { color:#ffd76a; font-weight:700 }
.rank-staff { color:#ff6b6b; font-weight:600 }
body:not([data-admin-open="true"]) [data-player-name] { font-weight:500 }
.level-t0{--lv-color:#aaaaaa}.level-t1{--lv-color:#ffffff}.level-t2{--lv-color:#ffff55}.level-t3{--lv-color:#55ff55}.level-t4{--lv-color:#00aa00}.level-t5{--lv-color:#6ec6ff}.level-t6{--lv-color:#00aaaa}.level-t7{--lv-color:#5555ff}.level-t8{--lv-color:#ff55ff}.level-t9{--lv-color:#aa00aa}.level-t10{--lv-color:#ffaa00}.level-t11{--lv-color:#ff5555}.level-t12{--lv-color:#aa0000}
:is(.profile-section,.profile-skill) > summary::-webkit-details-marker { display:none }
:is(.profile-section,.profile-skill) > summary::before { display:none }
.profile-shell :is(button,summary,a):focus-visible { outline:2px solid var(--accent); outline-offset:3px }
@media(max-width:1100px) {
 .profile-overview { grid-template-columns:136px minmax(0,1fr); column-gap:var(--space-4) }
 .profile-hero { padding-right:var(--space-4) }
 .overview-skills .profile-skill-grid { column-gap:var(--space-4) }
 .profile-class-strip { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media(max-width:760px) {
 .profile-overview { grid-template-columns:minmax(0,1fr); gap:var(--space-5) }
 .profile-hero { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-5); padding:0 0 var(--space-5); border:0; border-bottom:1px solid var(--line) }
 .overview-character { margin:0 }
 .overview-stat-list { gap:var(--space-4); text-align:left }
 .profile-skill-grid { grid-template-columns:minmax(0,1fr) }
 .profile-bar,.profile-explorer,.profile-welcome { padding:var(--space-4) }
 .profile-section-body { padding:var(--space-4) }
}
/* The sidebar can leave a narrow profile even in a desktop window. */
@container profile-shell (max-width:760px) {
 .profile-bar.has-player { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,230px) }
 .profile-bar.has-player .profile-identity { grid-column:1; grid-row:1 }
 .profile-bar.has-player .profile-bar-actions { grid-column:2; grid-row:1; min-width:0; margin:0; justify-content:flex-end }
 .profile-bar.has-player .profile-search { grid-column:1; grid-row:2; width:100% }
 .profile-bar.has-player .profile-profile-picker { grid-column:2; grid-row:2; width:100% }
}
@container profile-shell (max-width:540px) {
 .profile-bar.has-player { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-3); padding:var(--space-3) var(--space-4) }
 .profile-bar.has-player .profile-identity { grid-column:1; grid-row:1; gap:var(--space-2); align-items:flex-start }
 .profile-bar.has-player .profile-monogram { width:36px; height:36px; flex:0 0 36px }
 .profile-bar.has-player .profile-identity h2 { font-size:var(--text-base); line-height:1.35 }
 .profile-bar.has-player .profile-identity p { font-size:var(--text-xs); line-height:1.4; overflow-wrap:anywhere }
 .profile-bar.has-player .profile-bar-actions { grid-column:2; grid-row:1; min-width:0; align-self:center; justify-content:flex-end; gap:var(--space-1); margin:0 }
 .profile-bar.has-player .profile-bar-actions button { min-height:36px; padding:var(--space-2) 6px; font-size:var(--text-xs); white-space:normal }
 .profile-bar.has-player .profile-bar-actions .icon { display:none }
 .profile-bar.has-player .profile-search { grid-column:1 / -1; grid-row:2; width:100%; min-width:0; gap:var(--space-1) }
 .profile-bar.has-player .profile-search button { width:36px; min-width:36px; min-height:40px; padding:var(--space-2) }
 .profile-bar.has-player .profile-search input { padding-inline:var(--space-2) }
 .profile-bar.has-player .profile-profile-picker { grid-column:1 / -1; grid-row:3; width:100%; min-width:0 }

}
@media(max-width:540px) {
 .overview-skills .profile-skill-grid { grid-template-columns:minmax(0,1fr) }
 .profile-hero .profile-metric > strong { font-size:var(--text-lg) }
 .profile-identity { flex:1 1 140px }
 .profile-profile-picker { order:2; flex:0 1 128px; min-width:112px }
 .profile-search { order:3; flex-basis:100% }
 .profile-bar-actions { order:4; margin-left:0; flex:1 1 100% }
 .dungeon-summary { padding:var(--space-4) }
 .profile-mini-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .profile-mini-metrics .profile-metric strong { font-size:var(--text-lg) }
 .profile-filters { padding:var(--space-3) }
 .profile-filters label { flex-basis:100% }
 .profile-class-strip { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .profile-pet-grid { grid-template-columns:minmax(0,1fr) }
 .profile-record { grid-template-columns:minmax(0,1fr); gap:var(--space-1) }
 .profile-record > strong { text-align:left }
 .profile-connection { margin-inline:var(--space-4); padding:var(--space-4) }
 .profile-context-values { flex-basis:100% }
 .profile-disconnect { margin-left:0 }
 #profileItemDialog,#siteConnectionDialog { padding:var(--space-4) }
}
@media(max-width:380px) { .profile-skill .profile-expand-hint { grid-column:2/-1 } }

/* /overhaul.css */
/* Atlas product shell. Feature layouts live with their workspace. */
body { isolation:isolate; min-height:100vh; background:var(--bg); color:var(--text); font-size:var(--text-base); line-height:1.55 }
body[data-workspace="money"] { --accent:var(--amber); --accent-rgb:243,199,106 }
body[data-workspace="markets"] { --accent:var(--green); --accent-rgb:124,219,155 }
body[data-workspace="events"] { --accent:var(--blue); --accent-rgb:143,200,255 }
body[data-workspace="profile"][data-section="mining"] { --accent:var(--skill-mining) }
body[data-workspace="profile"][data-section="farming"] { --accent:var(--skill-farming) }
body[data-workspace="profile"][data-section="fishing"] { --accent:var(--skill-fishing) }
body[data-workspace="profile"][data-section="foraging"] { --accent:var(--skill-foraging) }
body[data-workspace="profile"][data-section="hunting"] { --accent:var(--skill-hunting) }
body[data-workspace="profile"]:is([data-section="dungeons"],[data-section="slayers"],[data-section="bestiary"],[data-section="crimson"]) { --accent:var(--skill-combat) }
body[data-scene="hub"] { --scene:url("/scenery/hub.webp?v=225") }
body[data-scene="armory"] { --scene:url("/scenery/armory.webp?v=225") }
body[data-scene="habitat"] { --scene:url("/scenery/habitat.webp?v=225") }
body[data-scene="library"] { --scene:url("/scenery/library.webp?v=225") }
body[data-scene="dungeon"] { --scene:url("/scenery/dungeon.webp?v=225") }
body[data-scene="forge"] { --scene:url("/scenery/forge.webp?v=225") }
body[data-scene="garden"] { --scene:url("/scenery/garden.webp?v=225") }
body[data-scene="forest"] { --scene:url("/scenery/forest.webp?v=225") }
body[data-scene="crimson"] { --scene:url("/scenery/crimson.webp?v=225") }
body[data-scene="rift"] { --scene:url("/scenery/rift.webp?v=225") }
body[data-scene="museum"] { --scene:url("/scenery/museum.webp?v=225") }
body[data-scene="fusion"] { --scene:url("/scenery/fusion.webp?v=225") }
body[data-scene="workshop"] { --scene:url("/scenery/workshop.webp?v=225") }
body[data-scene="market"] { --scene:url("/scenery/market.webp?v=225") }
body[data-scene="minions"] { --scene:url("/scenery/minions.webp?v=225") }
body[data-scene="auction"] { --scene:url("/scenery/auction.webp?v=225") }
body[data-scene="merchant"] { --scene:url("/scenery/merchant.webp?v=225") }
body[data-scene="pet-care"] { --scene:url("/scenery/pet-care.webp?v=225") }
body[data-scene="gathering"] { --scene:url("/scenery/gathering.webp?v=225") }
/* The darkening gradient is not decoration: scene-motion.js paints the identical two stops onto the
   animated layer, in its own words "the same viewport shade", so that moving water and fire blend
   into the still art around them. The redesign swapped it for a flat opacity and left the canvas
   shading as it was, which would have left the moving parts visibly darker than their surroundings.
   Either both layers change together or neither does. */
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(180deg,#0e111873,#0e1118b8),var(--scene) right top/cover; filter:none }
@media(max-width:820px) { body::before { background-position:center top } }
body[data-scene="none"]::before { display:none }
body[data-workspace="introduction"][data-scene="none"]::before { display:block; inset:-15vmax; background:radial-gradient(38vmax 30vmax at 18% 22%,#b9a3ff1f,transparent 70%),radial-gradient(34vmax 26vmax at 82% 30%,#5eead41a,transparent 70%),radial-gradient(44vmax 32vmax at 58% 86%,#8fc8ff17,transparent 70%); animation:atlas-home-lights 40s ease-in-out infinite alternate; will-change:transform }
@keyframes atlas-home-lights { 50% { transform:translate3d(3vmax,-2vmax,0) scale(1.06) } 100% { transform:translate3d(-3vmax,2.5vmax,0) scale(1.02) } }
.scene-atmosphere { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; user-select:none; contain:strict }
body[data-admin-open="true"] .scene-atmosphere,:root[data-motion="paused"] .scene-atmosphere { display:none }
html { scrollbar-color:var(--line) var(--bg); scrollbar-width:thin }
main { display:block; margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); max-width:1600px; padding:var(--space-8); min-width:0 }
h1,h2,h3,h4 { text-wrap:pretty }
h1 { font-size:var(--text-2xl); line-height:1.2; letter-spacing:-.035em; margin:0; font-weight:700 }
h2 { font-size:var(--text-xl); line-height:1.3; letter-spacing:-.025em }
h3 { font-size:var(--text-lg); line-height:1.4 }
p { line-height:1.65 }
a { color:var(--brand) }
a:hover { color:var(--text) }
button,.button-link,button.primary,input:not([type="checkbox"]),select { border-radius:var(--radius-sm); font-size:var(--text-sm); min-height:var(--control-height); box-shadow:none }
button,.button-link { padding:var(--space-2) var(--space-4); border-color:var(--line); background:var(--raised); font-weight:600; transition:background .15s,border-color .15s,color .15s }
button:hover:not(:disabled),.button-link:hover { background:var(--line-soft); border-color:var(--quiet) }
button.primary,.button-link.primary { background:var(--accent); border-color:var(--accent); color:var(--bg) }
button.primary:hover:not(:disabled),.button-link.primary:hover { background:var(--text); border-color:var(--text); color:var(--bg); box-shadow:none }
button.subtle,button.icon-button { background:transparent; color:var(--muted); border-color:var(--line) }
button.subtle:hover:not(:disabled),button.icon-button:hover:not(:disabled) { background:var(--raised); color:var(--text) }
input:not([type="checkbox"]),select,textarea { background:var(--input); border-color:var(--line); color:var(--text); padding:var(--space-2) var(--space-3) }
input:not([type="checkbox"]):focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; border-color:var(--accent) }
input::placeholder { color:var(--quiet) }
input[type="checkbox"]:checked { background:var(--accent); border-color:var(--accent) }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
small { font-size:var(--text-xs) }
.icon { width:18px; height:18px; flex:0 0 18px; stroke-width:1.65 }
.sidebar { overflow:hidden; display:flex; flex-direction:column; padding:var(--space-6) var(--space-3) var(--space-2); width:var(--sidebar-width); background:var(--sidebar); border-right:1px solid var(--line-soft); backdrop-filter:none }
.sidebar-top { position:relative; justify-content:center; padding:0 var(--space-2) var(--space-6); flex:0 0 auto }
.sidebar-top>.mobile-only { position:absolute; right:0; top:10px }
/* Center the complete identity in the sidebar and keep navigation at its existing height. */
.wordmark { width:max-content; height:auto; margin-inline:auto; flex:0 0 auto; gap:var(--space-3); font-size:23px; font-weight:800; letter-spacing:-.04em; align-items:center }
.brand-symbol { flex:0 0 60px; width:60px; height:60px; background:none; border:0; box-shadow:none; transform:none }
.brand-logo { width:66px; height:66px }
.atlas-wordmark { position:relative; top:-4px; line-height:1.05 }
.atlas-wordmark>span { display:block; padding-left:var(--space-3); font-size:31px; }
.nav-section-label,.nav-active-dot { display:none }
.sidebar-scroll { flex:1; min-height:0; overflow:auto; padding-right:0; scrollbar-width:none }
.sidebar-scroll::-webkit-scrollbar { display:none; width:0; height:0 }
.nav-group { margin-bottom:var(--space-3) }
.nav-group>summary { display:flex; width:100%; align-items:center; gap:var(--space-2); padding:var(--space-2); min-height:40px; font-size:var(--text-sm); color:var(--muted); text-transform:none; letter-spacing:0 }
.nav-group>summary::before,.nav-group>summary::marker { content:none; display:none }
.nav-group>summary .icon { width:16px; height:16px; flex-basis:16px; color:var(--quiet) }
.nav-group>summary>span { flex:1 }
.nav-group>summary .nav-group-chevron { width:12px; height:12px; flex-basis:12px }
.sidebar .nav-group>summary { color:var(--nav-color,var(--accent)) }
#profileNavGroup { --nav-color:var(--blue) }
#moneyNavGroup { --nav-color:var(--amber) }
#progressionNavGroup { --nav-color:var(--purple) }
#marketsNavGroup { --nav-color:var(--green) }
#eventsNavGroup { --nav-color:var(--blue) }
#helpNavGroup { --nav-color:#f59ac1 }
.nav-group>summary>.icon:first-child { color:var(--nav-color,var(--quiet)) }
.category-tabs { gap:var(--space-1); padding:var(--space-1) 0 var(--space-1) var(--space-2) }
.category-tabs button { display:flex; justify-content:flex-start; text-align:left; width:100%; min-height:36px; padding:var(--space-2); margin:0; gap:var(--space-2); font-size:var(--text-sm); border-radius:var(--radius-sm); color:var(--muted); border:1px solid transparent; background:transparent; box-shadow:none; line-height:1.4 }
.category-tabs button>span:not(.nav-icon):not(.nav-active-dot) { flex:1; text-align:left }
.category-tabs button:hover { background:var(--raised); border-color:transparent; color:var(--text) }
.category-tabs button[aria-pressed="true"] { color:var(--text); background:var(--raised); border-color:var(--line); box-shadow:none }
.category-tabs .nav-icon { background:none; border:0; width:16px; height:16px; flex:0 0 16px; color:inherit }
.category-tabs .icon { width:16px; height:16px; flex-basis:16px }
.nav-introduction { display:flex; width:100%; justify-content:flex-start; gap:var(--space-2); padding:var(--space-2); margin:0 0 var(--space-4); background:none; border:1px solid transparent; color:var(--muted); font-size:var(--text-sm) }
.nav-introduction[aria-pressed="true"] { color:var(--purple); background:color-mix(in srgb,var(--purple) 10%,transparent); border-color:color-mix(in srgb,var(--purple) 25%,transparent) }
.sidebar-bottom { flex:0 0 auto; padding-top:var(--space-3); margin-top:auto; background:var(--sidebar); border-top:1px solid var(--line-soft) }
.sidebar-quick-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:var(--space-2); margin-bottom:var(--space-3) }
.sidebar-bottom .sidebar-discord,.sidebar-bottom .sidebar-support,.sidebar-bottom .sidebar-premium { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:var(--space-10); min-height:var(--space-10); padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); margin:0; box-shadow:none }
.sidebar-bottom .sidebar-discord { color:var(--discord) }
.sidebar-bottom .sidebar-premium { color:var(--amber) }
.sidebar-premium .icon { fill:currentColor; stroke:none; width:16px; height:16px; flex-basis:16px }
.sidebar-bottom .sidebar-support { color:var(--red) }
.sidebar-bottom .sidebar-discord:hover,.sidebar-bottom .sidebar-support:hover,.sidebar-bottom .sidebar-premium:hover { background:var(--raised); border-color:currentColor }
.account-button { padding:var(--space-2); border-color:var(--line-soft); background:var(--panel); border-radius:var(--radius); gap:var(--space-2) }
.account-label { font-size:var(--text-sm) }
.account-label small { font-size:var(--text-xs); color:var(--quiet) }
#accountAvatar { background:var(--raised); color:var(--brand); border-radius:var(--radius-sm) }
.sidebar-version { padding:var(--space-3) var(--space-2) 0; color:var(--quiet); font-size:var(--text-xs) }
.app-header { flex-wrap:wrap; min-height:72px; padding:0 0 var(--space-6); margin:0 0 var(--space-6); border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; box-shadow:none; gap:var(--space-6); align-items:center }
.page-heading { min-width:0; gap:var(--space-3) }
.page-heading > div { min-width:0 }
.page-heading .eyebrow { font-size:0; margin:0 0 var(--space-2); line-height:1.2; letter-spacing:0 }
.page-heading .eyebrow>span:first-child { display:none }
#workspaceCrumb { color:var(--accent); font-size:var(--text-xs); font-weight:500; text-transform:none; letter-spacing:.02em }
.page-description { display:none }
.live-controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:0; background:none; border:0; box-shadow:none }
#countdown { color:var(--quiet); font-size:var(--text-xs) }
#refresh,#eventsNotificationsButton { background:var(--panel); border:1px solid var(--line); color:var(--text) }
.refresh-state { min-width:0; font-size:var(--text-xs) }
.picker-panel,.account-menu { background:var(--panel); border-color:var(--line); border-radius:var(--radius); box-shadow:0 12px 32px #0005 }
.picker-option[aria-selected="true"] { color:var(--accent); background:var(--raised) }
.picker-option { font-size:var(--text-sm); color:var(--muted) }
.picker-search { background:var(--input)!important }
.account-menu-action { border-radius:var(--radius-sm); font-size:var(--text-sm) }
.tablewrap { overscroll-behavior-x:contain }
table { font-variant-numeric:tabular-nums }
.rankings th { background:var(--input); color:var(--quiet); font-size:var(--text-xs); font-weight:500 }
.rankings td { border-color:var(--line-soft); font-size:var(--text-sm) }
.rankings tbody tr:hover { background:var(--raised) }
.drawer { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 24px 80px #0006 }
.drawer-top { border-color:var(--line-soft) }
.drawer h2 { font-size:var(--text-xl) }
.modal-backdrop { background:#08090dc9; backdrop-filter:blur(3px) }
.tabs { background:var(--input); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:var(--space-1); gap:var(--space-1) }
.tabs button { min-height:34px; border:0; background:none; box-shadow:none; color:var(--muted); border-radius:var(--radius-sm) }
.tabs button[aria-selected="true"] { color:var(--text); background:var(--raised); box-shadow:none }
.status:empty { display:none }
.setup,.results,.optimizer-panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:none }
.profile-explorer-heading { display:none }
body[data-workspace="money"] :is(.profile-shell,#profileContext,.profile-context) { display:none!important }
.site-footer { margin-top:var(--space-10); padding:var(--space-5) 0; border-top:1px solid var(--line-soft); background:none; color:var(--quiet); font-size:var(--text-xs); display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap }
.site-footer nav { display:flex; flex-wrap:wrap; gap:var(--space-4) }
.site-footer a,.site-footer button { color:var(--quiet); font-size:var(--text-xs); background:none; border:0; padding:0; min-height:24px }
body[data-workspace="introduction"] .app-header { margin-bottom:var(--space-6); min-height:0; border:0; padding:0 }
body[data-workspace="introduction"] .page-heading>div { display:none }
.introduction-workspace { width:100%; max-width:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5) }
.introduction-hero { display:grid; grid-template-columns:minmax(0,1fr) 180px; align-items:center; gap:var(--space-8); padding:var(--space-12); border:1px solid var(--line); border-radius:var(--radius-lg); background:#14151bc4 url('/scenery/hub.webp?v=225') center 42%/cover; background-blend-mode:multiply; overflow:hidden; min-height:340px; margin:0; grid-column:1/-1 }
.introduction-hero-copy { min-width:0; max-width:660px }
.introduction-hero h2 { font-size:var(--text-3xl); line-height:1.15; letter-spacing:-.04em; margin:0 0 var(--space-4); color:var(--text) }
.introduction-lead { max-width:48ch; margin:0 0 var(--space-6); color:var(--muted); font-size:var(--text-base) }
.introduction-search-form { display:flex; gap:var(--space-2); align-items:stretch; margin:0; width:100%; max-width:620px }
.introduction-search-form label { display:block; flex:1; min-width:0 }
.introduction-search-form input { width:100%; min-height:48px; background:var(--bg); border-color:var(--line); font-size:var(--text-base) }
.introduction-search-form button { min-height:48px; background:var(--purple); border-color:var(--purple); color:var(--bg); padding:var(--space-3) var(--space-5) }
.introduction-logo { position:relative; width:180px; height:180px; display:grid; place-items:center; padding:0; margin:0; background:none; border:0 }
.introduction-logo img { width:160px; height:160px; object-fit:contain; filter:drop-shadow(0 12px 20px #06101b88); animation:atlas-logo-drift 6s ease-in-out infinite }
@keyframes atlas-logo-drift { 50% { transform:translateY(-5px) } }
.introduction-destinations { display:contents }
.introduction-destinations .introduction-panel:nth-child(1) { --destination-color:var(--purple); --card-scene:url('/scenery/museum.webp?v=225') }
.introduction-destinations .introduction-panel:nth-child(2) { --destination-color:var(--green); --card-scene:url('/scenery/market.webp?v=225') }
.introduction-destinations .introduction-panel:nth-child(3) { --destination-color:var(--blue); --card-scene:url('/scenery/library.webp?v=225') }
#introductionWorkspace .introduction-destinations h3 { color:var(--destination-color) }
#introductionWorkspace .introduction-destinations nav button:hover { color:var(--destination-color) }
#introductionWorkspace :is(.introduction-panel,.introduction-tools,.introduction-help) { margin:0; padding:var(--space-6); background:linear-gradient(180deg,#14151ba8 0%,#14151be6 55%,#14151bf5 100%),var(--card-scene,none) center/cover; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-width:0 }
.introduction-destinations h3 { margin:0 0 var(--space-2); font-size:var(--text-lg); color:var(--text) }
.introduction-destinations p { font-size:var(--text-sm); margin:0 0 var(--space-5); color:var(--muted); line-height:1.6 }
.introduction-destinations nav { display:flex; flex-direction:column; gap:var(--space-1); margin-top:auto }
.introduction-destinations nav button { display:flex; justify-content:space-between; text-align:left; width:100%; white-space:normal; padding:var(--space-2) 0; border:0; border-radius:0; border-bottom:1px solid var(--line-soft); background:transparent; color:var(--muted); font-size:var(--text-sm) }
.introduction-destinations nav button:last-child { border:0 }
.introduction-destinations nav button:hover { color:var(--brand); background:transparent }
.introduction-destinations nav .icon { width:12px; height:12px; flex-basis:12px }
.introduction-tools { grid-column:span 2; gap:var(--space-5); --card-scene:url('/scenery/merchant.webp?v=225') }
.introduction-tools h3 { margin:0 0 var(--space-2); font-size:var(--text-lg); color:var(--amber) }
.introduction-tools p { font-size:var(--text-sm); color:var(--muted); margin:0 }
.introduction-tools nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-1) var(--space-6); align-items:center; margin-top:auto }
.introduction-tools a { font-size:var(--text-sm); display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:var(--space-2) 0; color:var(--muted) }
.introduction-tools a:hover { color:var(--brand) }
.introduction-tools a .icon { width:12px; height:12px; flex-basis:12px }
.introduction-help { gap:var(--space-5); font-size:var(--text-sm); color:var(--muted); --card-scene:url('/scenery/workshop.webp?v=225') }
.introduction-help>span { font-size:var(--text-lg); font-weight:600; color:var(--text) }
.introduction-help nav { display:flex; flex-direction:column; gap:var(--space-3); margin-top:0 }
body[data-locked="1"][data-workspace="money"] .money-controls,body[data-locked="1"][data-workspace="money"] .money-results-column>:not(#premiumGate),body[data-locked="1"][data-workspace="money"] :is(.method-navigation,#craftNavigation,#gatheringNavigation,.live-controls,#calculatorGuide) { display:none!important }
body[data-locked="1"][data-workspace="money"] #moneyWorkspace { display:block }
.premium-gate { display:block }
.premium-gate[hidden] { display:none }
.premium-gate-card { display:grid; gap:var(--space-4); max-width:760px; margin:auto; padding:var(--space-8); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg) }
.premium-gate-card h2 { margin:0; font-size:var(--text-xl) }
.premium-gate-card p { margin:0; color:var(--muted); font-size:var(--text-sm) }
.premium-gate-card>.eyebrow { color:var(--amber); font-size:var(--text-xs); letter-spacing:.04em }
.premium-gate-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center }
.premium-gate-included { padding-bottom:var(--space-4); border-bottom:1px solid var(--line-soft) }
.premium-gate-included b { color:var(--text) }
/* The two reasons are stated on the panel rather than folded away behind a summary. Someone who has
   just hit a paywall is exactly the person owed the reasoning, and a collapsed block is a way of not
   giving it. */
.premium-gate-reasons { display:grid; gap:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--line-soft); font-size:var(--text-sm) }
.premium-gate-reasons h3 { margin:0 0 var(--space-2); color:var(--text); font-size:var(--text-sm); font-weight:650 }
.premium-gate-reasons p { margin:0 }
/* The buy control is a button for a signed-in visitor and a link for a signed-out one. The id rule
   that used to carry both went with the old gold accent, and button.primary matches the element
   while .button-link.primary matches neither an a.button.primary, so the link would have rendered
   with no styling at all. Both are named here. */
#premiumGateBuy,#premiumGateLink { background:var(--accent); border:1px solid var(--accent); color:var(--bg); box-shadow:none; font-weight:600 }
#premiumGateBuy:hover:not(:disabled),#premiumGateLink:hover { background:var(--text); border-color:var(--text); color:var(--bg) }
#premiumGateBuy:disabled { opacity:.65 }
#adminWorkspace { width:100%; min-width:0 }
#adminFrame { width:100%; min-height:calc(100vh - 64px); border:0; display:block; background:transparent }
body[data-admin-open="true"] main { max-width:none; padding:0 }
body[data-admin-open="true"] main>.app-header,body[data-admin-open="true"] main>.site-footer { display:none }
/* With Administration open, nothing else from the page shows under it (the profile panel used to). */
body[data-admin-open="true"] main>:not(#adminWorkspace) { display:none!important }
body[data-admin-open="true"] #adminFrame { min-height:100vh }
.admin-mobile-toolbar { display:none }
@media(min-width:1824px) { main { padding-left:var(--space-12); padding-right:var(--space-12) } }
@media(max-width:1100px) { main { padding:var(--space-6) } .introduction-hero { padding:var(--space-8); grid-template-columns:minmax(0,1fr) 120px } .introduction-logo { width:120px; height:120px } .introduction-logo img { width:120px; height:120px } .introduction-workspace { gap:var(--space-3) } #introductionWorkspace :is(.introduction-panel,.introduction-tools,.introduction-help) { padding:var(--space-5) } .introduction-tools nav { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:820px) { main { width:100%; margin-left:0; padding:var(--space-5) } .sidebar { transform:translateX(-100%); transition:transform .2s; width:260px } body.nav-open .sidebar,.sidebar.open { transform:translateX(0) } .mobile-only { display:inline-flex!important } .app-header { gap:var(--space-4); padding-bottom:var(--space-5); margin-bottom:var(--space-5) } .app-header h1 { font-size:var(--text-xl) } .page-heading .eyebrow { display:none } .live-controls { gap:var(--space-2) } .introduction-hero { min-height:300px } .introduction-workspace { grid-template-columns:repeat(2,minmax(0,1fr)) } .introduction-destinations .introduction-panel:nth-child(3),.introduction-tools,.introduction-help { grid-column:1/-1 } .site-footer { margin-top:var(--space-8) } .admin-mobile-toolbar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) } }
@media(max-width:600px) { main { padding:var(--space-4) } .app-header { flex-wrap:wrap; gap:var(--space-3) } .page-heading { flex:1 1 100% } .live-controls { width:100%; justify-content:space-between; padding-left:0 } #countdown { flex:1; text-align:left } .introduction-hero { padding:var(--space-6); min-height:0; grid-template-columns:1fr; gap:var(--space-4); position:relative } .introduction-hero h2 { font-size:var(--text-2xl); max-width:8ch; padding-right:0 } .introduction-logo { position:absolute; right:var(--space-5); top:var(--space-5); width:72px; height:72px } .introduction-logo img { width:72px; height:72px } .introduction-lead { margin:var(--space-5) 0; font-size:var(--text-sm) } .introduction-search-form { flex-direction:column } .introduction-search-form button { width:100% } .introduction-workspace { grid-template-columns:1fr } .introduction-tools nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4) } .premium-gate-card { padding:var(--space-6) } .drawer { border-radius:var(--radius) } .site-footer { flex-direction:column; gap:var(--space-3) } }
@media(prefers-reduced-motion:reduce) { .scene-atmosphere { display:none } *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:none!important } }
:root[data-motion="paused"] .introduction-logo img,:root[data-motion="paused"] body[data-workspace="introduction"]::before { animation:none }
@media (prefers-reduced-motion:reduce) { body[data-workspace="introduction"]::before { animation:none } }

.sidebar-discord,.sidebar-support { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-2); width:100%; padding:var(--space-2); text-decoration:none; border:0 }
.sidebar-discord .icon { fill:currentColor; stroke:none; width:16px; height:16px; flex-basis:16px }
.sidebar-support .icon { fill:currentColor; width:16px; height:16px; flex-basis:16px }
.introduction-tools button { justify-content:space-between; border:0; border-radius:0; background:none; padding:var(--space-2) 0; color:var(--muted); font-size:var(--text-sm); font-weight:400; text-align:left; min-height:0; white-space:normal }
.introduction-tools button:hover { color:var(--brand); background:none }
.introduction-tools button .icon { width:12px; height:12px; flex-basis:12px }
.introduction-verify-steps h4 { margin:var(--space-4) 0 var(--space-1); font-size:var(--text-sm); color:var(--text) }.introduction-verify-steps p { margin:0 }


/* Decoration. Images are served from /decor/ because the page's security policy allows images from
   the site itself only. Motion stops with Pause animations and with reduced motion. */
.brand-symbol { position:relative; isolation:isolate }
.brand-logo { animation:atlasFloat 6s ease-in-out infinite }
.brand-symbol::before,.brand-symbol::after { content:""; position:absolute; width:10px; height:10px; background:url("/decor/sparkle.svg") center/contain no-repeat; pointer-events:none; opacity:0; animation:atlasTwinkle 3.2s ease-in-out infinite }
.brand-symbol::before { top:-3px; right:-4px }
.brand-symbol::after { bottom:0; left:-5px; width:7px; height:7px; animation-delay:1.6s }
.atlas-wordmark>span { background:linear-gradient(90deg,#66dce5 0%,#b8f3f7 45%,#66dce5 55%,#4fc3cc 100%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:atlasSheen 7s linear infinite }
@keyframes atlasFloat { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-2px) rotate(-2deg) } }
@keyframes atlasTwinkle { 0%,100% { opacity:0; transform:scale(.4) rotate(0) } 45% { opacity:1; transform:scale(1) rotate(45deg) } 70% { opacity:0; transform:scale(.6) rotate(90deg) } }
@keyframes atlasSheen { from { background-position:220% center } to { background-position:0% center } }
/* The Premium edition lives in premium-overhaul.css, after all workspace styles. */
html[data-motion="paused"] :is(.brand-logo,.atlas-wordmark,.atlas-wordmark>span,.account-label,#account,.premium-name,#pageTitle) { animation:none }
html[data-idle="true"] *,html[data-idle="true"] *::before,html[data-idle="true"] *::after { animation-play-state:paused!important }
html[data-motion="paused"] .brand-symbol::before,html[data-motion="paused"] .brand-symbol::after { animation:none; opacity:0 }
@media (prefers-reduced-motion:reduce) {
 .brand-logo,.brand-symbol::before,.brand-symbol::after,.atlas-wordmark,.atlas-wordmark>span,.account-label,#account,.premium-name,#pageTitle { animation:none }
}

/* Until workspace-ui.js has restored the saved page after a load, the page area stays hidden, so the default
   tool never flashes before the right one (owner, 28 Oct 2026). If scripts fail it shows after 3 seconds. */
:root:not([data-route-ready]) #mainContent { opacity:0; animation:atlas-route-fallback 0s 3s forwards }
/* The sidebar menu waits too, so its groups do not jump open half a second after the page appears. */
:root:not([data-route-ready]) .sidebar-scroll { opacity:0; animation:atlas-route-fallback 0s 3s forwards }
:root[data-route-ready] .sidebar-scroll { transition:opacity .18s ease-out }
@keyframes atlas-route-fallback { to { opacity:1 } }

/* /profile-views.css */
/* Illustrated collections, spatial game views and profile details. */
.game-image { container-type:inline-size }
.game-image > img { image-rendering:auto; opacity:0 }
.game-image > img.art-ready { opacity:1 }
.game-image > img.pixel-art { width:16px; height:16px; max-width:100%; max-height:100%; image-rendering:pixelated }
@container (min-width:32px) { .game-image > img.pixel-art { width:32px; height:32px } }
@container (min-width:48px) { .game-image > img.pixel-art { width:48px; height:48px } }
@container (min-width:64px) { .game-image > img.pixel-art { width:64px; height:64px } }
.profile-character img,.loadout-character img { image-rendering:auto }
/* Equipped gear: square tiles in one line, armour then equipment then the pet. They use the
   site's gear tile (raised surface, hairline border); rarity shows only as a tinted border. */
.overview-outfit { container:outfit / inline-size; width:100%; min-width:0 }
.outfit-layout { flex-wrap:wrap; align-items:flex-start; min-width:0 }
.outfit-armor,.outfit-equipment,.outfit-pet { display:grid; align-content:start; gap:var(--space-2); min-width:0 }
.outfit-group-heading { display:flex; align-items:baseline; gap:var(--space-2); margin:0 }
.outfit-group-heading h4 { margin:0; color:var(--muted); font-size:var(--text-sm); font-weight:500 }
.outfit-armor-rack,.outfit-equipment-slots { flex-wrap:wrap; }
.outfit-piece { --item-color:var(--text); position:relative; place-items:center; margin:0; border:1px solid color-mix(in srgb,var(--item-color) 40%,var(--line)); border-radius:var(--radius-sm); background:var(--raised); cursor:default }
.outfit-piece.common { --item-color:#fff }.outfit-piece.uncommon { --item-color:#55ff55 }.outfit-piece.rare { --item-color:#5555ff }.outfit-piece.epic { --item-color:#aa00aa }.outfit-piece.legendary { --item-color:#ffaa00 }.outfit-piece.mythic { --item-color:#ff55ff }.outfit-piece.divine { --item-color:#55ffff }.outfit-piece:is(.special,.very-special) { --item-color:#ff5555 }
.outfit-art { display:grid; place-items:center; width:48px; height:48px; min-width:0 }
.outfit-art .game-image { width:48px; height:48px; flex:0 0 48px }
.outfit-art > .icon { width:22px; height:22px; color:var(--quiet); opacity:.6 }

.outfit-badge { position:absolute; padding:0 4px; border-radius:4px; background:rgb(0 0 0 / .55); color:#fff; font-size:11px; font-weight:700; line-height:16px }
button.outfit-piece:hover { border-color:var(--item-color); background:var(--panel) }
button.outfit-piece:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.outfit-piece.is-empty { background:var(--input); border-color:var(--line) }
.outfit-piece.is-unavailable { border-style:dashed }
.outfit-unavailable { margin:0; max-width:280px; color:var(--quiet); font-size:var(--text-xs); line-height:1.5 }
@container outfit (max-width:639px) {
 .outfit-layout { gap:var(--space-4) var(--space-6) }
 .outfit-piece { width:56px; height:56px }
 .outfit-art,.outfit-art .game-image { width:40px; height:40px; flex-basis:40px }
}
.loadout-display { display:grid; grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr); gap:var(--space-4); padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); min-width:0 }
.loadout-character { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; align-self:stretch; border-inline:1px solid var(--line-soft); padding:var(--space-4); min-width:0 }
.loadout-character img { width:96px; height:192px; max-width:100%; object-fit:contain; filter:drop-shadow(0 12px 8px #0006) }
.loadout-items { display:contents }
.loadout-group { min-width:0; grid-row:1 }
.loadout-armor { grid-column:1 }.loadout-equipment { grid-column:3 }
.loadout-group h4 { margin:0 0 var(--space-4); color:var(--muted); font-size:var(--text-base); font-weight:500 }
.loadout-slot { margin-top:var(--space-3); min-width:0 }
.gear-slot-name { display:block; font-size:var(--text-xs); color:var(--quiet); margin-bottom:var(--space-1) }
.loadout-slot .profile-item { min-height:var(--item-row-height); padding:var(--space-2); background:var(--raised) }
.empty-equipment { color:var(--quiet); font-size:var(--text-sm); border-style:dashed }
.empty-equipment > .icon { width:24px; height:24px; flex:none }
.gear-collection { container:gear-collection / inline-size; margin-top:var(--space-6) }
.gear-collection:first-child { margin-top:0 }
.gear-collection h3,.toolkit-group h3,.domain-group h3,.garden-layout h3,.mining-resource h3,.shard-catalogue h3 { margin:0 0 var(--space-3); color:var(--text); font-size:var(--text-base); font-weight:600 }
.gear-collection h3 small { margin-left:var(--space-2); color:var(--quiet); font-size:var(--text-sm); font-weight:400 }
.gear-set-grid,.saved-loadout-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); align-items:start; gap:var(--space-3) }
.gear-set,.saved-loadout { min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }
.gear-set header { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); min-width:0 }
.gear-set h4,.saved-loadout h4 { margin:0; color:var(--text); font-size:var(--text-base); font-weight:600; overflow-wrap:anywhere }
.gear-pieces { display:grid; grid-auto-rows:1fr; gap:var(--space-2) }
.gear-piece { display:flex; flex-direction:column; min-width:0 }
.gear-piece .profile-item { flex:1; background:var(--raised) }

.empty-gear-slot { display:flex; flex:1; padding:var(--space-2); border:1px dashed var(--line); border-radius:var(--radius); color:var(--quiet); font-size:var(--text-xs); line-height:1.5 }
.empty-gear-slot .icon { width:20px; height:20px; flex:none }
:is(.saved-loadout,.gear-set) > summary { width:100%; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-2) var(--space-3); cursor:pointer; list-style:none }
:is(.saved-loadout,.gear-set) > summary::-webkit-details-marker { display:none }
:is(.saved-loadout,.gear-set) > summary > .icon { grid-column:2; grid-row:1; color:var(--quiet); transition:transform .15s }
:is(.saved-loadout,.gear-set)[open] > summary > .icon { transform:rotate(90deg) }
.saved-loadout header { display:grid; gap:var(--space-1); min-width:0; font-size:var(--text-base); color:var(--text); overflow-wrap:anywhere }
/* Armor as a 2 by 2 square, then equipment as a 2 by 2 square, then the pet, with a gap between. */
.loadout-preview { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); min-width:0; padding-top:var(--space-1) }
.loadout-preview-group { display:grid; flex:1 1 88px; grid-template-columns:repeat(2,minmax(40px,1fr)); justify-items:center; gap:var(--space-2); min-width:0 }
.gear-set .loadout-preview-group { flex:1; grid-template-columns:repeat(4,minmax(0,1fr)) }
.loadout-preview-empty { box-sizing:border-box; width:40px; height:40px; border:1px dashed var(--line-soft); border-radius:var(--radius-sm) }
.loadout-preview:empty { display:none }
.loadout-preview-icon { display:grid; width:40px; height:40px; min-width:0; cursor:help }
.loadout-preview-pet { flex:0 0 40px }
.loadout-preview-icon:hover .game-image { border-color:var(--quiet); background:var(--raised) }
.loadout-preview-icon .game-image { box-sizing:border-box; width:100%; height:100%; min-width:0; max-width:100%; padding:4px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.loadout-preview-icon .game-image img { width:100%; height:100% }
:is(.saved-loadout,.gear-set)[open] .loadout-preview { display:none }
.saved-loadout-body,.gear-set-body { margin-top:var(--space-3) }
.saved-loadout header small { display:block; margin:0; color:var(--quiet); font-size:var(--text-xs) }
.saved-loadout header small:empty { display:none }
.saved-loadout h4 { margin:var(--space-4) 0 var(--space-2); color:var(--muted) }

.loadout-configuration .profile-metric strong { font-size:var(--text-base) }
.loadout-tuning { grid-column:1 / -1; min-width:0; display:grid; gap:var(--space-1) }
.bonus-label { color:var(--muted); font-size:var(--text-xs); font-weight:500 }
.bonus-note { color:var(--quiet); font-size:var(--text-xs); line-height:1.5; overflow-wrap:anywhere }
.stat-bonuses { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); margin:0; padding:0; list-style:none; font-size:var(--text-sm); line-height:1.5 }
.stat-bonuses li { min-width:0; overflow-wrap:anywhere }
.stat-bonuses b { font-weight:600; font-variant-numeric:tabular-nums }
.skill-rewards { margin:var(--space-2) 0 0; min-width:0 }
.skill-rewards ul { margin:var(--space-1) 0 0; padding-left:var(--space-4); font-size:var(--text-sm); line-height:1.5 }
.item-bonus-summary { margin-bottom:var(--space-4) }
.item-bonus-summary dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4); margin:0; font-size:var(--text-sm) }
.item-bonus-summary dl > div { min-width:0 }
.item-bonus-summary dt { margin-bottom:var(--space-1); font-size:var(--text-xs) }
.item-bonus-summary dd { margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums }
.pet-bonus-detail h3 { margin:0 0 var(--space-3); font-size:var(--text-base); font-weight:600 }
.loadout-pet { display:flex; align-items:center; width:100%; gap:var(--space-2); padding:var(--space-2); margin-top:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); text-align:left; white-space:normal }
.loadout-pet > span:not(.game-image) { min-width:0; flex:1; display:grid; gap:var(--space-1) }
.loadout-pet small { color:var(--quiet); font-size:var(--text-xs) }
.loadout-pet b { color:var(--text); font-size:var(--text-sm); overflow-wrap:anywhere }
.loadout-pet > .icon { width:14px; height:14px; flex:none }
@container gear-collection (max-width:691px) {
 .gear-set-grid,.saved-loadout-grid { row-gap:var(--space-3) }
 .gear-set,.saved-loadout { grid-row:auto; margin-bottom:0 }
 .gear-set,.saved-loadout { display:block }
}
/* Storage keeps the familiar nine-slot inventory structure. */
.storage-browser { min-width:0 }
.storage-groups { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-5) }
.storage-groups button { color:var(--muted); white-space:normal; text-align:left }
.storage-groups button > span { min-width:0; overflow-wrap:anywhere }
.storage-groups button > small { color:var(--quiet); font-size:var(--text-xs); font-variant-numeric:tabular-nums }
.storage-groups button[aria-pressed="true"] { border-color:var(--accent) }
.storage-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-5) }
.storage-toolbar label { display:grid; gap:var(--space-2); flex:1 1 220px; min-width:0; font-size:var(--text-sm); color:var(--muted) }
.storage-toolbar input,.storage-toolbar select { width:100% }
.inventory-content { min-width:0; padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }
.inventory-caption { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-5) }
.inventory-caption strong { color:var(--text); font-size:var(--text-lg) }
.inventory-caption span { color:var(--quiet); font-size:var(--text-xs); line-height:1.6; overflow-wrap:anywhere }
.inventory-grid-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:var(--space-2) }
.profile-item-grid.inventory-slots { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:var(--space-1); min-width:360px; width:min(100%,568px); padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius); background:var(--input) }
/* The track is stated rather than left to auto. .game-image carries container-type:inline-size,
   so its intrinsic width is zero by definition, and an auto track sized from that contribution
   collapses: the art measured 0 wide and the placeholder glyph is hidden once art loads, so every
   occupied slot rendered blank. Other layouts give .game-image an explicit width and never hit it. */
.inventory-slot { aspect-ratio:1; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; position:relative; min-width:0; min-height:0; padding:var(--space-1); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); overflow:hidden }
button.inventory-slot:hover,button.inventory-slot:focus-visible { border-color:var(--accent); background:var(--panel) }
.inventory-slot .game-image { width:100%; height:100%; flex:0 0 100% }
.inventory-slot .slot-count { position:absolute; bottom:var(--space-1); right:var(--space-1); color:var(--text); font-size:var(--text-xs); font-weight:700; line-height:1; text-shadow:1px 1px #000 }
.inventory-slot-name,.inventory-slot-label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%) }
.inventory-hotbar-break { grid-column:1/-1; height:var(--space-2) }
.inventory-slots .profile-empty { grid-column:1/-1 }.profile-item-grid.inventory-toolkit { display:block }
.storage-related { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5) }
.storage-related > span { color:var(--quiet); font-size:var(--text-xs); margin-right:var(--space-2) }.storage-related .icon { width:12px; height:12px }
.toolkit-group { padding-bottom:var(--space-5); margin-bottom:var(--space-5); border-bottom:1px solid var(--line) }.toolkit-group:last-child { margin:0; padding:0; border:0 }
.toolkit-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:var(--space-3) }
.toolkit-slot > small { display:block; margin-bottom:var(--space-1); color:var(--quiet); font-size:var(--text-xs) }.item-source { color:var(--muted) }
/* Completion keeps item identity, action state and price in one illustrated row. */
.completion-section { margin:var(--space-6) 0; min-width:0 }
/* First thing in its panel (Accessories): no gap above the heading. */
.completion-section:first-child { margin-top:0 }
.completion-section .profile-subheading { margin-bottom:var(--space-2) }
.completion-summary { margin:var(--space-4) 0 var(--space-5); padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--raised) }
.completion-summary > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,125px),1fr)); align-items:end; gap:var(--space-4); color:var(--muted); font-size:var(--text-sm) }
.completion-stat { display:flex; flex-direction:column; gap:2px; min-width:0 }
.completion-stat small { font-size:var(--text-xs); color:var(--muted); white-space:nowrap }
.completion-summary b { color:var(--text); font-size:var(--text-lg); font-variant-numeric:tabular-nums; white-space:nowrap }
.completion-summary progress { display:block; width:100%; height:5px; margin-top:var(--space-4); appearance:none; border:0; border-radius:var(--radius-sm); overflow:hidden; background:var(--line); accent-color:var(--accent) }
.completion-summary progress::-webkit-progress-bar { background:var(--line) }.completion-summary progress::-webkit-progress-value { background:var(--accent) }.completion-summary progress::-moz-progress-bar { background:var(--accent) }
.completion-filters { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4) }
.completion-filters label { display:grid; gap:var(--space-2); flex:1 1 140px; min-width:0; color:var(--muted); font-size:var(--text-sm) }.completion-filters label.completion-search { flex:2 1 240px }.completion-filters .picker-container { width:100% }
.completion-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) }
.completion-row { display:grid; grid-template-columns:var(--item-art-size) minmax(0,1fr) auto 12px; align-items:center; gap:var(--space-3); width:100%; min-width:0; min-height:72px; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); text-align:left; white-space:normal; box-shadow:none }
.completion-row:hover { border-color:var(--accent); background:var(--raised) }
/* How to get an accessory, shown while its row is hovered or focused. The dialog repeats it with a wiki link. */
.completion-row.has-obtain { position:relative }
.completion-side small,.completion-side .completion-cost { white-space:nowrap }
.completion-obtain { display:none; position:absolute; left:var(--space-3); right:var(--space-3); top:calc(100% + 6px); z-index:30; flex-direction:column; gap:var(--space-1); padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--raised); box-shadow:0 12px 28px rgb(0 0 0 / .45); color:var(--text); font-size:var(--text-sm); line-height:1.5; text-align:left; pointer-events:none }
.completion-obtain b { font-size:var(--text-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.completion-obtain small { color:var(--muted) }
.completion-row.has-obtain:hover,.completion-row.has-obtain:focus-visible { z-index:31 }
@media (hover:hover) { .completion-row.has-obtain:hover > .completion-obtain { display:flex } }
.completion-row.has-obtain:focus-visible > .completion-obtain { display:flex }
.completion-obtain-list { margin:0 0 var(--space-3); padding-left:1.2em; line-height:1.6 }.completion-description { min-width:0 }
.sack-contents { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); column-gap:var(--space-6); font-size:var(--text-sm) }
.completion-description b { display:block; color:var(--text); font-size:var(--text-sm); font-weight:600; line-height:1.45; overflow-wrap:anywhere }
.completion-description small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs); font-weight:400; line-height:1.5; overflow-wrap:anywhere }
.completion-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); max-width:120px; text-align:right; min-width:0 }
.completion-side small,.completion-status { color:var(--muted); font-size:var(--text-xs); line-height:1.5; font-weight:400; overflow-wrap:anywhere }
.completion-cost { color:var(--text); font-size:var(--text-sm); overflow-wrap:anywhere; font-variant-numeric:tabular-nums }
.completion-status:is(.owned,.covered,.ready,.stored) { color:var(--green) }.completion-status:is(.partial,.upgrade) { color:var(--amber) }.completion-status.unknown { color:var(--quiet) }
.completion-open { color:var(--quiet) }.completion-open .icon { width:12px; height:12px }
.completion-detail-hero { display:flex; align-items:center; gap:var(--space-4); margin:var(--space-3) 0 var(--space-5) }.completion-detail-hero > .game-image { width:64px; height:64px; flex:0 0 64px }.completion-detail-hero > div { min-width:0 }.completion-detail-hero p { margin:var(--space-1) 0; line-height:1.6 }
.completion-variants { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3) }
.completion-variants .completion-variant { display:flex; align-items:center; gap:var(--space-2); min-width:0; max-width:100%; padding:var(--space-2) var(--space-3); text-align:left; white-space:normal }
.completion-variant > .game-image { width:32px; height:32px; flex:0 0 32px }
.completion-variant > span { min-width:0; overflow-wrap:anywhere }
.completion-variant small { display:block; color:var(--muted); font-weight:400 }
.completion-variant-label { display:grid; gap:var(--space-2); margin-bottom:var(--space-3) }
.completion-variant-label select { width:100%; min-width:0 }
.completion-chain { list-style:none; padding:0; margin:var(--space-4) 0 var(--space-5); border-left:2px solid var(--line) }
.completion-chain li { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); color:var(--muted); font-size:var(--text-sm); line-height:1.5 }.completion-chain li.current-goal { border-left:2px solid var(--accent); margin-left:-2px; background:var(--raised); color:var(--text) }.completion-chain small { color:var(--quiet); text-align:right; font-size:var(--text-xs) }
.completion-pieces { display:grid; gap:var(--space-2); margin-bottom:var(--space-4) }.completion-piece { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--raised) }.completion-piece > div { min-width:0; flex:1 }.completion-piece b { color:var(--text); font-size:var(--text-sm); overflow-wrap:anywhere }.completion-piece small { display:block; color:var(--quiet); font-size:var(--text-xs); margin-top:var(--space-1); line-height:1.5 }.completion-piece button { flex:0 0 auto; max-width:150px; white-space:normal; font-size:var(--text-xs) }
.profile-checklist-count,.profile-checklist-status { color:var(--quiet); font-size:var(--text-xs); line-height:1.6; margin:var(--space-3) 0 }
.profile-minion-next,.profile-collection-next { display:block; margin-top:var(--space-3); font-size:var(--text-xs); font-weight:400; line-height:1.6; color:var(--muted); overflow-wrap:anywhere }.profile-minion-next > b,.profile-minion-next > span { display:block; margin-bottom:var(--space-1) }.profile-minion-next > button { margin-top:var(--space-2); white-space:normal; text-align:left; font-size:var(--text-xs) }
.profile-tier-strip button.profile-tier-button { display:grid; place-items:center; padding:0; min-width:32px; width:32px; height:32px; min-height:32px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); color:var(--quiet); font-size:var(--text-xs) }.profile-tier-strip button.profile-tier-button.crafted { color:var(--green); border-color:var(--green); background:var(--raised) }.profile-tier-strip button.profile-tier-button[data-crafted="false"] { color:var(--muted) }.profile-tier-strip button.profile-tier-button:hover { border-color:var(--accent); color:var(--text) }
.profile-collection-summary { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4) }.completion-ring { flex:0 0 36px; transform:rotate(-90deg) }.completion-ring-track { fill:none; stroke:var(--line); stroke-width:3 }.completion-ring-fill { fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round }
/* Domain levels, resources and records use different visual weights. */
.domain-summary { margin-bottom:var(--space-6); padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }.domain-summary:empty { display:none }
.domain-summary .profile-mini-metrics { margin:var(--space-5) 0 0; padding-top:var(--space-5); border-top:1px solid var(--line); gap:var(--space-5) }.domain-summary .profile-mini-metrics:first-child { margin:0; padding:0; border:0 }
.progression-level { display:flex; justify-content:space-between; align-items:center; gap:var(--space-6); min-width:0 }.progression-level > div:first-child { flex:1; min-width:0 }.progression-level > div:first-child > span { display:block; color:var(--muted); font-size:var(--text-sm) }
.progression-level strong { display:block; margin-top:var(--space-2); color:var(--text); font-size:var(--text-2xl); letter-spacing:-.03em; line-height:1.2; overflow-wrap:anywhere }.progression-level strong small { color:var(--quiet); font-size:var(--text-base); font-weight:400 }
.progression-xp { width:42%; max-width:480px; min-width:0; font-variant-numeric:tabular-nums }.progression-xp > span { color:var(--text); font-size:var(--text-sm) }.progression-xp small { display:block; color:var(--quiet); font-size:var(--text-xs); margin-top:var(--space-2); line-height:1.5 }.progression-xp > .profile-progress { margin-top:var(--space-3) }
.domain-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); align-items:start }.domain-group { min-width:0; border-top:1px solid var(--line); padding-top:var(--space-5) }.domain-feature { grid-column:1/-1 }.domain-group .profile-record:last-child { border-bottom:0 }.domain-more > summary { cursor:pointer; color:var(--muted); font-size:var(--text-base) }.domain-more[open] > summary { margin-bottom:var(--space-4) }
.domain-tree { padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }
.record-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:0 0 var(--space-3); margin:0; list-style:none }.record-chips li { padding:var(--space-1) var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); color:var(--muted); font-size:var(--text-xs); overflow-wrap:anywhere }
.profile-data-table-wrap { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain }.profile-data-table { width:100%; border-collapse:collapse; table-layout:auto; font-size:var(--text-sm); font-variant-numeric:tabular-nums }
.profile-data-table th,.profile-data-table td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line); text-align:right; color:var(--text); font-weight:400; white-space:nowrap }.profile-data-table th:first-child { text-align:left; white-space:normal; color:var(--muted) }.profile-data-table thead th { background:var(--raised); color:var(--muted); font-size:var(--text-xs); font-weight:500 }.profile-data-table tbody tr:hover { background:var(--panel) }.profile-data-table tr:last-child > * { border-bottom:0 }
.progression-checklist-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-3); color:var(--quiet); font-size:var(--text-sm) }.progression-checklist-controls label { display:flex; align-items:center; gap:var(--space-2) }
.progression-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-6) }.progression-checks > div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--line); font-size:var(--text-sm); color:var(--muted) }.progression-checks b { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }.progression-checks b.owned { color:var(--green) }
.mining-resources { display:grid; gap:var(--space-5); margin-bottom:var(--space-8) }.mining-resource { min-width:0; padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }.mining-forge { grid-column:1/-1 }
.powder-list { list-style:none; padding:0; margin:0 }.powder-list li { padding:var(--space-4) 0; border-bottom:1px solid var(--line) }.powder-list li:first-child { padding-top:0 }.powder-list li:last-child { border:0; padding-bottom:0 }.powder-name { display:block; margin-bottom:var(--space-2); font-weight:600; font-size:var(--text-base) }.powder-amounts { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5) }.powder-amounts > div { display:grid; gap:var(--space-1) }.powder-amounts span { color:var(--quiet); font-size:var(--text-xs) }.powder-amounts b { font-size:var(--text-lg); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.crystal-grid { display:grid; gap:var(--space-3) }.crystal-card { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-2); text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--input); min-width:0 }.crystal-card.found { background:var(--raised); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) }.crystal-card .game-image { width:56px; height:56px; flex:0 0 56px }.crystal-card b { font-size:var(--text-sm); overflow-wrap:anywhere }.crystal-card small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs) }
.forge-queue { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--space-3) }.forge-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); background:var(--raised); border-radius:var(--radius-sm); min-width:0 }.forge-item > span:last-child { min-width:0 }.forge-item b { display:block; font-size:var(--text-sm); overflow-wrap:anywhere }.forge-item small { display:block; margin-top:var(--space-1); font-size:var(--text-xs); color:var(--quiet); line-height:1.5 }
/* Perks and Garden plots remain spatial game views. */
.perk-tree-legend { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin:0 0 var(--space-5); color:var(--muted); font-size:var(--text-xs) }.perk-tree-legend > span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:var(--space-2); border:1px solid var(--quiet); border-radius:2px }.perk-tree-legend > .unlocked::before { border-color:var(--green); background:var(--green) }.perk-tree-legend small { margin-left:auto; color:var(--quiet); font-size:var(--text-xs) }
.perk-tree-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:var(--space-2) }.perk-tree { min-width:960px }.perk-tier { display:grid; grid-template-columns:64px minmax(0,1fr); min-height:128px; align-items:stretch }.perk-tier-label { position:relative; color:var(--quiet); font-size:var(--text-xs); padding-top:var(--space-10) }.perk-tier:not(:last-child) .perk-tier-label::after { content:""; position:absolute; left:var(--space-5); top:64px; height:calc(100% - 24px); width:1px; background:var(--line) }.perk-tier-nodes { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-2); padding:var(--space-2) 0; align-items:start }
.perk-node { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); width:100%; min-width:0; min-height:116px; padding:var(--space-3) var(--space-2); border:1px solid var(--line); border-radius:var(--radius); background:var(--input); text-align:center; white-space:normal; color:var(--text); cursor:pointer }.perk-node.unlocked { background:var(--raised); border-color:color-mix(in srgb,var(--green) 60%,var(--line)) }.perk-node-symbol { display:grid; place-items:center; width:24px; height:24px; color:var(--quiet) }.perk-node.unlocked .perk-node-symbol { color:var(--green) }.perk-node-symbol .icon { width:20px; height:20px }.perk-node b { color:var(--text); font-size:var(--text-xs); line-height:1.4; font-weight:500; overflow-wrap:anywhere }.perk-node small { margin-top:auto; color:var(--quiet); font-size:var(--text-xs) }.perk-node:hover { border-color:var(--accent) }.perk-other { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--space-3); margin:var(--space-4) 0 }
.garden-section { margin-bottom:var(--space-8); padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }.garden-layout { padding:var(--space-6) 0; margin-bottom:var(--space-5) }.garden-plot-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-2); width:100%; max-width:900px; margin:auto }.garden-plot { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--space-2); min-width:0; min-height:104px; padding:var(--space-3) var(--space-2); border:1px dashed var(--line); border-radius:var(--radius-sm); background:var(--input); text-align:center }.garden-plot b { color:var(--muted); font-size:var(--text-sm); font-weight:500; overflow-wrap:anywhere }.garden-plot small { color:var(--quiet); font-size:var(--text-xs); overflow-wrap:anywhere }.garden-plot.unlocked { border-style:solid; background:var(--raised) }.garden-plot.unlocked b { color:var(--text) }.garden-plot.barn { border:1px solid var(--accent); background:var(--raised); color:var(--accent); font-size:var(--text-base) }
.bestiary-categories { display:grid; align-items:start }.bestiary-category { min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }.bestiary-category > header { width:100%; min-width:0 }.bestiary-category > header b { flex:1; min-width:0; font-size:var(--text-base); overflow-wrap:anywhere }.bestiary-category > header small { color:var(--quiet); font-size:var(--text-xs) }.bestiary-category > header .icon { width:18px; height:18px; flex:none; color:var(--muted) }
.bestiary-creature { justify-content:space-between; border-top:1px solid var(--line); font-size:var(--text-sm) }.bestiary-creature > span { min-width:0; color:var(--muted); overflow-wrap:anywhere }.bestiary-creature b { text-align:right; font-size:var(--text-sm); font-variant-numeric:tabular-nums }.bestiary-creature small { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.sea-creature-records,.shard-catalogue { margin-top:var(--space-8) }.trophy-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)); gap:var(--space-2) }.trophy-species { display:grid; align-content:start; justify-items:center; gap:var(--space-2); min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); text-align:center }.trophy-species .game-image { width:var(--item-art-size); height:var(--item-art-size); flex:0 0 var(--item-art-size); filter:drop-shadow(0 4px 3px #0004) }.trophy-species b { font-size:var(--text-sm); color:var(--text); line-height:1.4; overflow-wrap:anywhere }.trophy-species small { font-size:var(--text-xs); color:var(--quiet); line-height:1.6 }.trophy-species.no-art { justify-items:start; text-align:left; gap:var(--space-2); background:var(--raised) }.trophy-species.sc-uncaught { background:var(--input) }
.sc-rarity.sc-uncommon { color:#85d6a9 }.sc-rarity.sc-rare { color:#96b6ff }.sc-rarity.sc-epic { color:#c699ef }.sc-rarity.sc-legendary { color:#edc082 }.sc-rarity.sc-mythic { color:#ee9ccc }
.medal-gallery,.profile-domain-classic .trophy-gallery.medal-gallery { grid-template-columns:repeat(3,minmax(0,1fr)) }.medal-gallery .trophy-species b { font-size:var(--text-lg) }.medal-bronze b { color:#d7a47c }.medal-silver b { color:#c6d5e1 }.medal-gold b { color:#edc082 }
.whisper-presets { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:var(--space-3) }.whisper-presets > article { padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }.whisper-presets h4 { margin:0 0 var(--space-3); color:var(--text); font-size:var(--text-sm) }.whisper-presets article > div { display:flex; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-2); color:var(--muted); font-size:var(--text-xs) }.whisper-presets b { color:var(--text); font-variant-numeric:tabular-nums }
/* The total precedes the item valuation detail in every viewport. */
.networth-overview { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(0,2fr); gap:var(--space-6); margin-bottom:var(--space-6); padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }.networth-total { display:flex; flex-direction:column; justify-content:center; gap:var(--space-2); padding-right:var(--space-6); border-right:1px solid var(--line); min-width:0 }.networth-total > span { font-size:var(--text-sm); color:var(--muted) }.networth-total strong { font-size:40px; letter-spacing:-.04em; line-height:1.2; color:var(--text); overflow-wrap:anywhere; font-variant-numeric:tabular-nums }.networth-total small { font-size:var(--text-xs); color:var(--quiet); line-height:1.5 }
.networth-measures { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--space-5); align-content:center }.networth-stat { display:flex; flex-direction:column; gap:var(--space-2); min-width:0 }.networth-stat span { font-size:var(--text-xs); color:var(--muted) }.networth-stat b { font-size:var(--text-lg); color:var(--text); overflow-wrap:anywhere; font-variant-numeric:tabular-nums }.networth-breakdown-bar { display:block; grid-column:1/-1; width:100%; border-radius:var(--radius-sm); overflow:hidden; background:var(--input) }
.networth-swatch-0{--nw-color:#b4a1ff}.networth-swatch-1{--nw-color:#69dfb5}.networth-swatch-2{--nw-color:#98bcff}.networth-swatch-3{--nw-color:#eec087}.networth-swatch-4{--nw-color:#ffabb7}.networth-swatch-5{--nw-color:#7bdbcc}.networth-swatch-6{--nw-color:#eda6c7}.networth-swatch-other{--nw-color:#6b7088}.networth-breakdown-bar rect { fill:var(--nw-color) }
.networth-browser { --nw-value:#a4bced; display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:var(--space-5); align-items:start }.profile-networth-list { display:grid; gap:var(--space-2); position:sticky; top:var(--space-4) }.networth-category { width:100%; min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--text); text-align:left; cursor:pointer; font:inherit }.networth-category:hover { border-color:var(--line-strong,var(--muted)) }.networth-category[aria-pressed="true"] { border-color:var(--nw-color,var(--accent)); box-shadow:inset 3px 0 0 var(--nw-color,var(--accent)); background:var(--raised) }.networth-category > span:nth-child(2) { min-width:0; display:grid; gap:2px }.networth-category b { font-size:var(--text-sm); overflow-wrap:anywhere; color:var(--text) }.networth-category small { color:var(--quiet); font-size:var(--text-xs) }.networth-category strong { color:var(--nw-value); font-size:var(--text-base); font-variant-numeric:tabular-nums }.networth-panel { min-width:0; padding:0 var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }.networth-panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line-soft); margin-bottom:var(--space-4) }.networth-panel-head b { font-size:var(--text-lg); color:var(--text) }.networth-panel-head strong { color:var(--nw-value); font-size:var(--text-lg); font-variant-numeric:tabular-nums }
.networth-category-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--radius); background:var(--raised); color:var(--nw-color) }.networth-category-icon .icon { width:18px; height:18px }
.networth-upgrades { margin:0 var(--space-3) var(--space-3); border-top:1px solid var(--line); padding-top:var(--space-2) }.networth-upgrades > div { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; color:var(--muted); font-size:var(--text-xs); line-height:1.5 }.networth-upgrades b { color:var(--text); text-align:right; font-variant-numeric:tabular-nums }
/* Donations are an ordered collection, with one title per single item. */
.museum-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; padding:var(--space-4); margin-bottom:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }.museum-heading .profile-mini-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); margin:0 }.museum-gallery { columns:256px 4; column-gap:var(--space-3); margin-top:var(--space-5) }.museum-gallery > .museum-card { break-inside:avoid; margin-bottom:var(--space-3) }.museum-card { min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }.museum-card > header { display:grid; grid-template-columns:var(--item-art-size) minmax(0,1fr); gap:var(--space-2); align-items:center }.museum-card > header > .game-image { width:var(--item-art-size); height:var(--item-art-size); grid-row:1/3; filter:drop-shadow(0 4px 3px #0004) }.museum-card header > span:not(.game-image):not(.completion-status) { display:grid; gap:var(--space-1); min-width:0 }.museum-card header b { color:var(--text); font-size:var(--text-sm); line-height:1.45; overflow-wrap:anywhere }.museum-card header small { color:var(--quiet); font-size:var(--text-xs); text-transform:capitalize }.museum-card header .completion-status { grid-column:2; justify-self:start }
.museum-item-name { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-width:0; width:100%; padding:0; border:0; background:transparent; text-align:left; white-space:normal }.museum-item-name > .icon { width:12px; height:12px; flex:none; color:var(--quiet) }.museum-single-name { display:block; margin:var(--space-3) 0 0; color:var(--quiet); font-size:var(--text-xs); line-height:1.5; overflow-wrap:anywhere }.museum-pieces { margin-top:var(--space-4); padding-top:var(--space-2); border-top:1px solid var(--line) }.museum-pieces > button { display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:48px; padding:var(--space-2) 0; border:0; background:transparent; text-align:left; white-space:normal; color:var(--muted); font-size:var(--text-sm) }.museum-pieces > button > span:not(.game-image) { flex:1; min-width:0; overflow-wrap:anywhere }.museum-pieces .game-image { width:32px; height:32px; flex:0 0 32px }.museum-pieces > button > .icon { width:12px; height:12px; flex:none }
.slayer-card-grid { display:grid; gap:var(--space-4); align-items:start }.slayer-card > summary .skill-heading { grid-column:2/-1 }.slayer-card > summary .profile-progress { grid-column:2/-1 }.slayer-xp { grid-column:2; color:var(--quiet); font-size:var(--text-xs) }.slayer-card > summary .profile-expand-hint { grid-column:3 }.slayer-detail { padding-top:var(--space-5); margin-top:var(--space-4); border-top:1px solid var(--line) }.slayer-tiers th,.slayer-tiers td { padding:var(--space-3) var(--space-2) }
/* Lore keeps source formatting and rarity identity. */
.minecraft-item-name { display:inline; color:inherit; font:inherit; letter-spacing:inherit }
.minecraft-item-name .item-stars { display:inline; font:inherit; white-space:nowrap }
.minecraft-item-name .item-stars-normal { color:#ffaa00 }
.minecraft-item-name .item-stars-master { color:#ff5555 }
.mc-star { display:inline-block; position:relative; width:.82em; height:.82em; margin:0 .04em; vertical-align:-.06em }
.mc-star svg { display:block; width:100%; height:100% }
.mc-star-text { position:absolute; inset:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.minecraft-item-card { background:var(--input); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-4); margin-bottom:var(--space-4) }.minecraft-item-card > header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4) }.minecraft-item-card > header > div { display:grid; gap:var(--space-2); min-width:0 }.minecraft-item-card > header b { color:var(--rarity); font-size:var(--text-lg); line-height:1.4; overflow-wrap:anywhere }.minecraft-item-card > header small { color:var(--quiet); font-size:var(--text-xs); text-transform:capitalize }.minecraft-item-card > header .game-image { width:48px; height:48px; flex:0 0 48px }.minecraft-item-card .minecraft-lore { margin:0; padding:0; border:0; border-radius:0; background:transparent; font-family:ui-monospace,Consolas,monospace }.minecraft-lore p { margin:2px 0; font-size:var(--text-xs); line-height:1.65; text-shadow:1px 1px #0007; overflow-wrap:anywhere }.minecraft-lore p.lore-gap { min-height:var(--space-3) }
.mc-0{color:#666}.mc-1{color:#5555bb}.mc-2{color:#00aa00}.mc-3{color:#00aaaa}.mc-4{color:#bb5555}.mc-5{color:#aa00aa}.mc-6{color:#ffaa00}.mc-7{color:#aaaaaa}.mc-8{color:#777}.mc-9{color:#5555ff}.mc-a{color:#55ff55}.mc-b{color:#55ffff}.mc-c{color:#ff5555}.mc-d{color:#ff55ff}.mc-e{color:#ffff55}.mc-f{color:#fff}.mc-l{font-weight:700}.mc-m{text-decoration:line-through}.mc-n{text-decoration:underline}.mc-o{font-style:italic}
#profileItemBody > .game-image { display:block; width:48px; height:48px; margin-bottom:var(--space-4) }
.skill-menu-icon { display:block; width:32px; height:32px; background-image:url("/scenery/skill-menu.webp"); background-size:864px 864px; background-repeat:no-repeat; image-rendering:auto; flex:0 0 32px }
.skill-menu-farming{background-position:-544px -448px}.skill-menu-mining{background-position:-544px -128px}.skill-menu-combat{background-position:-32px -512px}.skill-menu-foraging{background-position:-224px -800px}.skill-menu-fishing{background-position:-608px -128px}.skill-menu-enchanting{background-position:-64px -96px}.skill-menu-alchemy{background-position:-672px -672px}.skill-menu-carpentry{background-position:-64px -800px}.skill-menu-runecrafting{background-position:-640px -672px}.skill-menu-social{background-position:-736px -416px}.skill-menu-taming{background-position:-704px -256px}.skill-menu-hunting{background-position:-768px -256px}
.profile-progress { position:relative; display:block; width:100%; height:5px; overflow:hidden; border-radius:var(--radius-sm); background:var(--line) }.profile-progress > .profile-progress-value { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }.profile-progress-fill { position:absolute; inset:0 auto auto 0; display:block; height:5px; max-width:none; overflow:hidden; border-radius:inherit; pointer-events:none; fill:var(--skill,var(--accent)) }.profile-progress-highlight { display:none }.profile-progress.is-unavailable { background:transparent; border-radius:0 }.profile-progress.is-unavailable::after { content:""; position:absolute; inset:2px 0 auto; border-top:1px dashed var(--quiet) }
.profile-subnavigation { display:flex; flex-wrap:wrap; padding-bottom:var(--space-2); margin-bottom:var(--space-4); }.profile-subnavigation button { min-height:32px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-size:var(--text-sm) }.profile-subnavigation button[aria-pressed="true"] { color:var(--text); border-bottom-color:var(--accent) }
.networth-category:focus-visible,.perk-node:focus-visible,.completion-row:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.profile-shell [hidden],.completion-section [hidden],.bestiary-browser [hidden] { display:none!important }
@media(max-width:1200px) { .completion-list { grid-template-columns:minmax(0,1fr) } }
@media(max-width:960px) {
 .loadout-display { grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr); gap:var(--space-4); padding:var(--space-4) }.loadout-character { padding:var(--space-2) }.loadout-character img { height:192px }.loadout-slot .profile-item { flex-wrap:wrap }
 .networth-overview { grid-template-columns:minmax(0,1fr) }.networth-total { padding:0 0 var(--space-5); border-right:0; border-bottom:1px solid var(--line) }.mining-forge { grid-column:auto }
}
@media(max-width:700px) {
 .loadout-display { grid-template-columns:repeat(2,minmax(0,1fr)); padding:var(--space-4); gap:var(--space-5) }.loadout-character { grid-column:1/-1; grid-row:1; padding:0 0 var(--space-5); border:0; border-bottom:1px solid var(--line) }.loadout-character img { width:96px; height:192px }.loadout-group { grid-row:2 }.loadout-equipment { grid-column:2 }
 .domain-groups { grid-template-columns:minmax(0,1fr) }.domain-summary,.domain-tree,.garden-section { padding:var(--space-5) }.progression-level { gap:var(--space-4) }.progression-level strong { font-size:var(--text-xl) }.progression-checks { grid-template-columns:minmax(0,1fr) }.inventory-content { padding:var(--space-4) }.garden-plot { min-height:80px; padding:var(--space-2) var(--space-1); gap:var(--space-1) }.garden-plot b,.garden-plot small { font-size:var(--text-xs) }.garden-plot-grid { gap:var(--space-1) }.museum-heading .profile-mini-metrics { gap:var(--space-5) }
}
@media(max-width:480px) {
.gear-piece .profile-item,.empty-gear-slot { min-height:var(--item-row-height) }.loadout-slot .profile-item { padding:var(--space-2) }.loadout-display { gap:var(--space-3) }
 .completion-row { grid-template-columns:40px minmax(0,1fr) 12px; padding:var(--space-3); gap:var(--space-2) var(--space-3) }.completion-row > .game-image { width:40px; height:40px; grid-row:1/3 }.completion-description { grid-column:2 }.completion-side { grid-column:2; align-items:flex-start; text-align:left; flex-direction:row; flex-wrap:wrap; max-width:none; gap:var(--space-1) var(--space-2) }.completion-open { grid-column:3; grid-row:1/3 }.completion-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }.completion-filters label.completion-search { grid-column:1/-1 }.completion-filters label:has([data-completion-view]) { grid-column:1/-1 } .completion-filters>label:nth-child(3 of label):nth-last-child(2 of label) { grid-column:1/-1 }.completion-piece { flex-wrap:wrap }.completion-piece button { margin-left:60px }.completion-chain li { flex-direction:column; gap:var(--space-1) }.completion-chain small { text-align:left }
 .progression-level { flex-direction:column; align-items:stretch }.progression-xp { width:100%; max-width:none }.domain-summary,.domain-tree,.garden-section,.mining-resource,.museum-heading { padding:var(--space-4) }.garden-plot { min-height:72px; border-radius:3px }.garden-plot-grid { gap:2px }.trophy-gallery { grid-template-columns:repeat(2,minmax(0,1fr)) }.trophy-species { padding:var(--space-3) }
 .networth-overview { padding:var(--space-4) }.networth-total strong { font-size:var(--text-2xl) }.networth-measures { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4) } .networth-browser { grid-template-columns:minmax(0,1fr) }.profile-networth-list { position:static }.networth-panel { padding:0 var(--space-3) }
 .museum-card { padding:var(--space-3) }.bestiary-creatures { padding-inline:var(--space-4) }.bestiary-creature { flex-wrap:wrap; }.bestiary-creature b { margin-left:auto }.profile-data-table th,.profile-data-table td { padding:var(--space-3) }
}

/* Networth: colour marks the category chip and the bar; titles stay readable text past the seventh. */

/* Crystals: found ones read as found at a glance. */
.crystal-card:not(.found) { opacity:.5 }
.crystal-card.found small { color:var(--green,#69dfb5) }

/* Empty loadouts are one line of names under the grid, so they never stretch the rows of real loadouts. */
.loadout-empty-list { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-4); font-size:var(--text-sm) }
.loadout-empty-list > span { color:var(--quiet); margin-right:var(--space-1) }
.loadout-empty-list > b { padding:2px var(--space-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--panel); color:var(--muted); font-weight:500 }

/* In-game tooltip. Monocraft (SIL OFL 1.1) stands in for the Minecraft font. The box copies the game's:
   near-black purple fill, a purple gradient inner border, and a hard drop shadow under every line. */
@font-face { font-family:"Monocraft"; src:url("/fonts/monocraft.woff2") format("woff2"); font-display:swap }
.mc-tooltip { position:fixed; z-index:2000; left:0; top:0; max-width:min(460px,calc(100vw - 16px)); padding:7px 9px 8px; background:rgba(16,0,16,.95); border:1px solid #100010; color:#aaaaaa; font-family:"Monocraft",ui-monospace,monospace; font-size:14px; line-height:1.5; font-variant-ligatures:none; letter-spacing:0; text-shadow:2px 2px 0 rgba(0,0,0,.6); white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; box-shadow:0 8px 24px #0008 }
.mc-tooltip::before { content:""; position:absolute; inset:1px; border:2px solid transparent; border-image:linear-gradient(180deg,#5000ff,#28007f) 1; opacity:.5; pointer-events:none }
.mc-tooltip[hidden] { display:none }
.mc-tooltip { width:max-content; max-height:calc(100dvh - 2 * var(--space-2)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin }
.mc-tooltip.is-pinned { pointer-events:auto; touch-action:pan-y }
.mc-tip-actions { display:none }
.mc-tooltip.is-pinned .mc-tip-actions { position:sticky; top:0; z-index:1; display:flex; justify-content:flex-end; margin-bottom:var(--space-2); background:#100010 }
.mc-tip-actions button { min-height:var(--space-10); padding:var(--space-2) var(--space-3); font:var(--text-xs)/1.4 var(--font-ui,system-ui); color:var(--text); text-shadow:none }
.mc-tooltip p { margin:0; min-height:1.5em }
.mc-tooltip-name { margin-bottom:4px }
.mc-tooltip .mc-star { width:.9em; height:.9em }
.mc-tooltip .minecraft-item-name { font:inherit }
[data-profile-item],[data-profile-pet],[data-profile-shard] { cursor:default }
.mc-k { font-variant-numeric:tabular-nums }
[data-mc-tip-json],[data-mc-tip-json] > summary { cursor:default }

/* Gear tiles, 0.7.8: art on top and the name centred beneath, so long names with stars wrap under the
   icon instead of squeezing beside it. Slot names are gone from above each tile: the art says which
   slot it is, the tooltip says everything else, and an empty slot names itself. */
.gear-pieces { grid-template-columns:repeat(2,minmax(0,1fr)) }
.gear-slot-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.gear-piece .profile-item { flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; gap:6px; min-height:104px; padding:var(--space-3) var(--space-2) }
.gear-piece .profile-item .game-image { width:var(--item-art-size); height:var(--item-art-size); min-width:var(--item-art-size); max-width:var(--item-art-size); flex:0 0 var(--item-art-size) }
.gear-piece .profile-item > span { display:block; min-width:0; width:100% }
.gear-piece .profile-item b { display:block; font-size:var(--text-xs); line-height:1.4; overflow-wrap:anywhere }
.gear-piece .profile-item small { font-size:var(--text-xs) }
.empty-gear-slot { flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:104px; gap:6px }
.empty-gear-slot span { display:grid; gap:2px; color:var(--quiet) }
.empty-gear-slot small { font-size:var(--text-xs); opacity:.8 }
/* Loadout settings: one small box, four rows, label left and value right in the same style. */
.loadout-configuration { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; margin-top:var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.loadout-setting { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); font-size:var(--text-sm); line-height:20px; min-width:0 }
.loadout-setting > span { flex:none; color:var(--quiet) }
.loadout-setting > b { min-width:0; color:var(--text); font-weight:600; text-align:right; overflow-wrap:anywhere }
.loadout-setting.is-unset > b { color:var(--quiet); font-weight:500 }
.loadout-setting .bonus-note { color:var(--quiet); font-weight:400 }

/* Spacing pass, 0.7.11. Boxes that sit side by side must not leave one of them half empty. */
/* Powder is three short records: one row across the top, so it no longer stands beside a much taller crystal grid. */
.mining-resources { grid-template-columns:minmax(0,1fr) }
.powder-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5) }
.powder-list li,.powder-list li:first-child,.powder-list li:last-child { padding:0; border:0 }
.powder-list li + li { padding-left:var(--space-5); border-left:1px solid var(--line) }
/* Wide enough that no crystal name wraps, so every card in a row is the same height: 6 across on desktop. */
.crystal-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
.crystal-card { justify-content:center }
/* A folded "More records" bar takes the full width instead of sitting beside a tall section. */
.domain-groups > .domain-more { grid-column:1/-1 }
/* Shard cards: owned and level sit on one bottom line in every card of a row. */
@media(max-width:640px) {
 .powder-list { grid-template-columns:minmax(0,1fr) }
 .powder-list li + li { padding:var(--space-4) 0 0; border-left:0; border-top:1px solid var(--line) }
}
/* Networth items: every tile in a group is the same height, and hovering shows the item like everywhere else. */
/* Bestiary families as tiles: head, name and tier, kills, and a bar for overall progress to the cap. */
.bestiary-creatures { display:grid; gap:var(--space-2); }
.bestiary-creature { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:var(--space-1) var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); cursor:default }
.bestiary-creature[hidden] { display:none }
.bestiary-creature:hover { background:var(--panel); border-color:var(--quiet) }
.bestiary-creature:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.bestiary-creature.is-maxed { border-color:color-mix(in srgb,#edc082 45%,var(--line)) }
.bestiary-art { display:grid; place-items:center; width:40px; height:40px; grid-row:1 / span 2 }
.bestiary-art .game-image { width:40px; height:40px }
.bestiary-art > .icon { width:20px; height:20px; color:var(--quiet) }
.bestiary-copy { display:grid; gap:2px; min-width:0 }
.bestiary-copy > span { color:var(--text); font-weight:500; overflow-wrap:anywhere }
.bestiary-copy > small { color:var(--quiet); font-size:var(--text-xs) }
.bestiary-creature.is-maxed .bestiary-copy > small { color:#edc082 }
.bestiary-creature > b { margin:0; text-align:right; white-space:nowrap }
.bestiary-creature > .profile-progress { grid-column:2 / -1; height:4px }
/* Equipped gear, named: nine equal tiles across the full width (armour, equipment, pet), icon on top and
   the item's name underneath in its rarity colour, like the gear tiles elsewhere. */
.outfit-layout { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,1fr); gap:var(--space-4) var(--space-6) }
.outfit-armor-rack,.outfit-equipment-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3) }
.outfit-piece { width:100%; height:auto; display:flex; }
.outfit-piece-copy { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; display:block; min-width:0; max-width:100% }
.outfit-piece-copy small { display:none }
.outfit-piece-copy b { color:var(--item-color); font-size:var(--text-xs); font-weight:500; line-height:1.4; overflow-wrap:anywhere }
.outfit-piece.is-empty .outfit-piece-copy b { color:var(--quiet) }
@container outfit (max-width:639px) {
 .outfit-layout { grid-template-columns:minmax(0,1fr) }
 .outfit-pet .outfit-piece { max-width:calc((100% - 3 * var(--space-3)) / 4) }
 .outfit-piece { min-height:104px }
}
/* Equipped gear, compact: the name sits to the right of the icon, and armour and equipment are two rows of
   two, which leaves every name room to read in full (in one row of nine they were cut off). */
.outfit-piece { flex-direction:row; justify-content:flex-start; align-items:center; gap:var(--space-2); min-height:var(--item-row-height); padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2); text-align:left }
.outfit-art,.outfit-art .game-image { width:var(--item-art-compact); height:var(--item-art-compact); min-width:var(--item-art-compact); flex:0 0 var(--item-art-compact) }
.outfit-piece-copy { flex:1 }
.outfit-piece-copy b { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden }
.outfit-badge { left:calc(var(--space-2) + 22px); right:auto; bottom:6px }
.overview-outfit .outfit-layout { grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) }
.overview-outfit .outfit-armor-rack,.overview-outfit .outfit-equipment-slots { grid-template-columns:repeat(2,minmax(0,1fr)) }
@container outfit (max-width:639px) {
 .overview-outfit .outfit-layout { grid-template-columns:minmax(0,1fr) }
 .outfit-pet .outfit-piece { max-width:calc((100% - var(--space-3)) / 2) }
}
/* Overview: the character, purse, bank and skill average sit in the middle of their column, level with
   the middle of the skills beside them, instead of at the top with empty space underneath. */
.profile-overview > .profile-hero { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:var(--space-6) }
.profile-overview > .profile-hero > * { margin-block:0 }
@media(max-width:760px) {
 .profile-overview > .profile-hero { display:grid; grid-template-columns:minmax(88px,120px) minmax(0,1fr); align-items:center; gap:var(--space-4) }
 .profile-overview > .profile-hero .overview-character { min-width:0 }
 .profile-overview > .profile-hero .overview-character :is(img,canvas) { max-width:100%; height:auto }
}
/* Overview skills, tighter: the SkyBlock level and its XP share one line, rows lose a little padding, the
   level numbers end where their bar ends, and the last row of skills has no line under it. */
.overview-skills .overview-level { display:flex; align-items:baseline; gap:var(--space-2) }
.overview-skills .overview-level > * { margin:0 }
.overview-skills .overview-panel-heading { margin-bottom:var(--space-2) }
.overview-skills .profile-skill { padding-block:var(--space-2) }
.overview-skills .profile-skill > summary .skill-heading { grid-column:2 / -1 }
.overview-skills .profile-skill-grid > .profile-skill:nth-last-child(-n+2):nth-child(odd),
.overview-skills .profile-skill-grid > .profile-skill:last-child { border-bottom:0 }
.profile-overview { row-gap:var(--space-4) }
.profile-overview > .overview-loadout { padding-top:var(--space-4) }
/* Bestiary areas carry their in-game menu icon. */
.bestiary-area-art { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px }
.bestiary-area-art .game-image { width:28px; height:28px }
/* Bestiary, remade: one full-width row per area in the game's order; creatures in a wide grid when opened;
   mobs outside every family in a plain list at the end. */
.bestiary-categories { grid-template-columns:minmax(0,1fr); gap:var(--space-2) }
.bestiary-category > header { display:grid; grid-template-columns:28px minmax(0,1fr) minmax(120px,220px); align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line) }
.bestiary-area-name { display:grid; gap:2px; min-width:0 }
.bestiary-area-name b { color:var(--text); font-size:var(--text-base); font-weight:600 }
.bestiary-area-name small,.bestiary-area-progress small { color:var(--quiet); font-size:var(--text-xs) }
.bestiary-area-progress { display:grid; gap:4px; text-align:right }
.bestiary-area-progress .profile-progress { height:4px }
.bestiary-creatures { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); padding:var(--space-4) }
/* Long creature names wrap to a second line instead of being cut ("Millennia-Aged Blaze" in wider fonts). */
.bestiary-copy > span { white-space:normal; overflow-wrap:normal; line-height:1.3 }
.bestiary-other { margin-top:var(--space-6) }
.bestiary-other h4 { display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-3); color:var(--text); font-size:var(--text-base); font-weight:600 }
.bestiary-other h4 > span { display:grid; gap:2px }
.bestiary-other h4 small { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.bestiary-other-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:0 var(--space-6) }
.bestiary-other-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--line-soft); cursor:default }
.bestiary-other-row .bestiary-art,.bestiary-other-row .bestiary-art .game-image { width:32px; height:32px }
.bestiary-other-row .bestiary-art { grid-row:auto }
.bestiary-other-name { min-width:0; color:var(--text); font-size:var(--text-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bestiary-other-name small,.bestiary-other-row b small { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.bestiary-other-row b { font-size:var(--text-sm); font-variant-numeric:tabular-nums }
.bestiary-other-row:hover { background:var(--raised) }
.bestiary-other-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
@media(max-width:640px) {
 .bestiary-category > header { grid-template-columns:28px minmax(0,1fr) }
 .bestiary-area-progress { grid-column:2 / -1; grid-row:2; text-align:left }
}
/* Storage like SkyCrypt: every inventory in one list on the left with its icon and item count, its slots on
   the right; backpacks pick their number above the slots, ender chest pages keep their break. */
.storage-browser { display:grid; grid-template-columns:220px minmax(0,1fr); grid-template-rows:auto 1fr; gap:var(--space-4) var(--space-5); align-items:start }
.storage-browser > .storage-groups { grid-column:1; grid-row:1 / span 2; flex-direction:column; flex-wrap:nowrap; gap:2px; margin:0; padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); position:sticky; top:var(--space-4) }
.storage-browser > .storage-toolbar { grid-column:2; margin:0 }
.storage-browser > .inventory-content { grid-column:2 }
.storage-groups button { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:var(--space-3); width:100%; padding:var(--space-2) var(--space-3); border:0; border-radius:var(--radius-sm); background:transparent }
.storage-groups button:hover { background:var(--raised); color:var(--text) }
.storage-groups button[aria-pressed="true"] { background:var(--raised); color:var(--text); box-shadow:inset 3px 0 0 var(--accent) }
.storage-nav-art,.storage-nav-art .game-image { width:24px; height:24px }
.storage-nav-art { display:grid; place-items:center }
.backpack-picker { flex-basis:100%; display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2) }
.backpack-picker button { display:grid; justify-items:center; min-width:40px; padding:4px var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); color:var(--text) }
.backpack-picker button b { font-size:var(--text-sm) }.backpack-picker button small { color:var(--quiet); font-size:11px }
.backpack-picker button.is-empty { opacity:.55 }
.backpack-picker button[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset }
@media(max-width:760px) {
 .storage-browser { grid-template-columns:minmax(0,1fr) }
 .storage-browser > .storage-groups { grid-column:1; grid-row:auto; position:static; flex-direction:row; overflow-x:auto }
 .storage-groups button { width:auto; }
 .storage-browser > .storage-toolbar,.storage-browser > .inventory-content { grid-column:1 }
}
/* Families not found yet: shown so every area lists all its families, dimmed and in greyscale. */
.bestiary-creature.is-missing { opacity:.5; background:transparent; border-style:dashed }
.bestiary-creature.is-missing .bestiary-art { filter:grayscale(1) brightness(.7) }
.bestiary-creature.is-missing:hover { opacity:.8 }
/* Restore the original island layouts within these profile tabs; item art and hover details stay shared. */
.profile-domain-classic { container:profile-domain / inline-size; width:100%; max-width:1200px; min-width:0; margin-inline:auto }
.profile-domain-classic .domain-summary { margin:0 0 var(--space-3); padding:0; border:0; border-radius:0; background:transparent }
.profile-domain-classic .profile-mini-metrics { grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:0; margin:var(--space-2) 0 0; padding:0; border:0 }
.profile-domain-classic .profile-mini-metrics .profile-metric { min-width:0; padding:10px 18px 10px 0; border:0; background:transparent }
.profile-domain-classic .profile-mini-metrics .profile-metric strong { font-size:20px }
.profile-domain-classic .progression-level { flex-direction:row; gap:var(--space-6); padding:var(--space-4) 0 var(--space-2) }
.profile-domain-classic .progression-level > div:first-child > span { font-size:14px }
.profile-domain-classic .progression-level strong { margin-top:var(--space-1); color:var(--accent); font-size:26px; font-weight:600; letter-spacing:normal; line-height:1.4 }
.profile-domain-classic .progression-level strong small { font-size:var(--text-base) }
.profile-domain-classic .progression-xp { width:45%; max-width:400px }
.profile-domain-classic .progression-xp > .profile-progress { margin-top:10px }
.profile-domain-classic .progression-xp small { margin-top:6px }
.profile-domain-classic .domain-groups { display:block }
.profile-domain-classic .domain-group { min-width:0; margin:0; padding:18px 0; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; background:transparent }
.profile-domain-classic .domain-group:last-child { padding-bottom:0; border-bottom:0 }
.profile-domain-classic .domain-group h3 { margin:0 0 10px; color:var(--accent); font-size:14px; font-weight:600 }
.profile-domain-classic .domain-more > summary { font-size:var(--text-sm) }
.profile-domain-classic .domain-more[open] > summary { margin-bottom:var(--space-3) }
.profile-domain-classic:not([data-domain="mining"]) .domain-group:not(.domain-more),
.profile-domain-classic.card-grouped-domain > .domain-summary,
.profile-domain-classic .garden-section { padding:var(--space-5); border:1px solid var(--line); border-radius:14px; background:var(--panel); margin-bottom:18px }
.profile-domain-classic:not([data-domain="mining"]) .domain-group:not(.domain-more):last-child { margin-bottom:0 }
.profile-domain-classic:not([data-domain="mining"]) .domain-more { margin-top:18px }
.profile-domain-classic .profile-record { grid-template-columns:minmax(120px,2fr) minmax(0,3fr); gap:var(--space-3); align-items:start; padding:10px 0; font-size:var(--text-sm) }
.profile-domain-classic .profile-record > strong { max-width:none; font-weight:500; text-align:left }
.profile-domain-classic .profile-record-group > .record-group-title { font-size:14px }
.profile-domain-classic .profile-record-group > .profile-records { margin:3px 0 10px 3px; padding:0 0 var(--space-2) 14px; border-color:var(--line) }
.profile-domain-classic .record-chips { gap:6px; padding-bottom:var(--space-3) }
.profile-domain-classic .record-chips li { padding:3px 7px; border-color:var(--line-soft); border-radius:var(--space-1); background:transparent }
.profile-domain-classic .profile-data-table th,.profile-domain-classic .profile-data-table td { padding:9px var(--space-3); border-color:var(--line-soft); font-size:var(--text-sm) }
.profile-domain-classic .profile-data-table th:first-child { width:45%; padding-left:0 }
/* Row labels belong to their card, not the global column-header material. */
.profile-domain-classic .mining-side .profile-data-table tbody th { background:transparent }
.profile-domain-classic .profile-data-table thead th { background:transparent; color:var(--quiet); font-size:11px }
.profile-domain-classic .progression-checks { gap:0 var(--space-6) }
.profile-domain-classic .progression-checks > div { padding:9px 0; border-color:var(--line-soft) }
.profile-domain-classic .mining-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; min-width:0 }
.profile-domain-classic .mining-layout.mining-no-sidebar { grid-template-columns:minmax(0,1fr) }
.profile-domain-classic .mining-side,.profile-domain-classic .mining-main { display:flex; flex-direction:column; gap:18px; min-width:0 }
.profile-domain-classic .mining-side > section,
.profile-domain-classic .mining-main > .domain-summary,
.profile-domain-classic .mining-main > .mining-main-box { min-width:0; margin:0; padding:var(--space-5); border:1px solid var(--line); border-radius:14px; background:var(--panel) }
.profile-domain-classic .mining-side h3 { margin:0 0 var(--space-3); font-size:var(--text-base); color:var(--text) }
.profile-domain-classic .mining-main-box > .domain-groups > .domain-group:first-child { padding-top:0 }
.profile-domain-classic .mining-main-box > .domain-groups > .domain-group > h3 { text-align:center }
.profile-domain-classic .powder-list { display:flex; flex-direction:column; gap:0 }
.profile-domain-classic .powder-list li { padding:var(--space-3) 0; border:0; border-bottom:1px solid var(--line-soft) }
.profile-domain-classic .powder-list li:first-child { padding-top:0 }
.profile-domain-classic .powder-list li:last-child { padding-bottom:0; border-bottom:0 }
.profile-domain-classic .powder-name { margin-bottom:var(--space-2); font-size:var(--text-sm) }
.profile-domain-classic .powder-amounts { gap:6px var(--space-5) }
.profile-domain-classic .powder-amounts > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px }
.profile-domain-classic .powder-amounts b { font-size:14px }
.profile-domain-classic .crystal-grid { grid-template-columns:minmax(0,1fr); gap:10px }
.profile-domain-classic .crystal-card { flex-direction:row; justify-content:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-2); text-align:left; background:var(--input); border-radius:var(--radius) }
.profile-domain-classic .crystal-card > span:not(.game-image) { min-width:0; display:flex; flex-direction:column; gap:2px }
.profile-domain-classic .crystal-card .game-image { width:36px; height:36px; flex:0 0 36px }
.profile-domain-classic .crystal-card b { font-size:var(--text-sm) }
.profile-domain-classic .crystal-card small { font-size:11px; margin:0 }
.profile-domain-classic .forge-queue { display:flex; flex-direction:column; gap:var(--space-2) }
.profile-domain-classic .forge-item { gap:var(--space-3); padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--raised) }
.profile-domain-classic .forge-item small { margin-top:2px }
.profile-domain-classic .perk-tree-legend { gap:18px; margin:var(--space-2) 0 var(--space-4); font-size:11px; color:var(--quiet) }
.profile-domain-classic .perk-tree-legend > span::before { width:7px; height:7px; margin-right:6px }
.profile-domain-classic .perk-tree-legend small { font-size:11px }
.profile-domain-classic .perk-tree-scroll { width:100%; min-width:0; max-width:100%; overflow-x:auto; padding-bottom:var(--space-2) }
.profile-domain-classic .perk-tree { min-width:780px; width:100%; padding:var(--space-1) 0 }
.profile-domain-classic .perk-tier { grid-template-columns:55px minmax(0,1fr); position:relative; min-height:110px }
.profile-domain-classic .perk-tier-label { padding-top:var(--space-10); font-size:11px }
.profile-domain-classic .perk-tier:not(:last-child) .perk-tier-label::after { left:var(--space-5); top:60px; height:calc(100% - 16px) }
.profile-domain-classic .perk-tier-nodes { gap:7px; padding:5px 0 }
.profile-domain-classic .perk-node { gap:5px; min-height:94px; padding:9px var(--space-1); border-radius:7px; background:var(--input) }
.profile-domain-classic .perk-node.unlocked { border-color:color-mix(in srgb,var(--green) 55%,var(--line)); background:color-mix(in srgb,var(--green) 9%,var(--panel)) }
.profile-domain-classic .perk-node.locked { opacity:.75 }
.profile-domain-classic .perk-node-symbol { width:22px; height:22px }
.profile-domain-classic .perk-node-symbol .icon { width:18px; height:18px }
.profile-domain-classic .perk-node b { font-size:11px; line-height:1.3 }
.profile-domain-classic .perk-node small { font-size:11px }
.profile-domain-classic .perk-other { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; margin:var(--space-3) 0 }
.profile-domain-classic .garden-section { margin-top:18px; margin-bottom:0 }
.profile-domain-classic .garden-layout { padding:18px 0; margin-bottom:var(--space-4) }
.profile-domain-classic .garden-layout h3 { margin:0 0 14px; font-size:var(--text-base) }
.profile-domain-classic .garden-plot-grid { gap:6px; max-width:650px; margin:0 auto }
.profile-domain-classic .garden-plot { gap:2px; min-height:62px; padding:var(--space-2) var(--space-1); border-radius:5px; background:transparent }
.profile-domain-classic .garden-plot b { font-size:11px; color:var(--quiet) }
.profile-domain-classic .garden-plot small { font-size:11px }
.profile-domain-classic .garden-plot.unlocked { background:var(--raised) }
.profile-domain-classic .garden-plot.unlocked b,.profile-domain-classic .garden-plot.unlocked small { color:var(--accent) }
.profile-domain-classic .garden-plot.barn { font-size:var(--text-xs); background:transparent }
.profile-domain-classic .trophy-gallery { grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr)); gap:10px }
.profile-domain-classic .trophy-species { gap:var(--space-2); padding:14px var(--space-2); border-color:var(--line-soft); border-radius:7px; background:var(--input) }
.profile-domain-classic .trophy-species.no-art { justify-items:center; text-align:center }
.profile-domain-classic .trophy-species b { font-size:var(--text-xs) }
.profile-domain-classic .trophy-species small { font-size:11px }
.profile-domain-classic .trophy-species .game-image { width:36px; height:36px; flex:0 0 36px }
.profile-domain-classic .trophy-species.sc-uncaught { opacity:.55 }
.profile-domain-classic .whisper-presets { grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:10px }
.profile-domain-classic .whisper-presets > article { padding:var(--space-3); border-radius:7px; background:var(--input) }
.profile-domain-classic .whisper-presets h4 { margin-bottom:10px; font-size:var(--text-xs) }
.profile-domain-classic .whisper-presets article > div { margin-top:7px; font-size:11px; color:var(--quiet) }
.profile-domain-classic .sea-creature-records,.profile-domain-classic .shard-catalogue { margin-top:18px }
@container profile-domain (max-width:1080px) {
 .profile-domain-classic .mining-layout { grid-template-columns:minmax(0,1fr) }
 .profile-domain-classic .mining-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start }
 /* A short gear action must not occupy a cell beside the tall summary. */
 .profile-domain-classic .mining-side > :is(.skill-gear-button,.side-summary) { grid-column:1 / -1 }
 .profile-domain-classic .side-summary .profile-mini-metrics { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--space-2) var(--space-5) }
 .profile-domain-classic[data-domain="mining"] .mining-side { grid-template-columns:minmax(0,1fr) }
 .profile-domain-classic[data-domain="mining"] .powder-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4) }
 .profile-domain-classic[data-domain="mining"] .powder-list li { padding:0; border:0 }
 .profile-domain-classic[data-domain="mining"] .crystal-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)) }
 .profile-domain-classic[data-domain="foraging"] .mining-side > section:last-child { grid-column:1 / -1 }
 .profile-domain-classic[data-domain="foraging"] .mining-side > section:last-child > .profile-records { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-6) }
}
@container profile-domain (max-width:620px) {
 .profile-domain-classic .mining-side { grid-template-columns:minmax(0,1fr) }
 .profile-domain-classic[data-domain="mining"] .powder-list { grid-template-columns:minmax(0,1fr) }
 .profile-domain-classic[data-domain="mining"] .powder-list li + li { padding-top:var(--space-3); border-top:1px solid var(--line-soft) }
 .profile-domain-classic[data-domain="foraging"] .mining-side > section:last-child > .profile-records { grid-template-columns:minmax(0,1fr) }
 .profile-domain-classic .progression-level { gap:var(--space-3); align-items:start }
 .profile-domain-classic .progression-level strong { font-size:22px }
 .profile-domain-classic .profile-record { grid-template-columns:minmax(0,1fr); gap:3px }
 .profile-domain-classic .profile-data-table th,.profile-domain-classic .profile-data-table td { padding:var(--space-2) }
 .profile-domain-classic .progression-checks { grid-template-columns:minmax(0,1fr) }
 .profile-domain-classic .garden-plot-grid { gap:var(--space-1) }
 .profile-domain-classic .garden-plot { min-height:58px; padding:6px 2px }
 .profile-domain-classic .garden-plot b { font-size:11px }
 .profile-domain-classic .trophy-gallery { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@container profile-domain (max-width:400px) {
 .profile-domain-classic .progression-level { flex-direction:column; align-items:stretch }
 .profile-domain-classic .progression-xp { width:100%; max-width:none }
 .profile-domain-classic:not([data-domain="mining"]) .domain-group:not(.domain-more),
 .profile-domain-classic.card-grouped-domain > .domain-summary,
 .profile-domain-classic .garden-section,
 .profile-domain-classic .mining-side > section,
 .profile-domain-classic .mining-main > .domain-summary,
 .profile-domain-classic .mining-main > .mining-main-box { padding:var(--space-3) }
}

/* Hunter Fortune breakdown */
.hunter-fortune{margin:0 0 18px;padding:var(--space-5);border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.hf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap}
.hf-head h3{margin:0;font-size:var(--text-lg)}
.hf-head p{margin:var(--space-1) 0 0;color:var(--muted);font-size:var(--text-sm)}
.hf-total{text-align:right}
.hf-total span{display:block;color:var(--quiet);font-size:var(--text-xs)}
.hf-total b{font-size:var(--text-2xl,1.8rem);line-height:1.1;color:#ff6fcf;font-variant-numeric:tabular-nums}
.hf-rarities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0 var(--space-5)}
.hf-rarities div{padding:var(--space-2) var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--raised)}
.hf-rarities span{display:block;color:var(--quiet);font-size:var(--text-xs)}
.hf-rarities b{font-size:var(--text-base);font-variant-numeric:tabular-nums}
.hf-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.hf-columns h4{margin:0 0 var(--space-2);color:var(--quiet);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.hf-list{display:grid;margin:0;padding:0;list-style:none}
.hf-source{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft)}
.hf-source:last-child{border-bottom:0}
.hf-name b{display:block;font-size:var(--text-sm)}
.hf-name small,.hf-value small{display:block;color:var(--muted);font-size:var(--text-xs);line-height:1.5}
.hf-value{text-align:right}
.hf-value b{font-size:var(--text-base);font-variant-numeric:tabular-nums}
.hf-value small{color:var(--amber,#e0b060)}
.hf-source.is-max .hf-value small{color:var(--quiet)}
.hf-source .profile-progress{grid-column:1/-1;height:4px}
@media(max-width:800px){.hf-columns{grid-template-columns:minmax(0,1fr)}.hf-rarities{grid-template-columns:repeat(2,minmax(0,1fr))}.hf-total{text-align:left}}
/* Dungeons: Catacombs level, secrets and class spread across the card; the two Catacombs tables side by side and full width. Slayers three to a row. */
.dungeon-summary .profile-mini-metrics.dungeon-metrics { grid-template-columns:repeat(3,minmax(0,1fr)) }
.dungeon-tracks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); align-items:start }
.dungeon-tracks .profile-data-table-wrap,.dungeon-tracks .dungeon-floors { width:100% }
.slayer-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
@media(max-width:1100px){ .dungeon-tracks { grid-template-columns:minmax(0,1fr) } .slayer-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:640px){ .dungeon-summary .profile-mini-metrics.dungeon-metrics { grid-template-columns:minmax(0,1fr) } .slayer-card-grid { grid-template-columns:minmax(0,1fr) } }
.dungeon-level-metric progress { display:block; width:min(100%,240px); margin-top:var(--space-2) }
/* Heart of the Mountain / Forest presets */
.tree-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3); margin:0 0 var(--space-5) }
.tree-preset { display:grid; gap:2px; justify-items:center; text-align:center; padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:10px; background:var(--raised); color:var(--muted); font:inherit; cursor:pointer }
.tree-preset b { color:var(--text); font-size:var(--text-sm) }
.tree-preset small { font-size:var(--text-xs); color:var(--quiet) }
.tree-preset.is-active small { color:var(--accent) }
@media(max-width:640px){ .tree-presets { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.tree-preset:hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)) }
.tree-preset[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent) }
.tree-preset.is-empty { opacity:.6 }
.tree-gift-table td.tree-gift-tier { color:var(--quiet); padding-left:0 }
.tree-gift-table thead th { color:var(--quiet); font-size:11px; font-weight:400 }
.tree-gift-wrap { width:100%; min-width:0 }
.tree-gift-table { table-layout:fixed }
.tree-gift-table :is(th,td) { padding-inline:6px; overflow-wrap:break-word }
.tree-gift-table .tree-gift-count { width:38%; white-space:nowrap }
.tree-gift-table .tree-gift-tier { width:20%; white-space:nowrap }
.tree-gift-table :is(th,td):first-child { padding-left:0; text-align:left }
.tree-gift-table :is(th,td):last-child { padding-right:0 }
.greenhouse-count { margin:0 0 var(--space-3); color:var(--muted); font-size:var(--text-sm) }
.greenhouse-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,96px),1fr)); grid-auto-rows:92px; gap:var(--space-2) }
.greenhouse-crop { display:grid; grid-template-rows:40px 1fr; justify-items:center; align-items:start; gap:4px; height:92px; padding:var(--space-2); border:1px solid var(--line-soft); border-radius:10px; background:var(--raised); text-align:center; font-size:var(--text-xs); line-height:1.25; color:var(--text); cursor:default; overflow:hidden }
.greenhouse-crop span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.greenhouse-crop .game-image { width:36px; height:36px }
.greenhouse-crop.is-missing { opacity:.4; filter:grayscale(1) }
.greenhouse-crop.is-analyzed { border-color:color-mix(in srgb,#5fd38d 45%,var(--line)) }
#profileGreenhouse,.garden-section #profileGreenhouse { margin:0 0 var(--space-4) }
.jacob-metrics { margin-bottom:var(--space-4) }
.jacob-crop { display:inline-flex; align-items:center; gap:var(--space-2) }
.jacob-crop .game-image { width:24px; height:24px }
.jacob-medal { font-weight:600; color:var(--quiet) }
.jacob-bronze { color:#d98a4a } .jacob-silver { color:#d7dde6 } .jacob-gold { color:#f2c14e } .jacob-platinum,.jacob-diamond { color:#6fe3e8 }
.profile-domain-classic .garden-layout > h3 { text-align:center }
/* Networth item rows (restored in 0.8.70 after the tile experiment). */
.networth-item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--space-2);padding-bottom:var(--space-4)}.networth-item{min-width:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--raised)}.networth-item-body{width:100%;height:100%;min-width:0;display:grid;grid-template-columns:var(--item-art-size) minmax(0,1fr) auto;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2)}.networth-item-body>span:nth-child(2){min-width:0;display:grid;gap:var(--space-1)}.networth-item-body b{color:var(--text);font-size:var(--text-sm);font-weight:500;line-height:1.5;overflow-wrap:anywhere}.networth-item-body small{color:var(--quiet);font-size:var(--text-xs)}.networth-item-body strong{color:var(--nw-value);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.networth-item-grid{grid-auto-rows:1fr;align-items:stretch}
.networth-item{display:flex;cursor:default}
.networth-item:hover{border-color:var(--line-strong,var(--quiet));background:var(--panel)}
.networth-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:480px) { .networth-item-body{grid-template-columns:40px minmax(0,1fr);gap:var(--space-2)}.networth-item-body>.game-image{width:40px;height:40px;grid-row:1/3}.networth-item-body>span:nth-child(2),.networth-item-body>strong{grid-column:2} }
/* Accessories: active and inactive bag contents as rarity tiles, with enrichments and stat totals. */
.accessory-bag-view { margin:0 0 var(--space-5) }
.accessory-bag-view .profile-subheading span { color:var(--muted); font-size:var(--text-sm) }
/* SkyCrypt layout for accessories and pets: plain "Label: value" lines, a coloured bonus line, and
   rarity tiles with a corner mark when recombobulated. */
.sc-accessories { display:grid; gap:var(--space-3); margin:0 0 var(--space-4) }
.sc-card { padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--raised) }
.sc-card h4 { margin:0 0 var(--space-1); color:var(--text); font-size:var(--text-base); font-weight:700 }
.sc-line { margin:0; color:var(--text); font-size:var(--text-sm); line-height:1.55 }
.sc-line > span { color:var(--muted); font-weight:600 }
.sc-line b { font-weight:700 }
.sc-sep { color:var(--quiet); font-style:normal }
.sc-missing { margin:var(--space-3) 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-1) }
.networth-extra { margin:0 0 var(--space-4) }
.networth-extra > .sc-card + .sc-line { margin-top:var(--space-2) }
/* Accessories listed in the usual item rows; the list sits inside its SkyCrypt card. */
.sc-list { margin-top:var(--space-3); padding-bottom:0 }
.sc-accessories .sc-card > .sc-line + .sc-list { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-soft) }
.sc-accessories .sc-card > h4 + .sc-list { margin-top:var(--space-3) }
.sc-accessories .sc-card > .sc-line + .sc-line { margin-top:var(--space-2) }
/* Recombobulated, said in the item caption with the Recombobulator's small icon. */
.recomb-tag { display:inline-flex; align-items:center; gap:3px; color:inherit; white-space:nowrap }
.recomb-tag > .game-image { width:14px; height:14px; flex:0 0 14px; background:transparent; border:0 }
/* Overview colours, kept to two: the site accent for progress and gold for what is maxed. Skills in
   progress share the accent instead of one colour per skill. Worn gear keeps its real rarity and name
   colours, the same as on the Equipped page, on neutral borders. */
.profile-skill:not(.maxed) { --skill:var(--accent) }
.outfit-piece.outfit-piece { border-color:var(--line) }
button.outfit-piece.outfit-piece:hover { border-color:var(--accent) }
.networth-subhead { margin:var(--space-2) 0 var(--space-2); color:var(--muted); font-size:var(--text-sm); font-weight:600 }
.networth-subhead + .networth-item-grid { padding-bottom:var(--space-3) }

/* Crimson Isle and The Rift: progress cards and panels instead of plain record lists. */
body[data-workspace="profile"][data-section="rift"] { --accent:#c084fc }
.ci-head { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:var(--space-3); margin:0 0 var(--space-4) }
.ci-card { display:grid; gap:var(--space-1); align-content:start; min-width:0; padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }
.ci-card header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); color:var(--muted); font-size:var(--text-sm) }
.ci-card header em { font-style:normal; font-size:var(--text-xs); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:999px; padding:0 var(--space-2) }
.ci-card strong { font-size:var(--text-lg); line-height:1.2 }
.ci-card > small { color:var(--muted); font-size:var(--text-xs) }
.ci-card .ci-of { color:var(--muted); font-size:var(--text-sm); font-weight:500 }
.ci-rep.is-own { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)) }
.ci-bar { display:block; height:6px; border-radius:999px; background:var(--input); overflow:hidden }
.ci-bar svg { display:block; height:100%; border-radius:inherit }.ci-bar rect { fill:var(--accent) }
.ci-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); align-items:start; gap:var(--space-4); margin-bottom:var(--space-4) }
.ci-panel { display:grid; gap:var(--space-3); align-content:start; min-width:0; padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel) }
.ci-panel > header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-2) }
.ci-panel > header h3 { margin:0; font-size:var(--text-base) }
.ci-panel > header span { color:var(--muted); font-size:var(--text-sm) }
.ci-tiers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-2) }
.ci-tier { display:grid; gap:2px; justify-items:center; padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); text-align:center }
.ci-tier span { color:var(--muted); font-size:var(--text-xs) }
.ci-tier b { font-size:var(--text-base) }
.ci-tier.is-empty { opacity:.55 }
.ci-dojo { display:grid; gap:var(--space-2) }
.ci-test { display:grid; grid-template-columns:96px minmax(0,1fr) 88px; align-items:center; gap:var(--space-3); font-size:var(--text-sm) }
.ci-test > span { color:var(--muted) }
.ci-test b { text-align:right; font-variant-numeric:tabular-nums }
.ci-s { font-style:normal; margin-left:var(--space-1); padding:0 5px; border-radius:4px; background:color-mix(in srgb,var(--accent) 25%,transparent); color:var(--accent); font-size:var(--text-xs) }
.ci-grid.rift-checklist-grid { align-items:stretch }
.rift-checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); grid-auto-rows:1fr; gap:var(--space-2); margin:0; padding:0; list-style:none }
.rift-checks li { display:grid; grid-template-rows:minmax(2.7em,auto) auto; align-content:start; gap:var(--space-1); min-width:0; padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); font-size:var(--text-sm) }
.rift-check-name { line-height:1.35; overflow-wrap:anywhere }
.rift-check-state { font-size:var(--text-xs); line-height:1.35; color:var(--muted) }
.rift-checks li.is-done { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) }
.rift-checks li.is-done .rift-check-state { color:var(--accent) }
.rift-checks li.is-open { color:var(--muted) }
@media (max-width:640px) { .rift-checks li { grid-template-rows:auto auto } }
@media (max-width:640px){ .ci-tiers { grid-template-columns:repeat(3,minmax(0,1fr)) } .ci-test { grid-template-columns:80px minmax(0,1fr) 72px } .ci-grid { grid-template-columns:minmax(0,1fr) } }
@media(max-width:1100px) { .networth-browser { grid-template-columns:minmax(0,1fr) }.profile-networth-list { position:static; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)) } }

/* Jacob's contests (and any card after the Garden panel) keeps its own padding and a gap above it. */
.profile-domain-classic.card-grouped-domain .mining-main-box > .domain-groups > .domain-group:first-child { padding-top:var(--space-5) }
.profile-domain-classic .mining-main-box > .garden-section + .domain-groups { margin-top:18px }

/* Garden visitors: summary in the Farming sidebar, full list in a window. */
.visitor-summary { display:grid; gap:var(--space-2) }
.visitor-count { margin:0; color:var(--muted); font-size:var(--text-sm) }
.visitor-count b { color:var(--text); font-size:var(--text-xl); font-variant-numeric:tabular-nums }
.visitor-summary .detail-note { margin:0 }
.visitor-open { justify-self:start; margin-top:var(--space-1) }
#gardenVisitorsDialog { position:fixed; inset:0; width:min(640px,calc(100vw - 32px)); max-width:640px; height:min(780px,calc(100dvh - 32px)); margin:auto; padding:var(--space-6); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); color:var(--text); box-shadow:0 24px 100px #0009 }
#gardenVisitorsDialog .auth-dialog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-3) }
#gardenVisitorsDialog .auth-description { margin-bottom:var(--space-4) }
.visitor-tools { position:sticky; top:calc(-1 * var(--space-6)); z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:end; margin:0 calc(-1 * var(--space-6)) var(--space-5); padding:var(--space-3) var(--space-6); background:var(--panel); border-bottom:1px solid var(--line) }
.visitor-tools input { min-width:0 }
.visitor-sort { display:grid; gap:2px; color:var(--quiet); font-size:var(--text-xs) }
.visitor-filter { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:var(--space-2) }
.visitor-filter button { padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:var(--text-sm); cursor:pointer }
.visitor-filter button small { color:var(--quiet); margin-left:var(--space-1) }
.visitor-filter button[aria-pressed="true"] { border-color:var(--accent); color:var(--text); background:var(--raised) }
.visitor-groups section + section { margin-top:var(--space-6) }
.visitor-groups h3 { margin:0 0 var(--space-2); font-size:var(--text-base); font-weight:650 }
.visitor-groups h3 small { color:var(--quiet); font-size:var(--text-sm); font-weight:400; margin-left:var(--space-2) }
.visitor-table { width:100%; border-collapse:collapse; font-size:var(--text-base) }
.visitor-table thead th { padding:var(--space-2) var(--space-3); color:var(--quiet); font-size:var(--text-xs); font-weight:500; text-align:right; border-bottom:1px solid var(--line) }
.visitor-table thead th:first-child { text-align:left }
.visitor-table tbody tr > * { background:transparent; border-bottom:1px solid var(--line-soft) }
.visitor-table tbody tr:nth-child(even) > * { background:#ffffff05 }
.visitor-table tbody th { padding:var(--space-2) var(--space-3); text-align:left; font-size:var(--text-base); font-weight:500; color:var(--text); text-transform:none; letter-spacing:0 }
.visitor-table td { width:130px; padding:var(--space-2) var(--space-3); text-align:right; font-size:var(--text-base); font-weight:600; font-variant-numeric:tabular-nums; color:var(--text) }
.visitor-table td + td { color:var(--muted); font-weight:400 }
.visitor-table th { overflow-wrap:anywhere }
.visitor-table thead th { overflow-wrap:normal }
.visitor-table tr.is-missing th { color:var(--quiet) }
.visitor-table td.visitor-unmet { width:auto; color:var(--amber,#e0b060); font-size:var(--text-sm); font-weight:500 }
@media(max-width:600px) { #gardenVisitorsDialog { padding:var(--space-4); height:calc(100dvh - 16px); width:calc(100vw - 16px) } .visitor-tools { top:calc(-1 * var(--space-4)); margin:0 calc(-1 * var(--space-4)) var(--space-4); padding:var(--space-3) var(--space-4) }  .visitor-table { font-size:var(--text-sm) } }

/* Pet goal: what Kat needs for each rarity step. */
.pet-kat { margin:var(--space-5) 0 var(--space-4) }
.pet-kat h3 { margin:0 0 var(--space-2); font-size:var(--text-base) }
.pet-kat-steps { display:grid; gap:var(--space-3); margin:var(--space-3) 0; padding:0; list-style:none }
.pet-kat-step { padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--raised) }
.pet-kat-step-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); flex-wrap:wrap }
.pet-kat-step-head span { color:var(--muted); font-size:var(--text-sm); font-variant-numeric:tabular-nums }
.pet-kat-step .detail-note { margin:var(--space-2) 0 0 }
.pet-kat-items { display:grid; gap:var(--space-2); margin:var(--space-3) 0 0; padding:0; list-style:none }
.pet-kat-items li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--space-3); font-size:var(--text-sm) }
.pet-kat-items li b { font-weight:500; font-variant-numeric:tabular-nums }
.pet-kat-items li > span { min-width:0; overflow-wrap:anywhere }
.pet-kat-items li button { padding:var(--space-1) var(--space-2); font-size:var(--text-xs) }
.pet-kat-total { display:grid; gap:2px; padding:var(--space-3) var(--space-4); border:1px solid var(--accent); border-radius:var(--radius) }
.pet-kat-total span { color:var(--muted); font-size:var(--text-xs) }
.pet-kat-total b { font-size:var(--text-lg); font-variant-numeric:tabular-nums }
.pet-kat-total small { color:var(--quiet); font-size:var(--text-xs) }
@media(max-width:600px) { .pet-kat-items li { grid-template-columns:minmax(0,1fr) auto } .pet-kat-items li button { grid-column:1/-1; justify-self:start } .visitor-table :is(th,td) { padding-inline:var(--space-2) } .visitor-table td { width:auto; white-space:nowrap } }

/* Tabs on the Accessories page: one kind of content at a time. */
.completion-tabs { display:flex; flex-wrap:wrap; margin:0 0 var(--space-5); padding:0; }
.completion-tabs button { border:1px solid transparent; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:var(--text-base); font-weight:600; cursor:pointer }
.completion-tabs button small { margin-left:var(--space-2); padding:1px 8px; border-radius:999px; background:var(--raised); color:var(--muted); font-size:var(--text-xs); font-weight:600 }
.completion-tabs button:hover { color:var(--text); background:#ffffff06 }
.completion-tabs button[aria-selected="true"] { color:var(--text); background:var(--raised); border-color:var(--line) var(--line) var(--accent) }
.completion-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.accessory-powers { display:grid; gap:var(--space-5) }
.accessory-powers .profile-mini-metrics { margin:0 }
.powers-block h3 { margin:0 0 var(--space-3); font-size:var(--text-base) }
.powers-block h3 small { color:var(--quiet); font-weight:400; margin-left:var(--space-1) }
.power-chips li.is-selected { border-color:var(--accent); color:var(--text) }
.tuning-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:var(--space-3) }
.tuning-card { padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }
.tuning-card header { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); margin-bottom:var(--space-2) }
.tuning-card header span { color:var(--quiet); font-size:var(--text-xs) }
.tuning-card ul { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none }
.tuning-card li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--space-2); font-size:var(--text-sm) }
.tuning-card li i { grid-column:1/-1; height:3px; border-radius:2px; background:var(--line); overflow:hidden }.tuning-card li i svg { display:block; height:100% }.tuning-card li i rect { fill:var(--accent) }

/* Hunting: Hunter Fortune as a sidebar next to the shards. */
.mining-side .hf-head h3 { font-size:var(--text-lg) }
.mining-side .hunter-fortune { margin:0; padding:var(--space-4) }
.mining-side .hf-head { display:block }
.mining-side .hf-total { display:flex; align-items:baseline; justify-content:space-between; margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--line-soft); text-align:left }
.mining-side .hf-rarities { grid-template-columns:repeat(2,minmax(0,1fr)); margin:var(--space-3) 0 var(--space-4) }
.mining-side .hf-columns { grid-template-columns:minmax(0,1fr); gap:var(--space-4) }
.mining-side .hf-source { padding:var(--space-2) 0 }
.completion-tabs button small:empty { display:none }

/* Progression's Accessories page starts with the collection itself, without the section title above it. */
#progressionWorkspace #profile-accessories > summary { display:none }

/* Reviewed card layouts: preserve the reading order while using the available width. */
.profile-domain-classic[data-domain="foraging"] .mining-side .profile-record { grid-template-columns:minmax(0,1fr) auto }
.profile-domain-classic[data-domain="foraging"] .mining-side .profile-record > strong { text-align:right }
.gear-pieces .mc-5 { color:#d88cdd }
.gear-pieces .mc-9 { color:#929dff }
@media(max-width:540px) {
 .completion-summary { padding:var(--space-4) }
 .completion-summary > div { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .completion-summary b,.completion-stat small { white-space:normal; overflow-wrap:anywhere }
}
/* Storage tabs wrap instead of hiding groups beyond the phone edge. */
@media(max-width:760px) {
 .storage-browser > .storage-groups { flex-wrap:wrap; overflow:visible }
 .storage-groups button { flex:1 1 130px }
}
.inventory-scroll-hint { display:none; margin:var(--space-2) 0; color:var(--quiet); font-size:var(--text-xs) }
@media(max-width:540px) {
 .storage-groups button { grid-template-columns:20px minmax(0,1fr) auto; gap:6px; padding:8px 6px }
 .storage-nav-art,.storage-nav-art .game-image { width:20px; height:20px }
 .inventory-grid-scroll { scrollbar-width:thin; scrollbar-color:var(--quiet) var(--input) }
 /* All nine columns fit a phone screen: the slots shrink instead of scrolling sideways. */
 .profile-item-grid.inventory-slots:not(.rift-storage-small) { min-width:0; width:100%; gap:3px; padding:6px }
}
.ci-dojo.is-unavailable { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4) }
.ci-dojo.is-unavailable .ci-test { grid-template-columns:minmax(0,1fr) auto; padding:var(--space-1) 0 }
.ci-dojo.is-unavailable .ci-test b { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
@container profile-domain (min-width:900px) {
 [data-domain="crimson"] .ci-grid { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr) }
}
@container profile-domain (max-width:400px) {
 .ci-dojo.is-unavailable { grid-template-columns:minmax(0,1fr) }
}
/* Gear per skill: one row per slot, owned pieces ringed. */
.skill-gear-launch { display:flex; justify-content:flex-end }
.skill-gear-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2) }
.mining-side > .skill-gear-button { width:100% }
.side-summary .domain-summary { margin:0 }
.side-summary .progression-level { flex-direction:column; gap:var(--space-3); padding-top:0 }
.profile-domain-classic .profile-mini-metrics:first-child { margin-top:0 }
.side-summary .profile-mini-metrics { grid-template-columns:1fr; margin:0 }
.side-summary .profile-mini-metrics .profile-metric { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:var(--space-2) var(--space-3); padding:var(--space-2) 0 }
.side-summary .profile-mini-metrics .profile-metric > small { grid-column:1/-1 }
.profile-records > .profile-record:last-child { border-bottom:0 }
.ci-panel-action { display:flex; justify-content:flex-end; margin-top:var(--space-4) }
.rift-storage-panel { min-width:0 }
.rift-storage-panel > header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3) }
.museum-heading > .profile-mini-metrics { flex:1 1 320px }
.rift-storage { display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:flex-start }
.rift-storage-box { min-width:0 }
.rift-storage-col { display:flex; flex-direction:column; gap:var(--space-4); min-width:0 }
.rift-storage-worn { display:flex; flex-wrap:wrap; gap:var(--space-4) }
.profile-item-grid.inventory-slots.rift-storage-small { grid-template-columns:repeat(4,40px); width:auto; min-width:0 }
.rift-storage-box h3 { margin:0 0 var(--space-2); font-size:var(--text-base) }
.skill-gear-dialog .skill-gear-body { margin-top:var(--space-4) }
.skill-gear-row { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:var(--space-3); padding:var(--space-1) 0 }
.skill-gear-slot { color:var(--muted); font-size:var(--text-sm) }
.skill-gear-items { display:flex; flex-wrap:wrap; gap:var(--space-2); min-width:0 }
.skill-gear-item { display:grid; flex:0 0 40px; width:40px; height:40px; min-width:0; cursor:help }
.skill-gear-item .game-image { box-sizing:border-box; width:100%; height:100%; min-width:0; max-width:100%; padding:4px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.skill-gear-item .game-image img { width:100%; height:100% }
.skill-gear-item:hover .game-image { border-color:var(--quiet); background:var(--raised) }
.skill-gear-item.is-owned .game-image { border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset }
.skill-gear-note { margin:0; color:var(--quiet); font-size:var(--text-sm) }
.skill-gear-none { align-self:center; color:var(--quiet); font-size:var(--text-sm) }
@media (max-width:560px) { .skill-gear-row { grid-template-columns:1fr; gap:var(--space-1) } }
/* Wide screens: the Garden level and counts on the left, the plot grid beside them, so the grid
   does not sit alone in an empty band. */
@media (min-width:1280px) {
 .profile-domain-classic #profileGardenExtra:has(>.garden-layout) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); grid-template-rows:auto 1fr; column-gap:var(--space-8); align-items:start }
 .profile-domain-classic #profileGardenExtra:has(>.garden-layout)>* { grid-column:1/-1 }
 .profile-domain-classic #profileGardenExtra:has(>.garden-layout)>:is(.progression-level,.profile-mini-metrics) { grid-column:1 }
 .profile-domain-classic #profileGardenExtra:has(>.garden-layout)>.progression-level { flex-direction:column; align-items:stretch }
 .profile-domain-classic #profileGardenExtra:has(>.garden-layout)>.progression-level .progression-xp { width:100%; max-width:none }
 .profile-domain-classic #profileGardenExtra>.garden-layout { grid-column:2; grid-row:1/span 2; padding-top:0; margin-bottom:0 }
 .profile-domain-classic #profileGardenExtra>.garden-layout .garden-plot-grid { max-width:none }
}
/* "Floor 1" stays on one line on phones; the number columns give up the room instead. */
.dungeon-floors tbody th { white-space:nowrap }
@media (max-width:520px) { .dungeon-floors :is(th,td) { padding-inline:4px } .dungeon-floors thead th { font-size:11px } }
/* Hunter Fortune total: label and number side by side with a gap, the number the size of other card totals. */
.hunter-fortune .hf-head .hf-total { display:flex; align-items:baseline; justify-content:flex-end; gap:var(--space-2) }
.hunter-fortune .hf-head .hf-total span { display:inline }
.hunter-fortune .hf-head .hf-total b { font-size:var(--text-xl) }
/* Phones: the Jacob contest table fits the screen, so the best bracket column is not cut off. */
@media (max-width:520px) {
 .jacob-crops { table-layout:fixed; width:100% }
 .jacob-crops :is(th,td) { padding-inline:3px; font-size:12px }
 .jacob-crops thead th { font-size:10px; white-space:normal; overflow-wrap:normal; hyphens:none; line-height:1.25 }
 .jacob-crops :is(th,td):first-child { width:33%; padding-left:0 }
 .jacob-crops :is(th,td):nth-child(2) { width:17% }
 .jacob-crops :is(th,td):nth-child(3) { width:25% }
 .jacob-crops :is(th,td):last-child { width:25%; padding-right:0 }
 .jacob-crops .jacob-medal { font-size:11px }
 .jacob-crops .jacob-crop { gap:4px }
 .jacob-crops .jacob-crop .game-image { width:18px; height:18px; flex:none }
}
/* Skill trees scroll sideways on narrow screens; the right edge fades so the hidden columns read as more to scroll. */
@media (max-width:820px) {
 .profile-domain-classic .perk-tree-scroll { mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent) }
 .profile-domain-classic .perk-tree-scroll>.perk-tree { box-sizing:content-box; padding-right:36px }
}

/* /money-refinement.css */
/* Calculator workbench. Shell, dialogs, guides and Premium use the shared theme. */
/* Keep item artwork readable without increasing utility icons. Pixel sprites need at least
   32px of inner space to use the larger crisp step rather than a 16px sprite. Classic keeps its sizes. */
body:not([data-atlas-layout="classic"]) :is(.money-workspace,#tradeContent) { --money-art-size:44px; --money-art-compact:36px; --money-art-inline:32px; --money-art-padding:2px }
body[data-scene="gathering"] { --scene:url("/scenery/gathering.webp?v=226") }
.method-navigation { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-6) }
.method-navigation[hidden],body[data-workspace="profile"] .method-navigation { display:none }
.method-navigation button { min-height:40px; padding:var(--space-2) var(--space-4); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--muted); font-size:var(--text-sm) }
.method-navigation button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--panel)); box-shadow:inset 0 -2px var(--accent) }
.money-workspace { display:grid; grid-template-columns:288px minmax(0,1fr); align-items:start; gap:var(--space-6) }
.money-controls,.money-results-column { min-width:0 }
.money-controls { position:static }
.money-results-column { container-type:inline-size }
#craftMethodLabel { display:none!important }
.money-controls .setup { margin:0; padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); box-shadow:0 8px 28px #0002,inset 0 1px #ffffff05 }
.setup-heading { display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-5); color:var(--text); font-size:var(--text-base); font-weight:650 }
.money-controls .setup-heading > .icon { display:none }
.setup-top,.minion-settings .minion-controls,.minion-settings details[open] .minion-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); padding:0; align-items:end }
.calc-shortcuts { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); margin-top:var(--space-2) }
.calc-shortcuts[hidden] { display:none }
.setup-top > *,#settings .settings-grid > *,#gatheringSetup .field-label,.pet-route-settings > * { min-width:0; width:100% }
.money-controls :is(.field-label,.budget-label,.minion-controls label,.settings-grid label),.result-filters label,.optimizer-controls label { color:var(--muted); font-size:var(--text-sm); font-weight:500; line-height:1.5 }
.money-controls :is(.field-label,.minion-controls label,.settings-grid label),.result-filters label,.optimizer-controls label { display:flex; flex-direction:column; gap:var(--space-2) }
.money-controls .field-label { width:100%; min-width:0 }
.money-controls :is(input,select,.picker),.result-filters :is(input,select,.picker),.optimizer-controls :is(input,select,.picker) { width:100%; min-width:0; box-sizing:border-box }
.money-workspace :is(input:not([type="checkbox"]),.picker-button),#tradeContent :is(input:not([type="checkbox"]),.picker-button) { min-height:42px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); color:var(--text); font-size:var(--text-sm) }
.money-workspace .picker-button,#tradeContent .picker-button { height:auto; padding:10px 12px; line-height:1.5; align-items:center }
.money-controls .picker-text,.result-filters .picker-text,.optimizer-controls .picker-text { white-space:normal; overflow-wrap:anywhere }
.money-workspace .picker-button[aria-expanded="true"],#tradeContent .picker-button[aria-expanded="true"] { border-color:var(--accent); background:var(--input); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent) }
.money-controls :is(small,.settings-note),.optimizer-controls small { color:var(--quiet); font-size:var(--text-xs); line-height:1.5; font-weight:400 }
.money-controls .budget-label { display:flex; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2) }
.money-controls .input-unit input { padding-right:54px }
.money-controls .input-unit > span { top:13px; font-size:var(--text-xs) }
.settings-bottom,.minion-settings details,.gathering-fees { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-soft) }
.settings-bottom { display:block }
.money-controls summary { width:100%; font-size:var(--text-sm); color:var(--muted) }
.money-controls details[open] > summary { color:var(--accent) }
#settings .settings-grid,.gathering-fees .settings-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin-top:var(--space-4); padding:0 }
.fee-summary { position:static; display:block; margin-top:var(--space-3); color:var(--quiet); font-size:var(--text-xs); line-height:1.6; overflow-wrap:anywhere }
.pet-route-settings { margin:var(--space-5) 0 0; padding:var(--space-5) 0 0; border-top:1px solid var(--line-soft); grid-template-columns:minmax(0,1fr); gap:var(--space-4) }
.money-results-column > .stats { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-3); margin:0 0 var(--space-5); padding:0; background:none; border:0; overflow:visible }
body[data-workspace="money"]:not([data-category="gathering"]):not([data-category="minions"]) .money-results-column > .stats { display:none }
body[data-workspace="money"]:not([data-category="crafting"]):not([data-category="shards"]) .quantity-field>small { display:none }
.money-results-column .stat { min-width:0; padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:inset 0 1px #ffffff05 }
.money-results-column .stat-instant { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--panel)) }
.money-results-column .stat::after { display:none }
.money-results-column .stat-top { color:var(--muted); font-size:var(--text-sm); line-height:1.5 }
.money-results-column .stat-icon { display:none }
.money-results-column .stat > strong { margin:var(--space-2) 0; color:var(--text); font-size:var(--text-xl); font-weight:650; letter-spacing:-.6px; overflow-wrap:anywhere }
.money-results-column .stat-instant > strong { color:var(--accent) }
.money-results-column .stat > small { color:var(--quiet); font-size:var(--text-xs); line-height:1.6 }
.money-results-column .stat.coverage { display:none }
.money-results-column .stat-badge { color:var(--quiet); background:var(--input); border-color:var(--line-soft); font-size:var(--text-xs); font-weight:400; padding:2px 5px }
.money-results-column #statInstant.income-loss { color:var(--red) }
.money-results-column #status { margin:0 0 var(--space-4); min-height:0; font-size:var(--text-sm); line-height:1.6 }
.money-results-column #status:empty { display:none }
.money-workspace .results { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); box-shadow:0 8px 28px #0002; overflow:hidden }
.money-workspace .results-header,.minion-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; padding:var(--space-4); border-bottom:1px solid var(--line-soft) }
.money-workspace .results-header h2,.minion-heading h2 { margin:0; font-size:var(--text-lg); color:var(--text); letter-spacing:-.3px }
.money-workspace .section-indicator { display:none }
.money-workspace .section-title { gap:var(--space-3) }
.money-workspace .tabs,.gathering-modes { display:flex; gap:var(--space-1); padding:var(--space-1); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.money-workspace .tabs button,.gathering-modes button { min-height:34px; padding:var(--space-2) var(--space-3); border:1px solid transparent; border-radius:4px; font-size:var(--text-sm); color:var(--muted); background:transparent; box-shadow:none }
.money-workspace .tabs button[aria-selected="true"],.gathering-modes button[aria-pressed="true"] { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); background:var(--raised); box-shadow:0 2px 5px #0002 }
.money-workspace .tabs span { color:inherit; font-size:var(--text-xs) }
.money-workspace .toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-3); padding:var(--space-4); background:none }
.money-workspace .toolbar .search-field { flex:1 1 220px; min-width:150px }
.money-workspace #search { min-height:42px; font-size:var(--text-sm) }
.money-workspace .sort-label { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2); font-size:var(--text-xs); color:var(--muted) }
.money-workspace .sort-label > span { display:block }
/* At least 170px, wider when the chosen font needs it, so "Profit for quantity" is never cut. */
.money-workspace .sort-label .picker { width:auto; min-width:170px; max-width:100% }
.money-workspace .sort-label .picker-button { font-size:var(--text-sm) }
.money-workspace .check-label { min-height:42px; font-size:var(--text-xs); color:var(--muted); margin:0; white-space:normal }
.result-filters { display:flex; flex-wrap:wrap; gap:var(--space-3); padding:0 var(--space-4) var(--space-4) }
.result-filters > label,.result-filters .extra-filters > label { width:auto; min-width:150px; max-width:none; flex:1 1 150px; font-size:var(--text-xs) }
.result-filters .extra-filters:not(.hidden) { display:contents }
.result-filters #marketQualityLabel { flex:1 1 170px }
.money-workspace .mode-note { margin:0 var(--space-5) var(--space-4); color:var(--muted); font-size:var(--text-xs); line-height:1.7; overflow-wrap:anywhere }
.money-workspace .rankings { width:100%; min-width:0; border-collapse:collapse; font-size:var(--text-sm) }
.money-workspace .rankings th { background:var(--input); color:var(--quiet); padding:var(--space-3) var(--space-4); font-size:var(--text-xs); font-weight:500 }
.money-workspace .rankings td { color:var(--text); padding:var(--space-3) var(--space-4); border-color:var(--line-soft); font-size:var(--text-sm); vertical-align:middle }
.money-workspace .rankings th:first-child,.money-workspace .rankings td:first-child { padding-left:var(--space-5) }
.money-workspace .rankings th:last-child,.money-workspace .rankings td:last-child { padding-right:var(--space-5) }
.money-workspace .rankings tbody tr { background:transparent; transition:background .16s }
.money-workspace .rankings tbody tr:hover { background:color-mix(in srgb,var(--raised) 65%,var(--panel)) }
.money-workspace .rankings .recipe { min-width:160px; max-width:360px; white-space:normal; overflow-wrap:anywhere }
.money-workspace .rankings .recipe > .game-image { float:left; width:var(--money-art-size,var(--item-art-size)); height:var(--money-art-size,var(--item-art-size)); min-width:var(--money-art-size,var(--item-art-size)); max-width:var(--money-art-size,var(--item-art-size)); margin:0 var(--space-3) var(--space-2) 0; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input); padding:var(--money-art-padding,var(--space-1)) }
/* flow-root keeps the name and recipe beside the floated icon instead of wrapping under it. */
.money-workspace .rankings .recipe strong,#minionRows strong { display:flow-root; font-size:var(--text-base); font-weight:600; line-height:1.5 }
.money-workspace .rankings .recipe small,.money-workspace .rankings td > small,.money-workspace .subvalue,#minionRows small { display:flow-root; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs); line-height:1.6; white-space:normal; overflow-wrap:anywhere }
.money-workspace .rankings .result-profit .profit { color:var(--green); font-size:var(--text-base); font-weight:650 }
.money-workspace .rankings .fusion-loss { color:var(--red) }
.money-workspace .rankings .market-context { min-width:100px; max-width:190px; white-space:normal; font-size:var(--text-xs); line-height:1.6 }
.money-workspace .rankings .tag { font-size:var(--text-xs); line-height:1.5; white-space:normal; padding:3px 6px; border-radius:var(--radius-sm) }
.money-workspace .rankings .row-action { width:1%; white-space:nowrap }
.money-workspace .rankings .row-action button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-width:84px; min-height:36px; padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); color:var(--accent); font-size:var(--text-xs); white-space:nowrap; line-height:1.4; max-width:150px }
.money-workspace .rankings .row-action button::after { display:none }
.money-workspace .rankings .row-action button:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--raised)) }
.money-workspace .rankings .row-action .icon { width:12px; height:12px; flex:0 0 12px }
.money-workspace .pager { padding:var(--space-4) var(--space-5); gap:var(--space-3); color:var(--quiet); font-size:var(--text-xs); background:var(--input) }
.money-workspace .pager > div { gap:var(--space-3) }
.money-workspace .pager button { min-height:36px; font-size:var(--text-xs); border-color:var(--line) }
.money-workspace .empty { padding:var(--space-10) var(--space-5)!important; color:var(--muted); font-size:var(--text-sm); line-height:1.7 }

/* Active income: complete labels, clear selected quantities, an item-led breakdown. */
.method-intro { margin:var(--space-2) 0 0; color:var(--quiet); font-size:var(--text-xs); line-height:1.7 }
#gatheringSetup .method-intro { margin:calc(-1 * var(--space-2)) 0 var(--space-5) }
.gathering-modes { margin:var(--space-4) 0 }
.gathering-modes button { flex:1 }
.gathering-stats { grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin:var(--space-4) 0; padding:0 }
.drop-picker { margin:var(--space-5) 0 0 }
.drop-picker-heading { display:flex; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-3); font-size:var(--text-sm); color:var(--text) }
.drop-picker-heading strong { font-weight:550 }
.drop-picker-heading > span { color:var(--quiet); font-size:var(--text-xs) }
.drop-filter { margin-bottom:var(--space-2); width:100% }
.drop-list { display:grid; gap:var(--space-1); max-height:260px; padding:var(--space-1); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; border:1px solid var(--line); border-radius:var(--radius); background:var(--input) }
.drop-option { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:var(--space-2); padding:var(--space-2); border:1px solid transparent; border-radius:var(--radius-sm) }
.drop-option[hidden] { display:none }
.drop-option.is-picked { background:color-mix(in srgb,var(--accent) 8%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 24%,var(--line)) }
.drop-tick { display:flex; align-items:start; gap:var(--space-2); min-width:0; color:var(--muted); font-size:var(--text-sm); line-height:1.5; cursor:pointer }
.drop-tick span { white-space:normal; overflow-wrap:anywhere }
.drop-option.is-picked .drop-tick { color:var(--text) }
#gatheringSetup .drop-tick input { width:16px; height:16px; flex:0 0 16px; margin-top:2px; accent-color:var(--accent) }
.drop-value { display:flex; align-items:center; gap:var(--space-3); padding-left:var(--space-6); color:var(--quiet); font-size:var(--text-xs); min-width:0 }
.drop-value > span { flex:1; line-height:1.5 }
#gatheringSetup .drop-amount { width:96px; min-width:0; flex:0 0 96px; padding:var(--space-2); min-height:36px; font-variant-numeric:tabular-nums }
.drop-hint { margin:var(--space-3) 0 0; font-size:var(--text-xs); line-height:1.6; color:var(--quiet) }
.gathering-sale { margin-top:var(--space-5) }
.gathering-message { margin:var(--space-5); padding:var(--space-3) var(--space-4); border-left:2px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--input); color:var(--muted); font-size:var(--text-sm); line-height:1.7 }
.gathering-breakdown { padding:0 var(--space-4) }
.gathering-breakdown > div { display:grid; grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr) minmax(90px,auto); align-items:center; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--line-soft) }
.gathering-breakdown .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); max-width:var(--money-art-compact,var(--item-art-compact)); min-width:var(--money-art-compact,var(--item-art-compact)); border:0; border-radius:var(--radius-sm); padding:0; background:transparent }
.gathering-breakdown > div > span { min-width:0; overflow-wrap:anywhere }
.gathering-breakdown strong { display:block; color:var(--text); font-size:var(--text-base); font-weight:550; line-height:1.5 }
.gathering-breakdown small { display:block; color:var(--quiet); font-size:var(--text-xs); margin-top:var(--space-1) }
.gathering-breakdown b { color:var(--text); font-size:var(--text-base); font-weight:550; text-align:right; font-variant-numeric:tabular-nums }
.gathering-breakdown b.income-unpriced { max-width:180px; color:var(--amber); font-size:var(--text-xs); line-height:1.6 }
.gathering-breakdown b.income-loss { color:var(--red,#e5484d) }
/* The ranking's first row is the answer, so it reads as one: accent edge, accent figure. */
.gathering-ranking > div.is-best { margin:0 calc(var(--space-4) * -1); padding-inline:calc(var(--space-4) - 3px) var(--space-4); border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent) }
.gathering-ranking > div.is-best b { color:var(--accent) }
.gathering-empty { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5); color:var(--quiet); font-size:var(--text-sm); line-height:1.7 }
.gathering-empty .icon { width:32px; height:32px; flex:0 0 32px; color:var(--accent) }
.gathering-empty p { margin:0 }
.income-math { margin:var(--space-5); padding:var(--space-4); border-radius:var(--radius); background:var(--input); display:grid; gap:var(--space-3) }
.income-math > div { display:flex; justify-content:space-between; gap:var(--space-3); color:var(--muted); font-size:var(--text-sm) }
.income-math dd { margin:0; color:var(--text); font-variant-numeric:tabular-nums; text-align:right }
.gathering-footnote { margin:0; padding:var(--space-4) var(--space-5); border-top:1px solid var(--line-soft); color:var(--quiet); font-size:var(--text-xs); line-height:1.7 }

/* Profile-backed active income. The observed window is kept separate from the live timer. */
body[data-category="gathering"] { --activity-color:var(--skill-farming,var(--accent)) }
body[data-category="gathering"][data-gathering-method="mining"] { --activity-color:var(--skill-mining,var(--accent)) }
body[data-category="gathering"][data-gathering-method="fishing"] { --activity-color:var(--skill-fishing,var(--accent)) }
body[data-category="gathering"][data-gathering-method="foraging"] { --activity-color:var(--skill-foraging,var(--accent)) }
body[data-category="gathering"][data-gathering-method="hunting"] { --activity-color:var(--skill-hunting,var(--accent)) }
body[data-category="gathering"] #gatheringNavigation button[aria-pressed="true"] { color:var(--activity-color); border-color:var(--activity-color); background:color-mix(in srgb,var(--activity-color) 8%,var(--panel)); box-shadow:inset 0 -2px var(--activity-color) }
body[data-category="gathering"] .stat-instant { border-color:color-mix(in srgb,var(--activity-color) 35%,var(--line)); background:color-mix(in srgb,var(--activity-color) 6%,var(--panel)) }
body[data-category="gathering"] .stat-instant > strong { color:var(--activity-color) }
body[data-category="gathering"] .money-results-column .stat > strong.income-unavailable { color:var(--muted) }
#gatheringSetup .gathering-modes { gap:2px }
#gatheringSetup .gathering-modes button { min-width:0; padding-inline:var(--space-2); font-size:var(--text-xs); white-space:normal }
.gathering-profile-lookup { display:grid; gap:var(--space-2); margin-top:var(--space-5) }
.gathering-profile-lookup > div { display:flex; gap:var(--space-2); min-width:0 }
.gathering-profile-lookup input { flex:1; min-width:0 }
.gathering-profile-lookup button { flex:0 0 auto; padding:var(--space-2) var(--space-3); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); font-size:var(--text-sm) }
.gathering-inline-status { margin:var(--space-3) 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.65; overflow-wrap:anywhere }
.gathering-inline-status:empty { display:none }
#gatheringSourceStatus + .field-label { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-soft) }
.gathering-profile-choice { margin-top:var(--space-4) }
.gathering-profile-card { margin:var(--space-4) 0; padding:var(--space-3); background:var(--input); border:1px solid var(--line-soft); border-radius:var(--radius) }
.gathering-player { display:flex; align-items:center; gap:var(--space-3); min-width:0 }
.gathering-player > img { width:40px; height:40px; border-radius:var(--radius-sm); image-rendering:pixelated; flex:0 0 40px }
.gathering-player > div { min-width:0 }
.gathering-player strong { display:block; color:var(--text); font-size:var(--text-base); overflow-wrap:anywhere }
.gathering-player span { display:block; margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); overflow-wrap:anywhere }
.gathering-profile-facts { display:grid; gap:var(--space-2); margin:var(--space-3) 0 0 }
.gathering-profile-facts > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-3); font-size:var(--text-xs); line-height:1.5 }
.gathering-profile-facts dt { color:var(--quiet) }
.gathering-profile-facts dd { margin:0; color:var(--text); text-align:right; overflow-wrap:anywhere }
.gathering-profile-time,.gathering-profile-empty { margin:var(--space-3) 0 0; color:var(--quiet); font-size:var(--text-xs); line-height:1.6 }
.gathering-profile-empty { margin:0 }
.gathering-stat-source { padding:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input); color:var(--muted); font-size:var(--text-xs); line-height:1.6 }
.gathering-stat-source strong { display:block; margin-bottom:var(--space-1); color:var(--text); font-weight:550 }
.gathering-tracker-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5) }
.gathering-tracker-actions button { flex:1 1 auto; min-height:40px; padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised); color:var(--text); font-size:var(--text-sm) }
.gathering-tracker-actions button.primary { width:100%; color:var(--bg); border-color:var(--activity-color); background:var(--activity-color); font-weight:650 }
.gathering-tracker-actions button.gathering-discard { flex-basis:100%; min-height:32px; border-color:transparent; background:transparent; color:var(--quiet); font-size:var(--text-xs) }
.gathering-tracker-actions [hidden] { display:none }
.gathering-tracker-actions button:disabled,.gathering-profile-lookup button:disabled { opacity:.5; cursor:not-allowed }
.gathering-session-status { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--muted); background:var(--input); font-size:var(--text-xs) }
.gathering-session-status.is-active { color:var(--activity-color); border-color:color-mix(in srgb,var(--activity-color) 40%,var(--line)) }
.gathering-session-status.is-active::before { content:""; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor }
.gathering-session-clock { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-soft); background:var(--input) }
.gathering-session-clock > div { flex:1 1 160px; min-width:0 }
.gathering-session-clock span { display:block; color:var(--quiet); font-size:var(--text-xs) }
.gathering-session-clock strong { display:block; margin-top:var(--space-2); font-size:var(--text-xl); line-height:1.3; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums }
.gathering-session-clock b { display:block; margin-top:var(--space-2); color:var(--text); font-size:var(--text-lg); font-weight:550; font-variant-numeric:tabular-nums }
.gathering-session-clock small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs) }
#gatheringPanel .income-loss { color:var(--red) }
.gathering-tracking-notes { padding:var(--space-3) var(--space-4); border-top:1px solid var(--line-soft); color:var(--muted); font-size:var(--text-xs); line-height:1.7 }
.gathering-tracking-notes > p { margin:0 0 var(--space-3) }
.gathering-tracking-notes details p:last-child { margin-bottom:0 }
.gathering-tracking-notes summary { color:var(--text); cursor:pointer; font-size:var(--text-sm) }
.gathering-tracking-notes .gathering-supported-items { color:var(--quiet) }
.gathering-history { border-top:1px solid var(--line-soft); padding:var(--space-4) }
.gathering-section-title { display:flex; gap:var(--space-3); align-items:center; margin:0; color:var(--text); font-size:var(--text-sm); font-weight:600; min-height:32px }
.gathering-section-title > span { margin-left:auto; color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.gathering-history > p { color:var(--quiet); font-size:var(--text-xs); line-height:1.6 }
.gathering-history article { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-3) 0; border-top:1px solid var(--line-soft) }
.gathering-history article > div { flex:1 1 180px; min-width:0 }
.gathering-history article strong,.gathering-history article b { display:block; font-weight:550; font-size:var(--text-sm); color:var(--text) }
.gathering-history article span,.gathering-history article small { display:block; margin-top:var(--space-1); font-size:var(--text-xs); color:var(--quiet); line-height:1.6; overflow-wrap:anywhere }
.gathering-history article > div:last-child { text-align:right }
@media(max-width:600px) {
 .gathering-session-clock,.gathering-tracking-notes { padding:var(--space-3) var(--space-4) }
 .gathering-history article > div:last-child { text-align:left }
}

/* Compact measured runs: the chooser holds the catalogue, the form holds selected drops only. */
#gatheringSetup .gathering-selected-drops { display:grid; gap:var(--space-2); margin-top:var(--space-4) }
#gatheringSetup .gathering-selected-drops .drop-option { display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:var(--space-2); padding:var(--space-3); background:var(--input); border-color:var(--line-soft) }
.gathering-drop-name { grid-column:1; color:var(--text); font-size:var(--text-sm); line-height:1.5; overflow-wrap:anywhere }
.gathering-drop-quantity { grid-column:1; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-width:0; color:var(--quiet); font-size:var(--text-xs) }
#gatheringSetup .gathering-drop-quantity .drop-amount { width:100px; min-height:36px; flex:0 1 100px; margin:0 }
.gathering-selected-drops .icon-button { grid-column:2; grid-row:1 / span 2; width:32px; height:36px; padding:7px; align-self:center }
.gathering-selected-drops .icon-button .icon { width:16px; height:16px }
.gathering-drop-chooser { margin-top:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.gathering-drop-chooser > summary { display:flex; align-items:center; gap:var(--space-2); min-height:40px; padding:var(--space-2) var(--space-3); color:var(--text); cursor:pointer; font-size:var(--text-sm) }
.gathering-drop-chooser[open] { padding:0 var(--space-3) var(--space-3) }
.gathering-drop-chooser[open] > summary { margin-inline:calc(var(--space-3) * -1) }
.gathering-drop-chooser > input { width:100%; margin:var(--space-2) 0 0 }
.gathering-drop-results { display:grid; max-height:260px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; margin-top:var(--space-2) }
.gathering-drop-results button { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); width:100%; min-height:40px; padding:var(--space-2); color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; text-align:left; font-size:var(--text-xs); line-height:1.5 }
.gathering-drop-results button:hover { background:var(--raised) }
.gathering-drop-results button > span:first-child { min-width:0; overflow-wrap:anywhere }
.gathering-timer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-4) 0 var(--space-2); padding:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.gathering-timer > div:first-child { flex:1 1 100px; min-width:0 }
.gathering-timer span { display:block; color:var(--quiet); font-size:var(--text-xs) }
.gathering-timer output { display:block; margin-top:var(--space-1); color:var(--activity-color); font-size:var(--text-xl); font-weight:600; font-variant-numeric:tabular-nums }
.gathering-timer-buttons { display:flex; flex-wrap:wrap; gap:var(--space-2) }
.gathering-timer-buttons button,.gathering-save { min-height:36px; padding:var(--space-2) var(--space-3); color:var(--text); background:var(--raised); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:var(--text-xs) }
.gathering-timer + .drop-hint { margin:var(--space-2) 0 var(--space-4) }
.gathering-save { margin-top:var(--space-4); width:100%; color:var(--activity-color); border-color:color-mix(in srgb,var(--activity-color) 40%,var(--line)) }
.gathering-save:disabled { opacity:.5; cursor:not-allowed }
.gathering-save-status { margin:0; padding:var(--space-3) var(--space-4); color:var(--muted); font-size:var(--text-xs); line-height:1.6 }
.gathering-save-status:empty { display:none }
.gathering-run-details { padding:var(--space-4) }
.gathering-run-details > .gathering-breakdown { padding:0 }
.gathering-run-details .income-math { margin:var(--space-3) 0 }
.gathering-run-details .gathering-message { margin:var(--space-3) 0 }
.gathering-run-details .gathering-footnote { padding:var(--space-3) 0 0 }
.gathering-history .gathering-compare { display:grid; gap:var(--space-2); color:var(--muted); font-size:var(--text-xs); margin-top:var(--space-4) }
.gathering-compare select { width:100%; min-width:0 }
.gathering-history .gathering-comparison { color:var(--text) }
.gathering-saved-run { border-top:1px solid var(--line-soft); margin-top:var(--space-3); padding-top:var(--space-3) }
.gathering-saved-run > header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-2); min-height:40px; color:var(--text); font-size:var(--text-sm) }
.gathering-saved-run header small { display:block; margin-top:var(--space-1); color:var(--quiet); font-size:var(--text-xs); line-height:1.5 }
.gathering-saved-run header b { font-weight:550; font-variant-numeric:tabular-nums }
.gathering-saved-run .drop-hint { margin:var(--space-1) 0 0 }
#gatheringSetup :is(button,input,select,summary):focus-visible,#gatheringPanel :is(button,input,select,summary):focus-visible { outline:2px solid var(--activity-color); outline-offset:2px }
@media (max-width:400px) { .gathering-timer-buttons { width:100% } .gathering-timer-buttons button { flex:1 } }

/* The tier comparison is primary. Budget optimization follows it. */
#minionNote { margin:0 0 var(--space-4); font-size:var(--text-xs); line-height:1.7 }
#minionNote:empty { display:none }
#minionBasis { max-width:58ch; margin:var(--space-2) 0 0; font-size:var(--text-xs); line-height:1.6 }
.minion-settings details[open] .minion-controls { margin-top:var(--space-4) }
.minion-heading .sort-label { margin-left:0 }
#minionPanel > .optimizer-panel { margin:var(--space-5) 0 0; background:var(--panel); border-color:var(--line) }
.optimizer-panel > .panel-title { display:flex; flex-wrap:wrap; align-items:center; width:100%; padding:var(--space-5); gap:var(--space-3); color:var(--text); border-bottom:1px solid var(--line-soft) }
.optimizer-panel > .panel-title > span { font-size:var(--text-base); font-weight:600; color:var(--text) }
.optimizer-body { padding:var(--space-5) }
.optimizer-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:var(--space-4) }
.optimizer-actions { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-top:var(--space-5) }
.optimizer-actions p { color:var(--quiet); font-size:var(--text-xs); line-height:1.7; margin:0; max-width:48ch }
.optimizer-actions .primary { color:var(--bg); background:var(--accent); border-color:var(--accent); min-height:42px; font-size:var(--text-sm); white-space:nowrap }
.optimizer-actions .primary:hover:not(:disabled) { background:color-mix(in srgb,var(--accent) 85%,white); border-color:var(--accent) }
#optimizerStatus { margin:var(--space-4) 0 0; font-size:var(--text-xs); color:var(--muted); line-height:1.6 }
#optimizerStatus:empty { display:none }
.optimizer-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:var(--space-2); margin-top:var(--space-4) }
.optimizer-choices button { display:flex; flex-direction:column; align-items:start; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); text-align:left; white-space:normal }
.optimizer-choices button strong { color:var(--text); font-size:var(--text-sm) }
.optimizer-choices button span { color:var(--muted); font-size:var(--text-xs); line-height:1.5 }
#minionRows .income-loss,#tradeContent .detail-metrics strong.income-loss { color:var(--red) }
.optimizer-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--space-3) }
.optimizer-groups article { padding:var(--space-3); border:1px solid var(--line-soft); border-left:3px solid var(--accent); border-radius:var(--radius-sm); background:var(--input) }
.optimizer-groups article > div { display:flex; justify-content:space-between; gap:var(--space-3) }
.optimizer-groups strong { font-size:var(--text-base); color:var(--text) }
.optimizer-groups p { font-size:var(--text-xs); color:var(--quiet); margin:var(--space-2) 0; line-height:1.6 }
.optimizer-groups .profit { color:var(--green); font-size:var(--text-sm) }
.minion-coverage { margin:var(--space-5) 0 0; padding:var(--space-4) var(--space-1) 0; border-color:var(--line); font-size:var(--text-sm); line-height:1.7; color:var(--muted) }
.minion-coverage summary { color:var(--muted); font-size:var(--text-sm) }

/* Each plan starts with a clear net result, followed by buying and execution. */
#tradeContent { container:calculator-detail / inline-size }
#tradeContent .detail-metrics,.optimizer-stats.detail-metrics { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-3); margin:var(--space-5) 0 }
#tradeContent .detail-metrics > div,.optimizer-stats.detail-metrics > div { display:block; min-width:0; padding:var(--space-4); border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--input) }
#tradeContent .detail-metrics > .primary-metric,.optimizer-stats.detail-metrics > .primary-metric { border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); background:color-mix(in srgb,var(--accent) 9%,var(--panel)) }
#tradeContent .detail-metrics span,.optimizer-stats.detail-metrics span { margin-bottom:var(--space-2); color:var(--muted); font-size:var(--text-xs); line-height:1.5 }
#tradeContent .detail-metrics strong,.optimizer-stats.detail-metrics strong { font-size:var(--text-xl); color:var(--text); line-height:1.4; overflow-wrap:anywhere }
#tradeContent .detail-metrics .profit,.optimizer-stats.detail-metrics .profit { color:var(--green) }
#tradeContent .detail-metrics .fusion-loss { color:var(--red) }
#tradeContent .metric-context { display:block; margin-top:var(--space-2); color:var(--quiet); font-size:var(--text-xs); line-height:1.5 }
#tradeContent .detail-section { margin:var(--space-6) 0 }
#tradeContent h3 { font-size:var(--text-base); color:var(--text); margin:0 0 var(--space-4); font-weight:600 }
#tradeContent .detail-quantity { margin:var(--space-5) 0; gap:var(--space-3); align-items:end }
#tradeContent .detail-quantity label { display:flex; flex-direction:column; align-items:start; gap:var(--space-2); font-size:var(--text-sm); color:var(--muted) }
#tradeContent .detail-quantity input { width:140px }
#tradeContent .detail-quantity small { font-size:var(--text-xs); color:var(--quiet); margin-bottom:var(--space-3) }
#tradeContent :is(.detail-note,.direct-comparison) { font-size:var(--text-sm); line-height:1.8; overflow-wrap:anywhere }
#tradeContent .direct-comparison { border:1px solid var(--line); background:var(--input); color:var(--muted); border-radius:var(--radius); padding:var(--space-4) }
#tradeContent .shopping { gap:var(--space-2) }
#tradeContent .ingredient,.optimizer-body .ingredient { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input); min-width:0 }
#tradeContent .ingredient > div:first-child { flex:1; min-width:0; display:flow-root }
#tradeContent .ingredient > strong { flex:1; min-width:0 }
#tradeContent .ingredient strong,.optimizer-body .ingredient strong { font-size:var(--text-sm); line-height:1.6; overflow-wrap:anywhere; color:var(--text) }
#tradeContent .ingredient span,.optimizer-body .ingredient span { font-size:var(--text-xs); line-height:1.6; color:var(--quiet) }
#tradeContent .ingredient .game-image { width:var(--money-art-size,40px); height:var(--money-art-size,40px); max-width:var(--money-art-size,40px); min-width:var(--money-art-size,40px); flex:0 0 var(--money-art-size,40px); overflow:hidden; margin-right:var(--space-3) }
#tradeContent .ingredient .amount,.optimizer-body .ingredient .amount { flex:0 0 auto; min-width:0; text-align:right }
#tradeContent .ingredient .amount strong { font-size:var(--text-base); color:var(--text) }
#tradeContent .sale-step { padding:var(--space-4); border-color:var(--line); border-left-color:var(--accent); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--accent) 5%,var(--panel)); font-size:var(--text-sm); color:var(--muted) }
#tradeContent .more-math,.optimizer-body .more-math { margin-top:var(--space-6); padding-top:var(--space-4); border-color:var(--line) }
#tradeContent summary,.optimizer-body summary { font-size:var(--text-sm); color:var(--muted); line-height:1.6 }
#tradeContent details[open] > summary,.optimizer-body details[open] > summary { color:var(--accent) }
#tradeContent .math > div,.optimizer-body .math > div { font-size:var(--text-sm); gap:var(--space-4); padding:var(--space-3) 0 }
#tradeContent .math dt,.optimizer-body .math dt { color:var(--muted) }
#tradeContent .math dd,.optimizer-body .math dd { overflow-wrap:anywhere }
#tradeContent .dialog-foot { font-size:var(--text-xs); color:var(--quiet); padding-top:var(--space-4); line-height:1.6 }
#tradeContent .minion-detail-controls { gap:var(--space-3); margin-bottom:var(--space-4) }
#tradeContent .minion-detail-controls label { font-size:var(--text-sm) }
#tradeContent .equipment-summary { margin:0 0 var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); background:var(--input); font-size:var(--text-sm); color:var(--muted); line-height:1.6 }
#tradeContent .minion-storage { margin:var(--space-5) 0; padding:var(--space-4); background:var(--input); border-color:var(--line); border-radius:var(--radius); color:var(--muted); font-size:var(--text-sm) }
#tradeContent .minion-storage strong { font-size:var(--text-sm); color:var(--text) }
#tradeContent .minion-storage small { font-size:var(--text-xs) }
#tradeContent .minion-sale-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3) }
#tradeContent .minion-sale-grid button { padding:var(--space-3); background:var(--input); border-color:var(--line); border-radius:var(--radius); gap:var(--space-2) }
#tradeContent .minion-sale-grid button[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--panel)) }
#tradeContent .minion-sale-grid strong { color:var(--text); font-size:var(--text-lg); overflow-wrap:anywhere }
#tradeContent .minion-sale-grid strong.profit { color:var(--green) }
#tradeContent .minion-sale-grid strong.income-loss { color:var(--red) }
#tradeContent .minion-sale-grid span { font-size:var(--text-sm) }
#tradeContent .minion-sale-grid small { font-size:var(--text-xs) }
@container calculator-detail (max-width:560px) { #tradeContent .minion-sale-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@container calculator-detail (max-width:320px) { #tradeContent .minion-sale-grid { grid-template-columns:minmax(0,1fr) } }
#tradeContent .minion-detail-table { min-width:460px; font-size:var(--text-sm) }
#tradeContent .minion-detail-table th { background:var(--input); padding:var(--space-3); font-size:var(--text-xs); color:var(--quiet); line-height:1.5 }
#tradeContent .minion-detail-table td { padding:var(--space-3); line-height:1.6; vertical-align:middle }
#tradeContent .minion-detail-table .game-image { display:inline-flex; width:var(--money-art-compact,28px); height:var(--money-art-compact,28px); vertical-align:middle; margin-right:var(--space-2) }
.minion-rare-tag { margin-left:var(--space-2); color:var(--quiet); font-size:var(--text-xs) }
.minion-price-gap { color:var(--amber)!important; white-space:normal!important; line-height:1.6; max-width:220px }
.storage-warning { color:var(--amber)!important }
#tradeContent .auction-list article,#tradeContent .kat-steps article { background:var(--input); border-color:var(--line); border-radius:var(--radius-sm); padding:var(--space-4); gap:var(--space-3) }
#tradeContent .auction-list strong,#tradeContent .kat-steps strong { color:var(--text); font-size:var(--text-sm); line-height:1.6 }
#tradeContent .auction-list small,#tradeContent .kat-steps small { color:var(--quiet); font-size:var(--text-xs); line-height:1.7 }
#tradeContent .auction-list button { color:var(--accent); background:var(--raised); border-color:var(--line); font-size:var(--text-xs); min-height:36px }
.fusion-route-picker { display:flex; flex-direction:column; gap:var(--space-2); margin:0 0 var(--space-5); color:var(--muted); font-size:var(--text-sm) }
.fusion-route-picker .picker { width:100%; min-width:0 }
.fusion-route-picker .picker-text { white-space:normal; overflow-wrap:anywhere }
#tradeContent .fusion-tree-controls { justify-content:start; gap:var(--space-2); margin-bottom:var(--space-3) }
#tradeContent .fusion-tree-controls > span { color:var(--quiet); font-size:var(--text-xs) }
#tradeContent .fusion-tree-controls button { min-height:34px; padding:var(--space-2) var(--space-3); font-size:var(--text-xs) }
#tradeContent :is(.fusion-node,.fusion-card) { background:var(--input); border-color:var(--line); border-radius:var(--radius); min-width:0 }
#tradeContent .fusion-node.root-node { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)) }
#tradeContent .fusion-node > .fusion-node-head,#tradeContent .fusion-card > header { align-items:center; padding:var(--space-3); gap:var(--space-2); color:var(--text); min-width:0 }
#tradeContent :is(.fusion-node > .fusion-node-head,.fusion-card > header,.fusion-leaf) > .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:var(--money-art-compact,var(--item-art-compact)); max-width:var(--money-art-compact,var(--item-art-compact)); flex:0 0 var(--money-art-compact,var(--item-art-compact)); overflow:hidden; background:transparent; border-radius:var(--radius-sm) }
#tradeContent :is(.fusion-node > .fusion-node-head,.fusion-card > header,.fusion-leaf) > .game-image > img { max-width:100%; max-height:100%; object-fit:contain }
#tradeContent .fusion-card > header > div { flex:1; min-width:0; overflow-wrap:anywhere }
#tradeContent .fusion-number { width:26px; height:26px; flex:0 0 26px; background:var(--raised); border-color:var(--line); color:var(--accent); font-size:var(--text-xs) }
#tradeContent .fusion-stage { flex-shrink:0; display:block; color:var(--quiet); font-size:var(--text-xs) }
#tradeContent :is(.fusion-node,.fusion-card,.fusion-leaf) strong { font-size:var(--text-sm); color:var(--text); line-height:1.6 }
#tradeContent :is(.fusion-node .fusion-node-head,.fusion-card header,.fusion-leaf) small,#tradeContent .branch-need { font-size:var(--text-xs); color:var(--quiet); line-height:1.6 }
#tradeContent .fusion-children { min-width:0; padding:var(--space-3); gap:var(--space-3); border-top-color:var(--line-soft) }
#tradeContent .fusion-branch { padding-left:var(--space-3); border-color:var(--line) }
#tradeContent .fusion-branch::before { width:var(--space-3); background:var(--line) }
#tradeContent .fusion-leaf { background:var(--panel); border-color:var(--line-soft); gap:var(--space-2); padding:var(--space-3); min-width:0 }
#tradeContent .fusion-leaf > div { min-width:0 }
#tradeContent .fusion-source { flex-shrink:0; color:var(--accent); border-color:var(--line); background:var(--raised); font-size:var(--text-xs); line-height:1.5 }
#tradeContent .fusion-inputs { padding:var(--space-3); gap:var(--space-2) }
#tradeContent .fusion-input { font-size:var(--text-sm); line-height:1.6; color:var(--muted); background:var(--panel); border-color:var(--line-soft) }
#tradeContent .fusion-shared { font-size:var(--text-xs); color:var(--quiet) }
.fusion-catalogue-details > .game-image { width:64px; height:64px; margin-bottom:var(--space-4) }
.fusion-catalogue-details p { font-size:var(--text-sm); line-height:1.8; color:var(--muted) }
#tradeContent .quality-details p { font-size:var(--text-sm); line-height:1.7; color:var(--muted) }
#tradeContent .history-panel { padding-top:var(--space-4); border-color:var(--line) }
#tradeContent .history-heading { margin-top:var(--space-4) }
#tradeContent .history-range,#tradeContent .history-plot { background:var(--input); border-color:var(--line); border-radius:var(--radius-sm) }
#tradeContent .history-range button { font-size:var(--text-xs); min-height:32px }
#tradeContent .history-range button[aria-pressed="true"] { color:var(--accent); background:var(--raised); border-color:var(--line) }
#tradeContent .history-selector { font-size:var(--text-sm) }
#tradeContent .history-legend,#tradeContent .chart-readout,#tradeContent .history-caption { font-size:var(--text-xs); color:var(--quiet); line-height:1.7 }

/* Adapt to the result width after both navigation and settings rails are accounted for. */
@container (max-width:740px) {
 .money-workspace .rankings,.money-workspace .rankings tbody { display:block; min-width:0; width:100% }
 .money-workspace .rankings thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
 .money-workspace .rankings tbody { display:grid; gap:var(--space-2); padding:var(--space-3) }
 .money-workspace .rankings tbody tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2); padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--input) }
 .money-workspace .rankings td,.money-workspace .rankings td:first-child,.money-workspace .rankings td:last-child { display:block; width:auto; padding:0; min-width:0; max-width:none; border:0; text-align:left; white-space:normal }
 .money-workspace .rankings td.recipe { grid-column:1/-1; min-height:44px }
 .money-workspace .rankings td[data-label]::before { content:attr(data-label); display:block; color:var(--quiet); font-size:var(--text-xs); font-weight:400; margin-bottom:var(--space-1) }
 .money-workspace .rankings .market-context { font-size:var(--text-sm) }
 .money-workspace .rankings .row-action { align-self:end; text-align:right }
 .money-workspace .rankings .row-action button { max-width:100%; min-height:38px }
 .money-workspace #minionRows .row-action { grid-column:1/-1; padding-top:var(--space-3); border-top:1px solid var(--line-soft) }
 .money-workspace .rankings tr:has(.empty) { display:block; padding:0; border:0; background:none }
 .money-workspace .pager { flex-wrap:wrap }
 .optimizer-controls { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@container (min-width:561px) and (max-width:740px) {
 #minionTierResults .rankings { display:table; width:100%; min-width:0 }
 #minionTierResults .rankings thead { display:table-header-group; position:static; width:auto; height:auto; overflow:visible; clip-path:none }
 #minionTierResults #minionRows { display:table-row-group; padding:0 }
 #minionTierResults #minionRows tr { display:table-row; padding:0; border:0; border-radius:0; background:transparent }
 #minionTierResults #minionRows tr:hover { background:var(--raised) }
 #minionTierResults .rankings th,#minionTierResults #minionRows td { padding:var(--space-3) }
 #minionTierResults #minionRows td { display:table-cell; border-bottom:1px solid var(--line-soft); vertical-align:middle }
 #minionTierResults #minionRows tr:last-child td { border-bottom:0 }
 #minionTierResults #minionRows .num { text-align:right }
 #minionTierResults #minionRows td[data-label]::before { display:none }
 #minionTierResults #minionRows .recipe { min-width:160px }
 #minionTierResults #minionRows .row-action { width:1%; white-space:nowrap; border-top:0; text-align:right }
 #minionTierResults #minionRows .row-action button { min-width:80px; white-space:nowrap }
}
@media(max-width:1100px) {
 .money-workspace { grid-template-columns:minmax(0,1fr) }
 .setup-top,.minion-settings .minion-controls,.minion-settings details[open] .minion-controls { grid-template-columns:repeat(2,minmax(0,1fr)) }
 #settings .settings-grid,.pet-route-settings,.gathering-stats,.gathering-fees .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end }
 .setup-top > :only-child,.setup-top:has(#buyMethodLabel.hidden) > .budget-field { grid-column:1 / -1 }
 #settings .settings-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-items:end; margin-top:var(--space-4) }

 #settings .settings-fields > .settings-grid:not(.hidden) { display:contents }
 #dungeonSetup:not(.hidden) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-items:end }
 #dungeonSetup > :is(.setup-heading,.gathering-modes,.dc-key,.gathering-fees) { grid-column:1 / -1; margin:0 }
 .drop-list { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
}
@media(max-width:600px) {
 .method-navigation { gap:var(--space-2); margin-bottom:var(--space-4) }
 .method-navigation button { flex:1 1 auto; padding-inline:var(--space-3) }
 .money-workspace { gap:var(--space-4) }
 .money-controls .setup { padding:var(--space-4) }
 .money-results-column > .stats { grid-template-columns:minmax(0,1fr); gap:var(--space-2); margin-bottom:var(--space-4) }
 .money-results-column .stat { padding:var(--space-3) var(--space-4) }
 .money-results-column .stat > strong { font-size:var(--text-xl) }
 .money-workspace .results-header,.minion-heading { padding:var(--space-4) }
 .money-workspace .toolbar { padding:var(--space-4); gap:var(--space-3) }
 .money-workspace .toolbar .search-field { flex-basis:100% }
 .money-workspace .toolbar .sort-label { flex:1 1 120px }
 .money-workspace .sort-label .picker { width:100% }
 .result-filters { padding:0 var(--space-4) var(--space-4) }
 .money-workspace .mode-note { margin:0 var(--space-4) var(--space-4) }
 .money-workspace .pager { padding:var(--space-4); flex-direction:column; align-items:start }
 .money-workspace .pager > div { width:100%; justify-content:space-between; gap:var(--space-2) }
 .drop-list { grid-template-columns:minmax(0,1fr); max-height:260px }
 .gathering-breakdown { padding:0 var(--space-4) }
 .gathering-breakdown > div { grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr); gap:var(--space-2) var(--space-3); padding:var(--space-3) 0 }
 .gathering-breakdown .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:var(--money-art-compact,var(--item-art-compact)); max-width:var(--money-art-compact,var(--item-art-compact)) }
 .gathering-breakdown b { grid-column:2; text-align:left }
 .gathering-breakdown b.income-unpriced { max-width:none }
 .gathering-footnote,.gathering-empty { padding:var(--space-4) }
 .gathering-message,.income-math { margin:var(--space-4) }
 .minion-heading .sort-label { width:100% }
 .optimizer-panel > .panel-title { padding:var(--space-4) }
 .optimizer-body { padding:var(--space-4) }
 .optimizer-actions { align-items:start; flex-direction:column }
 .optimizer-actions .primary { width:100% }
 #tradeContent .detail-metrics,.optimizer-stats.detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) }
 #tradeContent .detail-metrics > .primary-metric,.optimizer-stats.detail-metrics > .primary-metric { grid-column:1/-1 }
 #tradeContent .detail-metrics > div,.optimizer-stats.detail-metrics > div { padding:var(--space-3) }
 #tradeContent .detail-metrics strong,.optimizer-stats.detail-metrics strong { font-size:var(--text-lg) }
 #tradeContent .detail-metrics > .primary-metric strong,.optimizer-stats.detail-metrics > .primary-metric strong { font-size:var(--text-xl) }
 #tradeContent .ingredient,.optimizer-body .ingredient { flex-wrap:wrap; padding:var(--space-3) }
 #tradeContent .ingredient .amount,.optimizer-body .ingredient .amount { flex:1 1 100%; padding-top:var(--space-2); border-top:1px solid var(--line-soft) }
 #tradeContent .fusion-node > .fusion-node-head,#tradeContent .fusion-card > header { flex-wrap:wrap }
 #tradeContent .fusion-stage { flex-basis:100%; text-align:right }
 #tradeContent .fusion-children { padding:var(--space-2); gap:var(--space-2) }
 #tradeContent .fusion-branch { padding-left:var(--space-2) }
 #tradeContent .fusion-branch::before { width:var(--space-2) }
 #tradeContent .fusion-leaf { flex-wrap:wrap; padding:var(--space-2) }
 #tradeContent .fusion-leaf .fusion-source { margin-left:auto }
}
@media(max-width:440px) {
 #dungeonSetup:not(.hidden),#settings .settings-fields { grid-template-columns:minmax(0,1fr) }
 .setup-top,.minion-settings .minion-controls,.minion-settings details[open] .minion-controls,#settings .settings-grid,.pet-route-settings,.gathering-stats,.gathering-fees .settings-grid,.optimizer-controls { grid-template-columns:minmax(0,1fr) }
 #tradeContent .minion-sale-grid { grid-template-columns:minmax(0,1fr) }
 .money-workspace .tabs { width:100% }
 .money-workspace .tabs button { flex:1; padding-inline:var(--space-2) }
}

/* Item panel, 0.7.2. Buy list as a row of tiles: art beside the count and name, the total, and any
   badge. The unit price is the tile's tooltip; it is the figure people rarely need and it doubled the height. */
.buy-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--space-2); align-items:stretch }
.buy-tile { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.buy-tile .game-image { flex:0 0 var(--money-art-size,var(--item-art-compact)); width:var(--money-art-size,var(--item-art-compact)); height:var(--money-art-size,var(--item-art-compact)); min-width:var(--money-art-size,var(--item-art-compact)); max-width:var(--money-art-size,var(--item-art-compact)); border:0; padding:0; background:transparent }
.timebag-item .game-image,.timebag-detail-item .game-image { width:var(--money-art-size,var(--item-art-size)); height:var(--money-art-size,var(--item-art-size)); flex:0 0 var(--money-art-size,var(--item-art-size)) }
.buy-tile > div { display:grid; gap:2px; min-width:0; justify-items:start }
.buy-tile strong { color:var(--text); font-size:var(--text-sm); font-weight:550; line-height:1.35; overflow-wrap:anywhere }
.buy-tile .buy-qty { color:var(--accent); font-variant-numeric:tabular-nums }
.buy-tile b { color:var(--muted); font-size:var(--text-sm); font-weight:500; font-variant-numeric:tabular-nums }
.buy-tile .buy-check { margin-top:2px }
.detail-metrics .direct-comparison strong { color:var(--muted) }

/* Build path: one numbered row per step. Inputs, an arrow, then the result with its merge count. */
.build-steps { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2) }
.build-step { display:grid; grid-template-columns:24px minmax(0,1fr) auto auto; align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.build-step.is-target { border-color:color-mix(in srgb,var(--accent) 45%,var(--line-soft)); background:color-mix(in srgb,var(--accent) 7%,var(--input)) }
.build-num { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--raised); color:var(--muted); font-size:var(--text-xs); font-weight:600 }
.build-step.is-target .build-num { background:var(--accent); color:#10131a }
.build-parts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0 }
.build-part { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px; border-radius:999px; background:var(--raised); color:var(--text); font-size:var(--text-sm); white-space:nowrap }
.build-part .game-image { width:var(--money-art-inline,22px); height:var(--money-art-inline,22px); min-width:var(--money-art-inline,22px); max-width:var(--money-art-inline,22px); flex:0 0 var(--money-art-inline,22px); border:0; padding:0; background:transparent }
.build-part b { font-weight:600; font-variant-numeric:tabular-nums }
.build-part small { color:var(--quiet); font-size:var(--text-xs) }
.build-part.is-made { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent) }
.build-plus,.build-arrow { color:var(--quiet); font-size:var(--text-sm) }
.build-result { display:grid; justify-items:end; gap:4px }
.build-out { background:color-mix(in srgb,var(--accent) 16%,var(--raised)) }
.build-count { color:var(--quiet); font-size:var(--text-xs); white-space:nowrap }
@media (max-width:560px) {
 .build-step { grid-template-columns:24px minmax(0,1fr) }
 .build-arrow { display:none }
 .build-result { grid-column:2; justify-items:start }
}

/* These rankings show the profit in the list itself. */
body[data-category="gathering"][data-gather-view="rank"] .money-results-column > .stats,
body[data-category="minions"] .money-results-column > .stats { display:none }
body[data-category="gathering"] .stat-badge, body[data-category="minions"] .stat-badge { display:none }

/* Dungeon chests */
#dungeonPanel { container-type:inline-size }
.dc-key { margin:var(--space-4) 0 }
.dc-floors { display:grid; gap:var(--space-2); padding:var(--space-4) }
.dc-floor { border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--panel) }
.dc-floor.is-best { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) }
.dc-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(70px,.8fr) 100px minmax(60px,.6fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-3) var(--space-4) }
.dc-name,.dc-value,.dc-minutes { display:grid; gap:2px; min-width:0 }
.dc-name small,.dc-value small,.dc-minutes small { color:var(--quiet); font-size:var(--text-xs) }
.dc-name small.dc-unpriced { color:var(--amber) }
.dc-notice { margin:0; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--amber) 8%,transparent); color:var(--amber); font-size:var(--text-sm) }
.dc-value b { font-variant-numeric:tabular-nums }
.dc-minutes input { width:100%; min-height:32px }
.dc-toggle { min-height:32px; padding:var(--space-1) var(--space-3); font-size:var(--text-sm) }
.dc-detail { padding:0 var(--space-4) var(--space-4); border-top:1px solid var(--line-soft) }
.dc-detail h3 { font-size:var(--text-sm); margin:var(--space-4) 0 var(--space-2); color:var(--muted) }
.dc-chests { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-2); margin-top:var(--space-3) }
.dc-chests > div { display:grid; gap:2px; padding:var(--space-2) var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm) }
.dc-chests > div.is-best { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) }
.dc-chests small { color:var(--quiet); font-size:var(--text-xs) }
.dc-source { margin-top:var(--space-4) }
@media (max-width:760px){ .dc-row { grid-template-columns:1fr 1fr; } .dc-name { grid-column:1/-1 } .dc-toggle { grid-column:1/-1 } }
@container (max-width:520px){ .dc-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .dc-name,.dc-toggle { grid-column:1/-1 } }
/* Greenhouse keeps the board and its controls in one workbench. */
.money-workspace:has(#greenhousePanel:not(.hidden)) { grid-template-columns:minmax(0,1fr) }
.money-workspace:has(#greenhousePanel:not(.hidden)) > .money-controls { display:none }
#greenhousePanel { overflow:visible; box-shadow:none }
#greenhousePanel .results-header { position:relative; align-items:center; border-radius:var(--radius-lg) var(--radius-lg) 0 0 }
#greenhousePanel .results-header > div { min-width:0 }
#greenhousePanel .results-header .drop-hint { margin:var(--space-1) 0 0 }
#greenhousePanel .field-label { display:flex; flex-direction:column; gap:var(--space-2); width:auto; min-width:0; margin:0; color:var(--muted); font-size:var(--text-sm); font-weight:500 }
#greenhousePanel .field-label :is(input,select) { width:100%; min-width:0 }
#greenhousePanel .drop-tick { margin:0; color:var(--muted); font-size:var(--text-sm) }
#greenhousePanel .drop-hint { color:var(--quiet); font-size:var(--text-xs); line-height:1.5 }
#greenhousePanel button.is-on { border-color:var(--accent); color:var(--accent) }
#greenhousePanel .gh-modes { margin:0; flex-wrap:wrap }
#greenhousePanel .gh-modes button { flex:1; min-width:0; padding:var(--space-2); white-space:nowrap }
.gh-workbench { display:grid; grid-template-columns:minmax(0,1fr) 304px; align-items:start }
.gh-canvas { display:grid; gap:var(--space-4); min-width:0; padding:var(--space-4) }
.gh-planner-controls { display:grid; align-self:stretch; align-content:start; gap:var(--space-4); min-width:0; padding:var(--space-4); border-left:1px solid var(--line-soft) }
#greenhousePanel .gh-planner-controls :is(input:not([type="checkbox"]),select) { width:100%; min-width:0; max-width:100%; box-sizing:border-box }
.gh-board-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-2) }
.gh-board-tools .gh-modes { width:auto }
.gh-board-tools .gh-actions { margin:0 }
.gh-board-tools > small { color:var(--quiet); font-size:var(--text-xs) }
.gh-inline-controls,.gh-profit-controls { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-4); padding:var(--space-4); border-bottom:1px solid var(--line-soft) }
.gh-inline-controls > .field-label { flex:1 1 200px; max-width:360px }
.gh-inline-controls > .gh-qty,.gh-inline-controls > .field-label:has(#ghTreeQty) { flex:0 1 88px }
.gh-inline-controls > .gh-modes { align-self:end }
#greenhousePanel[data-gh-screen="tree"] .gh-inline-controls > .gh-modes { flex:0 1 auto; max-width:100% }
#greenhousePanel[data-gh-screen="tree"] .gh-inline-controls > .gh-modes button { flex:0 1 auto; padding-inline:var(--space-3); white-space:normal }
.gh-inline-controls > .drop-hint,.gh-profit-controls > .drop-hint { flex-basis:100%; margin:0 }
.gh-profit-controls > .field-label { flex:1 1 144px; max-width:240px }
.gh-profit-controls > .drop-tick { min-height:var(--control-height); display:flex; align-items:center }
.gh-full { width:100% }
.gh-actions { display:flex; flex-wrap:wrap; gap:var(--space-2) }
.gh-actions button { flex:1 1 auto }
.gh-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2) }
.gh-range-value { display:block; color:var(--quiet); font-size:var(--text-xs); font-weight:500 }
.gh-range-value b { color:var(--text) }
.gh-price { float:right; color:var(--text); font-weight:600 }
.gh-price-note { display:block; clear:both; padding-top:2px; color:var(--amber); font-size:var(--text-xs); font-weight:500 }
#greenhousePanel .gh-primary { border-color:var(--accent); background:var(--accent); color:var(--bg); font-weight:650 }
#greenhousePanel .gh-primary:hover:not(:disabled) { background:color-mix(in srgb,var(--accent) 88%,white) }
.gh-primary:disabled { opacity:.45 }
.gh-x { min-width:var(--space-8); padding:0; font-size:var(--text-base); line-height:1 }
.gh-search { width:100%; margin:0 }
.gh-add { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:var(--space-2); align-items:end }
.gh-add > * { min-width:0 }
#greenhousePanel .gh-qty input { padding-inline:var(--space-1); text-align:center }
.gh-targets { display:grid; gap:var(--space-2) }
.gh-targets > div { display:grid; grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr) auto auto; gap:var(--space-2); align-items:center; padding:var(--space-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input) }
.gh-targets strong { display:block; color:var(--text); font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere }
.gh-targets small { display:block; color:var(--quiet); font-size:var(--text-xs) }
.gh-targets button { min-height:var(--space-8); padding:0 var(--space-2); font-size:var(--text-xs) }
.gh-targets .game-image,.gh-art-blank { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-art-blank { display:block }
.gh-options,.gh-more { min-width:0; padding-top:var(--space-3); border-top:1px solid var(--line-soft) }
.gh-options > summary { padding:var(--space-1) 0; width:100%; color:var(--muted); font-size:var(--text-sm) }
.gh-options[open] > summary { margin-bottom:var(--space-3); color:var(--text) }
.gh-more > .gh-more-title { margin:0 0 var(--space-3); padding:var(--space-1) 0; color:var(--text); font-size:var(--text-sm); font-weight:600 }
.gh-options > :not(summary) + :not(summary) { margin-top:var(--space-3) }
.gh-more > div { display:grid; gap:var(--space-4) }
.gh-more > div > .gh-section { padding:var(--space-3) 0 }
.gh-more > div > .gh-more { padding-top:var(--space-3) }
.gh-more > div > .drop-hint { margin:0 }
.gh-milestones,.gh-warnings { display:grid; gap:0; margin:0; padding:0; list-style:none; font-size:var(--text-xs) }
.gh-milestones li { display:grid; grid-template-columns:104px minmax(0,1fr) auto; align-items:baseline; gap:var(--space-2) var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--line-soft) }
.gh-milestones li:last-child { border-bottom:0 }
.gh-milestones b { color:var(--text); font-size:var(--text-sm); font-weight:600 }
.gh-milestones span { color:var(--muted); overflow-wrap:anywhere }
.gh-milestones small { color:var(--quiet); font-variant-numeric:tabular-nums }
.gh-warnings li { padding:var(--space-2) 0; color:var(--amber); overflow-wrap:anywhere }
.gh-effects-inline { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); margin-top:var(--space-2); font-size:var(--text-xs) }
.gh-effect.is-good { color:var(--green) }
.gh-effect.is-bad { color:var(--red) }
.gh-rarity-dot { display:block; width:var(--space-2); height:var(--space-2); margin:auto; border-radius:50%; background:currentColor }
.gh-rarity-dot.rarity-common { color:var(--text) } .gh-rarity-dot.rarity-uncommon { color:#55d67b } .gh-rarity-dot.rarity-rare { color:#8faaff } .gh-rarity-dot.rarity-epic { color:#b271f0 } .gh-rarity-dot.rarity-legendary { color:#f0b544 } .gh-rarity-dot.rarity-mythic { color:#ff66cc }
.gh-save { display:flex; gap:var(--space-2); margin:0 0 var(--space-3) }
.gh-save input { flex:1 1 auto; width:0 }
.gh-mini-facts,.gh-layout-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) }
.gh-mini-facts.is-one { grid-template-columns:minmax(0,1fr) }
.gh-mini-facts > div,.gh-layout-facts > div { display:grid; align-content:start; gap:var(--space-1); min-width:0 }
.gh-mini-facts small,.gh-layout-facts small { color:var(--quiet); font-size:var(--text-xs) }
.gh-mini-facts b,.gh-layout-facts b { color:var(--text); font-size:var(--text-base); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.gh-mini-facts b em,.gh-layout-facts b em { color:var(--quiet); font-size:var(--text-xs); font-style:normal; font-weight:500 }
.gh-mini-facts span,.gh-layout-facts span { color:var(--quiet); font-size:var(--text-xs) }
.gh-layout-facts { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); padding-top:var(--space-3); border-top:1px solid var(--line-soft) }
.gh-plan-summary { width:100%; max-width:560px; margin-inline:auto; border-top:1px solid var(--line-soft) }
.gh-plan-summary > .gh-plan-head { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); width:100%; padding:var(--space-3) 0; color:var(--text) }
.gh-summary-fact { display:grid; gap:var(--space-1); min-width:0 }
.gh-summary-fact small { color:var(--quiet); font-size:var(--text-xs); font-weight:400 }
.gh-summary-fact b { color:var(--text); font-size:var(--text-base); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.gh-summary-body { display:grid; gap:var(--space-4); padding-bottom:var(--space-3) }
.gh-summary-body > .gh-layout-facts { padding-top:0; border-top:0 }
.gh-summary-body .gathering-breakdown { padding:0 }
.gh-summary-body .gh-section { padding:var(--space-3) 0 0 }
.gh-bar { display:block; height:var(--space-1); margin-top:var(--space-1); overflow:hidden; border-radius:var(--radius-sm); background:var(--raised) }
.gh-bar em { display:block; height:100%; border-radius:inherit; background:var(--green) }
.gh-w-0 { width:0 } .gh-w-5 { width:5% } .gh-w-10 { width:10% } .gh-w-15 { width:15% } .gh-w-20 { width:20% } .gh-w-25 { width:25% } .gh-w-30 { width:30% } .gh-w-35 { width:35% } .gh-w-40 { width:40% } .gh-w-45 { width:45% } .gh-w-50 { width:50% }
.gh-w-55 { width:55% } .gh-w-60 { width:60% } .gh-w-65 { width:65% } .gh-w-70 { width:70% } .gh-w-75 { width:75% } .gh-w-80 { width:80% } .gh-w-85 { width:85% } .gh-w-90 { width:90% } .gh-w-95 { width:95% } .gh-w-100 { width:100% }
.gh-stepper { display:grid; grid-template-columns:minmax(0,1fr) var(--space-8) var(--space-8); gap:var(--space-2); align-items:center; min-width:0 }
.gh-stepper > div { display:grid; gap:var(--space-1) }
.gh-stepper small,.gh-stepper span { color:var(--quiet); font-size:var(--text-xs) }
.gh-stepper b { color:var(--text); font-variant-numeric:tabular-nums }
.gh-stepper button { min-height:var(--space-8); padding:0; font-size:var(--text-base) }
.gh-timer { margin-left:auto; font-size:var(--text-xs) }
.gh-timer > summary { gap:var(--space-2); min-height:var(--space-8); color:var(--muted); font-size:var(--text-xs) }
.gh-timer > summary b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums }
.gh-timer-pop { position:absolute; z-index:35; top:calc(100% - var(--space-2)); right:var(--space-4); width:min(360px,calc(100% - var(--space-8))); max-height:min(70vh,640px); overflow:auto; display:grid; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 var(--space-3) var(--space-8) #0006 }
.gh-timer-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) }
.gh-timer-pop .drop-hint { margin:0 }
.gh-timer-pop .gh-milestones li { grid-template-columns:64px minmax(0,1fr) }
.gh-timer-pop .gh-milestones small { grid-column:1/-1 }
.gh-notice { margin:0; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-soft); color:var(--amber); font-size:var(--text-sm); overflow-wrap:anywhere }
.gh-section { padding:var(--space-4); border-top:1px solid var(--line-soft) }
.gh-section > h3 { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-3); color:var(--muted); font-size:var(--text-sm); font-weight:650 }
.gh-section .gathering-breakdown { padding:0 }
.gh-section .gathering-breakdown > div:last-child { border-bottom:0 }
.gh-section .gathering-message { margin:0 }
.gh-count { color:var(--quiet); font-weight:500 }
.gh-mark { margin-left:auto; min-height:var(--space-8); padding:0 var(--space-3); font-size:var(--text-xs) }
.gh-good { color:var(--green) }
/* The board stays square; borders and the legend distinguish slot states. */
.gh-board { display:grid; justify-items:center; gap:var(--space-3); width:100%; min-width:0 }
.gh-grid-scroll { width:100%; max-width:560px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin }
.gh-scroll-hint { display:none; color:var(--quiet); font-size:var(--text-xs) }
.gh-grid { display:grid; gap:var(--space-1); width:100%; max-width:560px; padding:var(--space-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input); user-select:none }
.gh-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) } .gh-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)) } .gh-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)) }
.gh-cols-6 { grid-template-columns:repeat(6,minmax(0,1fr)) } .gh-cols-7 { grid-template-columns:repeat(7,minmax(0,1fr)) } .gh-cols-8 { grid-template-columns:repeat(8,minmax(0,1fr)) }
.gh-cols-9 { grid-template-columns:repeat(9,minmax(0,1fr)) } .gh-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)) }
.gh-grid.is-mini { max-width:168px; gap:2px; padding:var(--space-1) }
.gh-cell { display:grid; place-items:center; min-width:0; min-height:0; padding:0; aspect-ratio:1; border:1px solid var(--line-soft); border-radius:var(--space-1); background:var(--panel) }
.gh-cell .game-image { width:78%; height:78%; min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-cell .game-image img { width:100%; height:100%; image-rendering:pixelated }
.gh-cell.is-free { border-style:dashed }
.gh-cell.is-item { background:var(--raised); border-color:var(--line) }
.gh-cell.is-locked { border-color:transparent; background:var(--bg) }
.gh-cell.is-default { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,var(--panel)) }
.gh-cell.is-open { border-color:var(--green); background:color-mix(in srgb,var(--green) 10%,var(--panel)) }
.gh-cell.is-added { border:2px dashed var(--amber); background:color-mix(in srgb,var(--amber) 12%,var(--panel)) }
.gh-cell.is-recommended { outline:2px solid var(--accent); outline-offset:2px }
.gh-cell.is-target { border:2px dashed var(--green); background:color-mix(in srgb,var(--green) 10%,var(--panel)) }
.gh-cell.is-target .game-image { width:58%; height:58%; opacity:.8 }
.gh-cell.is-target.is-invalid { border-color:var(--red); background:color-mix(in srgb,var(--red) 9%,var(--panel)) }
.gh-cell.is-blocked { background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--red) 16%,var(--panel)) 0 5px,var(--panel) 5px 10px); border-color:var(--red) }
.gh-span-2 { grid-column:span 2; grid-row:span 2; aspect-ratio:auto } .gh-span-3 { grid-column:span 3; grid-row:span 3; aspect-ratio:auto }
.gh-cell.soil-farmland { background:#3a2a1c } .gh-cell.soil-soul { background:#35271f } .gh-cell.soil-sand { background:#4a4330 } .gh-cell.soil-mycelium { background:#372c3d } .gh-cell.soil-end { background:#44463a }
.gh-soil-label { padding:2px; color:var(--text); font-size:var(--text-xs); font-weight:600; line-height:1.15; text-align:center; overflow-wrap:anywhere }
.gh-grid.is-mode-grid .gh-cell:not(.is-default),.gh-grid.is-blocking .gh-cell:not(.is-locked) { cursor:pointer }
.gh-grid.is-mode-grid .gh-cell.is-locked:hover { border-color:var(--amber); background:color-mix(in srgb,var(--amber) 16%,var(--input)) }
.gh-grid.is-mode-manual .gh-cell { cursor:crosshair; touch-action:pan-x pan-y }
.gh-grid.is-mode-manual .gh-cell:not(.is-locked):hover,.gh-grid.is-blocking .gh-cell:not(.is-locked):hover { border-color:var(--accent) }
.gh-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2) var(--space-4); color:var(--quiet); font-size:var(--text-xs) }
.gh-legend span { display:inline-flex; align-items:center; gap:var(--space-1) }
.gh-legend i { width:var(--space-3); height:var(--space-3); border:1px solid var(--line); border-radius:2px; background:var(--raised) }
.gh-legend i.is-locked { border-color:var(--line-soft); background:var(--bg) }
.gh-legend i.is-default { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,var(--panel)) }
.gh-legend i.is-open { border-color:var(--green); background:color-mix(in srgb,var(--green) 10%,var(--panel)) }
.gh-legend i.is-added { border:2px dashed var(--amber); background:transparent }
.gh-legend i.is-valid { border:2px dashed var(--green); background:transparent }
.gh-legend i.is-invalid { border:2px dashed var(--red); background:transparent }
.gh-legend i.is-blocked { border-color:var(--red); background:color-mix(in srgb,var(--red) 16%,var(--panel)) }
.gh-palette { display:grid; gap:var(--space-2); max-height:400px; overflow:auto; scrollbar-width:thin }
.gh-palette h4 { margin:var(--space-2) 0 0; color:var(--quiet); font-size:var(--text-xs); font-weight:600 }
.gh-palette h4:first-child { margin-top:0 }
.gh-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-1) }
.gh-tool { display:grid; justify-items:center; align-content:start; gap:var(--space-1); min-height:0; padding:var(--space-2) var(--space-1); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input); color:var(--muted); font-size:var(--text-xs); line-height:1.3; text-align:center; white-space:normal; box-shadow:none }
.gh-tool:hover { border-color:var(--line); color:var(--text) }
.gh-tool.is-on { border-color:var(--accent); background:var(--raised); color:var(--text) }
.gh-tool .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-tool > span:last-child { max-width:100%; overflow-wrap:anywhere }
.gh-erase { display:grid; place-items:center; width:var(--item-art-compact); height:var(--item-art-compact); color:var(--red); font-size:var(--text-xl) }
/* Picker and catalogue share compact art and wrapped names. */
.gh-picker { position:relative }
.gh-picker-button { display:grid; grid-template-columns:var(--money-art-inline,var(--space-6)) minmax(0,1fr) var(--space-4); align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-height); padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); color:var(--text); font-size:var(--text-sm); font-weight:500; text-align:left; white-space:normal; box-shadow:none }
.gh-picker-button > span:only-of-type { grid-column:1/3 }
.gh-picker-button .game-image { width:var(--money-art-inline,var(--space-6)); height:var(--money-art-inline,var(--space-6)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-picker-button .icon { width:var(--space-4); height:var(--space-4); color:var(--quiet); transform:rotate(90deg) }
.gh-picker.is-open .gh-picker-button { border-color:var(--accent) }
.gh-picker-pop { position:absolute; z-index:30; top:calc(100% + var(--space-1)); left:0; right:0; display:grid; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); box-shadow:0 var(--space-3) var(--space-8) #0006 }
.gh-picker-list { display:grid; max-height:300px; overflow:auto }
.gh-picker-group { margin:var(--space-2) var(--space-1) var(--space-1); font-size:var(--text-xs); font-weight:600 }
.gh-picker-list button { display:grid; grid-template-columns:var(--money-art-inline,var(--space-6)) minmax(0,1fr) auto; align-items:center; gap:var(--space-2); min-height:var(--control-height); padding:var(--space-1) var(--space-2); border:0; border-radius:var(--radius-sm); background:none; color:var(--text); font-size:var(--text-sm); text-align:left; white-space:normal; box-shadow:none }
.gh-picker-list button:hover,.gh-picker-list button[aria-selected="true"] { background:var(--input) }
.gh-picker-list button[hidden],.gh-picker-group[hidden] { display:none }
.gh-picker-list .game-image { width:var(--money-art-inline,var(--space-6)); height:var(--money-art-inline,var(--space-6)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-picker-list small { color:var(--green); font-size:var(--text-xs) }
.gh-collection { display:grid; gap:var(--space-1); padding:var(--space-4) }
.gh-collection > div { display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; color:var(--muted); font-size:var(--text-sm) }
.gh-collection b { color:var(--text); font-variant-numeric:tabular-nums }
.gh-mut-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-3); align-items:stretch }
.gh-mut { --r:var(--text); display:grid; align-content:start; gap:var(--space-2); min-width:0; padding:var(--space-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--input); color:var(--muted); font-size:var(--text-xs) }
.gh-mut.rarity-uncommon { --r:#55d67b } .gh-mut.rarity-rare { --r:#8faaff } .gh-mut.rarity-epic { --r:#b271f0 } .gh-mut.rarity-legendary { --r:#f0b544 } .gh-mut.rarity-mythic { --r:#ff66cc }
.gh-mut-open { display:grid; grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr); gap:var(--space-2); align-items:center; min-height:var(--space-10); width:100%; padding:0; border:0; border-radius:0; background:none; color:var(--r); text-align:left; white-space:normal; box-shadow:none }
.gh-mut-open:hover:not(:disabled) { background:none; color:var(--text) }
.gh-mut .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-mut strong { color:inherit; font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere }
.gh-mut-stats { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-1) var(--space-2); font-variant-numeric:tabular-nums }
.gh-mut-stats b { color:var(--text); font-weight:600 }
.gh-mut-status { display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); color:var(--quiet); min-height:var(--space-8) }
.gh-mut-status button { min-height:var(--space-8); padding:var(--space-1) var(--space-2); font-size:var(--text-xs) }
.gh-mut.is-found .gh-mut-status { color:var(--green) }
.gh-mut-details { border-top:1px solid var(--line-soft); padding-top:var(--space-2) }
.gh-mut-details summary { width:100%; color:var(--muted); font-size:var(--text-xs) }
.gh-mut-details > div { display:grid; gap:var(--space-3); padding-top:var(--space-3) }
.gh-mut-details p { margin:0; line-height:1.5; overflow-wrap:anywhere }
.gh-mut-details .gh-layout-facts { grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:var(--space-2) }
.gh-mut-details .gh-layout-facts b { font-size:var(--text-sm) }
.gh-mut-details .gh-section { padding:var(--space-3) 0 0 }
.gh-mut-details .gathering-breakdown > div { grid-template-columns:var(--money-art-inline,var(--space-6)) minmax(0,1fr); gap:var(--space-1) var(--space-2) }
.gh-mut-details .gathering-breakdown .game-image { width:var(--money-art-inline,var(--space-6)); height:var(--money-art-inline,var(--space-6)); min-width:0 }
.gh-mut-details .gathering-breakdown strong,.gh-mut-details .gathering-breakdown b { font-size:var(--text-xs) }
.gh-mut-details .gathering-breakdown b { grid-column:2; text-align:left }
/* Ingredient branches and the layout preview stay close together. */
.gh-calculator { display:grid; grid-template-columns:minmax(0,1fr) 184px; gap:var(--space-6); align-items:start; width:100%; max-width:1040px; margin-inline:auto; padding:var(--space-4) }
.gh-calculator-main { display:grid; gap:var(--space-4); min-width:0 }
.gh-recipe { min-width:0 }
.gh-recipe > h3,.gh-tree-side > h3 { margin:0 0 var(--space-2); color:var(--muted); font-size:var(--text-sm); font-weight:600 }
.gh-recipe > .gh-tree { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:start; gap:0 var(--space-5) }
.gh-recipe > .gh-tree > li { margin:0; padding:var(--space-3) 0; border-bottom:1px solid var(--line-soft) }
.gh-tree-side { display:grid; justify-items:start; gap:var(--space-3); min-width:0; padding-left:var(--space-4); border-left:1px solid var(--line-soft) }
.gh-tree-side > h3 { margin:0 }
.gh-tree-side .gh-grid { max-width:168px }
.gh-tree-side .drop-hint { margin:0 }
.gh-tree-side button { width:100% }
.gh-calculator-main .gathering-breakdown { padding:0 }
.gh-calculator-main .gh-more .gh-section { padding:var(--space-3) 0 0 }
.gh-rose-requirements { width:100%; max-width:1040px; margin-inline:auto; padding:var(--space-4) }
.gh-rose-requirements > .gh-section { padding:0; border-top:0 }
.gh-rose-requirements .gathering-breakdown { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:0 var(--space-6); padding:0 }
.gh-rose-requirements .gathering-breakdown > div { grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr) auto; gap:var(--space-3); padding:var(--space-3) 0 }
.gh-rose-requirements .gathering-breakdown :is(strong,b) { font-size:var(--text-sm) }
.gh-tree,.gh-tree ul { min-width:0; margin:0; padding:0; list-style:none }
.gh-tree ul { margin-left:var(--space-3); padding-left:var(--space-3); border-left:1px solid var(--line-soft) }
.gh-tree li { min-width:0; margin:var(--space-2) 0 }
.gh-tree li > ul { margin-top:var(--space-2) }
.gh-node { display:inline-grid; grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr); gap:var(--space-2); align-items:center; min-width:0; max-width:100%; vertical-align:middle }
.gh-node .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-node strong { display:block; color:var(--text); font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere }
.gh-node small { display:block; color:var(--quiet); font-size:var(--text-xs); overflow-wrap:anywhere }
/* Dense, aligned rows keep the profit comparison scannable. */
.gh-table-wrap { overflow:auto; scrollbar-width:thin }
.gh-table { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.gh-table th { padding:var(--space-3); border-bottom:1px solid var(--line-soft); background:var(--panel); color:var(--quiet); font-size:var(--text-xs); font-weight:600; text-align:left; white-space:nowrap }
.gh-table td { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--line-soft); vertical-align:middle }
.gh-table tbody tr:last-child td { border-bottom:0 }
.gh-table tbody tr:hover { background:var(--input) }
.gh-table th:first-child,.gh-table td:first-child { min-width:200px }
.gh-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.gh-table td b { color:var(--text) }
.gh-table td b.gh-good { color:var(--green) }
.gh-table small { display:block; color:var(--quiet); font-size:var(--text-xs) }
.gh-cell-name { display:grid; grid-template-columns:var(--money-art-compact,var(--item-art-compact)) minmax(0,1fr); gap:var(--space-2); align-items:center }
.gh-cell-name .game-image { width:var(--money-art-compact,var(--item-art-compact)); height:var(--money-art-compact,var(--item-art-compact)); min-width:0; max-width:none; padding:0; border:0; background:transparent }
.gh-link { display:inline; min-height:0; padding:0; border:0; border-radius:0; background:none; color:var(--text); font-size:var(--text-sm); font-weight:600; text-align:left; white-space:normal; box-shadow:none }
.gh-link:hover:not(:disabled) { background:none; color:var(--brand); text-decoration:underline; text-underline-offset:var(--space-1) }
.gh-sort { min-height:var(--space-8); padding:0; border:0; background:none; color:var(--quiet); font-size:var(--text-xs); font-weight:600; box-shadow:none }
.gh-sort.is-on,.gh-sort:hover { color:var(--text) }
.gh-sort.is-on::after { content:" \25BE" }
.gh-table th[aria-sort="ascending"] .gh-sort.is-on::after { content:" \25B4" }
#greenhousePanel > .gh-more { padding:var(--space-4) }
@container (max-width:760px) {
 .gh-workbench { grid-template-columns:minmax(0,1fr) }
 .gh-planner-controls { grid-row:1; border-left:0; border-bottom:1px solid var(--line-soft) }
 .gh-mut-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) }
}
@container (max-width:600px) {
 .gh-calculator { grid-template-columns:minmax(0,1fr) }
 .gh-tree-side { grid-template-columns:168px minmax(0,1fr); align-items:start; padding:var(--space-4) 0 0; border-left:0; border-top:1px solid var(--line-soft) }
 .gh-tree-side > h3 { grid-column:1/-1 }
 .gh-tree-side > .gh-grid { grid-column:1; grid-row:2/4 }
 .gh-tree-side > :is(.drop-hint,button) { grid-column:2 }
}
@container (max-width:460px) {
 .gh-grid-scroll > .gh-grid { min-width:calc(10 * var(--space-10) + 11 * var(--space-1)) }
 .gh-scroll-hint { display:block }
 #greenhousePanel .results-header { gap:var(--space-2) }
 .gh-timer { position:static; margin-left:0; width:100% }
 .gh-timer-pop { position:static; width:100%; max-height:none; margin-top:var(--space-2); box-shadow:none }
 .gh-canvas,.gh-planner-controls,.gh-inline-controls,.gh-profit-controls,.gh-section,.gh-collection,.gh-calculator,.gh-rose-requirements { padding:var(--space-3) }
 .gh-grid { gap:2px; padding:var(--space-1) }
 .gh-cell { border-radius:2px }
 .gh-legend { gap:var(--space-2) }
 .gh-board-tools { align-items:stretch }
 .gh-board-tools .gh-modes { flex:1 }
 .gh-inline-controls > .field-label { max-width:none }
 .gh-inline-controls > .gh-modes { flex-basis:100% }
 #greenhousePanel[data-gh-screen="tree"] .gh-inline-controls > .gh-modes { flex-basis:100% }
 #greenhousePanel[data-gh-screen="tree"] .gh-inline-controls > .gh-modes button { flex:1 1 auto }
 .gh-plan-summary > .gh-plan-head { gap:var(--space-2) }
 .gh-summary-fact b { font-size:var(--text-sm) }
 .gh-tree-side { grid-template-columns:minmax(0,1fr); justify-items:start }
 .gh-tree-side > :is(h3,.gh-grid,.drop-hint,button) { grid-column:1; grid-row:auto }
 .gh-tree-side button { width:auto }
 .gh-mut-grid { grid-template-columns:minmax(0,1fr) }
 .gh-mut-open { min-height:var(--space-10) }
 .gh-milestones li { grid-template-columns:88px minmax(0,1fr) }
 .gh-milestones small { grid-column:1/-1 }
 .gh-tree ul { margin-left:var(--space-2); padding-left:var(--space-2) }
 .gh-table th:first-child,.gh-table td:first-child { min-width:180px }
}

.gh-mut-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); padding-top:var(--space-2); border-top:1px solid var(--line-soft) }
.gh-mut-actions button { flex:1 1 auto }

.gh-profit-scroll-hint { display:none; margin:0; padding:var(--space-2) var(--space-3); color:var(--quiet); font-size:var(--text-xs); background:var(--input) }
@container (max-width:760px) {
 .gh-profit-scroll-hint { display:block }
 .gh-table-wrap { scrollbar-color:var(--quiet) var(--input) }
}
/* Bazaar flip ratings (Premium, 28 Oct 2026): safe picks above the table, the rating under Sales / day and the
   market block in the flip panel. */
.money-workspace .flip-picks { margin:0 var(--space-5) var(--space-4) }
.money-workspace .flip-picks h3 { margin:0 0 var(--space-2); color:var(--muted); font-size:var(--text-xs); font-weight:600 }
.money-workspace .flip-pick-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-2) }
.money-workspace .flip-pick { display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:var(--space-2) var(--space-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--input); color:var(--text); text-align:left; font:inherit; cursor:pointer }
.money-workspace .flip-pick:hover { border-color:var(--accent) }
.money-workspace .flip-pick > span { display:grid; min-width:0 }
.money-workspace .flip-pick strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm) }
.money-workspace .flip-pick small { color:var(--quiet); font-size:var(--text-xs); white-space:normal }
.money-workspace .rankings .market-context .subvalue.flip-rating { display:grid; gap:2px; white-space:normal; text-align:inherit }
.money-workspace .rankings .flip-rating > span { display:block; color:var(--quiet); font-size:var(--text-xs) }
.money-workspace .rankings .flip-rating .tag { margin:0 }
#tradeContent .flip-market dl { display:grid; gap:var(--space-2); margin:0 }
#tradeContent .flip-market dl > div { display:flex; justify-content:space-between; gap:var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--line) }
#tradeContent .flip-market dt { color:var(--muted); font-size:var(--text-xs) }
#tradeContent .flip-market dd { display:grid; justify-items:end; margin:0; font-size:var(--text-sm); text-align:right }
#tradeContent .flip-market dd small { max-width:32ch; color:var(--quiet); font-size:var(--text-xs) }
#tradeContent .flip-market .loss { color:var(--red) }

/* /timebag.css */
.timebag-note { margin:var(--space-4) 0 0; color:var(--quiet); font-size:var(--text-xs); line-height:1.65 }
.timebag-validation:empty { display:none }
.timebag-validation,.timebag-unavailable { color:var(--amber); font-size:var(--text-xs); line-height:1.6 }
.timebag-toolbar { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr); gap:var(--space-4); padding:var(--space-4) }
.timebag-toolbar .field-label { display:flex; flex-direction:column; gap:var(--space-2); width:auto; min-width:0; color:var(--muted); font-size:var(--text-sm) }
.timebag-toolbar input,.timebag-toolbar .picker { width:100%; min-width:0 }
.timebag-toolbar small { color:var(--quiet); font-size:var(--text-xs) }
.timebag-toolbar .check-label { grid-column:1 / -1; justify-self:start; font-size:var(--text-sm) }
.timebag-assumptions { margin:0; padding:0 var(--space-4) var(--space-4); border-bottom:1px solid var(--line-soft) }
.timebag-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-4); border-bottom:1px solid var(--line-soft) }
.timebag-row:last-child { border-bottom:0 }
.timebag-item { display:flex; align-items:center; gap:var(--space-3); min-width:0; grid-column:1 / -1 }
.timebag-item>div { min-width:0 }
.timebag-item strong { font-size:var(--text-base); color:var(--text); overflow-wrap:anywhere }
.timebag-item small { display:block; margin-top:var(--space-1); color:var(--muted); font-size:var(--text-xs); line-height:1.6; overflow-wrap:anywhere }
.timebag-figures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); margin:0 }
.timebag-figures dt { color:var(--quiet); font-size:var(--text-xs); line-height:1.6 }
.timebag-figures dd { margin:var(--space-1) 0 0; color:var(--text); font-size:var(--text-base); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.timebag-figures dd.profit { color:var(--green) }
.timebag-figures dd.fusion-loss { color:var(--red) }
.timebag-row>button { min-height:36px; white-space:nowrap }
.timebag-unavailable { grid-column:1 / -1; margin:0 }
.timebag-message { margin:0; padding:var(--space-5); color:var(--muted); font-size:var(--text-sm); line-height:1.65 }
.timebag-detail-item { display:flex; align-items:center; gap:var(--space-3); margin:var(--space-5) 0; font-size:var(--text-sm) }
@container (max-width:620px) {
 .timebag-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
 .timebag-toolbar>.field-label:first-child { grid-column:1 / -1 }
 .timebag-row { grid-template-columns:minmax(0,1fr) }
 .timebag-row>button { justify-self:end }
 .timebag-figures { gap:var(--space-3) }
}
@media (max-width:480px) {
 .timebag-toolbar { grid-template-columns:minmax(0,1fr) }
 .timebag-figures { grid-template-columns:minmax(0,1fr) }
 .timebag-figures>div { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3) }
 .timebag-figures dd { margin:0 }
}

/* /minion-fuel.css */
.minion-fuel-actions { display:flex; flex-wrap:wrap; gap:var(--space-2) }
.minion-fuel-status { margin:0; padding:var(--space-3) var(--space-4); color:var(--quiet); font-size:var(--text-xs); line-height:1.6 }
.minion-fuel-comparison .minion-heading > div:first-child { flex:1 1 280px; min-width:0 }
.minion-fuel-table-wrap { min-width:0; overflow:auto }
.minion-fuel-table { width:100%; border-collapse:collapse; font-size:var(--text-sm) }
.minion-fuel-table th,.minion-fuel-table td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:middle }
.minion-fuel-table th { background:var(--panel); color:var(--quiet); font-size:var(--text-xs); font-weight:500 }
.minion-fuel-table td { color:var(--text); line-height:1.5 }
.minion-fuel-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.minion-fuel-table .profit { color:var(--green); font-size:inherit }
.minion-fuel-table .income-loss { color:var(--red) }
.minion-fuel-table small { display:block; margin-top:var(--space-1); font-size:var(--text-xs); color:var(--quiet); overflow-wrap:anywhere }
.minion-fuel-tier-choice { margin:0; flex-wrap:nowrap }
.minion-fuel-tier-choice button { min-height:var(--space-8); padding:var(--space-1) var(--space-2); white-space:nowrap; font-size:var(--text-sm) }
.minion-fuel-tier-nav { display:flex; flex-wrap:wrap; gap:var(--space-1); margin:0; padding:var(--space-2) var(--space-4) var(--space-3); border-bottom:1px solid var(--line-soft) }
.minion-fuel-tier-nav button { min-height:var(--space-8); padding:var(--space-1) var(--space-2); font-size:var(--text-sm); white-space:nowrap }
.minion-fuel-detail h3,.minion-fuel-overview h3 { margin:0; padding:var(--space-3) var(--space-4); font-size:var(--text-base) }
.minion-fuel-detail > .detail-note { margin:0; padding:var(--space-2) var(--space-4) var(--space-3) }
.minion-fuel-table .minion-fuel-warning { color:var(--amber) }
@container (max-width:640px) {
 .minion-fuel-table thead { display:none }
 .minion-fuel-table,.minion-fuel-table tbody { display:block }
 .minion-fuel-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-soft) }
 .minion-fuel-table td { padding:0; border:0; min-width:0; overflow-wrap:anywhere }
 .minion-fuel-table td:first-child,.minion-fuel-table td[data-label="Best fuel"] { grid-column:1/-1 }
 .minion-fuel-table td.num { text-align:left; white-space:normal }
 .minion-fuel-table td.num::before { content:attr(data-label); display:block; margin-bottom:var(--space-1); color:var(--quiet); font-size:var(--text-xs) }
 .minion-fuel-actions { width:100% }
 .minion-fuel-actions button { flex:1 }
}

/* /search-guides.css */
@import url("/style.css") layer(atlas-foundation);

/* Calculator help stays beside the work, in the shared right-hand drawer. */
main > #calculatorGuide { display:none }
.page-heading:has(#calculatorHelpButton:not([hidden])) { min-width:0; max-width:100% }
.page-heading:has(#calculatorHelpButton:not([hidden])) > div { min-width:0 }
#calculatorHelpButton { flex:none; align-self:flex-end; min-height:calc(var(--space-8) + var(--space-1)); padding:var(--space-2) var(--space-4); color:var(--bg); background:var(--amber); border-color:var(--amber); font-size:var(--text-sm); font-weight:600; line-height:1.25 }
#calculatorHelpButton:hover { color:var(--bg); border-color:var(--amber); background:color-mix(in srgb,var(--amber) 85%,var(--text)) }
#calculatorHelpButton:focus-visible { outline-color:var(--amber) }
#calculatorHelpButton[hidden] { display:none!important }
#calculatorHelpDialog { width:520px; padding:0; overflow:hidden; background:var(--panel); border-color:var(--line); scrollbar-color:var(--line) transparent }
#calculatorHelpDialog[open] { display:flex; flex-direction:column }
#calculatorHelpDialog .calculator-help-heading { display:flex; align-items:flex-start; justify-content:space-between; flex:none; gap:var(--space-4); padding:var(--space-6); border-bottom:1px solid var(--line-soft) }
#calculatorHelpDialog .calculator-help-heading > div { min-width:0 }
#calculatorHelpDialog .calculator-help-heading .eyebrow { margin:0 0 var(--space-2); color:var(--quiet); font-size:var(--text-xs); letter-spacing:0; font-weight:500 }
#calculatorHelpTitle { margin:0; font-size:var(--text-xl); line-height:1.3; letter-spacing:0; overflow-wrap:anywhere }
#calculatorHelpClose { min-height:var(--space-8); width:var(--space-8); flex-basis:var(--space-8); padding:var(--space-1); border-color:var(--line-soft) }
#calculatorHelpDialog #calculatorGuide { min-height:0; margin:0; padding:var(--space-6); border:0; border-radius:0; background:transparent; overflow:auto; overscroll-behavior:contain; font-size:var(--text-sm); line-height:1.65; scrollbar-width:thin; scrollbar-color:var(--line) transparent }
#calculatorHelpDialog #calculatorGuide:not([hidden]) { display:block!important }
#calculatorHelpDialog #calculatorGuide > :first-child { margin-top:0 }
#calculatorHelpDialog #calculatorGuide > :last-child { margin-bottom:0 }
#calculatorHelpDialog :is(p,li,a,summary) { overflow-wrap:anywhere }
#calculatorHelpDialog .calculator-guide-intro { margin:0 0 var(--space-5); font-size:var(--text-sm) }
#calculatorHelpDialog .calculator-steps { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin:0 0 var(--space-6); padding-left:var(--space-5) }
#calculatorHelpDialog .calculator-steps > li { min-width:0; padding-left:var(--space-1) }
#calculatorHelpDialog .calculator-steps > li::marker { color:var(--quiet); font-weight:600 }
#calculatorHelpDialog .calculator-steps h3 { margin:0 0 var(--space-1); font-size:var(--text-sm) }
#calculatorHelpDialog .calculator-steps p { margin:0 }
#calculatorHelpDialog :is(.calculator-help-example,.calculator-assumptions,.calculator-example) { margin:0; padding:var(--space-4) 0; border-top:1px solid var(--line-soft); background:transparent; border-radius:0 }
#calculatorHelpDialog :is(.calculator-example,.calculator-assumptions) > h3,#calculatorHelpDialog h3:has(+ .calculator-activities) { margin:0 0 var(--space-2); color:var(--text); font-size:var(--text-sm); font-weight:600 }
#calculatorHelpDialog .calculator-example p { font-size:var(--text-sm); margin:var(--space-2) 0 0 }
#calculatorHelpDialog :is(.calculator-help-example,.calculator-assumptions) > summary { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-3); color:var(--text); font-size:var(--text-sm); font-weight:600; line-height:1.5 }
#calculatorHelpDialog summary::before { flex:none }
#calculatorHelpDialog .calculator-assumptions > summary > .icon { display:none }
#calculatorHelpDialog :is(.calculator-help-example,.calculator-assumptions) > p { margin:var(--space-3) 0 0 }
#calculatorHelpDialog .calculator-help-example .calculator-example { margin:var(--space-3) 0 0; padding:0; border:0; background:transparent }
#calculatorHelpDialog .calculator-help-example p { font-size:var(--text-sm) }
#calculatorHelpDialog .calculator-assumptions ul { margin:var(--space-3) 0 0; padding-left:var(--space-5) }
#calculatorHelpDialog .calculator-assumptions li + li { margin-top:var(--space-2) }
#calculatorHelpDialog .calculator-faq { margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line-soft) }
#calculatorHelpDialog .calculator-faq h3 { margin:0 0 var(--space-2); font-size:var(--text-base) }
#calculatorHelpDialog .calculator-faq details { padding:var(--space-3) 0; border-color:var(--line-soft) }
#calculatorHelpDialog .calculator-faq details:last-child { border-bottom:0 }
#calculatorHelpDialog .calculator-faq summary { gap:var(--space-3); line-height:1.5 }
#calculatorHelpDialog .calculator-faq details p { margin:var(--space-3) 0 0 }
#calculatorHelpDialog .calculator-related { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2); margin-top:var(--space-5); padding-top:var(--space-4); border-color:var(--line-soft) }
#calculatorHelpDialog .calculator-related a { align-items:flex-start }
#calculatorHelpDialog .calculator-related .icon { width:var(--space-3); height:var(--space-3); flex-basis:var(--space-3); margin-top:var(--space-1) }
#calculatorHelpDialog .calculator-activities { grid-template-columns:minmax(0,1fr); gap:var(--space-3); margin:0 0 var(--space-5) }
#calculatorHelpDialog .calculator-activities p { margin:0 }
#calculatorHelpDialog .calculator-help-example > .calculator-activities { margin:var(--space-3) 0 0 }
@media(max-width:820px) { #calculatorHelpButton { align-self:center } }
@media(max-width:600px) {
 .page-heading:has(#calculatorHelpButton:not([hidden])) { flex-wrap:wrap }
 .page-heading:has(#calculatorHelpButton:not([hidden])) > div { flex:1 1 140px }
 .page-heading:has(#calculatorHelpButton:not([hidden])) h1 { overflow-wrap:anywhere }
 #calculatorHelpButton { margin-left:auto }
 #calculatorHelpDialog { width:calc(100vw - 12px); max-width:calc(100vw - 12px) }
 #calculatorHelpDialog .calculator-help-heading { padding:var(--space-5) }
 #calculatorHelpDialog #calculatorGuide { padding:var(--space-5) }
 #calculatorHelpTitle { font-size:var(--text-lg) }
}
:root[data-motion="paused"] #calculatorHelpDialog[open] { animation:none }
@media(prefers-reduced-motion:reduce) { #calculatorHelpDialog[open] { animation:none } }

/* /workspaces.css */
/* Workspace visibility and shared help components. */
body:not([data-workspace="money"]) :is(#moneyWorkspace,#profileContext,.method-navigation) { display:none!important }
body:is([data-workspace="markets"],[data-workspace="events"],[data-workspace="quests"],[data-workspace="help"]) .profile-shell { display:none!important }
body:is([data-workspace="help"],[data-workspace="quests"]) .live-controls,body[data-section="events-checklist"] :is(#countdown,#refresh) { display:none!important }
.atlas-workspace { min-width:0; margin:0 0 var(--space-8); container:atlas-workspace / inline-size }
.atlas-workspace[hidden] { display:none!important }
.atlas-workspace :is(input,select,textarea,button) { max-width:100% }
.atlas-workspace :is(h2,h3,h4,p) { overflow-wrap:anywhere }
.category-tabs button { white-space:normal }
.category-tabs button>span:not(.nav-icon):not(.nav-active-dot) { min-width:0; line-height:1.4 }
#sidebar .nav-group { margin-bottom:var(--space-1) }
#sidebar .nav-group>summary { min-height:36px; padding:var(--space-1) var(--space-2) }
#sidebar .category-tabs { gap:0; padding:0 0 var(--space-1) var(--space-2) }
#sidebar .category-tabs button { min-height:32px; padding:var(--space-1) var(--space-2) }
#sidebar .nav-introduction { min-height:36px; padding:var(--space-1) var(--space-2); margin-bottom:var(--space-2) }
#pinnedNavGroup { --nav-color:#f0a36a }
.nav-page-row { display:flex; align-items:stretch; min-width:0; border:1px solid transparent; border-radius:var(--radius-sm) }
.nav-page-row.is-current { background:color-mix(in srgb,var(--nav-color,var(--accent)) 12%,var(--panel)); border-color:color-mix(in srgb,var(--nav-color,var(--accent)) 35%,transparent) }
#sidebar .nav-page-row.is-current>.nav-page-link,#sidebar .nav-page-row.is-current>.nav-page-link .nav-icon { color:var(--nav-color,var(--accent)) }
#sidebar .nav-page-row>.nav-page-link { flex:1; min-width:0; width:auto; border:0; background:none; overflow-wrap:anywhere }
#sidebar .nav-page-row:not(.is-current):hover { background:var(--raised) }
#sidebar .nav-page-row>.nav-page-link:hover { background:none }
#sidebar .nav-page-row>.nav-pin-toggle { flex:0 0 32px; align-self:stretch; align-items:center; justify-content:center; min-width:32px; width:32px; padding:var(--space-1); border:0; background:none; color:var(--quiet); box-shadow:none }
#sidebar .nav-pin-toggle[hidden],body[data-admin-open="true"] .nav-pin-toggle { display:none }
/* The pin shows only on the tab under the pointer, or on a tab reached with the keyboard.
   Without a pointer that can hover, every tab keeps its pin visible. */
@media (hover:hover) {
 #sidebar .nav-page-row:not(:hover):not(:has(:focus-visible))>.nav-pin-toggle:not([data-tour-pin]) { opacity:0 }
}
#sidebar .nav-page-row>.nav-pin-toggle { transition:opacity .12s }
.nav-pin-toggle .icon { flex:0 0 14px; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round }
#sidebar .nav-page-row>.nav-pin-toggle[aria-pressed="true"] { color:var(--amber) }
.nav-pin-toggle[aria-pressed="true"] .icon { fill:currentColor }
#sidebar .nav-page-row>.nav-pin-toggle:hover { background:none; color:var(--amber) }
#sidebar .nav-page-row>button:focus-visible { outline:2px solid var(--brand); outline-offset:-2px }
@media(pointer:coarse),(max-width:820px) {
 #sidebar .nav-group>summary,#sidebar .category-tabs button,#sidebar .nav-introduction { min-height:40px }
 #sidebar .nav-page-row>.nav-pin-toggle { flex-basis:40px; min-width:40px; width:40px }
}
summary:has(use[href="#i-chevron"])::before { content:none; display:none }
summary:has(use[href="#i-chevron"])::marker { content:"" }
.rankings button:has(use[href="#i-chevron"])::after { content:none }
body[data-workspace="profile"] .profile-sections>.profile-section>summary { display:none }
body[data-workspace="profile"] .profile-sections>.profile-section>.profile-section-body { padding:var(--space-1) 0 0 }
body[data-workspace="progression"] #progressionProfileCaption { display:none }
body[data-workspace="progression"] [data-progression-view="goals"]>.progression-panel>h2,body[data-workspace="progression"] [data-progression-view="goals"]>h2 { display:none }
.help-workspace { max-width:none }
.help-workspace [data-help-page] { display:grid; gap:var(--space-6) }
.help-workspace [data-help-page][hidden] { display:none }
.help-workspace .introduction-panel,.help-panel { margin:0; padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); min-width:0 }
.help-workspace :is(h2,h3) { margin:0 0 var(--space-4) }
.help-workspace p,.help-workspace li { color:var(--muted); font-size:var(--text-sm); line-height:1.7 }
.help-workspace strong { color:var(--text) }
.help-workspace a { color:var(--brand) }
.help-workspace button { white-space:normal }
.introduction-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4) }
.introduction-section-heading span { color:var(--quiet); font-size:var(--text-xs) }
.introduction-start>.introduction-primary { background:var(--brand); color:var(--bg); border-color:var(--brand) }
.introduction-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); list-style:none; padding:0; margin:var(--space-8) 0 }
.introduction-steps li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--space-3); align-items:start }
.introduction-step-number { color:var(--brand); font-size:var(--text-lg); font-weight:600; line-height:1.3 }
.introduction-steps h4 { font-size:var(--text-base); margin:0 0 var(--space-2); color:var(--text) }
.introduction-steps p { margin:0 }
.help-workspace .introduction-quicklinks { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-5); margin-top:var(--space-5); font-size:var(--text-xs); color:var(--muted) }
.introduction-quicklinks button { min-height:32px; font-size:var(--text-xs) }
.introduction-data-note { border-left:2px solid var(--amber); padding-left:var(--space-4); margin:var(--space-5) 0 0 }
.help-workspace .introduction-guide-row { display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--space-8) }
.introduction-section-hint { font-size:var(--text-xs); color:var(--quiet) }
.help-workspace .introduction-faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) var(--space-10); align-items:start }
.help-faq-group { min-width:0 }
.help-faq-group h4 { font-size:var(--text-sm); color:var(--brand); margin:var(--space-4) 0 var(--space-2); font-weight:600 }
.introduction-faq-list summary { display:flex; justify-content:space-between; align-items:center; width:100%; gap:var(--space-4); cursor:pointer; padding:var(--space-4) 0; font-size:var(--text-sm); color:var(--text); line-height:1.5; list-style:none }
.introduction-faq-list summary::-webkit-details-marker { display:none }
.introduction-faq-list details { border-bottom:1px solid var(--line-soft) }
.introduction-faq-list details:last-child { border:0 }
.introduction-faq-list p { margin:0 0 var(--space-4) }
.help-workspace summary .icon { width:12px; height:12px; flex-basis:12px; color:var(--quiet) }
.help-workspace details[open]>summary .icon { transform:rotate(90deg) }
.help-form-optional { border-top:1px solid var(--line); padding-top:var(--space-3) }
.help-form-optional>summary { min-height:32px; font-size:var(--text-sm); width:100%; cursor:pointer }
.help-form-optional>div { display:grid; gap:var(--space-4); margin-top:var(--space-3) }
.help-release { padding:var(--space-4) 0; border-bottom:1px solid var(--line-soft) }
.help-release:first-of-type { padding-top:0 }
.help-release:last-child { padding-bottom:0; border:0 }
.help-release header { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap }
.help-release h3 { margin:0; font-size:var(--text-lg) }
.help-release time,.help-note { color:var(--quiet); font-size:var(--text-xs) }
.help-release>p { margin:var(--space-3) 0 0; max-width:76ch }
.help-release h4 { margin:var(--space-5) 0 var(--space-1); font-size:var(--text-sm); color:var(--text) }
.help-release-archive>summary { cursor:pointer; padding:var(--space-4) 0; color:var(--brand); font-size:var(--text-sm) }
.help-form { display:grid; gap:var(--space-5); max-width:760px }
.help-form label { display:grid; gap:var(--space-2); color:var(--muted); font-size:var(--text-sm) }
.help-form textarea { min-height:120px; width:100%; resize:vertical; padding:var(--space-3); font:inherit; line-height:1.6; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); color:var(--text) }
.help-actions { display:flex; flex-wrap:wrap; gap:var(--space-3) }
#helpReportReady { margin-top:var(--space-6) }
.help-report-preview { white-space:pre-wrap; overflow-wrap:anywhere; font:var(--text-xs)/1.8 ui-monospace,monospace; padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input) }
@container atlas-workspace (max-width:740px) { .help-workspace .introduction-guide-row { grid-template-columns:1fr; gap:var(--space-4) } .help-workspace .introduction-panel,.help-panel { padding:var(--space-4) } .introduction-steps { grid-template-columns:1fr; gap:var(--space-5); margin:var(--space-6) 0 } .help-workspace .introduction-faq-list { grid-template-columns:1fr; gap:var(--space-4) } }
/* Keep help shortcuts and their direction indicator on one baseline. */
#helpWorkspace .introduction-quicklinks a { display:inline-flex; align-items:center; gap:var(--space-2); min-height:36px }
#helpWorkspace .introduction-section-hint { display:none }

/* Guided navigation shares the site's compact controls and type scale. */
.site-tour-entry { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); padding:var(--space-4); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius) }
.site-tour-entry h2 { margin:0; font-size:var(--text-base) }
.help-workspace .site-tour-entry { margin-bottom:0 }
body[data-site-tour] { overflow:hidden }
body[data-site-tour] #sidebar { visibility:visible; transform:none; transition:none }
#siteTourDialog { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:transparent; color:var(--text); box-shadow:none }
#siteTourDialog::backdrop { background:transparent; backdrop-filter:none }
.site-tour-spotlight { position:absolute; border:2px solid var(--brand); border-radius:var(--radius-sm); box-shadow:0 0 0 100vmax #080a12b8; pointer-events:none }
.site-tour-card { position:absolute; overflow:auto; overscroll-behavior:contain; padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 8px 32px #0006; text-align:left; scrollbar-width:thin }
.site-tour-copy { margin-bottom:var(--space-4) }
.site-tour-card .site-tour-progress { margin:0 0 var(--space-2); color:var(--brand); font-size:var(--text-xs); font-weight:600 }
.site-tour-card h2 { margin:0 0 var(--space-2); font-size:var(--text-lg); line-height:1.3; color:var(--text); overflow-wrap:anywhere }
.site-tour-card #siteTourDescription { margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.6 }
.site-tour-actions { display:flex; gap:var(--space-2); align-items:center }
.site-tour-actions button { min-height:36px; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-sm) }
.site-tour-actions #siteTourSkip { background:transparent; border-color:transparent; color:var(--muted) }
.site-tour-actions #siteTourNext { margin-left:auto; background:var(--brand); border-color:var(--brand); color:var(--bg) }
.site-tour-actions #siteTourNext:hover { filter:brightness(1.08) }
.site-tour-card .site-tour-preference { display:flex; align-items:center; gap:var(--space-2); width:fit-content; margin-top:var(--space-4); padding:var(--space-1) 0; color:var(--muted); font-size:var(--text-xs); cursor:pointer }
.site-tour-preference input[type="checkbox"] { appearance:auto; width:16px; height:16px; min-width:16px; min-height:16px; margin:0; padding:0; accent-color:var(--brand); flex:none; cursor:pointer }
.site-tour-preference small { display:block; color:var(--quiet); font-size:inherit }
.site-tour-storage { margin:var(--space-2) 0 0; color:var(--amber); font-size:var(--text-xs) }
.site-tour-card :is(button,input):focus-visible { outline:2px solid var(--brand); outline-offset:3px }
@media(pointer:coarse),(max-width:820px) {
 .site-tour-actions button { min-height:44px }
 .site-tour-card .site-tour-preference { min-height:44px; margin-top:var(--space-2) }
}

/* Feedback card follows its controls rather than leaving an empty full-width panel. */
[data-help-page="bug-report"] .help-panel { max-width:808px }
#helpReportForm { max-width:none; gap:var(--space-4) }
#helpReportDestination,#helpReportStatus { margin:0 }
#helpReportStatus:empty { display:none }

/* Global invitation stays out of the header; bottom space keeps the last controls reachable. */
@property --community-feedback-angle { syntax:"<angle>"; inherits:true; initial-value:0deg }
.community-feedback { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:130; width:336px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:18px; border:2px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--text); box-shadow:0 6px 24px #0004 }
@supports(background:conic-gradient(from 0deg,transparent,var(--brand))) and (color:color-mix(in srgb,red,blue)) {
 .community-feedback { border-color:transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--community-feedback-angle,0deg),var(--line) 0deg 260deg,color-mix(in srgb,var(--brand) 25%,var(--line)) 290deg,var(--brand) 330deg,var(--text) 355deg,var(--line) 360deg) border-box; box-shadow:0 6px 24px #0004,0 0 12px color-mix(in srgb,var(--brand) 12%,transparent); animation:community-feedback-border 10s linear infinite }
}
@supports(mask-composite:exclude) {
 .community-feedback::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:3px; background:conic-gradient(from var(--community-feedback-angle,0deg),transparent 0deg 285deg,var(--brand) 330deg,var(--text) 355deg,transparent 360deg); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; filter:blur(3px); opacity:.65; pointer-events:none }
}
@keyframes community-feedback-border { from { --community-feedback-angle:0deg } to { --community-feedback-angle:360deg } }
html[data-motion="paused"] .community-feedback { animation:none }
@media(forced-colors:active) {
 .community-feedback { animation:none; border-color:ButtonText; background:Canvas; box-shadow:none }
 .community-feedback::before { display:none }
}
.community-feedback h2 { margin:0; padding-right:32px; font-size:16px; line-height:1.4; font-weight:600 }
.community-feedback #communityFeedbackClose { position:absolute; top:12px; right:8px; min-height:32px; width:32px; padding:6px; border-color:transparent; color:var(--muted) }
.community-feedback #communityFeedbackClose:hover { background:var(--raised); color:var(--text) }
.community-feedback .icon { width:18px; height:18px }
.community-feedback p { margin:var(--space-2) 0 var(--space-3); color:var(--muted); font-size:14px; line-height:1.45 }
.community-feedback .button-link { justify-content:flex-start; min-height:32px; padding:0; border:0; color:var(--brand); background:transparent; font-size:14px; font-weight:600 }
.community-feedback .button-link:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px }
.community-feedback :is(a,button):focus-visible { outline:2px solid var(--brand); outline-offset:2px }
body:has(> #communityFeedbackPrompt:not([hidden])) { padding-bottom:224px }
@media(pointer:coarse),(max-width:820px) {
 .community-feedback h2 { padding-right:40px }
 .community-feedback #communityFeedbackClose { top:8px; right:6px; min-height:44px; width:44px }
 .community-feedback .button-link { min-height:44px }
 body:has(> #communityFeedbackPrompt:not([hidden])) { padding-bottom:248px }
}

/* /progression-workspace.css */
#progressionWorkspace{min-width:0;margin-top:var(--space-6);color:var(--text)}
.progression-intro:has(>p[hidden]):not(:has(>p:not([hidden]):not(:empty))){display:none}
.progression-intro,.progression-page-note{color:var(--muted);font-size:var(--text-sm);line-height:1.65;margin:0 0 var(--space-6);max-width:85ch}
.progression-intro p{margin:0 0 var(--space-2)}
.progression-panel,#progressionWorkspace>.profile-section{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);min-width:0}
.progression-panel h2,.progression-panel h3{margin:0 0 var(--space-4);font-size:var(--text-lg)}
.progression-panel>p{max-width:78ch;line-height:1.65;color:var(--muted)}
.progression-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.progression-next-card{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);display:flex;flex-direction:column;gap:var(--space-3);min-width:0;transition:border-color .15s,background .15s}
.progression-next-card:hover{border-color:var(--quiet)}
.progression-next-card header{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.progression-next-card header>div{min-width:0}
.progression-next-card .game-image{width:var(--item-art-size);height:var(--item-art-size);flex:0 0 var(--item-art-size);background:var(--input);border:1px solid var(--line-soft);border-radius:var(--radius)}
.progression-next-card .game-image img{max-width:var(--item-art-compact);max-height:var(--item-art-compact);object-fit:contain;image-rendering:pixelated}
.progression-next-card h3{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--muted);line-height:1.45}
.progression-next-card header strong{display:block;margin-top:var(--space-1);font-size:var(--text-lg);line-height:1.4;overflow-wrap:anywhere}
.progression-next-card header:not(:has(strong)) h3{font-size:var(--text-lg);color:var(--text)}
.progression-next-card p{margin:0;line-height:1.7;color:var(--muted);font-size:var(--text-sm);overflow-wrap:anywhere}
.progression-next-card button{align-self:flex-start;margin-top:auto;min-height:40px}
#progressionWorkspace .profile-section{margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);min-width:0}
#progressionWorkspace .profile-section>summary{pointer-events:none;cursor:default}
#progressionWorkspace .profile-section>summary>.icon{display:none}
/* The heading already has room under it, so the body starts right below it instead of after a second gap. */
#progressionWorkspace .profile-section:not(#profile-accessories)>.profile-section-body{padding-top:0}
/* Accessories hides its heading bar and carries its own title inside, so it keeps the top padding. */
#progressionWorkspace .profile-section-body>:first-child{margin-top:0}
.progression-shortcut{font-size:var(--text-sm);color:var(--muted);margin:var(--space-4) 0;line-height:1.6}
#progressionWorkspace .profile-collection progress{display:block;width:100%;height:6px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:var(--line);accent-color:var(--accent);margin-top:var(--space-3)}
#progressionWorkspace .profile-collection progress::-webkit-progress-bar{background:var(--line)}
#progressionWorkspace .profile-collection progress::-webkit-progress-value{background:var(--accent)}
#progressionWorkspace .profile-collection progress::-moz-progress-bar{background:var(--accent)}
#progressionNotice{padding:var(--space-3) var(--space-4);border:1px solid var(--amber);border-radius:var(--radius-sm);color:var(--amber)}
@media (max-width:1200px){.progression-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container atlas-workspace (max-width:640px){.progression-panel,.progression-next-card{padding:var(--space-4)}.progression-next-grid{grid-template-columns:1fr}}

.milestone-record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-4);align-items:start}
.milestone-record-card{min-width:0;padding:var(--space-4);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--input)}
.milestone-record-card dl{margin:0}.milestone-record-card dl>div{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
.milestone-record-card dt{color:var(--muted)}.milestone-record-card dd{margin:0;font-weight:600;text-align:right}
@container atlas-workspace (max-width:640px){.milestone-record-grid{grid-template-columns:1fr}}

#progressionWorkspace #profile-misc { border:0; border-radius:0; background:transparent; box-shadow:none }
#progressionMiscHost #profile-misc > summary { display:none }
#progressionMiscHost #profile-misc > .profile-section-body { padding:0 }
.milestone-record-card dl>div { align-items:baseline }
.milestone-record-card dd { flex:none }

/* /markets-workspace.css */
#marketsWorkspace{max-width:none;margin:0;padding:0 0 var(--space-8);min-width:0}
#marketsWorkspace .mw-intro{margin:0 0 var(--space-6);color:var(--muted);font-size:var(--text-sm);line-height:1.65}
.mw-eyebrow{font-size:var(--text-xs);font-weight:600;color:var(--muted)}
.mw-notice:empty{display:none}
.mw-notice{padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius);color:var(--green);background:var(--panel);font-size:var(--text-sm)}
.mw-note{font-size:var(--text-sm);color:var(--muted);line-height:1.65}
.mw-error{padding:var(--space-4);border:1px solid var(--amber);border-radius:var(--radius);color:var(--amber);font-size:var(--text-sm);line-height:1.6}
.mw-error button{margin-left:var(--space-2)}
.mw-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-3) var(--space-4);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);margin-bottom:var(--space-4)}
.mw-watch-tabs{display:flex;flex-wrap:wrap;margin:0 0 var(--space-4)}
.mw-price-filters{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(2,minmax(130px,1fr)) auto;gap:var(--space-3);align-items:end;flex-basis:100%;padding-top:var(--space-3);border-top:1px solid var(--line-soft)}
.mw-price-filters label{display:grid;gap:var(--space-2);color:var(--muted);font-size:var(--text-xs);min-width:0}
.mw-price-filters :is(input,select){width:100%;min-width:0;min-height:42px;font-size:var(--text-sm)}
.mw-price-filters button{min-height:42px;font-size:var(--text-sm)}
@container atlas-workspace (max-width:700px){.mw-price-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.mw-price-filters label:first-child{grid-column:1/-1}}
.mw-search-form{margin:0;flex:1 1 360px;min-width:0}
.mw-search-form label{display:block;color:var(--muted);font-size:var(--text-xs);margin-bottom:var(--space-2)}
.mw-search-form>div{display:flex;gap:var(--space-2)}
.mw-search-form input{flex:1;min-width:0;min-height:42px;font-size:var(--text-sm)}
.mw-search-form button{min-width:80px;font-size:var(--text-sm);min-height:42px}
.mw-source-filter{display:flex;gap:var(--space-1);flex-wrap:wrap;padding:var(--space-1);background:var(--input);border:1px solid var(--line-soft);border-radius:var(--radius)}
.mw-source-filter button{font-size:var(--text-sm);border-color:transparent;background:transparent;min-height:32px;padding:6px var(--space-3)}
.mw-source-filter [aria-pressed="true"]{border-color:var(--line);color:var(--text);background:var(--raised)}
.mw-results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-4)}
.mw-results-heading h3{font-size:var(--text-lg);margin:0}
.mw-results-heading>span{font-size:var(--text-sm);color:var(--muted)}
.mw-results-heading:has(.mw-alert-heading-actions){align-items:center;flex-wrap:wrap}
.mw-alert-heading-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-3);margin-left:auto}
.mw-alert-heading-actions>span{font-size:var(--text-sm);color:var(--muted)}
#marketsWorkspace .mw-notifications-button{min-height:36px;padding:8px 12px;font-size:var(--text-sm);background:var(--panel);border:1px solid var(--line);color:var(--text)}
#marketsWorkspace .mw-notifications-button:hover:not(:disabled){background:var(--raised)}
.mw-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.mw-item{display:flex;flex-direction:column;min-width:0;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);transition:border-color .15s}
.mw-item:hover{border-color:var(--quiet)}
.mw-item-title{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.mw-item-title>.game-image,.mw-detail-identity>.game-image{flex:none;width:44px;height:44px;background:var(--input);border:1px solid var(--line-soft);border-radius:var(--radius)}
.mw-item-title .game-image img,.mw-detail-identity .game-image img{max-width:var(--item-art-compact);max-height:var(--item-art-compact);object-fit:contain;image-rendering:pixelated}
.mw-item-title>div{min-width:0}
.mw-item-title h4{margin:0;font-size:var(--text-base);line-height:1.4;overflow-wrap:anywhere}
.mw-item-placeholder{font-size:24px;padding:var(--space-2);color:var(--accent)}
.mw-source-badge{display:inline-flex;font-size:var(--text-xs);line-height:1.5;margin-top:var(--space-1);color:var(--blue);width:fit-content}
.mw-source-badge.auction{color:var(--amber)}
.mw-source-badge.unknown{color:var(--quiet)}
.mw-item-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0;color:var(--muted);font-size:var(--text-xs)}
.mw-item-quotes b{display:block;color:var(--text);font-size:var(--text-lg);font-weight:650;line-height:1.35;font-variant-numeric:tabular-nums;margin-top:var(--space-1);overflow-wrap:anywhere}
.mw-item-quotes small{font-size:var(--text-xs);color:var(--quiet);line-height:1.5;align-self:end}
.mw-item-quotes .mw-stale-quote{grid-column:1/-1}
.mw-item-quotes:has(>span:only-child){grid-template-columns:1fr}
.mw-item-actions{display:flex;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line-soft)}
.mw-item-actions button{font-size:var(--text-sm);padding:8px var(--space-3);min-height:38px;white-space:normal}
.mw-item-actions>button:first-child{flex:1}
.mw-watch[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--input)}
.mw-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-6)}
.mw-pagination span{font-size:var(--text-xs);color:var(--muted);text-align:center}
.mw-pagination button{font-size:var(--text-sm)}
.mw-pagination[hidden],.history-selector[hidden]{display:none}
.mw-empty{grid-column:1/-1;padding:var(--space-6) var(--space-4);text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.65}
.mw-empty button{display:block;margin:var(--space-4) auto 0}
.mw-history-browser{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,2fr);grid-template-areas:"picker chart";gap:var(--space-4);align-items:start}
.mw-history-picker{grid-area:picker;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:var(--space-4);min-width:0}
.mw-history-picker .mw-search-form{margin-bottom:var(--space-4)}
.mw-history-picker .mw-search-form>div{flex-wrap:wrap}
.mw-history-picker .mw-search-form button{min-width:70px}
.mw-history-picker .mw-results-heading{margin-bottom:var(--space-3)}
.mw-history-picker .mw-results-heading h3{font-size:var(--text-sm)}
.mw-history-picker .mw-results-heading>span{font-size:var(--text-xs)}
.mw-history-picker .mw-results{grid-template-columns:1fr;gap:var(--space-2);max-height:650px;overflow-y:auto;scrollbar-gutter:stable;padding-right:var(--space-1)}
.mw-history-picker .mw-item{padding:var(--space-3);border-radius:var(--radius);background:var(--input)}
.mw-history-picker .mw-item.is-selected{border-color:var(--accent);background:var(--raised)}
.mw-history-picker .mw-item-title>.game-image{width:40px;height:40px;background:transparent;border:0}
.mw-history-picker .mw-item-title .game-image img{max-width:36px;max-height:36px}
.mw-history-picker .mw-item-title h4{font-size:var(--text-sm)}
.mw-history-picker .mw-source-badge{display:none}
.mw-history-picker .mw-item-quotes{margin:var(--space-3) 0}
.mw-history-picker .mw-item-quotes b{font-size:16px}
.mw-history-picker .mw-item-actions{padding:0;border:0}
.mw-history-picker .mw-item-actions button{font-size:var(--text-xs);min-height:34px}
.mw-history-picker .mw-item-actions [aria-pressed="true"]{color:var(--accent)}
.mw-history-picker .mw-pagination{gap:var(--space-2);margin-top:var(--space-4)}
.mw-history-picker .mw-pagination button{font-size:var(--text-xs);padding:8px}
#mwSelectedHistory{grid-area:chart;position:sticky;top:var(--space-6);min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--panel)}
.mw-history-empty{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--space-4)}
.mw-history-empty h3{font-size:var(--text-xl);margin:0 0 var(--space-3)}
.mw-history-empty p{max-width:42ch;color:var(--muted);font-size:var(--text-sm);line-height:1.7}
.mw-history-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.mw-history-identity{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.mw-history-identity .game-image{width:36px;height:36px;flex:none;background:var(--input);border-radius:var(--radius)}
.mw-history-identity h3{font-size:var(--text-lg);margin:0;line-height:1.4;overflow-wrap:anywhere}
.mw-history-identity h3:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--radius-sm)}
:is(#marketsWorkspace,.mw-dialog) .history-range{flex:none;padding:var(--space-1);background:var(--input);border-color:var(--line);border-radius:var(--radius)}
:is(#marketsWorkspace,.mw-dialog) .history-range button{font-size:var(--text-xs);min-height:32px;padding:6px var(--space-3)}
:is(#marketsWorkspace,.mw-dialog) .history-range button[aria-pressed="true"]{color:var(--text);background:var(--raised);border-color:var(--line)}
:is(#marketsWorkspace,.mw-dialog) .history-legend{font-size:var(--text-xs);gap:var(--space-5)}
:is(#marketsWorkspace,.mw-dialog) .history-plot{background:var(--input);border-color:var(--line-soft);padding:var(--space-4);border-radius:var(--radius)}
#mwSelectedHistory .history-plot{min-height:220px}
.mw-history-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5)}
.mw-history-actions button{font-size:var(--text-sm)}
.mw-history-note{font-size:var(--text-xs);margin-top:var(--space-4)}
.mw-trend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);min-height:24px;font-size:var(--text-sm);margin:var(--space-4) 0;color:var(--muted)}
.mw-trend small{flex-basis:100%;font-size:var(--text-xs)}
.mw-direction b{font-size:var(--text-base)}
.mw-direction.up b{color:var(--amber)}
.mw-direction.down b{color:var(--blue)}
.mw-direction.flat b{color:var(--text)}
.mw-dialog{width:min(840px,calc(100vw - 32px));max-height:calc(100dvh - 36px);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);background:var(--bg);overflow:auto;box-shadow:0 24px 100px #0007}
.mw-dialog::backdrop{background:#040b12bf;backdrop-filter:blur(5px)}
.mw-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5)}
.mw-dialog-heading h2{font-size:var(--text-xl);line-height:1.3;margin:var(--space-1) 0 var(--space-6);overflow-wrap:anywhere}
.mw-dialog-heading p{margin:0}
.mw-detail-identity{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.mw-detail-identity>div{min-width:0}
.mw-detail-identity p{margin:0;color:var(--muted);font-size:var(--text-sm);overflow-wrap:anywhere}
.mw-detail-identity span{font-size:var(--text-xs);color:var(--quiet)}
.mw-item-id{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--quiet)}
.mw-item-id summary{font-size:var(--text-xs);min-height:28px}
.mw-item-id code{display:block;margin-top:var(--space-1);overflow-wrap:anywhere;color:var(--muted)}
.mw-detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0}
.mw-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-3)}
.mw-metric{padding:var(--space-4);background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);min-width:0}
.mw-metric span{display:block;color:var(--muted);font-size:var(--text-xs)}
.mw-metric strong{display:block;margin-top:var(--space-1);font-size:var(--text-lg);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.mw-dialog-history{border-top:1px solid var(--line);margin-top:var(--space-4);padding-top:var(--space-4)}
.mw-bin{margin:var(--space-4) 0;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius)}
.mw-bin .mw-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.price-chart .chart-gap{fill:none;stroke-width:1.5;stroke-dasharray:5 6;stroke-linecap:round;opacity:.55;vector-effect:non-scaling-stroke}
.chart-gap-note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-1) 0 var(--space-2);color:var(--muted);font-size:var(--text-xs);line-height:1.5}
.chart-gap-note>span{width:20px;border-top:2px dashed currentColor;opacity:.65}
@media(max-width:1200px){.mw-results{grid-template-columns:repeat(2,minmax(0,1fr))}.mw-history-browser{gap:var(--space-4)}.mw-history-heading{flex-wrap:wrap}}
@media(max-width:1000px){.mw-history-browser{grid-template-columns:1fr;grid-template-areas:"chart" "picker"}#mwSelectedHistory{position:static}.mw-history-picker .mw-results{grid-template-columns:repeat(2,minmax(0,1fr));max-height:550px}.mw-history-picker .mw-search-form>div{flex-wrap:nowrap}.mw-history-empty{min-height:180px}.mw-history-picker .mw-search-form{margin-bottom:var(--space-4)}}
@container atlas-workspace (max-width:600px){.mw-results,.mw-history-picker .mw-results{grid-template-columns:1fr}.mw-toolbar,.mw-item,#mwSelectedHistory{padding:var(--space-4)}.mw-source-filter{width:100%}.mw-source-filter button{flex:1;padding:6px}.mw-history-heading{gap:var(--space-3)}.mw-history-identity h3{font-size:var(--text-lg)}.mw-metrics{grid-template-columns:1fr}.mw-metric{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4)}.mw-metric strong{margin:0;font-size:var(--text-lg)}.mw-search-form button{min-width:70px}.mw-history-empty{padding:var(--space-4)}.mw-history-empty h3{font-size:var(--text-lg)}#mwSelectedHistory .history-plot{min-height:0;padding:var(--space-2)}}
@media(max-width:600px){.mw-dialog{padding:var(--space-4)}.mw-dialog .mw-metrics{grid-template-columns:1fr}.mw-dialog .mw-metric{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4)}.mw-dialog .mw-metric strong{margin:0;font-size:var(--text-lg)}.mw-dialog .mw-bin .mw-metrics{grid-template-columns:1fr}}
.mw-direction small{font-size:var(--text-sm);color:var(--muted);font-weight:400}
/* Watchlist holdings and alerts */
.mw-portfolio-summary{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.mw-metric small{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--muted)}
.mw-metric.gain strong,.mw-portfolio b.gain{color:var(--green,#6fcf7f)}
.mw-metric.loss strong,.mw-portfolio b.loss{color:var(--red,#e0736b)}
.mw-portfolio-col{min-width:0}
.mw-portfolio-col[hidden],.mw-portfolio-form label[hidden]{display:none}
.mw-portfolio-form .mw-alert-mode{grid-column:1/-1}
.mw-alert-explanation{grid-column:1/-1;margin:0;font-size:var(--text-xs);line-height:1.6;color:var(--muted)}
.mw-portfolio-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);align-items:end;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md,8px);background:var(--raised);margin-bottom:var(--space-4)}
.mw-portfolio-form h3{grid-column:1/-1;margin:0;font-size:var(--text-base)}
.mw-portfolio-form label{display:grid;gap:4px;font-size:var(--text-sm);color:var(--muted);min-width:0}
.mw-portfolio-form :is(input,select){width:100%;min-width:0}
.mw-portfolio-form label small{color:var(--quiet)}
.mw-portfolio-form .mw-alert-price{grid-column:1/-1;min-width:0}
.mw-portfolio-form .mw-alert-price select{width:100%}
.mw-picker{grid-column:1/-1;display:grid;gap:4px;font-size:var(--text-sm);color:var(--muted);position:relative}
.mw-picked{display:flex;align-items:center;gap:var(--space-2);color:var(--text)}
.mw-picked .icon,.mw-picked img{width:24px;height:24px}
.mw-pick-list{display:grid;gap:2px}
.mw-pick-list button{display:flex;align-items:center;gap:var(--space-2);text-align:left;padding:4px var(--space-2);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text)}
.mw-pick-list button:hover,.mw-pick-list button:focus-visible{border-color:var(--line);background:var(--raised)}
.mw-pick-list button img{width:20px;height:20px}
.mw-pick-list small{margin-left:auto;color:var(--quiet);font-size:var(--text-xs)}
.mw-holdings{display:grid;gap:var(--space-2)}
.mw-holding{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md,8px);background:var(--raised)}
@container atlas-workspace (max-width:700px){.mw-holding{grid-template-columns:1fr}}
.mw-holding-item{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.mw-holding-item img{width:32px;height:32px}
.mw-holding-item h4{margin:0;font-size:var(--text-sm)}
.mw-holding-item small{color:var(--muted);font-size:var(--text-xs)}
.mw-holding-values{display:grid;gap:2px;font-size:var(--text-xs);color:var(--muted)}
.mw-holding-actions{display:flex;gap:var(--space-2)}
.mw-sell-form{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:end}
.mw-sell-form label{display:grid;gap:4px;font-size:var(--text-sm);color:var(--muted)}
.mw-sold{margin-top:var(--space-4);font-size:var(--text-sm)}
.mw-sold ul{margin:var(--space-2) 0;padding-left:var(--space-4);color:var(--muted)}
.mw-alerts{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.mw-alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--space-3);align-items:center;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md,8px);background:var(--raised)}
.mw-alert img{width:28px;height:28px}
.mw-alert small{display:block;color:var(--muted);font-size:var(--text-xs)}
.mw-alert-state{text-align:right;font-size:var(--text-sm)}
.mw-alert.is-triggered{border-color:var(--accent)}
.mw-alert.is-new{box-shadow:0 0 0 1px var(--accent) inset}
@container atlas-workspace (max-width:600px){.mw-alert{grid-template-columns:auto minmax(0,1fr) auto}.mw-alert-state{grid-column:2;text-align:left;grid-row:2}.mw-alert>button{grid-column:3;grid-row:1/3}.mw-item-actions{flex-wrap:wrap}.mw-item-actions>button:first-child{flex-basis:100%}.mw-item-actions>.mw-watch{margin-left:auto}}
.mw-gate{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-md,8px);background:var(--raised);max-width:640px}
.mw-gate h3{margin-top:0}

:is(#marketsWorkspace,.mw-dialog) .history-range .mw-csv{margin-left:var(--space-1);border-left:1px solid var(--line);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* The first item list holds about its loaded height, so the page does not grow when items arrive. */
.mw-empty.mw-first-load{display:grid;place-items:center;min-height:600px}
@media(max-width:700px){.mw-empty.mw-first-load{min-height:520px}}
/* Price history: before an item is chosen the chart card is as tall as the list beside it, with its
   message in the middle; the list fades out at the bottom so a half row reads as more to scroll. */
@media(min-width:1001px){#mwSelectedHistory:has(>.mw-history-empty){align-self:stretch;display:grid;align-content:center}}
.mw-history-picker .mw-results{mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
.mw-history-picker .mw-results:not(:has(>:nth-child(12))){mask-image:none;-webkit-mask-image:none}
/* Price history: the item list keeps room for names; narrower pages show the chart above the list. */
.mw-history-browser{grid-template-columns:minmax(330px,1fr) minmax(0,2fr)}
@container atlas-workspace (max-width:1100px){.mw-history-browser{grid-template-columns:1fr;grid-template-areas:"chart" "picker"}#mwSelectedHistory{position:static}#mwSelectedHistory:has(>.mw-history-empty){align-self:auto}}

/* /events-workspace.css */
#eventsWorkspace{max-width:none;margin:0;padding:0 0 var(--space-8);min-width:0}
#eventsNotificationsButton{flex:none;white-space:nowrap}
@media(max-width:590px){#eventsNotificationsButton{min-height:36px;padding:var(--space-2);font-size:var(--text-xs)}}
#eventsWorkspace .events-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-4);align-items:start}
#eventsWorkspace .events-card{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);margin:0 0 var(--space-4);min-width:0;overflow-wrap:anywhere}
#eventsWorkspace h3{font-size:var(--text-lg);line-height:1.4;margin:0 0 var(--space-4)}
#eventsWorkspace h4{font-size:var(--text-base);margin:var(--space-4) 0 var(--space-2)}
#eventsWorkspace h3 small{font-size:var(--text-sm);color:var(--muted);font-weight:500;margin-left:var(--space-2);font-variant-numeric:tabular-nums}
#eventsWorkspace .events-calendar-layout{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);grid-template-areas:"leadership schedule";gap:var(--space-4);align-items:start}
#eventsWorkspace .events-calendar-main{grid-area:schedule;min-width:0}
#eventsWorkspace .events-calendar-sidebar{grid-area:leadership;min-width:0}
#eventsWorkspace .events-leadership{padding:var(--space-4)}
#eventsWorkspace .events-mayor-heading{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);min-width:0}
#eventsWorkspace .events-mayor-heading>div{min-width:0}
#eventsWorkspace .events-person-role{font-size:var(--text-xs);color:var(--muted)}
#eventsWorkspace .events-person{font-size:var(--text-xl);color:var(--text);margin:var(--space-1) 0 0}
#eventsWorkspace .events-portrait{display:block;flex:none;padding:var(--space-1);background:var(--input);border:1px solid var(--line-soft);border-radius:var(--radius)}
#eventsWorkspace .events-portrait .game-image{width:52px;height:52px;background:transparent}
#eventsWorkspace .events-portrait .game-image img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
#eventsWorkspace .events-minister .events-portrait .game-image,#eventsWorkspace .events-candidates .events-portrait .game-image{width:36px;height:36px}
#eventsWorkspace .events-mayor-heading h4{margin:var(--space-1) 0 0;font-size:var(--text-lg)}
#eventsWorkspace .events-candidates .events-mayor-heading{margin-bottom:var(--space-3);gap:var(--space-3)}
#eventsWorkspace .events-candidates .events-mayor-heading span:not(.game-image):not(.events-portrait){font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
#eventsWorkspace .events-note,#eventsWorkspace .events-source{font-size:var(--text-xs);line-height:1.7;color:var(--muted);margin:var(--space-3) 0}
#eventsWorkspace .events-source strong{color:var(--amber)}
#eventsWorkspace .events-status{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--muted);line-height:1.65}
#eventsWorkspace .events-status:empty{display:none}
#eventsWorkspace .events-status button{margin-left:var(--space-3)}
#eventsWorkspace .events-empty{padding:var(--space-5);border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:var(--text-sm);line-height:1.7}
#eventsWorkspace .events-perks{padding:0;margin:0}
#eventsWorkspace .events-perk{border-top:1px solid var(--line-soft)}
#eventsWorkspace .events-perk:first-child{border-top:0}
#eventsWorkspace .events-perk>strong{display:block;padding:10px 0 var(--space-1);line-height:1.5;font-size:var(--text-sm);font-weight:600;color:var(--text)}
#eventsWorkspace summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
#eventsWorkspace .events-perks p{margin:0 0 var(--space-3);font-size:var(--text-xs);color:var(--muted);white-space:pre-line;line-height:1.65}
#eventsWorkspace .events-minister{border-top:1px solid var(--line);margin-top:var(--space-4);padding-top:var(--space-5)}
#eventsWorkspace .events-minister .events-mayor-heading{margin-bottom:var(--space-2)}
#eventsWorkspace .events-election{padding:var(--space-4);scroll-margin-top:var(--space-6)}
#eventsWorkspace .events-election>summary{font-size:var(--text-base);font-weight:600;cursor:pointer;min-height:24px;width:100%;line-height:1.5}
#eventsWorkspace .events-election[open]>summary{margin-bottom:var(--space-4)}
#eventsWorkspace .events-election-year{margin:0 0 var(--space-4);font-size:var(--text-xs);color:var(--muted)}
#eventsWorkspace .events-candidates{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
#eventsWorkspace .events-candidates article{padding:var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--input);min-width:0}
#eventsWorkspace .events-candidates h4{margin:0 0 var(--space-1);font-size:var(--text-base)}
#eventsWorkspace .events-candidates .events-perk>strong{font-size:var(--text-xs);padding:var(--space-2) 0 var(--space-1)}
#eventsWorkspace .events-quick-links{display:flex;gap:var(--space-2) var(--space-5);flex-wrap:wrap;margin:0 0 var(--space-4)}
#eventsWorkspace .events-quick-links button{font-size:var(--text-sm);font-weight:500;color:var(--muted);border:0;background:transparent;border-radius:var(--radius-sm);padding:6px 0;min-height:32px;text-underline-offset:5px}
#eventsWorkspace .events-quick-links button:hover{background:transparent;color:var(--text);text-decoration:underline}
#eventsWorkspace :is(.events-now,.events-special,.events-hourly){scroll-margin-top:var(--space-6)}
#eventsWorkspace .events-now:has(.is-ongoing){border-color:color-mix(in srgb,var(--green) 50%,var(--line))}
#eventsWorkspace .events-now:not(:has(.events-schedule-row)){display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-5);padding:var(--space-4) var(--space-5);background:var(--input)}
#eventsWorkspace .events-now:not(:has(.events-schedule-row)) h3{margin:0;font-size:var(--text-sm)}
#eventsWorkspace .events-now:not(:has(.events-schedule-row)) .events-empty{padding:0;border:0;border-radius:0;font-size:var(--text-sm)}
#eventsWorkspace .events-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin:0 var(--space-2) 2px 0}
#eventsWorkspace .events-now:not(:has(.is-ongoing)) .events-live-dot{background:var(--quiet)}
#eventsWorkspace .events-section-note{font-size:var(--text-xs);color:var(--muted);margin:calc(-1 * var(--space-3)) 0 var(--space-3)}
#eventsWorkspace .events-agenda{display:grid}
#eventsWorkspace .events-schedule-row{display:grid;grid-template-columns:var(--item-art-size) minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line-soft);min-width:0}
#eventsWorkspace .events-schedule-row:first-child{border-top:0;padding-top:var(--space-2)}
#eventsWorkspace .events-schedule-row:last-child{padding-bottom:var(--space-1)}
#eventsWorkspace .events-schedule-row:not(:has(>.game-image)){grid-template-columns:minmax(0,1fr) auto}
#eventsWorkspace .events-schedule-row>.game-image{width:var(--item-art-size);height:var(--item-art-size);flex:none;background:var(--input);border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
#eventsWorkspace .events-schedule-row>.game-image img{max-width:var(--item-art-compact);max-height:var(--item-art-compact);image-rendering:pixelated}
#eventsWorkspace .events-schedule-row>div{min-width:0}
#eventsWorkspace .events-schedule-row h4{margin:0;font-size:var(--text-base);line-height:1.45}
#eventsWorkspace .events-schedule-row p{margin:var(--space-1) 0 var(--space-2);line-height:1.6;font-size:var(--text-sm);color:var(--muted)}
#eventsWorkspace .events-badge{display:inline-flex;align-items:center;align-self:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--raised);padding:3px var(--space-2);color:var(--muted);font-size:var(--text-xs);font-weight:500;line-height:1.5}
#eventsWorkspace .events-schedule-row .events-badge{border:0;border-radius:0;background:transparent;padding:0;margin-top:var(--space-1);color:var(--quiet)}
#eventsWorkspace .events-schedule-time{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:var(--space-2);max-width:200px;text-align:right;font-variant-numeric:tabular-nums}
#eventsWorkspace .events-schedule-time strong{font-size:var(--text-base);color:var(--amber);line-height:1.4}
#eventsWorkspace .events-schedule-time time{font-size:var(--text-xs);color:var(--muted);line-height:1.5}
#eventsWorkspace .is-ongoing .events-schedule-time strong{color:var(--amber)}
#eventsWorkspace .events-later{border-top:1px solid var(--line);margin-top:var(--space-4)}
#eventsWorkspace .events-later>summary{font-size:var(--text-sm);color:var(--text);padding:var(--space-4) 0 0;cursor:pointer;width:100%;line-height:1.5}
#eventsWorkspace .events-later[open]>summary{padding-bottom:var(--space-3)}
#eventsWorkspace .events-sources{font-size:var(--text-sm);color:var(--muted);background:var(--input);padding:var(--space-4) var(--space-5)}
#eventsWorkspace .events-sources summary{cursor:pointer;font-weight:600;font-size:var(--text-sm);width:100%;line-height:1.5}
#eventsWorkspace .events-sources p{line-height:1.7;margin:var(--space-4) 0 0;max-width:90ch}
#eventsWorkspace .events-day{display:flex;align-items:center;gap:var(--space-4) var(--space-6);padding:var(--space-5) var(--space-6);margin:var(--space-5) 0 var(--space-6);border:1px solid var(--line);border-radius:var(--radius);background:var(--input)}
#eventsWorkspace .events-day b{font-size:var(--text-sm);flex:none}
#eventsWorkspace .events-day span{font-size:var(--text-xs);color:var(--muted);line-height:1.65}
#eventsWorkspace form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-3);margin-bottom:var(--space-5)}
#eventsWorkspace form[data-events-form="timer"]{grid-template-columns:minmax(0,1fr) 86px auto}
#eventsWorkspace form label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted);min-width:0}
#eventsWorkspace form input{width:100%;font-size:var(--text-sm);min-width:0;min-height:42px}
#eventsWorkspace form button{min-height:42px;font-size:var(--text-sm)}
#eventsWorkspace .events-task{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--line-soft)}
#eventsWorkspace .events-task label{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0;cursor:pointer;font-size:var(--text-base);line-height:1.5}
#eventsWorkspace .events-task input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
#eventsWorkspace .events-task input:checked+span{text-decoration:line-through;color:var(--quiet)}
#eventsWorkspace .events-task button,#eventsWorkspace .events-timer button{font-size:var(--text-xs);padding:8px;min-height:36px;color:var(--muted);flex:none}
#eventsWorkspace .events-timers{display:grid;gap:var(--space-3)}
#eventsWorkspace .events-timer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--input)}
#eventsWorkspace .events-timer>div{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
#eventsWorkspace .events-timer b{font-size:var(--text-sm);line-height:1.5}
#eventsWorkspace .events-timer strong{font-size:var(--text-xl);line-height:1.3;color:var(--blue);font-variant-numeric:tabular-nums}
#eventsWorkspace .events-timer small{font-size:var(--text-xs);line-height:1.6;color:var(--muted)}
#eventsWorkspace .events-timer.is-finished{border-color:var(--green)}
#eventsWorkspace .events-timer.is-finished strong{color:var(--green)}
#eventsWorkspace .events-warning{color:var(--amber)}
#eventsWorkspace #eventsNotificationDialog{inset:0;width:900px;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 20px 80px #0007;animation:none}
#eventsWorkspace #eventsNotificationDialog::backdrop{background:#070810b8;backdrop-filter:none}
#eventsWorkspace #eventsNotificationDialog>.events-notifications{margin:0;border:0;border-radius:0;box-shadow:none}
#eventsWorkspace #eventsNotificationDialog>.events-notifications::before,#eventsWorkspace #eventsNotificationDialog>.events-notifications::after,#eventsWorkspace #eventsNotificationDialog .premium-edge-art{display:none}
#eventsWorkspace .events-notifications{container:event-notifications / inline-size}
#eventsWorkspace .events-notification-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5)}
#eventsWorkspace .events-notification-heading>div:first-child{flex:1 1 240px;min-width:0}
#eventsWorkspace .events-notification-heading h3{font-size:var(--text-base);margin:0 0 var(--space-1)}
#eventsWorkspace .events-notification-heading p{margin:0;color:var(--muted);font-size:var(--text-xs);line-height:1.5}
#eventsWorkspace .events-notification-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
#eventsWorkspace .events-notification-actions button{min-height:32px;padding:6px var(--space-3);font-size:var(--text-xs)}
#eventsWorkspace form[data-events-notifications]{display:block;margin:0}
#eventsWorkspace [data-events-notifications] fieldset{border:0;padding:0;margin:0;min-width:0}
#eventsWorkspace .events-notification-groups{display:grid;gap:var(--space-4);padding:var(--space-3) 0;margin-top:var(--space-3);border-top:1px solid var(--line-soft)}
#eventsWorkspace .events-notification-group{min-width:0}
#eventsWorkspace .events-notification-group h4{margin:0 0 var(--space-2);font-size:var(--text-sm)}
#eventsWorkspace .events-notification-choices{display:grid;gap:var(--space-1) var(--space-4)}
#eventsWorkspace .events-notify-choice{display:flex;flex-direction:row;align-items:flex-start;gap:var(--space-2);color:var(--muted);font-size:var(--text-xs);line-height:1.6;cursor:pointer}
#eventsWorkspace .events-notification-choices .events-notify-choice{min-height:26px;padding:2px 0}
#eventsWorkspace .events-notify-choice:hover{color:var(--text)}
#eventsWorkspace .events-notify-choice input{width:17px;height:17px;min-height:17px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
#eventsWorkspace .events-notify-choice input:checked+span{color:var(--text)}
#eventsWorkspace .events-notify-choice input:disabled+span{color:var(--quiet)}
#eventsWorkspace .events-notification-options{display:flex;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap}
#eventsWorkspace .events-notification-lead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted)}
#eventsWorkspace .events-reminder-times{position:relative;max-width:100%}
#eventsWorkspace .events-reminder-times>button{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:165px;max-width:100%;text-align:left}
#eventsWorkspace .events-reminder-chevron{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);flex:none;margin-top:-3px}
#eventsWorkspace [aria-expanded="true"]>.events-reminder-chevron{transform:rotate(225deg);margin-top:3px}
#eventsWorkspace .events-reminder-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:15;width:190px;max-width:calc(100vw - 64px);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:0 8px 24px #0005}
#eventsWorkspace .events-reminder-menu .events-notify-choice{align-items:center;min-height:32px;padding:var(--space-1) var(--space-2);border-radius:var(--radius)}
#eventsWorkspace .events-reminder-menu .events-notify-choice:hover{background:var(--raised)}
#eventsWorkspace .events-reminder-menu input{margin:0}
#eventsWorkspace .events-notification-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line-soft)}
#eventsWorkspace .events-notification-footer button{flex:none;min-height:34px;padding:6px var(--space-3);font-size:var(--text-xs)}
@media (pointer:coarse){#eventsWorkspace .events-notification-choices .events-notify-choice,#eventsWorkspace .events-reminder-menu .events-notify-choice{min-height:36px}#eventsWorkspace .events-notification-actions button,#eventsWorkspace .events-notification-footer button{min-height:40px}}
@container event-notifications (min-width:420px){#eventsWorkspace .events-notification-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container event-notifications (min-width:740px){#eventsWorkspace .events-notification-groups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}#eventsWorkspace .events-notification-group:last-child{grid-column:1/-1}#eventsWorkspace .events-notification-group:last-child .events-notification-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container event-notifications (min-width:1100px){#eventsWorkspace .events-notification-groups{grid-template-columns:2fr 2fr 1fr}#eventsWorkspace .events-notification-group:last-child{grid-column:auto}#eventsWorkspace .events-notification-group:last-child .events-notification-choices{grid-template-columns:1fr}}
#eventsWorkspace form[data-events-form="timer"] .events-timer-notify-new{grid-column:1/-1}
#eventsWorkspace .events-bingo-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--space-6);margin-bottom:var(--space-6)}
#eventsWorkspace .events-window{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center}
#eventsWorkspace .events-window b{font-size:var(--text-xl)}
#eventsWorkspace .events-window>span:last-child{flex-basis:100%;font-size:var(--text-sm);color:var(--muted);line-height:1.65}
#eventsWorkspace .events-bingo-overview a{font-size:var(--text-xs)}
#eventsWorkspace .events-board-summary{border-left:1px solid var(--line);padding-left:var(--space-6)}
#eventsWorkspace .events-board-summary>p:first-child{font-size:var(--text-lg);font-weight:600;margin:0;line-height:1.5}
#eventsWorkspace .events-board-summary .events-note:last-child{margin-bottom:0}
#eventsWorkspace .events-bingo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3)}
#eventsWorkspace .events-goal{display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:var(--space-3);padding:var(--space-4);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow-wrap:anywhere}
#eventsWorkspace .events-goal h3{font-size:var(--text-base);margin:0;line-height:1.45}
#eventsWorkspace .events-goal p{margin:0;font-size:var(--text-sm);color:var(--muted);line-height:1.65;white-space:pre-line;flex:1}
#eventsWorkspace .events-goal strong,#eventsWorkspace .events-goal small{font-size:var(--text-xs);line-height:1.5}
#eventsWorkspace .events-goal-check{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-xs);line-height:1.5;color:var(--muted);cursor:pointer;padding-top:var(--space-3);border-top:1px solid var(--line-soft)}
#eventsWorkspace .events-goal-check input{flex-shrink:0;accent-color:var(--green);width:17px;height:17px;margin-top:0}
#eventsWorkspace .events-goal.is-checked{border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--panel))}
#eventsWorkspace .events-goal.is-checked .events-goal-check{color:var(--green)}
#eventsWorkspace .events-goal.is-community{background:var(--raised)}
#eventsWorkspace .events-goal.is-community .events-badge{color:var(--blue);background:var(--input)}
#eventsWorkspace .events-goal progress{display:block;width:100%;height:6px;accent-color:var(--blue);border:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--line)}
#eventsWorkspace .events-goal progress::-webkit-progress-bar{background:var(--line)}
#eventsWorkspace .events-goal progress::-webkit-progress-value{background:var(--blue)}
#eventsWorkspace .events-goal progress::-moz-progress-bar{background:var(--blue)}
@media(max-width:1250px){#eventsWorkspace .events-calendar-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--space-4)}#eventsWorkspace .events-schedule-row{grid-template-columns:40px minmax(0,1fr);gap:var(--space-3)}#eventsWorkspace .events-schedule-time{grid-column:2;max-width:none;flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left;flex-wrap:wrap}#eventsWorkspace .events-schedule-row:not(:has(>.game-image)){grid-template-columns:1fr}#eventsWorkspace .events-schedule-row:not(:has(>.game-image)) .events-schedule-time{grid-column:1}#eventsWorkspace .events-bingo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#eventsWorkspace form[data-events-form="timer"]{grid-template-columns:minmax(0,1fr) 86px}#eventsWorkspace form[data-events-form="timer"] button{grid-column:1/-1}}
@media(max-width:1000px){#eventsWorkspace .events-calendar-layout{grid-template-columns:1fr;grid-template-areas:"schedule" "leadership"}#eventsWorkspace .events-calendar-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}#eventsWorkspace .events-schedule-row{grid-template-columns:var(--item-art-size) minmax(0,1fr) auto}#eventsWorkspace .events-schedule-time{grid-column:auto;flex-direction:column;align-items:flex-end;text-align:right}#eventsWorkspace .events-schedule-row:not(:has(>.game-image)){grid-template-columns:minmax(0,1fr) auto}#eventsWorkspace .events-schedule-row:not(:has(>.game-image)) .events-schedule-time{grid-column:auto}#eventsWorkspace .events-grid{grid-template-columns:1fr;gap:var(--gap,var(--space-4))}#eventsWorkspace .events-day{flex-wrap:wrap;gap:var(--space-2)}#eventsWorkspace form[data-events-form="timer"]{grid-template-columns:minmax(0,1fr) 86px auto}#eventsWorkspace form[data-events-form="timer"] button{grid-column:auto}}
@container atlas-workspace (max-width:700px){#eventsWorkspace .events-bingo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#eventsWorkspace .events-calendar-sidebar,#eventsWorkspace .events-bingo-overview{grid-template-columns:1fr}#eventsWorkspace .events-bingo-overview{gap:0}#eventsWorkspace .events-calendar-sidebar{gap:var(--gap,var(--space-4))}#eventsWorkspace .events-board-summary{border-left:0;border-top:1px solid var(--line);padding:var(--space-5) 0 0;margin-top:var(--space-5)}#eventsWorkspace .events-schedule-row{grid-template-columns:40px minmax(0,1fr);gap:var(--space-3)}#eventsWorkspace .events-schedule-time{grid-column:2;flex-direction:row;align-items:baseline;justify-content:space-between;text-align:left;flex-wrap:wrap}#eventsWorkspace .events-schedule-row:not(:has(>.game-image)){grid-template-columns:1fr}#eventsWorkspace .events-schedule-row:not(:has(>.game-image)) .events-schedule-time{grid-column:1}#eventsWorkspace .events-quick-links{gap:var(--space-1) var(--space-4)}#eventsWorkspace .events-quick-links button{font-size:var(--text-xs)}}
@container atlas-workspace (max-width:460px){#eventsWorkspace .events-bingo-grid{grid-template-columns:1fr}#eventsWorkspace .events-card{padding:var(--space-4)}#eventsWorkspace form[data-events-form="timer"]{grid-template-columns:minmax(0,1fr) 80px}#eventsWorkspace form[data-events-form="timer"] button{grid-column:1/-1}#eventsWorkspace form[data-events-form="task"]{grid-template-columns:1fr}#eventsWorkspace .events-task{gap:var(--space-2)}#eventsWorkspace .events-timer{align-items:flex-start;flex-wrap:wrap}#eventsWorkspace .events-timer strong{font-size:var(--text-lg)}}
/* First load: the loading cards hold about the space the schedule will take, so nothing jumps when it
   arrives (owner, 28 Oct 2026: "cards adjust their size when first loading a page"). */
#eventsWorkspace .events-first-load #eventsNow{min-height:190px}
#eventsWorkspace .events-first-load #eventsSpecial{min-height:605px}
#eventsWorkspace .events-first-load #eventsHourly{min-height:362px}
#eventsWorkspace .events-first-load .events-leadership{min-height:566px}
#eventsWorkspace .events-first-load #eventsCandidates{min-height:1500px}
@media(max-width:1000px){
 #eventsWorkspace .events-first-load #eventsNow{min-height:368px}
 #eventsWorkspace .events-first-load #eventsSpecial{min-height:851px}
 #eventsWorkspace .events-first-load #eventsHourly{min-height:471px}
 #eventsWorkspace .events-first-load .events-leadership{min-height:538px}
 #eventsWorkspace .events-first-load #eventsCandidates{min-height:1448px}
}

/* /quests.css */
/* Quests (owner's choice, 29 Oct 2026): a streak card with the quest Premium left as the big number and
   what can be claimed under it, Today and This week side by side, the hunt in one line, and every
   category in a list beside its quests. Phones get section tabs and a Claim all bar at the bottom. */
/* Rewards are Premium gold in every theme (themes repaint --premium-gold to their own metal). */
.quests-workspace { --quest-gold:#e4cb91; --quest-gold-deep:#b79a60 }
.quests-workspace .quest-page { display:grid; gap:var(--space-4) }
.quests-workspace .quest-card { padding:var(--space-5); min-width:0 }
.quests-workspace .quest-card h2 { margin:0; font-size:var(--text-lg); font-weight:650 }
.quests-workspace .quest-card p { margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.5 }
.quests-workspace .quest-main-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-1) var(--space-4); margin-bottom:var(--space-2) }
.quests-workspace .quest-progress-text { font-size:var(--text-xs); color:var(--quiet) }
.quests-workspace .icon { width:18px; height:18px }
/* Claim buttons are gold; the reward amount is gold everywhere. */
#mainContent .quests-workspace .quest-claim { min-height:36px; padding:0 var(--space-3); border:1px solid color-mix(in srgb,var(--quest-gold) 60%,transparent); border-radius:var(--radius-sm); background:linear-gradient(180deg,color-mix(in srgb,var(--quest-gold) 30%,var(--panel)),color-mix(in srgb,var(--quest-gold) 16%,var(--panel))); color:var(--quest-gold); font-size:var(--text-sm); font-weight:650; white-space:nowrap }
#mainContent .quests-workspace .quest-claim:hover { border-color:var(--quest-gold); background:color-mix(in srgb,var(--quest-gold) 32%,var(--panel)) }
.quests-workspace .quest-claim:disabled { opacity:.6 }
/* Top card. */
.quests-workspace .quest-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); align-items:stretch; padding:var(--space-6) }
.quests-workspace .quest-hero-main { display:grid; gap:var(--space-4); min-width:0 }
.quests-workspace .quest-streak { display:flex; align-items:center; gap:var(--space-4) }
.quests-workspace .quest-flame { flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:var(--radius); background:color-mix(in srgb,var(--amber) 18%,var(--input)); color:var(--amber) }
.quests-workspace .quest-flame .icon { width:28px; height:28px }
.quests-workspace .quest-streak h2 { font-size:var(--text-2xl); line-height:1.15 }
.quests-workspace .quest-week { display:flex; gap:var(--space-2); margin:0; padding:0; list-style:none }
.quests-workspace .quest-week li { display:grid; justify-items:center; gap:4px; width:58px; padding:var(--space-2) 0; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--input); font-size:11px; color:var(--quiet) }
.quests-workspace .quest-week li.quest-seen { background:color-mix(in srgb,var(--amber) 18%,var(--input)); color:var(--amber) }
.quests-workspace .quest-week li.quest-today { border-color:var(--amber) }
.quests-workspace .quest-week li b { font-size:var(--text-sm); line-height:1; font-variant-numeric:tabular-nums; color:var(--text) }
.quests-workspace .quest-week li b:empty { display:none }
.quests-workspace .quest-hero-side { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); text-align:right; min-width:0 }
.quests-workspace .quest-hero-side .quest-claimline { margin-top:auto }
.quests-workspace .quest-label { font-size:var(--text-xs); color:var(--quiet) }
.quests-workspace .quest-premium { font-size:40px; line-height:1.05; font-weight:750; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap }
.quests-workspace .quest-premium.quest-counting { color:var(--quest-gold) }
.quests-workspace .quest-claimline { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-2); padding:6px 6px 6px var(--space-4); border:1px solid color-mix(in srgb,var(--quest-gold) 45%,transparent); border-radius:var(--radius); background:color-mix(in srgb,var(--quest-gold) 8%,var(--input)); font-size:var(--text-sm); color:var(--muted) }
.quests-workspace .quest-claimline b { color:var(--quest-gold); font-size:var(--text-base) }
.quests-workspace p.quest-claimline-empty { max-width:300px; padding:var(--space-2) var(--space-3); border-color:var(--line-soft); background:var(--input); text-align:left; font-size:var(--text-xs) }
/* Today and This week. */
.quests-workspace .quest-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-items:stretch }
.quests-workspace .quest-columns:empty { display:none }
.quests-workspace .quest-period { display:flex; flex-direction:column }
.quests-workspace .quest-period-list { flex:1; grid-auto-rows:1fr }
.quests-workspace .quest-period .quest-copy p { display:none }
.quests-workspace .quest-period .quest-daily-bonus { margin-top:auto }
.quests-workspace .quest-daily-bonus { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); margin:var(--space-2) 0 0; padding-top:var(--space-3); border-top:1px dashed var(--line); font-size:var(--text-sm); color:var(--muted) }
.quests-workspace .quest-daily-bonus strong { color:var(--quest-gold) }
.quests-workspace .quest-daily-bonus.quest-done strong { color:var(--green) }
/* Quest rows. */
.quests-workspace .quest-list { display:grid; margin:0; padding:0; list-style:none }
.quests-workspace .quest-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; border-top:1px solid var(--line-soft); min-width:0 }
.quests-workspace .quest-list > .quest-row:first-child { border-top:0 }
.quests-workspace .quest-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:var(--radius-sm); background:var(--raised); color:var(--accent) }
.quests-workspace .quest-ready .quest-icon { background:color-mix(in srgb,var(--quest-gold) 16%,var(--raised)); color:var(--quest-gold) }
.quests-workspace .quest-copy { display:grid; gap:2px; min-width:0 }
.quests-workspace .quest-context { font-size:var(--text-xs); color:var(--quiet) }
.quests-workspace .quest-copy h3 { margin:0; font-size:var(--text-sm); font-weight:600; line-height:1.4; color:var(--text); overflow-wrap:anywhere }
.quests-workspace .quest-copy p { font-size:var(--text-xs); color:var(--muted); overflow-wrap:anywhere }
.quests-workspace .quest-row-end { display:flex; align-items:center; gap:var(--space-3); min-width:0 }
.quests-workspace .quest-reward { font-size:var(--text-sm); font-weight:650; color:var(--quest-gold); white-space:nowrap; font-variant-numeric:tabular-nums }
.quests-workspace .quest-row-end button { min-height:36px; padding:0 var(--space-3); font-size:var(--text-sm); white-space:nowrap }
.quests-workspace .quest-complete { display:flex; align-items:center; gap:var(--space-1); color:var(--green); font-size:var(--text-sm); white-space:nowrap }
.quests-workspace .quest-complete .icon { width:14px; height:14px }
.quests-workspace .quest-automatic { font-size:var(--text-xs); color:var(--quiet); text-align:right; max-width:110px }
.quests-workspace .quest-done .quest-icon,.quests-workspace .quest-done .quest-copy { opacity:.55 }
.quests-workspace .quest-done .quest-reward { color:var(--quiet); font-weight:500 }
.quests-workspace progress { display:block; width:100%; max-width:240px; height:4px; margin:var(--space-1) 0 0; border:0; border-radius:var(--radius-sm); overflow:hidden; background:var(--line-soft); appearance:none }
.quests-workspace progress::-webkit-progress-bar { background:var(--line-soft) }
.quests-workspace progress::-webkit-progress-value { background:var(--accent) }
.quests-workspace progress::-moz-progress-bar { background:var(--accent) }
/* The hunt in one line. */
.quests-workspace .quest-hunt { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-5) }
.quests-workspace .quest-hunt h2 { font-size:var(--text-base); white-space:nowrap }
.quests-workspace .quest-slots { display:flex; gap:6px; margin:0; padding:0; list-style:none }
.quests-workspace .quest-slots li { display:grid; place-items:center; width:36px; height:36px; border:1px dashed var(--line); border-radius:var(--radius-sm); background:var(--input) }
.quests-workspace .quest-slots img { width:24px; height:24px; image-rendering:pixelated; filter:grayscale(1) brightness(.4) opacity(.6) }
.quests-workspace .quest-slots li.quest-found { border-style:solid; border-color:color-mix(in srgb,var(--quest-gold) 55%,transparent); background:color-mix(in srgb,var(--quest-gold) 10%,var(--input)) }
.quests-workspace .quest-slots li.quest-found img { filter:none }
.quests-workspace .quest-hunt-end { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-2) var(--space-4); margin-left:auto }
.quests-workspace .quest-hunt-end b { color:var(--quest-gold) }
/* All quests: categories beside their quests. */
.quests-workspace .quest-board-grid { display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--space-6); margin-top:var(--space-2); align-items:start }
.quests-workspace .quest-categories { display:grid; gap:var(--space-1); position:sticky; top:var(--space-4) }
.quests-workspace .quest-categories button { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:var(--space-2); min-height:40px; padding:var(--space-2) var(--space-3); text-align:left; font-size:var(--text-sm) }
.quests-workspace .quest-categories span { min-width:0; line-height:1.3 }
.quests-workspace .quest-categories small { font-size:var(--text-xs); color:var(--quiet); font-variant-numeric:tabular-nums }
.quests-workspace .quest-badge { font-style:normal; min-width:20px; padding:1px 7px; border-radius:999px; background:var(--quest-gold); color:var(--bg); font-size:11px; font-weight:750; text-align:center }
.quests-workspace .quest-picker { display:none }
.quests-workspace .quest-panel { min-width:0 }
.quests-workspace .quest-panel-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-1) var(--space-3); margin-bottom:var(--space-1) }
.quests-workspace .quest-panel-head h3 { margin:0; font-size:var(--text-base); font-weight:650 }
.quests-workspace .quest-done-head { margin:var(--space-5) 0 0; font-size:var(--text-xs); font-weight:600; color:var(--quiet) }
.quests-workspace .quest-empty { padding:var(--space-5) 0 }
.quest-link { display:flex; gap:var(--space-2); min-width:0 }
.quest-link input { flex:1 1 auto; min-width:0; min-height:42px; font-size:var(--text-sm) }
.quest-link button { flex:none; min-height:42px; min-width:120px }
/* The gold invite buttons: Copy or Share link, Sign up free. */
button.quest-share { min-height:42px; padding:0 var(--space-4); border:1px solid color-mix(in srgb,#e4cb91 60%,transparent); border-radius:var(--radius-sm); background:linear-gradient(180deg,color-mix(in srgb,#e4cb91 30%,var(--panel)),color-mix(in srgb,#e4cb91 16%,var(--panel))); color:#e4cb91; font-size:var(--text-sm); font-weight:650; white-space:nowrap }
button.quest-share:hover { border-color:#e4cb91; background:color-mix(in srgb,#e4cb91 32%,var(--panel)) }
button.quest-share.quest-copied { background:var(--green); border-color:var(--green); color:var(--bg) }
/* The Invite card: the link on the left, every reward step on the right. */
.quests-workspace .quest-invite-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--space-4) var(--space-6); align-items:stretch }
.quests-workspace .quest-invite-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:var(--space-3); min-width:0 }
.quests-workspace .quest-invite-side .quest-ladder { align-self:stretch }
.quests-workspace .quest-invite-main { display:grid; gap:var(--space-3); min-width:0 }
.quests-workspace .quest-invite-main h2 { display:flex; align-items:center; gap:var(--space-2) }
.quests-workspace .quest-invite-main h2 .icon { width:20px; height:20px; color:var(--quest-gold) }
.quests-workspace .quest-invite-main p { margin:0; font-size:var(--text-sm); color:var(--muted) }
.quests-workspace .quest-ladder { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none }
.quests-workspace .quest-ladder li { display:grid; justify-items:center; gap:2px; padding:var(--space-2) 0; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--input); font-size:11px; color:var(--quiet); text-align:center }
.quests-workspace .quest-ladder b { font-size:var(--text-base); line-height:1.2; color:var(--text); font-variant-numeric:tabular-nums }
.quests-workspace .quest-ladder em { font-style:normal; color:var(--quest-gold) }
.quests-workspace .quest-ladder li.quest-step-done { border-color:color-mix(in srgb,var(--quest-gold) 45%,transparent); background:color-mix(in srgb,var(--quest-gold) 14%,var(--input)) }
/* After Claim all: the invite prompt. */
dialog.quest-invite-dialog { position:fixed; inset:0; margin:auto; width:min(440px,calc(100vw - 32px)); height:fit-content; max-height:calc(100dvh - 32px); overflow:auto; padding:var(--space-6); border:1px solid color-mix(in srgb,#e4cb91 45%,transparent); border-radius:var(--radius); background:var(--panel); color:var(--text); text-align:center }
dialog.quest-invite-dialog[open] { animation:none; box-shadow:0 20px 60px #0009 }
.quest-invite-dialog::backdrop { background:rgb(0 0 0 / .55) }
.quest-invite-dialog h2 { margin:0 0 var(--space-2); font-size:var(--text-lg) }
.quest-invite-dialog p { margin:0 0 var(--space-4); font-size:var(--text-sm); color:var(--muted) }
.quest-invite-dialog .quest-invite-big { margin:0 0 var(--space-2); font-size:34px; line-height:1.1; font-weight:750; color:#e4cb91 }
.quest-invite-dialog .quest-link input { text-align:left }
.quest-invite-actions { display:flex; justify-content:center; gap:var(--space-2); margin-top:var(--space-3) }
.quest-invite-later { min-height:36px; padding:0 var(--space-3); border:0; background:none; color:var(--quiet); font-size:var(--text-sm) }
.quest-invite-later:hover { color:var(--text) }
/* For visitors who opened an invite link and are not signed in yet. */
.quest-invite-banner { display:flex; align-items:center; gap:var(--space-4); margin:0 0 var(--space-4); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4); border:1px solid color-mix(in srgb,#e4cb91 50%,transparent); border-radius:var(--radius); background:color-mix(in srgb,#e4cb91 10%,var(--panel)) }
.quest-invite-banner > .icon { flex:none; width:24px; height:24px; color:#e4cb91 }
.quest-invite-banner p { flex:1; margin:0; font-size:var(--text-sm); color:var(--muted) }
.quest-invite-banner p b { display:block; font-size:var(--text-base); color:var(--text) }
.quest-banner-close { flex:none; width:36px; height:36px; padding:0; border:0; border-radius:var(--radius-sm); background:none; color:var(--quiet); font-size:22px; line-height:1 }
.quest-banner-close:hover { color:var(--text) }
.quests-workspace .quest-message { max-width:720px }
.quests-workspace .quest-message h2 { margin-bottom:var(--space-2) }
.quests-workspace .quest-message button { margin-top:var(--space-4); min-height:44px }
.quests-workspace .quest-tabs,.quests-workspace .quest-claimbar { display:none }
/* "+30 min" rising from a claimed reward. */
.quest-float { position:fixed; z-index:140; pointer-events:none; translate:0 0; font-weight:750; font-size:20px; color:#e4cb91; text-shadow:0 0 12px color-mix(in srgb,#e4cb91 55%,transparent),0 2px 4px #000; opacity:0; white-space:nowrap }
/* The Quests entry counts the rewards waiting. */
#questsNav .quest-nav-badge { margin-left:auto; min-width:20px; padding:1px 7px; border-radius:999px; background:#e4cb91; color:var(--bg); font-style:normal; font-size:11px; font-weight:750; line-height:16px; text-align:center }
body[data-premium-nav="dock"] #sidebar #questsNav .quest-nav-badge { position:absolute; top:2px; right:2px; margin:0; min-width:16px; padding:0 4px; font-size:10px }
@container atlas-workspace (max-width:1100px) {
 .quests-workspace .quest-invite-card { grid-template-columns:1fr; gap:var(--space-4) }
 .quests-workspace .quest-hero { grid-template-columns:1fr }
 .quests-workspace .quest-hero-side { align-items:flex-start; text-align:left }
 .quests-workspace .quest-board-grid { grid-template-columns:200px minmax(0,1fr); gap:var(--space-4) }
}
@container atlas-workspace (max-width:820px) {
 .quests-workspace .quest-columns { grid-template-columns:1fr }
 .quests-workspace .quest-hunt { flex-wrap:wrap }
 .quests-workspace .quest-hunt-end { width:100%; margin-left:0; justify-content:space-between }
}
/* Phones: one section at a time under the top card, a category picker, and Claim all pinned at the bottom. */
@container atlas-workspace (max-width:640px) {
 .quests-workspace .quest-card { padding:var(--space-4) }
 .quests-workspace .quest-hero { padding:var(--space-4); gap:var(--space-4) }
 .quests-workspace .quest-flame { width:44px; height:44px }
 .quests-workspace .quest-streak h2 { font-size:var(--text-xl) }
 .quests-workspace .quest-week { gap:4px }
 .quests-workspace .quest-week li { flex:1; width:auto; font-size:10px }
 .quests-workspace .quest-premium { font-size:34px }
 .quests-workspace .quest-claimline { display:none }
 .quests-workspace .quest-tabs { position:sticky; top:var(--space-2); z-index:5; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--input) }
 .quests-workspace .quest-tabs button { display:grid; justify-items:center; gap:2px; min-height:44px; padding:6px 2px; font-size:var(--text-xs) }
 .quests-workspace .quest-page:not([data-quest-tab="daily"]) .quest-daily,
 .quests-workspace .quest-page:not([data-quest-tab="weekly"]) .quest-weekly,
 .quests-workspace .quest-page:not([data-quest-tab="hunt"]) .quest-hunt,
 .quests-workspace .quest-page:not([data-quest-tab="all"]) .quest-board { display:none }
 .quests-workspace .quest-page:not([data-quest-tab="daily"]):not([data-quest-tab="weekly"]) .quest-columns { display:none }
 .quests-workspace .quest-board-grid { grid-template-columns:1fr }
 .quests-workspace .quest-categories { display:none }
 .quests-workspace .quest-picker { display:block; margin:var(--space-1) 0 var(--space-2) }
 .quests-workspace .quest-picker select,.quests-workspace .quest-picker .picker-button { width:100%; min-height:44px }
 .quests-workspace .quest-slots { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); width:100% }
 .quests-workspace .quest-slots li { width:auto; height:auto; aspect-ratio:1 }
 .quests-workspace .quest-slots img { width:70%; height:auto }
 .quests-workspace .quest-row { grid-template-columns:30px minmax(0,1fr) auto; gap:var(--space-2) }
 .quests-workspace .quest-icon { width:30px; height:30px }
 .quests-workspace .quest-row-end .quest-reward { display:none }
 .quests-workspace .quest-copy p { display:none }
 .quests-workspace .quest-row-end button,.quests-workspace .quest-claim { font-size:var(--text-xs); padding:0 var(--space-2) }
 .quests-workspace .quest-ladder { grid-template-columns:repeat(4,minmax(0,1fr)) }
 .quests-workspace .quest-link button { min-width:0 }
 .quests-workspace .quest-page:has(.quest-claimbar) { padding-bottom:72px }
 .quests-workspace .quest-claimbar { position:fixed; z-index:60; left:var(--space-3); right:var(--space-3); bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4); border:1px solid color-mix(in srgb,var(--quest-gold) 50%,transparent); border-radius:var(--radius-lg); background:color-mix(in srgb,var(--quest-gold) 10%,var(--panel)); box-shadow:0 12px 32px #000a; font-size:var(--text-sm); color:var(--muted) }
 .quests-workspace .quest-claimbar b { color:var(--quest-gold); font-size:var(--text-base) }
 .quests-workspace .quest-claimbar .quest-claim { min-height:40px; font-size:var(--text-sm); padding:0 var(--space-4) }
}
@media (forced-colors:active) { .quests-workspace .quest-claim,.quests-workspace .quest-badge,#questsNav .quest-nav-badge { forced-color-adjust:auto; border:1px solid ButtonText } }
@media (max-width:640px) {
 .quest-invite-banner { flex-wrap:wrap; gap:var(--space-3) }
 .quest-invite-banner p { flex:1 1 0; min-width:0 }
 .quest-invite-banner .quest-share { order:3; width:100% }
 .quest-invite-dialog .quest-link button { min-width:0 }
}
/* Hidden seasonal items: small, in a corner of the page, never over controls. */
#mainContent:has(>.quest-hunt-item) { position:relative }
.quest-hunt-item { position:absolute; z-index:6; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; opacity:.92; transition:transform .2s ease,opacity .2s ease }
.quest-hunt-item img { width:28px; height:28px; image-rendering:pixelated; pointer-events:none }
.quest-hunt-item:hover { transform:scale(1.15); opacity:1 }
.quest-hunt-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.quest-hunt-item[data-corner="0"] { top:8px; right:2px }
.quest-hunt-item[data-corner="1"] { bottom:72px; right:2px }
.quest-hunt-item[data-corner="2"] { bottom:72px; left:2px }
.quest-hunt-item[data-corner="3"] { top:45%; right:2px }
.quest-hunt-item.quest-hunt-found { transform:scale(1.6); opacity:0 }
@media (prefers-reduced-motion:reduce) { .quest-hunt-item { transition:none } }
.quest-toast { position:fixed; z-index:60; left:50%; bottom:24px; translate:-50% 0; margin:0; padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--text); font-size:var(--text-sm); box-shadow:0 8px 24px #0006 }
.quest-toast[hidden] { display:none }
/* NEW! beside the Quests tab, in the site font, tilted like a Minecraft splash and in SkyBlock's mythic pink (owner,
   19 Oct 2026). It pulses gently; motion gates keep it still. The dock shows icons only. */
#questsNav .nav-new { display:inline-block; position:relative; margin-left:-4px; font-family:inherit; font-size:11px; font-weight:800; line-height:1; letter-spacing:.02em; color:#ff55ff; text-shadow:1px 1px 0 #3f153f; rotate:14deg; translate:0 -4px; animation:quest-new-pulse 1.4s ease-in-out infinite }
body[data-premium-nav="dock"] #sidebar #questsNav .nav-new { display:none }
:root:is([data-motion="paused"],[data-idle="true"]) #questsNav .nav-new { animation:none }
@media (prefers-reduced-motion:reduce) { #questsNav .nav-new { animation:none } }
@keyframes quest-new-pulse { 0%,100% { scale:1 } 50% { scale:1.12 } }

/* /notifications.css */
.atlas-notifications{padding:16px;border:1px solid var(--line,#393d49);border-radius:10px;margin:16px 0;background:var(--panel,#1b1e26)}
.atlas-notification-heading,.atlas-notification-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.atlas-notification-heading{justify-content:space-between;margin-bottom:12px}
.atlas-notification-heading span,.atlas-notification-note{font-size:12px;color:var(--muted,#a4a9ba)}
.atlas-notification-check{display:flex;align-items:center;gap:8px;margin-top:14px}
.atlas-notification-check input{width:auto;margin:0}
.atlas-notification-note{margin:12px 0 0;line-height:1.5}
.atlas-notification-status{font-size:13px;margin:10px 0 0;color:var(--muted,#a4a9ba)}
.atlas-notification-status:empty{display:none}
#atlasNotificationDialog.atlas-notification-dialog{inset:0;width:480px;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 20px 80px #0007;animation:none}
#atlasNotificationDialog::backdrop{background:#070810b8;backdrop-filter:none}
#atlasNotificationDialog>.atlas-notifications{margin:0;padding:20px;border:0;border-radius:0;box-shadow:none}
#atlasNotificationDialog::before,#atlasNotificationDialog::after,#atlasNotificationDialog>.atlas-notifications::before,#atlasNotificationDialog>.atlas-notifications::after,#atlasNotificationDialog .premium-edge-art{display:none}
#atlasNotificationDialog .atlas-notification-heading{align-items:flex-start;flex-wrap:nowrap;margin-bottom:16px}
#atlasNotificationDialog .atlas-notification-heading>div{display:grid;gap:4px;min-width:0;flex:1}
#atlasNotificationDialog .atlas-notification-heading strong{font-size:var(--text-base);line-height:1.4}
#atlasNotificationDialog .atlas-notification-heading span{line-height:1.5;overflow-wrap:anywhere}
#atlasNotificationDialog button{min-height:36px;padding:8px 12px;font-size:var(--text-sm);line-height:1.4}
#atlasNotificationDialog .atlas-notification-heading>button{flex:none}
#atlasNotificationDialog .atlas-notification-actions{gap:8px;font-size:var(--text-sm);line-height:1.5}
#atlasNotificationDialog .atlas-notification-check{align-items:flex-start;font-size:var(--text-sm);line-height:1.5}
#atlasNotificationDialog .atlas-notification-check input{flex:none;width:17px;height:17px;min-width:17px;min-height:17px;margin-top:2px}
#atlasNotificationDialog .atlas-notification-status{line-height:1.5;overflow-wrap:anywhere}

/* /selection.css */
/* Modern tabs and sidebar rows share a neutral selection box. The label keeps its workspace or
   category colour; decorative themes never supply the selected colour. Classic keeps its tint. */
:root { --selection-surface:#2b2e35; --selection-outline:#5b5e68 }
:is(.completion-tabs,.completion-variants,.profile-subnavigation,.tabs,.gathering-modes,.method-navigation,.mw-source-filter,.history-range,.visitor-filter,.storage-groups,.admin-tabs,.period-control,.quest-tabs) button { border:1px solid transparent; border-radius:var(--radius-sm); transition:background .15s,color .15s,border-color .15s }
:is(.completion-tabs,.completion-variants,.profile-subnavigation,.tabs,.gathering-modes,.method-navigation,.mw-source-filter,.history-range,.visitor-filter,.storage-groups,.admin-tabs,.period-control,.quest-tabs) button:not([aria-selected="true"]):not([aria-pressed="true"]):hover { color:var(--text); background:#ffffff08 }
body[data-atlas-layout="classic"] :is(.completion-tabs,.completion-variants,.profile-subnavigation,.tabs,.gathering-modes,.method-navigation,.mw-source-filter,.history-range,.visitor-filter,.storage-groups,.optimizer-choices,.admin-tabs,.period-control,.quest-tabs) button:is([aria-selected="true"],[aria-pressed="true"]) {
 color:var(--accent)!important; background:color-mix(in srgb,var(--accent) 12%,var(--panel))!important;
 border-color:color-mix(in srgb,var(--accent) 35%,transparent)!important; box-shadow:none!important }
body:not([data-atlas-layout="classic"]) :is(.completion-tabs,.completion-variants,.profile-subnavigation,.tabs,.gathering-modes,.method-navigation,.mw-source-filter,.history-range,.visitor-filter,.storage-groups,.optimizer-choices,.admin-tabs,.period-control,.quest-tabs) button:is([aria-selected="true"],[aria-pressed="true"]) {
 color:var(--accent)!important; background:var(--selection-surface)!important;
 border-color:var(--selection-outline)!important; box-shadow:none!important }
@media (forced-colors:active) { :root { --selection-surface:ButtonFace; --selection-outline:ButtonText } }
/* Tab rows are a row of these, with no underline. */
.completion-tabs { gap:var(--space-2); border-bottom:0 }
.completion-tabs button { margin:0; padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm) }
.completion-tabs button[aria-selected="true"] small { background:var(--accent); color:var(--bg,#111) }
.profile-subnavigation { gap:var(--space-2); border-bottom:0 }
.profile-subnavigation button { padding:var(--space-1) var(--space-3); border-bottom-width:1px }

/* /premium-overhaul.css */
/* The enchanted Atlas edition. Decorative tokens never replace workspace accents or rarity colours.
   Artwork is served from the site, stays behind content and cannot intercept input. */
:root body[data-appearance="true"] {
 --premium-gold:#e4cb91;
 --premium-brass:#b79a60;
 --premium-line:#a78d585e;
 --premium-surface:radial-gradient(ellipse at 100% 0%,#4f7e6920,transparent 55%),linear-gradient(135deg,#202c30,#1b1d25 55%,#1c2030);
 --premium-shadow:inset 0 1px 0 #f4ddb918,inset 0 -1px 0 #0003,0 12px 28px -18px #000b;
}

/* Identity has a soft champagne finish rather than a yellow glow on every label. */
:root body[data-appearance="true"] .atlas-wordmark {
 color:var(--premium-gold);
 text-shadow:0 2px 12px #d6b87525;
}
:root body[data-appearance="true"] .atlas-wordmark>span {
 color:var(--text);
 background:none;
 -webkit-text-fill-color:currentColor;
 animation:none;
}
:root body[data-appearance="true"] :is(.account-label,#account,.premium-name) {
 color:var(--premium-gold);
}
:root body[data-appearance="true"] .account-label small { color:var(--muted) }
:root body[data-appearance="true"] .premium-name::before {
 content:""; display:inline-block; width:1.15em; height:1.15em; margin-right:.28em;
 vertical-align:-.17em; background:url("/decor/premium-crown.svg") center/contain no-repeat;
}
:root body[data-appearance="true"] .brand-logo {
 filter:drop-shadow(0 3px 8px #b79a603d);
}
:root body[data-appearance="true"] .account-button {
 border-color:var(--premium-line);
 background:linear-gradient(120deg,#34433766,#20252c 65%);
 box-shadow:var(--premium-shadow);
}
:root body[data-appearance="true"] .account-button:hover {
 border-color:var(--premium-brass); background:linear-gradient(120deg,#34433799,#252832 65%);
}
:root body[data-appearance="true"] #accountAvatar {
 color:#30271b; background:linear-gradient(135deg,#f0dfac,#b79a60);
 box-shadow:inset 0 1px 0 #fff6,0 0 0 3px #b79a6018;
}

/* The sidebar rail and account card are the same in every theme, Basic included; Basic only drops the framed cards. */
:root body[data-appearance="true"] .sidebar {
 border-right-color:var(--premium-line);
 background:radial-gradient(ellipse at 0% 0%,#426f572e,transparent 55%),linear-gradient(180deg,#171e22,#14151b 55%,#1e2028);
 box-shadow:inset -1px 0 0 #e4cb910a,6px 0 24px -20px #000;
}
:root body[data-appearance="true"] .sidebar-bottom {
 background:transparent; border-top-color:var(--premium-line);
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) .app-header {
 border-bottom-color:var(--premium-line);
 background:none;
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #pageTitle {
 color:var(--premium-gold); text-shadow:0 2px 16px #d6b87518;
}

/* Main tab widgets receive depth and a fine gilded frame. Compact data rows stay plain.
   Styling a sticky panel's surface does not change its positioning or scroll container. */
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :is(
 .admin-shell .panel,.profile-shell,.setup,.results,.optimizer-panel,.gh-section,.progression-panel,.progression-next-card,
 .events-card,.help-panel,.gw-article,.mw-toolbar,.mw-history-picker,#mwSelectedHistory,
 .networth-overview,.networth-panel,.garden-section,.mining-main-box,.hunter-fortune,
 .hunting-main,.completion-summary,.loadout-display,.ci-panel,
 .inventory-content,.dungeon-summary,.museum-heading,.gear-set,.saved-loadout,.bestiary-category,:where(#progressionWorkspace) .profile-section:not(#profile-misc),.mining-side-box,.profile-domain-classic:not([data-domain="mining"]) .domain-group:not(.domain-more),.card-grouped-domain>.domain-summary,.mining-main>.domain-summary
):not(:where(body:not([data-atlas-layout="classic"]) #progressionWorkspace :is(.progression-panel,.profile-section))) {
 border-color:var(--premium-line);
 background:var(--premium-surface);
 box-shadow:var(--premium-shadow);
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :is(
 .introduction-hero,.introduction-panel,.introduction-tools,.introduction-help
) { border-color:var(--premium-line); box-shadow:var(--premium-shadow) }

/* Perimeter artwork sits above the border so its stems remain continuous.
   Outer panels carry full wraps, with secondary details on their inner widgets. */
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration]) {
 --premium-frame:none; --premium-companion:none; --premium-frame-size:216px 168px;
 --premium-frame-offset:5.6px; --premium-companion-size:216px 168px; --premium-companion-offset:5.6px;
 --premium-frame-transform:none; --premium-companion-transform:rotate(180deg);
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-size="large"]) { --premium-frame-size:330px 255px; --premium-frame-offset:5px }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-shape="extended"]) { --premium-frame-size:270px 180px; --premium-frame-offset:9.2px }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-size="outer"]) {
 --premium-frame-size:440px 340px; --premium-frame-offset:0px;
 --premium-companion-size:440px 340px; --premium-companion-offset:0px; overflow-clip-margin:20px;
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-corner="tl"]) { --premium-frame-transform:rotate(180deg); --premium-companion-transform:none }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-corner="bl"]) { --premium-frame-transform:scaleX(-1); --premium-companion-transform:scaleY(-1) }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-corner="tr"]) { --premium-frame-transform:scaleY(-1); --premium-companion-transform:scaleX(-1) }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="fern"]) { --premium-frame:url("/decor/frame-fern.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="moon"]) { --premium-frame:url("/decor/frame-moon.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wildflowers"]) { --premium-frame:url("/decor/frame-wildflowers.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="compass"]) { --premium-frame:url("/decor/frame-compass.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="ivy"]) { --premium-frame:url("/decor/frame-ivy.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="comet"]) { --premium-frame:url("/decor/frame-comet.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="mushrooms"]) { --premium-frame:url("/decor/frame-mushrooms.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="lantern"]) { --premium-frame:url("/decor/frame-lantern.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="laurel"]) { --premium-frame:url("/decor/frame-laurel.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="orbit"]) { --premium-frame:url("/decor/frame-orbit.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="crystals"]) { --premium-frame:url("/decor/frame-crystals.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="constellation"]) { --premium-frame:url("/decor/frame-constellation.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="ginkgo"]) { --premium-frame:url("/decor/frame-ginkgo.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="ribbon"]) { --premium-frame:url("/decor/frame-ribbon.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="lotus"]) { --premium-frame:url("/decor/frame-lotus.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="filigree"]) { --premium-frame:url("/decor/frame-filigree.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="bamboo"]) { --premium-frame:url("/decor/frame-bamboo.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="chain"]) { --premium-frame:url("/decor/frame-chain.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="olive"]) { --premium-frame:url("/decor/frame-olive.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="prism"]) { --premium-frame:url("/decor/frame-prism.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wisteria"]) { --premium-frame:url("/decor/frame-wisteria.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="runes"]) { --premium-frame:url("/decor/frame-runes.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="coral"]) { --premium-frame:url("/decor/frame-coral.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="feathers"]) { --premium-frame:url("/decor/frame-feathers.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="rose"]) { --premium-frame:url("/decor/frame-rose.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="oak"]) { --premium-frame:url("/decor/frame-oak.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="tide"]) { --premium-frame:url("/decor/frame-tide.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="aurora"]) { --premium-frame:url("/decor/frame-aurora.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="fireflies"]) { --premium-frame:url("/decor/frame-fireflies.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="clockwork"]) { --premium-frame:url("/decor/frame-clockwork.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="lattice"]) { --premium-frame:url("/decor/frame-lattice.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="embers"]) { --premium-frame:url("/decor/frame-embers.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="fern"]) { --premium-companion:url("/decor/frame-fern.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="moon"]) { --premium-companion:url("/decor/frame-moon.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wildflowers"]) { --premium-companion:url("/decor/frame-wildflowers.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="compass"]) { --premium-companion:url("/decor/frame-compass.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="ivy"]) { --premium-companion:url("/decor/frame-ivy.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="comet"]) { --premium-companion:url("/decor/frame-comet.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="mushrooms"]) { --premium-companion:url("/decor/frame-mushrooms.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="lantern"]) { --premium-companion:url("/decor/frame-lantern.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="laurel"]) { --premium-companion:url("/decor/frame-laurel.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="orbit"]) { --premium-companion:url("/decor/frame-orbit.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="crystals"]) { --premium-companion:url("/decor/frame-crystals.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="constellation"]) { --premium-companion:url("/decor/frame-constellation.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="ginkgo"]) { --premium-companion:url("/decor/frame-ginkgo.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="ribbon"]) { --premium-companion:url("/decor/frame-ribbon.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="lotus"]) { --premium-companion:url("/decor/frame-lotus.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="filigree"]) { --premium-companion:url("/decor/frame-filigree.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="bamboo"]) { --premium-companion:url("/decor/frame-bamboo.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="chain"]) { --premium-companion:url("/decor/frame-chain.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="olive"]) { --premium-companion:url("/decor/frame-olive.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="prism"]) { --premium-companion:url("/decor/frame-prism.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wisteria"]) { --premium-companion:url("/decor/frame-wisteria.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="runes"]) { --premium-companion:url("/decor/frame-runes.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="coral"]) { --premium-companion:url("/decor/frame-coral.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="feathers"]) { --premium-companion:url("/decor/frame-feathers.svg") }

:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-ivy"]) { --premium-frame:url("/decor/wrap-ivy.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-fern"]) { --premium-frame:url("/decor/wrap-fern.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-wisteria"]) { --premium-frame:url("/decor/wrap-wisteria.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-rose"]) { --premium-frame:url("/decor/wrap-rose.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-olive"]) { --premium-frame:url("/decor/wrap-olive.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-lotus"]) { --premium-frame:url("/decor/wrap-lotus.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-willow"]) { --premium-frame:url("/decor/wrap-willow.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-orchid"]) { --premium-frame:url("/decor/wrap-orchid.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-moonflowers"]) { --premium-frame:url("/decor/wrap-moonflowers.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-crystalbloom"]) { --premium-frame:url("/decor/wrap-crystalbloom.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-starlace"]) { --premium-frame:url("/decor/wrap-starlace.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration="wrap-seaglass"]) { --premium-frame:url("/decor/wrap-seaglass.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-ivy"]) { --premium-companion:url("/decor/wrap-ivy.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-fern"]) { --premium-companion:url("/decor/wrap-fern.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-wisteria"]) { --premium-companion:url("/decor/wrap-wisteria.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-rose"]) { --premium-companion:url("/decor/wrap-rose.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-olive"]) { --premium-companion:url("/decor/wrap-olive.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-lotus"]) { --premium-companion:url("/decor/wrap-lotus.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-willow"]) { --premium-companion:url("/decor/wrap-willow.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-orchid"]) { --premium-companion:url("/decor/wrap-orchid.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-moonflowers"]) { --premium-companion:url("/decor/wrap-moonflowers.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-crystalbloom"]) { --premium-companion:url("/decor/wrap-crystalbloom.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-starlace"]) { --premium-companion:url("/decor/wrap-starlace.svg") }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-companion="wrap-seaglass"]) { --premium-companion:url("/decor/wrap-seaglass.svg") }

/* Decorative layers stay on the perimeter and never catch clicks. */
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration]):not(:where(.setup,.results,.optimizer-panel,.gh-section,.mw-toolbar,.mw-history-picker,#mwSelectedHistory)) { position:relative; isolation:isolate }
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration]):not(:where(.setup,.results,.optimizer-panel,.gh-section,.mw-toolbar,.mw-history-picker,#mwSelectedHistory))::after,
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration]):not(:where(.setup,.results,.optimizer-panel,.gh-section,.mw-toolbar,.mw-history-picker,#mwSelectedHistory)):where([data-premium-companion])::before {
 content:""; position:absolute; inset:-20px; border-radius:inherit; z-index:2; pointer-events:none;
 background-repeat:no-repeat;
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration]):not(:where(.setup,.results,.optimizer-panel,.gh-section,.mw-toolbar,.mw-history-picker,#mwSelectedHistory))::after {
 background-image:var(--premium-frame); background-size:var(--premium-frame-size);
 background-position:right var(--premium-frame-offset) bottom var(--premium-frame-offset); transform:var(--premium-frame-transform);
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-decoration]):not(:where(.setup,.results,.optimizer-panel,.gh-section,.mw-toolbar,.mw-history-picker,#mwSelectedHistory)):where([data-premium-companion])::before {
 background-image:var(--premium-companion); background-size:var(--premium-companion-size);
 background-position:right var(--premium-companion-offset) bottom var(--premium-companion-offset); transform:var(--premium-companion-transform);
}
/* Sticky and clipped cards paint on their surface, retaining their own positioning and overflow. */
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-size="compact"])::after {
 mask-image:linear-gradient(to right,transparent,#000 34px),linear-gradient(to bottom,transparent,#000 34px);
 mask-composite:intersect;
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :is(.setup,.results,.optimizer-panel,.gh-section,.mw-toolbar,.mw-history-picker,#mwSelectedHistory):where([data-premium-decoration]) {
 background:var(--premium-surface);
}
/* Tall outer panels also carry long, untiled growth along their side edges. */
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-tall="true"])::after {
 background-image:var(--premium-frame),url("/decor/trail-vine.svg");
 background-size:var(--premium-frame-size),48px 580px;
 background-position:right var(--premium-frame-offset) bottom var(--premium-frame-offset),left -4px center;
}
:root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-tall="true"])::before {
 background-image:var(--premium-companion),url("/decor/trail-blossom.svg");
 background-size:var(--premium-companion-size),48px 580px;
 background-position:right var(--premium-companion-offset) bottom var(--premium-companion-offset),left -4px center;
}
@media(max-width:1100px) {
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-size="outer"]) {
  --premium-frame-size:330px 255px; --premium-frame-offset:5px;
  --premium-companion-size:330px 255px; --premium-companion-offset:5px;
 }
}
@media(max-width:600px) {
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-level="inner"]) {
  --premium-frame-size:180px 140px; --premium-frame-offset:8px;
  --premium-companion-size:180px 140px; --premium-companion-offset:8px;
 }
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-size="large"]) {
  --premium-frame-size:264px 204px; --premium-frame-offset:8px;
 }
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-shape="extended"]) {
  --premium-frame-size:240px 160px; --premium-frame-offset:10.4px;
 }
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-size="outer"]) {
  --premium-frame-size:264px 204px; --premium-frame-offset:8px;
  --premium-companion-size:264px 204px; --premium-companion-offset:8px; overflow-clip-margin:10px;
 }
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-tall="true"])::before,
 :root body[data-appearance="true"]:not(:where([data-premium-plain="true"])) #mainContent :where([data-premium-tall="true"])::after {
  background-size:var(--premium-frame-size),32px 387px;
  background-position:right var(--premium-frame-offset) bottom var(--premium-frame-offset),left 4px center;
 }
}
/* The wordmark alone shimmers. Static foliage does not add an animation loop. */
@supports (background-clip:text) or (-webkit-background-clip:text) {
 :root body[data-appearance="true"] .atlas-wordmark {
  background:linear-gradient(100deg,#c5a667 10%,#f4e6bd 40%,#c5a667 65%,#e4cb91 90%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:atlasSheen 10s linear infinite;
 }
}
html:root[data-motion="paused"] body[data-appearance="true"] .atlas-wordmark { animation:none }
@media (prefers-reduced-motion:reduce) {
 :root body[data-appearance="true"] .atlas-wordmark { animation:none }
}
@media (forced-colors:active) {
 :root body[data-appearance="true"] #mainContent :where([data-premium-decoration]) { --premium-frame:none; --premium-companion:none }
 :root body[data-appearance="true"] .atlas-wordmark { background:none; color:CanvasText; text-shadow:none }
 :root body[data-appearance="true"] #pageTitle { color:CanvasText; text-shadow:none }
 :root body[data-appearance="true"] #mainContent [data-premium-decoration]::before,
 :root body[data-appearance="true"] #mainContent [data-premium-decoration]::after { display:none }
}

/* A separate edge layer stays above calculator fields and table surfaces without catching input. */
.premium-edge-art { display:none; pointer-events:none }
:root body[data-appearance="true"]:not([data-premium-plain="true"]) #mainContent .premium-art-anchor { position:relative }
:root body[data-appearance="true"]:not([data-premium-plain="true"]) #mainContent [data-premium-layered] > .premium-edge-art { display:block; position:absolute; inset:-20px; border-radius:inherit; z-index:3; pointer-events:none }
.premium-edge-art::after,.premium-edge-art::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background-repeat:no-repeat; background-position:right var(--premium-frame-offset) bottom var(--premium-frame-offset) }
.premium-edge-art::after { background-image:var(--premium-frame); background-size:var(--premium-frame-size); transform:var(--premium-frame-transform) }
.premium-edge-art::before { background-image:var(--premium-companion); background-size:var(--premium-companion-size); background-position:right var(--premium-companion-offset) bottom var(--premium-companion-offset); transform:var(--premium-companion-transform) }
:root body[data-appearance="true"]:not([data-premium-plain="true"]) #mainContent .results[data-premium-layered] { overflow:visible }
body[data-premium-weave="false"] #mainContent [data-premium-layered] > .premium-edge-art { visibility:hidden }
@media(forced-colors:active) { .premium-edge-art { visibility:hidden } }
@media(max-width:640px) {
 :root body[data-appearance="true"][data-category="minions"]:not([data-premium-plain="true"]) #mainContent [data-premium-layered] > .premium-edge-art { inset:-16px }
}

/* /premium-editions.css */
/* Optional theme finishes layered over the shared Atlas interface. Basic and Classic opt out. */
:root body[data-appearance="true"][data-premium-theme] {
 --edition-rim:inset 0 1px 0 #f4ddb91f,inset 0 -1px 0 #0005,0 14px 30px -22px #000b;
 --premium-surface:var(--edition-surface);
 --premium-gold:var(--edition-metal); --premium-brass:var(--edition-brass);
}
/* Basic retains the original palette, scenery and champagne identity. */
:root body[data-appearance="true"][data-premium-theme="basic"] {
 --edition-surface:radial-gradient(ellipse at 100% 0%,#4f7e6920,transparent 55%),linear-gradient(135deg,#202c30,#1b1d25 55%,#1c2030);
 --edition-shell:var(--edition-surface);
 --edition-sidebar:radial-gradient(ellipse at 0% 0%,#426f572e,transparent 55%),linear-gradient(180deg,#171e22,#14151b 55%,#1e2028);
 --edition-title:#e4cb91; --edition-title-shadow:0 2px 16px #d6b87518;
 --edition-metal:#e4cb91; --edition-brass:#b79a60; --premium-line:#a78d585e;
 --edition-inlay:#b79a602b; --edition-light:#d6b87542;
 --edition-resting-rim:inset 0 1px 0 #f4ddb918,inset 0 -1px 0 #0003,0 12px 28px -18px #000b;
 --edition-texture:url("/decor/texture-basic.svg?v=1");
}
/* Keep the application neutral. Themes own the scenery, engraving and edge artwork,
   while text, controls and large surfaces share the same quiet charcoal material. */
:root body[data-appearance="true"][data-premium-theme]:not(:where([data-premium-theme="basic"])) {
 --bg:#111318; --sidebar:#171a20; --panel:#1b1e25; --raised:#252932; --input:#14171d;
 --line:#414650; --line-soft:#30353e; --text:#f0f0f5; --muted:#b8bec9; --quiet:#a0a8b5;
 --edition-surface:var(--panel); --edition-shell:var(--panel); --edition-sidebar:var(--sidebar);
 --edition-title:var(--text); --edition-title-shadow:0 2px 16px #0005; --theme-title:var(--text);
 --premium-line:var(--line);
}

:root body[data-appearance="true"][data-premium-theme="botanical"] {
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/premium/v1/botanical/hub.webp?v=1");
 --edition-scene-armory:url("/scenery/premium/v1/botanical/armory.webp?v=1");
 --edition-scene-habitat:url("/scenery/premium/v1/botanical/habitat.webp?v=1");
 --edition-scene-library:url("/scenery/premium/v1/botanical/library.webp?v=1");
 --edition-scene-dungeon:url("/scenery/premium/v1/botanical/dungeon.webp?v=1");
 --edition-scene-forge:url("/scenery/premium/v1/botanical/forge.webp?v=1");
 --edition-scene-garden:url("/scenery/premium/v1/botanical/garden.webp?v=1");
 --edition-scene-forest:url("/scenery/premium/v1/botanical/forest.webp?v=1");
 --edition-scene-crimson:url("/scenery/premium/v1/botanical/crimson.webp?v=1");
 --edition-scene-rift:url("/scenery/premium/v1/botanical/rift.webp?v=1");
 --edition-scene-museum:url("/scenery/premium/v1/botanical/museum.webp?v=1");
 --edition-scene-fusion:url("/scenery/premium/v1/botanical/fusion.webp?v=1");
 --edition-scene-workshop:url("/scenery/premium/v1/botanical/workshop.webp?v=1");
 --edition-scene-market:url("/scenery/premium/v1/botanical/market.webp?v=1");
 --edition-scene-minions:url("/scenery/premium/v1/botanical/minions.webp?v=1");
 --edition-scene-auction:url("/scenery/premium/v1/botanical/auction.webp?v=1");
 --edition-scene-merchant:url("/scenery/premium/v1/botanical/merchant.webp?v=1");
 --edition-scene-pet-care:url("/scenery/premium/v1/botanical/pet-care.webp?v=1");
 --edition-scene-gathering:url("/scenery/premium/v1/botanical/gathering.webp?v=1");
 --edition-metal:#c9c7a3; --edition-brass:#909f7b;
 --edition-inlay:#a4b18946; --edition-light:#8cb69b50;
 --edition-texture:url("/decor/texture-botanical.svg?v=3");
}
:root body[data-appearance="true"][data-premium-theme="celestial"] {
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/premium/v1/celestial/hub.webp?v=1");
 --edition-scene-armory:url("/scenery/premium/v1/celestial/armory.webp?v=1");
 --edition-scene-habitat:url("/scenery/premium/v1/celestial/habitat.webp?v=1");
 --edition-scene-library:url("/scenery/premium/v1/celestial/library.webp?v=1");
 --edition-scene-dungeon:url("/scenery/premium/v1/celestial/dungeon.webp?v=1");
 --edition-scene-forge:url("/scenery/premium/v1/celestial/forge.webp?v=1");
 --edition-scene-garden:url("/scenery/premium/v1/celestial/garden.webp?v=1");
 --edition-scene-forest:url("/scenery/premium/v1/celestial/forest.webp?v=1");
 --edition-scene-crimson:url("/scenery/premium/v1/celestial/crimson.webp?v=1");
 --edition-scene-rift:url("/scenery/premium/v1/celestial/rift.webp?v=1");
 --edition-scene-museum:url("/scenery/premium/v1/celestial/museum.webp?v=1");
 --edition-scene-fusion:url("/scenery/premium/v1/celestial/fusion.webp?v=1");
 --edition-scene-workshop:url("/scenery/premium/v1/celestial/workshop.webp?v=1");
 --edition-scene-market:url("/scenery/premium/v1/celestial/market.webp?v=1");
 --edition-scene-minions:url("/scenery/premium/v1/celestial/minions.webp?v=1");
 --edition-scene-auction:url("/scenery/premium/v1/celestial/auction.webp?v=1");
 --edition-scene-merchant:url("/scenery/premium/v1/celestial/merchant.webp?v=1");
 --edition-scene-pet-care:url("/scenery/premium/v1/celestial/pet-care.webp?v=1");
 --edition-scene-gathering:url("/scenery/premium/v1/celestial/gathering.webp?v=1");
 --edition-metal:#c4cfdf; --edition-brass:#929fb8;
 --edition-inlay:#a0b0d048; --edition-light:#91a8d254;
 --edition-texture:url("/decor/texture-celestial.svg?v=4");
}
:root body[data-appearance="true"][data-premium-theme="royal"] {
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/premium/v1/royal/hub.webp?v=1");
 --edition-scene-armory:url("/scenery/premium/v1/royal/armory.webp?v=1");
 --edition-scene-habitat:url("/scenery/premium/v1/royal/habitat.webp?v=1");
 --edition-scene-library:url("/scenery/premium/v1/royal/library.webp?v=1");
 --edition-scene-dungeon:url("/scenery/premium/v1/royal/dungeon.webp?v=1");
 --edition-scene-forge:url("/scenery/premium/v1/royal/forge.webp?v=1");
 --edition-scene-garden:url("/scenery/premium/v1/royal/garden.webp?v=1");
 --edition-scene-forest:url("/scenery/premium/v1/royal/forest.webp?v=1");
 --edition-scene-crimson:url("/scenery/premium/v1/royal/crimson.webp?v=1");
 --edition-scene-rift:url("/scenery/premium/v1/royal/rift.webp?v=1");
 --edition-scene-museum:url("/scenery/premium/v1/royal/museum.webp?v=1");
 --edition-scene-fusion:url("/scenery/premium/v1/royal/fusion.webp?v=1");
 --edition-scene-workshop:url("/scenery/premium/v1/royal/workshop.webp?v=1");
 --edition-scene-market:url("/scenery/premium/v1/royal/market.webp?v=1");
 --edition-scene-minions:url("/scenery/premium/v1/royal/minions.webp?v=1");
 --edition-scene-auction:url("/scenery/premium/v1/royal/auction.webp?v=1");
 --edition-scene-merchant:url("/scenery/premium/v1/royal/merchant.webp?v=1");
 --edition-scene-pet-care:url("/scenery/premium/v1/royal/pet-care.webp?v=1");
 --edition-scene-gathering:url("/scenery/premium/v1/royal/gathering.webp?v=1");
 --edition-metal:#d3bd96; --edition-brass:#ad9068;
 --edition-inlay:#ba9e744b; --edition-light:#b99bb952;
 --edition-texture:url("/decor/texture-royal.svg?v=4");
}
/* Atlas keeps its original page scenery; the four new environments have their own coherent palettes. */
:root body[data-appearance="true"][data-premium-theme="original"] {
 --edition-metal:#b7cddd; --edition-brass:#829fb8;
 --edition-inlay:#8eafce38; --edition-light:#b5dff450; --edition-texture:none;
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/hub.webp?v=225");
 --edition-scene-armory:url("/scenery/armory.webp?v=225");
 --edition-scene-habitat:url("/scenery/habitat.webp?v=225");
 --edition-scene-library:url("/scenery/library.webp?v=225");
 --edition-scene-dungeon:url("/scenery/dungeon.webp?v=225");
 --edition-scene-forge:url("/scenery/forge.webp?v=225");
 --edition-scene-garden:url("/scenery/garden.webp?v=225");
 --edition-scene-forest:url("/scenery/forest.webp?v=225");
 --edition-scene-crimson:url("/scenery/crimson.webp?v=225");
 --edition-scene-rift:url("/scenery/rift.webp?v=225");
 --edition-scene-museum:url("/scenery/museum.webp?v=225");
 --edition-scene-fusion:url("/scenery/fusion.webp?v=225");
 --edition-scene-workshop:url("/scenery/workshop.webp?v=225");
 --edition-scene-market:url("/scenery/market.webp?v=225");
 --edition-scene-minions:url("/scenery/minions.webp?v=225");
 --edition-scene-auction:url("/scenery/auction.webp?v=225");
 --edition-scene-merchant:url("/scenery/merchant.webp?v=225");
 --edition-scene-pet-care:url("/scenery/pet-care.webp?v=225");
 --edition-scene-gathering:url("/scenery/gathering.webp?v=226");
}
:root body[data-appearance="true"][data-premium-theme="ember"] {
 --edition-metal:#ecac77; --edition-brass:#bc7950;
 --edition-inlay:#ce845c40; --edition-light:#ffb67955; --edition-texture:none;
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/crimson.webp?v=225");
 --edition-scene-armory:url("/scenery/crimson.webp?v=225");
 --edition-scene-habitat:url("/scenery/crimson.webp?v=225");
 --edition-scene-library:url("/scenery/crimson.webp?v=225");
 --edition-scene-dungeon:url("/scenery/crimson.webp?v=225");
 --edition-scene-forge:url("/scenery/crimson.webp?v=225");
 --edition-scene-garden:url("/scenery/crimson.webp?v=225");
 --edition-scene-forest:url("/scenery/crimson.webp?v=225");
 --edition-scene-crimson:url("/scenery/crimson.webp?v=225");
 --edition-scene-rift:url("/scenery/crimson.webp?v=225");
 --edition-scene-museum:url("/scenery/crimson.webp?v=225");
 --edition-scene-fusion:url("/scenery/crimson.webp?v=225");
 --edition-scene-workshop:url("/scenery/crimson.webp?v=225");
 --edition-scene-market:url("/scenery/crimson.webp?v=225");
 --edition-scene-minions:url("/scenery/crimson.webp?v=225");
 --edition-scene-auction:url("/scenery/crimson.webp?v=225");
 --edition-scene-merchant:url("/scenery/crimson.webp?v=225");
 --edition-scene-pet-care:url("/scenery/crimson.webp?v=225");
 --edition-scene-gathering:url("/scenery/crimson.webp?v=225");
}
:root body[data-appearance="true"][data-premium-theme="tidal"] {
 --edition-metal:#89d7cb; --edition-brass:#63aaa7;
 --edition-inlay:#79cdc640; --edition-light:#83e0d655; --edition-texture:none;
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-armory:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-habitat:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-library:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-dungeon:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-forge:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-garden:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-forest:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-crimson:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-rift:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-museum:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-fusion:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-workshop:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-market:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-minions:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-auction:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-merchant:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-pet-care:url("/scenery/themes/tidal.webp?v=1");
 --edition-scene-gathering:url("/scenery/themes/tidal.webp?v=1");
}
:root body[data-appearance="true"][data-premium-theme="glacial"] {
 --edition-metal:#d3e8f5; --edition-brass:#94b8cf;
 --edition-inlay:#baddec40; --edition-light:#e3f7ff55; --edition-texture:none;
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-armory:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-habitat:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-library:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-dungeon:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-forge:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-garden:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-forest:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-crimson:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-rift:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-museum:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-fusion:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-workshop:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-market:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-minions:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-auction:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-merchant:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-pet-care:url("/scenery/themes/glacial.webp?v=1");
 --edition-scene-gathering:url("/scenery/themes/glacial.webp?v=1");
}
:root body[data-appearance="true"][data-premium-theme="arcane"] {
 --edition-metal:#c8a7ed; --edition-brass:#9b7dbe;
 --edition-inlay:#bf97e140; --edition-light:#d7b6ff55; --edition-texture:none;
 --edition-backdrop:var(--edition-scene-hub);
 --edition-scene-hub:url("/scenery/rift.webp?v=225");
 --edition-scene-armory:url("/scenery/rift.webp?v=225");
 --edition-scene-habitat:url("/scenery/rift.webp?v=225");
 --edition-scene-library:url("/scenery/rift.webp?v=225");
 --edition-scene-dungeon:url("/scenery/rift.webp?v=225");
 --edition-scene-forge:url("/scenery/rift.webp?v=225");
 --edition-scene-garden:url("/scenery/rift.webp?v=225");
 --edition-scene-forest:url("/scenery/rift.webp?v=225");
 --edition-scene-crimson:url("/scenery/rift.webp?v=225");
 --edition-scene-rift:url("/scenery/rift.webp?v=225");
 --edition-scene-museum:url("/scenery/rift.webp?v=225");
 --edition-scene-fusion:url("/scenery/rift.webp?v=225");
 --edition-scene-workshop:url("/scenery/rift.webp?v=225");
 --edition-scene-market:url("/scenery/rift.webp?v=225");
 --edition-scene-minions:url("/scenery/rift.webp?v=225");
 --edition-scene-auction:url("/scenery/rift.webp?v=225");
 --edition-scene-merchant:url("/scenery/rift.webp?v=225");
 --edition-scene-pet-care:url("/scenery/rift.webp?v=225");
 --edition-scene-gathering:url("/scenery/rift.webp?v=225");
}
/* Scenery follows the same tab destinations as the original site. */
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="hub"] { --edition-backdrop:var(--edition-scene-hub) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="armory"] { --edition-backdrop:var(--edition-scene-armory) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="habitat"] { --edition-backdrop:var(--edition-scene-habitat) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="library"] { --edition-backdrop:var(--edition-scene-library) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="dungeon"] { --edition-backdrop:var(--edition-scene-dungeon) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="forge"] { --edition-backdrop:var(--edition-scene-forge) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="garden"] { --edition-backdrop:var(--edition-scene-garden) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="forest"] { --edition-backdrop:var(--edition-scene-forest) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="crimson"] { --edition-backdrop:var(--edition-scene-crimson) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="rift"] { --edition-backdrop:var(--edition-scene-rift) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="museum"] { --edition-backdrop:var(--edition-scene-museum) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="fusion"] { --edition-backdrop:var(--edition-scene-fusion) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="workshop"] { --edition-backdrop:var(--edition-scene-workshop) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="market"] { --edition-backdrop:var(--edition-scene-market) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="minions"] { --edition-backdrop:var(--edition-scene-minions) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="auction"] { --edition-backdrop:var(--edition-scene-auction) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="merchant"] { --edition-backdrop:var(--edition-scene-merchant) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="pet-care"] { --edition-backdrop:var(--edition-scene-pet-care) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-scene="gathering"] { --edition-backdrop:var(--edition-scene-gathering) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]) .introduction-destinations .introduction-panel:nth-child(1) { --card-scene:var(--edition-scene-museum) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]) .introduction-destinations .introduction-panel:nth-child(2) { --card-scene:var(--edition-scene-market) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]) .introduction-destinations .introduction-panel:nth-child(3) { --card-scene:var(--edition-scene-library) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]) .introduction-tools { --card-scene:var(--edition-scene-merchant) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]) .introduction-help { --card-scene:var(--edition-scene-workshop) }
/* Scene pages use themed artwork. Introduction keeps the original soft opening lights. */
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]):not([data-scene="none"])::before {
 display:block; inset:0; background:linear-gradient(180deg,#0e111873,#0e1118b8),var(--edition-backdrop) center top/cover var(--bg);
 animation:none; transform:none; will-change:auto;
}
/* Administration shows the theme's scenery as well (owner, 20 Oct 2026), the library scene of the theme. */
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-admin-open="true"] { --edition-backdrop:var(--edition-scene-library) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"])[data-admin-open="true"]::before {
 display:block; inset:0; background:linear-gradient(180deg,#0e111873,#0e1118b8),var(--edition-backdrop) center top/cover var(--bg);
 animation:none; transform:none; will-change:auto;
}
:root body[data-appearance="true"]:not([data-atlas-layout="classic"]) .sidebar { background:var(--edition-sidebar) }
:root body[data-appearance="true"][data-premium-theme] #pageTitle { color:var(--edition-title); text-shadow:var(--edition-title-shadow,0 2px 16px #0005) }
:root body[data-appearance="true"]:not([data-atlas-layout="classic"]) .account-button { background:linear-gradient(120deg,var(--raised),var(--panel)) }
:root body[data-appearance="true"]:not([data-atlas-layout="classic"]) .account-button:hover { background:var(--raised) }
:root body[data-appearance="true"]:not([data-atlas-layout="classic"]) #accountAvatar {
 color:var(--bg); background:linear-gradient(135deg,var(--edition-metal),var(--edition-brass));
 box-shadow:inset 0 1px 0 #fff6,0 0 0 3px var(--edition-inlay);
}
/* Material stays behind the content. Each card resets inherited texture layers. */
:root body[data-appearance="true"][data-premium-theme] #mainContent [data-premium-decoration] {
 --edition-card-surface:var(--edition-surface);
 --edition-card-texture:linear-gradient(transparent,transparent);
 --premium-surface:var(--edition-card-texture) left top/192px 192px repeat,var(--edition-card-surface);
 --premium-shadow:var(--edition-rim);
 --edition-rim:var(--edition-resting-rim,0 8px 20px -16px #0009);
}
:root body[data-appearance="true"][data-premium-theme] #mainContent [data-premium-size="outer"] { --edition-card-surface:var(--edition-shell) }
:root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]) #mainContent [data-premium-size="compact"] { --premium-frame-size:180px 140px; --premium-frame-offset:8px }
/* Introduction artwork uses the same explicit shade model instead of multiplying by an opaque panel. */
:root body[data-appearance="true"][data-premium-theme] #introductionWorkspace :is(.introduction-hero,.introduction-panel,.introduction-tools,.introduction-help) {
 --edition-card-surface:linear-gradient(180deg,#11151ca3,#11151cbd 60%,#11151cd6),var(--card-scene,none) center/cover var(--panel);
 background:var(--premium-surface); background-blend-mode:normal;
}
:root body[data-appearance="true"][data-premium-theme] #introductionWorkspace .introduction-hero {
 --card-scene:var(--edition-scene-hub,url("/scenery/hub.webp?v=225"));
 --edition-card-surface:linear-gradient(110deg,#11151cb8,#11151c80 55%,#11151c94),var(--card-scene) center 42%/cover var(--panel);
}
/* Basic keeps the original Introduction artwork and shade, with optional grain above it. */
:root body[data-appearance="true"][data-premium-theme="basic"] #introductionWorkspace :is(.introduction-panel,.introduction-tools,.introduction-help) {
 --edition-card-surface:linear-gradient(180deg,#14151ba8 0%,#14151be6 55%,#14151bf5 100%),var(--card-scene,none) center/cover;
}
:root body[data-appearance="true"][data-premium-theme="basic"] #introductionWorkspace .introduction-hero {
 --edition-card-surface:var(--card-scene) center 42%/cover #14151bc4;
 background-blend-mode:normal,multiply;
}
/* A visible inset rim on every main card. Outlines and shadows never alter card dimensions. */
:root body[data-appearance="true"][data-premium-theme][data-premium-frame="true"] #mainContent [data-premium-decoration] {
 --edition-rim:inset 0 2px 0 #f1e5cc30,inset 0 -2px 0 #0008,0 12px 24px -18px #000c;
 border-color:color-mix(in srgb,var(--edition-metal) 48%,var(--panel));
 outline:1px solid var(--edition-inlay); outline-offset:-5px;
}
:root body[data-appearance="true"][data-premium-theme][data-premium-frame="true"] #mainContent [data-premium-size="outer"] {
 --edition-rim:inset 0 0 0 2px #0c1118c4,inset 0 3px 0 #eadbb72e,inset 0 -3px 0 #0008,0 0 0 1px #090d1370,0 22px 48px -30px #000d;
 outline:1px solid var(--edition-inlay); outline-offset:-5px;
}
:root body[data-appearance="true"][data-premium-theme][data-premium-frame="true"] #mainContent [data-premium-size="large"] {
 --edition-rim:inset 0 0 0 1px #0c1118b3,inset 0 2px 0 #eadbb725,inset 0 -2px 0 #0006,0 16px 32px -26px #000d;
 outline:1px solid color-mix(in srgb,var(--edition-inlay) 60%,transparent); outline-offset:-4px;
}
:root body[data-appearance="true"][data-premium-theme][data-premium-texture="true"] #mainContent [data-premium-decoration] {
 --edition-card-texture:var(--edition-texture);
}
/* Bespoke corner fittings attach each edition's ornaments to the large outer rim. */
:root body[data-appearance="true"] #mainContent [data-premium-decoration="edition-botanical-a"] { --premium-frame:url("/decor/edition-botanical-a.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-decoration="edition-botanical-b"] { --premium-frame:url("/decor/edition-botanical-b.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-decoration="edition-celestial-a"] { --premium-frame:url("/decor/edition-celestial-a.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-decoration="edition-celestial-b"] { --premium-frame:url("/decor/edition-celestial-b.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-decoration="edition-royal-a"] { --premium-frame:url("/decor/edition-royal-a.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-decoration="edition-royal-b"] { --premium-frame:url("/decor/edition-royal-b.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-companion="edition-botanical-a"] { --premium-companion:url("/decor/edition-botanical-a.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-companion="edition-botanical-b"] { --premium-companion:url("/decor/edition-botanical-b.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-companion="edition-celestial-a"] { --premium-companion:url("/decor/edition-celestial-a.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-companion="edition-celestial-b"] { --premium-companion:url("/decor/edition-celestial-b.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-companion="edition-royal-a"] { --premium-companion:url("/decor/edition-royal-a.svg") }
:root body[data-appearance="true"] #mainContent [data-premium-companion="edition-royal-b"] { --premium-companion:url("/decor/edition-royal-b.svg") }
/* Off really removes the wrapped artwork, including the painted art on sticky panels. */
:root body[data-appearance="true"][data-premium-theme][data-premium-weave="false"] #mainContent [data-premium-decoration] { --premium-frame:none; --premium-companion:none }
:root body[data-appearance="true"][data-premium-theme][data-premium-weave="false"] #mainContent [data-premium-decoration]::after,
:root body[data-appearance="true"][data-premium-theme][data-premium-weave="false"] #mainContent [data-premium-decoration][data-premium-companion]::before { display:none }
/* Light the nearest card under the pointer or keyboard focus, keeping nested parent cards calm. */
@media (hover:hover) and (pointer:fine) {
 :root body[data-appearance="true"][data-premium-theme][data-premium-lighting="true"] #mainContent [data-premium-decoration] { transition:box-shadow .2s,border-color .2s }
 :root body[data-appearance="true"][data-premium-theme][data-premium-lighting="true"] #mainContent [data-premium-decoration]:hover:not(:has([data-premium-decoration]:hover)) { --premium-shadow:var(--edition-rim),inset 0 0 24px -12px var(--edition-light),0 0 20px -5px var(--edition-light); border-color:var(--edition-metal) }
}
:root body[data-appearance="true"][data-premium-theme][data-premium-lighting="true"] #mainContent [data-premium-decoration]:focus-within:not(:has([data-premium-decoration]:focus-within)) { --premium-shadow:var(--edition-rim),inset 0 0 24px -12px var(--edition-light),0 0 20px -5px var(--edition-light); border-color:var(--edition-metal) }
:root body[data-appearance="true"][data-premium-theme][data-premium-frame="true"] #mainContent [data-premium-decoration]:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
html:root[data-motion="paused"] body[data-appearance="true"][data-premium-theme][data-premium-lighting="true"] #mainContent [data-premium-decoration] { transition:none }
@media (prefers-reduced-motion:reduce) {
 :root body[data-appearance="true"][data-premium-theme][data-premium-lighting="true"] #mainContent [data-premium-decoration] { transition:none }
}
@media (forced-colors:active) {
 :root body[data-appearance="true"][data-premium-theme] {
  --bg:Canvas; --panel:Canvas; --raised:ButtonFace; --input:Field;
  --line:ButtonText; --line-soft:ButtonText; --text:CanvasText; --muted:CanvasText; --quiet:CanvasText;
  --edition-sidebar:Canvas; --edition-metal:CanvasText; --edition-brass:CanvasText;
 }
 :root body[data-appearance="true"][data-premium-theme]::before,
 :root body[data-appearance="true"][data-premium-theme]:not([data-premium-theme="basic"]):not([data-scene="none"])::before { display:none }
 :root body[data-appearance="true"][data-premium-theme] .scene-atmosphere { display:none }
 :root body[data-appearance="true"][data-premium-theme] #pageTitle { color:CanvasText; text-shadow:none }
 :root body[data-appearance="true"][data-premium-theme][data-premium-frame][data-premium-lighting] #mainContent [data-premium-decoration] { --edition-card-surface:Canvas; --edition-card-texture:none; --edition-rim:none; --premium-shadow:none; border-color:ButtonText }
 :root body[data-appearance="true"][data-premium-theme] #introductionWorkspace :is(.introduction-hero,.introduction-panel,.introduction-tools,.introduction-help) { --edition-card-surface:Canvas; background:Canvas }
 :root body[data-appearance="true"][data-premium-theme][data-premium-frame][data-premium-lighting] #mainContent [data-premium-decoration]:not(:focus-visible) { outline:none }
}

/* Native controls and the trade dialog inherit the active Premium material. */
:root body[data-appearance="true"][data-premium-theme] :is(#mainContent select,#tradeDialog select) { appearance:none; background-color:var(--input); border-color:var(--line); color:var(--text); padding-right:30px; background-image:linear-gradient(45deg,transparent 50%,var(--quiet) 50%),linear-gradient(135deg,var(--quiet) 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 12px) 50%; background-size:4px 4px; background-repeat:no-repeat }
:root body[data-appearance="true"][data-premium-theme] #tradeDialog { background:var(--panel); border-color:var(--line) }
/* Dense inner cards stay matte, with texture reserved for the larger enclosing surface. */
:root body[data-appearance="true"][data-premium-theme][data-premium-texture="true"] #mainContent [data-premium-decoration] [data-premium-decoration] { --edition-card-texture:linear-gradient(transparent,transparent) }

:root body[data-appearance="true"][data-premium-theme] .picker-button:hover:not(:disabled) { background:var(--raised); border-color:var(--line) }

/* Theme environment for the decorated editions (Botanical, Celestial, Royal). Everything here sits
   behind the content, outside the document flow and ignores the pointer: a slow ambient layer
   across the background (fireflies, stars, gold dust) and a thin rail in each page gutter. Phones
   get a sparser layer and no rails; reduced motion, the pause control and idle stop the drift. */
:root body[data-appearance="true"][data-premium-theme]::after {
 content:""; position:fixed; left:0; right:0; z-index:-1; pointer-events:none; user-select:none;
 background:var(--edition-ambient) 0 0/600px 600px repeat; opacity:var(--edition-ambient-opacity,.55);
 will-change:transform; contain:strict;
}
:root body[data-appearance="true"][data-premium-theme="botanical"] { --edition-ambient:url("/decor/ambient-botanical.svg?v=1"); --edition-rail:url("/decor/rail-botanical.svg?v=1") }
:root body[data-appearance="true"][data-premium-theme="celestial"] { --edition-ambient:url("/decor/ambient-celestial.svg?v=1"); --edition-rail:url("/decor/rail-celestial.svg?v=1"); --edition-ambient-opacity:.7 }
:root body[data-appearance="true"][data-premium-theme="royal"] { --edition-ambient:url("/decor/ambient-royal.svg?v=1"); --edition-rail:url("/decor/rail-royal.svg?v=1"); --edition-ambient-opacity:.45 }
/* Fireflies rise, gold dust settles, stars turn slowly and twinkle. */
:root body[data-appearance="true"][data-premium-theme="botanical"]::after { top:0; height:calc(100vh + 600px); animation:edition-rise 140s linear infinite,edition-glow 7s ease-in-out infinite alternate }
:root body[data-appearance="true"][data-premium-theme="royal"]::after { top:-600px; height:calc(100vh + 600px); animation:edition-settle 180s linear infinite,edition-glow 9s ease-in-out infinite alternate }
:root body[data-appearance="true"][data-premium-theme="celestial"]::after { top:-600px; height:calc(100vh + 600px); animation:edition-settle 400s linear infinite,edition-glow 5s ease-in-out infinite alternate }
@keyframes edition-rise { to { transform:translate3d(0,-600px,0) } }
@keyframes edition-settle { to { transform:translate3d(0,600px,0) } }
@keyframes edition-glow { from { opacity:calc(var(--edition-ambient-opacity,.55) * .6) } to { opacity:var(--edition-ambient-opacity,.55) } }
/* Gutter rails: inside the page padding, beside the cards, never under them. */
:root body[data-appearance="true"][data-premium-theme] #mainContent { position:relative }
:root body[data-appearance="true"][data-premium-theme] #mainContent::before,
:root body[data-appearance="true"][data-premium-theme] #mainContent::after {
 content:""; position:absolute; top:var(--space-6); bottom:var(--space-6); width:16px; z-index:-1; pointer-events:none;
 background:var(--edition-rail) center top/16px 160px repeat-y; opacity:.4;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);
 mask-image:linear-gradient(180deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);
}
:root body[data-appearance="true"][data-premium-theme] #mainContent::before { left:10px }
:root body[data-appearance="true"][data-premium-theme] #mainContent::after { right:10px; transform:scaleX(-1) }
:root body[data-appearance="true"][data-premium-theme][data-admin-open="true"]::after,
:root body[data-appearance="true"][data-premium-theme][data-admin-open="true"] #mainContent::before,
:root body[data-appearance="true"][data-premium-theme][data-admin-open="true"] #mainContent::after { display:none }
@media (max-width:820px) {
 :root body[data-appearance="true"][data-premium-theme]::after { background-size:900px 900px; --edition-ambient-opacity:.35 }
 :root body[data-appearance="true"][data-premium-theme] #mainContent::before,
 :root body[data-appearance="true"][data-premium-theme] #mainContent::after { display:none }
}
html:is([data-motion="paused"],[data-idle="true"]) body[data-appearance="true"][data-premium-theme]::after { animation:none }
@media (prefers-reduced-motion:reduce) { :root body[data-appearance="true"][data-premium-theme]::after { animation:none } }
@media (forced-colors:active) { :root body[data-appearance="true"][data-premium-theme]::after { display:none } }

/* /premium-fonts.css */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/roboto.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/montserrat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/nunito.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lato-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lato-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/lato-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /premium-appearance-controls.css */
/* Appearance is a visual chooser; page typography remains independent of its controls. */
/* The two pixel fonts run 1.3 to 1.5 times wider than Inter (measured 19 Oct 2026: the same line is 533px
   in Inter, 699px in Minecraft, 828px in Minecraft bold, 771px in Monocraft), so labels, pickers and the
   account card overflowed. size-adjust brings them to about 1.1 times Inter, like the other fonts.
   The in-game item tooltip keeps the full-size "Monocraft" from profile-views.css. */
@font-face { font-family:"Atlas Minecraft"; src:url("/fonts/minecraft.otf") format("opentype"); font-style:normal; font-weight:400; font-display:swap; size-adjust:84% }
@font-face { font-family:"Atlas Minecraft"; src:url("/fonts/minecraft-bold.otf") format("opentype"); font-style:normal; font-weight:600 900; font-display:swap; size-adjust:76% }
@font-face { font-family:"Atlas Monocraft"; src:url("/fonts/monocraft.woff2") format("woff2"); font-display:swap; size-adjust:78% }
body[data-premium-font="minecraft"] { --premium-selected-font:"Atlas Minecraft","Segoe UI",sans-serif }
body[data-premium-font="monocraft"] { --premium-selected-font:"Atlas Monocraft",ui-monospace,monospace }
/* On a phone the two pixel fonts give each calculator dropdown its own row, so "Profit for quantity" fits. */
@media (max-width:590px) { body:is([data-premium-font="minecraft"],[data-premium-font="monocraft"]) .toolbar .sort-label { flex:1 1 100% } }
body[data-premium-font="rounded"] { --premium-selected-font:"Trebuchet MS","Segoe UI",sans-serif }
body[data-premium-font="serif"] { --premium-selected-font:Georgia,"Times New Roman",serif }
body[data-premium-font="roboto"] { --premium-selected-font:"Roboto","Segoe UI",sans-serif }
body[data-premium-font="opensans"] { --premium-selected-font:"Open Sans","Segoe UI",sans-serif }
body[data-premium-font="montserrat"] { --premium-selected-font:"Montserrat","Segoe UI",sans-serif }
body[data-premium-font="nunito"] { --premium-selected-font:"Nunito","Segoe UI",sans-serif }
body[data-premium-font="poppins"] { --premium-selected-font:"Poppins","Segoe UI",sans-serif }
body[data-premium-font="lato"] { --premium-selected-font:"Lato","Segoe UI",sans-serif }
/* Fit wider fonts inside the original sidebar without changing page typography. */
body[data-premium-nav-size="10"] { --premium-nav-size:10px }
body[data-premium-nav-size="10.25"] { --premium-nav-size:10.25px }
body[data-premium-nav-size="10.5"] { --premium-nav-size:10.5px }
body[data-premium-nav-size="10.75"] { --premium-nav-size:10.75px }
body[data-premium-nav-size="11"] { --premium-nav-size:11px }
body[data-premium-nav-size="11.25"] { --premium-nav-size:11.25px }
body[data-premium-nav-size="11.5"] { --premium-nav-size:11.5px }
body[data-premium-nav-size="11.75"] { --premium-nav-size:11.75px }
body[data-premium-nav-size="12"] { --premium-nav-size:12px }
body[data-premium-nav-size="12.25"] { --premium-nav-size:12.25px }
body[data-premium-nav-size="12.5"] { --premium-nav-size:12.5px }
body[data-premium-nav-size="12.75"] { --premium-nav-size:12.75px }
body[data-premium-font] #sidebar :is(.nav-page-link,.nav-introduction,.nav-group>summary) { font-size:var(--premium-nav-size,13px); white-space:nowrap; overflow-wrap:normal }
body[data-premium-font] #sidebar .nav-page-link>span:not(.nav-icon):not(.nav-active-dot) { overflow:hidden; text-overflow:ellipsis }
/* Keep the original label inset and avoid spare padding beside pins. */
body[data-premium-font] #sidebar .nav-page-row>.nav-page-link { padding-right:0 }
/* Page names are single-line labels in every modern navigation layout. The default font
   is fitted too; the visible text can truncate only as a fallback for very wide fonts. */
:root body:not([data-atlas-layout="classic"]) #sidebar :is(.nav-page-link,.nav-introduction,.nav-group>summary) { white-space:nowrap; overflow-wrap:normal }
:root body:not([data-atlas-layout="classic"]):not([data-premium-nav]) #sidebar :is(.nav-page-link,.nav-introduction,.nav-group>summary) { font-size:var(--premium-nav-size,13px) }
:root body:not([data-atlas-layout="classic"]) #sidebar .category-tabs .nav-page-link>span:not(.nav-icon):not(.nav-active-dot) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
:root body:not([data-atlas-layout="classic"]) #sidebar .nav-page-row>.nav-page-link { padding-right:0 }
@media (hover:hover) and (pointer:fine) and (min-width:821px) {
 body[data-premium-font] #sidebar .nav-page-row>.nav-pin-toggle { flex-basis:24px; min-width:24px; width:24px }
 :root body:not([data-atlas-layout="classic"]) #sidebar .nav-page-row>.nav-pin-toggle { flex-basis:24px; min-width:24px; width:24px }
}
@media(max-width:360px) {
 body[data-premium-font] .sidebar { padding-inline:8px }
 body[data-premium-font] #sidebar .category-tabs { padding-left:0 }
}
:root body[data-appearance="true"][data-premium-font] { font-family:var(--premium-selected-font); font-variant-ligatures:none }
body[data-premium-font] :is(.brand,.atlas-wordmark,#premiumInfoDialog,#appearanceDialog) { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
body[data-premium-font="minecraft"] :is(h1,h2,h3,h4,button),body[data-premium-font="monocraft"] :is(h1,h2,h3,h4,button) { letter-spacing:0 }
#premiumInfoDialog { padding:var(--space-5); font-size:14px }
#premiumInfoDialog .auth-dialog-heading { margin-bottom:var(--space-3) }
#premiumInfoDialog .auth-dialog-heading h2 { margin:0 }
#premiumAppearance { min-width:0 }
:root #premiumAppearance[hidden],:root #premiumAppearance [hidden] { display:none }
:root #appearanceDialog[open] { width:min(420px,calc(100vw - 24px)); max-width:420px; padding:16px; border-radius:var(--radius-sm) }
:root #appearanceDialog .auth-dialog-heading { margin-bottom:12px; padding-bottom:10px }
:root #appearanceDialog .auth-dialog-heading h2 { font-size:18px; letter-spacing:0 }
#premiumAppearance :is(.appearance-section-heading,.appearance-motion-setting>label) { display:flex; align-items:center; justify-content:space-between; gap:12px }
#premiumAppearance .appearance-section-heading { margin-bottom:8px }
#premiumAppearance :is(h3,.appearance-type-control>label,legend) { margin:0; font-size:12px; font-weight:600; line-height:1.4; color:var(--text) }
#premiumAppearance [data-premium-reset] { min-height:26px; border:0; padding:2px 0 2px 8px; font-size:11px; color:var(--muted); background:none }
#premiumAppearance .appearance-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0; padding:0; border:0; background:none }
#premiumAppearance .tabs span { min-width:0; margin:0; opacity:1; font-size:inherit }
#premiumAppearance .appearance-theme-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:40px; padding:6px 8px; border:1px solid var(--line-soft); border-radius:4px; background:var(--input); color:var(--muted); font-size:12px; line-height:1.3; text-align:center }
#premiumAppearance .appearance-theme-option:hover { color:var(--text); border-color:var(--quiet) }
#premiumAppearance .appearance-theme-option[aria-pressed="true"] { color:var(--text)!important; background:var(--selection-surface)!important; border-color:var(--selection-outline)!important }
#premiumAppearance .appearance-theme-name { display:block; min-width:0; padding:0; font:inherit; white-space:nowrap }
/* Restore the original horizontal color stripe, recovered from 1ad7bc4's parent.
   The new environments extend that same quiet treatment, without miniature previews. */
#premiumAppearance .appearance-theme-swatch { display:block; flex:none; width:22px; height:4px; border:0; border-radius:1px; background:#a7adb8; pointer-events:none }
#premiumAppearance [data-premium-choice="original"] .appearance-theme-swatch { background:#7f98b0 }
#premiumAppearance [data-premium-choice="botanical"] .appearance-theme-swatch { background:#90ad98 }
#premiumAppearance [data-premium-choice="celestial"] .appearance-theme-swatch { background:#9faecb }
#premiumAppearance [data-premium-choice="royal"] .appearance-theme-swatch { background:#d5b77c }
#premiumAppearance [data-premium-choice="ember"] .appearance-theme-swatch { background:#d49268 }
#premiumAppearance [data-premium-choice="tidal"] .appearance-theme-swatch { background:#6eb9c5 }
#premiumAppearance [data-premium-choice="glacial"] .appearance-theme-swatch { background:#b5d6e7 }
#premiumAppearance [data-premium-choice="arcane"] .appearance-theme-swatch { background:#bba0df }
#premiumAppearance [data-premium-choice="classic"] .appearance-theme-swatch { background:#9b8fd0 }
#premiumAppearance .appearance-classic-choice { margin:6px 0 0; padding:0; border:0; background:none }
#premiumAppearance .appearance-classic-option { width:100%; flex-direction:row; gap:8px }
#premiumAppearance .appearance-setting-section { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft) }
#premiumAppearance .appearance-nav-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:7px 0 0; padding:0; border:0; background:none }
#premiumAppearance .appearance-nav-options button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:6px 5px; border:1px solid var(--line-soft); border-radius:4px; background:var(--input); color:var(--muted); font-size:12px; white-space:nowrap }
#premiumAppearance .appearance-nav-preview { display:block; position:relative; flex:0 0 20px; width:20px; height:16px; border:1px solid currentColor; border-radius:3px }
#premiumAppearance .appearance-nav-preview::before { content:""; position:absolute; top:2px; bottom:2px; left:2px; width:4px; border-radius:1px; background:currentColor }
#premiumAppearance [data-premium-navigation="top"] .appearance-nav-preview::before { right:2px; bottom:auto; width:auto; height:3px }
#premiumAppearance [data-premium-navigation="dock"] .appearance-nav-preview::before { top:auto; left:5px; right:5px; bottom:2px; width:auto; height:3px }
#premiumAppearance .appearance-type-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:12px }
#premiumAppearance .appearance-type-control { display:grid; gap:7px; min-width:0 }
#premiumAppearance .appearance-type-control :is(select,.picker) { width:100%; min-width:0; min-height:40px; font-size:12px }
#premiumAppearance .appearance-type-preview { display:flex; align-items:center; gap:10px; min-width:0; margin:0; padding:5px 0; font-family:var(--premium-selected-font,"Inter",sans-serif); font-size:12px; line-height:1.4; letter-spacing:0; font-variant-ligatures:none }
#premiumAppearance .appearance-type-preview>span:first-child { flex:0 0 auto; font-size:27px; color:var(--text) }
#premiumAppearance .appearance-type-preview>span:last-child { min-width:0; overflow-wrap:anywhere }
#premiumAppearance .appearance-type-preview small { display:block; margin-top:3px; font-size:10px; color:var(--quiet) }
#premiumAppearance .appearance-detail-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; min-width:0; margin:10px 0 0; padding:6px 0 0; border:0; border-top:1px solid var(--line-soft) }
#premiumAppearance .appearance-detail-options legend { padding:0 8px 0 0 }
#premiumAppearance .appearance-detail-option { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:34px; cursor:pointer; color:var(--muted); font-size:12px }
#premiumAppearance .appearance-detail-option:has(input:disabled) { opacity:.5; cursor:default }
#premiumAppearance input[type="checkbox"] { appearance:none; position:relative; display:block; width:32px; height:18px; flex:0 0 32px; margin:0; padding:0; border:1px solid var(--line); border-radius:999px; background:var(--raised); cursor:pointer }
#premiumAppearance input[type="checkbox"]::after { content:""; position:absolute; left:3px; top:3px; width:10px; height:10px; border:0; border-radius:50%; background:var(--muted); transform:none; margin:0 }
#premiumAppearance input[type="checkbox"]:checked { border-color:var(--accent); background:var(--accent) }
#premiumAppearance input[type="checkbox"]:checked::after { left:17px; background:var(--bg); transform:none; border:0 }
#premiumAppearance input[type="checkbox"]:disabled { cursor:default }
#premiumAppearance :is(button,input,select):focus-visible { outline:2px solid var(--accent); outline-offset:3px }
#premiumAppearance .appearance-motion-setting { margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft) }
#premiumAppearance .appearance-motion-setting>label { min-height:24px; font-size:12px; font-weight:600; cursor:pointer }
#premiumAppearance .appearance-motion-setting>label:has(input:disabled) { cursor:default }
#premiumAppearance #appearanceMotionState { margin-left:6px; font-size:10px; font-weight:400; color:var(--quiet) }
#premiumAppearance #appearanceMotionNote { margin:4px 44px 0 0; color:var(--muted); font-size:11px; line-height:1.45 }
#premiumAppearance .appearance-save-status { margin:8px 0 0; padding-top:6px; border-top:1px solid var(--line-soft); color:var(--quiet); font-size:10px; line-height:1.4 }
#premiumInfoDialog .premium-membership { margin-top:var(--space-4); border-top:1px solid var(--line-soft); padding-top:var(--space-3) }
#premiumInfoDialog .premium-membership > summary { font-size:var(--text-sm); color:var(--muted) }
#premiumInfoDialog .premium-info-offer { padding:12px 0; gap:6px }
#premiumInfoDialog .premium-membership h3 { margin:12px 0 8px; font-size:var(--text-sm) }
#premiumInfoDialog .premium-info-tools { margin:8px 0; gap:8px 16px; font-size:var(--text-xs) }
#premiumInfoDialog .premium-info-actions { margin-top:12px }
#premiumInfoDialog .auth-footnote { margin-top:12px; padding-top:10px }
@media(max-width:480px) {
 #premiumInfoDialog { padding:var(--space-4) }
 :root #appearanceDialog[open] { padding:12px }
 #premiumAppearance .appearance-theme-option { padding-inline:6px }
 #premiumAppearance .appearance-detail-options { column-gap:12px }
 #premiumAppearance .appearance-detail-option { font-size:11px }
 #premiumAppearance .appearance-type-preview { gap:6px }
 #premiumAppearance .appearance-type-preview>span:first-child { font-size:23px }
}
@media(pointer:coarse),(max-width:820px) {
 #premiumAppearance :is(.appearance-theme-option,.appearance-nav-options button,.appearance-type-control select,.appearance-type-control .picker-button,.appearance-detail-option,.appearance-motion-setting>label) { min-height:44px }
}
@media(forced-colors:active) {
 #premiumAppearance .appearance-theme-swatch { background:ButtonText }
 #premiumAppearance .appearance-theme-option[aria-pressed="true"] { outline:2px solid Highlight; outline-offset:-2px }
 #premiumAppearance input[type="checkbox"] { background:ButtonFace; border-color:ButtonText }
 #premiumAppearance input[type="checkbox"]::after { background:ButtonText }
 #premiumAppearance input[type="checkbox"]:checked { background:Highlight; border-color:Highlight }
 #premiumAppearance input[type="checkbox"]:checked::after { background:HighlightText }
}

/* /premium-navigation.css */
/* Both navigation layouts use the same material and border. Keep the gradient at page height. */
:root body #sidebar { background:var(--edition-sidebar,var(--sidebar)); background-size:100% 100dvh; border-color:var(--navigation-line,var(--line-soft)) }
:root body[data-appearance="true"]:not([data-premium-plain="true"]) { --navigation-line:var(--premium-line) }
/* The default sidebar keeps its existing layout. These rules apply only to the Premium top bar. */
.premium-navigation-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin:0 0 var(--space-4); font-size:var(--text-sm) }
#premiumAppearance .premium-navigation-options { display:flex; gap:6px; margin:0; padding:0; border:0; background:none }
#premiumAppearance .premium-navigation-options button { min-height:34px; padding:6px 14px; border:1px solid var(--line-soft); background:var(--panel); font-size:var(--text-xs); line-height:1.3 }
body[data-premium-nav="top"] { --sidebar-width:0px }
body[data-premium-nav="top"] #sidebar {
 position:sticky; top:0; inset-inline:0; bottom:auto; z-index:50; width:100%; height:auto; max-height:none;
 display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px 16px; padding:10px 24px;
 overflow:visible; visibility:visible; transform:none; transition:none; border-right:0; border-bottom:1px solid var(--navigation-line,var(--line-soft)); box-shadow:none;
}
body[data-premium-nav="top"] #sidebar .sidebar-top { grid-column:1; grid-row:1; justify-content:flex-start; margin:0; padding:0; min-width:0; border:0 }
/* The player lookup sits in the bar, between the navigation and the account button. */
body[data-premium-nav="top"] #sidebar .sidebar-search { grid-column:3; grid-row:1; width:200px; margin:0 }
body[data-premium-nav="top"] #sidebar .sidebar-search input { min-height:38px }
body[data-premium-nav="top"] #sidebar .wordmark { gap:10px; margin:0 }
body[data-premium-nav="top"] #sidebar .brand-symbol { width:40px; height:44px; flex:0 0 40px }
body[data-premium-nav="top"] #sidebar .brand-logo { width:40px; height:44px }
body[data-premium-nav="top"] #sidebar .atlas-wordmark { font-size:18px; line-height:1.05 }
body[data-premium-nav="top"] #sidebar .atlas-wordmark>span { font-size:20px }
body[data-premium-nav="top"] #sidebar :is(.nav-section-label,.sidebar-version,#closeNav) { display:none }
body[data-premium-nav="top"] #sidebar .sidebar-bottom { grid-column:4; grid-row:1; display:flex; align-items:center; gap:12px; margin:0; padding:0; border:0; background:transparent; min-width:0 }
body[data-premium-nav="top"] #sidebar .sidebar-quick-links { display:flex; gap:6px; margin:0 }
body[data-premium-nav="top"] #sidebar .sidebar-quick-links :is(a,button) { width:36px; height:36px; min-height:36px; padding:8px }
body[data-premium-nav="top"] #sidebar .account-button { width:auto; min-width:0; max-width:220px; min-height:42px; margin:0; padding:5px 8px; gap:8px }
body[data-premium-nav="top"] #sidebar .account-button .avatar { width:30px; height:30px; min-width:30px }
body[data-premium-nav="top"] #sidebar .account-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px }
body[data-premium-nav="top"] #sidebar .account-label small { display:none }
body[data-premium-nav="top"] #sidebar .sidebar-scroll { grid-column:2; grid-row:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; overflow:visible; padding:0; min-width:0 }
body[data-premium-nav="top"] #sidebar .nav-group { position:relative; margin:0; min-width:0 }
body[data-premium-nav="top"] #sidebar :is(.nav-group>summary,.nav-introduction) { width:auto; min-height:36px; padding:7px; margin:0; gap:5px; font-size:13px; white-space:nowrap; border:1px solid transparent; border-radius:var(--radius-sm) }
body[data-premium-nav="top"] #sidebar .nav-group>summary>span { flex:initial }
body[data-premium-nav="top"] #sidebar .nav-group>summary .nav-group-chevron { transform:rotate(90deg) }
body[data-premium-nav="top"] #sidebar .nav-group[open]>summary .nav-group-chevron { transform:rotate(-90deg) }
body[data-premium-nav="top"] #sidebar :is(.nav-group-active>summary,.nav-group[open]>summary) { color:var(--nav-color,var(--accent)); background:color-mix(in srgb,var(--nav-color,var(--accent)) 12%,var(--panel)); border-color:color-mix(in srgb,var(--nav-color,var(--accent)) 35%,transparent) }
body[data-premium-nav="top"] #sidebar .nav-group>nav { position:absolute; top:calc(100% + 6px); left:0; z-index:2; width:300px; max-width:calc(100vw - 32px); max-height:min(60dvh,560px); overflow-y:auto; overscroll-behavior:contain; padding:8px; gap:2px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 12px 32px #0006; scrollbar-width:thin }
body[data-premium-nav="top"] #sidebar :is(#eventsNavGroup,#helpNavGroup)>nav { left:auto; right:0 }
body[data-premium-nav="top"] #sidebar .nav-group:not([open])>nav { display:none }
body[data-premium-nav="top"] #sidebar .category-tabs .nav-page-link { white-space:normal; overflow-wrap:normal; font-size:13px; min-height:36px }
body[data-premium-nav="top"] #sidebar .category-tabs .nav-page-link>span:not(.nav-icon):not(.nav-active-dot) { overflow:visible; text-overflow:clip }
body[data-premium-nav="top"] #mainContent { width:100%; max-width:1600px; margin-inline:auto; padding:var(--space-8); scroll-margin-top:140px }
body[data-premium-nav="top"] :is(#openNav,#closeNav) { display:none!important }
body[data-premium-nav="top"] .admin-mobile-toolbar { display:none }
body[data-premium-nav="top"] #mainContent :is(.help-workspace,.introduction-workspace) { margin-inline:auto }
/* The page already starts below the top bar's own padding; the home page's empty title spacer doubled it. */
@media(min-width:821px) { body[data-premium-nav="top"][data-workspace="introduction"]:not([data-atlas-layout="classic"]) .app-header { padding-top:0 } }
body[data-premium-nav="top"] [data-help-page="bug-report"] .help-panel { width:100%; margin-inline:auto }
@media(min-width:1681px) and (max-width:1900px) {
 body[data-premium-nav="top"] #sidebar .account-label,body[data-premium-nav="top"] #sidebar .account-chevron { display:none }
}
@media(max-width:1680px) {
 body[data-premium-nav="top"] #sidebar { grid-template-columns:auto minmax(0,1fr) auto }
 body[data-premium-nav="top"] #sidebar .sidebar-search { grid-column:2; justify-self:end }
 body[data-premium-nav="top"] #sidebar .sidebar-bottom { grid-column:3 }
 body[data-premium-nav="top"] #sidebar .sidebar-scroll { grid-column:1/-1; grid-row:2 }
}
@media(max-width:820px) {
 body[data-premium-nav="top"] #sidebar { padding:8px 12px; gap:8px; }
 body[data-premium-nav="top"] #sidebar .sidebar-bottom { gap:8px }
 body[data-premium-nav="top"] #sidebar .account-label { max-width:95px }
 body[data-premium-nav="top"] #sidebar .sidebar-search { grid-column:1/-1; grid-row:2; justify-self:stretch; width:auto }
 body[data-premium-nav="top"] #sidebar .sidebar-scroll { grid-row:3 }
 body[data-premium-nav="top"] #sidebar .sidebar-scroll { flex-wrap:nowrap; justify-content:flex-start; gap:3px; overflow-x:auto; scrollbar-width:none; margin-inline:-12px; padding-inline:12px }
 body[data-premium-nav="top"] #sidebar .sidebar-scroll>* { flex:0 0 auto }
 body[data-premium-nav="top"] #sidebar .nav-group { position:static }
 body[data-premium-nav="top"] #sidebar :is(.nav-group>summary,.nav-introduction) { min-height:40px; padding:6px 8px; font-size:12px; gap:5px }
 body[data-premium-nav="top"] #sidebar .nav-group>summary>.icon:first-child { display:none }
 body[data-premium-nav="top"] #sidebar .nav-group>nav { inset-inline:12px; top:100%; width:auto; max-width:none; max-height:min(55dvh,calc(100dvh - 200px)) }
 body[data-premium-nav="top"] #sidebar .category-tabs .nav-page-link { min-height:40px }
 body[data-premium-nav="top"] #mainContent { padding:var(--space-5); scroll-margin-top:210px }
}
@media(max-width:480px) {
 body[data-premium-nav="top"] #sidebar .sidebar-bottom { gap:6px }
 body[data-premium-nav="top"] #sidebar .sidebar-quick-links { gap:3px }
 body[data-premium-nav="top"] #sidebar .sidebar-quick-links :is(a,button) { width:30px; padding:6px }
 body[data-premium-nav="top"] #sidebar .account-label,body[data-premium-nav="top"] #sidebar .account-chevron { display:none }
 body[data-premium-nav="top"] #sidebar .account-button { padding:3px; }
 body[data-premium-nav="top"] #sidebar .atlas-wordmark { font-size:15px }
 body[data-premium-nav="top"] #sidebar .atlas-wordmark>span { font-size:18px }
 body[data-premium-nav="top"] #mainContent { padding:var(--space-4) }
}

/* Dock: the navigation becomes one floating bar of icons along the bottom, like the macOS Dock or
   the Windows taskbar. Each group opens its pages in a menu above its icon; labels appear above an
   icon on hover or keyboard focus. The same controls as the sidebar, only arranged differently. */
body[data-premium-nav="dock"] { --sidebar-width:0px; --dock-height:64px }
body[data-premium-nav="dock"] #sidebar {
 position:fixed; inset:auto auto 14px 50%; z-index:60; width:auto; max-width:calc(100vw - 24px); height:auto; max-height:none;
 display:flex; flex-direction:row; align-items:center; gap:4px; padding:8px 10px;
 border:1px solid color-mix(in srgb,var(--line) 80%,#fff 8%); border-radius:20px; overflow:visible; visibility:visible;
 background:color-mix(in srgb,var(--sidebar) 80%,transparent); backdrop-filter:blur(18px) saturate(1.3);
 box-shadow:0 20px 50px -12px #000d,inset 0 1px 0 #ffffff12; transform:translateX(-50%); transition:none;
}
body[data-premium-nav="dock"] #sidebar :is(.nav-section-label,.sidebar-version,#closeNav,.atlas-wordmark,.nav-group-chevron,.nav-active-dot) { display:none }
body[data-premium-nav="dock"] #sidebar .sidebar-top { margin:0; padding:0 6px 0 2px; border:0 }
body[data-premium-nav="dock"] #sidebar .wordmark { gap:0; margin:0 }
body[data-premium-nav="dock"] #sidebar :is(.brand-symbol,.brand-logo) { width:38px; height:40px; flex:0 0 38px }
body[data-premium-nav="dock"] #sidebar .sidebar-search { width:190px; margin:0 6px 0 0 }
body[data-premium-nav="dock"] #sidebar .sidebar-search input { min-height:42px; border-radius:12px }
body[data-premium-nav="dock"] #sidebar .sidebar-scroll { display:flex; align-items:center; gap:4px; padding:0 6px; overflow:visible; min-width:0; border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft) }
body[data-premium-nav="dock"] #sidebar .nav-group { position:relative; margin:0 }
/* The icons: square tiles that grow a little under the pointer. */
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary) {
 position:relative; display:grid; grid-template-columns:100%; grid-template-rows:100%; place-items:center; width:46px; height:46px; min-height:46px; margin:0; padding:0;
 border:1px solid transparent; border-radius:12px; background:transparent; color:var(--muted);
 transition:transform .18s cubic-bezier(.2,.7,.2,1),background .16s,color .16s;
}
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary)>.icon:first-child { width:24px; height:24px; flex:none }
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary):hover { transform:translateY(-4px) scale(1.12); background:#ffffff0d; color:var(--text) }
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction[aria-pressed="true"],.nav-group-active>summary,.nav-group[open]>summary) { color:var(--nav-color,var(--brand)); background:color-mix(in srgb,var(--nav-color,var(--brand)) 12%,transparent) }
/* The current group gets a small dot under its icon, like a running app. */
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction[aria-pressed="true"],.nav-group-active>summary)::after { content:""; position:absolute; bottom:-5px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor }
/* Labels show above an icon on hover and keyboard focus. */
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary)>span {
 position:absolute; bottom:calc(100% + 12px); left:50%; z-index:3; padding:5px 9px; border:1px solid var(--line); border-radius:8px;
 background:var(--raised); color:var(--text); font-size:12px; font-weight:600; white-space:nowrap; pointer-events:none;
 opacity:0; transform:translate(-50%,4px); transition:opacity .14s,transform .14s;
}
body[data-premium-nav="dock"] #sidebar :is(.nav-introduction:hover,.nav-introduction:focus-visible,.nav-group:not([open])>summary:hover,.nav-group:not([open])>summary:focus-visible)>span { opacity:1; transform:translate(-50%,0) }
/* A group's pages open in a menu above its icon. */
body[data-premium-nav="dock"] #sidebar .nav-group:not([open])>nav { display:none }
body[data-premium-nav="dock"] #sidebar .nav-group>nav {
 position:absolute; bottom:calc(100% + 16px); left:50%; z-index:2; width:290px; max-width:calc(100vw - 32px); max-height:min(60dvh,560px);
 overflow-y:auto; overscroll-behavior:contain; margin:0; padding:8px; gap:2px; transform:translateX(-50%);
 border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 40px #000a;
 animation:dock-menu-in .18s cubic-bezier(.2,.7,.2,1);
}
body[data-premium-nav="dock"] #sidebar .category-tabs { margin:0; padding:8px; border-left:0 }
body[data-premium-nav="dock"] #sidebar .category-tabs .nav-page-link { white-space:normal; font-size:13px; min-height:36px }
body[data-premium-nav="dock"] #sidebar .category-tabs .nav-page-link>span:not(.nav-icon):not(.nav-active-dot) { overflow:visible; text-overflow:clip }
/* Community links and the account sit at the right end. */
body[data-premium-nav="dock"] #sidebar .sidebar-bottom { display:flex; align-items:center; gap:4px; margin:0; padding:0 0 0 6px; border:0; background:transparent }
body[data-premium-nav="dock"] #sidebar .sidebar-quick-links { display:flex; gap:4px; margin:0 }
body[data-premium-nav="dock"] #sidebar .sidebar-quick-links :is(a,button) { width:40px; height:40px; min-height:40px; padding:9px; border-radius:12px }
body[data-premium-nav="dock"] #sidebar .account-button { width:46px; min-width:0; min-height:46px; margin:0; padding:5px; justify-content:center; border-radius:12px }
body[data-premium-nav="dock"] #sidebar .account-button .avatar { width:34px; height:34px; min-width:34px }
body[data-premium-nav="dock"] #sidebar :is(.account-label,.account-chevron) { display:none }
body[data-premium-nav="dock"] #mainContent { width:100%; max-width:1600px; margin-inline:auto; padding-bottom:calc(var(--dock-height) + 48px) }
body[data-premium-nav="dock"] :is(#closeNav,#navBackdrop) { display:none!important }
body[data-premium-nav="dock"] .admin-mobile-toolbar { display:none }
body[data-premium-nav="dock"] #mainContent :is(.help-workspace,.introduction-workspace) { margin-inline:auto }
@keyframes dock-menu-in { from { opacity:0; transform:translate(-50%,8px) } }
@media (max-width:1100px) { body[data-premium-nav="dock"] #sidebar .sidebar-search { width:150px } }
/* Phones: a full-width bar at the bottom edge; menus open as a sheet above it. */
@media (max-width:820px) {
 body[data-premium-nav="dock"] #sidebar { inset:auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; justify-content:space-between; padding:6px; transform:none; border-radius:18px }
 body[data-premium-nav="dock"] #sidebar :is(.sidebar-top,.sidebar-quick-links) { display:none }
 body[data-premium-nav="dock"] #sidebar .sidebar-scroll { flex:1; justify-content:space-between; gap:0; padding:0; border:0 }
 body[data-premium-nav="dock"] #sidebar .nav-group { position:static }
 body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary) { width:42px; height:42px; min-height:42px }
 body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary):hover { transform:none }
 body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary)>span { display:none }
 body[data-premium-nav="dock"] #sidebar .nav-group>nav { left:0; right:0; width:auto; max-width:none; transform:none; max-height:min(62dvh,520px); animation-name:dock-sheet-in }
 body[data-premium-nav="dock"] #sidebar .account-button { width:42px; min-height:42px }
 body[data-premium-nav="dock"] #sidebar .sidebar-search { display:none; position:absolute; left:0; right:0; bottom:calc(100% + 10px); width:auto; margin:0 }
 body[data-premium-nav="dock"].dock-search-open #sidebar .sidebar-search { display:block }
 body[data-premium-nav="dock"] #sidebar .sidebar-search input { min-height:48px; background:var(--panel); box-shadow:0 14px 34px #000a }
 body[data-premium-nav="dock"] :is(.mobile-bar,.page-heading) #openNav { display:none!important }
 body[data-premium-nav="dock"] #mainContent { padding-bottom:calc(var(--dock-height) + 32px) }
}
@keyframes dock-sheet-in { from { opacity:0; transform:translateY(8px) } }
@media (prefers-reduced-motion:reduce) {
 body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary),body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary)>span { transition:none }
 body[data-premium-nav="dock"] #sidebar :is(.nav-introduction,.nav-group>summary):hover { transform:none }
 body[data-premium-nav="dock"] #sidebar .nav-group>nav { animation:none }
}

/* /premium-menu.css */
:is(#premiumInfoDialog,#appearanceDialog) { --premium-menu-left:12px; --premium-menu-top:60px; --premium-menu-height:calc(100dvh - 24px) }
/* Non-modal settings panels anchored to their navigation buttons. */
:is(#premiumInfoDialog,#appearanceDialog)[open] {
 position:fixed; inset:auto; left:var(--premium-menu-left); top:var(--premium-menu-top);
 width:min(420px,calc(100vw - 24px)); max-width:420px; max-height:var(--premium-menu-height);
 height:auto; min-height:0; margin:0; padding:16px; z-index:120;
 overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
 background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
 box-shadow:0 10px 30px #0005; font-size:13px;
}
:is(#premiumInfoDialog,#appearanceDialog) .auth-dialog-heading { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px }
:is(#premiumInfoDialog,#appearanceDialog) .auth-dialog-heading h2 { margin:0; font-size:16px }
:is(#premiumInfoDialog,#appearanceDialog) .auth-close { width:28px; height:28px; min-height:28px; padding:0 }
:is(#premiumInfoDialog,#appearanceDialog) .premium-appearance-heading h3 { font-size:12px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-appearance-themes { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-appearance-themes button { min-height:52px; padding:6px 3px; font-size:11px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-theme-description { min-height:0; margin:8px 0 12px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-navigation-row { gap:8px; margin-bottom:12px; font-size:12px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-navigation-options button { min-height:30px; padding:5px 10px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-font-row { font-size:12px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-font-row select { min-height:32px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-font-preview { padding:8px; margin:8px 0 12px; font-size:12px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-appearance-effect { min-height:30px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-appearance-effects { gap:4px 12px }
:is(#premiumInfoDialog,#appearanceDialog) .premium-membership { margin-top:12px; padding-top:10px }
#sidebarPremium[aria-expanded="true"] { background:var(--raised); border-color:var(--accent) }
@media(max-width:360px) {
 :is(#premiumInfoDialog,#appearanceDialog)[open] { padding:12px }
 :is(#premiumInfoDialog,#appearanceDialog) .premium-appearance-themes { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

#premiumInfoDialog .premium-membership { margin-top:0; padding-top:0; border-top:0 }

/* /account-menu-refresh.css */
/* Account controls stay readable independently of the chosen page font. */
body :is(#accountMenu,#authDialog,#appearanceDialog) {
 font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 font-size:13px; line-height:1.5; color:var(--text);
}
/* Account menu: who you are, then grouped rows (settings, connected accounts, site management for
   owners and administrators), Log out last. Each row has its own icon and says its state. */
#accountMenu { width:min(304px,calc(100vw - 24px)); padding:8px; border-radius:14px }
#accountMenu .account-menu-heading { display:flex; align-items:center; gap:12px; margin:0; padding:10px 10px 12px; border:0 }
#accountMenu .account-menu-symbol { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; overflow:hidden; border:1px solid var(--line-soft); border-radius:10px; background:var(--input); color:var(--accent) }
#accountMenu .account-menu-symbol .icon { width:20px; height:20px }
#accountMenu .account-menu-symbol img { display:block; width:100%; height:100%; image-rendering:pixelated }
#accountMenu .account-menu-identity { display:grid; gap:2px; min-width:0 }
#accountMenu .menu-caption { display:block; margin:0; padding:0; font-size:11px; font-weight:400; letter-spacing:0; color:var(--quiet) }
#accountMenu #account { display:block; margin:0; padding:0; font-size:15px; font-weight:600; line-height:1.3; color:var(--text); overflow-wrap:anywhere }
#accountMenu .account-badges { display:flex; flex-wrap:wrap; margin:3px 0 0; gap:4px }
#accountMenu :is(.account-tier,.account-role) { margin:0; padding:1px 7px; border:1px solid var(--line); border-radius:999px; background:var(--input); color:var(--muted); font-size:10px; font-weight:600; line-height:1.6 }
#accountMenu .account-tier.account-premium { border-color:color-mix(in srgb,var(--amber) 45%,transparent); background:color-mix(in srgb,var(--amber) 12%,var(--panel)); color:var(--amber) }
#accountMenu .account-role { border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,var(--panel)); color:var(--accent) }
#accountMenu .account-badges:not(:has(> :not([hidden]))),#accountMenu #accountIdentityStatus:empty { display:none }
#accountMenu .account-identity-status { margin:4px 0 0; padding:0; border:0; font-size:11px; color:var(--amber) }
#accountMenu .account-menu-group { display:grid; gap:2px; margin:0; padding:6px 0 0 }
#accountMenu .account-menu-group:not(:has(> :is(button,a):not([hidden]))) { display:none }
#accountMenu .account-menu-section { margin:4px 10px 4px; font-size:11px; font-weight:500; letter-spacing:0; color:var(--quiet) }
#accountMenu .account-menu-action { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; margin:0; padding:7px 10px; border:0; border-radius:8px; background:transparent; color:var(--text); font-size:13px; font-weight:500; text-align:left; text-decoration:none }
#accountMenu .account-menu-action:hover,#accountMenu .account-menu-action:focus-visible { background:var(--raised) }
#accountMenu .account-menu-action>.icon:first-child { width:18px; height:18px; flex:0 0 18px; color:var(--muted) }
#accountMenu .account-menu-action:hover>.icon:first-child { color:var(--text) }
#accountMenu .account-menu-action .action-chevron { width:14px; height:14px; flex:0 0 14px; margin-left:auto; color:var(--quiet) }
#accountMenu .account-action-copy { display:grid; gap:1px; min-width:0 }
#accountMenu .account-action-copy small { font-size:11px; font-weight:400; color:var(--quiet); overflow-wrap:anywhere }
#accountMenu #accountSignIn { margin:4px 0 2px; background:color-mix(in srgb,var(--accent) 12%,var(--panel)) }
#accountMenu #accountSignIn:hover { background:color-mix(in srgb,var(--accent) 20%,var(--panel)) }
#accountMenu #accountSignIn>.icon:first-child { color:var(--accent) }
#accountMenu #logout { display:flex; align-items:center; justify-content:flex-start; gap:12px; min-height:40px; margin:8px 0 0; padding:7px 10px; border:0; border-radius:8px; font-size:13px; color:var(--muted); text-decoration:none }
#accountMenu #logout.hidden { display:none }
#accountMenu #logout .icon { width:18px; height:18px; flex:0 0 18px; margin:0 }
#accountMenu #logout:hover { background:color-mix(in srgb,var(--red) 10%,var(--panel)); color:var(--red) }

#authDialog.auth-dialog { width:min(400px,calc(100vw - 24px)); max-width:400px; padding:28px; border-radius:16px; box-shadow:0 18px 60px #0006 }
#authDialog .auth-dialog-heading { justify-content:center; margin-bottom:16px }
#authDialog #authClose { position:absolute; top:12px; right:12px }
#authDialog .auth-brand { display:flex; flex-wrap:wrap; justify-content:center; gap:0 3px; width:100%; font-size:11px; letter-spacing:0; color:var(--muted) }
#authDialog .auth-brand img { display:block; flex-basis:100%; width:52px; height:52px; margin-bottom:8px; object-fit:contain }
#authDialog .auth-brand b { color:inherit }
#authDialog h2 { font-size:24px; font-weight:600; letter-spacing:-.5px; margin-bottom:6px; text-align:center }
#authDialog .auth-description { margin-bottom:24px; font-size:12px; line-height:1.5; text-align:center }
#authDialog .auth-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
#authDialog .auth-provider { min-width:0; padding:14px 10px; gap:10px; border-radius:10px; background:var(--input); color:var(--text); font-size:13px; font-weight:500 }
#authDialog :is(#authGoogle,#authMicrosoft) { flex-direction:column; justify-content:center; min-height:92px; text-align:center }
#authDialog .auth-provider:hover:not(:disabled) { background:var(--raised); border-color:var(--accent) }
#authDialog .auth-provider-icon { flex:0 0 24px; width:24px; height:24px }
#authDialog .auth-google { font-size:24px }
#authDialog .auth-microsoft { place-content:center }
#authDialog .auth-provider-label { flex:initial; min-width:0 }
#authDialog .auth-provider small:empty { display:none }
#authDialog .auth-provider small { margin:0; max-width:100%; font-size:10px; line-height:1.4; text-align:center }
#authDialog #authEmailOption { grid-column:1/-1; justify-content:center; min-height:44px; padding:10px; border-color:transparent; background:transparent }
#authDialog #authEmailOption:hover:not(:disabled) { background:var(--input) }
#authDialog #authEmailOption small { margin-left:auto }
#authDialog .auth-help { font-size:11px; line-height:1.6; color:var(--muted) }
#authDialog #authMethodHelp { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); text-align:center }
#authDialog .auth-email-form input { border-radius:8px; color:var(--text) }
#authDialog .auth-submit { border-radius:8px; background:var(--accent); border-color:var(--accent); color:var(--bg); font-size:13px }
#authDialog .auth-submit:hover:not(:disabled) { background:var(--accent); border-color:var(--accent); color:var(--bg); filter:brightness(1.08) }
#authDialog .auth-text-button { color:var(--accent) }
#authDialog .auth-email-actions { flex-wrap:wrap; gap:6px 16px }

#appearanceDialog[open] { padding:20px; border-radius:12px }
#appearanceDialog .auth-dialog-heading { margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft) }
#appearanceDialog .auth-dialog-heading h2 { font-size:20px; font-weight:600; letter-spacing:-.2px }
#appearanceDialog #premiumAppearance .premium-appearance-heading { margin-bottom:10px }
#appearanceDialog #premiumAppearance .premium-appearance-heading h3 { font-size:12px; font-weight:500; color:var(--muted) }
#appearanceDialog #premiumAppearance [data-premium-reset] { min-height:26px; border:0; padding:2px 0 2px 8px; font-size:11px; color:var(--quiet) }
#appearanceDialog #premiumAppearance [data-premium-reset]:hover:not(:disabled) { color:var(--text) }
/* Theme buttons use the original small colour strips from the base controls. */
#appearanceDialog .premium-theme-description { margin:10px 0 16px; color:var(--quiet); font-size:11px; line-height:1.5 }
#appearanceDialog .premium-navigation-row { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:8px; margin-bottom:16px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--muted) }
#appearanceDialog #premiumAppearance .premium-navigation-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:8px; padding:0; border:0; background:none }
#appearanceDialog #premiumAppearance .premium-navigation-options button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:42px; padding:8px 12px; border-radius:7px; font-size:12px }
#appearanceDialog .appearance-layout-icon { display:block; position:relative; flex:0 0 22px; width:22px; height:17px; border:1px solid currentColor; border-radius:3px; opacity:.8 }
#appearanceDialog .appearance-layout-icon::before { content:""; position:absolute; top:2px; bottom:2px; left:2px; width:5px; border-radius:1px; background:currentColor }
#appearanceDialog [data-premium-navigation="top"] .appearance-layout-icon::before { right:2px; bottom:auto; width:auto; height:4px }
#appearanceDialog [data-premium-navigation="dock"] .appearance-layout-icon::before { top:auto; left:5px; right:5px; bottom:2px; width:auto; height:3px; border-radius:2px }
#appearanceDialog .appearance-font-section { margin-bottom:16px; padding-top:14px; border-top:1px solid var(--line-soft) }
#appearanceDialog .premium-font-row { gap:16px; font-size:12px; color:var(--muted) }
#appearanceDialog #premiumAppearance .premium-font-row select { min-height:36px; font-size:12px; border-radius:7px }
#appearanceDialog #premiumAppearance .premium-font-preview { display:flex; align-items:center; justify-content:flex-start; gap:16px; flex-wrap:nowrap; padding:14px; margin:10px 0 0; border:0; border-radius:7px; background:var(--input); line-height:1.4 }
#appearanceDialog #premiumAppearance .premium-font-sample { flex:0 0 auto; font-size:30px; color:var(--text) }
#appearanceDialog #premiumAppearance .premium-font-example { min-width:0; font-size:14px; color:var(--text); overflow-wrap:anywhere }
#appearanceDialog .premium-font-example small { display:block; margin-top:4px; font-size:11px; color:var(--quiet) }
#appearanceDialog #premiumAppearance .premium-appearance-effects { gap:4px 18px; border-top:1px solid var(--line-soft); padding-top:10px }
#appearanceDialog #premiumAppearance .premium-appearance-effects legend { padding-right:10px; margin-bottom:0; font-size:12px }
#appearanceDialog #premiumAppearance .premium-appearance-effect { min-height:36px; gap:8px; font-size:12px }
#appearanceDialog .premium-appearance-status { margin-top:14px; font-size:10px; color:var(--quiet) }
@media(max-width:380px) {
 #authDialog.auth-dialog { padding:22px }
 #appearanceDialog[open] { padding:14px }
 #appearanceDialog #premiumAppearance .premium-appearance-effects { column-gap:10px }
 #appearanceDialog #premiumAppearance .premium-appearance-effect { font-size:11px }
}

/* Minecraft and Discord windows: the title says what it is, the current state sits in one box
   under it, then the actions. The brand line above the title repeats the site name, so it goes. */
.account-detail-dialog { position:relative }
.account-detail-dialog .auth-dialog-heading { position:absolute; top:var(--space-3); right:var(--space-3); margin:0 }
.account-detail-dialog .auth-dialog-heading .auth-brand { display:none }
.account-detail-dialog h2 { margin-top:0; padding-right:var(--space-8) }
.account-detail-dialog .auth-description { margin:0 0 var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--input); color:var(--text); font-size:13px }

/* /atlas-shell.css */
:root {
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:160ms;
  --slow:240ms;
  --page-gutter:var(--space-5) ;
}
@media (max-width: 600px) {
  :root {
    --page-gutter:var(--space-4) ;
  }
}
@supports (interpolate-size:allow-keywords) {
  body:not([data-atlas-layout=classic]) {
    interpolate-size: allow-keywords;
  }
}
body:not([data-atlas-layout=classic]) :is(#sidebar, .mobile-bar):not(#atlas-none) {
  --bg:#11151c;
  --card-bg:#181d26;
  --card-line:#465164;
  --edition-ambient:initial;
  --edition-ambient-opacity:initial;
  --edition-brass:#829fb8;
  --edition-inlay:#8eafce38;
  --edition-light:#b5dff450;
  --edition-metal:#b7cddd;
  --edition-rail:initial;
  --edition-rim:inset 0 1px 0 #f4ddb91f,inset 0 -1px 0 #0005,0 14px 30px -22px #000b;
  --edition-shell:#181d26;
  --edition-sidebar:linear-gradient(
      180deg,#171d27,#11151c);
  --edition-surface:#181d26;
  --edition-title:#dbe5f2;
  --edition-title-shadow:none;
  --input:#131923;
  --line:#465164;
  --line-soft:#303a49;
  --muted:#c2ccd9;
  --navigation-line:#465164;
  --panel:#181d26;
  --pixel-notch:conic-gradient(
      
      from 90deg at 6px 6px,transparent 25%,#11151c 0) 0 0/6px 6px no-repeat;
  --plate:#181d26;
  --plate-head:color-mix(in srgb,#181d26 70%,#242d3b);
  --plate-line:#465164;
  --premium-brass:#829fb8;
  --premium-gold:#b7cddd;
  --premium-line:#465164;
  --premium-surface:#181d26;
  --quiet:#a6b4c7;
  --raised:#242d3b;
  --sidebar:#171d27;
  --surface-inner:#141922;
  --surface-inner-line:#303a49;
  --surface-line:#465164;
  --surface-main:#181d26;
  --surface-outline:#465164;
  --theme-emblem:initial;
  --theme-mark:initial;
  --theme-rule:initial;
  --theme-title:initial;
  --tile-bg:#141922;
  --tile-line:#303a49;
}
body:not([data-atlas-layout=classic]) #sidebar {
  --radius-sm:7px;
  --radius:10px;
  --radius-lg:14px;
  --text-xs:12px;
  --text-sm:13px;
  --text-md:14px;
  --text-lg:16px ;
}
body:not([data-atlas-layout=classic]) .sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line-soft);
  padding: var(--space-5) var(--space-2) var(--space-3);
}
body:not([data-atlas-layout=classic]) .sidebar-top {
  padding: 0 var(--space-2) var(--space-5);
}
body:not([data-atlas-layout=classic]) .wordmark {
  gap: var(--space-2);
}
body:not([data-atlas-layout=classic]) .brand-symbol {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
}
body:not([data-atlas-layout=classic]) .brand-logo {
  width: 56px;
  height: 56px;
}
body:not([data-atlas-layout=classic]) .atlas-wordmark {
  font-family:
    "Bricolage Grotesque",
    "Inter",
    sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: 22px;
}
body:not([data-atlas-layout=classic]) .atlas-wordmark > span {
  font-size: 29px;
}
body:not([data-atlas-layout=classic]) .nav-introduction,
body:not([data-atlas-layout=classic]) .nav-group > summary {
  min-height: 38px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) .nav-introduction {
  margin-bottom: var(--space-3);
  color: var(--muted);
}
body:not([data-atlas-layout=classic]) #sidebar .nav-introduction[aria-pressed=true] {
  color: var(--brand);
  background: var(--selection-surface);
  border-color: var(--selection-outline);
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) .nav-introduction[aria-pressed=true] .icon {
  color: var(--brand);
}
body:not([data-atlas-layout=classic]) .nav-group {
  margin-bottom: var(--space-1);
}
body:not([data-atlas-layout=classic]) .sidebar .nav-group > summary {
  color: var(--nav-color,var(--text));
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) .sidebar .nav-group > summary:hover {
  background: var(--raised);
}
body:not([data-atlas-layout=classic]) .nav-group > summary > .icon:first-child {
  color: var(--nav-color,var(--quiet));
}
body:not([data-atlas-layout=classic]) .nav-group > summary .nav-group-chevron {
  color: var(--quiet);
  transition: transform var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) .nav-group[open] > summary .nav-group-chevron {
  transform: rotate(90deg);
}
body:not([data-atlas-layout=classic]) #helpNavGroup {
  --nav-color:#f59ac1 ;
}
body:not([data-atlas-layout=classic]) #questsNav {
  --nav-color:#f87171 ;
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav,
body:not([data-atlas-layout=classic]) #sidebar #questsNav .icon {
  color: var(--nav-color);
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false] {
  position: relative;
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false] .icon {
  transform-origin: 50% 85%;
  animation: quest-nav-wiggle 6s ease-in-out infinite;
}
body:not([data-atlas-layout=classic]):not([data-premium-nav=dock]) #sidebar #questsNav[aria-pressed=false] > span {
  color: transparent;
  background:
    linear-gradient(
      100deg,
      var(--nav-color) 0 40%,
      #fff 50%,
      var(--nav-color) 60% 100%) 100% 0/260% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: quest-nav-sweep 6s ease-in-out infinite;
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false]::before,
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false] .nav-new::before,
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false] .nav-new::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: url(/decor/sparkle.svg) center/contain no-repeat;
  filter: drop-shadow(0 0 3px #ffd36acc);
  pointer-events: none;
  opacity: 0;
  animation: atlasTwinkle 3.2s ease-in-out infinite;
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false]::before {
  left: 1px;
  top: 0;
  width: 10px;
  height: 10px;
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false] .nav-new::before {
  right: -13px;
  top: -9px;
  animation-delay: 1.1s;
}
body:not([data-atlas-layout=classic]) #sidebar #questsNav[aria-pressed=false] .nav-new::after {
  right: -9px;
  bottom: -10px;
  width: 9px;
  height: 9px;
  animation-delay: 2.2s;
}
:root:is([data-motion=paused], [data-idle=true]) body:not([data-atlas-layout=classic]) #sidebar #questsNav :is(.icon, span, .nav-new) {
  animation: none;
}
:root:is([data-motion=paused], [data-idle=true]) body:not([data-atlas-layout=classic]) #sidebar #questsNav::before,
:root:is([data-motion=paused], [data-idle=true]) body:not([data-atlas-layout=classic]) #sidebar #questsNav .nav-new::before,
:root:is([data-motion=paused], [data-idle=true]) body:not([data-atlas-layout=classic]) #sidebar #questsNav .nav-new::after {
  animation: none;
  opacity: .85;
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-atlas-layout=classic]) #sidebar #questsNav :is(.icon, span, .nav-new) {
    animation: none;
  }
  body:not([data-atlas-layout=classic]) #sidebar #questsNav::before,
  body:not([data-atlas-layout=classic]) #sidebar #questsNav .nav-new::before,
  body:not([data-atlas-layout=classic]) #sidebar #questsNav .nav-new::after {
    animation: none;
    opacity: .85;
  }
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #sidebar #questsNav :is(.icon, span, .nav-new) {
  animation: none;
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #sidebar #questsNav::before,
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #sidebar #questsNav .nav-new::before,
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #sidebar #questsNav .nav-new::after {
  content: none;
}
body:not([data-atlas-layout=classic]):not([data-premium-nav=dock]) #sidebar :is(.nav-introduction, .nav-group > summary) > span {
  position: relative;
  top: 2px;
}
body:not([data-atlas-layout=classic]) #sidebar .category-tabs .nav-page-link > span:not(.nav-icon):not(.nav-active-dot) {
  position: relative;
  top: 1px;
}
body:not([data-atlas-layout=classic]) .sidebar .category-tabs {
  position: relative;
  margin: 2px 0 var(--space-2) 15px;
  padding: 0 0 0 5px;
  border-left: 1px solid transparent;
  gap: 2px;
}
body:not([data-atlas-layout=classic]) #sidebar .category-tabs .nav-page-link {
  padding-inline: 6px 4px;
  gap: 7px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  body:not([data-atlas-layout=classic]) #sidebar .nav-page-row > .nav-pin-toggle {
    flex-basis: 22px;
    min-width: 22px;
    width: 22px;
    padding: 0;
  }
}
body:not([data-atlas-layout=classic]) .category-tabs button {
  min-height: 34px;
  color: var(--muted);
  font-weight: 500;
}
body:not([data-atlas-layout=classic]) #sidebar .nav-page-row.is-current {
  background: var(--selection-surface);
  border-color: var(--selection-outline);
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) #sidebar .nav-page-row.is-current .nav-page-link {
  color: var(--nav-color,var(--accent));
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) #sidebar .nav-page-row.is-current .nav-icon {
  color: var(--nav-color,var(--accent));
}
body:not([data-atlas-layout=classic]) .sidebar-bottom {
  background: var(--sidebar);
  border-top-color: var(--line-soft);
}
body:not([data-atlas-layout=classic]) .sidebar-bottom :is(.sidebar-discord, .sidebar-support, .sidebar-premium) {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  height: 36px;
  min-height: 36px;
}
body:not([data-atlas-layout=classic]) .account-button {
  background: var(--panel);
  border-color: var(--line-soft);
  border-radius: var(--radius);
}
body:not([data-atlas-layout=classic]) .sidebar-version {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--text-xs);
  color: var(--quiet);
}
@media (max-width: 820px) {
  body:not([data-atlas-layout=classic]) .sidebar {
    width: 280px;
  }
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] :is(.atlas-wordmark > span, .brand-logo, .brand-symbol::before, .brand-symbol::after) {
  animation: none;
}
body:not([data-atlas-layout=classic]):is([data-premium-nav=top], [data-premium-nav=dock]) #sidebar :is(.nav-introduction[aria-pressed=true], .nav-group-active > summary, .nav-group[open] > summary) {
  color: var(--nav-color,var(--brand));
  background: var(--selection-surface);
  border-color: var(--selection-outline);
  box-shadow: none;
}
body:not([data-atlas-layout=classic])[data-premium-nav=dock] #sidebar :is(.nav-introduction[aria-pressed=true], .nav-group-active > summary)::after {
  content: none;
}
body:not([data-atlas-layout=classic]) .nav-group[open][data-nav-closing] > summary .nav-group-chevron {
  transform: none;
}
body:not([data-atlas-layout=classic]) button:active:not(:disabled),
body:not([data-atlas-layout=classic]) .button-link:active {
  transform: translateY(1px);
}
body:not([data-atlas-layout=classic]) dialog[open] {
  animation: drawer-in var(--slow) var(--ease);
}
:root[data-motion=paused] body:not([data-atlas-layout=classic]) :is(button, .button-link):active {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-atlas-layout=classic]) :is(button, .button-link):active {
    transform: none;
  }
}
body:not([data-atlas-layout=classic]) .icon {
  stroke-width: 1.7;
}
body:not([data-atlas-layout=classic]) #sidebar .category-tabs .nav-icon,
body:not([data-atlas-layout=classic]) #sidebar .category-tabs .nav-icon > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
body:not([data-atlas-layout=classic]) .sidebar-search {
  position: relative;
  flex: 0 0 auto;
  margin: 0 0 var(--space-4);
}
body:not([data-atlas-layout=classic]) .sidebar-search .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  color: var(--quiet);
  pointer-events: none;
}
body:not([data-atlas-layout=classic]) .sidebar-search input {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3) var(--space-2) 36px;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) .sidebar-search input:focus {
  border-color: var(--brand);
  outline: 2px solid color-mix(in srgb, var(--brand) 40%, transparent);
  outline-offset: 1px;
}
body:not([data-atlas-layout=classic]) .sidebar-search:focus-within .icon {
  color: var(--brand);
}
body:not([data-atlas-layout=classic]) .mobile-bar {
  display: none;
}
@media (max-width: 820px) {
  body:not([data-atlas-layout=classic]):not([data-premium-nav=top]) .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 calc(var(--page-gutter) * -1);
    padding: var(--space-2) var(--page-gutter);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border-bottom: 1px solid var(--line-soft);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  body:not([data-atlas-layout=classic]) .mobile-bar .icon-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
  }
  body:not([data-atlas-layout=classic]) .mobile-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
    color: var(--text);
    text-decoration: none;
    font-family:
      "Bricolage Grotesque",
      "Inter",
      sans-serif;
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -.02em;
  }
  body:not([data-atlas-layout=classic]) .mobile-brand b {
    color: var(--amber);
    font-weight: 800;
  }
  body:not([data-atlas-layout=classic]) .mobile-brand img {
    width: 28px;
    height: 28px;
  }
  body:not([data-atlas-layout=classic]) .app-header {
    padding-top: var(--space-6);
  }
  body:not([data-atlas-layout=classic]) main {
    padding-top: 0;
  }
}
body[data-atlas-layout=classic] :is(#profileInventoryList, .introduction-help a:not(:first-child), #sidebarPlayerSearch, #profileKeyStats, #introductionWorkspace h3 > .icon, .introduction-help > p, .mobile-brand, #mobileSearchButton, #introductionContinue, .intro-tool-art, .intro-tool-copy > small) {
  display: none;
}
body[data-atlas-layout=classic] .mobile-bar {
  display: none;
}
body[data-atlas-layout=classic] .introduction-panel > .intro-group-head {
  display: contents;
}
body[data-atlas-layout=classic] .intro-tool-copy > b {
  font-weight: inherit;
}
body.nav-open .community-feedback {
  visibility: hidden;
}
@keyframes quest-nav-sweep {
  0%, 55% {
    background-position: 100% 0;
  }
  85%, 100% {
    background-position: 0 0;
  }
}
@keyframes quest-nav-wiggle {
  0%, 78%, 100% {
    rotate: 0deg;
  }
  82% {
    rotate: -14deg;
  }
  86% {
    rotate: 12deg;
  }
  90% {
    rotate: -8deg;
  }
  94% {
    rotate: 4deg;
  }
}

/* /atlas-redesign.css */
body:not([data-atlas-layout=classic]) {
  --bg:#101115;
  --sidebar:#121318;
  --panel:#1a1c23;
  --raised:#23262f;
  --input:#13151a;
  --line:#30333f;
  --line-soft:#252831;
  --text:#f0f0f5;
  --muted:#b4b7c4;
  --quiet:#9094a6;
  --radius-sm:7px;
  --radius:10px;
  --radius-lg:14px;
  --text-xs:12px;
  --text-sm:13px;
  --text-md:14px;
  --text-base:14px;
  --text-lg:16px;
  --text-xl:20px;
  --text-2xl:26px;
  --text-3xl:34px;
  --text-4xl:44px;
  --sidebar-width:218px;
  --page-gutter:var(--space-10);
  --vista-height:520px;
  --plate:var(--panel);
  --plate-line:var(--line);
  --plate-head:color-mix(in srgb,var(--panel) 70%,var(--raised));
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:160ms;
  --slow:240ms;
  --display:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pixel-notch:conic-gradient(
      from 90deg at 6px 6px,transparent 25%,var(--bg) 0) 0 0/6px 6px no-repeat;
}
body:not([data-atlas-layout=classic]) {
  font-size: var(--text-base);
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "cv11", "ss01";
}
body:not([data-atlas-layout=classic]) h1,
body:not([data-atlas-layout=classic]) h2,
body:not([data-atlas-layout=classic]) h3,
body:not([data-atlas-layout=classic]) h4 {
  color: var(--text);
  text-wrap: balance;
}
body:not([data-atlas-layout=classic]) h2 {
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 650;
}
body:not([data-atlas-layout=classic]) h3 {
  font-size: var(--text-lg);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 600;
  color: var(--text);
}
body:not([data-atlas-layout=classic]) p {
  line-height: 1.6;
}
body:not([data-atlas-layout=classic]) small {
  color: var(--quiet);
}
body:not([data-atlas-layout=classic]) :is(table, .num, .stat strong, .profile-metric strong, .detail-metrics strong, #countdown, input[type=number]) {
  font-variant-numeric: tabular-nums;
}
body:not([data-atlas-layout=classic]) {
  position: relative;
  min-height: 100vh;
}
body:not([data-atlas-layout=classic])::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100vh;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 200px,
      transparent var(--vista-height));
  mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 200px,
      transparent var(--vista-height));
}
body:not([data-atlas-layout=classic]) .scene-atmosphere {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100vh;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 200px,
      transparent var(--vista-height));
  mask-image:
    linear-gradient(
      180deg,
      #000 0,
      #000 200px,
      transparent var(--vista-height));
}
body:not([data-atlas-layout=classic])[data-workspace=introduction][data-scene=none]::before {
  position: fixed;
  inset: -15vmax;
  height: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
body:not([data-atlas-layout=classic]) main {
  max-width: calc(1560px + var(--sidebar-width));
  padding: 0 var(--page-gutter) var(--space-8);
}
@media (min-width: 1824px) {
  body:not([data-atlas-layout=classic]) main {
    padding-inline: var(--space-12);
  }
}
@media (max-width: 1100px) {
  body:not([data-atlas-layout=classic]) {
    --page-gutter:var(--space-6) ;
  }
}
@media (max-width: 820px) {
  body:not([data-atlas-layout=classic]) {
    --vista-height:400px ;
  }
  body:not([data-atlas-layout=classic]) main {
    margin-left: 0;
    width: 100%;
  }
}
@media (max-width: 600px) {
  body:not([data-atlas-layout=classic]) {
    --page-gutter:var(--space-4);
    --vista-height:340px ;
  }
}
body:not([data-atlas-layout=classic]) .app-header {
  min-height: 0;
  margin: 0 0 var(--space-6);
  padding: var(--space-12) 0 var(--space-2);
  border: 0;
  align-items: flex-end;
  gap: var(--space-4);
}
body:not([data-atlas-layout=classic]) .page-heading {
  align-items: flex-end;
}
body:not([data-atlas-layout=classic]) #pageTitle {
  font-family: var(--display);
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 2px 28px #000a;
}
body:not([data-atlas-layout=classic]) #workspaceCrumb {
  display: inline-block;
  margin-bottom: var(--space-1);
  color: #e6e9f0;
  opacity: .86;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px 12px #000c;
}
body:not([data-atlas-layout=classic]) .page-heading .eyebrow {
  font-size: 0;
  margin: 0;
}
body:not([data-atlas-layout=classic]) .live-controls {
  gap: var(--space-2);
  margin-left: auto;
}
body:not([data-atlas-layout=classic]) #countdown {
  color: #d3d8e2;
  font-size: var(--text-xs);
  text-shadow: 0 1px 10px #000c;
}
body:not([data-atlas-layout=classic]) #refresh,
body:not([data-atlas-layout=classic]) #eventsNotificationsButton {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-color: var(--line);
  color: var(--text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body:not([data-atlas-layout=classic]) #calculatorHelpButton {
  align-self: flex-end;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) #calculatorHelpButton::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--amber);
  color: var(--bg);
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 820px) {
  body:not([data-atlas-layout=classic]) .app-header {
    padding-top: var(--space-6);
  }
  body:not([data-atlas-layout=classic]) #pageTitle {
    font-size: var(--text-3xl);
  }
}
@media (max-width: 600px) {
  body:not([data-atlas-layout=classic]) #pageTitle {
    font-size: 30px;
  }
}
body:not([data-atlas-layout=classic]) button,
body:not([data-atlas-layout=classic]) .button-link {
  border-radius: var(--radius-sm);
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) button.primary,
body:not([data-atlas-layout=classic]) .button-link.primary {
  font-weight: 650;
}
body:not([data-atlas-layout=classic]) input:not([type=checkbox]),
body:not([data-atlas-layout=classic]) select,
body:not([data-atlas-layout=classic]) textarea,
body:not([data-atlas-layout=classic]) .picker-button {
  background: var(--input);
  border-color: var(--line);
}
body:not([data-atlas-layout=classic]) .picker-panel,
body:not([data-atlas-layout=classic]) .account-menu {
  background: var(--raised);
  border-color: var(--line);
  box-shadow: 0 18px 48px #0008;
}
body:not([data-atlas-layout=classic]) :is(.setup, .results, .optimizer-panel, .profile-shell, .progression-panel, .mw-toolbar, .mw-item, .events-card, .help-panel, .introduction-panel, .introduction-tools, .introduction-help, .networth-overview, .inventory-content) {
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) :is(.profile-skill, .profile-collection, .gear-set, .saved-loadout, .museum-card) {
  background: color-mix(in srgb, var(--raised) 55%, var(--panel));
  border-color: var(--line-soft);
  border-radius: var(--radius);
}
body:not([data-atlas-layout=classic]) .rankings th,
body:not([data-atlas-layout=classic]) table th {
  background: transparent;
  color: var(--quiet);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--line);
}
body:not([data-atlas-layout=classic]) .rankings td {
  border-bottom: 1px solid var(--line-soft);
}
body:not([data-atlas-layout=classic]) .rankings tbody tr {
  transition: background var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) .rankings tbody tr:hover {
  background: color-mix(in srgb, var(--raised) 60%, transparent);
}
body:not([data-atlas-layout=classic]) .tabs {
  background: var(--input);
  border-color: var(--line-soft);
}
body:not([data-atlas-layout=classic]) dialog::backdrop {
  background: #05070bcc;
}
body:not([data-atlas-layout=classic]) .site-footer {
  border-top-color: var(--line-soft);
  color: var(--quiet);
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-atlas-layout=classic]) .nav-group > summary .nav-group-chevron {
    transition: none;
  }
}
body:not([data-atlas-layout=classic]) .page-heading .eyebrow > span#workspaceCrumb {
  display: inline-block;
}
@container (min-width:741px) {
  body:not([data-atlas-layout=classic]) .money-workspace .rankings .result-profit {
    min-width: 150px;
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings .result-profit :is(small, .subvalue) {
    white-space: nowrap;
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings .market-context {
    min-width: 118px;
  }
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings th {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings .recipe strong {
  font-size: var(--text-md);
}
body:not([data-atlas-layout=classic])[data-workspace=introduction] .app-header {
  padding-top: var(--space-8);
  margin-bottom: 0;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace [data-intro-group] h3 .icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  color: var(--intro-color);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace [data-intro-group=money] {
  --intro-color:var(--amber) ;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace [data-intro-group=progression] {
  --intro-color:var(--purple) ;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace [data-intro-group=markets] {
  --intro-color:var(--green) ;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace [data-intro-group=events] {
  --intro-color:var(--blue) ;
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic]::before,
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] :is(.scene-atmosphere, .introduction-logo, .intro-tool-art) {
  display: none;
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #pageTitle {
  text-shadow: none;
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #introductionWorkspace .introduction-hero {
  background: var(--panel);
}
body:not([data-atlas-layout=classic])[data-appearance=true][data-premium-theme=botanical] {
  --theme-mark:#a7c48f;
  --theme-rule:#a7c48f59;
  --theme-title:#eef3e2;
  --theme-emblem:url(/decor/premium-fern.svg) ;
}
body:not([data-atlas-layout=classic])[data-appearance=true][data-premium-theme=celestial] {
  --theme-mark:#b0c3ea;
  --theme-rule:#b0c3ea59;
  --theme-title:#eef2fb;
  --theme-emblem:url(/decor/premium-constellation.svg) ;
}
body:not([data-atlas-layout=classic])[data-appearance=true][data-premium-theme=royal] {
  --theme-mark:#d8b77c;
  --theme-rule:#d8b77c66;
  --theme-title:#f5ead5;
  --theme-emblem:url(/decor/premium-laurel.svg) ;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #pageTitle {
  color: var(--theme-title,var(--text));
}
body:not([data-atlas-layout=classic])[data-premium-theme] #workspaceCrumb::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 var(--space-2) -3px 0;
  background: var(--theme-emblem) center/contain no-repeat;
  opacity: .9;
}
body:not([data-atlas-layout=classic])[data-premium-theme] :is(.setup, .results, .optimizer-panel, .profile-shell, .progression-panel, .mw-toolbar, .events-card, .help-panel, .introduction-panel, .introduction-tools, .introduction-help) {
  border-top-color: var(--theme-rule);
}
@media (forced-colors: active) {
  body:not([data-atlas-layout=classic])[data-premium-theme] #workspaceCrumb::before {
    display: none;
  }
}
body:not([data-atlas-layout=classic])[data-appearance=true][data-atlas-variant=basic] #pageTitle {
  color: var(--text);
}
body:not([data-atlas-layout=classic])[data-appearance=true][data-atlas-variant=basic] :is(.app-header, #mainContent .profile-shell) {
  background-image: none;
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) :is(.eyebrow, .menu-caption, .completion-obtain b, .hf-columns h4) {
  letter-spacing: 0;
  text-transform: none;
}
body:not([data-atlas-layout=classic]) .dialog-top .eyebrow {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}
body:not([data-atlas-layout=classic])[data-premium-font] {
  --display:var(--premium-selected-font) ;
}
body:not([data-atlas-layout=classic])[data-premium-font] :is(#pageTitle, #introductionWorkspace .introduction-hero h2) {
  letter-spacing: 0;
}
@media (min-width: 1101px) {
  body:not([data-atlas-layout=classic]) .money-workspace .money-controls {
    position: sticky;
    top: var(--space-4);
    align-self: start;
  }
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings .market-context .subvalue {
  display: block;
  white-space: nowrap;
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings .recipe {
  min-width: 220px;
}
body:not([data-atlas-layout=classic]) .profile-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
body:not([data-atlas-layout=classic]) .profile-bar:has(#profileChooseLabel:not([hidden])) .profile-search {
  display: none;
}
body:not([data-atlas-layout=classic]) .profile-bar:not(:has(#profileChooseLabel:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) auto;
}
body:not([data-atlas-layout=classic]) .profile-identity h2 {
  font-family: var(--display);
  font-size: var(--text-xl);
  letter-spacing: -.02em;
}
body:not([data-atlas-layout=classic]) .profile-bar-actions {
  display: flex;
  gap: var(--space-2);
}
@media (max-width: 760px) {
  body:not([data-atlas-layout=classic]) .profile-bar,
  body:not([data-atlas-layout=classic]) .profile-bar:not(:has(#profileChooseLabel:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body:not([data-atlas-layout=classic]) .profile-bar > :is(.profile-search, .profile-profile-picker) {
    grid-column: 1/-1;
  }
}
body:not([data-atlas-layout=classic]) #profileOverview.profile-overview {
  grid-template-columns: minmax(0, 1fr);
}
body:not([data-atlas-layout=classic]) #profileOverview > .profile-hero {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-8);
  padding: 0 0 var(--space-5);
  border-right: 0;
  border-bottom: 1px solid var(--line-soft);
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-character {
  flex: none;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-character img {
  width: 56px;
  height: 112px;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-10);
  text-align: left;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-stat-list .profile-metric strong {
  font-size: var(--text-2xl);
}
@media (max-width: 600px) {
  body:not([data-atlas-layout=classic]) #profileOverview > .profile-hero {
    gap: var(--space-4);
  }
  body:not([data-atlas-layout=classic]) #profileOverview .overview-stat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  body:not([data-atlas-layout=classic]) #profileOverview .overview-stat-list .profile-metric strong {
    font-size: var(--text-xl);
  }
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-results {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--plate);
  overflow: hidden;
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item:first-child {
  border-top: 0;
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item:hover {
  background: color-mix(in srgb, var(--raised) 55%, transparent);
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item.is-selected {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-quotes {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-quotes b {
  font-size: var(--text-md);
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-actions {
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: flex-end;
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-actions button {
  min-height: 34px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-quotes {
    grid-column: 1/-1;
    grid-row: 2;
  }
  body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-actions {
    grid-column: 1/-1;
    grid-row: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-item-actions button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings td {
  padding-block: 10px;
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings .recipe > .game-image {
  margin-bottom: 0;
}
body:not([data-atlas-layout=classic]) .money-workspace .rankings .recipe strong {
  text-wrap: balance;
}
@container (min-width:741px) {
  body:not([data-atlas-layout=classic]) .money-workspace .rankings .recipe {
    min-width: 260px;
  }
}
@keyframes atlas-panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

/* /atlas-layout.css */
body:not([data-atlas-layout=classic]) {
  --control-h:38px;
  --gap:16px;
  --card-pad:20px;
  --card-radius:12px;
  --tile-radius:8px;
  --card-bg:#17191f;
  --card-line:#262933;
  --card-head:#f0f0f5;
  --tile-bg:#1e2028;
  --tile-line:#2a2d37;
  --tile-hover:#3b3f4d;
  --vista-height:560px;
}
body:not([data-atlas-layout=classic]) .app-header {
  margin: 0 0 var(--space-4);
  padding: var(--space-10) 0 0;
  align-items: flex-end;
}
body:not([data-atlas-layout=classic]) #pageTitle {
  font-size: 38px;
}
body:not([data-atlas-layout=classic]) .live-controls {
  align-items: center;
}
body:not([data-atlas-layout=classic]) :is(#refresh, #eventsNotificationsButton, #calculatorHelpButton) {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #calculatorHelpButton {
  margin: 0 0 4px;
  background: transparent;
  border-color: transparent;
  color: #d3d8e2;
  font-weight: 500;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:not([data-atlas-layout=classic]) #calculatorHelpButton:hover {
  color: var(--text);
  background: #ffffff12;
}
body:not([data-atlas-layout=classic]) #calculatorHelpButton::before {
  width: 16px;
  height: 16px;
  font-size: 11px;
}
body:not([data-atlas-layout=classic]) :is(.profile-subnavigation, .method-navigation) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) .method-navigation[hidden] {
  display: none;
}
body:not([data-atlas-layout=classic]) :is(.profile-subnavigation, .method-navigation) button {
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: #cfd5df;
  font-size: var(--text-sm);
  font-weight: 600;
  flex: none;
}
body:not([data-atlas-layout=classic]) {
  --card-pattern:url(/decor/pattern-atlas.svg?v=1) ;
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] {
  --card-pattern:none ;
}
body:not([data-atlas-layout=classic])[data-premium-theme=botanical] {
  --card-pattern:url(/decor/pattern-botanical.svg?v=1) ;
}
body:not([data-atlas-layout=classic])[data-premium-theme=celestial] {
  --card-pattern:url(/decor/pattern-celestial.svg?v=1) ;
}
body:not([data-atlas-layout=classic])[data-premium-theme=royal] {
  --card-pattern:url(/decor/pattern-royal.svg?v=1) ;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent [data-premium-decoration]:not(#atlas-none) {
  --premium-surface:var(--card-pattern,none) right top/480px 320px no-repeat,var(--edition-card-surface) ;
}
body:not([data-atlas-layout=classic]) #mainContent [data-premium-decoration] [data-premium-decoration]:not(#atlas-none) {
  --card-pattern:none ;
}
body:not([data-atlas-layout=classic]) #mainContent :where(#profile-skills, #profileOutfit, #profileHero, .mining-side-box, .mining-main>.domain-summary, .card-grouped-domain>.domain-summary, .mining-main-box>.domain-groups>:is(.domain-group, .domain-more), .mining-main-box>.garden-section, #profile-world-bestiary>.domain-summary, #profile-world-bestiary>.domain-groups>.domain-group, .hunter-fortune, .ci-panel, .ci-head>.ci-card, .dungeon-summary, .dungeon-track, .slayer-card, .museum-heading, .museum-card, .profile-nested, .networth-overview, .networth-panel, .profile-networth-list, .inventory-content, .storage-browser>.storage-groups, .gear-collection, .skill-gear-row, #profilePetGroups, .pet-collection-browser>.profile-filters, .museum-filters, .mining-main-box>.profile-filters, .profile-section-body>.profile-filters, .profile-section-body>.profile-mini-metrics, .profile-minion-family, .completion-summary, .completion-filters, .completion-list, .mw-toolbar, .mw-results, #mwSelectedHistory, .mw-history-picker, .events-card, .events-day, .events-goal, .help-panel, #helpWorkspace .introduction-panel, .site-tour-entry, .introduction-guide-row, .money-controls .setup:not(.hidden), .money-results-column>.results:not(.hidden), .optimizer-panel, ) {
  margin: 0;
  padding: var(--card-pad);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-pattern,none) right top/480px 320px no-repeat, var(--card-bg);
  box-shadow: 0 1px 0 #ffffff05 inset, 0 12px 28px -24px #000;
}
body:not([data-atlas-layout=classic]) #mainContent :where(.mining-side-box, .domain-group, .domain-feature, .ci-panel, .dungeon-track, .profile-nested, .events-card, .help-panel, .gear-collection, .mw-history-picker, #mwSelectedHistory, .hunter-fortune) > :is(h2, h3, header, .profile-nested-title):first-child,
body:not([data-atlas-layout=classic]) #mainContent .ci-panel > header,
body:not([data-atlas-layout=classic]) #mainContent .domain-group > h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  color: var(--card-head);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: left;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.domain-group, .mining-side-box, .gear-collection, .profile-nested) > h3 small {
  margin-left: auto;
  color: var(--quiet);
  font-size: var(--text-xs);
  font-weight: 500;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-nested-title {
  min-height: 0;
  background: none;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.garden-section, .domain-group, .bestiary-browser) :is(.domain-group, .bestiary-category, .profile-filters) {
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--card-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent :is(.garden-section, .domain-group, .bestiary-browser) :is(.domain-group, .bestiary-category, .profile-filters):not(#atlas-none) {
  border-width: 1px 0 0;
  border-color: var(--card-line);
  border-radius: 0;
  background: none;
  outline: 0;
  box-shadow: none;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent :is(.garden-section, .domain-group, .bestiary-browser) :is(.domain-group, .bestiary-category, .profile-filters):not(#atlas-none) > .premium-edge-art,
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent :is(.garden-section, .domain-group, .bestiary-browser) :is(.domain-group, .bestiary-category, .profile-filters):not(#atlas-none)::before,
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent :is(.garden-section, .domain-group, .bestiary-browser) :is(.domain-group, .bestiary-category, .profile-filters):not(#atlas-none)::after {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent .bestiary-browser > .profile-filters {
  padding-top: 0;
  border-top: 0;
  margin-bottom: var(--space-4);
}
body:not([data-atlas-layout=classic]) #mainContent :is(.completion-summary, .domain-summary, .museum-heading) :is(.profile-mini-metrics, .profile-metric) {
  background: none;
  border: 0;
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.crystal-card, .trophy-species, .garden-plot, .bestiary-creature, .profile-pet, .saved-loadout, .gear-set, .rift-storage-box, .completion-row, .profile-record-group, .visitor-summary > *, .profile-class-strip > div, .hf-rarities > div, .tree-presets > button, .perk-node) {
  border-radius: var(--tile-radius);
  transition:
    border-color var(--fast) var(--ease),
    background var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) #mainContent :is(.crystal-card, .trophy-species, .bestiary-creature, .profile-pet, .saved-loadout, .gear-set, .completion-row, .profile-class-strip > div) {
  background: var(--tile-bg);
  border: 1px solid var(--tile-line);
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) #mainContent :is(button.profile-pet, .saved-loadout, .gear-set, button.completion-row, .bestiary-creature, .mw-item, .events-goal, .profile-minion-family, .museum-card, .slayer-card):hover {
  border-color: var(--tile-hover);
  transform: translateY(-1px);
}
body:not([data-atlas-layout=classic]) #mainContent :is(.events-goal, .profile-minion-family, .museum-card, .slayer-card, .mw-item) {
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) {
  display: flex;
  flex-direction: column;
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) > .mobile-bar {
  order: -3;
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) > .profile-shell {
  display: contents;
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) > .profile-shell > .profile-bar {
  order: -2;
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) > .app-header {
  order: -1;
  padding-top: var(--space-8);
  margin-bottom: var(--space-4);
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) #pageTitle {
  font-size: 30px;
}
body:not([data-atlas-layout=classic]):is([data-workspace=profile], [data-workspace=progression]) main:has(.profile-bar.has-player) .page-heading .eyebrow {
  display: none;
}
body:not([data-atlas-layout=classic]) .profile-shell {
  margin: 0 0 var(--space-8);
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) .profile-explorer {
  padding: 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) .profile-status-line:empty,
body:not([data-atlas-layout=classic]) .profile-status-line:not(:has(:not(:empty))) {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-bar.has-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--card-bg) 96%, transparent),
      color-mix(in srgb, var(--card-bg) 82%, transparent));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -28px #000;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-identity {
  grid-column: 1;
  gap: var(--space-4);
  min-width: 0;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-monogram {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: var(--tile-radius);
  overflow: hidden;
  image-rendering: pixelated;
  box-shadow: 0 0 0 1px var(--card-line);
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-monogram img {
  width: 52px;
  height: 52px;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-identity h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.025em;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-identity p {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) .profile-key-stats {
  grid-column: 2;
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  justify-self: start;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) .profile-key-stats[hidden] {
  display: none;
}
body:not([data-atlas-layout=classic]) .profile-key-stats div {
  min-width: 0;
  padding: 2px var(--space-5);
  border-left: 1px solid var(--card-line);
}
body:not([data-atlas-layout=classic]) .profile-key-stats dt {
  color: var(--quiet);
  font-size: var(--text-xs);
  line-height: 1.4;
}
body:not([data-atlas-layout=classic]) .profile-key-stats dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-profile-picker {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-bar-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player:has(.profile-bar-actions button:not([hidden])) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player:has(.profile-bar-actions button:not([hidden])) .profile-bar-actions {
  grid-column: 4;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-profile-picker select {
  min-height: var(--control-h);
  min-width: 170px;
}
body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-bar-actions button {
  min-height: var(--control-h);
}
body:not([data-atlas-layout=classic]) #profileHero .overview-stat-list {
  display: none;
}
body:not([data-atlas-layout=classic]) #profileOverview.profile-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "skills hero" "skills gear";
  gap: var(--gap);
  align-items: start;
}
body:not([data-atlas-layout=classic]) #profileOverview > #profile-skills {
  grid-area: skills;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) #profileOverview > #profileHero {
  grid-area: hero;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-character {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-character img {
  width: 64px;
  height: 128px;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-badges {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
body:not([data-atlas-layout=classic]) #mainContent #profileHero .overview-fairy-souls,
body:not([data-atlas-layout=classic]) #mainContent #profileHero .overview-fairy-souls :is(.game-image, img) {
  width: 28px;
  height: 28px;
  max-width: 28px;
  --item-art-size:28px ;
}
body:not([data-atlas-layout=classic]) #profileOverview > #profileOutfit {
  grid-area: gear;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .mining-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .perk-tree {
  min-width: 660px;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .perk-tier {
  grid-template-columns: 52px minmax(0, 1fr);
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .perk-node {
  min-height: 88px;
  padding: 8px 4px;
  font-size: 11px;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic :is(.mining-side, .mining-main, .domain-groups) {
  display: grid;
  gap: var(--gap);
  align-content: start;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .mining-main-box {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-main > .mining-main-box {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .domain-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .domain-groups > :is(.domain-feature, .domain-more) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .mining-side .skill-gear-button {
  width: 100%;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text);
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .mining-side .skill-gear-button:hover {
  border-color: var(--tile-hover);
  background: color-mix(in srgb, var(--card-bg) 80%, var(--raised));
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border: 0;
  border-top: 1px solid var(--card-line);
  border-radius: 0;
  background: none;
  text-align: left;
  opacity: 1;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card:first-child {
  border-top: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card > span:not(.game-image) {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card .game-image {
  --item-art-size:22px;
  width: 22px;
  height: 22px;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card > span:not(.game-image) > b {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card > span:not(.game-image) > small {
  flex: none;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-grid > .crystal-card.crystal-card {
  padding-inline: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card:not(.found) :is(b, .game-image) {
  opacity: .55;
}
body:not([data-atlas-layout=classic]) .ci-head,
body:not([data-atlas-layout=classic]) .ci-grid,
body:not([data-atlas-layout=classic]) .dungeon-tracks {
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) .ci-head {
  margin-bottom: var(--gap);
}
body:not([data-atlas-layout=classic]) .ci-grid {
  margin-bottom: var(--gap);
}
body:not([data-atlas-layout=classic]) .money-workspace {
  display: block;
}
body:not([data-atlas-layout=classic]) .money-controls {
  position: static;
  margin: 0 0 var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: end;
  gap: var(--space-3) var(--space-5);
}
body:not([data-atlas-layout=classic]) .money-controls .setup:not(.hidden) :is(.setup-top, .minion-controls, .settings-grid.gathering-stats) {
  display: contents;
}
body:not([data-atlas-layout=classic]) .money-controls .setup-heading {
  display: none;
}
body:not([data-atlas-layout=classic]) .money-controls .setup :is(label, .budget-field) {
  min-width: 0;
  width: auto;
  margin: 0;
}
body:not([data-atlas-layout=classic]) .money-controls .setup .setup-top > .budget-field {
  grid-column: auto;
  flex: none;
}
body:not([data-atlas-layout=classic]) .money-controls .setup :is(.gathering-inline-status, .drop-hint, .setup-note) {
  grid-column: 1/-1;
  margin: 0;
}
body:not([data-atlas-layout=classic]) .money-controls .setup > details[open],
body:not([data-atlas-layout=classic]) .money-controls .setup .settings-bottom:has(details[open]) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) .money-controls .setup details[open] > .minion-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
}
body:not([data-atlas-layout=classic]) .money-controls .setup details > summary {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
}
body:not([data-atlas-layout=classic]) #tradeSetup .settings-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  margin: 0;
  padding: 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) .money-controls :is(input:not([type=checkbox]), select, .input-unit, .picker-button) {
  min-height: var(--control-h);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .picker-button {
  padding-block: 6px;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .gathering-modes {
  padding: 0;
  border: 0;
  background: none;
  gap: var(--space-1);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) > *,
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) :is(.setup-top, .minion-controls, .settings-grid.gathering-stats, .extra-filters, .pet-route-settings) > * {
  flex: 1 1 190px;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) :is(.gathering-inline-status, .drop-hint, .setup-note, .settings-bottom, details[open], .gathering-message) {
  flex: 1 1 100%;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) :is(.setup-top, .minion-controls, .settings-grid.gathering-stats, .extra-filters, .pet-route-settings) > button,
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) > button,
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) .calc-shortcuts {
  flex: 0 0 auto;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) :is(.gathering-modes, .gathering-timer) {
  flex: 0 0 auto;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .gathering-modes button {
  white-space: nowrap;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .gathering-timer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .gathering-timer > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .gathering-timer #gatheringClock {
  font-size: var(--text-xl);
  line-height: 1;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:not(.hidden):has(#gatheringSaveRun) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "modes modes timer timer" "hint hint hint hint" "minutes sale . ." "drops drops drops add" "save fees fees fees";
  align-items: end;
  gap: var(--space-4) var(--space-5);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > * {
  grid-column: 1/-1;
  min-width: 0;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-modes {
  grid-area: modes;
  justify-self: start;
  align-self: center;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-timer {
  grid-area: timer;
  justify-self: end;
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > p.drop-hint {
  grid-area: hint;
  margin-top: calc(var(--space-2) * -1);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > label:has(#gatheringMinutes) {
  grid-area: minutes;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-sale {
  grid-area: sale;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):not(:has(#gatheringMinutes)) > .gathering-sale {
  grid-area: minutes;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > :is(label:has(#gatheringMinutes), .gathering-sale) {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-selected-drops {
  grid-area: drops;
  grid-template-columns: subgrid;
  gap: var(--space-4) var(--space-5);
  align-self: stretch;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-selected-drops:empty {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringDropChooser {
  grid-area: add;
  align-self: start;
  margin: 0;
}
@media (min-width: 901px) {
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):has(.drop-option) > .gathering-selected-drops {
    grid-area: auto;
    grid-row: 4;
    grid-column: 1 / span 3;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):has(.drop-option) > #gatheringDropChooser {
    grid-area: auto;
    grid-row: 4;
    grid-column: 4;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):not(:has(.drop-option:nth-child(3))) > .gathering-selected-drops {
    grid-column: 1 / span 2;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):not(:has(.drop-option:nth-child(3))) > #gatheringDropChooser {
    grid-column: 3;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):not(:has(.drop-option:nth-child(2))) > .gathering-selected-drops {
    grid-column: 1 / span 1;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):not(:has(.drop-option:nth-child(2))) > #gatheringDropChooser {
    grid-column: 2;
  }
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):not(:has(.drop-option)) > #gatheringDropChooser {
  grid-area: drops;
  justify-self: start;
  width: min(100%, 280px);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):has(.drop-option) > #gatheringDropChooser:not([open]) {
  align-self: stretch;
  border-style: dashed;
  background: none;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun):has(.drop-option) > #gatheringDropChooser:not([open]) > summary {
  height: 100%;
  justify-content: center;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringSaveRun {
  grid-area: save;
  justify-self: start;
  align-self: start;
  width: auto;
  min-height: 40px;
  padding: 0 var(--space-6);
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringFees {
  grid-area: fees;
  justify-self: start;
  align-self: start;
  padding: 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringFees > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringFees .settings-grid {
  grid-template-columns: repeat(2, minmax(160px, 220px));
  margin-top: var(--space-4);
}
@media (max-width: 900px) {
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:not(.hidden):has(#gatheringSaveRun) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "modes modes" "timer timer" "hint hint" "minutes sale" "drops drops" "add add" "save fees";
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-timer {
    justify-self: stretch;
    justify-content: space-between;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-timer {
    flex-wrap: nowrap;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-timer .gathering-timer-buttons {
    flex-wrap: nowrap;
    width: auto;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-timer .gathering-timer-buttons button {
    flex: 0 0 auto;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringFees .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup:not(.hidden):has(#gatheringSaveRun) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "modes" "timer" "hint" "minutes" "sale" "drops" "add" "save" "fees";
  }
}
body:not([data-atlas-layout=classic])[data-category=gathering]:not([data-gather-view=rank]) #mainContent .money-results-column > .stats:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) 0;
  margin: 0;
  padding: var(--space-4) var(--card-pad);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats > .stat {
  flex: 0 1 auto;
  min-width: 180px;
  margin: 0 var(--space-8) 0 0;
  padding: 0 var(--space-8) 0 0;
  border: 0;
  border-right: 1px solid var(--card-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats > .stat:nth-child(2) {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats > .stat::after,
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats .stat-icon {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats .stat strong {
  margin: var(--space-1) 0;
  font-size: var(--text-2xl);
  letter-spacing: 0;
}
@media (max-width: 520px) {
  body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats > .stat {
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    border-right: 0;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .stats > .stat:nth-child(2) {
    padding-top: var(--space-4);
    border-top: 1px solid var(--card-line);
  }
}
@media (min-width: 1280px) {
  body:not([data-atlas-layout=classic]):not([data-locked="1"]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))):has(> .money-controls > .setup:not(.hidden), > .money-controls > #minionSetupSlot:not(.hidden)) {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: var(--gap);
  }
  body:not([data-atlas-layout=classic]):not([data-locked="1"]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))):has(> .money-controls > .setup:not(.hidden), > .money-controls > #minionSetupSlot:not(.hidden)) > .money-controls {
    margin: 0;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup .settings-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup .settings-bottom > details {
    flex: 0 0 auto;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup .settings-bottom > details[open] {
    flex: 1 1 100%;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup .settings-bottom > .fee-summary {
    flex: 1 1 auto;
    margin: 0;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup:not(.hidden),
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:not(.hidden):has(#gatheringSaveRun) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-4);
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup:not(.hidden) > *,
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup:not(.hidden) :is(.setup-top, .minion-controls, .settings-grid.gathering-stats, .extra-filters, .pet-route-settings) > *,
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:has(#gatheringSaveRun) > * {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    justify-self: auto;
    align-self: stretch;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-timer {
    justify-content: space-between;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls .setup:not(.hidden) :is(.gathering-modes, .calc-shortcuts),
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:has(#gatheringSaveRun) > :is(.gathering-modes, #gatheringSaveRun, #gatheringFees) {
    align-self: flex-start;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:has(#gatheringSaveRun) > .gathering-selected-drops {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:has(#gatheringSaveRun) > #gatheringFees .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-workspace:not(:has(#greenhouseSetup:not(.hidden))) .money-controls #gatheringSetup:has(.drop-option) > #gatheringDropChooser:not([open]) > summary {
    height: auto;
  }
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls #gatheringSetup .gathering-selected-drops {
  align-self: start;
  align-content: start;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls input[aria-invalid=true]:placeholder-shown {
  border-color: var(--line);
  box-shadow: none;
  outline-color: transparent;
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .results {
  min-width: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .status:not([hidden]) {
  padding: var(--space-4) var(--card-pad);
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--amber);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .status.error:not([hidden]) {
  border-left-color: var(--red);
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column .results-header > #compareMinionFuels {
  margin-left: auto;
}
body:not([data-atlas-layout=classic]) .money-results-column {
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .money-results-column > .results:not(.hidden) {
  padding: 0;
  overflow: hidden;
}
body:not([data-atlas-layout=classic]) .money-results-column > .results > :is(.results-header, .toolbar, .minion-heading) {
  margin: 0;
  padding: var(--space-4) var(--card-pad) 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) .money-results-column > .results > .toolbar {
  padding-bottom: var(--space-4);
}
body:not([data-atlas-layout=classic]) .money-results-column .results-header .section-title h2,
body:not([data-atlas-layout=classic]) #minionPanel .minion-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}
body:not([data-atlas-layout=classic]) .money-results-column .section-indicator {
  display: none;
}
body:not([data-atlas-layout=classic]) .money-results-column .mode-note {
  margin: 0;
  padding: 0 var(--card-pad) var(--space-3);
}
body:not([data-atlas-layout=classic]) .money-results-column .tablewrap {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--card-line);
  border-radius: 0;
  background: none;
}
body:not([data-atlas-layout=classic]) .money-results-column .pager {
  margin: 0;
  padding: var(--space-3) var(--card-pad);
  border-top: 1px solid var(--card-line);
}
body:not([data-atlas-layout=classic]) .money-results-column .rankings th:first-child,
body:not([data-atlas-layout=classic]) .money-results-column .rankings td:first-child {
  padding-left: var(--card-pad);
}
body:not([data-atlas-layout=classic]) .money-results-column .rankings th:last-child,
body:not([data-atlas-layout=classic]) .money-results-column .rankings td:last-child {
  padding-right: var(--card-pad);
}
body:not([data-atlas-layout=classic]) .money-results-column > .status {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #minionPanel {
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #minionPanel .minion-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-toolbar {
  margin: 0 0 var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-results {
  gap: 0;
  padding: 0;
  overflow: hidden;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-results > .mw-item {
  margin: 0;
  padding: var(--space-3) var(--card-pad);
  border: 0;
  border-top: 1px solid var(--card-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-results > .mw-item:first-child {
  border-top: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-results > .mw-item:hover {
  background: #ffffff05;
}
body:not([data-atlas-layout=classic]) #marketsWorkspace .mw-results-heading {
  margin: var(--space-2) 0 var(--space-3);
}
body:not([data-atlas-layout=classic]) .events-calendar-layout {
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #eventsTimeline,
body:not([data-atlas-layout=classic]) .events-calendar-sidebar,
body:not([data-atlas-layout=classic]) .events-calendar-main {
  display: grid;
  gap: var(--gap);
  align-content: start;
}
body:not([data-atlas-layout=classic]) #mainContent .events-calendar-main > .events-sources {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .events-calendar-sidebar {
  padding: 0;
  border: 0;
  background: none;
}
body:not([data-atlas-layout=classic]) #mainContent #eventsTimeline .events-now {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
body:not([data-atlas-layout=classic]) #mainContent #eventsTimeline .events-now > h3 {
  margin: 0;
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #mainContent #eventsTimeline .events-now > h3 {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 600px) {
  body:not([data-atlas-layout=classic]) #mainContent #eventsTimeline .events-now {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace :is(.profile-section, .progression-panel, .completion-section) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent #progressionWorkspace :is(.profile-section, .progression-panel, .completion-section)[data-premium-decoration] {
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent #progressionWorkspace :is(.profile-section, .progression-panel, .completion-section)[data-premium-decoration] > .premium-edge-art,
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent #progressionWorkspace :is(.profile-section, .progression-panel, .completion-section)[data-premium-decoration]::before,
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent #progressionWorkspace :is(.profile-section, .progression-panel, .completion-section)[data-premium-decoration]::after {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > .profile-section-body {
  padding: 0;
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) .completion-section {
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) .completion-section > *,
body:not([data-atlas-layout=classic]) .completion-tabs,
body:not([data-atlas-layout=classic]) .completion-filters {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .completion-list {
  gap: var(--space-2);
  padding: var(--space-3);
}
body:not([data-atlas-layout=classic]) #mainContent .completion-filters {
  padding-block: var(--space-4);
}
body:not([data-atlas-layout=classic]) #progressionWorkspace .profile-subheading {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #helpWorkspace > [data-help-page]:not([hidden]) {
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #helpWorkspace .site-tour-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
body:not([data-atlas-layout=classic]) #helpWorkspace .site-tour-entry > h2 {
  margin: 0;
  font-size: 15px;
}
body:not([data-atlas-layout=classic]) .storage-browser {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .storage-browser > .storage-groups {
  padding: var(--space-2);
  align-self: start;
}
body:not([data-atlas-layout=classic]) .storage-groups button > span {
  white-space: normal;
}
body:not([data-atlas-layout=classic]) .skill-gear-body {
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .profile-record {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .profile-record > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body:not([data-atlas-layout=classic]) .profile-domain-classic .domain-groups > .domain-group:not(.domain-feature):not(:has(+ .domain-group:not(.domain-feature, .domain-more))):not(.domain-group:not(.domain-feature, .domain-more) + .domain-group) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) .progression-level small {
  white-space: nowrap;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-bar:not(.has-player) {
  padding: var(--card-pad);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-shell > :is(.profile-error, .profile-welcome):not([hidden]) {
  margin-top: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card :is(b, small) {
  display: inline;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-results {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-results > .mw-item {
  padding: var(--space-3) 0;
}
body:not([data-atlas-layout=classic]) #mainContent [data-help-page=bug-report] .help-panel {
  width: 100%;
  max-width: none;
}
body:not([data-atlas-layout=classic]) [data-help-page=bug-report] .help-panel > * {
  max-width: 720px;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .gathering-modes {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
@media (max-width: 1500px) {
  body:not([data-atlas-layout=classic]) #mainContent .profile-bar.has-player {
    row-gap: var(--space-4);
  }
  body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-key-stats {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: stretch;
    padding-top: var(--space-4);
    border-top: 1px solid var(--card-line);
  }
  body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-key-stats div:first-child {
    padding-left: 0;
    border-left: 0;
  }
  body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-profile-picker {
    grid-column: 3;
  }
  body:not([data-atlas-layout=classic]) .profile-bar.has-player:has(.profile-bar-actions button:not([hidden])) .profile-profile-picker {
    grid-column: 3;
  }
}
body:not([data-atlas-layout=classic])[data-premium-theme] #mainContent :is(.profile-bar.has-player, .mining-side .skill-gear-button) {
  background: var(--edition-surface,var(--card-bg));
  border-color: var(--premium-line,var(--card-line));
}
body:not([data-atlas-layout=classic])[data-premium-theme] {
  --card-bg:var(--edition-surface,#17191f);
  --card-line:var(--premium-line,#262933) ;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.profile-section-body, .pet-collection-browser, #profile-world-bestiary, [id^=completionPanel-], .events-page) {
  display: grid;
  gap: var(--gap);
  align-content: start;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.profile-section-body, .pet-collection-browser, #profile-world-bestiary, [id^=completionPanel-], .events-page) > * {
  margin-top: 0;
  margin-bottom: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .pet-collection-browser > #profilePetCount {
  margin: calc(var(--card-pad) + var(--space-5) + 1px) calc(var(--card-pad) + 1px) 0 0;
  line-height: 30px;
}
body:not([data-atlas-layout=classic]) #mainContent .events-bingo-overview {
  margin-bottom: var(--gap);
}
body:not([data-atlas-layout=classic]) .profile-domain-classic {
  max-width: none;
  margin-inline: 0;
  container: profile-domain / inline-size;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout > :is(.mining-side, .mining-main) {
  display: contents;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout :is(.mining-side, .mining-main) > * {
  min-width: 0;
  margin: 0;
  grid-column: auto;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout :is(.mining-main-box, .hunter-fortune, .mining-main > .domain-summary, .side-summary) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-side > .skill-gear-button {
  grid-column: 1/-1;
  justify-self: start;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  padding: 0 var(--space-5);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-side-box {
  align-self: stretch;
  align-content: start;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-side-box:has(> .medal-gallery) {
  container-type: inline-size;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-side:where(:not(:has(> .mining-side-box:not(.side-summary) ~ .mining-side-box:not(.side-summary)))) > .mining-side-box:not(.side-summary) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box):has(> :is(.crystal-grid, .profile-records, .profile-data-table-wrap, .tree-gift-wrap, .medal-gallery, .powder-list)) {
  display: flex;
  flex-direction: column;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > :is(.crystal-grid, .profile-records, .profile-data-table-wrap, .tree-gift-wrap, .medal-gallery, .powder-list) {
  flex: 1 0 auto;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .powder-list {
  grid-auto-rows: 1fr;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .powder-list > li {
  align-content: center;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .medal-gallery {
  grid-auto-rows: 1fr;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .medal-gallery > .trophy-species {
  align-content: center;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > :is(.profile-data-table-wrap, .tree-gift-wrap) {
  display: flex;
  flex-direction: column;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > :is(.profile-data-table-wrap, .tree-gift-wrap) > table {
  flex: 1 0 auto;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .crystal-grid {
  grid-auto-rows: 1fr;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .profile-records {
  display: flex;
  flex-direction: column;
}
body:not([data-atlas-layout=classic]) :where(#mainContent .profile-domain-classic .mining-layout .mining-side-box) > .profile-records > .profile-record {
  flex: 1 0 auto;
  align-content: center;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .domain-groups {
  align-items: stretch;
  grid-auto-flow: row dense;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .domain-groups > .domain-group:has(.record-chips > li:nth-child(40), .profile-record:nth-child(20)) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .domain-groups > .domain-group {
  align-content: start;
}
body:not([data-atlas-layout=classic]) .dungeon-tracks,
body:not([data-atlas-layout=classic]) .slayer-card-grid:not(:has(.slayer-card[open])) {
  align-items: stretch;
}
@container profile-domain (max-width:639px) {
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .domain-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container profile-domain (min-width:640px) {
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-side-box:has(> .medal-gallery),
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=foraging] .mining-side:has(> .mining-side-box ~ .mining-side-box ~ .mining-side-box) > .mining-side-box:last-child {
    grid-column: 1/-1;
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=farming] .mining-side:has(> :nth-child(even of .mining-side-box:not(.side-summary)):nth-last-child(1 of .mining-side-box:not(.side-summary))) > .mining-side-box:has(> .medal-gallery) {
    grid-column: auto;
  }
}
@container profile-domain (min-width:1000px) {
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=farming] .mining-side:has(> :nth-child(5 of .mining-side-box:not(.side-summary)):nth-last-child(1 of .mining-side-box:not(.side-summary))) > .mining-side-box:has(> .medal-gallery),
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-side-box:has(.crystal-grid) {
    grid-column: span 2;
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=farming] .mining-layout:has(> .mining-side > :nth-child(even of .mining-side-box:not(.side-summary)):nth-last-child(1 of .mining-side-box:not(.side-summary))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=farming] .mining-side:has(> :nth-child(3 of .mining-side-box:not(.side-summary)):nth-last-child(1 of .mining-side-box:not(.side-summary))) > .mining-side-box:has(> .medal-gallery) {
    grid-column: auto;
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=foraging] .mining-layout:not(:has(.mining-side > .mining-side-box ~ .mining-side-box ~ .mining-side-box)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=foraging] .mining-side:has(> .mining-side-box ~ .mining-side-box ~ .mining-side-box) > .mining-side-box:last-child {
    grid-column: auto;
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic[data-domain=foraging] .mining-side > .mining-side-box:last-child > .profile-records {
    grid-template-columns: minmax(0, 1fr);
  }
}
body:not([data-atlas-layout=classic]) #mainContent .medal-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body:not([data-atlas-layout=classic]) #mainContent .medal-gallery .trophy-species {
  padding: var(--space-3) var(--space-2);
}
body:not([data-atlas-layout=classic]) #mainContent .medal-gallery .trophy-species b {
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #mainContent .medal-gallery .trophy-species small {
  font-size: var(--text-xs);
}
body:not([data-atlas-layout=classic]) #mainContent .medal-gallery .medal-count {
  font-size: var(--text-xl);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
body:not([data-atlas-layout=classic]) #mainContent .medal-gallery .medal-count.is-unavailable {
  font-size: var(--text-xs);
  color: var(--muted);
  overflow-wrap: anywhere;
}
body:not([data-atlas-layout=classic]) #mainContent .medal-platinum b {
  color: var(--muted);
}
body:not([data-atlas-layout=classic]) #mainContent .medal-diamond b {
  color: var(--brand);
}
@container (min-width:540px) {
  body:not([data-atlas-layout=classic]) #mainContent .medal-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout :is(.tree-gift-wrap, .profile-data-table-wrap) > table {
  height: auto;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-main > .domain-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-layout .mining-main > .domain-summary .profile-mini-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .powder-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .powder-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--card-line);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .powder-list li:first-child {
  padding-top: 0;
  border-top: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .powder-list li:last-child {
  padding-bottom: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .powder-amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-side:where(:not(:has(> .mining-side-box:not(.side-summary) ~ .mining-side-box:not(.side-summary)))) > .mining-side-box:not(.side-summary) .profile-records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4) var(--space-6);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-side:where(:not(:has(> .mining-side-box:not(.side-summary) ~ .mining-side-box:not(.side-summary)))) > .mining-side-box:not(.side-summary) .profile-records > .profile-record {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .mining-side:where(:not(:has(> .mining-side-box:not(.side-summary) ~ .mining-side-box:not(.side-summary)))) > .mining-side-box:not(.side-summary) .profile-records > .profile-record > :last-child {
  text-align: left;
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--text);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .side-summary .domain-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .side-summary .profile-mini-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-domain-classic .side-summary .profile-mini-metrics .profile-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
}
body:not([data-atlas-layout=classic]) #mainContent [data-domain=crimson] .ci-grid {
  align-items: stretch;
}
body:not([data-atlas-layout=classic]) #mainContent .ci-panel:has(> .ci-kuudra) {
  display: flex;
  flex-direction: column;
}
body:not([data-atlas-layout=classic]) #mainContent .ci-kuudra {
  flex: 1;
  align-content: space-around;
}
body:not([data-atlas-layout=classic]) #mainContent .ci-kuudra .ci-test.is-empty > :is(span, b) {
  color: var(--quiet);
}
body:not([data-atlas-layout=classic]) #mainContent .skill-gear-body:has(> .skill-gear-row) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .skill-gear-body > .skill-gear-row {
  grid-column: 1/-1;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .skill-gear-body > .skill-gear-row:is([data-slot=NECKLACE], [data-slot=CLOAK], [data-slot=BELT], [data-slot=GLOVES]) {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2);
}
@media (max-width: 900px) {
  body:not([data-atlas-layout=classic]) #mainContent .skill-gear-body:has(> .skill-gear-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body:not([data-atlas-layout=classic]) #mainContent .skill-gear-body:has(> .skill-gear-row) {
    grid-template-columns: minmax(0, 1fr);
  }
}
body:not([data-atlas-layout=classic]) #mainContent .overview-skills .profile-skill {
  padding: var(--space-3) var(--space-4);
  border-bottom: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .completion-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-8);
}
body:not([data-atlas-layout=classic]) #mainContent .completion-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  flex: 0 1 auto;
}
body:not([data-atlas-layout=classic]) #mainContent .completion-summary > progress {
  flex: 1 1 280px;
  margin: 0 0 7px;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-subheading {
  align-items: baseline;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > summary {
  padding: 0;
  width: 100%;
  justify-self: stretch;
  pointer-events: none;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > summary > svg {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > summary > span {
  display: flex;
  flex: 1;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > summary > span > b {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > summary > span > b > .icon {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent #progressionWorkspace .profile-section > summary > span > small {
  margin: 0 0 0 auto;
  color: var(--quiet);
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #mainContent .inventory-content:has(> #profileInventoryList:not(:empty)) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-4) var(--space-6);
  align-items: start;
}
body:not([data-atlas-layout=classic]) #mainContent .inventory-content > :not(.inventory-grid-scroll, #profileInventoryList) {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) #mainContent #profileInventoryList:not(:empty) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  max-height: 32rem;
  overflow: auto;
  scrollbar-width: thin;
}
body:not([data-atlas-layout=classic]) #mainContent #profileInventoryList:empty {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.rift-storage, .rift-storage-col, .rift-storage-box, .rift-storage-worn) {
  min-width: 0;
  max-width: 100%;
}
body:not([data-atlas-layout=classic]) #mainContent .rift-storage-box {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-item-grid.inventory-slots.rift-storage-small {
  grid-template-columns: repeat(4, minmax(0, 40px));
  width: min(100%, 190px);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  column-gap: var(--space-6);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card:nth-child(2) {
  border-top: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side > .hunter-fortune {
  padding: var(--card-pad);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side > .hunter-fortune .hf-rarities {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side > .hunter-fortune .hf-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
body:not([data-atlas-layout=classic]) #profileOverview.profile-overview {
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas: "hero skills" "gear gear";
  align-items: stretch;
}
body:not([data-atlas-layout=classic]) #profileOverview > #profileHero {
  flex-direction: column;
  justify-content: center;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-character {
  flex-direction: column;
  gap: var(--space-4);
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-character img {
  width: 96px;
  height: 192px;
}
body:not([data-atlas-layout=classic]) #profileOverview .overview-badges {
  flex-direction: row;
  align-items: center;
}
body:not([data-atlas-layout=classic]) #mainContent #profileOutfit .overview-outfit .outfit-layout {
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 1.3fr);
}
body:not([data-atlas-layout=classic]) #mainContent #profileOutfit .overview-outfit :is(.outfit-armor-rack, .outfit-equipment-slots) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not([data-atlas-layout=classic]) #mainContent .saved-loadout-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 600px) {
  body:not([data-atlas-layout=classic]) main#mainContent #profileOutfit .overview-outfit .outfit-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) main#mainContent #profileOutfit .overview-outfit :is(.outfit-armor-rack, .outfit-equipment-slots) {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) main#mainContent .saved-loadout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card:nth-child(2) {
    border-top: 1px solid var(--card-line);
  }
  body:not([data-atlas-layout=classic]) #mainContent .mining-side > .hunter-fortune .hf-rarities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent .mining-side > .hunter-fortune .hf-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  body:not([data-atlas-layout=classic]) #mainContent .saved-loadout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
body:not([data-atlas-layout=classic]) #mainContent .museum-gallery {
  column-gap: var(--gap);
  margin-top: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .museum-gallery > .museum-card {
  margin: 0 0 var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent #profileMuseumExtra,
body:not([data-atlas-layout=classic]) #mainContent #profileNetworthExtra {
  display: grid;
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent :is(#profileMuseumExtra, #profileNetworthExtra) > * {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .networth-browser {
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-list-footer {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-skill-grid {
  gap: var(--space-2) var(--gap);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-skill-grid > .profile-skill {
  border-bottom: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .profile-class-strip {
  padding-top: 0;
  border-top: 0;
  gap: var(--space-3);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-class-strip > div {
  padding: var(--space-3) var(--space-4);
}
body:not([data-atlas-layout=classic]) #mainContent .dungeon-summary {
  display: grid;
  gap: var(--space-5);
}
body:not([data-atlas-layout=classic]) #mainContent .dungeon-summary > * {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.profile-key-stats, .extra-filters, .pet-route-settings, #minionEquipment, .gathering-fees, .gh-options, .gh-more, .hf-total, .hf-columns > div, .bestiary-other-row, .networth-total) {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.hf-source, .introduction-faq details, #greenhousePanel li) {
  border-bottom: 0;
}
body:not([data-atlas-layout=classic]) #mainContent :is(.introduction-panel, .introduction-tools, .introduction-help) nav :is(a, button) {
  border-top: 0;
  border-radius: var(--radius-sm);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-card {
  border-top: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
body:not([data-atlas-layout=classic]) #mainContent .mining-side-box .crystal-grid {
  gap: 2px var(--space-5);
}
body:not([data-atlas-layout=classic]) #mainContent .profile-bar.has-player .profile-key-stats {
  padding-top: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup :is(.extra-filters, .pet-route-settings):not(.hidden) {
  display: contents;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup :is(.extra-filters, .pet-route-settings) > label {
  width: auto;
  min-width: 0;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup .settings-bottom {
  grid-column: 1/-1;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-results > .mw-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  text-align: left;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item-actions {
  flex: none;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item-title h4 {
  margin: 0;
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item-title .mw-source-badge {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item-quotes {
  display: none;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker .mw-item-actions {
  grid-column: auto;
  grid-row: auto;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-layout,
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace [class*=history-layout] {
  gap: var(--gap);
}
body:not([data-atlas-layout=classic]) :is(.profile-subnavigation, .method-navigation) {
  gap: 6px;
}
body:not([data-atlas-layout=classic]) #mainContent .hunter-fortune .hf-rarities > div {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--tile-bg);
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-history-picker {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
body:not([data-atlas-layout=classic]) #mainContent .mw-history-picker > * {
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #marketsWorkspace .mw-pagination {
  margin: var(--space-3) 0 0;
  padding: 0;
}
body:not([data-atlas-layout=classic]) .site-footer {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--muted);
}
body:not([data-atlas-layout=classic]) .site-footer :is(a, button) {
  color: var(--muted);
}
body:not([data-atlas-layout=classic]) .sidebar-version {
  letter-spacing: 0;
}
body:not([data-atlas-layout=classic]) .storage-groups button > span {
  overflow-wrap: break-word;
}
@container (min-width:741px) {
  body:not([data-atlas-layout=classic]) .money-workspace .rankings :is(.result-profit .subvalue, .tag) {
    white-space: nowrap;
  }
}
@container (min-width:741px) and (max-width:900px) {
  body:not([data-atlas-layout=classic]) .money-workspace .rankings :is(td, th).recipe {
    min-width: 180px;
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings :is(td, th).result-profit {
    min-width: 120px;
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings :is(td, th):is(.row-action, :last-child) {
    padding-inline: var(--space-2);
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings .market-context {
    min-width: 100px;
  }
}
@media (max-width: 540px) {
  body:not([data-atlas-layout=classic]) .storage-groups button {
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-atlas-layout=classic]) #mainContent * {
    animation: none !important;
  }
  body:not([data-atlas-layout=classic]) #mainContent :hover {
    transform: none !important;
  }
}
@media (max-width: 1100px) {
  body:not([data-atlas-layout=classic]) #profileOverview.profile-overview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "skills" "gear";
  }
  body:not([data-atlas-layout=classic]) #mainContent #profileOutfit .overview-outfit .outfit-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) #mainContent #profileOutfit .overview-outfit :is(.outfit-armor-rack, .outfit-equipment-slots) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent .saved-loadout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #profileOverview > #profileHero:not(:has(.overview-badges)) {
    display: none;
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-bar.has-player {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  body:not([data-atlas-layout=classic]) .profile-key-stats {
    grid-column: 1/-1;
    grid-row: 2;
  }
  body:not([data-atlas-layout=classic]) .profile-key-stats div:first-child {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 820px) {
  body:not([data-atlas-layout=classic]) .app-header {
    padding-top: var(--space-6);
  }
  body:not([data-atlas-layout=classic]) #pageTitle {
    font-size: var(--text-3xl);
  }
  body:not([data-atlas-layout=classic]) .storage-browser {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) .storage-groups button > span {
    white-space: normal;
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-bar.has-player {
    margin-top: var(--space-4);
  }
}
@media (max-width: 600px) {
  body:not([data-atlas-layout=classic]) {
    --card-pad:16px ;
  }
  body:not([data-atlas-layout=classic]) #pageTitle {
    font-size: 28px;
  }
  body:not([data-atlas-layout=classic]) .profile-domain-classic :is(.mining-side, .domain-groups) {
    grid-template-columns: minmax(0, 1fr);
  }
  body:not([data-atlas-layout=classic]) #mainContent .profile-bar.has-player {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }
  body:not([data-atlas-layout=classic]) .profile-bar.has-player :is(.profile-identity, .profile-key-stats, .profile-profile-picker, .profile-bar-actions) {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch;
  }
  body:not([data-atlas-layout=classic]) .profile-key-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) 0;
  }
  body:not([data-atlas-layout=classic]) .profile-key-stats div {
    padding: 0 var(--space-3);
    border-left: 0;
  }
  body:not([data-atlas-layout=classic]) .profile-key-stats div:nth-child(odd) {
    padding-left: 0;
  }
  body:not([data-atlas-layout=classic]) .profile-bar.has-player .profile-profile-picker select {
    width: 100%;
    min-width: 0;
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) {
    gap: var(--space-3);
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) > *,
  body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) :is(.setup-top, .minion-controls, .settings-grid.gathering-stats, .extra-filters, .pet-route-settings) > * {
    flex-basis: calc(50% - var(--space-3));
  }
  body:not([data-atlas-layout=classic]) #mainContent .money-controls .setup:not(.hidden) :is(.budget-field, .settings-bottom, .gathering-modes, .gathering-timer, .gathering-inline-status, .drop-hint, .setup-note, details[open]) {
    flex: 1 1 100%;
  }
}
@container (min-width:561px) and (max-width:740px) {
  body:not([data-atlas-layout=classic]) .money-workspace .rankings tbody {
    padding: var(--space-3);
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: start;
  }
  body:not([data-atlas-layout=classic]) .money-workspace .rankings tbody tr > .row-action {
    align-self: center;
  }
}
body:not([data-atlas-layout=classic]) #introductionWorkspace {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--space-8) 0 0;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-destinations {
  display: contents;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-hero {
  grid-column: 1/-1;
  order: 0;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-tools {
  grid-column: 1/-1;
  order: 1;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-destinations > .introduction-panel {
  grid-column: auto;
  grid-row: auto;
  order: 2;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-help {
  grid-column: 1/-1;
  order: 3;
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-hero {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: var(--space-10) var(--space-10) var(--space-8);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background:
    linear-gradient(
      90deg,
      var(--hero-shade) 0%,
      color-mix(in srgb, var(--hero-shade) 92%, transparent) 38%,
      color-mix(in srgb, var(--hero-shade) 20%, transparent) 72%,
      transparent),
    var(--intro-scene,url(/scenery/hub.webp?v=225)) right 30%/cover no-repeat;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-logo {
  display: none;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace {
  --hero-shade:var(--card-bg) ;
}
body:not([data-atlas-layout=classic])[data-premium-theme] #introductionWorkspace {
  --hero-shade:var(--panel);
  --intro-scene:var(--edition-scene-hub) ;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-hero h2 {
  margin: 0 0 var(--space-2);
  font-size: 44px;
  line-height: 1.05;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-lead {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--text-md);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-search-form {
  display: flex;
  gap: var(--space-2);
  max-width: none;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-search-form label {
  flex: 1;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-search-form input {
  width: 100%;
  min-height: 48px;
  font-size: var(--text-lg);
  background: var(--input);
  border-color: var(--line);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-search-form button {
  min-height: 48px;
  padding: 0 var(--space-6);
  white-space: nowrap;
}
body:not([data-atlas-layout=classic]) .introduction-continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
body:not([data-atlas-layout=classic]) .introduction-continue[hidden] {
  display: none;
}
body:not([data-atlas-layout=classic]) .introduction-continue-label {
  color: var(--quiet);
  font-size: var(--text-sm);
  margin-right: var(--space-1);
}
body:not([data-atlas-layout=classic]) .introduction-continue :is(.introduction-continue-player, .introduction-continue-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) .introduction-continue .introduction-continue-player {
  padding-left: 5px;
}
body:not([data-atlas-layout=classic]) .introduction-continue-player img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  image-rendering: pixelated;
}
body:not([data-atlas-layout=classic]) .introduction-continue-player small {
  color: var(--quiet);
  font-weight: 500;
}
body:not([data-atlas-layout=classic]) .introduction-continue :is(button):hover {
  border-color: var(--tile-hover);
  background: var(--raised);
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) {
  --card-scene:none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-group-head h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--card-head);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-group-head h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--intro-color,var(--quiet));
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-group-head p {
  margin: 2px 0 0;
  color: var(--quiet);
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) nav {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-tools nav {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-1) var(--space-2);
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) nav :is(a, button) {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 12px;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--tile-radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) nav :is(a, button):hover {
  background: var(--tile-bg);
  border-color: var(--tile-line);
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) nav :is(a, button):focus-visible {
  outline: 2px solid var(--intro-color,var(--brand));
  outline-offset: 1px;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-tool-art {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  object-fit: contain;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-tool-copy {
  display: grid;
  min-width: 0;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-tool-copy b {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-tool-copy small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--quiet);
  font-size: var(--text-xs);
  line-height: 1.35;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .intro-chevron {
  width: 12px;
  height: 12px;
  color: var(--quiet);
  transition: transform var(--fast) var(--ease), color var(--fast) var(--ease);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace nav :is(a, button):hover .intro-chevron {
  transform: translateX(2px);
  color: var(--intro-color,var(--brand));
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-help {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-2) 0 0;
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
  color: var(--quiet);
  font-size: var(--text-sm);
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-help > span {
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}
body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-help > p {
  flex: 1 1 auto;
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-help nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-help nav a {
  min-height: 0;
  padding: 0;
  color: var(--brand);
  background: none;
  border: 0;
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #mainContent #introductionWorkspace .introduction-hero {
  background: var(--card-bg);
}
body:not([data-atlas-layout=classic])[data-atlas-variant=basic] #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) nav :is(a, button) {
  grid-template-columns: minmax(0, 1fr) 12px;
  min-height: 46px;
}
@media (max-width: 1100px) {
  body:not([data-atlas-layout=classic]) #introductionWorkspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-destinations > .introduction-panel:last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 700px) {
  body:not([data-atlas-layout=classic]) #introductionWorkspace {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-4);
  }
  body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-destinations > .introduction-panel:last-child {
    grid-column: auto;
  }
  body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-hero {
    padding: var(--space-6) var(--space-5);
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--hero-shade) 30%, transparent),
        var(--hero-shade) 70%),
      var(--intro-scene,url(/scenery/hub.webp?v=225)) center top/cover no-repeat;
  }
  body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-hero h2 {
    font-size: 34px;
  }
  body:not([data-atlas-layout=classic]) #introductionWorkspace .introduction-search-form {
    flex-direction: column;
  }
  body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-tools nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-tools nav :is(a, button) {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: var(--space-2);
  }
  body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-tools .intro-tool-copy small,
  body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace .introduction-tools .intro-chevron {
    display: none;
  }
  body:not([data-atlas-layout=classic]) #mainContent #introductionWorkspace :is(.introduction-panel, .introduction-tools) {
    padding: var(--space-4);
  }
}
:root[data-motion=paused] body:not([data-atlas-layout=classic]) #mainContent *,
:root[data-idle=true] body:not([data-atlas-layout=classic]) #mainContent * {
  animation: none;
}

/* /edge-garland.css */
/* Connected vines, celestial charts and theme-specific edgework on real cards. Whole motifs fit
   the available gutter before the adaptive cutout protects content and neighbouring cards. */
.edge-garland { position:absolute; z-index:4; overflow:hidden; pointer-events:none; contain:layout style }
.garland-anchor { position:relative }
/* Content rules such as a form's 720px reading width must never resize the measured SVG.
   Its viewBox and CSS box must agree, including the bleed outside the card border. */
#mainContent .has-garland > .edge-garland {
 position:absolute!important; grid-area:auto!important; flex:none!important;
 width:var(--garland-width)!important; height:var(--garland-height)!important;
 min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important;
 box-sizing:content-box!important; margin:0!important; padding:0!important; border:0!important;
}
/* These are painted section cards, never scrolling regions. Release only their decorative edge:
   the old results rule otherwise clips every outward leaf/star to a one-pixel line. */
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent [data-premium-role].has-garland { overflow:visible!important }
/* The pager used to be rounded by its parent's clipping. Keep that shape while artwork can bleed. */
#mainContent .results.has-garland > [role="tabpanel"] { border-bottom-left-radius:inherit; border-bottom-right-radius:inherit }
#mainContent .results.has-garland .pager { border-bottom-left-radius:inherit; border-bottom-right-radius:inherit }

/* These themes draw their ornament here, so the old corner pictures stay off. */
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent [data-premium-decoration] { --premium-frame:none!important; --premium-companion:none!important }
/* Empty legacy frame boxes still extended 20px into the gutter after their pictures were removed. */
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent [data-premium-decoration]::after,
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent [data-premium-decoration][data-premium-companion]::before { display:none; content:none }
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent .premium-edge-art { display:none!important }

/* Pointer spotlight (after Magic UI's Magic Card): faint, and only on the card under the pointer. */
.garland-spot { opacity:0; transition:opacity .25s ease; mix-blend-mode:screen }
body[data-premium-lighting="true"] .garland-lit > .edge-garland .garland-spot { opacity:.55 }
.garland-spot-core { stop-color:var(--edition-light,#ffffff2e) }
.garland-spot-edge { stop-color:#fff; stop-opacity:0 }
.garland-glare { transform-box:fill-box; translate:-100% 0; opacity:0 }
body[data-premium-lighting="true"] .garland-lit > .edge-garland .garland-glare { translate:100% 0; opacity:1; transition:translate 1.1s cubic-bezier(.3,.6,.3,1), opacity .2s ease }
.garland-glare-core { stop-color:var(--edition-light,#ffffff2e) }
.garland-glare-edge { stop-color:#fff; stop-opacity:0 }

/* A small per-card animation budget is assigned in JS. Offscreen cards stop rather than running
   hundreds of tiny effects down a long profile page. A moving glint follows the actual motif. */
.garland-sway { animation:garland-sway 12s ease-in-out infinite alternate; transform-box:view-box }
.garland-twinkle { animation:garland-twinkle 8s ease-in-out infinite; transform-box:view-box }
.garland-shine { animation:garland-shine 12s ease-in-out infinite }
.garland-thread { animation:garland-thread 26s linear infinite; stroke-opacity:.65 }
body[data-premium-theme="botanical"] .garland-thread { animation-duration:32s; stroke-opacity:.45 }
[data-premium-role="accent"] > .edge-garland .garland-branch { opacity:.94 }
[data-premium-role="trim"] > .edge-garland .garland-branch { opacity:.84 }
/* The smaller counterpoint supports the principal artwork instead of repeating its emphasis. */
.edge-garland .garland-branch[data-placement="counterpoint"] { opacity:.74 }
.edge-garland :is(.garland-sway,.garland-twinkle,.garland-shine,.garland-thread) { animation-play-state:paused }
[data-garland-visible="true"] > .edge-garland :is(.garland-sway,.garland-twinkle,.garland-shine,.garland-thread) { animation-play-state:running }
@keyframes garland-sway { from { rotate:-3deg } to { rotate:3deg } }
@keyframes garland-twinkle { 0%,100% { opacity:1; scale:1 } 50% { opacity:.45; scale:.86 } }
@keyframes garland-shine { 0%,100% { opacity:.72 } 50% { opacity:1 } }
@keyframes garland-thread { from { stroke-dashoffset:190 } to { stroke-dashoffset:0 } }
html:is([data-motion="paused"],[data-idle="true"]) :is(.garland-sway,.garland-twinkle,.garland-shine,.garland-thread) { animation:none }
body[data-admin-open="true"] .edge-garland :is(.garland-sway,.garland-twinkle,.garland-shine,.garland-thread) { animation:none }
html:is([data-motion="paused"],[data-idle="true"]) .garland-glare { display:none }
@media (prefers-reduced-motion:reduce) {
 :is(.garland-sway,.garland-twinkle,.garland-shine,.garland-thread) { animation:none }
 .garland-glare { display:none }
 .garland-spot { transition:none }
}
@media (max-width:600px) {
 .edge-garland .garland-branch { opacity:.9 }
 .edge-garland .garland-sway { animation-duration:16s }
 .edge-garland .garland-thread { animation-duration:34s }
}
@media (forced-colors:active) { .edge-garland { display:none } }
@media print { .edge-garland { display:none } }

/* The single scene canvas paints atmosphere behind the interface throughout a page. Landmark
   effects still fade with the top vista in JS; independent ambient light remains in the margins. */
:root body[data-appearance="true"][data-premium-theme]:not([data-atlas-layout="classic"]):not([data-atlas-variant="basic"]) .scene-atmosphere {
 position:fixed; inset:0; height:100%; -webkit-mask-image:none; mask-image:none;
}
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"])::after { content:none }
@media (forced-colors:active) { .scene-atmosphere { display:none!important } }
@media print { .scene-atmosphere { display:none!important } }
/* The old gutter rails read as stray ticks next to the garlands. */
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent::before,
:root body[data-appearance="true"]:is([data-premium-theme="original"],[data-premium-theme="botanical"],[data-premium-theme="celestial"],[data-premium-theme="royal"],[data-premium-theme="ember"],[data-premium-theme="tidal"],[data-premium-theme="glacial"],[data-premium-theme="arcane"]) #mainContent::after { content:none }
/* Garlands on cards at the screen edge may reach past it; they are cut there instead of widening the page. */
html:has(.edge-garland),body:has(.edge-garland) { overflow-x:clip }

/* /theme-presentation.css */
/* Theme presentation only. Card geometry, navigation, typography and spacing belong to the
   existing shared interface. Classic remains the recovered 0.19.2 presentation. */

/* Basic and the undecorated fallback omit opening lights and ornamental brand motion.
   Atlas and the decorated environments opt in through their theme attribute. */
body:not([data-atlas-layout="classic"]):not([data-premium-theme]) .introduction-logo img {
 animation:none; filter:none;
}
body:not([data-atlas-layout="classic"]):not([data-premium-theme]) .community-feedback::before,
body:not([data-atlas-layout="classic"]):not([data-premium-theme]) .scene-atmosphere,
body:not([data-atlas-layout="classic"]):not([data-premium-theme])[data-workspace="introduction"]::before {
 display:none; animation:none;
}
body:not([data-atlas-layout="classic"]):not([data-premium-theme]) .community-feedback {
 animation:none; background:var(--panel); border-color:var(--line); box-shadow:none;
}

/* Basic omits scenery and full-size illustrations. Item, skill, pet and player icons carry
   information, so keep their real artwork instead of replacing it with generic symbols. */
body[data-atlas-variant="basic"] :is(.introduction-logo,.overview-character)>:is(img,canvas) { display:none!important }
:root body[data-appearance="true"][data-atlas-variant="basic"] .premium-name::before { display:none }
body[data-atlas-variant="basic"] .overview-character:not(:has(figcaption)) { display:none }
/* Without the skin illustration, keep useful rank and soul badges in a compact row instead
   of preserving the full-height character column. Other themes keep their shared geometry. */
:root body[data-atlas-variant="basic"] #profileOverview { grid-template-columns:minmax(0,1fr); grid-template-areas:"hero" "skills" "gear" }
:root body[data-atlas-variant="basic"] #mainContent #profileOverview.profile-overview>#profileHero.profile-hero { justify-self:start; align-self:start; min-height:0; padding:0; border:0; background:none; box-shadow:none }
/* With no rank or soul summary, this is an image-only area. Do not leave its grid track empty. */
:root body[data-atlas-variant="basic"] #profileOverview:not(:has(.overview-badges)) { grid-template-columns:minmax(0,1fr); grid-template-areas:"skills" "gear" }
:root body[data-atlas-variant="basic"] #profileOverview>#profileHero:not(:has(.overview-badges)) { display:none }
body[data-atlas-variant="basic"] :is(.game-image,.profile-monogram) {
 background-image:none; box-shadow:none;
}
/* When the character becomes a separate row, keep the skin clear of the frame. The
   desktop character column and Basic's compact badge row retain their own spacing. */
@media (max-width:1100px) {
 :root body:not([data-atlas-layout="classic"]):not([data-atlas-variant="basic"]) #mainContent #profileOverview>#profileHero { padding-block:var(--space-4) }
}

/* Profile wrappers only group cards, including while loading, empty or showing a failed lookup.
   Do not wait for .has-player: legacy material otherwise paints a slab behind the welcome state. */
:root body[data-appearance="true"]:not([data-atlas-layout="classic"]) #mainContent>.profile-shell:not(#atlas-none) {
 background:none; border-color:transparent; outline:none; box-shadow:none;
}
body:not([data-atlas-layout="classic"]) .profile-shell>.profile-welcome { border-color:transparent }
/* The island wrapper only groups cards. Legacy material must not paint a second panel behind them. */
:root body[data-appearance="true"][data-premium-theme]:not([data-atlas-layout="classic"]) #mainContent .profile-domain-classic .mining-main>.mining-main-box:not(#atlas-none) {
 background:none; box-shadow:none; outline:none; border-color:transparent;
}
/* Theme emblems occupy the margin, never the title's inline text box. */
body:not([data-atlas-layout="classic"])[data-premium-theme] #workspaceCrumb { position:relative }
body:not([data-atlas-layout="classic"])[data-premium-theme] #workspaceCrumb::before {
 position:absolute; right:calc(100% + var(--space-2)); top:50%; margin:0; transform:translateY(-50%); pointer-events:none;
}
@media (max-width:820px) {
 body:not([data-atlas-layout="classic"])[data-premium-theme] #workspaceCrumb::before { display:none }
}

/* One neutral material palette. Compositions vary the themed engraving and outer artwork, never the panel colours.
   Patterns are static paint, separate from geometry and from semantic/rarity colours. */
:root body {
 --surface-main:#181d26; --surface-outline:#465164; --surface-line:var(--surface-outline); --surface-inner:#141922; --surface-inner-line:#303a49;
 --surface-pattern:url("/decor/pattern-atlas.svg?v=4"); --surface-pattern-size:720px 480px;
 --surface-pattern-repeat:repeat; --surface-pattern-position:left top;
}
:root body[data-appearance="true"][data-premium-theme]:not(:where([data-premium-theme="basic"])) {
 --surface-main:var(--panel); --surface-outline:var(--line); --surface-inner:var(--input); --surface-inner-line:var(--line-soft);
 --theme-title:var(--text);
}
:root body[data-atlas-layout="classic"] {
 --surface-main:var(--panel); --surface-line:var(--line); --surface-inner:var(--input);
 --surface-inner-line:var(--line-soft); --surface-pattern:none;
}
:root body[data-atlas-variant="basic"] {
 --surface-main:#1a1d24; --surface-line:#343943; --surface-inner:#14171d; --surface-inner-line:#2d323b;
 --surface-pattern:none;
}
:root body[data-premium-theme="botanical"] {
 --surface-pattern:url("/decor/pattern-botanical.svg?v=5");
}
:root body[data-premium-theme="celestial"] {
 --surface-pattern:url("/decor/pattern-celestial.svg?v=4");
}
:root body[data-premium-theme="royal"] {
 --surface-pattern:url("/decor/pattern-royal.svg?v=5"); --surface-pattern-size:512px 352px;
}
:root body[data-premium-theme="ember"] {
 --surface-pattern:url("/decor/pattern-ember.svg?v=3");
}
:root body[data-premium-theme="tidal"] {
 --surface-pattern:url("/decor/pattern-tidal.svg?v=3");
}
:root body[data-premium-theme="glacial"] {
 --surface-pattern:url("/decor/pattern-glacial.svg?v=3");
}
:root body[data-premium-theme="arcane"] {
 --surface-pattern:url("/decor/pattern-arcane.svg?v=3");
}
:root body:not([data-atlas-layout="classic"]) {
 --card-bg:var(--surface-main); --card-line:var(--surface-line); --card-pattern:var(--surface-pattern);
 --tile-bg:var(--surface-inner); --tile-line:var(--surface-inner-line);
}
:root body[data-premium-theme][data-premium-texture="false"] { --surface-pattern:none }
:root body[data-premium-theme][data-premium-frame="false"] { --surface-line:color-mix(in srgb,var(--surface-outline) 60%,var(--surface-main)) }

/* Single, quiet perimeters. The explicit list matches real surfaces, not layout containers,
   table rows or controls. No widths, radii, positions or padding change here. */
:root body #mainContent :where(
 #profile-skills,#profileOutfit,#profileHero,.profile-bar,
 .mining-side-box,.mining-main>.domain-summary,.card-grouped-domain>.domain-summary,
 .mining-main-box>.domain-groups>:is(.domain-group,.domain-more),.mining-main-box>.garden-section,
 #profile-world-bestiary>.domain-summary,#profile-world-bestiary>.domain-groups>.domain-group,
 .hunter-fortune,.ci-panel,.ci-head>.ci-card,.dungeon-summary,.dungeon-track,.slayer-card,
 .museum-heading,.museum-card,.profile-nested,.networth-overview,.networth-panel,.profile-networth-list,
 .inventory-content,.storage-browser>.storage-groups,.gear-collection,.skill-gear-row,#profilePetGroups,
 .pet-collection-browser>.profile-filters,.museum-filters,.mining-main-box>.profile-filters,
 .profile-section-body>.profile-filters,.profile-section-body>.profile-mini-metrics,.profile-minion-family,
 .completion-summary,.completion-filters,.completion-list,.progression-next-card,
 .mw-toolbar,.mw-results,#mwSelectedHistory,.mw-history-picker,.mw-portfolio-form,
 .events-card,.events-day,.events-goal,.help-panel,.gw-article,.gh-section,
 #helpWorkspace .introduction-panel,.site-tour-entry,.introduction-guide-row,
 .money-controls .setup,.money-results-column>.results,#minionPanel>.results,.optimizer-panel,
 #introductionWorkspace .introduction-panel,#introductionWorkspace .introduction-tools,
 .admin-shell .panel
 ):not(#atlas-none):not(#atlas-surface-state):not(.is-checked,.is-community,.is-active,.is-own,.found,.is-missing,.is-target,.events-now:has(.is-ongoing)) {
 background:var(--surface-pattern) var(--surface-pattern-position,left top)/var(--surface-pattern-size) var(--surface-pattern-repeat,repeat) var(--surface-main);
 border-color:var(--surface-line); box-shadow:none;
}
/* These existing standalone cards are outside the shared layout selector above. Keep their
   dimensions and borders, but give them the same continuous material as the other panels. */
:root body[data-premium-theme] #mainContent :where(
 #profileGreenhouse>.domain-groups>.domain-group,
 .profile-domain-classic>.domain-groups>.domain-group:not(.domain-more),
 .milestone-record-grid>.milestone-record-card,.premium-gate-card
 ):not(#atlas-none):not(#atlas-surface-state):not(.is-checked,.is-community,.is-active,.is-own,.found,.is-missing,.is-target),
:root body[data-premium-theme][data-category="gathering"]:not([data-gather-view="rank"]) #mainContent .money-results-column>.stats:not(#atlas-none) {
 background:var(--surface-pattern) var(--surface-pattern-position,left top)/var(--surface-pattern-size) var(--surface-pattern-repeat,repeat) var(--surface-main);
 border-color:var(--surface-line); box-shadow:none;
}
/* Let the panel material continue through its footer; controls and dense data rows keep
   their own readable surfaces. No separately aligned pattern is painted on the footer. */
:root body[data-premium-theme] #mainContent :is(.money-results-column,#minionPanel)>.results .pager { background:none }
/* Seamless, full-surface engravings paired with eight distinct outer compositions.
   All cards retain the same base fill and perimeter. No extra panel or layout box is added. */
:root body[data-premium-theme="original"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-atlas-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="original"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-atlas-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="original"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-atlas-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="botanical"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-botanical-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="botanical"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-botanical-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="botanical"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-botanical-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="celestial"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-celestial-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="celestial"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-celestial-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="celestial"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-celestial-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="royal"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-royal-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="royal"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-royal-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="royal"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-royal-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="ember"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-ember-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="ember"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-ember-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="ember"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-ember-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="tidal"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-tidal-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="tidal"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-tidal-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="tidal"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-tidal-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="glacial"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-glacial-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="glacial"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-glacial-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="glacial"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-glacial-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="arcane"] #mainContent :is([data-premium-composition="1"],[data-premium-composition="5"]) { --surface-pattern:url("/decor/pattern-arcane-1.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="arcane"] #mainContent :is([data-premium-composition="2"],[data-premium-composition="6"]) { --surface-pattern:url("/decor/pattern-arcane-2.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme="arcane"] #mainContent :is([data-premium-composition="3"],[data-premium-composition="7"]) { --surface-pattern:url("/decor/pattern-arcane-3.svg?v=3"); --surface-pattern-size:900px 600px; --surface-pattern-repeat:repeat; --surface-pattern-position:left top }
:root body[data-premium-theme] #mainContent [data-premium-composition="4"] { --surface-pattern-position:-215px -137px }
:root body[data-premium-theme] #mainContent :is([data-premium-composition="5"],[data-premium-composition="7"]) { --surface-pattern-position:center center }
:root body[data-premium-theme][data-premium-texture="false"] #mainContent [data-premium-composition] { --surface-pattern:none }
/* Suppress decorative inset outlines without touching real keyboard focus rings. */
:root body #mainContent [data-premium-decoration]:not(#atlas-none):not(#atlas-surface-state):not(.events-now:has(.is-ongoing)) {
 --card-pattern:var(--surface-pattern); --premium-surface:var(--surface-main); --edition-card-surface:var(--surface-main);
 --edition-card-texture:none; --premium-shadow:none; --edition-rim:none;
 border-color:var(--surface-line); box-shadow:none;
}
:root body #mainContent [data-premium-decoration]:not(#atlas-none):not(#atlas-surface-state):not(:focus-visible) { outline:none }
:root body[data-premium-lighting="true"] #mainContent [data-premium-role]:focus-within:not(#atlas-none):not(#atlas-surface-state):not(.events-now:has(.is-ongoing)) {
 border-color:var(--theme-mark,var(--accent));
}
/* Dense secondary surfaces stay matte. Selection.css still owns selected-state styling. */
:root body #mainContent :is(.gear-set,.saved-loadout,.profile-pet,.crystal-card,.trophy-species,.bestiary-creature,.profile-minion-tier,.buy-tile,.build-step):not(#atlas-none):not(.is-active,.found,.is-missing,.is-target,.no-art,.sc-uncaught) {
 background:var(--surface-inner); box-shadow:none;
}
/* Dense rows share a quieter material. Preserve rarity, empty, unavailable and selected states. */
:root body:not([data-atlas-layout="classic"]) #mainContent :is(.profile-skill,.outfit-piece,.gear-set,.saved-loadout,.profile-pet,.trophy-species,.bestiary-creature,.profile-minion-tier,.buy-tile,.build-step):not(#atlas-none):not(.is-active,.is-selected,.found,.is-missing,.is-target,.no-art,.sc-uncaught,.is-empty,.is-unavailable) {
 background:var(--surface-inner); box-shadow:none;
}
:root body:not([data-atlas-layout="classic"]) #mainContent :is(.outfit-piece,.buy-tile,.build-step):not(#atlas-none):not(.is-active,.is-selected,.is-target,.is-empty,.is-unavailable) {
 border-color:var(--surface-inner-line);
}
/* Map cells remain legible above the engraved panel; their dashed/owned/barn states stay intact. */
:root body:not([data-atlas-layout="classic"]) #mainContent .garden-plot:not(.unlocked):not(#atlas-none) { background:var(--surface-inner) }
:root body #mainContent .mw-history-picker .mw-results:not(#atlas-none):not(#atlas-surface-state) { background:none; border-color:transparent; box-shadow:none }
:root body:not([data-atlas-layout="classic"]) #mainContent .mining-side-box .crystal-card:not(#atlas-none) { background:none }
@media (hover:hover) {
 :root body:not([data-atlas-layout="classic"]) #mainContent button.outfit-piece:not(#atlas-none):not(#atlas-surface-state):not(.is-empty,.is-unavailable):hover {
  border-color:var(--accent); background:var(--raised);
 }
 :root body #mainContent :is(button.profile-pet,.saved-loadout,.gear-set,button.completion-row,.bestiary-creature,.mw-item,button.events-goal,.profile-minion-family,.museum-card,.slayer-card):not(#atlas-none):not(#atlas-surface-state):not(.is-checked,.is-community,.is-missing,.is-active,.is-maxed,.is-selected):hover {
  border-color:var(--rarity,var(--tile-hover,var(--quiet))); background:var(--raised);
 }
}
/* Functional grouping rows are not surfaces, even if old theme selectors used to paint them. */
:root body:not([data-atlas-layout="classic"]) #mainContent :is(.garden-section,.domain-group,.bestiary-browser) :is(.domain-group,.bestiary-category,.profile-filters):not(#atlas-none) {
 background:none; box-shadow:none;
}
/* All seven progression pages group real summary, filter and item cards. Their canonical
   profile sections, category hosts and result grids are transparent, not another back panel.
   Preserve their existing padding, tracks, gaps and border space so only the paint changes. */
:root body:not([data-atlas-layout="classic"]) #mainContent #progressionWorkspace :is(
 .progression-panel,.profile-section,.profile-section-body,.completion-section,
 [data-progress-category-panel],[data-completion-panel],.completion-list,.profile-collection-grid,.profile-minion-grid
):not(#atlas-none):not(#atlas-surface-state) {
 background:none; border-color:transparent; box-shadow:none;
}
/* Owner, 21 Oct 2026: the item cards on every progression page sit on one bigger panel, painted
   like every other card (the theme's material and pattern). */
:root body:not([data-atlas-layout="classic"]) #mainContent #progressionWorkspace :is(.completion-list,.profile-collection-grid,.profile-minion-grid):not(#atlas-none):not(#atlas-surface-state) {
 background:var(--surface-pattern) var(--surface-pattern-position,left top)/var(--surface-pattern-size) var(--surface-pattern-repeat,repeat) var(--surface-main);
 border:1px solid var(--surface-line); border-radius:var(--card-radius); padding:var(--space-3);
}
:root body #mainContent #introductionWorkspace .introduction-help:not(#atlas-none) {
 background:none; border-color:transparent; outline:none; box-shadow:none;
}
:root body #mainContent #introductionWorkspace .introduction-help::before,
:root body #mainContent #introductionWorkspace .introduction-help::after { content:none; display:none }

/* Introduction is a concise directory. Keep all destinations and functional chevrons, with
   no art column or repeated descriptions. Only this requested page gets denser link rows. */
:root body:not([data-atlas-layout="classic"]) #mainContent #introductionWorkspace :is(.introduction-panel,.introduction-tools) nav :is(a,button) {
 grid-template-columns:minmax(0,1fr) 12px; min-height:44px;
}
:root body #introductionWorkspace .intro-tool-copy b { font-size:var(--text-sm); font-weight:550 }
:root body:not([data-atlas-layout="classic"]) #introductionWorkspace .intro-group-head h3 { color:var(--intro-color,var(--text)) }
:root body #introductionWorkspace .introduction-continue-player { padding-inline:var(--space-3); gap:var(--space-2) }
:root body #introductionWorkspace .introduction-continue-player small { color:var(--quiet); font-weight:400 }
:root body[data-atlas-layout="classic"] #introductionContinue:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-4) }
:root body[data-atlas-layout="classic"] .introduction-continue-label { color:var(--quiet); font-size:var(--text-sm) }
:root body:not([data-atlas-layout="classic"]) #introductionWorkspace .introduction-help>nav { margin-left:auto }
:root body:not([data-atlas-layout="classic"]) #introductionWorkspace .introduction-help nav a { padding-block:var(--space-2) }

@media (forced-colors:active) {
 :root body:is([data-premium-theme],[data-atlas-variant],[data-atlas-layout],body),
 :root body[data-appearance="true"][data-premium-theme] { --surface-main:Canvas; --surface-inner:Canvas; --surface-line:ButtonText; --surface-inner-line:ButtonText; --surface-pattern:none }
 :root body[data-premium-theme] #mainContent [data-premium-composition] { --surface-pattern:none }
}