/* LND Aura themes: eight looks = light or dark in violet, amber, teal or azure. The first four exist in landing.css (aurora, ember, tide dark, paper light); this file adds the rest,
   the flat "Professional" look that azure uses in both modes, and the theme panel. */
:root[data-theme="ember-light"] {
  color-scheme: light;
  --bg0: #f6efe6; --panel: rgba(60,30,10,.05); --panel2: rgba(60,30,10,.03); --panel-solid: #fffaf4; --win: rgba(255,251,246,.88);
  --line: rgba(60,30,10,.11); --line2: rgba(60,30,10,.22); --ink: #231a12; --soft: #4a3b2d; --muted: #6e5f50;
  --accent: #c2561a; --accent2: #d4382c; --accent3: #d98a1f; --accent-ink: #ffffff;
  --o1: #f08a3c; --o2: #e8503f; --o3: #f3b95a; --o-core: #3a1608;
  --blob1: rgba(255,150,70,.36); --blob2: rgba(255,100,90,.26); --blob3: rgba(255,200,110,.26);
  --ok: #0f7a52; --warn: #96620a; --bad: #c4262e; --card: color-mix(in srgb, #fff 72%, transparent);
}
:root[data-theme="tide-light"] {
  color-scheme: light;
  --bg0: #e9f1f0; --panel: rgba(10,50,45,.05); --panel2: rgba(10,50,45,.03); --panel-solid: #f9fdfc; --win: rgba(250,254,253,.88);
  --line: rgba(10,50,45,.11); --line2: rgba(10,50,45,.22); --ink: #0f2523; --soft: #2f4b48; --muted: #50706d;
  --accent: #0e8a76; --accent2: #1d6fd1; --accent3: #4f9a18; --accent-ink: #ffffff;
  --o1: #1fb89c; --o2: #3a8fe0; --o3: #8fd14a; --o-core: #08302b;
  --blob1: rgba(40,200,170,.32); --blob2: rgba(60,130,230,.26); --blob3: rgba(150,210,80,.22);
  --ok: #0f7a52; --warn: #96620a; --bad: #c4262e; --card: color-mix(in srgb, #fff 72%, transparent);
}
:root[data-theme="pro"] {
  color-scheme: light;
  --bg0: #f3f2ef; --panel: #ffffff; --panel2: #f4f6f8; --panel-solid: #ffffff; --win: #ffffff;
  --line: rgba(0,0,0,.12); --line2: rgba(0,0,0,.26); --ink: #191919; --soft: #36404a; --muted: #566472;
  --accent: #0a66c2; --accent2: #0a66c2; --accent3: #378fe9; --accent-ink: #ffffff;
  --o1: #0a66c2; --o2: #378fe9; --o3: #70b5f9; --o-core: #0b2c4d;
  --blob1: transparent; --blob2: transparent; --blob3: transparent;
  --ok: #057642; --warn: #915907; --bad: #cc1016; --card: #ffffff; --flat-hover: #004182; --flat-tint: #eaf3fc; --flat-soft: #f4f9fe;
}
:root[data-theme="pro-dark"] {
  color-scheme: dark;
  --bg0: #1b1f23; --panel: #22282e; --panel2: #1e2328; --panel-solid: #22282e; --win: #22282e;
  --line: rgba(255,255,255,.13); --line2: rgba(255,255,255,.28); --ink: #e9eef2; --soft: #c3cdd6; --muted: #93a1ad;
  --accent: #71b7fb; --accent2: #71b7fb; --accent3: #a8d4fd; --accent-ink: #0b1d2e;
  --o1: #4d9fe8; --o2: #71b7fb; --o3: #a8d4fd; --o-core: #071a2d;
  --blob1: transparent; --blob2: transparent; --blob3: transparent;
  --ok: #57d4a0; --warn: #f0b04a; --bad: #ff7a7f; --card: #22282e; --flat-hover: #9bcbfc; --flat-tint: #1b2f44; --flat-soft: #1f3248;
}

