/* Promo Market v2: one app, two tabs (Market | My dashboard), everything on a centred column like the live site
   (the operator, 2026-10-26: "maji tak uprostred vse, to se mi libi vic"). The site's palette only: cyan accent,
   green money and positive, red negative, blue, greys on the dark ground. Archivo Black for headings and big figures,
   JetBrains Mono for numbers and labels, Inter for reading. An explanation is a tooltip or a fold, never a paragraph. */
:root {
  --bg: rgb(10,14,23); --bg2: rgb(6,9,15); --card: rgb(13,21,32); --card2: rgb(17,26,40); --line: rgb(22,35,58); --line2: rgb(30,48,80); --hi: rgb(26,42,68);
  --text: rgb(230,237,247); --text2: rgb(169,184,204); --text3: rgb(127,147,173);
  --cyan: rgb(0,207,255); --green: rgb(0,255,136); --red: rgb(255,68,68); --blue: rgb(59,130,246);
  --display: 'Archivo Black', 'Inter', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Inter', system-ui, sans-serif;
  --r: 16px; --r2: 11px; --col: 1400px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background:
  radial-gradient(1100px 520px at 50% -12%, rgba(0,207,255,.10), transparent 62%),
  radial-gradient(700px 520px at 92% 40%, rgba(0,255,136,.045), transparent 60%), var(--bg); background-attachment: fixed; }
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--green); } .neg { color: var(--red); } .acc { color: var(--cyan); } .dim { color: var(--text3); }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 32px; }
::selection { background: rgba(0,207,255,.3); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 2px solid var(--bg); }

/* ---------------- the hologram cube: the Promo Market's mark (the Universe's building, in the page's colours) ---------------- */
/* The cube stands on one corner, tilted (the operator, 2026-10-26: "moc rovne hrany ... toci se moc rychle a jen dokola"):
   glass faces with soft glowing edges instead of drawn lines, each face a screen showing a product's page, a smaller
   cube turning inside it, and it sways and floats slowly instead of spinning. Every part moves by transform and opacity. */
.holo { --s: 180px; position: relative; width: calc(var(--s) * 2.1); height: calc(var(--s) * 2.2); display: grid; place-items: center; perspective: 1100px; }
.holo .cam { transform-style: preserve-3d; transform: rotateX(-12deg); }
.holo .bob { transform-style: preserve-3d; animation: holo-bob 6.5s ease-in-out infinite; }
@keyframes holo-bob { 50% { transform: translateY(calc(var(--s) * -0.06)); } }
.holo .stage { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: holo-sway 18s ease-in-out infinite; }
.holo.fast .stage { animation-duration: 11s; }
@keyframes holo-sway {
  0%, 100% { transform: rotateY(-34deg) rotateX(-35.264deg) rotateZ(45deg); }
  50% { transform: rotateY(36deg) rotateX(-35.264deg) rotateZ(45deg); } }
/* the edges are light, not lines: no hairline, a glow that is brightest at the rim and fades inward and outward;
   corners nearly square so the faces still meet, and only the faces turned to the viewer are drawn */
.holo .f { position: absolute; inset: 0; border-radius: calc(var(--s) * .035); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(140deg, rgba(0,207,255,.30), rgba(0,207,255,.09) 46%, rgba(0,255,136,.17));
  box-shadow: inset 0 0 calc(var(--s) * .05) rgba(0,207,255,.55), inset 0 0 calc(var(--s) * .22) rgba(0,207,255,.26), 0 0 calc(var(--s) * .2) rgba(0,207,255,.24); }
/* scan lines, the hologram's own texture, faint */
.holo .f::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,207,255,.04) 0 1px, transparent 1px 4px); }
/* a sheen passing over the glass now and then */
.holo .f::after { content: ''; position: absolute; inset: -50%; z-index: 2; pointer-events: none; transform: translateX(-70%);
  background: linear-gradient(115deg, transparent 42%, rgba(230,237,247,.22) 50%, transparent 58%); animation: holo-sheen 8s ease-in-out infinite; }
.holo .f2::after { animation-delay: 2s; } .holo .f3::after { animation-delay: 4s; } .holo .f4::after { animation-delay: 6s; }
@keyframes holo-sheen { 0%, 62% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.holo .f img { position: absolute; inset: 13%; width: 74%; height: 74%; object-fit: cover; object-position: top; border-radius: calc(var(--s) * .04);
  opacity: 0; transition: opacity 1s; filter: saturate(1.2) brightness(1.15); mix-blend-mode: screen; }
.holo .f img.on { opacity: .88; }
.holo .f1 { transform: translateZ(calc(var(--s) / 2)); }
.holo .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.holo .f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.holo .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.holo .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.holo .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
/* a soft light inside the glass, not an object */
.holo .core { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * .55); height: calc(var(--s) * .55); margin: calc(var(--s) * -.275); border-radius: 50%;
  background: radial-gradient(circle, rgba(232,251,255,.5) 0%, rgba(0,207,255,.26) 30%, rgba(0,207,255,0) 70%); animation: holo-core 3.4s ease-in-out infinite; }
