/* Portal pages: account, saved designs, orders.
   Tokens are lifted from index.html so the portal reads as the same product, not a bolted-on admin
   screen. These pages deliberately do NOT load model-viewer or any glTF — booting a WebGL scene to
   read an order list is indefensible on a phone. */

:root {
  --ink: #f5f5f5;
  --mut: #8f8f8f;
  --faint: #5c5c5c;
  --bg: #0a0a0a;
  --panel: #050505;
  --card: #151515;
  --field: #101010;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .17);
  --accent: #f40009;
  --accent-ink: #ffffff;
  --accent-dim: rgba(244, 0, 9, .16);
  --danger: #ff6b5e;
  --danger-dim: rgba(255, 107, 94, .12);
  --soft: #dbdbdb;
  --label: #b9b9b9;
  --gutter: 36px;
  --radius: 4px;
  --radius-lg: 8px;
  --disp: "Archivo", Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, serif;

  font-family: var(--disp);
  color: var(--ink);
  background: var(--bg);
  color-scheme: dark;
}

* { box-sizing: border-box }
/* The UA's [hidden] rule is display:none, but any class here that sets display wins over it on
   specificity -- so a `hidden` label would still render. Restate it with enough weight to stick. */
[hidden] { display: none !important }
body { margin: 0; min-height: 100vh; background: var(--bg) }
a { color: var(--accent) }
button { font-family: inherit }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- header ---- */
.p-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px var(--gutter); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; background: var(--bg);
}
.p-head .wordmark img { height: 46px; display: block }
.p-nav { display: flex; align-items: center; gap: 6px }
.p-nav a, .p-nav button {
  border: 1px solid transparent; background: none; color: var(--mut);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; padding: 9px 12px; border-radius: var(--radius);
  cursor: pointer;
}
.p-nav a:hover, .p-nav button:hover { color: var(--ink) }
.p-nav a.active { color: var(--accent); border-color: var(--line2) }

/* ---- layout ---- */
.p-wrap { max-width: 1080px; margin: 0 auto; padding: 40px var(--gutter) 90px }
.p-wrap.narrow { max-width: 460px }
.p-eyebrow {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.p-eyebrow:before { content: ''; width: 7px; height: 7px; background: var(--accent) }
h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.02; margin: 0 0 10px; font-weight: 900; font-stretch: 112%; letter-spacing: -.035em; text-transform: uppercase }
h2 { font-size: 15px; margin: 0 0 6px; letter-spacing: -.01em }
.p-sub { color: var(--mut); font-size: 13px; line-height: 1.6; margin: 0 0 28px; max-width: 56ch }

/* ---- forms ---- */
.p-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px }
.p-field { display: block; margin-bottom: 14px }
.p-field span {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--label);
}
input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line2); border-radius: var(--radius);
  background: var(--field); color: var(--ink); font: inherit; font-size: 14px;
}
/* iOS zooms the page into any field under 16px; on touch screens the fields are 16px. */
@media (hover: none) and (pointer: coarse) {
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea { font-size: 16px }
}
input::placeholder { color: var(--faint) }
.p-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

.p-btn {
  width: 100%; padding: 14px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(160deg, #ff3a41 0%, var(--accent) 46%, #b80007 100%);
  color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.p-btn:hover { filter: brightness(1.07) }
.p-btn[disabled] { opacity: .55; cursor: default; filter: none }
.p-btn.ghost { background: none; border: 1px solid var(--line2); color: var(--ink) }
.p-btn.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none }
.p-btn.danger { background: none; border: 1px solid var(--line2); color: var(--danger) }
.p-btn.danger:hover { background: var(--danger-dim); border-color: var(--danger) }

.p-link {
  display: inline-block; margin-top: 14px; background: none; border: 0; padding: 0;
  color: var(--mut); font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; text-decoration: underline;
}
.p-link:hover { color: var(--accent) }

.p-msg { padding: 11px 13px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; margin-bottom: 16px }
.p-msg.error { background: var(--danger-dim); border: 1px solid rgba(255, 107, 94, .3); color: #ffb3ac }
.p-msg.ok { background: var(--accent-dim); border: 1px solid rgba(244, 0, 9, .35); color: #ff9a9d }
.p-msg[hidden] { display: none }

/* ---- tabs ---- */
.p-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line) }
.p-tab {
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mut);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 12px 14px; cursor: pointer;
}
.p-tab.active { color: var(--ink); border-bottom-color: var(--accent) }

/* ---- design grid ---- */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px }
.p-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column }
.p-item:hover { border-color: var(--line2) }
.p-thumb {
  aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 44% 40%, #2b2b2b 0, #141414 46%, #040404 100%);
  display: grid; place-items: center; overflow: hidden;
}
.p-thumb img { width: 100%; height: 100%; object-fit: contain; display: block }
.p-thumb .p-noimg { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint) }
.p-item-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 4px }
.p-item-body b { font-size: 14px; letter-spacing: -.01em }
.p-item-body small { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.p-swatches { display: flex; gap: 3px; margin-top: 8px }
.p-swatches i { width: 14px; height: 14px; border-radius: 2px; display: block; border: 1px solid rgba(255,255,255,.14) }
/* Four actions do not fit across a 240px card, so they wrap into a 2x2 grid rather than pushing
   Delete off the edge. */
.p-item-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px 14px }
.p-item-actions button {
  padding: 9px 6px; border: 1px solid var(--line2); border-radius: var(--radius);
  background: none; color: var(--label); font-family: var(--mono); font-size: 9px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.p-item-actions button:hover { border-color: var(--accent); color: var(--accent) }
.p-item-actions button.danger:hover { border-color: var(--danger); color: var(--danger) }

/* ---- empty / loading ---- */
.p-empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--line2); border-radius: var(--radius-lg) }
.p-empty b { display: block; font-size: 17px; margin-bottom: 8px }
.p-empty p { color: var(--mut); font-size: 13px; margin: 0 auto 22px; max-width: 40ch; line-height: 1.6 }
.p-empty .p-btn { width: auto; padding: 13px 26px; display: inline-block; text-decoration: none }
.p-loading { color: var(--mut); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 40px 0 }

