/* The platform member area (pages/platform-*.tsx, lib/platform.tsx) on website v2 (site-v2.css) and the Academy's
   course card (academy.css): the account shell with its menu, page heads, panels, VIP tiles, licences, orders,
   settings, affiliate and the shop. Tokens only, classes mp-. */

/* ---------- header extras ---------- */
.mp-cart { position: relative; display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; border: 1px solid var(--ats-border); color: var(--ats-fg); }
.mp-cart:hover { border-color: var(--ats-border-strong); }
.mp-cart-n { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 9px; background: var(--ats-grad-cta); color: var(--ats-accent-ink); font-size: 11px; font-weight: 600; }
.mp-me { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--ats-border); border-radius: var(--ats-radius-pill); background: transparent; color: var(--ats-fg); font: inherit; font-size: var(--ats-text-ui); cursor: pointer; }
.mp-me:hover { border-color: var(--ats-border-strong); }
.mp-me-vip { padding: 1px 6px; border-radius: var(--ats-radius-pill); background: color-mix(in oklab, var(--ats-value-positive) 18%, transparent); color: var(--ats-value-positive); font-family: var(--ats-font-mono); font-size: 10px; letter-spacing: 0.06em; }
@media (max-width: 720px) { .mp-me-name, .mp-me-vip { display: none; } .mp-me { padding: 3px; } }

