/* ==========================================================================
   TrainerStock — order page, order chat, owner admin desk
   ========================================================================== */

/* Status chips */
.ostat { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.ostat-gold { background: var(--gold-tint); color: var(--gold-ink); border: 1px solid var(--gold-line); }
.ostat-blue { background: var(--blue-tint); color: var(--blue-ink); border: 1px solid #BFE0FB; }
.ostat-green { background: var(--green-tint); color: var(--green-ink); border: 1px solid #BDE7D2; }
.ostat-red { background: var(--red-tint); color: var(--red-ink); border: 1px solid #F5C4C0; }

.copy-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--ink-2); vertical-align: middle; }
.copy-btn:hover { border-color: var(--ink); color: var(--ink); }
.unread { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; }

/* Buyer order page */
.opage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 14px; align-items: start; }
@media (min-width: 1000px) { .opage { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; } }
.opage-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.opage-main > *, .opage-side > *, .adm-detail > *, .adm-detail [data-adm-live] > * { min-width: 0; }
.opage-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1000px) { .opage-side { position: sticky; top: calc(var(--header-h) + 16px); } }

.ohead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 22px 22px 20px; border-radius: 18px; background: var(--navy); color: #fff; overflow: hidden; }
.ohead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(26, 140, 255, .35), transparent 70%); pointer-events: none; }
.ohead > * { position: relative; }
.ohead-green::before { background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(22, 178, 106, .4), transparent 70%); }
.ohead-gold::before { background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(227, 162, 26, .35), transparent 70%); }
.ohead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: #C3CFE0; }
.ohead-meta b { color: #fff; }
.ohead h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 44px); line-height: 1; margin-top: 10px; }
.ohead p { font-size: 17px; color: #D5DEEA; margin-top: 8px; max-width: 54ch; }
.ohead-mascot .mascot { width: 96px; height: auto; }
.ohead-mascot { padding: 8px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #E7F1FF 70%); }
@media (max-width: 559px) { .ohead { grid-template-columns: minmax(0, 1fr); } .ohead-mascot { display: none; } }

.otrack { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.otrack::-webkit-scrollbar { display: none; }
.otrack li { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); white-space: nowrap; }
.otrack li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: #fff; font-size: 13px; flex: none; }
.otrack li.is-done { color: var(--green-ink); }
.otrack li.is-done > span { background: var(--green); }
.otrack li.is-now { border-color: var(--blue); background: var(--blue-tint); color: var(--ink); box-shadow: 0 0 0 3px var(--blue-ring); }
.otrack li.is-now > span { background: var(--blue); }

.paybox { padding: 20px; border-radius: 16px; background: #fff; border: 2px solid var(--gold); box-shadow: 0 10px 24px -16px rgba(138, 88, 0, .5); }
.paybox.is-sent { border-color: var(--blue); }
.paybox h2 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.paybox-rows { display: grid; gap: 8px; margin: 14px 0; }
.paybox-rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.paybox-rows span { font-size: 14px; color: var(--muted); }
.paybox-rows b { font-family: var(--display); font-weight: 800; font-size: 21px; overflow-wrap: anywhere; }
@media (max-width: 479px) { .paybox-rows > div { grid-template-columns: minmax(0, 1fr) auto; } .paybox-rows span { grid-column: 1 / -1; } }
.paybox-note { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink-2); margin-bottom: 12px; }
.paybox-note svg { flex: none; margin-top: 3px; color: var(--muted); }
.paybox-done { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--blue-tint); color: var(--blue-ink); font-weight: 600; }

.keep-link { padding: 16px; border-radius: 14px; background: var(--green-tint); border: 1.5px solid #BDE7D2; }
.keep-link > b { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--green-ink); }
.keep-link p { font-size: 14.5px; color: var(--ink-2); margin: 6px 0 10px; }

/* Orders on this device */
.olist { display: grid; gap: 10px; }
.orow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color var(--t-fast), transform var(--t-fast); }
.orow:hover { border-color: var(--blue); transform: translateX(3px); }
.orow > div:first-child { display: grid; gap: 2px; min-width: 0; }
.orow b.mono { font-size: 19px; }
.orow span { font-size: 14.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow small { color: var(--muted); font-size: 13.5px; }
.orow-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.orow-right > b { font-family: var(--display); font-weight: 800; font-size: 20px; }
.orow-right .unread { min-width: 0; padding: 0 8px; }
.orow.has-new { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
.tickets-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }

/* Chat */
.chat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-1); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.chat-av { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; flex: none; }
.chat-av .brand-mark { width: 26px; height: 26px; }
.chat-head b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; }
.chat-head small { font-size: 13px; color: var(--muted); }
.chat-log { height: 380px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; background: linear-gradient(rgba(17, 26, 43, .025) 1px, transparent 1px) 0 0 / 24px 24px, #FBFBFA; }
@media (max-width: 559px) { .chat-log { height: 320px; } }
.chat-day { align-self: center; font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 6px 0 2px; }
.chat-sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 90%; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 13.5px; text-align: center; }
.chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.chat-who { font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--muted); margin: 0 0 2px 4px; }
.chat-bubble { padding: 10px 14px; border-radius: 16px; font-size: 15.5px; line-height: 1.4; overflow-wrap: anywhere; }
.is-mine .chat-bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.is-theirs .chat-bubble { background: #fff; border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }
.is-theirs.from-admin .chat-bubble { background: var(--navy); color: #fff; border-color: var(--navy); }
.chat-time { font-size: 13px; color: var(--faint); margin: 3px 6px 0; }
.chat-empty { margin: auto; display: grid; justify-items: center; gap: 6px; color: var(--muted); }
.chat-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px 0; border-top: 1px solid var(--line); }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; }
.chat-form textarea { flex: 1; min-height: 46px; max-height: 140px; resize: none; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); font-size: 15.5px; line-height: 1.35; background: #fff; }
.chat-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
.chat-form .btn { height: 46px; }
@media (max-width: 479px) { .chat-form .btn span { display: none; } .chat-form .btn { width: 46px; padding: 0; } }

/* Owner admin desk */
.adm-login { max-width: 420px; margin: 40px auto; display: grid; gap: 14px; justify-items: stretch; text-align: left; }
.adm-login .mascot { justify-self: center; }
.adm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 22px 0 16px; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1000px) { .adm-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 22px; } }
.adm-list { display: grid; gap: 10px; }
@media (min-width: 1000px) { .adm-list { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; padding-right: 4px; } }
.adm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-filters button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.adm-filters button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.adm-filters span:empty { display: none; }
.adm-filters span { font-size: 13px; opacity: .75; }
.adm-row { width: 100%; text-align: left; display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); transition: border-color var(--t-fast); }
.adm-row:hover { border-color: var(--line-strong); }
.adm-row.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
.adm-row-top { display: flex; align-items: center; gap: 8px; }
.adm-row-top b { font-size: 18px; }
.adm-row-total { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 18px; }
.adm-row-items { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-row-bot small { color: var(--muted); font-size: 13.5px; }
.adm-empty, .adm-pick { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: 16px; }
.adm-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.adm-detail [data-adm-live] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.adm-dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.adm-dhead h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; margin-top: 4px; }
.adm-total { font-family: var(--display); font-weight: 800; font-size: 32px; }
.aaction { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px; border-radius: 16px; background: #fff; border: 2px solid var(--line-2); }
.aaction.is-hot { border-color: var(--gold); background: var(--gold-tint); }
.aaction.is-done { border-style: dashed; }
.aaction b { font-family: var(--display); font-weight: 800; font-size: 21px; }
.aaction p { font-size: 15px; color: var(--ink-2); margin-top: 3px; }
.adm-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .adm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
.adm-set .select { width: auto; }
.adm .kv dd { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }

/* Desk sections (Orders / Tickets) */
.adm-views { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 2px solid var(--line); }
.adm-views a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--muted); }
.adm-views a:hover { color: var(--ink); }
.adm-views a.is-on { color: var(--ink); border-bottom-color: var(--blue); }
.adm-views span:empty { display: none; }

/* 2-step verification screens */
.adm-2fa { max-width: 460px; }
.twofa-icon { justify-self: center; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--green); color: #fff; box-shadow: 0 10px 24px -10px rgba(10, 122, 71, .6); }
.adm-2fa .page-title, .adm-2fa > .muted { text-align: center; }
.twofa-steps { display: grid; gap: 14px; counter-reset: tf; }
.twofa-steps li { counter-increment: tf; position: relative; padding: 14px 14px 14px 52px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; gap: 4px; }
.twofa-steps li::before { content: counter(tf); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 800; font-size: 14px; }
.twofa-steps b { font-family: var(--display); font-weight: 800; font-size: 18px; }
.twofa-steps span { font-size: 14.5px; color: var(--ink-2); }
.twofa-qr { margin-top: 10px; display: flex; justify-content: center; padding: 12px; border-radius: 12px; background: #fff; border: 1px dashed var(--line-2); }
.twofa-qr img { width: 180px; height: 180px; }
.twofa-manual { font-size: 13.5px; margin-top: 6px; }
.twofa-manual summary { cursor: pointer; color: var(--blue-ink); font-weight: 600; }
.twofa-manual code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-family: ui-monospace, Consolas, monospace; font-size: 14px; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all; }
.twofa-input { margin-top: 8px; height: 58px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: .2em; }
.keep-link p b { font-weight: 700; color: var(--ink); }
.keep-link p + p { margin-top: -4px; }

/* ---------- Support: instant answers while typing ---------- */
.quick-answers { border: 1.5px solid var(--blue); border-radius: 14px; background: var(--blue-tint); padding: 12px 14px; display: grid; gap: 8px; animation: qa-in .25s ease-out; }
.quick-answers-head { display: flex; align-items: center; gap: 10px; }
.quick-answers-head .mascot { width: 34px; height: auto; flex: none; }
.quick-answers-head span { display: grid; font-size: 13.5px; color: var(--ink-2); }
.quick-answers-head b { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); }
.quick-answers details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.quick-answers summary { cursor: pointer; padding: 10px 0; font-family: var(--display); font-weight: 700; font-size: 16.5px; }
.quick-answers details p { font-size: 15px; color: var(--ink-2); margin-bottom: 10px; }
.quick-answers details .btn { margin-bottom: 12px; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .quick-answers { animation: none; } }

