/* acfuns app.css vaf183c188e4c */
/* /static/global.css */
:root {
  --green: #9be0bc;
  --orange: #ffb584;
  --secondary-bg: #ffffff12;
  --secondary-border: #ffffff08;
  --content-max: 1440px;
  --icon-xs: 16px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 24px;
  --topbar-height: 64px;
  --bottom-nav-height: 65px;
  --bottom-nav-gap: 13px;
  --top-safe-area: 0px;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/material-icons.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/material-icons-outlined.woff2) format('woff2');
}
@media (display-mode: standalone) {
  :root {
    --top-safe-area: env(safe-area-inset-top, 0px);
  }
}
:root[data-theme='light'] {
  --green: #247c50;
  --orange: #b85c25;
  --secondary-bg: #e9e5ef;
  --secondary-border: #d8d1e1;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
html,
body {
  min-width: 0;
  min-height: 100%;
  width: 100%;
}
body {
  margin: 0;
  overflow-x: hidden;
  line-height: 1.5;
  color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
  font-family: 'Noto Sans SC', Arial, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}
a,
button,
input,
label,
[role='button'],
.card,
.schedule-item,
.hero {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
button,
input {
  font: inherit;
  font-family: inherit;
}
button {
  border: 0;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible,
[role='button']:focus-visible,
.card:focus-visible,
.schedule-item:focus-visible,
.hero:focus-visible {
  outline: 2px solid rgb(var(--mdui-color-primary, 214, 188, 255));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.app {
  width: 100%;
  max-width: var(--content-max);
  min-height: 100dvh;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-left: 90px;
}
.brand {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgb(var(--mdui-color-primary, 214, 188, 255));
  color: rgb(var(--mdui-color-on-primary, 50, 22, 93));
  font-size: 22px;
  font-weight: 900;
}
body {
  padding-top: 0 !important;
  padding-left: 0 !important;
}
.content {
  min-width: 0;
  padding: 88px 46px 60px;
}
mdui-top-app-bar {
  left: max(90px, calc((100vw - var(--content-max)) / 2 + 90px));
  right: max(0px, calc((100vw - var(--content-max)) / 2));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 46px;
  --topbar-height: 64px;
}
mdui-top-app-bar mdui-top-app-bar-title {
  width: auto;
  flex: 0 1 auto !important;
  min-width: 0;
}
mdui-top-app-bar-title h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-rail {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - var(--content-max)) / 2));
  width: 90px !important;
  height: 100dvh !important;
  z-index: 25;
  --z-index: 25;
}
.app-rail mdui-navigation-rail-item {
  flex: 0 0 auto;
  width: 3.5rem;
  min-width: 0;
  max-width: none;
}
.top-spacer {
  flex: 1;
}
.top-actions {
  flex: none;
  display: flex;
  gap: 5px;
  align-items: center;
}
.bottom-nav {
  display: none;
}
.primary,
.secondary {
  border-radius: 11px;
  padding: 12px 18px;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.primary {
  background: rgb(var(--mdui-color-primary, 214, 188, 255));
  color: rgb(var(--mdui-color-on-primary, 50, 22, 93));
}
.secondary {
  background: var(--secondary-bg);
  color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
  border: 1px solid var(--secondary-border);
}
.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 36px 0 17px;
}
.section-head h3 {
  margin: 0;
  font-size: 20px;
}
.section-head span {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: 12px;
  cursor: pointer;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 17px;
}
.card {
  display: block;
  min-width: 0;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.card h4 {
  margin: 12px 0 4px;
  font-size: 14px;
  line-height: 1.4;
}
.card small {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: 11px;
}
.poster {
  aspect-ratio: 2 / 2.75;
  border-radius: 17px;
  overflow: hidden;
  position: relative;
  background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
}
.poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s;
}
.card:hover img {
  transform: scale(1.06);
}
.tag {
  background: #9be0bc1c;
  color: var(--green);
  border-radius: 7px;
  padding: 6px 9px;
}
mdui-icon {
  vertical-align: middle;
}
.bottom-nav mdui-icon,
.primary mdui-icon,
.secondary mdui-icon,
.section-head mdui-icon {
  font-size: var(--icon-md);
}
@media (max-width: 1050px) {
  .content {
    padding-left: 30px;
    padding-right: 30px;
  }
  mdui-top-app-bar {
    padding-left: 30px;
    padding-right: 30px;
  }
  .cards {
    gap: 16px;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  .app {
    padding-left: 64px;
  }
  .app-rail {
    left: 0 !important;
    width: 64px !important;
    padding-inline: 4px !important;
  }
  mdui-top-app-bar {
    left: 64px;
    gap: 8px;
    padding-inline: 12px;
  }
  .header-main {
    gap: 12px;
    padding-inline: 8px;
  }
  mdui-top-app-bar h1 {
    max-width: 180px;
    font-size: 20px;
  }
  .content {
    padding-left: 24px;
    padding-right: 24px;
  }
  mdui-top-app-bar {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (min-width: 901px) {
  mdui-top-app-bar h1 {
    max-width: 230px;
  }
}
@media (max-width: 700px) {
  html {
    overflow-y: auto;
    scrollbar-gutter: auto;
  }
  .app {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
  }
.app-rail {
    display: none !important;
  }
  .content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: calc(56px + var(--top-safe-area)) calc(17px + env(safe-area-inset-right, 0px)) calc(100px + env(safe-area-inset-bottom, 0px)) calc(17px + env(safe-area-inset-left, 0px));
  }
  mdui-top-app-bar {
    left: 0;
    right: 0;
    gap: 10px;
    padding: calc(6px + var(--top-safe-area)) calc(12px + env(safe-area-inset-right, 0px)) 6px calc(12px + env(safe-area-inset-left, 0px));
    backdrop-filter: blur(12px);
  }
  mdui-top-app-bar-title h1 {
    font-size: 16px;
    line-height: 1.3;
    max-width: 100%;
  }
.top-actions {\n    gap: 5px;\n  }\n
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  .card h4 {
    font-size: 13px;
  }
  .section-head {
    margin-top: 28px;
  }
  .bottom-nav {
    display: flex;
    position: fixed;
    z-index: 3;
    bottom: calc(var(--bottom-nav-gap) + env(safe-area-inset-bottom, 0px));
    left: calc(14px + env(safe-area-inset-left, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
    height: var(--bottom-nav-height);
    border-radius: 22px;
    background: rgba(44, 45, 52, 0.94);
    background: color-mix(in srgb, rgb(var(--mdui-color-surface-container-high, 44, 45, 52)) 88%, transparent);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 8px 24px #00000026;
  }
  @supports (background: color-mix(in srgb, white, black)) {
    .bottom-nav {
      box-shadow: none;
    }
  }
  @supports not (background: color-mix(in srgb, white, black)) {
    .bottom-nav {
      background: rgba(44, 45, 52, 0.94);
    }
  }
  :root[data-theme='light'] .bottom-nav {
    background: rgba(229, 224, 237, 0.94);
  }
  @supports (background: color-mix(in srgb, white, black)) {
    :root[data-theme='light'] .bottom-nav {
      background: color-mix(in srgb, rgb(var(--mdui-color-surface-container-high, 44, 45, 52)) 88%, transparent);
    }
  }
  .bottom-nav mdui-button {
    flex: 1;
    min-width: 44px;
    min-height: 44px;
    --shape-corner: var(--mdui-shape-corner-full, 999px);
  }
  .bottom-nav button {
    flex: 1;
    align-self: stretch;
    min-width: 44px;
    min-height: 44px;
    background: none;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    font-size: var(--icon-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 12px;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .bottom-nav button small {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(4px) scale(0.9);
    transition: max-height 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
    font-size: 9px;
    line-height: 14px;
  }
.bottom-nav button.active {
    color: rgb(var(--mdui-color-primary, 214, 188, 255));
    transform: translateY(-1px);
  }
  .bottom-nav button.active small {
    max-height: 14px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .bottom-nav.player-bottom-hidden {
    display: none;
  }
}
@media (max-height: 430px) and (min-width: 701px) {
}
.hero {
  --hero-overlay: linear-gradient(90deg, #13131a99 0%, #17171d44 48%, #17171d00 78%);
  --hero-title: #f7f5fb;
  --hero-meta: #d1cfd7;
  --hero-eyebrow: #d6bcff;
  min-height: 370px;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 48px 55px;
  color: var(--hero-title);
  background: var(--hero-overlay),
    url('https://images.unsplash.com/photo-1578632767115-351597cf2477?auto=format&fit=crop&w=1500&q=85') center / cover;
}
.api-hero {
  --hero-img: none;
  height: 370px;
  min-height: 370px;
  background-image: var(--hero-overlay), var(--hero-img), url('/placeholder.svg');
  background-position: center;
  background-size: cover;
}
.hero-copy {
  max-width: 510px;
  position: relative;
  z-index: 1;
}
.hero h2 {
  color: var(--hero-title);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.13;
  margin: 14px 0 12px;
  overflow-wrap: anywhere;
}
.hero p {
  color: var(--hero-muted, #d1cfd7);
  line-height: 1.8;
  font-size: 14px;
  margin: 0 0 25px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.meta {
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: 12px;
  margin-bottom: 22px;
}
.hero .meta {
  color: var(--hero-meta);
}
.eyebrow {
  color: rgb(var(--mdui-color-primary, 214, 188, 255));
  font-size: 11px;
  letter-spacing: 2px;
}
.hero .eyebrow {
  color: var(--hero-eyebrow);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.hero-swiper-wrap {
  position: relative;
  min-width: 0;
}
.hero-swiper {
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
}
.hero-swiper .hero {
  width: 100%;
}
.hero-nav {
  position: absolute;
  z-index: 2;
  width: 36px;
  height: 36px;
  bottom: 38px;
  border-radius: 50%;
  background: #101114aa;
  border: 1px solid #ffffff33;
  color: #f1f0f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(8px);
}
.hero-nav-prev {
  right: 72px;
}
.hero-nav-next {
  right: 28px;
}
.home-module {
  margin-top: 36px;
}
.home-module .section-head {
  margin-top: 0;
}
:root[data-theme='light'] {
  --hero-muted: #f4f1f8;
  --hero-pagination: #ffffff99;
}
:root[data-theme='light'] .hero {
  --hero-overlay: linear-gradient(90deg, #1a152299 0%, #2a243844 48%, #2a243800 78%);
  --hero-title: #ffffff;
  --hero-meta: #f0ecf5;
  --hero-eyebrow: #e8d9ff;
  --hero-muted: #f4f1f8;
}
:root[data-theme='light'] .hero .secondary {
  background: #ffffff22;
  color: #ffffff;
  border-color: #ffffff44;
}
:root[data-theme='light'] .hero .primary {
  background: #d6bcff;
  color: #32165d;
}
@media (max-width: 700px) {
  .hero-swiper-wrap {
    margin-top: 12px;
  }
  .hero-swiper {
    border-radius: 20px;
  }
  .hero-swiper .hero {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
    padding: 16px 14px 24px;
    align-items: end;
    cursor: pointer;
  }
  .hero-swiper .hero-copy {
    max-width: 100%;
  }
  .hero-swiper .hero .eyebrow,
  .hero-swiper .hero p,
  .hero-swiper .hero .meta,
  .hero-swiper .hero-actions {
    display: none;
  }
  .hero-swiper .hero h2 {
    font-size: clamp(20px, 5.8vw, 28px);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .hero-nav {
    width: 36px;
    height: 36px;
    bottom: 28px;
  }
  .hero-nav-prev {
    right: 56px;
  }
  .hero-nav-next {
    right: 14px;
  }
  .api-hero {
    --hero-overlay-mobile: linear-gradient(180deg, #10111477 0%, #13131a33 30%, transparent 58%),
      linear-gradient(0deg, #101114aa 0%, #10111466 26%, #10111422 52%, transparent 72%);
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    background-image: var(--hero-overlay-mobile), var(--hero-img), url('/placeholder.svg') !important;
    background-position: center 20% !important;
    background-size: cover !important;
  }
  :root[data-theme='light'] .api-hero {
    --hero-overlay-mobile: linear-gradient(180deg, #1a152277 0%, #2a243833 30%, transparent 58%),
      linear-gradient(0deg, #1a1522aa 0%, #1a152266 26%, #1a152222 52%, transparent 72%);
  }
  .home-module .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .home-module .card h4 {
    margin: 8px 0 3px;
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .home-module .card small {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 360px) {
  .home-module .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  .hero-nav {
    display: none;
  }
}
a {
            color: inherit;
            text-decoration: none;
        }
mdui-chip {
  border: 0;
}
::view-transition-old(root) {
  animation: acfuns-fade-out 0.28s ease forwards;
}
::view-transition-new(root) {
  animation: acfuns-fade-in 0.36s ease forwards;
}
@keyframes acfuns-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes acfuns-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}
html #nprogress .bar {
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--orange));
}
html #nprogress .peg {
  box-shadow: 0 0 10px var(--green), 0 0 5px var(--green);
}
html #nprogress .spinner-icon {
  border-top-color: var(--orange);
  border-left-color: var(--orange);
}
a[href]:active,
button[data-href]:active,
[data-prefetch]:active {
  opacity: 0.82;
}
.page-retry {
  position: fixed;
  left: 50%;
  top: calc(var(--topbar-height, 64px) + 8px);
  z-index: 9999;
  transform: translate(-50%, -8px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgb(var(--mdui-color-error-container, 72, 26, 28));
  color: rgb(var(--mdui-color-on-error-container, 252, 238, 238));
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.page-retry.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.page-retry b { font-weight: 700; text-decoration: underline; }
/* /static/index/index.css */
.hero-track {
        display: flex;
        transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hero-slide {
        flex: 0 0 100%;
        min-width: 0;
    }
    .hero-dots {
        position: absolute;
        z-index: 2;
        right: 28px;
        bottom: 18px;
        display: flex;
        gap: 5px;
    }
    .hero-dots button {
        width: 18px;
        height: 3px;
        border-radius: 2px;
        padding: 0;
        background: var(--hero-pagination, #ffffff55);
        transition: background-color 0.2s ease;
    }
    .hero-dots button.active {
        background: rgb(var(--mdui-color-primary, 214, 188, 255));
    }
    .week-tabs {
        display: flex;
        gap: 8px;
        overflow: auto;
        margin-bottom: 12px;
        scrollbar-width: none;
    }
    .week-tabs::-webkit-scrollbar {
        display: none;
    }
    .week-tab {
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        border-radius: 10px;
        padding: 9px 15px;
        white-space: nowrap;
        font-size: 12px;
        touch-action: manipulation;
        user-select: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .week-tab.active,
    .week-tab:hover {
        background: rgb(var(--mdui-color-primary, 214, 188, 255));
        color: rgb(var(--mdui-color-on-primary, 50, 22, 93));
    }
    .schedule-list {
        border-radius: 18px;
        overflow: hidden;
        min-height: 0;
    }
    .schedule-day {
        display: none;
    }
    .schedule-day.active {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 80px;
        gap: 1px;
        background: rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        border-radius: 18px;
        overflow: hidden;
    }
    .schedule-item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 12px 15px;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        cursor: pointer;
    }
    .schedule-item:hover {
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
    }
    .schedule-item img {
        flex: none;
        width: 42px;
        height: 55px;
        object-fit: cover;
        border-radius: 7px;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
    }
    .schedule-item div {
        flex: 1;
        min-width: 0;
    }
    .schedule-item b,
    .schedule-item small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .schedule-item b {
        font-size: 12px;
    }
    .schedule-item small {
        margin-top: 5px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 10px;
    }
    .schedule-item strong {
        flex: none;
        color: var(--orange);
        font-size: 12px;
    }
    @media (max-width: 700px) {
        .hero-dots {
            right: 14px;
            bottom: 14px;
        }
        .schedule-day.active {
            grid-template-columns: 1fr;
        }
    }
/* /static/index/404.css */
.not-found {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(48px, 10vw, 96px) 16px;
}
.not-found-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 32px 32px;
    text-align: center;
    background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
    border-radius: 24px;
    animation: notfound-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes notfound-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.not-found-code {
    font-size: clamp(72px, 16vw, 120px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgb(var(--mdui-color-primary, 214, 188, 255));
    font-variation-settings: 'opsz' auto;
}
.not-found-code .glitch {
    display: inline-block;
    color: var(--orange);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.not-found h2 {
    margin: 18px 0 8px;
    font-size: clamp(22px, 4vw, 28px);
    letter-spacing: -0.02em;
}
.not-found p {
    margin: 0 auto;
    max-width: 380px;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    font-size: 14px;
}
.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}
.not-found-hint {
    display: block;
    margin-top: 26px;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    font-size: 12px;
}
.not-found-hint label {
    color: rgb(var(--mdui-color-primary, 214, 188, 255));
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* /static/index/search.css */
body[data-page="search"] mdui-top-app-bar {
  display: none;
}
.content-search {
  padding-top: 18px;
}
.ms-idle[hidden],
.ms-results[hidden] {
  display: none !important;
}
.msearch {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.ms-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 0 18px;
  backdrop-filter: blur(8px);
}
.ms-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 7px 0 14px;
  background: rgb(var(--mdui-color-surface-container-high, 44, 45, 52));
  border-radius: var(--mdui-shape-corner-extra-large, 28px);
}
.ms-bar mdui-icon {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: var(--icon-md);
}
.ms-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
  font-size: 15px;
}
.ms-bar input::placeholder {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.ms-bar input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.ms-x {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.ms-x[hidden] {
  display: none !important;
}
.ms-btn {
  flex: none;
}
.ms-idle {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}
.ms-block {
  padding: 20px;
}
.ms-block-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ms-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-block-title mdui-icon {
  color: rgb(var(--mdui-color-primary, 214, 188, 255));
  font-size: 20px;
}
.ms-block-h h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.ms-link {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.ms-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ms-pills mdui-chip {
  --mdui-chip-label-text-size: 13px;
  --mdui-chip-container-height: 36px;
  --shape-corner: var(--mdui-shape-corner-full, 999px);
}
.ms-hot {
  display: grid;
  gap: 0;
}
.ms-hot button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 4px;
  background: none;
  text-align: left;
  min-width: 0;
  border-radius: 8px;
  transition: background 0.15s;
}
.ms-hot button:last-child {
  border-bottom: 0;
}
.ms-hot i {
  flex: none;
  width: 18px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.ms-hot i.top {
  color: #ff7a7a;
}
.ms-hot span {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-count {
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: 12px;
  margin: 0;
}
.ms-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 16px;
}
.ms-result-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ms-result-title h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ms-query {
  max-width: 180px;
  overflow: hidden;
  color: rgb(var(--mdui-color-primary, 214, 188, 255));
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ms-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  width: 100%;
  margin: 0 auto;
}
.ms-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-width: 0;
  overflow: hidden;
}
.ms-item-poster {
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
}
.ms-item-body {
  position: relative;
  flex: none;
  min-width: 0;
  padding: 11px 12px 13px;
}
.ms-item-body h4 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.ms-item-body small {
  display: block;
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-item-desc {
  display: none;
}
.ms-empty {
  text-align: center;
  color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
  font-size: 13px;
  padding: 48px 16px;
  border-radius: var(--mdui-shape-corner-large, 16px);
}
@media (min-width: 701px) {
  .content-search {
    padding: 20px 32px 48px;
  }
  .msearch {
    max-width: 920px;
  }
  .ms-sticky {
    padding: 0 0 16px;
  }
  .ms-top {
    gap: 12px;
  }
  .ms-bar {
    height: 50px;
    padding: 0 8px 0 16px;
    border-radius: 14px;
  }
  .ms-bar input {
    font-size: 16px;
  }
  .ms-btn {
    --mdui-button-height: 40px;
  }
  .ms-x {
    width: 30px;
    height: 30px;
  }
  .ms-idle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start;
    padding-top: 8px;
  }
  .ms-block-h {
    margin-bottom: 14px;
  }
  .ms-block-h h3 {
    font-size: 16px;
  }
  .ms-hot button {
    padding: 12px 8px;
    border-radius: 10px;
  }
  .ms-hot span {
    font-size: 14px;
  }
  .ms-hot i {
    font-size: 14px;
    width: 22px;
  }
  .ms-count {
    font-size: 13px;
    margin: 0;
  }
  .ms-result-head {
    margin-bottom: 16px;
  }
  .ms-result-title h2 {
    font-size: 24px;
  }
  .ms-item {
    --shape-corner: var(--mdui-shape-corner-large, 16px);
  }
  .ly-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .ms-item-body h4 {
    font-size: 14px;
  }
  .ms-empty {
    padding: 64px 24px;
    border-radius: var(--mdui-shape-corner-large, 16px);
    font-size: 14px;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  .ms-idle {
    grid-template-columns: 1fr;
  }
  .ly-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .ly-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (min-width: 1100px) {
  .msearch {
    max-width: 1080px;
  }
  .ms-idle {
    gap: 22px;
  }
  .ly-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
  }
}
@media (max-width: 700px) {
  .content-search {
    padding: calc(8px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(100px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
  }
  .msearch {
    max-width: none;
  }
  .ms-result-head {
    align-items: flex-start;
  }
  .ms-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }
}
@media (max-width: 380px) {
  .content-search {
    padding-inline: 10px;
  }
  .ms-top {
    gap: 4px;
  }
  .top-back {
    flex: none;
    width: 36px;
    height: 36px;
  }
  .ms-bar {
    gap: 5px;
    padding-left: 9px;
  }
  .ms-result-head {
    gap: 8px;
  }
  .ms-result-title {
    gap: 4px;
  }
  .ms-result-title h2 {
    font-size: 18px;
  }
  .ms-query {
    max-width: 92px;
  }
  .ms-btn {
    padding-inline: 9px;
  }
}
/* /static/index/category.css */
.page-title {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin: 12px 0 20px;
    }
    .page-title h2 {
        font-size: 30px;
        margin: 0;
    }
    .page-title p {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 13px;
        margin: 8px 0 0;
    }
    .filter-panel {
        padding: 18px 20px;
        margin-bottom: 25px;
    }
    .filter-row {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }
    .filter-heading {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 7px 0;
    }
    .filter-label,
    .filter-current {
        display: block;
    }
    .filter-label {
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
        font-size: 13px;
        font-weight: 600;
    }
    .filter-current {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 11px;
    }
    .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .filter-item {
        min-height: 34px;
        background: var(--secondary-bg);
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        border: 1px solid transparent;
        border-radius: 10px;
        padding: 6px 13px;
        font-size: 12px;
        white-space: nowrap;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .filter-item:hover {
        border-color: rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
    }
    .filter-item.active {
        background: rgb(var(--mdui-color-primary, 214, 188, 255));
        border-color: rgb(var(--mdui-color-primary, 214, 188, 255));
        color: rgb(var(--mdui-color-on-primary, 50, 22, 93));
        font-weight: 600;
    }
    .filter-item.active:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
    }
    .result-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0 14px;
    }
    .result-bar h3 {
        font-size: 18px;
        margin: 0;
    }
    .result-count {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
    }
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    align-items: start;
    scroll-margin-top: 100px;
}
    .catalog-grid .card {
        width: 100%;
        min-width: 0;
    }
    .catalog-grid .poster {
        width: 100%;
        aspect-ratio: 2 / 2.75;
        overflow: hidden;
        border-radius: 17px;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
    }
    .catalog-grid .poster img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .catalog-grid .card h4 {
        margin: 12px 0 4px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    .catalog-grid .card small {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 32px 0 10px;
    }
    .page-btn {
        min-width: 44px;
        height: 44px;
        border-radius: 9px;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        transition: background 0.2s, color 0.2s;
    }
    .page-btn:hover:not(:disabled) {
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
    }
    .page-btn.active {
        background: rgb(var(--mdui-color-primary, 214, 188, 255));
        color: rgb(var(--mdui-color-on-primary, 50, 22, 93));
    }
    .page-btn.disabled {
        opacity: 0.4;
        cursor: default;
        pointer-events: none;
    }
    .page-btn.ellipsis {
        background: none;
        cursor: default;
        pointer-events: none;
    }
    .catalog-empty {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 13px;
        text-align: center;
        padding: 56px 0;
    }
    @media (max-width: 700px) {
        .page-title h2 {
            font-size: 25px;
        }
        .filter-panel {
            padding: 14px 0 15px;
            border-radius: 16px;
        }
        .filter-row {
            display: block;
        }
        .filter-heading {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px 10px;
        }
        .filter-options {
            display: grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(2, 34px);
            grid-auto-columns: max-content;
            gap: 8px;
            overflow-x: auto;
            margin: 0 10px;
            overscroll-behavior-inline: contain;
            scrollbar-width: none;
            scroll-snap-type: inline proximity;
        }
        .filter-options::-webkit-scrollbar {
            display: none;
        }
        .filter-item {
            min-height: 34px;
            box-sizing: border-box;
            scroll-snap-align: start;
        }
        .catalog-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            scroll-margin-top: 70px;
        }
        .catalog-grid .poster {
            border-radius: 14px;
        }
        .catalog-grid .card h4 {
            font-size: 13px;
        }
        .pagination {
            gap: 4px;
            flex-wrap: wrap;
        }
        .page-btn {
            min-width: 36px;
            height: 36px;
            font-size: 13px;
            padding: 0 7px;
        }
    }
    @media (max-width: 360px) {
        .catalog-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px 12px;
        }
    }
/* /static/index/rank.css */
.rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.rank-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
    border: 1px solid rgb(var(--mdui-color-surface-container-high, 46, 47, 54));
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.rank-item:hover,
.rank-item:active {
    transform: translateY(-1px);
    background: rgb(var(--mdui-color-surface-container-high, 48, 49, 57));
}
.rank-no {
    flex: none;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 12px;
    background: rgb(var(--mdui-color-surface-container-high, 48, 49, 57));
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.rank-no.gold {
    background: linear-gradient(135deg, #ffd86b, #f0a500);
    color: rgb(26, 20, 0);
}
.rank-no.silver {
    background: linear-gradient(135deg, #d7dde5, #9aa3ac);
    color: rgb(30, 34, 40);
}
.rank-no.bronze {
    background: linear-gradient(135deg, #e0a070, #c47b3e);
    color: rgb(40, 20, 6);
}
.rank-poster {
    flex: none;
    width: 64px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: rgb(var(--mdui-color-surface-container-high, 48, 49, 57));
}
.rank-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rank-info {
    flex: 1;
    min-width: 0;
}
.rank-info h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.rank-meta {
    margin: 0 0 4px;
    font-size: 12px;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 12px;
}
.rank-live {
    color: rgb(var(--mdui-color-primary, 214, 188, 255));
    font-weight: 600;
}
.rank-score {
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
mdui-icon.rank-chev {
    flex: none;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    font-size: 20px;
}
@media (max-width: 700px) {
    .rank-item {
        gap: 12px;
        padding: 8px;
        border-radius: 14px;
    }
    .rank-no {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        border-radius: 10px;
    }
    .rank-poster {
        width: 56px;
        height: 78px;
        border-radius: 9px;
    }
    .rank-info h4 {
        font-size: 14px;
    }
}
/* /static/index/map.css */
.map-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 20px;
}
.map-section h2 {
    font-size: 19px;
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.map-count {
    font-size: 12px;
    font-weight: 500;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.map-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.map-nav-item {
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
    border: 1px solid rgb(var(--mdui-color-surface-container-high, 46, 47, 54));
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.map-nav-item:hover,
.map-nav-item:active {
    transform: translateY(-1px);
    background: rgb(var(--mdui-color-surface-container-high, 48, 49, 57));
}
.map-nav-item h3 {
    margin: 0 0 6px;
    font-size: 15px;
}
.map-nav-item p {
    margin: 0;
    font-size: 12px;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
}
.map-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.map-genre {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--secondary-bg);
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 13px;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.map-genre:hover,
.map-genre:active {
    border-color: rgb(var(--mdui-color-outline-variant, 50, 51, 58));
    color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
}
.map-vods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 16px;
}
.map-vods li {
    border-bottom: 1px solid rgb(var(--mdui-color-surface-variant, 46, 47, 54));
}
.map-vod {
    display: block;
    padding: 9px 2px;
    color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.map-vod:hover,
.map-vod:active {
    color: rgb(var(--mdui-color-primary, 214, 188, 255));
    padding-left: 6px;
}
@media (max-width: 700px) {
    .map-nav {
        grid-template-columns: 1fr 1fr;
    }
    .map-vods {
        grid-template-columns: 1fr 1fr;
    }
}
/* /static/index/detail.css */
.top-back {
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        display: grid;
        place-items: center;
        transition: background 0.15s, color 0.15s;
    }
.top-back:hover {
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
    }
    @media (max-width: 700px) {
        body[data-page="detail"] mdui-top-app-bar .top-back {
            background: none;
        }
    }
    .fresh-detail {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding-bottom: 28px;
    }
    .fresh-intro {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        gap: clamp(22px, 3.5vw, 40px);
        min-height: 0;
        padding: 28px 32px;
        --shape-corner: 24px;
    }
    .fresh-poster-wrap {
        position: relative;
        align-self: center;
        width: 180px;
    }
    .fresh-poster {
        display: block;
        object-fit: cover;
    }
    .fresh-intro > .fresh-poster-wrap .fresh-poster {
        width: 180px;
        height: auto;
        aspect-ratio: 2 / 2.82;
        border-radius: 14px;
        box-shadow: 0 16px 28px #00000042;
    }
    .fresh-summary {
        min-width: 0;
        align-self: center;
    }
    .fresh-label {
        color: rgb(var(--mdui-color-primary, 214, 188, 255));
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
    }
    .fresh-label span {
        margin-left: 8px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-weight: 500;
    }
    .fresh-summary h2 {
        max-width: 700px;
        margin: 10px 0 6px;
        font-size: clamp(28px, 3.8vw, 44px);
        line-height: 1.12;
        letter-spacing: -0.03em;
        overflow-wrap: anywhere;
    }
    .fresh-subtitle {
        margin: 0;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fresh-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        margin: 16px 0 12px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
    }
    .fresh-meta > span {
        display: inline-flex;
        align-items: center;
    }
    .fresh-meta > span + span::before {
        content: '';
        width: 3px;
        height: 3px;
        margin: 0 11px;
        border-radius: 50%;
        background: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        opacity: 0.55;
    }
    .fresh-status {
        color: var(--green);
    }
    .fresh-status i {
        width: 6px;
        height: 6px;
        margin-right: 6px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent);
    }
    .fresh-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }
    .fresh-tags mdui-chip::part(button) {
        min-height: 24px;
        padding: 0 8px;
    }
    .fresh-tags mdui-chip::part(label) {
        font-size: 10px;
    }
    .fresh-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
    }
    .fresh-buttons #btn-follow.active {
        --mdui-color-secondary-container: 214, 188, 255;
        --mdui-color-on-secondary-container: 50, 22, 93;
    }
    .fresh-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 20px;
        margin-top: 20px;
        align-items: start;
    }
    .fresh-left {
        display: grid;
        gap: 20px;
        min-width: 0;
    }
    .fresh-card {
        padding: 22px;
        min-width: 0;
        --shape-corner: 20px;
    }
    .fresh-episodes {
        min-height: 180px;
    }
    .fresh-card-title {
        display: flex;
        align-items: start;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .fresh-card-title h3 {
        margin: 0;
        font-size: 20px;
    }
    .fresh-card-title > span {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
    }
    .fresh-count {
        padding: 5px 9px;
        border-radius: 999px;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
    }
    .line-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: -4px 0 16px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .fresh-episodes .episodes {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
        gap: 9px;
        margin-top: 0;
    }
    .fresh-text {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 14px;
        line-height: 1.95;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .fresh-text p {
        margin: 0;
    }
    .fresh-info {
        position: sticky;
        top: calc(var(--topbar-height) + 16px);
    }
    .fresh-info dl {
        display: grid;
        gap: 0;
        margin: 0;
    }
    .fresh-info dl > div {
        display: grid;
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 12px;
        padding: 13px 0;
        border-bottom: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
    }
    .fresh-info dl > div:last-child {
        border-bottom: 0;
    }
    .fresh-info dt {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
    }
    .fresh-info dd {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .empty-state {
        text-align: center;
        padding: 48px 16px;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        border-radius: 20px;
        margin-top: 20px;
    }
    .empty-state p {
        margin: 0 0 14px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 14px;
    }
    @media (max-width: 1050px) and (min-width: 701px) {
        .fresh-intro {
            grid-template-columns: 164px minmax(0, 1fr);
            padding: 24px;
        }
        .fresh-poster-wrap,
        .fresh-intro > .fresh-poster-wrap .fresh-poster {
            width: 164px;
        }
        .fresh-layout {
            grid-template-columns: minmax(0, 1fr) 260px;
        }
    }
    @media (min-width: 701px) and (max-width: 900px) {
        .fresh-layout {
            display: flex;
            flex-direction: column;
        }
        .fresh-left,
        .fresh-info {
            width: 100%;
        }
        .fresh-info {
            position: static;
        }
    }
    @media (max-width: 700px) {
        .fresh-intro {
            grid-template-columns: 100px minmax(0, 1fr);
            gap: 14px;
            min-height: 0;
            padding: 15px;
            --shape-corner: 18px;
        }
        .fresh-poster-wrap {
            align-self: start;
            width: 100px;
        }
        .fresh-intro > .fresh-poster-wrap .fresh-poster {
            width: 100px;
            height: auto;
            border-radius: 10px;
        }
        .fresh-summary h2 {
            margin: 8px 0 5px;
            font-size: clamp(21px, 6.4vw, 28px);
            letter-spacing: -0.025em;
        }
        .fresh-meta {
            margin: 11px 0 9px;
        }
        .fresh-meta > span + span::before {
            margin: 0 6px;
        }
        .fresh-meta > span:nth-child(3) {
            display: none;
        }
        .fresh-meta > span:nth-child(4)::before {
            display: none;
        }
        .fresh-tags {
            display: flex;
            flex-wrap: nowrap;
            max-width: 100%;
            overflow: hidden;
            gap: 5px;
        }
        .fresh-buttons {
            gap: 6px;
        }
        .fresh-buttons mdui-button {
            flex: 1 1 0;
            min-width: 0;
        }
        .fresh-card {
            padding: 17px 15px;
            --shape-corner: 17px;
        }
        .fresh-episodes .episodes {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 7px;
        }
        .fresh-card-title {
            margin-bottom: 14px;
        }
        .fresh-card-title h3 {
            font-size: 17px;
        }
        .fresh-info dl > div {
            padding: 10px 0;
        }
        .fresh-info {
            order: 2;
            position: static;
        }
.fresh-layout {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            margin-top: 14px;
            gap: 14px;
        }
        .fresh-text {
            font-size: 13px;
            line-height: 1.8;
        }
    }
    @media (max-width: 430px) {
        .fresh-intro {
            grid-template-columns: 88px minmax(0, 1fr);
            gap: 12px;
            padding: 13px;
        }
        .fresh-poster-wrap,
        .fresh-intro > .fresh-poster-wrap .fresh-poster {
            width: 88px;
        }
        .fresh-label {
            letter-spacing: 0.8px;
        }
        .fresh-label span,
        .fresh-subtitle {
            display: none;
        }
    }
    @media (max-width: 360px) {
        .fresh-episodes .episodes {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
/* /static/index/player.css */
.app.is-player mdui-top-app-bar {
        display: none;
    }
    .content.content-player {
        padding-top: 20px;
        padding-bottom: 28px;
    }
    .player-page {
        min-width: 0;
        max-width: 1280px;
        margin: 0 auto;
        scrollbar-width: none;
    }
    .player-page::-webkit-scrollbar,
    .player-page *::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .player-page * {
        scrollbar-width: none;
    }
    html:has(.app.is-player),
    body:has(.app.is-player) {
        scrollbar-width: none;
    }
    html:has(.app.is-player)::-webkit-scrollbar,
    body:has(.app.is-player)::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .player-toolbar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
        min-width: 0;
    }
    .player-back {
        display: inline-flex;
    }
    .player-back:hover {
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
    }
    @media (min-width: 701px) {
        #player-container .art-layer-back {
            display: none !important;
        }
    }
    .player-back-overlay {
        display: inline-flex;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
        width: 44px;
        height: 44px;
        min-width: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(8, 9, 12, 0.66);
        border: 1px solid #ffffff2e;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(8px);
        color: #f1f0f5;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease, background 0.2s ease;
    }
    .player-back-overlay:active {
        transform: scale(0.9);
        background: rgba(8, 9, 12, 0.75);
    }
    .player-toolbar-meta {
        min-width: 0;
        flex: 1;
        display: flex;
        align-items: baseline;
        gap: 10px;
        overflow: hidden;
    }
    .player-toolbar-meta b {
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .player-toolbar-meta span {
        flex: none;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
        white-space: nowrap;
    }
    .watch-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        gap: 18px;
        margin-top: 0;
        align-items: start;
        container-type: inline-size;
    }
    .watch-main {
        min-width: 0;
        display: grid;
        gap: 14px;
    }
    .watch-player {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #08090c;
        border-radius: 18px;
        border: 1px solid var(--secondary-border);
        box-shadow: 0 16px 40px #0005;
    }
    .watch-player:before {
        display: none !important;
    }
    .watch-player video,
    .watch-player .artplayer-container {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        background: #08090c;
    }
    .player-overview {
        padding: 13px;
        border: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        border-radius: 14px;
        background: color-mix(in srgb, rgb(var(--mdui-color-surface-container, 35, 36, 42)) 48%, transparent);
    }
    .player-info {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }
    .player-poster {
        width: 64px;
        aspect-ratio: 2 / 2.82;
        height: auto;
        display: block;
        object-fit: cover;
        border-radius: 10px;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        box-shadow: 0 8px 18px #00000033;
    }
    .player-title {
        min-width: 0;
        flex: 1;
    }
    .player-title h3 {
        margin: 3px 0 2px;
        font-size: 16px;
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .player-title p {
        margin: 0;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
    }
    .player-now {
        display: block;
        color: rgb(var(--mdui-color-primary, 214, 188, 255));
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
    }
    .player-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        margin-top: 8px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 11px;
    }
    .player-meta > span {
        display: inline-flex;
        align-items: center;
    }
    .player-meta > span + span::before {
        content: '';
        width: 3px;
        height: 3px;
        margin: 0 7px;
        border-radius: 50%;
        background: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        opacity: 0.55;
    }
    .player-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 11px;
    }
    .player-tags span {
        padding: 3px 7px;
        border: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        border-radius: 999px;
        background: color-mix(in srgb, rgb(var(--mdui-color-surface-container, 35, 36, 42)) 72%, transparent);
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 10px;
    }
    .detail-panel {
        display: flex;
        flex-direction: column;
        gap: 0;
        scrollbar-width: none;
    }
    .player-section {
        margin-top: 14px;
        padding-top: 0;
    }
    .player-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
    .player-section-head h4 {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
    }
    .player-section-head span {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 11px;
        white-space: nowrap;
    }
    .player-section .line-tabs {
        min-width: 0;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        overflow-x: visible;
        margin: 0 0 2px;
    }
    .player-section .line-tabs mdui-button {
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
    }
    .player-section-episodes {
        min-height: 0;
    }
    .watch-side {
        position: sticky;
        top: 20px;
        height: calc((100cqw - 340px - 18px) * 9 / 16);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        border: 1px solid #ffffff08;
        border-radius: 18px;
        padding: 0 16px;
        min-width: 0;
    }
    .tabbar {
        position: relative;
        flex: none;
        margin: 0 -16px;
    }
    .watch-tabs {
        flex: none;
        margin: 0;
    }
    .watch-tabs::part(indicator) {
        display: none;
    }
    .tab-indicator {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: rgb(var(--mdui-color-primary, 214, 188, 255));
        transition: left 280ms cubic-bezier(0.2, 0.8, 0.2, 1), width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
        pointer-events: none;
    }
    .watch-tabs::part(container) {
        gap: 0;
    }
    .watch-tabs mdui-tab {
        flex: 1;
    }
    .watch-tabs mdui-tab::part(container) {
        min-height: 48px;
        padding: 0 12px;
    }
    .watch-tabs mdui-tab::part(label) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
    }
    .watch-tabs mdui-tab[active]::part(label) {
        font-weight: 600;
    }
    .watch-tabs small {
        font-size: 11px;
        opacity: 0.75;
    }
    .tab-panel > p {
        margin: 0;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
    }
    .watch-episodes {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 7px;
        margin-top: 0;
    }
    .watch-episodes mdui-button {
        min-width: 0;
        width: 100%;
        height: 36px;
        --shape-corner: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .watch-episodes mdui-button::part(button) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 5px;
    }
    .watch-episodes mdui-button::part(label) {
        font-size: 12px;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    .comment-form {
        display: flex;
        gap: 8px;
    }
    .tab-viewport {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .tab-track {
        display: flex;
        height: 100%;
        transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: transform;
    }
    .tab-panel {
        flex: 0 0 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        padding: 8px 8px 16px;
        box-sizing: border-box;
    }
    .comment-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .comment-scroll {
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        padding-right: 3px;
        scrollbar-width: none;
    }
    .comment-scroll::-webkit-scrollbar {
        display: none;
    }
    .comment-composer {
        flex: none;
        padding-top: 12px;
        border-top: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
    }
    .comment-toolbar,
    .comment-replying {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 11px;
    }
    .comment-toolbar select {
        max-width: 110px;
        padding: 6px 24px 6px 8px;
        border: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        border-radius: 8px;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
        font-size: 11px;
        cursor: pointer;
    }
    .comment-replying {
        justify-content: flex-start;
        padding: 7px 9px;
        border-radius: 8px;
        background: color-mix(in srgb, rgb(var(--mdui-color-primary, 214, 188, 255)) 10%, transparent);
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
    }
    .comment-replying button,
    .comment-error button,
    .comment-actions button {
        min-height: 32px;
        padding: 6px 8px;
        background: none;
        border: 0;
        cursor: pointer;
        color: rgb(var(--mdui-color-primary, 214, 188, 255));
        font-size: inherit;
    }
    .comment-form input {
        min-width: 0;
        flex: 1;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        border: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        border-radius: 10px;
        padding: 10px 11px;
        color: rgb(var(--mdui-color-on-surface, 241, 240, 245));
        font-size: 13px;
        font-family: inherit;
        outline: 0;
    }
    .comment-form input:focus {
        border-color: rgb(var(--mdui-color-primary, 214, 188, 255));
    }
    .comment-form .primary {
        margin: 0;
        padding: 9px 12px;
        flex: none;
        border: 0;
        cursor: pointer;
    }
    .comment-form .primary:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }
    .comment-list {
        display: grid;
        gap: 17px;
        margin-top: 18px;
    }
    .comment-item {
        display: flex;
        gap: 11px;
    }
    mdui-avatar.comment-avatar {
        flex: none;
        width: 32px;
        height: 32px;
    }
    .comment-body {
        min-width: 0;
        flex: 1;
    }
    .comment-meta {
        display: flex;
        gap: 9px;
        align-items: center;
    }
    .comment-meta b {
        font-size: 12px;
    }
    .comment-meta span,
    .comment-body small {
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 10px;
    }
    .comment-body p {
        margin: 6px 0 5px;
        font-size: 13px;
        line-height: 1.7;
        word-break: break-word;
    }
    .comment-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 10px;
    }
    .player-follow {
        width: 100%;
        min-height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        margin-top: 12px;
        padding: 8px 12px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: rgb(var(--mdui-color-primary, 214, 188, 255));
        color: rgb(var(--mdui-color-on-primary, 50, 22, 93));
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
    }
    .player-follow:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
    }
    .player-follow.active {
        border-color: color-mix(in srgb, rgb(var(--mdui-color-primary, 214, 188, 255)) 55%, rgb(var(--mdui-color-outline-variant, 50, 51, 58)));
        background: color-mix(in srgb, rgb(var(--mdui-color-primary, 214, 188, 255)) 14%, rgb(var(--mdui-color-surface-container, 35, 36, 42)));
        color: rgb(var(--mdui-color-primary, 214, 188, 255));
    }
    .player-follow:disabled {
        cursor: wait;
        opacity: 0.7;
    }
    .player-follow mdui-icon {
        font-size: 16px;
    }
    .player-follow .spin {
        animation: spin 0.8s linear infinite;
    }
    .player-follow-error {
        margin: 8px 0 0;
        text-align: center;
        color: #f28b82;
        font-size: 11px;
        line-height: 1.35;
    }
    .comment-actions > span,
    .comment-actions button:not(:last-child) {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    .comment-actions button:disabled {
        cursor: wait;
        opacity: 0.5;
    }
    .comment-replies {
        display: grid;
        gap: 12px;
        margin-top: 12px;
        padding-left: 10px;
        border-left: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
    }
    .comment-item.reply .comment-avatar {
        width: 26px;
        height: 26px;
    }
    .comment-error {
        margin: 10px 0 0 !important;
        padding: 8px 10px;
        border-radius: 8px;
        background: color-mix(in srgb, #ff6b6b 10%, transparent);
        color: #ff9b9b !important;
    }
    .comment-more {
        width: 100%;
        padding: 8px;
        border: 1px solid rgb(var(--mdui-color-outline-variant, 50, 51, 58));
        border-radius: 9px;
        background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 11px;
        cursor: pointer;
        transition: background 160ms ease, color 160ms ease;
    }
    .comment-more:not([disabled]):hover {
        background: color-mix(in srgb, rgb(var(--mdui-color-primary, 214, 188, 255)) 10%, rgb(var(--mdui-color-surface-container, 35, 36, 42)));
        color: rgb(var(--mdui-color-primary, 214, 188, 255));
    }
    .comment-empty {
        margin: 0;
        text-align: center;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 12px;
        padding: 28px 0 10px;
    }
    .comment-replying[hidden],
    .comment-list[hidden] {
        display: none !important;
    }
    .empty-state {
        text-align: center;
        padding: 48px 16px;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32));
        border-radius: 20px;
        margin-top: 20px;
    }
    .empty-state p {
        margin: 0 0 14px;
        color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177));
        font-size: 14px;
    }
    .empty-state .primary mdui-icon {
        font-size: 16px;
    }
    mdui-icon.icon-xs {
        font-size: 14px;
    }
    @media (max-width: 1050px) and (min-width: 701px) {
        .watch-layout {
            grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
            gap: 14px;
        }
        .player-info {
            grid-template-columns: 64px minmax(0, 1fr);
            gap: 10px;
        }
        .player-poster {
            width: 64px;
        }
        .player-title h3 {
            font-size: 15px;
        }
        .watch-side {
            height: calc((100cqw - 300px - 14px) * 9 / 16);
            padding: 0 14px;
        }
        .tabbar {
            margin: 0 -14px;
        }
    }
    @media (min-width: 701px) and (max-width: 900px) {
        .watch-layout {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .watch-main,
        .watch-side {
            width: 100%;
        }
        .watch-side {
            position: static;
            height: auto;
            min-height: 420px;
        }
    }
    @media (max-width: 700px) {
        html:has(.app.is-player),
        body:has(.app.is-player) {
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
        }
        .app.is-player,
        .app.is-player .content,
        .app.is-player .player-page,
        .app.is-player .watch-layout,
        .app.is-player .watch-main,
        .app.is-player .watch-player {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }
        .app.is-player {
            height: 100dvh;
            min-height: 0;
            padding-left: 0 !important;
            margin: 0 !important;
            display: block !important;
            overflow: hidden;
        }
        .content.content-player {
            height: 100dvh;
            min-height: 0;
            padding: calc(env(safe-area-inset-top, 0px)) 0 calc(env(safe-area-inset-bottom, 0px)) !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
            overflow: hidden;
        }
        .player-page {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            max-width: none;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }
        .player-toolbar {
            display: none;
        }
        .player-toolbar-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            min-width: 0;
        }
        .player-toolbar-meta b {
            font-size: 13px;
            max-width: 100%;
        }
        .player-toolbar-meta span {
            font-size: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        .watch-layout {
            display: flex !important;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            gap: 0;
            margin-top: 0 !important;
            width: 100%;
        }
        .watch-main {
            flex: none;
            gap: 12px;
            width: 100%;
            min-width: 0;
        }
        .watch-player {
            width: 100% !important;
            min-height: 0 !important;
            height: auto !important;
            aspect-ratio: 16 / 9;
            border-radius: 0;
            border: 0;
            box-shadow: none;
            margin: 0;
        }
        .player-info {
            grid-template-columns: 58px minmax(0, 1fr);
            gap: 10px;
            margin: 0;
            padding: 0;
            width: 100%;
            box-sizing: border-box;
        }
        .player-poster {
            width: 58px;
            border-radius: 8px;
        }
        .player-title {
            display: block;
            margin-top: 0;
        }
        .player-title h3 {
            font-size: 14px;
            margin-bottom: 4px;
            white-space: normal;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }
        .player-title p {
            font-size: 11px;
        }
        .player-meta {
            margin-top: 6px;
            font-size: 10px;
        }
        .player-tags {
            margin-top: 7px;
        }
        .player-overview {
            padding: 11px;
        }
        .player-section {
            margin-top: 12px;
        }
        .player-section-head {
            margin-bottom: 8px;
        }
        .player-section .line-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
        }
        .watch-side {
            position: static !important;
            top: auto;
            flex: 1;
            min-height: 0;
            height: auto !important;
            max-height: none !important;
            overflow: hidden;
            margin: 0 !important;
            padding: 0;
            border-radius: 0;
            width: 100% !important;
            box-sizing: border-box;
        }
        .tab-panel {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .comment-scroll {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .tabbar {
            margin: 0;
        }
        .watch-tabs mdui-tab::part(container) {
            min-height: 44px;
            padding: 0 8px;
        }
        .watch-tabs mdui-tab::part(label) {
            font-size: 12px;
            gap: 4px;
        }
        .watch-episodes {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 7px;
            width: 100%;
        }
        .watch-episodes mdui-button {
            height: 44px;
            min-width: 0;
            width: 100%;
        }
        .watch-episodes mdui-button::part(label) {
            font-size: 11px;
            padding-left: 0;
            padding-right: 0;
        }
        .player-page .empty-state {
            margin: 0;
            width: 100%;
            box-sizing: border-box;
        }
        .comment-form .primary {
            margin-right: 0;
        }
        .bottom-nav.player-bottom-hidden {
            display: none !important;
        }
    }
    @media (max-width: 700px) and (max-height: 560px),
        (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
        html:has(.app.is-player),
        body:has(.app.is-player),
        .app.is-player,
        .content.content-player,
        .app.is-player .player-page {
            height: auto;
            min-height: 100dvh;
            overflow-y: auto;
            overscroll-behavior-y: auto;
        }
        .app.is-player {
            width: 100%;
            max-width: none;
            padding-left: 0;
        }
        .app.is-player .app-rail {
            display: none;
        }
        .content.content-player {
            padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)) !important;
        }
        .watch-layout {
            display: flex;
            flex-direction: column;
            flex: none;
        }
        .watch-player {
            max-height: 62dvh;
        }
        .watch-side {
            flex: none;
            width: 100%;
            min-height: 360px;
            height: auto;
            position: static;
        }
    }
    @media (max-width: 360px) {
        .watch-episodes {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }
/* /static/profile/profile.css */
.m3-profile {
  --m3-primary: #d0bcff;
  --m3-on-primary: #381e72;
  --m3-primary-container: #4f378b;
  --m3-on-primary-container: #eaddff;
  --m3-secondary-container: #4a4458;
  --m3-on-secondary-container: #e8def8;
  --m3-surface: #1c1b1f;
  --m3-surface-1: #25232a;
  --m3-surface-2: #2b2930;
  --m3-surface-3: #36343b;
  --m3-on-surface: #e6e1e5;
  --m3-on-surface-variant: #cac4d0;
  --m3-outline: #938f99;
  --m3-outline-variant: #49454f;
  --m3-error: #f2b8b5;
  --m3-on-error: #601410;
  --m3-success: #9be0bc;
  --m3-snackbar-ok-bg: #313033;
  --m3-snackbar-ok-fg: #f4eff4;
  --m3-hero-cover: linear-gradient(125deg, #4f378b, #2b2930 55%, #1c1b1f);
  --m3-avatar-mid: #b69df8;
  --m3-radius-sm: 12px;
  --m3-radius-md: 16px;
  --m3-radius-lg: 28px;
  --m3-elev-1: 0 1px 2px #0000003d, 0 1px 3px 1px #00000026;
  --m3-elev-2: 0 1px 2px #0000003d, 0 2px 6px 2px #00000026;
  min-width: 0;
  margin-top: 4px;
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  color: var(--m3-on-surface);
}
:root[data-theme='light'] .m3-profile {
  --m3-primary: #7142b5;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #eaddff;
  --m3-on-primary-container: #381e72;
  --m3-secondary-container: #e9e5ef;
  --m3-on-secondary-container: #4a4458;
  --m3-surface: #f7f5fb;
  --m3-surface-1: #ffffff;
  --m3-surface-2: #eeebf4;
  --m3-surface-3: #e5e0ed;
  --m3-on-surface: #28242f;
  --m3-on-surface-variant: #716b7b;
  --m3-outline: #857e8f;
  --m3-outline-variant: #ddd7e6;
  --m3-error: #b3261e;
  --m3-on-error: #ffffff;
  --m3-success: #247c50;
  --m3-snackbar-ok-bg: #313033;
  --m3-snackbar-ok-fg: #f4eff4;
  --m3-hero-cover: linear-gradient(125deg, #7142b5, #9b7ad4 45%, #c4b0e8);
  --m3-avatar-mid: #9b7ad4;
  --m3-elev-1: 0 1px 2px #28242f14, 0 1px 3px 1px #28242f0f;
  --m3-elev-2: 0 1px 2px #28242f14, 0 2px 6px 2px #28242f12;
}
.m3-edit-page {
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
  gap: 12px;
}
.edit-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'avatar copy btn';
  align-items: center;
  gap: 12px 14px;
  padding: 14px;
  border-radius: var(--m3-radius-lg);
  background: var(--m3-surface-1);
  box-shadow: var(--m3-elev-1);
}
.edit-avatar {
  grid-area: avatar;
  width: 64px;
  height: 64px;
  border-width: 0;
}
.edit-strip-copy {
  grid-area: copy;
  min-width: 0;
}
.edit-strip-copy h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  word-break: break-word;
}
.edit-strip-copy p {
  margin: 4px 0 0;
  color: var(--m3-on-surface-variant);
  font-size: 13px;
}
.edit-strip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.edit-strip-btn {
  grid-area: btn;
  width: auto;
  min-width: 0;
  padding: 10px 14px;
}
.edit-form {
  display: grid;
  gap: 0;
  border-radius: var(--m3-radius-lg);
  background: var(--m3-surface-1);
  box-shadow: var(--m3-elev-1);
  overflow: hidden;
  padding-bottom: 4px;
}
.edit-block {
  border-top: 1px solid var(--m3-outline-variant);
}
.edit-block:first-of-type {
  border-top: 0;
}
.edit-block-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 0;
}
.edit-block-head > mdui-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-size: 22px;
}
.edit-block-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.edit-block-head p {
  margin: 4px 0 0;
  color: var(--m3-on-surface-variant);
  font-size: 12px;
  line-height: 1.4;
}
.edit-block-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}
.edit-field-grid {
  display: grid;
  gap: 12px;
}
.edit-field-span {
  min-width: 0;
}
.m3-field-label em {
  color: var(--m3-error);
  font-style: normal;
  margin-left: 2px;
}
.edit-feedback {
  margin: 0 16px;
}
.edit-feedback.m3-snackbar {
  margin: 0 16px;
}
.edit-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 12px;
  position: sticky;
  bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + env(safe-area-inset-bottom, 0px) + 6px);
  z-index: 5;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, var(--m3-surface-1) 30%);
}
.edit-footer .m3-btn {
  width: 100%;
}
.m3-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--m3-radius-lg);
  background: var(--m3-surface-1);
  box-shadow: var(--m3-elev-1);
}
.m3-hero-cover {
  display: block;
  height: 112px;
  background:
    radial-gradient(circle at 18% 40%, #ffb58455, transparent 38%),
    radial-gradient(circle at 82% 20%, #d0bcff77, transparent 40%),
    var(--m3-hero-cover);
}
.m3-hero-body {
  display: grid;
  gap: 14px;
  margin-top: -48px;
  padding: 0 16px 0;
  justify-items: center;
  text-align: center;
}
.m3-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--m3-surface-1);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, var(--m3-primary), var(--m3-avatar-mid) 45%, #ffb584);
  color: var(--m3-on-primary);
  box-shadow: var(--m3-elev-2);
}
.m3-avatar.guest { cursor: default; }
.m3-avatar.busy { opacity: 0.72; cursor: wait; }
.m3-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m3-avatar-letter { font-size: 34px; font-weight: 700; line-height: 1; }
mdui-icon.m3-avatar-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-size: 16px !important;
  border: 2px solid var(--m3-surface-1);
}
.m3-identity { min-width: 0; width: 100%; }
.m3-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.m3-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.25; word-break: break-word; }
.m3-body { margin: 6px 0 0; color: var(--m3-on-surface-variant); font-size: 14px; line-height: 1.45; word-break: break-word; }
.m3-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.m3-assist-chip, .m3-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m3-assist-chip { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
.m3-filter-chip { background: transparent; color: var(--m3-on-surface-variant); border: 1px solid var(--m3-outline-variant); }
.m3-filter-chip mdui-icon { font-size: 16px; }
.m3-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 360px; }
.m3-actions .m3-btn { width: 100%; }
.m3-btn {
  min-height: 40px;
  border-radius: 20px;
  padding: 10px 20px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 120ms cubic-bezier(0.2, 0, 0, 1);
}
.m3-btn mdui-icon { font-size: 18px; }
.m3-btn.filled { background: var(--m3-primary); color: var(--m3-on-primary); box-shadow: var(--m3-elev-1); }
.m3-btn.tonal { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
.m3-btn.outlined { background: transparent; color: var(--m3-primary); border: 1px solid var(--m3-outline); }
.m3-btn.text { background: transparent; color: var(--m3-primary); min-height: 40px; padding: 8px 12px; }
.m3-btn.compact { min-height: 40px; font-size: 12px; padding: 7px 10px; }
.m3-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
.m3-btn:active:not(:disabled) { transform: scale(0.98); }
.m3-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--m3-on-surface-variant); flex: none; transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1), transform 120ms cubic-bezier(0.2, 0, 0, 1); }
.m3-icon-btn.subtle { width: 44px; height: 44px; background: var(--m3-surface-2); }
.m3-icon-btn mdui-icon { font-size: 20px; }
.m3-icon-btn:active:not(:disabled) { transform: scale(0.92); }
.m3-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px; padding: 12px 6px; border-radius: var(--m3-radius-md); background: var(--m3-surface-2); }
.m3-stats.logged { grid-template-columns: repeat(3, 1fr); }
.m3-stat { text-align: center; min-width: 0; }
.m3-stat strong { display: block; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--m3-on-surface); }
.m3-stat span { display: block; margin-top: 2px; font-size: 11px; color: var(--m3-on-surface-variant); }
.m3-snackbar { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 12px 16px; border-radius: 4px; font-size: 13px; line-height: 1.35; box-shadow: var(--m3-elev-2); }
.m3-snackbar.ok { background: var(--m3-snackbar-ok-bg); color: var(--m3-snackbar-ok-fg); }
.m3-snackbar.error { background: var(--m3-error); color: var(--m3-on-error); }
.m3-snackbar mdui-icon { font-size: 20px; }
.m3-inline-error { display: flex; align-items: flex-start; gap: 8px; color: var(--m3-error); font-size: 12px; line-height: 1.4; }
.m3-inline-error mdui-icon { font-size: 18px; flex: none; }
.m3-sheet { border-radius: var(--m3-radius-lg) var(--m3-radius-lg) var(--m3-radius-md) var(--m3-radius-md); background: var(--m3-surface-1); box-shadow: var(--m3-elev-2); padding: 8px 16px 18px; }
.m3-modal-backdrop { position: fixed !important; z-index: 1000; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: #00000099; overscroll-behavior: contain; }
.m3-auth-dialog { position: relative; inset: auto; flex: 0 1 460px; width: min(100%, 460px); max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); margin: auto; overflow-y: auto; border-radius: var(--m3-radius-lg); padding: 24px; box-sizing: border-box; }
.m3-auth-dialog .m3-sheet-handle { display: none; }
.m3-dialog-enter-active,
.m3-dialog-leave-active {
  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
}
.m3-dialog-enter-active .m3-auth-dialog,
.m3-dialog-leave-active .m3-auth-dialog {
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);
}
.m3-dialog-enter-from,
.m3-dialog-leave-to { opacity: 0; }
.m3-dialog-enter-from .m3-auth-dialog,
.m3-dialog-leave-to .m3-auth-dialog { opacity: 0; transform: translateY(12px) scale(0.96); }
.m3-dialog-enter-to .m3-auth-dialog,
.m3-dialog-leave-from .m3-auth-dialog { opacity: 1; transform: translateY(0) scale(1); }
.m3-sheet.static { border-radius: var(--m3-radius-lg); padding: 16px; }
.m3-sheet-handle { width: 32px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--m3-outline-variant); }
.m3-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.m3-sheet-head h3 { margin: 0; font-size: 22px; font-weight: 500; }
.m3-sheet-head p { margin: 6px 0 0; color: var(--m3-on-surface-variant); font-size: 13px; line-height: 1.4; }
.m3-form { display: grid; gap: 14px; }
.m3-form-section { display: grid; gap: 12px; }
.m3-section-label { margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--m3-on-surface-variant); }
.m3-field { display: grid; gap: 6px; min-width: 0; }
.m3-field-label { font-size: 12px; font-weight: 500; color: var(--m3-on-surface-variant); padding-left: 4px; }
.m3-field-input { width: 100%; min-height: 56px; border-radius: 4px 4px 0 0; border: 0; border-bottom: 1px solid var(--m3-outline); background: var(--m3-surface-2); color: var(--m3-on-surface); padding: 16px 16px 12px; font-size: 16px; outline: 0; box-sizing: border-box; transition: border-color 0.15s ease, background-color 0.15s ease; }
.m3-field-input:focus { border-bottom: 2px solid var(--m3-primary); background: var(--m3-surface-3); padding-bottom: 11px; }
.m3-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m3-captcha-box { display: flex; align-items: stretch; gap: 10px; }
.m3-captcha-box .m3-captcha-input { min-width: 0; flex: 1; }
.m3-captcha-img { width: 104px; flex: none; border-radius: 4px; background: var(--m3-surface-2); cursor: pointer; }
.m3-auth-link { justify-self: start; }
.m3-form-actions { display: grid; gap: 10px; margin-top: 4px; }
.m3-form-actions.sticky { position: sticky; bottom: 84px; padding-top: 8px; background: linear-gradient(180deg, transparent, var(--m3-surface-1) 20%); }
.m3-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.m3-list-card { width: 100%; border-radius: var(--m3-radius-lg); background: var(--m3-surface-1); box-shadow: var(--m3-elev-1); padding: 8px 8px 4px; overflow: hidden; }
.m3-list-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.m3-list-head h3 { margin: 0; font-size: 16px; font-weight: 500; padding: 4px 8px; }
.m3-list-head.compact { padding: 8px 4px 4px; }
.m3-secondary-tabs { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); min-width: 0; border-bottom: 1px solid var(--m3-outline-variant); }
.m3-tab { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; background: none; color: var(--m3-on-surface-variant); font-size: 13px; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.m3-tab mdui-icon { font-size: 18px; }
.m3-tab.active { color: var(--m3-primary); border-bottom-color: var(--m3-primary); }
.m3-list { display: grid; }
.m3-list-item { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 8px; border-radius: var(--m3-radius-sm); cursor: pointer; transition: background-color 0.12s ease; overflow: hidden; }
.m3-list-item:active { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); }
.m3-list-thumb { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--m3-surface-3); flex: none; }
.m3-list-content { min-width: 0; flex: 1; }
.m3-list-link { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.m3-list-content b { display: block; font-size: 15px; font-weight: 500; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-list-content span { display: block; color: var(--m3-on-surface-variant); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-list-meta { margin-top: 2px !important; font-size: 11px !important; opacity: 0.85; }
.m3-progress { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--m3-surface-3); overflow: hidden; }
.m3-progress i { display: block; height: 100%; border-radius: inherit; background: var(--m3-primary); }
.m3-empty { text-align: center; padding: 40px 16px 32px; color: var(--m3-on-surface-variant); }
mdui-icon.m3-empty-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--m3-surface-2); font-size: 32px; color: var(--m3-outline); }
.m3-empty p { margin: 0 0 18px; font-size: 14px; }
.m3-empty .m3-btn { min-width: 160px; }
.m3-loading.compact { padding-bottom: 8px; }
.m3-nav-item { gap: 16px; width: 100%; }
.m3-list-item.m3-nav-item { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; }
.m3-nav-icon { font-size: 28px !important; color: var(--m3-primary); flex: none; }
.m3-nav-chevron { color: var(--m3-outline); font-size: 20px !important; }
.m3-loading { display: grid; place-items: center; padding: 48px 16px; }
.m3-spinner { width: 28px; height: 28px; border: 3px solid var(--m3-outline-variant); border-top-color: var(--m3-primary); border-radius: 50%; animation: m3-spin 0.8s linear infinite; }
@keyframes m3-spin { to { transform: rotate(360deg); } }
.m3-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 8px; }
.m3-page-btn { width: 44px; height: 44px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--m3-surface-2); color: var(--m3-on-surface); cursor: pointer; transition: background 0.15s; }
.m3-page-btn:hover:not(:disabled) { background: var(--m3-surface-3); }
.m3-page-btn:active:not(:disabled) { transform: scale(0.92); }
.m3-page-btn:disabled { opacity: 0.3; cursor: default; }
.m3-page-btn mdui-icon { font-size: 20px; }
.m3-page-info { display: flex; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 500; color: var(--m3-on-surface-variant); }
.m3-page-current { color: var(--m3-primary); font-size: 16px; }
.m3-page-sep { opacity: 0.5; }
.m3-page-total { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .m3-btn,
  .m3-icon-btn,
  .m3-dialog-enter-active,
  .m3-dialog-leave-active,
  .m3-dialog-enter-active .m3-auth-dialog,
  .m3-dialog-leave-active .m3-auth-dialog {
    transition-duration: 1ms;
  }
}
@media (min-width: 701px) {
  .m3-profile { width: 100%; max-width: 1080px; gap: 18px; }
  .m3-hero { border-radius: 32px; }
  .m3-hero-cover { height: 148px; }
  .m3-hero-body { margin-top: -56px; padding: 0 28px; gap: 16px; }
  .m3-avatar { width: 112px; height: 112px; }
  .m3-avatar:not(.guest):hover { filter: brightness(1.05); }
  .m3-avatar-letter { font-size: 40px; }
  mdui-icon.m3-avatar-badge { width: 32px; height: 32px; font-size: 18px !important; }
  .m3-title { font-size: 28px; }
  .m3-body { font-size: 15px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .m3-actions { max-width: 400px; gap: 12px; }
  .m3-btn { min-height: 44px; padding: 12px 24px; font-size: 14px; }
  .m3-btn.filled:hover:not(:disabled) { box-shadow: var(--m3-elev-2); filter: brightness(1.04); }
  .m3-btn.outlined:hover:not(:disabled), .m3-btn.tonal:hover:not(:disabled), .m3-btn.text:hover:not(:disabled) { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); }
  .m3-stats { margin: 20px 28px 24px; padding: 16px 12px; gap: 12px; border-radius: 20px; }
  .m3-stat strong { font-size: 22px; }
  .m3-stat span { font-size: 12px; }
  .m3-snackbar { margin: 0 28px 20px; max-width: 480px; }
  .m3-sheet { padding: 12px 24px 24px; border-radius: 28px; }
  .m3-auth-dialog { padding: 28px; border-radius: 28px; }
  .m3-sheet.static { padding: 24px 28px 28px; }
  .m3-sheet-handle { display: none; }
  .m3-sheet-head h3 { font-size: 24px; }
  .m3-form { gap: 16px; max-width: 640px; }
  .m3-form-actions { grid-template-columns: auto auto; justify-content: start; gap: 12px; }
  .m3-form-actions .m3-btn { width: auto; min-width: 140px; }
  .m3-form-actions.sticky { grid-template-columns: auto auto auto; position: static; padding-top: 12px; background: none; }
  .m3-list-card { border-radius: 28px; padding: 12px 16px; }
  .m3-list-head { padding: 8px 8px 12px; }
  .m3-secondary-tabs { max-width: 420px; }
  .m3-tab { min-height: 52px; font-size: 14px; gap: 8px; }
  .m3-tab mdui-icon { font-size: 20px; }
  .m3-list-item { min-height: 80px; padding: 12px; gap: 16px; border-radius: 16px; overflow: hidden; }
  .m3-list-item:hover { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); }
  .m3-list-thumb { width: 56px; height: 74px; border-radius: 10px; }
  .m3-list-content b { font-size: 16px; }
  .m3-list-content span { font-size: 14px; }
  .m3-icon-btn:hover { background: var(--m3-surface-3); }
  .m3-progress { max-width: 360px; }
  .m3-empty { padding: 56px 24px 48px; }
  .m3-edit-page { max-width: 760px; }
  .edit-strip {
    padding: 18px 22px;
    gap: 16px 18px;
  }
  .edit-avatar { width: 72px; height: 72px; }
  .edit-strip-copy h2 { font-size: 20px; }
  .edit-block-head { padding: 20px 24px 0; gap: 14px; }
  .edit-block-head h3 { font-size: 18px; }
  .edit-block-body { padding: 16px 24px 20px; gap: 14px; }
  .edit-field-grid { grid-template-columns: 1fr 1fr; }
  .edit-field-span { grid-column: 1 / -1; }
  .edit-feedback,
  .edit-footer { margin-left: 24px; margin-right: 24px; }
  .edit-footer {
    grid-template-columns: auto auto;
    justify-content: end;
    position: static;
    padding-top: 4px;
    background: none;
    gap: 12px;
    margin-bottom: 18px;
  }
  .edit-footer .m3-btn {
    width: auto;
    min-width: 140px;
  }
}
@media (min-width: 1100px) {
  .m3-profile:not(.m3-edit-page):not(.m3-list-page) {
    max-width: 1200px;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    grid-template-areas: 'hero list' 'sheet list';
    align-items: start;
    column-gap: 20px;
    row-gap: 16px;
  }
  .m3-profile:not(.m3-edit-page):not(.m3-list-page) .m3-hero { grid-area: hero; position: sticky; top: 96px; }
  .m3-profile:not(.m3-edit-page):not(.m3-list-page) .m3-sheet { grid-area: sheet; }
  .m3-profile:not(.m3-edit-page):not(.m3-list-page) .m3-list-section { grid-area: list; display: flex; flex-direction: column; gap: 12px; min-height: 480px; }
  .m3-profile:not(.m3-edit-page):not(.m3-list-page) .m3-file { grid-column: 1 / -1; }
  .m3-stats { margin-left: 20px; margin-right: 20px; }
  .m3-list-page { display: block; max-width: 720px; margin: 0 auto; }
  .m3-list-page .m3-list-card { min-height: auto; }
}
@media (max-width: 480px) {
  .edit-strip {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'avatar copy'
      'btn btn';
  }
  .edit-strip-btn {
    width: 100%;
  }
}
@media (max-height: 560px) {
  .m3-auth-dialog {
    padding: 18px;
  }
  .m3-form {
    gap: 10px;
  }
  .m3-field-input {
    min-height: 48px;
    padding-top: 12px;
  }
}
@media (max-width: 360px) {
  .m3-field-row { grid-template-columns: 1fr; }
  .m3-tab mdui-icon { display: none; }
}
#auth-dialog {
  --shape-corner: 22px;
}
#auth-dialog::part(panel) {
  width: min(100%, 400px);
}
#auth-dialog::part(action) {
  padding-top: 0.5rem;
}
#auth-dialog .auth-form {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}
#auth-dialog .auth-fields {
  display: grid;
  gap: 14px;
}
#auth-dialog mdui-text-field {
  width: 100%;
}
#auth-dialog .auth-field-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
#auth-dialog .auth-field-row mdui-text-field {
  flex: 1;
  min-width: 0;
}
#auth-dialog .auth-captcha {
  width: 104px;
  flex: none;
  border-radius: 8px;
  background: rgb(var(--mdui-color-surface-container, 35, 36, 42));
  cursor: pointer;
  object-fit: cover;
}
#auth-dialog .auth-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: rgb(var(--mdui-color-error));
  font-size: 12px;
  line-height: 1.4;
}
#auth-dialog .auth-error[hidden] {
  display: none;
}
#auth-dialog .auth-error mdui-icon {
  font-size: 18px;
  flex: none;
}
#auth-dialog .auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
#auth-dialog .auth-link {
  padding: 4px 0;
  min-width: 0;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgb(var(--mdui-color-primary));
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
#auth-dialog .auth-link:hover {
  text-decoration: underline;
}
#auth-dialog mdui-button#auth-submit {
  width: 100%;
}
#auth-dialog mdui-button#auth-submit::part(button) {
  min-height: 40px;
  border-radius: 20px;
  padding: 0 22px;
}
/* /static/profile/history.css */
.top-back {
        width: 43px; height: 43px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32)); color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177)); font-size: var(--icon-md);
        transition: background .2s ease, color .2s ease;
    }
