/* ============================================================
   Crafted by Design — Business Suite v5
   styles.css
   ============================================================ */

/* ── RESET & ROOT ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #ffffff;
  --bg2:         #f5f4f0;
  --bg3:         #ebebeb;
  --text:        #1a1a18;
  --text2:       #5f5e5a;
  --text3:       #888780;
  --border:      rgba(0,0,0,0.12);
  --border2:     rgba(0,0,0,0.22);
  --accent:      #1a1a18;
  --accent-fg:   #d3d1c7;
  --green:       #3B6D11;
  --green-bg:    #EAF3DE;
  --amber:       #854F0B;
  --amber-bg:    #FAEEDA;
  --red:         #A32D2D;
  --red-bg:      #FCEBEB;
  --blue:        #185FA5;
  --blue-bg:     #E6F1FB;
  --info:        #185FA5;
  --info-bg:     #E6F1FB;
  --warn:        #854F0B;
  --warn-bg:     #FAEEDA;
  --success:     #3B6D11;
  --success-bg:  #EAF3DE;
  --danger:      #A32D2D;
  --danger-bg:   #FCEBEB;
  --radius:      8px;
  --radius-lg:   12px;
  --font:        system-ui, -apple-system, sans-serif;
  --mono:        ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #1c1c1a;
    --bg2:        #242422;
    --bg3:        #2e2e2c;
    --text:       #e8e6e0;
    --text2:      #a8a6a0;
    --text3:      #6e6c68;
    --border:     rgba(255,255,255,0.10);
    --border2:    rgba(255,255,255,0.20);
    --accent:     #d3d1c7;
    --accent-fg:  #1a1a18;
    --green:      #97C459;
    --green-bg:   #17340a;
    --amber:      #EF9F27;
    --amber-bg:   #412402;
    --red:        #F09595;
    --red-bg:     #501313;
    --blue:       #85B7EB;
    --blue-bg:    #042C53;
    --info:       #85B7EB;
    --info-bg:    #042C53;
    --warn:       #EF9F27;
    --warn-bg:    #412402;
    --success:    #97C459;
    --success-bg: #17340a;
    --danger:     #F09595;
    --danger-bg:  #501313;
  }
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  font-size:   13px;
  line-height: 1.5;
}

a { color: inherit; }

/* ── LAYOUT ───────────────────────────────────────────────── */
#wrap {
  max-width: 780px;
  margin:    0 auto;
  padding:   1rem;
}

/* ── HEADER ───────────────────────────────────────────────── */
#hdr {
  display:        flex;
  align-items:    center;
  gap:            10px;
  margin-bottom:  .75rem;
  padding-bottom: .75rem;
  border-bottom:  .5px solid var(--border);
}

#logo {
  width:           34px;
  height:          34px;
  border-radius:   var(--radius);
  background:      var(--accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

#hdr h1 { font-size: 14px; font-weight: 600; }
#hdr p  { font-size: 10px; color: var(--text2); margin-top: 1px; }

#hdr-right {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-left: auto;
}

/* ── SYNC PILL ─────────────────────────────────────────────── */
#sync-pill {
  background:    var(--bg2);
  border:        .5px solid var(--border);
  border-radius: 20px;
  padding:       3px 9px;
  cursor:        pointer;
  font-family:   var(--font);
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     10px;
  color:         var(--text2);
}

.sdot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--text3);
  flex-shrink:   0;
}

#sync-pill.syncing .sdot { background: var(--amber); animation: pulse 1s infinite; }
#sync-pill.synced  .sdot { background: var(--green); }
#sync-pill.error   .sdot { background: var(--red); }
#sync-pill.offline .sdot { background: var(--text3); }

@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ── MACHINE PILLS ────────────────────────────────────────── */
#mrow {
  display:       flex;
  gap:           5px;
  margin-bottom: .75rem;
  flex-wrap:     wrap;
}

.mpill {
  font-size:     10px;
  padding:       3px 9px;
  border-radius: 20px;
  border:        .5px solid var(--border);
  background:    var(--bg2);
  color:         var(--text2);
  cursor:        pointer;
  transition:    all .15s;
}

.mpill.on {
  background:   var(--accent);
  color:        var(--accent-fg);
  border-color: var(--accent);
}

/* ── NAV ──────────────────────────────────────────────────── */
#nav {
  display:        flex;
  gap:            2px;
  margin-bottom:  .75rem;
  background:     var(--bg2);
  border-radius:  var(--radius);
  padding:        3px;
  overflow-x:     auto;
  scrollbar-width: none;
}
#nav::-webkit-scrollbar { display: none; }