@keyframes holo-core { 50% { transform: scale(1.18); opacity: .65; } }
/* the mark: the same cube, small, in the header and over the loader */
.holo.mini { width: 34px; height: 34px; perspective: 260px; flex: none; }
.holo.mini .aura, .holo.mini .pool, .holo.mini .beam, .holo.mini .sp, .holo.mini .core, .holo.mini .f img, .holo.mini .f::before { display: none; }
.holo.mini .f { border-radius: 1px; background: linear-gradient(140deg, rgba(0,207,255,.42), rgba(0,207,255,.08) 50%, rgba(0,255,136,.30));
  box-shadow: inset 0 0 0 1px rgba(232,251,255,.45), inset 0 0 6px rgba(0,207,255,.5), 0 0 6px rgba(0,207,255,.45); }
.holo.mini .cam { transform: rotateX(-12deg); }
/* the light around it: a glow that breathes out from the heart, a pool under it and a beam rising from the pool */
.holo .aura { position: absolute; left: 50%; top: 45%; width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); margin: calc(var(--s) * -.75); border-radius: 50%;
  background: radial-gradient(circle, rgba(0,207,255,.22), rgba(0,255,136,.06) 42%, transparent 68%); animation: holo-aura 4.2s ease-out infinite; pointer-events: none; }
@keyframes holo-aura { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.3); opacity: 0; } }
.holo .pool { position: absolute; left: 50%; bottom: 3%; width: calc(var(--s) * 1.7); height: calc(var(--s) * .36); margin-left: calc(var(--s) * -.85); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,207,255,.30), rgba(0,255,136,.08) 45%, transparent 70%); animation: holo-pool 6.5s ease-in-out infinite; }
@keyframes holo-pool { 50% { transform: scale(.88); opacity: .75; } }
.holo .beam { position: absolute; left: 50%; bottom: 8%; width: calc(var(--s) * .8); height: 58%; margin-left: calc(var(--s) * -.4); pointer-events: none; filter: blur(10px); opacity: .8;
  background: linear-gradient(0deg, rgba(0,207,255,.18), transparent); clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0); }
.holo .sp { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); opacity: 0; animation: holo-rise 5s linear infinite; }
.holo .sp:nth-child(2n) { background: var(--green); box-shadow: 0 0 8px var(--green); }
@keyframes holo-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(calc(var(--s) * -1)); opacity: 0; } }
.holo:hover .f { box-shadow: inset 0 0 0 1px rgba(230,237,247,.32), inset 0 0 calc(var(--s) * .26) rgba(0,207,255,.42), 0 0 calc(var(--s) * .2) rgba(0,207,255,.3); }
@media (prefers-reduced-motion: reduce) {
  .holo .bob, .holo .stage, .holo .core, .holo .aura, .holo .pool, .holo .sp, .holo .f::after { animation: none; }
  .holo .stage { transform: rotateY(-20deg) rotateX(-35.264deg) rotateZ(45deg); } }

/* ---------------- the loader: the cube wakes up as the page's requests come back ---------------- */
.boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse 70% 62% at 50% 44%, rgb(15,28,46) 0%, rgb(10,14,23) 58%, rgb(5,7,12) 100%); transition: opacity .7s ease, visibility .7s; }
.boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot::before { content: ''; position: absolute; inset: -40%; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(0,207,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(0,207,255,.10) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask: radial-gradient(ellipse 42% 36% at 50% 56%, rgb(0,0,0), transparent 75%); mask: radial-gradient(ellipse 42% 36% at 50% 56%, rgb(0,0,0), transparent 75%);
  animation: boot-grid 10s linear infinite; }
@keyframes boot-grid { to { transform: translate(64px, 64px); } }
.boot .bin { position: relative; display: grid; justify-items: center; gap: 4px; }
.boot .holo { --s: 150px; }
.boot .pct { font: 54px/1 var(--display); letter-spacing: -1px; margin-top: -8px; font-variant-numeric: tabular-nums; }
.boot .pct small { font: 600 18px var(--mono); color: var(--cyan); margin-left: 4px; }
.boot .lbl { font: 700 11px var(--mono); letter-spacing: 2.4px; text-transform: uppercase; color: var(--text3); margin-top: 8px; min-height: 16px; }
.boot .bar { width: 260px; height: 2px; border-radius: 2px; background: rgba(0,207,255,.12); margin-top: 16px; overflow: hidden; }
.boot .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: 0 0 12px var(--green); transition: width .25s linear; }
.boot .reqs { display: flex; gap: 8px; margin-top: 18px; }
.boot .reqs span { font: 600 10.5px var(--mono); color: var(--text3); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); transition: all .3s; }
.boot .reqs span.run { color: var(--cyan); border-color: rgba(0,207,255,.45); }
.boot .reqs span.ok { color: var(--green); border-color: rgba(0,255,136,.4); background: rgba(0,255,136,.06); }
.boot .brand2 { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font: 15px var(--display); color: var(--text2); }

