/* =====================================================
   ui.css - additions only. style.css is unchanged; every colour/radius comes from its variables.
   Replaces inline style="" attributes and adds accessibility + component styles.
   ===================================================== */

/* ---- Accessibility ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 1000;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
    font-weight: 700; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
nav a[aria-current="page"] { font-weight: 700; color: var(--primary-dark); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Toasts (flash messages) ---- */
.toast-region { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 900; max-width: min(420px, calc(100vw - 32px)); }
.toast-region .toast { position: static; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; animation: toast-in .25s ease-out; }
.toast-success { border-left: 5px solid #55b88f; }
.toast-error { border-left: 5px solid var(--danger); }
.toast-info { border-left: 5px solid #5b9bd5; }
.toast-close { background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.toast-out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Alerts / forms ---- */
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-weight: 500; }
.alert-success { background: #dff7ec; color: #116a4c; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-info { background: #e0f0ff; color: #1e4e8c; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-field .req { color: var(--danger); }
.form-field input[aria-invalid="true"] { border-color: var(--danger); }
.hint { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.field-error { display: block; color: var(--danger); margin-top: 4px; font-size: 13px; font-weight: 600; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
.ta-left { text-align: left; } .ta-right { text-align: right; } .ta-center { text-align: center; }

/* ---- Buttons / navigation helpers ---- */
.btn-block { display: block; width: 100%; text-align: center; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.pagination span { color: var(--muted); font-weight: 600; }

/* ---- Marketplace: filter bar ---- */
.mk-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.mk-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-tabs .btn { padding: 8px 20px; }
.mk-count { background: var(--danger); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; margin-left: 6px; }
.mk-search { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-search input[type="search"] { flex: 1; min-width: 180px; }
.mk-filters { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; }
.mk-filters summary { cursor: pointer; font-weight: 700; }
.mk-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; align-items: end; }
.mk-results { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

/* ---- Domain card (identical look to the old inline styles; fluid on small screens).
   Selectors are scoped to .dc-head so the old .market-header h3 / .price rules in style.css cannot override them. ---- */
.dc-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.dc-head .dc-title { margin: 0; font-family: 'Cinzel', serif; font-weight: 700; line-height: 1.1; text-align: center; font-size: clamp(28px, 7vw, 48px); overflow-wrap: anywhere; }
.dc-head .dc-title a { text-decoration: none; }
.dc-name {
    background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 30%, #6b6b6b 50%, #4a4a4a 70%, #1a1a1a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 200%;
}
.dc-sub { display: flex; align-items: center; gap: 12px; margin-top: -4px; }
.dc-ext { font-size: 18px; font-weight: 400; color: #6b6b6b; font-family: 'Cinzel', serif; }
.dc-head .dc-price { font-size: 13.5px; font-weight: 700; color: var(--primary); background: var(--bg); padding: 2px 10px; border-radius: 20px; white-space: nowrap; }
.dc-auction { display: flex; justify-content: center; gap: 24px; padding: 6px 0; font-size: 14px; color: var(--muted); }
.dc-time { font-weight: 600; color: var(--danger); }
.dc-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ================= Phase 2: discovery ================= */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--ink); font-size: 13px; text-decoration: none; }
a.chip:hover { border-color: var(--green); }
.chip-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-n { opacity: .6; font-size: 11px; }
.chip-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.mk-checks { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mk-checks label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.mk-checks input { width: auto; }
.mk-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mk-save { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mk-save-alert { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.mk-save-alert input { width: auto; }
.ai-form { margin-bottom: 8px; }
.result { display: flex; flex-direction: column; }
.result-why { margin: 6px 0 0; justify-content: center; }
.similar { margin-top: 40px; }
.about-text { white-space: pre-line; line-height: 1.6; }
.about-kw { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.saved-row, .inbox-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; text-decoration: none; color: inherit; }
.saved-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.saved-actions form { margin: 0; }
.inbox-unread { border-left: 5px solid var(--danger); }
.thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; max-height: 55vh; overflow-y: auto; padding: 4px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--border); }
.bubble-me { align-self: flex-end; background: var(--bg); }
.bubble-them { align-self: flex-start; background: var(--card); }
.bubble-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .bubble { max-width: 94%; } .toast-region { left: 12px; right: 12px; bottom: 12px; } }

/* ================= Phase 3: pricing, offers, leases ================= */
.buy-panel .price.big { font-size: 36px; font-weight: 800; color: var(--primary); text-align: center; margin: 4px 0 12px; }
.buy-panel .hint { text-align: center; margin: 0 0 4px; }
.buy-sep { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0; text-transform: uppercase; letter-spacing: .08em; }
.buy-more { border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.buy-more summary { cursor: pointer; font-weight: 700; }
.buy-more form { margin-top: 10px; }
.countdown { font-weight: 700; color: var(--danger); }
.pricing-opts { border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin: 16px 0; }
.pricing-opts legend { font-weight: 700; padding: 0 8px; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
label.check input { width: auto; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--border); border: 2px solid var(--card); }
.timeline .tl-accept::before { background: #55b88f; } .timeline .tl-decline::before, .timeline .tl-expire::before { background: var(--danger); }
.tl-msg { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.offer-actions { display: grid; gap: 16px; margin-top: 16px; }
.offer-actions form { margin: 0; }
.offer-counter { border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }
.wallet-pay { background: #ecfdf5; border-radius: 12px; padding: 16px; margin: 16px 0; }
.addr { word-break: break-all; }
.stats-grid .stat strong { font-size: 22px; }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ================= Phase 4: seller hub ================= */
.hub-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.hub-nav a { padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--ink); border: 1px solid transparent; font-weight: 600; font-size: 14px; }
.hub-nav a:hover { border-color: var(--border); }
.hub-nav a.active { background: var(--ink); color: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 16px 0; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.kpi .kpi-v { font-size: 26px; font-weight: 800; }
.kpi .kpi-l { color: var(--muted); font-size: 13px; }
.bar-chart { width: 100%; height: 80px; display: block; fill: var(--primary); }
.chart-card h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.chip-verified { background: #dff7ec; border-color: #55b88f; color: #116a4c; font-weight: 700; }
.dc-verified { margin: 4px auto 0; }
.seller-badge { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.stars { color: #e5a100; letter-spacing: 1px; }
.checklist { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: baseline; }
.check-done { color: #116a4c; font-weight: 700; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 12px 0; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.bulk-bar > div { min-width: 120px; }
td input[type="checkbox"] { width: auto; }
.row-error { color: var(--danger); font-size: 13px; }
.csv-box { width: 100%; min-height: 160px; font-family: ui-monospace, monospace; font-size: 13px; }
.review { border-top: 1px solid var(--border); padding: 12px 0; }
.review-reply { margin: 8px 0 0 16px; padding-left: 12px; border-left: 3px solid var(--border); }
.funnel { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.funnel > div { flex: 1; min-width: 120px; text-align: center; padding: 12px; background: var(--bg); border-radius: 12px; }
.funnel .arrow { flex: 0; align-self: center; color: var(--muted); background: none; min-width: 0; padding: 0; }

/* ================= Phase 6: platform ================= */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.help-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.help-article { max-width: 760px; }
.help-article h2 { margin-top: 28px; }
.help-article li { margin: 6px 0; }
.help-article .lead { font-size: 18px; color: var(--muted); }
.code-block { background: #0f2a22; color: #e6fff4; padding: 14px 16px; border-radius: 12px; overflow-x: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; max-width: 100%; }
.code-block:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inline-form input, .inline-form select { width: auto; min-width: 140px; flex: 1; margin: 0; }
.admin-console a.kpi { text-decoration: none; color: inherit; }
.admin-console a.kpi:hover { border-color: var(--primary); }
.kpi-alert { border-color: var(--danger) !important; }
.kpi-alert .kpi-v { color: var(--danger); }
.webhook-row { border-top: 1px solid var(--border); padding: 12px 0; }
.webhook-row:first-child { border-top: 0; }
.webhook-row p { margin: 4px 0; overflow-wrap: anywhere; }
.fee-calc { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.fee-calc input { max-width: 220px; margin: 0; }
.form-check { display: block; margin: 6px 0; }
.form-check input { width: auto; margin-right: 6px; }
.api-docs table code { white-space: nowrap; }
@media (max-width: 640px) { .inline-form input, .inline-form select { min-width: 0; width: 100%; } }

/* ================= Phase 7: payments ================= */
.receipt { max-width: 760px; }
.receipt-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.issues { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
@media print {
    .topbar, .footer, .no-print, .skip-link, .toast-region { display: none !important; }
    body { background: #fff !important; }
    .receipt .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ================= Phase 8: launch ================= */
.legal-doc h2, .legal-doc h3, .legal-doc h4 { margin-top: 24px; }
.legal-box { min-height: 360px; }
.maint-banner { margin: 0 auto 16px; max-width: 1180px; }
/* the footer now has 4 link columns (style.css sizes it for 3); its mobile rules in style.css still apply */
@media (min-width: 900px) { .footer { grid-template-columns: 2fr repeat(4, 1fr); } }

/* Live auctions (public/live.js): a brief pulse on the price when a new bid arrives. */
.live-flash { animation: live-flash 1.2s ease-out; }
@keyframes live-flash { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .live-flash { animation: none; } }

/* Listing images (R2): logo / mockup card at the top of a listing page. */
.listing-media { padding: 0; overflow: hidden; display: flex; justify-content: center; background: var(--card, #fff); }
.listing-media img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }

/* Mobile fix: style.css turns EVERY <nav> into the hidden drop-down menu below 900px. Only the site menu
   (#site-nav) should behave like that; in-page navs (dashboard tabs, pagination, breadcrumbs, category
   chips) were hidden or floated over the page on phones. */
@media (max-width: 900px) {
    nav:not(#site-nav) { display: flex; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
    nav.hub-nav:not(#site-nav) { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 0 20px; padding: 0 0 10px; border-bottom: 1px solid var(--border); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    nav.hub-nav::-webkit-scrollbar { display: none; }
    nav.hub-nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ---- Phone layout fixes (pages wider than the screen in the original) ----
   Grid items default to min-width:auto, so one long value (a wallet address, a wide table) stretched the whole
   page sideways. Let grid columns shrink, break long codes, and scroll wide tables inside their card. */
.grid-2 > *, .grid-3 > *, .admin-grid > *, .dashboard-grid > * { min-width: 0; }
main code { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .admin-content { overflow-x: auto; }
}
@media (max-width: 640px) {
  .card > table, .admin-content table, .lease-schedule { display: block; max-width: 100%; overflow-x: auto; }
  /* checkout: the two-column "payment instructions | scan to pay" box stacks on phones */
  main [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
/* Affiliate page: the domain picker's button keeps the size of the page's other buttons (forms stretch .btn). */
.ref-link-form { display: block; }
.ref-link-form .btn { width: auto; display: inline-flex; margin-top: 16px; }
/* Test mode (Admin -> Payments -> Network = testnet) */
.test-mode-banner { background: #fef3c7; color: #78350f; border-bottom: 1px solid #f59e0b; padding: 8px 16px; text-align: center; font-size: 14px; }
@media print { .test-mode-banner { display: block !important; } }
/* Admin -> Payouts: one transaction for several brokerage payouts */
.batch-form { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 16px; text-align: left; }
.batch-form label { flex-basis: 100%; font-weight: 600; }
.batch-form input { flex: 1 1 320px; min-width: 0; height: auto; margin: 0; }
.batch-form .btn { width: auto; }
.batch-form .hint { flex-basis: 100%; }

/* Classic admin pages share the console's layout: tabs on top, content on the page (no boxed panel). */
.admin-console > .admin-content { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; border-radius: 0; }

/* ================= Marketplace: AI name finder (ui/views/finder.ts) ================= */
.finder-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1000px) {
    .finder-layout { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 28px; }
    .finder-side { position: sticky; top: 96px; }
}
.finder-side, .finder-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.finder.card { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 22px; }
.finder-head { display: flex; gap: 12px; align-items: center; }
.finder-head h2 { margin: 0; font-size: 19px; }
.finder-head p { margin: 2px 0 0; font-size: 13.5px; color: #5e766c; }
.finder-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--mint2); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.finder-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.finder-form textarea { box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical; border: 1.5px solid var(--green); border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 15.5px; line-height: 1.45; background: #fbfefc; color: var(--ink); }
.finder-form textarea::placeholder { color: #6b8279; }
.finder-go { gap: 8px; min-height: 50px; font-size: 16px; }
.finder-label { display: block; font-size: 12.5px; font-weight: 700; color: #5e766c; letter-spacing: .02em; }
.finder-examples .chip-row, .finder-understood .chip-row, .finder-refine .chip-row { margin: 8px 0 0; }
.ask-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px; border-radius: 999px; background: var(--mint2); color: var(--primary-dark); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ask-chip:hover { background: #c9ecdc; }
.finder-also { margin: 8px 0 0; font-size: 13px; color: #5e766c; }

.view-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: #e3f3eb; max-width: 420px; }
.view-switch a { min-height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: #3d5a50; text-decoration: none; }
.view-switch a.on { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(23, 60, 49, .12); }
.view-switch .mk-count { margin-left: 0; }

.finder-results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.finder-results-head h2 { margin: 0; font-size: 21px; }
.finder-results-head span { font-size: 13.5px; color: #5e766c; }
.finder-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }

.match-card { display: flex; flex-direction: column; }
.match-badge { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--primary-dark); font-size: 12.5px; font-weight: 700; }
.match-why { margin: 8px 0 0; padding: 10px 12px; list-style: none; display: flex; flex-direction: column; gap: 6px; background: var(--bg); border-radius: 12px; }
.match-why li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: #2b4a3f; }
.match-why svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.match-card .dc-footer { margin-top: auto; padding-top: 12px; }
.match-card .match-why + .dc-footer { margin-top: 12px; }

.finder-refine { margin-top: 4px; }
.finder-browse { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 0 16px; }
.finder-browse > summary { min-height: 50px; display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; list-style: none; color: var(--ink); }
.finder-browse > summary::-webkit-details-marker { display: none; }
.finder-browse > summary svg { color: var(--primary-dark); }
.finder-browse-body { padding: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.finder-browse-body .chip-row { margin: 0; }
.finder-browse .mk-filters { background: var(--bg); }

/* Counts next to menu items and tabs (middleware/pending.ts, refreshed by ui.js): soft amber, not alarm red */
.nav-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #fff3dc; color: #6b4600; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; }
.nav-n[hidden] { display: none; }
.hub-nav a.active .nav-n, .hub-nav a[aria-current="page"] .nav-n { background: rgba(255, 210, 122, .22); color: #ffd27a; }
.mobile-toggle { position: relative; }
.nav-dot .nav-n { position: absolute; top: -4px; right: -6px; margin: 0; min-width: 18px; height: 18px; font-size: 11px; border: 2px solid #fff; }

/* Admin "Needs you" card (adminConsoleViews.ts needsYouCard) */
.needs-you { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 6px 0; margin: 0 0 20px; }
.needs-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px 6px; }
.needs-head h2 { margin: 0; font-size: 16px; }
.needs-head span { font-size: 13px; color: #5e766c; }
.needs-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid rgba(31, 112, 83, .1); text-decoration: none; color: var(--ink); }
.needs-row:hover { background: var(--bg); }
.needs-row svg { color: #5e766c; flex-shrink: 0; }
.needs-n { min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: 9px; background: #fff3dc; color: #8a5a00; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.needs-n.is-urgent { background: #fde8eb; color: #a52f40; }
.needs-text { flex: 1; font-size: 14.5px; }
.needs-clear { margin: 0; padding: 10px 16px 12px; color: #5e766c; font-size: 14px; }

/* Fixes found while checking the redesigned pages */
textarea { font-family: inherit; }

/* ================= Listing page (listingPages.ts listingPage + components.ts purchasePanel) ================= */
.lx { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.lx-hero { background: #fff; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; }
.lx-band { background: var(--mint); padding: 24px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.lx-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-dark); }
.lx-name { margin: 0; font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; color: #1f2a26; font-size: clamp(32px, 9vw, 56px); overflow-wrap: anywhere; }
.lx-name span { font-size: .62em; color: #5b6e66; }
.lx-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lx-trust span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--primary-dark); }
.bx { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bx-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bx-label { font-size: 14px; color: #5e766c; }
.bx-amount { font-size: 30px; font-weight: 700; color: var(--primary); letter-spacing: -.01em; white-space: nowrap; }
.bx-meta { margin: -6px 0 0; font-size: 13.5px; color: #5e766c; text-align: right; }
.bx .btn { min-height: 52px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.bx-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-row > * { flex: 1 1 calc(50% - 4px); min-width: 0; margin: 0; }
.bx-row > .bx-wide, .bx-row > details[open] { flex-basis: 100%; }
.bx-alt { min-height: 46px; width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(31, 112, 83, .25); background: #fff; color: var(--primary-dark); font: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; list-style: none; }
.bx-alt::-webkit-details-marker { display: none; }
.bx-alt:hover { background: var(--mint); }
.bx-more[open] > summary { margin-bottom: 10px; background: var(--mint); }
.bx-more form { display: flex; flex-direction: column; gap: 6px; }
.bx-save { margin: 0; }
.bx-bid { display: flex; flex-direction: column; gap: 6px; }
.bx-bid-row { display: flex; gap: 8px; }
.bx-bid-row input { flex: 1; min-width: 0; }
.bx-bid-row .btn { flex: 0 0 auto; min-height: 48px; }
.bx-note { margin: 0; font-size: 13px; color: #5e766c; text-align: center; }
.bx-off-msg { margin: 0; font-size: 18px; font-weight: 700; text-align: center; }
.bx-manage { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-manage > * { flex: 1 1 140px; margin: 0; }
.bx-manage .btn { width: 100%; min-height: 46px; }
.owner-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: #2b4a3f; font-size: 14px; text-align: center; }
.btn-outline-danger { background: #fff; color: var(--danger) !important; border: 1px solid #efb3bb; box-shadow: none; }
.btn-outline-danger:hover { background: #fdf0f2; }
.lx-seller { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.lx-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--mint2); color: var(--primary-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lx-seller-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lx-seller-text strong { font-size: 15px; }
.lx-seller-text span { font-size: 13px; color: #5e766c; }
.lx-chev { color: #5e766c; flex-shrink: 0; margin-left: auto; }
.lx-section { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.lx-section h2, .lx-protect h2 { margin: 0; font-size: 18px; }
.lx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-tile { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx-tile span { font-size: 12px; color: #5e766c; }
.lx-tile strong { font-size: 15.5px; overflow-wrap: anywhere; }
.lx-about { margin: 0; font-size: 15px; line-height: 1.6; color: #2b4a3f; }
.lx-muted { color: #5e766c; font-size: 14px; }
.lx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-protect { margin-top: 10px; padding: 18px; border-radius: 20px; background: #173c31; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.lx-protect ol { margin: 0; padding: 0; list-style: none; counter-reset: lx; display: flex; flex-direction: column; gap: 12px; }
.lx-protect li { counter-increment: lx; position: relative; padding-left: 38px; font-size: 14.5px; line-height: 1.45; color: #e3f3eb; }
.lx-protect li::before { content: counter(lx); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #55b88f; color: #0b2a20; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.lx-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lx-row { padding: 15px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.lx-row::-webkit-details-marker { display: none; }
.lx-row > svg:first-child { color: var(--primary-dark); flex-shrink: 0; }
.lx-ask[open] > .lx-row { border-radius: 18px 18px 0 0; border-bottom-color: transparent; }
.lx-ask[open] > .lx-row .lx-chev { transform: rotate(90deg); }
.lx-ask-body { background: #fff; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 18px 18px; padding: 0 16px 16px; }
.lx-ask-body .card { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.lx-ask-body .card > h3 { display: none; }
.lx-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.lx-mini { flex: 0 0 160px; padding: 16px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; text-align: center; }
.lx-mini strong { font-family: 'Cinzel', serif; text-transform: uppercase; font-size: 17px; color: #1f2a26; overflow-wrap: anywhere; }
.lx-mini span { font-size: 13px; color: #5e766c; }
.lx-comps .card { margin: 10px 0 0; }
.lx-admin { max-width: 720px; margin: 18px auto 0; padding: 12px 16px; border-radius: 16px; border: 1px dashed rgba(31, 112, 83, .35); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lx-admin > span { font-size: 13px; font-weight: 700; color: #5e766c; margin-right: auto; }
.lx-admin form { margin: 0; }
@media (max-width: 380px) { .lx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= Stories (/blog, /blog/:id) ================= */
.st { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; }
.st-head h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.st-head p { margin: 4px 0 0; color: #5e766c; font-size: 14px; }
.st-write { min-height: 42px; padding: 0 16px; border-radius: 12px; background: var(--primary); color: #fff !important; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.st-featured { border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--border); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.st-cover { min-height: 170px; background: #173c31; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 24px 16px; }
.st-flag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px; background: #55b88f; color: #0b2a20; font-size: 12px; font-weight: 700; }
.st-cover-name { font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 7vw, 40px); color: #eaf8f1; letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; }
.st-cover-name span { font-size: .6em; color: #9fd8bf; }
.st-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.st-body h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.st-featured:hover h2 { color: var(--primary-dark); }
.story-excerpt { margin: 0; color: #4d675d; line-height: 1.55; font-size: 14.5px; }
.story-by { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); }
.story-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mint2); color: var(--primary-dark); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.story-dot { color: #5e766c; }
.st-more { margin: 8px 0 0; font-size: 18px; }
.st-list { display: flex; flex-direction: column; gap: 10px; }
.st-item { padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: flex; gap: 12px; text-decoration: none; color: var(--ink); }
.st-item:hover strong { color: var(--primary-dark); }
.st-thumb { width: 76px; height: 76px; border-radius: 14px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tone-mint { background: var(--mint2); color: var(--primary-dark); }
.tone-dark { background: #173c31; color: #eaf8f1; }
.tone-amber { background: #fff3dc; color: #8a5a00; }
.st-item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-item-text strong { font-size: 15.5px; line-height: 1.3; }
.st-item-ex { font-size: 13px; color: #4d675d; line-height: 1.4; }
.st-item-meta { font-size: 12px; color: #6b8279; }
.st-invite { margin-top: 8px; padding: 18px; border-radius: 20px; background: var(--mint); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.st-invite h2 { margin: 0; font-size: 17px; }
.st-invite p { margin: 0; color: #4d675d; font-size: 14px; }
.st-invite .bx-alt { width: auto; padding: 0 16px; }
.st-empty { padding: 28px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--border); text-align: center; }
.st-read h1 { font-size: clamp(26px, 6vw, 40px); line-height: 1.2; margin: 6px 0 0; }
.st-cover-read { border-radius: 22px; min-height: 150px; }
.story-back { font-weight: 600; text-decoration: none; }
.story-body { font-size: 17px; line-height: 1.7; color: #23443a; }
.story-body p { margin: 0 0 1em; }
.story-body h2 { font-size: 22px; margin: 1.2em 0 .5em; }
.story-body h3 { font-size: 19px; margin: 1.1em 0 .4em; }
.story-body ul { margin: 0 0 1em; padding-left: 1.2em; }

/* ================= Support (/support) ================= */
.sp { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; color: var(--ink); }
.sp-hero { background: #173c31; color: #fff; border-radius: 24px; padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.sp-hero h1 { margin: 0; font-size: clamp(24px, 6vw, 32px); color: #fff; letter-spacing: -.01em; }
.sp-search { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 14px; background: #fff; color: #5e766c; margin: 0; }
.sp-search input { flex: 1; border: 0 !important; outline: none; box-shadow: none !important; background: transparent !important; font: inherit; font-size: 15px; color: var(--ink); padding: 12px 0 !important; margin: 0 !important; min-width: 0; }
.sp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .sp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sp-tile { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.sp-tile:hover { border-color: var(--green); }
.sp-tile-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--mint); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; }
.sp-tile strong { font-size: 15px; }
.sp-tile > span:last-child { font-size: 12.5px; color: #5e766c; }
.sp-section { display: flex; flex-direction: column; gap: 10px; }
.sp-section-head { display: flex; align-items: center; justify-content: space-between; }
.sp-section-head h2, .sp-form h2 { margin: 0; font-size: 18px; }
.sp-section-head span { font-size: 13px; color: #5e766c; }
.sp-convs { display: flex; flex-direction: column; gap: 10px; }
.sp-conv { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.sp-conv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sp-status > span { width: 8px; height: 8px; border-radius: 50%; }
.sp-status.is-open { color: #8a5a00; } .sp-status.is-open > span { background: #e0a100; }
.sp-status.is-answered { color: var(--primary-dark); } .sp-status.is-answered > span { background: var(--primary); }
.sp-bubble { margin: 0; max-width: 85%; padding: 10px 12px; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.sp-me { align-self: flex-end; background: var(--mint2); border-radius: 14px 14px 4px 14px; }
.sp-us { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; }
.sp-us strong { display: block; font-size: 12px; color: var(--primary-dark); }
.sp-when { font-size: 12px; color: #6b8279; }
.sp-empty { margin: 0; padding: 16px; border-radius: 16px; background: #fff; border: 1px dashed rgba(31, 112, 83, .3); color: #5e766c; font-size: 14px; }
.sp-form { padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.sp-form form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sp-topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-topics legend { font-size: 13px; font-weight: 600; color: #5e766c; margin-bottom: 8px; padding: 0; }
.sp-chip { position: relative; margin: 0; }
.sp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(31, 112, 83, .2); background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sp-chip input:checked + span { background: #173c31; border-color: #173c31; color: #fff; }
.sp-chip input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.sp-form label[for] { font-size: 13px; font-weight: 600; color: #5e766c; }
.sp-form textarea { font: inherit; font-size: 15px; line-height: 1.45; min-height: 120px; resize: vertical; }
.sp-form .btn { min-height: 50px; display: flex; align-items: center; justify-content: center; }
.sp-note { margin: 0; font-size: 13px; color: #5e766c; text-align: center; }
.bx-meta .countdown { font-size: inherit; font-weight: 600; color: var(--danger); margin: 0; padding: 0; background: none; display: inline; }
.bx-bid-row input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.bx-bid-row .btn { width: auto !important; flex: 0 0 auto; padding: 0 20px; margin: 0; }
.sp-search { flex-direction: row !important; flex-wrap: nowrap; }
.sp-search svg { flex-shrink: 0; }
.nav-dot .nav-n { background: #f5b93a; color: #3d2a00; }
.ext-hint { margin: 4px 0 10px; font-size: 13.5px; color: #5e766c; }
.ext-hint summary { cursor: pointer; font-weight: 600; }
.ext-hint p { margin: 6px 0 0; line-height: 1.6; word-spacing: 4px; }

/* Admin > Extensions */
.ext-card { margin: 0 0 16px; }
.ext-card h2 { font-size: 18px; margin: 0 0 12px; }
.ext-add-form { display: flex; gap: 8px; margin: 0; flex-direction: row !important; }
.ext-add-form input { flex: 1; min-width: 0; margin: 0; }
.ext-add-form .btn { width: auto !important; flex: 0 0 auto; margin: 0; }
.ext-list { list-style: none; margin: 0; padding: 0; }
.ext-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.ext-list li:first-child { border-top: 0; padding-top: 0; }
.ext-name { font-weight: 700; font-size: 16px; min-width: 70px; }
.ext-actions { margin-left: auto; display: flex; gap: 6px; }
.ext-act { margin: 0; display: inline; }
.ext-actions .btn { width: auto !important; }
.ext-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ext-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--mint2); color: var(--primary-dark); font-weight: 600; font-size: 14px; }
.ext-chip.is-off { background: #f3f3f1; color: #5b6461; }
.ext-x { border: 0; background: rgba(255, 255, 255, .7); color: inherit; font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 8px; cursor: pointer; }
.ext-x:hover { background: #fff; }
.ext-card h2 .hint { display: inline; font-size: 14px; font-weight: 500; }

/* Checkout: choosing a payment method (orderPages.ts checkoutPage) - pure CSS tabs, no script */
.pm { margin-top: 16px; }
.pm-title { font-weight: 700; margin: 0 0 10px; }
.pm-r { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 16px; background: #e3f3eb; margin-bottom: 16px; }
.pm-tab { flex: 1 1 auto; min-height: 42px; padding: 0 14px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14.5px; color: #3d5a50; cursor: pointer; margin: 0; }
.pm-panel { display: none; }
#pm-usdc:checked ~ .pm-tabs .pm-tab-usdc, #pm-stripe:checked ~ .pm-tabs .pm-tab-stripe, #pm-paypal:checked ~ .pm-tabs .pm-tab-paypal, #pm-wire:checked ~ .pm-tabs .pm-tab-wire, #pm-escrowcom:checked ~ .pm-tabs .pm-tab-escrowcom { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(23, 60, 49, .12); }
#pm-usdc:checked ~ .pm-panel-usdc, #pm-stripe:checked ~ .pm-panel-stripe, #pm-paypal:checked ~ .pm-panel-paypal, #pm-wire:checked ~ .pm-panel-wire, #pm-escrowcom:checked ~ .pm-panel-escrowcom { display: block; }
.pm-r:focus-visible + .pm-r, .pm-r:focus-visible ~ .pm-tabs { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 16px; }
.pm-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg); margin: 0 0 10px; }
.pm-total strong { font-size: 24px; color: var(--primary); }
.pm-detail { margin: 0 0 8px; font-size: 13.5px; color: #5e766c; }
.pm-note { margin: 0 0 14px; font-size: 14px; color: #4d675d; line-height: 1.5; }
.wire-ref { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--green); margin: 0 0 10px; }
.wire-ref span { font-size: 13px; color: #5e766c; }
.wire-ref code { font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.wire-bank { white-space: pre-wrap; font-family: inherit; background: var(--bg); padding: 14px 16px; border-radius: 14px; margin: 0 0 12px; }

/* Admin > Payment methods */
.pmx { margin: 0 0 16px; }
.pmx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pmx-head h2 { margin: 0; font-size: 19px; }
.pmx-state { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #f0f2f1; color: #5b6461; }
.pmx-state.is-on { background: var(--mint2); color: var(--primary-dark); }
.pmx-state.is-todo { background: #fff3dc; color: #8a5a00; }
.pmx-todo { padding: 12px 14px; border-radius: 12px; background: #fffaf0; border: 1px solid #f1d199; margin: 10px 0; font-size: 14px; }
.pmx-todo ul { margin: 6px 0 0; padding-left: 18px; }
.pmx-todo li { margin: 4px 0; overflow-wrap: anywhere; }
.pmx-hook { font-size: 13.5px; overflow-wrap: anywhere; }
.pmx-form { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.pmx-form label { font-weight: 600; font-size: 14px; }
.pmx-form textarea { font: inherit; }
.pmx-form .btn { align-self: flex-start; margin-top: 8px; width: auto !important; }
.pmx-switch { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.pmx-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }

/* ---- Domain appraisal (/appraisal): one column, phone first ---- */
.ap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; color: #173c31; }
.ap h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ap-hero { background: #173c31; color: #fff; border-radius: 24px; padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ap-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #9fd8bf; }
.ap-hero h1 { margin: 0; color: #fff; font-size: clamp(26px, 6vw, 34px); line-height: 1.2; letter-spacing: -.01em; }
.ap-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ap-input { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; background: #fff; color: #5e766c; }
.ap-input input { flex: 1; min-width: 0; border: 0 !important; outline: none; box-shadow: none !important; background: transparent !important; font: inherit; font-size: 16px; color: #173c31; padding: 0 !important; margin: 0 !important; height: 100%; }
.ap-go { height: 50px; border: 0; border-radius: 14px; background: #55b88f; color: #0b2a20; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ap-go:hover { background: #6fc7a1; }
.ap-input:focus-within { outline: 3px solid #9fd8bf; outline-offset: 2px; }
.ap-sub, .ap-err { margin: 0; font-size: 13px; color: #b9dccb; }
.ap-err { color: #ffd27a; font-weight: 600; }
@media (min-width: 640px) { .ap-form { flex-direction: row; } .ap-input { flex: 1; } .ap-go { padding: 0 28px; height: 52px; } }
.ap-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff3dc; color: #6b4600; font-size: 14px; }
.ap-card { border-radius: 24px; background: #fff; border: 1px solid rgba(31,112,83,.12); overflow: hidden; }
.ap-head { padding: 22px 18px 18px; background: #eaf8f1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ap-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(24px, 7vw, 40px); letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; line-height: 1.15; }
.ap-name span { font-size: .6em; color: #0d6f4f; }
.ap-conf { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: #0d6f4f; }
.ap-conf-low { color: #8a5a00; }
.ap-body { padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.ap-value { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ap-value span { font-size: 13.5px; color: #5e766c; }
.ap-value strong { font-size: 40px; color: #168a63; letter-spacing: -.02em; line-height: 1.1; }
.ap-range { display: flex; flex-direction: column; gap: 8px; }
.ap-track { position: relative; height: 10px; border-radius: 999px; background: #e3efe9; }
.ap-fill { position: absolute; left: 10%; right: 10%; top: 0; bottom: 0; border-radius: 999px; background: #9fd8bf; }
.ap-dot { position: absolute; top: -5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #168a63; border: 3px solid #fff; box-sizing: border-box; }
.ap-ends { display: flex; justify-content: space-between; font-size: 13px; }
.ap-ends span span { color: #5e766c; }
.ap-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-tiles div { padding: 10px; border-radius: 14px; background: #f3fbf7; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-tiles span { font-size: 11.5px; color: #4d675d; font-weight: 600; }
.ap-tiles strong { font-size: 16px; overflow-wrap: anywhere; }
.ap-sec { display: flex; flex-direction: column; gap: 10px; }
.ap-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ap-sec-head span { font-size: 13px; color: #5e766c; white-space: nowrap; }
.ap-list { border-radius: 20px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; }
.ap-row { padding: 13px 16px; display: flex; align-items: center; gap: 12px; color: #173c31; text-decoration: none; }
.ap-row + .ap-row { border-top: 1px solid rgba(31,112,83,.1); }
.ap-comp { justify-content: space-between; }
.ap-comp:hover { background: #f3fbf7; color: #173c31; }
.ap-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-ic-up { background: #d9f2e7; color: #0d6f4f; }
.ap-ic-down { background: #fff3dc; color: #8a5a00; }
.ap-ic-neutral { background: #eef2f0; color: #4d675d; }
.ap-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-txt strong { font-size: 14.5px; overflow-wrap: anywhere; }
.ap-txt span { font-size: 12.5px; color: #5e766c; }
.ap-eff { font-size: 12px; font-weight: 700; }
.ap-eff-up { color: #0d6f4f; } .ap-eff-down { color: #8a5a00; } .ap-eff-neutral { color: #4d675d; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(31,112,83,.25); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.ap-chip-on { background: #173c31; border-color: #173c31; color: #fff; }
.ap-small { margin: 0; font-size: 13px; color: #5e766c; }
.ap-more { font-size: 14px; font-weight: 600; }
.ap-ai { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(31,112,83,.12); }
.ap-ai-head { display: flex; align-items: center; gap: 8px; }
.ap-ai p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4d675d; }
.ap-tag { padding: 5px 10px; border-radius: 999px; background: #f3fbf7; font-size: 12.5px; font-weight: 600; }
.ap-cta { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .ap-cta { flex-direction: row; } .ap-cta .ap-btn { flex: 1; } }
.ap-btn { height: 52px; border-radius: 14px; background: #168a63; color: #fff !important; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 16px; text-align: center; }
.ap-btn:hover { background: #0d6f4f; }
.ap-btn-alt { background: #fff; border: 1px solid rgba(31,112,83,.25); color: #0d6f4f !important; font-size: 15px; }
.ap-btn-alt:hover { background: #eaf8f1; }
.ap-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5e766c; }

/* ---- Domain card (/domains, home, AI finder, search): name on mint, price row, one action ---- */
.dcx { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid rgba(31,112,83,.12); overflow: hidden; color: #173c31; transition: box-shadow .2s, transform .2s; }
.dcx:hover { box-shadow: 0 10px 28px rgba(23,60,49,.10); transform: translateY(-2px); }
.dcx:focus-within { outline: 3px solid #9fd8bf; outline-offset: 2px; }
.dcx-head { padding: 14px 16px 16px; background: #eaf8f1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 64px; justify-content: center; }
.dcx-tags { align-self: stretch; display: flex; flex-wrap: wrap; gap: 6px; }
.dcx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #fff; color: #0d6f4f; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.dcx-tag-live { color: #a52f40; }
.dcx-tag-match { background: #173c31; color: #fff; }
.dcx-dot { width: 6px; height: 6px; border-radius: 50%; background: #a52f40; }
.dcx-name { margin: 0; font-family: 'Cinzel', serif; font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: .02em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.dcx-name.dcx-sm { font-size: 26px; } .dcx-name.dcx-xs { font-size: 21px; }
.dcx-name a { color: #173c31; text-decoration: none; }
.dcx-name a span { font-size: .55em; color: #0d6f4f; }
.dcx-stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.dcx-stretch:focus { outline: none; }
.dcx-body { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dcx-price, .dcx-ends { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcx-ends { align-items: flex-end; text-align: right; }
.dcx-price span, .dcx-ends span { font-size: 12px; color: #5e766c; font-weight: 600; }
.dcx-price strong { font-size: 19px; overflow-wrap: anywhere; }
.dcx-ends strong { font-size: 15px; color: #a52f40; white-space: nowrap; }
.dcx-view, .dcx-bid { position: relative; z-index: 1; text-decoration: none; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dcx-view { height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(31,112,83,.25); color: #0d6f4f; font-size: 14px; gap: 6px; flex-shrink: 0; background: #fff; }
.dcx-view:hover { background: #eaf8f1; color: #0d6f4f; }
.dcx-bid { margin: 0 16px 16px; height: 46px; border-radius: 12px; background: #168a63; color: #fff !important; font-size: 15px; }
.dcx-bid:hover { background: #0d6f4f; }
.dcx .match-why { margin: 0 16px 14px; position: relative; z-index: 1; }
.dcx.match-card .dcx-bid { margin-top: auto; }

/* ---- Home page (.hm) ---- */
.hm { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; color: #173c31; }
.hm h2 { margin: 0; font-size: 20px; font-weight: 700; }
.hm-hero { border-radius: 26px; background: #173c31; color: #fff; padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.hm-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #9fd8bf; }
.hm-hero h1 { margin: 0; color: #fff; font-size: clamp(28px, 7vw, 48px); line-height: 1.12; letter-spacing: -.015em; max-width: 16ch; }
.hm-hero > p { margin: 0; font-size: 15px; line-height: 1.5; color: #c9e7d9; max-width: 52ch; }
.hm-ask { display: flex; flex-direction: column; gap: 10px; margin: 0; max-width: 640px; }
.hm-ask-box { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 6px 0 14px; border-radius: 16px; background: #fff; }
.hm-ask-box:focus-within { outline: 3px solid #9fd8bf; outline-offset: 2px; }
.hm-ask-icon { color: #0d6f4f; display: flex; flex-shrink: 0; }
.hm-ask-box input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: none; box-shadow: none !important; background: transparent !important; font: inherit; font-size: 16px; color: #173c31; padding: 0 !important; margin: 0 !important; }
.hm-ask-box button { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #168a63; color: #fff; font: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer; }
.hm-ask-box button:hover { background: #0d6f4f; }
.hm-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hm-try span { font-size: 12.5px; color: #9fd8bf; font-weight: 600; }
.hm-try a { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #eaf8f1; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; }
.hm-try a:hover { background: rgba(255,255,255,.16); color: #fff; }
.hm .hm-actions { display: grid !important; width: 100%; box-sizing: border-box; flex-wrap: nowrap; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); max-width: 640px; }
.hm .hm-actions a { flex: initial; margin: 0; min-width: 0; padding: 12px 6px 10px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.hm-actions a:hover { background: rgba(255,255,255,.16); color: #fff; }
.hm-actions svg { color: #9fd8bf; }
.hm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.hm-stats > div { padding: 12px; border-radius: 16px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-stats strong { font-size: 22px; line-height: 1.2; }
.hm-stats span { font-size: 12.5px; color: #4d675d; font-weight: 600; }
.hm-stats .hm-red { color: #a52f40; }
.hm-escrow { gap: 4px !important; color: #0d6f4f; }
.hm-sec, .hm-market { display: flex; flex-direction: column; gap: 12px; }
.hm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-sec-head a { font-size: 14px; font-weight: 600; }
.hm-tabs { max-width: 420px; }
.hm-tabs label { min-height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: #3d5a50; cursor: pointer; }
.hm-tabs input:checked + label { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(23,60,49,.12); }
.hm-tabs input:focus-visible + label { outline: 3px solid #9fd8bf; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.hm-market:has(#hv-auc:checked) .dcx[data-kind="buy"], .hm-market:has(#hv-buy:checked) .dcx[data-kind="auction"] { display: none; }
.hm-btn, .hm-btn-alt { height: 48px; border-radius: 14px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 18px; }
.hm-btn { background: #168a63; color: #fff !important; }
.hm-btn:hover { background: #0d6f4f; }
.hm-btn-alt { background: #fff; border: 1px solid rgba(31,112,83,.25); color: #0d6f4f !important; }
.hm-btn-alt:hover { background: #eaf8f1; }
.hm-empty { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hm-empty p { margin: 0; color: #4d675d; }
.hm-how { padding: 20px 18px; border-radius: 22px; background: #173c31; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.hm-how h2 { color: #fff; }
.hm-how ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
@media (min-width: 760px) { .hm-how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-how li { display: flex; gap: 12px; align-items: flex-start; }
.hm-how li > span { width: 28px; height: 28px; border-radius: 50%; background: #55b88f; color: #0b2a20; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-how strong { font-size: 15px; }
.hm-how p { margin: 2px 0 0; font-size: 13.5px; color: #c9e7d9; line-height: 1.45; }
.hm-sold { border-radius: 20px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; }
.hm-sold a { padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: #173c31; }
.hm-sold a + a { border-top: 1px solid rgba(31,112,83,.1); }
.hm-sold a:hover { background: #f3fbf7; }
.hm-sold-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; text-transform: uppercase; overflow-wrap: anywhere; }
.hm-sold-name span { font-size: .75em; color: #0d6f4f; }
.hm-sold strong { color: #0d6f4f; font-size: 15px; white-space: nowrap; }
.hm-sell { padding: 20px 18px; border-radius: 22px; background: #eaf8f1; display: flex; flex-direction: column; gap: 10px; }
.hm-sell p { margin: 0; font-size: 14.5px; color: #4d675d; line-height: 1.5; }
.hm-sell > div { display: flex; gap: 8px; }
.hm-sell > div a { flex: 1; }
@media (min-width: 760px) { .hm-sell > div a { flex: 0 0 auto; } .hm-hero { padding: 40px 36px 28px; } }

/* ---- Deals: liquidation + wholesale packs (/deals, /deals/packs/*, cards, notices) ---- */
.dcx-tag-liq { background: #fff3dc; color: #6b4600; }
.dcx-amber { color: #8a5a00 !important; }
.hm-actions.hm-actions-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
.hm .hm-actions a.hm-deals { background: #fff3dc; color: #6b4600; }
.hm .hm-actions a.hm-deals svg { color: #8a5a00; }
.hm .hm-actions a.hm-deals:hover { background: #ffe9bf; color: #6b4600; }
.dl, .pk { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; color: #173c31; }
.dl h2, .pk h2 { margin: 0; font-size: 19px; font-weight: 700; }
.dl-head { display: flex; flex-direction: column; gap: 6px; }
.dl-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #8a5a00; }
.dl-head h1 { margin: 0; font-size: clamp(30px, 6vw, 42px); letter-spacing: -.01em; }
.dl-head p { margin: 0; font-size: 15px; color: #4d675d; line-height: 1.5; max-width: 60ch; }
.dl-tabs { max-width: 460px; }
.dl-n { margin-left: 4px; font-size: 12.5px; color: #8a5a00; }
.dl-sec { display: flex; flex-direction: column; gap: 10px; }
.dl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dl-sec-head span { font-size: 13px; color: #5e766c; }
.dl-sub { margin: 0; font-size: 13.5px; color: #5e766c; line-height: 1.45; }
.dl-empty { margin: 0; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(31,112,83,.12); color: #4d675d; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.dl-card { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(31,112,83,.12); text-decoration: none; color: #173c31; display: flex; flex-direction: column; gap: 10px; }
.dl-card:hover { box-shadow: 0 10px 28px rgba(23,60,49,.10); color: #173c31; }
.dl-top, .dl-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dl-bottom { align-items: flex-end; }
.dl-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 21px; text-transform: uppercase; overflow-wrap: anywhere; }
.dl-name span, .pk-row-name span { font-size: .62em; color: #0d6f4f; }
.dl-day { font-size: 12px; font-weight: 700; color: #8a5a00; white-space: nowrap; }
.dl-last, .dl-red { color: #a52f40 !important; }
.dl-amber { color: #8a5a00; }
.dl-ladder { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dl-ladder span { height: 6px; border-radius: 999px; background: #eef2f0; }
.dl-ladder .dl-past { background: #e3c48a; }
.dl-ladder .dl-today { background: #8a5a00; }
.dl-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dl-col > span { font-size: 12px; color: #5e766c; font-weight: 600; }
.dl-col strong { font-size: 19px; }
.dl-col em { font-style: normal; font-size: 12.5px; color: #0d6f4f; font-weight: 600; }
.dl-right { align-items: flex-end; text-align: right; }
.dl-right strong { font-size: 15px; }
.dl-sell { padding: 20px 18px; border-radius: 22px; background: #eaf8f1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dl-sell p { margin: 0; color: #4d675d; line-height: 1.5; }
.pk-card { border-radius: 22px; background: #fff; border: 1px solid rgba(31,112,83,.12); text-decoration: none; color: #173c31; overflow: hidden; display: flex; flex-direction: column; }
.pk-card:hover { box-shadow: 0 10px 28px rgba(23,60,49,.10); color: #173c31; }
.pk-card-top { padding: 16px; background: #eaf8f1; display: flex; flex-direction: column; gap: 10px; }
.pk-dark .pk-card-top { background: #173c31; color: #fff; }
.pk-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pk-count { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: #173c31; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.pk-dark .pk-count, .pk-hero .pk-count { background: #55b88f; color: #0b2a20; }
.pk-tlds { font-size: 12.5px; color: #4d675d; }
.pk-dark .pk-tlds { color: #9fd8bf; }
.pk-title { font-size: 18px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-chips span { padding: 4px 9px; border-radius: 8px; background: #fff; font-family: 'Cinzel', serif; font-size: 12.5px; font-weight: 700; }
.pk-dark .pk-chips span { background: rgba(255,255,255,.1); }
.pk-chips .pk-more { font-family: inherit; font-weight: 600; color: #4d675d; }
.pk-dark .pk-chips .pk-more { color: #9fd8bf; }
.pk-card-bottom { padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pk-est { color: #173c31; }
.pk-back { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.pk-hero { border-radius: 24px; background: #fff; border: 1px solid rgba(31,112,83,.12); overflow: hidden; }
.pk-hero-top { padding: 20px 18px; background: #173c31; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.pk-hero-top h1 { margin: 0; color: #fff; font-size: clamp(24px, 5vw, 34px); line-height: 1.2; }
.pk-by { font-size: 13.5px; color: #c9e7d9; }
.pk-hero-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.pk-price { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pk-price > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.pk-price > span:first-child span { font-size: 13px; color: #5e766c; }
.pk-price strong { font-size: 34px; color: #168a63; letter-spacing: -.02em; line-height: 1.1; }
.pk-per { padding: 6px 10px; border-radius: 12px; background: #eaf8f1; font-size: 13px; font-weight: 700; color: #0d6f4f; white-space: nowrap; }
.pk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk-tiles div { padding: 10px; border-radius: 14px; background: #f3fbf7; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-tiles span { font-size: 11.5px; color: #4d675d; font-weight: 600; }
.pk-tiles strong { font-size: 15px; overflow-wrap: anywhere; }
.pk-buy { height: 52px; font-size: 16px; }
.pk-note { margin: 0; font-size: 12.5px; color: #5e766c; text-align: center; }
.pk-own { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #4d675d; }
.pk-inline { margin: 0; }
.pk-list summary { cursor: pointer; font-weight: 700; color: #0d6f4f; padding: 6px 0; }
.pk-list[open] + .pk-preview { display: none; }
.pk-rows { border-radius: 20px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; }
.pk-rows > div { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pk-rows > div + div { border-top: 1px solid rgba(31,112,83,.1); }
.pk-row-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; text-transform: uppercase; overflow-wrap: anywhere; }
.pk-rows strong { font-size: 14px; }
.pk-csv { font-size: 14px; font-weight: 600; }
.dl-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #eaf8f1; color: #173c31; margin: 0 auto 8px; max-width: 1100px; font-size: 14.5px; line-height: 1.45; }
.dl-notice svg { flex-shrink: 0; color: #0d6f4f; margin-top: 1px; }
.dl-notice-liq { background: #fff3dc; color: #6b4600; }
.dl-notice-liq svg { color: #8a5a00; }
.dl-notice + .dl-ladder { max-width: 1100px; margin: 0 auto 14px; }
.dl-banner { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #fff3dc; color: #6b4600 !important; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 14px; max-width: 520px; }
.dl-banner span { flex: 1; }
.dl-banner:hover { background: #ffe9bf; }
.dl-band { padding: 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; gap: 10px; }
.dl-band-row { padding: 14px; border-radius: 16px; background: #eaf8f1; text-decoration: none; color: #173c31; display: flex; align-items: center; gap: 12px; }
.dl-band-row:hover { color: #173c31; filter: brightness(.98); }
.dl-band-liq { background: #fff3dc; }
.dl-band-ic { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #0d6f4f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dl-band-liq .dl-band-ic { color: #8a5a00; }
.dl-band-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-band-txt strong { font-size: 15px; }
.dl-band-txt span { font-size: 13px; color: #4d675d; }
.dl-band-liq .dl-band-txt span { color: #6b4600; }
/* Sell form: liquidation note */
.lq-note { margin: 12px 0; padding: 14px; border-radius: 14px; background: #fff3dc; color: #6b4600; }
.lq-note p { margin: 6px 0; font-size: 14px; }
.lq-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lq-steps li { padding: 6px 2px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: center; font-size: 11px; }
.lq-steps strong { font-size: 15px; color: #173c31; }
/* Dashboard + order pages for packs */
.pk-link { margin: 0 0 10px; font-size: 14px; }
.pk-mine { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pk-mine-row { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-mine-row form { margin: 0; }
.pk-new { max-width: 560px; }
.pk-h { margin: 18px 0 8px; font-size: 17px; }
.pk-names { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-names span { padding: 4px 9px; border-radius: 8px; background: #eaf8f1; font-size: 13px; font-weight: 600; }
.pk-code-form { display: grid; gap: 8px; margin: 10px 0 14px; }
.pk-code-form label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; }
.pk-code-form span { font-weight: 600; overflow-wrap: anywhere; }
.pk-code-form input { margin: 0 !important; }
@media (max-width: 520px) { .pk-code-form label { grid-template-columns: 1fr; gap: 4px; } }
.pk-codes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pk-codes > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(31,112,83,.1); }
.pk-codes > div > span { flex: 1 1 160px; font-weight: 600; }
.pk-progress { height: 8px; border-radius: 999px; background: #e3efe9; overflow: hidden; margin-bottom: 10px; }
.pk-progress span { display: block; height: 100%; background: #168a63; border-radius: 999px; }
.pk-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; margin: 10px 0; }
.pk-check label, .pk-check > div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f3fbf7; font-size: 14px; overflow-wrap: anywhere; }
.pk-check input { width: 18px; height: 18px; margin: 0 !important; accent-color: #168a63; flex-shrink: 0; }
.pk-tick { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(31,112,83,.35); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.pk-tick-on { background: #168a63; border-color: #168a63; color: #fff; }

/* ---- Sell page: "How do you want to sell?" (matches the approved Deals design) ---- */
.sell-modes { margin: 16px 0; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sell-modes legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #173c31; }
.sell-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; clear: both; }
.sell-mode { position: relative; padding: 12px; border-radius: 14px; border: 1px solid rgba(31,112,83,.2); display: flex; flex-direction: column; gap: 3px; cursor: pointer; margin: 0 !important; background: #fff; }
.sell-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sell-mode strong { font-size: 14.5px; color: #173c31; }
.sell-mode span { font-size: 12.5px; color: #5e766c; font-weight: 400; }
.sell-mode:has(input:checked) { border: 2px solid #168a63; background: #eaf8f1; padding: 11px; }
.sell-mode-liq:has(input:checked) { border-color: #8a5a00; background: #fff3dc; }
.sell-mode-liq:has(input:checked) strong, .sell-mode-liq:has(input:checked) span { color: #6b4600; }
.sell-mode:has(input:focus-visible) { outline: 3px solid #9fd8bf; outline-offset: 2px; }
.sell-modes .lq-note { margin: 0; }
.pk-note-sell { background: #eaf8f1; color: #173c31; }
.pk-note-sell .btn { margin-top: 6px; }
/* ---- Dashboard Listings: deals intro + selection bar ---- */
.deal-intro { margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; background: #fff3dc; color: #6b4600; display: flex; flex-direction: column; gap: 6px; }
.deal-intro h2 { margin: 0; font-size: 17px; color: #6b4600; }
.deal-intro p { margin: 0; font-size: 14px; line-height: 1.5; }
.deal-intro a { font-weight: 700; color: #6b4600; }
.deal-bar { position: sticky; bottom: 12px; z-index: 5; margin: 12px 0; padding: 12px 14px; border-radius: 20px; background: #173c31; color: #fff; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; box-shadow: 0 10px 28px rgba(23,60,49,.22); }
.deal-bar [data-sel-count] { font-weight: 700; font-size: 15px; }
.deal-bar .btn { margin: 0; height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; border: 0; }
.deal-bar .deal-liq { background: rgba(255,255,255,.12); color: #fff; }
.deal-bar .deal-pack { background: #55b88f; color: #0b2a20; opacity: .55; }
.deal-bar .deal-pack.is-ready { opacity: 1; }
@media (max-width: 520px) { .deal-bar { grid-template-columns: 1fr 1fr; } .deal-bar [data-sel-count] { grid-column: 1 / -1; } }
.lq-steps li { padding: 6px 0; min-width: 0; white-space: nowrap; }
.lq-steps li span { font-size: 10px; letter-spacing: -.01em; }
.pk-new { padding: 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(31,112,83,.12); display: flex; flex-direction: column; gap: 4px; }
.pk-new h2 { margin: 0 0 6px; font-size: 18px; }
.lq-appr { margin: 8px 0 0 !important; padding: 10px 12px; border-radius: 12px; background: #fff; color: #173c31; font-size: 13.5px !important; }
.lq-appr a { color: #0d6f4f; }
.deal-bar { grid-template-columns: 1fr 1fr !important; }
.deal-bar-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.deal-bar-head [data-sel-est] { font-size: 13px; color: #9fd8bf; }
.deal-bar .deal-pack { order: 0; }
.pf-name { font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; }
.pk-per-line { margin: 4px 0 8px; font-size: 13.5px; color: #4d675d; }
.pk-check-line { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; margin: 4px 0 12px !important; }
.pk-check-line input { width: 20px; height: 20px; margin: 0 !important; accent-color: #168a63; }
.pk-foot { margin: 10px 0 0; font-size: 12.5px; color: #5e766c; text-align: center; }
.pk-actions { display: flex; gap: 6px; }
.pk-actions form { margin: 0; }
.dl-tabs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.dl-more { font-size: 14px; font-weight: 600; }
.pk-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-row-sub { font-size: 12px; color: #5e766c; }
.pk-more-rows { border-top: 1px solid rgba(31,112,83,.1); }
.pk-more-rows summary { list-style: none; cursor: pointer; padding: 14px 16px; text-align: center; font-weight: 700; color: #0d6f4f; }
.pk-more-rows summary::-webkit-details-marker { display: none; }
.pk-more-rows[open] summary { display: none; }
.pk-rows-rest > div { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pk-rows-rest > div + div { border-top: 1px solid rgba(31,112,83,.1); }
.pk-offer { display: flex; flex-direction: column; }
.pk-offer summary { list-style: none; cursor: pointer; }
.pk-offer summary::-webkit-details-marker { display: none; }
.pk-offer[open] summary { display: none; }
.pk-offer-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #f3fbf7; }
.pk-offer-form label { font-weight: 700; font-size: 14px; }
.pk-offer-form > div { display: flex; gap: 8px; }
.pk-offer-form input { flex: 1; min-width: 0; margin: 0 !important; }
.pk-offer-form .hm-btn { height: 46px; }
.dl-tabs.dl-tabs-2 { max-width: none; }

/* ---- DNS TXT record (Verify domains): stacked rows, the value wraps on a phone ---- */
.txt-rec { margin: 0; border-radius: 16px; background: #fff; border: 1px solid rgba(31,112,83,.12); overflow: hidden; }
.txt-rec > div { padding: 12px 16px; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; }
.txt-rec > div + div { border-top: 1px solid rgba(31,112,83,.1); }
.txt-rec dt { font-weight: 700; color: #4d675d; }
.txt-rec dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.txt-val dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.txt-val code { font-size: 14px; word-break: break-all; padding: 6px 8px; border-radius: 8px; background: #f3fbf7; }