/*
 * Theme: freevoip.co.uk's design language.
 *
 * The tokens below are freevoip's own — its :root block verbatim
 * (dark violet base, mint/violet/pink/cyan/gold accents, Archivo /
 * Manrope / JetBrains Mono) — plus its component vocabulary: 8-16px
 * radii, big soft shadows, low-alpha gradient tints, a sticky
 * translucent header with backdrop blur, and mint used sparingly as
 * the one bright accent, glowing rather than filling.
 *
 * freevoip is a marketing site and has NO table styling, so the lot
 * tables here are derived in that language rather than copied.
 * Numerals use JetBrains Mono so prices and clocks align in a
 * column — a proportional face would make a price list ragged.
 *
 * Layout is ours: a lede, tier filter chips over one list, and a
 * sold grid. DomainLore's five-tab strip, column set and 60/40 sold
 * split are gone. What survives from them is the RULESET, not the
 * presentation.
 *
 * Faces live in fonts.css, loaded first.
 */

:root {
  /* freevoip tokens, verbatim */
  --bg: #0d0a1a;
  --panel: #15112a;
  --panel2: #1c1638;
  --line: #2c2450;
  --text: #ece9f7;
  --muted: #9890be;
  --mint: #4ef0c4;
  --violet: #9d7bff;
  --pink: #ff7bd0;
  --cyan: #4ecdff;
  --gold: #ffd23f;
  --head: 'Archivo', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* derived for this app */
  --good: var(--mint);
  --bad: #ff6b8a;
  --warn: var(--gold);
  --gem: var(--violet);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mint); text-decoration: none; }
a:hover { color: #7ff6d8; text-decoration: none; }

h1, h2, h3, .logoish { font-family: var(--head); letter-spacing: -.02em; }
.clear { clear: both; }
.tabular-nums, .price, .endtime, .endedtime, .clock, .seostat { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- page shell ---------- */

#wrapper { max-width: 1180px; margin: 0 auto; padding: 22px 20px 50px; }

#tabs > ul {
  list-style: none; margin: 0; padding: 0 0 0 4px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
#tabs > ul li a {
  display: block; padding: 10px 17px;
  font-family: var(--head); font-weight: 600; font-size: .82rem;
  background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted);
  transition: color .15s, background .15s;
}
#tabs > ul li a:hover { color: var(--text); background: var(--panel2); }
#tabs > ul li a.active {
  color: var(--bg); background: var(--mint); border-color: var(--mint);
  box-shadow: 0 0 18px rgba(78, 240, 196, .28);
}
#tabs .star { color: var(--gold); margin-right: 6px; }

#tabs > div {
  background: linear-gradient(160deg, rgba(28, 22, 56, .95), var(--panel));
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
#tabs > div[hidden] { display: none; }
.ui-corner-all { border-radius: var(--radius); }

/* ---------- toolbar ---------- */

.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.clockline { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.clockline .tz { font-size: 10px; }
.searchwrap { margin-left: auto; }
.IconInside form { display: flex; }
#search {
  width: 330px; max-width: 52vw; padding: 9px 13px;
  font: 400 .84rem var(--body); color: var(--text);
  background: rgba(13, 10, 26, .6); border: 1px solid var(--line);
  border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
#search::placeholder { color: #6f6892; }
#search:focus { outline: none; border-color: var(--mint); }
#btnsearch {
  width: 40px; border: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ef0c4' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>") no-repeat center / 16px;
  cursor: pointer; transition: transform .6s, background .15s;
}
#btnsearch:hover { background-color: var(--line); }
#livedata { display: none; float: right; margin-right: 26px; font-family: var(--head);
            font-size: .74rem; font-weight: 600; letter-spacing: .08em; color: var(--mint); }
#livedata.on { display: block; }
#livedata::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 7px var(--mint); margin-right: 7px;
}

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-family: var(--head); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: 9px 10px; border-bottom: 1px solid rgba(44, 36, 80, .5); vertical-align: middle; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(157, 123, 255, .07); }
tbody tr.odd { background: rgba(255, 255, 255, .018); }
tbody tr.odd:hover { background: rgba(157, 123, 255, .07); }
td.empty { color: var(--muted); padding: 26px 10px; }