@media (max-width: 720px) {
  :root { --gutter: 18px }
  .p-row { grid-template-columns: 1fr }
  .p-head .wordmark img { height: 36px }
}

/* ---- shared design page ---- */
.p-share-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start }
.p-share-preview {
  aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 44% 40%, #2b2b2b 0, #141414 46%, #040404 100%);
  display: grid; place-items: center;
}
.p-share-preview img { width: 100%; height: 100%; object-fit: contain; display: block }
.p-share-preview .p-noimg { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint) }
.p-share-spec h2 { margin: 22px 0 10px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent) }
.p-share-spec h2:first-child { margin-top: 0 }
.p-spec-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
.p-spec-color { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--label) }
.p-spec-color i { width: 16px; height: 16px; border-radius: 3px; flex: none; border: 1px solid rgba(255,255,255,.16) }
.p-spec-color em { font-family: var(--mono); font-size: 8.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.p-spec-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden }
.p-spec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; font-size: 12.5px; color: var(--label); border-bottom: 1px solid var(--line) }
.p-spec-row:last-child { border-bottom: 0 }
.p-spec-row b { color: var(--ink); font-weight: 600; text-align: right }
.p-inline-chip { width: 18px; height: 18px; border-radius: 3px; display: block; border: 1px solid rgba(255,255,255,.16) }
.p-share-cta { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); text-align: center }
.p-share-cta p { color: var(--mut); font-size: 12px; margin: 12px 0 0 }

/* ---- share dialog ---- */
.p-share-url { display: flex; gap: 8px; margin-top: 12px }
.p-share-url input { flex: 1; font-family: var(--mono); font-size: 11px }
.p-share-url button { flex: none; width: auto; padding: 12px 16px }

@media (max-width: 820px) { .p-share-layout { grid-template-columns: 1fr } }
.p-share-panel { padding: 0 14px 14px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 12px }
.p-share-note { color: var(--mut); font-size: 11px; line-height: 1.5; margin: 0 }

/* ---- orders ---- */
.p-order-list { display: flex; flex-direction: column; gap: 16px }
.p-order { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px }
.p-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.p-order-head b { display: block; font-size: 14px; letter-spacing: -.01em }
.p-order-head small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.p-status {
  flex: none; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line2);
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--label); white-space: nowrap;
}
.p-status-paid, .p-status-in_production { border-color: rgba(244,0,9,.5); background: var(--accent-dim); color: var(--accent) }
.p-status-shipped { border-color: rgba(120,190,140,.45); background: rgba(120,190,140,.12); color: #9fd3ae }
.p-status-cancelled, .p-status-refunded { border-color: rgba(255,107,94,.35); background: var(--danger-dim); color: #ffb3ac }
.p-order-lines { display: flex; flex-direction: column }
.p-order-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line) }
.p-order-line:last-child { border-bottom: 0 }
.p-order-line b { font-size: 13px }
.p-order-line small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut) }
.p-order-line .p-swatches { margin-top: 7px }
.p-order-price { flex: none; font-variant-numeric: tabular-nums }
.p-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.p-order-foot > b { font-size: 16px; font-variant-numeric: tabular-nums }
.p-order-totals { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut) }
.p-order-eta { margin: 12px 0 0; font-size: 12px; color: var(--label) }

/* ---- addresses ---- */
.p-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--label); cursor: pointer }
.p-check input { width: 16px; height: 16px; accent-color: var(--accent) }
.p-address-list { display: flex; flex-direction: column; gap: 10px }
.p-address { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 17px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg) }
.p-address.is-default { border-color: rgba(244,0,9,.45) }
.p-address-body b { display: block; font-size: 13.5px; margin-bottom: 4px }
.p-address-body span { display: block; font-size: 12.5px; color: var(--mut); line-height: 1.55 }
.p-address-tag { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 99px; background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase }
.p-address-actions { display: flex; flex-direction: column; gap: 6px; flex: none }
.p-address-actions button { padding: 7px 11px; border: 1px solid var(--line2); border-radius: var(--radius); background: none; color: var(--label); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap }
.p-address-actions button:hover { border-color: var(--accent); color: var(--accent) }
.p-address-actions button.danger:hover { border-color: var(--danger); color: var(--danger) }
.p-lang { display: flex; margin-left: 6px; border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden }
.p-lang button { border: 0; border-radius: 0; padding: 8px 10px; background: none; color: var(--mut); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; cursor: pointer }
.p-lang button.active { background: var(--accent); color: var(--accent-ink) }
.p-lang button:not(.active):hover { color: var(--ink) }

/* ---- save-to-register banner ---- */
.p-save-banner { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(244,0,9,.45); border-left-width: 3px; border-radius: var(--radius); background: var(--accent-dim) }
.p-save-banner b { font-size: 13.5px }
.p-save-banner span { font-size: 12.5px; line-height: 1.55; color: #ff9a9d }

/* ---- notes (designs + orders) ---- */
textarea { resize: vertical; min-height: 64px; line-height: 1.5 }
.p-note-preview { margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.03); font-size: 12px; line-height: 1.5; color: var(--label); white-space: pre-line; overflow-wrap: anywhere }
.p-notes-panel { padding: 12px 14px 14px; border-top: 1px solid var(--line) }
.p-notes-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px }
.p-notes-actions .p-btn { width: auto; padding: 11px 18px; flex: none }