/* ---------------- top bar ---------------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(6,9,15,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { height: 66px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand b { font: 18px var(--display); letter-spacing: -.2px; display: block; line-height: 1.05; }
.brand small { font: 500 10.5px var(--mono); color: var(--text3); letter-spacing: .4px; }
.tnav { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.tnav a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9px; font: 700 13.5px var(--sans); color: var(--text2); }
.tnav a svg { width: 16px; height: 16px; }
.tnav a:hover { color: var(--text); }
.tnav a.on { color: var(--text); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2), 0 0 18px rgba(0,207,255,.08); }
.tnav a.on svg { color: var(--cyan); }
.top .sp { flex: 1; }
.livechip { display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--mono); color: var(--text3); }
.who { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font: 600 12.5px var(--mono); }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 13px var(--display); color: var(--bg); background: linear-gradient(135deg, var(--cyan), var(--green)); flex: none; }
.av.lg { width: 44px; height: 44px; font-size: 18px; }

/* ---------------- buttons, chips, inputs ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--card2); font: 700 13.5px var(--sans); white-space: nowrap; transition: transform .12s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-1px); background: var(--hi); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.g { background: var(--green); color: rgb(6,9,15); border-color: transparent; box-shadow: 0 8px 26px rgba(0,255,136,.28), 0 0 0 1px rgba(0,255,136,.4); }
.btn.g:hover { box-shadow: 0 10px 34px rgba(0,255,136,.42), 0 0 0 1px rgba(0,255,136,.6); background: rgb(51,255,160); }
.btn.c { background: rgba(0,207,255,.10); color: var(--cyan); border-color: rgba(0,207,255,.45); }
.btn.c:hover { background: rgba(0,207,255,.18); }
.btn.gh { background: transparent; }
.btn.r { color: var(--red); border-color: rgba(255,68,68,.4); background: rgba(255,68,68,.06); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn.lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font: 600 11.5px var(--mono);
  background: rgba(230,237,247,.05); color: var(--text2); border: 1px solid var(--line); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip.c { color: var(--cyan); background: rgba(0,207,255,.08); border-color: rgba(0,207,255,.3); }
.chip.g { color: var(--green); background: rgba(0,255,136,.08); border-color: rgba(0,255,136,.3); }
.chip.r { color: var(--red); background: rgba(255,68,68,.08); border-color: rgba(255,68,68,.35); }
.chip.b { color: var(--blue); background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.35); }
.kick { font: 700 11px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan); }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,136,.55); } 70% { box-shadow: 0 0 0 8px rgba(0,255,136,0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); } }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); gap: 2px; }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--text3); font: 600 12px var(--mono); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.seg button svg { width: 14px; height: 14px; }
.seg button.on { background: var(--card2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.seg button .n { color: var(--text3); font-weight: 500; }
.seg button.on .n { color: var(--cyan); }
.seg button.off { opacity: .45; cursor: default; }
.in, select.in, textarea.in { width: 100%; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); outline: none; font: 500 14px var(--sans); }
textarea.in { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.in:focus { border-color: rgba(0,207,255,.6); box-shadow: 0 0 0 3px rgba(0,207,255,.12); }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%), linear-gradient(135deg, var(--text3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
label.f { display: grid; gap: 6px; font: 600 11px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--text3); }

/* tooltips: an explanation lives here, never in a paragraph on the page */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 80; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 300px; padding: 9px 11px; border-radius: 9px; background: rgb(6,9,15); border: 1px solid var(--line2);
  color: var(--text2); font: 500 12px/1.45 var(--sans); text-align: left; white-space: normal; letter-spacing: 0; text-transform: none; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.tipr[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.tipl[data-tip]:hover::after { left: 0; transform: none; }
.tipd[data-tip]:hover::after { bottom: auto; top: calc(100% + 8px); }
.i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line2); color: var(--text3); font: 700 9.5px var(--mono); cursor: help; vertical-align: 1px; flex: none; }

