/* views-buyer — member-app buyer screens (home, pools, demand, savings, credit), Invoice X-ray and Account.
   Prefixes: .by- (buyer + account), .xr- (Invoice X-ray). */

/* ---------- shared ---------- */
.by-mb, .xr-mb { margin-bottom: 16px; }
.by-mt, .xr-mt, .by-ac-mt { margin-top: 10px; }
.by-pad, .xr-pad { padding: 4px 18px 16px; }
.by-desk { display: block; }
.by-mob { display: none; }
.by-sec-head, .xr-sec-head { margin: 4px 0 10px; }
.by-sec-head h2, .xr-sec-head h2 { font-size: 16.5px; }
.by-h4 { margin: 2px 0 8px; }
.by-tabbody { margin-top: 14px; }
.by-grp td { background: var(--surface-2); font-weight: 650; font-size: 12.5px; color: var(--text-2); padding-top: 7px !important; padding-bottom: 7px !important; }
@media (max-width: 760px) {
  .by-desk { display: none !important; }
  .by-mob { display: block; }
}

/* ---------- home ---------- */
.by-hello { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.by-hello h1 { font-size: 27px; letter-spacing: -0.02em; }
.by-hello .kicker { margin-bottom: 2px; }
.by-badges { margin-top: 9px; gap: 8px; }
.by-trust { display: inline-flex; align-items: center; gap: 6px; }
.by-hello-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.by-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.by-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) {
  .by-cols { display: flex; flex-direction: column; align-items: stretch; }
  .by-col { display: contents; }
  .by-o1 { order: 1; } .by-o2 { order: 2; } .by-o3 { order: 3; } .by-o4 { order: 4; } .by-o5 { order: 5; } .by-o6 { order: 6; } .by-o7 { order: 7; }
}
@media (max-width: 760px) {
  .by-hello h1 { font-size: 23px; }
  .by-hello-acts { width: 100%; }
  .by-hello-acts .btn { flex: 1; }
}
.by-due { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.by-due.warn { color: var(--warn); font-weight: 600; }
.by-due.bad { color: var(--bad); font-weight: 600; }
.by-clear { display: flex; gap: 12px; align-items: flex-start; padding: 6px 18px 18px; }
.by-clear > .ic { color: var(--good); margin-top: 2px; }
.by-clear b { display: block; }
.by-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .by-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .by-kpis .kpi { padding: 12px 13px; } .by-kpis .kpi-value { font-size: 20px; } }
.by-vatnote { margin: 6px 2px 0; }