.p-order-notes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
.p-notes-toggle { border: 0; background: none; padding: 0; color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer }
.p-notes-toggle:hover { text-decoration: underline }
.p-notes-body { margin-top: 12px }
.p-notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px }
.p-note { max-width: 88%; padding: 9px 12px; border-radius: var(--radius-lg); background: rgba(255,255,255,.04); border: 1px solid var(--line) }
.p-note small { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.p-note p { margin: 0; font-size: 12.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere }
.p-note-admin { align-self: flex-start; border-color: rgba(244,0,9,.4); background: var(--accent-dim) }
.p-note-customer { align-self: flex-end }

/* ---- order tracking ---- */
.p-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 14px 0 4px; padding: 0 }
.p-track li { position: relative; padding: 18px 6px 0 0 }
.p-track li:before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line2) }
.p-track li:after { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line2) }
.p-track li.done:before, .p-track li.current:before { background: var(--accent) }
.p-track li.current:before { background: linear-gradient(90deg, var(--accent) 0 12px, var(--line2) 12px) }
.p-track li.done:after, .p-track li.current:after { background: var(--accent); border-color: var(--accent) }
.p-track li.current:after { box-shadow: 0 0 0 4px var(--accent-dim) }
.p-track b { display: block; font-size: 11.5px; letter-spacing: -.005em }
.p-track li:not(.done):not(.current) b { color: var(--mut) }
.p-track small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut) }
.p-track-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--label) }
.p-track-info .p-link { margin-top: 0 }
@media (max-width: 520px) { .p-track b { font-size: 10.5px } }

/* ---- admin ---- */
.p-wrap.wide { max-width: 1320px }
.a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 26px }
.a-stat { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg) }
.a-stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.a-stat small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.a-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.a-filters input[type=search] { flex: 1 1 240px; width: auto; padding: 11px 13px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--field); color: var(--ink); font: inherit; font-size: 13px }
.a-filters select { flex: 0 1 190px; width: auto; font-size: 13px; padding: 10px 12px }
.a-filters .a-export { flex: none; width: auto; padding: 11px 16px }
.a-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start }
.a-layout:has(.a-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) 380px }
.a-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card) }
/* A fixed floor width: below it the wrapper scrolls sideways instead of crushing names into columns
   one letter wide. */
.a-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12.5px }
.a-table th { position: sticky; top: 0; text-align: left; padding: 11px 12px; background: var(--panel); border-bottom: 1px solid var(--line2); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); white-space: nowrap }
.a-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--soft); vertical-align: top; max-width: 240px; overflow-wrap: break-word }
.a-table tbody tr { cursor: pointer }
.a-table tbody tr:hover td { background: rgba(255,255,255,.025) }
.a-table tbody tr.active td { background: var(--accent-dim) }
.a-strong { color: var(--ink) !important; font-weight: 650 }
.a-mono { font-family: var(--mono); font-size: 11.5px; white-space: nowrap }
.a-small { font-size: 11.5px; color: var(--mut) !important }
.a-pill { display: inline-block; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line2); font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--label); white-space: nowrap }
.a-pill-new { border-color: rgba(120,170,255,.45); color: #a9c6ff; background: rgba(120,170,255,.1) }
.a-pill-customer { border-color: rgba(120,190,140,.45); color: #9fd3ae; background: rgba(120,190,140,.12) }
.a-pill-contacted { border-color: rgba(244,0,9,.5); color: var(--accent); background: var(--accent-dim) }
.a-more { width: auto; margin: 14px; padding: 11px 18px }
.a-detail { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 18px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius-lg) }
.a-detail h2 { font-size: 18px; margin: 0 28px 8px 0; overflow-wrap: anywhere }
.a-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--mut); font-size: 22px; line-height: 1; cursor: pointer }
.a-close:hover { color: var(--ink) }
.a-reach { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 12px; font-size: 12.5px; color: var(--label) }
.a-reach a { overflow-wrap: anywhere }
.a-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 12px }
.a-facts dt { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); padding-top: 2px }
.a-facts dd { margin: 0; color: var(--soft); overflow-wrap: anywhere }
.a-block { padding: 14px 0; border-top: 1px solid var(--line) }
.a-block .p-field { margin-bottom: 10px }
.a-h3 { margin: 18px 0 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent) }
.a-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.a-list li { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px }
.a-list li b { display: block; font-size: 12px; overflow-wrap: anywhere }
.a-list li small { display: block; margin-top: 3px; color: var(--mut); font-size: 11px; overflow-wrap: anywhere }
.a-quote { margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.03); font-size: 12px; line-height: 1.5; color: var(--label); white-space: pre-line; overflow-wrap: anywhere }
.a-address { margin: 12px 0 0; font-size: 12px; color: var(--label) }
.a-order .p-order-head { align-items: center }
.a-status-select { width: auto; flex: none; padding: 8px 10px; font-size: 12px }
.a-order-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px }
.a-order-form input { width: 100%; padding: 10px 11px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--field); color: var(--ink); font: inherit; font-size: 13px }
/* Below this the contact detail stacks above the table rather than squeezing it. */
@media (max-width: 1240px) {
  .a-layout:has(.a-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) }
  .a-detail { position: relative; top: 0; max-height: none; order: -1 }
}
@media (max-width: 1000px) {
  .a-order-form { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 560px) {
  .a-order-form { grid-template-columns: minmax(0, 1fr) }
  .a-filters select { flex: 1 1 45% }
}

/* Narrow screens: the portal nav (up to eleven items for an admin who also boxes and sponsors) gets
   its own row and swipes sideways, rather than pushing the whole page wider than the screen. */
@media (max-width: 1180px) {
  .p-head { flex-wrap: wrap; row-gap: 6px; padding-bottom: 8px }
  .p-nav { width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  .p-nav::-webkit-scrollbar { display: none }
  .p-nav a, .p-nav button, .p-nav .p-lang { flex: none; white-space: nowrap }
  .p-nav .p-lang { margin-left: auto }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .p-head { padding-bottom: 10px }
}

/* Phones: the homepage's header and menu — menu button on the left, logo in the center, and every
   link (plus EN/ES) in a full-screen menu instead of the sideways-scrolling nav row. */
.p-menu-toggle, .p-menu { display: none }
@media (max-width: 820px) {
  .p-head { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; padding: 9px 12px }
  .p-head .wordmark { grid-column: 2; justify-self: center }
  .p-head .wordmark img { height: 46px }
  .p-head .p-nav { display: none }
  .p-menu-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 36px; padding: 0 11px;
    border: 1px solid var(--line2); border-radius: var(--radius); background: rgba(0, 0, 0, .35); cursor: pointer;
  }
  .p-menu-toggle span { display: block; height: 1.5px; background: var(--ink) }
  .p-menu-toggle span:nth-child(2) { width: 64% }
  .p-menu.open {
    position: fixed; inset: 0; z-index: 42; display: flex; flex-direction: column; justify-content: safe center;
    padding: 72px var(--gutter) 40px; overflow-y: auto; background: rgba(5, 5, 5, .97); backdrop-filter: blur(16px);
  }
  body.p-menu-open { overflow: hidden }
  .p-menu a { text-decoration: none }
  .p-menu a:hover, .p-menu a.active { color: var(--accent) }
  .p-menu-main { display: flex; flex-direction: column; gap: 2px }
  .p-menu-main a {
    width: max-content; max-width: 100%; font-size: 28px; line-height: 1.05; font-weight: 900; font-stretch: 112%;
    letter-spacing: -.035em; text-transform: uppercase; color: var(--ink);
  }
  .p-menu-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line) }
  .p-menu-row + .p-menu-row { margin-top: 0; padding-top: 12px; border-top: 0 }
  .p-menu-row a { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut) }
  .p-menu-close {
    position: absolute; top: 13px; right: 12px; width: 44px; height: 40px; border: 1px solid var(--line2);
    border-radius: var(--radius); background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .p-menu .p-lang { align-self: flex-start; margin: 22px 0 0 }
  .p-menu .p-lang button { padding: 10px 11px; font-size: 10px }
}

