.jbi {
    --jbi-ink: var(--text-primary, #1c2637); --jbi-muted: var(--text-secondary, #5c687a);
    --jbi-cream: #fff8ed; --jbi-paper: #fffdf9; --jbi-berry: #963c50; --jbi-line: #e6e3de; --jbi-sage: #226452;
    --jbi-soft: #f1f5fa; --jbi-glow: #f5e6d1; --jbi-gold: #b5966b; --jbi-btn: #1c2637; --jbi-btn-ink: #fff;
    --jbi-blue: var(--primary, #2563eb); --jbi-mark: #dfeaff; --jbi-best: #e7f3ea; --jbi-cond: #fff1d6; --jbi-up: #047857; --jbi-up-ink: #fff;
    max-width: 1200px; margin: 0 auto; padding: 28px 20px 48px; box-sizing: border-box; color: var(--jbi-ink);
}
[data-theme="dark"] .jbi {
    --jbi-muted: #b6bfd0; --jbi-cream: #28252b; --jbi-paper: #222b3a; --jbi-berry: #f0a4b7; --jbi-line: #465062; --jbi-sage: #81d5b4;
    --jbi-soft: #2b3545; --jbi-glow: #433333; --jbi-btn: #e8edf6; --jbi-btn-ink: #192538; --jbi-mark: rgba(96, 165, 250, .22);
    --jbi-best: #243831; --jbi-cond: rgba(240, 206, 144, .18); --jbi-up: #34d399; --jbi-up-ink: #0b2a20;
}
.jbi *, .jbi *::before, .jbi *::after { box-sizing: border-box; }
.jbi-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.jbi-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.jbi-hero h1 { margin: 0 0 10px; font-size: 34px; line-height: 1.3; letter-spacing: -.02em; }
.jbi-hero-txt p { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.85; color: var(--jbi-muted); }
.jbi-hero-cta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.jbi-login { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px; border-radius: 10px;
             background: var(--jbi-btn); color: var(--jbi-btn-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.jbi-login:hover { opacity: .9; }
.jbi-hero-cta small { font-size: 12px; color: var(--jbi-muted); }
.jbi-draft { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--jbi-berry); }
.jbi-draft[hidden] { display: none; }


.jbi-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.jbi-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--jbi-line); }
.jbi-tabs button { position: relative; margin-bottom: -1px; padding: 12px 22px; border: 0; border-bottom: 3px solid transparent; background: none;
                   color: var(--jbi-muted); font: inherit; font-size: 15px; cursor: pointer; }
.jbi-tabs button[aria-selected="true"] { color: var(--jbi-berry); font-weight: 700; border-bottom-color: color-mix(in srgb, var(--jbi-berry) 22%, transparent); }

.jbi-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--jbi-berry);
                                                transform-origin: left; transform: scaleX(var(--p, 1)); }
.jbi-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--jbi-muted); white-space: nowrap; }
.jbi-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--jbi-sage); }
.jbi.is-still .jbi-status::before { background: var(--jbi-muted); }
.jbi-pause { margin-left: auto; min-height: 36px; padding: 8px 18px; border: 0; border-radius: 22px; background: var(--jbi-soft); color: var(--jbi-muted);
             font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.jbi-pause[hidden] { display: none; }
.jbi :is(button, a, .jbi-panel):focus-visible { outline: 2px solid var(--jbi-blue); outline-offset: 2px; }


.jbi-panels { display: grid; gap: 16px; }

.jbi-js .jbi-panel { grid-area: 1 / 1; }
.jbi-js .jbi-panel:not(.is-on) { visibility: hidden; }
.jbi-panel { position: relative; display: grid; grid-template-columns: 30% 70%; border: 1px solid var(--jbi-line); border-radius: 22px; overflow: hidden; background: var(--jbi-paper); }
.jbi-copy { align-self: center; padding: 35px 32px; }
.jbi-num { font: italic 44px Georgia, serif; color: var(--jbi-gold); }
.jbi-copy h3 { margin: 18px 0 14px; font-size: 24px; line-height: 1.55; }
.jbi-copy h3 span { display: inline-block; }   
.jbi-copy p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--jbi-muted); }
.jbi-copy .jbi-tip { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--jbi-line); font-size: 12px; }
.jbi-demo { position: relative; display: flex; align-items: flex-start; min-height: 520px; padding: 40px 0 32px 4%; overflow: hidden;
            background: radial-gradient(ellipse at 70% 50%, var(--jbi-glow), transparent 66%), var(--jbi-cream); }

