/* Figma 4JZv2O3FAntZiS7HuJ955v, Page 1. Keep live data and existing interactions. */
.figma-ui {
    --design-accent: #1faa93;
    --design-selection: #e9f9f6;
    --design-text: #2d2d2d;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
}
.figma-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
}

/* Theater: the original logo and monochrome icons from the design. */
.figma-ui.theater-page {
    padding-inline: 12px;
    background: #f6f6f6 url("../images/figma/theater-header.png") top center / 100% 210px no-repeat;
}
.figma-ui .theater-top { margin-inline: -12px; padding: 17px 12px 16px; }
.figma-ui .theater-topline { min-height: 40px; }
.figma-ui .theater-logo { width: 111px; height: 34px; flex-basis: 111px; }
.figma-ui .theater-logo img { width: auto; height: auto; }
.figma-ui .theater-search-button {
    width: 40px; height: 40px; flex-basis: 40px;
    border: 0; border-radius: 12px; background: #fff; box-shadow: none;
}
.figma-ui .theater-shortcuts { gap: 12px; margin-bottom: 10px; }
.figma-ui.theater-page .theater-shortcuts a {
    height: 40px; min-height: 40px; gap: 9px;
    border: 0; border-radius: 9px; color: var(--design-text);
    background: #fff; font-size: 16px; font-weight: 400; box-shadow: none;
}
.figma-ui .theater-shortcuts img { display: block; flex-shrink: 0; }
.figma-rank-icon { position: relative; display: block; width: 16px; height: 20px; }
.figma-rank-icon .figma-rank-detail { position: absolute; left: 4.595px; top: 9.114px; }

/* Shared spacing keeps filters, ranking tabs and cards on the same left edge. */
.figma-ui.discover { --discover-section-gap: 18px; }
/* Rankings and latest: supplied artwork, with real navigation and real cards below. */
.figma-ui.discover:not(.discover--filter) .discover-header {
    padding: 0; min-height: 0; aspect-ratio: 375 / 211; background: #d5f9e6;
}
.figma-ui.discover .discover-header::after { display: none; }
.figma-ui .discover-hero-picture { display: block; width: 100%; height: 100%; }
.figma-ui .discover-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.figma-ui.discover:not(.discover--filter) .discover-bar {
    position: absolute; top: 5px; left: 14px; z-index: 2;
    height: 36px; color: #163a34;
}
.figma-ui.discover:not(.discover--filter) .discover-body {
    margin-top: -12.8%; padding: var(--discover-section-gap) 14px 25px; border-radius: 19px 19px 0 0;
}
.figma-ui.discover .selected { color: var(--design-accent); background: var(--design-selection); font-weight: 500; }
.figma-ui .discover-rank-tabs { width: auto; padding: 0; gap: 7px; margin: 0 0 var(--discover-section-gap); }
.figma-ui .discover-rank-tabs a { height: 36px; min-width: 66px; padding: 8px 11px; border: 0; border-radius: 8px; }
.figma-ui .discover-new {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 17px; padding: 0;
    top: 7px; right: 6px; border-radius: 4px;
    color: #163a34; background: linear-gradient(258deg, #13f9d7, #4bffae);
    font-size: 10px; line-height: 10px; font-weight: 400; box-shadow: none;
}
.figma-ui.discover--latest .discover-options { margin: 0 0 calc(var(--discover-section-gap) - 9px); padding: 0 0 8px; gap: 8px; }
.figma-ui.discover--latest .discover-options a { padding: 7px 9px; border-radius: 5px; }
.figma-ui.discover--filter .discover-header { min-height: 0; padding: 6px 14px 0; }
.figma-ui.discover--filter .discover-bar h1 { font-size: 19px; font-weight: 600; }
.figma-ui.discover--filter .discover-body { margin: 0; padding-top: var(--discover-section-gap); }
.figma-ui.discover--filter .discover-options { gap: 8px; margin: 0 0 8px; padding: 0; }
.figma-ui.discover--filter .discover-options:last-child { margin-bottom: var(--discover-section-gap); }
.figma-ui.discover--filter .discover-options a { padding: 6px 10px; border-radius: 5px; font-weight: 400; }
.figma-ui.discover--filter .discover-options a.selected { font-weight: 500; }
.figma-ui.discover--filter .discover-copy h2 { font-size: 14px; font-weight: 600; }