/* ---------------- cards and tiles ---------------- */
.card { border-radius: var(--r); background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); }
.card.pad { padding: 22px; }
.ch { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ch h3 { margin: 0; font: 17px var(--display); letter-spacing: -.2px; }
.ch .sp { flex: 1; }
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.tile { position: relative; padding: 18px 20px; border-radius: 14px; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); overflow: hidden; }
.tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--c, var(--cyan)), transparent); opacity: .85; }
.tile .k { font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.tile .k svg { width: 14px; height: 14px; }
.tile .v { font: 30px/1.1 var(--display); margin-top: 8px; letter-spacing: -.4px; white-space: nowrap; }
.tile .v small { font: 600 13px var(--mono); color: var(--text3); margin-left: 5px; letter-spacing: 0; }
.tile .s { font: 500 12px var(--mono); color: var(--text3); margin-top: 4px; }
.tile .s b { color: var(--green); font-weight: 600; }
.tile .meter { height: 5px; border-radius: 5px; background: rgba(230,237,247,.06); margin-top: 10px; overflow: hidden; }
.tile .meter i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px; color: var(--text3); font: 500 13px var(--mono); }
.empty b { font: 18px var(--display); color: var(--text); }
.lgd { display: flex; gap: 14px; flex-wrap: wrap; font: 500 11.5px var(--mono); color: var(--text3); }
.lgd i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dl { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--text3); margin-top: 6px; }
.bars { position: relative; }
.bars .none { position: absolute; inset: 0 0 18px; display: grid; place-items: center; font: 600 12.5px var(--mono); color: var(--text3); }
.bars .none span { padding: 6px 12px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); }
.lnk { font: 500 12px var(--mono); color: var(--cyan); }
.lnk:hover { text-decoration: underline; }
.code { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font: 500 12.5px/1.6 var(--mono); color: var(--text2); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.code .u { color: var(--cyan); }
.code .h { color: var(--green); }
details.fold { border-radius: 14px; border: 1px solid var(--line); background: rgba(13,21,32,.6); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 18px; font: 700 14px var(--sans); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary svg { width: 17px; height: 17px; color: var(--cyan); }
details.fold > summary .chev { margin-left: auto; color: var(--text3); transition: transform .2s; }
details.fold[open] > summary .chev { transform: rotate(180deg); }
details.fold .fb { padding: 0 18px 18px; }

/* ---------------- the market ---------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding: 40px 0 10px; }
.hero h1 { font: 64px/1.02 var(--display); letter-spacing: -1.6px; margin: 18px 0 16px; }
.hero h1 span { color: var(--green); text-shadow: 0 0 34px rgba(0,255,136,.25); }
.hero p.lead { font-size: 17px; color: var(--text2); margin: 0 0 26px; max-width: 560px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .vis { position: relative; display: grid; place-items: center; min-height: 420px; }
.hero .hstats { margin-top: 30px; max-width: 720px; }
.hero .hstats .tile .v { font-size: 26px; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 40px; position: relative; }
.steps4 .st { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(13,21,32,.7); border: 1px solid var(--line); position: relative; }
.steps4 .st + .st::before { content: ''; position: absolute; left: -15px; top: 50%; width: 16px; height: 1px; background: linear-gradient(90deg, var(--line2), var(--cyan)); }
.steps4 .no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 14px var(--display); color: rgb(6,9,15);
  background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 0 18px rgba(0,207,255,.35); }
.steps4 b { display: block; font: 700 14px var(--sans); }
.steps4 span { font: 500 12px var(--mono); color: var(--text3); }
.bhead { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.bhead h2 { margin: 0; font: 30px var(--display); letter-spacing: -.5px; }
.bhead .cnt { font: 600 13px var(--mono); color: var(--text3); padding-bottom: 5px; }
.bhead .sp { flex: 1; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.emptymk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px 30px; border-radius: 18px;
  background: linear-gradient(100deg, rgba(0,207,255,.07), rgba(13,21,32,.9) 60%); border: 1px dashed rgba(0,207,255,.35); }
.emptymk .holo { --s: 54px; width: 110px; height: 110px; }
.emptymk h3 { margin: 0 0 6px; font: 22px var(--display); }
.emptymk p { margin: 0; color: var(--text2); }

/* a brief's card: the product, its picture, what is up for grabs, what each result pays, Take it */
.bc { display: flex; flex-direction: column; border-radius: 18px; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); overflow: hidden; cursor: pointer;
  transition: transform .15s, border-color .2s, box-shadow .2s; }
.bc:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: 0 20px 44px rgba(0,0,0,.4), 0 0 0 1px rgba(0,207,255,.14); }
.bc .img { position: relative; height: 150px; background: var(--bg2); }
.bc .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,21,32,0) 50%, rgba(13,21,32,.95)); }
.bc .img .tl { position: absolute; right: 12px; top: 12px; z-index: 1; display: flex; gap: 6px; }
.bc .img .tl .chip { background: rgba(6,9,15,.86); backdrop-filter: blur(6px); }
.bc .bd { padding: 2px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bc .nm { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bc .nm b { font: 19px var(--display); letter-spacing: -.2px; }
.bc .say { margin: -4px 0 0; color: var(--text2); font-size: 13px; min-height: 38px; }
.ufg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0,255,136,.06); border: 1px solid rgba(0,255,136,.22); }
.ufg span { font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
.ufg b { font: 30px/1 var(--display); color: var(--green); text-shadow: 0 0 22px rgba(0,255,136,.3); white-space: nowrap; }
.ufg b small { font: 600 12px var(--mono); color: var(--text2); margin-left: 4px; text-shadow: none; }
.pays { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pays div { padding: 10px 10px 9px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.pays b { font: 17px var(--display); display: block; white-space: nowrap; }
.pays b small { font: 600 10.5px var(--mono); color: var(--text3); margin-left: 3px; }
.pays span { font: 500 11px var(--mono); color: var(--text3); }
.bc .btn.g { margin-top: auto; }

/* side by side: for builders, for AI agents */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin: 44px 0 18px; }
.duo .card { padding: 26px; }
.duo h3 { margin: 6px 0 14px; font: 24px var(--display); letter-spacing: -.3px; }
.how3 { display: grid; gap: 10px; margin-bottom: 18px; }
.how3 div { display: flex; gap: 12px; align-items: center; }
.how3 .no { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 12px var(--display); color: var(--cyan); border: 1px solid rgba(0,207,255,.45); }
.how3 span { color: var(--text2); }
.note { display: flex; gap: 10px; align-items: flex-start; font: 500 12.5px/1.5 var(--sans); color: var(--text3); }
.note svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 2px; }
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rule { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.rule .n { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,207,255,.08); border: 1px solid rgba(0,207,255,.3); color: var(--cyan); }
.rule .n svg { width: 16px; height: 16px; }
.rule b { display: block; font: 700 13px var(--sans); margin-bottom: 2px; }
.rule span { font: 500 12px/1.45 var(--sans); color: var(--text3); }
.foot { display: flex; gap: 22px; padding: 26px 0 60px; font: 500 12px var(--mono); color: var(--text3); }

/* ---------------- the dashboard ---------------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 28px; padding: 28px 0 64px; align-items: start; }
.rail { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; background: rgba(13,21,32,.7); border: 1px solid var(--line); max-height: calc(100vh - 110px); overflow: auto; }
.rail .me { display: flex; gap: 12px; align-items: center; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.rail .me b { display: block; font: 16px var(--display); }
.rail .me div span { font: 500 11px var(--mono); color: var(--text3); }
.rsec { font: 700 10px var(--mono); letter-spacing: 1.6px; color: var(--text3); padding: 12px 10px 6px; }
.rnav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font: 600 13.5px var(--sans); color: var(--text2); }
.rnav a svg { width: 16px; height: 16px; color: var(--text3); }
.rnav a:hover { color: var(--text); background: rgba(230,237,247,.03); }
.rnav a.on { color: var(--text); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.rnav a.on svg { color: var(--cyan); }
.rnav a .n { margin-left: auto; font: 600 11px var(--mono); color: var(--text3); padding: 1px 7px; border-radius: 99px; background: rgba(230,237,247,.05); }
.rnav a .n.hot { color: rgb(6,9,15); background: var(--cyan); }
.rlinks { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rlinks a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font: 600 12.5px var(--sans); color: var(--text3); }
.rlinks a svg { width: 15px; height: 15px; }
.rlinks a:hover { color: var(--text); }
.earn { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid rgba(0,255,136,.3); background: linear-gradient(135deg, rgba(0,255,136,.12), rgba(0,255,136,.03)); }
.earn .k { font: 600 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
.earn .v { font: 24px var(--display); color: var(--green); margin-top: 4px; }
.earn .v small { font: 600 11px var(--mono); color: var(--text2); }
.earn .s { font: 500 11.5px var(--mono); color: var(--text2); }
.main { min-width: 0; display: grid; gap: 18px; align-content: start; }
.ph { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ph h1 { margin: 0; font: 34px var(--display); letter-spacing: -.6px; }
.ph .sub { font: 500 12.5px var(--mono); color: var(--text3); padding-top: 8px; }
.ph .sp { flex: 1; }
.ph .back { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--mono); color: var(--text3); width: 100%; margin-bottom: -6px; }
.ph .back svg { width: 14px; height: 14px; transform: rotate(180deg); }

/* my products */
.pc { display: flex; flex-direction: column; border-radius: 16px; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); overflow: hidden; transition: transform .15s, border-color .2s, box-shadow .2s; cursor: pointer; }
.pc:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.pc .img { position: relative; height: 112px; }
.pc .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(13,21,32,.95)); }
.pc .img .tl { position: absolute; right: 10px; top: 10px; z-index: 1; }
.pc .img .tl .chip { background: rgba(6,9,15,.86); }
.pc .bd { padding: 2px 16px 16px; display: grid; gap: 8px; min-width: 0; }
.pc .nm { min-width: 0; }
.pc .nm b { font: 16px var(--display); display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc .lnk { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc .tr { display: flex; gap: 10px; font: 500 11px var(--mono); color: var(--text3); white-space: nowrap; }
.pc .tr b { color: var(--text); font-weight: 600; }
.pc .r3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pc .r3 div { padding: 7px 8px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); }
.pc .r3 b { font: 14px var(--display); display: block; }
.pc .r3 span { font: 500 9.5px var(--mono); color: var(--text3); white-space: nowrap; }
.pc .nob { font: 500 11.5px var(--mono); color: var(--text3); padding: 6px 0 2px; }

/* the priority post */
.prio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0; overflow: hidden; }
.prio .l { padding: 22px; }
.prio .r { border-left: 1px solid var(--line); background: rgba(6,9,15,.5); display: flex; flex-direction: column; }
.prio .r img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.prio .r .meta { padding: 16px; display: grid; gap: 10px; }
.tweet { padding: 16px 18px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font: 500 15px/1.55 var(--sans); }
.tweet .u { color: var(--cyan); }
.cc { display: flex; align-items: center; gap: 10px; font: 600 11.5px var(--mono); color: var(--text3); margin: 10px 0 14px; }
.cc .meter { flex: 1; height: 4px; border-radius: 4px; background: rgba(230,237,247,.06); overflow: hidden; }
.cc .meter i { display: block; height: 100%; background: var(--green); }
.acts { display: flex; gap: 10px; flex-wrap: wrap; }
.own { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.statusrow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font: 500 12.5px var(--mono); color: var(--text2); }
.card, .main > *, .g2 > *, .statusrow { min-width: 0; }
.statusrow { overflow: hidden; }
.statusrow > svg { width: 16px; height: 16px; flex: none; color: var(--text3); }
.statusrow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.measure { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: rgba(0,207,255,.05); border: 1px solid rgba(0,207,255,.22); font: 500 12.5px var(--mono); color: var(--text2); }
.measure b { color: var(--text); font-weight: 700; }
.measure svg { width: 16px; height: 16px; color: var(--cyan); }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; color: var(--text2); font-size: 13.5px; }
ol.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 12px var(--display); color: var(--cyan); border: 1px solid rgba(0,207,255,.45); }
ol.steps li b { color: var(--text); }

