/* Inventory Tool — light theme, navy section headers, no Google Fonts. */

:root {
  --navy:       #1a4b8c;
  --text:       #222;
  --text-dim:   #666;
  --border:     #e4e4e4;
  --bg:         #fff;
  --bg-alt:     #fafafa;
  --bg-hover:   #f2f5fa;
  --warn-bg:    #fff8d6;
  --warn-fg:    #7a5d00;
  --ok-bg:      #e8f5e9;
  --ok-fg:      #2e7d32;
  --pos:        #2e7d32;   /* green — growth / positive */
  --neg:        #c62828;   /* red — decline / negative */
  --neutral:    #666;
  --hot-bg:     #ffe8d6;   --hot-fg:   #c1480b;
  --up-bg:      #e3f2e5;   --up-fg:    #1f7a2c;
  --stable-bg:  #eef0f3;   --stable-fg:#555;
  --down-bg:    #ffe7e5;   --down-fg:  #b22915;
  --cold-bg:    #e0ecf7;   --cold-fg:  #1f5faa;
  --na-bg:      #f4f4f4;   --na-fg:    #999;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  color: var(--text); background: var(--bg);
}

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.home-link {
  font-size: .85rem;
  color: var(--text-dim);
  text-decoration: none;
  padding: .3rem .6rem;
  border-radius: 4px;
  margin-right: .8rem;
}
.home-link:hover { background: #eef; color: #1a4b8c; }
.brand { margin: 0; margin-right: auto; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.country-switch label {
  margin-right: .4rem; font-size: .82rem; color: var(--text-dim);
}
.country-switch select {
  padding: .25rem .5rem; font: inherit;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg);
}

/* ── Tab bar ─────────────────────────────────────────── */
.tabs {
  position: sticky; top: 48px; z-index: 9;
  display: flex; flex-wrap: wrap;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 0 1rem;
}
.tab-btn {
  padding: .65rem 1rem;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: var(--text-dim);
  border-bottom: 2px solid transparent;
}
.tab-btn:hover { color: var(--text); background: var(--bg-hover); }
.tab-btn.active {
  color: var(--navy); border-bottom-color: var(--navy); font-weight: 600;
}

/* ── Main content ────────────────────────────────────── */
main#content { max-width: 1280px; margin: 0 auto; padding: 1.2rem; }
.loading, .placeholder {
  padding: 3rem 1rem; text-align: center; color: var(--text-dim);
}
.placeholder.status-warn {
  background: var(--warn-bg); color: var(--warn-fg); border-radius: 6px;
}

/* ── Stats dashboard ─────────────────────────────────── */
.dash-wrap { margin-bottom: 1.4rem; }
.dash-header { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .7rem; flex-wrap: wrap; gap: .4rem; }
.dash-title { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.dash-meta  { font-size: .78rem; color: var(--text-dim); }
.dash-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.dash-card {
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.dc-label { font-size: .75rem; color: var(--text-dim); letter-spacing: .02em; }
.dc-value { font-size: 1.55rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: .1rem; }
.dc-sub   { font-size: .76rem; color: var(--text-dim); margin-top: .1rem; }
@media (max-width: 720px) {
  .dash-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Semantic coloring for numbers ───────────────────── */
.stat-pos { color: var(--pos); font-weight: 600; }
.stat-neg { color: var(--neg); font-weight: 600; }
.stat-neutral { color: var(--neutral); }

/* ── Trend badges (HOT / UP / STABLE / DOWN / COLD) ──── */
.trend-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .45rem;
  font-size: .7rem; font-weight: 700;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend-badge.trend-hot    { background: var(--hot-bg);    color: var(--hot-fg); }
.trend-badge.trend-up     { background: var(--up-bg);     color: var(--up-fg); }
.trend-badge.trend-stable { background: var(--stable-bg); color: var(--stable-fg); }
.trend-badge.trend-down   { background: var(--down-bg);   color: var(--down-fg); }
.trend-badge.trend-cold   { background: var(--cold-bg);   color: var(--cold-fg); }
.trend-badge.trend-na     { background: var(--na-bg);     color: var(--na-fg); }

/* ── Parent rows ─────────────────────────────────────── */
.parent-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.parent-row:hover { background: var(--bg-hover); }
.parent-row .chevron { width: 12px; color: var(--text-dim); flex-shrink: 0; }
.parent-row .alias {
  font-weight: 700; color: var(--navy); font-size: 1rem;
  min-width: 5ch; flex-shrink: 0;
}
.parent-row .family {
  color: var(--text); font-size: .88rem;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.parent-row .parent-stat {
  font-size: .82rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.parent-row .pasin {
  font-family: "SFMono-Regular", Menlo, monospace;
  color: var(--text-dim); font-size: .75rem; flex-shrink: 0;
}

/* ── Child blocks ────────────────────────────────────── */
.child-block {
  padding: .9rem 1rem 1.2rem 2.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.child-header {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .3rem; flex-wrap: wrap;
}
.child-header .sku {
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: .88rem; color: var(--text); font-weight: 600;
}
.child-header .asin {
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: .76rem; color: var(--text-dim);
  text-decoration: none;
}
.child-header a.asin:hover { color: #1a4b8c; text-decoration: underline; }
.child-header .child-stat {
  font-size: .78rem;
  font-variant-numeric: tabular-nums; color: var(--text-dim);
}
.child-header .child-stat b { color: var(--text); font-weight: 600; }
/* Push 銷量佔比 / MoM / YoY to the right edge of the header row */
.child-header .child-stat-share { margin-left: auto; }

/* Shared control bar above all children of an expanded parent */
.parent-controls {
  display: flex; gap: 1.2rem; align-items: center;
  padding: .6rem 1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: .82rem; color: var(--text-dim);
}
.child-list-wrap { background: var(--bg-alt); }

.child-controls {
  display: flex; gap: 1.2rem; margin: .45rem 0 .4rem;
  font-size: .82rem; color: var(--text-dim);
}
.range-group { display: flex; gap: .2rem; }
.range-btn {
  padding: .2rem .55rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer;
  font: inherit; font-size: .78rem;
  color: var(--text-dim);
}
.range-btn.active {
  background: var(--navy); color: #fff; border-color: var(--navy);
  font-weight: 600;
}
.metric-group label { margin-right: .8rem; cursor: pointer; }

.chart-wrap { position: relative; height: 200px; }
.chart-empty {
  display: flex; align-items: center; justify-content: center;
  height: 200px; color: var(--text-dim);
  background: var(--bg);
  border: 1px dashed var(--border); border-radius: 4px;
  font-size: .85rem;
}
.chart-note {
  font-size: .75rem; color: var(--warn-fg);
  background: var(--warn-bg);
  padding: .2rem .6rem; border-radius: 3px;
  margin-bottom: .4rem; display: inline-block;
}

/* ── 1Y / 2Y analysis panel shown below the chart ────────── */
.chart-analysis {
  margin-top: .6rem; padding: .6rem .9rem;
  background: #f5f8fc; border-left: 3px solid var(--navy);
  border-radius: 3px; font-size: .85rem; color: var(--text);
}
.chart-analysis .ana-title {
  font-weight: 700; color: var(--navy); margin-bottom: .25rem;
  font-size: .8rem; letter-spacing: .02em;
}
.chart-analysis .ana-list {
  margin: 0; padding-left: 1.1rem;
}
.chart-analysis .ana-list li {
  margin: .15rem 0; line-height: 1.55;
}
.chart-analysis .ana-list b {
  color: var(--navy); font-weight: 600;
}
.chart-analysis .ana-delta {
  color: var(--text-dim); font-size: .8rem;
}

/* ── Per-SKU analysis block (<details>, collapsed by default) ───────── */
.sku-analysis {
  margin-top: 12px;
  padding: 10px 16px;
  background: #f7f9fc;
  border-left: 3px solid #1a4b8c;
  font-size: 0.9rem;
  line-height: 1.5;
}
.sku-analysis[open] { padding: 14px 16px; }
.sku-analysis > .ana-summary {
  cursor: pointer;
  list-style: none;           /* hide the default ▶ marker in Firefox */
  user-select: none;
  font-weight: 600;
  color: #1a4b8c;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sku-analysis > .ana-summary::-webkit-details-marker { display: none; }  /* Safari */
.sku-analysis > .ana-summary::before {
  content: "▸";
  display: inline-block;
  transition: transform .15s;
  color: #1a4b8c;
}
.sku-analysis[open] > .ana-summary::before { transform: rotate(90deg); }
.sku-analysis .ana-summary-date {
  margin-left: auto;
  font-weight: 400;
  color: #888;
  font-size: .82rem;
}
.sku-analysis[open] > .ana-summary {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e6ef;
}
.sku-analysis .ana-observed,
.sku-analysis .ana-section {
  margin-bottom: 10px;
}
.sku-analysis .ana-section-title {
  font-weight: 600;
  color: #1a4b8c;
  margin-bottom: 4px;
}
.sku-analysis ul {
  margin: 4px 0 0 1.2em;
  padding: 0;
}
.sku-analysis p {
  margin: 4px 0;
}
.sku-analysis a {
  color: #1a4b8c;
  text-decoration: underline;
}
.sku-analysis .ana-sources {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #555;
}
.sku-analysis .ana-sources-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.sku-analysis .ana-footer {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #888;
  font-style: italic;
}

.reliability-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.reliability-high   { background: #c8e6c9; color: #1b5e20; }
.reliability-medium { background: #fff9c4; color: #827717; }
.reliability-low    { background: #ffcdd2; color: #b71c1c; }

/* ── Customer reviews block inside the analysis panel ────────────── */
.ana-reviews { margin-top: 12px; }
.ana-reviews .review-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: .78rem; font-weight: 600; margin-left: 6px; vertical-align: middle;
}
.ana-reviews .review-good { background: #c8e6c9; color: #1b5e20; }
.ana-reviews .review-mid  { background: #fff9c4; color: #827717; }
.ana-reviews .review-bad  { background: #ffcdd2; color: #b71c1c; }
.ana-reviews-dist { margin: 6px 0 10px 0; max-width: 420px; }
.ana-review-bar {
  display: grid; grid-template-columns: 28px 1fr 30px;
  gap: 6px; align-items: center; font-size: .82rem; line-height: 1.4;
  color: #555;
}
.ana-review-bar-track {
  height: 8px; background: #e7ecf4; border-radius: 4px; overflow: hidden;
}
.ana-review-bar-fill {
  display: block; height: 100%; background: #1a4b8c;
}
.ana-review-bar-count { text-align: right; font-variant-numeric: tabular-nums; }
.ana-themes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  margin-top: 6px;
}
.ana-themes-sublabel {
  font-size: .85rem; font-weight: 600; color: #555; margin-bottom: 4px;
}
.ana-theme-list { list-style: none; margin: 0; padding: 0; }
.ana-theme-item {
  display: flex; gap: .5rem; align-items: center;
  padding: 4px 8px; margin-bottom: 3px;
  background: #fff; border-radius: 3px;
  font-size: .85rem; line-height: 1.4;
  border-left: 3px solid #ddd;
}
.ana-theme-item.ana-theme-pos { border-left-color: #4caf50; }
.ana-theme-item.ana-theme-neg { border-left-color: #e57373; }
.ana-theme-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: #555; min-width: 28px;
}
.ana-theme-label { color: #333; }
.ana-theme-empty { font-size: .82rem; color: #aaa; font-style: italic; padding: 4px 0; }
.ana-review-empty { font-size: .85rem; color: #888; font-style: italic; }

/* ── Forecast tab ───────────────────────────────────────── */
#forecast-panel.tab-panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.2rem;
}

.forecast-toolbar {
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.forecast-toolbar .tb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.forecast-toolbar .tb-row + .tb-row {
  padding-top: 10px;
  border-top: 1px dashed #e8e8ec;
}
.forecast-toolbar .tb-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.forecast-toolbar .tb-divider {
  width: 1px;
  align-self: stretch;
  background: #e3e3e8;
  margin: 2px 2px;
}
.forecast-toolbar .tb-spacer { flex: 1; }
.forecast-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
  color: var(--text-dim);
  white-space: nowrap;
}
.forecast-toolbar select,
.forecast-toolbar input[type="date"] {
  padding: 4px 8px;
  border: 1px solid #ccd;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 0.9em;
  color: var(--text);
  height: 30px;
}
.forecast-toolbar .tb-meta {
  color: #888;
  font-size: 0.82em;
}
.forecast-toolbar .btn-primary {
  background: var(--navy); color: #fff; border: none;
  padding: 0 14px; height: 30px; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: 0.88em;
}
.forecast-toolbar .btn-primary:hover { background: #15407a; }
.forecast-toolbar .btn-secondary {
  background: #fff; border: 1px solid #c5cbd6; color: var(--navy);
  padding: 0 12px; height: 30px; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: 0.88em;
}
.forecast-toolbar .btn-secondary:hover {
  background: #f0f3f9; border-color: #99a3b5;
}

.history-banner {
  background: #fff8e1;
  border: 1px solid #f0c040;
  border-radius: 4px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5a4000;
}
.history-banner[hidden] { display: none; }
.history-banner .btn-secondary {
  background: #eef; border: 1px solid #99c; color: #1a4b8c;
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
  font-size: 0.9em;
}
.history-banner .btn-secondary:hover { background: #dde; }

.forecast-parent-row {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 6px;
  background: white;
}
.forecast-parent-row header {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  user-select: none;
}
.forecast-parent-row header:hover { background: #f7f9fb; }
.forecast-parent-row .parent-name { font-weight: 600; color: #1a4b8c; }
.forecast-parent-row .child-count { color: #777; font-size: 0.9em; }
.forecast-parent-row .child-table { padding: 0 12px 12px; }
.forecast-parent-row .child-table table {
  width: 100%; border-collapse: collapse;
  font-size: 0.9em;
}
.forecast-parent-row .child-table th,
.forecast-parent-row .child-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #eee;
  text-align: right;
}
.forecast-parent-row .child-table th:first-child,
.forecast-parent-row .child-table td:first-child {
  text-align: left;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.forecast-parent-row .child-row { cursor: pointer; }
.forecast-parent-row .child-row:hover { background: #fffbe6; }
.forecast-parent-row .anom { color: #c60; }


/* ── Phase 1b additions ───────────────────────────────────────── */
.forecast-title {
  margin: 4px 0 14px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.forecast-title h2 {
  margin: 0;
  font-size: 1.35em;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.forecast-title .ft-meta {
  color: #8a8a93;
  font-size: 0.82em;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.forecast-title .ft-dot { color: #c8c8cf; }
.forecast-title #forecast-shipmeta.offline { color: #b08900; }
.forecast-title #forecast-shipmeta.offline::before { content: "⚠ "; }
.forecast-title #forecast-shipmeta-sep[hidden] { display: none; }
.history-banner {
  background: #fff5e6;
  border: 1px solid #f0c068;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-banner[hidden] {
  display: none;
}
.history-banner button {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}
.variance-cell.positive {
  color: #080;
  font-weight: 600;
}
.variance-cell.negative {
  color: #c00;
  font-weight: 600;
}
.hist-edit {
  width: 70px;
  padding: 2px 4px;
  border: 1px solid #bbb;
  border-radius: 3px;
  text-align: right;
}

.btn-icon {
  background: transparent;
  border: 1px solid #c5cbd6;
  color: var(--navy);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  line-height: 1.2;
}
.btn-icon:hover { background: #f0f3f9; }
.btn-icon[disabled] { opacity: .45; cursor: not-allowed; background: transparent; }

.row-edited { font-size: .85em; }
/* ── Phase 4a flat grid ───────────────────────────────────────── */
.forecast-grid-wrap {
  overflow-x: auto;
  overflow-y: visible;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.forecast-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82em;
  white-space: nowrap;
  min-width: 100%;
}
.forecast-grid th,
.forecast-grid td {
  padding: 5px 7px;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.forecast-grid .fg-head-row th {
  background: var(--navy);
  color: #fff;
  position: sticky; top: 0;
  z-index: 3;
  padding: 6px 8px;
  font-weight: 600;
  border-bottom: 2px solid #333;
}
.forecast-grid .fg-sticky-col {
  position: sticky; left: 0;
  z-index: 4;
  text-align: left !important;
  background: var(--navy);
}

.forecast-grid td.fg-sku-cell {
  position: sticky; left: 0;
  background: var(--bg);
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: 0.95em;
  text-align: left !important;
  z-index: 2;
}
.forecast-grid tr.fg-parent-row td {
  background: #f0f3fa;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  border-top: 2px solid #d0d6e0;
  text-align: left;
}
.forecast-grid tr.fg-parent-row td.fg-sticky-col {
  background: #f0f3fa;
  padding-left: 8px;
}
.forecast-grid td.fg-editable-cell {
  background: #fff4d9;
  cursor: text;
}
.forecast-grid td.fg-editable-cell.fg-has-override {
  background: #f0f8d9;
  font-weight: 600;
}
.forecast-grid td.fg-editable-cell input.fg-edit-input {
  width: 100%;
  min-width: 4em;
  padding: 2px 4px;
  border: 1.5px solid #d4a017;
  border-radius: 3px;
  background: #ffef9e;
  text-align: center;
  font: inherit;
}
.forecast-grid td.fg-plan-neg {
  background: #fadadb;
  color: #c62828;
  font-weight: 700;
}
.forecast-grid td.fg-plan-pos {
  color: #2e7d32;
  font-weight: 600;
}
.forecast-grid td.fg-sku-cell .fg-edited-mark {
  margin-left: 4px;
  color: #888;
  font-size: 0.85em;
}
.forecast-grid td.fg-name-cell {
  text-align: left !important;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555;
}

.forecast-popover {
  position: absolute;
  background: #222;
  color: #eee;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  font-size: 0.82em;
  line-height: 1.55;
  max-width: 440px;
  z-index: 100;
  pointer-events: none;
}
.forecast-popover[hidden] { display: none; }
.forecast-popover .pop-title { font-weight: 700; color: #fff; margin-bottom: 4px; }
.forecast-popover .pop-subtitle { color: #bbb; font-size: 0.9em; }
.forecast-popover table { margin-top: 6px; border-collapse: collapse; font-size: 0.9em; }
.forecast-popover td { padding: 2px 8px 2px 0; vertical-align: top; color: #ccc; }
.forecast-popover td.pop-value { color: #fff; font-weight: 600; padding-left: 12px; }
.forecast-popover .pop-sum { border-top: 1px solid #555; font-weight: 700; color: #fff; }
.forecast-popover .pop-footer { margin-top: 6px; color: #888; font-size: 0.85em; }

/* Phase 4b: empty ship-qty placeholder cells (cols 12/17) */
input.fg-qty-placeholder {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  font: inherit;
  color: inherit;
  text-align: center;
  box-sizing: border-box;
}
input.fg-qty-placeholder:focus {
  border-color: #d4a017;
  background: #fff4d9;
  outline: none;
}
input.fg-qty-placeholder::placeholder {
  color: #999;
  font-style: italic;
}
.fg-parent-boxes {
  font-weight: 400;
  font-size: 0.85em;
  color: #6c757d;
  margin-left: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}