/* ---- collab application ---- */
.collab-wrap { max-width: 640px }
.c-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 30px }
.c-pills span { padding: 6px 11px; border: 1px solid var(--line2); border-radius: 99px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--label) }
.c-card h2 { font-size: 18px; margin-bottom: 4px }
.c-formsub { margin-bottom: 20px }
.c-chips { display: flex; flex-wrap: wrap; gap: 7px }
.c-chip { padding: 8px 12px; border: 1px solid var(--line2); border-radius: 99px; background: none; color: var(--label); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer }
.c-chip:hover { border-color: var(--accent); color: var(--ink) }
.c-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); color: var(--accent) }
.c-disclaimer { margin: 12px 0 0; text-align: center; font-size: 11px; line-height: 1.55; color: var(--mut) }
.c-done .p-btn { display: inline-block; width: auto; padding: 14px 26px; text-decoration: none }
.p-field > div.c-chips { margin-top: 2px }
.a-collab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start }
.a-collab .a-facts { margin-top: 4px }
.a-collab .a-h3 { margin-top: 12px }

/* ---- testimonials ---- */
.t-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.t-card { margin: 0 }
.t-frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #000;
}
.t-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.t-play {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%;
  border: 0; padding: 0; cursor: pointer; color: var(--accent-ink);
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.t-play svg {
  width: 64px; height: 64px; padding: 18px 16px 18px 20px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 10px 34px rgba(0, 0, 0, .5); transition: transform .2s;
}
.t-play:hover svg { transform: scale(1.08) }
.t-frame.playing .t-play { display: none }
.t-caption { display: flex; flex-direction: column; gap: 3px; padding: 12px 2px 0 }
.t-caption b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase }
.t-caption span { font-size: 12.5px; color: var(--soft) }
.t-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
}
.t-cta p { margin: 0; color: var(--soft); font-size: 14px }
.t-cta .p-btn { width: auto; padding: 14px 26px; text-decoration: none }
@media (max-width: 820px) {
  /* Phones swipe through the clips side by side, the way they watch shorts anyway. */
  .t-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 320px);
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  .t-grid::-webkit-scrollbar { display: none }
  .t-card { scroll-snap-align: center }
  .t-cta .p-btn { width: 100%; text-align: center }
}
.a-open { width: auto; margin-top: 14px; padding: 10px 14px }

/* =====================================================================
   Sponsor Network: /network, /b/<slug>, /fighter, /sponsorships, /invoice
   ===================================================================== */
input[type=url], input[type=number], input[type=date], input[type=search] {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line2); border-radius: var(--radius);
  background: var(--field); color: var(--ink); font: inherit; font-size: 14px;
}
input[type=color] { width: 100%; height: 44px; padding: 3px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--field); cursor: pointer }
input[type=file] { width: 100%; font-size: 12px; color: var(--mut) }
input:disabled, select:disabled, textarea:disabled { opacity: .55 }

.n-inline, a.n-inline { display: inline-block; width: auto; padding: 13px 24px; text-decoration: none }
.n-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px }
.n-actions .p-btn { width: auto; padding: 12px 18px; text-decoration: none; display: inline-block }
.n-note { color: var(--mut); font-size: 12px; line-height: 1.55; margin: 10px 0 0 }
.n-hint { color: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; margin: 10px 0 0 }
.n-field-hint { display: block; margin-top: 6px; color: var(--mut); font-size: 11.5px; line-height: 1.5 }
.n-label { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.n-h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; font-stretch: 110%; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 10px }
.n-h3 { font-size: 16px; margin: 0 0 12px; letter-spacing: -.01em }
.n-h4 { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 18px 0 10px }
.n-section { margin-top: 56px }
.n-chip {
  display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid var(--line2); border-radius: 99px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--soft); text-decoration: none; background: var(--card);
}
a.n-chip:hover { border-color: var(--accent); color: var(--accent) }
.n-chip.sold { border-color: rgba(120,190,140,.45); color: #9fd3ae }
.n-preview { margin-bottom: 22px }
.n-more { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; margin: 12px 0; background: var(--card) }
.n-more summary { cursor: pointer; padding: 13px 0; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--label) }
.n-more[open] { padding-bottom: 12px }
.n-more p { color: var(--soft); font-size: 13px; line-height: 1.6; margin: 0 0 10px }
.n-steps { margin: 0 0 18px; padding-left: 20px; color: var(--soft); font-size: 13.5px; line-height: 1.6 }
.n-steps li { margin-bottom: 6px }
.n-steps li::marker { color: var(--accent); font-family: var(--mono); font-size: 11px }