.jbi-mira { position: absolute; right: 0; bottom: 0; z-index: 2; width: 29%; height: auto; max-height: 380px; object-fit: contain; object-position: bottom right; }
.jbi-note { margin: 12px 0 0; font-size: 12px; color: var(--jbi-muted); }
.jbi-end { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; font-size: 14px; font-weight: 700; }
.jbi-end a { color: var(--jbi-blue); text-decoration: none; }
.jbi-end a + a { font-weight: 500; color: var(--jbi-muted); }
.jbi-end a:hover { text-decoration: underline; text-underline-offset: 3px; }


.jbi-win { position: relative; z-index: 3; width: 66%; max-width: 560px; overflow: hidden; border: 1px solid var(--jbi-line); border-radius: 15px;
           background: var(--jbi-paper); box-shadow: 0 15px 45px #79532e18; font-size: 13px; }
.jbi-win-bar { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--jbi-line); background: var(--jbi-cream); font-size: 12px; font-weight: 600; }
.jbi-win-bar > i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #dfc9b5; }
.jbi-win-bar > span { margin-left: 7px; }
.jbi-win-bar > small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--jbi-muted); white-space: nowrap; }   
.jbi-win-body { position: relative; padding: 16px; }


.jbi-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--jbi-line); }
.jbi-thumb { width: 40px; height: 40px; border: 1px solid var(--jbi-line); border-radius: 6px; background: #fff center / 34px no-repeat; }
.jbi-sw2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='20' width='56' height='25' rx='7' fill='%231f232a'/%3E%3Crect x='14.5' y='22.5' width='35' height='20' rx='2' fill='%23465163'/%3E%3Ccircle cx='9.2' cy='28' r='1.9' fill='%23e8474f'/%3E%3Ccircle cx='54.8' cy='37' r='1.9' fill='%233a8ee6'/%3E%3C/svg%3E"); }
.jbi-xbx { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='20' y='7' width='24' height='50' rx='3' fill='%23f6f7f9' stroke='%23c3c9d2'/%3E%3Cellipse cx='32' cy='11.5' rx='9' ry='2.7' fill='%23262a30'/%3E%3Crect x='23' y='50' width='7' height='1.8' rx='.9' fill='%23aeb5c0'/%3E%3C/svg%3E"); }
.jbi-name { min-width: 0; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }   
.jbi-name small, .jbi-max small { display: block; font-size: 11px; font-weight: 400; color: var(--jbi-muted); font-variant-numeric: tabular-nums; }
.jbi-max { text-align: right; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }


.jbi-paste { position: relative; display: grid; gap: 2px; min-height: 104px; padding: 10px 12px; border: 1px solid var(--jbi-line); border-radius: 10px;
             background: var(--jbi-paper); line-height: 1.6; transition: box-shadow .3s; }
.jbi-line { transition: opacity .35s; }
.jbi-paste mark { padding: 0 3px; border-radius: 4px; background: var(--jbi-mark); color: inherit; font-weight: 700; transition: background .35s; }
.jbi-nojan { text-decoration: underline wavy color-mix(in srgb, var(--jbi-muted) 60%, transparent); text-underline-offset: 3px; color: var(--jbi-muted); }
.jbi-ph { display: none; position: absolute; top: 10px; left: 12px; color: var(--jbi-muted); opacity: .7; }
.jbi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.jbi-count { position: relative; font-size: 12px; color: var(--jbi-muted); }
.jbi-count b { font-weight: 400; transition: opacity .3s; }
.jbi-count b + b { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--jbi-ink); font-weight: 600; }
.jbi-go { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; background: var(--jbi-blue); color: #fff; font-size: 12px; font-weight: 700;
          transition: transform .15s, filter .15s; }
.jbi-unread { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--jbi-muted); transition: opacity .35s; }
.jbi-unread b { padding: 2px 8px; border: 1px solid var(--jbi-line); border-radius: 6px; background: var(--jbi-soft); color: var(--jbi-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.jbi-found { margin-top: 14px; transition: opacity .4s, transform .4s; }
.jbi-found-h { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.jbi-spin { position: absolute; left: 50%; bottom: 70px; width: 26px; height: 26px; margin-left: -13px; border: 3px solid var(--jbi-line); border-top-color: var(--jbi-blue);
            border-radius: 50%; opacity: 0; transition: opacity .2s; animation: jbi-spin .8s linear infinite; }
@keyframes jbi-spin { to { transform: rotate(360deg); } }

.jbi-js [data-scene="0"]:not([data-on~="paste"]) .jbi-line { opacity: 0; }
.jbi-js [data-scene="0"]:not([data-on~="paste"]) .jbi-ph { display: block; }
.jbi-js [data-scene="0"][data-on~="paste"]:not([data-on~="mark"]) .jbi-paste { box-shadow: 0 0 0 3px color-mix(in srgb, var(--jbi-blue) 22%, transparent); border-color: var(--jbi-blue); }
.jbi-js [data-scene="0"]:not([data-on~="mark"]) .jbi-paste mark { background: transparent; font-weight: 400; }
.jbi-js [data-scene="0"]:not([data-on~="mark"]) .jbi-nojan { text-decoration: none; color: inherit; }
.jbi-count b + b { opacity: 1; }
.jbi-count b:first-child { opacity: 0; }
.jbi-js [data-scene="0"]:not([data-on~="mark"]) .jbi-count b:first-child { opacity: 1; }
.jbi-js [data-scene="0"]:not([data-on~="mark"]) .jbi-count b + b { opacity: 0; }
.jbi-js [data-scene="0"]:not([data-on~="unread"]) .jbi-unread { opacity: 0; }
.jbi-js [data-scene="0"][data-on~="press"] .jbi-go { transform: scale(.95); filter: brightness(.85); }
.jbi-js [data-scene="0"][data-on~="load"] .jbi-spin { opacity: 1; }
.jbi-js [data-scene="0"]:not([data-on~="result"]) .jbi-found { opacity: 0; transform: translateY(6px); }


.jbi-item-acts { grid-template-columns: 40px minmax(0, 1fr) auto auto; row-gap: 8px; }
.jbi-diff { min-width: 44px; text-align: right; font-size: 13px; color: var(--jbi-muted); font-variant-numeric: tabular-nums; }
.jbi-diff.jbi-up { color: var(--jbi-up); font-weight: 700; }
.jbi-acts { grid-column: 2 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.jbi-acts i { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 9px; border: 1px solid var(--jbi-line); border-radius: 7px;
              font-style: normal; font-size: 11px; font-weight: 700; color: var(--jbi-muted); background: var(--jbi-paper); }
.jbi-acts .jbi-add { border-color: var(--jbi-ink); background: var(--jbi-ink); color: var(--jbi-paper); }
.jbi-acts .jbi-more { gap: 4px; color: var(--jbi-blue); transition: box-shadow .25s, border-color .25s, background .25s; }
.jbi-more b { display: inline-block; font-weight: 400; transition: transform .3s; }
.jbi-stores { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s ease; }
.jbi-stores-in { min-height: 0; overflow: hidden; }
.jbi-store { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 64px; align-items: center; gap: 10px; margin: 0 0 6px 50px; padding: 8px 10px;
             border-radius: 8px; background: var(--jbi-soft); font-size: 12px; transition: opacity .3s; }
.jbi-store:last-child { margin-bottom: 10px; }
.jbi-sn { font-weight: 600; }
.jbi-sn b { display: inline-block; width: 18px; color: var(--jbi-gold); font-style: italic; font-family: Georgia, serif; }
.jbi-cond { padding: 1px 7px; border-radius: 5px; font-size: 11px; transition: background .35s; }
.jbi-sp { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.jbi-store small { text-align: right; color: var(--jbi-muted); font-size: 11px; }

.jbi-panel[data-scene="1"] .jbi-item-acts:first-child .jbi-more { border-color: color-mix(in srgb, var(--jbi-blue) 45%, var(--jbi-line)); background: color-mix(in srgb, var(--jbi-blue) 8%, var(--jbi-paper)); }
.jbi-panel[data-scene="1"] .jbi-item-acts:first-child .jbi-more b { transform: rotate(180deg); }
.jbi-cond { background: var(--jbi-cond); }
.jbi-js [data-scene="1"]:not([data-on~="open"]) .jbi-stores { grid-template-rows: 0fr; }
.jbi-js [data-scene="1"]:not([data-on~="open"]) .jbi-store { opacity: 0; }
.jbi-js [data-scene="1"][data-on~="open"] .jbi-store:nth-child(2) { transition-delay: .15s; }
.jbi-js [data-scene="1"][data-on~="open"] .jbi-store:nth-child(3) { transition-delay: .3s; }
.jbi-js [data-scene="1"]:not([data-on~="open"]) .jbi-item-acts:first-child .jbi-more { border-color: var(--jbi-line); background: var(--jbi-paper); }
.jbi-js [data-scene="1"]:not([data-on~="open"]) .jbi-item-acts:first-child .jbi-more b { transform: none; }
.jbi-js [data-scene="1"][data-on~="hint"] .jbi-item-acts:first-child .jbi-more { border-color: var(--jbi-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jbi-blue) 22%, transparent); }
.jbi-js [data-scene="1"]:not([data-on~="cond"]) .jbi-cond { background: transparent; }


.jbi-panel[data-scene="2"] .jbi-win-body { display: grid; }
.jbi-list-view, .jbi-total-view { grid-area: 1 / 1; transition: opacity .4s, visibility .4s; }
.jbi-reshead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; font-size: 13px; font-weight: 700; }
.jbi-matome { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--jbi-blue); color: #fff; font-size: 12px;
              transition: transform .15s, box-shadow .25s, filter .15s; white-space: nowrap; }
.jbi-ok { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--jbi-best); color: var(--jbi-up);
          font-size: 12px; font-weight: 800; transition: opacity .3s, transform .3s; }
.jbi-panel[data-scene="2"] .jbi-item { grid-template-columns: 40px minmax(0, 1fr) auto 22px; }
.jbi-toast { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--jbi-ink); color: var(--jbi-paper); font-size: 12px; text-align: center; transition: opacity .3s; }
.jbi-total-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.jbi-total-h small { font-size: 12px; font-weight: 400; color: var(--jbi-muted); }
.jbi-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding: 12px 14px; border: 1px solid var(--jbi-line); border-radius: 10px;
             font-size: 13px; font-weight: 600; transition: background .35s, border-color .35s; }
