/* ============================================================================
   theme.css — the app's visual layer.
   ----------------------------------------------------------------------------
   Load order is deliberate:

       index.html <style>   structure and the label itself
       theme.css            colour, depth, type, controls   <- this file
       mobile.css           responsive layout

   Sitting in the middle means this file can restyle every control while the
   responsive rules still get the last word on layout, so nothing here can break
   the phone breakpoints.

   HARD RULE: nothing in here touches #label-preview's internals or any .lbl-*
   class. That is the printed label, its geometry is verified against real PDF
   output, and a stray margin would change what comes out of a thermal printer.
   Only the surrounding chrome is styled.
   ============================================================================ */

/* ------------------------------------------------------------------ tokens -- */

:root {
  /* Deeper, cooler greys than the original flat navy. The extra surface step
     gives cards something to sit on so the UI reads as layered rather than
     painted on. */
  --bg: #0A0C11;
  --surface: #11141C;
  --surface2: #171B25;
  --surface3: #1E2330;
  --border: #242A37;
  --border-strong: #303747;

  --text: #EDEFF5;
  --text2: #99A2B7;
  --text3: #626C84;

  --accent: #F5A524;
  --accent-hi: #FFC65C;
  --accent-lo: #D98A0B;
  --accent-ink: #1A1200;
  --accent-soft: rgba(245, 165, 36, .12);
  --ring: rgba(245, 165, 36, .32);

  --green: #2ECC71;
  --green-hi: #4ADE80;
  --red: #EF4444;
  --blue: #3B9EFF;

  --r-xs: 7px;
  --r-sm: 9px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 4px 14px -3px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 30px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .7);
  --shadow-accent: 0 6px 18px -6px rgba(245, 165, 36, .55);

  /* A 1px inner highlight along the top edge is what makes a dark surface look
     like a physical panel instead of a flat rectangle. */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .045);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

.light-mode {
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --surface2: #F3F5FA;
  --surface3: #E9EDF6;
  --border: #E3E7F0;
  --border-strong: #CFD6E4;

  --text: #0F1218;
  --text2: #5A6376;
  --text3: #8A93A7;

  --accent: #E0920F;
  --accent-hi: #F5A524;
  --accent-lo: #B87400;
  --accent-ink: #1A1200;
  --accent-soft: rgba(224, 146, 15, .1);
  --ring: rgba(224, 146, 15, .3);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 4px 12px -2px rgba(16, 24, 40, .1);
  --shadow-md: 0 10px 28px -8px rgba(16, 24, 40, .14);
  --shadow-lg: 0 24px 56px -16px rgba(16, 24, 40, .2);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* --------------------------------------------------------------- typography -- */

body {
  background:
    /* two very soft accent washes, so large empty areas are not dead flat */
    radial-gradient(820px 520px at 88% -8%, rgba(245, 165, 36, .055), transparent 60%),
    radial-gradient(700px 480px at -5% 108%, rgba(59, 158, 255, .045), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

.topbar h1 {
  font-size: 18px;
  font-weight: 640;
  letter-spacing: -0.021em;
}

.card-title {
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.012em;
  color: var(--text);
}

label.lbl,
.nav-section,
.stat-label,
th {
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: .075em;
}

/* Numbers that sit in columns should not jitter as they change */
.stat-value,
.sl-val,
.tag,
.lbl-mv,
td {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- icon set -- */

/* Inline SVG, stroked in currentColor, so icons inherit the colour of whatever
   they sit in and stay crisp at any density. Replaces the emoji and dingbat
   glyphs the app used to use, which rendered differently on every platform. */
.ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 19px; height: 19px; stroke-width: 1.6; }
.ic-xl { width: 30px; height: 30px; stroke-width: 1.4; }

/* Card titles get an icon in a tinted tile, which reads as deliberate rather
   than as a character that happened to be in the font. */
.card-title > .ic:first-child {
  width: 26px;
  height: 26px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  stroke-width: 1.9;
}

/* ------------------------------------------------------------------ sidebar -- */

.sidebar {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 140%);
  border-right: 1px solid var(--border);
}

.sidebar-logo {
  padding: 18px 16px 15px;
  gap: 11px;
}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--accent-hi), var(--accent-lo));
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.logo-text {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.logo-text span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text3);
  margin-top: 1px;
}

.nav { padding: 10px 9px; }

.nav-section {
  color: var(--text3);
  margin: 16px 0 6px;
  padding: 0 9px;
}

