/* 2.8.52: card edges (data-border), corner shapes (data-shape) and the moving-effects switch (data-motion).
   Each style picks its own; the owner can change any of them in Branding -> Fine-tune. */

/* ---------- corner shapes (beat the style's own radii) ---------- */
html[data-shape="square"] { --r-sm: 0px; --r-md: 2px; --r-lg: 2px; --r-xl: 3px; --r-2xl: 4px; }
html[data-shape="sharp"] { --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px; }
html[data-shape="round"] { --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px; }
html[data-shape="soft"] { --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 28px; --r-2xl: 34px; }
html[data-shape="bubbly"] { --r-sm: 16px; --r-md: 22px; --r-lg: 30px; --r-xl: 36px; --r-2xl: 44px; }
html[data-shape="square"] .glyph, html[data-shape="square"] .btn, html[data-shape="square"] input, html[data-shape="square"] textarea,
html[data-shape="square"] select { border-radius: 2px; }
html[data-shape="sharp"] .glyph { border-radius: 8px; }
html[data-shape="bubbly"] .glyph { border-radius: 18px; }

/* ---------- card edges ---------- */
/* the cards that get an edge: content cards, home tiles, the home card and stat boxes */
html[data-border="none"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(transparent, transparent); border-color: transparent;
}
html[data-border="bold"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(var(--a-60), var(--a-60)); border-width: 2px;
}
html[data-border="gradient"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(135deg, var(--a), var(--a2)); border-width: 2px;
}
html[data-border="neon"] :is(.glass, .card):not(.flat),
html[data-border="pulse"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(135deg, var(--a), var(--a2) 55%, var(--a)); border-width: 1.5px;
  box-shadow: 0 0 0 1px var(--a-20), 0 0 22px -6px var(--a-60), inset 0 0 18px -10px var(--a-60), var(--shadow);
}
html[data-border="pulse"] :is(.tile, .portal, .glass.card:not(.flat)) { animation: lk-pulse 3.6s ease-in-out infinite; }
@keyframes lk-pulse {
  50% { box-shadow: 0 0 0 1px var(--a-45), 0 0 34px -4px var(--a-60), inset 0 0 22px -8px var(--a-60), var(--shadow); }
}
html[data-border="frame"] :is(.glass, .card):not(.flat):not(.stat) {
  outline: 1px solid var(--a-45); outline-offset: -6px;
}
html[data-border="frame"] :is(.tile, .portal) { outline-color: color-mix(in oklab, var(--a) 60%, transparent); }
html[data-border="double"] :is(.glass, .card):not(.flat):not(.stat) {
  outline: 3px double var(--a-45); outline-offset: -6px;
}
html[data-border="dashed"] :is(.glass, .card):not(.flat):not(.stat) {
  outline: 1.5px dashed var(--a-45); outline-offset: -6px;
}
html[data-border="pixel"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(var(--a), var(--a)); border-width: 2px; border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--a-45), var(--shadow);
}
html[data-border="pixel"] .tile:hover { box-shadow: 6px 6px 0 0 var(--a-60); }
html[data-border="raised"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(var(--a-30), var(--a-30)); border-width: 1.5px;
  box-shadow: 0 5px 0 0 color-mix(in oklab, var(--a) 55%, #000), 0 10px 22px -10px var(--a-60);
}
html[data-border="raised"] .tile:active { transform: translateY(4px); box-shadow: 0 1px 0 0 color-mix(in oklab, var(--a) 55%, #000); }
html[data-border="raised"] .tile:hover { transform: translateY(-1px); }
/* the outline surface draws a plain border: give it the edge colour too */
html[data-surface="outline"][data-border="bold"] :is(.glass, .card):not(.flat) { border: 2px solid var(--a-60); }
html[data-surface="outline"][data-border="gradient"] :is(.glass, .card):not(.flat) { border: 2px solid var(--a-45); }
html[data-surface="outline"][data-border="neon"] :is(.glass, .card):not(.flat),
html[data-surface="outline"][data-border="pulse"] :is(.glass, .card):not(.flat) { border: 1.5px solid var(--a); }
html[data-surface="outline"][data-border="pixel"] :is(.glass, .card):not(.flat) { border: 2px solid var(--a); }
html[data-surface="outline"][data-border="none"] :is(.glass, .card):not(.flat) { border-color: transparent; }

/* ---------- moving effects off: everything decorative stands still ---------- */
html[data-motion="off"] :is(.backdrop, .portal, .tileart, .vsplash, .stylecard, .tile, .bloom, .orb),
html[data-motion="off"] :is(.backdrop, .portal, .tileart, .vsplash, .stylecard, .tile, .bloom, .orb) *,
html[data-motion="off"] :is(.backdrop, .portal, .tileart, .tile, .orb)::before,
html[data-motion="off"] :is(.backdrop, .portal, .tileart, .tile, .orb)::after,
html[data-motion="off"] :is(.backdrop, .portal, .tileart) *::before,
html[data-motion="off"] :is(.backdrop, .portal, .tileart) *::after { animation-play-state: paused !important; }
html[data-motion="off"] .backdrop > .fx { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-border="pulse"] :is(.tile, .portal, .glass.card) { animation: none; }
}

/* ---------- the layout picker (Branding -> Layout) ---------- */
.layoutgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.layoutcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: rgba(var(--tint), .03); cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; }
.layoutcard.on { border-color: var(--a); box-shadow: 0 0 0 1px var(--a), var(--glow); }
.layoutcard b { font-size: 14px; }
.layoutcard .hint { font-size: 11.5px; }
.lc-shot { position: relative; height: 210px; border-radius: var(--r-md); overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.lc-shot iframe { position: absolute; top: 0; left: 0; width: 390px; height: 1100px; border: 0; transform: scale(.36); transform-origin: 0 0; pointer-events: none; }
.lc-shot .lc-skip { position: absolute; inset: 0; }
.finetune .ft-row { display: grid; gap: 6px; }
.finetune .ft-row > span { font-weight: 600; font-size: 13.5px; }
.finetune .chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.finetune .chipset label { position: relative; }
.finetune .chipset input { position: absolute; opacity: 0; pointer-events: none; }
.finetune .chipset span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2);
  font-size: 12.5px; cursor: pointer; background: rgba(var(--tint), .03); }