.ntab {
  flex-shrink:   0;
  padding:       4px 8px;
  border:        none;
  border-radius: 6px;
  cursor:        pointer;
  font-size:     10px;
  font-weight:   500;
  background:    transparent;
  color:         var(--text2);
  font-family:   var(--font);
  white-space:   nowrap;
  transition:    all .15s;
}

.ntab.on {
  background: var(--bg);
  color:      var(--text);
  border:     .5px solid var(--border);
}

/* ── PANELS ───────────────────────────────────────────────── */
.panel    { display: none; }
.panel.on { display: block; }

/* ── SECTION CARD ─────────────────────────────────────────── */
.sc {
  background:     var(--bg2);
  border:         .5px solid var(--border);
  border-radius:  var(--radius-lg);
  padding:        .875rem;
  margin-bottom:  .75rem;
}

.sl {
  font-size:       10px;
  font-weight:     600;
  color:           var(--text2);
  text-transform:  uppercase;
  letter-spacing:  .05em;
  margin-bottom:   .5rem;
}

/* ── METRICS ──────────────────────────────────────────────── */
.metrics {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap:                   6px;
  margin-bottom:         .75rem;
}

.mc {
  background:    var(--bg2);
  border-radius: var(--radius);
  padding:       .5rem .625rem;
  border:        .5px solid var(--border);
}

.mc-l { font-size: 9px;  color: var(--text2);  margin-bottom: 2px; font-weight: 500; }
.mc-v { font-size: 18px; font-weight: 600; }
.mc-s { font-size: 9px;  color: var(--text3);  margin-top: 1px; }

.mc.good { border-color: var(--green);  background: var(--success-bg); }
.mc.warn { border-color: var(--warn);   background: var(--warn-bg); }
.mc.bad  { border-color: var(--danger); background: var(--danger-bg); }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  padding:        5px 11px;
  border-radius:  var(--radius);
  font-size:      11px;
  font-weight:    500;
  cursor:         pointer;
  border:         .5px solid var(--border);
  background:     var(--bg);
  color:          var(--text);
  font-family:    var(--font);
  transition:     all .15s;
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
}

.btn:hover    { background: var(--bg2); }
.btn:disabled { opacity: .5; cursor: default; }