.nav-item {
  position: relative;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 540;
  gap: 10px;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item:active { background: var(--surface3); }

.nav-item.active {
  background: linear-gradient(160deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  font-weight: 640;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.nav-item.active .ic { stroke-width: 2; }

.sidebar-bottom { padding: 9px; border-top: 1px solid var(--border); }

.theme-btn {
  gap: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 540;
  transition: background .16s var(--ease), color .16s var(--ease);
}

/* ------------------------------------------------------------------- topbar -- */

.topbar {
  padding: 15px 24px;
  /* Frosted, so content scrolling underneath stays legible */
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Was low-contrast monospace in the corner, easy to miss and hard to read.
   Now a status chip with a live dot, which also puts the app's main selling
   point somewhere people actually look. */
.topbar-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: -0.003em;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
}

.topbar-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
  flex: 0 0 auto;
}

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

.card {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 86%, var(--bg)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--edge);
  padding: 20px 22px;
  margin-bottom: 18px;
}

.card-title {
  gap: 10px;
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.badge {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  padding: 2.5px 9px;
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: .02em;
}

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

.stats-grid { gap: 14px; margin-bottom: 22px; }

.stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 84%, var(--bg)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--edge);
  padding: 17px 18px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

/* A hairline of accent along the top edge ties the set together */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
  opacity: .8;
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--edge); }

.stat-label { color: var(--text3); margin-bottom: 7px; }

.stat-value {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(170deg, var(--text) 25%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font);
}

.stat-sub { font-size: 10.5px; color: var(--text3); margin-top: 5px; }

/* ------------------------------------------------------------------- inputs -- */

input,
select,
textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
  box-shadow: var(--shadow-sm) inset;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}

input:hover:not(:focus),
select:hover:not(:focus) { border-color: var(--border-strong); }

input:focus,
select:focus,
textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
  /* A soft ring rather than a hard outline; still a clear focus affordance. */
  box-shadow: 0 0 0 3.5px var(--ring);
}

input::placeholder { color: var(--text3); opacity: 1; }

label.lbl { color: var(--text2); }

select {
  /* Replace the platform arrow with one that matches the icon set */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--text2) 50%, var(--text2) 58%, transparent 59%),
                    linear-gradient(-45deg, transparent 49%, var(--text2) 50%, var(--text2) 58%, transparent 59%);
  background-position: calc(100% - 17px) 55%, calc(100% - 11px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.pfx-sym { color: var(--text3); font-size: 13px; }
.pfx input { padding-left: 25px; }

/* quantity stepper */
.qty-row { gap: 8px; }

.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}

.qty-btn:hover { background: var(--surface3); border-color: var(--border-strong); color: var(--text); }
.qty-btn:active { transform: scale(.94); }
.qty-row input { width: 62px; text-align: center; font-weight: 620; }

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

.btn {
  gap: 7px;
  padding: 10px 17px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  transition: transform .14s var(--ease-out), box-shadow .18s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease), filter .16s var(--ease);
}

.btn:active { transform: translateY(1px) scale(.988); }

.btn-primary {
  background: linear-gradient(170deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 9px 24px -6px rgba(245, 165, 36, .65), inset 0 1px 0 rgba(255, 255, 255, .34); }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover { background: var(--surface3); border-color: var(--border-strong); }

.btn-success {
  background: linear-gradient(170deg, var(--green-hi), var(--green));
  color: #052E14;
  box-shadow: 0 6px 18px -6px rgba(46, 204, 113, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-success:hover { filter: brightness(1.06); }

.btn-danger {
  background: color-mix(in srgb, var(--red) 16%, transparent);
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
}

.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.btn-sm { padding: 8px 13px; font-size: 12.5px; border-radius: 9px; }
.btn-icon { padding: 8px; border-radius: 9px; }
.btn-row { gap: 10px; margin-top: 19px; }

/* ------------------------------------------------- label size segmented pick -- */

.size-btns { gap: 9px; }

.sz-btn {
  position: relative;
  padding: 11px 15px;
  border-radius: 11px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s var(--ease), background .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease-out);
}

.sz-btn span { font-weight: 500 !important; color: var(--text3); }
.sz-btn:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }

.sz-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.sz-btn.active span { color: color-mix(in srgb, var(--accent) 75%, var(--text2)); }

/* --------------------------------------------------------------- checkboxes -- */

.toggle-grid { gap: 3px; }

.tog {
  gap: 11px;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 9px;
  font-size: 13.5px;
  transition: background .14s var(--ease), color .14s var(--ease);
}

.tog:hover { background: var(--surface2); color: var(--text); }

.tog-box {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface2);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease-out);
}

.tog-box .ic { width: 13px; height: 13px; stroke-width: 3; opacity: 0; transform: scale(.55); transition: opacity .14s var(--ease), transform .2s var(--ease-out); }

.tog input:checked ~ .tog-box {
  background: linear-gradient(160deg, var(--accent-hi), var(--accent));
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}

.tog input:checked ~ .tog-box .ic { opacity: 1; transform: scale(1); color: var(--accent-ink); }
.tog:hover .tog-box { border-color: var(--accent); }
.tog input:focus-visible ~ .tog-box { box-shadow: 0 0 0 3.5px var(--ring); }

/* ------------------------------------------------------------ preview stage -- */

