/* Albayan operations workspace — aligned with Perfume Card Agent. */
:root {
  color-scheme: dark;
  --bg: #080e12;
  --panel: #10171d;
  --panel-alt: #0c1419;
  --field: #0a1217;
  --line: #29403b;
  --line-strong: #3a5c50;
  --ink: #edf8f4;
  --muted: #92aaa5;
  --faint: #718a86;
  --lime: #a5ff63;
  --cyan: #90f4df;
  --violet: #bd9aff;
  --red: #ff888c;
  --amber: #f4c978;
  --blue: #8cb9ff;
  --green: #a5ff63;
  --green-bg: #162b20;
  --red-bg: #321d22;
  --amber-bg: #33291a;
  --blue-bg: #192737;
  --border: var(--line);
  --shadow: 0 16px 36px rgba(0, 0, 0, .23);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 94% 11%, rgba(58, 184, 121, .095) 0%, transparent 34%),
    radial-gradient(ellipse at 6% 43%, rgba(80, 103, 200, .045) 0%, transparent 39%),
    linear-gradient(90deg, rgba(102, 186, 148, .028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(102, 186, 148, .02) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 80px 80px, 80px 80px, auto;
  font: 13px/1.72 "Segoe UI", Tahoma, Arial, sans-serif;
}
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
a { color: var(--cyan); }
a:hover { color: #c8fff2; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
::selection { background: #a5ff6345; color: #fff; }
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Shared edge: one restrained RGB signature, not a decorative gradient UI. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  background: rgba(8, 14, 18, .94);
  border-bottom: 1px solid #273a35;
  backdrop-filter: blur(14px);
}
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  opacity: .8;
  background: linear-gradient(90deg, #a5ff63, #6be0cd 29%, #708fff 58%, #b48af7 78%, #a5ff63);
  background-size: 200% 100%;
  animation: spectrum 15s linear infinite;
}
@keyframes spectrum { from { background-position: 0 0; } to { background-position: 200% 0; } }
.header-content { max-width: 1280px; padding: 0 32px; margin: auto; height: 100%; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; direction: ltr; text-align: left; }
.brand-mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid #376b47;
  background: #11251c;
  border-radius: 10px;
  color: var(--lime);
  font: 700 23px/1 Georgia, serif;
  box-shadow: inset 0 1px 0 #caff9c10;
}
.brand-name { font: 750 15px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: .02em; }
.brand-name span { font-weight: 450; color: #bbd5c9; }
.brand-sub { margin-top: 5px; color: #84b5a2; font: 650 10px/1.2 ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .095em; }
.header-right { display: flex; gap: 15px; align-items: center; direction: ltr; }
.header-chip { display: inline-flex; gap: 9px; align-items: center; border: 1px solid #2c4f3a; border-radius: 6px; background: #10241a; color: #b6f7a8; padding: 7px 10px; font: 700 10px ui-monospace, Consolas, monospace; letter-spacing: .035em; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px #a5ff6370; }
.header-app { color: #8ca8a0; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .06em; white-space: nowrap; }
.header-app b { color: #c6f99e; font-weight: 600; margin-left: 5px; }

.page { max-width: 1280px; padding: 36px 32px 18px; margin: 0 auto; }
.hero { margin-bottom: 25px; }
.eyebrow { display: inline-block; direction: ltr; text-align: left; color: #92cbae; font: 650 11px ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.hero h1 { font-size: clamp(26px, 3vw, 35px); line-height: 1.5; letter-spacing: -.045em; font-weight: 750; margin: 9px 0 7px; }
.hero h1 span { color: var(--lime); }
.hero p { margin: 0; max-width: 770px; color: #9fb5b0; font-size: 12px; line-height: 1.95; }
.hero p b { color: #ddf5e7; font-weight: 650; direction: ltr; display: inline-block; }
.hero-insignia { direction: ltr; width: 86px; height: 77px; border-radius: 9px; border: 1px solid #34584a; color: var(--lime); background: #10231b; display: grid; place-items: center; position: relative; flex: none; font: 700 28px ui-monospace, Consolas, monospace; letter-spacing: -.07em; }
.hero-insignia::before, .hero-insignia::after { content: ""; position: absolute; width: 15px; height: 1px; background: #446d59; left: 9px; top: 12px; }
.hero-insignia::after { top: auto; bottom: 12px; left: auto; right: 9px; }
.hero-insignia span { font-size: 13px; position: absolute; right: 13px; bottom: 8px; color: var(--cyan); }
.hero-notes { display: flex; gap: 19px; flex-wrap: wrap; margin-top: 15px; color: #8baaa0; font-size: 11px; }
.hero-notes span { display: inline-flex; gap: 6px; align-items: center; }
.hero-notes svg { width: 15px; height: 15px; fill: none; stroke: var(--lime); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 10px; min-width: 0; padding: 23px; }
.panel-top { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 17px; }
.step-number { direction: ltr; width: 35px; height: 35px; flex: none; display: grid; place-items: center; border: 1px solid #335c43; border-radius: 7px; background: #142a1e; color: var(--lime); font: 700 12px ui-monospace, Consolas, monospace; }
.panel-top h2 { font-size: 16px; font-weight: 720; margin: 0 0 3px; letter-spacing: -.02em; }
.panel-top p { color: var(--muted); margin: 0; font-size: 11px; }
.field-label { display: block; color: #cde1d8; font-size: 12px; font-weight: 650; margin: 12px 0 8px; }
.field-label small { margin-inline-start: 5px; font-size: 10px; color: var(--faint); font-weight: 400; }
.large-textarea, .paste-textarea, .input, .select, .candidate-select {
  width: 100%; color: var(--ink); background: var(--field); border: 1px solid #344c46; border-radius: 7px; outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.large-textarea:hover, .paste-textarea:hover, .input:hover, .select:hover, .candidate-select:hover { border-color: #547e6e; }
.large-textarea:focus, .paste-textarea:focus, .input:focus, .select:focus, .candidate-select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px #a5ff6317; }
.large-textarea::placeholder, .paste-textarea::placeholder, .input::placeholder { color: #647d76; opacity: 1; }
.large-textarea { padding: 15px; resize: vertical; min-height: 183px; height: 242px; font: 12px/2 Tahoma, "Segoe UI", sans-serif; white-space: pre-wrap; }
.field-footer { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin: 7px 0 19px; min-height: 25px; }
.muted { color: var(--muted); font-size: 11px; }
.text-button { padding: 3px 0; background: transparent; border: 0; color: var(--cyan); font-size: 11px; font-weight: 650; text-underline-offset: 3px; text-decoration: underline; }
.text-button:hover { color: #d7fff5; }
.fields-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.input { height: 42px; padding: 9px 10px; font-size: 11px; min-width: 0; }
.input[type="date"], .input[type="time"] { color-scheme: dark; direction: ltr; text-align: left; }
.upload-stack { display: grid; gap: 12px; }
.upload-box { border: 1px dashed #3b5b50; background: #0c191a; padding: 15px; border-radius: 8px; min-height: 104px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; transition: border-color .16s, background .16s; }
.upload-box.secondary { background: #0d151b; border-color: #35494d; }
.upload-box:hover, .upload-box.secondary:hover { border-color: #81c28c; background: #10221c; }
.upload-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 8px; border: 1px solid #315842; background: #183124; }
.file-icon svg { fill: none; stroke: var(--lime); stroke-width: 1.6; width: 19px; height: 19px; stroke-linecap: round; stroke-linejoin: round; }
.secondary .file-icon { border-color: #34535e; background: #152b30; }
.secondary .file-icon svg { stroke: var(--cyan); }
.upload-copy { min-width: 0; }
.upload-copy b { display: block; direction: ltr; text-align: right; font-size: 11px; font-weight: 700; line-height: 1.5; }
.upload-copy small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.upload-btn { display: inline-grid; place-items: center; white-space: nowrap; cursor: pointer; font-size: 11px; font-weight: 700; color: #d3f3e4; background: #1a2b2b; border: 1px solid #46735e; border-radius: 6px; padding: 8px 12px; }
.upload-btn:hover { background: #243d32; border-color: var(--lime); }
.file-loaded { grid-column: 1/-1; font-size: 10px; color: #809e92; word-break: break-word; line-height: 1.5; }
.file-loaded.loaded { color: var(--lime); font-weight: 650; }
.paste-section { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 18px; }
.paste-section summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 650; color: var(--cyan); }
.paste-section summary::-webkit-details-marker { display: none; }
.paste-section summary::before { content: "+"; display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; margin-left: 7px; color: var(--lime); background: #1c3027; }
.paste-section[open] summary { margin-bottom: 13px; }
.paste-section[open] summary::before { content: "−"; }
.paste-textarea { height: 126px; min-height: 90px; resize: vertical; padding: 12px; text-align: left; direction: ltr; font: 11px/1.7 ui-monospace, Consolas, monospace; }
.help-note { font-size: 10px; color: var(--muted); margin-top: 7px; }
.setting-line { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; }
.setting-line label { font-size: 11px; font-weight: 650; display: block; }
.setting-line small { display: block; font-size: 10px; margin-top: 4px; color: var(--muted); }
.select { flex: none; width: 202px; height: 40px; padding: 0 10px; font-size: 11px; }
.hint-card { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; margin-top: 18px; background: #111f21; border: 1px solid #304744; border-radius: 8px; color: #b0c6bd; }
.hint-mark { width: 21px; height: 21px; flex: none; display: grid; place-items: center; border-radius: 5px; border: 1px solid #41715c; color: var(--lime); font: 700 12px ui-monospace, monospace; }
.hint-card b { color: #d7efe0; font-size: 11px; }
.hint-card p { margin: 4px 0 0; font-size: 10px; line-height: 1.9; color: #91a9a3; }
.hint-card a { text-underline-offset: 3px; }
.time-fields { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; }
.time-fields > span { font-size: 11px; font-weight: 700; margin-inline-end: auto; }
.time-fields small { display: block; font-weight: 400; font-size: 10px; color: var(--muted); }
.time-fields label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #afc9bb; }
.time-fields .input { width: 110px; height: 36px; padding: 6px 8px; }

.action-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; padding: 16px 20px; border-radius: 10px; background: #101a1d; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.action-bar::before { content: ""; width: 3px; position: absolute; inset-block: 10px; inset-inline-start: 0; border-radius: 0 2px 2px 0; background: linear-gradient(var(--lime), var(--cyan), var(--violet)); }
.action-description { display: flex; gap: 11px; align-items: center; min-width: 0; }
.inline-circle { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid #3e7452; background: #173324; color: var(--lime); font-weight: 700; }
.action-description b { font-size: 12px; font-weight: 700; display: block; }
.action-description small { color: var(--muted); font-size: 10px; display: block; }
.action-buttons { display: flex; gap: 9px; align-items: center; flex: none; }
.btn { min-height: 41px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 7px; font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { color: #102015; background: var(--lime); border-color: var(--lime); }
.btn-primary:hover:not(:disabled) { background: #bbff8b; border-color: #bbff8b; }
.btn-subtle { color: #d3e8df; background: #1b292d; border-color: #3b5451; }
.btn-subtle:hover { background: #263b3a; border-color: #57836f; }
.btn-outline { color: var(--lime); background: #14271d; border-color: #3e7153; }
.btn-outline:hover { background: #20402c; }
.message { margin: 16px 0 0; padding: 12px 15px; border: 1px solid #805056; background: #301e25; border-radius: 8px; color: #ffafb1; font-size: 12px; }
.message.good { color: var(--lime); background: #173021; border-color: #3c7549; }

.results-section { margin-top: 31px; scroll-margin-top: 98px; }
.results-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; margin-bottom: 16px; }
.results-heading h2 { font-size: 23px; margin: 4px 0 2px; line-height: 1.4; }
.results-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.results-actions { display: flex; gap: 8px; }
.summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.summary-card { background: #101b1e; border: 1px solid var(--line); border-top: 2px solid #4c6a61; border-radius: 8px; padding: 14px 15px; min-width: 0; }
.summary-card.matched { border-top-color: var(--lime); }
.summary-card.mismatch { border-top-color: var(--red); }
.summary-card.review { border-top-color: var(--amber); }
.summary-card.missing { border-top-color: var(--blue); }
.summary-card.extra { border-top-color: var(--violet); }
.summary-card .count { display: block; direction: ltr; text-align: right; margin: 6px 0 2px; font: 750 27px/1.3 ui-monospace, Consolas, monospace; color: #f0fdf5; }
.summary-card.matched .count { color: var(--lime); }
.summary-card.mismatch .count { color: var(--red); }
.summary-card label { color: #b7cbc2; font-size: 11px; display: block; }
.summary-card .subtitle { color: #829c91; font-size: 10px; }
.warning-box { color: #f1d59d; background: #302719; border: 1px solid #65512c; border-radius: 8px; padding: 13px 15px; margin-top: 15px; font-size: 11px; }
.warning-box b { font-size: 12px; }
.warning-box ul { padding-right: 19px; margin: 8px 0 0; line-height: 1.95; }
.table-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 18px; box-shadow: var(--shadow); }
.table-top { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.table-top h3 { margin: 0 0 2px; font-size: 14px; }
.table-top p { margin: 0; color: var(--muted); font-size: 10px; }
.table-hint { font: 600 11px ui-monospace, monospace; color: #9abaad; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
table { text-align: right; border-collapse: collapse; min-width: 850px; width: 100%; }
thead { background: #0d181c; }
th,td { border-top: 1px solid #253934; vertical-align: middle; padding: 13px 15px; font-size: 11px; }
th { white-space: nowrap; font-size: 10px; color: #a2b7ae; font-weight: 650; }
tbody tr:hover { background: #142320; }
.product-name { font-size: 12px; font-weight: 650; color: #e5f4eb; }
.product-sub { display: block; margin-top: 2px; color: #87a79b; font: 10px/1.5 ui-monospace, Consolas, monospace; direction: ltr; text-align: right; }
.qty { font: 700 12px ui-monospace, Consolas, monospace; text-align: center; direction: ltr; white-space: nowrap; }
.status { display: inline-block; white-space: nowrap; font-size: 10px; font-weight: 750; border: 1px solid transparent; border-radius: 5px; padding: 5px 8px; }
.status.matched { color: var(--lime); background: var(--green-bg); border-color: #396c48; }
.status.mismatch { color: var(--red); background: var(--red-bg); border-color: #6d3d43; }
.status.review { color: var(--amber); background: var(--amber-bg); border-color: #655334; }
.status.missing { color: var(--blue); background: var(--blue-bg); border-color: #355578; }
.candidate-box { display: flex; align-items: center; gap: 7px; max-width: 345px; }
.candidate-select { min-width: 155px; width: 100%; max-width: 290px; padding: 7px 8px; font-size: 10px; }
.apply-btn { border: 1px solid #467b57; border-radius: 6px; background: #1e3929; color: var(--lime); padding: 8px 10px; white-space: nowrap; font-weight: 700; font-size: 10px; }
.apply-btn:hover { background: #294d32; }
.dash { color: #738d85; }
.privacy-footnote { margin: 20px 0; color: #8ea79d; font-size: 10px; text-align: center; }
footer { padding: 22px 0 14px; direction: ltr; text-align: center; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .04em; color: #658276; }
footer span { margin: 0 8px; color: #a5ff635c; }

@media (max-width: 1080px) { .page,.header-content { padding-left: 24px; padding-right: 24px; } .workspace { grid-template-columns: 1fr; } .large-textarea { height: 220px; } .summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 680px) {
  .site-header { height: 65px; }
  .page,.header-content { padding-left: 15px; padding-right: 15px; }
  .page { padding-top: 26px; }
  .header-right { gap: 8px; } .header-app { display: none; }
  .brand-mark { height: 36px; width: 36px; font-size: 21px; }
  .brand-name { font-size: 12px; } .brand-sub { font-size: 9px; }
  .header-chip { font-size: 9px; padding: 6px 8px; }
  .hero-insignia { display: none; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 12px; }
  .hero-notes { gap: 7px 13px; font-size: 10px; }
  .panel { padding: 17px 15px; }
  .panel-top { padding-bottom: 13px; margin-bottom: 15px; }
  .fields-3 { grid-template-columns: 1fr; gap: 5px; }
  .large-textarea { height: 225px; }
  .upload-box { padding: 13px 11px; gap: 7px; }
  .upload-main { gap: 8px; }
  .file-icon { width: 34px; height: 34px; }
  .upload-copy b { font-size: 10px; }
  .upload-copy small { font-size: 9px; }
  .upload-btn { font-size: 10px; padding: 7px 8px; }
  .setting-line { flex-direction: column; align-items: stretch; }
  .select { width: 100%; }
  .time-fields > span { width: 100%; }
  .time-fields label { flex: 1; }
  .time-fields .input { width: 100%; }
  .action-bar { flex-direction: column; align-items: stretch; padding: 15px 14px; }
  .action-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .action-description { padding: 0 3px; }
  .results-heading { align-items: flex-start; flex-direction: column; }
  .results-actions { width: 100%; }
  .results-actions button { flex: 1; }
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .summary-card { padding: 12px 13px; } .summary-card .count { font-size: 24px; }
  .table-scroll { overflow: visible; }
  .table-scroll table { display: block; min-width: 0; width: 100%; }
  .table-scroll thead { display: none; }
  .table-scroll tbody { display: block; }
  .table-scroll tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 12px; margin: 10px; border: 1px solid var(--line); border-radius: 7px; padding: 13px; background: #0e1a1c; }
  .table-scroll tbody tr td { display: block; border: 0; padding: 0; font-size: 11px; min-width: 0; white-space: normal; text-align: right; }
  .table-scroll tbody tr td:first-child { grid-column: 1/-1; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
  #resultsBody tr td:last-child { grid-column: 1/-1; }
  .table-scroll tbody tr td:not(:first-child)::before { content: attr(data-label); display: block; color: #91a89f; font-size: 10px; margin-bottom: 3px; font-weight: 450; }
  .table-scroll .qty { text-align: right; font-size: 13px; }
  .table-panel { overflow: visible; }
  .candidate-box { max-width: none; }
  .candidate-select { max-width: none; }
  .table-top { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
@media print {
  :root { color-scheme: light; }
  html,body { color: #111; background: #fff !important; }
  .site-header,.hero,.workspace,.action-bar,.results-actions,.candidate-box,.privacy-footnote,footer,.message { display: none !important; }
  .page { padding: 0; }
  .results-section { display: block !important; margin: 0; }
  .results-heading h2,.table-top h3,.product-name { color: #111; }
  .results-heading p,.table-top p,.table-hint,.summary-card label,.summary-card .subtitle,.product-sub,th,td { color: #333; }
  .summary-card,.table-panel { color: #111; background: #fff; box-shadow: none; border: 1px solid #bbb; }
  .summary-card .count { color: #111 !important; }
  thead { background: #eee; }
  .table-panel { break-inside: auto; }
  .table-scroll { overflow: visible; }
  tbody tr:hover { background: #fff; }
  .status { background: #fff !important; color: #111 !important; border: 1px solid #555; }
  .warning-box { background: #fff; color: #111; border: 1px solid #999; }
}

/* OAuth connection: a restrained panel consistent with the receiving workspace. */
.shopify-connect{padding:18px;border:1px solid #3b6250;background:linear-gradient(135deg,rgba(43,88,66,.22),rgba(7,21,22,.12));border-radius:12px;margin:0 0 18px}
.connect-bar{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.connection-indicator{width:10px;height:10px;flex:0 0 10px;margin-top:6px;border-radius:50%;background:#f4c978;box-shadow:0 0 0 4px #f4c97818}
.connection-indicator.connected{background:#a5ff63;box-shadow:0 0 0 4px #a5ff6328}
.connect-bar strong{display:block;font-size:14px;color:#f2faf5}.connect-bar p{margin:5px 0 0;color:#a2b6ae;font-size:12px;line-height:1.6}
.shopify-connect .field-label{margin-top:10px}.shopify-connect .select{width:100%}
.connect-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.connect-buttons button{min-width:135px}.connect-footnote{margin:0;color:#91a99f;font-size:11px;line-height:1.6}
.manual-fallback{border-top:1px solid #29403b;padding:14px 0;margin-top:10px}.manual-fallback>summary{font-size:12px;color:#a9edcd;cursor:pointer;font-weight:600}.manual-fallback>p{font-size:12px}.manual-fallback .upload-stack{margin-top:12px}
@media(max-width:560px){.shopify-connect{padding:15px}.connect-buttons button{flex:1}}

/* Browser-based Shopify report capture. */
.capture-steps{display:grid;gap:10px;margin:14px 0 17px}
.capture-steps>div{display:flex;align-items:start;gap:10px;background:#0b161a;border:1px solid #2c4a3d;border-radius:8px;padding:11px 12px;color:#c3d7cd;font-size:11px;line-height:1.6}
.capture-steps>div>b{color:var(--lime);font:700 12px/1.5 ui-monospace,Consolas,monospace;flex:none}
.capture-steps strong{color:#d6f3e2}
.capture-status{border:1px solid #406b51;border-radius:7px;background:#10291d;color:#c4fbb1;padding:10px 12px;margin-top:12px;font-size:11px}
.shopify-connect .connect-footnote a{color:var(--cyan)}

/* Receiving exceptions and staff exclusions */
.exclude-bar{display:flex;gap:20px;justify-content:space-between;align-items:center;background:#0f1a1b;border:1px solid #335144;border-radius:8px;padding:12px 14px;margin:15px 0 4px}
.exclude-bar>div{max-width:650px}.exclude-bar strong{display:block;font-size:12px;color:#edf9f0}.exclude-bar small{display:block;color:#96ada3;font-size:11px;line-height:1.6;margin-top:4px}
.exclude-bar label{width:min(250px,45%);margin:0}.exclude-bar input{margin-top:5px}
.summary-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.summary-card.shortage,.status.shortage{border-color:#cc6464}.summary-card.excess,.status.excess{border-color:#d8a253}
.summary-card.shortage{border-top-color:var(--red)}.summary-card.excess{border-top-color:var(--amber)}
.summary-card.shortage .count{color:var(--red)}.summary-card.excess .count{color:var(--amber)}
.status.shortage{color:#ff9b9c;background:var(--red-bg)}.status.excess{color:#f5d189;background:var(--amber-bg)}
.result-alert{margin-top:16px;padding:14px 17px;border:1px solid #6f5050;background:#261a20;color:#ffb0a8;border-radius:8px;font-size:12px;line-height:1.6}
.result-alert strong{font-size:13px;display:block;margin-bottom:4px}.result-alert p{margin:0;color:inherit}.result-alert.review{color:#f1d59d;border-color:#65512c;background:#251f16}
.result-alert.good{color:#b7f8b2;border-color:#3b7048;background:#12221a}.difference-short{color:#ff9b9c;font-weight:750}.difference-over{color:#f5d189;font-weight:750}
@media(max-width:1080px){.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exclude-bar{flex-direction:column;align-items:stretch}.exclude-bar label{width:100%;max-width:none}}
@media print{.result-alert,.exclude-bar{background:white!important;color:#111!important;border-color:#999!important}}