/* --------------------------------------------------------------------------
   Ore Stock — SG Minerals

   Taken from the SG Minerals mark:
     #0078EC bright blue · #3E6FB5 steel blue · #686E74 grey · #F7EC17 yellow
   Blue carries emphasis. Yellow is reserved for attention, never decoration.

   Hand-written rather than generated, so the app needs no build step: edit this
   file, reload, done. That matters on a host with no Node.
   -------------------------------------------------------------------------- */

:root {
  --ink:  #0e2340;          /* deep navy — table headers, dark bands */
  --ink2: #1b3559;
  --ink3: #2a4a73;

  --paper: #f2f5f9;         /* cool off-white page */
  --line:  #dbe2ea;

  --ore:        #0078ec;    /* brand blue — the accent throughout */
  --ore-l:      #bfdcfa;    /* pale blue — for text on navy */
  --brand-deep: #0b5fbe;    /* darker blue for hover and links on white */

  --steel: #3e6fb5;
  --mute:  #7c8894;

  --warn:     #f7ec17;      /* brand yellow — attention marker only */
  --warn-ink: #7a6100;      /* readable text version of it */

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.015em; margin: 0; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* Figures must line up down a column, always */
.num, table { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

.shell { min-height: 100vh; display: flex; }

.side {
  width: 15rem;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.side-logo { padding: 1.5rem 1.25rem; }
.side-logo img { width: 7rem; height: auto; display: block; }

.nav { flex: 1; padding: 0 0.75rem; overflow-y: auto; }

.nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--ink2);
  transition: background 0.12s, color 0.12s;
}
.nav a:hover      { color: var(--ore); background: rgba(0, 120, 236, 0.06); }
.nav a.on         { color: var(--ore); background: rgba(0, 120, 236, 0.09); font-weight: 600; }

.nav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.5rem 0.75rem 0.25rem;
}
.nav-head span {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.nav-head a { font-size: 0.625rem; font-weight: 600; color: var(--ore); padding: 0; }

.nav .supplier { display: flex; align-items: center; gap: 0.5rem; }
.nav .supplier .dot {
  height: 6px; width: 6px; border-radius: 999px;
  background: var(--ore); flex-shrink: 0;
}
.nav .supplier .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .supplier .demo {
  margin-left: auto; font-size: 0.53rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute);
}
.nav .none { padding: 0.375rem 0.75rem; font-size: 0.72rem; color: var(--mute); }

.side-foot { padding: 1.25rem; border-top: 1px solid var(--line); }
.side-foot .who  { font-size: 0.81rem; font-weight: 600; color: var(--ink); }
.side-foot .role { font-size: 0.69rem; color: var(--mute); text-transform: capitalize; margin-bottom: 0.75rem; }
.side-foot button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.69rem; font-weight: 600; color: var(--ore);
}
.side-foot button:hover { color: var(--brand-deep); }

.main { flex: 1; min-width: 0; background: var(--paper); }

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

