/* Foreground workflow illustrations; the Neuron layer stays behind the work. */
[data-workflow-visual] { position: relative; z-index: 3; min-width: 0; margin: 18px 0 0; }
.oox-workbench { --wb-accent: #73cfff; --wb-success: #62e6cf; width: 100%; color: #edf3ff; background: linear-gradient(140deg,#141c2cf5,#101321fc 60%); border: 1px solid #a2bfff30; border-radius: 18px; box-shadow: 0 24px 65px #0005,0 0 55px #4b98ee0a; overflow: hidden; font-family: Onest,"Segoe UI",sans-serif; text-align: left; }
.oox-workbench *, .oox-workbench *::before, .oox-workbench *::after { box-sizing: border-box; }
.oox-workbench-price { --wb-accent: #74cfff; }
.oox-workbench-catalogue { --wb-accent: #adcd7d; }
.oox-workbench-webhook { --wb-accent: #c493ff; }
.oox-workbench :is(p,h3,pre,ol) { margin: 0; }
.oox-workbench [hidden] { display: none !important; }
.oox-wb-chrome { display: flex; align-items: center; gap: 12px; min-height: 37px; padding: 9px 18px; border-bottom: 1px solid #b8c9ff10; background: #080b1460; color: #8c9ab4; font-size: 8px; letter-spacing: .12em; }
.oox-wb-window-dots { display: flex; gap: 4px; flex-shrink: 0; }
.oox-wb-window-dots i { width: 5px; height: 5px; border-radius: 50%; opacity: .8; }
.oox-wb-sample { margin-left: auto; font-size: 7px; color: #72819b; }
.oox-wb-heading { padding: 20px 20px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.oox-wb-title { min-width: 0; }
.oox-wb-overline { display: block; color: var(--wb-accent); font-size: 9px; letter-spacing: .14em; font-weight: 600; margin-bottom: 7px; }
.oox-wb-title h3 { font-size: clamp(16px,1.5vw,20px); line-height: 1.32; font-weight: 550; letter-spacing: -.035em; color: #edf3ff; text-wrap: balance; }
.oox-wb-title p { font-size: 11px; line-height: 1.6; color: #92a2bd; margin-top: 6px; max-width: 400px; }
.oox-wb-status { flex-shrink: 0; max-width: 138px; border: 1px solid #7dcfff30; border-radius: 7px; padding: 5px 7px; background: #2089ca12; color: #a3dfff; font-size: 9px; line-height: 1.5; text-align: center; transition: background .3s,color .3s; }
.oox-workbench.is-complete .oox-wb-status { color: #89efcf; background: #46cca612; border-color: #62e6cf40; }
.oox-workbench.is-retry .oox-wb-status { color: #ffd09d; background: #b2712515; border-color: #ffc47540; }
.oox-wb-body { margin: 0 20px; min-width: 0; }
.oox-wb-price-head { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.oox-wb-field { padding: 11px 10px; min-width: 0; background: #ffffff03; border: 1px solid #b8c9ff14; border-radius: 10px; }
.oox-wb-field > span { display: block; color: #8f9eb8; font-size: 9px; line-height: 1.5; }
.oox-wb-field > strong { display: block; color: #e8edf9; margin-top: 4px; font-size: clamp(15px,1.7vw,25px); letter-spacing: -.05em; line-height: 1.2; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.oox-wb-field.is-accent { background: #3397ce0d; border-color: #60c7ff30; }
.oox-wb-field.is-accent strong { color: #9de2ff; }
.oox-wb-chart { display: flex; align-items: stretch; gap: 10px; padding: 14px 6px 10px; margin-top: 6px; border-bottom: 1px solid #b8c9ff12; background: repeating-linear-gradient(to top,transparent 0 27px,#8cbfff08 28px 29px); }
.oox-wb-chart-column { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oox-wb-chart-value { font-size: 10px; color: #bfcee5; font-variant-numeric: tabular-nums; }
.oox-wb-chart-track { height: 70px; width: min(100%,38px); display: flex; align-items: flex-end; }
.oox-wb-chart-bar { width: 100%; height: var(--bar-height); border: 1px solid #b6c4f22b; border-bottom: 0; border-radius: 5px 5px 0 0; background: linear-gradient(#526a9b66,#46537c22); transform-origin: center bottom; transition: transform .7s,background .7s,box-shadow .7s; }
.oox-wb-chart-column.is-target .oox-wb-chart-bar { background: linear-gradient(#74d9ff,#6a80f799); box-shadow: 0 0 25px #55b8ff20; transform: scaleY(.2); }
.oox-workbench:not([data-phase="0"]):not([data-phase="1"]) .is-target .oox-wb-chart-bar { transform: scaleY(1); }
.oox-wb-chart-column:is(.is-floor,.is-max) .oox-wb-chart-bar { border: 1px dashed #ad8ae84d; background: #b58aff08; }
.oox-wb-chart-label { font-size: 9px; color: #8898b4; text-align: center; line-height: 1.4; }
.oox-wb-guard { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 11px 0; color: #a8b7cd; font-size: 10px; line-height: 1.5; }
.oox-wb-guard-icon { color: #79e3c8; font-size: 14px; }
.oox-wb-guard strong { color: #7fe4ce; font-size: 10px; font-weight: 500; margin-left: auto; }
.oox-wb-rows { border-top: 1px solid #b8c9ff14; }
.oox-wb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #b8c9ff0c; color: #899bb7; font-size: 11px; line-height: 1.5; }
.oox-wb-row > span:first-child { flex: 0 1 44%; }
.oox-wb-values { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; text-align: right; }
.oox-wb-values strong { color: #cfdbed; font-weight: 500; overflow-wrap: anywhere; }
.oox-wb-row.is-updated .oox-wb-values strong { color: #80e7d0; }
.oox-wb-from { color: #6d7c96; font-size: 9px; text-decoration: line-through; overflow-wrap: anywhere; }
.oox-wb-arrow { color: #7293b1; }
.oox-wb-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 15px 20px 17px; list-style: none; }
.oox-wb-timeline li { display: flex; gap: 6px; min-width: 0; align-items: flex-start; font-size: 10px; line-height: 1.5; color: #73849d; transition: color .4s; }
.oox-wb-timeline b { font-size: 7px; font-weight: 500; color: #758cac; border: 1px solid #b8c9ff26; min-width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color .4s,color .4s; }
.oox-wb-timeline li span { padding-top: 3px; }
.oox-wb-timeline li.is-active { color: #b6d5f2; }
.oox-wb-timeline li.is-active b { border-color: #82d4ff77; color: #9bdeff; }
.oox-wb-timeline li.is-complete { color: #a1c8c1; }
.oox-wb-timeline li.is-complete b { border-color: #62e6cf50; color: #87ead3; background: #62e6cf0b; }
.oox-wb-progress { height: 2px; background: #ffffff04; }
.oox-wb-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#25b8ff,#b04dff 70%,#62e6cf); transition: width .6s ease; }
.oox-wb-product { display: flex; gap: 13px; align-items: center; padding: 13px 0; }
.oox-wb-product-art { display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; width: 62px; height: 67px; padding-bottom: 9px; border: 1px solid #cbbda055; border-radius: 12px 12px 7px 7px; background: linear-gradient(120deg,#cfc0a7,#daceb7 50%,#b9a68a); position: relative; color: #766857; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.oox-wb-product-art::before { content: ''; position: absolute; width: 27px; height: 20px; border: 4px solid #c4b599; border-bottom: 0; border-radius: 20px 20px 0 0; top: -12px; }
.oox-wb-product-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.oox-wb-product-copy strong { color: #e4ecf8; font-size: 12px; font-weight: 500; line-height: 1.4; }
.oox-wb-product-copy > span:last-child { color: #8d9fb9; font-size: 10px; line-height: 1.5; }
.oox-wb-product-copy .oox-wb-overline { margin-bottom: 0; font-size: 7px; }
.oox-wb-variants { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.oox-wb-variant { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #b8c9ff22; background: #ffffff03; border-radius: 5px; font-size: 10px; color: #a9b9d1; }
.oox-wb-variant i { width: 8px; height: 8px; border-radius: 50%; background: #d9cbb1; }
.oox-wb-variant i.is-variant-1 { background: #555b70; }
.oox-wb-variant i.is-variant-2 { background: #718468; }
.oox-wb-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; margin: 12px 0; border: 1px solid #a2bfff18; background: #060a1240; border-radius: 9px; font-size: 10px; line-height: 1.5; color: #b3c4dc; }
.oox-wb-route b { color: #7dcaff; font-weight: 400; font-size: 17px; }
.oox-wb-route .is-complete { color: #7fe4ce; }
.oox-wb-envelope { margin: 2px 0 14px; border: 1px solid #c493ff30; border-radius: 10px; overflow: hidden; background: #06091160; }
.oox-wb-envelope-top { display: flex; gap: 6px; flex-wrap: wrap; justify-content: space-between; padding: 10px; background: #a367ee0a; color: #b0a2cc; font-size: 10px; line-height: 1.5; }
.oox-wb-envelope-top b { font-weight: 500; color: #a2acc0; }
.oox-wb-envelope-top b.is-complete { color: #84e4cd; }
.oox-wb-payload { font-family: Consolas,monospace; color: #a6b8d3; font-size: 10px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; padding: 13px; }
.oox-wb-trace { display: flex; gap: 6px; margin-bottom: 14px; }
.oox-wb-trace span { flex: 1; font-size: 10px; line-height: 1.5; color: #7c8ba7; border-top: 2px solid #a2bfff1a; padding-top: 7px; transition: border-color .3s,color .3s; }
.oox-wb-trace span.is-complete { color: #82ddcc; border-color: #62e6cf88; }
.oox-wb-document { background: #080c1660; border: 1px solid #b8c9ff1c; border-radius: 11px; padding: 13px; margin: 0 0 12px; }
.oox-wb-document-heading { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #c7d5ec; padding-bottom: 12px; border-bottom: 1px dashed #b8c9ff22; }
.oox-wb-document-heading b { color: #9acffc; font-size: 8px; font-weight: 500; }
.oox-wb-document-product { display: flex; align-items: center; gap: 10px; padding: 16px 0; }
.oox-wb-document-product > strong { margin-left: auto; font-size: 13px; font-weight: 500; }
.oox-wb-product-mini { width: 32px; height: 38px; display: flex; align-items: center; justify-content: center; background: #b8aa8d22; border: 1px solid #cbbb9333; border-radius: 5px; color: #c7bda7; font-size: 10px; flex-shrink: 0; }
.oox-wb-receipt-note { display: flex; gap: 8px; padding-top: 9px; border-top: 1px solid #b8c9ff12; font-size: 9px; color: #92a9c7; }
.oox-wb-receipt-note > span:first-child { color: #7acbff; }
.oox-wb-context { font-size: 10px; line-height: 1.7; color: #8e9fb9; margin: 12px 0 !important; }
.oox-wb-stock-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 14px; }
.oox-wb-stock-arrow { color: #a39bdc; font-size: 18px; }
.oox-wb-map { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.oox-wb-map-cell { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-left: 2px solid #9978e883; background: #9978e80b; border-radius: 0 8px 8px 0; }
.oox-wb-map-cell > span { font-size: 9px; color: #a4b5cd; }
.oox-wb-map-cell strong { font-weight: 500; font-size: 23px; line-height: 1.2; color: #c6b6f9; }
.oox-wb-map-cell small { color: #8394ae; font-size: 8px; line-height: 1.5; }
.oox-wb-fba { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.oox-wb-transfer-map { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.oox-wb-drawer { padding: 18px 14px 12px; border: 1px solid #62e6cf28; border-radius: 11px; background: #62e6cf06; }
.oox-wb-drawer .oox-wb-ledger-total { color: #a7e5d5; display: block; }
.oox-wb-content-draft { padding: 14px; color: #ceddf2; }
.oox-wb-content-draft > strong { font-size: 14px; font-weight: 500; }
.oox-wb-content-check { display: flex; gap: 8px; align-items: center; padding-top: 12px; font-size: 10px; color: #a1b5d2; }
.oox-wb-content-check > span:first-child { color: #bc9ce7; }
.oox-wb-ledger { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 14px 8px; border: 1px solid #e0ad5e20; border-radius: 12px; background: radial-gradient(ellipse at top,#d0a44810,transparent 75%); }
.oox-wb-ledger-total { font-size: 29px; line-height: 1.5; letter-spacing: -.05em; color: #e6c795; font-weight: 500; }
.oox-wb-ledger .oox-wb-overline { color: #cfb27e; }
.oox-wb-till { background: #080c1650; border: 1px solid #a2bfff24; border-radius: 11px; margin-bottom: 12px; padding: 13px; }
.oox-wb-till-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; line-height: 1.5; }
.oox-wb-till-heading > strong { font-weight: 500; color: #c4d7ef; }
.oox-wb-till-heading > span { color: #93cfff; font-size: 8px; max-width: 45%; text-align: right; }
.oox-wb-barcode { display: flex; align-items: center; gap: 10px; margin: 17px 0; color: #a1b3cd; font-size: 9px; line-height: 1.5; }
.oox-wb-barcode i { height: 30px; width: 45px; flex-shrink: 0; background: repeating-linear-gradient(90deg,#a6bcd6 0px 1px,transparent 1px 3px,#a6bcd6 3px 5px,transparent 5px 7px,#a6bcd6 7px 8px,transparent 8px 12px); opacity: .65; }
.oox-wb-till-total { border-top: 1px dashed #b8c9ff2b; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; }
.oox-wb-till-total span { color: #8da0bd; font-size: 9px; }
.oox-wb-till-total strong { font-weight: 500; font-size: 24px; letter-spacing: -.04em; color: #e1edfc; }
.oox-wb-payment { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 10px; color: #90c9bf; background: #62e6cf0a; border: 1px solid #62e6cf1c; border-radius: 7px; font-size: 8px; line-height: 1.5; }
.oox-wb-payment strong { font-weight: 500; color: #a2e6d9; text-align: right; }
.is-paused .oox-workbench *, .is-paused .oox-workbench *::before { animation-play-state: paused !important; }
@media (max-width: 575px) {
  .oox-workbench { border-radius: 13px; }
  .oox-wb-chrome { padding: 9px 12px; gap: 9px; font-size: 7px; }
  .oox-wb-heading { padding: 16px 12px 13px; gap: 8px; }
  .oox-wb-heading h3 { font-size: 17px; }
  .oox-wb-status { max-width: 92px; padding: 4px 5px; font-size: 8px; }
  .oox-wb-body { margin: 0 12px; }
  .oox-wb-title p { font-size: 10px; }
  .oox-wb-timeline { padding: 13px 12px 15px; gap: 5px; }
  .oox-wb-timeline li { gap: 4px; font-size: 9px; }
  .oox-wb-timeline b { min-width: 17px; height: 17px; font-size: 6px; }
  .oox-wb-field { padding: 10px 8px; }
  .oox-wb-field strong { font-size: 21px; }
  .oox-wb-price-head { gap: 5px; }
  .oox-wb-price-head .oox-wb-field strong { font-size: 20px; }
  .oox-wb-price-head .oox-wb-field > span { font-size: 8px; }
  .oox-wb-chart { gap: 7px; }
  .oox-wb-chart-label { font-size: 8px; }
  .oox-wb-chart-track { height: 61px; }
  .oox-wb-row { font-size: 10px; gap: 6px; }
  .oox-wb-values { gap: 4px; }
  .oox-wb-from { font-size: 8px; }
  .oox-wb-product-copy strong { font-size: 11px; }
  .oox-wb-guard strong { margin-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .oox-workbench *, .oox-workbench *::before, .oox-workbench *::after { animation: none !important; transition: none !important; }
}

/* Inner-page previews: one moving illustration and brief labels. Home is unchanged. */
.oox-lite-panel { position: relative; isolation: isolate; }
.oox-lite-panel .oox-sync-topline > span:last-child,
.oox-lite-panel .oox-channel-stock,
.oox-lite-panel .oox-channel-state,
.oox-lite-panel .oox-sync-hub > span,
.oox-lite-panel .oox-sync-hub small,
.oox-lite-panel .oox-sync-event div > span,
.oox-lite-panel .oox-event-tag { display: none; }
.oox-lite-panel .oox-channel-node { padding: 12px 10px; width: 132px; }
.oox-lite-panel .oox-channel-title { justify-content: center; }
.oox-lite-panel .oox-channel-title strong { font-size: 11px; }
.oox-lite-panel .oox-channel-led { display: none; }
.oox-lite-panel .oox-sync-hub { height: 145px; }
.oox-lite-panel .oox-sync-event { background: transparent; border: 0; box-shadow: none; justify-content: center; padding: 12px 0; }
.oox-lite-panel .oox-event-icon { display: none; }
.oox-lite-panel .oox-sync-event strong { text-align: center; font-size: 12px; font-weight: 400; color: #b5c6df; }
.oox-lite-panel .oox-sync-controls { margin-top: 16px; font-size: 10px; color: #97a8c2; }
.oox-lite-panel [data-sync-toggle] { min-height: 36px; min-width: 64px; }
.oox-lite-panel.oox-has-workbench .oox-sync-topline { padding-right: 0; min-height: 24px; align-items: center; }
.oox-lite-panel.oox-has-workbench .oox-sync-topline > span:first-child { font-size: 10px; line-height: 1.6; }
.oox-lite-panel.oox-has-workbench .oox-neuron-stage { position: absolute; inset: 45px 0 50px; display: block; margin: 0 !important; z-index: -1; overflow: hidden; pointer-events: none; }
.oox-lite-panel.oox-has-workbench .oox-neuron-stage > :not(canvas):not(.oox-neuron-fallback) { display: none; }
.oox-lite-panel.oox-has-workbench .oox-neuron-canvas { inset: auto; top: -13%; left: -11%; width: 122%; height: 122%; opacity: .95; z-index: -1; }
.oox-lite-panel.oox-has-workbench .oox-neuron-fallback { inset: 5% 6%; opacity: .8; }
.oox-lite-panel.oox-has-workbench .is-webgl-ready .oox-neuron-fallback { opacity: .18; }
.oox-lite-panel.oox-has-workbench :is(.oox-sync-event,.oox-sync-profile-note) { display: none; }
.oox-lite-panel.oox-has-workbench [data-workflow-visual] { margin-top: 20px; }
.oox-lite-panel .oox-workbench { background: #0c122080; border: 0; border-radius: 16px; box-shadow: none; }
.oox-lite-panel .oox-lite-note { margin: 18px 16px 20px; font-size: 12px; line-height: 1.6; color: #b0bfd6; text-align: center; text-wrap: balance; }
.oox-overview-panel .oox-wb-heading { display: none; }
.oox-lite-panel.oox-overview-panel .oox-sync-topline { padding-right: 0; }
.oox-overview-panel .oox-workbench { background: transparent; overflow: visible; }
.oox-overview-diagram { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 400px; }
.oox-overview-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oox-overview-links path { fill: none; }
.oox-overview-link-base { stroke: #a2bfff45; stroke-width: 1; }
.oox-overview-link-flow { stroke: #97d8ff; stroke-dasharray: 8 6 2 84; stroke-width: 1.5; opacity: .65; animation: oox-overview-sync 3.6s linear infinite; animation-delay: var(--delay); filter: drop-shadow(0 0 4px #5aabff70); }
.oox-overview-link-flow[data-direction="out"] { animation-direction: reverse; stroke: #c899ff; }
.oox-overview-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 28%; max-width: 145px; min-height: 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 15px 6px; border-radius: 22px; background: linear-gradient(145deg,#15283a,#241c3c); box-shadow: 0 0 0 1px #b5a1ff50,0 0 50px #7657ff1c; z-index: 2; }
.oox-overview-hub img { width: 38px; height: 38px; }
.oox-overview-hub strong { font-size: 16px; font-weight: 600; color: #f1f4ff; }
.oox-overview-hub small { font-size: 10px; color: #8fddcf; text-align: center; line-height: 1.5; }
.oox-overview-card { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); width: 36%; max-width: 180px; min-height: 100px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 15px; background: #101c2ee6; box-shadow: 0 0 0 1px #8bb4e92b,0 12px 35px #0002; z-index: 2; transition: box-shadow .5s,background .5s; }
.oox-overview-card > i { font-size: 23px; color: #85d5ff; margin-bottom: 1px; }
.oox-overview-card strong { font-size: 13px; color: #e3edff; font-weight: 500; }
.oox-overview-card > span { color: #a5b8d3; font-size: 11px; text-align: center; line-height: 1.4; }
.oox-overview-card.is-active { background: #14283be8; box-shadow: 0 0 0 1px #62e6cf70,0 0 30px #25b8ff12; }
.oox-overview-card.is-active > i { color: #86ead1; }
.oox-overview-diagram.is-takealot .oox-overview-card { width: 29%; max-width: 165px; }
.oox-overview-diagram.is-takealot .oox-overview-hub { width: 26%; }
.oox-overview-price { margin: 8px 8px 0 !important; min-height: 20px; color: #a8dfff; font-size: 12px; line-height: 1.7; text-align: center; text-wrap: balance; }
.oox-overview-panel .oox-lite-note { margin-bottom: 12px; }
@keyframes oox-overview-sync { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (max-width: 599px) {
  .oox-lite-panel .oox-channel-node { width: 105px; padding: 10px 7px; }
  .oox-lite-panel .oox-channel-title strong { font-size: 9px; }
  .oox-lite-panel .oox-sync-hub { width: 104px; height: 125px; }
  .oox-lite-panel .oox-sync-event strong { font-size: 11px; }
  .oox-lite-panel.oox-has-workbench .oox-sync-topline > span:first-child { font-size: 9px; max-width: none; }
  .oox-lite-panel .oox-lite-note { font-size: 11px; }
  .oox-lite-panel.oox-has-workbench .oox-neuron-canvas { top: -11%; left: -9%; width: 118%; height: 118%; }
  .oox-overview-diagram { min-height: 400px; }
  .oox-overview-diagram.is-takealot { min-height: 400px; }
  .oox-overview-card { padding: 12px 6px; min-height: 94px; border-radius: 12px; }
  .oox-overview-card strong { font-size: 11px; }
  .oox-overview-card > span { font-size: 10px; }
  .oox-overview-hub { min-height: 100px; border-radius: 17px; }
  .oox-overview-hub strong { font-size: 13px; }
  .oox-overview-hub small { font-size: 8px; }
  .oox-overview-price { font-size: 11px; }
}
@media (max-width: 359px) {
  .oox-lite-panel .oox-channel-node { width: 84px; }
  .oox-lite-panel .oox-channel-title strong { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .oox-lite-panel *, .oox-lite-panel *::before, .oox-lite-panel *::after { animation: none !important; transition: none !important; }
}