/* FrontOps UI
   One family (Archivo, variable width + weight). Regular width for reading, a narrower cut for
   numbers and column heads so 18+ metric columns fit without shrinking the type.
   Colour carries meaning: green = Shopify data, blue = Google data, red = needs action,
   amber = draft / warning. Yellow is the brand marker only. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1d1c1a;
  --ink-2: #55524c;
  --ink-3: #8a867e;
  --paper: #efeeea;
  --surface: #ffffff;
  --sunken: #f7f6f3;
  --line: #d9d7d0;
  --line-soft: #e9e7e1;
  --tape: #ffd23f;

  --shopify: #0c7d55;
  --shopify-wash: #e2f2ea;
  --google: #2a64d9;
  --google-wash: #e5edfc;
  --hot: #c9361d;
  --hot-wash: #fbe8e3;
  --warn: #9a5d06;
  --warn-wash: #fbefd6;
  --calm: #3f6656;
  --calm-wash: #e6efe9;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-pop: 0 10px 30px rgba(29, 28, 26, 0.16), 0 1px 3px rgba(29, 28, 26, 0.12);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --topbar-h: 52px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
h2 { font-size: 16px; font-weight: 650; line-height: 1.3; }
h3 { font-size: 14px; font-weight: 650; }
a { color: var(--google); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--google); outline-offset: 2px; border-radius: 3px; }

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; font-stretch: 88%; }
.idtext { font-variant-numeric: tabular-nums; font-stretch: 84%; letter-spacing: 0.01em; word-break: break-all; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------------ top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 0 16px;
  background: var(--ink);
  color: #f4f3ef;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 24px; height: 24px; flex: none; }

.nav { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: #cfccc4;
  font-weight: 550;
  white-space: nowrap;
}
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.is-active { color: #fff; }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0;
  height: 3px;
  background: var(--tape);
}
.nav-sep { width: 1px; margin: 14px 8px; background: #46443f; flex: none; }
.count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--hot);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

.topbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #4a4843;
  border-radius: var(--radius);
  background: transparent;
  color: #f4f3ef;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.topbtn:hover { background: #2e2d2a; }
.topbtn .icon { width: 15px; height: 15px; }
.topbtn-plain { border-color: transparent; padding: 0 6px; }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3a3935;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dots { display: inline-flex; }
.dots .dot { margin-left: -3px; box-shadow: 0 0 0 1.5px var(--ink); }
.dots .dot:first-child { margin-left: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink-3)); flex: none; display: inline-block; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #5fd08f; flex: none; }
.pulse.is-warn { background: #f2b53a; }
.pulse.is-bad { background: #ff7a61; }
.pulse.is-busy { background: var(--tape); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 0.9s linear infinite; }

/* ------------------------------------------------------------------ controls */