.finetune .chipset input:checked + span { border-color: var(--a); background: var(--a-12); color: var(--hi); box-shadow: 0 0 0 1px var(--a-45); }
.finetune .chipset input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.ft-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lc-shot .lc-scale { position: absolute; top: 0; left: 0; width: 390px; padding: 12px; transform: scale(.4); transform-origin: 0 0; pointer-events: none; display: block; }
.lc-shot .lc-scale .bento { display: grid; }
@media (min-width: 700px) { .layoutgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .lc-shot { height: 260px; } .lc-shot .lc-scale { transform: scale(.5); } }
.curlayout { gap: 14px; align-items: center; }
.lc-shot.mini { flex: 0 0 120px; width: 120px; height: 170px; border-radius: var(--r-md); }
.lc-shot.mini .lc-scale { transform: scale(.3); }
.lc-scale .tt, .lc-scale .tl, .lc-scale .ts { display: block; }

/* 2.8.52: every tile's icon follows the style's colours (they used to be fixed green, orange and pink),
   with a small twist per tile so they still read as different things */
.tile.hue2 .glyph, .tile.sporttile .glyph, .tile.shoptile .glyph, .tile.lifestyletile .glyph, .tile.videotile .glyph {
  box-shadow: 0 10px 26px -10px var(--a), inset 0 1px 0 rgba(255,255,255,.35);
}
/* 3.0: every tile icon uses the community's own gradient (so Branding -> Colour, intensity and black-in-the-middle reach them all) */
.tile .glyph, .tile.hue2 .glyph, .tile.sporttile .glyph, .tile.shoptile .glyph, .tile.lifestyletile .glyph, .tile.videotile .glyph, .tile.prizestile .glyph {
  background: var(--glyph-bg, linear-gradient(160deg, var(--a2), var(--a))); }
