/* One presentation system for all three public workspaces. */
body:not(.admin-entry) { --pd-ink:#242030; --pd-muted:#756e83; --pd-line:#e5dfed; --pd-card:#fff; --pd-soft:#f6f2fc; --pd-accent:#7028f4; }
html[data-theme="dark"] body:not(.admin-entry) { --pd-ink:#f5f1fc; --pd-muted:#b5acbf; --pd-line:#484050; --pd-card:#25212d; --pd-soft:#312839; --pd-accent:#b18aff; }
body:not(.admin-entry) :is(.workspace,.vocal-workspace,.audio-converter-stage) { border-radius:24px; padding:32px; margin-top:16px; }
body:not(.admin-entry) :is(.member-workspace,.vocal-workspace,.audio-converter-stage) { grid-template-columns:minmax(260px,.72fr) minmax(0,1.45fr); gap:32px; }
body:not(.admin-entry) .member-workspace { padding:0; margin:0; }
body:not(.admin-entry) :is(.workspace-intro,.vocal-intro,.audio-converter-hero) { padding:24px 8px; }
body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) { min-width:0; padding:24px; border:1px solid var(--pd-line); border-radius:20px; background:var(--pd-card); color:var(--pd-ink); box-shadow:0 16px 48px #2814400a; min-height:720px; }
body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) .workspace-tabs { display:flex; gap:6px; padding:5px; margin:0 0 28px; border:1px solid var(--pd-line); border-radius:12px; background:var(--pd-soft); overflow-x:auto; min-height:48px; }
body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) .workspace-tab { flex:1 0 auto; min-height:38px; padding:8px 10px; font-size:14px; border:0; border-radius:8px; color:var(--pd-muted); background:transparent; font-weight:650; white-space:nowrap; }
body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) .workspace-tab.active { background:var(--pd-card); color:var(--pd-accent); box-shadow:0 2px 8px #25103e12; }
body:not(.admin-entry) .workspace-tab.active::after { display:none; }
body:not(.admin-entry) :is(.workspace-benefit,.vocal-benefit) { padding:16px 0; border:0; background:transparent; }
.plan-intro { position:relative; margin:0 0 24px; padding:0; color:var(--pd-ink); }
.plan-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--pd-accent); font-size:12px; font-weight:750; letter-spacing:.06em; }
.plan-eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px #9562f016; }
body:not(.admin-entry) .plan-heading { margin:0 0 10px; font-size:clamp(24px,2vw,32px); line-height:1.3; letter-spacing:-.035em; }
.plan-subtitle { margin:0; color:var(--pd-muted); font-size:14px; line-height:1.65; }
.product-explainer { margin:24px 0; padding:24px; border:1px solid var(--pd-line); border-radius:20px; background:var(--pd-card); color:var(--pd-ink); }
.product-explainer h2 { margin:0 0 18px; font-size:clamp(20px,2vw,26px); line-height:1.3; }
.product-explainer .tool-guide-grid { margin:0; }
.tool-info-panel > p { color:var(--pd-muted); font-size:12px; line-height:1.7; margin:0 0 16px; }
body:not(.admin-entry) :is(.tool-account-content,#plansList) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
body:not(.admin-entry) :is(.tool-account-content,#plansList):has(.free-plan-card) { grid-template-columns:repeat(4,minmax(0,1fr)); }
body:not(.admin-entry) .free-plan-card { border-color:var(--pd-accent); background:var(--pd-soft); }
body:not(.admin-entry) .tool-account-content.is-free { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tool-account-balance { grid-column:1/-1; border:1px solid var(--pd-line); border-radius:10px; padding:12px 14px; margin:0 0 10px; background:var(--pd-soft); color:var(--pd-muted); font-size:13px; font-weight:500; }
body:not(.admin-entry) :is(.tool-plan-card,#plansList .plan) { position:relative; display:flex; flex-direction:column; gap:14px; padding:18px 16px; min-width:0; border:1px solid var(--pd-line); border-radius:16px; color:var(--pd-ink); background:var(--pd-card); box-shadow:0 5px 18px #28144005; transition:transform .18s,box-shadow .18s; }
body:not(.admin-entry) :is(.tool-plan-card,#plansList .plan):hover { transform:translateY(-3px); box-shadow:0 14px 28px #52239b14; }
body:not(.admin-entry) :is(.tool-plan-card,#plansList .plan).is-recommended { border:1.5px solid #9460ed; background:linear-gradient(150deg,var(--pd-soft),var(--pd-card) 75%); box-shadow:0 8px 28px #7028f412; }
.plan-badge { align-self:flex-start; border-radius:5px; padding:4px 7px; background:var(--pd-soft); color:var(--pd-muted); font-size:11px; line-height:1.4; font-weight:650; }
.is-recommended .plan-badge { color:#fff; background:#7028f4; }
body:not(.admin-entry) :is(.tool-plan-card h3,#plansList .plan-title) { font-size:15px; font-weight:650; line-height:1.4; margin:0; }
.plan-amount { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
body:not(.admin-entry) .plan-amount strong { font-size:38px; line-height:1.05; letter-spacing:-.055em; font-weight:750; }
.plan-amount span { font-size:12px; color:var(--pd-muted); }
body:not(.admin-entry) :is(.tool-plan-card .plan-price,#plansList .plan-price) { color:var(--pd-ink); font-size:25px; font-weight:700; letter-spacing:-.025em; line-height:1.3; }
.plan-feature-list { list-style:none; padding:16px 0 0; margin:0 0 6px; border-top:1px solid var(--pd-line); display:grid; gap:12px; font-size:12px; color:var(--pd-muted); line-height:1.55; }
.plan-feature-list li { margin:0; padding-left:17px; position:relative; }
.plan-feature-list li::before { content:'✓'; position:absolute; left:0; color:var(--pd-accent); font-weight:700; }
body:not(.admin-entry) :is(.tool-plan-card .plan-action,#plansList .plan-action) { display:block; text-align:center; width:100%; min-height:42px; padding:11px 8px; margin-top:auto; border:1px solid var(--pd-line); border-radius:9px; background:var(--pd-soft); color:var(--pd-accent); text-decoration:none; font:inherit; font-size:12px; line-height:1.5; font-weight:700; cursor:pointer; white-space:normal; }
body:not(.admin-entry) .is-recommended .plan-action { background:#7028f4!important; border-color:#7028f4!important; color:#fff!important; }
body:not(.admin-entry) .plan-action:disabled { opacity:.5; cursor:not-allowed; }
.plan-action:focus-visible { outline:3px solid #b18aff; outline-offset:3px; }
.plan-reassurance { display:flex; align-items:center; gap:12px; padding:16px; margin-top:20px; border:1px solid var(--pd-line); border-radius:12px; color:var(--pd-muted); font-size:12px; line-height:1.7; }
.plan-note-icon { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:10px; background:var(--pd-soft); color:var(--pd-accent); font-size:22px; }
/* Keep the original piano purchase controls and dynamic account data. */
#workspacePanelAccount:not([hidden]) { display:flex; flex-direction:column; }
#workspacePanelAccount .plan-intro { order:0; }
#workspacePanelAccount .billing-section { order:1; padding:0; border:0; margin:0 0 20px; background:transparent; }
#workspacePanelAccount > :is(.stats-grid,.quota,.account-details) { order:2; }
#workspacePanelAccount .billing-section > .section-head { display:none; }
#workspacePanelAccount .billing-notice { color:var(--pd-muted); font-size:12px; line-height:1.7; }
#workspacePanelAccount .billing-legal { font-size:11px; line-height:1.7; }
#workspacePanelAccount .stats-grid { border-top:1px solid var(--pd-line); padding-top:18px; gap:10px; }
#workspacePanelAccount .stat { background:var(--pd-soft); border:0; border-radius:10px; padding:12px; }
#workspacePanelAccount .stat-value { font-size:14px; overflow-wrap:anywhere; }
#plansList .plan-main { display:contents; }
#plansList .plan-main > div { display:grid; gap:10px; }
#plansList .plan-price-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
#plansList .plan-price-row del { font-size:12px; color:var(--pd-muted); }
#plansList .plan-action { order:5; }
#plansList .plan-meta { display:grid; gap:10px; border-top:1px solid var(--pd-line); padding-top:14px; color:var(--pd-muted); font-size:12px; line-height:1.55; }
#plansList .plan-meta span::before { content:'✓ '; color:var(--pd-accent); }
#plansList .hint { font-size:11px; color:var(--pd-muted); line-height:1.6; }
@media(max-width:1050px) { body:not(.admin-entry) :is(.member-workspace,.vocal-workspace,.audio-converter-stage) { grid-template-columns:minmax(0,1fr); } body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) { min-height:0; } }
@media(max-width:540px) { body:not(.admin-entry) :is(.workspace,.vocal-workspace,.audio-converter-stage) { padding:16px 12px; border-radius:18px; gap:20px; } body:not(.admin-entry) .member-workspace { padding:0; } body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) { padding:16px 12px; border-radius:15px; } body:not(.admin-entry) :is(.workspace-intro,.vocal-intro,.audio-converter-hero) { padding:16px 4px; } body:not(.admin-entry) :is(.tool-account-content,#plansList,.tool-account-content.is-free) { grid-template-columns:minmax(0,1fr); } body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) .workspace-tabs { gap:2px; padding:4px; } body:not(.admin-entry) :is(.workspace-tool,.vocal-workspace-tool,.audio-converter-panel) .workspace-tab { padding:8px 7px; font-size:12px; } body:not(.admin-entry) :is(.tool-plan-card,#plansList .plan) { padding:20px; } }
@media(min-width:541px) and (max-width:1050px) { body:not(.admin-entry) :is(.tool-account-content,#plansList):has(.free-plan-card) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { body:not(.admin-entry) :is(.tool-account-content,#plansList):has(.free-plan-card) { grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { body:not(.admin-entry) :is(.tool-plan-card,#plansList .plan) { transition:none; transform:none; } }
body:not(.admin-entry) #plansList .plan { grid-column:auto; }
body:not(.admin-entry) :is(.workspace-head h1,.vocal-intro h1,.audio-converter-hero h1) { width:auto; max-width:none; font-size:clamp(34px,3.1vw,46px); line-height:1.15; letter-spacing:-.035em; }
body:not(.admin-entry) :is(.workspace-intro,.vocal-intro,.audio-converter-hero)::after { display:none; }
body:not(.admin-entry) :is(.promo-banner,.vocal-promo,.audio-converter-promo) { background:linear-gradient(110deg,#7925ed,#5120cd); color:#fff; }
body:not(.admin-entry) :is(.promo-inner,.vocal-promo-inner,.audio-converter-promo-inner) { min-height:44px; max-width:1200px; margin:auto; padding:6px 20px; }
body:not(.admin-entry) :is(.vocal-promo-action,.audio-converter-promo-action,.promo-cta) { background:#faf7ff; color:#5926b7; border-radius:8px; }
body:not(.admin-entry) .audio-converter-panel:has(.tool-info-panel:not([hidden])) > .audio-converter-trust-row { display:none; }
body:not(.admin-entry) .tool-info-panel[role="tabpanel"]:not(:has(.plan-intro)) ol { list-style:none; counter-reset:steps; padding:0; display:grid; gap:16px; }
body:not(.admin-entry) .tool-info-panel[role="tabpanel"]:not(:has(.plan-intro)) li { counter-increment:steps; display:flex; gap:14px; padding:18px; margin:0; border:1px solid var(--pd-line); border-radius:12px; font-size:14px; }
body:not(.admin-entry) .tool-info-panel[role="tabpanel"]:not(:has(.plan-intro)) li::before { content:'0' counter(steps); color:var(--pd-accent); font-weight:750; }
#workspacePanelAccount .account-entitlement { display:grid; gap:6px; padding:17px 18px; margin:0 0 12px; border:1px solid var(--pd-line); border-radius:14px; background:var(--pd-soft); color:var(--pd-ink); }
#workspacePanelAccount .account-entitlement.hidden { display:none; }
#workspacePanelAccount .account-entitlement.is-active { border-color:var(--pd-accent); background:linear-gradient(135deg,var(--pd-soft),var(--pd-card)); }
#workspacePanelAccount .account-entitlement-label { color:var(--pd-muted); font-size:12px; font-weight:650; }
#workspacePanelAccount .account-entitlement strong { font-size:21px; line-height:1.3; overflow-wrap:anywhere; }
#workspacePanelAccount .account-entitlement.is-active strong { color:var(--pd-accent); }
#workspacePanelAccount .account-entitlement-detail { color:var(--pd-muted); font-size:13px; line-height:1.6; }
#workspacePanelAccount .plan-account-details { order:1; margin:0 0 20px; border:1px solid var(--pd-line); border-radius:10px; background:var(--pd-soft); font-size:13px; }
#workspacePanelAccount .plan-account-details summary { cursor:pointer; padding:14px; color:var(--pd-muted); }
#workspacePanelAccount .plan-account-details > :not(summary) { margin:12px; }
#workspacePanelAccount .plan-account-details .stats-grid { border:0; padding:0; }
#workspacePanelAccount .billing-section { order:2; }
#workspacePanelAccount .plan-account-details .stat { background:var(--pd-card); }
.job-view-action[aria-busy="true"] { cursor:progress; opacity:1; }
.task-view-spinner { display:inline-block; width:13px; height:13px; margin-left:7px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:task-view-spin .7s linear infinite; flex-shrink:0; }
@keyframes task-view-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .task-view-spinner { animation-duration:1.6s; } }
.plan-launch { padding:12px 14px; border:1px solid #bb98f1; border-radius:10px; background:var(--pd-soft); color:var(--pd-accent); font-size:12px; line-height:1.6; margin-bottom:16px; }
.plan-launch-price { color:var(--pd-accent); font-size:11px; font-weight:650; }
.tool-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:22px 0; }
.tool-guide-section { padding:18px; border:1px solid var(--pd-line); border-radius:12px; background:var(--pd-soft); }
.tool-guide-section h3 { margin:0 0 10px; font-size:15px; color:var(--pd-ink); }
.tool-guide-section p,.tool-guide-faq p { margin:0; color:var(--pd-muted); font-size:13px; line-height:1.85; }
.tool-guide-faq h3 { font-size:18px; margin:24px 0 12px; }
.tool-guide-faq details { border-bottom:1px solid var(--pd-line); padding:14px 0; }
.tool-guide-faq summary { cursor:pointer; color:var(--pd-ink); font-size:14px; font-weight:650; }
.tool-guide-faq p { padding:12px 0 2px; }
@media(max-width:540px) { .tool-guide-grid { grid-template-columns:minmax(0,1fr); } }
/* Product-scoped campaign colors; all typography and geometry are shared. */
body:not(.admin-entry) .promo-banner { --campaign-start:#7925ed; --campaign-end:#5120cd; --campaign-ink:#5820b2; }
body:not(.admin-entry) .vocal-promo { --campaign-start:#c33776; --campaign-end:#932457; --campaign-ink:#992358; }
body:not(.admin-entry) .audio-converter-promo { --campaign-start:#117f78; --campaign-end:#08615f; --campaign-ink:#0b6763; }
body:not(.admin-entry) :is(.promo-banner,.vocal-promo,.audio-converter-promo) { background:linear-gradient(110deg,var(--campaign-start),var(--campaign-end)); border:0; color:#fff; font-family:inherit; }
body:not(.admin-entry) :is(.promo-inner,.vocal-promo-inner,.audio-converter-promo-inner) { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; max-width:1200px; min-height:64px; padding:10px 20px; margin:0 auto; box-sizing:border-box; }
body:not(.admin-entry) :is(.promo-copy,.vocal-promo-copy,.audio-converter-promo-copy) { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 12px; min-width:0; }
body:not(.admin-entry) :is(#promoTag,#vocalPromoTag,#audioConverterPromoTag) { grid-row:1/3; display:block; padding:6px 10px; border:1px solid #ffffff55; border-radius:7px; background:#ffffff16; color:#fff; font-size:12px; font-weight:650; line-height:1.4; white-space:nowrap; }
body:not(.admin-entry) :is(#promoTitle,#vocalPromoTitle,#audioConverterPromoTitle) { display:block; margin:0; font-size:16px; font-weight:700; line-height:1.4; letter-spacing:0; color:#fff; }
body:not(.admin-entry) :is(#promoSubtitle,#vocalPromoSubtitle,#audioConverterPromoSubtitle) { display:block; margin:0; font-size:12px; font-weight:400; line-height:1.5; color:#ffffffdf; }
body:not(.admin-entry) :is(.promo-cta,.vocal-promo-action,.audio-converter-promo-action) { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:8px; padding:9px 14px; min-height:38px; border:0; border-radius:8px; background:#fff; color:var(--campaign-ink); font-size:13px; font-weight:700; line-height:1.4; text-decoration:none; box-sizing:border-box; }
body:not(.admin-entry) .promo-cta > [aria-hidden] { display:none; }
@media(max-width:600px) {
 body:not(.admin-entry) :is(.promo-inner,.vocal-promo-inner,.audio-converter-promo-inner) { padding:12px 14px; gap:10px; align-items:center; }
 body:not(.admin-entry) :is(.promo-copy,.vocal-promo-copy,.audio-converter-promo-copy) { grid-template-columns:minmax(0,1fr); gap:5px; }
 body:not(.admin-entry) :is(#promoTag,#vocalPromoTag,#audioConverterPromoTag) { grid-row:auto; width:fit-content; font-size:10px; padding:3px 6px; }
 body:not(.admin-entry) :is(#promoTitle,#vocalPromoTitle,#audioConverterPromoTitle) { font-size:14px; }
 body:not(.admin-entry) :is(#promoSubtitle,#vocalPromoSubtitle,#audioConverterPromoSubtitle) { font-size:11px; }
 body:not(.admin-entry) :is(.promo-cta,.vocal-promo-action,.audio-converter-promo-action) { font-size:12px; padding:9px 10px; max-width:110px; white-space:normal; text-align:center; }
}
.plan-regular-price { font-size:13px; color:var(--pd-muted,#776b81); font-weight:400; line-height:1.4; }
.plan-savings { display:inline-block; margin-left:8px; padding:3px 6px; border-radius:5px; background:#f9e5ee; color:#a62260; font-size:12px; line-height:1.3; font-weight:700; vertical-align:middle; letter-spacing:0; }