.btn.pri              { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.pri:hover        { opacity: .85; }
.btn.green            { background: var(--green);  color: var(--green-bg); border-color: var(--green); }
.btn.green:hover      { opacity: .85; }
.btn.blue             { background: var(--blue);   color: #fff; border-color: var(--blue); }
.btn.blue:hover       { opacity: .85; }
.btn.sm               { padding: 3px 8px; font-size: 10px; }
.btn.xs               { padding: 2px 6px; font-size: 9px; }
.btn.danger           { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover     { background: var(--danger-bg); }

.btn-row {
  display:    flex;
  gap:        5px;
  flex-wrap:  wrap;
  margin-top: .5rem;
}

/* ── FORMS ────────────────────────────────────────────────── */
.fg { margin-bottom: .5rem; }

.fg label {
  font-size:     10px;
  color:         var(--text2);
  display:       block;
  margin-bottom: 2px;
  font-weight:   500;
}

.fg input,
.fg select,
.fg textarea {
  width:       100%;
  border:      .5px solid var(--border);
  border-radius: var(--radius);
  padding:     5px 8px;
  font-size:   12px;
  font-family: var(--font);
  background:  var(--bg2);
  color:       var(--text);
  outline:     none;
  transition:  border-color .15s;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus { border-color: var(--border2); }

.g2 { display: grid; grid-template-columns: 1fr 1fr;       gap: 6px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: 6px; }

/* Standalone inputs not inside .fg */
.bare-input {
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       5px 8px;
  font-size:     12px;
  font-family:   var(--font);
  background:    var(--bg2);
  color:         var(--text);
  outline:       none;
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       7px 10px;
  border-radius: var(--radius);
  margin-bottom: 5px;
  font-size:     11px;
}

.alert.warn    { background: var(--warn-bg);    color: var(--warn);    border: .5px solid var(--warn); }
.alert.info    { background: var(--info-bg);    color: var(--info);    border: .5px solid var(--info); }
.alert.success { background: var(--success-bg); color: var(--success); border: .5px solid var(--success); }
.alert.danger  { background: var(--danger-bg);  color: var(--danger);  border: .5px solid var(--danger); }

/* ── BADGES ───────────────────────────────────────────────── */
.badge {
  font-size:     9px;
  padding:       2px 6px;
  border-radius: 20px;
  font-weight:   500;
}

.badge.quote  { background: var(--warn-bg);    color: var(--warn); }
.badge.active { background: var(--info-bg);    color: var(--info); }
.badge.done   { background: var(--success-bg); color: var(--success); }
.badge.crit   { background: var(--danger-bg);  color: var(--danger); }

/* ── CARD ROW ─────────────────────────────────────────────── */
.card {
  background:    var(--bg);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       9px 11px;
  margin-bottom: 6px;
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
}

/* ── TABLE ────────────────────────────────────────────────── */
.mt { width: 100%; border-collapse: collapse; font-size: 10.5px; }

.mt th {
  text-align:     left;
  padding:        5px 6px;
  font-size:      9px;
  font-weight:    600;
  color:          var(--text2);
  border-bottom:  .5px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mt td {
  padding:       5px 6px;
  border-bottom: .5px solid var(--border);
  vertical-align: top;
  line-height:   1.4;
}

.mt tr:last-child td { border-bottom: none; }
.mt tr:hover td      { background: var(--bg2); }

/* ── MATERIAL FILTERS ─────────────────────────────────────── */
.mf { display: flex; gap: 5px; margin-bottom: .625rem; flex-wrap: wrap; }

.mft {
  font-size:     10px;
  padding:       3px 8px;
  border-radius: 20px;
  border:        .5px solid var(--border);
  background:    var(--bg2);
  color:         var(--text2);
  cursor:        pointer;
  transition:    all .15s;
}

.mft.on {
  background:   var(--accent);
  color:        var(--accent-fg);
  border-color: var(--accent);
}

/* ── STAG (tag chip) ──────────────────────────────────────── */
.stag {
  font-size:     9px;
  padding:       2px 6px;
  border-radius: 20px;
  background:    var(--bg2);
  border:        .5px solid var(--border);
  color:         var(--text2);
}

/* ── RESULT CARD (Quote) ──────────────────────────────────── */
.rcard {
  background:    var(--bg);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       .75rem;
  margin-top:    .5rem;
}

.rrow {
  display:         flex;
  justify-content: space-between;
  padding:         3px 0;
  font-size:       11px;
  border-bottom:   .5px solid var(--border);
}

.rrow:last-child {
  border-bottom: none;
  font-weight:   600;
  font-size:     12px;
  margin-top:    3px;
}

.rl { color: var(--text2); }

/* ── JOB KANBAN ───────────────────────────────────────────── */
.jcols {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   6px;
}

.jcol {
  background:    var(--bg2);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       7px;
  min-height:    60px;
}

.jch {
  font-size:       10px;
  font-weight:     600;
  color:           var(--text2);
  margin-bottom:   6px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.jcard {
  background:    var(--bg);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       7px;
  margin-bottom: 5px;
}

.jcn { font-size: 11px; font-weight: 500; margin-bottom: 1px; }
.jcd { font-size: 9px;  color: var(--text2); margin-bottom: 4px; }

/* ── CHAT ─────────────────────────────────────────────────── */
#msgs {
  min-height:     180px;
  max-height:     300px;
  overflow-y:     auto;
  padding:        .75rem;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  background:     var(--bg2);
  border:         .5px solid var(--border);
  border-radius:  var(--radius-lg) var(--radius-lg) 0 0;
}

.msg { display: flex; gap: 7px; align-items: flex-start; }

.mav {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       9px;
  font-weight:     600;
}

.msg.ag .mav { background: var(--accent);  color: var(--accent-fg); }
.msg.us .mav { background: var(--info-bg); color: var(--info); }

.mbody {
  font-size:  12px;
  line-height: 1.6;
  padding:    6px 10px;
  border-radius: var(--radius);
  max-width:  92%;
}

.msg.ag .mbody { background: var(--bg); border: .5px solid var(--border); }
.msg.us .mbody { background: var(--info-bg); color: var(--info); margin-left: auto; }
.msg.us        { flex-direction: row-reverse; }

.mbody pre {
  font-family:   var(--mono);
  font-size:     10px;
  background:    var(--bg2);
  padding:       6px;
  border-radius: 5px;
  margin-top:    5px;
  overflow-x:    auto;
  white-space:   pre-wrap;
  border:        .5px solid var(--border);
}

#ld   { display: none; padding: 6px .75rem; gap: 5px; align-items: center; }
#ld.v { display: flex; }

.d {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--text2);
  animation:     pp 1.2s infinite;
}
.d:nth-child(2) { animation-delay: .2s; }
.d:nth-child(3) { animation-delay: .4s; }
@keyframes pp { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

#ir {
  display:       flex;
  gap:           5px;
  padding:       6px;
  border:        .5px solid var(--border);
  border-top:    none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:    var(--bg);
}

#ui {
  flex:          1;
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       5px 8px;
  font-size:     12px;
  font-family:   var(--font);
  resize:        none;
  background:    var(--bg2);
  color:         var(--text);
  min-height:    32px;
  max-height:    80px;
  outline:       none;
}

#sb {
  background:      var(--accent);
  border:          none;
  border-radius:   var(--radius);
  padding:         0 10px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
}
#sb svg { width: 13px; height: 13px; fill: var(--accent-fg); }

.qg {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   5px;
  margin-bottom:         .75rem;
}

.qc {
  background:     var(--bg2);
  border:         .5px solid var(--border);
  border-radius:  var(--radius);
  padding:        7px 9px;
  cursor:         pointer;
  text-align:     left;
  transition:     background .15s;
}
.qc:hover  { background: var(--bg); border-color: var(--border2); }
.qc .ql    { font-size: 9px;  color: var(--text2); margin-bottom: 2px; }
.qc .qt    { font-size: 11px; font-weight: 500; }

/* ── DROP ZONE ────────────────────────────────────────────── */
#dz {
  border:        1.5px dashed var(--border2);
  border-radius: var(--radius);
  padding:       1rem;
  text-align:    center;
  cursor:        pointer;
  transition:    all .15s;
  position:      relative;
  margin-bottom: .5rem;
}
#dz:hover, #dz.drag { border-color: var(--green); background: var(--bg); }
#dz input {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}
#dz p { font-size: 11px; color: var(--text2); }

/* ── SVG STUDIO ───────────────────────────────────────────── */
#svgws {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   7px;
  margin-bottom:         .5rem;
}

