/* =========================================================================
   MARS PARTS - storekeeping desk
   Skin: motorsport instrument panel. Carbon ground, one hot accent,
   chamfered edges, condensed technical type, gauge-style numerals.
   Dark by design - a committed look, not a theme toggle.
   ========================================================================= */

:root {
  /* ground */
  --bg:        #080A0F;
  --bg-2:      #0C1017;
  --card:      #12171F;
  --card-2:    #171E28;
  --raise:     #1D2430;

  /* edges */
  --line:      rgba(255, 255, 255, 0.07);
  --line-2:    rgba(255, 255, 255, 0.13);
  --line-3:    rgba(255, 255, 255, 0.22);

  /* type */
  --text:      #EEF3F9;
  --text-2:    #97A5B7;
  --text-3:    #5F6D7F;

  /* signal */
  --accent:    #FF4D18;
  --accent-2:  #FF7A45;
  --accent-dk: #C33608;
  --accent-a:  rgba(255, 77, 24, 0.14);
  --accent-g:  rgba(255, 77, 24, 0.40);

  --good:      #2FCE86;
  --good-2:    #5EEAA8;
  --good-a:    rgba(47, 206, 134, 0.13);
  --warn:      #F5B32B;
  --warn-a:    rgba(245, 179, 43, 0.13);
  --bad:       #FF4D5E;
  --bad-a:     rgba(255, 77, 94, 0.13);

  /* type stacks */
  --disp: "Chakra Petch", "Noto Sans SC", "Barlow Condensed", "Segoe UI", sans-serif;
  --body: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --data: "JetBrains Mono", "Noto Sans SC", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rail-w: 236px;
  --gap: 16px;

  /* the chamfer - cut top-left and bottom-right corners */
  --cut: 9px;
  --clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                  calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --clip-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 0 100%, 0 6px);

  /* carbon weave */
  --carbon: repeating-linear-gradient(45deg,
     rgba(255,255,255,0.016) 0 1px, transparent 1px 4px),
     repeating-linear-gradient(-45deg,
     rgba(255,255,255,0.016) 0 1px, transparent 1px 4px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14.5px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(255,77,24,0.07), transparent 62%),
    radial-gradient(700px 460px at 0% 100%, rgba(47,206,134,0.045), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Clipped elements swallow an outline, so they take an inset ring instead. */
.btn:focus-visible, .chip:focus-visible, .navbtn:focus-visible,
.seg__btn:focus-visible, .iconbtn:focus-visible, .rail__link:focus-visible,
.todo__go:focus-visible, .toast button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use, .sprite symbol {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.eyebrow {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* currency prefix, sized down so the digits read as the instrument value */
.rm {
  font-size: 0.56em;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.08em;
  margin-right: 0.3em;
  vertical-align: 0.12em;
}

/* ============================ shell ==================================== */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 0 18px;
  background: linear-gradient(180deg, #0B0F16 0%, #090C12 100%);
  background-image: var(--carbon);
  border-right: 1px solid var(--line);
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 20px;
  position: relative;
}
.rail__brand::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0 26px, var(--line) 26px);
}
.rail__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 100%);
  color: #fff;
  clip-path: var(--clip-sm);
  font: 700 15px/1 var(--disp);
  letter-spacing: 0.04em;
  box-shadow: 0 0 22px var(--accent-g);
}
.rail__name {
  display: flex; flex-direction: column;
  font: 700 19px/1 var(--disp);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.rail__name em {
  font: 400 10.5px/1.4 var(--body);
  font-style: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 6px;
}

.rail__nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
.navbtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font: 600 13px/1 var(--disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  clip-path: var(--clip-sm);
  transition: color 0.14s ease, background 0.14s ease;
}
.navbtn svg { width: 18px; height: 18px; flex: none; }
.navbtn span { flex: 1; }
.navbtn b { font: 500 11px/1 var(--data); color: var(--text-3); }
.navbtn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.navbtn.is-on {
  background: linear-gradient(90deg, var(--accent-a) 0%, transparent 100%);
  color: #fff;
}
.navbtn.is-on::before {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-g);
}
.navbtn.is-on svg,
.navbtn.is-on b { color: var(--accent); }

.rail__foot { margin-top: auto; padding: 0 14px; display: flex; flex-direction: column; gap: 7px; }
.rail__saved {
  display: flex; align-items: center; gap: 9px;
  font: 400 11px/1.4 var(--body);
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 0 2px 8px;
}
.rail__saved i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 9px var(--good);
  flex: none;
}
.rail__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 0;
  color: var(--text-2);
  font: 600 11px/1 var(--disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: var(--clip-sm);
}
.rail__link svg { width: 15px; height: 15px; }
.rail__link:hover { background: rgba(255,255,255,0.07); color: var(--text); }

/* --- stage --- */
.stage { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding: 18px 26px;
  background: rgba(8, 10, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__head h1 {
  font: 700 26px/1.05 var(--disp);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 5px;
}
.topbar__tools { display: flex; align-items: center; gap: 10px; }

.find {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, 40vw);
  padding: 0 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-sm);
}
.find:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.find svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.find input {
  flex: 1; min-width: 0;
  padding: 11px 0;
  border: 0; background: none;
  font-size: 13.5px;
}
.find input::placeholder { color: var(--text-3); }
.find input:focus { outline: none; }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.find kbd {
  font: 500 10px/1 var(--data);
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  padding: 4px 6px;
}

.stage__body { padding: 20px 26px 64px; display: flex; flex-direction: column; }
.view { display: flex; flex-direction: column; gap: var(--gap); }
.view[hidden] { display: none; }

/* ============================ controls ================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: var(--raise);
  color: var(--text);
  border: 0;
  clip-path: var(--clip-sm);
  font: 600 11.5px/1 var(--disp);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: #26303F; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 130%);
  color: #fff;
  box-shadow: 0 0 20px rgba(255,77,24,0.28);
}
.btn--primary:hover { background: linear-gradient(150deg, var(--accent-2) 0%, var(--accent) 130%); }
.btn--sell { background: var(--good); color: #04150D; }
.btn--sell:hover { background: var(--good-2); }
.btn--warn { background: var(--warn); color: #1A1200; }
.btn--warn:hover { background: #FFC85A; }
.btn--danger { background: var(--bad-a); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255,77,94,0.35); }
.btn--danger:hover { background: rgba(255,77,94,0.22); }
.btn--ghost {
  background: transparent;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.btn--icon { padding: 10px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.iconbtn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  clip-path: var(--clip-sm);
  transition: background 0.14s ease, color 0.14s ease;
}
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn:hover { background: rgba(255,255,255,0.07); color: var(--text); }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.toolbar__right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: var(--card);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  clip-path: var(--clip-sm);
  white-space: nowrap;
  font: 600 11px/1 var(--disp);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.14s ease, background 0.14s ease;
}
.chip b { font: 500 10.5px/1 var(--data); color: var(--text-3); }
.chip:hover { color: var(--text); background: var(--card-2); }
.chip.is-on {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 140%);
  color: #fff;
  box-shadow: 0 0 18px rgba(255,77,24,0.25);
}
.chip.is-on b { color: rgba(255,255,255,0.75); }

.pick { display: flex; align-items: center; gap: 8px; }
.pick > span {
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pick select {
  padding: 9px 11px;
  background: var(--card);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-sm);
  font-size: 13px;
  color: var(--text);
}
.field select, .field input, .field textarea {
  padding: 10px 12px;
  background: var(--bg-2);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 13.5px/1.5 var(--body);
  color: var(--text);
}
.pick select:focus, .field select:focus, .field input:focus, .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}
option { background: #12171F; color: var(--text); }

.seg { display: flex; clip-path: var(--clip-sm); box-shadow: inset 0 0 0 1px var(--line); }
.seg__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  background: var(--card);
  border: 0;
  color: var(--text-3);
  font: 600 11px/1 var(--disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.seg__btn svg { width: 14px; height: 14px; }
.seg__btn.is-on { background: var(--raise); color: var(--text); }
.seg__btn.is-on svg { color: var(--accent); }

.resultline {
  font: 400 12px/1 var(--body);
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: -4px;
}
.resultline b { font-family: var(--data); font-weight: 500; color: var(--text-2); }

.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--text-3);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}

/* ============================ hero gauge =============================== */