/* ---------- Checkout shortcuts ---------- */
.welcome-back { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--green-tint); border: 1px solid var(--line); font-size: 15px; }
.welcome-back .mascot { width: 40px; height: auto; flex: none; }
.welcome-back span { flex: 1 1 200px; }
.welcome-back .link { font-size: 14px; }
.tc-wrap { display: flex; gap: 8px; }
.tc-wrap .input { flex: 1; min-width: 0; }
.tc-wrap .tc-paste { flex: none; align-self: stretch; height: auto; }
.co-agree { font-size: 13.5px; color: var(--muted); }

/* ---------- Owner desk: listing editor ---------- */
.le-new { display: flex; gap: 8px; }
.le-new .btn { flex: 1; }
.le-samples { margin-top: 6px; }
.le-row { grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; }
.le-thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--slot); display: grid; place-items: center; overflow: hidden; }
.le-thumb img { width: 46px; height: 46px; object-fit: contain; }
.le-thumb.is-file { background: var(--navy); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 14px; }
.le-row-main { display: grid; gap: 6px; min-width: 0; }
.le-row-main .adm-row-top b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.le-form { display: grid; gap: 14px; }
.le-sec { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.le-sec h3 { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1; }
.le-sec > .field-hint { margin-top: -6px; }
.co-grid-3, .co-grid-4 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 900px) { .co-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .co-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.le-species { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; }
.le-preview { width: 110px; height: 110px; border-radius: 14px; background: var(--slot); display: grid; place-items: center; color: var(--faint); overflow: hidden; }
.le-preview img { width: 100px; height: 100px; object-fit: contain; }
.le-title { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink-2); }
.le-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.le-check small { display: block; font-size: 13.5px; color: var(--muted); }
.le-status-hint { display: block; min-height: 2.6em; }
.le-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.le-photo { position: relative; display: grid; gap: 6px; }
.le-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--slot); }
.le-photos.is-shots .le-photo img { aspect-ratio: 9 / 16; object-fit: contain; }
.le-photo .input { min-height: 34px; font-size: 13px; padding: 0 8px; }
.le-photo .icon-btn { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: rgba(255, 255, 255, .92); box-shadow: var(--sh-1); }
.le-upload { justify-self: start; cursor: pointer; }
.le-upload.is-busy { opacity: .6; pointer-events: none; }
.le-upload.is-busy::after { content: "Uploading…"; margin-left: 4px; }
.le-mons { display: grid; gap: 10px; }
.le-mon { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: var(--surface-2); }
.le-mon-main { display: grid; grid-template-columns: minmax(0, 1fr) 76px 84px 32px; gap: 8px; align-items: end; }
.le-mon-x { align-self: end; margin-bottom: 6px; }
.le-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--blue-ink); }
.le-more[open] summary { margin-bottom: 10px; }
.le-ivs { display: grid; grid-template-columns: repeat(3, minmax(0, 64px)) minmax(0, 1fr); gap: 8px; align-items: end; margin-top: 10px; }
.le-ivs .label { grid-column: 1 / -1; }
/* Save bar: a solid bar pinned to the bottom of the screen the whole time you're editing. */
.le-actions { position: sticky; bottom: 10px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface, #fff); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 -2px 0 rgba(17, 26, 43, .02), 0 14px 34px -10px rgba(17, 26, 43, .35); }
.le-actions .field-error { flex-basis: 100%; margin: 0; }
.le-actions .field-error:empty { display: none; }
.le-actions .btn-primary { min-width: 190px; }
.le-delete { margin-left: auto; color: var(--red-ink); }
.le-kbd { font-size: 12px; color: var(--muted); }
@media (max-width: 899px) {
  .le-actions { bottom: calc(var(--mnav-h) + 8px + env(safe-area-inset-bottom)); }
  .le-actions .btn-primary { flex: 1 1 100%; }
  .le-kbd { display: none; }
}
@media (max-width: 520px) { .le-mon-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; } .le-mon-main .field:first-child { grid-column: 1 / -1; } }

/* ---------- Reviews (public) ---------- */
.stars { display: inline-flex; gap: 1px; color: var(--line-strong); vertical-align: middle; }
.stars .is-on { color: var(--gold); }
.stars .is-on svg path { fill: currentColor; }
.review-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
@media (min-width: 760px) { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review-list.is-home { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review-body { font-size: 16px; color: var(--ink); line-height: 1.5; }
.review-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.review-by b { font-family: var(--display); font-weight: 800; font-size: 17px; }
.review-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.review-tag.is-verified { color: var(--green-ink); }
.review-item { font-size: 13px; color: var(--muted); }
.review-item::before { content: "· "; }
.review-reply { border-left: 3px solid var(--blue); background: var(--blue-tint); border-radius: 0 10px 10px 0; padding: 8px 12px; font-size: 14.5px; }
.review-reply b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--blue-ink); margin-bottom: 2px; }
.review-reply .mascot { width: 22px; height: auto; }

.proof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.proof-stat { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.proof-stat b { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof-stat b small { font-size: 18px; color: var(--muted); }
.proof-stat span { font-size: 14px; color: var(--ink-2); }
.proof-stat .proof-star { position: absolute; top: 12px; right: 12px; color: var(--gold); }
.proof-stat .proof-star svg path { fill: currentColor; }
.proof-home { margin-top: 26px; }
.proof-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 16px; }
.proof-line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.proof-line:hover { color: var(--ink); }
.proof-line b { color: var(--ink); }
.proof-line-star { color: var(--gold); display: inline-flex; }
.proof-line-star svg path { fill: currentColor; }
[data-proof="line"]:empty { display: none; }

.rating-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
@media (min-width: 640px) { .rating-box { grid-template-columns: 180px minmax(0, 1fr); } }
.rating-big { display: grid; justify-items: start; gap: 4px; }
.rating-big b { font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 1; }
.rating-big span { font-size: 14px; color: var(--muted); }
.rb { display: grid; gap: 6px; }
.rb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 14px; }
.rb-row > span { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); }
.rb-row b { text-align: right; font-variant-numeric: tabular-nums; }
.rb-bar { height: 10px; border-radius: 4px; background: var(--slot); overflow: hidden; }
.rb-bar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; }