#scb {
  background:    var(--bg2);
  border:        .5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

#stb {
  display:       flex;
  gap:           3px;
  padding:       5px;
  border-bottom: .5px solid var(--border);
  flex-wrap:     wrap;
}

.st2 {
  padding:       3px 7px;
  border-radius: 5px;
  font-size:     10px;
  border:        .5px solid var(--border);
  background:    var(--bg);
  cursor:        pointer;
  color:         var(--text);
  font-family:   var(--font);
}

#sc {
  width:       100%;
  min-height:  180px;
  border:      none;
  padding:     8px;
  font-family: var(--mono);
  font-size:   10px;
  resize:      vertical;
  background:  transparent;
  color:       var(--text);
  outline:     none;
  line-height: 1.5;
}

#sp2 {
  background:     #fff;
  border:         .5px solid var(--border);
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}
#sp2 p {
  font-size:     9px;
  color:         #444;
  padding:       4px 8px;
  border-bottom: .5px solid #e5e5e5;
}
#sr {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8px;
  min-height:      180px;
}

/* ── INVENTORY BARS ───────────────────────────────────────── */
.inv-bar-wrap {
  flex:          1;
  background:    var(--bg2);
  border-radius: 20px;
  height:        5px;
  overflow:      hidden;
  margin-top:    4px;
}

.inv-bar {
  height:        5px;
  border-radius: 20px;
  background:    var(--green);
  transition:    width .3s;
}
.inv-bar.low  { background: var(--warn); }
.inv-bar.crit { background: var(--danger); }

/* ── TIMER ────────────────────────────────────────────────── */
#timer-display {
  font-size:      44px;
  font-weight:    300;
  font-family:    var(--mono);
  text-align:     center;
  letter-spacing: 2px;
  padding:        .875rem 0;
  color:          var(--text);
}

.timer-controls {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-bottom:   .75rem;
}

/* ── EXPORT GRID ──────────────────────────────────────────── */
.export-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   7px;
  margin-bottom:         .75rem;
}

.exp-c {
  background:    var(--bg2);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       .75rem;
}

.exp-t { font-size: 12px; font-weight: 500; margin-bottom: 3px; }
.exp-d { font-size: 10px; color: var(--text2); margin-bottom: 7px; line-height: 1.5; }

/* ── ATOMM LINKS ──────────────────────────────────────────── */
.atomm-link {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        7px 9px;
  background:     var(--bg);
  border:         .5px solid var(--border);
  border-radius:  var(--radius);
  margin-bottom:  5px;
  cursor:         pointer;
  text-decoration: none;
  color:          inherit;
  transition:     background .15s;
}
.atomm-link:hover { background: var(--bg2); }

