/* J7 panel (simulated j7tracker.io): neutral dark grays, Inter, 6-8px radii,
   purple outlines. The panel is 320-720px wide (default 430), so the layout is
   driven by container queries:
     .j7          (j7)     top bar / footer density, form+feed columns vs stacked (< 400px)
     .j7-form     (j7f)    form density: compact < 300px, roomy >= 300px
     .j7-feedwrap (j7feed) tweet card density */

.j7 {
  --c-top: #171717;
  --c-form: #272727;
  --c-feed: #151515;
  --c-card: #282828;
  --c-btn: #2a2a2a;
  --c-btn-h: #323232;
  --c-line: #383838;
  --c-in: #161616;
  --c-in-b: #0a0a0a;
  --c-tx: #ececec;
  --c-tx-2: #a8a8a8;
  --c-tx-3: #6e6e6e;
  --c-acc: #6d6af5;
  --c-hl: #8845c6;
  --c-hl-bg: #231c2b;
  --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: 29px; 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: 7px;
  color: var(--c-tx); font-weight: 600; font-size: 12px; white-space: nowrap;
}
.j7-tb:hover { background: var(--c-btn-h); border-color: #464646; }
.j7-tb i { font-size: 15px; color: #d6d6d6; }
.j7-tb.sq { width: 31px; padding: 0; }
.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; }
.j7-tabs { flex: 0 0 auto; min-width: 0; display: flex; align-items: stretch; height: 29px; border: 1px solid var(--c-line); border-radius: 7px; 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; }
.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: 27px; display: grid; place-items: center; color: #d6d6d6; font-size: 15px; }
.j7-tab-add:hover { background: var(--c-btn-h); }

/* ---------------------------------------------------------------- body */
.j7-body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: clamp(208px, 50%, 440px) minmax(0, 1fr);
  gap: 1px; background: #050505;
}