.hero {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 24px 28px;
  background:
    var(--carbon),
    radial-gradient(420px 260px at 12% 50%, rgba(255,77,24,0.10), transparent 70%),
    linear-gradient(135deg, var(--card-2) 0%, var(--card) 55%);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.hero__dial { position: relative; }
.hero__dial svg { display: block; width: 100%; height: auto; }
.hero__read {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-52%);
  text-align: center;
  pointer-events: none;
}
.hero__pct {
  font: 700 46px/1 var(--data);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.hero__pct span { font-size: 20px; color: var(--text-3); margin-left: 2px; }
.hero__cap {
  margin-top: 8px;
  font: 600 9.5px/1.4 var(--disp);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hero__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero__title h2 {
  font: 700 20px/1.1 var(--disp);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__title p { margin-top: 8px; font-size: 13px; color: var(--text-2); max-width: 64ch; }
.hero__title p b { color: var(--text); font-weight: 600; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hero__stat { background: var(--card); padding: 13px 15px; position: relative; }
.hero__stat > span {
  display: block;
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__stat strong {
  display: block;
  margin-top: 9px;
  font: 700 22px/1 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.hero__stat--in strong { color: var(--good-2); }
.hero__stat--shelf strong { color: var(--accent-2); }
.hero__stat::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 2px; height: 11px;
  background: var(--line-3);
}
.hero__stat--in::before { background: var(--good); }
.hero__stat--shelf::before { background: var(--accent); }

/* ============================ tiles ==================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  padding: 15px 17px 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  overflow: hidden;
}
.tile::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--line-3);
}
.tile--amber::after { background: var(--warn); box-shadow: 0 0 14px rgba(245,179,43,0.5); }
.tile--green::after { background: var(--good); box-shadow: 0 0 14px rgba(47,206,134,0.5); }
.tile--rust::after  { background: var(--accent); box-shadow: 0 0 14px var(--accent-g); }
.tile__label {
  display: flex; align-items: center; gap: 8px;
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tile__label svg { width: 14px; height: 14px; }
.tile__value {
  margin-top: 11px;
  font: 700 clamp(22px, 2.3vw, 30px)/1 var(--data);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.tile__note { margin-top: 8px; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.tile__note b { color: var(--text-2); font-weight: 500; }
.tile__note .up { color: var(--good-2); font-family: var(--data); font-weight: 500; }
.tile__note .down { color: var(--bad); font-family: var(--data); font-weight: 500; }
.tiles--slim .tile__value { font-size: clamp(20px, 1.9vw, 25px); }

/* ============================ panels =================================== */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap);
  align-items: start;
}
.panel {
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  overflow: hidden;
}
.panel__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.panel__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 44px; height: 1px;
  background: var(--accent);
}
.panel__head h2 {
  font: 700 15px/1.1 var(--disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.panel__head p { font-size: 12px; color: var(--text-3); }
.panel__head--bare {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  padding: 6px 0 0;
}
.panel__head--bare::after { display: none; }
.panel__head--bare h2 { font-size: 19px; letter-spacing: 0.1em; }

/* attention list */
.todo li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.todo li:last-child { border-bottom: 0; }
.todo__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  flex: none;
  clip-path: var(--clip-sm);
}
.todo__mark svg { width: 16px; height: 16px; }
.todo__mark--warn { background: var(--warn-a); color: var(--warn); }
.todo__mark--rust { background: var(--bad-a); color: var(--bad); }
.todo__mark--ink  { background: rgba(255,255,255,0.06); color: var(--text-2); }
.todo__mark--good { background: var(--good-a); color: var(--good-2); }
.todo__text { flex: 1; min-width: 0; }
.todo__text strong { display: block; font-size: 13.5px; font-weight: 600; }
.todo__text span { font-size: 12px; color: var(--text-3); }
.todo__go {
  padding: 7px 12px;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  flex: none;
}
.todo__go:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-2); }

/* shop log */
.log { padding: 8px 18px 16px; max-height: 336px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 12px 1fr; gap: 13px; padding: 10px 0; }
.log li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 13px 0 -6px var(--line-2);
}
.log li.ev-sold::before { background: var(--good); box-shadow: 0 0 8px var(--good), 0 13px 0 -6px var(--line-2); }
.log li.ev-reserved::before { background: var(--warn); box-shadow: 0 0 8px var(--warn), 0 13px 0 -6px var(--line-2); }
.log li.ev-removed::before { background: var(--bad); box-shadow: 0 0 8px var(--bad), 0 13px 0 -6px var(--line-2); }
.log li:last-child::before { box-shadow: none; }
.log__what { font-size: 13px; color: var(--text-2); }
.log__what b { font-weight: 600; color: var(--text); }
.log__when {
  display: block;
  margin-top: 4px;
  font: 400 10.5px/1 var(--data);
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* biggest ticket */
.ticket__row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background 0.14s ease;
}
.ticket li:last-child .ticket__row { border-bottom: 0; }
.ticket__row:hover { background: rgba(255,255,255,0.035); }
.ticket__bin {
  display: grid; place-items: center;
  min-width: 48px;
  padding: 7px 8px;
  flex: none;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  color: var(--text-2);
  font: 700 11px/1 var(--data);
  letter-spacing: 0.1em;
}
.ticket__what { flex: 1; min-width: 0; }
.ticket__what strong {
  display: block;
  font: 600 13.5px/1.2 var(--disp);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ticket__what span { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.ticket__price {
  flex: none;
  font: 700 15px/1 var(--data);
  font-variant-numeric: tabular-nums;
}

/* ============================ part cards =============================== */

.tagwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 13px;
}
.tagwall[hidden] { display: none; }

.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, var(--card-2) 0%, var(--card) 62%);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  overflow: hidden;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.tag:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--good);
  box-shadow: 0 0 14px rgba(47,206,134,0.45);
  z-index: 1;
}
.tag.is-held::before { background: var(--warn); box-shadow: 0 0 14px rgba(245,179,43,0.45); }
.tag.is-sold::before { background: var(--text-3); box-shadow: none; }

