/* J7 panel (simulated j7tracker.io): neutral dark grays, Inter, 6-9px radii, purple
   outlines. The panel is 320-720px wide (default 430), so the layout is driven by
   container queries:
     .j7          (j7)     < 600px: form stacked over the feed (draggable split)
                           >= 600px: form | feed side by side like the reference
     .j7-form     (j7f)    form density: base 300-379, reference 380+, roomy 520+
     .j7-feedwrap (j7feed) tweet card density */

.j7 {
  --c-top: #181818;
  --c-form: #282828;
  --c-feed: #181818;
  --c-card: #2a2a2a;
  --c-card-b: #343434;
  --c-btn: #2d2d2d;
  --c-btn-h: #363636;
  --c-line: #3b3b3b;
  --c-in: #161616;
  --c-in-b: #0c0c0c;
  --c-tx: #ececec;
  --c-tx-2: #a8a8a8;
  --c-tx-3: #6e6e6e;
  --c-acc: #6d6af5;
  --c-hl: #8545c5;
  --c-hl-bg: #221f27;
  --c-pink: #f25ca9;
  --c-blue: #3b9ce6;
  --c-green: #4ade80;
  --c-yellow: #eab308;
  --c-red: #e5484d;
  container: j7 / inline-size;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-top);
  color: var(--c-tx);
  font-family: var(--font-j7);
  font-size: 12px;
  line-height: 1.35;
}
.j7 button { user-select: none; }
.j7 button:focus-visible, .j7-pop button:focus-visible { outline: 1px solid var(--c-acc); outline-offset: 1px; }
.j7 .sp { flex: 1 1 auto; }