/* ---- the flat Professional look (azure, light and dark): no glow, grain, blur or gradient text ---- */
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) #backdrop { background: var(--bg0); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .blob, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .grid-lines, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .grain { display: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); font-style: normal; font-weight: 800; padding: 0; margin: 0; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .card, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .tile, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .plan, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .sh-plan, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .window, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .play, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .side, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .mode, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .voice, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .sh-tile, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .story, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .chip, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .pop, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .dlg-in, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .tmenu, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .sh-disp, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .sh-costs, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .pill {
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .tile::before, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .voice::before { display: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .mode.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--flat-soft); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .window { box-shadow: 0 0 0 1px var(--line), 0 4px 14px rgba(0,0,0,.12); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .nav.solid, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) body.pg .nav, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .nav:not(.solid) { background: var(--panel-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .strip { background: var(--panel-solid); border-color: var(--line); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .cta, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .btn.solid { background: var(--accent); color: var(--accent-ink); box-shadow: none; border: 0; border-radius: 999px; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .cta:hover, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .btn.solid:hover { background: var(--flat-hover); box-shadow: none; transform: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .cta::after { display: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .ghost, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .btn, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .signin { background: var(--panel-solid); border: 1px solid var(--accent); color: var(--accent); box-shadow: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .btn:not(.solid):hover, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .ghost:hover, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .signin:hover { background: var(--flat-tint); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .btn.danger { color: var(--bad); border-color: var(--bad); background: var(--panel-solid); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .kbtn, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .tbtn { background: var(--panel-solid); border: 1px solid var(--line2); color: var(--soft); box-shadow: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) #progress i { background: var(--accent); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .orb-wrap, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .play-orb { filter: none; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) input[type=text], :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) input[type=email], :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) input[type=password], :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) input[type=url], :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) input[type=number], :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) textarea, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) select.sel { background: var(--panel-solid); border-color: var(--line2); border-radius: 6px; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) input:focus, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: 0; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .sh-flag { background: var(--accent); color: var(--accent-ink); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top { background: #0a4d94 !important; background-image: none !important; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top .sw, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top .sw.dark { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.35); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top .sw .lbl, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top h3, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top p { color: #fff !important; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard-top .bava { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bothead { background: var(--panel-solid) !important; background-image: none !important; box-shadow: none !important; border: 1px solid var(--line); border-radius: 12px; }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .etabs, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .bcard, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .side { box-shadow: none !important; }

/* ---- the theme panel: Appearance (Dark / Light) and Colour ---- */
.tmenu.tp-menu, .swatches.tp { width: 300px; padding: 20px 18px 18px; border-radius: 22px; }
.swatches.tp { display: block; margin-top: 20px; border: 1px solid var(--line2); background: var(--panel-solid); }
.tp .tp-title { margin: 0 0 14px; max-width: none; font: 700 22px/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.tp .tp-label { margin: 18px 0 8px; max-width: none; font: 700 11.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tp .tp-note { max-width: none; }
.tp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); }
.tp-seg button { display: flex; justify-content: center; align-items: center; gap: 8px; height: 44px; padding: 0; border-radius: 12px; color: var(--soft); font: 600 15px var(--font); }
.tp-seg button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-seg button:hover { background: transparent; color: var(--ink); }
.tp-seg button[aria-checked="true"], .tp-seg button[aria-checked="true"]:hover { background: var(--panel-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px var(--line2); }
.tp-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tp-sw button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: auto; padding: 12px 2px 10px; border-radius: 14px; border: 1.5px solid transparent; color: var(--soft); font: 600 13.5px var(--font); }
.tp-sw button:hover { background: var(--panel); color: var(--ink); }
.tp-sw button[aria-checked="true"], .tp-sw button[aria-checked="true"]:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--ink); }
.tp-sw i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tp-sw i svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tp-sw button[aria-checked="true"] i svg { opacity: 1; }
.tp-menu button::after, .tp button::after { content: none !important; }
@media (max-width: 420px) { .tmenu.tp-menu { width: min(300px, calc(100vw - 24px)); } }
/* ---------- the bot's Look picker (the same Appearance and Colour panel as the site theme) ---------- */
.lookp.tp { width: 100%; max-width: 360px; padding: 20px 18px 18px; border-radius: 22px; border: 1px solid var(--line2); background: var(--panel-solid); }
.lookrow .lookp { align-self: start; }

/* ---------- Activity: a list that scrolls inside its own box, so Settings stays within reach ---------- */
#activity .led { max-height: min(54vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel2); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; }
#activity .led li:first-child { border-top: 0; }
#activity .led::-webkit-scrollbar { width: 8px; } #activity .led::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 8px; }

/* the large version: preview tiles that fill the column */
.lookrow { grid-template-columns: minmax(0, 1fr) 330px; }
.lookp.tp { max-width: none; }
.tp-big .tp-title { font-size: 20px; }
.tp-big .tp-seg button { height: 48px; font-size: 15.5px; }
.tp-big .tp-sw { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-big .tp-sw button { position: relative; align-items: stretch; gap: 10px; padding: 10px 10px 12px; border-radius: 18px; border: 1.5px solid var(--line2); background: var(--panel); text-align: center; }
.tp-big .tp-sw button:hover { background: var(--panel2); transform: translateY(-2px); }
.tp-big .tp-sw button[aria-checked="true"], .tp-big .tp-sw button[aria-checked="true"]:hover { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--panel-solid)); }
.tp-mini { position: relative; display: block; aspect-ratio: 4 / 4.2; min-height: 170px; border-radius: 12px; padding: 14px 14px; background: var(--bg, #222); border: 1px solid rgba(0,0,0,.14); overflow: hidden; }
.tp-mini b { display: block; width: 44%; height: 10px; border-radius: 8px; background: var(--ac, #888); }
.tp-mini u { display: block; height: 7px; margin-top: 10px; border-radius: 8px; background: var(--ln, rgba(255,255,255,.2)); text-decoration: none; } .tp-mini u + u { width: 68%; }
.tp-mini s { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 16px; border-radius: 10px; background: var(--ac, #888); }
.tp-big .tp-sw i { position: absolute; top: 18px; right: 18px; width: 24px; height: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.tp-big .tp-sw button:not([aria-checked="true"]) i { display: none; }
.tp-big .tp-sw span { font-weight: 700; font-size: 14.5px; }
.tp-note { margin: 16px 2px 0; color: var(--soft); font-size: 14.5px; } .tp-note b { color: var(--ink); }
@media (max-width: 1000px) { .lookrow { grid-template-columns: 1fr; } .tp-big .tp-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- one subscription, four builders ---------- */
.prod-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; }
.prod { position: relative; display: grid; gap: 3px; align-content: start; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel); }
.prod b { font: 700 17px var(--serif); letter-spacing: -.02em; color: var(--ink); } .prod > span:not(.prod-tag) { color: var(--soft); font-size: 14px; }
.prod.here { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.prod-tag { position: absolute; top: -10px; left: 14px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px var(--font); }
.plans .prod-row { margin: 0 0 4px; }
@media (max-width: 900px) { .prod-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- progress bars: a track you can see in every theme ---------- */
.meter .bar, .cap .bar, .pop-bar { height: 10px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--muted) 28%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.meter .bar i, .cap .bar i, .pop-bar i { border-radius: 10px; min-width: 6px; }
.ring .bg { stroke: color-mix(in srgb, var(--muted) 30%, transparent); }
:is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .meter .bar i, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .cap .bar i, :is(:root[data-theme="pro"],:root[data-theme="pro-dark"]) .pop-bar i { background: var(--accent); }

/* "Make it yours" on the landing page: the text on the left, the theme panel on the right */
.tile.t-full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: 40px; align-items: start; }
.tile.t-full > .ti, .tile.t-full > h3, .tile.t-full > p { grid-column: 1; }
.tile.t-full > .swatches.tp { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: 100%; max-width: 380px; justify-self: end; }
@media (max-width: 820px) { .tile.t-full { display: block; } .tile.t-full > .swatches.tp { margin-top: 20px; max-width: none; } }

/* alignment: the tile's text stays together at the top, and the mode list lines up with the chat window */
.tile.t-full { grid-template-rows: min-content min-content 1fr; align-content: start; row-gap: 0; }
.tile.t-full > .ti { margin-bottom: 18px; }
.modes { align-items: start; }

/* ---------- the log in / sign up page fits one screen ---------- */
body.authpg .pwrap { min-height: 100dvh; display: grid; align-items: center; padding: 84px 0 16px; }
body.authpg .auth { min-height: 0; align-items: center; gap: clamp(24px, 4vw, 64px); }
body.authpg .auth-art .orb-wrap canvas { width: min(250px, 27vh) !important; height: min(250px, 27vh) !important; }
body.authpg .auth-art h2 { margin: 8px 0 4px; font-size: clamp(26px, 4.4vh, 40px); }
body.authpg .auth-art ul { margin-top: 12px; gap: 8px; font-size: clamp(14px, 1.9vh, 16px); }
body.authpg .auth-card { padding: clamp(16px, 2.6vh, 28px) clamp(20px, 2.4vw, 30px); border-radius: 24px; }
body.authpg .auth-card .tabs { margin-bottom: 0; }
body.authpg .auth-card h1 { margin: clamp(10px, 1.8vh, 16px) 0 8px; font-size: clamp(24px, 3.8vh, 32px); }
body.authpg .auth-card > section > p:first-of-type, body.authpg .auth-card section > p:not(.err) { margin: 0 0 clamp(10px, 1.6vh, 16px); font-size: 14.5px; line-height: 1.45; }
body.authpg .gift { margin-bottom: clamp(10px, 1.6vh, 14px); padding: 8px 12px; font-size: 13.5px; }
body.authpg .auth-card .fld { margin-bottom: clamp(8px, 1.5vh, 12px); }
body.authpg .auth-card .fld > span { margin-bottom: 4px; font-size: 13px; }
body.authpg .auth-card input[type=text], body.authpg .auth-card input[type=email], body.authpg .auth-card input[type=password] { padding-top: clamp(9px, 1.4vh, 12px); padding-bottom: clamp(9px, 1.4vh, 12px); }
body.authpg .checklist { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 10px; font-size: 12.5px; }
body.authpg .auth-card .err { margin: 6px 0; min-height: 0; }
body.authpg .auth-card .btn.wide { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 900px) { body.authpg .pwrap { align-items: start; padding-top: 84px; } }
body.authpg .auth-art .orb-wrap { width: min(250px, 27vh); aspect-ratio: 1; margin: 0 auto; }
@media (max-height: 780px) {
  body.authpg .pwrap { padding-top: 76px; padding-bottom: 10px; }
  body.authpg .auth-art .orb-wrap { width: min(190px, 24vh); }
  body.authpg .auth-card section > p:not(.err) { display: none; }
  body.authpg .gift { display: none; }
  body.authpg .auth-card { padding: 14px 22px 16px; }
  body.authpg .auth-card h1 { margin: 8px 0 8px; font-size: 24px; }
  body.authpg .auth-card .fld { margin-bottom: 7px; }
  body.authpg .auth-card input[type=text], body.authpg .auth-card input[type=email], body.authpg .auth-card input[type=password] { padding-top: 8px; padding-bottom: 8px; }
  body.authpg .checklist { margin: 0 0 6px; font-size: 12px; }
  body.authpg .auth-card .btn.wide { padding-top: 10px; padding-bottom: 10px; }
}

/* theme picker: each colour is a small chat window in that theme */
.tp-mini { aspect-ratio: auto; min-height: 0; height: 176px; display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 14px; box-shadow: 0 8px 18px -14px rgba(0,0,0,.5); }
.tp-mini .tm-h { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--ln); }
.tp-mini .tm-o { width: 11px; height: 11px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); flex: none; }
.tp-mini .tm-t { height: 6px; width: 42%; border-radius: 6px; background: var(--tx); }
.tp-mini .tm-b { display: grid; gap: 4px; padding: 6px 7px; border-radius: 9px 9px 9px 3px; background: var(--bub); border: 1px solid var(--ln); max-width: 74%; }
.tp-mini .tm-b span { display: block; height: 4px; border-radius: 4px; background: var(--tx); } .tp-mini .tm-b span + span { width: 62%; }
.tp-mini .tm-me { align-self: flex-end; border-radius: 9px 9px 3px 9px; background: var(--ac); border-color: transparent; width: 56%; } .tp-mini .tm-me span { background: rgba(255,255,255,.85); }
.tp-mini .tm-in { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px; border-radius: 999px; background: var(--bub); border: 1px solid var(--ln); }
.tp-mini .tm-in span { flex: 1; height: 4px; border-radius: 4px; background: var(--tx); opacity: .6; } .tp-mini .tm-in em { width: 15px; height: 15px; border-radius: 50%; background: var(--ac); flex: none; }
.tp-big .tp-sw small { color: var(--muted); font-size: 12px; font-weight: 500; margin-top: -6px; }
.tp-big .tp-sw button { box-shadow: 0 1px 0 rgba(0,0,0,.03); transition: transform .25s var(--ease-out, ease), box-shadow .25s, border-color .25s, background-color .25s; }
.tp-big .tp-sw button[aria-checked="false"] .tp-mini { filter: saturate(.8); opacity: .92; }

.lookp .tp-big .tp-sw, .tp-big .tp-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-big .tp-mini { height: 190px; }