.domain1 a.link { color: var(--text); font-weight: 500; }
.domain1 a.link:hover { color: var(--mint); }
#spotlight .domain1 { width: 265px; max-width: 265px; }
.c-price, td.price { width: 110px; text-align: center; color: var(--text); font-weight: 500; }
.c-bids, td.bids { width: 70px; text-align: center; color: var(--muted); }
.c-end, td.endtime { width: 175px; color: var(--muted); font-size: .84rem; }
.c-act { width: 140px; text-align: right; }
.c-sold { width: 95px; text-align: right; color: var(--mint); }
.c-ended, .endedtime { text-align: right; color: var(--muted); font-size: .82rem; }
.c-date { width: 64px; text-align: right; color: var(--muted); font-size: .82rem; }

td.price.unmet::after { content: "▾"; color: var(--gold); margin-left: 7px; font-size: .8em; }

.glyphs { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.glyph { font-size: 13px; }
.glyph.seo { color: var(--cyan); }
.gem13png { color: var(--violet); }

.fg-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; font-family: var(--head); font-weight: 600; font-size: .76rem;
  background: rgba(78, 240, 196, .1); border: 1px solid rgba(78, 240, 196, .35);
  border-radius: var(--radius-sm); color: var(--mint); white-space: nowrap;
  transition: transform .12s, box-shadow .15s, background .15s;
}
.fg-button:hover {
  background: var(--mint); color: var(--bg);
  box-shadow: 0 0 18px rgba(78, 240, 196, .35); transform: translateY(-1px);
}
.rss { font-size: .68rem; color: var(--pink); }
.fontsw { float: right; cursor: pointer; color: var(--muted); }
.fontsw:hover { color: var(--mint); }

.endtime .alert { color: var(--pink); font-weight: 700; font-family: var(--head); }

#pfinished { width: 60%; float: left; padding-right: 22px; font-size: .84rem; }
#ptop { width: 40%; float: left; font-size: .84rem; }
#pfinished, #ptop { color: var(--muted); }

#gems .g-name { width: 45%; }
#gems .g-price { width: 15%; text-align: center; }
#gems .g-end { width: 25%; }
#gems .g-act { width: 15%; text-align: right; }

#seoauctions .s-rate { width: 25%; text-align: center; }
#seoauctions .s-name { width: 35%; }
#seoauctions .s-price { width: 10%; text-align: center; }
#seoauctions .s-end { width: 15%; }
#seoauctions .s-act { width: 15%; text-align: right; }
.seostat {
  background: rgba(78, 205, 255, .1); border: 1px solid rgba(78, 205, 255, .25);
  border-radius: 6px; color: var(--cyan); padding: 4px 8px; font-size: .72rem;
}
.seostat.nostats { background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--muted); font-style: italic; }
.seostatp { background: rgba(255, 210, 63, .12); border-color: rgba(255, 210, 63, .35); color: var(--gold); }
.fsz0 { font-size: 1rem; } .fsz1 { font-size: 1.08rem; }
.fsz2 { font-size: 1.16rem; } .fsz3 { font-size: 1.26rem; }

.error {
  background: linear-gradient(180deg, rgba(255, 107, 138, .1), transparent);
  border: 1px solid rgba(255, 107, 138, .3); color: #ffa8b9;
  padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: .84rem;
}
.notice {
  background: linear-gradient(180deg, rgba(78, 205, 255, .06), transparent);
  border: 1px solid rgba(78, 205, 255, .28); color: #a9e2ff;
  padding: 12px 14px; border-radius: var(--radius-sm); font-size: .84rem;
}
.note { color: var(--muted); font-size: .78rem; margin: 14px 2px 0; }

.showcase-head { color: var(--gold); font-family: var(--head); font-weight: 700; }
.showcase-note {
  color: var(--text); background: linear-gradient(180deg, rgba(255, 210, 63, .07), transparent);
  border: 1px solid rgba(255, 210, 63, .2);
  padding: 13px; border-radius: var(--radius-sm); margin-top: 8px; font-size: .84rem;
}
tbody tr.shwc td { padding: 12px 10px; background: rgba(255, 255, 255, .02); }

/* ---------- inner pages ---------- */