.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--sunken); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #33312d; }
.btn-danger { background: var(--hot); border-color: var(--hot); color: #fff; }
.btn-danger:hover { background: #b02d16; }
.btn-quiet { border-color: transparent; background: transparent; }
.btn-quiet:hover { background: rgba(29, 28, 26, 0.06); }
.btn-sm { height: 28px; padding: 0 9px; font-size: 13px; }
.btn-icon { width: 30px; padding: 0; }
.btn-sm.btn-icon { width: 26px; }

.input, .select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}
.input:focus, .select:focus { outline: 2px solid var(--google); outline-offset: -1px; }
.input::placeholder { color: var(--ink-3); }
.select { padding-right: 26px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2355524c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
.input-sm, .select-sm { height: 28px; font-size: 13px; }
textarea.input { height: auto; padding: 8px 10px; line-height: 1.4; resize: vertical; }
.search { position: relative; }
.search .icon { position: absolute; left: 9px; top: 9px; color: var(--ink-3); }
.search .input { padding-left: 31px; width: 260px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label, .field > .label { font-weight: 600; font-size: 13px; }
.field .hint { font-size: 12.5px; color: var(--ink-2); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }

.seg { display: inline-flex; padding: 2px; border-radius: var(--radius); background: #e2e0da; }
.seg button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(29, 28, 26, 0.14); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.toggle.is-on { border-color: var(--ink); color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px 0 9px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.chip button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: #cfccc4; cursor: pointer; }
.chip button:hover { background: #45433e; color: #fff; }
.chip .icon { width: 11px; height: 11px; stroke-width: 2.2; }
.chip-soft { background: #e2e0da; color: var(--ink); padding-right: 9px; }

/* source tiles: stand-ins for the Shopify / Google marks (drop official SVGs into static/brand/ to replace) */
.src {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  flex: none;
}
.src-shopify { background: var(--shopify); }
.src-google { background: var(--google); }
.src-img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.src-pair { display: inline-flex; gap: 2px; }

/* status tags: shaped like a garment swing tag, with a punched hole */
.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px 0 17px;
  border-radius: 3px 10px 10px 3px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  background: #e6e4de;
  color: var(--ink-2);
}
.tag::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, 0.18);
}
.tag-active { background: var(--shopify-wash); color: var(--shopify); }
.tag-draft { background: var(--warn-wash); color: var(--warn); }
.tag-archived, .tag-deleted { background: #e6e4de; color: var(--ink-2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  background: #e6e4de;
  color: var(--ink-2);
}
.pill-hot { background: var(--hot-wash); color: var(--hot); }
.pill-calm { background: var(--calm-wash); color: var(--calm); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-google { background: var(--google-wash); color: var(--google); }
.pill .icon { width: 11px; height: 11px; stroke-width: 2.2; }

.storetag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.storetag .dot { width: 8px; height: 8px; }

.copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 5px;
  margin: -1px -5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.copy:hover { background: rgba(29, 28, 26, 0.07); }
.copy .icon { width: 12px; height: 12px; color: var(--ink-3); opacity: 0; }
.copy:hover .icon, .copy:focus-visible .icon { opacity: 1; }
.copy.is-copied { color: var(--shopify); }

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

.page { padding: 18px 16px 60px; }
.page-loading { padding: 60px 0; text-align: center; color: var(--ink-2); }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .lead { color: var(--ink-2); margin-top: 3px; max-width: 76ch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.panel-pad { padding: 16px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar .divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-on { color: var(--ink); }
.tabs button.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ink); }
.tabs .n { font-variant-numeric: tabular-nums; font-size: 12.5px; padding: 0 6px; border-radius: 9px; background: #e2e0da; color: var(--ink-2); }
.tabs .n-hot { background: var(--hot); color: #fff; }
.tabs .n-warn { background: var(--warn-wash); color: var(--warn); }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-2); }
.empty h2 { color: var(--ink); margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-wash); color: #6b4104; }
.notice-info { background: var(--google-wash); color: #1c4596; }
.notice-bad { background: var(--hot-wash); color: #8f2613; }
.notice .icon { margin-top: 2px; }

/* ------------------------------------------------------------------ summary strip */

.summary { display: flex; align-items: stretch; flex-wrap: wrap; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.summary .cell { padding: 9px 16px 10px; border-right: 1px solid var(--line-soft); min-width: 104px; }
.summary .cell:last-child { border-right: 0; }
.summary .k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.summary .v { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; font-stretch: 92%; line-height: 1.25; }
.summary .cell-lead { background: var(--sunken); }

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

.tablewrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; max-height: calc(100vh - 290px); min-height: 240px; }
.tablewrap.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.grid th, .grid td { padding: 0 9px; white-space: nowrap; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.grid thead th { position: sticky; z-index: 3; text-align: right; font-weight: 600; }
.grid thead tr.groups th { top: 0; height: 34px; padding-top: 3px; border-bottom: 0; text-align: left; font-stretch: 86%; }
.grid thead tr.windows th { top: 34px; height: 26px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-stretch: 86%; }
.grid thead th.sticky-col { z-index: 5; text-align: left; }
.grid .sticky-col { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--line); }
.grid td.sticky-col { z-index: 2; }

.grid th.group { box-shadow: inset 0 3px 0 var(--g, var(--line)); border-left: 1px solid var(--line-soft); }
.grid th.group .gh { display: flex; align-items: center; gap: 6px; }
.grid th.group-google { --g: var(--google); }
.grid th.group-shopify { --g: var(--shopify); }
.grid th.group-blend { box-shadow: none; background-image: linear-gradient(90deg, var(--shopify) 50%, var(--google) 50%); background-size: 100% 3px; background-repeat: no-repeat; }
.grid .first-of-group { border-left: 1px solid var(--line-soft); }

.sortbtn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 4px; background: transparent; color: inherit; font-weight: 600; cursor: pointer; font-stretch: inherit; }
.sortbtn:hover { background: var(--sunken); color: var(--ink); }
.sortbtn.is-sorted { color: var(--ink); background: #ebe9e3; }
.sortbtn .icon { width: 10px; height: 10px; stroke-width: 2.4; }

.grid tbody td { height: 58px; text-align: right; font-variant-numeric: tabular-nums; font-stretch: 88%; }
.grid.is-variant tbody tr:not(.totals) > td { height: 72px; }
.grid tbody tr:hover > td { background: #faf9f6; }
.grid tbody tr.is-selected > td { background: #f3f1ea; }
.grid td.zero { color: #b3afa6; }
.grid td.neg { color: var(--hot); font-weight: 600; }
.grid td.pos { color: var(--shopify); }
.grid td.is-sorted { background: #fbfaf7; }
.grid tbody tr:hover > td.is-sorted { background: #f6f4ef; }
.grid tr.sub > td { background: var(--sunken); height: 46px; }
.grid tr.sub:hover > td { background: #f1efe9; }
.grid tr.sub > td.sticky-col { padding-left: 46px; }
.grid tr.totals > td { position: sticky; bottom: 0; z-index: 2; height: 38px; background: var(--sunken); border-top: 1px solid var(--line); border-bottom: 0; font-weight: 650; }
.grid tr.totals > td.sticky-col { z-index: 4; text-align: left; font-stretch: 100%; }

.pcell { display: flex; align-items: center; gap: 10px; min-width: 340px; max-width: 440px; text-align: left; font-stretch: 100%; white-space: normal; }
.pcell .thumb { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; background: #e9e7e1; flex: none; }
.sub .pcell .thumb { width: 30px; height: 30px; }
.thumb-blank { display: grid; place-items: center; color: var(--ink-3); font-weight: 700; font-size: 13px; }
.pcell .body { min-width: 0; flex: 1 1 auto; }
.pcell .title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pcell .title .name { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcell .meta { display: flex; align-items: center; gap: 9px; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.pcell .meta > * { flex: none; }
.pcell .meta .strong { color: var(--ink); font-weight: 600; }
.pcell .meta .idtext { color: var(--ink-3); }
.pcell .links { display: flex; align-items: center; gap: 2px; flex: none; opacity: 0; }
tr:hover .pcell .links, .pcell .links:focus-within { opacity: 1; }
.pcell .links a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; color: var(--ink-2); }
.pcell .links a:hover { background: rgba(29, 28, 26, 0.08); color: var(--ink); }
.expander { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; color: var(--ink-2); flex: none; }
.expander:hover { background: rgba(29, 28, 26, 0.08); }
.expander .icon { width: 12px; height: 12px; stroke-width: 2.2; transition: transform 0.12s; }
.expander.is-open .icon { transform: rotate(90deg); }
.rowcheck { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }

.pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ink-2); }

.bulkbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-pop);
}
.bulkbar .btn { border-color: #55524c; background: #2e2d2a; color: #fff; }
.bulkbar .btn:hover { background: #45433e; }
.bulkbar .btn-primary { background: var(--tape); border-color: var(--tape); color: var(--ink); }
.bulkbar .btn-primary:hover { background: #f2c42f; }

/* ------------------------------------------------------------------ popovers, modals, toasts */

.pop {
  position: absolute;
  z-index: 50;
  min-width: 220px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}
.pop h3 { margin-bottom: 8px; }
.pop .menuitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.pop .menuitem:hover { background: var(--sunken); text-decoration: none; }
.pop .menuitem.is-on { font-weight: 650; }
.pop hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px -10px; }
.pop .poprow { display: flex; align-items: center; gap: 8px; padding: 5px 4px; }

.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 6vh 16px 16px; background: rgba(29, 28, 26, 0.45); overflow-y: auto; }
.modal { width: 100%; max-width: 620px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); }
.modal-wide { max-width: 860px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.modal-body { padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }
.modal-foot .error { margin-right: auto; color: var(--hot); font-weight: 550; }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { max-width: 420px; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: #fff; box-shadow: var(--shadow-pop); font-weight: 550; }
.toast-bad { background: var(--hot); }

/* ------------------------------------------------------------------ alerts + queue */

.split { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.rulelist { display: flex; flex-direction: column; gap: 8px; }
.rulecard { display: block; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: left; cursor: pointer; }
.rulecard:hover { border-color: #b9b6ad; }
.rulecard.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rulecard.is-paused { opacity: 0.6; }
.rulecard .name { font-weight: 650; line-height: 1.3; }
.rulecard .conds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.rulecard .foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--ink-2); }
.cond { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 4px; background: #eceae4; font-size: 12.5px; font-weight: 550; font-stretch: 92%; white-space: nowrap; }

.flaggrid { display: grid; grid-template-columns: 34px minmax(250px, 1.15fr) minmax(250px, 0.9fr) minmax(430px, 1.45fr) 136px; gap: 16px; align-items: center; padding: 10px 14px; }
.flaggrid.is-compact { grid-template-columns: 22px minmax(240px, 1.1fr) minmax(410px, 1.5fr) 196px; }
.flaghead { padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--sunken); border-bottom: 1px solid var(--line); }
.flaghead .cmp-l { color: var(--ink-2); font-weight: 600; }
.flagrow { border-bottom: 1px solid var(--line-soft); }
.flagrow:last-child { border-bottom: 0; }
.flagrow.is-open { box-shadow: inset 3px 0 0 var(--hot); }
.flagrow.is-done { box-shadow: inset 3px 0 0 #b9c9c0; }
.flagrow.is-done .pcell .name { color: var(--ink-2); }
.flagrow.is-warn { box-shadow: inset 3px 0 0 #e0a730; background: #fffbf1; }
.flagrow.is-dismissed { opacity: 0.7; }
.flagrow .pcell { min-width: 0; max-width: none; }
.flagrow .pcell .links { opacity: 0; }
.flagrow:hover .pcell .links { opacity: 1; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 2px #fff; cursor: pointer; }
.swatch.is-on { border-color: var(--ink); }

/* flagged-day numbers over current numbers */
.cmp { display: grid; grid-template-columns: minmax(96px, 1.1fr) repeat(3, minmax(58px, 1fr)) minmax(76px, 1.15fr) minmax(62px, 1fr); column-gap: 8px; row-gap: 3px; align-items: center; }
.cmp-h { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.cmp-l { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-l.faint { color: var(--ink-3); font-size: 12px; }
.cmp .v { text-align: right; font-variant-numeric: tabular-nums; font-stretch: 88%; font-weight: 600; white-space: nowrap; }
.cmp .v.neg { color: var(--hot); }
.cmp .v.zero { color: #b3afa6; font-weight: 500; }
.cmp-rule { margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.idlist { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; min-width: 0; }
.idlist .lbl { color: var(--ink-3); margin-right: 4px; font-size: 12px; }
.idlist .main { font-size: 13.5px; font-weight: 600; font-stretch: 78%; word-break: normal; overflow-wrap: anywhere; }
.when .d { font-weight: 600; }
.actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.storeblock { margin-bottom: 14px; }
.storeblock-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.storeblock-head .name { font-weight: 650; font-size: 15px; }
.checkbtn { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid #bcb9b0; border-radius: 7px; background: var(--surface); color: transparent; cursor: pointer; flex: none; }
.checkbtn:hover { border-color: var(--ink); color: #c9c6be; }
.checkbtn.is-on { background: var(--calm); border-color: var(--calm); color: #fff; }
.checkbtn .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.checkbtn.is-auto { cursor: default; background: #8fa89b; border-color: #8fa89b; }

/* ------------------------------------------------------------------ admin pages */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
.storecard { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.storecard.is-paused { opacity: 0.65; }
.storecard .head { display: flex; align-items: center; gap: 10px; }
.storecard .head .dot { width: 12px; height: 12px; }
.storecard .head .name { font-weight: 650; font-size: 16px; }
.srcline { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; align-items: start; }
.srcline .src, .srcline .src-img { margin-top: 2px; }
.srcline .l1 { font-weight: 600; }
.srcline .l2 { font-size: 12.5px; color: var(--ink-2); }
.storecard .foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line-soft); }

table.plain { width: 100%; border-collapse: collapse; }
.plain th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--sunken); }
.plain td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.plain tr:last-child td { border-bottom: 0; }
.plain th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.plain th:last-child { border-radius: 0 var(--radius-lg) 0 0; }

.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formgrid .full { grid-column: 1 / -1; }
.codebox { width: 100%; height: 300px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f7f6f3; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto; resize: vertical; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.steps code, .inline-code { padding: 1px 5px; border-radius: 4px; background: #eceae4; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.condrow { display: grid; grid-template-columns: minmax(0, 1.5fr) 86px 78px 110px 30px; gap: 6px; align-items: center; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.setting { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.setting:last-child { border-bottom: 0; padding-bottom: 0; }
.setting:first-of-type { padding-top: 4px; }
.setting .t { font-weight: 600; }
.setting .d { font-size: 13px; color: var(--ink-2); max-width: 52ch; }
.iconrow { justify-content: flex-start; gap: 12px; }
.iconrow .input { width: 100%; margin-top: 5px; }
.iconrow .iconwarn { color: var(--warn); margin-top: 5px; }
.icon-preview { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-top: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunken); }
.icon-preview img { width: 22px; height: 22px; object-fit: contain; }
.icon-preview .src { width: 22px; height: 22px; border-radius: 5px; font-size: 13px; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: 11px; background: #c9c6be; transition: background 0.12s; pointer-events: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.12s; }
.switch input:checked + .track { background: var(--shopify); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--google); outline-offset: 2px; }

/* ------------------------------------------------------------------ sign-in */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-side { background: var(--ink); color: #f4f3ef; padding: 40px 44px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side .brand { font-size: 19px; }
.auth-side .pitch { font-size: 30px; font-weight: 650; font-stretch: 108%; line-height: 1.15; letter-spacing: -0.015em; max-width: 15ch; }
.auth-side .legend { display: flex; flex-direction: column; gap: 9px; color: #cfccc4; }
.auth-side .legend .row { gap: 10px; }
.ruler { height: 14px; background-image: repeating-linear-gradient(90deg, var(--tape) 0 2px, transparent 2px 12px); mask-image: linear-gradient(180deg, #000 0 100%); opacity: 0.9; }
.auth-main { display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.auth-card .btn { height: 40px; }
.auth-card .input { height: 40px; }
.auth-error { padding: 9px 12px; border-radius: var(--radius); background: var(--hot-wash); color: #8f2613; font-weight: 550; }

.only-narrow { display: none; }

@media (max-width: 1240px) {
  .topbar { gap: 12px; }
  .nav a { padding: 0 8px; }
  .topbtn .hide-mid { display: none; }
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .flaggrid, .flaggrid.is-compact { grid-template-columns: 34px minmax(0, 1fr); row-gap: 10px; }
  .flaggrid > .wide { grid-column: 2; }
  .flaghead { display: none; }
  .only-narrow { display: flex; }
  .cmp { grid-template-columns: minmax(84px, 1.1fr) repeat(5, minmax(0, 1fr)); column-gap: 6px; }
  .actions { justify-content: flex-start; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .search .input { width: 180px; }
  .cards { grid-template-columns: 1fr; }
  .formgrid { grid-template-columns: 1fr; }
  .storeblock-head { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .topbar { height: auto; flex-wrap: wrap; row-gap: 0; padding: 0 12px; }
  .brand { height: 48px; }
  .topbar-right { height: 48px; }
  .nav { order: 3; flex: 1 0 100%; height: 40px; margin: 0 -12px; padding: 0 4px; border-top: 1px solid #34332f; }
  .page { padding: 14px 12px 60px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs button { white-space: nowrap; }
  .grid .sticky-col { position: static; }
  .pcell { min-width: 250px; }
  .summary .cell { min-width: 50%; border-bottom: 1px solid var(--line-soft); }
  .settings-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .condrow { grid-template-columns: minmax(0, 1fr) 76px; }
  .plain th:nth-child(n+4), .plain td:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}