:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1d2330;
  --muted: #6b7280;
  --line: #e6e8ec;
  --accent: #3b5bdb;
  --accent-soft: #eef1fd;
  --ok: #18794e;
  --ok-soft: #e7f5ee;
  --warn: #9a6700;
  --warn-soft: #fff4d6;
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
}

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

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 18px; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.stats b { color: var(--ink); }

.controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px;
}
.search {
  flex: 1 1 240px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; background: var(--card);
}
.search:focus, .select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; background: var(--card); color: var(--ink);
}
.toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.expgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; }

.resultline { padding: 0 16px 10px; font-size: 13px; color: var(--muted); }

.grid {
  display: grid; gap: 12px; padding: 0 16px 24px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .08s ease, box-shadow .08s ease;
}
.cardsel { position: absolute; top: 8px; left: 8px; z-index: 2; width: 18px; height: 18px; cursor: pointer; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.10); }
.thumb {
  aspect-ratio: 1 / 1; background: #f0f1f4; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .noimg { color: #aab; font-size: 12px; text-align: center; padding: 8px; }
.card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.card-brand { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.card-title { font-size: 13px; line-height: 1.3; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.price { font-weight: 700; font-size: 14px; }
.badges { display: flex; gap: 5px; flex-wrap: wrap; }
.badge { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.badge.cat { background: var(--accent-soft); color: var(--accent); }
.badge.review { background: var(--warn-soft); color: var(--warn); }
.badge.missing { background: #fdecec; color: #b42318; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px 40px; }
.pager button {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 14px; cursor: pointer;
}
.pager button:disabled { opacity: .45; cursor: default; }
.pager .pageinfo { font-size: 13px; color: var(--muted); }
.pager .pagejump { width: 56px; padding: 4px 6px; font-size: 13px; text-align: center; border: 1px solid var(--border, #ddd); border-radius: 6px; margin: 0 2px; }

.modal { position: fixed; inset: 0; background: rgba(16,24,40,.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; z-index: 20; overflow: auto; }
.modal.hidden { display: none; }
.modal-card { background: var(--card); border-radius: 16px; max-width: 720px; width: 100%;
  padding: 20px; position: relative; box-shadow: 0 20px 50px rgba(16,24,40,.30); }
.close { position: absolute; top: 10px; right: 12px; border: none; background: transparent;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.detail-head { display: flex; gap: 16px; flex-wrap: wrap; }
.detail-img { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; background: #f0f1f4; }
.detail-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.detail-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; font-size: 14.5px; margin-top: 10px; }
.kv .k { color: var(--muted); }
.section-h { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
table.mini { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.mini th, table.mini td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.mini th { color: var(--muted); font-weight: 600; }
.gallery { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #f0f1f4; }
.empty { text-align: center; color: var(--muted); padding: 60px 16px; }
.desc { font-size: 14.5px; line-height: 1.5; color: #344054; }

.btn, .btn-primary { padding: 8px 14px; border-radius: 9px; font-size: 14px; cursor: pointer; border: 1px solid var(--line); background: var(--card); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.editform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.editform label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.editform label.wide { grid-column: 1 / -1; }
.editform input, .editform select, .editform textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); background: #fff;
}
.editform textarea { min-height: 60px; resize: vertical; }
.editbtns { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.savemsg { font-size: 13px; color: var(--ok); }
@media (max-width: 520px) { .editform { grid-template-columns: 1fr; } }

.bulkbar {
  position: sticky; top: 57px; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 16px 10px; padding: 10px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; font-size: 14px;
}
.bulkbar.hidden { display: none; }
.bulkbar select, .bulkbar input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.bulkbar input { flex: 1 1 180px; }

.detail-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; background: #fff; padding: 6px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); z-index: 6; }
.detail-nav .primary { margin-left: auto; }
.imgmgr { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.imgcell { position: relative; width: 92px; }
.imgcell img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; background: #f0f1f4; border: 2px solid transparent; }
.imgcell.primary img { border-color: var(--accent); }
/* wrap the controls inside the cell so they never spill onto the next photo (the delete
   button was landing on the neighbour's hide button and became unclickable) */
.imgactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; width: 92px; }
.imgactions button { font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.imgactions .pri { font-size: 10.5px; color: var(--accent); font-weight: 700; }
.imgcell.rejected img { opacity: .35; filter: grayscale(1); border-color: #b42318; }
.rejbadge { position: absolute; top: 4px; left: 4px; background: #b42318; color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
.imgactions .imgok { color: #15803d; border-color: #15803d; font-weight: 700; }
.imgactions .imgno { color: #b42318; }
.scentrev-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; margin-top: 6px; }
.scentrev-item { padding: 5px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
.scentspec { display: inline-block; margin: 2px 8px 2px 0; }
.scentspec button { font-size: 10px; padding: 1px 5px; margin-left: 2px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.rdlist { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.rdrow { padding: 3px 0; font-size: 12.5px; }
.rdok { color: #15803d; font-weight: 700; }
.rdno { color: #b42318; font-weight: 700; }
.rdmiss { display: inline-block; background: #fdecec; color: #b42318; border-radius: 5px; padding: 1px 6px; margin: 1px 2px; font-size: 11px; }
.mfinput { flex: 1; min-width: 90px; margin: 0 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.imgadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.imgadd input[type=url] { flex: 1 1 200px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.uploadbtn { padding: 8px 14px; border: 1px solid var(--accent); color: var(--accent); border-radius: 9px; cursor: pointer; font-size: 14px; }
.uploadbtn input { display: none; }
.rectbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rectbl th, .rectbl td { border-bottom: 1px solid var(--border, #eee); padding: 5px 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.rectbl th { position: sticky; top: 0; background: var(--card, #fafafa); font-weight: 600; }
.gl-uploads { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border, #eee); }
.gl-up-lbl { font-size: 12px; color: var(--muted, #888); margin-right: 2px; }
.uploadbtn.sm, .btn.sm { padding: 4px 9px; font-size: 12px; }
.gl-refresh { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ask-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 130px); }
.ask-title { margin: 4px 0; }
.ask-note { font-size: 13px; color: var(--muted, #777); background: var(--card, #f6f6f8); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.ask-log { flex: 1; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 10px; }
.ask-msg { display: flex; }
.ask-user { justify-content: flex-end; }
.ask-bubble { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: normal; }
.ask-user .ask-bubble { background: var(--accent, #2563eb); color: #fff; border-bottom-right-radius: 4px; }
.ask-assistant .ask-bubble { background: var(--card, #f1f1f4); color: var(--text, #111); border-bottom-left-radius: 4px; }
.ask-input { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border, #eee); }
.ask-input textarea { flex: 1; resize: none; padding: 9px 11px; border: 1px solid var(--border, #ccc); border-radius: 10px; font: inherit; font-size: 14px; }
.tabstrip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 3px; align-items: stretch; padding: 0 10px; overflow-x: auto; background: var(--card,#f3f3f5); border-top: 2px solid var(--accent, #2563eb); min-height: 44px; box-shadow: 0 -3px 12px rgba(0,0,0,0.07); }
.tabstrip::-webkit-scrollbar { height: 5px; }
.tabstrip:empty { display: none; }
.tabstrip-tab { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; height: 44px; min-width: 150px; max-width: 240px; font-size: 13.5px; white-space: nowrap; cursor: pointer; border: 1px solid transparent; border-top: none; border-radius: 0 0 10px 10px; color: var(--muted, #6b7280); transition: background .12s; }
.tabstrip-tab:hover { background: rgba(0,0,0,0.05); color: var(--text,#111); }
.tabstrip-tab.active { background: var(--bg, #fff); color: var(--text, #111); border-color: var(--border, #e3e3e8); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
.tabstrip-tab.active::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--bg,#fff); }
.tabstrip-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tabstrip-ic { opacity: .7; font-size: 13px; flex-shrink: 0; }
.tabstrip-x { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; color: var(--muted, #9ca3af); font-size: 15px; line-height: 1; flex-shrink: 0; }
.tabstrip-x:hover { background: rgba(0,0,0,0.14); color: #c0392b; }
body.has-tabs { padding-bottom: 48px; }

/* Help & Guide tab: guide on the left, chat on the right */
.guide-wrap { display: flex; gap: 18px; height: calc(100vh - 150px); }
.guide-col { flex: 1.1; overflow-y: auto; min-width: 0; }
.ask-col { flex: 1; display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border,#eee); padding-left: 18px; }
.guide-stores { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.gstore { padding: 7px 14px; border: 1px solid var(--border,#ddd); border-radius: 999px; background: var(--bg,#fff); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted,#555); }
.gstore.active { background: var(--accent,#2563eb); color: #fff; border-color: var(--accent,#2563eb); }
.guide-body { font-size: 14px; }
.guide-steps { margin: 0; padding-left: 22px; line-height: 1.7; }
.guide-steps li { margin-bottom: 9px; }
@media (max-width: 820px) { .guide-wrap { flex-direction: column; height: auto; } .ask-col { border-left: none; padding-left: 0; border-top: 1px solid var(--border,#eee); padding-top: 12px; } }

.hint { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.tagrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.tagrow .t-label { flex: 1 1 160px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.tagrow select, .tagrow input[type=date] { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.tplrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tplrow span { flex: 0 0 110px; font-size: 12px; color: var(--muted); }
.tplrow .tpl { flex: 1; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: ui-monospace, monospace; }

.aprow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.apval { flex: 1 1 200px; font-size: 15px; }
.apval em { color: var(--muted); font-style: normal; font-size: 13px; }
.aprow .ap-map { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; width: 140px; }

.colsbar { padding: 6px 16px 0; }
.colspanel { position: fixed; right: 20px; top: 70px; z-index: 50; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px; max-height: 70vh; overflow: auto; width: 280px; }
.colspanel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.colspanel-head button { border: none; background: none; cursor: pointer; font-size: 16px; }
.colsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.colopt { font-size: 13px; display: flex; align-items: center; gap: 5px; }

.listwrap { padding: 0 16px 24px; overflow-x: auto; }
.listtable { width: 100%; }
.listtable th, .listtable td { font-size: 13px; }
.listrow { cursor: pointer; }
.listrow:hover { background: var(--accent-soft); }
tr.cheapest td { background: var(--ok-soft); font-weight: 600; }
tr.invtotal td { border-top: 2px solid var(--line); }

.dashrow { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.dashcard { flex: 1 1 120px; background: var(--accent-soft); border-radius: 12px; padding: 14px; text-align: center; }
.dashcard.ok { background: var(--ok-soft); }
.dashcard.warn { background: var(--warn-soft); }
.dashnum { font-size: 26px; font-weight: 700; }
.dashlbl { font-size: 12px; color: var(--muted); }

.aplist { display: flex; flex-direction: column; gap: 4px; }
.aprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.apval { font-size: 15px; }
.btn-sm { font-size: 13px; padding: 2px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.btn-sm.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-sm.okbtn { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-soft); }
.badge.appr { background: var(--ok-soft); color: var(--ok); }
.badge.giftset { background: #f3e8ff; color: #7c3aed; }
.badge.tester { background: #fff4c2; color: #8a6400; }
.badge.bundle { background: #e0f2fe; color: #0369a1; }
.badge.warehouse { background: #dcfce7; color: #15803d; font-weight: 600; }

.pricecard { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 6px 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }

.imgcell img { cursor: zoom-in; }
.imgcell img.broken { opacity: .25; outline: 2px dashed var(--warn); }
.imgdel { color: #b91c1c; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 88vh; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.lightbox .lbclose { position: fixed; top: 16px; right: 22px; color: #fff; font-size: 16px; }

.logitem { font-size: 14px; line-height: 1.5; margin: 4px 0; }
.logsub { font-size: 13px; color: var(--muted); margin: 1px 0 1px 22px; }

.homedash { padding: 4px 16px 0; }
.homedash.hidden { display: none; }
.homedash .dashrow { margin: 8px 0; }
.mpstrip, .catstrip { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mpchip { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 12px; font-size: 13px; }
.catchip { background: var(--accent-soft); border-radius: 14px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.catchip:hover { background: var(--accent); color: #fff; }

.activefilters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; margin: 6px 0; }
.filterchip { background: var(--accent-soft); border-radius: 14px; padding: 3px 10px; font-size: 13px; }
.chipx { cursor: pointer; color: var(--muted); font-weight: 700; margin-left: 4px; }
.chipx:hover { color: var(--ink); }

@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .stats { display: none; }
}

/* ============ Tabbed layout: left sidebar ============ */
:root { --sidebar: 214px; }
.tabbar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar); z-index: 20;
  background: #fbfbfd; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
}
.side-brand { font-weight: 600; font-size: 19px; letter-spacing: -.01em; padding: 6px 12px 18px; color: var(--ink); }
.tab {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 13px; border: none; background: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tab:hover { background: #f0f1f5; color: var(--ink); }
.tab.active { background: var(--accent-soft); color: var(--accent); }
.tab-ic { font-size: 15px; width: 18px; text-align: center; opacity: .85; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-foot .btn { text-align: left; }

/* The top bar is sticky, so it MUST be opaque: with a transparent background the product/ready
   counts scrolled over the store cards and read as if printed on top of them. */
.topbar { margin-left: var(--sidebar); background: var(--bg, #fff); border-bottom: 1px solid var(--line, #e5e7eb);
          box-shadow: 0 2px 10px rgba(16,24,40,.05); padding: 8px 28px 6px; }
.tabpage { display: none; margin-left: var(--sidebar); }
.tabpage.active { display: block; }
.controls, .resultline, .grid, .pager, .activefilters, .homedash { padding-left: 28px; padding-right: 28px; }

/* Tablets and phones: the sidebar becomes a drawer (☰ Menu in the top bar) so the page gets the whole
   width; every table scrolls inside its own box (.tscroll, added by app.js) so the page never scrolls sideways. */
.menu-btn { display: none; }
.nav-scrim { display: none; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 1024px) {
  :root { --sidebar: 0px; }
  .tabbar { width: 240px; transform: translateX(-100%); transition: transform .18s ease; z-index: 40; }
  body.nav-open .tabbar { transform: none; box-shadow: 0 0 40px rgba(16,24,40,.25); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 39; }
  .menu-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border: 1px solid var(--line);
              border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
  .topbar { padding: 8px 14px 6px; justify-content: flex-start; }
  .stats { font-size: 12.5px; gap: 8px 12px; }
  .controls, .resultline, .grid, .pager, .activefilters, .homedash, .gl-wrap { padding-left: 14px; padding-right: 14px; }
}

/* ============ Go Live command center ============ */
.gl-wrap { padding: 2px 28px 8px; max-width: none; }
.gl-title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 2px 0; }
.gl-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.gl-sort { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.gl-sort select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; }
.gl-alert {
  background: #fff8ec; border: 1px solid #f2dfb0; color: #8a5a00;
  border-radius: 10px; padding: 6px 12px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.35;
}
.gl-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.gl-kw {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 20px; font-size: 14px; color: var(--muted);
}
/* store cards: 2 rows of 4 (8 stores), equal widths, each card its natural height (no stretched
   empty space), never scrolls sideways. Drops to 2 per row on narrow windows and 1 on phones. */
.gl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; padding-bottom: 0; }
@media (max-width: 1450px) { .gl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .gl-cards { grid-template-columns: minmax(0, 1fr); } }
.gl-card {
  min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px;
}
.gl-actions > .btn-primary { flex: 1 1 100%; font-size: 13.5px; padding: 7px 12px; }
.gl-actions .btn, .gl-actions .uploadbtn { font-size: 12.5px; padding: 5px 9px; margin: 0; line-height: 1.3; }
.gl-more, .gl-fold { border-top: 1px dashed var(--line); padding-top: 4px; }
.gl-more > summary, .gl-fold > summary {
  cursor: pointer; list-style: none; font-size: 12.5px; color: var(--muted); user-select: none; padding: 2px 0;
}
.gl-more > summary::-webkit-details-marker, .gl-fold > summary::-webkit-details-marker { display: none; }
.gl-more > summary::before, .gl-fold > summary::before { content: "▸ "; color: var(--accent); }
.gl-more[open] > summary::before, .gl-fold[open] > summary::before { content: "▾ "; }
.gl-more[open] > summary, .gl-fold[open] > summary { margin-bottom: 8px; }
.gl-secondary .btn { font-size: 13px; padding: 6px 10px; }
.gl-fold.gl-inline { border: 0; padding: 0; display: inline; }
.gl-fold.gl-inline > summary { display: inline; background: #f3f4f6; border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.gl-fold.gl-inline > summary::before { content: ""; }
.gl-fold.gl-inline > .gl-blkrow { margin-top: 6px; }
.gl-amz .gl-blk i { font-style: normal; color: var(--warn, #b56a12); }
.gl-amz .gl-blk { font-size: 12.5px; padding: 3px 9px; }
.gl-head { display: flex; align-items: center; justify-content: space-between; }
.gl-name { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.gl-live { font-size: 12px; color: var(--ok); background: var(--ok-soft); padding: 2px 9px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.gl-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gl-buckets.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-bkt { background: #f7f8fa; border-radius: 10px; padding: 5px 7px; cursor: pointer; transition: background .12s; min-width: 0; overflow: hidden; }
.gl-bkt:hover { background: #eef0f4; }
.gl-bkt.big { background: var(--accent-soft); }
.gl-bkt.big .gl-num { color: var(--accent); }
.gl-num { font-size: clamp(16px, 1vw, 19px); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; line-height: 1.1; }
.gl-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.2; }
.gl-blkrow { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gl-blk-lbl { font-weight: 500; }
.gl-blk { background: #f3f4f6; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.gl-blk:hover { background: #e7e9ee; }
.gl-blk b { color: var(--ink); }
.gl-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.gl-plan { display: flex; flex-direction: column; gap: 8px; }
.gl-plan-lbl { font-size: 13px; color: var(--muted); font-weight: 500; }
.gl-step { display: flex; gap: 10px; align-items: flex-start; background: #f7f8fa; border-radius: 10px; padding: 10px 12px; }
.gl-step-click { cursor: pointer; transition: background .12s, box-shadow .12s; }
.gl-step-click:hover { background: #eef1fd; box-shadow: inset 0 0 0 1px var(--accent); }
.gl-step-go { font-size: 12px; color: var(--accent); font-weight: 500; margin-left: 4px; }
.gl-step-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.gl-step-body { font-size: 13.5px; line-height: 1.4; }
.gl-step-how { font-size: 12.5px; color: var(--muted); }
.gl-eff { font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.gl-eff.easy { background: var(--ok-soft); color: var(--ok); }
.gl-eff.medium { background: var(--warn-soft); color: var(--warn); }
.gl-plan-note { font-size: 12.5px; color: var(--muted); background: #f3f4f6; border-radius: 8px; padding: 8px 10px; }
/* Bundles: one page, numbered steps top-to-bottom. Deliberately NOT a row of buttons. */
.bun-wrap { max-width: 1100px; margin: 0 auto; padding: 18px 20px 60px; }
.bun-title { font-size: 22px; margin: 0 0 2px; }
.bun-step { border: 1px solid var(--line); border-radius: 12px; margin-top: 14px; background: var(--card, transparent); }
.bun-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.bun-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--line); font-size: 12px; font-weight: 700; flex: none; }
.bun-num.done { background: var(--ok, #16a34a); color: #fff; }
.bun-body { padding: 12px 14px; }
.bun-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.bun-actions, .bun-filters, .bun-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bun-filters { margin-bottom: 8px; }
.bun-bar { margin: 8px 0; }
/* The results list scrolls INSIDE its step. 200 rows would otherwise be ~9,600px tall and shove
   steps 3 and 4 far below the fold — the exact "where did it go?" problem the Go Live card has. */
.bun-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.bun-scroll thead th { position: sticky; top: 0; background: var(--bg, #fff); z-index: 1; }

.gl-enh { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 0 2px; border-top: 1px dashed var(--line); }
/* results panel: briefly highlight so a finished action is obvious after we scroll to it */
.gl-done { border-left: 3px solid var(--accent, #16a34a); padding: 8px 0 8px 10px; animation: glFlash 1.2s ease-out; }
@keyframes glFlash { from { background: rgba(22, 163, 74, .16); } to { background: transparent; } }
.gl-enh-lbl { width: 100%; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.gl-enh-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.gl-enh-chip.done { background: var(--ok-soft); color: var(--ok); }
.gl-enh-chip.todo { background: var(--warn-soft); color: var(--warn); }
.sdschip { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 10px; margin: 2px 2px; font-size: 12.5px; }
.sdschip a { cursor: pointer; margin-left: 4px; color: var(--danger); font-weight: 600; }
.badge.soldout { background: #f1efe8; color: #6b7280; }
.mpk { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.mpk:hover { color: var(--accent); }
.mpk.ok { color: var(--ok); font-weight: 600; }
.gl-enh-click { cursor: pointer; transition: box-shadow .12s, filter .12s; }
.gl-enh-click:hover { box-shadow: inset 0 0 0 1px currentColor; filter: brightness(.97); }
.flash-hl { animation: flashhl 1.6s ease; }
@keyframes flashhl { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.gl-out { font-size: 13px; color: var(--muted); }
.gl-out a { color: var(--accent); }
.gl-fail { margin-top: 4px; color: #b42318; }
.gl-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gl-brand { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }

/* ============ Freshness tables ============ */
.fr-tbl { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 13.5px; }
.fr-tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.fr-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.fr-b { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.fr-b.ok { background: var(--ok-soft); color: var(--ok); }
.fr-b.stale { background: var(--warn-soft); color: var(--warn); }
.fr-b.old { background: #fdecec; color: #b42318; }

/* Settings/Imports pages share the card look */
#settingsBody, #importsBody { max-width: 900px; padding: 8px 28px 48px; }
#settingsBody .section-h, #importsBody .section-h {
  font-size: 15px; font-weight: 600; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
.detail-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 12px 0 6px; }


/* ---- Goflow tab ---- */
.gf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.gf-panes { display: flex; gap: 6px; flex-wrap: wrap; }
.gf-panes .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gf-tbl td { vertical-align: top; }
.gf-line { font-size: 13px; line-height: 1.4; }
.gf-diff { font-weight: 700; color: #b45309; }
.gf-neg { color: #b42318; }
tr.gf-loss td { background: #fdecec; }
tr.gf-low td { background: #fff7e6; }
tr.gf-no_vendor td, tr.gf-unmatched td { background: #f3f4f6; }
.gf-po { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.gf-pre { font-size: 11.5px; white-space: pre-wrap; word-break: break-word; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px; max-height: 320px; overflow: auto; }
.gf-mode, .gfs-mode { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-size: 13px; }
.gf-safety { border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: 13px; }
.gf-safety ul { margin: 4px 0 4px 18px; }
.gf-safety.bad { background: #fdecec; color: #b42318; border: 1px solid #f5c2c2; }
.gf-safety.warn { background: #fff7e6; color: #b45309; border: 1px solid #fbd38d; }
.gf-safety.ok { background: var(--ok-soft); color: var(--ok); }

/* per-store settings panel (⚙ Store settings on each Go-live card) */
.ss-panel .ss-sec { margin: 10px 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.ss-panel .ss-sec:first-of-type { border-top: none; }
.ss-panel input[type=number], .ss-panel input[type=text] { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; }

/* Settings → Prices (PRICES-LAYOUT lane, Sep 23): one table, one editor at a time, labels above 16px inputs */
.pr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-table th, .pr-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pr-table th { color: var(--muted); font-weight: 600; font-size: 13px; }
.pr-flag { color: #c0392b; font-weight: 700; }
.pr-note { margin: 6px 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #b45309; border: 1px solid #fbd38d; font-size: 14px; }
.pr-editor > td { background: var(--surface-2, #f7f9fb); padding: 14px 16px; }
.pr-ed { font-size: 15px; }
.pr-sec { margin: 0 0 16px; }
.pr-h { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.pr-sent { font-size: 15px; margin: 4px 0; }
.pr-ex { font-size: 18px; font-weight: 600; margin: 2px 0 8px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); gap: 12px 16px; align-items: end; }
.pr-field { display: flex; flex-direction: column; gap: 4px; max-width: 240px; }
.pr-field > span { font-size: 13px; color: var(--muted); }
.pr-ed input[type=number], .pr-ed input[type=text], .pr-ed select { font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); min-height: 44px; box-sizing: border-box; width: 100%; }
.pr-ed input[type=number] { text-align: right; }
.pr-ed .pr-msg.bad { color: #c0392b; }
.pr-confirm { display: none; margin: 8px 0; padding: 8px 12px; border: 1px solid #f5c6c2; background: #fdecea; border-radius: 8px; }
.pr-confirm.on { display: block; }
.pr-more > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 900px) { .pr-table .pr-narrow { display: none; } .pr-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }

/* Prices by store (product page) */
.prices td, .prices th { vertical-align: top; }
.prices tr.pr-asin td { padding-left: 14px; }

/* per-login access (users.js): hide money / write-buttons for limited logins (server enforces too) */
.no-money .money-only { display: none !important; }
.no-write .needs-write { display: none !important; }
.gf-proc { font-weight: 600; white-space: nowrap; }
tr.gf-cost-up td { box-shadow: inset 3px 0 0 #b42318; }

.gf-vendor { padding: 8px 12px; }
.gf-conn { margin: 8px 0 2px; background: var(--card); border-style: dashed; }

.gf-up { color: #067647; }

/* product page: stock history (goflow lane) */
.soldout-row td { color: #8b93a1; }
.soldout-row td:first-child { text-decoration: line-through; }

/* shorter screens (laptops, small monitors): shrink the go-live tiles a notch so both rows fit */
@media (max-height: 900px) {
  .gl-num { font-size: clamp(15px, .9vw, 17px); }
  .gl-lbl { font-size: 10.5px; margin-top: 2px; }
  .gl-bkt { padding: 4px 6px; }
  .gl-card { gap: 6px; }
}

/* "from vendor C / AI / Keepa / you" badge next to each Approve row — where the value came from */
.apval .src { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--muted); background: #f3f4f6; border-radius: 999px; padding: 1px 8px; vertical-align: middle; white-space: nowrap; }
.apval .src.ai { color: #6b3fa0; background: #f1eafa; }
.apval .src.you { color: var(--ok); background: var(--ok-soft); }
.apval .src.keepa { color: #b45309; background: #fdf3e2; }

/* photo "remove" button: clearly a real button (it used to look greyed-out / disabled) */
.imgactions .imgdel { color: #b42318; border-color: #f0c2bc; background: #fff6f5; font-weight: 600; }
.imgactions .imgdel:hover { background: #fde8e6; }

/* where each photo came from (vendor S / Amazon (Keepa) / you / your storage) */
.imgsrc { font-size: 11px; color: var(--muted); margin-top: 3px; width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* conflicting vendor data on an Approve row: "⚠ T says Women" */
.apval .src.conflict { color: #b45309; background: #fdf3e2; font-weight: 600; }

/* ---- item page: two columns — specs + approvals on the left, photos + ASINs pinned on the right,
   so approving never means scrolling down to the pictures and back ---- */
.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
.dcol-main { min-width: 0; }
.dcol-side { position: sticky; top: 0; max-height: calc(100vh - 24px); overflow: auto; padding: 0 4px 8px 0; }
.dcol-side .section-h:first-child { margin-top: 4px; }
.modal-card .detail-cols { grid-template-columns: 1fr; }         /* the small pop-up stays one column */
.modal-card .dcol-side { position: static; max-height: none; }
@media (max-width: 1150px) { .detail-cols { grid-template-columns: 1fr; } .dcol-side { position: static; max-height: none; } }
/* photo cells: wide enough that "main ◀ ▶" sits on one line */
.imgcell { width: 104px; }
.imgcell img { width: 104px; height: 104px; }
.imgactions { width: 104px; gap: 3px; }
.imgactions button { padding: 2px 5px; }
.imgsrc { width: 104px; }

/* item page: where it's already live — up top, impossible to miss */
.liveon { margin: 4px 0 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.liveon-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ok); }
.liveon-lbl.muted { color: var(--muted); font-weight: 500; letter-spacing: 0; font-size: 12.5px; }
.livechip { font-size: 12.5px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 2px 10px; border-radius: 999px; }
.rdlive { color: var(--ok); font-weight: 600; }

.badge.live { color: var(--ok); background: var(--ok-soft); font-weight: 600; }

/* Today tab — daily checklist (goflow lane) */
.today-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.today-progress { display:flex; align-items:center; gap:10px; min-width:220px; }
.today-bar { flex:1; height:10px; background:#e4e8ee; border-radius:6px; overflow:hidden; }
.today-fill { height:100%; background:#2f8f5b; }
.today-list { display:flex; flex-direction:column; gap:8px; }
.today-item { display:flex; gap:12px; padding:10px 12px; border:1px solid #e4e8ee; border-radius:10px; background:#fff; }
.today-item.next { border-color:#2b6cb8; box-shadow:0 0 0 2px #e6eefa; }
.today-item.done { opacity:.7; }
.today-item.done .today-text { text-decoration:line-through; }
.today-check input { width:20px; height:20px; margin-top:2px; }
.today-num { color:#8b93a1; margin-right:4px; }
.today-days { display:flex; gap:6px; flex-wrap:wrap; }
.today-day { font-size:11px; text-align:center; padding:4px 6px; border-radius:6px; background:#eceef2; color:#5f6773; min-width:52px; }
.today-day.part { background:#fbeed8; color:#b56a12; }
.today-day.full { background:#e7f4ec; color:#2f8f5b; }

.today-store { padding:10px 12px; border:1px solid #e4e8ee; border-radius:10px; background:#fff; }
.today-store.met { border-color:#2f8f5b; }
.today-store.missed { border-color:#b56a12; background:#fffaf3; }
.today-store-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.today-fill.miss { background:#b56a12; }

/* wide pop-up for store settings / Walmart API / swap proposals */
.modal-card.wide { max-width: 980px; }

/* Products filter bar: sort / page size / toggles fold into one View menu (clutter audit 2026-09-14) */
.viewmenu{display:inline-block;position:relative}
.viewmenu>summary{list-style:none;cursor:pointer}
.viewmenu>summary::-webkit-details-marker{display:none}
.viewmenu[open]>.viewmenu-body{position:absolute;z-index:30;top:110%;left:0;background:var(--surface,#fff);border:1px solid var(--border,#ddd);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:280px;box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* Settings tab folds */
details.set-fold { margin: 0 0 4px; }
details.set-fold > summary.section-h { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
details.set-fold > summary.section-h::-webkit-details-marker { display: none; }
details.set-fold > summary.section-h::before { content: "▸"; font-size: 12px; opacity: .6; }
details.set-fold[open] > summary.section-h::before { content: "▾"; }
details.set-fold > summary.section-h > button { margin-left: 6px; }

/* Settings → Goflow: one folded card per vendor (header = code · name · mode · Goflow #) */
.gf-vfold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.gf-vfold > summary::-webkit-details-marker { display: none; }
.gf-vfold > summary::before { content: "▸"; color: var(--accent); font-size: 13px; }
.gf-vfold[open] > summary::before { content: "▾"; }
.gf-vfold[open] > summary { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* room for the bottom tab strip, so Log / Log out at the foot of the sidebar are never covered */
.tabbar { padding-bottom: 62px; }

/* ---- DESIGN lane (2026-09-23, the CLEAN rule): one look for the Settings groups, the store cards and the store pop-up ---- */
/* Settings: six plain groups */
details.set-group { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; box-shadow: var(--shadow); }
details.set-group > summary.set-group-h { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
details.set-group > summary.set-group-h::-webkit-details-marker { display: none; }
details.set-group > summary.set-group-h::before { content: "▸"; color: var(--accent); font-size: 13px; }
details.set-group[open] > summary.set-group-h::before { content: "▾"; }
details.set-group[open] > summary.set-group-h { border-bottom: 1px solid var(--line); }
.set-group-name { font-size: 16px; font-weight: 700; }
.set-group-what { margin: 0 !important; font-size: 13px; }
.set-group-body { padding: 8px 16px 12px; }
.set-group-body > details.set-fold > summary.section-h { margin: 12px 0 6px; font-size: 14px; }
.set-store-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
/* store cards: the same row on every card — main action, ⚙ Store settings, 🕘 History */
.gl-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gl-actions .gl-keep { background: var(--card); }
.gl-more > summary { cursor: pointer; font-size: 13px; color: var(--muted); margin: 6px 0 2px; }
/* store pop-up: "Runs by itself" first, "Old way (files)" last */
.ss-auto { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ss-auto-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ss-auto-from { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 6px 0 0; }
.ss-auto-row > div, .ss-auto-row > label { margin: 0; }
.ss-oldway > summary { cursor: pointer; }
.ss-oldway-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hist-pre { white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; font-size: 11px; background: var(--bg); padding: 6px 8px; border-radius: 6px; margin: 2px 0 6px; }
.ss-auto-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; align-items: baseline; }
.ss-auto-jump { font-size: 13px; }
/* DESIGN r2 */
.gl-head .gl-mode { margin-right: auto; }
.gl-mode { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 6px; background: var(--line); color: var(--muted); white-space: nowrap; }
.gl-mode-live { background: var(--ok-soft); color: var(--ok); }
.gl-mode-test { background: var(--warn-soft); color: var(--warn); }
details.ss-more { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
details.ss-more > summary, details.panel-more > summary, details.page-more > summary, details.gf-more > summary, details.today-more > summary, details.money-files > summary { cursor: pointer; }
.grp-ticks { gap: 6px 14px; }
.gl-boardmenu[open] > .viewmenu-body { left: auto; right: 0; }
.ss-each, .grp-each { display: inline-block; margin-left: 6px; }
.grp-each > div { margin-top: 4px; }