/* split views: a list on the left, the selected item beside it, one screen */
.split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0; height: calc(100vh - 334px); min-height: 560px; overflow: hidden; }
.split .list { border-right: 1px solid var(--line); overflow: auto; }
.split .item { display: block; width: 100%; text-align: left; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; }
.split .item:hover { background: rgba(230,237,247,.025); }
.split .item.on { background: rgba(0,207,255,.06); box-shadow: inset 3px 0 0 var(--cyan); }
.split .item .t { font: 600 13.5px/1.35 var(--sans); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.split .item .m { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; font: 600 11px var(--mono); color: var(--text3); }
.split .item .m .rel { margin-left: auto; color: var(--green); }
.split .view { overflow: auto; padding: 22px 26px; display: grid; gap: 16px; align-content: start; }
.split .view h2 { margin: 0; font: 22px/1.25 var(--display); letter-spacing: -.3px; }
.split .view .leadbar { position: sticky; top: -22px; z-index: 3; display: grid; gap: 10px; margin: -22px -26px 0; padding: 14px 26px; background: var(--bg2); border-bottom: 1px solid var(--line); }
.split .view .body { color: var(--text2); white-space: pre-wrap; font-size: 14px; max-height: 210px; overflow: auto; padding: 14px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font: 500 12px var(--mono); color: var(--text3); }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stepper div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font: 600 12.5px var(--sans); color: var(--text3); }
.stepper div.on { color: var(--text); border-color: rgba(0,207,255,.45); background: rgba(0,207,255,.06); }
.stepper div i { font: 12px var(--display); font-style: normal; color: var(--cyan); }
.pagepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pagepick button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font: 600 12.5px var(--sans); color: var(--text2); }
.pagepick button.on { border-color: rgba(0,255,136,.5); color: var(--text); background: rgba(0,255,136,.06); }
.pagepick button small { display: block; font: 500 10.5px var(--mono); color: var(--text3); }
.qbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qbar select.in { width: 340px; }
.comm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comm .card { padding: 18px; display: grid; gap: 10px; }
.comm .card b { font: 18px var(--display); }