/* the generic "≡" coin glyph (three slanted gradient bars) */
.j7-sol { display: inline-flex; flex-direction: column; justify-content: center; gap: 1.6px; width: 11px; height: 10px; flex: 0 0 auto; vertical-align: -1px; }
.j7-sol i { display: block; height: 2.1px; border-radius: 1px; background: linear-gradient(90deg, #a35cff, #23d6a6); transform: skewX(-38deg); }

.j7-simchip { display: inline-block; font: 700 8.5px/1 var(--font-j7); letter-spacing: .07em; padding: 2px 4px 2px; border-radius: 3px; background: var(--c-acc); color: #fff; }

/* ------------------------------------------------------------- top bar */
.j7-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  padding: 7px 7px; background: var(--c-top); border-bottom: 1px solid #0b0b0b;
  min-width: 0; overflow: hidden;
}
.j7-tb {
  flex: 0 0 auto; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 8px;
  color: var(--c-tx); font-weight: 600; font-size: 12px; white-space: nowrap;
  transition: background .1s, border-color .1s;
}
.j7-tb:hover { background: var(--c-btn-h); border-color: #4a4a4a; }
.j7-tb i { font-size: 15px; color: #d6d6d6; }
.j7-tb.sq { width: 32px; padding: 0; }
.j7-tb.users .n { font-variant-numeric: tabular-nums; }
.j7-tb.chat {
  flex: 1 1 auto; min-width: 33px; position: relative; padding: 0 8px 0 28px;
  border-color: var(--c-acc); background: #1d1e2a; color: #b7b7c8; font-weight: 500;
  box-shadow: inset 0 0 0 1px rgb(109 106 245 / .15);
}
.j7-tb.chat i { position: absolute; left: 9px; color: #8b89f2; }
.j7-tb.chat .lbl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.j7-tb.chat:hover { background: #24253a; border-color: #8381f8; }
.j7-tabs { flex: 0 0 auto; min-width: 0; display: flex; align-items: stretch; height: 30px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-btn); overflow: hidden; }
.j7-tab { position: relative; display: flex; align-items: center; gap: 5px; padding: 0 14px 0 6px; cursor: pointer; border-right: 1px solid var(--c-line); min-width: 0; }
.j7-tab:hover { background: var(--c-btn-h); }
.j7-tab img { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; object-fit: cover; }
.j7-tab .t { font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }
.j7-tab .x { position: absolute; top: 0; right: 1px; font-size: 10px; color: #9a9a9a; line-height: 1; padding: 1px; }
.j7-tab .x:hover { color: #fff; }
.j7-tab-add { width: 28px; display: grid; place-items: center; color: #d6d6d6; font-size: 15px; }
.j7-tab-add:hover { background: var(--c-btn-h); }

/* ---------------------------------------------------------------- body
   default (narrow panel): form on top, split bar, feed below */
.j7-body {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(230px, var(--j7-split, 50%), calc(100% - 170px)) 9px minmax(0, 1fr);
  background: #0b0b0b;
}
.j7-split {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: center;
  cursor: row-resize; touch-action: none; background: #141414;
  border-top: 1px solid #070707; border-bottom: 1px solid #070707;
}
.j7-split::before { content: ''; position: absolute; inset: -5px 0; } /* a fatter grab area */
.j7-split .grip { width: 38px; height: 3px; border-radius: 3px; background: #444; transition: background .12s, width .12s; }
.j7-split:hover .grip, .j7-split.drag .grip { background: var(--c-acc); width: 54px; }
/* wide panel: the reference layout */
@container j7 (min-width: 600px) {
  .j7-body { grid-template-columns: minmax(0, 27fr) minmax(0, 23fr); grid-template-rows: minmax(0, 1fr); gap: 1px; }
  .j7-split { display: none; }
}

/* ---------------------------------------------------------------- form */
.j7-form {
  container: j7f / inline-size;
  min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scroll-padding-bottom: 112px; /* focus / scrollIntoView clear the sticky deploy bar */
  background: var(--c-form);
}
.j7-fi {
  --fld: 33px; --h: 27px; --opt: 31px; --fs: 12.5px; --lab: 10px; --gap: 6px; --thumb: 50px; --r: 6px; --px: 9px;
  display: flex; flex-direction: column; gap: var(--gap);
  padding: 7px var(--px) 10px; min-height: 100%;
}
@container j7f (min-width: 380px) {
  .j7-fi { --fld: 37px; --h: 29px; --opt: 34px; --fs: 13px; --lab: 10.5px; --gap: 7px; --thumb: 58px; --px: 11px; }
}
@container j7f (min-width: 520px) {
  .j7-fi { --fld: 39px; --h: 30px; --opt: 35px; --thumb: 62px; --px: 13px; }
}

.j7-fhead { display: flex; align-items: center; gap: 4px; }
.j7-ib {
  flex: 0 0 auto; width: var(--h); height: var(--h); display: inline-grid; place-items: center;
  background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 7px; color: #d0d0d0; font-size: 14px;
  transition: background .1s, color .1s, border-color .1s;
}
.j7-ib:hover { background: var(--c-btn-h); color: #fff; }
.j7-ib.sm { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.j7-ib.dim { color: #686868; background: #262626; }
.j7-ib.on { color: var(--c-yellow); border-color: #7a6a17; background: #312e1d; }
.j7-wallet {
  height: var(--h); display: inline-flex; align-items: center; gap: 5px; padding: 0 8px;
  background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 0;
}
.j7-wallet i { font-size: 13px; color: #bdbdbd; }
.j7-wallet .wn { color: #cfcfcf; font-weight: 500; overflow: hidden; text-overflow: ellipsis; max-width: 54px; }
.j7-wallet b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.j7-wallet:hover { background: var(--c-btn-h); }

.j7-lab {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; min-width: 0;
  font-size: var(--lab); font-weight: 700; letter-spacing: .055em; text-transform: uppercase; color: #a6a6a6; line-height: 1.2;
}
.j7-lab .cnt { color: var(--c-tx-3); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.j7-lab .cnt.full { color: var(--c-red); }
.j7-cbs { margin-left: auto; display: flex; gap: 9px; }
.j7-cb { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: #a6a6a6; white-space: nowrap; letter-spacing: .04em; }
.j7-cb input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.j7-cb .box { width: 12px; height: 12px; border: 1px solid #7c7c7c; border-radius: 3px; display: grid; place-items: center; flex: 0 0 auto; transition: background .1s, border-color .1s; }
.j7-cb .box i { font-size: 10px; line-height: 1; color: #fff; opacity: 0; }
.j7-cb input:checked + .box { background: #6366f1; border-color: #6366f1; }
.j7-cb input:checked + .box i { opacity: 1; }
.j7-cb input:checked ~ .txt { color: #d4d4d4; }
.j7-cb:hover .box { border-color: #c4c4c4; }

.j7-field {
  display: flex; align-items: center; height: var(--fld); min-width: 0;
  background: var(--c-in); border: 1px solid var(--c-in-b); border-radius: var(--r);
  transition: border-color .12s, box-shadow .12s;
}
.j7-field:hover { border-color: #262626; }
.j7-field:focus-within { border-color: #4a4a58; box-shadow: 0 0 0 1px rgb(109 106 245 / .3); }
.j7-field.filled { animation: j7-filled .7s ease-out; }
.j7-field.shake { animation: j7-shake .32s ease-in-out; border-color: var(--c-red); }
@keyframes j7-filled { from { box-shadow: 0 0 0 2px rgb(168 85 247 / .75), 0 0 16px rgb(168 85 247 / .35); background: #1d1726; } to { box-shadow: 0 0 0 0 rgb(168 85 247 / 0); } }
@keyframes j7-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.j7-in {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 11px;
  background: transparent; border: 0; outline: 0; color: var(--c-tx); font-size: calc(var(--fs) + 1.5px);
}
.j7-in::placeholder { color: #5c5c5c; }
.j7-jp { flex: 0 0 auto; height: 100%; display: inline-flex; align-items: center; gap: 1px; padding: 0 8px 0 5px; color: #6a6a6a; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.j7-jp i { font-size: 13px; }
.j7-jp:hover { color: #bdbdbd; }
.j7-jp.on { color: var(--c-pink); }

.j7-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -2px; }
.j7-chip {
  height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  background: #131313; border: 1px solid #070707; border-radius: 5px; color: #d6d6d6; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  transition: border-color .1s, color .1s;
}
.j7-chip:hover { border-color: #4a4a4a; color: #fff; }
.j7-chip.dash { background: transparent; border: 1px dashed #4e4e4e; color: #9a9a9a; }
.j7-chip.ghost { color: #575757; }
.j7-chip.sq { width: 27px; padding: 0; font-size: 12px; }
.j7-chip.on { border-style: solid; border-color: var(--c-yellow); color: var(--c-yellow); background: #2b2816; }

.j7-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 8px; }
.j7-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.j7-twrow { display: flex; gap: 5px; min-width: 0; }
.j7-twrow .j7-field { flex: 1 1 auto; }
.j7-col .j7-in { font-size: var(--fs); padding: 0 9px; }
.j7-post {
  flex: 0 0 auto; height: var(--fld); padding: 0 9px; display: inline-flex; align-items: center; gap: 3px;
  background: #343434; border: 1px solid #424242; border-radius: var(--r); font-size: 11px; font-weight: 700; color: #f2f2f2;
}
.j7-post:hover { background: #3c3c3c; }
.j7-post i { font-size: 12px; }

.j7-seltitle { text-align: center; font-weight: 600; font-size: var(--fs); color: #d6d6d6; margin-top: 1px; }
.j7-gallery { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--thumb); }
.j7-add {
  width: var(--thumb); height: var(--thumb); flex: 0 0 auto; display: grid; place-items: center;
  background: #111; border: 1px dashed #4a4a4a; border-radius: 8px; color: #d6d6d6; font-size: 20px;
}
.j7-add:hover { border-color: #8a8a8a; color: #fff; }
.j7-noimg { color: #a0a0a0; font-size: 11.5px; margin-left: 4px; }
.j7-thumb {
  position: relative; width: var(--thumb); height: var(--thumb); flex: 0 0 auto; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #111; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); transition: transform .1s;
}
.j7-thumb img { width: 100%; height: 100%; object-fit: cover; }
.j7-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; pointer-events: none; transition: border-color .1s, box-shadow .1s; }
.j7-thumb:hover::after { border-color: #5a5a5a; }
.j7-thumb.sel::after { border-color: var(--c-acc); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 0 14px rgb(109 106 245 / .35); }
.j7-thumb .ck { position: absolute; left: 3px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; display: none; place-items: center; background: var(--c-acc); color: #fff; font-size: 10px; box-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.j7-thumb.sel .ck { display: grid; }
.j7-thumb .x { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgb(0 0 0 / .72); color: #fff; font-size: 10px; display: none; place-items: center; z-index: 1; }
.j7-thumb:hover .x { display: grid; }
.j7-thumb .x:hover { background: var(--c-red); }
.j7-thumb.pop { animation: j7-pop .32s cubic-bezier(.2, 1.5, .45, 1); }
.j7-thumb[data-kind="pfp"], .j7-thumb[data-kind="quote"] { border-radius: 50%; }

.j7-tools { display: flex; align-items: center; gap: 5px; min-width: 0; }
.j7-tool {
  flex: 0 0 auto; height: calc(var(--h) + 3px); min-width: calc(var(--h) + 3px); padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 7px; color: #e6e6e6; font-size: 11.5px; font-weight: 700;
  transition: background .1s;
}
.j7-tool i { font-size: 14.5px; }
.j7-tool:hover { background: var(--c-btn-h); }
.j7-tool.dim { color: #727272; background: #252525; }
.j7-tool .ext { font-size: 11px; color: #777; }
.j7-tool.on { border-color: #2f6b48; background: #22362a; color: #a7f3c4; }
.j7-tool.on .ext { color: #a7f3c4; }

/* platforms: 5 + gear on row 1, 3 wide ones on row 2 (like the reference) */
.j7-plats {
  display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)) auto; gap: 5px; padding: 5px;
  background: #232323; border: 1px solid #111; border-radius: 9px;
}
.j7-plat {
  grid-column: span 3; height: var(--h); min-width: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #2f2f2f; border: 1px solid #3a3a3a; border-radius: 7px; font-size: 11px; font-weight: 700; color: #d8d8d8;
  transition: background .1s, border-color .1s;
}
.j7-plat:nth-child(n+7) { grid-column: span 5; }
.j7-plat i { font-size: 13.5px; flex: 0 0 auto; }
.j7-plat .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j7-plat:hover { background: #363636; }
.j7-plat.sel { background: #234d36; border-color: #3f7a55; color: #b7f7cf; box-shadow: inset 0 0 0 1px rgb(74 222 128 / .14); }
.j7-plat.gear { grid-column: 16; grid-row: 1; width: var(--h); padding: 0; color: #a3a3a3; }

.j7-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.j7-opt {
  height: var(--opt); min-width: 0; display: flex; align-items: stretch;
  background: #2b2b2b; border: 1px solid #393939; border-radius: 7px; overflow: hidden; color: #858585; font-size: 11.5px; font-weight: 700;
  transition: border-color .1s, background .1s;
}
.j7-opt:hover { border-color: #4c4c4c; }
.j7-opt .ck { flex: 0 0 auto; width: 26px; display: grid; place-items: center; border-right: 1px solid #393939; }
.j7-opt .ck .sq { width: 12px; height: 12px; border: 1px dashed #6b6b6b; border-radius: 2px; display: grid; place-items: center; }
.j7-opt .ck .sq i { font-size: 10px; }
.j7-opt .ck.badge { font-size: 10.5px; font-weight: 800; color: #e6e6e6; background: #333; }
.j7-opt .lb { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 5px; white-space: nowrap; }
.j7-opt .lb > i { display: none; font-size: 13.5px; flex: 0 0 auto; }
.j7-opt .lb span { overflow: hidden; text-overflow: ellipsis; }
.j7-opt.on { color: #ededed; border-color: #4a4a4a; }
.j7-opt.on .ck .sq { border: 1px solid #cfcfcf; color: #fff; }
.j7-opt.on.yellow { background: #39352d; border-color: #7a6a17; }
.j7-opt.on.yellow .ck { border-color: #7a6a17; background: #4a4220; }
.j7-opt.on.yellow .ck .sq { border-color: var(--c-yellow); color: var(--c-yellow); }

.j7-buys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) calc(var(--h) + 3px); gap: 5px; }
.j7-buy {
  height: calc(var(--h) + 3px); min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #2a2a2a; border: 1px solid #393939; border-radius: 7px; font-size: var(--fs); font-weight: 700; color: #ededed;
  font-variant-numeric: tabular-nums; transition: background .1s, border-color .1s;
}
.j7-buy:hover { background: #323232; }
.j7-buy.sel { border-color: var(--c-acc); background: #2a2a3e; box-shadow: inset 0 0 0 1px rgb(109 106 245 / .35); }
.j7-buy.edit { color: #a3a3a3; font-size: 12.5px; }

/* deploy bar: dev buy + deploy stick to the bottom of the form scroller */
.j7-dbar {
  position: sticky; bottom: 0; z-index: 3; margin: 0 calc(var(--px) * -1); padding: 6px var(--px) 3px;
  background: var(--c-form); display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 -12px 14px -12px rgb(0 0 0 / .8);
}
.j7-drow { display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.j7-ib.lg { width: var(--fld); height: var(--fld); font-size: 15px; }
.j7-adv { flex: 0 0 auto; display: flex; border: 1px solid #4746c4; border-radius: 7px; overflow: hidden; height: var(--fld); }
.j7-adv button { padding: 0 6px; color: #8381f8; font-weight: 700; font-size: 10.5px; border-right: 1px solid #4746c4; background: #23233a; }
.j7-adv button:last-child { border-right: 0; }
.j7-adv button:hover { background: #2d2c4d; color: #b3b2ff; }
.j7-deploy {
  flex: 1 1 0; min-width: 0; height: var(--fld); position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden;
  background: #2c2c2c; border: 1px solid #3d3d3d; border-radius: 8px; color: #7a7a7a; font-size: calc(var(--fs) + 1px); font-weight: 700;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.j7-deploy i { font-size: 15px; }
.j7-deploy .amt { font-variant-numeric: tabular-nums; }
.j7-deploy .kb { color: #666; font-weight: 500; font-size: .86em; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.j7-deploy.ready { color: #fff; background: linear-gradient(180deg, #3a3a3a, #2e2e2e); border-color: #5a5a5a; }
.j7-deploy.ready i { color: #c4c2ff; }
.j7-deploy.ready .kb { color: #9a9a9a; }
.j7-deploy.ready:hover { border-color: var(--c-acc); box-shadow: 0 0 0 1px rgb(109 106 245 / .35), 0 0 16px rgb(109 106 245 / .18); }
.j7-deploy:active { transform: translateY(1px); }
.j7-deploy.busy { background-image: repeating-linear-gradient(-45deg, rgb(109 106 245 / .2) 0 8px, transparent 8px 16px); background-size: 200% 100%; animation: j7-busy 1s linear infinite; }
.j7-deploy.fired { animation: j7-fired .5s ease-out, j7-busy 1s linear infinite; }
.j7-deploy.landed { animation: j7-landed 1.2s ease-out; }
@keyframes j7-busy { to { background-position: 45px 0; } }
@keyframes j7-fired { from { box-shadow: 0 0 0 0 rgb(109 106 245 / .85); } to { box-shadow: 0 0 0 12px rgb(109 106 245 / 0); } }
@keyframes j7-landed {
  0% { box-shadow: 0 0 0 0 rgb(74 222 128 / .9), 0 0 24px rgb(74 222 128 / .55); border-color: #4ade80; background: #1d4a2e; color: #dcfce7; }
  60% { border-color: #4ade80; }
  100% { box-shadow: 0 0 0 14px rgb(74 222 128 / 0), 0 0 0 rgb(74 222 128 / 0); }
}
.j7-num { flex: 0 0 auto; height: var(--fld); padding: 0 9px; display: inline-flex; align-items: center; background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 7px; color: #d6d6d6; font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.j7-num:hover { background: var(--c-btn-h); }
.j7-num.bump { animation: j7-pop .4s cubic-bezier(.2, 1.6, .4, 1); color: var(--c-green); }
.j7-srow { display: flex; align-items: center; gap: 8px; min-height: 20px; min-width: 0; }
.j7-status { flex: 1 1 0; display: flex; align-items: center; gap: 5px; height: 16px; min-width: 0; font-size: 11px; color: #7d7d7d; white-space: nowrap; overflow: hidden; }
.j7-status span { overflow: hidden; text-overflow: ellipsis; }
.j7-status i { font-size: 12.5px; flex: 0 0 auto; }
.j7-status.busy { color: #a5a3ff; }
.j7-status.busy i { animation: j7-spin .8s linear infinite; }
.j7-status.ok { color: var(--c-green); font-weight: 600; }
.j7-status.err { color: #ff7b7f; font-weight: 600; }
@keyframes j7-spin { to { transform: rotate(360deg); } }
@keyframes j7-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: none; } }

/* your coin, live (after a deploy lands) */
.j7-live {
  flex: 0 1 auto; display: none; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 2px; max-width: 70%; min-width: 0; overflow: hidden;
  border-radius: 99px; background: #1c1c1c; border: 1px solid #3a3a3a; color: #d8d8d8;
  font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.j7-live.show { display: inline-flex; animation: j7-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.j7-live:hover { border-color: #5a5a5a; }
.j7-live img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.j7-live .tk { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: #bdbdbd; }
.j7-live .mc { color: #fff; font-weight: 700; }
.j7-live .chg { color: #9a9a9a; }
.j7-live .pnl { color: var(--c-green); font-weight: 800; }
.j7-live .pnl:empty { display: none; }
.j7-live .pnl.neg { color: #ff7b7f; }
.j7-live.up .chg { color: var(--c-green); }
.j7-live.down .chg { color: #ff7b7f; }
.j7-live.big { border-color: #2f7a4d; background: #15271c; box-shadow: 0 0 12px rgb(74 222 128 / .22); }
.j7-live.huge { border-color: #4ade80; background: linear-gradient(90deg, #143020, #1d4430); animation: j7-glow 1.1s ease-in-out infinite alternate; }
.j7-live.huge .chg, .j7-live.huge .pnl { color: #bbf7d0; }
.j7-live .chg.tick { animation: j7-bump .45s ease-out; display: inline-block; }
@keyframes j7-glow { from { box-shadow: 0 0 8px rgb(74 222 128 / .25); } to { box-shadow: 0 0 20px rgb(74 222 128 / .6); } }
@keyframes j7-bump { 0% { transform: scale(1.35); text-shadow: 0 0 10px rgb(74 222 128 / .9); } 100% { transform: none; } }

.j7-isearch { display: flex; align-items: center; gap: 7px; height: calc(var(--h) + 4px); padding: 0 10px; background: var(--c-in); border: 1px solid var(--c-in-b); border-radius: var(--r); color: #9a9a9a; }
.j7-isearch .j7-in { padding: 0; font-size: var(--fs); }
.j7-isearch i { font-size: 13.5px; }
.j7-isearch button { color: #8a8a8a; }
.j7-isearch button:hover { color: #fff; }
.j7-isr { display: flex; flex-wrap: wrap; gap: 6px; }
.j7-isr:empty { display: none; }
.j7-isr-i { width: 44px; height: 44px; border-radius: 7px; overflow: hidden; border: 1px solid #3a3a3a; background: #111; }
.j7-isr-i img { width: 100%; height: 100%; object-fit: cover; }
.j7-isr-i:hover { border-color: var(--c-acc); }

/* base form (300-379px): tools keep their labels, chips tighten */
@container j7f (max-width: 339px) {
  .j7-tool .ext { display: none; }
  .j7-tool { padding: 0 6px; }
}
@container j7f (max-width: 359px) {
  .j7-opt .lb { padding: 0 3px; }
}
@container j7f (max-width: 379px) {
  .j7-lab { font-size: 9.5px; letter-spacing: .04em; }
  .j7-cbs { gap: 7px; }
  .j7-cb { letter-spacing: .02em; gap: 3px; }
  .j7-chip { padding: 0 6px; font-size: 11px; }
  .j7-chip.sq { width: 25px; padding: 0; }
  .j7-plat { gap: 3px; padding: 0 3px; font-size: 10.5px; }
  .j7-plat i { font-size: 12.5px; }
  .j7-ib.lg { display: none; } /* Send Supply / Unlink are cosmetic: Deploy keeps one row */
}
@container j7f (min-width: 360px) {
  .j7-opt .lb > i { display: inline-block; }
}
/* reference width */
@container j7f (min-width: 380px) {
  .j7-adv button { padding: 0 7px; font-size: 11px; }
  .j7-chip { height: 26px; font-size: 12px; padding: 0 9px; }
  .j7-chip.sq { width: 29px; }
  .j7-plat { font-size: 12px; }
  .j7-opt { font-size: 12px; }
}
/* roomy: every platform on one row */
@container j7f (min-width: 540px) {
  .j7-plats { grid-template-columns: repeat(8, minmax(0, 1fr)) auto; }
  .j7-plat, .j7-plat:nth-child(n+7) { grid-column: auto; }
  .j7-plat.gear { grid-column: 9; grid-row: 1; }
}

/* ---------------------------------------------------------------- feed */
.j7-feedwrap { container: j7feed / inline-size; position: relative; min-width: 0; min-height: 0; display: flex; background: var(--c-feed); }
.j7-feed { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; overscroll-behavior: contain; }
.j7-feed-list { display: flex; flex-direction: column; gap: 7px; padding: 6px 6px 12px; }
.j7-pill {
  position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 6px); z-index: 4;
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px;
  background: var(--c-acc); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 18px rgb(0 0 0 / .5); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
}
.j7-pill.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.j7-pill.paused { background: #333; color: #e6e6e6; border: 1px solid #555; }

.j7-tw {
  position: relative; flex: 0 0 auto; min-width: 0;
  background: var(--c-card); border: 1px solid var(--c-card-b); border-radius: 9px; padding: 0 9px 9px;
}
.j7-tw:hover { border-color: #3f3f3f; }
.j7-tw.hl { background: var(--c-hl-bg); border: 1.5px solid var(--c-hl); box-shadow: 0 8px 26px -14px rgb(133 69 197 / .7); }
/* new cards are fully visible immediately (reaction timing); only a glow fades */
.j7-tw.fresh { animation: j7-fresh 1.3s ease-out; }
.j7-tw.hl.fresh { animation: j7-fresh-hl 2s ease-out; }
.j7-tw.picked { animation: j7-picked .7s ease-out; }
@keyframes j7-fresh { from { box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 0 14px rgb(255 255 255 / .08); } to { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
@keyframes j7-fresh-hl { from { box-shadow: 0 0 0 2px rgb(168 85 247 / .8), 0 0 28px rgb(168 85 247 / .55); } to { box-shadow: 0 8px 26px -14px rgb(133 69 197 / .7); } }
@keyframes j7-picked { from { box-shadow: 0 0 0 2px rgb(109 106 245 / .9), 0 0 22px rgb(109 106 245 / .45); } to { box-shadow: 0 0 0 0 rgb(109 106 245 / 0); } }

.tw-head { display: flex; align-items: stretch; gap: 0; min-height: 50px; border-bottom: 1px solid #383838; min-width: 0; }
.j7-tw.hl .tw-head { border-bottom-color: #3a2d48; }
.tw-av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; align-self: center; object-fit: cover; background: #333; margin-right: 8px; box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
.tw-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding-right: 6px; }
.tw-l1 { display: flex; align-items: center; gap: 3px; min-width: 0; }
.tw-name { font-weight: 700; font-size: 12.5px; color: #f0f0f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.j7-tw.hl .tw-name { color: #b06cf3; }
.tw-badge { flex: 0 0 auto; font-size: 12.5px; color: #1d9bf0; }
.tw-badge.gold { color: #e5b53b; }
.tw-time { flex: 0 0 auto; font-size: 10px; color: #6a6a6a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-time.h { display: none; margin-left: 6px; }
.tw-time.a { margin-left: 2px; }
.tw-l2 { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #7b7b7b; min-width: 0; white-space: nowrap; overflow: hidden; }
.tw-l2 i { font-size: 11px; }
.tw-handle { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.j7-tw.hl .tw-handle { color: #9b6fd0; }
.tw-fol { color: #a5a5a5; font-weight: 600; }
.tw-vamp { flex: 0 0 auto; width: 30px; display: grid; place-items: center; color: #858585; border-left: 1px solid #383838; border-right: 1px solid #383838; font-size: 14px; }
.j7-tw.hl .tw-vamp { border-color: #3a2d48; }
.tw-vamp:hover { color: #fff; background: rgb(255 255 255 / .04); }
.tw-deploy {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; margin-right: -9px;
  font-weight: 800; font-size: 11px; letter-spacing: .04em; color: #f2f2f2; border-radius: 0 8px 0 0;
  transition: background .1s, color .1s;
}
.tw-deploy i { font-size: 14px; }
.tw-deploy:hover { background: #343434; color: #fff; }
.j7-tw.hl .tw-deploy:hover { background: #33264a; }
.tw-deploy:active { background: #3b3b3b; }
.j7-tw.hl .tw-deploy:active { background: #45305f; }

.tw-acts { display: flex; align-items: center; gap: 7px; padding: 7px 0 6px; min-width: 0; color: #8a8a8a; overflow: hidden; }
.tw-del { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; background: #c23b36; color: #ffdcd8; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.tw-del i { font-size: 11px; }
.tw-ctx { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; color: #8a8a8a; white-space: nowrap; overflow: hidden; }
.tw-ctx span { overflow: hidden; text-overflow: ellipsis; }
.tw-ctx.r .who { display: none; }
.tw-icons { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
.tw-icons button { font-size: 13.5px; color: #828282; line-height: 1; transition: color .1s; }
.tw-icons button:hover { color: #e6e6e6; }

.tw-text { font-size: 13px; line-height: 1.45; color: #ececec; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; }
.tw-hl { background: var(--c-pink); color: #1a0f17; border-radius: 4px; padding: 0 3px; font-weight: 600; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .1s; }
.tw-hl:hover { background: #ff7cc0; }
.tw-link { color: var(--c-blue); }
/* media: a fixed-aspect box (set inline from the picture) so a card never jumps */
.tw-media {
  position: relative; width: 100%; max-width: 440px; margin-top: 8px; border-radius: 12px; overflow: hidden;
  background: #1d1d1d linear-gradient(110deg, #1d1d1d 30%, #262626 50%, #1d1d1d 70%); background-size: 200% 100%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); cursor: zoom-in;
}
/* meme caption (impact text) laid over the picture; sized from the box width (cqw) */
.tw-media, .j7-zoom { container-type: inline-size; }
.tw-cap {
  position: absolute; left: 4%; right: 4%; top: 4.5%; z-index: 1; pointer-events: none;
  text-align: center; text-transform: uppercase; color: #fff; overflow-wrap: anywhere;
  font: 400 calc(11cqw / var(--ar, 1.5)) / 1.04 Impact, "Arial Black", "Segoe UI Black", sans-serif; letter-spacing: .01em;
  text-shadow: .06em .06em 0 #000, -.06em .06em 0 #000, .06em -.06em 0 #000, -.06em -.06em 0 #000, 0 .07em 0 #000, .07em 0 0 #000, 0 -.07em 0 #000, -.07em 0 0 #000, 0 .1em .2em rgb(0 0 0 / .5);
}
.tw-cap[hidden] { display: none; }
.tw-media .tw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .12s; }
.tw-media:hover .tw-img { filter: brightness(1.06); }
.tw-media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); pointer-events: none; }
.tw-quote { margin-top: 9px; border-left: 3px solid #6f7376; padding: 1px 0 1px 10px; }
.q-head { display: flex; align-items: center; gap: 5px; font-size: 11.5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.q-av { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: #333; }
.q-av.letter { display: inline-grid; place-items: center; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; text-transform: lowercase; }
.q-head .tw-badge { font-size: 12px; }
.q-name { font-weight: 700; color: #ececec; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.q-handle { color: #777; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.q-text { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #dedede; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; }
.tw-quote .tw-media { max-width: 360px; margin-left: auto; margin-right: auto; }
.j7-tw.deleted .tw-text, .j7-tw.deleted .q-text {
  background-image: repeating-linear-gradient(-45deg, rgb(130 40 40 / .3) 0 7px, transparent 7px 14px);
}
.j7-tw.deleted .tw-media::after { background-image: repeating-linear-gradient(-45deg, rgb(120 30 30 / .35) 0 9px, transparent 9px 18px); }
.j7-tw.collapsed .tw-body { display: none; }
.j7-tw.collapsed .tw-acts { padding-bottom: 0; }

.tw-ctx.q span { display: none; }
.tw-l2 .tw-dot, .tw-l2 i, .tw-fol { display: none; }
@container j7feed (max-width: 299px) {
  .tw-del span { display: none; } /* the red bin + striped text still say "deleted" */
  .tw-del { padding: 2px 5px; }
}
@container j7feed (min-width: 260px) {
  .tw-l2 .tw-dot, .tw-l2 i, .tw-fol { display: inline; }
  .tw-ctx.q span { display: inline; }
}
@container j7feed (min-width: 330px) {
  .j7-tw { padding: 0 11px 11px; }
  .tw-head { min-height: 56px; }
  .tw-av { width: 38px; height: 38px; margin-right: 9px; }
  .tw-name { font-size: 13.5px; }
  .tw-l2 { font-size: 11.5px; }
  .tw-time { font-size: 10.5px; }
  .tw-vamp { width: 36px; font-size: 15px; }
  .tw-deploy { font-size: 12px; padding: 0 16px; gap: 6px; margin-right: -11px; }
  .tw-deploy i { font-size: 16px; }
  .tw-ctx { font-size: 11px; }
  .tw-icons { gap: 11px; }
  .tw-icons button { font-size: 14.5px; }
  .tw-text { font-size: 14px; }
  .q-text { font-size: 13.5px; }
  .q-head { font-size: 12.5px; }
  .q-av { width: 22px; height: 22px; }
}
@container j7feed (min-width: 400px) {
  .tw-icons { gap: 13px; }
  .tw-ctx.r .who { display: inline; }
  .tw-time.h { display: inline; }
  .tw-time.a { display: none; }
}
@container j7feed (min-width: 470px) {
  .tw-deploy { padding: 0 26px; }
  .tw-text { font-size: 14.5px; }
}

/* ---------------------------------------------------------- hover zoom */
.j7-zoom {
  position: fixed; left: 0; top: 0; z-index: 850; pointer-events: none;
  border-radius: 12px; overflow: hidden; background: #111;
  border: 1px solid #3a3a3a; box-shadow: 0 24px 60px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; transform: translateX(-6px) scale(.97); transform-origin: left center;
  transition: opacity .1s ease-out, transform .12s ease-out, visibility 0s .12s;
}
.j7-zoom.lefty { transform: translateX(6px) scale(.97); transform-origin: right center; }
.j7-zoom.show { opacity: 1; visibility: visible; transform: none; transition: opacity .1s ease-out, transform .12s ease-out, visibility 0s; }
.j7-zoom img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- footer */
.j7-foot {
  flex: 0 0 auto; height: 29px; display: flex; align-items: stretch; min-width: 0;
  background: #1a1a1a; border-top: 1px solid #0b0b0b; font-size: 11.5px; color: #cfcfcf; white-space: nowrap; overflow: hidden;
}
.j7-brand { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 9px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.j7-fb { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-weight: 600; color: #cfcfcf; border-left: 1px solid #2b2b2b; }
.j7-fb:hover { background: #242424; color: #fff; }
.j7-fb i { font-size: 13px; }
.j7-foot .sp + .j7-fb { border-left: 0; }
.j7-fb.conn { color: #e2e2e2; }
.j7-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ed270; box-shadow: 0 0 6px rgb(46 210 112 / .6); }
.j7-fb.usd { padding: 0 7px; }
.j7-fb.region b { color: #fff; font-weight: 800; }
.j7-fb.region .ms { font-size: 10px; font-weight: 700; color: var(--c-yellow); font-variant-numeric: tabular-nums; }
.j7-fb.region .ms.good { color: var(--c-green); }
.j7-fb.region .ms.bad { color: #ff7b7f; }
.j7-fb.disc i { color: #7c86f7; font-size: 14px; }

/* ------------------------------------------- panel-width breakpoints (j7) */
@container j7 (max-width: 679px) {
  .j7-tb.settings .lbl, .j7-tb.dset .lbl { display: none; }
  .j7-tb.settings, .j7-tb.dset { width: 32px; padding: 0; }
}
@container j7 (max-width: 559px) {
  .j7-tab:nth-child(n+2):not(.j7-tab-add) { display: none; }
  .j7-fb.hist .lbl { display: none; }
  .j7-fb.drop { display: none; }
}
@container j7 (min-width: 560px) {
  .j7-tab:nth-child(n+3):not(.j7-tab-add) { display: none; }
}
@container j7 (max-width: 469px) {
  .j7-top { gap: 4px; padding: 6px 6px; }
  .j7-tb { padding: 0 7px; }
  .j7-tb.vamp .lbl { display: none; }
  .j7-tb.vamp { width: 32px; padding: 0; }
  .j7-tb.chat { padding: 0 7px 0 26px; }
}
@container j7 (max-width: 379px) {
  .j7-tb.chat .lbl { display: none; }
  .j7-tb.chat { flex: 0 0 32px; padding: 0; }
  .j7-tb.chat i { position: static; }
  .j7-tabs { flex: 0 1 auto; }
  .j7-tb.users { padding: 0 6px; }
  .j7-fb.conn .lbl, .j7-fb.disc { display: none; }
}

/* ------------------------------------------------------------ popovers */
.tx-pop.j7-pop {
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 9px; padding: 6px;
  font-family: var(--font-j7); font-size: 12px; color: #ececec; min-width: 180px; max-width: 300px;
  box-shadow: 0 14px 36px rgb(0 0 0 / .6);
}
.tx-pop.j7-pop.wide { width: 290px; max-width: calc(100vw - 16px); }
.j7-pop-h { display: flex; align-items: center; gap: 6px; padding: 3px 5px 7px; font-weight: 700; font-size: 12px; color: #fff; }
.j7-pop-h i { font-size: 14px; color: #a5a3ff; }
.j7-pop-h > span:first-of-type { flex: 1 1 auto; }
.j7-mi { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: #dcdcdc; text-align: left; font-size: 12px; }
.j7-mi:hover { background: #2b2b2b; color: #fff; }
.j7-mi i { font-size: 14px; color: #a3a3a3; }
.j7-mi .ck { margin-left: auto; color: #a5a3ff; }
.j7-mi.on { color: #fff; }
.j7-mi .dim { color: #777; font-size: 11px; }
.j7-sw { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 7px; border-radius: 6px; text-align: left; }
.j7-sw:hover { background: #262626; }
.j7-sw .sw-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.j7-sw .sw-t b { font-weight: 600; font-size: 12px; color: #e6e6e6; }
.j7-sw .sw-t small { font-size: 10.5px; color: #7b7b7b; }
.j7-sw .sw-k { flex: 0 0 auto; width: 28px; height: 16px; border-radius: 99px; background: #3a3a3a; position: relative; transition: background .12s; }
.j7-sw .sw-k i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #bdbdbd; transition: transform .12s; }
.j7-sw.on .sw-k { background: #6366f1; }
.j7-sw.on .sw-k i { transform: translateX(12px); background: #fff; }
.j7-prow { display: flex; align-items: center; gap: 8px; padding: 7px 7px 4px; font-size: 12px; color: #d6d6d6; }
.j7-prow > span:first-child { flex: 1 1 auto; font-weight: 600; }
.j7-prow .v { width: 34px; text-align: right; color: #a5a3ff; font-weight: 700; font-variant-numeric: tabular-nums; }
.j7-range { width: 110px; accent-color: #6366f1; }
.j7-seg { display: inline-flex; border: 1px solid #3a3a3a; border-radius: 6px; overflow: hidden; }
.j7-seg button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; color: #bdbdbd; font-weight: 600; font-size: 11.5px; }
.j7-seg button + button { border-left: 1px solid #3a3a3a; }
.j7-seg button.on { background: #6366f1; color: #fff; }
.j7-pin {
  width: 100%; display: block; margin: 0 0 6px; padding: 7px 9px; border-radius: 6px;
  background: #141414; border: 1px solid #333; color: #ececec; font-size: 12px; outline: 0; resize: vertical;
}
.j7-pin:focus { border-color: #4a4a58; }
.j7-pin:disabled { color: #666; }
.j7-pin.num { margin: 0; padding: 5px 6px; }
.j7-pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 30px; border-radius: 6px; background: #6366f1; color: #fff; font-weight: 700; font-size: 12px; }
.j7-pbtn:hover { background: #7476f5; }
.j7-pbtn:disabled { opacity: .6; cursor: progress; }
.j7-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.j7-psub { padding: 0 5px 8px; color: #8a8a8a; font-size: 11px; }
.j7-empty { padding: 10px 6px; color: #7b7b7b; font-size: 11.5px; text-align: center; }
.j7-vlist { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.j7-vrow { width: 100%; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; text-align: left; }
.j7-vrow:hover { background: #2a2a2a; }
.j7-vrow img, .j7-vrow .q-av { width: 30px; height: 30px; border-radius: 6px; flex: 0 0 auto; object-fit: cover; }
.j7-vrow .q-av { display: inline-grid; place-items: center; background: #2563eb; color: #fff; font-weight: 700; }
.j7-vrow .vm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.j7-vrow .vm b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j7-vrow .vm small { font-size: 10.5px; color: #8a8a8a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j7-vrow .va { font-size: 11px; color: #4ade80; font-weight: 600; font-variant-numeric: tabular-nums; }
.j7-vrow .vc { width: 54px; text-align: right; font-size: 11px; color: #d6d6d6; font-weight: 600; font-variant-numeric: tabular-nums; }
.j7-chat { height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 2px 5px 8px; }
.j7-chat .cm { font-size: 11.5px; color: #cfcfcf; line-height: 1.35; }
.j7-chat .cm b { color: #a5a3ff; margin-right: 6px; }
.j7-acc { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
.j7-acc:hover { background: #262626; }
.j7-acc img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.j7-acc .an { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.j7-acc .an small { color: #7b7b7b; font-size: 10.5px; }
.j7-acc .at { font-size: 9.5px; font-weight: 700; color: #777; letter-spacing: .04em; }
.j7-acc .at.hl { color: #b06cf3; }
.j7-lib { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 3px 3px; }
.j7-lib button { aspect-ratio: 1; border-radius: 7px; overflow: hidden; border: 1px solid #333; background: #111; }
.j7-lib button:hover { border-color: var(--c-acc, #6d6af5); }
.j7-lib img { width: 100%; height: 100%; object-fit: cover; }
.j7-buyedit { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 0 3px 8px; }
.j7-buyedit label { display: flex; align-items: center; gap: 3px; }

@media (prefers-reduced-motion: reduce) {
  .j7 *, .j7-zoom { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}