/* ---- the trunks (flat photo + spots) ---- */
.n-stage {
  position: relative; width: 100%; padding: 26px 26px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(110% 90% at 50% 38%, #3a3a3a 0, #222222 48%, #0f0f0f 100%);
}
.sv { position: relative; max-width: 460px; margin: 0 auto }
.sv-view { position: relative; container-type: inline-size; display: none }
.sv[data-side="front"] .sv-front, .sv[data-side="back"] .sv-back { display: block }
.sv-img { display: block; width: 100%; height: auto; user-select: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)) }
.sv-back .sv-img { transform: scaleX(-1) }
.sv-caption { margin-top: 8px; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut) }
.sv-spot {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw;
  padding: 1cqw; border-radius: 1.4cqw; font: inherit; color: #fff; text-align: center; overflow: hidden;
  background: rgba(0,0,0,.36); border: max(1.5px, .45cqw) dashed rgba(255,255,255,.92);
}
button.sv-spot { cursor: pointer; transition: background .15s, transform .15s }
button.sv-spot:hover { background: rgba(0,0,0,.52); transform: scale(1.02) }
.sv-spot b { font-size: clamp(10px, 5.2cqw, 26px); font-weight: 900; letter-spacing: -.02em; line-height: 1 }
.sv-spot small { font-family: var(--mono); font-size: clamp(7px, 2.2cqw, 11px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9 }
.sv-wide { flex-direction: row; gap: 1.6cqw }
.sv-wide b { font-size: clamp(9px, 3.6cqw, 18px) }
.sv-selected, .sv-preview { border-style: solid; border-width: max(2px, .7cqw); background: rgba(255,255,255,.22); box-shadow: 0 0 0 3px rgba(0,0,0,.25) }
.sv-sold, .sv-held { border: 0; background: rgba(0,0,0,.42) }
.sv-sold small, .sv-held small { color: #cfcfcf }
.sv-sold:has(.sv-logo) { background: transparent }
.sv-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) }
.sv-preview .sv-logo { max-width: 86%; max-height: 86% }
.n-views { display: flex; gap: 8px; margin-top: 10px }
.n-views .p-btn { width: auto; padding: 10px 16px; flex: 1 }
.n-stage-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start }
.n-stage-col { position: sticky; top: 92px }
.n-side { display: flex; flex-direction: column; gap: 16px; min-width: 0 }

/* ---- profile hero ---- */
.n-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 30px }
.n-photo {
  width: 220px; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line2);
  background: linear-gradient(160deg, #2a2a2a, #121212); display: grid; place-items: center;
}
.n-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.n-photo span { font-size: 54px; font-weight: 900; color: var(--faint) }
.n-photo.small { width: 96px; flex: none }
.n-photo.small span { font-size: 30px }
.n-name { margin-bottom: 4px }
.n-nick { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--accent); margin-bottom: 18px }
.n-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 }
.n-fact { padding: 11px 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 110px }
.n-fact b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.n-fact small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.n-links, .n-sponsors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.n-share { display: flex; flex-wrap: wrap; gap: 8px }
.n-share .p-btn { width: auto; padding: 10px 16px; text-decoration: none; display: inline-block }

.n-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0 }
.n-trust-item { padding: 16px 18px; border: 1px solid rgba(244,0,9,.35); background: var(--accent-dim); border-radius: var(--radius-lg) }
.n-trust-item b { display: block; font-size: 13.5px; margin-bottom: 5px; color: #ffd0d2 }
.n-trust-item p { margin: 0; color: var(--soft); font-size: 12.5px; line-height: 1.55 }

/* ---- fights, spots, checkout ---- */
.n-fight-tabs { overflow-x: auto }
.n-fight-tabs .p-tab { white-space: nowrap }
.n-fight-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px }
.n-fight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.n-fight-head b { font-size: 15px }
.n-fight-card .a-facts { margin-bottom: 0 }
.n-spots { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden }
.n-spot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; text-align: left;
  background: var(--card); border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; font: inherit;
}
.n-spot:last-child { border-bottom: 0 }
.n-spot:hover:not([disabled]) { background: #1f1f1f }
.n-spot.active { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent) }
.n-spot[disabled] { cursor: default; opacity: .62 }
.n-spot-name b { display: block; font-size: 13px }
.n-spot-name small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.n-spot-price { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis }
.n-spot-sold .n-spot-price, .n-spot-held .n-spot-price { color: var(--mut); font-size: 11px }
.n-panel { background: var(--card); border: 1px solid var(--line2); border-radius: var(--radius-lg); padding: 20px }
.n-breakdown { margin: 4px 0 0 }
.n-checkout { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line) }
.n-checkout .p-btn { margin-top: 6px }
.n-element { margin: 14px 0 }
.n-secure { text-align: center }
.n-success .p-btn { display: inline-block; width: auto; padding: 13px 22px; text-decoration: none }
.n-nofight { padding: 40px 18px }
.n-bio { color: var(--soft); font-size: 14.5px; line-height: 1.7; max-width: 68ch; margin: 0 0 14px }
.n-about .p-eyebrow { margin-top: 26px }
.n-cta { margin-top: 56px; padding: 28px; text-align: center; border: 1px dashed var(--line2); border-radius: var(--radius-lg) }
.n-cta b { display: block; font-size: 18px; margin-bottom: 6px }
.n-cta p { color: var(--mut); font-size: 13px; margin: 0 auto 16px; max-width: 52ch; line-height: 1.6 }
.n-cta .p-btn { display: inline-block; width: auto; padding: 13px 26px; text-decoration: none }

