/* The logged-in app (scripts/app.mjs), from CD's "BAG - User App Updated" design (2026-10-27): values transcribed from
   its markup. Inter everywhere (CD's Studio / Story Time render in Inter: Quicksand is declared there but never applied). Brand purple #6E24FD
   everywhere (CJ; CD's Studio used #664EAE). Light only: the site has no dark theme. */
.bag-app {
  --p: #6E24FD; --p-h: #5A16E0; --p-t: #F1EAFF; --p-t2: #E4D6FF;
  --ink: #0B0B0F; --mut: #5E5A6B; --txt2: #3A3646; --line: #E6E3EE; --line2: #ECE9F2; --line3: #E1DDEA;
  --side: #FAF9FC; --hov: #F1EEF7; --chip: #F3F1F8; --red: #C0392B;
  margin: 0; background: #FFFFFF; color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.5;
}
.bag-app.ap-quick { --ink: #141414; --mut: #6E6E6E; --line: #E0E0E0; --soft: #F4F4F4; }
.bag-app a { color: var(--p); text-decoration: none; }
.bag-app a:hover { color: var(--p-h); }
.bag-app button, .bag-app input, .bag-app select, .bag-app textarea { font-family: inherit; }
.bag-app button { cursor: pointer; }
.ap { display: flex; min-height: 100vh; }

/* ---- sidebar (desktop) ---- */
.ap-sidecol { width: 232px; flex: none; background: var(--side); border-right: 1px solid var(--line2); }
.ap-side { width: 232px; box-sizing: border-box; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 14px; font-family: 'Inter', system-ui, sans-serif; }
.ap-brand { display: flex; align-items: center; gap: 10px; padding: 4px 12px 20px; color: var(--ink); }
.ap-brand img { display: block; border-radius: 7px; }
.ap-brand .ap-word { height: 36px; width: auto; border-radius: 0; }
.ap-top .ap-brand .ap-word { height: 30px; }
.ap-nav { display: flex; flex-direction: column; gap: 2px; }
.ap-nav-more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2); }
.ap-nav-i { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--mut) !important; }
.ap-nav-i:hover { background: var(--hov); color: #0B0B0F !important; }
.ap-nav-i[aria-current="page"] { background: var(--p-t); color: #0B0B0F !important; font-weight: 700; }
.ap-side-foot { margin-top: auto; }
.ap-public { display: flex; flex-direction: column; gap: 8px; padding: 14px 4px 0; border-top: 1px solid var(--line2); }
.ap-btn { height: 40px; border-radius: 999px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 18px; box-sizing: border-box; white-space: nowrap; }
.ap-btn-p { background: var(--p); color: #FFFFFF !important; border: 0; }
.ap-btn-p:hover { background: var(--p-h); }
.ap-btn-o { border: 1px solid var(--line3); color: #0B0B0F !important; font-weight: 600; background: #FFFFFF; }
.ap-btn-s { height: 36px; font-size: 13px; padding: 0 14px; }
.ap-user { position: relative; }
.ap-user summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.ap-user summary::-webkit-details-marker { display: none; }
.ap-user summary:hover { background: var(--hov); }
/* the account chip (CJ 2026-10-29): plain at rest like the nav items; highlighted only while its menu is open or on the
   Account page; a focus ring only when tabbed to (focus-visible), never after a mouse click */
.ap-user[open] > summary, .ap-user[data-here] > summary { background: var(--p-t); }
.ap-user summary:focus { outline: none; }
.ap-user summary:focus-visible { outline: 2.5px solid var(--p); outline-offset: 2px; }
.ap-av { width: 32px; height: 32px; border-radius: 50%; background: var(--p); color: #FFFFFF; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; text-transform: uppercase; }
.ap-user-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ap-user-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-user-t small { font-size: 12px; color: var(--mut); }
.ap-menu { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 30; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.12); padding: 6px; display: flex; flex-direction: column; }
.ap-menu a, .ap-menu button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #0B0B0F !important; font-size: 14px; font-weight: 600; text-align: left; }
.ap-menu a:hover, .ap-menu button:hover { background: var(--hov); }
.ap-menu hr { border: 0; border-top: 1px solid var(--line2); margin: 4px 0; }
.ap-menu-h { margin: 4px 10px 8px; display: flex; flex-direction: column; font-size: 14px; }
.ap-menu-h small { color: var(--mut); font-size: 12px; }

/* ---- phone: top bar + bottom tabs ---- */
.ap-top, .ap-tabs, .ap-menu-btn, .ap-drawer-x, .ap-scrim { display: none; }
.ap-main { flex: 1; min-width: 0; }
@media (max-width: 759px) {
  .ap { flex-direction: column; }
  .ap-sidecol { display: none; }
  .ap-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line2); position: sticky; top: 0; z-index: 20; background: #FFFFFF; }
  .ap-top .ap-brand { padding: 0; }
  .ap-user-top summary { padding: 4px; }
  .ap-user-top .ap-menu { left: auto; right: 0; bottom: auto; top: 46px; width: 230px; }
  .ap-tabs { display: flex; position: sticky; bottom: 0; z-index: 20; background: #FFFFFF; border-top: 1px solid var(--line2); font-family: 'Inter', system-ui, sans-serif; }
  .ap-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; font-size: 11px; font-weight: 600; color: var(--mut) !important; }
  .ap-tabs a[aria-current="page"] { color: var(--p) !important; }
  /* the sidebar as a drawer (ElevenLabs pattern, CJ 2026-10-28): the same .ap-side, slid in from the left over a scrim */
  .ap-top .ap-brand { margin-right: auto; }
  .ap-menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 4px 0 -10px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #0B0B0F; }
  .ap-menu-btn:hover { background: var(--hov); }
  .ap-sidecol { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 80%; max-width: 360px; border-right: 0; box-shadow: 8px 0 32px rgba(11, 11, 15, 0.18);
    transform: translateX(-100%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
  .ap-sidecol.open { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .ap-sidecol .ap-side { width: 100%; height: 100%; position: relative; overflow-y: auto; overscroll-behavior: contain; padding-top: 14px; }
  .ap-sidecol .ap-brand { padding-right: 56px; }
  .ap-drawer-x { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #0B0B0F; }
  .ap-drawer-x:hover { background: var(--hov); }
  .ap-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(11, 11, 15, 0.45); }
  html.ap-drawer-lock, html.ap-drawer-lock body { overflow: hidden; overscroll-behavior: none; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .ap-sidecol, .ap-sidecol.open { transition: none; } }

/* ---- shared ---- */
.ap-wrap { max-width: 1240px; margin: 0 auto; padding: 32px 40px 96px; box-sizing: border-box; }
.ap-quick .ap-wrap { max-width: 1120px; padding: 36px clamp(20px, 4vw, 40px) 96px; }
@media (max-width: 759px) { .ap-wrap { padding: 20px 16px 64px; } }
.ap-h1 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 20px; letter-spacing: -0.01em; }
.ap-h2 { font-size: 20px; font-weight: 600; margin: 0; }
.ap-h2 small { font-size: 13px; font-weight: 500; color: var(--mut); margin-left: 6px; }
.ap-h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.ap-h2-row { display: flex; align-items: center; gap: 12px; margin: 40px 0 16px; flex-wrap: wrap; }
.ap-sub, .ap-note { color: var(--mut); font-size: 14px; }
.ap-note { font-size: 13px; margin: 6px 0 12px; }
.ap-hint { font-size: 13px; color: var(--mut); }
.ap-status { font-size: 14px; color: var(--mut); min-height: 1.4em; margin: 0; }
.ap-status.err { color: var(--red); font-weight: 600; }
.ap-soon { font-size: 11px; font-weight: 700; color: var(--p); background: var(--p-t); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }
.ap-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: #FFFFFF; }
.ap-pitch { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ap-pitch h2 { margin: 0; font-size: 22px; }
.ap-pitch p { margin: 0; color: var(--txt2); }
.ap-empty { text-align: center; padding: 56px 16px; border: 1px dashed var(--line3); border-radius: 18px; color: var(--mut); }
.ap-empty h2 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.ap-empty-s { padding: 24px 16px; }
.ap-link { border: 0; background: none; padding: 0; color: var(--p); font-weight: 600; font-size: inherit; }
.ap-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; background: #0B0B0F; color: #FFFFFF; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.ap-play-s, .ap-play, .ap-play-l { border: 0; border-radius: 50%; background: var(--p); color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ap-play-s { width: 36px; height: 36px; }
.ap-play { width: 44px; height: 44px; }
.ap-play-l { width: 44px; height: 44px; }
.ap-play-s:hover, .ap-play:hover, .ap-play-l:hover { background: var(--p-h); }
.ap-play-s::before, .ap-play::before, .ap-play-l::before { content: ''; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
[aria-pressed="true"].ap-play-s::before, [aria-pressed="true"].ap-play::before, [aria-pressed="true"].ap-play-l::before, .playing > .ap-play::before { width: 10px; height: 13px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }

/* ---- Voices ---- */
.ap-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line2); margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ap-subtabs::-webkit-scrollbar { display: none; }
.ap-subtabs button { flex: none; }
.ap-subtabs.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.ap-subtabs button { border: 0; background: none; height: 44px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; white-space: nowrap; }
.ap-subtabs button[aria-selected="true"] { color: #0B0B0F; border-bottom-color: var(--p); }
.ap-search-row { display: flex; gap: 10px; }
.ap-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--line3); border-radius: 12px; color: var(--mut); background: #FFFFFF; min-width: 0; }
.ap-search:focus-within { border-color: var(--p); }
.ap-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: 15px; color: var(--ink); min-width: 0; }
.ap-filters-btn { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 1px solid var(--line3); border-radius: 12px; background: #FFFFFF; font-size: 14px; font-weight: 600; color: #0B0B0F; }
.ap-filters-btn[aria-expanded="true"] { border-color: var(--p); color: var(--p); }
.ap-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 16px; margin-top: 10px; border: 1px solid var(--line2); border-radius: 14px; background: var(--side); }
.ap-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mut); }
.ap-filters select, .ap-sort select { height: 38px; border: 1px solid var(--line3); border-radius: 10px; padding: 0 10px; font-size: 14px; background: #FFFFFF; color: #0B0B0F; }
.ap-filters .ap-x18 { flex-direction: row; align-items: center; gap: 8px; align-self: flex-end; height: 38px; font-size: 14px; color: #0B0B0F; }
.ap-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.ap-chip { height: 36px; padding: 0 14px; border: 1px solid var(--line3); border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 700; color: #0B0B0F; }
.ap-chip:hover { border-color: #0B0B0F; }
.ap-chip[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: #FFFFFF; }
.ap-voices .ap-h2 { margin: 36px 0 16px; }
.ap-voices .ap-h2-row .ap-h2 { margin: 0; }
.ap-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.ap-rail > * { scroll-snap-align: start; }
.ap-rail-nav { margin-left: auto; display: flex; gap: 4px; }
.ap-rail-nav button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; color: #0B0B0F; }
.ap-rail-nav button:hover { background: var(--hov); }
/* the voice card (CD's LibVoiceCard) */
.ap-vc { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; box-sizing: border-box; min-width: 0; height: 100%; }
.ap-vc-top { display: flex; gap: 12px; align-items: flex-start; }
.ap-vc h3 { margin: 0; flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; font-weight: 400; padding-top: 2px; }
.ap-vc h3 a { color: #0B0B0F !important; }
.ap-vc h3 a:hover { color: var(--p) !important; }
.ap-vc h3 strong { font-weight: 700; }
.ap-vc h3 span { color: var(--mut); }
.ap-save { width: 36px; height: 36px; margin: -4px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--mut); display: grid; place-items: center; flex: none; }
.ap-save:hover { background: var(--chip); }
.ap-save[aria-pressed="true"] { color: var(--p); }
.ap-save[aria-pressed="true"] svg { fill: currentColor; }
.ap-vc-d { margin: 0; font-size: 14px; line-height: 1.45; color: var(--txt2); }
.ap-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-tag { height: 24px; padding: 0 9px; border-radius: 999px; background: var(--chip); color: var(--txt2); font-size: 12px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.ap-tag-x { background: #0B0B0F; color: #FFFFFF; }
.ap-vc-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.ap-vplay { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--p-t); color: var(--p); display: grid; place-items: center; flex: none; }
.ap-vplay:hover { background: var(--p-t2); }
.ap-vplay::before { content: ''; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.ap-vplay[aria-pressed="true"]::before { width: 9px; height: 11px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.ap-vprog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ap-vprog span { font-size: 12px; font-weight: 600; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-vprog i { height: 3px; border-radius: 2px; background: var(--line2); overflow: hidden; display: block; }
.ap-vprog i b { display: block; height: 100%; width: 0; background: var(--p); }
.ap-use { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--p); color: #FFFFFF !important; font-size: 13px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; flex: none; }
.ap-use:hover { background: var(--p-h); }
.ap-notify { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--p); background: #FFFFFF; color: var(--p); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ap-notify:hover { background: var(--p-t); }
/* collections */
.ap-colls { grid-auto-columns: min(520px, 86vw); }
.ap-coll { position: relative; display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; height: 228px; padding: 8px; border: 1px solid var(--line2); border-radius: 18px; background: linear-gradient(135deg, var(--tint), #FFFFFF 75%); text-align: left; color: #0B0B0F; overflow: hidden; }
.ap-coll picture, .ap-coll img { display: block; width: 210px; height: 210px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.ap-coll-t { padding-top: 12px; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.ap-coll-s { position: absolute; left: 234px; top: 84px; font-size: 13px; color: var(--mut); }
.ap-coll-go { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--p); color: #FFFFFF; display: grid; place-items: center; font-size: 16px; }
.ap-coll:hover { border-color: var(--p); }
@media (max-width: 759px) {
  .ap-rail { grid-auto-columns: 280px; }
  .ap-rail.ap-colls { grid-auto-columns: 150px; }
  .ap-coll { grid-template-columns: 1fr; height: auto; padding: 0; gap: 0; border-radius: 16px; }
  .ap-coll picture, .ap-coll img { width: 100%; height: auto; border-radius: 15px 15px 0 0; }
  .ap-coll-t { font-size: 15px; padding: 10px 12px 14px; }
  .ap-coll-s { position: static; padding: 0 12px 12px; margin-top: -10px; font-size: 12px; }
  .ap-coll-go { width: 28px; height: 28px; right: 8px; bottom: auto; top: 112px; font-size: 13px; }
}
.ap-meet { margin-top: 40px; padding: 24px; border-radius: 18px; background: #F4F0FF; }
.ap-meet > p { margin: 0 0 16px; color: var(--txt2); max-width: 60ch; font-size: 14px; }
.ap-meet-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ap-meet-g > div { background: #FFFFFF; border-radius: 14px; padding: 16px; }
.ap-meet-g h3 { margin: 0 0 6px; font-size: 15px; }
.ap-meet-g p { margin: 0; font-size: 13px; color: var(--mut); }
.ap-active { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-active button { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--p-t); color: var(--p); font-size: 13px; font-weight: 700; }
.ap-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); }
/* the all-voices list */
.ap-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ap-vrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line2); }
.ap-vrow:first-child { border-top: 0; }
.ap-vrow h3 { margin: 0; font-size: 14px; font-weight: 400; }
.ap-vrow h3 strong { font-weight: 700; } .ap-vrow h3 span { color: var(--mut); }
.ap-vrow p { margin: 2px 0 0; font-size: 13px; color: var(--txt2); }
.ap-vrow-act { display: flex; align-items: center; gap: 8px; }
.ap-vrow .ap-vplay { width: 34px; height: 34px; }
@media (max-width: 899px) { .ap-vrow { grid-template-columns: minmax(0, 1fr); } }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* ---- Studio ---- */
.ap-studio { display: flex; flex-direction: column; gap: 36px; }
.ap-row { display: flex; flex-direction: column; gap: 12px; }
.ap-lab { font-size: 13px; font-weight: 600; color: var(--mut); }
.ap-col { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ap-right { display: flex; justify-content: flex-end; }
.ap-pill { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 700; }
.ap-pill:hover { border-color: var(--p); color: var(--p); }
.ap-picker { position: relative; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 8px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.ap-picker:hover, .ap-picker:focus-within { border-color: var(--ink); }
.ap-picker-btn { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px; border: 0; background: transparent; text-align: left; padding: 0; color: var(--ink); height: 100%; align-items: center; }
.ap-picker-btn b { font-size: 17px; }
.ap-picker-btn span { flex: 1; min-width: 0; font-size: 14px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-picker-list { position: absolute; left: 0; right: 0; top: 58px; z-index: 10; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.10); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ap-opt { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
.ap-opt:hover, .ap-opt[aria-selected="true"] { background: var(--soft); }
.ap-opt .ap-play-s { width: 32px; height: 32px; background: var(--soft); color: var(--ink); }
.ap-opt .ap-play-s:hover { background: var(--p); color: #FFFFFF; }
.ap-opt b { font-size: 15px; width: 96px; flex: none; }
.ap-opt-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-opt-tags span { font-size: 13px; font-weight: 600; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; }
.ap-opt-tags .g { background: var(--p-t); color: var(--p); border-color: transparent; }
.ap-opt[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.ap-picker-foot { padding: 10px 12px 8px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 13px; color: var(--mut); }
.ap-script { border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; display: flex; flex-direction: column; }
.ap-script:hover, .ap-script:focus-within { border-color: var(--ink); }
.ap-script textarea { display: block; width: 100%; box-sizing: border-box; min-height: 280px; resize: vertical; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 19px; line-height: 1.6; padding: 22px 24px 12px; font-weight: 500; }
.ap-script textarea::placeholder { color: #8A8A8A; }
.ap-script-foot { display: flex; align-items: center; gap: 14px; padding: 10px 12px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ap-dash { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 600; }
.ap-dash:hover { border-color: var(--p); color: var(--p); }
.ap-dash > span:first-child { font-size: 22px; line-height: 0; position: relative; top: -1px; }
.ap-dash kbd { font-family: inherit; font-size: 12px; color: var(--mut); font-weight: 500; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 18px; }
.ap-count { margin-left: auto; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.ap-count.over { color: var(--red); font-weight: 700; }
.ap-gen-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-gen-row .ap-hint { font-size: 14px; max-width: 34ch; line-height: 1.45; }
.ap-gen { height: 52px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--ink); color: #FFFFFF; font-size: 16px; font-weight: 700; }
.ap-gen:hover { background: #000000; }
.ap-gen:disabled { background: #BDBDBD; cursor: default; }
.ap-gen-s { height: 48px; font-size: 15px; padding: 0 22px; }
.ap-gen-xs { height: 36px; font-size: 14px; padding: 0 14px; border-radius: 8px; }
.ap-btn2 { height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 600; }
.ap-btn2:hover { border-color: var(--ink); }
.ap-btn2[aria-pressed="true"] { border-color: var(--p); color: var(--p); background: var(--p-t); }
@keyframes ap-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.ap-ghosts { display: flex; flex-direction: column; gap: 10px; }
.ap-ghost { height: 72px; border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; gap: 18px; padding: 0 18px; animation: ap-pulse 1.4s ease-in-out infinite; }
.ap-ghost + .ap-ghost { animation-delay: .2s; }
.ap-ghost b { width: 52px; color: var(--mut); font-size: 13px; }
.ap-ghost i { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); }
.ap-ghost span { flex: 1; height: 36px; background: var(--soft); border-radius: 6px; }
.ap-stack { border-top: 1px solid var(--line); }
.ap-stack-h { display: flex; align-items: baseline; gap: 14px; padding: 18px 0 14px; flex-wrap: wrap; }
.ap-stack-h h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ap-stack-h span { font-size: 14px; color: var(--mut); }
.ap-kept { margin-left: auto; font-variant-numeric: tabular-nums; }
.ap-take { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 8px 12px 0; border-top: 1px solid var(--line); border-radius: 6px; }
.ap-take.kept { background: var(--soft); }
.ap-take.flagged { opacity: .55; }
.ap-take-n { padding-left: 8px; width: 120px; min-width: 0; font-size: 13px; font-weight: 700; }
.ap-take-n input { font: inherit; font-weight: 700; color: var(--ink); border: 0; border-bottom: 2px solid transparent; outline: none; background: transparent; padding: 0 0 1px; width: 100%; }
.ap-take-n input:hover, .ap-take-n input:focus { border-bottom-color: var(--p); }
.ap-wave { position: relative; height: 56px; display: flex; align-items: center; gap: 1px; cursor: pointer; min-width: 200px; flex: 1 1 200px; }
.ap-wave i { flex: 1; min-width: 1px; border-radius: 1px; background: var(--ink); }
.ap-wave i.on { background: var(--p); }
.ap-take.kept .ap-wave i { background: #B9A3F5; } .ap-take.kept .ap-wave i.on { background: var(--p); }
.ap-dur { font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; text-align: right; width: 40px; }
.ap-acts-r { display: flex; gap: 8px; margin-left: auto; }
.ap-ic { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #FFFFFF; color: var(--mut); display: grid; place-items: center; }
.ap-ic:hover { border-color: var(--ink); color: var(--ink); }
.ap-ic[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: #FFFFFF; }
.ap-ic[aria-pressed="true"] svg { fill: currentColor; }
.ap-ic.flag:hover { border-color: var(--red); color: var(--red); }
.ap-ic.flag[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.ap-ic:disabled { opacity: .4; cursor: default; }
.ap-stack-foot { display: flex; align-items: center; gap: 12px; padding: 18px 0 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ap-gen-s:disabled { background: var(--soft); color: var(--mut); }
.ap-flags { margin-left: auto; font-size: 13px; color: var(--red); font-weight: 600; }
.ap-lib-row { padding-top: 24px; border-top: 1px solid var(--line); }
.ap-lib-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ap-lib-bar .ap-search { min-width: 220px; }
.ap-liked { height: 48px; }
.ap-clip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); border-radius: 6px; }
.ap-clip:hover { background: var(--soft); }
.ap-clip-t { min-width: 160px; flex: 2 1 160px; display: flex; flex-direction: column; gap: 2px; }
.ap-clip-t input { font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); border: 0; border-bottom: 2px solid transparent; outline: none; background: transparent; padding: 0 0 1px; }
.ap-clip-t input:focus { border-bottom-color: var(--p); }
.ap-clip-t small { font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-clip .ap-wave { height: 32px; min-width: 120px; flex: 1 1 120px; max-width: 240px; gap: 1.5px; }
.ap-clip .ap-ic { border: 0; background: transparent; }
.ap-clip .ap-ic:hover { background: var(--line); }
.ap-clip .ap-ic.liked { color: var(--p); } .ap-clip .ap-ic.liked svg { fill: currentColor; }
.ap-more { position: relative; }
.ap-more-m { position: absolute; right: 0; top: 40px; z-index: 10; width: 180px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.10); padding: 6px; display: flex; flex-direction: column; }
.ap-more-m button { text-align: left; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; }
.ap-more-m button:hover { background: var(--soft); }
.ap-more-m .del { color: var(--red); }

/* ---- Story Time ---- */
.ap-story-intro { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.ap-story-intro p { margin: 0; font-size: 20px; font-weight: 500; max-width: 52ch; flex: 1 1 320px; }
.ap-story-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.ap-scard { background: var(--soft); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 200px; box-sizing: border-box; cursor: pointer; border: 1px solid transparent; text-align: left; color: var(--ink); }
.ap-scard:hover { border-color: var(--ink); }
.ap-scard b { font-size: 20px; letter-spacing: -0.01em; line-height: 1.25; }
.ap-scard small { font-size: 13px; color: var(--mut); }
.ap-scard p { margin: 0; font-size: 15px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ap-scard .ap-hint { margin-top: auto; }
.ap-story-empty { width: 100%; border: 1px dashed var(--line); border-radius: 16px; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: #FFFFFF; color: var(--ink); }
.ap-story-empty:hover { border-color: var(--p); }
.ap-story-empty b { font-size: 26px; }
.ap-story-empty span { font-size: 15px; color: var(--mut); max-width: 40ch; }
.ap-story-ed { display: flex; flex-direction: column; min-height: calc(100vh - 1px); }
.ap-story-bar { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ap-back { border: 0; background: transparent; color: var(--mut); font-size: 14px; font-weight: 600; padding: 0; }
.ap-back:hover { color: var(--ink); }
.ap-story-title { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.ap-story-title input { font: inherit; font-size: 15px; font-weight: 700; border: 0; border-bottom: 2px solid transparent; outline: none; background: transparent; color: var(--ink); text-align: center; width: min(280px, 60vw); }
.ap-story-title input:focus, .ap-story-title input:hover { border-bottom-color: var(--p); }
.ap-told { font-size: 13px; color: var(--mut); }
.ap-told select { font: inherit; font-weight: 700; color: var(--ink); border: 0; background: transparent; }
.ap-story-body { flex: 1; display: flex; min-height: 0; align-items: stretch; }
.ap-lines { flex: 1 1 0; min-width: 0; padding: 40px clamp(16px, 3vw, 56px); }
.ap-lines > div, .ap-line-new { max-width: 720px; margin: 0 auto; }
/* a line (CJ 2026-10-29): speaker chip | selection bar | text (+ the "changed" prompt) | play + length, small */
.ap-line { display: grid; grid-template-columns: 96px 3px minmax(0, 1fr) auto; gap: 0 12px; margin-bottom: 6px; }
.ap-gut { display: flex; justify-content: flex-start; padding-top: 7px; min-width: 0; }
.ap-gut-n { font-size: 11px; font-weight: 700; color: #8A8A8A; padding-top: 14px; justify-content: flex-end; }
.ap-spk { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 7px 0 3px; border-radius: 999px; background: var(--sb); color: var(--sf); font-size: 12px; font-weight: 700; cursor: pointer; box-sizing: border-box; }
.ap-spk b { width: 20px; height: 20px; border-radius: 50%; background: var(--sf); color: #FFFFFF; display: grid; place-items: center; font-size: 11px; flex: none; }
.ap-spk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-spk svg { flex: none; }
.ap-spk:hover, .ap-spk:focus-within { box-shadow: inset 0 0 0 1.5px currentColor; }
.ap-spk select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; } /* the phone's own picker; 16px = no iOS zoom */
.ap-spk:has(select:disabled) { opacity: .6; cursor: default; }
.ap-lmain { min-width: 0; }
.ap-lend { display: flex; align-items: center; gap: 6px; padding-top: 7px; min-height: 26px; }
.ap-lplay { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); display: grid; place-items: center; padding: 0; }
.ap-lplay::before { content: ''; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-left: 2px; }
.ap-lplay:hover { border-color: var(--p); color: var(--p); }
.ap-ldur { font-size: 11px; font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums; min-width: 26px; }
.ap-ldone { color: #1F8A4C; display: inline-grid; place-items: center; }
.ap-lgen { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--p-t2); background: #FFFFFF; color: var(--p); font-size: 12px; font-weight: 700; }
.ap-lgen:hover { border-color: var(--p); }
.ap-lgen:disabled { opacity: .5; }
.ap-lspin { display: grid; place-items: center; width: 24px; height: 24px; }
.ap-lwait { font-size: 11px; font-weight: 700; color: #9A96A6; }
.ap-spin { width: 14px; height: 14px; border: 2px solid var(--p-t2); border-top-color: var(--p); border-radius: 50%; box-sizing: border-box; display: inline-block; flex: none; animation: ap-spin .8s linear infinite; }
@keyframes ap-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .ap-spin { animation-duration: 2.4s; } }
.ap-line.making textarea { color: var(--mut); }
.ap-chg { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 6px; padding: 8px 10px; border-radius: 10px; background: #FFF8EE; color: #7A4300; font-size: 13px; font-weight: 600; }
.ap-chg-b { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chg button { white-space: nowrap; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid #F2D3A8; background: #FFFFFF; color: #7A4300; }
.ap-chg .ap-chg-gen { background: var(--p); border-color: var(--p); color: #FFFFFF; }
.ap-chg .ap-chg-gen:disabled { opacity: .5; }
.ap-gen-all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ap-gen-all:disabled { opacity: 1; background: var(--p-t); color: var(--p); }
.ap-gen-all .ap-spin, .ap-more2 .ap-spin { border-color: var(--p-t2); border-top-color: var(--p); }
.ap-more2:disabled { color: var(--mut); }
/* Play all */
.ap-playall { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--p); color: #FFFFFF; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ap-playall:hover { background: var(--p-h); }
.ap-playall i { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.ap-playall[aria-pressed="true"] i { width: 9px; height: 12px; border: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); }
.ap-playall small { font-size: 13px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.ap-tr-chg { font-size: 13px; font-weight: 700; color: #8A4B00; justify-self: end; }
.ap-line > i { border-radius: 2px; background: transparent; }
.ap-line.sel > i { background: var(--p); }
.ap-line textarea { display: block; width: 100%; box-sizing: border-box; resize: none; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 19px; line-height: 1.55; font-weight: 500; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; overflow: hidden; field-sizing: content; }
.ap-line.sel textarea { background: var(--p-t); }
.ap-line.todo textarea { color: var(--mut); }
.ap-line.flagged textarea { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ap-line-new textarea { display: block; width: 100%; box-sizing: border-box; min-height: 64px; resize: none; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 19px; line-height: 1.55; font-weight: 500; padding: 6px 0; field-sizing: content; }
.ap-paste-row { display: flex; align-items: center; gap: 12px; }
.ap-takes-panel { flex: 0 0 clamp(300px, 28%, 340px); border-left: 1px solid var(--line); padding: 20px 20px 40px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.ap-takes-panel [data-panel-body] { display: flex; flex-direction: column; gap: 14px; }
.ap-p-line small { font-size: 12px; font-weight: 700; color: #8A8A8A; }
.ap-p-line p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ap-p-gen { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 12px; background: var(--p); color: #FFFFFF; font-size: 15px; font-weight: 700; }
.ap-p-gen:hover { background: var(--p-h); }
.ap-p-h { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.ap-p-h b { font-size: 16px; } .ap-p-h span { font-size: 13px; color: var(--mut); }
.ap-tk { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ap-tk.kept { background: var(--soft); border-color: var(--soft); }
.ap-tk-row { display: flex; align-items: center; gap: 10px; }
.ap-tk .ap-play-s { width: 36px; height: 36px; }
.ap-tk .ap-wave { height: 36px; min-width: 0; flex: 1; }
.ap-tk-act { display: flex; align-items: center; gap: 6px; }
.ap-tk-act b { font-size: 12px; color: var(--mut); margin-right: auto; }
.ap-keep { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ap-keep.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ap-tk .ap-ic { width: 30px; height: 30px; }
.ap-more2 { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 700; }
.ap-more2:hover { border-color: var(--ink); }
.ap-transport { position: sticky; bottom: 0; background: #FFFFFF; border-top: 1px solid var(--line); }
.ap-tr-row { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 16px; min-height: 60px; padding: 0 24px; }
.ap-tr-time { font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-tr-time b { color: var(--ink); }
.ap-tr-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.ap-export { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--p); color: #FFFFFF; font-size: 14px; font-weight: 700; }
.ap-export:hover { background: var(--p-h); }
.ap-export:disabled { background: var(--soft); color: var(--mut); cursor: default; }
.ap-segs { position: relative; height: 64px; margin: 0 24px 14px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ap-seg { position: relative; min-width: 56px; height: 100%; border-radius: 8px; border: 1px solid var(--line); background: #FFFFFF; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px 4px; text-align: left; color: var(--ink); }
.ap-seg.kept { background: var(--p-t); border-color: transparent; }
.ap-seg.sel { border-color: var(--ink); }
.ap-seg.todo { border-style: dashed; color: var(--mut); }
.ap-seg.now { box-shadow: inset 0 -3px 0 var(--p); }
.ap-seg span { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-seg .ap-wave { flex: none; height: 22px; min-width: 0; align-items: flex-end; gap: 1px; }
.ap-seg .ap-wave i { background: #8C7BC9; }
@media (max-width: 899px) {
  .ap-story-body { flex-direction: column; }
  .ap-takes-panel { flex: none; border-left: 0; border-top: 1px solid var(--line); padding: 16px; }
  .ap-lines { padding: 20px 16px; }
  .ap-line { grid-template-columns: 92px 3px minmax(0, 1fr) auto; gap: 0 8px; }
  .ap-gen-all { order: 9; flex-basis: 100%; justify-content: center; margin: 0 0 4px; }
  .ap-spk { font-size: 11px; gap: 4px; }
  .ap-chg { font-size: 12px; }
  .ap-line textarea, .ap-line-new textarea { font-size: 17px; }
  .ap-story-bar { padding: 8px 16px; }
  .ap-tr-row { grid-template-columns: auto auto 1fr; padding: 0 16px; }
  .ap-tr-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px; }
  .ap-tr-row .ap-tr-right { margin-left: auto; }
  .ap-tr-chg { order: 9; flex-basis: 100%; font-size: 12px; }
  .ap-tr-chg:empty { display: none; }
  .ap-tr-right .ap-hint { display: none; }
  .ap-segs { margin: 0 16px 12px; height: 52px; }
}

/* ---- History + Account (not designed by CD) ---- */
.ap-hrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line2); }
.ap-hrow:first-child { border-top: 0; }
.ap-hrow b { font-size: 14px; } .ap-hrow small { display: block; font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-hrow .ap-r { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--txt2); white-space: nowrap; }
.ap-hrow .ap-r.flag { background: #FDECEA; color: var(--red); }
.ap-hrow .ap-play { width: 36px; height: 36px; }
.ap-hrow .ap-play:disabled { background: var(--chip); color: var(--mut); cursor: default; }
.ap-dl { margin: 0 0 24px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ap-dl > div { display: flex; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--line2); }
.ap-dl > div:first-child { border-top: 0; }
.ap-dl dt { width: 140px; flex: none; color: var(--mut); font-weight: 600; font-size: 14px; }
.ap-dl dd { margin: 0; overflow-wrap: anywhere; }
.ap-acct .ap-card h2 { margin: 0 0 8px; font-size: 20px; }
/* Account (CD's "BAG - Billing" design, AccountBilling): tabs, Billing, My data; Studio's packs bottom sheet */
.ap-acct { max-width: 980px; }
.ap-atabs { display: flex; gap: 4px; border-bottom: 1px solid #E6E3EE; overflow-x: auto; scrollbar-width: none; margin: 14px 0 28px; }
.ap-atabs button { height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: #6E6E6E; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ap-atabs button[aria-selected="true"] { color: #0B0B0F; font-weight: 700; border-bottom-color: #6E24FD; }
.ap-atabs button[hidden] { display: none; }
.ap-apanel { display: flex; flex-direction: column; gap: 32px; }
.ap-apanel[hidden] { display: none; }
.ap-apanel h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ap-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: -8px 0 24px; border-radius: 14px; background: #E9F7F1; border: 1px solid #BFE6D4; color: #0E5A43; }
.ap-banner[hidden] { display: none; }
.ap-banner b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.ap-banner-i { width: 28px; height: 28px; border-radius: 50%; background: #13806A; color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ap-banner button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #0E5A43; display: grid; place-items: center; flex: none; cursor: pointer; }
.ap-banner button:hover { background: #D5EFE3; }
.ap-prof { display: flex; flex-direction: column; gap: 16px; max-width: 560px; border-radius: 20px; }
.ap-prof > div, .ap-use-n > div { display: flex; flex-direction: column; gap: 2px; }
.ap-prof span, .ap-cap, .ap-use-n span { font-size: 12px; font-weight: 700; color: #6E6E6E; letter-spacing: 0.04em; text-transform: uppercase; }
.ap-prof b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ap-bal { border: 1px solid #E6E3EE; border-radius: 20px; padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 32px; align-items: center; }
.ap-bal-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-cap { font-size: 13px; }
.ap-big { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ap-big small { font-size: 0.42em; font-weight: 600; color: #6E6E6E; letter-spacing: -0.01em; }
.ap-balgen { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #4A4458; position: relative; }
.ap-q { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #D9D5E2; background: #FFFFFF; color: #6E6E6E; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0; cursor: pointer; }
.ap-tip { position: absolute; left: 0; top: 28px; z-index: 10; width: min(300px, 80vw); background: #0B0B0F; color: #FFFFFF; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; box-shadow: 0 12px 30px rgba(11, 11, 15, 0.2); }
.ap-tip[hidden] { display: none; }
.ap-never { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #13806A; font-weight: 600; padding-top: 2px; }
.ap-free { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: #FAF9FC; min-width: 0; }
.ap-free.out { background: #FFF4F4; }
.ap-free-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.ap-free-h b { font-size: 15px; }
.ap-free-h span { font-size: 13px; color: #6E6E6E; }
.ap-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ap-dots i { height: 8px; border-radius: 999px; background: #E6E3EE; }
.ap-dots i.on { background: #6E24FD; }
.ap-free-n { font-size: 13px; color: #5E5A6B; }
.ap-perk { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 999px; background: #F1EAFF; color: #5A16E0; font-size: 12.5px; font-weight: 700; }
.ap-perk[hidden] { display: none; }
.ap-outall { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin-top: -12px; border-radius: 16px; background: #F4EFFF; border: 1px solid #E2D6FF; }
.ap-outall[hidden] { display: none; }
.ap-outall-i { width: 36px; height: 36px; border-radius: 12px; background: #6E24FD; color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ap-outall div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-outall b { font-size: 16px; }
.ap-outall span { font-size: 14px; color: #4A4458; }
.ap-buy, .ap-bill > section[aria-labelledby] { display: flex; flex-direction: column; gap: 14px; }
.ap-bill > section[hidden] { display: none; }
.ap-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ap-sec-h > span { font-size: 13px; color: #6E6E6E; }
.ap-sec-h a { font-size: 14px; font-weight: 600; }
.ap-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ap-packc { position: relative; border: 1px solid #E6E3EE; border-radius: 20px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; }
.ap-packc.best { border: 2px solid #6E24FD; box-shadow: 0 10px 30px rgba(110, 36, 253, 0.12); }
.ap-pack-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.ap-pack-h b { font-size: 15px; }
.ap-best { height: 24px; padding: 0 10px; border-radius: 999px; background: #6E24FD; color: #FFFFFF; font-size: 12px; font-weight: 700; font-style: normal; display: inline-flex; align-items: center; white-space: nowrap; flex: none; }
.ap-price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ap-pack-c { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: #6E6E6E; font-variant-numeric: tabular-nums; }
.ap-pack-c b { font-size: 17px; color: #0B0B0F; }
.ap-split { color: #5A16E0; font-weight: 600; }
.ap-nobonus { color: #8A8596; }
.ap-pack { margin-top: auto; height: 46px; border-radius: 999px; border: 0; background: #0B0B0F; color: #FFFFFF; font-size: 15px; font-weight: 700; cursor: pointer; }
.ap-packc.best .ap-pack { background: #6E24FD; }
.ap-pack:hover { filter: brightness(0.96); }
.ap-pack:disabled { opacity: .6; cursor: default; }
.ap-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #6E6E6E; text-align: center; }
.ap-trust i { font-style: normal; color: #C9C4D6; }
.ap-trust span { display: inline-flex; align-items: center; gap: 5px; }
.ap-ptab { border: 1px solid #E6E3EE; border-radius: 16px; overflow: hidden; }
.ap-prow { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.8fr 0.8fr; gap: 12px; padding: 14px 18px; border-top: 1px solid #ECE9F2; font-size: 15px; align-items: center; }
.ap-phead > span:nth-child(n+3), .ap-pcred, .ap-pamt, .ap-prec { text-align: right; font-variant-numeric: tabular-nums; }
.ap-prow.fresh { background: #F4FBF8; }
.ap-phead { border-top: 0; padding: 12px 18px; background: #FAF9FC; font-size: 12px; font-weight: 700; color: #6E6E6E; letter-spacing: 0.04em; text-transform: uppercase; }
.ap-pdate { color: #4A4458; }
.ap-ppack { font-weight: 600; }
.ap-ppack em { font-style: normal; font-size: 12px; font-weight: 700; color: #8A3B0C; background: #FFE6D4; border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.ap-pcred small, .ap-pmob { display: none; }
.ap-pmob em { font-style: normal; font-size: 12px; font-weight: 700; color: #8A3B0C; background: #FFE6D4; border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.ap-prec a { font-weight: 600; }
.ap-pempty { border: 1px dashed #E0DCE8; border-radius: 16px; padding: 28px 20px; text-align: center; font-size: 15px; color: #6E6E6E; }
.ap-usage { border: 1px solid #E6E3EE; border-radius: 16px; padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: end; }
.ap-use-n { display: flex; gap: 28px; }
.ap-use-n b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ap-use-n small { font-size: 12px; color: #8A8596; }
.ap-bars-w { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-bars { height: 84px; display: flex; align-items: flex-end; gap: 3px; }
.ap-bars i { flex: 1; min-width: 0; min-height: 2px; border-radius: 3px 3px 1px 1px; background: #C9B2FF; }
.ap-bars i.today { background: #6E24FD; }
.ap-bars-x { display: flex; justify-content: space-between; font-size: 11px; color: #8A8596; }
.ap-billfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 18px; border-radius: 14px; background: #FAF9FC; font-size: 14px; color: #4A4458; }
.ap-billfoot i { font-style: normal; color: #C9C4D6; }
.ap-billfoot a { font-weight: 600; }
.ap-mydata { gap: 12px; max-width: 640px; }
.ap-drow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; }
.ap-drow > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.ap-drow b { font-size: 16px; }
.ap-drow > div > span { font-size: 14px; color: #6E6E6E; }
.ap-drow .ap-btn2 { height: 40px; font-size: 14px; }
.ap-drow-danger { border-color: #F2C9C9; }
.ap-drow-danger b { color: #B42323; }
.ap-switch { position: relative; width: 46px; height: 28px; flex: none; border: 0; border-radius: 999px; background: #D9D5E2; cursor: pointer; padding: 0; }
.ap-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left .15s; }
.ap-switch[aria-checked="true"] { background: #6E24FD; }
.ap-switch[aria-checked="true"] i { left: 21px; }
.ap-switch:disabled { opacity: .6; }
.ap-train-note { display: block; margin-top: 4px; font-size: 12.5px; color: #8A8596; }
.ap-btn-danger { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: #B42323; color: #FFFFFF; font-size: 14px; font-weight: 700; cursor: pointer; }
.ap-meter { margin: 6px 0 0; font-size: 13px; color: var(--mut); }
.ap-meter b { color: var(--ink); }
.ap-meter-story { margin: 0 0 8px; }
.ap-sheet-bg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(11, 11, 15, 0.42); }
.ap-sheet-bg[hidden] { display: none; }
.ap-sheet { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; margin-bottom: 32px; padding: 24px 28px; border-radius: 24px; background: #FFFFFF; color: #0B0B0F; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 -10px 50px rgba(11, 11, 15, 0.2); }
.ap-grab { width: 40px; height: 4px; border-radius: 999px; background: #D9D5E2; align-self: center; margin-top: -6px; }
.ap-sheet h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ap-sheet p { margin: 0; font-size: 15px; color: #4A4458; }
.ap-radios { display: flex; flex-direction: column; gap: 8px; }
.ap-radio { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid #E6E3EE; background: #FFFFFF; text-align: left; color: #0B0B0F; cursor: pointer; font: inherit; }
.ap-radio[aria-checked="true"] { border: 2px solid #6E24FD; padding: 13px 15px; background: #FAF7FF; }
.ap-radio > i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9C4D6; flex: none; box-sizing: border-box; display: grid; place-items: center; }
.ap-radio[aria-checked="true"] > i { border-color: #6E24FD; }
.ap-radio[aria-checked="true"] > i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #6E24FD; }
.ap-radio > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-radio b { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ap-radio .ap-best { height: 20px; padding: 0 8px; font-size: 11px; }
.ap-radio small { font-size: 13px; color: #6E6E6E; font-variant-numeric: tabular-nums; }
.ap-radio strong { font-size: 18px; flex: none; }
.ap-sheet-buy { height: 50px; border-radius: 999px; border: 0; background: #6E24FD; color: #FFFFFF; font-size: 16px; font-weight: 700; cursor: pointer; }
.ap-sheet-buy:hover { background: #5A16E0; }
.ap-sheet-buy:disabled { opacity: .6; }
.ap-sheet-wait { height: 40px; border-radius: 999px; border: 0; background: transparent; color: #4A4458; font-size: 15px; font-weight: 600; cursor: pointer; }
.ap-sheet-wait:hover { color: #0B0B0F; }
.ap-sheet .ap-trust { font-size: 12.5px; color: #8A8596; gap: 4px 12px; }
@media (max-width: 760px) {
  .ap-atabs { margin: 10px 0 20px; }
  .ap-apanel { gap: 24px; }
  .ap-bal { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .ap-big { font-size: 38px; }
  .ap-free { padding: 14px; }
  .ap-packs, .ap-usage { grid-template-columns: minmax(0, 1fr); }
  .ap-phead { display: none; }
  .ap-prow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
  .ap-prow > span { display: none; }
  .ap-prow > .ap-pmob { display: flex; flex: 1; min-width: 0; flex-direction: column; text-align: left !important; }
  .ap-pmob b { font-size: 15px; font-weight: 600; }
  .ap-pmob small { font-size: 13px; color: #6E6E6E; }
  .ap-prow > .ap-prec { display: block; flex: none; font-size: 14px; }
  .ap-sheet { max-width: none; margin: 0; border-radius: 24px 24px 0 0; padding: 20px 18px 22px; max-height: 92vh; }
}
.ap-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.ap-danger { color: var(--red); border-color: #F2C4BF; }
.ap-danger:hover { border-color: var(--red); }
@media (max-width: 759px) { .ap-dl dt { width: 110px; } .ap-hrow { grid-template-columns: 36px minmax(0, 1fr) auto; } .ap-hrow .ap-r { display: none; } }
.ap-hline { display: block; margin-top: 3px; font-size: 13px; color: var(--ink); quotes: '\201C' '\201D'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-coll-soon { position: absolute; top: 14px; left: 14px; z-index: 1; }
.ap-clips-card { margin: 16px 0; } .ap-clips-card p { margin: 0 0 14px; color: var(--txt2); }
.ap-more-m.up { top: auto; bottom: 40px; }

/* ---- Voices: CD's VoiceRow + Top Voices grid (design "BAG - Voices", 2026-10-27) ---- */
.ap-sec { display: flex; flex-direction: column; gap: 12px; margin: 30px 0 0; }
.ap-sec-h { align-self: flex-start; display: flex; align-items: center; gap: 4px; color: #0B0B0F !important; }
.ap-sec-h:hover { color: #6E24FD !important; }
.ap-sec-h .ap-h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.ap-voices .ap-sec .ap-h2 { margin: 0; }
/* Top Voices: compact grid, 3 / 2 / 1 columns */
.ap-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; margin: 0 -8px; }
@media (max-width: 1099px) { .ap-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .ap-minis { grid-template-columns: minmax(0, 1fr); } }
.ap-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; border-radius: 16px; cursor: pointer; transition: background 140ms ease; }
.ap-mini:hover { background: #F7F3FF; }
.ap-mini.on { background: #FBF9FF; }
.ap-mini-tile { position: relative; width: 64px; height: 64px; padding: 0; border-radius: 16px; border: 0; background: #F3F1F8; color: #6E24FD; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.ap-mini.on .ap-mini-tile { background: #E9DEFF; }
.ap-mini-dot { width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(11, 11, 15, 0.14); display: grid; place-items: center; }
.ap-mini-tile i { position: absolute; left: 0; bottom: 0; height: 3px; background: #6E24FD; }
.ap-mini-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-mini-t h3 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mini-t h3 a { color: #0B0B0F; } .ap-mini-t h3 a:hover { color: #6E24FD; }
.ap-mini-e { font-size: 13px; color: #5E5A6B; }
.ap-mini-r { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3A3646; }
/* rows */
.ap-vrows { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px; }
.ap-vr { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 124px 66px minmax(0, 214px) 168px 40px auto; align-items: center; gap: 14px; padding: 10px 12px; min-height: 64px; box-sizing: border-box; border-radius: 14px; background: #FFFFFF; cursor: pointer; transition: background 140ms ease; }
.ap-vr:hover { background: #F7F3FF; }
.ap-vr.on { background: #FBF9FF; }
.ap-vr-play { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: #F1EAFF; color: #6E24FD; display: grid; place-items: center; cursor: pointer; }
.ap-vr-play:hover { background: #E4D6FF; }
.ap-ring { position: absolute; inset: 0; transform: rotate(-90deg); pointer-events: none; }
.ap-ring circle { fill: none; stroke-width: 2.5; stroke: transparent; }
.ap-vr.on .ap-ring-t { stroke: #DCCDFF; }
.ap-vr.on .ap-ring-p { stroke: #6E24FD; stroke-linecap: round; }
.ap-vr-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ap-vr-name { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-vr-name a { color: #0B0B0F; } .ap-vr-name a:hover { color: #6E24FD; }
.ap-vr-name strong { font-weight: 700; } .ap-vr-name span { color: #5E5A6B; }
.ap-vr-desc { margin: 0; font-size: 13px; line-height: 1.4; color: #5E5A6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-vr-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.ap-vr-wave span { width: 3px; flex: none; border-radius: 2px; background: #D9CCFF; }
.ap-vr-wave span.on { background: #6E24FD; }
.ap-vr-wave em { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 600; color: #6E24FD; white-space: nowrap; }
.ap-vr-region { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #0B0B0F; white-space: nowrap; min-width: 0; }
.ap-vr-gender { font-size: 14px; color: #3A3646; white-space: nowrap; }
.ap-vr-best, .ap-vr-tags { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.ap-vr-tag { height: 24px; padding: 0 9px; border-radius: 999px; background: #F3F1F8; color: #3A3646; font-size: 12px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; flex: none; }
.ap-vr-more-n { height: 24px; padding: 0 7px; color: #5E5A6B; font-size: 12px; font-weight: 600; display: flex; align-items: center; flex: none; }
.ap-vr-badge { justify-self: start; height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid #E1DDEA; color: #3A3646; background: #FFFFFF; font-size: 12px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.ap-vr-badge.x { border-color: #D3C2FF; color: #5A16E0; }
.ap-vr-slot { width: 40px; height: 1px; }
.ap-vr-acts { display: flex; align-items: center; gap: 4px; justify-self: end; }
.ap-vr-ic { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #5E5A6B; display: grid; place-items: center; cursor: pointer; }
.ap-vr-ic:hover, .ap-vr-ic[aria-expanded="true"] { background: #EDE6FB; }
.ap-vr-save[aria-pressed="true"] { color: #6E24FD; }
.ap-vr-save[aria-pressed="true"] svg { fill: currentColor; }
.ap-vr-use { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #6E24FD; color: #FFFFFF !important; display: grid; place-items: center; }
.ap-vr-use:hover { background: #5A16E0; }
.ap-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); height: 28px; padding: 0 10px; border-radius: 8px; background: #0B0B0F; color: #FFFFFF; font-size: 12px; font-weight: 600; display: none; align-items: center; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(11, 11, 15, 0.18); z-index: 5; }
.ap-vr-use:hover .ap-tip, .ap-vr-use:focus-visible .ap-tip { display: flex; }
.ap-vr-more { position: relative; }
.ap-vr-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; width: 220px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #E6E3EE; border-radius: 14px; box-shadow: 0 18px 44px rgba(11, 11, 15, 0.16); padding: 6px; display: flex; flex-direction: column; }
.ap-vr-menu[hidden] { display: none; }
.ap-vr-menu > * { height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; display: flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; font-weight: 500; color: #0B0B0F !important; cursor: pointer; text-align: left; }
.ap-vr-menu > *:hover { background: #F3F1F8; }
.ap-vr-menu svg { flex: none; }
/* phones: CD's compact row */
.ap-vr.compact { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 6px 12px 8px; }
.ap-vr.compact .ap-vr-main { gap: 5px; padding-top: 1px; }
.ap-vr.compact .ap-vr-name { white-space: normal; text-wrap: pretty; }
.ap-vr-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3A3646; flex-wrap: wrap; }
.ap-vr-meta .dot { color: #B9B4C6; }
.ap-vr.compact .ap-vr-tags { flex-wrap: wrap; padding-top: 2px; }
.ap-vr.compact .ap-vr-wave { height: 24px; padding-top: 2px; }
.ap-vr.compact .ap-vr-acts { gap: 2px; }
.ap-vr.compact .ap-vr-use, .ap-vr.compact .ap-vr-ic { width: 44px; height: 44px; }
.ap-vr.compact .ap-tip { display: none !important; }
@media (max-width: 759px) { .ap-vrows { margin: 0 -8px; } }
.ap-toast-a { color: #C9B3FF !important; text-decoration: underline; pointer-events: auto; }
.ap-toast:has(.ap-toast-a) { pointer-events: auto; }

/* "Add to Story Time" picker (CJ 2026-10-27) */
.ap-pick { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.ap-pick-bg { position: absolute; inset: 0; background: rgba(11, 11, 15, 0.32); }
.ap-pick-box { position: relative; width: 100%; max-width: 420px; max-height: min(560px, 80vh); display: flex; flex-direction: column; background: #FFFFFF; border-radius: 18px; box-shadow: 0 24px 60px rgba(11, 11, 15, 0.24); padding: 16px; box-sizing: border-box; }
.ap-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
.ap-pick-line { margin: 6px 0 12px; font-size: 13px; color: #5E5A6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-pick-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.ap-pick-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid #ECE9F2; border-radius: 12px; background: #FFFFFF; text-align: left; font: inherit; color: #0B0B0F; cursor: pointer; }
.ap-pick-list button:hover, .ap-pick-list button:focus-visible { background: #F7F3FF; border-color: #D9CCFF; }
.ap-pick-list button span { display: flex; flex-direction: column; min-width: 0; }
.ap-pick-list b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-pick-list small { font-size: 12px; color: #5E5A6B; }
.ap-pick-new { color: #6E24FD !important; border-style: dashed !important; }
.ap-pick-new svg { flex: none; }
.ap-line-v { align-self: center; margin-left: 8px; height: 22px; padding: 0 8px; border-radius: 999px; background: #F3F1F8; color: #3A3646; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 759px) { .ap-pick { place-items: end center; padding: 0; } .ap-pick-box { max-width: none; border-radius: 18px 18px 0 0; } }
.ap-line .ap-line-v { grid-column: 3; justify-self: start; margin: -2px 0 4px 12px; }
.ap-pick { grid-template-columns: minmax(0, 1fr); } .ap-pick-box { min-width: 0; justify-self: center; }

/* the 18+ ask (src/js/app.js): small, dismissible, never in the way of generating */
.ap-agecard { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: min(340px, calc(100vw - 32px)); box-sizing: border-box; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.14); padding: 14px 16px; font-family: 'Inter', system-ui, sans-serif; }
.ap-agecard p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #0B0B0F; }
.ap-agecard-row { display: flex; gap: 8px; }
.ap-agecard-row .ap-btn { flex: 1; min-height: 44px; }
.ap-agecard-note { display: block; margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--mut); }
.ap-agecard-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 759px) { .ap-agecard { left: 16px; right: 16px; width: auto; bottom: 76px; } }
/* "neither" (CJ 2026-10-29): one tap next to the picks */
.ap-neither:disabled { opacity: .6; cursor: default; }
.ap-p-h .ap-neither { margin-left: auto; height: 28px; padding: 0 12px; font-size: 12px; }