.tag__flag {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 15px;
  background: linear-gradient(90deg, var(--warn-a), transparent 78%);
  color: var(--warn);
  font: 600 9.5px/1.3 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.tag__flag svg { width: 14px; height: 14px; flex: none; }
.tag__flag span:first-of-type { flex: 1; }

.tag__body { padding: 15px 16px 14px 15px; display: flex; flex-direction: column; min-width: 0; }
.tag__top { display: flex; align-items: flex-start; gap: 11px; }
.tag__name {
  flex: 1; min-width: 0;
  font: 700 16px/1.15 var(--disp);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.tag__grade {
  display: grid; place-items: center;
  width: 27px; height: 27px;
  flex: none;
  clip-path: var(--clip-sm);
  font: 700 13px/1 var(--disp);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2);
}
.tag__grade[data-g="A"] { color: var(--good-2); background: var(--good-a); box-shadow: inset 0 0 0 1px rgba(47,206,134,0.5); }
.tag__grade[data-g="B"] { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.tag__grade[data-g="C"] { color: var(--warn); background: var(--warn-a); box-shadow: inset 0 0 0 1px rgba(245,179,43,0.5); }

.tag__fit { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }

.tag__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.tag__meta span {
  padding: 4px 8px;
  background: rgba(255,255,255,0.045);
  font: 500 10px/1.3 var(--data);
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.tag__meta .is-bin { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

.tag__money {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.tag__price {
  font: 700 24px/1 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.tag__cost {
  font: 400 10.5px/1.5 var(--data);
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-align: right;
}
.tag__cost b { font-weight: 500; color: var(--good-2); }

.tag__acts { display: flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; }
.tag__acts .btn { padding: 8px 10px; font-size: 10px; letter-spacing: 0.13em; gap: 6px; }
.tag__acts .btn--icon { padding: 8px; }

.tag.is-sold { background: var(--card); }
.tag.is-sold .tag__body > *:not(.tag__acts) { opacity: 0.55; }
.tag__stamp {
  position: absolute;
  right: 14px; bottom: 14px;
  padding: 4px 10px;
  color: var(--bad);
  box-shadow: inset 0 0 0 2px var(--bad);
  font: 700 italic 15px/1 var(--disp);
  letter-spacing: 0.22em;
  transform: rotate(-6deg);
  opacity: 0.8;
  pointer-events: none;
}

/* ============================ table ==================================== */

.tablewrap {
  overflow-x: auto;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.tablewrap[hidden] { display: none; }
.panel .tablewrap { box-shadow: none; clip-path: none; }

.grid th {
  position: sticky; top: 0;
  padding: 12px 15px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  white-space: nowrap;
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.grid td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 13px;
  color: var(--text-2);
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: rgba(255,255,255,0.03); }
.grid .num { text-align: right; font-family: var(--data); font-variant-numeric: tabular-nums; color: var(--text); }
.grid--tight td, .grid--tight th { padding: 10px 13px; font-size: 12.5px; }
.grid b { color: var(--text); }

.cell__name {
  font: 600 13.5px/1.2 var(--disp);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.cell__sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.cell__id { font: 400 10.5px/1 var(--data); color: var(--text-3); }
.cell__bin { font: 500 12px/1 var(--data); letter-spacing: 0.07em; color: var(--text); }

.state {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  clip-path: var(--clip-sm);
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.state::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}
.state--available { background: var(--good-a); color: var(--good-2); }
.state--reserved  { background: var(--warn-a); color: var(--warn); }
.state--sold      { background: rgba(255,255,255,0.05); color: var(--text-3); }
.state--sold::before { box-shadow: none; }

.rowacts { display: flex; gap: 4px; justify-content: flex-end; }
.rowacts .iconbtn { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px var(--line); }

/* ============================ donors =================================== */

.donors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 13px;
}
.donor {
  display: flex; flex-direction: column;
  background: linear-gradient(150deg, var(--card-2) 0%, var(--card) 60%);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.donor__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 17px 14px;
  border-bottom: 1px solid var(--line);
}
.donor__car {
  font: 700 17px/1.1 var(--disp);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.donor__plate {
  margin-top: 8px;
  display: inline-block;
  padding: 4px 9px;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  font: 700 11px/1.3 var(--data);
  letter-spacing: 0.16em;
  color: var(--text);
}
.donor__when { font-size: 11.5px; color: var(--text-3); margin-top: 9px; }
.donor__paid { text-align: right; flex: none; }
.donor__paid span {
  display: block;
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.donor__paid strong {
  display: block;
  margin-top: 7px;
  font: 700 20px/1 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.donor__body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 14px; }
.meter { display: flex; flex-direction: column; gap: 8px; }
.meter__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px;
  color: var(--text-2);
}
.meter__top b {
  font: 700 16px/1 var(--data);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.meter__track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.meter__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--good) 0%, var(--good-2) 100%);
  box-shadow: 0 0 14px rgba(47,206,134,0.45);
}
.meter__fill--under { background: linear-gradient(90deg, var(--accent-dk), var(--accent)); box-shadow: 0 0 14px var(--accent-g); }
.meter__fill--pot { background: rgba(255,255,255,0.13); box-shadow: none; }
.meter__mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); }
.meter__legend {
  display: flex; justify-content: space-between; gap: 10px;
  font: 400 10.5px/1 var(--data);
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.donor__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.donor__stat { background: var(--card); padding: 11px 12px; }
.donor__stat span {
  display: block;
  font: 600 9px/1.2 var(--disp);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-3);
}
.donor__stat strong {
  display: block; margin-top: 6px;
  font: 700 16px/1 var(--data);
  font-variant-numeric: tabular-nums;
}
.donor__foot { display: flex; gap: 6px; flex-wrap: wrap; }
.donor__foot .btn { padding: 8px 12px; font-size: 10px; }
.donor__note {
  font-size: 12px;
  color: var(--text-3);
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
}

/* ============================ charts =================================== */

.panel--chart .chartbox { padding: 18px 18px 8px; }
.chartbox svg { display: block; width: 100%; height: auto; overflow: visible; }

.ch-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.ch-axis { stroke: var(--line-2); stroke-width: 1; }
.ch-bar { fill: url(#barGrad); }
.ch-line { fill: none; stroke: var(--good-2); stroke-width: 2; stroke-linejoin: round; }
.ch-dot { fill: var(--good-2); stroke: var(--card); stroke-width: 2; }
.ch-label { font: 500 10.5px/1 var(--data); fill: var(--text-3); font-variant-numeric: tabular-nums; }
.ch-name {
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  fill: var(--text-3);
}
.ch-value { font: 700 11px/1 var(--data); fill: var(--text); }
.ch-hit { fill: transparent; cursor: default; }
.ch-col:hover .ch-bar { fill: var(--accent-2); }
.ch-bar, .ch-line, .ch-dot, .ch-name, .ch-value, .ch-grid, .ch-axis { pointer-events: none; }

.legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 4px 18px 16px;
  font-size: 12px;
  color: var(--text-3);
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; flex: none; }
.legend i.is-line { height: 3px; }

.chart-tip {
  position: fixed;
  z-index: 200;
  padding: 10px 12px;
  background: #05070B;
  color: var(--text);
  box-shadow: 0 0 0 1px var(--line-2), 0 12px 30px rgba(0,0,0,0.6);
  clip-path: var(--clip-sm);
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.chart-tip.is-on { opacity: 1; }
.chart-tip u {
  display: block;
  text-decoration: none;
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 7px;
}

/* ============================ sheet / forms ============================ */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(4px);
}
.scrim[hidden] { display: none; }

.sheet {
  width: min(680px, 100%);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, var(--card-2) 0%, var(--card) 45%);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px rgba(0,0,0,0.6);
  clip-path: var(--clip);
  animation: rise 0.18s ease-out;
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sheet__head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 56px; height: 1px;
  background: var(--accent);
}
.sheet__head h2 {
  font: 700 20px/1.1 var(--disp);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 5px;
}
.sheet__body { padding: 20px; overflow-y: auto; }
.sheet__foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span {
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field--wide { grid-column: 1 / -1; }
.field textarea { resize: vertical; min-height: 70px; }
.field em { font-style: normal; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }
.field--money input { font-family: var(--data); }

.fieldset {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 15px;
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fieldset > p {
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.radios { display: flex; gap: 7px; flex-wrap: wrap; }
.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  font: 600 11.5px/1 var(--disp);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio small {
  font: 400 10.5px/1 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.radio:has(input:checked) {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 140%);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,77,24,0.3);
}
.radio:has(input:checked) small { color: rgba(255,255,255,0.8); }
.radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.switch {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  background: rgba(255,255,255,0.025);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
}
.switch input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.switch div strong { display: block; font-size: 13px; font-weight: 600; }
.switch div span { font-size: 11.5px; color: var(--text-3); }

.sumline {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
}
.sumline span {
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sumline strong {
  font: 700 22px/1 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.sumline strong.up { color: var(--good-2); }
.sumline strong.down { color: var(--bad); }

/* listing generator */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button {
  padding: 10px 15px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font: 600 11.5px/1 var(--disp);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tabs button:hover { color: var(--text-2); }
.tabs button.is-on { color: var(--text); border-bottom-color: var(--accent); }
.listing {
  width: 100%;
  min-height: 220px;
  padding: 16px;
  background: var(--bg-2);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font: 400 13.5px/1.7 var(--body);
  resize: vertical;
}
.listing:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }

.detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
  margin-bottom: 18px;
}
.detail div { background: var(--card); padding: 11px 13px; }
.detail span {
  display: block;
  font: 600 9px/1.2 var(--disp);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.detail strong { font: 500 13.5px/1.4 var(--data); }

/* ============================ toasts =================================== */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  pointer-events: none;
  width: min(460px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 15px;
  background: #0B0F16;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(0,0,0,0.55);
  clip-path: var(--clip-sm);
  font-size: 13px;
  pointer-events: auto;
  animation: rise 0.18s ease-out;
}
.toast svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.toast span { flex: 1; }
.toast button {
  padding: 7px 12px;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  color: var(--text);
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.toast button:hover { background: rgba(255,255,255,0.08); }
.toast--good svg { color: var(--good-2); }
.toast--bad svg { color: var(--bad); }

/* ============================ tab bar ================================== */

.tabbar { display: none; }

/* ============================ print ==================================== */

.printarea { display: none; }

@media print {
  .app, .scrim, .toasts { display: none !important; }
  .printarea { display: block; }
  body { background: #fff; color: #000; background-image: none; }
  .plabel {
    width: 88mm;
    padding: 6mm;
    margin: 0 0 6mm;
    border: 1.2mm solid #000;
    page-break-inside: avoid;
  }
  .plabel h3 { font: 700 20pt/1.05 var(--disp); text-transform: uppercase; letter-spacing: 0.06em; }
  .plabel .pbin { font: 700 34pt/1 var(--data); letter-spacing: 0.06em; }
  .plabel .pfit { font: 400 11pt/1.4 var(--body); margin-top: 2mm; }
  .plabel .pmeta { font: 500 10pt/1.5 var(--data); margin-top: 3mm; border-top: 0.4mm dashed #000; padding-top: 2mm; }
}

/* ============================ responsive =============================== */

@media (max-width: 1180px) {
  .hero { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
  .find { width: min(280px, 34vw); }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }

  .topbar { padding: 13px 15px; align-items: center; }
  .topbar__head h1 { font-size: 20px; }
  .topbar__tools { width: 100%; }
  .find { width: 100%; }
  #btnAdd { display: none; }

  .stage__body { padding: 15px 15px 100px; }

  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px; text-align: center; }
  .hero__dial { max-width: 240px; margin: 0 auto; }
  .hero__title p { margin-left: auto; margin-right: auto; }
  .hero__stats { text-align: left; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { align-items: stretch; }
  .toolbar__right { justify-content: space-between; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .tagwall, .donors { grid-template-columns: minmax(0, 1fr); }

  .scrim { padding: 0; align-items: flex-end; }
  .sheet {
    width: 100%;
    max-height: 92vh;
    clip-path: none;
    animation: slideup 0.2s ease-out;
  }
  @keyframes slideup { from { transform: translateY(26px); opacity: 0.4; } }
  .form { grid-template-columns: minmax(0, 1fr); }
  .toasts { bottom: 90px; }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    background: rgba(9, 12, 18, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 2px 11px;
    background: transparent;
    border: 0;
    color: var(--text-3);
    font: 600 9px/1 var(--disp);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .tabbtn svg { width: 20px; height: 20px; }
  .tabbtn.is-on { color: var(--text); }
  .tabbtn.is-on svg { color: var(--accent); filter: drop-shadow(0 0 7px var(--accent-g)); }
  .tabbtn--add {
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 130%);
    color: #fff;
    margin: 7px;
    clip-path: var(--clip-sm);
    align-self: stretch;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255,77,24,0.4);
  }
  .tabbtn--add svg { width: 23px; height: 23px; }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .hero__stats { grid-template-columns: minmax(0, 1fr); }
  .panel__head--bare { flex-direction: column; align-items: flex-start; gap: 11px; }
  .pick > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   TELEMETRY LAYER
   The parts that make this read as an instrument cluster rather than a
   dashboard template: the rev strip, the tachometer, HUD framing, angled
   section headers, and the motion that ties them together.
   ========================================================================= */

/* ---- alignment corrections carried forward ---------------------------- */
.tag__body { flex: 1; }
.tag__money { margin-top: auto; }
.hero__stat strong, .tile__value, .tag__price, .ticket__price,
.donor__paid strong, .donor__stat strong, .meter__top b, .sumline strong { white-space: nowrap; }
.hero__stat .rm, .donor__paid .rm, .donor__stat .rm, .detail .rm, .sumline .rm { display: inline; }
.sheet__foot {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  grid-column: 1 / -1;
  margin: 22px -20px -20px;
  padding: 15px 20px 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

/* ---- motion primitives ------------------------------------------------ */

@keyframes cardIn   { from { opacity: 0; transform: translateY(14px); } }
@keyframes barRise  { from { transform: scaleY(0); } }
@keyframes ledOn    { from { opacity: 0.18; transform: skewX(-16deg) scaleY(0.35); } }
@keyframes sweepBy  { to   { transform: translateX(260%) skewX(-18deg); } }

.tag, .donor, .tile {
  animation: cardIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}

/* a light sweeps across a card as the pointer crosses it */
.tag__col::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.tag:hover .tag__col::after { opacity: 1; animation: sweepBy 0.75s ease-out; }

/* ---- rev strip: shift lights across the top of the floor -------------- */

.revbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  background: linear-gradient(90deg, var(--card) 0%, var(--bg-2) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.revbar__label {
  font: 600 9.5px/1.5 var(--disp);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  flex: none;
  max-width: 132px;
}
.revbar__leds {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  height: 24px;
}
.revbar__led {
  flex: 1;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: skewX(-16deg);
  transform-origin: bottom;
}
.revbar__led.on {
  animation: ledOn 0.22s ease-out both;
  animation-delay: calc(var(--n) * 45ms);
}
.revbar__led.on.g { background: var(--good); box-shadow: 0 0 14px rgba(47,206,134,0.55); }
.revbar__led.on.a { background: var(--warn); box-shadow: 0 0 14px rgba(245,179,43,0.55); }
.revbar__led.on.r { background: var(--accent); box-shadow: 0 0 16px var(--accent-g); }
.revbar__read {
  flex: none;
  text-align: right;
  font: 700 17px/1 var(--data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.revbar__read small {
  display: block;
  margin-top: 6px;
  font: 600 9px/1 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- the cluster: HUD frame around the gauge -------------------------- */

.hero { position: relative; }
.hero > .hud {
  position: absolute;
  width: 24px; height: 24px;
  pointer-events: none;
  z-index: 3;
}
.hud--tl { top: 11px; left: 11px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.hud--br { bottom: 11px; right: 11px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.hero__dial { position: relative; padding: 2px 0; }
.gauge__needle {
  transform-box: view-box;
  transform-origin: 170px 158px;
  transition: transform 0.6s cubic-bezier(0.34, 1.15, 0.4, 1);
}
.hero__pct { font-style: italic; letter-spacing: -0.05em; }
.hero__pct span { font-style: normal; }

/* readouts get a hairline bar that fills with the value */
.hero__stat { overflow: hidden; }
.hero__bar {
  margin-top: 11px;
  height: 3px;
  background: rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
.hero__bar i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: var(--line-3);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
.hero__stat--in .hero__bar i { background: var(--good); box-shadow: 0 0 10px rgba(47,206,134,0.6); }
.hero__stat--shelf .hero__bar i { background: var(--accent); box-shadow: 0 0 10px var(--accent-g); }

/* ---- angled section headers ------------------------------------------- */

.panel__head[data-no]::before,
.panel__head--bare[data-no]::before {
  content: attr(data-no);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font: 700 italic 30px/1 var(--disp);
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.055);
  pointer-events: none;
}
.panel__head--bare[data-no]::before { right: 0; font-size: 42px; }

.panel__head h2, .panel__head--bare h2 { position: relative; padding-left: 15px; }
.panel__head h2::before, .panel__head--bare h2::before {
  content: "";
  position: absolute;
  left: 0; top: 1px; bottom: 1px;
  width: 4px;
  background: var(--accent);
  transform: skewX(-14deg);
}
.panel__head p { padding-left: 15px; }

.panel__head--bare {
  position: relative;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* ---- scanline film over the big surfaces ------------------------------ */

.panel--chart .chartbox { position: relative; }
.panel--chart .chartbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 1;
}

/* ---- part card: bin gutter + grade flash ------------------------------ */

.tag { flex-direction: row; }
.tag__gutter {
  position: relative;
  width: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--line);
}
.tag__bin {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 700 11px/1 var(--data);
  letter-spacing: 0.24em;
  color: var(--text-2);
  white-space: nowrap;
}
.tag.is-sold .tag__bin { color: var(--text-3); }
.tag__no {
  position: absolute;
  top: 9px; left: 0; right: 0;
  text-align: center;
  font: 700 italic 10px/1 var(--disp);
  color: rgba(255,255,255,0.22);
}
.tag__col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* grade reads as a cut corner flash rather than a floating chip */
.tag__grade {
  width: 32px; height: 30px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%);
  padding-left: 6px;
  font-size: 14px;
}

.tag__acts .btn svg { width: 13px; height: 13px; }

/* ---- table: telemetry rows -------------------------------------------- */

.grid tbody tr { transition: background 0.12s ease; }
.grid tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.ch-bar { transform-box: view-box; }

/* ---- responsive additions --------------------------------------------- */

@media (max-width: 900px) {
  .revbar { flex-wrap: wrap; gap: 10px; }
  .revbar__label { max-width: none; flex: 1; }
  .revbar__leds { order: 3; flex-basis: 100%; height: 18px; }
  .hero > .hud { display: none; }
  .panel__head--bare[data-no]::before { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .tag, .donor, .tile, .revbar__led.on { animation: none !important; }
  .tag:hover .tag__col::after { animation: none; opacity: 0; }
}

.gauge__num {
  font: 500 9px/1 var(--data);
  fill: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.gauge__band {
  font: 700 8px/1 var(--disp);
  letter-spacing: 0.22em;
  fill: rgba(47,206,134,0.75);
}

/* Gauge face geometry: the needle pivots on the dial centre, and the digital
   readout sits in the open arc below it where the needle never sweeps. */
.gauge__needle { transform-origin: 170px 148px; }
.hero__read {
  top: 64%;
  transform: none;
}
.hero__pct { font-size: 34px; }
.hero__cap { margin-top: 6px; font-size: 8.5px; letter-spacing: 0.18em; }
/* Wide screens only - on tablets and phones the earlier @media rules stack
   the dial above the text, and an unscoped rule here would override them. */
@media (min-width: 1181px) {
  .hero { grid-template-columns: 300px minmax(0, 1fr); }
}
.hero__read { top: 56%; }

/* Digital readout drawn inside the dial */
.gauge__val {
  font: 700 italic 34px/1 var(--data);
  fill: var(--text);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.gauge__sign { font-style: normal; font-size: 16px; fill: var(--text-3); }
.gauge__cap {
  font: 600 8px/1 var(--disp);
  letter-spacing: 0.2em;
  fill: var(--text-3);
}
.hero__dial { display: block; }

/* ---- language switch --------------------------------------------------- */

.langtog {
  display: flex;
  flex: none;
  clip-path: var(--clip-sm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.langtog__btn {
  padding: 10px 13px;
  background: var(--card);
  border: 0;
  color: var(--text-3);
  font: 600 11px/1 var(--disp);
  letter-spacing: 0.14em;
  transition: background 0.14s ease, color 0.14s ease;
}
.langtog__btn:hover { color: var(--text); }
.langtog__btn.is-on {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 140%);
  color: #fff;
}
.langtog__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* Chinese carries no uppercase and needs far less tracking than the
   condensed Latin display face, so the shell relaxes when zh is active. */
html[lang="zh-Hans"] .navbtn,
html[lang="zh-Hans"] .chip,
html[lang="zh-Hans"] .btn,
html[lang="zh-Hans"] .seg__btn,
html[lang="zh-Hans"] .rail__link,
html[lang="zh-Hans"] .todo__go,
html[lang="zh-Hans"] .tag__name,
html[lang="zh-Hans"] .ticket__what strong,
html[lang="zh-Hans"] .cell__name,
html[lang="zh-Hans"] .donor__car,
html[lang="zh-Hans"] .state,
html[lang="zh-Hans"] .tag__flag,
html[lang="zh-Hans"] .revbar__label,
html[lang="zh-Hans"] .hero__stat > span,
html[lang="zh-Hans"] .donor__stat span,
html[lang="zh-Hans"] .donor__paid span,
html[lang="zh-Hans"] .tile__label,
html[lang="zh-Hans"] .field > span,
html[lang="zh-Hans"] .fieldset > p,
html[lang="zh-Hans"] .radio,
html[lang="zh-Hans"] .sumline span,
html[lang="zh-Hans"] .detail span,
html[lang="zh-Hans"] .tabs button,
html[lang="zh-Hans"] .grid th,
html[lang="zh-Hans"] .panel__head h2,
html[lang="zh-Hans"] .sheet__head h2,
html[lang="zh-Hans"] .topbar__head h1,
html[lang="zh-Hans"] .hero__title h2,
html[lang="zh-Hans"] .tabbtn,
html[lang="zh-Hans"] .eyebrow,
html[lang="zh-Hans"] .toast button {
  letter-spacing: 0.04em;
  text-transform: none;
}
html[lang="zh-Hans"] .tag__name,
html[lang="zh-Hans"] .donor__car,
html[lang="zh-Hans"] .ticket__what strong,
html[lang="zh-Hans"] .cell__name { font-weight: 700; }
html[lang="zh-Hans"] .revbar__label { font-size: 10.5px; line-height: 1.6; }
html[lang="zh-Hans"] .gauge__cap { letter-spacing: 0.08em; font-size: 9px; }
html[lang="zh-Hans"] .gauge__band { letter-spacing: 0.08em; font-size: 9px; }

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

.gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(700px 420px at 50% 8%, rgba(255,77,24,0.12), transparent 65%),
    var(--bg);
}
.gate[hidden] { display: none; }
.gate__card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 26px 24px 24px;
  background: linear-gradient(150deg, var(--card-2) 0%, var(--card) 55%);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px rgba(0,0,0,0.6);
  clip-path: var(--clip);
}
.gate__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--line);
}
.gate__err {
  padding: 10px 12px;
  background: var(--bad-a);
  box-shadow: inset 0 0 0 1px rgba(255,77,94,0.35);
  color: var(--bad);
  font-size: 12.5px;
}
.gate__err[hidden] { display: none; }
.gate__note { font-size: 11.5px; color: var(--text-3); text-align: center; }
.gate .btn--wide { width: 100%; justify-content: center; padding: 13px; }

.rail__who {
  font: 400 11px/1.4 var(--data);
  color: var(--text-3);
  padding: 0 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#btnSignOut[hidden] { display: none; }

/* =========================================================================
   IGNITION LAYER
   Three things a cluster does that a web page does not: it powers up in a
   sequence, it reacts when something happens, and it never sits completely
   still. Everything here is suppressed under prefers-reduced-motion.
   ========================================================================= */

/* ---- 1. power-up -------------------------------------------------------
   Turn the key and the panel wakes in order: rail, chrome, then each block
   of the screen. Roughly 1.2s, once per session. */

@keyframes ignite     { from { opacity: 1; } to { opacity: 0; } }
@keyframes bootRail   { from { opacity: 0; transform: translateX(-26px); } }
@keyframes bootTop    { from { opacity: 0; transform: translateY(-14px); } }
@keyframes bootBlock  { from { opacity: 0; transform: translateY(20px) scale(0.985); } }
@keyframes sweepLight { to { transform: translateX(260%) skewX(-16deg); } }

.ignition {
  position: fixed;
  inset: 0;
  z-index: 390;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,122,69,0.30), transparent 58%),
    rgba(255, 255, 255, 0.05);
  animation: ignite 0.75s ease-out forwards;
}

/* Kept under 0.7s end to end. This is a tool somebody opens fifty times a
   day - it should feel like a switch, not an intro. */
body.is-booting .rail    { animation: bootRail 0.4s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
body.is-booting .topbar  { animation: bootTop 0.34s cubic-bezier(0.2, 0.9, 0.25, 1) 0.04s both; }
body.is-booting .view > * {
  animation: bootBlock 0.36s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: calc(0.1s + var(--b, 0) * 0.05s);
}

/* the rev strip runs its own self-test during the boot */
.revbar__led.test {
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent-g);
  opacity: 1;
}

/* ---- 2. crossing the line ----------------------------------------------
   Marking a part sold is the best moment of the day. It gets a chequered
   flag across the screen and the shift lights firing. Under a second, so
   it still reads well on the twentieth sale of the week. */

.flag {
  position: fixed;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  overflow: hidden;
}
.flag__band {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 42%;
  background: repeating-conic-gradient(#FFFFFF 0% 25%, #0A0D12 0% 50%) 0 0 / 34px 34px;
  transform: translateX(-170%) skewX(-16deg);
  opacity: 0.92;
  animation: sweepLight 0.8s cubic-bezier(0.45, 0, 0.15, 1) forwards;
}
.flag__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(47,206,134,0.22), transparent 62%);
  animation: ignite 0.85s ease-out forwards;
}

.revbar.is-firing .revbar__led {
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-g);
  opacity: 1;
  transition: none;
}

/* the sold card takes the hit too */
@keyframes soldPunch {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.035); box-shadow: inset 0 0 0 1px var(--good), 0 0 40px rgba(47,206,134,0.35); }
  100% { transform: scale(1); }
}
.tag.just-sold { animation: soldPunch 0.6s cubic-bezier(0.3, 0.9, 0.3, 1); }

/* ---- 3. never completely still -----------------------------------------
   A slow sheen drifts over the ground so the screen reads as powered
   rather than printed. 34s, barely perceptible, costs nothing. */

@keyframes drift {
  0%   { transform: translate3d(-8%, -4%, 0); }
  50%  { transform: translate3d(8%, 4%, 0); }
  100% { transform: translate3d(-8%, -4%, 0); }
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 420px at 22% 18%, rgba(255,77,24,0.055), transparent 62%),
    radial-gradient(560px 380px at 82% 76%, rgba(47,206,134,0.04), transparent 62%);
  animation: drift 34s ease-in-out infinite;
}
.app { position: relative; z-index: 1; }

/* ---- 4. sharper to the touch -------------------------------------------
   Car controls are damped and immediate. Web defaults are soft and slow.
   Shorter durations, a firmer curve, and a real press on every control. */

.btn, .chip, .iconbtn, .navbtn, .seg__btn, .rail__link, .todo__go,
.langtog__btn, .ticket__row, .tabbtn {
  transition-duration: 0.11s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
}
.btn:active, .chip:active, .langtog__btn:active,
.seg__btn:active, .todo__go:active { transform: scale(0.972); }
.iconbtn:active { transform: scale(0.9); }

/* part cards lift and tip very slightly toward the pointer */
.tag {
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.25, 1),
              box-shadow 0.16s ease;
}
.tag:hover {
  transform: perspective(900px) translateY(-3px) rotateX(1.1deg);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 34px rgba(0, 0, 0, 0.45);
}
.tag:hover::before { box-shadow: 0 0 22px var(--accent-g); }
.tag.is-held:hover::before { box-shadow: 0 0 22px rgba(245,179,43,0.7); }

/* the nav marker slides rather than blinks */
.navbtn::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; bottom: 50%;
  width: 3px;
  background: var(--accent);
  transition: top 0.16s cubic-bezier(0.2, 0.9, 0.25, 1),
              bottom 0.16s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.navbtn.is-on::before {
  top: 7px; bottom: 7px;
  box-shadow: 0 0 12px var(--accent-g);
}

@media (prefers-reduced-motion: reduce) {
  .ignition, .flag { display: none !important; }
  body::before { animation: none; }
  body.is-booting .rail,
  body.is-booting .topbar,
  body.is-booting .view > * { animation: none !important; }
  .tag:hover { transform: none; }
  .tag.just-sold { animation: none; }
}

/* =========================================================================
   REACTIVE STATE
   The accent is not decoration, it is a reading. Every piece of chrome
   draws from --accent, so redefining three tokens repaints the whole
   machine the moment the yard crosses a line.

     risk     the cars will not pay back even if every part sells   red
     working  money still out there, recovering                     orange
     profit   the cars have paid for themselves                     teal

   Teal rather than green for profit: green already means "on the shelf"
   on every card, and two greens meaning different things is worse than
   no colour at all.
   ========================================================================= */

html[data-yard="risk"] {
  --accent:    #FF2E4D;
  --accent-2:  #FF6B80;
  --accent-dk: #B3122C;
  --accent-a:  rgba(255, 46, 77, 0.14);
  --accent-g:  rgba(255, 46, 77, 0.42);
}

html[data-yard="profit"] {
  --accent:    #00D5C4;
  --accent-2:  #4FEEE0;
  --accent-dk: #00897F;
  --accent-a:  rgba(0, 213, 196, 0.14);
  --accent-g:  rgba(0, 213, 196, 0.40);
}

/* The ground glow follows the state too, so the whole screen changes
   temperature rather than just the buttons. */
html[data-yard="risk"] body {
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(255,46,77,0.09), transparent 62%),
    radial-gradient(700px 460px at 0% 100%, rgba(255,46,77,0.04), transparent 60%);
}
html[data-yard="profit"] body {
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(0,213,196,0.08), transparent 62%),
    radial-gradient(700px 460px at 0% 100%, rgba(47,206,134,0.05), transparent 60%);
}
html[data-yard="risk"] body::before {
  background:
    radial-gradient(620px 420px at 22% 18%, rgba(255,46,77,0.06), transparent 62%),
    radial-gradient(560px 380px at 82% 76%, rgba(255,46,77,0.03), transparent 62%);
}
html[data-yard="profit"] body::before {
  background:
    radial-gradient(620px 420px at 22% 18%, rgba(0,213,196,0.055), transparent 62%),
    radial-gradient(560px 380px at 82% 76%, rgba(47,206,134,0.04), transparent 62%);
}

/* Chrome eases into the new colour instead of snapping, so a sale that
   tips the yard into profit reads as the machine changing state. */
.rail__mark, .btn--primary, .chip.is-on, .navbtn.is-on::before,
.tabbtn--add, .langtog__btn.is-on, .radio:has(input:checked),
.panel__head::after, .sheet__head::after, .rail__brand::after,
.panel__head h2::before, .panel__head--bare h2::before, .tile--rust::after {
  transition: background 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
}

/* the state readout on the rev strip */
.revbar__state {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  clip-path: var(--clip-sm);
  background: var(--accent-a);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent-2);
  font: 600 9.5px/1 var(--disp);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
}
.revbar__state::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
html[lang="zh-Hans"] .revbar__state { letter-spacing: 0.04em; text-transform: none; }


/* =========================================================================
   STOCK HIERARCHY
   Thirty-four identical cards make a RM 2,200 gearbox look like a RM 90
   bracket. Price type is scaled by what the part is actually worth, and
   when nobody is searching, the best thing on the shelf leads the wall.
   ========================================================================= */

.tag[data-tier="3"] .tag__price { font-size: 29px; }
.tag[data-tier="2"] .tag__price { font-size: 24px; }
.tag[data-tier="1"] .tag__price { font-size: 20px; color: var(--text-2); }
.tag[data-tier="1"] .tag__name  { font-size: 15px; }

/* the headline part - two columns wide, and it says why */
.tag--hero { grid-column: span 2; }
.tag--hero .tag__name  { font-size: 22px; }
.tag--hero .tag__price { font-size: 42px; }
.tag--hero .tag__fit   { font-size: 14px; }
.tag--hero .tag__body  { padding: 18px 20px 16px 18px; }
.tag--hero::before { width: 4px; }
.tag--hero .tag__gutter { width: 44px; }
.tag--hero .tag__bin { font-size: 12px; }

.tag__crown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 18px;
  background: linear-gradient(90deg, var(--accent-a), transparent 74%);
  color: var(--accent-2);
  font: 600 9.5px/1.3 var(--disp);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.tag__crown svg { width: 14px; height: 14px; flex: none; }
html[lang="zh-Hans"] .tag__crown { letter-spacing: 0.04em; text-transform: none; }

.tag__blurb {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  padding-left: 11px;
  border-left: 2px solid var(--line-2);
}

@media (max-width: 900px) {
  .tag--hero { grid-column: span 1; }
  .tag--hero .tag__price { font-size: 32px; }
  .tag--hero .tag__name { font-size: 18px; }
  .revbar__state { order: 2; }
}

/* The headline card is taller than the rest, which stretched whatever sat
   beside it and opened a void inside that card. Let each card keep its
   natural height instead; a little raggedness beats a hollow card. */
.tagwall { align-items: start; }

/* =========================================================================
   BRAND MARK
   An M drawn as a single angular stroke with its centre vertex cut flat,
   echoing the chamfer on every panel. It sits in a tile that carries the
   live accent, so the logo itself reports the state of the yard.
   ========================================================================= */

.rail__mark {
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.rail__mark svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #FFFFFF;
}
/* a light catches the top-left facet of the tile */
.rail__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(146deg, rgba(255,255,255,0.28) 0%, transparent 46%);
  pointer-events: none;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.34em;
  font: 700 20px/1 var(--disp);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wordmark b { font-weight: 700; color: #FFFFFF; }
.wordmark i {
  font-style: normal;
  font-weight: 500;
  color: var(--accent-2);
  letter-spacing: 0.22em;
  transition: color 0.5s ease;
}
html[lang="zh-Hans"] .wordmark { letter-spacing: 0.1em; }

.rail__name { gap: 0; }
.rail__name em { margin-top: 7px; }

.gate__brand .wordmark { font-size: 22px; }

@media print {
  .plabel .phead {
    display: flex;
    align-items: center;
    gap: 3mm;
    padding-bottom: 3mm;
    margin-bottom: 4mm;
    border-bottom: 0.4mm solid #000;
  }
  .pmark { width: 9mm; height: 9mm; color: #000; flex: none; }
  .plabel .phead span {
    font: 700 12pt/1 var(--disp);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* =========================================================================
   COMMISSION
   The cut is money the storekeeper is owed, so it is set apart from shop
   figures: amber, monospaced, and never mixed into a profit column.
   ========================================================================= */

.rephead__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg--period .seg__btn { padding: 9px 14px; }

.panel--pay { background: linear-gradient(150deg, rgba(245,179,43,0.07) 0%, var(--card) 58%); }
.panel--pay .panel__head h2::before { background: var(--warn); }
.panel--pay .panel__head::after { background: var(--warn); }

.glance__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.glance li:last-child .glance__row { border-bottom: 0; }
.glance__when {
  flex: none;
  min-width: 84px;
  font: 600 11px/1 var(--disp);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
}
.glance__sales { flex: 1; font-size: 12px; color: var(--text-3); }
.glance__cut {
  flex: none;
  font: 700 20px/1 var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--warn);
  white-space: nowrap;
}
.glance__cut .rm { color: rgba(245,179,43,0.55); }
.glance li:last-child .glance__cut { font-size: 25px; }
html[lang="zh-Hans"] .glance__when { letter-spacing: 0.04em; text-transform: none; }

/* commission column in the period table */
.grid td.com, .grid th.com { color: var(--warn); }
.grid th.com { color: rgba(245,179,43,0.75); }

/* the dark foot of each bar is the commission slice */
.ch-cut { fill: rgba(0, 0, 0, 0.42); pointer-events: none; }
.legend i.is-cut {
  background: linear-gradient(180deg, var(--accent-dk), #000);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.panel__foot {
  padding: 0 18px 15px;
  font-size: 12.5px;
  color: var(--text-3);
}
.panel__foot b { color: var(--text-2); font-weight: 600; }

@media (max-width: 560px) {
  .glance__row { flex-wrap: wrap; gap: 4px 12px; }
  .glance__sales { flex-basis: 100%; order: 3; }
}

/* The period drives every figure on the screen, so which one is active has
   to be unmistakable rather than a shade of grey. */
.seg--period .seg__btn.is-on {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-dk) 140%);
  color: #FFFFFF;
  box-shadow: 0 0 16px var(--accent-g);
}

/* ---- view-only role ---------------------------------------------------- */

.viewonly {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  clip-path: var(--clip-sm);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text-2);
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.viewonly::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.viewonly[hidden] { display: none; }
html[lang="zh-Hans"] .viewonly { letter-spacing: 0.04em; text-transform: none; }

/* a viewer never sees a control that would be refused */
body.is-viewer #btnAdd,
body.is-viewer .tabbtn--add { display: none; }
body.is-viewer .tabbar { grid-template-columns: repeat(4, 1fr); }
body.is-viewer #btnAddDonor { display: none; }

@media (max-width: 900px) {
  .viewonly { order: -1; padding: 7px 10px; }
}
.ticket__row[disabled] { cursor: default; }
.ticket__row[disabled]:hover { background: transparent; }

/* ---- whose sale was it ------------------------------------------------- */

/* Our sales sit between the shop's numbers and the commission, so they get
   a colour of their own rather than borrowing either. */
.grid td.ours, .grid th.ours { color: var(--good-2); }
.grid th.ours { color: rgba(94, 234, 168, 0.75); }

.switch--ours {
  background: rgba(245, 179, 43, 0.07);
  box-shadow: inset 0 0 0 1px rgba(245, 179, 43, 0.28);
}
.switch--ours input { accent-color: var(--warn); }

.tag__ours {
  align-self: center;
  flex: none;
  padding: 5px 9px;
  clip-path: var(--clip-sm);
  background: var(--warn-a);
  box-shadow: inset 0 0 0 1px rgba(245, 179, 43, 0.45);
  color: var(--warn);
  font: 700 9px/1 var(--disp);
  letter-spacing: 0.18em;
  pointer-events: none;
}
html[lang="zh-Hans"] .tag__ours { letter-spacing: 0.06em; }

.glance__sales em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.75;
  margin-top: 3px;
}

.sumline strong small {
  display: block;
  margin-top: 5px;
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
}
html[lang="zh-Hans"] .sumline strong small { letter-spacing: 0.04em; text-transform: none; }

/* =========================================================================
   PHOTOS
   A wall of pictures beats a wall of names. The cover sits above the part
   name so the eye lands on the thing itself, not the label.
   ========================================================================= */

.tag__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  background: #05070B;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  cursor: zoom-in;
}
.tag__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.tag:hover .tag__shot img { transform: scale(1.035); }
.tag__shot figcaption {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 3px 8px;
  background: rgba(5, 7, 11, 0.72);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  font: 700 10px/1 var(--data);
  color: var(--text);
}
.tag__shot figcaption::before { content: "+"; opacity: 0.6; margin-right: 2px; }
.tag.is-sold .tag__shot img { filter: grayscale(0.65) brightness(0.7); }
.tag--hero .tag__shot { aspect-ratio: 21 / 9; }

/* ---- the strip in the add/edit sheet ---- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.shot {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.shot--cover { box-shadow: inset 0 0 0 2px var(--accent); }
.shot__badge {
  position: absolute;
  left: 0; bottom: 0;
  padding: 3px 7px;
  background: var(--accent);
  color: #fff;
  font: 700 8.5px/1 var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shot__x {
  position: absolute;
  top: 4px; right: 4px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  background: rgba(5, 7, 11, 0.78);
  border: 0;
  clip-path: var(--clip-sm);
  color: var(--text-2);
}
.shot__x svg { width: 13px; height: 13px; }
.shot__x:hover { background: var(--bad); color: #fff; }

.shot--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px var(--line-2);
  text-align: center;
}
.shot--add svg { width: 20px; height: 20px; }
.shot--add span {
  font: 600 9px/1.2 var(--disp);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 4px;
}
.shot--add:hover { color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent); }
html[lang="zh-Hans"] .shot--add span,
html[lang="zh-Hans"] .shot__badge { letter-spacing: 0.04em; text-transform: none; }

/* ---- full size viewer ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 5, 8, 0.93);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__frame {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
}
.lightbox__frame img {
  max-width: 100%;
  max-height: calc(100vh - 130px);
  object-fit: contain;
  display: block;
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.7);
}
.lightbox__frame figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font: 600 12px/1 var(--disp);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.lightbox__frame figcaption b {
  font: 500 12px/1 var(--data);
  letter-spacing: 0.06em;
  color: var(--text-3);
}
html[lang="zh-Hans"] .lightbox__frame figcaption { letter-spacing: 0.04em; text-transform: none; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 64px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--clip-sm);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}
.lightbox__nav:hover { background: var(--accent); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }

@media (max-width: 560px) {
  .lightbox { padding: 14px; }
  .lightbox__nav { width: 38px; height: 54px; font-size: 22px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
  .shots { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* A part with no picture says so on the card and opens the camera in one
   tap - a feature nobody can find is a feature nobody uses. */
.tag__addshot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font: 600 10px/1 var(--disp);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.14s ease, color 0.14s ease;
}
.tag__addshot svg { width: 17px; height: 17px; }
.tag__addshot:hover {
  background: var(--accent-a);
  color: var(--accent-2);
}
.tag--hero .tag__addshot { padding: 20px 10px; font-size: 11px; }
html[lang="zh-Hans"] .tag__addshot { letter-spacing: 0.06em; text-transform: none; }