.top-back:hover { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); color: rgb(var(--mdui-color-on-surface, 241, 240, 245)); }
    body[data-page="profile"] mdui-top-app-bar .top-back { display: inline-flex; }
    .m3-list-page .m3-list-head { justify-content: space-between; }
    .m3-list-page .m3-list-item { cursor: pointer; }
/* /static/profile/bookmarks.css */
.top-back {
        width: 43px; height: 43px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32)); color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177)); font-size: var(--icon-md);
        transition: background .2s ease, color .2s ease;
    }
.top-back:hover { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); color: rgb(var(--mdui-color-on-surface, 241, 240, 245)); }
    body[data-page="profile"] mdui-top-app-bar .top-back { display: inline-flex; }
    .m3-list-page .m3-list-head { justify-content: space-between; }
    .bm-recovery {
        text-align: center; padding: 40px 16px 32px; color: var(--m3-on-surface-variant);
    }
    .bm-recovery .m3-btn { min-width: 160px; }
/* /static/profile/feedback.css */
.top-back {
        width: 43px; height: 43px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32)); color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177)); font-size: var(--icon-md);
        transition: background .2s ease, color .2s ease;
    }
.top-back:hover { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); color: rgb(var(--mdui-color-on-surface, 241, 240, 245)); }
    body[data-page="profile"] mdui-top-app-bar .top-back { display: inline-flex; }
    .m3-list-head-desc { color: var(--m3-on-surface-variant); font-size: 13px; margin-left: auto; }
    .feedback-form { display: grid; gap: 16px; padding: 16px 20px 20px; }
    .feedback-types { display: flex; gap: 8px; flex-wrap: wrap; }
    .feedback-type-btn {
        display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
        border: 1px solid var(--m3-outline); border-radius: 20px;
        background: transparent; color: var(--m3-on-surface-variant); font-size: 13px;
        font-family: inherit; cursor: pointer; transition: all .2s ease;
    }
    .feedback-type-btn mdui-icon { font-size: 18px; }
    .feedback-type-btn:hover { background: var(--m3-surface-3); }
    .feedback-type-btn.active {
        border-color: var(--m3-primary);
        background: color-mix(in srgb, var(--m3-primary) 12%, transparent);
        color: var(--m3-primary);
    }
    .feedback-label {
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        padding: 0 4px; color: var(--m3-on-surface-variant); font-size: 13px; font-weight: 500;
    }
    .feedback-label em { color: var(--m3-error); font-style: normal; }
    .feedback-label small { color: var(--m3-outline); font-size: 11px; font-weight: 400; }
    .feedback-textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
    .feedback-bar { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--m3-surface-3); overflow: hidden; }
    .feedback-bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--m3-primary); transition: width .15s ease; }
    .feedback-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
    .feedback-actions .m3-btn { min-width: 140px; }
    .feedback-actions .spin { animation: fb-spin .8s linear infinite; }
    @keyframes fb-spin { to { transform: rotate(360deg); } }
    .feedback-done {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        min-height: 260px; padding: 40px 20px; text-align: center; gap: 8px;
    }