/* Search: single compact row; empty state is independent from the search form. */
.figma-ui.search-page { background: #fff; }
.figma-ui.search-page .search-hero {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px 12px; background: #fff;
}
.figma-ui.search-page .search-back {
    position: static; flex: 0 0 19px; width: 19px; height: 42px;
    justify-content: flex-start; border-radius: 0;
}
.figma-ui .search-back img { display: block; transform: rotate(180deg); }
.figma-ui.search-page .search-form {
    flex: 1; min-width: 0; max-width: none; height: 42px;
    margin: 0; padding: 0; gap: 14px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.figma-ui .search-input-shell {
    flex: 1; min-width: 0; height: 42px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 11px; background: #f7f7f7; border-radius: 5px;
}
.figma-ui .search-input-shell > img { display: block; flex-shrink: 0; }
.figma-ui.search-page .search-form input { font-size: 14px; }
.figma-ui.search-page .search-submit {
    min-width: 28px; height: 42px; padding: 0;
    color: #199784; background: transparent; border-radius: 0; font-size: 14px; font-weight: 400;
}
.figma-ui.search-page .search-content { margin: 0; padding-top: 12px; border-radius: 0; background: #fff; min-height: calc(100dvh - 65px); }
.figma-ui.search-page .search-empty {
    min-height: calc(100dvh - 107px); padding: 0 20px 15vh;
    justify-content: center;
}
.figma-ui.search-page .search-empty-icon { width: 65px; height: 65px; background: transparent; border-radius: 0; }
.figma-ui.search-page .search-empty h2 { margin: 19px 0 0; color: #a1a3a6; font-size: 15px; line-height: 18px; font-weight: 400; }

/* Episode sheet: Figma 14:320. Only the sheet changes, not the player. */
.figma-episodes .safari-pop-style {
    background: #fff !important;
    color: #171919;
    color-scheme: light;
    padding: 20px 15px calc(20px + env(safe-area-inset-bottom));
}
.figma-episodes .pop-header {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    grid-template-rows: minmax(27px, auto) 20px auto;
    gap: 5px 10px;
    min-height: 90px;
    margin-bottom: 24px;
}
.figma-episodes .pop-header .pop-left,
.figma-episodes .pop-header .pop-info { display: contents; }
.figma-episodes .pop-cover { grid-column: 1; grid-row: 1 / 4; align-self: start; }
.figma-episodes .pop-cover img { display: block; box-shadow: 0 3px 9px rgba(0, 0, 0, .18); }
.figma-episodes .pop-info h3 {
    grid-column: 2 / -1; grid-row: 1; min-width: 0; margin: 0;
    color: #171919; font-size: 17px; line-height: 23px; overflow-wrap: anywhere;
}
.figma-episodes .pop-info .count { grid-column: 2; grid-row: 2; margin: 0; color: #93969a; font-size: 14px; line-height: 20px; }
.figma-episodes .pop-info .tags {
    grid-column: 2 / -1; grid-row: 3; align-self: start;
    display: flex; flex-wrap: wrap; gap: 4px; margin: 0;
}
.figma-episodes .pop-info .tags span {
    margin: 0; padding: 3px 5px; border-radius: 1px;
    background: #00bd91; color: #fff; font-size: 14px; line-height: 20px;
}
.figma-episodes .pop-header .pop-btn-box { grid-column: 3; grid-row: 2; align-self: center; }
.figma-episodes .pop-header .follow-btn {
    padding: 5px 14px; background: #00bd91; color: #fff;
    border-radius: 18px; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer;
}
.figma-episodes .pop-header .follow-btn.not-follow { background: #e9f9f6; color: #199784; }
.figma-episodes .pop-tabs { border-bottom: 0; margin-bottom: 15px; }
.figma-episodes .tab-item { color: #93969a; font-size: 15px; line-height: 20px; }
.figma-episodes .tab-item.active { color: #171919; }
.figma-episodes .tab-item.active::after { background: #00bd91; }
.figma-episodes .intro-pane { color: #666b70; font-size: 14px; }
.figma-episodes .page-nav span { padding: 2px 10px; line-height: 19px; font-size: 14px; background: #f3f3f3; color: #93969a; }
.figma-episodes .page-nav span.now { background: #00bd91; color: #fff; }
.figma-episodes .chapter-grid li {
    height: 45px; border: 1px solid transparent; box-sizing: border-box;
    border-radius: 5px; background: #f3f3f3; color: #34383b; font-size: 14px; cursor: pointer;
}
.figma-episodes .chapter-grid li.lock { color: #93969a; }
.figma-episodes .chapter-grid li.playing { color: #00bd91; border-color: #00bd91; }

/* Personal center already uses the design's icons and layout. */
body .my-page.figma-ui { background-image: linear-gradient(to bottom, transparent 65px, #f5f6f7 180px), linear-gradient(125deg, #e4faf3, #edf6ff 56%, #f5f8e5); }
@media (max-width: 899px) {
    body .my-page.figma-ui .my-profile-card { min-height: 80px; }
    body .my-page.figma-ui .my-avatar { width: 44px; height: 44px; }
    body .my-page.figma-ui .my-vip-banner { min-height: 100px; padding: 14px 17px; }
    body .my-page.figma-ui .my-vip-title { font-size: 14px; }
    body .my-page.figma-ui .my-vip-desc { font-size: 12px; line-height: 16px; }
    body .my-page.figma-ui .my-menu-item { min-height: 52px; }
    body .my-page.figma-ui .my-menu-text { font-size: 14px; }
}

/* Balance the mobile tabs against the first card's 8px top padding. */
@media (max-width: 899px) {
    .figma-ui.discover--rank .discover-rank-tabs { margin-bottom: calc(var(--discover-section-gap) - 8px); }
}
/* Desktop layout and dedicated wide header artwork. */
@media (min-width: 900px) {
    .figma-ui.discover { --discover-section-gap: 22px; }
    .figma-ui.theater-page { padding-inline: 30px; }
    .figma-ui .theater-top { margin-inline: -30px; padding: 24px 30px 18px; }
    .figma-ui .theater-shortcuts { gap: 16px; margin-bottom: 20px; }
    .figma-ui .theater-shortcuts a { height: 46px; }
    .figma-ui.discover:not(.discover--filter) .discover-header { height: 260px; aspect-ratio: auto; background: #defcea; }
    .figma-ui .discover-hero-image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .figma-ui.discover:not(.discover--filter) .discover-bar { top: 18px; left: 28px; }
    .figma-ui.discover:not(.discover--filter) .discover-body { margin-top: -48px; padding: var(--discover-section-gap) 28px 112px; }
    .figma-ui.discover--filter .discover-header { padding: 12px 28px 0; }
    .figma-ui.search-page .search-hero { gap: 14px; padding: 22px 30px; }
    .figma-ui.search-page .search-form { max-width: 760px; margin-inline: auto; }
    .figma-ui.search-page .search-content { padding: 18px 30px 112px; }
    .figma-ui.search-page .search-empty { min-height: calc(100dvh - 230px); }
}

html[data-site-theme="dark"] .figma-ui { --design-selection: #183a35; --design-accent: #55dfcb; }
html[data-site-theme="dark"] .figma-ui .theater-shortcuts img,
html[data-site-theme="dark"] .figma-ui .theater-search-button img,
html[data-site-theme="dark"] .figma-ui .search-back img { filter: invert(1); }
html[data-site-theme="dark"] .figma-ui .theater-logo img { filter: brightness(0) invert(1); }
html[data-site-theme="dark"] .site-theme-page .figma-ui.search-page .search-hero { background: #111516; }
html[data-site-theme="dark"] .site-theme-page .figma-ui.search-page .search-form { background: transparent; }
html[data-site-theme="dark"] .figma-ui .search-input-shell { background: #2b3032; }
html[data-site-theme="dark"] .site-theme-page .figma-ui.search-page .search-empty-icon { background: transparent; }
html[data-site-theme="dark"] body .my-page.figma-ui { background-image: none; }
.figma-ui a:focus-visible, .figma-ui button:focus-visible { outline: 2px solid var(--design-accent); outline-offset: 3px; }
.figma-ui .search-input-shell:focus-within { outline: 2px solid var(--design-accent); outline-offset: 2px; }