/* ---------- the account shell ---------- */
.mp { position: relative; }
.mp-glow { position: absolute; inset: 0 0 auto; block-size: 520px; pointer-events: none; background: radial-gradient(40% 60% at 75% 0%, var(--m2-glow), transparent 70%), radial-gradient(25% 40% at 95% 10%, var(--m2-glow-2), transparent 70%); opacity: 0.55; }
.mp-shell { position: relative; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 88px); }
.mp-nav { position: sticky; inset-block-start: 76px; display: flex; flex-direction: column; gap: 4px; max-block-size: calc(100vh - 92px); overflow: auto; padding: 14px; border: 1px solid var(--ats-border); border-radius: 18px; background: var(--m2-card); scrollbar-width: thin; }
.mp-nav-me { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; margin-block-end: 4px; border-block-end: 1px solid var(--ats-border); color: inherit; text-decoration: none; }
.mp-nav-me > span { display: flex; flex-direction: column; min-inline-size: 0; }
.mp-nav-me strong { font-size: var(--ats-text-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-nav-me span span { font-size: var(--ats-text-micro); color: var(--ats-value-positive); font-family: var(--ats-font-mono); }
.mp-nav-group { display: flex; flex-direction: column; gap: 2px; padding-block: 6px; }
.mp-nav-t { margin: 0; padding: 4px 8px; font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ats-muted); }
.mp-nav ul { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.mp-nav ul a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; color: var(--ats-muted-strong); text-decoration: none; font-size: var(--ats-text-ui); }
.mp-nav ul a:hover { background: color-mix(in oklab, var(--ats-fg) 5%, transparent); color: var(--ats-fg); }
.mp-nav ul a.is-on { background: color-mix(in oklab, var(--ats-info) 14%, transparent); color: var(--ats-fg); box-shadow: inset 2px 0 0 var(--ats-info); }
.mp-nav-out { margin-block-start: 6px; padding: 9px 10px 4px; border-block-start: 1px solid var(--ats-border); color: var(--ats-muted); font-size: var(--ats-text-ui); text-decoration: none; }
.mp-nav-out:hover { color: var(--ats-fg); }
.mp-main { display: flex; flex-direction: column; gap: 18px; min-inline-size: 0; }
.mp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 6px; }
.mp-head-copy { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.mp-title { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.03em; }
.mp-head-actions { flex-wrap: wrap; }
@media (max-width: 1023px) {
  .mp-shell { grid-template-columns: minmax(0, 1fr); }
  .mp-nav { position: static; max-block-size: none; flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px; border-radius: 14px; }
  .mp-nav-me, .mp-nav-t, .mp-nav-out { display: none; }
  .mp-nav-group { padding: 0; }
  .mp-nav ul { flex-direction: row; }
  .mp-nav ul a { white-space: nowrap; }
  .mp-nav ul a.is-on { box-shadow: inset 0 -2px 0 var(--ats-info); }
}

/* ---------- blocks ---------- */
.mp-panel { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; padding: 20px; border: 1px solid var(--ats-border); border-radius: 18px; background: var(--m2-card); }
.mp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-panel-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; }
.mp-more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ats-text-ui); color: var(--ats-accent-text); text-decoration: none; white-space: nowrap; }
.mp-more:hover { text-decoration: underline; }
.mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mp-span-2 { grid-column: span 2; }
.mp-sec { display: flex; flex-direction: column; margin-block-start: 10px; }
.mp-muted { margin: 0; font-size: var(--ats-text-ui); color: var(--ats-muted); line-height: 1.5; }
.mp-big { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -0.02em; }
.mp-thumb { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ats-border); background: var(--ats-media-bg); color: var(--ats-muted); }
.mp-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mp-announce { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--ats-info) 40%, var(--ats-border)); border-radius: 14px; background: color-mix(in oklab, var(--ats-info) 8%, var(--m2-card)); font-size: var(--ats-text-ui); }
.mp-announce p { margin: 0; flex: 1; color: var(--ats-muted-strong); }
.mp-announce a { color: var(--ats-accent-text); white-space: nowrap; }
.mp-announce-k { padding: 2px 8px; border-radius: var(--ats-radius-pill); background: var(--ats-grad-cta); color: var(--ats-accent-ink); font-family: var(--ats-font-mono); font-size: var(--ats-text-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- dashboard: the VIP block ---------- */
.mp-vip { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--ats-border-strong); border-radius: 22px; background: linear-gradient(180deg, color-mix(in oklab, var(--ats-surface) 85%, transparent), color-mix(in oklab, var(--ats-bg) 60%, var(--ats-surface))); }
.mp-vip-glow { position: absolute; inset: -40% -10% auto 30%; block-size: 160%; z-index: -1; background: radial-gradient(45% 45% at 60% 40%, var(--m2-glow), transparent 70%); opacity: 0.8; }
.mp-vip-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mp-vip-head > div { display: flex; flex-direction: column; gap: 10px; }
.mp-vip-t { margin: 0; font-family: var(--ats-font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.mp-vip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mp-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-block-size: 132px; padding: 16px; border: 1px solid var(--ats-border); border-radius: 14px; background: color-mix(in oklab, var(--ats-bg) 45%, transparent); color: inherit; text-decoration: none; transition: border-color 200ms, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.mp-tile:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 50%, var(--ats-border)); transform: translateY(-2px); }
.mp-tile-k { font-size: var(--ats-text-label); color: var(--ats-muted-strong); }
.mp-tile-v { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; color: var(--ats-fg); }
.mp-tile-x { font-size: var(--ats-text-label); color: var(--ats-muted); line-height: 1.45; }
.mp-tile-spark { margin-block-start: auto; }
.mp-tile-spark svg { inline-size: 100%; block-size: auto; }
.mp-tile-ic { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; color: var(--ats-accent-text); }

/* ---------- dashboard: learning, licences, orders, picks, feed ---------- */
.mp-learn { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.mp-learn-art .ma-cover { border-radius: 12px; border: 1px solid var(--ats-border); }
.mp-learn-copy { display: flex; flex-direction: column; gap: 10px; }
.mp-learn-k { margin: 0; font-size: var(--ats-text-micro); color: var(--ats-accent-text); }
.mp-learn-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; line-height: 1.3; }
.mp-mini { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ats-border); }
.mp-mini li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-block-end: 1px solid var(--ats-border); font-size: var(--ats-text-ui); color: var(--ats-muted-strong); }
.mp-mini li:last-child { border-block-end: 0; }
.mp-mini li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-lic-mini { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mp-lic-mini li { display: flex; flex-direction: column; gap: 6px; }
.mp-lic-mini-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: var(--ats-text-ui); }
.mp-lic-mini-x { font-size: var(--ats-text-micro); color: var(--ats-muted); }
.mp-orders-mini { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mp-orders-mini li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 0; border-block-end: 1px solid var(--ats-border); font-size: var(--ats-text-ui); }
.mp-orders-mini li:last-child { border-block-end: 0; }
.mp-orders-mini-t { display: flex; flex-direction: column; min-inline-size: 0; }
.mp-orders-mini-t strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-orders-mini-t span { font-size: var(--ats-text-label); color: var(--ats-muted); font-family: var(--ats-font-mono); }
.mp-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mp-pick { display: flex; flex-direction: column; gap: 8px; block-size: 100%; box-sizing: border-box; padding: 14px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); color: inherit; text-decoration: none; transition: border-color 200ms, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.mp-pick:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); transform: translateY(-2px); }
.mp-pick-art { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--ats-media-bg); }
.mp-pick-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mp-pick-t { font-family: var(--ats-font-display); font-weight: 600; }
.mp-pick-x { font-size: var(--ats-text-label); color: var(--ats-muted); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-pick-p { font-weight: 500; }
.mp-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) {
  .mp-vip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mp-vip-grid, .mp-grid, .mp-picks, .mp-feed, .mp-learn { grid-template-columns: minmax(0, 1fr); }
  .mp-span-2 { grid-column: auto; }
  .mp-announce { flex-wrap: wrap; }
  .mp-orders-mini li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mp-orders-mini li .ats-badge { display: none; }
}