/* ---------------------------------------------------------------- form */
.j7-form {
  container: j7f / inline-size;
  min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
  background: var(--c-form);
}
.j7-fi {
  --h: 25px; --fs: 12px; --lab: 9.5px; --gap: 5px; --thumb: 40px; --r: 6px;
  display: flex; flex-direction: column; gap: var(--gap);
  padding: 6px 7px 8px; min-height: 100%;
}
.j7-fhead { display: flex; align-items: center; gap: 3px; }
.j7-ib {
  flex: 0 0 auto; width: 25px; height: 25px; display: inline-grid; place-items: center;
  background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 6px; color: #d0d0d0; font-size: 13px;
}
.j7-ib:hover { background: var(--c-btn-h); color: #fff; }
.j7-ib.sm { width: 21px; height: 21px; font-size: 12px; }
.j7-ib.dim { color: #6a6a6a; background: #252525; }
.j7-ib.on { color: var(--c-yellow); border-color: #7a6a17; background: #312e1d; }
.j7-ib.pop { display: none; }
.j7-wallet {
  height: 25px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px;
  background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; min-width: 0;
}
.j7-wallet i { font-size: 12px; color: #bdbdbd; }
.j7-wallet .wn { color: #cfcfcf; font-weight: 500; overflow: hidden; text-overflow: ellipsis; max-width: 50px; display: none; }
.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: nowrap; min-width: 0;
  font-size: var(--lab); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #b4b4b4; line-height: 1.25;
}
.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: 7px; }
.j7-cb { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-weight: 600; color: #b4b4b4; white-space: nowrap; }
.j7-cb input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.j7-cb .box { width: 11px; height: 11px; border: 1px solid #8c8c8c; border-radius: 2.5px; display: grid; place-items: center; flex: 0 0 auto; }
.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:hover .box { border-color: #c4c4c4; }
.j7-cb .full { display: none; }

.j7-field {
  display: flex; align-items: center; height: calc(var(--h) + 5px); min-width: 0;
  background: var(--c-in); border: 1px solid var(--c-in-b); border-radius: var(--r);
  transition: border-color .12s;
}
.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 14px rgb(168 85 247 / .35); } 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 9px;
  background: transparent; border: 0; outline: 0; color: var(--c-tx); font-size: calc(var(--fs) + 1px);
}
.j7-in::placeholder { color: #5f5f5f; }
.j7-jp { flex: 0 0 auto; height: 100%; display: inline-flex; align-items: center; gap: 1px; padding: 0 6px 0 4px; color: #6a6a6a; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; }
.j7-jp i { font-size: 12px; }
.j7-jp:hover { color: #bdbdbd; }
.j7-jp.on { color: var(--c-pink); }

.j7-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -1px; }
.j7-chip {
  height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center;
  background: #121212; border: 1px solid #2c2c2c; border-radius: 5px; color: #d4d4d4; font-size: 11px; font-weight: 500; white-space: nowrap;
}
.j7-chip:hover { border-color: #4a4a4a; color: #fff; }
.j7-chip.dash { background: transparent; border: 1px dashed #4e4e4e; color: #9a9a9a; }
.j7-chip.ghost { color: #5a5a5a; display: none; }
.j7-chip.sq { width: 26px; 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); gap: var(--gap); }
.j7-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.j7-twrow { display: flex; gap: 4px; min-width: 0; }
.j7-twrow .j7-field { flex: 1 1 auto; }
.j7-post {
  flex: 0 0 auto; height: calc(var(--h) + 5px); padding: 0 8px; display: inline-flex; align-items: center; gap: 3px;
  background: #333; border: 1px solid #404040; border-radius: var(--r); font-size: 11px; font-weight: 700; color: #f2f2f2;
}
.j7-post:hover { background: #3b3b3b; }
.j7-post i { font-size: 12px; }

.j7-seltitle { text-align: center; font-weight: 600; font-size: var(--fs); color: #d0d0d0; margin-top: 1px; }
.j7-gallery { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: var(--thumb); }
.j7-add {
  width: var(--thumb); height: var(--thumb); flex: 0 0 auto; display: grid; place-items: center;
  background: #121212; border: 1px dashed #4a4a4a; border-radius: 7px; color: #d6d6d6; font-size: 19px;
}
.j7-add:hover { border-color: #8a8a8a; color: #fff; }
.j7-noimg { color: #a0a0a0; font-size: 11px; margin-left: 4px; }
.j7-thumb { position: relative; width: var(--thumb); height: var(--thumb); flex: 0 0 auto; border-radius: 7px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: #111; }
.j7-thumb img { width: 100%; height: 100%; object-fit: cover; }
.j7-thumb:hover { border-color: #555; }
.j7-thumb.sel { border-color: var(--c-acc); box-shadow: 0 0 0 1px var(--c-acc), 0 0 10px rgb(109 106 245 / .35); }
.j7-thumb .x { position: absolute; top: 1px; right: 1px; width: 15px; height: 15px; border-radius: 50%; background: rgb(0 0 0 / .72); color: #fff; font-size: 10px; display: none; place-items: center; }
.j7-thumb:hover .x { display: grid; }

.j7-tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.j7-tool {
  flex: 0 0 auto; height: calc(var(--h) + 3px); min-width: calc(var(--h) + 1px); padding: 0 4px;
  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: 11px; font-weight: 700;
}
.j7-tool i { font-size: 14px; }
.j7-tool:hover { background: var(--c-btn-h); }
.j7-tool.dim { color: #727272; background: #242424; }
.j7-tool .lbl { display: none; }
.j7-tool .ext { font-size: 11px; color: #777; display: none; }
.j7-tool.on { border-color: #2f6b48; background: #22362a; color: #a7f3c4; }
.j7-tool.on .ext { color: #a7f3c4; }

.j7-plats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px;
  background: #262626; border: 1px solid #0c0c0c; border-radius: 8px;
}
.j7-plat {
  height: var(--h); min-width: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: #2e2e2e; border: 1px solid #3a3a3a; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: #d8d8d8;
}
.j7-plat i { font-size: 13px; flex: 0 0 auto; }
.j7-plat .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j7-plat:hover { background: #353535; }
.j7-plat.sel { background: #31483b; border-color: #3f7a55; color: #a7f3c4; box-shadow: inset 0 0 0 1px rgb(74 222 128 / .12); }
.j7-plat.gear { display: none; width: 26px; color: #a3a3a3; }

.j7-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.j7-opt {
  height: calc(var(--h) + 4px); min-width: 0; display: flex; align-items: stretch;
  background: #2a2a2a; border: 1px solid #383838; border-radius: 6px; overflow: hidden; color: #8a8a8a; font-size: 11px; font-weight: 700;
}
.j7-opt:hover { border-color: #4a4a4a; }
.j7-opt .ck { flex: 0 0 auto; width: 22px; display: grid; place-items: center; border-right: 1px solid #383838; }
.j7-opt .ck .sq { width: 11px; height: 11px; 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: 10px; 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: 4px; padding: 0 4px; white-space: nowrap; }
.j7-opt .lb > i { display: none; font-size: 13px; flex: 0 0 auto; }
.j7-opt .lb span { overflow: hidden; text-overflow: ellipsis; }
.j7-opt.on { color: #ededed; border-color: #484848; }
.j7-opt.on .ck .sq { border: 1px solid #cfcfcf; color: #fff; }
.j7-opt.on.yellow { background: #383522; border-color: #7a6a17; }
.j7-opt.on.yellow .ck { border-color: #7a6a17; }
.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)) auto; gap: 4px; }
.j7-buy {
  height: calc(var(--h) + 3px); min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: #292929; border: 1px solid #383838; border-radius: 6px; font-size: var(--fs); font-weight: 700; color: #ededed;
}
.j7-buy:hover { background: #313131; }
.j7-buy.sel { border-color: var(--c-acc); background: #2a2a3c; box-shadow: inset 0 0 0 1px rgb(109 106 245 / .35); }
.j7-buy.edit { width: calc(var(--h) + 3px); color: #a3a3a3; font-size: 12px; }

/* deploy bar: sticks to the bottom of the form scroller so Deploy is always reachable */
.j7-dbar {
  position: sticky; bottom: 0; z-index: 3; margin: 0 -7px; padding: 4px 7px 3px;
  background: var(--c-form); display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 -7px 9px -7px rgb(0 0 0 / .7);
}
.j7-drow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; }
.j7-ib.lg { width: calc(var(--h) + 5px); height: calc(var(--h) + 5px); font-size: 14px; }
.j7-adv { display: flex; border: 1px solid #4746c4; border-radius: 6px; overflow: hidden; height: calc(var(--h) + 5px); }
.j7-adv button { padding: 0 5px; color: #8381f8; font-weight: 700; font-size: 10px; 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 {
  order: 10; flex: 1 1 100%; min-width: 0; height: calc(var(--h) + 9px);
  display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden;
  background: #2b2b2b; border: 1px solid #3c3c3c; border-radius: 7px; color: #7c7c7c; font-size: calc(var(--fs) + 1px); font-weight: 700;
}
.j7-deploy i { font-size: 14px; }
.j7-deploy .kb { color: #6a6a6a; font-weight: 500; font-size: .86em; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.j7-deploy.ready { color: #fff; background: linear-gradient(180deg, #353535, #2c2c2c); border-color: #575757; }
.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); }
.j7-deploy:active { transform: translateY(1px); }
.j7-deploy.busy { background-image: repeating-linear-gradient(-45deg, rgb(109 106 245 / .18) 0 8px, transparent 8px 16px); background-size: 200% 100%; animation: j7-busy 1s linear infinite; }
@keyframes j7-busy { to { background-position: 45px 0; } }
.j7-num { height: calc(var(--h) + 5px); padding: 0 7px; display: inline-flex; align-items: center; background: var(--c-btn); border: 1px solid var(--c-line); border-radius: 6px; color: #d6d6d6; font-weight: 700; font-size: 11px; margin-left: auto; }
.j7-num:hover { background: var(--c-btn-h); }
.j7-status { display: flex; align-items: center; gap: 5px; height: 15px; font-size: 10.5px; color: #7d7d7d; white-space: nowrap; overflow: hidden; }
.j7-status span { overflow: hidden; text-overflow: ellipsis; }
.j7-status i { font-size: 12px; }
.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); } }

.j7-isearch { display: flex; align-items: center; gap: 6px; height: calc(var(--h) + 3px); padding: 0 8px; 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: 13px; }
.j7-isearch button { color: #8a8a8a; }
.j7-isearch button:hover { color: #fff; }
.j7-isr { display: flex; flex-wrap: wrap; gap: 5px; }
.j7-isr:empty { display: none; }
.j7-isr-i { width: 36px; height: 36px; border-radius: 6px; overflow: hidden; border: 1px solid #3a3a3a; }
.j7-isr-i img { width: 100%; height: 100%; }
.j7-isr-i:hover { border-color: var(--c-acc); }

/* roomy form (>= 300px wide): the reference layout, unlocked step by step */
@container j7f (min-width: 300px) {
  .j7-fi { --h: 28px; --fs: 12.5px; --lab: 10px; --gap: 6px; --thumb: 50px; padding: 7px 9px 9px; }
  .j7-dbar { margin: 0 -9px; padding: 5px 9px 3px; }
  .j7-adv button { padding: 0 6px; font-size: 10.5px; }
  .j7-ib { width: 27px; height: 27px; }
  .j7-ib.pop { display: inline-grid; }
  .j7-wallet { height: 27px; }
  .j7-wallet .wn { display: inline; }
  .j7-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .j7-tool.ai .lbl, .j7-tool.panel .lbl, .j7-tool .ext { display: inline; }
  .j7-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .j7-plat { font-size: 11px; }
  .j7-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .j7-chip { height: 24px; font-size: 11.5px; }
}
@container j7f (min-width: 330px) {
  .j7-cb .full { display: inline; }
  .j7-cb .short { display: none; }
  .j7-chip.ghost { display: inline-flex; }
}
@container j7f (min-width: 350px) {
  .j7-opt .lb > i { display: inline-block; }
  .j7-plats { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
  .j7-plat.gear { display: flex; }
}
/* wide form: Deploy shares one row with LTR/SOL/ASC like the screenshot */
@container j7f (min-width: 360px) {
  .j7-deploy { order: 0; flex: 1 1 0; height: calc(var(--h) + 5px); }
  .j7-num { margin-left: 0; }
}

/* ---------------------------------------------------------------- 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: auto; }
.j7-feed-list { display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 10px; }
.j7-pill {
  position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 6px); z-index: 4;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; 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: #3a3a3a; color: #e6e6e6; border: 1px solid #555; }

.j7-tw {
  position: relative; flex: 0 0 auto; min-width: 0;
  background: var(--c-card); border: 1px solid #303030; border-radius: 8px; padding: 7px 7px 8px;
}
.j7-tw.hl { background: var(--c-hl-bg); border: 1.5px solid var(--c-hl); }
/* 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; }
@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 / .75), 0 0 24px rgb(168 85 247 / .5); } to { box-shadow: 0 0 0 0 rgb(168 85 247 / 0); } }

.tw-head { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid #353535; min-width: 0; }
.j7-tw.hl .tw-head { border-bottom-color: #3a2d48; }
.tw-av { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: #333; }
.tw-who { flex: 1 1 auto; min-width: 0; }
.tw-l1 { display: flex; align-items: center; gap: 3px; min-width: 0; }
.tw-name { font-weight: 700; font-size: 12px; 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: 12px; color: #1d9bf0; }
.tw-badge.gold { color: #e5b53b; }
.tw-l2 { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #7b7b7b; min-width: 0; white-space: nowrap; overflow: hidden; }
.tw-l2 i { font-size: 10.5px; }
.tw-handle { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tw-l2 .tw-dot, .tw-l2 i, .tw-fol { display: none; }
.j7-tw.hl .tw-handle { color: #9b6fd0; }
.tw-fol { color: #a5a5a5; font-weight: 600; }
.tw-vamp { display: none; flex: 0 0 auto; align-self: stretch; width: 26px; margin: -7px 0 -6px; place-items: center; color: #8a8a8a; border-left: 1px solid #353535; border-right: 1px solid #353535; font-size: 14px; }
.tw-vamp:hover { color: #fff; background: rgb(255 255 255 / .04); }
.tw-deploy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 5px 4px; border-radius: 6px;
  font-weight: 800; font-size: 10px; letter-spacing: .03em; color: #f2f2f2; border: 1px solid transparent;
}
.tw-deploy i { font-size: 12.5px; }
.tw-deploy:hover { background: #363636; border-color: #4a4a4a; }
.j7-tw.hl .tw-deploy:hover { background: #3a2a4d; border-color: #6d3fa0; }
.tw-deploy:active { transform: translateY(1px); }

.tw-acts { display: flex; align-items: center; gap: 6px; padding: 5px 0 4px; min-width: 0; color: #8a8a8a; }
.tw-del { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 3px; background: #c23b36; color: #ffdcd8; font-size: 9.5px; 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: 10px; color: #8a8a8a; white-space: nowrap; overflow: hidden; }
.tw-ctx span { overflow: hidden; text-overflow: ellipsis; }
.tw-icons { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
.tw-icons button { font-size: 12.5px; color: #858585; line-height: 1; }
.tw-icons button:hover { color: #e6e6e6; }
.tw-time { margin-left: auto; flex: 0 0 auto; font-size: 9.5px; color: #686868; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tw-text { font-size: 12.5px; line-height: 1.42; 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; }
.tw-hl:hover { background: #ff7cc0; }
.tw-link { color: var(--c-blue); }
.tw-img { display: block; width: 100%; height: auto; aspect-ratio: 56 / 38; object-fit: cover; border-radius: 8px; margin-top: 7px; cursor: pointer; background: #1f1f1f; }
.tw-img:hover { outline: 1px solid #555; }
.tw-quote { margin-top: 8px; border-left: 3px solid #6f7376; padding: 1px 0 1px 9px; }
.q-head { display: flex; align-items: center; gap: 5px; font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; }
.q-av { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center; background: #2563eb; color: #fff; font-size: 9.5px; font-weight: 700; text-transform: lowercase; }
.q-name { font-weight: 700; color: #ececec; }
.q-handle { color: #777; overflow: hidden; text-overflow: ellipsis; }
.q-text { margin-top: 3px; font-size: 12px; line-height: 1.42; color: #dedede; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; }
.j7-tw.deleted .tw-text, .j7-tw.deleted .q-text, .j7-tw.deleted .tw-img {
  background-image: repeating-linear-gradient(-45deg, rgb(130 40 40 / .3) 0 7px, transparent 7px 14px);
}
.j7-tw.collapsed .tw-body { display: none; }
.j7-tw.collapsed .tw-acts { padding-bottom: 0; }

.tw-ctx.q span, .tw-ctx.r span { display: none; }
@container j7feed (min-width: 250px) {
  .tw-ctx.r span { display: inline; }
  .tw-vamp { display: grid; }
  .tw-deploy { padding: 5px 8px; gap: 3px; font-size: 10.5px; }
  .tw-l2 .tw-dot, .tw-l2 i, .tw-fol { display: inline; }
  .tw-av { width: 28px; height: 28px; }
  .tw-ctx.q span { display: inline; }
}
@container j7feed (min-width: 300px) {
  .j7-tw { padding: 9px 11px 10px; }
  .tw-av { width: 34px; height: 34px; }
  .tw-name { font-size: 13.5px; }
  .tw-l2 { font-size: 11px; }
  .tw-deploy { font-size: 12px; padding: 6px 12px; gap: 5px; }
  .tw-deploy i { font-size: 15px; }
  .tw-icons { gap: 10px; }
  .tw-icons button { font-size: 14px; }
  .tw-time { font-size: 10.5px; }
  .tw-text { font-size: 14px; }
  .q-text { font-size: 13.5px; }
  .q-head { font-size: 12.5px; }
}

/* -------------------------------------------------------------- footer */
.j7-foot {
  flex: 0 0 auto; height: 28px; 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: 31px; 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: 31px; padding: 0; }
  .j7-tb.chat { padding: 0 7px 0 26px; }
}
/* narrow panel: the feed stacks under the form (form gets a capped, scrollable slot) */
@container j7 (max-width: 399px) {
  .j7-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 54%) minmax(0, 1fr); }
  .j7-tb.chat .lbl { display: none; }
  .j7-tb.chat { flex: 0 0 31px; 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: 8px; 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: 286px; 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: 28px; height: 28px; border-radius: 5px; flex: 0 0 auto; }
.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: 26px; height: 26px; border-radius: 50%; }
.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: 6px; overflow: hidden; border: 1px solid #333; }
.j7-lib button:hover { border-color: var(--c-acc, #6d6af5); }
.j7-lib img { width: 100%; height: 100%; }
.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; }