/* Tamra site v2 — the Inventory module page (scripts/landing/pages/modules/inventory.html).
   Its two mock-ups are drawn from the 1.71.0 code: Inventory → Valuation and its Health check
   (src/modules/inventory/views/Valuation.jsx, StockHealth.jsx, shared.jsx), the Revalue dialog
   (src/modules/products/RevalueModal.jsx) and the internal transfer editor (views/Transfers.jsx) — their labels,
   the Quiet colours and the inventory module's own hard-coded hexes. Every figure in them is an example. */

/* ══ Inventory → Valuation, Health check tab (vignettes/inventory-main.html) ══════════════════════════════════════ */
.vg-ivt.app{isolation:isolate}   /* the dialog's layer stays inside the picture, under the tour's spotlight */
.vg-ivt .iv-page{padding:16px 26px 0}
.vg-ivt .iv-sw{display:inline-grid}
.vg-ivt .iv-sw>*{grid-area:1/1}
.vg-ivt .r.iv-sw{display:grid;justify-items:end}
.vg-ivt .r{text-align:right}
.vg-ivt code{font:400 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;color:#626976}

/* PageHeader + the two views of one page */
.vg-ivt .iv-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.vg-ivt .iv-h1{font:800 24px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ivt .iv-sub{display:grid;font-size:12px;color:#626976;margin-top:4px}
.vg-ivt .iv-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.04);
  color:#0F1A2B;font:700 13px/1.2 "Inter",sans-serif;white-space:nowrap}
.vg-ivt .iv-btn .ic{width:14px;height:14px}
.vg-ivt .iv-seg{display:inline-flex;gap:4px;padding:3px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02);margin-bottom:14px}
.vg-ivt .iv-seg span{padding:7px 14px;border-radius:8px;font:700 12.5px/1.2 "Inter",sans-serif;color:#444D5A;transition:background .35s ease,color .35s ease}
.vg-ivt .iv-seg .sg-hc,.vg-ivt[data-state=val] .iv-seg .sg-val,.vg-ivt[data-state=how] .iv-seg .sg-val{background:#0F1A2B;color:#fff}
.vg-ivt[data-state=val] .iv-seg .sg-hc,.vg-ivt[data-state=how] .iv-seg .sg-hc{background:transparent;color:#444D5A}
.vg-ivt .iv-panes{display:grid}
.vg-ivt .iv-pane{grid-area:1/1;min-width:0}
.vg-ivt .iv-info{display:flex;width:max-content;align-items:center;gap:6px;color:#0EA5E9;font:600 11px/1.3 "Inter",sans-serif;margin-bottom:14px}
.vg-ivt .iv-info .ic{width:13px;height:13px}

/* ── the Valuation tab ── */
.vg-ivt .iv-p-val .iv-info{margin-bottom:0}
.vg-ivt .iv-how{max-height:0;opacity:0;overflow:hidden;margin-bottom:14px;transition:max-height .6s ease,opacity .45s ease}
.vg-ivt .iv-how-in{margin-top:10px;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);font-size:12px;line-height:1.65;color:#444D5A}
.vg-ivt .iv-how-in p+p{margin-top:9px}
.vg-ivt .iv-how-in p.hw-m+p.hw-m{margin-top:6px}
.vg-ivt .iv-how-in b{color:#0F1A2B}
.vg-ivt .iv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.vg-ivt .iv-kpi{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#F1F4F8;border:1px solid rgba(0,0,0,.06);min-width:0}
.vg-ivt .iv-kpi>i{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 10.2%,transparent)}
.vg-ivt .iv-kpi>i .ic{width:18px;height:18px}
.vg-ivt .iv-kpi small{display:block;font:700 10px/1.2 "Inter",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#626976;margin-bottom:3px;white-space:nowrap}
.vg-ivt .iv-kpi b{display:block;font:800 20px/1.1 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ivt .iv-kpi em{display:block;font-size:11px;color:#626976;margin-top:2px}
.vg-ivt .iv-search{position:relative;padding:12px 14px 12px 40px;margin-bottom:14px;border-radius:10px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);font-size:13px;line-height:1.3;color:#8892A4}
.vg-ivt .iv-search .ic{position:absolute;left:14px;top:50%;margin-top:-8px;color:#626976}
.vg-ivt .iv-vt{border-radius:12px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);overflow:hidden}
.vg-ivt .vt-r{display:grid;grid-template-columns:2.75fr 1.18fr 1.11fr 1.46fr 1.28fr 1.42fr 1.14fr 1.28fr 1.42fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.03);font-size:12px;color:#444D5A}
.vg-ivt .vt-r>*{padding:12px 14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-ivt .vt-r>b{color:#0F1A2B}
.vg-ivt .vt-r .m{font-size:11px}
.vg-ivt .vt-r .tv{color:#22D3EE}
.vg-ivt .vt-r .in{color:#10B981}
.vg-ivt .vt-r .out{color:#F43F5E}
.vg-ivt .vt-r .mv{font-size:11px;color:#626976}
.vg-ivt .vt-h,.vg-ivt .p1-h,.vg-ivt .p2-h{background:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.06);font:700 10px/1.2 "Inter",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#626976}
.vg-ivt .vt-h>*,.vg-ivt .p1-h>*,.vg-ivt .p2-h>*{padding-top:10px;padding-bottom:10px}

/* ── the Health check tab ── */
.vg-ivt .iv-chk{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:12px;color:#626976}
.vg-ivt .iv-ca{padding:8px 13px;font-size:12px}
.vg-ivt .iv-ca .ic{width:13px;height:13px}
.vg-ivt .iv-ca .ca-busy{opacity:0}
.vg-ivt .iv-col{overflow:hidden;max-height:var(--mh)}
.vg-ivt .iv-done-in{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:14px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02);font-size:12px;color:#444D5A}
.vg-ivt .iv-done-in .ic{width:14px;height:14px}
.vg-ivt .iv-done-in .ok{color:#1E8E5A}
.vg-ivt .iv-done-in .x{color:#626976}
.vg-ivt .dn-t{display:grid;flex:1;min-width:0}
.vg-ivt .iv-open{display:inline-flex;align-items:center;gap:4px;color:#2563EB;font:600 12px/1.3 "Inter",sans-serif;white-space:nowrap}
.vg-ivt .iv-open .ic{width:12px;height:12px}
.vg-ivt .iv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.vg-ivt .iv-tile{padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02)}
.vg-ivt .iv-tile small{display:block;font:700 10px/1.2 "Inter",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#626976;margin-bottom:6px}
.vg-ivt .iv-tile b{display:inline-flex;align-items:center;gap:5px;font:600 12px/1.45 "Inter",sans-serif}
.vg-ivt .iv-tile .ic,.vg-ivt .okw .ic,.vg-ivt .ok1-in .ic{width:13px;height:13px}
.vg-ivt .iv-tile .ok,.vg-ivt .okw,.vg-ivt .ok1-in{color:#1E8E5A}
.vg-ivt .iv-tile .wn{color:#9A5B00}
.vg-ivt .iv-sc{border-radius:12px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);overflow:hidden;margin-bottom:16px}
.vg-ivt .sc-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.04)}
.vg-ivt .sc-h b{font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ivt .sc-a{font-size:11px;color:#626976}
.vg-ivt .sc-bal{font-size:12px;color:#444D5A}
.vg-ivt .lk{display:block;font:700 12px/1.45 "Inter",sans-serif;color:#0F1A2B}
.vg-ivt .p1-r{display:grid;grid-template-columns:2.23fr .92fr 1.42fr 1.57fr .98fr 1.07fr 1.42fr 2.29fr 1.16fr;align-items:start;border-bottom:1px solid rgba(0,0,0,.04);font-size:12px;line-height:1.45;color:#444D5A}
.vg-ivt .p1-r>*{padding:12px 14px;min-width:0}
.vg-ivt .p1-r code{display:block;font-size:10.5px;margin-top:2px}
.vg-ivt .p1-r .q{font-weight:600;color:#0F1A2B}
.vg-ivt .p1-r .fl{font:600 11.5px/1.45 "Inter",sans-serif;color:#9A5B00;white-space:nowrap}
.vg-ivt .iv-act{display:inline-flex;align-items:center;padding:6px 11px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.04);color:#0F1A2B;font:700 12px/1.2 "Inter",sans-serif;white-space:nowrap}
.vg-ivt .p1-r .iv-act{margin:-3px 0}
.vg-ivt .ok1-in{display:flex;align-items:center;gap:5px;padding:16px;font:600 12px/1.45 "Inter",sans-serif}
.vg-ivt .note2-in{padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.04);font-size:12px;color:#444D5A}
.vg-ivt .p2-r{display:grid;grid-template-columns:4.4fr 2.05fr 2.05fr 2.19fr 2.35fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.04);font-size:12px;line-height:1.45;color:#444D5A}
.vg-ivt .p2-r>*{padding:12px 14px;min-width:0}
.vg-ivt .p2-r .df{font-weight:700;color:#9A5B00}
.vg-ivt .p2-r .nd{color:#626976}
.vg-ivt .p2-r .iv-act{margin:-4px 0}
.vg-ivt .p2-r .vl>span{padding:1px 5px;margin:-1px -5px;border-radius:5px}
.vg-ivt .okw{display:inline-flex;align-items:center;gap:5px;font:600 12px/1.45 "Inter",sans-serif;transform-origin:70% 50%}
.vg-ivt .p2-f{padding:10px 14px;font-size:11px;color:#626976}
.vg-ivt .iv-sc3 .ok1-in{border-bottom:1px solid rgba(0,0,0,.04)}
.vg-ivt .p3-x{display:flex;align-items:center;gap:6px;padding:10px 14px;font:600 12px/1.45 "Inter",sans-serif;color:#444D5A}
.vg-ivt .p3-x .ic{width:14px;height:14px}

/* ── the Revalue dialog, opened from the check (480 wide over a .65 veil, as the app draws it) ── */
.vg-ivt .iv-modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s}
.vg-ivt[data-state=revalue] .iv-modal{opacity:1;visibility:visible}
.vg-ivt .iv-dlg{width:480px;padding:22px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);transform:translateY(12px) scale(.985);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.vg-ivt[data-state=revalue] .iv-dlg{transform:none}
.vg-ivt .dl-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.vg-ivt .dl-h span{display:flex;align-items:center;gap:8px;font:800 16px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ivt .dl-h .x{color:#626976}
.vg-ivt .dl-s{font-size:12px;color:#626976;margin-bottom:16px}
.vg-ivt .dl-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.vg-ivt .dl-facts div{padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06)}
.vg-ivt .dl-facts small,.vg-ivt .dl-l{display:block;font:700 10px/1.2 "Inter",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#626976;margin-bottom:6px}
.vg-ivt .dl-facts b{font:700 15px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-ivt .dl-facts em{font:600 10px/1 "Inter",sans-serif;color:#626976}
.vg-ivt .dl-in{display:block;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);font-size:13px;line-height:1.3;color:#0F1A2B}
.vg-ivt .dl-in.ph{color:#8892A4;margin-bottom:14px}
.vg-ivt .dl-hint{font-size:11px;color:#626976;margin:6px 0 14px}
.vg-ivt .dl-prev{padding:10px 12px;margin-bottom:14px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);font-size:12px;line-height:1.6;color:#444D5A}
.vg-ivt .dl-prev b{color:#0F1A2B}
.vg-ivt .dl-prev span{display:block;font-size:11px;color:#626976;margin-top:4px}
.vg-ivt .dl-info{display:flex;width:max-content;align-items:center;gap:6px;margin-bottom:16px;color:#2563EB;font:600 11px/1.3 "Inter",sans-serif}
.vg-ivt .dl-info .ic{width:13px;height:13px}
.vg-ivt .dl-b{display:flex;justify-content:flex-end;gap:8px}
.vg-ivt .dl-c{padding:9px 16px;border-radius:10px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);color:#444D5A;font:600 12px/1.2 "Inter",sans-serif}
.vg-ivt .dl-go{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:10px;background:#0F1A2B;color:#fff;font:700 12px/1.2 "Plus Jakarta Sans",sans-serif}
.vg-ivt .dl-go .ic{width:13px;height:13px}

/* ── the tour's states (data-state on the mock-up, set by the chapter on screen; none = the hero's resting state:
      the Sukkari dates just aligned) ──
      val, how  the Valuation tab (how: its "How is inventory value calculated?" note open)
      check     the check as it first came back: two products to look at, 1141 a 720.00 difference
      revalue   the resting state with Revalue open on the carton dividers
      clear     after the revaluation: every step all clear
   class keys: .x-val/.x-hc belong to one tab; .s-chk / .s-aln / .s-clr show only in check / resting / clear;
   .n-chk / .n-clr show everywhere but check / clear. */
.vg-ivt .x-val,.vg-ivt .x-hc,.vg-ivt .iv-pane,.vg-ivt .s-chk,.vg-ivt .s-aln,.vg-ivt .s-clr,.vg-ivt .n-chk,.vg-ivt .n-clr{transition:opacity .45s ease,visibility .45s}
.vg-ivt .iv-col{transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .45s ease,visibility .45s}
.vg-ivt .x-val,.vg-ivt .iv-p-val,.vg-ivt .s-chk,.vg-ivt .s-clr{opacity:0;visibility:hidden}
.vg-ivt .iv-col.s-chk,.vg-ivt .iv-col.s-clr{max-height:0}
.vg-ivt[data-state=val] .x-val,.vg-ivt[data-state=how] .x-val,.vg-ivt[data-state=val] .iv-p-val,.vg-ivt[data-state=how] .iv-p-val{opacity:1;visibility:visible}
.vg-ivt[data-state=val] .x-hc,.vg-ivt[data-state=how] .x-hc,.vg-ivt[data-state=val] .iv-p-hc,.vg-ivt[data-state=how] .iv-p-hc{opacity:0;visibility:hidden}
.vg-ivt[data-state=how] .iv-how{max-height:340px;opacity:1}
.vg-ivt[data-state=check] .s-chk{opacity:1;visibility:visible}
.vg-ivt[data-state=check] .iv-col.s-chk{max-height:var(--mh)}
.vg-ivt[data-state=check] .s-aln,.vg-ivt[data-state=check] .n-chk{opacity:0;visibility:hidden}
.vg-ivt[data-state=check] .iv-col.n-chk{max-height:0}
.vg-ivt[data-state=clear] .s-clr{opacity:1;visibility:visible}
.vg-ivt[data-state=clear] .iv-col.s-clr{max-height:var(--mh)}
.vg-ivt[data-state=clear] .s-aln,.vg-ivt[data-state=clear] .n-clr{opacity:0;visibility:hidden}
.vg-ivt[data-state=clear] .iv-col.n-clr{max-height:0}

/* ── the hero plays the fix once (only with the site script running): the check as it came back, Align pressed on the
      Sukkari dates, the banner, the check runs again — and the stock account matches with no entry posted ── */
.motion .m-shot:not(.in) .vg-ivt .s-chk{opacity:1;visibility:visible}
.motion .m-shot:not(.in) .vg-ivt .iv-col.s-chk{max-height:var(--mh)}
.motion .m-shot:not(.in) .vg-ivt .s-aln,.motion .m-shot:not(.in) .vg-ivt .n-chk{opacity:0;visibility:hidden}
.motion .m-shot:not(.in) .vg-ivt .iv-col.n-chk{max-height:0}
.motion .m-shot.in .vg-ivt .iv-align{animation:ivPress .7s ease .45s both}
.motion .m-shot.in .vg-ivt .iv-done{animation:ivColIn .55s cubic-bezier(.2,.7,.2,1) 1.05s both}
.motion .m-shot.in .vg-ivt .iv-done .s-aln{animation:ivIn .4s ease 1.15s both}
.motion .m-shot.in .vg-ivt .ca-idle{animation:ivIdle 1s linear 1.1s both}
.motion .m-shot.in .vg-ivt .ca-busy{animation:ivBusy 1s linear 1.1s both}
.motion .m-shot.in .vg-ivt .iv-ca .ic{animation:ivSpin .95s linear 1.1s 1}
.motion .m-shot.in .vg-ivt .iv-r-suk,.motion .m-shot.in .vg-ivt .iv-note2{animation:ivColOut .55s cubic-bezier(.4,0,.2,1) 2.05s both}
.motion .m-shot.in .vg-ivt .t1 .s-chk{animation:ivOut .3s ease 2.15s both}
.motion .m-shot.in .vg-ivt .t1 .s-aln{animation:ivIn .35s ease 2.3s both}
.motion .m-shot.in .vg-ivt .p2-1141 .s-chk{animation:ivOut .3s ease 2.35s both}
.motion .m-shot.in .vg-ivt .p2-1141 .vl .s-aln{animation:ivNum 1.3s ease 2.45s both}
.motion .m-shot.in .vg-ivt .p2-1141 .nd{animation:ivIn .4s ease 2.5s both}
.motion .m-shot.in .vg-ivt .p2-1141 .okw{animation:ivStamp .55s cubic-bezier(.2,.7,.2,1) 2.55s both}
.motion .m-shot.in .vg-ivt .t2 .s-chk{animation:ivOut .3s ease 2.8s both}
.motion .m-shot.in .vg-ivt .t2 .n-chk{animation:ivIn .4s ease 2.9s both}
.motion .m-shot.in .vg-ivt .t2{animation:ivWash 1.6s ease 2.9s both}
@keyframes ivIn{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes ivOut{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes ivColIn{from{max-height:0;opacity:0;visibility:hidden}to{max-height:var(--mh);opacity:1;visibility:visible}}
@keyframes ivColOut{from{max-height:var(--mh);opacity:1;visibility:visible}to{max-height:0;opacity:0;visibility:hidden}}
@keyframes ivPress{0%{box-shadow:0 0 0 0 rgba(30,142,90,0)}30%{background:rgba(0,0,0,.12);box-shadow:0 0 0 3px rgba(30,142,90,.5)}100%{box-shadow:0 0 0 8px rgba(30,142,90,0)}}
@keyframes ivIdle{0%{opacity:1}8%{opacity:0}90%{opacity:0}100%{opacity:1}}
@keyframes ivBusy{0%{opacity:0}8%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes ivSpin{to{transform:rotate(360deg)}}
@keyframes ivNum{0%{opacity:0;visibility:hidden;background-color:rgba(30,142,90,0)}18%{opacity:1;visibility:visible;background-color:rgba(30,142,90,.16)}100%{opacity:1;visibility:visible;background-color:rgba(30,142,90,0)}}
@keyframes ivStamp{0%{opacity:0;visibility:visible;transform:scale(1.35)}60%{opacity:1;transform:scale(.96)}100%{opacity:1;visibility:visible;transform:none}}
@keyframes ivWash{0%{background-color:rgba(0,0,0,.02);border-color:rgba(0,0,0,.08)}30%{background-color:rgba(30,142,90,.08);border-color:rgba(30,142,90,.32)}100%{background-color:rgba(0,0,0,.02);border-color:rgba(0,0,0,.08)}}

/* ══ an internal transfer the shelf refuses (vignettes/inventory-transfer.html; TransferEditor in Transfers.jsx) ═════════ */
.vg-ivt.ivt-tr{background:#fff;padding:26px 30px}
.ivt-tr .r{text-align:right}
.ivt-tr .tr-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.ivt-tr .tr-id{display:flex;align-items:center;gap:14px}
.ivt-tr .tr-back{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.04);color:#626976}
.ivt-tr .tr-h1{display:flex;align-items:center;font:800 22px/1.25 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.ivt-tr .tr-pill{margin-left:10px;padding:3px 8px;border-radius:5px;font:700 10px/1.3 "Inter",sans-serif;background:#06B6D420;color:#06B6D4}
.ivt-tr .tr-sub{font-size:11px;color:#626976;margin-top:2px}
.ivt-tr .tr-acts{display:flex;gap:8px}
.ivt-tr .tr-red,.ivt-tr .tr-go{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;font:700 13px/1.2 "Inter",sans-serif;white-space:nowrap}
.ivt-tr .tr-red{border:1px solid rgba(244,63,94,.3);background:rgba(244,63,94,.08);color:#F43F5E}
.ivt-tr .tr-go{border:1px solid #10B981;background:#10B981;color:#fff}
.ivt-tr .tr-red .ic,.ivt-tr .tr-go .ic{width:14px;height:14px}
.ivt-tr .tr-err{max-height:90px;overflow:hidden}
.ivt-tr .tr-err-in{padding:12px;margin-bottom:14px;border-radius:10px;background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3);color:#F43F5E;font:600 12px/1.45 "Inter",sans-serif}
.ivt-tr .tr-warn{display:flex;align-items:center;gap:8px;padding:12px;margin-bottom:14px;border-radius:10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:#F59E0B;font:600 12px/1.45 "Inter",sans-serif}
.ivt-tr .tr-warn .ic{width:14px;height:14px}
.ivt-tr .tr-note{padding:12px;margin-bottom:14px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);font-size:12px;color:#444D5A}
.ivt-tr .tr-note small{display:block;font:700 10px/1.2 "Inter",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#444D5A;margin-bottom:4px}
.ivt-tr .tr-sc{border-radius:12px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);overflow:hidden}
.ivt-tr .tr-sch{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.04);font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.ivt-tr .tr-r{display:grid;grid-template-columns:3.32fr 2.37fr 1.6fr 1.55fr 1.34fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.03);font-size:12px;color:#444D5A}
.ivt-tr .tr-r:last-child{border-bottom:0}
.ivt-tr .tr-r>*{padding:10px 14px;min-width:0}
.ivt-tr .tr-th{background:rgba(0,0,0,.03);border-bottom-color:rgba(0,0,0,.06);font:700 10px/1.2 "Inter",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#626976}
.ivt-tr .tr-r b{font:700 12px/1.45 "Inter",sans-serif;color:#0F1A2B}
.ivt-tr .tr-ft{display:flex;align-items:center;gap:6px;font-size:11px}
.ivt-tr .tr-ft i{font-style:normal;font-weight:600;color:#06B6D4}
.ivt-tr .tr-ft .ic{width:11px;height:11px;color:#626976}
.ivt-tr .tr-av{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font:700 11px/1.3 "Inter",sans-serif;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.08);color:#0F1A2B}
.ivt-tr .tr-av.sh{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.3);color:#F43F5E}
.ivt-tr .tr-av .ic{width:11px;height:11px}
.ivt-tr .tr-st{display:inline-block;padding:3px 8px;border-radius:5px;font:700 10px/1.3 "Inter",sans-serif;background:#94A3B820;color:#94A3B8}
/* plays once: Validate is pressed (the button dims while it waits), and the server refuses in plain words */
.motion .shot:not(.in) .ivt-tr .tr-err{max-height:0;opacity:0}
.motion .shot.in .ivt-tr .tr-go{animation:trPress 1s ease 1s both}
.motion .shot.in .ivt-tr .tr-err{animation:trErr .6s cubic-bezier(.2,.7,.2,1) 1.85s both}
.motion .shot.in .ivt-tr .tr-av.sh{animation:trPulse 1.3s ease 2.05s both}
@keyframes trPress{0%{box-shadow:0 0 0 0 rgba(16,185,129,0)}15%{opacity:.7;box-shadow:0 0 0 3px rgba(16,185,129,.3)}80%{opacity:.7;box-shadow:0 0 0 6px rgba(16,185,129,0)}100%{opacity:1}}
@keyframes trErr{from{max-height:0;opacity:0;transform:translateY(-6px)}to{max-height:90px;opacity:1;transform:none}}
@keyframes trPulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,0)}30%{box-shadow:0 0 0 4px rgba(244,63,94,.22)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}

/* ══ page layout: four entries in two rows, read as examples rather than one chain ═══════════════════════════════════ */
.ivt-posts .post+.post::before{display:none}