.tile.hue2::after { background: radial-gradient(closest-side, color-mix(in oklab, var(--a2) 30%, transparent), transparent); }

/* 2.8.54: the branding preview bar */
.pvbar { position: fixed; z-index: 120; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 99px;
  background: color-mix(in oklab, var(--solid, #111) 88%, transparent); border: 1px solid var(--a);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), 0 0 0 3px var(--a-20); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--fg); font-size: 13px; max-width: 560px; margin-inline: auto; }
.pvbar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvbar .pv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); flex: none; animation: pv-blink 1.6s ease-in-out infinite; }
.pvbar form { gap: 6px; flex: none; }
@keyframes pv-blink { 50% { opacity: .35; } }
body:has(.pvbar) .main { padding-top: 54px; }
.pvbtn { margin-top: 6px; }
.pvbar .pv-sub { font-weight: 500; color: var(--mfg); }
@media (max-width: 360px) { .pvbar .pv-sub { display: none; } }

/* 2.8.54: Sport / Lifestyle before the owner has them */
.tile.locked { cursor: default; }
.tile.locked .tileart, .tile.locked .glyph { filter: saturate(.55); opacity: .75; }
.tile.locked:hover { transform: none; }
.lockpill { gap: 4px; background: rgba(0,0,0,.45); color: #fff; border-color: rgba(255,255,255,.25); white-space: normal; }

/* the style picker's bottom bar: room for Preview */
.stylebar { flex-wrap: wrap; }
.stylebar .grow { min-width: 140px; }

/* 2.8.54: Tile animation (Fine-tune). "own" keeps each picture set's own movement; anything else replaces it.
   The drawing (.ta-svg) moves; sheen, sparkle and scan are drawn over the tile on .tile::after (the corner glow). */
html[data-tilefx]:not([data-tilefx="own"]) .tileart,
html[data-tilefx]:not([data-tilefx="own"]) .tileart *,
html[data-tilefx]:not([data-tilefx="own"]) .tileart *::before,
html[data-tilefx]:not([data-tilefx="own"]) .tileart *::after,
html[data-tilefx]:not([data-tilefx="own"]) .tileart::before,
html[data-tilefx]:not([data-tilefx="own"]) .tileart::after { animation: none !important; }
html[data-tilefx="float"] .bento .tile .tileart .ta-svg { animation: tfx-float 5s ease-in-out infinite !important; }
html[data-tilefx="pulse"] .bento .tile .tileart .ta-svg { animation: tfx-pulse 4s ease-in-out infinite !important; }
html[data-tilefx="tilt"] .bento .tile .tileart .ta-svg { animation: tfx-tilt 6s ease-in-out infinite !important; transform-origin: 50% 80%; }
html[data-tilefx="drift"] .bento .tile .tileart .ta-svg { animation: tfx-drift 9s ease-in-out infinite alternate !important; }
html[data-tilefx] .bento .tile:nth-child(2n) .tileart .ta-svg, html[data-tilefx] .bento .tile:nth-child(2n)::after { animation-delay: -1.3s !important; }
html[data-tilefx] .bento .tile:nth-child(3n) .tileart .ta-svg, html[data-tilefx] .bento .tile:nth-child(3n)::after { animation-delay: -2.6s !important; }
@keyframes tfx-float { 50% { transform: translateY(-6px); } }
@keyframes tfx-pulse { 50% { opacity: .65; transform: scale(1.06); } }
@keyframes tfx-tilt { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes tfx-drift { from { transform: translateX(8px); } to { transform: translateX(-12px); } }
html[data-tilefx="sheen"] .bento .tile::after, html[data-tilefx="sparkle"] .bento .tile::after, html[data-tilefx="scan"] .bento .tile::after {
  display: block; opacity: 1; border-radius: 0; transform: none; right: auto; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
html[data-tilefx="sheen"] .bento .tile::after {
  left: -60%; width: 220%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.2) 50%, transparent 58%);
  animation: tfx-sheen 5.5s ease-in-out infinite; }
@keyframes tfx-sheen { 0%, 50% { transform: translateX(-50%); } 100% { transform: translateX(50%); } }
html[data-tilefx="sparkle"] .bento .tile::after {
  background: radial-gradient(1.8px 1.8px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 18%, #fff, transparent),
    radial-gradient(2px 2px at 86% 62%, var(--a2), transparent), radial-gradient(1.5px 1.5px at 42% 78%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 60% 45%, var(--a), transparent);
  animation: tfx-twinkle 2.8s ease-in-out infinite; }
@keyframes tfx-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
html[data-tilefx="scan"] .bento .tile::after {
  height: 30%; background: linear-gradient(transparent, color-mix(in oklab, var(--a) 30%, transparent), transparent);
  animation: tfx-scan 4s linear infinite; }
@keyframes tfx-scan { from { transform: translateY(-100%); } to { transform: translateY(380%); } }
html[data-tilefx="sheen"] .bento .tile:hover::after, html[data-tilefx="sparkle"] .bento .tile:hover::after,
html[data-tilefx="scan"] .bento .tile:hover::after { transform: none; }
@media (prefers-reduced-motion: reduce) { html[data-tilefx] .tileart .ta-svg, html[data-tilefx] .bento .tile::after { animation: none !important; } }
/* 2.8.57: Fine-tune sections fold away */
.finetune .ft-fold { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 0 14px; background: rgba(var(--tint), .02); }
.finetune .ft-fold > summary { padding: 12px 0; gap: 10px; }
.finetune .ft-fold > summary b { display: block; font-size: 14px; }
.finetune .ft-fold > summary .ft-now { display: block; font-size: 12px; }
.finetune .ft-fold[open] { padding-bottom: 14px; }
.finetune .ft-fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }

/* 2.8.58: move channels up and down straight from the list */
.chcard > summary .chmove { display: inline-flex; gap: 4px; flex: none; }
.chcard > summary .chmove .iconbtn { width: 34px; height: 34px; }
.chcard > summary .chmove .iconbtn[disabled] { opacity: .3; pointer-events: none; }
.chmove[id] { scroll-margin-top: 220px; }

/* 2.8.59: read receipts on the team's messages */
.tick { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--dim); margin-right: auto; }
.tick .i { width: 12px; height: 12px; }
.tick .i + .i { margin-left: -7px; }
.tick span { margin-left: 3px; }
.tick.seen { color: var(--a); }
.msg.mine .tick { margin-right: 0; margin-left: auto; }
button.tick.seenby { border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 9px; background: rgba(var(--tint), .03); cursor: pointer; }
button.tick.seenby .i { width: 13px; height: 13px; }
.seenpop { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: color-mix(in oklab, var(--solid) 92%, transparent); font-size: 12.5px; }
.seenpop b { display: block; margin: 6px 0 2px; font-size: 12px; color: var(--mfg); }
.seenpop b:first-child { margin-top: 0; }
.seenpop .names { color: var(--fg); line-height: 1.5; }
.tile.prizestile .glyph { background: linear-gradient(160deg, var(--a2), var(--a)); box-shadow: 0 10px 26px -10px var(--a), inset 0 1px 0 rgba(255,255,255,.35); }

/* 2.8.59: Prize Room */
h2.sect { font: 800 15px/1.2 var(--display); margin: 18px 4px 8px; color: var(--mfg); letter-spacing: .02em; }
.pzgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.pzgrid.ended .pzcard { opacity: .78; }
.pzcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); color: inherit; text-decoration: none; min-width: 0; }
.pz-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, var(--a-20), rgba(var(--tint),.04)); }
.pz-img img { width: 100%; height: 100%; object-fit: cover; }
.pz-ph .i { width: 38px; height: 38px; color: var(--a); opacity: .85; }
.pz-kind { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.55); color: #fff; border: 0; backdrop-filter: blur(6px); }
.pz-price { font: 800 15px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.pz-price.big { font-size: 22px; }
.pz-left { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--a); font-variant-numeric: tabular-nums; }
.pz-left.done { color: var(--mfg); font-weight: 600; }
[data-ends].soon, [data-ends].soon span { color: var(--bad); }
.pz-hero { width: 100%; max-height: 380px; object-fit: contain; border-radius: var(--r-md); background: rgba(var(--tint),.04); }
.pz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pz-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(var(--tint),.04); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pz-desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.pz-total { align-self: end; padding-bottom: 10px; font-size: 14px; }
.pz-owed { text-decoration: none; color: inherit; margin-bottom: 10px; }
.pz-paybox .ref-code { word-break: break-all; }
.pz-paybox .ref-code .pz-addr { font-size: 13px; letter-spacing: 0; line-height: 1.4; }
.pz-qr { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 12px; align-self: center; }
.pz-coins { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-wait { display: flex; align-items: center; gap: 6px; }
.pz-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--input); border: 1px solid var(--line-2); }
.pz-kinds .segbtn { position: relative; }
.pz-kinds .segbtn input { position: absolute; opacity: 0; pointer-events: none; }
.pz-kinds .segbtn span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--mfg); cursor: pointer; }
.pz-kinds .segbtn input:checked + span { background: var(--a); color: #fff; }
.pz-kinds .segbtn input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.item-fold > summary { list-style: none; cursor: pointer; }
.item-fold > summary::-webkit-details-marker { display: none; }
.item-fold .arrows { gap: 2px; }
.pz-row { flex-wrap: wrap; }
.pz-row > .grow { flex: 1 1 60%; min-width: 0; }
.pz-row > form { gap: 6px; margin-left: auto; }

/* 2.8.59: Email - how to send */
.mailway { display: grid; gap: 8px; }
.mailopt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--tint),.03); cursor: pointer; }
.mailopt > input { margin-top: 3px; accent-color: var(--a); }
.mailopt > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mailopt > span .hint { flex-basis: 100%; }
.mailopt:has(input:checked) { border-color: var(--a); background: var(--a-6); }
ol.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.pz-win > summary { cursor: pointer; }
.pz-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pz-facts > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(var(--tint),.04); border: 1px solid var(--line); min-width: 0; }
.pz-facts > .wide { grid-column: 1 / -1; }
.pz-facts .mono, .pz-tx { overflow-wrap: anywhere; font-size: 12px; }
.pz-done-form { padding-top: 12px; border-top: 1px dashed var(--line-2); }
.pz-sent .pz-desc { padding: 10px 12px; border-radius: var(--r-md); background: rgba(var(--tint),.04); border: 1px solid var(--line); }
/* 2.8.63: the "up to 30 minutes, don't pay twice" notice stands out */
.alert.paywarn { font-size: 15px; line-height: 1.45; border-width: 2px; padding: 14px 16px; }
.alert.paywarn b { font-weight: 800; }