.page, .panel {
  background: linear-gradient(160deg, rgba(28, 22, 56, .95), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.narrow { max-width: 400px; }
.two-col { display: grid; grid-template-columns: 400px 1fr; gap: 30px; align-items: start; }
.dim, .muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .78rem; margin: .3rem 0 .9rem; }

label { display: block; font-family: var(--head); font-size: .78rem; font-weight: 600;
        color: var(--muted); margin: 1rem 0 .35rem; }
input[type=text], input[type=email], input[type=password],
input[type=number], select {
  width: 100%; padding: 10px 13px; font: 400 .88rem var(--body); color: var(--text);
  background: rgba(13, 10, 26, .6); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
input:focus, select:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(78, 240, 196, .12); }
.money-input { display: flex; align-items: center; gap: 8px; color: var(--muted); }

button {
  font-family: var(--head); font-weight: 600; font-size: .84rem; cursor: pointer;
  padding: 10px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
button:hover { border-color: var(--violet); transform: translateY(-1px); }
.cta { background: linear-gradient(100deg, var(--mint), var(--cyan)); color: var(--bg); border-color: transparent; }
.cta:hover { box-shadow: 0 0 22px rgba(78, 240, 196, .38); color: var(--bg); }
a.cta { display: inline-flex; padding: 10px 20px; border-radius: var(--radius-sm);
        font-family: var(--head); font-weight: 600; font-size: .84rem; }
.cta.wide { width: 100%; margin-top: 1.1rem; }
button.alt { background: var(--panel2); }
button.danger { color: var(--bad); border-color: rgba(255, 107, 138, .35); }
button.danger:hover { border-color: var(--bad); }
button.linkish { background: none; border: 0; padding: 9px 15px; color: var(--muted); font-weight: 500; }

.formerror { color: var(--bad); font-size: .8rem; min-height: 1.2em; margin: .5rem 0 0; }
.formok { color: var(--mint); font-size: .8rem; margin: .5rem 0 0; }
.credit { color: var(--mint); } .debit { color: var(--bad); }

.pill {
  display: inline-block; font-family: var(--head); font-size: .68rem; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.pill.lead, .pill.won, .pill.s-live { color: var(--mint); border-color: rgba(78, 240, 196, .35); background: rgba(78, 240, 196, .08); }
.pill.out, .pill.s-rejected { color: var(--bad); border-color: rgba(255, 107, 138, .35); background: rgba(255, 107, 138, .08); }
.pill.held, .pill.s-pending_approval { color: var(--gold); border-color: rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .08); }

.balances { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.label { font-family: var(--head); font-size: .68rem; text-transform: uppercase;
         letter-spacing: .08em; color: var(--muted); margin-bottom: .35rem; }
.label.spaced { margin-top: 1.1rem; }
.price.big { font-family: var(--mono); font-size: 1.9rem; font-weight: 600; color: var(--text); letter-spacing: -.02em; }
.clock.big { font-family: var(--mono); font-size: 1.7rem; font-weight: 600; color: var(--mint); }
.clock.big.urgent { color: var(--pink); }
.meta { color: var(--muted); font-size: .8rem; margin-top: .35rem; }
.auction-main { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.auction-head { margin-bottom: 18px; }
.auction-head .tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: .5rem; }
.seller { color: var(--muted); font-size: .84rem; margin: .7rem 0 0; }
.tag { font-family: var(--head); font-size: .66rem; font-weight: 600; text-transform: uppercase;
       letter-spacing: .05em; padding: 3px 8px; border-radius: 20px;
       background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--muted); }
.tag.seo { color: var(--cyan); border-color: rgba(78, 205, 255, .35); }
.tag.section { color: var(--violet); border-color: rgba(157, 123, 255, .4); }
.commitment {
  display: block; word-break: break-all; font-family: var(--mono); font-size: .7rem;
  background: rgba(13, 10, 26, .6); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; color: var(--muted);
}
.reserve.met { color: var(--mint); font-weight: 600; }
.reserve.unmet { color: var(--gold); font-weight: 600; }
.lead, .outbid { margin-top: 1rem; padding: 9px 12px; border-radius: var(--radius-sm);
                 font-family: var(--head); font-size: .84rem; font-weight: 600; }
.lead { background: rgba(78, 240, 196, .1); border: 1px solid rgba(78, 240, 196, .3); color: var(--mint); }
.outbid { background: rgba(255, 107, 138, .1); border: 1px solid rgba(255, 107, 138, .3); color: var(--bad); }
.quote-table { width: 100%; font-size: .84rem; }
.quote-table td { padding: 4px 0; border: 0; }
.quote-table td:last-child { text-align: right; font-family: var(--mono); font-weight: 600; color: var(--mint); }
.quote { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-table .decide { white-space: nowrap; }
.admin-table .decide button { margin: 4px 4px 0 0; font-size: .76rem; padding: 7px 13px; }
.admin-table .decide label { display: inline-block; margin: 0 .6rem 0 0; font-size: .74rem; }
.admin-table .fees { font-size: .8rem; }
.admin-table .short { color: var(--bad); font-weight: 600; }
.section { margin-bottom: 2rem; }
.empty { color: var(--muted); padding: 1.2rem 0; }

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  #pfinished, #ptop { width: 100%; float: none; padding-right: 0; }
  #tabs > div { overflow-x: auto; }
}

/* Their "Aa" control swaps the domain-column typeface. */
body.altfont .domain1, body.altfont .domain1 a { font-family: var(--mono); }

/* ==================================================================
   Front page: lede, tier filters, lot list, sold grid.
   Our own layout — not a tab strip over five tables.
   ================================================================== */

.lede { margin-bottom: 26px; }
.lede h1 { font-size: 1.9rem; margin: 0 0 .5rem; }
.lede p { color: var(--muted); max-width: 60ch; margin: 0 0 18px; font-size: .92rem; }

.controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.controls-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
  padding: 7px 15px; border-radius: 20px; font-family: var(--head);
  font-weight: 600; font-size: .78rem; color: var(--muted);
  background: transparent; border: 1px solid var(--line);
}
.chip i { font-style: normal; opacity: .65; margin-left: 5px; font-family: var(--mono); }
.chip:hover { color: var(--text); border-color: var(--violet); transform: none; }
.chip.active {
  color: var(--bg); background: var(--mint); border-color: var(--mint);
  box-shadow: 0 0 16px rgba(78, 240, 196, .3);
}
.chip.active i { opacity: .8; }

table.lots { margin-top: 4px; }
.l-name { width: 40%; }
.l-name a { color: var(--text); font-weight: 500; }
.l-name a:hover { color: var(--mint); }
.l-tier { width: 120px; }
.l-price { width: 110px; text-align: right; font-family: var(--mono); }
.l-bids { width: 80px; text-align: center; color: var(--muted); font-family: var(--mono); }
.l-close { width: 165px; color: var(--muted); font-size: .84rem; font-family: var(--mono); }
.l-act { width: 90px; text-align: right; }
.l-price.unmet::after { content: "▾"; color: var(--gold); margin-left: 6px; font-size: .8em; }
.withheld { color: #5d5680; cursor: help; }
.nobids { color: #5d5680; font-family: var(--body); font-size: .8rem; }
.l-close .alert { color: var(--pink); font-family: var(--head); font-weight: 700; font-size: .8rem; }

.tier {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-family: var(--head); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.t-spotlight { color: var(--mint); background: rgba(78, 240, 196, .1); border: 1px solid rgba(78, 240, 196, .3); }
.t-hidden_gem { color: var(--violet); background: rgba(157, 123, 255, .12); border: 1px solid rgba(157, 123, 255, .32); }

.sold { margin-top: 40px; }
.sold h2 { font-size: 1.15rem; margin-bottom: .3rem; }

@media (max-width: 720px) {
  .l-tier, .l-bids { display: none; }
  .controls-right { width: 100%; margin-left: 0; }
}

/* ==================================================================
   Squarer, more restrained controls.
   The earlier pill-and-glow treatment read as consumer; this is a
   trading table, so the buttons sit back and let the data lead.
   ================================================================== */

:root { --radius: 4px; --radius-sm: 3px; }

.fg-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; padding: 6px 14px; border-radius: var(--radius-sm);
  font-family: var(--head); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  transition: color .12s, border-color .12s, background .12s;
}
.fg-button:hover {
  background: rgba(78, 240, 196, .08); border-color: var(--mint);
  color: var(--mint); box-shadow: none; transform: none;
}

button, a.cta, .cta { border-radius: var(--radius-sm); }
button { padding: 8px 16px; font-size: .8rem; }
button:hover { transform: none; }
.cta { background: var(--mint); color: var(--bg); border-color: var(--mint); }
.cta:hover { background: #6ff5d3; box-shadow: none; color: var(--bg); }

.chip {
  border-radius: var(--radius-sm); padding: 6px 13px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
}
.chip:hover { border-color: var(--muted); color: var(--text); }
.chip.active {
  background: var(--mint); border-color: var(--mint); color: var(--bg);
  box-shadow: none;
}

.tier {
  border-radius: var(--radius-sm); padding: 3px 8px;
  font-size: .62rem; letter-spacing: .06em;
}
.pill { border-radius: var(--radius-sm); }
#search, #btnsearch { border-radius: var(--radius-sm); }
#search { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
#btnsearch { border-radius: 0 var(--radius-sm) 0 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.panel, .page { border-radius: var(--radius); }

/* ---------- attribute icons ---------- */

.l-icons { width: 132px; white-space: nowrap; line-height: 1; }
.ic { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.ic svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ic-premium    { color: var(--gold); }
.ic-seo        { color: var(--cyan); }
.ic-traffic    { color: var(--mint); }
.ic-lll        { color: var(--pink); }
.ic-dictionary { color: #7f8ab8; }
.ic-name       { color: var(--violet); }
.ic-place      { color: #6fb0a0; }

/* ---------- sold, as a list ---------- */

.sold { margin-top: 42px; }
.sold h2 { font-size: 1.1rem; margin-bottom: .3rem; }
.soldlist { margin-top: 14px; }
.sold-price { color: var(--mint); }

/* ==================================================================
   Header and footer — freevoip.co.uk's own rules, adapted.
   Their .wrap/.bar/.logo/.tools/.foot-grid vocabulary, with the
   Transcom lockup. Kept close so the two sites read as one estate.
   ================================================================== */

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 30px; width: 100%; }
.bar { display: flex; align-items: center; gap: 30px; height: 72px; }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 10, 26, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.logo {
  font-family: var(--head); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -.02em; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.logo:hover { color: var(--text); }
.logo .tlogo { height: 26px; width: auto; display: block; }
.logo .sep { width: 1px; height: 22px; background: var(--line); display: block; }
.logo .fv { display: inline-flex; align-items: center; }
.logo .fv::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 12px var(--mint); margin-right: 9px;
}
.logo b { color: var(--mint); }

nav.main { display: flex; gap: 24px; font-size: .9rem; font-weight: 500; }
nav.main a { color: var(--muted); }
nav.main a:hover { color: var(--text); }
nav.main a.on { color: var(--mint); }

.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tools a, .tools button {
  font-family: var(--head); font-weight: 600; font-size: .79rem;
  letter-spacing: .01em; line-height: 1.35; padding: 7px 13px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.tools a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.tools .acct { color: var(--mint); border-color: rgba(78, 240, 196, .45); }
.tools .acct:hover { color: var(--mint); border-color: var(--mint); background: rgba(78, 240, 196, .14); }
.tools .topup { color: var(--violet); border-color: rgba(157, 123, 255, .4); }
.tools .topup:hover { color: var(--violet); border-color: var(--violet); background: rgba(157, 123, 255, .14); }
.tools .cta { color: var(--bg); background: var(--mint); border-color: var(--mint); }
.tools .cta:hover { color: var(--gold); background: transparent; border-color: var(--gold); }
.tools button.linkish { color: var(--muted); border-color: var(--line); }
.tools button.linkish:hover { color: var(--text); border-color: var(--muted); }

.menu-toggle {
  display: none; background: none; border: none; color: var(--text);
  font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 6px;
}

footer.site { border-top: 1px solid var(--line); margin-top: 56px; padding: 38px 0 26px; }
.foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
  padding-bottom: 38px; border-bottom: 1px solid var(--line);
}
.foot-grid address {
  font-style: normal; color: var(--muted); font-size: .85rem;
  line-height: 1.7; margin-top: 12px;
}
.foot-grid address a { color: var(--muted); }
.foot-grid address a:hover { color: var(--mint); }
.foot-grid address .addr { white-space: pre-line; }
.foot-grid address .estd { display: block; margin-top: 10px; font-size: .8rem; }
.fcol h4 {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-weight: 400;
}
.fcol a { display: block; color: var(--text); font-size: .9rem; margin-bottom: 11px; }
.fcol a:hover { color: var(--mint); }
.foot-bot {
  display: flex; justify-content: space-between; padding-top: 24px;
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
  flex-wrap: wrap; gap: 10px;
}
.poweredby { display: inline-flex; align-items: center; gap: 7px; opacity: .7; color: var(--muted); }
.poweredby:hover { opacity: 1; color: var(--muted); }
.poweredby img { height: 16px; width: auto; display: block; }

@media (max-width: 900px) {
  nav.main { display: none; }
  nav.main.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 30px 16px;
  }
  nav.main.open a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .menu-toggle { display: block; }
  .bar { gap: 14px; }
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .tools .topup, .tools .acct { display: none; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- top bar: mark-only logo, icon tools hard right ---------- */

.logo.markonly { gap: 0; }
.logo.markonly .tlogo { height: 30px; }

/* margin-left:auto on .tools already pushes the cluster right; this
   makes it explicit so a future nav change cannot quietly undo it. */
.bar { justify-content: flex-start; }
.bar .tools { margin-left: auto; gap: 4px; }

/* Icon controls stay visible at every width — they are the only way
   in and out of an account. Only the nav collapses. */
@media (max-width: 760px) {
  .tools .ticon { display: inline-flex; }
}

/* ---------- prose pages (terms, buying guide) ---------- */

.prose { max-width: 74ch; }
.prose h2 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mint); margin: 26px 0 10px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: .92rem; }
.prose li { margin-bottom: 7px; }
.prose b { color: var(--text); }
.prose code {
  font-family: var(--mono); font-size: .85em; color: var(--cyan);
  background: rgba(78, 205, 255, .08); padding: 1px 5px; border-radius: 3px;
}

/* ==================================================================
   Header icons, after transcom.co.uk: no box, 20px, stroked, .85
   opacity lifting to full on hover. The bordered 34px squares they
   replace read as buttons; these read as controls.
   ================================================================== */

.ticon {
  width: auto; height: auto; padding: 0; margin-left: 14px;
  border: 0; background: none; border-radius: 0;
  color: var(--muted); opacity: .85;
  display: inline-flex; align-items: center; cursor: pointer;
  transition: color .15s, opacity .15s;
}
.ticon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; display: block; }
.ticon:hover { opacity: 1; }
.ticon:hover       { color: var(--text); }
.ticon.acct:hover  { color: var(--mint); }
.ticon.up:hover    { color: var(--gold); }
.ticon.admin:hover { color: var(--violet); }
.ticon.out:hover   { color: var(--bad); }
.ticon:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
.bar .tools { gap: 0; }

/* ---------- denser listing rows ---------- */

table.lots tbody td { padding: 4px 10px; line-height: 1.35; }
table.lots thead th { padding: 6px 10px; }
table.lots .fg-button { padding: 3px 12px; font-size: .7rem; }
table.lots .tier { padding: 2px 8px; }
.l-icons { line-height: 1; }
.ic { margin-right: 4px; }

/* ---------- headings: less blocky ----------
   Archivo 700 at -.02em tracking reads as a slab. Lighter weight and
   neutral tracking let the words breathe; the uppercase + letterspace
   treatment on sub-headings goes entirely. */

h1, h2, h3 { font-weight: 600; letter-spacing: 0; }
.lede h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; }
.prose h2 {
  font-size: 1rem; text-transform: none; letter-spacing: 0;
  font-weight: 600; color: var(--text); margin: 28px 0 10px;
}
.sold h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
thead th { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: .8rem; }

/* ---------- sign-in / register ---------- */

.lede-sm { color: var(--muted); font-size: .92rem; margin: -4px 0 20px; max-width: 46ch; }
.formerror.standalone { margin: 0 0 16px; }

/* Password sign-in is the fallback, not the offer, so it is folded
   away rather than sitting alongside the link form with equal weight. */
.alt-auth { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.alt-auth summary {
  cursor: pointer; color: var(--muted); font-size: .85rem;
  list-style: none; padding: 4px 0;
}
.alt-auth summary::-webkit-details-marker { display: none; }
.alt-auth summary::before { content: "+ "; color: var(--muted); }
.alt-auth[open] summary::before { content: "− "; }
.alt-auth summary:hover { color: var(--text); }

.more { margin: 22px 0 0; }
.more a { color: var(--mint); font-size: .9rem; text-decoration: none; }
.more a:hover { text-decoration: underline; }

.soldlist .l-tier { width: 1%; white-space: nowrap; }

/* ---------- terms ---------- */

.prose h3 { font-size: .92rem; font-weight: 600; margin: 18px 0 8px; color: var(--text); }
.prose ul { margin: 0 0 4px; padding-left: 18px; }
.prose li { margin: 0 0 7px; line-height: 1.55; color: var(--muted); }
.prose li b { color: var(--text); font-weight: 600; }
.prose p { line-height: 1.6; }
table.increments { max-width: 320px; }
table.increments td:last-child, table.increments th:last-child { text-align: right; }

/* ---------- seller listings ---------- */

.pill.s-dormant  { color: var(--muted);  border-color: var(--line); }
.pill.s-awaiting { color: var(--gold);   border-color: rgba(255,210,63,.45); }
tr.owing td { background: rgba(255, 210, 63, .05); }
.listings .act { white-space: nowrap; }
.listings .deadline { font-size: .72rem; margin-top: 3px; }
.listings .deadline.urgent { color: var(--bad); }
.quote-table .free { color: var(--mint); }
.l-close.nodate { color: var(--muted); }
.clock.nodate { color: var(--muted); }

/* ---------- domain verification ---------- */

.pill.s-unverified { color: var(--violet); border-color: rgba(157,123,255,.45); }
tr.verifyrow td { background: rgba(157,123,255,.05); padding: 12px 10px 14px; }
table.dnsrec { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .78rem; }
table.dnsrec th { text-align: left; font-weight: 500; color: var(--muted); padding: 3px 8px; }
table.dnsrec td { padding: 4px 8px; vertical-align: top; }
table.dnsrec code { font-family: var(--mono); font-size: .74rem; color: var(--text); }
table.dnsrec code.tok { word-break: break-all; color: var(--mint); }
table.dnsrec tr.oralt td { padding-top: 8px; font-size: .74rem; }

/* ---------- pending (bid taken, owner deciding) ---------- */

.tier.pending {
  background: rgba(255, 210, 63, .12); color: var(--gold);
  border-color: rgba(255, 210, 63, .4); margin-left: 4px;
}
.fg-button.disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
  border-color: var(--line); color: var(--muted);
}

/* ---------- messages ---------- */

.ticon.msgs { position: relative; }
.ticon .dot {
  position: absolute; top: -1px; right: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 6px var(--mint);
}
.ticon.msgs.has { color: var(--mint); opacity: 1; }

.msglist { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.msg { border: 1px solid var(--line); border-radius: var(--radius);
       padding: 12px 14px; margin-bottom: 10px; background: var(--panel); }
.msg.unread { border-color: rgba(78, 240, 196, .35); }
.msg.admincopy { border-style: dashed; opacity: .9; }
.msghead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
           margin-bottom: 7px; }
.msghead .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
              padding: 2px 7px; border: 1px solid var(--line);
              border-radius: var(--radius-sm); color: var(--muted); }
.k-bid_received, .k-listing_lapsed { color: var(--gold); border-color: rgba(255,210,63,.4); }
.k-auction_sold, .k-listing_promoted, .k-listing_verified { color: var(--mint); border-color: rgba(78,240,196,.4); }
.k.adm { color: var(--violet); border-color: rgba(157,123,255,.4); }
.msgdom { font-family: var(--mono); font-size: .82rem; color: var(--text); text-decoration: none; }
.msgdom:hover { color: var(--mint); }
.msgwhen { margin-left: auto; font-size: .72rem; color: var(--muted); }
.msgbody { white-space: pre-wrap; margin: 0; font-size: .86rem; line-height: 1.55;
           color: var(--muted); }
.msgundelivered { margin: 8px 0 0; font-size: .72rem; color: var(--bad); }

/* ---------- the bidder's own position on a pending lot ---------- */

.bid-panel.yours { border-color: rgba(78, 240, 196, .35); }
.yourbid { font-family: var(--mono); font-size: 1.6rem; color: var(--mint);
           margin: 2px 0 10px; }
.note.ok { border-left: 2px solid var(--mint); padding-left: 10px; }

/* ---------- member area ---------- */

.membernav { display: flex; gap: 2px; margin: -6px 0 22px;
             border-bottom: 1px solid var(--line); }
.membernav a {
  padding: 8px 15px; font-size: .85rem; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.membernav a:hover { color: var(--text); }
.membernav a.on { color: var(--mint); border-bottom-color: var(--mint); }
.membernav a i { font-style: normal; font-size: .7rem; background: var(--mint);
                 color: var(--bg); border-radius: 8px; padding: 0 5px;
                 margin-left: 3px; }

.price.big.owed { color: var(--gold); }
.statline { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 20px;
            font-size: .78rem; color: var(--muted); }
.statline .hot { color: var(--gold); }
.balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px; margin-bottom: 18px; }
.pill.lead { color: var(--mint); border-color: rgba(78,240,196,.45); }
.pill.out  { color: var(--bad);  border-color: rgba(255,107,138,.4); }
.pill.won  { color: var(--gold); border-color: rgba(255,210,63,.45); }

/* ---------- help ---------- */

.helpnav { display: flex; gap: 8px; margin: -8px 0 20px; }
.helpnav a {
  font-size: .8rem; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 5px 12px; transition: color .15s, border-color .15s;
}
.helpnav a:hover { color: var(--mint); border-color: rgba(78,240,196,.45); }
.prose h3 { margin-top: 20px; }
.prose h2 { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 34px; }
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.warn-inline { border-left: 2px solid var(--gold); padding-left: 12px;
               color: var(--text); }
table.costs { max-width: 520px; margin-top: 10px; }
table.costs td:last-child { text-align: right; white-space: nowrap; }
table.costs .free { color: var(--mint); }

/* ---------- help, two cards ---------- */

.helpcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.helpcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 24px;
}
/* The h2 rules under .prose add a top border and 34px of space to
   separate the two halves when they were stacked. Inside a card the
   card edge already does that job. */
.helpcard h2 { border-top: 0; padding-top: 0; margin-top: 0; margin-bottom: 4px;
               font-size: 1.15rem; color: var(--mint); }
.helpcard h3:first-of-type { margin-top: 14px; }
.helpcard table.costs { max-width: none; }

/* ---------- admin transfers ---------- */

table.transfers .parties { font-size: .76rem; line-height: 1.5; }
table.transfers .act button { display: block; margin-bottom: 4px; width: 100%; }
table.transfers .act { min-width: 190px; }
.pill.s-awaiting_payment { color: var(--gold);   border-color: rgba(255,210,63,.45); }
.pill.s-in_progress      { color: var(--violet); border-color: rgba(157,123,255,.45); }
.pill.s-completed        { color: var(--mint);   border-color: rgba(78,240,196,.45); }
.pill.s-failed_seller, .pill.s-failed_buyer, .pill.s-failed_unknown {
  color: var(--bad); border-color: rgba(255,107,138,.4); }
.dim.hot { color: var(--gold); }

/* ---------- pay page ---------- */

.payamount { font-family: var(--mono); font-size: 2rem; color: var(--mint);
             margin: 2px 0 4px; }
.payref code { font-family: var(--mono); font-size: 1.25rem; color: var(--gold);
               letter-spacing: .06em; }
.paywhen { font-size: 1rem; margin: 2px 0 2px; }
table.payee td { padding: 5px 8px; }
table.payee td:first-child { color: var(--muted); font-size: .8rem; width: 40%; }
table.payee code { font-family: var(--mono); color: var(--text); }
.paysteps { padding-left: 20px; }
.paysteps li { margin-bottom: 8px; line-height: 1.5; color: var(--muted); }
.paysteps strong { color: var(--text); }
.payref-sm code { font-family: var(--mono); font-size: .7rem; color: var(--gold); }
a.cta.paynow { display: inline-block; text-decoration: none; }