/* ---------- VIP: curves, toolbar, table, follows, resources ---------- */
.mp-stack { display: flex; flex-direction: column; gap: 14px; }
.mp-curves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mp-curve { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--ats-border); border-radius: 14px; background: var(--m2-card); }
.mp-curve svg { inline-size: 100%; block-size: auto; }
.mp-curve-t { display: flex; justify-content: space-between; gap: 8px; min-block-size: 2.6em; margin: 0; font-weight: 600; font-size: var(--ats-text-ui); }
.mp-curve-t span { font-weight: 400; font-size: var(--ats-text-micro); color: var(--ats-muted); }
.mp-curve-f { display: flex; flex-wrap: wrap; gap: 4px 10px; white-space: nowrap; margin: 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.mp-curve-f .is-pos { color: var(--ats-value-positive); }
.mp-curve-f .is-neg { color: var(--ats-value-negative); }
.mp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-search { flex: 1 1 240px; }
.mp-count { margin: 0 0 0 auto; font-size: var(--ats-text-ui); color: var(--ats-muted); }
.mp-count strong { color: var(--ats-fg); }
.mp-table { border: 1px solid var(--ats-border); border-radius: 16px; overflow-x: auto; background: var(--m2-card); }
.mp-acc { display: flex; flex-direction: column; min-inline-size: 0; }
.mp-acc strong { font-weight: 600; color: var(--ats-fg); }
.mp-acc span { font-size: var(--ats-text-micro); color: var(--ats-muted); }
.mp-center { text-align: center; }
.mp-follow { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mp-follow li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 18px; padding: 12px 0; border-block-end: 1px solid var(--ats-border); }
.mp-follow li:last-child { border-block-end: 0; }
.mp-follow-add li { grid-template-columns: minmax(0, 1fr) auto; }
.mp-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-res-item { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); color: inherit; text-decoration: none; }
.mp-res-item:hover { border-color: color-mix(in oklab, var(--ats-grad-cta-from) 45%, var(--ats-border)); }
.mp-res-item span:last-child { font-size: var(--ats-text-ui); color: var(--ats-muted); }
.mp-res-k { inline-size: fit-content; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--ats-border-strong); font-size: var(--ats-text-micro); color: var(--ats-accent-text); }
@media (max-width: 1180px) { .mp-curves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .mp-curves, .mp-res { grid-template-columns: minmax(0, 1fr); }
  .mp-follow li { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-follow li > :nth-child(n+3):not(:last-child) { display: none; }
  .mp-hide-sm { display: none; }
}

/* ---------- courses ---------- */
.mp-courses { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mp-course { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); }
.mp-course-art .ma-cover { border-radius: 10px; border: 1px solid var(--ats-border); }
.mp-course-copy { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.mp-course-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; line-height: 1.3; }
.mp-course-act { display: flex; align-items: center; gap: 8px; }
.mp-free { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.mp-free li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--ats-border); }
.mp-thumb-lg { inline-size: 56px; block-size: 56px; }
@media (max-width: 720px) {
  .mp-course { grid-template-columns: minmax(0, 1fr); }
  .mp-free { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- apps & licences ---------- */
.mp-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mp-app { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); }
.mp-app.is-owned { border-color: color-mix(in oklab, var(--ats-value-positive) 30%, var(--ats-border)); }
.mp-app-art { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 14px; overflow: hidden; border: 1px solid var(--ats-border); background: radial-gradient(80% 80% at 70% 100%, var(--m2-glow), transparent 70%), var(--ats-media-bg); font-family: var(--ats-font-display); font-weight: 600; color: var(--ats-fg); }
.mp-app-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mp-app-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-inline-size: 0; }
.mp-app-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-lead); font-weight: 600; }
.mp-app-x { margin: 0; font-size: var(--ats-text-label); color: var(--ats-muted); line-height: 1.45; }
.mp-lic.is-off { opacity: 0.75; }
.mp-lic-head { display: flex; align-items: center; gap: 12px; }
.mp-slots-head { display: flex; flex-direction: column; gap: 8px; padding-block-start: 6px; }
.mp-slots-t { margin: 0; font-family: var(--ats-font-display); font-size: var(--ats-text-ui); font-weight: 600; }
.mp-slots { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mp-slots li { display: grid; grid-template-columns: 24px minmax(160px, 260px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-block-end: 1px solid var(--ats-border); }
.mp-slots li:last-child { border-block-end: 0; }
.mp-slot-n { font-size: var(--ats-text-micro); color: var(--ats-muted); }
.mp-slot-x { font-size: var(--ats-text-label); color: var(--ats-muted); font-family: var(--ats-font-mono); }
.mp-slot-b { display: inline-flex; gap: 6px; }
@media (max-width: 1023px) { .mp-apps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .mp-app { grid-template-columns: 48px minmax(0, 1fr); }
  .mp-app .ats-btn { grid-column: 1 / -1; }
  .mp-app-art { inline-size: 48px; block-size: 48px; }
  .mp-slots li { grid-template-columns: 20px minmax(0, 1fr); }
  .mp-slot-x, .mp-slot-b { grid-column: 2; }
}

/* ---------- orders & subscriptions ---------- */
.mp-olist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ats-border); border-radius: 16px; background: var(--m2-card); overflow: hidden; }
.mp-olist li + li { border-block-start: 1px solid var(--ats-border); }
.mp-orow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 96px; align-items: center; gap: 14px; inline-size: 100%; padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mp-orow:hover { background: color-mix(in oklab, var(--ats-fg) 4%, transparent); }
.mp-orow:focus-visible { outline: 2px solid var(--ats-info); outline-offset: -2px; }
.mp-orow .mp-acc strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-orow-t { text-align: end; font-weight: 500; }
.mp-sub { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.mp-sub > div { display: flex; flex-direction: column; gap: 6px; }
.mp-sub-k { margin: 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.mp-odetail { display: flex; flex-direction: column; gap: 16px; }
.mp-olines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mp-olines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--ats-border); }
.mp-cartline-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
@media (max-width: 720px) {
  .mp-orow { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .mp-orow .ats-badge { display: none; }
  .mp-sub { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- settings ---------- */
.mp-form { display: flex; flex-direction: column; gap: 14px; max-inline-size: 640px; }
.mp-pay { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mp-pay li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-block-end: 1px solid var(--ats-border); }
.mp-pay-ic { display: grid; place-items: center; block-size: 34px; border-radius: 8px; border: 1px solid var(--ats-border-strong); font-size: 11px; font-weight: 600; color: var(--ats-fg); background: color-mix(in oklab, var(--ats-fg) 4%, transparent); }
.mp-robot { margin: 0; padding: 14px; border: 1px solid var(--ats-border); border-radius: 12px; }
.mp-robot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 720px) { .mp-robot-grid { grid-template-columns: minmax(0, 1fr); } .mp-pay li { grid-template-columns: 52px minmax(0, 1fr) auto; } .mp-pay li > :last-child { display: none; } }

/* ---------- affiliate ---------- */
.mp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-gen { display: flex; flex-direction: column; gap: 10px; }
.mp-tbl { inline-size: 100%; border-collapse: collapse; font-size: var(--ats-text-ui); }
.mp-tbl th, .mp-tbl td { padding: 11px 16px; border-block-end: 1px solid var(--ats-border); text-align: start; white-space: nowrap; }
.mp-tbl th { font-size: var(--ats-text-micro); font-family: var(--ats-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ats-muted); font-weight: 500; }
.mp-tbl tr:last-child td { border-block-end: 0; }
.mp-tbl .is-num { text-align: end; }
@media (max-width: 720px) { .mp-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- shop ---------- */
.mp-pcard .ma-card-title { -webkit-line-clamp: 2; }
.mp-pcard-x { margin: 0; font-size: var(--ats-text-label); line-height: 1.5; color: var(--ats-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-pcard-opts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.mp-pcard .ma-card-foot { gap: 8px; }
.mp-pcard .ma-card-foot .ma-stars { display: inline-flex; }
.mp-pcard .ma-card-foot .ma-price { margin-inline-start: auto; }

/* ---------- login (the VIP panel beside the form) ---------- */
.mp-login-art { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: flex-end; background: linear-gradient(180deg, color-mix(in oklab, var(--ats-surface) 60%, transparent), var(--ats-bg)); }
.mp-login-glow { position: absolute; inset: 20% -20% -30%; background: radial-gradient(50% 50% at 50% 60%, var(--m2-glow), transparent 70%), radial-gradient(30% 30% at 75% 80%, var(--m2-glow-2), transparent 70%); }
.mp-login-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 4vw, 48px); }
.mp-login-t { margin: 0; max-inline-size: 18ch; font-family: var(--ats-font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ats-fg); }
.mp-login-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--ats-text-ui); color: var(--ats-muted-strong); }
.mp-login-list li { display: flex; gap: 8px; align-items: flex-start; }
.mp-login-list svg { color: var(--ats-value-positive); margin-block-start: 3px; flex: none; }
.mp-login-x { margin: 0; font-size: var(--ats-text-label); color: var(--ats-accent-text); }
.mp-social { display: flex; flex-direction: column; gap: 8px; }
.mp-or { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: var(--ats-text-label); color: var(--ats-muted); }
.mp-or::before, .mp-or::after { content: ''; flex: 1; border-block-start: 1px solid var(--ats-border); }