/* ==========================================================================
   Sales vs Stock — design system
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:          #f4f6f9;
  --bg-glow:     rgba(43, 108, 232, .10);
  --surface:     #ffffff;
  --surface-2:   #f7f9fc;
  --border:      #e4e8ee;
  --border-soft: #eef1f5;

  --text:        #0e1420;
  --text-2:      #4a5566;
  --muted:       #7b8797;

  --accent:      #2b6ce8;
  --accent-dark: #1e59c9;
  --accent-fg:   #ffffff;
  --accent-soft: rgba(43, 108, 232, .10);

  --ok:      #0f7b46;  --ok-bg:   #e7f6ee;  --ok-br:   #b9e4cd;
  --warn:    #96601a;  --warn-bg: #fdf3e2;  --warn-br: #f0dcb8;
  --err:     #c02a24;  --err-bg:  #fdeceb;  --err-br:  #f4c9c6;

  --ring:    0 0 0 3px rgba(43, 108, 232, .22);
  --sh-sm:   0 1px 2px rgba(16, 24, 40, .05);
  --sh-md:   0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px -6px rgba(16, 24, 40, .10);
  --sh-btn:  0 1px 2px rgba(16, 24, 40, .10), 0 4px 12px -2px rgba(43, 108, 232, .35);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:          #0b0e13;
    --bg-glow:     rgba(122, 162, 255, .10);
    --surface:     #141922;
    --surface-2:   #1a202b;
    --border:      #262d3a;
    --border-soft: #1f2531;

    --text:        #e9edf3;
    --text-2:      #b3bdcc;
    --muted:       #8794a6;

    --accent:      #7aa2ff;
    --accent-dark: #5f8cf5;
    --accent-fg:   #0a1020;
    --accent-soft: rgba(122, 162, 255, .14);

    --ok:   #6fd39b;  --ok-bg:   #10241a;  --ok-br:   #1f4432;
    --warn: #e6be6a;  --warn-bg: #241d10;  --warn-br: #43371c;
    --err:  #f08a83;  --err-bg:  #26130f;  --err-br:  #4a2521;

    --ring:   0 0 0 3px rgba(122, 162, 255, .25);
    --sh-sm:  0 1px 2px rgba(0, 0, 0, .5);
    --sh-md:  0 1px 3px rgba(0, 0, 0, .5), 0 12px 32px -8px rgba(0, 0, 0, .6);
    --sh-btn: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px -4px rgba(122, 162, 255, .3);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  padding: 56px 20px 72px;
  background:
    radial-gradient(900px 480px at 50% -180px, var(--bg-glow), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app { max-width: 540px; margin: 0 auto; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { text-align: center; margin-bottom: 32px; }

.mark {
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  color: var(--accent-fg);
  box-shadow: var(--sh-btn);
}
.mark svg { width: 26px; height: 26px; }

.hero h1 {
  margin: 0 0 7px;
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -.024em;
}

.sub { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; }

.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge.auto { border-color: var(--ok-br); background: var(--ok-bg); color: var(--ok); }

/* ── Card ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 6px 20px 20px;
  margin-bottom: 14px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.head-title { flex: 1; font-size: 14px; font-weight: 620; letter-spacing: -.01em; }

/* status dot */
.dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 18%, transparent);
}
.dot.ok   { background: var(--ok);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot.err  { background: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 20%, transparent); }
.dot.busy { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 45%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%,  transparent); }
}

/* ── Meta list ──────────────────────────────────────────────────────────── */

.meta { margin: 0; }

.meta-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
}
.meta-row + .meta-row { border-top: 1px solid var(--border-soft); }

.meta-row dt {
  flex: none;
  width: 104px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}