/* 2.8.65: Your quick widgets (one swipeable row on home) */
.wbox { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.whead { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.whead > b { flex: 1; font: 800 14px/1.2 var(--display); letter-spacing: .01em; }
.wswipe { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--mfg); animation: wnudge 2.4s ease-in-out infinite; }
@keyframes wnudge { 50% { transform: translateX(3px); } }
.wedit { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--a); padding: 5px 10px; border-radius: 99px; background: var(--a-6); border: 1px solid var(--a-20); }
.wrow { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 6px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.wrow::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .wrow { grid-auto-columns: calc(33.333% - 8px); } }
.wgt { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; min-height: 118px; padding: 12px 13px;
  border-radius: var(--r-lg); color: inherit; text-decoration: none; overflow: hidden; min-width: 0; }
.wgt .wh { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mfg); min-width: 0; padding-right: 22px; }
.wgt .gl { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(150deg, var(--a2), var(--a)); color: #fff; }
.wgt .gl .i { width: 13px; height: 13px; }
.wgt .big { font: 800 20px/1.15 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.wgt .sub { font-size: 12px; line-height: 1.35; color: var(--mfg); min-width: 0; }
.wgt .clamp2, .wgt .wtext { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.wgt .clamp2 { -webkit-line-clamp: 2; }
.wgt .wtext { -webkit-line-clamp: 3; font-size: 13px; font-weight: 600; line-height: 1.35; margin-top: 2px; }
.wgt .wbar { margin-top: auto; height: 6px; border-radius: 9px; background: rgba(var(--tint), .12); overflow: hidden; }
.wgt .wbar i { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--a), var(--a2)); transition: width .6s; }
.wgt .wpill { align-self: flex-start; margin-top: auto; font-size: 11.5px; font-weight: 800; padding: 6px 11px; border-radius: 99px; background: var(--a); color: #fff; }
.wgt .wdot { position: absolute; top: 11px; right: 11px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.wgt .wrows { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mfg); margin-top: auto; }
.wgt .wrows span { display: flex; justify-content: space-between; gap: 6px; }
.wgt .wn { color: var(--fg); font-weight: 800; }
.wgt .wn.zero::before { content: "0"; color: var(--mfg); font-weight: 600; }
.wgt.t-warn .big { color: #f5a524; }
.wgt.t-hot .big { color: var(--bad); }
.wgt.urgent { box-shadow: 0 0 0 1.5px var(--a), 0 10px 30px -14px var(--a); }
.wgt.w-won.urgent { background-image: radial-gradient(120% 90% at 100% 0%, var(--a-20), transparent 60%); }
.wgt.unread::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--a); animation: wpulse 2s ease-in-out infinite; pointer-events: none; }
@keyframes wpulse { 50% { opacity: .3; } }
[data-motion="off"] .wgt.unread::after, [data-motion="off"] .wswipe { animation: none; }
/* edit pages */
.wedit-list .item { gap: 10px; }
.wedit-list .item.off { opacity: .55; }
.wedit-list .item .grow { min-width: 0; }

/* 2.8.65: order details fit on phones (long emails and TXIDs wrap, Copy stays visible) */
.kvs > div { min-width: 0; }
.copybox { min-width: 0; max-width: 100%; }
.copybox code { white-space: normal; overflow-wrap: anywhere; word-break: break-all; overflow-x: visible; font-size: 12.5px !important; line-height: 1.45; }
.copybox .btn { flex: none; }

/* 2.8.66: community rules */
.rules-text { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.rules-text ol, .rules-text ul { padding-left: 22px; }
.rules-agree { padding: 12px 14px; border-radius: var(--r-md); background: var(--a-6); border: 1px solid var(--a-20); }

/* 2.8.66: stickers and custom emoji */
.cemoji { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
.jumbo .cemoji { width: 56px; height: 56px; vertical-align: middle; }
.sticker { display: block; width: 150px; height: 150px; max-width: 60vw; object-fit: contain; margin: 2px 0; }
.msg .bubble:has(> .body > .sticker:only-child) { background: none; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.stpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.stpick button { aspect-ratio: 1; border-radius: 14px; padding: 6px; background: rgba(var(--tint), .04); border: 1px solid var(--line); }
.stpick button:hover, .stpick button:focus-visible { border-color: var(--a); }
.stpick img, .stsheet .aegrid img { width: 100%; height: 100%; object-fit: contain; }
.stsheet .ej-tabs button img { width: 24px; height: 24px; object-fit: contain; }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.stcell { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-md); background: rgba(var(--tint), .04); border: 1px solid var(--line); min-width: 0; }
.stcell img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.stcell .xs-input { width: 100%; padding: 6px 8px; font-size: 12.5px; }
.stupload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* 2.8.66: invite posters */
.poster-img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 14px 40px -18px rgba(0,0,0,.6); }
@media print {
  html.poster-print body * { visibility: hidden !important; }
  html.poster-print .poster-card.printing .poster-img { visibility: visible !important; position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; }
}