.review-box { background: #fff; border: 1.5px solid var(--gold-line); border-radius: 18px; padding: 18px; display: grid; gap: 14px; }
.review-box.is-done { border-color: var(--line); }
.review-box h2 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; }
.review-box-head { display: flex; align-items: center; gap: 12px; }
.review-box-head .mascot { width: 56px; height: auto; flex: none; }
.review-box-head p { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.star-pick { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-pick label { cursor: pointer; color: var(--line-strong); padding: 2px; border-radius: 8px; }
.star-pick label:has(input:focus-visible) { outline: 2px solid var(--blue); }
/* The picked star and every star to its left light up (row-reverse: those are the later siblings). */
.star-pick label:has(input:checked), .star-pick label:has(input:checked) ~ label,
.star-pick label:hover, .star-pick label:hover ~ label { color: var(--gold); }
.star-pick label:has(input:checked) svg path, .star-pick label:has(input:checked) ~ label svg path,
.star-pick label:hover svg path, .star-pick label:hover ~ label svg path { fill: currentColor; }

/* ---------- Desk: Stats ---------- */
.dk { display: grid; gap: 16px; }
.dk-loading { display: grid; justify-items: center; gap: 8px; padding: 40px; color: var(--muted); }
.dk-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .dk-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dk-kpis.is-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.dk-tile.is-hot { border-color: var(--gold-line); background: var(--gold-tint); }
.dk-tile > span { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dk-tile b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dk-kpis.is-small .dk-tile b { font-size: 26px; }
.dk-tile small { font-size: 13px; color: var(--ink-2); }
.dk-up { color: var(--green-ink); font-weight: 700; }
.dk-down { color: var(--red-ink); font-weight: 700; }
.dk-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .dk-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dk-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.dk-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.dk-card h3 { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1; }
.dk-card-head .muted { font-size: 13px; }

.dk-chart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; height: 220px; padding-top: 18px; }
.dk-grid { display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; color: var(--muted); text-align: right; padding-bottom: 22px; font-variant-numeric: tabular-nums; }
.dk-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; align-items: end; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 50%; margin-bottom: 22px; }
.dk-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.dk-col i { display: block; width: min(70%, 34px); background: color-mix(in srgb, var(--blue) 45%, #fff); border-radius: 4px 4px 0 0; transition: background var(--t-fast); }
.dk-col i.is-now { background: var(--blue); }
.dk-col:hover i, .dk-col:focus-visible i { background: var(--blue-ink); }
.dk-col:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-ring); border-radius: 6px; }
.dk-col small { position: absolute; bottom: -20px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.dk-col em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; white-space: nowrap; }
.dk-tip { position: absolute; top: 0; transform: translateX(-50%); z-index: 3; pointer-events: none; display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: var(--sh-2); text-align: center; white-space: nowrap; }
.dk-tip span { font-size: 13px; color: #C3CFE0; }
.dk-tip b { font-family: var(--display); font-weight: 800; font-size: 20px; }
.dk-tip small { font-size: 13px; color: #C3CFE0; }
.dk-table summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--blue-ink); }
.dk-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.dk-table th, .dk-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.dk-table td:not(:first-child), .dk-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

.dk-seg { display: inline-flex; background: var(--slot); border-radius: 999px; padding: 3px; }
.dk-seg button { height: 30px; padding: 0 12px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.dk-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.dk-best { display: grid; gap: 10px; }
.dk-best li { display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dk-rank { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--muted); text-align: center; }
.dk-best-main { display: grid; gap: 6px; min-width: 0; }
.dk-best-main b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-meter { height: 8px; border-radius: 4px; background: var(--slot); overflow: hidden; }
.dk-meter i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.dk-best-num { display: grid; justify-items: end; }
.dk-best-num b { font-family: var(--display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.dk-best-num small { font-size: 13.5px; color: var(--muted); }
.dk-preview { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 14px; padding: 4px 12px 12px; }
.dk-custom { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; margin-top: 6px; }

/* Home: no accounts for sale yet */
.acct-soon { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #C3CFE0; }
.acct-soon b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; }
.acct-soon .link { color: #8FD0FF; }
.acct-soon .mascot { width: 80px; height: auto; flex: none; }

/* ---------- Owner mode reminder ---------- */
.owner-pill { position: fixed; left: 16px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; background: #FFD166; color: #3A2A00; box-shadow: 0 6px 20px rgba(21, 32, 45, .22); font-size: 14px; animation: owner-in .3s ease-out; }
.owner-pill b { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.owner-pill a, .owner-pill button { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: 13.5px; }
.owner-pill a { background: #3A2A00; color: #FFD166; }
.owner-pill button { color: #3A2A00; }
.owner-pill button:hover { background: rgba(58, 42, 0, .1); }
.owner-dot { width: 10px; height: 10px; border-radius: 50%; background: #0A7A47; box-shadow: 0 0 0 3px rgba(10, 122, 71, .25); }
@keyframes owner-in { from { transform: translateY(12px); opacity: 0; } }
@media (max-width: 899px) { .owner-pill { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); animation: none; } }
@media (prefers-reduced-motion: reduce) { .owner-pill { animation: none; } }

/* ---------- Scannable copy ---------- */
.hero-facts { display: grid; gap: 8px; margin: 14px 0 4px; }
.hero-facts li { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink-2); }
.hero-facts svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--green-tint); color: var(--green-ink); }
.hero-facts b, .band-head p b, .chapter-head p b, .field-hint b, .note-box b, .home-p b, .anat-list p b, .hw-need b, .keep-link p b { color: var(--ink); font-weight: 700; }
.chapter-head p b { color: #fff; }

/* ---------- Desk: easier to get around ---------- */
/* Tabs: one swipeable row */
.adm-views { overflow-x: auto; scrollbar-width: none; gap: 4px; padding-top: 4px; }
.adm-views::-webkit-scrollbar { display: none; }
.adm-views a { flex: none; white-space: nowrap; font-size: 17px; padding: 10px 14px 12px; }
.adm-views a .unread { margin-left: 2px; }
.adm-top { padding: 16px 0 10px; }
.adm-top .page-title { font-size: clamp(30px, 5vw, 44px); }

/* Back button (phones only) */
.adm-back { display: none; align-items: center; gap: 6px; justify-self: start; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line-2); font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
@media (max-width: 999px) {
  .adm-back { display: inline-flex; }
  .adm-grid.is-open .adm-list { display: none; }
  .adm-grid:not(.is-open) .adm-detail { display: none; }
}

/* Today */
.td { display: grid; gap: 16px; }
.td-hello { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.td-hello .mascot { width: 72px; height: auto; flex: none; }
.td-hello > div:nth-child(2) { flex: 1 1 220px; }
.td-hello h2 { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; }
.td-hello p { font-size: 17px; color: var(--ink-2); margin-top: 4px; }
.td-hello p b { color: var(--ink); }
.td-week { display: grid; justify-items: end; padding: 10px 14px; border-radius: 14px; background: var(--slot); }
.td-week span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.td-week b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.td-week small { font-size: 13px; color: var(--ink-2); }
.td-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .td-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.td-card { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1.5px dashed var(--line-2); color: var(--muted); }
.td-card.is-on { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
.td-card.is-hot { background: var(--gold-tint); border: 2px solid var(--gold); color: var(--ink); }
.td-head { display: flex; align-items: center; gap: 12px; }
.td-icon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--slot); color: var(--muted); }
.td-card.is-on .td-icon { background: var(--blue-tint); color: var(--blue-ink); }
.td-card.is-hot .td-icon { background: var(--gold); color: #fff; }
.td-head b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; }
.td-head small { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.td-list { display: grid; gap: 6px; }
.td-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; }
.td-list a:hover { border-color: var(--blue); }
.td-list .mono { font-weight: 700; font-size: 13px; color: var(--ink); }
.td-list a > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.td-list svg { color: var(--faint); }
.td-all { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.td-sub { font-family: var(--display); font-weight: 800; font-size: 22px; margin-top: 6px; }
.td-actions { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .td-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.td-act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--line); transition: border-color var(--t-fast), transform var(--t-fast); }
.td-act:hover { border-color: var(--blue); transform: translateY(-2px); }
.td-act svg { color: var(--blue-ink); }
.td-act b { font-family: var(--display); font-weight: 800; font-size: 18px; }

/* Leave room so the owner pill never covers the end of a page */
body.is-owner main { padding-bottom: 72px; }
.owner-pill, .owner-pill * { white-space: nowrap; }
@media (max-width: 899px) { .owner-pill { height: 40px; gap: 6px; padding-left: 12px; font-size: 13px; } .owner-pill b { font-size: 14.5px; } .owner-pill a, .owner-pill button { height: 30px; padding: 0 10px; font-size: 13px; } }
.hero-facts { font-family: var(--font); font-weight: 500; }
.hero-facts li { border: 0; padding: 0; margin: 0; }
.hero-facts b { font-size: inherit; font-weight: 800; }
.rv-anon { align-items: flex-start; }
.rv-anon small { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.review-box .input:disabled { opacity: .5; }
.rv-verify { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--green-tint); align-items: flex-start; }
.rv-verify svg { color: var(--green-ink); vertical-align: -2px; }
.rv-ok { display: inline-flex; align-items: center; gap: 3px; color: var(--green-ink); }

/* ---------- Less clutter ---------- */
.calc-toggle { margin-top: 18px; }
.calc-toggle > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line-2); font-family: var(--display); font-weight: 800; font-size: 17px; cursor: pointer; }
.calc-toggle > summary::-webkit-details-marker { display: none; }
.calc-toggle > summary:hover { border-color: var(--ink); }
.calc-toggle[open] > summary { background: var(--ink); color: #fff; border-color: var(--ink); }
.calc-toggle .calc-wrap { margin-top: 14px; }
.faq-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 16px; }
/* Phones: the 4 steps become one swipeable row instead of a tall stack */
@media (max-width: 639px) {
  .hw-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .hw-steps::-webkit-scrollbar { display: none; }
  .hw-steps > .hw-step { flex: 0 0 82%; scroll-snap-align: start; }
  .hw-steps::after { content: ""; flex: 0 0 1px; }
  .hw-swipe { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--muted); }
}
@media (min-width: 640px) { .hw-swipe { display: none; } }

/* ---------- Easier to read: "more info" links look like buttons ---------- */
.hw-more { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--blue-tint); border: 2px solid var(--blue); color: var(--ink); text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.hw-more:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(10, 107, 191, .5); }
.hw-more > span:nth-child(2) { flex: 1; min-width: 0; }
.hw-more b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; color: var(--ink); }
.hw-more small { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hw-more > svg { flex: none; color: var(--blue-ink); }
.hw-more-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.more-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line-strong); font-family: var(--display); font-weight: 800; font-size: 16.5px; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
.more-pill:hover { border-color: var(--ink); background: var(--surface-2); }
.more-pill svg { color: var(--blue-ink); }
.faq-all, .proof-all { margin-top: 14px; }
.td-all { min-height: 38px; font-size: 15px; justify-self: start; }
.note-box { font-size: 14.5px; line-height: 1.45; }
.mcalc-price span small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- /faq ---------- */
.faq-page { max-width: 820px; }
.faq-search { margin: 16px 0 8px; }
.faq-search .input { height: 52px; font-size: 17px; }
.faq-group { margin-top: 26px; }
.faq-group h2 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 26px; margin-bottom: 6px; }
.faq-group h2 svg { color: var(--blue-ink); }
.faq-none { margin-top: 20px; font-size: 16px; color: var(--ink-2); }
.faq-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; padding: 18px; border-radius: 18px; background: var(--blue-tint); border: 1.5px solid #BFE0FB; }
.faq-ask .mascot { width: 64px; height: auto; flex: none; }
.faq-ask > div { flex: 1 1 200px; }
.faq-ask b { font-family: var(--display); font-weight: 800; font-size: 22px; }
.faq-ask p { color: var(--ink-2); }

/* ==========================================================================
   Brand signature: "packed & shipped". Stocky is a delivery box with yellow
   packing tape and a shipping-label face, so the site borrows those details:
   tape highlights, label-style tags, tracking-label order numbers.
   ========================================================================== */
:root { --tape: #FFD166; --tape-edge: polygon(1.5% 0, 98.5% 0, 100% 22%, 98% 45%, 100% 68%, 98.5% 100%, 1.5% 100%, 0 76%, 2% 52%, 0 28%); }

/* Packing-tape highlight behind a key word in a heading */
.tape { position: relative; isolation: isolate; white-space: nowrap; }
.tape::before { content: ""; position: absolute; z-index: -1; left: -.1em; right: -.12em; bottom: .04em; height: .4em; background: var(--tape); clip-path: var(--tape-edge); transform: rotate(-1.4deg); }
/* On the navy section, a thinner strip under the word so white text stays readable */
.chapter .tape::before { height: .16em; bottom: -.06em; }

/* A short strip of tape under every page title */
.page-title::after { content: ""; display: block; width: 58px; height: 9px; margin-top: 8px; background: var(--tape); clip-path: var(--tape-edge); transform: rotate(-1.5deg); }
.adm-login .page-title::after { margin-inline: auto; }

/* "Step 1" tags look like parcel labels: dark tag, tape-yellow text, punched hole */
.hw-n { display: inline-flex; align-items: center; position: relative; padding: 3px 10px 3px 20px; border-radius: 4px 6px 6px 4px; background: var(--ink); color: var(--tape); font-size: 13.5px; }
.hw-n::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; }

/* Section tags get the same tag shape */
.sec-kicker { border-radius: 4px 8px 8px 4px; padding-left: 22px; position: relative; }
.sec-kicker::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; opacity: .55; }