.meta-row dd {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 560;
  overflow-wrap: anywhere;
}
.meta-row dd.muted { color: var(--muted); font-weight: 500; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s, opacity .15s;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.primary {
  width: 100%;
  margin-top: 16px;
  padding: 15px 20px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: var(--accent-fg);
  font-size: 15.5px;
  font-weight: 640;
  letter-spacing: -.005em;
  box-shadow: var(--sh-btn);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn.primary .ico { width: 18px; height: 18px; }

.btn.ghost {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
  font-weight: 560;
}
.btn.ghost:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.sm { padding: 6px 13px; font-size: 12.5px; border-radius: var(--r-sm); }

.link {
  font: inherit;
  flex: none;
  background: none;
  border: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 580;
  cursor: pointer;
  border-radius: 6px;
}
.link:hover:not(:disabled) { text-decoration: underline; }
.link:disabled { color: var(--muted); cursor: not-allowed; }
.link:focus-visible { outline: none; box-shadow: var(--ring); }

.hint {
  margin: 11px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.btn.wide {
  width: 100%;
  margin-top: 12px;
  padding: 12px 18px;
  font-size: 14px;
}

/* ── The big Import button ──────────────────────────────────────────────── */

.stage {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bigbtn {
  font: inherit;
  width: 100%;
  max-width: 340px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px;
  border: 0;
  border-radius: 26px;
  cursor: pointer;
  background: linear-gradient(160deg, var(--accent), var(--accent-dark));
  color: var(--accent-fg);
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -.02em;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .10), 0 18px 40px -12px rgba(43, 108, 232, .55);
  transition: transform .12s, box-shadow .18s, filter .15s, opacity .15s;
}
.bigbtn svg { width: 46px; height: 46px; opacity: .95; }

.bigbtn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 4px 8px rgba(16, 24, 40, .12), 0 26px 52px -12px rgba(43, 108, 232, .6);
}
.bigbtn:active:not(:disabled) { transform: translateY(1px); }
.bigbtn:focus-visible { outline: none; box-shadow: var(--ring), 0 18px 40px -12px rgba(43, 108, 232, .55); }
.bigbtn:disabled { cursor: wait; opacity: .75; }
.bigbtn.working svg { animation: bob 1.1s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.stage .hint { max-width: 340px; }
.stage .msg, .stage .btn.wide { width: 100%; max-width: 340px; }

/* spinner swaps in for the arrow while working */
.bigbtn .spinner {
  display: none;
  width: 42px; height: 42px;
  border: 3.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.bigbtn.working .spinner { display: block; }
.bigbtn.working .dl { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* report picker above the button */
.picker {
  width: 100%;
  max-width: 340px;
  margin-bottom: 20px;
  display: grid;
  gap: 7px;
}
.picker label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.picker select {
  font: inherit;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.picker select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.picker select:disabled { opacity: .55; cursor: not-allowed; }

.modal .btn.primary.modal-go { text-decoration: none; }

/* ── Result popup ───────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 13, 20, .55);
  backdrop-filter: blur(3px);
  animation: fade .18s ease-out;
}

@keyframes fade { from { opacity: 0; } }

.modal {
  width: 100%;
  max-width: 380px;
  padding: 34px 28px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45);
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.2);

  /* a short window used to cut the bottom off — the last field and the Save
     button simply were not there. It scrolls within itself instead. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes pop { from { transform: scale(.92) translateY(10px); opacity: 0; } }

.modal-icon {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.modal-icon svg { width: 30px; height: 30px; display: none; }
.modal-icon.ok  { background: var(--ok-bg);  color: var(--ok);  border: 1px solid var(--ok-br); }
.modal-icon.err { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-br); }
.modal-icon.ok  .tick  { display: block; }
.modal-icon.err .cross { display: block; }

.modal h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -.02em;
}

.modal-count {
  margin: 10px 0 4px;
  font-size: 34px;
  font-weight: 720;
  letter-spacing: -.03em;
  color: var(--accent);
}

.modal-sub {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.modal .btn.primary.modal-go { margin-top: 22px; padding: 13px 20px; font-size: 14.5px; }
.modal .btn.ghost { margin-top: 9px; }

.saved {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid var(--ok-br);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; padding: 14px 0 2px; }

.field label {
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.field input,
.field textarea {
  font: inherit;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea {
  font: 12px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  resize: vertical;
  min-height: 84px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.field-hint code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* ── Timeline ───────────────────────────────────────────────────────────── */

.timeline {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 4px 4px;
  border-top: 1px solid var(--border-soft);
}

.timeline li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 7px 0;
  color: var(--muted);
  font-size: 13.5px;
  transition: color .2s;
}

/* connecting rail */
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 24px;
  width: 1px;
  height: calc(100% - 12px);
  background: var(--border);
}

.node {
  flex: none;
  position: relative;
  z-index: 1;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  transition: border-color .2s, background .2s;
}

.timeline li.active { color: var(--text); font-weight: 600; }
.timeline li.active .node {
  border-color: var(--accent);
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

.timeline li.done { color: var(--text-2); }
.timeline li.done .node { border-color: var(--ok); background: var(--ok); }
.timeline li.done .node::after {
  content: "";
  position: absolute;
  left: 2.5px; top: .5px;
  width: 3px; height: 6px;
  border: solid var(--surface);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.timeline li.failed { color: var(--err); font-weight: 600; }
.timeline li.failed .node { border-color: var(--err); background: var(--err); }

/* ── Message ────────────────────────────────────────────────────────────── */

.msg {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.ok   { background: var(--ok-bg);   border-color: var(--ok-br);   color: var(--ok); }
.msg.info { background: var(--warn-bg); border-color: var(--warn-br); color: var(--warn); }
.msg.err  { background: var(--err-bg);  border-color: var(--err-br);  color: var(--err); }

/* ── Drop zone ──────────────────────────────────────────────────────────── */

.drop {
  margin-top: 14px;
  padding: 30px 20px;
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.drop:hover, .drop:focus-visible { border-color: var(--accent); outline: none; }
.drop.over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  color: var(--accent);
}
.drop strong { color: var(--text); font-size: 14.5px; font-weight: 620; }
.drop-ico { width: 26px; height: 26px; margin-bottom: 7px; opacity: .75; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.foot {
  margin-top: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.foot code {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 11.5px;
}

/* ── Settings ───────────────────────────────────────────────────────────── */

.linkish {
  font: inherit;
  margin-top: 18px;
  padding: 6px 10px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 560;
  cursor: pointer;
}
.linkish:hover { color: var(--accent); }
.linkish:focus-visible { outline: none; box-shadow: var(--ring); }

.modal-left { text-align: left; max-width: 440px; }
.modal-left h2 { text-align: left; margin-bottom: 4px; }

.facts {
  margin: 0 0 4px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.facts div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
}
.facts dt {
  flex: none;
  width: 116px;
  color: var(--muted);
  font-size: 12.5px;
}
.facts dd {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;                 /* one kept file per line, not run together */
}
.facts dd.ok  { color: var(--ok); }
.facts dd.err { color: var(--err); }

.field { display: grid; gap: 6px; padding: 12px 0 2px; text-align: left; }

.field label {
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}

.field input {
  font: inherit;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.hidden { display: none !important; }

@media (max-width: 460px) {
  body { padding: 36px 14px 56px; }
  .meta-row { flex-wrap: wrap; }
  .meta-row dt { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}