.page-head {
  padding: 1.75rem 2rem 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.page-head h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.page-sub     { font-size: 0.875rem; color: var(--mute); margin-top: 0.25rem; max-width: 62ch; }

.page-head .right { text-align: right; flex-shrink: 0; }
.page-head .right .big   { font-size: 1.625rem; font-weight: 700; line-height: 1; }
.page-head .right .under { font-size: 0.69rem; color: var(--mute); margin-top: 0.375rem; }

.page-body { padding: 0 2rem 2.5rem; }

.stack > * + * { margin-top: 1.5rem; }

.note {
  font-size: 0.72rem; color: var(--mute); line-height: 1.65;
  margin-top: 1rem; max-width: 68ch;
}

/* ------------------------------------------------------------------ cards */

.card { background: #fff; border: 1px solid rgba(219, 226, 234, 0.7); border-radius: 4px; }

.card-title {
  padding: 1rem 1.25rem 0.75rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.card-title h2 {
  font-size: 0.8rem; font-weight: 600; color: var(--steel);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.card-title .card-note { font-size: 0.69rem; color: var(--mute); }

.card-body { padding: 0 1.25rem 1.25rem; }

.empty { padding: 2rem 1.25rem; font-size: 0.81rem; color: var(--mute); text-align: center; }

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

.tw { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; }

table.grid thead tr { background: var(--ink); }

table.grid th {
  padding: 0.625rem 0.75rem;
  text-align: center;
  font-size: 0.655rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ore-l);
  white-space: nowrap;
}

table.grid td {
  padding: 0.625rem 0.75rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink2);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
table.grid td.tall  { padding-top: 0.875rem; padding-bottom: 0.875rem; }
table.grid td.b     { font-weight: 700; color: var(--ink); }
table.grid td.nowrap, table.grid th.nowrap { white-space: nowrap; }
table.grid td.warnish { color: var(--warn-ink); font-weight: 700; }
table.grid tbody tr.alt { background: rgba(242, 245, 249, 0.6); }
table.grid tbody tr.total { background: rgba(14, 35, 64, 0.05); border-top: 1px solid var(--line); }

table.grid a.lnk { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
table.grid a.lnk:hover { color: var(--ore); }
table.grid a.plain { font-weight: 600; color: var(--ink); }
table.grid a.plain:hover { color: var(--ore); }

.min-1040 { min-width: 1040px; }
.min-900  { min-width: 900px; }
.min-820  { min-width: 820px; }
.min-720  { min-width: 720px; }
.min-640  { min-width: 640px; }

.sub { display: block; font-size: 0.655rem; color: var(--mute); line-height: 1.2; margin-top: 0.125rem; }
.dash { color: var(--mute); }

/* the label/value list stacked inside one cell — grade and money columns */
.stacked {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0.25rem 1rem;
  text-align: left;
}
.stacked .k { font-size: 0.655rem; color: var(--mute); line-height: 1.35; }
.stacked .v { font-size: 0.75rem; text-align: right; line-height: 1.35; color: var(--ink2); }
.stacked .rule { padding-top: 0.25rem; border-top: 1px solid var(--line); }
.stacked .v.rule { font-weight: 700; color: var(--ink); }

mark.hit { background: rgba(247, 236, 23, 0.35); color: var(--warn-ink); border-radius: 3px; padding: 0 0.25rem; font-weight: 600; }

/* ------------------------------------------------------------------ stats */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(5, 1fr); } }

.stat { background: #fff; border: 1px solid rgba(219, 226, 234, 0.7); border-radius: 4px; padding: 1rem 1.25rem; }
.stat .v     { font-size: 1.625rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .v.ore { color: var(--ore); }
.stat .k     { font-size: 0.75rem; font-weight: 600; color: var(--ink2); margin-top: 0.5rem; }
.stat .n     { font-size: 0.69rem; color: var(--mute); margin-top: 0.125rem; }

/* ------------------------------------------------------------------ flags */

.flag { padding: 0.875rem 1.25rem; border-top: 1px solid rgba(219, 226, 234, 0.6); display: flex; gap: 0.75rem; }
.flag .dot { margin-top: 0.375rem; height: 8px; width: 8px; border-radius: 999px; flex-shrink: 0; }
.flag .body { min-width: 0; flex: 1; }
.flag .head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.flag .title { font-size: 0.845rem; font-weight: 600; color: var(--ink); }
.flag .detail { font-size: 0.78rem; color: var(--steel); margin-top: 0.25rem; line-height: 1.6; }
.flag .money { font-size: 0.81rem; font-weight: 700; color: var(--warn-ink); flex-shrink: 0; align-self: center; font-variant-numeric: tabular-nums; }
.flag .ref { font-size: 0.69rem; color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.flag .ref:hover { color: var(--ore); }

.chip {
  font-size: 0.59rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 0.125rem 0.375rem; border-radius: 3px;
}
.chip.high   { background: rgba(247, 236, 23, 0.3); color: var(--warn-ink); }
.chip.medium { background: rgba(62, 111, 181, 0.12); color: var(--steel); }
.chip.low    { background: rgba(124, 136, 148, 0.15); color: var(--mute); }

.dot.high   { background: var(--warn); }
.dot.medium { background: var(--steel); }
.dot.low    { background: var(--mute); }

.count { display: inline-block; font-size: 0.69rem; font-weight: 700; background: rgba(0, 120, 236, 0.12); color: var(--ore); padding: 0.125rem 0.5rem; border-radius: 3px; }

/* ------------------------------------------------------------------- tags */

.tag {
  display: inline-block;
  font-size: 0.59rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 0.125rem 0.375rem; border-radius: 3px;
  vertical-align: middle;
}
.tag.demo { margin-left: 0.5rem; background: rgba(62, 111, 181, 0.15); color: var(--steel); }
.tag.kind { background: rgba(62, 111, 181, 0.12); color: var(--steel); }
.tag.new  { background: var(--ore); color: #fff; }
.tag.slot { background: var(--ink2); color: var(--ore-l); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-block; border: 0; cursor: pointer; font-family: inherit;
  border-radius: 4px; padding: 0.625rem 1.25rem;
  font-size: 0.81rem; font-weight: 600; transition: filter 0.12s, border-color 0.12s, color 0.12s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--ore); color: #fff; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover:not(:disabled) { filter: brightness(1.25); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink2); }
.btn.ghost:hover { border-color: var(--ore); color: var(--ore); }
.btn.sm { padding: 0.375rem 0.75rem; font-size: 0.78rem; }

.back { display: inline-block; font-size: 0.78rem; color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.back:hover { color: var(--ore); }

/* ------------------------------------------------------------------ forms */

.field {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.625rem 0.75rem; font-size: 0.875rem; font-family: inherit;
  outline: none; transition: border-color 0.12s, background 0.12s;
}
.field:focus { border-color: var(--ore); background: #fff; }

.label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink2); margin-bottom: 0.375rem; }

select.field { max-width: 24rem; background: #fff; }

/* ------------------------------------------------------------------ login */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--paper); }
.login {
  width: 100%; max-width: 22rem; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 2.25rem 2rem; box-shadow: 0 1px 3px rgba(14, 35, 64, 0.06);
}
.login img { width: 8rem; height: auto; display: block; margin-bottom: 2rem; }
.login h1 { font-size: 1.625rem; font-weight: 700; margin-bottom: 0.25rem; }
.login .op { color: var(--mute); font-size: 0.81rem; margin-bottom: 1.75rem; }
.login .row + .row { margin-top: 0.75rem; }
.login .btn { width: 100%; margin-top: 0.75rem; }
.login .foot { color: var(--mute); font-size: 0.69rem; margin-top: 1.75rem; line-height: 1.65; }

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

.msg { font-size: 0.81rem; border-radius: 4px; padding: 0.75rem 1rem; line-height: 1.6; }
.msg.bad  { color: var(--warn-ink); background: rgba(247, 236, 23, 0.2); border: 1px solid rgba(247, 236, 23, 0.5); }
.msg.good { color: var(--ink2);     background: rgba(0, 120, 236, 0.08); border: 1px solid rgba(0, 120, 236, 0.25); }

/* ----------------------------------------------------------------- upload */

.drop {
  border: 2px dashed var(--line); background: #fff;
  border-radius: 4px; padding: 2.5rem 1.5rem; text-align: center;
}
.drop.over { border-color: var(--ore); background: rgba(0, 120, 236, 0.05); }
.drop .t { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }
.drop .s { font-size: 0.78rem; color: var(--mute); margin-bottom: 1.25rem; }
.drop input[type=file] { display: block; margin: 0 auto; font-size: 0.78rem; color: var(--ink2); font-family: inherit; }
.drop input[type=file]::file-selector-button {
  margin-right: 0.75rem; border: 0; border-radius: 4px;
  background: var(--ink); color: #fff; padding: 0.5rem 1rem;
  font-size: 0.78rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.drop input[type=file]::file-selector-button:hover { filter: brightness(1.25); }
.drop .picked { margin-top: 1rem; display: inline-block; text-align: left; }
.drop .picked li { font-size: 0.75rem; color: var(--steel); }
.drop .size { font-size: 0.72rem; color: var(--mute); margin-top: 0.5rem; }
.drop .size.over { color: var(--warn-ink); font-weight: 600; }
.drop .go { margin-top: 1.5rem; }
.drop .viewer { font-size: 0.75rem; color: var(--warn-ink); margin-top: 0.75rem; }

.plan { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.plan-head { background: var(--ink); padding: 1rem 1.25rem; border-radius: 4px 4px 0 0; }
.plan-head .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.plan-head .ref  { font-size: 1.25rem; font-weight: 700; color: #fff; }
.plan-head .to   { color: var(--mute); font-size: 0.81rem; }
.plan-head .sup  { font-size: 1rem; font-weight: 700; color: var(--ore); }
.plan-head .legal { font-size: 0.72rem; color: var(--mute); margin-top: 0.25rem; }

.kinds { padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kinds span { font-size: 0.69rem; border-radius: 4px; padding: 0.25rem 0.625rem; }
.kinds .have { background: rgba(62, 111, 181, 0.12); color: var(--steel); }
.kinds .miss { background: rgba(219, 226, 234, 0.6); color: var(--mute); text-decoration: line-through; }

.fields {
  padding: 0 1.25rem 1rem;
  display: grid; grid-template-columns: 1fr; gap: 0.625rem 1.5rem;
}
@media (min-width: 640px)  { .fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fields { grid-template-columns: repeat(4, 1fr); } }
.fields .f { border-top: 1px solid rgba(219, 226, 234, 0.7); padding-top: 0.5rem; }
.fields .f .k { font-size: 0.69rem; color: var(--mute); }
.fields .f .v { font-size: 0.845rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fields .f .src { font-size: 0.625rem; color: rgba(62, 111, 181, 0.7); margin-top: 0.125rem; }

.checks-wrap { padding: 0 1.25rem 1rem; }
.checks-wrap .h {
  font-size: 0.69rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--steel); margin-bottom: 0.5rem;
}
.checks { border: 1px solid var(--line); border-radius: 4px; }
.check { display: flex; gap: 0.75rem; padding: 0.625rem 0.875rem; }
.check + .check { border-top: 1px solid rgba(219, 226, 234, 0.7); }
.check .dot { margin-top: 0.375rem; height: 8px; width: 8px; border-radius: 999px; flex-shrink: 0; }
.check .body { min-width: 0; flex: 1; }
.check .l { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.check .d { font-size: 0.72rem; color: var(--steel); line-height: 1.6; margin-top: 0.125rem; }
.check .w { font-size: 0.655rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; flex-shrink: 0; align-self: center; }

.check.agrees .dot { background: var(--steel); }
.check.agrees .w   { color: var(--steel); }
.check.differs .dot { background: var(--warn); }
.check.differs .w   { color: var(--warn-ink); }
.check.cannot .dot { background: var(--line); }
.check.cannot .w   { color: var(--mute); }

.picker { margin: 0 1.25rem 1rem; background: rgba(27, 53, 89, 0.06); border: 1px solid rgba(62, 111, 181, 0.3); border-radius: 4px; padding: 0.875rem 1rem; }
.picker .h { font-size: 0.69rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--steel); margin-bottom: 0.5rem; }
.picker .n { font-size: 0.69rem; color: var(--mute); margin-top: 0.5rem; line-height: 1.6; }

.trucks-note { padding: 0 1.25rem 1rem; font-size: 0.75rem; color: var(--steel); }

.warnbox { margin: 0 1.25rem 1.25rem; background: rgba(247, 236, 23, 0.15); border: 1px solid rgba(247, 236, 23, 0.5); border-radius: 4px; padding: 0.75rem 1rem; }
.warnbox .h { font-size: 0.655rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--warn-ink); margin-bottom: 0.375rem; }
.warnbox li { font-size: 0.75rem; color: var(--ink2); line-height: 1.6; }

.unfiled { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.25rem; }
.unfiled .h { font-size: 0.81rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.unfiled p  { font-size: 0.75rem; color: var(--steel); }
.unfiled b  { font-weight: 600; }

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------- slot detail page */

.chain { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0 1.25rem 1.25rem; }
@media (min-width: 768px) { .chain { grid-template-columns: repeat(3, 1fr); } }

.step { border: 1px solid var(--line); border-radius: 4px; padding: 1rem; }
.step .top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.step .n {
  height: 1.25rem; width: 1.25rem; border-radius: 4px; background: var(--ink);
  color: #fff; font-size: 0.69rem; font-weight: 700;
  display: grid; place-items: center;
}
.step .n.ore { background: var(--ore); }
.step .lbl { font-size: 0.81rem; font-weight: 700; }
.step .kv { display: flex; justify-content: space-between; gap: 0.75rem; }
.step .kv + .kv { margin-top: 0.375rem; }
.step .kv dt { font-size: 0.72rem; color: var(--mute); }
.step .kv dd { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.sum { margin: 0 1.25rem 1.25rem; background: var(--ink); border-radius: 4px; padding: 1rem 1.25rem; }
.sum .h { font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ore-l); font-weight: 700; margin-bottom: 0.5rem; }
.sum .l { color: #fff; font-size: 0.94rem; line-height: 1.7; font-variant-numeric: tabular-nums; }
.sum .dry { color: var(--ore); font-weight: 700; font-size: 1.125rem; }
.sum .ok  { color: var(--ore-l); }
.sum .no  { color: var(--ore); }
.sum .none { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; }

.cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .cols { grid-template-columns: repeat(5, 1fr); } .cols .c3 { grid-column: span 3; } .cols .c2 { grid-column: span 2; } }
.cols .c2 > * + * { margin-top: 1.5rem; }

.kv-list { padding: 0 1.25rem 1.25rem; }
.kv-list .kv { display: flex; justify-content: space-between; gap: 0.75rem; }
.kv-list .kv + .kv { margin-top: 0.5rem; }
.kv-list dt { font-size: 0.75rem; color: var(--mute); }
.kv-list dd { margin: 0; font-size: 0.78rem; color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; }
.kv-list dd.b { font-weight: 700; color: var(--ink); }

.doclist { padding: 0 1.25rem 1.25rem; }
.doclist .d { display: flex; gap: 0.5rem; align-items: baseline; }
.doclist .d + .d { margin-top: 0.5rem; }
.doclist a { font-size: 0.72rem; color: var(--ink2); word-break: break-all; text-decoration: underline; text-underline-offset: 2px; }
.doclist a:hover { color: var(--ore); }
.doclist .missing { font-size: 0.72rem; color: var(--mute); word-break: break-all; }

/* ------------------------------------------------------- documents page */

.kindcards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .kindcards { grid-template-columns: repeat(3, 1fr); } }
.kindcard { background: #fff; border: 1px solid rgba(219, 226, 234, 0.7); border-radius: 4px; padding: 1.25rem; }
.kindcard .t { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; }
.kindcard .s { font-size: 0.69rem; color: var(--mute); margin-bottom: 0.75rem; }
.kindcard li { font-size: 0.75rem; color: var(--ink2); display: flex; gap: 0.5rem; }
.kindcard li::before { content: "·"; color: var(--ore); }

/* --------------------------------------------------------------- progress */

.bar { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.bar .track { width: 5rem; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar .fill  { height: 100%; background: var(--ore); }
.bar .pc    { width: 2.75rem; text-align: right; }

/* -------------------------------------------------------------- not found */

.nf { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: var(--paper); }
.nf .box { max-width: 28rem; text-align: center; }
.nf .k { font-size: 0.81rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ore); margin-bottom: 0.75rem; }
.nf h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; }
.nf p { font-size: 0.845rem; color: var(--steel); line-height: 1.7; margin-bottom: 1.75rem; }
.nf .row { display: flex; gap: 0.5rem; justify-content: center; }