.jbi-total em { margin-left: 8px; padding: 1px 7px; border-radius: 5px; background: var(--jbi-up); color: var(--jbi-up-ink); font-style: normal; font-size: 11px; transition: opacity .3s; }
.jbi-tp { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jbi-total.is-best { border-color: color-mix(in srgb, var(--jbi-up) 45%, var(--jbi-line)); background: var(--jbi-best); }
.jbi-win-t b { font-weight: 600; }
.jbi-win-t b:first-child { display: none; }


.jbi-list-view { opacity: 0; visibility: hidden; }
.jbi-toast { opacity: 0; }
.jbi-js [data-scene="2"]:not([data-on~="totals"]) .jbi-list-view { opacity: 1; visibility: visible; }
.jbi-js [data-scene="2"]:not([data-on~="totals"]) .jbi-total-view { opacity: 0; visibility: hidden; }
.jbi-js [data-scene="2"]:not([data-on~="totals"]) .jbi-win-t b:first-child { display: inline; }
.jbi-js [data-scene="2"]:not([data-on~="totals"]) .jbi-win-t b + b { display: none; }
.jbi-js [data-scene="2"][data-on~="hint"] .jbi-matome { box-shadow: 0 0 0 3px color-mix(in srgb, var(--jbi-blue) 25%, transparent); }
.jbi-js [data-scene="2"][data-on~="press"] .jbi-matome { transform: scale(.95); filter: brightness(.85); }
.jbi-js [data-scene="2"]:not([data-on~="add"]) .jbi-ok { opacity: 0; transform: scale(.6); }
.jbi-js [data-scene="2"][data-on~="toast"] .jbi-toast { opacity: 1; }
.jbi-js [data-scene="2"]:not([data-on~="best"]) .jbi-total.is-best { border-color: var(--jbi-line); background: transparent; }
.jbi-js [data-scene="2"]:not([data-on~="best"]) .jbi-total em { opacity: 0; }


.jbi.is-paused .jbi-spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .jbi *, .jbi *::before, .jbi *::after { transition: none !important; animation: none !important; }
}