/* radar apps */
.rapps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rapps button { text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; gap: 4px; }
.rapps button b { font: 15px var(--display); }
.rapps button span { font: 500 11px var(--mono); color: var(--text3); }
.rapps button.on { border-color: rgba(0,207,255,.55); background: rgba(0,207,255,.07); box-shadow: 0 0 0 1px rgba(0,207,255,.2), 0 12px 30px rgba(0,0,0,.3); }
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.who2 { display: grid; gap: 10px; }
.who2 .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.who2 .row > span:first-child { font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); width: 92px; }
.post { display: grid; gap: 10px; align-content: start; }
.post .hd { display: flex; align-items: center; gap: 10px; font: 700 13px var(--sans); }
.post .hd svg { width: 16px; height: 16px; color: var(--cyan); }
.post .hd .sp { flex: 1; }
.ptitle { font: 700 14px var(--sans); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: default; }
.tbl th.s { cursor: pointer; } .tbl th.s:hover { color: var(--text); } .tbl th.on { color: var(--cyan); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td { white-space: normal; } .tbl td .lnk { white-space: nowrap; } .tbl .ref { white-space: nowrap; }
.tbl tr.row { cursor: pointer; } .tbl tr.row:hover td { background: rgba(230,237,247,.02); }
.tbl tr.kid td { background: rgba(6,9,15,.55); font-size: 12.5px; color: var(--text2); }
.tbl tr.kid td:first-child { padding-left: 40px; }
.tbl .ttl { font-weight: 700; } .tbl .ttl small { display: block; font: 500 11px var(--mono); color: var(--text3); font-weight: 500; }
.tbl .ref { font: 500 11px var(--mono); color: var(--text3); }
.tbl .tw { display: flex; align-items: center; gap: 6px; }
.tbl .tw svg { width: 14px; height: 14px; color: var(--text3); transition: transform .2s; }
.tbl tr.open .tw svg { transform: rotate(90deg); color: var(--cyan); }
.tbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tbar .in { max-width: 320px; height: 36px; }
.trk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .6fr) auto; gap: 10px; align-items: end; }

/* kits */
.kits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.kits .card { padding: 22px; display: grid; gap: 14px; }
.kits h3 { margin: 0; font: 18px var(--display); }
.outlets { display: grid; gap: 8px; }
.outlets div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; color: var(--text2); }
.outlets b { display: flex; align-items: center; gap: 6px; font: 700 12px var(--mono); color: var(--text); }
.outlets b svg { width: 14px; height: 14px; color: var(--cyan); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* agent key + company guide */
.keyrow { display: flex; gap: 14px; align-items: center; }
.prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.prompts .card { padding: 20px; display: grid; gap: 12px; align-content: start; }
.prompts h3 { margin: 0; font: 17px var(--display); }
.guide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.gsteps { display: grid; gap: 8px; }
.gsteps details { border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.gsteps summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; font: 700 14px var(--sans); }
.gsteps summary::-webkit-details-marker { display: none; }
.gsteps summary i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 12px var(--display); font-style: normal; color: rgb(6,9,15); background: linear-gradient(135deg, var(--cyan), var(--green)); }
.gsteps summary .chev { margin-left: auto; color: var(--text3); width: 16px; height: 16px; transition: transform .2s; }
.gsteps details[open] summary .chev { transform: rotate(180deg); }
.gsteps p { margin: 0; padding: 0 16px 16px 56px; color: var(--text2); font-size: 13.5px; }

