:root { --surface-duration: 300ms; --surface-ease: cubic-bezier(.22, .8, .25, 1); --surface-color: #171719; }
.ui-close, .account-dialog-topbar > .ui-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #29292f; color: #e4e4ec; cursor: pointer; }
.ui-close svg, .ui-back svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; stroke-width: 1.8; }
.ui-close:focus-visible, .ui-back:focus-visible { outline: 2px solid #d2d2df; outline-offset: 4px; }
.ui-back { border-radius: 999px; }
.account-dialog, .account-dialog[open] { animation: none; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity 220ms ease, transform var(--surface-duration) var(--surface-ease); will-change: transform, opacity; }
.account-dialog.is-open { opacity: 1; transform: translateY(0) scale(1); }
.account-dialog.is-open.is-closing { opacity: 0; transform: translateY(18px) scale(.985); pointer-events: none; }
.account-dialog.is-dragging { transition: none; }
.account-dialog::backdrop { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); transition: background-color var(--surface-duration) ease, backdrop-filter var(--surface-duration) ease; }
.account-dialog.is-open::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); }
.account-dialog.is-closing::backdrop { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); }
.account-identity > button { min-height: 40px; padding: 9px 18px; gap: 12px; }
.account-identity > button svg { flex-shrink: 0; }
.auth-consent { display: flex; align-items: flex-start; gap: 11px; margin: -4px 0 22px; padding: 14px; border-radius: 13px; background: #222227; }
.auth-consent input { flex: 0 0 19px; width: 19px; height: 19px; margin: 2px 0 0; accent-color: #ededf3; cursor: pointer; }
.auth-consent > div { min-width: 0; }
.auth-consent label { display: block; color: #d4d4df; font-size: 11px; line-height: 1.9; cursor: pointer; }
.auth-consent button { min-height: 28px; margin-top: 4px; padding: 2px 0; border: 0; background: none; color: #a7a7ba; font: 11px Vazirmatn, Tahoma, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.auth-terms { padding: 16px; margin: -9px 0 22px; border-radius: 12px; background: #222227; font-size: 11px; line-height: 2; color: #a5a5b5; }
.auth-terms b { display: block; color: #e0e0e9; font-weight: 600; }
.auth-terms p { margin: 8px 0 0; }
.google-login:disabled, [data-requires-consent]:disabled { opacity: .38; cursor: not-allowed; }
.account-primary:disabled { cursor: not-allowed; }
.episode-scrim { background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); transition: opacity var(--surface-duration) ease; }
.episode-scrim.is-open { transition: opacity var(--surface-duration) ease; }
.episode-scrim.is-closing { opacity: 0; pointer-events: auto; }
.episode-sheet { top: 50%; right: auto; bottom: auto; left: 50%; width: min(520px, calc(100% - 48px)); max-height: min(80dvh, 720px); padding: 26px 28px 28px; border: 0; border-radius: 25px; background: var(--surface-color); box-shadow: 0 24px 100px #0008; opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% + 18px)) scale(.985); transition: transform var(--surface-duration) var(--surface-ease), opacity 220ms ease; }
.episode-sheet.is-open, .episode-sheet.is-open.is-dragging { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.episode-sheet.is-open.is-closing { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.985); pointer-events: none; }
.episode-sheet .sheet-handle { display: none; }
.episode-sheet .sheet-header { padding: 0 0 20px; border: 0; align-items: center; }
.episode-sheet .sheet-header p { margin-bottom: 5px; color: #9696a6; font-size: 10px; }
.episode-sheet .sheet-header h2 { font-size: 21px; letter-spacing: normal; }
.episode-sheet .sheet-tabs { margin-top: 0; padding: 4px; border: 0; background: #25252b; }
.episode-sheet .sheet-tabs button { min-height: 35px; padding: 0 16px; font-size: 11px; }
.episode-sheet .sheet-tabs button.active { box-shadow: none; background: #eeeef2; color: #19191d; }
.episode-sheet .comment-form { background: var(--surface-color); }
.episode-sheet.is-comments { top: 50%; bottom: auto; height: 60dvh; max-height: min(78dvh, 680px); padding: 26px 28px 28px; border: 0; }
.episode-sheet.is-comments .sheet-content { max-width: none; }
body.sheet-open .reel-viewer.is-open + .viewer-back { visibility: hidden; opacity: 0; pointer-events: none; }
.subscription-view { transform: translateY(14px); transition: opacity 220ms ease, transform var(--surface-duration) var(--surface-ease), visibility 0s linear var(--surface-duration); }
.subscription-view.is-open { transform: translateY(0); transition: opacity 220ms ease, transform var(--surface-duration) var(--surface-ease), visibility 0s; }
.subscription-view.is-open.is-closing { opacity: 0; transform: translateY(14px); pointer-events: none; }
.account-menu { position: fixed; inset: auto; width: min(310px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: 0; padding: 12px; overflow-y: auto; border: 0; border-radius: 21px; background: #1b1b1f; color: #f0f0f6; box-shadow: 0 18px 70px #0009; opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity 160ms ease, transform 220ms var(--surface-ease), display 220ms allow-discrete, overlay 220ms allow-discrete; }
.account-menu:popover-open { opacity: 1; transform: translateY(0) scale(1); }
@starting-style { .account-menu:popover-open { opacity: 0; transform: translateY(-8px) scale(.98); } }
.account-menu-identity { display: flex; align-items: center; gap: 12px; padding: 10px 8px 18px; }
.account-menu-identity > span { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #36363f; color: #fff; font-size: 18px; direction: ltr; }
.account-menu-identity > div { min-width: 0; }
.account-menu-identity b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.account-menu-identity small { display: block; max-width: 208px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9393a3; font-size: 10px; text-align: right; }
.account-menu-plan { margin-bottom: 10px; padding: 16px; border-radius: 14px; background: #29292f; }
.account-menu-plan > small { color: #a6a6b5; font-size: 10px; }
.account-menu-plan > strong { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.account-menu-plan > p { margin: 8px 0 14px; font-size: 11px; color: #a5a5b5; }
.account-menu-plan > button { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 15px; border: 0; border-radius: 999px; background: #eeeef3; color: #18181d; font-size: 11px; font-weight: 600; cursor: pointer; }
.account-menu-plan svg { width: 16px; height: 16px; }
.account-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 45px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: #d0d0de; font: 12px Vazirmatn, Tahoma, sans-serif; text-align: right; cursor: pointer; }
.account-menu-row svg { flex-shrink: 0; width: 19px; height: 19px; color: #9999ac; }
.account-menu-row svg:last-child:not(:first-child) { width: 15px; height: 15px; margin-inline-start: auto; }
.account-menu-logout { margin-top: 7px; color: #dfabb4; }
.account-menu-logout svg { color: inherit; }
.account-menu button:focus-visible { outline: 2px solid #bfbfd0; outline-offset: 1px; }
@media (hover: hover) { .ui-close:hover { background: #373740; } .account-menu-row:hover { background: #2b2b33; } }
@media (max-width: 800px) {
  .ui-close svg, .ui-back svg { stroke-width: 2; }
  .account-identity > button { min-height: 38px; padding: 8px 16px; background: #25252b; }
  .account-dialog, .account-dialog[open] { transform: translateY(calc(100% + 24px)); }
  .account-dialog.is-open { transform: translateY(var(--account-drag-y, 0px)); }
  .account-dialog.is-open.is-closing { opacity: 0; transform: translateY(calc(100% + 24px)); }
  .account-dialog.is-dragging { transition: none; }
  .episode-sheet, .episode-sheet.is-comments { top: auto; bottom: 0; left: 50%; width: 100%; max-height: 85dvh; padding: 7px 24px calc(24px + env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; transform: translate(-50%, calc(100% + 24px)); }
  .episode-sheet.is-comments { height: 60dvh; max-height: 60dvh; }
  .episode-sheet.is-open, .episode-sheet.is-open.is-dragging { transform: translate(-50%, var(--sheet-drag-y, 0px)); }
  .episode-sheet.is-open.is-closing { opacity: 0; transform: translate(-50%, calc(100% + 24px)); }
  .episode-sheet.is-dragging { transition: none; }
  .episode-sheet .sheet-handle { display: block; height: 27px; margin-top: 0; }
  .episode-sheet .sheet-handle::after { width: 36px; background: #494951; }
  .episode-sheet .sheet-header { padding: 8px 0 20px; }
  .episode-sheet .sheet-header h2 { font-size: 21px; }
  .episode-sheet .sheet-content { padding-top: 20px; }
  .account-dialog-topbar { margin-bottom: 20px; }
  .account-dialog-topbar > .ui-close { width: 40px; height: 40px; flex-basis: 40px; }
}