:root {
  --bg: #0b0d0f;
  --card: #15191d;
  --card-2: #1b2025;
  --line: rgba(255,255,255,.08);
  --txt: #e8ecef;
  --txt-2: rgba(232,236,239,.62);
  --accent: #60cdff;
  --ok: #7fcb95;
  --bad: #e8665f;
  --discord: #5865f2;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--txt);
  font: 15px/1.5 "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { width: 100%; max-width: 980px; margin: 0 auto; padding: 32px 16px 48px; flex: 1; display: grid; gap: 16px; align-content: start; }
footer { text-align: center; color: var(--txt-2); font-size: 12px; padding: 20px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #0e1114; }
/* The app's own wordmark: Oxanium, slanted, "entinel" right after the S. */
@font-face { font-family: "Oxanium"; src: url("/static/oxanium-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.brand { color: #fff; text-decoration: none; display: inline-flex; align-items: center; }
.brand img { width: 34px; height: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.brand-word { font-family: "Oxanium", "Segoe UI", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .08em;
  text-transform: uppercase; transform: skewX(-12deg); margin-left: -3px; position: relative; top: 3px; white-space: nowrap; }
.brand-word b { color: var(--ok); margin-left: .35em; }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.who img { border-radius: 50%; }
.who form { margin: 0; }
.link { background: none; border: 0; color: var(--txt-2); cursor: pointer; font: inherit; padding: 0; text-decoration: none; }
.link:hover { color: var(--txt); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.muted { color: var(--txt-2); }
.fine { color: var(--txt-2); font-size: 12.5px; margin: 12px 0 0; }
.pad { padding: 12px; }
.mono, code { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; }
code { background: var(--card-2); padding: 1px 6px; border-radius: 5px; }

.hero { max-width: 520px; margin: 48px auto 0; text-align: center; padding: 36px 28px; }
.hero .btn { margin-top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--card-2); color: var(--txt);
  font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: rgba(255,255,255,.2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.accent { background: var(--accent); color: #062536; border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.discord { background: var(--discord); border-color: transparent; color: #fff; padding: 11px 22px; }

.key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.key code { font-size: 20px; letter-spacing: .06em; padding: 10px 14px; background: #0f1316; border: 1px solid var(--line); border-radius: 8px; flex: 1; min-width: 260px; word-break: break-all; }

/* The dashboard: one centred column, the key card first and largest, then
   Download and the PC binding side by side. Short, so it sits in the middle
   of the window rather than hugging the top. */
main:has(> .dash) { align-content: center; }
.dash { width: 100%; max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.key-card { text-align: center; padding: 30px 28px 26px; }
.key-card h1 { margin: 10px 0 14px; }
.key-card .key { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 0; }
.key-card .key code { text-align: center; font-size: 22px; padding: 14px; min-width: 0; }
.key-btns { display: flex; justify-content: center; gap: 8px; }
.key-btns .btn { min-width: 84px; }
.key-card .fine { margin-top: 14px; }
.key-card > .btn { margin-top: 12px; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Equal heights, the buttons along the bottom of both. */
.dash-cols .card { display: flex; flex-direction: column; }
.dash-cols .card p { margin: 0 0 8px; }
.dash-cols .actions { margin-top: auto; padding-top: 14px; }

.pill { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.pill { color: var(--txt-2); background: var(--card-2); border: 1px solid var(--line); }
.pill.ok { color: var(--ok); background: rgba(108,203,95,.14); border-color: transparent; }
.pill.bad { color: var(--bad); background: rgba(232,102,95,.14); border-color: transparent; }

.notice { background: rgba(96,205,255,.1); border: 1px solid rgba(96,205,255,.3); color: var(--txt); padding: 10px 14px; border-radius: 10px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.actions form { margin: 0; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat b { display: block; font-size: 26px; }
.stat span { color: var(--txt-2); font-size: 13px; }

.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.roles .actions { flex-basis: 100%; }
.role { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); cursor: pointer; font-size: 13.5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #99aab5; }

.search { display: flex; gap: 8px; }
.search input { background: #0f1316; border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 240px; }

.table { margin-top: 12px; border-top: 1px solid var(--line); overflow-x: auto; }
.tr { display: grid; grid-template-columns: 1.3fr 2fr .9fr 1.2fr .7fr 2.4fr; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); min-width: 900px; font-size: 13.5px; }
.tr.th { color: var(--txt-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tr em { display: block; font-style: normal; color: var(--txt-2); font-size: 12px; }
.tr em.warn { color: #e8b35f; }
.audit .tr { grid-template-columns: 1.3fr 1.3fr 1fr 1.3fr 1fr; min-width: 700px; }
.row-acts form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .who span { display: none; }
  .key code { font-size: 15px; min-width: 0; letter-spacing: .03em; flex-basis: 100%; text-align: center; }
  .key-card .key code { font-size: 16px; }
  .dash-cols { grid-template-columns: 1fr; }
}

/* ── Header links ──────────────────────────────────────────────────── */
.bar-nav { display: flex; gap: 18px; margin-left: 28px; margin-right: auto; font-size: 14px; }
.bar-nav a { color: var(--txt-2); text-decoration: none; }
.bar-nav a:hover { color: var(--txt); }

/* ── Guide ─────────────────────────────────────────────────────────────
   Sections on the left, the page in the middle, its headings on the
   right. Wider than the rest of the site, which is a single column. */
/* The guide's accent is the app's blue. */
.guide { --g-accent: #60cdff; --g-accent-rgb: 96, 205, 255; }
main:has(> .guide) { max-width: 1480px; padding: 20px 20px 48px; }
.guide { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 40px; align-items: start; }
.g-main { min-width: 0; max-width: 880px; width: 100%; justify-self: center; }

/* The sidebar, drawn like the app's: a black panel with circuit traces at
   the top, section labels with a rule fading after them, the app's icons,
   and the selected page as a tinted pill with the accent bar at its left. */
.g-side {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 10px 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: #000;
  isolation: isolate; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.g-side::before {
  content: ''; position: absolute; left: 0; top: 0; width: 252px; height: 80px; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='80'%3E%3Cg fill='none' stroke='rgb(96,205,255)' stroke-opacity='.26' stroke-width='1'%3E%3Cpath d='M0 8 H120 L130 14 H170'/%3E%3Cpath d='M205 0 V20 L220 35 H252'/%3E%3Cpath d='M205 52 H232 L244 62'/%3E%3C/g%3E%3Cg fill='rgb(96,205,255)' fill-opacity='.5'%3E%3Ccircle cx='170' cy='14' r='2.4'/%3E%3Ccircle cx='220' cy='35' r='2.4'/%3E%3Ccircle cx='244' cy='62' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.g-side-head { display: block; padding: 6px 12px 10px; font-weight: 700; font-size: 16px; color: #fff; text-decoration: none; }
.g-navgroup { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.g-navgroup + .g-navgroup { border-top: 1px solid rgba(255,255,255,.07); padding-top: 6px; }
.g-label {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-accent);
}
.g-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--g-accent-rgb), .45), transparent); }
.g-item {
  position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px;
  border-radius: 10px; color: rgba(232,236,239,.62); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background .1s;
}
.g-item:hover { background: #0f0f0f; color: var(--txt); }
.g-ico { width: 19px; flex: none; display: grid; place-items: center; color: rgba(232,236,239,.62); }
.g-ico svg { width: 19px; height: 19px; }
.g-item-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-item.active { background: rgba(var(--g-accent-rgb), .16); color: #fff; font-weight: 600; }
.g-item.active .g-ico { color: var(--g-accent); }
.g-pip { position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--g-accent); transform: translateY(-50%); }
.g-item.active .g-pip { height: 18px; box-shadow: 0 0 8px rgba(var(--g-accent-rgb), .55); }

.g-search-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 10px; padding: 9px 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: #0b0d0f; color: rgba(232,236,239,.55);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.g-search-btn:hover { border-color: rgba(var(--g-accent-rgb), .45); color: var(--txt); }
.g-search-btn span { flex: 1; }
.guide kbd, .g-search kbd { font: 600 11px "Segoe UI", sans-serif; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.14); background: #15191d; color: rgba(232,236,239,.7); }

.g-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.g-toc-head { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); margin: 6px 0 10px; }
.g-toc a { display: block; padding: 4px 0 4px 12px; border-left: 1px solid var(--line); color: var(--txt-2); text-decoration: none; font-size: 13px; }
.g-toc a:hover { color: var(--txt); }
.g-toc a.on { color: var(--g-accent); border-left-color: var(--g-accent); }

.g-menu { display: none; }
.g-crumb { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-accent); }

/* Search: a window over the page, results as you type. */
.g-search { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.g-search[hidden] { display: none; }
.g-search-box { width: min(620px, 100%); border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: #111417; box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden; }
.g-search-box input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--txt); font: inherit; font-size: 16px; outline: none; }
.g-search-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.g-search-results a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: var(--txt); }
.g-search-results a span { font-size: 13px; color: var(--txt-2); line-height: 1.45; }
.g-search-results a.on, .g-search-results a:hover { background: rgba(var(--g-accent-rgb), .14); }
.g-search-results mark { background: rgba(var(--g-accent-rgb), .3); color: #fff; border-radius: 3px; padding: 0 2px; }
.g-search-none { padding: 14px; margin: 0; color: var(--txt-2); }
.g-search-foot { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--txt-2); }
.g-body { font-size: 15.5px; line-height: 1.7; }
.g-body h1 { font-size: 30px; line-height: 1.25; margin: 0 0 8px; }
.g-body h2 { font-size: 20px; margin: 38px 0 10px; padding-top: 6px; scroll-margin-top: 20px; }
.g-body p, .g-body ul, .g-body ol { margin: 0 0 14px; }
.g-body ul { padding-left: 20px; }
.g-body li { margin-bottom: 6px; }
.g-body a { color: var(--accent); text-decoration: none; }
.g-body a:hover { text-decoration: underline; }
.g-lead { font-size: 17px; color: var(--txt-2); margin-bottom: 22px !important; }
.ui { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); font-size: .9em; font-weight: 600; line-height: 1.6; white-space: nowrap; }

/* Screenshots sit in a frame like the app's own window. */
.shot { margin: 18px 0 22px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.shot figcaption { margin-top: 8px; font-size: 13px; color: var(--txt-2); }

/* Notes: green for a tip, blue for good-to-know, amber for take care. */
.callout { margin: 16px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid; font-size: 14.5px; line-height: 1.6; }
.callout.tip  { background: rgba(127,203,149,.08); border-color: rgba(127,203,149,.3); }
.callout.info { background: rgba(96,205,255,.07); border-color: rgba(96,205,255,.28); }
.callout.warn { background: rgba(232,179,95,.08); border-color: rgba(232,179,95,.32); }
.callout.danger { background: rgba(232,102,95,.09); border-color: rgba(232,102,95,.4); }
.callout.danger b:first-child { color: #ff8a84; }
.callout b { color: var(--txt); }

/* Numbered steps: the number in a disc beside each. */
.g-steps { list-style: none; counter-reset: step; padding: 0; }
.g-steps li { counter-increment: step; position: relative; padding-left: 40px; margin-bottom: 12px; }
.g-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #062536; background: var(--g-accent); }

.g-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14.5px; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.g-table th { width: 30%; white-space: nowrap; color: var(--txt); font-weight: 600; }
.g-table td { color: var(--txt-2); }
.g-code-list { list-style: none; padding-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }

/* The front page: a hero, the five-step path, and a tile per page. */
.g-hero { padding: 34px 32px; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 10px;
  background: radial-gradient(ellipse at 85% 0%, rgba(96,205,255,.18), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(96,205,255,.07), transparent 55%), var(--card); }
.g-hero h1 { font-size: 32px; max-width: 640px; }
.g-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-accent); }
.g-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.g-hero-cta .btn { text-decoration: none !important; }
.g-hero-cta .btn:not(.accent) { color: var(--txt); }

.g-path { list-style: none; counter-reset: path; padding: 0 !important; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.g-path li { counter-increment: path; margin: 0; }
.g-path a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt) !important; text-decoration: none !important; font-size: 14px; line-height: 1.4; transition: border-color .15s; }
.g-path a::before { content: counter(path); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #062536; background: var(--g-accent); margin-bottom: 4px; }
.g-path a:hover { border-color: rgba(96,205,255,.5); }
.g-path span { color: var(--txt-2); font-size: 13px; }

.g-minted { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-minted div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; border: 1px solid rgba(96,205,255,.22);
  background: linear-gradient(180deg, rgba(96,205,255,.07), transparent 70%), var(--card); line-height: 1.45; }
.g-minted b { font-size: 15px; }
.g-minted span { font-size: 13.5px; color: var(--txt-2); }

.g-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.g-tile { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt) !important; text-decoration: none !important; line-height: 1.4; transition: border-color .15s, transform .15s; }
.g-tile:hover { border-color: rgba(96,205,255,.45); transform: translateY(-1px); }
.g-tile b { font-size: 15px; }
.g-tile span { font-size: 13px; color: var(--txt-2); }
.g-tile .g-tile-group { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); }

.g-faq { border: 1px solid var(--line); border-radius: 10px; background: var(--card); margin-bottom: 8px; padding: 0 16px; }
.g-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.g-faq p { color: var(--txt-2); margin: 0 0 12px !important; }

.g-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.g-pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-decoration: none; }
.g-pager a:hover { border-color: rgba(96,205,255,.45); }
.g-pager span { font-size: 12px; color: var(--txt-2); }
.g-pager b { color: var(--txt); font-size: 15px; }
.g-next { text-align: right; grid-column: 2; }

@media (max-width: 1100px) {
  .guide { grid-template-columns: 220px minmax(0, 1fr); }
  .g-toc { display: none !important; }
}
@media (max-width: 800px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .g-side { display: none; position: relative; top: 0; max-height: none; margin-bottom: 16px; }
  .g-side.open { display: block; }
  .g-menu { display: block; width: 100%; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--card); color: var(--txt); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
  .g-path { grid-template-columns: 1fr 1fr; }
  .g-minted { grid-template-columns: 1fr; }
  .g-body h1, .g-hero h1 { font-size: 25px; }
  .g-hero { padding: 24px 20px; }
  .bar-nav { margin-left: 14px; }
}

/* ── Trending mints (admin) ─────────────────────────────────────────── */
main:has(> .mints) { max-width: 1680px; }
/* The list on the left (30%), the picked collection on the right; each
   scrolls on its own, so the details stay beside the list. */
.mints { display: grid; gap: 16px; }
.mt-split { grid-template-columns: minmax(500px, 42%) minmax(0, 1fr); align-items: start; }
.mt-list, .mt-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.mt-list { padding: 18px 14px 10px 16px; }
.mt-list .card-head h2 { margin-bottom: 8px; }
.seg.mt-tabs { margin-top: 12px; display: flex; }
.mt-tabs button { flex: 1; white-space: nowrap; }
.mt-empty { margin: 40px 0; text-align: center; }
@media (max-width: 1200px) {
  .mt-split { grid-template-columns: 1fr; }
  .mt-list, .mt-detail { position: static; max-height: none; }
}
.mt-status { margin: -6px 0 0; font-size: 13px; }
.mt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { background: var(--card-2); color: var(--txt-2); border: 0; padding: 6px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: #062536; font-weight: 600; }
.mt-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt-2); }
.mt-field[hidden] { display: none; }
.mt-field select { background: var(--card-2); color: var(--txt); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font: inherit; }
.mt-live { margin-left: auto; font-size: 12px; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.mt-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(127,203,149,.18); }
.mt-live.off { color: var(--bad); }

/* One collection in the list: picture, name and marks, a line of what
   matters, supply; mints and the sparkline on the right. */
.mt-rows { margin-top: 12px; border-top: 1px solid var(--line); }
.mt-item { display: grid; grid-template-columns: 18px 48px minmax(0, 1fr) 96px; gap: 14px; align-items: center;
  padding: 14px 12px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.mt-item .mt-thumb { width: 48px; height: 48px; }
.mt-rank { color: var(--txt-2); font-size: 11.5px; text-align: right; }
.mt-main { min-width: 0; }
.mt-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mt-line b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mt-line .pill, .mt-meta .pill { font-size: 10px; padding: 1px 6px; flex: none; }
.mt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--txt-2); }
.mt-sup { display: block; font-size: 11.5px; color: var(--txt-2); margin-top: 4px; }
/* The three things to know at a glance: price, minters in the window, limit. */
/* Fixed columns, so each figure sits under the one above it, row to row. */
.mt-stats { display: grid; grid-template-columns: 140px 96px minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.mt-stats > div { min-width: 0; }
.mt-stats span { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-2); white-space: nowrap; }
.mt-stats b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mt-stats b.free { color: var(--ok); }
.mt-stats b.wrap { white-space: normal; }
.mt-rising { font-style: normal; color: #c3a2ff; font-weight: 600; }
.mt-supply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 7px; }
.mt-supply .mt-sup { margin: 0; font-variant-numeric: tabular-nums; }
.mt-item .mt-bar { margin: 0; height: 6px; }
.mt-side { text-align: right; display: grid; justify-items: end; gap: 1px; }
.mt-side b { font-size: 15px; }
.mt-side em { font-style: normal; font-size: 11.5px; color: var(--txt-2); }
.mt-row.open { background: var(--card-2); box-shadow: inset 3px 0 0 var(--accent); }
.pill.mine { color: #c3a2ff; background: rgba(180,140,255,.15); border-color: transparent; }
.mt-why { font-size: 12.5px; color: #c3a2ff; }
.mt-dev { font-size: 12.5px; color: var(--bad); }
.mt-note.team { color: var(--bad); }
.mt-note.mining { color: #c3a2ff; }

/* Contract functions. */
.mt-fn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; }
.mt-detail .mt-fn-head h3 { margin: 0; }
.mt-fn-head .muted { font-size: 12.5px; }
.mt-fn-filter { margin-left: auto; background: #0f1316; border: 1px solid var(--line); color: var(--txt); border-radius: 7px; padding: 4px 9px; font: inherit; font-size: 13px; width: 170px; }
.mt-abi-msg { flex-basis: 100%; font-size: 12.5px; color: var(--txt-2); }
.mt-abi-msg:empty { display: none; }
.mt-fns { margin-top: 8px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
.mt-fn { display: grid; grid-template-columns: 96px minmax(0, 1fr) 70px 110px; gap: 10px; align-items: center; padding: 5px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.mt-fn:last-child { border-bottom: 0; }
.mt-fn[hidden] { display: none; }
.mt-sel { color: var(--txt-2); }
.mt-fname { overflow-wrap: anywhere; }
.mt-fn.unknown .mt-fname { color: var(--txt-2); font-style: italic; }
.mt-src { font-size: 11.5px; text-align: right; }
.mt-updated { color: var(--txt-2); font-variant-numeric: tabular-nums; }
.mt-updated.stale { color: #e8b35f; }

/* Pictures: the indexer's thumbnails; a letter tile until one is found. */
.mt-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; background: var(--card-2);
  border: 1px solid var(--line); display: inline-grid; place-items: center; }
.mt-thumb.huge { width: 84px; height: 84px; border-radius: 14px; }
.mt-thumb.ph { color: var(--txt-2); font-weight: 700; font-size: 17px; }
.mt-thumb.huge.ph { font-size: 30px; }
.mt-coll { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mt-coll > span, .mt-coll > div { min-width: 0; }
.mt-coll b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The track is lit and outlined so where the bar ends — the max supply —
   shows on any row, hovered and picked ones included. */
.mt-bar { display: block; width: 100%; height: 6px; margin-top: 5px; appearance: none; border: 0; border-radius: 3px;
  background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); overflow: hidden; }
.mt-bar::-webkit-progress-bar { background: rgba(255,255,255,.13); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.mt-bar::-webkit-progress-value { border-radius: 3px; }
/* Mint rules: the contract's limits, its price now, its price steps. */
.mt-rules h4 { margin: 14px 0 6px; font-size: 13px; }
.mt-ladder .tr { grid-template-columns: 1.4fr 1fr 1.3fr 1fr; font-size: 12.5px; min-width: 0; }
.mt-ladder .tr.now { background: rgba(127,203,149,.06); }
.mt-ladder em { font-style: normal; color: var(--txt-2); font-size: 11.5px; }
.mt-ladder-note { font-size: 12.5px; margin: 6px 0 0; }
.mt-rules dd em { font-style: normal; color: var(--txt-2); font-size: 11.5px; margin-left: 6px; }
.mt-hidden { font-size: 12.5px; margin-top: 8px; }
.mt-bar::-webkit-progress-value { background: var(--accent); }

/* Trending mints, three panes: the filters across the top, a compact list,
   and the collection in two columns — overview and setup, then activity. */
main:has(> .mtX) { max-width: 1760px; padding-top: 18px; }
.mtX { display: block; }
.mtX-bar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.mtX-title { margin-right: 6px; }
.mtX-title h2 { margin: 0; font-size: 17px; }
.mtX-title .mt-status { margin: 2px 0 0; font-size: 12px; }
.mtX-bar .seg.mt-tabs { margin: 0; display: inline-flex; }
.mtX-bar .mt-tabs button { flex: none; padding: 6px 16px; }
.mtX-bar .mt-live { margin-left: auto; }
.mtX-split { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.mtX .mt-list, .mtX .mt-detail { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; }
.mtX .mt-list { padding: 6px 0; }
.mtX .mt-rows { margin-top: 0; border-top: 0; }
.mtC-row.mt-item { grid-template-columns: 18px 40px minmax(0, 1fr) auto; gap: 10px; padding: 9px 14px; border-radius: 0; cursor: pointer; }
.mtC-row:hover { background: rgba(255,255,255,.025); }
.mtC-row.open { background: var(--card-2); box-shadow: inset 3px 0 0 var(--accent); }
.mtC-row .mt-thumb { width: 40px; height: 40px; border-radius: 10px; }
.mtC-main { min-width: 0; }
.mtC-main b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtC-sub { display: block; font-size: 11.5px; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mtC-sub .free { color: var(--ok); }
.mtC-row .mt-bar { height: 4px; margin-top: 5px; }
.mtC-side { text-align: right; }
.mtC-side b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.mtC-side em { font-size: 11px; font-style: normal; }
.mtX .mt-detail:has(> .mtC-ov) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.mtC-ov, .mtC-act { min-width: 0; }
.mtC-act { border-left: 1px solid var(--line); padding-left: 22px; }
.mtC-act > h3:first-child { margin-top: 4px; }
.mtX .mt-facts { grid-template-columns: repeat(3, 1fr); }
.mtX .mt-two { grid-template-columns: 1fr; }
/* Waiting on an answer nothing cached could stand in for. */
.mtX .loading { opacity: .55; transition: opacity .15s; }
@media (max-width: 1250px) {
  .mtX .mt-detail:has(> .mtC-ov) { grid-template-columns: minmax(0, 1fr); }
  .mtC-act { border-left: 0; padding-left: 0; }
}
.mt-bar::-moz-progress-bar { background: var(--accent); }
.mt-copy.done { color: var(--ok); }
.pill.info { color: var(--accent); background: rgba(96,205,255,.14); border-color: transparent; }
.mt-code { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 12.5px; background: #0f1316;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; word-break: break-all; }

/* The mint setup: the Contract task's fields, ready to copy. */
.mt-dhead { align-items: flex-start; }
.mt-dhead p { margin: 2px 0; }
.mt-dlinks .btn { margin: 4px 6px 0 0; }
.mt-setup { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.mt-setup.best { border-color: rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px rgba(0,0,0,.22); }
.mt-setup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mt-setup-head b { font-size: 15px; }
.mt-setup-head .muted { font-size: 12.5px; }
.mt-setup-head .accent { margin-left: auto; }
.mt-note { margin: 8px 0 10px; font-size: 13px; color: var(--txt-2); }
.mt-note.ready { color: var(--ok); }
.mt-note.check { color: #e8b35f; }
.mt-note.blocked { color: var(--bad); }
.mt-note.unknown { color: #e8b35f; }
.mt-fields { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; align-items: center; font-size: 13.5px; }
.mt-fields dt { color: var(--txt-2); }
.mt-fields dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mt-vnote { color: var(--txt-2); font-size: 12.5px; }
.mt-alt { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.mt-args { margin-top: 12px; }
.mt-args .tr { grid-template-columns: 26px 1.3fr 1.2fr 1.8fr 2.4fr; min-width: 0; font-size: 12.5px; }
.mt-val { word-break: break-all; }
.mt-sure { color: var(--ok) !important; }
.mt-row { cursor: pointer; }
.mt-row:hover, .mt-row.open { background: var(--card-2); }
.mt-row b { font-weight: 600; }
.mt-up { color: var(--ok) !important; }
.mt-down { color: var(--bad) !important; }
.mt-new { color: var(--accent) !important; }
.mt-spark rect { fill: var(--accent); opacity: .85; }
.pill.wl { color: #e8b35f; background: rgba(232,179,95,.14); border-color: transparent; }

.mt-detail h2 { margin-bottom: 4px; }
.mt-detail h3 { font-size: 14px; margin: 22px 0 6px; }
.mt-detail p .btn { margin-left: 6px; }
.mt-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 16px 0; }
.mt-facts div { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mt-facts b { display: block; font-size: 17px; }
.mt-facts span { color: var(--txt-2); font-size: 12px; }
.mt-chart { width: 100%; height: 120px; display: block; margin-top: 16px; }
.mt-chart rect { fill: var(--accent); }
.mt-chart text { fill: var(--txt-2); font-size: 11px; }
.mt-box { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px 10px; margin-top: 16px; }
.mt-box dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.mt-box dt { color: var(--txt-2); }
.mt-box dd { margin: 0; }
.mt-box dd em { color: var(--txt-2); font-style: normal; margin-left: 6px; }
.mt-phases .tr { grid-template-columns: 1fr 3fr 1.3fr .8fr .9fr .7fr 1fr; min-width: 0; }
.mt-phases .tr > span:nth-child(2) { overflow-wrap: anywhere; font-size: 12.5px; }
/* The detail is the narrower side below 1600px: facts in two rows, the
   latest mints and top minters one above the other. */
@media (max-width: 1600px) {
  .mt-facts { grid-template-columns: repeat(3, 1fr); }
  .mt-two { grid-template-columns: 1fr; }
}
.mt-two { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.mt-recent .tr { grid-template-columns: .9fr 3fr .35fr .7fr .8fr 1fr; min-width: 0; }
.mt-recent .tr > span:first-child { white-space: nowrap; }
.mt-top .tr { grid-template-columns: 1.7fr .6fr .5fr .5fr; min-width: 0; }
.mt-recent .pill, .mt-top .pill { font-size: 9.5px; padding: 0 5px; }
.mt-recent .tr > span:nth-child(2) { white-space: nowrap; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.mt-detail a { color: var(--accent); text-decoration: none; }
.mt-vias { font-size: 12.5px; color: var(--txt-2); line-height: 1.7; }
@media (max-width: 1100px) {
  .mt-facts { grid-template-columns: repeat(3, 1fr); }
  .mt-two { grid-template-columns: 1fr; }
}
.admin-links { margin: 0; display: flex; justify-content: flex-end; }