/* Madar «black and silver» look (approved 2026-10-02, pilot on the names page 2026-10-10). Loaded LAST on the page:
   it only re-colours (no layout change). Black and silver everywhere; gold stays only for VIP / legendary names. */
:root {
  --bg: #050506; --panel: #0d0d0f; --panel2: #151518; --line: rgba(215, 220, 230, .11); --line2: rgba(215, 220, 230, .22);
  --text: #f1f2f4; --muted: #9b9ea6; --blue: #c9ccd3; --sky: #e2e4e9;
  --silver: linear-gradient(180deg, #f7f8fa 0%, #d7dae0 45%, #a9adb6 100%);
  --silver-line: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(170, 175, 185, .18) 45%, rgba(255, 255, 255, .4));
}
body { background: radial-gradient(900px 460px at 50% -14%, rgba(225, 230, 240, .07), transparent 62%), var(--bg); }
a { color: var(--sky); }
a:hover { color: #fff; }

/* headings: brushed silver */
h1 { background: linear-gradient(120deg, #ffffff 0%, #d4d7de 40%, #8f939c 70%, #e9ebef 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pill { background: rgba(230, 232, 238, .06); color: var(--sky); border-color: var(--line2); }

/* buttons: silver face, dark text; quiet ones stay outlined */
button, .primary { background: linear-gradient(180deg, #ffe7a8 0%, #ffc857 50%, #e9a23b 100%); color: #1a1205; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(0, 0, 0, .4); }
button:hover, .primary:hover { filter: brightness(1.06); }
button.ghost, button.alt, .seg button { background: transparent; color: var(--sky); border: 1px solid var(--line2); box-shadow: none; }
.seg button[aria-checked="true"] { background: linear-gradient(180deg, #ffe7a8 0%, #ffc857 50%, #e9a23b 100%); border-color: transparent; color: #1a1205; }
input:focus, select:focus { border-color: rgba(230, 233, 240, .55); }

/* panels and cards: deep black with a fine silver edge */
.nameinput, .verdict, .rare { background: #0a0a0c; }
.rare:hover, .plinks a:hover, button.price:hover { border-color: rgba(230, 233, 240, .45); }
button.price.sel { border-color: #e2e4e9; box-shadow: 0 0 0 1px #e2e4e9 inset; }
.price.best { border-color: rgba(230, 233, 240, .45); }
.hsteps b { background: var(--silver); color: #0b0b0d; }
.addr.after { background: linear-gradient(135deg, rgba(230, 233, 240, .08), rgba(255, 200, 87, .1)); border-color: rgba(230, 233, 240, .32); }
.cta { border-color: rgba(230, 233, 240, .26); background: linear-gradient(135deg, rgba(230, 233, 240, .06), rgba(10, 10, 12, .6)); }
.acctgate { border-color: rgba(230, 233, 240, .26); background: rgba(230, 233, 240, .04); }
.wpick .rec { color: #0b0b0d; background: var(--silver); border-color: transparent; }
.wpick .storecard { border-color: rgba(230, 233, 240, .32); background: rgba(230, 233, 240, .05); }
.wpick .storecard:hover { background: rgba(230, 233, 240, .1); }

/* second pass: the last navy panels and blue-grey text */
.card { background: linear-gradient(180deg, rgba(20, 20, 23, .94), rgba(11, 11, 13, .94)); border-color: var(--line); }
.box, .namecard, .addr.before, .wpick .wopt, input, select { background: #0a0a0c; }
.wpick .wopt:hover { background: #121215; border-color: rgba(230, 233, 240, .45); }
.nhero .lead, .hsteps li, .forms .fplaces li, .profile .pinfo p, .hero p, .form label, .price h3, label.inline { color: #c9cbd1; }
.profile .avatar img { background: #0b0b0d; }
.studiobtn { background: linear-gradient(180deg, #ffe7a8 0%, #ffc857 50%, #e9a23b 100%); color: #1a1205; }
.studiobtn:hover { background: linear-gradient(180deg, #ffe7a8 0%, #ffc857 50%, #e9a23b 100%); filter: brightness(1.06); }
.top nav a:hover { background: rgba(230, 233, 240, .06); }
/* VIP keeps its gold: the only warm colour on the page */
.card.vipcard { border-color: rgba(255, 200, 87, .38); background: linear-gradient(180deg, rgba(42, 31, 9, .6), rgba(11, 11, 13, .94)); }

/* ---- layout of the top (2026-10-10): one centred column — title, line, search, the three steps — and under it the
   before → after example side by side (stacked on phones) ---- */
.nhero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 22px; padding: 44px 0 10px; }
.nhero > div:first-child { display: grid; justify-items: center; width: 100%; max-width: 760px; }
.nhero h1 { font-size: 52px; line-height: 1.2; text-wrap: balance; margin: 14px 0 10px; }
.nhero .lead { margin: 0 auto 22px; max-width: 620px; text-wrap: pretty; }
.nhero .searchrow { width: 100%; max-width: 640px; }
.nhero .hsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 640px; margin-inline: auto; text-align: start; }
.nhero .result { width: 100%; max-width: 640px; text-align: start; }
.nhero-art { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; max-width: 760px; }
.nhero-art .arrow { transform: rotate(90deg); color: var(--muted); }
.nhero-art .addr { min-height: 92px; align-content: center; }
.addr.after b { font-size: 28px; }
@media (max-width: 860px) {
  .nhero { padding-top: 26px; }
  .nhero h1 { font-size: 36px; }
  .nhero .hsteps { grid-template-columns: minmax(0, 1fr); }
  .nhero-art { grid-template-columns: minmax(0, 1fr); }
  .nhero-art .arrow { transform: none; }
  .nhero .searchrow button { flex: 1 1 100%; }
}

/* ---- refinements (2026-10-10, designer pass): one search capsule with the button inside, quieter steps without boxes,
   calmer title/line rhythm, the example at the search's width ---- */
.nhero { gap: 18px; }
.nhero h1 { font-size: 46px; letter-spacing: -.3px; margin: 16px 0 14px; }
.nhero .lead { font-size: 16.5px; line-height: 1.9; color: #b8bbc3; max-width: 560px; margin-bottom: 28px; }
.nhero .searchrow { max-width: 620px; gap: 0; flex-wrap: nowrap; align-items: center; padding: 6px; border: 1px solid var(--line2); border-radius: 18px; background: #0a0a0c; box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04); }
.nhero .searchrow:focus-within { border-color: rgba(230, 233, 240, .5); }
.nhero .nameinput { border: 0; background: transparent; flex: 1 1 auto; min-width: 0; }
.nhero .nameinput input { font-size: 19px; padding: 10px 14px; }
.nhero .nameinput span { font-size: 17px; color: #8c8f97; }
.nhero .searchrow button { flex: 0 0 auto; border-radius: 13px; padding: 12px 30px; font-size: 16px; }
.nhero .hsteps { max-width: 620px; gap: 0; margin-top: 22px; }
.nhero .hsteps li { flex-direction: column; align-items: center; text-align: center; gap: 8px; border: 0; background: none; padding: 0 12px; font-size: 13.5px; color: #a9acb4; }
.nhero .hsteps li + li { border-inline-start: 1px solid var(--line); }
.nhero .hsteps b { flex: none; width: 26px; height: 26px; font-size: 12.5px; }
.nhero-art { max-width: 620px; margin-top: 18px; gap: 12px; }
.nhero-art .addr { min-height: 86px; border-radius: 14px; padding: 14px 16px; }
.addr.before { background: transparent; border-color: rgba(215, 220, 230, .16); }
.addr.before code { font-size: 13.5px; color: #6f727a; }
.addr.after { background: linear-gradient(135deg, rgba(255, 200, 87, .09), rgba(255, 255, 255, .02)); border-color: rgba(255, 200, 87, .32); }
.addr.after b { font-size: 26px; }
.nhero-art .arrow { font-size: 18px; color: #6f727a; }
@media (max-width: 860px) {
  .nhero h1 { font-size: 34px; }
  .nhero .searchrow { flex-wrap: wrap; gap: 6px; }
  .nhero .searchrow button { flex: 1 1 100%; }
  .nhero .hsteps { gap: 14px; }
  .nhero .hsteps li + li { border-inline-start: 0; border-top: 1px solid var(--line); padding-top: 14px; }
}
.nhero .lead { max-width: 600px; text-wrap: balance; }
.nhero .hsteps li { border-radius: 0; }
.nhero h1 { padding-bottom: .12em; }
@media (max-width: 860px) {
  .nhero .hsteps { gap: 10px; }
  .nhero .hsteps li { flex-direction: row; justify-content: flex-start; text-align: start; padding: 0; }
  .nhero .hsteps li + li { padding-top: 10px; }
}