/* The label sits on a recessed stage so it reads as a physical sticker. */
.preview-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 180px;
  margin: 12px 0 14px;
  padding: 16px 0;
  border-radius: var(--r);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .035), transparent 70%),
    var(--bg);
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .3);
}

.light-mode .preview-stage { box-shadow: inset 0 2px 8px rgba(16, 24, 40, .07); }

#label-preview {
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3);
  border-radius: 3px;
}

.light-mode #label-preview { box-shadow: 0 14px 30px -12px rgba(16, 24, 40, .3), 0 1px 3px rgba(16, 24, 40, .12); }

.preview-note { font-size: 11px; color: var(--text3); }

/* --------------------------------------------------------------------- table -- */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
}

table { font-size: 13.5px; }

th {
  color: var(--text3);
  background: color-mix(in srgb, var(--surface3) 60%, transparent);
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
}

td { padding: 11px 13px; border-bottom: 1px solid var(--border); }
tr:hover td { background: var(--surface2); }

.tag {
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .01em;
}

.tag-f { background: var(--accent-soft); color: var(--accent); }
.tag-s { background: rgba(59, 158, 255, .14); color: var(--blue); }
.tag-m { background: rgba(46, 204, 113, .14); color: var(--green); }

.actions { gap: 6px; }
.empty { color: var(--text3); font-size: 13px; padding: 44px 20px; }

/* ------------------------------------------------------------------ CSV drop -- */

.csv-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 34px 26px;
  background: color-mix(in srgb, var(--surface2) 45%, transparent);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease-out);
}

.csv-drop:hover,
.csv-drop.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.csv-drop .ic-xl { color: var(--accent); margin-bottom: 4px; }
.csv-drop p { font-size: 13.5px; color: var(--text2); font-weight: 540; }
.csv-drop small { color: var(--text3); font-size: 11.5px; }

.bulk-grid { gap: 11px; }

.bulk-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s var(--ease), transform .16s var(--ease-out);
}

.bulk-item:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.bulk-item strong { font-size: 13px; font-weight: 620; letter-spacing: -0.01em; }
.bulk-item span { color: var(--text3); font-size: 11px; }

/* --------------------------------------------------------------- calibration -- */

.sl-group { gap: 8px; margin-bottom: 17px; }

input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--surface3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  padding: 0;
  border: none;
}

input[type=range]:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 3.5px var(--ring); }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-hi), var(--accent));
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-accent);
  cursor: grab;
  transition: transform .14s var(--ease-out);
}

input[type=range]::-webkit-slider-thumb:active { transform: scale(1.14); cursor: grabbing; }

.sl-val {
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 680;
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 6px;
  min-width: 42px;
  text-align: center;
  display: inline-block;
}

.divider { background: var(--border); margin: 18px 0; }

/* -------------------------------------------------------------------- toast -- */

#toast {
  bottom: 22px;
  right: 22px;
  gap: 11px;
  padding: 13px 17px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 540;
  background: color-mix(in srgb, var(--surface3) 88%, transparent);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(.97);
  transition: transform .34s var(--ease-out), opacity .24s var(--ease);
}

#toast.show { transform: translateY(0) scale(1); }
#t-icon { font-size: 15px; line-height: 1; }

/* -------------------------------------------------------------------- modal -- */

.modal-bg {
  background: rgba(5, 7, 11, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 88%, var(--bg)) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--edge);
  padding: 26px 28px;
  animation: modal-in .26s var(--ease-out);
}

.modal h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 18px; }
.modal-foot { gap: 10px; margin-top: 22px; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- focus + misc -- */

/* Keyboard users get a visible ring; mouse users do not get a stray outline. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible { outline: none; }

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text3); background-clip: content-box; }

/* Anyone who asks for less motion gets none of the movement, only the colour. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .stat-card:hover,
  .sz-btn:hover,
  .bulk-item:hover,
  .csv-drop:hover,
  .btn:active { transform: none !important; }
}

/* Printing is handled by a separate generated document, so the chrome should
   never contribute anything to a print job. */
@media print {
  body { background: #fff !important; }
}

/* ------------------------------------------------- icon-only table actions -- */

/* These sit five-to-a-row in the library, so they carry no label and need to be
   readable at a glance and obviously interactive on hover. */
.btn-secondary.btn-icon { color: var(--text2); }

.btn-secondary.btn-icon:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-soft);
}

.btn-danger.btn-icon .ic { stroke-width: 1.9; }

/* ------------------------------------------------------- parsed bulk cards -- */

.bulk-item { gap: 4px; }

.bulk-item strong {
  display: block;
  margin-bottom: 3px;
  line-height: 1.3;
}

/* The meta lines were near-invisible dim monospace. Keep the mono for the codes,
   raise the contrast enough to actually read them. */
.bulk-item span {
  color: var(--text2);
  font-size: 11.5px;
  letter-spacing: -0.005em;
}