mdui-icon.feedback-check {
        width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 6px;
        border-radius: 50%; background: color-mix(in srgb, var(--m3-success) 18%, transparent);
        color: var(--m3-success); font-size: 38px; animation: feedback-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes feedback-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
    .feedback-done h3 { margin: 0; font-size: 20px; font-weight: 500; }
    .feedback-done p { margin: 0; color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177)); font-size: 13px; }
    @media (min-width: 701px) {
        .feedback-form { gap: 20px; }
        .feedback-textarea { min-height: 180px; }
        .feedback-done { min-height: 300px; padding: 48px 28px; }
        mdui-icon.feedback-check { width: 80px; height: 80px; font-size: 42px; }
        .feedback-done h3 { font-size: 22px; }
        .m3-list-head-desc { font-size: 14px; }
    }
    @media (max-width: 700px) {
        .m3-list-page .m3-list-card.feedback-card { border-radius: 20px; }
        .feedback-form { gap: 14px; padding: 14px 16px 16px; }
        .feedback-textarea { min-height: 140px; }
        .feedback-actions { display: block; }
        .feedback-actions .m3-btn { width: 100%; }
    }
    @media (max-height: 560px) and (orientation: landscape) {
        .feedback-textarea { min-height: clamp(80px, 24dvh, 120px); }
        .feedback-done { min-height: 180px; padding-block: 20px; }
    }
/* /static/profile/edit.css */
.top-back {
        width: 43px; height: 43px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgb(var(--mdui-color-surface-container-low, 26, 27, 32)); color: rgb(var(--mdui-color-on-surface-variant, 168, 167, 177)); font-size: var(--icon-md);
        transition: background .2s ease, color .2s ease;
    }
.top-back:hover { background: rgb(var(--mdui-color-surface-container, 35, 36, 42)); color: rgb(var(--mdui-color-on-surface, 241, 240, 245)); }
    body[data-page="profile"] mdui-top-app-bar .top-back { display: inline-flex; }
    .m3-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .edit-avatar { border-width: 0; }
    .edit-avatar.busy { opacity: .72; cursor: wait; }