@media (max-width: 860px) {
    .jbi-panel { grid-template-columns: 1fr; }
    .jbi-copy { padding: 22px 22px 14px; }
    .jbi-num, .jbi-copy h3 { margin-right: 96px; }   
    .jbi-copy h3 { margin: 8px 0 10px; font-size: 21px; }
    .jbi-num { font-size: 32px; }
    .jbi-demo { position: static; display: block; min-height: 0; padding: 4px 14px 18px; background: var(--jbi-cream); }
    .jbi-mira { top: 12px; right: 14px; bottom: auto; width: auto; height: 112px; max-height: none; }
    .jbi-win { width: 100%; max-width: none; }
    .jbi-win-body { min-height: 410px; }   
}
@media (max-width: 600px) {
    .jbi { padding: 18px 16px 36px; }
    .jbi-hero { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 22px; }
    .jbi-hero h1 { font-size: 28px; }
    .jbi-hero-txt p { font-size: 14px; }
    .jbi-hero-cta { align-items: stretch; text-align: center; }
    .jbi-bar { flex-wrap: wrap; gap: 10px; }
    .jbi-tabs { width: 100%; gap: 0; }
    .jbi-tabs button { flex: 1; padding: 12px 4px; font-size: 14px; }
    .jbi-copy { padding: 18px 18px 12px; }
    .jbi-num, .jbi-copy h3 { margin-right: 82px; }
    .jbi-copy p { font-size: 13px; line-height: 1.85; }
    .jbi-copy .jbi-tip { margin-top: 12px; padding-top: 10px; }
    .jbi-mira { height: 104px; right: 10px; }
    .jbi-demo { padding: 2px 10px 14px; }
    .jbi-win-body { padding: 12px; }
    .jbi-acts { grid-column: 1 / -1; }
    .jbi-diff { min-width: 0; }
    .jbi-store { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; margin-left: 0; }
    .jbi-store .jbi-cond { justify-self: start; }
    .jbi-store small { grid-column: 2; grid-row: 2; }
    .jbi-store .jbi-sp { grid-column: 2; grid-row: 1; text-align: right; }
    .jbi-store .jbi-cond { grid-column: 1; grid-row: 2; }
}