.al-icon {
  width:           26px;
  height:          26px;
  border-radius:   var(--radius);
  background:      var(--accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.al-title { font-size: 12px; font-weight: 500; }
.al-sub   { font-size: 10px; color: var(--text2); }

/* ── GRANT CARDS ──────────────────────────────────────────── */
.grant-card {
  background:    var(--bg);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 12px;
  margin-bottom: 7px;
}

/* ── HERO BANNER ──────────────────────────────────────────── */
.hero-banner {
  border-radius:  var(--radius-lg);
  padding:        1rem 1.25rem;
  margin-bottom:  .75rem;
  display:        flex;
  align-items:    center;
  gap:            12px;
}

.hero-banner.dark  { background: linear-gradient(135deg, #1a1a18 0%, #3a3830 100%); color: #d3d1c7; }
.hero-banner.green { background: linear-gradient(135deg, #3B6D11 0%, #27500A 100%); color: #EAF3DE; }

.hero-banner .hb-icon  { font-size: 26px; }
.hero-banner .hb-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.hero-banner .hb-sub   { font-size: 10px; opacity: .8;  line-height: 1.6; }

/* ── SETTINGS LOG ENTRY ───────────────────────────────────── */
.sle {
  background:    var(--bg);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       8px 10px;
  margin-bottom: 6px;
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
}

/* ── MODAL ────────────────────────────────────────────────── */
.modal-overlay {
  display:         none;
  position:        fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:      rgba(0, 0, 0, 0.6);
  z-index:         9999;
  align-items:     center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background:    var(--bg);
  border-radius: var(--radius-lg);
  padding:       1.5rem;
  max-width:     440px;
  width:         90%;
  box-shadow:    0 8px 40px rgba(0, 0, 0, .3);
  border:        .5px solid var(--border2);
}

.modal-box h2 { font-size: 15px; font-weight: 600; margin-bottom: .5rem; }
.modal-box p  { font-size: 11px; color: var(--text2); margin-bottom: 1rem; line-height: 1.6; }

/* ── AI RESULT AREA ───────────────────────────────────────── */
.ai-result {
  font-size:   12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ── INVOICE LINE ─────────────────────────────────────────── */
.inv-line {
  display:               grid;
  grid-template-columns: 1fr 55px 75px auto;
  gap:                   5px;
  margin-bottom:         5px;
  align-items:           center;
}

.inv-line input {
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       4px 7px;
  font-size:     12px;
  font-family:   var(--font);
  background:    var(--bg2);
  color:         var(--text);
  outline:       none;
  width:         100%;
}

/* ── GRANT INNER NAV ──────────────────────────────────────── */
.gtab-nav {
  display:        flex;
  gap:            2px;
  background:     var(--bg2);
  border-radius:  var(--radius);
  padding:        3px;
  margin-bottom:  .75rem;
}

/* ── LOG ITEM (generic list row) ──────────────────────────── */
.log-item {
  background:    var(--bg);
  border:        .5px solid var(--border);
  border-radius: var(--radius);
  padding:       8px 10px;
  margin-bottom: 5px;
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
}

.log-item-info { flex: 1; }
.log-item-name { font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.log-item-sub  { font-size: 10px; color: var(--text2); line-height: 1.5; }

/* ── UTILITY CLASSES ──────────────────────────────────────── */
.text-muted   { color: var(--text2); }
.text-small   { font-size: 10px; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warn    { color: var(--warn); }
.text-info    { color: var(--info); }
.fw-500       { font-weight: 500; }
.fw-600       { font-weight: 600; }
.mt-half      { margin-top: .5rem; }
.mt-1         { margin-top: 1rem; }
.mb-half      { margin-bottom: .5rem; }
.gap-sm       { gap: 5px; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 500px) {
  .g2, .g3     { grid-template-columns: 1fr; }
  .jcols       { grid-template-columns: 1fr; }
  #svgws       { grid-template-columns: 1fr; }
  .export-grid { grid-template-columns: 1fr; }
  .metrics     { grid-template-columns: 1fr 1fr; }
  .inv-line    { grid-template-columns: 1fr auto auto auto; }
  #hdr h1      { font-size: 12px; }
  #hdr p       { display: none; }
}

/* ── V6: user-friendly grouped navigation ───────────────────── */
#nav.nav-groups {
  display: flex;
  gap: 7px;
  align-items: stretch;
  background: transparent;
  padding: 0;
  overflow-x: auto;
  margin-bottom: .9rem;
}
.nav-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg2);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  flex-shrink: 0;
}
.nav-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 5px 0 3px;
  border-right: .5px solid var(--border);
  margin-right: 2px;
}
.candidate-box { margin-top: 8px; display: grid; gap: 6px; }
.candidate-card {
  background: var(--bg);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.card { background: var(--bg); border: .5px solid var(--border); border-radius: var(--radius); padding: 9px 11px; margin-bottom: 6px; display:flex; gap:10px; align-items:flex-start; }