/* ---- upcoming fights on a boxer's page ---- */
.n-next { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 0 6px; padding: 9px 13px; border: 1px solid rgba(244,0,9,.4); border-radius: var(--radius-lg); background: var(--accent-dim); color: var(--ink); text-decoration: none }
.n-next b { font-size: 13.5px }
.n-next span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: #ff9a9d }
.n-fights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin-bottom: 22px }
.n-fight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); font: inherit; cursor: pointer;
}
.n-fight:hover { border-color: var(--line2) }
.n-fight.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.n-fight-date { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 58px; border-radius: var(--radius); background: #0f0f0f; border: 1px solid var(--line2) }
.n-fight-date b { font-size: 22px; font-weight: 900; line-height: 1 }
.n-fight-date small { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 3px }
.n-fight-body b { display: block; font-size: 14.5px }
.n-fight-body small { display: block; margin-top: 2px; color: var(--mut); font-size: 12px }
.n-fight-body .n-fight-title { color: var(--soft) }
.n-fight-left { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: #9fd3ae }
.n-fight-left.none { color: var(--mut) }
.n-fight-area { scroll-margin-top: 90px }
.n-signin .p-btn { margin-top: 4px }
.n-signin .p-link { display: block; margin: 12px auto 0 }

/* ---- the boxer's link on the dashboard ---- */
.n-linkcard { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin: -6px 0 18px; border: 1px dashed var(--line2); border-radius: var(--radius-lg) }
.n-linkcard-text { min-width: 0 }
.n-linkcard-text small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut) }
.n-linkcard-url { display: block; margin-top: 3px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere }
.n-linkcard-url:hover { color: var(--accent) }
.n-linkcard-actions { display: flex; gap: 8px }
.n-linkcard-actions .p-btn { width: auto; padding: 10px 16px; text-decoration: none; display: inline-block }
.n-qr { margin-top: 16px }
.n-qr-box { width: 220px; max-width: 100%; padding: 12px; background: #fff; border-radius: var(--radius); margin-bottom: 12px }
.n-qr-box canvas, .n-qr-box img { display: block; width: 100% !important; height: auto !important }

/* ---- /network landing ---- */
.n-landing-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: center }
.n-display { font-size: clamp(34px, 5.4vw, 64px) }
.n-landing-stage { max-height: 520px }
.n-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 46px; scroll-margin-top: 90px }
.n-how-card .p-btn { display: inline-block; width: auto; padding: 13px 22px; text-decoration: none }
#directory { scroll-margin-top: 90px }
.n-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px }
.n-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); text-decoration: none }
.n-card:hover { border-color: var(--accent) }
.n-card-photo { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #2a2a2a, #121212); display: grid; place-items: center }
.n-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.n-card-photo span { font-size: 40px; font-weight: 900; color: var(--faint) }
.n-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px }
.n-card-body > b { font-size: 16px }
.n-card-nick { font-family: var(--serif); color: var(--accent); font-size: 16px }
.n-card-body > small { color: var(--mut); font-size: 12px }
.n-card-next { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); display: flex; flex-direction: column; gap: 3px }
.n-card-next b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--accent) }
.n-card-next.muted { color: var(--faint) }

/* ---- /fighter ---- */
.n-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin: 4px 0 18px; border: 1px solid var(--line2); border-radius: var(--radius-lg); background: var(--card) }
.n-statusbar b { display: block; font-size: 14px }
.n-statusbar small { display: block; margin-top: 3px; color: var(--mut); font-size: 12.5px; line-height: 1.5 }
.n-statusbar .p-btn { width: auto; padding: 12px 18px; flex: none }
.n-statusbar-live { border-color: rgba(120,190,140,.45); background: rgba(120,190,140,.08) }
.n-statusbar-pending_review { border-color: rgba(244,0,9,.5); background: var(--accent-dim) }
.n-statusbar-suspended { border-color: rgba(255,107,94,.35); background: var(--danger-dim) }
.n-tabs { overflow-x: auto }
.n-tabs .p-tab { white-space: nowrap }
.n-form { max-width: 760px }
.n-form .p-btn[type=submit] { margin-top: 8px }
.n-photo-edit { display: flex; gap: 18px; align-items: center; margin-bottom: 18px }
.n-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px }
.n-pane-head .p-sub { margin: 0 }
.n-pane-head .p-btn { flex: none }
.n-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.n-price-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 6px }
.n-price-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 128px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--card); cursor: pointer }
.n-price-row:last-child { border-bottom: 0 }
.n-price-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent) }
.n-price-name b { display: block; font-size: 13px }
.n-price-name small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.n-price-input { display: flex; align-items: center; gap: 6px }
.n-price-input i { font-style: normal; color: var(--mut); font-family: var(--mono) }
.n-price-input input { padding: 9px 10px; font-family: var(--mono) }
.n-fight-spots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.n-sale-body { display: flex; gap: 16px; align-items: flex-start; padding-top: 14px }
.n-sale-body .a-facts { margin: 0; flex: 1 }
.n-logo { flex: none; width: 120px; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: var(--radius); background: repeating-conic-gradient(#2a2a2a 0 25%, #1e1e1e 0 50%) 0 0 / 16px 16px; padding: 8px }
.n-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block }
.n-current b { display: block; font-size: 18px; margin-top: 4px }
.n-payout-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 26px; align-items: start }
.n-payout-options .p-card > .p-btn { margin-top: 4px }