.by-xprompt { display: flex; gap: 16px; padding: 18px 20px; background: linear-gradient(135deg, #0b2a22 0%, #0d4a39 60%, #0b6e4f 130%); color: #fff; border-color: transparent; }
.by-xprompt h2 { font-size: 17px; margin-bottom: 4px; }
.by-xprompt p { color: #cfe3da; font-size: 13.5px; margin-bottom: 12px; max-width: 640px; }
.by-xprompt-ico { width: 44px; height: 44px; border-radius: 12px; background: #7fe0b8; color: #0b2a22; display: grid; place-items: center; flex: none; }
.by-xprompt .btn.primary { background: #7fe0b8; border-color: #7fe0b8; color: #0b2a22; }
.by-xprompt .btn.primary:hover { background: #a3ecce; }
.by-xprompt .grow { min-width: 0; }

.by-pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .by-pool-grid { grid-template-columns: minmax(0, 1fr); } }
.by-pool { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.by-pool h3 { font-size: 15px; }
.by-items { line-height: 1.4; }
.by-viab { display: flex; flex-direction: column; gap: 5px; }
.by-when { display: flex; align-items: center; gap: 5px; color: var(--text-2); }
.by-est { background: var(--good-bg); color: var(--text); border-radius: 6px; padding: 5px 9px; }
.by-est b { color: var(--good); }
.by-pool-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.by-pool-foot .brand-text { display: inline-flex; align-items: center; gap: 4px; }

.by-dnb { border-color: var(--good-line); box-shadow: 0 0 0 3px rgba(10, 122, 53, .05), var(--shadow); }
.by-dnb .card-head .ico-box { width: 30px; height: 30px; }
.by-advice { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.by-adv { padding-left: 11px; border-left: 3px solid var(--info-line); display: flex; flex-direction: column; gap: 3px; }
.by-adv.do_not_buy { border-left-color: var(--good); }
.by-adv.buy_less { border-left-color: #d99a1e; }
.by-adv b { font-size: 13.5px; }
.by-adv p { margin: 0; line-height: 1.4; }
.by-adv .chip { flex: none; }
.by-adv-pool { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

/* ---------- pools list ---------- */
.by-pool-table td { vertical-align: top; }
.by-items-line { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-pool-table .sub .chip { margin-top: 3px; }
.by-pool-m { overflow: hidden; }
.by-pool-m-main { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; color: inherit; text-decoration: none !important; }
.by-pool-m-main h3 { font-size: 15px; }
.by-pool-m-foot { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.by-pool-m-foot:empty { display: none; }

/* ---------- demand & stock ---------- */
.by-dm-table td { vertical-align: top; }
.by-dm-item { min-width: 190px; max-width: 235px; }
.by-dm-table th, .by-dm-table td { padding-left: 9px; padding-right: 9px; }
.by-dm-table td.num .sub { white-space: normal; max-width: 150px; margin-left: auto; }
.by-spec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.by-dm-table td.num .chip { margin-top: 4px; }
.by-dm-adv { min-width: 185px; max-width: 235px; }
.by-reason { margin: 4px 0 3px; line-height: 1.35; white-space: normal; }
.by-dm-adv a, .by-dm-advm a { display: inline-flex; align-items: center; gap: 3px; }
.by-dm-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.by-dm-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.by-dm-nums > div { background: var(--surface-2); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.by-dm-nums span { font-size: 11.5px; color: var(--muted); font-weight: 550; }
.by-dm-nums b { font-variant-numeric: tabular-nums; font-size: 14px; }
.by-dm-nums i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.by-dm-nums .chip { align-self: flex-start; margin-top: 3px; font-size: 11px; }
.by-dm-stock { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-2); }
.by-dm-advm { border-top: 1px solid var(--border); padding-top: 9px; }
.by-mob h4 { margin: 0 2px; }

/* ---------- savings ---------- */
.by-sv-table td { vertical-align: top; }
.by-chev { width: 28px; color: var(--muted); }
.by-chev .ic { transition: transform .15s; }
tr.open .by-chev .ic { transform: rotate(180deg); }
.by-sv-detail td { background: var(--surface-2); }
.by-lines { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.by-lines td, .by-lines th { border-bottom-color: var(--border); }
.by-sv-m { border-top: 1px solid var(--border); }
.by-sv-m:first-child { border-top: 0; }
.by-sv-m summary { list-style: none; padding: 12px 16px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.by-sv-m summary::-webkit-details-marker { display: none; }
.by-sv-m[open] summary { background: var(--surface-2); }
.by-sv-m-lines { padding: 8px 16px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.by-method { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }

/* ---------- credit ---------- */
.by-cr-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.by-cr-how > div { display: flex; gap: 10px; }
.by-cr-how > div > .ic { color: var(--brand); margin-top: 2px; }
.by-cr-how p { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
@media (max-width: 640px) { .by-cr-how { grid-template-columns: minmax(0, 1fr); } }
.by-cr-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.by-cr-terms > div { background: var(--good-bg); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; }
.by-cr-terms span { font-size: 12px; color: var(--muted); }
.by-cr-terms b { font-size: 15px; font-variant-numeric: tabular-nums; }
.by-cr-grid { gap: 20px; }
.by-cr-pack { grid-template-columns: minmax(110px, auto) 1fr; font-size: 13px; }
.by-cr-apply form { margin: 0; }
.by-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.by-fs legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; padding: 0; }
.by-fs .choice span { display: block; }

/* ---------- account ---------- */
.by-ac-pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.by-ac-pp-grid h4 { margin-bottom: 7px; }
@media (max-width: 640px) { .by-ac-pp-grid { grid-template-columns: minmax(0, 1fr); } }
.by-ac-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.by-ac-list .ic { color: var(--brand); }
.by-ac-big { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.by-ac-big span { font-size: 13px; font-weight: 500; color: var(--muted); }
.by-ac-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .by-ac-ladder { grid-template-columns: minmax(0, 1fr); } }
.by-ac-rung { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.by-ac-rung.current { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.by-ac-rung.passed { opacity: .75; }
.by-ac-rung-big { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.by-ac-rung-big span { font-size: 12.5px; font-weight: 550; color: var(--muted); letter-spacing: 0; }
.by-ac-rung .small { display: flex; align-items: center; gap: 5px; }
.by-ac-inline { margin-top: 8px; }
.by-ac-doc { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.by-ac-doc:first-child { border-top: 0; }
.by-ac-doc .btn { align-self: flex-start; margin-top: 3px; }
.by-ac-subh { padding: 12px 16px 4px; border-top: 1px solid var(--border); }
.by-ac-score { font-size: 46px; font-weight: 780; letter-spacing: -0.03em; line-height: 1; min-width: 70px; font-variant-numeric: tabular-nums; }
.by-ac-score.good { color: var(--good); } .by-ac-score.ok { color: var(--info); } .by-ac-score.weak { color: var(--warn); } .by-ac-score.new { color: var(--faint); }
.by-ac-trust p { margin: 0; }
.by-ac-factors { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.by-ac-factors li { display: flex; flex-direction: column; gap: 4px; }
.by-ac-factors .progress { height: 6px; }
.by-ac-switch { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; cursor: pointer; position: relative; }
.by-ac-switch input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.by-ac-switch-ui { width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; margin-top: 1px; }
.by-ac-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.by-ac-switch input:checked + .by-ac-switch-ui { background: var(--brand); }
.by-ac-switch input:checked + .by-ac-switch-ui::after { transform: translateX(18px); }
.by-ac-switch input:focus-visible + .by-ac-switch-ui { outline: 2px solid var(--brand); outline-offset: 2px; }
.by-ac-switch b, .by-ac-switch .small { display: block; }
.by-ac-switch.disabled { cursor: not-allowed; }
.by-ac-switch.disabled .by-ac-switch-ui { opacity: .55; }
.by-ac-file { padding-top: 6px; }

/* ================================================================ Invoice X-ray ================================================================ */
.xr-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 30px; margin-bottom: 18px; border-radius: 16px; color: #fff;
  background: radial-gradient(700px 300px at 95% -20%, rgba(127, 224, 184, .25), transparent 60%), linear-gradient(150deg, #0b2a22 0%, #0d3a2e 55%, #0b6e4f 140%); }
.xr-hero .kicker { color: #7fe0b8; }
.xr-hero h1 { font-size: 30px; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 10px; }
.xr-hero-text p { color: #cfe3da; font-size: 14.5px; max-width: 560px; margin-bottom: 18px; }
.xr-hero .btn.primary { background: #7fe0b8; border-color: #7fe0b8; color: #0b2a22; }
.xr-hero .btn.primary:hover { background: #a3ecce; }
.xr-btn-light { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #fff; }
.xr-btn-light:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); }
.xr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xr-steps li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; padding: 12px 14px; }
.xr-steps b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.xr-steps p { color: #b9d3c8; font-size: 12.5px; margin: 2px 0 0; }
.xr-step-n { width: 26px; height: 26px; border-radius: 50%; background: #7fe0b8; color: #0b2a22; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
@media (max-width: 900px) { .xr-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 18px; } .xr-hero h1 { font-size: 25px; } }
@media (max-width: 760px) { .xr-hero { margin: -4px 0 16px; } .xr-hero .row .btn { flex: 1; } .xr-steps li { padding: 10px 12px; } }

.xr-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .xr-home-grid { grid-template-columns: minmax(0, 1fr); } }
.xr-drop { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 26px 18px; border: 2px dashed var(--brand-line); border-radius: 12px; background: var(--brand-soft); cursor: pointer; transition: background .15s, border-color .15s; }
.xr-drop:hover, .xr-drop.over { background: #d6ece2; border-color: var(--brand); }
.xr-drop.busy { opacity: .6; pointer-events: none; }
.xr-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.xr-drop-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.xr-reading { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--info-line); background: var(--info-bg); border-radius: 10px; }
.xr-reading-doc { width: 38px; height: 48px; border-radius: 4px; background: #fff; border: 1px solid var(--border-strong); position: relative; overflow: hidden; padding: 7px 6px; display: flex; flex-direction: column; gap: 5px; flex: none; }
.xr-reading-doc i { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); }
.xr-reading-beam { position: absolute; left: 0; right: 0; height: 12px; top: -12px; background: linear-gradient(180deg, transparent, rgba(25, 193, 138, .55)); border-bottom: 2px solid #19c18a; animation: xr-pulse-beam 1.2s ease-in-out infinite; }
@keyframes xr-pulse-beam { from { top: -12px; } to { top: 100%; } }

.xr-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.xr-sample { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.xr-sample.rel { border-color: var(--brand-line); }
.xr-sample-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.xr-sample-meta > b { line-height: 1.3; }
.xr-sample-meta a { display: inline-flex; gap: 4px; align-items: center; margin-top: 2px; }
.xr-mini { background: #fffdf8; border: 1px solid #e7e2d6; border-radius: 6px; padding: 9px 10px; box-shadow: 0 1px 0 #efe9db, 0 2px 0 #f6f1e6; font-family: Arial, Helvetica, sans-serif; }
.xr-mini-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; border-bottom: 1.5px solid #222; padding-bottom: 5px; margin-bottom: 6px; }
.xr-mini-head b { font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xr-mini-head span { font-size: 8px; font-weight: 700; color: #555; white-space: nowrap; }
.xr-mini-lines { display: flex; flex-direction: column; gap: 4px; }
.xr-mini-lines i { display: block; height: 4px; border-radius: 2px; background: #e4e0d5; }
.xr-mini-total { text-align: right; font-size: 10px; font-weight: 700; margin-top: 6px; border-top: 1px solid #ccc; padding-top: 4px; font-variant-numeric: tabular-nums; }
.xr-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr-hist-chips { margin-top: 5px; }
.xr-bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; color: var(--text-2); }
.xr-page .card.soft h3 { display: flex; align-items: center; gap: 6px; }

/* manual entry */
.xr-mlines { display: flex; flex-direction: column; gap: 6px; }
.xr-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 80px 74px 110px 92px 34px; gap: 6px; align-items: center; }
.xr-mrow-head { font-size: 11.5px; font-weight: 600; color: var(--muted); }
#mx-rows { display: flex; flex-direction: column; gap: 6px; }
.xr-mamt { text-align: right; color: var(--text-2); }
.xr-mlines > .btn { align-self: flex-start; }
.xr-mtotal { border-top: 1px solid var(--border); padding-top: 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .xr-mrow-head { display: none; }
  .xr-mrow { grid-template-columns: 1fr 1fr 1fr 34px; grid-template-areas: 'd d d x' 'q u p p' 'a a a a'; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
  .xr-mrow [data-f=desc] { grid-area: d; } .xr-mrow [data-f=qty] { grid-area: q; } .xr-mrow [data-f=uom] { grid-area: u; } .xr-mrow [data-f=unitPrice] { grid-area: p; }
  .xr-mrow .xr-mamt { grid-area: a; } .xr-mrow [data-rm] { grid-area: x; }
}

/* ---------- X-ray detail ---------- */
.xr-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 18px; }
@media (max-width: 980px) { .xr-split { grid-template-columns: minmax(0, 1fr); } }
.xr-paper-col { min-width: 0; }
.xr-paper { position: relative; overflow: hidden; background: #fffefb; color: #1b1b1b; border: 1px solid #e6e1d4; border-radius: 4px; padding: 26px 26px 20px;
  box-shadow: 0 1px 0 #ece6d8, 0 2px 0 #f5f0e5, 0 14px 30px rgba(40, 32, 10, .10); font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.4; }
.xr-p-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 12px; border-bottom: 2px solid #1b1b1b; }
.xr-p-from { min-width: 0; }
.xr-p-sup { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; margin-bottom: 4px; }
.xr-p-addr { color: #555; font-size: 11px; }
.xr-p-title { text-align: right; flex: none; }
.xr-p-title > div { font-size: 16px; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; }
.xr-p-meta { display: grid; grid-template-columns: auto auto; gap: 1px 10px; margin: 0; font-size: 11px; text-align: right; }
.xr-p-meta dt { color: #666; } .xr-p-meta dd { margin: 0; font-weight: 700; font-family: var(--mono); font-size: 10.5px; }
.xr-p-bill { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; font-size: 11.5px; }
.xr-p-bill span { color: #666; text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.xr-p-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.xr-p-table th { background: #1b1b1b; color: #fff; font-weight: 700; text-align: left; padding: 6px 7px; font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; }
.xr-p-table td { padding: 7px 7px; border-bottom: 1px solid #ddd8cb; vertical-align: top; }
.xr-p-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xr-p-table .c-n { width: 22px; color: #777; }
.xr-p-table .c-d { font-weight: 600; text-transform: uppercase; font-size: 11px; position: relative; }
.xr-p-totals { margin: 10px 0 0 auto; width: min(240px, 100%); display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.xr-p-totals > div { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.xr-p-totals > div span { color: #555; }
.xr-p-totals .grand { border-top: 2px solid #1b1b1b; padding-top: 5px; margin-top: 3px; font-size: 13.5px; }
.xr-p-totals .grand span { color: #1b1b1b; font-weight: 700; }
.xr-p-foot { margin-top: 18px; padding-top: 8px; border-top: 1px dashed #ccc6b6; color: #888; font-size: 10px; text-align: center; }
.xr-caption { margin: 8px 2px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.xr-legend { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.xr-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.xr-legend i:first-child { margin-left: 0; }
.xr-legend i.over { background: rgba(180, 35, 24, .35); } .xr-legend i.ok { background: rgba(10, 122, 53, .3); } .xr-legend i.deliv { background: rgba(201, 133, 0, .4); } .xr-legend i.unm { background: #d6d3c8; }

/* paper row highlights (static state) */
.xr-r td { transition: background .3s; }
.xr-r.xr-over td { background: rgba(180, 35, 24, .075); }
.xr-r.xr-over td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.xr-r.xr-ok td { background: rgba(10, 122, 53, .05); }
.xr-r.xr-ok td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.xr-r.xr-deliv td { background: rgba(201, 133, 0, .09); }
.xr-r.xr-deliv td:first-child { box-shadow: inset 3px 0 0 #c98500; }
.xr-r.xr-unm td:first-child { box-shadow: inset 3px 0 0 #b8b4a6; }
.xr-flag { display: table; margin-top: 3px; font-family: var(--sans); text-transform: none; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 4px; line-height: 17px; letter-spacing: 0; }
.xr-over .xr-flag { background: var(--bad); color: #fff; }
.xr-ok .xr-flag { background: var(--good-bg); color: var(--good); }
.xr-deliv .xr-flag { background: #fdecc8; color: var(--warn); }
.xr-unm .xr-flag, .xr-nob .xr-flag { background: #eceae2; color: #5c5a52; }

/* one-time scan animation */
.xr-beam { position: absolute; left: 0; right: 0; height: 90px; top: -90px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 193, 138, 0) 0%, rgba(25, 193, 138, .10) 60%, rgba(25, 193, 138, .38) 100%); border-bottom: 2px solid #19c18a; box-shadow: 0 8px 22px rgba(25, 193, 138, .45);
  animation: xr-beam 2.2s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes xr-beam { 0% { top: -90px; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.xr-ticker { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 4; display: inline-flex; align-items: center; gap: 7px; background: #0b2a22; color: #fff; font: 600 11.5px/1 var(--sans); padding: 7px 10px; border-radius: 999px; box-shadow: var(--shadow-md); transition: opacity .3s; }
.xr-ticker .spinner.sm { border-color: rgba(255, 255, 255, .3); border-top-color: #7fe0b8; }
.xr-ticker.done { opacity: 0; }
.xr-anim .xr-r td { animation: xr-row-in .55s ease both; animation-delay: var(--d); }
.xr-anim .xr-r .xr-flag { animation: xr-flag-in .35s ease both; animation-delay: calc(var(--d) + 120ms); }
@keyframes xr-row-in { from { background: transparent; box-shadow: none; } }
@keyframes xr-flag-in { from { opacity: 0; transform: translateY(3px); } }
.xr-anim .xr-reveal { animation: xr-fade-up .5s ease both; animation-delay: 2.05s; }
.xr-anim .xr-results { animation: xr-fade-up .5s ease both; animation-delay: 1.2s; }
.xr-anim .xr-rr, .xr-anim .xr-rm { animation: xr-fade-in .4s ease both; animation-delay: calc(var(--d) + 900ms); }
@keyframes xr-fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes xr-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xr-anim * { animation: none !important; } .xr-beam, .xr-ticker { display: none; } }

/* summary */
.xr-summary { border-color: var(--bad-line); }
.xr-summary .hero-num { font-size: 46px; margin: 2px 0; }
.xr-lead { font-size: 15px; margin: 0; color: var(--text-2); }
.xr-facts { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 6px; }
.xr-facts > div { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; }
.xr-facts span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.xr-facts span .ic { color: var(--muted); }
.xr-facts b { font-variant-numeric: tabular-nums; }
.xr-facts i { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--muted); }
.xr-pools { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.xr-pools h4 { margin-bottom: 2px; }
.xr-pool { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--action-line); background: var(--action-bg); border-radius: 9px; color: var(--text); text-decoration: none !important; font-size: 13px; }
.xr-pool > .ic:first-child { color: var(--action); }
.xr-pool:hover { border-color: var(--action); }

/* results */
.xr-results { margin-bottom: 18px; }
.xr-res-table td { vertical-align: top; }
.xr-raw { min-width: 170px; max-width: 230px; font-size: 12px; color: var(--text-2); }
.xr-raw .mono { font-size: 11.5px; overflow-wrap: anywhere; }
.xr-item { min-width: 180px; max-width: 260px; }
.xr-spec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.xr-rr.xr-over td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.xr-rr.xr-deliv td:first-child { box-shadow: inset 3px 0 0 #c98500; }
.xr-rr.xr-ok td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.xr-rr.xr-unm td:first-child, .xr-rr.xr-nob td:first-child { box-shadow: inset 3px 0 0 #c9c6ba; }
.xr-meter { display: inline-block; width: 38px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.xr-meter i { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.xr-meter.mid i { background: #c98500; } .xr-meter.lo i { background: var(--bad); }
.xr-desk { display: block; }
.xr-mob { display: none; }
.xr-rm { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; border-left: 3px solid transparent; }
.xr-rm:first-child { border-top: 0; }
.xr-rm.xr-over { border-left-color: var(--bad); } .xr-rm.xr-deliv { border-left-color: #c98500; } .xr-rm.xr-ok { border-left-color: var(--good); } .xr-rm.xr-unm, .xr-rm.xr-nob { border-left-color: #c9c6ba; }
.xr-rm-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.xr-rm-nums > div { display: flex; flex-direction: column; min-width: 0; }
.xr-rm-nums span { font-size: 11px; color: var(--muted); }
.xr-rm-nums b { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .xr-desk { display: none; }
  .xr-mob { display: block; }
  .xr-paper { padding: 16px 14px 14px; font-size: 11px; }
  .xr-p-head { flex-direction: column; gap: 10px; }
  .xr-p-title { text-align: left; }
  .xr-p-meta { text-align: left; grid-template-columns: auto 1fr; }
  .xr-p-sup { font-size: 13.5px; }
  .xr-p-table { font-size: 10.5px; }
  .xr-p-table .c-n, .xr-p-table .c-u { display: none; }
  .xr-p-table td, .xr-p-table th { padding: 6px 4px; }
  .xr-p-table .c-d { font-size: 10px; }
  .xr-summary .hero-num { font-size: 40px; }
  .xr-rm-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* confirm */
.xr-confirm { scroll-margin-top: 80px; }
.xr-cf-head, .xr-cf-row { display: grid; grid-template-columns: 30px minmax(0, 1.2fr) minmax(0, 1fr) 190px; gap: 12px; align-items: center; padding: 0 18px; }
.xr-cf-head { font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.xr-cf-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.xr-cf-row .field label { display: none; }
.xr-cf-raw .mono { overflow-wrap: anywhere; }
.xr-cf-inc { justify-content: center; }
.xr-cf-row:has([data-inc]:not(:checked)) .xr-cf-raw { opacity: .55; }
.xr-cf-foot { flex-wrap: wrap; gap: 12px; }
.xr-cf-foot .check { flex: 1; min-width: 260px; }
@media (max-width: 760px) {
  .xr-cf-head { display: none; }
  .xr-cf-row { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: 'i r' '. s' '. q'; gap: 8px 10px; padding: 12px 16px; }
  .xr-cf-inc { grid-area: i; align-self: start; } .xr-cf-raw { grid-area: r; }
  .xr-cf-sku { grid-area: s; } .xr-cf-qty { grid-area: q; }
  .xr-cf-row .field label { display: block; }
  .xr-cf-foot .btn { width: 100%; }
}
.xr-detail .page-head .actions { align-self: center; }

/* home: untracked advice, empty chart */
.by-untracked { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.by-untracked p { margin-bottom: 6px; }
.by-untracked-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.by-untracked-list li { display: flex; justify-content: space-between; gap: 10px; }
.by-untracked-list li span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
.by-nochart { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); padding: 6px 0; }
.by-nochart b { display: block; color: var(--text); }
.by-sv-po { min-width: 260px; }
.by-bridge { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.by-bridge dt { color: var(--text-2); }
.by-bridge dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.by-bridge .tot { border-top: 1px solid var(--border-strong); padding-top: 8px; font-weight: 700; color: var(--text); }
.by-bridge dd.tot { font-size: 16px; color: var(--good); }
.by-openpool { display: block !important; margin-top: 2px; }
.by-pool-table .by-viab { min-width: 200px; }
.by-viab .row span { white-space: nowrap; }
.xr-rm .grow { min-width: 0; }
.xr-rm .xr-spec { white-space: normal; max-width: none; }
.xr-rm .right { flex: none; }
.by-bridge { column-gap: 0; }
.by-bridge dd { padding-left: 16px; }
@media (max-width: 760px) {
  .xr-hero-text p { font-size: 13.5px; }
  .xr-steps { flex-direction: row; gap: 6px; }
  .xr-steps li { flex: 1; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
  .xr-steps p, .xr-steps b .ic { display: none; }
  .xr-steps b { font-size: 12.5px; line-height: 1.25; }
  .xr-samples { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .xr-sample { flex: 0 0 78%; scroll-snap-align: start; }
  .xr-sec-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.by-sv-m[open] .by-sv-more .ic { transform: rotate(180deg); }
.by-ac-score.new { font-size: 26px; font-weight: 700; padding-top: 6px; }
.by-ac-doccol { min-width: 230px; }