/* ---------------- Post a brief: one screen, three columns ---------------- */
/* the page is one 1080 screen: top bar 66 + title 56 + this column block with its padding */
.nb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .92fr); gap: 18px; padding: 18px 0 28px; height: calc(100vh - 123px); min-height: 760px; }
.nb > .card { overflow: hidden; }
.nb .colh { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.nb .colh .no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 12px var(--display); color: rgb(6,9,15); background: linear-gradient(135deg, var(--cyan), var(--green)); }
.nb .colh b { font: 17px var(--display); }
.nb .colh .sp { flex: 1; }
.nb .card { padding: 20px; display: flex; flex-direction: column; min-height: 0; }
.nbtop { display: flex; align-items: center; gap: 14px; height: 56px; padding-top: 14px; }
.nbtop h1 { margin: 0; font: 30px var(--display); letter-spacing: -.5px; }
.nbtop .back { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--mono); color: var(--text3); }
.nbtop .back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.pick { display: grid; gap: 6px; overflow: auto; flex: 0 1 auto; max-height: 258px; padding-right: 4px; margin-bottom: 14px; }
.pick button { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg2); text-align: left; }
.pick button img { width: 64px; height: 36px; object-fit: cover; border-radius: 7px; }
.pick button b { font: 700 13px var(--sans); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick button span { font: 500 10.5px var(--mono); color: var(--text3); }
.pick button em { font: 600 11px var(--mono); font-style: normal; color: var(--text3); padding-right: 6px; }
.pick button.on { border-color: rgba(0,255,136,.55); background: rgba(0,255,136,.06); box-shadow: 0 0 0 1px rgba(0,255,136,.2); }
.payrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 116px; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg2); }
.payrow + .payrow { margin-top: 8px; }
.payrow b { font: 700 13.5px var(--sans); display: block; }
.payrow span { font: 500 11px var(--mono); color: var(--text3); }
.payrow .in { height: 36px; text-align: right; font: 600 14px var(--mono); }
.payrow.off { opacity: .5; } .payrow.off .in { pointer-events: none; }
.tog { width: 34px; height: 20px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card2); position: relative; padding: 0; }
.tog::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text3); transition: all .2s; }
.tog.on { background: rgba(0,255,136,.25); border-color: rgba(0,255,136,.6); }
.tog.on::after { left: 16px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 14px; }
.quick { display: flex; gap: 6px; margin-top: 6px; }
.quick button { height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg2); font: 600 11px var(--mono); color: var(--text3); }
.quick button:hover { color: var(--text); }
.drop { display: grid; place-items: center; gap: 6px; text-align: center; padding: 22px; border-radius: 14px; border: 1.5px dashed rgba(0,207,255,.45); background: rgba(0,207,255,.04); color: var(--text2); cursor: pointer; transition: background .2s; }
.drop:hover, .drop.over { background: rgba(0,207,255,.09); }
.drop svg { width: 26px; height: 26px; color: var(--cyan); }
.drop b { font: 700 14px var(--sans); }
.drop span { font: 500 11.5px var(--mono); color: var(--text3); }
.mats { display: grid; gap: 8px; overflow: auto; flex: 1; min-height: 0; margin-top: 12px; padding-right: 4px; align-content: start; }
.mat { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg2); }
.mat .th { width: 74px; height: 42px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--card2); border: 1px solid var(--line); color: var(--cyan); position: relative; }
.mat .th img { width: 100%; height: 100%; object-fit: cover; }
.mat .th svg { width: 20px; height: 20px; }
.mat b { font: 700 13px var(--sans); display: block; }
.mat span { font: 500 11px var(--mono); color: var(--text3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.mat .x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: none; display: grid; place-items: center; color: var(--text3); }
.mat .x svg { width: 14px; height: 14px; }
.mat textarea.in { grid-column: 2 / 4; font-size: 12.5px; min-height: 58px; }
.mat.txt { grid-template-columns: 74px minmax(0, 1fr) auto; }
.preview { display: grid; gap: 14px; flex: 1; min-height: 0; }
.preview .bc { cursor: default; } .preview .bc:hover { transform: none; }
.buys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.buys div { padding: 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.buys b { font: 18px var(--display); display: block; }
.buys span { font: 500 10.5px var(--mono); color: var(--text3); }
.sendbar { display: grid; gap: 10px; margin-top: auto; }

/* ---------------- a brief's own page (its owner) ---------------- */
.bdhead { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px; }
.bdhead img { width: 168px; height: 70px; object-fit: cover; border-radius: 11px; border: 1px solid var(--line); }
.bdhead h1 { margin: 0 0 6px; font: 28px var(--display); letter-spacing: -.4px; }
.bdhead .acts { justify-content: flex-end; }
.g2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.funnel { display: grid; gap: 9px; }
.funnel .fr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font: 500 12px var(--mono); color: var(--text2); }
.funnel .fb { height: 26px; border-radius: 7px; background: rgba(230,237,247,.04); overflow: hidden; }
.funnel .fb i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, rgba(0,207,255,.85), rgba(0,207,255,.35)); }
.funnel .fr.g .fb i { background: linear-gradient(90deg, rgba(0,255,136,.9), rgba(0,255,136,.35)); }
.funnel .fr b { color: var(--text); font-weight: 700; text-align: right; }
.hbar { display: grid; gap: 9px; }
.hbar .hr { display: grid; grid-template-columns: 82px minmax(0, 1fr) 56px; gap: 10px; align-items: center; font: 500 12px var(--mono); color: var(--text2); }
.hbar .hr svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--cyan); }
.hbar .hb { height: 10px; border-radius: 5px; background: rgba(230,237,247,.05); overflow: hidden; }
.hbar .hb i { display: block; height: 100%; border-radius: 5px; background: var(--cyan); }
.hbar .hr b { text-align: right; color: var(--text); }
.quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.quote b { font: 700 13.5px var(--sans); }
.quote span { font: 500 11.5px var(--mono); color: var(--text3); }

