/* SpinZ CZ My Account and sign-in (28 Sep 2026). Loaded after account-ui.css on /my only. */
body.account-ui { --acc-bg: #0b0a0e; --acc-card: #131218; --acc-card2: #18161e; --acc-line: rgba(255,255,255,.08); --acc-line2: rgba(255,255,255,.14);
  --acc-text: #f4f1f3; --acc-muted: #a8a0aa; --acc-pink: #ff98cb; --acc-hot: #ff4f9e; --acc-violet: #b58cff; --acc-ok: #7ee0a6; --acc-warn: #ffc27a; --acc-bad: #ff8a9b;
  --acc-grad: linear-gradient(90deg, #ff6fb5, #c48bff); }
.acc-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.account-ui svg use { pointer-events: none; }

/* ---------- Shared bits ---------- */
.account-ui .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--acc-line2); border-radius: 999px; background: #ffffff08; color: #d9d2da; font: 600 11.5px/1.5 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.account-ui .chip.ok { border-color: #7ee0a64d; background: #7ee0a614; color: var(--acc-ok); }
.account-ui .chip.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-ui .chip.warn { border-color: #ffc27a4d; background: #ffc27a14; color: var(--acc-warn); }
.account-ui .chip.bad { border-color: #ff8a9b4d; background: #ff8a9b14; color: var(--acc-bad); }
.account-ui .acc-muted { color: var(--acc-muted); margin: 0; }
.account-ui .small { font-size: 12.5px; line-height: 1.6; }
.account-ui .btn.sm { min-height: 40px; padding: 8px 16px; font-size: 12.5px; }
.account-ui .inline-form { display: inline; margin: 0; }
.account-ui .text-link { color: #ffc2df; text-decoration: underline; text-decoration-color: #ffc2df66; text-underline-offset: 4px; font-size: 13px; font-weight: 500; }
.account-ui .text-link:hover { text-decoration-color: #ffc2df; }
.account-ui .meter { position: relative; height: 8px; border-radius: 999px; background: #ffffff12; overflow: hidden; }
.account-ui .meter.tall { height: 12px; margin: 14px 0 18px; }
.account-ui .meter span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--acc-grad); box-shadow: 0 0 18px #ff6fb566; }
.account-ui .meter-legend { display: flex; justify-content: space-between; margin: 8px 0 0; color: var(--acc-muted); font-size: 12px; }

/* ---------- Hero ---------- */
.acc-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--acc-line); background: radial-gradient(900px 320px at 12% 0%, #ff4f9e2e, transparent 70%), radial-gradient(800px 360px at 88% 20%, #7b5cff2b, transparent 70%), linear-gradient(180deg, #120d15, #0b0a0e); }
.acc-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 64px); mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }
.acc-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; padding: 44px 0 40px; }
.acc-avatar { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(from 210deg, #ff6fb5, #c48bff, #ff6fb5); color: #1a0c17; font: 700 28px/1 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.02em; box-shadow: 0 0 0 4px #0b0a0e, 0 0 0 5px #ffffff26, 0 18px 50px #ff4f9e40; }
.acc-hello .eyebrow { margin: 0 0 4px; color: var(--acc-pink); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.acc-hello h1 { margin: 0; color: var(--acc-text); font: 600 clamp(30px, 4vw, 46px)/1.08 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.045em; }
.acc-sub { margin: 10px 0 0; color: var(--acc-muted); font-size: 13.5px; }
.acc-sub .chip { margin-right: 8px; }
.acc-email { color: #d9d2da; overflow-wrap: anywhere; }
.acc-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.acc-hero-acts .btn { min-height: 44px; border-radius: 999px; padding: 10px 20px; }

/* ---------- Layout and side menu ---------- */
body.account-ui main#account-main:not(.auth-main) { padding: 0; }
.acc-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; padding: 36px 0 90px; align-items: start; }
.acc-nav { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 2px; }
.acc-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: #cfc8d0; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.acc-nav a svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.acc-nav a small { margin-left: auto; min-width: 24px; padding: 0 7px; border-radius: 999px; background: #ffffff10; color: #bdb5bd; font-size: 11px; line-height: 20px; text-align: center; }
.acc-nav a:hover { background: #ffffff0a; color: #fff; }
.acc-nav a[aria-current="page"] { background: linear-gradient(90deg, #ff6fb524, #c48bff14); color: #fff; box-shadow: inset 2px 0 0 var(--acc-pink); }
.acc-nav a[aria-current="page"] svg { opacity: 1; stroke: var(--acc-pink); }
.acc-nav-label { margin: 18px 12px 6px; color: #7f7782; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.acc-main { min-width: 0; }
.acc-main > .flash { margin-bottom: 20px; }

/* ---------- Panels ---------- */
.acc-panel { scroll-margin-top: 110px; }
@media (max-width: 900px) { .acc-panel, .acc-panel [id] { scroll-margin-top: 140px; } }
.acc-panel + .acc-panel { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--acc-line); }
html.acc-js .acc-panel + .acc-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.acc-panel[hidden] { display: none !important; }
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.acc-head h2 { margin: 0; color: var(--acc-text); font: 600 clamp(24px, 2.6vw, 30px)/1.15 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.035em; text-transform: none; }
.acc-head h2:focus { outline: none; }
.acc-head p { margin: 6px 0 0; color: var(--acc-muted); font-size: 14px; }
.acc-head .btn { flex: none; border-radius: 999px; min-height: 44px; }
.acc-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.acc-sub-head h3 { margin: 0; color: var(--acc-text); font: 600 17px/1.3 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.02em; }

/* ---------- Cards ---------- */
.acc-card { position: relative; padding: 22px; border: 1px solid var(--acc-line); border-radius: 18px; background: linear-gradient(180deg, #16141b, #111015); box-shadow: 0 14px 40px #0006, inset 0 1px 0 #ffffff0a; }
.acc-card + .acc-card { margin-top: 16px; }
.acc-grid3 > .acc-card + .acc-card, .acc-grid2 > .acc-card + .acc-card { margin-top: 0; }
.acc-card.flush { padding: 6px 0; overflow-x: auto; }
.acc-card h3 { margin: 0; color: var(--acc-text); font: 600 16px/1.3 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.015em; }
.acc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acc-kicker { color: var(--acc-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
body.account-ui .acc-card .big { margin: 0 0 4px; color: var(--acc-text); font: 600 30px/1.1 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.04em; }
body.account-ui .acc-card .big-sm { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--acc-text); font-size: 16px; font-weight: 600; }
.acc-card .big-sm .ic { width: 18px; height: 18px; fill: none; stroke: var(--acc-pink); stroke-width: 1.8; }
.acc-card .meter { margin-top: 16px; }
.acc-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.acc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acc-grid3 .acc-card { display: flex; flex-direction: column; }
.acc-grid3 .acc-card-acts { margin-top: auto; padding-top: 18px; }
.acc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.acc-grid2 .acc-card + .acc-card { margin-top: 0; }
.acc-grid2 .acc-card { display: flex; flex-direction: column; }
.acc-grid2 .acc-card-acts { margin-top: auto; padding-top: 18px; }
.acc-panel > .acc-card + .acc-grid2, .acc-grid2 + .acc-card { margin-top: 16px; }
.plan-card { background: radial-gradient(420px 200px at 100% 0%, #ff6fb51f, transparent 70%), linear-gradient(180deg, #17141c, #111015); }
.credit-card.locked, .empty.locked { background: repeating-linear-gradient(135deg, #ffffff04 0 10px, transparent 10px 20px), linear-gradient(180deg, #16141b, #111015); }

/* Credits ring */
.ring-row { display: flex; align-items: center; gap: 18px; }
.ring { width: 104px; height: 104px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring-bg { stroke: #ffffff12; }
.ring-fg { stroke: #ff7fbf; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff6fb580); transition: stroke-dasharray .6s ease; }
.ring text { transform: rotate(90deg); transform-origin: 60px 60px; fill: var(--acc-text); }
.ring-num { font: 700 30px/1 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.04em; }
.ring-cap { font: 500 11px/1 var(--site-sans, 'Poppins', Arial, sans-serif); fill: #a8a0aa !important; }

/* Tool runs */
.runs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: max-content minmax(40px, 1fr) auto; align-items: center; gap: 10px 12px; color: #d9d2da; font-size: 12.5px; }
.runs li { display: contents; }
.runs.wide { gap: 14px 18px; font-size: 13.5px; }
.runs .nolimit { color: #7f7782; font-size: 11px; }
.runs.wide li a { color: var(--acc-text); text-decoration: underline; text-decoration-color: #ffffff30; text-underline-offset: 3px; }
.runs b { color: var(--acc-text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.runs-bar { position: relative; height: 6px; border-radius: 999px; background: #ffffff10; overflow: hidden; }
.runs-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--acc-grad); }
.usage-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.usage-big b { color: var(--acc-text); font: 600 44px/1 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.05em; }
.usage-big span { color: var(--acc-muted); font-size: 13.5px; }

/* Library tiles */
.lib-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lib-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--acc-line); border-radius: 16px; background: #131218; transition: border-color .15s, transform .15s, background .15s; }
.lib-tile svg { grid-row: 1 / 3; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: #ff6fb51a; fill: none; stroke: var(--acc-pink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lib-tile b { color: var(--acc-text); font: 600 24px/1.1 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.03em; }
.lib-tile span { color: var(--acc-muted); font-size: 12.5px; }
.lib-tile:hover { border-color: #ff98cb59; background: #17141c; transform: translateY(-2px); }

/* Beats */
.beat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 16px; }
.beat-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.beat-card { min-width: 0; }
.beat-art { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #3a1d35, #1b1630); box-shadow: 0 14px 34px #0007; }
.beat-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.beat-card:hover .beat-art img { transform: scale(1.04); }
.beat-play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #150b14; cursor: pointer; box-shadow: 0 8px 22px #0008; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.beat-play svg { width: 20px; height: 20px; }
.beat-card:hover .beat-play, .beat-play:focus-visible, .beat-card.playing .beat-play { opacity: 1; transform: none; }
.beat-card.playing .beat-art { box-shadow: 0 0 0 2px var(--acc-pink), 0 14px 34px #0007; }
@media (hover: none) { .beat-play { opacity: 1; transform: none; } }
.beat-card h4 { margin: 10px 0 0; color: var(--acc-text); font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beat-card p { margin: 2px 0 0; color: var(--acc-muted); font-size: 12px; }
.beat-acts { display: flex; gap: 12px; margin-top: 8px; }
.beat-acts a { display: inline-flex; align-items: center; gap: 5px; color: #ffc2df; font-size: 12px; font-weight: 600; }
.beat-acts svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Lists and tables */
.acc-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--acc-line); border-radius: 16px; background: #131218; }
.acc-list li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--acc-text); font-size: 14px; }
.acc-list li + li { border-top: 1px solid var(--acc-line); }
.acc-list svg { width: 18px; height: 18px; fill: none; stroke: var(--acc-pink); stroke-width: 1.7; }
.acc-list small { margin-left: auto; color: var(--acc-muted); }
.acc-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.acc-card.flush .acc-table { margin: 0; }
.acc-table th { padding: 10px 14px; color: #8f8792; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--acc-line); }
.acc-table td { padding: 13px 14px; color: #ded8df; border-bottom: 1px solid var(--acc-line); vertical-align: middle; }
.acc-table tr:last-child td { border-bottom: 0; }
.acc-table td:first-child { white-space: nowrap; }
.acc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-table .mono { color: var(--acc-muted); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.acc-links a { margin-right: 14px; color: #ffc2df; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.acc-help-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.acc-help-row a { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--acc-line); border-radius: 14px; transition: border-color .15s; }
.acc-help-row a:hover { border-color: #ff98cb59; }
.acc-help-row b { color: var(--acc-text); font-size: 14px; }
.acc-help-row span { color: var(--acc-muted); font-size: 12.5px; }

/* Plan & billing */
.plan-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; padding: 26px; background: radial-gradient(520px 220px at 0% 0%, #ff6fb51c, transparent 70%), linear-gradient(180deg, #17141c, #111015); }
.plan-detail h3 { font-size: 22px; letter-spacing: -.03em; }
body.account-ui .plan-price { margin: 0 0 16px; color: #d9d2da; font-size: 14px; }
.period { margin: 6px 0 16px; }
.period-labels { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--acc-text); font-size: 14px; font-weight: 600; }
.period-labels span:last-child { text-align: right; }
.period-labels small { display: block; color: var(--acc-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.period .acc-muted { margin-top: 8px; }
body.account-ui .plan-detail .product-lead { margin: 0; color: #cfc8d0; font-size: 13.5px; line-height: 1.7; }
.plan-detail .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.plan-detail .acts .btn { border-radius: 999px; }
.plan-detail-side { padding-left: 30px; border-left: 1px solid var(--acc-line); }
.plan-detail-side h4 { margin: 0 0 12px; color: var(--acc-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: #e2dce3; font-size: 13.5px; line-height: 1.55; }
.ticks li svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--acc-ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ticks li.no { grid-template-columns: 1fr; color: var(--acc-muted); font-size: 12.5px; }
.ticks a { color: #ffc2df; text-decoration: underline; text-decoration-color: #ffc2df55; text-underline-offset: 3px; }
.pay-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--acc-line2); border-radius: 14px; background: linear-gradient(135deg, #221b29, #16131b); }
.pay-chip { display: grid; place-items: center; width: 48px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #f5d3e6, #c9b6ff); }
.pay-chip svg { width: 24px; height: 24px; fill: none; stroke: #2a1227; stroke-width: 1.6; }
.pay-card strong { display: block; color: var(--acc-text); font-size: 14.5px; }
.pay-card span { color: var(--acc-muted); font-size: 12.5px; }
.skeleton { padding: 18px 0; animation: acc-pulse 1.4s ease-in-out infinite; }
@keyframes acc-pulse { 50% { opacity: .45; } }
.tier-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--acc-line); border-radius: 16px; background: #121116; }
.tier .acc-card-top { margin-bottom: 4px; }
.tier b { color: var(--acc-text); font-size: 15px; }
body.account-ui .tier .tier-price { margin: 0; color: var(--acc-text); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.tier .btn, .tier .inline-form { margin-top: 12px; align-self: flex-start; }
.tier.current { border-color: #ff98cb66; background: linear-gradient(180deg, #ff6fb512, #121116); }

/* Masters */
.acc-panel .master-list { display: grid; gap: 10px; }
.acc-panel .master-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--acc-line); border-radius: 14px; background: #131218; }
.acc-panel .master-row h3 { margin: 0; color: var(--acc-text); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.acc-panel .master-row .meta { color: var(--acc-muted); font-size: 12.5px; }
.acc-panel .master-row .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.acc-panel .master-row .btn { min-height: 38px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; }
.master-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #ff6fb526, #c48bff1f); }
.master-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--acc-pink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Packs & plugins */
body.account-ui .acc-panel .products { display: grid; grid-template-columns: 1fr; gap: 16px; }
.acc-panel .own-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; border: 1px solid var(--acc-line); border-radius: 18px; background: linear-gradient(180deg, #16141b, #111015); }
.acc-panel .own-card:not(:has(.own-art)) { grid-template-columns: 1fr; }
.own-art { position: relative; align-self: start; margin: 24px 0 24px 24px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--acc-line2); border-radius: 14px; background: #0d0c10; box-shadow: 0 14px 34px #0008; }
.own-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.acc-panel .own-card .body { padding: 22px 24px; }
.acc-panel .own-card .tag { color: var(--acc-pink); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.acc-panel .own-card h3 { margin: 4px 0 2px; font-size: 20px; }
.computers { margin-top: 18px; }
.computers ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.computers li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--acc-line); border-radius: 10px; color: #e2dce3; font-size: 13px; }
.computers li small { color: var(--acc-muted); }
.acc-panel .purchase-help { margin-top: 20px; }
.acc-panel .feedback-details { margin-top: 20px; }

/* Settings */
.acc-form label:not(.check) { display: block; margin: 14px 0 6px; color: #cfc8d0; font-size: 12.5px; font-weight: 600; }
.acc-form > label:first-of-type { margin-top: 0; }
.acc-form .check { margin-top: 12px; }
body.account-ui .acc-form .check input { min-height: 0; height: 20px; }
.acc-form input[readonly] { opacity: .7; }
.acc-form .acts { margin-top: 16px; }
.acc-form #email-note { margin-top: 6px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 6px; }
.signin-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.signin-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--acc-line); border-radius: 12px; }
.signin-list b { display: block; color: var(--acc-text); font-size: 14px; }
.signin-list small { color: var(--acc-muted); font-size: 12px; line-height: 1.5; }
.si-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff0d; }
.si-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--acc-pink); stroke-width: 1.7; }
.si-ic.g { background: #fff; }
.si-ic.g svg { stroke: none; }
.si-ic img { width: 20px; height: 20px; }
.acc-app:has(.spinz-app-link[hidden]) { display: none; }
.acc-app { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--acc-line); }
.acc-app .btn { margin-top: 10px; }
.acc-panel .settings-details { margin-top: 16px; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 1080px) {
  .acc-grid3 { grid-template-columns: 1fr 1fr; }
  .acc-grid3 .runs-card { grid-column: 1 / -1; }
  .lib-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .acc-hero-in { grid-template-columns: auto 1fr; gap: 18px; padding: 28px 0 24px; }
  .acc-hero-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .acc-avatar { width: 64px; height: 64px; font-size: 22px; }
  .acc-layout { grid-template-columns: 1fr; gap: 20px; padding-top: 0; }
  .acc-nav { position: sticky; top: 72px; z-index: 15; flex-direction: row; gap: 6px; margin: 0 -24px; padding: 12px 24px; overflow-x: auto; scrollbar-width: none; background: #0b0a0ef2; backdrop-filter: blur(14px); border-bottom: 1px solid var(--acc-line); }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-nav a { flex: none; min-height: 38px; padding: 6px 14px; border: 1px solid var(--acc-line2); border-radius: 999px; font-size: 13px; }
  .acc-nav a svg { display: none; }
  .acc-nav a small { margin-left: 4px; }
  .acc-nav a[aria-current="page"] { box-shadow: none; border-color: #ff98cb80; }
  .acc-nav-label { display: none; }
  .plan-detail { grid-template-columns: 1fr; gap: 22px; }
  .plan-detail-side { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--acc-line); }
}
@media (max-width: 640px) {
  body.account-ui .wrap { width: calc(100% - 32px); }
  .acc-nav { margin: 0 -16px; padding: 10px 16px; }
  .acc-hello h1 { font-size: 30px; }
  .acc-hero-acts .btn { flex: 1 1 auto; }
  .acc-head { flex-direction: column; align-items: flex-start; }
  .acc-grid3, .acc-grid2, .tier-row, .acc-help-row { grid-template-columns: 1fr; }
  .acc-grid3 .runs-card { grid-column: auto; }
  .beat-grid, .beat-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .acc-panel .master-row { grid-template-columns: auto 1fr; }
  .acc-panel .master-row .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .acc-panel .own-card { grid-template-columns: 1fr; }
  .own-art { width: 96px; margin: 18px 0 0 18px; }
  .acc-panel .own-card .body { padding: 18px; }
  .check-grid { grid-template-columns: 1fr; }
  .acc-table { font-size: 12.5px; }
  .acc-table th, .acc-table td { padding: 10px; }
  .acc-table .mono { display: none; }
  .acc-card.flush .acc-table th:nth-child(3) { display: none; }
}

/* ================= Sign in: photo on the left, the form on the right (like Fender and PreSonus) ================= */
body.account-ui main.auth-main, body[data-site-family].account-ui main.auth-main { padding: 0; margin: 0; max-width: none; width: 100%; }
.auth-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 88px); min-height: calc(100dvh - 88px); background: #0b0a0e; }
.auth-photo { position: relative; overflow: hidden; background: #0b0910; }
.auth-photo picture, .auth-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.auth-photo img { object-fit: cover; object-position: 38% 60%; }
.auth-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0a080ecc 100%), linear-gradient(90deg, transparent 70%, #0b0a0e 100%); }
.auth-photo-copy { position: absolute; z-index: 1; left: clamp(28px, 5vw, 64px); right: 28px; bottom: clamp(28px, 6vh, 56px); max-width: 440px; }
body.account-ui .auth-photo .auth-photo-kicker { margin: 0 0 6px; color: var(--acc-pink); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
body.account-ui .auth-photo .auth-photo-line { margin: 0; color: #fff; font: 600 clamp(22px, 2.2vw, 30px)/1.25 var(--site-sans, 'Poppins', Arial, sans-serif); letter-spacing: -.03em; text-shadow: 0 2px 24px #000a; }
.auth-side2 { display: flex; align-items: center; justify-content: center; padding: 48px 32px 56px; }
.auth-card { width: min(400px, 100%); }
.auth-logo { display: block; width: 150px; height: auto; margin: 0 auto 30px; }
body.account-ui .auth-card .flash { margin-bottom: 18px; }
/* Sign in | Create account: one pill, the chosen side filled */
body.account-ui .auth-card .auth-tabs, body[data-site-family].account-ui .auth-card .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 22px; padding: 0; overflow: hidden; border: 1.5px solid var(--acc-pink); border-radius: 999px; background: none; }
body.account-ui .auth-card .auth-tabs button, body[data-site-family].account-ui .auth-card .auth-tabs button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: #ffc2df; font: 600 13.5px/1 var(--site-sans, 'Poppins', Arial, sans-serif); box-shadow: none; }
body.account-ui .auth-card .auth-tabs button:hover, body[data-site-family].account-ui .auth-card .auth-tabs button:hover { background: #ff98cb14; }
body.account-ui .auth-card .auth-tabs button[aria-selected="true"], body[data-site-family].account-ui .auth-card .auth-tabs button[aria-selected="true"] { background: linear-gradient(125deg, #ffb3d6, #ff8fc4 60%, #e2a9f5); color: #1b0c16; }
body.account-ui .auth-card .auth-lead { margin: 0 0 14px; font-size: 13px; text-align: center; }
/* Fields: soft filled boxes, placeholder as the label (the label stays for screen readers) */
.auth-card .auth-panel label:not(.check) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.account-ui .auth-card .auth-panel input:not([type="checkbox"]), body[data-site-family].account-ui .auth-card .auth-panel input:not([type="checkbox"]) { width: 100%; min-height: 54px; margin: 0 0 12px; padding: 0 18px; border: 1px solid #ffffff14; border-radius: 12px; background: #1a1820; color: #f4f1f3; font-size: 15px; }
body.account-ui .auth-card .auth-panel input:not([type="checkbox"]):focus { border-color: #ff98cb99; background: #1f1c26; outline: none; box-shadow: 0 0 0 3px #ff98cb26; }
body.account-ui .auth-card .auth-panel input::placeholder { color: #8f8792; }
body.account-ui .auth-card .auth-panel .check { margin: 4px 0 12px; font-size: 12px; }
body.account-ui .auth-card .auth-panel .acts { margin-top: 6px; }
body.account-ui .auth-card .auth-panel .acts .btn, body.account-ui .auth-card #code-panel .btn, body[data-site-family].account-ui .auth-card .auth-panel .acts .btn, body[data-site-family].account-ui .auth-card #code-panel .btn { width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: linear-gradient(125deg, #ffb3d6, #ff8fc4 60%, #e2a9f5); color: #1b0c16; font-size: 15px; font-weight: 600; box-shadow: 0 10px 30px #ff6fb533; }
body.account-ui .auth-card #code-panel .btn#back, body[data-site-family].account-ui .auth-card #code-panel .btn#back { background: none; border: 1px solid #ffffff2e; color: #e8e2ea; box-shadow: none; }
body.account-ui .auth-card .auth-note { margin: 12px 0 0; font-size: 12px; text-align: center; }
/* OR, then the sign-in buttons of other companies, all alike */
.gsi { margin: 0; }
.gsi[hidden], .gsi-inapp[hidden] { display: none; }
.gsi-or { margin: 22px 0 16px; color: #9b939e; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-align: center; }
.idp-list { display: grid; gap: 10px; }
body.account-ui a.idp, .idp { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 52px; border: 1px solid #ffffff14; border-radius: 999px; background: #f3f1f4; color: #1f1f1f; font: 600 14.5px/1 var(--site-sans, 'Poppins', Arial, sans-serif); text-decoration: none; transition: background .15s, box-shadow .15s; }
.idp svg, .idp img { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); }
.idp[hidden] { display: none; }
body.account-ui a.idp:hover { color: #1f1f1f; background: #fff; box-shadow: 0 6px 20px #0007; }
.idp:focus-visible { outline: 3px solid #ffb7d8; outline-offset: 3px; }
.gsi-inapp { margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; background: #ffffff0d; color: #c9c5cf; font-size: 13px; line-height: 1.55; text-align: center; }
body.account-ui .auth-card .auth-help { margin: 22px 0 0; padding: 0; border: 0; font-size: 13px; text-align: center; }
body.account-ui .auth-card .auth-help a { color: #ffc2df; font-weight: 600; }
.account-ui .gsi-note { margin: 18px 0 0; color: #8f8792; font-size: 11.5px; line-height: 1.6; text-align: center; }
.account-ui .gsi-note a { color: #c9c2cc; text-decoration: underline; }
body.account-ui .auth-card #code-panel { display: none; }
body.account-ui .auth-card #code-panel .auth-title { font-size: 24px; text-align: center; }
body.account-ui .auth-card #code-panel .auth-lead { text-align: center; font-size: 13.5px; }
body.account-ui .auth-card #code-panel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.account-ui .auth-card #code-panel input.code { width: 100%; min-height: 60px; margin-top: 18px; border-radius: 12px; background: #1a1820; border: 1px solid #ffffff14; color: #fff; font-size: 26px; letter-spacing: .5em; text-align: center; }
@media (max-width: 900px) {
  .auth-split2 { grid-template-columns: 1fr; grid-template-rows: 150px auto; min-height: 0; }
  .auth-photo-copy { display: none; }
  .auth-photo::after { background: linear-gradient(180deg, #0a080e33, #0b0a0e 100%); }
  .auth-side2 { align-items: flex-start; padding: 0 20px 48px; }
  .auth-logo { width: 130px; margin: -26px auto 22px; position: relative; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .beat-art img, .lib-tile, .beat-play { transition: none; } }

/* credits (1 Oct 2026): what things cost, on the overview */
.cost-list { list-style: none; margin: 4px 0 0; padding: 0; }
.cost-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #ffffff10; font-size: 13px; color: var(--acc-muted, #b9adc2); }
.cost-list li:last-child { border-bottom: 0; }
.cost-list b { color: var(--acc-text, #fff); font-weight: 600; white-space: nowrap; }

/* Round 6 (2 Oct 2026): the master-another band and play buttons on the masters list */
.acc-master-band{display:flex;align-items:center;gap:16px;margin:0 0 22px;padding:16px 18px;border-radius:22px;border:1px solid transparent;background:linear-gradient(160deg,#1c1323,#120c17 60%) padding-box,linear-gradient(160deg,#ff98cb66,#ffffff14 40%,#7fd8ff33) border-box;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.34,1.3,.4,1)}
.acc-master-band:hover{transform:translateY(-2px)}
.acc-master-round{flex:none;width:64px;height:64px;border-radius:50%;border:2px dashed #ff98cb88;display:grid;place-items:center;background:#ff98cb14}
.acc-master-round svg{width:26px;height:26px;fill:none;stroke:#ffd6ea;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acc-master-words{flex:1;min-width:0}
.acc-master-words b{display:block;font-size:17px;font-weight:600;color:var(--acc-text,#fff)}
.acc-master-words small{display:block;margin-top:3px;font-size:13px;color:var(--acc-muted,#a9a2b0)}
.acc-master-go{flex:none;font-size:22px;color:#ff98cb}
.master-row .btn.master-play{width:42px;min-height:42px;padding:0;display:grid;place-items:center;border-radius:50%}
.master-row .btn.master-play svg{width:18px;height:18px}
.master-row .btn.master-play.is-on{background:#ff98cb;color:#1a0d16;border-color:transparent}
@media(max-width:600px){.acc-master-band{padding:14px}.acc-master-round{width:54px;height:54px}}