/* ---- /sponsorships ---- */
.n-proof { display: block; margin-top: 14px; text-decoration: none }
.n-proof img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line2); display: block }
.n-proof small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut) }
.n-timeline { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line) }
.n-timeline li b { display: block; font-size: 12px }
.n-timeline li small { font-family: var(--mono); font-size: 9.5px; color: var(--mut) }

/* ---- /invoice ---- */
.n-invoice-wrap { max-width: 860px }
.n-invoice { background: #fff; color: #161616; border-radius: var(--radius-lg); padding: 44px 48px; margin-top: 16px; font-size: 13px; line-height: 1.55 }
.n-invoice .p-eyebrow { color: #c40008 }
.n-invoice .p-eyebrow:before { background: #c40008 }
.n-inv-head { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 2px solid #161616 }
.n-inv-logo { height: 44px; display: block; margin-bottom: 12px; filter: invert(1) hue-rotate(180deg) }
.n-inv-meta h1 { font-size: 30px; color: #161616; text-align: right; margin-bottom: 12px }
.n-inv-meta .a-facts dt { color: #6b6b6b }
.n-inv-meta .a-facts dd { color: #161616; text-align: right }
.n-inv-lines div { color: #2b2b2b }
.n-inv-to { padding: 22px 0 }
.n-inv-table { width: 100%; border-collapse: collapse; margin: 6px 0 22px }
.n-inv-table th { text-align: left; padding: 10px 0; border-bottom: 1px solid #c9c9c9; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b }
.n-inv-table th:last-child, .n-inv-table td:last-child { text-align: right; white-space: nowrap; padding-left: 20px }
.n-inv-table td { padding: 14px 0; border-bottom: 1px solid #e3e3e3; vertical-align: top }
.n-inv-sub { color: #555; font-size: 12px }
.n-inv-total td { font-weight: 800; font-size: 15px; border-bottom: 2px solid #161616 }
.n-inv-foot p { color: #555; font-size: 11.5px; margin: 0 0 6px }

.a-boxer-photo { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line2); flex: none }

@media (max-width: 900px) {
  .n-stage-layout, .n-landing-hero, .n-how, .n-payout-options { grid-template-columns: 1fr }
  .n-stage-col { position: static }
  .n-trust { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .n-hero { grid-template-columns: 1fr; gap: 18px }
  .n-photo { width: 100%; max-width: 280px; aspect-ratio: 1 / 1 }
  .n-price-row { grid-template-columns: auto minmax(0, 1fr) 104px; padding: 10px }
  .n-colors { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .n-pane-head, .n-statusbar { flex-direction: column; align-items: stretch }
  .n-invoice { padding: 26px 20px }
  .n-inv-head { flex-direction: column }
  .n-inv-meta h1, .n-inv-meta .a-facts dd { text-align: left }
  .n-sale-body { flex-direction: column }
}
@media print {
  .p-head, .n-noprint { display: none !important }
  body, .n-body { background: #fff }
  .p-wrap { padding: 0; max-width: none }
  .n-invoice { border-radius: 0; padding: 0; margin: 0 }
}

/* ---- policy pages (/terms, /privacy, /returns, /shipping) and the 404 page ---- */
.legal { max-width: 780px }
.legal-meta {
  margin: 0 0 26px; color: var(--mut);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.legal-summary { margin: 0 0 30px }
.legal-summary ul { margin: 0; padding-left: 18px }
.legal-summary li { margin: 4px 0 }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; padding: 0; list-style: none }
.legal-toc a {
  color: var(--mut); text-decoration: none; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 0; display: inline-block;
}
.legal-toc a:hover { color: var(--accent) }
.legal h2 { font-size: 18px; margin: 40px 0 10px; scroll-margin-top: 96px; letter-spacing: -.015em }
.legal h3 { font-size: 14.5px; margin: 24px 0 6px; color: var(--ink) }
.legal .p-card h2 { margin-top: 0 }
.legal p, .legal li { color: var(--soft); font-size: 14.5px; line-height: 1.7 }
.legal p { margin: 0 0 12px; max-width: 70ch }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 20px; max-width: 68ch }
.legal li { margin: 3px 0 }
.legal strong { color: var(--ink) }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px }
.legal a:hover { color: var(--accent) }
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 13.5px }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--soft); vertical-align: top }
.legal-table th { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.legal-contact { margin-top: 36px }
.legal-contact p { margin-bottom: 6px }
.legal-contact address { font-style: normal; color: var(--soft); font-size: 14px; line-height: 1.7 }

.nf { max-width: 620px; padding-top: 90px; padding-bottom: 120px }
.nf .nf-code { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--accent); margin: 0 0 14px }
.nf .nf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px }
.nf .nf-actions .p-btn { width: auto; padding: 14px 24px; text-decoration: none; display: inline-block }

@media (max-width: 720px) {
  .legal p, .legal li { font-size: 14px }
  .legal-table th, .legal-table td { padding: 9px 8px }
  .nf { padding-top: 56px }
}
@media print {
  .legal p, .legal li, .legal-table td { color: #111 }
  .legal h1, .legal h2, .legal h3, .legal strong { color: #000 }
}

/* =====================================================================
   Sponsor Network — open layout.
   Fewer boxes: sections are separated by space, thin rules and type rather than bordered cards.
   Inputs keep their borders (they are things you type into); almost nothing else does.
   ===================================================================== */
.n-body .p-card { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 34px }
.n-body .p-card + .p-card { padding-top: 30px; border-top: 1px solid var(--line) }
.n-body .p-empty { border: 0; padding: 48px 0; text-align: left }
.n-body .p-empty p { margin-left: 0 }

/* hero */
.n-hero { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; margin-bottom: 44px }
.n-photo { width: 260px; border: 0; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7) }
.n-facts { gap: 0; margin: 18px 0 14px }
.n-fact { min-width: 0; padding: 0 26px 0 0; margin-right: 26px; background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0 }
.n-fact:last-child { border-right: 0; margin-right: 0 }
.n-fact b { font-size: 26px }
.n-next { display: flex; gap: 2px 10px; padding: 0; margin: 4px 0 4px; border: 0; background: none }
.n-next::before { content: ''; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--accent); align-self: center; box-shadow: 0 0 0 4px var(--accent-dim) }
.n-next span { color: var(--mut) }
.n-links { gap: 6px 18px; margin: 4px 0 10px }
.n-links a, .n-sponsors a, .n-sponsors span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); text-decoration: none }
.n-links a::after, .n-sponsors a::after { content: ' ↗'; color: var(--accent) }
.n-links a:hover, .n-sponsors a:hover { color: var(--accent) }
.n-share .p-btn { border: 0; padding: 8px 0; margin-right: 18px; color: var(--accent); background: none }
.n-share .p-btn:hover { color: var(--ink) }

/* trust notes: three short columns under a thin rule */
.n-trust { gap: 32px; padding-top: 22px; border-top: 1px solid var(--line) }
.n-trust-item { padding: 0; border: 0; background: none; border-radius: 0 }
.n-trust-item b { color: var(--ink); position: relative; padding-top: 12px }
.n-trust-item b::before { content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 2px; background: var(--accent) }

/* fights: a list, not a grid of cards */
.n-fights { display: flex; flex-direction: column; gap: 0; margin: 4px 0 30px; border-top: 1px solid var(--line) }
.n-fight { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto; padding: 16px 4px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none !important }
.n-fight:hover { background: rgba(255,255,255,.025) }
.n-fight.active { border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent) !important; padding-left: 14px }
.n-fight-date { grid-row: auto; width: auto; height: auto; align-items: flex-start; background: none; border: 0 }
.n-fight-date b { font-size: 28px }
.n-fight-left { text-align: right }

/* the trunks: no frame, just a soft spotlight behind them */
.n-stage { padding: 10px 0 0; border: 0; border-radius: 0; background: radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.07), transparent 70%) }
.sv-toggle { display: flex; justify-content: center; gap: 22px; margin-top: 14px }
.sv-side { border: 0; background: none; padding: 4px 0; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); border-bottom: 2px solid transparent; cursor: pointer }
.sv-side.active { color: var(--ink); border-bottom-color: var(--accent) }
.n-hint { text-align: center }

/* spots and the selected spot */
.n-spots { border: 0; border-radius: 0; border-top: 1px solid var(--line) }
.n-spot { background: none; padding: 14px 4px }
.n-spot:hover:not([disabled]) { background: rgba(255,255,255,.03) }
.n-spot.active { background: none; box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px }
.n-panel { padding: 22px 0 0; background: none; border: 0; border-radius: 0; border-top: 2px solid var(--accent) }
.n-breakdown { border: 0; border-radius: 0 }
.n-breakdown .p-spec-row { padding: 9px 0 }
.n-checkout { border-top-color: var(--line) }
.n-more { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0 }
.n-more:last-child { border-bottom: 1px solid var(--line) }

/* about, sponsors, boxer call to action */
.n-sponsors { gap: 6px 22px }
.n-cta { padding: 46px 0 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0 }

/* /network landing */
.n-how { gap: 48px; margin-top: 64px }
.n-how-card { padding-top: 26px !important; border-top: 2px solid var(--accent) !important; margin-bottom: 0 !important }
.n-how-card + .n-how-card { border-top: 2px solid var(--accent) !important }
.n-card { background: none; border: 0; border-radius: 0 }
.n-card:hover { border: 0 }
.n-card:hover .n-card-photo img { transform: scale(1.03) }
.n-card-photo { border-radius: 6px; overflow: hidden }
.n-card-photo img { transition: transform .3s }
.n-card-body { padding: 14px 0 0 }
.n-card-next { border-top: 0; padding-top: 4px; margin-top: 6px }
.n-faq .n-more p { padding-right: 20px }

/* /fighter */
.n-statusbar { padding: 0 0 0 18px; margin: 2px 0 16px; border: 0; border-radius: 0; background: none; border-left: 3px solid var(--line2) }
.n-statusbar-live { border-left-color: #6fbf86; background: none }
.n-statusbar-pending_review { border-left-color: var(--accent); background: none }
.n-statusbar-suspended { border-left-color: var(--danger); background: none }
.n-linkcard { padding: 0; margin: 0 0 22px; border: 0 }
.n-linkcard-actions .p-btn { border: 0; padding: 8px 0 8px 16px; background: none; color: var(--accent) }
.n-linkcard-actions .p-btn:hover { color: var(--ink) }
.n-body .a-stats { gap: 0 }
.n-body .a-stat { padding: 0 24px 0 0; margin-right: 24px; background: none; border: 0; border-radius: 0; border-right: 1px solid var(--line) }
.n-body .a-stat:last-child { border-right: 0 }
.n-price-list { border: 0; border-radius: 0; border-top: 1px solid var(--line) }
.n-price-row { background: none; padding: 12px 2px }
.n-qr-box { border-radius: 4px }

/* /fighter and /sponsorships lists: rows, not cards */
.n-body .p-order-list { gap: 0; border-top: 1px solid var(--line) }
.n-body .p-order { padding: 22px 0; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line) }
.n-body .p-order-head { border-bottom: 0; padding-bottom: 6px }
.n-body .p-order .p-card { padding: 18px 0 0 }

@media (max-width: 640px) {
  .n-hero { grid-template-columns: 1fr; gap: 20px }
  .n-photo { width: 100%; max-width: 300px }
  .n-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px }
  .n-fact { padding: 0; margin: 0; border: 0 }
  .n-fact b { font-size: 20px }
  .n-trust { gap: 22px }
  .n-fight { grid-template-columns: 52px minmax(0, 1fr); }
  .n-fight-left { grid-column: 2; text-align: left }
  .n-body .a-stat { padding-right: 14px; margin-right: 14px }
}