/* ---------------- drawer, toast, the mockup's own controls ---------------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4,6,10,.62); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: 560px; max-width: 100vw; background: var(--bg); border-left: 1px solid var(--line2);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); overflow: auto; box-shadow: -30px 0 60px rgba(0,0,0,.45); }
.drawer.on { transform: none; }
.drawer .dh { position: relative; height: 196px; }
.drawer .dh img { width: 100%; height: 100%; object-fit: cover; }
.drawer .dh::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,23,.1) 30%, var(--bg)); }
.drawer .dh .x { position: absolute; right: 14px; top: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(6,9,15,.8); display: grid; place-items: center; }
.drawer .dh .x svg { width: 16px; height: 16px; }
.drawer .db { padding: 0 26px 30px; display: grid; gap: 16px; margin-top: -40px; position: relative; z-index: 1; }
.drawer h2 { margin: 0; font: 28px var(--display); letter-spacing: -.4px; }
.drawer .mgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.drawer .mg { border-radius: 12px; border: 1px solid var(--line); background: var(--card); overflow: hidden; display: grid; }
.drawer .mg .th { height: 96px; display: grid; place-items: center; background: var(--bg2); color: var(--cyan); position: relative; overflow: hidden; }
.drawer .mg .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drawer .mg .th svg { width: 26px; height: 26px; }
.drawer .mg .th .play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(6,9,15,.8); border: 1px solid rgba(0,207,255,.5); display: grid; place-items: center; }
.drawer .mg .mb { padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.drawer .mg .mb b { font: 700 12.5px var(--sans); display: block; }
.drawer .mg .mb span { font: 500 10.5px var(--mono); color: var(--text3); }
.drawer .mg .mb .sp { flex: 1; }
.drawer .mg.txt { grid-column: span 2; }
.drawer .mg.txt .tx { padding: 12px 14px; font-size: 13px; color: var(--text2); background: var(--bg2); }
.mylink { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px; border-radius: 12px; border: 1px solid rgba(0,255,136,.4); background: rgba(0,255,136,.06); }
.mylink b { font: 600 15px var(--mono); color: var(--green); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 120; transform: translate(-50%, 30px); opacity: 0; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px;
  background: var(--card2); border: 1px solid rgba(0,255,136,.4); font: 600 13px var(--sans); transition: all .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 16px; height: 16px; color: var(--green); }
.mock { position: fixed; left: 16px; bottom: 16px; z-index: 110; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px;
  background: rgba(6,9,15,.92); border: 1px solid var(--line2); box-shadow: 0 12px 34px rgba(0,0,0,.5); font: 700 10px var(--mono); letter-spacing: 1.2px; color: var(--text3); }
.mock .seg button { height: 26px; font-size: 11px; }
.mock .btn.sm { height: 30px; font-size: 11.5px; }
/* an icon inside a line of text stays on the line */
.lnk svg, .meta svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* ---------------- ET-32929 additions: the live page's own pieces, and phone widths ---------------- */
.tscroll { overflow-x: auto; }
.radar1 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.gside { display: grid; gap: 14px; position: sticky; top: 90px; }
@media (max-width: 1180px) {
  .grid4, .rules, .prompts, .kits, .comm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rapps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .top .wrap { height: auto; min-height: 58px; flex-wrap: wrap; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  .top .sp, .livechip, .brand small { display: none; }
  .tnav a { padding: 7px 10px; font-size: 12.5px; }
  .hero, .duo, .app, .g2, .g3, .guide, .rgrid, .radar1, .prio, .split, .bdhead { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 40px; letter-spacing: -1px; }
  .hero .vis { min-height: 240px; order: -1; }
  .steps4, .stepper, .pagepick, .buys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3, .grid4, .rules, .prompts, .kits, .comm, .rapps { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emptymk { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 20px; }
  .rail { position: static; max-height: none; }
  .rail .rnav { display: flex; flex-wrap: wrap; gap: 4px; }
  .split { height: auto; min-height: 0; }
  .split .list { max-height: 300px; }
  .split .view .leadbar { position: static; margin: -22px -26px 0; }
  .trk { grid-template-columns: minmax(0, 1fr); }
  .bdhead img { width: 100%; height: auto; }
  .funnel .fr { grid-template-columns: 110px minmax(0, 1fr) 50px; }
  .gside { position: static; }
  .drawer .db { padding: 0 16px 24px; }
}
@media (max-width: 900px) {
  .bhead { flex-wrap: wrap; }
  .seg { max-width: 100%; overflow-x: auto; }
  .qbar { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .statusrow { flex-wrap: wrap; }
  .statusrow .grow { white-space: normal; overflow: visible; text-overflow: clip; }
}