/* lumi's website: lumi-ui's palette (Theme.h), system fonts. */
:root {
  --bg: #f3f4f7;
  --surface: #ffffff;
  --border: #e1e4ea;
  --text: #1b1f2a;
  --muted: #6b7280;
  --accent: #5b57e0;
  --accent-hover: #4c48cf;
  --good-bg: #ddf4e4; --good-fg: #176b35;
  --bad-bg: #fde4e2; --bad-fg: #a8231a;
  --warn-bg: #fef1c7; --warn-fg: #8a4b08;
  --neutral-bg: #eceef2; --neutral-fg: #4b5563;
  --hp: #e5484d; --mp: #3b82f6; --exp: #e8a317; --track: #eceef2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151a; --surface: #1d1f26; --border: #2c2f39; --text: #e6e7eb; --muted: #9aa0ab;
    --good-bg: #173b25; --good-fg: #8fe0a9; --bad-bg: #45201d; --bad-fg: #f5a39c;
    --warn-bg: #40300f; --warn-fg: #f3cf7a; --neutral-bg: #2a2d36; --neutral-fg: #c5c9d2; --track: #2a2d36;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .7rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.brand:hover { text-decoration: none; }
.logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); position: relative; }
.logo::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }

main { max-width: 1040px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.narrow { max-width: 420px; margin: 3rem auto; }
.narrow-form { max-width: 360px; }
.stack { display: flex; flex-direction: column; gap: .8rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.row-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.row-head h1, .row-head h2 { margin: 0; }
/* Long pages (a profile's settings, a client's page): a section at a time,
   picked from a row of buttons, each with an item's picture (app.js). On a
   phone the row scrolls sideways instead of wrapping. */
.tab-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.tab-bar .tab { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .8rem .2rem .3rem;
  background: var(--surface); color: var(--text); font-size: .9rem; white-space: nowrap; }
.tab-bar .tab:hover { border-color: var(--accent); }
.tab-bar .tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab-bar .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-icon { width: 32px; height: 32px; object-fit: contain; flex: none; }
.tabbed > [hidden] { display: none; }
@media (max-width: 640px) {
  .tab-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  .tab-bar .tab { flex: none; }
}
/* The home page: a section for each PC lumi-manager runs on. */
.pc { border-top: 1px solid var(--border); padding-top: .8rem; }
.pc:first-child { border-top: 0; padding-top: 0; }

label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .92rem; }
label.check { flex-direction: row; align-items: center; font-weight: 400; gap: .4rem; }
input, select { font: inherit; padding: .45rem .6rem; border: 1px solid #cfd4dc; border-radius: 6px;
  background: var(--surface); color: var(--text); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem 1.2rem; }
.field .label { font-weight: 600; }
.fields .wide { grid-column: 1 / -1; }
/* A heading over a group of a section's fields (field.Group). */
.fields .field-group { grid-column: 1 / -1; margin: .5rem 0 -.3rem; padding-top: .7rem; font-size: .95rem;
  border-top: 1px solid var(--border); }
.fields .field-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.help { font-weight: 400; color: var(--muted); font-size: .82rem; }

button, .button { font: inherit; font-weight: 600; padding: .45rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); display: inline-block; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-hover); }
button.secondary, .button.secondary { background: var(--surface); color: var(--text); }
button.secondary:hover, .button.secondary:hover { background: var(--bg); text-decoration: none; }
button.danger { color: var(--bad-fg); }
button:disabled { opacity: .45; cursor: default; }
.buttons { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.buttons.start { justify-content: flex-start; }

.alert { padding: .6rem .9rem; border-radius: 8px; }
.alert.good { background: var(--good-bg); color: var(--good-fg); }
.alert.bad { background: var(--bad-bg); color: var(--bad-fg); }
.alert.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--neutral-bg); color: var(--neutral-fg); }
.pill.good { background: var(--good-bg); color: var(--good-fg); }
.pill.bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
a.pill:hover { text-decoration: none; filter: brightness(.95); }
/* The game a profile is for: each its own colour (a profile is locked to one). */
.pill.game { background: var(--accent); color: #fff; vertical-align: middle; text-transform: uppercase; }
.pill.game.v62 { background: var(--warn-fg); color: var(--surface); }
.pill.game.unknown { background: var(--neutral-bg); color: var(--neutral-fg); text-transform: none; }

table.profiles { width: 100%; border-collapse: collapse; }
table.profiles th { text-align: left; font-size: .82rem; color: var(--muted); font-weight: 600; padding: .3rem .4rem; }
table.profiles td { padding: .5rem .4rem; border-top: 1px solid var(--border); }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * { margin-left: .3rem; }

.client h2 { margin-bottom: .1rem; }
.meter { display: grid; grid-template-columns: auto 1fr; font-size: .85rem; margin: .45rem 0; }
.meter .label { color: var(--muted); font-weight: 600; }
.meter .val { text-align: right; }
.meter .bar { grid-column: 1 / 3; height: 7px; background: var(--track); border-radius: 4px; overflow: hidden; margin-top: .15rem; }
.meter i { display: block; height: 100%; width: 0; border-radius: 4px; }
i.hp { background: var(--hp); } i.mp { background: var(--mp); } i.exp { background: var(--exp); }

pre.log { margin: 0; max-height: 30rem; overflow: auto; font: .82rem/1.45 ui-monospace, Consolas, monospace;
  white-space: pre-wrap; color: var(--muted); }

/* A phone: the profiles table's rows stack, their buttons under the name. */
@media (max-width: 600px) {
  main { padding: 1rem .75rem 2rem; }
  .card { padding: .9rem 1rem; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  table.profiles thead { display: none; }
  table.profiles tr { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--border); padding: .4rem 0; }
  table.profiles tr:first-child { border-top: 0; }
  table.profiles td { border-top: 0; padding: .2rem .2rem; }
  td.actions { grid-column: 1 / -1; text-align: left; white-space: normal; }
  td.actions > * { margin: 0 .3rem .3rem 0; }
}

[hidden] { display: none !important; }
.row-head .settings { margin-left: auto; }

/* A form on one row: a field (or a note) and its button. */
form.row { display: flex; align-items: flex-end; gap: .5rem .8rem; flex-wrap: wrap; margin: 0 0 1rem; }
form.row .field { flex: 0 1 360px; }
form.row .grow { flex: 1 1 260px; margin: 0; align-self: center; }
.card form.row { margin: 0; }

/* The settings' Loot section (app.js lootEditor): a search, the lists, and
   what the picked item is. */
.loot { display: flex; flex-direction: column; gap: .6rem; font-weight: 400; }
.loot-tools { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.loot-search { flex: 1 1 260px; }
.loot-presets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.loot-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.loot-lists h3:first-child { margin-top: 0; }
ul.loot-list { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto;
  border: 1px solid var(--border); border-radius: 8px; }
ul.loot-list li { display: flex; align-items: center; gap: .4rem; padding: .15rem .4rem; border-top: 1px solid var(--border); }
ul.loot-list li:first-child { border-top: 0; }
ul.loot-list li.muted { padding: .5rem .6rem; }
ul.loot-list li > button.secondary { padding: .2rem .6rem; font-size: .82rem; white-space: nowrap; }
button.loot-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto;
  column-gap: .6rem; align-items: center; text-align: left; background: none; border: 0; border-radius: 6px;
  padding: .25rem .3rem; font-weight: 400; color: var(--text); }
button.loot-row:hover { background: var(--bg); }
button.loot-row.selected { background: var(--neutral-bg); }
button.loot-row .icon { grid-row: 1 / 3; }
button.loot-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
img.icon { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
img.icon.big { width: 64px; height: 64px; }
.loot-info { border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; align-self: start; }
.loot-head { display: flex; gap: .8rem; align-items: center; }
.loot-head h2 { margin: 0; }
.loot-head p { margin: .1rem 0 0; }
.loot-flags { display: flex; flex-wrap: wrap; gap: .3rem; }
.loot-desc { white-space: pre-line; color: var(--muted); }
dl.loot-stats { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .1rem 1.2rem; margin: 0; font-size: .9rem; }
dl.loot-stats dt { color: var(--muted); }
dl.loot-stats dd { margin: 0; font-weight: 600; }
.loot-status { margin: 0; min-height: 1.4em; }
@media (max-width: 700px) {
  .loot-body { grid-template-columns: 1fr; }
}

/* A client's "Send it somewhere" (app.js): a search or the tree of maps,
   and the map picked. */
.map-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.map-search { flex: 1 1 260px; }
.map-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; align-items: start; }
.map-list { display: block; }
.map-list > p { margin: 0 0 .4rem; }
.map-tree, ul.map-found { max-height: 34rem; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
ul.map-found, ul.map-maps, ul.map-exits, ul.map-npcs { list-style: none; margin: 0; padding: 0; }
.map-tree summary { cursor: pointer; padding: .3rem .6rem; display: flex; gap: .5rem; align-items: baseline; }
.map-tree summary span:first-child { flex: 1; }
.map-tree summary:hover { background: var(--bg); }
.map-tree details.region > summary { font-weight: 600; border-top: 1px solid var(--border); }
.map-tree details.region:first-child > summary { border-top: 0; }
.map-tree details.area > summary { padding-left: 1.6rem; }
.map-tree ul.map-maps { padding-left: 1.6rem; }
button.map-row { width: 100%; display: flex; gap: .5rem; align-items: baseline; text-align: left; font-weight: 400;
  padding: .25rem .6rem; border: 0; border-radius: 6px; background: none; color: var(--text); }
button.map-row .name { flex: 1; min-width: 0; }
button.map-row:hover { background: var(--bg); }
button.map-row.selected { background: var(--neutral-bg); }
button.map-row.here .name::after { content: "  ● here"; color: var(--good-fg); font-size: .8rem; font-weight: 600; }
.map-info { border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; min-height: 8rem; }
.map-info.loading { opacity: .55; }
.map-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.map-head h3 { margin: 0; }
.map-head button { padding: .2rem .7rem; font-size: .85rem; }
.map-far { margin: .3rem 0 .5rem; min-height: 1.3em; }
.map-go { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.map-part h4 { margin: 1rem 0 .3rem; font-size: .92rem; }
.table-wrap { overflow-x: auto; }
table.map-mobs { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.map-mobs th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 600; padding: .2rem .4rem; }
table.map-mobs td { padding: .25rem .4rem; border-top: 1px solid var(--border); }
table.map-mobs .num { text-align: right; white-space: nowrap; }
table.map-mobs .pill { margin-left: .4rem; }
ul.map-npcs li { display: flex; flex-wrap: wrap; gap: 0 .6rem; align-items: baseline; padding: .15rem 0; }
ul.map-exits button.map-row { padding-left: .2rem; }
@media (max-width: 700px) {
  .map-body { grid-template-columns: 1fr; }
  .map-tree, ul.map-found { max-height: 20rem; }
}

/* The settings' SP and AP section (app.js buildEditor): a job's build,
   part by part, and the skill picked. */
.build { display: flex; flex-direction: column; gap: .6rem; font-weight: 400; }
.build-tools { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; }
.build-tools .label, .build-presets .label { font-weight: 600; }
.build-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.build-main.loading { opacity: .55; }
.build-main h3 { margin: .6rem 0 .2rem; }
.build-main h3:first-child { margin-top: 0; }
.build-main > p { margin: 0 0 .4rem; }
.build-part { border-top: 1px solid var(--border); padding: .5rem 0; }
.build-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.build-part-head h4 { margin: 0; font-size: .95rem; }
.build-part-head button { margin-left: auto; }
.build-part > p { margin: .3rem 0; }
ol.build-steps { margin: .3rem 0; padding-left: 1.6rem; }
ol.build-steps li { padding: .1rem 0; }
ol.build-steps li > * { vertical-align: middle; }
ol.build-steps li.warn::marker { color: var(--warn-fg); }
button.build-skill { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .4rem; border: 0;
  border-radius: 6px; background: none; color: var(--text); font-weight: 400; text-align: left; }
button.build-skill:hover { background: var(--bg); }
button.build-skill.selected { background: var(--neutral-bg); }
.build-to { color: var(--muted); font-size: .9rem; margin: 0 .3rem; }
.build input[type=number] { width: 4.6rem; padding: .2rem .4rem; }
.build select { padding: .25rem .4rem; }
.build-buttons { display: inline-flex; gap: .2rem; margin-left: .4rem; }
button.tiny { padding: .1rem .5rem; font-size: .82rem; font-weight: 600; border-radius: 6px; }
.build-warn { display: block; margin-left: 2.6rem; color: var(--warn-fg); font-size: .82rem; }
.build-add, li.build-rule { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
.build-add { margin: .3rem 0 0; }
.build-add select { max-width: 18rem; }
.build-left { justify-content: flex-start; margin: .4rem 0 0; }
.build-info { border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; position: sticky; top: .5rem; }
.build-head { display: flex; gap: .7rem; align-items: center; }
.build-head h3 { margin: 0; }
.build-head p { margin: .1rem 0 0; }
.build-status { margin: 0; min-height: 1.4em; }
@media (max-width: 700px) {
  .build-body { grid-template-columns: 1fr; }
  .build-info { position: static; }
  .build-part-head button { margin-left: 0; }
}

/* A client's chat (app.js): the game's chat log, coloured as the game
   colours it, and a line to say something in it. */
:root {
  --chat-whisper: #1a8a3c; --chat-party: #c2417f; --chat-buddy: #c25e00; --chat-guild: #7b52c7;
  --chat-alliance: #4a8f2a; --chat-notice: #2b6cb0; --chat-megaphone: #b0269a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --chat-whisper: #7ee29a; --chat-party: #ff99cc; --chat-buddy: #ffb366; --chat-guild: #c9a8ff;
    --chat-alliance: #b8f08a; --chat-notice: #8cc4ff; --chat-megaphone: #f59be6;
  }
}
.chat-show { margin-left: auto; padding: .25rem .4rem; }
.chat-earlier { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 0; }
.chat-lines { height: 22rem; overflow: auto; margin: .6rem 0; padding: .3rem .2rem; border: 1px solid var(--border);
  border-radius: 8px; font-size: .9rem; }
.chat-lines > p { margin: .4rem .5rem; }
.chat-line { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem;
  padding: .1rem .4rem; border-radius: 4px; }
.chat-line:hover { background: var(--bg); }
.chat-time { color: var(--muted); font: .78rem ui-monospace, Consolas, monospace; }
.chat-kind { font-size: .75rem; font-weight: 600; min-width: 4.5rem; }
.chat-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
/* Reply / Whisper: over the line's right end while it's pointed at (or
   focused); under it on a touch screen, which can't point. */
.chat-acts { display: none; position: absolute; right: .3rem; top: .05rem; gap: .25rem; background: var(--bg);
  padding-left: .4rem; }
.chat-line:hover .chat-acts, .chat-line:focus-within .chat-acts { display: inline-flex; }
.chat-acts button.tiny { padding: 0 .45rem; font-size: .75rem; }
@media (hover: none) {
  .chat-acts { display: inline-flex; position: static; background: none; padding: 0 0 .2rem 0; }
}
.chat-whisper { color: var(--chat-whisper); }
.chat-party { color: var(--chat-party); }
.chat-buddy { color: var(--chat-buddy); }
.chat-guild { color: var(--chat-guild); }
.chat-alliance, .chat-couple { color: var(--chat-alliance); }
.chat-notice, .chat-tip, .chat-game { color: var(--chat-notice); }
.chat-megaphone, .chat-gachapon { color: var(--chat-megaphone); }
.chat-system, .chat-admin, .chat-monster, .chat-expedition { color: var(--muted); }
.chat-say { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-say select { flex: 0 0 auto; }
.chat-target { flex: 0 1 9rem; width: 9rem; }
.chat-text-input { flex: 1 1 14rem; min-width: 0; }
#c-chat-said { margin: .3rem 0 0; min-height: 1.3em; }

/* The Selling section's equipment keep rules (app.js rulesEditor). */
/* The equipment kept from selling: a card a rule, what it keeps on top,
   the stats it needs a line each under it. */
.rules { display: grid; gap: .5rem; margin: .4rem 0; font-weight: 400; }
.rule { border: 1px solid var(--border); border-radius: 8px; padding: .55rem .75rem; background: var(--bg); }
.rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.rule-head .rule-remove { margin-left: auto; }
.rule-stats { list-style: none; margin: .45rem 0 0; padding: 0 0 0 2.2rem; display: grid; gap: .3rem; }
.rule-stats li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rule-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0 0 2.2rem; }
.rule select { padding: .25rem .4rem; }
.rule input[type=number] { width: 5.5rem; padding: .2rem .4rem; }
.rules-none { margin: .2rem 0; }
.rules-add { justify-content: flex-start; margin: .2rem 0; }
.rules-status { margin: 0; min-height: 1.3em; }

/* The Problems page */
.filters { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .9rem; }
.filters a.current { font-weight: 700; text-decoration: none; color: var(--text); }
td.nowrap { white-space: nowrap; }
h2.inline { display: inline; margin: 0; font-size: 1.05rem; }
details > summary { cursor: pointer; }
dl.report { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .2rem 1.2rem; margin: .8rem 0 0;
  font-size: .9rem; }
dl.report dt { color: var(--muted); }
dl.report dd { margin: 0; overflow-wrap: anywhere; }

/* A client's stats: EXP per day */
.chart { margin: .2rem 0 .8rem; }
svg.bars { width: 100%; height: 9rem; display: block; }
svg.bars .bar { fill: var(--exp); }
svg.bars .bar.none { fill: var(--track); }
svg.bars .axis { fill: var(--muted); font-size: 11px; text-anchor: middle; }

/* A client page's "In the game" card. */
.minimap { margin: .2rem 0 .3rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.minimap-svg { display: block; width: 100%; height: auto; max-height: 420px; }
.minimap-svg line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.minimap-svg .fh { stroke: var(--muted); stroke-width: 2px; }
.minimap-svg .rope { stroke: var(--exp); stroke-width: 2px; stroke-dasharray: 3 3; }
.minimap-svg .portal { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.minimap-svg .me { fill: var(--good-fg); stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.minimap-svg .mob { fill: var(--hp); }
.minimap-svg .mob.boss { stroke: var(--text); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.minimap-svg .player { fill: var(--mp); }
.minimap-svg .npc { fill: var(--exp); }
.minimap-svg .drop { fill: var(--warn-fg); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.dot.me { background: var(--good-fg); }
.dot.mob { background: var(--hp); }
.dot.player { background: var(--mp); }
.dot.npc { background: var(--exp); }
.dot.drop { background: var(--warn-fg); border-radius: 2px; }
.dot.portal { border: 2px solid var(--accent); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .2rem 1rem; margin: 0; }
.stat-grid > div { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--border); padding: .15rem 0; }
.stat-grid > div.wide { grid-column: 1 / -1; }
.stat-grid dt { color: var(--muted); font-size: .88rem; }
.stat-grid dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.near-list { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.near-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .15rem 0; border-top: 1px solid var(--border); }
.near-list li:first-child { border-top: 0; }
.near-list .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.items-box { margin-top: .6rem; }
.items-box > summary { font-weight: 600; }
.item-list { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.item-list li { display: flex; align-items: center; gap: .6rem; padding: .15rem 0; border-top: 1px solid var(--border); font-size: .92rem; }
.item-list li:first-child { border-top: 0; }
.item-list img, .item-list .noicon { width: 32px; height: 32px; flex: none; object-fit: contain; }
.item-list .noicon { border-radius: 6px; background: var(--track); }
.item-list .item-name { flex: 1; min-width: 0; }
.inv-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.inv-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* The Selling section's keep rules: one item's picker, and its search. */
.rule-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rule-item .icon { width: 32px; height: 32px; object-fit: contain; }
.rule-search { min-width: 14rem; }
ul.rule-found { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; flex-basis: 100%; }

/* The Free proxies page: each IP's working proxies, fastest first. */
table.proxies td:first-child { font-variant-numeric: tabular-nums; }
table.proxies td.actions { text-align: right; white-space: nowrap; }
/* Your proxies: the upload, and each row's profile to give it to. */
textarea { font: .9rem/1.4 ui-monospace, Consolas, monospace; padding: .45rem .6rem; border: 1px solid #cfd4dc;
  border-radius: 6px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; resize: vertical; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.own-upload { display: grid; gap: .8rem; }
.own-give select { padding: .2rem .4rem; max-width: 12rem; }
.own-login { margin: .2rem 0 .6rem; }
.own-login summary { cursor: pointer; color: var(--accent); }
.own-login-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.own-login-form input { padding: .25rem .5rem; max-width: 14rem; }
table.own-proxies td { vertical-align: top; }
.release h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.release h4 { font-size: .95rem; margin: .8rem 0 .3rem; color: var(--muted); }
.release ul { margin: .3rem 0; padding-left: 1.2rem; }
.release li { margin: .35rem 0; line-height: 1.45; }
.release code { font-size: .88em; }

/* The settings' Maple Island list: a tick a quest. */
details.quests-box { border: 1px solid var(--border); border-radius: 8px; padding: .45rem .75rem; margin-top: .3rem; }
details.quests-box > summary { font-weight: 600; }
details.quests-box[open] > summary { margin-bottom: .3rem; }
.quests-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .2rem; }
.quests-tools button { padding: .2rem .7rem; font-size: .82rem; }
h4.quests-group { margin: .7rem 0 .2rem; font-size: .85rem; }
ul.quests { list-style: none; margin: 0; padding: 0; columns: 3 12rem; column-gap: 1.2rem; font-size: .9rem; }
ul.quests li { break-inside: avoid; padding: .05rem 0; }
ul.quests label { display: flex; gap: .4rem; align-items: baseline; font-weight: normal; cursor: pointer; }
ul.quest-chains { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
ul.quest-chains li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; padding: .25rem 0;
  border-bottom: 1px solid var(--border); }
ul.quest-chains li:last-child { border-bottom: 0; }
ul.quest-chains label { display: inline-flex; gap: .35rem; align-items: baseline; font-weight: normal; cursor: pointer; }
/* MapleLegends' market list: a table per kind, scrolling in its box. */
.market-tools input[type="search"] { flex: 1 1 14rem; max-width: 22rem; }
.market-scroll { max-height: 34rem; overflow-y: auto; margin-top: .3rem; }
table.market-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
table.market-table td { vertical-align: middle; }
table.market-table .keep { width: 2.6rem; text-align: center; }
table.market-table .pic { width: 40px; padding-top: .1rem; padding-bottom: .1rem; }
table.market-table tbody tr:nth-child(even) td { background: var(--bg); }
table.market-table tbody tr:has(input:not(:checked)) td { opacity: .55; }
details.quests-cant { margin-top: .7rem; }
details.quests-cant ul { margin: .3rem 0 0; padding-left: 1.1rem; }