/* Order and ticket numbers look like a tracking label, with a little barcode */
.track-label { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 9px; border-radius: 6px; background: #fff; border: 1.5px dashed var(--line-strong); }
.track-label small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.track-label b { font-size: 16px; color: var(--ink); }
.track-label::after { content: ""; width: 30px; height: 16px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 6px, var(--ink) 6px 9px, transparent 9px 10px); opacity: .85; }

/* Small finishing touches */
::selection { background: var(--tape); color: #13213C; }
.signoff { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 4px; background: var(--tape); color: #3A2A00; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .02em; transform: rotate(-1.5deg); }
.hero h1 .tape { display: table; } /* own line, but only as wide as the word */

/* Dark sections: bold key words stay white (the dark-ink rule is for light backgrounds) */
.chapter-head b, .chapter .anat-list p b, .chapter .chapter-sub b, .chapter .acct-soon b { color: #fff; }
/* Item icons: white letters on their colour (another rule was turning them grey) */
.item-glyph.item-glyph { color: #fff; }
/* Bold words inside the listing descriptions stay inline, same size as the sentence */
.anat-list p b { display: inline; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: 800; }
.chapter .anat-list p { color: #DCE5F2; font-size: 16px; }
.chapter-head p, .chapter-sub p { color: #DCE5F2; }

/* ==========================================================================
   Pokémon flavour (no layout or wording changes)
   - type-coloured glow behind every Pokémon, like the Pokémon screen in GO
   - type tags in their game colours
   ========================================================================== */

/* Type glow behind the art (shiny keeps its own gold glow) */
:root { --type-glow: radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--tc, transparent) 30%, transparent) 0, color-mix(in srgb, var(--tc, transparent) 10%, transparent) 42%, transparent 70%); }
/* Same layers as before (ground shadow + grey well), with the type glow in between */
.slot:not(.is-shiny) .slot-media { background: radial-gradient(ellipse 45% 10% at 50% 86%, rgba(21,32,45,.10), transparent 70%), var(--type-glow), linear-gradient(var(--slot), var(--slot)); }
.pdp-stage:not(.is-shiny) { background: radial-gradient(ellipse 40% 8% at 50% 88%, rgba(21,32,45,.12), transparent 70%), var(--type-glow), var(--slot); }
.tile:not(.is-shiny) .tile-img, .inspect-img { background: var(--type-glow), var(--slot); }
.slot-media img, .pdp-stage img { filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--tc, #13213C) 28%, transparent)); }

/* Type tags in their game colours (readable for every type) */
.type-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: inherit; }
.type-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 18%, #fff); border: 1.5px solid var(--tc); color: color-mix(in srgb, var(--tc) 55%, #10151d); font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; }

/* Big sections keep their own stacking (no watermarks) */
.home .hero { position: relative; isolation: isolate; }
.chapter { position: relative; isolation: isolate; }
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
/* Nothing in these sections causes sideways scrolling */
.home, .chapter { overflow-x: clip; }

/* ==========================================================================
   Game feel (same layout and words): chunky rounded headings, tactile buttons
   that press down like GO's, and sticker-style cards with a solid edge
   instead of soft blurry shadows.
   ========================================================================== */
:root { --headline: "Baloo 2", "Barlow Condensed", ui-sans-serif, system-ui, sans-serif; --edge: rgba(19, 33, 60, .10); }

/* Headings */
.home-title, .page-title, .hero h1, .pdp-name, .chapter-sub h3, .faq-h, .td-hello h2, .faq-group h2,
.review-box h2, .rating-big b, .hw-step h3, .dopt-head h3, .anat-list b, .faq-ask b, .hw-more b, .acct-soon b {
  font-family: var(--headline); font-weight: 800; letter-spacing: -.01em;
}
.hero h1, .home .hero h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1; }
@media (max-width: 999px) { .home .hero h1 { font-size: clamp(40px, 10vw, 60px); } }
.home-title { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.04; }
.chapter-head .home-title { font-size: clamp(38px, 6.2vw, 64px); }
.page-title { line-height: 1.05; }
.pdp-name { text-transform: none; font-stretch: normal; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; }
.hw-step h3, .dopt-head h3 { line-height: 1.1; }

/* Buttons: rounded, with a raised edge that presses down */
.btn { border-radius: 999px; border-width: 1.5px; font-weight: 700; box-shadow: 0 3px 0 var(--btn-edge, var(--edge)); transition: background var(--t-fast), border-color var(--t-fast), transform .08s, box-shadow .08s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge, var(--edge)); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge, var(--edge)); }
.btn-primary { --btn-edge: #0A5FB0; background: linear-gradient(#45ADFF, #1A8CFF 60%); border-color: #1484F2; }
.btn-primary:hover { background: linear-gradient(#5AB6FF, #2794FF 60%); }
.btn-dark { --btn-edge: #05080D; }
.btn-ghost, .btn-ghost:hover, .btn-ghost:active, .copy-btn, .link { box-shadow: none; transform: none; }
.btn-sm { box-shadow: 0 2px 0 var(--btn-edge, var(--edge)); }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; } }

/* Cards and panels: solid sticker edge, slightly thicker outline */
.slot, .panel-box, .hw-step, .dopt, .review, .proof-stat, .file, .td-card.is-on, .dk-card, .dk-tile, .le-sec, .orow, .help-row, .faq-ask, .rating-box, .td-act {
  border-width: 1.5px; border-color: #DDE3EA; box-shadow: 0 3px 0 var(--edge);
}
.slot { border-radius: 16px; }
.slot:hover { box-shadow: 0 6px 0 var(--edge); }
.td-card.is-hot { box-shadow: 0 3px 0 rgba(176, 120, 0, .25); }

/* ==========================================================================
   "Feels like home" for GO players. Every touch maps to something in the games:
   team colours on accounts, appraisal-style badges, type symbols, Stardust,
   and a map-green background.
   ========================================================================== */

/* --- Map-green ground (the GO overworld), very soft --- */
:root { --bg: #EDF3EE; }

/* --- Teams: Mystic blue, Valor red, Instinct yellow --- */
[data-team="mystic"]   { --team: var(--team-mystic);   --team-ink: #fff; }
[data-team="valor"]    { --team: var(--team-valor);    --team-ink: #fff; }
[data-team="instinct"] { --team: var(--team-instinct); --team-ink: #2B2100; }
.file[data-team] { border-top: 4px solid var(--team); }
.file[data-team] .file-tab { background: var(--team); color: var(--team-ink); }
.file[data-team] .file-head { background: linear-gradient(color-mix(in srgb, var(--team) 10%, #fff), #fff 85%); }
.summary-bar[data-team] { border-top: 4px solid var(--team); }
.summary-bar[data-team] .sb-cell.is-team { background: color-mix(in srgb, var(--team) 12%, #fff); }
.acct-top[data-team] .acct-kicker .label { padding: 3px 9px; border-radius: 4px; background: var(--team); color: var(--team-ink); }
/* Team names read as team badges */
.team-dot { padding: 2px 9px 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--team, var(--faint)) 14%, #fff); color: color-mix(in srgb, var(--team, var(--ink)) 72%, #10151d); font-weight: 800; }
.team-dot::before { width: 9px; height: 9px; }

/* --- Badges styled after the games ---
   Hundo = GO's 3-star appraisal, Lucky = gold sparkle, Shadow = dark purple flame,
   Purified = soft light blue, Mythical = Mew pink, LV 50 = XL Candy purple. */
.badge-hundo { background: linear-gradient(#FF6F86, #E5355A); color: #fff; border-color: #CF2B4F; }
.badge-hundo::before { content: "★★★"; font-size: 9px; letter-spacing: -1px; margin-right: 1px; }
.badge-lucky { background: linear-gradient(135deg, #FFF0A6, #F7C93A); color: #4F3A00; border-color: #E2AE17; }
.badge-shadow { background: #2C2140; color: #E2D3FF; border-color: #4A3470; }
.badge-shadow svg { color: #B98BFF; }
.badge-purified { background: #F1F9FF; color: #1D69AF; border-color: #9FD4FF; box-shadow: 0 0 0 2px rgba(159, 212, 255, .35); }
.badge-legendary { background: linear-gradient(#FFF2C4, #FFE18E); color: #5E3F00; border-color: #E6B647; }
.badge-mythical { background: linear-gradient(#FFE6F3, #FFD2EB); color: #9A1F66; border-color: #F2A7CF; }
.badge-mega { background: linear-gradient(90deg, #FF5E8A, #FF9B45); color: #fff; border-color: transparent; }
.badge-background { background: #E2F6F3; color: #0E6A61; border-color: #A7DFD7; }
.badge-lv50 { background: linear-gradient(#6446E0, #3F28A9); color: #fff; }
.tile-flags .mf.lucky { background: linear-gradient(135deg, #FFF0A6, #F7C93A); color: #4F3A00; border-color: #E2AE17; }
.tile-flags .mf.shadow { background: #2C2140; color: #E2D3FF; border-color: #4A3470; }
.tile-iv { background: linear-gradient(#FF6F86, #E5355A); color: #fff; border-color: #CF2B4F; }

/* --- Type symbols inside type tags and type filters --- */
.type-tag { gap: 4px; padding-left: 7px; }
.type-ico { flex: none; }
.type-pill span { display: inline-flex; align-items: center; gap: 4px; }

/* --- Stardust gets its sparkle, like the in-game counter --- */
:root { --dust-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237A6CF0' d='M12 2c.8 5.2 3.8 8.2 9 9-5.2.8-8.2 3.8-9 9-.8-5.2-3.8-8.2-9-9 5.2-.8 8.2-3.8 9-9Z'/%3E%3Ccircle cx='19' cy='5' r='2' fill='%23A99CFF'/%3E%3Ccircle cx='5' cy='19' r='1.5' fill='%23A99CFF'/%3E%3C/svg%3E"); }
.is-dust span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: var(--dust-ico) center / contain no-repeat; }


/* ==========================================================================
   Backgrounds with a reason
   - Neutral page colour for shopping, info and checkout (the Pokémon stand out)
   - A GO-style street map only where the story is "our trade account travels
     to you": the home hero and the delivery section
   ========================================================================== */
:root {
  --bg: #F4F5F2;
  --map-base: #E2EEE4;
  --map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Crect width='220' height='220' fill='%23E2EEE4'/%3E%3Ccircle cx='168' cy='162' r='26' fill='%23D2E6D6'/%3E%3Ccircle cx='38' cy='178' r='14' fill='%23D2E6D6'/%3E%3Ccircle cx='96' cy='28' r='10' fill='%23D2E6D6'/%3E%3Cpath d='M0 70H220M150 0V220' stroke='%23F4F8F4' stroke-width='10'/%3E%3Cpath d='M0 150H220M60 0V220' stroke='%23ECF4ED' stroke-width='5'/%3E%3Cpath d='M0 220L220 0' stroke='%23F4F8F4' stroke-width='7'/%3E%3C/svg%3E");
}
body::before { display: none; }                               /* the drifting contour lines meant nothing */
.home .hero::before, .site-footer::before { display: none; }  /* decorative watermarks without a purpose */
.map-band { background: var(--map-base) var(--map) repeat; background-size: 220px 220px; }
.wave-from-map { background: var(--map-base); }
.wave-to-map path { fill: var(--map-base); }
.map-band + .chapter-wave { background: var(--map-base); }
.chapter .tape::before { bottom: .16em; } /* sits right under the word with the rounded heading font */

/* Readability first: the map stays out from behind text.
   Fainter roads/parks, and a solid fade where the words sit. */
:root {
  --map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Crect width='220' height='220' fill='%23E3EEE5'/%3E%3Ccircle cx='168' cy='162' r='26' fill='%23DCEADF'/%3E%3Ccircle cx='38' cy='178' r='14' fill='%23DCEADF'/%3E%3Ccircle cx='96' cy='28' r='10' fill='%23DCEADF'/%3E%3Cpath d='M0 70H220M150 0V220' stroke='%23ECF3ED' stroke-width='10'/%3E%3Cpath d='M0 150H220M60 0V220' stroke='%23E8F1E9' stroke-width='5'/%3E%3Cpath d='M0 220L220 0' stroke='%23ECF3ED' stroke-width='7'/%3E%3C/svg%3E");
  --map-base: #E3EEE5;
}
/* Hero: solid behind the words on the left, map fades in on the right (behind the world-map card) */
.home > .map-band { background: linear-gradient(90deg, var(--map-base) 0, var(--map-base) 42%, rgba(227, 238, 229, .6) 58%, rgba(227, 238, 229, 0) 78%), var(--map) repeat; background-size: auto, 220px 220px; }
/* Delivery: plain behind the heading, map lower down behind the cards */
#delivery.map-band { background: linear-gradient(180deg, var(--map-base) 0, var(--map-base) 170px, rgba(227, 238, 229, 0) 320px), var(--map) repeat; background-size: auto, 220px 220px; }
/* Phones: text runs full width, so keep the hero solid and let the map show only near the bottom */
@media (max-width: 899px) {
  .home > .map-band { background: linear-gradient(180deg, var(--map-base) 0, var(--map-base) 62%, rgba(227, 238, 229, 0) 85%), var(--map) repeat; background-size: auto, 220px 220px; }
}

/* ---------- Your logo ---------- */
.brand-logo { display: block; width: auto; height: 50px; }
.lockup-lg .brand-logo { height: 120px; }
.site-header .brand { flex: none; }
@media (max-width: 899px) { .site-header .brand-logo { height: 44px; } }
/* Small emblem in avatars, the friendship meter and the hero badge */
img.brand-mark { display: block; object-fit: contain; border-radius: 0; background: none; }
/* Header: room for the emblem so the name is readable */
.hdr-main .wrap { height: 66px; }
.site-header .brand-logo { height: 60px; }
@media (max-width: 899px) { .hdr-main .wrap { height: 60px; } .site-header .brand-logo { height: 52px; } }

/* ==========================================================================
   Buttons in Pokémon GO's style: flat teal-green pills with white bold text
   and a soft shadow (no glossy shine, no raised edge). Secondary buttons are
   white with teal text. A slightly deeper teal than the game keeps white text readable.
   ========================================================================== */
:root { --go-teal: #0E9474; --go-teal-2: #0A7D63; --go-teal-ink: #0A7A61; --go-teal-soft: #CDEFE5; }
.btn { border-radius: 999px; border-width: 1.5px; box-shadow: none; transition: background var(--t-fast), border-color var(--t-fast), transform .1s, box-shadow var(--t-fast), filter var(--t-fast); }
.btn:hover { transform: none; box-shadow: 0 4px 12px rgba(21, 32, 45, .10); }
.btn:active { transform: scale(.97); box-shadow: none; }
/* Main action: GO teal */
.btn-primary { --btn-fg: #fff; background: linear-gradient(180deg, var(--go-teal), var(--go-teal-2)); border-color: var(--go-teal-2); box-shadow: 0 3px 10px rgba(11, 129, 102, .28); text-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.btn-primary:hover { background: linear-gradient(180deg, #109E7C, #0B866A); border-color: #0B866A; box-shadow: 0 5px 14px rgba(11, 129, 102, .32); }
/* Secondary: white with teal text */
.btn:not(.btn-primary):not(.btn-dark):not(.btn-ghost) { --btn-fg: var(--go-teal-ink); border-color: var(--go-teal-soft); background: #fff; }
.btn:not(.btn-primary):not(.btn-dark):not(.btn-ghost):hover { border-color: var(--go-teal); }
/* Dark buttons stay navy, just flat */
.btn-dark { box-shadow: 0 3px 10px rgba(21, 32, 45, .18); }
.btn-sm { box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; transform: none; filter: grayscale(.4); }
/* Pill links and toggles on the landing page match */
.more-pill { color: var(--go-teal-ink); border-color: var(--go-teal-soft); }
.more-pill:hover { border-color: var(--go-teal); background: #fff; }
.more-pill svg { color: var(--go-teal-ink); }
.calc-toggle > summary { color: var(--go-teal-ink); border-color: var(--go-teal-soft); }
.calc-toggle > summary:hover { border-color: var(--go-teal); }
.calc-toggle[open] > summary { background: var(--go-teal-2); border-color: var(--go-teal-2); color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
/* Meetup calculator unfolds smoothly: spacing lives inside the box so nothing jumps */
.calc-toggle .calc-wrap { margin-top: 0; padding-top: 14px; }

/* ==========================================================================
   One job per colour (front page and shared pieces)
   Teal  = anything you can click (buttons, links, toggles, selected tabs)
   Navy  = text, headings, dark panels      Yellow tape = highlights only
   Green = good news (ticks, Free, Delivered, Verified)   Gold = stars & rarity
   Blue  = only inside the map pictures
   ========================================================================== */
/* Links */
.link, .faq-all, .proof-all { color: var(--go-teal-ink); }
/* Header: the current section's underline */
.hdr-cats a[aria-current="page"]::after { background: var(--go-teal); }
/* Hero: the highlighted word is a highlight, not a link (navy on yellow tape) */
.hero h1 .tape { color: var(--ink); }
/* "Buying a Pokémon / Buying an account" switch: selected = teal */
.hw-switch button[aria-selected="true"] { background: var(--go-teal-2); color: #fff; }
/* "Before you buy" box is clickable, so it's teal */
.hw-more { background: #E9F7F2; border-color: var(--go-teal); }
.hw-more:hover { box-shadow: 0 8px 20px -10px rgba(10, 125, 99, .45); }
.hw-more > svg { color: var(--go-teal-ink); }
.hw-more-icon { background: var(--go-teal-2); }
/* "Next: …" scroll buttons: secondary style (white with teal), not a heavy navy block */
.scroll-cue.is-dark { background: #fff; color: var(--go-teal-ink); border: 1.5px solid var(--go-teal-soft); border-radius: 999px; }
.scroll-cue.is-dark:hover { background: #fff; color: var(--go-teal-ink); border-color: var(--go-teal); }
.scroll-cue.is-dark svg, .scroll-cue svg { color: var(--go-teal); }
/* Example screens: the in-game "Accept" button is teal like GO's */
.vg-btn { background: var(--go-teal-2); }
.vg-btn-green { background: var(--green); }
/* Delivery prices: Free = good news (green), a paid price is just information (navy) */
.dopt-price { color: var(--ink); }
.dopt-price.is-free { color: var(--green-ink); }
/* Accounts section: the numbered markers and section tag use the action/brand colours instead of a one-off violet */
.anat-n, .mf-marker { background: var(--go-teal-2); }
.sec-kicker { background: #E3F4EE; color: var(--go-teal-ink); }
.sec-kicker.is-dark { background: rgba(18, 160, 126, .22); color: #9FE7CF; }
/* On the dark accounts section, the secondary button stays see-through so it doesn't look like a second main button */
.chapter .btn-glass, .chapter .btn-glass:hover { --btn-fg: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.chapter .btn-glass:hover { background: rgba(255, 255, 255, .16); }
/* Dark accounts section: the second button is see-through (only one main button per spot) */
.chapter .btn.btn-glass:not(.btn-primary):not(.btn-dark):not(.btn-ghost) { --btn-fg: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.chapter .btn.btn-glass:not(.btn-primary):not(.btn-dark):not(.btn-ghost):hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.chapter .link { color: #7FE0C2; }
/* The sample trainer file matches the real site: navy tab, teal buy button */
.mockfile .mf-tab { background: var(--ink); }
.mf-btn { background: var(--go-teal-2); border-radius: 999px; }
/* Waves around the dark section: navy layers instead of bright blue */
.cw-back { fill: #2B4C7E; opacity: .45; }
.cw-mid { fill: #22406E; opacity: .9; }
/* Typing in a box is interacting, so the "active box" outline is teal too (and the example screen matches) */
.input:focus, .select:focus, .textarea:focus { border-color: var(--go-teal); box-shadow: 0 0 0 3px rgba(18, 160, 126, .2); }
.vg-input.vg-caret { border-color: var(--go-teal); }
.vg-caret { box-shadow: 0 0 0 3px rgba(18, 160, 126, .2); }
.vg-caret::after { background: var(--go-teal); }

/* ---------- Desk: "What is this?" facts ---------- */
.le-facts { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 12px 14px; display: grid; gap: 10px; }
.le-facts-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; }
.le-facts-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.le-facts-head .mono { font-size: 15px; color: var(--ink); }
.le-facts-rules { display: grid; gap: 6px; }
.le-facts-rules li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.le-facts-rules li svg { flex: none; margin-top: 2px; }
.le-facts-rules li.is-warn { color: var(--red-ink); } .le-facts-rules li.is-warn svg { color: var(--red-ink); }
.le-facts-rules li.is-good svg { color: var(--green-ink); }
.le-facts-rules li.is-info svg { color: var(--go-teal-ink); }
.le-facts-rules b { color: var(--ink); }
.le-facts-rules li.is-warn b { color: var(--red-ink); }
.le-mon-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.le-mon-facts:empty { display: none; }

/* ---------- Desk: price helper ---------- */
.le-pricer h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.le-pricer h3 svg { color: var(--go-teal-ink); }
.pr-steps { display: grid; gap: 8px; counter-reset: pr; }
.pr-steps li { counter-increment: pr; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-2); }
.pr-steps li::before { content: counter(pr); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--go-teal-2); color: #fff; font: 800 13px var(--display); }
.pr-steps li > span { flex: 1 1 260px; }
.pr-steps b { color: var(--ink); }
.le-pricer .textarea { min-height: 90px; }
.pr-out { display: grid; gap: 12px; }
.pr-out:empty { display: none; }
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-stats div { padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 2px; }
.pr-stats span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pr-stats b { font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.pr-picks { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pr-picks { grid-template-columns: 1.3fr 1fr 1fr; } }
.pr-pick { text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line-2); transition: border-color var(--t-fast), transform .1s; }
.pr-pick:hover { border-color: var(--go-teal); }
.pr-pick:active { transform: scale(.98); }
.pr-pick span { font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pr-pick em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--go-teal-2); color: #fff; }
.pr-pick b { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--ink); }
.pr-pick small { font-size: 12.5px; color: var(--muted); }
.pr-pick.is-best { border-color: var(--go-teal); background: #EAF7F2; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip { height: 30px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--go-teal-soft); background: #fff; font: 700 13px var(--mono); color: var(--ink); }
.pr-chip.is-off { opacity: .45; text-decoration: line-through; border-style: dashed; }
@media (max-width: 520px) { .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-qrow { display: flex; gap: 8px; }
.pr-qrow .input { flex: 1; min-width: 0; }
.pr-qrow .btn { flex: none; }
.pr-status { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.pr-status.is-good { background: #EAF7F2; color: var(--go-teal-ink); }
.pr-status.is-warn { background: var(--gold-tint); color: var(--gold-ink); }
.pr-manual { border-top: 1px dashed var(--line-2); padding-top: 10px; }
.pr-manual > summary { cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--go-teal-ink); }
.pr-manual[open] > summary { margin-bottom: 10px; }

/* Crawler-only copy of the home page (index.html): hidden once JavaScript runs */
.js .prerender { display: none; }

/* Short intro under a collection's heading */
.coll-intro { max-width: 68ch; margin: 12px 0 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }

/* ---------- Guaranteed-minimum ("tier") accounts ---------- */
.file.is-tier { border-top: 4px solid var(--gold); }
.file.is-tier .file-tab { background: var(--gold); color: #2B2100; }
.file.is-tier .file-head { background: linear-gradient(var(--gold-tint), #fff 85%); }
.tier-name { font: 800 19px/1.15 var(--headline); color: var(--ink); }
.tier-name a::after { content: ""; position: absolute; inset: 0; }
.tier-kind { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.tier-lines { list-style: none; margin: 0; padding: 12px 14px 4px; display: grid; gap: 7px; }
.tier-lines li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-md); font-weight: 650; color: var(--ink); line-height: 1.3; }
.tier-lines svg { flex: none; margin-top: 2px; color: var(--green-ink); }
.tier-note { margin: 0; padding: 6px 14px 12px; font-size: var(--fs-xs); color: var(--muted); }
.file.is-tier.is-off .tier-lines { opacity: .6; }
.tier-sec { margin-bottom: 26px; }
.tier-sec .section-sub { max-width: 60ch; }
.tier-h1 { margin-top: 8px; font: 800 clamp(32px, 7vw, 48px)/1.05 var(--headline); letter-spacing: -.01em; }
.tier-lead { margin-top: 8px; max-width: 60ch; font-size: var(--fs-md); color: var(--ink-2); }
.tier-layout { display: grid; gap: 18px; margin-top: 8px; align-items: start; }
@media (min-width: 900px) { .tier-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; } .tier-layout .acct-right { position: sticky; top: calc(var(--header-h) + 18px); } }
.tier-lines.is-big { padding: 14px 16px; gap: 10px; }
.tier-lines.is-big li { font-size: 17px; }
.tier-desc { max-width: 70ch; font-size: 15px; color: var(--ink-2); }
.le-new { flex-wrap: wrap; }
.le-new .btn[data-adm-new="tier"] { flex-basis: 100%; }
.le-thumb.is-tier { background: var(--gold); color: #2B2100; }
.le-tier-preview .tier-lines { padding: 8px 10px; border: 1px dashed var(--gold-line); border-radius: 8px; background: var(--gold-tint); }

/* How it works → After you order: only the card for what you picked (Pokémon or account) */
.how-after { max-width: 760px; }
.how-after > [hidden] { display: none; }

/* ---------- Home: Pokémon chapter (dark, after "Two ways to get your Pokémon"; first half of the dark band) ---------- */
.poke-in { background: var(--map-base); }                       /* wave rises out of the delivery map */
.poke-in .cw-back { fill: var(--gold); opacity: .4; }
.poke-in .cw-mid { fill: var(--go-teal); opacity: .7; }
/* Pokémon + accounts share ONE dark background, so there's no seam between them: the glows drift
   gold → teal → blue → violet down the band and the doodle pattern never restarts. */
.shop-band {
  background:
    radial-gradient(640px 420px at 92% 120px, rgba(227, 162, 26, .24), transparent 70%),
    radial-gradient(620px 520px at 0% 38%, rgba(18, 160, 126, .22), transparent 70%),
    radial-gradient(700px 520px at 100% 62%, rgba(26, 140, 255, .26), transparent 70%),
    radial-gradient(620px 460px at 0% 86%, rgba(122, 92, 240, .22), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 34c-1.6-3.2-6-5.2-6-9a6 6 0 1 1 12 0c0 3.8-4.4 5.8-6 9Z'/%3E%3Cpath d='M76 70v-6h6M92 64h6v6M98 80v6h-6M82 86h-6v-6'/%3E%3C/g%3E%3C/svg%3E"),
    var(--navy);
}
.shop-band > .chapter { background: none; }
.shop-band > .poke-chapter { padding-bottom: 24px; }
.shop-band > .poke-chapter + .chapter { padding-top: 48px; }
.poke-chapter .sec-kicker.is-dark { background: rgba(227, 162, 26, .22); color: #FFD98A; }
.poke-cards { margin-top: 30px; }
@media (min-width: 640px) and (max-width: 1099px) { .poke-cards > :nth-child(4) { display: none; } }
.poke-stats { margin-top: 26px; }
@media (min-width: 720px) { .poke-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .poke-ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .poke-ctas .btn-primary { grid-column: 1 / -1; }
}
/* Cards keep their normal dark text on the dark chapter */
.poke-chapter .slot { color: var(--ink); }

/* ---------- Home: honest labels ---------- */
/* Hero map: it's an example, not live orders */
.scene-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.scene-note svg { flex: none; color: var(--muted); }
.scene-note b { color: var(--ink); }
.sc-example { display: inline-block; margin-right: 7px; padding: 2px 7px; border-radius: 5px; background: var(--gold-tint); border: 1px solid var(--gold-line); color: var(--gold-ink); font: 700 11px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; font-style: normal; vertical-align: 2px; }
/* "What an account listing looks like" mockup */
.mf-example { position: absolute; top: -12px; right: 14px; z-index: 2; padding: 4px 10px; border-radius: 6px; background: var(--yellow, #FFD166); color: #2B2100; font: 800 12px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); transform: rotate(3deg); }

/* Delivery cards: "Quickest" on meetup */
.dopt-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--gold-tint); border: 1px solid var(--gold-line); color: var(--gold-ink); font: 800 12.5px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.dopt-tag svg { width: 13px; height: 13px; }

/* "New Pokémon drop often" / "No accounts for sale" boxes: solid cards so they read clearly on the dark band */
.shop-band .chapter .acct-soon { background: #fff; border: 0; color: var(--ink-2); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); padding: 20px 22px; }
.shop-band .chapter .acct-soon b { color: var(--ink); font-size: 23px; }
.shop-band .chapter .acct-soon p { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.shop-band .chapter .acct-soon .link { color: var(--go-teal-ink); font-weight: 700; }
.soon-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-ink); }

/* ==========================================================================
   Home: "Ready to start?" — pick-your-path scene (dark, interactive)
   ========================================================================== */
.close-quest {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 34px 0 84px;
  background:
    radial-gradient(900px 500px at 50% 110%, rgba(18, 160, 126, .28), transparent 70%),
    radial-gradient(700px 420px at 85% 0%, rgba(227, 162, 26, .18), transparent 70%),
    radial-gradient(600px 420px at 8% 20%, rgba(26, 140, 255, .2), transparent 70%),
    var(--navy);
}
@media (min-width: 900px) { .close-quest { padding: 40px 0 110px; } }
body:has(.close-quest) .site-footer { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.cq-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cq-glow {
  position: absolute; width: 560px; aspect-ratio: 1; border-radius: 50%;
  left: calc(var(--mx, .5) * 100% - 280px); top: calc(var(--my, .45) * 100% - 280px);
  background: radial-gradient(circle, rgba(127, 224, 194, .16), rgba(255, 209, 102, .06) 45%, transparent 70%);
  transition: left .3s ease-out, top .3s ease-out;
}

.close-quest .close-inner { max-width: 980px; text-align: center; position: relative; }
.close-quest .home-title { color: #fff; }
.close-quest .sec-kicker.is-dark { background: rgba(227, 162, 26, .22); color: #FFD98A; }
.cq-sub { margin-top: 10px; font-size: 19px; color: #C3CFE0; }

.cq-paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 30px; perspective: 900px; }
@media (min-width: 720px) { .cq-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.cq-path {
  display: grid; justify-items: center; align-content: start; gap: 6px; padding: 22px 20px 22px; text-align: center; text-decoration: none; color: #fff;
  border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .18s ease-out, translate .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.cq-path:hover, .cq-path:focus-visible { translate: 0 -4px; background: rgba(255, 255, 255, .09); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.cq-path.is-poke:hover, .cq-path.is-poke:focus-visible { border-color: rgba(255, 209, 102, .65); }
.cq-path.is-acct:hover, .cq-path.is-acct:focus-visible { border-color: rgba(143, 208, 255, .65); }
.cq-label { font: 800 27px/1.1 var(--headline); }
.cq-desc { max-width: 34ch; font-size: 15.5px; line-height: 1.45; color: #C3CFE0; }
.cq-desc b { color: #fff; }
.cq-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 11px 20px; border-radius: 999px; background: var(--go-teal); color: #fff; font: 700 17px/1 var(--display); transition: background .2s, gap .2s; }
.cq-path:hover .cq-go { background: var(--go-teal-2); gap: 10px; }

/* Stage: the Pokémon on a soft glowing spotlight (it changes every few seconds) */
.cq-stage { position: relative; display: grid; place-items: center; width: 180px; height: 160px; margin-bottom: 6px; }
.cq-stage::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 130px; height: 22px; margin-left: -65px; border-radius: 50%; background: radial-gradient(ellipse, rgba(127, 224, 194, .45), transparent 70%); }
.cq-flash { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 180, .4), transparent 62%); opacity: .75; transition: opacity .4s, transform .4s; }
.cq-mon { position: relative; z-index: 1; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.cq-path.is-poke:hover .cq-mon, .cq-path.is-poke:focus-visible .cq-mon { transform: translateY(-8px) scale(1.06); }
.cq-path.is-poke:hover .cq-flash, .cq-path.is-poke:focus-visible .cq-flash { opacity: 1; transform: scale(1.08); }
.cq-mon.is-pop { animation: cq-pop .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cq-pop { from { transform: translateY(14px) scale(.55); opacity: .2; } to { transform: none; opacity: 1; } }

/* Stage: mini trainer file that flips through the teams */
.cq-file { position: relative; display: grid; gap: 6px; width: 168px; padding: 18px 14px 14px; margin-top: 14px; text-align: left; color: var(--ink); background: #fff; border-radius: 0 14px 14px 14px; border-top: 5px solid var(--team); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); transform: rotate(-3deg); transition: transform .4s var(--ease); }
.cq-path.is-acct:hover .cq-file { transform: rotate(0) scale(1.04); }
.cq-file-tab { position: absolute; left: 0; top: -21px; padding: 3px 12px 2px 9px; background: var(--team); color: var(--team-ink); font: 700 11px/1.3 var(--display); letter-spacing: .08em; border-radius: 7px 7px 0 0; }
.cq-file-lv { font: 700 14px/1 var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cq-file-lv b { font: 800 30px/1 var(--display); color: var(--ink); letter-spacing: 0; margin-left: 2px; }
.cq-file-team { font: 700 14px/1 var(--display); color: var(--team); }
.cq-file[data-team="instinct"] .cq-file-team { color: #8A6A00; }
.cq-file-bars { display: grid; gap: 5px; margin-top: 4px; }
.cq-file-bars i { height: 7px; border-radius: 4px; background: var(--line); }
.cq-file-bars i:nth-child(1) { width: 90%; } .cq-file-bars i:nth-child(2) { width: 70%; } .cq-file-bars i:nth-child(3) { width: 82%; }
.cq-file.is-flip { animation: cq-flip .5s var(--ease); }
@keyframes cq-flip { from { transform: rotate(-3deg) rotateY(90deg); } to { transform: rotate(-3deg) rotateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .cq-path, .cq-mon, .cq-flash, .cq-glow { transition: none; }
  .cq-mon.is-pop { animation: none; }
}

/* ---------- Payments: Cash App (USA) + crypto (anywhere) ---------- */
.pay-where { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: 700 11.5px/1.4 var(--display); letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: var(--ink-2); vertical-align: 2px; }
.pay-coins { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.coin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.coin-tab { display: grid; gap: 1px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); font: 800 16px/1.1 var(--display); color: var(--ink); text-align: left; }
.coin-tab small { font: 600 12px/1.2 var(--body, inherit); color: var(--muted); }
.coin-tab[aria-selected="true"] { border-color: var(--go-teal); background: var(--go-teal-soft); }
.paybox-rows b.paybox-addr { font-family: var(--mono); font-weight: 700; word-break: break-all; font-size: 14px; line-height: 1.35; }
.paybox-note.is-warn { color: var(--gold-ink); }
.paybox-note.is-warn b { color: var(--gold-ink); }
.paybox-tx { margin: 12px 0 10px; }

/* Checkout step bar: stays at the top of the page instead of following you down */
.co-tracker { position: static; box-shadow: none; backdrop-filter: none; }

/* Bottom of the home page, seamless: FAQ → layered wave → "Ready to start?" → footer, all one night sky.
   Glows fade out before the top and bottom edges, and the footer's doodle pattern runs through the scene. */
.quest-in .cw-back { fill: var(--gold); opacity: .4; }
.quest-in .cw-mid { fill: var(--go-teal); opacity: .7; }
.close-quest {
  background:
    radial-gradient(520px 380px at 86% 32%, rgba(227, 162, 26, .16), transparent 70%),
    radial-gradient(560px 420px at 10% 40%, rgba(26, 140, 255, .16), transparent 70%),
    radial-gradient(700px 420px at 50% 72%, rgba(18, 160, 126, .2), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 34c-1.6-3.2-6-5.2-6-9a6 6 0 1 1 12 0c0 3.8-4.4 5.8-6 9Z'/%3E%3Cpath d='M76 70v-6h6M92 64h6v6M98 80v6h-6M82 86h-6v-6'/%3E%3C/g%3E%3C/svg%3E"),
    var(--navy);
}
body:has(.close-quest) .site-footer { border-top: 0; }
body:has(.close-quest) .site-footer { margin-top: -1px; }
.chapter-in.quest-in { margin-bottom: -1px; position: relative; z-index: 1; }

/* ---------- Custom requests ---------- */
.rq-cue { margin-top: 18px; text-align: center; }
.rq-cue a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: #DCE5F2; font-size: 16px; text-decoration: none; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .28); transition: background .2s, border-color .2s; }
.rq-cue a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 209, 102, .7); }
.rq-cue b { color: #FFD98A; }
.rq-inline { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.rq-page { max-width: 760px; }
.rq-form { margin-top: 8px; }
.rq-form .panel-box-body { display: grid; gap: 14px; padding: 18px; }
.rq-tabs { margin-bottom: 4px; }
.rq-tabs .tab { display: inline-flex; align-items: center; gap: 7px; }
[data-rq-pane] { display: grid; gap: 14px; }
[data-rq-pane][hidden] { display: none; }
.rq-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rq-money { position: relative; }
.rq-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.rq-money .input { padding-left: 26px; }
.rq-hint { display: flex; align-items: center; gap: 6px; justify-content: center; }
/* "Can't find it? Request a Pokémon" on Shop Pokémon / Accounts: a clear button, not small print */
.rq-inline { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 16px; border-radius: 12px; background: var(--gold-tint); border: 1.5px solid var(--gold-line); color: var(--ink); font-size: 16.5px; line-height: 1.3; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.rq-inline > svg:first-child { flex: none; color: var(--gold-ink); }
.rq-inline > svg:last-child { flex: none; color: var(--gold-ink); transition: transform .2s; }
.rq-inline b { color: var(--gold-ink); font-weight: 800; }
.rq-inline:hover { border-color: var(--gold); box-shadow: 0 8px 20px -12px rgba(138, 88, 0, .5); }
.rq-inline:hover > svg:last-child { transform: translateX(3px); }

/* ---------- Desk: tap-to-pick moves ---------- */
.le-moves { display: grid; gap: 12px; margin-top: 4px; }
.le-moves[hidden], [data-moves-manual][hidden] { display: none; }
.mv-group { display: grid; gap: 7px; }
.mv-sub { margin-left: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.mv-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mv-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: 700 15px/1.2 var(--display); transition: border-color .15s, background .15s; }
.mv-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--tc, var(--faint)); flex: none; }
.mv-chip em { padding: 1px 6px; border-radius: 5px; background: var(--gold-tint); border: 1px solid var(--gold-line); color: var(--gold-ink); font: 800 10.5px/1.4 var(--display); letter-spacing: .05em; text-transform: uppercase; font-style: normal; }
.mv-chip:hover { border-color: var(--tc, var(--line-strong)); }
.mv-chip.is-on { border-color: var(--go-teal); background: var(--go-teal-soft); box-shadow: inset 0 0 0 1px var(--go-teal); }
.mv-chip.is-on::after { content: "✓"; color: var(--go-teal-ink); font-weight: 800; }
/* Typed-in moves + the "Move not listed? Type it" box */
.mv-chip.is-custom { border-style: dashed; }
.mv-chip.is-custom i { background: var(--faint); }
.mv-x { margin-left: 2px; padding: 0 4px; border-radius: 50%; color: var(--muted); font-size: 17px; line-height: 1; }
.mv-x:hover { background: var(--line); color: var(--ink); }
.mv-add summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--go-teal-ink); }
.mv-add[open] summary { margin-bottom: 8px; }
.mv-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
@media (min-width: 640px) { .mv-add-row { grid-template-columns: minmax(0, 1fr) auto auto auto; } }

/* ---------- Desk Stats: "In stock right now" ---------- */
.dk-stock { margin-top: 16px; }
.dk-stock-total { display: grid; gap: 2px; margin: 4px 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--go-teal-soft); border: 1px solid rgba(14, 148, 116, .25); }
.dk-stock-total span { font-size: var(--fs-sm); font-weight: 700; color: var(--go-teal-ink); text-transform: uppercase; letter-spacing: .05em; }
.dk-stock-total b { font: 800 clamp(30px, 5vw, 40px)/1.05 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-stock-total small { font-size: var(--fs-sm); color: var(--ink-2); }
/* Three totals: Pokémon (main), Accounts, Everything */
.dk-stock-totals { display: grid; gap: 10px; margin: 4px 0 14px; }
@media (min-width: 720px) { .dk-stock-totals { grid-template-columns: 1.3fr 1fr 1fr; } }
.dk-stock-totals .dk-stock-total { margin: 0; background: var(--surface-2); border-color: var(--line); }
.dk-stock-totals .dk-stock-total span { color: var(--ink-2); }
.dk-stock-totals .dk-stock-total b { font-size: clamp(24px, 3.6vw, 30px); }
.dk-stock-totals .dk-stock-total.is-main { background: var(--go-teal-soft); border-color: rgba(14, 148, 116, .25); }
.dk-stock-totals .dk-stock-total.is-main span { color: var(--go-teal-ink); }
.dk-stock-totals .dk-stock-total.is-main b { font-size: clamp(30px, 5vw, 40px); }
.dk-stock-totals .dk-stock-total.is-all { background: #fff; border-style: dashed; }

/* ---------- Bulk discount (Pokémon only) ---------- */
.bulk-line { color: var(--green-ink); font-weight: 700; }
.bulk-line .num { color: var(--green-ink); }
.bulk-nudge { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--gold-tint); border: 1px solid var(--gold-line); color: var(--gold-ink); font-weight: 700; font-size: var(--fs-sm); }
.bulk-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.bulk-hint svg { flex: none; margin-top: 2px; color: var(--gold-ink); }
.bulk-hint b { color: var(--ink); }
.bulk-hint.is-small { margin-top: 2px; font-size: 13.5px; }

/* ---------- Pokémon cards: quick add / remove ---------- */
.slot .slot-cart { position: relative; z-index: 1; }
.slot-cart { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--go-teal); background: #fff; color: var(--go-teal-ink); font: 700 14px/1 var(--display); letter-spacing: .02em; transition: background .15s, color .15s, transform .15s; }
.slot-cart svg { width: 14px; height: 14px; }
.slot-cart:hover { background: var(--go-teal-soft); }
.slot-cart:active { transform: scale(.96); }
.slot-cart.is-in { background: var(--go-teal); color: #fff; }
.slot-cart.is-in:hover { background: var(--go-teal-2); }
@media (max-width: 639px) { .slot-cart { min-height: 32px; padding: 0 10px; font-size: 13px; } }

/* ---------- Shop Pokémon: "Buy more, save more" ladder ---------- */
.bulk-card {
  position: relative; overflow: hidden; margin: 4px 0 18px; padding: 16px 18px 18px; border-radius: 18px;
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(227, 162, 26, .22), transparent 70%),
    linear-gradient(135deg, #FFF8E6, #FFFDF7 60%);
  border: 1.5px solid var(--gold-line);
  box-shadow: 0 14px 30px -22px rgba(138, 88, 0, .55);
}
.bulk-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
@media (min-width: 760px) { .bulk-head { grid-template-columns: auto minmax(0, 1fr) auto; } }
.bulk-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--gold), #F5C451); color: #2B2100; box-shadow: 0 6px 14px -6px rgba(138, 88, 0, .7); }
.bulk-title b { display: block; font: 800 21px/1.1 var(--headline); color: var(--ink); }
.bulk-title small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.bulk-status { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.bulk-status b { color: var(--gold-ink); }
@media (min-width: 760px) { .bulk-status { grid-column: auto; margin: 0; text-align: right; max-width: 340px; } }

.bulk-steps { --fill: 0; position: relative; list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bulk-steps::before, .bulk-steps::after { /* the track, and how much of it is filled */
  content: ""; position: absolute; top: 15px; left: 10%; height: 4px; border-radius: 4px;
}
.bulk-steps::before { right: 10%; background: rgba(138, 88, 0, .15); }
.bulk-steps::after { width: calc(80% * var(--fill)); background: linear-gradient(90deg, var(--go-teal), var(--gold)); transition: width .4s var(--ease); }
.bulk-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; text-align: center; }
.bulk-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2.5px solid rgba(138, 88, 0, .25); color: #fff; transition: background .25s, border-color .25s, transform .25s; }
.bulk-step b { margin-top: 4px; font: 800 clamp(19px, 3.6vw, 26px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.bulk-step span:not(.bulk-dot) { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bulk-step.is-on .bulk-dot { background: var(--go-teal); border-color: var(--go-teal); }
.bulk-step.is-now .bulk-dot { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(14, 148, 116, .18); }
.bulk-step.is-max b { color: var(--gold-ink); font-size: clamp(22px, 4.2vw, 32px); }
.bulk-step.is-max .bulk-dot { border-color: var(--gold); background: linear-gradient(135deg, #FFE7A3, #FFF8E6); }
.bulk-step.is-max.is-on .bulk-dot { background: linear-gradient(135deg, var(--gold), #F5C451); }
@media (max-width: 380px) { .bulk-step span:not(.bulk-dot) { font-size: 11px; } .bulk-dot { width: 30px; height: 30px; } .bulk-steps::before, .bulk-steps::after { top: 13px; } }
.bulk-step span:not(.bulk-dot) i { display: block; font-style: normal; font-weight: 500; }
.bulk-head { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .bulk-head { grid-template-columns: minmax(0, 1fr) auto; } }
.bulk-status { grid-column: auto; }

/* ---------- Desk listings: change status right from the list ---------- */
.le-row-wrap { position: relative; }
.le-row-wrap .le-row { padding-bottom: 50px; }
.le-row-wrap .adm-row-bot { justify-content: flex-start; }
.le-qs { position: absolute; left: 14px; bottom: 12px; z-index: 1; }
.le-qs-select {
  appearance: none; -webkit-appearance: none; height: 30px; padding: 0 30px 0 12px; border-radius: 999px; cursor: pointer;
  font: 700 13.5px/1 var(--display); letter-spacing: .02em; border: 1px solid var(--line-2);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233E4A5A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.le-qs-select.is-live { background-color: var(--green-tint); color: var(--green-ink); border-color: #BDE7D2; }
.le-qs-select.is-draft { background-color: var(--blue-tint); color: var(--blue-ink); border-color: #BFE0FB; }
.le-qs-select.is-reserved { background-color: var(--gold-tint); color: var(--gold-ink); border-color: var(--gold-line); }
.le-qs-select.is-sold { background-color: var(--red-tint); color: var(--red-ink); border-color: #F5C4C0; }
.le-qs-select:focus-visible { outline: 2px solid var(--go-teal); outline-offset: 2px; }
.le-qs-select:disabled { opacity: .6; cursor: progress; }

/* ---------- Account editor: add lots of Pokémon at once ---------- */
.le-mon-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.le-import { margin-top: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--surface-2); }
.le-import summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; color: var(--go-teal-ink); }
.le-import[open] summary { border-bottom: 1px solid var(--line); }
.le-import-body { display: grid; gap: 12px; padding: 14px; }
.le-import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.le-import-result { margin: 0; font-size: 14.5px; }
.le-import-result:empty { display: none; }
.le-import-result.is-good { color: var(--green-ink); }
.le-import-result.is-warn { color: var(--gold-ink); }
.le-import-result.is-bad { color: var(--red-ink); }
/* No number boxes to show (e.g. only guaranteed accounts listed): the fanned cards sit in the middle */
.showcase.is-solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- Tap arrows on sideways rows (js/components/slide.js) ---------- */
.hs { position: relative; min-width: 0; }
.hs-btn {
  position: absolute; top: 50%; z-index: 4; width: 38px; height: 38px; margin-top: -19px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); box-shadow: 0 6px 18px -6px rgba(17, 26, 43, .45);
  transition: opacity .15s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.hs-btn:active { transform: scale(.92); }
.hs-btn:focus-visible { outline: 3px solid var(--blue, #1E9BFF); outline-offset: 2px; }
.hs-prev { left: 4px; }
.hs-next { right: 4px; }
.hs:not(.hs-on) .hs-btn, .hs.hs-start .hs-prev, .hs.hs-end .hs-next { opacity: 0; pointer-events: none; }
/* Small rows (tabs, chips, steps): smaller arrows that sit on a soft fade, so the edge looks "to be continued" */
.hs[data-for="chips"] .hs-btn, .hs[data-for="tabs"] .hs-btn, .hs[data-for="seg"] .hs-btn, .hs[data-for="legal-nav"] .hs-btn,
.hs[data-for="adm-views"] .hs-btn, .hs[data-for="otrack"] .hs-btn, .hs[data-for="co-tracker"] .hs-btn, .hs[data-for="chat-quick"] .hs-btn {
  width: 30px; height: 30px; margin-top: -15px;
}
.hs[data-for="chips"] .hs-prev, .hs[data-for="tabs"] .hs-prev, .hs[data-for="seg"] .hs-prev, .hs[data-for="adm-views"] .hs-prev { left: 0; }
.hs[data-for="chips"] .hs-next, .hs[data-for="tabs"] .hs-next, .hs[data-for="seg"] .hs-next, .hs[data-for="adm-views"] .hs-next { right: 0; }
/* Rows that sit in a flex or sticky layout: the wrapper takes the row's place */
.market .hs { flex: 1; min-width: 0; }
.market .hs .hs-prev { left: 2px; } .market .hs .hs-next { right: 2px; }
@media (min-width: 900px) {
  .hs[data-for="legal-nav"] { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
  .hs[data-for="legal-nav"] .legal-nav { position: static; }
  .hs[data-for="legal-nav"] .hs-btn { display: none; }
}
@media print { .hs-btn { display: none; } }